/*
 * StarshipOS — Energieverteiler (Engineering Systems Panel)
 * Engineering-Systeme, responsiv neu aufgebaut (Phone, Tablet, Desktop):
 *   - Reaktor-Pool als durchgehende Leiste mit Blockzellen
 *   - Bereichs-Navigation statt aller Cluster-Karten untereinander:
 *     links die Bereiche, in der Mitte nur die Cluster des gewählten Bereichs
 *   - Energiebilanz, Preset und Systemmeldungen in der rechten Spalte
 *     (Tablet: oben, Phone: eigene Ansichten über die Leiste am unteren Rand)
 *
 * Die Umbrüche richten sich nach der Breite des Panels (Container Query),
 * nicht nach dem Fenster — das Spielstatus-Panel am Rand nimmt sonst Platz,
 * den der Viewport nicht kennt.
 *   Phone   <= 599 px
 *   Tablet  600–1023 px
 *   Desktop >= 1024 px
 *
 * Ergänzt das STATION PANEL KIT aus assets/css/styles.css und nutzt dieselben
 * Design-Tokens. Engineering-Akzent = Gelb (--accent-yellow).
 */

#engineering-systems-panel {
    --panel-accent: var(--accent-yellow);
    container: eng-sys / inline-size;
    gap: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: clip;
    font-family: var(--font-mono);
}

.eng-sys .eng-hint {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.eng-sys .eng-icon { flex: none; color: var(--accent-cyan); }

/* ── Reaktor-Pool-Leiste ──────────────────────────────────────── */
.eng-sys .eng-pool {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 10px var(--space-md);
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-cyan);
}
.eng-sys .eng-pool[data-tone="danger"] {
    background: var(--tint-red);
    border-left-color: var(--accent-red);
}
.eng-sys .eng-pool-label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
}
.eng-sys .eng-pool-value {
    white-space: nowrap;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--accent-cyan);
}
.eng-sys .eng-pool[data-tone="danger"] .eng-pool-value { color: var(--accent-red); }
.eng-sys .eng-pool-free { font-size: var(--text-sm); color: var(--text-muted); }
.eng-sys .eng-pool-cells {
    flex: 1 1 100%;
    display: flex;
    gap: 2px;
    height: 8px;
}
.eng-sys .eng-pool-cell {
    flex: 1;
    border-radius: 1px;
    background: var(--bg-secondary);
}
.eng-sys .eng-pool-cell[data-state="on"]   { background: var(--accent-cyan); }
.eng-sys .eng-pool-cell[data-state="over"] { background: var(--accent-red); }

/* ── Grundraster ──────────────────────────────────────────────── */
.eng-sys .eng-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 380px;
    grid-template-areas: "nav main side";
    align-items: start;
}

/* ── Bereichs-Navigation (Liste) ──────────────────────────────── */
.eng-sys .eng-nav {
    grid-area: nav;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    background: var(--bg-panel);
    border-right: 1px solid var(--border-color);
}
.eng-sys .eng-nav-title {
    padding: 14px var(--space-md) 8px;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}
.eng-sys .eng-nav-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 52px;
    padding: 10px var(--space-md);
    text-align: left;
    font-family: var(--font-mono);
    color: var(--text-primary);
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    cursor: pointer;
}
.eng-sys .eng-nav-item:hover { background: var(--bg-secondary); }
.eng-sys .eng-nav-item[data-tone="danger"]  { border-left-color: var(--accent-red); }
.eng-sys .eng-nav-item.is-active {
    background: var(--bg-secondary);
    border-left-color: var(--accent-yellow);
}
.eng-sys .eng-nav-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.eng-sys .eng-nav-label {
    flex: 1;
    min-width: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eng-sys .eng-nav-short { display: none; font-weight: 600; white-space: nowrap; }
.eng-sys .eng-nav-meta {
    font-size: var(--text-sm);
    color: var(--text-muted);
    white-space: nowrap;
}
.eng-sys .eng-nav-fill {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--bg-secondary);
    border-radius: 1px;
}
.eng-sys .eng-nav-fill > span {
    display: block;
    height: 3px;
    background: var(--accent-cyan);
    border-radius: 1px;
}

