/* ============================================================
   Fleets Hub Africa — Main Stylesheet
   Color: #e5f5e0 (light green theme)
   ============================================================ */

:root {
  --primary:    #2d7a3a;
  --primary-lt: #e5f5e0;
  --primary-md: #b2dfb8;
  --primary-dk: #1a5228;
  --accent:     #f59e0b;
  --success:    #16a34a;
  --warning:    #d97706;
  --danger:     #dc2626;
  --info:       #2563eb;
  --purple:     #7c3aed;
  --bg:         #f0f9ec;
  --bg2:        #e5f5e0;
  --surface:    #ffffff;
  --surface2:   #f4fbf1;
  --border:     #c8e6c9;
  --border2:    #a5d6a7;
  --text:       #1a3a1e;
  --text2:      #3d6b42;
  --text3:      #6b9e70;
  --sidebar-bg: #1a3a1e;
  --sidebar-text: #c8e6c9;
  --sidebar-active: #e5f5e0;
  --topbar-bg:  #ffffff;
  --radius:     10px;
  --shadow:     0 2px 8px rgba(45,122,58,0.08);
  --shadow-lg:  0 8px 24px rgba(45,122,58,0.12);
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Century Gothic', CenturyGothic, AppleGothic, 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif; background:var(--bg); color:var(--text); font-size:14px; line-height:1.5; }

/* ── AUTH ─────────────────────────────────────────────────── */
.auth-body { background: linear-gradient(135deg, #1a3a1e 0%, #2d7a3a 50%, #1a3a1e 100%); min-height:100vh; display:flex; align-items:center; justify-content:center; }
.auth-wrap { width:100%; max-width:440px; padding:20px; }
.auth-card { background:var(--surface); border-radius:16px; padding:40px; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.auth-logo { display:flex; align-items:center; gap:12px; margin-bottom:28px; }
.logo-icon { width:44px; height:44px; background:var(--primary); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:22px; }
.logo-text { font-size:22px; font-weight:800; color:var(--text); }
.logo-text span { color:var(--primary); }
.auth-title { font-size:22px; font-weight:700; margin-bottom:4px; }
.auth-sub { color:var(--text3); margin-bottom:24px; }
.auth-switch { text-align:center; margin-top:18px; font-size:13px; color:var(--text3); }
.auth-switch a { color:var(--primary); font-weight:600; text-decoration:none; }

/* ── LAYOUT ──────────────────────────────────────────────── */
.sidebar {
  position:fixed; top:0; left:0; width:230px; height:100vh;
  background:var(--sidebar-bg); display:flex; flex-direction:column;
  overflow-y:auto; z-index:200; transition:transform 0.3s;
}
.sidebar-brand { padding:18px 16px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,0.1); }
.sidebar-brand .logo-icon { background:var(--primary); }
.sidebar-brand .logo-text { color:#fff; }
.sidebar-brand .logo-text span { color:var(--accent); }
.nav-item {
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  color:var(--sidebar-text); text-decoration:none; font-size:13.5px; font-weight:500;
  transition:all 0.15s; margin:1px 8px; border-radius:8px;
}
.nav-item:hover { background:rgba(229,245,224,0.1); color:#fff; }
.nav-item.active { background:var(--primary); color:#fff; }
.nav-icon { font-size:16px; width:22px; text-align:center; flex-shrink:0; }
.nav-badge { margin-left:auto; background:var(--danger); color:#fff; font-size:10px; font-weight:700; padding:2px 6px; border-radius:10px; }
.sidebar-footer { margin-top:auto; padding:12px; border-top:1px solid rgba(255,255,255,0.1); }
.user-pill { display:flex; align-items:center; gap:10px; padding:10px 12px; background:rgba(255,255,255,0.08); border-radius:10px; }
.avatar { width:34px; height:34px; background:var(--primary); border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; color:#fff; flex-shrink:0; }
.user-info .uname { font-size:13px; font-weight:600; color:#fff; }
.user-info .urole { font-size:11px; color:var(--sidebar-text); }
.logout-btn { margin-left:auto; color:var(--sidebar-text); text-decoration:none; font-size:16px; padding:4px; }
.logout-btn:hover { color:var(--danger); }

.topbar { position:sticky; top:0; left:230px; right:0; height:58px; background:var(--topbar-bg); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 24px; gap:16px; z-index:100; box-shadow:var(--shadow); }
.sidebar-toggle { background:none; border:none; font-size:20px; cursor:pointer; color:var(--text2); display:none; }
.topbar-title { font-size:17px; font-weight:700; color:var(--text); flex:1; }
.topbar-right { display:flex; align-items:center; gap:12px; }
.biz-name { font-size:13px; color:var(--text3); }
.notif-btn { display:flex; align-items:center; gap:6px; background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:6px 12px; text-decoration:none; color:var(--danger); font-size:13px; font-weight:600; }
.notif-count { background:var(--danger); color:#fff; border-radius:10px; padding:1px 5px; font-size:11px; }

.main-content { margin-left:230px; min-height:100vh; }
.page-wrap { padding:24px; max-width:1400px; }

/* ── TYPOGRAPHY / UTILS ──────────────────────────────────── */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.page-header h1 { font-size:22px; font-weight:800; color:var(--text); }
.page-sub { color:var(--text3); font-size:14px; }
.page-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.text-success { color:var(--success)!important; }
.text-danger  { color:var(--danger)!important; }
.text-warning { color:var(--warning)!important; }
.text-info    { color:var(--info)!important; }
.text-muted   { color:var(--text3)!important; }
.fw-bold { font-weight:700; }
.mono { font-family:'Courier New',monospace; }
.upper { text-transform:uppercase; }
.w-100 { width:100%; }
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.p-3{padding:12px}
.ms-auto{margin-left:auto}
.text-center{text-align:center}
.hidden{display:none!important}
.flex-between{display:flex;align-items:center;justify-content:space-between}

/* ── ALERTS ──────────────────────────────────────────────── */
.alert { padding:12px 16px; border-radius:var(--radius); margin-bottom:14px; font-size:14px; }
.alert-success { background:#dcfce7; border:1px solid #86efac; color:#14532d; }
.alert-danger  { background:#fee2e2; border:1px solid #fca5a5; color:#7f1d1d; }
.alert-warning { background:#fef3c7; border:1px solid #fcd34d; color:#713f12; }
.alert-strip { display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:var(--radius); margin-bottom:10px; border:1px solid; }
.alert-strip.alert-danger  { background:#fff5f5; border-color:#fca5a5; }
.alert-strip.alert-warning { background:#fffbeb; border-color:#fcd34d; }
.alert-strip.alert-success { background:#f0fdf4; border-color:#86efac; }
.alert-icon { font-size:22px; flex-shrink:0; }

/* ── CARDS ───────────────────────────────────────────────── */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:20px; overflow:hidden; }
.card-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); font-size:14px; font-weight:700; color:var(--text2); background:var(--surface2); }

/* ── METRICS ─────────────────────────────────────────────── */
/* Default: clean responsive grid, equal-width cards, never an orphaned card alone in a row */
.metrics-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.metric-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); position:relative; overflow:hidden; display:flex; flex-direction:column; }
.metric-card::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; }
.metric-card.green::after  { background:var(--success); }
.metric-card.red::after    { background:var(--danger); }
.metric-card.blue::after   { background:var(--info); }
.metric-card.amber::after  { background:var(--accent); }
.metric-card.purple::after { background:var(--purple); }
.metric-icon { font-size:22px; margin-bottom:10px; }
.metric-val { font-size:22px; font-weight:800; color:var(--text); line-height:1.1; }
.metric-lbl { font-size:12px; color:var(--text3); margin-top:4px; font-weight:500; }

/* ── FORMS ───────────────────────────────────────────────── */
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:12px; font-weight:600; color:var(--text2); margin-bottom:5px; text-transform:uppercase; letter-spacing:0.4px; }
.form-control {
  width:100%; background:var(--bg); border:1px solid var(--border2); border-radius:8px;
  padding:9px 12px; color:var(--text); font-size:13.5px; font-family:inherit;
  outline:none; transition:border-color 0.2s,box-shadow 0.2s;
}
.form-control:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(45,122,58,0.1); }
.form-control-sm { padding:6px 10px; font-size:13px; }
textarea.form-control { min-height:72px; resize:vertical; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid.three { grid-template-columns:1fr 1fr 1fr; }
.form-span-2 { grid-column:span 2; }
.filter-bar { padding:14px 18px; margin-bottom:16px; }
.filter-bar .card-head { display:none; }
.filter-form { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.filter-form .form-group { margin-bottom:0; min-width:130px; }
.filter-form .form-group label { margin-bottom:4px; }

/* ── TABS ────────────────────────────────────────────────── */
.tab-row { display:flex; gap:4px; background:var(--bg2); border-radius:8px; padding:4px; margin-bottom:20px; }
.tab-btn { flex:1; padding:8px 12px; border:none; border-radius:6px; font-size:13px; font-weight:500; cursor:pointer; background:transparent; color:var(--text2); transition:all 0.15s; font-family:inherit; }
.tab-btn.active { background:var(--primary); color:#fff; }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 18px; border-radius:8px; border:none; font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit; transition:all 0.15s; text-decoration:none; box-shadow:0 1px 2px rgba(0,0,0,0.04); }
.btn:active { transform:translateY(1px); box-shadow:none; }
.btn:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-dk); box-shadow:0 2px 8px rgba(0,0,0,0.12); transform:translateY(-1px); }
.btn-secondary { background:var(--surface); color:var(--text2); border:1px solid var(--border2); }
.btn-secondary:hover { border-color:var(--primary); color:var(--primary); box-shadow:0 2px 6px rgba(0,0,0,0.06); }
.btn-outline { background:transparent; color:var(--primary); border:1px solid var(--primary); box-shadow:none; }
.btn-outline:hover { background:var(--primary); color:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.1); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { box-shadow:0 2px 8px rgba(220,38,38,0.25); transform:translateY(-1px); }
.btn-success { background:var(--success); color:#fff; }
.btn-success:hover { box-shadow:0 2px 8px rgba(22,163,74,0.25); transform:translateY(-1px); }
.btn-sm  { padding:6px 12px; font-size:12.5px; }
.btn-xs  { padding:3px 8px; font-size:11px; border-radius:5px; }
.btn-lg  { padding:12px 28px; font-size:15px; }
.btn:disabled { opacity:0.5; cursor:not-allowed; }

/* ── TABLES ──────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; font-size:13.5px; }
.table th { text-align:left; padding:10px 14px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.7px; color:var(--text3); background:var(--surface2); border-bottom:2px solid var(--border); white-space:nowrap; }
.table td { padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
.table tr:last-child td { border-bottom:none; }
.table tr:hover td { background:var(--bg2); }
.plate { font-family:'Courier New',monospace; font-weight:700; font-size:12.5px; background:var(--bg2); padding:3px 7px; border-radius:4px; border:1px solid var(--border2); letter-spacing:1px; color:var(--text); }

/* ── BADGES ──────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:700; white-space:nowrap; }
.badge-success { background:#dcfce7; color:#14532d; }
.badge-danger  { background:#fee2e2; color:#7f1d1d; }
.badge-warning { background:#fef3c7; color:#713f12; }
.badge-info    { background:#dbeafe; color:#1e3a8a; }
.badge-purple  { background:#ede9fe; color:#4c1d95; }
.badge-secondary { background:#f1f5f9; color:#475569; }

/* ── PROGRESS ────────────────────────────────────────────── */
.progress-wrap { height:6px; background:var(--bg2); border-radius:3px; overflow:hidden; }
.progress-fill { height:100%; border-radius:3px; transition:width 0.5s; }
.bg-success { background:var(--success); }
.bg-warning { background:var(--warning); }
.bg-danger  { background:var(--danger); }
.bg-info    { background:var(--info); }
.bg-blue    { background:var(--info); }

/* ── MODALS ──────────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.4); backdrop-filter:blur(3px); z-index:300; display:flex; align-items:center; justify-content:center; padding:16px; }
.modal { background:var(--surface); border-radius:14px; width:100%; max-width:560px; max-height:92vh; overflow-y:auto; box-shadow:var(--shadow-lg); }
.modal-lg { max-width:720px; }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border); }
.modal-head h3 { font-size:16px; font-weight:700; }
.modal-close { background:none; border:none; font-size:20px; cursor:pointer; color:var(--text3); padding:2px 6px; line-height:1; }
.modal-close:hover { color:var(--danger); }
.modal-body { padding:22px; }
.modal-footer { padding:14px 22px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end; }

/* ── VEHICLE CARDS ───────────────────────────────────────── */
.vehicles-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.vcard { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.vcard.compact { padding:14px; }
.vcard-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
.vcard-plate { font-family:'Courier New',monospace; font-size:17px; font-weight:800; color:var(--text); letter-spacing:1px; }
.vcard-model { font-size:12px; color:var(--text3); margin-top:2px; }
.vcard-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:12px; }
.vs-label { font-size:10px; color:var(--text3); text-transform:uppercase; }
.vs-val { font-size:14px; font-weight:700; font-family:'Courier New',monospace; margin-top:2px; }
.vcard-service { margin-bottom:12px; }
.vcard-driver { font-size:12px; color:var(--text2); margin-bottom:12px; padding:6px 10px; background:var(--bg2); border-radius:6px; }
.vcard-actions { display:flex; gap:6px; flex-wrap:wrap; }
.vehicle-mini { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.vehicle-mini:last-child { border-bottom:none; }
.vm-left .plate { font-size:13px; }
.vm-model { font-size:11px; color:var(--text3); margin-top:2px; }
.vm-bar { flex:1; }
.vm-km { font-size:11px; color:var(--text3); margin-top:3px; font-family:'Courier New',monospace; }

/* ── TWO COL ─────────────────────────────────────────────── */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

/* ── GPS ─────────────────────────────────────────────────── */
.gps-layout { display:grid; grid-template-columns:280px 1fr; gap:0; height:560px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface); box-shadow:var(--shadow); }
.gps-sidebar { border-right:1px solid var(--border); overflow-y:auto; background:var(--surface); }
.gps-search { padding:10px; border-bottom:1px solid var(--border); }
.vehicle-track-card { padding:12px 14px; border-bottom:1px solid var(--border); cursor:pointer; transition:background 0.15s; }
.vehicle-track-card:hover,.vehicle-track-card.selected { background:var(--bg2); }
.vtc-left { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.vtc-right { display:flex; justify-content:space-between; align-items:center; }
.vtc-plate { font-family:'Courier New',monospace; font-weight:700; font-size:14px; }
.vtc-model { font-size:11px; color:var(--text3); }
.vtc-driver { font-size:11px; color:var(--text2); margin-top:2px; }
.vtc-indicator { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.vtc-indicator.online { background:var(--success); box-shadow:0 0 6px var(--success); }
.vtc-indicator.stale  { background:var(--warning); }
.vtc-indicator.offline{ background:var(--text3); }
.gps-map-wrap { position:relative; height:100%; min-height:480px; display:flex; flex-direction:column; }
#map { width:100%; flex:1; min-height:480px; z-index:1; }
.gps-info-panel { position:absolute; top:10px; right:10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; width:240px; z-index:10; box-shadow:var(--shadow-lg); }
.gps-panel-close { position:absolute; top:8px; right:8px; background:none; border:none; font-size:16px; cursor:pointer; color:var(--text3); }
.gip-plate { font-family:'Courier New',monospace; font-size:18px; font-weight:800; color:var(--text); }
.gip-model { font-size:12px; color:var(--text3); margin-bottom:10px; }
.gip-row { display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--border); font-size:12.5px; }
.gip-row:last-of-type { border-bottom:none; }
.gps-panel-actions { margin-top:10px; }
.map-controls { position:absolute; bottom:20px; left:10px; z-index:10; display:flex; flex-direction:column; gap:4px; }
.map-ctrl-btn { width:34px; height:34px; background:var(--surface); border:1px solid var(--border); border-radius:6px; cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); }
.map-ctrl-btn:hover { background:var(--bg2); color:var(--primary); }

/* ── GPS MAP LAYER/VIEW/ZOOM CONTROLS (item 11) ─────────────── */
.gps-map-controls { position:absolute; top:10px; left:10px; z-index:15; display:flex; gap:8px; flex-wrap:wrap; max-width:calc(100% - 20px); }
.gps-layer-switcher { display:flex; background:var(--surface); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow); overflow:hidden; }
.gps-layer-btn { padding:7px 12px; border:none; background:transparent; font-size:12.5px; font-weight:600; color:var(--text3); cursor:pointer; white-space:nowrap; border-right:1px solid var(--border); transition:background 0.15s,color 0.15s; }
.gps-layer-btn:last-child { border-right:none; }
.gps-layer-btn:hover { background:var(--bg2); }
.gps-layer-btn.active { background:var(--primary); color:#fff; }
.gps-view-toggle button { padding:7px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface); font-size:12.5px; font-weight:600; color:var(--text3); cursor:pointer; box-shadow:var(--shadow); white-space:nowrap; transition:background 0.15s,color 0.15s; }
.gps-view-toggle button:hover { background:var(--bg2); }
.gps-view-toggle button.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.gps-zoom-controls { position:absolute; bottom:20px; right:10px; z-index:15; display:flex; flex-direction:column; gap:4px; }
.gps-zoom-controls button { width:38px; height:38px; background:var(--surface); border:1px solid var(--border); border-radius:8px; cursor:pointer; font-size:17px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); font-weight:700; color:var(--text); transition:background 0.15s; }
.gps-zoom-controls button:hover { background:var(--primary); color:#fff; }
#map { transition:transform 0.35s ease; }
@media(max-width:600px){
  .gps-layer-btn { padding:6px 9px; font-size:11.5px; }
  .gps-view-toggle button { padding:6px 9px; font-size:11.5px; }
}

/* ── REPORTS ─────────────────────────────────────────────── */
.cost-row { display:flex; align-items:center; gap:12px; padding:8px 0; }
.cost-icon { font-size:18px; flex-shrink:0; width:24px; }
.cost-label { min-width:120px; font-size:13px; }
.cost-bar-wrap { flex:1; }
.cost-val { min-width:100px; text-align:right; font-family:'Courier New',monospace; font-weight:700; font-size:13px; }
.trend-chart { display:flex; align-items:flex-end; gap:8px; padding:10px 0 0; }
.trend-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.trend-bars { display:flex; align-items:flex-end; gap:3px; height:130px; }
.trend-bar { width:16px; border-radius:3px 3px 0 0; min-height:3px; transition:height 0.5s; }
.trend-bar.rev  { background:var(--success); }
.trend-bar.cost { background:var(--danger); opacity:0.7; }
.trend-label { font-size:11px; color:var(--text3); font-weight:600; }
.trend-net { font-size:11px; font-weight:700; font-family:'Courier New',monospace; }
.trend-legend { display:flex; gap:20px; padding:10px 0; font-size:12px; color:var(--text3); }
.legend-rev::before  { content:'■'; color:var(--success); margin-right:4px; }
.legend-cost::before { content:'■'; color:var(--danger); margin-right:4px; }

/* ── PROFILE ─────────────────────────────────────────────── */
.profile-info { text-align:center; padding:20px 0; }
.profile-avatar { width:72px; height:72px; background:var(--primary); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; color:#fff; margin:0 auto 12px; }
.info-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); font-size:13.5px; }
.info-row span { color:var(--text3); }

/* ── LICENCE CARD ────────────────────────────────────────── */
.licence-card { background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dk) 100%); border-radius:14px; padding:22px; color:#fff; position:relative; overflow:hidden; }
.lic-watermark { position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:72px; opacity:0.1; }
.lic-header { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; opacity:0.7; margin-bottom:8px; }
.lic-name { font-size:22px; font-weight:800; margin-bottom:4px; }
.lic-no { font-family:'Courier New',monospace; font-size:14px; opacity:0.8; margin-bottom:16px; }
.lic-meta { display:flex; gap:20px; flex-wrap:wrap; }
.lm-label { font-size:10px; text-transform:uppercase; letter-spacing:1px; opacity:0.6; }
.lm-val { font-size:14px; font-weight:700; margin-top:2px; }

/* ── SDK ─────────────────────────────────────────────────── */
.sdk-hero { background:linear-gradient(135deg, var(--primary-dk) 0%, var(--primary) 100%); border-radius:14px; padding:40px; margin-bottom:24px; text-align:center; color:#fff; }
.sdk-title { font-size:30px; font-weight:800; margin-bottom:10px; }
.sdk-sub { opacity:0.8; font-size:15px; max-width:460px; margin:0 auto 24px; line-height:1.6; }
.sdk-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:16px; }
.sdk-note { font-size:12px; opacity:0.6; }
.sdk-feat { display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--border); }
.sdk-feat:last-child { border-bottom:none; }
.sf-icon { font-size:22px; flex-shrink:0; width:28px; }
.sdk-feature-list { padding:0 4px; }
.sdk-feat p { font-size:12px; color:var(--text3); margin-top:2px; }
.code-block { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:16px; font-family:'Courier New',monospace; font-size:12px; line-height:1.6; overflow-x:auto; white-space:pre; }

/* ── PHOTO ───────────────────────────────────────────────── */
.photo-thumb { font-size:16px; margin-right:4px; cursor:pointer; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:900px){
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .sidebar-toggle { display:block; }
  .topbar { left:0; }
  .main-content { margin-left:0; }
  .two-col { grid-template-columns:1fr; }
  .gps-layout { grid-template-columns:1fr; height:auto; }
  .gps-sidebar { height:220px; }
  .form-grid { grid-template-columns:1fr; }
  .form-span-2 { grid-column:span 1; }
  .metrics-row { grid-template-columns:repeat(2,1fr); }
  .metric-card { min-width:0; }
}
@media(max-width:600px){
  .page-wrap { padding:14px; }
  .vehicles-grid { grid-template-columns:1fr; }
  .sdk-hero { padding:24px; }
}

/* ═══════════════════════════════════════════════════════════
   v2.5 ADDITIONS — Settings, Smart Login, Branding, Intl Plates
   ═══════════════════════════════════════════════════════════ */

/* ── AUTH v2.5 updates ──────────────────────────────────── */
.auth-body { background: linear-gradient(135deg, var(--primary-dk,#1a3a1e) 0%, var(--primary,#2d7a3a) 50%, var(--primary-dk,#1a3a1e) 100%); }
.form-hint { font-size:11px; color:var(--text3); margin-top:4px; }
.input-with-toggle { position:relative; }
.input-with-toggle .form-control { padding-right:40px; }
.pass-toggle { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:16px; padding:0; line-height:1; color:var(--text3); }
.pass-toggle:hover { color:var(--primary); }
.auth-hint-box { margin-top:16px; background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:12px 14px; font-size:12px; color:var(--text2); line-height:1.8; }
.auth-hint-box code { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:1px 5px; font-family:monospace; color:var(--primary); font-size:11px; }

/* ── DYNAMIC BRANDING (sidebar uses CSS vars) ────────────── */
.sidebar { background:var(--primary,#1a3a1e) !important; }
.sidebar .nav-item.active { background:rgba(245,158,11,0.18); color:var(--accent,#f59e0b) !important; }
.sidebar .nav-item:hover  { background:rgba(255,255,255,0.08); }
.sidebar-brand .logo-text span { color:var(--accent,#f59e0b); }
.btn-primary { background:var(--primary,#2d7a3a); }
.btn-primary:hover { background:var(--primary-dk,#1a5228); }
.form-control:focus { border-color:var(--primary,#2d7a3a); box-shadow:0 0 0 3px rgba(45,122,58,0.15); }
.topbar { border-bottom:2px solid rgba(45,122,58,0.2); }
.metric-card.green::after { background:var(--primary,#16a34a); }
.tab-btn.active { background:var(--primary,#2d7a3a); }
.card-head { border-left:3px solid var(--primary,#2d7a3a); }
.page-header h1 { color:var(--primary-dk,#1a3a1e); }

/* ── SIDEBAR LOGO IMAGE ─────────────────────────────────── */
.sidebar-logo-img { max-height:44px; max-width:180px; object-fit:contain; border-radius:6px; padding:2px; background:rgba(255,255,255,0.9); }

/* ── SETTINGS PAGE ──────────────────────────────────────── */
.settings-layout { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.settings-layout .card { margin-bottom:0; }
.settings-layout .card:last-child { grid-column:1/-1; }
.card-body { padding:18px 20px; }

/* Branding preview */
.branding-preview {
  display:flex; height:120px; border-radius:10px; overflow:hidden;
  border:1px solid var(--border); box-shadow:var(--shadow);
  --prev-primary:#2d7a3a; --prev-accent:#f59e0b;
}
.bp-sidebar { width:140px; background:var(--prev-primary); padding:10px 8px; flex-shrink:0; }
.bp-logo-img { max-height:28px; max-width:120px; object-fit:contain; border-radius:3px; background:rgba(255,255,255,0.9); padding:2px; margin-bottom:8px; display:block; }
.bp-logo-placeholder { font-size:10px; font-weight:700; color:rgba(255,255,255,0.9); margin-bottom:8px; }
.bp-nav-item { font-size:9px; color:rgba(255,255,255,0.7); padding:3px 5px; border-radius:3px; margin-bottom:3px; }
.bp-nav-item.active { background:rgba(245,158,11,0.22); color:var(--prev-accent); }
.bp-content { flex:1; background:var(--bg); display:flex; flex-direction:column; }
.bp-topbar { height:22px; background:var(--surface); border-bottom:1px solid var(--border); padding:0 10px; font-size:9px; color:var(--text3); line-height:22px; font-weight:600; }
.bp-card { margin:8px; background:var(--surface); border-radius:6px; padding:8px 10px; border:1px solid var(--border); flex:1; }
.bp-metric { font-size:15px; font-weight:800; color:var(--prev-primary); }
.bp-label { font-size:8px; color:var(--text3); margin-top:2px; }

/* Color inputs */
.color-input-wrap { display:flex; align-items:center; gap:8px; }
.color-swatch { width:42px; height:38px; border-radius:8px; border:2px solid var(--border); cursor:pointer; padding:2px; flex-shrink:0; }
.color-swatch::-webkit-color-swatch-wrapper { padding:0; border-radius:4px; }
.color-swatch::-webkit-color-swatch { border:none; border-radius:4px; }
.color-input-wrap .form-control { flex:1; }

/* Color presets */
.color-presets { display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap; }
.preset-label { font-size:12px; color:var(--text3); font-weight:500; }
.preset-btn { width:30px; height:30px; border-radius:50%; border:2px solid var(--border); cursor:pointer; position:relative; overflow:hidden; transition:transform 0.15s; }
.preset-btn:hover { transform:scale(1.2); border-color:var(--text2); }
.preset-accent { position:absolute; bottom:0; right:0; width:12px; height:12px; border-radius:50% 0 0 0; }

/* ── INTERNATIONAL PLATE ────────────────────────────────── */
.plate-country-badge { display:inline-block; background:var(--primary); color:#fff; font-size:9px; font-weight:700; padding:1px 4px; border-radius:3px; margin-right:4px; letter-spacing:0.5px; vertical-align:middle; }
.vcard-plate { display:flex; align-items:center; }

/* ── MISC v2.5 ──────────────────────────────────────────── */
.hidden-sm { }
.items-center { align-items:center; }
@media(max-width:900px){
  .settings-layout { grid-template-columns:1fr; }
  .settings-layout .card:last-child { grid-column:1; }
  .hidden-sm { display:none; }
}

/* ══════════════════════════════════════════════════════════════
   Fleets Hub Africa v1.0 Additions
   Module system, OBD-II, Branches, Platform, Alert styles
   ══════════════════════════════════════════════════════════════ */

/* Dynamic primary/accent from inline style vars */
.sidebar           { background:var(--primary,#1a3a1e) !important; }
.sidebar-logo-img  { max-height:44px;max-width:170px;object-fit:contain;border-radius:6px;padding:2px;background:rgba(255,255,255,0.92); }
.nav-item.active   { background:rgba(255,255,255,0.12);color:var(--accent,#f59e0b) !important; }
.nav-divider       { font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,0.3);padding:12px 16px 4px;margin-top:4px; }
.btn-primary       { background:var(--primary,#2d7a3a) !important; }
.btn-primary:hover { background:var(--primary-dk,#1a5228) !important; }
.form-control:focus{ border-color:var(--primary,#2d7a3a);box-shadow:0 0 0 3px rgba(45,122,58,0.15); }
.card-head         { border-left:3px solid var(--primary,#2d7a3a); }

/* Auth body uses dynamic primary */
.auth-body { background:linear-gradient(135deg,var(--primary-dk,#1a3a1e),var(--primary,#2d7a3a),var(--primary-dk,#1a3a1e)); }
.form-hint { font-size:11px;color:var(--text3);margin-top:4px; }
.input-with-toggle { position:relative; }
.input-with-toggle .form-control { padding-right:42px; }
.pass-toggle { position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:16px;color:var(--text3);padding:0;line-height:1; }
.auth-hint-box { margin-top:14px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:12px 14px;font-size:12px;color:var(--text2);line-height:1.8; }
.auth-hint-box code { background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-family:monospace;font-size:11px;color:var(--primary); }

/* Module locked alert */
.module-locked { text-align:center;padding:60px 30px; }
.module-locked-icon { font-size:56px;margin-bottom:12px; }
.module-locked h2 { color:var(--primary);margin-bottom:8px; }
.module-locked p  { color:var(--text3);max-width:400px;margin:0 auto 16px; }

/* OBD-II specific */
.obd-gauge { background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px;text-align:center; }
.obd-val { font-size:28px;font-weight:800;font-family:monospace;color:var(--primary); }
.obd-val.warn { color:var(--warning); }
.obd-val.crit { color:var(--danger); }
.obd-lbl { font-size:11px;color:var(--text3);margin-top:3px;text-transform:uppercase;letter-spacing:0.5px; }
.obd-metrics { display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-bottom:20px; }

/* Plate + country badge */
.plate-country-badge { display:inline-block;background:var(--primary);color:#fff;font-size:8px;font-weight:800;padding:1px 4px;border-radius:3px;margin-right:5px;vertical-align:middle;letter-spacing:0.5px; }

/* Platform owner badge in sidebar */
.plat-link-badge { display:inline-block;background:#f59e0b;color:#0f172a;font-size:8px;font-weight:800;padding:1px 5px;border-radius:3px;margin-left:4px;vertical-align:middle; }

/* Settings layout */
.settings-layout { display:grid;grid-template-columns:1fr 1fr;gap:20px; }
.settings-layout .card:last-child { grid-column:1/-1; }
.card-body { padding:18px 20px; }
.color-input-wrap { display:flex;align-items:center;gap:8px; }
.color-swatch { width:42px;height:38px;border-radius:8px;border:2px solid var(--border);cursor:pointer;padding:2px;flex-shrink:0; }
.color-swatch::-webkit-color-swatch-wrapper { padding:0;border-radius:4px; }
.color-swatch::-webkit-color-swatch { border:none;border-radius:4px; }
.color-presets { display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap; }
.preset-label  { font-size:12px;color:var(--text3);font-weight:500; }
.preset-btn { width:30px;height:30px;border-radius:50%;border:2px solid var(--border);cursor:pointer;position:relative;overflow:hidden;transition:transform 0.15s; }
.preset-btn:hover { transform:scale(1.2);border-color:var(--text2); }
.preset-accent { position:absolute;bottom:0;right:0;width:12px;height:12px;border-radius:50% 0 0 0; }
.branding-preview { display:flex;height:120px;border-radius:10px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);--prev-primary:#2d7a3a;--prev-accent:#f59e0b; }
.bp-sidebar { width:140px;background:var(--prev-primary);padding:10px 8px;flex-shrink:0; }
.bp-logo-img { max-height:28px;max-width:120px;object-fit:contain;border-radius:3px;background:rgba(255,255,255,0.9);padding:2px;margin-bottom:8px;display:block; }
.bp-logo-placeholder { font-size:10px;font-weight:700;color:rgba(255,255,255,0.9);margin-bottom:8px; }
.bp-nav-item { font-size:9px;color:rgba(255,255,255,0.7);padding:3px 5px;border-radius:3px;margin-bottom:3px; }
.bp-nav-item.active { background:rgba(245,158,11,0.25);color:var(--prev-accent); }
.bp-content { flex:1;background:var(--bg);display:flex;flex-direction:column; }
.bp-topbar { height:22px;background:var(--surface);border-bottom:1px solid var(--border);padding:0 10px;font-size:9px;color:var(--text3);line-height:22px;font-weight:600; }
.bp-card { margin:8px;background:var(--surface);border-radius:6px;padding:8px 10px;border:1px solid var(--border);flex:1; }
.bp-metric { font-size:15px;font-weight:800;color:var(--prev-primary); }
.bp-label { font-size:8px;color:var(--text3);margin-top:2px; }

/* Alert divider */
.alert-strip { display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:8px;font-size:13px; }
.alert-strip.alert-warning { background:#fff8e1;border:1px solid #f59e0b;color:#854d0e; }
.alert-strip.alert-danger  { background:#fee2e2;border:1px solid var(--danger);color:#7f1d1d; }
.alert-strip.alert-info    { background:#e0f2fe;border:1px solid var(--info);color:#0c4a6e; }

/* Code block */
.code-block { background:var(--text);color:var(--primary-lt);font-family:monospace;font-size:12px;padding:12px 14px;border-radius:8px;overflow-x:auto;margin:8px 0; }

/* Misc additions */
.divider { border:none;border-top:1px solid var(--border);margin:16px 0; }
.text-xs  { font-size:11px; }
.text-center { text-align:center; }
.mt-3 { margin-top:12px; }
.mt-4 { margin-top:20px; }
.mb-3 { margin-bottom:12px; }
.mb-4 { margin-bottom:20px; }
.p-3  { padding:12px; }
.gap-2 { gap:8px; }
.flex { display:flex; }
.selected-card { border:2px solid var(--primary) !important;box-shadow:0 0 0 3px rgba(45,122,58,0.12); }
.info-row { display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:13.5px; }
.info-row:last-child { border-bottom:none; }
.two-col { display:grid;grid-template-columns:1fr 1fr;gap:20px; }
.page-actions { display:flex;gap:8px;align-items:center; }

@media(max-width:900px){
  .two-col,.settings-layout { grid-template-columns:1fr; }
  .settings-layout .card:last-child { grid-column:1; }
  .hidden-sm { display:none; }
  .obd-metrics { grid-template-columns:repeat(2,1fr); }
}

/* ── MISSING / EXTRA CLASSES PATCH ──────────────────────── */
.form-label   { display:block; font-size:13px; font-weight:600; color:var(--text2); margin-bottom:5px; }
.w-100        { width:100%; }
.fw-bold      { font-weight:700; }
.text-success { color:var(--success,#16a34a); }
.text-danger  { color:var(--danger,#dc2626); }
.text-warning { color:var(--warning,#d97706); }
.text-muted   { color:var(--text3); }
.text-center  { text-align:center; }
.text-right   { text-align:right; }
.mono         { font-family:monospace; }
.mt-1 { margin-top:4px; }
.mt-2 { margin-top:8px; }
.mt-3 { margin-top:12px; }
.mt-4 { margin-top:20px; }
.mb-1 { margin-bottom:4px; }
.mb-2 { margin-bottom:8px; }
.mb-3 { margin-bottom:12px; }
.mb-4 { margin-bottom:20px; }
.p-3  { padding:12px; }
.p-4  { padding:20px; }
.gap-2 { gap:8px; }
.gap-3 { gap:12px; }
.flex { display:flex; }
.flex-wrap { flex-wrap:wrap; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.hidden { display:none !important; }
.ms-auto { margin-left:auto; }
.btn-xs { padding:3px 8px; font-size:11px; border-radius:4px; }

/* Vehicle mini rows on dashboard */
.vehicle-mini { display:flex; align-items:center; gap:12px; padding:10px 18px; border-bottom:1px solid var(--border); }
.vehicle-mini:last-child { border-bottom:none; }
.vm-left { display:flex; flex-direction:column; gap:3px; min-width:90px; }
.vm-model { font-size:11px; color:var(--text3); }
.vm-bar { flex:1; }
.vm-km { font-size:11px; color:var(--text3); margin-top:3px; }

/* Page header */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:10px; }
.page-header h1, .page-header h2 { margin:0; font-size:22px; color:var(--primary-dk,#1a3a1e); }
.page-sub { font-size:13px; color:var(--text3); }
.page-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* Metrics row (duplicate selector removed - canonical definition is above; kept for metric-card accent styling only) */
.metric-card { border-radius:10px; }
.metric-card::after { content:''; position:absolute; top:0; left:0; width:4px; height:100%; background:var(--primary,#2d7a3a); }
.metric-card.green::after { background:#16a34a; }
.metric-card.blue::after  { background:#2563eb; }
.metric-card.red::after   { background:#dc2626; }
.metric-card.amber::after { background:#d97706; }
.metric-icon { font-size:22px; margin-bottom:6px; }
.metric-val  { font-size:22px; font-weight:800; color:var(--text); line-height:1.1; }
.metric-lbl  { font-size:11px; color:var(--text3); margin-top:4px; text-transform:uppercase; letter-spacing:0.5px; }

/* Progress bar */
.progress-wrap { height:6px; background:var(--bg2); border-radius:3px; overflow:hidden; }
.progress-fill { height:100%; border-radius:3px; transition:width 0.3s; }
.bg-success { background:#16a34a; }
.bg-warning { background:#d97706; }
.bg-danger  { background:#dc2626; }

/* Badges */
.badge { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; }
.badge-success { background:rgba(22,163,74,0.12); color:#16a34a; border:1px solid #16a34a; }
.badge-warning { background:rgba(215,119,11,0.12); color:#d97706; border:1px solid #d97706; }
.badge-danger  { background:rgba(220,38,38,0.12);  color:#dc2626; border:1px solid #dc2626; }
.badge-info    { background:rgba(37,99,235,0.12);   color:#2563eb; border:1px solid #2563eb; }
.badge-secondary{ background:var(--bg2); color:var(--text3); border:1px solid var(--border); }

/* Plate display */
.plate { font-family:monospace; font-weight:800; font-size:14px; letter-spacing:1px; color:var(--text); }

/* Table */
.table-wrap { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; font-size:13.5px; }
.table th { background:var(--bg2); padding:9px 14px; text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--text3); border-bottom:2px solid var(--border); white-space:nowrap; }
.table td { padding:10px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
.table tr:last-child td { border-bottom:none; }
.table tr:hover td { background:var(--bg2); }

/* Two col layout */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

/* Card */
.card { background:var(--surface); border:1px solid var(--border); border-radius:10px; margin-bottom:20px; overflow:hidden; }
.card-head { padding:12px 18px; border-bottom:1px solid var(--border); font-size:14px; font-weight:700; color:var(--text); display:flex; align-items:center; justify-content:space-between; }

/* Alerts */
.alert { padding:12px 16px; border-radius:8px; margin-bottom:14px; font-size:13.5px; }
.alert-success { background:#f0fdf4; border:1px solid #86efac; color:#166534; }
.alert-danger  { background:#fef2f2; border:1px solid #fca5a5; color:#7f1d1d; }
.alert-warning { background:#fffbeb; border:1px solid #fcd34d; color:#713f12; }
.alert-info    { background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; }

/* Form */
.form-control { width:100%; border:1.5px solid var(--border); border-radius:8px; padding:9px 12px; font-size:13.5px; font-family:inherit; color:var(--text); background:var(--surface); outline:none; box-sizing:border-box; transition:border-color 0.15s; }
.form-control:focus { border-color:var(--primary,#2d7a3a); box-shadow:0 0 0 3px rgba(45,122,58,0.12); }
.form-control-sm { padding:6px 10px; font-size:12px; }
.form-group { margin-bottom:14px; }
.form-hint { font-size:11px; color:var(--text3); margin-top:4px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-span-2 { grid-column:1/-1; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:8px; border:none; font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit; text-decoration:none; transition:all 0.15s; }
.btn-primary   { background:var(--primary,#2d7a3a); color:#fff; }
.btn-primary:hover { background:var(--primary-dk,#1a5228); }
.btn-secondary { background:var(--bg2); color:var(--text); border:1px solid var(--border); }
.btn-outline   { background:transparent; color:var(--primary,#2d7a3a); border:1.5px solid var(--primary,#2d7a3a); }
.btn-outline:hover { background:var(--primary,#2d7a3a); color:#fff; }
.btn-danger    { background:#dc2626; color:#fff; }
.btn-sm        { padding:6px 12px; font-size:12px; }
.btn-lg        { padding:12px 24px; font-size:15px; }

/* Auth */
.auth-body { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:linear-gradient(135deg,var(--primary-dk,#1a3a1e),var(--primary,#2d7a3a)); }
.auth-wrap { width:100%; max-width:440px; }
.auth-card { background:#fff; border-radius:16px; padding:36px; box-shadow:0 20px 40px rgba(0,0,0,0.2); }
.auth-logo { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.logo-icon { width:40px; height:40px; background:var(--primary,#2d7a3a); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; }
.logo-text { font-size:20px; font-weight:800; color:#1a3a1e; }
.logo-text span { color:var(--accent,#f59e0b); }
.auth-title { font-size:22px; font-weight:800; color:#1a3a1e; margin:0 0 6px; }
.auth-sub { font-size:13px; color:#6b9e70; margin:0 0 22px; }
.auth-switch { font-size:13px; color:#6b9e70; text-align:center; }
.auth-switch a { color:var(--primary,#2d7a3a); font-weight:600; text-decoration:none; }
.auth-hint-box { margin-top:14px; background:#f0f9ec; border:1px solid #c8e6c9; border-radius:8px; padding:12px 14px; font-size:12px; color:#3d6b42; line-height:1.8; }
.auth-hint-box code { background:#fff; border:1px solid #c8e6c9; border-radius:4px; padding:1px 5px; font-family:monospace; font-size:11px; }
.input-with-toggle { position:relative; }
.input-with-toggle .form-control { padding-right:42px; }
.pass-toggle { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:16px; color:#6b9e70; padding:0; line-height:1; }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal { background:var(--surface); border-radius:12px; width:100%; max-width:620px; max-height:90vh; overflow-y:auto; box-shadow:0 25px 50px rgba(0,0,0,0.3); }
.modal-lg { max-width:800px; }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
.modal-head h3 { margin:0; font-size:17px; }
.modal-close { background:none; border:none; font-size:20px; cursor:pointer; color:var(--text3); padding:0; line-height:1; }
.modal-body { padding:20px; }
.modal-footer { padding:14px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; }

/* Vehicles grid */
.vehicles-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; margin-bottom:20px; }
.vcard { background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.vcard-head { display:flex; justify-content:space-between; align-items:flex-start; padding:14px 16px 10px; }
.vcard-plate { font-family:monospace; font-weight:800; font-size:16px; letter-spacing:1px; }
.vcard-model { font-size:12px; color:var(--text3); margin-top:2px; }
.vcard-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:10px 16px; background:var(--bg2); }
.vs-label { font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:0.5px; }
.vs-val { font-size:14px; font-weight:700; color:var(--text); }
.vcard-service { padding:10px 16px; }
.vcard-driver { padding:6px 16px; font-size:12px; color:var(--text3); background:var(--bg2); }
.vcard-actions { padding:12px 16px; display:flex; gap:8px; flex-wrap:wrap; }

/* Sidebar */
:root { --primary:#2d7a3a; --primary-dk:#1a3a1e; --primary-lt:#e5f5e0; --primary-md:#a8d5b0; --accent:#f59e0b; --accent-dk:#d97706; --surface:#fff; --bg:#f4fbf1; --bg2:#e5f5e0; --border:#c8e6c9; --text:#1a3a1e; --text2:#3d6b42; --text3:#6b9e70; --success:#16a34a; --danger:#dc2626; --warning:#d97706; --info:#2563eb; --shadow:0 2px 8px rgba(0,0,0,0.08); --radius:8px; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--primary); }

.sidebar { position:fixed; top:0; left:0; width:220px; height:100vh; background:var(--primary-dk,#1a3a1e); display:flex; flex-direction:column; overflow-y:auto; z-index:100; }
.sidebar-brand { padding:16px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,0.1); }
.sidebar-logo-img { max-height:40px; max-width:160px; object-fit:contain; border-radius:6px; background:rgba(255,255,255,0.9); padding:2px; }
.logo-text { font-size:16px; font-weight:800; color:#fff; }
.logo-text span { color:var(--accent,#f59e0b); }
.nav-item { display:flex; align-items:center; gap:10px; padding:10px 16px; color:rgba(255,255,255,0.75); text-decoration:none; font-size:13.5px; font-weight:500; transition:all 0.15s; position:relative; }
.nav-item:hover { background:rgba(255,255,255,0.08); color:#fff; }
.nav-item.active { background:rgba(255,255,255,0.12); color:var(--accent,#f59e0b); }
.nav-icon { font-size:16px; width:20px; text-align:center; flex-shrink:0; }
.nav-badge { margin-left:auto; background:var(--danger,#dc2626); color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:10px; }
.nav-divider { font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:rgba(255,255,255,0.3); padding:12px 16px 4px; }
.sidebar-footer { margin-top:auto; padding:14px 16px; border-top:1px solid rgba(255,255,255,0.1); }
.user-pill { display:flex; align-items:center; gap:10px; }
.avatar { width:34px; height:34px; background:var(--accent,#f59e0b); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:var(--primary-dk,#1a3a1e); flex-shrink:0; }
.user-info { flex:1; min-width:0; }
.uname { font-size:12px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.urole { font-size:10px; color:rgba(255,255,255,0.5); text-transform:capitalize; }
.logout-btn { color:rgba(255,255,255,0.4); font-size:16px; text-decoration:none; padding:4px; }
.logout-btn:hover { color:#fff; }

.topbar { position:fixed; top:0; left:220px; right:0; height:54px; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 20px; z-index:99; gap:14px; }
.topbar-title { font-size:15px; font-weight:700; color:var(--text); }
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.biz-name { font-size:13px; color:var(--text3); font-weight:500; }
.notif-btn { display:flex; align-items:center; gap:4px; text-decoration:none; color:var(--text); font-size:15px; position:relative; }
.notif-count { background:var(--danger); color:#fff; font-size:9px; font-weight:800; padding:1px 5px; border-radius:10px; }
.sidebar-toggle { display:none; background:none; border:none; font-size:20px; cursor:pointer; color:var(--text); padding:4px; }

.main-content { margin-left:220px; padding-top:54px; min-height:100vh; }
.page-wrap { padding:24px; max-width:1400px; }

/* Code block */
.code-block { background:var(--text); color:#a5d6a7; font-family:monospace; font-size:12px; padding:12px 14px; border-radius:8px; overflow-x:auto; white-space:pre-wrap; word-break:break-all; }

/* Info row */
.info-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--border); font-size:13.5px; }
.info-row:last-child { border-bottom:none; }

/* Divider */
.divider { border:none; border-top:1px solid var(--border); margin:16px 0; }

/* Plate country badge */
.plate-country-badge { display:inline-block; background:var(--primary); color:#fff; font-size:8px; font-weight:800; padding:1px 4px; border-radius:3px; margin-right:4px; vertical-align:middle; }

@media(max-width:900px){
  .sidebar { transform:translateX(-100%); transition:transform 0.25s; }
  .sidebar.open { transform:translateX(0); }
  .sidebar-toggle { display:block; }
  .topbar { left:0; }
  .main-content { margin-left:0; }
  .two-col,.form-grid,.metrics-row { grid-template-columns:1fr; }
  .form-span-2 { grid-column:1; }
  .vehicles-grid { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════
   v5.1 — MOBILE / PHONE FRIENDLY IMPROVEMENTS
   ═══════════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Page padding */
  .page-wrap, .content { padding:12px; }
  .page-header { flex-direction:column; align-items:stretch; gap:10px; }
  .page-header h1 { font-size:18px; }
  .page-header .btn, .page-actions .btn { width:100%; justify-content:center; }
  .page-actions { display:flex; flex-direction:column; gap:8px; width:100%; }

  /* Cards & metrics stack */
  .metrics-row { grid-template-columns:repeat(2,1fr) !important; gap:8px; }
  .metric-card { min-width:0; padding:12px; }
  .metric-val { font-size:18px; }

  /* Tables: allow horizontal scroll, reduce padding */
  .table-wrap { -webkit-overflow-scrolling:touch; }
  table.table th, table.table td, table th, table td { padding:6px 8px; font-size:12px; white-space:nowrap; }

  /* Modals fill screen on mobile */
  .modal-overlay { padding:0; align-items:flex-end; }
  .modal, .modal-lg, .modal-box { max-width:100%; width:100%; border-radius:16px 16px 0 0; max-height:94vh; }

  /* Forms: single column, larger touch targets */
  .form-grid { grid-template-columns:1fr !important; gap:10px; }
  .form-control, .inp, select, input, textarea, button { font-size:15px; }
  .btn { min-height:42px; }
  .btn-xs { min-height:32px; padding:4px 10px; }

  /* Vehicle / branch grid: single column */
  .vehicles-grid { grid-template-columns:1fr !important; }

  /* Chat: full-screen single-pane on mobile. The message pane (General or DM) is
     always shown by default; the contacts/team list becomes a slide-out drawer
     toggled via the "Contacts" button injected into the header. */
  .chat-layout {
    grid-template-columns:1fr !important;
    grid-template-rows:1fr !important;
    height:calc(100vh - 90px) !important;
    position:relative;
    overflow:visible !important; /* allow the contacts drawer to render outside the rounded card */
  }
  .chat-back-link { display:inline-flex !important; }
  .chat-contacts-toggle { display:inline-flex !important; }

  .chat-sidebar {
    position:absolute;
    top:0; left:0; bottom:0;
    width:80%;
    max-width:300px;
    max-height:none !important;
    z-index:20;
    transform:translateX(-100%);
    transition:transform .2s ease;
    box-shadow:4px 0 16px rgba(0,0,0,.15);
  }
  .chat-sidebar.open { transform:translateX(0); }

  .chat-layout > div:last-child { display:flex !important; }

  /* GPS layout already responsive via existing rule, ensure map min-height */
  #map { min-height:300px !important; }

  /* Settings / two-col forms */
  .two-col { grid-template-columns:1fr !important; }

  /* Sidebar overlay backdrop when open */
  .sidebar.open::after { content:''; }

  /* Nav badges remain visible */
  .nav-badge { font-size:10px; }

  /* SDK page cards stack */
  .sdk-grid { grid-template-columns:1fr !important; }
}

@media(max-width:420px){
  .page-header h1 { font-size:16px; }
  .vcard-plate { font-size:14px; }
  .modal-head h3, .modal-body h3 { font-size:15px; }
}

.chat-back-link { display:none; }
.chat-contacts-toggle { display:none; }

/* ── VIEW TOGGLE: Grid / List / Detailed (item 12) ──────────────── */
.view-toggle { display:flex; background:var(--surface); border:1px solid var(--border); border-radius:8px; overflow:hidden; box-shadow:var(--shadow); }
.view-toggle-btn { padding:8px 13px; border:none; background:transparent; font-size:15px; color:var(--text3); cursor:pointer; border-right:1px solid var(--border); transition:background .15s,color .15s; line-height:1; }
.view-toggle-btn:last-child { border-right:none; }
.view-toggle-btn:hover { background:var(--bg2); }
.view-toggle-btn.active { background:var(--primary); color:#fff; }

/* Grid view = the existing card layout, untouched (default, no class needed beyond what's already there) */

/* List view: one compact row per item - keep plate/model/status/driver, hide the heavier stat blocks and progress bar */
.view-list.vehicles-grid { display:flex; flex-direction:column; gap:8px; }
.view-list .vcard { display:flex; align-items:center; gap:16px; padding:10px 16px; }
.view-list .vcard-head { margin-bottom:0; padding:0; flex:1; display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; }
.view-list .vcard-opstatus,
.view-list .vcard-stats,
.view-list .vcard-service { display:none; }
.view-list .vcard-driver { margin:0; padding:4px 10px; flex-shrink:0; white-space:nowrap; }
.view-list .vcard-actions { padding:0; flex-shrink:0; }

/* Detailed-List view: one row per item like List, but keeps the stat figures visible inline instead of hiding them - the "more columns visible at once" option */
.view-detailed.vehicles-grid { display:flex; flex-direction:column; gap:8px; }
.view-detailed .vcard { display:flex; align-items:center; gap:16px; padding:10px 16px; flex-wrap:wrap; }
.view-detailed .vcard-head { margin-bottom:0; padding:0; flex:1 1 200px; min-width:160px; }
.view-detailed .vcard-opstatus { flex:0 0 auto; margin:0; min-width:140px; }
.view-detailed .vcard-stats { flex:1 1 auto; background:transparent; padding:0; margin:0; grid-template-columns:repeat(3,minmax(70px,1fr)); }
.view-detailed .vcard-service { flex:1 1 160px; padding:0; margin:0; }
.view-detailed .vcard-driver { margin:0; padding:4px 10px; flex-shrink:0; white-space:nowrap; background:transparent; }
.view-detailed .vcard-actions { padding:0; flex-shrink:0; }

@media(max-width:760px){
  /* Below this width, row-based views get cramped - fall back to a
     stacked card per item rather than letting content overflow/wrap badly.
     flex-basis/min-width reset to auto since those values were sized for
     the horizontal row layout and would otherwise force extra height
     once the card switches to a column layout. */
  .view-list .vcard,
  .view-detailed .vcard { flex-direction:column; align-items:stretch; }
  .view-list .vcard-head,
  .view-detailed .vcard-head { flex:none; flex-direction:row; align-items:flex-start; justify-content:space-between; min-width:0; width:100%; gap:8px; }
  .view-detailed .vcard-opstatus { flex:none; width:100%; min-width:0; }
  .view-detailed .vcard-stats { flex:none; width:100%; }
  .view-detailed .vcard-service { flex:none; width:100%; }
}

/* ── ITEM 5: MODULE-GATED LAYOUT FALLBACK ───────────────────── */
/* When one card in a two-col row is hidden because its module is
   inactive for this business, the row switches to single-column so
   the remaining card doesn't sit awkwardly constrained to half-width
   with empty space beside it. */
.two-col.single-col { grid-template-columns:1fr; }

/* ── ITEM 16: MOBILE-FRIENDLY DATA TABLES ───────────────────
   On very narrow screens, convert table rows into card-style
   blocks that stack vertically instead of requiring horizontal
   scroll. Each row becomes a "card" with data-label attributes
   showing the column headers inline.
   Pages that opt in: add class "mobile-cards" to .table-wrap */
@media(max-width:600px){
  .table-wrap.mobile-cards { overflow-x:visible; }
  .table-wrap.mobile-cards table { display:block; }
  .table-wrap.mobile-cards thead { display:none; }
  .table-wrap.mobile-cards tbody { display:flex; flex-direction:column; gap:8px; }
  .table-wrap.mobile-cards tr { display:flex; flex-wrap:wrap; gap:4px 12px; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:10px 12px; }
  .table-wrap.mobile-cards td { display:flex; flex-direction:column; font-size:12.5px; }
  .table-wrap.mobile-cards td::before { content:attr(data-label); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--text3); margin-bottom:2px; }
  .table-wrap.mobile-cards td:empty { display:none; }
  .table-wrap.mobile-cards td[colspan] { width:100%; }
}