/*
 * StarshipOS — CIWS-Crew-Station (Nahbereichsabwehr)
 * Baut auf tactical.css auf (Layout, Radar-Grundlagen, Badges, Balken).
 * Sektortoene: auto = abwehrbereit, low = Munition knapp, empty = leer,
 * hold = abgeschaltet, exposed = Bedrohung im Bogen ohne Abwehr.
 */

.ciws-station {
    --ciws-auto: var(--accent-green, #34d399);
    --ciws-low: var(--accent-yellow, #fbbf24);
    --ciws-hold: var(--text-dim, #5b6980);
    --ciws-exposed: var(--accent-red, #f87171);
    --ciws-threat: #fb923c;
}

/* ── Radar ──────────────────────────────────────────────────── */
.ciws-scope { max-width: 520px; }
.ciws-arc { stroke: var(--scope-bg); stroke-width: 2; opacity: 0.2; transition: fill 300ms ease, opacity 300ms ease; }
.ciws-arc.tone-auto    { fill: var(--ciws-auto); }
.ciws-arc.tone-low     { fill: var(--ciws-low); }
.ciws-arc.tone-empty   { fill: var(--ciws-exposed); opacity: 0.12; }
.ciws-arc.tone-hold    { fill: var(--ciws-hold); opacity: 0.12; }
.ciws-arc.tone-exposed { fill: var(--ciws-exposed); opacity: 0.35; animation: ciws-pulse 1s ease-in-out infinite alternate; }
.ciws-arc.is-engaging  { opacity: 0.45; }
@keyframes ciws-pulse { from { opacity: 0.2; } to { opacity: 0.45; } }

.ciws-envelope { stroke: var(--ciws-auto) !important; stroke-dasharray: 5 4; opacity: 0.7; }

.ciws-sector-labels text {
    font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    text-anchor: middle; dominant-baseline: middle; fill: var(--ciws-auto);
    paint-order: stroke; stroke: var(--scope-bg); stroke-width: 3px;
}
.ciws-sector-labels text.tone-low { fill: var(--ciws-low); }
.ciws-sector-labels text.tone-hold { fill: var(--text-muted, #8c9bb3); }
.ciws-sector-labels text.tone-empty,
.ciws-sector-labels text.tone-exposed { fill: var(--ciws-exposed); }

.ciws-threat polygon { fill: var(--ciws-threat); stroke: #fff; stroke-width: 1; }
.ciws-threat text { font-size: 12px; font-weight: 600; fill: var(--ciws-threat); paint-order: stroke; stroke: var(--scope-bg); stroke-width: 3px; }
.ciws-threat-vector { stroke: var(--ciws-threat); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.5; }
.ciws-threat.uncovered polygon { fill: var(--ciws-exposed); }
.ciws-threat.uncovered text { fill: var(--ciws-exposed); }
.ciws-threat.in-envelope polygon { animation: ciws-blink 0.5s steps(2) infinite; }
@keyframes ciws-blink { 50% { opacity: 0.35; } }

.ciws-swatch { width: 12px; height: 8px; border-radius: 2px; }
.ciws-swatch.tone-auto { background: var(--ciws-auto); }
.ciws-swatch.tone-hold { background: var(--ciws-hold); }
.ciws-swatch.tone-exposed { background: var(--ciws-exposed); }

/* ── Bedrohungsliste ────────────────────────────────────────── */
.ciws-threat-panel.has-threats { border-left: 3px solid var(--ciws-threat); }
.ciws-threats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ciws-threats li {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "type where eta" "type verdict eta";
    gap: 0 12px; align-items: center; padding: 8px 12px; border-radius: var(--radius-md, 6px);
    background: var(--well); border-left: 3px solid var(--ciws-auto);
}
.ciws-threats li.is-uncovered { border-left-color: var(--ciws-exposed); background: var(--tint-red, rgba(248,113,113,.16)); }
.ciws-threat-type { grid-area: type; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ciws-threat); }
.ciws-threat-where { grid-area: where; font-family: var(--font-mono, monospace); font-size: var(--text-sm, 0.8125rem); color: var(--text-secondary, #a7b3c7); }
.ciws-threat-verdict { grid-area: verdict; font-size: var(--text-xs, 0.75rem); color: var(--ciws-auto); }
.ciws-threats li.is-uncovered .ciws-threat-verdict { color: var(--ciws-exposed); font-weight: 700; }
.ciws-threat-eta { grid-area: eta; font-family: var(--font-mono, monospace); font-size: 1.25rem; font-variant-numeric: tabular-nums; }

/* ── Sektoren ───────────────────────────────────────────────── */
.ciws-all { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-md, 16px); }
.ciws-all .tac-mini-label { margin-right: auto; }
.ciws-sectors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ciws-sector {
    display: flex; flex-direction: column; gap: 10px; padding: 12px;
    background: var(--bg-secondary, #141c28); border: 1px solid var(--border-color, #2a3648);
    border-left: 3px solid var(--ciws-auto); border-radius: var(--radius-lg, 8px);
}
.ciws-sector.tone-low { border-left-color: var(--ciws-low); }
.ciws-sector.tone-hold { border-left-color: var(--ciws-hold); }
.ciws-sector.tone-empty, .ciws-sector.tone-exposed { border-left-color: var(--ciws-exposed); }
.ciws-sector.tone-exposed { box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.5); }
.ciws-sector-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ciws-sector-head h3 { margin: 0 auto 0 0; font-size: var(--text-md, 0.9375rem); text-transform: uppercase; letter-spacing: 0.06em; }
.ciws-firing { font-size: var(--text-xs, 0.75rem); font-weight: 700; color: var(--ciws-threat); text-transform: uppercase; animation: ciws-blink 0.5s steps(2) infinite; }
.ciws-arc-count { font-size: var(--text-xs, 0.75rem); color: var(--ciws-threat); }
.ciws-mode { width: 100%; }
.ciws-mode .sos-seg { flex: 1; }
.ciws-mode .sos-seg.is-active { background: var(--ciws-auto); }
.ciws-mode .sos-seg.is-active.is-hold { background: var(--text-muted, #8c9bb3); }
.ciws-ammo .tac-gauge-track i { background: var(--ciws-auto); }
.ciws-sector.tone-low .ciws-ammo .tac-gauge-track i { background: var(--ciws-low); }
.ciws-sector.tone-empty .ciws-ammo .tac-gauge-track i { background: var(--ciws-exposed); }
.ciws-sector-note { margin: -4px 0 0; font-size: var(--text-xs, 0.75rem); color: var(--text-muted, #8c9bb3); }
.ciws-reload { width: 100%; }
.ciws-hint { margin: var(--space-md, 16px) 0 0; font-size: var(--text-sm, 0.8125rem); color: var(--text-secondary, #a7b3c7); }

/* ── Protokoll ──────────────────────────────────────────────── */
.ciws-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.ciws-log li { display: flex; gap: 10px; font-size: var(--text-sm, 0.8125rem); padding: 4px 8px; border-left: 3px solid var(--ciws-hold); }
.ciws-log li span:first-child { font-family: var(--font-mono, monospace); min-width: 9ch; color: var(--text-muted, #8c9bb3); }
.ciws-log li.outcome-intercepted { border-left-color: var(--ciws-auto); color: #6ee7b7; }
.ciws-log li.outcome-leaked, .ciws-log li.outcome-no_ammo { border-left-color: var(--ciws-exposed); color: #fca5a5; }
.ciws-log li.outcome-hold, .ciws-log li.outcome-no_sector { color: var(--text-muted, #8c9bb3); }

/* ── Breit (ab 1600 px, Full HD, 4K skaliert) ─────────────────
   Die rechte Seite wird zweispaltig: Sektoren links, Anflug und Protokoll rechts daneben
   statt alles untereinander. Die Seite darf breiter werden als die übliche Stationsbreite
   (1400 px), wie die Reaktorkontrolle, und füllt die Bildschirmhöhe: Radar und Panels reichen
   bis an den unteren Rand (Abstand dort = Innenabstand von .station-main). Meldungen stehen
   über beiden Spalten. Ist der Inhalt höher als der Bildschirm, wächst die Seite wie bisher. */
@media (min-width: 1600px) {
    .station-main:has(.ciws-station) { max-width: min(2800px, 100%); display: flex; flex-direction: column; }
    .ciws-station.tac-layout {
        flex: 1 0 auto;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
        align-items: stretch;
    }
    .ciws-station .tac-scope-area { position: static; }
    .ciws-station .tac-scope-area > .station-panel { flex: 1 0 auto; }
    .ciws-station .tac-scope-body { flex: 1 0 auto; justify-content: center; }
    /* Sektorbeschriftung „STEUERBORD · HOLD“ ragt über den Radarrand hinaus — nicht abschneiden. */
    .ciws-scope { overflow: visible; }
    .ciws-station .tac-side-area {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        /* Anflug so hoch wie nötig, das Protokoll nimmt den Rest (ohne Meldung oben). */
        grid-template-rows: auto 1fr;
        grid-auto-flow: row dense;
        align-content: stretch;
        gap: var(--space-lg, 24px);
    }
    .ciws-station .tac-side-area > .tac-msg { grid-column: 1 / -1; }
    .ciws-station .tac-side-area > .ciws-threat-panel,
    .ciws-station .tac-side-area > .station-panel:last-child { grid-column: 2; }
    .ciws-station .tac-side-area > .station-panel:has(.ciws-sectors) { grid-column: 1; grid-row: span 2; }
    .ciws-station .tac-side-area > .station-panel > .panel-section { flex: 1 0 auto; }
    /* Protokoll (bis 25 Einträge) rollt in sich, so hoch wie die Spalte unter dem Anflug Platz lässt. */
    .ciws-log { max-height: max(260px, calc(100vh - 480px)); }
}

@media (max-width: 640px) {
    .ciws-sectors { grid-template-columns: minmax(0, 1fr); }
}