/* ============================================================================
   Risiko / Maßnahmen / Rollen / Protokoll — gemeinsame UI-Bausteine.
   Ergänzt die App-CSS; nutzt die Tokens aus tokens.css. In jedem Frontend
   (wb2/nets/wb5/pp/catalog + Hub) nach der App-CSS eingebunden.
   ============================================================================ */

/* --- Risikobewertung S/O/E + AP-Badge (WB_2/S4, WB_5, Bericht) ------------- */
.risk { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.risk-in {
  width: 34px; text-align: center; font: 600 var(--fs-sm)/1 var(--font-data);
  padding: 3px 2px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg);
}
.risk-in:focus { outline: none; box-shadow: var(--ring); border-color: var(--sel-border); }
/* Spinner ausblenden — Platz ist knapp, 1..10 reicht per Tastatur */
.risk-in::-webkit-outer-spin-button, .risk-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.risk-in[type=number] { -moz-appearance: textfield; appearance: textfield; }

.ap {
  display: inline-flex; align-items: baseline; gap: 2px; margin-left: 4px;
  padding: 2px 7px; border-radius: 999px; font: 700 var(--fs-xs)/1 var(--font-ui);
  color: #fff; white-space: nowrap;
}
.ap small { font-weight: 500; opacity: .9; font-size: 10px; }
.ap-h { background: var(--ap-h); }
.ap-m { background: var(--ap-m); }
.ap-n { background: var(--ap-n); }
.ap-none { background: transparent; color: var(--text-faint); border: 1px dashed var(--border); }

/* E4 Nachtrag zu Task 3: eine GEERBTE Bedeutung (S aus der Ursachenkette,
   severity.js resolveSeverity) ist eine andere Aussage als eine EINGETRAGENE
   — dezent, aber sichtbar unterschieden (kursiv + gestrichelter Rahmen),
   dazu immer ein title mit der Herkunft. Wer eine geerbte 9 für eine
   eingetragene hält, hält eine Auflösung für eine Entscheidung. */
