.dxbl-btn-caption {
    text-wrap: nowrap;
    margin-left: 0.15rem !important;
    margin-right: 0.15rem !important;
    font-size: 0.9em;
}


.dxbl-btn {

}


    .dxbl-btn:not(.dxbl-disabled):not(:disabled):hover {
        background-color: rgba(var(--bs-primary-rgb), 0.3);
    }


.udm-toolbar-button {
    font-size: inherit;
}


.udm-toolbar-button.udm-active-btn {
    font-weight: bold;
}


/* Aufmerksamkeits-Puls (z. B. Konfigurationsfehler): dezenter, kontinuierlicher
   Puls, solange die Schaltflaeche sichtbar ist. Springt beim Erscheinen (nach
   Oeffnen/Speichern) sichtbar an. */
@keyframes udm-action-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0); }
    50%      { box-shadow: 0 0 0 4px rgba(var(--bs-danger-rgb), 0.28); }
}

.udm-toolbar-button.udm-action-pulse {
    border-radius: 4px;
    animation: udm-action-pulse 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .udm-toolbar-button.udm-action-pulse {
        animation: none;
    }
}


.udm-button {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    border: 0;
    padding: 0.25rem;
    font-weight: normal;
    justify-content: start;
    margin-right: 0.2rem;
}

    .udm-button.appbar-button {
        background-color: transparent;
        box-shadow: none;
        margin: 0;
        font-size: 0.85em;
        font-weight: bold;
        padding: 0.2rem 1rem;
    }


    .udm-button.udm-inline-btn {
        padding: 0.25rem;
        border: none;
        box-shadow: none;
        margin-right: 0.2rem;
        background-color: rgba(var(--bs-primary-rgb), 0.1);
    }

.udm-button.udm-text-btn {
}

.udm-button.udm-text-btn {
    height: 100%;
    margin-right: 0.25rem;
}

.udm-button.udm-active-btn {
    /* Aktiv-Zustand des UdmActionButton-Controls. Bewusst zwei Control-Klassen (Spezifitaet 0,2,0),
       damit der Toggle-Aktiv-Zustand am Control selbst dargestellt wird und ein einzelnes
       Consumer-Override (z.B. .udm-gis-map-actionbtn { background: transparent }) ihn NICHT
       verdeckt — Consumer brauchen keine eigene Aktiv-Regel. */
    background-color: rgba(var(--bs-primary-rgb), 0.3);
    font-weight: bold;
}

.udm-active-btn {
    background-color: rgba(var(--bs-primary-rgb), 0.3);
}


.udm-grid-contextmenu-button {
    padding: 0.25rem;
}


.udm-icon-button {
}


/* =============================================================
   UdmFlexToolbar — Flex-basiertes Toolbar-Layout
   Ersetzt DxToolbar mit eigenem CSS-Layout.
   ============================================================= */

.udm-flex-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.15rem;
    width: 100%;
    container-type: inline-size;
}

/* DropDown/Split-Button Wrapper: Frosted Glass auf dem Wrapper,
   innere Buttons transparent — kein doppelter Background */
.udm-flex-toolbar .dxbl-btn-group {
    display: inline-flex;
    align-self: stretch;
    background-color: rgba(var(--bs-primary-rgb), 0.08) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0.15em;
    overflow: hidden;
    transition: background-color 0.15s ease;
}

.udm-flex-toolbar .dxbl-btn-group:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
    box-shadow: none !important;
}

/* Innere Buttons im Wrapper: transparent (Wrapper liefert den Hintergrund) */
.udm-flex-toolbar .dxbl-btn-group .dxbl-btn {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.25em 0.4em;
    display: inline-flex;
    align-items: center;
}

/* Standalone Buttons (nicht in btn-group): eigener Hintergrund */
.udm-flex-toolbar > .dxbl-btn {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    border: none;
    border-radius: 0.15em;
    padding: 0.25em 0.4em;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.15s ease;
}

.udm-flex-toolbar > .dxbl-btn:not(.dxbl-disabled):not(:disabled):hover {
    background-color: rgba(var(--bs-primary-rgb), 0.2);
}

/* =============================================================
   UDM Split-Button — Pure HTML, kein DevExpress-Wrapper
   ============================================================= */
.udm-split-btn-container {
    position: relative;
    display: inline-flex;
}

.udm-split-btn {
    display: inline-flex;
    align-items: stretch;
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    border-radius: 0.15em;
    transition: background-color 0.15s ease;
}

.udm-split-btn:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.2);
}

.udm-split-btn-main {
    background: transparent;
    border: none;
    padding: 0.25em 0.4em;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.udm-split-btn-main:disabled {
    opacity: 0.5;
    cursor: default;
}

.udm-split-btn-divider {
    align-self: stretch;
    margin: 0.2em 0;
    border-left: 1px solid var(--bs-border-color-translucent);
}

.udm-split-btn-toggle {
    background: transparent;
    border: none;
    padding: 0 0.4em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    font-size: 0.7em;
}

.udm-split-btn-toggle:disabled {
    opacity: 0.5;
    cursor: default;
}

.udm-split-btn-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Reiner Dropdown-Button (ohne Split): gleicher Frosted-Glass-Look */
.udm-dropdown-btn {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    border: none;
    border-radius: 0.15em;
    padding: 0.25em 0.4em;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    cursor: pointer;
    color: inherit;
    font: inherit;
    transition: background-color 0.15s ease;
}

.udm-dropdown-btn:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.2);
}

.udm-dropdown-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Aktiv-Zustand (gesetzter Filter) — kombinierte Selektoren noetig: die generische
   .udm-active-btn-Regel steht weiter oben und wuerde sonst von der spaeteren
   .udm-dropdown-btn-Grundregel (gleiche Spezifitaet) ueberschrieben. Greift fuer
   vordefinierten Filter UND Schnellfilter-Toggle (beide nutzen .udm-dropdown-btn). */
.udm-dropdown-btn.udm-active-btn {
    background-color: rgba(var(--bs-primary-rgb), 0.3);
    font-weight: bold;
}

.udm-dropdown-btn.udm-active-btn:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.38);
}

.udm-dropdown-caret {
    font-size: 0.7em;
    margin-left: 0.2em;
}

/* Dropdown-Popup unterhalb des Split-Buttons */
.udm-split-dropdown-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
}

.udm-split-dropdown-popup {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1001;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 0.15em;
    box-shadow: 0 4px 12px var(--bs-border-color-translucent);
    min-width: 14em;
    max-height: 70vh;
    overflow-y: auto;
}

/* Active-Button im Toolbar-Kontext: staerker hervorgehoben */
.udm-flex-toolbar .udm-active-btn {
    background-color: rgba(var(--bs-primary-rgb), 0.25);
}

/* Erster Separator in der Toolbar ist ueberfluessig */
.udm-flex-toolbar > .udm-flex-toolbar-separator:first-child {
    display: none;
}

.udm-flex-toolbar-title {
    font-weight: bold;
    white-space: nowrap;
    margin-right: 0.5rem;
}

.udm-flex-toolbar-separator {
    border-left: 1px solid rgba(var(--bs-primary-rgb), 0.3);
    align-self: stretch;
    margin: 0.15rem 0.2rem;
}

.udm-flex-toolbar-end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    order: 999;
}

/* ---- Adaptivitaet via Container Query ---- */
/* Haupt-Toolbar (.udm-form-toolbar): Text ab 700px ausblenden.
   Dialog-Toolbar (.udm-dialog-toolbar): Text erst ab 350px ausblenden,
   damit Buttons in Popups moeglichst immer mit Text angezeigt werden.
   Schmale Panels (z.B. rechtes Info-Panel) zeigen immer Text. */

/* Haupt-Toolbar: Text ausblenden, nur Icons (vor Umbruch) */
@container (max-width: 700px) {
    .udm-form-toolbar .dxbl-btn-caption {
        display: none;
    }

    /* Buttons ohne Icon: Anfangsbuchstabe als Fallback anzeigen */
    .udm-form-toolbar .udm-btn-initial {
        display: inline-flex;
    }

    .udm-form-toolbar .dxbl-btn[data-initial]::after {
        display: inline;
    }
}

/* Dialog-Toolbar: Text erst bei sehr wenig Platz ausblenden */
@container (max-width: 350px) {
    .udm-dialog-toolbar .dxbl-btn-caption {
        display: none;
    }

    .udm-dialog-toolbar .udm-btn-initial {
        display: inline-flex;
    }

    .udm-dialog-toolbar .dxbl-btn[data-initial]::after {
        display: inline;
    }
}

