/* ==========================================================================
   Strategie-Shell (017C) — Sci-Fi-Kellerbasis.
   Bewusst NUR unter #scene-base gescoped, damit Menue/Taktik unberuehrt bleiben.
   Palette: Graphit-Hintergrund, Cyan-Linien, Amber-Warnung, Rot = nur Fehler.
   ========================================================================== */

#scene-base.shell {
  /* Design-Tokens lokal umdefinieren -> alle Bestands-Panels erben die Sci-Fi-Optik */
  --bg-2:  #0e151c;
  --bg-3:  #13212b;
  --line:  #1d3543;
  --gold:  #39d0ff;   /* Akzent = Cyan */
  --text:  #cfe6f2;
  --text-dim: #8299a8;
  --text-off: #5b7180;
  --warn:  #ffb020;
  --bad:   #ff4d4d;   /* nur Fehler */
  --info:  #39d0ff;
  --ok:    #48d597;
  --sf-cyan: #39d0ff;
  --sf-cyan-dim: #1a6c86;
  --sf-amber: #ffb020;
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(57,208,255,.06), transparent 60%),
    #0b0f14;
  color: var(--text);
}

/* ---------- Statusleiste (B4) ---------- */
#scene-base.shell .shell-status {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: calc(8px + var(--safe-t)) 16px 8px;
  background: linear-gradient(180deg, #0e1720, #0b1119);
  border-bottom: 1px solid var(--sf-cyan-dim);
  box-shadow: 0 1px 0 rgba(57,208,255,.15), 0 6px 18px rgba(0,0,0,.4);
}
#scene-base.shell .ss-brand {
  font-weight: 700; letter-spacing: .16em; font-size: 13px; color: var(--sf-cyan);
  text-transform: uppercase; white-space: nowrap;
}
#scene-base.shell .ss-logo { color: var(--sf-cyan); margin-right: 4px; }
#scene-base.shell .ss-res { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
#scene-base.shell .ss-day .chip { border-color: var(--sf-cyan-dim); color: var(--sf-cyan); }
#scene-base.shell .ss-res .chip {
  background: #0e1a22; border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: 4px 10px; font-size: 13px; white-space: nowrap;
}
#scene-base.shell .ss-res .chip-warn { border-color: var(--sf-amber); color: var(--sf-amber); }
#scene-base.shell .ss-res .chip-bad  { border-color: var(--bad); color: var(--bad); }

/* ---------- Hauptbereich: Nav-Schiene + Inhalt ---------- */
#scene-base.shell .shell-main {
  flex: 1 1 0; min-height: 0;
  display: flex; align-items: stretch;
}

#scene-base.shell .shell-nav {
  flex: 0 0 220px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 10px; overflow-y: auto;
  background: linear-gradient(180deg, #0c141c, #0a1017);
  border-right: 1px solid var(--line);
}
#scene-base.shell .snav {
  display: flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 8px 12px;
  background: transparent; color: var(--text-dim);
  border: 1px solid transparent; border-left: 3px solid transparent;
  border-radius: 8px; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 14.5px; letter-spacing: .02em;
  touch-action: manipulation; white-space: nowrap;
}
#scene-base.shell .snav .sn-i { width: 20px; text-align: center; color: var(--sf-cyan-dim); font-size: 15px; }
#scene-base.shell .snav:hover { background: #0f1e28; color: var(--text); }
#scene-base.shell .snav.active {
  background: linear-gradient(90deg, rgba(57,208,255,.16), rgba(57,208,255,.03));
  color: #eaf7ff; border-color: var(--sf-cyan-dim); border-left-color: var(--sf-cyan);
  box-shadow: inset 0 0 0 1px rgba(57,208,255,.1);
}
#scene-base.shell .snav.active .sn-i { color: var(--sf-cyan); }
#scene-base.shell .snav-action { margin-top: auto; border-top: 1px dashed var(--line); border-radius: 8px; }

#scene-base.shell .shell-body {
  flex: 1 1 0; min-width: 0; overflow-y: auto; overflow-x: hidden;
  padding: 16px 18px;
}
#scene-base.shell .shell-h {
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sf-cyan); margin: 18px 0 8px; padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
#scene-base.shell .shell-h:first-child { margin-top: 0; }

/* ---------- Lagezentrum-Uebersicht ---------- */
#scene-base.shell .lz-overview { display: flex; flex-direction: column; gap: 12px; }
#scene-base.shell .lz-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
#scene-base.shell .lz-card {
  background: linear-gradient(180deg, #0f1b24, #0c151d);
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
}
#scene-base.shell .lz-card h4 {
  margin: 0 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sf-cyan);
}
#scene-base.shell .lz-card .big { font-size: 22px; font-weight: 700; color: var(--text); }
#scene-base.shell .lz-card .sub { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
#scene-base.shell .lz-note {
  font-size: 12.5px; color: var(--text-dim);
  border-left: 3px solid var(--sf-cyan-dim); padding: 6px 10px;
  background: rgba(57,208,255,.05); border-radius: 0 6px 6px 0;
}