.ap.ap-sinherited { font-style: italic; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.risk-in--inherited { border-style: dashed; font-style: italic; }
.risk-in--inherited::placeholder { font-style: italic; color: var(--text-muted); opacity: 1; }

/* --- Befund-Panel (WB_2 S4 rechts / Netze & PP als Streifen über der Matrix)
   E4 Task 4: von wb2.css hierher gezogen — EINE Darstellung für alle Ansichten
   (shared/ui/findings-panel.js baut dieses Markup, egal wer es aufruft). ---- */
.vsummary { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.vsummary .pill { padding: 3px 9px; border-radius: 999px; font-weight: 700; font-size: var(--fs-xs); border: 1px solid var(--border-soft); cursor: pointer; user-select: none; }
.vsummary .pill:hover { border-color: var(--brand-grey); }
.vsummary .pill.on { background: var(--sel-bg); border-color: var(--accent); }
.vsummary .e { color: var(--danger); }
.vsummary .w { color: var(--warn); }
.vsummary .i { color: var(--text-muted); }
.finding { padding: 7px 8px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); margin-bottom: 6px; background: #fff; cursor: pointer; }
.finding:hover { border-color: var(--accent); }
.finding .code { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); letter-spacing: .03em; }
.finding .msg { font-size: var(--fs-xs); }
.finding .fix { font-size: 10px; color: var(--col-function); margin-top: 2px; }
.finding.error { border-left: 3px solid var(--danger); }
.finding.warn  { border-left: 3px solid var(--warn); }
.finding.info  { border-left: 3px solid var(--border); }
.empty-hint { color: var(--text-muted); font-size: var(--fs-xs); padding: 8px; }

/* wb2/S4 zeigt das Panel als rechte Spalte (.panel, in wb2.css positioniert).
   Netze/PP haben keine feste Seitenspalte — dort steht es als eigene, randierte
   Kachel über der Matrix (.findings-panel), dieselben Innenklassen wie oben. */
.findings-panel { border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--bg-panel); padding: 10px 12px; max-height: 220px; overflow: auto; flex: 0 0 auto; }
.findings-panel h3 { margin: 0 0 8px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.findings-panel .finding { cursor: default; } /* keine Baum-Navigation zum Ziel wie in wb2 */

/* --- Fehlerkette (WB_2 Fehler-Detail) ------------------------------------- */
.ft-details .chain { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.chain-col { display: flex; flex-direction: column; gap: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 22px; }
.chainrow { display: inline-flex; align-items: center; gap: 1px; }
.chip {
  border: 1px solid var(--border); background: var(--bg-panel); color: var(--col-fault);
  border-radius: var(--radius-sm); padding: 2px 7px; font: 500 var(--fs-xs) var(--font-ui);
  cursor: pointer; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip:hover { border-color: var(--col-fault); }
.icon.xs { font-size: 11px; padding: 0 3px; }
.reeval { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.muted { color: var(--text-faint); }
.small { font-size: var(--fs-xs); }

/* --- Maßnahmen-Detailpanel (WB_5) ----------------------------------------- */
.measure-panel {
  border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--bg-panel);
  padding: 12px 14px; margin: 8px 0 4px; box-shadow: var(--shadow);
}
.measure-panel h4 { margin: 0 0 8px; font: 700 var(--fs-h2) var(--font-ui); color: var(--brand-navy); }
.mfields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 14px; }
.mfield { display: flex; flex-direction: column; gap: 3px; }
.mfield label { font: 600 var(--fs-xs) var(--font-ui); color: var(--text-muted); }
.mfield input, .mfield select, .mfield textarea {
  padding: 5px 7px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: var(--fs-sm) var(--font-ui); background: var(--bg);
}
.mfield textarea { resize: vertical; min-height: 38px; }
.mfield.full { grid-column: 1 / -1; }

/* Maßnahmen-Status-Pille */
.act-state { display: inline-flex; align-items: center; gap: 5px; }
.act-dot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); display: inline-block; }
.act-dot.s-untouched  { background: var(--act-untouched); }
.act-dot.s-inProgress { background: var(--act-inprogress); }
.act-dot.s-finished   { background: var(--act-finished); }
.act-dot.s-effective  { background: var(--act-effective); }
.act-dot.s-discarded  { background: var(--act-discarded); }

/* Nur-Lesen: Eingaben in den Inhaltsbereichen sperren (Frontend-Gate) */
body.role-read .editor input:not([data-banner]):not([type=search]),
body.role-read .editor select,
body.role-read .editor textarea,
body.role-read .mgrid input, body.role-read .mgrid select,
body.role-read .measure-panel input, body.role-read .measure-panel select, body.role-read .measure-panel textarea,
body.role-read .risk-in {
  pointer-events: none; background: #f3f3f1; color: var(--text-muted);
}
body.role-read .rowtools [data-act="delete"],
body.role-read [data-addcol], body.role-read .mc { pointer-events: none; opacity: .55; }

/* --- Änderungsprotokoll / Freigabe (Dialog/Liste) ------------------------- */
.changelog { max-height: 320px; overflow: auto; border: 1px solid var(--border-soft); border-radius: var(--radius); }
.changelog table { width: 100%; border-collapse: collapse; font: var(--fs-xs) var(--font-data); }
.changelog th, .changelog td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.changelog th { position: sticky; top: 0; background: var(--fill-grey); }
.changelog td.detail { white-space: normal; }
.cl-kind { font: 700 10px var(--font-mono); padding: 1px 5px; border-radius: 4px; background: var(--bg-soft); }

