/* Flow-Designer (SPEC-0662 §D) — Stilblatt der Boundary <vc-flow-designer>.
 *
 * Konsumiert AUSSCHLIESSLICH semantische Design-Tokens (styles/semantic.css +
 * styles/themes/*.css) und die Achsen aus scale-tokens.css. KEINE Festfarben:
 * alle vier Themes (light, dark, contrast, avangers) ueberschreiben genau die
 * hier verwendeten Token-Namen, ein Hexwert an dieser Stelle wuerde in drei
 * von vier Themes falsch stehen.
 *
 * WARUM DAS WURZELELEMENT `display: grid` UND EINE MINDESTHOEHE BEKOMMT:
 * Custom Elements sind `display: inline`. Ohne diese beiden Angaben kollabiert
 * die Hoehenkette (Buehne -> SVG -> `height: 100%`) auf 0 und die Leinwand
 * faengt keinen Zeiger mehr („element intercepts pointer events").
 */

vc-flow-designer,
.vc-flow-designer {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr) 344px;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "head head head"
    "palette stage sidebar";
  min-height: 520px;
  height: 100%;
  min-width: 0;
  /* Bezug fuer die Abdunklung der Tray-Schicht (SPEC-0722). Steht im
     Stylesheet und NICHT zur Laufzeit: eine zur Laufzeit gesetzte Eigenschaft
     patcht der naechste Renderlauf weg. */
  position: relative;
  background: var(--bg);
  color: var(--text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  outline: none;
}

.vc-flow-designer:focus-visible {
  box-shadow: inset 0 0 0 2px var(--primary);
}

/* ------------------------------- Tray ------------------------------------
 * SPEC-0722. Node-REDs Eigenschaften-Fenster ist ein OVERLAY, kein Panel:
 * `.red-ui-tray{position:absolute;top:0;bottom:0;right:-1000px}`. Es
 * beansprucht keinen Layoutplatz — deshalb verschiebt sich beim Oeffnen nie
 * ein Knoten im Blickfeld, und genau das war der Betreiberbefund an der
 * Umbenennen-Box ("vergroessert den Kopfbereich").
 *
 * Wir legen die Schicht in DIESELBE Gitterzelle wie Palette, Buehne und
 * Seitenleiste, statt sie absolut zu positionieren. Damit entfaellt jede
 * Rechnung mit der Hoehe der Kopfleiste — und die kann sich aendern. */
.vc-flow-designer__tray-schicht {
  grid-column: 1 / -1;
  grid-row: 2;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
  /* Die Schicht selbst faengt nichts ab; Abdunklung und Tray tun es. */
  pointer-events: none;
}

/* Abdunklung. Node-RED legt vier davon (Kopf, Flaeche, Palette, Seitenleiste)
 * und macht alles darunter unbedienbar — das ist die Voraussetzung dafuer,
 * dass "Abbrechen" und "ein Rueckgaengig-Schritt je Bearbeitung" ueberhaupt
 * ehrlich angeboten werden koennen. */
.vc-flow-designer__tray-schatten {
  position: absolute;
  inset: 0;
  background: var(--core-color-surface-scrim);
  pointer-events: auto;
}

.vc-flow-designer__tray {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface-elevated);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-overlay);
  pointer-events: auto;
}

/* Ziehgriff an der LINKEN Kante, wie in Node-RED
 * (`.red-ui-tray-resize-handle{width:7px;left:-9px;cursor:col-resize}`). */
.vc-flow-designer__tray-griff {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  width: 8px;
  cursor: col-resize;
  background: transparent;
  border: 0;
  padding: 0;
  z-index: 1;
}

.vc-flow-designer__tray-griff:hover,
.vc-flow-designer__tray-griff:focus-visible {
  background: var(--primary-soft);
  outline: none;
}

.vc-flow-designer__tray-kopf {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* Brotkrume ueber alle gestapelten Trays — Node-RED setzt zwischen die
 * Glieder ein ">" (`.red-ui-tray-breadcrumbs li:not(:last-child):after`). */
.vc-flow-designer__tray-pfad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-caption);
  color: var(--text-muted);
}

.vc-flow-designer__tray-pfad li:not(:last-child)::after {
  content: "›";
  margin-left: var(--space-1);
  color: var(--text-muted);
}

