/* ═══════════════════════════════════════════════════════════════════════════
   Night Theme — charge.vu
   Deep black surfaces, warm amber accent. Optimised for night driving.
   Based on automotive HMI best-practices: warm amber preserves rod-cell
   night-vision adaptation; true deep-black reduces screen luminance without
   a blunt brightness filter.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Dark mode CSS variables ── */
[data-theme="dark"] {
  --bg: #0f1117;
  --surface: #1a1d27;
  --surface2: #22263a;
  --border: #2e3348;
  --text: #e2e6f0;
  --muted: #8892a4;
  --navy: #c5d0e6;
  --primary-bg: rgba(21,101,245,0.18);
  --primary-light: rgba(21,101,245,0.22);
  --teal-bg: rgba(13,148,136,0.18);
  --green-bg: rgba(16,185,129,0.18);
  --orange-bg: rgba(249,115,22,0.18);
  --yellow-bg: rgba(245,158,11,0.18);
  --shadow: 0 2px 16px rgba(0,0,0,0.45);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.55);
}

/* ── Night mode CSS variables ── */
[data-theme="night"] {
  --bg: #0d0d0d;
  --surface: #141414;
  --surface2: #1e1e1e;
  --border: #2a2a2a;
  --text: #e2e2e2;
  --muted: #666666;
  --primary: #c47008;
  --primary-bg: rgba(196,112,8,0.18);
  --primary-light: rgba(196,112,8,0.25);
  --navy: #e2e2e2;
  --teal: #3ab8c8;
  --teal-bg: rgba(58,184,200,0.12);
  --green: #3a9e4a;
  --green-bg: rgba(58,158,74,0.12);
  --orange: #d07000;
  --orange-bg: rgba(208,112,0,0.12);
  --red: #d44848;
  --yellow: #c49010;
  --yellow-bg: rgba(196,144,16,0.12);
  --radius: 12px;
  --shadow: 0 2px 20px rgba(0,0,0,0.85);
  --shadow-md: 0 4px 28px rgba(0,0,0,0.92);
}

