/* =============================================================================
 * Dhanam Finance — public/css/styles.css
 * 
 * Extracted from public/index.html on 2026-06-05 (commit before Emergent split).
 * Content is byte-identical to the three inline <style> blocks; only their
 * physical location has moved. Cascade order is preserved (head block first,
 * then mid-body block, then end-of-body block).
 * 
 * OWNERSHIP: Emergent (UI/design language).
 * Claude Code does NOT edit this file except for emergency fixes.
 * See OWNERSHIP.md for the full split contract.
 * ============================================================================ */

/* ===== BLOCK 1: head <style> (original lines 11-2729) ===== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            /* Brand colours */
            --gold:           #b8860b;
            --gold-light:     #d4a843;
            --gold-pale:      rgba(184, 134, 11, 0.10);
            --red:            #c0392b;
            --navy:           #1b3a5c;
            --navy-dark:      #112540;
            --navy-mid:       #1e4470;

            /* Semantic aliases */
            --primary:        #b8860b;          /* gold — CTAs, active states    */
            --primary-hover:  #9a7209;
            --primary-light:  rgba(184, 134, 11, 0.09);
            --accent:         #c0392b;          /* red — highlights, alerts       */
            --success:        #16a34a;
            --warning:        #d97706;
            --danger:         #c0392b;          /* red */

            /* Surface & text */
            --bg:             #f5f7fa;          /* page background — near-white   */
            --bg-warm:        #eef1f6;
            --card-bg:        #ffffff;
            --input-bg:       #ffffff;
            --text:           #1a2035;          /* deep navy-black for body copy  */
            --text-light:     #64748b;
            --border:         #e2e8f0;

            /* Sidebar (navy) */
            --sidebar-dark:   #1b3a5c;
            --sidebar-darker: #112540;
        }

        body {
            /* Inter webfont (loaded in index.html <head>) for a consistent,
               professional look across iOS / Android / Mac / Windows — the old
               system-font stack rendered differently per platform. System fonts
               remain as fallback if the webfont hasn't loaded yet. */
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            /* Lining + tabular figures so ₹ amounts align in tables/receipts and
               look professional everywhere. */
            font-variant-numeric: tabular-nums lining-nums;
            font-feature-settings: 'tnum' 1, 'lnum' 1;
            background: var(--bg);
            color: var(--text);
            line-height: 1.6;
            overflow-x: hidden;     /* page never scrolls horizontally on any breakpoint */
        }

        .app-container {
            display: flex;
            height: 100vh;
            min-width: 0;           /* allow flex children to shrink */
            width: 100%;
            overflow-x: hidden;
        }

        .sidebar {
            width: 250px;
            background: var(--sidebar-dark);
            color: white;
            overflow: hidden;
            padding: 0;
            position: fixed;
            left: 0;
            top: 0;
            height: 100vh;
            height: 100dvh;
            z-index: 1000;
            display: flex;
            flex-direction: column;
        }

        .sidebar-header {
            /* Top padding respects the device status bar / iPhone notch via
               env(safe-area-inset-top). On Android phones the LockerHub title
               was previously cut off when the drawer opened.                  */
            padding: max(env(safe-area-inset-top), 8px) 20px 8px 20px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            display: flex;
            align-items: center;
            gap: 12px;
            flex-shrink: 0;
        }

        .sidebar-header h1 {
            font-size: 22px;
            font-weight: 700;
            letter-spacing: 0.3px;
        }

        .sidebar-nav {
            padding: 12px 0 8px;
            list-style: none;
            flex: 1 1 0;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            touch-action: pan-y;
            scrollbar-width: thin;
            scrollbar-color: rgba(255,255,255,0.2) transparent;
        }

        .sidebar-nav::-webkit-scrollbar {
            width: 4px;
        }

        .sidebar-nav::-webkit-scrollbar-track {
            background: transparent;
        }

        .sidebar-nav::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.2);
            border-radius: 2px;
        }

        .sidebar-nav li {
            margin: 0;
        }

        .sidebar-nav .nav-group-header {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.4);
            padding: 12px 20px 6px;
            margin-top: 12px;
            cursor: default;
            pointer-events: none;
            user-select: none;
        }

        .sidebar-nav .nav-group-header:first-child {
            margin-top: 0;
        }

        .sidebar-nav a {
            display: block;
            padding: 12px 20px;
            color: #ffffff;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            border-left: 3px solid transparent;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .sidebar-nav a:hover {
            background: rgba(255,255,255,0.12);
            color: #ffffff;
        }

        .sidebar-nav a.active {
            background: rgba(184,134,11,0.22);
            color: #ffffff;
            border-left-color: var(--gold);
            font-weight: 700;
        }

        .user-menu {
            display: flex;
            align-items: center;
            padding: 6px 12px;
            user-select: none;
            font-size: 14px;
            color: var(--text);
        }

        /* Notification Bell */
        .notif-bell-wrap {
            position: relative;
            cursor: pointer;
            padding: 6px 10px;
            margin-right: 8px;
            color: var(--text);
            display: flex;
            align-items: center;
        }
        /* Hover only on the bell icon itself, not the dropdown inside the wrap */
        .notif-bell-wrap:not(.open):hover { opacity: 0.8; }
        .notif-badge {
            position: absolute;
            top: 2px; right: 4px;
            background: #dc2626;
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            min-width: 18px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            border-radius: 9px;
            padding: 0 4px;
        }
        .notif-dropdown {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            width: 340px;
            max-height: 420px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.15);
            z-index: 1000;
            overflow: hidden;
        }
        .notif-bell-wrap.open .notif-dropdown { display: block; }
        .notif-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            font-size: 14px;
        }
        .notif-header a { font-size: 12px; color: var(--gold); text-decoration: none; }
        .notif-list {
            max-height: 360px;
            overflow-y: auto;
            background: var(--card-bg);
        }
        .notif-item {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            background: var(--card-bg);
            transition: background 0.15s;
        }
        .notif-item:hover { background: #f5f7fa; }
        .notif-item.unread { background: rgba(184,134,11,0.06); }
        .notif-item-title { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .notif-item-msg { font-size: 12px; color: #888; margin-top: 2px; overflow-wrap: break-word; }
        .notif-item-time { font-size: 11px; color: #aaa; margin-top: 4px; }
        .notif-empty { padding: 24px; text-align: center; color: #888; font-size: 13px; }
        .notif-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-right: 6px; }

        .main-content {
            flex: 1;
            min-width: 0;          /* CRITICAL: lets inner overflow-x:auto work */
            margin-left: 250px;
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow-x: hidden;    /* page itself never scrolls horizontally */
        }

        .screen {
            min-width: 0;          /* same fix one level deeper for safety */
        }

        .topbar {
            background: #ffffff;
            border-bottom: none;
            padding: max(env(safe-area-inset-top), 16px) 32px 16px 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: none;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .topbar-left {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .topbar-title {
            font-size: 20px;
            font-weight: 600;
        }

        .branch-selector {
            padding: 8px 12px;
            border: 1.5px solid var(--border);
            border-radius: 8px;
            font-size: 14px;
            background: #ffffff;
            color: var(--text);
            cursor: pointer;
        }

.interest-summary {
            background: var(--bg-warm);
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 14px 16px;
            margin-bottom: 16px;
            font-size: 13px;
            color: var(--text);
            line-height: 1.7;
        }

        .interest-summary strong {
            color: var(--primary);
        }

        .topbar-right {
            display: flex;
            align-items: center;
            gap: 16px;
            font-size: 14px;
            color: var(--text-light);
        }

        .content-area {
            flex: 1;
            min-width: 0;          /* CRITICAL: lets inner overflow-x:auto work in tables */
            overflow-y: auto;
            overflow-x: hidden;    /* horizontal overflow stays inside table-container */
            padding: 32px;
        }

        .screen {
            display: none;
        }

        .screen.active {
            display: block;
        }

        .stat-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 20px;
            margin-bottom: 32px;
        }

        .stat-card {
            background: #ffffff;
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(26, 32, 53, 0.06);
            transition: box-shadow 0.2s ease, transform 0.2s ease;
            min-width: 0;          /* let the card shrink inside its grid track */
            overflow: hidden;      /* clip stray content inside the card, not the page */
        }

        .stat-card:hover {
            box-shadow: 0 6px 20px rgba(26, 32, 53, 0.10);
            transform: translateY(-1px);
        }

        .stat-card-label {
            font-size: 13px;
            color: var(--text-light);
            font-weight: 500;
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Tile content stays on one line. JS helper _autoFitText() (in
           index.html) shrinks the font-size until scrollWidth fits
           clientWidth, so long ₹ amounts / IDs don't wrap or truncate —
           they just get smaller. min-width:0 lets the value shrink
           inside flex/grid cards. */
        .stat-card-value {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            min-width: 0;
        }

        .stat-card .stat-label { font-size: 13px; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; white-space: nowrap; overflow: hidden; min-width: 0; }
        .stat-card .stat-value { font-size: 28px; font-weight: 700; color: var(--text); line-height: 1.2; white-space: nowrap; overflow: hidden; min-width: 0; }

        .stat-card-subtext {
            font-size: 12px;
            color: var(--text-light);
        }

        .stat-card.primary .stat-card-value {
            color: var(--primary);
        }

        .stat-card.success .stat-card-value {
            color: var(--success);
        }

        .stat-card.warning .stat-card-value {
            color: var(--warning);
        }

        .stat-card.danger .stat-card-value {
            color: var(--danger);
        }

        .section-title {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 24px;
            color: var(--text);
            /* Hidden: the topbar (#topbarTitle) already shows the page name.
               Kept in the DOM so switchSection() can read its text as the
               topbar fallback for sections not in the `titles` map. */
            display: none;
        }

        .section-toolbar {
            display: flex;
            gap: 12px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            align-items: center;
        }

        .btn {
            padding: 10px 16px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-width: 0;
        }

        .btn-primary {
            background: var(--primary);
            color: #fff;
            font-weight: 600;
            letter-spacing: 0.2px;
        }

        .btn-primary:hover {
            background: var(--primary-hover);
            box-shadow: 0 4px 12px rgba(184, 134, 11, 0.25);
        }

        .btn-secondary {
            background: #ffffff;
            border: 1px solid var(--border);
            color: var(--text);
        }

        .btn-secondary:hover {
            background: var(--bg);
            border-color: #c8d0dc;
        }

        .btn-danger {
            background: var(--danger);
            color: #fff;
            font-weight: 600;
        }

        .btn-danger:hover {
            background: #a83228;
            box-shadow: 0 4px 12px rgba(192, 57, 43, 0.25);
        }

        .btn-success {
            background: var(--success);
            color: #fff;
            font-weight: 600;
        }

        .btn-success:hover {
            background: #138a3e;
        }

        .search-box {
            padding: 10px 16px;
            border: 1.5px solid var(--border);
            border-radius: 8px;
            font-size: 14px;
            width: 250px;
            background: #ffffff;
            color: var(--text);
            transition: border-color 0.2s ease;
        }

        .search-box:focus {
            outline: none;
            border-color: var(--navy);
            box-shadow: 0 0 0 3px rgba(27, 58, 92, 0.08);
        }

        .table-container {
            background: #ffffff;
            border: 1px solid var(--border);
            border-radius: 10px;
            overflow-x: auto;
            box-shadow: 0 2px 8px rgba(26, 32, 53, 0.06);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }

        thead {
            background: #f5f7fa;
            border-bottom: 2px solid var(--border);
        }

        th {
            padding: 12px 16px;
            text-align: left;
            font-weight: 700;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-light);
        }

        td {
            padding: 13px 16px;
            border-bottom: 1px solid var(--border);
            color: var(--text);
            overflow-wrap: break-word;
        }

        tbody tr:hover {
            background: #f8fafd;
        }

        .badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: middle;
        }

        .badge-success {
            background: rgba(22, 163, 74, 0.1);
            color: var(--success);
        }

        .badge-danger {
            background: rgba(220, 38, 38, 0.1);
            color: var(--danger);
        }

        .badge-warning {
            background: rgba(234, 88, 12, 0.1);
            color: var(--warning);
        }

        .badge-primary {
            background: rgba(37, 99, 235, 0.1);
            color: var(--primary);
        }

        .badge-info {
            background: rgba(6, 182, 212, 0.1);
            color: #0891b2;
        }

        .badge-secondary {
            background: rgba(107, 114, 128, 0.1);
            color: #6b7280;
        }

        /* Appointment status badges - larger and more visible */
        .appt-status-pending {
            background: #fef3c7;
            color: #92400e;
            border: 1px solid #f59e0b;
            font-weight: 600;
            padding: 4px 12px !important;
            font-size: 12px !important;
            letter-spacing: 0.3px;
        }
        .appt-status-approved {
            background: #d1fae5;
            color: #065f46;
            border: 1px solid #10b981;
            font-weight: 600;
            padding: 4px 12px !important;
            font-size: 12px !important;
            letter-spacing: 0.3px;
        }
        .appt-status-rejected {
            background: #fee2e2;
            color: #991b1b;
            border: 1px solid #ef4444;
            font-weight: 600;
            padding: 4px 12px !important;
            font-size: 12px !important;
            letter-spacing: 0.3px;
        }
        .appt-status-completed {
            background: #cffafe;
            color: #155e75;
            border: 1px solid #06b6d4;
            font-weight: 600;
            padding: 4px 12px !important;
            font-size: 12px !important;
            letter-spacing: 0.3px;
        }
        .appt-status-cancelled {
            background: #f3f4f6;
            color: #6b7280;
            border: 1px solid #9ca3af;
            font-weight: 600;
            padding: 4px 12px !important;
            font-size: 12px !important;
            text-decoration: line-through;
        }

        /* Sortable table headers */
        th.sortable {
            cursor: pointer;
            user-select: none;
            position: relative;
            padding-right: 20px;
        }
        th.sortable:hover {
            background: rgba(0,0,0,0.05);
        }
        th.sortable::after {
            content: '⇅';
            position: absolute;
            right: 4px;
            font-size: 11px;
            opacity: 0.4;
        }
        th.sortable.sort-asc::after {
            content: '↑';
            opacity: 0.8;
        }
        th.sortable.sort-desc::after {
            content: '↓';
            opacity: 0.8;
        }

        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 2000;
            align-items: center;
            justify-content: center;
        }

        .modal-overlay.active {
            display: flex;
        }

        .modal {
            background: #ffffff;
            border-radius: 16px;
            box-shadow: 0 24px 48px rgba(10, 20, 50, 0.18), 0 4px 12px rgba(10, 20, 50, 0.08);
            width: calc(100vw - 48px);
            max-width: calc(100vw - 48px);
            max-height: 90vh;
            overflow-y: auto;
            animation: slideUp 0.3s ease;
            border-top: 3px solid var(--gold);
        }

        @keyframes slideUp {
            from {
                transform: translateY(20px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        @keyframes slideInRight {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        .modal-header {
            padding: 24px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-header h2 {
            font-size: 18px;
            font-weight: 700;
            min-width: 0;
            overflow-wrap: break-word;
        }

        .modal-close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: var(--text-light);
        }

        .modal-body {
            padding: 24px;
        }

        .modal-footer {
            padding: 16px 24px;
            border-top: 1px solid var(--border);
            display: flex;
            gap: 12px;
            justify-content: flex-end;
        }

        /* When iOS virtual keyboard is open, let modal footer flow with content
           instead of being pinned (otherwise it covers the focused input). */
        body.keyboard-open .modal-footer {
            position: static !important;
        }

        .form-group {
            margin-bottom: 16px;
        }

        .form-group label {
            display: block;
            margin-bottom: 6px;
            font-weight: 500;
            font-size: 14px;
            color: var(--text);
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1.5px solid var(--border);
            border-radius: 8px;
            font-size: 14px;
            font-family: inherit;
            background: var(--input-bg);
            color: var(--text);
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--navy);
            box-shadow: 0 0 0 3px rgba(27, 58, 92, 0.10);
        }

        .form-group textarea {
            resize: vertical;
            min-height: 80px;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .form-row-full {
            grid-column: 1 / -1;
        }

        .checkbox-group {
            display: flex;
            gap: 20px;
            margin-top: 8px;
        }

        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .checkbox-item input {
            width: auto;
        }

        /* Room Builder */
        .room-tool-btn {
            width: 36px; height: 36px; border: 1px solid transparent; border-radius: 6px;
            background: none; cursor: pointer; font-size: 18px; display: flex; align-items: center;
            justify-content: center; transition: all 0.15s;
        }
        .room-tool-btn:hover { background: rgba(0,0,0,0.06); }
        .room-tool-btn.active { background: var(--primary); border-color: var(--primary); filter: brightness(1.3); box-shadow: 0 2px 6px rgba(26,115,232,0.3); }
        .palette-unit {
            padding: 10px; margin-bottom: 8px; background: #fff; border: 1px solid var(--border);
            border-radius: 6px; cursor: grab; transition: box-shadow 0.15s; font-size: 12px;
        }
        .palette-unit:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
        .palette-unit:active { cursor: grabbing; }
        .palette-unit .pu-name { font-weight: 600; font-size: 13px; }
        .palette-unit .pu-type { color: var(--text-light); }
        .palette-unit .pu-occ { margin-top: 4px; }
        .palette-unit.placed { border-left: 3px solid var(--success); opacity: 0.7; }

        .kyc-upload-box {
            border: 2px dashed var(--border);
            border-radius: 6px;
            padding: 8px;
            text-align: center;
            cursor: pointer;
            transition: border-color 0.2s, background 0.2s;
            min-height: 60px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .kyc-upload-box:hover { border-color: var(--primary); background: rgba(26,115,232,0.04); }
        .kyc-upload-box.uploaded { border-color: var(--success); border-style: solid; background: rgba(52,168,83,0.06); }
        .kyc-upload-box.uploading { border-color: var(--warning); opacity: 0.7; pointer-events: none; }
        .kyc-upload-box.queued { border-color: var(--primary); border-style: solid; background: rgba(26,115,232,0.06); }
        .kyc-upload-content { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
        .kyc-upload-icon { font-size: 20px; }
        .kyc-upload-label { font-size: 11px; color: var(--text-light); }
        .kyc-upload-status { font-size: 11px; margin-top: 4px; }
        .kyc-upload-status.success { color: var(--success); }
        .kyc-upload-status.error { color: var(--danger); }

        .login-container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 24px;
            background: linear-gradient(180deg, #fdfaf2 0%, #ffffff 55%);
            overflow-y: auto;
            position: relative;
        }
        /* Soft gold glow behind the logo — sets a premium tone without
           competing with the card content. */
        .login-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            width: min(900px, 110%);
            height: 420px;
            transform: translateX(-50%);
            background: radial-gradient(ellipse at top, rgba(184,134,11,0.10) 0%, rgba(184,134,11,0) 70%);
            pointer-events: none;
            z-index: 0;
        }

        /* ── Split card: left showcase + right form ── */
        .login-split {
            display: flex;
            width: 100%;
            max-width: 1140px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 24px 70px rgba(10,20,50,0.16), 0 6px 20px rgba(10,20,50,0.08);
            position: relative;
            z-index: 1;
        }

        /* LEFT: product showcase — navy panel matching sidebar */
        .login-showcase {
            flex: 0 0 500px;
            background: var(--sidebar-dark);
            padding: 48px 36px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .login-showcase-brand {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 6px;
        }
        .login-showcase-brand img {
            max-height: 80px;
            max-width: 80px;
            object-fit: contain;
            border-radius: 10px;
        }
        .login-showcase-brand h2 {
            font-size: 20px;
            font-weight: 800;
            color: #ffffff;
            letter-spacing: 0.2px;
            line-height: 1.3;
        }
        .login-showcase-tagline {
            font-size: 13px;
            color: rgba(255,255,255,0.85);
            margin-bottom: 28px;
            line-height: 1.6;
        }
        .login-product-list {
            display: flex;
            flex-direction: column;
            gap: 0;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.12);
        }
        .login-product-card {
            background: rgba(255,255,255,0.05);
            border-bottom: 1px solid rgba(255,255,255,0.10);
            padding: 13px 16px;
            display: flex;
            align-items: center;
            gap: 14px;
            transition: background 0.2s;
        }
        .login-product-card:last-child {
            border-bottom: none;
        }
        .login-product-card:hover {
            background: rgba(255,255,255,0.10);
        }
        .login-product-icon {
            width: 34px;
            height: 34px;
            border-radius: 8px;
            background: rgba(184,134,11,0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            flex-shrink: 0;
        }
        .login-product-info h4 {
            font-size: 13px;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 1px;
        }
        .login-product-info p {
            font-size: 11px;
            color: rgba(255,255,255,0.8);
            line-height: 1.4;
        }
        .login-showcase-footer {
            margin-top: 24px;
            font-size: 11px;
            color: rgba(255,255,255,0.5);
            line-height: 1.5;
        }

        /* RIGHT: form panel */
        .login-form-panel {
            flex: 1 1 auto;
            background: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 48px 56px;
            min-width: 0;
        }

        .login-box {
            background: transparent;
            border-radius: 0;
            box-shadow: none;
            padding: 0;
            width: 100%;
            max-width: 440px;
            border-top: none;
        }

        .login-logo {
            text-align: center;
            margin-bottom: 14px;
        }

        .login-logo img {
            max-height: 130px;
            width: auto;
            object-fit: contain;
            filter: drop-shadow(0 6px 14px rgba(184,134,11,0.16));
        }

        .login-box h1 {
            font-size: 26px;
            font-weight: 700;
            margin-bottom: 6px;
            text-align: center;
            color: var(--navy);
            letter-spacing: -0.01em;
            line-height: 1.25;
        }
        .login-subtitle {
            text-align: center;
            color: #94a3b8;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 26px;
            line-height: 1.5;
        }

        /* Inputs with a small accent icon on the left */
        .login-input-wrap {
            position: relative;
        }
        .login-input-wrap .login-input-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
            pointer-events: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .login-input-wrap input {
            padding-left: 42px !important;
            padding-top: 13px !important;
            padding-bottom: 13px !important;
            font-size: 15px !important;
            border-width: 1.5px !important;
            border-radius: 10px !important;
            background: #fdfdfb !important;
            transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
        }
        .login-input-wrap input:focus {
            background: #ffffff !important;
            border-color: var(--gold) !important;
            box-shadow: 0 0 0 4px rgba(184,134,11,0.14) !important;
        }

        /* Premium login button: gradient gold + subtle depth */
        #loginPanel #loginSubmitBtn {
            background: linear-gradient(135deg, #c8930e 0%, #b8860b 50%, #9c700a 100%);
            color: #fff;
            font-weight: 600;
            letter-spacing: 0.3px;
            padding: 14px 20px;
            font-size: 15px;
            border-radius: 11px;
            border: none;
            box-shadow: 0 6px 18px rgba(184,134,11,0.30), inset 0 1px 0 rgba(255,255,255,0.20);
            transition: transform 0.15s ease, box-shadow 0.18s ease, filter 0.18s ease;
            /* Base .btn is inline-flex without justify-content, so a 100%-wide
               button lays its text out flush-left. Center it explicitly. */
            justify-content: center;
            text-align: center;
        }
        #loginPanel #loginSubmitBtn:hover {
            transform: translateY(-1px);
            box-shadow: 0 9px 22px rgba(184,134,11,0.36), inset 0 1px 0 rgba(255,255,255,0.24);
            filter: brightness(1.03);
        }
        #loginPanel #loginSubmitBtn:active {
            transform: translateY(0);
        }

        /* Sign Up — quieter, but the same shape so it reads as a peer */
        #loginPanel #loginSignupBtn {
            background: #ffffff;
            color: var(--navy);
            border: 1.5px solid #e5e7eb;
            font-weight: 600;
            padding: 13px 20px;
            font-size: 15px;
            border-radius: 11px;
            transition: border-color 0.18s ease, background 0.18s ease, transform 0.15s ease;
            justify-content: center;
            text-align: center;
        }
        #loginPanel #loginSignupBtn:hover {
            border-color: var(--gold);
            background: #fffdf6;
            transform: translateY(-1px);
        }

        /* Trust strip — small icons + uppercase microcopy under the form */
        .login-trust {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
            margin-top: 18px;
            font-size: 10.5px;
            color: #94a3b8;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            font-weight: 700;
        }
        .login-trust span {
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        .login-trust svg {
            width: 12px;
            height: 12px;
            opacity: 0.7;
        }

        .login-error {
            background: rgba(192, 57, 43, 0.08);
            color: var(--danger);
            border: 1px solid rgba(192, 57, 43, 0.2);
            padding: 12px 16px;
            border-radius: 8px;
            margin-bottom: 16px;
            font-size: 14px;
            display: none;
        }

        .login-error.show {
            display: block;
        }

        .branch-card {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 16px;
        }

        .branch-card:hover {
            border-color: var(--gold);
            box-shadow: 0 4px 12px rgba(184, 134, 11, 0.12);
        }

        .branch-card-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 12px;
        }

        .branch-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }

        .branch-stat {
            display: flex;
            flex-direction: column;
        }

        .branch-stat-label {
            font-size: 12px;
            color: var(--text-light);
            margin-bottom: 4px;
        }

        .branch-stat-value {
            font-size: 18px;
            font-weight: 600;
            color: var(--primary);
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: var(--text-light);
        }

        .empty-state svg {
            width: 80px;
            height: 80px;
            margin-bottom: 20px;
            opacity: 0.5;
        }

        .empty-state p {
            font-size: 16px;
            margin-bottom: 20px;
        }

        .loading {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-light);
        }

        .spinner {
            display: inline-block;
            width: 40px;
            height: 40px;
            border: 4px solid var(--border);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        .action-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .action-buttons button {
            padding: 6px 12px;
            font-size: 12px;
            white-space: nowrap;
        }

        .tabs {
            display: flex;
            gap: 0;
            border-bottom: 1px solid var(--border);
            margin-bottom: 24px;
        }

        .tab {
            padding: 12px 20px;
            border: none;
            background: none;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-light);
            border-bottom: 2px solid transparent;
            transition: all 0.3s ease;
        }

        .tab.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .alert {
            padding: 16px;
            border-radius: 6px;
            margin-bottom: 16px;
            font-size: 14px;
        }

        .alert-success {
            background: rgba(22, 163, 74, 0.1);
            color: var(--success);
            border: 1px solid rgba(22, 163, 74, 0.2);
        }

        .alert-error {
            background: rgba(220, 38, 38, 0.1);
            color: var(--danger);
            border: 1px solid rgba(220, 38, 38, 0.2);
        }

        /* ===== HAMBURGER MENU BUTTON ===== */
        .hamburger-btn {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
            z-index: 1100;
            flex-shrink: 0;
        }

        .hamburger-btn span {
            display: block;
            width: 22px;
            height: 2px;
            background: var(--text);
            margin: 5px 0;
            border-radius: 2px;
            transition: all 0.3s ease;
        }

        .hamburger-btn.active span:nth-child(1) {
            transform: rotate(45deg) translate(5px, 5px);
        }

        .hamburger-btn.active span:nth-child(2) {
            opacity: 0;
        }

        .hamburger-btn.active span:nth-child(3) {
            transform: rotate(-45deg) translate(5px, -5px);
        }

        .sidebar-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0);
            z-index: 999;
            pointer-events: none;
            transition: background 0.3s ease;
        }

        .sidebar-overlay.active {
            background: rgba(0, 0, 0, 0.45);
            pointer-events: auto;
            backdrop-filter: blur(2px);
            -webkit-backdrop-filter: blur(2px);
        }

        /* Smooth scroll for main content */
        .content-area {
            scroll-behavior: smooth;
        }

        /* ================================================================
           RESPONSIVE: TABLET (768px)
           ================================================================ */
        @media (max-width: 768px) {
            .sidebar {
                width: 280px;
                transform: translateX(-100%);
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: none;
                height: 100vh;
                height: 100dvh;
            }

            .sidebar.open {
                transform: translateX(0);
                box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
            }

            .sidebar-nav {
                padding: 8px 0 24px;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
            }

            .sidebar-nav a {
                padding: 14px 20px;
                min-height: 48px;
                display: flex;
                align-items: center;
            }

            .hamburger-btn {
                display: block;
            }

            .main-content {
                margin-left: 0;
            }

            .topbar {
                /* Tablet/phone — keep status-bar safe area on top */
                padding: max(env(safe-area-inset-top), 12px) 16px 12px 16px;
            }

            .topbar-title {
                font-size: 16px;
            }

            .content-area {
                padding: 20px 16px;
            }

            .stat-cards {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 12px;
            }

            .stat-card {
                padding: 16px;
            }

            .stat-card-value {
                font-size: 22px;
            }

            .form-row {
                grid-template-columns: 1fr;
            }

            .modal {
                width: calc(100vw - 32px);
                max-width: calc(100vw - 32px);
                margin: 0;
            }

            .branch-stats {
                grid-template-columns: repeat(3, 1fr);
            }

            .section-toolbar {
                flex-wrap: wrap;
                gap: 10px;
            }

            .search-box {
                width: 100%;
                order: 10;
            }

            .action-buttons {
                flex-wrap: wrap;
                gap: 6px;
            }

            .action-buttons .btn,
            .action-buttons button {
                min-height: 44px;
                min-width: 44px;
            }

            .branch-selector {
                max-width: 180px;
                font-size: 13px;
            }

            .notif-dropdown {
                position: fixed;
                /* Open just below the topbar, accounting for the device status
                   bar / iPhone notch via env(safe-area-inset-top). Topbar height
                   ≈ 60px including padding. */
                top: calc(env(safe-area-inset-top, 0px) + 56px);
                right: 12px;
                left: 12px;
                width: auto;
                max-width: none;
                max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 80px);
                overflow-y: auto;
                z-index: 200;
            }

            /* Table scroll indicator */
            .table-container {
                position: relative;
            }

            .table-container::after {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                width: 24px;
                background: linear-gradient(to left, rgba(255,255,255,0.95), transparent);
                pointer-events: none;
                border-radius: 0 8px 8px 0;
                opacity: 1;
                transition: opacity 0.3s;
            }

            .table-container.scrolled-end::after {
                opacity: 0;
            }
        }

        /* ================================================================
           RESPONSIVE: MOBILE (480px)
           ================================================================ */
        @media (max-width: 480px) {
            body {
                overflow-x: hidden;
                -webkit-text-size-adjust: 100%;
            }

            .main-content {
                overflow-x: hidden;
            }

            .topbar {
                /* Phone — keep status-bar safe area on top so logout/branch-selector
                   aren't covered by the notch/dynamic island/Android status bar */
                padding: max(env(safe-area-inset-top), 10px) 12px 10px 12px;
                flex-wrap: nowrap;
                gap: 8px;
            }

            .topbar-left {
                gap: 8px;
                flex: 1;
                min-width: 0;
                /* L-7: removed overflow:hidden — it clipped user/notification dropdowns
                   that overflow the topbar. Title still ellipses via .topbar-title. */
            }

            .topbar-title {
                font-size: 15px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .topbar-right {
                font-size: 12px;
                flex-shrink: 0;
            }


            .content-area {
                padding: 14px 12px;
            }

            /* Stat cards — 2-col grid, tighter */
            .stat-cards {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 10px;
            }

            .stat-card {
                padding: 14px;
                border-radius: 10px;
            }

            .stat-card-label {
                font-size: 10px;
                letter-spacing: 0.6px;
            }

            .stat-card-value {
                font-size: 20px;
            }

            .stat-card-subtext {
                font-size: 11px;
            }

            .section-title {
                font-size: 18px;
                margin-bottom: 14px;
            }

            /* Toolbar: stack vertically */
            .section-toolbar {
                gap: 8px;
                flex-direction: column;
                align-items: stretch;
            }

            .section-toolbar > * {
                width: 100%;
            }

            /* Buttons: proper touch targets */
            .btn {
                padding: 10px 14px;
                font-size: 13px;
                min-height: 44px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border-radius: 8px;
            }

            .search-box {
                width: 100%;
                font-size: 16px;
                border-radius: 8px;
            }

            /* ===== TABLES: smooth horizontal scroll ===== */
            .table-container {
                border-radius: 10px;
                -webkit-overflow-scrolling: touch;
                overflow-x: auto;
                overflow-y: visible;
                /* Subtle inset shadow to hint at scrollability */
                box-shadow: inset -12px 0 8px -12px rgba(0,0,0,0.06),
                            0 1px 3px rgba(0,0,0,0.05);
            }

            .table-container::-webkit-scrollbar {
                height: 4px;
            }

            .table-container::-webkit-scrollbar-track {
                background: var(--bg);
                border-radius: 2px;
            }

            .table-container::-webkit-scrollbar-thumb {
                background: var(--border);
                border-radius: 2px;
            }

            table {
                font-size: 12px;
                min-width: 640px;
            }

            th {
                padding: 10px 12px;
                font-size: 11px;
                text-transform: uppercase;
                letter-spacing: 0.4px;
                color: var(--text-light);
                white-space: nowrap;
                position: sticky;
                top: 0;
                background: var(--bg);
                z-index: 2;
            }

            td {
                padding: 10px 12px;
                white-space: nowrap;
            }

            /* ===== MODALS: bottom sheet style ===== */
            .modal-overlay {
                align-items: flex-end;
            }

            .modal {
                width: 100%;
                max-width: 100%;
                max-height: 92vh;
                border-radius: 20px 20px 0 0;
                margin: 0;
                border-top: 3px solid var(--gold);
                animation: slideUpMobile 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            @keyframes slideUpMobile {
                from { transform: translateY(100%); }
                to { transform: translateY(0); }
            }

            /* Drag handle indicator */
            .modal::before {
                content: '';
                display: block;
                width: 36px;
                height: 4px;
                background: var(--border);
                border-radius: 2px;
                margin: 8px auto 0;
            }

            .modal-header {
                padding: 12px 16px 16px;
                position: sticky;
                top: 0;
                background: var(--card-bg);
                z-index: 10;
                border-bottom: 1px solid var(--border);
            }

            .modal-header h2 {
                font-size: 16px;
            }

            .modal-body {
                padding: 16px;
                max-height: calc(92vh - 140px);
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }

            .modal-footer {
                padding: 12px 16px;
                position: sticky;
                bottom: 0;
                background: var(--card-bg);
                z-index: 10;
                border-top: 1px solid var(--border);
                box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
            }

            /* Prevent zoom issues on orientation change */
            html, body {
                touch-action: manipulation;
                -ms-touch-action: manipulation;
                overflow-x: hidden;
            }

            /* Prevent iOS zoom on form focus */
            .form-group input,
            .form-group select,
            .form-group textarea {
                font-size: 16px;
                padding: 12px;
                border-radius: 8px;
            }

            .form-group label {
                font-size: 13px;
                margin-bottom: 5px;
            }

            /* Units grid — 2 cols on mobile */
            .units-grid {
                grid-template-columns: 1fr 1fr;
                gap: 10px;
                padding: 10px 0;
            }

            .unit-card {
                padding: 10px;
                border-radius: 8px;
            }

            .unit-card-number {
                font-size: 14px;
            }

            .unit-card-actions button {
                min-height: 36px;
                font-size: 11px;
            }

            /* Branch cards */
            .branch-card {
                padding: 16px;
                border-radius: 10px;
            }

            .branch-stats {
                grid-template-columns: repeat(3, 1fr);
                gap: 8px;
            }

            .branch-stat-value {
                font-size: 15px;
            }

            /* ===== TABS: horizontal scroll ===== */
            .tabs {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                flex-wrap: nowrap;
                gap: 0;
                scrollbar-width: none;
                -ms-overflow-style: none;
                padding-bottom: 1px;
            }

            .tabs::-webkit-scrollbar {
                display: none;
            }

            .tab {
                padding: 11px 16px;
                font-size: 13px;
                white-space: nowrap;
                flex-shrink: 0;
                border-bottom-width: 2px;
            }

            /* Login page — vertically centered on phones */
            .login-container {
                padding: 16px;
                align-items: center;
                /* Use dvh so the form stays centered when the keyboard opens */
                min-height: 100dvh;
            }

            /* On mobile: stack vertically, hide the showcase panel */
            .login-split {
                flex-direction: column;
                border-radius: 16px;
                max-width: 100%;
            }

            .login-showcase {
                display: none;
            }

            .login-form-panel {
                padding: 32px 24px;
                border-radius: 16px;
            }

            .login-box {
                max-width: 100%;
            }

            .login-box h1 {
                font-size: 20px;
            }

            /* ===== ACTION BUTTONS: inline scroll ===== */
            .action-buttons {
                display: flex;
                flex-wrap: nowrap;
                gap: 4px;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                padding-bottom: 2px;
            }

            .action-buttons::-webkit-scrollbar {
                display: none;
            }

            .action-buttons button,
            .action-buttons .btn {
                flex-shrink: 0;
                white-space: nowrap;
                font-size: 11px;
                padding: 6px 10px;
                min-height: 32px;
                border-radius: 6px;
            }

            /* Toolbar buttons */
            .section-toolbar .btn-primary,
            .section-toolbar .btn-secondary,
            .section-toolbar .btn-danger,
            .section-toolbar .btn-success {
                width: 100%;
                justify-content: center;
                min-height: 44px;
            }

            /* Branch selector in topbar */
            #branchSelectorContainer {
                max-width: 130px;
            }

            #branchSelectorContainer .branch-selector {
                font-size: 12px;
                padding: 7px 8px;
                border-radius: 6px;
            }

            .branch-selector {
                width: 100%;
                font-size: 14px;
                min-height: 44px;
            }

            .checkbox-group {
                flex-direction: column;
                gap: 10px;
            }

            .interest-summary {
                font-size: 12px;
                padding: 10px 12px;
                border-radius: 8px;
            }

            .user-dropdown {
                right: 0;
                left: auto;
            }

            /* Better empty states */
            .empty-state {
                padding: 40px 20px;
            }

            .empty-state p {
                font-size: 14px;
            }

            /* Badges */
            .badge {
                font-size: 11px;
                padding: 3px 10px;
            }

            /* Alerts */
            .alert {
                font-size: 13px;
                padding: 12px;
                border-radius: 8px;
            }

            /* M-3: allotment-form footer with 3 buttons fits on mobile */
            .modal-footer { flex-wrap: wrap; gap: 8px; }
            .modal-footer .btn { flex: 1 1 calc(50% - 4px); justify-content: center; }

            /* Section-toolbar form controls — fixes appointments / payments / leads filter rows */
            .section-toolbar select,
            .section-toolbar input[type="date"],
            .section-toolbar input[type="text"],
            .section-toolbar input[type="search"] {
                font-size: 16px;
                min-height: 44px;
                width: 100%;
                box-sizing: border-box;
            }

            /* Mobile keeps the desktop one-line + auto-shrink rule (set
               at the base .stat-card-value). The previous "let wrap on
               mobile" override has been removed — JS _autoFitText()
               shrinks long ₹ amounts to fit instead. */

            /* Loading overlay box */
            .loading-overlay > div { max-width: 90vw; word-wrap: break-word; }

            /* Topbar spacing */
            .topbar-right { gap: 6px; }

            /* Sidebar group headers — tighter on mobile */
            .sidebar-nav .nav-group-header { margin-top: 6px; padding-top: 6px; }

            /* H-8 / M-9: tenants table — show only Name + Phone + Locker on phones.
               Class-based hiding (td-mobile-hide) is more robust than nth-child;
               adding/removing columns no longer breaks mobile layout. */
            #tenantsScreen #tenantsTable td:first-child { white-space: normal; }

            /* H-12: lead detail modal collapses to single column */
            #leadDetailModal .lead-detail-grid { grid-template-columns: 1fr !important; }

            /* M-1: KYC photo tiles — 2 per row on phones (instead of squashed 3) */
            .kyc-tiles { grid-template-columns: 1fr 1fr !important; gap: 8px; }

            /* M-2: branch-stats grid — 2 columns on phones */
            .branch-stats { grid-template-columns: repeat(2, 1fr) !important; }

            /* M-4: prevent rubber-band/double-scroll trap on iOS modals */
            .modal-body { overscroll-behavior: contain; }
        }

        /* M-3: very narrow phones — shrink topbar branch selector and title */
        @media (max-width: 400px) {
            .branch-selector { max-width: 110px !important; font-size: 12px !important; }
            .topbar-title { font-size: 13px !important; }
        }

        /* ================================================================
           RESPONSIVE: SMALL PHONES (360px)
           ================================================================ */
        @media (max-width: 360px) {
            /* Keep stat-cards at 2 columns even on the smallest phones —
               users prefer a glanceable scan over a single tall stack.
               The cards shrink to fit; long values wrap (overflow-wrap)
               instead of being clipped.                                   */
            .stat-cards {
                grid-template-columns: 1fr 1fr;
                gap: 8px;
            }

            .stat-card {
                padding: 12px 10px;
            }

            .stat-card-label {
                font-size: 10px;
            }

            .stat-card-value {
                font-size: 18px;
            }

            .branch-stats {
                grid-template-columns: 1fr 1fr;
            }

            .topbar-title {
                font-size: 13px;
            }

            .modal-header h2 {
                font-size: 15px;
            }

            .section-title {
                font-size: 16px;
            }

            .units-grid {
                grid-template-columns: 1fr;
            }

            .content-area {
                padding: 10px 8px;
            }

            /* M-7: kill min-width:200px on toolbar inputs so they shrink to fit */
            .section-toolbar input[type="text"],
            .section-toolbar input[type="search"],
            .section-toolbar select { min-width: 0 !important; width: 100% !important; }
        }

        /* M-9: class-based mobile column hiding (replaces fragile nth-child rules).
           Hidden by default, shown on >=481px screens. Apply to <th> AND <td>. */
        .td-mobile-hide { display: none; }
        @media (min-width: 481px) {
            .td-mobile-hide { display: table-cell; }
        }

        /* ===== SAFE AREA (notched phones) ===== */
        @supports (padding: env(safe-area-inset-bottom)) {
            .modal-footer {
                padding-bottom: calc(12px + env(safe-area-inset-bottom));
            }

            .sidebar-nav {
                padding-bottom: calc(20px + env(safe-area-inset-bottom));
            }

            @media (max-width: 480px) {
                .content-area {
                    padding-bottom: calc(14px + env(safe-area-inset-bottom));
                }
            }

            /* M-5: iPhone landscape — pad sides past the notch on topbar / content / modals */
            @media (max-width: 768px) {
                .topbar {
                    padding-left: max(env(safe-area-inset-left), 12px);
                    padding-right: max(env(safe-area-inset-right), 12px);
                }
                .content-area {
                    padding-left: max(env(safe-area-inset-left), 8px);
                    padding-right: max(env(safe-area-inset-right), 8px);
                }
                .modal-overlay {
                    padding-left: max(env(safe-area-inset-left), 0px);
                    padding-right: max(env(safe-area-inset-right), 0px);
                }
            }
        }

        /* ================================================================
           RESPONSIVE: NEW SCREENS (Leads, Feedback, Reminders, Lead Capture)
           ================================================================ */
        @media (max-width: 768px) {
            /* Summary card grids in new screens — 2 cols */
            #remindersSummary,
            #feedbackSummaryCards,
            #leadsSummary,
            #leadCaptureStats {
                grid-template-columns: 1fr 1fr !important;
                gap: 10px !important;
            }

            /* Filter/search toolbars in new screens */
            #remindersScreen .section-toolbar,
            #leadsScreen .section-toolbar {
                flex-direction: column;
                align-items: stretch;
            }

            #remindersScreen .section-toolbar select,
            #leadsScreen .section-toolbar select,
            #leadStatusFilter,
            #leadSearch,
            #reminderFilter {
                width: 100%;
                min-height: 44px;
                font-size: 16px;
                border-radius: 8px;
            }

            /* Lead capture form — already max-width:500px, just adjust padding */
            #leadCaptureScreen > div {
                padding: 0 4px;
            }

            #leadCaptureScreen input,
            #leadCaptureScreen select,
            #leadCaptureScreen textarea {
                font-size: 16px !important;
            }

            /* Customer reminder banners */
            #custDashboardContent > div[style*="border-left:4px"] {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
                padding: 12px;
            }
        }

        @media (max-width: 480px) {
            /* Summary cards — tighter on small phones */
            #remindersSummary,
            #feedbackSummaryCards,
            #leadsSummary {
                grid-template-columns: 1fr 1fr !important;
                gap: 8px !important;
            }

            #leadCaptureStats {
                grid-template-columns: 1fr 1fr !important;
                gap: 8px !important;
            }

            /* Inline modals (feedback, lead detail, add lead) — bottom sheet */
            #feedbackModal > div,
            #feedbackDetailModal > div,
            #leadDetailModal > div,
            #addLeadModal > div,
            #forceCustPwdModal > div,
            #newLockerReqModal > div {
                max-width: 100% !important;
                max-height: 92vh !important;
                border-radius: 20px 20px 0 0 !important;
                margin: 0 !important;
                position: fixed !important;
                bottom: 0 !important;
                left: 0 !important;
                right: 0 !important;
                animation: slideUpMobile 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            }

            #feedbackModal,
            #feedbackDetailModal,
            #leadDetailModal,
            #addLeadModal {
                align-items: flex-end !important;
                padding: 0 !important;
            }

            /* Feedback form radio pills — smaller on mobile */
            .fb-option {
                padding: 5px 8px !important;
                font-size: 11px !important;
            }

            /* NPS buttons — smaller */
            .nps-btn {
                width: 30px !important;
                height: 30px !important;
                font-size: 12px !important;
            }

            /* Leads table status dropdown — touch friendly */
            #leadsTable select {
                min-height: 36px;
                font-size: 12px;
                padding: 4px 6px;
            }

            /* Leads table action buttons */
            #leadsTable .btn {
                min-height: 32px;
                padding: 4px 8px;
                font-size: 11px;
            }

            /* Reminders table row highlighting */
            #remindersTable tr {
                font-size: 12px;
            }

            #remindersTable .btn {
                min-height: 32px;
                padding: 4px 8px;
                font-size: 11px;
            }

            /* Feedback table */
            #feedbackTable .btn {
                min-height: 32px;
                padding: 4px 8px;
                font-size: 11px;
            }

            /* Lead capture — full width button */
            #leadCaptureScreen .btn-primary {
                min-height: 48px;
                font-size: 16px !important;
            }

            /* Customer dashboard stat cards grid */
            #custDashboardContent .stat-card {
                padding: 12px;
            }

            #custDashboardContent .stat-cards {
                grid-template-columns: 1fr 1fr;
                gap: 8px;
            }

            /* Customer Payments + staff Tenants — card layout on phones */
            #custPaymentsTableWrap, #custPaymentsTableEl, #custPaymentsTableEl thead { display: none; }
            #tenantsTableWrap { display: none; }
            .payment-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; }
            .payment-card .pc-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 13px; }
            .payment-card .pc-amount { font-size: 22px; font-weight: 700; color: var(--text); }
            .payment-card .pc-actions { margin-top: 8px; }
        }

        @media (min-width: 481px) {
            .payment-cards-wrap { display: none; }
        }

        @media (max-width: 360px) {
            #remindersSummary,
            #feedbackSummaryCards,
            #leadsSummary {
                grid-template-columns: 1fr !important;
            }

            .fb-option {
                padding: 4px 6px !important;
                font-size: 10px !important;
            }

            .nps-btn {
                width: 26px !important;
                height: 26px !important;
                font-size: 11px !important;
            }
        }

        /* ================================================================
           PROSPECT SCREEN + PRE-LOGIN PANELS — MOBILE RESPONSIVE
           ================================================================ */

        /* ── Prospect screen: header ── */
        /* Safe-area pushes content below status bar/notch on all devices */
        .prospect-topbar {
            padding-top: env(safe-area-inset-top, 0px) !important;
            padding-bottom: 0 !important;
            min-height: calc(60px + env(safe-area-inset-top, 0px)) !important;
            align-items: flex-end !important; /* align row to bottom so content sits at 60px mark */
        }
        .prospect-topbar > div {
            padding-bottom: 10px;
            padding-top: 10px;
        }
        #prospectScreen .prospect-topbar-text {
            font-weight: 700;
            font-size: 16px;
            color: #ffffff;
            letter-spacing: 0.2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        @media (max-width: 480px) {
            /* Header: hide brand text, keep logo; shrink greeting */
            #prospectScreen .prospect-topbar-text { display: none; }
            #prospectScreen #prospectUserGreet {
                max-width: 100px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 12px;
            }
            /* Header overall */
            #prospectScreen > div:first-child {
                padding: 0 14px !important;
                height: 54px !important;
            }

            /* Hub: tighter vertical padding */
            #prospectHub {
                padding: 24px 14px !important;
            }
            #prospectHub > div > div:first-child {
                margin-bottom: 20px !important;
            }
            #prospectHub h2 {
                font-size: 20px !important;
            }
            #prospectHub > div > div:first-child > div:first-child {
                font-size: 11px !important;
            }

            /* Product tile grid: always 1 col, compact tiles */
            #prospectHub .product-grid,
            #prospectHub > div > div[style*="grid"] {
                grid-template-columns: 1fr !important;
                gap: 12px !important;
            }

            /* Product tiles: less padding */
            #prospectHub > div > div[style*="grid"] > div {
                padding: 20px 16px !important;
                border-radius: 12px !important;
            }
            #prospectHub > div > div[style*="grid"] > div > div:first-child {
                font-size: 32px !important;
                margin-bottom: 8px !important;
            }

            /* Info pages (Locker / NCD / Gold) */
            #prospectLockerInfo,
            #prospectNcdInfo,
            #prospectGoldInfo {
                padding: 16px 12px !important;
            }
            #prospectLockerInfo > div,
            #prospectNcdInfo > div,
            #prospectGoldInfo > div {
                max-width: 100% !important;
            }
            /* Inner card header */
            #prospectLockerInfo .info-header,
            #prospectNcdInfo .info-header,
            #prospectGoldInfo .info-header,
            #prospectLockerInfo > div > div > div:first-child,
            #prospectNcdInfo > div > div > div:first-child,
            #prospectGoldInfo > div > div > div:first-child {
                padding: 20px 16px !important;
            }
            /* Inner card body */
            #prospectLockerInfo > div > div > div:last-child,
            #prospectNcdInfo > div > div > div:last-child,
            #prospectGoldInfo > div > div > div:last-child {
                padding: 16px !important;
            }
            /* CTA button groups */
            #prospectLockerInfo .cta-group,
            #prospectNcdInfo .cta-group,
            #prospectGoldInfo .cta-group {
                flex-direction: column !important;
                gap: 10px !important;
            }
            #prospectLockerInfo .cta-group button,
            #prospectNcdInfo .cta-group button,
            #prospectGoldInfo .cta-group button,
            #prospectLockerInfo button.btn,
            #prospectNcdInfo button.btn,
            #prospectGoldInfo button.btn {
                width: 100% !important;
                min-height: 48px !important;
                font-size: 15px !important;
            }

            /* Pre-login screen: fill the viewport */
            #loginScreen {
                padding: 0 !important;
                min-height: 100dvh;
            }
            /* Pre-login split: already handled (showcase hidden), but fine-tune */
            .login-form-panel {
                padding: 24px 18px !important;
            }
            .login-box h1 {
                font-size: 18px !important;
            }

            /* Enquiry / signup form inputs on mobile */
            #signupPanel input,
            #signupPanel select,
            #signupPanel textarea,
            #apptPanel input,
            #apptPanel select {
                font-size: 16px !important;
                min-height: 48px !important;
                border-radius: 8px !important;
            }
            #signupPanel .btn,
            #apptPanel .btn {
                min-height: 48px !important;
                font-size: 15px !important;
            }
            /* Appt panel back link and skip */
            #apptPanelBack a,
            #signupPanelBack a {
                font-size: 13px !important;
            }
        }

        @media (max-width: 360px) {
            #prospectHub h2 { font-size: 18px !important; }
            #prospectHub > div > div[style*="grid"] > div { padding: 16px 12px !important; }
        }

        /* ===== GLOBAL POLISH ===== */
        /* Smooth all transitions */
        * {
            -webkit-tap-highlight-color: transparent;
        }

        /* Better focus states for accessibility */
        button:focus-visible,
        input:focus-visible,
        select:focus-visible,
        a:focus-visible {
            outline: 2px solid var(--gold);
            outline-offset: 2px;
        }

        /* Prevent text selection on buttons */
        .btn, .tab, .sidebar-nav a {
            -webkit-user-select: none;
            user-select: none;
        }

        /* Smoother font rendering */
        body {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .units-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 12px;
            padding: 12px 0;
        }

        .unit-card {
            background: var(--card-bg);
            border: 2px solid var(--border);
            border-radius: 6px;
            padding: 10px 12px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
            transition: all 0.2s ease;
            border-left: 4px solid var(--border);
        }

        .unit-card:hover {
            box-shadow: 0 3px 6px rgba(0,0,0,0.12);
        }

        .unit-card.active {
            border-left-color: var(--success);
        }

        .unit-card.upcoming {
            border-left-color: var(--warning);
        }

        /* Branch color coding for unit cards */
        .unit-card[data-branch-color="1"] { border-left-color: #2563eb; }
        .unit-card[data-branch-color="2"] { border-left-color: #7c3aed; }
        .unit-card[data-branch-color="3"] { border-left-color: #0891b2; }
        .unit-card[data-branch-color="4"] { border-left-color: #c2410c; }
        .unit-card[data-branch-color="5"] { border-left-color: #15803d; }

        .unit-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
        }

        .unit-card-number {
            font-size: 15px;
            font-weight: 700;
            color: var(--text);
            min-width: 0;
            overflow-wrap: break-word;
        }

        .unit-card-badge {
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .unit-card-badge.branch-badge {
            background: rgba(37, 99, 235, 0.1);
            color: #2563eb;
        }
        .unit-card-badge.branch-badge[data-color="1"] { background: rgba(37, 99, 235, 0.1); color: #2563eb; }
        .unit-card-badge.branch-badge[data-color="2"] { background: rgba(124, 58, 237, 0.1); color: #7c3aed; }
        .unit-card-badge.branch-badge[data-color="3"] { background: rgba(8, 145, 178, 0.1); color: #0891b2; }
        .unit-card-badge.branch-badge[data-color="4"] { background: rgba(194, 65, 12, 0.1); color: #c2410c; }
        .unit-card-badge.branch-badge[data-color="5"] { background: rgba(21, 128, 61, 0.1); color: #15803d; }

        .unit-card-badge.active {
            background: rgba(22, 163, 74, 0.1);
            color: var(--success);
        }

        .unit-card-badge.upcoming {
            background: rgba(234, 88, 12, 0.1);
            color: var(--warning);
        }

        .unit-card-info {
            font-size: 12px;
            color: var(--text-light);
            margin-bottom: 6px;
        }

        .unit-card-info strong {
            color: var(--text);
        }

        .unit-card-type {
            background: var(--bg);
            padding: 5px 8px;
            border-radius: 4px;
            font-size: 11px;
            margin-bottom: 6px;
            word-break: break-word;
        }

        .unit-card-occupancy {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 0;
            border-bottom: 1px solid var(--border);
            margin-bottom: 6px;
            font-size: 12px;
        }

        .unit-card-occupancy-bar {
            flex-grow: 1;
            height: 5px;
            background: var(--border);
            border-radius: 3px;
            margin: 0 6px;
            overflow: hidden;
        }

        .unit-card-occupancy-fill {
            height: 100%;
            background: var(--success);
            border-radius: 3px;
        }

        .unit-card-location {
            font-size: 11px;
            color: var(--text-light);
            margin-bottom: 6px;
        }

        .unit-card-branch {
            font-size: 10px;
            background: var(--primary);
            color: white;
            padding: 2px 6px;
            border-radius: 3px;
            display: inline-block;
            margin-bottom: 6px;
        }

        .unit-card-actions {
            display: flex;
            gap: 6px;
            margin-top: 4px;
        }

        .unit-card-actions button {
            flex: 1;
            padding: 4px 6px;
            font-size: 11px;
        }

        @media (max-width: 768px) {
            .units-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }

            /* M-6: room editor UI is unusable on phones — hide it entirely.
               (Keep #roomCanvasWrap visible so customers/staff can VIEW the layout.) */
            #roomToolbar, #roomPalette, #roomDimensionsBar { display: none !important; }

            /* Room Builder — tablet/mobile */
            #roomToolbar > div:first-child {
                gap: 4px !important;
            }
            #roomToolbar .btn {
                padding: 5px 8px !important;
                font-size: 12px !important;
                min-height: 36px;
            }
            #roomDimensionsBar {
                flex-wrap: wrap !important;
                gap: 8px !important;
                font-size: 12px !important;
            }
            #roomBuilderContainer > div {
                flex-direction: column !important;
            }
            #roomPalette {
                width: 100% !important;
                max-height: 200px !important;
                flex-direction: row;
                order: -1;
            }
            #roomPaletteList {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
            }
            #roomPaletteList .palette-unit {
                min-width: 140px;
                flex: 1;
                margin-bottom: 0;
            }
            #roomCanvasWrap {
                min-height: 350px !important;
                overflow: auto !important;
                -webkit-overflow-scrolling: touch;
                touch-action: pan-x pan-y;
            }
            #roomUnitPopup > div {
                max-width: 95vw !important;
                padding: 14px !important;
            }
        }

        @media (max-width: 480px) {
            /* Room Builder — small phone */
            #roomToolGroup {
                flex-wrap: wrap !important;
            }
            .room-tool-btn {
                width: 40px !important;
                height: 40px !important;
                font-size: 16px !important;
            }
            #roomToolbar > div:first-child {
                justify-content: center;
            }
            #roomToolbar > div:first-child > .btn {
                font-size: 11px !important;
                padding: 4px 6px !important;
            }
            /* Hide text labels on small screens */
            #roomToolbar > div:first-child > .btn:not([title]) {
                font-size: 0 !important;
            }
            #roomPalette {
                max-height: 160px !important;
                padding: 8px !important;
            }
            #roomPaletteList .palette-unit {
                min-width: 120px;
                font-size: 11px;
                padding: 6px;
            }
            #roomCanvasWrap {
                min-height: 280px !important;
            }
            #roomStatusLabel {
                display: none !important;
            }
            #roomDimensionsBar span:last-child {
                display: none;
            }
            #roomSetupPrompt {
                padding: 30px 16px !important;
            }
        }

        /* ─────────────────────────────────────────────────────────────────────
         * Mobile fixes for self-signup wizard (added 2026-05-29 after audit).
         * Wizard's modal markup uses raw inline styles for grids; these
         * media queries collapse those grids to single column on phones so
         * fields don't overlap or truncate. Affects: identity (DOB/Gender),
         * address (city/state/pincode), bank (account/IFSC), docs (tile grid).
         * Also: collapse the 8-pill stepper to a single "Step X of Y" badge.
         * ───────────────────────────────────────────────────────────────────*/
        @media (max-width: 560px) {
            /* All inline-styled grid layouts inside the wizard modal +
             * customer profile pages collapse to 1 column on phones. */
            #signupWizardModal [style*="grid-template-columns: 1fr 1fr"],
            #signupWizardModal [style*="grid-template-columns:1fr 1fr"],
            #signupWizardModal [style*="grid-template-columns: 2fr 1fr"],
            #signupWizardModal [style*="grid-template-columns:2fr 1fr"],
            #signupWizardModal [style*="grid-template-columns: 2fr 1fr 1fr"],
            #signupWizardModal [style*="grid-template-columns:2fr 1fr 1fr"],
            #custProfileContent [style*="grid-template-columns: 1fr 1fr"],
            #custProfileContent [style*="grid-template-columns:1fr 1fr"],
            #custProfileContent [style*="grid-template-columns: 2fr 1fr 1fr"],
            #custProfileContent [style*="grid-template-columns:2fr 1fr 1fr"],
            #appDetailBody [style*="grid-template-columns: 1fr 1fr"],
            #appDetailBody [style*="grid-template-columns:1fr 1fr"],
            #applyModal [style*="grid-template-columns: 1fr 1fr"],
            #applyModal [style*="grid-template-columns:1fr 1fr"] {
                grid-template-columns: 1fr !important;
            }
            /* Docs step — 2-col tile grid on tablet/desktop, 1-col on phone */
            #signupWizardModal #wizDocsGrid {
                grid-template-columns: 1fr !important;
            }
            /* Stepper pills horizontally cramped — hide labels, only show
             * numbered dots so the customer's eye lands on the form, not the
             * stepper. The step heading inside wizContent makes the position
             * obvious without redundant text. */
            #wizStepper > div > div:last-child { display: none !important; }
            #wizStepper > div { min-width: 0 !important; flex: 0 0 28px !important; }
            #wizStepper > div > div:first-child { width: 24px !important; height: 24px !important; }
            #wizStepper { overflow-x: hidden !important; }
            /* Make sure wizard modal uses the full viewport height with
             * scrollable body — the wizContent gets tall on the docs step.
             * 100dvh (dynamic viewport height) accounts for iOS Safari's
             * collapsing address bar; falls back to 95vh on older browsers. */
            #signupWizardModal .modal,
            #wizModal .modal,
            #quickSignupModal .modal,
            #applyModal .modal,
            #appDetailModal .modal {
                max-height: 95vh;
                max-height: 95dvh;
                display: flex;
                flex-direction: column;
            }
            #signupWizardModal .modal-body,
            #wizModal .modal-body,
            #quickSignupModal .modal-body,
            #applyModal .modal-body,
            #appDetailModal .modal-body {
                overflow-y: auto;
                flex: 1;
                -webkit-overflow-scrolling: touch;  /* momentum scroll on iOS */
            }

            /* iPhone home indicator (notch + bottom bar): pad fixed/sticky
             * footers so the action buttons aren't under the home indicator. */
            #signupWizardModal .modal-footer,
            #quickSignupModal .modal-footer,
            #applyModal .modal-footer,
            #appDetailModal .modal-footer,
            #allocateAppModal .modal-footer,
            #goldSchemeModal .modal-footer,
            #addBankModal .modal-footer,
            #profileEditModal .modal-footer,
            #bookVisitModal .modal-footer {
                padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
            }
            /* Top safe-area for headers that touch the viewport edge (modal
             * top-sheet animations on iOS). */
            #signupWizardModal .modal-header,
            #quickSignupModal .modal-header {
                padding-top: max(18px, calc(18px + env(safe-area-inset-top, 0px))) !important;
            }
            /* On phones the wizContent might be the focused element when the
             * keyboard slides up — make sure focused inputs scroll into view. */
            input:focus, select:focus, textarea:focus {
                scroll-margin-top: 80px;
                scroll-margin-bottom: 80px;
            }
        }

