/*
 * Firewall-Verwaltung (Lab B), Workplace V3: Signatur Panorama / FortiManager / OPNsense.
 *
 * Grundbausteine (Kopf, Befehlsleiste, Menue, Pillen, Navigationsliste, Panes, Tabelle,
 * Dialog) kommen aus design.css. Hier steht nur die Signatur:
 *   - dunkler Kopf mit PROD-Badge, Reitern im Kopf und Commit-Zustand
 *   - Befehlsleiste mit Suche und Filter, rechts Export und "Aenderungen pruefen"
 *   - Band "Aenderungen ausstehend"
 *   - Regeltabelle mit Kopfgruppen Quelle/Ziel, Zonen als farbige Kennungen (Zonentokens,
 *     keine Bewertungsfarben), Adress- und Dienstobjekten in Mono, Aktion als Pille,
 *     Treffern; Default-Regel gesperrt als letzte Zeile
 *   - Bearbeitungs-Pane rechts, Objektbaum mit Topologie, Paketpruefung mit Verbindungsbild
 *   - Commit-Dialog; Verkehrsmitschnitt in der Auswertung
 */

.fw, .fw-res {
  --fw-z-internet: var(--ds-zone-internet);
  --fw-z-dmz: var(--ds-zone-dmz);
  --fw-z-office: var(--ds-zone-office);
  --fw-z-admin: var(--ds-zone-admin);
  --fw-z-core: var(--ds-zone-core);
  --fw-z-any: var(--ds-gray-400);
}
.fw { position: relative; }
/* Im Fenster fuellt das Werkzeug die Flaeche von Kante zu Kante. */
.ws-app-fill > .tool.fw { height: 100%; border-radius: 0; box-shadow: none; }
/* style.css setzt label als Block mit Abstand und fett, table mit Aussenabstand. */
.fw label { margin: 0; font-weight: inherit; }
.fw .ds-label { font-weight: var(--fw-semibold); }
.fw .ds-table, .fw-res .ds-table { margin: 0; }
.fw .ds-mono, .fw-res .ds-mono { font-size: var(--fs-s); }

