* { margin: 0; padding: 0; box-sizing: border-box; }
        
        :root {
            /* Font Scale */
            --font-xs: 0.625rem;    /* 10px */
            --font-sm: 0.75rem;     /* 12px */
            --font-base: 0.875rem;  /* 14px */
            --font-md: 1rem;        /* 16px */
            --font-lg: 1.25rem;     /* 20px */
            --font-xl: 1.5rem;      /* 24px */
            --font-2xl: 2rem;       /* 32px */
            --font-3xl: 2.5rem;     /* 40px */
            
            /* Core Colors */
            --bg: #ffffff;
            --bg-base: #fafbfc;
            --bg-surface: #ffffff;
            --bg-elevated: #f4f6f8;
            --bg-hover: #f0f2f5;
            --surface: #f8fafc;
            --border: #e2e8f0;
            --text: #1c1917;
            --text-muted: #6b7280;
            
            /* Gray Scale */
            --gray-50: #f9fafb;
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-300: #d1d5db;
            --gray-400: #9ca3af;
            --gray-500: #6b7280;
            --gray-600: #4b5563;
            --gray-700: #44403c;
            --gray-800: #292524;
            --gray-900: #1c1917;
            
            /* Accent Colors - Brand Guidelines v5 */
            --accent: #2563eb;
            --accent-light: #fff7ed;
            --accent-dark: #c2410c;
            --primary: #2563eb;
            --orange: #2563eb;
            --orange-light: #fff7ed;
            
            /* Additional Colors */
            --blue: #3b82f6;
            --blue-light: #dbeafe;
            --teal: #14b8a6;
            --teal-light: #ccfbf1;
            --purple: #7c3aed;
            --purple-light: #f3e8ff;
            --shop-primary: #7c3aed;
            --shop-light: #ede9fe;
            
            /* Status Colors */
            --success: #22c55e;
            --success-dark: #16a34a;
            --success-light: #dcfce7;
            --warning: #eab308;
            --warning-dark: #ca8a04;
            --warning-light: #fef9c3;
            --danger: #ef4444;
            --danger-dark: #dc2626;
            --danger-light: #fee2e2;
            
            /* Shadows */
            --shadow-sm: 0 2px 4px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
            --shadow-md: 0 4px 8px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.06);
            --shadow-lg: 0 12px 24px rgba(0,0,0,0.06), 0 4px 8px rgba(0,0,0,0.04);
            
            /* Z-Index Layers */
            --z-sticky: 10;         /* Sticky table headers */
            --z-fixed: 50;          /* Fixed page elements */
            --z-header: 100;        /* Page headers, stats */
            --z-dropdown: 200;      /* Dropdowns, popovers */
            --z-modal: 1000;        /* Modal overlays */
            --z-toast: 2000;        /* Toast notifications */
            --z-debug: 9999;        /* Debug panel only */
            
            /* Border Radius */
            --radius-xs: 4px;
            --radius-sm: 6px;
            --radius-md: 10px;
            --radius-lg: 14px;
            --radius-xl: 20px;
            --radius-full: 9999px;
            
            /* Text Colors */
            --text-primary: #1c1917;
            --text-secondary: #6b7280;
            
            /* Transitions */
            --transition: all 0.3s ease;
            --transition-normal: all 0.2s ease;
            --transition-fast: all 0.15s ease;
            
            /* Sidebar */
            --sidebar-bg: #1e293b;
            --sidebar-hover: #334155;
            --sidebar-text: #94a3b8;
        }
        
        body {
            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--surface);
            color: var(--text);
            height: 100vh;
            overflow: hidden;
        }
        
        /* ========================================
           FLEXBOX LAYOUT - THE KEY TO EVERYTHING
           ======================================== */
        .app {
            display: flex;
            height: 100vh;
        }
        
        /* Sidebar */
        .sidebar {
            width: 80px;
            background: var(--sidebar-bg);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 0 32px 0;
            gap: 8px;
            flex-shrink: 0;
            position: relative;
        }
        
        /* Draggable area at top of sidebar for window movement */
        .sidebar::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 15px;
            -webkit-app-region: drag;
        }
        
        .sidebar .nav-btn:first-child {
            margin-top: 0;
        }
        
        /* Make nav buttons clickable, not draggable */
        .sidebar .nav-btn {
            -webkit-app-region: no-drag;
        }
        
        .logo {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px 0;
            margin-bottom: 60px;
            cursor: pointer;
            -webkit-app-region: no-drag;
            pointer-events: none;
        }
        
        .logo svg {
            width: 36px;
            height: auto;
        }
        
        .nav-btn {
            width: 44px;
            height: 44px;
            border: none;
            background: transparent;
            color: var(--sidebar-text);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.15s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .nav-btn:hover { background: var(--sidebar-hover); color: #e2e8f0; }
        
        /* Styled sidebar tooltips */
        .nav-btn[data-tooltip] {
            position: relative;
        }
        .nav-btn[data-tooltip]::after {
            content: attr(data-tooltip);
            position: absolute;
            left: calc(100% + 12px);
            top: 50%;
            transform: translateY(-50%);
            background: #0f172a;
            color: #f1f5f9;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 500;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.15s;
            z-index: 9999;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }
        .nav-btn[data-tooltip]::before {
            content: '';
            position: absolute;
            left: calc(100% + 8px);
            top: 50%;
            transform: translateY(-50%);
            border: 4px solid transparent;
            border-right-color: #0f172a;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.15s;
            z-index: 9999;
        }
        .nav-btn[data-tooltip]:hover::after,
        .nav-btn[data-tooltip]:hover::before {
            opacity: 1;
        }
        .nav-btn.active[data-page="vehicles"] { background: var(--orange); color: white; }
        .nav-btn.active[data-page="finance"] { background: var(--success); color: white; }
        .nav-btn.active[data-page="shop"] { background: var(--blue); color: white; }
        .nav-btn.active[data-page="analytics"] { background: var(--purple); color: white; }
        .nav-btn.active[data-page="settings"] { background: var(--text-muted); color: white; }
        .nav-btn.active[data-page="help"] { background: var(--orange); color: white; }
        .nav-btn svg { width: 22px; height: 22px; }
        
        .sidebar-desktop-only {
            display: contents; /* transparent to flex layout on desktop */
        }

        .nav-divider { height: 1px; width: 32px; background: var(--sidebar-hover); margin: 4px 0; }
        .nav-spacer { margin-top: auto; height: 2px; }
        
        /* Main Content Area */
        .main {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            min-width: 0;
            min-height: 0;
        }
        
        /* Page Container */
        .page {
            display: none;
            flex: 1;
            flex-direction: column;
            overflow: hidden;
            min-height: 0;
        }
        
        .page.active {
            display: flex;
            animation: pageFadeIn 0.18s ease-out;
        }
        
        @keyframes pageFadeIn {
            from { opacity: 0; transform: translateY(4px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* ========================================
           HEADER - flex-shrink: 0 (stays fixed)
           ======================================== */
        .header {
            padding: 16px 24px;
            background: var(--bg);
            flex-shrink: 0;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
            -webkit-app-region: drag; /* Allow window dragging from header */
        }
        
        /* Make interactive elements in header clickable (not draggable) */
        .header button,
        .header input,
        .header select,
        .header a,
        .header-actions {
            -webkit-app-region: no-drag;
        }
        
        .header h1 {
            font-size: 20px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .header-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .header-icon svg { width: 18px; height: 18px; }
        .header-icon.orange { background: var(--orange-light); color: var(--orange); }
        .header-icon.blue { background: var(--blue-light); color: var(--blue); }
        
        .header-actions {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        /* Buttons */
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.15s;
            display: flex;
            align-items: center;
            gap: 6px;
            font-family: inherit;
        }
        
        .btn-primary { background: var(--orange); color: white; }
        .btn-primary:hover { filter: brightness(1.05); }
        .btn-primary.blue { background: var(--blue); }
        .btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
        .btn-icon { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); padding: 8px; min-width: 36px; display: flex; align-items: center; justify-content: center; }
        .btn-icon:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); }
        .btn-icon:disabled { cursor: not-allowed; }
        .btn-secondary:hover { background: var(--bg); }
        .btn-ghost { background: transparent; color: var(--text-muted); }
        .btn-ghost:hover { background: var(--surface); color: var(--text); }
        
        .btn svg { width: 16px; height: 16px; }
        
        /* Search Box - Enhanced */
        .search-wrapper {
            position: relative;
        }
        
        .search-box {
            display: flex;
            align-items: center;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 0 12px;
            transition: all 0.2s;
        }
        
        .search-box:focus-within {
            border-color: var(--orange);
            box-shadow: 0 0 0 3px rgba(241, 90, 41, 0.1);
        }
        
        .search-box input {
            border: none;
            background: transparent;
            padding: 8px;
            font-size: 13px;
            width: 240px;
            outline: none;
            font-family: inherit;
        }
        
        .search-box .search-icon { 
            width: 16px; 
            height: 16px; 
            color: var(--text-muted);
            flex-shrink: 0;
        }
        
        .search-box svg {
            width: 16px;
            height: 16px;
            color: var(--text-muted);
            flex-shrink: 0;
        }
        
        .search-count {
            font-size: 11px;
            color: var(--gray-500);
            background: var(--gray-100);
            padding: 2px 8px;
            border-radius: 10px;
            white-space: nowrap;
            margin-right: 4px;
        }
        
        .search-clear {
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px;
            color: var(--gray-400);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            transition: all 0.15s;
        }
        
        .search-clear:hover {
            color: var(--gray-600);
            background: var(--gray-100);
        }
        
        .search-clear svg {
            width: 14px;
            height: 14px;
        }
        
        /* Search Dropdown */
        .search-dropdown {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            margin-top: 4px;
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            z-index: 100;
            overflow: hidden;
        }
        
        .search-dropdown.open {
            display: block;
        }
        
        .search-dropdown-header {
            font-size: 11px;
            font-weight: 600;
            color: var(--gray-500);
            text-transform: uppercase;
            padding: 10px 14px 6px;
        }
        
        .search-dropdown-list {
            max-height: 200px;
            overflow-y: auto;
        }
        
        .search-dropdown-item {
            padding: 10px 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            transition: background 0.15s;
        }
        
        .search-dropdown-item:hover {
            background: var(--gray-50);
        }
        
        .search-dropdown-item svg {
            width: 14px;
            height: 14px;
            color: var(--gray-400);
        }
        
        .search-dropdown-footer {
            padding: 8px 14px;
            border-top: 1px solid var(--gray-100);
            background: var(--gray-50);
        }
        
        /* Search Chips */
        .search-chips {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }
        
        .search-chip {
            font-size: 11px;
            padding: 4px 10px;
            border-radius: 12px;
            background: var(--gray-100);
            color: var(--gray-600);
            border: 1px solid var(--gray-200);
            cursor: pointer;
            transition: all 0.15s;
            white-space: nowrap;
        }
        
        .search-chip:hover {
            background: var(--gray-200);
            color: var(--gray-800);
        }
        
        .search-chip.active {
            background: var(--orange);
            color: white;
            border-color: var(--orange);
        }
        
        .search-chip.warning {
            background: #fef3c7;
            color: #92400e;
            border-color: #fcd34d;
        }
        
        .search-chip.warning:hover {
            background: #fcd34d;
        }
        
        .search-chip.success {
            background: #dcfce7;
            color: #166534;
            border-color: #86efac;
        }
        
        .search-chip.success:hover {
            background: #86efac;
        }
        
        /* ========================================
           STATS BAR - flex-shrink: 0 (stays fixed)
           ======================================== */
        .stats {
            display: flex;
            gap: 16px;
            padding: 16px 24px;
            background: var(--bg);
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
            overflow-x: auto;
        }
        
        /* Stats Grid */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 12px;
            margin-bottom: 12px;
            flex-shrink: 0;
        }

        .stat-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 14px 20px;
            min-width: 140px;
            transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
        }
        
        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
        
        .stat-card.highlight-orange { background: var(--orange-light); border-color: var(--orange); }
        .stat-card.highlight-blue { background: var(--blue-light); border-color: var(--blue); }
        .stat-card.highlight-green { background: var(--success-light); border-color: var(--success); }
        .stat-card.highlight-yellow { background: #fef9c3; border-color: #eab308; }
        .stat-card.highlight-red { background: var(--danger-light); border-color: var(--danger); }
        
        .stat-label {
            font-size: 11px;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 4px;
        }
        
        .stat-value {
            font-size: 22px;
            font-weight: 700;
        }
        
        .stat-sublabel {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 2px;
        }
        .stat-sublabel.success { color: var(--success); }
        .stat-sublabel.danger { color: var(--danger); }
        .stat-sublabel.warning { color: #b45309; }
        
        .stat-value.success { color: var(--success); }
        .stat-value.danger { color: var(--danger); }
        .stat-value.orange { color: var(--orange); }
        .stat-value.blue { color: var(--blue); }
        
        /* ========================================
           B7: STAT CARD ROW — Reusable Container
           Standardized flex row for stat cards on any page.
           Usage: <div class="stat-card-row"> <div class="stat-card">...</div> </div>
           ======================================== */
        .stat-card-row {
            display: flex;
            gap: 16px;
            padding: 16px 24px;
            background: var(--bg);
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
            overflow-x: auto;
        }
        
        .stat-card-row .stat-card {
            flex: 1;
            min-width: 140px;
        }
        
        /* Stat card with trend indicator */
        .stat-trend {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 11px;
            font-weight: 600;
            margin-top: 2px;
        }
        .stat-trend.up { color: var(--success); }
        .stat-trend.down { color: var(--danger); }
        .stat-trend.neutral { color: var(--text-muted); }
        .stat-trend svg { width: 12px; height: 12px; }
        
        /* Stat card icon (optional decorative icon) */
        .stat-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
        }
        .stat-icon svg { width: 18px; height: 18px; }
        .stat-icon.orange { background: var(--orange-light); color: var(--orange); }
        .stat-icon.green { background: var(--success-light); color: var(--success); }
        .stat-icon.blue { background: var(--blue-light); color: var(--blue); }
        .stat-icon.purple { background: var(--purple-light); color: var(--purple); }
        .stat-icon.red { background: var(--danger-light); color: var(--danger); }
        
        /* ========================================
           REPORTS PAGE STYLES
           ======================================== */
        .report-type-option {
            display: block;
            cursor: pointer;
        }
        .report-type-option input { display: none; }
        .report-type-label {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            transition: all 0.15s;
        }
        .report-type-option:hover .report-type-label { border-color: var(--gray-400); }
        .report-type-option input:checked + .report-type-label {
            border-color: #dc2626;
            background: rgba(220, 38, 38, 0.05);
        }

        /* Report Type Tabs (Option A layout) */
        /* ========================================
           C13: REPORTS PAGE COMPONENTS
           Tab bar, sidebar, preview panel
           ======================================== */
        .report-tab-bar {
            display: flex;
            gap: 4px;
            padding: 8px 24px;
            border-bottom: 1px solid var(--border);
            background: var(--bg);
            flex-shrink: 0;
        }
        
        .report-tab {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-muted);
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
            white-space: nowrap;
        }
        .report-tab input { display: none; }
        .report-tab svg { width: 15px; height: 15px; }
        .report-tab:hover {
            background: var(--gray-200);
            color: var(--gray-700);
        }
        .report-tab.active {
            background: var(--accent);
            color: white;
            font-weight: 600;
        }
        .report-tab.active svg {
            stroke: white;
        }
        
        .report-layout {
            flex: 1;
            display: grid;
            grid-template-columns: 260px 1fr;
            gap: 0;
            overflow: hidden;
        }
        
        .report-sidebar {
            overflow-y: auto;
            padding: 20px;
            border-right: 1px solid var(--border);
        }
        
        .report-filter-group {
            margin-bottom: 16px;
        }
        
        .report-filter-label {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--gray-400);
            margin-bottom: 8px;
            display: block;
        }
        
        .report-vehicle-selector {
            border-top: 1px solid var(--border);
            padding-top: 12px;
            margin-bottom: 20px;
        }
        
        .report-vehicle-selector-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            user-select: none;
        }
        
        .report-preview-panel {
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        
        .report-preview-header {
            padding: 14px 20px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
            background: var(--surface);
        }
        
        .report-context-badge {
            font-size: 11px;
            color: var(--text-muted);
            background: var(--gray-100);
            padding: 2px 8px;
            border-radius: 4px;
        }
        
        .report-preview-content {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            background: var(--gray-100);
        }
        
        .report-preview-card {
            background: var(--surface);
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            padding: 24px;
            min-height: 400px;
        }
        
        .report-preview-placeholder {
            text-align: center;
            color: var(--text-muted);
            padding: 60px 20px;
        }
        
        .report-preview-placeholder svg {
            width: 48px;
            height: 48px;
            margin: 0 auto 16px;
            opacity: 0.4;
            display: block;
        }
        
        .filter-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            background: var(--gray-100);
            border: 1px solid var(--border);
            border-radius: 16px;
            font-size: 11px;
            cursor: pointer;
            transition: all 0.15s;
        }
        .filter-chip input { display: none; }
        .filter-chip:hover { border-color: var(--gray-400); }
        .filter-chip.active { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
        .filter-chip .chip-check { display: none; }
        .filter-chip.active .chip-check { display: inline-block; }
        
        /* ========================================
           TABS BAR - flex-shrink: 0 (stays fixed)
           ======================================== */
        .tabs-bar {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 0 24px;
            background: var(--bg);
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }
        
        .tab {
            padding: 14px 16px;
            border: none;
            background: transparent;
            color: var(--text-muted);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            position: relative;
            transition: color 0.15s;
            font-family: inherit;
        }
        
        .tab:hover { color: var(--text); }
        .tab.active { color: var(--orange); }
        .tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 16px;
            right: 16px;
            height: 2px;
            background: var(--orange);
            border-radius: 2px 2px 0 0;
        }
        
        .tab-count {
            background: var(--surface);
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 11px;
            margin-left: 6px;
        }
        
        .tab.active .tab-count { background: var(--orange-light); color: var(--orange); }
        
        /* Shop Tabs (full width) */
        .shop-tabs {
            display: flex;
            padding: 0 24px;
            background: var(--bg);
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }
        
        .shop-tab {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 16px;
            border: none;
            background: transparent;
            color: var(--text-muted);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            position: relative;
            transition: all 0.15s;
            font-family: inherit;
        }
        
        .shop-tab:hover { color: var(--text); background: var(--surface); }
        .shop-tab.active { color: var(--blue); }
        .shop-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 24px;
            right: 24px;
            height: 3px;
            background: var(--blue);
            border-radius: 3px 3px 0 0;
        }
        
        .shop-tab svg { width: 20px; height: 20px; }
        .shop-tab .tab-count { background: var(--surface); }
        .shop-tab.active .tab-count { background: var(--blue-light); color: var(--blue); }
        
        /* C14: Shop table empty state */
        .shop-empty-state {
            text-align: center;
            padding: 40px 16px;
            color: var(--gray-400);
            font-size: 13px;
        }
        
        /* C14: Mini tech avatar in work order rows */
        .tech-mini-avatar {
            width: 22px;
            height: 22px;
            border-radius: 6px;
            color: white;
            font-size: 9px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        /* ========================================
           TABLE SECTION - flex: 1 (fills remaining space)
           ======================================== */
        .table-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background: var(--bg);
            position: relative;
            min-height: 0;
        }
        
        /* Pagination (v9.75) */
        .pagination-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 24px;
            background: var(--surface);
            border-top: 1px solid var(--border);
            flex-shrink: 0;
            margin-top: auto;
        }
        .pagination-info {
            font-size: var(--font-sm);
            color: var(--text-muted);
        }
        .pagination-controls {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .page-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            background: var(--surface);
            color: var(--text);
            cursor: pointer;
            transition: all 0.15s;
        }
        .page-nav:hover:not(:disabled) {
            background: var(--bg-hover);
            border-color: var(--gray-400);
        }
        .page-nav:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }
        .page-numbers {
            display: flex;
            align-items: center;
            gap: 2px;
            margin: 0 8px;
        }
        .page-btn {
            min-width: 32px;
            height: 32px;
            padding: 0 8px;
            border: 1px solid transparent;
            border-radius: var(--radius-sm);
            background: transparent;
            color: var(--text);
            font-size: var(--font-sm);
            cursor: pointer;
            transition: all 0.15s;
        }
        .page-btn:hover {
            background: var(--bg-hover);
        }
        .page-btn.active {
            background: var(--orange);
            color: white;
            border-color: var(--orange);
        }
        .page-ellipsis {
            padding: 0 4px;
            color: var(--text-muted);
        }
        .pagination-size select {
            padding: 6px 10px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            background: var(--surface);
            color: var(--text);
            font-size: var(--font-sm);
            cursor: pointer;
        }
        .pagination-size select:hover {
            border-color: var(--gray-400);
        }
        
        .bulk-actions-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .bulk-actions-info .count {
            background: var(--orange);
            padding: 4px 12px;
            border-radius: var(--radius-full);
            font-weight: 600;
        }
        .bulk-actions-buttons {
            display: flex;
            gap: 8px;
        }
        .bulk-actions-buttons .btn {
            background: transparent;
            color: white;
            border: 1px solid rgba(255,255,255,0.3);
        }
        .bulk-actions-buttons .btn:hover {
            background: rgba(255,255,255,0.1);
            border-color: rgba(255,255,255,0.5);
        }
        .bulk-actions-buttons .btn.danger:hover {
            background: var(--danger);
            border-color: var(--danger);
        }
        .bulk-actions-buttons select {
            padding: 8px 12px;
            border: 1px solid rgba(255,255,255,0.3);
            border-radius: var(--radius-sm);
            background: transparent;
            color: white;
            font-size: var(--font-sm);
            cursor: pointer;
        }
        .bulk-actions-buttons select option {
            background: var(--gray-800);
            color: white;
        }
        
        /* Offline Indicator (v9.75) */
        .offline-indicator {
            display: none;
            position: fixed;
            top: 12px;
            right: 12px;
            background: var(--warning);
            color: var(--gray-900);
            padding: 8px 16px;
            border-radius: var(--radius-full);
            font-size: var(--font-sm);
            font-weight: 600;
            z-index: 1000;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            animation: pulse 2s infinite;
        }
        .offline-indicator.active {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .offline-indicator svg {
            width: 16px;
            height: 16px;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        
        /* Notification System (v9.75) */
        .notification-badge {
            position: absolute;
            top: 2px;
            right: 2px;
            background: var(--danger);
            color: white;
            font-size: 10px;
            font-weight: 700;
            min-width: 18px;
            height: 18px;
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
        }
        .notification-panel {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 8px;
            width: 360px;
            max-height: 400px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
            z-index: 1000;
            overflow: hidden;
        }
        .notification-panel.active {
            display: block;
        }
        .notification-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            background: var(--bg);
        }
        .notification-header h4 {
            margin: 0;
            font-size: var(--font-sm);
            font-weight: 600;
        }
        .notification-list {
            max-height: 340px;
            overflow-y: auto;
        }
        .notification-empty {
            padding: 32px 16px;
            text-align: center;
            color: var(--text-muted);
        }
        .notification-item {
            display: flex;
            gap: 12px;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            transition: background 0.15s;
        }
        .notification-item:hover {
            background: var(--bg-hover);
        }
        .notification-item:last-child {
            border-bottom: none;
        }
        .notification-icon {
            width: 32px;
            height: 32px;
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .notification-icon.warning {
            background: rgba(245, 158, 11, 0.15);
            color: var(--warning);
        }
        .notification-icon.danger {
            background: rgba(239, 68, 68, 0.15);
            color: var(--danger);
        }
        .notification-icon.info {
            background: rgba(59, 130, 246, 0.15);
            color: var(--blue);
        }
        .notification-content {
            flex: 1;
            min-width: 0;
        }
        .notification-content p {
            margin: 0 0 4px;
            font-size: var(--font-sm);
            line-height: 1.4;
        }
        .notification-content small {
            color: var(--text-muted);
            font-size: var(--font-xs);
        }
        .notification-dismiss {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
            opacity: 0;
            transition: opacity 0.15s;
        }
        .notification-item:hover .notification-dismiss {
            opacity: 1;
        }
        .notification-dismiss:hover {
            color: var(--danger);
        }
        
        /* Highlight animation for notifications (v9.75) */
        @keyframes highlight {
            0%, 100% { background: transparent; }
            25%, 75% { background: rgba(241, 90, 41, 0.15); }
        }
        
        /* Tags System (v9.75) */
        .tags-input-container {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding: 8px 12px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            min-height: 42px;
            align-items: center;
            cursor: text;
        }
        .tags-input-container:focus-within {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(241, 90, 41, 0.15);
        }
        .tags-list {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .tag-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            background: var(--accent);
            color: white;
            border-radius: var(--radius-full);
            font-size: var(--font-xs);
            font-weight: 500;
        }
        .tag-badge.hot-deal { background: var(--danger); }
        .tag-badge.needs-work { background: var(--warning); color: var(--gray-900); }
        .tag-badge.priority { background: var(--purple); }
        .tag-badge.consignment { background: var(--teal); }
        .tag-badge.trade-in { background: var(--blue); }
        .tag-badge button {
            background: none;
            border: none;
            color: inherit;
            padding: 0;
            margin-left: 2px;
            cursor: pointer;
            opacity: 0.7;
            font-size: 12px;
            line-height: 1;
        }
        .tag-badge button:hover {
            opacity: 1;
        }
        .tags-input {
            flex: 1;
            min-width: 120px;
            border: none;
            background: transparent;
            outline: none;
            font-size: var(--font-sm);
            padding: 4px 0;
        }
        .tags-suggestions {
            display: none;
            margin-top: 4px;
        }
        .tags-suggestions.active {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }
        .tags-suggestions button {
            padding: 4px 10px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: var(--radius-full);
            font-size: var(--font-xs);
            cursor: pointer;
            transition: all 0.15s;
        }
        .tags-suggestions button:hover {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }
        /* Tag display in table */
        .vehicle-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 4px;
        }
        .vehicle-tags .tag-badge {
            font-size: 10px;
            padding: 2px 6px;
        }
        
        /* Table Header - flex-shrink: 0 (stays fixed) */
        .table-header {
            display: grid;
            padding: 0 24px;
            background: var(--surface);
            border-bottom: 2px solid var(--border);
            flex-shrink: 0;
        }
        
        /* Inventory table columns: checkbox | vehicle | source | age | status | audited | acquisition | expenses | sold | profit | $/day | actions */
        .table-header.inventory {
            grid-template-columns: 40px 1fr 80px 55px 90px 50px 90px 85px 85px 85px 60px 70px;
        }
        
        /* Shop work orders columns */
        .table-header.workorders {
            grid-template-columns: 80px 80px 1fr 120px 100px 90px 90px 90px 70px;
        }
        
        /* Customers columns */
        .table-header.customers {
            grid-template-columns: 1fr 120px 1fr 100px 80px 70px;
        }
        
        /* Vendors columns */
        .table-header.vendors {
            grid-template-columns: 1fr 120px 120px 1fr 100px 70px;
        }
        
        .th {
            padding: 12px 8px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            user-select: none;
            transition: color 0.15s;
        }
        
        .th:hover { color: var(--text); }
        .th.sorted { color: var(--orange); }
        .th.right { justify-content: flex-end; }
        .th.center { justify-content: center; }
        .th.no-sort { cursor: default; }
        .th.no-sort:hover { color: var(--text-muted); }
        
        .sort-icon { opacity: 0.3; font-size: 10px; }
        .th.sorted .sort-icon { opacity: 1; }
        
        /* Table Body - flex: 1 + overflow (SCROLLS) */
        .table-container {
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;
            min-height: 0;
        }
        .table-body {
            flex: 1;
            overflow-y: auto;
            overflow-x: auto;
            min-height: 0;
        }
        
        .table-row {
            display: grid;
            padding: 0 24px;
            border-bottom: 1px solid var(--border);
            transition: background 0.1s;
            align-items: center;
        }
        
        .table-row.inventory {
            grid-template-columns: 40px 1fr 80px 55px 90px 50px 90px 85px 85px 85px 60px 70px;
        }
        
        .table-row.workorders {
            grid-template-columns: 80px 80px 1fr 120px 100px 90px 90px 90px 70px;
        }
        
        .table-row.customers {
            grid-template-columns: 1fr 120px 1fr 100px 80px 70px;
        }
        
        .table-row.vendors {
            grid-template-columns: 1fr 120px 120px 1fr 100px 70px;
        }
        
        .table-row:hover { background: var(--orange-light); }
        .table-row:nth-child(even) { background: var(--surface); }
        .table-row:nth-child(even):hover { background: var(--orange-light); }
        
        .table-row.shop-row:hover { background: var(--blue-light); }
        .table-row.shop-row:nth-child(even):hover { background: var(--blue-light); }
        
        .table-row.alert { background: var(--danger-light); }
        .table-row.alert:hover { background: #fecaca; }
        
        .td {
            padding: 14px 8px;
            font-size: 13px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .td.right { text-align: right; }
        .td.center { text-align: center; }
        
        /* Checkbox */
        .checkbox {
            width: 18px;
            height: 18px;
            border: 2px solid var(--border);
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
        }
        
        .checkbox:hover { border-color: var(--orange); }
        .checkbox.checked { background: var(--orange); border-color: var(--orange); }
        .checkbox svg { width: 12px; height: 12px; color: white; display: none; }
        .checkbox.checked svg { display: block; }
        
        /* Vehicle/Customer Info */
        .cell-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }
        
        .cell-primary {
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .cell-secondary {
            font-size: 11px;
            color: var(--text-muted);
            font-family: monospace;
        }
        
        /* Badges */
        .badge {
            display: inline-flex;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 600;
        }
        
        .badge-source { background: var(--orange); color: white; }
        
        /* DEPRECATED: Use .status-pill instead. This pattern is unused. */
        .badge-status {
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 11px;
        }
        
        .status-watching { background: #dbeafe; color: #1d4ed8; }
        .status-bidding { background: var(--warning-light); color: #b45309; }
        .status-won { background: var(--purple-light); color: var(--purple); }
        .status-listed { background: var(--success-light); color: var(--success); }
        .status-sold { background: #d1fae5; color: #047857; }
        
        .status-pending { background: var(--warning-light); color: #b45309; }
        .status-in-progress { background: #dbeafe; color: #1d4ed8; }
        .status-completed { background: var(--success-light); color: var(--success); }
        .status-invoiced { background: var(--purple-light); color: var(--purple); }
        
        .type-badge {
            display: inline-flex;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
        }
        
        .type-repair { background: #dbeafe; color: #1d4ed8; }
        .type-maintenance { background: var(--success-light); color: var(--success); }
        .type-inspection { background: var(--warning-light); color: #b45309; }
        .type-detail { background: var(--purple-light); color: var(--purple); }
        
        /* Money */
        .money { font-weight: 600; font-variant-numeric: tabular-nums; }
        .money.positive { color: var(--success); }
        .money.negative { color: var(--danger); }
        
        /* Velocity */
        .velocity {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .velocity-bar {
            width: 40px;
            height: 6px;
            background: var(--border);
            border-radius: 3px;
            overflow: hidden;
        }
        
        .velocity-fill {
            height: 100%;
            border-radius: 3px;
        }
        
        .velocity-hot { background: #ef4444; }
        .velocity-warm { background: #eab308; }
        .velocity-cold { background: #3b82f6; }
        
        .velocity-value {
            font-size: 12px;
            font-weight: 600;
            min-width: 32px;
        }
        
        /* Alert badge */
        .alert-badge {
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 600;
        }
        
        .alert-danger { background: var(--danger-light); color: var(--danger); }
        .alert-warning { background: var(--warning-light); color: #b45309; }
        
        /* Actions */
        .actions {
            display: flex;
            gap: 4px;
            opacity: 0;
            transition: opacity 0.15s;
        }
        
        .table-row:hover .actions { opacity: 1; }
        
        .action-btn {
            width: 28px;
            height: 28px;
            border: none;
            background: var(--surface);
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            transition: all 0.15s;
        }
        
        .action-btn:hover { background: var(--orange-light); color: var(--orange); }
        .shop-row .action-btn:hover { background: var(--blue-light); color: var(--blue); }
        .action-btn svg { width: 16px; height: 16px; }
        
        /* Work Order Number */
        .wo-number {
            font-weight: 700;
            color: var(--blue);
            cursor: pointer;
        }
        
        .wo-number:hover { text-decoration: underline; }
        
        /* ========================================
           TAB CONTENT
           ======================================== */
        .tab-content {
            display: none;
            flex: 1;
            flex-direction: column;
            overflow: hidden;
        }
        
        .tab-content.active {
            display: flex;
        }
        
        /* ========================================
           SETTINGS PANEL
           ======================================== */
        
        /* D16: Settings page layout */
        .settings-layout {
            padding: 24px;
            max-width: 820px;
        }
        
        /* Settings Tab Bar (v13.32.15) */
        .settings-tab-bar {
            display: flex;
            gap: 2px;
            padding: 0 24px;
            border-bottom: 2px solid var(--gray-200);
            background: var(--surface, white);
        }
        
        .settings-tab {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 20px;
            font-size: 14px;
            font-weight: 400;
            color: var(--text-muted);
            background: none;
            border: none;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            margin-bottom: -2px;
            transition: all 0.15s;
            font-family: inherit;
        }
        
        .settings-tab:hover {
            color: var(--text-primary, #334155);
        }
        
        .settings-tab.active {
            font-weight: 600;
            color: var(--accent);
            border-bottom-color: var(--accent);
        }
        
        .settings-tab svg {
            opacity: 0.5;
        }
        
        .settings-tab.active svg {
            opacity: 1;
            color: var(--accent);
        }
        
        #settings-page .settings-panel {
            display: none;
        }
        
        #settings-page .settings-panel.active {
            display: block;
        }
        
        .setting-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 0;
        }
        
        .setting-title {
            font-weight: 600;
        }
        
        .setting-desc {
            font-size: var(--font-sm);
            color: var(--text-muted);
        }
        
        .settings-section {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .settings-section h3 {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .settings-section h3 svg {
            width: 18px;
            height: 18px;
            color: var(--blue);
        }
        
        .settings-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }
        
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        
        .form-label {
            font-size: 12px;
            font-weight: 500;
            color: var(--text-muted);
        }
        
        .form-input {
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 14px;
            outline: none;
            transition: border-color 0.15s;
            font-family: inherit;
            width: 100%;
            box-sizing: border-box;
        }
        
        .form-input:focus { border-color: var(--blue); }
        
        /* Validation Error States (v9.75) */
        .form-input.field-error,
        .form-select.field-error,
        .form-textarea.field-error,
        input.field-error,
        select.field-error,
        textarea.field-error {
            border-color: var(--danger) !important;
            box-shadow: 0 0 0 3px var(--danger-light) !important;
            animation: shake 0.3s ease;
        }
        
        .form-input.field-error:focus,
        .form-select.field-error:focus,
        .form-textarea.field-error:focus {
            border-color: var(--danger) !important;
            box-shadow: 0 0 0 3px var(--danger-light) !important;
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-4px); }
            75% { transform: translateX(4px); }
        }
        
        .field-error-message {
            color: var(--danger);
            font-size: var(--font-sm);
            margin-top: 4px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .field-error-message svg {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
        }
        
        /* Technician List */
        .tech-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .tech-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: var(--bg);
            border-radius: 8px;
            transition: background 0.15s;
        }
        
        .tech-item[onclick]:hover {
            background: var(--gray-100);
        }
        
        .tech-avatar {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 13px;
            flex-shrink: 0;
        }
        
        .tech-info { flex: 1; }
        .tech-name { font-weight: 600; margin-bottom: 2px; }
        .tech-rate { font-size: 12px; color: var(--text-muted); }
        
        .tech-color-btn { transition: transform 0.1s, box-shadow 0.1s; }
        .tech-color-btn:hover { transform: scale(1.15); }
        .tech-color-btn.active { border-color: var(--gray-800) !important; box-shadow: 0 0 0 2px white, 0 0 0 4px var(--gray-400); }
        
        /* ========================================
           MODAL
           ======================================== */
        .modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        
        /* Vehicle modal should align to top for better scrolling */
        #vehicleModal {
            align-items: flex-start;
            padding-top: 40px;
            padding-bottom: 40px;
            overflow-y: auto;
        }
        
        .modal-overlay.active {
            display: flex;
            animation: modalOverlayIn 0.2s ease-out;
        }
        
        .modal-overlay.active > .modal,
        .modal-overlay.active > .modal-content {
            animation: modalContentIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }
        
        @keyframes modalOverlayIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes modalContentIn {
            from { opacity: 0; transform: scale(0.95) translateY(8px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }
        
        /* Ad Generator modal needs higher z-index to appear above other modals */
        #adGeneratorModal {
            z-index: 1100;
        }
        
        .modal,
        .modal-content {
            background: var(--bg);
            border-radius: 16px;
            width: 90%;
            max-width: 600px;
            max-height: 90vh;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            box-shadow: 0 25px 50px rgba(0,0,0,0.25);
        }
        
        .modal-content.modal-sm { max-width: 400px; }
        .modal-content.modal-md { max-width: 500px; }
        .modal-content.modal-lg { max-width: 800px; }
        .modal-content.modal-full { max-width: 95vw; max-height: 95vh; }
        
        .modal.large { max-width: 1000px; }
        
        .modal-header {
            padding: 20px 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;
        }
        
        .modal-close {
            width: 32px;
            height: 32px;
            border: none;
            background: var(--surface);
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
        }
        
        .modal-close:hover { background: var(--danger-light); color: var(--danger); }
        
        .modal-body {
            padding: 24px;
            overflow-y: auto;
            flex: 1;
            min-height: 0; /* Required for flex overflow to work */
        }
        
        .modal-footer {
            padding: 16px 24px;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: flex-end;
            gap: 12px;
        }
        
        /* ========================================
           MODAL TABS
           ======================================== */
        .modal-tabs {
            display: flex;
            gap: 0;
            padding: 0;
            background: var(--surface);
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }
        
        .modal-tab {
            flex: 1;
            padding: 14px 16px;
            border: none;
            background: transparent;
            color: var(--text-muted);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            position: relative;
            transition: all 0.15s;
            font-family: inherit;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .modal-tab svg {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }
        
        .modal-tab:hover { 
            color: var(--text);
            background: var(--gray-50);
        }
        
        .modal-tab.active { 
            color: var(--accent);
            background: var(--bg);
        }
        
        .modal-tab.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--accent);
        }
        
        .modal-tab-badge {
            background: var(--gray-200);
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 600;
        }
        
        .modal-tab.active .modal-tab-badge { 
            background: var(--accent-light); 
            color: var(--accent); 
        }
        
        .modal-tab-panel {
            display: none;
        }
        
        .modal-tab-panel.active {
            display: block;
        }
        
        /* Tabbed modal body padding adjustment */
        .modal-body.tabbed {
            padding: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden; /* Prevent body from scrolling */
        }
        
        /* Form wrapper in tabbed modal needs flex */
        .modal-body.tabbed form {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        
        .modal-body.tabbed .modal-tab-panel {
            padding: 24px;
            overflow-y: auto;
            flex: 1;
            min-height: 0;
        }
        
        .modal-body.tabbed .modal-tab-panel.active {
            display: block;
        }
        
        /* Dark mode for modal tabs */
        body.dark-mode .modal-tabs {
            background: var(--gray-800);
        }
        
        body.dark-mode .modal-tab:hover {
            background: var(--gray-700);
        }
        
        body.dark-mode .modal-tab.active {
            background: var(--bg);
        }
        
        body.dark-mode .modal-tab-badge {
            background: var(--gray-700);
        }
        
        .form-row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            margin-bottom: 16px;
        }
        
        .form-row.single { grid-template-columns: 1fr; }
        
        .form-group label {
            display: block;
            font-size: 12px;
            font-weight: 500;
            color: var(--text-muted);
            margin-bottom: 6px;
        }
        
        .form-group label.form-label {
            font-size: 13px;
            font-weight: 600;
            color: #374151;
            margin-bottom: 8px;
        }
        
        .form-group label.radio-option {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-weight: 400;
            color: #1a1a1a;
            cursor: pointer;
            margin-bottom: 0;
        }
        
        .form-group label.radio-option input[type="radio"] {
            width: auto;
            margin-right: 8px;
            padding: 0;
        }
        
        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 14px;
            font-family: inherit;
            outline: none;
        }
        
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            border-color: var(--orange);
        }
        
        /* ========================================
           EMPTY STATE
           ======================================== */
        .empty-state {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 48px;
            color: var(--text-muted);
            animation: pageFadeIn 0.3s ease-out;
        }
        
        .empty-state svg {
            width: 56px;
            height: 56px;
            margin-bottom: 16px;
            opacity: 0.4;
            padding: 16px;
            background: var(--gray-100);
            border-radius: 50%;
            box-sizing: content-box;
        }
        
        .empty-state h3 {
            font-size: 18px;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 6px;
        }
        
        .empty-state p { 
            margin-bottom: 24px; 
            max-width: 320px;
            text-align: center;
            line-height: 1.5;
        }
        
        /* ========================================
           UTILITIES
           ======================================== */
        .hidden { display: none !important; }
        
        /* Version Badge */
        .version-badge {
            display: none;
        }
        
        /* ========================================
           PORTED FROM V8.45
           ======================================== */
        
        /* Table Card (for Settlement, Archive pages) */
        .table-card {
            background: var(--bg-surface, #ffffff);
            border-radius: var(--radius-lg, 14px);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
            border: 1px solid var(--gray-100);
            overflow: hidden;
            margin: 24px;
        }
        
        .table-toolbar {
            padding: 20px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--gray-100);
            flex-wrap: wrap;
            gap: 12px;
            background: var(--bg-surface, #ffffff);
        }
        
        .table-title { 
            font-size: var(--font-lg); 
            font-weight: 700; 
            color: var(--gray-900); 
            margin: 0;
        }
        
        .table-actions { 
            display: flex; 
            gap: 8px; 
            flex-wrap: wrap; 
        }
        
        .table-wrapper { 
            overflow-x: auto;
            overflow-y: auto;
            max-height: calc(100vh - 300px);
        }
        
        .data-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .data-table thead {
            position: sticky;
            top: 0;
            z-index: var(--z-sticky, 10);
        }
        
        .data-table th {
            text-align: left;
            padding: 14px 16px;
            background: var(--gray-50);
            font-size: var(--font-sm);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--gray-500);
            border-bottom: 1px solid var(--gray-200);
            white-space: nowrap;
        }
        
        .data-table th.sortable {
            cursor: pointer;
            user-select: none;
            transition: background 0.15s, color 0.15s;
        }
        
        .data-table th.sortable:hover {
            background: var(--gray-100);
            color: var(--gray-700);
        }
        
        .data-table th.sortable.active {
            background: var(--accent-light);
            color: var(--accent);
        }
        
        .data-table th .sort-icon {
            display: inline-block;
            margin-left: 4px;
            font-size: 10px;
            opacity: 0.5;
            transition: opacity 0.15s;
        }
        
        .data-table th.sortable:hover .sort-icon {
            opacity: 0.8;
        }
        
        .data-table th.sortable.active .sort-icon {
            opacity: 1;
            color: var(--accent);
        }
        
        .data-table td {
            padding: 14px 16px;
            border-bottom: 1px solid var(--gray-100);
            vertical-align: middle;
            font-size: 13px;
        }
        
        .data-table tbody tr { transition: background 0.12s ease; }
        .data-table tbody tr:nth-child(even) { background: var(--surface); }
        .data-table tbody tr:hover { background: var(--orange-light); }
        .data-table tbody tr:nth-child(even):hover { background: var(--orange-light); }
        .data-table tbody tr.selected { background: var(--accent-light); }
        
        /* Financial cell utility — right-aligned monospace */
        .data-table td.mono,
        .data-table td[style*="text-align: right"] {
            font-family: 'SF Mono', 'Fira Code', monospace;
            font-size: 12px;
            letter-spacing: -0.02em;
        }
        
        /* Profit coloring utilities for table cells */
        .data-table td.profit-positive { color: var(--success); font-weight: 600; }
        .data-table td.profit-negative { color: var(--danger); font-weight: 600; }
        
        /* Settlement Grid */
        .settlement-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            padding: 24px;
        }
        
        /* Dark mode support */
        @media (prefers-color-scheme: dark) {
            :root {
                --bg-base: #0f1419;
                --bg-surface: #1a1f2e;
                --bg-elevated: #252d3d;
                --bg-hover: #313d52;
                --gray-50: #1a1f2e;
                --gray-100: #252d3d;
                --gray-200: #313d52;
                --gray-300: #4a5568;
                --gray-400: #718096;
                --gray-500: #a0aec0;
                --gray-600: #cbd5e0;
                --gray-700: #e2e8f0;
                --gray-800: #f7fafc;
                --gray-900: #ffffff;
                --shadow-sm: 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.3);
                --shadow-md: 0 4px 8px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.3);
                --shadow-lg: 0 12px 24px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.2);
            }
        }

        body.dark-mode {
            --bg: #0f1419;
            --bg-base: #0f1419;
            --bg-surface: #1a1f2e;
            --bg-elevated: #252d3d;
            --bg-hover: #313d52;
            --surface: #1a1f2e;
            --border: #313d52;
            --text: #f1f5f9;
            --text-muted: #94a3b8;
            --gray-50: #1a1f2e;
            --gray-100: #252d3d;
            --gray-200: #313d52;
            --gray-300: #4a5568;
            --gray-400: #718096;
            --gray-500: #a0aec0;
            --gray-600: #cbd5e0;
            --gray-700: #e2e8f0;
            --gray-800: #f7fafc;
            --gray-900: #ffffff;
            --shadow-sm: 0 2px 4px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.4);
            --shadow-md: 0 4px 8px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.4);
            --shadow-lg: 0 12px 24px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.3);
            /* Dark mode overrides for specific elements */
            --accent-light: #3d2517;
            --blue-light: #1e3a5f;
            --teal-light: #134e4a;
            --purple-light: #3b1f5e;
            --shop-light: #2e1f4e;
            --success-light: #14532d;
            --warning-light: #422006;
            --danger-light: #450a0a;
        }
        
        body.dark-mode .sidebar {
            background: linear-gradient(180deg, #1a1f2e 0%, #0f1419 100%);
            border-right-color: #252d3d;
        }
        
        body.dark-mode .form-input,
        body.dark-mode .form-select,
        body.dark-mode .form-textarea,
        body.dark-mode .filter-select {
            background: #1a1f2e;
            border-color: #313d52;
            color: #f1f5f9;
        }
        
        body.dark-mode .form-input:focus,
        body.dark-mode .form-select:focus,
        body.dark-mode .form-textarea:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(241, 90, 41, 0.2);
        }
        
        body.dark-mode .table-card,
        body.dark-mode .stat-card,
        body.dark-mode .modal,
        body.dark-mode .modal-content {
            background: #1a1f2e;
            border-color: #252d3d;
        }
        
        body.dark-mode .data-table th {
            background: #252d3d;
            border-color: #313d52;
        }
        
        body.dark-mode .data-table td {
            border-color: #252d3d;
        }
        
        body.dark-mode .data-table tr:hover td {
            background: var(--orange-light);
        }
        
        body.dark-mode .btn-secondary {
            background: #252d3d;
            border-color: #313d52;
            color: #e2e8f0;
        }
        
        body.dark-mode .btn-secondary:hover {
            background: #313d52;
        }
        
        body.dark-mode .modal-overlay {
            background: rgba(0, 0, 0, 0.8);
        }
        
        body.dark-mode .header {
            background: linear-gradient(135deg, #1a1f2e 0%, #252d3d 100%);
            border-color: #313d52;
        }
        
        body.dark-mode .expense-item,
        body.dark-mode .checklist-item {
            background: #252d3d;
        }
        
        body.dark-mode .prediction-card {
            background: linear-gradient(135deg, #1e3a5f 0%, #1a1f2e 100%);
        }
        
        body.dark-mode .notification-panel {
            background: #1a1f2e;
            border-color: #313d52;
        }
        
        body.dark-mode .notification-item {
            border-color: #252d3d;
        }
        
        body.dark-mode .tag-suggestions {
            background: #1a1f2e;
            border-color: #313d52;
        }
        
        body.dark-mode .tag-suggestion-item:hover {
            background: #252d3d;
        }
        
        body.dark-mode .custom-field-item {
            background: #252d3d;
        }
        
        body.dark-mode ::placeholder {
            color: #64748b;
        }
        
        /* Toggle Switch (v9.75) */
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 48px;
            height: 26px;
        }
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--gray-300);
            transition: 0.3s;
            border-radius: 26px;
        }
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: 0.3s;
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        .toggle-switch input:checked + .toggle-slider {
            background-color: var(--accent);
        }
        .toggle-switch input:checked + .toggle-slider:before {
            transform: translateX(22px);
        }
        
        /* Template Items (v9.75) */
        .template-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px;
            background: var(--bg);
            border-radius: var(--radius-sm);
            margin-bottom: 8px;
            border: 1px solid var(--gray-100);
        }
        .template-item:hover {
            border-color: var(--gray-200);
        }
        .template-info {
            flex: 1;
        }
        .template-name {
            font-weight: 600;
            margin-bottom: 2px;
        }
        .template-details {
            font-size: var(--font-sm);
            color: var(--text-muted);
        }
        .template-actions {
            display: flex;
            gap: 8px;
        }
        .template-empty {
            text-align: center;
            padding: 24px;
            color: var(--text-muted);
            font-size: var(--font-sm);
        }
        
        /* Calculator Tabs (v9.75) */
        /* D15: Calculator mode toggle */
        .calc-mode-toggle {
            display: flex;
            background: var(--gray-100);
            border-radius: 8px;
            padding: 3px;
        }
        .calc-mode-toggle .tab-btn {
            padding: 7px 18px;
            border-radius: 6px;
            border: none;
            background: transparent;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-muted);
            cursor: pointer;
            transition: background 0.15s, color 0.15s, box-shadow 0.15s;
            font-family: inherit;
        }
        .calc-mode-toggle .tab-btn:hover {
            color: var(--text);
        }
        .calc-mode-toggle .tab-btn.active {
            background: var(--surface);
            color: var(--text);
            font-weight: 600;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .calc-tab {
            flex: 1;
            padding: 12px 16px;
            background: none;
            border: none;
            border-bottom: 2px solid transparent;
            font-size: var(--font-sm);
            font-weight: 600;
            color: var(--text-muted);
            cursor: pointer;
            transition: var(--transition-normal);
        }
        .calc-tab:hover {
            color: var(--text);
            background: var(--gray-50);
        }
        .calc-tab.active {
            color: var(--accent);
            border-bottom-color: var(--accent);
        }
        .calc-panel {
            display: none;
        }
        .calc-panel.active {
            display: block;
        }
        .compare-column {
            padding: 12px;
            background: var(--surface);
            border-radius: var(--radius-sm);
            border: 1px solid var(--gray-100);
        }
        
        /* Photo Management (v9.75) */
        .photo-upload-area {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 32px 24px;
            border: 2px dashed var(--gray-300);
            border-radius: var(--radius-lg);
            background: var(--gray-50);
            cursor: pointer;
            transition: var(--transition-normal);
        }
        .photo-upload-area:hover {
            border-color: var(--accent);
            background: var(--accent-light);
        }
        .photo-upload-area.drag-over {
            border-color: var(--accent);
            background: var(--accent-light);
            transform: scale(1.01);
        }
        .photo-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 12px;
            margin-top: 16px;
        }
        .media-local-notice {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 8px;
            padding: 6px 10px;
            font-size: 11px;
            color: #92400e;
            background: #fffbeb;
            border: 1px solid #fde68a;
            border-radius: 6px;
            line-height: 1.4;
        }
        body.dark-mode .media-local-notice {
            color: #fbbf24;
            background: rgba(251, 191, 36, 0.08);
            border-color: rgba(251, 191, 36, 0.2);
        }
        .photo-item {
            position: relative;
            aspect-ratio: 1;
            border-radius: var(--radius-md);
            overflow: hidden;
            background: var(--gray-100);
            cursor: pointer;
            transition: var(--transition-normal);
        }
        .photo-item:hover {
            transform: scale(1.02);
            box-shadow: var(--shadow-md);
        }
        .photo-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .photo-item .photo-actions {
            position: absolute;
            top: 4px;
            right: 4px;
            display: flex;
            gap: 4px;
            opacity: 0;
            transition: var(--transition-fast);
        }
        .photo-item:hover .photo-actions {
            opacity: 1;
        }
        .photo-action-btn {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: rgba(0,0,0,0.6);
            color: white;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition-fast);
        }
        .photo-action-btn:hover {
            background: rgba(0,0,0,0.8);
        }
        .photo-action-btn.primary {
            background: var(--accent);
        }
        .photo-action-btn.delete {
            background: var(--danger);
        }
        .photo-item.is-primary {
            border: 3px solid var(--accent);
        }
        .photo-item.is-primary::after {
            content: '★';
            position: absolute;
            bottom: 4px;
            left: 4px;
            background: var(--accent);
            color: white;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }
        
        /* Document List Styles */
        .document-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 16px;
        }
        .document-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            transition: var(--transition-fast);
        }
        .document-item:hover {
            border-color: var(--accent);
            background: var(--gray-50);
        }
        .document-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            background: var(--gray-100);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .document-icon svg {
            width: 20px;
            height: 20px;
            color: var(--gray-500);
        }
        .document-icon.pdf { background: #fee2e2; }
        .document-icon.pdf svg { color: #dc2626; }
        .document-icon.image { background: #dbeafe; }
        .document-icon.image svg { color: #2563eb; }
        .document-info {
            flex: 1;
            min-width: 0;
        }
        .document-name {
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .document-meta {
            font-size: 12px;
            color: var(--text-muted);
        }
        .document-actions {
            display: flex;
            gap: 4px;
        }
        
        /* Pricing Sub-tabs (Mini Tabs) */
        .pricing-subtabs {
            display: flex;
            gap: 4px;
            padding: 4px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .pricing-subtab {
            flex: 1;
            padding: 10px 12px;
            text-align: center;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-muted);
            background: transparent;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.15s;
            font-family: inherit;
        }
        .pricing-subtab:hover {
            color: var(--text);
            background: var(--gray-50);
        }
        .pricing-subtab.active {
            background: var(--accent);
            color: white;
        }
        .pricing-subtab-panel {
            display: none;
        }
        .pricing-subtab-panel.active {
            display: block;
        }
        
        .photo-lightbox {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition-normal);
        }
        .photo-lightbox.active {
            opacity: 1;
            visibility: visible;
        }
        .photo-lightbox img {
            max-width: 90%;
            max-height: 90%;
            object-fit: contain;
            border-radius: var(--radius-md);
        }
        .photo-lightbox-close {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 48px;
            height: 48px;
            background: rgba(255,255,255,0.1);
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 24px;
            cursor: pointer;
            transition: var(--transition-fast);
        }
        .photo-lightbox-close:hover {
            background: rgba(255,255,255,0.2);
        }
        .photo-lightbox-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 48px;
            height: 48px;
            background: rgba(255,255,255,0.1);
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 20px;
            cursor: pointer;
            transition: var(--transition-fast);
        }
        .photo-lightbox-nav:hover {
            background: rgba(255,255,255,0.2);
        }
        .photo-lightbox-nav.prev { left: 20px; }
        .photo-lightbox-nav.next { right: 20px; }
        
        body.dark-mode .photo-upload-area {
            background: var(--gray-100);
            border-color: var(--gray-300);
        }
        body.dark-mode .photo-upload-area:hover {
            background: #3d2517;
            border-color: var(--accent);
        }
        body.dark-mode .photo-item {
            background: var(--gray-200);
        }
        
        /* Filter Bar */
        .filter-bar {
            padding: 16px 24px;
            display: flex;
            gap: 10px;
            border-bottom: 1px solid var(--gray-100);
            flex-wrap: wrap;
            align-items: center;
        }
        
        .filter-dropdowns {
            display: flex;
            gap: 8px;
            padding: 12px 24px;
            background: var(--gray-50);
            border-bottom: 1px solid var(--gray-100);
            flex-wrap: wrap;
            align-items: center;
            flex-shrink: 0;
        }
        
        .filter-dropdowns label {
            font-size: var(--font-sm);
            font-weight: 600;
            color: var(--gray-500);
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }
        
        .filter-select {
            padding: 6px 28px 6px 10px;
            font-size: var(--font-base);
            font-family: inherit;
            color: var(--gray-700);
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-sm);
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 8px center;
            min-width: 100px;
        }
        
        .filter-select:hover {
            border-color: var(--gray-300);
        }
        
        .filter-select:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-light);
        }
        
        .filter-select.active {
            border-color: var(--accent);
            background-color: var(--accent-light);
        }
        
        .filter-group {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .filter-dropdown {
            position: relative;
        }
        
        .filter-dropdown-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 180px;
            max-height: 340px;
            overflow-y: auto;
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-md);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 100;
            padding: 8px;
        }
        
        .filter-dropdown-menu.show {
            display: block;
        }
        
        /* Filter checkbox options */
        .filter-option {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            font-size: 13px;
            color: var(--text-primary);
            cursor: pointer;
            border-radius: var(--radius-sm);
            transition: background 0.15s ease;
        }
        
        .filter-option:hover {
            background: var(--gray-100);
        }
        
        .filter-option input[type="checkbox"] {
            width: 16px;
            height: 16px;
            accent-color: var(--orange);
            cursor: pointer;
            flex-shrink: 0;
        }
        
        .filter-option span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        /* Filter containers - NO scroll here, parent .filter-dropdown-menu handles it */
        #yearFiltersContainer,
        #makeFiltersContainer,
        #modelFiltersContainer,
        #sourceFiltersContainer {
            /* Parent .filter-dropdown-menu already has max-height and overflow-y */
        }
        
        /* ============================================
         * UNIVERSAL DEAL FILTER BAR
         * ============================================ */
        .deal-filter-bar {
            padding: 10px 24px;
            background: var(--gray-50);
            border-bottom: 1px solid var(--gray-100);
            flex-shrink: 0;
        }
        .df-row {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .df-search {
            position: relative;
            flex: 1;
            min-width: 200px;
            max-width: 340px;
        }
        .df-search-icon {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            width: 15px;
            height: 15px;
            color: var(--gray-400);
            pointer-events: none;
        }
        .df-search-input {
            width: 100%;
            padding: 7px 30px 7px 32px;
            font-size: 13px;
            font-family: inherit;
            border: 1px solid var(--gray-200);
            border-radius: 8px;
            background: white;
            color: var(--text);
            outline: none;
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        .df-search-input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-light);
        }
        .df-search-input::placeholder { color: var(--gray-400); }
        .df-search-clear {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            font-size: 18px;
            color: var(--gray-400);
            cursor: pointer;
            padding: 0 4px;
            line-height: 1;
        }
        .df-search-clear:hover { color: var(--gray-600); }
        
        /* Source pills */
        .df-pills {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }
        .df-pill {
            padding: 5px 12px;
            font-size: 12px;
            font-weight: 600;
            font-family: inherit;
            border: 1px solid var(--gray-200);
            border-radius: 100px;
            background: white;
            color: var(--gray-600);
            cursor: pointer;
            transition: all 0.15s;
        }
        .df-pill:hover { border-color: var(--gray-300); background: var(--gray-50); }
        .df-pill.active {
            border-color: var(--accent);
            background: var(--accent-light);
            color: var(--accent);
        }
        
        /* More Filters button */
        .df-more-btn {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 5px 12px;
            font-size: 12px;
            font-weight: 600;
            font-family: inherit;
            border: 1px solid var(--gray-200);
            border-radius: 8px;
            background: white;
            color: var(--gray-600);
            cursor: pointer;
            transition: all 0.15s;
        }
        .df-more-btn:hover { border-color: var(--gray-300); }
        .df-more-btn.active {
            border-color: var(--accent);
            background: var(--accent-light);
            color: var(--accent);
        }
        .df-count {
            background: var(--accent);
            color: white;
            font-size: 10px;
            font-weight: 700;
            padding: 1px 6px;
            border-radius: 8px;
        }
        
        /* Clear all */
        .df-clear-btn {
            padding: 5px 10px;
            font-size: 12px;
            font-weight: 500;
            font-family: inherit;
            border: none;
            background: none;
            color: var(--gray-500);
            cursor: pointer;
            text-decoration: underline;
            text-underline-offset: 2px;
        }
        .df-clear-btn:hover { color: var(--accent); }
        
        /* Expanded filter row */
        .df-expanded {
            display: flex;
            gap: 12px;
            margin-top: 10px;
            flex-wrap: wrap;
        }
        .df-dropdown {
            position: relative;
        }
        .df-dropdown-label {
            display: block;
            font-size: 10px;
            font-weight: 600;
            color: var(--gray-500);
            text-transform: uppercase;
            letter-spacing: 0.03em;
            margin-bottom: 3px;
        }
        .df-dropdown-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 28px 6px 10px;
            font-size: 13px;
            font-family: inherit;
            color: var(--gray-700);
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: 6px;
            cursor: pointer;
            min-width: 110px;
            position: relative;
        }
        .df-dropdown-btn svg {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
        }
        .df-dropdown-btn:hover { border-color: var(--gray-300); }
        .df-dropdown-btn.active {
            border-color: var(--accent);
            background: var(--accent-light);
            color: var(--accent);
        }
        .df-dropdown-clear {
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            font-weight: 600;
            color: var(--accent);
            background: rgba(241, 90, 41, 0.12);
            border-radius: 50%;
            line-height: 1;
            cursor: pointer;
            transition: background 0.15s;
        }
        .df-dropdown-clear:hover {
            background: rgba(241, 90, 41, 0.25);
        }
        .df-dropdown-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 180px;
            max-height: 300px;
            overflow-y: auto;
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
            z-index: 200;
            padding: 6px;
            margin-top: 4px;
        }
        .df-dropdown-menu.show { display: block; }
        .df-option {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 10px;
            font-size: 13px;
            cursor: pointer;
            border-radius: 4px;
        }
        .df-option:hover { background: var(--gray-50); }
        .df-option input[type="checkbox"] {
            width: 15px;
            height: 15px;
            accent-color: var(--orange);
            cursor: pointer;
        }
        .df-option-empty {
            padding: 12px;
            font-size: 12px;
            color: var(--gray-400);
            text-align: center;
        }
        
        /* Active filter tags */
        .df-tags {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-top: 8px;
        }
        .df-tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            font-size: 11px;
            font-weight: 500;
            color: var(--accent);
            background: var(--accent-light);
            border-radius: 4px;
        }
        .df-tag button {
            background: none;
            border: none;
            color: var(--accent);
            font-size: 14px;
            cursor: pointer;
            padding: 0 2px;
            line-height: 1;
            opacity: 0.7;
        }
        .df-tag button:hover { opacity: 1; }

        /* Dark mode */
        body.dark-mode .deal-filter-bar { background: var(--gray-800); border-color: var(--gray-700); }
        body.dark-mode .df-search-input { background: var(--gray-900); border-color: var(--gray-700); color: var(--gray-200); }
        body.dark-mode .df-pill { background: var(--gray-900); border-color: var(--gray-700); color: var(--gray-400); }
        body.dark-mode .df-pill.active { background: rgba(234,88,12,0.15); }
        body.dark-mode .df-more-btn { background: var(--gray-900); border-color: var(--gray-700); color: var(--gray-400); }
        body.dark-mode .df-dropdown-btn { background: var(--gray-900); border-color: var(--gray-700); color: var(--gray-300); }
        body.dark-mode .df-dropdown-clear { background: rgba(241, 90, 41, 0.2); }
        body.dark-mode .df-dropdown-clear:hover { background: rgba(241, 90, 41, 0.35); }
        body.dark-mode .df-dropdown-menu { background: var(--gray-900); border-color: var(--gray-700); }
        body.dark-mode .df-option:hover { background: var(--gray-800); }
        body.dark-mode .df-tag { background: rgba(234,88,12,0.15); }
        
        .dropdown-item {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding: 10px 12px;
            font-size: var(--font-base);
            color: var(--gray-700);
            background: transparent;
            border: none;
            border-radius: var(--radius-sm);
            cursor: pointer;
            text-align: left;
            transition: var(--transition-fast);
        }
        
        .dropdown-item:hover {
            background: var(--gray-100);
            color: var(--gray-900);
        }
        
        .dropdown-item svg {
            color: var(--gray-500);
        }
        
        .dropdown-item:hover svg {
            color: var(--accent);
        }
        
        .filter-clear-btn {
            padding: 6px 12px;
            font-size: var(--font-sm);
            font-weight: 500;
            color: var(--gray-500);
            background: transparent;
            border: 1px dashed var(--gray-300);
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-family: inherit;
            transition: var(--transition-fast);
        }
        
        .filter-clear-btn:hover {
            color: var(--danger);
            border-color: var(--danger);
            background: var(--danger-light);
        }

        .filter-chip {
            padding: 8px 14px;
            font-size: var(--font-base);
            font-weight: 500;
            color: var(--gray-600);
            background: var(--bg-elevated);
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-xl);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-family: inherit;
            transition: var(--transition-fast);
        }

        .filter-chip:hover { border-color: var(--gray-300); background: var(--bg-hover); }
        .filter-chip.active { background: var(--accent-light); border-color: var(--accent); color: var(--accent-dark); }
        .filter-chip.danger { background: var(--danger-light); border-color: var(--danger); color: var(--danger); }
        .filter-chip svg { width: 14px; height: 14px; }

        /* Unified Compact Filter Panel */
        .unified-filter-bar {
            position: relative;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .unified-filter-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            background: var(--bg-surface);
            border: 1.5px solid var(--gray-200);
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: var(--font-base);
            font-weight: 500;
            color: var(--gray-700);
            transition: var(--transition-normal);
            font-family: inherit;
        }

        .unified-filter-btn:hover {
            border-color: var(--accent);
            background: var(--accent-light);
            color: var(--accent-dark);
        }

        .unified-filter-btn svg {
            width: 16px;
            height: 16px;
        }

        .filter-chevron {
            transition: transform 0.3s ease;
            width: 14px !important;
            height: 14px !important;
        }

        .unified-filter-bar.active .filter-chevron {
            transform: rotate(180deg);
        }

        .filter-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--accent);
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: var(--font-sm);
            font-weight: 600;
            margin-left: -6px;
        }

        .unified-filter-panel {
            position: fixed;
            background: var(--bg-surface);
            border: 1.5px solid var(--gray-200);
            border-radius: var(--radius-md);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
            width: 380px;
            max-height: 600px;
            overflow-y: auto;
            z-index: var(--z-modal);
            display: none;
            animation: slideDown 0.25s ease;
            padding: 14px;
        }

        .unified-filter-bar.active .unified-filter-panel {
            display: block;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Filter Sections */
        .filter-section {
            margin-bottom: 12px;
            padding-bottom: 12px;
            padding-top: 12px;
            border-top: 1px solid var(--gray-200);
        }

        .filter-section:first-child {
            border-top: none;
            padding-top: 0;
        }

        .filter-section:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .filter-section-title {
            font-size: var(--font-sm);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--gray-500);
            margin-bottom: 8px;
            padding: 0 4px;
        }

        /* Compact Selects in Filter Panel */
        .filter-select.compact {
            width: 100%;
            padding: 6px 10px;
            margin-bottom: 6px;
            font-size: var(--font-base);
            border-radius: var(--radius-sm);
        }

        .filter-select.compact:last-child {
            margin-bottom: 0;
        }

        /* Compact Filter Items */
        .compact-filter-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 8px;
            cursor: pointer;
            border-radius: var(--radius-sm);
            transition: background 0.15s ease;
            user-select: none;
            font-size: var(--font-base);
            color: var(--gray-700);
            margin-bottom: 4px;
            position: relative;
        }

        .compact-filter-item:hover {
            background: var(--gray-50);
        }

        .compact-filter-item input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            width: 1px;
            height: 1px;
            overflow: hidden;
        }

        .compact-filter-item .filter-checkmark {
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1.5px solid var(--gray-300);
            border-radius: var(--radius-xs);
            font-size: var(--font-sm);
            color: transparent;
            transition: var(--transition-fast);
            flex-shrink: 0;
            background: white;
        }

        .compact-filter-item input[type="checkbox"]:checked + .filter-checkmark {
            background: var(--accent);
            border-color: var(--accent);
            color: white;
        }

        /* Filter Checkboxes Container */
        .filter-checkboxes-container {
            display: flex;
            flex-direction: column;
            gap: 4px;
            max-height: 200px;
            overflow-y: auto;
            padding-right: 6px;
        }

        .filter-checkboxes-container::-webkit-scrollbar {
            width: 6px;
        }

        .filter-checkboxes-container::-webkit-scrollbar-track {
            background: transparent;
        }

        .filter-checkboxes-container::-webkit-scrollbar-thumb {
            background: var(--gray-300);
            border-radius: var(--radius-xs);
        }

        .filter-checkboxes-container::-webkit-scrollbar-thumb:hover {
            background: var(--gray-400);
        }

        /* Filter Divider */
        .filter-section-divider {
            height: 1px;
            background: var(--gray-100);
            margin: 8px 0;
        }

        /* Clear All Button */
        .filter-clear-all-btn {
            width: 100%;
            padding: 8px 12px;
            border: none;
            background: transparent;
            color: var(--gray-500);
            cursor: pointer;
            font-size: var(--font-base);
            font-weight: 600;
            transition: var(--transition-fast);
            border-radius: var(--radius-sm);
            font-family: inherit;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }

        .filter-clear-all-btn:hover {
            background: var(--danger-light);
            color: var(--danger);
        }

        /* Cell Styles */
        .cell-vehicle { display: flex; align-items: center; gap: 14px; }

        .vehicle-thumb {
            width: 48px;
            height: 48px;
            border-radius: var(--radius-md);
            background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-xs);
            font-weight: 700;
            color: var(--gray-500);
            flex-shrink: 0;
        }

        .vehicle-info h4 {
            font-weight: 600;
            font-size: var(--font-base);
            color: var(--gray-900);
            margin-bottom: 2px;
        }

        .vehicle-vin {
            font-family: 'SF Mono', monospace;
            font-size: var(--font-sm);
            color: var(--gray-400);
        }

        .cell-money {
            font-family: 'SF Mono', monospace;
            font-weight: 500;
            font-size: var(--font-base);
            color: var(--gray-800);
        }

        .cell-money.success { color: var(--success); }
        .cell-money.warning { color: var(--warning); }
        .cell-money.danger { color: var(--danger); }
        .cell-money.muted { color: var(--gray-300); }

        /* ========================================
           STATUS PILL — Universal Status Component
           The single source of truth for status badges.
           Usage: <span class="status-pill watching"><span class="dot"></span>watching</span>
           Sizes: .status-pill.sm (compact for tables)
           ======================================== */
        .status-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: var(--radius-xl);
            font-size: var(--font-sm);
            font-weight: 600;
            text-transform: capitalize;
            transition: opacity 0.15s ease, transform 0.15s ease;
            white-space: nowrap;
            line-height: 1;
        }

        .status-pill .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

        /* Compact variant for table cells */
        .status-pill.sm { padding: 3px 8px; font-size: 11px; gap: 4px; }
        .status-pill.sm .dot { width: 5px; height: 5px; }

        /* Vehicle statuses */
        .status-pill.watching { background: var(--gray-100); color: var(--gray-600); }
        .status-pill.watching .dot { background: var(--gray-400); }
        .status-pill.bidding { background: var(--warning-light); color: #b45309; }
        .status-pill.bidding .dot { background: #f59e0b; }
        .status-pill.won { background: var(--blue-light); color: #1d4ed8; }
        .status-pill.won .dot { background: var(--blue); }
        .status-pill.listed { background: #f3e8ff; color: var(--shop-primary); }
        .status-pill.listed .dot { background: var(--teal); }
        .status-pill.sold { background: var(--success-light); color: var(--success-dark); }
        .status-pill.sold .dot { background: var(--success); }
        .status-pill.personal { background: #e0e7ff; color: #4338ca; }
        .status-pill.personal .dot { background: #6366f1; }
        .status-pill.refunded { background: #fecaca; color: #991b1b; }
        .status-pill.refunded .dot { background: #dc2626; }
        .status-pill.archived { background: var(--gray-100); color: var(--gray-500); }
        .status-pill.archived .dot { background: var(--gray-400); }

        /* Work Order Status Pills */
        .status-pill.estimate { background: var(--gray-100); color: var(--gray-600); }
        .status-pill.estimate .dot { background: var(--gray-400); }
        .status-pill.scheduled { background: var(--blue-light); color: #1d4ed8; }
        .status-pill.scheduled .dot { background: var(--blue); }
        .status-pill.in-progress { background: var(--warning-light); color: #b45309; }
        .status-pill.in-progress .dot { background: #f59e0b; }
        .status-pill.complete { background: var(--success-light); color: var(--success-dark); }
        .status-pill.complete .dot { background: var(--success); }
        .status-pill.paid { background: #e0e7ff; color: #4338ca; }
        .status-pill.paid .dot { background: #6366f1; }

        /* Generic semantic variants (for use anywhere) */
        .status-pill.info { background: var(--blue-light); color: #1d4ed8; }
        .status-pill.info .dot { background: var(--blue); }
        .status-pill.success { background: var(--success-light); color: var(--success-dark); }
        .status-pill.success .dot { background: var(--success); }
        .status-pill.warning { background: var(--warning-light); color: #b45309; }
        .status-pill.warning .dot { background: #f59e0b; }
        .status-pill.danger { background: #fecaca; color: #991b1b; }
        .status-pill.danger .dot { background: #dc2626; }

        .status-pill.clickable { cursor: pointer; }
        .status-pill.clickable:hover { opacity: 0.85; transform: scale(1.04); }

        .signal-tag {
            font-size: var(--font-sm);
            font-weight: 700;
            padding: 4px 10px;
            border-radius: var(--radius-sm);
        }

        .signal-tag.go { background: var(--success-light); color: var(--success-dark); }
        .signal-tag.over { background: var(--danger-light); color: var(--danger); }

        .source-badge {
            font-size: var(--font-sm);
            font-weight: 600;
            padding: 4px 8px;
            border-radius: var(--radius-sm);
            background: var(--blue-light);
            color: var(--blue);
        }

        .velocity-badge {
            font-size: var(--font-sm);
            font-weight: 600;
            padding: 4px 8px;
            border-radius: var(--radius-sm);
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .velocity-badge.fast { background: var(--success-light); color: var(--success-dark); }
        .velocity-badge.medium { background: var(--warning-light); color: #b45309; }
        .velocity-badge.slow { background: var(--danger-light); color: var(--danger); }

        /* Inventory Aging Badges */
        .aging-badge {
            font-size: var(--font-xs);
            font-weight: 700;
            font-family: 'SF Mono', Monaco, monospace;
            padding: 3px 8px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            gap: 3px;
            min-width: 42px;
            justify-content: center;
        }
        
        .aging-badge.aging-green { 
            background: #dcfce7; 
            color: #166534; 
        }
        .aging-badge.aging-yellow { 
            background: #fef9c3; 
            color: #a16207; 
        }
        .aging-badge.aging-orange { 
            background: #ffedd5; 
            color: #c2410c; 
        }
        .aging-badge.aging-red { 
            background: #fee2e2; 
            color: #dc2626;
            animation: pulse-subtle 2s infinite;
        }
        
        @keyframes pulse-subtle {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        .break-even-badge {
            font-size: var(--font-sm);
            font-weight: 700;
            padding: 4px 8px;
            border-radius: var(--radius-sm);
            display: inline-flex;
            align-items: center;
            gap: 4px;
            animation: pulse 2s infinite;
        }

        .break-even-badge.danger { background: var(--danger); color: white; }
        .break-even-badge.warning { background: var(--warning); color: white; }

        /* Alert icons - cleaner SVG design */
        .alert-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .alert-icon.danger svg {
            filter: drop-shadow(0 1px 2px rgba(220, 38, 38, 0.3));
        }
        .alert-icon.warning svg {
            filter: drop-shadow(0 1px 2px rgba(245, 158, 11, 0.3));
        }

        /* Audited badge */
        .audited-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .audited-badge.not-audited {
            opacity: 0.4;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        .row-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; justify-content: flex-end; }
        .data-table tbody tr:hover .row-actions { opacity: 1; }
        .table-row:hover .row-actions { opacity: 1; }

        .icon-btn {
            width: 28px;
            height: 28px;
            border-radius: var(--radius-sm);
            background: var(--surface);
            border: 1px solid var(--border);
            color: var(--text-muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
            padding: 0;
        }
        .icon-btn svg {
            width: 14px;
            height: 14px;
        }
        .icon-btn:hover {
            background: var(--blue-light);
            border-color: var(--blue);
            color: var(--blue);
        }
        .icon-btn.danger:hover {
            background: var(--danger-light);
            border-color: var(--danger);
            color: var(--danger);
        }

        .row-action {
            width: 32px;
            height: 32px;
            border-radius: var(--radius-sm);
            background: transparent;
            border: none;
            color: var(--gray-400);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition-fast);
        }

        .row-action:hover { background: var(--accent-light); color: var(--accent); }
        .row-action.danger:hover { background: var(--danger-light); color: var(--danger); }
        .row-action.success:hover { background: var(--success-light); color: var(--success); }
        .row-action.warning:hover { background: var(--warning-light); color: #d97706; }
        .row-action svg { width: 16px; height: 16px; }

        /* Ad Generator Modal */
        .ad-generator-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: var(--z-modal);
            overflow-y: auto;
            padding: 20px;
        }

        .ad-generator-modal.active {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding-top: 40px;
        }

        .ad-generator-content {
            background: var(--bg-surface);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
            max-width: 800px;
            width: 100%;
            padding: 32px;
            max-height: 85vh;
            overflow-y: auto;
        }

        .ad-generator-header {
            margin-bottom: 24px;
            border-bottom: 1px solid var(--gray-200);
            padding-bottom: 16px;
        }

        .ad-generator-header h2 {
            font-size: var(--font-xl);
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: 4px;
        }

        .ad-generator-subtitle {
            color: var(--gray-500);
            font-size: var(--font-base);
        }

        .ad-form-group {
            margin-bottom: 20px;
        }

        .ad-form-group label {
            display: block;
            font-weight: 500;
            color: var(--gray-700);
            margin-bottom: 8px;
            font-size: var(--font-base);
        }

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

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

        .ad-form-input {
            padding: 10px 12px;
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-sm);
            font-size: var(--font-base);
            font-family: inherit;
        }

        .ad-form-input:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-light);
        }

        .ad-form-textarea {
            padding: 10px 12px;
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-sm);
            font-size: var(--font-base);
            font-family: inherit;
            min-height: 80px;
            resize: vertical;
        }

        .ad-form-textarea:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-light);
        }

        .ad-checkbox-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

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

        .ad-checkbox-item input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: var(--accent);
        }

        .ad-checkbox-item label {
            margin: 0;
            cursor: pointer;
            font-weight: 400;
        }

        .ad-output-section {
            background: var(--gray-100);
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-sm);
            padding: 16px;
            margin: 20px 0;
            max-height: 300px;
            overflow-y: auto;
            font-family: 'Monaco', 'Menlo', monospace;
            font-size: var(--font-base);
            line-height: 1.6;
            white-space: pre-wrap;
            word-break: break-word;
            color: var(--gray-800);
        }

        .ad-buttons {
            display: flex;
            gap: 12px;
            margin-top: 24px;
            border-top: 1px solid var(--gray-200);
            padding-top: 16px;
        }

        .ad-btn {
            flex: 1;
            padding: 10px 16px;
            border: none;
            border-radius: var(--radius-sm);
            font-weight: 500;
            cursor: pointer;
            font-size: var(--font-base);
            transition: var(--transition-normal);
        }

        .ad-btn-primary {
            background: var(--accent);
            color: white;
        }

        .ad-btn-primary:hover {
            background: var(--accent-dark);
        }

        .ad-btn-secondary {
            background: var(--gray-200);
            color: var(--gray-800);
        }

        .ad-btn-secondary:hover {
            background: var(--gray-300);
        }

        .ad-step-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 20px;
            border-bottom: 2px solid var(--gray-200);
        }

        .ad-step-tab {
            padding: 12px 16px;
            border: none;
            background: none;
            cursor: pointer;
            font-weight: 500;
            color: var(--gray-500);
            border-bottom: 3px solid transparent;
            margin-bottom: -2px;
            transition: var(--transition-normal);
        }

        .ad-step-tab.active {
            color: var(--accent);
            border-bottom-color: var(--accent);
        }

        .ad-step-content {
            display: none;
        }

        .ad-step-content.active {
            display: block;
        }
        
        .excluded-row { opacity: 0.5; background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.03) 10px, rgba(0,0,0,0.03) 20px); }
        .excluded-badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-xs); font-weight: 600; color: #d97706; background: var(--warning-light); padding: 2px 6px; border-radius: var(--radius-xs); margin-left: 8px; }
        .personal-badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-xs); font-weight: 600; color: var(--shop-primary); background: var(--shop-light); padding: 2px 6px; border-radius: var(--radius-xs); margin-left: 8px; }


        /* Modal Animations */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

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

        /* Form */
        .form-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

        .form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
        .form-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
        .form-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }

        .form-group { display: flex; flex-direction: column; gap: 6px; }
        .form-group.full { grid-column: 1 / -1; }

        .form-label { font-size: var(--font-base); font-weight: 600; color: var(--gray-700); }
        
        /* Fee Override Styling */
        .fee-field[data-overridden="true"] {
            background: var(--warning-light) !important;
            border: 2px solid #f59e0b !important;
            font-weight: 600;
        }

        #acquisitionFeesContainer .form-input,
        #acquisitionFeesContainer .fee-field,
        #acquisitionFeesContainer input[type="number"],
        #acquisitionFeesContainer input[type="text"] {
            min-width: 70px;
            text-align: right !important;
            -moz-appearance: textfield;
        }
        
        .override-indicator {
            color: #f59e0b;
            font-size: var(--font-sm);
            font-weight: 700;
            margin-left: 6px;
        }


        .form-input, .form-select, .form-textarea {
            padding: 10px 14px;
            font-size: var(--font-base);
            font-family: inherit;
            background: var(--bg-surface);
            border: 1px solid var(--gray-300);
            border-radius: var(--radius-md);
            color: var(--gray-800);
            transition: var(--transition-fast);
            width: 100%;
            box-sizing: border-box;
        }

        .form-input:focus, .form-select:focus, .form-textarea:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 4px var(--accent-light);
        }

        .form-textarea { resize: vertical; min-height: 80px; }
        .form-input.vin { font-family: 'SF Mono', monospace; text-transform: uppercase; }
        .form-hint { font-size: var(--font-sm); color: var(--gray-500); }
        .form-row { display: flex; gap: 12px; align-items: flex-end; }

        .vin-decode-btn {
            padding: 10px 16px;
            background: var(--accent-light);
            color: var(--accent-dark);
            border: 1px solid var(--accent);
            border-radius: var(--radius-md);
            font-weight: 600;
            font-size: var(--font-base);
            cursor: pointer;
            white-space: nowrap;
            font-family: inherit;
        }

        .vin-decode-btn:hover { background: var(--accent); color: white; }

        /* Form Sections */
        .form-section {
            margin-bottom: 24px;
            padding-bottom: 24px;
            border-bottom: 1px solid var(--gray-200);
        }

        .form-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

        .form-section-title {
            font-size: var(--font-base);
            font-weight: 700;
            color: var(--gray-900);
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .form-section-title svg { width: 18px; height: 18px; color: var(--accent); }

        /* Checklist */
        .checklist { display: flex; flex-direction: column; gap: 8px; }

        .checklist-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            background: var(--bg-elevated);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: var(--transition-fast);
        }

        .checklist-item:hover { background: var(--bg-hover); }
        .checklist-item.checked { background: var(--success-light); }

        .checklist-checkbox {
            width: 22px;
            height: 22px;
            border: 2px solid var(--gray-300);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: var(--transition-fast);
        }

        .checklist-item.checked .checklist-checkbox {
            background: var(--success);
            border-color: var(--success);
        }

        .checklist-checkbox svg { width: 14px; height: 14px; color: white; opacity: 0; }
        .checklist-item.checked .checklist-checkbox svg { opacity: 1; }

        .checklist-label { flex: 1; font-size: var(--font-base); color: var(--gray-700); }
        .checklist-item.checked .checklist-label { color: var(--gray-500); text-decoration: line-through; }

        /* Expense items */
        .doc-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

        .doc-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 14px;
            background: var(--bg-elevated);
            border-radius: var(--radius-md);
            font-size: var(--font-base);
        }

        .doc-item svg { width: 18px; height: 18px; color: var(--gray-500); flex-shrink: 0; }
        .doc-name { flex: 1; color: var(--gray-700); }

        .doc-remove {
            width: 24px;
            height: 24px;
            border-radius: var(--radius-xs);
            background: none;
            border: none;
            color: var(--gray-400);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .doc-remove:hover { background: var(--danger-light); color: var(--danger); }
        .doc-remove svg { width: 14px; height: 14px; }

        /* Upload zone */
        .upload-zone {
            border: 2px dashed var(--gray-300);
            border-radius: var(--radius-md);
            padding: 24px;
            text-align: center;
            cursor: pointer;
            transition: var(--transition-fast);
        }

        .upload-zone:hover { border-color: var(--accent); background: var(--accent-light); }
        .upload-zone svg { width: 32px; height: 32px; color: var(--gray-400); margin-bottom: 8px; }
        .upload-zone p { font-size: var(--font-base); color: var(--gray-600); }
        .upload-zone span { font-size: var(--font-sm); color: var(--gray-400); }

        /* Price Prediction */
        .prediction-card {
            background: linear-gradient(135deg, var(--teal-light) 0%, #99f6e4 100%);
            border: 2px solid var(--teal);
            border-radius: var(--radius-lg);
            padding: 20px;
            margin-bottom: 20px;
        }

        .prediction-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
        }

        .prediction-icon {
            width: 40px;
            height: 40px;
            background: var(--teal);
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .prediction-icon svg { width: 20px; height: 20px; color: white; }
        .prediction-title { font-weight: 700; color: var(--gray-900); }
        .prediction-subtitle { font-size: var(--font-sm); color: var(--gray-600); }

        .prediction-value {
            font-family: 'SF Mono', monospace;
            font-size: var(--font-2xl);
            font-weight: 700;
            color: var(--teal);
            margin-bottom: 8px;
        }

        .prediction-range {
            font-size: var(--font-base);
            color: var(--gray-600);
            margin-bottom: 12px;
        }

        .prediction-basis {
            font-size: var(--font-sm);
            color: var(--gray-500);
            padding-top: 12px;
            border-top: 1px solid rgba(20, 184, 166, 0.3);
        }

        /* Analytics Grid */
        .analytics-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
        }

        .chart-card {
            background: var(--bg-surface);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-md);
            border: 1px solid var(--gray-100);
            padding: 24px;
        }

        .chart-card.full { grid-column: 1 / -1; }

        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .chart-title { font-size: var(--font-md); font-weight: 700; color: var(--gray-900); }
        .chart-container { position: relative; height: 300px; }

        /* Expense Breakdown */
        .expense-breakdown {
            display: flex;
            gap: 24px;
        }

        .expense-chart-container {
            width: 200px;
            height: 200px;
            flex-shrink: 0;
        }

        .expense-legend {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .expense-legend-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 12px;
            background: var(--bg-elevated);
            border-radius: var(--radius-sm);
        }

        .expense-legend-color {
            width: 12px;
            height: 12px;
            border-radius: var(--radius-xs);
            flex-shrink: 0;
        }

        .expense-legend-label { flex: 1; font-size: var(--font-base); color: var(--gray-700); }
        .expense-legend-value { font-family: 'SF Mono', monospace; font-weight: 600; color: var(--gray-900); }
        .expense-legend-percent { font-size: var(--font-sm); color: var(--gray-500); margin-left: 8px; }

        /* Velocity Leaderboard */
        .velocity-list { display: flex; flex-direction: column; gap: 12px; }

        .velocity-item {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px;
            background: var(--bg-elevated);
            border-radius: var(--radius-md);
        }

        .velocity-rank {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: var(--font-base);
        }

        .velocity-rank.gold { background: linear-gradient(135deg, var(--warning-light) 0%, #fde68a 100%); color: #b45309; }
        .velocity-rank.silver { background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-300) 100%); color: var(--gray-600); }
        .velocity-rank.bronze { background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%); color: var(--accent-dark); }
        .velocity-rank.normal { background: var(--gray-200); color: var(--gray-600); }

        .velocity-info { flex: 1; }
        .velocity-name { font-weight: 600; color: var(--gray-900); }
        .velocity-meta { font-size: var(--font-sm); color: var(--gray-500); }

        .velocity-stats { text-align: right; }
        .velocity-profit { font-family: 'SF Mono', monospace; font-weight: 700; color: var(--success); }
        .velocity-days { font-size: var(--font-sm); color: var(--gray-500); }
        .velocity-perday { font-family: 'SF Mono', monospace; font-weight: 700; color: var(--teal); font-size: var(--font-lg); }

        /* Settlement */
        .settlement-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            margin-bottom: 24px;
        }

        .settlement-card {
            background: var(--bg-surface);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-md);
            border: 1px solid var(--gray-100);
            overflow: hidden;
        }

        .settlement-header {
            padding: 20px 24px;
            border-bottom: 1px solid var(--gray-100);
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .settlement-avatar {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-lg);
            font-weight: 700;
        }

        .settlement-avatar.jason { background: linear-gradient(135deg, var(--accent-light) 0%, #fed7aa 100%); color: var(--accent-dark); }
        .settlement-avatar.chuck { background: linear-gradient(135deg, var(--teal-light) 0%, #99f6e4 100%); color: var(--teal); }

        .settlement-name { font-size: var(--font-lg); font-weight: 700; color: var(--gray-900); }
        .settlement-body { padding: 24px; }

        .settlement-row {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid var(--gray-100);
        }

        .settlement-row:last-child { border-bottom: none; }
        .settlement-label { color: var(--gray-600); }
        .settlement-value { font-family: 'SF Mono', monospace; font-weight: 600; color: var(--gray-900); }

        .settlement-total {
            margin-top: 16px;
            padding: 16px;
            background: var(--success-light);
            border-radius: var(--radius-md);
            text-align: center;
        }

        .settlement-total-label { font-size: var(--font-sm); text-transform: uppercase; color: var(--success-dark); margin-bottom: 4px; }
        .settlement-total-value { font-family: 'SF Mono', monospace; font-size: var(--font-xl); font-weight: 700; color: var(--success-dark); }

        /* ========================================
           C10: SETTLEMENT PAGE COMPONENTS
           Summary bar, partner cards, deposit trail
           ======================================== */
        
        /* Summary Bar — equation-style layout */
        .settlement-summary {
            display: flex;
            gap: 16px;
            align-items: center;
            flex-wrap: wrap;
            padding: 16px 24px;
            background: var(--bg);
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }
        
        .settlement-summary-item {
            display: flex;
            align-items: baseline;
            gap: 8px;
        }
        
        .settlement-summary-label {
            font-size: 11px;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            font-weight: 600;
        }
        
        .settlement-summary-value {
            font-size: 18px;
            font-weight: 700;
            font-family: 'SF Mono', monospace;
        }
        
        .settlement-summary-op {
            color: var(--gray-300);
            font-size: 16px;
            font-weight: 300;
        }
        
        .settlement-summary-chip {
            display: flex;
            align-items: baseline;
            gap: 8px;
            padding: 6px 14px;
            border-radius: 8px;
        }
        
        .settlement-summary-chip.profit {
            background: var(--success-light);
        }
        .settlement-summary-chip.profit .settlement-summary-label { color: var(--success-dark); }
        .settlement-summary-chip.profit .settlement-summary-value { color: var(--success); }
        
        .settlement-summary-chip.partner-1 {
            background: #dbeafe;
        }
        .settlement-summary-chip.partner-1 .settlement-summary-label { color: #1e40af; }
        .settlement-summary-chip.partner-1 .settlement-summary-value { color: #1e40af; font-size: 16px; }
        
        .settlement-summary-chip.partner-2 {
            background: #fef3c7;
        }
        .settlement-summary-chip.partner-2 .settlement-summary-label { color: #92400e; }
        .settlement-summary-chip.partner-2 .settlement-summary-value { color: #92400e; font-size: 16px; }
        
        .settlement-summary-chip.pipeline {
            background: var(--gray-100);
            border: 1px dashed var(--gray-300);
        }
        .settlement-summary-chip.pipeline .settlement-summary-label { color: var(--gray-500); }
        .settlement-summary-chip.pipeline .settlement-summary-value { color: var(--gray-600); font-size: 14px; }
        .settlement-summary-chip .settlement-summary-count {
            font-size: 11px;
            color: var(--gray-400);
        }
        
        .settlement-summary-spacer { flex: 1; }
        
        /* Partner Dashboard Cards */
        .partner-card {
            border-radius: 10px;
            padding: 14px;
            border: 1px solid;
        }
        
        .partner-card.partner-1 {
            background: linear-gradient(135deg, #dbeafe 0%, #fff 100%);
            border-color: #bfdbfe;
        }
        
        .partner-card.partner-2 {
            background: linear-gradient(135deg, #fef3c7 0%, #fff 100%);
            border-color: #fde68a;
        }
        
        .partner-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .partner-card-name {
            font-size: 13px;
            font-weight: 600;
        }
        .partner-card.partner-1 .partner-card-name { color: #1e40af; }
        .partner-card.partner-2 .partner-card-name { color: #92400e; }
        
        .partner-card-net {
            font-size: 16px;
            font-weight: 700;
        }
        
        .partner-card-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            font-size: 11px;
        }
        
        .partner-card-metric-label { color: var(--gray-500); }
        .partner-card-metric-value { font-weight: 600; font-size: 12px; }
        
        /* Deposit Trail */
        .deposit-trail {
            background: var(--surface);
            border-radius: 10px;
            border: 1px solid var(--border);
            padding: 14px;
        }
        
        .deposit-trail-header {
            margin: 0 0 10px 0;
            color: #7c3aed;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            font-weight: 600;
        }
        
        .deposit-trail-header svg { width: 16px; height: 16px; }
        
        .deposit-trail-list { font-size: 12px; }
        
        .deposit-trail-footer {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid var(--border);
            display: flex;
            gap: 24px;
            font-size: 12px;
        }
        
        .deposit-trail-total { font-weight: 600; }
        .deposit-trail-total.partner-1 { color: #f97316; }
        .deposit-trail-total.partner-2 { color: #0d9488; }
        
        /* Partner Details Toggle */
        .partner-toggle-btn {
            width: 100%;
            margin-top: 12px;
            background: var(--surface);
            border: 1px solid var(--border);
            color: var(--text-muted);
            font-size: 12px;
            padding: 8px;
            cursor: pointer;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: background 0.15s, border-color 0.15s;
        }
        .partner-toggle-btn:hover {
            background: var(--gray-50);
            border-color: var(--gray-300);
        }
        .partner-toggle-btn svg {
            width: 14px;
            height: 14px;
            transition: transform 0.2s;
        }

        /* Toast */
        .toast-container {
            position: fixed;
            bottom: 40px;
            right: 24px;
            display: flex;
            flex-direction: column-reverse;
            gap: 8px;
            z-index: var(--z-toast);
        }
        .app-footer {
            position: fixed;
            bottom: 0;
            left: 80px; /* Match sidebar width */
            right: 0;
            height: 32px;
            background: var(--gray-900);
            border-top: 1px solid var(--gray-800);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            color: var(--gray-500);
            z-index: var(--z-header);
            gap: 16px;
        }

        .toast {
            background: var(--gray-900);
            color: white;
            padding: 10px 14px;
            border-radius: var(--radius-md);
            font-size: var(--font-xs);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            gap: 8px;
            transform: translateX(calc(100% + 24px));
            opacity: 0;
            transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
            position: relative;
            overflow: hidden;
            min-width: 240px;
            max-width: 380px;
        }
        
        .toast.show {
            transform: translateX(0);
            opacity: 1;
        }
        
        .toast.hide {
            transform: translateX(calc(100% + 24px));
            opacity: 0;
            transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1), opacity 0.2s ease;
        }
        
        /* Auto-dismiss progress bar */
        .toast::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            height: 2px;
            background: rgba(255, 255, 255, 0.35);
            animation: toastProgress var(--toast-duration, 3s) linear forwards;
        }
        
        @keyframes toastProgress {
            from { width: 100%; }
            to { width: 0%; }
        }

        .toast-success { background: var(--success); }
        .toast-error { background: var(--danger); --toast-duration: 5s; }
        .toast-warning { background: var(--warning); color: #000; --toast-duration: 4s; }
        .toast-warning::after { background: rgba(0, 0, 0, 0.2); }
        .toast-info { background: var(--blue); }
        
        .toast-icon svg { width: 16px; height: 16px; flex-shrink: 0; }
        .toast-message { flex: 1; line-height: 1.4; }
        .toast-close {
            background: none; border: none; color: inherit; cursor: pointer;
            padding: 2px; opacity: 0.7; transition: opacity 0.15s;
            display: flex; align-items: center; flex-shrink: 0;
        }
        .toast-close:hover { opacity: 1; }
        .toast-close svg { width: 14px; height: 14px; }

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

        /* ========================================
           A4: SKELETON LOADING STATES
           Utility classes for loading placeholders
           ======================================== */
        @keyframes skeletonPulse {
            0% { opacity: 0.6; }
            50% { opacity: 0.3; }
            100% { opacity: 0.6; }
        }
        
        .skeleton {
            background: var(--gray-200);
            border-radius: var(--radius-sm);
            animation: skeletonPulse 1.5s ease-in-out infinite;
        }
        
        .skeleton-text {
            height: 14px;
            margin-bottom: 8px;
            background: var(--gray-200);
            border-radius: 4px;
            animation: skeletonPulse 1.5s ease-in-out infinite;
        }
        
        .skeleton-text.short { width: 40%; }
        .skeleton-text.medium { width: 65%; }
        .skeleton-text.long { width: 90%; }
        
        .skeleton-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 14px 20px;
            min-width: 140px;
        }
        
        .skeleton-card .skeleton-value {
            height: 26px;
            width: 60%;
            margin-top: 6px;
            background: var(--gray-200);
            border-radius: 6px;
            animation: skeletonPulse 1.5s ease-in-out infinite;
        }
        
        .skeleton-card .skeleton-label {
            height: 10px;
            width: 80%;
            background: var(--gray-200);
            border-radius: 3px;
            animation: skeletonPulse 1.5s ease-in-out infinite;
        }
        
        .skeleton-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            border-bottom: 1px solid var(--gray-100);
        }
        
        .skeleton-row .skeleton-cell {
            height: 14px;
            background: var(--gray-200);
            border-radius: 4px;
            animation: skeletonPulse 1.5s ease-in-out infinite;
        }
        
        /* Stagger animation delays for natural feel */
        .skeleton-row:nth-child(2) .skeleton-cell,
        .skeleton-card:nth-child(2) .skeleton-value { animation-delay: 0.1s; }
        .skeleton-row:nth-child(3) .skeleton-cell,
        .skeleton-card:nth-child(3) .skeleton-value { animation-delay: 0.2s; }
        .skeleton-row:nth-child(4) .skeleton-cell,
        .skeleton-card:nth-child(4) .skeleton-value { animation-delay: 0.3s; }
        .skeleton-row:nth-child(5) .skeleton-cell,
        .skeleton-card:nth-child(5) .skeleton-value { animation-delay: 0.4s; }

        /* Save Indicator */
        #saveIndicator {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 10px 16px;
            box-shadow: var(--shadow-md);
            z-index: var(--z-toast);
            font-size: var(--font-sm);
            display: none;
        }

        /* Analytics Dashboard */
        .analytics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .analytics-card {
            background: var(--bg-surface);
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-lg);
            padding: 24px;
            text-align: center;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
        }

        .analytics-card:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-2px);
        }

        .analytics-label {
            font-size: var(--font-base);
            color: var(--gray-500);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 12px;
            font-weight: 600;
        }

        .analytics-value {
            font-size: var(--font-2xl);
            font-weight: 700;
            color: var(--accent);
            margin-bottom: 8px;
        }

        .analytics-subtitle {
            font-size: var(--font-base);
            color: var(--gray-500);
        }

        .analytics-section {
            background: var(--bg-surface);
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-lg);
            padding: 20px;
            grid-column: span 1;
            box-shadow: var(--shadow-sm);
        }

        .analytics-section h3 {
            font-size: var(--font-lg);
            font-weight: 700;
            color: var(--gray-900);
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 2px solid var(--accent);
        }

        .analytics-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid var(--gray-200);
            font-size: var(--font-base);
        }

        .analytics-item:last-child {
            border-bottom: none;
        }

        .analytics-item span:first-child {
            color: var(--gray-700);
        }

        .hidden { display: none !important; }

        /* Print */
        @media print {
            /* Hide browser's default headers and footers */
            @page { 
                size: landscape;
                margin: 0;
            }
            
            body * { visibility: hidden; }
            #printReport, #printReport * { visibility: visible; }
            #printReportLandscape, #printReportLandscape * { visibility: visible; }
            #printReport {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                background: white;
                padding: 0.75in 0.5in;
            }
            #printReportLandscape {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                background: white;
                padding: 0.75in 0.5in;
            }
            @media print {
                html, body {
                    margin: 0 !important;
                    padding: 0 !important;
                }
                
                /* Repeating header on every page */
                #printReportLandscape .report-header {
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 0.6in;
                    display: flex !important;
                    justify-content: space-between;
                    align-items: center;
                    padding: 0 0.5in;
                    border-bottom: 3px solid var(--accent);
                    background: white;
                    z-index: var(--z-modal);
                }
                
                /* Repeating footer on every page */
                #printReportLandscape .report-footer {
                    position: fixed;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: 0.4in;
                    display: flex !important;
                    justify-content: space-between;
                    align-items: center;
                    padding: 0 0.5in;
                    border-top: 1px solid #ddd;
                    background: white;
                    font-size: var(--font-xs);
                    color: #666;
                    z-index: var(--z-modal);
                }
                
                /* Add space for header and footer */
                #printReportLandscape {
                    padding-top: 0.8in !important;
                    padding-bottom: 0.6in !important;
                }
                
                /* Page counter */
                #printReportLandscape .report-footer .page-number::after {
                    content: counter(page);
                }
                
                #printReportLandscape .report-footer .page-total::after {
                    content: counter(pages);
                }
            }
            .print-landscape { size: landscape; }
        }
        
        @media print {
            body.print-landscape-mode { }
            body.print-landscape-mode #printReportLandscape { display: block !important; }
        }
        
        /* Print Report Styles */
        #printReport {
            display: none;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: white;
            padding: 0.5in;
            max-width: 8.5in;
            margin: 0 auto;
        }
        
        #printReport .report-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 32px;
            padding-bottom: 20px;
            border-bottom: 3px solid var(--accent);
        }
        
        #printReport .logo-section {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        #printReport .logo-text {
            font-size: var(--font-2xl);
            font-weight: 700;
            color: var(--gray-900);
        }
        
        #printReport .logo-text .tm {
            color: var(--accent);
            font-weight: 400;
            font-size: var(--font-sm);
            vertical-align: super;
            position: relative;
            top: -0.05em;
        }
        
        #printReport .report-meta {
            text-align: right;
            font-size: var(--font-sm);
            color: #666;
        }
        
        #printReport .report-meta h1 {
            font-size: var(--font-lg);
            color: var(--gray-900);
            margin-bottom: 4px;
        }
        
        #printReport .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-bottom: 32px;
        }
        
        #printReport .stat-box {
            background: #fafafa;
            border: 1px solid #e5e5e5;
            border-radius: var(--radius-sm);
            padding: 16px;
            text-align: center;
        }
        
        #printReport .stat-box.highlight {
            background: var(--accent-light);
            border-color: #fed7aa;
        }
        
        #printReport .stat-value {
            font-size: var(--font-xl);
            font-weight: 700;
            color: var(--gray-900);
        }
        
        #printReport .stat-value.success { color: var(--success-dark); }
        #printReport .stat-value.copper { color: var(--accent); }
        
        #printReport .stat-label {
            font-size: var(--font-sm);
            color: #666;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-top: 4px;
        }
        
        #printReport .section-title {
            font-size: var(--font-base);
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid #e5e5e5;
        }
        
        #printReport .financial-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 24px;
            margin-bottom: 32px;
        }
        
        #printReport .expense-table {
            width: 100%;
            border-collapse: collapse;
            font-size: var(--font-sm);
        }
        
        #printReport .expense-table th {
            background: var(--gray-50);
            padding: 10px 8px;
            text-align: left;
            font-weight: 600;
            color: var(--gray-700);
            border-bottom: 2px solid var(--gray-200);
        }
        
        #printReport .expense-table td {
            padding: 10px 8px;
            border-bottom: 1px solid var(--gray-100);
        }
        
        #printReport .expense-table .money {
            font-family: 'SF Mono', Monaco, monospace;
            text-align: right;
        }
        
        #printReport .expense-table tr.total-row {
            background: #f0fdf4;
        }
        
        #printReport .expense-table tr.sale-row {
            background: var(--accent-light);
        }
        
        #printReport .settlement-action {
            background: var(--accent-light);
            border: 2px solid var(--accent);
            border-radius: var(--radius-lg);
            padding: 20px;
            text-align: center;
        }
        
        #printReport .settlement-action-label {
            font-size: var(--font-sm);
            color: #9a3412;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
        }
        
        #printReport .settlement-action-text {
            font-size: var(--font-base);
            color: var(--gray-900);
            margin-bottom: 8px;
        }
        
        #printReport .settlement-action-amount {
            font-size: var(--font-3xl);
            font-weight: 700;
            color: var(--accent);
        }
        
        #printReport .settlement-action-note {
            font-size: var(--font-sm);
            color: #78350f;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid #fed7aa;
        }
        
        #printReport .partner-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            margin-bottom: 32px;
        }
        
        #printReport .partner-card {
            border: 1px solid #e5e5e5;
            border-radius: var(--radius-lg);
            overflow: hidden;
        }
        
        #printReport .partner-header {
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        #printReport .partner-header.jason {
            background: linear-gradient(135deg, var(--accent-light) 0%, #ffedd5 100%);
        }
        
        #printReport .partner-header.chuck {
            background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
        }
        
        #printReport .partner-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: var(--font-lg);
            color: white;
        }
        
        #printReport .partner-avatar.jason { background: var(--accent); }
        #printReport .partner-avatar.chuck { background: var(--teal); }
        
        #printReport .partner-name {
            font-size: var(--font-lg);
            font-weight: 600;
        }
        
        #printReport .partner-body {
            padding: 16px;
        }
        
        #printReport .partner-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #f5f5f5;
            font-size: var(--font-base);
        }
        
        #printReport .partner-row:last-child {
            border-bottom: none;
        }
        
        #printReport .partner-total {
            background: var(--gray-50);
            margin: 12px -16px -16px;
            padding: 16px;
            text-align: center;
        }
        
        #printReport .partner-total-label {
            font-size: var(--font-sm);
            text-transform: uppercase;
            color: #666;
            letter-spacing: 0.5px;
        }
        
        #printReport .partner-total-value {
            font-size: var(--font-2xl);
            font-weight: 700;
        }
        
        #printReport .partner-total-value.jason { color: var(--accent); }
        #printReport .partner-total-value.chuck { color: var(--teal); }
        
        #printReport .vehicle-table {
            width: 100%;
            border-collapse: collapse;
            font-size: var(--font-sm);
            margin-bottom: 32px;
        }
        
        #printReport .vehicle-table th {
            background: var(--gray-50);
            padding: 10px 8px;
            text-align: left;
            font-weight: 600;
            color: var(--gray-700);
            border-bottom: 2px solid var(--gray-200);
        }
        
        #printReport .vehicle-table td {
            padding: 10px 8px;
            border-bottom: 1px solid var(--gray-100);
        }
        
        #printReport .vehicle-table tr:nth-child(even) {
            background: #fafafa;
        }
        
        #printReport .vehicle-table .money {
            font-family: 'SF Mono', Monaco, monospace;
            text-align: right;
        }
        
        #printReport .vehicle-table .success { color: var(--success-dark); }
        #printReport .vehicle-table .danger { color: var(--danger-dark); }
        
        #printReport .report-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 16px;
            margin-top: 32px;
            border-top: 1px solid #e5e5e5;
            font-size: var(--font-xs);
            color: #666;
        }
        
        #printReport .footer-logo {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        #printReport .footer-logo svg {
            width: 16px;
            height: 16px;
        }
        
        #printReport .footer-logo .tm {
            color: var(--accent);
            font-size: var(--font-sm);
            vertical-align: super;
            position: relative;
            top: -0.05em;
        }
        
        /* Landscape Print Report Styles */
        #printReportLandscape {
            display: none;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: white;
            padding: 36px 48px;
            width: 11in;
            min-height: 8.5in;
        }
        
        #printReportLandscape .report-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 20px;
            padding-bottom: 14px;
            border-bottom: 3px solid var(--accent);
        }
        
        #printReportLandscape .logo-section {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        #printReportLandscape .logo-text {
            font-size: var(--font-xl);
            font-weight: 700;
            color: var(--gray-900);
        }
        
        #printReportLandscape .logo-text .tm {
            color: var(--accent);
            font-weight: 400;
            font-size: var(--font-sm);
            vertical-align: super;
        }
        
        #printReportLandscape .report-meta {
            text-align: right;
        }
        
        #printReportLandscape .report-meta h1 {
            font-size: var(--font-md);
            color: var(--gray-900);
            margin-bottom: 2px;
        }
        
        #printReportLandscape .report-meta .date {
            font-size: var(--font-xs);
            color: var(--gray-500);
        }
        
        #printReportLandscape .top-section {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 20px;
            margin-bottom: 16px;
        }
        
        #printReportLandscape .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }
        
        #printReportLandscape .stat-box {
            background: var(--gray-50);
            border-radius: var(--radius-sm);
            padding: 10px 14px;
            text-align: center;
        }
        
        #printReportLandscape .stat-box.highlight {
            background: linear-gradient(135deg, var(--accent-light) 0%, #ffedd5 100%);
            border: 1px solid #fed7aa;
        }
        
        #printReportLandscape .stat-value {
            font-size: var(--font-lg);
            font-weight: 700;
            color: #1f2937;
        }
        
        #printReportLandscape .stat-value.success { color: var(--success-dark); }
        #printReportLandscape .stat-value.copper { color: var(--accent); }
        #printReportLandscape .stat-value.danger { color: var(--danger-dark); }
        
        #printReportLandscape .stat-label {
            font-size: var(--font-xs);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--gray-500);
            margin-top: 2px;
        }
        
        #printReportLandscape .notes-section {
            background: #fffbeb;
            border: 1px solid #fde68a;
            border-radius: var(--radius-sm);
            padding: 10px 14px;
            min-width: 240px;
        }
        
        #printReportLandscape .notes-section h4 {
            font-size: var(--font-xs);
            font-weight: 600;
            color: #92400e;
            margin-bottom: 4px;
        }
        
        #printReportLandscape .notes-section p {
            font-size: var(--font-xs);
            color: #78350f;
            line-height: 1.4;
        }
        
        #printReportLandscape .section-title {
            font-size: var(--font-sm);
            font-weight: 600;
            color: var(--gray-700);
            margin-bottom: 8px;
            padding-bottom: 4px;
            border-bottom: 1px solid var(--gray-200);
        }
        
        #printReportLandscape .vehicle-table {
            width: 100%;
            border-collapse: collapse;
            font-size: var(--font-xs);
            margin-bottom: 16px;
        }
        
        #printReportLandscape .vehicle-table th {
            text-align: left;
            padding: 6px 5px;
            background: var(--gray-50);
            font-weight: 600;
            color: var(--gray-700);
            border-bottom: 2px solid var(--gray-200);
            font-size: var(--font-xs);
        }
        
        #printReportLandscape .vehicle-table td {
            padding: 8px 5px;
            border-bottom: 1px solid var(--gray-100);
            vertical-align: middle;
        }
        
        #printReportLandscape .vehicle-table .money {
            text-align: right;
            font-family: 'SF Mono', Monaco, monospace;
            font-size: var(--font-xs);
        }
        
        #printReportLandscape .vehicle-table .success { color: var(--success-dark); }
        #printReportLandscape .vehicle-table .warning { color: #d97706; }
        #printReportLandscape .vehicle-table .danger { color: var(--danger-dark); }
        
        #printReportLandscape .source-badge {
            display: inline-block;
            padding: 2px 5px;
            background: var(--blue-light);
            color: #1d4ed8;
            border-radius: var(--radius-xs);
            font-size: var(--font-xs);
            font-weight: 600;
        }
        
        #printReportLandscape .deal-badge {
            display: inline-block;
            padding: 2px 5px;
            border-radius: var(--radius-xs);
            font-size: var(--font-xs);
            font-weight: 600;
        }
        
        #printReportLandscape .deal-badge.good { background: var(--success-light); color: var(--success-dark); }
        #printReportLandscape .deal-badge.fair { background: var(--warning-light); color: #d97706; }
        #printReportLandscape .deal-badge.poor { background: #fee2e2; color: var(--danger-dark); }
        
        #printReportLandscape .personal-badge {
            display: inline-block;
            padding: 2px 5px;
            background: var(--shop-light);
            color: var(--shop-primary);
            border-radius: var(--radius-xs);
            font-size: var(--font-xs);
            font-weight: 600;
            margin-left: 4px;
        }
        
        #printReportLandscape .bottom-section {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin-bottom: 16px;
        }
        
        #printReportLandscape .summary-card {
            background: var(--gray-50);
            border-radius: var(--radius-sm);
            padding: 12px;
        }
        
        #printReportLandscape .summary-card h3 {
            font-size: var(--font-xs);
            font-weight: 600;
            color: var(--gray-700);
            margin-bottom: 8px;
        }
        
        #printReportLandscape .summary-row {
            display: flex;
            justify-content: space-between;
            padding: 3px 0;
            font-size: var(--font-xs);
        }
        
        #printReportLandscape .summary-row span:first-child { color: var(--gray-500); }
        #printReportLandscape .summary-row span:last-child { font-weight: 600; color: #1f2937; }
        
        #printReportLandscape .report-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 12px;
            border-top: 1px solid var(--gray-200);
            font-size: var(--font-xs);
            color: var(--gray-400);
        }

        /* ===== COMPREHENSIVE UI POLISH ===== */

        /* Enhanced Form Inputs */
        input[type="text"], input[type="number"], input[type="date"], 
        input[type="email"], textarea, select {
            transition: var(--transition-normal);
            border: 1.5px solid var(--gray-200);
        }
        input[type="text"]:focus, input[type="number"]:focus, input[type="date"]:focus,
        input[type="email"]:focus, textarea:focus, select:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-light);
            transform: translateY(-1px);
        }

        /* Smooth Animations */
        [data-page] { animation: fadeIn 0.3s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* Better Typography */
        h1, h2, h3 { letter-spacing: -0.01em; }

        /* Improved Table Rows */
        .data-table tbody tr { transition: var(--transition-fast); }
        .data-table tbody tr:hover { background: linear-gradient(90deg, var(--accent-light) 0%, var(--bg-hover) 100%); }

        /* Custom Scrollbars */
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: var(--gray-50); }
        ::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-xs); }
        ::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

        /* Focus States for Accessibility */
        *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

        /* Better Placeholder */
        ::placeholder { color: var(--gray-400); opacity: 1; }

        /* Responsive Improvements */
        @media (max-width: 768px) {
            .stats-row { grid-template-columns: repeat(2, 1fr); }
            .btn { padding: 10px 14px; }
        }

        @media (max-width: 480px) {
            .stats-row { grid-template-columns: 1fr; }
            .btn { width: 100%; justify-content: center; }
        }

        /* Toggle Switch */
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 48px;
            height: 26px;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--gray-300);
            transition: var(--transition);
            border-radius: var(--radius-xl);
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: var(--transition);
            border-radius: 50%;
        }

        .toggle-switch input:checked + .toggle-slider {
            background-color: var(--primary);
        }

        .toggle-switch input:checked + .toggle-slider:before {
            transform: translateX(22px);
        }

        /* ===== SHOP MANAGEMENT STYLES ===== */
        .nav-btn.shop-active { background: var(--accent); color: white; }
        .stat-card.shop-card { 
            border-color: var(--shop-primary); 
            background: linear-gradient(135deg, white 0%, var(--shop-light) 100%); 
        }
        .stat-icon.shop { background: var(--shop-light); color: var(--shop-primary); }
        .stat-value.shop { color: var(--shop-primary); }
        .btn-shop { 
            background: linear-gradient(135deg, var(--shop-primary) 0%, #6d28d9 100%); 
            color: white; 
        }
        .btn-shop:hover { opacity: 0.9; transform: translateY(-1px); }
        .status-tag.internal { background: var(--shop-light); color: var(--shop-primary); }
        /* Shop Page - Fixed Header Layout (matching inventory page pattern) */
        .shop-stats-row {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 16px;
            position: fixed;
            top: 65px;
            left: 72px;
            right: 0;
            z-index: var(--z-header);
            background: var(--bg-base);
            padding: 20px 32px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        .shop-tab-content { display: none; }
        .shop-tab-content.active { display: block; }
        .entry-card {
            display: flex; align-items: center; padding: 12px; margin-bottom: 8px;
            background: var(--gray-50); border-radius: var(--radius-md); border: 1px solid var(--gray-200);
        }
        .entry-btn {
            width: 32px; height: 32px; border: none; background: var(--gray-100);
            border-radius: var(--radius-sm); cursor: pointer; display: flex;
            align-items: center; justify-content: center; transition: var(--transition-fast);
        }
        .entry-btn:hover { background: var(--gray-200); }
        .entry-btn.delete:hover { background: var(--danger-light); color: var(--danger); }
        .entry-btn svg { width: 16px; height: 16px; }
        .invoice-preview {
            background: white; border: 1px solid var(--gray-200); border-radius: var(--radius-md);
            padding: 24px; max-width: 400px; margin: 0 auto;
        }
        .invoice-header { text-align: center; border-bottom: 2px solid var(--gray-300); padding-bottom: 16px; margin-bottom: 16px; }
        .invoice-line { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--gray-200); }
        .invoice-total { display: flex; justify-content: space-between; padding: 12px 0; border-top: 2px solid var(--gray-400); font-weight: 700; font-size: var(--font-md); }
        .modal.extra-wide { max-width: 800px; }
        .cols-6 { grid-template-columns: repeat(6, 1fr); }
        @media (max-width: 1200px) { .cols-6 { grid-template-columns: repeat(3, 1fr); } }
        @media (max-width: 768px) { .cols-6 { grid-template-columns: repeat(2, 1fr); } }

        /* ===== MOBILE RESPONSIVE (v9.75) ===== */
        
        /* Mobile Menu Toggle Button */
        /* Mobile menu toggle and overlay removed in v13.25.0 — bottom nav is primary mobile pattern */
        
        /* Tablet Breakpoint (1024px) */
        @media (max-width: 1024px) {
            .form-grid.cols-4 {
                grid-template-columns: repeat(2, 1fr);
            }
            .stats {
                grid-template-columns: repeat(3, 1fr);
            }
            .analytics-grid {
                grid-template-columns: 1fr;
            }
        }
        
        /* Mobile Breakpoint (768px) */
        @media (max-width: 768px) {
            /* Main content - full width (bottom nav provides padding-bottom) */
            .content {
                margin-left: 0;
                padding: 16px;
            }
            
            /* Page headers */
            .page-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
                padding: 16px;
            }
            .page-header h1 {
                font-size: var(--font-lg);
            }
            .header-actions {
                width: 100%;
                flex-wrap: wrap;
                gap: 8px;
            }
            .header-actions .search-box {
                width: 100%;
                order: -1;
            }
            .header-actions .btn {
                flex: 1;
                min-width: 0;
            }
            
            /* Stats cards - 2 columns on mobile */
            .stats {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }
            .stat-card {
                padding: 12px;
            }
            .stat-value {
                font-size: var(--font-lg);
            }
            
            /* Tabs - scrollable */
            .tabs-bar {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                padding-bottom: 8px;
            }
            .tabs-bar::-webkit-scrollbar {
                display: none;
            }
            .tabs-bar .tab {
                white-space: nowrap;
                flex-shrink: 0;
            }
            
            /* Filter dropdowns - stack */
            .filter-dropdowns {
                flex-wrap: wrap;
                gap: 8px;
            }
            .filter-group {
                flex: 1;
                min-width: calc(50% - 4px);
            }
            
            /* Table section - horizontal scroll */
            .table-section {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            .table-header.inventory,
            .table-row.inventory {
                min-width: 900px; /* Force horizontal scroll for inventory only */
            }
            
            /* Pagination - compact */
            .pagination-container {
                flex-direction: column;
                gap: 12px;
                padding: 12px;
            }
            .pagination-controls {
                order: -1;
            }
            
            /* Modals - full screen */
            .modal-overlay {
                padding: 0;
            }
            .modal {
                max-width: 100%;
                max-height: 100%;
                width: 100%;
                height: 100%;
                border-radius: 0;
                margin: 0;
            }
            .modal-body {
                max-height: calc(100vh - 140px);
            }
            .modal.large {
                max-width: 100%;
            }
            
            /* Form grids - single column */
            .form-grid.cols-4,
            .form-grid.cols-3 {
                grid-template-columns: 1fr;
            }
            .form-grid.cols-2 {
                grid-template-columns: 1fr;
            }
            
            /* Buttons - larger touch targets */
            .btn {
                min-height: 44px;
                padding: 12px 16px;
            }
            .btn-sm {
                min-height: 36px;
            }
            .row-action {
                width: 36px;
                height: 36px;
            }
            
            /* Bulk actions bar */
            .bulk-actions-bar {
                left: 0;
                flex-direction: column;
                gap: 12px;
                padding: 16px;
            }
            .bulk-actions-buttons {
                width: 100%;
                flex-wrap: wrap;
            }
            .bulk-actions-buttons .btn {
                flex: 1;
            }
            
            /* Notification panel */
            .notification-panel {
                width: calc(100vw - 24px);
                right: 12px;
                left: 12px;
            }
            
            /* Offline indicator */
            .offline-indicator {
                top: auto;
                bottom: 70px;
                right: 12px;
            }
            
            /* Toast notifications */
            .toast {
                left: 12px;
                right: 12px;
                max-width: none;
            }
            
            /* Settlement page */
            .settlement-grid {
                grid-template-columns: 1fr;
            }
            
            /* Analytics charts */
            .analytics-row {
                grid-template-columns: 1fr;
            }
            
            /* Hide some columns on mobile for cleaner view */
            .hide-mobile {
                display: none !important;
            }
        }
        
        /* Small Mobile (480px) */
        @media (max-width: 480px) {
            .stats {
                grid-template-columns: 1fr;
            }
            .stat-card {
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
            }
            
            .filter-group {
                min-width: 100%;
            }
            
            .header-actions .btn span:not(.notification-badge) {
                display: none; /* Hide button text, show only icons */
            }
            .header-actions .btn svg {
                margin: 0;
            }
            
            /* Undo/redo group */
            .undo-redo-group {
                display: none;
            }
            
            /* Vehicle cell - compact */
            .cell-vehicle {
                gap: 8px;
            }
            .vehicle-thumb {
                width: 32px;
                height: 32px;
                font-size: 10px;
            }
            .vehicle-info h4 {
                font-size: var(--font-sm);
            }
            .vehicle-vin {
                font-size: 10px;
            }
            .vehicle-tags .tag-badge {
                font-size: 9px;
                padding: 1px 4px;
            }
        }
        
        /* Custom Fields (v9.75) */
        .custom-field-item {
            display: grid;
            grid-template-columns: 1fr 120px 100px auto;
            gap: 12px;
            padding: 12px;
            background: var(--bg);
            border-radius: var(--radius-sm);
            margin-bottom: 8px;
            align-items: center;
        }
        .custom-field-item input,
        .custom-field-item select {
            padding: 8px 12px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            background: var(--surface);
            font-size: var(--font-sm);
        }
        .custom-field-item .delete-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            border-radius: var(--radius-sm);
        }
        .custom-field-item .delete-btn:hover {
            background: var(--danger);
            color: white;
        }
        .custom-field-empty {
            text-align: center;
            padding: 24px;
            color: var(--text-muted);
            font-size: var(--font-sm);
        }
        @media (max-width: 768px) {
            .custom-field-item {
                grid-template-columns: 1fr;
                gap: 8px;
            }
        }


        /* Report Preview Styles */
        .preview-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 16px;
            margin-bottom: 24px;
        }
        
        .preview-stat {
            background: white;
            padding: 16px;
            border-radius: var(--radius-md);
            text-align: center;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .preview-stat .label {
            display: block;
            font-size: 12px;
            color: var(--text-muted);
            margin-bottom: 4px;
        }
        
        .preview-stat .value {
            display: block;
            font-size: 20px;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .preview-stat .value.success { color: var(--success); }
        .preview-stat .value.warning { color: var(--warning); }
        .preview-stat .value.danger { color: var(--danger); }
        
        .preview-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
            background: white;
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .preview-table th {
            background: var(--gray-100);
            padding: 12px;
            text-align: left;
            font-weight: 600;
            color: var(--text-secondary);
            border-bottom: 1px solid var(--gray-200);
        }
        
        .preview-table th.right,
        .preview-table td.right {
            text-align: right;
        }
        
        .preview-table td {
            padding: 10px 12px;
            border-bottom: 1px solid var(--gray-100);
            color: var(--text-primary);
        }
        
        .preview-table tr:hover td {
            background: var(--gray-50);
        }
        
        .preview-table .success { color: var(--success); }
        .preview-table .warning { color: var(--warning); }
        .preview-table .danger { color: var(--danger); }
        
        .preview-more {
            text-align: center;
            padding: 12px;
            color: var(--text-muted);
            font-size: 13px;
            font-style: italic;
        }
        
        .empty-text {
            text-align: center;
            padding: 40px;
            color: var(--text-muted);
            font-size: 14px;
        }
        
        /* Report type option styling */
        .report-type-option {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all 0.15s ease;
        }
        
        .report-type-option:hover {
            border-color: var(--gray-300);
            background: var(--gray-50);
        }
        
        .report-type-option:has(input:checked) {
            border-color: var(--orange);
            background: rgba(249, 115, 22, 0.05);
        }
        
        .report-type-option input[type="radio"] {
            accent-color: var(--orange);
        }
        
        .report-type-label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 500;
        }
        
        /* Filter chip styling */
        .filter-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            background: var(--gray-100);
            border: 1px solid var(--gray-200);
            border-radius: 20px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        
        .filter-chip:hover {
            background: var(--gray-200);
        }
        
        .filter-chip.active,
        .filter-chip:has(input:checked) {
            background: rgba(249, 115, 22, 0.1);
            border-color: var(--orange);
            color: var(--orange);
        }
        
        .filter-chip input[type="checkbox"] {
            width: 14px;
            height: 14px;
            accent-color: var(--orange);
        }


        /* ============================================
           ANALYTICS WIDGET MATRIX
           ============================================ */
        
        .widget-matrix {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
        }
        
        .widget-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .widget-card:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            transform: translateY(-2px);
        }
        
        .widget-card.expanded {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80vw;
            max-width: 900px;
            height: auto;
            max-height: 80vh;
            z-index: 1000;
            box-shadow: 0 25px 50px rgba(0,0,0,0.25);
            overflow-y: auto;
        }
        
        .widget-card.expanded:hover {
            transform: translate(-50%, -50%);
        }
        
        /* Widget sizes */
        .widget-card.widget-sm {
            grid-column: span 1;
        }
        
        .widget-card.widget-md {
            grid-column: span 2;
        }
        
        .widget-card.widget-lg {
            grid-column: span 3;
        }
        
        .widget-card.widget-full {
            grid-column: span 4;
        }
        
        .widget-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 1px solid var(--gray-100);
            background: var(--gray-50);
        }
        
        .widget-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--gray-700);
        }
        
        .widget-expand-icon {
            font-size: 14px;
            color: var(--gray-400);
            transition: transform 0.2s;
        }
        
        .widget-card:hover .widget-expand-icon {
            color: var(--accent);
        }
        
        .widget-card.expanded .widget-expand-icon {
            transform: rotate(180deg);
        }
        
        .widget-content {
            padding: 16px;
        }
        
        .widget-card.widget-sm .widget-content {
            text-align: center;
            padding: 20px 16px;
        }
        
        .widget-card.widget-sm .stat-value {
            font-size: 28px;
            font-weight: 700;
        }
        
        /* Expanded content shows more */
        .widget-card.expanded .widget-content {
            padding: 24px;
        }
        
        .widget-card.expanded .widget-header {
            padding: 16px 24px;
        }
        
        .widget-card.expanded .widget-title {
            font-size: 16px;
        }
        
        /* Backdrop when widget is expanded */
        .widget-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 999;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        
        .widget-backdrop.active {
            opacity: 1;
            visibility: visible;
        }
        
        /* Responsive adjustments */
        @media (max-width: 1200px) {
            .widget-matrix {
                grid-template-columns: repeat(2, 1fr);
            }
            .widget-card.widget-lg {
                grid-column: span 2;
            }
        }
        
        @media (max-width: 768px) {
            .widget-matrix {
                grid-template-columns: 1fr;
            }
            .widget-card.widget-sm,
            .widget-card.widget-md,
            .widget-card.widget-lg,
            .widget-card.widget-full {
                grid-column: span 1;
            }
        }

