/* ==========================================================================
   vFlow theme overrides on top of UI5 sap_horizon.
   Tokens are the source of truth (./tokens.css) - only selector-level
   mapping onto UI5-rendered DOM classes happens here. See CLAUDE.md
   (project root) for the full design-system guide this implements.
   ========================================================================== */

html,
body.sapUiBody {
  font-family: var(--vf-font-sans);
  background: var(--vf-bg);
  color: var(--vf-text);
}

/* ---- Horizon theme parameters: brand color throughout the app ----------
   Per CLAUDE.md: map tokens onto Horizon CSS custom properties rather than
   fighting individual control CSS classes (some, e.g. Button's "Inverted"
   fill, live in the UI5 CDN stylesheet and aren't overridable by class
   alone since the color itself is read from these variables). !important
   is needed here: UI5's own theme :root rule is injected at runtime after
   this stylesheet, so equal-specificity source order would otherwise win. */
:root {
  --sapBrandColor: var(--vf-primary) !important;
  --sapHighlightColor: var(--vf-primary-hover) !important;
  --sapSelectedColor: var(--vf-primary-hover) !important;
  --sapActiveColor: var(--vf-brand-100) !important;
  --sapLinkColor: var(--vf-link) !important;
  --sapContent_FocusColor: var(--vf-primary) !important;
  --sapButton_Emphasized_Background: var(--vf-primary) !important;
  --sapButton_Emphasized_BorderColor: var(--vf-primary) !important;
  --sapButton_Emphasized_TextColor: var(--vf-neutral-0) !important;
  --sapButton_Emphasized_Hover_Background: var(--vf-primary-hover) !important;
  --sapButton_Emphasized_Hover_BorderColor: var(--vf-primary-hover) !important;
  --sapButton_Emphasized_Active_Background: var(--vf-primary-active) !important;
  --sapButton_Emphasized_Active_BorderColor: var(--vf-primary-active) !important;
}

/* ---- Typography baseline ------------------------------------------------ */
.sapMText,
.sapMLabel,
.sapMTitle,
.sapMInputBaseInner,
.sapMBtnContent {
  font-family: var(--vf-font-sans);
}

/* Technical values (flow keys, correlation IDs, timestamps) - applied via
   class="vfMono" on the relevant sap.m.Text controls. */
.vfMono {
  font-family: var(--vf-font-mono) !important;
  font-size: var(--vf-fs-sm);
  color: var(--vf-text-secondary);
}

/* ---- Page header / top bar --------------------------------------------- */
.sapMPageHeader {
  background: var(--vf-surface);
  border-bottom: 1px solid var(--vf-border);
  box-shadow: none;
}

.sapMPageHeader .sapMTitle {
  font-weight: var(--vf-fw-semibold);
  color: var(--vf-text);
}

/* ---- Buttons ------------------------------------------------------------ */
/* Emphasized (primary) button color comes from the --sapButton_Emphasized_*
   theme parameters above, not from a class override - Horizon renders the
   Button's colored fill on the outer element via those variables. */
.sapMBtn {
  border-radius: var(--vf-radius-sm);
}

/* ---- Inputs -------------------------------------------------------------- */
.sapMInputBase {
  border-radius: var(--vf-radius-sm);
}

.sapMInputBaseContentWrapper {
  border-color: var(--vf-border-strong);
}

.sapMInputBase.sapMInputBaseIconContainer:focus-within,
.sapMInputBase:focus-within {
  box-shadow: var(--vf-shadow-focus);
}

/* ---- IconTabBar: active brand color instead of stock Fiori blue --------- */
.sapMITBFilter .sapMITBText {
  color: var(--vf-text-secondary);
}

.sapMITBFilter.sapMITBSelected .sapMITBText {
  color: var(--vf-primary);
}

.sapMITBFilter .sapMITBFilterIcon {
  background: transparent;
  border-color: var(--vf-border-strong);
  color: var(--vf-text-secondary);
}

.sapMITBFilter.sapMITBSelected .sapMITBFilterIcon {
  background: var(--vf-primary);
  border-color: var(--vf-primary);
  color: var(--vf-neutral-0);
}

.sapMITBFilter.sapMITBSelected .sapMITBContentArrow {
  border-top-color: var(--vf-primary);
}

/* Selection underline bar is a ::after pseudo-element, not a real child. */
.sapMITBFilter.sapMITBSelected::after {
  border-bottom-color: var(--vf-primary) !important;
}

/* ---- Tables: dense rows, zebra, sticky header, right-aligned numerics --- */
.sapMTableTHead {
  background: var(--vf-surface-sunk);
  border-bottom: 1px solid var(--vf-border);
}

.sapMListTblHeaderCell {
  font-weight: var(--vf-fw-medium);
  color: var(--vf-text-secondary);
  font-size: var(--vf-fs-sm);
}

.sapMListTbl .sapMLIB:nth-child(even) {
  background: var(--vf-surface-sunk);
}

.sapMListTbl .sapMLIB:hover {
  background: var(--vf-brand-50);
}

/* ---- Status badges: pill with leading dot instead of plain colored text - */
.sapMObjStatus {
  display: inline-flex;
  align-items: center;
  gap: var(--vf-space-2);
  padding: 1px var(--vf-space-4) 1px var(--vf-space-3);
  border-radius: var(--vf-radius-pill);
  font-size: var(--vf-fs-caption);
  font-weight: var(--vf-fw-medium);
  border: 1px solid transparent;
}

.sapMObjStatus::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}

