/* Navigation HUD — Hologram Cockpit (NM-019) */

/* ============================================================
   CSS CUSTOM PROPERTIES — DARK (DEFAULT)
   ============================================================ */

.nav-hud-cockpit {
    --hud-bg:              #050a14;
    --hud-panel:           rgba(5, 14, 30, 0.58);
    --hud-panel-border:    rgba(59, 130, 246, 0.28);
    --hud-panel-shadow:    rgba(59, 130, 246, 0.08);
    --hud-label:           rgba(148, 163, 184, 0.65);
    --hud-subvalue:        rgba(148, 163, 184, 0.75);
    --hud-velocity:        #60a5fa;
    --hud-velocity-shadow: rgba(96, 165, 250, 0.7);
    --hud-arc-track:       rgba(59, 130, 246, 0.12);
    --hud-clock-bg:        rgba(5, 10, 20, 0.55);
    --hud-clock-border:    rgba(59, 130, 246, 0.25);
    --hud-clock-text:      rgba(148, 163, 184, 0.8);
    --hud-ph-start:        #050a14;
    --hud-ph-mid:          #091628;
    --hud-ph-end:          #060e1c;
    --hud-grid:            rgba(59, 130, 246, 0.06);
    --hud-scan:            rgba(59, 130, 246, 0.5);
    --hud-vignette:        rgba(5, 10, 20, 0.65);
    --hud-btn-bg:          rgba(5, 14, 30, 0.65);
    --hud-btn-border:      rgba(59, 130, 246, 0.28);
    --hud-btn-color:       rgba(148, 163, 184, 0.65);
    --hud-input-bg:        rgba(0, 0, 0, 0.4);
    --hud-input-color:     #e2e8f0;
    --hud-drop-color:      rgba(148, 163, 184, 0.45);
    --hud-route-base:      rgba(59, 130, 246, 0.14);
    --hud-route-dot:       #60a5fa;
    --hud-route-dot-glow:  rgba(96, 165, 250, 0.85);
    --hud-route-start:     rgba(16, 185, 129, 0.85);
    --hud-stage-color:     rgba(148, 163, 184, 0.6);
    --hud-outcome-bg:      rgba(5, 10, 20, 0.9);
    --hud-outcome-color:   #60a5fa;
}

/* ============================================================
   CSS CUSTOM PROPERTIES — LIGHT THEME OVERRIDES
   ============================================================ */

[data-theme="light"] .nav-hud-cockpit {
    --hud-bg:              #c8ddf0;
    --hud-panel:           rgba(255, 255, 255, 0.68);
    --hud-panel-border:    rgba(37, 99, 235, 0.32);
    --hud-panel-shadow:    rgba(37, 99, 235, 0.1);
    --hud-label:           rgba(30, 58, 138, 0.65);
    --hud-subvalue:        rgba(30, 58, 138, 0.78);
    --hud-velocity:        #1d4ed8;
    --hud-velocity-shadow: rgba(29, 78, 216, 0.55);
    --hud-arc-track:       rgba(37, 99, 235, 0.15);
    --hud-clock-bg:        rgba(255, 255, 255, 0.6);
    --hud-clock-border:    rgba(37, 99, 235, 0.3);
    --hud-clock-text:      rgba(30, 58, 138, 0.85);
    --hud-ph-start:        #b8d0e8;
    --hud-ph-mid:          #cddff2;
    --hud-ph-end:          #b0cadf;
    --hud-grid:            rgba(37, 99, 235, 0.1);
    --hud-scan:            rgba(37, 99, 235, 0.45);
    --hud-vignette:        rgba(150, 195, 230, 0.45);
    --hud-btn-bg:          rgba(255, 255, 255, 0.65);
    --hud-btn-border:      rgba(37, 99, 235, 0.32);
    --hud-btn-color:       rgba(30, 58, 138, 0.7);
    --hud-input-bg:        rgba(255, 255, 255, 0.55);
    --hud-input-color:     #1e3a8a;
    --hud-drop-color:      rgba(30, 58, 138, 0.45);
    --hud-route-base:      rgba(37, 99, 235, 0.2);
    --hud-route-dot:       #1d4ed8;
    --hud-route-dot-glow:  rgba(29, 78, 216, 0.75);
    --hud-route-start:     rgba(5, 150, 105, 0.9);
    --hud-stage-color:     rgba(30, 58, 138, 0.65);
    --hud-outcome-bg:      rgba(210, 230, 248, 0.92);
    --hud-outcome-color:   #1d4ed8;
}

