/* ============================================================
   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;
    /* Kontext-Farben fuer Tab-Karten (App/System/Verwaltung) */
    --udm2026-ctx-app: var(--bs-primary);
    --udm2026-ctx-sys: var(--bs-secondary-color, #6c757d);
    --udm2026-ctx-sys-bg: rgba(108, 117, 125, 0.10);
    --udm2026-ctx-mgmt: #20c997;
    --udm2026-ctx-mgmt-bg: rgba(32, 201, 151, 0.10);
    /* Element-Typ-Farben (nur Content-Header + Sidebar-Icon-Toenung) */
    --udm2026-type-dlg: var(--bs-primary);
    --udm2026-type-ae: #198754;
    --udm2026-type-ae-bg: rgba(25, 135, 84, 0.10);
    --udm2026-type-ent: #6f42c1;
    --udm2026-type-ent-bg: rgba(111, 66, 193, 0.10);
    --udm2026-type-ds: #fd7e14;
    --udm2026-type-ds-bg: rgba(253, 126, 20, 0.10);
    --udm2026-type-job: #e83e8c;
    --udm2026-type-job-bg: rgba(232, 62, 140, 0.10);
    --udm2026-type-code: #6610f2;
    --udm2026-type-code-bg: rgba(102, 16, 242, 0.08);
}

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

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

.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 ------------ */
.udm2026-card {
    display: 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;
    cursor: pointer;
    padding: 0.1em 0.2em;
    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.85;
    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);
}

.udm2026-card .body {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.3em 1.9em 0.3em 0.3em;
    min-width: 0;
    position: relative;
    gap: 0.55em;
}

/* 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: 2.1em;
    height: 2.1em;
    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: 0.92em;
    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;
}
/* Icon-Well bleibt auch bei aktiven Karten neutral (wie inaktiv).
   Die Aktiv-Kennung laeuft ausschliesslich ueber den Primary-Border der
   Karte selbst — das Well soll nicht zusaetzlich farbig aufschlagen. */

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

/* Einzeilige Variante (UserClient) — nur Name, kein Type.
   Padding leicht groesser, damit Close-Button + Count unten/oben Platz haben. */
.udm2026-card .body.single-line {
    padding-top: 0.45em;
    padding-bottom: 0.45em;
}

.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.95em;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 14em;
    line-height: 1.25;
}
.udm2026-card.active .name {
    color: var(--bs-body-color);
    font-weight: 700;
}

.udm2026-card .count {
    position: absolute;
    top: 0.2em;
    right: 0.4em;
    font-size: 0.75em;
    padding: 0.05em 0.4em;
    border-radius: 0.6em;
    background: rgba(0, 0, 0, 0.05);
    color: var(--bs-secondary-color);
    font-weight: 600;
    line-height: 1.3;
}
.udm2026-card.active .count {
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
}

