/* Übernommen aus vFlow frontend/webapp/css/vflow.css (Grundlagen, Tabellen,
   Status-Pills, Dialoge, Login-Karte), damit das Portal zur vFlow-Familie
   gehört. Eigene Ergänzungen am Ende unter „vFlow Pulse Portal“. */
/* ==========================================================================
   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;
  /* Platzhalter: Horizons Vorgabe #556b82 ist zu kraeftig und laesst ein
     leeres Formular vorbelegt aussehen (Testerbefund 21.09.2026). Eine
     Variable genuegt fuer Input, TextArea und SearchField - in der
     laufenden Seite nachgemessen. Die Kursive kommt vom Theme und bleibt. */
  --sapField_PlaceholderTextColor: var(--vf-text-placeholder) !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);
}

/* A mono technical value that is also a link (the e-mail address in the
   contacts table): keep the mono face and size, but not the muted colour -
   grey link text does not read as clickable. */
a.sapMLnk.vfMono {
  color: var(--vf-primary);
}

/* Editable technical fields (CSV column lists, element names) - mono font but
   normal input color/size, unlike the read-only .vfMono above. Applied via
   class="vfMonoField" on sap.m.Input / sap.m.TextArea (targets the inner
   editable element). */
.vfMonoField .sapMInputBaseInner,
.vfMonoField textarea {
  font-family: var(--vf-font-mono) !important;
}

/* ---- 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;
}

/* Reiterleiste und Karte auf denselben linken Rand (.vfTabsAligned).

   sapUiResponsiveContentPadding gibt der Kopfleiste (.sapMITH) 3rem, dem
   Inhaltsbereich (.sapMITBContent) aber nur 2rem. Wo eine Karte direkt im
   Reiter liegt, beginnt sie dadurch 16 px weiter links als der Reiter
   darueber - auf der Transport-Seite ist das Stefan am 27.08.2026
   aufgefallen.

   Bewusst eine eigene Klasse und keine Regel auf sapUiResponsiveContentPadding:
   Package-Detail schiebt seine Karten ueber eine zusaetzliche Zeile noch einmal
   16 px nach innen und steht damit heute schon buendig - eine globale Regel
   haette genau dort einen neuen Versatz erzeugt. Nachgemessen, nicht geschaetzt.

   UI5 reicht eigene Klassen an die Kopfleiste durch, deshalb greift der
   Nachfahren-Selektor. !important, weil die UI5-Regel dieselbe Klasse
   auswertet und sonst gewinnt - gleiche Falle wie bei .vfCard/.vfEditorHeader. */
.sapMITB.vfTabsAligned > .sapMITH {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

/* ---- Einstellungen: die Beschriftungsspalte darf wachsen ---------------- */
/*
   Eine Einstellungszeile ist eine HBox mit justifyContent="SpaceBetween":
   links Beschriftung und Hilfetext, rechts das Feld. Die linke VBox stand auf
   `flex: 0 1 auto` und schrumpfte damit auf die Wunschbreite ihres Inhalts -
   bei umbrechendem Text sind das rund 190 px. Der Hilfetext brach auf vier
   Zeilen um, waehrend in der Mitte der Zeile 500 px leer blieben (Befund S1,
   27.08.2026).

   min-width: 0, weil eine Flex-Box sonst nicht unter die Breite ihres
   laengsten Wortes schrumpfen darf - ohne das kann die Zeile am rechten Feld
   vorbeiwachsen.
*/
.vfSettingsCard .sapMHBox.sapMFlexBoxJustifySpaceBetween > .sapMVBox:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---- Waagerecht scrollende Tabelle: den Balken sichtbar lassen ---------- */
/*
   Eine breite Tabelle steckt in vFlow in einer ScrollContainer, weil sap.m.Page
   sie sonst BESCHNEIDET (siehe Kommentar in Monitoring.view.xml). Scrollen ging
   also - nur sah man es nicht: macOS blendet den Balken aus, solange niemand
   scrollt, und eine halb sichtbare Spalte sieht abgeschnitten aus, nicht
   verschiebbar (Befund M10, 27.08.2026).

   Schmal und in Randfarbe, damit der Balken nicht mit den Daten konkurriert.
   NUR ::-webkit-scrollbar, ausdruecklich OHNE das standardisierte
   scrollbar-width: sobald das gesetzt ist, ignoriert Chrome die
   ::-webkit-Regeln - und der Balken bleibt ein Overlay, das erst beim
   Scrollen erscheint. Genau das war im Browser zu sehen (offsetHeight ==
   clientHeight, also null Platz fuer den Balken). Firefox bringt von Haus
   aus einen sichtbaren schmalen Balken mit und braucht die Regel nicht.

   Zwei Selektoren je Regel, weil UI5 die Klasse AN das scrollende Element
   selbst haengt (.sapMScrollCont.vfQuerScroll) und nicht an eine Huelle
   darum. Nur mit dem Nachfahren-Selektor griff gar nichts - nachgesehen im
   Browser, nicht angenommen.
*/
.vfQuerScroll.sapMScrollCont::-webkit-scrollbar,
.vfQuerScroll .sapMScrollCont::-webkit-scrollbar {
  height: 8px;
}

.vfQuerScroll.sapMScrollCont::-webkit-scrollbar-track,
.vfQuerScroll .sapMScrollCont::-webkit-scrollbar-track {
  background: transparent;
}

.vfQuerScroll.sapMScrollCont::-webkit-scrollbar-thumb,
.vfQuerScroll .sapMScrollCont::-webkit-scrollbar-thumb {
  background: var(--vf-border-strong);
  border-radius: var(--vf-radius-xs);
}

/* ---- 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);
}

/* Information war als einziger Zustand nicht als Pille gestaltet - er fiel
   deshalb auf die UI5-Vorgabe zurueck und erschien als blauer Text, der wie
   ein Link aussieht. Aufgefallen am Zustand "freigegeben" eines
   Transportauftrags (Befund K2, 27.08.2026), betrifft aber jede kuenftige
   Verwendung. Die Tokens dafuer gab es laengst. */
.sapMObjStatusInformation {
  background: var(--vf-info-bg);
  border-color: var(--vf-info-border);
  color: var(--vf-info);
}
.sapMObjStatusInformation::before {
  background: var(--vf-info);
}

.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);
}

