/* ═══════════════════════════════════════════════════════════════════
   StasysOS — DRC Flight Recovery Simulator v2
   Operational Console Dark Theme
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&family=Orbitron:wght@500;700&display=swap');

/* ─── Design tokens ─────────────────────────────────────────────── */
:root {
    --bg-base:      #050a0f;
    --bg-panel:     #090f18;
    --bg-surface:   #0d1621;
    --bg-hover:     #111e2e;
    --border:       #1a2d42;
    --border-bright:#234160;

    --text-primary:   #c8e0f4;
    --text-secondary: #5e7a94;
    --text-dim:       #2d4258;
    --text-mono:      #7eb8d8;

    --state-normal:   #00cc66;
    --state-entry:    #ff9900;
    --state-rollback: #00aaff;
    --state-hold:     #ff6600;
    --state-land:     #ff2244;

    --accent:        #00aaff;
    --accent-dim:    #004466;
    --crumb-color:   #ffcc00;
    --lkg-color:     #00aaff;
    --trail-color:   #00ff88;
    --rollback-color:#ff4400;
    --fault-active:  #ff3300;

    --panel-radius: 6px;
    --gap: 6px;
    --font-ui: 'Inter', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --font-brand: 'Orbitron', sans-serif;
}

/* ─── Reset + base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    width: 100vw; height: 100vh; overflow: hidden;
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 1.4;
}

/* ─── Grid: 5-zone operational layout ───────────────────────────── */
body,
.gcs-dashboard {
    display: grid;
    grid-template-columns: 1fr 280px;
    grid-template-rows: 48px 1fr 160px;
    grid-template-areas:
        "a  a"
        "b  c"
        "d  e";
    gap: var(--gap);
    padding: var(--gap);
}

/* Ensure gcs-dashboard fills full screen when used as wrapper */
.gcs-dashboard {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* ═══ ZONE A — Top Status Bar ═══════════════════════════════════ */
.zone-a {
    grid-area: a;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 12px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--panel-radius);
}

.brand {
    display: flex; align-items: center; gap: 6px;
    flex-shrink: 0;
}
.brand-name {
    font-family: var(--font-brand);
    font-size: 13px; font-weight: 700;
    color: var(--accent);
    letter-spacing: 2px;
}
.brand-sep { color: var(--border-bright); }
.brand-sub {
    font-family: var(--font-mono);
    font-size: 10px; color: var(--text-secondary);
    letter-spacing: 1px;
}

.top-stats {
    display: flex; gap: 8px; flex: 1;
    justify-content: center;
}
.stat-pill {
    display: flex; flex-direction: column; align-items: center;
    padding: 2px 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    min-width: 64px;
}
.stat-label { font-size: 9px; color: var(--text-secondary); letter-spacing: 1px; }
.stat-value { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-primary); }

.state-pill .stat-value { font-size: 11px; }

/* State colour overrides */
.state-NORMAL   .stat-value { color: var(--state-normal); }
.state-RECOVERY_ENTRY .stat-value { color: var(--state-entry); }
.state-ROLLBACK .stat-value { color: var(--state-rollback); }
.state-HOLD     .stat-value { color: var(--state-hold); }
.state-LAND     .stat-value { color: var(--state-land); }

.top-right {
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}

.parity-badge {
    display: flex; align-items: center; gap: 4px;
    padding: 4px 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 4px;
}
.parity-icon { font-size: 12px; }
.parity-label { font-size: 9px; color: var(--text-secondary); }
.parity-value { font-family: var(--font-mono); font-size: 10px; }
.parity-badge.match { border-color: var(--state-normal); }
.parity-badge.match .parity-value { color: var(--state-normal); }
.parity-badge.divergence { border-color: var(--state-land); }
.parity-badge.divergence .parity-value { color: var(--state-land); }

.engine-toggle-top { display: flex; align-items: center; gap: 4px; }
.engine-label { font-size: 9px; color: var(--text-secondary); margin-right: 2px; }
.eng-btn {
    padding: 3px 10px; border-radius: 3px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-mono); font-size: 11px;
    cursor: pointer; transition: all 0.15s;
}
.eng-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.eng-btn:hover:not(.active) { border-color: var(--border-bright); color: var(--text-primary); }