/* Analytics View Tabs & Dashboard (v13.7.23) */
/* Auto-save spinner */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Global car activity indicator (v13.32.13) */
@keyframes carDriveRight {
    0% { left: -28px; }
    100% { left: 100%; }
}

.car-loader {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
}

.car-loader svg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    animation: carDriveRight 1.2s linear infinite;
}

.car-loader--sm { width: 40px; height: 16px; }
.car-loader--sm svg { width: 16px; height: 16px; }

.car-loader--md { width: 80px; height: 24px; }
.car-loader--md svg { width: 24px; height: 24px; }

.car-loader--lg { width: 120px; height: 32px; }
.car-loader--lg svg { width: 32px; height: 32px; }

/* Full-page activity overlay */
.activity-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    backdrop-filter: blur(2px);
}

.activity-overlay.show {
    display: flex;
}

.activity-overlay-box {
    background: white;
    padding: 32px 48px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

body.dark-mode .activity-overlay-box {
    background: #1e293b;
}

.activity-overlay-message {
    font-size: 15px;
    font-weight: 500;
    color: #475569;
    text-align: center;
}

body.dark-mode .activity-overlay-message {
    color: #cbd5e1;
}

.activity-overlay-progress {
    font-size: 13px;
    color: #94a3b8;
}

/* Sub-tab bar for grouped pages */
.sub-tab-bar {
    display: flex;
    gap: 2px;
    padding: 8px 24px 0;
    background: white;
    border-bottom: 1px solid var(--gray-200);
}
.sub-tab {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-500);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.sub-tab:hover {
    color: var(--gray-700);
    background: var(--gray-50);
}
.sub-tab.active {
    color: var(--orange);
    border-bottom-color: var(--orange);
}

/* ============================================
   ANALYTICS VIEW TABS & DASHBOARD (v13.7.23)
   ============================================ */

.analytics-view-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: var(--gray-500);
    font-size: var(--font-sm);
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}
.analytics-view-tab:hover {
    color: var(--gray-700);
}
.analytics-view-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* C11: Analytics Tab Bar + Filter Bar */
.analytics-tab-bar {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 12px 24px 0;
    flex-shrink: 0;
}

