/* ═══════════════════════════════════════════════
   Dark Glass Command Center — Design Tokens
   ═══════════════════════════════════════════════ */
:root {
    color-scheme: dark;

    /* Primary — Sky blue, high-visibility on dark */
    --md-primary: #38BDF8;
    --md-on-primary: #0e0e12;
    --md-primary-container: rgba(56, 189, 248, 0.12);
    --md-on-primary-container: #BAE6FD;
    --md-secondary: #94A3B8;
    --md-on-secondary: #0e0e12;

    /* Surfaces — Dark glass fills */
    --app-shell-bg: #0e0e13;
    --md-surface: transparent;
    --md-surface-dim: rgba(255, 255, 255, 0.02);
    --md-surface-container: rgba(255, 255, 255, 0.05);
    --md-surface-container-low: rgba(255, 255, 255, 0.03);
    --md-surface-container-high: rgba(255, 255, 255, 0.08);

    /* Text — Light on dark */
    --md-on-surface: #E2E8F0;
    --md-on-surface-variant: #94A3B8;

    /* Borders — Frost edges */
    --md-outline: rgba(255, 255, 255, 0.10);
    --md-outline-variant: rgba(255, 255, 255, 0.06);

    /* Error */
    --md-error: #F87171;
    --md-on-error: #FFFFFF;
    --md-error-container: rgba(248, 113, 113, 0.15);

    /* Severity colors — UNCHANGED (safety-critical) */
    --severity-none: #4CAF50;
    --severity-advisory: #8BC34A;
    --severity-caution: #FFC107;
    --severity-warning: #FF9800;
    --severity-critical: #F44336;
    --severity-offline: #9E9E9E;

    /* Accent gradient — focal point, small area only */
    --accent-gradient: linear-gradient(135deg, #38BDF8, #818CF8);
    --accent-red: linear-gradient(135deg, #D94452, #A8324A);

    /* Elevation — Deep, diffuse dark shadows */
    --md-elevation-1: 0 4px 16px rgba(0, 0, 0, 0.3);
    --md-elevation-2: 0 8px 30px rgba(0, 0, 0, 0.4);
    --md-elevation-3: 0 12px 40px rgba(0, 0, 0, 0.5);

    /* Shape — Rounder, pillowy */
    --md-shape-s: 12px;
    --md-shape-m: 20px;
    --md-shape-l: 24px;
    --md-shape-xl: 32px;

    /* Spacing — Breathing room */
    --space-xs: 6px;
    --space-s: 10px;
    --space-m: 20px;
    --space-l: 28px;
    --space-xl: 40px;

    /* Glass layer system */
    --glass-1: rgba(255, 255, 255, 0.04);         /* Layer 1: containers */
    --glass-2: rgba(255, 255, 255, 0.06);         /* Layer 2: cards */
    --glass-3: rgba(255, 255, 255, 0.08);         /* Layer 3: modals/drawers */
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-bright: rgba(255, 255, 255, 0.12);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ═══════════════════════════════════════════════
   Reset & Typography
   ═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow-x: hidden; }
body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    color: var(--md-on-surface);
    background: linear-gradient(135deg, #0a0a0f 0%, #131318 40%, #0e0e13 100%);
    min-height: 100vh;
}

body.authed {
    background: var(--app-shell-bg);
}

/* Numeric stability for real-time data */
.summary-value,
.truck-meta {
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════ */
.btn-filled {
    display: inline-flex; align-items: center; gap: var(--space-s);
    padding: 10px 24px;
    border: none; border-radius: var(--md-shape-xl);
    background: var(--accent-gradient); color: #FFFFFF;
    font-family: inherit; font-size: 14px; font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-filled:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(56, 189, 248, 0.3);
}
.btn-filled.btn-danger {
    background: var(--md-error);
    box-shadow: 0 4px 12px rgba(248, 113, 113, 0.2);
}
.btn-filled.btn-danger:hover {
    box-shadow: 0 6px 20px rgba(248, 113, 113, 0.3);
}
.btn-filled.btn-confirm {
    background: var(--severity-none);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
}
.btn-filled.btn-confirm:hover {
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.3);
}
.btn-text {
    display: inline-flex; align-items: center; gap: var(--space-xs);
    padding: 8px 12px; border: none; border-radius: var(--md-shape-s);
    background: transparent; color: var(--md-primary);
    font-family: inherit; font-size: 14px; font-weight: 500;
    cursor: pointer; transition: background 0.15s;
}
.btn-text:hover { background: var(--md-primary-container); }
.btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: none; border-radius: 50%;
    background: transparent; color: var(--md-on-surface-variant);
    cursor: pointer; transition: background 0.15s;
}
.btn-icon:hover { background: var(--md-surface-container-high); }
.btn-fab {
    position: absolute; z-index: 800;
    width: 48px; height: 48px; border: none; border-radius: var(--md-shape-l);
    background: var(--glass-2);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    color: var(--md-primary);
    box-shadow: var(--glass-highlight), var(--md-elevation-2);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, box-shadow 0.2s;
}
.btn-fab:hover {
    background: var(--md-surface-container-high);
    box-shadow: var(--glass-highlight), var(--md-elevation-3);
}
/* Map control placement (design §8): each function keeps a fixed corner across
   normal AND fullscreen, so controls never appear to move around. Leaflet's
   zoom + layers controls live top-left (see map.js); global view (fit-all) lives
   bottom-left; the fullscreen enter/exit toggle shares the bottom-right slot.
   In fullscreen the side rail is hidden (see `body.map-fullscreen .side-nav`
   below) so the bottom-left FAB is never covered by it. */
.btn-fab--bl { bottom: 16px; left: 16px; }   /* global view (fit all trucks) */
.btn-fab--br { bottom: 16px; right: 16px; z-index: 1001; }  /* enter/exit fullscreen — above Leaflet's z-1000 controls (the heatmap legend shares this corner in analysis mode) so the button stays on top, visible and clickable */

/* Fullscreen map (design §8) — map-container escapes flow to cover the viewport.
   Fullscreen is a shell change only; the Leaflet camera/view is left untouched.
   NOTE: double-class selector (.map-container.map-container--fullscreen) is
   deliberate — the base `.map-container` rule is defined LATER in this file, so
   a single-class `.map-container--fullscreen` would lose the cascade on shared
   properties (position/border/margin) and fullscreen would have no effect. */
.map-container.map-container--fullscreen {
    position: fixed; inset: 0; z-index: 1000;
    border-radius: 0; border: none; margin: 0;
}
/* Enter and exit share the bottom-right slot; exactly one shows per shell state. */
#mapFullscreenExitBtn { display: none; }
.map-container--fullscreen #mapFullscreenBtn { display: none; }
.map-container--fullscreen #mapFullscreenExitBtn { display: flex; }

/* ═══════════════════════════════════════════════
   Login Overlay
   ═══════════════════════════════════════════════ */
.login-overlay {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #050507 0%, #111114 50%, #18121a 100%);
}
.login-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--md-shape-l); padding: 48px 40px;
    width: 380px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 32px rgba(0, 0, 0, 0.5);
    text-align: center;
    color: #E2E8F0;
}
.login-icon { font-size: 48px; color: var(--md-primary); }
.login-logo {
    width: 80px; height: 80px; margin-bottom: 4px;
    /* No filter — keep logo white on dark glass */
}
.login-card h1 { font-size: 24px; font-weight: 600; margin: 8px 0 4px; color: #F1F5F9; }
.login-subtitle { color: rgba(255, 255, 255, 0.5); margin-bottom: 32px; }
.input-field {
    display: flex; align-items: center; gap: var(--space-s);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--md-shape-s);
    padding: 0 12px; margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.05);
    transition: border-color 0.15s, background 0.15s;
}
.input-field:focus-within {
    border-color: rgba(255, 255, 255, 0.20);
    background: rgba(255, 255, 255, 0.08);
}
.input-field .material-icons { color: rgba(255, 255, 255, 0.3); font-size: 20px; }
.input-field input {
    flex: 1; border: none; outline: none; padding: 12px 0;
    font-family: inherit; font-size: 14px;
    background: transparent; color: #E2E8F0;
}
.input-field input::placeholder { color: rgba(255, 255, 255, 0.35); }
.login-card .btn-filled { width: 100%; justify-content: center; }
.login-error { color: var(--md-error); font-size: 13px; margin-top: 12px; min-height: 20px; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ═══════════════════════════════════════════════
   Top Bar (Header) — Dark glass
   ═══════════════════════════════════════════════ */
.top-bar {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 var(--space-m); height: 56px;
    background: var(--glass-1);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    color: var(--md-on-surface);
    box-shadow: var(--glass-highlight);
}
.top-bar-left, .top-bar-right { flex: 1; display: flex; align-items: center; gap: var(--space-s); }
.top-bar-right { justify-content: flex-end; }
.top-bar-center { flex: 0 0 auto; display: flex; align-items: center; }
.brand-logo { height: 54px; width: auto; margin-top: 4px; }
.brand-text { font-size: 18px; font-weight: 600; letter-spacing: 0.3px; }

.ws-status { display: flex; align-items: center; margin-left: var(--space-s); }
.ws-status .material-icons { font-size: 18px; }
.ws-status--connected { color: #4ADE80; }
.ws-status--disconnected { color: #FB923C; }

.time-mode-group {
    display: flex; gap: 2px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-border);
    border-radius: var(--md-shape-xl); padding: 3px;
}
.time-btn {
    padding: 6px 16px; border: none; border-radius: var(--md-shape-xl);
    background: transparent; color: var(--md-on-surface-variant);
    font-family: inherit; font-size: 13px; font-weight: 500;
    cursor: pointer; transition: all 0.2s;
}
.time-btn:hover { color: var(--md-on-surface); background: rgba(255, 255, 255, 0.04); }
.time-btn.active {
    background: rgba(56, 189, 248, 0.18); color: var(--md-primary);
    border: 1px solid rgba(56, 189, 248, 0.30);
}

/* LIVE button — live-monitoring status pill. GREEN, not red: this signals
   "system online / streaming / normal", and in a safety-critical UI red is
   reserved for danger (see --severity-critical). A common red "LIVE" would be
   always-on and dilute that alarm meaning. Neutral glass pill with a faint
   emerald edge + glow so the breathing dot is the accent. Only this button is
   shown in live mode (see _applyTimeButtonChrome). */
.time-btn--live {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding-left: 15px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.time-btn--live.active {
    background: linear-gradient(180deg, rgba(52, 211, 153, 0.10), rgba(52, 211, 153, 0.03));
    border: 1px solid rgba(52, 211, 153, 0.38);
    color: var(--md-on-surface);
    box-shadow: var(--glass-highlight), 0 0 14px rgba(52, 211, 153, 0.12), 0 1px 8px rgba(0, 0, 0, 0.25);
}
.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34D399;
    flex-shrink: 0;
    /* Crisp emerald core + soft constant glow; the spread ring is animated below. */
    box-shadow: 0 0 7px rgba(52, 211, 153, 0.9), 0 0 0 0 rgba(52, 211, 153, 0.5);
    animation: live-pulse 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes live-pulse {
    0%   { box-shadow: 0 0 7px rgba(52, 211, 153, 0.5),  0 0 0 0 rgba(52, 211, 153, 0.5); }
    70%  { box-shadow: 0 0 10px rgba(52, 211, 153, 1),   0 0 0 5px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 7px rgba(52, 211, 153, 0.5),  0 0 0 0 rgba(52, 211, 153, 0); }
}

/* Custom Date Range Picker */
.custom-range-picker {
    display: flex; align-items: center; gap: 6px;
    margin-left: 8px; padding: 2px 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-border);
    border-radius: var(--md-shape-s);
    animation: fadeSlideIn 0.2s ease-out;
}
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.custom-range-picker input[type="datetime-local"] {
    padding: 4px 8px; border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--md-shape-s); background: rgba(255, 255, 255, 0.06);
    color: var(--md-on-surface); font-family: inherit; font-size: 12px;
    outline: none; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.custom-range-picker input[type="datetime-local"]:focus {
    border-color: rgba(255, 255, 255, 0.20); background: rgba(255, 255, 255, 0.10);
}
.custom-range-picker input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1); cursor: pointer;
}
.range-separator { color: var(--md-on-surface-variant); font-size: 14px; }
.btn-range-apply {
    padding: 4px 12px; border: 1px solid rgba(56, 189, 248, 0.30);
    border-radius: var(--md-shape-s);
    background: rgba(56, 189, 248, 0.18); color: var(--md-primary);
    font-family: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: background 0.15s;
}
.btn-range-apply:hover { background: rgba(56, 189, 248, 0.28); }