.sapMObjStatusSuccess {
  background: var(--vf-success-bg);
  border-color: var(--vf-success-border);
  color: var(--vf-success);
}
.sapMObjStatusSuccess::before {
  background: var(--vf-success);
}

.sapMObjStatusWarning {
  background: var(--vf-warning-bg);
  border-color: var(--vf-warning-border);
  color: var(--vf-warning);
}
.sapMObjStatusWarning::before {
  background: var(--vf-warning);
}

.sapMObjStatusError {
  background: var(--vf-error-bg);
  border-color: var(--vf-error-border);
  color: var(--vf-error);
}
.sapMObjStatusError::before {
  background: var(--vf-error);
}

.sapMObjStatusNone {
  background: var(--vf-surface-sunk);
  border-color: var(--vf-border);
  color: var(--vf-text-secondary);
}
.sapMObjStatusNone::before {
  background: var(--vf-text-muted);
}

/* ---- Dialogs / popovers: vFlow radii + shadows -------------------------- */
.sapMDialog {
  border-radius: var(--vf-radius-lg);
  box-shadow: var(--vf-shadow-lg);
}

.sapMDialogTitleGroup {
  font-weight: var(--vf-fw-semibold);
}

.sapMPopover {
  border-radius: var(--vf-radius-md);
  box-shadow: var(--vf-shadow-md);
}

/* ---- Dashboard stat tiles (Cards, CLAUDE.md Abschnitt 6) ----------------- */
.vfStatTile {
  background: var(--vf-surface);
  border: 1px solid var(--vf-border);
  border-radius: var(--vf-radius-md);
  box-shadow: var(--vf-shadow-sm);
  padding: var(--vf-space-6);
  gap: var(--vf-space-2);
}

.vfStatTileLabel {
  color: var(--vf-text-secondary);
  font-size: var(--vf-fs-sm);
}

.vfStatTileValue {
  font-size: var(--vf-fs-display);
  font-weight: var(--vf-fw-semibold);
  color: var(--vf-text);
}

.vfStatTileError {
  /* !important: UI5's own text-color rule for .sapMText is injected at
     runtime after this stylesheet, so equal specificity would win by
     source order otherwise - same trap as the Button color override. */
  color: var(--vf-error) !important;
}

.vfStatTileSuccess {
  color: var(--vf-success) !important;
}

.vfStatTileWarn {
  color: var(--vf-warning) !important;
}

/* ---- Flow-Editor Pipeline (Sender-Adapter-Routing-Mapping-Adapter-Receiver)
   Feste Breite (statt min-width) auf Boxen/Pfeilen/Labels, damit die
   Kopfzeile mit den Spaltenbeschriftungen exakt über den Box-Reihen der
   einzelnen Zweige fluchtet. */
.vfPipelineBox {
  width: 140px;
  flex: none;
}

.vfPipelineBox .sapMBtnInner {
  border-radius: var(--vf-radius-md) !important;
  border: 1px solid var(--vf-border-strong) !important;
  background: var(--vf-surface) !important;
  color: var(--vf-text) !important;
  height: 48px !important;
  white-space: normal !important;
}

/* Waagerechter Verbinder zwischen zwei Pipeline-Karten: echte Linie von
   Kante zu Kante (Schaft + Pfeilspitze) statt eines freistehenden Glyphs. Die
   Karten liegen ohne Gap direkt neben dem 32px-Element, daher berührt die
   Linie beide Kartenränder. Der →-Glyph wird über font-size:0 ausgeblendet. */
.vfPipelineArrow {
  width: 32px;
  flex: none;
  align-self: center;
  display: block;
  position: relative;
  height: 12px;
  /* !important: UI5 laedt .sapMText (font-size) nach dem App-CSS bei gleicher
     Spezifitaet - ohne !important bliebe der ausgeblendete →-Glyph sichtbar. */
  font-size: 0 !important;
  color: transparent;
}
.vfPipelineArrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 5px;
  height: 2px;
  margin-top: -1px;
  background: var(--vf-border-strong);
}
.vfPipelineArrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -5px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--vf-border-strong);
}

.vfPipelineArrowSpacer {
  width: 32px;
  flex: none;
}

.vfPipelineLabel {
  width: 140px;
  flex: none;
  text-align: center;
  color: var(--vf-text-secondary);
  font-size: var(--vf-fs-sm);
  font-weight: var(--vf-fw-medium);
}

/* Senkrechter Verbinder Routing -> Zweige, unter der Routing-Box zentriert
   (flow-editor.md Layout-Korrektur, ASCII-Diagramm Abschnitt 4). */
/* Fan-out-Canvas: geteilte Kette links, Zweig-Stapel rechts. Die
   Fan-out-Verbinder zeichnet _drawBranchConnectors als absolutes SVG-Overlay
   ueber diese (relativ positionierte) Stage. */
.vfFlowStage {
  position: relative;
}
.vfSharedChain {
  flex: none;
}
.vfBranchStack {
  flex: none;
  /* Luecke fuer die Fan-out-Verbinder zwischen Routing und Mapping. */
  margin-left: 64px;
}
.vfBranchItem {
  margin-bottom: 16px;
}
/* SVG-Overlay: unter den Karten, faengt keine Klicks ab; currentColor traegt
   die Verbinderfarbe an stroke/fill weiter. */
.vfFanoutSvg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  color: var(--vf-border-strong);
}

.vfBranchesSection {
  gap: var(--vf-space-2);
}

/* Zweig-Liste: eigene Boxen tragen bereits Rahmen/Schatten - die Listenzeile
   selbst soll unsichtbar bleiben, kein doppelter Rahmen/Zebra-Hintergrund. */