.analytics-filter-bar {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 16px 24px;
    flex-shrink: 0;
}

.analytics-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    align-items: end;
}

.analytics-filter-label {
    display: block;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 6px;
}

.analytics-filter-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    background: var(--surface);
    font-family: inherit;
    transition: border-color 0.15s;
}

.analytics-filter-input:focus {
    border-color: var(--primary);
    outline: none;
}

.analytics-view-container {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.dashboard-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
.dashboard-kpi-card {
    background: var(--surface);
    border-radius: 12px;
    border: 1px solid var(--border);
    padding: 20px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    position: relative;
    overflow: hidden;
}
.dashboard-kpi-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.dashboard-kpi-card .kpi-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dashboard-kpi-card .kpi-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    font-family: 'SF Mono', 'Fira Code', monospace;
    letter-spacing: -0.02em;
}
.dashboard-kpi-card .kpi-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}
.dashboard-kpi-card .kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 20px;
}
.dashboard-kpi-card .kpi-trend.up {
    background: var(--success-light);
    color: #15803d;
}
.dashboard-kpi-card .kpi-trend.down {
    background: var(--danger-light);
    color: #b91c1c;
}

/* ========================================
   C11: DASHBOARD PANEL — Reusable card for
   Pipeline, Alerts, Activity, Projections
   ======================================== */
