html, body, #app {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    user-select: none; /* Standard syntax */
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    height: 100%;
    margin: 0;
}

/* Root Font-Size Skalierung (UIDisplaySizeEnum - 5 Stufen)
   Setzt die Basis-Schriftgroesse auf body. Alle em-Werte
   in der App skalieren relativ zu diesem Wert. */
body.udm-fontsize-xtrasmall  { font-size: 62.5%;    --udm-base-font-size: 0.625rem; }
body.udm-fontsize-small       { font-size: 68.75%;  --udm-base-font-size: 0.6875rem; }
body.udm-fontsize-medium      { font-size: 80%;     --udm-base-font-size: 0.8rem; }
body.udm-fontsize-large       { font-size: 112.5%;  --udm-base-font-size: 1.125rem; }
body.udm-fontsize-xtralarge   { font-size: 118.75%; --udm-base-font-size: 1.1875rem; }

/* DX-Komponenten setzen feste font-size via CSS-Variablen (z.B. 0.875rem
   bei SizeMode Medium), die die body-Kaskade unterbrechen. Einheitlich auf
   --udm-base-font-size setzen, damit alle DX-Controls die Benutzer-
   Schriftgroesse verwenden. var() statt inherit, weil DX die Variablen
   intern auf Unter-Elementen referenziert. */
.dxbl-splitter       { --dxbl-splitter-font-size: var(--udm-base-font-size); }

/* Splitter-Pane-Inhalt: font-size auf Body-Groesse zuruecksetzen.
   Der Splitter darf die Groesse seiner UI-Elemente (Handle, Separator) steuern,
   aber NICHT die Schriftgroesse des Inhalts seiner Panes beeinflussen. */
.dxbl-splitter .dxbl-splitter-pane-content { font-size: var(--udm-base-font-size); }
.dxbl-text-edit      { --dxbl-text-edit-font-size: var(--udm-base-font-size); }
.dxbl-checkbox       { --dxbl-checkbox-font-size: var(--udm-base-font-size); }
.dxbl-btn            { --dxbl-btn-font-size: var(--udm-base-font-size); }
.dxbl-radio-group    { --dxbl-radio-group-font-size: var(--udm-base-font-size); }
.dxbl-grid           { --dxbl-grid-font-size: var(--udm-base-font-size); }
.dxbl-fl             { --dxbl-fl-font-size: var(--udm-base-font-size); }
.dxbl-dropdown       { --dxbl-dropdown-font-size: var(--udm-base-font-size); }
.dxbl-tabs           { --dxbl-tabs-font-size: var(--udm-base-font-size); }
.dxbl-toolbar        { --dxbl-toolbar-font-size: var(--udm-base-font-size); }
.dxbl-treeview       { --dxbl-treeview-font-size: var(--udm-base-font-size); }
.dxbl-listbox        { --dxbl-listbox-font-size: var(--udm-base-font-size); }
.dxbl-pager          { --dxbl-pager-font-size: var(--udm-base-font-size); }
.dxbl-calendar       { --dxbl-calendar-font-size: var(--udm-base-font-size); }
.dxbl-window-dialog  { --dxbl-window-font-size: var(--udm-base-font-size); }
.dxbl-flyout         { --dxbl-flyout-font-size: var(--udm-base-font-size); }
.dxbl-popup          { --dxbl-popup-font-size: var(--udm-base-font-size); }

/* Symbole in den Schaltflaechen von Eingabefeldern (Loeschen, Auswahlpfeil,
   Kalender, Lookup-Aktion) folgen der Feldschrift, nicht der Icon-Einstellung.
   Grund: Ein Eingabefeld hat keine eigene Hoehe, es ist so hoch wie sein
   groesster Inhalt. FontAwesome-Symbole kamen ueber UiHelper.GetIcon() mit
   fa-xl (1.5em) oder fa-2xl (2em) herein, DevExpress-eigene Symbole mit festen
   1rem. Dadurch waren Auswahlfelder hoeher als Datumsfelder und diese hoeher
   als Zahlenfelder. 1.15em bleibt unter der Texthoehe (Zeilenhoehe 1.4285),
   damit gibt in JEDEM Feld die Textzeile die Hoehe vor. */
.dxbl-text-edit .dxbl-btn .dxbl-image,
.dxbl-text-edit .dxbl-btn > i,
.dxbl-text-edit .dxbl-btn > svg {
    --dxbl-image-height: 1.15em;
    --dxbl-image-width: 1.15em;
    font-size: 1.15em;
    line-height: 1;
    margin-top: 0;
    margin-bottom: 0;
}

@keyframes udmProgressBarAnimation {
    0% {
        transform: translateX(0) scaleX(0);
    }

    40% {
        transform: translateX(0) scaleX(0.4);
    }

    100% {
        transform: translateX(100%) scaleX(0.5);
    }
}

/*body {
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}*/

.no-click {
    pointer-events: none;
}


.dxbl-window {
    box-shadow: 0px 0px 13px 2px #00000066;
    border-radius: 10px;
}

.dxbl-window-dialog {
    border-radius: 10px;
}

.dxbl-window-header {
    border-radius: 10px;
}



/*  Anpassungen für DevExpress Blazor Komponenten, damit 
    die Dialoge konsistenter angezeigt werden. Ohne diese
    Übersteuerung hätten einige der DevExpress-Elemente negative
    margins, was zu großen Problemen im Zusammespiel mit
    anderen UI-Elementen führt!
*/
.dxbl-fl-tab-content {
    padding: 0 !important;
}

.dxbl-fl {
    padding: 0 !important;
    margin: 0 !important;
}

.dxbl-fl-group {
    margin: 0 !important;
    padding: 0.25rem !important;
}

.dxbl-group-body-content {
    padding: 0.25rem !important;
}

.dxbl-fl-item {
    margin: 0 !important;
    padding: 0.25rem !important;
}