/* ---------- Kopf: Reiter im Kopf ---------- */
.fw .fw-headtabs { align-self: stretch; margin: calc(-1 * var(--sp-2)) 0 calc(-1 * var(--sp-2)) var(--sp-3); }
.fw .ds-toolhead-tab {
  height: auto; margin: 0; padding: 0 var(--sp-3); border-radius: 0; background: transparent;
  font-family: inherit; position: relative; z-index: 1;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.fw .ds-toolhead-tab:hover, .fw .ds-toolhead-tab:active { background: transparent; color: var(--ds-dk-text); border-color: transparent; }
.fw .ds-toolhead-tab.is-active, .fw .ds-toolhead-tab.is-active:hover { color: var(--ds-dk-text); border-bottom-color: var(--accent); }
.fw .ds-toolhead-tab:focus-visible { outline: var(--focus-outline); outline-offset: -4px; }

/* ---------- Befehlsleiste ---------- */
.fw-cmdbar { padding: 6px var(--sp-3); container: fwcmd / inline-size; row-gap: 4px; }
/* Schmaleres Fenster: Nebenbefehle mit title nur als Symbol mit Tooltip. Filter und
   Primaerbefehl haben keinen title und behalten die Beschriftung. */
@container fwcmd (max-width: 1260px) {
  .fw-cmdbar .ds-cmd[data-cmd]:not(#fw-add) > span, .fw-cmdbar #fw-export > span { display: none; }
  .fw-cmdbar .ds-cmd[data-cmd]:not(#fw-add), .fw-cmdbar #fw-export { padding: 0 8px; }
  .fw-search { width: 160px; }
}
/* Zwei Fenster nebeneinander: In der Policy feste zwei Zeilen (oben die Regelbefehle,
   unten Suche, Filter, Export und Commit), damit beim Ziehen nichts springt. */
@container wz (max-width: 960px) {
  .fw-cmdbar .fw-search { flex: 1 1 150px; width: auto; max-width: 320px; }
  .fw-cmdbar:has(#fw-add)::after { content: ''; order: 1; flex: 0 0 100%; height: 0; }
  .fw-cmdbar:has(#fw-add) .fw-search, .fw-cmdbar:has(#fw-add) .fw-search ~ * { order: 2; }
  .fw-cmdbar .ds-cmd-sep:has(+ .fw-search) { display: none; }
}
@container wz (max-width: 620px) {
  .fw-cmdbar .fw-search { flex-basis: 110px; }
}

/* Kopf im schmalen Fenster: Reiter in der zweiten Zeile buendig (tool-shared.css), hier
   ohne den negativen Abstand der breiten Kopfzeile. */
@container wz (max-width: 900px) {
  .fw .fw-headtabs { margin: 0; }
}
/* Sehr schmal: PROD-Badge bleibt neben dem Namen, Reiter und Zustand teilen die zweite
   Zeile (Signatur-Slot aufgeloest, damit Badge und Reiter getrennt stehen). */
@container wz (max-width: 620px) {
  .fw .ds-toolhead-sig { display: contents; }
  .fw .ds-toolhead-env { flex-shrink: 0; }
  .fw .fw-headtabs {
    order: 10; flex: 0 1 auto; min-width: 0; align-self: stretch; min-height: 36px;
    margin: var(--sp-2) 0 calc(-1 * var(--sp-2)) calc(-1 * var(--sp-2));
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  }
  .fw .ds-toolhead-tab { padding: 0 10px; flex-shrink: 0; white-space: nowrap; }
}
.fw .fw-cmd-ic { padding: 0; width: 32px; justify-content: center; }
.fw .ds-cmd:disabled { background: transparent; }
.fw .ds-cmd--primary:disabled { background: var(--ds-primary); color: #fff; opacity: 0.4; }
.fw .fw-exportiert:disabled { opacity: 1; color: var(--ds-ok-text); }
.fw .fw-exportiert svg { color: var(--ds-ok); }
.fw-search {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; width: 220px; padding: 0 10px; margin: 0 2px;
  background: var(--ds-bg-subtle); border: 1px solid var(--ds-border); border-radius: var(--r-s);
  color: var(--ds-icon); cursor: text;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.fw-search:hover { border-color: var(--ds-border-strong); }
.fw-search:focus-within { background: var(--ds-bg-surface); border-color: var(--ds-primary); box-shadow: 0 0 0 3px var(--ds-primary-ring); }
.fw-search svg { width: 15px; height: 15px; flex-shrink: 0; }
.fw-search input {
  flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0;
  border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: var(--fs-s); color: var(--ds-text);
}
.fw-search input::placeholder { color: var(--ds-text-3); }

/* ---------- Band "Aenderungen ausstehend" ---------- */
.fw-pending {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 34px; padding: 6px var(--sp-4); flex-shrink: 0;
  background: var(--ds-warn-soft); color: var(--ds-text);
  border-bottom: 1px solid color-mix(in srgb, var(--ds-warn) 28%, transparent);
  font-size: var(--fs-s); line-height: var(--lh-snug);
}
.fw-pending strong { color: var(--ds-warn-text); font-weight: var(--fw-semibold); }
.fw-pending-ic { display: inline-flex; color: var(--ds-warn-text); }
.fw-pending-ic svg { width: 16px; height: 16px; }

.fw-main { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ---------- Leerzustand ---------- */
.fw-empty { min-height: 220px; }
.fw-empty .ds-empty-v3-ic svg { width: 28px; height: 28px; }

/* ---------- Regeltabelle ----------
   Breite Tabelle (ab 1100 px): Kopfgruppen Quelle/Ziel mit eigener Adressspalte.
   Schmale Tabelle: Zone und Netz in einer Zelle, Kopf einzeilig. */
.fw-split { flex: 1; min-height: 0; display: flex; }
.fw-tablewrap { flex: 1; min-width: 0; display: flex; flex-direction: column; container: fwtab / inline-size; }
.fw-table { outline: none; }
.fw-table:focus-visible { box-shadow: inset 0 0 0 2px var(--ds-primary-ring); }
.fw-policy { table-layout: auto; }
.fw-policy th, .fw-policy td { white-space: nowrap; }
.fw-policy .fw-c-grip { width: 22px; padding: 0 0 0 var(--sp-2); }
.fw-policy .fw-c-nr { width: 34px; padding-left: 0; padding-right: var(--sp-2); }
.fw-policy .fw-c-on { width: 52px; }
.fw-policy .fw-c-zone { min-width: 132px; }
.fw-policy .fw-c-svc { min-width: 116px; }
.fw-policy .fw-c-act { width: 104px; }
.fw-policy .fw-c-hit { width: 64px; }
.fw-policy td.fw-c-kom { width: 100%; max-width: 0; min-width: 150px; overflow: hidden; }
.fw-policy .fw-c-adr, .fw-policy .fw-th-grp, .fw-policy .fw-nur-breit { display: none; }
@container fwtab (min-width: 1100px) {
  .fw-policy .fw-c-adr { display: table-cell; }
  .fw-policy .fw-th-grp { display: table-row; }
  .fw-policy .fw-nur-breit { display: inline; }
  .fw-policy .fw-nur-schmal { display: none; }
  .fw-policy .fw-th-col th { top: 26px; }
}
.fw-policy thead .fw-th-grp th {
  height: 26px; background: var(--ds-bg-muted); border-bottom: 0;
  font-size: var(--fs-xs); color: var(--ds-text-3);
}
.fw-policy thead .fw-th-grp th.fw-th-g { text-align: left; padding-left: var(--sp-3); }
.fw-policy thead .fw-th-grp th.fw-th-g span, .fw-policy thead .fw-th-grp th.fw-th-g {
  box-shadow: inset 0 -2px 0 var(--ds-border-strong);
}
.fw-policy thead .fw-th-col th { height: 30px; }
.fw-policy tbody td { height: 48px; padding-top: 4px; padding-bottom: 4px; }
.fw-policy .fw-c-nr { font-weight: var(--fw-semibold); color: var(--ds-text-2); }
.fw-policy tbody tr.fw-row[data-id] { cursor: pointer; }
.fw-policy tbody tr.is-selected, .fw-policy tbody tr.is-selected:hover { box-shadow: none; }
.fw-policy tbody tr.is-selected td { background: var(--ds-primary-soft); }
.fw-policy tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.fw-policy tbody tr.inaktiv td:not(.fw-c-on):not(.fw-c-grip) > * { opacity: 0.5; }
.fw-policy tbody tr.zieht { opacity: 0.4; }
.fw-policy tbody tr.drop-oben td { box-shadow: inset 0 2px 0 var(--accent); }
.fw-policy tbody tr.drop-unten td { box-shadow: inset 0 -2px 0 var(--accent); }
.fw-policy tbody tr.fw-leer td { height: auto; padding: 0; white-space: normal; }
.fw-policy tbody tr.fw-leer:hover { background: transparent; }

.fw-grip {
  display: block; width: 8px; height: 16px; margin: 0 auto;
  background-image: radial-gradient(circle, var(--ds-gray-400) 1.1px, transparent 1.3px);
  background-size: 4px 4px;
  cursor: grab; opacity: 0.6;
  transition: opacity var(--dur-1) var(--ease);
}
.fw-row:hover .fw-grip, .fw-row.is-selected .fw-grip { opacity: 1; }

/* Zelle mit Objekt und Netz darunter */
.fw-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; line-height: var(--lh-snug); }
.fw-sub { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ds-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fw-objnm { font-family: var(--font-mono); font-size: var(--fs-s); color: var(--ds-text); white-space: nowrap; }
.fw-nm { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--ds-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Zonenmarke und Zonenkennung: Farbe aus dem Zonentoken, Text bleibt Textfarbe */
.fw-zdot {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
  background: var(--z, var(--fw-z-any));
}
.fw-z-internet { --z: var(--fw-z-internet); }
.fw-z-dmz { --z: var(--fw-z-dmz); }
.fw-z-office { --z: var(--fw-z-office); }
.fw-z-admin { --z: var(--fw-z-admin); }
.fw-z-core { --z: var(--fw-z-core); }
.fw-zdot.fw-z-any { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fw-z-any); }
.fw-zone {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  height: 22px; padding: 0 8px 0 7px; border-radius: var(--r-s);
  background: color-mix(in srgb, var(--z, var(--fw-z-any)) 11%, var(--ds-bg-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--z, var(--fw-z-any)) 30%, transparent);
  font-size: var(--fs-s); font-weight: var(--fw-medium); color: var(--ds-text); white-space: nowrap;
}
.fw-zone-t { overflow: hidden; text-overflow: ellipsis; }
.fw-zone.fw-z-any { background: var(--ds-bg-surface); box-shadow: inset 0 0 0 1px var(--ds-border); color: var(--ds-text-2); font-weight: var(--fw-regular); }

.fw-act { min-width: 84px; justify-content: flex-start; }
.fw-hit { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); color: var(--ds-text); }
.fw-hit.null, .fw-hit.leer { color: var(--ds-text-3); font-weight: var(--fw-regular); }

.fw-kom { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fw-kom-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ds-text-2); min-width: 0; }
.fw-kom-txt.leer { color: var(--ds-warn-text); font-style: italic; }
.fw-flag { flex-shrink: 0; }

.fw-switch input { width: 30px; height: 18px; }
.fw-switch input::before { width: 14px; height: 14px; }
.fw-switch input:checked::before { transform: translateX(12px); }

/* Default-Regel: letzte Zeile, gesperrt, nicht auswaehlbar */
.fw-policy tbody tr.fw-default td { background: var(--ds-bg-subtle); color: var(--ds-text-3); border-bottom: 0; cursor: default; }
.fw-policy tbody tr.fw-default:hover td { background: var(--ds-bg-subtle); }
.fw-policy tbody tr.fw-default td:first-child { box-shadow: inset 3px 0 0 var(--ds-gray-300); }
.fw-policy tbody tr.fw-default .fw-objnm { color: var(--ds-text-2); }
.fw-default-lbl { font-style: italic; color: var(--ds-text-3); }
.fw-lock { display: inline-flex; color: var(--ds-icon); vertical-align: middle; }
.fw-lock svg { width: 14px; height: 14px; }

/* Statusleiste mit Zonen-Legende */
.fw-statusbar {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: 30px; padding: 0 var(--sp-4);
  border-top: 1px solid var(--ds-border-subtle); background: var(--ds-bg-subtle);
  font-size: var(--fs-xs); color: var(--ds-text-3); flex-shrink: 0;
}
.fw-legende { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); }
.fw-leg { display: inline-flex; align-items: center; gap: 6px; color: var(--ds-text-2); }
.fw-statusbar-n { margin-left: auto; white-space: nowrap; }

/* ---------- Bearbeitung der ausgewaehlten Regel (Pane rechts) ---------- */
.fw-edit {
  width: 320px; flex-shrink: 0; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--ds-bg-surface); border-left: 1px solid var(--ds-border-subtle);
  animation: fw-pane-in var(--dur-2) var(--ease-out) both;
}
@container wz (min-width: 1600px) { .fw-edit { width: 360px; } }
@keyframes fw-pane-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
.fw-edit-head { display: flex; align-items: center; gap: 2px; padding: var(--sp-3) var(--sp-2) var(--sp-1) var(--sp-4); }
.fw-edit-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); }
.fw-edit-title strong { font-size: var(--fs-l); font-weight: var(--fw-semibold); color: var(--ds-text); }
.fw-edit-flow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: var(--sp-1) var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--ds-border-subtle);
}
.fw-edit-flow .fw-act { margin-left: auto; min-width: 0; }
.fw-edit-arrow { display: inline-flex; color: var(--ds-icon); }
.fw-edit-arrow svg { width: 14px; height: 14px; }
.fw-edit-body { flex: 1; min-height: 0; overflow: auto; padding: 0 var(--sp-4) var(--sp-4); }
.fw-edit-sec { padding: var(--sp-3) 0 var(--sp-1); border-bottom: 1px solid var(--ds-border-subtle); }
.fw-edit-sec:last-of-type { border-bottom: 0; }
.fw-edit-h { margin: 0 0 var(--sp-2); font-size: var(--fs-s); font-weight: var(--fw-semibold); color: var(--ds-text); }
.fw-edit .ds-field { margin-bottom: var(--sp-3); gap: var(--sp-1); }
.fw-hint { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ds-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-selz { position: relative; display: block; }
.fw-selz .fw-zdot { position: absolute; left: 9px; top: 50%; margin-top: -4px; pointer-events: none; }
.fw-selz .ds-select { padding-left: var(--sp-6); width: 100%; }
.fw-edit .ds-select { width: 100%; }

/* Aktion als Segmentschalter */
.fw-seg { display: flex; gap: 2px; padding: 2px; background: var(--ds-bg-muted); border-radius: var(--r-s); }
.fw-seg button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 28px; margin: 0; padding: 0 var(--sp-2);
  background: transparent; border: 0; border-radius: 4px;
  font-family: inherit; font-size: var(--fs-s); font-weight: var(--fw-medium); color: var(--ds-text-2);
  cursor: pointer; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.fw-seg button svg { width: 14px; height: 14px; }
.fw-seg button:hover { background: var(--ds-bg-hover); color: var(--ds-text); }
.fw-seg button:active { background: var(--ds-bg-active); }
.fw-seg .fw-seg-allow.is-on { background: var(--ds-bg-surface); color: var(--ds-ok-text); box-shadow: 0 1px 2px rgba(19, 26, 33, 0.10), inset 0 0 0 1px var(--ds-ok); }
.fw-seg .fw-seg-deny.is-on { background: var(--ds-bg-surface); color: var(--ds-bad-text); box-shadow: 0 1px 2px rgba(19, 26, 33, 0.10), inset 0 0 0 1px var(--ds-bad); }
.fw .fw-comment-input { width: 100%; height: var(--ds-control-h-sm); font-size: var(--fs-s); }
.fw .fw-comment-input.leer { border-style: dashed; border-color: var(--ds-warn); }
.fw-edit-on { margin: 0 0 var(--sp-3); font-size: var(--fs-s); font-weight: var(--fw-medium); }
.fw-edit-warn { margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); }