/* ===== BLOCK 2: mid-body <style> (original lines 5102-5109) ===== */
      .allot-tab { background:transparent; border:none; padding:10px 14px; font-size:13px; cursor:pointer; color:var(--text-light); border-bottom:3px solid transparent; margin-bottom:-2px; font-weight:500; }
      .allot-tab:hover { color:#1a2035; }
      .allot-tab.active { color:#b8860b; border-bottom-color:#b8860b; font-weight:600; }
      .allot-tab-panel { padding-top:4px; }
      @media (max-width: 768px) {
          .allot-tabs-row { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
          .allot-tab { flex-shrink: 0; min-height: 44px; }
      }

/* ===== BLOCK 3: end-of-body <style> (original lines 21822-22038) ===== */
      @keyframes appPopupIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
      @media (max-width: 480px) {
        #appPopup > div { max-width: 100% !important; border-radius: 12px !important; }
      }

      /* ============================================================
       * Hero product tiles (NCD / Locker / Gold) — shared structure so
       * all three line up perfectly regardless of copy length.
       *
       * Cards now adopt the same cinematic studio aesthetic as the
       * product photographs: dark base with a soft radial spotlight
       * at the top where the photo sits, fading to deeper shadow at
       * the bottom corners. Photo's own dark background blends into
       * the card's matching corner color — no visible seam.
       *
       * Inline backgrounds on each tile set the per-product palette.
       * The shared .hero-tile rules just handle layout + structure.
       * ============================================================ */
      .hero-tile {
        position: relative;
        border-radius: 14px;
        padding: 22px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow: hidden;
        min-height: 420px;
        isolation: isolate;
      }
      /* Subtle bottom vignette + inner ring give the card a tactile,
       * "object" feel rather than flat-color web tile. Applied on top
       * of whatever background the tile's inline style sets. */
      .hero-tile::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.45) 100%);
        pointer-events: none;
        z-index: 0;
      }
      .hero-tile > * { position: relative; z-index: 1; }
      .hero-tile-glow { display: none; /* No longer needed — replaced by radial-gradient spotlight on the tile bg */ }
      .hero-tile-badge {
        display: inline-flex;
        align-self: flex-start;
        align-items: center;
        gap: 6px;
        padding: 5px 11px;
        border: 1px solid transparent;
        border-radius: 99px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        backdrop-filter: blur(4px);
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .hero-tile-icon { font-size: 34px; line-height: 1; margin-top: 4px; }
      /* Onboard-Customer product picker (tenant modal) — same look as the
       * staff Capture-Lead picker. Active state uses brand gold. */
      .onboard-prod-btn {
        padding: 12px 8px;
        border: 1px solid #cbd5e1;
        background: #fff;
        color: #475569;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        font-family: inherit;
        transition: transform 0.1s, background 0.15s, border-color 0.15s;
      }
      .onboard-prod-btn:hover { border-color: #94a3b8; }
      .onboard-prod-btn-active {
        border: 2px solid #b8860b !important;
        background: #b8860b !important;
        color: #fff !important;
      }
      /* Photographic product image — sized large enough to be the
       * dominant visual element. The card's top radial spotlight color
       * is calibrated to match the image's own background tone so the
       * mask fade dissolves into the card seamlessly. */
      .hero-tile-img {
        width: 170px;
        height: 170px;
        align-self: center;
        margin: -10px 0 -8px;
        object-fit: contain;
        -webkit-mask-image: radial-gradient(ellipse at center, #000 38%, transparent 82%);
                mask-image: radial-gradient(ellipse at center, #000 38%, transparent 82%);
        filter: drop-shadow(0 10px 26px rgba(0,0,0,0.45));
        pointer-events: none;
      }
      @media (max-width: 480px) {
        .hero-tile-img { width: 140px; height: 140px; }
      }
      /* Prospect / public product tiles — larger photographic image as
       * the visual anchor. Stronger mask fade so the image's matching
       * background bleeds into the tile gradient seamlessly. */
      .prospect-tile-img {
        width: 160px;
        height: 160px;
        margin: 8px auto 14px;
        display: block;
        object-fit: contain;
        -webkit-mask-image: radial-gradient(ellipse at center, #000 42%, transparent 78%);
                mask-image: radial-gradient(ellipse at center, #000 42%, transparent 78%);
        filter: drop-shadow(0 8px 22px rgba(0,0,0,0.32));
        position: relative;
        z-index: 1;
      }
      @media (max-width: 480px) {
        .prospect-tile-img { width: 130px; height: 130px; }
      }
      .hero-tile-title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; min-width: 0; overflow-wrap: break-word; }
      .hero-tile-headline {
        display: flex;
        align-items: baseline;
        gap: 6px;
        margin: 0 0 4px;
        min-height: 38px;
      }
      .hero-tile-headline .hl-big {
        font-size: 30px;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1;
      }
      .hero-tile-headline .hl-small {
        font-size: 13px;
        font-weight: 600;
        opacity: 0.85;
      }
      .hero-tile-desc {
        margin: 0;
        font-size: 13px;
        line-height: 1.5;
        color: rgba(255,255,255,0.92);
        flex: 1;
      }
      .hero-tile-ctas {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 12px;
      }
      .hero-cta {
        padding: 10px 14px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
        text-align: center;
        font-family: inherit;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .hero-cta:hover { transform: translateY(-1px); }
      .hero-cta-secondary {
        background: rgba(255,255,255,0.15);
        color: #fff;
        border: 1px solid rgba(255,255,255,0.5);
      }
      .hero-cta-primary {
        border: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      }
      @media (max-width: 480px) {
        .hero-tile { min-height: 320px; padding: 18px; }
        .hero-tile-headline .hl-big { font-size: 26px; }
      }

      /* ============================================================
       * Product hub — 2×2 grid of COMPACT horizontal product cards
       * (2026-06-11). The full-bleed photo cards stay, but in a smaller
       * horizontal-rectangle form so all four products (NCD / Locker /
       * Gold / Loans) fit a 2×2 grid above the fold.
       * ============================================================ */
      .product-hub-grid {
        display: grid;
        /* minmax(0,1fr) — NOT 1fr — so the tracks can shrink below their
         * content's min-content width. Without the 0 minimum, the nowrap
         * card titles force each track wider than half the viewport and the
         * grid blows out horizontally on mobile. overflow:hidden + the
         * _autoFitText() shrink then keep the text on one line inside. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 14px;
        max-width: 760px;
        margin: 0 auto;
      }
      /* Compact modifier — overrides the tall hero-tile defaults.
       * space-between puts the icon/badge top row at the top and the
       * title + tag + CTAs group at the bottom. No product photo — a
       * tinted gradient + an SVG product icon carry the visual identity. */
      .hero-tile.hero-tile-compact {
        min-height: 168px;
        padding: 16px 18px;
        gap: 4px;
        border-radius: 16px;
        justify-content: space-between;
      }
      .hero-tile.hero-tile-compact .hero-tile-title { font-size: 17px; }
      /* Top row — SVG product icon (left) + optional badge (right). */
      .hero-tile-toprow {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }
      .hero-tile-icon-wrap { display: inline-flex; opacity: 0.92; }
      .hero-tile-compact-tag {
        font-size: 13px;
        font-weight: 600;
        margin: 2px 0 12px;
        white-space: nowrap;
        overflow: hidden;
        min-width: 0;
      }
      .hero-tile.hero-tile-compact .hero-tile-ctas { margin-top: 2px; gap: 8px; }
      .hero-tile.hero-tile-compact .hero-cta { padding: 7px 12px; font-size: 12px; }
      /* "Coming soon" card — muted, non-interactive. */
      .hero-tile.hero-tile-soon { cursor: default; }
      .hero-tile-soon-pill {
        display: inline-flex;
        align-items: center;
        background: rgba(255,255,255,0.14);
        border: 1px solid rgba(255,255,255,0.45);
        color: #fff;
        padding: 4px 11px;
        border-radius: 99px;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        white-space: nowrap;
      }
      /* "Live" badge — red, pulsing glow. Used on the NCD card. */
      .hero-tile-live-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(255,59,48,0.16);
        border: 1px solid rgba(255,99,90,0.75);
        color: #ffe1de;
        padding: 4px 10px;
        border-radius: 99px;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        white-space: nowrap;
        animation: heroLivePulse 1.5s ease-in-out infinite;
      }
      .hero-tile-live-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #ff3b30;
        box-shadow: 0 0 6px #ff3b30;
        animation: heroLiveDot 1.5s ease-in-out infinite;
      }
      @keyframes heroLivePulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(255,59,48,0), 0 0 8px rgba(255,59,48,0.35); }
        50%      { box-shadow: 0 0 0 4px rgba(255,59,48,0.12), 0 0 22px rgba(255,59,48,0.85); }
      }
      @keyframes heroLiveDot {
        0%, 100% { opacity: 1; box-shadow: 0 0 6px #ff3b30; }
        50%      { opacity: 0.55; box-shadow: 0 0 13px #ff3b30; }
      }
      /* Phones (≤520px): keep the 2×2 grid (cards ~140px). Titles + tags
       * shrink to fit one line via _autoFitText() (smaller floor on mobile);
       * the two CTAs stack vertically (full-width) since they can't sit
       * side-by-side at that width. Tighter padding + badge sizing keep it
       * neat. The grid stays 2-up — it does NOT collapse to one column. */
      @media (max-width: 520px) {
        .hero-tile.hero-tile-compact { padding: 13px 13px; min-height: 152px; }
        .hero-tile.hero-tile-compact .hero-tile-title { font-size: 14px; }
        .hero-tile-compact-tag { font-size: 11px; }
        .hero-tile.hero-tile-compact .hero-tile-ctas { grid-template-columns: 1fr; gap: 6px; }
        .hero-tile.hero-tile-compact .hero-cta { width: 100%; padding: 6px 8px; font-size: 11px; }
        .hero-tile-live-badge, .hero-tile-soon-pill { font-size: 9px; padding: 3px 8px; }
        .product-hub-grid { gap: 10px; }
      }

      /* ============================================================
       * Mobile sweep — surfaces added in self-onboarding / Digitap /
       * Customer File sessions. Keeps tables horizontally-scrollable
       * instead of overflowing the viewport, stacks verification chips
       * on phones, and shrinks all new modals to full-width on phones.
       * ============================================================ */
      @media (max-width: 640px) {
        /* Customer File modal — full width, edge-to-edge padding */
        #customerFileModal { padding: 8px !important; align-items: stretch !important; }
        #customerFileModal > div { max-width: 100% !important; border-radius: 10px !important; }
        #customerFileModal h2 { font-size: 18px !important; }
        #customerFileModal h3 { font-size: 13px !important; }
        #customerFileModal table { font-size: 11px !important; }
        #customerFileModal td, #customerFileModal th { padding: 6px 5px !important; }
        #customerFileModal .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

        /* Digitap quick-action modals + vendor details modal */
        [id^="digitapModal_"] > div,
        #vendorDetailsModal > div { max-width: 100% !important; max-height: 92vh; overflow-y: auto; border-radius: 12px !important; }
        [id^="digitapModal_"] input,
        [id^="digitapModal_"] select,
        [id^="digitapModal_"] textarea { font-size: 16px !important; }

        /* Verification strip on customer dashboard — stack chips */
        #verifChips, .verif-chips { flex-direction: column !important; align-items: stretch !important; }
        #verifChips > *, .verif-chips > * { width: 100%; }

        /* Onboarding Ops Digitap tab — quick-action button row wraps */
        .digitap-quick-actions { flex-wrap: wrap !important; gap: 6px !important; }
        .digitap-quick-actions button { flex: 1 1 calc(50% - 4px); min-width: 0; font-size: 12px !important; padding: 8px 10px !important; }

        /* Any new wide tables — force horizontal scroll instead of breaking layout */
        .ops-table-wrap, .digitap-sessions-wrap, .bank-accounts-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
        .ops-table-wrap table, .digitap-sessions-wrap table, .bank-accounts-wrap table { min-width: 720px; }
      }
      @media (max-width: 480px) {
        /* Customer File hero block — tighter padding on small phones */
        #customerFileModal h2 { font-size: 16px !important; }
        #customerFileModal section { margin-bottom: 16px !important; }
        #customerFileModal section > div:first-child { padding: 14px !important; }
        /* Digitap modals — buttons full-width */
        [id^="digitapModal_"] .btn { width: 100%; }
        [id^="digitapModal_"] [id$="_submit"] { order: 2; }
      }

      /* =================================================================
         TILE CONTENT: single-line + auto-fit-to-width (2026-06-11)
         Every label / value / sublabel inside a tile (stat card, payment
         card, hero tile, portfolio snapshot, branch stat) stays on one
         line. The JS helper _autoFitText() in index.html measures each
         element and shrinks font-size until scrollWidth fits clientWidth,
         so long ₹ amounts / IDs / customer names just get smaller — they
         don't wrap, they don't truncate with "...".

         Apply .auto-fit-text to any new element that should follow the
         same rule.
         ================================================================= */
      .stat-card-subtext,
      .payment-card .pc-amount,
      .payment-card .pc-row,
      .hero-tile-title,
      .hero-tile-desc,
      .ps-value,
      .ps-label,
      .ps-delta,
      .branch-stat-value,
      .branch-stat-label,
      .auto-fit-text {
        white-space: nowrap;
        overflow: hidden;
        min-width: 0;
      }
      /* Ensure flex/grid parents allow the child to shrink so JS sees the
         real clientWidth, not auto-expanded width. */
      .stat-card, .payment-card, .hero-tile, .portfolio-snapshot > div,
      .branch-stat {
        min-width: 0;
      }

/* ── Number-input spinners hidden app-wide (Prem, 2026-07-14) ──────────────
   Amount/₹ fields are typed, never stepped — the up/down arrows are noise on
   desktop and mis-tap targets in the WebViews. Applies to every current and
   future <input type="number"> (staff + customer). Keyboard arrows and
   scroll-to-step still work; only the visible spinner chrome is removed. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