.vc-flow-designer__tray-pfad li:last-child {
  color: var(--text);
  font-weight: 600;
}

.vc-flow-designer__tray-knoepfe {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* "Loeschen" steht links und damit weit weg von "Fertig" — dieselbe Trennung
 * wie in Node-RED (`class:"leftButton"` + `float:left`). Eine destruktive
 * Schaltflaeche direkt neben der bestaetigenden ist eine Falle. */
.vc-flow-designer__tray-knoepfe .is-links {
  margin-right: auto;
}

.vc-flow-designer__tray-koerper {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.vc-flow-designer__tray-fuss {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border);
  min-height: 44px;
}

.vc-flow-designer__tray-hinweis {
  margin: 0;
  font-size: var(--font-size-caption);
  color: var(--text-muted);
}

/* ------------------------------- Kopfleiste -----------------------------
 * GEMESSEN an Node-RED 4.1.1 (`red/red.min.js`): `#red-ui-header` traegt
 * links `span.red-ui-header-logo` und rechts `ul.red-ui-header-toolbar`; in
 * der Leiste steht ZUERST die Deploy-Gruppe (`prependTo`) und DANN der
 * Hamburger `#red-ui-header-button-sidemenu` (`appendTo`). Ueber allem liegt
 * bei offenem Menue `#red-ui-header-shade`.
 *
 * WARUM DER KOPF KEINE SPALTE MEHR IST: die alte Fassung stapelte eine
 * Aktionsleiste und darunter die Schubladen — der Kopf wuchs beim Oeffnen und
 * schob die Buehne nach unten. Node-RED haelt seinen Kopf auf EINER Zeile und
 * legt Import/Export als Dialog DARUEBER; genau das machen die
 * `__dialog`-Regeln weiter unten. */

.vc-flow-designer__head {
  grid-area: head;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-3);
  min-height: 48px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.vc-flow-designer__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-right: auto;
  min-width: 0;
  color: var(--text);
}

.vc-flow-designer__logo-icon {
  font-size: 20px;
  line-height: 1;
  color: var(--primary);
}

.vc-flow-designer__logo-name {
  font-weight: 700;
  font-size: var(--font-size-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vc-flow-designer__header-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.vc-flow-designer__header-item {
  position: relative;
  display: flex;
  align-items: center;
}

.vc-flow-designer__header-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 30px;
  padding: 0 var(--space-1);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.vc-flow-designer__header-button:hover,
.vc-flow-designer__header-button[aria-expanded='true'] {
  background: var(--surface-elevated);
  border-color: var(--border);
}

.vc-flow-designer__header-button:focus-visible,
.vc-flow-designer__deploy:focus-visible,
.vc-flow-designer__deploy-options:focus-visible,
.vc-flow-designer__footer-button:focus-visible,
.vc-flow-designer__footer-toggle:focus-visible,
.vc-flow-designer__menu-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* ------------------------------ Deploy-Bereich -------------------------- */

.vc-flow-designer__deploy-group {
  display: inline-flex;
  align-items: stretch;
}

.vc-flow-designer__deploy,
.vc-flow-designer__deploy-options {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 30px;
  padding: 0 var(--space-2);
  border: 1px solid var(--primary);
  background: var(--primary);
  color: var(--text-inverse);
  font-size: var(--font-size-body-sm);
  font-weight: 600;
  cursor: pointer;
}

.vc-flow-designer__deploy {
  border-radius: var(--radius-control) 0 0 var(--radius-control);
  border-right-width: 0;
}

.vc-flow-designer__deploy-options {
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  padding: 0;
  min-width: 26px;
  justify-content: center;
}

.vc-flow-designer__deploy-icon {
  font-size: 18px;
  line-height: 1;
}

.vc-flow-designer__deploy[disabled] {
  opacity: 0.45;
  cursor: default;
}

.vc-flow-designer__notify {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  max-width: 60ch;
  box-shadow: var(--shadow-card);
}

/* -------------------------------- Menues --------------------------------
 * STAPELORDNUNG, gemessen an einem Defekt: Menue (8) > Abdunklung (7) >
 * Dialog/Meldung (6) > Navigator (3). Zuerst lag das Menue UNTER dem
 * Import/Export-Dialog — wer erst exportierte und dann das Menue oeffnete,
 * traf den Dialog statt den Eintrag („subtree intercepts pointer events",
 * gemessen im Playwright-Protokoll). Das Menue ist in Node-RED immer oben. */

.vc-flow-designer__shade {
  position: fixed;
  inset: 0;
  z-index: 7;
  background: transparent;
}

.vc-flow-designer__menu {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  z-index: 8;
  min-width: 220px;
  margin: 0;
  padding: var(--space-1) 0;
  list-style: none;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-overlay);
}

/* Das Untermenue klappt zur SEITE auf — der Hamburger sitzt am rechten Rand,
 * ein Aufklappen nach rechts liefe aus dem Fenster. */
.vc-flow-designer__menu--unter {
  top: -1px;
  right: calc(100% + 2px);
  min-width: 280px;
}

.vc-flow-designer__menu-zweig {
  position: relative;
}

.vc-flow-designer__menu-trenner {
  height: 1px;
  margin: var(--space-1) 0;
  background: var(--border);
}

.vc-flow-designer__menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-1) var(--space-3);
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--font-size-body-sm);
  text-align: left;
  cursor: pointer;
}