/* ============================================================
   COCKPIT CONTAINER
   ============================================================ */

.nav-hud-cockpit {
    position: relative;
    width: 100%;
    height: 380px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--hud-bg);
    margin-bottom: 1.5rem;
}

/* ============================================================
   BACKGROUND LAYER
   ============================================================ */

.cockpit-bg {
    position: absolute;
    inset: 0;
}

.cockpit-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.cockpit-video.hidden { display: none; }

.cockpit-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        var(--hud-ph-start) 0%,
        var(--hud-ph-mid)   50%,
        var(--hud-ph-end)   100%
    );
    overflow: hidden;
}

.cockpit-placeholder.hidden { display: none; }

.placeholder-scan {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent        0%,
        var(--hud-scan)   50%,
        transparent       100%
    );
    animation: scan-sweep 4s linear infinite;
    top: 0;
}

@keyframes scan-sweep {
    0%   { top: 0%;   opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

.placeholder-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--hud-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--hud-grid) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: grid-drift 10s linear infinite;
}

@keyframes grid-drift {
    0%   { background-position: 0 0; }
    100% { background-position: 0 60px; }
}

/* Vignette */
.nav-hud-cockpit::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at 50% 30%,
        transparent          30%,
        var(--hud-vignette) 100%
    );
    pointer-events: none;
    z-index: 5;
}

/* ============================================================
   CLOCK STRIP — TOP CENTER
   ============================================================ */

.cockpit-clock {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--hud-clock-text);
    background: var(--hud-clock-bg);
    border: 1px solid var(--hud-clock-border);
    border-radius: 20px;
    padding: 0.3rem 1.2rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    white-space: nowrap;
}

/* ============================================================
   GAUGE PANELS ROW — BOTTOM
   ============================================================ */

.cockpit-gauges {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
    z-index: 10;
}