.user-chip {
    display: flex; align-items: center; gap: var(--space-xs);
    padding: 4px 12px 4px 4px; border-radius: var(--md-shape-xl);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-border);
    font-size: 13px; color: var(--md-on-surface-variant);
}
.top-bar-right .btn-text { color: var(--md-on-surface-variant); }
.top-bar-right .btn-text:hover { background: rgba(255, 255, 255, 0.06); }

/* ═══════════════════════════════════════════════
   Dashboard Layout
   ═══════════════════════════════════════════════ */
.dashboard {
    display: flex; flex-direction: column; min-height: 100vh;
    background: var(--app-shell-bg);
    overflow: visible;
}

/* Summary Cards — Glass Layer 2 */
.summary-row {
    display: flex; gap: 12px; padding: 12px var(--space-m) 0;
    flex-shrink: 0;
}
.summary-card {
    flex: 1; display: flex; align-items: center; gap: var(--space-s);
    padding: 10px 16px;
    background: var(--glass-2);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: var(--md-shape-s);
    box-shadow: var(--glass-highlight), var(--md-elevation-1);
    transition: all 0.25s ease;
}
.summary-card:hover {
    background: var(--md-surface-container-high);
    box-shadow: var(--glass-highlight), var(--md-elevation-2);
}
.summary-icon { font-size: 20px; color: var(--md-primary); flex-shrink: 0; }
.summary-value { font-size: 18px; font-weight: 600; white-space: nowrap; color: #F1F5F9; }
.summary-label { font-size: 11px; color: var(--md-on-surface-variant); white-space: nowrap; }

/* Main Row: Map + Truck List */
.main-row {
    display: flex; gap: 12px; padding: 12px var(--space-m);
    /* Keep map height independent from truck detail/list content. */
    flex: 0 0 auto;
    height: clamp(360px, 65vh, 780px);
    min-height: 0;
    align-items: stretch;
    overflow: hidden;
}
.map-container {
    flex: 1 1 auto; min-width: 0;
    height: 100%; min-height: 0;
    position: relative; border-radius: var(--md-shape-m);
    overflow: hidden;
    box-shadow: var(--md-elevation-1);
    border: 1px solid var(--glass-border);
}
#map { width: 100%; height: 100%; }

/* Truck List Panel — Glass Layer 1 */
.truck-list-panel {
    width: 240px; flex-shrink: 0; height: 100%; min-height: 0;
    background: var(--glass-1);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--md-shape-m);
    box-shadow: var(--glass-highlight), var(--md-elevation-1);
    display: flex; flex-direction: column; overflow: hidden;
}
.panel-title {
    display: flex; align-items: center; gap: var(--space-s);
    padding: var(--space-m); font-size: 14px; font-weight: 500;
    border-bottom: 1px solid var(--md-outline-variant);
    color: var(--md-on-surface);
}
.panel-title .material-icons { font-size: 20px; color: var(--md-primary); }
/* Fleet status chip — replaces the bare, meaningless "10". Shows online (or
   online/total when some are offline) next to a green dot + "online" label so
   the number reads as fleet health, not a mystery count. Right-aligned in the
   panel title; green matches the LIVE dot (green = online/normal app-wide). */
.fleet-status {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(52, 211, 153, 0.10);
    border: 1px solid rgba(52, 211, 153, 0.22);
    line-height: 1;
}
.fleet-status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #34D399; flex-shrink: 0;
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.8);
}
.fleet-status-count {
    font-size: 12px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #E2E8F0;
}
.fleet-status-label {
    font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--md-on-surface-variant);
}
/* Only meaningful in live mode; Data Analysis turns the panel into a filter. */
body:not(.mode-live) .fleet-status { display: none; }
.truck-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-s); }

/* Truck list items */
.truck-item {
    display: flex; align-items: center; gap: var(--space-s);
    padding: 10px var(--space-s); border-radius: var(--md-shape-s);
    cursor: pointer; transition: all 0.15s;
}
.truck-item:hover { background: rgba(255, 255, 255, 0.04); }
.truck-item.active {
    background: rgba(56, 189, 248, 0.08);
    border-left: 3px solid var(--md-primary);
}
.truck-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.truck-dot--normal { background: var(--severity-none); }
.truck-dot--advisory { background: var(--severity-advisory); }
.truck-dot--caution { background: var(--severity-caution); }
.truck-dot--warning { background: var(--severity-warning); }
.truck-dot--critical { background: var(--severity-critical); }
.truck-dot--offline { background: var(--severity-offline); }
.truck-info { flex: 1; min-width: 0; }
.truck-name { font-size: 13px; font-weight: 500; color: var(--md-on-surface); }
.truck-meta { font-size: 11px; color: var(--md-on-surface-variant); }

/* ═══════════════════════════════════════════════
   Event Carousel — Glass Layer 1 section, Layer 2 cards
   ═══════════════════════════════════════════════ */
.event-carousel-section {
    flex: 0 0 auto; padding: 0 var(--space-m) 10px;
}
.carousel-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 8px;
    flex-wrap: nowrap;
}
.carousel-header .panel-title { flex-shrink: 0; }
.carousel-controls {
    display: flex; align-items: center; gap: var(--space-s);
}
.event-filter-select {
    padding: 6px 28px 6px 10px;
    border: 1px solid var(--glass-border-bright);
    border-radius: var(--md-shape-s);
    background: var(--glass-2);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    font-family: inherit; font-size: 13px; font-weight: 500;
    color: var(--md-on-surface); cursor: pointer; outline: none;
    color-scheme: dark;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%2394A3B8' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color 0.15s;
}
.event-filter-select:focus { border-color: var(--md-primary); }
.event-filter-select option {
    background: #1a1a1f;
    color: #E2E8F0;
}
.carousel-track {
    display: flex; gap: 12px; overflow-x: auto;
    scroll-behavior: smooth; padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}
.carousel-track::-webkit-scrollbar { height: 5px; }
.carousel-track::-webkit-scrollbar-track { background: transparent; }
.carousel-track::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 99px;
}
.carousel-track::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.6);
}

/* Event Card — Glass Layer 2 */
.event-card {
    flex-shrink: 0; width: 240px;
    background: var(--glass-2);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: var(--md-shape-m);
    box-shadow: var(--glass-highlight), var(--md-elevation-1);
    overflow: hidden; cursor: pointer;
    transition: all 0.25s ease;
}
.event-card:hover {
    background: var(--md-surface-container-high);
    box-shadow: var(--glass-highlight), var(--md-elevation-2);
    transform: translateY(-2px);
    border-color: var(--glass-border-bright);
}

/* Satellite trail thumbnail */
.event-card-thumb {
    width: 100%; height: 96px; position: relative;
    background: #0a0a0e;
    overflow: hidden;
}
.event-card-map {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #0a0a0e;
}
.event-card-thumb .leaflet-container {
    width: 100%; height: 100%;
    cursor: pointer;
}
.event-card-thumb .leaflet-control-container { display: none; }

/* Uploaded video poster shown in the thumbnail (click the card to play in the
   review modal). Fills the same 96px thumb the trail map uses. */
.event-card-poster {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.event-card-play-badge {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); z-index: 600;
    pointer-events: none; color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
.event-card-play-badge .material-icons { font-size: 40px; }
.event-card-review-badge {
    position: absolute; top: 8px; right: 8px; z-index: 600;
    display: flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: var(--md-shape-xl);
    font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
    color: white; backdrop-filter: blur(4px);
}
.event-card-review--confirmed {
    background: rgba(76, 175, 80, 0.88);
}
.event-card-review--false-alarm {
    background: rgba(158, 158, 158, 0.85);
}
.event-card-duration-badge {
    position: absolute; bottom: 8px; left: 8px; z-index: 600;
    padding: 2px 6px; border-radius: 4px;
    font-size: 10px; font-weight: 500; color: white;
    background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px);
}
/* Overspeed (bridge) badge — amber pill in the BOTTOM-RIGHT (the only free
   corner: Reviewed/False-Alarm sits top-right, duration bottom-left). Bottom-
   right keeps it clear of the review badge at every card width — its only
   bottom-edge neighbour is the short duration pill, far to the left. Same
   metrics as .event-card-review-badge; amber reads as a hazard, distinct from
   the removed red "Critical" severity pill. */
.event-card-overspeed-badge {
    position: absolute; bottom: 8px; right: 8px; z-index: 600;
    display: flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: var(--md-shape-xl);
    font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
    color: white; background: rgba(255, 152, 0, 0.92);
    backdrop-filter: blur(4px);
}
.event-card-overspeed-badge .material-icons { font-size: 13px; }