.dashboard-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.dashboard-panel-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dashboard-panel-header svg {
    width: 14px;
    height: 14px;
}

.dashboard-panel-header .pulse-dot {
    width: 6px;
    height: 6px;
    background: var(--danger);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

/* Pipeline bar */
.pipeline-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.pipeline-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-700);
    min-width: 72px;
}

.pipeline-bar-track {
    flex: 1;
    height: 24px;
    background: var(--gray-100);
    border-radius: 6px;
    overflow: hidden;
}

.pipeline-bar-fill {
    height: 100%;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding-left: 8px;
    transition: width 0.5s ease;
}

.pipeline-bar-fill span {
    font-size: 10px;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.pipeline-count {
    font-size: 14px;
    font-weight: 700;
    min-width: 24px;
    text-align: right;
}

/* Alert item */
.alert-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.1s;
}
.alert-item:hover { background: var(--gray-50); border-radius: 6px; margin: 0 -4px; padding: 8px 4px; }

.alert-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.alert-icon svg { width: 12px; height: 12px; }

.alert-title {
    font-weight: 600;
    color: var(--gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alert-subtitle {
    font-size: 11px;
    color: var(--gray-500);
    margin-top: 1px;
}

/* Activity item */
.activity-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: 12px;
}

.activity-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.activity-time {
    font-size: 10px;
    color: var(--gray-400);
    margin-top: 1px;
}

.activity-amount {
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}

/* Projection row */
.projection-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 12px;
}