/* ---- 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);
  /* Frozen header (Stefan-Review 2026-07-15): bleibt beim Scrollen der
     sap.m.Page sichtbar, damit "Speichern" ohne Hochscrollen erreichbar
     bleibt. Greift nur, wenn der Kopfbereich selbst so hoch wird, dass die
     Page überhaupt scrollt - der Splitter darunter scrollt ohnehin intern.
     !important: UI5s Basis-CSS setzt auf .sapMFlexBox "position: relative"
     und lädt nach vflow.css - gleiche Falle wie beim Hintergrund oben. */
  position: sticky !important;
  top: 0 !important;
  z-index: 2;
}

/* Trennlinie zwischen dem Kopf (Breadcrumb/Titel/Version/Verarbeitung) und
   der Bearbeitungssperre/dem Canvas im Flow-Editor. */
.vfHeaderDivider {
  height: 1px;
  /* !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
     .vfEditorHeader oben, siehe project_vflow_ui5_theming_quirks. */
  background: var(--vf-border) !important;
  margin: var(--vf-space-4) 0;
}


/* ==========================================================================
   vFlow Pulse Portal – eigene Ergänzungen. Nur Tokens, keine Festwerte.
   ========================================================================== */

.pulseSeite .sapMPageEnableScrolling {
  background: var(--vf-bg);
}

.pulseInhalt {
  box-sizing: border-box;
  max-width: var(--vf-content-max);
  padding: var(--vf-space-6);
  gap: var(--vf-space-4);
}

.pulseKennzahlen {
  gap: var(--vf-space-4);
}

.pulseKachel {
  min-width: 11rem;
  padding: var(--vf-space-4) var(--vf-space-5);
  background: var(--vf-surface);
  border: 1px solid var(--vf-border);
  border-radius: var(--vf-radius-md);
  box-shadow: var(--vf-shadow-sm);
}

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

.pulseKopf {
  gap: var(--vf-space-3);
  padding: var(--vf-space-4) var(--vf-space-5);
  background: var(--vf-surface);
  border: 1px solid var(--vf-border);
  border-radius: var(--vf-radius-md);
}

.pulseFett {
  font-weight: var(--vf-fw-medium) !important;
}

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

.pulseHinweise {
  gap: var(--vf-space-1);
}

.pulseReiter {
  background: var(--vf-surface);
  border: 1px solid var(--vf-border);
  border-radius: var(--vf-radius-md);
}

/* Pflichtaussage 15 §2.4 – ruhig, aber immer sichtbar. */
.pulsePflichtaussage {
  display: block;
  margin-top: var(--vf-space-4);
  padding: var(--vf-space-3) var(--vf-space-4);
  border-left: 3px solid var(--vf-border-strong);
  color: var(--vf-text-secondary) !important;
  font-size: var(--vf-fs-sm) !important;
}

/* ---- Anmeldung ----------------------------------------------------------- */
.pulseAnmeldungSeite .sapMPageEnableScrolling {
  background: var(--vf-bg);
}

.pulseKarte {
  box-sizing: border-box;
  padding: var(--vf-space-7) var(--vf-space-6);
  background: var(--vf-surface);
  border: 1px solid var(--vf-border);
  border-radius: var(--vf-radius-lg);
  box-shadow: var(--vf-shadow-md);
}

.pulseQr svg {
  display: block;
  width: 12rem;
  height: 12rem;
}

.pulseUmbruch {
  word-break: break-all;
}

.pulseCodes .sapMSLITitleOnly {
  font-family: var(--vf-font-mono);
}

/* Einmal angezeigter Wert (Code, Anfangspasswort): groß und kopierbar. */
.pulseEinmalWert {
  display: block;
  margin-top: var(--vf-space-4);
  padding: var(--vf-space-3);
  background: var(--vf-surface-sunk);
  border: 1px solid var(--vf-border);
  border-radius: var(--vf-radius-sm);
  font-size: var(--vf-fs-h3) !important;
  letter-spacing: 0.05em;
  user-select: all;
}

/* Die App füllt das Fenster: ohne Höhe an html/body hat der Container 0 px. */
html,
body,
#content {
  height: 100%;
  margin: 0;
}

/* Status-Pills in Tabellen nicht umbrechen („Noch kein Kontakt“). */
.pulseTabelle .sapMObjStatus {
  white-space: nowrap;
}