/* ============================================================
   UDM Navigation v2026
   Neues Navigationskonzept: Tab-Karten + Sidebar + zweizeiliger Content-Header

   Layout:
     .udm2026-root             — aeusserster Container (Flex column)
       .udm2026-appbar         — Tab-Bar oben (Home + Tab-Karten + Zurueck + User/Notif)
       .udm2026-body           — Sidebar + Content (Flex row)
         .udm2026-sidebar      — Baum des aktiven Tabs
         .udm2026-content      — Content-Header + Subdialog-Bar + Toolbar + Form

   Farben werden aus Bootstrap-Variablen (--bs-primary, --bs-secondary-color,
   --bs-border-color) abgeleitet. Kontext-Farben (App/System/Verwaltung) und
   Element-Typ-Farben sind hier als CSS-Custom-Properties gekapselt.
   ============================================================ */

:root {
    /* Farbschema-Tokens.
       WICHTIG: Variablen, deren Wert direkt von --bs-primary-rgb abhaengt,
       werden NICHT hier als Zwischenvariablen angelegt. Grund: Die Custom-
       Primaerfarbe wird via JS auf document.body gesetzt (siehe scripts.js
       SetPrimaryColor). CSS Custom Properties mit nested var() in :root
       loesen das innere var() nicht zuverlaessig im body-Scope auf — damit
       wuerden AppBar/Sidebar beim Custom-Theme auf dem Default-Blau haengen.
       Loesung: rgba(var(--bs-primary-rgb), X) direkt an der Verwendungsstelle. */
    --udm2026-toolbar-bg: var(--bs-light-border-subtle);
    --udm2026-tab-inactive-opacity: 0.8;
    --udm2026-tab-radius: 4px;
    --udm2026-tab-stripe-width: 4px;
    /* === Element-Typ- + Kontext-Farben — zentral aus udm_colors.css ===
       Vorher hatte diese Datei eigene Hex-Werte; das fuehrte zu Inkonsistenzen
       mit Baum/Liste (siehe udm_admin.css:2052ff. + AppStructureTreeNodeControl).
       Single Source of Truth ist jetzt udm_colors.css — hier nur Mapping auf
       die 2026-Variablennamen, damit alter Selektor-Code unveraendert weiterlaeuft.
       *-bg-Pendants via color-mix; ergibt automatisch den passenden Tint zur
       aktuellen Vollfarbe. */

    /* Kontext-Farben fuer Tab-Karten (App / System / Verwaltung) */
    --udm2026-ctx-app:      var(--udm-type-app);
    --udm2026-ctx-sys:      var(--udm-type-system);
    --udm2026-ctx-sys-bg:   color-mix(in srgb, var(--udm-type-system) 10%, transparent);
    --udm2026-ctx-mgmt:     var(--udm-ctx-mgmt);
    --udm2026-ctx-mgmt-bg:  color-mix(in srgb, var(--udm-ctx-mgmt) 10%, transparent);

    /* Element-Typ-Farben (Content-Header + Sidebar-Icon-Toenung + Breadcrumb) */
    --udm2026-type-dlg:     var(--udm-type-dialog);
    --udm2026-type-ae:      var(--udm-type-view);
    --udm2026-type-ae-bg:   color-mix(in srgb, var(--udm-type-view) 10%, transparent);
    --udm2026-type-ent:     var(--udm-type-entity);
    --udm2026-type-ent-bg:  color-mix(in srgb, var(--udm-type-entity) 10%, transparent);
    --udm2026-type-ds:      var(--udm-type-datasource);
    --udm2026-type-ds-bg:   color-mix(in srgb, var(--udm-type-datasource) 10%, transparent);
    /* Job + Code: im Baum neutral (kein eigener Element-Typ in udm_colors.css).
       Hier gleiche Logik — siehe udm_admin.css:2059-2060 (icon-job / icon-report
       / icon-message / icon-mapping / icon-default → secondary-color). */
    --udm2026-type-job:     var(--bs-secondary-color);
    --udm2026-type-job-bg:  color-mix(in srgb, var(--bs-secondary-color) 10%, transparent);
    --udm2026-type-code:    var(--bs-secondary-color);
    --udm2026-type-code-bg: color-mix(in srgb, var(--bs-secondary-color) 8%, transparent);
}

/* ============================================================
   ROOT LAYOUT
   ============================================================ */
.udm2026-root {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--bs-body-bg);
}

.udm2026-body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    overflow: hidden;
}


/* ============================================================
   APPBAR-WRAPPER — Klammert Z1 (Tabs) und optional Z2 (Breadcrumb).
   Die CSS-Variable --udm2026-appbar-height wird via inline-Style je
   nach Sichtbarkeit von Z2 gesetzt und an Backdrop/User-Menu vererbt
   (CSS-Variable-Cascade funktioniert auch fuer position:fixed-Kinder).
   ============================================================ */
.udm2026-appbar-wrapper {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    /* Kein Hintergrund mehr am Wrapper — die AppBar (Z1) traegt ihren eigenen,
       einfarbigen Primary-Tint. Es gibt keine Z2 mehr; der PageTitle ist in den
       PageHeader gewandert. */
}

/* ============================================================
   APPBAR Z1 — Home | Tab-Karten | Notif | User
   Einfarbiger, deutlich sichtbarer Primary-Tint. Keine Trennlinie nach unten —
   die AppBar geht fliessend in den PageHeader ueber.
   ============================================================ */
.udm2026-appbar {
    display: flex;
    align-items: stretch; /* Kinder strecken sich auf gleiche Hoehe */
    padding: 0.5em 0.5em;
    gap: 0.4em;
    background: rgba(var(--bs-primary-rgb), 0.38);
    flex-shrink: 0;
    /* Fixe Mindesthoehe — sonst schrumpft die AppBar, wenn der Breadcrumb
       (zweizeilig: Type + Name) leer ist und kein hohes Geschwister-Element
       (User-Block / Sidebar-Toggle / Notif) die Höhe traegt. */
    min-height: var(--udm2026-appbar-height, 3.8em);
}

/* AdminClient-Marker: 2px-Linie am oberen Rand grenzt den AdminClient
   visuell vom UserClient ab. Reine Markierung — keine Layout-Wirkung
   auf Kinder, da Hoehenverschiebung um 2px irrelevant ist. */
.udm2026-appbar--admin {
    border-top: 4px solid var(--bs-primary);
}

/* App-Aktionen (UserClient): Button-Gruppe rechtsbuendig vor Notif/User.
   margin-left:auto ist robust — falls der Breadcrumb waechst, ist es ein No-op,
   sonst schiebt es die Gruppe (samt Notif/User) nach rechts. */
.udm2026-appbar-actions {
    display: flex;
    align-items: stretch;
    gap: 0.4em;
    margin-left: auto;
}

.udm2026-appbar-action-btn {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0 0.8em;
    border-radius: var(--udm2026-tab-radius);
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    cursor: pointer;
    white-space: nowrap;
}

.udm2026-appbar-action-btn:hover {
    color: var(--bs-primary);
    border-color: rgba(var(--bs-primary-rgb), 0.25);
}