.dxbl-row {
    margin: 0 !important;
}




.udm-image-container {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .udm-image-container img {
        width: 100%; /* Volle Breite des Containers */
        height: auto; /* Beibehaltung des Seitenverhältnisses */
        object-fit: contain; /* Kein Zuschneiden, Seitenverhältnis bleibt */
        display: block; /* Entfernt mögliche Whitespace-Lücken */
    }


.dxbl-modal-back {
    background-color: #00000044 !important;
}


/* Für die Anzeige des Rahmens eines Dialog-Elements bei aktivierter Anwender-Hilfe */
.target-with-dot {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1000;
}


/* === Basiszustand (unsichtbar / inaktiv) === */
.grow-dot2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 9999px;
    background: rgb(251 153 0 / 70%);
    box-shadow: 0px 0px 16px 0px rgb(0 0 0 / 50%);
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 3000 !important;
}

.grow-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    background: rgb(130 130 130 / 15%);
    box-shadow: 0px 0px 16px 0px rgb(0 0 0 / 50%);
    pointer-events: none;
    opacity: 0;
    border: 3px red solid;
    transition: opacity 0.25s ease;
    z-index: 1500 !important;
}

    /* === Aktiviert: Wachsen + Pulsieren === */
    .grow-dot.is-active {
        opacity: 1;
        /*animation: dot-in 0.4s cubic-bezier(.1, .7, .2, 1) forwards, dot-pulse 2s ease-in-out 0.4s infinite;*/
    }

/* Wachsen beim Aktivieren */
@keyframes dot-in {
    to {
        width: 30px;
        height: 30px;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Pulsieren nach dem Wachsen */
@keyframes dot-pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.8;
    }
}




.h-10 {
    height: 10%;
}

.h-20 {
    height: 20%;
}

.h-30 {
    height: 30%;
}

.h-40 {
    height: 40%;
}

.h-60 {
    height: 60%;
}

.h-70 {
    height: 70%;
}

.h-80 {
    height: 80%;
}

.h-90 {
    height: 90%;
}



.dxbl-group-header .dxbl-accordion-group-header {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.grid-hide-toolbar .dxbl-grid-toolbar-container {
    display: none;
}


.udm-page-loading-panel {
    position: absolute;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--bs-body-bg-rgb), 0.85);
    justify-content: center;
    align-items: center;
    display: flex;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s ease-out;
}

    .udm-page-loading-panel.isactive {
        visibility: visible;
        opacity: 1;
        transition: visibility 0s, opacity 0.15s ease-in;
    }


    .udm-page-loading-panel::before {
        content: "";
        border: 5px solid var(--bs-border-color);
        border-top: 5px solid var(--bs-primary, #3498db);
        border-radius: 50%;
        width: 48px;
        height: 48px;
        animation: spin 0.8s linear infinite;
    }

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}



.udm-switch-container {
    border: 1px rgba(var(--bs-primary-rgb), 0.5) solid;
    display: inline-flex;
    padding: 0rem;
    cursor: pointer;
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.udm-switch {
    padding: 0.2rem 0.75rem;
    color: var(--bs-gray-700) !important;
    text-wrap: nowrap;
}

.udm-caption-nowrap {
    flex-flow: nowrap !important;
}

.udm-main {
    height: 100%;
    display: flex;
    flex-direction: column;
}


.udm-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
}



.udm-info-area {
    padding: 0.25rem;
    background-color: var(--bs-light);
    text-align: center;
    border-bottom: 1px var(--bs-border-color) solid;
}


.udm-subdialog-card {
    width: 100%;
    margin-top: 0.5rem;
    line-height: 1.2;
}

    .udm-subdialog-card .active-header {
        background-color: rgba(var(--bs-primary-rgb), 0.75) !important;
        color: #fff;
    }

.udm-subdialog-card .active-body {
    background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
}

.udm-subdialog-card:hover {
        border-color: var(--bs-primary);
        background-color: rgba(var(--bs-primary-rgb), 0.1) !important
    }

.udm-hover-button {
    visibility: hidden;
    opacity: 0;
}

.udm-subdialog-card:hover .udm-hover-button {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s;
}


#MapViewControl {
    height: 100%;
    width: 100%;
}

.udm-error-icon {
    color: var(--bs-danger);
    --fa-secondary-opacity: 1.0 !important;
    --fa-primary-color: #fff !important;
    --fa-secondary-color: var(--bs-danger) !important;
}

.udm-icon-beat {
    --fa-beat-fade-opacity: 0.33;
    --fa-beat-fade-scale: 2;
}

.udm-toolbar-separator {
    width: 1px;
    height: 100%;
    background-color: rgba(var(--bs-primary-rgb), 0.3);
}

.udm-predefinedfilter-cbx {
    height: fit-content;
    align-self: center;
    margin-right: 0.25rem;
}

.notoggle svg {
    display: none;
}


.dxbl-list-box {
    height: fit-content;
    min-height: 100px;
    max-height: 400px;
}

/* Feldbezeichnung im Eingabeformular */
.dxbl-fl-cpt {
    font-weight: bold !important;
}


/* Beschriftung im Titelfeld einer Formular-Gruppe */
.dxbl-group-header {
    font-weight: bold !important;
}


.alert {
    border-radius: 0;
}


/* Angabe für das individuelle Filter-DropDown bei Comboboxen im Grid */
.dxbl-grid-filter-menu-dropdown {
    max-height: 700px;
    height: 400px;
}


