/* @AI-READONLY: GLOBAL LAB UI OVERRIDES (sidebar / mini-rail / shell layout). */
/**
 * Sidebar-Collapsible & Mini-Rail System v1.0
 * Standardizes the YouTube-style navigation and high-fidelity telemetry.
 * Used by all labs that load this stylesheet — not specific to CMA-ES.
 */

:root {
    /* Top edge of hamburger / sidebar nav row — same reference height as typical canvas overlays (formulas, HUD, ~14px top-left) */
    --cyber-nav-band-top: 14px;
}

#mini-rail {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: var(--cyber-rail-w, 66px);
    min-width: var(--cyber-rail-w, 66px);
    flex-shrink: 0;
    height: 100vh;
    background: rgba(5, 10, 20, 0.95);
    border-right: 1px solid rgba(0, 210, 255, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--cyber-nav-band-top) 0 22px 0;
    z-index: 2000;
    backdrop-filter: blur(25px);
    border-right: none; /* Border is handled dynamically */
}

/* The 'Clean Line' Logic */
#mini-rail {
    border-right: 1px solid rgba(0, 210, 255, 0.2);
}

#side-panel:not(.collapsed) {
    border-left: none !important;
    margin-left: -1px; /* Overlap the mini-rail border for a single line */
}

/* --- NAVIGATION COMPRESSION FOR --cyber-sidebar-w --- */
#side-panel .cyber-nav,
#sidebar-header .cyber-nav {
    display: flex !important;
    justify-content: center !important;
    /* 6×52px + gaps must fit ~336px sidebar inner width — otherwise wrap (? onto second line) */
    gap: 4px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    /* No extra top spacing — top edge comes from #side-panel padding + this variable.
       Bottom margin matches mini-rail / nav row gap (4px). */
    margin: 0 0 4px 0 !important;
    box-sizing: border-box !important;
    /* cyber-layout setzt .cyber-nav z-index:1000 — bricht Sidebar-Stacking vs. Karten */
    z-index: auto !important;
}

/* Global: no forced 80px header slot (cyber-layout); height = nav row */
#sidebar-header {
    min-height: 0 !important;
    margin-bottom: 0 !important;
}

/* Icon-Zeile über scrollbarem Content (Template-/Instrument-Karten nicht über Buttons) */
#side-panel #sidebar-header {
    position: relative;
    z-index: 30;
    flex-shrink: 0;
    background: rgba(10, 15, 26, 0.98);
}

#side-panel .cyber-nav .nav-btn,
#sidebar-header .cyber-nav .nav-btn {
    flex: 0 0 52px !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
}

#side-panel {
    width: var(--cyber-sidebar-w) !important;
    min-width: var(--cyber-sidebar-w) !important; /* Overriding the base layout's min-width */
    height: 100vh;
    background: rgba(10, 15, 26, 0.98);
    display: flex;
    flex-direction: column;
    gap: 0 !important; /* cyber-layout hat gap:10px — sonst wirkt Content unter der Nav-Zeile „versetzt“ */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    position: relative;
    z-index: 1500;
    border-right: 1px solid rgba(0, 210, 255, 0.2);
    /* Right padding 4px (was 7px) shifts the inner #ui-container scrollbar
       ~3px further right toward the panel edge. */
    padding: var(--cyber-nav-band-top) 4px 7px 7px !important;
}

#side-panel.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    opacity: 0;
    pointer-events: none;
    border-right: none !important;
}

#mini-rail .nav-btn {
    flex: 0 0 auto !important;
    min-width: 52px !important;
    min-height: 52px !important;
    aspect-ratio: 1 / 1 !important;
    width: 52px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    border-radius: 6px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    color: #fff !important;
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(0, 210, 255, 0.3) !important;
    margin-bottom: 0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

#mini-rail .nav-btn:hover {
    transform: translateY(-3px) scale(1.05);
    background: rgba(0, 210, 255, 0.2) !important;
    border-color: #00d2ff !important;
    box-shadow: 0 0 25px rgba(0, 210, 255, 0.5) !important;
}

/* Visual grouping: add spacing between button groups */
#mini-rail > .nav-btn[data-cyber-branding-nav="1"]:nth-child(3) {
    margin-bottom: 8px; /* After Back, before Briefing */
}

#mini-rail .nav-btn.nav-btn-coffee {
    margin-top: 8px; /* Before Coffee, after Bug */
    margin-bottom: 8px; /* Before Language */
}

