/* --- GLOBALE VARIABLEN --- */
:root {
    --bg-color: #0f1115;
    --accent-blue: #58a6ff;
    --accent-red: #da3633;
    --accent-green: #2ea043;
    --accent-muted: #8b949e;

    /* Aurora background colors */
    --aurora-1: rgba(56, 189, 248, 0.35);
    --aurora-2: rgba(139, 92, 246, 0.28);
    --aurora-3: rgba(236, 72, 153, 0.22);
    --aurora-4: rgba(34, 197, 94, 0.18);

    /* Container look (legacy-inspired) */
    --panel-bg: rgba(15, 17, 21, 0.75);
    --panel-border: rgba(255, 255, 255, 0.08);
    --panel-radius: 12px;
    --panel-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
    --panel-blur: 8px;
    --container-pad-y: clamp(18px, 2.2vw, 36px);

    --stage-bg: rgba(15, 17, 21, 0.5);
    --stage-border: rgba(255, 255, 255, 0.06);
    --stage-radius: 16px;
    --stage-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
    

/* --- CONTAINER CARDS --- */
.panel-card {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--panel-shadow);
    backdrop-filter: blur(var(--panel-blur));
    padding-block: var(--container-pad-y);
}

.stage-card {
    background: var(--stage-bg);
    border: 1px solid var(--stage-border);
    border-radius: var(--stage-radius);
    box-shadow: var(--stage-shadow);
    overflow: hidden;
    padding-block: var(--container-pad-y);
}

/* --- DATA SECTION GRID (narrow spacer column) --- */
@media (min-width: 1024px) {
    .data-grid {
        grid-template-columns: minmax(0, 4fr) minmax(0, 0.5fr) minmax(0, 7.5fr);
    }

    .data-panel { grid-column: 1; }
    .data-spacer { grid-column: 2; }
    .data-stage { grid-column: 3; }
}
    /* Navigation Einstellungen */
    --nav-size: 10px;        /* Kleinerer Durchmesser für Kompaktheit */
    --nav-gap: 12px;         /* Engerer Abstand */
}

/* --- BACKGROUND ANIMATION --- */
#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background-color: var(--bg-color);
}

.bg-aurora {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        radial-gradient(ellipse at 20% 30%, var(--aurora-1) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 70%, var(--aurora-2) 0%, transparent 70%),
        radial-gradient(ellipse at 60% 20%, var(--aurora-3) 0%, transparent 50%),
        radial-gradient(ellipse at 40% 80%, var(--aurora-4) 0%, transparent 65%);
    opacity: 0.9;
    transition: opacity 0.8s ease;
}

.bg-grid {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: grid-drift 120s linear infinite;
    transform: rotate(15deg);
    opacity: 0.4;
}

@keyframes grid-drift {
    0% { transform: rotate(15deg) translate(0, 0); }
    100% { transform: rotate(15deg) translate(-50px, -50px); }
}

/* --- NAVIGATION STYLES --- */
#road-tracker {
    /* Positionierung passiert inline im HTML via Tailwind/Style */
    pointer-events: auto; /* Damit Hover funktioniert */
}

.nav-item {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 4px; /* Hitbox vergrößern */
}