/* Ton je Bereich: rot = Cluster ohne Energie, gelb = unterversorgt, grau = alles aus */
.eng-sys [data-tone="danger"]  > .eng-nav-row .eng-icon,
.eng-sys [data-tone="danger"]  > .eng-cat-head .eng-icon,
.eng-sys [data-tone="danger"]  .eng-nav-meta { color: var(--accent-red); }
.eng-sys [data-tone="warning"] .eng-nav-meta { color: var(--accent-yellow); }
.eng-sys [data-tone="ghost"]   > .eng-nav-row .eng-icon,
.eng-sys [data-tone="ghost"]   > .eng-cat-head .eng-icon { color: var(--text-muted); }
.eng-sys .eng-nav-item[data-tone="danger"]  .eng-nav-fill > span { background: var(--accent-red); }
.eng-sys .eng-nav-item[data-tone="warning"] .eng-nav-fill > span { background: var(--accent-yellow); }
.eng-sys .eng-nav-item[data-tone="ghost"]   .eng-nav-fill > span { background: var(--text-muted); }

/* ── Cluster des gewählten Bereichs ───────────────────────────── */
.eng-sys .eng-main {
    grid-area: main;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.eng-sys .eng-cat { display: flex; flex-direction: column; }
.eng-sys .eng-cat[hidden] { display: none; }
/* Ohne Skript (bzw. vor dem ersten Anwenden) nur den ersten Bereich zeigen */
.eng-sys:not([data-eng-ready]) .eng-cat:not(.is-default) { display: none; }

.eng-sys .eng-cat-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px var(--space-md);
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-cyan);
}
.eng-sys .eng-cat[data-tone="danger"]  .eng-cat-head { border-left-color: var(--accent-red); }
.eng-sys .eng-cat[data-tone="warning"] .eng-cat-head { border-left-color: var(--accent-yellow); }
.eng-sys .eng-cat[data-tone="ghost"]   .eng-cat-head { border-left-color: var(--text-dim); }
.eng-sys .eng-cat-title {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-primary);
}
.eng-sys .eng-cat-meta {
    margin-left: auto;
    font-size: var(--text-sm);
    color: var(--text-muted);
    white-space: nowrap;
}