/* Card body */
.event-card-body {
    padding: 10px 14px 0;
    display: flex; flex-direction: column;
}
.event-card-header {
    display: flex; align-items: center; gap: var(--space-s);
    margin-bottom: 6px;
}
.event-card-header .material-icons { color: var(--severity-critical); font-size: 20px; }
.event-card-truck { font-size: 15px; font-weight: 600; color: var(--md-on-surface); }
.event-card-time { font-size: 13px; color: var(--md-on-surface-variant); }
.event-card-stats {
    display: flex; gap: 12px;
    font-size: 12px; font-weight: 500; color: var(--md-on-surface-variant);
    margin-bottom: 0;
}
.event-card-stat {
    display: flex; align-items: center; gap: 4px;
}
.event-card-stat .material-icons { font-size: 16px; }
.event-card-action {
    border-top: 1px solid var(--glass-border);
    margin-top: 10px;
}
.review-btn {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; width: 100%;
    padding: 8px 0;
    border: none; background: transparent;
    color: var(--md-primary);
    font-family: inherit; font-size: 14px; font-weight: 600;
    letter-spacing: 0.3px; cursor: pointer;
    transition: color 0.15s;
}
.review-btn .material-icons { font-size: 16px; }
.review-btn:hover { color: #7DD3FC; }
.event-card--dimmed .review-btn { color: var(--md-on-surface-variant); }

/* Dimmed card for false alarms */
.event-card--dimmed { opacity: 0.5; }
.event-card--dimmed:hover { opacity: 0.75; }

/* Empty carousel state */
.carousel-empty {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 80px; color: var(--md-on-surface-variant);
    font-size: 13px; font-style: italic;
}

/* Animation for new cards */
@keyframes slideIn {
    from { transform: translateX(60px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.event-card--new { animation: slideIn 0.3s ease-out; }

/* ═══════════════════════════════════════════════
   Events Library — full-page grid (design §3.4)
   Lives inside #dashboard like the admin pages; cards reuse .event-card.
   ═══════════════════════════════════════════════ */
.events-page {
    /* Definite height (not flex:1) so #eventsGrid below has a bounded box to
       scroll inside. #dashboard uses min-height:100vh and grows with content,
       so a flex:1 here would resolve to an UNbounded height → the grid's
       overflow-y:auto never engages, the window scrolls instead of the grid,
       and the events list auto-appends every page at once. The page is shown
       alone (other dashboard chrome is hidden), so 100vh == the viewport. */
    height: 100vh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 16px var(--space-m) var(--space-m);
    gap: var(--space-s);
    overflow: hidden;
}
.events-page-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.events-page-title {
    display: flex; align-items: center; gap: var(--space-s);
    margin: 0; font-size: 20px; font-weight: 600; color: #F1F5F9;
}
.events-page-title .material-icons-outlined { color: var(--md-primary); }

/* Vertical infinite-scroll grid: 5 / 3 / 2 columns by viewport width (§3.4.1). */
.events-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    /* Pin each row to its cards' natural height. Without this, the grid is a
       flex child (flex:1 1 auto) that gets SHRUNK to fit the now-bounded
       .events-page; a shrunk grid with only implicit `auto` rows can compress
       those rows, clipping every card (overflow:hidden) into a thin strip.
       max-content rows stay card-tall and the grid scrolls instead. */
    grid-auto-rows: max-content;
    gap: 12px;
    padding-bottom: 8px;
    align-content: start;
    align-items: start;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}
.events-grid::-webkit-scrollbar { width: 5px; }
.events-grid::-webkit-scrollbar-track { background: transparent; }
.events-grid::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 99px;
}
@media (max-width: 1100px) {
    .events-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .events-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* In the grid, cards fill their cell instead of the carousel's fixed 240px. */
.events-grid .event-card { width: auto; flex-shrink: 1; }

/* Empty state spans the full grid width, not a single cell. */
.events-grid .carousel-empty { grid-column: 1 / -1; }

/* ═══════════════════════════════════════════════
   Event Filter Bar
   ═══════════════════════════════════════════════ */
.event-filter-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 0;
    margin-bottom: 0;
    flex: 1 1 720px;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
}
.filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.filter-group-right {
    margin-left: auto;
    gap: 10px;
}
.filter-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--md-on-surface-variant);
    white-space: nowrap;
}
.filter-btn-group {
    display: flex;
    gap: 2px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-border);
    border-radius: var(--md-shape-xl);
    padding: 2px;
}
.filter-btn {
    padding: 4px 12px;
    border: none;
    border-radius: var(--md-shape-xl);
    background: transparent;
    color: var(--md-on-surface-variant);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.filter-btn:hover {
    color: var(--md-on-surface);
    background: rgba(255, 255, 255, 0.04);
}
.filter-btn.active {
    background: rgba(56, 189, 248, 0.18);
    color: var(--md-primary);
    border: 1px solid rgba(56, 189, 248, 0.30);
}
/* Primary action on the Events library filter bar — the only trigger for a fetch. */
.filter-search-btn,
.filter-search-btn:hover {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    background: var(--md-primary);
    color: var(--md-on-primary);
    font-weight: 600;
}
.filter-search-btn:hover {
    filter: brightness(1.08);
}
.filter-select {
    padding: 4px 24px 4px 8px;
    border: 1px solid var(--glass-border-bright);
    border-radius: var(--md-shape-s);
    background: var(--glass-2);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--md-on-surface);
    cursor: pointer;
    outline: none;
    color-scheme: dark;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%2394A3B8' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    transition: border-color 0.15s;
}
.filter-select:focus { border-color: var(--md-primary); }
.filter-select option {
    background: #1a1a1f;
    color: #E2E8F0;
}
.filter-custom-range {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.filter-date-field {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--md-on-surface-variant);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.filter-custom-range input[type="datetime-local"] {
    padding: 3px 6px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--md-shape-s);
    background: rgba(255, 255, 255, 0.06);
    color: var(--md-on-surface);
    font-family: inherit;
    font-size: 11px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
}
.filter-custom-range input[type="datetime-local"]:focus {
    border-color: rgba(255, 255, 255, 0.20);
}
.filter-custom-range input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}
.filter-sep {
    display: none;
    color: var(--md-on-surface-variant);
    font-size: 12px;
}
.filter-range-apply {
    color: var(--md-primary);
    background: rgba(56, 189, 248, 0.12);
}
.filter-range-cancel {
    color: var(--md-on-surface-variant);
}
.filter-count {
    font-size: 12px;
    color: var(--md-on-surface-variant);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.search-field {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-s);
    background: rgba(255, 255, 255, 0.04);
    transition: border-color 0.15s;
}
.search-field:focus-within {
    border-color: rgba(56, 189, 248, 0.45);
}
.search-field-icon {
    font-size: 16px;
    color: var(--md-on-surface-variant);
    flex-shrink: 0;
    user-select: none;
}
.search-field-input {
    border: none;
    outline: none;
    background: transparent;
    color: var(--md-on-surface);
    font-family: inherit;
    font-size: 12px;
}
.search-field-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}
.search-field-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--md-on-surface-variant);
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
    transition: color 0.15s;
}
.search-field-clear:hover {
    color: var(--md-on-surface);
}
.filter-search-wrap {
    gap: 4px;
    padding: 3px 8px;
    border-color: var(--glass-border-bright);
    background: var(--glass-2);
}
.filter-search-input {
    width: 112px;
}

/* Truck combobox (truck-combobox.js) — single/multi type-and-pick selector */
.tcb { position: relative; flex: 1 1 auto; min-width: 0; }
.tcb-control {
    /* No border/background/padding here — the mount wrapper (.search-field)
       provides the box + padding, so the combobox looks like the original
       single search input, not an extra inset block. */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
    cursor: text;
}
.tcb-input {
    flex: 1 1 60px;
    min-width: 60px;
    padding: 2px 0;
}
/* Grafana-style collapsed trigger (multi + collapsedTrigger): closed shows the
   value summary + a caret; the search input is revealed only while open. Focus is
   shown by the .search-field wrapper's :focus-within border, so suppress the
   control's own outline. */
.tcb--collapsed .tcb-control { cursor: pointer; }
.tcb--collapsed .tcb-control:focus { outline: none; }
.tcb-value {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: var(--md-on-surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tcb-caret {
    flex-shrink: 0;
    margin-left: 6px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--md-on-surface-variant);
    transition: transform 0.15s;
}
.tcb--open .tcb-caret { transform: rotate(180deg); }
.tcb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.tcb-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 4px 1px 7px;
    font-size: 11px;
    color: var(--md-on-surface);
    background: var(--md-surface-container-high);
    border: 1px solid var(--md-outline);
    border-radius: var(--md-shape-s, 6px);
    white-space: nowrap;
}
.tcb-chip--more {
    padding: 1px 6px;
    color: var(--md-on-surface-variant);
}
/* Selected-style "All" pill shown when the multi-select is empty (= all trucks). */
.tcb-chip--all {
    color: #38BDF8;
    border-color: rgba(56, 189, 248, 0.45);
    background: rgba(56, 189, 248, 0.12);
    padding: 1px 8px 1px 6px;
}
.tcb-chip--all::before {
    content: '\2713';
    margin-right: 4px;
    font-size: 11px;
}
.tcb-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--md-on-surface-variant);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.tcb-chip-x:hover { color: var(--md-on-surface); }
.tcb-dropdown {
    /* Viewport-fixed layer on <body>; JS sets left/top/width from the control
       rect. Fixed + body-level so the filter bar's overflow can't clip it. */
    position: fixed;
    z-index: 4000;
    margin: 0;
    padding: 4px;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    background: #0F172A;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-shape-s, 6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.tcb-dropdown[hidden] { display: none; }
.tcb-option,
.tcb-all,
.tcb-selrow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    font-size: 12px;
    color: var(--md-on-surface);
    border-radius: 4px;
    cursor: pointer;
}
.tcb-option--active,
.tcb-option:hover,
.tcb-all:hover,
.tcb-selrow:hover { background: var(--md-surface-container-high); }
/* Grafana-style header rows ("Selected (N)" + "All"), grouped above the trucks
   and separated from them by a divider on the lower ("All") row. */
.tcb-selrow {
    border-radius: 0;
    color: var(--md-on-surface-variant);
}
.tcb-all {
    border-bottom: 1px solid var(--md-outline-variant);
    border-radius: 0;
    margin-bottom: 2px;
}
/* Grafana-style square checkbox on every multi-select row. The unchecked box uses
   a clearly-visible gray outline (like Grafana) — the old 10%-white hairline
   (var(--md-outline)) was effectively invisible on the dark dropdown, so the list
   read as "dots only" with no obvious way to multi-select. */
.tcb-check {
    box-sizing: border-box;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    border: 1.5px solid rgba(148, 163, 184, 0.55);
    border-radius: 3px;
    background: var(--md-surface-container-low);
    position: relative;
}
.tcb-option--selected .tcb-check,
.tcb-all--active .tcb-check,
.tcb-selrow--active .tcb-check {
    background: #38BDF8;
    border-color: #38BDF8;
}
/* Real "checked" rows (a specific truck, or "All") get the tick. */
.tcb-option--selected .tcb-check::after,
.tcb-all--active .tcb-check::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #0F172A;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* "Selected (N)" is an aggregate/indeterminate row, not a literal check — Grafana
   draws a dash here, so use a dash rather than a tick. */