/* Der Punkt an sich */
.nav-dot {
    width: var(--nav-size);
    height: var(--nav-size);
    border-radius: 50%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* STATE: FUTURE (Standard) - Volle Kugel, wenig Opacity */
.nav-dot {
    background-color: var(--accent-blue);
    opacity: 0.2;
    transform: scale(0.8);
    border: none;
}

/* STATE: PASSED - Volle Kugel, einheitlich mit Future */
.nav-item.passed .nav-dot {
    background-color: var(--accent-blue);
    border: none;
    opacity: 0.5;
    transform: scale(0.9);
}

/* STATE: ACTIVE - Volle Kugel, 100% Opacity, Glow */
.nav-item.active .nav-dot {
    background-color: var(--accent-blue);
    opacity: 1;
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(88, 166, 255, 0.4);
    border: none;
}

/* LABEL (Beschreibung) */
.nav-label {
    position: absolute;
    right: 24px; /* Links neben dem Punkt */
    background: rgba(15, 17, 21, 0.9);
    color: var(--accent-blue);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: 'Fira Code', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(88, 166, 255, 0.2);
    
    /* Animation settings */
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

/* Label anzeigen bei Hover ODER per JS-Klasse */
.nav-item:hover .nav-label,
.nav-item.show-label .nav-label {
    opacity: 1;
    transform: translateX(0);
}

/* --- LEAFLET MAP OVERRIDES (Dark Theme) --- */

/* Cluster Icons (Runde Kreise) */
.custom-cluster-icon {
    background: rgba(88, 166, 255, 0.2);
    border: 1px solid rgba(88, 166, 255, 0.6);
    color: #fff;
    border-radius: 50%;
    text-align: center;
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    line-height: 30px; /* Muss der Icon-Höhe entsprechen */
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    transition: transform 0.2s;
}
.custom-cluster-icon:hover {
    background: rgba(88, 166, 255, 0.4);
    transform: scale(1.1);
    z-index: 1000 !important;
}

/* Popup Container */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    /* Tailwind colors: bg-[#0f1115] -> rgb(15, 17, 21) */
    background: rgba(15, 17, 21, 0.95) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border-radius: 8px !important;
    color: #e6edf3 !important;
}

.leaflet-popup-content {
    margin: 12px 14px;
    line-height: 1.5;
}

.leaflet-container a.leaflet-popup-close-button {
    color: var(--accent-muted) !important;
    padding: 8px !important;
    position: absolute !important;
    top: 2px !important;
    right: 20px !important;
    transform: none !important;
}
.leaflet-container a.leaflet-popup-close-button:hover {
    color: #fff !important;
}

/* Keep risk label text inside its container */
.detail-risk-text {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* --- D3 CHARTS --- */

/* Achsen Linien und Text im Darkmode */
.tick line {
    stroke: rgba(255, 255, 255, 0.1);
}
.tick text {
    fill: var(--accent-muted);
    font-family: 'Fira Code', monospace;
    font-size: 10px;
}
.domain {
    stroke: rgba(255, 255, 255, 0.1);
}

.matrix-axis-label {
    fill: var(--accent-muted);
}

/* Matrix Bubbles */
.matrix-bubble {
    transition: all 0.3s ease;
    cursor: pointer;
}
.matrix-bubble:hover {
    stroke: #fff;
    stroke-width: 2px;
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.3));
}

/* --- MAP CARD (legacy-sized default + fullscreen) --- */
.section#karte {
    padding-inline: var(--content-side-padding);
    padding-block: var(--section-vertical-padding);
}

.map-card {
    width: 100%;
    height: 100%;
    background: rgba(12, 14, 18, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
    padding: 12px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.map-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.map-card-title {
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: 1px;
    color: #e6edf3;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
}

.map-fullscreen-btn {
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.12);
    color: #e6edf3;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: 'Fira Code', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.map-fullscreen-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.map-card-body {
    flex: 1;
    min-height: 0;
}

.map-stage {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    overflow: hidden;
    background: rgba(15, 17, 21, 0.55);
}

/* Wenn ein Popup auf der Karte offen ist, dimme nur die Karteninhalte.
   Popups bleiben dabei ungedimmt, damit sie gut lesbar sind. */
#map.is-dimmed .leaflet-tile,
#map.is-dimmed .leaflet-overlay-pane,
#map.is-dimmed .leaflet-marker-pane,
#map.is-dimmed .leaflet-shadow-pane {
    filter: brightness(0.45) saturate(0.9);
    transition: filter 200ms ease;
}

#map.is-dimmed .leaflet-popup-pane {
    /* Popups sollen nicht gedimmt werden */
    filter: none;
}

.map-card.is-fullscreen {
    position: fixed;
    inset: 16px;
    width: auto;
    height: auto;
    z-index: 3000;
}

.map-card:fullscreen {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3000;
}

/* Light Cone */
.cone-ray {
    stroke: var(--accent-blue);
    stroke-width: 1;
    opacity: 0.2;
}
.cone-node {
    cursor: pointer;
    transition: r 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.cone-node:hover {
    stroke: #fff;
    stroke-width: 2px;
}
.cone-node.is-dim {
    opacity: 0.28;
}
.cone-node.is-selected {
    stroke: #fff;
    stroke-width: 2px;
}
.cone-glow {
    filter: drop-shadow(0 0 14px rgba(88, 166, 255, 0.35));
}
.cone-silhouette {
    fill: rgba(255, 255, 255, 0.08);
}
#light-cone-viz text {
    fill: var(--accent-muted);
    font-family: 'Fira Code', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- SCROLL HINTS & UTILS --- */
.scroll-hint {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
    opacity: 0.5;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0) translateX(-50%);}
    40% {transform: translateY(-10px) translateX(-50%);}
    60% {transform: translateY(-5px) translateX(-50%);}
}

/* Range Input Reset für Chrome/Safari */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: var(--accent-blue);
    cursor: pointer;
    margin-top: -5px; /* Adjustierung für Track-Höhe */
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
}

#time-detail-panel.visible {
    opacity: 1;
}

#time-detail-panel {
    min-height: 170px;
}

#time-detail-panel .text-xl {
    line-height: 1.4;
}

/* --- FORM CONTROLS --- */
select {
    color: #e6edf3;
}

select option,
select optgroup {
    background-color: #0f1115;
    color: #e6edf3;
}