/* Stroke width like coffee cup (1.5); overrides cyber-layout .nav-btn svg (2.8) */
#mini-rail .nav-btn svg {
    width: 26px !important;
    height: 26px !important;
    stroke-width: 1.5 !important;
    filter: drop-shadow(0 0 5px rgba(0, 210, 255, 0.3)) !important;
}

/* Language (flag): mini-rail + optional cyber-nav in #sidebar-header — CyberUI */
#mini-rail .nav-btn-lang-display,
#sidebar-header .cyber-nav .nav-btn-lang-display {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    font: inherit !important;
    appearance: none !important;
}
#mini-rail .nav-btn-lang-display .rail-lang-flag,
#sidebar-header .cyber-nav .nav-btn-lang-display .rail-lang-flag {
    font-size: 1.48rem;
    line-height: 1;
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.35));
}

#side-panel .cyber-nav .nav-btn svg,
#sidebar-header .cyber-nav .nav-btn svg {
    width: 26px !important;
    height: 26px !important;
    stroke-width: 1.5 !important;
}

#ui-container,
#parameters-container,
#parameter-container {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    width: 100% !important;
    padding: 0 !important; /* Panel padding is handled by #side-panel */
    box-sizing: border-box;
    position: relative;
    z-index: 5;
}

/* Scrollbar with built-in visual breathing room.
   Track is 14px wide, thumb is rendered inside a 3px transparent border on
   each side → visible thumb stays 8px (same as global) but appears centered
   with ~3px gap from the cards. Crucially this width is only "stolen" from
   content when the scrollbar is actually present — no wasted space when the
   panel content fits without scrolling. */
#ui-container::-webkit-scrollbar,
#parameters-container::-webkit-scrollbar,
#parameter-container::-webkit-scrollbar {
    width: 14px;
}
#ui-container::-webkit-scrollbar-track,
#parameters-container::-webkit-scrollbar-track,
#parameter-container::-webkit-scrollbar-track {
    background: transparent;
}
#ui-container::-webkit-scrollbar-thumb,
#parameters-container::-webkit-scrollbar-thumb,
#parameter-container::-webkit-scrollbar-thumb {
    background-color: #334155;
    border-radius: 7px;
    border: 3px solid transparent;
    background-clip: padding-box;
}
#ui-container::-webkit-scrollbar-thumb:hover,
#parameters-container::-webkit-scrollbar-thumb:hover,
#parameter-container::-webkit-scrollbar-thumb:hover {
    background-color: #475569;
}

/* Zwischen Stats/HUD-Zeile und Karten — gleicher Rhythmus wie cyber-nav gap (4px); kein Inline margin mehr nötig */
#side-panel #data-container {
    margin-bottom: 4px !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box;
    position: relative;
    z-index: 5;
}

/* Kein display:flex hier — sonst wird das Shell-Layout aus cyber-layout.css überschrieben (Grid / zuvor Flex-Zeile). */
body {
    background-color: rgb(0, 0, 20);
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

#main-content { 
    flex: 1; 
    position: relative; 
    background: transparent; 
    overflow: hidden; 
}

#canvas-container { 
    width: 100%; 
    height: 100%; 
    position: relative; 
}

#canvas { 
    display: block; 
    flex-grow: 1; 
}

.telemetry-item { 
    margin-bottom: 4px; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
}

.telemetry-label { 
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem; 
    color: rgba(255, 255, 255, 0.4); 
    letter-spacing: 2px; 
    margin-bottom: 2px; 
    text-transform: uppercase; 
}

/* Global UI Font Override */
#ui-container, button, select, .cyber-btn { 
    font-family: 'Orbitron', sans-serif !important; 
}

/* --- HIGH-FIDELITY TELEMETRY --- */
.cyber-number-widget {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 36px !important;
    width: auto !important;
}

.cyber-digit-box {
    display: flex !important;
    width: 20px;
    height: 32px;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 1.4rem;
    font-weight: bold !important;
    color: #00d2ff;
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.6);
}

.cyber-digit-box.separator {
    width: 10px !important;
    opacity: 0.8 !important;
}

/* --- DROPDOWN UI (ULTRA STABLE) --- */
.instrument-card, .card-content { 
    overflow: visible !important; 
} 

/* WebKit: slider-runnable-track often fails to composite over backdrop-filter; isolate promotes a stable paint layer */
#side-panel input[type="range"] {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

#side-panel input[type="range"]::-webkit-slider-runnable-track {
    -webkit-transform: translateZ(0);
}