/* Anfangsbuchstabe: standardmaessig unsichtbar, nur bei Container Query aktiv */
.udm-btn-initial {
    display: none;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    opacity: 0.7;
}

/* DxButton-Variante: data-initial Attribut als ::after Pseudo-Element */
.dxbl-btn[data-initial]::after {
    content: attr(data-initial);
    display: none;
    font-weight: 600;
    opacity: 0.7;
}

/* Stufe 2: Separatoren ausblenden bei sehr wenig Platz */
@container (max-width: 350px) {
    .udm-flex-toolbar-separator {
        display: none;
    }
}


/* =============================================================
   Persistent Header — Ton-in-Ton Header fuer Udm2025ContentContainer
   Zeigt: Close | Titel + Meta | —spacer— | Header-Actions
   ============================================================= */

.udm-content-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid color-mix(in srgb, var(--bs-primary) 20%, var(--bs-border-color) 80%);
    background: color-mix(in srgb, var(--bs-primary) 15%, var(--bs-body-bg) 85%);
    padding: 0.3em 0;
    min-height: var(--udm-header-min-height, 2.75em);
}

/* Close/ToParent-Button rechts */
.udm-content-header-close {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5em;
    align-self: stretch;
    color: var(--bs-secondary-color);
    cursor: pointer;
    border: none;
    background: transparent;
    flex-shrink: 0;
    transition: all 0.12s;
    border-left: 1px solid color-mix(in srgb, var(--bs-primary) 15%, var(--bs-border-color) 85%);
}

.udm-content-header-close:hover {
    background: rgba(var(--bs-danger-rgb), 0.12);
    color: var(--bs-danger);
}

/* Info-Bereich: Titel + Meta, flex:1, drueckt Actions nach rechts */
.udm-content-header-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/* Seitentitel links nach Close-Button */
.udm-content-header .pageinfo {
    flex-shrink: 1;
    min-width: 0;
    padding: 0.1em 0.5em;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35em;
}

.udm-content-header .pageinfo .title {
    font-weight: 700;
    color: var(--bs-primary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.udm-content-header .pageinfo .subtitle {
    font-size: 0.825em;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.udm-header-name-separator {
    color: var(--bs-secondary-color);
    opacity: 0.4;
    font-size: 0.8em;
}

/* Breadcrumb-Vorfahren im Persistent Header (inline vor dem Titel) */
.udm-bc-item {
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    font-size: 0.825em;
    color: var(--bs-secondary-color);
    cursor: pointer;
    padding: 0.1em 0.3em;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.udm-bc-item:hover {
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
}

.udm-bc-name {
    max-width: 15ch;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    vertical-align: bottom;
}

.udm-bc-badge {
    font-size: 0.88em;
    font-weight: 700;
    padding: 0.25em 0.5em;
    border-radius: 3px;
    line-height: 1;
}

.udm-bc-sep {
    color: var(--bs-border-color);
    font-size: 0.7em;
    flex-shrink: 0;
}

.udm-bc-badge.t-app {
    background: rgba(var(--bs-primary-rgb), 0.10);
    color: var(--bs-primary-text-emphasis);
}

.udm-bc-badge.t-sys {
    background: rgba(var(--bs-dark-rgb), 0.08);
    color: color-mix(in srgb, var(--bs-dark) 80%, var(--bs-secondary));
}

/* Header-Links: Verknuepfungen (App, Subsystem, Datenquelle) in Zeile 2 */
.udm-content-header-links {
    font-size: 0.78em;
    color: var(--bs-secondary-color);
    display: flex;
    gap: 0.15em;
    align-items: center;
    padding: 0 0.5em;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.udm-content-header-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    padding: 0.1em 0.4em;
    border-radius: 0.25em;
    transition: background 0.1s;
    cursor: pointer;
}

.udm-content-header-link:hover {
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
}

.udm-content-header-link-label {
    opacity: 0.55;
    font-size: 0.85em;
}

.udm-content-header-badge {
    padding: 0.05em 0.3em;
    border-radius: 0.15em;
    font-size: 0.6em;
}

/* --- Header-Toolbar: UdmFlexToolbar im Header-Kontext ---
   Die globale udm-flex-toolbar hat width:100% + container-type:inline-size,
   im Header muss sie sich als kompakte, nicht-wrappende Buttonleiste verhalten. */
.udm-content-header .udm-flex-toolbar {
    width: auto;
    flex-shrink: 0;
    flex-wrap: nowrap;
    container-type: normal;
    gap: 0.2em;
    padding: 0 0.4em;
    border-left: 1px solid color-mix(in srgb, var(--bs-primary) 15%, var(--bs-border-color) 85%);
}

/* Header-Buttons: transparent statt Frosted Glass
   (passt zum Ton-in-Ton Header-Hintergrund).
   !important noetig um globale .udm-flex-toolbar !important-Regeln zu ueberstimmen. */
.udm-content-header .udm-flex-toolbar > .dxbl-btn,
.udm-content-header .udm-flex-toolbar .udm-split-btn,
.udm-content-header .udm-flex-toolbar .udm-dropdown-btn {
    background-color: transparent !important;
    color: var(--bs-secondary-color);
    border: none !important;
    box-shadow: none !important;
}

.udm-content-header .udm-flex-toolbar > .dxbl-btn:not(.dxbl-disabled):not(:disabled):hover,
.udm-content-header .udm-flex-toolbar .udm-split-btn:hover,
.udm-content-header .udm-flex-toolbar .udm-dropdown-btn:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
    color: var(--bs-primary);
    box-shadow: none !important;
}

/* btn-group (Split/Dropdown-Wrapper) im Header: transparent */
.udm-content-header .udm-flex-toolbar .dxbl-btn-group {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.udm-content-header .udm-flex-toolbar .dxbl-btn-group:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
    box-shadow: none !important;
}

/* Innere Buttons im Header btn-group: transparent */
.udm-content-header .udm-flex-toolbar .dxbl-btn-group .dxbl-btn {
    background: transparent !important;
    color: var(--bs-secondary-color);
}

.udm-content-header .udm-flex-toolbar .dxbl-btn-group .dxbl-btn:hover {
    color: var(--bs-primary);
}

/* Separator im Header: subtiler */
.udm-content-header .udm-flex-toolbar-separator {
    border-left-color: color-mix(in srgb, var(--bs-primary) 15%, var(--bs-border-color) 85%);
    margin: 0.2em 0.15em;
}

/* Dropdown-Popup im Header: nach links oeffnen (rechter Rand) */
.udm-content-header .udm-split-dropdown-popup {
    position: absolute;
    right: 0;
    top: 100%;
    left: auto;
}


/* =============================================================
   UDM Tooltip — Gestylter Tooltip fuer UdmAction-Buttons
   Variante: Minimal Dark mit Bootstrap-Variablen
   ============================================================= */
/* Schriftgroessen: der Kasten haengt direkt am body und erbt dessen Groesse.
   Titel = Standard (keine Angabe), Beschreibung = Sekundaerstufe 0.88em.
   Frueher stapelten sich 0.8em am Kasten und nochmal 0.9em am Text — das
   Ergebnis war kaum lesbar. */
.udm-tooltip {
    position: fixed;
    z-index: 10000;
    max-width: 24em;
    padding: 0.55em 0.75em;
    border-radius: 0.4em;
    background: var(--bs-dark, #212529);
    color: var(--bs-light, #f8f9fa);
    line-height: 1.45;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.udm-tooltip.udm-tooltip-visible {
    opacity: 1;
}

.udm-tooltip-title {
    color: #fff;
}

.udm-tooltip.udm-tooltip-has-desc .udm-tooltip-title {
    font-weight: 600;
}

/* pre-line: mehrere Kurz-Texte (z.B. Spalten-Tooltip + Kurz-Hinweis der Feldhilfe)
   kommen mit \n getrennt und sollen als eigene Zeilen erscheinen. */
.udm-tooltip-desc {
    margin-top: 0.35em;
    padding-top: 0.35em;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.88em;
    white-space: pre-line;
}


/* =============================================================
   UDM Help-Dropdown — Toolbar-integrierte Inline-Hilfe
   ============================================================= */

.udm-help-dropdown-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.udm-help-dropdown-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    border: none;
    border-radius: 0.15em;
    padding: 0.25em 0.4em;
    cursor: pointer;
    color: var(--bs-info);
    transition: background-color 0.1s;
}

.udm-help-dropdown-btn:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.18);
}

.udm-help-dropdown-btn.udm-active-btn {
    background-color: rgba(var(--bs-primary-rgb), 0.3);
    color: var(--bs-primary);
}

.udm-help-dropdown-panel {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1001;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 0.3em;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    min-width: 20em;
    max-width: 36em;
    max-height: 50vh;
    display: flex;
    flex-direction: column;
}

.udm-help-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5em 0.75em;
    border-bottom: 1px solid var(--bs-border-color);
    background: linear-gradient(to right, #e8f0fe, #f0f7ff);
}

.udm-help-dropdown-title {
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-weight: 600;
    color: var(--bs-primary);
    font-size: 0.85em;
}

.udm-help-dropdown-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--bs-secondary-color);
    padding: 0.15em 0.3em;
    border-radius: 0.2em;
    font-size: 0.75em;
}

.udm-help-dropdown-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--bs-body-color);
}