.udm2026-home {
    /* Rahmenlos: nur das Haus-Icon. Volle Hoehe via align-self:stretch,
       damit das Icon optisch auf der Hoehe der Tab-Karten sitzt (kein
       quadratischer Kasten mehr, der kleiner als die zweizeiligen Tabs wirkt). */
    align-self: stretch;
    aspect-ratio: 1 / 1;
    border-radius: var(--udm2026-tab-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;
    font-size: 1.1em;
    color: var(--bs-secondary-color);
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    background: rgba(var(--bs-primary-rgb), 0.08);
}
.udm2026-home:hover {
    background: rgba(var(--bs-primary-rgb), 0.28);
    color: var(--bs-primary);
}

.udm2026-cards {
    display: flex;
    gap: 0.4em;
    flex: 1 1 auto;
    /* overflow-x:auto wuerde overflow-y auch zu "auto" zwingen — dann waere das
       Root-Karten-Dropdown unten abgeschnitten und nur eine Scrollbar sichtbar.
       overflow-x:clip erlaubt overflow-y:visible (modernes CSS, Chromium/Edge). */
    overflow-x: clip;
    overflow-y: visible;
    padding: 0 0.15em;
    min-width: 0;
}

/* ------------ Tab-Karte (Split-Button-Layout) ------------
   Aufbau:
     [ .main ] | [ .right-col ]
       .main         — Icon + Name (+ Type bei AdminClient)  -> Tab aktivieren
       .splitter     — vertikale Trennlinie
       .right-col    — Spalte mit zwei Klick-Zonen:
         .close      — oben:  alle Seiten der Gruppe schliessen
         .hsplitter  — feine horizontale Trennlinie (mit Aussen-Margin)
         .drop       — unten: Zahl + Chevron, Dropdown der offenen Seiten
*/
.udm2026-card {
    display: inline-flex;
    align-items: stretch;
    border-radius: var(--udm2026-tab-radius);
    background: var(--bs-body-bg);
    /* 2px Rahmen — bei inaktiven Karten transparent, damit die Hoehe konstant
       bleibt wenn die aktive Karte den Kontext-Rahmen einblendet. */
    border: 2px solid transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    opacity: var(--udm2026-tab-inactive-opacity);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    transition: opacity 0.12s, box-shadow 0.12s, border-color 0.12s, background 0.12s;
}
.udm2026-card:not(.active) {
    border-color: rgba(0, 0, 0, 0.06);
}
.udm2026-card:hover {
    opacity: 0.95;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
}
.udm2026-card.active {
    opacity: 1;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
    /* Gleicher Hintergrund wie Home-Button (Body-BG) — hebt die aktive Karte
       klar vom primary-getoenten AppBar-Hintergrund ab. Rahmen in Primary-
       Farbe fuer alle Kontexte (einheitliche Aktiv-Kennung). */
    background: var(--bs-body-bg);
    border-color: var(--bs-primary);
}

/* Linke Klick-Zone — Tab aktivieren */
.udm2026-card .main {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.65em 0.6em 0.65em 0.4em;
    cursor: pointer;
    min-width: 0;
    transition: background 0.12s;
}
.udm2026-card .main:hover {
    background: rgba(var(--bs-primary-rgb), 0.05);
}

/* Icon-Well links: einheitlicher Container fuer FA-Icon oder GroupImage.
   Zwei Modifier:
     .icon  — FA-Icon; Aktive Karte faerbt das Well in Kontextfarbe ein.
     .image — Bild-Icon (byte[] GroupImage); Well bleibt neutral, Bild
              unveraendert (KEINE Color-Filter), Aktiv-Marker nur via Border. */
.udm2026-card-well {
    width: 2em;
    height: 2em;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-size: 1em;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.udm2026-card-well.image {
    background: var(--bs-body-bg);
    padding: 0.15em;
}
.udm2026-card-well img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Legacy-Klasse auf das Bild im Well — jetzt full-size statt 1em. */
.udm2026-card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Text-Spalte (Type + Name untereinander). */
.udm2026-card .text-col {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.udm2026-card .type {
    font-size: 0.7em;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.udm2026-card .type.ctx-app { color: var(--udm2026-ctx-app); }
.udm2026-card .type.ctx-sys { color: var(--udm2026-ctx-sys); }
.udm2026-card .type.ctx-mgmt { color: var(--udm2026-ctx-mgmt); }
.udm2026-card:not(.active) .type { opacity: 0.65; }

.udm2026-card .name {
    font-size: 0.9em;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12em;
    line-height: 1.2;
}
.udm2026-card.active .name {
    color: var(--bs-body-color);
    font-weight: 700;
}

/* Vertikale Trennlinie zwischen Main und rechter Spalte */
.udm2026-card .splitter {
    width: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 0.25em 0;
    align-self: stretch;
    flex-shrink: 0;
}
.udm2026-card.active .splitter {
    background: rgba(var(--bs-primary-rgb), 0.25);
}

/* Rechte Spalte: Close oben, Drop unten */
.udm2026-card .right-col {
    display: flex;
    flex-direction: column;
    min-width: 2.4em;
    align-self: stretch;
}

/* Feine horizontale Trennlinie zwischen Close und Drop —
   bewusst sehr dezent, mit seitlichem Abstand, damit sie weder den
   vertikalen Splitter links noch den Karten-Rand rechts beruehrt. */
.udm2026-card .hsplitter {
    height: 1px;
    background: rgba(0, 0, 0, 0.04);
    margin: 0 0.5em;
    flex-shrink: 0;
}
.udm2026-card.active .hsplitter {
    background: rgba(var(--bs-primary-rgb), 0.10);
}

/* Close-Zone (obere Haelfte der rechten Spalte) */
.udm2026-card .close {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.15em 0.3em;
    cursor: pointer;
    color: var(--bs-secondary-color);
    opacity: 0.55;
    transition: background 0.12s, color 0.12s, opacity 0.12s;
    font-size: 0.8em;
    line-height: 1;
}
.udm2026-card:hover .close { opacity: 0.85; }
.udm2026-card .close:hover {
    opacity: 1;
    background: #dc3545;
    color: #fff;
}

/* Drop-Zone (untere Haelfte): Zahl + Chevron nebeneinander */
.udm2026-card .drop {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    padding: 0.15em 0.3em;
    cursor: pointer;
    color: var(--bs-secondary-color);
    transition: background 0.12s, color 0.12s;
}
.udm2026-card .drop:hover {
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
}
.udm2026-card.active .drop { color: var(--bs-primary); }
.udm2026-card .drop .num {
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1;
}
.udm2026-card .drop .chev {
    font-size: 0.6em;
    line-height: 1;
    opacity: 0.85;
}

/* ------------ Zurueck-Button (neutral / cross-tab orange) ------------ */
.udm2026-back {
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.3em 0.7em;
    border-radius: var(--udm2026-tab-radius);
    cursor: pointer;
    background: var(--bs-body-bg);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
    margin-left: 0.5em;
    transition: background 0.12s, border-color 0.12s;
}
.udm2026-back:hover {
    background: rgba(var(--bs-primary-rgb), 0.04);
    border-color: rgba(var(--bs-primary-rgb), 0.25);
}
.udm2026-back.cross {
    background: rgba(253, 126, 20, 0.06);
    border-color: rgba(253, 126, 20, 0.2);
}
.udm2026-back.cross:hover {
    background: rgba(253, 126, 20, 0.12);
    border-color: rgba(253, 126, 20, 0.38);
}
.udm2026-back i { color: var(--bs-secondary-color); font-size: 0.9em; }
.udm2026-back:hover i { color: var(--bs-primary); }
.udm2026-back.cross i { color: #b45309; }

.udm2026-back .info { display: flex; flex-direction: column; line-height: 1.2; }
.udm2026-back .type {
    font-size: 0.72em;
    font-weight: 600;
    color: var(--bs-tertiary-color, #9ba3ab);
    display: flex;
    align-items: center;
    gap: 0.2em;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.udm2026-back .type i { font-size: 0.9em; }
.udm2026-back .name {
    font-size: 0.9em;
    color: var(--bs-body-color);
    font-weight: 500;
}


/* ============================================================
   PAGEHEADER — Ersetzt die frueheren Ebenen "PageHeader" (Typ/Name/Save/Close),
   "AppBar-Z2" (Breadcrumb) und "SubdialogBar" (Pills) in einer Struktur:

     [LEFT] Zeile 1: Back-Chip · Typ · Titel · Meta            │  [💾] [💾↩] │ [⋯] [✕]
            Zeile 2: Primary-Tab-Reiter + Sekundaer-Pills         (Close ganz rechts aussen)

   Unten durch 2px primary-Linie vom Content getrennt (= Tab-Grundlinie).
   ============================================================ */
.udm-pageheader {
    display: flex;
    align-items: stretch;
    /* bs-light — gleiche Farbe wie Sidebar + Page-Toolbar. Die 2px primary
       Linie unten trennt zum Content (bzw. zur Toolbar darunter). */
    background: var(--bs-light);
    border-bottom: 2px solid rgba(var(--bs-primary-rgb), 0.8);
    min-height: 3.8em;
    flex-shrink: 0;
}

/* Pane-Sheet — Content-Bereich unterhalb der Toolbar eines DxSplitterPanes.
   0.5rem Padding + inset-Shadow schafft einen "Arbeitsblatt"-Look rundum.
   Die Toolbar sitzt OBERHALB dieses Sheets und klebt am Pane-Oberrand —
   sie gehoert bewusst NICHT ins Sheet (Toolbars "kleben oben" als
   Navi-Band, Sheet ist das Content-Blatt darunter). Flex-Layout damit das
   Sheet die verbleibende Hoehe im Pane einnimmt. */
.udm-pane-sheet {
    padding: 0.5rem;
    box-shadow: inset 0 0 5px 1px #cccccc;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* Single-Line-Variante: keine Tab-Zeile vorhanden → keine primary-Linie noetig.
   Wird gerendert, wenn die Seite keine Subdialoge hat. */
.udm-pageheader.single-line {
    border-bottom: 1px solid var(--bs-border-color);
    min-height: 2.8em;
}
.udm-pageheader.single-line .udm-pageheader-right {
    justify-content: center;
    padding-bottom: 0.3em;
}

/* Rechts: ⋯-Menu + Save + SaveClose + Close. position: relative fuer das Popup,
   das sich an diesem Container orientiert. Close steht ganz rechts aussen. */
.udm-pageheader-right-actions {
    display: flex;
    align-items: center;
    padding: 0.35em 0.5em;
    gap: 0.2em;
    flex-shrink: 0;
    position: relative;
}
.udm-pageheader-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7em;
    height: 2.7em;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--bs-secondary-color);
    cursor: pointer;
    font-size: 0.95em;
    transition: background 0.12s, color 0.12s;
}
.udm-pageheader-btn:hover {
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}
.udm-pageheader-btn.close-action:hover {
    background: rgba(var(--bs-danger-rgb), 0.1);
    color: var(--bs-danger);
}

/* ============================================================
   ZWEI-ZONEN WORK-ZONE (§5b) — "Handeln"-Zone
   Vorzeile (Reiter — nutzt .udm-pageheader-tabs) + Werkzeug/Lifecycle-Zeile.
   PHASE 1: ruhendes Geruest. Markup folgt in Phase 2 (Udm2026PageHeader).
   Lifecycle-Buttons nutzen .udm-pageheader-btn (oben).
   ============================================================ */
.udm-workzone {
    display: flex;
    flex-direction: column;
    background: var(--bs-light);
    flex-shrink: 0;
    /* Hoist (§5b.7): die VE-Kopfzeile sitzt jetzt hier oben (DOM VOR dem Content),
       ihre nach unten oeffnenden Dropdowns (Vordef.-Filter/Schnellfilter) wuerden sonst
       hinter dem Content liegen. Eigener Stacking-Context hebt die Work-Zone darueber. */
    position: relative;
    z-index: 20;
}
/* Trennlinie zum Content: OHNE Reiter eine dezente 1px-Linie an der Work-Zone;
   MIT Reitern traegt sie Zeile 1 (volle Breite, vom aktiven Reiter ueberdeckt — s.u.). */
.udm-workzone.no-vorzeile {
    border-bottom: 1px solid var(--bs-border-color);
}

/* ===== Zeile 1: [ links: Reiter / VE-Header / Form-Tools ] [ Lifecycle (rechts) ] ===== */
.udm-workzone-row1 {
    display: flex;
    align-items: center;
    min-height: 2.8em;
    padding: 0 0.4em;
    gap: 0.4em;
}
/* Mit Reitern: Zeile 1 traegt die primary-Grundlinie ueber die VOLLE Breite (der aktive
   Reiter ueberdeckt sie via ::after), und alle Kinder sitzen unten auf der Linie. */
.udm-workzone:not(.no-vorzeile) .udm-workzone-row1 {
    align-items: flex-end;
    border-bottom: 2px solid rgba(var(--bs-primary-rgb), 0.8);
}
/* Linker Bereich gibt Platz ab (min-width:0) → die Reiter verdraengen die Lifecycle-Buttons
   NIE. overflow-x:clip kappt horizontalen Reiter-Ueberlauf (Buttons bleiben sichtbar),
   overflow-y:visible laesst nach unten oeffnende Dropdowns + das aktive-Reiter-::after
   austreten. (Anzahl zusaetzlich via ⋯-Overflow-Popup begrenzt.) */
.udm-workzone-row1-left {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    overflow-x: clip;
    overflow-y: visible;
}
/* Lifecycle: unantastbar rechts — nie schrumpfen, immer voll sichtbar; vertikal zentriert
   (auch wenn Zeile 1 mit Reitern unten ausgerichtet ist). */
.udm-workzone-lifecycle {
    display: flex;
    align-items: center;
    gap: 0.2em;
    flex: 0 0 auto;
    align-self: center;
    position: relative;   /* Anker fuer das ⋯-Popup */
}

/* Menue-VE (keine Reiter): die VE-Kopfzeile steht in Zeile 1 und waechst beim Aufklappen
   des Schnellfilters nach UNTEN. Damit die PageActions dabei NICHT mitwandern, oben
   ausrichten — Lifecycle bleibt auf Hoehe der VE-Toolbar-Zeile stehen. */
.udm-workzone.no-vorzeile .udm-workzone-row1 {
    align-items: flex-start;
}
.udm-workzone.no-vorzeile .udm-workzone-lifecycle {
    align-self: flex-start;
    /* vertikal auf die VE-Toolbar-Zeile (Hoehe ~ min-height der Zeile) einmitten */
    min-height: 2.8em;
}

/* ===== Zeile 2: volle-Breite Haupt-Toolbar (VE-Header bzw. Form-Tools), wenn es Reiter gibt.
   Die Trennung zu Zeile 1 leistet bereits deren 2px-Grundlinie. ===== */
.udm-workzone-row2 {
    display: flex;
    align-items: center;
    min-height: 2.6em;
    padding: 0 0.2em;
}

/* Reiter unten in Zeile 1 ausgerichtet; die Grundlinie traegt Zeile 1 (s.o.), nicht mehr
   der Tab-Container (sonst endete die Linie an der Reiter-Breite). ::after-Hintergrund
   = --bs-light fuer den nahtlosen Uebergang in Zeile 2/Content. */
.udm-workzone .udm-pageheader-tabs {
    align-self: flex-end;
    padding: 0.3em 0.2em 0;
}
.udm-workzone .udm-tab.active::after {
    background: var(--bs-light);
}

/* Rechts: zweizeiliger Bereich (Titel-Zeile + Tab-Zeile). */
.udm-pageheader-right {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0.3em 0.6em 0;
    gap: 0.3em;
}
/* Breadcrumb-Variante 2: eigene Hintergrund-Leiste mit dezenter Schrift,
   damit der Breadcrumb visuell klar von der Tab-Zeile darunter getrennt ist
   (Prototyp: docs/04_design/prototypes/breadcrumb-konzepte.html, Variante 2). */
.udm-pageheader-title-row {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.4em 0em;
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

/* Zurueck-Chip — dezent grauer Hintergrund, klickbar, Typ-Kuerzel + Parent-Name */
.udm-pageheader-back {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.15em 0.5em;
    background: rgba(0,0,0,0.04);
    color: var(--bs-secondary-color);
    font-size: 0.82em;
    border-radius: 14px;
    cursor: pointer;
    flex-shrink: 0;
    max-width: 28%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.12s, color 0.12s;
}
.udm-pageheader-back:hover {
    background: rgba(var(--bs-primary-rgb), 0.10);
    color: var(--bs-primary);
}
.udm-pageheader-back i { font-size: 0.75em; opacity: 0.7; }
.udm-pageheader-back .back-type {
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.75;
}

/* Typ-Indikator als Breadcrumb-Link (Variante 2): kein Pille-Hintergrund,
   nur Typ-Farbe als Text. Der currentColor-basierte Hintergrund entfaellt,
   damit die kompakte Sub-Bar nicht von einem Bunten-Pill dominiert wird. */
.udm-pageheader-type {
    font-size: 0.95em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.udm-pageheader-type.type-ae   { color: var(--udm2026-type-ae); }
.udm-pageheader-type.type-dlg  { color: var(--udm2026-type-dlg); }
.udm-pageheader-type.type-ent  { color: var(--udm2026-type-ent); }
.udm-pageheader-type.type-ds   { color: var(--udm2026-type-ds); }
.udm-pageheader-type.type-job  { color: var(--udm2026-type-job); }
.udm-pageheader-type.type-code { color: var(--udm2026-type-code); }
.udm-pageheader-type.ctx-app   { color: var(--udm2026-ctx-app); }
.udm-pageheader-type.ctx-sys   { color: var(--udm2026-ctx-sys); }

.udm-pageheader-title {
    font-size: 1em;
    font-weight: 600;
    color: var(--bs-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
/* Chevron-Separator zwischen Typ-Indikator und Title (Variante 2). */
.udm-pageheader-type + .udm-pageheader-title::before {
    content: "›";
    margin-right: 0.45em;
    color: var(--bs-secondary-color);
    opacity: 0.5;
    font-weight: 400;
}
.udm-pageheader-meta {
    font-size: 0.78em;
    color: var(--bs-secondary-color);
    opacity: 0.7;
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Tab-Reiter-Zeile — Primaere Reiter + Divider + Sekundaere Pills.
   KEIN overflow, damit das ::after des aktiven Tabs die primary-Linie
   ueberdecken kann. Bei sehr vielen Reitern muss der Scroll-Container
   weiter aussen liegen (noch offen). */
.udm-pageheader-tabs {
    display: flex;
    align-items: flex-end;
    gap: 0;
    min-height: 1.9em;
    flex-wrap: nowrap;
    overflow: visible;
    position: relative;
}

/* Hinweis: KEIN Scroll-/overflow-Wrapper um die sichtbaren Reiter. Ein solcher
   Wrapper (overflow-x: auto/clip) clippt zwingend auch vertikal und kappt damit
   das 2px nach unten austretende ::after des aktiven Reiters → die primary-
   Grundlinie liefe durchgaengig durch. Horizontaler Ueberlauf wird von
   .udm-workzone-row1-left (overflow-x: clip) begrenzt, der Zugriff auf alle
   Reiter ueber das „…"-Overflow-Popup. (Vgl. Udm2026PageHeader.razor.) */

/* Inaktiver Reiter — feiner 1px-Rahmen oben+seitlich, unten offen.
   Padding-Top +1px kompensiert den 1px duenneren Border (vs. 2px beim
   aktiven); dadurch sind Gesamthoehe und Content-Position fuer alle
   Tabs identisch, ohne negative Margin. */
.udm-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: calc(0.35em + 1px) 0.85em 0.35em;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-bottom: none;
    border-radius: 0;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.12s, border-color 0.12s;
    position: relative;
}
/* Geteilte vertikale Trennlinie zwischen benachbarten Reitern:
   1px nach links rutschen — horizontaler Margin, unkritisch. */
.udm-tab + .udm-tab { margin-left: -1px; }

.udm-tab:hover {
    color: var(--bs-body-color);
    border-color: color-mix(in srgb, var(--bs-primary) 35%, var(--bs-border-color));
    z-index: 1;
}

/* Aktiver Reiter — 2px primary-Rahmen oben+seitlich. Ein ::after-Element
   ueberdeckt die primary-Linie GENAU zwischen den seitlichen Borders
   (left: 0 / right: 0 am Padding-Edge), sodass die vertikalen Rahmen
   nahtlos in die horizontale primary-Linie uebergehen. */
    .udm-tab.active {
        border: 2px solid rgba(var(--bs-primary-rgb), 0.8);
        border-bottom: none;
        padding: 0.35em calc(0.85em - 1px);
        color: var(--bs-primary);
        font-weight: 600;
        z-index: 2;
    }
.udm-tab.active::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -2px;
    height: 2px;
    /* Matcht den PageHeader-Background (bs-light-border-subtle), damit unter
       dem aktiven Tab kein heller Streifen sichtbar wird — nahtloser
       Uebergang vom Tab in die Chrome-Flaeche. */
    background: var(--bs-light-border-subtle);
}
.udm-tab .udm-tab-count {
    background: rgba(0,0,0,0.08);
    padding: 0 0.3em;
    border-radius: 8px;
    font-size: 0.78em;
    font-weight: 700;
}
.udm-tab.active .udm-tab-count {
    background: rgba(var(--bs-primary-rgb), 0.22);
    color: var(--bs-primary);
}

/* Overflow-Reiter — erscheint ab dem 6. primaeren Reiter. Traegt optional
   den Titel des zuletzt aus dem Popup gewaehlten Hidden-Tabs plus ein
   Chevron (⋯). Zwei separate Klickzonen:
     - Label: aktiviert den merked Tab und oeffnet das Popup
     - Chevron: nur Popup-Toggle
   position:relative als Anker fuer das Popup. */
.udm-tab.udm-tab-overflow {
    position: relative;
    gap: 0.4em;
    padding-left: 0.6em;
    padding-right: 0.6em;
}
.udm-tab-overflow-label {
    cursor: pointer;
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.udm-tab-overflow-label:hover {
    color: var(--bs-primary);
}
.udm-tab-overflow-chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.25em;
    color: var(--bs-secondary-color);
    cursor: pointer;
}
.udm-tab-overflow-chev:hover {
    color: var(--bs-primary);
}

/* Popup des Overflow-Reiters — Compound-Selector mit Spezifitaet (0,2,0),
   ueberschreibt zuverlaessig die Basis .udm-pageheader-popup (`right: 0.4em`).
   Oeffnet linksbuendig zum Overflow-Reiter, damit es NICHT ueber den rechten
   Viewport-Rand hinausragt wenn der Reiter weit rechts sitzt. */
.udm-pageheader-popup.udm-tab-overflow-popup {
    left: 0;
    right: auto;
    top: calc(100% + 0.2em);
    min-width: 18em;
}

/* Divider zwischen primaeren Reitern und sekundaeren Pills */
.udm-tab-divider {
    display: inline-block;
    width: 1px;
    align-self: stretch;
    margin: 0.3em 0.6em;
    background: var(--bs-border-color);
}

/* Sekundaere Pills — visuelle Abgrenzung zu den Reitern. Teal-Akzent.
   margin-bottom: 0.3em: Pills sitzen leicht ueber der primary-Linie,
   ueberdecken sie nicht. */
.udm-sec-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.22em 0.7em;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--bs-teal) 25%, var(--bs-border-color));
    border-radius: 14px;
    color: color-mix(in srgb, var(--bs-teal) 70%, var(--bs-body-color));
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    margin-bottom: 0.3em;
    margin-right: 0.2em;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.udm-sec-pill:hover { border-color: var(--bs-teal); color: var(--bs-teal); }
.udm-sec-pill.active {
    background: color-mix(in srgb, var(--bs-teal) 12%, #fff);
    border-color: var(--bs-teal);
    color: var(--bs-teal);
    font-weight: 600;
}
.udm-sec-pill .udm-pill-count {
    background: rgba(0,0,0,0.08);
    padding: 0 0.3em;
    border-radius: 8px;
    font-size: 0.78em;
    font-weight: 700;
}
.udm-sec-pill.active .udm-pill-count {
    background: color-mix(in srgb, var(--bs-teal) 22%, transparent);
    color: var(--bs-teal);
}

/* Wrapper um X-Button + Sekundaer-Titel. position:relative als Anker fuer das
   Popup, damit es sich linksbuendig unter dem Titel oeffnet. */
.udm-secondary-dropdown-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.15em;
}

/* X-Button links vom Sekundaer-Titel — schliesst den sekundaeren Bereich komplett.
   Teal-Akzent passend zum Sekundaer-Farbschema. */
.udm-secondary-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9em;
    height: 1.9em;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: color-mix(in srgb, var(--bs-teal) 70%, var(--bs-secondary-color));
    cursor: pointer;
    font-size: 0.9em;
    transition: background 0.12s, color 0.12s;
}
.udm-secondary-close:hover {
    background: color-mix(in srgb, var(--bs-teal) 12%, transparent);
    color: var(--bs-teal);
}
/* Popup der sekundaeren Subdialog-Auswahl — linksbuendig zum Wrapper. Oeffnet
   nach RECHTS ins Sekundaer-Pane-Innere. Grund: der Sekundaer-Titel sitzt ganz
   links im Pane (direkt nach dem X-Button); ein Oeffnen nach LINKS wuerde ueber
   die linke Pane-Grenze hinausragen und vom DxSplitterPane (overflow: hidden)
   abgeschnitten werden. Der Sekundaer-Toolbar-Wrapper setzt zusaetzlich
   overflow: visible, damit der Popup ueber die Toolbar-Grenzen hinausragen
   kann (siehe udm_mainpage_styles.css).

   WICHTIG: Compound-Selector (.udm-pageheader-popup.udm-secondary-popup) mit
   Spezifitaet (0,2,0) — muss die Basis-Regel .udm-pageheader-popup (Spezifitaet
   0,1,0, `right: 0.4em`) zuverlaessig ueberschreiben, unabhaengig davon welche
   Regel spaeter im Stylesheet steht. */
.udm-pageheader-popup.udm-secondary-popup {
    left: 0;
    right: auto;
    top: calc(100% + 0.2em);
    min-width: 16em;
}

/* Klickbarer Titel in der sekundaeren Toolbar — Dropdown-Toggle,
   der ein Popup mit ALLEN sekundaeren Unterdialogen oeffnet. */
.udm-toolbar-label-dropdown {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-teal);
    padding: 0.25em 0.55em;
    margin-right: 0.5em;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.2;
    transition: background 0.12s, border-color 0.12s;
}
.udm-toolbar-label-dropdown:hover {
    background: color-mix(in srgb, var(--bs-teal) 10%, transparent);
    border-color: color-mix(in srgb, var(--bs-teal) 30%, transparent);
}
.udm-toolbar-label-dropdown .chev { font-size: 0.85em; opacity: 0.7; }

/* Popup-Panel fuer ⋯-Menu. Rechtsbuendig zum .udm-pageheader-right-actions-Container,
   damit das Popup niemals ueber den rechten Viewport-Rand hinausragt. Das Popup
   oeffnet sich also nach LINKS vom rechten Rand. z-index ueberdeckt die darunter
   liegenden Buttons (ist akzeptiert — Popup ist modal). */
.udm-pageheader-popup {
    position: absolute;
    top: 100%;
    right: 0.4em;
    left: auto;
    z-index: 1001;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    padding: 0.3em;
    min-width: 14em;
    max-height: 70vh;
    overflow-y: auto;
}
.udm-pageheader-popup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
}
.udm-pageheader-popup-group-title {
    font-size: 0.68em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color);
    opacity: 0.7;
    padding: 0.5em 0.6em 0.2em;
}
.udm-pageheader-popup-item {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.4em 0.6em;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.88em;
    color: var(--bs-body-color);
    /* Overrides fuer den Fall, dass das Item als DxButton (.dxbl-btn) gerendert wird —
       UdmActionButtonNative setzt beide Klassen an. Default-Button-Optik deaktivieren,
       damit alle Popup-Items als klare Liste erscheinen (kein grauer Kasten je Action). */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    font-weight: 400;
    min-height: unset;
    line-height: 1.3;
}
.udm-pageheader-popup-item:hover {
    background: rgba(var(--bs-primary-rgb), 0.08) !important;
    color: var(--bs-primary) !important;
}
.udm-pageheader-popup-item.active {
    background: color-mix(in srgb, var(--bs-teal) 14%, transparent) !important;
    color: var(--bs-teal) !important;
    font-weight: 600;
}
/* Icon + Text sauber ausrichten innerhalb des Items. */
.udm-pageheader-popup-item i {
    width: 1.2em;
    text-align: center;
    opacity: 0.75;
    flex-shrink: 0;
}
.udm-pageheader-popup-item .udm-pill-count {
    margin-left: auto;
    background: rgba(0,0,0,0.08);
    padding: 0 0.3em;
    border-radius: 8px;
    font-size: 0.78em;
    font-weight: 700;
}

/* ------------ Nachrichten-Glocke (nur UserClient) ------------ */
.udm2026-notif {
    align-self: stretch;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.15em;
    color: var(--bs-secondary-color);
    position: relative;
    flex-shrink: 0;
    margin-left: 0.5em;
    transition: color 0.12s;
}
.udm2026-notif:hover {
    color: var(--bs-primary);
}
.udm2026-notif-badge {
    position: absolute;
    top: -0.1em;
    right: -0.15em;
    min-width: 1.3em;
    height: 1.3em;
    padding: 0 0.3em;
    border-radius: 0.7em;
    background: var(--bs-danger);
    color: #fff;
    font-size: 0.82em;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ankunfts-Animation der Glocke (eigenes Keyframe — unabhängig vom FA-Animations-Bundle). */
@keyframes udm-bell-ring {
    0%   { transform: rotate(0); }
    15%  { transform: rotate(15deg); }
    30%  { transform: rotate(-13deg); }
    45%  { transform: rotate(10deg); }
    60%  { transform: rotate(-7deg); }
    75%  { transform: rotate(4deg); }
    100% { transform: rotate(0); }
}
.udm2026-notif .udm-bell-ring {
    animation: udm-bell-ring 0.8s ease;
    transform-origin: top center;
}

/* ------------ Nachrichten-Popup (Glocken-Dropdown) ------------ */
.udm2026-notif-popup-backdrop {
    /* Fängt Klicks außerhalb ab, um das Popup zu schließen. */
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
}
.udm2026-notif-popup {
    position: fixed;
    top: var(--udm2026-appbar-height, 3.2em);
    right: 0.5em;
    z-index: 1050;
    width: 24em;
    min-width: 18em;
    min-height: 12em;
    max-width: calc(100vw - 1em);
    max-height: calc(100vh - var(--udm2026-appbar-height, 3.2em) - 1em);
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    resize: both;
}
.udm2026-notif-popup-head {
    cursor: move;
    user-select: none;
}
.udm2026-notif-popup-title {
    flex: 1 1 auto;
    min-width: 0;
}

/* Maximal-Modus: füllt den ganzen Bereich unter der AppBar, fix und nicht verstellbar. */
.udm2026-notif-popup--max {
    top: var(--udm2026-appbar-height, 3.2em) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    resize: none !important;
}
.udm2026-notif-popup--max .udm2026-notif-popup-head {
    cursor: default;
}
.udm2026-notif-popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6em 0.8em;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    flex: 0 0 auto;
}
.udm2026-notif-popup-title {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4em;
}
.udm2026-notif-popup-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4em;
    height: 1.4em;
    padding: 0 0.4em;
    border-radius: 0.7em;
    background: var(--bs-danger);
    color: #fff;
    font-size: 0.72em;
    font-weight: 700;
}
.udm2026-notif-popup-actions {
    display: flex;
    align-items: center;
    gap: 0.6em;
}
.udm2026-notif-popup-action {
    cursor: pointer;
    color: var(--bs-secondary-color);
}
.udm2026-notif-popup-action:hover {
    color: var(--bs-primary);
}
.udm2026-notif-popup-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.4em;
}
.udm2026-notif-popup-empty {
    text-align: center;
    color: var(--bs-secondary-color);
    padding: 1.6em 0.8em;
    font-size: 0.9em;
}

/* Lese-Ansicht im Popup (voller Text, Blättern). */
.udm2026-notif-popup-read {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.udm2026-notif-popup-read-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5em 0.8em;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    background: var(--bs-tertiary-bg);
    flex: 0 0 auto;
}
.udm2026-notif-popup-back {
    cursor: pointer;
    color: var(--bs-primary);
    font-weight: 600;
    font-size: 0.9em;
    text-decoration: none;
}
.udm2026-notif-popup-back:hover {
    text-decoration: underline;
}
.udm2026-notif-popup-nav {
    display: flex;
    align-items: center;
    gap: 0.6em;
}
.udm2026-notif-popup-navbtn {
    cursor: pointer;
    color: var(--bs-secondary-color);
}
.udm2026-notif-popup-navbtn:hover {
    color: var(--bs-primary);
}
.udm2026-notif-popup-navbtn.disabled {
    opacity: 0.3;
    pointer-events: none;
}
.udm2026-notif-popup-pos {
    font-size: 0.78em;
    color: var(--bs-secondary-color);
    min-width: 2.6em;
    text-align: center;
}
.udm2026-notif-popup-read-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.9em 1em;
}
.udm2026-notif-popup-read-title {
    font-weight: 700;
    font-size: 1.05em;
    margin-bottom: 0.3em;
}
.udm2026-notif-popup-read-time {
    font-size: 0.8em;
    color: var(--bs-secondary-color);
    margin-bottom: 0.8em;
    display: flex;
    align-items: center;
    gap: 0.4em;
}
.udm2026-notif-popup-read-text {
    font-size: 0.94em;
    line-height: 1.6;
    word-break: break-word;
}
.udm2026-notif-popup-read-text img {
    max-width: 100%;
    height: auto;
}