.vc-flow-designer__menu-item:hover:not([disabled]) {
  background: var(--primary-soft);
}

.vc-flow-designer__menu-item[disabled] {
  opacity: 0.4;
  cursor: default;
}

.vc-flow-designer__menu-text {
  display: flex;
  flex-direction: column;
  margin-right: auto;
}

.vc-flow-designer__menu-sublabel {
  font-size: var(--font-size-caption);
  color: var(--text-muted);
}

.vc-flow-designer__menu-mark,
.vc-flow-designer__menu-pfeil {
  font-size: 16px;
  line-height: 1;
  color: var(--text-muted);
  width: 16px;
}

.vc-flow-designer__drawer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface-elevated);
}

/* Import/Export liegen wie in Node-RED als Dialog UEBER dem Editor
 * (`#red-ui-clipboard-dialog`) und nicht mehr im Kopf: der Kopf bleibt damit
 * auf seiner einen Zeile und die Buehne springt beim Oeffnen nicht. */
.vc-flow-designer__dialog {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: var(--space-3);
  z-index: 6;
  width: min(560px, calc(100vw - 2 * var(--space-3)));
  box-shadow: var(--shadow-overlay);
}

/* Kopfzeile der Import-/Export-Dialoge mit Schliessknopf.
   BEFUND (Betreiber, beim Benutzen): der Import liess sich nur ueber den
   Menueeintrag zuklappen, der Export gar nicht. Apple HIG, Microsoft Fluent
   und Google Material verlangen uebereinstimmend einen sichtbaren
   Schliessweg. */
.vc-flow-designer__dialog-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.vc-flow-designer__dialog-titel {
  font-weight: 600;
  color: var(--text);
}

