/* Fix 326b: wrapped in @layer components so compiled Tailwind utilities win conflicts
 * (matches the behaviour of the v3 play-CDN, which injected last). */
@layer components {
/* Tawi ERP - Branch PWA stylesheet (Fix 304: contents extracted verbatim from
   mobile app/TawiERP Branch PWA.html). Order preserved: design tokens/components,
   then restored wrapper CSS + dark-mode audit. */

            /* ==================== CSS CUSTOM PROPERTIES (Design Tokens) ==================== */
            :root {
                /* Primary palette */
                --primary: #10b981;
                --primary-hover: #059669;
                --primary-light: #ecfdf5;
                --primary-dark: #047857;
                
                /* Semantic colors */
                --success: #10b981;
                --success-bg: #d1fae5;
                --success-text: #065f46;
                --warning: #f59e0b;
                --warning-bg: #fef3c7;
                --warning-text: #92400e;
                --danger: #dc2626;
                --danger-hover: #b91c1c;
                --danger-bg: #fee2e2;
                --danger-text: #991b1b;
                --info: #3b82f6;
                --info-bg: #dbeafe;
                --info-text: #1d4ed8;
                
                /* Neutral / surface colors (light theme) */
                --surface: #ffffff;
                --surface-secondary: #f9fafb;
                --surface-tertiary: #f3f4f6;
                --surface-hover: #f0fdf4;
                --border: #e5e7eb;
                --border-light: #e2e8f0;
                --border-dark: #cbd5e1;
                
                /* Text colors (light theme) */
                --text-primary: #0f172a;
                --text-secondary: #475569;
                --text-tertiary: #6b7280;
                --text-muted: #9ca3af;
                --text-inverse: #ffffff;
                
                /* Background colors (light theme) */
                --bg-body: #e2e7ee;
                --bg-sidebar: #ffffff;
                --bg-card: #ffffff;
                --bg-modal-overlay: rgba(0,0,0,0.5);
                --bg-input: #ffffff;
                
                /* Shadows */
                --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
                --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
                --shadow-card: 0 8px 24px rgba(15,23,42,0.05);
                --shadow-card-hover: 0 14px 30px rgba(15,23,42,0.10);
                --shadow-topbar: 0 12px 32px rgba(15,23,42,0.08);
                --shadow-sidebar: 2px 0 8px rgba(0,0,0,0.05);
                
                /* Border radius */
                --radius-sm: 8px;
                --radius-md: 12px;
                --radius-lg: 12px;
                --radius-xl: 20px;
                --radius-full: 999px;
                
                /* Spacing */
                --sidebar-width: 280px;
                --sidebar-collapsed-width: 88px;
                
                /* Logo sizing */
                --logo-height: 40px;
                --logo-height-lg: 64px;
                --logo-width: auto;
                --logo-object-fit: contain;
                --sidebar-logo-gap: 8px;
                
                /* Transitions */
                --transition-fast: 0.2s;
                --transition-normal: 0.3s;
                
                /* Gradient presets for stat icons */
                --gradient-teal: linear-gradient(135deg, #0F766E, #10B981);
                --gradient-blue: linear-gradient(135deg, #2563EB, #60A5FA);
                --gradient-purple: linear-gradient(135deg, #7C3AED, #A78BFA);
                --gradient-orange: linear-gradient(135deg, #EA580C, #FB923C);
                --gradient-amber: linear-gradient(135deg, #D97706, #FBBF24);
                --gradient-red: linear-gradient(135deg, #DC2626, #F87171);
                --gradient-emerald: linear-gradient(135deg, #059669, #34D399);
            }

            /* Dark theme overrides */
            /* Dark theme overrides */
            body.dark-mode {
                --surface: #1e1e1e;
                --surface-secondary: #262626;
                --surface-tertiary: #333333;
                --surface-hover: #1a1a1a;
                --border: #333333;
                --border-light: #2c2c2c;
                --border-dark: #404040;
                --text-primary: #f5f5f5;
                --text-secondary: #d4d4d4;
                --text-tertiary: #a3a3a3;
                --text-muted: #737373;
                --text-inverse: #ffffff;
                --bg-body: #141414;
                --bg-sidebar: #141414;
                --bg-card: #1e1e1e;
                --bg-modal-overlay: rgba(0,0,0,0.7);
                --bg-input: #262626;
                --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
                --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
                --shadow-card: 0 1px 3px rgba(0,0,0,0.4);
                --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.5);
                --shadow-topbar: 0 10px 30px rgba(0,0,0,0.4);
                --shadow-sidebar: 2px 0 8px rgba(0,0,0,0.4);
                --success-bg: rgba(16, 185, 129, 0.15);
                --success-text: #34d399;
                --warning-bg: rgba(245, 158, 11, 0.15);
                --warning-text: #fbbf24;
                --danger-bg: rgba(220, 38, 38, 0.15);
                --danger-text: #f87171;
                --info-bg: rgba(37, 99, 235, 0.15);
                --info-text: #93c5fd;
            }


        /* Fix 290 P3: file-local action-button components (self-contained, token-driven) */
        .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; font-weight: 600; font-size: 14px; line-height: 1.5; border-radius: var(--radius-md, 12px); padding: 10px 28px; min-height: 36px; text-decoration: none; transition: background var(--transition-fast, 0.2s), opacity var(--transition-fast, 0.2s); }
        .btn:disabled { opacity: 0.6; cursor: not-allowed; }
        .btn-primary { background: var(--primary, #10b981); color: #ffffff; }
        .btn-primary:hover { background: var(--primary-hover, #059669); }
        .btn-danger { background: var(--danger, #dc2626); color: #ffffff; }
        .btn-danger:hover { background: var(--danger-hover, #b91c1c); }
        .btn-success { background: #16a34a; color: #ffffff; }
        .btn-success:hover { background: #15803d; }
        .btn-info { background: #2563eb; color: #ffffff; }
        .btn-info:hover { background: #1d4ed8; }
        .btn-sm { padding: 6px 16px; font-size: 13px; }

        /* ============================================
           Tawi ERP Branch PWA — Inlined Critical UI
           Cards, stat-cards, sidebar links, badges
           No external CSS dependency needed for these.
           ============================================ */
        .card, .stat-card {
          background: var(--surface, #fff);
          border-radius: var(--radius-md, 12px);
          box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.1));
          padding: var(--space-4, 24px);
          margin-bottom: var(--space-4, 24px);
          border: 1px solid var(--border, #e5e7eb);
          word-wrap: break-word;
          overflow-wrap: break-word;
          transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
        }
        .card:hover, .stat-card:hover {
          border-color: #10b981;
          box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.1));
          transform: translateY(-2px);
        }
        .sidebar a {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 12px 24px;
          text-decoration: none;
          border-radius: var(--radius-sm, 8px);
          transition: background 0.2s, color 0.2s;
        }
        .badge {
          display: inline-flex;
          align-items: center;
          padding: 4px 10px;
          border-radius: 999px;
          font-size: 12px;
          font-weight: 600;
        }
        .badge-success { background: #d1fae5; color: #065f46; }
        .badge-warning { background: #fef3c7; color: #92400e; }
        .badge-danger { background: #fee2e2; color: #991b1b; }
        .badge-info { background: #dbeafe; color: #1d4ed8; }
        /* Dark mode overrides for badges */
        body.dark-mode .badge-success { background: #064e3b; color: #bbf7d0; }
        body.dark-mode .badge-warning { background: #78350f; color: #fde68a; }
        body.dark-mode .badge-danger { background: #7f1d1d; color: #fecaca; }
        body.dark-mode .badge-info { background: #1e3a5f; color: #93c5fd; }
        body.dark-mode .card,
        body.dark-mode .stat-card { border-color: var(--border, #333333); }

        body { background: var(--bg-body); }
        .page { display: none; animation: fadeIn 0.2s ease; }
        .active-page { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
        .sidebar { position: fixed; top: 0; left: -280px; width: var(--sidebar-width); height: 100%; background: var(--bg-sidebar); box-shadow: var(--shadow-sidebar); transition: left 0.3s ease; z-index: 50; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Fix 327: scrollable sidebar (Logout was unreachable on 320-360px screens) */
        .sidebar.open { left: 0; }
        .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-modal-overlay); z-index: 40; display: none; }
        .overlay.active { display: block; }
        .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--surface); padding: 1.5rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); z-index: 60; width: 90%; max-width: 350px; display: none; max-height: 80vh; overflow-y: auto; }
        .modal.active { display: block; }
        /* Fix 426: idle-warning modal. .modal supplies the panel; the dim backdrop is the
           panel own ::before so the dialog never depends on #overlay (whose
           onclick="closeAllModals()" would silently dismiss it). No extra dark rule is
           needed - the body.dark-mode .modal group rule above themes the panel. */
        #idleWarnModal { text-align: left; }
        #idleWarnModal::before { content: ''; position: fixed; inset: 0; background: var(--bg-modal-overlay); z-index: -1; }
        .notification-badge { position: absolute; top: -5px; right: -5px; background: var(--danger); color: var(--text-inverse); border-radius: 50%; padding: 2px 5px; font-size: 10px; }
        .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
        .product-card { background: var(--surface); border-radius: 14px; padding: 12px; box-shadow: var(--shadow-card); border: 1px solid var(--info-bg); cursor: pointer; transition: all var(--transition-fast); }
        .product-card:hover, .product-card:active { transform: translateY(-2px) scale(0.99); border-color: var(--success); }
        .product-name { font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; }
        .product-price { color: var(--success-text); font-weight: bold; font-size: 1rem; }
        .cart-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid var(--border); }
        .cart-item-controls { display: flex; gap: 8px; align-items: center; }
        .quantity-btn { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--surface-tertiary); border: none; font-size: 1.2rem; cursor: pointer; }
        .remove-btn { color: var(--danger); background: none; border: none; font-size: 1.2rem; cursor: pointer; }
        .shell-hidden { display: none; }
        .app-shell { background: var(--surface-secondary); border: 1px solid var(--border); }
        .emerald-header { background: var(--text-primary); color: var(--surface-secondary); box-shadow: var(--shadow-topbar); border-bottom: 1px solid var(--border); }
        .install-btn { border: 1px solid var(--info-bg); color: var(--info-text); background: var(--primary-light); }
        .sync-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-full); background: var(--primary-light); color: var(--info-text); font-size: 12px; }
        .dashboard-hero { background: var(--surface); color: var(--text-primary); border-radius: 18px; padding: 16px; border: 1px solid var(--border); box-shadow: var(--shadow-card); }

        .dashboard-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-card); }
        .dashboard-chart-wrap { position: relative; height: 220px; }
        .dashboard-table { width: 100%; border-collapse: collapse; }
        .dashboard-table th, .dashboard-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border-light); font-size: 12px; }
        .dashboard-table th { background: var(--surface-secondary); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
        .dashboard-table tr:hover { background: var(--surface-secondary); }
        .dashboard-badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: 700; }
        .dashboard-badge-success { background: var(--success-bg); color: var(--success-text); }
        .dashboard-badge-info { background: var(--info-bg); color: var(--info-text); }
        .dashboard-badge-warning { background: var(--warning-bg); color: var(--warning-text); }
        .dashboard-badge-danger { background: var(--danger-bg); color: var(--danger-text); }

        .action-banner { border-radius: 14px; padding: 12px; border: 1px solid transparent; }
        .action-banner.info { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
        .action-banner.warning { background: #fff7ed; border-color: #fdba74; color: #9a3412; }
        .action-banner.success { background: #ecfdf5; border-color: #86efac; color: #065f46; }

        /* Fix 442: install banner. #installBanner.hidden exists because an id selector
           out-ranks the Tailwind .hidden utility - without it the banner could never hide. */
        #installBanner { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 12px; }
        #installBanner.hidden { display: none; }
        #installBanner button { background: transparent; border: none; font-weight: 600; cursor: pointer; color: inherit; }
        .thermal-receipt { font-family: "Courier New", monospace; color: var(--text-primary); background: var(--surface); width: 100%; max-width: 58mm; margin: 0 auto; }
        /* Bar-specific styles */
        .table-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
        .table-card { border-radius: 12px; padding: 12px; text-align: center; cursor: pointer; transition: all var(--transition-fast); border: 2px solid transparent; }
        .table-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
        .table-card.available { background: var(--success-bg); border-color: #86efac; color: var(--success-text); }
        .table-card.occupied { background: var(--danger-bg); border-color: #fca5a5; color: var(--danger-text); }
        .table-card.reserved { background: var(--warning-bg); border-color: #fcd34d; color: var(--warning-text); }
        .table-card.closed { background: var(--surface-tertiary); border-color: var(--border-dark); color: var(--text-tertiary); }
        .stock-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; background: var(--surface-secondary); border-radius: var(--radius-sm); margin-bottom: 8px; }
        .stock-item input { width: 80px; min-height: 44px; padding: 4px 8px; border: 1px solid var(--border-dark); border-radius: 6px; text-align: center; background: var(--bg-input); color: var(--text-primary); }
        /* Fix 717: the product-picker rows are the other control a counter taps on every item.
           They were sized by Tailwind padding alone (~37px) and are plain divs, so the global
           48px button clamp never reached them. Same 44px floor as the count field. */
        .stocktake-product-option { display: flex; align-items: center; min-height: 44px; }
        .variance-positive { color: var(--success); font-weight: 600; }
        .variance-negative { color: var(--danger); font-weight: 600; }
        .variance-zero { color: var(--text-tertiary); }
        .bar-hidden { display: none !important; }
        .tab-header { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: var(--surface-secondary); border-radius: 10px; margin-bottom: 8px; cursor: pointer; }
        .tab-header:hover { background: var(--surface-tertiary); }
        .tab-header .tab-total { font-weight: 700; color: var(--success); }
        .tab-header .tab-status { font-size: 11px; padding: 2px 8px; border-radius: var(--radius-full); }
        .tab-header .tab-status.open { background: var(--success-bg); color: var(--success-text); }
        .tab-header .tab-status.settled { background: var(--info-bg); color: var(--info-text); }
        .tab-header .tab-status.cancelled { background: var(--danger-bg); color: var(--danger-text); }
        .shift-close-card { background: var(--surface); border-radius: 12px; padding: 16px; box-shadow: var(--shadow-sm); margin-bottom: 12px; }
        .shift-close-card .field { margin-bottom: 12px; }
        .shift-close-card label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
        .shift-close-card input { width: 100%; padding: 8px 12px; border: 1px solid var(--border-dark); border-radius: 8px; font-size: 16px; background: var(--bg-input); color: var(--text-primary); }
        .bar-section-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--success); }
        .bar-tab-detail-item { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--surface-tertiary); }
        .bar-tab-detail-item .item-name { flex: 1; }
        .bar-tab-detail-item .item-qty { width: 30px; text-align: center; color: var(--text-tertiary); }
        .bar-tab-detail-item .item-price { width: 80px; text-align: right; font-weight: 500; }
        .bar-tab-detail-item .item-remove { color: var(--danger); cursor: pointer; padding: 0 4px; }
        .bar-tab-detail-item .item-remove:hover { color: var(--danger-hover); }
        .bar-product-btn { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 8px; text-align: center; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; align-items: center; gap: 4px; }
        .bar-product-btn:hover { border-color: var(--success); box-shadow: 0 4px 12px rgba(5,150,105,0.15); transform: translateY(-2px); }
        .bar-product-btn:active { transform: translateY(0); }
        .bar-product-btn .product-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--gradient-teal); display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; margin-bottom: 4px; }
        .bar-product-btn .name { font-size: 12px; font-weight: 600; color: var(--text-primary); line-height: 1.2; }
        .bar-product-btn .price { font-size: 14px; color: var(--success); font-weight: 700; }
        .bar-product-btn .stock-badge { font-size: 10px; color: var(--text-tertiary); background: var(--surface-tertiary); padding: 2px 8px; border-radius: 999px; }
        .bar-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
        .bar-product-grid .no-products { grid-column: 1 / -1; text-align: center; color: var(--text-tertiary); padding: 32px 0; }
        body.dark-mode .table-card.available { background: rgba(21,128,61,0.3); border-color: #4ade80; color: #bbf7d0; }
        body.dark-mode .table-card.occupied { background: rgba(153,27,27,0.3); border-color: #f87171; color: #fecaca; }
        body.dark-mode .table-card.reserved { background: rgba(146,64,14,0.3); border-color: #fbbf24; color: #fde68a; }
        body.dark-mode .table-card.closed { background: rgba(75,85,99,0.3); border-color: #a3a3a3; color: #d1d5db; }
        body.dark-mode .stock-item { background: var(--surface-tertiary); }
        body.dark-mode .stock-item input { background: var(--bg-input); color: var(--text-primary); border-color: var(--border); }
        body.dark-mode .tab-header { background: var(--surface-tertiary); }
        body.dark-mode .tab-header:hover { background: #333333; }
        body.dark-mode .shift-close-card { background: var(--surface-tertiary); }
        body.dark-mode .shift-close-card label { color: var(--text-secondary); }
        body.dark-mode .shift-close-card input { background: var(--bg-input); color: var(--text-primary); border-color: var(--border); }
        body.dark-mode .bar-section-title { color: var(--text-primary); border-bottom-color: var(--success); }
        body.dark-mode .bar-product-btn { background: var(--surface-tertiary); border-color: var(--border); }
        body.dark-mode .bar-product-btn:hover { border-color: var(--success); }
        body.dark-mode .bar-tab-detail-item { border-bottom-color: #333333; }
        body.dark-mode .bar-tab-detail-item .item-qty { color: #a3a3a3; }
        .thermal-receipt .center { text-align: center; }
        .thermal-receipt .line { border-top: 1px dashed var(--text-primary); margin: 6px 0; }
        .thermal-receipt .row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
        .thermal-receipt .meta { font-size: 11px; line-height: 1.45; }
        /* Fix 636: .vat-row was emitted by the receipt template but never defined, so VAT and excise
           printed as two stacked spans. It now shares the flex row so label and amount sit on a line. */
        .thermal-receipt .vat-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
        .thermal-receipt .item-row { display: flex; flex-direction: column; gap: 1px; font-size: 11px; margin-bottom: 6px; }
        .thermal-receipt .item-name { display: flex; justify-content: space-between; gap: 8px; }
        .thermal-receipt .item-qty { white-space: nowrap; }
        .thermal-receipt .total { font-size: 15px; font-weight: 700; margin-top: 6px; padding-top: 4px; }
        /* Fix 655: the padded item rows are rendered as <pre> so the mono grid survives print. */
        .thermal-receipt .receipt-item-line { margin: 0; padding: 0; font-family: "Courier New", monospace; font-size: 11px; line-height: 1.45; white-space: pre; }
        @page { size: 58mm auto; margin: 0; }
        @media print { body * { visibility: hidden; } #receipt-print-area, #receipt-print-area * { visibility: visible; } #receipt-print-area { position: absolute; left: 0; top: 0; width: 58mm; max-width: 58mm; font-family: "Courier New", monospace; font-size: 11px; padding: 3mm; color: #000; background: #fff; } }
        
        body.dark-mode { background: var(--bg-body) !important; color: var(--text-primary); }
        body.dark-mode .app-shell { background: var(--bg-body); border-color: var(--border); box-shadow: 0 16px 32px rgba(15, 15, 15, 0.45); }
        body.dark-mode .emerald-header { background: var(--bg-body); border-bottom: 1px solid var(--border); color: var(--text-primary); }
        body.dark-mode .sidebar,
        body.dark-mode .modal,
        body.dark-mode .dashboard-panel,
        body.dark-mode .dashboard-hero,
        body.dark-mode .product-card,
        body.dark-mode .bg-white { background: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border) !important; }
        body.dark-mode .bg-white\/60 { background: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border) !important; }
        body.dark-mode .bg-white\/80 { background: rgba(15, 15, 15, 0.72) !important; }
        body.dark-mode .overlay { background: var(--bg-modal-overlay); }
        body.dark-mode .border,
        body.dark-mode .border-b,
        body.dark-mode .border-t,
        body.dark-mode .border-gray-200,
        body.dark-mode .border-slate-200 { border-color: var(--border) !important; }
        body.dark-mode .text-gray-400,
        body.dark-mode .text-gray-500,
        body.dark-mode .text-gray-600,
        body.dark-mode .text-slate-500,
        body.dark-mode .text-slate-600 { color: var(--text-secondary) !important; }
        body.dark-mode .text-slate-900,
        body.dark-mode .text-slate-800,
        body.dark-mode .text-gray-700,
        body.dark-mode .text-gray-800,
        body.dark-mode input,
        body.dark-mode select,
        body.dark-mode textarea { background: var(--bg-input); color: var(--text-primary) !important; border-color: var(--border); } // Fix 326d: !important so the dark text override beats its utility
        body.dark-mode input::placeholder,
        body.dark-mode textarea::placeholder { color: var(--text-muted); }
        body.dark-mode .sync-pill { background: var(--info-bg); color: var(--info-text); }
        body.dark-mode .install-btn { background: var(--info-bg); border-color: #93c5fd; color: var(--info-text); }
        body.dark-mode .quantity-btn { background: var(--surface-tertiary); color: var(--text-primary); }
        body.dark-mode .remove-btn { color: #fca5a5; }
        body.dark-mode .dashboard-table th { background: var(--bg-input); color: var(--text-secondary); border-color: var(--border); }
        body.dark-mode .dashboard-table td { border-color: var(--border); color: var(--text-primary); }
        body.dark-mode #todayTransactions,
        body.dark-mode #lowStockCount,
        body.dark-mode #branchRevenue,
        body.dark-mode #branchInventoryValue,
        body.dark-mode #branchSalesToday,
        body.dark-mode #branchApprovedBanking,
        body.dark-mode #branchPendingBanking,
        body.dark-mode #branchOutstandingDifference {
            color: var(--text-primary) !important;
        }
        body.dark-mode .dashboard-badge-info { background: var(--info-bg); color: var(--info-text); }
        body.dark-mode .dashboard-badge-success { background: #166534; color: #bbf7d0; }
        body.dark-mode .dashboard-badge-warning { background: #92400e; color: #fde68a; }
        body.dark-mode .dashboard-badge-danger { background: #991b1b; color: #fecaca; }

        /* ===== Restored wrapper CSS (inline to avoid Express serving issues) ===== */
        @media (min-width: 768px) {
            .product-grid { grid-template-columns: repeat(3, 1fr); }
        }
        @media (min-width: 1024px) {
            .product-grid { grid-template-columns: repeat(4, 1fr); }
        }
        body.dark-mode .dashboard-table tr:hover { background: #1e1e1e; }
        
        
        body.dark-mode .bg-yellow-50,
        body.dark-mode .bg-emerald-100,
        body.dark-mode .bg-gray-50,
        body.dark-mode .bg-gray-100,
        body.dark-mode .bg-blue-50 {
            background: #1e1e1e !important;
            color: #f5f5f5 !important;
            border-color: #333333 !important;
        }
        body.dark-mode #receiptContent,
        body.dark-mode #reconMessage,
        body.dark-mode #dsaMessage,
        body.dark-mode #passwordMessage {
            color: #f5f5f5 !important;
            background: #141414 !important;
            border-color: #333333 !important;
        }
        body.dark-mode .action-banner.info { background: var(--info-bg); border-color: #93c5fd; color: var(--info-text); }
        body.dark-mode .action-banner.warning { background: #78350f; border-color: #fbbf24; color: #fde68a; }
        body.dark-mode .action-banner.success { background: #064e3b; border-color: #4ade80; color: #bbf7d0; }

        /* Dark mode logo swap */
        .logo-light { display: inline-block !important; }
        .logo-dark { display: none !important; }
        body.dark-mode .logo-light { display: none !important; }
        body.dark-mode .logo-dark { display: inline-block !important; }
    
        .payment-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px; border-radius: 12px; font-size: 16px; font-weight: 700; border: none; cursor: pointer; transition: transform 0.15s; min-height: 52px; }
        .payment-btn:active { transform: scale(0.97); }
        .payment-btn.cash { background: #059669; color: #fff; }
        .payment-btn.mpesa { background: #2563eb; color: #fff; }
        .payment-btn.bank { background: #6b7280; color: #fff; }
        .payment-btn.cancel-btn { background: transparent; color: #ef4444; border: 1px solid #fca5a5; font-weight: 600; }
        body.dark-mode .payment-btn.cancel-btn { border-color: #7f1d1d; color: #fca5a5; }
        #paymentModal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 24px; border-radius: 16px; box-shadow: 0 12px 32px rgba(0,0,0,0.25); z-index: 65; display: none; width: 90%; max-width: 360px; }
        #paymentModal.active { display: block; }
        body.dark-mode #paymentModal { background: #141414; color: #f5f5f5; border: 1px solid #333333; }

        * { -webkit-tap-highlight-color: transparent; }
        button, a, select, input[type="submit"] {
            min-height: 48px; min-width: 48px;
            touch-action: manipulation;
        }
        
        
        
        
        .spinner { display: inline-block; width: 20px; height: 20px; border: 2.5px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: middle; }
        .spinner.dark { border-color: rgba(0,0,0,0.1); border-top-color: #059669; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .spinner-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; }
        .spinner-overlay .spinner { width: 40px; height: 40px; border-width: 4px; }

/*===DARKMODE-PILLS-FIX===*/
body.dark-mode .bg-gray-200,body.dark-mode .bg-gray-300{background: #1e1e1e!important;color:#f5f5f5!important;border-color:#333333!important}body.dark-mode .bg-emerald-50{background: #1e1e1e!important;color:#f5f5f5!important;border-color:#333333!important}body.dark-mode .bg-red-100,body.dark-mode .bg-yellow-100{background: #1e1e1e!important;color:#f5f5f5!important;border-color:#333333!important}body.dark-mode .text-emerald-800{color:#bbf7d0!important}body.dark-mode .border-emerald-200{border-color:#333333!important}

/* ===== Fix 310: sidebar active-page indicator (there was no active nav state) ===== */
/* Fix 634: the active item is a SOLID primary block. The emerald-50 wash on the white rail read
   as a stray white block - one state, one unmistakable treatment (ADR 002 rule 8). */
.sidebar nav a.is-active {
    background: var(--primary, #10b981) !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--primary, #10b981);
}
body.dark-mode .sidebar nav a.is-active {
    background: var(--primary, #10b981) !important;
    color: #ffffff !important;
}

/* Fix 692: the toast contract. A toast is READ-ONLY: it never takes a tap, and it paints
   above every dialog. TawiModal sits at z-index 20000 (branch-app/libs/modal.js) and the
   legacy .modal at 60, so 20001 is the only value that keeps a validation message visible
   inside an open dialog. Visibility (not opacity alone) is what removes the element from
   hit-testing, and the delayed visibility transition keeps the 0.3s fade. */
.tawi-toast {
    display: block;
    position: fixed;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: 8px;
    color: #ffffff;
    font-weight: 600;
    max-width: 90%;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 20001;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.tawi-toast--visible {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}
}