/* ---------- Lager ---------- */
#scene-base.shell .inv-view { display: flex; flex-direction: column; gap: 10px; }
#scene-base.shell .inv-cat h3 {
  font-size: 14px; margin: 6px 0 6px; color: var(--text);
}
#scene-base.shell .inv-grid {
  display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
#scene-base.shell .inv-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: #0e1a22; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px;
}
#scene-base.shell .inv-item .q { color: var(--sf-cyan); font-weight: 700; }
#scene-base.shell .inv-empty { color: var(--text-dim); font-style: italic; }

/* ---------- Einsatzarchiv ---------- */
#scene-base.shell .archive-view { display: flex; flex-direction: column; gap: 8px; }
#scene-base.shell .arch-row {
  display: flex; justify-content: space-between; gap: 12px;
  background: #0e1a22; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
}
#scene-base.shell .arch-row.win  { border-left: 3px solid var(--ok); }
#scene-base.shell .arch-row.loss { border-left: 3px solid var(--bad); }
#scene-base.shell .arch-row .r-title { font-weight: 600; }
#scene-base.shell .arch-row .r-meta { font-size: 12.5px; color: var(--text-dim); }

/* ---------- Einsatzradio-Einbettung ---------- */
#scene-base.shell .radio-mount { min-height: 260px; }
#scene-base.shell .radio-mount .orp-panel {
  position: static !important; inset: auto !important;
  width: 100% !important; max-width: 520px; margin: 0 auto;
  box-shadow: 0 6px 22px rgba(0,0,0,.4);
}

/* ---------- Optionen ---------- */
#scene-base.shell .options-view { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
#scene-base.shell .opt-card {
  background: linear-gradient(180deg, #0f1b24, #0c151d);
  border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px;
}
#scene-base.shell .opt-card h3 { margin: 0 0 10px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--sf-cyan); }
#scene-base.shell .opt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0; }
#scene-base.shell .opt-row label { font-size: 14px; }
#scene-base.shell .opt-row input[type=range] { flex: 1; max-width: 240px; accent-color: var(--sf-cyan); }
#scene-base.shell .opt-danger { color: var(--bad); }

/* ---------- Fusszeile ---------- */
#scene-base.shell .shell-foot { border-top: 1px solid var(--sf-cyan-dim); background: #0b1119; }
#scene-base.shell .shell-foot-right { margin-left: auto; }

/* ---------- Basisraster im Sci-Fi-Keller-Look (017D §C5) ---------- */
#scene-base.shell .bg-room {
  background: linear-gradient(180deg, rgba(20,32,42,.95), rgba(12,20,28,.96));
  border-color: var(--sf-cyan-dim);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.5);
}
#scene-base.shell .bg-room.fixed {
  border-color: var(--sf-cyan);
  background: linear-gradient(180deg, rgba(18,46,56,.96), rgba(10,28,36,.96));
}
#scene-base.shell .bg-room.building { border-style: dashed; border-color: var(--sf-amber); background: rgba(40,32,16,.9); }
#scene-base.shell .bg-room.selected { outline-color: var(--sf-cyan); box-shadow: inset 0 0 0 2px var(--sf-cyan), 0 0 14px rgba(57,208,255,.4); }
#scene-base.shell .bg-room.nopower { border-color: var(--bad); }
#scene-base.shell .bg-room .reff { color: #7fd6c0; }
#scene-base.shell .bg-cell.valid { background: rgba(57,208,255,.18); box-shadow: inset 0 0 0 1px rgba(57,208,255,.5); }
#scene-base.shell .bg-cell.valid:hover { background: rgba(57,208,255,.32); }
#scene-base.shell .bg-cell.invalid { background: rgba(255,77,77,.18); }
#scene-base.shell .base-grid.mode-build { outline-color: var(--sf-cyan); }
#scene-base.shell .base-grid.mode-move  { outline-color: var(--sf-amber); }
#scene-base.shell .mode-banner { background: rgba(57,208,255,.1); border-color: var(--sf-cyan); color: #d6f2fb; }
#scene-base.shell .power-fill { background: var(--sf-cyan); }

/* ---------- Reaktionsfaehig: schmale Tablets -> Icon-Schiene ---------- */
@media (max-width: 1100px) {
  #scene-base.shell .shell-nav { flex-basis: 168px; }
}
@media (max-width: 900px) {
  #scene-base.shell .shell-main { flex-direction: column; }
  #scene-base.shell .shell-nav {
    flex: 0 0 auto; flex-direction: row; overflow-x: auto; overflow-y: hidden;
    border-right: none; border-bottom: 1px solid var(--line); gap: 4px;
  }
  #scene-base.shell .snav { border-left: none; border-bottom: 3px solid transparent; min-height: 42px; }
  #scene-base.shell .snav.active { border-left-color: transparent; border-bottom-color: var(--sf-cyan); }
  #scene-base.shell .snav-action { margin-top: 0; margin-left: auto; border-top: none; border-left: 1px dashed var(--line); }
}