/* App-spezifische Ergänzungen zum AGP·Control-Design-System.
   Nur was das System nicht abdeckt: Tabellen, Diagrammhöhen, Kleinigkeiten. */

/* Diese App ist (noch) hell – Plotly-Charts sind nicht dark-mode-fähig gestylt. */
:root { color-scheme: light; }

.agp-workspace { max-width: 1600px; margin: 0 auto; }

/* ── Seite 2: 2-Spalten-Arbeitsfläche ──────────────────────────────
   Sp.1 Systemeingabe (breit) · Sp.2 Bereiche/Verstärkung + stationäre
   Verankerung + Störungen. Auch von Seite 3 genutzt (Analyse-Ergebnis +
   Export). Jede Spalte ist ein eigenständiger Kartenstapel. */
.sys-grid {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, 1.3fr) minmax(280px, 1fr);
  gap: var(--agp-sp-3);
  padding: var(--agp-sp-3);
  align-items: start;
}
.sys-col { display: flex; flex-direction: column; gap: var(--agp-sp-3); min-width: 0; }

/* Karten in den Spalten etwas dichter (wie das frühere Panel) */
.sys-col .agp-card { padding: 10px 14px 12px; }
.sys-col .agp-card__head { margin-bottom: 10px; padding-bottom: 6px; }

@media (max-width: 820px) {
  .sys-grid { grid-template-columns: 1fr; }
}

/* ── Kopf-Navigation (Seiten-Reiter, nur einer aktiv) ── */
.agp-nav { display: flex; gap: 2px; background: rgba(255,255,255,.12);
  border-radius: 8px; padding: 2px; }