/* ------------ Nachrichten-Toasts (Kurz-Hinweise unten rechts) ------------ */
.udm2026-toast-stack {
    position: fixed;
    right: 1em;
    bottom: 1em;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    width: 22em;
    max-width: calc(100vw - 2em);
}
.udm2026-toast {
    display: flex;
    gap: 0.7em;
    align-items: flex-start;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--bs-primary);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
    padding: 0.7em 0.85em;
    cursor: pointer;
    animation: udm-toast-in 0.25s ease;
}
@keyframes udm-toast-in {
    from { transform: translateX(1.5em); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
.udm2026-toast:hover {
    background: var(--bs-tertiary-bg);
}
.udm2026-toast-icon {
    color: var(--bs-primary);
    font-size: 1.1em;
    margin-top: 0.1em;
    flex: 0 0 auto;
}
.udm2026-toast-body {
    flex: 1 1 auto;
    min-width: 0;
}
.udm2026-toast-titlerow {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
}
.udm2026-toast-title {
    font-weight: 700;
    font-size: 0.92em;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.udm2026-toast-time {
    font-size: 0.72em;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    flex: 0 0 auto;
}
.udm2026-toast-text {
    font-size: 0.82em;
    color: var(--bs-secondary-color);
    margin-top: 0.15em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.udm2026-toast--summary {
    justify-content: center;
    font-weight: 600;
    font-size: 0.85em;
    color: var(--bs-secondary-color);
    border-left-color: var(--bs-secondary-color);
}

/* ------------ Systemnachrichten-Banner (voller Breite, unter der AppBar) ------------ */
.udm2026-banner {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.8em;
    padding: 0.55em 1em;
    background: var(--bs-warning-bg-subtle, #fff8e6);
    border-bottom: 1px solid var(--bs-border-color);
    border-left: 5px solid var(--bs-warning);
    color: var(--bs-body-color);
}
.udm2026-banner--ack {
    background: var(--bs-danger-bg-subtle, #fbeceb);
    border-left-color: var(--bs-danger);
}
.udm2026-banner > i {
    color: var(--bs-warning);
    font-size: 1.15em;
    flex: 0 0 auto;
}
.udm2026-banner--ack > i {
    color: var(--bs-danger);
}
.udm2026-banner-tag {
    font-size: 0.7em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--bs-warning);
    color: #fff;
    padding: 0.2em 0.6em;
    border-radius: 6px;
    flex: 0 0 auto;
}
.udm2026-banner--ack .udm2026-banner-tag {
    background: var(--bs-danger);
}
.udm2026-banner-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0.6em;
}
.udm2026-banner-title {
    font-weight: 700;
    white-space: nowrap;
    flex: 0 0 auto;
}
.udm2026-banner-text {
    color: var(--bs-secondary-color);
    font-size: 0.9em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.udm2026-banner-count {
    font-size: 0.8em;
    font-weight: 600;
    cursor: pointer;
    color: var(--bs-secondary-color);
    background: rgba(0, 0, 0, 0.06);
    padding: 0.2em 0.6em;
    border-radius: 999px;
    flex: 0 0 auto;
    white-space: nowrap;
}
.udm2026-banner-count:hover {
    background: rgba(0, 0, 0, 0.12);
}
.udm2026-banner-action {
    flex: 0 0 auto;
    border: 1px solid var(--bs-warning);
    background: var(--bs-body-bg);
    color: #9a6b00;
    font-weight: 650;
    border-radius: 8px;
    padding: 0.35em 0.85em;
    cursor: pointer;
    white-space: nowrap;
}
.udm2026-banner-action:hover {
    background: var(--bs-warning);
    color: #fff;
}
.udm2026-banner--ack .udm2026-banner-action {
    border-color: var(--bs-danger);
    color: var(--bs-danger);
}
.udm2026-banner--ack .udm2026-banner-action:hover {
    background: var(--bs-danger);
    color: #fff;
}

/* ------------ User-Info (rechts) ------------ */
.udm2026-user {
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin-left: 0.5em;
    padding: 0.1em 0.4em 0.1em 0.6em;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.12s;
}
.udm2026-user:hover,
.udm2026-user.open {
    background: rgba(var(--bs-primary-rgb), 0.08);
}
.udm2026-user-info {
    display: flex;
    flex-direction: column;
    text-align: right;
    line-height: 1.2;
}
.udm2026-user-name { font-size: 0.88em; font-weight: 600; }
.udm2026-user-system { font-size: 0.75em; color: var(--bs-secondary-color); }
.udm2026-user-avatar {
    width: 1.85em;
    height: 1.85em;
    border-radius: 5px;
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75em;
    font-weight: 700;
    cursor: pointer;
}
.udm2026-user-avatar:hover { background: rgba(var(--bs-primary-rgb), 0.16); }


/* ------------ User-Menu Dropdown (Systemfunktionen) ------------ */
.udm2026-usermenu-backdrop {
    /* Faengt Klicks ausserhalb ab, um das Menu zu schliessen. */
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
}

.udm2026-usermenu {
    position: fixed;
    /* Hoehe der gesamten AppBar (Z1 + optional Z2) — via inline-Style am
       .udm2026-appbar-wrapper gesetzt und via CSS-Variable-Cascade vererbt.
       Fallback 3.2em fuer Mobile/Legacy-Pfade ohne Wrapper. */
    top: var(--udm2026-appbar-height, 3.2em);
    right: 0.5em;
    z-index: 1050;
    min-width: 18em;
    max-width: 24em;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 0.4em;
    display: flex;
    flex-direction: column;
    gap: 0.1em;
}

.udm2026-usermenu-head {
    display: flex;
    flex-direction: column;
    padding: 0.4em 0.6em 0.5em 0.6em;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    margin-bottom: 0.3em;
}
.udm2026-usermenu-name {
    font-weight: 600;
    color: var(--bs-body-color);
}
.udm2026-usermenu-meta {
    font-size: 0.8em;
    color: var(--bs-secondary-color);
    line-height: 1.3;
}

.udm2026-usermenu-container {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.35em 0.6em;
    font-size: 0.88em;
    color: var(--bs-body-color);
    background: rgba(var(--bs-primary-rgb), 0.05);
    border-radius: 4px;
    margin: 0.2em 0;
}
.udm2026-usermenu-container span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.udm2026-usermenu-divider {
    height: 1px;
    background: var(--bs-border-color-translucent);
    margin: 0.3em 0;
}

/* UdmActionButtonNative-Buttons im Menu — transparent, linksbuendig, volle Breite. */
.udm2026-usermenu-btn {
    display: flex !important;
    align-items: center !important;
    gap: 0.5em !important;
    width: 100% !important;
    justify-content: flex-start !important;
    padding: 0.4em 0.6em !important;
    background: transparent !important;
    border: none !important;
    color: var(--bs-body-color) !important;
    text-align: left !important;
    border-radius: 4px !important;
}
.udm2026-usermenu-btn:hover {
    background: rgba(var(--bs-primary-rgb), 0.08) !important;
    color: var(--bs-primary-text-emphasis) !important;
}
.udm2026-usermenu-btn:disabled {
    opacity: 0.5;
    cursor: default;
}


/* ============================================================
   ROOT-KARTEN-DROPDOWN (offene Seiten je Tab-Gruppe + Sidebar-Toggle)

   Visuell 1:1 zur Sidebar: gleicher Hintergrund, wiederverwendet
   Udm2026SidebarItem fuer jeden Eintrag. Damit funktioniert das Dropdown
   zugleich als Navigation fuer mobile Ansichten (keine permanente Sidebar).

   Wrapper noetig, weil .udm2026-card selbst overflow:hidden hat.
   Dropdown haengt als Sibling der Karte unter dem Wrapper und wird
   absolut relativ zum Wrapper positioniert.
   ============================================================ */
.udm2026-card-wrapper {
    position: relative;
    flex-shrink: 0;
}

.udm2026-card-dropdown-backdrop {
    /* Startet UNTERHALB der gesamten AppBar (Z1 + optional Z2),
       damit Klicks auf benachbarte Root-Karten den Backdrop NICHT treffen und
       direkt die jeweilige Karte aktivieren — dann uebernimmt OnCardClicked
       den Dropdown-Wechsel. Klicks auf alles andere im Viewport schliessen
       das Dropdown wie gewohnt. CSS-Variable wird vom Wrapper vererbt. */
    position: fixed;
    top: var(--udm2026-appbar-height, 3.2em);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: transparent;
}

.udm2026-card-dropdown {
    position: absolute;
    top: calc(100% + 0.3em);
    left: 0;
    z-index: 1050;
    min-width: 22em;
    max-width: 32em;
    /* Opaker Popup-Hintergrund (tertiary-bg = leicht abgesetztes Hellgrau).
       Die Item-Darstellung kommt aus Udm2026SidebarItem — die Items wirken
       konsistent zur Sidebar, der Container grenzt sich aber klar vom Inhalt
       dahinter ab. Das Body-BG hatten wir zuvor als durchscheinenden Tint —
       nicht gewuenscht. */
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Scroll-Container fuer die Liste der Sidebar-Items. */
.udm2026-card-dropdown-scroll {
    max-height: 28em;
    overflow-y: auto;
    padding: 0.3em 0;
}

/* Visuell abgesetzter Footer mit Sidebar-Toggle. */
.udm2026-card-dropdown-footer {
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    padding: 0.35em;
}

.udm2026-card-dropdown-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.5em;
    width: 100%;
    padding: 0.45em 0.6em;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--bs-body-color);
    font-size: 0.88em;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}
.udm2026-card-dropdown-toggle-btn:hover {
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary-text-emphasis);
}
.udm2026-card-dropdown-toggle-btn i {
    width: 1.2em;
    text-align: center;
    color: var(--bs-secondary-color);
}


/* ============================================================
   SIDEBAR
   ============================================================ */
.udm2026-sidebar {
    /* Fuellt das DxSplitterPane komplett — Breite kommt vom Splitter. */
    width: 100%;
    height: 100%;
    /* bs-light — Sidebar, PageHeader und Page-Toolbar teilen denselben hellen
       Chrome-Ton. Der Kontrast zum weissen Content ist dezent; die Trennung
       Content ↔ Page-Toolbar erfolgt zusaetzlich ueber einen Shadow (siehe
       .udm-dialog-toolbar-wrapper in udm_mainpage_styles.css). */
    background: var(--bs-light);
    display: flex;
    flex-direction: column;
    /* Keine Basis-Reduktion: Sidebar erbt 1em vom Root.
       Kinder-Schriften werden absolut relativ zum Root gesetzt. */
}
.udm2026-sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Workflow-Block-Container: pro Root + dessen Kinder ein <div>-Wrapper.
   Macht Root + Kinder visuell als Einheit erkennbar — auch wenn ein
   Kind active ist, bleibt die Block-Zugehoerigkeit klar. Border
   gewaehrleistet Sichtbarkeit auch bei sehr aehnlichem Sidebar-BG
   (bs-light), der BG-Tint allein war zu subtil. */
.udm2026-sidebar-group,
.udm2026-sidebar-home {
    background: rgba(0, 0, 0, 0.025);
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 6px;
    margin: 0.3em 0.4em;
    overflow: hidden;
}

/* Home-Icon-Bubble: Primary-Akzentfarbe — der Startseite-Eintrag ist der
   globale Navigations-Anker und hebt sich farblich von den Element-Typen ab. */
.icon-bubble.ctx-home {
    background: transparent !important;
    color: var(--bs-primary) !important;
}
/* Root innerhalb des Blocks etwas dunkler — sichtbare Block-Header-
   Markierung. KEINE Border zwischen Root und erstem Kind. */
.udm2026-sidebar-group > .udm2026-ti.root {
    background: rgba(0, 0, 0, 0.05);
}

/* Tree-Eintrag */
.udm2026-ti {
    display: flex;
    align-items: center;
    gap: 0.8em;
    padding: 0.4em 0.65em;
    /* Fixe Mindesthoehe — garantiert identische Item-Hoehen in Mini- und
       Expanded-Modus, unabhaengig vom Body-Inhalt (Type+Name). Wert: Body-
       Stack (Type ~0.86em + Name 1.2em) + Padding (0.4em*2) ≈ 2.86em. */
    min-height: 2.86em;
    cursor: pointer;
    position: relative;
    transition: background 0.08s;
}
.udm2026-ti:hover { background: rgba(0, 0, 0, 0.025); }

/* Active: deutlich erkennbarer BG-Tint + linker Akzentstreifen
   (etablierte Tree-Konvention). Inset-Box-Shadow als Linie, damit
   das Item-Layout (padding/margin) nicht beeinflusst wird. */
.udm2026-ti.active {
    background: rgba(var(--bs-primary-rgb), 0.12);
    box-shadow: inset 3px 0 0 var(--bs-primary);
}
.udm2026-ti.active .udm2026-ti-name {
    color: var(--bs-primary);
    font-weight: 600;
}

/* Root-Eintrag etwas prominenter (groessere Bubble, fettere Schrift in den
   Sub-Regeln weiter unten). Die visuelle Block-Markierung uebernimmt der
   .udm2026-sidebar-group-Container — KEIN BG-Tint mehr auf dem Root selbst,
   sonst gaebe es wieder Kanten zwischen Root und seinen Kindern. */
.udm2026-ti.root {
    padding: 0.55em 0.65em;
}
.udm2026-ti.root .icon-bubble {
    width: 1.85em;
    height: 1.85em;
    font-size: 0.9em;
}
.udm2026-ti.root .name { font-size: 0.95em; font-weight: 600; }
.udm2026-ti.root.active .name { font-weight: 700; }

/* Icon-Bubble: immer vorhanden (custom Toenung oder Standard) */
.udm2026-ti .icon-bubble {
    width: 1.55em;
    height: 1.55em;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.05);
    color: var(--bs-secondary-color);
}
/* Alte BG-Badge-Regeln entfernt — werden jetzt durch die Workflow-Sidebar-Regeln
   weiter unten (background transparent + color !important + child-color inherit)
   ersetzt. Hier deshalb nichts mehr. */

.udm2026-ti-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.udm2026-ti-type {
    font-size: 0.72em;
    font-weight: 600;
    color: var(--bs-tertiary-color, #9ba3ab);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    /* Bei langen Type-Labels (z.B. "TRAVIS FZG-AUSKUNFT") nicht umbrechen,
       sondern mit Ellipsis abschneiden — gleiches Verhalten wie .udm2026-ti-name. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.udm2026-ti-name {
    color: var(--bs-body-color);
    /* Einzeilig + Ellipsis. Wichtig fuer Mini/Expanded-Hoehengleichheit:
       Wenn der Body im Mini-Slot wrapping erlauben wuerde, waere das Item
       hoeher als im Expanded — beim Hover-Switch wuerde es springen.
       Mit line-clamp:1 ist die Item-Hoehe in beiden Modi identisch.
       Tooltip auf dem Eintrag zeigt den Vollnamen. */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.udm2026-ti.active .udm2026-ti-name {
    color: var(--bs-primary);
    font-weight: 600;
}
.udm2026-ti.root .udm2026-ti-type { font-size: 0.8em; }
.udm2026-ti.root .udm2026-ti-name { font-size: 1.05em; font-weight: 600; }
.udm2026-ti.root.active .udm2026-ti-name { font-weight: 700; }

.udm2026-ti-close {
    font-size: 0.7em;
    color: var(--bs-secondary-color);
    /* Immer sichtbar (gedimmt) — opacity:0 nur on-hover war zu fragil und
       zerstoerte die Klick-Affordance. Beim Item-Hover voll sichtbar. */
    opacity: 0.45;
    padding: 0.15em;
    border-radius: 3px;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.udm2026-ti:hover .udm2026-ti-close,
.udm2026-ti.active .udm2026-ti-close { opacity: 1; }
.udm2026-ti-close:hover { background: rgba(220, 53, 69, 0.1); color: #dc3545; opacity: 1; }

/* Einrueckung + Baumlinien (bis Tiefe 5) */
.udm2026-ti.d-1 { padding-left: 1.7em; }
.udm2026-ti.d-2 { padding-left: 2.8em; }
.udm2026-ti.d-3 { padding-left: 3.9em; }
.udm2026-ti.d-4 { padding-left: 5.0em; }
.udm2026-ti.d-5 { padding-left: 6.1em; }
.udm2026-ti.d-1::before { content: ''; position: absolute; left: 1.2em; top: 0; bottom: 50%; width: 1px; background: rgba(0,0,0,0.1); }
.udm2026-ti.d-1::after  { content: ''; position: absolute; left: 1.2em; top: 50%; width: 0.3em; height: 1px; background: rgba(0,0,0,0.1); }
.udm2026-ti.d-2::before { content: ''; position: absolute; left: 2.3em; top: 0; bottom: 50%; width: 1px; background: rgba(0,0,0,0.1); }
.udm2026-ti.d-2::after  { content: ''; position: absolute; left: 2.3em; top: 50%; width: 0.3em; height: 1px; background: rgba(0,0,0,0.1); }
.udm2026-ti.d-3::before { content: ''; position: absolute; left: 3.4em; top: 0; bottom: 50%; width: 1px; background: rgba(0,0,0,0.1); }
.udm2026-ti.d-3::after  { content: ''; position: absolute; left: 3.4em; top: 50%; width: 0.3em; height: 1px; background: rgba(0,0,0,0.1); }
.udm2026-ti.d-4::before { content: ''; position: absolute; left: 4.5em; top: 0; bottom: 50%; width: 1px; background: rgba(0,0,0,0.1); }
.udm2026-ti.d-4::after  { content: ''; position: absolute; left: 4.5em; top: 50%; width: 0.3em; height: 1px; background: rgba(0,0,0,0.1); }
.udm2026-ti.d-5::before { content: ''; position: absolute; left: 5.6em; top: 0; bottom: 50%; width: 1px; background: rgba(0,0,0,0.1); }
.udm2026-ti.d-5::after  { content: ''; position: absolute; left: 5.6em; top: 50%; width: 0.3em; height: 1px; background: rgba(0,0,0,0.1); }


/* ============================================================
   SIDEBAR — MINI-MODUS (collapsed, 56px-Schiene mit Hover-Overlay)
   ============================================================
   Wird vom Container (Udm2026ContentContainer) gesetzt, wenn
   SidebarCollapsed=true und mindestens eine Workflow-Page offen ist.

   Designprinzip: Item-Geometrie (padding/margin/border) MUSS in Mini
   und Hover-Expand identisch sein, sonst springen die Items vertikal
   beim Hover. Daher ueberschreibt der Mini-Modus KEINE Layout-Werte —
   weder padding noch margin noch border-top/bottom. Geaendert werden
   ausschliesslich:
     - Sidebar-Width (3.5em ↔ 17.5em) — wirkt nur horizontal
     - Sichtbarkeit von Body/Multi-Ref/Chevron/Close via opacity
   Die Items behalten ihre Hoehe und vertikale Position 1:1.

   Roots heben sich durch den Base-CSS-Background-Tint ab; Kinder
   gehoeren durch Position (direkt unter dem getinteten Root + L-Linie)
   visuell dazu — auch im Mini, ohne zusaetzliche Indentation.
*/
.udm2026-body { position: relative; }
.udm2026-body.has-mini-sidebar { padding-left: 3.5em; }

.udm2026-sidebar.is-mini {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4em;
    /* z-index zwischen Content-Overlays und Modals:
       - Content/Sticky-Header: < 1040
       - User-Menu-/Card-Dropdown-Backdrops: 1040
       - Mini-Sidebar HIER: 1045 (ueber allen Content-Stickies)
       - Modals + Card-Dropdown: 1050
       - Popovers/Tooltips: 1060+
       Damit liegt die hover-expandierte Sidebar VOR Subform-Cards/Toolbars
       (z.B. der roten Anmeldung-Card im Dienstanmeldungs-Workflow),
       bleibt aber HINTER offenen Modals und Dropdowns. */
    z-index: 1045;
    border-right: 1px solid var(--bs-border-color);
    background: var(--bs-light);
    /* Etwas langsamere Animation + Material-smooth Easing (ease-out-cubic).
       Damit gleitet die Sidebar deutlicher rein/raus statt instant zu
       snappen — der Body-Text faded zeitversetzt ein (siehe :hover-Regel
       weiter unten), sodass Text-Reflow nicht im halbfertigen Slot sichtbar
       wird. */
    transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    padding: 0.2em;
}
.udm2026-sidebar.is-mini:hover {
    width: 20em;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.12);
}

/* Im Mini: Icons mittig durch justify-content:center. Funktioniert
   unabhaengig von Container-Margin und Item-Padding — solange Body und
   Suffix-Elemente keine Width nehmen (siehe weiter unten). Padding-Left
   wird auf 0 gesetzt, sonst verschiebt es das Icon links vom Mittelpunkt.
   Padding-top/bottom bleibt aus dem Base-CSS → Item-Hoehe identisch. */
.udm2026-sidebar.is-mini .udm2026-ti,
.udm2026-sidebar.is-mini .udm2026-ti.d-1,
.udm2026-sidebar.is-mini .udm2026-ti.d-2,
.udm2026-sidebar.is-mini .udm2026-ti.d-3,
.udm2026-sidebar.is-mini .udm2026-ti.d-4,
.udm2026-sidebar.is-mini .udm2026-ti.d-5,
.udm2026-sidebar.is-mini .udm2026-ti.root {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    gap: 0;
    transition: padding-left 0.18s ease, padding-right 0.18s ease, gap 0.18s ease;
}

/* Block-Container im Mini: gleiche Box-Optik wie im Expanded (Border,
   Border-Radius, BG-Tint), nur etwas knappere Margins fuer den schmalen
   Slot. Die Icon-Zentrierung erfolgt ueber justify-content:center auf
   den Items (siehe unten) — daher ist die Container-Margin unkritisch. */
.udm2026-sidebar.is-mini .udm2026-sidebar-group,
.udm2026-sidebar.is-mini .udm2026-sidebar-home {
    margin: 0.3em 0.25em;
    border-radius: 5px;
}

/* Body komplett aus dem Layout nehmen — sonst nimmt flex:1 Platz und
   schiebt das Icon vom Mittelpunkt nach links. Item-Hoehe bleibt durch
   min-height auf .udm2026-ti garantiert (siehe Base-CSS).

   WICHTIG: auch max-height: 0 setzen! Bei max-width: 0 alleine wuerde
   der Type-Text (z.B. "BBR LISTE (OPTIMIERT)") zeichenweise umbrechen
   und der Body-Container vertikal in die Hoehe wachsen — Item wird
   dann viel zu hoch (UserClient mit langen Page-Topics). */
.udm2026-sidebar.is-mini .udm2026-ti-content {
    opacity: 0;
    flex: 0 0 0;
    max-width: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    /* Beim Hover-Out: Body schrumpft schnell + ohne Delay, Sidebar
       schliesst parallel. Beim Hover-In wird die Dauer in der :hover-
       Variante ueberschrieben (mit Delay, damit Body erst nach Width
       erscheint). */
    transition: opacity 0.12s ease,
                max-width 0.18s cubic-bezier(0.4, 0, 0.2, 1),
                max-height 0.18s cubic-bezier(0.4, 0, 0.2, 1),
                flex-basis 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Multi-Ref/Chevron/Close komplett aus dem Layout nehmen — wenn sie als
   Flex-Items mit Eigenwidth da blieben, wuerden sie das Icon nach links
   schieben (= nicht mittig). max-width:0 + overflow:hidden + margin:0
   neutralisiert alle Width-Beitraege. */
.udm2026-sidebar.is-mini .udm2026-ti-multiref,
.udm2026-sidebar.is-mini .udm2026-ti-chevron,
.udm2026-sidebar.is-mini .udm2026-ti-close {
    opacity: 0;
    max-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease, max-width 0.18s ease;
}

/* L-Verbindungslinien werden im Mini-Slot zwar nicht sichtbar geclippt,
   ausblenden ist trotzdem sauberer (keine angeschnittenen Striche). */
.udm2026-sidebar.is-mini .udm2026-ti.d-1::before,
.udm2026-sidebar.is-mini .udm2026-ti.d-1::after,
.udm2026-sidebar.is-mini .udm2026-ti.d-2::before,
.udm2026-sidebar.is-mini .udm2026-ti.d-2::after,
.udm2026-sidebar.is-mini .udm2026-ti.d-3::before,
.udm2026-sidebar.is-mini .udm2026-ti.d-3::after,
.udm2026-sidebar.is-mini .udm2026-ti.d-4::before,
.udm2026-sidebar.is-mini .udm2026-ti.d-4::after,
.udm2026-sidebar.is-mini .udm2026-ti.d-5::before,
.udm2026-sidebar.is-mini .udm2026-ti.d-5::after {
    opacity: 0;
    transition: opacity 0.18s ease;
}

/* Multi-Ref im Mini: lila Ring um die Icon-Bubble — ersetzt das
   ausgeblendete Link-Icon. Klasse "multiref" aus ItemClasses. */
.udm2026-sidebar.is-mini .udm2026-ti.multiref .icon-bubble {
    box-shadow: 0 0 0 2px #6f42c1;
}

/* Active im Mini: NUR der Base-CSS-BG-Tint (.udm2026-ti.active mit
   rgba(var(--bs-primary-rgb), 0.08)) markiert das aktive Item. Kein
   Ring um die Icon-Bubble — sah als "dicker Rahmen" zu unschoen aus. */

/* ===== Hover-Expand =====
   Inhalte einblenden + Tiefen-Padding wieder herstellen (horizontale
   Animation). Padding-top/bottom + Margin + Border bleiben unangetastet,
   d.h. KEINE vertikale Bewegung. */
/* Beim Hover-Expand: Body/Suffix-Elemente erst einblenden, wenn die
   Sidebar fast voll ausgefahren ist (Delay 0.2s ≈ 60% der 0.32s-Width).
   Damit ist der Text-Reflow im schmalen Slot nicht sichtbar — er
   passiert "hinter" der opacity:0-Phase. */
.udm2026-sidebar.is-mini:hover .udm2026-ti-content,
.udm2026-sidebar.is-mini:hover .udm2026-ti-multiref,
.udm2026-sidebar.is-mini:hover .udm2026-ti-chevron {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.18s ease 0.2s;
}
.udm2026-sidebar.is-mini:hover .udm2026-ti:hover .udm2026-ti-close {
    opacity: 1;
    pointer-events: auto;
}

/* Tiefen-Padding-Left zurueck auf die regulaeren Werte */
/* Hover-Expand: alle Mini-Overrides zuruecksetzen — Items zeigen sich
   wieder wie im Expanded-Modus. justify-content:flex-start ist nicht
   transitionierbar; der Wechsel wird durch die parallele Width-/Padding-
   Animation visuell ueberdeckt. */
.udm2026-sidebar.is-mini:hover .udm2026-ti {
    justify-content: flex-start;
    padding-right: 0.65em;
    gap: 0.8em;
}
.udm2026-sidebar.is-mini:hover .udm2026-ti.root,
.udm2026-sidebar.is-mini:hover .udm2026-ti.udm2026-ti-home { padding-left: 0.65em; }
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-1 { padding-left: 1.7em; }
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-2 { padding-left: 2.8em; }
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-3 { padding-left: 3.9em; }
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-4 { padding-left: 5.0em; }
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-5 { padding-left: 6.1em; }
/* Hover-Expand des Bodys: KEINE 'none'-Werte fuer max-width/max-height
   verwenden — diese sind nicht animierbar. Body waechst delayed (0.2s),
   sodass das Item zuerst die volle Sidebar-Width erreicht, bevor der
   Text-Reflow startet. Damit ist kein Hoehen-Glitch sichtbar. */
.udm2026-sidebar.is-mini:hover .udm2026-ti-content {
    flex: 1 1 0;
    max-width: 22em;
    max-height: 2.5em;
    transition: opacity 0.18s ease 0.2s,
                max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.18s,
                max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.18s,
                flex-basis 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.18s;
}
.udm2026-sidebar.is-mini:hover .udm2026-ti-multiref,
.udm2026-sidebar.is-mini:hover .udm2026-ti-chevron,
.udm2026-sidebar.is-mini:hover .udm2026-ti-close {
    max-width: none;
    margin: revert;
    padding: revert;
}

.udm2026-sidebar.is-mini:hover .udm2026-ti.d-1::before,
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-1::after,
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-2::before,
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-2::after,
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-3::before,
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-3::after,
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-4::before,
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-4::after,
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-5::before,
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-5::after {
    opacity: 1;
    transition: opacity 0.18s ease 0.08s;
}

/* Hover-Expand: Multi-Ref-Ring entfaellt — Link-Icon uebernimmt die
   Markierung wie im expanded Modus. (Active-Ring gibt es im Mini nicht
   mehr, nur Base-BG-Tint.) */
.udm2026-sidebar.is-mini:hover .udm2026-ti.multiref .icon-bubble { box-shadow: none; }


/* ============================================================
   CONTENT-BEREICH
   ============================================================ */
.udm2026-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* ------------ Content-Header (zweizeilig: Typ + Titel/Desc) ------------ */
.udm2026-hd {
    display: flex;
    align-items: center;
    padding: 0.55em 1em;
    gap: 0.85em;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--udm2026-toolbar-bg);
    flex-shrink: 0;
}
.udm2026-hd-left {
    flex: 1;
    min-width: 0;
}
.udm2026-hd-type {
    font-size: 0.8em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.22em;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.udm2026-hd-type i { font-size: 0.95em; }
.udm2026-hd-type.type-dlg { color: var(--udm2026-type-dlg); }
.udm2026-hd-type.type-ae { color: var(--udm2026-type-ae); }
.udm2026-hd-type.type-ent { color: var(--udm2026-type-ent); }
.udm2026-hd-type.type-ds { color: var(--udm2026-type-ds); }
.udm2026-hd-type.type-job { color: var(--udm2026-type-job); }
.udm2026-hd-type.type-code { color: var(--udm2026-type-code); }
.udm2026-hd-type.ctx-app { color: var(--udm2026-ctx-app); }
.udm2026-hd-type.ctx-sys { color: var(--udm2026-ctx-sys); }
.udm2026-hd-type.ctx-mgmt { color: var(--udm2026-ctx-mgmt); }
.udm2026-hd-main {
    display: flex;
    align-items: baseline;
    gap: 0.7em;
    min-width: 0;
}
.udm2026-hd-title {
    font-weight: 700;
    font-size: 1.15em;
    color: var(--bs-body-color);
    line-height: 1.2;
    flex-shrink: 0;
}
.udm2026-hd-desc {
    font-size: 0.95em;
    color: var(--bs-secondary-color);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.udm2026-hd-desc::before {
    content: '·';
    margin-right: 0.4em;
    color: var(--bs-border-color);
}

.udm2026-hd-actions {
    display: flex;
    align-items: center;
    gap: 0.4em;
    flex-shrink: 0;
}

/* Save/Close/SaveAndClose im Content-Header
   ---
   Keine eigenen Farben / Rahmen mehr — stattdessen Bootstrap-Button-Klassen
   (btn btn-primary / btn btn-outline-primary) und UDM-Klasse .udm-content-header-close
   in der Razor-Datei (CssClass-Parameter). Das haelt alles theme-aware und
   respektiert das UDM-Icon-Groessensystem.

   Diese Layout-Hilfsklasse ergaenzt nur Flex-Alignment fuer Icon+Text und einen
   konsistenten gap — KEINE Farben. */
.udm2026-hd-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    white-space: nowrap;
}

/* ------------ Content-Body-Container ------------ */
.udm2026-content-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}


/* ============================================================
   MOBILE — AppBar nach unten, Sidebar als Overlay
   ============================================================ */
@media (max-width: 600px) {
    .udm2026-root { flex-direction: column-reverse; }
    /* Im column-reverse landet die .udm2026-appbar unten, der Body darueber */

    .udm2026-appbar {
        border-bottom: none;
        border-top: 1px solid var(--bs-border-color);
    }

    /* Sidebar als Overlay von rechts, initial ausgeblendet */
    .udm2026-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 3.2em; /* Platz fuer AppBar unten */
        width: 85vw;
        max-width: 85vw;
        z-index: 1030;
        transform: translateX(100%);
        transition: transform 0.22s ease;
        box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
    }
    .udm2026-sidebar.mobile-open {
        transform: translateX(0);
    }

    /* Auf Mobile: User-Info komprimiert, nur Avatar */
    .udm2026-user-info { display: none; }

    /* Zurueck-Button: nur Icon */
    .udm2026-back .info { display: none; }

    /* Content-Header ohne Save/Close auf Mobile — Aktionen in Toolbar-Zeile */
    .udm2026-hd-actions { display: none; }

    /* Beschreibung auf Mobile meist auf neuer Zeile oder ausblenden */
    .udm2026-hd-main { flex-direction: column; align-items: flex-start; gap: 0.1em; }
    .udm2026-hd-desc::before { display: none; }
}


/* ============================================================
   PAGEHEADER — Seiten-Icon (ersetzt Back-Chip)
   ============================================================ */
.udm-pageheader-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8em;
    height: 1.8em;
    flex-shrink: 0;
    font-size: 1.4em;
    color: var(--bs-secondary-color);
}
.udm-pageheader-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}
/* Element-Typ-Farben (konsistent zu Sidebar und Breadcrumb) */
.udm-pageheader-icon.ctx-app   { color: var(--udm2026-ctx-app) !important; }
.udm-pageheader-icon.ctx-sys   { color: var(--udm2026-ctx-sys) !important; }
.udm-pageheader-icon.type-dlg  { color: var(--udm2026-type-dlg) !important; }
.udm-pageheader-icon.type-ae   { color: var(--udm2026-type-ae) !important; }
.udm-pageheader-icon.type-ent  { color: var(--udm2026-type-ent) !important; }
.udm-pageheader-icon.type-ds   { color: var(--udm2026-type-ds) !important; }
.udm-pageheader-icon.type-job  { color: var(--udm2026-type-job) !important; }
.udm-pageheader-icon.type-code { color: var(--udm2026-type-code) !important; }

/* Duotone-Icons: Primary/Secondary auf currentColor mappen */
.udm-pageheader-icon > i {
    color: inherit !important;
    --fa-primary-color: currentColor;
    --fa-secondary-color: currentColor;
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 0.45;
}


/* ============================================================
   WORKFLOW-SIDEBAR — Icons groesser + Roots prominenter
   ============================================================ */

/* Items kompakter: kleineres Padding + Gap (override gegenueber Base in Z.1192) */
.udm2026-ti {
    padding: 0.25em 0.55em;
    gap: 0.5em;
}

/* Icon-Bubble: KEIN Hintergrund-Badge mehr — Icon selbst ist farbig (wie in der
   Baum-Ansicht / Systemuebersicht). Damit dominiert das Icon nicht ueber den Text
   und kann kompakt bleiben. */
.udm2026-ti .icon-bubble {
    width: 1.4em;
    height: 1.4em;
    font-size: 1.35em;
    background: transparent !important;
}

/* Type-Farben werden nur als Foreground-Color verwendet, KEIN Background.
   color mit !important, damit FontAwesome-Defaults nicht reingrätschen.
   Plus: das Kind <i> erbt explizit color (FontAwesome setzt nicht selten currentColor). */
.udm2026-ti .icon-bubble.ctx-app   { background: transparent !important; color: var(--udm2026-ctx-app) !important; }
.udm2026-ti .icon-bubble.ctx-sys   { background: transparent !important; color: var(--udm2026-ctx-sys) !important; }
.udm2026-ti .icon-bubble.ctx-mgmt  { background: transparent !important; color: var(--udm2026-ctx-mgmt) !important; }
.udm2026-ti .icon-bubble.type-dlg  { background: transparent !important; color: var(--udm2026-type-dlg) !important; }
.udm2026-ti .icon-bubble.type-ae   { background: transparent !important; color: var(--udm2026-type-ae) !important; }
.udm2026-ti .icon-bubble.type-ent  { background: transparent !important; color: var(--udm2026-type-ent) !important; }
.udm2026-ti .icon-bubble.type-ds   { background: transparent !important; color: var(--udm2026-type-ds) !important; }
.udm2026-ti .icon-bubble.type-job  { background: transparent !important; color: var(--udm2026-type-job) !important; }
.udm2026-ti .icon-bubble.type-code { background: transparent !important; color: var(--udm2026-type-code) !important; }

/* Kind-Elemente erben color vom Bubble.
   Duotone-Icons (fa-duotone) haben EIGENE CSS-Variablen fuer Primary/Secondary-Layer
   (via ::before / ::after). Wir setzen beide auf currentColor, damit die Typ-Farbe
   aus dem icon-bubble tatsaechlich durchschlaegt — sonst bleibt das Duotone-Icon
   in seinen Default-Farben (oft Grau/Schwarz). */
.udm2026-ti .icon-bubble > i,
.udm2026-ti .icon-bubble > svg {
    color: inherit !important;
    --fa-primary-color: currentColor;
    --fa-secondary-color: currentColor;
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 0.45;
}

/* Root-Eintraege: visuelle Abgrenzung erfolgt jetzt durch den Block-
   Container (.udm2026-sidebar-group, Border + BG-Tint) zusammen mit
   einem leicht dunkleren Root-BG-Tint und fetterer Schrift. KEIN
   border-bottom + KEIN margin-bottom mehr — die hatten eine sichtbare
   Trennlinie + Luecke zwischen Root und erstem Kind erzeugt. */
.udm2026-ti.root {
    padding: 0.4em 0.6em;
}
.udm2026-ti.root.active { background: rgba(var(--bs-primary-rgb), 0.12); }
.udm2026-ti.root .icon-bubble {
    width: 1.3em;
    height: 1.3em;
    font-size: 1.25em;
}
/* App-Bild (img) im Root explizit kleiner — sonst dominiert es alle Texte */
.udm2026-ti.root .icon-bubble img {
    max-width: 1.3em;
    max-height: 1.3em;
}
.udm2026-ti.root .udm2026-ti-name { font-size: 1.02em; font-weight: 700; }
.udm2026-ti.root .udm2026-ti-type { font-size: 0.74em; font-weight: 700; opacity: 0.85; }


/* ============================================================
   WORKFLOW-APPBAR — Sidebar-Toggle + Breadcrumb
   ============================================================ */

/* Sidebar-Toggle-Button — links in der AppBar, visuell vom Breadcrumb getrennt
   durch eigenen Hintergrund + rechte Trennlinie */
.udm2026-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4em;
    align-self: stretch;
    padding: 0 0.4em;
    color: var(--bs-body-color);
    cursor: pointer;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 0.35em;
    margin-right: 0.4em;
    transition: background 0.12s, color 0.12s;
}
.udm2026-sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.6);
    color: var(--bs-primary);
}

