/* ============================================================
   Tawi ERP HQ Shell Styles (Fix 269a)
   Extracted byte-identical from the renderShell <style> in
   app/shells/hq-shell.js. Loaded via <link> after /styles/index.css
   so these HQ-app component rules keep precedence over the shared
   /styles set until the class-name twins are reconciled (Fix 269b).
   ============================================================ */
/* Fix 269b: .status-pill* now single-sourced in styles/components.css
   (shell copies removed - runtime-identical). Intentional remaining forks:
   badge* (forked values), stat-card (shell dashboard variant), data-table
   (bare shell vs chrome component), toast (legacy vs toast-item),
   modal-content (shell 600px/24px vs components 560px structure),
   btn-danger/btn-secondary (background variants) - reconcile in a
   visually-verified pass. */

                /* Toast/Snackbar */        .toast {            position: fixed;            left: 50%;            bottom: 32px;            transform: translateX(-50%);            background: #323232;            color: var(--text-inverse);            padding: 14px 28px;            border-radius: var(--radius-full);            font-size: 15px;            box-shadow: var(--shadow-md);            opacity: 0;            pointer-events: none;            z-index: 9999;            transition: opacity var(--transition-normal), bottom var(--transition-normal);        }        .toast.show {            opacity: 1;            pointer-events: auto;            bottom: 64px;        }        /* Offline Banner */        .offline-banner {            position: fixed;            top: 0;            left: 0;            width: 100vw;            background: var(--danger);            color: var(--text-inverse);            text-align: center;            font-weight: 600;            padding: 12px 0;            z-index: 9999;            box-shadow: 0 2px 12px rgba(220,38,38,0.08);            display: none;        }        .offline-banner.show { display: block; }        .offline-banner button {            background: var(--text-inverse);            color: var(--danger);            border-radius: var(--radius-sm);            margin-left: 16px;            padding: 4px 14px;            font-weight: 600;            border: none;            cursor: pointer;        }        .offline-banner button:hover { background: var(--danger-bg); }        /* Button polish */        .btn-main {            background: var(--primary);            color: var(--text-inverse);            border-radius: 8px;            font-weight: 600;            padding: 10px 0;            transition: background var(--transition-fast), box-shadow var(--transition-fast);            box-shadow: 0 2px 8px rgba(79,70,229,0.08);        }        .btn-main:hover, .btn-main:active {            background: var(--primary-hover);        }        .btn-danger {            background: var(--danger);            color: var(--text-inverse);        }        .btn-danger:hover, .btn-danger:active {            background: var(--danger-hover);        }        .btn-secondary {            background: var(--surface-tertiary);            color: var(--text-secondary);        }        .btn-secondary:hover, .btn-secondary:active {            background: var(--border);        }        /* Modal transitions */        .modal { transition: opacity var(--transition-fast), transform var(--transition-fast); }        .modal.active { opacity: 1; transform: scale(1); }        .modal:not(.active) { opacity: 0; transform: scale(0.98); pointer-events: none; }        /* Prominent dark mode toggle */        #themeToggle { box-shadow: 0 2px 8px rgba(16,185,129,0.08); border: 2px solid var(--border); }        #themeToggle:focus { outline: 2px solid #4ade80; }        * { margin: 0; padding: 0; box-sizing: border-box; }        html { font-size: 16px; }        body { background: var(--bg-body); font-family: system-ui, -apple-system, sans-serif; }                .sidebar {            width: var(--sidebar-width, 280px);            position: fixed;            left: 0;            top: 0;            bottom: 0;            background: var(--bg-sidebar, #f1f3f5);            border-right: 1px solid rgba(0,0,0,0.08);            box-shadow: none;            overflow-y: auto;            z-index: 40;            transition: transform var(--transition-normal) ease, width var(--transition-normal) ease;        }                .main-content {            margin-left: var(--sidebar-width, 280px);            padding: 24px;            min-height: 100vh;            transition: margin-left var(--transition-normal) ease;        }        body.sidebar-collapsed .sidebar {            width: var(--sidebar-collapsed-width, 88px);        }        body.sidebar-collapsed .main-content {            margin-left: var(--sidebar-collapsed-width, 88px);        }        body.sidebar-collapsed .sidebar h1,        body.sidebar-collapsed .sidebar p,        body.sidebar-collapsed .sidebar .nav-label {            display: none;        }        body.sidebar-collapsed .sidebar a {            justify-content: center;        }                .page { display: none; animation: fadeIn 0.3s ease; }        .active-page { display: block; }        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }                .stat-card {            background: var(--bg-card);            border-radius: var(--radius-lg);            padding: var(--space-3);            border: 1px solid var(--border);            box-shadow: var(--shadow-card);            transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);            position: relative;            overflow: hidden;        }        .stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: var(--border-dark); }        .stat-card .stat-trend {            display: inline-flex;            align-items: center;            gap: 3px;            font-size: 0.75rem;            font-weight: 600;            padding: 2px 8px;            border-radius: var(--radius-full);        }        .stat-card .stat-trend.up { background: var(--success-bg); color: var(--success-text); }        .stat-card .stat-trend.down { background: var(--danger-bg); color: var(--danger-text); }        .stat-card .stat-trend.neutral { background: var(--surface-tertiary); color: var(--text-tertiary); }                        /* Dashboard entrance animations */        .dashboard-animate .stat-card {            animation: fadeUp 0.5s ease both;        }        .dashboard-animate .stat-card:nth-child(1) { animation-delay: 0.05s; }        .dashboard-animate .stat-card:nth-child(2) { animation-delay: 0.1s; }        .dashboard-animate .stat-card:nth-child(3) { animation-delay: 0.15s; }        .dashboard-animate .stat-card:nth-child(4) { animation-delay: 0.2s; }        .dashboard-animate .stat-card:nth-child(5) { animation-delay: 0.25s; }        .dashboard-animate .stat-card:nth-child(6) { animation-delay: 0.3s; }        .dashboard-animate .stat-card:nth-child(7) { animation-delay: 0.35s; }        .dashboard-animate .stat-card:nth-child(8) { animation-delay: 0.4s; }        .dashboard-animate .dashboard-panel {            animation: fadeUp 0.5s ease both;        }        .dashboard-animate .dashboard-panel:nth-of-type(1) { animation-delay: 0.3s; }        .dashboard-animate .dashboard-panel:nth-of-type(2) { animation-delay: 0.4s; }        .dashboard-animate .dashboard-panel:nth-of-type(3) { animation-delay: 0.5s; }        .dashboard-animate .dashboard-panel:nth-of-type(4) { animation-delay: 0.6s; }        .dashboard-animate .dashboard-panel:nth-of-type(5) { animation-delay: 0.7s; }                @keyframes fadeUp {            from { opacity: 0; transform: translateY(20px); }            to { opacity: 1; transform: translateY(0); }        }                /* Status pills for tables */        .dashboard-topbar {            position: sticky;            top: 0;            z-index: 30;            margin: -24px -24px 24px -24px;            background: var(--surface);            border: none;            border-bottom: 1px solid var(--border);            border-radius: 0;            padding: 14px 24px;            box-shadow: 0 1px 2px rgba(15,23,42,0.05);        }        .dashboard-topbar .text-gray-600,        .dashboard-topbar .text-gray-800 { color: var(--text-primary) !important; }        .dashboard-topbar .text-red-600,        .dashboard-topbar .text-red-800 { color: var(--danger) !important; }        .dashboard-topbar        .dashboard-topbar .install-btn { background: var(--primary-light); color: var(--primary-dark); border: 1px solid var(--border-light); }        .dashboard-topbar .install-btn:hover { background: var(--primary-light); }        .dashboard-panel {            background: var(--bg-card);            border: 1px solid var(--border);            border-radius: 18px;            box-shadow: var(--shadow-card);        }        .dashboard-hero {            background: var(--surface);            color: var(--text-primary);            border: 1px solid var(--border);            box-shadow: var(--shadow-card);        }        .dashboard-hero .text-emerald-50 { color: var(--text-secondary) !important; }        .dashboard-chart-wrap { position: relative; height: 260px; }        .dashboard-table { width: 100%; border-collapse: collapse; }        .dashboard-table th, .dashboard-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border-light); }        .dashboard-table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); background: var(--surface-secondary); }        .dashboard-table tr:hover { background: var(--surface-hover); }        .dashboard-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12px; 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); }                .data-table { width: 100%; border-collapse: collapse; }        .data-table th, .data-table td { padding: 12px; text-align: left; border-bottom: 1px solid var(--border); }        .data-table th { background: var(--surface-secondary); font-weight: 600; color: var(--text-primary); }        .data-table tr:hover { background: var(--surface-secondary); }                .badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; }        .badge-success { background: var(--success-bg); color: var(--success-text); }        .badge-warning { background: var(--warning-bg); color: var(--warning-text); }        .badge-danger { background: var(--danger-bg); color: var(--danger-text); }        .badge-info { background: var(--info-bg); color: var(--info-text); }                .modal {            display: none;            position: fixed;            top: 0;            left: 0;            width: 100%;            height: 100%;            background: var(--bg-modal-overlay);            z-index: 1000;            justify-content: center;            align-items: center;        }        .modal.active { display: flex; }        .modal-content {            background: var(--surface);            border-radius: var(--radius-lg);            max-width: 600px;            width: 90%;            max-height: 85vh;            overflow-y: auto;            padding: 24px;        }                .mobile-menu-btn {            display: none;            position: fixed;            bottom: 20px;            left: 20px;            z-index: 50;            background: var(--primary);            color: var(--text-inverse);            width: 48px;            height: 48px;            border-radius: 50%;            align-items: center;            justify-content: center;            box-shadow: 0 4px 12px rgba(0,0,0,0.2);            cursor: pointer;        }        @media (max-width: 768px) {            .sidebar { transform: translateX(-100%); }            .sidebar.open { transform: translateX(0); }            .main-content { margin-left: 0; padding: 16px; }            body.sidebar-collapsed .main-content { margin-left: 0; }            .mobile-menu-btn { display: flex; }        }                input, select, textarea { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; min-height: 36px; width: 100%; transition: border-color 0.2s; background: var(--bg-input); color: var(--text-primary); }        input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); }        button { cursor: pointer; transition: opacity 0.2s; font-size: 14px; font-weight: 500; line-height: 1.5; border-radius: 8px; min-height: 36px; }        button:has(i) { display: inline-flex; align-items: center; gap: 8px; }        button:hover { opacity: 0.9; }                .status-verified { background: var(--success-bg); color: var(--success-text); border-left: 4px solid var(--success); padding: 12px; border-radius: var(--radius-sm); margin-bottom: 8px; }        .status-mismatch { background: var(--warning-bg); color: var(--warning-text); border-left: 4px solid var(--warning); padding: 12px; border-radius: var(--radius-sm); margin-bottom: 8px; }        .status-unverified { background: var(--danger-bg); color: var(--danger-text); border-left: 4px solid var(--danger); padding: 12px; border-radius: var(--radius-sm); margin-bottom: 8px; }                .transfer-item { background: var(--surface-secondary); padding: 12px; border-radius: var(--radius-sm); margin-bottom: 8px; }                /* ==================== DARK MODE ==================== */        /* Most dark mode styles are handled by CSS variable overrides on body.dark-mode above.           Only a few specific overrides that can't be covered by variables are listed here. */        /* Dark mode logo swap */        body.dark-mode .logo-light { display: none; }        body.dark-mode .logo-dark { display: inline-block; }        .logo-dark { display: none; }        .logo-light { display: inline-block; }        body.dark-mode { background: var(--bg-body); color: var(--text-primary); }        body.dark-mode .main-content { background: var(--bg-body); }        body.dark-mode .sidebar a { color: var(--text-secondary); transition: all 0.2s; }        body.dark-mode .sidebar a:hover { background: var(--surface-secondary); color: var(--primary-hover); }        body.dark-mode .bg-gray-300 { background: var(--border-dark); color: var(--text-primary); }        body.dark-mode .bg-gray-300:hover { background: #5a6573; }        body.dark-mode .bg-green-50, body.dark-mode .bg-yellow-50, body.dark-mode .bg-red-50 { background: var(--surface-tertiary); }        body.dark-mode .p-2.bg-green-50 { background: #064e3b; }        body.dark-mode .p-2.bg-yellow-50 { background: #78350f; }        body.dark-mode .p-2.bg-red-50 { background: #7f1d1d; }        body.dark-mode .dashboard-hero { background: var(--surface) !important; color: var(--text-primary); border-color: var(--border); box-shadow: var(--shadow-topbar) !important; }        body.dark-mode .dashboard-hero .text-emerald-100,        body.dark-mode .dashboard-hero .text-emerald-50 { color: var(--text-tertiary) !important; }        body.dark-mode .dashboard-hero h3,        body.dark-mode .dashboard-hero .text-white { color: var(--text-primary) !important; }        body.dark-mode .dashboard-hero .bg-white\\/15,        body.dark-mode .dashboard-hero [class*="bg-white/"] { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.1) !important; }        body.dark-mode .dashboard-hero [class*="backdrop-blur"] { backdrop-filter: none !important; }        body.dark-mode #dashboard-page .stat-card,        body.dark-mode #dashboard-page .grid .stat-card:nth-child(4n+1),        body.dark-mode #dashboard-page .grid .stat-card:nth-child(4n+2),        body.dark-mode #dashboard-page .grid .stat-card:nth-child(4n+3),        body.dark-mode #dashboard-page .grid .stat-card:nth-child(4n+4) {            background: linear-gradient(180deg, var(--surface) 0%, var(--surface-hover) 100%) !important;            color: var(--text-primary) !important;        }        body.dark-mode #dashboard-page .stat-card .text-gray-500,        body.dark-mode #dashboard-page .stat-card .text-gray-600,        body.dark-mode #dashboard-page .stat-card p:first-child { color: var(--text-secondary) !important; }        body.dark-mode #dashboard-page .stat-card .text-2xl,        body.dark-mode #dashboard-page .stat-card .font-bold { color: var(--text-primary); }        body.dark-mode #dashboard-page .stat-card .text-emerald-600 { color: #4ade80 !important; }        body.dark-mode #dashboard-page .stat-card .text-emerald-600 { color: #34d399 !important; }        body.dark-mode #dashboard-page .stat-card .text-amber-600,        body.dark-mode #dashboard-page .stat-card .text-yellow-600,        body.dark-mode #dashboard-page .stat-card .text-orange-600 { color: #fbbf24 !important; }        body.dark-mode #dashboard-page .stat-card .text-red-600 { color: #f87171 !important; }                        /* ==================== BAR HQ STYLES ==================== */        .hidden { display: none !important; }        .bar-hidden { display: none !important; }        /* CRITICAL: When a BAR page is active, override the !important */        body.business-bar .bar-hidden.active-page { display: block !important; }        .bar-nav-item { display: none; }        body.business-bar .bar-nav-item { display: flex; }        /* BAR dealers see ALL core ERP items PLUS bar-specific items */        body.business-bar .retail-nav-item { display: flex; }        body:not(.business-bar) .retail-nav-item { display: flex; }                .hq-table-grid {            display: grid;            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));            gap: 12px;        }        .hq-table-card {            background: var(--surface);            border-radius: var(--radius-md);            padding: 16px;            text-align: center;            cursor: pointer;            border: 2px solid var(--border);            transition: all 0.2s;            box-shadow: var(--shadow-sm);        }        .hq-table-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }        .hq-table-card.occupied { border-color: var(--danger); background: var(--danger-bg); }        .hq-table-card.available { border-color: var(--success); background: var(--success-bg); }        .hq-table-card .table-name { font-weight: 700; font-size: 16px; }        .hq-table-card .table-status { font-size: 12px; margin-top: 4px; }        .hq-table-card .table-tab-count { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }                body.dark-mode .hq-table-card { background: var(--surface); border-color: var(--border); }        body.dark-mode .hq-table-card.occupied { border-color: var(--danger); background: #451a1a; }        body.dark-mode .hq-table-card.available { border-color: var(--success); background: #064e3b; }                .hq-stock-item, .hq-shift-item {            background: var(--surface);            border-radius: var(--radius-md);            padding: 16px;            border: 1px solid var(--border);            margin-bottom: 12px;        }        body.dark-mode .hq-stock-item, body.dark-mode .hq-shift-item {            background: var(--surface);            border-color: var(--border);        }                .hq-variance-positive { color: var(--success); }        .hq-variance-negative { color: var(--danger); }        .hq-variance-zero { color: var(--text-tertiary); }                .theme-toggle {            background: none;            border: none;            cursor: pointer;            font-size: 18px;            transition: transform 0.3s;        }        .theme-toggle:hover {            transform: scale(1.2);        }        .install-btn {            background: var(--primary);            color: var(--text-inverse);            padding: 8px 12px;            border-radius: 10px;            font-size: 14px;        }    

/* Fix 274: stat cards are NEUTRAL - the colour now lives on the icons
   (.stat-card .stat-icon-* variants in styles/components.css). No top border. */
.stat-card { position: relative; }


/* Fix 272: a11y helper */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }


/* Fix 272 (issue 3): single source sidebar nav - token spacing, no inline/arbitrary colours */
#sidebarNav a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); margin-bottom: var(--space-2); border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 500; line-height: 1.5; color: var(--text-secondary); text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast); }
#sidebarNav a:hover { background: var(--bg-hover); color: var(--text-primary); }
#sidebarNav a.active, #sidebarNav a[data-active="true"] { background: var(--primary); color: var(--text-inverse); font-weight: 600; }
#sidebarNav a.logout-link { color: var(--color-danger); }
#sidebarNav a.logout-link:hover { background: var(--danger-bg); color: var(--color-danger); }
#sidebarNav i { width: 20px; text-align: center; font-size: 1rem; flex-shrink: 0; }
#sidebarNav .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* Fix 273 (issue 3): topbar background is SOLID var(--surface) - the
   Fix 272 translucency + backdrop blur let page content show through. */
.dashboard-topbar.topbar-scrolled { box-shadow: var(--shadow-topbar); }


/* Fix 272 (issue 5): branch stock cards - consistent token spacing */
.branch-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-4); margin-bottom: var(--space-3); }
.branch-card-skeleton { min-height: 132px; }
.branch-card { min-height: 132px; }

/* Fix 274: sidebar brand + collapsed rail */
body.sidebar-collapsed .sidebar .sidebar-brand-text { display: none; }
body.sidebar-collapsed .sidebar .sidebar-brand-link { justify-content: center; }