.udm2026-card .dot {
    position: absolute;
    top: 0.3em;
    right: 1.8em;
    width: 0.4em;
    height: 0.4em;
    border-radius: 50%;
    background: #fbbf24;
}
.udm2026-card .dot.changed { background: #fd7e14; }

.udm2026-card .close {
    font-size: 0.65em;
    color: var(--bs-secondary-color);
    opacity: 0;
    transition: opacity 0.1s;
    position: absolute;
    bottom: 0.25em;
    right: 0.4em;
    padding: 0.05em 0.25em;
    border-radius: 0.2em;
    cursor: pointer;
}
.udm2026-card:hover .close { opacity: 0.6; }
.udm2026-card .close:hover {
    opacity: 1;
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

/* ------------ 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;
    border-left: 1px solid var(--bs-border-color);
    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);
}

/* 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;
}
.udm-pageheader-title-row {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.2em 0;
}

/* 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-Badge der aktuellen Seite (farbig, kompakt). Die Typ-Farbe wird
   ueber die dynamisch gesetzte Klasse (type-ae, type-dlg, …) gesteuert
   und verwendet die --udm2026-type-*-Tokens aus :root oben. */
.udm-pageheader-type {
    font-size: 0.78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1em 0.5em;
    border-radius: 10px;
    background: color-mix(in srgb, currentColor 14%, transparent);
    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: 1.05em;
    font-weight: 700;
    color: var(--bs-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.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;
}

/* 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;
    border-radius: var(--udm2026-tab-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1em;
    color: var(--bs-secondary-color);
    position: relative;
    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: border-color 0.12s, color 0.12s;
}
.udm2026-notif:hover {
    color: var(--bs-primary);
    border-color: rgba(var(--bs-primary-rgb), 0.25);
}
.udm2026-notif-badge {
    position: absolute;
    top: 0.1em;
    right: 0.1em;
    min-width: 1em;
    height: 1em;
    padding: 0 0.2em;
    border-radius: 0.6em;
    background: #dc3545;
    color: #fff;
    font-size: 0.72em;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bs-body-bg);
}

/* ------------ 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.3em 0;
}

/* Tree-Eintrag */
.udm2026-ti {
    display: flex;
    align-items: center;
    gap: 0.8em;
    padding: 0.4em 0.65em;
    cursor: pointer;
    position: relative;
    transition: background 0.08s;
}
.udm2026-ti:hover { background: rgba(0, 0, 0, 0.025); }
.udm2026-ti.active { background: rgba(var(--bs-primary-rgb), 0.08); }

/* Root-Eintrag leicht prominenter */
.udm2026-ti.root {
    padding: 0.55em 0.65em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 0.2em;
}
.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);
}
.udm2026-ti .icon-bubble.ctx-app { background: rgba(var(--bs-primary-rgb), 0.10); color: var(--udm2026-ctx-app); }
.udm2026-ti .icon-bubble.ctx-sys { background: var(--udm2026-ctx-sys-bg); color: var(--udm2026-ctx-sys); }
.udm2026-ti .icon-bubble.ctx-mgmt { background: var(--udm2026-ctx-mgmt-bg); color: var(--udm2026-ctx-mgmt); }
.udm2026-ti .icon-bubble.type-dlg { background: rgba(var(--bs-primary-rgb), 0.08); color: var(--udm2026-type-dlg); }
.udm2026-ti .icon-bubble.type-ae { background: var(--udm2026-type-ae-bg); color: var(--udm2026-type-ae); }
.udm2026-ti .icon-bubble.type-ent { background: var(--udm2026-type-ent-bg); color: var(--udm2026-type-ent); }
.udm2026-ti .icon-bubble.type-ds { background: var(--udm2026-type-ds-bg); color: var(--udm2026-type-ds); }
.udm2026-ti .icon-bubble.type-job { background: var(--udm2026-type-job-bg); color: var(--udm2026-type-job); }
.udm2026-ti .icon-bubble.type-code { background: var(--udm2026-type-code-bg); color: var(--udm2026-type-code); }

.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;
}
.udm2026-ti-name {
    color: var(--bs-body-color);
    /* Zweizeiliger Umbruch — mehr Zeichen sichtbar; Ueberlauf via line-clamp.
       Tooltip auf dem Eintrag zeigt den Vollnamen. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.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);
    opacity: 0;
    padding: 0.15em;
    border-radius: 3px;
    cursor: pointer;
    flex-shrink: 0;
}
.udm2026-ti:hover .udm2026-ti-close { opacity: 1; }
.udm2026-ti-close:hover { background: rgba(220, 53, 69, 0.1); color: #dc3545; }

/* 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.07); }
.udm2026-ti.d-1::after  { content: ''; position: absolute; left: 1.2em; top: 50%; width: 0.3em; height: 1px; background: rgba(0,0,0,0.07); }
.udm2026-ti.d-2::before { content: ''; position: absolute; left: 2.3em; top: 0; bottom: 50%; width: 1px; background: rgba(0,0,0,0.07); }
.udm2026-ti.d-2::after  { content: ''; position: absolute; left: 2.3em; top: 50%; width: 0.3em; height: 1px; background: rgba(0,0,0,0.07); }
.udm2026-ti.d-3::before { content: ''; position: absolute; left: 3.4em; top: 0; bottom: 50%; width: 1px; background: rgba(0,0,0,0.07); }
.udm2026-ti.d-3::after  { content: ''; position: absolute; left: 3.4em; top: 50%; width: 0.3em; height: 1px; background: rgba(0,0,0,0.07); }
.udm2026-ti.d-4::before { content: ''; position: absolute; left: 4.5em; top: 0; bottom: 50%; width: 1px; background: rgba(0,0,0,0.07); }
.udm2026-ti.d-4::after  { content: ''; position: absolute; left: 4.5em; top: 50%; width: 0.3em; height: 1px; background: rgba(0,0,0,0.07); }
.udm2026-ti.d-5::before { content: ''; position: absolute; left: 5.6em; top: 0; bottom: 50%; width: 1px; background: rgba(0,0,0,0.07); }
.udm2026-ti.d-5::after  { content: ''; position: absolute; left: 5.6em; top: 50%; width: 0.3em; height: 1px; background: rgba(0,0,0,0.07); }


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


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