/* „Integration Designer NG" (SPEC-0662) — nur der RAHMEN.
 *
 * Der Designer selbst bringt sein vollstaendiges Stilblatt mit
 * (vc-components public/styles/flow-designer.css, in index.html als
 * /vc/styles/flow-designer.css geladen). Hier steht ausschliesslich, was das
 * Overlay als Wirt beisteuert; jede Regel fuer Palette, Buehne oder Panel
 * gehoert in das Blatt der Component, nicht hierher.
 *
 * Kopfzeile, Kruemel und Buehnenrahmen kommen unveraendert aus
 * styles/werkzeug-overlays.css (.designer-header / .dialog-breadcrumb /
 * .crumb-btn / .designer-stage) — dieselben Klassen wie beim Node-RED-Rahmen,
 * damit beide Designer-Eintraege denselben Kopf tragen. Nur die Wurzelklasse
 * ist eigen, weil sie zu einem ANDEREN Element gehoert.
 *
 * KEINE Festfarben: alle vier Themes (light, dark, contrast, avangers)
 * ueberschreiben genau die hier benutzten Token-Namen.
 */

.integration-designer-ng-view {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 6px 8px 8px;
  gap: 6px;
  box-sizing: border-box;
  background: var(--surface);
  color: var(--text);
}

/* Die Buehne fuellt den Rest. `min-height: 0` ist Pflicht: ohne sie waechst
 * das Flex-Kind an seinem Inhalt (der Designer hat eine Mindesthoehe von
 * 520 px) statt zu schrumpfen, und die Maske scrollt hinter der Kopfzeile weg.
 */
.integration-designer-ng-view .designer-stage {
  display: flex;
  min-height: 0;
}

/* Das Custom Element ist `display: inline` — ohne diese Zeile kollabiert die
 * Hoehenkette (Buehne -> Designer -> SVG) und die Leinwand faengt keinen
 * Zeiger mehr. `flow-designer.css` setzt zwar `height: 100%`, aber die
 * Flex-Basis muss der Wirt liefern.
 */
.integration-designer-ng-view vc-flow-designer {
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.designer-ng-note {
  color: var(--text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}