/* ---------- Objekte ---------- */
.fw-obj { flex: 1; min-height: 0; }
.fw-obj-nav { width: 220px; flex-shrink: 0; overflow: auto; }
.fw-obj-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fw-obj-head {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: var(--sp-3) var(--sp-5) var(--sp-3); border-bottom: 1px solid var(--ds-border-subtle); flex-shrink: 0;
}
.fw-obj-head .fw-crumbs { order: -1; font-size: var(--fs-xs); }
.fw-obj-head .ds-crumbs > :last-child { font-weight: var(--fw-regular); color: var(--ds-text-3); }
.fw-h { margin: 0; font-size: var(--fs-l); font-weight: var(--fw-semibold); color: var(--ds-text); line-height: var(--lh-snug); }
.fw-objtab tbody td { height: 40px; }
.fw-objtab thead th:first-child, .fw-objtab tbody td:first-child { padding-left: var(--sp-5); }

.fw-topo-wrap {
  flex: 1; min-height: 0; overflow: auto; padding: var(--sp-6);
  background-color: var(--ds-bg-subtle);
  background-image: radial-gradient(var(--ds-border) 1px, transparent 1.2px);
  background-size: 18px 18px;
}
.fw-topo { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto; }
.fw-topo-edge { fill: none; stroke: var(--ds-border-strong); stroke-width: 1.5; }
.fw-topo-port { fill: var(--accent); stroke: var(--ds-bg-surface); stroke-width: 2; }
.fw-topo-card { fill: var(--ds-bg-surface); stroke: var(--ds-border); filter: drop-shadow(0 1px 2px rgba(19, 26, 33, 0.08)); }
.fw-topo-bar { fill: var(--z, var(--fw-z-any)); }
.fw-topo-name { fill: var(--ds-text); font-size: var(--fs-m); font-weight: var(--fw-semibold); font-family: var(--font-sans); }
.fw-topo-net { fill: var(--ds-text-2); font-size: var(--fs-s); font-family: var(--font-mono); }
.fw-topo-meta { fill: var(--ds-text-3); font-size: var(--fs-xs); font-family: var(--font-sans); }
.fw-topo-fw > rect:first-child { fill: var(--ds-dk-bg); filter: drop-shadow(0 6px 14px rgba(14, 22, 33, 0.25)); }
.fw-topo-fwmark { fill: var(--accent); }
.fw-topo-fwic { color: #fff; }
.fw-topo-fwname { fill: var(--ds-dk-text); font-size: var(--fs-m); font-weight: var(--fw-semibold); font-family: var(--font-sans); }
.fw-topo-fwhost { fill: var(--ds-dk-text-3); font-size: var(--fs-xs); font-family: var(--font-mono); }

/* ---------- Paketpruefung ---------- */
.fw-pl { flex: 1; min-height: 0; }
.fw-pl-side { width: 300px; flex-shrink: 0; overflow: auto; display: flex; flex-direction: column; }
.fw-pl-form { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--ds-border-subtle); }
.fw-pl-form .ds-field { margin: 0; gap: var(--sp-1); }
.fw-pl-form .ds-select { width: 100%; }
.fw-pl-run { width: 100%; justify-content: center; }
.fw-pl-run svg { width: 15px; height: 15px; }
.fw-pl-meta { margin: 0; font-size: var(--fs-xs); color: var(--ds-text-3); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fw-pl-hist { padding: 0 var(--sp-2) var(--sp-3); }
.fw-pl-h {
  display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  width: 100%; height: auto; margin: 0 0 1px; padding: 8px 10px;
  background: transparent; border: 0; border-radius: var(--r-s);
  font-family: inherit; color: var(--ds-text); text-align: left; cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}
.fw-pl-h:hover { background: var(--ds-bg-hover); }
.fw-pl-h:active { background: var(--ds-bg-active); }
.fw-pl-h.is-on { background: var(--ds-primary-soft); box-shadow: inset 3px 0 0 var(--accent); }
.fw-pl-h-flow { display: flex; align-items: center; gap: 5px; font-size: var(--fs-s); font-weight: var(--fw-medium); }
.fw-pl-h-flow svg { width: 12px; height: 12px; color: var(--ds-icon); }
.fw-pl-h-meta { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--ds-text-3); }
.fw-pl-h-meta .fw-objnm { font-size: var(--fs-xs); color: var(--ds-text-2); }
.fw-pl-h-v { margin-left: auto; font-weight: var(--fw-semibold); }
.fw-pl-h-v.allow { color: var(--ds-ok-text); }
.fw-pl-h-v.deny { color: var(--ds-bad-text); }
.fw-pl-main { flex: 1; min-width: 0; overflow: auto; padding: var(--sp-5) var(--sp-6); }
.fw-pl-res { padding: var(--sp-4) var(--sp-5) var(--sp-6); border: 1px solid var(--ds-border-subtle); border-radius: var(--r-l); background: var(--ds-bg-surface); }
.fw-pl-verdict-line { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.fw-pl-verdict { height: 26px; padding: 0 12px 0 10px; font-size: var(--fs-s); }
.fw-pl-by { font-size: var(--fs-l); font-weight: var(--fw-semibold); color: var(--ds-text); }
.fw-pl-viz { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto minmax(60px, 1fr) auto; align-items: center; }
.fw-pl-node {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 150px; padding: var(--sp-3) var(--sp-4);
  background: var(--ds-bg-subtle); border: 1px solid var(--ds-border-subtle); border-radius: var(--r-m);
}
.fw-pl-ip { font-family: var(--font-mono); font-size: var(--fs-s); color: var(--ds-text-2); }
.fw-pl-link { position: relative; height: 2px; margin: 0 var(--sp-2); background: var(--ds-border-strong); color: var(--ds-border-strong); }
.fw-pl-link::after {
  content: ''; position: absolute; right: -2px; top: -4px;
  border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.fw-pl-link--allow { background: var(--ds-ok); color: var(--ds-ok); }
.fw-pl-link--deny { background: repeating-linear-gradient(90deg, var(--ds-bad) 0 6px, transparent 6px 11px); color: transparent; }
.fw-pl-link--deny::after { display: none; }
.fw-pl-stop {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ds-bad); color: #fff; box-shadow: 0 0 0 4px var(--ds-bg-surface);
}
.fw-pl-stop svg { width: 13px; height: 13px; stroke-width: 3; }
.fw-pl-svc {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  padding: 0 4px; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ds-text-3); background: var(--ds-bg-surface);
}
.fw-pl-fw {
  display: flex; align-items: center; gap: 10px;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-m);
  background: var(--ds-dk-bg); color: var(--ds-dk-text); box-shadow: 0 6px 16px -6px rgba(14, 22, 33, 0.4);
}
.fw-pl-fw strong { display: block; font-size: var(--fs-m); font-weight: var(--fw-semibold); }
.fw-pl-fw-ic { width: 30px; height: 30px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; }
.fw-pl-fw-ic svg { width: 17px; height: 17px; }
.fw-pl-fw-host { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ds-dk-text-3); }
.fw-pl-flow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fw-sec-t { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-s); font-weight: var(--fw-semibold); color: var(--ds-text); }
.fw-pl-steps { border: 1px solid var(--ds-border-subtle); border-radius: var(--r-m); overflow: hidden; }
.fw-pl-steps tbody td { height: 38px; }
.fw-pl-steps tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.fw-pl-steps tbody tr.is-selected { box-shadow: none; }
.fw-pl-steps tbody tr.inaktiv td { color: var(--ds-text-3); }