.agp-nav__item {
  display: inline-flex; align-items: center;
  padding: 3px 11px; font-size: var(--agp-fs-xs); font-weight: 600;
  color: rgba(255,255,255,.85); text-decoration: none; border-radius: 6px;
  white-space: nowrap; line-height: 1.7;
}
.agp-nav__item:hover { background: rgba(255,255,255,.16); color: #fff; }
.agp-nav__item[aria-current="page"] { background: #fff; color: var(--agp-brand-strong); }

/* kompakter Systemname rechts im Kopf */
.agp-header__sys { font-size: var(--agp-fs-xs); opacity: .8; max-width: 300px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Label-Mindestbreite, damit die Eingabespalten untereinander fluchten */
.agp-field .agp-label { min-width: 118px; }

/* Eingabeform-Umschalter (Seite 2) hat 4 Optionen → umbrechen statt scrollen */
#segEingabe { flex-wrap: wrap; overflow-x: visible; }

/* Meldungsboxen: standardmäßig verborgen, JS blendet ein */
#errorBox, #warnBox, #okBox, #kvOk, #kvErr { display: none; }

/* Kennwert-/Analyse-Tabellen (Seite 1 + Seite 2) */
.info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--agp-fs-sm);
}
.info-table td { padding: 4px 6px; color: var(--agp-ink); }
.info-table td:first-child { color: var(--agp-ink-muted); white-space: nowrap; }
.info-table td:last-child {
  font-weight: 600;
  text-align: right;
  font-family: var(--agp-mono);
  font-variant-numeric: tabular-nums;
}
/* kompakte Variante (Seite 2): Werte direkt neben den Texten, Umbruch erlaubt */
.info-table.compact td:first-child { width: 1%; padding-right: 14px; }
.info-table.compact td:last-child {
  text-align: left;
  white-space: normal;
  word-break: break-word;
}
.ok-value  { color: var(--agp-ok) !important; }
.bad-value { color: var(--agp-err) !important; }

/* Hinweis „kein System geladen“ */
.sys-missing { font-size: var(--agp-fs-sm); color: var(--agp-err); margin-bottom: 10px; }

/* Diagrammhöhen */
#plotOutput { height: 340px; }
#plotBottom { height: 300px; }

/* abgeblendete Karten beim Arbeitspunkt-Test */
/* ausgegraut (Streckentest): Inhalt blass, Hinweis voll lesbar */
.agp-card.is-inactive { pointer-events: none; }
.agp-card.is-inactive > :not(.inaktiv-hinweis) { opacity: .45; }
.inaktiv-hinweis { display: none; }
.agp-card.is-inactive > .inaktiv-hinweis {
  display: block; margin-top: 6px; padding: 4px 8px; border-radius: var(--agp-r-sm);
  background: var(--agp-warn-bg); border: 1px solid var(--agp-warn-brd);
  color: var(--agp-ink); font-size: var(--agp-fs-xs); }

/* ── Kompaktes Panel (Seite 1 soll ohne Scrollen passen) ── */

/* Panel-Karten etwas dichter als der Design-System-Standard */
.agp-panel { gap: 10px; }
.agp-panel .agp-card { padding: 10px 14px 12px; }
.agp-panel .agp-card__head { margin-bottom: 10px; padding-bottom: 6px; }

/* zwei Karten nebeneinander im Panel */
.panel-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.panel-row .agp-field .agp-label {
  min-width: 0;
  flex-shrink: 0;      /* Label nie überdecken/abschneiden */
}
.panel-row .agp-field .agp-input { max-width: 96px; }  /* Zahlenfelder schmal halten */

/* vertikaler Stapel mit einheitlichem Abstand (ersetzt Spacer-Divs) */
.vstack { display: flex; flex-direction: column; gap: 8px; }

/* Label+Feld-Paar im agp-grid gruppiert ein-/ausblendbar (Ti/Td/T1 je Reglertyp) */
.pairgroup { display: contents; }

/* zwei Checkboxen nebeneinander */
.check-row { display: flex; gap: 14px; flex-wrap: wrap; }
.check-row .agp-check { white-space: nowrap; }

/* ── Störungs-Editor (Seite 2, V4) ─────────────────────────────────
   Volle Breite unter der 3-Spalten-Fläche; eine Zeile je Störung. */
.stoer-section { max-width: 1600px; margin: 0 auto; padding: 0 var(--agp-sp-3) var(--agp-sp-3); }

#stoerListe { display: flex; flex-direction: column; gap: 8px; }
.stoer-leer { font-size: var(--agp-fs-sm); color: var(--agp-ink-muted); padding: 4px 0 8px; }

/* Eine Störungszeile: Nr · Typ · Angriff · Aktiv · Parameterfelder · Löschen.
   Grid, damit die Beschriftungen der Zeilen untereinander fluchten. */
.stoer-row {
  display: grid;
  grid-template-columns: 2ch 8.5rem 7rem auto 1fr 2rem;
  gap: 8px 12px;
  align-items: end;
  padding: 8px 10px;
  border: 1px solid var(--agp-line);
  border-radius: var(--agp-radius);
  background: var(--agp-surface-2, transparent);
}
.stoer-nr { font-family: var(--agp-mono); color: var(--agp-ink-muted); align-self: center; }

/* Parameterfelder je Typ – schmale beschriftete Zahlenfelder nebeneinander */
.stoer-params { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; }
.stoer-param { display: flex; flex-direction: column; gap: 2px; }
.stoer-param > span { font-size: var(--agp-fs-xs, .72rem); color: var(--agp-ink-muted); }
.stoer-param input { width: 6.5rem; }
.stoer-param--wide input { width: 12rem; }
.stoer-field { display: flex; flex-direction: column; gap: 2px; }
.stoer-field > span { font-size: var(--agp-fs-xs, .72rem); color: var(--agp-ink-muted); }
.stoer-aktiv { align-self: center; }
.stoer-del { align-self: center; }

@media (max-width: 720px) {
  .stoer-row { grid-template-columns: 1fr; }
}

/* Störungsliste auf Seite 1 (nur Anzeige der auf Seite 2 definierten Störungen) */
.stoer-liste { display: flex; flex-direction: column; gap: 4px; }
.stoer-item {
  font-size: var(--agp-fs-sm); color: var(--agp-ink);
  font-variant-numeric: tabular-nums; line-height: 1.35;
}
.stoer-item.is-aus { color: var(--agp-ink-muted); text-decoration: line-through; }
.stoer-item.is-aus em { text-decoration: none; font-style: normal; }

/* Kennwerte-Übersicht (Schritt 7) – mehrspaltige Vergleichstabelle */
.kw-table { width: 100%; border-collapse: collapse; font-size: var(--agp-fs-sm); }
.kw-table th, .kw-table td {
  padding: 5px 10px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--agp-line);
  font-variant-numeric: tabular-nums;
}
.kw-table th { color: var(--agp-ink-muted); font-weight: 600; }
/* erste zwei Spalten (Regler, Simulationsart) linksbündig, nicht mono */
.kw-table th:first-child, .kw-table td:first-child,
.kw-table th:nth-child(2), .kw-table td:nth-child(2) {
  text-align: left; font-variant-numeric: normal;
}
.kw-table td:first-child { font-weight: 600; }