.projection-label {
    min-width: 60px;
    color: var(--gray-500);
    font-weight: 500;
}

.projection-bar-track {
    flex: 1;
    height: 16px;
    background: var(--gray-100);
    border-radius: 4px;
    overflow: hidden;
}

.projection-bar-fill {
    height: 100%;
    border-radius: 4px;
}

.projection-value {
    font-weight: 600;
    min-width: 65px;
    text-align: right;
}

.projection-total {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 2px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.projection-total-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-500);
}

.projection-total-value {
    font-size: 20px;
    font-weight: 700;
    font-family: 'SF Mono', monospace;
}

/* Dashboard empty state text */
.dashboard-empty {
    font-size: 12px;
    color: var(--gray-400);
    text-align: center;
    padding: 20px 0;
}

/* Dashboard greeting */
.dashboard-greeting {
    margin-bottom: 24px;
}
.dashboard-greeting h2 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--gray-900);
    margin: 0;
}
.dashboard-greeting p {
    font-size: 13px;
    color: var(--gray-500);
    margin: 4px 0 0;
}

/* Dashboard layout grids */
.dashboard-middle-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 16px;
    margin-bottom: 20px;
}
.dashboard-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 900px) {
    .dashboard-middle-grid,
    .dashboard-bottom-grid { grid-template-columns: 1fr; }
}

