/*
 * StarshipOS — Verteidigung · Schilde (CC_040)
 * Schildstatus-Ring, Energie-Verteilung und Modulation.
 *
 * Sektorfarben (Verteilungsbalken/Punkte) sind Identität, Ladungstöne
 * (full/charging/low/offline) sind Signal — beides getrennt halten.
 */

.shield-station {
    --sector-fore: var(--accent-cyan, #22d3ee);
    --sector-starboard: var(--accent-green, #34d399);
    --sector-aft: var(--accent-violet, #c4b5fd);
    --sector-port: var(--accent-red, #f87171);
    --tone-full: var(--accent-cyan, #22d3ee);
    --tone-charging: var(--accent-yellow, #fbbf24);
    --tone-low: var(--accent-red, #f87171);
    --tone-offline: var(--text-dim, #5b6980);
    --well: var(--bg-primary, #080b12);
}

/* ── Layout ─────────────────────────────────────────────────── */
.defense-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
    gap: var(--space-lg, 24px);
    align-items: start;
}
.defense-shield-area { min-width: 0; position: sticky; top: var(--space-md, 16px); }
.defense-controls-area { display: flex; flex-direction: column; gap: var(--space-lg, 24px); min-width: 0; }

@media (max-width: 900px) {
    .defense-layout { grid-template-columns: minmax(0, 1fr); }
    .defense-shield-area { position: static; }
}

/* Breit (ab 1600 px, Full HD, 4K skaliert): drei Spalten — Schildstatus | Energie-Verteilung |
   Modulation — statt die Modulation unter die Verteilung zu stapeln. Die Seite darf dafür breiter
   werden als die übliche Stationsbreite (1400 px), wie die Reaktorkontrolle. Das Raster füllt die
   Bildschirmhöhe, das Panel jeder Spalte reicht bis an den unteren Rand (Abstand dort = Innenabstand
   von .station-main). Ist der Inhalt höher als der Bildschirm, wächst die Seite wie bisher. */
@media (min-width: 1600px) {
    .station-main:has(.shield-station) { max-width: min(2800px, 100%); display: flex; flex-direction: column; }
    .defense-layout {
        flex: 1 0 auto;
        grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr) minmax(320px, 1fr);
        align-items: stretch;
    }
    .defense-controls-area { display: contents; }
    .defense-shield-area { position: static; display: flex; flex-direction: column; }
    .defense-shield-area > .station-panel,
    .defense-controls-area > .station-panel { flex: 1 0 auto; }
    .shield-station .station-panel > .panel-section:last-child,
    .shield-station .shield-status-body { flex: 1 0 auto; }
    .shield-status-body { justify-content: center; }
    .shield-view { max-width: 520px; }
}

/* ── Schildstatus ───────────────────────────────────────────── */
.shield-status-body { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm, 8px); }
.shield-view { width: 100%; max-width: 440px; display: block; overflow: visible; }

.shield-ring-guide { fill: none; stroke: var(--border-color, #2a3648); stroke-width: 1; stroke-dasharray: 2 6; }

.shield-sector path { fill: none; stroke-linecap: butt; transition: stroke-width 400ms ease, stroke-dasharray 400ms ease, stroke-dashoffset 400ms ease; }
.shield-track { stroke: var(--tone-offline); opacity: 0.35; }
.shield-sector.tone-offline .shield-track { opacity: 0.5; stroke-dasharray: 3 3; }
.shield-sector.tone-full .shield-charge     { stroke: var(--tone-full); }
.shield-sector.tone-charging .shield-charge { stroke: var(--tone-charging); }
.shield-sector.tone-low .shield-charge      { stroke: var(--tone-low); }
.shield-sector .shield-charge { filter: drop-shadow(0 0 4px currentColor); }
.shield-sector.tone-full .shield-charge { color: var(--tone-full); }
.shield-sector.tone-charging .shield-charge { color: var(--tone-charging); }
.shield-sector.tone-low .shield-charge { color: var(--tone-low); }

.shield-sector.is-hit .shield-charge,
.shield-sector.is-hit .shield-track { animation: shield-hit 0.9s ease-out; }
@keyframes shield-hit {
    0%   { stroke: #fff; opacity: 1; }
    100% { opacity: 1; }
}

.ship-silhouette { fill: var(--bg-secondary, #141c28); stroke: var(--text-muted, #8c9bb3); stroke-width: 1.5; stroke-linejoin: round; }
.ship-keel { stroke: var(--border-color, #2a3648); stroke-width: 1; }
.ship-bridge { fill: var(--accent-cyan, #22d3ee); }

.shield-label text { text-anchor: middle; font-family: var(--font-mono, monospace); }
.shield-label-name { font-size: 12px; letter-spacing: 0.14em; fill: var(--text-muted, #8c9bb3); }
.shield-label-value { font-size: 17px; font-weight: 600; fill: var(--text-primary, #e0e7ff); font-variant-numeric: tabular-nums; }
.shield-label.tone-charging .shield-label-value { fill: var(--tone-charging); }
.shield-label.tone-low .shield-label-value { fill: var(--tone-low); }
.shield-label.tone-offline .shield-label-value { fill: var(--tone-offline); }
.shield-label-heat { font-size: 12px; font-weight: 600; fill: var(--tone-charging); font-variant-numeric: tabular-nums; }
.shield-label-heat.heat-hot { fill: var(--tone-low); }

.shield-legend {
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs, 4px) var(--space-md, 16px);
    margin: 0; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted, #8c9bb3);
}
.legend-swatch { display: inline-block; vertical-align: middle; margin-right: 6px; background: var(--tone-full); }
.legend-width { width: 14px; height: 8px; }
.legend-fill { width: 14px; height: 4px; box-shadow: 8px 0 0 -0px var(--tone-offline); margin-right: 14px; }

.shield-error {
    align-self: stretch; margin: 0; padding: var(--space-sm, 8px) var(--space-md, 16px);
    border-left: 3px solid var(--accent-red, #f87171); background: var(--tint-red, rgba(248,113,113,.16));
    color: var(--accent-red, #f87171); font-size: 0.85rem;
}

.shield-metrics {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md, 16px);
    padding: 0 var(--space-sm, 8px);
}
.shield-metric { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shield-station .metric-label {
    font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted, #8c9bb3);
}
.shield-station .metric-value {
    font-family: var(--font-mono, monospace); font-size: 1.1rem; font-weight: 600;
    color: var(--text-primary, #e0e7ff); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── Energie-Verteilung ─────────────────────────────────────── */
.allocation-form { display: flex; flex-direction: column; gap: var(--space-md, 16px); }

.alloc-bar {
    display: flex; height: 10px; background: var(--well); border: 1px solid var(--border-color, #2a3648);
    border-radius: var(--radius-xs, 3px); overflow: hidden;
}
.alloc-bar-seg { display: block; height: 100%; transition: width 150ms ease; }
.alloc-bar-seg + .alloc-bar-seg { box-shadow: -1px 0 0 var(--well); }
.seg-fore { background: var(--sector-fore); }
.seg-starboard { background: var(--sector-starboard); }
.seg-aft { background: var(--sector-aft); }
.seg-port { background: var(--sector-port); }

.alloc-summary {
    display: flex; justify-content: space-between; margin: calc(-1 * var(--space-sm, 8px)) 0 0;
    font-family: var(--font-mono, monospace); font-size: 0.8rem; color: var(--text-muted, #8c9bb3);
}
.alloc-summary output { color: var(--text-primary, #e0e7ff); font-weight: 600; }

.alloc-row {
    display: flex; flex-direction: column; gap: var(--space-xs, 6px);
    padding: var(--space-sm, 8px) 0; border-top: 1px solid var(--border-color, #2a3648);
}
.alloc-head { display: flex; align-items: center; gap: var(--space-sm, 8px); }
.alloc-name {
    display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
    font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.85rem;
}
.alloc-name small { color: var(--text-dim, #5b6980); font-weight: 400; font-size: 0.68rem; letter-spacing: 0.1em; }
.alloc-dot { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.alloc-value {
    min-width: 3ch; text-align: right; font-family: var(--font-mono, monospace);
    font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.alloc-row.is-changed .alloc-value { color: var(--accent-yellow, #fbbf24); }
.alloc-row.is-changed .alloc-value::after { content: '*'; }
.alloc-row.is-off .alloc-name span { color: var(--text-dim, #5b6980); text-decoration: line-through; }

.shield-station .btn-toggle {
    flex: none; min-width: 7.5rem; min-height: 32px;
    background: transparent; border: 1px solid var(--border-color, #2a3648); color: var(--text-muted, #8c9bb3);
    border-radius: var(--radius-sm, 4px); font-family: inherit; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.shield-station .btn-toggle:hover { border-color: var(--accent-red, #f87171); color: var(--accent-red, #f87171); background: var(--tint-red, rgba(248,113,113,.16)); }
.alloc-row.is-off .btn-toggle { border-color: var(--accent-green, #34d399); color: var(--accent-green, #34d399); }
.alloc-row.is-off .btn-toggle:hover { background: var(--tint-green, rgba(52,211,153,.14)); }

/* Regler: Füllung in Sektorfarbe (JS setzt --fill) */
.alloc-slider {
    --fill: 25%; --c: var(--accent-cyan, #22d3ee);
    -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer;
}
.alloc-row[data-sector="fore"] .alloc-slider { --c: var(--sector-fore); }
.alloc-row[data-sector="starboard"] .alloc-slider { --c: var(--sector-starboard); }
.alloc-row[data-sector="aft"] .alloc-slider { --c: var(--sector-aft); }
.alloc-row[data-sector="port"] .alloc-slider { --c: var(--sector-port); }
.alloc-slider::-webkit-slider-runnable-track {
    height: 8px; border-radius: 2px; border: 1px solid var(--border-color, #2a3648);
    background: linear-gradient(90deg, var(--c) var(--fill), var(--well) var(--fill));
}
.alloc-slider::-moz-range-track { height: 8px; border-radius: 2px; border: 1px solid var(--border-color, #2a3648); background: var(--well); }
.alloc-slider::-moz-range-progress { height: 8px; background: var(--c); }
.alloc-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 14px; height: 24px; margin-top: -9px; border-radius: 2px;
    background: var(--text-primary, #e0e7ff); border: 2px solid var(--c);
}
.alloc-slider::-moz-range-thumb { width: 12px; height: 22px; border-radius: 2px; background: var(--text-primary, #e0e7ff); border: 2px solid var(--c); }
.alloc-slider:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }

.alloc-hint { margin: 0; font-size: 0.75rem; line-height: 1.5; color: var(--text-muted, #8c9bb3); }

.alloc-actions { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-sm, 8px); }
.alloc-actions .btn-action { min-height: 44px; }
.alloc-actions .btn-action:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }
.allocation-form.is-dirty .alloc-apply { animation: alloc-pending 1.6s ease-in-out infinite; }
@keyframes alloc-pending { 50% { box-shadow: 0 0 0 3px var(--tint-blue, rgba(96,165,250,.14)); } }

.preset-block { margin-top: var(--space-lg, 24px); padding-top: var(--space-md, 16px); border-top: 1px solid var(--border-color, #2a3648); }
.preset-title { margin: 0 0 var(--space-sm, 8px); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted, #8c9bb3); }
.preset-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--space-sm, 8px); }
.shield-station .btn-preset {
    min-height: 40px; padding: 0.4rem 0.6rem; font-family: inherit; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
    background: var(--bg-secondary, #141c28); color: var(--text-primary, #e0e7ff);
    border: 1px solid var(--border-color, #2a3648); border-radius: var(--radius-sm, 4px); cursor: pointer;
}
.shield-station .btn-preset:hover { border-color: var(--accent-cyan, #22d3ee); background: var(--tint-cyan, rgba(34,211,238,.14)); }

/* ── Modulation ─────────────────────────────────────────────── */
.modulation-panel { display: flex; flex-direction: column; gap: var(--space-lg, 24px); }
.modulation-readout { display: flex; flex-direction: column; gap: var(--space-sm, 8px); }

.modulation-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-sm, 8px); }
.modulation-freq { display: flex; flex-direction: column; gap: 2px; }
.modulation-freq-value { font-family: var(--font-mono, monospace); font-size: 1.6rem; font-weight: 600; color: var(--accent-cyan, #22d3ee); font-variant-numeric: tabular-nums; }
.modulation-lock { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
.modulation-lock.is-locked .modulation-lock-label { color: var(--accent-green, #34d399); }
.modulation-lock.is-locked .modulation-lock-label::before { content: '● '; }
.modulation-lock.is-recalibrating .modulation-lock-label { color: var(--accent-yellow, #fbbf24); }
.modulation-lock-hint { color: var(--accent-red, #f87171); text-transform: none; letter-spacing: 0; }
.modulation-progress { display: block; width: 160px; height: 4px; background: var(--well); border-radius: 2px; overflow: hidden; }
.modulation-progress i { display: block; height: 100%; background: var(--accent-yellow, #fbbf24); transition: width 900ms linear; }

.freq-band {
    position: relative; height: 44px; background: var(--well);
    border: 1px solid var(--border-color, #2a3648); border-radius: var(--radius-xs, 3px); overflow: hidden;
    background-image: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--border-color, #2a3648) calc(10% - 1px) 10%);
}
.freq-window { position: absolute; top: 0; bottom: 0; background: var(--tint-cyan, rgba(34,211,238,.14)); border-left: 1px dashed var(--accent-cyan, #22d3ee); border-right: 1px dashed var(--accent-cyan, #22d3ee); }
.freq-marker { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; }
.freq-shield { background: var(--accent-cyan, #22d3ee); box-shadow: 0 0 6px var(--accent-cyan, #22d3ee); }
.freq-pending { background: repeating-linear-gradient(180deg, var(--accent-yellow, #fbbf24) 0 4px, transparent 4px 8px); }
.freq-estimate { position: absolute; top: 8px; bottom: 8px; background: var(--tint-red, rgba(248,113,113,.16)); border: 1px solid var(--accent-red, #f87171); border-radius: 2px; }
.freq-sample { position: absolute; bottom: 0; width: 2px; height: 10px; margin-left: -1px; background: var(--accent-red, #f87171); opacity: 0.8; }
.freq-scale { display: flex; justify-content: space-between; font-family: var(--font-mono, monospace); font-size: 0.7rem; color: var(--text-dim, #5b6980); }

.threat-list { display: flex; flex-direction: column; gap: var(--space-sm, 8px); margin-top: var(--space-sm, 8px); }
.threat-empty { margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--text-muted, #8c9bb3); }
.threat-card {
    display: flex; flex-direction: column; gap: var(--space-sm, 8px); padding: var(--space-sm, 8px) var(--space-md, 16px);
    background: var(--bg-secondary, #141c28); border: 1px solid var(--border-color, #2a3648);
    border-left: 3px solid var(--text-dim, #5b6980); border-radius: var(--radius-sm, 4px);
}
.threat-card.tone-good { border-left-color: var(--accent-green, #34d399); }
.threat-card.tone-fair { border-left-color: var(--accent-yellow, #fbbf24); }
.threat-card.tone-bad  { border-left-color: var(--accent-red, #f87171); }
.threat-head { display: flex; justify-content: space-between; gap: var(--space-sm, 8px); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }
.threat-name { font-weight: 600; color: var(--accent-red, #f87171); }
.threat-hits { color: var(--text-muted, #8c9bb3); }
.threat-adapted {
    margin: 0; padding: 4px 8px; font-size: 0.75rem; color: var(--accent-yellow, #fbbf24);
    background: var(--tint-yellow, rgba(251,191,36,.14)); animation: alloc-pending 1s step-end infinite;
}
.threat-data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--space-md, 16px); margin: 0; }
.threat-data dt { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted, #8c9bb3); }
.threat-data dd { margin: 0; font-family: var(--font-mono, monospace); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.threat-card.tone-good .threat-factor { color: var(--accent-green, #34d399); }
.threat-card.tone-fair .threat-factor { color: var(--accent-yellow, #fbbf24); }
.threat-card.tone-bad .threat-factor  { color: var(--accent-red, #f87171); }
.shield-station .threat-use-estimate {
    align-self: flex-start; min-height: 32px; background: transparent; cursor: pointer; font-family: inherit;
    border: 1px solid var(--accent-cyan, #22d3ee); color: var(--accent-cyan, #22d3ee); border-radius: var(--radius-sm, 4px);
    letter-spacing: 0.06em; text-transform: uppercase;
}
.shield-station .threat-use-estimate:hover { background: var(--tint-cyan, rgba(34,211,238,.14)); }

.modulation-form { display: flex; flex-direction: column; gap: var(--space-sm, 8px); padding-top: var(--space-md, 16px); border-top: 1px solid var(--border-color, #2a3648); }
.modulation-range { width: 100%; accent-color: var(--accent-yellow, #fbbf24); height: 28px; }
.modulation-input-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; gap: 6px; }
.modulation-input-row .btn-sm {
    min-width: 44px; min-height: 40px; background: var(--bg-secondary, #141c28); color: var(--text-primary, #e0e7ff);
    border: 1px solid var(--border-color, #2a3648); border-radius: var(--radius-sm, 4px); font-family: var(--font-mono, monospace); cursor: pointer;
}
.modulation-input-row .btn-sm:hover { border-color: var(--accent-yellow, #fbbf24); }
.modulation-number {
    min-width: 0; text-align: center; font-family: var(--font-mono, monospace); font-size: 1.2rem; font-weight: 600;
    background: var(--well); color: var(--text-primary, #e0e7ff); border: 1px solid var(--border-color, #2a3648); border-radius: var(--radius-sm, 4px);
}
.modulation-number:focus-visible { outline: 2px solid var(--accent-yellow, #fbbf24); outline-offset: 1px; }
.modulation-eta { margin: 0; font-size: 0.78rem; color: var(--text-muted, #8c9bb3); }
.modulation-eta.is-pending { color: var(--accent-yellow, #fbbf24); }
.modulation-form .btn-action { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
    .shield-sector path, .alloc-bar-seg, .modulation-progress i { transition: none; }
    .shield-sector.is-hit .shield-charge, .shield-sector.is-hit .shield-track,
    .allocation-form.is-dirty .alloc-apply, .threat-adapted { animation: none; }
}