/* ---------- Log ---------- */
.fw-logwrap { flex: 1; }
.fw-logtab tbody td { height: 40px; }
.fw-logtab thead th:first-child, .fw-logtab tbody td:first-child { padding-left: var(--sp-5); }
.fw-logtab .fw-w-zeit { width: 110px; }
.fw-logtab .fw-w-user { width: 170px; }
.fw-logtab .fw-w-akt { width: 240px; }
.fw-user { display: inline-flex; align-items: center; gap: var(--sp-2); }
.fw-logakt { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-semibold); }
.fw-logic { width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--ds-bg-muted); color: var(--accent); }
.fw-logic svg { width: 14px; height: 14px; }

/* ---------- Aenderungen pruefen (Commit) ----------
   Der Schleier liegt ueber dem Werkzeug, nicht ueber dem ganzen Desktop. */
.fw .ds-veil.fw-veil { position: absolute; z-index: 5; padding: var(--sp-4); }
.fw-modal { width: 960px; max-height: 100%; }
.fw-modal-bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--ds-border-subtle); flex-shrink: 0; }
.fw-modal-mark { width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; flex-shrink: 0; }
.fw-modal-mark svg { width: 18px; height: 18px; }
.fw-modal-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fw-modal-t strong { font-size: var(--fs-l); font-weight: var(--fw-semibold); color: var(--ds-text); }
.fw-modal-t span { font-size: var(--fs-s); color: var(--ds-text-3); }
.fw-modal-body { flex: 1; min-height: 0; overflow: auto; padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.fw-cm-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-6); align-items: start; }
.fw-kv { grid-template-columns: 130px 1fr; margin: 0; }
.fw-kv dd { display: flex; align-items: center; gap: var(--sp-2); }
.fw-cm-tiles { display: grid; grid-template-columns: repeat(4, 96px); gap: var(--sp-2); }
.fw-cm-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--ds-bg-subtle); border: 1px solid var(--ds-border-subtle); border-radius: var(--r-m); }
.fw-cm-v { font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--ds-text); line-height: 1.1; }
.fw-cm-tile.ok .fw-cm-v { color: var(--ds-ok-text); }
.fw-cm-tile.bad .fw-cm-v { color: var(--ds-bad-text); }
.fw-cm-l { font-size: var(--fs-xs); color: var(--ds-text-3); }
.fw-hinweise { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ds-border-subtle); border-radius: var(--r-m); overflow: hidden; font-size: var(--fs-s); line-height: var(--lh-base); color: var(--ds-text); }
.fw-hinweise li { display: flex; align-items: flex-start; gap: var(--sp-2); padding: 7px var(--sp-3); }
.fw-hinweise li + li { border-top: 1px solid var(--ds-border-subtle); }
.fw-hw-ic { display: inline-flex; color: var(--ds-warn-text); margin-top: 2px; flex-shrink: 0; }
.fw-hw-ic.ok { color: var(--ds-ok-text); }
.fw-hw-ic svg { width: 15px; height: 15px; }
.fw-hinweise-leer { margin: 0; display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-s); color: var(--ds-ok-text); font-weight: var(--fw-semibold); }
.fw-diff-wrap { border: 1px solid var(--ds-border-subtle); border-radius: var(--r-m); overflow: hidden; }
.fw-diff tbody td { height: 38px; }
.fw-diff-plus { color: var(--ds-ok-text); font-weight: var(--fw-bold); font-family: var(--font-mono); width: 14px; }
.fw-diff tbody tr.inaktiv td { color: var(--ds-text-3); }
.fw-diff tbody tr.inaktiv td > * { opacity: 0.6; }
.fw-diff tbody tr.fw-diff-default td { color: var(--ds-text-3); background: var(--ds-bg-subtle); }
.fw-leerwert { color: var(--ds-text-3); font-style: italic; }
.fw-modal-foot { padding: var(--sp-3) var(--sp-5); }