.vfBranchesList .sapMLIB {
  background: transparent;
  border: none;
  padding: 0;
}

.vfBranchesList .sapMLIB:hover {
  background: transparent;
}

/* Kleingedrucktes unter einem Adapter-Config-Feld (adapter-config-schema.ts
   auf dem Backend, field.helpText) - z. B. "Default 30 Sekunden". */
.vfFieldHelp {
  display: block;
  /* !important: UI5s .sapMText wird erst zur Laufzeit nach dem App-CSS geladen
     und gewinnt sonst bei gleicher Spezifität (14px/Default-Farbe) - dadurch
     wirkten Untertexte/Hinweise faelschlich so gross wie normaler Text. */
  color: var(--vf-text-muted) !important;
  font-size: var(--vf-fs-caption) !important;
}

/* Zweispaltiges Formular im Property-Panel des Flow Editors (SAP-Integration-
   Suite-Optik): Label links (fett, rechtsbündig), Eingabefeld rechts.
   Aufgebaut in FlowEditor.controller.js#_addFormRow als HBox[Label | VBox]. */
.vfFormRow {
  align-items: flex-start;
  gap: var(--vf-space-4);
  padding: var(--vf-space-2) 0;
}
.vfFormRow > .vfFormLabel {
  flex: 0 0 27%;
  max-width: 27%;
  min-width: 120px;
  /* linksbündig (Stefan-Review 2026-07-10: die frühere rechtsbündige SAP-Optik
     drückte die Labels an die Feldspalte; linksbündig + schmalere Spalte liest
     sich ruhiger). !important, da UI5s .sapMLabel eine eigene text-align-Regel
     mitbringt, die sonst bei gleicher Spezifität nach dem App-CSS gewinnt. */
  text-align: left !important;
  /* auf die Textzeile des 32px hohen Eingabefelds ausrichten */
  padding-top: 7px;
  /* !important: UI5s .sapMLabel-Farbe wird erst zur Laufzeit nach dem App-CSS
     geladen und gewinnt sonst bei gleicher Spezifität (gedämpftes Grau) -
     Stefan möchte kräftigere Labels (siehe CLAUDE.md §4). */
  color: var(--vf-text) !important;
}
/* UI5 rendert das Label als inline-flex (.sapMLabelInner) und packt den
   Textteil per justify-content ans Ende - text-align auf dem Label greift bei
   Flex-Kindern nicht. Für echte Linksbündigkeit hier den inneren Flex umstellen. */
.vfFormRow > .vfFormLabel .sapMLabelInner {
  justify-content: flex-start !important;
}
.vfFormRow > .vfFormField {
  flex: 1 1 auto;
  /* min-width:0, damit lange Werte/Inputs in der Flex-Spalte schrumpfen dürfen
     statt die Zeile zu sprengen. */
  min-width: 0;
  gap: var(--vf-space-1);
}

/* Kicker-Überschrift einer Feld-Untergruppe (adapter-config-schema.ts
   field.section), analog SAP CONNECTION/ADVANCED SETTING. */
.vfFormSection {
  display: block;
  margin: var(--vf-space-5) 0 var(--vf-space-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  /* !important: gleiche .sapMText-Übersteuerung wie bei .vfFieldHelp. */
  font-size: var(--vf-fs-caption) !important;
  font-weight: 600 !important;
  color: var(--vf-text-secondary) !important;
}
.vfFormSection:first-child {
  margin-top: 0;
}

/* Mapping Studio (mapping-studio.md): Kicker neben dem Typ-Select ohne
   Block-Abstand, und etwas Luft zwischen den Sample-Steuerelementen. */
.vfStudioKicker {
  margin: 0 var(--vf-space-3) 0 0 !important;
}
.vfStudioSampleBar {
  gap: var(--vf-space-2);
  align-items: center;
}

/* Pfadleiste im Server-Verzeichnis-Browser (Value-Help der Verzeichnis-Felder). */
.vfDirBrowseBar {
  gap: var(--vf-space-2);
  padding: var(--vf-space-3);
  border-bottom: 1px solid var(--vf-border);
}
/* Breadcrumb (Stefan, 2026-07-13): jedes Segment ein Link außer dem
   letzten (aktuelles Verzeichnis, reiner Text) - nur die Text-Kinder
   (Trenner "/" + letztes Segment) bekommen die gedämpfte Farbe, Links
   behalten ihre normale Link-Farbe. */
.vfDirBrowsePath {
  flex-wrap: wrap;
}
.vfDirBrowsePath > .sapMText {
  color: var(--vf-text-secondary);
}

/* ---- Rechts-Drawer (model/drawer.js) ------------------------------------ */
.vfDrawerScrim {
  position: fixed;
  inset: 0;
  background: rgba(23, 26, 34, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  /* z-index bewusst NIEDRIG (unter UI5s Popup-Bereich, der bei ~10 startet):
     so erscheinen Select-Dropdowns/DatePicker/MessageBox IM bzw. ÜBER dem
     Drawer statt dahinter. Über dem App-Inhalt (z-index auto) liegt der Drawer
     trotzdem. Nebeneffekt: eine modale MessageBox blockt den Drawer jetzt
     korrekt (ihr Blocklayer liegt darüber). */
  z-index: 8;
}
#vfDrawerHost.vfDrawerOpen .vfDrawerScrim {
  opacity: 1;
  pointer-events: auto;
}
.vfDrawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 440px;
  max-width: 92vw;
  box-sizing: border-box;
  padding: var(--vf-space-7);
  overflow-y: auto;
  /* !important: .sapMFlexBoxBGTransparent-Falle (VBox ohne backgroundDesign). */
  background: var(--vf-surface) !important;
  box-shadow: var(--vf-shadow-lg);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 9;
}
#vfDrawerHost.vfDrawerOpen .vfDrawer {
  transform: translateX(0);
}
.vfDrawerHeader {
  margin-bottom: var(--vf-space-6);
}
.vfDrawerClose {
  margin-left: auto;
}
.vfDrawerFooter {
  gap: var(--vf-space-2);
  margin-top: var(--vf-space-7);
}

