/* Electronic Warfare (/station/ew) — Bausteine aus sos-components.css.
   Desktop ab 1280 px drei Spalten (Abhören | Störsender + Lenkwaffen | Lage), Tablet 760–1279 px zwei,
   Smartphone Reiter (data-tab am .ew-board). Ab 1600 px breiter und bis an den unteren Rand. */

.ew-board { display: grid; gap: var(--space-md, 12px); --ew-accent: #7dd3fc; --ew-hot: #f59e0b; --ew-ok: #4ade80; --ew-bad: #f87171; }

/* Lageleiste */
.ew-bar.sos-panel { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 10px 14px; }
.ew-bar__item { display: flex; flex-direction: column; gap: 2px; min-width: 7rem; }
.ew-bar__item--wide { flex: 1; min-width: 14rem; }
.ew-bar__label { color: var(--text-muted, #8b93a1); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; }
.ew-bar__value { font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.ew-bar__scan { align-self: center; }
.ew-bar__msg { flex-basis: 100%; margin: 0; min-height: 1.2em; color: var(--ew-accent); font-size: 0.85rem; }
.ew-warn { color: var(--ew-bad); }
.ew-hint { color: var(--text-muted, #8b93a1); font-size: 0.78rem; }
.ew-error { color: var(--ew-bad); margin: 0; }
.ew-empty { color: var(--text-muted, #8b93a1); font-size: 0.85rem; list-style: none; }

.ew-meter { display: block; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.ew-meter > span { display: block; height: 100%; width: 0; background: var(--ew-ok); transition: width 0.4s linear, background 0.3s; }
.ew-meter[data-level="mid"] > span { background: var(--ew-hot); }
.ew-meter[data-level="loud"] > span { background: var(--ew-bad); }
.ew-meter--effect > span { background: var(--ew-accent); }
.ew-meter--progress > span { background: var(--ew-hot); }

/* Raster */
.ew-tabs { display: none; }
.ew-grid { display: grid; gap: var(--space-md, 12px); grid-template-columns: minmax(0, 1fr); }
.ew-col { display: grid; gap: var(--space-md, 12px); align-content: start; min-width: 0; }
@media (min-width: 760px) and (max-width: 1279px) {
  .ew-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ew-col--lage { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}
@media (min-width: 1280px) {
  .ew-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 0.8fr); }
}
@media (max-width: 759px) {
  .ew-tabs { display: flex; gap: 4px; position: sticky; top: var(--alert-bar-h, 0px); z-index: 5; background: var(--bg-primary, #0b0f17); padding: 4px 0; }
  .ew-tabs button { flex: 1; padding: 8px 4px; border: 1px solid rgba(159,194,255,0.2); background: transparent; color: inherit; border-radius: 6px; }
  .ew-tabs button[aria-selected="true"] { border-color: var(--ew-accent); color: var(--ew-accent); }
  .ew-board[data-tab="esm"] .ew-col:not([data-col="esm"]),
  .ew-board[data-tab="emitters"] .ew-col:not([data-col="emitters"]),
  .ew-board[data-tab="lage"] .ew-col:not([data-col="lage"]) { display: none; }
}

/* Abhören */
.ew-esm { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.ew-esm__row { border: 1px solid rgba(159,194,255,0.14); border-left-width: 3px; border-radius: 6px; padding: 6px 8px; display: grid; gap: 4px; background: rgba(10,14,24,0.6); }
.ew-esm__row[data-kind="FIRE_CONTROL"] { border-left-color: var(--ew-bad); }
.ew-esm__row[data-kind="JAMMER"] { border-left-color: #c084fc; }
.ew-esm__row[data-kind="SEARCH"] { border-left-color: var(--ew-hot); }
.ew-esm__head { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.ew-kind { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted, #8b93a1); min-width: 6.5rem; }
.ew-esm__row[data-kind="FIRE_CONTROL"] .ew-kind { color: var(--ew-bad); }
.ew-esm__row[data-kind="JAMMER"] .ew-kind { color: #c084fc; }
.ew-esm__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ew-esm__pos { font-variant-numeric: tabular-nums; color: var(--text-secondary, #cfd6e4); font-size: 0.82rem; white-space: nowrap; }
.ew-esm__facts { display: flex; flex-wrap: wrap; gap: 4px; }
.ew-chip { font-size: 0.72rem; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(159,194,255,0.25); color: var(--text-secondary, #cfd6e4); font-variant-numeric: tabular-nums; }
.ew-chip--ch { color: var(--ew-accent); border-color: var(--ew-accent); }
.ew-chip--warn { color: var(--ew-bad); border-color: var(--ew-bad); }
.ew-chip--ok { color: var(--ew-ok); border-color: rgba(74,222,128,0.6); }
.ew-esm__actions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ew-select { background: transparent; color: inherit; border: 1px solid rgba(159,194,255,0.25); border-radius: 4px; padding: 2px 4px; font-size: 0.78rem; }

/* Störsender */
.ew-emitters { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 34rem) { .ew-emitters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ew-col--emitters .sos-panel__body { container-type: inline-size; }
.ew-emitter { border: 1px solid rgba(159,194,255,0.18); border-radius: 8px; padding: 8px 10px; background: rgba(10,14,24,0.7); display: grid; gap: 6px; cursor: pointer; }
.ew-emitter--selected { outline: 2px solid var(--ew-accent); outline-offset: 1px; }
.ew-emitter[data-state="working"] { border-color: rgba(125,211,252,0.6); }
.ew-emitter[data-state="blocked"] { border-color: rgba(245,158,11,0.6); }
.ew-emitter[data-state="destroyed"] { opacity: 0.55; border-color: var(--ew-bad); }
.ew-emitter__head { display: flex; gap: 8px; align-items: center; }
.ew-emitter__id { font-family: var(--font-mono, monospace); color: var(--ew-accent); min-width: 3rem; }
.ew-emitter__label { flex: 1; min-width: 0; font-size: 0.82rem; color: var(--text-secondary, #cfd6e4); }
.ew-pill { font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; color: var(--text-muted, #8b93a1); }
.ew-emitter[data-state="working"] .ew-pill { color: var(--ew-accent); }
.ew-emitter[data-state="blocked"] .ew-pill { color: var(--ew-hot); }
.ew-emitter[data-state="destroyed"] .ew-pill { color: var(--ew-bad); }
.ew-emitter__body { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: center; }
.ew-emitter__task { font-size: 0.85rem; }
.ew-emitter__status { font-size: 0.78rem; color: var(--text-secondary, #cfd6e4); }
.ew-emitter__foot { display: flex; justify-content: flex-end; }
.ew-arc { width: 72px; height: 72px; display: block; }
.ew-arc__ring { fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 1; }
.ew-arc__field { fill: rgba(125,211,252,0.28); stroke: rgba(125,211,252,0.5); stroke-width: 0.8; }
.ew-arc__ship { fill: rgba(207,214,228,0.7); }
.ew-arc__target { fill: var(--ew-hot); }
.ew-arc__target--out { fill: var(--ew-bad); }
.ew-channels { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
.ew-ch { padding: 4px 0; font-family: var(--font-mono, monospace); font-size: 0.8rem; background: transparent; color: var(--text-secondary, #cfd6e4);
  border: 1px solid rgba(159,194,255,0.2); border-radius: 4px; cursor: pointer; }
.ew-ch--heard { border-color: var(--ew-hot); color: var(--ew-hot); box-shadow: 0 0 6px rgba(245,158,11,0.35); }
.ew-ch--set { background: rgba(125,211,252,0.18); border-color: var(--ew-accent); color: var(--ew-accent); }
.ew-ch--set.ew-ch--heard { background: rgba(74,222,128,0.2); border-color: var(--ew-ok); color: var(--ew-ok); box-shadow: none; }

/* Lenkwaffen */
.ew-threats { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ew-threat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; border: 1px solid rgba(248,113,113,0.4); border-radius: 6px; padding: 6px 8px; }
.ew-threat[data-state="FOOLED"] { border-color: rgba(74,222,128,0.6); }
.ew-threat[data-state="COPYING"] { border-color: rgba(245,158,11,0.6); }
.ew-threat__name { font-size: 0.85rem; }
.ew-threat__eta { font-variant-numeric: tabular-nums; font-size: 0.82rem; color: var(--ew-bad); text-align: right; }
.ew-threat__state { font-size: 0.76rem; color: var(--text-secondary, #cfd6e4); }
.ew-threat button { justify-self: end; }

/* Lage */
.ew-incoming p { margin: 0 0 6px; }
.ew-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.8rem; color: var(--text-secondary, #cfd6e4); }
.ew-log li:first-child { color: var(--ew-accent); }

/* Breite Bildschirme: bis 2800 px, Spalten bis an den unteren Rand, lange Listen rollen in sich. */
@media (min-width: 1600px) {
  .station-main:has(.ew-board) { max-width: min(2800px, 100%); display: flex; flex-direction: column; }
  .ew-board { flex: 1 0 auto; grid-template-rows: auto auto 1fr; }
  .ew-grid { flex: 1 0 auto; }
  .ew-col--esm .sos-panel__body { max-height: calc(100vh - 260px); overflow-y: auto; }
  .ew-col--emitters, .ew-col--lage { grid-auto-rows: min-content; }
  .ew-col--lage .ew-log-panel { flex: 1; }
}
@media (min-width: 1800px) {
  .ew-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.8fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ew-meter > span { transition: none; }
}