.vc-flow-designer__dialog-schliessen {
  /* 32 px Zielgroesse: die drei Designsysteme fordern zwischen 24 und 44 px;
     32 ist der Wert, den auch die uebrigen Kopfzeilenknoepfe hier tragen. */
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.vc-flow-designer__dialog-schliessen:hover {
  background: var(--control-bg-hover);
  color: var(--text);
}

.vc-flow-designer__dialog-schliessen:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Im erzwungenen Kontrastmodus zeichnet der Browser keinen box-shadow —
   dort ist `outline` das einzig wirksame Mittel (SPEC-0646). */
@media (forced-colors: active) {
  .vc-flow-designer__dialog-schliessen:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}

/* Ziel des Imports — Node-REDs Zwei-Knopf-Gruppe „Import to".
   Zwei Knoepfe statt einer Auswahlliste, weil beide Ziele gleich wichtig sind
   und man die Wahl sehen soll, ohne sie aufzuklappen. */
.vc-flow-designer__import-ziel {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.vc-flow-designer__knopfgruppe {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.vc-flow-designer__gruppenknopf {
  padding: var(--space-1) var(--space-3);
  border: 0;
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--font-size-caption);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.vc-flow-designer__gruppenknopf + .vc-flow-designer__gruppenknopf {
  border-left: 1px solid var(--border);
}

.vc-flow-designer__gruppenknopf:hover:not(:disabled) {
  background: var(--control-bg-hover);
  color: var(--text);
}

.vc-flow-designer__gruppenknopf.is-active {
  background: var(--primary);
  color: var(--text-inverse);
}

/* Gesperrt heisst: die Datei bringt eigene Flows mit. Der Knopf bleibt
   SICHTBAR statt zu verschwinden — sonst waere unklar, dass es die Wahl
   ueberhaupt gibt und warum sie hier nicht offensteht. */
.vc-flow-designer__gruppenknopf:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.vc-flow-designer__gruppenknopf:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* Typwaehler (SPEC-0726) — Node-REDs `red-ui-typedInput-container`.
   Waehler und Wert bilden EIN Bedienelement: gemeinsamer Rahmen, innen
   getrennt. Zwei einzeln gerahmte Felder nebeneinander saehen aus wie zwei
   unabhaengige Eingaben, und genau das sind sie nicht. */
.vc-flow-designer__typed {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
  min-width: 0;
}

.vc-flow-designer__typed:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.vc-flow-designer__typed.is-fehlerhaft {
  border-color: var(--danger);
}

.vc-flow-designer__typed-typ {
  flex: 0 0 auto;
  border: 0;
  border-right: 1px solid var(--border);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--font-size-caption);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  max-width: 11rem;
}

.vc-flow-designer__typed-typ:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.vc-flow-designer__typed-wert {
  flex: 1 1 auto;
  display: flex;
  min-width: 0;
}

.vc-flow-designer__typed-eingabe {
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: var(--space-1) var(--space-2);
  min-width: 0;
  font: inherit;
}

.vc-flow-designer__typed-eingabe:focus {
  outline: none;
}

/* Typen ohne freien Wert zeigen ein festes Label statt eines Feldes. */
.vc-flow-designer__typed-label {
  flex: 1 1 auto;
  padding: var(--space-1) var(--space-2);
  color: var(--text-muted);
  font-style: italic;
}

.vc-flow-designer__typed-fehler {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-size-caption);
  color: var(--danger);
}

/* Regelliste (SPEC-0734) — Node-REDs `editableList`: eine Zeile je Regel.
   Die Zeile bricht auf schmalen Flaechen um, statt waagerecht zu scrollen;
   im Tray ist die Breite ziehbar, aber nicht garantiert. */
.vc-flow-designer__regeln {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.vc-flow-designer__regel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.vc-flow-designer__regel-art {
  flex: 0 0 auto;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: var(--font-size-caption);
}

/* Die Wertfelder teilen sich den Rest und schrumpfen gemeinsam. */
.vc-flow-designer__regel-feld {
  flex: 1 1 12rem;
  min-width: 0;
}

.vc-flow-designer__regel-weg {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.vc-flow-designer__regel-weg:hover {
  background: var(--control-bg-hover);
  color: var(--danger);
}

.vc-flow-designer__regel-weg:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.vc-flow-designer__regeln-leer {
  margin: 0;
  padding: var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-caption);
  font-style: italic;
}

.vc-flow-designer__drawer-field {
  gap: var(--space-1);
}

.vc-flow-designer__drawer-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.vc-flow-designer__code {
  width: 100%;
  box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-size-caption);
  line-height: var(--line-height-normal);
  border-radius: var(--radius-control);
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--text);
  padding: var(--space-2);
  resize: vertical;
}

.vc-flow-designer__code:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.vc-flow-designer__warnings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.vc-flow-designer__warning {
  font-size: var(--font-size-caption);
  color: var(--warning);
  border-left: 2px solid var(--warning);
  padding-left: var(--space-2);
  word-break: break-word;
}

/* -------------------------------- Palette ------------------------------- */

.vc-flow-designer__palette {
  grid-area: palette;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 0;
  padding: var(--space-3);
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.vc-flow-designer__palette-search {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--text);
  font: inherit;
}

.vc-flow-designer__palette-search:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.vc-flow-designer__palette-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow-y: auto;
  min-height: 0;
  padding-right: var(--space-1);
}

