/* ===================================================================== Water Supply Management System – Mobile-First App Styles Theme: Water Blue · White · Subtle warmth on accents Layout: max-width 480px centered, app-shell on desktop ===================================================================== */ :root { /* Palette — calm aqua tones */ --aro-primary: #0a7ea4; --aro-primary-dark: #075f7d; --aro-primary-light: #e6f4f9; --aro-accent: #14b8a6; --aro-bg: #f5f9fc; --aro-surface: #ffffff; --aro-text: #0f2a36; --aro-text-muted: #5a7b89; --aro-border: #e1ecf2; /* Semantic */ --aro-red: #dc2626; --aro-red-bg: #fee2e2; --aro-green: #16a34a; --aro-green-bg: #dcfce7; --aro-amber: #d97706; /* Layout */ --aro-shell-max: 480px; --aro-nav-h: 64px; --aro-header-h: 56px; --aro-radius: 14px; --aro-radius-sm: 10px; --aro-shadow-sm: 0 1px 2px rgba(15, 42, 54, 0.06); --aro-shadow-md: 0 4px 14px rgba(15, 42, 54, 0.08); --aro-shadow-lg: 0 10px 30px rgba(15, 42, 54, 0.12); } /* ===================================================================== Phase 5.3 — Selectable colour themes Admin picks one in Settings; the choice is applied via . No class = default Water Blue palette above. ===================================================================== */ /* Theme 2: Emerald — fresh, water-purity feel */ body.theme-emerald { --aro-primary: #059669; --aro-primary-dark: #047857; --aro-primary-light: #d1fae5; --aro-accent: #10b981; --aro-bg: #f6fbf8; --aro-text: #0b3a2a; --aro-text-muted: #4a6b5a; --aro-border: #d8ebe1; } /* Theme 3: Sunset — warm coral/orange, energetic look */ body.theme-sunset { --aro-primary: #ea580c; --aro-primary-dark: #b8420b; --aro-primary-light: #fff1e6; --aro-accent: #f59e0b; --aro-bg: #fff8f3; --aro-text: #3b1d09; --aro-text-muted: #7d5a45; --aro-border: #f5e2d0; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body.app-body { background: linear-gradient(180deg, #dbe9f1 0%, #f5f9fc 240px); min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans Devanagari", Arial, sans-serif; color: var(--aro-text); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } /* --------------------------------------------------------------------- The mobile shell — narrow column even on desktop --------------------------------------------------------------------- */ .mobile-shell { max-width: var(--aro-shell-max); margin: 0 auto; background: var(--aro-bg); min-height: 100vh; position: relative; box-shadow: 0 0 40px rgba(15, 42, 54, 0.06); padding-bottom: calc(var(--aro-nav-h) + env(safe-area-inset-bottom)); } /* --------------------------------------------------------------------- App header (top bar inside shell) --------------------------------------------------------------------- */ .app-header { height: var(--aro-header-h); background: linear-gradient(135deg, var(--aro-primary) 0%, var(--aro-primary-dark) 100%); color: #fff; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; box-shadow: var(--aro-shadow-sm); } .app-header .title { font-size: 17px; font-weight: 600; letter-spacing: 0.2px; flex: 1; text-align: center; } .app-header .icon-btn { background: transparent; border: none; color: #fff; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 19px; text-decoration: none; } .app-header .icon-btn:hover { background: rgba(255,255,255,0.15); } .lang-toggle { background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.25); color: #fff; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; text-decoration: none; } .lang-toggle:hover { background: rgba(255,255,255,0.28); color: #fff; } /* --------------------------------------------------------------------- Main content area --------------------------------------------------------------------- */ .app-main { padding: 16px; } /* --------------------------------------------------------------------- Login screen --------------------------------------------------------------------- */ /* --------------------------------------------------------------------- Login — Rich blue immersive (brand-forward) Full-screen teal→blue gradient, logo+brand hero on top, white card below. --------------------------------------------------------------------- */ /* Deep gradient fills the whole viewport (covers lang switcher + footer too). */ body.login-page { background: radial-gradient(circle at 15% 8%, rgba(20, 184, 166, 0.50) 0%, transparent 42%), radial-gradient(circle at 88% 14%, rgba(56, 189, 248, 0.38) 0%, transparent 40%), radial-gradient(circle at 50% 108%, rgba(8, 47, 73, 0.50) 0%, transparent 55%), linear-gradient(160deg, #0a7ea4 0%, #075f7d 48%, #053b50 100%) !important; background-attachment: fixed !important; } body.login-page .mobile-shell { background: transparent !important; box-shadow: none !important; display: flex; flex-direction: column; min-height: 100vh; } .login-shell { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 22px 8px; position: relative; } /* Hero: logo + brand on the gradient (white text) */ .login-hero { position: relative; z-index: 1; text-align: center; margin: 0 0 22px; animation: loginFade 0.5s ease both; } .login-logo { width: 86px; height: 86px; border-radius: 26px; background: rgba(255, 255, 255, 0.16); border: 1.5px solid rgba(255, 255, 255, 0.35); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 40px; margin: 0 auto 14px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.25); } .login-brand-name { font-size: 23px; font-weight: 800; color: #ffffff; letter-spacing: 0.3px; line-height: 1.2; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.18); } .login-brand-tagline { font-size: 12px; color: rgba(255, 255, 255, 0.78); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; } .login-card { position: relative; z-index: 1; background: #ffffff; border-radius: 24px; padding: 28px 24px 26px; box-shadow: 0 18px 50px rgba(5, 59, 80, 0.35); border: 1px solid rgba(255, 255, 255, 0.7); animation: loginFade 0.5s ease 0.08s both; } .login-card h1 { text-align: center; font-size: 21px; font-weight: 700; margin: 0 0 4px; color: var(--aro-text); } .login-card .subtitle { text-align: center; color: var(--aro-text-muted); font-size: 14px; margin-bottom: 22px; } /* Footers on the dark gradient → light text */ .login-footer-text { position: relative; z-index: 1; color: rgba(255, 255, 255, 0.85); } .login-legal-footer { position: relative; z-index: 1; } .login-legal-footer a { color: rgba(255, 255, 255, 0.7); text-decoration: none; } .login-legal-footer a:hover { color: #fff; } @keyframes loginFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* --------------------------------------------------------------------- Forms (mobile-friendly) --------------------------------------------------------------------- */ .form-label-sm { font-size: 13px; font-weight: 600; color: var(--aro-text-muted); margin-bottom: 6px; display: block; } .app-input, .form-control { width: 100%; height: 48px; background: #fff; border: 1.5px solid var(--aro-border); border-radius: var(--aro-radius-sm); padding: 0 14px; font-size: 15px; color: var(--aro-text); transition: border-color .15s, box-shadow .15s; } textarea.app-input, textarea.form-control { height: auto; padding: 12px 14px; min-height: 80px; } .app-input:focus, .form-control:focus { outline: none; border-color: var(--aro-primary); box-shadow: 0 0 0 3px rgba(10, 126, 164, 0.15); } .input-group-icon { position: relative; } .input-group-icon .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--aro-text-muted); pointer-events: none; } .input-group-icon .app-input { padding-left: 42px; } /* Toggle for password visibility */ .pwd-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--aro-text-muted); cursor: pointer; padding: 4px; } /* --------------------------------------------------------------------- Buttons (44px+ touch targets) --------------------------------------------------------------------- */ .btn-aro { height: 48px; width: 100%; border: none; border-radius: var(--aro-radius-sm); font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .08s, box-shadow .15s, background .15s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; } .btn-aro:active { transform: scale(0.98); } .btn-aro-primary { background: linear-gradient(135deg, var(--aro-primary) 0%, var(--aro-primary-dark) 100%); color: #fff; box-shadow: 0 4px 12px rgba(10, 126, 164, 0.3); } .btn-aro-primary:hover { color: #fff; box-shadow: 0 6px 18px rgba(10, 126, 164, 0.4); } .btn-aro-secondary { background: #fff; color: var(--aro-primary); border: 1.5px solid var(--aro-border); } .btn-aro-secondary:hover { background: var(--aro-primary-light); color: var(--aro-primary); } .btn-aro-danger { background: var(--aro-red); color: #fff; } .btn-aro-success { background: #16a34a; border-color: #16a34a; color: #fff; } .btn-aro-success:hover { background: #15803d; border-color: #15803d; color: #fff; } .btn-aro-sm { height: 36px; font-size: 13px; padding: 0 14px; width: auto; } /* --------------------------------------------------------------------- Cards (customer cards, delivery cards, stat cards) --------------------------------------------------------------------- */ .aro-card { background: var(--aro-surface); border-radius: var(--aro-radius); padding: 16px; box-shadow: var(--aro-shadow-sm); border: 1px solid var(--aro-border); margin-bottom: 12px; } .aro-card:active { box-shadow: var(--aro-shadow-md); } /* Stat card (dashboard) */ .stat-card { background: var(--aro-surface); border-radius: var(--aro-radius); padding: 16px; box-shadow: var(--aro-shadow-sm); border: 1px solid var(--aro-border); position: relative; overflow: hidden; } .stat-card .stat-label { font-size: 12px; color: var(--aro-text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; /* Phase 5.3 fix: reserve space on the right so long labels (e.g. "THIS MONTH'S COLLECTION") don't slide under the icon. */ padding-right: 52px; word-break: break-word; } .stat-card .stat-value { font-size: 26px; font-weight: 700; color: var(--aro-text); margin-top: 4px; line-height: 1.1; padding-right: 52px; /* same reservation for the value row */ } .stat-card .stat-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background: var(--aro-primary-light); color: var(--aro-primary); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; } /* --------------------------------------------------------------------- Status dots (Red = Pending, Green = Delivered) --------------------------------------------------------------------- */ .status-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .status-pending { background: var(--aro-red); box-shadow: 0 0 0 4px var(--aro-red-bg); animation: pulse-red 2s ease-in-out infinite; } .status-delivered { background: var(--aro-green); box-shadow: 0 0 0 4px var(--aro-green-bg); } @keyframes pulse-red { 0%, 100% { box-shadow: 0 0 0 4px var(--aro-red-bg); } 50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.18); } } .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; } .status-badge.pending { background: var(--aro-red-bg); color: var(--aro-red); } .status-badge.delivered { background: var(--aro-green-bg); color: var(--aro-green); } /* --------------------------------------------------------------------- Bottom navigation --------------------------------------------------------------------- */ .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; height: var(--aro-nav-h); background: #fff; border-top: 1px solid var(--aro-border); display: flex; justify-content: space-around; align-items: center; z-index: 100; max-width: var(--aro-shell-max); margin: 0 auto; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 16px rgba(15, 42, 54, 0.06); } .bn-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--aro-text-muted); text-decoration: none; font-size: 11px; font-weight: 500; padding: 6px 4px; transition: color .15s; } .bn-item i { font-size: 20px; } .bn-item.active { color: var(--aro-primary); } .bn-item.active i { transform: translateY(-2px); transition: transform .15s; } /* --------------------------------------------------------------------- Empty state --------------------------------------------------------------------- */ .empty-state { text-align: center; padding: 48px 24px; color: var(--aro-text-muted); } .empty-state i { font-size: 48px; color: var(--aro-border); margin-bottom: 12px; display: block; } /* --------------------------------------------------------------------- Utilities --------------------------------------------------------------------- */ .text-muted-aro { color: var(--aro-text-muted); } .text-primary-aro { color: var(--aro-primary); } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .mt-md { margin-top: 16px; } .mb-md { margin-bottom: 16px; } /* Section header */ .section-title { font-size: 13px; font-weight: 700; color: var(--aro-text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin: 18px 0 10px; padding: 0 4px; } /* Inline form error */ .field-error { color: var(--aro-red); font-size: 12px; margin-top: 4px; } /* Helper for screens that should NOT have bottom nav (e.g. login) */ .no-bottom-nav { padding-bottom: 0; } /* ===================================================================== Phase 3 — Delivery flow ===================================================================== */ /* Tabs (Bootstrap nav-pills overrides for the delivery board) */ .aro-tabs { background: var(--aro-surface); border-radius: var(--aro-radius); padding: 4px; box-shadow: var(--aro-shadow-sm); border: 1px solid var(--aro-border); gap: 4px; } .aro-tabs .nav-link { color: var(--aro-text-muted); font-weight: 600; font-size: 13px; border-radius: 10px; padding: 8px 6px; background: transparent; } .aro-tabs .nav-link.active { background: var(--aro-primary-light); color: var(--aro-primary-dark); } .aro-tabs .nav-link .badge { font-weight: 700; } /* Status dot (Red = pending, Green = delivered) */ .delivery-dot { width: 12px; height: 12px; border-radius: 50%; margin-right: 12px; margin-top: 6px; flex-shrink: 0; position: relative; } .delivery-dot-pending { background: var(--aro-red); box-shadow: 0 0 0 4px var(--aro-red-bg); } .delivery-dot-delivered { background: var(--aro-green); box-shadow: 0 0 0 4px var(--aro-green-bg); } .delivery-dot-skipped { background: #d97706; box-shadow: 0 0 0 4px #fef3c7; } /* Delivery card states */ .delivery-card { transition: background .25s, border-color .25s; } .delivery-card-delivered { background: #f6fdf8; border-color: #bbf7d0; } .delivery-card-skipped { background: #fffbeb; border-color: #fde68a; } /* Yellow/warning button */ .btn-aro-warning { background: #f59e0b; color: #fff; border: 1.5px solid #f59e0b; } .btn-aro-warning:hover { background: #d97706; border-color: #d97706; color: #fff; } /* ===================================================================== Customer delivery calendar ===================================================================== */ .cal-wrap { background:#fff; border:1px solid var(--aro-border); border-radius: var(--aro-radius); padding: 14px 12px; box-shadow: var(--aro-shadow-sm); margin-bottom: 12px; } .cal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom: 10px; } .cal-head .month-name { font-weight: 700; font-size: 15px; color: var(--aro-text); } .cal-nav-btn { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--aro-border); border-radius:6px; background:#fff; color:var(--aro-text-muted); text-decoration:none; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .cal-head-row .cal-dow { font-size: 10px; text-transform: uppercase; text-align: center; color: var(--aro-text-muted); font-weight: 700; letter-spacing: .3px; padding: 4px 0; } /* Phase 5.3: give every day-cell a subtle visible border so the calendar grid stays consistent across desktop browsers (Chrome on some screens was suppressing the empty-state outline). State-specific borders below still override this default. */ .cal-cell { aspect-ratio: 1; border-radius: 6px; display:flex; align-items:center; justify-content:center; font-size: 13px; font-weight: 600; background: #f5f9fc; color: var(--aro-text-muted); border: 1px solid var(--aro-border); position: relative; } .cal-cell.empty { background: transparent; border-color: transparent; } .cal-cell.delivered { background: #dcfce7; color: #14532d; border-color: #86efac; } .cal-cell.skipped { background: #fef3c7; color: #92400e; border-color: #fcd34d; } .cal-cell.upcoming { background: #f3f4f6; color: #9ca3af; } .cal-cell.past { background: #f9fafb; color: #d1d5db; } .cal-cell.today { box-shadow: inset 0 0 0 2px var(--aro-primary); } .cal-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 11px; color: var(--aro-text-muted); } .cal-legend .dot { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:middle; } .cal-legend .dot-delivered { background:#86efac; } .cal-legend .dot-skipped { background:#fcd34d; } .cal-legend .dot-upcoming { background:#d1d5db; } /* Skip confirmation modal */ .skip-prompt-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1090; display: none; align-items: center; justify-content: center; padding: 16px; } .skip-prompt-backdrop.show { display: flex; } .skip-prompt { background:#fff; border-radius: 14px; max-width: 380px; width:100%; padding: 18px; box-shadow: var(--aro-shadow-lg); } .skip-prompt h5 { margin: 0 0 4px; font-weight: 700; font-size: 16px; } .skip-prompt .small { color: var(--aro-text-muted); } .delivery-card.flash-update { animation: flash-card .9s ease-out; } @keyframes flash-card { 0% { background: #fef9c3; } 100% { background: #f6fdf8; } } /* Delivery summary block inside a delivered card */ .delivery-summary { background: rgba(255, 255, 255, 0.6); border-radius: 8px; padding: 8px 10px; border: 1px solid #ccefe2; } /* Counter input (±) */ .counter-input { display: flex; align-items: center; gap: 8px; } .counter-input .counter-value { text-align: center; font-weight: 700; font-size: 18px; flex: 1; } .counter-btn { width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid var(--aro-border); background: #fff; color: var(--aro-primary); font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .counter-btn:active { background: var(--aro-primary-light); transform: scale(0.96); } /* Payment mode pills (pure radio chips) */ .pay-pill { display: inline-flex; align-items: center; background: #f5f9fc; border: 1.5px solid var(--aro-border); color: var(--aro-text); border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; } .pay-pill.active { background: var(--aro-primary-light); border-color: var(--aro-primary); color: var(--aro-primary); } /* Bottom-sheet (Bootstrap offcanvas override) */ .delivery-sheet.offcanvas-bottom { max-width: var(--aro-shell-max); margin: 0 auto; } /* Toast stack (replaces single .aro-toast) */ .aro-toast-stack { position: fixed; bottom: calc(var(--aro-nav-h) + 16px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column-reverse; gap: 8px; z-index: 1080; pointer-events: none; } .aro-toast-stack .toast-item { background: var(--aro-text); color: #fff; padding: 10px 18px; border-radius: 24px; font-size: 13px; font-weight: 500; box-shadow: var(--aro-shadow-lg); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: auto; } .aro-toast-stack .toast-item.show { opacity: 1; transform: translateY(0); } .aro-toast-stack .toast-item.success { background: #134e2a; } .aro-toast-stack .toast-item.error { background: #7f1d1d; } /* Toast notifications (for real-time updates) */ .aro-toast { position: fixed; bottom: calc(var(--aro-nav-h) + 16px); left: 50%; transform: translateX(-50%); background: var(--aro-text); color: #fff; padding: 10px 18px; border-radius: 24px; font-size: 13px; font-weight: 500; box-shadow: var(--aro-shadow-lg); z-index: 1000; opacity: 0; transition: opacity .2s, transform .2s; } .aro-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* Desktop: subtle wallpaper around the shell */ @media (min-width: 600px) { body.app-body { background: radial-gradient(circle at 50% 0%, rgba(20, 184, 166, 0.08) 0%, transparent 50%), linear-gradient(180deg, #c9dfeb 0%, #e6f0f6 100%); } .mobile-shell { border-radius: 24px; margin-top: 20px; margin-bottom: 20px; min-height: calc(100vh - 40px); overflow: hidden; } .bottom-nav { border-radius: 0 0 24px 24px; margin-bottom: 20px; } } /* ===================================================================== Phase 4 — Invoice sheet & print styles ===================================================================== */ .invoice-sheet { background: #fff; border: 1px solid var(--aro-border); border-radius: var(--aro-radius); padding: 20px; margin-bottom: 16px; box-shadow: var(--aro-shadow-sm); } .invoice-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; } .invoice-head .brand-name { font-size:18px; font-weight:800; color:var(--aro-primary-dark); } .invoice-head .brand-meta { font-size:12px; color:var(--aro-text-muted); margin-top:2px; } .invoice-head .inv-no { font-size:16px; font-weight:800; color:var(--aro-text); margin-bottom:2px; } .invoice-table { width:100%; border-collapse:collapse; font-size:13px; } .invoice-table th, .invoice-table td { padding: 8px 10px; border-bottom: 1px solid var(--aro-border); text-align: left; } .invoice-table thead th { background: #f5f9fc; color: var(--aro-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; font-size: 11px; } .invoice-table tfoot th { font-weight: 700; } .invoice-table .text-end { text-align: right; } .invoice-table .text-center { text-align: center; } .invoice-footer { border-top:1px dashed var(--aro-border); padding-top:10px; } @media print { body, body.app-body { background:#fff !important; } .app-header, .bottom-nav, .no-print, .lang-toggle { display:none !important; } .mobile-shell { box-shadow:none !important; background:#fff !important; max-width: none !important; padding: 0 !important; } .app-main { padding: 0 !important; } .invoice-sheet { border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } .invoice-table thead th, .report-table thead th { background: #eef6fb !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .report-sheet { border:none !important; box-shadow:none !important; padding:0 !important; margin:0 !important; } a { color: inherit; text-decoration: none; } /* Top margin halved (7mm); sides & bottom stay 14mm. */ @page { margin: 7mm 14mm 14mm; } } /* ===================================================================== Phase 5 — Reports ===================================================================== */ .report-sheet { background:#fff; border:1px solid var(--aro-border); border-radius: var(--aro-radius); padding: 14px; box-shadow: var(--aro-shadow-sm); margin-bottom: 12px; overflow-x: auto; } .report-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom: 10px; } .report-head h2 { font-size:16px; font-weight:800; margin:0 0 2px; color:var(--aro-primary-dark); } .report-head .meta { font-size:11px; color:var(--aro-text-muted); } /* Compact per-mode summary line inside the report sheet (screen + print) */ .report-mode-summary { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; color:var(--aro-text); padding:8px 10px; margin-bottom:10px; background:#f5f9fc; border:1px solid var(--aro-border); border-radius:8px; } .report-mode-summary .grand { margin-left:auto; color:#14532d; } .report-table { width:100%; border-collapse:collapse; font-size:13px; } .report-table th, .report-table td { padding: 8px 10px; border-bottom: 1px solid var(--aro-border); text-align: left; white-space: nowrap; } .report-table thead th { background: #f5f9fc; color: var(--aro-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; font-size: 11px; } .report-table tfoot th { background: #eef6fb; font-weight: 800; border-top: 2px solid var(--aro-border); } .report-table .text-end { text-align: right; } .report-table .text-center { text-align: center; } .report-table tbody tr:hover { background: #fafcfd; } .report-empty { padding: 28px 14px; text-align:center; color:var(--aro-text-muted); font-size:13px; } /* ===================================================================== Area ledger book (landscape print) ===================================================================== */ .ledger-sheet { background: #fff; border: 1px solid var(--aro-border); border-radius: var(--aro-radius); padding: 12px; box-shadow: var(--aro-shadow-sm); margin-bottom: 12px; /* CRITICAL: ledger has 31 day columns + Sr/Name/Total/Amount = ~35 cols. The mobile-shell is 480px wide, so without horizontal scroll the columns get crushed to <5px each and borders look invisible. Setting overflow-x:auto + -webkit-overflow-scrolling lets the table overflow its container and the user swipes/scrolls sideways. */ overflow-x: auto; -webkit-overflow-scrolling: touch; } .ledger-header { display:flex; justify-content:space-between; align-items:flex-end; border-bottom:2px solid #0f2a36; padding-bottom: 6px; margin-bottom: 8px; } .ledger-header .brand { font-size: 22px; font-weight: 900; letter-spacing: 0.5px; color:#0f2a36; } .ledger-header .meta { font-size: 12px; text-align: right; color: var(--aro-text); } .ledger-header .meta strong { font-size: 14px; } .ledger-table { /* Was width:100% — that compressed every column to ~5px when the table is wider than the shell. Now: let the table be its natural width based on the column sizes below, with a hard floor that keeps the 31-day grid readable. The outer .ledger-sheet provides h-scroll. */ width: auto; min-width: 920px; border-collapse: collapse; font-size: 10px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; table-layout: fixed; } .ledger-table th, .ledger-table td { border: 1px solid #0f2a36; padding: 2px 3px; text-align: center; vertical-align: middle; height: 22px; } .ledger-table thead th { background: #eef6fb; font-weight: 700; } .ledger-table .sr { width: 28px; } .ledger-table .name { width: 110px; text-align: left; font-weight: 600; } .ledger-table .name .code { display: block; font-size: 8px; color: var(--aro-text-muted); font-weight: 400; } /* Day cells now show "qty" or "qty/paid" — widened to fit both. */ .ledger-table .day { min-width: 34px; padding: 2px 3px; white-space: nowrap; } .ledger-table .total { width: 42px; background: #f5f9fc; font-weight: 700; } .ledger-table .amount { width: 64px; background: #f5f9fc; font-weight: 700; line-height: 1.15; } .ledger-table .amount .paid-sub, .ledger-table tfoot .amount .paid-sub { color: #15803d; font-weight: 600; font-size: 90%; } .ledger-table td.skipped { color: #c2410c; font-weight: 700; } .ledger-table td.empty { padding: 16px; text-align: center; color: var(--aro-text-muted); } .ledger-table tfoot .totals-row th { background: #fff7ed; color: #9a3412; font-weight: 800; } .ledger-table tfoot .totals-row .name { text-align: right; } .ledger-footer { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 10px; font-size: 12px; color: var(--aro-text); align-items: center; } .ledger-footer .small { font-size: 10px; color: var(--aro-text-muted); margin-left: auto; } /* Ledger print rules — activated when */ @media print { body.ledger-print, body.ledger-print.app-body { background: #fff !important; } /* Strip every page chrome on the ledger print — leave only the sheet */ body.ledger-print .app-header, body.ledger-print .bottom-nav, body.ledger-print .no-print, body.ledger-print form, body.ledger-print .lang-toggle, body.ledger-print .alert { display: none !important; } body.ledger-print .mobile-shell { box-shadow: none !important; background: #fff !important; max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; } body.ledger-print .app-main { padding: 0 !important; } body.ledger-print .ledger-sheet { border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; } /* Force the whole ledger to fit A4 landscape printable area. Without these overrides the 1298px-wide table (31 days × 34px + fixed cols) gets clipped on the right because landscape A4 minus margins is only ~1062px @ 96DPI. We: - Drop @page margin to ~4mm so we reclaim ~24px each side - Let the table fill the page width and the browser distribute cells - Shrink fixed column widths + day-cell min-width so 31 days fit - Drop font size + cell padding to keep "qty/paid" readable */ body.ledger-print .ledger-sheet { overflow: visible !important; } body.ledger-print .ledger-table { width: 100% !important; min-width: 0 !important; table-layout: fixed !important; font-size: 8px !important; } body.ledger-print .ledger-table th, body.ledger-print .ledger-table td { padding: 1px 1px !important; height: auto !important; border: 1px solid #000 !important; word-break: break-word; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } body.ledger-print .ledger-table .sr { width: 22px !important; } body.ledger-print .ledger-table .name { width: 80px !important; font-size: 8px !important; } body.ledger-print .ledger-table .name .code { font-size: 6px !important; } body.ledger-print .ledger-table .day { min-width: 0 !important; width: auto !important; padding: 1px 0 !important; } body.ledger-print .ledger-table .total { width: 28px !important; } body.ledger-print .ledger-table .amount { width: 44px !important; font-size: 8px !important; line-height: 1.1 !important; } body.ledger-print .ledger-table .amount .paid-sub { font-size: 7px !important; } body.ledger-print .ledger-table thead th, body.ledger-print .ledger-table tfoot .totals-row th, body.ledger-print .ledger-table .total, body.ledger-print .ledger-table .amount { background: #eef6fb !important; } body.ledger-print .ledger-header .brand { font-size: 16px !important; } body.ledger-print .ledger-footer { font-size: 9px !important; } }