/* ---------- Verkehrsmitschnitt (Auswertung) ---------- */
.fw-sec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.fw-res {
  display: flex; flex-direction: column; gap: var(--sp-3);
  max-width: 1180px; margin: 0 auto; box-sizing: border-box;
  padding: var(--sp-6) var(--sp-6) var(--sp-2);
}
.fw-res-tool { border: var(--bd); box-shadow: var(--sh-1); }
.fw-res-kpis {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); background: var(--ds-bg-subtle); border-bottom: var(--bd);
}
.fw-res-kpis .ds-kpi { min-width: 150px; }
.fw-logres { table-layout: fixed; }
.fw-w-zeit { width: 88px; }
.fw-w-erg { width: 118px; }
.fw-w-svc2 { width: 160px; }
.fw-w-regel { width: 190px; }
.fw-logres tbody td { height: 44px; }
.fw-logres tbody tr.fehler td { background: var(--ds-bad-soft); }
.fw-logres tbody tr.fehler td:first-child { box-shadow: inset 3px 0 0 var(--ds-bad); }
.fw-regel { color: var(--ds-text-2); }
.fw-abw { margin-left: var(--sp-2); }
.fw-res-tool.is-live .ds-toolhead-dot { animation: fw-puls 1.6s var(--ease) infinite; }
@keyframes fw-puls { 50% { opacity: 0.35; } }