.vc-flow-designer__palette-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.vc-flow-designer__palette-category {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.vc-flow-designer__palette-node {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-control);
  background: var(--surface-elevated);
  color: var(--text);
  font: inherit;
  cursor: grab;
  touch-action: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.vc-flow-designer__palette-node:hover {
  background: var(--control-bg-hover);
  border-color: var(--primary);
}

.vc-flow-designer__palette-node:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.vc-flow-designer__palette-node.is-adapter-boundary {
  border-left-color: var(--warning);
  border-style: dashed;
}

/* Die Katalog-Symbole sind ZEICHEN (⏱, ⇢, ⑂), keine Material-Icon-Namen —
 * deshalb ohne die Klasse `material-icons`, die sie in Ligaturen zerlegen
 * wuerde. Feste Breite, damit die Beschriftungen buendig stehen. */
.vc-flow-designer__palette-icon {
  flex: 0 0 auto;
  width: 1.4em;
  text-align: center;
  font-size: 1.15em;
  line-height: 1;
  color: var(--text-muted);
}

.vc-flow-designer__palette-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vc-flow-designer__palette-badge {
  flex: 0 0 auto;
  font-size: var(--font-size-caption);
}

.vc-flow-designer__palette-empty {
  margin: 0;
  padding: var(--space-3);
  color: var(--text-muted);
  font-size: var(--font-size-body-sm);
}

/* --------------------------------- Buehne ------------------------------- */

/* GEMESSEN: Node-REDs `#red-ui-workspace-footer` haengt IM Arbeitsbereich,
 * nicht ueber die ganze Editorbreite — die Statusleiste steht deshalb hier in
 * der Buehne und nicht im Wurzelraster. Zeile 1 traegt die Leinwand, Zeile 2
 * die Leiste; `minmax(0, 1fr)` haelt die Hoehenkette (Custom Elements sind
 * `display: inline`, ohne diese Angabe faellt das SVG auf 0). */
.vc-flow-designer__stage {
  grid-area: stage;
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--bg);
}

.vc-flow-designer__canvas {
  width: 100%;
  height: 100%;
  min-height: 320px;
  display: block;
  touch-action: none;
  user-select: none;
  cursor: default;
}

.vc-flow-designer.is-panning .vc-flow-designer__canvas {
  cursor: grabbing;
}

.vc-flow-designer.is-wiring .vc-flow-designer__canvas {
  cursor: crosshair;
}

.vc-flow-designer__canvas-bg {
  cursor: grab;
}

.vc-flow-designer__grid-line {
  stroke: var(--border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* ---- Knoten ---- */

.vc-flow-designer__node {
  cursor: move;
}

.vc-flow-designer__node-box {
  fill: var(--surface-elevated);
  stroke: var(--border-strong);
  stroke-width: 1;
}

.vc-flow-designer__node-accent {
  fill: var(--primary);
}

.vc-flow-designer__node.is-adapter-boundary .vc-flow-designer__node-accent {
  fill: var(--warning);
}

.vc-flow-designer__node.is-adapter-boundary .vc-flow-designer__node-box {
  stroke: var(--warning);
  stroke-dasharray: 4 3;
}

.vc-flow-designer__node:hover .vc-flow-designer__node-box {
  stroke: var(--primary);
}

.vc-flow-designer__node.is-selected .vc-flow-designer__node-box {
  stroke: var(--primary);
  stroke-width: 2.5;
  stroke-dasharray: none;
}

.vc-flow-designer__node-label {
  fill: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  pointer-events: none;
}

.vc-flow-designer__port {
  fill: var(--surface);
  stroke: var(--primary);
  stroke-width: 2;
  cursor: crosshair;
}

.vc-flow-designer__port:hover {
  fill: var(--primary);
}

/* ---- Kanten ---- */

.vc-flow-designer__wire {
  cursor: pointer;
}

.vc-flow-designer__wire-hit {
  stroke: transparent;
  stroke-width: 14;
  pointer-events: stroke;
}

.vc-flow-designer__wire-line {
  stroke: var(--border-strong);
  stroke-width: 2.5;
  pointer-events: none;
}

.vc-flow-designer__wire:hover .vc-flow-designer__wire-line {
  stroke: var(--primary);
}

.vc-flow-designer__wire.is-selected .vc-flow-designer__wire-line {
  stroke: var(--primary);
  stroke-width: 4;
}

.vc-flow-designer__preview-wire {
  stroke: var(--primary);
  stroke-width: 2.5;
  stroke-dasharray: 6 4;
  pointer-events: none;
  opacity: 0;
}

.vc-flow-designer__preview-wire.is-active {
  opacity: 1;
}

/* --------------------------- Eigenschafts-Panel ------------------------- */

/* Seitenleiste mit Reitern (SPEC-0714) — Node-REDs `#red-ui-sidebar`:
 * eine Reiterliste ueber dem Inhaltsbereich, beide in EINER Hoehenkette.
 * `min-height: 0` an beiden Stellen ist Pflicht: ohne sie waechst der
 * Inhaltsbereich statt zu scrollen und schiebt die Reiter aus dem Bild. */
.vc-flow-designer__sidebar {
  grid-area: sidebar;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
}

.vc-flow-designer__sidebar-tabs {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--border);
  background: var(--surface-elevated);
}

.vc-flow-designer__sidebar-tab {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--font-size-body-sm);
  cursor: pointer;
}