.udm-help-dropdown-content {
    padding: 0.6em 0.75em;
    font-size: 0.8em;
    line-height: 1.5;
    color: var(--bs-body-color);
    overflow-y: auto;
}


/* ---- Live-Change-Notification Indicator ---- */

.udm-live-change-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.2em 0.55em;
    border-radius: 0.25em;
    background: rgba(var(--bs-warning-rgb), 0.15);
    border: 1px solid rgba(var(--bs-warning-rgb), 0.35);
    cursor: pointer;
    font-weight: 600;
    color: #b45309;
    white-space: nowrap;
    position: relative;
    animation: udm-lci-pulse 2s ease-in-out infinite;
}

.udm-live-change-indicator:hover {
    background: rgba(var(--bs-warning-rgb), 0.25);
}

.udm-live-change-indicator i {
    color: var(--bs-warning);
}

/* Quittiert (OK gedrueckt): ruhige Primary-Farbe, kein Puls — Aenderungen bleiben anwendbar */
.udm-live-change-indicator--ack {
    background: rgba(var(--bs-primary-rgb), 0.12);
    border-color: rgba(var(--bs-primary-rgb), 0.35);
    color: var(--bs-primary);
    animation: none;
}

.udm-live-change-indicator--ack:hover {
    background: rgba(var(--bs-primary-rgb), 0.2);
}

.udm-live-change-indicator--ack i {
    color: var(--bs-primary);
}

.udm-live-change-indicator--ack .udm-live-change-badge {
    background: var(--bs-primary);
}

@keyframes udm-lci-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bs-warning-rgb), 0); }
    50% { box-shadow: 0 0 0 3px rgba(var(--bs-warning-rgb), 0.15); }
}

.udm-live-change-time {
    font-weight: 700;
}

.udm-live-change-badge {
    background: var(--bs-warning);
    color: #fff;
    font-weight: 700;
    padding: 0.1em 0.35em;
    border-radius: 1em;
    min-width: 1.4em;
    text-align: center;
}

/* Overlay to close dropdown on outside click */
.udm-live-change-overlay {
    position: fixed;
    inset: 0;
    z-index: 99;
}

/* DropDown (position: fixed, Koordinaten werden inline gesetzt) */
.udm-live-change-dropdown {
    z-index: 100;
    display: flex;
    flex-direction: column;
    width: 540px;
    min-width: 300px;
    min-height: 180px;
    max-width: calc(100vw - 1rem);
    max-height: calc(100vh - 1rem);
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    font-size: 0.9em;
    /* Anwender darf das Popup in beide Richtungen vergroessern/verkleinern */
    resize: both;
    overflow: hidden;
}

/* Mobile: Dropdown zentriert statt per left-Koordinate positioniert */
@media (max-width: 480px) {
    .udm-live-change-dropdown {
        left: 0.5rem !important;
        right: 0.5rem;
        width: auto;
    }
}