/* Rollen-Auswahl (Users New/Edit): Zeilen als abgesetzte Cards mit etwas
   Abstand statt aneinanderklebender Listenzeilen. */
.vfRoleList .sapMLIB {
  margin-bottom: var(--vf-space-2);
  border-radius: var(--vf-radius-sm);
}
.vfRoleList .sapMLIB:last-child {
  margin-bottom: 0;
}

/* Flow-Freigabe (Technical Users): bei vielen Flows die Checkbox-Liste in einen
   eigenen, scrollbaren Bereich fassen, damit Credentials/Settings darunter
   erreichbar bleiben statt endlos nach unten geschoben zu werden. */
.vfFlowAccessList {
  max-height: 15rem;
  overflow-y: auto;
}

/* Inbound-Zugangsdaten (Systems > Zugriff): einmalig sichtbares Secret + Liste. */
.vfSecretBox {
  gap: var(--vf-space-2);
  padding: var(--vf-space-4);
  border: 1px solid var(--vf-brand-200);
  border-radius: var(--vf-radius-md);
  /* !important: .sapMFlexBoxBGTransparent-Falle. */
  background: var(--vf-brand-50) !important;
  margin-bottom: var(--vf-space-4);
}
.vfSecretTitle {
  font-weight: var(--vf-fw-semibold);
}
.vfSecretValue {
  word-break: break-all;
  font-size: var(--vf-fs-sm) !important;
  color: var(--vf-text) !important;
}
.vfCredRow {
  padding: var(--vf-space-2) 0;
}
.vfCredTitle {
  font-weight: var(--vf-fw-medium);
}
/* Gefahr-Aktion (z. B. Technical User löschen) - roter Transparent-Button. */
.vfDeleteButton .sapMBtnContent,
.vfDeleteButton .sapUiIcon {
  color: var(--vf-error) !important;
}

/* Kalter Start (App.controller.js#_showColdStartCover): blendet die
   ToolPage-Shell (Sidebar mit allen Menüpunkten) beim allerersten,
   noch nie erfolgreich eingeloggten Aufruf aus - sonst wirkt die
   Login-Karte, als läge schon eine aktive Session dahinter. z-index
   niedrig genug, um unter UI5s Popup-Bereich (~10, siehe .vfDrawer) zu
   bleiben, aber über dem normalen Seiteninhalt (z-index auto). */
.vfColdStartCover {
  position: fixed;
  inset: 0;
  background: var(--vf-bg);
  z-index: 2;
}

/* ---- Login-Karte (App.controller.js#_showLogin) ------------------------- */
.vfLoginDialog .sapMDialogScrollCont,
.vfLoginDialog .sapMDialogScroll,
.vfLoginDialog .sapMDialogSection {
  padding: 0 !important;
}
.vfLoginCard {
  box-sizing: border-box;
  width: 100%;
  padding: var(--vf-space-8) var(--vf-space-7) var(--vf-space-6);
  gap: var(--vf-space-5);
}
.vfLoginBrand {
  align-items: center;
  gap: var(--vf-space-1);
  margin-bottom: var(--vf-space-2);
}
.vfLoginLogo {
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: var(--vf-radius-lg);
  /* !important: sap.m.VBox bekommt sonst UI5s .sapMFlexBoxBGTransparent
     (background:transparent), nach dem App-CSS injiziert - das Marken-Quadrat
     bliebe unsichtbar (dokumentierte Falle in project-vflow-ui5-theming-quirks). */
  background: var(--vf-primary) !important;
  margin-bottom: var(--vf-space-3);
}
.vfLoginLogoIcon {
  color: #fff !important;
  font-size: 26px !important;
}
.vfLoginWordmark {
  text-align: center;
  font-size: var(--vf-fs-h1) !important;
  font-weight: var(--vf-fw-semibold) !important;
  letter-spacing: 0.02em;
  color: var(--vf-text) !important;
}
.vfLoginSubtitle {
  text-align: center;
  color: var(--vf-text-secondary) !important;
}
.vfLoginFields {
  gap: var(--vf-space-2);
}
.vfLoginFieldLabel {
  margin-top: var(--vf-space-4);
  font-weight: var(--vf-fw-semibold);
}
.vfLoginFields > .vfLoginFieldLabel:first-child {
  margin-top: 0;
}
.vfLoginTagline {
  margin-top: var(--vf-space-2);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  /* !important: gleiche .sapMText-Laufzeit-Übersteuerung wie an anderen Stellen. */
  font-size: var(--vf-fs-caption) !important;
  font-weight: var(--vf-fw-semibold) !important;
  color: var(--vf-primary) !important;
}

/* Breadcrumb-Trenner im Flow-Editor-Kopf ("Flows / {Flow-Name}"). */
.vfBreadcrumbSeparator {
  color: var(--vf-text-muted);
  padding: 0 var(--vf-space-2);
}

