/* ── Dashboard — Operational daily view ───────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #111;
    color: #ddd;
    height: 100vh;
    height: 100dvh; /* dynamic viewport height — accounts for Safari browser chrome */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── Nav ── */
#nav-bar {
    height: 44px;
    min-height: 44px;
    background: rgba(20,20,20,0.97);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 20px;
    z-index: 1000;
    backdrop-filter: blur(8px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.nav-brand { text-decoration: none; color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; }
.nav-brand span { color: #42a5f5; font-weight: 400; }
.nav-links { display: flex; gap: 4px; }
.nav-links a { color: #aaa; text-decoration: none; padding: 5px 10px; border-radius: 4px; font-size: 13px; }
.nav-links a:hover { color: #fff; background: rgba(255,255,255,0.07); }
.nav-links a.active { color: #fff; background: rgba(66,165,245,0.18); }
.nav-links a.nav-admin { color: #e57373; }
.nav-links a.nav-admin:hover { color: #fff; background: rgba(229,57,53,0.15); }
.nav-spacer { flex: 1; }

/* ── Last-updated chip ── */
#last-updated {
    font-size: 11px;
    color: #8a8fa8;
}
#auto-refresh-btn, #rebuild-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.12);
    color: #aaa;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all .15s;
}
#auto-refresh-btn:hover, #rebuild-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
#auto-refresh-btn.active { border-color: #42a5f5; color: #42a5f5; }
#rebuild-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Layout ── */
#main-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ── Event modelling panel ── */
.ev-section {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}
.ev-list-section {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.ev-section-label {
    display: block;
    font-size: 9px;
    font-weight: 700;
    color: #7a7f96;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.ev-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}
.ev-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s;
}
.ev-type-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }
.ev-type-btn.active {
    background: rgba(66,165,245,0.12);
    border-color: rgba(66,165,245,0.4);
}
.ev-type-icon { display: flex; align-items: center; justify-content: center; }
.ev-type-icon svg { width: 26px; height: 26px; }
.ev-type-label { font-size: 9px; color: #9ca0b4; line-height: 1; }
.ev-type-btn.active .ev-type-label { color: #90caf9; }

/* Placement bar */
#ev-place-bar {
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    min-height: 34px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.ev-hint { font-size: 11px; color: #6b7085; font-style: italic; }
#ev-placing-state {
    display: none;
    align-items: center;
    gap: 8px;
    width: 100%;
}
#ev-placing-label {
    flex: 1;
    font-size: 11px;
    color: #90caf9;
    display: flex;
    align-items: center;
    gap: 6px;
}
#ev-placing-label svg { width: 18px; height: 18px; }
.ev-cancel-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    color: #9ca0b4;
    font-size: 11px;
    padding: 2px 8px;
    cursor: pointer;
    white-space: nowrap;
}
.ev-cancel-btn:hover { color: #ef5350; border-color: rgba(244,67,54,0.4); }

/* Events list */
.ev-list-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.ev-count-badge {
    font-size: 10px;
    background: rgba(66,165,245,0.12);
    color: #64b5f6;
    border: 1px solid rgba(66,165,245,0.2);
    border-radius: 8px;
    padding: 0 6px;
    line-height: 17px;
}
.ev-clear-link {
    margin-left: auto;
    background: none;
    border: none;
    color: #7a7f96;
    font-size: 10px;
    cursor: pointer;
    padding: 0;
}
.ev-clear-link:hover { color: #ef5350; }
#ev-list {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.08) transparent;
}
#ev-list::-webkit-scrollbar { width: 3px; }
#ev-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
.ev-empty {
    padding: 24px 0;
    text-align: center;
    color: #7a7f96;
    font-size: 11px;
    line-height: 1.7;
}
.ev-empty small { color: #6b7085; }
.ev-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 6px;
    margin-bottom: 5px;
}
.ev-item-icon { flex-shrink: 0; display: flex; }
.ev-item-icon svg { width: 22px; height: 22px; }
.ev-item-body { flex: 1; min-width: 0; }
.ev-item-road {
    font-size: 12px;
    font-weight: 600;
    color: #e0e0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ev-item-type { font-size: 10px; color: #8a8fa8; margin-top: 1px; }
.ev-item-remove {
    background: none;
    border: none;
    color: #7a7f96;
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 3px;
    flex-shrink: 0;
    line-height: 1;
}
.ev-item-remove:hover { color: #ef5350; }

/* Run button */
#ev-run-bar {
    padding: 10px 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
#ev-run-btn {
    width: 100%;
    background: rgba(66,165,245,0.12);
    border: 1px solid rgba(66,165,245,0.3);
    color: #90caf9;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
#ev-run-btn:hover:not(:disabled) { background: rgba(66,165,245,0.22); border-color: rgba(66,165,245,0.5); }
#ev-run-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* Assessment ready banner */
.ev-report-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(76,175,80,0.12);
    border: 1px solid rgba(76,175,80,0.3);
    border-radius: 6px;
}
.ev-report-banner-icon {
    color: #66bb6a;
    font-size: 13px;
    flex-shrink: 0;
}
.ev-report-banner-text {
    flex: 1;
    font-size: 11px;
    color: #a5d6a7;
    font-weight: 600;
}
.ev-report-banner-btn {
    background: rgba(76,175,80,0.2);
    border: 1px solid rgba(76,175,80,0.4);
    color: #a5d6a7;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
}
.ev-report-banner-btn:hover { background: rgba(76,175,80,0.32); color: #c8e6c9; }

/* Map placement cursor */
#map-container.placing,
#map-container.placing .leaflet-interactive { cursor: crosshair !important; }

/* ── Timeline scrubber ── */
#timeline-bar {
    height: 82px;
    min-height: 82px;
    background: rgba(26,28,38,0.97);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    z-index: 900;
    user-select: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#tl-header {
    display: flex;
    align-items: center;
    padding: 0 14px 0 16px;
    height: 26px;
    min-height: 26px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    gap: 8px;
    flex-shrink: 0;
}
.tl-header-title {
    font-size: 9px;
    font-weight: 700;
    color: #7a7f96;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    flex-shrink: 0;
}
.tl-header-range {
    font-size: 9px;
    color: #6b7085;
    letter-spacing: 0.3px;
    flex: 1;
}
#tl-cal-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    color: #7a7f96;
    width: 22px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s;
}
#tl-cal-btn:hover { color: #90caf9; border-color: rgba(144,202,249,0.4); }
#tl-cal-btn svg { width: 12px; height: 12px; }
#timeline-track {
    flex: 1;
    position: relative;
    cursor: pointer;
}
#tl-track-line {
    position: absolute;
    left: 0; right: 0;
    top: 22px;
    height: 2px;
    background: rgba(255,255,255,0.1);
    border-radius: 1px;
    pointer-events: none;
}
#tl-thumb {
    position: absolute;
    top: 14px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #42a5f5;
    border: 2px solid rgba(255,255,255,0.2);
    transform: translateX(-50%);
    transition: left 0.12s ease;
    z-index: 3;
    box-shadow: 0 2px 10px rgba(66,165,245,0.5);
    pointer-events: none;
}
.tl-tick {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-top: 30px;
}
.tl-tick-mark {
    position: absolute;
    top: 24px;
    width: 1px; height: 4px;
    background: rgba(255,255,255,0.15);
    pointer-events: none;
}
.tl-tick.active .tl-tick-mark { background: #42a5f5; }
.tl-tick.tl-today .tl-num { position: relative; }
.tl-tick.tl-today .tl-num::after {
    content: '';
    position: absolute;
    top: -3px; right: -5px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #42a5f5;
    opacity: 0.8;
}
.tl-num   { font-size: 11px; font-weight: 700; color: #888; line-height: 1; }
.tl-mon   { font-size: 8px;  color: #6b7085; text-transform: uppercase; letter-spacing: 0.4px; line-height: 1; }
.tl-dot-row { display: flex; align-items: center; gap: 2px; }
.tl-count { font-size: 9px; color: #7a7f96; line-height: 1; }
.tl-tick.active .tl-num   { color: #90caf9; }
.tl-tick.active .tl-count { color: #90caf9; }
.tl-tick:hover .tl-num    { color: #ccc; }
.tl-sev { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.tl-sev.red    { background: #ef5350; }
.tl-sev.amber  { background: #ffa726; }
.tl-sev.green  { background: #66bb6a; }
.tl-sev.tl-assess { background: rgba(220,240,255,0.75); }

/* ── Timeline event bars ── */
.tl-event-bar {
    position: absolute;
    height: 4px;
    border-radius: 2px;
    z-index: 4;
    opacity: 0.7;
    cursor: pointer;
    min-width: 6px;
    transition: opacity .15s, height .15s;
    pointer-events: auto;
}
.tl-event-bar:hover { opacity: 1; }
.tl-event-bar.sel   { height: 5px; opacity: 1; box-shadow: 0 0 6px rgba(255,255,255,0.3); }

/* ── Network Stress panel ── */
#stress-panel .fp-icon {
    color: #ffa726;
    font-weight: 700;
}
.stress-badge-critical { background: rgba(229,57,53,0.2) !important; color: #ef9a9a !important; }
.stress-badge-high     { background: rgba(255,152,0,0.15) !important; color: #ffcc80 !important; }
.stress-badge-med      { background: rgba(253,216,53,0.12) !important; color: #fff59d !important; }
#stress-body {
    max-height: 260px;
    overflow-y: auto;
}
.clash-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    cursor: pointer;
    transition: background .1s;
}
.clash-item:hover { background: rgba(255,255,255,0.03); }
.clash-item:last-child { border-bottom: none; }
.clash-sev {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}
.clash-sev.sev-critical { background: #ef5350; }
.clash-sev.sev-high     { background: #ffa726; }
.clash-sev.sev-medium   { background: #fdd835; }
.clash-item-body { flex: 1; min-width: 0; }
.clash-item-road {
    font-size: 11px;
    color: #ccc;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.clash-item-desc {
    font-size: 10px;
    color: #9ca0b4;
    margin-top: 1px;
}
.clash-item-vc {
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 3px;
}
.clash-item-vc.rag-over  { color: #ef9a9a; background: rgba(229,57,53,0.15); }
.clash-item-vc.rag-red   { color: #ffab91; background: rgba(229,57,53,0.10); }
.clash-item-vc.rag-amber { color: #ffcc80; background: rgba(255,152,0,0.10); }

/* ── Works zone handles ── */
.zone-handle {
    background: none !important;
    border: none !important;
}
.zone-handle-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #880e4f;
    cursor: grab;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    transition: transform 0.1s;
}
.zone-handle-dot:hover {
    transform: scale(1.3);
}
.zone-length-label {
    background: none !important;
    border: none !important;
    pointer-events: none;
}
.zone-length-label span {
    background: rgba(136,14,79,0.85);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
}

/* Event clash section in Dynamic View */
.ed-clash-section {
    margin-top: 10px;
    padding: 8px 0 4px;
    border-top: 1px solid rgba(255,152,0,0.15);
}
.ed-clash-header {
    font-size: 10px;
    font-weight: 600;
    color: #ffa726;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

/* ── Event inline editor ── */
.ev-item { cursor: pointer; }
.ev-item.selected {
    border-color: rgba(66,165,245,0.4);
    background: rgba(66,165,245,0.07);
    border-radius: 6px 6px 0 0;
    margin-bottom: 0;
}
.ev-editor {
    padding: 9px 10px 8px;
    background: rgba(66,165,245,0.04);
    border: 1px solid rgba(66,165,245,0.2);
    border-top: none;
    border-radius: 0 0 6px 6px;
    margin-bottom: 5px;
}
.ev-ed-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
}
.ev-ed-row:last-child { margin-bottom: 0; }
.ev-ed-label {
    font-size: 9px;
    font-weight: 700;
    color: #7a7f96;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 50px;
    flex-shrink: 0;
}
.ev-ed-stepper {
    display: flex;
    align-items: center;
    gap: 5px;
}
.ev-ed-stepper button {
    width: 22px; height: 22px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    color: #aaa;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .12s;
}
.ev-ed-stepper button:hover:not([disabled]) { background: rgba(255,255,255,0.14); color: #fff; }
.ev-ed-stepper button[disabled] { opacity: 0.25; cursor: not-allowed; }
.ev-ed-days-val {
    font-size: 12px;
    font-weight: 600;
    color: #ddd;
    min-width: 42px;
    text-align: center;
}
.ev-period-row { align-items: flex-start; }
.ev-period-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    flex: 1;
}
.ev-period-btn {
    padding: 4px 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    color: #8a8fa8;
    font-size: 10px;
    cursor: pointer;
    text-align: center;
    transition: all .12s;
}
.ev-period-btn:hover { background: rgba(255,255,255,0.09); color: #bbb; }
.ev-period-btn.active {
    background: rgba(66,165,245,0.15);
    border-color: rgba(66,165,245,0.4);
    color: #90caf9;
    font-weight: 600;
}

/* ── Loading overlay (matches model page) ── */
.dash-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5,5,15,0.82);
    backdrop-filter: blur(4px);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
.dash-loading-overlay .loading-card {
    background: rgba(30,32,48,0.96);
    border: 1px solid rgba(100,181,246,0.2);
    border-radius: 16px;
    padding: 36px 48px;
    text-align: center;
    min-width: 300px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 60px rgba(100,181,246,0.07);
}
.dash-loading-overlay .loading-spinner-lg {
    width: 46px; height: 46px;
    border: 3px solid rgba(100,181,246,0.15);
    border-top-color: #64b5f6;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
    margin: 0 auto 18px;
}
@keyframes spin { to { transform: rotate(360deg) } }
.dash-loading-overlay .loading-title {
    font-size: 15px; font-weight: 600; color: #e0e0e0; margin-bottom: 5px;
}
.dash-loading-overlay .loading-detail {
    font-size: 12px; color: #90a4ae; margin-bottom: 16px; min-height: 16px;
}
.dash-loading-overlay .loading-progress-bar {
    width: 100%; height: 5px;
    background: rgba(255,255,255,0.07);
    border-radius: 3px; overflow: hidden; margin-bottom: 6px;
}
.dash-loading-overlay .loading-progress-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #1565c0, #64b5f6);
    border-radius: 3px;
    transition: width 0.3s ease;
}
.sim-elapsed {
    font-size: 10px;
    color: #607d8b;
    margin-top: 4px;
    min-height: 14px;
    transition: width 0.35s ease;
}

/* Map TM icon markers */
.map-tm-icon {
    width: 29px; height: 29px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7));
}
.map-tm-icon svg { width: 29px; height: 29px; }
.map-tm-pending {
    opacity: 0.65;
    outline: 2px dashed rgba(255,152,0,0.8);
    outline-offset: 2px;
    border-radius: 50%;
}
.map-tm-dot {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid #111;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.work-tag.crit { background: rgba(244,67,54,0.12);  color: #ef9a9a; border-color: rgba(244,67,54,0.25); }
.work-tag.warn { background: rgba(255,152,0,0.12);  color: #ffcc80; border-color: rgba(255,152,0,0.25); }

/* ── Map container ── */
#map-container {
    flex: 1;
    position: relative;
    overflow: hidden;
}
#map { width: 100%; height: 100%; }

/* ── Map legend ── */
#map-legend {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 800;
    background: rgba(26, 30, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 10px;
    color: #aaa;
    pointer-events: auto;
}
.ml-title {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #8a8fa8;
    margin-bottom: 5px;
    font-weight: 600;
}
.ml-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
}
.ml-swatch {
    display: inline-block;
    width: 16px;
    height: 3px;
    border-radius: 1px;
    flex-shrink: 0;
}

/* ── Selected work detail ── */
#work-detail {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 12px 14px;
    flex-shrink: 0;
    font-size: 11px;
    display: none;
}
#work-detail.visible { display: block; }
#work-detail h4 { font-size: 12px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.detail-row { display: flex; justify-content: space-between; padding: 3px 0; color: #888; }
.detail-row .dv { color: #ccc; text-align: right; max-width: 60%; word-break: break-word; }

/* ── Loading states ── */
.loading-text {
    padding: 20px;
    text-align: center;
    color: #7a7f96;
    font-size: 12px;
}
.spinner-sm {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.1);
    border-top-color: #42a5f5;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Source badge ── */
.source-badge {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: auto;
}
.source-badge.live     { background: rgba(102,187,106,0.15); color: #66bb6a; border: 1px solid rgba(102,187,106,0.3); }
.source-badge.imported { background: rgba(66,165,245,0.12);  color: #90caf9; border: 1px solid rgba(66,165,245,0.25); }
.source-badge.hist     { background: rgba(255,255,255,0.06); color: #888;    border: 1px solid rgba(255,255,255,0.1); }

/* ── Map popup customisation ── */
.leaflet-popup-content-wrapper {
    background: rgba(32,34,46,0.95) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 6px !important;
    color: #ddd !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
}
.leaflet-popup-content { font-size: 12px !important; }
.leaflet-popup-tip-container { display: none !important; }
.popup-road { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.popup-row  { color: #aaa; margin: 2px 0; }
.popup-row  b { color: #ddd; }

/* ── Permit status badge ── */
.permit-badge {
    font-size: 9px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    vertical-align: middle;
}
.permit-granted  { background: rgba(102,187,106,0.15); color: #81c784; border: 1px solid rgba(102,187,106,0.3); }
.permit-app      { background: rgba(255,193,7,0.12);   color: #ffd54f; border: 1px solid rgba(255,193,7,0.3); }
.permit-refused  { background: rgba(244,67,54,0.12);   color: #ef9a9a; border: 1px solid rgba(244,67,54,0.25); }
.permit-unknown  { background: rgba(255,255,255,0.05); color: #7a7f96;    border: 1px solid rgba(255,255,255,0.08); }

/* ── Confidence dot ── */
.conf-dot {
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 2px;
}
.conf-dot.hi  { background: #66bb6a; }
.conf-dot.mid { background: #ffa726; }
.conf-dot.lo  { background: #ef5350; }

/* ── Impact score badge ── */
.impact-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: auto;
    flex-shrink: 0;
}
.impact-badge.score-high   { background: rgba(244,67,54,0.18);  color: #ef9a9a; border: 1px solid rgba(244,67,54,0.35); }
.impact-badge.score-med    { background: rgba(255,152,0,0.18);  color: #ffcc80; border: 1px solid rgba(255,152,0,0.35); }
.impact-badge.score-low    { background: rgba(253,216,53,0.18); color: #fff59d; border: 1px solid rgba(253,216,53,0.35); }
.impact-badge.score-min    { background: rgba(102,187,106,0.15);color: #a5d6a7; border: 1px solid rgba(102,187,106,0.3); }
.impact-badge.score-pending{ background: rgba(255,255,255,0.05);color: #7a7f96;    border: 1px solid rgba(255,255,255,0.08); }

/* ── Floating panels — shared ── */
.fp-panel {
    position: fixed;
    width: 300px;
    background: rgba(28,30,42,0.95);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    backdrop-filter: blur(12px);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 80vh;
    transition: max-height .25s ease, opacity .2s;
}
.fp-panel.minimised { max-height: 42px; }

/* Event Modelling — top-left */
#ev-panel { left: 16px; top: 128px; }
/* Dynamic View — top-right, near full height when content warrants */
#dv-panel { right: 16px; top: 128px; max-height: calc(100vh - 144px); max-height: calc(100dvh - 144px); }
/* Processing Queue — bottom-left */
#modelling-panel { left: 16px; bottom: 16px; }
/* Network Stress — bottom-left */
.stress-panel-pos { left: 16px; bottom: 16px; right: auto; }

/* Panel mode toggle */
.ev-mode-toggle {
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}
.ev-mode-btn {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #7a7f96;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 8px 0;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.ev-mode-btn:hover { color: #aaa; }
.ev-mode-btn.active { color: #90caf9; border-bottom-color: #90caf9; }

/* Panel subtitle row */
.fp-panel-sub {
    font-size: 11px;
    color: #7a7f96;
    padding: 6px 14px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}

/* Scrollable panel bodies */
#ev-body, #dv-body {
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.08) transparent;
}
#ev-body::-webkit-scrollbar,
#dv-body::-webkit-scrollbar { width: 3px; }
#ev-body::-webkit-scrollbar-thumb,
#dv-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.fp-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: 42px;
    min-height: 42px;
    background: rgba(66,165,245,0.1);
    border-bottom: 1px solid rgba(66,165,245,0.2);
    cursor: grab;
    user-select: none;
}
.fp-header:active { cursor: grabbing; }
.fp-icon  { font-size: 14px; }
.fp-title { font-size: 13px; font-weight: 600; color: #90caf9; flex: 1; }
.fp-add-btn {
    background: rgba(66,165,245,0.15);
    border: 1px solid rgba(66,165,245,0.35);
    color: #90caf9;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
}
.fp-add-btn:hover { background: rgba(66,165,245,0.28); border-color: rgba(66,165,245,0.6); color: #fff; }

.fp-min-btn {
    background: none;
    border: none;
    color: #8a8fa8;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 4px;
    border-radius: 3px;
    transition: color .15s;
}
.fp-min-btn:hover { color: #fff; }

.fp-toggle-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    color: #9ca0b4;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: all .15s;
}
.fp-toggle-btn:hover { color: #fff; background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); }

#fp-body {
    overflow-y: auto;
    padding: 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
#fp-body::-webkit-scrollbar { width: 4px; }

.fp-empty {
    text-align: center;
    color: #7a7f96;
    font-size: 12px;
    padding: 20px 0;
}

.fp-work-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fp-work-meta {
    font-size: 11px;
    color: #8a8fa8;
    margin-bottom: 10px;
}
.fp-impact-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.07);
}
.fp-impact-score {
    font-size: 22px;
    font-weight: 700;
}
.fp-impact-score.high  { color: #ef5350; }
.fp-impact-score.med   { color: #ffa726; }
.fp-impact-score.low   { color: #fdd835; }
.fp-impact-score.min   { color: #66bb6a; }
.fp-impact-label { font-size: 11px; color: #888; }
.fp-impact-label b { display: block; font-size: 12px; color: #ccc; }

.fp-affected-list {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}
.fp-affected-list li {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #888;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.fp-affected-list li:last-child { border-bottom: none; }
.fp-affected-list .aff-road { color: #ccc; }
.fp-affected-list .aff-delta { color: #ffa726; }

.fp-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.07);
    margin: 10px 0;
}

.fp-label {
    font-size: 10px;
    color: #8a8fa8;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 4px;
    margin-top: 8px;
}
.fp-select, .fp-input {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    color: #ddd;
    font-size: 12px;
    padding: 5px 8px;
}
.fp-select option { background: #1e1e1e; }
.fp-check-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #888;
    margin-top: 8px;
}
.fp-run-btn {
    margin-top: 12px;
    width: 100%;
    background: rgba(66,165,245,0.18);
    border: 1px solid rgba(66,165,245,0.4);
    color: #90caf9;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.fp-run-btn:hover { background: rgba(66,165,245,0.28); }
.fp-run-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.fp-run-btn.running { color: #7a7f96; border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); }

#fp-sim-results { margin-top: 12px; }
.fp-result-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #888;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.fp-result-row .rv { color: #ccc; }
.fp-result-row .rv.red { color: #ef5350; }
.fp-result-row .rv.amber { color: #ffa726; }

/* ── Right panel close button ── */
#rp-close-btn {
    display: none;
    background: none;
    border: none;
    color: #7a7f96;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    line-height: 1;
}
#rp-close-btn:hover { color: #aaa; }

/* ── Dynamic View ── */
#dynamic-view {
    display: flex;
    flex-direction: column;
    padding: 10px 12px 12px;
}

/* Slide-in animation when content loads */
@keyframes dv-swipe-in {
    from { opacity: 0; transform: translateX(28px); }
    to   { opacity: 1; transform: translateX(0); }
}
#dynamic-view.dv-slide-in > *:not(#dv-idle) {
    animation: dv-swipe-in 0.22s ease-out both;
}

/* Idle placeholder */
.dv-idle-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    text-align: center;
    opacity: 0.35;
    user-select: none;
}
.dv-idle-icon {
    font-size: 32px;
    color: #8a8fa8;
}
.dv-idle-text {
    font-size: 11px;
    color: #8a8fa8;
    line-height: 1.5;
}

.dv-stats {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}
.dv-stat {
    flex: 1 1 0;
    min-width: 0;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 5px;
    padding: 6px 4px;
    text-align: center;
}
.dv-stat-lbl { font-size: 9px; color: #7a7f96; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 3px; }
.dv-stat-val { font-size: 14px; font-weight: 700; }
.dv-green  { color: #66bb6a; }
.dv-yellow { color: #fdd835; }
.dv-amber  { color: #ffa726; }
.dv-red    { color: #ef5350; }

/* RAG status classes (used by vcStatus / changeLabel) */
.rag-green  { color: #66bb6a; }
.rag-yellow { color: #fdd835; }
.rag-amber  { color: #fb8c00; }
.rag-red    { color: #e53935; }
.rag-over   { color: #e91e63; }

.dv-status-desc {
    font-size: 10px;
    color: #9ca0b4;
    margin: -4px 0 8px;
    padding: 0 2px;
}

.dv-chart-labels {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.dv-cl { font-size: 10px; }
.dv-cl-base { color: #42a5f5; }
.dv-cl-sim  { color: #ffa726; }
.dv-cl-sat  { color: #fdd835; }

.dv-chart-wrap {
    flex: 1;
    min-height: 160px;
    position: relative;
}

.dv-note {
    font-size: 10px;
    color: #7a7f96;
    text-align: center;
    margin-top: 8px;
}

/* ── Processing Queue Panel ── */
.fp-badge {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 8px;
    font-weight: 600;
}
.fp-badge-running {
    background: rgba(66,165,245,0.2);
    color: #90caf9;
    border: 1px solid rgba(66,165,245,0.35);
}
.fp-badge-done {
    background: rgba(102,187,106,0.15);
    color: #81c784;
    border: 1px solid rgba(102,187,106,0.3);
}

#queue-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.queue-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 6px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
}
.queue-item.qi-running { border-color: rgba(66,165,245,0.3);  background: rgba(66,165,245,0.07); }
.queue-item.qi-done    { border-color: rgba(102,187,106,0.2); background: rgba(102,187,106,0.05); }
.queue-item.qi-error   { border-color: rgba(244,67,54,0.25);  background: rgba(244,67,54,0.06); }
.queue-item.qi-queued  { opacity: 0.55; }

.qi-status-icon {
    font-size: 13px;
    margin-top: 1px;
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}
.qi-running .qi-status-icon { color: #90caf9; }
.qi-done    .qi-status-icon { color: #81c784; }
.qi-error   .qi-status-icon { color: #ef9a9a; }
.qi-queued  .qi-status-icon { color: #7a7f96; }

.qi-body { flex: 1; min-width: 0; }
.qi-label  { font-size: 12px; font-weight: 600; color: #ddd; }
.qi-sub    { font-size: 11px; color: #8a8fa8; margin-top: 1px; }
.qi-result { font-size: 11px; color: #90caf9; margin-top: 2px; }
.qi-error .qi-result { color: #ef9a9a; }

.queue-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 4px 0;
}

/* Loading dots — queue items + header */
.qi-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    vertical-align: middle;
}
.qi-dots span {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.3;
    animation: qi-dot-pulse 1.1s ease-in-out infinite;
}
.qi-dots span:nth-child(2) { animation-delay: 0.18s; }
.qi-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes qi-dot-pulse {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.3; }
    40%           { transform: scale(1.2); opacity: 1;   }
}

/* ── nav version chip ── */
.nav-version {
    font-size: 10px;
    color: #7a7f96;
    font-weight: 400;
    margin-left: 2px;
}

/* ── Event Delay Analysis ── */
.dv-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 120px;
}

.ed-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 4px;
}
.ed-tab {
    flex: 1;
    padding: 5px 4px;
    font-size: 10px;
    font-weight: 600;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    color: #888;
    cursor: pointer;
    transition: all 0.15s;
}
.ed-tab:hover:not(.disabled) { background: rgba(255,255,255,0.08); color: #ccc; }
.ed-tab.active { background: rgba(66,165,245,0.15); border-color: rgba(66,165,245,0.3); color: #42a5f5; }
.ed-tab.disabled { opacity: 0.35; cursor: not-allowed; }

.ed-sub {
    font-size: 8px;
    color: #7a7f96;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ed-rec {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
    margin-bottom: 6px;
}
.ed-rec-green { background: rgba(102,187,106,0.15); color: #66bb6a; }
.ed-rec-amber { background: rgba(255,167,38,0.15); color: #ffa726; }
.ed-rec-red   { background: rgba(229,57,53,0.15); color: #ef5350; }

/* Best scenario tab highlight */
.ed-tab-best { border-color: rgba(102,187,106,0.35); }
.ed-tab-best.active { background: rgba(102,187,106,0.15); border-color: rgba(102,187,106,0.4); color: #66bb6a; }

/* Scenario comparison recommendation */
.ed-rec-compare {
    font-size: 10px;
    color: #ffa726;
    padding: 4px 8px;
    margin: 6px 0;
    background: rgba(255,167,38,0.08);
    border-radius: 4px;
    border-left: 3px solid #ffa726;
}
.ed-rec-best {
    color: #66bb6a;
    background: rgba(102,187,106,0.08);
    border-left-color: #66bb6a;
}

/* ── Recommendation engine section ── */
.ed-recs {
    margin: 10px 0 6px;
    padding: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
}
.ed-recs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.ed-sev-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 3px;
}
.ed-sev-green  { background: rgba(102,187,106,0.15); color: #66bb6a; }
.ed-sev-amber  { background: rgba(255,167,38,0.15);  color: #ffa726; }
.ed-sev-red    { background: rgba(229,57,53,0.15);   color: #ef5350; }
.ed-s74 {
    font-size: 9px;
    color: #8a8fa8;
    text-align: right;
}
.ed-tm-alert {
    display: flex;
    gap: 8px;
    padding: 6px 8px;
    margin-bottom: 8px;
    background: rgba(255,167,38,0.08);
    border: 1px solid rgba(255,167,38,0.25);
    border-radius: 4px;
}
.ed-tm-alert-icon {
    font-size: 16px;
    color: #ffa726;
    flex-shrink: 0;
    line-height: 1.2;
}
.ed-tm-alert-body { flex: 1; min-width: 0; }
.ed-tm-alert-title { font-size: 11px; font-weight: 600; color: #ffa726; }
.ed-tm-alert-detail { font-size: 9px; color: #888; margin-top: 2px; }
.ed-tm-alert-rec { font-size: 10px; color: #ccc; margin-top: 3px; }
.ed-conditions { margin-bottom: 8px; }
.ed-conditions-title {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8a8fa8;
    margin-bottom: 4px;
    margin-top: 8px;
}
.ed-condition-item {
    display: flex;
    gap: 6px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ed-condition-item:last-child { border-bottom: none; }
.ed-cond-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 48px;
    flex-shrink: 0;
}
.ed-condition-code {
    font-size: 9px;
    font-weight: 700;
    color: #42a5f5;
    white-space: nowrap;
}
.ed-condition-body { flex: 1; min-width: 0; }
.ed-condition-name { font-size: 10px; color: #ccc; font-weight: 600; }
.ed-condition-detail { font-size: 9px; color: #888; margin-top: 1px; line-height: 1.3; }
.ed-cond-muted .ed-condition-code { color: #7a7f96; }
.ed-cond-muted .ed-condition-name { color: #8a8fa8; font-weight: 400; }

/* Source badges */
.ed-source-badge {
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 1px 4px;
    border-radius: 2px;
    text-transform: uppercase;
}
.ed-src-sim {
    background: rgba(66,165,245,0.15);
    color: #42a5f5;
}
.ed-src-hist {
    background: rgba(171,130,255,0.15);
    color: #ab82ff;
}

/* Confidence dots */
.ed-conf-high, .ed-conf-med, .ed-conf-low {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
}
.ed-conf-high { background: #66bb6a; }
.ed-conf-med  { background: #ffa726; }
.ed-conf-low  { background: #8a8fa8; }

/* Probability context text */
.ed-cond-prob {
    font-size: 8px;
    color: #8a8fa8;
    margin-top: 2px;
    font-style: italic;
}

/* Probability bar (statistical conditions) */
.ed-cond-prob-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    height: 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.ed-cond-prob-fill {
    height: 100%;
    background: rgba(171,130,255,0.35);
    border-radius: 2px;
    min-width: 2px;
    transition: width 0.3s ease;
}
.ed-cond-prob-label {
    position: absolute;
    right: 4px;
    font-size: 8px;
    font-weight: 700;
    color: #ab82ff;
}

/* Mandatory conditions group (collapsed) */
.ed-mandatory-group {
    margin-top: 4px;
    font-size: 9px;
    color: #7a7f96;
}
.ed-mandatory-group summary {
    cursor: pointer;
    font-size: 9px;
    color: #7a7f96;
    font-style: italic;
}
.ed-mandatory-group summary:hover { color: #888; }

/* Road history section */
.ed-road-history {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.ed-road-history summary {
    cursor: pointer;
    font-size: 9px;
    color: #ab82ff;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.ed-road-history summary:hover { color: #c9a5ff; }
.ed-rh-body { padding-top: 4px; }
.ed-rh-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
    font-size: 9px;
}
.ed-rh-code {
    min-width: 42px;
    color: #888;
    font-weight: 600;
}
.ed-rh-title {
    flex: 1;
    color: #9ca0b4;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ed-rh-bar {
    width: 50px;
    height: 6px;
    background: rgba(255,255,255,0.05);
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}
.ed-rh-fill {
    height: 100%;
    background: rgba(171,130,255,0.4);
    border-radius: 2px;
}
.ed-rh-pct {
    min-width: 24px;
    text-align: right;
    color: #ab82ff;
    font-weight: 600;
}

/* View Full Report button — top inline variant */
.ed-report-btn-top {
    margin-left: auto;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(66,165,245,0.15);
    border: 1px solid rgba(66,165,245,0.35);
    border-radius: 4px;
    color: #90caf9;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
}
.ed-report-btn-top:hover { background: rgba(66,165,245,0.28); color: #bbdefb; }

/* View Full Report button */
.ed-report-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 7px 0;
    background: rgba(66,165,245,0.12);
    border: 1px solid rgba(66,165,245,0.3);
    border-radius: 4px;
    color: #42a5f5;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all .15s;
}
.ed-report-btn:hover {
    background: rgba(66,165,245,0.22);
    border-color: rgba(66,165,245,0.5);
    color: #90caf9;
}

.ed-narrative {
    margin-top: 6px;
    font-size: 10px;
    color: #888;
}
.ed-narrative summary {
    cursor: pointer;
    font-size: 9px;
    color: #8a8fa8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ed-narrative summary:hover { color: #aaa; }
.ed-narrative p {
    margin-top: 4px;
    line-height: 1.5;
    color: #999;
}

/* Queue tail label (map marker) */
.queue-tail-label {
    background: none !important;
    border: none !important;
    pointer-events: none;
}
.queue-tail-label span {
    display: inline-block;
    background: rgba(26,28,38,0.88);
    color: #fdd835;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid rgba(253,216,53,0.3);
    white-space: nowrap;
}

.ed-queue-info {
    font-size: 10px;
    color: #888;
    margin-bottom: 8px;
    padding: 3px 6px;
    background: rgba(255,255,255,0.03);
    border-radius: 3px;
    border-left: 3px solid #ffa726;
}

.ed-journeys-header {
    font-size: 9px;
    color: #7a7f96;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 8px 0 4px;
}
.ed-journeys {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 6px;
}
.ed-journey-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.05);
}
.ed-journey-label {
    font-size: 10px;
    color: #aaa;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
}
.ed-journey-times {
    display: flex;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Event Info Card (DV pre-analyse view) ── */
.ed-info-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ed-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ed-info-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ed-info-icon svg { width: 28px; height: 28px; }
.ed-info-type {
    font-size: 13px;
    font-weight: 700;
    color: #ddd;
    text-transform: capitalize;
}
.ed-info-road {
    font-size: 11px;
    color: #888;
}
.ed-info-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ed-info-detail {
    font-size: 11px;
    color: #999;
}
.ed-info-detail b { color: #ccc; }
.ed-info-desc {
    font-size: 10px;
    color: #8a8fa8;
    line-height: 1.4;
    margin-top: 2px;
}
.ed-analyse-btn {
    width: 100%;
    padding: 10px;
    font-size: 13px;
    font-weight: 700;
    background: rgba(66,165,245,0.15);
    border: 1px solid rgba(66,165,245,0.3);
    border-radius: 6px;
    color: #42a5f5;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 4px;
}
.ed-analyse-btn:hover {
    background: rgba(66,165,245,0.25);
    border-color: rgba(66,165,245,0.5);
    color: #64b5f6;
}

/* ── Session Browser ── */
.session-overlay {
    position: fixed;
    inset: 0;
    z-index: 15000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
}
.session-browser {
    background: rgba(28,30,42,0.95);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    backdrop-filter: blur(12px);
    width: 90%;
    max-width: 680px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.session-browser-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.session-browser-title {
    font-size: 15px;
    font-weight: 600;
    color: #ddd;
}
.session-browser-close {
    background: none;
    border: none;
    color: #8a8fa8;
    font-size: 20px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s;
}
.session-browser-close:hover { color: #fff; }
.session-list {
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.session-empty {
    text-align: center;
    color: #7a7f96;
    font-size: 13px;
    padding: 40px 0;
}
.session-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    transition: border-color 0.15s, background 0.15s;
}
.session-card:hover {
    border-color: rgba(66,165,245,0.3);
    background: rgba(255,255,255,0.06);
}
.session-card-active {
    border-color: rgba(66,165,245,0.4);
}
.session-card-thumb {
    width: 120px;
    height: 80px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255,255,255,0.04);
}
.session-card-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7085;
    font-size: 24px;
}
.session-card-info {
    flex: 1;
    min-width: 0;
}
.session-card-name {
    font-size: 13px;
    font-weight: 600;
    color: #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.session-card-desc {
    font-size: 11px;
    color: #888;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.session-card-meta {
    font-size: 10px;
    color: #7a7f96;
    margin-top: 4px;
}
.session-card-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}
.session-card-resume {
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(66,165,245,0.15);
    color: #42a5f5;
    border: 1px solid rgba(66,165,245,0.3);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
}
.session-card-resume:hover { background: rgba(66,165,245,0.25); color: #fff; }
.session-card-delete {
    padding: 5px 14px;
    font-size: 11px;
    background: none;
    color: #8a8fa8;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
}
.session-card-delete:hover { color: #ef5350; border-color: rgba(239,83,80,0.3); }

/* ── Session Indicator + Buttons ── */
.ev-resume-btn {
    font-size: 10px !important;
    padding: 3px 8px !important;
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #888 !important;
}
.ev-resume-btn:hover { color: #42a5f5 !important; border-color: rgba(66,165,245,0.3) !important; }
.ev-new-session-btn {
    font-size: 10px !important;
    padding: 3px 8px !important;
    background: none !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #8a8fa8 !important;
}
.ev-new-session-btn:hover { color: #ffa726 !important; border-color: rgba(255,167,38,0.3) !important; }
.session-indicator {
    font-size: 9px;
    color: #4caf50;
    background: rgba(76,175,80,0.12);
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
}

/* ── Impact Badge ── */
.ev-impact-badge {
    display: inline-block;
    font-size: 9px;
    color: #ffa726;
    background: rgba(255,167,38,0.12);
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
    cursor: pointer;
}

/* ── Toast ── */
.session-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 12px;
    color: #fff;
    background: rgba(38,40,52,0.95);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(8px);
    z-index: 16000;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}
.session-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.session-toast-amber { border-color: rgba(255,167,38,0.4); }
.session-toast-red   { border-color: rgba(229,57,53,0.5); background: rgba(40,15,15,0.95); }
.session-toast-info  { border-color: rgba(66,165,245,0.4); }

/* ── Assess permit cards ── */
.assess-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 6px;
}
.assess-card:hover { border-color: rgba(255,255,255,0.14); }
.assess-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.assess-card-icon { flex-shrink: 0; display: flex; }
.assess-card-icon svg { width: 22px; height: 22px; }
.assess-card-info { flex: 1; min-width: 0; }
.assess-card-road {
    font-size: 12px;
    font-weight: 600;
    color: #e0e0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.assess-card-meta {
    font-size: 10px;
    color: #8a8fa8;
    margin-top: 1px;
}
.assess-card-desc {
    font-size: 10px;
    color: #888;
    margin: 5px 0;
    line-height: 1.4;
}
.assess-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
}
.assess-card-ref {
    font-size: 9px;
    color: #7a7f96;
    font-family: monospace;
}
.assess-btn {
    background: rgba(66,165,245,0.12);
    border: 1px solid rgba(66,165,245,0.3);
    color: #90caf9;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.assess-btn:hover:not(:disabled) { background: rgba(66,165,245,0.22); border-color: rgba(66,165,245,0.5); }
.assess-btn:disabled { opacity: 0.4; cursor: default; }
.assess-btn.assessed { color: #4caf50; border-color: rgba(76,175,80,0.3); background: rgba(76,175,80,0.08); }

/* ── Responsive ── */

/* Tablet landscape / small desktop */
@media (max-width: 1100px) {
    .fp-panel { width: 270px; }
}

/* iPad portrait (~768-810px) */
@media (max-width: 900px) {
    .fp-panel { width: 260px; }
    #ev-panel { left: 8px; top: 100px; }
    #dv-panel { right: 8px; top: 100px; max-height: calc(100dvh - 116px); }
    #modelling-panel { left: 8px; bottom: 8px; }
    .fp-header { padding: 8px 10px; }
    .fp-header .fp-title { font-size: 12px; }
}

/* Small tablet / large phone */
@media (max-width: 640px) {
    .fp-panel { width: 240px; }
    #ev-panel { left: 6px; top: 90px; width: 240px; }
    #dv-panel { right: 6px; top: 90px; width: 240px; max-height: calc(100dvh - 100px); }
}

/* Phone — stack panels */
@media (max-width: 480px) {
    #ev-panel { width: calc(100vw - 12px); left: 6px; }
    #dv-panel { display: none; }
}