.eng-sys .eng-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    padding: 12px var(--space-md);
    border-bottom: 1px solid var(--border-color);
}
.eng-sys .eng-cluster[data-offline="true"] { opacity: 0.6; }
.eng-sys .eng-cluster-info {
    flex: 1 1 190px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.eng-sys .eng-cluster-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.eng-sys .eng-cluster-label {
    min-width: 0;
    font-size: var(--text-base);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eng-sys .eng-cluster-top .status-badge { margin-left: auto; flex: none; }
.eng-sys .eng-cluster-readout {
    display: flex;
    gap: 12px;
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.eng-sys .eng-cluster-ep { color: #67e8f9; font-weight: 600; }

/* EP-Stepper: 44 × 40 px Ziele — daneben tippen kostet Energie an der falschen Stelle */
.eng-sys .eng-stepper {
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.eng-sys .eng-step {
    flex: none;
    width: 44px;
    height: 40px;
    min-height: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: var(--text-md);
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.eng-sys .eng-step:hover { background: var(--tint-cyan); border-color: var(--accent-cyan); }
.eng-sys .eng-off { color: var(--text-muted); }
.eng-sys .eng-off svg { fill: currentColor; }
.eng-sys .eng-off.is-active {
    color: var(--accent-red);
    background: var(--tint-red);
    border-color: var(--accent-red);
}
.eng-sys .eng-segments {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 4px;
}
/* Segmente füllen die Breite; umrandet bis zum Normalbetrieb, damit ein Defizit sichtbar ist */
.eng-sys .eng-segment {
    flex: 1;
    min-width: 8px;
    height: 22px;
    border-radius: 2px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}
.eng-sys .eng-segment[data-state="on"]      { background: var(--accent-cyan); border-color: var(--accent-cyan); }
.eng-sys .eng-segment[data-state="nominal"] { border-color: var(--text-muted); }

/* ── Rechte Spalte: Bilanz, Preset, Meldungen ─────────────────── */
.eng-sys .eng-side {
    grid-area: side;
    position: sticky;
    top: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    border-left: 1px solid var(--border-color);
}
.eng-sys .eng-block {
    flex: 1 1 300px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.eng-sys .eng-block-title {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}

.eng-sys .eng-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.eng-sys .eng-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--accent-yellow);
    border-radius: var(--radius-lg);
}
.eng-sys .eng-kpi[data-tone="success"] { border-top-color: var(--accent-green); }
.eng-sys .eng-kpi[data-tone="danger"]  { border-top-color: var(--accent-red); }
.eng-sys .eng-kpi-label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
}
.eng-sys .eng-kpi-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-primary);
}
.eng-sys .eng-kpi[data-tone="success"] .eng-kpi-value { color: var(--accent-green); }
.eng-sys .eng-kpi[data-tone="danger"]  .eng-kpi-value { color: var(--accent-red); }
.eng-sys .eng-kpi-note { font-size: var(--text-xs); color: var(--text-muted); }
.eng-sys .eng-battery { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.eng-sys .eng-battery[data-tone="warning"] { color: var(--accent-yellow); }

/* Preset: 2 × 2, der aktive Zustand ist ohne Vergleichen ablesbar */
.eng-sys .eng-presets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--border-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.eng-sys .eng-preset {
    min-height: 44px;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: none;
    border-radius: 0;
    cursor: pointer;
}
.eng-sys .eng-preset:hover { background: var(--bg-raised); }
.eng-sys .eng-preset.is-active { color: #0a0e17; background: var(--accent-cyan); }

.eng-sys .eng-suggestion-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.eng-sys .eng-suggestion {
    padding: 7px 12px;
    font-size: var(--text-sm);
    color: #fcd34d;
    background: var(--tint-yellow);
    border: 1px solid rgba(251, 191, 36, 0.5);
    border-radius: var(--radius-md);
}
.eng-sys .eng-suggestion strong { color: var(--accent-yellow); }
.eng-sys .eng-auto-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-size: var(--text-sm);
    color: var(--text-primary);
    cursor: pointer;
}
.eng-sys .eng-auto-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: 0;
    padding: 0;
    accent-color: var(--accent-cyan);
}

.eng-sys .eng-transfers {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.eng-sys .eng-transfer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    font-size: var(--text-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}
.eng-sys .eng-transfer-name { flex: 1; min-width: 0; }
.eng-sys .eng-transfer-balance { white-space: nowrap; color: var(--text-muted); }

/* Systemmeldungen */
.eng-sys .eng-alerts { gap: 8px; }
.eng-sys .eng-empty { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.eng-sys .eng-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    text-align: left;
    font-family: var(--font-mono);
    color: var(--text-primary);
    background: var(--tint-yellow);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-yellow);
    border-radius: var(--radius-sm);
}
.eng-sys .eng-alert[data-tone="danger"] { background: var(--tint-red);  border-left-color: var(--accent-red); }
.eng-sys .eng-alert[data-tone="info"]   { background: var(--tint-blue); border-left-color: var(--accent-blue); }
.eng-sys .eng-alert-link { cursor: pointer; width: 100%; min-height: 0; }
.eng-sys .eng-alert-link:hover { border-color: var(--text-muted); }
.eng-sys .eng-alert-code {
    flex: none;
    padding-top: 2px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    color: var(--accent-yellow);
}
.eng-sys .eng-alert[data-tone="danger"] .eng-alert-code { color: var(--accent-red); }
.eng-sys .eng-alert[data-tone="info"]   .eng-alert-code { color: var(--accent-blue); }
.eng-sys .eng-alert-msg { font-size: var(--text-sm); }

/* ── Phone-Leiste (nur schmal sichtbar) ───────────────────────── */
.eng-sys .eng-tabs { display: none; }
/*
  Unter 1024 px liegen Status- und Task-Reiter als Dock am unteren Rand
  (responsive-v2.css, --dock-h). Die Leiste klebt direkt darüber statt darunter.
*/
@media (max-width: 1023px) {
    #engineering-systems-panel {
        --eng-tabs-bottom: calc(var(--dock-h, 44px) + env(safe-area-inset-bottom, 0px));
    }
}

/* ═══ Tablet: Bilanz oben über die volle Breite, darunter Bereiche | Cluster ═══ */
@container eng-sys (max-width: 1023px) {
    .eng-sys .eng-layout {
        grid-template-columns: 280px minmax(0, 1fr);
        grid-template-areas: "side side" "nav main";
    }
    .eng-sys .eng-side {
        position: static;
        border-left: none;
        border-bottom: 1px solid var(--border-color);
    }
    /* Meldungen nur, wenn es welche gibt — sonst nimmt „Alle Systeme nominal" eine ganze Zeile */
    .eng-sys:not([data-has-alerts="true"]) .eng-alerts { display: none; }
}

/* ═══ Phone: drei Ansichten (Verteilung / Bilanz / Meldungen) ═══ */
@container eng-sys (max-width: 599px) {
    .eng-sys .eng-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "nav" "main" "side";
    }

    /* Bereiche als horizontale Chip-Leiste */
    .eng-sys .eng-nav {
        position: sticky;
        top: 0;
        z-index: 2;
        max-height: none;
        flex-direction: row;
        gap: 8px;
        padding: 10px var(--space-md);
        overflow-x: auto;
        overflow-y: hidden;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
    .eng-sys .eng-nav-title,
    .eng-sys .eng-nav-label,
    .eng-sys .eng-nav-fill { display: none; }
    .eng-sys .eng-nav-short { display: inline; }
    .eng-sys .eng-nav-item {
        flex: none;
        min-height: 44px;
        justify-content: center;
        padding: 6px 12px;
        font-size: var(--text-sm);
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
    }
    .eng-sys .eng-nav-row { gap: 8px; width: auto; }
    .eng-sys .eng-nav-item[data-tone="danger"] { border-color: var(--accent-red); }
    .eng-sys .eng-nav-item.is-active {
        background: var(--tint-yellow);
        border-color: var(--accent-yellow);
    }
    .eng-sys .eng-cat-head { top: 65px; }

    .eng-sys .eng-side { border-bottom: none; }
    .eng-sys:not([data-has-alerts="true"]) .eng-alerts { display: flex; }

    /* Ansicht „Verteilung" (Standard) */
    .eng-sys:not([data-eng-view="bilanz"]):not([data-eng-view="meldungen"]) .eng-side { display: none; }
    /* Ansicht „Bilanz" */
    .eng-sys[data-eng-view="bilanz"] .eng-nav,
    .eng-sys[data-eng-view="bilanz"] .eng-main,
    .eng-sys[data-eng-view="bilanz"] [data-eng-view-part="meldungen"] { display: none; }
    /* Ansicht „Meldungen" */
    .eng-sys[data-eng-view="meldungen"] .eng-nav,
    .eng-sys[data-eng-view="meldungen"] .eng-main,
    .eng-sys[data-eng-view="meldungen"] [data-eng-view-part="bilanz"] { display: none; }

    .eng-sys .eng-tabs {
        position: sticky;
        bottom: var(--eng-tabs-bottom, 0px);
        z-index: 3;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        background: var(--bg-secondary);
        border-top: 1px solid var(--border-color);
    }
    .eng-sys .eng-tab {
        min-height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        font-weight: 700;
        letter-spacing: var(--tracking-label);
        text-transform: uppercase;
        color: var(--text-muted);
        background: transparent;
        border: none;
        border-top: 2px solid transparent;
        border-radius: 0;
        cursor: pointer;
    }
    .eng-sys .eng-tab.is-active {
        color: var(--accent-yellow);
        border-top-color: var(--accent-yellow);
    }
    .eng-sys .eng-tab-count {
        min-width: 18px;
        padding: 1px 5px;
        border-radius: 9px;
        font-size: 0.65rem;
        color: #0a0e17;
        background: var(--accent-yellow);
    }
    .eng-sys .eng-tab-count[data-tone="danger"] { background: var(--accent-red); }
}