/* ═══ ZONE B — Map ═══════════════════════════════════════════════ */
.zone-b {
    grid-area: b;
    position: relative;
    border-radius: var(--panel-radius);
    overflow: hidden;
    border: 1px solid var(--border);
}
.map-wrapper { width: 100%; height: 100%; position: relative; }
#map { width: 100%; height: 100%; }

.map-legend {
    position: absolute; bottom: 12px; left: 12px;
    display: flex; flex-direction: column; gap: 4px;
    background: rgba(5,10,15,0.85);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 10px;
    pointer-events: none;
}
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); }
.legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

.map-mode-badge {
    position: absolute; top: 12px; left: 12px;
    padding: 4px 10px;
    background: rgba(5,10,15,0.85);
    border: 1px solid var(--accent);
    border-radius: 3px;
    font-family: var(--font-mono); font-size: 10px;
    color: var(--accent);
    letter-spacing: 1px;
    pointer-events: none;
}
.map-mode-badge.baseline { border-color: var(--state-entry); color: var(--state-entry); }

/* ═══ ZONE C — Right Panel ═══════════════════════════════════════ */
.zone-c {
    grid-area: c;
    display: flex; flex-direction: column; gap: var(--gap);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-bright) transparent;
}

.panel {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--panel-radius);
    padding: 10px 12px;
    flex-shrink: 0;
}
.panel-title {
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    color: var(--text-secondary); letter-spacing: 1.5px;
    margin-bottom: 8px;
}

/* Scenario panel */
.scenario-select {
    width: 100%;
    background: var(--bg-surface); border: 1px solid var(--border);
    color: var(--text-primary); padding: 5px 8px;
    border-radius: 3px; font-family: var(--font-ui); font-size: 11px;
    margin-bottom: 8px;
}
.sim-controls { display: flex; gap: 6px; margin-bottom: 8px; }
.ctl-btn {
    flex: 1; padding: 5px 0;
    border-radius: 3px; border: 1px solid var(--border);
    background: var(--bg-surface); color: var(--text-secondary);
    font-family: var(--font-mono); font-size: 10px; cursor: pointer;
    transition: all 0.15s;
}
.ctl-btn:hover:not(:disabled) { border-color: var(--border-bright); color: var(--text-primary); }
.ctl-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ctl-start.running { background: rgba(0,204,102,0.1); border-color: var(--state-normal); color: var(--state-normal); }
.ctl-reset { border-color: var(--fault-active); color: var(--fault-active); }
.ctl-reset:hover { background: rgba(255,34,68,0.1); }

.speed-row, .mode-row { display: flex; align-items: center; gap: 6px; }
.speed-label, .mode-toggle-label {
    font-size: 9px; color: var(--text-secondary); letter-spacing: 1px;
    flex-shrink: 0;
}
.speed-buttons, .mode-row { display: flex; gap: 4px; flex: 1; }
.spd-btn, .mode-btn {
    flex: 1; padding: 3px 0;
    border: 1px solid var(--border);
    border-radius: 3px; background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-mono); font-size: 10px; cursor: pointer;
    transition: all 0.15s;
}
.spd-btn.active, .mode-btn.active {
    background: var(--accent-dim); border-color: var(--accent); color: var(--accent);
}
.speed-row { margin-top: 4px; }
.mode-row { margin-top: 4px; }

/* Telemetry panel */
.telem-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 4px 8px; margin-bottom: 10px;
}
.telem-item { display: flex; flex-direction: column; }
.telem-label { font-size: 9px; color: var(--text-secondary); letter-spacing: 1px; }
.telem-value { font-family: var(--font-mono); font-size: 12px; color: var(--text-primary); }

.quality-bars { display: flex; flex-direction: column; gap: 5px; }
.quality-row { display: flex; align-items: center; gap: 6px; }
.qual-label { font-size: 9px; color: var(--text-secondary); width: 44px; letter-spacing: 0.5px; }
.qual-bar-bg { flex: 1; height: 4px; background: var(--bg-surface); border-radius: 2px; overflow: hidden; }
.qual-bar-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
.nav-fill { background: var(--state-normal); }
.link-fill { background: var(--accent); }
.batt-fill { background: var(--crumb-color); }
.qual-pct { font-family: var(--font-mono); font-size: 10px; width: 36px; text-align: right; }

