/* ═══════════════════════════════════════════════════════════
   AK Chit Funds — app.css
   Edit only this file when changing styles / colours / layout
   ═══════════════════════════════════════════════════════════ */

/* ══ MOBILE-FIRST CSS — v2.5 ══ */
        :root {
            --bg-dark:#0a0e1a; --card-bg:#141b2d; --input-bg:#1c253b;
            --accent-gold:linear-gradient(90deg,#ff9800,#f57c00);
            --text-main:#ffffff; --text-dim:#8e9aaf; --border:#252f48;
            /* Mobile-first base font — scales up on desktop */
            --fs-xs:0.72rem;   /* was 0.6rem  */
            --fs-sm:0.82rem;   /* was 0.7rem  */
            --fs-md:0.95rem;   /* was 0.82rem */
            --fs-base:1rem;
            --fs-lg:1.1rem;
            --fs-xl:1.25rem;
        }
        * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
        html { font-size:16px; } /* anchors rem to 16px on all devices */
        body {
            background-color:var(--bg-dark); color:var(--text-main);
            font-family:'Segoe UI',system-ui,sans-serif;
            padding-bottom:80px;
            -webkit-text-size-adjust:100%; /* prevent iOS font inflation */
        }

        /* ── HEADER ── */
        .app-header { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--border); background:var(--card-bg); position:sticky; top:0; z-index:500; flex-wrap:wrap; gap:8px; }
        .brand-wrap { display:flex; align-items:center; gap:10px; min-width:0; flex-shrink:1; }
        .brand-logo { flex-shrink:0; }
        .brand-name { color:#f39c12; font-weight:900; font-size:var(--fs-lg); letter-spacing:-.3px; display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .brand-cloud { font-size:0.62rem; background:rgba(46,204,113,.15); color:#2ecc71; border:1px solid rgba(46,204,113,.3); border-radius:4px; padding:2px 6px; font-weight:800; flex-shrink:0; }
        .brand-sub { font-size:0.65rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.6px; margin-top:2px; }
        
        @media (max-width:480px) {
            .app-header { padding:10px 12px; gap:6px; }
            .brand-name { font-size:0.95rem; gap:4px; }
            .brand-cloud { display:none; }
            .brand-sub { display:none; }
            .app-header > div:last-child { display:flex; gap:4px; flex-wrap:wrap; }
            .app-header button { padding:4px 6px !important; font-size:0.65rem !important; min-height:36px !important; white-space:nowrap; flex-shrink:0; }
            #headerRoleBadge { padding:2px 4px !important; font-size:0.55rem !important; }
            #logoutBtn { padding:4px 6px !important; }
        }
        
        @media (max-width:360px) {
            .app-header { padding:8px 10px; }
            .brand-logo img { width:36px !important; height:36px !important; }
            .brand-name { font-size:0.85rem; }
            .app-header button { padding:3px 5px !important; font-size:0.55rem !important; }
        }

        /* ── RESPONSIVE FIXES FOR MOBILE ── */
        @media (max-width:768px) {
            .container { padding-left:8px !important; padding-right:8px !important; }
            .btn { padding:12px !important; font-size:0.95rem !important; }
            .stat-card { padding:12px 8px !important; }
            .stat-num { font-size:1.3rem !important; }
            .stat-label { font-size:0.65rem !important; }
        }
        
        @media (max-width:480px) {
            .container { padding-left:6px !important; padding-right:6px !important; }
            .btn { padding:10px !important; font-size:0.9rem !important; min-height:44px !important; }
            .stat-card { padding:10px 6px !important; }
            .stat-num { font-size:1.15rem !important; }
            .stat-label { font-size:0.6rem !important; }
            .modal-content-custom { padding:16px 14px !important; }
            .form-input { padding:12px 10px !important; font-size:0.95rem !important; }
            .form-label-small { font-size:0.7rem !important; }
        }
        
        @media (max-width:360px) {
            .container { padding-left:4px !important; padding-right:4px !important; }
            .btn { padding:8px !important; font-size:0.8rem !important; }
            .stat-card { padding:8px 4px !important; }
            .stat-num { font-size:1rem !important; }
            .stat-label { font-size:0.55rem !important; }
        }
        .stat-card { background:var(--card-bg); border:1px solid var(--border); border-radius:14px; padding:14px 10px; text-align:center; }
        .stat-num { font-size:var(--fs-xl); font-weight:800; display:block; }
        .stat-label { font-size:0.7rem; color:var(--text-dim); text-transform:uppercase; margin-top:2px; display:block; }

        /* ── MODALS ── */
        .modal-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.92); z-index:2000; padding:12px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
        .modal-content-custom { background:var(--card-bg); border-radius:22px; padding:22px 18px; max-width:480px; margin:10px auto; border:1px solid var(--border); }
        .form-input { background:var(--input-bg); border:1px solid var(--border); color:white; padding:14px 12px; border-radius:12px; width:100%; margin-bottom:12px; font-size:var(--fs-md); min-height:48px; }
        .form-input option { background:#1c253b; }
        .form-label-small { font-size:0.75rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; display:block; }
        .btn-save { background:var(--accent-gold); color:black; border:none; width:100%; padding:15px; border-radius:14px; font-weight:800; margin-bottom:10px; cursor:pointer; font-size:var(--fs-md); min-height:50px; }
        .btn-cancel { background:var(--input-bg); color:white; border:none; width:100%; padding:14px; border-radius:14px; cursor:pointer; font-size:var(--fs-sm); min-height:48px; }
        .btn-danger-full { background:linear-gradient(135deg,#ef4444,#dc2626); color:white; border:none; width:100%; padding:14px; border-radius:14px; font-weight:700; cursor:pointer; margin-bottom:10px; font-size:var(--fs-sm); min-height:48px; }
        .modal-title { font-size:var(--fs-lg); font-weight:800; margin-bottom:16px; }

        /* ══════════════════════════════════════════════════════
           ── NAVIGATION — ADMIN ONLY ──
           Nav bar hidden by default. JS adds body.admin-mode
           on admin login and removes it on member login/logout.
           Members see NO tabs at all.
           ══════════════════════════════════════════════════════ */

        /* ── Bottom nav bar — hidden by default ── */
        .nav-bar {
            position:fixed; bottom:0; width:100%;
            background:#070b14;
            display:none;
            justify-content:stretch;
            padding:10px 0 calc(10px + env(safe-area-inset-bottom));
            border-top:1px solid var(--border);
            z-index:1000; overflow:hidden;
        }

        /* ── Nav items ── */
        .nav-item {
            cursor:pointer; text-align:center;
            font-size:0.68rem; color:var(--text-dim);
            padding:4px 2px; flex:1; min-width:0;
            display:block;
        }
        .nav-item.active { color:#f39c12; }

        /* ── Tab content ── */
        .tab-content { display:none; }
        .tab-content.active { display:block; }

        /* ── ADMIN MODE: show nav bar and give body padding ── */
        body.admin-mode .nav-bar,
        html.admin-mode-early .nav-bar { display:flex !important; }
        body.admin-mode { padding-bottom:80px; }
        html.admin-mode-early body { padding-bottom:80px; }

        /* ── TABLET ── */
        @media (min-width:768px) and (max-width:1023px) {
            body.admin-mode .nav-bar { padding:8px 0 calc(8px + env(safe-area-inset-bottom)); }
            .nav-item { font-size:0.72rem; padding:6px 2px; }
        }

        /* ── DESKTOP: admin sees nav bar at bottom ── */
        @media (min-width:1024px) {
            body.admin-mode .nav-bar,
            html.admin-mode-early .nav-bar { display:flex !important; }
            body.admin-mode { padding-bottom:70px; }
            html.admin-mode-early body { padding-bottom:70px; }
            .tab-content { margin-bottom:0 !important; }
            .container { padding-bottom:20px !important; }
            .nav-item { font-size:0.8rem; padding:6px 20px; }
        }

        /* ── Mobile padding ── */
        @media (max-width:767px) {
            .container { padding-bottom:70px; }
        }

        /* ── TABLES — horizontal scroll on mobile ── */
        .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:0 0 12px 12px; }
        .table-custom { color:white; font-size:0.78rem; width:100%; border-collapse:collapse; min-width:520px; }
        .table-custom th { color:var(--text-dim); border-bottom:1px solid var(--border); padding:10px 8px; font-size:0.68rem; text-transform:uppercase; white-space:nowrap; }
        .table-custom td { padding:11px 8px; border-bottom:1px solid rgba(255,255,255,0.05); vertical-align:middle; white-space:nowrap; font-size:0.78rem; }
        .table-custom tr.chit-picked { background:rgba(16,185,129,0.08); }
        .table-custom tr.chit-picked td:first-child { border-left:3px solid #10b981; }
        .table-custom tr.due-row { background:rgba(239,68,68,0.07); }
        .table-custom tr.due-row td { color:#f87171; font-style:italic; }
        .table-custom tr.multi-month-row { background:rgba(99,102,241,0.09); }
        .table-custom tr.multi-month-row td:first-child { border-left:3px solid #818cf8; }

        /* ── BADGES ── */
        .due-badge { display:inline-block; background:rgba(239,68,68,0.15); color:#f87171; border:1px solid rgba(239,68,68,0.3); border-radius:4px; padding:2px 7px; font-size:0.68rem; font-weight:700; }
        .partial-badge { display:inline-block; background:rgba(245,158,11,0.2); color:#fbbf24; border:1px solid rgba(245,158,11,0.4); border-radius:4px; padding:2px 7px; font-size:0.68rem; font-weight:700; }
        .chit-yes-badge { display:inline-block; background:rgba(16,185,129,0.2); color:#34d399; border:1px solid rgba(16,185,129,0.4); border-radius:5px; padding:3px 8px; font-size:0.68rem; font-weight:800; }
        .chit-no { color:var(--text-dim); font-size:0.72rem; }
        .multi-month-badge { display:inline-flex; align-items:center; gap:3px; background:rgba(99,102,241,0.18); color:#a5b4fc; border:1px solid rgba(99,102,241,0.4); border-radius:5px; padding:3px 8px; font-size:0.68rem; font-weight:800; }

        /* ── AUTOCOMPLETE ── */
        .suggestions-list { position:absolute; top:100%; left:0; right:0; background:var(--input-bg); border:1px solid var(--border); border-radius:0 0 12px 12px; z-index:3000; max-height:200px; overflow-y:auto; display:none; }
        .suggestion-item { padding:14px 12px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,0.05); font-size:var(--fs-md); }
        .suggestion-item:active { background:#252f48; color:#f39c12; }

        /* ── MINI STAT BOXES ── */
        .mini-stat { background:var(--input-bg); border-radius:10px; padding:10px 6px; text-align:center; }
        .mini-stat-val { font-size:0.88rem; font-weight:800; }
        .mini-stat-lbl { font-size:0.62rem; color:var(--text-dim); text-transform:uppercase; margin-top:2px; }

        /* ── PROGRESS BAR ── */
        .prog-bar-outer { background:#252f48; border-radius:5px; height:7px; overflow:hidden; margin:6px 0 3px; }
        .prog-bar-inner { height:100%; border-radius:5px; background:linear-gradient(90deg,#f39c12,#f57c00); }
        .prog-label { font-size:0.68rem; color:var(--text-dim); display:flex; justify-content:space-between; }

        /* ── BUTTONS (touch-friendly) ── */
        .btn-pdf { background:linear-gradient(135deg,#e74c3c,#c0392b); color:white; border:none; border-radius:8px; padding:8px 14px; font-size:0.78rem; font-weight:700; cursor:pointer; min-height:36px; }
        .btn-edit-sm { background:rgba(243,156,18,.12); border:1px solid rgba(243,156,18,.35); color:#f39c12; border-radius:8px; padding:7px 12px; font-size:0.72rem; font-weight:700; cursor:pointer; min-height:34px; }
        .btn-del-sm { background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.35); color:#f87171; border-radius:8px; padding:7px 12px; font-size:0.72rem; font-weight:700; cursor:pointer; min-height:34px; }

        /* ── GROUP CARDS ── */
        .enrollment-row select, .enrollment-row input { font-size:var(--fs-sm) !important; }
        .group-card { background:var(--card-bg); border:1px solid var(--border); border-radius:16px; padding:16px; margin-bottom:14px; overflow:hidden; }
        .group-card-header { cursor:pointer; user-select:none; }
        .group-body { transition:max-height 0.3s ease, opacity 0.3s ease; overflow:hidden; }
        .group-body.collapsed { max-height:0 !important; opacity:0; }
        .chevron-icon { transition:transform 0.25s ease; display:inline-block; font-size:0.9rem; color:var(--text-dim); }
        .chevron-icon.open { transform:rotate(0deg); }
        .chevron-icon.closed { transform:rotate(-90deg); }

        /* ── MONTH SELECTOR ── */
        .multi-month-preview { background:rgba(99,102,241,0.08); border:1px solid rgba(99,102,241,0.25); border-radius:12px; padding:14px; margin-bottom:12px; display:none; }
        .multi-month-preview-title { font-size:0.75rem; color:#a5b4fc; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
        .month-selector-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-height:240px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
        .month-cb-item { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:10px; padding:10px 8px; cursor:pointer; transition:all .15s; font-size:0.72rem; min-height:52px; }
        .month-cb-item.already-paid { background:rgba(16,185,129,0.07); border-color:rgba(16,185,129,0.3); color:#34d399; opacity:0.6; cursor:not-allowed; }
        .month-cb-item input[type=checkbox] { accent-color:#818cf8; width:16px; height:16px; flex-shrink:0; }
        .selected-summary { font-size:0.75rem; color:#a5b4fc; margin-top:8px; font-weight:700; padding:8px 12px; background:rgba(99,102,241,0.12); border-radius:8px; }

        /* ── AUTH / LOGIN ── */
        #loginScreen { position:fixed; top:0; left:0; width:100%; height:100%; background:var(--bg-dark); z-index:9000; display:flex; align-items:center; justify-content:center; padding:20px; overflow-y:auto; }
        .login-card { background:var(--card-bg); border:1px solid var(--border); border-radius:24px; padding:28px 22px; width:100%; max-width:400px; }
        .login-brand { text-align:center; margin-bottom:24px; }
        .login-brand-title { font-size:1.7rem; font-weight:900; color:#f39c12; }
        .login-brand-sub { font-size:0.8rem; color:var(--text-dim); margin-top:4px; }
        .login-step { display:none; }
        .login-step.active { display:block; }
        .login-phone-input { display:flex; gap:8px; }
        .phone-prefix { background:var(--input-bg); border:1px solid var(--border); color:var(--text-dim); padding:14px; border-radius:12px; font-size:var(--fs-md); flex-shrink:0; }
        .pending-box { background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.3); border-radius:16px; padding:20px; text-align:center; }
        .denied-box { background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.3); border-radius:16px; padding:20px; text-align:center; }
        .req-card { background:var(--input-bg); border:1px solid var(--border); border-radius:12px; padding:14px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
        .req-name { font-weight:700; font-size:0.9rem; }
        .req-phone { font-size:0.75rem; color:var(--text-dim); }
        .btn-approve { background:linear-gradient(135deg,#10b981,#059669); color:white; border:none; border-radius:8px; padding:9px 16px; font-size:0.78rem; font-weight:700; cursor:pointer; min-height:38px; }
        .btn-deny { background:rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.4); color:#f87171; border-radius:8px; padding:9px 16px; font-size:0.78rem; font-weight:700; cursor:pointer; min-height:38px; }
        .badge-pending { background:rgba(245,158,11,.2); color:#fbbf24; border:1px solid rgba(245,158,11,.4); border-radius:5px; padding:3px 9px; font-size:0.68rem; font-weight:700; }
        .badge-approved { background:rgba(16,185,129,.2); color:#34d399; border:1px solid rgba(16,185,129,.4); border-radius:5px; padding:3px 9px; font-size:0.68rem; font-weight:700; }
        .badge-denied { background:rgba(239,68,68,.15); color:#f87171; border:1px solid rgba(239,68,68,.3); border-radius:5px; padding:3px 9px; font-size:0.68rem; font-weight:700; }
        /* member-mode nav hiding removed — admin-mode CSS handles this */

        /* ── BACKUP BADGE ── */
        .backup-badge-btn { position:relative; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.35); color:#f87171; border-radius:10px; padding:7px 12px; font-size:0.78rem; font-weight:700; cursor:pointer; display:none; animation:pulse-red 2s infinite; }
        .backup-badge-btn.done { background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.35); color:#34d399; animation:none; }
        @keyframes pulse-red { 0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4);} 50%{box-shadow:0 0 0 6px rgba(239,68,68,0);} }

        /* ── EMAIL CONFIG ── */
        .email-config-box { background:rgba(99,102,241,0.08); border:1px solid rgba(99,102,241,0.3); border-radius:16px; padding:16px; margin-bottom:16px; }
        .email-config-title { font-size:0.75rem; font-weight:800; color:#a5b4fc; text-transform:uppercase; letter-spacing:.6px; margin-bottom:12px; }
        .backup-history-item { display:flex; justify-content:space-between; align-items:center; background:var(--input-bg); border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-bottom:6px; }

        /* ── LEDGER SECTION HEADERS ── */
        .ledger-section-header { font-size:0.8rem; font-weight:800; color:#f39c12; margin-bottom:4px; }
        .ledger-meta-badge { font-size:0.65rem; background:rgba(99,102,241,.15); border:1px solid rgba(99,102,241,.3); border-radius:5px; padding:2px 7px; color:#a5b4fc; }

        /* ── RESPONSIVE BREAKPOINTS ── */
        @media (min-width:600px){
            html { font-size:17px; }
            .table-custom { font-size:0.85rem; min-width:600px; }
            .table-custom th { font-size:0.72rem; padding:11px 10px; }
            .table-custom td { padding:12px 10px; font-size:0.85rem; }
            .mini-stat-val { font-size:1rem; }
            .stat-num { font-size:1.4rem; }
        }
        @media (min-width:900px){
            html { font-size:18px; }
            body { max-width:960px; margin:0 auto; }
            .modal-content-custom { padding:28px; }
        }

        /* ════════════════════════════════════════════════════════
           ── PRINT MEDIA QUERIES (MOBILE PRINTING FIX) ──
           Fixes: Bottom content missing, tables cut off, page breaks
           ════════════════════════════════════════════════════════ */
        @media print {
            /* ── GLOBAL PRINT SETUP ── */
            * { background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important; }
            html, body { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; }
            body { background: white !important; font-family: Arial, sans-serif !important; }
            
            /* ── PAGE DIMENSIONS ── */
            @page { size: A4; margin: 8mm 10mm; }
            
            /* ── HIDE NON-ESSENTIAL ELEMENTS ── */
            .app-header, .nav-bar, .modal-overlay, #adminHeader, #memberHeader, 
            #adminStatCards, #adminActionBtns, #adminMemberSearch,
            .print-btn-bar, .btn-pdf, .btn-edit-sm, .btn-del-sm,
            button, input[type="text"], input[type="search"],
            .form-input, .suggestions-list, .modal-content-custom,
            [onclick*="Modal"], [onclick*="Delete"], .backup-badge-btn { 
                display: none !important; 
            }
            
            /* ── SHOW PRINT CONTENT ── */
            .tab-content { display: block !important; }
            #ledgerData { display: block !important; }
            #printOverlay { display: block !important; position: static !important; width: 100% !important; height: auto !important; }
            #groupPrintDoc { display: block !important; }
            
            /* ── MAKE SCROLLABLE CONTENT VISIBLE ── */
            .table-wrap { 
                overflow: visible !important; 
                -webkit-overflow-scrolling: auto !important;
                max-width: 100% !important;
            }
            
            /* ── TABLE PRINTING FIXES ── */
            table { 
                width: 100% !important; 
                border-collapse: collapse !important; 
                page-break-inside: avoid !important;
                table-layout: auto !important;
                margin-bottom: 8mm !important;
            }
            table, th, td { 
                border: 1px solid #333 !important; 
                color: black !important;
            }
            thead { 
                display: table-header-group !important; 
                background: #f0f0f0 !important;
            }
            tbody { 
                display: table-row-group !important; 
            }
            tr { 
                page-break-inside: avoid !important; 
                page-break-after: auto !important;
            }
            th, td { 
                padding: 8px 6px !important; 
                text-align: left !important;
                word-break: break-word !important;
                word-wrap: break-word !important;
                overflow-wrap: break-word !important;
            }
            th { 
                background: #e0e0e0 !important; 
                font-weight: bold !important; 
                color: black !important;
            }
            
            /* ── LEDGER SECTION FIXES ── */
            #ledgerData > div { 
                page-break-inside: avoid !important; 
                page-break-after: auto !important;
                margin-bottom: 12mm !important;
            }
            .group-card { 
                page-break-inside: avoid !important; 
                page-break-after: auto !important;
            }
            
            /* ── STAT CARDS & INFO BOXES ── */
            .stat-card, .info-box, .mini-stat, .stat { 
                page-break-inside: avoid !important;
                background: white !important;
                border: 1px solid black !important;
            }
            
            /* ── COLOR & TEXT PRESERVATION FOR PRINT ── */
            .brand, .ledger-section-header, .group-card-header { 
                color: black !important; 
                font-weight: bold !important;
            }
            .stat-num, .stat-label, .stat-v, .stat-l { 
                color: black !important;
            }
            
            /* ── FLEX & GRID ADJUSTMENTS FOR PRINT ── */
            .row { 
                page-break-inside: avoid !important; 
                display: block !important;
                width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
            }
            .col-4, .col-6, .col-12, [class*="col-"] { 
                display: block !important; 
                width: 100% !important; 
                margin: 0 !important;
                padding: 4mm 0 !important;
                page-break-inside: avoid !important;
            }
            
            /* ── PROGRESS BARS & VISUAL ELEMENTS ── */
            .prog-bar-outer, .prog-outer { 
                border: 1px solid #ccc !important; 
                background: #f5f5f5 !important;
            }
            .prog-bar-inner, .prog-inner { 
                background: #999 !important;
            }
            
            /* ── TEXT COLORS FOR READABILITY ── */
            a { color: black !important; text-decoration: underline !important; }
            .due-badge, .partial-badge, .chit-yes-badge, .multi-month-badge { 
                color: black !important; 
                border: 1px solid black !important;
            }
            
            /* ── CHEVRONS & ICONS ── */
            .chevron-icon, .ledger-chevron { 
                display: inline !important;
            }
            
            /* ── SPACES & MARGINS ── */
            body { padding-bottom: 0 !important; }
            .container { max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
            
            /* ── PRINT SPECIFIC WIDTHS ── */
            .hdr { display: flex !important; page-break-inside: avoid !important; margin-bottom: 8mm !important; }
            .info-box { page-break-inside: avoid !important; margin-bottom: 6mm !important; }
            .sec-title { page-break-after: avoid !important; }
            
            /* ── ENSURE CONTENT DOESN'T OVERFLOW ── */
            #groupPrintDoc { max-width: 210mm !important; margin: 0 !important; padding: 0 !important; }
            #groupPrintDoc * { max-width: 100% !important; }
        }
        
        /* ── PRINT PREVIEW IN BROWSER ── */
        @media screen and (max-width: 600px) {
            /* Hide on mobile when NOT printing */
            @supports (display: none) {
                /* This rule only applies in print preview */
            }
        }

        /* ── UTILITY: no-shrink inline text ── */
        .nowrap { white-space:nowrap; }
        .text-xs { font-size:var(--fs-xs); }
        .text-sm { font-size:var(--fs-sm); }

        /* ── INSTALLMENT ROWS (Hide on screen, show on print) ── */
        .inst-row { display:none !important; }
        .inst-row-visible { display:table-row !important; }
        .inst-row-hidden { display:none !important; }
        
        @media print {
            /* Show table sections that are hidden on screen */
            [id^="ledger_"] { 
                display:block !important; 
                page-break-inside:avoid !important;
            }
            
            /* Show all installment rows in print */
            .inst-row { 
                display:table-row !important; 
                page-break-inside:avoid !important;
                background:rgba(99,102,241,0.06) !important;
                border-left:3px solid #6366f1 !important;
            }
            
            /* Ensure ledger sections print properly */
            #ledgerData { display:block !important; }
            #ledgerData > div { 
                page-break-inside:avoid !important;
                display:block !important;
            }
        }