/* Kopfbereich des Flow Editors: Innenabstand statt Außenabstand auf der
   Seite selbst, damit der Splitter darunter randlos bis zur Sidebar-
   Trennlinie geht (kein Bruch im Trennbalken). */
.vfEditorHeader {
  padding: var(--vf-space-6) var(--vf-space-6) var(--vf-space-5);
  /* !important: UI5 setzt auf jede VBox ohne explizites "background"-Design
     die eigene Klasse .sapMFlexBoxBGTransparent (background-color:
     transparent), geladen nach vflow.css - gleiche Falle wie bei den
     Emphasized-Button-Farben, siehe project_vflow_ui5_theming_quirks. */
  background: var(--vf-surface) !important;
  border-bottom: 1px solid var(--vf-border);
}

/* ---- Flow-Editor: Canvas + Bottom Property Panel per ziehbarem Trennbalken
   (sap.ui.layout.Splitter, orientation="Vertical") statt rechtem Drawer -
   wie in SAP Cloud Integration ("man kann es hoch und runter ziehen").
   flow-editor.md Abschnitt 5. Randlos (kein Border/Radius) - der
   Trennbalken soll ohne Unterbruch bis zur Sidebar durchgehen. ---- */
.vfEditorSplitter {
  border-top: 1px solid var(--vf-border);
  overflow: hidden;
}

.vfBottomPanel {
  background: var(--vf-surface);
  height: 100%;
  overflow-y: auto;
}

.vfBottomPanel .sapMITB {
  background: transparent;
}

.vfBottomPanelPlaceholder {
  width: 100%;
  height: 100%;
  padding: var(--vf-space-7) var(--vf-space-5) var(--vf-space-5) var(--vf-space-7);
  align-items: flex-start;
  color: var(--vf-text-muted);
  font-size: var(--vf-fs-sm);
}

.vfBottomPanelPlaceholderIcon {
  font-size: 1.1rem;
  color: var(--vf-text-muted);
  margin-right: var(--vf-space-3);
}

/* Der Splitter-Trennbalken soll wie ein echter Drag-Handle aussehen, nicht
   wie eine zufällige graue Linie. */
.vfEditorSplitter > .sapUiLoSplitterBar {
  background: var(--vf-surface-sunk);
  border-top: 1px solid var(--vf-border);
  border-bottom: 1px solid var(--vf-border);
}

/* ==========================================================================
   Design-Refresh (Packages/PackageDetail/FlowEditor), angelehnt an ein von
   Stefan geteiltes Mockup - kein 1:1-Clone (UI5 begrenzt das), aber gleiche
   Richtung: Icon-Avatare, Metadata-Sidecards, Tabellen-Toolbars mit Counts,
   Pipeline-Karten mit Kicker-Label. Nur Elemente mit echten Daten dahinter -
   rein dekorative Mockup-Elemente ohne Backend-Gegenstück (Env-Badge,
   "Runtime healthy", User-Avatar) sind bewusst nicht übernommen.
   ========================================================================== */

/* ---- Entity-Icon-Avatar (Package-/Flow-Header) --------------------------- */
.vfEntityAvatar {
  width: 40px;
  height: 40px;
  border-radius: var(--vf-radius-md);
  /* !important: jede HBox ohne explizites backgroundDesign bekommt UI5s
     eigene .sapMFlexBoxBGTransparent-Klasse (background-color: transparent),
     nach vflow.css injiziert - gleiche Falle wie bei .vfEditorHeader, siehe
     project_vflow_ui5_theming_quirks. */
  background: var(--vf-primary) !important;
  color: var(--vf-neutral-0);
  align-items: center;
  justify-content: center;
  flex: none;
}

.vfEntityAvatar .sapUiIcon {
  color: var(--vf-neutral-0) !important;
}

/* ---- User-Avatar (Initialen statt Icon, z. B. Users-Tabelle) ------------- */
.vfUserAvatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--vf-primary) !important;
  color: var(--vf-neutral-0);
  align-items: center;
  justify-content: center;
  flex: none;
}

.vfUserAvatar .sapMText {
  color: var(--vf-neutral-0) !important;
  font-weight: var(--vf-fw-medium);
  font-size: var(--vf-fs-caption);
}

.vfUserAvatar .sapUiIcon {
  color: var(--vf-neutral-0) !important;
}

/* ---- Role-/Tag-Pill (Rolle, Credential-Typ etc., Users-/Credentials-Tabelle)
   Bewusst KEIN sap.m.ObjectStatus-Zustand (Success/Error/...) - diese sind
   laut Design-System nur für echten funktionalen Zustand reserviert (Monitoring
   etc.), eine Rolle/ein Credential-Typ ist kein Zustand. Eigenständige,
   neutral-brand-getönte Pille statt Zweckentfremdung der Status-Farben - gleiche
   ::before-Dot-Technik wie .sapMObjStatus oben, auf einem einzelnen Text-Control
   statt einer HBox+Kind-Element-Konstruktion (vermeidet die Flex-Item-Kollaps-
   Fallen, die bei mehrknotigen absolut positionierten Overlays aufgetreten sind,
   siehe project_vflow_ui5_theming_quirks). Name ist historisch (zuerst für Users
   gebaut), wird aber bewusst für jede nicht-funktionale Kategorisierungs-Pille
   wiederverwendet statt eine zweite, identische Klasse anzulegen. */
.vfRolePill {
  display: inline-flex;
  align-items: center;
  gap: var(--vf-space-2);
  background: var(--vf-primary-subtle);
  color: var(--vf-primary);
  border-radius: var(--vf-radius-pill);
  padding: 1px var(--vf-space-4) 1px var(--vf-space-3);
  font-size: var(--vf-fs-caption);
  font-weight: var(--vf-fw-medium);
}