/* Decision panel */
.decision-state-row {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.ds-label { font-size: 9px; color: var(--text-secondary); letter-spacing: 1px; }
.ds-value.state-badge {
    font-family: var(--font-mono); font-size: 12px; font-weight: 600;
    padding: 2px 8px; border-radius: 3px;
    background: rgba(0,204,102,0.1); border: 1px solid var(--state-normal);
    color: var(--state-normal);
}
.state-badge.RECOVERY_ENTRY { background: rgba(255,153,0,0.1); border-color: var(--state-entry); color: var(--state-entry); }
.state-badge.ROLLBACK { background: rgba(0,170,255,0.1); border-color: var(--state-rollback); color: var(--state-rollback); }
.state-badge.HOLD { background: rgba(255,102,0,0.1); border-color: var(--state-hold); color: var(--state-hold); }
.state-badge.LAND { background: rgba(255,34,68,0.15); border-color: var(--state-land); color: var(--state-land); }

.decision-fields { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.df-row { display: flex; align-items: baseline; gap: 6px; }
.df-label { font-size: 9px; color: var(--text-secondary); letter-spacing: 1px; min-width: 52px; }
.df-value { font-family: var(--font-mono); font-size: 11px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; }
.df-value.mono { color: var(--text-mono); font-size: 10px; }
.df-value.small { font-size: 9px; line-height: 1.3; }

/* LKG block */
.lkg-block {
    background: var(--bg-surface);
    border: 1px solid var(--accent-dim);
    border-radius: 4px;
    padding: 7px 8px;
    margin-bottom: 8px;
}
.lkg-header {
    font-family: var(--font-mono); font-size: 9px;
    color: var(--lkg-color); letter-spacing: 1.5px;
    margin-bottom: 5px;
}
.lkg-fields { display: flex; flex-direction: column; gap: 3px; }
.lkg-reason-row .df-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Parity panel block */
.parity-panel-block {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 7px 8px;
}
.parity-panel-header {
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--font-mono); font-size: 9px;
    color: var(--text-secondary); letter-spacing: 1.5px;
    margin-bottom: 5px;
}
.parity-status-pill {
    padding: 1px 6px; border-radius: 2px; font-size: 9px;
    background: var(--bg-surface); border: 1px solid var(--border);
    color: var(--text-secondary);
}
.parity-status-pill.MATCH { background: rgba(0,204,102,0.1); border-color: var(--state-normal); color: var(--state-normal); }
.parity-status-pill.DIVERGENCE { background: rgba(255,34,68,0.1); border-color: var(--state-land); color: var(--state-land); }
.parity-rows { display: flex; flex-direction: column; gap: 3px; }
.parity-row { display: flex; align-items: baseline; gap: 6px; }
.par-label { font-size: 9px; color: var(--text-secondary); min-width: 64px; letter-spacing: 0.5px; }
.par-val { font-family: var(--font-mono); font-size: 10px; color: var(--text-primary); }
.par-val.mono { color: var(--text-mono); }

/* ═══ ZONE D — Fault Injection ═══════════════════════════════════ */
.zone-d {
    grid-area: d;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--panel-radius);
    padding: 8px 12px;
    display: flex; flex-direction: column; gap: 8px;
}

.fault-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px; flex: 1;
}
.fault-btn {
    display: flex; flex-direction: column; align-items: center;
    gap: 3px; padding: 6px 4px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer; transition: all 0.15s;
    position: relative;
}
.fault-btn:hover { border-color: var(--border-bright); color: var(--text-primary); }
.fault-btn.active {
    border-color: var(--fault-active);
    background: rgba(255,51,0,0.12);
    color: var(--fault-active);
    box-shadow: 0 0 8px rgba(255,51,0,0.2);
}
.fault-btn.fault-reset {
    border-color: var(--state-normal);
    color: var(--state-normal);
}
.fault-btn.fault-reset:hover { background: rgba(0,204,102,0.1); }
.fault-icon { font-size: 16px; }
.fault-name { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.5px; text-align: center; }
.fault-state-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--text-dim);
    transition: background 0.2s;
}
.fault-btn.active .fault-state-dot { background: var(--fault-active); box-shadow: 0 0 4px var(--fault-active); }

