:root {
  --primary: #2563EB;
  --primary-dark: #1d4ed8;
  --primary-light: #EFF6FF;
  --primary-glow: rgba(37,99,235,0.15);
  --success: #28a745;
  --success-light: #d4edda;
  --warning: #e8590c;
  --warning-light: #fff3cd;
  --danger: #dc3545;
  --danger-light: #f8d7da;
  --info: #17a2b8;
  --purple: #6F42C1;
  --purple-light: #f3f0ff;
  --gray-50: #F8F9FA;
  --gray-100: #F1F3F5;
  --gray-200: #E9ECEF;
  --gray-300: #DEE2E6;
  --gray-400: #ADB5BD;
  --gray-500: #6C757D;
  --gray-600: #495057;
  --gray-700: #343A40;
  --gray-800: #333333;
  --gray-900: #212529;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.03);
  --shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.02);
  --shadow-xl: 0 12px 24px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.03);
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --sidebar-width: 240px;
  --sidebar-collapsed: 68px;
  --header-height: 56px;
  --glass-bg: rgba(255,255,255,0.7);
  --glass-border: rgba(255,255,255,0.2);
  --glass-blur: blur(20px);
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #F8F9FB; color: var(--gray-900); min-height: 100vh; font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.01em; }

/* ===== LOGIN OVERLAY ===== */
.login-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #0f172a 100%); z-index: 10000; display: flex; align-items: center; justify-content: center; }
.login-overlay.hidden { display: none; }
.login-card { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); border-radius: 24px; padding: 48px 40px; width: 420px; max-width: 95vw; text-align: center; animation: loginSlideUp 0.6s ease; }
@keyframes loginSlideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.login-card .login-logo { font-size: 32px; font-weight: 800; color: #fff; margin-bottom: 8px; letter-spacing: -0.03em; }
.login-card .login-logo span { background: linear-gradient(135deg, #3b82f6, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.login-card .login-subtitle { color: rgba(255,255,255,0.5); font-size: 14px; margin-bottom: 32px; }
.login-field { margin-bottom: 16px; text-align: left; }
.login-field label { display: block; color: rgba(255,255,255,0.6); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.login-field input { width: 100%; padding: 12px 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; color: #fff; font-size: 15px; font-family: inherit; transition: all 0.2s; }
.login-field input::placeholder { color: rgba(255,255,255,0.3); }
.login-field input:focus { outline: none; border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,0.2); background: rgba(255,255,255,0.08); }
.login-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, #2563EB, #2563EB); color: #fff; border: none; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s; margin-top: 8px; font-family: inherit; }
.login-btn:hover { background: linear-gradient(135deg, #1d4ed8, #2563EB); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(37,99,235,0.4); }
.login-error { color: #f87171; font-size: 13px; margin-top: 12px; display: none; }
.login-particles { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; }
.login-particles .particle { position: absolute; width: 2px; height: 2px; background: rgba(37,99,235,0.4); border-radius: 50%; animation: particleFloat 15s infinite; }
@keyframes particleFloat { 0%, 100% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-100vh) translateX(50px); opacity: 0; } }

/* ===== SIDEBAR NAVIGATION ===== */
.app-layout { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar-width); background: rgba(22, 26, 33, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-right: 1px solid rgba(255,255,255,0.05); position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; display: flex; flex-direction: column; transition: width var(--transition-normal), transform var(--transition-normal); overflow-x: hidden; }
.sidebar::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background: radial-gradient(ellipse at 50% 0%, rgba(0,212,170,0.08) 0%, transparent 60%), radial-gradient(ellipse at 20% 100%, rgba(0,212,170,0.04) 0%, transparent 50%); pointer-events:none; z-index:0; }
.sidebar > * { position: relative; z-index: 1; }
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }
.sidebar-logo svg { width: 36px; height: 36px; flex-shrink: 0; }
.sidebar-logo-text { font-size: 18px; font-weight: 800; color: #f1f5f9; letter-spacing: -0.03em; white-space: nowrap; }
.sidebar-logo-text span { color: #00d4aa; text-shadow: 0 0 20px rgba(0,212,170,0.5); }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 10px; }
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(0,212,170,0.3); border-radius: 4px; }
.sidebar-section { margin-bottom: 8px; }
.sidebar-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(0,212,170,0.45); padding: 8px 12px 4px; white-space: nowrap; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; cursor: pointer; font-size: 13px; font-weight: 500; color: #8b95a5; transition: all var(--transition-fast); border: none; background: none; width: 100%; text-align: left; white-space: nowrap; position: relative; }
.nav-item:hover { background: rgba(255,255,255,0.04); color: rgba(0,212,170,0.8); }
.nav-item.active { background: rgba(0,212,170,0.1); color: #00d4aa; font-weight: 600; border-right: 2px solid #00d4aa; }
.nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: #00d4aa; border-radius: 0 3px 3px 0; box-shadow: 0 0 10px rgba(0,212,170,0.6); }
.nav-item .nav-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; opacity: 0.6; }
.nav-item.active .nav-icon, .nav-item:hover .nav-icon { opacity: 1; }
.nav-item .nav-icon svg { width: 18px; height: 18px; }
.nav-item .nav-badge { margin-left: auto; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 9999px; line-height: 1.3; }
.sidebar-footer { padding: 12px 14px; border-top: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; cursor: pointer; transition: background 0.15s; }
.sidebar-user:hover { background: rgba(255,255,255,0.04); }
.sidebar-user-avatar { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #059669, #00d4aa); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; flex-shrink: 0; box-shadow: 0 0 12px rgba(0,212,170,0.3); }
.sidebar-user-info { overflow: hidden; white-space: nowrap; }
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #e2e8f0; }
.sidebar-user-role { font-size: 11px; color: #64748b; }

/* ===== TOP BAR (minimal) ===== */
/* Header hidden on desktop, shown on mobile only */
.header { display: none; }
.mobile-only-header { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--gray-200); padding: 0 16px; align-items: center; height: var(--header-height); position: sticky; top: 0; z-index: 100; }
.logo { display: none; }
.header-nav { display: none; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Sidebar search */
.sidebar-search { display: flex; align-items: center; gap: 8px; padding: 0 16px; margin-bottom: 12px; }
.sidebar-search .search-icon { font-size: 14px; opacity: 0.5; display: flex; align-items: center; }
.sidebar-search input { width: 100%; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 8px 10px; font-size: 13px; background: rgba(255,255,255,0.04); color: #e2e8f0; outline: none; transition: all 0.2s; }
.sidebar-search input::placeholder { color: rgba(255,255,255,0.25); }
.sidebar-search input:focus { border-color: #00d4aa; background: rgba(0,212,170,0.06); box-shadow: 0 0 12px rgba(0,212,170,0.12); }

/* Sidebar new booking button */
.sidebar-new-booking-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: calc(100% - 32px); margin: 0 16px 16px; padding: 10px 16px; background: linear-gradient(135deg, #059669, #00d4aa); color: #fff; border: none; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; transition: all 0.2s; box-shadow: 0 2px 12px rgba(0,212,170,0.25), 0 0 20px rgba(0,212,170,0.1); }
.sidebar-new-booking-btn:hover { background: linear-gradient(135deg, #00d4aa, #059669); transform: none; box-shadow: 0 2px 16px rgba(0,212,170,0.4), 0 0 30px rgba(0,212,170,0.15); }

/* Sidebar footer controls */
.sidebar-footer-controls { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; border-top: 1px solid rgba(255,255,255,0.06); margin-bottom: 4px; }
.sidebar-footer-controls #sync-indicator { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; background: rgba(0,212,170,0.08); color: #00d4aa; border: 1px solid rgba(0,212,170,0.15); }
.sidebar-footer-right { display: flex; gap: 4px; }
.sidebar-icon-btn { background: none; border: none; cursor: pointer; font-size: 16px; padding: 6px; border-radius: 8px; transition: background 0.2s; color: #8b95a5; }
.sidebar-icon-btn:hover { background: rgba(255,255,255,0.06); color: #00d4aa; }
.header-right .user-badge { display: none; }
.notification-badge { position: relative; cursor: pointer; font-size: 18px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; transition: background 0.15s; }
.notification-badge:hover { background: var(--gray-100); }
.notification-badge .badge-count { position: absolute; top: 4px; right: 4px; background: var(--danger); color: #fff; border-radius: 9999px; padding: 1px 5px; font-size: 10px; font-weight: 700; }
.header-search { display: flex; align-items: center; gap: 8px; background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 10px; padding: 8px 14px; flex: 1; max-width: 400px; transition: all 0.2s; }
.header-search:focus-within { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.header-search input { border: none; background: none; font-size: 13px; font-family: inherit; color: var(--gray-900); width: 100%; outline: none; }
.header-search input::placeholder { color: var(--gray-400); }
.header-search .search-icon { color: var(--gray-400); font-size: 14px; }

/* Layout */
.main-content { padding: 20px 24px; width: calc(100% - var(--sidebar-width)); margin: 0; margin-left: var(--sidebar-width); transition: margin-left var(--transition-normal); min-width: 0; }

/* Entrance animations */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.page-section.active { animation: fadeIn 0.3s ease; }

/* Dashboard */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.08); position: relative; overflow: hidden; transition: all 0.4s ease; border-left: 3px solid transparent; }
.stat-card::before { content: ''; position: absolute; right: -16px; top: -16px; width: 80px; height: 80px; border-radius: 50%; background: rgba(37,99,235,0.04); filter: blur(20px); transition: all 0.4s ease; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.stat-card:hover::before { background: rgba(37,99,235,0.08); }
.stat-card .stat-label { font-size: 11px; color: var(--gray-700); margin-bottom: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.stat-card .stat-value { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; }
.stat-card .stat-sub { font-size: 12px; color: var(--gray-600); margin-top: 8px; display: flex; align-items: center; gap: 4px; }
.stat-card.blue { border-left-color: #2563EB; background: linear-gradient(135deg, rgba(37,99,235,0.03) 0%, #fff 100%); }
.stat-card.blue .stat-value { color: #1d4ed8; }
.stat-card.blue::before { background: rgba(37,99,235,0.06); }
.stat-card.blue:hover { border-left-color: #1d4ed8; }
.stat-card.blue:hover::before { background: rgba(37,99,235,0.1); }
.stat-card.green { border-left-color: #28a745; background: linear-gradient(135deg, rgba(40,167,69,0.03) 0%, #fff 100%); }
.stat-card.green .stat-value { color: #218838; }
.stat-card.green::before { background: rgba(40,167,69,0.06); }
.stat-card.green:hover { border-left-color: #218838; }
.stat-card.green:hover::before { background: rgba(40,167,69,0.1); }
.stat-card.orange { border-left-color: #e8590c; background: linear-gradient(135deg, rgba(232,89,12,0.03) 0%, #fff 100%); }
.stat-card.orange .stat-value { color: #c44200; }
.stat-card.orange::before { background: rgba(232,89,12,0.06); }
.stat-card.orange:hover { border-left-color: #c44200; }
.stat-card.orange:hover::before { background: rgba(232,89,12,0.1); }
.stat-card.purple { border-left-color: #6F42C1; background: linear-gradient(135deg, rgba(111,66,193,0.03) 0%, #fff 100%); }
.stat-card.purple .stat-value { color: #5a32a3; }
.stat-card.purple::before { background: rgba(111,66,193,0.06); }
.stat-card.purple:hover { border-left-color: #5a32a3; }
.stat-card.purple:hover::before { background: rgba(111,66,193,0.1); }

/* Cards & Tables */
.card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); margin-bottom: 16px; overflow: hidden; border: 1px solid rgba(0,0,0,0.1); transition: all var(--transition-fast); }
.card:hover { border-color: rgba(0,0,0,0.14); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.card-header { padding: 16px 20px; border-bottom: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: space-between; background: transparent; color: var(--gray-900); border-radius: 12px 12px 0 0; }
.card-header h2 { font-size: 15px; font-weight: 600; color: var(--gray-900); letter-spacing: 0; }
.card-header .btn-outline { background: var(--gray-100); color: var(--gray-700); border-color: var(--gray-200); }
.card-header .btn-outline:hover { background: var(--gray-200); border-color: var(--gray-300); }
.card-header .btn { color: var(--gray-700); }
.card-body { padding: 20px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th { background: transparent; padding: 10px 14px; text-align: left; font-weight: 600; color: var(--gray-600); border-bottom: 1px solid var(--gray-200); white-space: nowrap; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
tbody td { padding: 12px 14px; border-bottom: 1px solid var(--gray-100); vertical-align: top; line-height: 1.5; }
tbody tr:hover { background: #F1F3F5; }
tbody tr { cursor: pointer; transition: all 0.15s; border-left: 3px solid transparent; }
tbody tr:hover { border-left-color: var(--primary); }

/* Bookings main table - bigger, more spacious */
.bookings-main-table { font-size: 14px; }
.bookings-main-table thead th { font-size: 11px; padding: 12px 10px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--gray-600); background: transparent; position: relative; }
.col-resize-handle { position:absolute; right:0; top:0; bottom:0; width:5px; cursor:col-resize; background:transparent; z-index:5; }
.col-resize-handle:hover, .col-resize-handle.active { background:var(--primary); opacity:0.3; }
.bookings-main-table tbody td { padding: 14px 10px; font-size: 14px; vertical-align: middle; }
.bookings-main-table tbody tr { transition: all 0.15s ease; }
.bookings-main-table tbody tr:hover { background: #F1F3F5; border-left-color: var(--primary); }

/* Status badges - pill shaped */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 9999px; font-size: 11px; font-weight: 600; letter-spacing: 0; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.badge-pending { background: #fff3cd; color: #6d3a00; }
.badge-pending::before { background: var(--warning); }
.badge-assigned { background: #cce5ff; color: #004085; }
.badge-assigned::before { background: var(--primary); }
.badge-collected { background: #e8dff5; color: #4e2d8e; }
.badge-collected::before { background: var(--purple); }
.badge-in-transit { background: #b8daff; color: #004085; }
.badge-in-transit::before { background: #2563EB; }
.badge-delivered { background: #d4edda; color: #155724; }
.badge-delivered::before { background: var(--success); }
.badge-invoiced { background: #E9ECEF; color: var(--gray-700); }
.badge-invoiced::before { background: var(--gray-500); }
.badge-cancelled { background: #f8d7da; color: #721c24; }
.badge-cancelled::before { background: var(--danger); }
.badge-draft { background: #fff3cd; color: #6d3a00; }
.badge-draft::before { background: var(--warning); }
.badge-sent { background: #b8e4f0; color: #075985; }
.badge-sent::before { background: var(--info); }
.badge-paid { background: #d4edda; color: #155724; }
.badge-paid::before { background: var(--success); }

/* Tag badges */
.tag { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 600; }
.tag-none { background: var(--gray-200); color: var(--gray-700); }
.tag-action { background: var(--warning-light); color: #856404; }
.tag-urgent { background: var(--danger-light); color: var(--danger); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 9999px; font-size: 13px; font-weight: 500; border: none; cursor: pointer; transition: all var(--transition-fast); font-family: inherit; letter-spacing: 0; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); transform: none; box-shadow: 0 2px 8px rgba(37,99,235,0.25); }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #218838; transform: none; box-shadow: 0 2px 8px rgba(40,167,69,0.25); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #c82333; transform: none; box-shadow: 0 2px 8px rgba(220,53,69,0.25); }
.btn-outline { background: #fff; color: var(--gray-700); border: 1px solid var(--gray-300); }
.btn-outline:hover { background: var(--gray-50); border-color: var(--gray-400); }
.btn-sm { padding: 6px 14px; font-size: 12px; font-weight: 500; border-radius: 9999px; }
.btn-icon { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid var(--gray-200); background: #fff; cursor: pointer; color: var(--gray-500); transition: all var(--transition-fast); }
.btn-icon:hover { background: var(--gray-100); color: var(--gray-900); }

/* Forms */
.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--gray-700); margin-bottom: 4px; text-transform: none; letter-spacing: 0; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--gray-300); border-radius: 8px; font-size: 13px; font-family: inherit; transition: all var(--transition-fast); background: #F8F9FA; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); background: #fff; }
.form-group textarea { resize: vertical; min-height: 50px; }

/* Input sizing utility classes */
.input-sm { width: 80px !important; }
.input-md { width: 120px !important; }
.input-lg { width: 200px !important; }
.form-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.form-section { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--gray-200); }
.form-section:last-child { border-bottom: none; margin-bottom: 0; }
.form-section h3 { font-size: 13px; font-weight: 600; color: var(--gray-800); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.form-section h3::before { content: ''; display: block; width: 3px; height: 14px; background: var(--primary); border-radius: 2px; }

/* Modal */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 1000; align-items: flex-start; justify-content: center; padding-top: 40px; overflow-y: auto; }
.modal-overlay.active { display: flex; }
.modal { background: #fff; border-radius: 16px; width: 90%; max-width: 800px; box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06); margin-bottom: 40px; animation: scaleIn 0.25s ease; border: 1px solid rgba(0,0,0,0.1); }
.modal-header { padding: 18px 24px; border-bottom: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: space-between; background: transparent; color: var(--gray-900); border-radius: 16px 16px 0 0; }
.modal-header h2 { font-size: 18px; font-weight: 700; color: var(--gray-900); letter-spacing: -0.02em; }
.modal-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none; background: var(--gray-100); cursor: pointer; border-radius: 8px; font-size: 18px; color: var(--gray-500); transition: all 0.15s; }
.modal-close:hover { background: var(--gray-200); color: var(--gray-900); }
.modal-body { padding: 20px 24px; max-height: calc(100vh - 200px); overflow-y: auto; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--gray-100); display: flex; justify-content: flex-end; gap: 10px; }

/* Filters */
.filters-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.filters-bar input, .filters-bar select { padding: 7px 12px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 13px; }
.filters-bar input { width: 220px; }
.date-filter { display: flex; gap: 5px; flex-wrap: wrap; }
.date-filter button { padding: 8px 16px; border: 1px solid #E9ECEF; background: #F1F3F5; backdrop-filter: none; border-radius: 9999px; font-size: 13px; cursor: pointer; font-weight: 600; color: #495057; transition: all 0.2s ease; letter-spacing: 0; }
.date-filter button:hover { background: #E9ECEF; color: #212529; transform: none; box-shadow: none; border-color: #DEE2E6; }
.date-filter button.active { background: #17a2b8; color: #fff; border-color: transparent; box-shadow: none; }

/* Filter pills */
.filter-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.filter-pill { padding: 5px 12px; border: 1px solid #E9ECEF; background: var(--gray-100); border-radius: 9999px; font-size: 11px; font-weight: 600; color: var(--gray-700); cursor: pointer; transition: all 0.2s; text-transform: none; letter-spacing: 0; }
.filter-pill:hover { background: var(--gray-200); color: var(--gray-900); border-color: #DEE2E6; }
.filter-pill.active { background: var(--primary); color: #fff; }

/* Multi-row filter panel matching SLM layout */
.booking-filter-panel { background: #fff; border: 1px solid rgba(0,0,0,0.1); border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); position:relative; overflow:hidden; }
.booking-filter-panel::before { display: none; }
@keyframes filterShimmer { 0%{background-position:0% 0} 100%{background-position:200% 0} }
.filter-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #E9ECEF; }
.filter-row:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.filter-row input[type="text"], .filter-row input[type="date"], .filter-row select { padding: 8px 14px; border: 1px solid var(--gray-300); border-radius: 8px; font-size: 13px; height: 38px; background: #F8F9FA; color: #212529; backdrop-filter: none; transition: all 0.2s; }
.filter-row input[type="text"]::placeholder { color: #ADB5BD; }
.filter-row input[type="text"]:focus, .filter-row input[type="date"]:focus, .filter-row select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,0.12); background: #fff; }
.filter-row input[type="text"] { width: 180px; }
.filter-row select { min-width: 160px; }
.filter-row select option { background: #fff; color: #212529; }
.filter-row .filter-sep { width: 1px; height: 28px; background: #E9ECEF; margin: 0 8px; flex-shrink: 0; border-radius: 1px; }
.filter-group { display: inline-flex; gap: 4px; align-items: center; }
.filter-group .fpill { padding: 7px 14px; border: 1px solid #E9ECEF; background: #F1F3F5; backdrop-filter: none; font-size: 13px; font-weight: 600; color: #495057; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; border-radius: 9999px; letter-spacing: 0; box-shadow: none; }
.filter-group .fpill:first-child { border-radius: 9999px; }
.filter-group .fpill:last-child { border-radius: 9999px; }
.filter-group .fpill:only-child { border-radius: 9999px; }
.filter-group .fpill:not(:first-child) { margin-left: 0; }
.filter-group .fpill:hover { background: #E9ECEF; color: #212529; transform: none; box-shadow: none; border-color: #DEE2E6; }
.filter-group .fpill.active { background: #2563EB; color: #fff; box-shadow: none; }
.filter-group .fpill.active-green { background: #28a745; color: #fff; box-shadow: none; }
.filter-group .fpill.active-orange { background: #e8590c; color: #fff; box-shadow: none; }
.filter-group .fpill.active-red { background: #dc3545; color: #fff; box-shadow: none; }
.filter-group .fpill.active-purple { background: #6F42C1; color: #fff; box-shadow: none; }
.filter-row .filter-label { font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; margin-right: 8px; white-space: nowrap; padding: 0; border-radius: 0; background: none !important; }
.filter-row .filter-label.fl-invoice { color: #6F42C1; }
.filter-row .filter-label.fl-ref { color: #17a2b8; }
.filter-row .filter-label.fl-payment { color: #e83e8c; }
.filter-row .filter-label.fl-status { color: #28a745; }
.filter-row .filter-label.fl-freq { color: #2563EB; }
.filter-row .filter-label.fl-drivertype { color: #e8590c; }
.filter-row .filter-label.fl-vehicle { color: #17a2b8; }
.filter-row .filter-label.fl-date { color: #dc3545; }
.filter-row .filter-label.fl-tag { color: #fd7e14; }
.filter-row .filter-label.fl-source { color: #6F42C1; }
.filter-row .filter-label.fl-signed { color: #2563EB; }
.filter-row .filter-label.fl-attach { color: #6F42C1; }
.filter-row .filter-label.fl-paperwork { color: #28a745; }
.filter-row .filter-label.fl-bill { color: #c44200; }
.filter-row .filter-label.fl-driverpay { color: #dc3545; }
.filter-dropdown-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filter-dd-item { display: inline-flex; align-items: center; position: relative; }
.filter-dd-item label { display: none; }
.filter-dd-item select { padding: 7px 28px 7px 14px; border: none; border-radius: 9999px; font-size: 13px; font-weight: 500; color: #6C757D; background: #F1F3F5; cursor: pointer; min-width: 0; height: auto; appearance: none; -webkit-appearance: none; transition: all 0.2s; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23ADB5BD' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.filter-dd-item select:hover { background-color: #E9ECEF; color: #212529; }
.filter-dd-item select:focus { outline: none; background-color: #E9ECEF; }
.filter-dd-item select.dd-active { background: #2563EB; color: #fff; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
[data-theme="dark"] .filter-dd-item select { background-color: rgba(255,255,255,0.06); color: #94a3b8; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
[data-theme="dark"] .filter-dd-item select:hover { background-color: rgba(255,255,255,0.1); color: #e2e8f0; }
[data-theme="dark"] .filter-dd-item select.dd-active { background: #2563eb; color: #fff; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
/* Driver search autocomplete in filter row */
.filter-driver-wrap { position: relative; }
.filter-driver-wrap input { padding: 7px 14px; border: none; border-radius: 9999px; font-size: 13px; font-weight: 500; color: #6C757D; background: #F1F3F5; width: 160px; transition: all 0.2s; }
.filter-driver-wrap input:focus { outline: none; background: #E9ECEF; color: #212529; width: 200px; }
.filter-driver-wrap input::placeholder { color: #ADB5BD; }
.filter-driver-wrap .autocomplete-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 100; background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; margin-top: 4px; max-height: 220px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.1); display: none; }
.filter-driver-wrap .autocomplete-dropdown .ac-item { padding: 8px 14px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--gray-100); }
.filter-driver-wrap .autocomplete-dropdown .ac-item:hover { background: #F1F3F5; }
.filter-driver-wrap .autocomplete-dropdown .ac-item:last-child { border-bottom: none; }
.filter-driver-wrap .autocomplete-dropdown .ac-sub { font-size: 11px; color: #ADB5BD; }
[data-theme="dark"] .filter-driver-wrap input { background: rgba(255,255,255,0.06); color: #94a3b8; }
[data-theme="dark"] .filter-driver-wrap input:focus { background: rgba(255,255,255,0.1); color: #e2e8f0; }
[data-theme="dark"] .filter-driver-wrap .autocomplete-dropdown { background: #161a21; border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .filter-driver-wrap .autocomplete-dropdown .ac-item { color: #e2e8f0; border-bottom-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .filter-driver-wrap .autocomplete-dropdown .ac-item:hover { background: rgba(255,255,255,0.06); }
.bookings-summary-bar { display: flex; gap: 20px; align-items: center; padding: 10px 16px; background: #F8F9FA; border: 1px solid rgba(0,0,0,0.06); border-radius: 10px; margin-bottom: 10px; }
.summary-item { display: flex; align-items: center; gap: 6px; }
.summary-label { font-size: 12px; font-weight: 500; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.3px; }
.summary-value { font-size: 14px; font-weight: 700; color: var(--gray-900); }
.summary-profit { padding: 4px 12px; background: rgba(40,167,69,0.06); border-radius: 8px; }
[data-theme="dark"] .bookings-summary-bar { background: #10131a; border-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .summary-label { color: #64748b; }
[data-theme="dark"] .summary-value { color: #e2e8f0; }
[data-theme="dark"] .summary-profit { background: rgba(0,212,170,0.08); }
.filter-actions-row { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.filter-actions-row .btn { border: none; border-radius: 9999px; font-weight: 500; font-size: 13px; padding: 9px 20px; transition: all 0.2s; box-shadow: none; }
.filter-actions-row .btn-sm[style*="28a745"] { background: #28a745 !important; color: #fff !important; box-shadow: none; }
.filter-actions-row .btn-sm[style*="28a745"]:hover { box-shadow: 0 2px 8px rgba(40,167,69,0.25); transform: none; }
.filter-actions-row .btn-sm[style*="17a2b8"] { background: #17a2b8 !important; color: #fff !important; box-shadow: none; }
.filter-actions-row .btn-sm[style*="17a2b8"]:hover { box-shadow: 0 2px 8px rgba(23,162,184,0.25); transform: none; }
.filter-actions-row .btn-outline { background: #fff !important; color: #495057 !important; border: 1px solid #E9ECEF !important; }
.filter-actions-row .btn-outline:hover { background: #F8F9FA !important; color: #212529 !important; box-shadow: none; }

/* Bookings View Toggle */
.bk-view-toggle { display: flex; gap: 3px; margin-left: auto; background: var(--gray-100); border-radius: 10px; padding: 3px; }
.bk-view-btn { height: 32px; padding: 0 14px; display: flex; align-items: center; justify-content: center; gap: 6px; border: none; border-radius: 8px; background: transparent; color: var(--gray-500); cursor: pointer; transition: all 0.2s; font-size: 12px; font-weight: 600; white-space: nowrap; }
.bk-view-btn svg { flex-shrink: 0; }
.bk-view-btn:hover { background: rgba(0,0,0,0.04); color: var(--gray-700); }
.bk-view-btn.active { background: #fff; color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
[data-theme="dark"] .bk-view-toggle { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .bk-view-btn { color: #64748b; }
[data-theme="dark"] .bk-view-btn:hover { background: rgba(255,255,255,0.04); color: #e2e8f0; }
[data-theme="dark"] .bk-view-btn.active { background: rgba(143,245,255,0.1); color: #8ff5ff; box-shadow: none; }

/* Kinetic Bookings View */
.bk-kinetic-wrap { display: none; position: relative; min-height: 600px; border-radius: 16px; overflow: hidden; }
.bk-kinetic-wrap.active { display: block; }
.bk-kinetic-bg { position: absolute; inset: 0; background: #0b0e14; z-index: 0; }
.bk-kinetic-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 30%, rgba(143,245,255,0.05) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(172,137,255,0.05) 0%, transparent 50%); }
.bk-kinetic-bg::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,0.015) 39px, rgba(255,255,255,0.015) 40px), repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,0.015) 39px, rgba(255,255,255,0.015) 40px); }
.bk-kinetic-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; padding: 24px; }
.bk-kinetic-card { background: rgba(22,26,33,0.7); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 20px; cursor: pointer; transition: all 0.3s; position: relative; overflow: hidden; }
.bk-kinetic-card:hover { border-color: rgba(143,245,255,0.2); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.3); }
.bk-kinetic-card-ref { font-size: 18px; font-weight: 700; color: #8ff5ff; margin-bottom: 4px; font-family: 'Inter', sans-serif; }
.bk-kinetic-card-customer { font-size: 14px; font-weight: 600; color: #e2e8f0; margin-bottom: 12px; }
.bk-kinetic-card-route { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px; background: rgba(255,255,255,0.03); border-radius: 8px; }
.bk-kinetic-card-route-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bk-kinetic-card-route-dot.origin { background: #8ff5ff; box-shadow: 0 0 8px rgba(143,245,255,0.5); }
.bk-kinetic-card-route-dot.dest { background: #ac89ff; box-shadow: 0 0 8px rgba(172,137,255,0.5); }
.bk-kinetic-card-route-arrow { color: rgba(255,255,255,0.2); font-size: 12px; }
.bk-kinetic-card-route-text { font-size: 12px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
.bk-kinetic-card-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; }
.bk-kinetic-card-label { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; }
.bk-kinetic-card-val { font-size: 13px; font-weight: 600; color: #e2e8f0; }
.bk-kinetic-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.06); }
.bk-kinetic-card-profit { font-size: 16px; font-weight: 700; }
.bk-kinetic-card-profit.positive { color: #00d4aa; }
.bk-kinetic-card-profit.negative { color: #ff716c; }
.bk-kinetic-card-status { padding: 4px 12px; border-radius: 9999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.bk-kinetic-card-status.pending { background: rgba(245,158,11,0.15); color: #f59e0b; }
.bk-kinetic-card-status.assigned { background: rgba(59,130,246,0.15); color: #3b82f6; }
.bk-kinetic-card-status.collected { background: rgba(168,85,247,0.15); color: #a855f7; }
.bk-kinetic-card-status.in-transit { background: rgba(143,245,255,0.15); color: #8ff5ff; }
.bk-kinetic-card-status.delivered { background: rgba(0,212,170,0.15); color: #00d4aa; }
.bk-kinetic-card-status.invoiced { background: rgba(100,116,139,0.15); color: #94a3b8; }
.bk-kinetic-card-status.cancelled { background: rgba(255,113,108,0.15); color: #ff716c; }
.bk-kinetic-driver { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.bk-kinetic-driver-dot { width: 6px; height: 6px; border-radius: 50%; background: #00d4aa; }
.bk-kinetic-driver-name { font-size: 12px; color: #94a3b8; }
.bk-kinetic-empty { text-align: center; padding: 80px 20px; color: #475569; font-size: 14px; }
.bk-kinetic-pagination { position: relative; z-index: 1; padding: 16px 24px; display: flex; justify-content: center; }
@media (max-width: 768px) {
  .bk-kinetic-grid { grid-template-columns: 1fr; padding: 12px; gap: 12px; }
  .bk-kinetic-card { padding: 16px; }
}

/* Upload Jobs Table */
#upload-jobs-table th { background: transparent; padding: 8px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); position: sticky; top: 0; border-bottom: 1px solid var(--gray-200); }
#upload-jobs-table td { padding: 7px 10px; border-bottom: 1px solid var(--gray-100); }
#upload-jobs-table tr.upload-row-dup { background: #fff3cd; }
#upload-jobs-table tr.upload-row-dup td:first-child::before { content: '⚠️ '; }
#upload-jobs-table tr.upload-row-new { background: #d4edda; }
#upload-jobs-table tr.upload-row-error { background: #f8d7da; }
[data-theme="dark"] #upload-jobs-table th { background: rgba(255,255,255,0.03); color: #64748b; border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="dark"] #upload-jobs-table td { border-bottom-color: rgba(255,255,255,0.04); }
[data-theme="dark"] #upload-jobs-table tr.upload-row-dup { background: rgba(251,191,36,0.06); }
[data-theme="dark"] #upload-jobs-table tr.upload-row-new { background: rgba(0,212,170,0.06); }
[data-theme="dark"] #upload-jobs-table tr.upload-row-error { background: rgba(239,68,68,0.06); }

/* Autocomplete dropdown inside filter panel */
.booking-filter-panel .autocomplete-dropdown { background: #fff; border-color: rgba(99,102,241,0.15); box-shadow: 0 8px 24px rgba(99,102,241,0.12); border-radius: 0 0 12px 12px; }
.booking-filter-panel .autocomplete-dropdown .ac-item { color: #1e293b; border-bottom-color: rgba(99,102,241,0.06); }
.booking-filter-panel .autocomplete-dropdown .ac-item:hover, .booking-filter-panel .autocomplete-dropdown .ac-item.ac-active { background: linear-gradient(135deg, #2563EB, #6F42C1); color: #fff; }
.booking-filter-panel .autocomplete-dropdown .ac-item .ac-sub { color: #ADB5BD; }

/* Add Ref button in table */
.add-ref-btn { background: #2563EB; color: #fff; border: none; padding: 4px 12px; border-radius: 9999px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.add-ref-btn:hover { background: #1557b0; }

/* Tabs */
.page-tabs { display: flex; gap: 4px; margin-bottom: 20px; }
.page-tabs button { padding: 8px 20px; border: none; background: #F1F3F5; border-radius: 9999px; cursor: pointer; font-size: 13px; font-weight: 500; color: #6C757D; }
.page-tabs button:hover { background: #E9ECEF; color: #212529; }
.page-tabs button.active { background: #2563EB; color: #fff; box-shadow: none; }

/* Page sections */
.page-section { display: none; }
.page-section.active { display: block; }

/* Empty state */
.empty-state { text-align: center; padding: 60px 20px; color: var(--gray-500); }
.empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; }
.empty-state p { font-size: 14px; }

/* Quick actions grid */
.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; }
.quick-action-btn { background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; padding: 16px; text-align: center; cursor: pointer; transition: all 0.15s; border-top: 2px solid #2563EB; box-shadow: none; }
.quick-action-btn:hover { border-color: rgba(0,0,0,0.1); transform: none; }
.quick-action-btn .qa-icon { font-size: 24px; margin-bottom: 6px; }
.quick-action-btn .qa-label { font-size: 13px; font-weight: 500; color: var(--gray-700); }

/* ===== Modern Home Page ===== */
.home-hero { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border-radius: var(--radius-xl); padding: 36px 40px; margin-bottom: 24px; color: #fff; position: relative; overflow: hidden; }
.home-hero::before { content: ''; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(37,99,235,0.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
.home-hero::after { content: ''; position: absolute; bottom: -40%; left: 10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(111,66,193,0.1) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
.home-hero h1 { font-size: 28px; font-weight: 800; margin-bottom: 6px; position: relative; z-index: 1; letter-spacing: -0.03em; }
.home-hero p { font-size: 14px; opacity: 0.6; position: relative; z-index: 1; }
.home-hero-stats { display: flex; gap: 32px; margin-top: 20px; position: relative; z-index: 1; }
.home-hero-stat { text-align: center; }
.home-hero-stat .hhs-val { font-size: 28px; font-weight: 700; }
.home-hero-stat .hhs-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.8; margin-top: 2px; }

/* ========== HOME PAGE — KINETIC FILTER PANELS ========== */
.home-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }
@media (max-width:1100px) { .home-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px) { .home-grid { grid-template-columns:1fr; } }

.home-card { background:#10131a; border-radius:16px; padding:20px; border:1px solid rgba(255,255,255,0.04); transition:all 0.3s; overflow:hidden; }
.home-card:hover { border-color:rgba(255,255,255,0.08); }
.home-card-header { display:flex; align-items:center; gap:8px; margin-bottom:16px; padding:0; border:none; background:none; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.15em; color:#73757d; }
.home-card-header svg { flex-shrink:0; }
.home-card-header .hch-icon { width:18px; height:18px; border-radius:4px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:0; }
.home-card-header .hch-icon::after { content:''; display:block; width:6px; height:6px; border-radius:50%; }
.hch-blue .hch-icon::after, .hch-blue::after { background:#8ff5ff; }
.hch-green .hch-icon::after, .hch-green::after { background:#2dd37a; }
.hch-orange .hch-icon::after, .hch-orange::after { background:#fbbf24; }
.hch-purple .hch-icon::after, .hch-purple::after { background:#ac89ff; }
.hch-teal .hch-icon::after, .hch-teal::after { background:#14b8a6; }
.hch-red .hch-icon::after, .hch-red::after { background:#ff716c; }
.hch-blue { background:none; } .hch-green { background:none; } .hch-orange { background:none; } .hch-purple { background:none; } .hch-teal { background:none; } .hch-red { background:none; }

.home-card-body { display:flex; flex-wrap:wrap; gap:8px; }
.home-tile { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; border-radius:8px; border:1px solid transparent; cursor:pointer; font-size:12px; font-weight:500; transition:all 0.2s; white-space:nowrap; box-shadow:none; font-family:inherit; background:#22262f; color:#a9abb3; }
.home-tile:hover { color:#ecedf6; background:#282c36; transform:translateY(-1px); }
.home-tile:active { transform:scale(0.97); }
.home-tile.tile-blue { background:rgba(143,245,255,0.08); color:#8ff5ff; border-color:rgba(143,245,255,0.15); font-weight:600; }
.home-tile.tile-blue:hover { background:rgba(143,245,255,0.14); box-shadow:0 0 12px rgba(143,245,255,0.08); }
.home-tile.tile-green { background:rgba(45,211,122,0.08); color:#2dd37a; border-color:rgba(45,211,122,0.15); font-weight:600; }
.home-tile.tile-green:hover { background:rgba(45,211,122,0.14); box-shadow:0 0 12px rgba(45,211,122,0.08); }
.home-tile.tile-orange { background:rgba(251,191,36,0.08); color:#fbbf24; border-color:rgba(251,191,36,0.15); font-weight:600; }
.home-tile.tile-orange:hover { background:rgba(251,191,36,0.14); box-shadow:0 0 12px rgba(251,191,36,0.08); }
.home-tile.tile-purple { background:rgba(172,137,255,0.08); color:#ac89ff; border-color:rgba(172,137,255,0.15); font-weight:600; }
.home-tile.tile-purple:hover { background:rgba(172,137,255,0.14); box-shadow:0 0 12px rgba(172,137,255,0.08); }
.home-tile.tile-teal { background:rgba(20,184,166,0.08); color:#2dd4bf; border-color:rgba(20,184,166,0.15); font-weight:600; }
.home-tile.tile-teal:hover { background:rgba(20,184,166,0.14); box-shadow:0 0 12px rgba(20,184,166,0.08); }
.home-tile.tile-red { background:rgba(255,113,108,0.08); color:#ff716c; border-color:rgba(255,113,108,0.15); font-weight:600; }
.home-tile.tile-red:hover { background:rgba(255,113,108,0.14); box-shadow:0 0 12px rgba(255,113,108,0.08); }
.home-tile.tile-coming { opacity:0.25; cursor:default; }
.home-tile.tile-coming:hover { transform:none; box-shadow:none; background:rgba(255,255,255,0.03); }
.home-tile .ht-soon { font-size:9px; padding:1px 6px; border-radius:4px; background:rgba(255,255,255,0.06); color:#64748b; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }

.home-updates-card { grid-column:1/-1; }
.home-updates-body { padding:0; margin-top:0; }
.home-updates-banner { background:linear-gradient(135deg,rgba(143,245,255,0.06),rgba(172,137,255,0.06)); border:1px solid rgba(143,245,255,0.1); border-radius:12px; padding:14px 18px; margin-bottom:14px; display:flex; align-items:center; gap:12px; }
.home-updates-banner .hub-icon { font-size:20px; }
.home-updates-banner .hub-text { font-size:13px; color:#a9abb3; line-height:1.5; }
.home-updates-banner .hub-text strong { color:#8ff5ff; }

.home-latest-item { padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.04); display:flex; gap:10px; align-items:flex-start; font-size:13px; }
.home-latest-item:last-child { border-bottom:none; padding-bottom:0; }
.home-latest-icon { width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.home-latest-text { flex:1; color:#a9abb3; line-height:1.4; }
.home-latest-time { font-size:11px; color:#6b6e76; margin-top:2px; }

/* Recent bookings on dashboard */
.recent-table { margin-top: 8px; }

/* Timeline/Notifications */
.timeline { margin-top: 12px; }
.timeline-item { display: flex; gap: 12px; margin-bottom: 12px; padding: 12px; background: var(--gray-50); border-radius: 6px; }
.timeline-icon { font-size: 16px; flex-shrink: 0; }
.timeline-content { flex: 1; }
.timeline-time { font-size: 12px; color: var(--gray-600); font-weight: 500; }
.timeline-message { font-size: 12px; color: var(--gray-700); margin-top: 2px; }
.timeline-email { font-size: 11px; color: var(--gray-500); margin-top: 4px; font-style: italic; }

/* Responsive */
@media (max-width: 1024px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.mobile-open { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,0.15); }
  .mobile-only-header { display: flex; }
  .main-content { margin-left: 0 !important; width: 100% !important; max-width: 100vw !important; overflow-x: hidden; }
  body { overflow-x: hidden; }
  #app-layout { display: block !important; }
  .sidebar-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); z-index: 199; }
  .sidebar-overlay.active { display: block; }
  /* Force single column on ALL booking edit tabs - very aggressive selectors */
  .bke-tab-content,
  .bke-tab-content.active,
  .bke-tab-content.active.bke-notes-tab,
  div.bke-tab-content,
  div.bke-tab-content.active,
  #bke-tab-0, #bke-tab-1, #bke-tab-2,
  #bke-tab-0.active, #bke-tab-1.active, #bke-tab-2.active,
  .booking-edit-page .bke-tab-content,
  .booking-edit-page .bke-tab-content.active { display: none; grid-template-columns: 1fr !important; gap: 8px !important; }
  .bke-tab-content.active,
  div.bke-tab-content.active,
  #bke-tab-0.active, #bke-tab-1.active, #bke-tab-2.active { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
  .bke-form-row { grid-template-columns: 1fr !important; }
  .bke-section-body { padding: 12px !important; }
  .bke-form-group input, .bke-form-group select, .bke-form-group textarea { font-size: 15px !important; padding: 11px 12px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
  .bke-form-group input[type="checkbox"] { width: auto !important; }
  .bke-form-group input[type="file"] { padding: 8px !important; }
  /* Pricing grid - force 2-column label+value on mobile */
  .bke-price-row { grid-template-columns: 100px 1fr !important; }
  .bke-price-val input { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
  .bke-notes-tab { grid-template-columns: 1fr !important; }
  .bke-pricing-grid { grid-template-columns: 1fr !important; }
  .bke-pricing-grid .bke-price-row { grid-template-columns: 100px 1fr !important; }
  .bke-mobile-full { width: 100% !important; flex: 1 !important; max-width: 100% !important; }
  /* Force all sections to full width on mobile */
  .bke-section { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; }
  .booking-edit-page { padding: 8px !important; overflow-x: hidden !important; }
  .bke-header { margin: -8px -8px 8px -8px !important; padding: 12px !important; }
  .bke-tabs { margin: 0 -8px 8px -8px !important; padding: 0 8px !important; }
  /* Pill buttons - wrap nicely on mobile */
  .pill-group { flex-wrap: wrap !important; }
  .pill-btn { padding: 8px 12px !important; font-size: 13px !important; }
  /* ETA and distance inputs */
  .bke-mobile-full, input.bke-mobile-full { width: 100% !important; flex: 1 !important; }
  /* Driver notes textarea */
  .bke-section-body textarea { width: 100% !important; box-sizing: border-box !important; }
}
@media (max-width: 768px) {
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .filters-bar { flex-direction: column; }
  .filters-bar input { width: 100%; }
  .filter-pills { margin-bottom: 12px; }
  .main-content { padding: 12px; }
  /* Booking edit - force single column on ALL tabs */
  .bke-tab-content,
  .bke-tab-content.active,
  .bke-tab-content.active.bke-notes-tab,
  #bke-tab-0.active, #bke-tab-1.active, #bke-tab-2.active { grid-template-columns: 1fr !important; gap: 8px !important; }
  .bke-section { margin-bottom: 8px; }
  /* Filter panel - collapse on mobile */
  .booking-filter-panel { padding: 12px; }
  .booking-filter-panel .filter-row:not(:first-child),
  .booking-filter-panel .filter-actions-row { display: none; }
  .booking-filter-panel.mobile-expanded .filter-row:not(:first-child),
  .booking-filter-panel.mobile-expanded .filter-actions-row { display: flex; }
  .booking-filter-panel .filter-row:first-child { flex-wrap: wrap; }
  .mobile-filter-toggle { display: flex !important; align-items: center; gap: 6px; padding: 8px 14px; background: #2563EB; color: #fff; border: none; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; margin-top: 8px; width: 100%; justify-content: center; }
  .mobile-filter-toggle .filter-count { background: rgba(255,255,255,0.25); padding: 1px 6px; border-radius: 4px; font-size: 10px; }
  .filter-row { gap: 6px; }
  .filter-row input[type="text"] { width: 100% !important; min-width: 0 !important; }
  .filter-row select { width: 100%; min-width: 0 !important; }
  #filter-customer-wrap { min-width: 100% !important; }
  .filter-group { flex-wrap: wrap; }
  .filter-actions-row { flex-wrap: wrap; gap: 6px; }
  .filter-actions-row .btn { font-size: 11px; padding: 6px 10px; }
  /* Bookings as cards on mobile */
  .mobile-booking-cards { display: flex !important; flex-direction: column; gap: 8px; padding: 8px; }
  .mobile-booking-card { background: #fff; border-radius: 10px; padding: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
  .mobile-booking-card .mbc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
  .mobile-booking-card .mbc-ref { font-weight: 600; font-size: 14px; color: #2563EB; }
  .mobile-booking-card .mbc-status { font-size: 11px; }
  .mobile-booking-card .mbc-customer { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
  .mobile-booking-card .mbc-route { font-size: 12px; color: var(--gray-600); line-height: 1.6; }
  .mobile-booking-card .mbc-route .mbc-stop { display: block; padding: 2px 0; }
  .mobile-booking-card .mbc-route .mbc-arrow { display: block; color: var(--primary); font-weight: 700; margin: 2px 0; font-size: 10px; }
  .mobile-booking-card .mbc-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--gray-100); font-size: 12px; color: var(--gray-500); }
  .mobile-booking-card .mbc-price { font-weight: 600; color: var(--gray-900); }
  .mobile-booking-card .mbc-miles { background: #e8f0fe; color: #2563EB; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 600; }
  /* Hide ref search on mobile, show date range */
  #booking-search { display: none !important; }
  .mobile-date-range { display: flex !important; gap: 6px; width: 100%; }
  .mobile-date-range input[type="date"] { flex: 1; font-size: 13px; padding: 8px 10px; border: 1px solid var(--gray-200); border-radius: 8px; background: #fff; }
  /* Floating create button on mobile */
  .mobile-create-fab { display: flex !important; position: fixed; bottom: 20px; right: 20px; z-index: 500; width: 56px; height: 56px; border-radius: 50%; background: #28a745; color: #fff; border: none; font-size: 28px; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(40,167,69,0.4); cursor: pointer; }
  .mobile-create-fab:active { transform: scale(0.95); }
  .desktop-table { display: none !important; }
  /* Mobile booking edit */
  .bke-header { flex-wrap: wrap; padding: 12px !important; gap: 8px; }
  .bke-header h1 { font-size: 16px !important; flex: 1; }
  .bke-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 8px; }
  .bke-tab-btn { white-space: nowrap; font-size: 13px; padding: 8px 14px; }
  .bke-section-body { padding: 12px !important; }
  .bke-form-row { grid-template-columns: 1fr !important; gap: 8px !important; }
  .bke-form-row.full { grid-template-columns: 1fr !important; }
  .bke-form-group label { font-size: 11px; }
  .bke-form-group input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),
  .bke-form-group select,
  .bke-form-group textarea { font-size: 15px; padding: 11px 12px; border-radius: 8px; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
  .bke-section { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
  .pill-group { gap: 3px; flex-wrap: wrap; }
  .pill-btn { padding: 7px 12px; font-size: 12px; }
  .tariff-btn-grid { gap: 4px; }
  .tariff-btn { padding: 5px 10px; font-size: 10px; }
  .bke-price-row { grid-template-columns: 100px 1fr !important; }
  /* Pricing grid on mobile */
  .bke-pricing-grid { font-size: 12px; }
  .bke-price-row { grid-template-columns: 80px 1fr !important; gap: 4px 8px; }
  .bke-price-label { font-size: 11px !important; }
  .bke-price-val input { font-size: 14px !important; padding: 8px !important; }
  .bke-price-val small { display: none; }
  .bke-extra-stop, .bke-extra-driver { padding: 12px; }
  /* Notes tab mobile */
  .bke-notes-tab .bke-section-body textarea { min-height: 80px; font-size: 14px; }
  .bke-notes-tab { grid-template-columns: 1fr !important; }
  /* Margin/Profit summary */
  #bke-margin, #bke-profit { font-size: 14px !important; }
  /* Extra charges on mobile */
  #bke-extra-charges .bke-form-row { gap: 4px !important; }
  #bke-extra-charges select { font-size: 13px; }
  /* Tables scroll horizontally (non-bookings) */
  .card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 700px; }
  /* Modal full-width */
  .modal { width: 95%; max-width: none; border-radius: 12px; }
  .modal-body { padding: 14px; }
  /* Invoice edit - stack */
  .inv-edit-grid { grid-template-columns: 1fr !important; }
  /* KPI cards */
  .stat-card .stat-value { font-size: 22px; }
  /* Home cards */
  .home-grid { grid-template-columns: 1fr !important; }
  .home-hero { padding: 20px !important; }
  .home-hero h1 { font-size: 22px !important; }
  .home-hero-stats { flex-wrap: wrap; gap: 16px; }
  /* Customer/Contact view */
  .cv-field-grid { grid-template-columns: 1fr !important; }
  .cust-v-cards-row { grid-template-columns: 1fr !important; }
  /* Pagination */
  .pagination { flex-wrap: wrap; justify-content: center; }
  /* Booking view page */
  .jv-three-cards { grid-template-columns: 1fr !important; }
  .jv-timeline { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .main-content { padding: 8px; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card { padding: 14px; }
  .stat-card .stat-value { font-size: 20px; }
  .stat-card .stat-label { font-size: 11px; }
  .card-header { padding: 12px 14px; }
  .card-body { padding: 12px 14px; }
  .btn { padding: 8px 14px; font-size: 12px; }
  .booking-filter-panel { padding: 10px; border-radius: 10px; }
  .fpill { padding: 5px 10px !important; font-size: 11px !important; }
  .filter-row .filter-label { font-size: 10px !important; }
  .home-tile { padding: 5px 10px; font-size: 11px; }
  .home-card-header { padding: 10px 14px; font-size: 13px; }
  .toast-container { bottom: 12px; right: 12px; left: 12px; }
  .toast { font-size: 12px; padding: 10px 14px; }
}

/* Print */
@media print {
  .header, .filters-bar, .filter-pills, .booking-filter-panel, .btn, .modal-overlay { display: none !important; }
  .card { box-shadow: none; border: 1px solid #ddd; }
}

/* Toasts */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
.toast { padding: 12px 20px; border-radius: 8px; color: #fff; font-size: 13px; font-weight: 500; animation: slideIn 0.3s ease; box-shadow: var(--shadow-lg); }
.toast-success { background: var(--success); }
.toast-error { background: var(--danger); }

/* Autocomplete dropdown */
.autocomplete-dropdown { display:none; position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid var(--gray-300); border-top:none; border-radius:0 0 8px 8px; max-height:200px; overflow-y:auto; z-index:100; box-shadow:0 4px 12px rgba(0,0,0,0.1); }
.autocomplete-dropdown .ac-item { padding:10px 12px; cursor:pointer; font-size:13px; border-bottom:1px solid var(--gray-100); transition:background 0.1s; }
.autocomplete-dropdown .ac-item:last-child { border-bottom:none; }
.autocomplete-dropdown .ac-item:hover, .autocomplete-dropdown .ac-item.ac-active { background:var(--primary); color:#fff; }
.autocomplete-dropdown .ac-item .ac-sub { font-size:11px; color:var(--gray-400); margin-top:2px; }
.autocomplete-dropdown .ac-item:hover .ac-sub, .autocomplete-dropdown .ac-item.ac-active .ac-sub { color:rgba(255,255,255,0.7); }
.autocomplete-dropdown .ac-empty { padding:10px 12px; font-size:13px; color:var(--gray-400); text-align:center; }

/* KPI / Performance Page */
.kpi-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.kpi-header h2 { margin:0; font-size:22px; color:var(--gray-900); }
.kpi-filters { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.kpi-filter-btn { padding:6px 14px; border:1px solid var(--gray-300); border-radius:20px; background:#fff; font-size:12px; font-weight:500; cursor:pointer; transition:all 0.15s; color:var(--gray-600); }
.kpi-filter-btn:hover { border-color:var(--primary); color:var(--primary); }
.kpi-filter-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.kpi-range-sep { color:var(--gray-300); margin:0 4px; }
.kpi-dropdown-filters { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-bottom:18px; padding:14px 18px; background:#F8F9FA; border:1px solid #E9ECEF; border-radius:12px; }
.kpi-dd-group { display:flex; flex-direction:column; gap:3px; min-width:150px; }
.kpi-dd-group label { font-size:12px; font-weight:500; text-transform:none; letter-spacing:0; color:var(--gray-600); }
.kpi-dd-group select { padding:7px 12px; border:1px solid rgba(99,102,241,0.18); border-radius:8px; font-size:13px; font-weight:500; background:#fff; color:#212529; cursor:pointer; transition:all 0.15s; appearance:auto; }
.kpi-dd-group select:focus { outline:none; border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,0.1); }
.kpi-dd-group select:hover { border-color:rgba(99,102,241,0.35); }
.kpi-dd-group input[type="text"] { padding:7px 12px; border:1px solid rgba(99,102,241,0.18); border-radius:8px; font-size:13px; font-weight:500; background:#fff; color:#212529; transition:all 0.15s; width:100%; box-sizing:border-box; }
.kpi-dd-group input[type="text"]:focus { outline:none; border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,0.1); }
.kpi-dd-group input[type="text"]::placeholder { color:#ADB5BD; }
.kpi-ac-dropdown { display:none; position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid rgba(99,102,241,0.18); border-top:none; border-radius:0 0 10px 10px; max-height:220px; overflow-y:auto; z-index:200; box-shadow:0 8px 20px rgba(0,0,0,0.1); }
.kpi-ac-dropdown.active { display:block; }
.kpi-ac-item { padding:9px 14px; font-size:13px; cursor:pointer; border-bottom:1px solid #F1F3F5; transition:background 0.1s; color:#333333; }
.kpi-ac-item:last-child { border-bottom:none; }
.kpi-ac-item:hover, .kpi-ac-item.highlighted { background:linear-gradient(135deg, #6366f1, #818cf8); color:#fff; }
.kpi-ac-item .ac-sub { font-size:11px; color:#ADB5BD; margin-top:1px; }
.kpi-ac-item:hover .ac-sub, .kpi-ac-item.highlighted .ac-sub { color:rgba(255,255,255,0.7); }
.kpi-ac-clear { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:14px; color:#ADB5BD; padding:2px 6px; border-radius:50%; line-height:1; }
.kpi-ac-clear:hover { color:#ef4444; background:rgba(239,68,68,0.1); }
@media (max-width:900px) { .kpi-dropdown-filters { gap:8px; } .kpi-dd-group { min-width:120px; flex:1; } }
.kpi-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin-bottom:18px; }
.kpi-card { background:#fff; border-radius:10px; padding:16px; box-shadow:0 1px 3px rgba(0,0,0,0.06); border:1px solid rgba(0,0,0,0.08); position:relative; overflow:hidden; }
.kpi-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; }
.kpi-card.kc-blue::before { background:var(--primary); }
.kpi-card.kc-green::before { background:#34a853; }
.kpi-card.kc-orange::before { background:#fd7e14; }
.kpi-card.kc-purple::before { background:#7952B3; }
.kpi-card.kc-red::before { background:var(--danger); }
.kpi-card.kc-teal::before { background:#20c997; }
.kpi-card .kc-label { font-size:12px; color:var(--gray-700); text-transform:none; letter-spacing:0; font-weight:600; margin-bottom:6px; }
.kpi-card .kc-value { font-size:26px; font-weight:700; color:var(--gray-900); }
.kpi-card .kc-sub { font-size:12px; color:var(--gray-400); margin-top:4px; }
.kpi-chart-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-bottom:14px; }
.kpi-chart-card { background:#fff; border-radius:10px; padding:14px; box-shadow:0 1px 4px rgba(0,0,0,0.06); border:1px solid var(--gray-200); }
.kpi-chart-card h3 { margin: 0 0 12px 0; padding: 0 0 10px 12px; font-size: 14px; font-weight: 700; color: var(--gray-900); background: transparent; border-radius: 0; border-bottom: 1px solid var(--gray-100); border-left: 3px solid #2563EB; }
.kpi-chart-card canvas { max-height:220px; }
.kpi-chart-wide { grid-column: span 1; }
.kpi-table { width:100%; border-collapse:collapse; font-size:13px; }
.kpi-table th { text-align:left; padding:8px 10px; border-bottom:2px solid var(--gray-200); color:var(--gray-500); font-weight:600; font-size:11px; text-transform:uppercase; }
.kpi-table td { padding:8px 10px; border-bottom:1px solid var(--gray-100); }
.kpi-table tr:hover { background:var(--gray-50); }
.kpi-table .kpi-bar { height:6px; border-radius:3px; background:var(--primary); display:inline-block; vertical-align:middle; }
@media (max-width:1100px) { .kpi-chart-row { grid-template-columns:1fr 1fr; } }
@media (max-width:700px) { .kpi-chart-row { grid-template-columns:1fr; } }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
/* Settings page - Lumina-inspired layout */
.settings-page { max-width: 100%; margin: 0; padding: 20px 24px; }
.settings-page h2 { font-size: 28px; font-weight: 700; color: var(--gray-900); margin-bottom: 4px; }
.settings-page-subtitle { font-size: 14px; color: var(--gray-500); margin-bottom: 24px; }

/* Settings tabs - underline style */
.settings-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--gray-200); margin-bottom: 32px; }
.settings-tab { padding: 12px 20px; border: none; background: none; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--gray-500); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.2s; }
.settings-tab:hover { color: var(--gray-700); }
.settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* Settings section - 3 column grid */
.settings-section { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--gray-100); }
.settings-section:last-child { border-bottom: none; margin-bottom: 0; }
.settings-section-info { }
.settings-section-info h3 { font-size: 16px; font-weight: 700; color: var(--gray-900); margin: 0 0 6px 0; }
.settings-section-info p { font-size: 13px; color: var(--gray-500); line-height: 1.5; margin: 0; }

/* Settings glass panel */
.settings-glass-panel { background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 16px; padding: 28px; }

/* Settings form elements */
.settings-glass-panel .form-group { margin-bottom: 16px; }
.settings-glass-panel .form-group label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gray-500); margin-bottom: 6px; display: block; }
.settings-glass-panel .form-group input,
.settings-glass-panel .form-group select,
.settings-glass-panel .form-group textarea { background: #f8f9fb; border: none; border-radius: 10px; padding: 10px 14px; font-size: 13px; color: var(--gray-800); width: 100%; transition: all 0.2s; }
.settings-glass-panel .form-group input:focus,
.settings-glass-panel .form-group select:focus,
.settings-glass-panel .form-group textarea:focus { background: #F1F3F5; outline: none; box-shadow: 0 0 0 2px rgba(37,99,235,0.15); }

/* Keep existing grid helpers */
.settings-form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.settings-form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.settings-form-row-2-wide { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; }

/* Sticky header */
.settings-sticky-header { position: sticky; top: 0; background: white; padding: 16px 0 20px 0; margin-bottom: 0; border-bottom: none; display: flex; justify-content: space-between; align-items: flex-start; z-index: 100; }
.settings-sticky-header h2 { margin: 0; }
.settings-sticky-button { background: var(--primary); color: white; padding: 10px 28px; border: none; border-radius: 9999px; font-weight: 600; font-size: 13px; cursor: pointer; box-shadow: 0 4px 14px rgba(37,99,235,0.25); transition: all 0.2s; }
.settings-sticky-button:hover { box-shadow: 0 6px 20px rgba(37,99,235,0.4); transform: translateY(-1px); }

/* Info notes */
.settings-info-note { background: rgba(37,99,235,0.04); border-left: 3px solid var(--primary); padding: 12px 16px; border-radius: 0 10px 10px 0; font-size: 12px; color: var(--gray-600); margin-bottom: 16px; line-height: 1.5; }

/* Checkboxes */
.checkbox-group { display: flex; flex-direction: column; gap: 12px; }
.checkbox-item { display: flex; align-items: center; gap: 10px; }
.checkbox-item input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary); border-radius: 4px; }
.checkbox-item label { margin: 0; cursor: pointer; font-weight: 400; font-size: 13px; color: var(--gray-700); }

/* Radio */
.radio-group { display: flex; flex-direction: column; gap: 10px; }
.radio-item { display: flex; align-items: center; gap: 10px; }
.radio-item input[type="radio"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary); }
.radio-item label { margin: 0; cursor: pointer; font-weight: 400; font-size: 13px; color: var(--gray-700); }

/* Dark mode overrides */
[data-theme="dark"] .settings-page h2 { color: #ecedf6; }
[data-theme="dark"] .settings-page-subtitle { color: #64748b; }
[data-theme="dark"] .settings-tabs { border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .settings-tab { color: #64748b; }
[data-theme="dark"] .settings-tab:hover { color: #94a3b8; }
[data-theme="dark"] .settings-tab.active { color: #8ff5ff; border-bottom-color: #8ff5ff; }
[data-theme="dark"] .settings-section { border-bottom-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .settings-section-info h3 { color: #ecedf6; }
[data-theme="dark"] .settings-section-info p { color: #64748b; }
[data-theme="dark"] .settings-glass-panel { background: rgba(22,26,33,0.8); backdrop-filter: blur(20px); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .settings-glass-panel .form-group label { color: #64748b; }
[data-theme="dark"] .settings-glass-panel .form-group input,
[data-theme="dark"] .settings-glass-panel .form-group select,
[data-theme="dark"] .settings-glass-panel .form-group textarea { background: #22262f; color: #e2e8f0; border: none; }
[data-theme="dark"] .settings-glass-panel .form-group input:focus,
[data-theme="dark"] .settings-glass-panel .form-group select:focus,
[data-theme="dark"] .settings-glass-panel .form-group textarea:focus { background: #282c36; box-shadow: 0 0 0 2px rgba(143,245,255,0.15); }
[data-theme="dark"] .settings-sticky-header { background: #0b0e14; }
[data-theme="dark"] .settings-sticky-button { background: #8ff5ff; color: #0b0e14; box-shadow: 0 4px 14px rgba(143,245,255,0.2); }
[data-theme="dark"] .settings-info-note { background: rgba(143,245,255,0.04); border-left-color: #8ff5ff; color: #94a3b8; }
[data-theme="dark"] .checkbox-item label { color: #94a3b8; }
[data-theme="dark"] .radio-item label { color: #94a3b8; }

@media (max-width: 900px) {
  .settings-section { grid-template-columns: 1fr; gap: 16px; }
  .settings-form-row-2, .settings-form-row-3, .settings-form-row-2-wide { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) { .settings-form-row-2, .settings-form-row-3, .settings-form-row-2-wide { grid-template-columns: 1fr; } }

/* ===== BOOKING EDIT PAGE — WIZARD LAYOUT ===== */
.booking-edit-page { display:flex; flex-direction:column; height:calc(100vh - 60px); overflow:hidden; }
.bke-header { background:linear-gradient(135deg,#0b0e14 0%,#161a21 100%); padding:28px 32px; display:flex; justify-content:space-between; align-items:flex-end; gap:16px; position:relative; overflow:hidden; flex-shrink:0; }
.bke-header::before { content:''; position:absolute; top:-40px; right:-40px; width:200px; height:200px; background:radial-gradient(circle,rgba(143,245,255,0.08),transparent 70%); pointer-events:none; }
.bke-header h1 { margin:0; font-size:28px; font-weight:700; color:#fff; letter-spacing:-0.5px; }
.bke-header .btn-outline { background:rgba(255,255,255,0.08); color:#e2e8f0; border:1px solid rgba(255,255,255,0.15); border-radius:10px; padding:8px 20px; font-size:13px; }
.bke-header .btn-outline:hover { background:rgba(255,255,255,0.15); }
.bke-header-subtitle { font-size:11px; text-transform:uppercase; letter-spacing:0.2em; color:#8ff5ff; margin-bottom:6px; font-weight:600; }
.bke-header-actions { display:flex; gap:10px; align-items:center; }

/* Wizard body: left form + right sidebar */
.bke-wizard-body { display:flex; flex:1; overflow:hidden; min-height:0; }
.bke-wizard-scroll { flex:1; overflow-y:auto; padding:32px; }
.bke-wizard-scroll::-webkit-scrollbar { width:4px; }
.bke-wizard-scroll::-webkit-scrollbar-thumb { background:rgba(143,245,255,0.15); border-radius:4px; }

/* Wizard sections */
.bke-wizard-section { background:rgba(22,26,33,0.4); backdrop-filter:blur(20px); border:1px solid rgba(143,245,255,0.08); border-radius:16px; padding:28px; margin-bottom:20px; position:relative; overflow:hidden; transition:all 0.3s; }
.bke-wizard-section:hover { border-color:rgba(143,245,255,0.12); }
.bke-wizard-section.step-active { border-left:4px solid #8ff5ff; background:rgba(0,240,255,0.02); }
.bke-wizard-section .section-header { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.bke-wizard-section .section-header .step-num { width:36px; height:36px; border-radius:50%; background:rgba(143,245,255,0.1); color:#8ff5ff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; flex-shrink:0; }
.bke-wizard-section .section-header h3 { font-size:18px; font-weight:700; color:#ecedf6; margin:0; letter-spacing:-0.3px; }
.bke-wizard-section .section-header .step-check { color:#8ff5ff; font-size:20px; margin-left:auto; }
.bke-wizard-section .section-bg-icon { position:absolute; top:20px; right:20px; font-size:64px; opacity:0.03; color:#8ff5ff; pointer-events:none; }

/* Form fields inside wizard */
.bke-wizard-section .bke-form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:10px; }
.bke-wizard-section .bke-form-row.full { grid-template-columns:1fr; }
.bke-wizard-section .bke-form-group { display:flex; flex-direction:column; }
.bke-wizard-section .bke-form-group label { font-size:10px; font-weight:700; color:#73757d; margin-bottom:5px; text-transform:uppercase; letter-spacing:0.15em; }
.bke-wizard-section .bke-form-group input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),
.bke-wizard-section .bke-form-group select,
.bke-wizard-section .bke-form-group textarea { padding:10px 14px; border:none; border-radius:10px; font-size:13px; font-family:inherit; background:#161a21; color:#ecedf6; transition:all 0.2s; }
.bke-wizard-section .bke-form-group input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):focus,
.bke-wizard-section .bke-form-group select:focus,
.bke-wizard-section .bke-form-group textarea:focus { background:#1c2028; box-shadow:0 0 0 2px rgba(143,245,255,0.2); outline:none; }
.bke-wizard-section .bke-form-group input::placeholder,
.bke-wizard-section .bke-form-group textarea::placeholder { color:#45484f; }
.bke-wizard-section .bke-form-group textarea { resize:vertical; min-height:60px; }

/* Vehicle type selection grid */
.tariff-btn-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:8px; }
.tariff-btn-grid .tariff-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:12px 6px 8px; border-radius:12px; border:1px solid rgba(255,255,255,0.08); background:#161a21; color:#64748b; cursor:pointer; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; transition:all 0.25s; text-align:center; width:100%; height:80px; box-sizing:border-box; }
.tariff-btn-grid .tariff-btn:hover { border-color:rgba(143,245,255,0.25); color:#a9abb3; background:#1c2028; }
.tariff-btn-grid .tariff-btn.active { border-color:#8ff5ff; background:rgba(143,245,255,0.06); color:#8ff5ff; box-shadow:0 0 15px rgba(143,245,255,0.12); }
.tariff-btn-grid .tariff-btn .tariff-icon { width:28px; height:28px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tariff-btn-grid .tariff-btn .tariff-icon svg { width:28px; height:28px; display:block; }
.tariff-btn-grid .tariff-btn .tariff-name { font-size:8px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.tariff-btn-grid .tariff-btn.customer-tariff { border-color:rgba(45,211,122,0.2); }
.tariff-btn-grid .tariff-btn.customer-tariff.active { border-color:#2dd37a; color:#2dd37a; }

/* Service Priority */
.bke-priority-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:8px; }
.bke-priority-card { position:relative; padding:14px 16px; border-radius:12px; border:1px solid rgba(255,255,255,0.06); background:#161a21; cursor:pointer; transition:all 0.25s; overflow:hidden; border-left:4px solid transparent; }
.bke-priority-card:hover { border-color:rgba(255,255,255,0.12); }
.bke-priority-card.active .bke-priority-check { display:flex; }
.bke-priority-card .bke-priority-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:2px; }
.bke-priority-card .bke-priority-desc { font-size:10px; color:#64748b; }
.bke-priority-card .bke-priority-check { display:none; position:absolute; top:10px; right:10px; width:18px; height:18px; border-radius:50%; background:rgba(143,245,255,0.15); align-items:center; justify-content:center; }
.bke-priority-card .bke-priority-check svg { width:11px; height:11px; stroke:#8ff5ff; stroke-width:3; fill:none; }
.bke-priority-card.priority-standard { border-left-color:rgba(172,137,255,0.5); }
.bke-priority-card.priority-standard .bke-priority-title { color:#ac89ff; }
.bke-priority-card.priority-standard.active { background:rgba(172,137,255,0.05); border-color:rgba(172,137,255,0.2); border-left-color:#ac89ff; }
.bke-priority-card.priority-express { border-left-color:rgba(143,245,255,0.5); }
.bke-priority-card.priority-express .bke-priority-title { color:#8ff5ff; }
.bke-priority-card.priority-express.active { background:rgba(143,245,255,0.05); border-color:rgba(143,245,255,0.2); border-left-color:#8ff5ff; }
.bke-priority-card.priority-urgent { border-left-color:rgba(255,93,215,0.5); }
.bke-priority-card.priority-urgent .bke-priority-title { color:#ff5dd7; }
.bke-priority-card.priority-urgent.active { background:rgba(255,93,215,0.05); border-color:rgba(255,93,215,0.2); border-left-color:#ff5dd7; }

/* Live Booking Summary Sidebar */
.bke-summary-sidebar { width:380px; border-left:1px solid rgba(255,255,255,0.06); display:flex; flex-direction:column; background:#10131a; flex-shrink:0; }
.bke-summary-header { padding:24px; border-bottom:1px solid rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:space-between; }
.bke-summary-header h3 { font-size:16px; font-weight:700; color:#ecedf6; }
.bke-summary-header .live-dot { width:8px; height:8px; border-radius:50%; background:#8ff5ff; animation:live-pulse 2s infinite; }
@keyframes live-pulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(143,245,255,0.4);} 50%{opacity:0.7;box-shadow:0 0 0 6px rgba(143,245,255,0);} }
.bke-summary-scroll { flex:1; overflow-y:auto; padding:24px; }
.bke-summary-scroll::-webkit-scrollbar { width:4px; }
.bke-summary-scroll::-webkit-scrollbar-thumb { background:rgba(143,245,255,0.1); border-radius:4px; }

/* Route map in sidebar */
.bke-summary-map { position:relative; height:220px; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,0.06); margin-bottom:24px; background:#0b0e14; }
.bke-summary-map > svg { width:100%; height:100%; }
.bke-summary-map .map-label { position:absolute; bottom:12px; left:12px; display:flex; align-items:center; gap:6px; z-index:10; pointer-events:none; }
.bke-summary-map .map-label svg { width:14px; height:14px; stroke:#8ff5ff; fill:none; stroke-width:2; }
.bke-summary-map .map-label span { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.15em; color:#8ff5ff; background:rgba(11,14,20,0.7); padding:3px 8px; border-radius:4px; }

/* Route timeline in sidebar */
.bke-summary-route { position:relative; padding-left:24px; margin-bottom:24px; }
.bke-summary-route::before { content:''; position:absolute; left:6px; top:10px; bottom:10px; width:2px; border-left:2px dashed rgba(255,255,255,0.08); }
.bke-summary-route-stop { position:relative; margin-bottom:20px; }
.bke-summary-route-stop:last-child { margin-bottom:0; }
.bke-summary-route-stop .route-dot { position:absolute; left:-24px; top:4px; width:14px; height:14px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.bke-summary-route-stop .route-dot .inner { width:6px; height:6px; border-radius:50%; }
.bke-summary-route-stop .route-dot.pickup { background:rgba(143,245,255,0.15); }
.bke-summary-route-stop .route-dot.pickup .inner { background:#8ff5ff; }
.bke-summary-route-stop .route-dot.delivery { background:rgba(172,137,255,0.15); }
.bke-summary-route-stop .route-dot.delivery .inner { background:#ac89ff; }
.bke-summary-route-stop .stop-type { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.15em; margin-bottom:2px; }
.bke-summary-route-stop .stop-type.pickup { color:#8ff5ff; }
.bke-summary-route-stop .stop-type.delivery { color:#ac89ff; }
.bke-summary-route-stop .stop-addr { font-size:12px; font-weight:600; color:#ecedf6; }
.bke-summary-route-stop .stop-time { font-size:10px; color:#64748b; margin-top:2px; }

/* Cost breakdown in sidebar */
.bke-summary-costs { background:rgba(28,32,40,0.5); padding:20px; border-radius:14px; border:1px solid rgba(255,255,255,0.04); margin-bottom:24px; }
.bke-summary-costs h4 { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.15em; color:#73757d; margin-bottom:14px; }
.bke-summary-cost-row { display:flex; justify-content:space-between; font-size:12px; padding:4px 0; }
.bke-summary-cost-row .cost-label { color:#a9abb3; }
.bke-summary-cost-row .cost-value { font-weight:600; color:#ecedf6; }
.bke-summary-cost-row .cost-value.accent { color:#8ff5ff; }
.bke-summary-cost-total { border-top:1px solid rgba(255,255,255,0.08); margin-top:12px; padding-top:12px; display:flex; justify-content:space-between; align-items:flex-end; }
.bke-summary-cost-total .total-label { font-size:12px; font-weight:700; color:#ecedf6; }
.bke-summary-cost-total .total-value { text-align:right; }
.bke-summary-cost-total .total-amount { font-size:28px; font-weight:800; color:#8ff5ff; line-height:1; letter-spacing:-1px; }
.bke-summary-cost-total .total-vat { font-size:9px; color:#45484f; text-transform:uppercase; margin-top:4px; }

/* Sidebar action buttons */
.bke-summary-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.bke-summary-action-btn { padding:10px; border-radius:10px; border:1px solid rgba(255,255,255,0.08); background:transparent; color:#a9abb3; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; justify-content:center; gap:6px; font-family:inherit; }
.bke-summary-action-btn:hover { background:#1c2028; color:#ecedf6; }
.bke-summary-action-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }

/* Confirm button at sidebar bottom */
.bke-summary-footer { padding:20px 24px; border-top:1px solid rgba(255,255,255,0.06); background:rgba(28,32,40,0.3); }
.bke-confirm-btn { display:block; width:100%; padding:16px 24px; background:linear-gradient(135deg,#8ff5ff,#00deec); color:#0b0e14; border:none; border-radius:12px; font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:0.12em; cursor:pointer; transition:all 0.2s; font-family:inherit; box-shadow:0 8px 24px rgba(143,245,255,0.2); }
.bke-confirm-btn:hover { box-shadow:0 12px 32px rgba(143,245,255,0.3); transform:translateY(-2px); }

/* Pill buttons */
.pill-group { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:8px; }
.pill-btn { padding:5px 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.1); background:#161a21; color:#a9abb3; font-size:11px; font-weight:600; cursor:pointer; transition:all 0.2s; font-family:inherit; }
.pill-btn:hover { border-color:rgba(143,245,255,0.2); color:#ecedf6; }
.pill-btn.active { background:rgba(143,245,255,0.1); color:#8ff5ff; border-color:rgba(143,245,255,0.3); }
.pill-btn.pill-green.active { background:rgba(45,211,122,0.1); color:#2dd37a; border-color:rgba(45,211,122,0.3); }
.pill-btn.pill-blue.active { background:rgba(99,102,241,0.1); color:#818cf8; border-color:rgba(99,102,241,0.3); }
.pill-btn.pill-red.active { background:rgba(239,68,68,0.1); color:#f87171; border-color:rgba(239,68,68,0.3); }
.pill-btn.pill-orange.active { background:rgba(245,158,11,0.1); color:#fbbf24; border-color:rgba(245,158,11,0.3); }

/* Warning banner */
.bke-warning-banner { background:rgba(245,158,11,0.08); border:1px solid rgba(245,158,11,0.2); border-radius:10px; padding:12px 16px; margin-bottom:16px; }
.bke-warning-banner .bke-warning-item { display:flex; align-items:center; gap:8px; font-size:13px; color:#fbbf24; margin-bottom:4px; }
.bke-warning-banner .bke-warning-item:last-child { margin-bottom:0; }

/* Price breakdown */
.bke-price-row { display:grid; grid-template-columns:120px 1fr; gap:8px; align-items:center; }
.bke-price-label { font-size:12px; color:#73757d; }
.bke-price-val { font-size:13px; }

/* Footer */
.bke-footer { display:none; }

/* Mobile */
@media (max-width:1200px) { .bke-summary-sidebar { display:none; } .bke-wizard-scroll { max-width:100%; } }
@media (max-width:768px) { .bke-wizard-scroll { padding:16px; } .bke-wizard-section { padding:16px; } .bke-wizard-section .bke-form-row { grid-template-columns:1fr; } .bke-priority-grid { grid-template-columns:1fr; } }

/* Address book search & dropdown */
.address-book-search { position: relative; }
.address-book-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--gray-300); border-top: none; border-radius: 0 0 6px 6px; max-height: 200px; overflow-y: auto; z-index: 50; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.address-book-dropdown.active { display: block; }
.address-book-item { padding: 10px 12px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--gray-100); transition: background 0.1s; }
.address-book-item:last-child { border-bottom: none; }
.address-book-item:hover { background: var(--primary-light); }
.address-book-item .abi-company { font-weight: 500; color: var(--gray-900); }
.address-book-item .abi-addr { font-size: 12px; color: var(--gray-600); }

/* Home page directory grid */
.home-directory { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1100px) { .home-directory { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .home-directory { grid-template-columns: 1fr; } }
.dir-card { background: #fff; border-radius: 12px; padding: 16px; box-shadow: none; border: 1px solid rgba(0,0,0,0.06); }
.dir-card h3 { margin: 0 0 12px 0; font-size: 14px; font-weight: 600; color: var(--gray-800); display: flex; align-items: center; gap: 8px; }
.dir-card-body { display: flex; flex-wrap: wrap; gap: 8px; }
.dir-btn { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 6px; border: none; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s; text-decoration: none; }
.dir-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.dir-btn-blue { background: linear-gradient(135deg, #1a73e8, #4285f4); color: #fff; }
.dir-btn-blue:hover { background: linear-gradient(135deg, #1557b0, #1a73e8); }
.dir-btn-green { background: linear-gradient(135deg, #0d904f, #34a853); color: #fff; }
.dir-btn-green:hover { background: linear-gradient(135deg, #0b7a43, #0d904f); }
.dir-btn-orange { background: linear-gradient(135deg, #e8590c, #fd7e14); color: #fff; }
.dir-btn-orange:hover { background: linear-gradient(135deg, #c44200, #e8590c); }
.dir-btn-red { background: linear-gradient(135deg, #dc3545, #dc3545); color: #fff; }
.dir-btn-red:hover { background: linear-gradient(135deg, #c82333, #dc3545); }
.dir-btn-teal { background: linear-gradient(135deg, #17a2b8, #20c997); color: #fff; }
.dir-btn-teal:hover { background: linear-gradient(135deg, #148a9e, #17a2b8); }
.dir-btn-purple { background: linear-gradient(135deg, #6F42C1, #7952B3); color: #fff; }
.dir-btn-purple:hover { background: linear-gradient(135deg, #5a32a3, #6F42C1); }
.dir-btn-dark { background: linear-gradient(135deg, #3c4043, #5f6368); color: #fff; }
.dir-btn-dark:hover { background: linear-gradient(135deg, #202124, #3c4043); }
.dir-btn-yellow { background: linear-gradient(135deg, #f57f17, #fbc02d); color: #fff; }
.dir-btn-yellow:hover { background: linear-gradient(135deg, #e65100, #f57f17); }

/* ===== JOB VIEW: MAP HERO ===== */
.jv-map-hero { position: relative; height: 320px; background: #0b0e14; overflow: hidden; border-radius: 16px; margin-bottom: 18px; margin-left: -24px; margin-right: -24px; border-radius: 0; }
.jv-map-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(143,245,255,0.06) 0%, transparent 60%), radial-gradient(ellipse at 70% 50%, rgba(172,137,255,0.06) 0%, transparent 60%); }
.jv-map-bg::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,0.02) 39px, rgba(255,255,255,0.02) 40px), repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,0.02) 39px, rgba(255,255,255,0.02) 40px); }
.jv-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.jv-glow-path { filter: drop-shadow(0 0 8px rgba(143,245,255,0.5)); }
.jv-map-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 60px; z-index: 2; }
.jv-map-point { text-align: center; }
.jv-map-point-dot { width: 12px; height: 12px; border-radius: 50%; margin: 0 auto 8px; }
.jv-map-point-dot.origin { background: #8ff5ff; box-shadow: 0 0 12px rgba(143,245,255,0.6); }
.jv-map-point-dot.dest { background: #ac89ff; box-shadow: 0 0 12px rgba(172,137,255,0.6); }
.jv-map-point-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: rgba(255,255,255,0.4); text-transform: uppercase; margin-bottom: 4px; }
.jv-map-point-addr { font-size: 14px; font-weight: 600; color: #e2e8f0; }
.jv-map-point-postcode { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 2px; }
.jv-map-distance { font-size: 20px; font-weight: 700; color: #8ff5ff; text-shadow: 0 0 20px rgba(143,245,255,0.3); }

/* Light mode map hero - always dark */
[data-theme="light"] .jv-map-hero, :root:not([data-theme="dark"]) .jv-map-hero { background: #0b0e14; }

/* Job View Toggle */
.jv-view-toggle { display: flex; gap: 3px; background: var(--gray-100); border-radius: 10px; padding: 3px; margin-left: 16px; }
.jv-view-btn { height: 30px; padding: 0 14px; display: flex; align-items: center; border: none; border-radius: 8px; background: transparent; color: var(--gray-500); cursor: pointer; font-size: 12px; font-weight: 600; transition: all 0.2s; }
.jv-view-btn:hover { background: rgba(0,0,0,0.04); }
.jv-view-btn.active { background: #fff; color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
[data-theme="dark"] .jv-view-toggle { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .jv-view-btn { color: #64748b; }
[data-theme="dark"] .jv-view-btn:hover { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .jv-view-btn.active { background: rgba(143,245,255,0.1); color: #8ff5ff; box-shadow: none; }

/* KINETIC Page Headers */
.kinetic-page-header {
  background: linear-gradient(135deg, #0b0e14 0%, #161a21 100%);
  border-radius: 16px;
  padding: 28px 32px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.kinetic-page-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(143,245,255,0.06) 0%, transparent 70%);
  border-radius: 50%;
}
.kinetic-page-header .kph-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.3px;
  color: #ecedf6;
  display: flex;
  align-items: center;
  gap: 12px;
}
.kinetic-page-header .kph-title span {
  color: #8ff5ff;
  text-shadow: 0 0 8px rgba(143,245,255,0.4);
}
.kinetic-page-header .kph-subtitle {
  font-size: 11px;
  color: #a9abb3;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 4px;
}
.kinetic-page-header .kph-actions {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 10px;
}
.kinetic-page-header .kph-btn {
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.kinetic-page-header .kph-btn-primary {
  background: linear-gradient(135deg, #8ff5ff, #00deec);
  color: #003f43;
}
.kinetic-page-header .kph-btn-secondary {
  background: #22262f;
  color: #ecedf6;
  border: 1px solid rgba(255,255,255,0.08);
}
.kinetic-page-header .kph-btn-secondary:hover {
  border-color: rgba(143,245,255,0.3);
}

/* KINETIC Stats Pills - for page headers */
.kph-stats {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}
.kph-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(34,38,47,0.6);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.05);
}
.kph-stat-val {
  font-size: 16px;
  font-weight: 900;
  color: #8ff5ff;
}
.kph-stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #a9abb3;
}

/* KINETIC Table Wrapper */
.kinetic-table-wrap {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--gray-100);
}
[data-theme="dark"] .kinetic-table-wrap {
  background: #161a21;
  border-color: rgba(255,255,255,0.05);
}

/* KINETIC Full Page View */
.jv-kinetic-page { position: relative; min-height: calc(100vh - 120px); background: #0b0e14; overflow: hidden; display: none; }
.jv-kinetic-page.active { display: block; }
.jv-kinetic-bg { position: absolute; inset: 0; z-index: 0; }
.jv-kinetic-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 25% 40%, rgba(143,245,255,0.06) 0%, transparent 55%), radial-gradient(ellipse at 75% 60%, rgba(172,137,255,0.06) 0%, transparent 55%); }
.jv-kinetic-bg::after { content: none; }
.jv-kinetic-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.jv-kinetic-content { position: relative; z-index: 2; display: flex; height: 100%; min-height: calc(100vh - 180px); padding: 32px; gap: 24px; }
.jv-kinetic-left { flex: 1; display: flex; flex-direction: column; gap: 16px; max-width: 420px; }
.jv-kinetic-right { width: 320px; display: flex; flex-direction: column; gap: 16px; margin-left: auto; }

/* Kinetic glass cards */
.jv-k-card { background: rgba(22,26,33,0.7); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 24px; }
.jv-k-card:hover { border-color: rgba(255,255,255,0.12); }
.jv-k-card-accent { border-left: 3px solid #8ff5ff; }
.jv-k-card-accent-purple { border-left: 3px solid #ac89ff; }

/* Kinetic header card */
.jv-k-ref-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: #8ff5ff; text-transform: uppercase; margin-bottom: 4px; }
.jv-k-ref { font-size: 28px; font-weight: 800; color: #ecedf6; letter-spacing: -0.5px; }
.jv-k-status { display: inline-block; padding: 5px 14px; border-radius: 9999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 8px; }
.jv-k-status-pending { background: rgba(245,158,11,0.15); color: #f59e0b; }
.jv-k-status-assigned { background: rgba(59,130,246,0.15); color: #3b82f6; }
.jv-k-status-collected { background: rgba(168,85,247,0.15); color: #a855f7; }
.jv-k-status-in-transit { background: rgba(143,245,255,0.15); color: #8ff5ff; }
.jv-k-status-delivered { background: rgba(0,212,170,0.15); color: #00d4aa; }
.jv-k-status-invoiced { background: rgba(100,116,139,0.15); color: #94a3b8; }
.jv-k-status-cancelled { background: rgba(255,113,108,0.15); color: #ff716c; }

/* Kinetic location cards */
.jv-k-loc-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.jv-k-loc-icon.origin { background: rgba(143,245,255,0.15); color: #8ff5ff; }
.jv-k-loc-icon.dest { background: rgba(172,137,255,0.15); color: #ac89ff; }
.jv-k-loc-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.jv-k-loc-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: rgba(255,255,255,0.35); text-transform: uppercase; }
.jv-k-loc-addr { font-size: 15px; font-weight: 600; color: #ecedf6; }
.jv-k-loc-sub { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 2px; }

/* Kinetic financials */
.jv-k-fin-title { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: #64748b; text-transform: uppercase; margin-bottom: 16px; }
.jv-k-fin-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; }
.jv-k-fin-label { font-size: 13px; color: #94a3b8; }
.jv-k-fin-val { font-size: 16px; font-weight: 700; color: #ecedf6; }
.jv-k-fin-val.accent { color: #8ff5ff; }
.jv-k-fin-total { border-top: 1px solid rgba(255,255,255,0.08); margin-top: 10px; padding-top: 10px; }
.jv-k-fin-total .jv-k-fin-val { font-size: 22px; font-weight: 800; color: #00d4aa; }

/* Kinetic driver card */
.jv-k-driver-name { font-size: 15px; font-weight: 700; color: #ecedf6; }
.jv-k-driver-sub { font-size: 12px; color: #64748b; margin-top: 2px; }
.jv-k-driver-note { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.05); border-radius: 10px; padding: 12px; margin-top: 12px; font-size: 12px; font-style: italic; color: #94a3b8; line-height: 1.5; }

/* Kinetic quick actions */
.jv-k-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.jv-k-action { padding: 8px 16px; border: 1px solid rgba(255,255,255,0.1); border-radius: 9999px; background: transparent; color: #94a3b8; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 5px; }
.jv-k-action svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.jv-k-action:hover { border-color: #8ff5ff; color: #8ff5ff; }

/* Kinetic progress bar at bottom */
.jv-k-progress { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; background: rgba(22,26,33,0.9); backdrop-filter: blur(20px); padding: 20px 32px; border-top: 1px solid rgba(255,255,255,0.06); }
.jv-k-progress-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.jv-k-progress-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #ecedf6; }
.jv-k-progress-title svg { color: #8ff5ff; width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.jv-k-progress-pct { font-size: 13px; font-weight: 600; color: #8ff5ff; }
.jv-k-progress-track { position: relative; height: 10px; background: rgba(255,255,255,0.06); border-radius: 9999px; }
.jv-k-progress-fill { position: absolute; left: 0; top: 0; height: 100%; background: linear-gradient(90deg, #8ff5ff, #ac89ff); border-radius: 9999px; filter: drop-shadow(0 0 6px rgba(143,245,255,0.4)); transition: width 0.8s; }
.jv-k-progress-dot { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 0 12px rgba(255,255,255,0.6); transition: left 0.8s; }
.jv-k-progress-labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: rgba(255,255,255,0.25); text-transform: uppercase; }

/* Kinetic status buttons */
.jv-k-status-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.jv-k-status-pill { padding: 6px 12px; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.1); background: transparent; color: #94a3b8; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.jv-k-status-pill:hover { border-color: #00d4aa; color: #00d4aa; }
.jv-k-status-pill.active { background: linear-gradient(135deg, #00d4aa, #8ff5ff); color: #0b0e14; border-color: #00d4aa; }

@media (max-width: 900px) {
  .jv-kinetic-content { flex-direction: column; padding: 16px; gap: 12px; }
  .jv-kinetic-left { max-width: 100%; }
  .jv-kinetic-right { width: 100%; margin-left: 0; }
  .jv-k-progress { padding: 14px 16px; }
  .jv-kinetic-page { min-height: auto; padding-bottom: 100px; }
}

/* ===== JOB VIEW: PROGRESS BAR ===== */
.jv-progress-bar { background: rgba(22,26,33,0.9); backdrop-filter: blur(20px); padding: 16px 24px; border-radius: 0 0 16px 16px; margin-top: -16px; margin-bottom: 18px; position: relative; z-index: 3; border: 1px solid rgba(255,255,255,0.06); border-top: none; }
.jv-progress-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.jv-progress-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #e2e8f0; }
.jv-progress-title svg { color: #8ff5ff; }
.jv-progress-pct { font-size: 13px; font-weight: 600; color: #8ff5ff; }
.jv-progress-track { position: relative; height: 10px; background: rgba(255,255,255,0.06); border-radius: 9999px; overflow: visible; }
.jv-progress-fill { position: absolute; left: 0; top: 0; height: 100%; background: linear-gradient(90deg, #8ff5ff, #ac89ff); border-radius: 9999px; filter: drop-shadow(0 0 6px rgba(143,245,255,0.4)); transition: width 0.8s ease; }
.jv-progress-indicator { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 0 12px rgba(255,255,255,0.6); transition: left 0.8s ease; }
.jv-progress-endpoints { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: rgba(255,255,255,0.3); text-transform: uppercase; }

/* ===== FULL JOB VIEW PAGE (KINETIC ETHEREAL) ===== */
.job-view-page { max-width:100%; background:var(--gray-50); min-height:calc(100vh - 60px); padding:0; }
.jv-header { background:#fff; padding:18px 24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; border-bottom:1px solid rgba(0,0,0,0.06); }
.jv-header-left { display:flex; align-items:center; gap:14px; }
.jv-header-left h1 { margin:0; font-size:24px; font-weight:600; color:var(--gray-900); }
.jv-back-btn { background:transparent; color:var(--gray-700); border:1px solid var(--gray-300); padding:8px 16px; border-radius:9999px; font-size:14px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:all 0.15s; }
.jv-back-btn:hover { background:var(--gray-100); border-color:var(--gray-400); }
.jv-actions { display:flex; gap:8px; flex-wrap:wrap; }
.jv-actions .jv-act { padding:8px 16px; border-radius:9999px; border:1px solid var(--gray-300); font-size:13px; font-weight:600; cursor:pointer; transition:all 0.15s; color:var(--gray-700); background:transparent; display:inline-flex; align-items:center; gap:6px; }
.jv-actions .jv-act:hover { background:var(--gray-100); border-color:var(--gray-400); }
.jv-actions .jv-act svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; flex-shrink:0; }

.jv-alert { padding:12px 24px; text-align:center; font-size:15px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:8px; }
.jv-alert svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; flex-shrink:0; }
.jv-alert-green { background:#d4edda; color:#155724; border-bottom:1px solid #c3e6cb; }
.jv-alert-orange { background:#fff3cd; color:#856404; border-bottom:1px solid #ffeaa7; }

.jv-body { padding:20px 24px; }

/* Contact View Page */
.cv-page { max-width:900px; }
.cv-header { display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.cv-avatar { width:64px; height:64px; border-radius:16px; background:linear-gradient(135deg, #2563EB, #6F42C1); display:flex; align-items:center; justify-content:center; color:#fff; font-size:24px; font-weight:700; flex-shrink:0; }
.cv-header-info h2 { margin:0 0 4px; font-size:20px; }
.cv-header-info p { margin:0; color:var(--gray-500); font-size:13px; }
.cv-section { background:#fff; border-radius:12px; border:1px solid rgba(0,0,0,0.06); overflow:hidden; margin-bottom:16px; }
.cv-section-header { padding:12px 20px; font-size:14px; font-weight:600; color:var(--gray-800); background:transparent; border-left:3px solid var(--primary); border-bottom:1px solid rgba(0,0,0,0.06); }
.cv-section-header.cv-blue { border-left-color:#2563EB; }
.cv-section-header.cv-green { border-left-color:#28a745; }
.cv-section-header.cv-orange { border-left-color:#e8590c; }
.cv-section-header.cv-purple { border-left-color:#6F42C1; }
.cv-section-body { padding:16px 20px; }
.cv-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cv-field label { display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; color:var(--gray-500); margin-bottom:4px; }
.cv-field input, .cv-field select, .cv-field textarea { width:100%; padding:8px 12px; border:1px solid var(--gray-200); border-radius:8px; font-size:13px; background:#fff; }
.cv-field textarea { min-height:60px; resize:vertical; }
.cv-email-list { display:flex; flex-direction:column; gap:6px; }
.cv-email-row { display:flex; align-items:center; gap:8px; }
.cv-email-row input { flex:1; }
.cv-email-remove { background:none; border:none; color:var(--danger); cursor:pointer; font-size:16px; padding:4px; }
.cv-add-email-btn { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border:1px dashed var(--gray-300); border-radius:6px; background:none; color:var(--gray-600); font-size:12px; cursor:pointer; margin-top:4px; }
.cv-add-email-btn:hover { color:var(--primary); border-color:var(--primary); }
.cv-notif-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cv-notif-item { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--gray-50); border-radius:8px; cursor:pointer; }
.cv-notif-item input { width:18px; height:18px; cursor:pointer; }
.cv-notif-item label { margin:0; cursor:pointer; font-size:13px; font-weight:400; }
.cv-notif-item.active { background:#e8f0fe; border:1px solid #b8daff; }
.cv-bookings-table { width:100%; border-collapse:collapse; font-size:13px; }
.cv-bookings-table th { text-align:left; padding:8px 12px; background:transparent; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--gray-500); border-bottom:1px solid var(--gray-200); }
.cv-bookings-table td { padding:8px 12px; border-bottom:1px solid var(--gray-100); }

/* Bento grid rows */
.jv-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; margin-bottom:18px; }
.jv-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.jv-row-4 { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:18px; margin-bottom:18px; }
.jv-row-notes { display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; margin-bottom:18px; }
@media (max-width:1200px) { .jv-row-4 { grid-template-columns:1fr 1fr; } }
@media (max-width:900px) { .jv-row, .jv-row-notes { grid-template-columns:1fr; } .jv-row-4 { grid-template-columns:1fr; } .jv-row-2 { grid-template-columns:1fr; } }

/* ===== JOB VIEW MOBILE ===== */
@media (max-width:768px) {
  .jv-header { padding: 12px 14px; gap: 8px; }
  .jv-header-left h1 { font-size: 18px; }
  .jv-back-btn { padding: 6px 12px; font-size: 12px; }
  .jv-actions { gap: 5px; }
  .jv-actions .jv-act { padding: 6px 10px; font-size: 11px; gap: 4px; }
  .jv-actions .jv-act svg { width: 12px; height: 12px; }
  .jv-body { padding: 12px 10px; }

  /* Map hero - compact on mobile */
  .jv-map-hero { height: 220px; border-radius: 0; margin-bottom: 0; margin-left: -10px; margin-right: -10px; }
  .jv-map-overlay { padding: 0 16px; flex-direction: row; gap: 4px; }
  .jv-map-point-addr { font-size: 11px; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .jv-map-point-postcode { font-size: 10px; }
  .jv-map-point-label { font-size: 8px; letter-spacing: 1px; }
  .jv-map-distance { font-size: 14px; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); }

  /* Progress bar */
  .jv-progress-bar { padding: 12px 14px; margin-bottom: 12px; border-radius: 0 0 12px 12px; }
  .jv-progress-header { margin-bottom: 8px; }
  .jv-progress-title { font-size: 12px; gap: 5px; }
  .jv-progress-title svg { width: 13px; height: 13px; }
  .jv-progress-pct { font-size: 11px; }
  .jv-progress-track { height: 8px; }
  .jv-progress-indicator { width: 12px; height: 12px; }
  .jv-progress-endpoints { font-size: 8px; letter-spacing: 1px; }

  /* Cards */
  .jv-card { border-radius: 12px; }
  .jv-card-header { padding: 10px 14px; font-size: 12px; }
  .jv-card-body { padding: 14px; }
  .jv-field { padding: 8px 0; font-size: 13px; }
  .jv-field-label { font-size: 12px; min-width: 90px; }
  .jv-field-value { font-size: 13px; }

  /* Journey - horizontal scroll on mobile */
  .jv-journey { padding: 16px 14px; border-radius: 12px; overflow: hidden; }
  .jv-journey-title { font-size: 14px; margin-bottom: 16px; }
  .jv-journey-track { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; min-width: 0; }
  .jv-journey-step { min-width: 100px; }
  .jv-journey-dot { width: 26px; height: 26px; }
  .jv-journey-dot svg { width: 12px; height: 12px; }
  .jv-journey-label { font-size: 9px; }
  .jv-journey-time { font-size: 11px; }
  .jv-stage-actions { grid-template-columns: 1fr 1fr; gap: 3px; max-width:140px; }
  .jv-stage-btn { font-size: 9px; padding: 3px 5px; }
  .jv-stage-note { max-width: 90px; font-size: 10px; }

  /* Notes & audit */
  .jv-notes-text { font-size: 13px; }

  /* Status bar */
  .jv-status-row { padding: 10px 12px; flex-wrap: wrap; gap: 4px; }
  .jv-status-btn { padding: 6px 10px; font-size: 11px; }

  /* Alert */
  .jv-alert { font-size: 12px; padding: 10px 14px; }
}

@media (max-width:480px) {
  .jv-header { flex-direction: column; align-items: flex-start; }
  .jv-actions .jv-act span:not(.sr-only) { /* keep text but smaller */ }
  .jv-map-hero { height: 180px; }
  .jv-map-overlay { padding: 0 12px; }
  .jv-map-point-addr { font-size: 10px; max-width: 80px; }
  .jv-map-distance { font-size: 12px; top: 12px; }
}

/* Glass-effect cards */
.jv-card { background:#fff; border-radius:16px; box-shadow:none; border:1px solid rgba(0,0,0,0.06); overflow:hidden; backdrop-filter:blur(12px); }
.jv-card-header { padding:14px 20px; font-size:14px; font-weight:700; color:var(--gray-500); display:flex; align-items:center; justify-content:space-between; gap:8px; background:transparent; border-bottom:1px solid rgba(0,0,0,0.04); text-transform:uppercase; letter-spacing:0.5px; }
.jv-card-header svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; }
.jv-card-body { padding:20px; }

.jv-field { display:flex; justify-content:space-between; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--gray-100); font-size:15px; }
.jv-field:last-child { border-bottom:none; }
.jv-field-label { color:var(--gray-500); font-weight:500; min-width:120px; font-size:13px; }
.jv-field-value { font-weight:600; color:var(--gray-900); text-align:right; font-size:14px; }
.jv-field-value a { color:var(--primary); text-decoration:none; }
.jv-field-value a:hover { text-decoration:underline; }

.jv-contact-name { font-size:16px; font-weight:600; color:var(--primary); margin-bottom:6px; }
.jv-contact-email { font-size:13px; color:var(--primary); margin-bottom:3px; }
.jv-address-line { font-size:14px; color:var(--gray-700); line-height:1.6; }

/* Shipment Journey Widget */
.jv-journey { background:#fff; border:1px solid rgba(0,0,0,0.06); border-radius:16px; padding:28px 32px; margin-bottom:18px; }
.jv-journey-title { font-size:16px; font-weight:700; color:var(--gray-900); margin-bottom:24px; letter-spacing:0.5px; }
.jv-journey-track { display:flex; align-items:flex-start; position:relative; padding:0 20px; }
.jv-journey-line { position:absolute; top:16px; left:40px; right:40px; height:3px; background:var(--gray-200); border-radius:2px; }
.jv-journey-line-fill { position:absolute; top:16px; left:40px; height:3px; background:linear-gradient(90deg, #28a745, #28a745); border-radius:2px; transition:width 0.6s ease; }
.jv-journey-step { flex:1; display:flex; flex-direction:column; align-items:center; position:relative; z-index:2; }
.jv-journey-dot { width:32px; height:32px; border-radius:50%; border:3px solid var(--gray-200); background:#fff; display:flex; align-items:center; justify-content:center; transition:all 0.3s; }
.jv-journey-dot.done { background:#28a745; border-color:#28a745; box-shadow:0 0 8px rgba(40,167,69,0.3); }
.jv-journey-dot.active { border-color:#28a745; box-shadow:0 0 12px rgba(40,167,69,0.3); animation:journey-pulse 2s infinite; }
.jv-journey-dot.done svg { stroke:#fff; }
.jv-journey-dot svg { width:14px; height:14px; stroke:var(--gray-300); stroke-width:2.5; fill:none; }
.jv-journey-label { font-size:11px; font-weight:600; color:var(--gray-400); margin-top:12px; text-align:center; text-transform:uppercase; letter-spacing:0.3px; }
.jv-journey-step.done .jv-journey-label { color:#28a745; }
.jv-journey-step.active .jv-journey-label { color:#28a745; }
.jv-journey-time { font-size:13px; font-weight:700; color:var(--gray-400); margin-top:4px; }
.jv-journey-step.done .jv-journey-time { color:var(--gray-900); }
@keyframes journey-pulse { 0%, 100% { box-shadow:0 0 12px rgba(40,167,69,0.3); } 50% { box-shadow:0 0 24px rgba(40,167,69,0.5), 0 0 48px rgba(40,167,69,0.15); } }

/* Stage actions on journey steps */
.jv-stage-actions { margin-top:10px; display:grid; grid-template-columns:1fr 1fr; gap:4px; width:100%; max-width:160px; }
.jv-stage-btn { display:inline-flex; align-items:center; justify-content:center; gap:3px; padding:5px 6px; border:1px solid var(--gray-300); border-radius:6px; background:transparent; color:var(--gray-600); font-size:10px; font-weight:600; cursor:pointer; transition:all 0.2s; white-space:nowrap; }
.jv-stage-btn svg { width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2; flex-shrink:0; }
.jv-stage-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.jv-stage-email-sent { grid-column:1/-1; font-size:9px; color:var(--success); text-align:center; margin-top:2px; }
.jv-journey-step.done .jv-stage-btn { border-color:#28a745; color:#28a745; }
.jv-journey-step.done .jv-stage-btn:hover { background:#28a745; color:#fff; }
.jv-stage-photos { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; margin-top:6px; }
.jv-stage-photo { width:36px; height:36px; border-radius:5px; object-fit:cover; border:2px solid var(--gray-200); cursor:pointer; transition:transform 0.2s; }
.jv-stage-photo:hover { transform:scale(1.2); z-index:10; }
.jv-stage-note { font-size:12px; color:var(--gray-500); margin-top:6px; font-style:italic; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jv-journey-step.done .jv-stage-note { color:#28a745; }
.jv-stage-photo-count { font-size:11px; color:var(--gray-400); font-weight:600; }

/* Stage photo lightbox */
.stage-lightbox { position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:10000; display:flex; align-items:center; justify-content:center; }
.stage-lightbox img { max-width:90vw; max-height:85vh; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
.stage-lightbox-close { position:absolute; top:20px; right:30px; color:#fff; font-size:32px; cursor:pointer; background:none; border:none; }

/* Route Visualization placeholder */
.jv-route { background:#fff; border:1px solid rgba(0,0,0,0.06); border-radius:16px; padding:28px 32px; margin-bottom:18px; }
.jv-route-title { font-size:16px; font-weight:700; color:var(--gray-900); margin-bottom:16px; letter-spacing:0.5px; }
.jv-route-info { display:flex; align-items:center; gap:16px; margin-bottom:16px; font-size:14px; color:var(--gray-700); }
.jv-route-point { display:flex; align-items:center; gap:8px; font-weight:600; }
.jv-route-point svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }
.jv-route-arrow { color:var(--gray-400); }
.jv-route-arrow svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; }
.jv-route-map-placeholder { background:var(--gray-50); border:2px dashed var(--gray-200); border-radius:12px; height:180px; display:flex; align-items:center; justify-content:center; color:var(--gray-400); font-size:14px; font-weight:500; }

/* Notes card */
.jv-notes-text { font-size:15px; color:var(--gray-700); line-height:1.7; white-space:pre-wrap; min-height:60px; }
.jv-notes-files { margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; }
.jv-notes-file { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; background:var(--gray-50); border:1px solid var(--gray-200); border-radius:8px; font-size:12px; color:var(--gray-700); cursor:pointer; transition:all 0.2s; max-width:200px; }
.jv-notes-file:hover { background:var(--gray-100); border-color:var(--gray-300); }
.jv-notes-file-icon { font-size:16px; flex-shrink:0; }
.jv-notes-file-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jv-notes-file-delete { color:var(--danger); font-size:14px; cursor:pointer; margin-left:4px; flex-shrink:0; opacity:0.6; }
.jv-notes-file-delete:hover { opacity:1; }
.jv-notes-actions { margin-top:12px; display:flex; gap:8px; }
.jv-notes-upload-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border:1px dashed var(--gray-300); border-radius:8px; background:#fff; color:var(--gray-600); font-size:12px; font-weight:600; cursor:pointer; transition:all 0.2s; }
.jv-notes-upload-btn:hover { background:var(--primary-light); color:var(--primary); border-color:var(--primary); }
.jv-note-edit-btn { background:none; border:1px solid var(--gray-200); color:var(--gray-500); font-size:11px; font-weight:600; padding:3px 10px; border-radius:6px; cursor:pointer; text-transform:none; letter-spacing:0; transition:all 0.2s; }
.jv-note-edit-btn:hover { background:var(--primary-light); color:var(--primary); border-color:var(--primary); }
.jv-history-item { font-size:13px; color:var(--gray-600); padding:8px 0; border-bottom:1px solid var(--gray-100); }
.jv-history-item:last-child { border-bottom:none; }

/* Quick status row */
.jv-status-row { display:flex; gap:10px; flex-wrap:wrap; padding:16px 24px; background:#fff; border-top:1px solid var(--gray-200); align-items:center; }
.jv-status-btn { padding:8px 18px; border:1px solid var(--gray-300); background:transparent; border-radius:9999px; font-size:14px; font-weight:600; color:var(--gray-600); cursor:pointer; transition:all 0.12s; }
.jv-status-btn:hover { border-color:var(--primary); color:var(--primary); }
.jv-status-btn.active { background:linear-gradient(135deg,#28a745,#28a745); color:#fff; border-color:#28a745; }

/* ===== DRIVER SIGNUP PAGE ===== */
.driver-signup-page { max-width:1200px; margin:0 auto; padding:20px; }
.driver-signup-page h1 { font-size:28px; font-weight:700; color:var(--gray-900); margin-bottom:6px; }
.driver-signup-page .signup-subtitle { font-size:16px; color:var(--gray-500); margin-bottom:30px; }
.signup-section { background:#fff; border-radius:12px; box-shadow:none; border:1px solid rgba(0,0,0,0.06); margin-bottom:14px; overflow:hidden; }
.signup-section-header { padding:12px 16px; font-size:14px; font-weight:700; color:var(--gray-800); background:transparent; border-bottom:1px solid rgba(0,0,0,0.06); border-left:3px solid #2563EB; }
.signup-section-body { padding:16px 20px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.signup-section-body.single-col { grid-template-columns:1fr; }
.signup-field { display:flex; flex-direction:column; gap:6px; }
.signup-field.full-width { grid-column:1 / -1; }
.signup-field label { font-size:11px; font-weight:600; color:var(--gray-700); text-transform:uppercase; letter-spacing:0.3px; }
.signup-field label .req { color:var(--danger); }
.signup-field input, .signup-field select, .signup-field textarea { padding:7px 10px; border:1px solid var(--gray-300); border-radius:5px; font-size:13px; font-family:inherit; transition:border 0.2s; }
.signup-field input:focus, .signup-field select:focus, .signup-field textarea:focus { border-color:var(--primary); outline:none; box-shadow:0 0 0 3px rgba(26,115,232,0.12); }
.signup-field textarea { min-height:80px; resize:vertical; }
.signup-checkbox { display:flex; align-items:flex-start; gap:10px; grid-column:1 / -1; padding:10px 0; }
.signup-checkbox input[type="checkbox"] { margin-top:3px; width:20px; height:20px; accent-color:var(--primary); }
.signup-checkbox label { font-size:14px; color:var(--gray-700); line-height:1.5; }
.signup-actions { display:flex; gap:12px; justify-content:flex-end; padding:20px 0; }
.signup-actions .btn { padding:12px 32px; font-size:16px; }
@media (max-width:900px) { .signup-section-body { grid-template-columns:1fr 1fr; } } @media (max-width:600px) { .signup-section-body { grid-template-columns:1fr; } }

/* ===== DARK THEME ===== */
[data-theme="dark"] {
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --primary-light: #1e3a8a;
  --success: #00d4aa;
  --success-light: #064e3b;
  --warning: #f59e0b;
  --warning-light: #78350f;
  --danger: #ef4444;
  --danger-light: #7f1d1d;
  --info: #0ea5e9;
  --purple: #a855f7;
  --purple-light: #4c0519;
  --gray-50: #f1f5f9;
  --gray-100: #e2e8f0;
  --gray-200: #cbd5e1;
  --gray-300: #94a3b8;
  --gray-400: #64748b;
  --gray-500: #475569;
  --gray-600: #334155;
  --gray-700: #1e293b;
  --gray-800: #0f172a;
  --gray-900: #0b0e14;
  --dark-surface: #161a21;
  --dark-border: rgba(255,255,255,0.05);
  --dark-border-hover: rgba(255,255,255,0.08);
  --dark-glow-green: rgba(0,212,170,0.15);
  --dark-glow-blue: rgba(37,99,235,0.15);
  --dark-glow-purple: rgba(124,58,237,0.15);
}

[data-theme="dark"] body {
  background: #0b0e14;
  color: #e2e8f0;
}

/* Sidebar is always dark - no dark theme overrides needed */

[data-theme="dark"] .mobile-only-header {
  background: rgba(11,14,20,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--dark-border);
}
[data-theme="dark"] .header-search input::placeholder { color: #475569; }

[data-theme="dark"] .notification-badge {
  color: #94a3b8;
}
[data-theme="dark"] .notification-badge:hover { background: rgba(0,212,170,0.08); }

[data-theme="dark"] .theme-toggle { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,0.08); }

[data-theme="dark"] .main-content {
  background: #0b0e14;
}

/* ========== LIGHT MODE — FULL WHITE CARD DESIGN ========== */
[data-theme="light"] .main-content { background:#F8F9FB; }
[data-theme="light"] body, html[data-theme="light"] { background:#F8F9FB; }

/* Cards */
[data-theme="light"] .card { background:#fff; border:1px solid #E9ECEF; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
[data-theme="light"] .card:hover { border-color:#DEE2E6; box-shadow:0 2px 8px rgba(0,0,0,0.08); }

/* Home page panels */
[data-theme="light"] .home-card { background:#fff; border:1px solid #E9ECEF; }
[data-theme="light"] .home-card:hover { border-color:#DEE2E6; box-shadow:0 4px 16px rgba(0,0,0,0.08); }
[data-theme="light"] .home-card-header { color:#495057; }
[data-theme="light"] .home-tile { background:#F1F3F5; color:#495057; border-color:#E9ECEF; }
[data-theme="light"] .home-tile:hover { background:#E9ECEF; color:#212529; }
[data-theme="light"] .home-tile.tile-blue { background:#e8f0fe; color:#2563EB; border-color:#b8daff; }
[data-theme="light"] .home-tile.tile-blue:hover { background:#cce5ff; box-shadow:0 2px 8px rgba(37,99,235,0.15); }
[data-theme="light"] .home-tile.tile-green { background:#d4edda; color:#28a745; border-color:#c3e6cb; }
[data-theme="light"] .home-tile.tile-green:hover { background:#d4edda; box-shadow:0 2px 8px rgba(40,167,69,0.15); }
[data-theme="light"] .home-tile.tile-orange { background:#fff3cd; color:#e8590c; border-color:#ffeaa7; }
[data-theme="light"] .home-tile.tile-orange:hover { background:#fff3cd; box-shadow:0 2px 8px rgba(232,89,12,0.15); }
[data-theme="light"] .home-tile.tile-purple { background:#f3f0ff; color:#6F42C1; border-color:#c5b3e6; }
[data-theme="light"] .home-tile.tile-purple:hover { background:#e8dff5; box-shadow:0 2px 8px rgba(111,66,193,0.15); }
[data-theme="light"] .home-tile.tile-teal { background:#e6fcf5; color:#17a2b8; border-color:#96f2d7; }
[data-theme="light"] .home-tile.tile-teal:hover { background:#c3fae8; box-shadow:0 2px 8px rgba(23,162,184,0.15); }
[data-theme="light"] .home-tile.tile-red { background:#f8d7da; color:#dc3545; border-color:#f5c6cb; }
[data-theme="light"] .home-tile.tile-red:hover { background:#f8d7da; box-shadow:0 2px 8px rgba(220,53,69,0.15); }
[data-theme="light"] .home-tile .ht-soon { background:rgba(0,0,0,0.06); color:#ADB5BD; }
[data-theme="light"] .home-updates-banner { background:linear-gradient(135deg,#e8f0fe,#f3f0ff); border:1px solid #E9ECEF; }
[data-theme="light"] .home-updates-banner .hub-text { color:#495057; }
[data-theme="light"] .home-updates-banner .hub-text strong { color:#212529; }
[data-theme="light"] .home-latest-item { border-bottom-color:#F1F3F5; }
[data-theme="light"] .home-latest-icon { background:#F1F3F5; border-color:#E9ECEF; }
[data-theme="light"] .home-latest-text { color:#495057; }
[data-theme="light"] .home-latest-time { color:#ADB5BD; }

/* Tables */
[data-theme="light"] table th { background:#F8F9FA; color:#495057; border-bottom-color:#E9ECEF; }
[data-theme="light"] table td { color:#333333; border-bottom-color:#F1F3F5; }
[data-theme="light"] table tr:hover { background:#F1F3F5; }

/* Filters bar */
[data-theme="light"] .filters-bar { background:#fff; border:1px solid #E9ECEF; border-radius:12px; }
[data-theme="light"] .filters-bar input, [data-theme="light"] .filters-bar select { background:#F8F9FA; border-color:#E9ECEF; color:#333333; }

/* Summary bar */
[data-theme="light"] .bookings-summary-bar { background:#fff; border-color:#E9ECEF; }
[data-theme="light"] .summary-item .summary-label { color:#6C757D; }
[data-theme="light"] .summary-item .summary-value { color:#212529; }

/* Bulk bar */
[data-theme="light"] .bulk-bar { background:#212529; }

/* Form inputs globally */
[data-theme="light"] input:not([type=checkbox]):not([type=radio]), [data-theme="light"] select, [data-theme="light"] textarea { background:#F8F9FA; border-color:#E9ECEF; color:#333333; }
[data-theme="light"] input:focus, [data-theme="light"] select:focus, [data-theme="light"] textarea:focus { border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,0.15); background:#fff; }

/* Customer Profile page */
[data-theme="light"] .cp-kpi { background:#fff; border:1px solid #E9ECEF; }
[data-theme="light"] .cp-kpi:hover { border-color:#DEE2E6; box-shadow:0 4px 16px rgba(0,0,0,0.08); }
[data-theme="light"] .cp-kpi-value { color:#212529 !important; }
[data-theme="light"] .cp-kpi:nth-child(1) .cp-kpi-value { color:#17a2b8 !important; }
[data-theme="light"] .cp-kpi:nth-child(2) .cp-kpi-value { color:#28a745 !important; }
[data-theme="light"] .cp-kpi:nth-child(3) .cp-kpi-value { color:#6F42C1 !important; }
[data-theme="light"] .cp-kpi:nth-child(4) .cp-kpi-value { color:#e83e8c !important; }
[data-theme="light"] .cp-kpi-label { color:#495057; }
[data-theme="light"] .cp-kpi-sub { color:#ADB5BD; }
[data-theme="light"] .cp-back-btn { background:#fff; border-color:#E9ECEF; color:#495057; }
[data-theme="light"] .cp-back-btn:hover { background:#e8f0fe; color:#17a2b8; border-color:#b8e4f0; }
[data-theme="light"] .cp-section { background:#fff; border:1px solid #E9ECEF; }
[data-theme="light"] .cp-section-header { color:#212529; border-bottom-color:#F1F3F5; }
[data-theme="light"] .cp-section-body { color:#495057; }
[data-theme="light"] .cp-field label { color:#495057; }
[data-theme="light"] .cp-field input, [data-theme="light"] .cp-field select, [data-theme="light"] .cp-field textarea { background:#F8F9FA; border-color:#E9ECEF; color:#333333; }
[data-theme="light"] .cp-field input:focus, [data-theme="light"] .cp-field select:focus, [data-theme="light"] .cp-field textarea:focus { border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,0.15); background:#fff; }
[data-theme="light"] .cp-field-static { color:#212529; }
[data-theme="light"] .cp-check-item { background:#F8F9FA; border-color:#E9ECEF; color:#495057; }
[data-theme="light"] .cp-check-item input[type=checkbox] { accent-color:#2563EB; }
[data-theme="light"] .cp-tabs { border-bottom-color:#E9ECEF; }
[data-theme="light"] .cp-tab { color:#6C757D; }
[data-theme="light"] .cp-tab.active { color:#2563EB; border-bottom-color:#2563EB; text-shadow:none; }
[data-theme="light"] .cp-tab:hover { color:#333333; }
[data-theme="light"] .cp-table th { background:#F8F9FA; color:#495057; border-bottom-color:#E9ECEF; }
[data-theme="light"] .cp-table td { color:#495057; border-bottom-color:#F1F3F5; }
[data-theme="light"] .cp-table tr:hover { background:#F1F3F5; }
[data-theme="light"] .cp-table .cp-ref { color:#2563EB; }
[data-theme="light"] .cp-contact-card { background:#fff; border:1px solid #E9ECEF; }
[data-theme="light"] .cp-contact-card:hover { border-color:#DEE2E6; }
[data-theme="light"] .cp-contact-name { color:#212529; }
[data-theme="light"] .cp-contact-role { color:#6F42C1; }
[data-theme="light"] .cp-contact-detail { color:#6C757D; }
[data-theme="light"] .cp-addr-card { background:#fff; border:1px solid #E9ECEF; }
[data-theme="light"] .cp-addr-card::before { background:linear-gradient(90deg,#2563EB,#6F42C1); }
[data-theme="light"] .cp-addr-card:hover { border-color:#DEE2E6; }
[data-theme="light"] .cp-addr-company { color:#212529; }
[data-theme="light"] .cp-addr-line { color:#6C757D; }
[data-theme="light"] .cp-action-btn.primary { background:linear-gradient(135deg,#2563EB,#2563EB); color:#fff; }
[data-theme="light"] .cp-action-btn.secondary { background:rgba(111,66,193,0.08); color:#6F42C1; border-color:rgba(111,66,193,0.2); }
[data-theme="light"] .cp-action-btn.outline { background:#fff; color:#495057; border-color:#E9ECEF; }
[data-theme="light"] .cp-action-btn.outline:hover { background:#F8F9FA; color:#212529; }
[data-theme="light"] .cp-insights { background:#fff; border-color:rgba(111,66,193,0.15); }
[data-theme="light"] .cp-insights-title { color:#6F42C1; }
[data-theme="light"] .cp-insight-item { background:rgba(111,66,193,0.04); border-color:rgba(111,66,193,0.08); color:#495057; }
[data-theme="light"] .cp-insight-item strong { color:#212529 !important; }
[data-theme="light"] .cp-badge-booked { background:#cce5ff; color:#004085; }
[data-theme="light"] .cp-badge-delivered, [data-theme="light"] .cp-badge-completed { background:#d4edda; color:#155724; }
[data-theme="light"] .cp-badge-in-progress { background:#fff3cd; color:#856404; }
[data-theme="light"] .cp-badge-cancelled { background:#f8d7da; color:#721c24; }
[data-theme="light"] .cp-badge-invoiced { background:#e8dff5; color:#4e2d8e; }
[data-theme="light"] .cp-badge-allocated, [data-theme="light"] .cp-badge-assigned { background:#cce5ff; color:#004085; }
[data-theme="light"] .cp-badge-pod { background:#c3fae8; color:#148a9e; }

/* Customer & Address book kinetic cards */
[data-theme="light"] .cust-kinetic-wrap { background:transparent; }
[data-theme="light"] .cust-kinetic-bg { display:none; }
[data-theme="light"] .cust-k-card { background:#fff; border:1px solid #E9ECEF; }
[data-theme="light"] .cust-k-card:hover { border-color:#DEE2E6; box-shadow:0 4px 16px rgba(0,0,0,0.08); }
[data-theme="light"] .cust-k-company { color:#212529; }
[data-theme="light"] .cust-k-contact, [data-theme="light"] .cust-k-email, [data-theme="light"] .cust-k-phone { color:#6C757D; }
[data-theme="light"] .cust-k-stat { background:#F1F3F5; color:#495057; border-color:#E9ECEF; }
[data-theme="light"] .cust-k-btn { background:#F8F9FA; color:#495057; border-color:#E9ECEF; }
[data-theme="light"] .cust-k-btn.primary { background:#2563EB; color:#fff; border-color:#2563EB; }
[data-theme="light"] .cust-k-btn.danger { background:#f8d7da; color:#dc3545; border-color:#f5c6cb; }
[data-theme="light"] .cust-k-footer { border-top-color:#F1F3F5; }
[data-theme="light"] .addr-kinetic-wrap { background:transparent; }
[data-theme="light"] .addr-kinetic-bg { display:none; }
[data-theme="light"] .addr-k-card { background:#fff; border:1px solid #E9ECEF; }
[data-theme="light"] .addr-k-card:hover { border-color:#DEE2E6; }

/* View toggle buttons */
[data-theme="light"] .cust-view-btn, [data-theme="light"] .addr-view-btn, [data-theme="light"] .bk-view-btn { background:#F1F3F5; color:#495057; border-color:#E9ECEF; }
[data-theme="light"] .cust-view-btn.active, [data-theme="light"] .addr-view-btn.active, [data-theme="light"] .bk-view-btn.active { background:#2563EB; color:#fff; border-color:#2563EB; }

/* Bookings kinetic cards */
[data-theme="light"] .bk-kinetic-wrap { background:transparent; }
[data-theme="light"] .bk-kinetic-bg { display:none; }
[data-theme="light"] .bk-kinetic-card {
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
  border: 1px solid #dbe4ef;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -12px rgba(37,99,235,0.18);
}
[data-theme="light"] .bk-kinetic-card:hover {
  border-color: #2563EB;
  box-shadow: 0 0 0 1px rgba(37,99,235,0.15), 0 12px 32px -10px rgba(37,99,235,0.35), 0 0 24px rgba(37,99,235,0.12);
  transform: translateY(-2px);
}
[data-theme="light"] .bk-kinetic-card-ref { color: #2563EB; text-shadow: 0 0 12px rgba(37,99,235,0.15); }
[data-theme="light"] .bk-kinetic-card-customer { color: #0f172a; }
[data-theme="light"] .bk-kinetic-card-route { background: #eef3fb; border: 1px solid #e1eaf5; }
[data-theme="light"] .bk-kinetic-card-route-dot.origin { background: #2563EB; box-shadow: 0 0 8px rgba(37,99,235,0.45); }
[data-theme="light"] .bk-kinetic-card-route-dot.dest { background: #7c3aed; box-shadow: 0 0 8px rgba(124,58,237,0.45); }
[data-theme="light"] .bk-kinetic-card-route-arrow { color: #94a3b8; }
[data-theme="light"] .bk-kinetic-card-route-text { color: #475569; }
[data-theme="light"] .bk-kinetic-card-label { color: #64748b; }
[data-theme="light"] .bk-kinetic-card-val { color: #1e293b; }
[data-theme="light"] .bk-kinetic-card-footer { border-top-color: #e2e8f0; }
[data-theme="light"] .bk-kinetic-card-profit.positive { color: #059669; }
[data-theme="light"] .bk-kinetic-card-profit.negative { color: #dc2626; }
[data-theme="light"] .bk-kinetic-card-status.pending { background: #fef3c7; color: #b45309; }
[data-theme="light"] .bk-kinetic-card-status.assigned { background: #dbeafe; color: #1d4ed8; }
[data-theme="light"] .bk-kinetic-card-status.collected { background: #ede9fe; color: #6d28d9; }
[data-theme="light"] .bk-kinetic-card-status.in-transit { background: #cffafe; color: #0e7490; }
[data-theme="light"] .bk-kinetic-card-status.delivered { background: #d1fae5; color: #047857; }
[data-theme="light"] .bk-kinetic-card-status.invoiced { background: #e2e8f0; color: #475569; }
[data-theme="light"] .bk-kinetic-card-status.cancelled { background: #fee2e2; color: #b91c1c; }
[data-theme="light"] .bk-kinetic-driver-dot { background: #059669; box-shadow: 0 0 6px rgba(5,150,105,0.4); }
[data-theme="light"] .bk-kinetic-driver-name { color: #475569; }
[data-theme="light"] .bk-kinetic-empty { color: #94a3b8; }

/* Performance page */
[data-theme="light"] .perf-kpi { background:#fff; border:1px solid #E9ECEF; }
[data-theme="light"] .perf-kpi:hover { border-color:#DEE2E6; }
[data-theme="light"] .perf-kpi-label { color:#495057; }
[data-theme="light"] .perf-section { background:#fff; border:1px solid #E9ECEF; }
[data-theme="light"] .perf-section-title { color:#212529; }

/* Modals */
[data-theme="light"] .modal-content { background:#fff; color:#333333; border:1px solid #E9ECEF; }

/* Pagination */
[data-theme="light"] .pagination button { background:#F1F3F5; color:#495057; }
[data-theme="light"] .pagination button.active { background:#2563EB; color:#fff; }
[data-theme="light"] .pagination button:hover:not(.active):not(:disabled) { background:#E9ECEF; }

/* Badges */
[data-theme="light"] .badge { border:none; }

/* Buttons */
[data-theme="light"] .btn-outline { background:#fff; color:#495057; border-color:#E9ECEF; }
[data-theme="light"] .btn-outline:hover { background:#F8F9FA; color:#212529; }

/* Empty states */
[data-theme="light"] .empty-state { color:#ADB5BD; }

/* ========== SIDEBAR — Light mode ========== */
[data-theme="light"] .sidebar { background:#fff !important; border-right:1px solid #E9ECEF !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
[data-theme="light"] .sidebar::before { display:none; }
[data-theme="light"] .sidebar-logo { border-bottom-color:#E9ECEF; }
[data-theme="light"] .sidebar-logo-text { color:#212529; }
[data-theme="light"] .sidebar-logo-text span { color:#2563EB; text-shadow:none; }
[data-theme="light"] .sidebar-section-label { color:#2563EB; opacity:0.7; }
[data-theme="light"] .nav-item { color:#495057; }
[data-theme="light"] .nav-item:hover { background:#F8F9FA; color:#2563EB; }
[data-theme="light"] .nav-item.active { background:rgba(37,99,235,0.06); color:#2563EB; border-right:3px solid #2563EB; }
[data-theme="light"] .nav-item.active::before { background:#2563EB; box-shadow:none; }
[data-theme="light"] .nav-item .nav-icon { opacity:0.5; }
[data-theme="light"] .nav-item.active .nav-icon, [data-theme="light"] .nav-item:hover .nav-icon { opacity:1; }
[data-theme="light"] .nav-item .nav-badge { background:#dc3545; }
[data-theme="light"] .sidebar-search input { background:#F8F9FA; border-color:#E9ECEF; color:#333; }
[data-theme="light"] .sidebar-search input::placeholder { color:#ADB5BD; }
[data-theme="light"] .sidebar-search input:focus { border-color:#2563EB; background:#fff; box-shadow:0 0 0 3px rgba(37,99,235,0.1); }
[data-theme="light"] .sidebar-new-booking-btn { background:#2563EB; box-shadow:0 2px 8px rgba(37,99,235,0.25); }
[data-theme="light"] .sidebar-new-booking-btn:hover { background:#1d4ed8; box-shadow:0 4px 16px rgba(37,99,235,0.35); }
[data-theme="light"] .sidebar-footer { border-top-color:#E9ECEF; }
[data-theme="light"] .sidebar-footer-controls { border-top-color:#E9ECEF; }
[data-theme="light"] .sidebar-footer-controls #sync-indicator { background:rgba(37,99,235,0.06); color:#2563EB; border-color:rgba(37,99,235,0.15); }
[data-theme="light"] .sidebar-icon-btn { color:#6C757D; }
[data-theme="light"] .sidebar-icon-btn:hover { background:#F8F9FA; color:#2563EB; }
[data-theme="light"] .sidebar-user { }
[data-theme="light"] .sidebar-user:hover { background:#F8F9FA; }
[data-theme="light"] .sidebar-user-avatar { background:linear-gradient(135deg,#2563EB,#3B82F6); box-shadow:none; }
[data-theme="light"] .sidebar-user-name { color:#212529; }
[data-theme="light"] .sidebar-user-role { color:#6C757D; }
[data-theme="light"] .sidebar-nav::-webkit-scrollbar-thumb { background:rgba(37,99,235,0.2); }

/* ========== PAGE HEADERS — Light mode ========== */
[data-theme="light"] .kinetic-page-header { background:linear-gradient(135deg,#1e293b 0%,#334155 100%); }
[data-theme="light"] .kinetic-page-header::before { background:radial-gradient(circle,rgba(37,99,235,0.12) 0%,transparent 70%); }
[data-theme="light"] .kinetic-page-header .kph-title { color:#fff; }
[data-theme="light"] .kinetic-page-header .kph-title span { color:#93C5FD; text-shadow:none; }
[data-theme="light"] .kinetic-page-header .kph-subtitle { color:rgba(255,255,255,0.6); }
[data-theme="light"] .kinetic-page-header .kph-btn-primary { background:linear-gradient(135deg,#3B82F6,#2563EB); color:#fff; }
[data-theme="light"] .kinetic-page-header .kph-btn-secondary { background:rgba(255,255,255,0.1); color:#fff; border-color:rgba(255,255,255,0.2); }
[data-theme="light"] .kinetic-page-header .kph-btn-secondary:hover { background:rgba(255,255,255,0.2); border-color:rgba(255,255,255,0.3); }
[data-theme="light"] .kph-stat { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.1); }
[data-theme="light"] .kph-stat-val { color:#93C5FD; }
[data-theme="light"] .kph-stat-label { color:rgba(255,255,255,0.7); }
[data-theme="light"] .home-hero { background:linear-gradient(135deg,#1e293b 0%,#334155 100%); }
[data-theme="light"] .home-hero::before { background:radial-gradient(circle,rgba(37,99,235,0.15) 0%,transparent 70%); }
[data-theme="light"] .home-hero::after { background:radial-gradient(circle,rgba(111,66,193,0.1) 0%,transparent 70%); }

/* ========== DASHBOARD — Light mode ========== */
[data-theme="light"] .kd-wrap { background:#F8F9FB; }
[data-theme="light"] .kd-title { color:#212529; }
[data-theme="light"] .kd-title span { color:#2563EB; text-shadow:none; }
[data-theme="light"] .kd-subtitle { color:#6C757D; }
[data-theme="light"] .kd-live-pill { background:#F8F9FA; border-color:#E9ECEF; }
[data-theme="light"] .kd-live-dot { background:#28a745; box-shadow:0 0 6px rgba(40,167,69,0.4); }
[data-theme="light"] .kd-live-text { color:#495057; }
[data-theme="light"] .kd-kpi-card { background:#fff; border:1px solid #E9ECEF; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
[data-theme="light"] .kd-kpi-card:hover { border-color:#DEE2E6; box-shadow:0 4px 12px rgba(0,0,0,0.08); }
[data-theme="light"] .kd-kpi-card .kd-kpi-glow { display:none; }
[data-theme="light"] .kd-kpi-label { color:#6C757D; }
[data-theme="light"] .kd-kpi-value { color:#212529; }
[data-theme="light"] .kd-kpi-unit { color:#6C757D; }
[data-theme="light"] .kd-kpi-trend { color:#28a745; }
[data-theme="light"] .kd-kpi-card:nth-child(1) .kd-kpi-value { color:#2563EB; }
[data-theme="light"] .kd-kpi-card:nth-child(2) .kd-kpi-value { color:#28a745; }
[data-theme="light"] .kd-kpi-card:nth-child(3) .kd-kpi-value { color:#6F42C1; }
[data-theme="light"] .kd-bento { }
[data-theme="light"] .kd-map-panel { background:#fff; border:1px solid #E9ECEF; border-radius:16px; }
[data-theme="light"] .kd-map-header { color:#212529; border-bottom-color:#E9ECEF; }
[data-theme="light"] .kd-map-header h3 { color:#212529; }
[data-theme="light"] .kd-map-glass { background:rgba(255,255,255,0.9); border-color:#E9ECEF; color:#333; }
[data-theme="light"] .kd-fleet-panel { background:#fff; border:1px solid #E9ECEF; border-radius:16px; }
[data-theme="light"] .kd-fleet-panel h3 { color:#212529; }
[data-theme="light"] .kd-fleet-name { color:#333; }
[data-theme="light"] .kd-fleet-count { color:#6C757D; }
[data-theme="light"] .kd-fleet-pct { color:#2563EB; }
[data-theme="light"] .kd-fleet-bar { background:#E9ECEF; }
[data-theme="light"] .kd-fleet-bar-fill { background:linear-gradient(90deg,#2563EB,#3B82F6); }
[data-theme="light"] .kd-fleet-bar-fill.low { background:linear-gradient(90deg,#e8590c,#fd7e14); }
[data-theme="light"] .kd-fleet-status { background:#F8F9FA; border-color:#E9ECEF; color:#495057; }
[data-theme="light"] .kd-table-wrap { background:#fff; border:1px solid #E9ECEF; border-radius:16px; }
[data-theme="light"] .kd-table-header { border-bottom-color:#E9ECEF; }
[data-theme="light"] .kd-table-header h3 { color:#212529; }
[data-theme="light"] .kd-table thead th { background:#F8F9FA; color:#495057; border-bottom-color:#E9ECEF; }
[data-theme="light"] .kd-table tbody tr { border-bottom-color:#F1F3F5; }
[data-theme="light"] .kd-table tbody tr:hover { background:#F8F9FA; }
[data-theme="light"] .kd-table tbody td { color:#333; }
[data-theme="light"] .kd-table .kd-ref { color:#2563EB; }
[data-theme="light"] .kd-table .kd-status { border:none; }
[data-theme="light"] .kd-actions { }
[data-theme="light"] .kd-action-btn { background:#fff; border:1px solid #E9ECEF; }
[data-theme="light"] .kd-action-btn:hover { border-color:#DEE2E6; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
[data-theme="light"] .kd-action-icon { background:rgba(37,99,235,0.08); color:#2563EB; }
[data-theme="light"] .kd-action-label { color:#212529; }
[data-theme="light"] .kd-action-sub { color:#6C757D; }

/* ── Performance Page Light Mode ── */
[data-theme="light"] .perf-wrap { background:#F8F9FB; color:#212529; }
[data-theme="light"] .perf-filter-bar { background:rgba(255,255,255,0.95); backdrop-filter:blur(12px); border-bottom:1px solid #E9ECEF; }
[data-theme="light"] .perf-pill { border:1px solid #E9ECEF; color:#495057; background:#fff; }
[data-theme="light"] .perf-pill:hover { border-color:#2563EB; color:#2563EB; }
[data-theme="light"] .perf-pill.active { background:#2563EB; color:#fff; border-color:#2563EB; box-shadow:0 2px 8px rgba(37,99,235,0.25); }
[data-theme="light"] .perf-divider { background:#E9ECEF; }
[data-theme="light"] .perf-dd-pill { border:1px solid #E9ECEF; background:#fff; color:#495057; }
[data-theme="light"] .perf-dd-pill:focus { border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,0.12); }
[data-theme="light"] .perf-export-btn { background:#2563EB; color:#fff; }
[data-theme="light"] .perf-export-btn:hover { box-shadow:0 4px 12px rgba(37,99,235,0.3); }
[data-theme="light"] .perf-title { color:#212529; }
[data-theme="light"] .perf-subtitle { color:#6C757D; }
[data-theme="light"] .perf-kpi-card { background:#fff; border:1px solid #E9ECEF; box-shadow:0 1px 3px rgba(0,0,0,0.06); backdrop-filter:none; }
[data-theme="light"] .perf-kpi-card:hover { border-color:#DEE2E6; box-shadow:0 2px 8px rgba(0,0,0,0.08); }
[data-theme="light"] .perf-kpi-icon.cyan { background:rgba(37,99,235,0.08); color:#2563EB; }
[data-theme="light"] .perf-kpi-icon.purple { background:rgba(111,66,193,0.08); color:#6F42C1; }
[data-theme="light"] .perf-kpi-icon.pink { background:rgba(232,89,12,0.08); color:#e8590c; }
[data-theme="light"] .perf-kpi-icon.teal { background:rgba(23,162,184,0.08); color:#17a2b8; }
[data-theme="light"] .perf-kpi-label { color:#6C757D; }
[data-theme="light"] .perf-kpi-value { color:#212529; }
[data-theme="light"] .perf-kpi-bar { background:#E9ECEF; }
[data-theme="light"] .perf-kpi-bar-fill.cyan { background:#2563EB; box-shadow:none; }
[data-theme="light"] .perf-kpi-bar-fill.purple { background:#6F42C1; box-shadow:none; }
[data-theme="light"] .perf-kpi-bar-fill.pink { background:#e8590c; box-shadow:none; }
[data-theme="light"] .perf-kpi-bar-fill.teal { background:#17a2b8; box-shadow:none; }
[data-theme="light"] .perf-kpi-trend.up { background:rgba(40,167,69,0.1); color:#28a745; }
[data-theme="light"] .perf-kpi-trend.down { background:rgba(220,53,69,0.1); color:#dc3545; }
[data-theme="light"] .perf-kpi-trend.neutral { background:rgba(108,117,125,0.1); color:#6C757D; }
[data-theme="light"] .perf-glass { background:#fff; border:1px solid #E9ECEF; box-shadow:0 1px 3px rgba(0,0,0,0.06); backdrop-filter:none; }
[data-theme="light"] .perf-glass-title { color:#212529; }
[data-theme="light"] .perf-glass-sub { color:#6C757D; }
[data-theme="light"] .perf-legend span { color:#6C757D; }
[data-theme="light"] .perf-bar.primary { background:#2563EB; box-shadow:none; }
[data-theme="light"] .perf-bar.secondary { background:#6F42C1; box-shadow:none; }
[data-theme="light"] .perf-bar-label { color:#6C757D; }
[data-theme="light"] .perf-donut-center .val { color:#212529; }
[data-theme="light"] .perf-donut-center .lbl { color:#6C757D; }
[data-theme="light"] .perf-donut-item { border-bottom:1px solid #F1F3F5; }
[data-theme="light"] .perf-donut-item .name { color:#212529; }
[data-theme="light"] .perf-donut-item .pct { color:#212529; }
[data-theme="light"] .perf-matrix-title { color:#212529; }
[data-theme="light"] .perf-matrix-link { color:#2563EB; }
[data-theme="light"] .perf-table thead th { color:#6C757D; border-bottom:1px solid #E9ECEF; }
[data-theme="light"] .perf-table tbody td { color:#333; border-bottom:1px solid #F1F3F5; }
[data-theme="light"] .perf-table tbody tr:hover { background:#F8F9FA; }
[data-theme="light"] .perf-driver-name { color:#212529; }
[data-theme="light"] .perf-driver-vehicle { color:#6C757D; }
[data-theme="light"] .perf-stars .empty { color:#DEE2E6; }
[data-theme="light"] .perf-ontime-bar { background:#E9ECEF; }
[data-theme="light"] .perf-status-badge.active { background:rgba(40,167,69,0.1); color:#28a745; }
[data-theme="light"] .perf-status-badge.moderate { background:rgba(232,89,12,0.1); color:#e8590c; }
[data-theme="light"] .perf-status-badge.low { background:rgba(220,53,69,0.1); color:#dc3545; }

[data-theme="dark"] .card {
  background: #10131a;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: none;
}

[data-theme="dark"] .card:hover {
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

[data-theme="dark"] .card-header {
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: transparent;
}

[data-theme="dark"] .card-header h2 {
  color: #e2e8f0;
}

[data-theme="dark"] .card-body {
  color: #94a3b8;
}

[data-theme="dark"] table {
  color: #94a3b8;
}

[data-theme="dark"] thead th {
  background: transparent;
  color: #64748b;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

[data-theme="dark"] tbody td {
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: #cbd5e1;
}

[data-theme="dark"] tbody tr:hover {
  background: rgba(255,255,255,0.03);
}

[data-theme="dark"] .bookings-main-table tbody tr:hover {
  background: rgba(255,255,255,0.04);
}

[data-theme="dark"] .stat-card {
  background: #10131a;
  border: 1px solid rgba(255,255,255,0.05);
  border-bottom: 2px solid transparent;
  box-shadow: none;
}

[data-theme="dark"] .stat-card:hover {
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

[data-theme="dark"] .stat-card.blue { border-bottom-color: rgba(143,245,255,0.2); }
[data-theme="dark"] .stat-card.blue:hover { border-bottom-color: rgba(143,245,255,0.5); }
[data-theme="dark"] .stat-card.blue::before { background: rgba(143,245,255,0.03); }
[data-theme="dark"] .stat-card.blue:hover::before { background: rgba(143,245,255,0.08); }
[data-theme="dark"] .stat-card.blue .stat-value { color: #8ff5ff; }
[data-theme="dark"] .stat-card.green { border-bottom-color: rgba(0,212,170,0.2); }
[data-theme="dark"] .stat-card.green:hover { border-bottom-color: rgba(0,212,170,0.5); }
[data-theme="dark"] .stat-card.green::before { background: rgba(0,212,170,0.03); }
[data-theme="dark"] .stat-card.green:hover::before { background: rgba(0,212,170,0.08); }
[data-theme="dark"] .stat-card.green .stat-value { color: #00d4aa; }
[data-theme="dark"] .stat-card.orange { border-bottom-color: rgba(255,93,215,0.2); }
[data-theme="dark"] .stat-card.orange:hover { border-bottom-color: rgba(255,93,215,0.5); }
[data-theme="dark"] .stat-card.orange::before { background: rgba(255,93,215,0.03); }
[data-theme="dark"] .stat-card.orange:hover::before { background: rgba(255,93,215,0.08); }
[data-theme="dark"] .stat-card.orange .stat-value { color: #ff5dd7; }
[data-theme="dark"] .stat-card.purple { border-bottom-color: rgba(172,137,255,0.2); }
[data-theme="dark"] .stat-card.purple:hover { border-bottom-color: rgba(172,137,255,0.5); }
[data-theme="dark"] .stat-card.purple::before { background: rgba(172,137,255,0.03); }
[data-theme="dark"] .stat-card.purple:hover::before { background: rgba(172,137,255,0.08); }
[data-theme="dark"] .stat-card.purple .stat-value { color: #ac89ff; }

[data-theme="dark"] .stat-card .stat-label {
  color: #a9abb3;
}

[data-theme="dark"] .stat-card .stat-value {
  color: #ecedf6;
}

[data-theme="dark"] .stat-card .stat-sub {
  color: #64748b;
}

[data-theme="dark"] .badge-pending {
  background: rgba(245,158,11,0.1);
  color: #fbbf24;
}

[data-theme="dark"] .badge-assigned {
  background: rgba(59,130,246,0.1);
  color: #60a5fa;
}

[data-theme="dark"] .badge-collected {
  background: rgba(168,85,247,0.1);
  color: #d8b4fe;
}

[data-theme="dark"] .badge-in-transit {
  background: rgba(34,211,238,0.1);
  color: #67e8f9;
}

[data-theme="dark"] .badge-delivered {
  background: rgba(0,212,170,0.1);
  color: #00d4aa;
}

[data-theme="dark"] .badge-invoiced {
  background: rgba(255,255,255,0.05);
  color: #64748b;
}

[data-theme="dark"] .badge-cancelled {
  background: rgba(239,68,68,0.1);
  color: #f87171;
}

[data-theme="dark"] .badge-draft {
  background: rgba(245,158,11,0.1);
  color: #fbbf24;
}

[data-theme="dark"] .badge-sent {
  background: rgba(14,165,233,0.1);
  color: #38bdf8;
}

[data-theme="dark"] .badge-paid {
  background: rgba(0,212,170,0.1);
  color: #00d4aa;
}

[data-theme="dark"] .tag-none {
  background: #1e293b;
  color: #94a3b8;
}

[data-theme="dark"] .tag-action {
  background: rgba(245,158,11,0.15);
  color: #fbbf24;
}

[data-theme="dark"] .tag-urgent {
  background: rgba(239,68,68,0.15);
  color: #f87171;
}

[data-theme="dark"] .btn-primary {
  background: #2563eb;
  box-shadow: 0 0 16px rgba(37,99,235,0.3);
}

[data-theme="dark"] .btn-primary:hover {
  background: #3b82f6;
  box-shadow: 0 0 24px rgba(37,99,235,0.5);
}

[data-theme="dark"] .btn-success {
  background: #059669;
  box-shadow: 0 0 12px rgba(0,212,170,0.2);
}

[data-theme="dark"] .btn-success:hover {
  background: #00d4aa;
  box-shadow: 0 0 20px rgba(0,212,170,0.4);
}

[data-theme="dark"] .btn-danger {
  background: #ef4444;
}

[data-theme="dark"] .btn-danger:hover {
  background: #dc2626;
}

[data-theme="dark"] .btn-outline {
  background: rgba(255,255,255,0.04);
  color: #94a3b8;
  border: 1px solid rgba(255,255,255,0.08);
}

[data-theme="dark"] .btn-outline:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
  color: #e2e8f0;
}

[data-theme="dark"] .btn-icon {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #94a3b8;
}

[data-theme="dark"] .btn-icon:hover {
  background: rgba(255,255,255,0.08);
  color: #e2e8f0;
  border-color: rgba(255,255,255,0.12);
}

[data-theme="dark"] .form-group label {
  color: #cbd5e1;
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #e2e8f0;
}

[data-theme="dark"] .form-group input::placeholder,
[data-theme="dark"] .form-group textarea::placeholder {
  color: #475569;
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group select:focus,
[data-theme="dark"] .form-group textarea:focus {
  border-color: #00d4aa;
  box-shadow: 0 0 0 3px rgba(0,212,170,0.1);
}

[data-theme="dark"] .form-section {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

[data-theme="dark"] .form-section h3 {
  color: #e2e8f0;
}

[data-theme="dark"] .form-section h3::before {
  background: #00d4aa;
}

[data-theme="dark"] .modal-overlay {
  background: rgba(0,0,0,0.7);
}

[data-theme="dark"] .modal {
  background: #10131a;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 24px 48px rgba(0,0,0,0.5);
}

[data-theme="dark"] .modal-header {
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: transparent;
}

[data-theme="dark"] .modal-header h2 {
  color: #e2e8f0;
}

[data-theme="dark"] .modal-close {
  color: #64748b;
  background: rgba(255,255,255,0.04);
}

[data-theme="dark"] .modal-close:hover {
  background: rgba(255,255,255,0.08);
  color: #e2e8f0;
}

[data-theme="dark"] .modal-body {
  color: #94a3b8;
}

[data-theme="dark"] #email-invoice-modal input,
[data-theme="dark"] #email-invoice-modal textarea { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #e2e8f0; }
[data-theme="dark"] #email-invoice-modal .inv-doc { background: linear-gradient(180deg, #161a21 0%, #0b0e14 100%); }
[data-theme="dark"] .modal-footer {
  border-top: 1px solid rgba(255,255,255,0.05);
}

[data-theme="dark"] .filters-bar input,
[data-theme="dark"] .filters-bar select {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #e2e8f0;
}

[data-theme="dark"] .filters-bar input::placeholder {
  color: #475569;
}

/* Dark mode filter panel adjustments */
[data-theme="dark"] .booking-filter-panel {
  background: #161a21;
  border-color: rgba(255,255,255,0.06);
  box-shadow: none;
}
[data-theme="dark"] .filter-row { border-bottom-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .filter-row input[type="text"],
[data-theme="dark"] .filter-row input[type="date"],
[data-theme="dark"] .filter-row select {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: #e2e8f0;
}
[data-theme="dark"] .filter-row input[type="text"]::placeholder { color: #475569; }
[data-theme="dark"] .filter-row select option { background: #161a21; color: #e2e8f0; }
[data-theme="dark"] .filter-group .fpill { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); color: #8b95a5; }
[data-theme="dark"] .filter-group .fpill:hover { background: rgba(255,255,255,0.08); color: #e2e8f0; }
[data-theme="dark"] .date-filter button { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); color: #8b95a5; }
[data-theme="dark"] .date-filter button:hover { background: rgba(255,255,255,0.08); color: #e2e8f0; }
[data-theme="dark"] .filter-row .filter-label { color: #64748b; }
[data-theme="dark"] .filter-actions-row .btn-outline { background: rgba(255,255,255,0.04) !important; color: #8b95a5 !important; border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .filter-actions-row .btn-outline:hover { background: rgba(255,255,255,0.08) !important; color: #e2e8f0 !important; }
[data-theme="dark"] .booking-filter-panel .autocomplete-dropdown { background: #161a21; border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .booking-filter-panel .autocomplete-dropdown .ac-item { color: #e2e8f0; border-bottom-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .booking-filter-panel .autocomplete-dropdown .ac-item .ac-sub { color: #475569; }

[data-theme="dark"] .filter-row .filter-label {
  color: #8b95a5;
}

[data-theme="dark"] .add-ref-btn {
  background: #3b82f6;
  box-shadow: 0 0 8px rgba(59,130,246,0.3);
}

[data-theme="dark"] .add-ref-btn:hover {
  background: #2563eb;
  box-shadow: 0 0 12px rgba(59,130,246,0.4);
}

[data-theme="dark"] .page-tabs button {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: #8b95a5;
}

[data-theme="dark"] .page-tabs button:hover {
  background: rgba(255,255,255,0.08);
  color: #e2e8f0;
}

[data-theme="dark"] .page-tabs button.active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  box-shadow: 0 0 16px rgba(37,99,235,0.3);
}

[data-theme="dark"] .empty-state {
  color: #64748b;
}

[data-theme="dark"] .quick-action-btn {
  background: #161a21;
  border: 1px solid rgba(255,255,255,0.05);
  border-top: 2px solid #2563eb;
  transition: all 0.2s;
}

[data-theme="dark"] .quick-action-btn:hover {
  border-color: rgba(255,255,255,0.08);
  border-top-color: #3b82f6;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}

[data-theme="dark"] .quick-action-btn .qa-label {
  color: #94a3b8;
}

[data-theme="dark"] .home-hero {
  background: linear-gradient(135deg, #0b0e14 0%, #161a21 50%, #0b0e14 100%);
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: none;
}

[data-theme="dark"] .home-hero h1 {
  color: #f1f5f9;
}

[data-theme="dark"] .home-hero p {
  color: #64748b;
}

[data-theme="dark"] .home-hero-stat .hhs-val {
  color: #00d4aa;
}

[data-theme="dark"] .home-hero-stat .hhs-label {
  color: #64748b;
}

/* Home page styles are already KINETIC dark-themed — no dark overrides needed */

[data-theme="dark"] .timeline-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.04);
}

[data-theme="dark"] .timeline-icon {
  color: #00d4aa;
}

[data-theme="dark"] .timeline-content {
  color: #94a3b8;
}

[data-theme="dark"] .timeline-time {
  color: #475569;
}

[data-theme="dark"] .timeline-message {
  color: #94a3b8;
}

[data-theme="dark"] .timeline-email {
  color: #475569;
}

[data-theme="dark"] .kpi-header h2 {
  color: #e2e8f0;
}

[data-theme="dark"] .kpi-filter-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: #8b95a5;
}

[data-theme="dark"] .kpi-filter-btn:hover {
  border-color: rgba(255,255,255,0.12);
  color: #e2e8f0;
}

[data-theme="dark"] .kpi-filter-btn.active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  box-shadow: 0 0 16px rgba(37,99,235,0.3);
}

[data-theme="dark"] .kpi-range-sep {
  color: #1e293b;
}

[data-theme="dark"] .kpi-card {
  background: #161a21;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: none;
}

[data-theme="dark"] .kpi-card::before {
  box-shadow: none;
}

[data-theme="dark"] .kpi-card .kc-label {
  color: #64748b;
}

[data-theme="dark"] .kpi-card .kc-value {
  color: #e2e8f0;
}

[data-theme="dark"] .kpi-card .kc-sub {
  color: #475569;
}

[data-theme="dark"] .kpi-chart-card {
  background: #161a21;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: none;
}

[data-theme="dark"] .kpi-chart-card h3 {
  color: #e2e8f0;
}

[data-theme="dark"] .kpi-table {
  color: #94a3b8;
}

[data-theme="dark"] .kpi-table th {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #64748b;
}

[data-theme="dark"] .kpi-table td {
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

[data-theme="dark"] .kpi-table tr:hover {
  background: rgba(255,255,255,0.03);
}


[data-theme="dark"] .radio-item label {
  color: #cbd5e1;
}

[data-theme="dark"] .autocomplete-dropdown {
  background: #161a21;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

[data-theme="dark"] .autocomplete-dropdown .ac-item {
  color: #cbd5e1;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

[data-theme="dark"] .autocomplete-dropdown .ac-item:hover,
[data-theme="dark"] .autocomplete-dropdown .ac-item.ac-active {
  background: #2563eb;
  color: #fff;
}

[data-theme="dark"] .autocomplete-dropdown .ac-item .ac-sub {
  color: #475569;
}

[data-theme="dark"] .autocomplete-dropdown .ac-item:hover .ac-sub,
[data-theme="dark"] .autocomplete-dropdown .ac-item.ac-active .ac-sub {
  color: rgba(255,255,255,0.6);
}

[data-theme="dark"] .autocomplete-dropdown .ac-empty {
  color: #475569;
}

[data-theme="dark"] .toast {
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

[data-theme="dark"] .toast-success {
  background: #059669;
  box-shadow: 0 4px 20px rgba(0,212,170,0.2);
}

[data-theme="dark"] .toast-error {
  background: #ef4444;
  box-shadow: 0 4px 20px rgba(239,68,68,0.2);
}

/* Theme toggle button */
.theme-toggle {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--gray-300);
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.theme-toggle:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}

[data-theme="dark"] .theme-toggle {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #8b95a5;
}

[data-theme="dark"] .theme-toggle:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
  color: #00d4aa;
}

/* Dark mode: Tariff forms */
[data-theme="dark"] .tariff-form { background: #161a21; border: 1px solid rgba(255,255,255,0.05); }
[data-theme="dark"] .tariff-form-section { border-bottom-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .tariff-form-section h3 { color: #e2e8f0; }
[data-theme="dark"] .tariff-form-section h3::before { background: #00d4aa; }
[data-theme="dark"] .tariff-form-group label { color: #64748b; }
[data-theme="dark"] .tariff-form-group input, [data-theme="dark"] .tariff-form-group select { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #e2e8f0; }
[data-theme="dark"] .tariff-form-group input:focus, [data-theme="dark"] .tariff-form-group select:focus { border-color: #00d4aa; box-shadow: 0 0 0 3px rgba(0,212,170,0.1); }
[data-theme="dark"] .tariff-zone-item label { color: #64748b; }
[data-theme="dark"] .tariff-zone-item input { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #e2e8f0; }
[data-theme="dark"] .tariff-ooh-day { background: rgba(255,255,255,0.02); }
[data-theme="dark"] .tariff-ooh-day label { color: #94a3b8; }
[data-theme="dark"] .tariff-ooh-day input { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #e2e8f0; }
[data-theme="dark"] .tariff-pay-band { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .tariff-pay-band-toggle label { color: #94a3b8; }
[data-theme="dark"] .tariff-checkbox-item label { color: #94a3b8; }
[data-theme="dark"] .tariff-inline-field label { color: #64748b; }
[data-theme="dark"] .tariff-inline-field .unit-label { color: #475569; }
[data-theme="dark"] .tariff-inline-field input, [data-theme="dark"] .tariff-inline-field select { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #e2e8f0; }
[data-theme="dark"] .tariff-inline-field input:focus, [data-theme="dark"] .tariff-inline-field select:focus { border-color: #00d4aa; box-shadow: 0 0 0 3px rgba(0,212,170,0.1); }
[data-theme="dark"] .tariff-inline-separator { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .tariff-ooh-table th { color: #64748b; border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .tariff-ooh-table td { color: #94a3b8; border-bottom-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .tariff-ooh-table input { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #e2e8f0; }
[data-theme="dark"] .tariff-zone-item { border-bottom-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .tariff-edit-header h1 { color: #e2e8f0; }
[data-theme="dark"] .tariff-view-header h1 { color: #e2e8f0; }
[data-theme="dark"] .tariff-card { background: #161a21; border-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .tariff-card h3 { color: #64748b; }
[data-theme="dark"] .tariff-card .card-label { color: #475569; }
[data-theme="dark"] .tariff-card .card-value { color: #e2e8f0; }
[data-theme="dark"] .tariff-card .card-item { border-bottom-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .tariff-history-card { background: #161a21; }
[data-theme="dark"] .tariff-chart-container { background: #0b0e14; }
[data-theme="dark"] .tariffs-list tbody td { border-bottom-color: rgba(255,255,255,0.04); color: #94a3b8; }
[data-theme="dark"] .tariffs-list tbody tr:hover { background: rgba(255,255,255,0.03); }

/* Dark mode: Driver signup */
[data-theme="dark"] .driver-signup-page h1 { color: #e2e8f0; }
[data-theme="dark"] .driver-signup-page .signup-subtitle { color: #475569; }
[data-theme="dark"] .signup-section { background: #161a21; border-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .signup-field label { color: #64748b; }
[data-theme="dark"] .signup-field input, [data-theme="dark"] .signup-field select, [data-theme="dark"] .signup-field textarea { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #e2e8f0; }
[data-theme="dark"] .signup-field input:focus, [data-theme="dark"] .signup-field select:focus, [data-theme="dark"] .signup-field textarea:focus { border-color: #00d4aa; box-shadow: 0 0 0 3px rgba(0,212,170,0.1); }
[data-theme="dark"] .signup-checkbox label { color: #94a3b8; }

/* Booking edit - light mode */
[data-theme="light"] .bke-header { background:linear-gradient(135deg,#1e293b 0%,#334155 100%); }
[data-theme="light"] .bke-header::before { background:radial-gradient(circle,rgba(37,99,235,0.12) 0%,transparent 70%); }
[data-theme="light"] .bke-header h1 { color:#fff; }
[data-theme="light"] .bke-header-subtitle { color:#93C5FD; }
[data-theme="light"] .bke-header .btn-outline { background:rgba(255,255,255,0.1); color:#fff; border-color:rgba(255,255,255,0.2); }
[data-theme="light"] .bke-header .btn-outline:hover { background:rgba(255,255,255,0.2); }
[data-theme="light"] .bke-summary-map { background:#E9ECEF; border-color:#DEE2E6; }
[data-theme="light"] .bke-summary-map .map-label span { color:#2563EB; background:rgba(255,255,255,0.9); }
[data-theme="light"] .bke-summary-map .map-label svg { stroke:#2563EB; }
[data-theme="light"] .bke-tabs { background:#fff; border-bottom-color:#E9ECEF; }
[data-theme="light"] .bke-tab-btn { color:#6C757D; }
[data-theme="light"] .bke-tab-btn.active { color:#2563EB; border-bottom-color:#2563EB; }
[data-theme="light"] .bke-tab-btn:hover { color:#333333; }
[data-theme="light"] .bke-tab-content.active { padding:24px; }
[data-theme="light"] .bke-section { background:#fff; border:1px solid #E9ECEF; backdrop-filter:none; }
[data-theme="light"] .bke-section:hover { border-color:#DEE2E6; }
[data-theme="light"] .bke-section h3 { color:#212529; border-bottom-color:#F1F3F5; }
[data-theme="light"] .bke-section-body { background:#fff; }
[data-theme="light"] .bke-form-group label { color:#495057; }
[data-theme="light"] .bke-form-group input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),
[data-theme="light"] .bke-form-group select,
[data-theme="light"] .bke-form-group textarea { background:#F8F9FA; color:#333333; border:1px solid #E9ECEF; }
[data-theme="light"] .bke-form-group input:focus,
[data-theme="light"] .bke-form-group select:focus,
[data-theme="light"] .bke-form-group textarea:focus { background:#fff; border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,0.15); }
[data-theme="light"] .bke-warning-banner { background:#fff3cd; border-color:#ffeaa7; }
[data-theme="light"] .bke-warning-banner .bke-warning-item { color:#856404; }

/* Booking Wizard — VELOCITY Light mode (Primary:#2563EB Secondary:#6F42C1 Surface:#F8F9FA Border:#E9ECEF Text:#333333 Muted:#6C757D) */
[data-theme="light"] .bke-wizard-body { background:#F8F9FB; }
[data-theme="light"] .bke-wizard-scroll { background:#F8F9FB; }
[data-theme="light"] .bke-wizard-section { background:#fff; backdrop-filter:none; border:1px solid #E9ECEF; box-shadow:none; }
[data-theme="light"] .bke-wizard-section:hover { border-color:#dee2e6; }
[data-theme="light"] .bke-wizard-section.step-active { border:1px solid #2563EB; background:#fff; box-shadow:0 4px 12px rgba(37,99,235,0.08); border-left:4px solid #2563EB; }
[data-theme="light"] .bke-wizard-section .section-header .step-num { background:rgba(37,99,235,0.1); color:#2563EB; }
[data-theme="light"] .bke-wizard-section.step-active .section-header .step-num { background:#2563EB; color:#fff; }
[data-theme="light"] .bke-wizard-section .section-header h3 { color:#333; }
[data-theme="light"] .bke-wizard-section .section-header .step-check { color:#28a745; }
[data-theme="light"] .bke-wizard-section .section-bg-icon { color:#2563EB; opacity:0.03; }
[data-theme="light"] .bke-wizard-section .bke-form-group label { color:#6C757D; font-size:10px; letter-spacing:0.15em; }
[data-theme="light"] .bke-wizard-section .bke-form-group input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),
[data-theme="light"] .bke-wizard-section .bke-form-group select,
[data-theme="light"] .bke-wizard-section .bke-form-group textarea { background:#fff; color:#333; border:1px solid #E9ECEF; }
[data-theme="light"] .bke-wizard-section .bke-form-group input:focus,
[data-theme="light"] .bke-wizard-section .bke-form-group select:focus,
[data-theme="light"] .bke-wizard-section .bke-form-group textarea:focus { background:#fff; border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,0.12); }
[data-theme="light"] .bke-wizard-section .bke-form-group input::placeholder,
[data-theme="light"] .bke-wizard-section .bke-form-group textarea::placeholder { color:#adb5bd; }

/* Tariff buttons — VELOCITY Light mode */
[data-theme="light"] .tariff-btn-grid .tariff-btn { background:#F8F9FA; border:1px solid #E9ECEF; color:#6C757D; }
[data-theme="light"] .tariff-btn-grid .tariff-btn:hover { background:#f1f3f5; border-color:#2563EB; color:#333; }
[data-theme="light"] .tariff-btn-grid .tariff-btn.active { background:#e8f0fe; border:2px solid #2563EB; color:#2563EB; box-shadow:none; }
[data-theme="light"] .tariff-btn-grid .tariff-btn .tariff-icon svg { stroke:#6C757D; }
[data-theme="light"] .tariff-btn-grid .tariff-btn:hover .tariff-icon svg { stroke:#2563EB; }
[data-theme="light"] .tariff-btn-grid .tariff-btn.active .tariff-icon svg { stroke:#2563EB; }
[data-theme="light"] .tariff-btn-grid .tariff-btn.customer-tariff { border-color:rgba(40,167,69,0.3); }
[data-theme="light"] .tariff-btn-grid .tariff-btn.customer-tariff.active { border-color:#28a745; color:#28a745; }
[data-theme="light"] .tariff-btn-grid .tariff-btn.customer-tariff.active .tariff-icon svg { stroke:#28a745; }

/* Priority cards — VELOCITY Light mode */
[data-theme="light"] .bke-priority-card { background:#F8F9FA; border:1px solid #E9ECEF; }
[data-theme="light"] .bke-priority-card:hover { border-color:#dee2e6; background:#f1f3f5; }
[data-theme="light"] .bke-priority-card .bke-priority-desc { color:#6C757D; }
[data-theme="light"] .bke-priority-card .bke-priority-check { background:rgba(37,99,235,0.1); }
[data-theme="light"] .bke-priority-card .bke-priority-check svg { stroke:#2563EB; }
[data-theme="light"] .bke-priority-card.priority-standard { border-left-color:rgba(111,66,193,0.4); }
[data-theme="light"] .bke-priority-card.priority-standard .bke-priority-title { color:#6F42C1; }
[data-theme="light"] .bke-priority-card.priority-standard.active { background:#f3f0ff; border-color:rgba(111,66,193,0.2); border-left-color:#6F42C1; }
[data-theme="light"] .bke-priority-card.priority-express { border-left-color:rgba(37,99,235,0.4); }
[data-theme="light"] .bke-priority-card.priority-express .bke-priority-title { color:#2563EB; }
[data-theme="light"] .bke-priority-card.priority-express.active { background:#e8f0fe; border-color:rgba(37,99,235,0.15); border-left-color:#2563EB; box-shadow:inset 0 0 0 1px rgba(37,99,235,0.1); }
[data-theme="light"] .bke-priority-card.priority-urgent { border-left-color:rgba(253,126,20,0.4); }
[data-theme="light"] .bke-priority-card.priority-urgent .bke-priority-title { color:#e8590c; }
[data-theme="light"] .bke-priority-card.priority-urgent.active { background:#fff4e6; border-color:rgba(253,126,20,0.2); border-left-color:#e8590c; }

/* Summary sidebar — VELOCITY Light mode */
[data-theme="light"] .bke-summary-sidebar { background:#F8F9FA; border-left:1px solid #E9ECEF; }
[data-theme="light"] .bke-summary-header { border-bottom-color:#E9ECEF; background:#fff; }
[data-theme="light"] .bke-summary-header h3 { color:#333; }
[data-theme="light"] .bke-summary-header .live-dot { background:#2563EB; }
[data-theme="light"] .bke-summary-map { background:#f1f3f5; border-color:#E9ECEF; }
[data-theme="light"] .bke-summary-map .map-label span { color:#2563EB; background:rgba(255,255,255,0.85); }
[data-theme="light"] .bke-summary-map .map-label svg { stroke:#2563EB; }
[data-theme="light"] .bke-summary-route::before { border-left-color:#E9ECEF; }
[data-theme="light"] .bke-summary-route-stop .route-dot.pickup { background:rgba(37,99,235,0.15); }
[data-theme="light"] .bke-summary-route-stop .route-dot.pickup .inner { background:#2563EB; }
[data-theme="light"] .bke-summary-route-stop .route-dot.delivery { background:rgba(111,66,193,0.15); }
[data-theme="light"] .bke-summary-route-stop .route-dot.delivery .inner { background:#6F42C1; }
[data-theme="light"] .bke-summary-route-stop .stop-type.pickup { color:#2563EB; }
[data-theme="light"] .bke-summary-route-stop .stop-type.delivery { color:#6F42C1; }
[data-theme="light"] .bke-summary-route-stop .stop-addr { color:#333; }
[data-theme="light"] .bke-summary-route-stop .stop-time { color:#6C757D; }
[data-theme="light"] .bke-summary-costs { background:#fff; border:1px solid #E9ECEF; }
[data-theme="light"] .bke-summary-costs h4 { color:#6C757D; }
[data-theme="light"] .bke-summary-cost-row .cost-label { color:#6C757D; }
[data-theme="light"] .bke-summary-cost-row .cost-value { color:#333; font-weight:600; }
[data-theme="light"] .bke-summary-cost-row .cost-value.accent { color:#2563EB; }
[data-theme="light"] .bke-summary-cost-total { border-top-color:#E9ECEF; }
[data-theme="light"] .bke-summary-cost-total .total-label { color:#333; }
[data-theme="light"] .bke-summary-cost-total .total-amount { color:#2563EB; }
[data-theme="light"] .bke-summary-cost-total .total-vat { color:#adb5bd; }
[data-theme="light"] .bke-summary-action-btn { border-color:#E9ECEF; color:#333; background:#fff; }
[data-theme="light"] .bke-summary-action-btn:hover { background:#F8F9FA; color:#333; }
[data-theme="light"] .bke-summary-footer { border-top-color:#E9ECEF; background:#fff; }
[data-theme="light"] .bke-confirm-btn { background:#2563EB; color:#fff; box-shadow:0 4px 16px rgba(37,99,235,0.2); border-radius:12px; }
[data-theme="light"] .bke-confirm-btn:hover { background:#1d4ed8; box-shadow:0 8px 24px rgba(37,99,235,0.3); transform:translateY(-1px); }

/* ============ CUSTOMER PORTAL — LIGHT MODE ============ */
[data-theme="light"] .portal-preview-banner { background:rgba(37,99,235,0.06); border-color:rgba(37,99,235,0.18); color:#2563EB; }
[data-theme="light"] .portal-wrap { background:#fff; border-color:#E9ECEF; box-shadow:0 4px 16px rgba(0,0,0,0.08); }
[data-theme="light"] .portal-topbar { background:#F8F9FA; border-bottom-color:#E9ECEF; color:#212529; }
[data-theme="light"] .portal-topbar .portal-logo-box { background:linear-gradient(135deg,#2563EB,#6F42C1); box-shadow:0 2px 8px rgba(37,99,235,0.3); }
[data-theme="light"] .portal-topbar .portal-brand-name { color:#212529; }
[data-theme="light"] .portal-topbar .portal-brand-sub { color:#6C757D; }
[data-theme="light"] .portal-topbar .portal-logout { background:#F1F3F5; border-color:#E9ECEF; color:#6C757D; }
[data-theme="light"] .portal-topbar .portal-logout:hover { background:#fee2e2; color:#dc3545; border-color:#fca5a5; }
[data-theme="light"] .portal-body { background:#F8F9FB; }
[data-theme="light"] .portal-hero h1 { color:#212529; }
[data-theme="light"] .portal-hero .portal-hero-company { color:#2563EB; }
[data-theme="light"] .portal-kpi { background:#fff; border-color:#E9ECEF; box-shadow:0 1px 3px rgba(0,0,0,0.06); backdrop-filter:none; }
[data-theme="light"] .portal-kpi:hover { border-color:#2563EB; box-shadow:0 4px 16px rgba(37,99,235,0.1); }
[data-theme="light"] .portal-kpi:nth-child(1) .pk-val { color:#2563EB; }
[data-theme="light"] .portal-kpi:nth-child(2) .pk-val { color:#28a745; }
[data-theme="light"] .portal-kpi:nth-child(3) .pk-val { color:#6F42C1; }
[data-theme="light"] .portal-kpi:nth-child(4) .pk-val { color:#e8590c; }
[data-theme="light"] .portal-kpi:nth-child(1)::before { background:linear-gradient(90deg,#2563EB,#3B82F6); }
[data-theme="light"] .portal-kpi:nth-child(3)::before { background:linear-gradient(90deg,#6F42C1,#8B5CF6); }
[data-theme="light"] .portal-kpi:nth-child(4)::before { background:linear-gradient(90deg,#e8590c,#f97316); }
[data-theme="light"] .portal-kpi .pk-label { color:#6C757D; }
[data-theme="light"] .portal-tabs { border-bottom-color:#E9ECEF; }
[data-theme="light"] .portal-tab { color:#6C757D; }
[data-theme="light"] .portal-tab:hover { color:#2563EB; }
[data-theme="light"] .portal-tab.active { color:#2563EB; border-bottom-color:#2563EB; }
[data-theme="light"] .portal-section-title { color:#212529; }
[data-theme="light"] .portal-table { border-color:#E9ECEF; }
[data-theme="light"] .portal-table th { background:#F8F9FA; color:#6C757D; border-color:#E9ECEF; }
[data-theme="light"] .portal-table td { color:#333; border-color:#F1F3F5; }
[data-theme="light"] .portal-table tr:hover { background:#F8F9FA; }
[data-theme="light"] .portal-table td small { color:#6C757D !important; }
[data-theme="light"] .portal-table td[style*="font-weight:600"][style*="color:#ecedf6"] { color:#212529 !important; }
[data-theme="light"] .portal-table td[style*="color:#8ff5ff"] { color:#2563EB !important; }
[data-theme="light"] .portal-create-btn { background:#2563EB; color:#fff; box-shadow:0 2px 8px rgba(37,99,235,0.25); }
[data-theme="light"] .portal-create-btn:hover { background:#1d4ed8; }
[data-theme="light"] .portal-track-btn { background:rgba(37,99,235,0.08); color:#2563EB; border-color:rgba(37,99,235,0.2); }
[data-theme="light"] .portal-track-btn:hover { background:rgba(37,99,235,0.15); }
[data-theme="light"] .portal-job-form { background:#fff; border-color:#E9ECEF; }
[data-theme="light"] .portal-job-form h3 { color:#2563EB !important; }
[data-theme="light"] .portal-job-form label { color:#6C757D !important; }
[data-theme="light"] .portal-job-form input,
[data-theme="light"] .portal-job-form textarea,
[data-theme="light"] .portal-job-form select { background:#F8F9FA; border-color:#E9ECEF; color:#333; }
[data-theme="light"] .portal-job-form input:focus,
[data-theme="light"] .portal-job-form textarea:focus { border-color:#2563EB; background:#fff; box-shadow:0 0 0 3px rgba(37,99,235,0.12); }
[data-theme="light"] .portal-vehicle-pill { background:#F8F9FA; border-color:#E9ECEF; color:#6C757D; }
[data-theme="light"] .portal-vehicle-pill.active { background:#e8f0fe; border-color:#2563EB; color:#2563EB; }
[data-theme="light"] .portal-vehicle-pill:hover { border-color:#2563EB; color:#2563EB; }
[data-theme="light"] .pp-badge-pending { background:#fff3cd; color:#6d3a00; }
[data-theme="light"] .pp-badge-active { background:#cce5ff; color:#004085; }
[data-theme="light"] .pp-badge-delivered { background:#d4edda; color:#155724; }
[data-theme="light"] .pp-badge-invoiced { background:#e8daef; color:#4a1a7a; }
[data-theme="light"] .pp-badge-cancelled { background:#f8d7da; color:#721c24; }
[data-theme="light"] .pp-badge-draft { background:#F1F3F5; color:#6C757D; }
[data-theme="light"] .pp-badge-paid { background:#d4edda; color:#155724; }
[data-theme="light"] .pp-badge-overdue { background:#f8d7da; color:#721c24; }
[data-theme="light"] .pp-badge-sent { background:#cce5ff; color:#004085; }
/* Portal job detail view */
.portal-job-detail { padding:24px; }
.portal-job-detail-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.portal-job-detail-ref { font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:700; }
.portal-job-detail-back { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); color:#a9abb3; padding:8px 16px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; transition:all 0.2s; }
[data-theme="light"] .portal-job-detail-back { background:#F1F3F5; border-color:#E9ECEF; color:#6C757D; }
.portal-job-detail-card { background:rgba(34,38,47,0.6); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:20px; margin-bottom:16px; }
[data-theme="light"] .portal-job-detail-card { background:#fff; border-color:#E9ECEF; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
.portal-job-detail-card h4 { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:12px; }
.portal-job-detail-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.05); font-size:14px; }
[data-theme="light"] .portal-job-detail-row { border-bottom-color:#F1F3F5; }
.portal-job-detail-row:last-child { border-bottom:none; }
.portal-job-detail-label { color:#6b6e76; }
[data-theme="light"] .portal-job-detail-label { color:#6C757D; }
.portal-job-detail-value { font-weight:600; }
[data-theme="light"] .portal-job-detail-value { color:#212529; }
.portal-pod-section { margin-top:20px; }
.portal-pod-card { background:rgba(52,168,83,0.08); border:1px solid rgba(52,168,83,0.2); border-radius:12px; padding:20px; }
[data-theme="light"] .portal-pod-card { background:#d4edda; border-color:#c3e6cb; }
.portal-pod-title { font-weight:700; font-size:14px; margin-bottom:10px; color:#34a853; }
[data-theme="light"] .portal-pod-title { color:#155724; }

[data-theme="dark"] .pill-btn { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #8b95a5; }
[data-theme="dark"] .pill-btn:hover { background: rgba(255,255,255,0.08); color: #e2e8f0; }
[data-theme="dark"] .pill-btn.active { background: #2563eb; color: #fff; border-color: #2563eb; }

/* ===== TARIFFS PAGE ===== */
.tariffs-list-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.tariffs-list-header h1 { margin: 0; font-size: 24px; color: var(--gray-900); }
.tariffs-list { width: 100%; border-collapse: collapse; font-size: 13px; }
.tariffs-list thead th { background: transparent; padding: 12px 12px; text-align: left; font-weight: 600; color: var(--gray-500); border-bottom: 1px solid var(--gray-200); white-space: nowrap; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.tariffs-list tbody td { padding: 12px 12px; border-bottom: 1px solid #e0e0e0; vertical-align: middle; }
.tariffs-list tbody tr:hover { background: #e8f0fe; }
.tariff-cell-zones { max-width: 250px; white-space: normal; font-size: 12px; }
.tariff-cell-charges { display: flex; flex-wrap: wrap; gap: 4px; }
.tariff-cell-charge { background: var(--primary-light); color: var(--primary); padding: 2px 6px; border-radius: 3px; font-size: 11px; }
.tariff-cell-ooh { display: flex; gap: 4px; }
.tariff-ooh-item { background: var(--warning-light); color: #856404; padding: 2px 6px; border-radius: 3px; font-size: 11px; }
.tariff-ooh-instant { background: var(--success-light); color: var(--success); padding: 2px 6px; border-radius: 3px; font-size: 11px; }
.tariff-actions { display: flex; gap: 6px; white-space: nowrap; }
.tariff-btn-edit { background: var(--primary); color: #fff; border: none; padding: 6px 12px; border-radius: 9999px; cursor: pointer; font-size: 12px; }
.tariff-btn-edit:hover { background: var(--primary-dark); }

.tariff-edit-page { padding: 16px; }
.tariff-edit-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--gray-200); }
.tariff-edit-header h1 { margin: 0; font-size: 22px; color: var(--gray-900); }
.tariff-edit-header .header-actions { display: flex; gap: 8px; }
.tariff-form { background: #fff; border-radius: 12px; box-shadow: none; border: 1px solid rgba(0,0,0,0.06); padding: 16px 20px; }
.tariff-form-section { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--gray-200); }
.tariff-form-section:last-child { border-bottom: none; margin-bottom: 0; }
.tariff-form-section h3 { font-size: 14px; font-weight: 600; color: var(--gray-800); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.tariff-form-section h3::before { content: ''; display: block; width: 3px; height: 20px; background: var(--primary); border-radius: 2px; }

.tariff-form-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.tariff-form-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.tariff-form-group { display: flex; flex-direction: column; gap: 4px; }
.tariff-form-group label { font-size: 11px; font-weight: 600; color: var(--gray-700); text-transform: uppercase; letter-spacing: 0.3px; }
.tariff-form-group input, .tariff-form-group select { padding: 7px 10px; border: 1px solid var(--gray-300); border-radius: 5px; font-size: 13px; font-family: inherit; transition: border-color 0.15s; }
.tariff-form-group input:focus, .tariff-form-group select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,115,232,0.1); }

/* SLM-style inline field rows */
.tariff-inline-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.tariff-inline-field { display: flex; align-items: center; gap: 6px; }
.tariff-inline-field label { font-size: 13px; font-weight: 500; color: var(--gray-700); white-space: nowrap; margin: 0; }
.tariff-inline-field input, .tariff-inline-field select { padding: 7px 10px; border: 1px solid var(--gray-300); border-radius: 5px; font-size: 13px; font-family: inherit; transition: border-color 0.15s; }
.tariff-inline-field input:focus, .tariff-inline-field select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,115,232,0.1); }
.tariff-inline-field .unit-label { font-size: 12px; color: var(--gray-500); font-weight: 400; }
.tariff-inline-field input[type="number"] { width: 120px; text-align: right; }
.tariff-inline-field input[type="text"] { width: 200px; }
.tariff-inline-field select { width: 180px; }
.tariff-inline-separator { width: 1px; height: 24px; background: var(--gray-300); margin: 0 4px; }

.tariff-checkbox-group { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.tariff-checkbox-item { display: flex; align-items: center; gap: 6px; }
.tariff-checkbox-item input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.tariff-checkbox-item label { font-size: 13px; cursor: pointer; }

/* SLM-style zone grid: label left, input right */
.tariff-zone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; margin-top: 8px; }
.tariff-zone-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--gray-100); }
.tariff-zone-item label { font-size: 13px; font-weight: 500; color: var(--gray-700); white-space: nowrap; }
.tariff-zone-item input { padding: 6px 8px; border: 1px solid var(--gray-300); border-radius: 4px; font-size: 13px; width: 100px; text-align: right; }

/* SLM-style OOH: each day as a row with charge, start, finish */
.tariff-ooh-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.tariff-ooh-table th { font-size: 11px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.3px; padding: 6px 8px; text-align: left; border-bottom: 2px solid var(--gray-200); }
.tariff-ooh-table td { padding: 8px; border-bottom: 1px solid var(--gray-100); }
.tariff-ooh-table td:first-child { font-size: 13px; font-weight: 500; color: var(--gray-700); white-space: nowrap; }
.tariff-ooh-table input[type="number"] { width: 100px; padding: 6px 8px; border: 1px solid var(--gray-300); border-radius: 4px; font-size: 13px; text-align: right; }
.tariff-ooh-table input[type="time"] { width: 110px; padding: 6px 8px; border: 1px solid var(--gray-300); border-radius: 4px; font-size: 13px; }
/* Keep old classes for backwards compat */
.tariff-ooh-times { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 12px; }
.tariff-ooh-day { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--gray-50); border-radius: 6px; }
.tariff-ooh-day label { font-size: 11px; font-weight: 600; color: var(--gray-700); }
.tariff-ooh-day .time-inputs { display: flex; gap: 8px; }
.tariff-ooh-day .time-inputs input { padding: 6px; border: 1px solid var(--gray-300); border-radius: 4px; font-size: 12px; width: 70px; }

.tariff-pay-bands { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.tariff-pay-band { padding: 10px 14px; background: var(--gray-50); border-radius: 6px; border: 1px solid var(--gray-200); }
.tariff-pay-band-toggle { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tariff-pay-band-toggle label { font-size: 13px; font-weight: 600; color: var(--gray-700); }
.tariff-pay-band-fields { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tariff-pay-band-fields .tariff-inline-field input[type="number"] { width: 100px; }

.tariff-chart-container { margin-top: 20px; padding: 20px; background: var(--gray-50); border-radius: 8px; }
.tariff-chart-container h4 { margin-top: 0; margin-bottom: 16px; color: var(--gray-800); font-size: 14px; }
.tariff-chart { max-width: 100%; height: 300px; }

.tariff-view-page { padding: 24px; }
.tariff-view-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--gray-200); }
.tariff-view-header h1 { margin: 0; font-size: 24px; color: var(--gray-900); }
.tariff-view-header .header-actions { display: flex; gap: 8px; }
.tariff-cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.tariff-card { background: #fff; border-radius: 12px; box-shadow: none; border: 1px solid rgba(0,0,0,0.06); padding: 18px; border-top: 2px solid var(--primary); }
.tariff-card h3 { margin: 0 0 12px 0; font-size: 14px; font-weight: 600; color: var(--gray-700); }
.tariff-card .card-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--gray-100); font-size: 13px; }
.tariff-card .card-item:last-child { border-bottom: none; }
.tariff-card .card-label { color: var(--gray-500); font-weight: 500; }
.tariff-card .card-value { color: var(--gray-900); font-weight: 600; }

.tariff-history-card { background: #fff; border-radius: 12px; box-shadow: none; border: 1px solid rgba(0,0,0,0.06); padding: 18px; grid-column: 1 / -1; }
.tariff-history-card h3 { margin: 0 0 12px 0; font-size: 14px; font-weight: 600; color: var(--gray-700); }

/* Invoice Filter Panel - horizontal layout */
.inv-filter-panel { background: #fff; border-radius: 12px; box-shadow: none; border: 1px solid rgba(0,0,0,0.06); padding: 12px 16px; margin-bottom: 16px; }
.inv-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--gray-100); }
.inv-filter-row:last-child { border-bottom: none; }
.inv-search-input { padding: 6px 12px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 13px; width: 180px; font-family: inherit; }
.inv-search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(26,115,232,0.1); }
.inv-pill-group { display: flex; gap: 4px; border: none; border-radius: 9999px; overflow: visible; }
.inv-pill { padding: 5px 12px; border: none; background: #f1f3f5; font-size: 12px; font-weight: 600; color: var(--gray-600); cursor: pointer; transition: all 0.12s; white-space: nowrap; border-right: none; font-family: inherit; border-radius: 9999px; }
.inv-pill:last-child { border-right: none; }
.inv-pill:hover { background: var(--gray-50); color: var(--gray-900); }
.inv-pill.active { background: var(--primary); color: #fff; }
.inv-date-input { padding: 5px 8px; border: 1px solid var(--gray-300); border-radius: 4px; font-size: 12px; font-family: inherit; }
.inv-actions-row { gap: 6px; padding-top: 10px; }
.inv-actions-row .btn { font-size: 12px; padding: 6px 14px; }

/* Invoice Table */
.invoices-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: none; border: 1px solid rgba(0,0,0,0.06); }
.invoices-table thead th { padding: 10px 10px; text-align: left; font-weight: 600; font-size: 11px; color: var(--gray-500); background: transparent; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--gray-200); }
.invoices-table tbody td { padding: 10px 10px; border-bottom: 1px solid var(--gray-200); font-size: 13px; vertical-align: middle; }
.invoices-table tbody tr { cursor: pointer; transition: background 0.1s; }
.invoices-table tbody tr:hover { background: #e8f0fe; }
.invoices-table tbody tr.inv-selected { background: #fef9c3; border-left: 3px solid #eab308; }
.invoices-table .inv-complete-yes { color: var(--success); font-weight: 700; }
.invoices-table .inv-complete-no { color: var(--danger); font-weight: 700; }
.inv-btn-edit { background: var(--primary); color: #fff; border: none; padding: 4px 10px; border-radius: 9999px; cursor: pointer; font-size: 11px; font-weight: 600; }
.inv-btn-edit:hover { background: var(--primary-dark); }
.inv-btn-pdf { background: #dc3545; color: #fff; border: none; padding: 4px 10px; border-radius: 9999px; cursor: pointer; font-size: 11px; font-weight: 600; }
.inv-btn-pdf:hover { background: #c82333; }
.invoices-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 12px; padding: 12px 0; }
.invoices-pagination button { padding: 5px 10px; border: none; background: #F1F3F5; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 500; min-width: 32px; color: var(--gray-600); }
.invoices-pagination button:hover { background: #E9ECEF; color: var(--gray-900); }
.invoices-pagination button.active { background: var(--primary); color: #fff; }
.invoices-pagination button:disabled { opacity: 0.4; cursor: default; }

/* Invoice Transfer/Download Flow */
.inv-transfer-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:9999; display:flex; align-items:center; justify-content:center; }
.inv-transfer-modal { background:#fff; border-radius:12px; max-width:800px; width:95%; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.inv-transfer-header { padding:24px 28px 16px; border-bottom:1px solid var(--gray-200); }
.inv-transfer-header h2 { margin:0 0 4px; font-size:20px; }
.inv-transfer-header p { margin:0; color:var(--gray-500); font-size:13px; }
.inv-transfer-body { padding:24px 28px; }
.inv-transfer-section { margin-bottom:24px; }
.inv-transfer-section h4 { font-size:14px; font-weight:700; margin:0 0 10px; color:var(--gray-800); }
.inv-transfer-section h4.inv-warn { color:#dc3545; }
.inv-transfer-table { width:100%; border-collapse:collapse; font-size:13px; }
.inv-transfer-table th { background:transparent; color:var(--gray-500); padding:8px 12px; text-align:left; font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; border-bottom:1px solid var(--gray-200); }
.inv-transfer-table th:nth-child(n+3) { text-align:right; }
.inv-transfer-table td { padding:8px 12px; border-bottom:1px solid var(--gray-100); }
.inv-transfer-table td:nth-child(n+3) { text-align:right; }
.inv-transfer-table tr:last-child td { border-bottom:none; }
.inv-transfer-table a { color:var(--primary); text-decoration:none; cursor:pointer; }
.inv-transfer-totals { background:var(--gray-50); border-radius:8px; overflow:hidden; margin-bottom:16px; }
.inv-transfer-totals th { background:transparent; color:var(--gray-500); font-size:11px; text-transform:uppercase; letter-spacing:0.05em; border-bottom:1px solid var(--gray-200); }
.inv-transfer-alert { padding:10px 16px; border-radius:6px; font-size:13px; margin-bottom:16px; }
.inv-transfer-alert-yellow { background:#fef3cd; border:1px solid #ffc107; color:#856404; }
.inv-transfer-alert-red { background:#f8d7da; border:1px solid #f5c6cb; color:#721c24; }
.inv-transfer-footer { padding:16px 28px 24px; display:flex; gap:10px; }
.inv-transfer-footer .btn { padding:10px 20px; font-weight:600; border-radius:8px; cursor:pointer; font-size:13px; border:none; }
.inv-transfer-footer .btn-download { background:#f0ad4e; color:#000; }
.inv-transfer-footer .btn-download:hover { background:#ec971f; }
.inv-transfer-footer .btn-cancel { background:var(--gray-200); color:var(--gray-700); }
.inv-transfer-footer .btn-cancel:hover { background:var(--gray-300); }
.inv-transfer-footer .btn-mark-yes { background:#f0ad4e; color:#000; }
.inv-transfer-footer .btn-mark-yes:hover { background:#ec971f; }
.inv-transfer-footer .btn-mark-no { background:#333; color:#fff; }
.inv-transfer-footer .btn-mark-no:hover { background:#555; }

/* Invoice View Page */
.inv-view-page { background: #fff; border-radius: 12px; box-shadow: none; border: 1px solid rgba(0,0,0,0.06); padding: 24px; }
.inv-view-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--gray-200); }
.inv-view-header h1 { font-size: 22px; margin: 0; }
.inv-view-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.inv-view-field { }
.inv-view-field .label { font-size: 11px; text-transform: uppercase; color: var(--gray-500); font-weight: 600; letter-spacing: 0.3px; margin-bottom: 2px; }
.inv-view-field .value { font-size: 14px; font-weight: 600; color: var(--gray-900); }

/* Dark mode invoice */
[data-theme="dark"] .inv-filter-panel { background: #161a21; border: 1px solid rgba(255,255,255,0.05); }
[data-theme="dark"] .inv-search-input { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #e2e8f0; }
[data-theme="dark"] .inv-pill-group { border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .inv-pill { background: rgba(255,255,255,0.04); color: #8b95a5; border-right-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .inv-pill:hover { background: rgba(255,255,255,0.08); color: #e2e8f0; }
[data-theme="dark"] .inv-pill.active { background: #2563eb; color: #fff; }
[data-theme="dark"] .inv-date-input { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #e2e8f0; }
[data-theme="dark"] .inv-filter-row { border-bottom-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .invoices-table { background: #161a21; }
[data-theme="dark"] .invoices-table thead th { background: rgba(255,255,255,0.02); color: #64748b; }
[data-theme="dark"] .invoices-table tbody td { border-bottom-color: rgba(255,255,255,0.04); color: #94a3b8; }
[data-theme="dark"] .invoices-table tbody tr:hover { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .invoices-table tbody tr.inv-selected { background: rgba(234,179,8,0.08); border-left-color: #eab308; }
[data-theme="dark"] .invoices-pagination button { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #8b95a5; }
[data-theme="dark"] .inv-view-page { background: #161a21; }
[data-theme="dark"] .inv-view-header { border-bottom-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .inv-view-header h1 { color: #e2e8f0; }
[data-theme="dark"] .inv-view-field .label { color: #475569; }
[data-theme="dark"] .inv-view-field .value { color: #e2e8f0; }

/* Professional Invoice Document View — Modern Glossy */
.inv-doc { width: 210mm; min-height: 297mm; margin: 0 auto; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.04); padding: 0; position: relative; overflow: hidden; border-radius: 2px; }
.inv-doc-banner { background: #1e293b; padding: 32px 40px 28px; color: #fff; position: relative; overflow: hidden; }
.inv-doc-banner::before { display: none !important; }
.inv-doc-banner::after { display: none !important; }
.inv-doc-banner-inner { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; }
.inv-doc-banner h2 { font-size: 28px; font-weight: 900; letter-spacing: -0.5px; margin-bottom: 6px; }
.inv-doc-banner p { font-size: 12px; line-height: 1.7; opacity: 0.9; }
.inv-doc-banner .inv-doc-badge { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; padding: 8px 14px; font-size: 10px; line-height: 1.5; text-align: right; }
.inv-doc-content { padding: 30px 40px 40px; }
.inv-doc-title-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid #E9ECEF; }
.inv-doc-title { font-size: 22px; font-weight: 800; color: #0f172a; letter-spacing: 2px; text-transform: uppercase; margin: 0; }
.inv-doc-status { padding: 5px 14px; border-radius: 9999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.inv-doc-status.paid { background: #28a745; color: #fff; }
.inv-doc-status.draft { background: #6C757D; color: #fff; }
.inv-doc-status.sent { background: #2563EB; color: #fff; }
.inv-doc-status.overdue { background: #dc3545; color: #fff; }
.inv-doc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 28px; }
.inv-doc-party { background: #F8F9FA; border: 1px solid #E9ECEF; border-radius: 8px; padding: 16px 18px; }
.inv-doc-party label { font-size: 9px; text-transform: uppercase; font-weight: 700; color: #ADB5BD; letter-spacing: 1.5px; display: block; margin-bottom: 8px; }
.inv-doc-party p { font-size: 13px; line-height: 1.7; color: #333333; margin: 0; }
.inv-doc-party p strong { color: #0f172a; }
.inv-doc-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 24px; border-radius: 8px; overflow: hidden; border: 1px solid #E9ECEF; }
.inv-doc-table thead th { background: #212529; color: #fff; padding: 12px 14px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; }
.inv-doc-table thead th:first-child { border-radius: 0; }
.inv-doc-table thead th:last-child { border-radius: 0; }
.inv-doc-table tbody td { padding: 11px 14px; font-size: 12.5px; border-bottom: 1px solid #F1F3F5; vertical-align: top; color: #495057; }
.inv-doc-table tbody tr:last-child td { border-bottom: none; }
.inv-doc-table tbody tr:nth-child(even) { background: #F8F9FA; }
.inv-doc-table tbody tr:hover { background: #e8f0fe; }
.inv-doc-totals { display: flex; justify-content: flex-end; margin-bottom: 28px; }
.inv-doc-totals table { font-size: 13px; border-collapse: collapse; min-width: 260px; }
.inv-doc-totals td { padding: 8px 18px; }
.inv-doc-totals tr:not(.total-row) td { color: #6C757D; border-bottom: 1px solid #F1F3F5; }
.inv-doc-totals .total-row { background: #0f172a; color: #fff; font-size: 16px; font-weight: 700; }
.inv-doc-totals .total-row td { border-radius: 6px; padding: 12px 18px; }
.inv-doc-totals .total-row td:first-child { border-radius: 6px 0 0 6px; }
.inv-doc-totals .total-row td:last-child { border-radius: 0 6px 6px 0; }
.inv-doc-payment { background: #F8F9FA; border: 1px solid #E9ECEF; border-radius: 10px; padding: 20px 24px; margin-bottom: 20px; }
.inv-doc-payment h3 { font-size: 12px; font-weight: 700; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px; color: #0369a1; }
.inv-doc-payment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; font-size: 13px; }
.inv-doc-payment-grid .label { color: #6C757D; font-size: 12px; }
.inv-doc-payment-grid .value { font-weight: 600; color: #0f172a; }
.inv-doc-footer { text-align: center; padding-top: 16px; border-top: 1px solid #E9ECEF; font-size: 11px; color: #ADB5BD; }
.inv-doc-actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--gray-200); margin-bottom: 0; background: var(--gray-50); }
.inv-doc-actions .btn { font-size: 13px; padding: 8px 16px; }

/* Split-screen invoice editor */
#page-invoice-edit.active { padding: 0; }
#page-driver-bill-edit.active { padding: 0; }
#inv-live-preview { transform-origin: top center; }
@media (max-width: 1400px) { #inv-live-preview { transform: scale(0.75); margin-bottom: -25%; } }
@media (max-width: 1200px) { #inv-live-preview { transform: scale(0.65); margin-bottom: -35%; } }
.inv-split { display: grid; grid-template-columns: 420px 1fr; gap: 0; height: calc(100vh - 120px); }
.inv-edit-panel { background: var(--gray-50); border-right: 1px solid var(--gray-200); padding: 20px; overflow-y: auto; }
.inv-edit-panel h3 { font-size: 15px; font-weight: 700; margin-bottom: 12px; color: var(--gray-800); }
.inv-edit-panel .form-group { margin-bottom: 10px; }
.inv-edit-panel .form-group label { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--gray-500); margin-bottom: 3px; display: block; }
.inv-edit-panel .form-group input, .inv-edit-panel .form-group select, .inv-edit-panel .form-group textarea { width: 100%; padding: 7px 10px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 13px; }
.inv-edit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inv-edit-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.inv-line-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 8px; padding: 12px; margin-bottom: 8px; position: relative; }
.inv-line-card .inv-line-remove { position: absolute; top: 6px; right: 6px; background: #d93025; color: #fff; border: none; border-radius: 4px; width: 22px; height: 22px; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.inv-preview-panel { padding: 24px; overflow-y: auto; background: #e5e7eb; display: flex; justify-content: center; align-items: flex-start; }

/* Invoice Edit Line Form */
.inv-edit-line { max-width: 700px; margin: 0 auto; background: #fff; border: 1px solid var(--gray-200); border-radius: 8px; padding: 30px; }
.inv-edit-line h2 { font-size: 18px; margin-bottom: 20px; }
.inv-edit-line .form-row { display: grid; grid-template-columns: 140px 1fr; gap: 8px; align-items: center; margin-bottom: 12px; font-size: 14px; }
.inv-edit-line .form-row label { font-weight: 500; color: var(--gray-600); }
.inv-edit-line .form-row input, .inv-edit-line .form-row textarea { padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: 4px; font-size: 14px; font-family: inherit; }
.inv-edit-line .form-row textarea { resize: vertical; min-height: 80px; }
.inv-edit-line .form-row-split { display: grid; grid-template-columns: 140px 1fr 120px 1fr; gap: 8px; align-items: center; margin-bottom: 12px; }

/* Dark mode invoice document */
[data-theme="dark"] .inv-doc { background: linear-gradient(180deg, #161a21 0%, #0b0e14 100%); box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05); }
[data-theme="dark"] .inv-doc-banner { background: #161a21; }
[data-theme="dark"] .inv-doc-title-bar { border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .inv-doc-title { color: #e2e8f0; }
[data-theme="dark"] .inv-doc-party { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .inv-doc-party label { color: #475569; }
[data-theme="dark"] .inv-doc-party p { color: #94a3b8; }
[data-theme="dark"] .inv-doc-party p strong { color: #e2e8f0; }
[data-theme="dark"] .inv-doc-table { border-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .inv-doc-table thead th { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .inv-doc-table tbody td { border-bottom-color: rgba(255,255,255,0.04); color: #94a3b8; }
[data-theme="dark"] .inv-doc-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
[data-theme="dark"] .inv-doc-table tbody tr:hover { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .inv-doc-totals tr:not(.total-row) td { color: #64748b; border-bottom-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .inv-doc-totals .total-row { background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%); color: #fff; }
[data-theme="dark"] .inv-doc-payment { background: rgba(0,212,170,0.04); border-color: rgba(0,212,170,0.1); }
[data-theme="dark"] .inv-doc-payment h3 { color: #00d4aa; }
[data-theme="dark"] .inv-doc-payment-grid .label { color: #475569; }
[data-theme="dark"] .inv-doc-payment-grid .value { color: #e2e8f0; }
[data-theme="dark"] .inv-doc-footer { border-top-color: rgba(255,255,255,0.05); color: #475569; }
[data-theme="dark"] .inv-doc-actions { background: #0b0e14; border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .inv-edit-line { background: #161a21; border-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .inv-edit-line h2 { color: #e2e8f0; }
[data-theme="dark"] .inv-edit-line .form-row label { color: #64748b; }
[data-theme="dark"] .inv-edit-line .form-row input, [data-theme="dark"] .inv-edit-line .form-row textarea { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #e2e8f0; }

/* Dark mode split-screen invoice editor */
[data-theme="dark"] .inv-edit-panel { background: #0b0e14; border-right-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .inv-edit-panel h3 { color: #e2e8f0; }
[data-theme="dark"] .inv-edit-panel .form-group label { color: #475569; }
[data-theme="dark"] .inv-edit-panel .form-group input, [data-theme="dark"] .inv-edit-panel .form-group select, [data-theme="dark"] .inv-edit-panel .form-group textarea { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #e2e8f0; }
[data-theme="dark"] .inv-line-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .inv-preview-panel { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .inv-doc { box-shadow: 0 2px 12px rgba(0,0,0,0.4), 0 0 0 1px rgba(59,130,246,0.1); }

/* Manual Page */
.manual-page { grid-template-columns: 240px 1fr; gap: 0; min-height: calc(100vh - 80px); }
.manual-page.active { display: grid; }
.manual-sidebar { background: #fff; border-right: 1px solid var(--gray-200); padding: 20px 0; overflow-y: auto; max-height: calc(100vh - 80px); }
.manual-sidebar-item { padding: 8px 20px; font-size: 13px; color: var(--gray-700); cursor: pointer; display: block; border: none; background: none; width: 100%; text-align: left; transition: all 0.15s; }
.manual-sidebar-item:hover { background: var(--gray-50); color: var(--primary); }
.manual-sidebar-item.active { color: var(--primary); font-weight: 600; background: var(--primary-light); border-left: 3px solid var(--primary); padding-left: 17px; }
.manual-sidebar-section { font-size: 13px; font-weight: 600; padding: 12px 20px 6px; color: var(--gray-800); cursor: pointer; transition: all 0.15s; }
.manual-sidebar-section:hover { color: var(--primary); }
.manual-sidebar-sub { padding-left: 8px; }
.manual-content { padding: 30px 40px; max-width: 900px; overflow-y: auto; max-height: calc(100vh - 80px); }
.manual-content h1 { font-size: 28px; margin-bottom: 16px; color: var(--gray-900); }
.manual-content h2 { font-size: 20px; margin: 24px 0 12px; color: var(--gray-800); }
.manual-content p { font-size: 14px; line-height: 1.7; color: var(--gray-700); margin-bottom: 12px; }
.manual-content ul { margin-left: 20px; margin-bottom: 16px; }
.manual-content li { font-size: 14px; line-height: 1.7; color: var(--gray-700); margin-bottom: 4px; }
.manual-breadcrumb { font-size: 13px; color: var(--gray-500); margin-bottom: 12px; }
.manual-breadcrumb a { color: var(--primary); text-decoration: none; cursor: pointer; }

[data-theme="dark"] .manual-sidebar { background: #161a21; border-right-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .manual-sidebar-item { color: #8b95a5; }
[data-theme="dark"] .manual-sidebar-item:hover { background: rgba(255,255,255,0.04); color: #00d4aa; }
[data-theme="dark"] .manual-sidebar-item.active { color: #00d4aa; background: rgba(0,212,170,0.06); border-left-color: #00d4aa; }
[data-theme="dark"] .manual-sidebar-section { color: #e2e8f0; }
[data-theme="dark"] .manual-sidebar-section:hover { color: #00d4aa; }
[data-theme="dark"] .manual-content h1 { color: #e2e8f0; }
[data-theme="dark"] .manual-content h2 { color: #94a3b8; }
[data-theme="dark"] .manual-content p, [data-theme="dark"] .manual-content li { color: #64748b; }

/* Driver & Vehicle Profile */
/* Driver filter checkboxes */
.drv-cb { display:flex;align-items:center;gap:4px;font-size:13px;cursor:pointer;white-space:nowrap; }
.drv-cb input { width:auto; }

/* Driver detail card layout */
.drv-cards-row { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:16px; }
.drv-info-card { background:#fff; border:1px solid rgba(0,0,0,0.06); border-radius:12px; padding:16px 18px; }
.drv-info-card h4 { font-size:14px; font-weight:700; margin-bottom:12px; padding-bottom:8px; border-bottom:2px solid var(--gray-200); }
.drv-info-card .drv-field { display:flex; justify-content:space-between; padding:5px 0; font-size:13px; border-bottom:1px solid var(--gray-100); }
.drv-info-card .drv-field:last-child { border-bottom:none; }
.drv-info-card .drv-field .lbl { color:var(--gray-500); font-weight:500; }
.drv-info-card .drv-field .val { font-weight:600; color:var(--gray-900); }
.drv-info-card .drv-field .val a { color:var(--primary); }
.drv-tick { color:#28a745; font-weight:700; }
.drv-cross { color:#dc3545; font-weight:700; }

/* Driver detail tabs */
.drv-tabs { display:flex; gap:0; border-bottom:2px solid var(--gray-200); margin-bottom:16px; }
.drv-tab { padding:10px 18px; font-size:13px; font-weight:600; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; color:var(--gray-500); transition:all 0.15s; }
.drv-tab:hover { color:var(--gray-700); }
.drv-tab.active { color:var(--primary); border-bottom-color:var(--primary); }

.drv-profile { max-width: 100%; }
.drv-profile-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--gray-200); }
.drv-profile-header h1 { font-size: 22px; font-weight: 600; }
.drv-profile-header .back-btn { background: none; border: none; cursor: pointer; font-size: 16px; padding: 8px; }
.drv-profile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.drv-profile-field .label { font-size: 11px; text-transform: uppercase; color: var(--gray-500); font-weight: 600; letter-spacing: 0.3px; margin-bottom: 2px; }
.drv-profile-field .value { font-size: 14px; font-weight: 600; color: var(--gray-900); }
.drv-section { background: #fff; border-radius: 12px; box-shadow: none; border: 1px solid rgba(0,0,0,0.06); padding: 20px; margin-bottom: 16px; }
.drv-section h3 { font-size: 16px; font-weight: 600; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--gray-200); }
.doc-card { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border: 1px solid var(--gray-200); border-radius: 6px; margin-bottom: 8px; }
.doc-card .doc-info { flex: 1; }
.doc-card .doc-name { font-weight: 600; font-size: 14px; }
.doc-card .doc-meta { font-size: 12px; color: var(--gray-500); }
.doc-card .doc-expiry-warn { color: var(--warning); font-weight: 600; }
.doc-card .doc-expiry-danger { color: var(--danger); font-weight: 600; }
.reminder-badge { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 600; }
.reminder-badge.green { background: var(--success-light); color: var(--success); }
.reminder-badge.orange { background: var(--warning-light); color: var(--warning); }
.reminder-badge.red { background: var(--danger-light); color: var(--danger); }
.special-note { padding: 12px 16px; border-radius: 6px; margin-bottom: 12px; font-size: 13px; }
.special-note.good { background: #e6f4ea; border-left: 4px solid var(--success); }
.special-note.bad { background: #fce8e6; border-left: 4px solid var(--danger); }
.special-note.warning { background: #fef7e0; border-left: 4px solid var(--warning); }
.special-note.info { background: #e8f0fe; border-left: 4px solid var(--info); }
.note-tag-btn { padding: 4px 12px; border: none; border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; }
.pill-btn { padding: 5px 14px; border: none; background: var(--gray-100); border-radius: 9999px; font-size: 12px; font-weight: 500; cursor: pointer; color: var(--gray-600); transition: all 0.2s; }
.pill-btn:hover { background: var(--gray-200); color: var(--gray-800); }
.pill-btn.active { background: var(--primary); color: #fff; }
.veh-row-warning { background-color: #fffbf0 !important; }
.veh-row-danger { background-color: #fef2f2 !important; }

[data-theme="dark"] .drv-section { background: #161a21; border: 1px solid rgba(255,255,255,0.05); }
[data-theme="dark"] .drv-profile-field .value { color: #e2e8f0; }
[data-theme="dark"] .drv-profile-field .label { color: #475569; }
[data-theme="dark"] .drv-info-card { background: #161a21; border-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .drv-info-card h4 { color: #e2e8f0; border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .drv-info-card .drv-field { border-bottom-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .drv-info-card .drv-field .lbl { color: #475569; }
[data-theme="dark"] .drv-info-card .drv-field .val { color: #e2e8f0; }
[data-theme="dark"] .doc-card { border-color: rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); }
[data-theme="dark"] .doc-card .doc-name { color: #e2e8f0; }
[data-theme="dark"] .doc-card .doc-meta { color: #475569; }
[data-theme="dark"] .special-note.good { background: rgba(0,212,170,0.06); border-left-color: #00d4aa; }
[data-theme="dark"] .special-note.bad { background: rgba(239,68,68,0.06); border-left-color: var(--danger); }
[data-theme="dark"] .special-note.warning { background: rgba(245,158,11,0.06); border-left-color: var(--warning); }
[data-theme="dark"] .special-note.info { background: rgba(37,99,235,0.06); border-left-color: var(--info); }

/* Mobile menu button */
.mobile-menu-btn { display: none; width: 38px; height: 38px; border: none; background: var(--gray-100); border-radius: 8px; cursor: pointer; align-items: center; justify-content: center; font-size: 18px; color: var(--gray-600); transition: all 0.15s; }
@media (max-width: 1024px) { .mobile-menu-btn { display: flex; } }
.mobile-menu-btn:hover { background: var(--gray-200); }

/* Theme toggle */
.theme-toggle { width: 38px; height: 38px; border: none; background: var(--gray-100); border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all 0.15s; }
.theme-toggle:hover { background: var(--gray-200); }

/* ===== PUBLIC TRACKING PAGE ===== */
.tracking-page { min-height: 100vh; background: linear-gradient(135deg, #F8F9FA 0%, #e8f0fe 50%, #f3f0ff 100%); }
.tracking-header { background: #fff; border-bottom: 1px solid var(--gray-200); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; }
.tracking-header-logo { font-size: 20px; font-weight: 800; color: var(--gray-900); letter-spacing: -0.03em; }
.tracking-header-logo span { color: var(--primary); }
.tracking-search-section { max-width: 640px; margin: 60px auto 40px; text-align: center; padding: 0 20px; }
.tracking-search-section h1 { font-size: 36px; font-weight: 800; color: var(--gray-900); margin-bottom: 8px; letter-spacing: -0.04em; }
.tracking-search-section p { font-size: 16px; color: var(--gray-500); margin-bottom: 32px; }
.tracking-search-bar { display: flex; gap: 8px; max-width: 500px; margin: 0 auto; }
.tracking-search-bar input { flex: 1; padding: 16px 20px; border: 2px solid var(--gray-200); border-radius: 14px; font-size: 16px; font-family: inherit; background: #fff; transition: all 0.2s; }
.tracking-search-bar input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-glow); }
.tracking-search-bar button { padding: 16px 32px; background: var(--primary); color: #fff; border: none; border-radius: 14px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.2s; }
.tracking-search-bar button:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(37,99,235,0.3); }
.tracking-result { max-width: 800px; margin: 0 auto 40px; padding: 0 20px; }
.tracking-result-card { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); border: 1px solid var(--gray-200); overflow: hidden; animation: fadeInUp 0.4s ease; }
.tracking-result-header { padding: 24px 28px; border-bottom: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.tracking-result-header h2 { font-size: 22px; font-weight: 800; color: var(--gray-900); letter-spacing: -0.03em; }
.tracking-timeline { padding: 28px; }
.tracking-step { display: flex; gap: 16px; position: relative; padding-bottom: 28px; }
.tracking-step:last-child { padding-bottom: 0; }
.tracking-step::before { content: ''; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: var(--gray-200); }
.tracking-step:last-child::before { display: none; }
.tracking-step.completed::before { background: var(--success); }
.tracking-step-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; background: var(--gray-100); border: 2px solid var(--gray-200); position: relative; z-index: 1; }
.tracking-step.completed .tracking-step-icon { background: var(--success-light); border-color: var(--success); }
.tracking-step.current .tracking-step-icon { background: var(--primary-light); border-color: var(--primary); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0.3); } 50% { box-shadow: 0 0 0 8px rgba(37,99,235,0); } }
.tracking-step-content h3 { font-size: 15px; font-weight: 700; color: var(--gray-900); margin-bottom: 2px; }
.tracking-step-content p { font-size: 13px; color: var(--gray-500); }
.tracking-step-content .tracking-time { font-size: 12px; color: var(--gray-400); margin-top: 4px; }
.tracking-details { padding: 0 28px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tracking-detail-card { background: var(--gray-50); border-radius: var(--radius); padding: 16px; }
.tracking-detail-card h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gray-400); margin-bottom: 8px; }
.tracking-detail-card p { font-size: 14px; color: var(--gray-900); font-weight: 500; line-height: 1.5; }
.tracking-pod { padding: 0 28px 28px; }
.tracking-pod-card { background: var(--success-light); border: 1px solid rgba(40,167,69,0.2); border-radius: var(--radius); padding: 16px; display: flex; align-items: center; gap: 12px; }
.tracking-pod-card .pod-icon { font-size: 24px; }
.tracking-pod-card .pod-text { font-size: 14px; color: #155724; font-weight: 600; }
.tracking-pod-card .pod-sub { font-size: 12px; color: #218838; }
@media (max-width: 600px) { .tracking-details { grid-template-columns: 1fr; } .tracking-search-section h1 { font-size: 28px; } }

/* ========== KINETIC Dashboard ========== */
.kd-wrap { background: #0b0e14; border-radius: 20px; padding: 32px; min-height: calc(100vh - 100px); }
.kd-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; }
.kd-title { font-family: 'Inter', sans-serif; font-size: 28px; font-weight: 900; letter-spacing: -0.5px; color: #ecedf6; }
.kd-title span { color: #8ff5ff; text-shadow: 0 0 8px rgba(143,245,255,0.6); }
.kd-subtitle { font-size: 11px; color: #a9abb3; text-transform: uppercase; letter-spacing: 3px; margin-top: 4px; }
.kd-live-pill { display: inline-flex; align-items: center; gap: 8px; background: #1c2028; padding: 8px 16px; border-radius: 12px; }
.kd-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5dd7; animation: pulse 2s infinite; }
.kd-live-text { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: #a9abb3; }
.kd-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 32px; }
.kd-kpi-card { background: #161a21; border-radius: 16px; padding: 24px; position: relative; overflow: hidden; }
.kd-kpi-card .kd-kpi-glow { position: absolute; top: 0; right: 0; width: 120px; height: 120px; border-radius: 50%; margin-right: -48px; margin-top: -48px; filter: blur(40px); opacity: 0.08; transition: opacity 0.3s; }
.kd-kpi-card:hover .kd-kpi-glow { opacity: 0.15; }
.kd-kpi-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: #a9abb3; margin-bottom: 16px; }
.kd-kpi-value { font-size: 42px; font-weight: 900; line-height: 1; }
.kd-kpi-unit { font-size: 20px; font-weight: 700; margin-left: 2px; }
.kd-kpi-trend { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.kd-bento { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-bottom: 32px; }
.kd-map-panel { background: #161a21; border-radius: 20px; overflow: hidden; min-height: 400px; display: flex; flex-direction: column; }
.kd-map-header { padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.05); }
.kd-map-header h3 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #ecedf6; }
.kd-map-body { flex: 1; position: relative; background: #10131a; }
.kd-map-glass { position: absolute; background: rgba(34,38,47,0.7); backdrop-filter: blur(20px); border-radius: 12px; padding: 12px 16px; border: 1px solid rgba(255,255,255,0.05); }
.kd-fleet-panel { background: #161a21; border-radius: 20px; padding: 24px; }
.kd-fleet-panel h3 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #ecedf6; margin-bottom: 24px; }
.kd-fleet-item { margin-bottom: 24px; }
.kd-fleet-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.kd-fleet-name { font-size: 13px; font-weight: 700; text-transform: uppercase; color: #ecedf6; }
.kd-fleet-count { font-size: 10px; color: #a9abb3; text-transform: uppercase; letter-spacing: 1px; }
.kd-fleet-pct { font-size: 11px; font-weight: 900; }
.kd-fleet-bar { height: 6px; width: 100%; background: #22262f; border-radius: 99px; overflow: hidden; }
.kd-fleet-bar-fill { height: 100%; border-radius: 99px; transition: width 0.5s; }
.kd-fleet-alert { margin-top: 8px; padding: 8px 12px; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; line-height: 1.4; }
.kd-table-wrap { background: #161a21; border-radius: 20px; overflow: hidden; margin-bottom: 32px; }
.kd-table-header { padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.05); }
.kd-table-header h3 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #ecedf6; }
.kd-table { width: 100%; border-collapse: collapse; }
.kd-table thead th { padding: 12px 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: #a9abb3; background: rgba(28,32,40,0.5); text-align: left; }
.kd-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.03); transition: background 0.2s; }
.kd-table tbody tr:hover { background: rgba(34,38,47,0.3); }
.kd-table tbody td { padding: 14px 20px; font-size: 13px; color: #ecedf6; }
.kd-table .kd-ref { display: inline-flex; align-items: center; gap: 8px; }
.kd-table .kd-ref-badge { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.kd-table .kd-status { padding: 3px 10px; border-radius: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.kd-actions { display: flex; gap: 12px; margin-bottom: 32px; }
.kd-action-btn { flex: 1; background: #22262f; border: 1px solid rgba(255,255,255,0.05); border-radius: 16px; padding: 20px; cursor: pointer; transition: all 0.2s; text-align: left; }
.kd-action-btn:hover { border-color: rgba(143,245,255,0.3); }
.kd-action-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 18px; }
.kd-action-label { font-size: 12px; font-weight: 700; text-transform: uppercase; color: #ecedf6; }
.kd-action-sub { font-size: 10px; color: #a9abb3; text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
.kd-cal-wrap { background: #161a21; border-radius: 20px; overflow: hidden; }
.kd-cal-header { padding: 20px 24px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.kd-cal-header h3 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #ecedf6; }
@media (max-width: 900px) {
  .kd-kpi-grid { grid-template-columns: 1fr; }
  .kd-bento { grid-template-columns: 1fr; }
  .kd-actions { flex-wrap: wrap; }
  .kd-actions .kd-action-btn { flex: 1 1 calc(50% - 6px); }
}

/* ========== ENHANCED DASHBOARD KPIs ========== */
.dash-kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 20px; }
.dash-kpi-card { background: #fff; border-radius: 12px; padding: 18px; border: 1px solid rgba(0,0,0,0.06); position: relative; overflow: hidden; }
.dash-kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.dash-kpi-card.kpi-blue::before { background: linear-gradient(90deg, #2563EB, #2563EB); }
.dash-kpi-card.kpi-green::before { background: linear-gradient(90deg, #28a745, #28a745); }
.dash-kpi-card.kpi-orange::before { background: linear-gradient(90deg, #e8590c, #fd7e14); }
.dash-kpi-card.kpi-purple::before { background: linear-gradient(90deg, #6F42C1, #7952B3); }
.dash-kpi-card.kpi-red::before { background: linear-gradient(90deg, #dc3545, #dc3545); }
.dash-kpi-card.kpi-teal::before { background: linear-gradient(90deg, #17a2b8, #20c997); }
.dash-kpi-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gray-500); margin-bottom: 6px; }
.dash-kpi-value { font-size: 26px; font-weight: 700; color: var(--gray-900); }
.dash-kpi-sub { font-size: 12px; color: var(--gray-500); margin-top: 4px; }
.dash-kpi-trend { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; margin-top: 6px; }
.dash-kpi-trend.up { background: #d4edda; color: #28a745; }
.dash-kpi-trend.down { background: #f8d7da; color: #dc3545; }
.dash-chart-row { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px; }
.dash-chart-card { background: #fff; border-radius: 12px; border: 1px solid rgba(0,0,0,0.06); padding: 16px; height: 300px; overflow: hidden; display: flex; flex-direction: column; }
.dash-chart-card > div { flex: 1; min-height: 0; }
.dash-chart-card h3 { font-size: 14px; font-weight: 600; color: var(--gray-800); margin-bottom: 12px; }
.dash-driver-util { display: flex; flex-direction: column; gap: 8px; }
.dash-driver-bar { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.dash-driver-bar .bar-wrap { flex: 1; height: 8px; background: var(--gray-100); border-radius: 4px; overflow: hidden; }
.dash-driver-bar .bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
.dash-driver-bar .bar-name { width: 100px; font-weight: 600; color: var(--gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-driver-bar .bar-pct { width: 35px; text-align: right; font-weight: 600; color: var(--gray-600); }

/* ========== POD (PROOF OF DELIVERY) ========== */
.pod-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 10000; display: flex; align-items: center; justify-content: center; }
.pod-modal { background: #fff; border-radius: 14px; width: 600px; max-width: 95vw; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.pod-modal-header { padding: 20px 24px; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: space-between; }
.pod-modal-header h2 { font-size: 18px; font-weight: 700; }
.pod-modal-body { padding: 24px; }
.pod-sig-canvas { border: 2px dashed var(--gray-300); border-radius: 10px; background: #fafbfc; cursor: crosshair; width: 100%; height: 200px; touch-action: none; }
.pod-sig-canvas.signing { border-color: var(--primary); border-style: solid; }
.pod-sig-actions { display: flex; gap: 8px; margin-top: 10px; }
.pod-photo-preview { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.pod-photo-preview img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--gray-200); }
.pod-recipient { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.pod-section-label { font-size: 13px; font-weight: 600; color: var(--gray-700); margin-bottom: 8px; }
.pod-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: #d4edda; border: 1px solid rgba(40,167,69,0.2); border-radius: 8px; font-size: 13px; color: #155724; font-weight: 600; }
.pod-view-section { margin-top: 12px; padding: 16px; background: var(--gray-50); border-radius: 10px; border: 1px solid var(--gray-200); }
.pod-view-section img { max-width: 100%; border-radius: 6px; }

/* ========== CUSTOMER TRACKING PORTAL ========== */
.track-link-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: #e8f0fe; border: 1px solid #b8daff; border-radius: 6px; font-size: 12px; color: #004085; cursor: pointer; }
.track-link-badge:hover { background: #cce5ff; }

/* ========== RECURRING BOOKINGS ========== */
.recur-modal { max-width: 500px; }
.recur-schedule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.recur-day-picker { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.recur-day-btn { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--gray-300); background: #fff; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.recur-day-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.recur-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: #f3f0ff; border: 1px solid #c5b3e6; border-radius: 4px; font-size: 11px; color: #5a32a3; font-weight: 600; }

/* ========== DRIVER AVAILABILITY CALENDAR ========== */
.avail-cal { background: #fff; border-radius: 12px; border: 1px solid rgba(0,0,0,0.06); overflow: hidden; }
.avail-cal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--gray-200); }
.avail-cal-header h3 { font-size: 16px; font-weight: 700; }
.avail-cal-nav { display: flex; gap: 6px; }
.avail-cal-nav button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--gray-300); background: #fff; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.avail-cal-nav button:hover { background: var(--gray-50); }
.avail-cal-grid { display: grid; grid-template-columns: 140px repeat(7, 1fr); font-size: 12px; }
.avail-cal-grid .cal-hdr { padding: 10px 6px; text-align: center; font-weight: 600; background: transparent; color: var(--gray-500); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--gray-200); }
.avail-cal-grid .cal-driver { padding: 8px 10px; font-weight: 600; color: var(--gray-700); border-bottom: 1px solid var(--gray-100); border-right: 1px solid var(--gray-100); background: var(--gray-50); display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avail-cal-grid .cal-cell { padding: 6px; border-bottom: 1px solid var(--gray-100); border-right: 1px solid var(--gray-100); min-height: 50px; }
.cal-booking-chip { padding: 3px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cal-booking-chip.chip-assigned { background: #cce5ff; color: #004085; }
.cal-booking-chip.chip-collected { background: #fff3cd; color: #856404; }
.cal-booking-chip.chip-transit { background: #e0e7ff; color: #3730a3; }
.cal-booking-chip.chip-delivered { background: #d4edda; color: #155724; }
.cal-booking-chip.chip-pending { background: #f3f4f6; color: #374151; }
.avail-legend { display: flex; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--gray-100); flex-wrap: wrap; }
.avail-legend-item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--gray-600); }
.avail-legend-dot { width: 10px; height: 10px; border-radius: 3px; }

/* ========== PROFIT MARGIN ALERTS ========== */
.margin-warn { background: #f8d7da !important; }
.margin-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px; }
.margin-badge.good { background: #d4edda; color: #155724; }
.margin-badge.low { background: #fff3cd; color: #856404; }
.margin-badge.neg { background: #f8d7da; color: #721c24; }

/* ========== BULK ACTIONS ========== */
.bulk-bar { display: none; align-items: center; gap: 12px; padding: 10px 16px; background: linear-gradient(135deg, #004085, #2563EB); color: #fff; border-radius: 10px; margin-bottom: 12px; }
.bulk-bar.active { display: flex; }
.bulk-bar .bulk-count { font-weight: 700; font-size: 14px; }
.bulk-bar .bulk-actions { display: flex; gap: 6px; margin-left: auto; }
.bulk-bar .bulk-btn { padding: 6px 14px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.15); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; }
.bulk-bar .bulk-btn:hover { background: rgba(255,255,255,0.25); }
.bulk-bar .bulk-close { width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(255,255,255,0.2); color: #fff; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.bulk-check { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); }

/* ========== SMS/WHATSAPP SETTINGS ========== */
.msg-channel-toggle { display: flex; gap: 4px; background: var(--gray-100); border-radius: 8px; padding: 3px; }
.msg-channel-btn { padding: 6px 14px; border-radius: 6px; border: none; background: transparent; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--gray-500); }
.msg-channel-btn.active { background: #fff; color: var(--gray-900); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* ========== TARIFF SELECTION BUTTONS (legacy - overridden by wizard layout) ========== */
@keyframes pulse-green { 0%,100% { box-shadow: 0 0 0 0 rgba(40,167,69,0.3); } 50% { box-shadow: 0 0 0 4px rgba(40,167,69,0.15); } }

/* ========== MULTI-STOP SECTIONS ========== */
.bke-extra-stop { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 10px; padding: 16px; margin-top: 12px; position: relative; }
.bke-extra-stop h4 { font-size: 13px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.bke-extra-stop .remove-stop { width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--danger); color: #fff; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* ========== MULTI-DRIVER SECTION ========== */
.bke-extra-driver { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 10px; padding: 16px; margin-top: 12px; position: relative; }
.bke-extra-driver h4 { font-size: 13px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.bke-extra-driver .remove-driver { width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--danger); color: #fff; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* ========== PAGINATION ========== */
.pagination { display:flex; align-items:center; justify-content:center; gap:4px; padding:14px 16px; border-top:1px solid var(--gray-100); }
.pagination .pg-btn { min-width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:6px; border:none; background:#F1F3F5; font-size:13px; font-weight:500; cursor:pointer; color:var(--gray-600); transition:all 0.15s; }
.pagination .pg-btn:hover { background:#E9ECEF; color:var(--gray-900); }
.pagination .pg-btn.active { background:var(--primary); color:#fff; }
.pagination .pg-btn:disabled { opacity:0.4; cursor:default; }
.pagination .pg-dots { font-size:13px; color:var(--gray-400); padding:0 4px; }
.pagination .pg-info { font-size:12px; color:var(--gray-500); margin-left:12px; }

/* ========== CUSTOMER DETAIL PAGE ========== */
.cust-cards-row { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:16px; }
.cust-info-card { background:#fff; border:1px solid rgba(0,0,0,0.06); border-radius:12px; padding:16px 18px; }
.cust-info-card h4 { font-size:14px; font-weight:700; margin-bottom:12px; padding-bottom:8px; border-bottom:2px solid var(--gray-200); }
.cust-info-card .cust-field { display:flex; justify-content:space-between; padding:5px 0; font-size:13px; border-bottom:1px solid var(--gray-100); }
.cust-info-card .cust-field:last-child { border-bottom:none; }
.cust-info-card .cust-field .lbl { color:var(--gray-500); font-weight:500; }
.cust-info-card .cust-field .val { font-weight:600; color:var(--gray-900); max-width:60%; text-align:right; }

/* ========== ADDRESS BOOK PAGE ========== */
.addr-card { display:flex; align-items:center; gap:16px; padding:14px 18px; border:1px solid rgba(0,0,0,0.06); border-radius:12px; margin-bottom:8px; background:#fff; cursor:pointer; transition:all 0.15s; }
.addr-card:hover { background:var(--primary-light); border-color:var(--primary); }
.addr-card .addr-icon { width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,#2563EB,#2563EB); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.addr-card .addr-info { flex:1; }
.addr-card .addr-name { font-weight:700; font-size:14px; color:var(--gray-900); }
.addr-card .addr-detail { font-size:12px; color:var(--gray-500); margin-top:2px; }

/* ========== PRINT DELIVERY NOTE ========== */
@media print {
  body * { visibility: hidden; }
  #print-area, #print-area * { visibility: visible; }
  #print-area { position: absolute; left: 0; top: 0; width: 100%; }
}
.dn-doc { width:210mm; min-height:auto; margin:0 auto; padding:30px 40px; background:#fff; font-family:'Inter',sans-serif; }
.dn-header { display:flex; justify-content:space-between; align-items:flex-start; border-bottom:3px solid #0f172a; padding-bottom:16px; margin-bottom:20px; }
.dn-header h1 { font-size:20px; font-weight:800; }
.dn-header .dn-company { font-size:12px; color:#495057; line-height:1.6; }
.dn-details-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.dn-detail-box { border:1px solid #E9ECEF; border-radius:8px; padding:14px; }
.dn-detail-box h3 { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:#ADB5BD; margin-bottom:8px; }
.dn-detail-box p { font-size:13px; line-height:1.6; margin:0; }
.dn-items-table { width:100%; border-collapse:collapse; margin-bottom:20px; }
.dn-items-table th { background:#0f172a; color:#fff; padding:10px 12px; font-size:11px; text-transform:uppercase; letter-spacing:0.5px; }
.dn-items-table td { padding:10px 12px; border-bottom:1px solid #E9ECEF; font-size:13px; }
.dn-signature { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:30px; padding-top:20px; border-top:2px solid #E9ECEF; }
.dn-sig-box { border:1px solid #E9ECEF; border-radius:8px; padding:16px; }
.dn-sig-box h4 { font-size:11px; text-transform:uppercase; color:#ADB5BD; margin-bottom:12px; }
.dn-sig-line { border-bottom:1px solid #DEE2E6; padding-bottom:6px; margin-bottom:8px; min-height:30px; font-size:13px; }

/* ========== DRIVER SKILLS TABLE ========== */
.skill-badge { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:6px; font-size:11px; font-weight:600; }
.skill-badge.valid { background:#d4edda; color:#28a745; border:1px solid #c3e6cb; }
.skill-badge.expiring { background:#fff3cd; color:#e8590c; border:1px solid #ffeaa7; }
.skill-badge.expired { background:#f8d7da; color:#dc3545; border:1px solid #f5c6cb; }

/* ========== DRIVER ADJUSTMENTS ========== */
.adj-row { display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid var(--gray-100); font-size:13px; }
.adj-row:last-child { border-bottom:none; }
.adj-amount { font-weight:700; min-width:80px; }
.adj-amount.credit { color:#28a745; }
.adj-amount.debit { color:#dc3545; }

/* ========== CUSTOMER PROFILE — KINETIC ETHEREAL ========== */
.cp-page { max-width:1400px; margin:0 auto; }
.cp-back-btn { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:10px; color:#a9abb3; font-size:13px; font-weight:600; cursor:pointer; transition:all 0.25s; margin-bottom:16px; font-family:inherit; }
.cp-back-btn:hover { background:rgba(143,245,255,0.08); color:#8ff5ff; border-color:rgba(143,245,255,0.2); }
.cp-back-btn svg { width:16px; height:16px; }

/* Map Hero */
.cp-map-hero { display:grid; grid-template-columns:1fr 340px; gap:0; background:rgba(34,38,47,0.6); border:1px solid rgba(255,255,255,0.08); border-radius:16px; overflow:hidden; margin-bottom:20px; backdrop-filter:blur(20px); position:relative; }
.cp-map-visual { position:relative; min-height:260px; background:linear-gradient(135deg, #0b0e14 0%, #101520 50%, #0d1218 100%); overflow:hidden; padding:24px; display:flex; flex-direction:column; justify-content:flex-end; }
.cp-map-visual svg { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0.15; }
.cp-map-pin { position:absolute; width:16px; height:16px; }
.cp-map-pin-dot { width:16px; height:16px; background:#8ff5ff; border-radius:50%; box-shadow:0 0 20px rgba(143,245,255,0.6), 0 0 40px rgba(143,245,255,0.3); animation:cpPulse 2s ease-in-out infinite; }
.cp-map-pin-ring { position:absolute; top:50%; left:50%; width:40px; height:40px; margin:-20px 0 0 -20px; border:2px solid rgba(143,245,255,0.3); border-radius:50%; animation:cpRing 2s ease-out infinite; }
@keyframes cpPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.3); } }
@keyframes cpRing { 0% { transform:scale(0.5); opacity:1; } 100% { transform:scale(2); opacity:0; } }
.cp-map-name { position:relative; z-index:2; font-family:'Space Grotesk',sans-serif; font-size:26px; font-weight:700; color:#ecedf6; margin-bottom:4px; }
.cp-map-location { position:relative; z-index:2; font-size:13px; color:#8ff5ff; font-weight:500; display:flex; align-items:center; gap:6px; }
.cp-map-info { padding:24px; display:flex; flex-direction:column; gap:14px; background:rgba(22,26,33,0.8); border-left:1px solid rgba(255,255,255,0.08); }
.cp-map-info-item { display:flex; flex-direction:column; gap:2px; }
.cp-map-info-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:#6b6e76; }
.cp-map-info-value { font-size:14px; font-weight:600; color:#ecedf6; }
.cp-map-info-divider { height:1px; background:rgba(255,255,255,0.06); }
.cp-map-status { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:20px; font-size:11px; font-weight:700; }
.cp-map-status.active { background:rgba(52,168,83,0.15); color:#2dd37a; border:1px solid rgba(52,168,83,0.3); }
.cp-map-status.on-stop { background:rgba(220,38,38,0.15); color:#ff6b6b; border:1px solid rgba(220,38,38,0.3); }

/* KPI Cards */
.cp-kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.cp-kpi { background:rgba(34,38,47,0.6); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:20px; position:relative; overflow:hidden; backdrop-filter:blur(20px); transition:all 0.3s; cursor:default; }
.cp-kpi::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; }
.cp-kpi:nth-child(1)::before { background:linear-gradient(90deg,#8ff5ff,#6bd5e1); }
.cp-kpi:nth-child(2)::before { background:linear-gradient(90deg,#34a853,#2dd37a); }
.cp-kpi:nth-child(3)::before { background:linear-gradient(90deg,#ac89ff,#8b6bff); }
.cp-kpi:nth-child(4)::before { background:linear-gradient(90deg,#ff5dd7,#ff3bbf); }
.cp-kpi:hover { border-color:rgba(143,245,255,0.15); transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,0,0,0.3); }
.cp-kpi-value { font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:700; line-height:1.2; margin-bottom:4px; }
.cp-kpi:nth-child(1) .cp-kpi-value { color:#8ff5ff; }
.cp-kpi:nth-child(2) .cp-kpi-value { color:#2dd37a; }
.cp-kpi:nth-child(3) .cp-kpi-value { color:#ac89ff; }
.cp-kpi:nth-child(4) .cp-kpi-value { color:#ff5dd7; }
.cp-kpi-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:#a9abb3; }
.cp-kpi-sub { font-size:11px; color:#8a8d95; margin-top:6px; }

/* Actions Bar */
.cp-actions-bar { display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.cp-action-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:10px; font-size:13px; font-weight:600; cursor:pointer; transition:all 0.25s; border:1px solid; font-family:inherit; }
.cp-action-btn.primary { background:linear-gradient(135deg,#8ff5ff,#6bd5e1); color:#0b0e14; border-color:transparent; box-shadow:0 0 20px rgba(143,245,255,0.2); }
.cp-action-btn.primary:hover { box-shadow:0 0 30px rgba(143,245,255,0.4); transform:translateY(-1px); }
.cp-action-btn.secondary { background:rgba(172,137,255,0.1); color:#ac89ff; border-color:rgba(172,137,255,0.3); }
.cp-action-btn.secondary:hover { background:rgba(172,137,255,0.2); }
.cp-action-btn.outline { background:rgba(255,255,255,0.04); color:#a9abb3; border-color:rgba(255,255,255,0.1); }
.cp-action-btn.outline:hover { background:rgba(255,255,255,0.08); color:#ecedf6; }
.cp-action-btn svg { width:16px; height:16px; }

/* Tabs */
.cp-tabs { display:flex; gap:4px; border-bottom:1px solid rgba(255,255,255,0.08); margin-bottom:20px; overflow-x:auto; }
.cp-tab { padding:12px 22px; border:none; background:none; font-size:13px; font-weight:600; color:#6b6e76; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all 0.2s; white-space:nowrap; font-family:inherit; }
.cp-tab:hover { color:#a9abb3; }
.cp-tab.active { color:#8ff5ff; border-bottom-color:#8ff5ff; text-shadow:0 0 12px rgba(143,245,255,0.4); }
.cp-tab-panel { display:none; }
.cp-tab-panel.active { display:block; }

/* Overview Grid */
.cp-overview-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cp-section { background:rgba(34,38,47,0.6); border:1px solid rgba(255,255,255,0.08); border-radius:14px; overflow:hidden; backdrop-filter:blur(20px); }
.cp-section-header { padding:12px 20px; font-size:13px; font-weight:600; color:#ecedf6; border-bottom:1px solid rgba(255,255,255,0.06); border-left:3px solid; display:flex; align-items:center; justify-content:space-between; }
.cp-section-header.cp-cyan { border-left-color:#8ff5ff; }
.cp-section-header.cp-purple { border-left-color:#ac89ff; }
.cp-section-header.cp-green { border-left-color:#2dd37a; }
.cp-section-header.cp-orange { border-left-color:#f59e0b; }
.cp-section-header.cp-teal { border-left-color:#14b8a6; }
.cp-section-header.cp-pink { border-left-color:#ff5dd7; }
.cp-section-header.cp-dark { border-left-color:#64748b; }
.cp-section-body { padding:16px 20px; }
.cp-field { margin-bottom:12px; }
.cp-field:last-child { margin-bottom:0; }
.cp-field label { display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#8a8d95; margin-bottom:4px; }
.cp-field input, .cp-field select, .cp-field textarea { width:100%; padding:9px 14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:8px; font-size:13px; color:#ecedf6; font-family:inherit; transition:all 0.2s; }
.cp-field input:focus, .cp-field select:focus, .cp-field textarea:focus { border-color:rgba(143,245,255,0.3); outline:none; box-shadow:0 0 0 3px rgba(143,245,255,0.08); }
.cp-field textarea { min-height:60px; resize:vertical; }
.cp-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cp-check-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cp-check-item { display:flex; align-items:center; gap:8px; padding:8px 12px; background:rgba(255,255,255,0.03); border-radius:8px; border:1px solid rgba(255,255,255,0.04); font-size:13px; color:#a9abb3; transition:all 0.2s; }
.cp-check-item:hover { background:rgba(255,255,255,0.05); }
.cp-check-item input[type=checkbox] { width:18px; height:18px; cursor:pointer; accent-color:#8ff5ff; }
.cp-check-item label { margin:0; cursor:pointer; font-weight:400; }
.cp-field-static { font-size:13px; font-weight:500; color:#ecedf6; padding:9px 0; }

/* Glass Table */
.cp-table-wrap { overflow-x:auto; }
.cp-table { width:100%; border-collapse:collapse; font-size:13px; }
.cp-table th { text-align:left; padding:10px 14px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#6b6e76; border-bottom:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); }
.cp-table td { padding:10px 14px; border-bottom:1px solid rgba(255,255,255,0.04); color:#a9abb3; }
.cp-table tr { transition:background 0.15s; cursor:pointer; }
.cp-table tr:hover { background:rgba(143,245,255,0.03); }
.cp-table .cp-ref { color:#8ff5ff; font-weight:700; }

/* Contact Cards */
.cp-contact-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; }
.cp-contact-card { background:rgba(34,38,47,0.6); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:18px; backdrop-filter:blur(20px); transition:all 0.25s; }
.cp-contact-card:hover { border-color:rgba(143,245,255,0.15); transform:translateY(-2px); }
.cp-contact-name { font-size:15px; font-weight:700; color:#ecedf6; margin-bottom:2px; }
.cp-contact-role { font-size:11px; font-weight:600; color:#ac89ff; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px; }
.cp-contact-detail { font-size:12px; color:#a9abb3; display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.cp-contact-detail svg { width:14px; height:14px; color:#6b6e76; flex-shrink:0; }

/* Address Cards */
.cp-addr-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.cp-addr-card { background:rgba(34,38,47,0.6); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:18px; backdrop-filter:blur(20px); transition:all 0.25s; position:relative; overflow:hidden; }
.cp-addr-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#8ff5ff,#ac89ff); }
.cp-addr-card:hover { border-color:rgba(143,245,255,0.15); transform:translateY(-2px); }
.cp-addr-company { font-size:14px; font-weight:700; color:#ecedf6; margin-bottom:6px; }
.cp-addr-line { font-size:12px; color:#a9abb3; margin-bottom:3px; display:flex; align-items:center; gap:6px; }
.cp-addr-line svg { width:14px; height:14px; color:#6b6e76; flex-shrink:0; }

/* AI Insights */
.cp-insights { background:rgba(34,38,47,0.6); border:1px solid rgba(172,137,255,0.2); border-radius:14px; padding:20px; backdrop-filter:blur(20px); margin-bottom:20px; position:relative; overflow:hidden; }
.cp-insights::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#ac89ff,#ff5dd7); }
.cp-insights-title { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:#ac89ff; margin-bottom:14px; }
.cp-insights-title svg { width:18px; height:18px; }
.cp-insight-items { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:10px; }
.cp-insight-item { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; background:rgba(172,137,255,0.06); border:1px solid rgba(172,137,255,0.1); border-radius:10px; font-size:12px; color:#a9abb3; line-height:1.5; }
.cp-insight-item .cp-insight-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:rgba(172,137,255,0.15); color:#ac89ff; }

/* Status Badges in table */
.cp-badge { display:inline-block; padding:3px 10px; border-radius:6px; font-size:11px; font-weight:600; }
.cp-badge-booked { background:rgba(143,245,255,0.12); color:#8ff5ff; }
.cp-badge-allocated { background:rgba(59,130,246,0.15); color:#60a5fa; }
.cp-badge-in-progress { background:rgba(245,158,11,0.15); color:#fbbf24; }
.cp-badge-delivered { background:rgba(52,168,83,0.15); color:#2dd37a; }
.cp-badge-completed { background:rgba(52,168,83,0.15); color:#2dd37a; }
.cp-badge-cancelled { background:rgba(220,38,38,0.15); color:#ff6b6b; }
.cp-badge-invoiced { background:rgba(172,137,255,0.15); color:#ac89ff; }
.cp-badge-pod { background:rgba(14,184,166,0.15); color:#2dd4bf; }

/* Responsive */
@media(max-width:1100px) { .cp-overview-grid { grid-template-columns:1fr; } .cp-map-hero { grid-template-columns:1fr; } .cp-kpi-row { grid-template-columns:1fr 1fr; } }
@media(max-width:768px) { .cp-kpi-row { grid-template-columns:1fr; } .cp-actions-bar { flex-direction:column; } }

/* ========== PAGINATION ========== */
.pagination { display:flex; gap:4px; justify-content:center; padding:16px 0; align-items:center; }
.pagination button { padding:6px 12px; border:none; background:#f1f3f5; border-radius:6px; font-size:12px; font-weight:500; cursor:pointer; transition:all 0.15s; color:var(--gray-600); }
.pagination button:hover:not(:disabled):not(.active) { background:#e8eaed; color:var(--gray-900); }
.pagination button.active { background:var(--primary); color:#fff; }
.pagination button:disabled { opacity:0.4; cursor:default; }
.pagination .pg-ellipsis { padding:0 4px; font-size:12px; color:var(--gray-400); }
.pagination .pg-info { font-size:12px; color:var(--gray-500); margin-left:12px; }

/* ========== PORTAL PREVIEW ========== */
/* ========== PORTAL PREVIEW — KINETIC ETHEREAL DARK ========== */
.portal-preview-banner { background:rgba(143,245,255,0.06); border:1px solid rgba(143,245,255,0.18); border-radius:12px; padding:12px 18px; margin-bottom:18px; font-size:13px; font-weight:600; color:#8ff5ff; display:flex; align-items:center; gap:10px; backdrop-filter:blur(8px); }
.portal-wrap { background:#0b0e14; border-radius:16px; box-shadow:0 8px 32px rgba(0,0,0,0.5); overflow:hidden; border:1px solid rgba(255,255,255,0.08); }
.portal-topbar { background:#161a21; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; color:#ecedf6; border-bottom:1px solid rgba(255,255,255,0.08); }
.portal-topbar .portal-logo-box { width:36px; height:36px; background:linear-gradient(135deg,#8ff5ff,#ac89ff); border-radius:10px; display:flex; align-items:center; justify-content:center; color:#0b0e14; font-weight:700; font-size:14px; box-shadow:0 0 15px rgba(143,245,255,0.4); flex-shrink:0; margin-right:12px; }
.portal-topbar .portal-brand { display:flex; align-items:center; }
.portal-topbar .portal-brand-text { display:flex; flex-direction:column; }
.portal-topbar .portal-brand-name { font-family:'Space Grotesk',sans-serif; font-size:16px; font-weight:700; color:#ecedf6; letter-spacing:-0.3px; line-height:1.2; }
.portal-topbar .portal-brand-sub { font-size:11px; color:#a9abb3; font-weight:500; }
.portal-topbar .portal-logout { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); color:#a9abb3; padding:7px 16px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; transition:all 0.2s; }
.portal-topbar .portal-logout:hover { background:rgba(255,113,108,0.15); color:#ff716c; border-color:rgba(255,113,108,0.3); }
.portal-body { padding:24px; background:#0b0e14; }
.portal-hero { margin-bottom:24px; }
.portal-hero h1 { font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:700; color:#ecedf6; margin-bottom:4px; }
.portal-hero .portal-hero-company { color:#8ff5ff; }
.portal-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; }
.portal-kpi { background:rgba(34,38,47,0.6); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:18px; text-align:center; backdrop-filter:blur(20px); position:relative; overflow:hidden; transition:all 0.25s; }
.portal-kpi::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:12px 12px 0 0; }
.portal-kpi:nth-child(1)::before { background:linear-gradient(90deg,#8ff5ff,#6bd5e1); }
.portal-kpi:nth-child(2)::before { background:linear-gradient(90deg,#34a853,#2dd37a); }
.portal-kpi:nth-child(3)::before { background:linear-gradient(90deg,#ac89ff,#8b6bff); }
.portal-kpi:nth-child(4)::before { background:linear-gradient(90deg,#ff5dd7,#ff3bbf); }
.portal-kpi:hover { border-color:rgba(143,245,255,0.15); box-shadow:0 0 30px rgba(143,245,255,0.06); transform:translateY(-2px); }
.portal-kpi .pk-val { font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:700; line-height:1.2; }
.portal-kpi:nth-child(1) .pk-val { color:#8ff5ff; }
.portal-kpi:nth-child(2) .pk-val { color:#34a853; }
.portal-kpi:nth-child(3) .pk-val { color:#ac89ff; }
.portal-kpi:nth-child(4) .pk-val { color:#ff5dd7; }
.portal-kpi .pk-label { font-size:10px; font-weight:700; text-transform:uppercase; color:#6b6e76; letter-spacing:1.2px; margin-top:4px; }
.portal-tabs { display:flex; gap:4px; margin-bottom:18px; border-bottom:1px solid rgba(255,255,255,0.08); padding-bottom:0; }
.portal-tab { padding:10px 20px; border:none; background:none; font-size:13px; font-weight:600; color:#6b6e76; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all 0.2s; font-family:inherit; }
.portal-tab:hover { color:#a9abb3; }
.portal-tab.active { color:#8ff5ff; border-bottom-color:#8ff5ff; text-shadow:0 0 12px rgba(143,245,255,0.4); }
.portal-tab-content { display:none; }
.portal-tab-content.active { display:block; }
.portal-create-btn { background:linear-gradient(135deg,#8ff5ff,#6bd5e1); color:#0b0e14; border:none; padding:12px 24px; border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; margin-bottom:18px; transition:all 0.25s; box-shadow:0 0 20px rgba(143,245,255,0.2); font-family:inherit; }
.portal-create-btn:hover { transform:translateY(-2px); box-shadow:0 4px 24px rgba(143,245,255,0.35); }
.portal-job-form { background:rgba(34,38,47,0.6); border:1px solid rgba(143,245,255,0.12); border-radius:14px; padding:22px; margin-bottom:18px; display:none; backdrop-filter:blur(20px); }
.portal-job-form.active { display:block; }
.portal-job-form .pjf-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.portal-job-form label { display:block; font-size:11px; font-weight:700; color:#6b6e76; margin-bottom:5px; text-transform:uppercase; letter-spacing:0.8px; }
.portal-job-form input, .portal-job-form textarea, .portal-job-form select { width:100%; padding:9px 13px; border:1px solid rgba(255,255,255,0.08); border-radius:8px; font-size:13px; font-family:inherit; background:#1c2028; color:#ecedf6; transition:border-color 0.2s; }
.portal-job-form input:focus, .portal-job-form textarea:focus, .portal-job-form select:focus { outline:none; border-color:rgba(143,245,255,0.4); box-shadow:0 0 12px rgba(143,245,255,0.1); }
.portal-job-form input::placeholder, .portal-job-form textarea::placeholder { color:#6b6e76; }
.portal-vehicle-pills { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.portal-vehicle-pill { padding:7px 16px; border:1px solid rgba(255,255,255,0.1); border-radius:9999px; font-size:12px; font-weight:600; cursor:pointer; background:rgba(255,255,255,0.03); color:#a9abb3; transition:all 0.2s; }
.portal-vehicle-pill:hover { border-color:rgba(143,245,255,0.25); color:#8ff5ff; }
.portal-vehicle-pill.active { background:rgba(143,245,255,0.15); color:#8ff5ff; border-color:rgba(143,245,255,0.35); box-shadow:0 0 12px rgba(143,245,255,0.15); }
.portal-table { width:100%; border-collapse:collapse; font-size:13px; }
.portal-table th { background:#1c2028; padding:11px 12px; text-align:left; font-weight:700; color:#6b6e76; border-bottom:1px solid rgba(255,255,255,0.08); font-size:10px; text-transform:uppercase; letter-spacing:1px; }
.portal-table td { padding:11px 12px; border-bottom:1px solid rgba(255,255,255,0.04); color:#a9abb3; }
.portal-table tr:hover { background:rgba(143,245,255,0.03); }
.portal-table .badge, .portal-table [class*="pp-badge"] { display:inline-block; padding:3px 10px; border-radius:9999px; font-size:11px; font-weight:600; }
.pp-badge-active { background:rgba(143,245,255,0.12); color:#8ff5ff; border:1px solid rgba(143,245,255,0.2); }
.pp-badge-delivered { background:rgba(52,168,83,0.12); color:#34a853; border:1px solid rgba(52,168,83,0.2); }
.pp-badge-pending { background:rgba(255,152,0,0.12); color:#ff9800; border:1px solid rgba(255,152,0,0.2); }
.pp-badge-invoiced { background:rgba(172,137,255,0.12); color:#ac89ff; border:1px solid rgba(172,137,255,0.2); }
.pp-badge-cancelled { background:rgba(255,113,108,0.12); color:#ff716c; border:1px solid rgba(255,113,108,0.2); }
.pp-badge-draft { background:rgba(107,110,118,0.15); color:#6b6e76; border:1px solid rgba(107,110,118,0.2); }
.pp-badge-paid { background:rgba(52,168,83,0.12); color:#34a853; border:1px solid rgba(52,168,83,0.2); }
.pp-badge-overdue { background:rgba(255,113,108,0.12); color:#ff716c; border:1px solid rgba(255,113,108,0.2); }
.pp-badge-sent { background:rgba(37,99,235,0.12); color:#2563EB; border:1px solid rgba(37,99,235,0.2); }
.portal-track-btn { background:transparent; color:#8ff5ff; border:1px solid rgba(143,245,255,0.3); padding:5px 14px; border-radius:8px; font-size:11px; font-weight:600; cursor:pointer; transition:all 0.2s; }
.portal-track-btn:hover { background:rgba(143,245,255,0.1); box-shadow:0 0 10px rgba(143,245,255,0.2); }
.portal-cancel-btn { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); padding:10px 20px; border-radius:10px; font-size:13px; font-weight:600; cursor:pointer; color:#a9abb3; transition:all 0.2s; font-family:inherit; }
.portal-cancel-btn:hover { background:rgba(255,255,255,0.1); color:#ecedf6; }

/* ========== JOB REQUESTS ========== */
.jr-filter-pills { display:flex; gap:6px; margin-bottom:16px; }
.jr-pill { padding:6px 16px; border-radius:9999px; font-size:12px; font-weight:600; cursor:pointer; border:none; background:#f1f3f5; color:var(--gray-600); transition:all 0.15s; }
.jr-pill:hover { border-color:var(--primary); color:var(--primary); }
.jr-pill.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.jr-accept-btn { background:#28a745; color:#fff; border:none; padding:4px 10px; border-radius:9999px; font-size:11px; font-weight:600; cursor:pointer; margin-right:4px; }
.jr-decline-btn { background:#dc3545; color:#fff; border:none; padding:4px 10px; border-radius:9999px; font-size:11px; font-weight:600; cursor:pointer; }

/* ========== SETTINGS TABS ========== */
.settings-tabs { display:flex; gap:4px; margin-bottom:16px; border-bottom:2px solid var(--gray-200); padding-bottom:0; flex-wrap:wrap; }
.settings-tab { padding:10px 20px; border:none; background:none; font-size:13px; font-weight:600; color:var(--gray-500); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all 0.15s; }
.settings-tab:hover { color:var(--gray-700); }
.settings-tab.active { color:var(--primary); border-bottom-color:var(--primary); }
.settings-tab-content { display:none; }
.settings-tab-content.active { display:block; }

/* ========== EMAIL CAMPAIGNS ========== */
.camp-editor { display:grid; grid-template-columns:1fr 380px; gap:16px; }
.camp-preview { background:#fff; border:1px solid var(--gray-200); border-radius:10px; padding:20px; max-height:600px; overflow-y:auto; }
.camp-recipient-list { max-height:300px; overflow-y:auto; border:1px solid var(--gray-200); border-radius:8px; }
.camp-recipient-item { display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--gray-100); font-size:13px; }
.camp-recipient-item:hover { background:var(--gray-50); }
.camp-group-badge { display:inline-flex; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600; background:#e8f0fe; color:#2563EB; border:1px solid #b8daff; }
.camp-template-card { padding:12px; border:2px solid var(--gray-200); border-radius:8px; cursor:pointer; transition:all 0.2s; }
.camp-template-card:hover { border-color:var(--primary); }
.camp-template-card.active { border-color:var(--primary); background:#e8f0fe; }
.camp-status-draft { background:#fff3cd; color:#856404; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600; }
.camp-status-sent { background:#d4edda; color:#155724; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600; }
.camp-status-scheduled { background:#e0e7ff; color:#3730a3; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600; }
.camp-mode-toggle { display:inline-flex; background:var(--gray-100); border-radius:8px; overflow:hidden; border:1px solid var(--gray-200); }
.camp-mode-btn { padding:6px 16px; font-size:12px; font-weight:600; border:none; background:none; cursor:pointer; color:var(--gray-500); transition:all 0.15s; }
.camp-mode-btn.active { background:var(--primary); color:#fff; }
.camp-filter-tabs { display:flex; gap:4px; margin-bottom:16px; }
.camp-filter-tab { padding:7px 16px; border-radius:8px; border:1px solid var(--gray-200); background:#fff; font-size:12px; font-weight:600; cursor:pointer; color:var(--gray-600); transition:all 0.15s; }
.camp-filter-tab:hover { border-color:var(--primary); color:var(--primary); }
.camp-filter-tab.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.camp-schedule-row { display:flex; gap:8px; align-items:center; margin-top:8px; }

/* ===== DATA IMPORT (SLM) ===== */
.import-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.import-card { border-radius:12px; border:1px solid rgba(0,0,0,0.06); background:#fff; overflow:hidden; }
.import-card-header { padding:14px 18px; font-weight:700; font-size:14px; color:var(--gray-800); background:transparent; border-bottom:1px solid rgba(0,0,0,0.06); border-left:3px solid; }
.import-header-bookings { border-left-color:#2563EB; }
.import-header-customers { border-left-color:#28a745; }
.import-header-drivers { border-left-color:#fd7e14; }
.import-header-contacts { border-left-color:#7952B3; }
.import-card-body { padding:18px; }
.import-status { margin-bottom:10px; }
.import-status:empty { display:none; }
.import-status .import-result { padding:10px 14px; border-radius:8px; font-size:13px; font-weight:600; }
.import-status .import-result.success { background:#d4edda; color:#28a745; border:1px solid #c3e6cb; }
.import-status .import-result.info { background:#e8f0fe; color:#2563EB; border:1px solid #b8daff; }

/* Import mapping modal */
.import-mapping-table { width:100%; border-collapse:collapse; margin-bottom:16px; }
.import-mapping-table th { text-align:left; padding:8px 10px; font-size:12px; font-weight:700; color:var(--gray-500); text-transform:uppercase; letter-spacing:0.5px; border-bottom:2px solid var(--gray-200); }
.import-mapping-table td { padding:8px 10px; border-bottom:1px solid var(--gray-100); font-size:13px; }
.import-mapping-table select { width:100%; padding:6px 8px; border:1px solid var(--gray-200); border-radius:6px; font-size:13px; background:#fff; }
.import-mapping-table .field-label { font-weight:600; color:var(--gray-700); }

.import-preview-table { width:100%; border-collapse:collapse; margin-top:12px; font-size:12px; }
.import-preview-table th { background:var(--gray-50); padding:6px 8px; text-align:left; font-weight:600; color:var(--gray-600); border-bottom:1px solid var(--gray-200); white-space:nowrap; }
.import-preview-table td { padding:6px 8px; border-bottom:1px solid var(--gray-100); color:var(--gray-600); max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.import-progress { width:100%; height:6px; background:var(--gray-100); border-radius:3px; margin:12px 0; overflow:hidden; }
.import-progress-bar { height:100%; background:var(--primary); border-radius:3px; transition:width 0.3s; }
.import-record-count { text-align:center; padding:10px; font-size:14px; font-weight:600; color:var(--gray-600); background:var(--gray-50); border-radius:8px; margin-bottom:12px; }

/* ========== DARK MODE: JOB VIEW PAGE ========== */
[data-theme="dark"] .job-view-page { background: #0b0e14; }
[data-theme="dark"] .jv-header { background: #10131a; border-bottom: 1px solid rgba(255,255,255,0.06); }
[data-theme="dark"] .jv-header-left h1 { color: #f1f5f9; }
[data-theme="dark"] .jv-back-btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); color: #e2e8f0; }
[data-theme="dark"] .jv-back-btn:hover { background: rgba(255,255,255,0.12); }
[data-theme="dark"] .jv-actions .jv-act { background: transparent; border-color: rgba(255,255,255,0.1); color: #e2e8f0; }
[data-theme="dark"] .jv-actions .jv-act:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
[data-theme="dark"] .jv-body { background: #0b0e14; }
[data-theme="dark"] .jv-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); backdrop-filter: blur(12px); }
[data-theme="dark"] .jv-card-header { color: #64748b; border-bottom-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .jv-card-body { color: #94a3b8; }
[data-theme="dark"] .jv-field { border-bottom-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .jv-field-label { color: #64748b; }
[data-theme="dark"] .jv-field-value { color: #e2e8f0; }
[data-theme="dark"] .jv-contact-name { color: #8ff5ff; }
[data-theme="dark"] .jv-contact-email { color: #8ff5ff; }
[data-theme="dark"] .jv-address-line { color: #94a3b8; }
[data-theme="dark"] .jv-alert-green { background: rgba(0,212,170,0.06); color: #00d4aa; border-bottom-color: rgba(0,212,170,0.1); }
[data-theme="dark"] .jv-alert-orange { background: rgba(245,158,11,0.06); color: #fbbf24; border-bottom-color: rgba(245,158,11,0.1); }
/* Dark mode: Shipment Journey */
[data-theme="dark"] .jv-journey { background: #10131a; border: 1px solid rgba(255,255,255,0.06); }
[data-theme="dark"] .jv-journey-title { color: #e2e8f0; }
[data-theme="dark"] .jv-journey-line { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .jv-journey-line-fill { background: linear-gradient(90deg, #00d4aa, #8ff5ff); box-shadow: 0 0 12px rgba(0,212,170,0.4); }
[data-theme="dark"] .jv-journey-dot { border-color: rgba(255,255,255,0.1); background: #0b0e14; }
[data-theme="dark"] .jv-journey-dot.done { background: #00d4aa; border-color: #00d4aa; box-shadow: 0 0 16px rgba(0,212,170,0.5); }
[data-theme="dark"] .jv-journey-dot.active { border-color: #8ff5ff; box-shadow: 0 0 20px rgba(143,245,255,0.4); animation: journey-pulse-dark 2s infinite; }
[data-theme="dark"] .jv-journey-dot.done svg { stroke: #0b0e14; }
[data-theme="dark"] .jv-journey-dot svg { stroke: rgba(255,255,255,0.2); }
[data-theme="dark"] .jv-journey-label { color: rgba(255,255,255,0.4); }
[data-theme="dark"] .jv-journey-step.done .jv-journey-label { color: #00d4aa; }
[data-theme="dark"] .jv-journey-step.active .jv-journey-label { color: #8ff5ff; }
[data-theme="dark"] .jv-journey-time { color: rgba(255,255,255,0.3); }
[data-theme="dark"] .jv-journey-step.done .jv-journey-time { color: #e2e8f0; }
@keyframes journey-pulse-dark { 0%, 100% { box-shadow: 0 0 20px rgba(143,245,255,0.4); } 50% { box-shadow: 0 0 30px rgba(143,245,255,0.7), 0 0 60px rgba(143,245,255,0.2); } }
[data-theme="dark"] .jv-stage-btn { border-color: rgba(255,255,255,0.1); color: #94a3b8; }
[data-theme="dark"] .jv-journey-step.done .jv-stage-btn { border-color: rgba(0,212,170,0.3); color: #00d4aa; }
[data-theme="dark"] .jv-stage-note { color: #64748b; }
[data-theme="dark"] .jv-journey-step.done .jv-stage-note { color: #00d4aa; }
/* Dark mode: Route Visualization */
[data-theme="dark"] .jv-route { background: #10131a; border: 1px solid rgba(255,255,255,0.06); }
[data-theme="dark"] .jv-route-title { color: #e2e8f0; }
[data-theme="dark"] .jv-route-info { color: #94a3b8; }
[data-theme="dark"] .jv-route-map-placeholder { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.06); color: #475569; }
/* Dark mode: Notes & status */
[data-theme="dark"] .jv-notes-text { color: #94a3b8; }
[data-theme="dark"] .jv-notes-file { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); color: #94a3b8; }
[data-theme="dark"] .jv-notes-upload-btn { background: transparent; border-color: rgba(255,255,255,0.1); color: #94a3b8; }
[data-theme="dark"] .jv-history-item { color: #64748b; border-bottom-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .jv-status-row { background: #10131a; border-top-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .jv-status-btn { background: transparent; border-color: rgba(255,255,255,0.1); color: #94a3b8; }
[data-theme="dark"] .jv-status-btn:hover { border-color: #00d4aa; color: #00d4aa; }
[data-theme="dark"] .jv-status-btn.active { background: linear-gradient(135deg, #00d4aa, #8ff5ff); color: #0b0e14; border-color: #00d4aa; }

/* ========== DARK MODE: BOOKING EDIT HEADER ========== */
[data-theme="dark"] .booking-edit-page { background: #0b0e14; }
[data-theme="dark"] .bke-header { background: #10131a; border-bottom-color: rgba(255,255,255,0.05); }

/* Customer Profile uses KINETIC dark theme by default — no dark overrides needed */

/* ========== DARK MODE: CONTACT VIEW SECTIONS ========== */
[data-theme="dark"] .cv-section { background: #10131a; border-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .cv-section-header { color: #e2e8f0; background: transparent; border-bottom-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .cv-section-body { color: #94a3b8; }
[data-theme="dark"] .cv-field label { color: #64748b; }
[data-theme="dark"] .cv-field input, [data-theme="dark"] .cv-field select, [data-theme="dark"] .cv-field textarea { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #e2e8f0; }
[data-theme="dark"] .cv-avatar { background: linear-gradient(135deg, #2563eb, #7c3aed); }
[data-theme="dark"] .cv-header-info h2 { color: #e2e8f0; }
[data-theme="dark"] .cv-header-info p { color: #64748b; }
[data-theme="dark"] .cv-bookings-table th { background: transparent; color: #64748b; border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .cv-bookings-table td { border-bottom-color: rgba(255,255,255,0.04); color: #94a3b8; }
[data-theme="dark"] .cv-notif-item { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .cv-notif-item.active { background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.15); }

/* ========== DARK MODE: IMPORT CARDS ========== */
[data-theme="dark"] .import-card { background: #10131a; border-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .import-card-header { color: #e2e8f0; background: transparent; border-bottom-color: rgba(255,255,255,0.05); }

/* ========== DARK MODE: INVOICES TABLE ========== */
[data-theme="dark"] .invoices-table { background: #10131a; border-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .invoices-table thead th { background: transparent; color: #64748b; border-bottom-color: rgba(255,255,255,0.06); }

/* ========== DARK MODE: AVAILABILITY CALENDAR ========== */
[data-theme="dark"] .avail-cal { background: #10131a; border-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .avail-cal-header { border-bottom-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .avail-cal-header h3 { color: #e2e8f0; }
[data-theme="dark"] .avail-cal-grid .cal-hdr { color: #64748b; border-bottom-color: rgba(255,255,255,0.06); background: transparent; }
[data-theme="dark"] .avail-cal-grid .cal-driver { color: #94a3b8; border-bottom-color: rgba(255,255,255,0.04); border-right-color: rgba(255,255,255,0.04); background: rgba(255,255,255,0.02); }
[data-theme="dark"] .avail-cal-grid .cal-cell { border-bottom-color: rgba(255,255,255,0.04); border-right-color: rgba(255,255,255,0.04); }

/* ========== DARK MODE: DASHBOARD KPIs ========== */
[data-theme="dark"] .dash-kpi-card { background: #10131a; border-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .dash-kpi-label { color: #64748b; }
[data-theme="dark"] .dash-kpi-value { color: #e2e8f0; }
[data-theme="dark"] .dash-kpi-sub { color: #475569; }
[data-theme="dark"] .dash-chart-card { background: #10131a; border-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .dash-chart-card h3 { color: #e2e8f0; }
[data-theme="dark"] .dash-driver-bar .bar-name { color: #94a3b8; }
[data-theme="dark"] .dash-driver-bar .bar-wrap { background: rgba(255,255,255,0.04); }

/* ========== DARK MODE: ADDRESS BOOK ========== */
[data-theme="dark"] .addr-card { background: #10131a; border-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .addr-card:hover { border-color: rgba(0,212,170,0.2); background: rgba(0,212,170,0.04); }
[data-theme="dark"] .addr-card .addr-name { color: #e2e8f0; }
[data-theme="dark"] .addr-card .addr-detail { color: #64748b; }

/* ========== DARK MODE: DIRECTORY CARDS ========== */
[data-theme="dark"] .dir-card { background: #10131a; border-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .dir-card h3 { color: #e2e8f0; }

/* ========== DARK MODE: POD MODAL ========== */
[data-theme="dark"] .pod-modal { background: #161a21; border: 1px solid rgba(255,255,255,0.06); }
[data-theme="dark"] .pod-modal-header { border-bottom-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .pod-modal-header h2 { color: #e2e8f0; }
[data-theme="dark"] .pod-sig-canvas { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }

/* ========== DARK MODE: MODAL ENHANCEMENTS ========== */
[data-theme="dark"] .modal { background: #10131a; border: 1px solid rgba(255,255,255,0.05); }
[data-theme="dark"] .modal-header { background: transparent; border-bottom-color: rgba(255,255,255,0.05); }

/* ========== DARK MODE: INVOICE PILL GROUP ========== */
[data-theme="dark"] .inv-pill { background: rgba(255,255,255,0.04); color: #8b95a5; border-right: none; }
[data-theme="dark"] .inv-pill:hover { background: rgba(255,255,255,0.08); color: #e2e8f0; }

/* ========== DARK MODE: BULK BAR ========== */
[data-theme="dark"] .bulk-bar { background: linear-gradient(135deg, #1e3a8a, #2563eb); }

/* ========== DARK MODE: PAGINATION ========== */
[data-theme="dark"] .pagination button { background: rgba(255,255,255,0.04); color: #8b95a5; }
[data-theme="dark"] .pagination button:hover:not(:disabled):not(.active) { background: rgba(255,255,255,0.08); color: #e2e8f0; }
[data-theme="dark"] .pagination button.active { background: #2563eb; color: #fff; }
[data-theme="dark"] .invoices-pagination button { background: rgba(255,255,255,0.04); color: #8b95a5; }
[data-theme="dark"] .invoices-pagination button:hover:not(:disabled):not(.active) { background: rgba(255,255,255,0.08); color: #e2e8f0; }
[data-theme="dark"] .invoices-pagination button.active { background: #2563eb; color: #fff; }

/* ========== DARK MODE: FILTER PILLS/LABELS ========== */
[data-theme="dark"] .filter-row .filter-label.fl-invoice { color: #ac89ff; }
[data-theme="dark"] .filter-row .filter-label.fl-ref { color: #00eefc; }
[data-theme="dark"] .filter-row .filter-label.fl-payment { color: #ff5dd7; }
[data-theme="dark"] .filter-row .filter-label.fl-status { color: #00d4aa; }
[data-theme="dark"] .filter-row .filter-label.fl-freq { color: #60a5fa; }
[data-theme="dark"] .filter-row .filter-label.fl-drivertype { color: #fbbf24; }
[data-theme="dark"] .filter-row .filter-label.fl-vehicle { color: #5eead4; }
[data-theme="dark"] .filter-row .filter-label.fl-date { color: #f87171; }
[data-theme="dark"] .filter-row .filter-label.fl-tag { color: #fb923c; }
[data-theme="dark"] .filter-row .filter-label.fl-source { color: #818cf8; }
[data-theme="dark"] .filter-row .filter-label.fl-signed { color: #38bdf8; }
[data-theme="dark"] .filter-row .filter-label.fl-attach { color: #c084fc; }
[data-theme="dark"] .filter-row .filter-label.fl-paperwork { color: #4ade80; }
[data-theme="dark"] .filter-row .filter-label.fl-bill { color: #fbbf24; }
[data-theme="dark"] .filter-row .filter-label.fl-driverpay { color: #fb7185; }
/* ========== KINETIC PERFORMANCE ANALYTICS ========== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
.perf-wrap { background:#0b0e14; min-height:100vh; padding:0; color:#ecedf6; font-family:'Inter',sans-serif; }
.perf-filter-bar { position:sticky; top:0; z-index:50; background:rgba(11,14,20,0.92); backdrop-filter:blur(16px); padding:14px 28px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; border-bottom:1px solid rgba(143,245,255,0.08); }
.perf-pill { padding:7px 18px; border-radius:20px; border:1px solid rgba(143,245,255,0.15); background:transparent; color:#a9abb3; font-size:12px; font-weight:600; cursor:pointer; transition:all 0.2s; letter-spacing:0.3px; }
.perf-pill:hover { border-color:#8ff5ff; color:#8ff5ff; }
.perf-pill.active { background:linear-gradient(135deg,#8ff5ff,#6ce0ef); color:#0b0e14; border-color:transparent; font-weight:700; box-shadow:0 0 18px rgba(143,245,255,0.25); }
.perf-divider { width:1px; height:24px; background:rgba(143,245,255,0.12); margin:0 6px; }
.perf-dd-pill { padding:7px 16px; border-radius:20px; border:1px solid rgba(172,137,255,0.2); background:rgba(34,38,47,0.5); color:#a9abb3; font-size:12px; font-weight:500; cursor:pointer; min-width:120px; appearance:none; }
.perf-dd-pill:focus { outline:none; border-color:#ac89ff; box-shadow:0 0 12px rgba(172,137,255,0.2); }
.perf-export-btn { padding:8px 22px; border-radius:20px; border:none; background:linear-gradient(135deg,#8ff5ff,#6ce0ef); color:#0b0e14; font-size:12px; font-weight:700; cursor:pointer; letter-spacing:0.5px; transition:all 0.2s; margin-left:auto; }
.perf-export-btn:hover { box-shadow:0 0 24px rgba(143,245,255,0.4); transform:translateY(-1px); }
.perf-title-section { padding:32px 28px 0; }
.perf-title { font-family:'Space Grotesk',sans-serif; font-size:32px; font-weight:700; color:#ecedf6; letter-spacing:-0.5px; margin:0 0 6px; }
.perf-subtitle { font-size:14px; color:#a9abb3; margin:0 0 28px; line-height:1.5; }
.perf-kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:0 28px 24px; }
.perf-kpi-card { background:rgba(34,38,47,0.6); backdrop-filter:blur(20px); border:1px solid rgba(143,245,255,0.06); border-radius:16px; padding:20px; position:relative; overflow:hidden; transition:all 0.3s; }
.perf-kpi-card:hover { border-color:rgba(143,245,255,0.15); transform:translateY(-2px); }
.perf-kpi-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.perf-kpi-icon { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.perf-kpi-icon.cyan { background:rgba(143,245,255,0.12); color:#8ff5ff; }
.perf-kpi-icon.purple { background:rgba(172,137,255,0.12); color:#ac89ff; }
.perf-kpi-icon.pink { background:rgba(255,93,215,0.12); color:#ff5dd7; }
.perf-kpi-icon.teal { background:rgba(143,245,255,0.08); color:#6ce0ef; }
.perf-kpi-trend { font-size:11px; font-weight:700; padding:3px 8px; border-radius:10px; display:flex; align-items:center; gap:3px; }
.perf-kpi-trend.up { background:rgba(52,211,153,0.12); color:#34d399; }
.perf-kpi-trend.down { background:rgba(248,113,113,0.12); color:#f87171; }
.perf-kpi-trend.neutral { background:rgba(169,171,179,0.12); color:#a9abb3; }
.perf-kpi-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1.2px; color:#a9abb3; margin-bottom:6px; }
.perf-kpi-value { font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:700; color:#ecedf6; line-height:1.2; }
.perf-kpi-bar { height:4px; border-radius:2px; background:rgba(255,255,255,0.06); margin-top:16px; overflow:hidden; }
.perf-kpi-bar-fill { height:100%; border-radius:2px; transition:width 0.6s ease; }
.perf-kpi-bar-fill.cyan { background:linear-gradient(90deg,#8ff5ff,#6ce0ef); box-shadow:0 0 12px rgba(143,245,255,0.4); }
.perf-kpi-bar-fill.purple { background:linear-gradient(90deg,#ac89ff,#8b6dff); box-shadow:0 0 12px rgba(172,137,255,0.4); }
.perf-kpi-bar-fill.pink { background:linear-gradient(90deg,#ff5dd7,#e040b0); box-shadow:0 0 12px rgba(255,93,215,0.4); }
.perf-kpi-bar-fill.teal { background:linear-gradient(90deg,#6ce0ef,#4dc8d9); box-shadow:0 0 12px rgba(108,224,239,0.4); }
.perf-bento { display:grid; grid-template-columns:8fr 4fr; gap:16px; padding:0 28px 24px; }
.perf-glass { background:rgba(34,38,47,0.6); backdrop-filter:blur(20px); border:1px solid rgba(143,245,255,0.06); border-radius:16px; padding:24px; }
.perf-glass-title { font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:700; color:#ecedf6; margin:0 0 4px; letter-spacing:0.3px; }
.perf-glass-sub { font-size:12px; color:#a9abb3; margin:0 0 20px; }
.perf-legend { display:flex; gap:16px; margin-bottom:16px; }
.perf-legend-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px; }
.perf-legend span { font-size:11px; color:#a9abb3; font-weight:500; display:flex; align-items:center; }
.perf-chart-bars { display:flex; gap:8px; align-items:flex-end; height:200px; padding-top:10px; }
.perf-chart-group { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.perf-chart-pair { display:flex; gap:3px; align-items:flex-end; height:180px; }
.perf-bar { width:18px; border-radius:6px 6px 0 0; min-height:2px; transition:height 0.5s ease; position:relative; }
.perf-bar.primary { background:linear-gradient(180deg,#8ff5ff,#4dc8d9); box-shadow:0 0 10px rgba(143,245,255,0.2); }
.perf-bar.secondary { background:linear-gradient(180deg,#ac89ff,#7c5ce0); box-shadow:0 0 10px rgba(172,137,255,0.2); }
.perf-bar:hover { opacity:0.85; }
.perf-bar-label { font-size:10px; color:#a9abb3; font-weight:600; text-transform:uppercase; margin-top:4px; }
.perf-donut-wrap { display:flex; flex-direction:column; align-items:center; gap:16px; }
.perf-donut { width:160px; height:160px; border-radius:50%; position:relative; margin:0 auto; }
.perf-donut-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; }
.perf-donut-center .val { font-family:'Space Grotesk',sans-serif; font-size:24px; font-weight:700; color:#ecedf6; }
.perf-donut-center .lbl { font-size:10px; color:#a9abb3; text-transform:uppercase; letter-spacing:1px; }
.perf-donut-list { width:100%; }
.perf-donut-item { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.04); font-size:13px; }
.perf-donut-item .dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.perf-donut-item .name { flex:1; color:#ecedf6; }
.perf-donut-item .pct { font-weight:700; color:#ecedf6; font-family:'Space Grotesk',sans-serif; }
.perf-matrix { padding:0 28px 24px; }
.perf-matrix-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.perf-matrix-title { font-family:'Space Grotesk',sans-serif; font-size:16px; font-weight:700; color:#ecedf6; }
.perf-matrix-link { font-size:12px; color:#8ff5ff; cursor:pointer; text-decoration:none; font-weight:600; }
.perf-matrix-link:hover { text-decoration:underline; }
.perf-table { width:100%; border-collapse:collapse; }
.perf-table thead th { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:#a9abb3; padding:12px 16px; text-align:left; border-bottom:1px solid rgba(143,245,255,0.08); }
.perf-table tbody td { padding:14px 16px; font-size:13px; color:#ecedf6; border-bottom:1px solid rgba(255,255,255,0.03); }
.perf-table tbody tr:hover { background:rgba(143,245,255,0.03); }
.perf-driver-avatar { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:#0b0e14; flex-shrink:0; }
.perf-driver-info { display:flex; align-items:center; gap:12px; }
.perf-driver-name { font-weight:600; color:#ecedf6; }
.perf-driver-vehicle { font-size:11px; color:#a9abb3; }
.perf-status-badge { padding:4px 12px; border-radius:10px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
.perf-status-badge.active { background:rgba(52,211,153,0.15); color:#34d399; }
.perf-status-badge.moderate { background:rgba(251,191,36,0.15); color:#fbbf24; }
.perf-status-badge.low { background:rgba(248,113,113,0.15); color:#f87171; }
.perf-stars { color:#fbbf24; font-size:14px; letter-spacing:2px; }
.perf-stars .empty { color:rgba(255,255,255,0.1); }
.perf-ontime-bar { width:80px; height:6px; border-radius:3px; background:rgba(255,255,255,0.06); overflow:hidden; display:inline-block; vertical-align:middle; margin-right:8px; }
.perf-ontime-fill { height:100%; border-radius:3px; }
.perf-cost-section { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:0 28px 28px; }
.perf-hbar-wrap { margin-bottom:16px; }
.perf-hbar-header { display:flex; justify-content:space-between; margin-bottom:6px; }
.perf-hbar-label { font-size:12px; font-weight:600; color:#ecedf6; }
.perf-hbar-val { font-size:12px; font-weight:700; color:#a9abb3; font-family:'Space Grotesk',sans-serif; }
.perf-hbar { height:10px; border-radius:5px; background:rgba(255,255,255,0.06); overflow:hidden; }
.perf-hbar-fill { height:100%; border-radius:5px; transition:width 0.6s ease; }
.perf-hbar-fill.cyan { background:linear-gradient(90deg,#8ff5ff,#4dc8d9); }
.perf-hbar-fill.purple { background:linear-gradient(90deg,#ac89ff,#7c5ce0); }
.perf-outlook-card { background:linear-gradient(135deg,rgba(143,245,255,0.15),rgba(172,137,255,0.15)); border:1px solid rgba(143,245,255,0.1); border-radius:16px; padding:24px; margin-bottom:16px; }
.perf-outlook-title { font-family:'Space Grotesk',sans-serif; font-size:16px; font-weight:700; color:#8ff5ff; margin:0 0 10px; }
.perf-outlook-text { font-size:13px; color:#a9abb3; line-height:1.6; margin:0 0 16px; }
.perf-outlook-btn { padding:8px 20px; border-radius:10px; border:1px solid rgba(143,245,255,0.3); background:transparent; color:#8ff5ff; font-size:12px; font-weight:700; cursor:pointer; transition:all 0.2s; }
.perf-outlook-btn:hover { background:rgba(143,245,255,0.1); }
.perf-alert-card { background:rgba(34,38,47,0.6); backdrop-filter:blur(20px); border:1px solid rgba(255,93,215,0.15); border-left:3px solid #ff5dd7; border-radius:16px; padding:20px 24px; display:flex; gap:14px; align-items:flex-start; }
.perf-alert-icon { font-size:20px; flex-shrink:0; margin-top:2px; }
.perf-alert-text { font-size:13px; color:#a9abb3; line-height:1.6; }
.perf-alert-text strong { color:#ff5dd7; }
@media (max-width:1100px) { .perf-kpi-grid { grid-template-columns:repeat(2,1fr); } .perf-bento { grid-template-columns:1fr; } .perf-cost-section { grid-template-columns:1fr; } }
@media (max-width:700px) { .perf-kpi-grid { grid-template-columns:1fr; } .perf-filter-bar { padding:10px 16px; } .perf-title { font-size:24px; } }

/* ===== KINETIC ADDRESS BOOK CARDS ===== */
.addr-view-toggle { display: flex; gap: 3px; margin-left: auto; background: var(--gray-100); border-radius: 10px; padding: 3px; }
.addr-view-btn { height: 32px; padding: 0 14px; display: flex; align-items: center; justify-content: center; gap: 6px; border: none; border-radius: 8px; background: transparent; color: var(--gray-500); cursor: pointer; transition: all 0.2s; font-size: 12px; font-weight: 600; white-space: nowrap; }
.addr-view-btn:hover { background: rgba(0,0,0,0.04); color: var(--gray-700); }
.addr-view-btn.active { background: #fff; color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
[data-theme="dark"] .addr-view-toggle { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .addr-view-btn { color: #64748b; }
[data-theme="dark"] .addr-view-btn:hover { background: rgba(255,255,255,0.04); color: #e2e8f0; }
[data-theme="dark"] .addr-view-btn.active { background: rgba(143,245,255,0.1); color: #8ff5ff; box-shadow: none; }

.addr-kinetic-wrap { display: none; position: relative; min-height: 300px; border-radius: 16px; overflow: hidden; }
.addr-kinetic-wrap.active { display: block; }
.addr-kinetic-bg { position: absolute; inset: 0; background: #0b0e14; z-index: 0; }
.addr-kinetic-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 30%, rgba(143,245,255,0.05) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(172,137,255,0.05) 0%, transparent 50%); }
.addr-kinetic-bg::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,0.015) 39px, rgba(255,255,255,0.015) 40px), repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,0.015) 39px, rgba(255,255,255,0.015) 40px); }
.addr-card-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; padding: 24px; }
.addr-k-card { background: rgba(34,38,47,0.6); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 24px; transition: all 0.3s; cursor: pointer; position: relative; }
.addr-k-card:hover { border-color: rgba(143,245,255,0.2); box-shadow: 0 0 30px rgba(143,245,255,0.08); transform: translateY(-2px); }
.addr-k-card.addr-default { border-color: rgba(143,245,255,0.35); }
.addr-k-card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.addr-k-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.addr-k-icon.cyan { background: rgba(143,245,255,0.1); color: #8ff5ff; }
.addr-k-icon.purple { background: rgba(172,137,255,0.1); color: #ac89ff; }
.addr-k-icon.pink { background: rgba(255,93,215,0.1); color: #ff5dd7; }
.addr-k-name { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; font-size: 16px; color: #ecedf6; }
.addr-k-type { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: #6b6e76; font-weight: 600; margin-top: 2px; }
.addr-k-detail { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; font-size: 13px; color: #a9abb3; line-height: 1.5; }
.addr-k-detail svg { flex-shrink: 0; margin-top: 2px; color: #6b6e76; }
.addr-k-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06); }
.addr-k-footer-btns { display: flex; gap: 6px; }
.addr-k-btn { height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: #a9abb3; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 5px; }
.addr-k-btn:hover { border-color: rgba(143,245,255,0.2); color: #8ff5ff; background: rgba(143,245,255,0.06); }
.addr-k-btn.danger:hover { border-color: rgba(255,93,93,0.3); color: #ff5d5d; background: rgba(255,93,93,0.06); }
.addr-k-badge { padding: 4px 10px; border-radius: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.addr-k-badge-default { background: rgba(143,245,255,0.12); color: #8ff5ff; border: 1px solid rgba(143,245,255,0.2); }
.addr-k-add-card { background: transparent; border: 2px dashed rgba(255,255,255,0.1); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px; cursor: pointer; transition: all 0.3s; }
.addr-k-add-card:hover { border-color: rgba(143,245,255,0.3); background: rgba(143,245,255,0.03); }
.addr-k-add-icon { width: 56px; height: 56px; border-radius: 16px; background: rgba(143,245,255,0.08); color: #8ff5ff; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 12px; }
.addr-k-add-title { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; font-size: 15px; color: #ecedf6; margin-bottom: 4px; }
.addr-k-add-sub { font-size: 12px; color: #6b6e76; }

/* ===== KINETIC CUSTOMER CARDS ===== */
.cust-view-toggle { display: flex; gap: 3px; margin-left: auto; background: var(--gray-100); border-radius: 10px; padding: 3px; }
.cust-view-btn { height: 32px; padding: 0 14px; display: flex; align-items: center; justify-content: center; gap: 6px; border: none; border-radius: 8px; background: transparent; color: var(--gray-500); cursor: pointer; transition: all 0.2s; font-size: 12px; font-weight: 600; white-space: nowrap; }
.cust-view-btn:hover { background: rgba(0,0,0,0.04); color: var(--gray-700); }
.cust-view-btn.active { background: #fff; color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
[data-theme="dark"] .cust-view-toggle { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .cust-view-btn { color: #64748b; }
[data-theme="dark"] .cust-view-btn:hover { background: rgba(255,255,255,0.04); color: #e2e8f0; }
[data-theme="dark"] .cust-view-btn.active { background: rgba(143,245,255,0.1); color: #8ff5ff; box-shadow: none; }

.cust-kinetic-wrap { display: none; position: relative; min-height: 300px; border-radius: 16px; overflow: hidden; }
.cust-kinetic-wrap.active { display: block; }
.cust-kinetic-bg { position: absolute; inset: 0; background: #0b0e14; z-index: 0; }
.cust-kinetic-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 30%, rgba(143,245,255,0.05) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(172,137,255,0.05) 0%, transparent 50%); }
.cust-kinetic-bg::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,0.015) 39px, rgba(255,255,255,0.015) 40px), repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,0.015) 39px, rgba(255,255,255,0.015) 40px); }
.cust-card-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; padding: 24px; }
.cust-k-card { background: rgba(34,38,47,0.6); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 24px; transition: all 0.3s; cursor: pointer; position: relative; overflow: hidden; }
.cust-k-card:hover { border-color: rgba(143,245,255,0.2); box-shadow: 0 0 30px rgba(143,245,255,0.08); transform: translateY(-2px); }
.cust-k-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 16px 16px 0 0; }
.cust-k-card.accent-cyan::before { background: #8ff5ff; }
.cust-k-card.accent-purple::before { background: #ac89ff; }
.cust-k-card.accent-pink::before { background: #ff5dd7; }
.cust-k-company { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; font-size: 18px; color: #ecedf6; margin-bottom: 8px; }
.cust-k-contact { font-size: 13px; color: #a9abb3; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.cust-k-contact svg { flex-shrink: 0; color: #6b6e76; }
.cust-k-email { font-size: 12px; color: #6b6e76; margin-bottom: 4px; margin-left: 24px; }
.cust-k-phone { font-size: 13px; color: #a9abb3; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.cust-k-phone svg { flex-shrink: 0; color: #6b6e76; }
.cust-k-stats { display: flex; gap: 8px; margin-bottom: 18px; }
.cust-k-stat { padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.cust-k-stat.cyan { background: rgba(143,245,255,0.1); color: #8ff5ff; }
.cust-k-stat.purple { background: rgba(172,137,255,0.1); color: #ac89ff; }
.cust-k-footer { display: flex; align-items: center; gap: 6px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06); }
.cust-k-btn { height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: #a9abb3; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 5px; }
.cust-k-btn:hover { border-color: rgba(143,245,255,0.2); color: #8ff5ff; background: rgba(143,245,255,0.06); }
.cust-k-btn.danger:hover { border-color: rgba(255,93,93,0.3); color: #ff5d5d; background: rgba(255,93,93,0.06); }
.cust-k-btn.primary { border-color: rgba(143,245,255,0.2); color: #8ff5ff; background: rgba(143,245,255,0.06); }

/* ============ DELIVERY NOTE ============ */
.delivery-note-printable { max-width:750px; margin:0 auto; }
.dn-page { background:#fff; padding:40px; font-family:'Inter',Arial,sans-serif; color:#212529; font-size:13px; line-height:1.5; }
.dn-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; padding-bottom:20px; border-bottom:2px solid #059669; }
.dn-logo { display:flex; align-items:center; gap:12px; }
.dn-company-name { font-size:22px; font-weight:800; color:#212529; letter-spacing:-0.5px; }
.dn-company-sub { font-size:11px; font-weight:700; color:#059669; letter-spacing:3px; text-transform:uppercase; }
.dn-header-right { text-align:right; }
.dn-ref-badge { font-size:18px; font-weight:800; color:#2563EB; margin-bottom:4px; }
.dn-header-date { font-size:13px; color:#6C757D; }

.dn-info-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#E9ECEF; border:1px solid #E9ECEF; border-radius:8px; overflow:hidden; margin-bottom:24px; }
.dn-info-item { background:#F8F9FA; padding:10px 14px; text-align:center; }
.dn-info-label { display:block; font-size:10px; font-weight:700; color:#6C757D; text-transform:uppercase; letter-spacing:1px; margin-bottom:2px; }
.dn-info-value { display:block; font-size:13px; font-weight:700; color:#212529; }

.dn-section { margin-bottom:20px; }
.dn-section-title { font-size:11px; font-weight:700; color:#6C757D; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid #E9ECEF; }
.dn-customer-row { display:flex; justify-content:space-between; align-items:flex-start; }
.dn-customer-name { font-size:16px; font-weight:700; color:#212529; margin-bottom:4px; }
.dn-ref-line { font-size:12px; color:#6C757D; margin-bottom:2px; }

.dn-addresses { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:stretch; margin-bottom:24px; }
.dn-addr-card { border:1px solid #E9ECEF; border-radius:8px; overflow:hidden; }
.dn-addr-header { padding:8px 14px; font-size:10px; font-weight:800; letter-spacing:2px; display:flex; align-items:center; gap:8px; }
.dn-pickup .dn-addr-header { background:rgba(37,99,235,0.06); color:#2563EB; }
.dn-delivery .dn-addr-header { background:rgba(40,167,69,0.06); color:#28a745; }
.dn-addr-body { padding:14px; }
.dn-addr-company { font-size:14px; font-weight:700; color:#212529; margin-bottom:4px; }
.dn-addr-line { font-size:12px; color:#495057; }
.dn-addr-postcode { font-size:13px; font-weight:700; color:#212529; margin-top:4px; }
.dn-addr-time { font-size:12px; color:#2563EB; font-weight:600; margin-top:8px; }
.dn-addr-notes { font-size:11px; color:#6C757D; font-style:italic; margin-top:6px; padding-top:6px; border-top:1px solid #E9ECEF; }
.dn-addr-arrow { display:flex; align-items:center; justify-content:center; }

.dn-instructions { padding:12px 16px; background:#FFF3CD; border:1px solid #FFECB5; border-radius:6px; font-size:13px; color:#664D03; }

.dn-goods-table table { width:100%; border-collapse:collapse; }
.dn-goods-table th { background:#F8F9FA; padding:8px 12px; font-size:11px; font-weight:700; color:#6C757D; text-transform:uppercase; letter-spacing:0.5px; border:1px solid #E9ECEF; text-align:left; }
.dn-goods-table td { padding:10px 12px; border:1px solid #E9ECEF; font-size:13px; }

.dn-pod-section { margin-bottom:24px; padding:20px; border:2px dashed #DEE2E6; border-radius:8px; }
.dn-pod-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.dn-pod-field { }
.dn-pod-label { font-size:10px; font-weight:700; color:#6C757D; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.dn-pod-line { min-height:32px; border-bottom:1px solid #212529; font-size:14px; font-weight:500; padding-bottom:4px; }

.dn-footer { text-align:center; padding-top:16px; border-top:1px solid #E9ECEF; font-size:11px; color:#ADB5BD; line-height:1.8; }

/* Print-specific styles */
@media print {
  /* Hide everything except the delivery note */
  body * { visibility:hidden !important; }
  .delivery-note-printable, .delivery-note-printable * { visibility:visible !important; }
  .delivery-note-printable { position:fixed !important; left:0 !important; top:0 !important; width:100% !important; z-index:999999 !important; }
  .dn-page { padding:20px !important; box-shadow:none !important; }

  /* Hide modal chrome */
  .modal-header, .modal-footer, .modal-close { display:none !important; }
  .modal-overlay { background:transparent !important; }
  .modal { box-shadow:none !important; border:none !important; max-width:100% !important; }
  .modal-body { padding:0 !important; background:#fff !important; }

  /* Hide sidebar, nav, etc */
  .sidebar, .main-content > *:not(.modal-overlay), .nav-item { display:none !important; }

  /* Page setup */
  @page { margin:10mm; size:A4; }
}

/* ============ Google Places Autocomplete Styling ============ */
.pac-container {
  border-radius: 8px;
  border: 1px solid var(--gray-200);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  margin-top: 4px;
}
.pac-item {
  padding: 8px 12px;
  cursor: pointer;
  border-top: 1px solid var(--gray-100);
  line-height: 1.4;
}
.pac-item:first-child { border-top: none; }
.pac-item:hover { background: var(--gray-50); }
.pac-icon {
  width: 14px !important;
  height: 14px !important;
  margin-right: 8px !important;
  background-size: 14px !important;
}
.pac-item-query { font-size: 13px; font-weight: 500; }
.pac-matched { font-weight: 700; }
.pac-item span:last-child { font-size: 11px; color: var(--gray-500); }
/* Dark mode autocomplete */
[data-theme="dark"] .pac-container {
  background: #161a21;
  border-color: #22262f;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
[data-theme="dark"] .pac-item {
  border-top-color: #22262f;
  color: #ecedf6;
}
[data-theme="dark"] .pac-item:hover { background: #1c2028; }
[data-theme="dark"] .pac-item-query { color: #8ff5ff; }
[data-theme="dark"] .pac-item span:last-child { color: #73757d; }

/* ============ DISPATCH BOARD ============ */
.dispatch-column { background: var(--gray-50); border-radius: 12px; padding: 12px; min-height: 300px; }
.dispatch-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-1px); }
.dispatch-card:active { cursor: grabbing; opacity: 0.8; }

/* ============ KPI CARD (generic) ============ */
.kpi-label { font-size: 12px; color: var(--gray-500); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.kpi-value { font-size: 28px; font-weight: 800; margin-top: 4px; }

/* ============ BULK ACTION BAR ============ */
.booking-select-cb { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); }

/* ============ SIGNATURE CANVAS ============ */
#sig-canvas { background: #fff; }
[data-theme="dark"] #sig-canvas { background: #fff; }

/* ============ DATA TABLE (generic for new pages) ============ */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { text-align: left; padding: 10px 12px; background: var(--gray-50); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--gray-600); border-bottom: 2px solid var(--gray-200); }
.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--gray-100); }
.data-table tr:hover { background: var(--gray-50); }

/* ============ VEHICLE SELECTOR CARDS ============ */
.vehicle-card { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 12px; border:2px solid var(--gray-200); border-radius:12px; cursor:pointer; transition:all 0.2s; min-width:90px; text-align:center; background:#fff; }
.vehicle-card:hover { border-color:var(--primary); background:var(--primary-light); }
.vehicle-card.selected { border-color:var(--primary); background:var(--primary-light); box-shadow:0 0 0 3px rgba(37,99,235,0.15); }
.vehicle-icon { color:var(--gray-600); }
.vehicle-card.selected .vehicle-icon { color:var(--primary); }
.vehicle-name { font-size:11px; font-weight:700; color:var(--gray-700); }
.vehicle-rate { font-size:10px; color:var(--gray-400); }

/* ============ SERVICE LEVEL PILLS ============ */
.service-level-pill { padding:8px 16px; border:1px solid var(--gray-300); border-radius:10px; background:#fff; cursor:pointer; font-size:12px; font-weight:600; color:var(--gray-600); transition:all 0.2s; }
.service-level-pill:hover { border-color:var(--primary); color:var(--primary); }
.service-level-pill.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.sl-multiplier { font-size:10px; opacity:0.7; margin-left:2px; }

/* ============ PRICE BREAKDOWN CARD ============ */
.price-breakdown-card { background:var(--gray-50); border:1px solid var(--gray-200); border-radius:12px; padding:18px; }
.pb-title { font-size:14px; font-weight:700; margin-bottom:12px; color:var(--gray-800); }
.pb-line { display:flex; justify-content:space-between; padding:5px 0; font-size:13px; color:var(--gray-600); }
.pb-line.pb-highlight { color:var(--primary); font-weight:600; }
.pb-line.pb-subtotal { font-weight:700; color:var(--gray-800); font-size:14px; }
.pb-line.pb-total { font-weight:800; color:var(--success); font-size:18px; }
.pb-divider { height:1px; background:var(--gray-200); margin:8px 0; }

/* Dark mode for new pages */
[data-theme="dark"] .vehicle-card { background:rgba(255,255,255,0.03); border-color:rgba(255,255,255,0.08); }
[data-theme="dark"] .vehicle-card.selected { border-color:var(--primary); background:rgba(37,99,235,0.1); }
[data-theme="dark"] .vehicle-name { color:#e2e8f0; }
[data-theme="dark"] .service-level-pill { background:rgba(255,255,255,0.03); border-color:rgba(255,255,255,0.1); color:#94a3b8; }
[data-theme="dark"] .price-breakdown-card { background:rgba(255,255,255,0.03); border-color:rgba(255,255,255,0.06); }
[data-theme="dark"] .pb-title { color:#e2e8f0; }
[data-theme="dark"] .pb-line { color:#94a3b8; }
[data-theme="dark"] .pb-line.pb-subtotal { color:#e2e8f0; }
[data-theme="dark"] .dispatch-column { background: #161a21; }
[data-theme="dark"] .dispatch-card { background: #1c2028 !important; border-color: #22262f !important; }
[data-theme="dark"] .data-table th { background: #161a21; color: #adb5bd; border-bottom-color: #22262f; }
[data-theme="dark"] .data-table td { border-bottom-color: #22262f; }
[data-theme="dark"] .data-table tr:hover { background: #1c2028; }

/* ============ EXPENSES MODULE ============ */
.exp-tabs { display:flex; gap:6px; align-items:center; padding:14px 24px 0; border-bottom:1px solid var(--gray-200); margin-bottom:18px; }
.exp-tab { background:transparent; border:none; padding:10px 18px; font-size:13px; font-weight:600; color:var(--gray-600); cursor:pointer; border-bottom:3px solid transparent; transition:all 0.15s; }
.exp-tab:hover { color:var(--primary); }
.exp-tab.active { color:var(--primary); border-bottom-color:var(--primary); }
.exp-tab-badge { background:var(--danger); color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; margin-left:4px; }
.exp-tab-view { padding:0 24px 30px; }

.exp-kpi-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:14px; margin-bottom:20px; }
.exp-kpi-card { background:#fff; border:1px solid var(--gray-200); border-radius:12px; padding:16px 18px; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.exp-kpi-card.accent-cyan { border-left:4px solid #06b6d4; }
.exp-kpi-card.accent-purple { border-left:4px solid #8b5cf6; }
.exp-kpi-card.accent-pink { border-left:4px solid #ec4899; }
.exp-kpi-card.accent-green { border-left:4px solid #10b981; }
.exp-kpi-card.accent-amber { border-left:4px solid #f59e0b; }
.exp-kpi-card.accent-red { border-left:4px solid #ef4444; }
.exp-kpi-label { font-size:11px; font-weight:700; color:var(--gray-500); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; }
.exp-kpi-value { font-size:22px; font-weight:800; color:var(--gray-900); }
.exp-kpi-sub { font-size:11px; color:var(--gray-500); margin-top:2px; }

.exp-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.exp-toolbar input, .exp-toolbar select { padding:8px 12px; border:1px solid var(--gray-300); border-radius:6px; font-size:13px; background:#fff; }

.exp-type-badge { display:inline-block; padding:3px 8px; border-radius:10px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; }
.exp-type-badge.fixed { background:#dbeafe; color:#1e40af; }
.exp-type-badge.variable { background:#fef3c7; color:#92400e; }

.exp-status-pill { display:inline-block; padding:3px 8px; border-radius:10px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; }
.exp-status-pill.paid { background:#d1fae5; color:#065f46; }
.exp-status-pill.unpaid { background:#fee2e2; color:#991b1b; }
.exp-status-pill.scheduled { background:#fef3c7; color:#92400e; }
.exp-status-pill.overdue { background:#ef4444; color:#fff; }

.exp-recurring-pill { display:inline-block; padding:2px 7px; border-radius:8px; font-size:10px; font-weight:600; background:#ede9fe; color:#5b21b6; margin-left:4px; }
.exp-receipt-icon { cursor:pointer; font-size:16px; opacity:0.7; transition:opacity 0.15s; }
.exp-receipt-icon:hover { opacity:1; }

.exp-charts-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:20px; }
.exp-chart-card { background:#fff; border:1px solid var(--gray-200); border-radius:12px; padding:18px; }
.exp-chart-card.full { grid-column:1 / -1; }
.exp-chart-card h3 { margin:0 0 12px 0; font-size:14px; font-weight:700; color:var(--gray-700); }
.exp-chart-wrap { position:relative; height:280px; }

.exp-budget-bar { height:8px; background:var(--gray-200); border-radius:4px; overflow:hidden; margin-top:6px; }
.exp-budget-bar > div { height:100%; background:#10b981; transition:width 0.3s; }
.exp-budget-bar.over > div { background:#ef4444; }

.exp-cat-row { display:flex; gap:8px; align-items:center; padding:8px; border:1px solid var(--gray-200); border-radius:6px; margin-bottom:6px; }
.exp-cat-row input[type="text"] { flex:1; }

[data-theme="dark"] .exp-tabs { border-bottom-color:#22262f; }
[data-theme="dark"] .exp-kpi-card { background:#161a21; border-color:#22262f; }
[data-theme="dark"] .exp-kpi-value { color:#e2e8f0; }
[data-theme="dark"] .exp-chart-card { background:#161a21; border-color:#22262f; }
[data-theme="dark"] .exp-cat-row { border-color:#22262f; }