.tcb-selrow--active .tcb-check::after {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: #0F172A;
    border-radius: 1px;
}
.tcb-selrow--active { color: var(--md-on-surface); }
.tcb-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.tcb-dot--online { background: #34D399; }
.tcb-dot--offline { background: var(--md-on-surface-variant); }
.tcb-option-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tcb-empty {
    padding: 8px;
    font-size: 12px;
    color: var(--md-on-surface-variant);
    text-align: center;
}
/* ═══════════════════════════════════════════════
   Truck Search Input
   ═══════════════════════════════════════════════ */
.truck-search-wrap {
    padding: 6px 10px;
    margin: 0 var(--space-s);
}
.truck-search-input {
    width: 100%;
}

/* ═══════════════════════════════════════════════
   Truck Detail Panel (Phase 3)
   ═══════════════════════════════════════════════ */
.truck-detail {
    border-top: 1px solid var(--glass-border);
    padding: var(--space-s);
    flex: 0 0 auto;
    height: min(320px, 48%);
    min-height: 0;
    overflow-y: auto;
    /* NO overscroll-behavior:contain — the detail content usually fits in its
       height, so there is nothing to scroll here. `contain` would then swallow
       the wheel (won't scroll itself, won't chain to the page) and turn this
       into a dead zone. Default chaining lets the wheel scroll the page once the
       detail has nothing more to scroll, so the cursor is never "stuck". */
    scrollbar-width: thin;
    display: none;
    flex-direction: column;
}
.truck-detail.active {
    display: flex;
}
.td-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--md-on-surface-variant);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.td-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--md-on-surface);
}
.td-close .material-icons {
    font-size: 18px;
}
.td-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    font-size: 13px;
    font-weight: 600;
    color: #F1F5F9;
    margin-bottom: var(--space-xs);
}
.td-heading {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 6px;
    padding-top: 4px;
}
.td-title {
    overflow-wrap: anywhere;
}
.td-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--space-s);
}
.td-content--offline {
    opacity: 0.5;
}
.td-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 0;
}
.td-label {
    font-size: 11px;
    color: var(--md-on-surface-variant);
}
.td-value {
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: #E2E8F0;
}
.td-events-header {
    font-size: 11px;
    font-weight: 600;
    color: var(--md-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top: 1px solid var(--glass-border);
    padding-top: var(--space-xs);
    margin-bottom: var(--space-xs);
}
.td-events-list {
    flex: 0 0 auto;
    overflow-y: auto;
    min-height: 0;
    max-height: 120px;
    margin-bottom: var(--space-xs);
    scrollbar-width: thin;
}
.td-events-empty {
    font-size: 11px;
    color: var(--md-on-surface-variant);
    padding: var(--space-xs) 0;
}
.td-event-row {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding: 5px 4px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
}
.td-event-row:hover {
    background: rgba(255, 255, 255, 0.06);
}
.td-event-time {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--md-on-surface-variant);
    flex-shrink: 0;
    width: 44px;
}
.td-event-dist {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--md-on-surface);
    margin-left: auto;
}
/* ═══════════════════════════════════════════════
   Driving Context (Phase 2)
   ═══════════════════════════════════════════════ */
.driving-context {
    margin-bottom: var(--space-l);
}
.dc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 16px;
    font-weight: 600;
    color: #F1F5F9;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--md-outline-variant);
}
.dc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 15px;
}
.dc-label {
    color: var(--md-on-surface-variant);
}
.dc-value {
    color: var(--md-on-surface);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.dc-context-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: var(--md-shape-xl);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}
.dc-context-chip .material-icons {
    font-size: 15px;
}
.dc-context-chip--neutral {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--md-outline-variant);
    color: var(--md-on-surface-variant);
}
.dc-context-chip--warning {
    background: rgba(255, 152, 0, 0.12);
    border: 1px solid rgba(255, 152, 0, 0.30);
    color: #FFB74D;
}
.dc-unavailable {
    font-size: 13px;
    color: var(--md-on-surface-variant);
    font-style: italic;
    padding: 4px 0;
}
.dc-loading {
    font-size: 13px;
    color: var(--md-on-surface-variant);
    padding: 4px 0;
}

/* Rich driving-context: peak snapshot grid, chips, timeline expander */
.dc-peak-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding-top: 4px;
}
.dc-peak-section {
    min-width: 0;
    padding-right: 24px;
}
.dc-peak-section + .dc-peak-section {
    padding-right: 0;
    padding-left: 24px;
    border-left: 1px solid var(--md-outline-variant);
}
.dc-peak-section .dc-value {
    min-width: 0;
    margin-left: 16px;
    text-align: right;
    overflow-wrap: anywhere;
}
.dc-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--md-on-surface-variant);
    margin: 10px 0 4px;
    padding-top: 8px;
    border-top: 1px solid var(--md-outline-variant);
}
.dc-section-label:first-of-type {
    border-top: none;
    padding-top: 0;
}
.dc-peak-section .dc-section-label {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.dc-chip {
    display: inline-block;
    padding: 1px 7px;
    margin-left: 6px;
    border-radius: var(--md-shape-xl);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--md-outline-variant);
    font-size: 11px;
    font-weight: 500;
    color: var(--md-on-surface-variant);
    vertical-align: 1px;
}
.dc-timeline {
    margin-top: 12px;
    border-top: 1px solid var(--md-outline-variant);
    padding-top: 8px;
}
.dc-timeline-summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--md-primary);
    list-style: none;
    user-select: none;
    padding: 4px 0;
}
.dc-timeline-summary::-webkit-details-marker { display: none; }
.dc-timeline-summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.15s;
}
.dc-timeline[open] .dc-timeline-summary::before {
    transform: rotate(90deg);
}
.dc-timeline-table {
    width: 100%;
    margin-top: 8px;
    border-collapse: collapse;
    font-size: 12px;
}
.dc-tl-col {
    padding: 4px 6px;
    text-align: center;
    font-weight: 600;
    color: var(--md-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 11px;
    border-bottom: 1px solid var(--md-outline-variant);
}
.dc-tl-row-label {
    text-align: left;
    padding: 4px 6px;
    color: var(--md-on-surface-variant);
    font-weight: 500;
    white-space: nowrap;
}
.dc-tl-cell {
    padding: 4px 6px;
    text-align: center;
    color: var(--md-on-surface);
    font-variant-numeric: tabular-nums;
}
.dc-tl-trace-label {
    margin-top: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--md-on-surface-variant);
}
.dc-tl-trace {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}
.dc-tl-trace-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--md-shape-s);
}
.dc-tl-trace-time {
    font-variant-numeric: tabular-nums;
    color: var(--md-on-surface-variant);
    min-width: 48px;
}
.dc-tl-trace-scn {
    color: var(--md-on-surface);
    font-weight: 500;
}
.dc-tl-trace-alert {
    margin-left: auto;
    color: var(--md-on-surface-variant);
}

@media (max-width: 680px) {
    .dc-peak-grid {
        grid-template-columns: 1fr;
    }
    .dc-peak-section {
        padding-right: 0;
    }
    .dc-peak-section + .dc-peak-section {
        margin-top: 8px;
        padding-top: 8px;
        padding-left: 0;
        border-top: 1px solid var(--md-outline-variant);
        border-left: none;
    }
}

/* ═══════════════════════════════════════════════
   Flip-Expand Overlay — simultaneous flip + grow
   ═══════════════════════════════════════════════ */

/* Hide original card while the overlay animation plays */
.event-card.flip-active {
    visibility: hidden;
}

/* Fixed overlay container — sized to modal's final dimensions */
.flip-overlay {
    position: fixed;
    z-index: 6000;
    perspective: 1400px;
    pointer-events: none;
}

/* Inner wrapper — holds front + back, animated via transform */
.flip-overlay-inner {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform-origin: center center;
    /* Start state set via JS; this transition animates the combined transform */
}
.flip-overlay-inner.flip-animating {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Both faces */
/* Front face — sized by JS at card dimensions with inverse scale */
.flip-overlay-front {
    position: absolute;
    top: 0; left: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    background: var(--glass-2);
    border: 1px solid var(--glass-border);
    border-radius: var(--md-shape-m);
}

/* Back face — fills overlay at modal dimensions */
.flip-overlay-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}

/* Back face — looks like the review modal */
.flip-overlay-back {
    transform: rotateY(180deg);
    background: var(--glass-3);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border-bright);
    border-radius: var(--md-shape-l);
    padding: 42px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 12px 40px rgba(0, 0, 0, 0.5);
    color: var(--md-on-surface);
    overflow-y: auto;
}
.flip-overlay-back h2 {
    font-size: 30px; font-weight: 600;
    margin-bottom: 20px; color: #F1F5F9;
}
.flip-overlay-back .flip-back-details {
    font-size: 20px; line-height: 1.8;
    margin-bottom: 20px;
}
.flip-overlay-back .flip-back-details strong {
    color: var(--md-on-surface);
}
.flip-overlay-back .flip-back-map-placeholder {
    height: 200px;
    border-radius: var(--md-shape-m);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
}
.flip-overlay-back .flip-back-map-placeholder .material-icons {
    font-size: 48px; color: var(--md-outline);
}

/* Scrim behind flip overlay — fades in */
.flip-scrim {
    position: fixed;
    inset: 0;
    z-index: 5999;
    background: rgba(0, 0, 0, 0);
    transition: background 0.6s ease;
    pointer-events: none;
}
.flip-scrim.active {
    background: rgba(0, 0, 0, 0.6);
    pointer-events: auto;
}


/* ═══════════════════════════════════════════════
   Review Modal — Glass Layer 3
   ═══════════════════════════════════════════════ */
.modal-overlay {
    position: fixed; inset: 0; z-index: 5000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.modal-card {
    position: relative;
    background: var(--glass-3);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border-bright);
    border-radius: var(--md-shape-l);
    padding: 32px; width: min(1080px, calc(100vw - 48px)); max-height: 88vh;
    overflow-y: auto;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 12px 40px rgba(0, 0, 0, 0.5);
    color: var(--md-on-surface);
}
.modal-card h2 { font-size: 24px; font-weight: 600; margin-bottom: 16px; color: #F1F5F9; }
.review-details { margin-bottom: 16px; font-size: 13px; line-height: 1.4; }
.review-summary {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 8px 14px;
}
.review-summary-badge,
.review-summary-item {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 28px;
}
.review-summary-badge {
    padding: 4px 10px; border-radius: var(--md-shape-xl);
    color: white; font-weight: 700;
    background: rgba(100, 116, 139, 0.85);
}
.review-summary-badge.sev-1,
.review-summary-badge.sev-2 { background: rgba(255, 152, 0, 0.85); }
.review-summary-badge.sev-3 { background: rgba(244, 67, 54, 0.85); }
.review-summary-badge.sev-4,
.review-summary-badge.sev-5 { background: rgba(183, 28, 28, 0.9); }
.review-summary-badge .material-icons,
.review-summary-item .material-icons { font-size: 17px; }
.review-summary-item {
    color: var(--md-on-surface);
}
.review-summary-item .material-icons {
    color: var(--md-on-surface-variant);
}
.review-metrics {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px; margin-top: 12px;
}
.review-metrics > div {
    padding: 8px 10px;
    border: 1px solid var(--glass-border);
    border-radius: var(--md-shape-s);
    background: rgba(255, 255, 255, 0.03);
}
.review-metrics span {
    display: block; margin-bottom: 2px;
    color: var(--md-on-surface-variant);
    font-size: 11px; font-weight: 600;
}
.review-metrics strong {
    color: var(--md-on-surface);
    font-size: 15px; font-weight: 600;
}
.review-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    margin-bottom: 18px;
}
.review-layout--map-only {
    grid-template-columns: 1fr;
}
.review-layout--map-only .review-map {
    min-height: 360px;
}
.review-media {
    min-width: 0;
}
.review-media-stage {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    min-height: 320px; height: 100%;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-radius: var(--md-shape-m);
    background: rgba(0, 0, 0, 0.35);
}
.review-layout--video {
    align-items: start;
}
.review-layout--video .review-media-stage,
.review-layout--video .review-map {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: var(--review-media-aspect, 16 / 9);
}
.review-layout--video .review-media-poster,
.review-layout--video .review-video {
    min-height: 0;
}
.review-media-poster,
.review-video {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
}
.review-media-poster {
    object-fit: cover;
}
.review-video {
    position: absolute;
    inset: 0;
    object-fit: contain;
    background: #000;
}
.review-video--loading {
    opacity: 0;
    pointer-events: none;
}
.review-media-play {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    display: flex; align-items: center; justify-content: center;
    width: 64px; height: 64px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.58);
    color: white;
    cursor: pointer;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: transform 0.15s, background 0.15s;
}
.review-media-play:hover {
    transform: translate(-50%, -50%) scale(1.05);
    background: rgba(0, 0, 0, 0.72);
}
.review-media-play:disabled {
    cursor: wait;
    opacity: 0.65;
}
.review-media-play .material-icons { font-size: 42px; }
.review-media-placeholder {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; color: var(--md-on-surface-variant);
    font-size: 13px; font-weight: 600;
}
.review-media-placeholder .material-icons {
    font-size: 42px;
}
.review-media-status {
    position: absolute;
    left: 12px; bottom: 12px;
    padding: 5px 8px;
    border-radius: var(--md-shape-xl);
    background: rgba(0, 0, 0, 0.62);
    color: var(--md-on-surface);
    font-size: 12px; font-weight: 600;
}
.review-map {
    min-height: 320px; height: 100%; border-radius: var(--md-shape-m);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    overflow: hidden;
}
/* 08e: predicted-path peak badge + path-trail source-time scrubber */
.review-peak-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: 12px;
    background: rgba(79, 195, 247, 0.16);
    color: #4fc3f7;
    font-size: 12px;
}
.review-peak-badge .material-icons { font-size: 16px; }
.review-path-trail {
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
}
.review-path-trail-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #b0bec5;
    margin-bottom: 6px;
}
.review-path-trail-scrubber { width: 100%; }
.review-path-trail-meta { font-size: 11px; color: #78909c; margin-top: 4px; }
.review-path-trail-left { display: inline-flex; align-items: center; gap: 6px; }
.review-path-trail-play {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; padding: 0;
    border: none; border-radius: 50%;
    background: rgba(79, 195, 247, 0.16); color: #4fc3f7;
    cursor: pointer;
}
.review-path-trail-play:hover { background: rgba(79, 195, 247, 0.28); }
.review-path-trail-play .material-icons { font-size: 16px; }
.review-notes {
    width: 100%; min-height: 90px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--md-shape-s); padding: 14px;
    font-family: inherit; font-size: 15px; resize: vertical;
    margin-bottom: 0;
    background: rgba(255, 255, 255, 0.04); color: var(--md-on-surface);
    transition: border-color 0.15s;
}
.review-notes:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.20);
}
.review-notes::placeholder { color: var(--md-on-surface-variant); }