.vfRolePill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vf-primary);
  flex: none;
}

/* ---- Key-/ID-Badge (statt reinem mono-Text) ------------------------------ */
.vfKeyPill {
  font-family: var(--vf-font-mono) !important;
  font-size: var(--vf-fs-caption);
  color: var(--vf-text-secondary);
  background: var(--vf-surface-sunk);
  border: 1px solid var(--vf-border);
  border-radius: var(--vf-radius-xs);
  padding: 1px var(--vf-space-3);
}

/* ---- Generische Card (Details-Card + Metadata-Sidecard teilen sich das) -- */
.vfCard {
  /* !important: UI5 setzt auf jede VBox/HBox eine eigene
     .sapMFlexBoxBGTransparent-Klasse (background-color: transparent), die
     nach vflow.css injiziert wird und sonst gewinnt - gleiche Falle wie bei
     .vfEditorHeader/.vfEntityAvatar. */
  background: var(--vf-surface) !important;
  border: 1px solid var(--vf-border);
  border-radius: var(--vf-radius-md);
  box-shadow: var(--vf-shadow-sm);
  padding: var(--vf-space-5);
  gap: var(--vf-space-3);
}

/* ---- Metadata-Sidecard (Package-Detail Overview, rechte Spalte) ---------- */
.vfMetadataCard {
  width: 280px;
  flex: none;
}

.vfMetadataCardTitle {
  font-size: var(--vf-fs-caption);
  font-weight: var(--vf-fw-medium);
  color: var(--vf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--vf-space-2);
}

.vfMetadataRow {
  width: 100%;
  /* !important: UI5 setzt auf jede HBox eine eigene .sapMFlexBoxJustify*-/
     .sapMFlexBoxAlignItems*-Klasse (hier "Start"/"Stretch", je nach
     Default), die nach vflow.css injiziert wird und sonst gewinnt - gleiche
     Falle wie bei .vfEntityAvatar/.vfEditorHeader oben. */
  justify-content: space-between !important;
  align-items: center !important;
  padding: var(--vf-space-1) 0;
}

.vfMetadataRowLabel {
  color: var(--vf-text-secondary);
  font-size: var(--vf-fs-sm);
  /* Abstand zum Wert, falls dieser (langer mono-Pfad im Runtime-Drawer) dicht
     heranrückt. Das "auf einer Zeile halten" macht das Label-Control selbst via
     wrapping:false (Operation._metaRow) - CSS white-space würde von UI5s
     eigener .sapMText-Regel überschrieben (gleicher !important-Footgun). */
  margin-right: var(--vf-space-4);
}

.vfMetadataRowValue {
  font-family: var(--vf-font-mono) !important;
  font-size: var(--vf-fs-sm);
  color: var(--vf-text);
}

/* ---- Runtime-Cockpit Detail-Drawer: Metadaten-Gruppen als abgesetzte Boxen
   (IDENTITY/ADDRESS/ACCESS/LIFECYCLE) - Rahmen statt Schatten (CLAUDE.md §5),
   Gruppentitel mit Hairline darunter. ------------------------------------- */
.vfDrawerSection {
  border: 1px solid var(--vf-border);
  border-radius: var(--vf-radius-md);
  padding: var(--vf-space-3) var(--vf-space-4) var(--vf-space-2);
  margin-bottom: var(--vf-space-3);
  background: var(--vf-surface);
}