.fw-sum ul, .fw-lenkung ul { margin: var(--sp-1) 0 0; padding-left: var(--sp-5); }
.fw-sum li { margin: 2px 0; color: var(--ds-text); }
.fw-lenkung > span { color: var(--ds-text); }
.fw-lenkung strong { color: var(--ds-warn-text); }
.fw-sum, .fw-lenkung { font-size: var(--fs-m); }
.fw-hits { padding: 0; overflow: hidden; }
.fw-hits .fw-sec-head { border-bottom: var(--bd); }
.fw-hits tbody tr.inaktiv td { color: var(--ds-text-3); }
.fw-w-bar { width: 220px; }
.fw-hitbar { display: flex; align-items: center; gap: var(--sp-2); }
.fw-hitbar-track { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--ds-bg-sunken); overflow: hidden; }
.fw-hitbar-fill { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); }
.fw-hitbar-v { min-width: 2ch; text-align: right; font-weight: var(--fw-semibold); color: var(--ds-text); }
.fw-hitbar-v.fw-hit-null { color: var(--ds-warn-text); }
.fw-res-foot { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-1) 0 var(--sp-2); }

/* ---------- Zwei Fenster nebeneinander (Container wz) ---------- */
.fw-split { position: relative; }
.fw-pl-main { container: fwpl / inline-size; }
.fw-pl-verdict-line { flex-wrap: wrap; row-gap: var(--sp-2); }
.fw-diff-wrap { overflow-x: auto; }