.active-faults-row {
    display: flex; align-items: center; gap: 8px;
    padding-top: 4px; border-top: 1px solid var(--border);
}
.af-label { font-size: 9px; color: var(--text-secondary); letter-spacing: 1px; }
.af-value { font-family: var(--font-mono); font-size: 11px; color: var(--fault-active); }
.af-value.none { color: var(--state-normal); }

/* ═══ ZONE E — Timeline ══════════════════════════════════════════ */
.zone-e {
    grid-area: e;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--panel-radius);
    padding: 8px 12px;
    display: flex; flex-direction: column; gap: 6px;
}
.timeline-header {
    display: flex; justify-content: space-between; align-items: center;
}
.btn-clear {
    font-family: var(--font-mono); font-size: 9px;
    color: var(--text-secondary); background: transparent;
    border: none; cursor: pointer; letter-spacing: 1px;
}
.btn-clear:hover { color: var(--text-primary); }

.timeline-list {
    flex: 1; overflow-y: auto;
    display: flex; flex-direction: column; gap: 2px;
    scrollbar-width: thin; scrollbar-color: var(--border-bright) transparent;
}
.tl-empty { font-size: 11px; color: var(--text-dim); text-align: center; padding: 8px; }

.tl-entry {
    display: flex; gap: 6px; align-items: flex-start;
    padding: 3px 0; border-bottom: 1px solid var(--bg-surface);
    font-family: var(--font-mono); font-size: 10px;
}
.tl-tick { color: var(--text-secondary); min-width: 32px; flex-shrink: 0; }
.tl-state { min-width: 8px; flex-shrink: 0; }
.tl-label { color: var(--text-primary); }
.tl-detail { color: var(--text-secondary); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Timeline entry type colors */
.tl-entry.STATE_CHANGE .tl-label { color: var(--state-rollback); }
.tl-entry.INTERVENTION .tl-label { color: var(--fault-active); }
.tl-entry.SCENARIO_EVENT .tl-label { color: var(--state-entry); }

.export-row { border-top: 1px solid var(--border); padding-top: 5px; }
.export-btn {
    width: 100%; padding: 4px 0;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--bg-surface); color: var(--text-secondary);
    font-family: var(--font-mono); font-size: 10px; cursor: pointer;
    transition: all 0.15s;
}
.export-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

/* ─── MapLibre dark overrides ───────────────────────────────────── */
.maplibregl-ctrl-attrib-button { display: none !important; }
.maplibregl-ctrl-attrib {
    background: rgba(5,10,15,0.7) !important;
    color: var(--text-dim) !important;
    font-size: 9px !important;
}
.maplibregl-ctrl-logo { display: none !important; }
.maplibregl-ctrl button {
    background-color: var(--bg-panel) !important;
    border-color: var(--border) !important;
}
.maplibregl-ctrl button span { filter: invert(0.7); }

/* ═══════════════════════════════════════════════════════════════
   PHASE 3 — FSM State Rail
   ══════════════════════════════════════════════════════════════ */
.fsm-rail-panel { padding: 8px 10px; }

.fsm-rail {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 6px;
    overflow-x: auto;
}

.fsm-node {
    display: flex; flex-direction: column; align-items: center;
    gap: 2px; flex-shrink: 0;
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    cursor: default;
    transition: all 0.2s;
    min-width: 52px;
}
.fsm-node.visited { border-color: var(--border-bright); }
.fsm-node.active {
    background: rgba(0,170,255,0.08);
    box-shadow: 0 0 8px rgba(0,170,255,0.2);
}
/* Per-state node colors when active */
.fsm-node[data-state="NORMAL"].active { border-color: var(--state-normal); background: rgba(0,204,102,0.1); }
.fsm-node[data-state="RECOVERY_ENTRY"].active { border-color: var(--state-entry); background: rgba(255,153,0,0.1); }
.fsm-node[data-state="ROLLBACK"].active { border-color: var(--state-rollback); background: rgba(0,170,255,0.1); }
.fsm-node[data-state="HOLD"].active { border-color: var(--state-hold); background: rgba(255,102,0,0.1); }
.fsm-node[data-state="LAND"].active { border-color: var(--state-land); background: rgba(255,34,68,0.12); }