/* Breadcrumb (Workflow-Pfad in der AppBar) */
.udm2026-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.25em;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 1.1em;
}

.udm2026-breadcrumb-segment {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.1em;
    color: var(--bs-secondary-color);
    cursor: pointer;
    padding: 0.25em 0.55em;
    border-radius: 0.3em;
    line-height: 1.15;
    max-width: 14em;
    transition: background 0.12s, color 0.12s;
}
.udm2026-breadcrumb-row1 {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    max-width: 100%;
}
.udm2026-breadcrumb-segment:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-primary);
}
.udm2026-breadcrumb-segment.is-active {
    color: var(--bs-body-color);
    font-weight: 600;
    cursor: default;
    /* Aktives Segment = Seitentitel (§5b) → mehr Breite, damit der Titel nicht
       zu frueh abschneidet (Pfad-Segmente bleiben bei 14em). */
    max-width: 24em;
}
.udm2026-breadcrumb-segment.is-active:hover {
    background: transparent;
    color: var(--bs-body-color);
}

.udm2026-breadcrumb-sep {
    color: var(--bs-border-color);
    font-size: 0.75em;
    flex-shrink: 0;
}

/* Icon in Zeile 1 — links neben Topic. Farbe wird ueber ctx-/type-Klasse gesetzt
   (konsistent zur Sidebar). Fallback ist secondary-color (z.B. fuer Home-Icon). */