/* Review status info section in modal */
.review-status-info {
    margin-top: 12px; padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-s);
    font-size: 13px; line-height: 1.6;
}
.review-status-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: var(--md-shape-xl);
    font-size: 13px; font-weight: 600;
    margin-bottom: 6px;
}
.review-status-badge .material-icons { font-size: 16px; }
.review-status--confirmed {
    color: white; background: var(--severity-none);
}
.review-status--false-alarm {
    color: white; background: var(--severity-offline);
}
.review-actions { display: flex; flex-direction: column; gap: var(--space-m); }
.review-buttons { display: flex; gap: var(--space-m); justify-content: center; }
.modal-card .btn-filled { font-size: 15px; padding: 11px 24px; }
.modal-card .btn-text { font-size: 15px; padding: 10px 16px; }
.review-btn { font-size: 18px; padding: 6px 15px; }

/* Close button — top-right of modal */
.modal-close-btn {
    position: absolute; top: 16px; right: 16px;
    width: 44px; height: 44px; border: none; border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-border);
    color: var(--md-on-surface-variant);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
    z-index: 1;
}
.modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--md-on-surface);
}

@media (max-width: 860px) {
    .modal-card {
        width: calc(100vw - 24px);
        max-height: 90vh;
        padding: 24px;
    }
    .review-layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .review-metrics {
        grid-template-columns: 1fr;
    }
    .review-media-stage,
    .review-media-poster,
    .review-video,
    .review-map {
        min-height: 240px;
    }
    .review-layout--map-only .review-map {
        min-height: 280px;
    }
    .review-buttons {
        flex-direction: column;
    }
    .modal-card .btn-filled {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════
   Side Drawer — Glass Layer 3
   ═══════════════════════════════════════════════ */
/* Toast feedback: layered system — success pill (lightweight) vs error card (needs attention). */
.toast-region {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6200;
    display: flex;
    flex-direction: column-reverse; /* newest at bottom, stack upward */
    align-items: center;
    gap: 8px;
    pointer-events: none;
    width: max-content;
    max-width: calc(100vw - 32px);
}

/* ── Base toast ────────────────────────────────────────────────────────── */
.toast {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 10px 12px;
    border-radius: 999px; /* pill by default */
    background: rgba(22, 24, 34, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
    color: var(--md-on-surface);
    pointer-events: auto;
    white-space: nowrap;
    max-width: min(520px, calc(100vw - 32px));
    animation: toastIn 0.28s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

/* ── Success: compact pill, one-liner ──────────────────────────────────── */
.toast-success {
    border: 1px solid rgba(134, 239, 172, 0.18);
}
.toast-success .toast-icon {
    font-size: 18px;
    color: #86EFAC;
    flex-shrink: 0;
}
.toast-success .toast-body {
    display: flex;
    align-items: baseline;
    gap: 0;
    min-width: 0;
    overflow: hidden;
}
.toast-success .toast-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--md-on-surface);
    white-space: nowrap;
}
.toast-success .toast-title::after {
    content: " ·";
    margin-right: 4px;
    color: var(--md-on-surface-variant);
    font-weight: 400;
}
.toast-success .toast-message {
    font-size: 13px;
    color: var(--md-on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0;
}

/* ── Error / Warning: card with left stripe and close button ───────────── */
.toast-error,
.toast-warning {
    border-radius: 10px;
    align-items: flex-start;
    padding: 13px 14px 15px 0;
    border: none;
    border-left: 3px solid;
    white-space: normal;
    max-width: min(380px, calc(100vw - 32px));
    gap: 10px;
}
.toast-error   { border-left-color: var(--md-error); }
.toast-warning { border-left-color: var(--severity-caution); }

.toast-error .toast-icon,
.toast-warning .toast-icon {
    font-size: 20px;
    flex-shrink: 0;
    margin-left: 12px;
    margin-top: 1px;
}
.toast-error .toast-icon   { color: var(--md-error); }
.toast-warning .toast-icon { color: var(--severity-caution); }

.toast-error .toast-body,
.toast-warning .toast-body {
    min-width: 0;
    flex: 1;
}
.toast-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--md-on-surface);
    line-height: 1.3;
}
.toast-message {
    margin-top: 3px;
    font-size: 12px;
    color: var(--md-on-surface-variant);
    line-height: 1.45;
}

/* Close button (error/warning only) */
.toast-close {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--md-on-surface-variant);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: -1px;
}
.toast-close:hover { background: rgba(255,255,255,0.08); color: var(--md-on-surface); }
.toast-close .material-icons { font-size: 16px; }

/* Progress drain bar — shows remaining time on error/warning */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    transform-origin: left center;
    animation: toastDrain var(--toast-dur, 6000ms) linear forwards;
    border-radius: 0 0 8px 8px;
}
.toast-error .toast-progress   { background: var(--md-error); opacity: 0.45; }
.toast-warning .toast-progress { background: var(--severity-caution); opacity: 0.45; }

@keyframes toastIn {
    from { opacity: 0; transform: translateY(10px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateY(0)   scale(1); }
    to   { opacity: 0; transform: translateY(6px) scale(0.95); }
}
@keyframes toastDrain {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* Account deletion uses a focused modal instead of browser confirm(). */
.user-delete-modal { z-index: 5100; }
.user-delete-card {
    width: min(480px, calc(100vw - 32px));
    max-height: none;
    padding: 34px;
}
.user-delete-card h2 {
    font-size: 24px;
    margin-bottom: var(--space-m);
}
.user-delete-copy {
    display: flex;
    gap: 14px;
    padding: 16px;
    margin-bottom: var(--space-l);
    border: 1px solid rgba(251, 191, 36, 0.22);
    border-radius: var(--md-shape-s);
    background: rgba(251, 191, 36, 0.08);
}
.user-delete-copy .material-icons {
    flex-shrink: 0;
    color: var(--severity-caution);
}
.user-delete-copy p {
    color: var(--md-on-surface);
    font-size: 15px;
    line-height: 1.45;
}
.user-delete-copy p + p {
    margin-top: 4px;
    color: var(--md-on-surface-variant);
    font-size: 13px;
}
.user-delete-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-s);
}

/* ═══════════════════════════════════════════════
   Side Navigation Rail — collapsible (mini / expanded / pinned)
   ═══════════════════════════════════════════════ */
.side-nav {
    position: fixed; top: 0; left: 0; z-index: 3100;
    display: none;                 /* revealed once authenticated */
    flex-direction: column;
    width: 72px;                   /* mini rail width */
    height: 100vh;
    background: var(--glass-3);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-right: 1px solid var(--glass-border-bright);
    box-shadow:
        inset -1px 0 0 rgba(255, 255, 255, 0.04),
        var(--md-elevation-3);
    color: var(--md-on-surface);
    overflow: hidden;
    transition: width 0.2s ease;
}
body.authed .side-nav { display: flex; }
body.nav-expanded .side-nav { width: 240px; }
/* Immersive map fullscreen hides the rail. It is position:fixed z-index:3100 —
   above the fullscreen map layer (z-1000) — so if left visible it paints over
   the map's left edge and covers the bottom-left global-view FAB (left:16px,
   inside the 72px rail). Placed after the `body.authed` rule above so the equal
   specificity resolves in this rule's favour. Toggled by map.js enter/exit. */
body.map-fullscreen .side-nav { display: none; }

/* Content reflow: the mini rail always reserves 72px; expanding reserves the full width. */
#dashboard { transition: padding-left 0.2s ease; }
body.authed #dashboard { padding-left: 72px; }
body.authed.nav-expanded #dashboard { padding-left: 240px; }

/* Rail top: the hamburger toggle (always visible) */
.nav-top {
    display: flex; align-items: center; gap: 6px;
    flex-shrink: 0;
    height: 56px;
    padding: 0 14px;
    border-bottom: 1px solid var(--md-outline-variant);
}
.nav-icon-btn {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 44px; height: 44px;
    border: none; border-radius: 50%;
    background: transparent; color: var(--md-on-surface);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.nav-icon-btn:hover { background: rgba(255, 255, 255, 0.08); }
.nav-icon-btn .material-icons { font-size: 22px; }

/* Scrollable nav body */
.nav-scroll {
    flex: 1; min-height: 0;
    overflow-x: hidden; overflow-y: auto;
    display: flex; flex-direction: column; gap: 4px;
    padding: 10px;
}

/* Nav item — icon always, label only when expanded */
.nav-item {
    display: flex; align-items: center; gap: 18px;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: none; border-radius: var(--md-shape-s);
    background: transparent; color: var(--md-on-surface);
    font-family: inherit; font-size: 14px; font-weight: 500;
    text-align: left; white-space: nowrap; cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.07); }
.nav-item.active {
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
}
.nav-item-icon {
    font-size: 22px; flex-shrink: 0;
    color: var(--md-on-surface-variant);
    transition: color 0.15s;
}
.nav-item:hover .nav-item-icon,
.nav-item.active .nav-item-icon { color: var(--md-primary); }
.nav-item-label {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis;
    opacity: 1; transition: opacity 0.12s ease;
}
/* Mini rail: hide labels, center the icon */
body:not(.nav-expanded) .nav-item {
    gap: 0; padding: 0; justify-content: center;
}
body:not(.nav-expanded) .nav-item-label {
    display: none;
}