/* ── Hilfe-Dialog (static/hilfe.js, 2026-10-08) ── */
.rkz-hilfe {
  max-width: 760px; width: calc(100% - 32px); max-height: 85vh;
  padding: 20px 26px; border: 1px solid var(--agp-border);
  border-radius: var(--agp-r-md); background: var(--agp-surface);
  color: var(--agp-ink); font-family: var(--agp-font); line-height: 1.5;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.rkz-hilfe::backdrop { background: rgba(20,25,45,.45); }
.rkz-hilfe h2 { margin: 0 32px 10px 0; font-size: 1.25rem; color: var(--agp-brand-deep); }
.rkz-hilfe h3 { margin: 16px 0 4px; font-size: 1rem; color: var(--agp-brand-strong); }
.rkz-hilfe p, .rkz-hilfe ul, .rkz-hilfe ol { margin: 4px 0; }
.rkz-hilfe li { margin: 3px 0; }
.rkz-hilfe__zu { position: sticky; top: 0; float: right; color: var(--agp-ink-muted); }
.rkz-hilfe__fuss { margin-top: 14px !important; font-size: .85rem; color: var(--agp-ink-muted); }

/* ⓘ-Knopf je Eingabefeld und Erläuterungsfeld (static/hilfe.js) */
.rkz-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 5px; padding: 0;
  border: 1px solid var(--agp-brand); border-radius: 50%;
  background: var(--agp-surface); color: var(--agp-brand);
  font: italic 700 10px/1 Georgia, serif; cursor: pointer;
  vertical-align: middle; flex: none; text-transform: none;
}
/* schmale Sollwert-Karte: Eingabe behält ihre Breite, die Beschriftung bricht um */
#cardSollwert .agp-field > .agp-input { min-width: 60px; flex: 0 0 60px; }
#cardSollwert .agp-field > .agp-label { white-space: normal; min-width: 0; }
/* Paar-Raster (Endzeit/Punkte, k_P/T_N …): Eingaben schrumpfen statt überzulaufen */
.agp-grid--2 { grid-template-columns: auto minmax(54px, 1fr) auto minmax(54px, 1fr); }
.agp-grid--2 .agp-input { width: 100%; min-width: 0; }
.agp-grid--2 .agp-label { white-space: normal; }
.agp-field > .agp-label { flex: none; }
.rkz-i:hover, .rkz-i:focus-visible { background: var(--agp-brand); color: #fff; outline: none; }
.rkz-pop {
  position: absolute; z-index: 1000; padding: 9px 12px;
  background: var(--agp-surface); color: var(--agp-ink);
  border: 1px solid var(--agp-brand); border-radius: var(--agp-r-md);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  font: 400 13px/1.45 var(--agp-font); text-transform: none; letter-spacing: 0;
}

/* Formelzeichen in Kartentiteln: nicht in Versalien (Titel sind uppercase) */
.agp-card__title .klein { text-transform: none; letter-spacing: 0; }

/* Reiter der Teilsysteme (Kaskade, Seite 2) */
.teil-reiter button { min-width: 64px; font-weight: 600; }

/* ── Strukturbild (Kap. 54, static/struktur.js) ── */
.struktur-karte summary { cursor: pointer; list-style: none; }
.struktur-karte summary::-webkit-details-marker { display: none; }
.struktur-karte summary .agp-card__title::before { content: "▸ "; }
.struktur-karte[open] summary .agp-card__title::before { content: "▾ "; }
.struktur-bild { overflow-x: auto; padding-top: 6px; }
.struktur-svg { display: block; max-width: 100%; height: auto; font-family: var(--agp-font); }
.struktur-svg .l    { stroke: var(--agp-ink-muted); stroke-width: 1.3; fill: none; }
.struktur-svg .z    { stroke: var(--agp-warn); stroke-width: 1.3; }
.struktur-svg .grau { stroke: var(--agp-ink-faint); stroke-dasharray: 4 3; }
.struktur-svg .box  { fill: var(--agp-surface); stroke-width: 1.4; }
.struktur-svg .box.r   { stroke: var(--agp-brand); fill: var(--agp-brand-tint); }
.struktur-svg .box.s   { stroke: var(--agp-ink); }
.struktur-svg .box.aus { stroke: var(--agp-ink-faint); stroke-dasharray: 4 3; }
.struktur-svg .box.sat { stroke: var(--agp-ink-muted); }
.struktur-svg .sum  { fill: var(--agp-surface); stroke: var(--agp-ink-muted); stroke-width: 1.3; }
.struktur-svg .sum.grau { stroke: var(--agp-ink-faint); }
.struktur-svg .tap  { fill: var(--agp-ink-muted); }
.struktur-svg text  { font-size: 12px; text-anchor: middle; fill: var(--agp-ink); }
.struktur-svg .klein { font-size: 9.5px; fill: var(--agp-ink-muted); }
.struktur-svg .sig  { font-size: 11px; font-style: italic; fill: var(--agp-ink-muted); }
.struktur-svg .sig--frei { font-size: 13px; fill: var(--agp-ink); }
.struktur-svg .vz   { font-size: 13px; font-weight: 700; fill: var(--agp-ink-muted); }
.struktur-svg .zt   { font-size: 10.5px; fill: var(--agp-warn); }
.struktur-svg .zt--links { text-anchor: start; }
.struktur-svg .spitze    { fill: var(--agp-ink-muted); }
.struktur-svg .spitze--z { fill: var(--agp-warn); }
.struktur-svg .spitze--g { fill: var(--agp-ink-faint); }
.struktur-legende { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 4px;
  font-size: var(--agp-fs-xs); color: var(--agp-ink-muted); }
.struktur-legende b { color: var(--agp-warn); }
.struktur-legende .is-aus { opacity: .6; }

/* Knopf mit ⓘ daneben (Seite 3, Export) */
.btn-mit-i { display: flex; align-items: center; gap: 6px; }
.btn-mit-i > .agp-btn { flex: 1; min-width: 0; }

/* Kennwertvergleich auf Seite 3: vier Schritte nebeneinander */
.kv-ablauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kv-ablauf > li { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px;
  border: 1px solid var(--agp-border); border-radius: var(--agp-r-md); background: var(--agp-surface-2); }
.kv-kopf { font-weight: 700; font-size: var(--agp-fs-sm); color: var(--agp-brand-deep); }
a.agp-btn { text-decoration: none; }
.struktur-svg .box.sa { stroke: var(--agp-accent); }
.struktur-svg .sa-l   { stroke: var(--agp-accent); }
.struktur-svg .spitze--a { fill: var(--agp-accent); }
.struktur-svg .zt--sa { fill: var(--agp-accent); }

/* Aufschaltung je Störung (Seite 2, Kap. 54) */
.auf-zeile { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px;
  border-top: 1px dashed var(--agp-border); padding-top: 6px; }
.auf-params select.agp-input { min-width: 9rem; }
.auf-info:empty { display: none; }
.auf-mark { color: var(--agp-accent); font-style: normal; }
.auf-mark.is-aus { color: var(--agp-ink-faint); }