.udm-toolbar-separator {
    height: 80%;
    width: 1px;
    margin: 0 0.25rem 0 0;
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.dxbl-menu-bar {
    align-items: center;
}

.dxbl-fl-cpt {
    padding: 0;
}

.udm-dialog-toolbar {
    width: 100%;
    align-items: center;
    display: flex;
}


.udm-toolbar-card {
    width: 100%;
    align-items: center;
    display: flex;
    background-color: var(--bs-light);
    padding: 0.15rem;
}


.udm-admin-app-header {
    display: flex;
    height: 3rem;
    width: 100%;
    align-items: center;
    border-radius: 0;
    background-color: var(--bs-dark-bg-subtle);
}


.udm-admin-app-header-navigation {
    max-width: calc(100vh - 80px);
}


.dxbl-grid {
    height: 100%;
    overflow-y: auto;
    border-radius: 0;
}


.udm-main-card-title {
    font-weight: 600;
}

.udm-main-cardicon {
    color: var(--bs-primary);
}

.udm-main-card-description {
    font-size: 1.15em;
    height: 40px;
    line-height: normal;
}

.udm-main-card-infotitle {
    font-size: 1.15em;
    font-weight: 600;
    padding-right: 1rem;
}

.udm-main-card-infotext {
    font-size: 1.15em;
}


.udm-maxwidth-md {
    width: 100%;
    max-width: 576px;
}

.udm-maxwidth-lg {
    width: 100%;
    max-width: 768px;
}

.udm-maxwidth-xl {
    width: 100%;
    max-width: 992px;
}


.dxbl-grid-toolbar-panel {
    padding: 0.5rem !important;
}

.dxbl-grid-toolbar-container {
    padding: 0 !important;
    align-items: center;
}


td {
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
}

.loading-panel-active {
    width: 100%;
    height: 100%;
}







.udm-listdetailview-detail {
    z-index: 9999;
    border-width: 1px;
    border-color: var(--bs-border-color);
    background-color: rgba(var(--bs-primary-rgb), 0.09);
}


.udm-appbar-menu-button {
    margin: 0.25rem;
    border: 0;
    background-color: transparent;
    padding: 0.5rem;
}

.udm-page-toolbar {
    background-color: var(--bs-light);
    height: 42px;
    padding-left: 0.5rem;
    align-items: center;
    display: flex;
}


.udm-page-toolbar-buttons {
    display: flex;
    justify-content: start;
    width: 100%;
}

.udm-page-toolbar-button {
    margin-right: 0.25rem;
    width: 38px;
    height: 38px;
    border-radius: 4px !important;
}


.udm-page-footer {
}

.udm-content-header-container {
    width: calc(100vw - 80px);
    align-self: center;
    justify-content: center;
}

.udm-content-header {
}

.udm-app-title {
    color: var(--bs-secondary-color);
    font-size: 1.15em;
    font-weight: 200;
}

.udm-navstack-title {
    display: flex;
    flex-direction: column;
    margin: 0rem 1rem;
}

.udm-navstack-pagetopic {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--bs-primary);
}

.udm-navstack-pagename {
    margin-top: -0.25rem;
    color: var(--bs-body-color-rgb);
    font-size: 0.85em;
    font-weight: 400;
}

.udm-navstack-pageseparator {
}

.dxbl-popup-cell {
    /*z-index: 2000 !important;*/
}


/* =====================================================================
   DxPopup: Stabiles Flex-Layout (zentral, fuer Admin- + UserClient).
   CssClass="udm-popup-flex" am DxPopup setzen — Header/Footer bleiben fix,
   Body fuellt den Rest und scrollt intern.
   Vorher nur in udm_admin.css; in Shared verschoben damit auch der
   UserClient (z.B. UdmDialogPrintOptionsPopup) das Pattern nutzen kann.
   ===================================================================== */
.udm-popup-flex .dxbl-modal-content {
    max-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.udm-popup-flex .dxbl-popup-body {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
}
.udm-popup-flex .dxbl-popup-header,
.udm-popup-flex .dxbl-popup-footer {
    flex-shrink: 0;
}

.mud-card-header-actions {
    margin: 0 !important;
}

.udm-card-title {
    font-size: 0.9em;
    font-weight: 500;
    color: var(--bs-primary);
}


.udm-card-content {
    background-color: rgba(var(--bs-primary-rgb), 0.09);
    padding: 0.5rem;
}

.udm-card-header {
    background-color: rgba(var(--bs-primary-rgb), 0.15);
    padding: 0.5rem;
}

.udm-element-height-300 {
    height: 300px;
}


.udm-icon-color {
    color: var(--bs-secondary-color);
    font-size: 1.25em;
    margin-left: -4px;
}

.udm-dialog-group-active {
    background-color: rgba(var(--bs-primary-rgb), 0.12) !important;
    padding-bottom: 2px;
}

.udm-hidden {
    display: none;
}

.udm-dialogdesigner-item-badge {
    position: absolute;
    background-color: var(--bs-light);
    width: 20px;
    height: 20px;
    right: -10px;
    top: -10px;
    text-align: center;
    border-radius: 20px;
    z-index: 9999;
}

.udm-dialog-designer-container {
    height: calc(100vh - 70px);
}

.udm-dialogelement-rowseparator {
    flex-basis: 100%;
    height: 1px;
    background-color: var(--bs-border-color);
}

.udm-designer-sidebar {
    background-color: rgba(var(--bs-primary-rgb), 0.12);
    border-left-style: solid;
    border-left-width: 1px;
    border-color: var(--bs-border-color);
}

.udm-form {
    width: 100%;
    height: 100%;
}

.udm-form-tabcontrol {
    height: 100%;
}

.udm-form-tabpage {
    height: 100%;
}

.dxbl-modal-body {
    overflow-y: auto;
}


.udm-contextmenu-title {
    padding: 0.3em 0.75em;
    text-align: left;
    font-weight: 600;
    color: var(--bs-secondary-color);
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.udm-menu-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8em;
    height: 1.8em;
    border-radius: var(--bs-border-radius, 0.375rem);
    background: rgba(var(--bs-primary-rgb), 0.07);
    color: var(--bs-secondary-color);
}

.dxbl-ctx-menu-item {
    border-left: 3px solid transparent;
    padding: 0.1em 0.75em !important;
}

.dxbl-ctx-menu-item:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.06);
    border-left-color: var(--bs-primary);
}