.vfDrawerSectionTitle {
  /* Volle Boxbreite (Titel ohne wrapping:false, s. Operation._section), damit
     die Trennlinie durchläuft statt auf Wortbreite zu enden. */
  display: block !important;
  font-size: var(--vf-fs-caption);
  font-weight: var(--vf-fw-semibold) !important;
  color: var(--vf-text-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: var(--vf-space-2);
  margin-bottom: var(--vf-space-1);
  border-bottom: 1px solid var(--vf-border);
}

/* ---- Runtime-Cockpit Detail-Drawer: Aktionsleiste am Ende des Inhalts
   (Pause/Resume, Undeploy, Im Editor ansehen) - abgesetzt durch eine dünne
   Trennlinie über den Buttons. --------------------------------------------- */
.vfDrawerActions {
  gap: var(--vf-space-2);
  margin-top: var(--vf-space-4);
  padding-top: var(--vf-space-4);
  border-top: 1px solid var(--vf-border);
}

/* ---- Tip-Callout (dezenter Hinweis, kein Fehler/Warnung - eigene, ruhige
   Farbe statt Status-Semantik, da CLAUDE.md Status-Farben nur für echten
   Laufzeit-/Lifecycle-Zustand reserviert). --------------------------------- */
.vfTipCallout {
  background: var(--vf-brand-50);
  border: 1px solid var(--vf-brand-200);
  border-radius: var(--vf-radius-md);
  padding: var(--vf-space-4) var(--vf-space-5);
  gap: var(--vf-space-1);
}

.vfTipCalloutTitle {
  font-weight: var(--vf-fw-medium);
  color: var(--vf-primary-active);
  font-size: var(--vf-fs-sm);
}

.vfTipCalloutText {
  color: var(--vf-text-secondary);
  font-size: var(--vf-fs-sm);
}

/* ---- Tabellen-Toolbar-Header ("Flows 6 total" + Filter + Aktion) --------- */
.vfTableToolbarTitle {
  font-weight: var(--vf-fw-semibold);
  font-size: var(--vf-fs-h3);
  color: var(--vf-text);
}

.vfTableToolbarCount {
  color: var(--vf-text-muted);
  font-size: var(--vf-fs-sm);
  font-weight: var(--vf-fw-regular);
  margin-left: var(--vf-space-2);
}

/* ---- Versions-Overflow-Badge ("v3 +2") ----------------------------------- */
.vfOverflowBadge {
  color: var(--vf-text-muted);
  font-size: var(--vf-fs-caption);
  margin-left: var(--vf-space-2);
}

/* ---- Flow-Editor Pipeline-Karten (Kicker-Label + zweizeiliger Button) ----
   Die ganze Karte soll klickbar sein und überall einen Pointer zeigen
   (Stefan: "auf der ganzen Box"), nicht nur der Button-Teil unterhalb des
   Kicker-Labels. Der Button trägt weiterhin den eigentlichen Klick-Handler
   (kein neues Control nötig) - er wird per position:absolute auf die volle
   Kartenfläche gelegt, das Kicker-Label liegt als rein dekorative,
   klick-durchlässige (pointer-events:none) Ebene darüber. Feste Kartenhöhe
   (statt auto), damit ein absolut positionierter Button eine wohldefinierte
   100%-Bezugsgröße hat. */
/* Flow-Kachel im SAP-Integration-Suite-Stil: Icon-Badge + Kicker oben, fetter
   Titel + gedämpfter Mono-Untertitel unten. Die Karte (sap.m.VBox) rendert mit
   renderType="Bare" (XML), sodass Kicker/Titel/Untertitel direkte Flex-Kinder
   sind - dadurch entfallen die früheren .sapMFlexItem-/absolute-Hacks: die
   Inhalte liegen im normalen Fluss, nur der Klick-Button ist ein transparentes
   Overlay über der ganzen Karte. */
.vfPipelineCard {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 150px;
  /* fixe Höhe für gleich hohe Kacheln in der Reihe; Titel/Untertitel werden
     per margin-top:auto an den unteren Rand geschoben, sodass sie bündig
     stehen, egal ob das Kicker-Label ein- oder zweizeilig umbricht. */
  height: 96px;
  box-sizing: border-box;
  flex: none;
  padding: var(--vf-space-3);
  border: 1px solid var(--vf-border-strong);
  border-radius: var(--vf-radius-lg);
  background: var(--vf-surface);
}

.vfPipelineCardKicker {
  align-items: center;
  gap: var(--vf-space-2);
}

/* Icon im soften, violett getönten Rounded-Square (wie in der Vorlage). */
.vfCardIconBadge {
  box-sizing: border-box;
  width: 24px !important;
  height: 24px !important;
  line-height: 24px !important;
  margin: 0 !important;
  border-radius: var(--vf-radius-sm);
  background: var(--vf-brand-100);
  color: var(--vf-primary) !important;
  font-size: 13px !important;
  text-align: center;
  flex: none;
}

.vfPipelineCardKickerText {
  font-size: 10px;
  font-weight: var(--vf-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vf-text-muted) !important;
  line-height: 1.2;
}

/* Titel: fett, an den unteren Kartenrand geschoben (margin-top:auto), eine
   Zeile mit Ellipsis. */
.vfPipelineCardTitle {
  margin-top: auto;
  padding-top: var(--vf-space-2);
  display: block;
  max-width: 100%;
  font-size: var(--vf-fs-body) !important;
  font-weight: var(--vf-fw-semibold) !important;
  color: var(--vf-text) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vfPipelineCardSubtitle {
  display: block;
  max-width: 100%;
  font-size: var(--vf-fs-caption) !important;
  color: var(--vf-text-muted) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Transparentes Klick-Overlay über der ganzen Karte (trägt den Press-Handler).
   !important auf Größe/Position: UI5s .sapMBtn bringt eigene feste Maße mit. */
.vfPipelineCard .vfPipelineCardButton {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
}
.vfPipelineCard .vfPipelineCardButton .sapMBtnInner {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer;
}

/* Das Klick-Overlay zeichnet KEINEN eigenen Fokusrahmen - sonst lag der
   Button-Fokusring (leicht eingerückt) über dem Kartenrahmen und es sah aus
   wie zwei überlappende Rahmen. Die Auswahl zeigt stattdessen die Karte selbst
   (:focus-within unten) als einen sauberen Rahmen. UI5 zeichnet den Fokusring
   als ::before UND ::after am .sapMBtnInner (je nach Build/Zustand) - beide
   unterdrücken, sonst bleibt bei :focus-visible ein zweiter 2px-Rahmen sichtbar
   (Stefan-Review 2026-07-10: nach Hard-Reload war ::before noch aktiv). */
.vfPipelineCard .vfPipelineCardButton,
.vfPipelineCard .vfPipelineCardButton:focus,
.vfPipelineCard .vfPipelineCardButton:focus-visible {
  outline: none !important;
}
.vfPipelineCard .vfPipelineCardButton .sapMBtnInner::before,
.vfPipelineCard .vfPipelineCardButton .sapMBtnInner::after {
  content: none !important;
  display: none !important;
  border: none !important;
}

/* Hover und Auswahl: EIN violetter Rahmen. Bei Auswahl zusätzlich ein weicher,
   heller Halo + zarte Flächentönung - der frühere harte 3px-Fokusring
   (--vf-shadow-focus, 30% Deckkraft direkt am Rahmen) las sich durch die
   Rundung wie ein zweiter Rahmen (Stefan-Review 2026-07-10). Jetzt ein
   verwaschener Glow (mit Blur, kein harter Rand). */
.vfPipelineCard:hover,
.vfPipelineCard:focus-within {
  border-color: var(--vf-primary);
  cursor: pointer;
}
.vfPipelineCard:focus-within {
  background: var(--vf-brand-50);
  box-shadow: 0 2px 10px rgba(91, 69, 224, 0.18);
}

/* ---- Legende oben rechts im Canvas ("● message flow · 2 Zweige") -------- */
.vfPipelineLegend {
  color: var(--vf-text-muted);
  font-size: var(--vf-fs-caption);
  gap: var(--vf-space-2);
  align-items: center;
}

.vfPipelineLegendDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vf-primary);
  flex: none;
}

/* ---- Bedingungs-Pill pro Zweig (ersetzt die eigene Condition-Box in der
   Zweig-Reihe - "Zweig 1 · Bedingung (Standard)"). Wie bei .vfPipelineBox
   oben: der Button rendert seinen eigentlichen Rahmen/Hintergrund auf einem
   inneren .sapMBtnInner-Element, nicht auf der Klasse selbst. ------------- */
.vfBranchConditionPill .sapMBtnInner {
  background: var(--vf-brand-50) !important;
  color: var(--vf-primary-active) !important;
  border: 1px solid var(--vf-brand-200) !important;
  border-radius: var(--vf-radius-pill) !important;
  padding: 1px var(--vf-space-4) !important;
  font-size: var(--vf-fs-caption);
  font-weight: var(--vf-fw-medium);
  height: auto !important;
}

.vfBranchConditionPill:hover .sapMBtnInner {
  border-color: var(--vf-primary) !important;
}

/* Drop-Zone im "New Document"-Modal: gestrichelte Fläche zum Ziehen/Auswählen
   einer Datei. .vfDropZoneActive hebt beim Drüberziehen hervor. */
.vfDropZone {
  border: 2px dashed var(--vf-border-strong);
  border-radius: var(--vf-radius-md);
  padding: var(--vf-space-6, 24px) var(--vf-space-4, 16px);
  background: var(--vf-bg);
}
.vfDropZoneActive {
  border-color: var(--vf-primary);
  background: var(--vf-primary-subtle);
}
.vfDropZone .vfDropZoneIcon {
  color: var(--vf-text-muted);
}

/* ---- Benutzer-Footer unten in der Side-Navigation (Name + Rolle + Abmelden).
   Body-level position:fixed, per JS an die Sidenav-Spalte (left/width)
   ausgerichtet - stört so das UI5-Flex-Layout der Aside nicht. z-index unter
   den UI5-Popups (~10), aber über dem Inhalt. */
.vfUserFooter {
  position: fixed;
  bottom: 0;
  left: 0;
  width: var(--vf-shell-sidenav, 240px);
  z-index: 5;
  box-sizing: border-box;
  padding: var(--vf-space-3) var(--vf-space-4);
  border-top: 1px solid var(--vf-border);
  /* !important: .sapMFlexBoxBGTransparent-Falle auf HBox. */
  background: var(--vf-surface) !important;
}
.vfUserFooterId {
  gap: var(--vf-space-3);
  cursor: pointer;
  min-width: 0;
}
.vfUserFooterMeta {
  min-width: 0;
}
.vfUserFooterAvatar {
  display: inline-block;
  flex: none;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: var(--vf-radius-sm);
  background: var(--vf-primary) !important;
  color: #fff !important;
  font-weight: var(--vf-fw-semibold) !important;
}
.vfUserFooterName {
  font-weight: var(--vf-fw-semibold) !important;
  color: var(--vf-text) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vfUserFooterRole {
  font-size: var(--vf-fs-caption) !important;
  color: var(--vf-text-muted) !important;
}

/* Profil-Seite: großer Marken-Avatar mit Initiale. */
.vfProfileAvatar {
  display: inline-block;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  border-radius: var(--vf-radius-md);
  background: var(--vf-primary) !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: var(--vf-fw-semibold) !important;
}

/* ---- Test-Send: zweispaltiges Layout (Request links / Ergebnis rechts),
   je eine .vfCard - gleiche Karten-Bausteine wie Package-Detail/Runtime-
   Drawer (CLAUDE.md §8: bestehende Muster wiederverwenden). ---------------- */
.vfTestSendLayout {
  gap: var(--vf-space-5);
  /* !important: UI5 setzt auf jede HBox eine eigene
     .sapMFlexBoxAlignItemsStretch-Klasse, die nach vflow.css injiziert wird
     und sonst gewinnt - gleiche Falle wie bei .vfMetadataRow/.vfCard oben. */
  align-items: flex-start !important;
}
.vfTestSendRequestCard {
  width: 55%;
}
.vfTestSendResultCard {
  width: 45%;
}

/* Ergebnis-Karte im Leerzustand: zentriertes Icon + Hinweistext, bis die
   erste Testnachricht gesendet wurde. */
.vfTestSendResultIdle {
  align-items: center;
  text-align: center;
  gap: var(--vf-space-2);
  padding: var(--vf-space-6) var(--vf-space-4);
}
.vfTestSendResultIdleIcon {
  font-size: 32px !important;
  color: var(--vf-text-muted) !important;
}
.vfTestSendResultIdleTitle {
  font-weight: var(--vf-fw-medium);
  color: var(--vf-text-secondary);
}
.vfTestSendResultIdleHint {
  font-size: var(--vf-fs-sm);
  color: var(--vf-text-muted);
}