/* _content/ProbaLab.Web/Components/Layout/MainLayout.razor.rz.scp.css */
/* MainLayout - Shell mit Sidebar (240px) + Topbar (56px) + Content (24px Padding).
   Werte stammen aus agents/designer.md. */


.nl-shell[b-39kv6s1n1v] {
    display: flex;
    min-height: 100vh;
    background: var(--nl-color-bg, #F5F7FA);
    color: var(--nl-color-text-primary, #1A1A2E);
    font-family: var(--nl-font-family, 'Inter', system-ui, sans-serif);
}

.nl-sidebar[b-39kv6s1n1v] {
    width: 240px;
    flex-shrink: 0;
    background: var(--nl-color-bg-sidebar, #F5F7FB);
    color: var(--nl-color-text-primary, #1A1A2E);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    border-right: 1px solid var(--nl-color-sidebar-border, #E1E6F0);
}

.nl-sidebar-brand[b-39kv6s1n1v] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--nl-color-sidebar-border, #E1E6F0);
    flex-shrink: 0;
}

.nl-sidebar-brand-mark[b-39kv6s1n1v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(251, 188, 58, 0.14);
    color: var(--nl-color-brand-gold, #fbbc3a);
    flex-shrink: 0;
}

.nl-sidebar-brand-stack[b-39kv6s1n1v] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.nl-sidebar-brand-text[b-39kv6s1n1v] {
    font-size: var(--nl-font-size-lg, 1.125rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    /* "Proba" in Mittelblau — Brand-Wortmarken-Logik auf hellem Sidebar-BG. */
    color: var(--nl-color-brand-mid, #5678b5);
}

.nl-sidebar-brand-dot[b-39kv6s1n1v] {
    /* "Lab" in Navy — Brand-Wortmarken-Logik (Lab dominant). Auf #F5F7FB-Hintergrund
       sehr gut lesbar (Kontrast ~10:1). */
    color: var(--nl-color-brand-navy, #262766);
}

.nl-sidebar-brand-tenant[b-39kv6s1n1v] {
    font-size: var(--nl-font-size-xs, 0.75rem);
    color: var(--nl-color-text-secondary, #6B7280);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nl-text-warn[b-39kv6s1n1v] {
    color: var(--nl-color-warn, #fbbc3a) !important;
}

/* Dauerhafter Hinweis-Chip: Support-Impersonation läuft nur lesend. Dezent (kein
   Banner-Rot), aber jederzeit sichtbar unter dem Mandanten-Namen. */
.nl-support-readonly-chip[b-39kv6s1n1v] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 4px;
    padding: 1px 8px;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: var(--nl-color-surface-subtle, #F4F6F9);
    color: var(--nl-color-warn, #fbbc3a);
    border: 1px solid var(--nl-color-warn, #fbbc3a);
}

.nl-main[b-39kv6s1n1v] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Topbar wird aktuell nicht verwendet — das Scan-Input ist in die Sidebar
   (NavMenu) gewandert, weil dort sowieso schon das Brand-/Mandanten-Label
   sitzt und die Topbar nur dafür verbraucht würde. CSS-Klassen für eine
   spätere Wiederbelebung der Topbar bewusst nicht entfernt — wenn nichts
   mehr darauf referenziert, sind sie inert. */

.nl-topbar-tenant[b-39kv6s1n1v] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.nl-topbar-tenant-label[b-39kv6s1n1v] {
    font-size: var(--nl-font-size-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--nl-color-text-secondary, #6B7280);
    font-weight: 600;
}

.nl-topbar-tenant-name[b-39kv6s1n1v] {
    font-size: var(--nl-font-size-base, 1rem);
    font-weight: 600;
    color: var(--nl-color-primary, #262766);
}

.nl-topbar-tenant-warn[b-39kv6s1n1v] {
    font-size: var(--nl-font-size-sm, 0.875rem);
    font-weight: 600;
    color: var(--nl-color-warn, #fbbc3a);
}

.nl-topbar-user[b-39kv6s1n1v] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nl-topbar-user-icon[b-39kv6s1n1v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: rgba(38, 39, 102, 0.10);
    color: var(--nl-color-primary, #262766);
}

.nl-topbar-user-name[b-39kv6s1n1v] {
    font-size: var(--nl-font-size-sm, 0.875rem);
    font-weight: 600;
    color: var(--nl-color-text-primary, #1A1A2E);
}

.nl-topbar-login[b-39kv6s1n1v] {
    color: var(--nl-color-primary, #262766);
    font-size: var(--nl-font-size-sm, 0.875rem);
    font-weight: 600;
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(38, 39, 102, 0.25);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.nl-topbar-login:hover[b-39kv6s1n1v] {
    background: rgba(38, 39, 102, 0.08);
    border-color: rgba(38, 39, 102, 0.45);
}

.nl-content[b-39kv6s1n1v] {
    padding: 24px;
    flex: 1;
    min-width: 0;
}

@media (max-width: 768px) {
    .nl-sidebar[b-39kv6s1n1v] {
        width: 60px;
    }
    .nl-sidebar .nl-sidebar-brand-text[b-39kv6s1n1v] {
        display: none;
    }
}

/* Kurze Bildschirme: Kopfhöhe der Sidebar reduzieren, damit die Nav-Gruppen darunter
   mehr vertikalen Raum bekommen (siehe NavMenu.razor.css fuer das Gegenstueck). */
@media (max-height: 700px) {
    .nl-sidebar-brand[b-39kv6s1n1v] {
        min-height: 48px;
        padding: 6px 20px;
    }
}

#blazor-error-ui[b-39kv6s1n1v] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-39kv6s1n1v] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* _content/ProbaLab.Web/Components/Layout/NavMenu.razor.rz.scp.css */
/* NavMenu - Sidebar-Navigation: gruppierte Menuepunkte mit Lucide-Icons,
   Account-Bereich unten gepinnt. Farben aus den --nl-* Tokens (siehe app.css).

   Light-Sidebar-Variante (seit 2026-06-01): heller Hintergrund #F5F7FB,
   Navy-Text als Default. NavLink-Hover: Mittelblau-Tint mit transparenter Fill,
   Active: Gold-Linke-Border + Mittelblau-Tint-BG + Navy-Text. */

.nl-nav[b-0r3q8h8pr0] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.nl-nav-scroll[b-0r3q8h8pr0] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.nl-nav-group[b-0r3q8h8pr0] {
    padding: 2px 0 4px;
}

.nl-nav-group + .nl-nav-group[b-0r3q8h8pr0] {
    border-top: 1px solid var(--nl-color-sidebar-border, #E1E6F0);
    padding-top: 6px;
}

.nl-nav-group-title[b-0r3q8h8pr0] {
    font-size: var(--nl-font-size-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--nl-color-text-secondary, #6B7280);
    font-weight: 600;
    padding: 6px 16px 4px;
}

/* Einklappbare Nav-Gruppen (native <details>/<summary>, JS-frei im Kern) —
   siehe docs/ux/lieferanten-und-menue-restrukturierung.md Abschnitt B.4.
   Klapp-Zustand wird zusaetzlich per localStorage ueber Navigationen hinweg
   gemerkt (wwwroot/js/nav-collapse.js), weil Blazors Enhanced Navigation die
   Sidebar serverseitig neu rendert und den nativen [open]-Zustand sonst
   zuruecksetzen kann. */
.nl-nav-group-summary[b-0r3q8h8pr0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.nl-nav-group-summary[b-0r3q8h8pr0]::-webkit-details-marker {
    display: none;
}

.nl-nav-group-summary[b-0r3q8h8pr0]::marker {
    content: "";
}

.nl-nav-group-caret[b-0r3q8h8pr0] {
    color: var(--nl-color-text-secondary, #6B7280);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

details[open] > .nl-nav-group-summary .nl-nav-group-caret[b-0r3q8h8pr0] {
    transform: rotate(180deg);
}

.nl-nav-group-summary:focus-visible[b-0r3q8h8pr0] {
    outline: 2px solid var(--nl-color-brand-mid, #5678b5);
    outline-offset: -2px;
    border-radius: 4px;
}

/* Globaler Scan-Input in der Sidebar — auf hellem Hintergrund mit
   subtilem Border und transparentem BG, fokussiert mit Mittelblau-Akzent. */
[b-0r3q8h8pr0] .nl-scan-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    margin: 10px 14px 6px;
    padding: 0 8px;
    background: #FFFFFF;
    border: 1px solid var(--nl-color-sidebar-border, #E1E6F0);
    border-radius: 6px;
    transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
    position: relative;
}

[b-0r3q8h8pr0] .nl-scan-bar:hover {
    background: #FFFFFF;
    border-color: rgba(86, 120, 181, 0.4);
}

[b-0r3q8h8pr0] .nl-scan-bar:focus-within {
    background: #FFFFFF;
    border-color: var(--nl-color-brand-mid, #5678b5);
    box-shadow: 0 0 0 2px rgba(86, 120, 181, 0.20);
}

[b-0r3q8h8pr0] .nl-scan-bar-icon {
    display: inline-flex;
    color: var(--nl-color-text-secondary, #6B7280);
    flex-shrink: 0;
    cursor: help;
}

[b-0r3q8h8pr0] .nl-scan-bar:focus-within .nl-scan-bar-icon {
    color: var(--nl-color-brand-mid, #5678b5);
}

[b-0r3q8h8pr0] .nl-scan-bar-input {
    flex: 1 1 auto;
    height: 100%;
    border: 0;
    background: transparent;
    font-size: 13px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    color: var(--nl-color-text-primary, #1A1A2E);
    outline: none;
    min-width: 0;
}

[b-0r3q8h8pr0] .nl-scan-bar-input::placeholder {
    color: var(--nl-color-text-secondary, #9CA3AF);
    font-family: var(--nl-font-family, system-ui);
    font-size: 12px;
    font-style: italic;
}

[b-0r3q8h8pr0] .nl-scan-bar-input:disabled {
    cursor: progress;
}

/* Kamera-Trigger rechts neben dem Eingabefeld. */
[b-0r3q8h8pr0] .nl-scan-bar-cam {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: var(--nl-color-text-secondary, #6B7280);
    cursor: pointer;
    transition: color 0.12s ease, background 0.12s ease;
}

[b-0r3q8h8pr0] .nl-scan-bar-cam:hover {
    color: var(--nl-color-brand-navy, #262766);
    background: rgba(86, 120, 181, 0.10);
}

[b-0r3q8h8pr0] .nl-scan-bar-cam:focus-visible {
    outline: 2px solid var(--nl-color-brand-mid, #5678b5);
    outline-offset: 1px;
}

[b-0r3q8h8pr0] .nl-scan-bar-cam:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

/* Icon-Leiste direkt unter der Scan-Bar (Notifications, Aufgaben, Verwaltung). */
.nl-nav-iconbar[b-0r3q8h8pr0] {
    display: flex;
    gap: 4px;
    margin: 4px 14px 8px;
    padding: 4px;
    background: rgba(86, 120, 181, 0.06);
    border-radius: 6px;
}

[b-0r3q8h8pr0] .nl-nav-iconbar-btn {
    flex: 1;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--nl-color-text-secondary, #6B7280);
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.12s ease, background 0.12s ease;
}

[b-0r3q8h8pr0] .nl-nav-iconbar-btn:hover {
    color: var(--nl-color-brand-navy, #262766);
    background: rgba(86, 120, 181, 0.12);
}

[b-0r3q8h8pr0] .nl-nav-iconbar-btn.active {
    color: var(--nl-color-brand-navy, #262766);
    background: rgba(86, 120, 181, 0.18);
}

[b-0r3q8h8pr0] .nl-nav-iconbar-btn .nl-notification-bell-count,
[b-0r3q8h8pr0] .nl-nav-iconbar-btn .nl-notification-badge {
    position: absolute;
    top: 2px;
    right: 4px;
}

/* Flash-Toast unterhalb der Scan-Bar (Status-Pills bleiben farblich semantisch). */
[b-0r3q8h8pr0] .nl-scan-bar-flash {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 100;
    font-size: 11.5px;
    line-height: 1.3;
    padding: 6px 10px;
    border-radius: 5px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}

[b-0r3q8h8pr0] .nl-scan-bar-flash.is-error {
    background: #FEF4F4;
    color: #991B1B;
    border: 1px solid rgba(220, 38, 38, 0.30);
}

[b-0r3q8h8pr0] .nl-scan-bar-flash.is-success {
    background: #F1FAF4;
    color: #166534;
    border: 1px solid rgba(22, 163, 74, 0.30);
}

[b-0r3q8h8pr0] .nl-nav-link,
.nl-nav-link[b-0r3q8h8pr0] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 16px;
    color: var(--nl-color-text-primary, #1A1A2E);
    text-decoration: none;
    font-size: var(--nl-font-size-sm, 0.875rem);
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    background: transparent;
    border-top: none;
    border-right: none;
    border-bottom: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

[b-0r3q8h8pr0] .nl-nav-link:hover,
.nl-nav-link:hover[b-0r3q8h8pr0] {
    background: rgba(86, 120, 181, 0.10);
    color: var(--nl-color-brand-navy, #262766);
}

[b-0r3q8h8pr0] .nl-nav-link.active {
    background: rgba(86, 120, 181, 0.14);
    color: var(--nl-color-brand-navy, #262766);
    /* Gold-Linke-Border bleibt als einziger sparsamer Brand-Akzent in der Sidebar. */
    border-left-color: var(--nl-color-brand-gold, #fbbc3a);
    font-weight: 600;
}

.nl-nav-icon[b-0r3q8h8pr0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: inherit;
    flex-shrink: 0;
}

.nl-nav-text[b-0r3q8h8pr0] {
    flex: 1;
}

.nl-nav-badge[b-0r3q8h8pr0] {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--nl-color-text-secondary, #6B7280);
    background: rgba(86, 120, 181, 0.10);
    border-radius: 9999px;
    padding: 2px 8px;
}

/* Pulse-Badge fuer ungelesene Benachrichtigungen — rote Farbe, sanftes Atmen. */
.nl-nav-badge-pulse[b-0r3q8h8pr0] {
    color: #fff;
    background: var(--nl-color-nio, #DC2626);
    letter-spacing: 0;
    animation: nl-pulse-badge-b-0r3q8h8pr0 2s ease-in-out infinite;
}

@keyframes nl-pulse-badge-b-0r3q8h8pr0 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}

.nl-nav-link-disabled[b-0r3q8h8pr0] {
    cursor: not-allowed;
    color: var(--nl-color-text-secondary, #9CA3AF);
}

.nl-nav-link-disabled:hover[b-0r3q8h8pr0] {
    background: transparent;
    color: var(--nl-color-text-secondary, #9CA3AF);
}

/* Tenant-Warn-Block (kein Mandant aufgelöst) */
.nl-nav-tenant-warn[b-0r3q8h8pr0] {
    margin: 16px;
    padding: 14px 14px 12px;
    border-radius: var(--nl-radius-md, 10px);
    background: rgba(251, 188, 58, 0.12);
    border: 1px solid rgba(251, 188, 58, 0.40);
    color: var(--nl-color-text-primary, #1A1A2E);
    font-size: 0.85rem;
    line-height: 1.4;
}

.nl-nav-tenant-warn-title[b-0r3q8h8pr0] {
    font-weight: 700;
    color: var(--nl-color-brand-navy, #262766);
    margin-bottom: 4px;
}

.nl-nav-tenant-warn p[b-0r3q8h8pr0] {
    margin: 0 0 10px;
}

.nl-nav-tenant-warn code[b-0r3q8h8pr0] {
    background: rgba(38, 39, 102, 0.08);
    padding: 1px 4px;
    border-radius: 4px;
    color: var(--nl-color-brand-navy, #262766);
    font-size: 0.8rem;
}

.nl-nav-link-recovery[b-0r3q8h8pr0] {
    padding: 6px 8px;
    border-radius: var(--nl-radius-sm, 6px);
    border-left: none !important;
    background: rgba(86, 120, 181, 0.12);
}

.nl-nav-link-recovery:hover[b-0r3q8h8pr0] {
    background: rgba(86, 120, 181, 0.20);
}

/* Account-Bereich unten */
.nl-nav-account[b-0r3q8h8pr0] {
    margin-top: auto;
    padding: 12px 0 12px;
    border-top: 1px solid var(--nl-color-sidebar-border, #E1E6F0);
    flex-shrink: 0;
}

.nl-nav-account-user[b-0r3q8h8pr0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px 6px;
}

.nl-nav-account-avatar[b-0r3q8h8pr0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: rgba(251, 188, 58, 0.18);
    color: var(--nl-color-brand-gold, #fbbc3a);
    flex-shrink: 0;
}

.nl-nav-account-info[b-0r3q8h8pr0] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.nl-nav-account-label[b-0r3q8h8pr0] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--nl-color-text-secondary, #6B7280);
    font-weight: 600;
}

.nl-nav-account-name[b-0r3q8h8pr0] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--nl-color-text-primary, #1A1A2E);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Account-Block als Link zur Profilseite (/konto). Ganzer Block klickbar. */
.nl-nav-account-link[b-0r3q8h8pr0] {
    text-decoration: none;
    color: inherit;
    margin: 0 8px;
    padding: 8px 12px 6px;
    border-radius: 6px;
    border-left: none; /* KEINE Gold-Border wie bei .nl-nav-link.active */
    transition: background-color 0.12s ease;
    cursor: pointer;
}

.nl-nav-account-link:hover[b-0r3q8h8pr0] {
    background: rgba(86, 120, 181, 0.10);
    color: inherit;
    text-decoration: none;
}

.nl-nav-account-link:focus-visible[b-0r3q8h8pr0] {
    outline: 2px solid var(--nl-color-brand-mid, #5678b5);
    outline-offset: -2px;
}

/* Chevron rechts, signalisiert Klickbarkeit. */
.nl-nav-chevron[b-0r3q8h8pr0] {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--nl-color-text-secondary, #6B7280);
}

/* Sprachumschalter DE/EN (siehe CultureEndpoints.MapProbaLabCultureEndpoints). */
.nl-nav-lang[b-0r3q8h8pr0] {
    display: flex;
    gap: 4px;
    margin: 2px 20px 10px;
}

.nl-nav-lang-btn[b-0r3q8h8pr0] {
    flex: 1;
    text-align: center;
    padding: 4px 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--nl-color-text-secondary, #6B7280);
    background: rgba(86, 120, 181, 0.06);
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}

.nl-nav-lang-btn:hover[b-0r3q8h8pr0] {
    color: var(--nl-color-brand-navy, #262766);
    background: rgba(86, 120, 181, 0.16);
}

.nl-nav-lang-btn.active[b-0r3q8h8pr0] {
    color: var(--nl-color-text-inverted, #fff);
    background: var(--nl-color-brand-mid, #5678b5);
}

.nl-nav-logout-form[b-0r3q8h8pr0] {
    margin: 0;
}

.nl-nav-link-logout[b-0r3q8h8pr0] {
    color: var(--nl-color-nio, #DC2626);
}

.nl-nav-link-logout:hover[b-0r3q8h8pr0] {
    color: var(--nl-color-nio, #DC2626);
    background: rgba(220, 38, 38, 0.08);
}

[b-0r3q8h8pr0] .nl-nav-link-login,
.nl-nav-link-login[b-0r3q8h8pr0] {
    color: var(--nl-color-brand-navy, #262766);
    font-weight: 600;
}

/* Kurze Bildschirme (Notebook + sichtbares Browser-/Taskleisten-Chrome, Split-Screen,
   Zoom > 100%): zusaetzliche Reserve zurueckgewinnen. */
@media (max-height: 700px) {
    .nl-nav-scroll[b-0r3q8h8pr0] { padding: 4px 0; }
    .nl-nav-group[b-0r3q8h8pr0] { padding: 1px 0 2px; }
    .nl-nav-group + .nl-nav-group[b-0r3q8h8pr0] { padding-top: 4px; }
}
/* _content/ProbaLab.Web/Components/Shared/AufgabenBadge.razor.rz.scp.css */
/* Pulse-Badge für offene Aufgaben — analog zur NotificationBell.
   Blazor-scoped CSS, gilt nur innerhalb dieser Komponente. */
.nl-nav-badge[b-mgn4e5z4ux] {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    padding: 2px 8px;
}

.nl-nav-badge-pulse[b-mgn4e5z4ux] {
    color: #fff;
    background: var(--nl-color-nio, #DC2626);
    letter-spacing: 0;
    animation: nl-pulse-badge-b-mgn4e5z4ux 2s ease-in-out infinite;
}

@keyframes nl-pulse-badge-b-mgn4e5z4ux {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}
/* _content/ProbaLab.Web/Components/Shared/NotificationBell.razor.rz.scp.css */
/* Pulse-Badge für ungelesene Benachrichtigungen — rote Farbe, sanftes Atmen.
   Eigenes Stylesheet (statt scoped CSS aus NavMenu), weil die Glocke in einer
   eigenen Interactive-Insel rendert. */
.nl-nav-badge[b-ynhp5riv0y] {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    padding: 2px 8px;
}

.nl-nav-badge-pulse[b-ynhp5riv0y] {
    color: #fff;
    background: var(--nl-color-nio, #DC2626);
    letter-spacing: 0;
    animation: nl-pulse-badge-b-ynhp5riv0y 2s ease-in-out infinite;
}

@keyframes nl-pulse-badge-b-ynhp5riv0y {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}
/* _content/ProbaLab.Web/Pages/Admin/AdminLayout.razor.rz.scp.css */
/* Anbieter-Backoffice — eigenständiges, reduziertes Layout. Bewusst kein DevExpress-Theme,
   damit klar ist: hier sind wir außerhalb der Mandanten-Sicht.
   Farbschema: dunkler Topbar wie /admin in den meisten SaaS-Backoffices.

   [Welle 4 Batch III] Alle Farben laufen jetzt über das dedizierte --nl-admin-*-Tokenset
   (app.css :root, Abschnitt "Admin-Backoffice"). Bewusst KEINE Wiederverwendung der
   Mandanten-Tokens (--nl-color-*), auch wenn einzelne Werte zufällig identisch sind —
   das Backoffice soll unabhängig vom Mandanten-Theme weiterentwickelt werden können.
   Ausnahme: --nl-color-brand-gold (Logo-Marke) und --nl-color-warn (Dev-Stub-Hinweis)
   bleiben bewusst an den globalen Marken-Token gekoppelt, da sie dieselbe Markenidentität
   bzw. denselben Hinweis-Akzent wie im Mandanten-Bereich transportieren sollen.
*/

.nl-admin-app[b-429w0ay9he] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--nl-admin-bg, #F5F7FA);
    color: var(--nl-admin-ink, #1A1A2E);
    font-family: var(--nl-font-family, system-ui, -apple-system, sans-serif);
}

.nl-admin-topbar[b-429w0ay9he] {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 52px;
    padding: 0 24px;
    background: var(--nl-admin-topbar-bg, #1B2B45);
    color: var(--nl-admin-ink-inverted, #FFFFFF);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.20);
}

.nl-admin-brand[b-429w0ay9he] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 15px;
}

.nl-admin-brand-mark[b-429w0ay9he] {
    font-size: 18px;
    color: var(--nl-color-brand-gold, #fbbc3a);
}

.nl-admin-brand-suffix[b-429w0ay9he] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    margin-left: 4px;
}

.nl-admin-nav[b-429w0ay9he] {
    display: inline-flex;
    gap: 6px;
    margin-left: 32px;
}

.nl-admin-nav-link[b-429w0ay9he] {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: 13.5px;
    transition: background 0.12s ease, color 0.12s ease;
}

.nl-admin-nav-link:hover[b-429w0ay9he] {
    background: rgba(255, 255, 255, 0.07);
    color: var(--nl-admin-ink-inverted, #FFFFFF);
}

.nl-admin-user[b-429w0ay9he] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
}

/* Sprachumschalter DE/EN im dunklen Topbar */
.nl-admin-lang[b-429w0ay9he] {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
}

.nl-admin-lang-btn[b-429w0ay9he] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 24px;
    padding: 0 8px;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.70);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: background 0.12s ease, color 0.12s ease;
}

.nl-admin-lang-btn:hover[b-429w0ay9he] {
    background: rgba(255, 255, 255, 0.10);
    color: var(--nl-admin-ink-inverted, #FFFFFF);
}

.nl-admin-lang-btn.active[b-429w0ay9he] {
    background: rgba(255, 255, 255, 0.18);
    color: var(--nl-admin-ink-inverted, #FFFFFF);
}

.nl-admin-logout-form[b-429w0ay9he] {
    margin: 0;
}

.nl-admin-logout-btn[b-429w0ay9he] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: rgba(255, 255, 255, 0.85);
    height: 28px;
    padding: 0 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12.5px;
}

.nl-admin-logout-btn:hover[b-429w0ay9he] {
    background: rgba(255, 255, 255, 0.08);
    color: var(--nl-admin-ink-inverted, #FFFFFF);
}

.nl-admin-main[b-429w0ay9he] {
    flex: 1;
    padding: 28px 32px;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

/* ---------------- Page-Shell ---------------- */
[b-429w0ay9he] .nl-admin-page {
    background: var(--nl-admin-surface, #FFFFFF);
    border: 1px solid var(--nl-admin-border, #E5E7EB);
    border-radius: 10px;
    padding: 24px 28px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

[b-429w0ay9he] .nl-admin-page-head {
    margin-bottom: 20px;
    border-bottom: 1px solid var(--nl-admin-divider, #F1F3F5);
    padding-bottom: 14px;
}

[b-429w0ay9he] .nl-admin-eyebrow {
    display: block;
    font-size: 10.5px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--nl-admin-text-secondary, #6B7280);
    margin-bottom: 4px;
}

[b-429w0ay9he] .nl-admin-page-head h1 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--nl-admin-ink, #1A1A2E);
}

[b-429w0ay9he] .nl-admin-page-sub {
    color: var(--nl-admin-text-secondary, #6B7280);
    margin: 4px 0 0;
    font-size: 13.5px;
}

[b-429w0ay9he] .nl-admin-page-actions {
    margin-top: 18px;
}

/* ---------------- KPI Grid ---------------- */
[b-429w0ay9he] .nl-admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

[b-429w0ay9he] .nl-admin-kpi {
    background: var(--nl-admin-surface-muted, #FAFBFC);
    border: 1px solid var(--nl-admin-border, #E5E7EB);
    border-radius: 8px;
    padding: 14px 16px;
}

[b-429w0ay9he] .nl-admin-kpi-label {
    font-size: 11.5px;
    color: var(--nl-admin-text-secondary, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

[b-429w0ay9he] .nl-admin-kpi-wert {
    font-size: 26px;
    font-weight: 600;
    color: var(--nl-admin-ink, #1A1A2E);
}

/* ---------------- Tabelle ---------------- */
/* Scroll-Container fuer breite Tabellen in schmalen Detail-Karten (z. B. Migrations-/
   Support-Historie mit langen Migrationsnamen). Ohne den Wrapper sprengt die Tabelle
   die Karte und ihre rechte Spalte ueberlappt die Nachbarspalte. */
[b-429w0ay9he] .nl-admin-table-scroll {
    overflow-x: auto;
    max-width: 100%;
}

[b-429w0ay9he] .nl-admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

[b-429w0ay9he] .nl-admin-table th {
    text-align: left;
    font-weight: 500;
    color: var(--nl-admin-text-secondary, #6B7280);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 10px;
    border-bottom: 1px solid var(--nl-admin-border, #E5E7EB);
}

[b-429w0ay9he] .nl-admin-table td {
    padding: 10px;
    border-bottom: 1px solid var(--nl-admin-divider, #F1F3F5);
    vertical-align: top;
}

[b-429w0ay9he] .nl-admin-table tr:hover td {
    background: var(--nl-admin-surface-muted, #FAFBFC);
}

[b-429w0ay9he] .nl-admin-pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
}

[b-429w0ay9he] .nl-admin-pill.is-success { background: var(--nl-admin-success-bg, #DCFCE7); color: var(--nl-admin-success-fg, #166534); }
[b-429w0ay9he] .nl-admin-pill.is-info    { background: var(--nl-admin-info-bg, #DBEAFE); color: var(--nl-admin-info-fg, #1E3A8A); }
[b-429w0ay9he] .nl-admin-pill.is-warn    { background: var(--nl-admin-warn-bg, #FEF3C7); color: var(--nl-admin-warn-fg, #92400E); }
[b-429w0ay9he] .nl-admin-pill.is-danger  { background: var(--nl-admin-danger-bg, #FEE2E2); color: var(--nl-admin-danger-fg, #991B1B); }
[b-429w0ay9he] .nl-admin-pill.is-muted   { background: var(--nl-admin-divider, #F1F3F5); color: var(--nl-admin-muted-fg, #4B5563); }

/* ---------------- Buttons + Links ---------------- */
[b-429w0ay9he] .nl-admin-btn {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    border-radius: 6px;
    background: var(--nl-admin-surface, #FFFFFF);
    border: 1px solid var(--nl-admin-border-strong, #D1D5DB);
    color: var(--nl-admin-ink, #1A1A2E);
    font-size: 13.5px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

[b-429w0ay9he] .nl-admin-btn:hover {
    background: var(--nl-admin-bg, #F5F7FA);
    border-color: var(--nl-admin-text-faint, #9CA3AF);
}

[b-429w0ay9he] .nl-admin-btn-primary {
    background: var(--nl-admin-primary, #262766);
    border-color: var(--nl-admin-primary, #262766);
    color: var(--nl-admin-ink-inverted, #FFFFFF);
}

[b-429w0ay9he] .nl-admin-btn-primary:hover {
    background: var(--nl-admin-primary-light, #5678b5);
    border-color: var(--nl-admin-primary-light, #5678b5);
    color: var(--nl-admin-ink-inverted, #FFFFFF);
}

[b-429w0ay9he] .nl-admin-link-sm {
    color: var(--nl-admin-primary, #262766);
    text-decoration: none;
    font-size: 13px;
}

[b-429w0ay9he] .nl-admin-link-sm:hover { text-decoration: underline; }

/* ---------------- Detail-Grid + Description-Liste ---------------- */
[b-429w0ay9he] .nl-admin-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 18px;
}

[b-429w0ay9he] .nl-admin-detail-card {
    background: var(--nl-admin-surface-muted, #FAFBFC);
    border: 1px solid var(--nl-admin-border, #E5E7EB);
    border-radius: 8px;
    padding: 16px 18px;
    /* Grid-Item darf unter seine Inhaltsbreite schrumpfen — sonst sprengt ein langer,
       umbruchloser Wert (Tenant-GUID, DB-Name, Connection-String) die Karte und
       ueberlappt die Nachbarkarte (Grid-Default min-width:auto). */
    min-width: 0;
}

[b-429w0ay9he] .nl-admin-detail-card h2 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--nl-admin-text-secondary, #6B7280);
    margin: 0 0 10px;
    font-weight: 500;
}

[b-429w0ay9he] .nl-admin-dl {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 6px 14px;
    font-size: 13.5px;
    margin: 0;
}

[b-429w0ay9he] .nl-admin-dl dt {
    color: var(--nl-admin-text-secondary, #6B7280);
    font-weight: 400;
    min-width: 0;
    overflow-wrap: anywhere;
}

[b-429w0ay9he] .nl-admin-dl dd {
    margin: 0;
    color: var(--nl-admin-ink, #1A1A2E);
    /* lange, umbruchlose Werte (GUID/DB-Name/URL) umbrechen statt die Spalte zu sprengen */
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ---------------- Login + Banner ---------------- */
[b-429w0ay9he] .nl-admin-login-form {
    margin-top: 16px;
    padding: 16px;
    background: var(--nl-admin-surface-muted, #FAFBFC);
    border: 1px solid var(--nl-admin-border, #E5E7EB);
    border-radius: 8px;
    max-width: 480px;
}

[b-429w0ay9he] .nl-admin-devstub {
    border-style: dashed;
    border-color: var(--nl-color-warn, #fbbc3a);
}

[b-429w0ay9he] .nl-admin-login-label {
    display: block;
    font-size: 12px;
    color: var(--nl-admin-text-secondary, #6B7280);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

[b-429w0ay9he] .nl-admin-input {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--nl-admin-border-strong, #D1D5DB);
    border-radius: 6px;
    font-size: 13.5px;
    margin-bottom: 10px;
    background: var(--nl-admin-surface, #FFFFFF);
}

[b-429w0ay9he] .nl-admin-input:focus {
    outline: 2px solid var(--nl-admin-primary, #262766);
    outline-offset: 1px;
    border-color: var(--nl-admin-primary, #262766);
}

[b-429w0ay9he] .nl-admin-banner {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--nl-admin-warn-bg, #FEF3C7);
    border: 1px solid var(--nl-admin-warn-border, #FCD34D);
    color: var(--nl-admin-warn-fg, #92400E);
    font-size: 13.5px;
    max-width: 720px;
}

[b-429w0ay9he] .nl-admin-banner-danger {
    background: var(--nl-admin-danger-bg, #FEE2E2);
    border-color: var(--nl-admin-danger-border, #FCA5A5);
    color: var(--nl-admin-danger-fg, #991B1B);
}

/* ---------------- Mandantenliste: Such-/Status-Toolbar ---------------- */
/* Wiederverwendet .nl-admin-hinweise-toolbar (Flex-Reihe) aus den System-Hinweisen —
   hier zusaetzlich mit Such-Input, Status-Select und optionalem "Filter zuruecksetzen". */
[b-429w0ay9he] .nl-admin-search-input {
    width: 300px;
    margin-bottom: 0;
}

[b-429w0ay9he] .nl-admin-status-select {
    width: 200px;
    margin-bottom: 0;
}

[b-429w0ay9he] .nl-admin-filter-reset {
    white-space: nowrap;
    background: none;
    border: none;
    padding: 0;
}

/* Mandant-Zelle: Name (fett) + Subdomain (klein, gedaempft) darunter — ersetzt die
   frueheren getrennten Spalten "Subdomain"/"Name". */
[b-429w0ay9he] .nl-admin-table-sub {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--nl-admin-text-secondary, #6B7280);
    background: transparent;
    padding: 0;
}

[b-429w0ay9he] .nl-admin-row-clickable {
    cursor: pointer;
}

/* ---------------- Gefahrenzone (Suspendieren/Kuendigen/Archivieren) ---------------- */
/* Bewusst NICHT vollflaechig rot eingefaerbt (wirkt sonst wie ein Fehlerzustand) —
   nur ein deutlicher roter Rahmen + rote Ueberschrift, Inhalt bleibt normal lesbar. */
[b-429w0ay9he] .nl-admin-dangerzone {
    background: var(--nl-admin-surface, #FFFFFF);
    border: 1.5px solid var(--nl-admin-danger-border, #FCA5A5);
}

[b-429w0ay9he] .nl-admin-dangerzone h2 {
    color: var(--nl-admin-danger-fg, #991B1B);
}

/* ---------------- Action-Bar + Modal ---------------- */
[b-429w0ay9he] .nl-admin-actionbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--nl-admin-divider, #F1F3F5);
}

[b-429w0ay9he] .nl-admin-btn-danger {
    border-color: var(--nl-admin-danger, #DC2626);
    color: var(--nl-admin-danger-fg, #991B1B);
}

[b-429w0ay9he] .nl-admin-btn-danger:hover {
    background: var(--nl-admin-danger-bg, #FEE2E2);
    border-color: var(--nl-admin-danger-strong-border, #B91C1C);
    color: var(--nl-admin-danger-strong-fg, #7F1D1D);
}

[b-429w0ay9he] .nl-admin-modal-shade {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.40);
    z-index: 1040;
}

[b-429w0ay9he] .nl-admin-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(480px, calc(100% - 32px));
    background: var(--nl-admin-surface, #FFFFFF);
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    padding: 20px 24px;
    z-index: 1050;
}

[b-429w0ay9he] .nl-admin-modal h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--nl-admin-ink, #1A1A2E);
}

[b-429w0ay9he] .nl-admin-textarea {
    width: 100%;
    margin-top: 8px;
    font-family: inherit;
    height: auto;
    padding: 8px 10px;
}

[b-429w0ay9he] .nl-admin-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* ---------------- Form-Grid für 2-spaltige Anlage-Forms ---------------- */
/* Responsiv: Karten mit zwei kurzen Feldern stehen nebeneinander, Karten mit
   nur einem Feld füllen die volle Breite; auf schmalen Viewports bricht es
   automatisch einspaltig um. (Früher fälschlich fest 1fr = immer einspaltig.) */
[b-429w0ay9he] .nl-admin-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px 16px;
}

[b-429w0ay9he] .nl-admin-form-grid label {
    display: block;
}

[b-429w0ay9he] .nl-admin-form-grid label small.text-muted {
    margin-top: -4px;
    margin-bottom: 4px;
}

/* ---------------- Hub-Kacheln (AdminHub) ---------------- */
[b-429w0ay9he] .nl-admin-hub-kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 24px;
}

[b-429w0ay9he] .nl-admin-hub-kachel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 18px 16px;
    background: var(--nl-admin-surface, #FFFFFF);
    border: 1px solid var(--nl-admin-border, #E5E7EB);
    border-radius: 10px;
    text-decoration: none;
    color: var(--nl-admin-ink, #1A1A2E);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

[b-429w0ay9he] .nl-admin-hub-kachel:hover {
    border-color: var(--nl-admin-primary, #262766);
    box-shadow: 0 2px 8px rgba(38, 39, 102, 0.10);
}

[b-429w0ay9he] .nl-admin-hub-kachel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--nl-admin-accent-bg, #EEF2FF);
    color: var(--nl-admin-primary, #262766);
    margin-bottom: 4px;
}

[b-429w0ay9he] .nl-admin-hub-kachel-titel {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--nl-admin-ink, #1A1A2E);
}

[b-429w0ay9he] .nl-admin-hub-kachel-sub {
    font-size: 12.5px;
    color: var(--nl-admin-text-secondary, #6B7280);
    line-height: 1.4;
}

/* ---------------- System-Hinweise: Liste ---------------- */
[b-429w0ay9he] .nl-admin-hinweise-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

[b-429w0ay9he] .nl-admin-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--nl-admin-muted-fg, #4B5563);
    cursor: pointer;
    user-select: none;
}

[b-429w0ay9he] .nl-admin-hinweise-table .nl-admin-hinweis-text {
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
}

[b-429w0ay9he] .nl-admin-hinweise-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
}

[b-429w0ay9he] .nl-admin-hinweise-del-btn {
    height: 26px;
    padding: 0 10px;
    font-size: 12.5px;
}

/* ---------------- System-Hinweise: Editor ---------------- */
[b-429w0ay9he] .nl-admin-hinweis-vorschau-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--nl-admin-text-faint, #9CA3AF);
    margin-bottom: 4px;
    margin-top: 4px;
}

[b-429w0ay9he] .nl-admin-hinweis-vorschau {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13.5px;
    margin-bottom: 20px;
    border-left: 4px solid transparent;
}

[b-429w0ay9he] .nl-admin-hinweis-vorschau-info {
    background: var(--nl-admin-info-bg, #DBEAFE);
    border-left-color: var(--nl-admin-info-accent, #3B82F6);
    color: var(--nl-admin-info-fg, #1E3A8A);
}

[b-429w0ay9he] .nl-admin-hinweis-vorschau-warn {
    background: var(--nl-admin-warn-bg, #FEF3C7);
    border-left-color: var(--nl-admin-warn-accent, #F59E0B);
    color: var(--nl-admin-warn-fg, #92400E);
}

[b-429w0ay9he] .nl-admin-hinweis-vorschau-danger {
    background: var(--nl-admin-danger-bg, #FEE2E2);
    border-left-color: var(--nl-admin-danger-accent, #EF4444);
    color: var(--nl-admin-danger-fg, #991B1B);
}

[b-429w0ay9he] .nl-admin-hinweis-form {
    max-width: 720px;
    /* Bewusst einspaltig: Typ (kurz), dann die volle-Breite-Textarea, dann die
       eigene 2-spaltige Datumszeile (.nl-admin-hinweis-datumrow). Das generische
       auto-fit würde Typ + Textarea sonst falsch nebeneinander setzen. */
    grid-template-columns: 1fr;
}

[b-429w0ay9he] .nl-admin-hinweis-textarea {
    height: 90px;
    resize: vertical;
}

[b-429w0ay9he] .nl-admin-hinweis-datumrow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

[b-429w0ay9he] .nl-admin-charcount {
    font-size: 11px;
    color: var(--nl-admin-text-faint, #9CA3AF);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

[b-429w0ay9he] .nl-admin-charcount-warn {
    font-size: 11px;
    color: var(--nl-admin-danger, #DC2626);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

[b-429w0ay9he] .nl-admin-hinweis-preview {
    margin: 12px 0 0;
    padding: 8px 12px;
    border-left: 3px solid var(--nl-admin-border-strong, #D1D5DB);
    background: var(--nl-admin-preview-bg, #F9FAFB);
    border-radius: 0 4px 4px 0;
    font-size: 13.5px;
    color: var(--nl-admin-muted-fg, #4B5563);
    font-style: normal;
}
/* _content/ProbaLab.Web/Pages/Auftraege/ErgebnisMatrix.razor.rz.scp.css */
/* =====================================================================
   Ergebnis-Matrix — Custom HTML-Table mit sticky erstem Header/erster Spalte.
   Designer-Empfehlung: kein DxGrid (sticky-col + Excel-Nav + 2D-Scroll vertragen
   sich schlecht), sondern volle CSS-Kontrolle ueber <table role="grid">.
   ===================================================================== */

.nl-matrix-page[b-c9q0h059js] {
    /* Page-Wrapper darf horizontal scrollen, aber nicht ueber das ganze Layout */
    max-width: 100%;
}

.nl-matrix-hinweis[b-c9q0h059js] {
    background: var(--nl-color-surface-subtle);
    border: 1px solid var(--nl-color-border-default);
    border-radius: 6px;
    padding: 8px 12px;
}
.nl-matrix-hinweis summary[b-c9q0h059js] {
    cursor: pointer;
    user-select: none;
    color: var(--nl-color-text-secondary);
}

/* Scroll-Container ist Eltern des Tables — Position:sticky wirkt innerhalb dieses
   Containers, NICHT relativ zum Viewport. */
.nl-matrix-scroll[b-c9q0h059js] {
    overflow: auto;
    max-height: calc(100vh - 240px);
    border: 1px solid var(--nl-color-border-default);
    border-radius: 6px;
    background: var(--nl-color-bg-card);
}

.nl-matrix-table[b-c9q0h059js] {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    font-size: 13px;
    line-height: 1.3;
}

/* ---- Sticky Header / Erste Spalte / Eck-Zelle ---- */

.nl-matrix-table thead th[b-c9q0h059js] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--nl-color-surface-subtle, #F4F6F9);
    border-bottom: 1px solid var(--nl-color-border-card);
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    color: var(--nl-color-matrix-ink, #4A5160);
    white-space: nowrap;
}

.nl-matrix-table .nl-matrix-corner[b-c9q0h059js],
.nl-matrix-table .nl-matrix-rowhead[b-c9q0h059js] {
    position: sticky;
    left: 0;
    background: var(--nl-color-bg-card);
    z-index: 1;
    border-right: 1px solid var(--nl-color-border-card);
    min-width: 180px;
    max-width: 240px;
}

.nl-matrix-table .nl-matrix-corner[b-c9q0h059js] {
    z-index: 3; /* Eck-Zelle ueber Header- und Spalten-Sticky */
    background: var(--nl-color-surface-subtle, #F4F6F9);
}

.nl-matrix-table .nl-matrix-rowhead[b-c9q0h059js] {
    padding: 6px 10px;
    text-align: left;
    font-weight: normal;
    vertical-align: top;
    font-size: 12px;
}

.nl-matrix-colhead[b-c9q0h059js] {
    text-align: center !important;
    min-width: 90px;
}

.nl-matrix-colhead-kuerzel[b-c9q0h059js] { font-weight: 600; color: var(--nl-color-matrix-colhead-ink, #2A3340); }
.nl-matrix-colhead-einheit[b-c9q0h059js] { font-size: 10px; color: var(--nl-color-matrix-text-faint, #8A8F99); font-weight: 400; }
.nl-matrix-colhead-icon[b-c9q0h059js] { font-size: 11px; color: var(--nl-color-accent, #00A896); margin-top: 2px; }

/* ---- Daten-Zellen ---- */

.nl-matrix-table td[b-c9q0h059js] {
    padding: 4px 6px;
    border-bottom: 1px solid var(--nl-color-border-default, #ECEEF2);
    border-right: 1px solid var(--nl-color-surface-subtle, #F4F6F9);
    text-align: center;
    vertical-align: middle;
    min-width: 90px;
    background: var(--nl-color-bg-card);
    position: relative;
}

.nl-matrix-table tbody tr:hover td[b-c9q0h059js] {
    background: var(--nl-color-surface-hover, #EFF6FF);
}
.nl-matrix-table tbody tr:hover .nl-matrix-rowhead[b-c9q0h059js] {
    background: var(--nl-color-surface-hover, #EFF6FF);
}

/* Zell-Zustaende */

.nl-matrix-cell.is-na[b-c9q0h059js] {
    background: repeating-linear-gradient(
        45deg,
        var(--nl-color-surface-subtle, #F4F6F9),
        var(--nl-color-surface-subtle, #F4F6F9) 4px,
        var(--nl-color-border-default, #ECEEF2) 4px,
        var(--nl-color-border-default, #ECEEF2) 8px
    );
    color: var(--nl-color-matrix-text-faint, #8A8F99);
}

.nl-matrix-cell.is-formula[b-c9q0h059js] {
    background: var(--nl-color-matrix-formula-bg, rgba(0, 168, 150, 0.06));
    color: var(--nl-color-matrix-formula-fg, #0E7C6F);
    font-style: italic;
}

.nl-matrix-cell.is-mehrdeutig[b-c9q0h059js] {
    background: var(--nl-color-matrix-mehrdeutig-bg, #FFF8E6);
    color: var(--nl-color-matrix-mehrdeutig-fg, #8B5E00);
}

.nl-matrix-cell.is-readonly[b-c9q0h059js] {
    background: var(--nl-color-surface-subtle);
    color: var(--nl-color-matrix-ink, #4A5160);
}
.nl-matrix-cell.is-readonly.is-freigegeben[b-c9q0h059js] {
    border-left: 3px solid var(--nl-color-io, #16A34A);
}
.nl-matrix-cell.is-readonly.is-gesperrt[b-c9q0h059js] {
    border-left: 3px solid var(--nl-color-nio, #DC2626);
}

.nl-matrix-cell.is-erfasst[b-c9q0h059js] {
    background: var(--nl-color-bg-card, #FFFFFF);
}

.nl-matrix-cell.is-leer[b-c9q0h059js] {
    background: var(--nl-color-bg-card, #FFFFFF);
}

/* ---- Inputs ---- */

.nl-matrix-input[b-c9q0h059js] {
    width: 70px;
    padding: 3px 6px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    font-size: 13px;
    text-align: right;
    color: var(--nl-color-text-primary);
    transition: border-color 0.12s ease, background-color 0.12s ease;
}
.nl-matrix-input:hover[b-c9q0h059js] {
    background: var(--nl-color-bg-card, #FFFFFF);
    border-color: var(--nl-color-border-card);
}
.nl-matrix-input:focus[b-c9q0h059js] {
    outline: none;
    background: var(--nl-color-bg-card, #FFFFFF);
    border-color: var(--nl-color-primary);
    box-shadow: 0 0 0 1px var(--nl-color-primary);
}

.nl-matrix-na[b-c9q0h059js],
.nl-matrix-mehrdeutig[b-c9q0h059js],
.nl-matrix-formula[b-c9q0h059js],
.nl-matrix-readonly[b-c9q0h059js] {
    display: inline-block;
    min-width: 24px;
    font-variant-numeric: tabular-nums;
}

/* ---- Bewertungs-Indikatoren ---- */

.nl-matrix-badge[b-c9q0h059js] {
    display: inline-block;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    color: var(--nl-color-text-inverted, #FFFFFF);
    line-height: 14px;
    min-width: 14px;
    text-align: center;
}
.nl-matrix-badge.nl-badge-io[b-c9q0h059js]   { background: var(--nl-color-io, #16A34A); }
.nl-matrix-badge.nl-badge-warn[b-c9q0h059js] { background: var(--nl-color-warn, #D97706); }
.nl-matrix-badge.nl-badge-nio[b-c9q0h059js]  { background: var(--nl-color-nio, #DC2626); }
.nl-matrix-badge.nl-badge-nb[b-c9q0h059js]   { background: var(--nl-color-nb, #6B7280); }
.nl-matrix-badge.nl-badge-informativ[b-c9q0h059js] { background: var(--nl-color-informativ, #475569); }

.nl-matrix-busy[b-c9q0h059js],
.nl-matrix-fehler[b-c9q0h059js] {
    display: inline-block;
    margin-left: 4px;
    font-size: 11px;
}
.nl-matrix-fehler[b-c9q0h059js] {
    color: var(--nl-color-nio, #DC2626);
    font-weight: 700;
    cursor: help;
}

/* ---- Spalten-Filldown (Header-Trigger + Inline-Input) ---- */

.nl-matrix-filldown-trigger[b-c9q0h059js] {
    margin-top: 3px;
    width: 18px;
    height: 16px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--nl-color-text-secondary, #6B7280);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.12s ease, color 0.12s ease;
}
.nl-matrix-filldown-trigger:hover[b-c9q0h059js] {
    background: var(--nl-color-surface-hover, #EFF6FF);
    color: var(--nl-color-primary, #1B4F8A);
}

.nl-matrix-filldown[b-c9q0h059js] {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    align-items: center;
}
.nl-matrix-filldown-input[b-c9q0h059js] {
    flex: 1;
    min-width: 80px;
    padding: 2px 6px;
    border: 1px solid var(--nl-color-primary, #1B4F8A);
    border-radius: 3px;
    font-size: 12px;
    text-align: right;
    background: var(--nl-color-bg-card, #FFFFFF);
}
.nl-matrix-filldown .btn-sm[b-c9q0h059js] {
    padding: 2px 6px;
    font-size: 11px;
    min-width: 24px;
}

/* ---- Read-only Zelle als Klick-Button (Korrektur einleiten) ---- */

.nl-matrix-readonly-btn[b-c9q0h059js] {
    background: transparent;
    border: 1px solid transparent;
    padding: 1px 6px;
    border-radius: 3px;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.nl-matrix-readonly-btn:hover[b-c9q0h059js] {
    background: var(--nl-color-bg-card, #FFFFFF);
    border-color: var(--nl-color-border-card, #DDE1E6);
}
.nl-matrix-readonly-icon[b-c9q0h059js] {
    margin-left: 4px;
    opacity: 0.5;
    font-size: 10px;
    transition: opacity 0.12s ease;
}
.nl-matrix-readonly-btn:hover .nl-matrix-readonly-icon[b-c9q0h059js] {
    opacity: 1;
}

/* ---- Footer ---- */

.nl-matrix-footer[b-c9q0h059js] {
    border-top: 1px dashed var(--nl-color-border-default);
    padding-top: 6px;
}

/* ---- Mobile: Matrix-Page ist bewusst Desktop-only ---- */

@media (max-width: 767.98px) {
    .nl-matrix-scroll[b-c9q0h059js] { display: none; }
    .nl-matrix-hinweis[b-c9q0h059js] { display: none; }
    .nl-matrix-footer[b-c9q0h059js] { display: none; }
}
/* _content/ProbaLab.Web/Pages/Benachrichtigungen.razor.rz.scp.css */
/* Benachrichtigungen — Outlook-inspirierte Liste mit Tages-Gruppen,
   farbig markierten ungelesenen Items und Hover-Actions.
   Designtokens kommen aus app.css (--nl-color-*, --nl-font-size-*). */

.nl-benachr-page[b-p37mkaksmf] {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---------------- Header ---------------- */

.nl-benachr-head[b-p37mkaksmf] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.nl-benachr-eyebrow[b-p37mkaksmf] {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    color: var(--nl-color-text-secondary);
    font-weight: 600;
    margin-bottom: 4px;
}

.nl-benachr-head h1[b-p37mkaksmf] {
    margin: 0 0 4px 0;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--nl-color-text-primary);
}

.nl-benachr-head-actions[b-p37mkaksmf] {
    display: flex;
    gap: 8px;
}

/* ---------------- Filter-Chips ---------------- */

.nl-benachr-filter[b-p37mkaksmf] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.nl-chip-count[b-p37mkaksmf] {
    display: inline-block;
    min-width: 18px;
    text-align: center;
    padding: 0 6px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.25);
    font-size: 0.7em;
}

/* ---------------- Gruppen ---------------- */

.nl-benachr-gruppe[b-p37mkaksmf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nl-benachr-gruppe-titel[b-p37mkaksmf] {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--nl-color-text-secondary);
    margin: 16px 4px 4px 4px;
}

.nl-benachr-gruppe:first-of-type .nl-benachr-gruppe-titel[b-p37mkaksmf] {
    margin-top: 4px;
}

.nl-benachr-liste[b-p37mkaksmf] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ---------------- Item ---------------- */

.nl-benachr-item[b-p37mkaksmf] {
    position: relative;
    display: grid;
    grid-template-columns: 4px 14px 28px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 0;
    background: var(--nl-color-bg-card);
    border: 1px solid rgba(15, 48, 87, 0.05);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.nl-benachr-item:hover[b-p37mkaksmf] {
    background: #F9FAFB;
    border-color: rgba(15, 48, 87, 0.12);
    box-shadow: 0 1px 3px rgba(15, 48, 87, 0.06);
}

.nl-benachr-item:hover .nl-benachr-actions[b-p37mkaksmf] {
    opacity: 1;
    transform: translateX(0);
}

/* Linker farbiger Balken — nur bei ungelesenen Items sichtbar */
.nl-benachr-leiste[b-p37mkaksmf] {
    grid-column: 1;
    align-self: stretch;
    background: transparent;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.nl-benachr-item-ungelesen .nl-benachr-leiste[b-p37mkaksmf] {
    background: var(--typ-color, var(--nl-color-primary));
}

/* Ungelesen-Punkt */
.nl-benachr-dot[b-p37mkaksmf] {
    grid-column: 2;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid rgba(15, 48, 87, 0.18);
    justify-self: center;
}

.nl-benachr-dot-aktiv[b-p37mkaksmf] {
    background: var(--typ-color, var(--nl-color-primary));
    border-color: var(--typ-color, var(--nl-color-primary));
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

/* Typ-Icon */
.nl-benachr-icon[b-p37mkaksmf] {
    grid-column: 3;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.04);
    color: var(--typ-color, var(--nl-color-text-secondary));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 700;
}

.nl-benachr-item-ungelesen .nl-benachr-icon[b-p37mkaksmf] {
    background: color-mix(in srgb, var(--typ-color) 12%, transparent);
}

/* Body */
.nl-benachr-body[b-p37mkaksmf] {
    grid-column: 4;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nl-benachr-zeile1[b-p37mkaksmf] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}

.nl-benachr-titel[b-p37mkaksmf] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--nl-color-text-primary);
    font-size: var(--nl-font-size-sm, 0.875rem);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nl-benachr-item-ungelesen .nl-benachr-titel[b-p37mkaksmf] {
    font-weight: 700;
}

.nl-benachr-zeit[b-p37mkaksmf] {
    flex: 0 0 auto;
    color: var(--nl-color-text-secondary);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.nl-benachr-beschreibung[b-p37mkaksmf] {
    color: var(--nl-color-text-secondary);
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------------- Hover-Actions ---------------- */

.nl-benachr-actions[b-p37mkaksmf] {
    grid-column: 5;
    display: flex;
    gap: 4px;
    opacity: 0;
    transform: translateX(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.nl-benachr-action[b-p37mkaksmf] {
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--nl-color-text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}

.nl-benachr-action:hover[b-p37mkaksmf] {
    background: rgba(15, 48, 87, 0.07);
    color: var(--nl-color-text-primary);
    border-color: rgba(15, 48, 87, 0.12);
}

.nl-benachr-action-danger:hover[b-p37mkaksmf] {
    background: rgba(220, 38, 38, 0.08);
    color: var(--nl-color-nio, #DC2626);
    border-color: rgba(220, 38, 38, 0.20);
}

/* Auf Touch-Geräten Actions immer einblenden — kein Hover. */
@media (hover: none) {
    .nl-benachr-actions[b-p37mkaksmf] {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ---------------- Empty-State ---------------- */

.nl-benachr-empty[b-p37mkaksmf] {
    background: var(--nl-color-bg-card);
    border: 1px dashed rgba(15, 48, 87, 0.15);
    border-radius: 12px;
    padding: 48px 24px;
    text-align: center;
    color: var(--nl-color-text-secondary);
}

.nl-benachr-empty-icon[b-p37mkaksmf] {
    font-size: 2.4rem;
    margin-bottom: 12px;
    opacity: 0.6;
}

.nl-benachr-empty-title[b-p37mkaksmf] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--nl-color-text-primary);
    margin-bottom: 4px;
}

.nl-benachr-empty-sub[b-p37mkaksmf] {
    font-size: 0.85rem;
}
/* _content/ProbaLab.Web/Pages/Einstellungen/Agenten.razor.rz.scp.css */
.nl-agent-status[b-eacz292fem] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.nl-agent-status-wartetaufaktivierung[b-eacz292fem] { background: var(--nl-color-warn, #D97706); }
.nl-agent-status-aktiv[b-eacz292fem]                { background: #16A34A; }
.nl-agent-status-deaktiviert[b-eacz292fem]          { background: var(--nl-color-text-secondary, #6B7280); }

.nl-agent-token[b-eacz292fem] {
    background: #1A1A2E;
    color: #A8E6CF;
    padding: 12px 16px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 1rem;
    word-break: break-all;
    user-select: all;
}
/* _content/ProbaLab.Web/Pages/Einstellungen/Benachrichtigungen.razor.rz.scp.css */
/* Benachrichtigungen-Einstellungen — pro Notification-Typ eine Karte
   mit Channel-Toggles und aufklappbarem Filter-Bereich. */

.nl-pref-list[b-bky4oom9r1] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.nl-pref-card[b-bky4oom9r1] {
    background: var(--nl-color-bg-card);
    border: 1px solid rgba(15, 48, 87, 0.08);
    border-radius: 10px;
    padding: 12px 16px;
    transition: opacity 0.15s ease;
}

.nl-pref-card-aus[b-bky4oom9r1] {
    opacity: 0.55;
}

.nl-pref-card-head[b-bky4oom9r1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nl-pref-typ[b-bky4oom9r1] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.nl-pref-icon[b-bky4oom9r1] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.04);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex: 0 0 auto;
}

.nl-pref-titel[b-bky4oom9r1] {
    font-weight: 600;
    color: var(--nl-color-text-primary);
    font-size: var(--nl-font-size-sm, 0.875rem);
}

.nl-pref-channels[b-bky4oom9r1] {
    display: flex;
    gap: 14px;
    flex: 0 0 auto;
}

.nl-pref-channel[b-bky4oom9r1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--nl-font-size-sm, 0.875rem);
    color: var(--nl-color-text-primary);
    cursor: pointer;
}

.nl-pref-channel-disabled[b-bky4oom9r1] {
    cursor: not-allowed;
    color: var(--nl-color-text-secondary);
}

.nl-pref-filter-toggle[b-bky4oom9r1] {
    margin-top: 10px;
    background: transparent;
    border: none;
    color: var(--nl-color-text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 4px 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nl-pref-filter-toggle:hover[b-bky4oom9r1] {
    color: var(--nl-color-primary-dark, #0F3057);
}

.nl-pref-filter-count[b-bky4oom9r1] {
    color: var(--nl-color-primary, #1B4F8A);
    font-weight: 600;
}

.nl-pref-filter-body[b-bky4oom9r1] {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px dashed rgba(15, 48, 87, 0.08);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.nl-pref-toggle[b-bky4oom9r1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--nl-font-size-sm, 0.875rem);
    cursor: pointer;
}

.nl-pref-whitelist[b-bky4oom9r1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nl-pref-whitelist > label[b-bky4oom9r1] {
    font-size: 0.85rem;
    color: var(--nl-color-text-secondary);
    font-weight: 600;
}

.nl-pref-combo[b-bky4oom9r1] {
    max-width: 360px;
}

.nl-pref-chips[b-bky4oom9r1] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
    align-items: center;
}

.nl-pref-chip[b-bky4oom9r1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 12px;
    background: rgba(27, 79, 138, 0.10);
    color: var(--nl-color-primary-dark, #0F3057);
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 500;
}

.nl-pref-chip-x[b-bky4oom9r1] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    font-size: 1rem;
    line-height: 1;
    padding: 0 4px;
}

.nl-pref-chip-x:hover[b-bky4oom9r1] {
    opacity: 1;
}

.nl-pref-footer[b-bky4oom9r1] {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(15, 48, 87, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
/* _content/ProbaLab.Web/Pages/Etiketten/EtikettDesigner.razor.rz.scp.css */
/* Slot-Designer + Live-Preview */

.nl-etikett-designer[b-9n4vkl48qb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 992px) {
    .nl-etikett-designer[b-9n4vkl48qb] { grid-template-columns: 1fr; }
}

.nl-slot-grid[b-9n4vkl48qb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 12px;
}

.nl-slot-card[b-9n4vkl48qb] {
    background: var(--nl-color-bg-card, #fff);
    border: 1px solid rgba(15, 48, 87, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
}

.nl-slot-card-head[b-9n4vkl48qb] {
    font-weight: 600;
    color: var(--nl-color-primary-dark, #0F3057);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

/* Grid-Positionen für die 5 Slot-Karten */
.nl-slot-topleft[b-9n4vkl48qb]     { grid-column: 1; grid-row: 1; }
.nl-slot-topright[b-9n4vkl48qb]    { grid-column: 2; grid-row: 1; }
.nl-slot-center[b-9n4vkl48qb]      { grid-column: 1 / span 2; grid-row: 2; }
.nl-slot-bottomleft[b-9n4vkl48qb]  { grid-column: 1; grid-row: 3; }
.nl-slot-bottomright[b-9n4vkl48qb] { grid-column: 2; grid-row: 3; }

/* Preview-Etikett */
.nl-etikett-preview-wrap[b-9n4vkl48qb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
}

.nl-etikett-preview[b-9n4vkl48qb] {
    position: relative;
    background: #fff;
    border: 1px solid #1A1A2E;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.nl-preview-slot[b-9n4vkl48qb] {
    position: absolute;
    padding: 2px 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nl-preview-topleft[b-9n4vkl48qb]     { top: 4px;  left: 4px; }
.nl-preview-topright[b-9n4vkl48qb]    { top: 4px;  right: 4px; text-align: right; }
.nl-preview-center[b-9n4vkl48qb]      { top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.nl-preview-bottomleft[b-9n4vkl48qb]  { bottom: 4px; left: 4px; }
.nl-preview-bottomright[b-9n4vkl48qb] { bottom: 4px; right: 4px; text-align: right; }

.nl-preview-barcode[b-9n4vkl48qb] {
    font-family: monospace;
    letter-spacing: -1px;
    line-height: 1;
    color: #000;
}

.nl-preview-barcode-text[b-9n4vkl48qb] {
    font-size: 8px;
    color: #333;
    letter-spacing: 0;
    margin-top: 1px;
}
/* _content/ProbaLab.Web/Pages/Lieferanten/LieferantenEditor.razor.rz.scp.css */
/* LieferantenEditor - manuelle Einstufung optisch von der automatischen
   Scorecard absetzen, OHNE Ampel-Farben zu verwenden (waere Verwechslungsgefahr
   mit einer automatischen Bewertung). Neutrale, gestrichelte Kennzeichnung. */
[b-0jz31bs60l] .nl-lieferant-manuell {
    background: var(--nl-color-bg, #F5F7FA);
    border: 1px dashed var(--nl-color-border-card, #DDE1E6);
}

[b-0jz31bs60l] .nl-lieferant-manuell .nl-card-form-title::after {
    content: "manuell";
    margin-left: 8px;
    font-size: var(--nl-font-size-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--nl-color-text-secondary, #6B7280);
    background: rgba(107, 114, 128, 0.12);
    padding: 1px 8px;
    border-radius: 9999px;
    vertical-align: middle;
}
/* _content/ProbaLab.Web/Pages/Pruefmittel/PruefmittelDetail.razor.rz.scp.css */
/* [Welle 4 Batch III] Status-Badges (.nl-krit-*/.nl-pm-status-*) nach app.css
   verschoben (globaler Scope, da die Klassen auch in PruefmittelListe/-Termine
   verwendet werden — vorher hier 1x von 3 identischen Kopien). Siehe app.css
   Abschnitt "Pruefmittel-Status-Badges (global)".
   Eine seitenspezifische Ergaenzung bleibt hier: margin-left fuer den Krit-Badge
   direkt neben der Ueberschrift (Liste/Termine brauchen das nicht). */
.nl-krit[b-xnts96n0sc] { margin-left: 8px; }

.nl-pm-detail[b-xnts96n0sc] {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.nl-pm-lifecycle[b-xnts96n0sc] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px 0;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.025);
    border-radius: 8px;
    font-size: 0.9rem;
}

.nl-pm-invnr[b-xnts96n0sc] {
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 8px;
    border-radius: 4px;
}

.nl-pm-meta[b-xnts96n0sc] {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 8px;
}

.nl-pm-tab-body[b-xnts96n0sc] {
    padding-top: 16px;
}

/* Stammdaten-Definition-Liste */
.nl-pm-dl[b-xnts96n0sc] {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 8px 16px;
    margin: 0;
}
.nl-pm-dl dt[b-xnts96n0sc] {
    color: var(--nl-color-text-secondary, #6B7280);
    font-weight: 500;
}
.nl-pm-dl dd[b-xnts96n0sc] {
    margin: 0;
    color: var(--nl-color-text-primary, #1A1A2E);
}

/* Kalibrier-Tabelle */
.nl-pm-kalibrier-table th[b-xnts96n0sc] {
    color: var(--nl-color-text-secondary, #6B7280);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.nl-pm-kalibrier-detail td[b-xnts96n0sc] {
    background: rgba(0, 0, 0, 0.02);
    border-top: 0;
    padding-top: 0;
    padding-bottom: 12px;
    color: var(--nl-color-text-secondary, #6B7280);
    font-size: 0.85rem;
}

.nl-kalibrier-ergebnis[b-xnts96n0sc] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.8rem;
    color: white;
}
.nl-kalibrier-bestanden[b-xnts96n0sc]      { background: var(--nl-color-io, #16A34A); }
.nl-kalibrier-bedingt[b-xnts96n0sc]        { background: var(--nl-color-warn, #D97706); }
.nl-kalibrier-nichtbestanden[b-xnts96n0sc] { background: var(--nl-color-nio, #DC2626); }

/* Intervall-Liste */
.nl-pm-intervall[b-xnts96n0sc] {
    padding: 8px 12px;
    background: var(--nl-color-bg-card, #fff);
    border: 1px solid rgba(15, 48, 87, 0.08);
    border-radius: 6px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.nl-pm-intervall button[b-xnts96n0sc] { margin-left: auto; padding: 0; }

.nl-pm-anhang-section[b-xnts96n0sc] {
    margin-top: 24px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--nl-color-text-secondary, #6B7280);
    font-weight: 600;
}
.nl-pm-anhang-section:first-of-type[b-xnts96n0sc] { margin-top: 0; }
/* _content/ProbaLab.Web/Pages/Pruefmittel/PruefmittelListe.razor.rz.scp.css */
/* [Welle 4 Batch III] Kritikalitaets-/Lifecycle-Status-Badges (.nl-krit-*/.nl-pm-status-*)
   nach app.css verschoben (globaler Scope, da seitenuebergreifend in
   PruefmittelDetail/-Termine genutzt — vorher hier 1x von 3 identischen Kopien).
   Siehe app.css Abschnitt "Pruefmittel-Status-Badges (global)".
   Diese Datei ist bewusst (fast) leer — keine seitenspezifischen Ergaenzungen. */[b-dmwg06qb63]
/* _content/ProbaLab.Web/Pages/Pruefmittel/PruefmittelTermine.razor.rz.scp.css */
/* Wartungsplan-Tabelle — klickbare Zeilen, Ampel-Farben für Fälligkeit */

.nl-wartungsplan-table thead th[b-1xlyfi110t] {
    color: var(--nl-color-text-secondary, #6B7280);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    border-bottom: 1px solid rgba(15, 48, 87, 0.08);
}

.nl-wartung-row[b-1xlyfi110t] {
    cursor: pointer;
}

.nl-wartung-faelligkeit[b-1xlyfi110t] {
    font-variant-numeric: tabular-nums;
}

.nl-wartung-rot[b-1xlyfi110t] {
    color: var(--nl-color-nio, #DC2626);
    font-weight: 600;
}
.nl-wartung-orange[b-1xlyfi110t] {
    color: var(--nl-color-warn, #D97706);
    font-weight: 600;
}
.nl-wartung-gelb[b-1xlyfi110t] {
    color: #B45309;
}

/* [Welle 4 Batch III] Status-Badges (.nl-krit-*/.nl-pm-status-*) nach app.css
   verschoben (globaler Scope, vorher hier 1x von 3 identischen Kopien). Siehe
   app.css Abschnitt "Pruefmittel-Status-Badges (global)". */

/* Termin-Typ-Badge */
.nl-termin-typ[b-1xlyfi110t] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.nl-termin-typ-kal[b-1xlyfi110t] {
    background: #DBEAFE;
    color: #1B4F8A;
}
.nl-termin-typ-wart[b-1xlyfi110t] {
    background: rgba(124, 58, 237, 0.10);
    color: #5B21B6;
}
/* _content/ProbaLab.Web/Pages/Stammdaten/Cockpit/StammdatenCockpit.razor.rz.scp.css */
.nl-cockpit[b-pvz9fbxe9f] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 80px);
    gap: 0.75rem;
}

.nl-cockpit-head[b-pvz9fbxe9f] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.5rem 0 0.75rem;
    border-bottom: 1px solid var(--bs-border-color-translucent, #dee2e6);
}

.nl-cockpit-head h1[b-pvz9fbxe9f] {
    font-size: 1.4rem;
    margin: 0 0 0.25rem 0;
}

.nl-cockpit-body[b-pvz9fbxe9f] {
    flex: 1;
    display: grid;
    grid-template-columns: 240px minmax(280px, 1.2fr) minmax(320px, 2fr);
    gap: 0.75rem;
    overflow: hidden;
    min-height: 0;
}

/* Pivot-Vollbreite-Modus: Detail-Pane ausgeblendet, Pivot bekommt allen verbleibenden Platz. */
.nl-cockpit-body--pivot[b-pvz9fbxe9f] {
    grid-template-columns: 240px 1fr;
}

/* ===== Sidebar ===== */

.nl-cockpit-side[b-pvz9fbxe9f] {
    overflow-y: auto;
    padding-right: 0.25rem;
    border-right: 1px solid var(--bs-border-color-translucent, #dee2e6);
}

.nl-cockpit-side-section[b-pvz9fbxe9f] {
    margin-bottom: 1rem;
}

.nl-cockpit-side-title[b-pvz9fbxe9f] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 0.25rem;
    margin-bottom: 0.25rem;
}

.nl-cockpit-side-btn[b-pvz9fbxe9f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.35rem 0.5rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    text-align: left;
    cursor: pointer;
    font-size: 0.9rem;
    color: inherit;
    transition: background-color .12s;
}

.nl-cockpit-side-btn:hover[b-pvz9fbxe9f] {
    background: var(--bs-light, #f8f9fa);
}

.nl-cockpit-side-btn.active[b-pvz9fbxe9f] {
    background: var(--bs-primary-bg-subtle, #cfe2ff);
    border-color: var(--bs-primary-border-subtle, #9ec5fe);
    font-weight: 500;
}

/* ===== Master ===== */

.nl-cockpit-main[b-pvz9fbxe9f] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* WICHTIG: min-width 0, damit Grid-Children mit großem Inhalt (Pivot-Tabelle)
       schrumpfen können statt das Grid zu sprengen. Ohne das kein horizontales Scrolling. */
    min-width: 0;
    border-right: 1px solid var(--bs-border-color-translucent, #dee2e6);
    padding-right: 0.5rem;
}

.nl-cockpit-master-head[b-pvz9fbxe9f] {
    padding-bottom: 0.5rem;
}

.nl-cockpit-master-list[b-pvz9fbxe9f] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.nl-cockpit-master-foot[b-pvz9fbxe9f] {
    padding-top: 0.4rem;
    border-top: 1px solid var(--bs-border-color-translucent, #dee2e6);
}

.nl-cockpit-list-item[b-pvz9fbxe9f] {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    color: inherit;
    transition: background-color .12s;
}

.nl-cockpit-list-item:hover[b-pvz9fbxe9f] {
    background: var(--bs-light, #f8f9fa);
}

.nl-cockpit-list-item.active[b-pvz9fbxe9f] {
    background: var(--bs-primary-bg-subtle, #cfe2ff);
    border-color: var(--bs-primary-border-subtle, #9ec5fe);
}

.nl-cockpit-list-row[b-pvz9fbxe9f] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.nl-cockpit-list-kuerzel[b-pvz9fbxe9f] {
    font-size: 0.85rem;
    color: var(--bs-primary, #0d6efd);
    flex-shrink: 0;
}

.nl-cockpit-list-bez[b-pvz9fbxe9f] {
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nl-cockpit-list-meta[b-pvz9fbxe9f] {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    margin-top: 0.15rem;
    font-size: 0.75rem;
}

/* ===== Detail ===== */

.nl-cockpit-detail[b-pvz9fbxe9f] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.nl-cockpit-detail-head[b-pvz9fbxe9f] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--bs-border-color-translucent, #dee2e6);
    margin-bottom: 0.5rem;
}

.nl-cockpit-detail-head h2[b-pvz9fbxe9f] {
    font-size: 1.05rem;
    margin: 0;
}

.nl-cockpit-detail-tabs[b-pvz9fbxe9f] {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color-translucent, #dee2e6);
}

.nl-tab[b-pvz9fbxe9f] {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.4rem 0.8rem;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    font-size: 0.9rem;
    margin-bottom: -1px;
}

.nl-tab:hover[b-pvz9fbxe9f] {
    color: var(--bs-body-color, #212529);
}

.nl-tab.active[b-pvz9fbxe9f] {
    color: var(--bs-primary, #0d6efd);
    border-bottom-color: var(--bs-primary, #0d6efd);
    font-weight: 500;
}

.nl-cockpit-detail-body[b-pvz9fbxe9f] {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.nl-cockpit-quick-actions[b-pvz9fbxe9f] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bs-border-color-translucent, #dee2e6);
    margin-bottom: 0.5rem;
}

.nl-cockpit-quick-btn[b-pvz9fbxe9f] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    background: rgba(27, 79, 138, 0.06);
    border: 1px solid rgba(27, 79, 138, 0.18);
    border-radius: 999px;
    color: var(--nl-color-primary, #1b4f8a);
    font-size: 0.8rem;
    text-decoration: none;
    transition: background-color .12s, border-color .12s;
}

.nl-cockpit-quick-btn:hover[b-pvz9fbxe9f] {
    background: rgba(27, 79, 138, 0.12);
    border-color: var(--nl-color-primary, #1b4f8a);
    color: var(--nl-color-primary, #1b4f8a);
}

.nl-cockpit-quick-icon[b-pvz9fbxe9f] {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--nl-color-primary, #1b4f8a);
    color: #fff;
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 1;
}

.nl-cockpit-empty[b-pvz9fbxe9f] {
    padding: 2rem;
    text-align: center;
}

/* Pivot-CSS ist nach app.css ausgelagert — scoped CSS griff beim StringBuilder-injizierten
   HTML nicht (siehe Memory blazor_scoped_css_stringbuilder_trap). */

/* ===== Responsive: collapse to single column on narrow screens =====
   Nur greifen wenn KEIN Pivot-Vollbreite-Modus — sonst wird der Pivot
   auf halbe Höhe gequetscht, obwohl die Detail-Pane ohnehin ausgeblendet ist. */
@media (max-width: 1200px) {
    .nl-cockpit-body:not(.nl-cockpit-body--pivot)[b-pvz9fbxe9f] {
        grid-template-columns: 220px 1fr;
        grid-template-rows: 1fr 1fr;
    }
    .nl-cockpit-body:not(.nl-cockpit-body--pivot) .nl-cockpit-detail[b-pvz9fbxe9f] {
        grid-column: 1 / -1;
        border-top: 1px solid var(--bs-border-color-translucent, #dee2e6);
        padding-top: 0.5rem;
    }
    /* Im Pivot-Modus bleibt das 2-Spalten-Layout (240px | 1fr), aber Sidebar wird schmaler */
    .nl-cockpit-body--pivot[b-pvz9fbxe9f] {
        grid-template-columns: 200px 1fr;
    }
}