.dashboard-action-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.dashboard-action-card {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 160px;
}
.dashboard-action-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.dashboard-action-card .action-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.dashboard-action-card .action-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 6px;
}
.dashboard-action-card .action-expand {
    color: var(--gray-400);
}
.dashboard-action-card .action-content {
    font-size: 13px;
    color: var(--gray-600);
}

@media (max-width: 1200px) {
    .dashboard-kpi-row, .dashboard-action-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .dashboard-kpi-row, .dashboard-action-row { grid-template-columns: 1fr; }
}

/* ============================================
   ANALYTICS CARD GRID (v10.0.88)
   ============================================ */

.analytics-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 1200px) {
    .analytics-card-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .analytics-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .analytics-card-grid { grid-template-columns: 1fr; }
}

.analytics-card {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    height: 160px;
    display: flex;
    flex-direction: column;
}

.analytics-card:hover {
    border-color: var(--orange);
    box-shadow: 0 4px 12px rgba(241, 90, 41, 0.15);
    transform: translateY(-2px);
}

.analytics-card-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--gray-50);
    flex-shrink: 0;
}

.analytics-card-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 8px;
}

.analytics-card-title svg {
    width: 14px;
    height: 14px;
    color: var(--orange);
}

.analytics-card-expand {
    font-size: 14px;
    color: var(--gray-400);
    transition: color 0.2s;
}

.analytics-card:hover .analytics-card-expand {
    color: var(--orange);
}

.analytics-card-preview {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    overflow: hidden;
}

/* Mini KPI Preview */
.mini-kpi {
    text-align: center;
}

.mini-kpi-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--gray-800);
    line-height: 1.2;
}

.mini-kpi-value.success { color: var(--success); }
.mini-kpi-value.orange { color: var(--orange); }
.mini-kpi-value.blue { color: #3b82f6; }
.mini-kpi-value.teal { color: var(--teal); }

.mini-kpi-label {
    font-size: 10px;
    color: var(--gray-400);
    margin-top: 4px;
}

/* Mini Bar Chart */
.mini-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 60px;
}

.mini-bar {
    width: 14px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(to top, var(--orange), #ff8c66);
    min-height: 4px;
}

/* Mini Pie Chart */
.mini-pie {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    position: relative;
}

.mini-pie::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35px;
    height: 35px;
    background: white;
    border-radius: 50%;
}

/* Mini Horizontal Bars */
.mini-h-bars {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 8px;
}

.mini-h-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mini-h-bar-label {
    font-size: 9px;
    color: var(--gray-500);
    width: 45px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-h-bar-track {
    flex: 1;
    height: 8px;
    background: var(--gray-100);
    border-radius: 4px;
    overflow: hidden;
}

.mini-h-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--orange), #ff8c66);
    border-radius: 4px;
}

/* Mini Table */
.mini-table {
    width: 100%;
    padding: 0 8px;
}

.mini-table-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: 10px;
}

.mini-table-row:last-child {
    border-bottom: none;
}

.mini-table-name {
    color: var(--gray-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.mini-table-value {
    font-weight: 600;
    color: var(--gray-700);
}

.mini-empty {
    color: var(--gray-400);
    font-size: 11px;
}

/* Analytics Modal */
.analytics-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

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

.analytics-modal {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 900px;
    height: auto;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px rgba(0,0,0,0.25);
    overflow: hidden;
    transform: scale(0.7);
    opacity: 0;
}

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

.analytics-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 12px;
}

.analytics-modal-title svg {
    width: 20px;
    height: 20px;
    color: var(--orange);
}

.analytics-modal-close {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--gray-100);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.analytics-modal-close:hover {
    background: var(--gray-200);
}

.analytics-modal-close svg {
    width: 18px;
    height: 18px;
    color: var(--gray-500);
}

.analytics-modal-body {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    min-height: 0;
}

/* Chart containers - FIXED dimensions to prevent Chart.js resize loop */
.chart-container {
    position: relative;
    width: 100%;
    height: 350px;
}

.chart-container-sm {
    position: relative;
    width: 280px;
    height: 280px;
    flex-shrink: 0;
}

.chart-container canvas,
.chart-container-sm canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

/* Bubble Animation */
@keyframes bubbleIn {
    0% { transform: scale(0.7); opacity: 0; }
    60% { transform: scale(1.03); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes bubbleOut {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.7); opacity: 0; }
}

.analytics-modal.bubble-in {
    animation: bubbleIn 0.2s ease-out forwards;
}

.analytics-modal.bubble-out {
    animation: bubbleOut 0.15s ease-in forwards;
}

/* Back Button */
.analytics-back-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--gray-100);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.analytics-back-btn:hover {
    background: var(--orange);
}

.analytics-back-btn:hover svg {
    color: white;
}

.analytics-back-btn svg {
    width: 18px;
    height: 18px;
    color: var(--gray-600);
}

/* Chart Drill Hint */
.chart-drill-hint {
    text-align: center;
    font-size: 12px;
    color: var(--gray-400);
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-100);
}

/* KPI Drill Down Hint */
.kpi-drilldown-hint {
    text-align: center;
    margin-top: 24px;
}

/* Drill-Down View Styles */
.drilldown-summary {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--gray-200);
}

.drilldown-stat {
    text-align: center;
    min-width: 100px;
}

.drilldown-stat-value {
    font-size: 32px;
    font-weight: 700;
    display: block;
}

.drilldown-stat-value.success { color: var(--success); }
.drilldown-stat-value.danger { color: var(--danger); }
.drilldown-stat-value.blue { color: #3b82f6; }

.drilldown-stat-label {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 4px;
}

.drilldown-table-wrapper {
    overflow-x: auto;
}

.drilldown-table {
    width: 100%;
    border-collapse: collapse;
}

.drilldown-table th {
    text-align: left;
    padding: 12px 8px;
    font-weight: 600;
    color: var(--gray-700);
    border-bottom: 2px solid var(--gray-200);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.drilldown-table td {
    padding: 12px 8px;
    border-bottom: 1px solid var(--gray-100);
    font-size: 13px;
}

.drilldown-table tr:hover {
    background: var(--gray-50);
}

/* Status badges in drill-down */
/* DEPRECATED: Use .status-pill instead. Used in analytics.js, profit-report.js — migrate to .status-pill */
.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}

.status-badge.status-sold {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
}

.status-badge.status-listed {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.status-badge.status-won {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

.status-badge.status-bidding {
    background: rgba(234, 179, 8, 0.1);
    color: #eab308;
}

.status-badge.status-watching {
    background: rgba(107, 114, 128, 0.1);
    color: var(--gray-500);
}

.status-badge.status-personal {
    background: rgba(236, 72, 153, 0.1);
    color: #ec4899;
}

/* ========================================
   PIPELINE / KANBAN BOARD
   ======================================== */

/* ========================================
   C12: PIPELINE STATS BAR
   ======================================== */
.pipeline-stats-bar {
    padding: 16px 24px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.pipeline-stat-chip {
    background: var(--gray-100);
    padding: 12px 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.15s, box-shadow 0.15s;
}

.pipeline-stat-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.pipeline-stat-chip.success {
    background: var(--success-light);
}
.pipeline-stat-chip.success .pipeline-stat-label { color: var(--success-dark); }
.pipeline-stat-chip.success .pipeline-stat-value { color: var(--success); }

.pipeline-stat-label {
    font-size: 13px;
    color: var(--gray-600);
}

.pipeline-stat-value {
    font-size: 18px;
    font-weight: 700;
    font-family: 'SF Mono', monospace;
    color: var(--gray-800);
}

.pipeline-stat-value.accent { color: var(--accent); }

/* Kanban Board — upgrade from inline style */
.kanban-board {
    display: flex;
    gap: 16px;
    min-height: 500px;
    padding-bottom: 16px;
}

.kanban-column {
    flex: 0 0 280px;
    min-width: 280px;
    background: var(--gray-50);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 280px);
}

.kanban-header {
    padding: 14px 16px;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 14px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.kanban-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kanban-count {
    background: rgba(255,255,255,0.5);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
}

.kanban-cards {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kanban-card {
    background: var(--surface);
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    border: 1px solid var(--gray-200);
}

.kanban-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
    border-color: var(--accent);
}

.kanban-card-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--gray-800);
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.kanban-card-title span {
    flex: 1;
}

.kanban-card-age {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    white-space: nowrap;
}

.kanban-card-age.fresh { background: #dcfce7; color: #166534; }
.kanban-card-age.aging { background: #fef9c3; color: #a16207; }
.kanban-card-age.stale { background: #ffedd5; color: #c2410c; }
.kanban-card-age.problem { background: #fee2e2; color: #dc2626; }

.kanban-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: var(--gray-500);
    margin-bottom: 10px;
}

.kanban-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.kanban-card-meta svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.kanban-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--gray-100);
}

.kanban-card-value {
    font-family: 'SF Mono', Monaco, monospace;
    font-weight: 700;
    font-size: 15px;
    color: var(--accent);
}

.kanban-card-profit {
    font-family: 'SF Mono', Monaco, monospace;
    font-weight: 600;
    font-size: 13px;
}

.kanban-card-profit.positive { color: var(--success); }
.kanban-card-profit.negative { color: var(--danger); }

.kanban-card-actions {
    display: flex;
    gap: 4px;
}

.kanban-card-actions button {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--gray-100);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
    transition: all 0.15s;
}

.kanban-card-actions button:hover {
    background: var(--accent);
    color: white;
}

.kanban-empty {
    text-align: center;
    padding: 24px;
    color: var(--gray-400);
    font-size: 13px;
    font-style: italic;
}

/* Quick status change dropdown */
.kanban-status-dropdown {
    position: absolute;
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    padding: 8px;
    z-index: 100;
    min-width: 150px;
}

.kanban-status-option {
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s;
}

.kanban-status-option:hover {
    background: var(--gray-100);
}

/* Responsive */
@media (max-width: 1200px) {
    .kanban-column {
        flex: 0 0 250px;
        min-width: 250px;
    }
}

@media (max-width: 768px) {
    .kanban-column {
        flex: 0 0 85vw;
        min-width: 85vw;
    }
}

/* Drag and Drop States */
.kanban-card.dragging {
    opacity: 0.5;
    transform: rotate(3deg);
}

.kanban-cards.drag-over {
    background: rgba(139, 92, 246, 0.1);
    border: 2px dashed var(--accent);
    border-radius: 8px;
}

.kanban-card[draggable="true"] {
    cursor: grab;
}

.kanban-card[draggable="true"]:active {
    cursor: grabbing;
}

/* ========================================
   TASK PANEL
   ======================================== */

.task-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    height: 100vh;
    background: white;
    box-shadow: -5px 0 30px rgba(0,0,0,0.15);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.task-panel.open {
    transform: translateX(0);
}

.task-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 999;
}

.task-panel-header {
    padding: 20px;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.task-panel-add {
    padding: 16px 20px;
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    gap: 10px;
}

.task-panel-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.task-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    background: var(--gray-50);
    margin-bottom: 8px;
    transition: all 0.15s;
}

.task-item:hover {
    background: var(--gray-100);
}

.task-item.completed {
    opacity: 0.6;
}

.task-item.completed .task-text {
    text-decoration: line-through;
    color: var(--gray-400);
}

.task-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-300);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.15s;
}

.task-checkbox:hover {
    border-color: var(--accent);
}

.task-checkbox.checked {
    background: var(--success);
    border-color: var(--success);
}

.task-checkbox.checked svg {
    display: block;
}

.task-checkbox svg {
    display: none;
    width: 14px;
    height: 14px;
    color: white;
}

.task-content {
    flex: 1;
}

.task-text {
    font-size: 14px;
    color: var(--gray-800);
    line-height: 1.4;
}

.task-meta {
    font-size: 11px;
    color: var(--gray-400);
    margin-top: 4px;
}

.task-delete {
    opacity: 0;
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: 4px;
    transition: all 0.15s;
}

.task-item:hover .task-delete {
    opacity: 1;
}

.task-delete:hover {
    color: var(--danger);
}

.task-priority {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 8px;
}

.task-priority.high {
    background: #fee2e2;
    color: #dc2626;
}

.task-priority.normal {
    background: #dbeafe;
    color: #2563eb;
}

.task-priority.low {
    background: #f3f4f6;
    color: #6b7280;
}

.task-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--gray-400);
}

@media (max-width: 480px) {
    .task-panel {
        width: 100%;
    }
}

/* ========================================
   MOBILE OPTIMIZATION - PHASE 5
   ======================================== */

/* Mobile Navigation */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        height: 60px;
        width: 100%;
        flex-direction: row;
        justify-content: space-around;
        padding: 8px 0;
        border-radius: 0;
        z-index: 100;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    }
    
    .sidebar .nav-btn {
        width: 44px;
        height: 44px;
    }
    
    .sidebar .nav-divider {
        display: none;
    }
    
    .sidebar .nav-spacer {
        display: none;
    }
    
    .main-content {
        margin-left: 0;
        padding-bottom: 70px;
    }
    
    /* Hide desktop-only sidebar items on mobile bottom bar */
    .sidebar-desktop-only {
        display: none !important;
    }
}