.holo-panel {
    background: var(--hud-panel);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--hud-panel-border);
    border-radius: 8px;
    padding: 0.85rem 0.85rem 0.7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    box-shadow:
        0 0 24px var(--hud-panel-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.holo-panel:hover {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow:
        0 0 32px var(--hud-panel-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.holo-label {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.55rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--hud-label);
}

.holo-subvalue {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.7rem;
    color: var(--hud-subvalue);
    letter-spacing: 0.08em;
}

/* ============================================================
   VELOCITY — SVG ARC GAUGE
   ============================================================ */

.velocity-arc {
    position: relative;
    width: 100%;
    max-width: 110px;
    height: 65px;
}

.velocity-arc svg {
    width: 100%;
    height: 100%;
}

.arc-track {
    fill: none;
    stroke: var(--hud-arc-track);
    stroke-width: 7;
    stroke-linecap: round;
}

.arc-fill {
    fill: none;
    stroke: url(#velocityGrad);
    stroke-width: 7;
    stroke-linecap: round;
    transition: stroke-dasharray 0.6s ease;
    filter: drop-shadow(0 0 4px rgba(6, 182, 212, 0.55));
}

.velocity-value {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--hud-velocity);
    text-shadow: 0 0 14px var(--hud-velocity-shadow);
    white-space: nowrap;
}

/* ============================================================
   RHYTHM (CONSISTENCY) — SPARKLINE BARS
   ============================================================ */

.consistency-graph {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 48px;
    width: 100%;
    justify-content: center;
}

.consistency-bar {
    flex: 1;
    max-width: 10px;
    background: rgba(51, 65, 85, 0.4);
    border-radius: 2px 2px 0 0;
    transition: height 0.4s ease;
    min-height: 3px;
}

.consistency-bar.high {
    background: rgba(16, 185, 129, 0.75);
    box-shadow: 0 0 5px rgba(16, 185, 129, 0.4);
}

.consistency-bar.med {
    background: rgba(59, 130, 246, 0.7);
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.35);
}

.consistency-bar.low { background: rgba(51, 65, 85, 0.4); }

[data-theme="light"] .consistency-bar { background: rgba(148, 163, 184, 0.35); }
[data-theme="light"] .consistency-bar.low { background: rgba(148, 163, 184, 0.3); }

/* ============================================================
   TRACTION — DIRECTIONAL INDICATOR
   ============================================================ */

.traction-display {
    font-size: 1.9rem;
    line-height: 1;
    text-align: center;
}

.traction-stable    { color: #60a5fa; text-shadow: 0 0 12px rgba(96,  165, 250, 0.55); }
.traction-improving { color: #10b981; text-shadow: 0 0 12px rgba(16,  185, 129, 0.55); }
.traction-declining { color: #ef4444; text-shadow: 0 0 12px rgba(239,  68,  68, 0.5);  }
.traction-slipping  {
    color: #f59e0b;
    text-shadow: 0 0 12px rgba(245, 158, 11, 0.55);
    animation: hud-pulse 1.5s ease-in-out infinite;
}

[data-theme="light"] .traction-stable    { text-shadow: 0 0 8px rgba(29,  78, 216, 0.35); }
[data-theme="light"] .traction-improving { text-shadow: 0 0 8px rgba(5,  150, 105, 0.35); }
[data-theme="light"] .traction-declining { text-shadow: none; }
[data-theme="light"] .traction-slipping  { text-shadow: none; }

@keyframes hud-pulse {
    0%, 100% { opacity: 1;    }
    50%       { opacity: 0.35; }
}

/* ============================================================
   ROUTE GAUGE — RALLY STAGE MAP
   ============================================================ */

.route-map {
    width: 100%;
    height: 70px;
    overflow: visible;
}

/* Full faint outline */
.route-base {
    fill: none;
    stroke: var(--hud-route-base);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Quarter segments — color-coded */
.route-seg {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 0 9999; /* set by JS */
    stroke-dashoffset: 0;
    transition: stroke-dasharray 0.5s ease;
}

.route-seg-q1 { stroke: rgba(59,  130, 246, 0.85); filter: drop-shadow(0 0 3px rgba(59,  130, 246, 0.5)); }
.route-seg-q2 { stroke: rgba(16,  185, 129, 0.85); filter: drop-shadow(0 0 3px rgba(16,  185, 129, 0.5)); }
.route-seg-q3 { stroke: rgba(245, 158,  11, 0.85); filter: drop-shadow(0 0 3px rgba(245, 158,  11, 0.5)); }
.route-seg-q4 { stroke: rgba(244,  63,  94, 0.85); filter: drop-shadow(0 0 3px rgba(244,  63,  94, 0.5)); }

/* Start marker */
.route-start {
    fill: var(--hud-route-start);
    filter: drop-shadow(0 0 3px rgba(16, 185, 129, 0.7));
}

/* Position dot */
.route-dot {
    fill: var(--hud-route-dot);
    filter: drop-shadow(0 0 5px var(--hud-route-dot-glow));
    animation: dot-pulse 2s ease-in-out infinite;
}

@keyframes dot-pulse {
    0%, 100% { r: 4;   opacity: 1;    }
    50%       { r: 5.5; opacity: 0.75; }
}

/* Stage selector */
.stage-selector {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.stage-btn {
    background: none;
    border: none;
    color: var(--hud-stage-color);
    font-size: 0.6rem;
    cursor: pointer;
    padding: 0.1rem 0.25rem;
    line-height: 1;
    transition: color 0.2s;
}

.stage-btn:hover { color: var(--hud-velocity); }

.stage-label {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.52rem;
    letter-spacing: 0.15em;
    color: var(--hud-stage-color);
    white-space: nowrap;
}

/* ============================================================
   GAUGE TOOLTIP
   ============================================================ */

.hud-tooltip {
    position: absolute;
    bottom: 165px;
    z-index: 15;
    max-width: 210px;
    background: var(--hud-clock-bg);
    border: 1px solid var(--hud-panel-border);
    border-radius: 5px;
    padding: 0.5rem 0.75rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.63rem;
    line-height: 1.55;
    color: var(--hud-subvalue);
    pointer-events: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: fade-in 0.15s ease;
}

.hud-tooltip.hidden { display: none; }

/* ============================================================
   VIDEO CONTROL — TOP RIGHT
   ============================================================ */

.cockpit-video-control {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.video-set-btn,
.video-clear-btn {
    background: var(--hud-btn-bg);
    border: 1px solid var(--hud-btn-border);
    color: var(--hud-btn-color);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.58rem;
    letter-spacing: 0.15em;
    padding: 0.3rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: border-color 0.2s, color 0.2s;
}

.video-set-btn:hover,
.video-clear-btn:hover {
    border-color: rgba(59, 130, 246, 0.65);
    color: #93c5fd;
}

.video-clear-btn { color: rgba(239, 68, 68, 0.6); }
.video-clear-btn:hover { border-color: rgba(239, 68, 68, 0.5); color: #fca5a5; }

.video-set-btn.hidden,
.video-clear-btn.hidden { display: none; }

.video-input-panel {
    margin-top: 0.5rem;
    background: var(--hud-btn-bg);
    border: 1px solid var(--hud-btn-border);
    border-radius: 6px;
    padding: 0.75rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 220px;
}

.video-input-panel.hidden { display: none; }

#hud-video-url {
    background: var(--hud-input-bg);
    border: 1px solid var(--hud-btn-border);
    color: var(--hud-input-color);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.7rem;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

#hud-video-url:focus { border-color: rgba(59, 130, 246, 0.65); }

.video-drop-zone {
    border: 1px dashed var(--hud-btn-border);
    border-radius: 4px;
    padding: 0.75rem;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    color: var(--hud-drop-color);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.video-drop-zone.drag-over {
    border-color: rgba(59, 130, 246, 0.8);
    background: rgba(59, 130, 246, 0.06);
    color: #93c5fd;
}

/* ============================================================
   OUTCOME OVERLAY
   ============================================================ */

.cockpit-outcome {
    position: absolute;
    inset: 0;
    background: var(--hud-outcome-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.35em;
    color: var(--hud-outcome-color);
    text-shadow: 0 0 30px var(--hud-velocity-shadow);
    z-index: 30;
    animation: fade-in 0.4s ease;
}

.cockpit-outcome.hidden { display: none; }

@keyframes fade-in {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1);    }
}

/* ============================================================
   STALE STATE
   ============================================================ */

.state-stale .cockpit-gauges {
    opacity: 0.35;
    filter: grayscale(100%);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 700px) {
    .cockpit-gauges {
        grid-template-columns: repeat(2, 1fr);
        bottom: 0.75rem;
        left: 0.75rem;
        right: 0.75rem;
        gap: 0.6rem;
    }

    .nav-hud-cockpit { height: 440px; }
}

/* ============================================================
   MINI HUD STRIP (NM-016 — retained)
   ============================================================ */

.mini-hud-strip-container {
    background-color: #0f172a;
    border-top: 1px solid #334155;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    margin-top: auto;
}

.mini-hud-velocity-ring {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mini-hud-velocity-ring::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    background-color: #0f172a;
    border-radius: 50%;
}

.mini-hud-velocity-ring span {
    position: relative;
    z-index: 1;
    font-size: 0.6rem;
    font-weight: bold;
    color: #e2e8f0;
}

.mini-hud-traction { font-size: 1.2rem; }
.mini-hud-traction.improving { color: #10b981; }
.mini-hud-traction.stable    { color: #3b82f6; }
.mini-hud-traction.declining { color: #ef4444; }

/* ============================================================
   JOURNEY OVERVIEW STATS (NM-015 — retained)
   ============================================================ */

.journey-overview-stats {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
}