.udm2026-breadcrumb-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    font-size: 0.85em;
    color: var(--bs-secondary-color);
}
.udm2026-breadcrumb-icon.ctx-app   { color: var(--udm2026-ctx-app) !important; }
.udm2026-breadcrumb-icon.ctx-sys   { color: var(--udm2026-ctx-sys) !important; }
.udm2026-breadcrumb-icon.type-dlg  { color: var(--udm2026-type-dlg) !important; }
.udm2026-breadcrumb-icon.type-ae   { color: var(--udm2026-type-ae) !important; }
.udm2026-breadcrumb-icon.type-ent  { color: var(--udm2026-type-ent) !important; }
.udm2026-breadcrumb-icon.type-ds   { color: var(--udm2026-type-ds) !important; }
.udm2026-breadcrumb-icon.type-job  { color: var(--udm2026-type-job) !important; }
.udm2026-breadcrumb-icon.type-code { color: var(--udm2026-type-code) !important; }

/* Duotone-Icons: Primary/Secondary auf currentColor mappen */
.udm2026-breadcrumb-icon > i {
    color: inherit !important;
    --fa-primary-color: currentColor;
    --fa-secondary-color: currentColor;
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 0.45;
}
.udm2026-breadcrumb-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.udm2026-breadcrumb-segment.is-active .udm2026-breadcrumb-icon {
    color: var(--bs-body-color);
}