.vc-flow-designer__sidebar-tab:hover {
  color: var(--text);
  background: var(--control-bg-hover);
}

.vc-flow-designer__sidebar-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--primary);
}

.vc-flow-designer__sidebar-tab:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.vc-flow-designer__sidebar-tab-icon {
  font-size: 1rem;
  line-height: 1;
}

.vc-flow-designer__sidebar-content {
  min-height: 0;
  display: grid;
}

.vc-flow-designer__sidebar-content > [hidden] {
  display: none;
}

.vc-flow-designer__properties {
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-3);
  background: var(--surface);
}

.vc-flow-designer__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.vc-flow-designer__panel-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}

.vc-flow-designer__panel-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.vc-flow-designer__panel-icon {
  flex: 0 0 auto;
  width: 1.6em;
  text-align: center;
  font-size: 1.4em;
  line-height: 1.2;
  color: var(--primary);
}

.vc-flow-designer__panel-title {
  margin: 0;
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--text);
}

.vc-flow-designer__panel-type {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-size-caption);
  color: var(--text-soft);
}

.vc-flow-designer__panel-help {
  margin: 0;
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-loose);
  color: var(--text-muted);
}

.vc-flow-designer__panel-boundary {
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-normal);
}

/* Konfigurationsknoten (Inventar C4): die geteilte Verbindung steht als
 * Auswahl im Panel, ihre Felder als abgesetzter Unterblock direkt darunter.
 * Alle Farben kommen aus den App-Token — keine Festwerte, damit die vier
 * Themes tragen. */
.vc-flow-designer__panel-config {
  align-items: stretch;
  gap: var(--space-2);
}

.vc-flow-designer__panel-config-actions {
  display: flex;
  gap: var(--space-2);
}

.vc-flow-designer__panel-config-fields {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--surface-elevated);
}

/* ------------------------------ Statusleiste ----------------------------
 * GEMESSEN: `#red-ui-workspace-footer` fuehrt zwei Eimer
 * (`.red-ui-statusbar-bucket-left`/`-right`); rechts stehen der
 * Navigator-Umschalter (`button.red-ui-footer-button-toggle`) und die
 * Zoom-Gruppe (`span.button-group` mit drei `button.red-ui-footer-button`).
 * Die Leiste ist eine ECHTE Zeile der Buehne, kein Ueberlager — sie darf die
 * Leinwand nicht verdecken. */

.vc-flow-designer__statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 26px;
  padding: 0 var(--space-2);
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.vc-flow-designer__statusbar-eimer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 24px;
}

.vc-flow-designer__statusbar-widget {
  display: inline-flex;
  align-items: center;
}

.vc-flow-designer__footer-gruppe {
  display: inline-flex;
  align-items: stretch;
}

.vc-flow-designer__footer-button,
.vc-flow-designer__footer-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  min-height: 20px;
  padding: 0 var(--space-1);
  border: 1px solid var(--border);
  background: var(--surface-elevated);
  color: var(--text-muted);
  cursor: pointer;
}

.vc-flow-designer__footer-button .material-icons,
.vc-flow-designer__footer-toggle .material-icons {
  font-size: 14px;
  line-height: 1;
}

.vc-flow-designer__footer-gruppe .vc-flow-designer__footer-button + .vc-flow-designer__footer-button {
  border-left-width: 0;
}

.vc-flow-designer__footer-gruppe .vc-flow-designer__footer-button:first-child {
  border-radius: var(--radius-control) 0 0 var(--radius-control);
}

.vc-flow-designer__footer-gruppe .vc-flow-designer__footer-button:last-child {
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
}

.vc-flow-designer__footer-toggle {
  border-radius: var(--radius-control);
}