/* Road Boundaries upload panel — visible only when the rail is expanded */
.nav-group { display: flex; flex-direction: column; }
#userManagementSection[hidden],
#auditDrawerSection[hidden] { display: none !important; }
.nav-panel { display: none; padding: 2px 6px 8px; }
body.nav-expanded .nav-panel { display: block; }
.nav-hint {
    font-size: 12px; color: var(--md-on-surface-variant);
    margin: 4px 8px 10px;
}

.boundary-upload-group {
    display: flex; flex-direction: column; gap: var(--space-s);
    margin-bottom: var(--space-m);
}
.boundary-upload-label {
    display: flex; align-items: center; gap: var(--space-s);
    padding: 10px var(--space-m);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: var(--md-shape-s);
    font-size: 13px; font-weight: 500; cursor: pointer;
    color: var(--md-on-surface);
    transition: background 0.15s, border-color 0.15s;
}
.boundary-upload-label:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--md-primary);
}
.boundary-upload-label.uploading {
    opacity: 0.6; pointer-events: none;
}
.boundary-side-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.upload-icon {
    margin-left: auto; font-size: 20px; color: var(--md-on-surface-variant);
}

.boundary-list { display: flex; flex-direction: column; gap: var(--space-xs); }
.boundary-item {
    display: flex; align-items: center; gap: var(--space-s);
    padding: 8px var(--space-s); border-radius: var(--md-shape-s);
    font-size: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--md-outline-variant);
    color: var(--md-on-surface);
}
.boundary-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.boundary-item .btn-icon { width: 28px; height: 28px; }
.boundary-item .btn-icon .material-icons { font-size: 16px; color: var(--md-error); }

.management-page {
    flex: 1;
    min-height: 0;
    padding: 16px var(--space-m) var(--space-m);
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}
.management-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    flex-shrink: 0;
}
.management-page-title {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    color: #F1F5F9;
    font-size: 20px;
    font-weight: 600;
}
.management-page-title .material-icons-outlined {
    color: var(--md-primary);
}
.management-page-subtitle {
    margin-top: 3px;
    color: var(--md-on-surface-variant);
    font-size: 13px;
}
.management-back-btn {
    color: var(--md-on-surface-variant);
}
#userManagementPage {
    overflow: auto;
}
.user-management-layout {
    flex: none;
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.user-create-panel,
.user-list-panel {
    min-height: 0;
    background: var(--glass-1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--md-shape-m);
    box-shadow: var(--glass-highlight), var(--md-elevation-1);
    overflow: hidden;
}
.user-create-panel {
    align-self: start;
    width: 100%;
    flex-shrink: 0;
}
.user-create-panel[hidden] {
    display: none;
}
.user-create-panel .user-create-form {
    padding: var(--space-m);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    align-items: center;
    gap: 10px;
}
.user-create-panel .sidebar-footer {
    display: none;
}
.sidebar-footer {
    padding: var(--space-s) var(--space-m) var(--space-m);
    border-top: 1px solid var(--md-outline-variant);
}
.sidebar-back-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: var(--md-shape-s);
    color: var(--md-on-surface-variant);
    font-size: 13px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-align: left;
}
.sidebar-back-btn:hover {
    background: rgba(255,255,255,0.06);
    color: var(--md-on-surface);
}
.sidebar-back-btn .material-icons {
    font-size: 18px;
}
.user-list-panel {
    display: flex;
    flex-direction: column;
    flex: none;
    min-height: auto;
    overflow: visible;
}
.user-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--md-outline-variant);
}
.user-list-header .panel-title {
    border-bottom: none;
}
.user-list-header .btn-icon {
    margin-right: var(--space-s);
}
.user-list-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: var(--space-s);
    flex-wrap: wrap;
    justify-content: flex-end;
}
.user-search-field {
    display: flex;
    align-items: center;
    gap: 7px;
    width: min(360px, 34vw);
    min-height: 34px;
    padding: 0 9px;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-s);
    background: rgba(255, 255, 255, 0.04);
}
.user-search-field .material-icons {
    flex-shrink: 0;
    color: var(--md-on-surface-variant);
    font-size: 18px;
}
.user-search-field input {
    width: 100%;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--md-on-surface);
    font-family: inherit;
    font-size: 12px;
}
.user-create-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}
.drawer-input-field {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--md-shape-s);
    background: rgba(255, 255, 255, 0.04);
    transition: border-color 0.15s, background 0.15s;
}
.drawer-input-field:focus-within {
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(255, 255, 255, 0.07);
}
.drawer-input-field .material-icons {
    flex-shrink: 0;
    color: var(--md-on-surface-variant);
    font-size: 18px;
}
.drawer-input-field input {
    width: 100%;
    min-width: 0;
    border: none;
    outline: none;
    padding: 9px 0;
    background: transparent;
    color: var(--md-on-surface);
    font-family: inherit;
    font-size: 13px;
}
.drawer-input-field input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}
.drawer-select,
.user-role-select {
    border: 1px solid var(--glass-border-bright);
    border-radius: var(--md-shape-s);
    background: var(--glass-2);
    color: var(--md-on-surface);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    color-scheme: dark;
    cursor: pointer;
}
.drawer-select {
    width: 100%;
    padding: 9px 10px;
}
.user-role-select {
    width: 92px;
    padding: 7px 8px;
}
.user-role-control {
    display: flex;
    align-items: center;
    gap: 8px;
}
.user-role-control-locked .user-role-select {
    width: 82px;
}
.user-role-lock {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: var(--md-shape-s);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--md-outline-variant);
    color: var(--md-on-surface-variant);
    font-size: 11px;
    font-weight: 500;
}
.drawer-select:focus,
.user-role-select:focus {
    border-color: var(--md-primary);
}
.drawer-select option,
.user-role-select option {
    background: #1a1a1f;
    color: #E2E8F0;
}
.user-create-button {
    width: 100%;
    justify-content: center;
    padding: 9px 16px;
    border-radius: var(--md-shape-s);
}
.user-create-button .material-icons {
    font-size: 18px;
}
.user-create-button:disabled,
.user-role-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.user-create-button:disabled:hover {
    transform: none;
}
.user-list {
    flex: none;
    min-height: 0;
    overflow-x: auto;
    overflow-y: visible;
    padding: var(--space-m);
}
.user-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    min-height: 56px;
    padding: 10px var(--space-m);
    border-top: 1px solid var(--md-outline-variant);
}
.user-pagination-meta {
    color: var(--md-on-surface-variant);
    font-size: 12px;
}
.user-pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}
.user-page-size {
    height: 34px;
    min-width: 104px;
    border: 1px solid var(--glass-border-bright);
    border-radius: var(--md-shape-s);
    background: var(--glass-2);
    color: var(--md-on-surface);
    font-family: inherit;
    font-size: 12px;
    outline: none;
    color-scheme: dark;
}
.user-page-button {
    width: 34px;
    height: 34px;
}
.user-page-button:disabled,
.user-page-size:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.user-table {
    min-width: 980px;
    display: flex;
    flex-direction: column;
}
.user-table-row {
    display: grid;
    grid-template-columns: 42px minmax(190px, 1.5fr) 128px 110px 140px 140px 190px;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--md-outline-variant);
}
.user-table-row:last-child {
    border-bottom: none;
}
.user-table-row-expandable {
    cursor: pointer;
    transition: background 0.15s;
}
.user-table-row-expandable:hover,
.user-table-row-expandable.expanded {
    background: rgba(255, 255, 255, 0.04);
}
.user-add-button {
    height: 36px;
    padding: 0 14px;
    white-space: nowrap;
}
.user-add-button .material-icons {
    font-size: 18px;
}
.user-table-head {
    color: var(--md-on-surface-variant);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--md-shape-s);
    border-bottom: none;
}
.user-expand-head,
.user-expand-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}
.user-expand-button {
    position: relative;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--md-outline-variant);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--md-on-surface-variant);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.user-expand-button:hover,
.user-table-row-expandable.expanded .user-expand-button {
    border-color: rgba(56, 189, 248, 0.68);
    background: rgba(56, 189, 248, 0.10);
    color: var(--md-primary);
}
/* Today activity marker: a lightweight scan cue, not a warning/alert color. */
.user-expand-button.has-today-activity {
    border-color: rgba(96, 165, 250, 0.82);
    background: rgba(37, 99, 235, 0.18);
    color: #93C5FD;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}
.user-expand-button.has-today-activity:hover,
.user-table-row-expandable.expanded .user-expand-button.has-today-activity {
    border-color: rgba(147, 197, 253, 0.95);
    background: rgba(37, 99, 235, 0.26);
}
.user-expand-button .material-icons {
    font-size: 18px;
    line-height: 1;
}
.user-activity-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #38BDF8;
    border: 1px solid var(--md-surface);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.18);
}
.user-identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.user-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--md-on-surface);
    font-size: 13px;
    font-weight: 600;
}
.user-email {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--md-on-surface-variant);
    font-size: 11px;
}
.user-table-time {
    color: var(--md-on-surface-variant);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.user-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 72px;
    padding: 4px 9px;
    border-radius: var(--md-shape-s);
    border: 1px solid var(--md-outline-variant);
    font-size: 12px;
    font-weight: 600;
}
.user-status-active {
    color: #86EFAC;
    background: rgba(34, 197, 94, 0.10);
}
.user-status-disabled {
    color: var(--md-on-surface-variant);
    background: rgba(255, 255, 255, 0.04);
}
.user-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.user-action-button {
    padding: 5px 8px;
    font-size: 12px;
    color: var(--md-primary);
}
.user-action-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.user-action-danger {
    color: var(--md-error);
}
.user-action-note {
    color: var(--md-on-surface-variant);
    font-size: 12px;
}
.user-empty {
    padding: 9px;
    border-radius: var(--md-shape-s);
    color: var(--md-on-surface-variant);
    font-size: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--md-outline-variant);
}
.user-behavior-row {
    padding: 14px 14px 18px 54px;
    border-bottom: 1px solid var(--md-outline-variant);
    background: rgba(255, 255, 255, 0.018);
}
.user-behavior-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.behavior-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.behavior-user-chip,
.behavior-card-meta {
    color: var(--md-on-surface-variant);
    font-size: 12px;
    font-weight: 500;
}
.behavior-month-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}
.behavior-month-label {
    min-width: 132px;
    text-align: center;
    color: var(--md-on-surface);
    font-size: 13px;
    font-weight: 600;
}
.behavior-month-button {
    width: 32px;
    height: 32px;
}
.behavior-summary-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.behavior-month-input {
    height: 38px;
    width: 142px;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-s);
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--md-on-surface);
    color-scheme: dark;
    font-family: inherit;
    font-size: 14px;
    outline: none;
}
.behavior-month-input:focus {
    border-color: rgba(56, 189, 248, 0.65);
}
.behavior-event-total {
    color: var(--md-on-surface);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.behavior-card-help {
    margin-top: 12px;
    color: var(--md-on-surface-variant);
    font-size: 12px;
}
.behavior-drilldown-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}
.user-behavior-panel.has-breakdown .behavior-drilldown-grid {
    grid-template-columns: minmax(420px, 1fr) minmax(360px, 0.96fr);
    align-items: stretch;
}
.behavior-card {
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-m);
    background: rgba(255, 255, 255, 0.045);
    box-shadow: var(--glass-highlight);
}
.behavior-card h4 {
    color: var(--md-on-surface);
    font-size: 16px;
    font-weight: 600;
}
.behavior-heatmap-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px;
    gap: 18px;
    align-items: center;
    margin-top: 18px;
}
.behavior-calendar {
    width: min(100%, 560px);
    justify-self: center;
}
.behavior-weekdays,
.behavior-heatmap {
    display: grid;
    grid-template-columns: repeat(7, minmax(42px, 1fr));
    gap: 2px;
}
.behavior-weekdays {
    margin: 0 0 8px;
    color: var(--md-on-surface-variant);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}