/* --- Maßnahmenverfolgungs-Tabelle (WB_5) ---------------------------------- */
/* WB_5 legt diese Sektion als Flex-Geschwister UNTER die virtualisierte Matrix (#mgridhost)
   in ein overflow:hidden .main. Ohne Höhen-Deckelung beansprucht die Tabelle bei grossen
   Dokumenten (viele Maßnahmen) ihre volle Inhaltshöhe (min-height:auto) und drängt
   #mgridhost auf ~0px -> die Matrix bekommt keine Viewport-Höhe und ist nicht scrollbar.
   Die 45%-Deckelung gilt daher NUR im Split-Pane-Fall (.main.pane-split .measure-track,
   siehe matrix.css) — "Nur Verfolgung" (.main.pane-tracking) darf die Tabelle voll aufziehen. */
.measure-track { margin: 18px 0 8px; min-height: 0; display: flex; flex-direction: column; }
.measure-track h4 { margin: 0 0 4px; font: 700 var(--fs-h2) var(--font-ui); color: var(--brand-navy); }
/* Host der virtualisierten Tabelle (vtable.js erzeugt .track-wrap darin).
   Leitet die Flex-Höhe durch — ohne min-height:0 bläht der Inhalt den Host auf
   und die Deckelung im Split-Pane greift nicht mehr. */
.trackhost { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.track-wrap { overflow: auto; border: 1px solid var(--border-soft); border-radius: var(--radius); margin-top: 8px; flex: 1 1 auto; min-height: 0; }
/* table-layout:fixed ist für die Virtualisierung PFLICHT: sonst leitet der Browser
   die Spaltenbreiten aus den gerade sichtbaren Zeilen ab und die Spalten springen
   beim Scrollen. Die Breiten kommen aus dem <colgroup> (TRACK_COLS in wb5.js). */
.track-table { width: 100%; table-layout: fixed; border-collapse: collapse; font: var(--fs-sm) var(--font-ui); background: var(--bg); }
.track-table th, .track-table td { text-align: left; padding: 4px 9px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.track-table th { background: var(--fill-grey); font: 700 var(--fs-xs) var(--font-ui); color: var(--text-muted); position: sticky; top: 0; z-index: 1; white-space: nowrap; }
/* Uniforme Zeilenhöhe — EINE Quelle: --vt-row setzt vtable.js aus cfg.rowHeight
   am Scroll-Container. Eine zweite, hier hart notierte Höhe wäre die klassische
   Drift-Quelle (Scrollbalken passt nicht zum Inhalt). nowrap+hidden halten die
   Höhe konstant: eine umbrechende Zelle würde die Zeile wachsen lassen. */
.track-table tbody tr.vt-row { height: var(--vt-row, 38px); }
.track-table tbody td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-table tr.vt-pad td { padding: 0; border: 0; }
/* Leerzustand: mehrzeiliger Hinweis — die Kürzung der Datenzeilen darf hier nicht greifen. */
.track-table tr.vt-empty td { white-space: normal; overflow: visible; text-align: center; padding: 20px 14px; border: 0; }
.track-table td.m-name { font-weight: 600; }
.track-table input, .track-table select { width: 100%; min-width: 0; padding: 4px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: var(--fs-sm) var(--font-ui); background: var(--bg); }
.track-table td.m-links { white-space: nowrap; }
.track-table .lf { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; font: 500 var(--fs-xs) var(--font-data); }
.track-table .ap { padding: 1px 5px; font-size: 10px; margin-left: 2px; }

/* --- Overlay (Protokoll, Freigabe) ---------------------------------------- */
.dc-overlay { position: fixed; inset: 0; background: rgba(20,30,60,.42); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 24px; }
.dc-modal { background: #fff; border-radius: var(--radius); max-width: 940px; width: 100%; max-height: 84vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.dc-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); }
.dc-modal-head h3 { margin: 0; font: 700 var(--fs-h1) var(--font-ui); color: var(--brand-navy); }
.dc-x { border: none; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--text-muted); }
.dc-modal-body { padding: 14px 16px; overflow: auto; }
.dc-modal-body .sign-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.dc-modal-body .sign-row input { flex: 1; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); }