.vc-flow-designer__footer-button:hover,
.vc-flow-designer__footer-toggle:hover {
  color: var(--text);
  background: var(--surface);
}

.vc-flow-designer__footer-toggle.is-selected {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-soft);
}

/* -------------------------------- Navigator -----------------------------
 * GEMESSEN: Node-RED legt den Navigator absolut in den Arbeitsbereich, unten
 * rechts, direkt UEBER der Statusleiste (`bottom: footer.height()`). Er ist
 * eine Uebersicht, kein Bedienfeld — die Leinwand darunter bleibt sichtbar. */

.vc-flow-designer__navigator {
  position: absolute;
  right: 0;
  bottom: 26px;
  z-index: 3;
  line-height: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card) 0 0 0;
  box-shadow: var(--shadow-card);
}

.vc-flow-designer__navigator[hidden] {
  display: none;
}

.vc-flow-designer__navigator-canvas {
  display: block;
  cursor: crosshair;
}

.vc-flow-designer__navigator-node {
  fill: var(--primary);
  opacity: 0.75;
}

.vc-flow-designer__navigator-view {
  fill: var(--primary-soft);
  fill-opacity: 0.25;
  stroke: var(--primary);
  stroke-width: 1;
}

/* Enge Fenster: die drei Spalten werden zu drei Zeilen, damit die Buehne
 * nicht auf wenige Pixel zusammenfaellt. */
@media (max-width: 1100px) {
  vc-flow-designer,
  .vc-flow-designer {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(320px, 1fr) auto;
    grid-template-areas:
      "head"
      "palette"
      "stage"
      "sidebar";
  }

  .vc-flow-designer__sidebar {
    border-left: none;
    border-top: 1px solid var(--border);
  }

  .vc-flow-designer__palette {
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 220px;
  }
}

/* --------------------------- Debug-Reiter (F1) --------------------------
 * Nachgebildet nach Node-REDs Debug-Seitenleiste (debug-utils.js:40-55):
 * Kopfleiste, Filterkasten, scrollende Nachrichtenliste. Die Farbrollen der
 * Typen und Stufen kommen aus semantischen Tokens — Node-REDs Hexwerte
 * stuenden in drei der vier Themes falsch.
 */

.vc-flow-designer__debug-pane {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  min-height: 0;
  background: var(--surface);
}

.vc-flow-designer__debug-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-2);
  border-bottom: 1px solid var(--border);
  background: var(--surface-elevated);
}

.vc-flow-designer__debug-count {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--font-size-body-sm);
  font-variant-numeric: tabular-nums;
}

.vc-flow-designer__debug-filter-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  border-bottom: 1px solid var(--border);
  background: var(--surface-overlay);
}

.vc-flow-designer__debug-filter-box[hidden] {
  display: none;
}

.vc-flow-designer__debug-filter-actions {
  display: flex;
  gap: var(--space-1);
}

.vc-flow-designer__debug-notice {
  margin: var(--space-2);
}

.vc-flow-designer__debug-list {
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-2);
  font-size: var(--font-size-body-sm);
}

.vc-flow-designer__debug-empty {
  margin: 0;
  color: var(--text-muted);
}

.vc-flow-designer__debug-msg {
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  overflow-wrap: anywhere;
}

.vc-flow-designer__debug-msg[hidden] {
  display: none;
}

/* Node-RED faerbt die Zeile nach der Protokollstufe (ERROR 20, WARN 30 —
 * @node-red/util/lib/log.js:134-139). */
.vc-flow-designer__debug-msg--level-20 {
  border-left-color: var(--danger);
  background: var(--danger-soft);
}

.vc-flow-designer__debug-msg--level-30 {
  border-left-color: var(--warning);
  background: var(--warning-soft);
}

.vc-flow-designer__debug-msg-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-size-body-sm);
}

.vc-flow-designer__debug-msg-date {
  font-variant-numeric: tabular-nums;
}