.fsm-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--text-dim);
    transition: background 0.2s;
    flex-shrink: 0;
}
.fsm-node.visited .fsm-dot { background: var(--border-bright); }
.fsm-node[data-state="NORMAL"].active .fsm-dot { background: var(--state-normal); box-shadow: 0 0 4px var(--state-normal); }
.fsm-node[data-state="RECOVERY_ENTRY"].active .fsm-dot { background: var(--state-entry); box-shadow: 0 0 4px var(--state-entry); }
.fsm-node[data-state="ROLLBACK"].active .fsm-dot { background: var(--state-rollback); box-shadow: 0 0 4px var(--state-rollback); }
.fsm-node[data-state="HOLD"].active .fsm-dot { background: var(--state-hold); box-shadow: 0 0 4px var(--state-hold); }
.fsm-node[data-state="LAND"].active .fsm-dot { background: var(--state-land); box-shadow: 0 0 4px var(--state-land); }

.fsm-label { font-family: var(--font-mono); font-size: 8px; color: var(--text-secondary); letter-spacing: 0.5px; }
.fsm-node.active .fsm-label { color: var(--text-primary); }

.fsm-tick { font-family: var(--font-mono); font-size: 8px; color: var(--text-dim); }
.fsm-node.visited .fsm-tick, .fsm-node.active .fsm-tick { color: var(--text-mono); }

.fsm-arrow { font-size: 10px; color: var(--text-dim); flex-shrink: 0; padding: 0 1px; }

.fsm-reason-row {
    display: flex; align-items: center; gap: 6px;
    padding-top: 4px; border-top: 1px solid var(--border);
}
.fsm-reason-label { font-size: 9px; color: var(--text-secondary); letter-spacing: 1px; white-space: nowrap; }
.fsm-reason-value { font-family: var(--font-mono); font-size: 10px; color: var(--state-entry); }

/* ═══════════════════════════════════════════════════════════════
   PHASE 3 — Decision Explainability Grid
   ══════════════════════════════════════════════════════════════ */
.decision-explain-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 3px 6px;
    margin-bottom: 8px;
    padding: 6px 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 4px;
}
.de-row { display: flex; flex-direction: column; }
.de-label { font-size: 8px; color: var(--text-secondary); letter-spacing: 0.8px; }
.de-value { font-family: var(--font-mono); font-size: 10px; color: var(--text-primary); }
.de-value.mono { color: var(--text-mono); font-size: 9px; }

/* Rollback progress bar inside .de-value */
.rollback-bar-bg { height: 3px; background: var(--bg-hover); border-radius: 2px; margin-top: 2px; overflow: hidden; }
.rollback-bar-fill { height: 100%; background: var(--state-rollback); border-radius: 2px; transition: width 0.3s; }

/* ═══════════════════════════════════════════════════════════════
   PHASE 3 — Evidence/Version Footer
   ══════════════════════════════════════════════════════════════ */
.evidence-footer-panel { padding: 8px 10px; }
.evidence-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 3px 8px;
}
.ev-row { display: flex; flex-direction: column; }
.ev-label { font-size: 8px; color: var(--text-secondary); letter-spacing: 0.8px; }
.ev-value { font-family: var(--font-mono); font-size: 9px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-value.mono { color: var(--text-mono); }

/* Enhanced parity MATCH score */
#par-match-count { color: var(--state-normal); }
.parity-badge.match #parity-value, .parity-status-pill.MATCH { background: rgba(0,204,102,0.1); border-color: var(--state-normal); color: var(--state-normal); }
.parity-status-pill.DIVERGENCE { background: rgba(255,34,68,0.1); border-color: var(--state-land); color: var(--state-land); }