.behavior-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    min-height: 54px;
    padding: 6px;
    border: 1px solid rgba(147, 197, 253, 0.18);
    border-radius: var(--md-shape-s);
    background: rgba(255, 255, 255, 0.04);
    color: var(--md-on-surface);
    cursor: pointer;
}
.behavior-day:disabled {
    cursor: default;
}
.behavior-day.selected {
    outline: 2px solid rgba(96, 165, 250, 0.95);
    z-index: 2;
}
.behavior-day-muted {
    opacity: 0.28;
}
.behavior-day-level-1 { background: rgba(191, 219, 254, 0.14); }
.behavior-day-level-2 { background: rgba(96, 165, 250, 0.28); }
.behavior-day-level-3 { background: rgba(37, 99, 235, 0.48); }
.behavior-day-level-4 { background: rgba(29, 78, 216, 0.76); }
.behavior-day-count {
    color: #F8FAFC;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}
.behavior-day-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    min-width: 176px;
    display: none;
    transform: translateX(-50%);
    padding: 9px 10px;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-s);
    background: rgba(12, 18, 32, 0.96);
    color: var(--md-on-surface);
    box-shadow: var(--md-elevation-2);
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
    pointer-events: none;
    z-index: 10;
}
.behavior-day:hover .behavior-day-tooltip,
.behavior-day:focus-visible .behavior-day-tooltip {
    display: block;
}
.behavior-day-tooltip strong {
    color: var(--md-on-surface-variant);
    font-weight: 600;
}
.behavior-legend {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--md-on-surface-variant);
    font-size: 12px;
}
.behavior-legend-ramp {
    width: 12px;
    height: 82px;
    border-radius: 999px;
    background: linear-gradient(180deg, #2563EB 0%, #93C5FD 55%, #EFF6FF 100%);
}
.behavior-empty {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    color: var(--md-on-surface-variant);
    font-size: 13px;
    text-align: center;
}
.behavior-bars {
    position: relative;
    min-width: 0;
    height: 100%;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(64px, 1fr);
    align-items: stretch;
    gap: 14px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 8px 4px 0 8px;
}
.behavior-bars::-webkit-scrollbar {
    display: none;
}
.behavior-bars::before {
    content: '';
    position: absolute;
    left: 8px;
    right: 4px;
    top: 8px;
    bottom: 56px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.28);
    background:
        linear-gradient(to top, transparent 0, transparent calc(50% - 1px), rgba(148, 163, 184, 0.18) calc(50% - 1px), rgba(148, 163, 184, 0.18) 50%, transparent 50%),
        linear-gradient(to top, transparent 0, transparent calc(100% - 1px), rgba(148, 163, 184, 0.20) calc(100% - 1px), rgba(148, 163, 184, 0.20) 100%);
    pointer-events: none;
}
.behavior-bar {
    position: relative;
    z-index: 1;
    height: 100%;
    min-width: 64px;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 54px;
    align-items: stretch;
    justify-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--md-on-surface);
    cursor: pointer;
}
.behavior-bar.selected {
    color: #93C5FD;
}
.behavior-bar-column {
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}
.behavior-bar-label {
    width: 78px;
    max-width: 100%;
    margin-top: 10px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--md-on-surface-variant);
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
}
.behavior-bar-fill {
    display: block;
    width: 34px;
    min-height: 16px;
    border-radius: 7px 7px 0 0;
    background: #2563EB;
    transition: background 0.15s, box-shadow 0.15s;
}
.behavior-bar:hover .behavior-bar-fill,
.behavior-bar.selected .behavior-bar-fill {
    background: #1D4ED8;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.28);
}
.behavior-bar-count {
    margin-bottom: 8px;
    color: var(--md-on-surface);
    font-size: 13px;
    font-weight: 600;
}
.behavior-chart {
    margin-top: 12px;
    min-height: 310px;
}
.behavior-chart-plot {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    height: 296px;
    padding: 6px 6px 0 0;
}
.behavior-chart-axis {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 58px;
    color: var(--md-on-surface-variant);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.behavior-details-card {
    overflow: hidden;
}
.behavior-details-wrap {
    margin-top: 12px;
    overflow: auto;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-s);
}
/* Truncation hint under the drilldown table (rows capped server-side). */
.behavior-details-truncated {
    padding: 8px 4px 0;
    font-size: 12px;
    color: var(--md-on-surface-variant);
}
.behavior-details-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    font-size: 12px;
}
.behavior-details-table th,
.behavior-details-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--md-outline-variant);
    text-align: left;
    vertical-align: top;
}
.behavior-details-table th {
    color: var(--md-on-surface-variant);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}
.behavior-time {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.behavior-metadata {
    max-width: 280px;
    max-height: 120px;
    overflow: auto;
    margin: 0;
    color: var(--md-on-surface-variant);
    font-family: Consolas, 'Courier New', monospace;
    font-size: 11px;
    white-space: pre-wrap;
}
@media (max-width: 860px) {
    .user-management-layout {
        overflow-y: auto;
    }
    .user-create-panel .user-create-form {
        grid-template-columns: 1fr;
    }
    .user-list-panel {
        min-height: 360px;
    }
    .user-list-header {
        align-items: flex-start;
        flex-direction: column;
    }
    .user-list-tools,
    .user-search-field {
        width: 100%;
    }
    .user-list-tools {
        justify-content: stretch;
        margin-right: 0;
    }
    .user-add-button {
        width: 100%;
        justify-content: center;
    }
    .behavior-drilldown-grid {
        grid-template-columns: 1fr;
    }
    .user-behavior-panel.has-breakdown .behavior-drilldown-grid {
        grid-template-columns: 1fr;
    }
    .user-behavior-row {
        padding-left: 12px;
    }
    .behavior-heatmap-board {
        grid-template-columns: 1fr;
    }
    .behavior-legend {
        flex-direction: row-reverse;
    }
    .behavior-legend-ramp {
        width: 82px;
        height: 12px;
        background: linear-gradient(90deg, #EFF6FF 0%, #93C5FD 45%, #2563EB 100%);
    }
}

/* ═══════════════════════════════════════════════
   Radar Pulse Animation — UNCHANGED behavior
   ═══════════════════════════════════════════════ */
/* Audit log page: full SPA view that follows the User Management navigation model. */
.audit-page-actions {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    justify-content: flex-end;
    flex-wrap: wrap;
}
.audit-page-panel {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: var(--space-m);
    background: var(--glass-1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--md-shape-m);
    box-shadow: var(--glass-highlight), var(--md-elevation-1);
    color: var(--md-on-surface);
    overflow: hidden;
}
.audit-filter-bar {
    display: grid;
    grid-template-columns: repeat(7, minmax(120px, 1fr)) auto;
    gap: var(--space-s);
    align-items: end;
    padding-bottom: var(--space-m);
    border-bottom: 1px solid var(--md-outline-variant);
}
.audit-filter-bar label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.audit-filter-bar label span {
    font-size: 11px;
    color: var(--md-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.audit-filter-bar input,
.audit-filter-bar select {
    width: 100%;
    min-width: 0;
    height: 38px;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-s);
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--md-on-surface);
    font: inherit;
}
.audit-filter-bar input:focus,
.audit-filter-bar select:focus {
    outline: none;
    border-color: var(--md-primary);
}
.audit-context-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    min-height: 38px;
    margin-top: var(--space-s);
    padding: 7px 10px;
    border: 1px solid rgba(56, 189, 248, 0.28);
    border-radius: var(--md-shape-s);
    background: rgba(56, 189, 248, 0.10);
    color: var(--md-on-primary-container);
    font-size: 13px;
}
.audit-context-filter > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.audit-context-filter .material-icons {
    flex-shrink: 0;
    font-size: 18px;
}
.audit-context-filter .btn-text {
    flex-shrink: 0;
    padding: 5px 8px;
}
.audit-error {
    min-height: 24px;
    padding: 6px 0;
    color: var(--md-error);
    font-size: 13px;
}
.audit-content {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.audit-table-wrap {
    height: 100%;
    overflow: auto;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-s);
    background: rgba(255, 255, 255, 0.025);
}
.audit-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    font-size: 13px;
}
.audit-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 11px 12px;
    background: rgba(18, 18, 24, 0.94);
    color: var(--md-on-surface-variant);
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--md-outline-variant);
}
.audit-table td {
    padding: 12px;
    border-bottom: 1px solid var(--md-outline-variant);
    color: var(--md-on-surface);
    vertical-align: middle;
}
.audit-table tbody tr {
    cursor: pointer;
    transition: background 0.12s;
}
.audit-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); }
.audit-table code {
    color: var(--md-on-primary-container);
    font-family: Consolas, 'Courier New', monospace;
    font-size: 12px;
}
.audit-time {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.audit-empty {
    height: 220px;
    text-align: center;
    color: var(--md-on-surface-variant);
}
.audit-outcome {
    display: inline-flex;
    align-items: center;
    min-width: 68px;
    justify-content: center;
    padding: 4px 9px;
    border-radius: var(--md-shape-s);
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}
.audit-outcome--success {
    color: #D9F99D;
    background: rgba(76, 175, 80, 0.16);
}
.audit-outcome--failure {
    color: #FECACA;
    background: rgba(248, 113, 113, 0.16);
}
.audit-outcome--denied {
    color: #FED7AA;
    background: rgba(255, 152, 0, 0.16);
}
.audit-load-more {
    position: sticky;
    left: 0;
    margin: 12px;
}
.audit-detail-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(440px, 100%);
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--glass-border-bright);
    background: rgba(14, 14, 20, 0.96);
    box-shadow: -16px 0 34px rgba(0, 0, 0, 0.35);
    transform: translateX(calc(100% + 28px));
    transition: transform 0.22s ease;
    z-index: 3;
}
.audit-detail-panel.open { transform: translateX(0); }
.audit-detail-header {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding: 16px;
    border-bottom: 1px solid var(--md-outline-variant);
}
.audit-detail-header h3 {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 17px;
    font-weight: 600;
}
.audit-detail-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 16px;
}
.audit-detail-body h4 {
    margin: 18px 0 8px;
    color: var(--md-on-surface-variant);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.audit-detail-grid {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 8px 12px;
    font-size: 13px;
}
.audit-detail-grid dt {
    color: var(--md-on-surface-variant);
}
.audit-detail-grid dd {
    min-width: 0;
    overflow-wrap: anywhere;
}
.audit-json {
    max-height: 240px;
    overflow: auto;
    padding: 12px;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-s);
    background: rgba(0, 0, 0, 0.28);
    color: var(--md-on-surface);
    font-family: Consolas, 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.audit-detail-loading {
    color: var(--md-on-surface-variant);
    font-size: 13px;
}

@media (max-width: 980px) {
    .audit-page-panel {
        padding: var(--space-s);
    }
    .audit-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .audit-filter-bar .btn-filled {
        justify-content: center;
    }
    .audit-page-actions {
        justify-content: flex-start;
    }
}

.radar-pulse-container {
    background: transparent !important;
    border: none !important;
}
.radar-pulse {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--pulse-color, #F44336);
    opacity: 0;
    animation: radarPing var(--pulse-speed, 1.5s) ease-out infinite;
}
@keyframes radarPing {
    0% {
        transform: scale(0.5);
        opacity: 0.7;
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}

/* ═══════════════════════════════════════════════
   Heatmap Legend — Glass
   ═══════════════════════════════════════════════ */
.heatmap-legend {
    background: var(--glass-2);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    padding: 8px 12px;
    border-radius: var(--md-shape-s);
    box-shadow: var(--glass-highlight), var(--md-elevation-1);
    font-size: 12px;
    line-height: 1.8;
    color: var(--md-on-surface);
}
.heatmap-legend b {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--md-on-surface-variant);
}
.legend-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   Truck Filter (multi-select on historical tabs)
   ═══════════════════════════════════════════════ */
.truck-filter-header {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-s) var(--space-m);
    border-bottom: 1px solid var(--md-outline-variant);
    font-size: 13px;
    font-weight: 500;
}
.truck-filter-header input[type="checkbox"] {
    accent-color: var(--md-primary);
}
.truck-item input[type="checkbox"] {
    accent-color: var(--md-primary);
    margin-right: 4px;
}