.dxbl-ctx-menu-item:hover .udm-menu-item-icon {
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.15);
}

.udm-menu-item-primary {
    border-left-color: rgba(var(--bs-primary-rgb), 0.3);
    font-weight: 500;
}

.udm-menu-item-primary .udm-menu-item-icon {
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.12);
}

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

.udm-menu-item-large {
    padding: 0;
    margin: 0;
}

.udm-menu-item-begin-group {
    border-top: 1px solid var(--bs-border-color);
}

.dxbl-grid .dxbl-grid-table > tbody > tr > td {
    white-space: nowrap;
}

/* Fixierte Spalten brauchen einen opaken Hintergrund — sonst scheinen
   beim vertikalen Scrollen die scrollenden Zellen durch (sticky positioning
   ohne eigenen Background). Gilt fuer linke und rechte fixe Spalten,
   inkl. der UDM-Row-Action-Spalte. !important noetig, weil das DevExpress-
   Theme `tr:hover td` mit !important und 6% alpha setzt. */
.dxbl-grid .dxbl-grid-table > tbody > tr > td.dxbl-grid-fixed-cell,
.dxbl-grid .dxbl-grid-table > thead > tr > th.dxbl-grid-fixed-cell {
    background-color: var(--bs-body-bg) !important;
}

.dxbl-grid .dxbl-grid-table > tbody > tr:hover > td.dxbl-grid-fixed-cell {
    background-color: color-mix(in srgb, rgb(var(--bs-primary-rgb)) 6%, var(--bs-body-bg)) !important;
}


/* ============================================================
   Grid Appearance — Render-Modi pro Regel (Inline-Pills)
   Wird von <UdmGridCellRenderMode> als <span>-Wrapper INNERHALB
   der Zelle gerendert (analog DynamicMatrix-Chip). Backcolor
   kommt als CSS-Variable --cell-color am Wrapper-Span.
   Hover-Verhalten: TD-Hintergrund aendert sich (DxGrid-Default),
   die Pills bleiben aber als eigenstaendige Inline-Elemente erhalten.
   ChipWithInitial faellt im Grid auf Chip zurueck (Initial-Kreis
   braucht eigene Wert-Aufloesung; bewusste Phase-2-Beschraenkung).
   ============================================================ */