.cyber-dropdown { 
    width: 100%; 
    margin-bottom: 5px; 
    position: relative; 
}

.dropdown-trigger { 
    background: #0a1329 !important; 
    border: 1px solid #00d2ff !important; 
    color: #fff !important; 
    padding: 12px 15px !important;
    border-radius: 6px !important;
    font-family: 'Orbitron' !important; 
    font-size: 0.8rem !important; 
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer !important;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.1) !important;
}

.dropdown-panel {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    width: 100%;
    background: rgb(0, 0, 20) !important;
    border: 1px solid #00d2ff !important;
    border-radius: 6px !important;
    z-index: 9999999 !important;
    box-shadow: 0 20px 60px rgba(0,0,0,1), 0 0 30px rgba(0, 210, 255, 0.2) !important;
    overflow: hidden !important;
}

.dropdown-option {
    padding: 14px 18px !important;
    cursor: pointer !important;
    font-family: 'Orbitron' !important;
    font-size: 0.75rem !important;
    color: rgba(255,255,255,0.8) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

/* --- FOURIER SPECIFIC OVERRIDES --- */
#top-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100px;
    width: 100%;
    background: linear-gradient(to bottom, rgba(5, 11, 24, 0.8) 0%, transparent 100%);
    border-bottom: 1px solid rgba(0, 210, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 1000;
    pointer-events: none;
}

.component-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    pointer-events: none;
}

.component-label {
    font-family: 'Orbitron';
    font-size: 1rem;
    font-weight: bold;
    color: white;
    position: absolute;
    top: -15px;
    opacity: 0.6;
    pointer-events: none;
}

.drawing-hint {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.2);
    font-family: 'Orbitron';
    font-size: 0.7rem;
    letter-spacing: 2px;
    pointer-events: none;
    text-transform: uppercase;
}

.cyber-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(10, 20, 40, 0.2) 0%, rgba(8, 20, 42, 1) 100%);
    pointer-events: none;
}

#formula-overlay {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    color: white;
    font-size: 1.8rem;
    text-shadow: 0 0 15px rgba(0, 210, 255, 0.6);
    pointer-events: none;
    user-select: none;
    background: rgba(10, 15, 25, 0.6);
    padding: 10px 30px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 210, 255, 0.2);
    font-family: 'Outfit', sans-serif;
}

#n-telemetry {
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Orbitron', sans-serif;
    font-size: 126px;
    font-weight: 700;
    display: block;
    text-align: right;
    background: linear-gradient(180deg, #ffffff 0%, #fff970 20%, #ffd700 60%, #ff8c00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.5));
    pointer-events: none;
    user-select: none;
    z-index: 9999;
    opacity: 0.9;
}

.dropdown-option:hover {
    background: rgba(0, 210, 255, 0.3) !important;
    color: #fff !important;
    padding-left: 22px !important;
    text-shadow: 0 0 10px #00d2ff !important;
}

/* --- Mini-Rail Kontakt-Herz (CyberUI.injectContactHeartButton) --- */
#mini-rail .nav-btn.adopt-contact-btn svg {
    overflow: visible;
}

@keyframes cyber-adopt-heart-pulse {
    0%, 100% {
        stroke: #ffffff;
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(0, 210, 255, 0.35));
    }
    42% {
        stroke: #00d2ff;
        transform: scale(1.14);
        filter: drop-shadow(0 0 14px rgba(0, 210, 255, 1)) drop-shadow(0 0 28px rgba(0, 210, 255, 0.45));
    }
    58% {
        stroke: #00d2ff;
        transform: scale(1.06);
        filter: drop-shadow(0 0 10px rgba(0, 210, 255, 0.55));
    }
}

#mini-rail .nav-btn.adopt-contact-btn svg .adopt-heart-path {
    transform-origin: center;
    transform-box: fill-box;
    animation: cyber-adopt-heart-pulse 3.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    #mini-rail .nav-btn.adopt-contact-btn svg .adopt-heart-path {
        animation: none;
        stroke: #ffffff;
        transform: none;
        filter: none;
    }
}

/* --- LEFT CHROME: Mini-Rail + Sidebar gemeinsam zoombar (cyber-left-chrome.js) ---
 *
 * SINGLE SOURCE OF TRUTH for left-chrome geometry. Change one of the two
 * primitive widths and every dependent rule (body grid, side-panel width,
 * chrome grid, cap, JS fit-scale math) follows automatically.
 *
 *   --cyber-rail-w        : mini-rail column (fixed icon column)
 *   --cyber-sidebar-w     : expanded side panel
 *   --cyber-left-natural-w: rail + sidebar (also overwritten by JS at runtime
 *                           when sidebar collapses → rail-only width)
 *   --cyber-left-cap      : hard pixel cap for total left chrome width
 *                           (natural + 50px buffer)
 */