.vc-flow-designer__debug-msg-name {
  padding: 0;
  border: none;
  background: none;
  color: var(--primary);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.vc-flow-designer__debug-msg-topic {
  color: var(--text-soft);
}

.vc-flow-designer__debug-msg-payload {
  display: block;
  margin-top: var(--space-1);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.vc-flow-designer__debug-msg-object > summary {
  cursor: pointer;
  color: var(--text-muted);
}

.vc-flow-designer__debug-msg-object-entry {
  display: flex;
  gap: var(--space-1);
  padding-left: var(--space-3);
}

.vc-flow-designer__debug-msg-object-key {
  color: var(--text-muted);
}

.vc-flow-designer__debug-msg-object-key::after {
  content: ":";
}

.vc-flow-designer__debug-msg-type-string {
  color: var(--success);
}

.vc-flow-designer__debug-msg-type-number {
  color: var(--info);
}

.vc-flow-designer__debug-msg-type-null {
  color: var(--text-muted);
  font-style: italic;
}

.vc-flow-designer__debug-msg-type-other {
  color: var(--primary);
}

.vc-flow-designer__debug-msg-type-meta {
  color: var(--text-muted);
}

/* ----------------------- Knotenstatus am Knoten (F3) ---------------------
 * Node-RED laesst genau sechs Fuellfarben zu (red.js:22747-22754) und zwei
 * Formen (`dot` gefuellt, `ring` nur Kontur). Die BEDEUTUNG ist uebernommen,
 * der Farbwert kommt aus dem Theme.
 */

.vc-flow-designer__node-status-background {
  fill: var(--surface-elevated);
  stroke: var(--border);
  stroke-width: 1;
}

.vc-flow-designer__node-status-label {
  fill: var(--text-muted);
  font-size: 10px;
}

.vc-flow-designer__node-status {
  fill: none;
  stroke: none;
}

.vc-flow-designer__node-status--danger {
  color: var(--danger);
}

.vc-flow-designer__node-status--success {
  color: var(--success);
}

.vc-flow-designer__node-status--warning {
  color: var(--warning);
}

.vc-flow-designer__node-status--info {
  color: var(--info);
}

.vc-flow-designer__node-status--muted {
  color: var(--text-muted);
}

/* `dot` ist gefuellt, `ring` nur Kontur — Node-REDs zwei Formen. */
.vc-flow-designer__node-status--dot {
  fill: currentColor;
}

.vc-flow-designer__node-status--ring {
  fill: none;
  stroke: currentColor;
}

/* Hervorhebung beim Zeigen auf eine Debug-Zeile (debug-utils.js:405-431). */
.vc-flow-designer__node.is-highlighted .vc-flow-designer__node-box {
  stroke: var(--primary);
  stroke-width: 3;
}

/* ------------------------- Flow-Reiterleiste (SPEC-0706) -----------------
 *
 * Ein Reiter je Flow, unter der Kopfleiste — dieselbe Stelle, an der Node-RED
 * sie fuehrt. Nur semantische Token, keine Festfarben: die vier Themes
 * ueberschreiben genau diese Namen (--surface, --surface-elevated, --border,
 * --text, --text-muted, --primary, --danger).
 */

.vc-flow-designer__flows {
  display: flex;
  align-items: stretch;
  gap: var(--space-1);
  min-width: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.vc-flow-designer__flows-fueller {
  flex: 1 1 auto;
  min-width: var(--space-2);
}

.vc-flow-designer__flow {
  flex: 0 0 auto;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--font-size-body-sm);
  cursor: pointer;
}

.vc-flow-designer__flow:hover {
  color: var(--text);
  background: var(--surface-elevated);
}

.vc-flow-designer__flow:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.vc-flow-designer__flow.is-active {
  color: var(--text);
  background: var(--surface-elevated);
  border-color: var(--border);
  box-shadow: inset 0 2px 0 0 var(--primary);
  font-weight: 600;
}

.vc-flow-designer__flow-action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.vc-flow-designer__flow-action:hover:not(:disabled) {
  color: var(--text);
  background: var(--surface-elevated);
  border-color: var(--border);
}

.vc-flow-designer__flow-action:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.vc-flow-designer__flow-action.is-active {
  color: var(--text);
  background: var(--surface-elevated);
  border-color: var(--border);
}

.vc-flow-designer__flow-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.vc-flow-designer__flow-action--danger:hover:not(:disabled) {
  color: var(--danger);
}

.vc-flow-designer__flow-name {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-input, var(--radius-card));
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.vc-flow-designer__flow-name:focus {
  outline: none;
  border-color: var(--primary);
}

.vc-flow-designer__flow-frage {
  margin: 0;
  color: var(--text);
  font-size: var(--font-size-body-sm);
}