/* ── Night surfaces ── */
[data-theme="night"] body { background:#0d0d0d; }

/* Glassmorphism bottom nav */
[data-theme="night"] .bottom-nav {
  background:rgba(10,10,10,0.92)!important;
  border-top:1px solid rgba(255,255,255,0.07)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
}
/* Glassmorphism sidebar */
[data-theme="night"] .sidebar {
  background:rgba(13,13,13,0.94)!important;
  border-color:rgba(255,255,255,0.07)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
}
/* Active session HUD — amber-tinted glass in night mode */
[data-theme="night"] .session-hud {
  background:rgba(240,146,10,0.08)!important;
  border-color:rgba(240,146,10,0.28)!important;
}
[data-theme="night"] .session-hud-val { color:#c47008; }
[data-theme="night"] .session-hud-status { color:#c47008; }
[data-theme="night"] .pulse-dot {
  background:#f0920a;
  animation:pulse-amber 1.5s infinite;
}
@keyframes pulse-amber {
  0%,100%{box-shadow:0 0 0 0 rgba(240,146,10,.6)}
  60%{box-shadow:0 0 0 6px rgba(240,146,10,0)}
}
[data-theme="night"] .session-hud-metrics { background:rgba(255,255,255,0.05); }

/* Charger detail card — glass from bottom */
[data-theme="night"] .charger-detail-card {
  background:rgba(13,13,13,0.96)!important;
  border-top:1px solid rgba(255,255,255,0.08)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
}

/* Map search bar */
[data-theme="night"] .map-search-bar { background:#1e1e1e; border-color:#2a2a2a; }
[data-theme="night"] #map-search-input { color:#e2e2e2; }
[data-theme="night"] #map-search-input::placeholder { color:#484848; }
[data-theme="night"] .map-search-dropdown,
[data-theme="night"] .rte-geocode-dropdown { background:#141414; border-color:#2a2a2a; }
[data-theme="night"] .map-search-item:hover,
[data-theme="night"] .rte-geo-item:hover { background:#1e1e1e; }

/* ── MapLibre controls ── */
[data-theme="night"] .maplibregl-ctrl-attrib { filter:brightness(.4); }
[data-theme="night"] .maplibregl-ctrl-zoom-in,
[data-theme="night"] .maplibregl-ctrl-zoom-out {
  background:#1a1a1a!important;
  color:#c8c8c8!important;
}
[data-theme="night"] .maplibregl-ctrl-group {
  border:none!important;
  box-shadow:0 2px 12px rgba(0,0,0,.7)!important;
}

/* ── Buttons & tabs ── */
[data-theme="night"] .btn-primary {
  background:var(--primary);
  box-shadow:0 2px 12px rgba(240,146,10,0.35);
  color:#0d0d0d;
}
[data-theme="night"] .tag-fast { background:rgba(208,112,0,.18); color:#d07000; }
[data-theme="night"] .nav-btn.active { color:#c47008; }
[data-theme="night"] .view-tab.active {
  background:#70A20F;
  border-color:#70A20F;
  color:#fff;
  box-shadow:0 2px 12px rgba(112,162,15,0.35);
}

/* ── Tabular numbers — glanceable at night ── */
[data-theme="night"] .stat-num,
[data-theme="night"] .evse-kw,
[data-theme="night"] .history-stat-value,
[data-theme="night"] .history-session-amount,
[data-theme="night"] .rte-stat-val,
[data-theme="night"] .profile-stat-value,
[data-theme="night"] .veh-spec-val,
[data-theme="night"] .veh-chip,
[data-theme="night"] .rte-stop-node-detail { font-variant-numeric: tabular-nums; }
/* Stat numbers and large kW figures — off-white instead of pure white */
[data-theme="night"] .stat-num,
[data-theme="night"] .evse-kw { color:#e2e2e2; }

/* ── Profile badges ── */
[data-theme="night"] .profile-badge--member { background:rgba(196,144,16,0.15); color:#c49010; }
[data-theme="night"] .profile-badge--plan   { background:rgba(240,146,10,0.15);  color:#f0920a; }
[data-theme="night"] .profile-badge--premium{ background:rgba(58,158,74,0.15);   color:#3a9e4a; }

/* QR header icon */
[data-theme="night"] .qr-header-icon { background:#1e1e1e; }

/* Charger list rows */
[data-theme="night"] .charger-item { border-bottom-color:rgba(255,255,255,0.05)!important; }
[data-theme="night"] .charger-item:hover { background:rgba(255,255,255,0.03)!important; }

/* ── Charger card text — all white, no colours ── */
[data-theme="night"] .charger-loc-text  { color:#ffffff; }
[data-theme="night"] .charger-speed     { color:#ffffff; }
[data-theme="night"] .speed-fast        { color:#ffffff; }
[data-theme="night"] .charger-supplier  { color:#ffffff; }
[data-theme="night"] .charger-name      { color:#ffffff; }
[data-theme="night"] .charger-addr      { color:#ffffff; }
[data-theme="night"] .charger-price     { color:#ffffff; }
[data-theme="night"] .charger-dist      { color:#ffffff; }
[data-theme="night"] .conn-pill         { color:#ffffff; background:rgba(255,255,255,0.1); }

/* Filter drawer */
[data-theme="night"] .map-filter-drawer {
  background:#111;border-color:rgba(255,255,255,0.08);
}
[data-theme="night"] .mfd-label { color:#6b7280; }
[data-theme="night"] .mfd-pill {
  border-color:rgba(255,255,255,0.12);color:#a0a0a0;background:transparent;
}
[data-theme="night"] .mfd-pill.active { background:#c47008;border-color:#c47008;color:#fff; }
[data-theme="night"] .mfd-pill:hover:not(.active) { background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.2); }
[data-theme="night"] .mfd-divider { background:rgba(255,255,255,0.06); }
[data-theme="night"] .mfd-footer { border-top-color:rgba(255,255,255,0.06); }
[data-theme="night"] .mfd-reset { color:#6b7280; }
[data-theme="night"] .mfd-reset:hover { color:#ef4444; }
[data-theme="night"] .mfd-done { background:#c47008; }
[data-theme="night"] .mfd-done:hover { background:#a85e00; }

/* ── Logo visibility ── */
[data-theme="night"] .app-hdr-logo--light{display:none}
[data-theme="night"] .app-hdr-logo--dark{display:block}
[data-theme="dark"] .app-hdr-logo--light{display:none}
[data-theme="dark"] .app-hdr-logo--dark{display:block}

/* ── Navigation HUD ── */
[data-theme="night"] .nav-hud {
  background: rgba(5,5,8,0.95);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="night"] .nav-hud-turn { background: #c47008; }

/* ── Map charger count HUD chip ── */
[data-theme="night"] .map-charger-hud {
  background: rgba(10,10,10,0.78);
  border-color: rgba(255,255,255,0.08);
  color: #e2e2e2;
}

/* ── Charger popup availability bar ── */
[data-theme="night"] .popup-avail {
  background: #1e1e1e;
}
[data-theme="night"] .avail-ago { color: #666666; }

/* ── Charger card header — provider name ── */
[data-theme="night"] .charger-loc-provider { color: #a78bfa; }

/* ── Route station loc bar ── */
[data-theme="night"] .rte-stn-loc-bar { color: #9ca3af; }

/* ── Turn-by-turn: Show in map button ── */
[data-theme="night"] .rte-turns-map-btn {
  color: #9ca3af;
  border-color: #3a3a3a;
}
[data-theme="night"] .rte-turns-map-btn:hover {
  background: #2a2a2a;
  color: #e2e2e2;
}

/* ── Calculate route button ── */
[data-theme="night"] .rte-calc-btn {
  color: #ffffff !important;
  border: 1px solid #ef4444 !important;
}
[data-theme="night"] .rte-calc-btn:hover {
  border-color: #f87171 !important;
}

/* ── Route planning input placeholders ── */
[data-theme="night"] .rte-loc-input { color: #e2e2e2; }
[data-theme="night"] .rte-loc-input::placeholder { color: #888888; }
[data-theme="night"] .rte-add-stop-placeholder { color: #888888; }
[data-theme="night"] .rte-journey-box-label { color: #888888; }

/* ── Route planning: battery gauge — green → red depletion gradient ── */
/* Track becomes the full green-to-red spectrum so charge level reads as colour */
[data-theme="night"] .rte-gauge-track {
  background: linear-gradient(to right,
    #22c55e  0%,
    #22c55e 38%,
    #eab308 58%,
    #f97316 78%,
    #ef4444 100%
  );
}
/* Remaining charge shows the gradient colour; a white marker marks the boundary */
[data-theme="night"] .rte-gauge-arr-fill {
  background: transparent !important;
  border-right: 3px solid rgba(255,255,255,0.8);
  z-index: 5;
}
/* Depleted zone is a dark overlay over the gradient */
[data-theme="night"] .rte-gauge-used-fill {
  background: rgba(0,0,0,0.54) !important;
}
[data-theme="night"] #rte-gauge-arr-pct { color: #e2e2e2; }
[data-theme="night"] .rte-gauge-labels  { color: #9ca3af; }

/* Charge-stop mini bar — same gradient approach */
[data-theme="night"] .rte-stop-mini-track {
  background: linear-gradient(to right,
    #22c55e  0%,
    #22c55e 38%,
    #eab308 58%,
    #f97316 78%,
    #ef4444 100%
  );
}
[data-theme="night"] .rte-stop-mini-arrive { background: transparent !important; }
[data-theme="night"] .rte-stop-mini-charge { background: #6741d9; }

/* Stop-result pill colours for night */
[data-theme="night"] .rte-stop-result--ok   { background: rgba(34,197,94,0.14);  color: #4ade80; }
[data-theme="night"] .rte-stop-result--warn { background: rgba(234,179,8,0.14);  color: #facc15; }

/* Stat tile — arrival charge % */
[data-theme="night"] .rte-stat-val { color: #e2e2e2; }