.udm-lcd-header {
    flex-shrink: 0;
    padding: 0.6em 0.75em;
    border-bottom: 1px solid var(--bs-border-color);
    background: rgba(var(--bs-warning-rgb), 0.08);
    border-radius: 0.5rem 0.5rem 0 0;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.udm-lcd-header-title {
    font-weight: 700;
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.udm-lcd-header-title i {
    color: var(--bs-warning);
}

.udm-lcd-header-sub {
    color: var(--bs-secondary-color);
    margin-top: 0.15em;
}

.udm-lcd-body {
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Accordion: eine Zeile pro geaendertem Datensatz */
.udm-lcd-entry {
    border-bottom: 1px solid rgba(var(--bs-border-color-rgb, 222, 226, 230), 0.5);
}

.udm-lcd-entry:last-child {
    border-bottom: none;
}

.udm-lcd-entry-header {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.45em 0.75em;
    cursor: pointer;
    user-select: none;
}

.udm-lcd-entry-header:hover {
    background: rgba(var(--bs-primary-rgb), 0.03);
}

.udm-lcd-entry-header.udm-lcd-expanded {
    background: rgba(var(--bs-primary-rgb), 0.03);
}

.udm-lcd-chevron {
    color: var(--bs-secondary-color);
    opacity: 0.5;
    width: 0.8em;
    text-align: center;
    flex-shrink: 0;
}

.udm-lcd-time {
    color: var(--bs-secondary-color);
    flex-shrink: 0;
    white-space: nowrap;
}

.udm-lcd-user {
    color: var(--bs-primary);
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}

.udm-lcd-record-title {
    color: var(--bs-body-color);
    font-weight: 600;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.udm-lcd-field-count {
    color: var(--bs-secondary-color);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Gruppierter Eintrag (pro Datensatz) */
.udm-lcd-group {
    border-bottom: 1px solid rgba(var(--bs-border-color-rgb, 222, 226, 230), 0.5);
}
.udm-lcd-group:last-child { border-bottom: none; }

.udm-lcd-group-header {
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.45em 0.75em;
    cursor: pointer;
    user-select: none;
}
.udm-lcd-group-header:hover {
    background: rgba(var(--bs-primary-rgb), 0.03);
}

.udm-lcd-change-count {
    background: var(--bs-warning);
    color: #fff;
    font-size: 0.7em;
    font-weight: 700;
    padding: 0.1em 0.45em;
    border-radius: 999px;
    flex-shrink: 0;
    min-width: 1.4em;
    text-align: center;
}

.udm-lcd-group-details {
    padding: 0 0.75em 0.4em 1.8em;
}

.udm-lcd-sub-entry {
    padding: 0.25em 0;
    border-top: 1px dashed rgba(var(--bs-border-color-rgb, 222, 226, 230), 0.5);
}
.udm-lcd-sub-entry:first-child { border-top: none; }

.udm-lcd-sub-header {
    display: flex;
    gap: 0.3em;
    align-items: center;
    color: var(--bs-secondary-color);
    cursor: pointer;
    user-select: none;
}
.udm-lcd-sub-header:hover {
    color: var(--bs-body-color);
}

/* Aufgeklappte Feld-Details */
.udm-lcd-entry-details {
    padding: 0.15em 0.75em 0.45em 2em;
    background: rgba(var(--bs-tertiary-bg-rgb, 248, 250, 252), 0.5);
}

.udm-lcd-field-table {
    width: 100%;
    border-collapse: collapse;
}

.udm-lcd-field-table td {
    padding: 0.18em 0.45em;
    vertical-align: baseline;
    word-break: break-word;
}

/* Alternierende Zeilen mit leichtem Primary-Tint zur besseren Lesbarkeit */
.udm-lcd-field-table tr:nth-child(even) td {
    background: rgba(var(--bs-primary-rgb), 0.05);
}

.udm-lcd-fld-label {
    font-weight: 600;
    color: var(--bs-body-color);
    white-space: nowrap;
    width: 1%;
}

.udm-lcd-fld-label::after {
    content: ':';
}

.udm-lcd-fld-old {
    text-decoration: line-through;
    color: var(--bs-secondary-color);
}

.udm-lcd-fld-arrow {
    color: var(--bs-border-color);
    width: 1%;
    text-align: center;
    white-space: nowrap;
    padding: 0.12em 0.35em;
}

.udm-lcd-fld-new {
    color: var(--bs-success);
    font-weight: 600;
}

.udm-lcd-footer {
    flex-shrink: 0;
    padding: 0.5em 0.75em;
    border-top: 1px solid var(--bs-border-color);
    display: flex;
    gap: 0.4em;
    justify-content: flex-end;
    background: var(--bs-tertiary-bg);
    border-radius: 0 0 0.5rem 0.5rem;
}

.udm-lcd-btn {
    padding: 0.3em 0.7em;
    border-radius: 0.3em;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}

.udm-lcd-btn-primary {
    background: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}

.udm-lcd-btn-primary:hover {
    background: color-mix(in srgb, var(--bs-primary) 85%, #000);
}

.udm-lcd-btn-outline {
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    border-color: var(--bs-border-color);
}

.udm-lcd-btn-outline:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

/* Grid-Indikator: orangener Punkt fuer geaenderte Zeilen */
.udm-grid-change-dot {
    display: inline-block;
    width: 0.65em;
    height: 0.65em;
    border-radius: 50%;
    background: var(--bs-warning);
    cursor: pointer;
    box-shadow: 0 0 0 2px rgba(var(--bs-warning-rgb), 0.3);
}

/* Hervorgehobene Grid-Zeilen (z.B. zugeordnete Kinder im MasterDetailAssignment) */
.udm-grid-row-highlighted {
    background-color: rgba(var(--bs-primary-rgb), 0.08) !important;
    border-left: 3px solid var(--bs-primary) !important;
}

/* Zuordnungs-Button (+/-) in der Grid-Aktionsspalte */
.udm-grid-assignment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 0.85em;
    line-height: 1;
    transition: background 0.15s, color 0.15s, transform 0.1s;
}

.udm-grid-assignment-btn:active {
    transform: scale(0.9);
}

.udm-grid-assignment-btn--add {
    background: rgba(var(--bs-success-rgb), 0.12);
    color: var(--bs-success);
}

.udm-grid-assignment-btn--add:hover {
    background: rgba(var(--bs-success-rgb), 0.25);
}

.udm-grid-assignment-btn--remove {
    background: rgba(var(--bs-danger-rgb), 0.12);
    color: var(--bs-danger);
}

.udm-grid-assignment-btn--remove:hover {
    background: rgba(var(--bs-danger-rgb), 0.25);
}


/* ===== Kontext-Panel (Wrapper um Header + Hero-Grid + Info-Grid) ===== */

.udm-context-panel {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: 8px;
    /* Allseitiger Abstand, damit das Panel nicht an Matrix/Toolbar/Schnellfilter klebt. */
    margin: 0.6rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    /* Verhindert, dass der Flex-Parent (UiElementControl .d-flex.flex-column) das Panel
       zusammenstaucht und den Info-Card-Content abschneidet — Panel zieht seine
       Content-Hoehe. */
    flex-shrink: 0;
    /* Admin-steuerbare Groessen-Limits via Inline-Style (GdoViewElementContextPanelSettings.MaxHeight).
       Wenn MaxHeight gesetzt, wird der Inhalt scrollbar. Default: keine Begrenzung. */
    max-height: var(--udm-cp-max-height, none);
    overflow-y: auto;
    overflow-x: hidden;
}

/* ===================================================================
   Kontext-Panel: Darstellungen (Komfort / Kompakt / Leiste)
   Konzept: docs/03_features/context-panel/kontext-panel-layouts-konzept.md
   Komfort = heutiges Aussehen, hier bewusst ohne eigene Regeln.
   =================================================================== */

/* Das Panel misst sich selbst. Alle Breiten-Schwellen unten beziehen sich auf
   die Panel-Breite, nicht auf das Browser-Fenster. */
.udm-context-panel {
    container-type: inline-size;
}

/* ===== Kompakt ===== */

.udm-cp-kompakt {
    padding: 0.5em 0.9em 0.6em;
}

.udm-cp-kompakt-top {
    display: flex;
    align-items: center;
    gap: 0.6em;
    flex-wrap: wrap;
    margin-bottom: 0.45em;
}

/* Zugeklappt steht nichts mehr darunter — dann faellt auch der Abstand weg. */
.udm-cp-collapsed .udm-cp-kompakt-top { margin-bottom: 0; }

/* Klickbereich zum Auf- und Zuklappen: Pfeil, Titel und Status zusammen.
   Der Titel ist die natuerliche Stelle dafuer, nicht nur der Pfeil.
   Button-Grundoptik neutralisieren, die Zeile soll wie Panel-Chrome wirken. */
.udm-cp-head-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    background: transparent;
    border: 0;
    padding: 0;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
    min-width: 0;
}

.udm-cp-head-btn > .udm-cp-collapse-chevron {
    color: var(--bs-secondary-color, #6b7280);
    flex: 0 0 auto;
}

/* In der Leiste muss der Klickbereich mitschrumpfen, damit die Ellipsis des
   Titels greift (Rang 3 der Weich-Reihenfolge). */
.udm-cp-head-btn--leiste {
    flex: 0 1 auto;
    overflow: hidden;
}

.udm-cp-kompakt-title {
    font-weight: 700;
    color: var(--bs-primary, #0d6efd);
}

.udm-cp-kompakt-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    border-radius: 999px;
    padding: 0.05em 0.6em;
    font-size: 0.82em;
    font-weight: 600;
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1);
}

/* Aktionen rechts in der Kopfzeile. Umbruch in eine zweite Zeile ist hier erlaubt
   (Konzept R6) — nur die Leiste darf nicht umbrechen. */
.udm-cp-kompakt-actions {
    margin-left: auto;
    display: flex;
    gap: 0.4em;
    flex-wrap: wrap;
}

/* Angaben als Zeilen. Spaltenzahl folgt der Admin-Einstellung "Info-Spalten",
   gedeckelt auf 3 (siehe ContextPanelRenderModel.CompactColumns). */
.udm-cp-kompakt-rows {
    display: grid;
    grid-template-columns: repeat(var(--udm-cp-kompakt-cols, 2), minmax(0, 1fr));
    column-gap: 1.6em;
}

/* Schmales Panel: eine Spalte, sonst wird jede Zeile zum Wortsalat. */
@container (max-width: 30em) {
    .udm-cp-kompakt-rows { grid-template-columns: 1fr; }
}

/* Beschriftung und Wert stehen direkt beieinander und lesen sich als ein Satz.
   Frueher standen sie an den Zeilenraendern (space-between) — bei breitem Panel
   riss das eine Lücke auf, die den Bezug zerschnitt. */
.udm-cp-kv {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: 0.5em;
    padding: 0.18em 0;
    border-bottom: 1px dotted var(--bs-border-color, #e8ecef);
    min-width: 0;
}

.udm-cp-kv:last-child { border-bottom: 0; }

/* Die Beschriftung schrumpft NICHT. Sie ist kurz und benennt den Wert; halb
   abgeschnitten ("Anmerkur") ist sie wertlos. Bei Platzmangel gibt der Wert nach,
   der bekommt dafuer ein sauberes Auslassungszeichen. */
.udm-cp-kv-key {
    color: var(--bs-secondary-color, #6b7280);
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    flex: 0 0 auto;
    white-space: nowrap;
}

.udm-cp-kv-val {
    font-weight: 600;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Aktion als flache Schaltflaeche (Kompakt + Leiste) =====
   Gleiche Komponente wie die Hero-Karte, nur ohne Karten-Rahmen und ohne
   Beschreibung. Farben kommen weiter aus Job-Appearance bzw. IntegratedStyle. */
.udm-cp-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 6px;
    padding: 0.2em 0.7em;
    background: var(--hero-accent, var(--bs-body-bg, #fff));
    cursor: pointer;
    white-space: nowrap;
}

.udm-cp-action-btn:hover {
    filter: brightness(0.97);
}

.udm-cp-action-btn.disabled {
    opacity: 0.5;
    cursor: default;
}

/* Icon-Badge der Karte wird hier zum schlichten Glyph. */
.udm-cp-action-btn .udm-hero-action-icon {
    background: none;
    padding: 0;
    width: auto;
    height: auto;
}

.udm-cp-action-btn .udm-hero-action-label {
    font-weight: 600;
}

/* ===== Leiste =====
   Kernregel: immer eine Zeile. Bricht sie um, ist sie keine Leiste mehr. */

/* Innenmass gross genug, dass die Zeile atmet: die Leiste ist der gesamte Kopf des
   Panels, nicht ein Streifen unter einer Kopfzeile. Ergibt die rund 40 Pixel aus dem
   Konzept. Ueber die Hoehe entscheidet bewusst das Innenmass, keine feste Angabe —
   so waechst sie mit der Schriftgroesse mit. */
.udm-cp-leiste {
    display: flex;
    align-items: center;
    gap: 0.9em;
    padding: 0.6em 0.9em;
    flex-wrap: nowrap;
    overflow: hidden;
}

/* Rang 3: der Kopftext weicht als Letztes und nur bis zu einer Mindestbreite. */
.udm-cp-leiste-title {
    font-weight: 700;
    color: var(--bs-primary, #0d6efd);
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: 4em;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status bleibt immer. */
.udm-cp-leiste-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 0.05em 0.6em;
    font-size: 0.82em;
    font-weight: 600;
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1);
}

.udm-cp-leiste-items {
    display: flex;
    align-items: center;
    gap: 0.9em;
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
}

.udm-cp-leiste-item {
    white-space: nowrap;
    flex: 0 0 auto;
}

.udm-cp-leiste-key {
    color: var(--bs-secondary-color, #6b7280);
    margin-right: 0.3em;
}

.udm-cp-leiste-val { font-weight: 600; }

/* Trenner per CSS, damit er beim Ausblenden einer Angabe automatisch mitgeht. */
.udm-cp-leiste-item + .udm-cp-leiste-item::before {
    content: "|";
    color: var(--bs-border-color, #ccd3d9);
    margin-right: 0.9em;
}

/* Aktionen werden nie zerdrueckt (Rang 2). */
.udm-cp-leiste-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.4em;
    flex: 0 0 auto;
}

/* Rang 1: Angaben weichen zuerst, von hinten nach vorn, jeweils GANZ.
   Es wird nichts mittendrin angeschnitten (Konzept E4). */
@container (max-width: 44em) {
    .udm-cp-leiste-item:nth-child(n+3) { display: none; }
}
@container (max-width: 34em) {
    .udm-cp-leiste-item:nth-child(n+2) { display: none; }
}
@container (max-width: 26em) {
    .udm-cp-leiste-items { display: none; }
}

/* Rang 2: Aktionen. Zwei Zustaende, kein Zwischenschritt (Konzept R4/E3).
   Grundzustand ist der Punkte-Knopf; die beschriftete Reihe wird erst ab der
   Schwelle eingeblendet, die zur Anzahl der Aktionen passt (Konzept R5).
   ACHTUNG: Die Schwellenwerte sind noch nicht am laufenden Build gemessen
   (Konzept G1/G2) — sie haengen an Schriftgroesse, Icon-Groesse und der Laenge
   der Aktionsnamen. */
.udm-cp-acts-full { display: none; gap: 0.4em; }
.udm-cp-acts-more { display: inline-flex; position: relative; }

@container (min-width: 26em) {
    [data-udm-actions="1"] .udm-cp-acts-full { display: inline-flex; }
    [data-udm-actions="1"] .udm-cp-acts-more { display: none; }
}
@container (min-width: 36em) {
    [data-udm-actions="2"] .udm-cp-acts-full { display: inline-flex; }
    [data-udm-actions="2"] .udm-cp-acts-more { display: none; }
}
@container (min-width: 47em) {
    [data-udm-actions="3"] .udm-cp-acts-full { display: inline-flex; }
    [data-udm-actions="3"] .udm-cp-acts-more { display: none; }
}

/* Ab vier Aktionen bleibt es beim Punkte-Knopf — eine Reihe aus vier beschrifteten
   Schaltflaechen sprengt jede Leistenbreite, die im Alltag vorkommt. */

.udm-cp-leiste-more-btn {
    border: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-body-bg, #fff);
    border-radius: 6px;
    padding: 0.2em 0.55em;
    cursor: pointer;
    line-height: 1.4;
}

.udm-cp-leiste-more-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.udm-cp-leiste-more-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.3em);
    z-index: 1041;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    padding: 0.4em;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

/* Im Menue stehen die Schaltflaechen untereinander und linksbuendig. */
.udm-cp-leiste-more-panel .udm-cp-action-btn {
    justify-content: flex-start;
    width: 100%;
}

/* Zugeklappt: keine Hoehenbegrenzung, kein Scrollbalken fuer eine Zeile. */
.udm-cp-layout-leiste {
    max-height: none;
    overflow: visible;
}

/* Klappleiste — immer sichtbar, traegt Pfeil + Titel.
   Zugeklappt ist sie das Einzige, was vom Panel stehen bleibt. */
.udm-cp-collapse-bar {
    display: flex;
    align-items: center;
    gap: 0.5em;
    width: 100%;
    /* Button-Grundoptik neutralisieren, die Leiste soll wie Panel-Chrome wirken. */
    background: transparent;
    border: 0;
    text-align: left;
    padding: 0.35em 0.9em;
    color: var(--bs-secondary-color, #6b7280);
    cursor: pointer;
}

.udm-cp-collapse-bar:hover {
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.05);
}

.udm-cp-collapse-title {
    font-size: 0.78em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* Lange Kopftexte duerfen die Leiste nicht sprengen. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Zugeklappt ist diese Zeile der gesamte Kopf des Panels. Dann traegt sie den
   Titel im normalen Panel-Titel-Stil und bekommt die Hoehe einer echten Kopfzeile —
   ein duenner Streifen mit Kleinschrift wirkt dort wie ein Rest, nicht wie ein Kopf. */
.udm-cp-collapsed .udm-cp-collapse-bar {
    padding: 0.7rem 0.9rem;
}

.udm-cp-collapsed .udm-cp-collapse-title {
    font-size: 1.02em;
    font-weight: 700;
    color: var(--bs-primary, #0d6efd);
    text-transform: none;
    letter-spacing: normal;
}

/* Ein Pfeil-Glyph fuer beide Zustaende: zugeklappt zeigt er nach rechts.
   Spart eine Fallunterscheidung im Markup. */
.udm-cp-collapse-chevron {
    transition: transform 0.15s ease-in-out;
}

.udm-cp-collapsed .udm-cp-collapse-chevron {
    transform: rotate(-90deg);
}

/* Zugeklappt: keine Hoehenbegrenzung noetig, kein Scrollbalken fuer eine Leiste. */
.udm-context-panel.udm-cp-collapsed {
    max-height: none;
    overflow: visible;
}

/* Position rechts: zugeklappt darf die Sidebar nicht in voller Breite stehen bleiben.
   Sie schrumpft auf die Pfeilbreite, der Titel entfaellt. */
.udm-context-panel.udm-cp-pos-right.udm-cp-collapsed {
    min-width: 0;
    max-width: none;
    flex: 0 0 auto;
}

.udm-context-panel.udm-cp-pos-right.udm-cp-collapsed .udm-cp-collapse-title {
    display: none;
}

/* Klickbarer Kopf (Komfort): klappt auf und zu. */
.udm-cp-header--clickable {
    cursor: pointer;
}

.udm-cp-header--clickable:hover {
    filter: brightness(0.98);
}

/* Header-Bereich (Titel + Status) */
.udm-context-panel-header {
    padding: 0.7rem 0.9rem;
    background: linear-gradient(135deg,
        rgba(var(--bs-primary-rgb, 13, 110, 253), 0.06) 0%,
        rgba(var(--bs-primary-rgb, 13, 110, 253), 0.02) 100%);
    border-bottom: 1px solid var(--bs-border-color, #e5e7eb);
}

/* Pfeil und Titel in einer Reihe — so braucht der Pfeil keine eigene Zeile darueber. */
.udm-cp-header-titlerow {
    display: flex;
    align-items: center;
    gap: 0.5em;
    min-width: 0;
}

.udm-cp-header-chevron {
    color: var(--bs-secondary-color, #6b7280);
    flex: 0 0 auto;
    font-size: 0.85em;
}

.udm-context-panel-title {
    font-size: 1.02em;
    font-weight: 700;
    color: var(--bs-primary, #0d6efd);
    line-height: 1.3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.udm-context-panel-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    margin-top: 0.3em;
    padding: 0.15em 0.55em;
    background: rgba(217, 119, 6, 0.12);
    color: #92400e;
    border-radius: 12px;
    font-size: 0.82em;
    font-weight: 600;
}

.udm-context-panel-status i {
    font-size: 0.9em;
}

/* ===== Gemeinsames Basisraster fuer Aktionen und Angaben =====
   Beide Bereiche liegen auf denselben Spaltenkanten und haben denselben seitlichen
   Innenrand wie die Kopfzeile (0.9rem). Frueher hatte jeder Bereich sein eigenes
   Raster mit eigener Spaltenzahl, Mindestbreite und eigenem Innenrand — dadurch
   fluchtete keine einzige Kante.

   --udm-cp-cols kommt vom Panel-Root (Basisraster = kgV der beiden Einstellungen),
   --udm-cp-span sagt je Bereich, wie viele Spalten eine Karte belegt. */
.udm-cp-grid,
.udm-context-panel-info-grid,
.udm-hero-action-grid {
    display: grid;
    grid-template-columns: repeat(var(--udm-cp-cols, 6), minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
}

.udm-context-panel-info-grid > *,
.udm-hero-action-grid > * {
    grid-column: span var(--udm-cp-span, 1);
    min-width: 0;
}

/* Der letzte Bereich im Panel schliesst mit etwas mehr Luft ab. */
.udm-context-panel-info-grid { padding-bottom: 0.7rem; }

/* Schmales Panel: die eingestellte Spaltenzahl wuerde die Karten zerquetschen.
   Dann faellt alles auf eine Spalte zurueck — Karten bleiben lesbar, und da alles
   einspaltig ist, fluchtet es weiterhin. */
@container (max-width: 28em) {
    .udm-context-panel-info-grid,
    .udm-hero-action-grid {
        grid-template-columns: 1fr;
    }

    .udm-context-panel-info-grid > *,
    .udm-hero-action-grid > * {
        grid-column: auto;
    }
}

.udm-context-panel-info-card {
    padding: 0.45rem 0.7rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #f3f4f6);
    border-radius: 5px;
    border-left: 3px solid var(--_info-accent, var(--bs-secondary, #6c757d));
}

.udm-cpi-label {
    display: flex;
    align-items: center;
    gap: 0.3em;
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color, #6b7280);
}

.udm-cpi-label i {
    opacity: 0.6;
}

/* FA-Icons im InfoCard-Label sollen die Label-Farbe erben (currentColor),
   damit der Forecolor-Inline-Style auf .udm-cpi-label durchschlaegt.
   udm_fontawesome.css setzt fuer alle FA-Klassen color: var(--bs-primary-rgb).
   :not(.disabled)-Verdopplung erhoeht hier die Spezifitaet (0,3,0) ueber den
   FA-Selektor (0,2,0) — sonst gewinnt der spaeter geladene FA-CSS-Eintrag. */
.udm-cpi-label .fa-solid:not(.disabled),
.udm-cpi-label .fa-regular:not(.disabled),
.udm-cpi-label .fa-light:not(.disabled),
.udm-cpi-label .fa-thin:not(.disabled),
.udm-cpi-label .fa-sharp:not(.disabled),
.udm-cpi-label .fa-brands:not(.disabled),
.udm-cpi-label .fa-sharp-solid:not(.disabled),
.udm-cpi-label .fa-sharp-regular:not(.disabled),
.udm-cpi-label .fa-sharp-light:not(.disabled),
.udm-cpi-label .fa-sharp-thin:not(.disabled) {
    color: inherit;
}

/* Bei dynamischen Styles (Backcolor/Forecolor explizit gesetzt) Icon voll deckend
   rendern — sonst wirkt es auf farbigem Card-Hintergrund halb-transparent und ist
   schlecht sichtbar. Icon erbt color via currentColor vom Label-Inline-Style. */
.udm-cpi-dynamic .udm-cpi-label i {
    opacity: 1;
}

/* Bei dynamischer Card mit eigener Forecolor sollen die Akzent-Klassen
   (.udm-cpi-ok/.udm-cpi-warn/.udm-cpi-danger) das Value NICHT mehr ueberfaerben —
   sonst verliert der Inline-Style auf .udm-cpi-value seine Wirkung gegen die
   spezifischeren Akzent-Selektoren. */
.udm-cpi-dynamic.udm-cpi-ok .udm-cpi-value,
.udm-cpi-dynamic.udm-cpi-warn .udm-cpi-value,
.udm-cpi-dynamic.udm-cpi-danger .udm-cpi-value {
    color: inherit;
}

.udm-cpi-value {
    font-size: 1em;
    font-weight: 700;
    color: var(--bs-body-color, #1f2937);
    margin-top: 0.15em;
    line-height: 1.2;
    /* Admin-steuerbares Text-Clamp via Inline-Style (MaxInfoCardTextLines). Default: unbegrenzt. */
    display: -webkit-box;
    -webkit-line-clamp: var(--udm-cp-info-lines, unset);
    line-clamp: var(--udm-cp-info-lines, unset);
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* Akzent-Varianten */
.udm-cpi-neutral { --_info-accent: var(--bs-secondary, #6c757d); }
.udm-cpi-ok { --_info-accent: var(--bs-success, #16a34a); }
.udm-cpi-ok .udm-cpi-value { color: var(--bs-success, #16a34a); }
.udm-cpi-warn { --_info-accent: var(--bs-warning, #ea580c); }
.udm-cpi-warn .udm-cpi-value { color: var(--bs-warning, #ea580c); }
.udm-cpi-danger { --_info-accent: var(--bs-danger, #dc2626); }
.udm-cpi-danger .udm-cpi-value { color: var(--bs-danger, #dc2626); }

/* Klickbare InfoCard — reaktiver Cursor + dezenter Hover-Rahmen in Akzent-Farbe.
   Bewusst ohne Margin-Aenderung / Position-Tricks: das Grid-Layout bleibt stabil,
   Density-Skalierung + Container-Queries werden nicht gestoert. */
.udm-context-panel-info-card.udm-cpi-clickable {
    cursor: pointer;
    transition: box-shadow 0.12s ease, border-color 0.12s ease;
}
.udm-context-panel-info-card.udm-cpi-clickable:hover {
    border-color: var(--_info-accent, var(--bs-secondary, #6c757d));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.udm-context-panel-info-card.udm-cpi-clickable:focus-visible {
    outline: 2px solid var(--_info-accent, var(--bs-primary, #0d6efd));
    outline-offset: 1px;
}


/* ===== Hero Action Cards ===== */

/* Das Raster fuer die Aktionskarten steht weiter oben beim gemeinsamen Basisraster
   des Kontext-Panels — Aktionen und Angaben teilen es sich, damit die Kanten fluchten. */

.udm-hero-action-card {
    /* Effektive Farbvariablen: Admin-Wert → Bootstrap-Primary → Fallback */
    --_accent: var(--hero-accent, var(--bs-primary, #2fa4e7));
    --_accent-rgb: var(--hero-accent-rgb, var(--bs-primary-rgb, 47,164,231));
    --_icon: var(--hero-icon, var(--_accent));
    --_icon-rgb: var(--hero-icon-rgb, var(--_accent-rgb));
    /* Fallback NICHT auf inherit: HeroCards landen oft in farbig eingefaerbten Containern
       (z.B. DynamicMatrix-Cell-Region) und wuerden sonst weisse Schrift erben → unsichtbar
       auf hellem Karten-Hintergrund (Gradient/Glass). bs-body-color ist deterministisch dunkel. */
    --_forecolor: var(--hero-forecolor, var(--bs-body-color, #1f2937));

    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.7rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    transition: all 0.12s;
}

.udm-hero-action-card:hover {
    border-color: var(--_accent);
    background: rgba(var(--_accent-rgb), 0.04);
}

.udm-hero-action-card.disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.udm-hero-action-card .udm-hero-action-icon {
    font-size: 1.4em;
    flex-shrink: 0;
    width: 2em;
    text-align: center;
}

/* Bild-Icon ohne eigene IconBackcolor: neutraler Badge statt farbigem Gradient */
.udm-hero-action-card .udm-hero-action-icon.udm-hero-icon--neutral {
    background: rgba(0, 0, 0, 0.04) !important;
    box-shadow: none !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.udm-hero-action-card .udm-hero-action-icon img {
    /* Raster-Bilder fuellen das Badge nicht so dicht wie FontAwesome-Glyphen.
       2em (statt 1.4em) bei 2.4em Badge ergibt visuell die gleiche Praesenz
       wie ein FA-Icon. */
    width: 2em;
    height: 2em;
    object-fit: contain;
}

.udm-hero-action-card .udm-hero-action-label {
    font-weight: 600;
    color: var(--_forecolor);
}

.udm-hero-action-card .udm-hero-action-desc {
    font-size: 0.88em;
    color: var(--hero-forecolor, var(--bs-secondary-color, #5a7a96));
    opacity: 0.75;
}


/* --- Variante: Gradient-Banner --- */

.udm-hero-action-card.udm-hero-card--gradient {
    background: linear-gradient(135deg, rgba(var(--_accent-rgb), 0.12) 0%, rgba(var(--_accent-rgb), 0.03) 60%, transparent 100%);
    border-color: rgba(var(--_accent-rgb), 0.15);
    border-left: 4px solid var(--_accent);
    padding: 0.85rem 1.1rem;
}

.udm-hero-action-card.udm-hero-card--gradient:hover {
    border-color: rgba(var(--_accent-rgb), 0.3);
    background: linear-gradient(135deg, rgba(var(--_accent-rgb), 0.16) 0%, rgba(var(--_accent-rgb), 0.05) 60%, transparent 100%);
}

.udm-hero-action-card.udm-hero-card--gradient .udm-hero-action-icon {
    width: 2.4em;
    height: 2.4em;
    border-radius: 0.5em;
    background: var(--_icon);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(var(--_icon-rgb), 0.3);
}

.udm-hero-action-card.udm-hero-card--gradient .udm-hero-action-icon img {
    border-radius: 0.3em;
}

.udm-hero-action-card.udm-hero-card--gradient .udm-hero-action-desc {
    color: var(--hero-forecolor, rgba(var(--_accent-rgb), 0.75));
    opacity: 1;
}


/* --- Variante: Glasmorphism / Frosted --- */

.udm-hero-action-card.udm-hero-card--glass {
    background: linear-gradient(120deg,
        rgba(var(--_accent-rgb), 0.06) 0%,
        rgba(var(--_accent-rgb), 0.03) 50%,
        rgba(var(--_accent-rgb), 0.01) 100%);
    border-color: rgba(var(--_accent-rgb), 0.12);
    padding: 0.85rem 1.1rem;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.udm-hero-action-card.udm-hero-card--glass::before {
    content: '';
    position: absolute;
    right: -1.5em;
    top: -1.5em;
    width: 5em;
    height: 5em;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--_accent-rgb), 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.udm-hero-action-card.udm-hero-card--glass:hover {
    border-color: rgba(var(--_accent-rgb), 0.25);
    background: linear-gradient(120deg,
        rgba(var(--_accent-rgb), 0.1) 0%,
        rgba(var(--_accent-rgb), 0.05) 50%,
        rgba(var(--_accent-rgb), 0.02) 100%);
}

.udm-hero-action-card.udm-hero-card--glass .udm-hero-action-icon {
    width: 2.4em;
    height: 2.4em;
    border-radius: 0.6em;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(var(--_icon-rgb), 0.2);
    /* Akzent-Farbe um 35% abdunkeln, damit auch sehr helle/pastellige Akzente
       auf dem fast-weissen Glass-Badge noch lesbar bleiben. */
    color: color-mix(in srgb, var(--_icon), #000 35%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    position: relative;
    z-index: 1;
}


/* --- Variante: Solid Accent --- */

.udm-hero-action-card.udm-hero-card--solid {
    background: linear-gradient(135deg, var(--_accent) 0%, color-mix(in srgb, var(--_accent), #000 15%) 100%);
    border-color: transparent;
    padding: 0.85rem 1.1rem;
    position: relative;
    overflow: hidden;
}

.udm-hero-action-card.udm-hero-card--solid::before {
    content: '';
    position: absolute;
    right: -1em;
    top: -1em;
    width: 5em;
    height: 5em;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.udm-hero-action-card.udm-hero-card--solid::after {
    content: '';
    position: absolute;
    right: 2em;
    bottom: -1.5em;
    width: 4em;
    height: 4em;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.udm-hero-action-card.udm-hero-card--solid:hover {
    filter: brightness(1.08);
    border-color: transparent;
    background: linear-gradient(135deg, var(--_accent) 0%, color-mix(in srgb, var(--_accent), #000 15%) 100%);
}

.udm-hero-action-card.udm-hero-card--solid .udm-hero-action-icon {
    width: 2.4em;
    height: 2.4em;
    border-radius: 0.5em;
    /* Halbtransparentes Weiss statt var(--_icon), damit der Icon-Container
       vom gleichfarbigen Karten-Hintergrund abhebt. Admin kann via --hero-icon
       explizit uebersteuern. */
    background: var(--hero-icon, rgba(255, 255, 255, 0.22));
    color: var(--hero-icon-color, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    font-size: 1.1em;
}

.udm-hero-action-card.udm-hero-card--solid .udm-hero-action-icon img {
    border-radius: 0.3em;
}

.udm-hero-action-card.udm-hero-card--solid .udm-hero-action-label {
    color: var(--hero-forecolor, #fff);
    position: relative;
    z-index: 1;
}

.udm-hero-action-card.udm-hero-card--solid .udm-hero-action-desc {
    color: var(--hero-forecolor, rgba(255, 255, 255, 0.75));
    opacity: 1;
    position: relative;
    z-index: 1;
}


/* --- Icon-Glyph folgt der Badge-Farbe der jeweiligen Variante ---
   Das Badge-div deklariert die gewuenschte Icon-Farbe (Gradient/Solid: weiss,
   Glass: abgedunkelter Akzent), aber udm_fontawesome.css faerbt das <i> DIREKT
   (Solid/Light/Regular/Thin via color, Duotone via --fa-*-Layer) und schlaegt so
   die reine Vererbung vom div. Ergebnis sonst: gleichfarbiges Icon auf gleich-
   farbigem Badge (blau auf blau = unsichtbar).
   Hier erbt das <i> die Badge-Farbe explizit; fuer Duotone werden beide Layer auf
   currentColor gezogen. Spezifitaet 0,0,3,1 sticht .fa-*:not(.disabled) (0,0,2,0)
   ohne !important. */
.udm-hero-action-card.udm-hero-card--gradient .udm-hero-action-icon i,
.udm-hero-action-card.udm-hero-card--solid .udm-hero-action-icon i,
.udm-hero-action-card.udm-hero-card--glass .udm-hero-action-icon i {
    color: inherit;
    --fa-primary-color: currentColor;
    --fa-secondary-color: currentColor;
    --fa-secondary-opacity: 0.5;
}


/* ====================================================================
   RadioGroup Display-Varianten (PillToggle, CardSelect, Chips)
   ==================================================================== */

/* --- Variante A: Pill Toggle (Default) --- */
.udm-rg-pill-toggle {
    display: inline-flex;
    background: var(--bs-secondary-bg, #e9ecef);
    border-radius: 0.5em;
    padding: 0.2em;
    gap: 0.15em;
}

.udm-rg-pill-item {
    padding: 0.35em 1.1em 0.35em 1.4em;
    font-size: 0.92em;
    cursor: pointer;
    border-radius: 0.4em;
    border: none;
    background: transparent;
    color: var(--bs-secondary-color, #666);
    font-weight: 500;
    transition: background 0.2s, color 0.15s, box-shadow 0.2s;
    position: relative;
    white-space: nowrap;
}

.udm-rg-pill-item:hover:not(.active) {
    color: var(--bs-body-color, #333);
    background: rgba(255, 255, 255, 0.5);
}

.udm-rg-pill-item.active {
    background: #fff;
    color: var(--bs-primary, #0d6efd);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.udm-rg-pill-item.active::before {
    content: '';
    position: absolute;
    left: 0.3em;
    top: 50%;
    transform: translateY(-50%);
    width: 0.2em;
    height: 1em;
    background: var(--bs-primary, #0d6efd);
    border-radius: 0.1em;
}

.udm-rg-pill-toggle.no-click .udm-rg-pill-item {
    cursor: default;
    pointer-events: none;
}


/* --- Variante B: Card-Select --- */
.udm-rg-card-select {
    display: flex;
    gap: 0.5em;
}

.udm-rg-card-item {
    flex: 1;
    padding: 0.6em 0.85em;
    cursor: pointer;
    border: 1.5px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5em;
    background: #fff;
    color: var(--bs-secondary-color, #555);
    font-size: 0.92em;
    transition: border-color 0.2s, background 0.2s, color 0.15s;
    display: flex;
    align-items: center;
    gap: 0.5em;
    white-space: nowrap;
}

.udm-rg-card-item:hover:not(.active) {
    border-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.3);
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.04);
}

.udm-rg-card-item.active {
    border-color: var(--bs-primary, #0d6efd);
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.05);
    color: var(--bs-primary, #0d6efd);
    font-weight: 600;
}

.udm-rg-card-check {
    width: 1.15em;
    height: 1.15em;
    border-radius: 50%;
    border: 1.5px solid var(--bs-border-color, #ccc);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.7em;
    color: transparent;
    transition: background 0.2s, border-color 0.2s, color 0.15s;
}

.udm-rg-card-item.active .udm-rg-card-check {
    background: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    color: #fff;
}

.udm-rg-card-select.no-click .udm-rg-card-item {
    cursor: default;
    pointer-events: none;
}


/* --- Variante C: Chips --- */
.udm-rg-chip-select {
    display: flex;
    gap: 0.4em;
    flex-wrap: wrap;
}

.udm-rg-chip-item {
    padding: 0.35em 1em;
    cursor: pointer;
    border: 1.5px solid var(--bs-border-color, #dee2e6);
    border-radius: 1.25em;
    background: #fff;
    color: var(--bs-secondary-color, #555);
    font-size: 0.88em;
    transition: border-color 0.2s, background 0.2s, color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-weight: 500;
    white-space: nowrap;
}

.udm-rg-chip-item:hover:not(.active) {
    border-color: var(--bs-secondary, #adb5bd);
    background: var(--bs-light, #f8f9fa);
}

.udm-rg-chip-item.active {
    border-color: var(--bs-primary, #0d6efd);
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.08);
    color: var(--bs-primary, #0d6efd);
    font-weight: 600;
}

.udm-rg-chip-dot {
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: var(--bs-border-color, #ccc);
    transition: background 0.2s, box-shadow 0.2s;
}

.udm-rg-chip-item.active .udm-rg-chip-dot {
    background: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 0.15em rgba(var(--bs-primary-rgb, 13, 110, 253), 0.2);
}

.udm-rg-chip-select.no-click .udm-rg-chip-item {
    cursor: default;
    pointer-events: none;
}


/* --- Overflow-Menue-Button (VE-uebergreifend: Grid, Liste, etc.) --- */
.udm-overflow-menu-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0.25em 0.45em;
    font-size: 1em;
    line-height: 1;
    border-radius: 0.25em;
    color: var(--bs-body-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.udm-overflow-menu-btn:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
}


/* ====================================================================
   UdmColorPicker — kompaktes Inline-Control mit Popup-Auswahl
   (verschoben aus udm_admin.css damit auch UserClient den Picker nutzen kann)
   ==================================================================== */

.udm-color-field {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    border: 1px solid var(--bs-border-color, #d0d5dd);
    border-radius: 6px;
    padding: 0.35em 0.6em;
    cursor: pointer;
    transition: border-color 0.15s;
    min-width: 9em;
    background: var(--bs-body-bg, #fff);
}

.udm-color-field:hover {
    border-color: #98a2b3;
}

.udm-color-field--open {
    border-color: var(--bs-primary, #2fa4e7);
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb, 47,164,231), 0.15);
}

.udm-color-field--readonly {
    opacity: 0.65;
    cursor: default;
    pointer-events: none;
}

.udm-color-field__swatch {
    width: 1.6em;
    height: 1.6em;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.udm-color-field__swatch--empty {
    background: repeating-conic-gradient(#e8e8e8 0% 25%, #fff 0% 50%) 50% / 0.6em 0.6em;
    border: 1px dashed #ccc;
}

.udm-color-field__text {
    font-size: 0.82em;
    color: var(--bs-body-color, #344054);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.udm-color-field__text--empty {
    color: var(--bs-secondary-color, #98a2b3);
    font-style: italic;
}

.udm-color-field__chevron {
    font-size: 0.65em;
    color: var(--bs-secondary-color, #98a2b3);
    flex-shrink: 0;
}

.udm-color-popup__footer {
    display: flex;
    align-items: center;
    gap: 0.4em;
    width: 100%;
}

.udm-color-popup__footer-spacer {
    flex: 1;
}

.udm-color-popup__swatch-mini {
    width: 1.2em;
    height: 1.2em;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}


/* ====================================================================
   IntegratedStyle-Control (UiDialog) — Layout fuer den UserUI-Editor.
   Ohne DevExpress-Wrapper: nutzt natives <details>/<summary> als
   collapsible-Mechanik damit native Form-Inputs (file etc.) zuverlaessig
   rendern.
   ==================================================================== */

.udm-istyle-details {
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    padding: 0;
    background: var(--bs-body-bg);
}

.udm-istyle-summary {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.5em 0.7em;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.udm-istyle-summary::-webkit-details-marker {
    display: none;
}

.udm-istyle-summary-chevron {
    color: var(--bs-secondary-color);
    width: 1em;
    text-align: center;
    flex-shrink: 0;
}

.udm-istyle-header-title {
    flex: 1 1 auto;
    font-weight: 600;
}

.udm-istyle-preview {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.25em 0.55em;
    border-radius: 0.25em;
    border: 1px solid var(--bs-border-color);
    min-width: 8em;
}

.udm-istyle-preview-icon {
    width: 1.2em;
    height: 1.2em;
    object-fit: contain;
    border-radius: 0.2em;
}

/* Im Bild-Feld (Symbol-Gruppe) eine groessere Vorschau zeigen — der Anwender
   soll das hochgeladene Bild auch erkennen koennen, nicht nur ahnen. */
.udm-istyle-image-row .udm-istyle-preview-icon {
    width: 2.5em;
    height: 2.5em;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    padding: 0.15em;
}

.udm-istyle-body {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    padding: 0.5em 0.2em 0.2em;
    /* DxFormLayoutGroup legt Items in ein internes CSS-Grid mit Default-Spalten —
       wir wollen die volle Breite nutzen, also ueber alle Spalten spannen. */
    grid-column: 1 / -1;
    width: 100%;
}

/* Thematische Gruppen vertikal gestapelt — Farben/Symbol/Schrift-Stil
   bekommen jeweils volle Breite, damit ihre internen Spalten (z.B. 3 Farben
   nebeneinander) nicht zerquetscht werden. */
.udm-istyle-grid {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
}

.udm-istyle-group {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    padding: 0.5em 0.7em 0.6em;
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.02));
}

.udm-istyle-group-title {
    font-size: 0.78em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    margin-bottom: 0.15em;
}

/* Default: Fields innerhalb der Gruppe vertikal gestapelt. */
.udm-istyle-group-fields {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}

/* Modifier: Felder nebeneinander, gleichmaessig verteilt. */
.udm-istyle-group--cols-2 .udm-istyle-group-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6em;
}

.udm-istyle-group--cols-3 .udm-istyle-group-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6em;
}

.udm-istyle-field {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    min-width: 0;
}

/* Eingabe-Controls innerhalb einer IntegratedStyle-Gruppe sollen die volle
   Zellenbreite ausnutzen — sonst stehen z.B. ColorPicker mit min-width links
   geklemmt waehrend rechts ungenutzter Platz bleibt. */
.udm-istyle-field > .udm-color-field {
    display: flex;
    width: 100%;
    min-width: 0;
}

.udm-istyle-field > label {
    font-size: 0.78em;
    color: var(--bs-secondary-color);
    margin: 0;
}

.udm-istyle-image-row {
    display: flex;
    align-items: center;
    gap: 0.6em;
    flex-wrap: wrap;
}

/* Bootstrap-Default fuer .form-check setzt padding-left:1.5em, min-height und auf
   .form-check-input zusaetzlich float:left + margin-left:-1.5em — beides muss
   explizit gekontert werden, sonst rutscht die Checkbox aus dem Panel.
   Zusaetzlich font-size: 1em, damit die Checkbox nicht in der reduzierten
   Label-Kaskade (0.78em des udm-istyle-field-Labels) schrumpft. */
.udm-istyle-field .form-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    margin: 0;
    padding-left: 0;
    min-height: 0;
    font-size: 1em;
    cursor: pointer;
}

.udm-istyle-field .form-check-input {
    float: none;
    width: 1.25em;
    height: 1.25em;
    margin: 0;
    flex-shrink: 0;
}

.udm-istyle-field .form-check-label {
    margin: 0;
}

.udm-istyle-actions {
    display: flex;
    gap: 0.5em;
    justify-content: flex-end;
    padding-top: 0.4em;
    border-top: 1px dashed var(--bs-border-color);
}