/* Bearbeitung: im schmalen Fenster als Ueberlagerung von rechts (Schliessen-Knopf im Kopf),
   die Regeltabelle behaelt ihre Breite und rollt seitlich. */
@container wz (max-width: 820px) {
  .fw-edit {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 3;
    width: min(340px, calc(100% - 56px)); box-shadow: var(--sh-3);
  }
  .fw-policy td.fw-c-kom { max-width: 240px; }
}

/* Objekte: Objektarten als waagerechte Leiste ueber der Tabelle (Eintraege ohne title) */
@container wz (max-width: 760px) {
  .fw-obj { flex-direction: column; }
  .fw-obj > * + * { border-left: 0; }
  .fw-obj-nav { width: auto; flex-shrink: 0; overflow: visible; border-bottom: 1px solid var(--ds-border-subtle); }
  .fw-obj-nav .ds-navlist { flex-direction: row; flex-wrap: wrap; gap: 2px var(--sp-1); padding: 6px var(--sp-2); }
  .fw-obj-nav .ds-navhead { display: none; }
  .fw-obj-nav .ds-navitem { width: auto; height: 32px; }
  .fw-obj-nav .ds-navitem.is-on::before { left: 10px; right: 10px; top: auto; bottom: -6px; width: auto; height: 3px; }
  .fw-obj-main { flex: 1; }
  .fw-obj-head { padding: var(--sp-3) var(--sp-4); }
  .fw-objtab thead th:first-child, .fw-objtab tbody td:first-child,
  .fw-logtab thead th:first-child, .fw-logtab tbody td:first-child { padding-left: var(--sp-4); }
  .fw-topo-wrap { padding: var(--sp-4); }
}