/* Typ-Kuerzel (z.B. "DIALOG", "ANSICHTSELEMENT") — kleine Caps in Zeile 1 */
.udm2026-breadcrumb-topic {
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Label in Zeile 2 — Name der Seite */
.udm2026-breadcrumb-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95em;
    max-width: 100%;
}
/* Aktives (letztes) Segment = Seitentitel der Zwei-Zonen-Konsolidierung (§5b):
   prominenter als die Pfad-Segmente, ersetzt die geloeschte PageHeader-Titelzeile.
   Hervorhebung NUR ueber die Schriftstaerke — die Schriftgroesse bleibt identisch
   zu den Pfad-Segmenten (0.95em), damit die Breadcrumb-Zeile ruhig bleibt. */
.udm2026-breadcrumb-segment.is-active .udm2026-breadcrumb-label {
    font-weight: 700;
}


/* ============================================================
   WORKFLOW-SIDEBAR — Multi-Ref-Indikator + Chevron + Empty-State
   ============================================================ */

/* Empty-State wenn keine Seite offen */
.udm2026-sidebar-empty {
    color: var(--bs-secondary-color);
    font-size: 0.8em;
    padding: 1em;
    text-align: center;
}

/* Chevron fuer klappbare Root-Eintraege (rechts neben Title, vor Close) */
.udm2026-ti-chevron {
    font-size: 0.7em;
    color: var(--bs-secondary-color);
    cursor: pointer;
    padding: 0.3em 0.4em;
    border-radius: 0.25em;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
}
.udm2026-ti-chevron:hover {
    background: rgba(13, 110, 253, 0.08);
    color: var(--bs-primary);
}