/* ═══════════════════════════════════════════════
   Scrollbars — Dark glass themed
   ═══════════════════════════════════════════════ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* ═══════════════════════════════════════════════
   Firefox Fallback — Opaque dark when no blur
   ═══════════════════════════════════════════════ */
@supports not (backdrop-filter: blur(1px)) {
    .top-bar,
    .truck-list-panel,
    .event-carousel-section { background: rgba(18, 18, 22, 0.95); }

    .summary-card,
    .event-card { background: rgba(22, 22, 28, 0.95); }

    .modal-card,
    .side-nav,
    .audit-page-panel { background: rgba(20, 20, 26, 0.98); }

    .login-card { background: rgba(12, 12, 16, 0.95); }

    .btn-fab { background: rgba(22, 22, 28, 0.95); }
    .heatmap-legend { background: rgba(22, 22, 28, 0.95); }
    .event-filter-select { background: rgba(22, 22, 28, 0.95); }
}

/* ── Video PiP Panel ───────────────────────────── */
/* ── Video Split Panel ───────────────────────── */
.video-split {
    flex: 1;
    min-width: 0;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #0a0a0a;
    border: 1px solid var(--glass-border);
    border-radius: var(--md-shape-m);
    overflow: hidden;
    box-shadow: var(--md-elevation-1);
}
.video-split[data-state="idle"] {
    display: none;
}
.video-split__header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(20, 20, 30, 0.95);
    flex-shrink: 0;
}
.video-split__live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--severity-critical, #F44336);
    animation: splitPulse 1.5s ease-in-out infinite;
}
@keyframes splitPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.video-split__live-text {
    font-size: 11px;
    font-weight: 700;
    color: var(--severity-critical, #F44336);
    letter-spacing: 0.5px;
}
.video-split__truck {
    font-size: 13px;
    color: var(--md-on-surface-variant, #c0c0c0);
    margin-left: 4px;
}
.video-split__close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--md-on-surface-variant, #999);
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.video-split__close:hover {
    color: #fff;
}
.video-split__body {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}
.video-split__video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}
.video-split__status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    color: var(--md-on-surface-variant, #aaa);
    font-size: 14px;
}

/* ── Truck Camera Button ───────────────────────── */
.truck-cam-btn {
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    opacity: 0.4;
    filter: grayscale(1);
    transition: opacity 0.2s, filter 0.2s;
    flex-shrink: 0;
    margin-left: auto;
}
.truck-cam-btn:hover {
    opacity: 1;
    filter: grayscale(0);
}
.truck-item.active .truck-cam-btn {
    opacity: 0.7;
}

/* ── Chainage (KM) road-post badges (map overlay, chainage.js) ── */
.chainage-post {
    /* the stalk from the road dot up to the milepost sign */
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.chainage-anchor-dot {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
/* Milepost sign: a sky-blue "KM" header over a big tabular number on a dark
   glass body — the same accent (--md-primary) and glass family as the dashboard
   cards. divIcon shell carries no Leaflet chrome; the sign centres itself. */
.chainage-sign-wrap {
    background: none;
    border: none;
}
.chainage-sign {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(56, 189, 248, 0.55);
    border-radius: 6px;
    overflow: hidden;
    /* Near-opaque so the connector post is hidden where it runs under the sign
       (the post is drawn below the sign in the same pane). */
    background: #0f141b;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 2px 10px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}
.chainage-sign-hd {
    width: 100%;
    text-align: center;
    background: var(--md-primary);
    color: var(--md-on-primary);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1.6;
}
.chainage-sign-no {
    padding: 0 8px 1px;
    color: #eaf7ff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1.55;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    font-variant-numeric: tabular-nums;
}
.chainage-badge-wrap {
    /* divIcon shell: no Leaflet default chrome; the badge centers itself */
    background: none;
    border: none;
}
.chainage-badge {
    display: inline-block;
    transform: translate(-50%, -50%);
    padding: 2px 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Outfit', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: #EAF7FF;
    background: rgba(10, 14, 20, 0.64);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(226, 246, 255, 0.34);
    border-radius: 7px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 2px 8px rgba(0, 0, 0, 0.34);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}
/* ── Chainage off-screen indicator (top-center bracket readout) ──
   Same glass family as the FABs, same accent as the badges; absolute inside
   #mapContainer (like .btn-fab) so it follows the map into fullscreen. */
.chainage-ind {
    position: absolute; z-index: 800;
    top: 12px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: stretch;
    background: var(--glass-2);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(56, 189, 248, 0.45);
    border-radius: 6px;
    box-shadow: var(--md-elevation-2);
    overflow: hidden;
}
/* The flex display above would defeat the `hidden` attribute (UA rule loses
   to author rules) — restore it explicitly. */
.chainage-ind[hidden] { display: none; }
.chainage-ind-half {
    display: flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    border: none; background: none; cursor: pointer;
    font-family: inherit;
    font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.03em; white-space: nowrap;
    color: var(--md-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.chainage-ind-half[hidden] { display: none; }
.chainage-ind-half:hover { background: var(--md-surface-container-high); }
.chainage-ind-divider { width: 1px; background: rgba(56, 189, 248, 0.35); }
.chainage-ind-divider[hidden] { display: none; }
.chainage-ind-arrow.material-icons {
    font-size: 14px;
    transition: transform 0.2s;
}

/* ── Cycle Track ─────────────────────────────────────────── */
body.mode-live #cardCycles,
body.mode-live #cardCycleTime { display: none; }
body:not(.mode-live) #cardHeading { display: none; } /* permanently '--' in analysis */

.cycle-track-section {
    /* 12px top matches the inter-row rhythm of .summary-row / .main-row
       (each has 12px top padding); 0 bottom so main-row's own 12px top is the
       only gap below — even spacing on both boundaries. */
    margin: 12px var(--space-m) 0;
    padding: var(--space-s);
    background: var(--glass-2);
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: var(--md-shape-m);
    box-shadow: var(--glass-highlight), var(--md-elevation-1);
}
.ct-header { display: flex; align-items: center; gap: var(--space-m); }
.ct-header .panel-title { border-bottom: none; padding: var(--space-xs) 0; }
.ct-legend {
    margin-left: auto; display: flex; align-items: center; gap: var(--space-s);
    font-size: 11px; color: var(--md-on-surface-variant);
}
.ct-key { width: 14px; height: 8px; border-radius: 2px; display: inline-block; }
.ct-key-badge { color: var(--md-on-surface-variant); }

.ct-lane { display: flex; align-items: center; gap: var(--space-s); padding: 4px 0; }
.ct-lane-head { width: 170px; flex: none; display: flex; align-items: baseline; gap: 8px; }
.ct-truck { font-weight: 600; font-size: 13px; }
.ct-lane-count { font-size: 11px; color: var(--md-on-surface-variant); }
.ct-noise-tally { font-size: 10px; color: var(--md-on-surface-variant); opacity: 0.7; }
.ct-track {
    position: relative; flex: 1; height: 26px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border); border-radius: 6px;
}
.ct-cycle {
    position: absolute; top: 2px; bottom: 2px; min-width: 3px;
    display: flex; overflow: hidden; border-radius: 4px; cursor: pointer;
    background: rgba(56, 189, 248, 0.18);
    border: 1px solid rgba(56, 189, 248, 0.5);
}
.ct-cycle:hover { filter: brightness(1.3); }
.ct-cycle.ct-recovered { border-style: dashed; }
.ct-cycle.ct-incomplete { border-color: var(--severity-warning); background: rgba(255, 152, 0, 0.15); }
.ct-cycle.ct-unverified { border-color: var(--md-on-surface-variant); background: rgba(148, 163, 184, 0.12); }
.ct-cycle.ct-evidence-only {
    border-style: dashed;
    background: repeating-linear-gradient(45deg,
        rgba(56, 189, 248, 0.10), rgba(56, 189, 248, 0.10) 4px,
        transparent 4px, transparent 8px);
}
.ct-seg { height: 100%; flex: none; }
.ct-seg-parking { background: rgba(255, 255, 255, 0.10); }
.ct-seg-haul_empty { background: rgba(56, 189, 248, 0.45); }
.ct-seg-loading { background: rgba(255, 193, 7, 0.75); }
.ct-seg-haul_loaded { background: rgba(56, 189, 248, 0.95); }
.ct-seg-dumping { background: rgba(76, 175, 80, 0.8); }
.ct-badge {
    position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    font-size: 10px; line-height: 1; pointer-events: none;
}
.ct-empty { padding: var(--space-m); color: var(--md-on-surface-variant); font-size: 13px; }

.cycle-detail { display: none; margin-top: var(--space-s); padding: var(--space-s);
    background: var(--glass-1); border: 1px solid var(--glass-border);
    border-radius: var(--md-shape-s); }
.cycle-detail.active { display: block; }
.ct-detail-title { font-size: 14px; font-weight: 600; margin-bottom: var(--space-xs); }
.ct-detail-verdict { text-transform: capitalize; }
.ct-detail-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m); }
.ct-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-xs); }
.ct-flag { font-size: 11px; padding: 2px 8px; border-radius: var(--md-shape-xl);
    background: rgba(255, 152, 0, 0.18); border: 1px solid rgba(255, 152, 0, 0.45); }
.ct-evidence { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-ev { font-size: 11px; padding: 2px 8px; border-radius: var(--md-shape-xl);
    border: 1px solid var(--glass-border); }
.ct-ev-pass { color: #4CAF50; }
.ct-ev-fail { color: var(--md-on-surface-variant); }
.ct-est { font-size: 10px; color: var(--severity-caution); }
.ct-detail-when { font-size: 11px; color: var(--md-on-surface-variant); margin: -2px 0 var(--space-xs); }
.ct-dwell-type { color: var(--md-on-surface-variant); font-size: 11px; }
.ct-detail-sep { border-top: 1px solid var(--glass-border); margin-top: 4px; padding-top: 6px; }