/* theme.css — Squan light / dark themes for squanfleet.com. The switch (☾ / ☀ next to BETA) sets
   <html data-theme="light|dark">, remembered per browser. Pages keep their own light styles; this file
   supplies the dark versions (and, for pages that are dark by design, the light versions). */
:root { --sq-d-bg: #0b1020; --sq-d-surface: #121a2f; --sq-d-surface2: #18213a; --sq-d-head: #1a2440; --sq-d-line: #26314d;
        --sq-d-ink: #e5e9f5; --sq-d-muted: #94a3b8; --sq-d-link: #7cb6ff; }

/* the switch */
.sq-theme { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(100, 116, 139, .35);
  background: transparent; color: inherit; font-size: 15px; line-height: 1; cursor: pointer; margin-left: 4px; flex: none; }
.sq-theme:hover { background: rgba(100, 116, 139, .14); } .sq-theme:focus-visible { outline: 2px solid #f26b35; outline-offset: 2px; }
.sq-theme-float { position: fixed; right: 16px; bottom: 16px; z-index: 5000; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
html[data-theme=dark] .sq-theme-float { background: var(--sq-d-surface); }

@media screen {
/* ── Dark: shared pages (RVP Report, Fuel codes, Flags, Tampering, Unidentified, Monthly, Activity, password) ── */
html[data-theme=dark]:not(.sq-own-theme) { color-scheme: dark; }
html[data-theme=dark]:not(.sq-own-theme) body { background: var(--sq-d-bg) !important; color: var(--sq-d-ink) !important;
  --ink: var(--sq-d-ink); --muted: var(--sq-d-muted); --line: var(--sq-d-line); --bg: var(--sq-d-bg); --card: var(--sq-d-surface); --blue: var(--sq-d-link); }
html[data-theme=dark]:not(.sq-own-theme) a { color: var(--sq-d-link); }
html[data-theme=dark]:not(.sq-own-theme) header.top, html[data-theme=dark]:not(.sq-own-theme) .tbl, html[data-theme=dark]:not(.sq-own-theme) .card, html[data-theme=dark]:not(.sq-own-theme) .kpis > div, html[data-theme=dark]:not(.sq-own-theme) .kpis > a,
html[data-theme=dark]:not(.sq-own-theme) .summary > div, html[data-theme=dark]:not(.sq-own-theme) .types a, html[data-theme=dark]:not(.sq-own-theme) nav.periods a, html[data-theme=dark]:not(.sq-own-theme) .fviews a, html[data-theme=dark]:not(.sq-own-theme) .seg a,
html[data-theme=dark]:not(.sq-own-theme) nav.tabs a, html[data-theme=dark]:not(.sq-own-theme) details.rev > summary, html[data-theme=dark]:not(.sq-own-theme) .b-quiet, html[data-theme=dark]:not(.sq-own-theme) .b-bad,
html[data-theme=dark]:not(.sq-own-theme) select, html[data-theme=dark]:not(.sq-own-theme) input:not([type=checkbox]):not([type=radio]), html[data-theme=dark]:not(.sq-own-theme) textarea, html[data-theme=dark]:not(.sq-own-theme) button.print {
  background-color: var(--sq-d-surface) !important; color: var(--sq-d-ink); border-color: var(--sq-d-line) !important; }
html[data-theme=dark]:not(.sq-own-theme) nav.periods a.on, html[data-theme=dark]:not(.sq-own-theme) nav.tabs a.on, html[data-theme=dark]:not(.sq-own-theme) .fviews a.on, html[data-theme=dark]:not(.sq-own-theme) .seg a.on {
  background-color: #2b3a8f !important; border-color: #3b4db0 !important; color: #fff !important; }
html[data-theme=dark]:not(.sq-own-theme) th { background: var(--sq-d-head) !important; color: var(--sq-d-muted) !important; }
html[data-theme=dark]:not(.sq-own-theme) td, html[data-theme=dark]:not(.sq-own-theme) th, html[data-theme=dark]:not(.sq-own-theme) .flags > li, html[data-theme=dark]:not(.sq-own-theme) ul.ev li { border-color: var(--sq-d-line) !important; }
html[data-theme=dark]:not(.sq-own-theme) tfoot td, html[data-theme=dark]:not(.sq-own-theme) tr.rvp td { background: var(--sq-d-surface2) !important; }
html[data-theme=dark]:not(.sq-own-theme) tr.rvp td { color: #b9c6ff !important; }
html[data-theme=dark]:not(.sq-own-theme) tr.row:hover td, html[data-theme=dark]:not(.sq-own-theme) tr.link:hover td { background: var(--sq-d-head) !important; }
html[data-theme=dark]:not(.sq-own-theme) .kpis, html[data-theme=dark]:not(.sq-own-theme) .summary { background: var(--sq-d-line) !important; border-color: var(--sq-d-line) !important; }
html[data-theme=dark]:not(.sq-own-theme) .banner, html[data-theme=dark]:not(.sq-own-theme) .why, html[data-theme=dark]:not(.sq-own-theme) .info { background: #1c2540 !important; border-color: #2e3b63 !important; color: #c8d3ee !important; }
html[data-theme=dark]:not(.sq-own-theme) .err, html[data-theme=dark]:not(.sq-own-theme) .bad { background: #3a1518 !important; color: #fecaca !important; }
html[data-theme=dark]:not(.sq-own-theme) .ok { background: #12301f !important; color: #bbf7d0 !important; }
html[data-theme=dark]:not(.sq-own-theme) .tl .inwin td, html[data-theme=dark]:not(.sq-own-theme) .unid td { background: #2a1f14 !important; }
html[data-theme=dark]:not(.sq-own-theme) .fl-review .note, html[data-theme=dark]:not(.sq-own-theme) pre { background: var(--sq-d-surface2) !important; }
html[data-theme=dark]:not(.sq-own-theme) .src { background: #1e2a5a !important; color: #c7d2fe !important; } html[data-theme=dark]:not(.sq-own-theme) .src.camera { background: #4a1d35 !important; color: #fbcfe8 !important; }
html[data-theme=dark]:not(.sq-own-theme) .pill.approved, html[data-theme=dark]:not(.sq-own-theme) .act.signin, html[data-theme=dark]:not(.sq-own-theme) .act.signin_remembered { background: #12301f !important; color: #86efac !important; }
html[data-theme=dark]:not(.sq-own-theme) .pill.ignored, html[data-theme=dark]:not(.sq-own-theme) .act { background: #26314d !important; color: #cbd5e1 !important; }
html[data-theme=dark]:not(.sq-own-theme) .pill.investigating, html[data-theme=dark]:not(.sq-own-theme) .act.password_set_temporary, html[data-theme=dark]:not(.sq-own-theme) .act.password_changed { background: #3a2a0c !important; color: #fcd34d !important; }
html[data-theme=dark]:not(.sq-own-theme) .pill.confirmed, html[data-theme=dark]:not(.sq-own-theme) .act.signin_failed, html[data-theme=dark]:not(.sq-own-theme) .act.signin_blocked, html[data-theme=dark]:not(.sq-own-theme) .act.password_change_failed { background: #3a1518 !important; color: #fca5a5 !important; }
html[data-theme=dark]:not(.sq-own-theme) .act.change { background: #1e2a5a !important; color: #c7d2fe !important; }
html[data-theme=dark]:not(.sq-own-theme) .st.confirmed, html[data-theme=dark]:not(.sq-own-theme) .st.action_taken { color: #fca5a5 !important; }
html[data-theme=dark]:not(.sq-own-theme) tr.rvp td, html[data-theme=dark]:not(.sq-own-theme) .title h2, html[data-theme=dark]:not(.sq-own-theme) .card .head h1 { color: #b9c6ff !important; }
html[data-theme=dark]:not(.sq-own-theme) .d.good, html[data-theme=dark]:not(.sq-own-theme) .d.down { color: #4ade80 !important; } html[data-theme=dark]:not(.sq-own-theme) .d.bad, html[data-theme=dark]:not(.sq-own-theme) .d.up { color: #f87171 !important; }
html[data-theme=dark]:not(.sq-own-theme) svg text[fill="#0f172a"] { fill: var(--sq-d-ink); }
html[data-theme=dark]:not(.sq-own-theme) img.sq-logo, html[data-theme=dark]:not(.sq-own-theme) .card .head img { filter: brightness(0) invert(1); }
/* inline-styled panels (Account security on User Management) */
html[data-theme=dark]:not(.sq-own-theme) [style*="background:#fff"] { background: var(--sq-d-surface) !important; }
html[data-theme=dark]:not(.sq-own-theme) [style*="background:#f1f5f9"] { background: var(--sq-d-head) !important; color: var(--sq-d-muted) !important; }
html[data-theme=dark]:not(.sq-own-theme) [style*="border-top:1px solid #e2e8f0"], html[data-theme=dark]:not(.sq-own-theme) [style*="border:1px solid #e2e8f0"] { border-color: var(--sq-d-line) !important; }
}

/* ── Repairs: follows the switch instead of the device setting (it used prefers-color-scheme) ── */
@media screen {
html.pg-repairs[data-theme=light] { --bg:#fff; --bg2:#f5f5f4; --bg3:#f4f5f7; --text:#1a1a18; --text2:#6b6b67; --text3:#9a9a96; --border:rgba(0,0,0,.12); --border2:rgba(0,0,0,.22);
  --info-bg:#e6f1fb; --info-text:#0c447c; --warn-bg:#faeeda; --warn-text:#633806; --success-bg:#eaf3de; --success-text:#27500a; --danger-bg:#fcebeb; --danger-text:#791f1f; --accent:#0055a5; color-scheme: light; }
html.pg-repairs[data-theme=dark] { --bg:#121a2f; --bg2:#18213a; --bg3:#0b1020; --text:#e5e9f5; --text2:#a3b0c8; --text3:#6c7a96; --border:rgba(255,255,255,.1); --border2:rgba(255,255,255,.2);
  --info-bg:#0c2a45; --info-text:#85b7eb; --warn-bg:#2e1f05; --warn-text:#fac775; --success-bg:#172404; --success-text:#97c459; --danger-bg:#2a0f12; --danger-text:#f09595; --accent:#7cb6ff; color-scheme: dark; }
html.pg-repairs[data-theme=dark] img.sq-logo { filter: brightness(0) invert(1); }
html.pg-repairs header.topbar { border-bottom: 3px solid #f26b35; }

/* ── Dashboard dark ── */
html.pg-dash[data-theme=dark] { color-scheme: dark; }
html.pg-dash[data-theme=dark] body { background: #0b1020; color: #e5e9f5; }
html.pg-dash[data-theme=dark] .nav, html.pg-dash[data-theme=dark] .kpi-bar, html.pg-dash[data-theme=dark] .sidebar, html.pg-dash[data-theme=dark] .vehicle-modal,
html.pg-dash[data-theme=dark] .fuel-stat, html.pg-dash[data-theme=dark] .dc-grid-item, html.pg-dash[data-theme=dark] .div-tab.active,
html.pg-dash[data-theme=dark] [style*="background:#fff"] { background: #121a2f !important; }
html.pg-dash[data-theme=dark] .nav, html.pg-dash[data-theme=dark] .kpi-bar, html.pg-dash[data-theme=dark] .kpi, html.pg-dash[data-theme=dark] .sidebar,
html.pg-dash[data-theme=dark] .section, html.pg-dash[data-theme=dark] .vehicle-modal-head, html.pg-dash[data-theme=dark] .modal-filter-bar,
html.pg-dash[data-theme=dark] .vtable th, html.pg-dash[data-theme=dark] .vtable td, html.pg-dash[data-theme=dark] .ftable th, html.pg-dash[data-theme=dark] .ftable td,
html.pg-dash[data-theme=dark] .div-tabs, html.pg-dash[data-theme=dark] .nav-btn, html.pg-dash[data-theme=dark] [style*="border-top:1px solid #e2e6ea"] { border-color: #26314d !important; }
html.pg-dash[data-theme=dark] .nav-divider, html.pg-dash[data-theme=dark] .fuel-stats, html.pg-dash[data-theme=dark] .dc-grid { background: #26314d; }
html.pg-dash[data-theme=dark] .nav-logo, html.pg-dash[data-theme=dark] .kpi-value, html.pg-dash[data-theme=dark] .map-overlay-title, html.pg-dash[data-theme=dark] .vehicle-modal-title,
html.pg-dash[data-theme=dark] .fuel-stat .num, html.pg-dash[data-theme=dark] .dc-count { color: #e5e9f5; }
html.pg-dash[data-theme=dark] .kpi-value.green, html.pg-dash[data-theme=dark] .dc-grid-count.g { color: #4ade80; }
html.pg-dash[data-theme=dark] .kpi-value.red, html.pg-dash[data-theme=dark] .dc-grid-count.r { color: #f87171; }
html.pg-dash[data-theme=dark] .kpi-value.amber, html.pg-dash[data-theme=dark] .dc-grid-count.a { color: #fbbf24; }
html.pg-dash[data-theme=dark] .kpi-label, html.pg-dash[data-theme=dark] .kpi-sub, html.pg-dash[data-theme=dark] .nav-status, html.pg-dash[data-theme=dark] .nav-user,
html.pg-dash[data-theme=dark] .fuel-stat .lbl, html.pg-dash[data-theme=dark] .vtable th, html.pg-dash[data-theme=dark] .ftable th { color: #94a3b8; }
html.pg-dash[data-theme=dark] .dc-name, html.pg-dash[data-theme=dark] .section-title, html.pg-dash[data-theme=dark] .dc-grid-name, html.pg-dash[data-theme=dark] .vtable td,
html.pg-dash[data-theme=dark] .ftable td, html.pg-dash[data-theme=dark] .map-legend-item, html.pg-dash[data-theme=dark] .map-count { color: #cbd5e1; }
html.pg-dash[data-theme=dark] .nav-btn { background: #18213a; color: #dbe3f3; }
html.pg-dash[data-theme=dark] .nav-btn:hover, html.pg-dash[data-theme=dark] .dc-item:hover, html.pg-dash[data-theme=dark] .dc-grid-item:hover,
html.pg-dash[data-theme=dark] .vtable tr:hover td, html.pg-dash[data-theme=dark] .ftable tr:hover td, html.pg-dash[data-theme=dark] .section-head:hover { background: #1f2a48 !important; }
html.pg-dash[data-theme=dark] .section-head, html.pg-dash[data-theme=dark] .div-tabs, html.pg-dash[data-theme=dark] .modal-filter-bar, html.pg-dash[data-theme=dark] .vtable th { background: #18213a; }
html.pg-dash[data-theme=dark] .div-tab:hover { background: #1f2a48; color: #7cb6ff; } html.pg-dash[data-theme=dark] .div-tab.active { color: #7cb6ff; border-bottom-color: #7cb6ff; }
html.pg-dash[data-theme=dark] .dc-item.active-dc { background: #1c2a52; border-left-color: #7cb6ff; }
html.pg-dash[data-theme=dark] .dc-count { background: #1f2a48; }
html.pg-dash[data-theme=dark] .dc-count.active, html.pg-dash[data-theme=dark] .section-badge.green, html.pg-dash[data-theme=dark] .vstatus.Active { background: #12301f; color: #4ade80; }
html.pg-dash[data-theme=dark] .dc-count.mixed, html.pg-dash[data-theme=dark] .section-badge.amber { background: #3a2a0c; color: #fbbf24; }
html.pg-dash[data-theme=dark] .dc-count.inactive, html.pg-dash[data-theme=dark] .section-badge.red, html.pg-dash[data-theme=dark] .vstatus.Inactive { background: #3a1518; color: #f87171; }
html.pg-dash[data-theme=dark] .section-badge, html.pg-dash[data-theme=dark] .vstatus.unknown { background: #26314d; color: #cbd5e1; }
html.pg-dash[data-theme=dark] .map-overlay, html.pg-dash[data-theme=dark] .map-count { background: rgba(18, 26, 47, .94); box-shadow: 0 2px 12px rgba(0, 0, 0, .4); }
html.pg-dash[data-theme=dark] .vehicle-modal-close, html.pg-dash[data-theme=dark] .modal-filter-btn, html.pg-dash[data-theme=dark] .fuel-day-btn { background: #1f2a48; color: #cbd5e1; border-color: #26314d; }
html.pg-dash[data-theme=dark] .modal-filter-btn.active, html.pg-dash[data-theme=dark] .fuel-day-btn.active { background: #2b3a8f; border-color: #3b4db0; color: #fff; }
html.pg-dash[data-theme=dark] .skeleton { background: linear-gradient(90deg, #18213a 25%, #222d4d 50%, #18213a 75%); background-size: 200% 100%; }
html.pg-dash[data-theme=dark] .sidebar::-webkit-scrollbar-thumb { background: #26314d; }
html.pg-dash[data-theme=dark] img.sq-logo { filter: brightness(0) invert(1); }
/* map: dark tiles, dark popups */
html.pg-dash[data-theme=dark] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.6); }
html.pg-dash[data-theme=dark] .leaflet-container { background: #0f1629; }
html.pg-dash[data-theme=dark] .leaflet-popup-content-wrapper, html.pg-dash[data-theme=dark] .leaflet-popup-tip { background: #121a2f; color: #e5e9f5; }
html.pg-dash[data-theme=dark] .leaflet-bar a { background: #121a2f; color: #e5e9f5; border-color: #26314d; }
html.pg-dash[data-theme=dark] .sp-box, html.pg-dash[data-theme=dark] .sp-hd, html.pg-dash[data-theme=dark] .sp-x { background: #121a2f !important; color: #e5e9f5; border-color: #26314d !important; }
html.pg-dash[data-theme=dark] .sp-box th, html.pg-dash[data-theme=dark] .sp-sec td { background: #18213a !important; color: #94a3b8 !important; }
html.pg-dash[data-theme=dark] .sp-box td, html.pg-dash[data-theme=dark] .sp-box th { border-color: #26314d !important; }
}

/* Dashboard: the top bar has grown — keep button labels on one line */
html.pg-dash .nav { gap: 10px; } html.pg-dash .nav-right { gap: 6px; } html.pg-dash .nav-btn { white-space: nowrap; padding: 6px 10px; }
html.pg-dash .nav-logo, html.pg-dash .nav-status, html.pg-dash .nav-user { white-space: nowrap; }