/* Paketpruefung: weniger Innenabstand, im sehr schmalen Fenster Formular ueber dem
   Ergebnis, beides rollt gemeinsam. */
@container wz (max-width: 900px) {
  .fw-pl-main { padding: var(--sp-4); }
  .fw-pl-res { padding: var(--sp-4); }
  .fw-pl-verdict-line { margin-bottom: var(--sp-4); }
}
@container wz (max-width: 680px) {
  .fw-pl { display: block; flex: 1; height: auto; overflow-y: auto; }
  .fw-pl > * + * { border-left: 0; border-top: 1px solid var(--ds-border-subtle); }
  .fw-pl-side { width: auto; overflow: visible; }
  .fw-pl-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }
  .fw-pl-form > .fw-h, .fw-pl-form > .fw-pl-meta { grid-column: 1 / -1; }
  .fw-pl-hist { max-height: 168px; overflow-y: auto; }
  .fw-pl-main { overflow: visible; }
}
/* Verbindungsbild senkrecht, wenn die Ergebnisflaeche schmal ist */
@container fwpl (max-width: 700px) {
  .fw-pl-viz { grid-template-columns: minmax(0, 280px); justify-content: center; }
  .fw-pl-node { min-width: 0; }
  .fw-pl-link { width: 2px; height: 44px; margin: var(--sp-1) 0; justify-self: center; }
  .fw-pl-link::after {
    right: auto; left: -4px; top: auto; bottom: -2px;
    border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid currentColor; border-bottom: 0;
  }
  .fw-pl-link--deny { background: repeating-linear-gradient(180deg, var(--ds-bad) 0 6px, transparent 6px 11px); }
  .fw-pl-svc { left: 14px; top: 50%; bottom: auto; transform: translateY(-50%); }
}

/* Log: Spalten schmaler, die Tabelle rollt seitlich statt die Details zu zerdruecken */
@container wz (max-width: 680px) {
  .fw-logtab { min-width: 600px; }
  .fw-logtab .fw-w-zeit { width: 92px; }
  .fw-logtab .fw-w-user { width: 136px; }
  .fw-logtab .fw-w-akt { width: 190px; }
}

/* Commit-Dialog: Angaben und Kacheln untereinander */
@container wz (max-width: 760px) {
  .fw .ds-veil.fw-veil { padding: var(--sp-2); }
  .fw-modal-bar { padding: var(--sp-3) var(--sp-4); }
  .fw-modal-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  .fw-cm-top { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .fw-cm-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fw-kv { grid-template-columns: 110px minmax(0, 1fr); }
  .fw-modal-foot { flex-wrap: wrap; row-gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); }
}

@media (prefers-reduced-motion: reduce) {
  .fw-res-tool.is-live .ds-toolhead-dot { animation: none; }
}