.udm-grid-cell-render {
    display: inline-flex;
    align-items: center;
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* Chip: Flaeche ueber --cell-fill steuerbar (Regel-Einstellung "Farbstaerke"),
   Standard 12%. Der Balken links bleibt bewusst volle Farbe — er traegt die Kontur
   des Chips und soll auch bei schwacher Flaeche stehen. */
.udm-grid-cell-render--chip {
    padding: 1px 8px 1px 6px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--cell-color, #94a3b8) var(--cell-fill, 12%), transparent);
    border-left: 3px solid var(--cell-color, #94a3b8);
    font-weight: 500;
    gap: 0.35em;
}

/* Punkt vor bzw. hinter dem Wert (Regel-Einstellung "Lage").
   Groesse ueber --dot-size, Farbstaerke ueber --cell-fill — beide werden von der
   Regel nur gesetzt, wenn sie vom Standard abweichen. */
.udm-grid-cell-render--dot::before,
.udm-grid-cell-render--dot-end::after {
    content: '';
    display: inline-block;
    width: var(--dot-size, 0.55em);
    height: var(--dot-size, 0.55em);
    border-radius: 50%;
    background: color-mix(in srgb, var(--cell-color, var(--bs-primary, #0d6efd)) var(--cell-fill, 100%), transparent);
    flex-shrink: 0;
}

.udm-grid-cell-render--dot::before {
    margin-right: 0.4em;
}

.udm-grid-cell-render--dot-end::after {
    margin-left: 0.4em;
}

.udm-grid-cell-render--badge-solid,
.udm-grid-cell-render--badge-soft {
    padding: 1px 10px;
    border-radius: 999px;
    font-size: 0.92em;
}

/* Volle Breite mit zentriertem Wert — damit alle Badges einer Spalte gleich breit
   untereinander stehen. Wird nur im Tabellen-Kontext vergeben, nicht in Karten. */
.udm-grid-cell-render--fill {
    display: flex;
    width: 100%;
    justify-content: center;
}

.udm-grid-cell-render--badge-solid {
    background: var(--cell-color, var(--bs-primary, #0d6efd));
    font-weight: 600;
    letter-spacing: 0.01em;
}

.udm-grid-cell-render--badge-soft {
    background: color-mix(in srgb, var(--cell-color, #0d6efd) var(--cell-fill, 22%), transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cell-color, #0d6efd) var(--cell-ring, 55%), transparent);
    font-weight: 500;
}

/* Icon innerhalb der Pill (aus IntegratedStyle.Icon / IconImage) */
.udm-grid-cell-render-icon {
    margin-right: 0.4em;
    flex-shrink: 0;
}

.udm-grid-cell-render-icon-img {
    max-width: 1.1em;
    max-height: 1.1em;
    margin-right: 0.4em;
    flex-shrink: 0;
    vertical-align: middle;
}


/* ───────────────────────────────────────────────────────────────────
   Lookup-Combobox Tabellen-Mode (UdmLookupTableRow / UdmLookupTableCell)

   Layout: CSS-Grid pro Row mit gleichmaessigen Spalten (1fr). Pro Item
   separat, weil DevExpress-DropDown jedes Item eigenstaendig rendert
   (kein Parent-Grid → kein Subgrid moeglich).

   Visuelle Hierarchie:
   - Erste Spalte = Hauptfeld → fett, voller Kontrast
   - Folgende Spalten = Sekundaer → leicht kleiner, muted
   - Zahlen-Spalten tabular-nums → spaltentreue Ziffern
   - Subtile Trennlinien zwischen Zeilen
   - Item-Padding reduziert (gegen DevExpress-Default-Hoehe) per :has()
   ─────────────────────────────────────────────────────────────────── */

/* DxComboBox-Item kompakter, wenn es eine Tabellen-Zeile enthaelt. */
.dxbl-listbox-item:has(> .udm-lookup-table-row),
.dxbl-listbox-item:has(.udm-lookup-table-row) {
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.08));
}

.dxbl-listbox-item:last-child:has(.udm-lookup-table-row) {
    border-bottom: none;
}

.udm-lookup-table-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 1em;
    align-items: center;
    font-size: 0.875em;
    line-height: 1.35;
    width: 100%;
    font-variant-numeric: tabular-nums;
}

.udm-lookup-table-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Erste Spalte = Hauptfeld: fett, voller Kontrast. */
.udm-lookup-table-cell:first-child {
    font-weight: 600;
    color: var(--bs-body-color, inherit);
}

/* Folgende Spalten = Sekundaer-Felder: leichter Ton, etwas kleiner. */
.udm-lookup-table-row > .udm-lookup-table-cell:not(:first-child) {
    color: var(--bs-secondary-color, #5c636a);
    font-size: 0.95em;
}

/* Selected: hellerer, transparent-blauer Background statt DevExpress'
   intensives Default-Blau. Text bleibt body-color → garantiert lesbar
   ueber alle DevExpress-Versionen und Theme-Varianten, unabhaengig
   davon welche genaue Selected-Klasse vergeben wird. Mehrere Selektoren
   als Pattern-Mix (BEM-Modifier, ARIA, alte Klasse, --focused). */
.dxbl-listbox-item--selected:has(.udm-lookup-table-row),
.dxbl-listbox-item[aria-selected="true"]:has(.udm-lookup-table-row),
.dxbl-listbox-item.dxbl-listbox-item-selected:has(.udm-lookup-table-row),
.dxbl-listbox-item--focused:has(.udm-lookup-table-row) {
    background-color: rgba(var(--bs-primary-rgb), 0.15) !important;
    background-image: none !important;
    color: var(--bs-body-color) !important;
}

/* Im Selected-State: muted-Farbe der Sekundaer-Spalten zuruecknehmen,
   damit die helle Selected-BG nicht durch graue Schrift gestoert wird. */
.dxbl-listbox-item--selected .udm-lookup-table-row > .udm-lookup-table-cell,
.dxbl-listbox-item[aria-selected="true"] .udm-lookup-table-row > .udm-lookup-table-cell,
.dxbl-listbox-item.dxbl-listbox-item-selected .udm-lookup-table-row > .udm-lookup-table-cell,
.dxbl-listbox-item--focused .udm-lookup-table-row > .udm-lookup-table-cell {
    color: var(--bs-body-color) !important;
}


/* Wrapper um die TableLookupBox-DxDropDownBox — display:contents macht
   den Wrapper layout-unsichtbar (kein zusaetzliches Box-Model-Element).
   Wir brauchen ihn nur als Event-Capture-Punkt fuer @onkeydown/@onmousedown
   (Auto-Open-on-Type Phase 5c V1.3). */
.udm-lookup-tablebox-wrapper {
    display: contents;
}


/* ───────────────────────────────────────────────────────────────────
   Feld-Aktionsmenue ("…") der Lookup-Combobox — im verankerten DxDropDown.
   Kompakte Zeilenliste (Neu anlegen / Bearbeiten). Font-Reset gegen die
   Subform-Kaskade, damit die Zeilen nicht mitschrumpfen.
   ─────────────────────────────────────────────────────────────────── */
/* Feld-Wrapper: Bezugsrahmen fuer den "…"-Menue-Anker. */
.udm-lookup-fieldwrap {
    position: relative;
}

/* Unsichtbarer 0x0-Anker fuer das "…"-Menue, positioniert an der Stelle des
   "…"-Buttons (rechts, vor dem Aufklapp-Pfeil). Der Offset approximiert die
   Breite von Pfeil + Button; das Menue erscheint dadurch unter dem "…". */
.udm-lookup-actionanchor {
    position: absolute;
    right: 3.2em;
    bottom: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.udm-lookup-actionmenu {
    display: flex;
    flex-direction: column;
    min-width: 12em;
    font-size: var(--udm-base-font-size);
}

.udm-lookup-actionmenu__item {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.45em 0.8em;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--bs-body-color);
}

.udm-lookup-actionmenu__item:hover:not(:disabled) {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
}

.udm-lookup-actionmenu__item:disabled {
    color: var(--bs-secondary-color, #6c757d);
    cursor: default;
    opacity: 0.6;
}

.udm-lookup-actionmenu__item > i {
    width: 1.1em;
    text-align: center;
}


/* ───────────────────────────────────────────────────────────────────
   Lookup-Combobox Tabellen-Mode V2 — Custom-Body (Phase 5c)
   DxDropDownBox als Container + eigene Tabelle. Selected/Hover/Focus
   ueber unsere eigenen Klassen — KEIN DevExpress-Selected-Theme mehr.
   ─────────────────────────────────────────────────────────────────── */
.udm-lookup-custom {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* Hoehe kommt als Inline-Style aus dem Code-Behind — einmalig in
       OnInitialized berechnet auf Basis von Element.DisplayItems.Count
       (Original-Anzahl, NICHT gefiltert). Damit ist die Box bei kleinen
       Lookups kompakt und bei grossen Lookups grosszuegig, bleibt aber
       fix waehrend Filter-Aktionen → DxDropDownBox repositioniert nicht. */
    font-size: var(--udm-base-font-size);

    /* Vom Anwender frei skalierbar (User-Wunsch): per Ziehen an der unteren
       rechten Ecke. resize braucht overflow != visible — der Body hat seinen
       eigenen Scroll, overflow:hidden clippt nur an der (per Drag geaenderten)
       Box-Grenze. Untergrenze verhindert Kollaps, Max gegen den Viewport
       verhindert Ziehen ueber den Bildschirmrand hinaus. Startgroesse
       (height/min-width) kommt weiterhin als Inline-Style. */
    overflow: hidden;
    resize: both;
    min-height: 5em;
    max-width: 92vw;
    max-height: 85vh;
}

/* PopupPicker-Mode: modaler Auswahl-Dialog. Feld-Wrapper haelt die
   schreibgeschuetzte Wert-Box; der Dialog-Body zeigt Hinweis + Tabelle. */
.udm-lookup-popuppicker-wrapper {
    width: 100%;
}

.udm-lookup-popuppicker-hint {
    padding: 0.6em 0.9em;
    margin-bottom: 0.6em;
    font-size: 0.9em;
    color: var(--bs-secondary-color);
    background-color: var(--bs-tertiary-bg, #f6f7f9);
    border-radius: 4px;
}

.udm-lookup-custom-header {
    padding: 0.5em;
    border-bottom: 1px solid var(--bs-border-color);
    flex-shrink: 0;
    background-color: var(--bs-tertiary-bg, #f6f7f9);
}

/* Spalten-Header (Captions) — dieselbe Grid-Struktur wie eine Zeile,
   damit die Spalten exakt unter den Header-Captions liegen. */
.udm-lookup-custom-headerrow {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 1em;
    padding: 0.4em 0.6em;
    background-color: var(--bs-tertiary-bg, #f6f7f9);
    border-bottom: 1px solid var(--bs-border-color);
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--bs-secondary-color, #5c636a);
    flex-shrink: 0;
    user-select: none;
}

.udm-lookup-custom-headercell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

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

.udm-lookup-custom-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 1em;
    align-items: center;
    padding: 0.4em 0.6em;
    cursor: pointer;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    font-size: 0.875em;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    transition: background-color 80ms ease;
}

.udm-lookup-custom-row:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.07);
}

.udm-lookup-custom-row.is-selected {
    background-color: rgba(var(--bs-primary-rgb), 0.15);
}

.udm-lookup-custom-row.is-selected:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.20);
}

/* Tastatur-Fokus (Pfeil-Navigation) — anders als .is-selected!
   .is-selected = gespeicherter Wert; .is-focused = aktuell durch
   Pfeile hervorgehobener Eintrag (noch nicht bestaetigt durch Enter).
   Linker Balken in Primary-Farbe macht den Tastatur-Fokus klar
   erkennbar, ohne die Selected-Faerbung zu ueberlagern. */
.udm-lookup-custom-row.is-focused {
    box-shadow: inset 3px 0 0 0 var(--bs-primary, #0d6efd);
    background-color: rgba(var(--bs-primary-rgb), 0.08);
}

.udm-lookup-custom-row.is-focused.is-selected {
    background-color: rgba(var(--bs-primary-rgb), 0.20);
}

.udm-lookup-custom-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Erste Spalte = Hauptfeld */
.udm-lookup-custom-cell:first-child {
    font-weight: 600;
}

/* Sekundaer-Spalten = muted */
.udm-lookup-custom-row > .udm-lookup-custom-cell:not(:first-child) {
    color: var(--bs-secondary-color, #5c636a);
    font-size: 0.95em;
}

/* Im Selected-State alle Spalten in body-color (Lesbarkeit auf hellem Blau) */
.udm-lookup-custom-row.is-selected > .udm-lookup-custom-cell {
    color: var(--bs-body-color);
}

.udm-lookup-custom-empty {
    padding: 1em;
    text-align: center;
    color: var(--bs-secondary-color, #5c636a);
}

.udm-login-header {
    background-color: rgba(var(--bs-primary-rgb), 0.15) !important;
    font-size: 1.5em !important;
    font-weight: 200 !important;
}

.dxbl-accordion-group-header {
    color: var(--bs-primary) !important;
    padding: 0.5rem !important;
    border-bottom: 1px var(--bs-primary) solid !important;
    font-size: 1.15em !important;
}


.nav-btn-wrapper {
    width: 100%;
    display: flex;
}


.udm_nav-item-title {
    font-size: 1em;
    font-weight: 500;
    text-align: start;
    text-wrap: nowrap;
}

.udm_nav-item-subtitle {
    font-size: 0.85em;
    text-align: start;
    margin-top: -0.25rem;
    text-indent: 0rem;
}

.udm-appbar-menu {
    background-color: rgba(var(--bs-body-color-rgb), 1%);
}

.udm-appbar-popup {
    padding: 0.5rem;
    min-width: 150px;
}

.appbar-toolbar {
    width: 100%;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    background-color: var(--bs-light);
}

.appbar-menu-title {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--bs-primary);
    padding-right: 0.25rem;
}

.appbar-menu-subtitle {
    font-size: 0.85em;
    color: var(--bs-primary);
}

.udm_nav-item-title-2 {
    font-size: 0.85em;
    font-weight: 600;
    text-align: start;
    text-wrap: nowrap;
    padding-right: 0.25rem;
}

.udm_nav-item-subtitle-2 {
    font-size: 0.85em;
    text-align: start;
    text-indent: 0rem;
    text-wrap: wrap;
    margin-top: -0.2rem;
    line-height: normal;
}


.udm-nav-item {
    border-width: 0;
    border-radius: 0;
    border-top-width: 1px;
    border-top-color: var(--bs-border-color);
    border-bottom-width: 1px;
    border-bottom-color: var(--bs-border-color);
    width: 100%;
    padding: 0.5rem;
    padding-left: 0.75rem;
    margin: 0 0 0rem 0;
    justify-content: start;
}

.udm-nav-item-root {
    background-color: transparent;
    border: none;
    margin: 0 0 0 0;
}

.udm-nav-item-child {
    flex-grow: 1;
    border: none;
    margin: 0;
    width: 100%;
    align-items: baseline;
    justify-content: start;
}

.udm-nav-item-child-active {
    border-left: solid;
    border-left-width: 4px;
    border-left-color: var(--bs-primary);
}

.udm-nav-item-child-close {
    background-color: transparent;
    border: none;
    color: var(--bs-secondary-color);
    font-size: 0.875em;
    width: 28px;
    height: 28px;
    margin-left: 0.4rem !important;
}

/* ═══ Navigation: Icon-Badge (Typ-Anzeige) ═══ */

.udm-nav-icon-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.75em;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.35;
    align-self: flex-start;
}

.udm-nav-icon-badge i {
    font-size: 1.4em;
}

.udm-nav-icon-badge .udm-nav-item-icon {
    height: 1.2em;
    width: auto;
    object-fit: contain;
}

/* App-Elemente: Primary */
.udm-nav-icon-badge.t-app {
    background: rgba(var(--bs-primary-rgb), 0.10);
    color: var(--bs-primary-text-emphasis);
}

/* Systemelemente: Dark */
.udm-nav-icon-badge.t-sys {
    background: rgba(var(--bs-dark-rgb), 0.08);
    color: color-mix(in srgb, var(--bs-dark) 80%, var(--bs-secondary));
}

/* System-Aktionen/Jobs: Danger */
.udm-nav-icon-badge.t-job {
    background: rgba(var(--bs-danger-rgb), 0.10);
    color: var(--bs-danger-text-emphasis);
}

/* Dark-Mode-Anpassung fuer System-Badge */
[data-bs-theme="dark"] .udm-nav-icon-badge.t-sys {
    background: rgba(var(--bs-secondary-rgb), 0.15);
    color: var(--bs-secondary-color);
}

/* Navigation: Ketten-Farbmarker (linker Rand zeigt Zugehoerigkeit).
   Gleiche Spezifitaet wie .udm-nav-group-body .udm-nav-item um border:none zu ueberschreiben. */
.udm-nav-group-body .udm-nav-item.udm-nav-chain-0 { border-left: 3px solid #ff9800 !important; }
.udm-nav-group-body .udm-nav-item.udm-nav-chain-1 { border-left: 3px solid #4caf50 !important; }
.udm-nav-group-body .udm-nav-item.udm-nav-chain-2 { border-left: 3px solid #2196f3 !important; }
.udm-nav-group-body .udm-nav-item.udm-nav-chain-3 { border-left: 3px solid #e91e63 !important; }
.udm-nav-group-body .udm-nav-item.udm-nav-chain-4 { border-left: 3px solid #9c27b0 !important; }
.udm-nav-group-body .udm-nav-item.udm-nav-chain-5 { border-left: 3px solid #00bcd4 !important; }

/* Navigation: Titel-Text im Nav-Item (Ellipsis bei Overflow) */
.udm-nav-item .udm-nav-item-subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0;
}

/* Navigation: Ultra-Modus (einzeilig: Titel links, Badge rechts) */
.udm-nav-row-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3em;
}

.udm-nav-row-inline .udm-nav-item-subtitle {
    flex: 1;
    min-width: 0;
}

/* App-Auswahl (Admin): bestehende Card-Styles */
.udm-app-card {
    height: 100%;
}

    .udm-app-card:hover {
        border-color: var(--bs-primary);
        background-color: rgba(var(--bs-primary-rgb), 0.1) !important
    }

.udm-app-card-header {
    display: flex;
    padding: 0.35rem 0.25rem;
}

    .udm-app-card-header .icon {
        box-shadow: 0 0 3px 1px var(--bs-border-color);
        border-radius: 4px;
        padding: 0.25rem;
        margin-left: 0.2rem;
    }

.udm-app-card-header-text {
    margin-left: 0.1rem;
    line-height: 1.2rem;
    font-weight: 600;
    overflow-wrap: anywhere;
    align-self: center;
    flex-grow: 1;
    text-align: start;
    padding-left: 0.5rem;
}

.udm-app-card-body-text {
    font-size: 0.85em;
    padding: 0.4rem 0.6rem;
}

/* App-Auswahl (UserClient): Moderne Icon-Kacheln */
.udm-app-tile-grid {
    --udm-tile-size: 130px;
    --udm-tile-gap: 1.25rem;
    --udm-tile-icon: 40px;
    --udm-tile-font-name: 0.75em;
    --udm-tile-font-desc: 0.65em;
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--udm-tile-size));
    justify-content: center;
    align-content: safe center;
    gap: var(--udm-tile-gap);
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem;
    overflow-y: auto;
}

@media (min-width: 768px) {
    .udm-app-tile-grid {
        --udm-tile-size: 170px;
        --udm-tile-gap: 1.5rem;
        --udm-tile-icon: 56px;
        --udm-tile-font-name: 0.85em;
        --udm-tile-font-desc: 0.7em;
    }
}

@media (min-width: 1200px) {
    .udm-app-tile-grid {
        --udm-tile-size: 200px;
        --udm-tile-gap: 3rem;
        --udm-tile-icon: 64px;
        --udm-tile-font-name: 0.9em;
        --udm-tile-font-desc: 0.75em;
    }
}

.udm-app-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: var(--udm-tile-size);
    height: var(--udm-tile-size);
    overflow: hidden;
    padding: 0.75rem 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background: var(--bs-body-bg);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .udm-app-tile:hover {
        border-color: var(--bs-primary);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        background-color: rgba(var(--bs-primary-rgb), 0.05);
    }

.udm-app-tile-icon {
    flex-shrink: 0;
    margin-bottom: 0.5rem;
}

    .udm-app-tile-icon img {
        width: var(--udm-tile-icon);
        height: var(--udm-tile-icon);
        object-fit: contain;
    }

.udm-app-tile-icon .udm-app-tile-fallback-icon {
    width: var(--udm-tile-icon);
    height: var(--udm-tile-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
    font-size: 2.5em;
}

.udm-app-tile-name {
    font-size: var(--udm-tile-font-name);
    font-weight: 600;
    color: var(--bs-body-color);
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.udm-app-tile-desc {
    font-size: var(--udm-tile-font-desc);
    line-height: 1.2;
    color: var(--bs-secondary-color);
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.25rem;
}

.h-inherit {
    height: inherit;
}

.udm-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.6);
}


/* === Column Enrichment === */

.enrichment-rule-card {
    border-left: 4px solid var(--enrichment-accent, var(--bs-primary));
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
    transition: box-shadow 0.2s ease;
}

.enrichment-rule-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.enrichment-rule-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.enrichment-rule-title {
    font-weight: 500;
}

.enrichment-rule-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ============================================
   Login Page
   ============================================ */

@keyframes udm-login-fade-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes udm-login-spin {
    to { transform: rotate(360deg); }
}

.udm-login-page {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.udm-login-card {
    width: 420px;
    max-width: 95vw;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 22px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03);
    padding: 2.5em 2.2em 1.6em;
    text-align: center;
    color: #333;
    animation: udm-login-fade-in 0.5s ease-out;
}

.udm-login-logo {
    margin-bottom: 2.6em;
}

.udm-login-logo img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 480px) {
    .udm-login-logo img {
        max-width: min(70vw, 200px) !important;
    }
}

.udm-login-headline {
    font-size: 1.5em;
    font-weight: 300;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: #222;
}

.udm-login-subtitle {
    font-size: 1em;
    font-weight: 400;
    margin-top: 0.1em;
    color: #666;
}

.udm-login-actions {
    margin-top: 1.8em;
    padding-top: 1.5em;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.udm-login-providers {
    display: flex;
    flex-direction: column;
    gap: 0.55em;
}

.udm-login-btn-primary {
    width: 100%;
    padding: 0.65em 1em;
    font-size: 1.2em;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: color-mix(in srgb, var(--udm-login-accent, #3498db) 50%, #ccc);
    /* color: #fff; */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    font-family: inherit;
    font-weight: 700;
    transition: all 0.2s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.udm-login-btn-primary:hover {
    background: color-mix(in srgb, var(--udm-login-accent, #3498db) 45%, #ccc);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}

.udm-login-btn-secondary {
    width: 100%;
    padding: 0.6em 1em;
    font-size: 1.2em;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.6);
    color: #444;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    font-family: inherit;
    font-weight: 500;
    transition: all 0.2s;
}

.udm-login-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.udm-login-divider {
    display: flex;
    align-items: center;
    margin: 1.5em 0 0.2em;
    gap: 0.7em;
}

.udm-login-divider-line {
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.07);
}

.udm-login-divider a,
.udm-login-secondary-link {
    color: #666;
    text-decoration: none;
}

.udm-login-divider a {
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.25em;
}

.udm-login-footer {
    margin-top: 1.2em;
}

.udm-login-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e0e0e0;
    border-radius: 50%;
    animation: udm-login-spin 0.8s linear infinite;
    margin: 0 auto 1.2em;
}

.udm-login-error {
    margin-top: 1em;
    padding: 0.75em 1em;
    background: rgba(254, 242, 242, 0.9);
    border: 1px solid #fca5a5;
    border-radius: 8px;
    color: #991b1b;
    font-size: 0.9em;
    text-align: left;
}

.udm-login-error-title {
    font-weight: 500;
    margin-bottom: 0.3em;
}

.udm-login-error-detail {
    font-size: 0.85em;
    color: #b91c1c;
}


/* ===== UdmHeroActionPanel — Position + Sections ===== */

/* Position: Top — Panel oberhalb des VE via CSS-order.
   Verstaerkter Trenner zur darunterliegenden VE-Toolbar:
   - mehr Luft nach unten
   - dezenter Schatten nach unten als visuelles "Heben". */
.udm-context-panel.udm-cp-pos-top {
    order: -1;
    margin-bottom: 1rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.07);
}

/* Position: Bottom (default) — spiegelbildlicher Trenner nach oben.
   Ausgeschlossen: pos-top (oben) und pos-right (Sidebar haengt seitlich). */
.udm-context-panel.udm-cp-pos-bottom {
    margin-top: 1rem;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.07);
}

/* Position: Right — Panel als Sidebar rechts; setzt voraus, dass das Eltern-Layout zur Laufzeit
   flex-direction: row auf dem umschliessenden .d-flex.flex-column annimmt (siehe unten). */
.udm-context-panel.udm-cp-pos-right {
    border-left: 1px solid var(--bs-border-color, #e2e8f0);
    border-top: none;
    min-width: 300px;
    max-width: 420px;
    flex: 0 0 clamp(300px, 28%, 420px);
    overflow-y: auto;
    align-self: stretch;
}

/* Wenn das Panel mit Position=Right gerendert wird, bricht der umschliessende Column-Flex-Container
   die vertikale Anordnung. Der Container ist der outerste .d-flex.flex-column von UiElementControl.
   Wir setzen ihn per :has()-Selector auf row. */
.d-flex.flex-column:has(> .udm-context-panel.udm-cp-pos-right) {
    flex-direction: row !important;
}

/* Sektionen */
.udm-cp-section { }
.udm-cp-section + .udm-cp-section { margin-top: 0.25em; }

.udm-cp-section-title {
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color, #6b7280);
    padding: 0.4em 1em 0.1em;
    font-weight: 600;
}

.udm-cp-template {
    padding: 0.5em 1em 0.7em;
    font-size: 0.95em;
    color: var(--bs-body-color, #1f2937);
    line-height: 1.45;
}

.udm-cp-template p { margin: 0 0 0.3em; }
.udm-cp-template strong { color: var(--bs-primary, #2fa4e7); }

.udm-cp-divider {
    border: none;
    border-top: 1px solid var(--bs-border-color, #e2e8f0);
    margin: 0.3em 1em;
}