/* Mobile Header */
@media (max-width: 768px) {
    .header {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }
    
    .header h1 {
        font-size: 20px;
    }
    
    .header-actions {
        width: 100%;
        display: flex;
        gap: 8px;
    }
    
    .header-actions .btn {
        flex: 1;
        justify-content: center;
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .header-actions .btn svg {
        width: 16px;
        height: 16px;
    }
}

/* Mobile Stats Row */
@media (max-width: 768px) {
    .stats-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 12px !important;
    }
    
    .stat-card {
        padding: 12px !important;
    }
    
    .stat-value {
        font-size: 20px !important;
    }
    
    .stat-label {
        font-size: 11px !important;
    }
    
    .settlement-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile Table */
@media (max-width: 768px) {
    .table-card {
        border-radius: 0;
        margin: 0 -16px;
    }
    
    .table-toolbar {
        flex-direction: column;
        gap: 12px;
        padding: 12px;
    }
    
    .table-actions {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .data-table {
        font-size: 12px;
    }
    
    .data-table th,
    .data-table td {
        padding: 8px 6px;
        white-space: nowrap;
    }
    
    /* Hide less important columns on mobile */
    .data-table th:nth-child(3),
    .data-table td:nth-child(3),
    .data-table th:nth-child(6),
    .data-table td:nth-child(6) {
        display: none;
    }
}

/* Mobile Kanban */
@media (max-width: 768px) {
    .kanban-board {
        flex-direction: column;
        gap: 12px;
    }
    
    .kanban-column {
        flex: none;
        width: 100%;
        min-width: 100%;
        max-height: none;
    }
    
    .kanban-cards {
        max-height: 300px;
    }
    
    .pipeline-stats {
        flex-direction: column;
        gap: 8px !important;
    }
    
    .pipeline-stat {
        width: 100%;
    }
}

/* Mobile Analytics */
@media (max-width: 768px) {
    .analytics-card-grid {
        grid-template-columns: 1fr !important;
    }
    
    .analytics-modal {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 0 !important;
    }
}

/* Mobile Forms */
@media (max-width: 768px) {
    .modal-content {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    .modal-body {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    .modal-body input.form-input,
    .modal-body select.form-input,
    .modal-body textarea.form-input,
    .modal-body input[type=text],
    .modal-body input[type=number],
    .modal-body input[type=date] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .modal-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }
    
    .modal-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .form-row {
        flex-direction: column;
        gap: 12px;
    }
    
    .form-group {
        width: 100%;
    }
}

/* Mobile Partner Dashboard */
@media (max-width: 768px) {
    #partnerDashboard {
        grid-template-columns: 1fr !important;
    }
}

/* Touch-friendly targets */
@media (max-width: 768px) {
    .btn, button {
        min-height: 44px;
    }
    
    .form-input, .form-select, select, input[type="text"], input[type="number"] {
        min-height: 44px;
        font-size: 16px !important; /* Prevents iOS zoom */
    }
    
    .checkbox {
        width: 24px;
        height: 24px;
    }
}

/* ========================================
   BULK ACTIONS
   ======================================== */

.bulk-actions-bar {
    display: none;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border-top: 1px solid var(--orange);
    padding: 12px 24px;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.bulk-actions-bar.active {
    display: flex;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.bulk-dropdown {
    position: relative;
}

.bulk-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 140px;
    z-index: 100;
    overflow: hidden;
}

.bulk-dropdown-menu.open {
    display: block;
}

.bulk-dropdown-menu button {
    display: block;
    width: 100%;
    padding: 10px 14px;
    text-align: left;
    border: none;
    background: none;
    font-size: 13px;
    color: var(--gray-700);
    cursor: pointer;
    transition: background 0.15s;
}

.bulk-dropdown-menu button:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.btn-warning {
    background: #f59e0b !important;
    color: white !important;
    border-color: #d97706 !important;
}

.btn-warning:hover {
    background: #d97706 !important;
}

.btn-danger {
    background: #ef4444 !important;
    color: white !important;
    border-color: #dc2626 !important;
}

.btn-danger:hover {
    background: #dc2626 !important;
}

/* Mobile bulk actions */
@media (max-width: 768px) {
    .bulk-actions-bar {
        flex-direction: column;
        gap: 12px;
        padding: 12px;
    }
    
    .bulk-actions-bar > div:last-child {
        width: 100%;
        justify-content: center;
    }
    
    .bulk-dropdown-menu {
        position: fixed;
        left: 16px;
        right: 16px;
        top: auto;
        bottom: 80px;
        width: auto;
    }
}

/* ========================================
   AUCTION MODE
   ======================================== */

.auction-mode-btn {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb 0%, #d94a1e 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 20px rgba(241, 90, 41, 0.4);
    cursor: pointer;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.auction-mode-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(241, 90, 41, 0.5);
}

.auction-mode-btn svg {
    width: 24px;
    height: 24px;
}

.auction-mode-overlay {
    position: fixed;
    inset: 0;
    background: var(--gray-900);
    z-index: 1000;
    display: none;
    flex-direction: column;
}

.auction-mode-overlay.active {
    display: flex;
}

.auction-header {
    background: linear-gradient(135deg, #2563eb 0%, #d94a1e 100%);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.auction-header h2 {
    margin: 0;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.auction-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auction-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-anchor: none;
}

.auction-input-group {
    background: var(--gray-800);
    border-radius: 12px;
    padding: 16px;
}

.auction-input-label {
    color: var(--gray-400);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.auction-input {
    width: 100%;
    background: var(--gray-700);
    border: 2px solid var(--gray-600);
    border-radius: 8px;
    padding: 16px;
    font-size: 24px;
    font-family: 'SF Mono', monospace;
    color: white;
    text-align: center;
}

.auction-input:focus {
    outline: none;
    border-color: var(--accent);
}

.auction-result {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
}

.auction-result-label {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    margin-bottom: 8px;
}

.auction-result-value {
    font-family: 'SF Mono', monospace;
    font-size: 48px;
    font-weight: 800;
    color: white;
}

.auction-result.warning {
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
}

.auction-result.danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.auction-quick-fees {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.auction-fee-btn {
    background: var(--gray-800);
    border: 1px solid var(--gray-700);
    border-radius: 8px;
    padding: 12px;
    color: white;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}

.auction-fee-btn:hover {
    background: var(--gray-700);
    border-color: var(--accent);
}

.auction-fee-btn.active {
    background: var(--accent);
    border-color: var(--accent);
}

@media (min-width: 769px) {
    .auction-mode-btn {
        display: none;
    }
}

/* ========================================
   NOTIFICATION SYSTEM
   ======================================== */

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    background: var(--danger);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.notification-panel {
    position: fixed;
    top: 60px;
    right: 20px;
    width: 320px;
    max-height: 400px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    z-index: 1001;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.notification-panel.open {
    display: flex;
}

.notification-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-header h4 {
    margin: 0;
    font-size: 15px;
}

.notification-list {
    flex: 1;
    overflow-y: auto;
    max-height: 340px;
}

.notification-item {
    padding: 12px 16px;
    display: flex;
    gap: 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--gray-100);
    transition: background 0.15s;
}

.notification-item:hover {
    background: var(--gray-50);
}

.notification-item.read {
    opacity: 0.6;
}

.notification-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-icon svg {
    width: 16px;
    height: 16px;
}

.notification-icon.info {
    background: #dbeafe;
    color: #2563eb;
}

.notification-icon.success {
    background: #dcfce7;
    color: #22c55e;
}

.notification-icon.warning {
    background: #fef3c7;
    color: #f59e0b;
}

.notification-icon.error {
    background: #fee2e2;
    color: #ef4444;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-message {
    font-size: 13px;
    color: var(--gray-800);
    line-height: 1.4;
}

.notification-vehicle {
    font-size: 12px;
    color: var(--gray-600);
    font-weight: 500;
}

.notification-time {
    font-size: 11px;
    color: var(--gray-400);
    margin-top: 2px;
}

/* Notification item with vehicle - show hover effect */
.notification-item[onclick*="openVehicleFromNotification"]:hover {
    background: var(--gray-100);
}

.notification-item[onclick*="openVehicleFromNotification"]:hover .notification-message {
    color: var(--primary);
}

@media (max-width: 480px) {
    .notification-panel {
        right: 10px;
        left: 10px;
        width: auto;
    }
}

/* ========================================
   MOBILE SEARCH STYLES
   ======================================== */

@media (max-width: 768px) {
    .search-wrapper {
        width: 100%;
        order: 10;
    }
    
    .search-box {
        width: 100%;
    }
    
    .search-box input {
        width: 100%;
    }
    
    .search-chips {
        width: 100%;
        order: 11;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    
    .search-dropdown {
        position: fixed;
        left: 16px;
        right: 16px;
        top: auto;
        bottom: 80px;
    }
}

/* ========================================
   ENHANCED MOBILE RESPONSIVENESS
   ======================================== */

@media (max-width: 768px) {
    /* Ensure Store Credits button visible on mobile */
    .sidebar #storeCreditsBtn {
        display: flex !important;
    }
    
    /* Adjust credits badge for mobile */
    .sidebar #creditsBadge {
        top: -2px;
        right: -2px;
        font-size: 9px;
        padding: 1px 4px;
    }
    
    /* Inventory cards - single column on small screens */
    .vehicle-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* Vehicle card mobile optimizations */
    .vehicle-card {
        padding: 12px !important;
    }
    
    .vehicle-card-header {
        flex-direction: column;
        gap: 8px;
    }
    
    .vehicle-card-title {
        font-size: 16px !important;
    }
    
    .vehicle-card-meta {
        font-size: 12px !important;
    }
    
    .vehicle-card-prices {
        flex-wrap: wrap;
        gap: 8px !important;
    }
    
    /* Mobile-friendly filter bar */
    .filter-bar {
        flex-direction: column;
        gap: 10px;
    }
    
    .filter-bar .form-select,
    .filter-bar .form-input {
        width: 100%;
    }
    
    /* Modal footer buttons - stack vertically */
    .modal-footer {
        flex-direction: column-reverse;
        gap: 8px;
    }
    
    .modal-footer .btn {
        width: 100%;
    }
    
    /* Store Credits Modal - full screen */
    #storeCreditsModal .modal {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
    }
    
    /* Payment split section stacks vertically on mobile */
    #paymentSplitSection .form-grid.cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    /* Settlement page partner cards */
    .partner-card {
        padding: 12px !important;
    }
    
    .partner-stat-value {
        font-size: 20px !important;
    }
    
    /* Calculator page mobile */
    #calculator-page .form-grid.cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    #calculator-page .chart-card {
        padding: 16px !important;
    }
    
    /* Reports mobile adjustments */
    .report-summary {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Shop page mobile */
    .shop-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Extra small screens (phones in portrait) */
@media (max-width: 480px) {
    .sidebar .nav-btn {
        width: 40px;
        height: 40px;
    }
    
    .sidebar .nav-btn svg {
        width: 18px;
        height: 18px;
    }
    
    /* Even smaller text/values */
    .stat-value {
        font-size: 18px !important;
    }
    
    .stat-label {
        font-size: 10px !important;
    }
    
    /* Single column stats on very small screens */
    .stats-row {
        grid-template-columns: 1fr !important;
    }
    
    /* Smaller modal header */
    .modal-header h2 {
        font-size: 18px;
    }
    
    /* Smaller button text */
    .btn {
        font-size: 13px;
        padding: 10px 14px;
    }
}

/* ==================== AUDIT PAGE ==================== */

/* Audit tabs extend standard tab styling */
.audit-filter-tab.active {
    color: var(--accent) !important;
}

.audit-filter-tab.active::after {
    background: var(--accent) !important;
}

.audit-filter-tab[data-filter="duplicates"].active {
    color: #dc2626 !important;
}

.audit-filter-tab[data-filter="duplicates"].active::after {
    background: #dc2626 !important;
}

.audit-filter-tab[data-filter="clean"].active {
    color: #16a34a !important;
}

.audit-filter-tab[data-filter="clean"].active::after {
    background: #16a34a !important;
}

/* ==================== HELP PAGE ==================== */

/* D17: Help page layout */
/* ============================================
   CAR LOADER ANIMATION (v12.8.4)
   ============================================ */
.car-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}
.car-loader-overlay.active {
    opacity: 1;
    visibility: visible;
}
.car-loader-box {
    background: white;
    padding: 24px 32px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.car-loader-track {
    width: 64px;
    height: 32px;
    overflow: hidden;
    position: relative;
}
.car-loader-track svg {
    position: absolute;
    width: 32px;
    height: 32px;
    animation: carDrive 1s ease-in-out infinite;
}
.car-loader-text {
    font-weight: 600;
    color: var(--gray-900);
}
.car-loader-subtext {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 2px;
}
@keyframes carDrive {
    0% { left: -32px; }
    50% { left: 32px; }
    100% { left: -32px; }
}

/* ============================================ */
/* EXPENSE MODAL ANIMATION                      */
/* ============================================ */
@keyframes expModalSlide {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Expense row styles */
.expense-row {
    display: grid;
    grid-template-columns: 72px 1fr 110px 90px 85px 60px;
    gap: 8px;
    padding: 9px 14px;
    align-items: center;
    border-bottom: 1px solid var(--gray-100);
    transition: background 0.1s;
    cursor: pointer;
}
.expense-row:hover { background: var(--gray-50); }
.expense-row:last-child { border-bottom: none; }

.expense-row .expense-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 0.1s;
}
.expense-row:hover .expense-actions { opacity: 1; }

.expense-row .btn-icon {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.1s;
}
.expense-row .btn-icon svg { width: 13px; height: 13px; }
.expense-row .btn-icon.edit { background: var(--gray-100); color: var(--gray-600); }
.expense-row .btn-icon.edit:hover { background: var(--gray-200); }
.expense-row .btn-icon.delete { background: transparent; color: var(--gray-400); }
.expense-row .btn-icon.delete:hover { background: #fee2e2; color: var(--danger); }

/* Category badges */
.expense-cat-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}
.expense-cat-badge.cat-vehicle { background: #fef3c7; color: #92400e; }
.expense-cat-badge.cat-transportation { background: #dbeafe; color: #1e40af; }
.expense-cat-badge.cat-parts { background: #d1fae5; color: #065f46; }
.expense-cat-badge.cat-tools { background: #ede9fe; color: #5b21b6; }
.expense-cat-badge.cat-bmv { background: #fce7f3; color: #9d174d; }
.expense-cat-badge.cat-fuel { background: #fff7ed; color: #9a3412; }
.expense-cat-badge.cat-detailing { background: #e0f2fe; color: #075985; }
.expense-cat-badge.cat-fees { background: #fef3c7; color: #92400e; }
.expense-cat-badge.cat-refund { background: #d1fae5; color: #065f46; }
.expense-cat-badge.cat-credit { background: #ccfbf1; color: #0f766e; }
.expense-cat-badge.cat-prepayment { background: #e0e7ff; color: #3730a3; }
.expense-cat-badge.cat-other { background: var(--gray-100); color: var(--gray-600); }

/* Expense modal focus styles */
#expenseModal input:focus,
#expenseModal select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.1);
    outline: none;
}

/* ============================================
   SOLD PAGE (Phase 1 IA Restructure)
   ============================================ */

#sold-page .table-header,
#sold-page .table-row {
    grid-template-columns: 1fr 80px 90px 85px 85px 85px 60px 55px 70px 90px 40px;
}

/* Settlement badge */
.settlement-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.settlement-badge.settled {
    background: var(--success-light, #dcfce7);
    color: var(--success, #16a34a);
}
.settlement-badge.settled:hover {
    background: #bbf7d0;
}
.settlement-badge.unsettled {
    background: var(--warning-light, #fef3c7);
    color: var(--warning, #d97706);
}
.settlement-badge.unsettled:hover {
    background: #fde68a;
}

/* ============================================
 * DASHBOARD RESPONSIVE + DARK MODE (v13.22.0)
 * ============================================ */

#dashboard-page .header {
    flex-wrap: wrap;
    gap: 8px;
}

/* KPI grid responsive */
@media (max-width: 900px) {
    #dashboard-page > div:nth-child(2) {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 500px) {
    #dashboard-page > div:nth-child(2) {
        grid-template-columns: 1fr !important;
    }
}

/* Bottom 3-col responsive */
@media (max-width: 1000px) {
    #dashboard-page > div:last-child {
        grid-template-columns: 1fr !important;
    }
}

/* Dark mode: Getting Started checklist */
body.dark-mode #dashQuickStart div[style*="line-through"] {
    color: var(--gray-500) !important;
}

/* Dark mode: Lifecycle guide */
body.dark-mode #dashLifecycleGuide span {
    color: var(--gray-600);
}

/* Dark mode: Quick Start banner */
body.dark-mode [style*="linear-gradient(135deg, #eff6ff"] {
    background: linear-gradient(135deg, var(--blue-light, #1e3a5f) 0%, var(--bg-elevated, #252d3d) 100%) !important;
    border-color: var(--border) !important;
}
body.dark-mode [style*="color: #1e40af"] {
    color: var(--gray-700) !important;
}

/* ============================================
 * IMPORT WIZARD (v13.23.0)
 * ============================================ */

.import-step {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--gray-400);
    font-weight: 500;
}
.import-step.active {
    color: var(--accent, #3b82f6);
    font-weight: 600;
}
.import-step.done {
    color: var(--success-dark, #16a34a);
}
.import-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    background: var(--gray-100);
    color: var(--gray-500);
    flex-shrink: 0;
}
.import-step.active .import-step-num {
    background: var(--accent, #3b82f6);
    color: white;
}
.import-step.done .import-step-num {
    background: var(--success-light, #dcfce7);
    color: var(--success-dark, #16a34a);
}
.import-step-line {
    width: 32px;
    height: 2px;
    background: var(--gray-200);
    flex-shrink: 0;
}

/* ========================================
   PWA CONNECTION STATUS BAR (v13.25.2)
   ======================================== */

.connection-status {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10001;
    display: none;
    justify-content: center;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
    animation: slideDown 0.3s ease;
}

.connection-status.offline {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
}

.connection-status.online {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: white;
}

.connection-status-inner {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sync-badge {
    background: rgba(255,255,255,0.25);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

@media (max-width: 768px) {
    .connection-status {
        top: auto;
        bottom: 60px; /* above mobile bottom nav */
        border-radius: 0;
    }
}

/* ========================================
   MOBILE SCROLL & OVERFLOW FIX (v13.25.2)
   ======================================== */

/* Prevent horizontal overflow globally */
html {
    overflow-x: hidden;
    max-width: 100vw;
}

@media (max-width: 768px) {
    /* Allow body to scroll on mobile */
    body {
        overflow-x: hidden;
        overflow-y: auto;
        height: auto;
        min-height: 100vh;
    }
    
    /* App container - stack vertically on mobile */
    .app {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        overflow-x: hidden;
    }
    
    /* Main area - allow scroll */
    .main {
        overflow-y: auto;
        overflow-x: hidden;
        height: auto;
        min-height: calc(100vh - 60px);
        -webkit-overflow-scrolling: touch;
    }
    
    /* ALL pages must scroll on mobile */
    .page {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100vw;
        height: auto;
        min-height: 0;
    }
    
    .page.active {
        height: auto;
    }
    
    /* Contain all children within viewport width */
    .header,
    .page-header,
    .stats,
    .card,
    .form-grid,
    .bulk-actions-bar {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Tables scroll horizontally within their container only */
    .table-section {
        max-width: 100%;
        overflow-x: auto;
    }
}

/* ========================================
   SHOP & SETTINGS MOBILE FIX (v13.25.2)
   ======================================== */

@media (max-width: 768px) {
    /* Settings: stack 2-column layout */
    .settings-layout {
        padding: 16px !important;
    }
    
    .settings-tab-bar {
        padding: 0 12px;
        overflow-x: auto;
    }
    
    .settings-tab {
        padding: 10px 14px;
        font-size: 13px;
        white-space: nowrap;
    }
    
    /* Shop stat cards: 2-column grid instead of overflowing row */
    .stat-card-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 12px 16px !important;
        overflow-x: visible !important;
    }
    
    .stat-card-row .stat-card {
        min-width: 0 !important;
    }
    
    /* Shop fixed stats row: unfixed on mobile */
    .shop-stats-row {
        position: static !important;
        left: auto !important;
        right: auto !important;
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 12px 16px !important;
        gap: 10px !important;
    }
    
    /* Shop tabs: scrollable, smaller text */
    .shop-tabs {
        padding: 0 8px !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .shop-tabs::-webkit-scrollbar { display: none; }
    
    .shop-tab {
        padding: 12px 8px !important;
        font-size: 12px !important;
        gap: 4px !important;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .shop-tab svg {
        width: 16px !important;
        height: 16px !important;
    }
}

@media (max-width: 480px) {
    /* Single column stats on very small screens */
    .stat-card-row {
        grid-template-columns: 1fr !important;
    }
    
    .shop-stats-row {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   AUCTION MODE PH-3 ENHANCEMENTS (v13.25.4)
   ======================================== */

/* Decode button */
.auction-action-btn {
    background: var(--gray-700);
    color: white;
    border: 2px solid var(--gray-600);
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}
.auction-action-btn:hover { background: var(--gray-600); }
.auction-action-btn:disabled { opacity: 0.5; cursor: wait; }

/* Decoded vehicle info card */
.auction-vehicle-info {
    background: linear-gradient(135deg, var(--gray-800) 0%, var(--gray-700) 100%);
    border-radius: 12px;
    padding: 14px 16px;
    border-left: 4px solid var(--accent);
}

/* Save to pipeline buttons */
.auction-save-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: white;
    transition: all 0.15s;
}
.auction-save-btn:disabled { cursor: not-allowed; }
.auction-save-btn.watching {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}
.auction-save-btn.watching:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}
.auction-save-btn.bidding {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.auction-save-btn.bidding:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

/* Session history */
.auction-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--gray-800);
    border-radius: 8px;
    margin-bottom: 6px;
}
.auction-history-title {
    color: white;
    font-size: 13px;
    font-weight: 600;
}
.auction-history-meta {
    color: var(--gray-500);
    font-size: 11px;
    margin-top: 2px;
}
.auction-history-bid {
    color: #22c55e;
    font-family: 'SF Mono', monospace;
    font-size: 15px;
    font-weight: 700;
}

/* Result warning/danger states */
.auction-result.warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.auction-result.danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* Mobile: FAB above bottom nav */
@media (max-width: 768px) {
    .auction-mode-btn {
        bottom: 72px !important;
        right: 16px !important;
        width: 52px !important;
        height: 52px !important;
    }

    /* Enable bidding button based on save button state */
    #auctionSaveBidBtn {
        opacity: 0.4;
    }
}

/* ========================================
   AUCTION MODE PH-3 v13.25.5 ENHANCEMENTS
   Barcode scanner, Market data, OCR comps
   ======================================== */

/* Scanner button */
.auction-scan-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border-color: #2563eb !important;
    padding: 12px 14px !important;
}
.auction-scan-btn:hover { opacity: 0.9; }

/* Barcode reader viewport */
#auctionBarcodeReader {
    border-radius: 8px;
    overflow: hidden;
    max-height: 200px;
}
#auctionBarcodeReader video {
    border-radius: 8px;
}

/* Market data card */
.auction-market-card {
    background: linear-gradient(135deg, var(--gray-800) 0%, #1a2332 100%);
    border-radius: 12px;
    padding: 14px;
    border: 1px solid var(--gray-700);
}
.auction-market-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-300);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.auction-market-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.auction-market-stat {
    background: var(--gray-800);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}
.auction-market-label {
    font-size: 10px;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.auction-market-value {
    font-family: 'SF Mono', monospace;
    font-size: 16px;
    font-weight: 700;
    color: white;
}
.auction-market-value.highlight {
    color: #22c55e;
}

/* OCR button */
.auction-ocr-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.auction-ocr-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.auction-ocr-btn:disabled { opacity: 0.5; cursor: wait; transform: none; }

/* Comp items */
.auction-comp-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: var(--gray-800);
    border-radius: 6px;
    margin-bottom: 4px;
}
.auction-comp-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.auction-comp-price {
    font-family: 'SF Mono', monospace;
    font-weight: 600;
    color: white;
    font-size: 14px;
}
.auction-comp-miles {
    font-size: 11px;
    color: var(--gray-400);
}
.auction-comp-source {
    font-size: 10px;
    color: var(--gray-500);
    background: var(--gray-700);
    padding: 2px 6px;
    border-radius: 4px;
}
.auction-comp-remove {
    background: none;
    border: none;
    color: var(--gray-500);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}
.auction-comp-remove:hover { color: #ef4444; }

/* Estimated value row */
.auction-est-value-row {
    background: linear-gradient(135deg, #065f46 0%, #064e3b 100%);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #10b981;
}
.auction-est-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #a7f3d0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.auction-est-amount {
    font-family: 'SF Mono', monospace;
    font-size: 22px;
    font-weight: 700;
    color: #22c55e;
}

/* FB Marketplace button in auction mode */
.auction-fb-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    background: linear-gradient(135deg, #1877f2 0%, #0d65d9 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.auction-fb-btn:hover { opacity: 0.9; transform: translateY(-1px); }

/* ========================================
   PH-4: COMPREHENSIVE MOBILE RESPONSIVE
   360px-first mobile card layouts
   ======================================== */

@media (max-width: 768px) {

    /* --- CORE LAYOUT --- */
    .page { overflow-y: auto !important; overflow-x: hidden !important; }
    .table-card { margin: 12px !important; border-radius: 10px !important; }
    .table-section { overflow-x: hidden !important; }

    /* Reset min-width from earlier breakpoint that sets .table-row to 900px */
    #sold-page .table-row,
    .table-row.inventory,
    .table-row.workorders,
    .table-row.customers,
    .table-row.vendors,
    #settlement-page .table-row {
        min-width: 0 !important;
    }

    /* --- INVENTORY TABLE → CARD LAYOUT --- */
    .table-header.inventory { display: none !important; }

    .table-row.inventory {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;
        gap: 4px 8px !important;
        padding: 14px 16px !important;
        border-bottom: 1px solid var(--gray-100);
        align-items: center;
    }

    /* Inventory cells by position (12 total):
       1=checkbox, 2=vehicle, 3=source, 4=age, 5=status,
       6=audited, 7=acquisition, 8=expenses, 9=sold, 10=profit,
       11=velocity, 12=actions */

    /* Hide: checkbox(1), source(3), age(4), audited(6), acquisition(7), expenses(8), sold(9), velocity(11), actions(12) */
    .table-row.inventory > .td:nth-child(1),
    .table-row.inventory > .td:nth-child(3),
    .table-row.inventory > .td:nth-child(4),
    .table-row.inventory > .td:nth-child(6),
    .table-row.inventory > .td:nth-child(7),
    .table-row.inventory > .td:nth-child(8),
    .table-row.inventory > .td:nth-child(9),
    .table-row.inventory > .td:nth-child(11),
    .table-row.inventory > .td:nth-child(12) {
        display: none !important;
    }

    /* Vehicle name (2) - full width row 1 */
    .table-row.inventory > .td:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .table-row.inventory .cell-vehicle { gap: 10px; }
    .table-row.inventory .vehicle-info h4 { font-size: 14px; }
    .table-row.inventory .vehicle-vin { font-size: 11px; }

    /* Status (5) - row 2 left */
    .table-row.inventory > .td:nth-child(5) {
        grid-column: 1;
        grid-row: 2;
    }

    /* Profit (10) - row 2 right */
    .table-row.inventory > .td:nth-child(10) {
        grid-column: 2;
        grid-row: 2;
        text-align: right;
        font-weight: 700;
        font-size: 15px;
    }

    /* --- SOLD TABLE → CARD LAYOUT --- */
    /* Sold columns (11): 1=vehicle, 2=source, 3=date, 4=cost, 5=sold, 6=profit, 7=ROI, 8=hold, 9=velocity, 10=settled, 11=actions */
    #sold-page .table-header { display: none !important; }

    #sold-page .table-row {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-rows: auto auto !important;
        gap: 2px 8px !important;
        padding: 10px 16px !important;
        border-bottom: 1px solid var(--gray-100);
        align-items: center;
    }

    /* Hide: source(2), cost(4), ROI(7), hold(8), velocity(9), actions(11) */
    #sold-page .table-row > .td:nth-child(2),
    #sold-page .table-row > .td:nth-child(4),
    #sold-page .table-row > .td:nth-child(7),
    #sold-page .table-row > .td:nth-child(8),
    #sold-page .table-row > .td:nth-child(9),
    #sold-page .table-row > .td:nth-child(11) {
        display: none !important;
    }

    /* Vehicle (1) - row 1 left */
    #sold-page .table-row > .td:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1;
        font-weight: 600;
        font-size: 14px;
    }

    /* Date (3) - row 1 right */
    #sold-page .table-row > .td:nth-child(3) {
        grid-column: 3;
        grid-row: 1;
        text-align: right;
        font-size: 12px;
        color: var(--gray-500);
    }

    /* Settled badge (10) - row 2 left */
    #sold-page .table-row > .td:nth-child(10) {
        grid-column: 1;
        grid-row: 2;
    }
    #sold-page .table-row > .td:nth-child(10) .settlement-badge {
        font-size: 10px;
        padding: 2px 8px;
    }

    /* Sold price (5) - row 2 center */
    #sold-page .table-row > .td:nth-child(5) {
        grid-column: 2;
        grid-row: 2;
        text-align: right;
        font-size: 13px;
    }

    /* Profit (6) - row 2 right */
    #sold-page .table-row > .td:nth-child(6) {
        grid-column: 3;
        grid-row: 2;
        text-align: right;
        font-weight: 700;
        font-size: 14px;
    }

    /* --- SHOP WORK ORDERS → CARD LAYOUT --- */
    /* WO columns (9): 1=WO#, 2=date, 3=vehicle, 4=customer, 5=status, 6=parts, 7=labor, 8=total, 9=actions */
    .table-header.workorders { display: none !important; }

    .table-row.workorders {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto auto !important;
        gap: 2px 8px !important;
        padding: 14px 16px !important;
        border-bottom: 1px solid var(--gray-100);
    }

    /* Hide: date(2), customer(4), parts(6), labor(7), actions(9) */
    .table-row.workorders > .td:nth-child(2),
    .table-row.workorders > .td:nth-child(4),
    .table-row.workorders > .td:nth-child(6),
    .table-row.workorders > .td:nth-child(7),
    .table-row.workorders > .td:nth-child(9) {
        display: none !important;
    }

    /* WO# (1) */
    .table-row.workorders > .td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 600; }
    /* Vehicle (3) */
    .table-row.workorders > .td:nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
    /* Status (5) */
    .table-row.workorders > .td:nth-child(5) { grid-column: 1; grid-row: 3; }
    /* Total (8) */
    .table-row.workorders > .td:nth-child(8) { grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; }

    /* --- SHOP CUSTOMERS → CARD --- */
    .table-header.customers { display: none !important; }
    .table-row.customers {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        padding: 12px 16px !important;
        border-bottom: 1px solid var(--gray-100);
    }
    /* Hide phone(2), email(3), vehicles(4), actions(6) */
    .table-row.customers > .td:nth-child(2),
    .table-row.customers > .td:nth-child(3),
    .table-row.customers > .td:nth-child(4),
    .table-row.customers > .td:nth-child(6) {
        display: none !important;
    }

    /* --- SHOP VENDORS → CARD --- */
    .table-header.vendors { display: none !important; }
    .table-row.vendors {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        padding: 12px 16px !important;
        border-bottom: 1px solid var(--gray-100);
    }
    .table-row.vendors > .td:nth-child(2),
    .table-row.vendors > .td:nth-child(3),
    .table-row.vendors > .td:nth-child(4),
    .table-row.vendors > .td:nth-child(6) {
        display: none !important;
    }

    /* --- REPORTS LAYOUT --- */
    .report-layout {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto 1fr !important;
    }
    .report-sidebar {
        border-right: none !important;
        border-bottom: 1px solid var(--border);
        max-height: 200px;
        overflow-y: auto;
    }

    /* --- PIPELINE PAGE --- */
    .pipeline-stats {
        flex-wrap: wrap !important;
    }
    .pipeline-stat {
        flex: 1 1 45% !important;
        min-width: 140px !important;
    }

    /* --- SETTLEMENT PAGE --- */
    .settlement-grid {
        grid-template-columns: 1fr !important;
    }

    /* Settlement table */
    #settlement-page .table-header { display: none !important; }
    #settlement-page .table-row {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        padding: 12px 16px !important;
        border-bottom: 1px solid var(--gray-100);
    }

    /* --- GENERAL OVERFLOW PREVENTION --- */
    .filter-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
    .filter-bar > * { flex-shrink: 0; }
    .bulk-actions-bar { flex-wrap: wrap; padding: 12px !important; gap: 8px !important; }
    .bulk-actions-bar .btn { font-size: 12px; padding: 8px 10px; }

    /* Tabs scrollable on all pages */
    .report-tabs, .shop-tabs, .audit-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap !important;
    }
    .report-tabs::-webkit-scrollbar,
    .shop-tabs::-webkit-scrollbar,
    .audit-tabs::-webkit-scrollbar { display: none; }
    .report-tab, .shop-tab, .audit-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Task panel full width on mobile */
    .task-panel { width: 100% !important; left: 0; }

    /* Filter dropdowns don't overflow */
    .filter-dropdown-menu {
        position: fixed !important;
        left: 16px !important;
        right: 16px !important;
        max-height: 300px;
        overflow-y: auto;
    }

    /* Vehicle form modal scrollable */
    .modal-body { max-height: calc(100vh - 120px); overflow-y: auto; }

    /* Help page grid */
    .help-topic-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Extra small (360px and below) */
@media (max-width: 400px) {
    .table-card { margin: 8px !important; }
    .header { padding: 12px !important; }
    .header h1 { font-size: 18px !important; }
    .header-actions .btn { font-size: 12px !important; padding: 8px 10px !important; }
    .stats-row { gap: 6px !important; padding: 8px !important; }
    .stat-card { padding: 10px !important; }
    .stat-value { font-size: 16px !important; }
}

/* ============================================
   PH-4: MOBILE RESPONSIVE POLISH (v13.25.11)
   Targets inline-styled grids not covered by
   existing mobile card layouts
   ============================================ */

@media (max-width: 768px) {

    /* --- DASHBOARD PAGE --- */
    /* 4-column stat cards → 2x2 */
    #dashboard-page > div > div[style*="repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 0 12px !important;
        gap: 10px !important;
    }
    /* 3-column section cards → stack */
    #dashboard-page > div > div[style*="1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        padding: 0 12px !important;
        gap: 12px !important;
    }
    /* Dashboard inner padding */
    #dashboard-page .page-header { padding: 12px !important; }

    /* --- CALCULATOR PAGE --- */
    /* 2-column calc inputs → stack */
    #calculator-page div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    /* 3-column result grid → 1 column */
    #calculator-page div[style*="1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    /* Fix fixed-width inputs */
    #calculator-page #maxBidVin {
        width: 100% !important;
    }
    #calculator-page #maxBidLoadVehicle {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    #calculator-page #maxBidKbbValue {
        width: 80px !important;
    }
    /* Calculator panel full width */
    #maxBidCalcPanel {
        padding: 0 12px !important;
    }
    /* Calculator toolbar - wrap */
    #calculator-page .page-header + div[style*="display: flex"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* --- SETTLEMENT PAGE --- */
    /* Partner dashboard 2-col → stack */
    #partnerDashboard {
        grid-template-columns: 1fr !important;
    }
    /* Settlement table scroll */
    #settlement-page .table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #settlement-page table {
        min-width: 600px;
    }

    /* --- ARCHIVE PAGE --- */
    /* Archive stat cards (same fix as Shop) */
    #archive-page .stat-card-row,
    #archiveStatsRow {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        overflow-x: visible !important;
    }
    #archive-page .stat-card-row .stat-card {
        min-width: 0 !important;
    }
    /* Archive search bar padding */
    #archiveSearchBar {
        padding: 12px !important;
    }
    #archiveSearchBar div[style*="max-width: 360px"] {
        max-width: 100% !important;
    }

    /* --- GLOBAL INLINE PADDING REDUCTION --- */
    div[style*="padding: 0 24px"],
    div[style*="padding:0 24px"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* --- ANALYTICS PAGE --- */
    #analytics-page .analytics-controls {
        flex-wrap: wrap !important;
    }

    /* --- PIPELINE KANBAN PADDING --- */
    #pipelineKanban {
        padding: 0 12px 12px 12px !important;
    }

    /* --- PAGE HEADER TITLE + SUBTITLE --- */
    .page-header p[style*="font-size: 12px"] {
        display: none !important; /* Hide subtitle on mobile */
    }
}

