.udm-code-editor {
    font-family: 'Red Hat Mono';
    font-size: 0.875em;
}




.udm-messages-accordion {
    margin: 0.25rem;
}

.udm-messages-accordion-item {
    margin: 0.25rem 0rem 0.25rem 0rem;
}

.udm-messages-accordion .dxbl-group-header {
    font-size: 0.85em;
    padding: 0;
    border: none;
}

.udm-messages-accordion .dxbl-group-body {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.udm-messages-accordion .dxbl-accordion-item-content {
    background-color: white;
}

.udm-messages-accordion .dxbl-group {
    border: none;
}

.udm-message-headline {
    font-weight: normal;
    background-color: var(--bs-light);
}

.udm-message-title {
    font-size: 0.85em;
    font-weight: bold;
    padding-bottom: 0.15rem;
}

.udm-message-text {
    font-weight: normal;
    font-style: italic;
}


.udm-message-unread {
    background-color: crimson;
}

.udm-message-hasunread {
    background-color: orange ;
}

.udm-message-read {
    background-color: green;
}


.udm-message-border {
    border: 1px var(--bs-border-color) solid;
}


/* ============================================================
   UDM Dashboard Layout — Hauptmenue des UserClient
   ============================================================ */

/* --- Gruppen-Farbpalette --- */
:root {
    --udm-group-1: #4A90D9;
    --udm-group-2: #6C757D;
    --udm-group-3: #28A745;
    --udm-group-4: #F0AD4E;
    --udm-group-5: #8E44AD;
    --udm-group-6: #E74C3C;
    --udm-group-7: #17A2B8;
}

/* --- Dashboard Container --- */
.udm-dashboard {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

/* --- Suchleiste --- */
.udm-dashboard-search {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    flex-shrink: 0;
}

.udm-dashboard-search .udm-search-input {
    max-width: 480px;
}

/* --- App-Header (grosses App-Icon + Titel + Beschreibung) --- */
.udm-dashboard-appheader {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 1em 1.2em;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    flex-shrink: 0;
    /* Wirt des Konfig-Rahmens (UdmKonfigElementFrame), der über der App aufleuchtet. */
    position: relative;
}

/* Konfig-Einstiege der App: rechts in der Kopfzeile des Hauptmenues. Nur Abweichungen —
   die Schaltflaechen bringen ihre Optik als udm-pageheader-btn mit. */
.udm-dashboard-appheader-konfig {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.25em;
}

.udm-dashboard-appheader-icon {
    flex-shrink: 0;
    width: 3.5em;
    height: 3.5em;
    border-radius: 8px;
    background: rgba(var(--bs-primary-rgb), 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.udm-dashboard-appheader-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.udm-dashboard-appheader-icon-placeholder {
    font-size: 1.8em;
    font-weight: 700;
    color: var(--bs-primary);
    text-transform: uppercase;
}

.udm-dashboard-appheader-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15em;
}

.udm-dashboard-appheader-title {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--bs-body-color);
    line-height: 1.2;
}

.udm-dashboard-appheader-desc {
    font-size: 0.95em;
    color: var(--bs-secondary-color);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* --- Hauptlayout: Main + Sidebar --- */
.udm-dashboard-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.udm-dashboard-main {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    min-width: 0;
}

.udm-dashboard-sidebar {
    /* Breite ueber CSS-Variable steuerbar — Anwender kann via User-Setting oder
       projektspezifischem CSS-Override anpassen.
       Default 400px (Redesign 2026-05-19: vorher 320px war zu eng fuer die
       Nachrichten-v2-Karten mit "..."-Menue + Status-Saeule). */
    width: var(--udm-sidebar-width, 400px);
    flex-shrink: 0;
    overflow-y: auto;
    border-left: 1px solid var(--bs-border-color);
    padding: 1rem;
    background: var(--bs-tertiary-bg);
}

/* --- Hero-Favoriten --- */
.udm-hero-section {
    margin-bottom: 1.25rem;
}

.udm-section-title {
    font-size: 0.9em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bs-secondary-color);
    margin-bottom: 0.75rem;
    padding-left: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.4em;
}

/* --- Favoriten-Titel: Stern-Akzent --- */
.udm-section-title-favorites {
    color: var(--bs-warning, #F0AD4E);
}

.udm-section-title-favorites .udm-section-icon {
    color: var(--bs-warning, #F0AD4E);
    font-size: 0.9em;
}

/* --- Section-Titel: Farbiger Punkt (wenn keine Tabs) --- */
.udm-section-title .udm-group-dot {
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.udm-hero-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.udm-hero-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    background: var(--bs-body-bg);
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.udm-hero-card:hover {
    border-color: var(--bs-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.udm-hero-icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(var(--bs-primary-rgb), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.udm-hero-icon-wrapper img {
    width: 32px;
    height: 32px;
}

.udm-hero-icon-wrapper .udm-hero-icon-placeholder {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--bs-primary);
    text-transform: uppercase;
}

.udm-hero-title {
    font-weight: 600;
    font-size: 1em;
    line-height: 1.2;
    margin-bottom: 0.35rem;
    color: var(--bs-body-color);
}

.udm-hero-description {
    font-size: 0.88em;
    color: var(--bs-secondary-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.2;
}

.udm-hero-fav {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

/* --- Chip-Navigation --- */
.udm-tab-nav {
    display: flex;
    gap: 0.5em;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    padding-left: 0.25rem;
}

.udm-tab-item {
    padding: 0.35em 0.85em;
    font-size: 0.92em;
    font-weight: 500;
    color: var(--bs-secondary-color);
    cursor: pointer;
    border: 1px solid var(--bs-border-color);
    border-radius: 1em;
    background: var(--bs-body-bg);
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    /* Wirt des Konfig-Rahmens (UdmKonfigElementFrame), der über der Menügruppe aufleuchtet. */
    position: relative;
}

.udm-tab-item:hover {
    border-color: var(--bs-secondary-color);
    color: var(--bs-body-color);
}

.udm-tab-item.active {
    color: var(--bs-body-color);
    font-weight: 600;
    border-color: transparent;
}

/* --- Chip Gruppenfarben: Aktiver Chip bekommt dezenten Gruppen-Hintergrund --- */
.udm-tab-item.udm-tab-color-0.active { background: color-mix(in srgb, var(--udm-group-1) 15%, var(--bs-body-bg)); border-color: color-mix(in srgb, var(--udm-group-1) 30%, var(--bs-border-color)); }
.udm-tab-item.udm-tab-color-1.active { background: color-mix(in srgb, var(--udm-group-2) 15%, var(--bs-body-bg)); border-color: color-mix(in srgb, var(--udm-group-2) 30%, var(--bs-border-color)); }
.udm-tab-item.udm-tab-color-2.active { background: color-mix(in srgb, var(--udm-group-3) 15%, var(--bs-body-bg)); border-color: color-mix(in srgb, var(--udm-group-3) 30%, var(--bs-border-color)); }
.udm-tab-item.udm-tab-color-3.active { background: color-mix(in srgb, var(--udm-group-4) 15%, var(--bs-body-bg)); border-color: color-mix(in srgb, var(--udm-group-4) 30%, var(--bs-border-color)); }
.udm-tab-item.udm-tab-color-4.active { background: color-mix(in srgb, var(--udm-group-5) 15%, var(--bs-body-bg)); border-color: color-mix(in srgb, var(--udm-group-5) 30%, var(--bs-border-color)); }
.udm-tab-item.udm-tab-color-5.active { background: color-mix(in srgb, var(--udm-group-6) 15%, var(--bs-body-bg)); border-color: color-mix(in srgb, var(--udm-group-6) 30%, var(--bs-border-color)); }
.udm-tab-item.udm-tab-color-6.active { background: color-mix(in srgb, var(--udm-group-7) 15%, var(--bs-body-bg)); border-color: color-mix(in srgb, var(--udm-group-7) 30%, var(--bs-border-color)); }

/* "Alle"-Chip: neutraler Primary-Akzent */
.udm-tab-item.udm-tab-color-all.active { background: rgba(var(--bs-primary-rgb), 0.1); border-color: rgba(var(--bs-primary-rgb), 0.25); }

/* --- Card-Grid --- */
.udm-card-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    align-items: stretch;
}

/* --- Standard Menu Card --- */
.udm-menu-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--bs-primary);
    border-radius: 8px;
    background: var(--bs-body-bg);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    overflow: hidden;
    /* Wirt des Konfig-Rahmens (UdmKonfigElementFrame), der über dem Arbeitsbereich aufleuchtet. */
    position: relative;
}

.udm-menu-card:hover {
    border-color: var(--bs-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

/* --- Ghost-Einstiege im Konfig-Modus ---
   Setzen nur die ABWEICHUNGEN zur normalen Karte bzw. zum Tab: gestrichelte Umrandung
   (noch nichts da), zentrierter Inhalt, zurueckgenommene Farbe. Groesse kommt aus dem
   Raster (align-items: stretch), deshalb keine eigenen Masse. */
.udm-konfig-ghost-card {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 1em;
    border-style: dashed;
    border-left-style: dashed;
    background: transparent;
    color: var(--bs-secondary-color);
    width: 100%;
}

.udm-konfig-ghost-card:hover {
    color: var(--bs-primary);
}

.udm-konfig-ghost-chip {
    border-style: dashed;
    color: var(--bs-secondary-color);
}

.udm-konfig-ghost-chip:hover {
    color: var(--bs-primary);
}

.udm-menu-card-header {
    display: flex;
    align-items: center;
    padding: 0.6rem 0.6rem 0.3rem;
    gap: 0.5rem;
}

.udm-menu-card-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.udm-menu-card-icon img {
    width: 28px;
    height: 28px;
    border-radius: 4px;
}

.udm-menu-card-icon .udm-card-icon-placeholder {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    font-weight: 700;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.1);
    border-radius: 4px;
    text-transform: uppercase;
}

.udm-menu-card-title {
    flex-grow: 1;
    font-weight: 600;
    font-size: 1em;
    line-height: 1.2;
    color: var(--bs-body-color);
    overflow-wrap: anywhere;
}

.udm-menu-card-fav {
    flex-shrink: 0;
}

/* === Karten-Kennzahl-Badge (Hauptmenue) — GdoViewElementMenuMetric === */
/* Sitzt unten rechts in der Karte (siehe .udm-menu-card-footer). */
.udm-menu-card-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0 0.6rem 0.6rem;
    margin-top: auto;
}

.udm-menu-card-metric {
    font-size: 0.8em;
    font-weight: 700;
    line-height: 1;
    padding: 0.5em;
    border-radius: 999px;
    white-space: nowrap;
}

/* Dezent (Standard) */
.udm-menu-card-metric--standard {
    color: var(--bs-body-color);
    background: rgba(var(--bs-secondary-rgb), 0.18);
}

/* Auffaellig — "es gibt etwas zu tun" */
.udm-menu-card-metric--primary {
    color: var(--bs-white);
    background: var(--bs-primary);
}

.udm-menu-card-metric--success {
    color: var(--bs-white);
    background: var(--bs-success);
}

/* Ampel-Mittelstufe (gelb/amber) */
.udm-menu-card-metric--warning {
    color: var(--bs-dark);
    background: var(--bs-warning);
}

/* Ampel-Oberstufe (rot) */
.udm-menu-card-metric--danger {
    color: var(--bs-white);
    background: var(--bs-danger);
}

/* Gedaempft */
.udm-menu-card-metric--muted {
    color: var(--bs-secondary-color);
    background: rgba(var(--bs-secondary-rgb), 0.1);
}

/* Wertaenderung: kurzer Grow/Glow-Impuls (2s, einmalig) */
.udm-menu-card-metric.udm-agg-changed {
    animation: udm-agg-pulse 2s ease-out 1;
}

@keyframes udm-agg-pulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.55); }
    15%  { transform: scale(1.18); box-shadow: 0 0 0.5em 0.15em rgba(var(--bs-primary-rgb), 0.55); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0); }
}

.udm-menu-card-body {
    padding: 0 0.6rem 0.6rem;
    font-size: 0.88em;
    color: var(--bs-secondary-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

/* --- Gruppen-Farben fuer den linken Streifen --- */
.udm-menu-card.udm-group-color-0 { border-left-color: var(--udm-group-1); }
.udm-menu-card.udm-group-color-1 { border-left-color: var(--udm-group-2); }
.udm-menu-card.udm-group-color-2 { border-left-color: var(--udm-group-3); }
.udm-menu-card.udm-group-color-3 { border-left-color: var(--udm-group-4); }
.udm-menu-card.udm-group-color-4 { border-left-color: var(--udm-group-5); }
.udm-menu-card.udm-group-color-5 { border-left-color: var(--udm-group-6); }
.udm-menu-card.udm-group-color-6 { border-left-color: var(--udm-group-7); }

/* --- Sidebar Bloecke --- */
.udm-sidebar-block {
    margin-bottom: 1.5rem;
}

.udm-sidebar-title {
    font-size: 0.9em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bs-secondary-color);
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.udm-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.udm-sidebar-list-item {
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--bs-border-color);
    cursor: pointer;
}

.udm-sidebar-list-item:last-child {
    border-bottom: none;
}

.udm-sidebar-list-item:hover {
    background: rgba(var(--bs-primary-rgb), 0.05);
}

.udm-sidebar-item-title {
    font-size: 0.95em;
    font-weight: 500;
    color: var(--bs-body-color);
    line-height: 1.3;
}

.udm-sidebar-item-meta {
    font-size: 0.85em;
    color: var(--bs-secondary-color);
}

/* --- Info Messages in Sidebar --- */
.udm-info-card {
    padding: 0.6rem;
    margin-bottom: 0.5rem;
    border-radius: 6px;
    background: var(--bs-body-bg);
    border-left: 3px solid var(--bs-info);
    cursor: pointer;
}

.udm-info-card:hover {
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.udm-info-card.udm-msg-priority-high {
    border-left-color: var(--bs-warning);
}

.udm-info-card-title {
    font-size: 0.95em;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.3em;
}

.udm-info-card-text {
    font-size: 0.88em;
    color: var(--bs-secondary-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.udm-info-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.25rem;
}

.udm-info-card-time {
    font-size: 0.8em;
    color: var(--bs-tertiary-color);
}

/* --- Nachrichtentyp-Unterscheidung --- */
.udm-msg-type-system {
    border-left-color: var(--bs-info);
}

.udm-msg-type-shared {
    border-left-color: var(--bs-success);
}

.udm-msg-type-system.udm-msg-priority-high {
    border-left-color: var(--bs-warning);
}

/* --- Prioritaets-Badge --- */
.udm-msg-prio-badge {
    background-color: var(--bs-warning);
    color: white;
    font-size: 0.7em;
    font-weight: bold;
    border-radius: 50%;
    width: 1.4em;
    height: 1.4em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* --- Aktions-Buttons (Gelesen, Quittieren) --- */
.udm-msg-actions {
    display: flex;
    gap: 0.3em;
}

.udm-msg-read-btn,
.udm-msg-ack-btn {
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    border-radius: 4px;
    padding: 0.15em 0.35em;
    font-size: 0.78em;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.udm-msg-read-btn:hover {
    background-color: var(--bs-success);
    color: white;
    border-color: var(--bs-success);
}

.udm-msg-ack-btn:hover {
    background-color: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
}

/* Typ-Icon links in der Nachrichtenkarte */
.udm-info-card .udm-msg-type-icon {
    flex-shrink: 0;
    font-size: 0.85em;
    opacity: 0.55;
    margin-right: 0.5em;
    margin-top: 0.15em;
}

.udm-msg-type-system .udm-msg-type-icon {
    color: var(--bs-info);
    opacity: 0.7;
}

.udm-msg-type-shared .udm-msg-type-icon {
    color: var(--bs-success);
    opacity: 0.7;
}

/* Flex-Layout fuer Icon + Content */
.udm-info-card.udm-msg-type-system,
.udm-info-card.udm-msg-type-shared {
    display: flex;
    align-items: flex-start;
}

.udm-msg-content {
    flex: 1;
    min-width: 0;
}

/* --- Ungelesene Nachrichten --- */
.udm-msg-unread {
    position: relative;
    border-left-width: 4px;
}

.udm-msg-unread .udm-info-card-title {
    font-weight: bold;
}

.udm-msg-unread.udm-msg-type-shared {
    border-left-color: var(--bs-primary);
}

/* Badge im Sidebar-Titel */
.udm-sidebar-badge {
    background-color: var(--bs-danger);
    color: white;
    border-radius: 0.75em;
    padding: 0.1em 0.45em;
    font-size: 0.78em;
    font-weight: bold;
    margin-left: 0.35em;
    vertical-align: middle;
}

/* --- Nachrichten-Filter --- */
.udm-msg-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    margin-bottom: 0.5em;
}

.udm-msg-filter-chips {
    display: flex;
    gap: 0.25em;
    flex-wrap: wrap;
}

.udm-msg-chip {
    border: 1px solid var(--bs-border-color);
    background: transparent;
    color: var(--bs-body-color);
    border-radius: 1em;
    padding: 0.15em 0.6em;
    font-size: 0.78em;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.udm-msg-chip:hover {
    background-color: var(--bs-tertiary-bg);
}

.udm-msg-chip.active {
    background-color: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
}

.udm-msg-empty {
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: 0.85em;
    padding: 0.75em 0;
}

/* --- Suchergebnis-Info --- */
.udm-search-results-info {
    font-size: 0.85em;
    color: var(--bs-secondary-color);
    margin-bottom: 0.75em;
    padding-left: 0.25rem;
}

/* --- Leer-Zustand --- */
.udm-empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--bs-secondary-color);
    font-size: 0.95em;
}

/* ============================================================
   Responsive: Tablet (< 1200px)
   ============================================================ */
@media (max-width: 1199px) {
    .udm-dashboard-body {
        flex-direction: column;
    }

    .udm-dashboard-sidebar {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--bs-border-color);
    }

    .udm-sidebar-blocks {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1rem;
    }
}

/* ============================================================
   Responsive: Mobile (< 768px)
   ============================================================ */
@media (max-width: 767px) {

    .udm-dashboard-main {
        padding: 0.75rem;
    }

    .udm-hero-grid {
        grid-template-columns: 1fr;
    }

    .udm-hero-card {
        flex-direction: row;
        text-align: left;
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .udm-hero-icon-wrapper {
        width: 44px;
        height: 44px;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .udm-hero-icon-wrapper img {
        width: 24px;
        height: 24px;
    }

    .udm-hero-content {
        flex: 1;
        min-width: 0;
    }

    .udm-hero-fav {
        position: static;
        align-self: center;
    }

    .udm-tab-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .udm-card-grid {
        grid-template-columns: 1fr;
    }

    .udm-dashboard-sidebar {
        padding: 0.75rem;
    }

    .udm-sidebar-blocks {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   Nachrichten-Detailseite (Master-Detail / Phase F)
   ============================================================ */

/* --- Master-Liste: Nachrichtenkarten --- */
.udm-msg-list-card {
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.udm-msg-list-card:hover {
    border-color: var(--bs-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.udm-msg-card-active {
    border-color: var(--bs-primary);
    border-left-width: 3px;
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.udm-msg-list-card.udm-msg-priority-high {
    border-left: 3px solid var(--bs-warning);
}

.udm-msg-unread-badge {
    background-color: var(--bs-danger);
    color: white;
    border-radius: 0.75em;
    padding: 0.1em 0.45em;
    font-size: 0.72em;
    font-weight: bold;
}


/* --- Lesebereich der Nachrichtenzentrale (Preview-Subdialog) ---
   Aufgebaut wie die Lese-Ansicht im Glocken-Popup (udm_nav2026.css,
   .udm2026-notif-popup-read-*): Marken, Titel hervorgehoben, Zeitzeile, Text. */
.udm-msg-preview-read {
    padding: 0.9em 1.2em 1.1em;
}
.udm-msg-preview-title {
    font-size: 1.15em;
    font-weight: 700;
    margin: 0.4em 0 0.25em;
}
.udm-msg-preview-time {
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin-bottom: 0.8em;
    font-size: 0.88em;
    color: var(--bs-secondary-color);
}
.udm-msg-preview-body {
    line-height: 1.6;
    word-break: break-word;
}
.udm-msg-preview-body img {
    max-width: 100%;
    height: auto;
}

.udm-msg-preview-children {
    padding: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

.udm-msg-preview-child-card {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    margin-left: 1rem;
    border-left: 2px solid var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
    border-radius: 0 4px 4px 0;
}

.udm-msg-preview-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

.udm-msg-status-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
}


/* ============================================================
   NACHRICHTEN-UI v2 (Redesign 2026-05-19)
   Siehe deep-link-sharing.md §10.1 (Nachrichtenzentrale) + §10.2 (Sidebar)
   und Prototypen messages-sidebar-varianten-preview.html / messages-center-preview.html

   Wird in 2 Kontexten verwendet:
     - Sidebar im Hauptmenue  (MainPage.razor)
     - Master-Detail-Page     (UdmUserMessagesPage.razor + UdmMessagePreviewPage.razor)
   Beide Kontexte nutzen identische .entry-Karten.

   Designsystem-Konformitaet:
     - UI-Farben: var(--bs-*) (theme-adaptiv, design-color-system.md §3)
     - Status-Farben: --udm-msg-* (theme-unabhaengig fest, §2)
     - Schriftgroessen: em (skaliert mit App-Schrift, design-layout-responsive.md §7)
     - Abstaende: rem (Bootstrap-Konvention)
   ============================================================ */

/* === UDM-Status-Farben (fest, theme-unabhaengig) === */
:root {
    /* Lifecycle */
    --udm-msg-status-new:   #1e6dff;  /* Royal-Blau */
    --udm-msg-status-read:  #16a34a;  /* Smaragd-Gruen */
    --udm-msg-status-defer: #7c6f64;  /* warmes Stone-Grau */

    /* Prioritaet */
    --udm-msg-prio-high:    #d97706;  /* Warning-Orange */
    --udm-msg-prio-high-fg: #92400e;  /* dunkles Braun fuer Lesbarkeit */

    /* Quittierung */
    --udm-msg-ack-warn:     #d97706;  /* offen */
    --udm-msg-ack-done:     #16a34a;  /* erfuellt */

    /* Typ-Tints fuer Template-Icon */
    --udm-msg-type-system:  #4A90D9;  /* aus --udm-group-1 */
    --udm-msg-type-shared:  #28A745;  /* aus --udm-group-3 */
}

/* === Die eine Nachrichten-Karte (UdmMessageCardEntry: Glocken-Popup und Zentrale) ===
   Jede Nachricht steht als eigene weiße Karte auf hellgrauer Fläche (Zentrale:
   .nz2-master, Popup: .udm2026-notif-popup-list), mit Abstand zur nächsten Karte.
   Links bleibt nichts frei: Der Punkt für ungelesen steht vor der Zeit. Offene
   Quittierung rot getönt mit rotem Rand links; die im Lesebereich geöffnete Karte blau
   umrandet. Konzept systemnachrichten-anzeige, Regel 20. */
.udm-msg2-entry {
    position: relative;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    padding: 0.65em 0.85em 0.7em;
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.udm-msg2-entry + .udm-msg2-entry {
    margin-top: 0.5em;
}
.udm-msg2-entry:hover {
    border-color: color-mix(in srgb, var(--bs-primary) 40%, var(--bs-border-color));
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10);
    transform: translateY(-1px);
}
.udm-msg2-entry.needs-ack {
    background: color-mix(in srgb, var(--bs-danger) 5%, var(--bs-body-bg));
    border-color: color-mix(in srgb, var(--bs-danger) 30%, var(--bs-border-color));
    box-shadow: inset 3px 0 0 var(--bs-danger), 0 1px 2px rgba(15, 23, 42, 0.06);
}
.udm-msg2-entry.needs-ack:hover {
    box-shadow: inset 3px 0 0 var(--bs-danger), 0 4px 12px rgba(15, 23, 42, 0.10);
}
/* Geöffnet im Lesebereich (nur Zentrale). Steht nach .needs-ack, damit die Auswahl gewinnt. */
.udm-msg2-entry.selected {
    background: color-mix(in srgb, var(--bs-primary) 6%, var(--bs-body-bg));
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 1px var(--bs-primary);
}
.udm-msg2-entry.selected.needs-ack {
    box-shadow: inset 3px 0 0 var(--bs-danger), 0 0 0 1px var(--bs-primary);
}

/* Kopfzeile: [Checkbox] [Symbol nur bei geteilten] Titel ... Punkt Zeit ["..."] */
.udm-msg2-head {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    min-width: 0;
}
.udm-msg2-type {
    flex: 0 0 auto;
    color: var(--bs-secondary-color);
}
.udm-msg2-title {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--bs-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.udm-msg2-entry.is-unread .udm-msg2-title {
    font-weight: 700;
}
/* Eingangszeit in Worten („vor 1 Monat" statt „1M", das sich wie eine Minute liest). */
.udm-msg2-time {
    flex: 0 0 auto;
    font-size: 0.88em;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}
/* Zwei Zeilen Vorschau. */
.udm-msg2-text {
    margin-top: 0.1em;
    font-size: 0.88em;
    line-height: 1.4;
    color: var(--bs-secondary-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Zustands-Marken (UdmMessageStateTags) in Karte und Lese-Ansicht. */
.udm-msg2-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35em;
    margin-top: 0.4em;
}
/* Anzahl weiterer Nachrichten in der Gruppe (neutrales Info-Chip). */
.udm-msg2-childcount {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    font-size: 0.88em;
    font-weight: 600;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    padding: 0.05em 0.5em;
    flex-shrink: 0;
}

/* === Status-Punkt (Lifecycle) === */
.udm-msg2-status-dot {
    width: 0.95em;
    height: 0.95em;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    border: none;
    padding: 0;
    background: transparent;
}
.udm-msg2-status-dot.new   { background: var(--udm-msg-status-new); }
.udm-msg2-status-dot.read  { background: var(--udm-msg-status-read); }
.udm-msg2-status-dot.defer { background: var(--udm-msg-status-defer); }
/* In der Karte vor der Zeit: gefüllt bei ungelesen oder zurückgestellt; bei gelesen
   unsichtbar, beim Überfahren als Ring (Klick setzt auf ungelesen zurück). Er behält
   seinen Platz, damit beim Überfahren nichts springt. */
.udm-msg2-head .udm-msg2-status-dot {
    align-self: center;
    width: 0.75em;
    height: 0.75em;
}
.udm-msg2-entry:hover .udm-msg2-status-dot:not(.new):not(.defer) {
    box-shadow: inset 0 0 0 2px var(--bs-border-color);
}
/* Checkbox (Mehrfach-Markieren) und "..."-Menü sitzen mittig in der Kopfzeile. */
.udm-msg2-head .udm-msg2-mselect-wrap,
.udm-msg2-head .udm-msg2-more-wrap {
    align-self: center;
    margin-right: 0;
}

/* === Quittierungs-Marke (Liste, Popup) ===
   Nur Anzeige, kein Knopf: quittiert wird nach dem Lesen, im Lesebereich der Zentrale
   oder in der Lese-Ansicht der Glocke (Konzept systemnachrichten-anzeige, Regel 18). */
.udm-msg2-ack-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-size: 0.88em;
    font-weight: 600;
    line-height: 1.4;
    padding: 0.1em 0.55em;
    border-radius: 999px;
    flex-shrink: 0;
    white-space: nowrap;
    border: 1px solid transparent;
}
/* Offen: rot wie das Quittier-Banner, deutlich unterscheidbar vom orangen "Hoch"-Badge. */
.udm-msg2-ack-pill.open {
    background: var(--bs-danger);
    color: #fff;
    border-color: var(--bs-danger);
}
/* Erfuellt: dezenter gruener Zustand, keine Handlungsaufforderung mehr. */
.udm-msg2-ack-pill.done {
    background: color-mix(in srgb, var(--udm-msg-ack-done) 16%, var(--bs-body-bg));
    color: var(--udm-msg-ack-done);
    border-color: color-mix(in srgb, var(--udm-msg-ack-done) 40%, var(--bs-border-color));
}

/* === Prio-Badge "Hoch" === */
.udm-msg2-badge-high {
    display: inline-flex;
    align-items: center;
    font-size: 0.88em;
    font-weight: 600;
    line-height: 1.4;
    padding: 0 0.5em;
    border-radius: 999px;
    flex-shrink: 0;
    white-space: nowrap;
    background: color-mix(in srgb, var(--udm-msg-prio-high) 18%, var(--bs-body-bg));
    color: var(--udm-msg-prio-high-fg);
    border: 1px solid color-mix(in srgb, var(--udm-msg-prio-high) 38%, var(--bs-border-color));
}

/* Marken oben in der Lese-Ansicht (Popup und Zentrale) ohne Abstand nach oben. */
.udm2026-notif-popup-read-body > .udm-msg2-tags,
.udm-msg-preview-read > .udm-msg2-tags {
    margin-top: 0;
}

/* === Aktions-Menue-Trigger ("..." in Zeile 1) === */
.udm-msg2-more-btn {
    width: 1.4em;
    height: 1.4em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--bs-secondary-color);
    border-radius: 0.25em;
    cursor: pointer;
    font-size: 0.9em;
    flex-shrink: 0;
    transition: background 80ms;
    margin-left: auto;
}
.udm-msg2-more-btn:hover {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

/* === Filter-Chip-Bar (Status-Legende) === */
.udm-msg2-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.625rem;
}
.udm-msg2-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    border-radius: 999px;
    padding: 0.15em 0.7em 0.15em 0.55em;
    font-size: 0.88em;
    cursor: pointer;
    line-height: 1.6;
}
.udm-msg2-chip-dot {
    width: 0.95em;
    height: 0.95em;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Filter-Chip-Punktfarben — Lifecycle */
.udm-msg2-chip.chip-new      .udm-msg2-chip-dot { background: var(--udm-msg-status-new); }
.udm-msg2-chip.chip-read     .udm-msg2-chip-dot { background: var(--udm-msg-status-read); }
.udm-msg2-chip.chip-defer    .udm-msg2-chip-dot { background: var(--udm-msg-status-defer); }
.udm-msg2-chip.chip-archived .udm-msg2-chip-dot { background: var(--bs-tertiary-color); }
.udm-msg2-chip.chip-all      .udm-msg2-chip-dot {
    background: none;
    border: 1px dashed var(--bs-border-color);
}

/* Filter-Chip-Punktfarben — Typ */
.udm-msg2-chip.chip-type-system .udm-msg2-chip-dot { background: var(--udm-msg-type-system); }
.udm-msg2-chip.chip-type-shared .udm-msg2-chip-dot { background: var(--udm-msg-type-shared); }

/* Filter-Chip Aktiv-States — getoenter Hintergrund passend zur Statusfarbe */
.udm-msg2-chip.active.chip-new {
    background: color-mix(in srgb, var(--udm-msg-status-new) 22%, var(--bs-body-bg));
    border-color: color-mix(in srgb, var(--udm-msg-status-new) 55%, var(--bs-border-color));
    color: var(--udm-msg-status-new);
    font-weight: 600;
}
.udm-msg2-chip.active.chip-read {
    background: color-mix(in srgb, var(--udm-msg-status-read) 22%, var(--bs-body-bg));
    border-color: color-mix(in srgb, var(--udm-msg-status-read) 55%, var(--bs-border-color));
    color: var(--udm-msg-status-read);
    font-weight: 600;
}
.udm-msg2-chip.active.chip-defer {
    background: color-mix(in srgb, var(--udm-msg-status-defer) 24%, var(--bs-body-bg));
    border-color: color-mix(in srgb, var(--udm-msg-status-defer) 55%, var(--bs-border-color));
    color: var(--udm-msg-status-defer);
    font-weight: 600;
}
.udm-msg2-chip.active.chip-archived {
    background: color-mix(in srgb, var(--bs-tertiary-color) 22%, var(--bs-body-bg));
    border-color: color-mix(in srgb, var(--bs-tertiary-color) 55%, var(--bs-border-color));
    color: var(--bs-secondary-color);
    font-weight: 600;
}
.udm-msg2-chip.active.chip-all {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-secondary-color);
    color: var(--bs-body-color);
    font-weight: 600;
}
.udm-msg2-chip.active.chip-type-system {
    background: color-mix(in srgb, var(--udm-msg-type-system) 12%, var(--bs-body-bg));
    border-color: color-mix(in srgb, var(--udm-msg-type-system) 32%, var(--bs-border-color));
    color: var(--udm-msg-type-system);
    font-weight: 600;
}
.udm-msg2-chip.active.chip-type-shared {
    background: color-mix(in srgb, var(--udm-msg-type-shared) 12%, var(--bs-body-bg));
    border-color: color-mix(in srgb, var(--udm-msg-type-shared) 32%, var(--bs-border-color));
    color: var(--udm-msg-type-shared);
    font-weight: 600;
}

/* === Section-Labels (Heute / Diese Woche / Aelter) === */
.udm-msg2-section-label {
    font-size: 0.88em;
    color: var(--bs-tertiary-color);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 0.625rem 0.25rem 0.25rem;
}
.udm-msg2-section-label:first-of-type { margin-top: 0.25rem; }

/* === Sidebar-Titel als Link zur Nachrichtenzentrale === */
.udm-msg2-title-link {
    cursor: pointer;
    transition: color 100ms;
}
.udm-msg2-title-link:hover {
    color: var(--udm-msg-status-new);
}
.udm-msg2-title-link:hover .udm-msg2-title-link-icon {
    opacity: 1;
}
.udm-msg2-title-link-icon {
    font-size: 0.7em;
    color: var(--bs-secondary-color);
    opacity: 0.5;
    margin-left: auto;
    transition: opacity 100ms;
}

/* === Link "Zur Nachrichtenzentrale" am Sidebar-Ende === */
.udm-msg2-center-link-row {
    text-align: right;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--bs-border-color);
}
.udm-msg2-center-link {
    font-size: 0.88em;
    color: var(--udm-msg-status-new);
    text-decoration: none;
    font-weight: 500;
}
.udm-msg2-center-link:hover {
    text-decoration: underline;
}

/* === Zweireihige Filter-Bar (nur Master-Detail-Page) === */
.udm-msg2-filter-bar {
    padding: 0.625rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.udm-msg2-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}
.udm-msg2-filter-row-label {
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bs-tertiary-color);
    font-weight: 600;
    margin-right: 0.4rem;
    min-width: 3.5rem;
}


/* ============================================================
   V1.b (2026-05-20) — Nachrichtenzentrale Skalierung
   Pagebar / Search-Row / Bulk-Bar / Pagination / Checkbox
   ============================================================ */

/* ============================================================
   Nachrichtenzentrale — Redesign 2026-07 (schlanke Kopfleiste,
   Segment Neu/Alle + "Weitere"-Menü, Auswahl-Modus, dezenter Pager).
   Loest die alten nz-* / udm-msg2-filter-* Leisten ab.
   ============================================================ */
/* Linke Spalte (Master-Liste) dezent von der Lese-Ansicht rechts absetzen.
   Die Kartenliste (.udm-msg2-list) bleibt auf --bs-body-bg und hebt sich ab. */
.nz2-master { background: var(--bs-tertiary-bg); }
/* Filter-Zeile über der Liste: Neu/Alle, Weitere, Suche. Die Werkzeuge (Aktualisieren,
   Mehrere auswählen, Neue System-Nachricht) stehen als UdmActions in der Standard-Leiste
   darüber, wie über dem Lesebereich. */
.nz2-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.7rem;
    flex-wrap: nowrap;
    border-bottom: 1px solid var(--bs-border-color);
}
.nz2-seg { display: flex; border: 1px solid var(--bs-border-color); border-radius: 8px; overflow: hidden; flex: 0 0 auto; }
.nz2-seg-btn {
    border: none; background: transparent; padding: 0.4rem 0.75rem; white-space: nowrap;
    font-weight: 600; cursor: pointer; color: var(--bs-secondary-color);
}
.nz2-seg-btn.active { background: var(--bs-primary); color: #fff; }
.nz2-seg-num { font-weight: 800; margin-left: 0.25em; opacity: 0.85; }
.nz2-search { position: relative; flex: 1 1 auto; min-width: 7em; }
.nz2-search i { position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); font-size: 0.88em; }
.nz2-search input {
    width: 100%; border: 1px solid var(--bs-border-color); border-radius: 8px;
    padding: 0.45rem 0.6rem 0.45rem 2rem; background: var(--bs-body-bg);
}
.nz2-more { position: relative; flex: 0 0 auto; }
.nz2-more-btn {
    border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); border-radius: 8px;
    padding: 0.4rem 0.5rem; font-size: 0.88em; cursor: pointer; color: var(--bs-secondary-color);
    display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; flex: 0 0 auto;
}
.nz2-more-btn.active { border-color: var(--bs-primary); color: var(--bs-primary); }
.nz2-more-btn:hover { color: var(--bs-primary); }
.nz2-more-backdrop { position: fixed; inset: 0; z-index: 1030; background: transparent; }
.nz2-more-menu {
    position: absolute; left: 0; top: calc(100% + 6px); z-index: 1040;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15); min-width: 220px; padding: 0.4rem;
    display: flex; flex-direction: column; gap: 0.15rem;
}
.nz2-more-grp {
    font-size: 0.88em; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--bs-secondary-color); padding: 0.4rem 0.5rem 0.15rem; font-weight: 700;
}
.nz2-more-menu > button {
    text-align: left; border: 1px solid transparent; background: transparent; border-radius: 7px;
    padding: 0.4rem 0.6rem; cursor: pointer; color: var(--bs-body-color);
}
.nz2-more-menu > button:hover { background: var(--bs-tertiary-bg); }
.nz2-more-menu > button.active { background: var(--bs-primary); color: #fff; }
.nz2-sort { border: 1px solid var(--bs-border-color); border-radius: 7px; padding: 0.35rem 0.5rem; margin: 0.15rem 0.5rem 0.3rem; }
.nz2-selbar {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.9rem;
    background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); flex-wrap: wrap;
}
.nz2-selcount { font-weight: 600; }
.nz2-selsep { flex: 1 1 auto; }
.nz2-selbtn {
    border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); border-radius: 7px;
    padding: 0.35rem 0.7rem; font-size: 0.88em; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.nz2-selbtn:hover:not(:disabled) { border-color: var(--bs-primary); color: var(--bs-primary); }
.nz2-selbtn:disabled { opacity: .4; cursor: default; }
.nz2-pager {
    display: flex; align-items: center; justify-content: center; gap: 0.8rem;
    padding: 0.6rem; border-top: 1px solid var(--bs-border-color); flex: 0 0 auto;
}
.nz2-pg { border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); border-radius: 7px; padding: 0.3rem 0.6rem; cursor: pointer; }
.nz2-pg:disabled { opacity: .4; cursor: default; }
.nz2-pg-label { font-size: 0.88em; color: var(--bs-secondary-color); }

/* Pagebar — Title-Zeile oben */
.nz-pagebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}
.nz-pagebar-title {
    font-size: 1em;
    font-weight: 700;
}
.nz-pagebar-title .nz-badge {
    background: color-mix(in srgb, var(--bs-primary) 18%, var(--bs-body-bg));
    color: var(--bs-primary);
    border-radius: 999px;
    padding: 0.05em 0.55em;
    font-size: 0.85em;
    margin-left: 0.4rem;
    font-weight: 600;
}

/* Search-Row (Volltextsuche + Sort) */
.nz-control-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
}
.nz-search {
    flex: 1;
    position: relative;
    max-width: 32rem;
}
.nz-search-icon {
    position: absolute;
    left: 0.7em;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
}
.nz-search-input {
    width: 100%;
    padding: 0.4em 0.75em 0.4em 2.1em;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background: var(--bs-body-bg);
    font-size: 0.95em;
}
.nz-sort {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88em;
    color: var(--bs-secondary-color);
}
.nz-sort-select {
    padding: 0.3em 0.6em;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background: var(--bs-body-bg);
    font-size: 0.92em;
}

/* Bulk-Bar (Selektion aktiv) */
.nz-bulk-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1.25rem;
    background: color-mix(in srgb, var(--bs-primary) 10%, var(--bs-body-bg));
    border-bottom: 1px solid color-mix(in srgb, var(--bs-primary) 30%, var(--bs-border-color));
    font-size: 0.92em;
    flex-wrap: wrap;
}
.nz-bulk-bar-count {
    font-weight: 700;
    color: var(--bs-primary);
}
.nz-bulk-bar-sep {
    width: 1px;
    height: 1.3rem;
    background: color-mix(in srgb, var(--bs-primary) 25%, var(--bs-border-color));
    margin: 0 0.3rem;
}
.nz-bulk-btn {
    padding: 0.3em 0.7em;
    border: 1px solid color-mix(in srgb, var(--bs-primary) 30%, var(--bs-border-color));
    background: var(--bs-body-bg);
    border-radius: 0.375rem;
    font-size: 0.92em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--bs-body-color);
}
.nz-bulk-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--bs-primary) 8%, var(--bs-body-bg));
}
.nz-bulk-btn:disabled {
    color: var(--bs-tertiary-color);
    border-color: var(--bs-border-color);
    cursor: not-allowed;
    opacity: 0.55;
}
.nz-bulk-btn-clear {
    margin-left: auto;
    border-color: var(--bs-border-color);
    color: var(--bs-secondary-color);
}