/* Multi-Ref-Indikator (Link-Icon hinter dem Titel — dezent, ohne Background) */
.udm2026-ti-multiref {
    font-size: 0.55em;
    color: #6f42c1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.2em;
    opacity: 0.75;
}

/* Klappbare Root: Chevron nutzt vorhandenen Platz neben Close */
.udm2026-ti.root .udm2026-ti-chevron { opacity: 0.8; }
.udm2026-ti.root:hover .udm2026-ti-chevron { opacity: 1; }


/* ============================================================
   PRINT-MODUS — AppBar + Sidebar ausblenden
   ============================================================ */
@media print {
    .udm2026-appbar,
    .udm2026-sidebar {
        display: none !important;
    }
    .udm2026-body { display: block; }
}

/* ============================================================
   KonfigMode: Konfig-Seiten (Admin-VMs im UserClient) heben sich
   in Workflow-Pfad + Breadcrumb ab — kursiv + Schluessel-Kennung.
   Bewusst KEINE Farbe (Lila ist als App-Typfarbe belegt).
   ============================================================ */
.udm2026-ti-type.is-konfig,
.udm2026-ti-name.is-konfig,
.udm2026-breadcrumb-label.is-konfig {
    font-style: italic;
}

/* Konfig-Breadcrumb etwas kleiner als Datenseiten-Crumbs: Konfig-Seiten sollen nie
   groesser wirken als die Datenseiten. Gilt auch im AKTIV-Zustand, da dieser nur
   noch die Schriftstaerke aendert (siehe oben). */
.udm2026-breadcrumb-label.is-konfig {
    font-size: 0.9em;
}

/* Schluessel-Kennung im Breadcrumb (hinter dem Typ-Kuerzel). */
.udm2026-konfig-mark {
    font-size: 0.6em;
    opacity: 0.65;
    margin-left: 0.3em;
    vertical-align: baseline;
}

/* Konfig-Kennung im Nav-Eintrag: KEIN eigenes Schluessel-Icon (kollidierte mit der
   Mini-Sidebar) — stattdessen leuchtet die Icon-Bubble selbst (weicher Glow in der
   KonfigMode-Farbe, wie Karten/FAB). Funktioniert in voller UND Mini-Sidebar. */
.udm2026-ti .icon-bubble.is-konfig {
    box-shadow: 0 0 0 2px rgba(111, 66, 193, 0.35), 0 0 10px 2px rgba(111, 66, 193, 0.50);
}