/* Extra small screens (360px) */
@media (max-width: 400px) {
    /* Dashboard stat cards → single column */
    #dashboard-page > div > div[style*="repeat(4"] {
        grid-template-columns: 1fr !important;
    }
    /* Kanban columns even wider */
    .kanban-column {
        flex: 0 0 92vw !important;
        min-width: 92vw !important;
    }
    /* Archive stats single column */
    #archive-page .stat-card-row,
    #archiveStatsRow {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   AUCTION MODE TOGGLE (v13.25.16)
   Pre-Auction / Live Auction tabs
   ======================================== */

.auction-mode-toggle {
    display: flex;
    gap: 4px;
    background: var(--gray-900);
    border-radius: 0;
    padding: 8px 20px;
    margin-bottom: 0;
    flex-shrink: 0;
    border-bottom: 1px solid var(--gray-700);
}
.auction-mode-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--gray-400);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.auction-mode-tab.active {
    background: var(--gray-700);
    color: white;
}
.auction-mode-tab:not(.active):hover {
    color: var(--gray-300);
}

/* Live save button */
.auction-save-btn.live-save {
    width: 100%;
    margin-top: 12px;
    padding: 16px;
    font-size: 16px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-color: #16a34a;
}
.auction-save-btn.live-save:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

/* ========================================
   AUCTION OBSERVATIONS (v13.25.23)
   Quick-tap condition checklist with costs
   ======================================== */

.auction-observations {
    margin-bottom: 12px;
}
.auction-obs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.auction-obs-chip {
    padding: 6px 12px;
    background: var(--gray-800);
    border: 1px solid var(--gray-700);
    border-radius: 20px;
    color: var(--gray-400);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.auction-obs-chip:hover {
    border-color: var(--gray-500);
    color: var(--gray-300);
}
.obs-cost-hint {
    font-size: 10px;
    opacity: 0.5;
    font-weight: 400;
}
.auction-obs-chip.active {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    color: #f87171;
}
.auction-obs-chip[data-obs="Runs Good"].active,
.auction-obs-chip[data-obs="Clean"].active {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
    color: #4ade80;
}

/* Observation cost detail rows */
.auction-obs-detail {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.auction-obs-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: rgba(239, 68, 68, 0.08);
    border-radius: 8px;
    border-left: 3px solid #ef4444;
}
.auction-obs-row.positive {
    background: rgba(34, 197, 94, 0.08);
    border-left-color: #22c55e;
}
.auction-obs-row-name {
    color: var(--gray-300);
    font-size: 13px;
    font-weight: 500;
}
.auction-obs-row-cost {
    display: flex;
    align-items: center;
    gap: 2px;
    color: #f87171;
    font-size: 13px;
    font-weight: 600;
}

/* Observation total */
.auction-obs-total {
    font-size: 12px;
    font-weight: 600;
    color: #f87171;
}
.auction-obs-total span {
    font-family: 'SF Mono', monospace;
}

/* ========================================
   AUCTION WATCHLIST (v13.25.23)
   ======================================== */

.auction-watchlist {
    max-height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.auction-watch-card {
    padding: 10px 12px;
    background: var(--gray-800);
    border: 1px solid var(--gray-700);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
}
.auction-watch-card:hover {
    border-color: var(--gray-500);
}
.auction-watch-card.selected {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}
.auction-watch-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.auction-watch-name {
    color: white;
    font-size: 14px;
    font-weight: 600;
}
.auction-watch-status {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 10px;
}
.auction-watch-status.watching {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}
.auction-watch-status.bidding {
    background: rgba(249, 115, 22, 0.2);
    color: #fb923c;
}
.auction-watch-bottom {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}
.auction-watch-est {
    color: #4ade80;
    font-size: 13px;
    font-weight: 600;
    font-family: 'SF Mono', monospace;
}
.auction-watch-obs {
    color: var(--gray-400);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* ========================================
   AUCTION MODE v2 — CARD WORKFLOW (v13.27.0)
   Cards: Identify → Inspect → Price → Decide
   Undo deletion, confidence bars, history comps
   ======================================== */

/* --- Card container --- */
.ac-card {
    background: var(--gray-800);
    border: 1px solid var(--gray-700);
    border-radius: 14px;
    margin-bottom: 10px;
    transition: border-color 0.3s ease;
}
.ac-card.ac-active {
    border-color: var(--gray-600);
}

/* --- Card header (clickable) --- */
.ac-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    background: var(--gray-800);
    border-radius: 14px 14px 0 0;
    z-index: 10;
}
/* Active card header sticks to top of scroll container */
.ac-card.ac-active .ac-card-header {
    position: sticky;
    top: 0;
}
.ac-card-header:active {
    background: rgba(255,255,255,0.03);
}
.ac-card-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ac-step {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gray-700);
    color: var(--gray-400);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s;
}
.ac-card.ac-active .ac-step {
    background: #2563eb;
    color: white;
}
.ac-card.ac-completed .ac-step {
    background: #22c55e;
    color: white;
}
.ac-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-300);
    transition: color 0.2s;
}
.ac-card.ac-active .ac-card-title {
    color: white;
}
.ac-chevron {
    color: var(--gray-500);
    transition: transform 0.3s;
    flex-shrink: 0;
}
.ac-card.ac-active .ac-chevron {
    transform: rotate(180deg);
}

/* --- Card summary (collapsed state) --- */
.ac-card-summary {
    display: none;
    padding: 0 16px 12px 56px;
    font-size: 13px;
    color: var(--gray-400);
    line-height: 1.4;
}
.ac-card.ac-completed:not(.ac-active) .ac-card-summary {
    display: block;
}
.ac-card-summary strong {
    color: var(--gray-200);
    font-weight: 600;
}
.ac-summary-green {
    color: #22c55e;
    font-family: 'SF Mono', monospace;
    font-weight: 600;
}
.ac-summary-warn {
    color: #f87171;
    font-family: 'SF Mono', monospace;
    font-weight: 600;
}

/* --- Card body (expandable) --- */
.ac-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 16px;
}
.ac-card.ac-active .ac-card-body {
    max-height: 3000px;
    padding: 0 16px 16px;
}

/* --- Next button inside cards --- */
.ac-btn-next {
    width: 100%;
    padding: 12px;
    background: var(--gray-700);
    border: 1px solid var(--gray-600);
    border-radius: 10px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 12px;
}
.ac-btn-next:active {
    background: var(--gray-600);
}

/* --- Decide footer (sticky bottom bar) --- */
.ac-decide-footer {
    flex-shrink: 0;
    background: var(--gray-800);
    border-top: 1px solid var(--gray-700);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}
.ac-decide-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.ac-decide-bid {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.ac-decide-bid-label {
    color: var(--gray-400);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ac-decide-bid-value {
    font-size: 24px;
    font-weight: 800;
    color: #22c55e;
    font-family: 'SF Mono', monospace;
}
.ac-decide-stats {
    display: flex;
    gap: 14px;
}
.ac-decide-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.ac-decide-stat-label {
    color: var(--gray-500);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ac-decide-stat-value {
    color: white;
    font-family: 'SF Mono', monospace;
    font-size: 14px;
    font-weight: 600;
}
.ac-decide-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.ac-decide-footer.warning .ac-decide-bid-value {
    color: #eab308;
}
.ac-decide-footer.danger .ac-decide-bid-value {
    color: #ef4444;
}

/* --- Historical comps --- */
.ac-history-summary {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
    padding: 10px;
    background: linear-gradient(135deg, rgba(34,197,94,0.08), rgba(34,197,94,0.03));
    border: 1px solid rgba(34,197,94,0.15);
    border-radius: 10px;
}
.ac-history-stat {
    text-align: center;
}
.ac-history-label {
    font-size: 10px;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ac-history-value {
    font-family: 'SF Mono', monospace;
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-200);
    margin-top: 2px;
}
.ac-history-value.ac-green { color: #22c55e; }
.ac-history-value.ac-red { color: #ef4444; }

/* --- Comp items (shared for history + FB + manual) --- */
.auction-comp-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: var(--gray-900);
    border-radius: 8px;
    margin-bottom: 4px;
    transition: opacity 0.3s, background 0.3s;
}
.auction-comp-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    min-width: 0;
    flex: 1;
}
.auction-comp-price {
    font-family: 'SF Mono', monospace;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}
.auction-comp-miles {
    color: var(--gray-400);
    font-size: 11px;
    flex-shrink: 0;
}
.auction-comp-vehicle {
    color: var(--gray-400);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.auction-comp-source {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    white-space: nowrap;
}
.ac-src-fb { background: rgba(24,119,242,0.2); color: #60a5fa; }
.ac-src-manual { background: rgba(148,163,184,0.2); color: var(--gray-400); }
.ac-src-history { background: rgba(34,197,94,0.2); color: #4ade80; }

/* --- Comp remove / undo --- */
.auction-comp-remove {
    background: none;
    border: none;
    color: var(--gray-600);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.auction-comp-remove:hover {
    color: #f87171;
    background: rgba(239,68,68,0.1);
}
.auction-comp-item.ac-pending-delete {
    opacity: 0.4;
    background: rgba(239,68,68,0.05);
}
.auction-comp-undo {
    background: rgba(59,130,246,0.15);
    border: 1px solid rgba(59,130,246,0.3);
    color: #60a5fa;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    animation: ac-undo-pulse 0.5s ease;
}
.auction-comp-undo:active {
    background: rgba(59,130,246,0.25);
}
@keyframes ac-undo-pulse {
    0% { transform: scale(0.9); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* --- Confidence breakdown --- */
.ac-confidence-box {
    padding: 12px;
    background: var(--gray-900);
    border-radius: 10px;
    border: 1px solid var(--gray-700);
    margin-bottom: 12px;
}
.ac-confidence-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.ac-confidence-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ac-conf-high { background: rgba(34,197,94,0.2); color: #4ade80; }
.ac-conf-med { background: rgba(234,179,8,0.2); color: #fbbf24; }
.ac-conf-low { background: rgba(239,68,68,0.2); color: #f87171; }
.ac-conf-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.ac-conf-label {
    font-size: 11px;
    color: var(--gray-400);
    width: 100px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ac-conf-bar {
    flex: 1;
    height: 6px;
    background: var(--gray-700);
    border-radius: 3px;
    overflow: hidden;
}
.ac-conf-fill {
    height: 100%;
    background: #2563eb;
    border-radius: 3px;
    transition: width 0.5s;
}
.ac-conf-val {
    font-family: 'SF Mono', monospace;
    font-size: 12px;
    color: var(--gray-300);
    font-weight: 600;
    width: 65px;
    text-align: right;
    flex-shrink: 0;
}

/* --- Hammer price comparison (live mode) --- */
.ac-hammer-diff {
    font-family: 'SF Mono', monospace;
    font-weight: 600;
    font-size: 14px;
}
.ac-hammer-diff.ac-under { color: #22c55e; }
.ac-hammer-diff.ac-over { color: #ef4444; }

/* ========================================
   MOBILE PWA POLISH (v13.26.0)
   iOS safe areas, sub-tab scroll,
   auction mode mobile, bottom nav fixes
   ======================================== */

@media (max-width: 768px) {

    /* --- iOS SAFE AREA INSETS --- */
    .sidebar {
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .main-content {
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* --- SUB-TAB BAR SCROLLABLE --- */
    .sub-tab-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap !important;
        padding: 8px 12px 0 !important;
    }
    .sub-tab-bar::-webkit-scrollbar { display: none; }
    .sub-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* --- AUCTION MODE MOBILE --- */
    /* Calc inputs: 3-col → 2-col + full width profit */
    .auction-body div[style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
    }
    .auction-body div[style*="grid-template-columns: 1fr 1fr 1fr"] > .auction-input-group:last-child {
        grid-column: 1 / -1;
    }

    /* Observation chips: slightly larger touch targets */
    .auction-obs-chip {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    /* Watchlist: taller for easier scrolling */
    .auction-watchlist {
        max-height: 300px;
    }

    /* Auction body scroll */
    .auction-body {
        padding-bottom: 16px !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Card workflow mobile tweaks */
    .ac-card-body {
        padding: 0 12px;
    }
    .ac-card.ac-active .ac-card-body {
        padding: 0 12px 14px;
    }
    .ac-history-summary {
        gap: 4px;
        padding: 8px;
    }
    .ac-history-value {
        font-size: 13px;
    }
    .ac-conf-label {
        width: 80px;
        font-size: 10px;
    }
    .ac-conf-val {
        width: 55px;
        font-size: 11px;
    }

    /* Auction header: safe area top */
    .auction-header {
        padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
    }

    /* Decide footer: safe area */
    .ac-decide-footer {
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }
    }
}

/* Extra small phones (iPhone SE, 360px) */
@media (max-width: 400px) {
    /* Bottom nav: tighten spacing */
    .sidebar .nav-btn {
        width: 40px !important;
        height: 40px !important;
    }

    /* Auction obs chips: wrap tighter */
    .auction-obs-chip {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    /* Auction mode toggle: compact */
    .auction-mode-tab {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
}

/* ── Sidebar user popover hover ─────────────────────────── */
#sidebarUserIndicator:hover #sidebarUserAvatar {
    background: rgba(255,255,255,0.22) !important;
}
#sidebarUserIndicator:hover #sidebarUserPopover {
    opacity: 1 !important;
    pointer-events: all !important;
    transform: translateX(0) !important;
}