/* ============================================================================
   SignalFlow – Netzwerksimulation: ergänzendes Layout.
   Baut auf styles.css auf (dunkles Control-Room-Theme, Panels, Buttons,
   Viewer, KPI- und Chart-Klassen werden wiederverwendet).
   Keine externen Assets.
   =========================================================================*/

/* ------------------------------- Topbar -------------------------------- */
.topbar .nav{ display:flex; align-items:center; gap:10px; }
.topbar .nav a.btn{ text-decoration:none; }

/* ------------- KPIs (1×6) innerhalb der .dash-Spalte -------------------- */
/* Grid + sticky Chat-Spalte kommen aus styles.css (.dash/.dash-main/.dash-side);
   hier nur der Netzwerk-Kniff: alle 6 Karten in einer Reihe wie die
   5er-Reihe der Einzelkreuzung. */
.dash.net .kpi-grid{ grid-template-columns:repeat(6, 1fr); }
@media (max-width:1400px){
  .dash.net .kpi-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:720px){
  .dash.net .kpi-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* --------------------------- Knoten-Drilldown -------------------------- */
.drill{
  position:fixed; right:18px; bottom:18px; z-index:40;
  width:min(400px, calc(100vw - 36px));   /* exakt so breit wie die Chat-Spalte */
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
  padding:12px 14px 14px;
}
/* neben der Chat-Spalte Platz lassen, wenn diese als Spalte steht (>1400px) */
@media (min-width:1401px){
  .drill{ right:512px; }   /* komplett links der 400px-Spalte + Abstände */
}
.drill.big{ width:min(640px, calc(100vw - 36px)); }
.drill-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px; cursor:grab; user-select:none; }
.drill-head .drill-actions{ display:flex; gap:6px; }
.drill.dragging{ cursor:grabbing; box-shadow:0 10px 30px rgba(0,0,0,.4); opacity:.97; }
.drill-head h2{ font-size:14px; }
.drill-head .panel-sub{ margin:2px 0 0; }
.drill canvas{
  display:block; width:100%; aspect-ratio:4 / 3;
  border:1px solid var(--line-soft); border-radius:10px; background:#0a0e13;
}

/* --------------------------- Gebiet + Stats ---------------------------- */
/* Textfelder über Theme-Variablen — im Hell-Modus hell statt dunkel */
#region-filter, .add-row input{
  font:inherit; font-size:13px; color:var(--txt); background:var(--panel-2);
  border:1px solid var(--line); border-radius:8px; padding:8px 10px; outline:none;
  width:100%; max-width:100%;
}
#region-filter:focus, .add-row input:focus{ border-color:var(--accent-2); }
.add-row{ display:flex; gap:8px; align-items:center; }
.add-row input{ flex:1 1 160px; min-width:120px; }
.add-region .run-hint{ display:block; margin-top:6px; margin-left:0; }
.run-hint{ font-size:12.5px; color:#f5c451; }
.kpi .tag[title]{ cursor:help; }
.stat{
  display:inline-flex; align-items:baseline; gap:7px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:999px;
  padding:6px 12px; font-size:12.5px; color:var(--muted); white-space:nowrap;
}
.stat b{ font-family:var(--mono); color:var(--txt); font-size:13px; font-weight:600; }
.stat .k{ color:var(--faint); }
.stat.accent b{ color:var(--accent); }

/* ------------------------------ Steuerung ------------------------------ */
/* Einstellungen wie auf der Einzelkreuzung gruppiert (.ctl-group aus
   styles.css); hier nur die Netzwerk-Besonderheiten. */
.ctl-grid-region{ grid-template-columns:minmax(170px,1fr) minmax(170px,1fr) minmax(230px,1.4fr); }
.dash.net .ctl-group .ctl-grid{ grid-template-columns:repeat(4, minmax(150px, 1fr)); }
/* Zeitfenster: eine Spalte, kompakt — die Zeit-Elemente passen in eine Reihe */
.dash.net .ctl-group .ctl-grid .control{ min-width:0; }
.dash.net .ctl-group .ctl-grid .control select{ width:100%; max-width:100%; }
.dash.net .time-row{ flex-wrap:nowrap; gap:4px; }
.dash.net .time-row select{
  padding:5px 4px; font-size:12px; min-width:0; flex:1 1 70px; width:auto;
}
.dash.net .time-row input[type=time]{
  padding:5px 2px; font-size:12px; flex:1 1 84px; min-width:84px; width:auto;
}
#btn-run.busy .btn-label::after{ content:" …"; }
#btn-run.sim-run.dirty{ box-shadow:0 0 0 2px rgba(245,196,81,.55), 0 4px 18px rgba(245,196,81,.25); }
/* Status-Zeile unter der Gebiets-Gruppe */
.net-stats{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }


/* --------------------------- Karten-Canvas ----------------------------- */
.viewer .canvas-cell{ aspect-ratio:16 / 11; }
.canvas-cell canvas{ image-rendering:auto; }

/* -------------------- Entscheidungsprotokoll: Hotspots ----------------- */
/* Viewer-Zeile: alles in einer Reihe — der Deckkraft-Slider darf eng werden,
   statt umzubrechen; die Readouts rechts bleiben stehen */
.transport #osm-opacity{ width:74px; flex:0 1 74px; min-width:56px; }
.transport .speeds{ margin-left:0; }
.transport #btn-osm{ padding:8px 10px; min-width:40px; }
#osm-opacity:disabled{ opacity:.35; }
/* enges Fenster (~1400–1560 px, Chat-Spalte noch rechts): etwas Luft schaffen */
@media (max-width:1560px) and (min-width:1401px){
  .viewer .policy-modes .mode-btn{ padding:8px 10px; font-size:12px; }
  .transport #osm-opacity{ width:56px; flex-basis:56px; }
  .readouts .pill{ padding:5px 9px; }
}
/* Notfall: statt abzuschneiden umzubrechen */
.viewer-bar{ flex-wrap:wrap; row-gap:8px; }
.decision-legend .lg.lead{ font-weight:600; color:var(--txt); }
/* Top-Stau-Liste: Druck-Balken (wie die Drucktabelle, aber in Listenzeilen) */
.decision-item .bar{
  display:inline-block; height:8px; border-radius:4px; vertical-align:middle;
  background:linear-gradient(90deg, rgba(45,212,191,.45), var(--accent));
}
.decision-item .why .avg{ margin-left:8px; }
.decision-item .cat.cat-hot{
  color:var(--accent-2); border-color:rgba(56,189,248,.4);
}

/* ------------------------------ Charts --------------------------------- */
@media (max-width:1000px){ .charts{ grid-template-columns:1fr; } }

/* ------------------------------- Footer -------------------------------- */
.foot .foot-note{ display:block; margin-top:4px; color:var(--faint); }
@media (max-width:720px){
  .net-stats{ justify-content:flex-start; }
}