/* Pagination-Toolbar — direkt ueber der Liste */
.nz-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    font-size: 0.88em;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.nz-pagination-info {
    color: var(--bs-secondary-color);
}
.nz-pagination-pages {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}
.nz-pg-btn {
    min-width: 1.9em;
    padding: 0.2em 0.5em;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    border-radius: 0.25rem;
    font-size: 0.92em;
    color: var(--bs-body-color);
    cursor: pointer;
}
.nz-pg-btn:hover:not(:disabled):not(.active) {
    background: var(--bs-tertiary-bg);
}
.nz-pg-btn.active {
    background: var(--bs-primary);
    color: var(--bs-body-bg);
    border-color: var(--bs-primary);
    font-weight: 600;
    cursor: default;
}
.nz-pg-btn:disabled {
    color: var(--bs-tertiary-color);
    cursor: not-allowed;
    opacity: 0.55;
}
.nz-pg-dots {
    padding: 0 0.2em;
    color: var(--bs-tertiary-color);
    cursor: default;
}
.nz-pagesize {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--bs-secondary-color);
}
.nz-pagesize-select {
    padding: 0.2em 0.5em;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
    background: var(--bs-body-bg);
    font-size: 0.9em;
}

/* Multi-Select-Checkbox in der Karte (Nachrichtenzentrale) */
.udm-msg2-mselect-wrap {
    display: flex;
    align-items: center;
    margin-right: 0.5rem;
}
.udm-msg2-mselect-checkbox {
    width: 1.05em;
    height: 1.05em;
    cursor: pointer;
    accent-color: var(--bs-primary);
}