:root {
    --cyber-rail-w: 66px;
    --cyber-sidebar-w: 356px;
    --cyber-left-scale: 1;
    --cyber-left-natural-w: calc(var(--cyber-rail-w) + var(--cyber-sidebar-w));
    /* Hard rendered-width cap for the left chrome (6px buffer above 384 so
       the inner scrollbar has breathing room from the panel edge).
       The JS auto-fit scale (cyber-left-chrome.js) is additionally capped
       at cap / natural so the inner transform never exceeds this. */
    --cyber-left-cap: 390px;
}

body.cyber-shell-grid {
    display: grid !important;
    /* Hard cap (--cyber-left-cap) so left chrome never grows beyond on big windows. */
    grid-template-columns: min(calc(var(--cyber-left-natural-w) * var(--cyber-left-scale, 1)), var(--cyber-left-cap)) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 100vh) !important;
    align-items: stretch !important;
    align-content: stretch !important;
    overflow-x: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
}

body.cyber-shell-grid > #cyber-left-chrome {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: start !important;
    width: min(calc(var(--cyber-left-natural-w) * var(--cyber-left-scale, 1)), var(--cyber-left-cap));
    max-width: var(--cyber-left-cap);
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
    background: rgba(10, 15, 26, 1);
    /*
     * #main-content kommt im DOM nach der Chrome-Spalte; ohne z-index gewinnt bei Überlappung
     * die Hauptfläche (z. B. fest positionierte Kinder / Full-Bleed). Mini-Rail/Sidebar wirken dann
     * „unter einem Balken“. Chrome-Spalte explizit darüber legen — Modals bleiben höher (z. B. .cyber-overlay).
     */
    position: relative !important;
    z-index: 2100 !important;
    isolation: isolate;
}

body.cyber-shell-grid #cyber-left-chrome-inner {
    width: var(--cyber-left-natural-w);
    /* Cap scale at 1.12 so content never grows beyond --cyber-left-cap equivalent on big windows */
    height: calc(100vh / min(var(--cyber-left-scale, 1), 1.12));
    display: grid;
    grid-template-columns: var(--cyber-rail-w) var(--cyber-sidebar-w);
    grid-template-rows: minmax(0, 1fr);
    transform: scale(min(var(--cyber-left-scale, 1), 1.12));
    transform-origin: top left;
    box-sizing: border-box;
}

body.cyber-shell-grid #cyber-left-chrome-inner:has(#side-panel.collapsed) {
    /* Same rail column as expanded; only sidebar column drops to 0 — identical mini-rail ZF/size. */
    grid-template-columns: var(--cyber-rail-w) 0 !important;
}

body.cyber-shell-grid #cyber-left-chrome-inner > #mini-rail {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    /* Feste 100vh + scale(<1): Innere Grid-Zeile ist höher als 100vh → unten Spalt zum Body-HG. */
    height: 100% !important;
    min-height: 0 !important;
}

body.cyber-shell-grid #cyber-left-chrome-inner > #side-panel {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    height: 100% !important;
    min-height: 0 !important;
}

body.cyber-shell-grid > #main-content {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    height: 100vh !important;
    position: relative !important;
    z-index: 0 !important;
    isolation: isolate;
    /* Verhindert, dass Kinder der Hauptfläche unter Compositing über die Chrome-Spalte „malen“. */
    contain: paint;
}

/* cyber-layout.css: #canvas-container war absolute/inset-eligible; Overrides setzen sonst nur
 * position:relative + 100%/100% — bei canvas/orbit-WebGL können dadurch Layers schief gegenüber #cyber-left-chrome (z≈2100) liegen. */
body.cyber-shell-grid > #main-content > #canvas-container {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    box-sizing: border-box !important;
    /* Verhindert, dass Overlay-Glow/KaTeX-Box-Schlagschatten optisch über #cyber-left-chrome rutschen */
    overflow: hidden !important;
}

/*
 * Narrow-viewport stacking layout REMOVED (was @media max-width:560px).
 * It caused erratic jumps & canvas collapse at the threshold across all labs.
 * Desktop side-by-side layout now applies at all widths; cyber-left-chrome's
 * proportional scale already shrinks the chrome at small widths.
 */