@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lcdo7z9xd2.bundle.scp.css';

/* /Components/AboutDialog.razor.rz.scp.css */
/* AboutDialog.razor.css — Styles für den „Über Modus Lohn"-Dialog (Redesign 2026-06)
   Tokens aus modus-theme.css; Light+Dark automatisch via --mo-*
   4 Zonen: Header-Lockup · Body (Umgebung + Update-Zeile) · Hinweis · Footer */

/* ── HEADER: Monogramm-Lockup ─────────────────────────────────────────────── */

.about-dialog__header-lockup[b-jnh88evfuv] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Eigener Schließen-X — rechts oben (margin-left:auto schiebt nach rechts), dezent. */
.about-dialog__close[b-jnh88evfuv] {
    margin-left: auto;
    align-self: flex-start;
    color: var(--mo-muted);
}

.about-dialog__close:hover[b-jnh88evfuv] {
    color: var(--mo-ink);
}

/* Signet (mowa-sign.png) im Header — 32px, ersetzt das frühere grüne M-Monogramm.
   Konsistent mit Haupt-Header/Sidebar; grau-auf-transparent (Dark-Filter siehe unten). */
.about-dialog__sign[b-jnh88evfuv] {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.about-dialog__header-text[b-jnh88evfuv] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.about-dialog__app-name[b-jnh88evfuv] {
    font-size: 18px;
    font-weight: 600;
    color: var(--mo-ink);
    line-height: 1.2;
}

.about-dialog__version[b-jnh88evfuv] {
    font-size: 13px;
    font-weight: 400;
    color: var(--mo-muted);
    font-variant-numeric: tabular-nums lining-nums;
    cursor: default; /* title-Tooltip sichtbar machen */
}

/* ── FIRMEN-BLOCK (Body): Volllogo im weißen Pill + Firmenname ── */
.about-dialog__company-block[b-jnh88evfuv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 0 4px;
    border-top: 1px solid var(--mo-hairline);
}

/* Weißer Pill im LIGHT: hebt das Logo dezent vom hellen Dialog ab. */
.about-dialog__logo-pill[b-jnh88evfuv] {
    display: inline-flex;
    background: #FFFFFF;
    border: 1px solid var(--mo-hairline);
    border-radius: 8px;
    padding: 10px 16px;
}

/* Dark: KEIN weißer Pill — der blendet auf dem dunklen Dialog. Das Logo (grün + mittelgrau auf
   transparent) ist auf #1B1E22 gut lesbar (Grün hoher Kontrast, Grau ~6:1), also transparent +
   ohne Rahmen schweben lassen statt heller Kachel. */
body[data-theme="dark"] .about-dialog__logo-pill[b-jnh88evfuv],
body[data-theme="system-dark"] .about-dialog__logo-pill[b-jnh88evfuv] {
    background: transparent;
    border-color: transparent;
}

.about-dialog__logo[b-jnh88evfuv] {
    display: block;
    max-width: 180px;
    height: auto;
}

.about-dialog__company-name[b-jnh88evfuv] {
    font-size: 12px;
    font-weight: 400;
    color: var(--mo-muted);
    text-align: center;
}

/* ── BODY ─────────────────────────────────────────────────────────────────── */

.about-dialog__body[b-jnh88evfuv] {
    padding: 0 0 4px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Umgebungs-Zeile: echtes 2-Spalten-Grid ── */

.about-dialog__env-row[b-jnh88evfuv] {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 16px;
    align-items: center;
    padding-bottom: 16px;
}

.about-dialog__env-label[b-jnh88evfuv] {
    font-size: 11px;
    font-weight: 600;
    color: var(--mo-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.about-dialog__env-value[b-jnh88evfuv] {
    display: flex;
    align-items: center;
}

.about-dialog__env-prod[b-jnh88evfuv] {
    font-size: 13px;
    color: var(--mo-muted);
}

/* ── Update-Inline-Zeile ── */

.about-dialog__update-row[b-jnh88evfuv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 16px;
    border-top: 1px solid var(--mo-hairline);
    padding-top: 16px;
}

.about-dialog__update-icon[b-jnh88evfuv] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.about-dialog__update-icon--idle[b-jnh88evfuv],
.about-dialog__update-icon--current[b-jnh88evfuv] {
    color: var(--mo-success, #3D7A00);
}

.about-dialog__update-icon--checking[b-jnh88evfuv] {
    color: var(--mo-muted);
}

.about-dialog__update-icon--available[b-jnh88evfuv] {
    color: var(--mo-green-interactive, #5A8A00);
}

.about-dialog__update-icon--error[b-jnh88evfuv] {
    color: var(--mo-warning, #B45309);
}

/* Spinner-Animation */
.about-dialog__spinner[b-jnh88evfuv] {
    animation: about-dialog-spin-b-jnh88evfuv 1s linear infinite;
}

@keyframes about-dialog-spin-b-jnh88evfuv {
    to { transform: rotate(360deg); }
}

.about-dialog__update-text[b-jnh88evfuv] {
    font-size: 13px;
    flex: 1;
}

.about-dialog__update-text--current[b-jnh88evfuv] {
    color: var(--mo-ink-3, #454B54);
}

.about-dialog__update-text--checking[b-jnh88evfuv] {
    color: var(--mo-muted);
}

.about-dialog__update-text--available[b-jnh88evfuv] {
    color: var(--mo-green-interactive, #5A8A00);
    font-weight: 500;
}

.about-dialog__update-text--error[b-jnh88evfuv] {
    color: var(--mo-warning, #B45309);
}

/* Inline Ghost-CTA (nur für Erneut prüfen / Erneut versuchen) */
.about-dialog__update-cta[b-jnh88evfuv] {
    background: none;
    border: none;
    padding: 2px 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--mo-green-interactive, #5A8A00);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
    flex-shrink: 0;
}

.about-dialog__update-cta:hover[b-jnh88evfuv] {
    color: var(--mo-green-hover, #487000);
}

/* ── Vertraulichkeitshinweis ── */

.about-dialog__notice[b-jnh88evfuv] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-top: 1px solid var(--mo-hairline);
    padding-top: 16px;
}

.about-dialog__notice-icon[b-jnh88evfuv] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--mo-muted);
    margin-top: 1px; /* optische Ausrichtung mit erster Textzeile */
}

.about-dialog__notice-text[b-jnh88evfuv] {
    font-size: 12px;
    color: var(--mo-muted);
    line-height: 18px;
}

/* ── FOOTER: © + Schließen ── */

.about-dialog__copyright[b-jnh88evfuv] {
    font-size: 11px;
    color: var(--mo-muted);
    flex: 1;
}

/* ── Dark-Overrides für Update-Status ─────────────────────────────────────── */
/* D3: Hardcoded hex (#F0B429 → --mo-warning, #1A2E00 → --mo-green-tint-active) tokenisiert.
   --mo-warning und --mo-green-tint-active tauschen sich im Dark-Theme automatisch aus. */

body[data-theme="dark"] .about-dialog__update-text--available[b-jnh88evfuv],
body[data-theme="system-dark"] .about-dialog__update-text--available[b-jnh88evfuv] {
    color: var(--mo-green-interactive);
}

body[data-theme="dark"] .about-dialog__update-text--error[b-jnh88evfuv],
body[data-theme="system-dark"] .about-dialog__update-text--error[b-jnh88evfuv] {
    color: var(--mo-warning); /* D3: war #F0B429 → --mo-warning (Dark: #E0922F) */
}

body[data-theme="dark"] .about-dialog__update-icon--error[b-jnh88evfuv],
body[data-theme="system-dark"] .about-dialog__update-icon--error[b-jnh88evfuv] {
    color: var(--mo-warning); /* D3: war #F0B429 → --mo-warning (Dark: #E0922F) */
}

/* Signet im Dark aufhellen (grau-auf-transparent → fast unsichtbar auf dunklem Header).
   Gleicher Filter wie der Haupt-Header. Das Volllogo im Firmen-Block braucht keinen
   Filter — es sitzt im eigenen weißen Pill. */
body[data-theme="dark"] .about-dialog__sign[b-jnh88evfuv],
body[data-theme="system-dark"] .about-dialog__sign[b-jnh88evfuv] {
    filter: brightness(0) invert(0.85);
}
/* /Components/MoPageHeader.razor.rz.scp.css */
/* MoPageHeader.razor.css — Einheitlicher Seitentitel-Header (Spec §2 / Design 2026-06-23_page-header-pattern.md).
   Alle Farben ausschließlich via --mo-* Tokens — kein hardcodiertes Hex.
   Light + Dark werden automatisch durch modus-theme.css vererbt.
   Divider default AUS; opt-in per ShowDivider="true" (Whitespace-Trennung als Default per Stripe/Linear/Notion-Muster).
*/

/* ── Root Container ───────────────────────────────────────────────────────── */
.mo-page-header[b-2kg71ehi9n] {
    display: block;
    margin-bottom: 16px;
}

/* ── Title Row ────────────────────────────────────────────────────────────── */
.mo-page-header__title-row[b-2kg71ehi9n] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Title (<h1>) — optisch Typography.H4: 20px / 600 / 28px ─────────────── */
.mo-page-header__title[b-2kg71ehi9n] {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: var(--mo-ink);
    margin: 0;
    padding: 0;
}

/* ── Back Slot ────────────────────────────────────────────────────────────── */
.mo-page-header__back[b-2kg71ehi9n] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Stealth-Back-Button im Ruhezustand mit der Fläche verschmelzen lassen.
   FAST-Rest-Fill --neutral-fill-stealth-rest ist hell (#FBFBFB) und hob sich als
   heller Kasten von der Seitenfläche (--mo-page) ab. Nur den Rest-Zustand angleichen —
   Hover/Active behalten ihren dezenten Fill. Kein ::part() (in Blazor-scoped-CSS ungültig).
   Präzedenz: Sort-Button-Fix in modus-theme.css. Dark-Mode ist global bereits transparent. */
.mo-page-header__back[b-2kg71ehi9n]  fluent-button {
    --neutral-fill-stealth-rest: var(--mo-page);
}

/* ── Badge Slot ───────────────────────────────────────────────────────────── */
.mo-page-header__badge[b-2kg71ehi9n] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* ── Context Content Slot ─────────────────────────────────────────────────── */
.mo-page-header__context[b-2kg71ehi9n] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Actions Slot — rechtsbündig via FluentSpacer davor ──────────────────── */
.mo-page-header__actions[b-2kg71ehi9n] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Subtitle Row ─────────────────────────────────────────────────────────── */
.mo-page-header__subtitle[b-2kg71ehi9n] {
    color: var(--mo-muted);
    font-size: 14px;
    line-height: 20px;
    margin-top: 2px;
}

/* ── Divider ──────────────────────────────────────────────────────────────── */
.mo-page-header__divider[b-2kg71ehi9n] {
    margin-top: 12px;
    border-color: var(--mo-hairline);
}
/* /Components/MoStatusBanner.razor.rz.scp.css */
/* MoStatusBanner.razor.css — In-Flow-Banner-Slot unter der Top-Bar (Spec §2 / §6).
   Kein position:fixed — schiebt Content nach unten.
   D4: --mo-banner-*-Token-Definitionen nach modus-theme.css §2 (Light) / §3 (Dark) verschoben (Single-Source).
   Diese Datei referenziert die Tokens nur noch — sie werden über modus-theme.css bereitgestellt.
   WCAG-AA: alle Kontrastverhältnisse ≥ 4,5:1 (Text auf BG) verifiziert gegen Spec §2.
*/

/* ── Base Banner ─────────────────────────────────────────────────────────── */
.mo-status-banner[b-5zm5ve1rz4] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 16px;
    box-sizing: border-box;
    min-height: 40px;

    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.4;

    border-bottom: 1px solid transparent;

    animation: mo-banner-slide-in-b-5zm5ve1rz4 120ms ease-out both;
}

@keyframes mo-banner-slide-in-b-5zm5ve1rz4 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mo-status-banner[b-5zm5ve1rz4] {
        animation: none;
    }
}

/* ── Variant: Disconnected ───────────────────────────────────────────────── */
.mo-status-banner--disconnected[b-5zm5ve1rz4] {
    background-color: var(--mo-banner-amber-bg);
    border-bottom-color: var(--mo-banner-amber-border);
    border-left: 3px solid var(--mo-banner-amber-border);
    color: var(--mo-banner-amber-text);
}

.mo-status-banner--disconnected .mo-status-banner__icon[b-5zm5ve1rz4] {
    color: var(--mo-banner-amber-icon);
}

/* ── Variant: Reconnecting ───────────────────────────────────────────────── */
.mo-status-banner--reconnecting[b-5zm5ve1rz4] {
    background-color: var(--mo-banner-grey-bg);
    border-bottom-color: var(--mo-banner-grey-border);
    border-left: 3px solid var(--mo-banner-grey-border);
    color: var(--mo-banner-grey-text);
}

.mo-status-banner--reconnecting .mo-status-banner__icon[b-5zm5ve1rz4] {
    color: var(--mo-banner-grey-icon);
}

/* ── Variant: Unauthorized ───────────────────────────────────────────────── */
.mo-status-banner--unauthorized[b-5zm5ve1rz4] {
    background-color: var(--mo-banner-amber-bg);
    border-bottom-color: var(--mo-banner-amber-border);
    border-left: 3px solid var(--mo-banner-amber-border);
    color: var(--mo-banner-amber-text);
}

.mo-status-banner--unauthorized .mo-status-banner__icon[b-5zm5ve1rz4] {
    color: var(--mo-banner-amber-icon);
}

/* ── Variant: Update ─────────────────────────────────────────────────────── */
.mo-status-banner--update[b-5zm5ve1rz4] {
    background-color: var(--mo-banner-info-bg);
    border-bottom-color: var(--mo-banner-info-border);
    border-left: 3px solid var(--mo-banner-info-border);
    color: var(--mo-banner-info-text);
}

.mo-status-banner--update .mo-status-banner__icon[b-5zm5ve1rz4] {
    color: var(--mo-banner-info-icon);
}

/* ── Icon ────────────────────────────────────────────────────────────────── */
.mo-status-banner__icon[b-5zm5ve1rz4] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Spinner-Animation für Reconnecting */
.mo-status-banner__spinner[b-5zm5ve1rz4] {
    animation: mo-banner-spin-b-5zm5ve1rz4 1s linear infinite;
    transform-origin: center;
}

@keyframes mo-banner-spin-b-5zm5ve1rz4 {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .mo-status-banner__spinner[b-5zm5ve1rz4] {
        animation: none;
    }
}

/* ── Message Text ────────────────────────────────────────────────────────── */
.mo-status-banner__message[b-5zm5ve1rz4] {
    flex: 1;
    font-weight: 500;
}

/* ── Action Button ───────────────────────────────────────────────────────── */
.mo-status-banner__action[b-5zm5ve1rz4] {
    background: none;
    border: 1px solid currentColor;
    border-radius: var(--mo-radius-sm, 4px);
    padding: 2px 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: inherit;
    line-height: 1.5;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 120ms ease-out;
}

.mo-status-banner__action:hover[b-5zm5ve1rz4] {
    opacity: 0.8;
}

.mo-status-banner__action:focus-visible[b-5zm5ve1rz4] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
/* /Components/ThemeToggle.razor.rz.scp.css */
/* ThemeToggle.razor.css — Scoped CSS für den 3-Wege-Theme-Umschalter
   Plan: .claude/plans/2026-06-21_design-system.md §4 / Strang B
   2026-06-21: Header ist jetzt flach-hell → Toggle-Farben auf Neutral-Töne umgestellt.
               Light: dunkle Text-Farben auf hellem Hintergrund.
               Dark: helle Text-Farben auf dunklem Hintergrund (via CSS custom properties).
*/

/* Toggle-Gruppe: horizontal pill-förmige Button-Leiste */
.mo-theme-toggle[b-z4pznarymk] {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--mo-hairline, #E8EAED);
    border: 1px solid var(--mo-border, #D1D5DB);
    border-radius: 20px;
    padding: 2px;
    margin: 0 0.5rem;
}

/* Einzelner Toggle-Button */
.mo-theme-btn[b-z4pznarymk] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: none;
    border-radius: 16px;
    background: transparent;
    color: var(--mo-muted, #6B7280);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background var(--mo-motion-fast, 120ms ease-out),
                color var(--mo-motion-fast, 120ms ease-out);
    white-space: nowrap;
}

.mo-theme-btn:hover[b-z4pznarymk] {
    background: var(--mo-border, #D1D5DB);
    color: var(--mo-ink-3, #454B54);
}

/* Aktiver Zustand: weißer/heller Pill mit Border */
.mo-theme-btn.active[b-z4pznarymk] {
    background: var(--mo-surface, #FFFFFF);
    color: var(--mo-ink, #1A1D21);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

.mo-theme-btn:focus-visible[b-z4pznarymk] {
    outline: 2px solid var(--mo-focus-ring, #5A8A00);
    outline-offset: 2px;
}

/* Label-Text — auf sehr kleinen Top-Bars ausblendbar */
.mo-theme-label[b-z4pznarymk] {
    display: inline;
}

/* Tablet: Labels ausblenden, nur Icon zeigen (spart Platz in der schmalen Rail-Top-Bar) */
@media (max-width: 767px) {
    .mo-theme-label[b-z4pznarymk] {
        display: none;
    }

    .mo-theme-btn[b-z4pznarymk] {
        padding: 5px 8px;
    }
}
/* /Components/UpdateBanner.razor.rz.scp.css */
/* UpdateBanner.razor.css — Minimiert: UpdateBanner ist jetzt ein unsichtbarer
   SW-Update-Watcher (Option a, Strang C). Kein sichtbares Banner-Markup mehr.
   Das sichtbare Update-Banner rendert MoStatusBanner (Update-Variante).
   Diese Datei ist bewusst leer — Platzhalter für künftige Erweiterungen. */
/* /Layout/MainLayout.razor.rz.scp.css */
/* MainLayout.razor.css — Shell-Styling: Top-Bar / Sidebar / Logo / Smile / Tablet-Rail
   Plan: .claude/plans/2026-06-21_design-system.md §4 / Strang B
   Nutzt ausschließlich var(--mo-*)-Tokens aus modus-theme.css.
   Dark-Mode automatisch via body[data-theme="dark"] → --mo-* tauschen sich selbst aus.
*/

/* ==========================================================================
   Top-Bar (FluentHeader)
   ========================================================================== */

/* HINWEIS: Die Top-Bar-BG-Regel (header.mo-topbar) lebt GLOBAL in modus-theme.css
   (§12 Shell-Overrides), NICHT hier scoped — FluentHeader reicht das scoped-CSS-Attribut
   (b-xxx) nicht auf sein internes <header> durch, daher würde eine scoped-Regel nie matchen.
   Siehe LEAD-Fix-Kommentar in modus-theme.css §12.

   HEADER-ÄNDERUNG 2026-06-21: Flach-hell. BG/border/height/shadow in modus-theme.css §12. */

/* Marken-Lockup: Home-Anker (<a>) mit Signet + Wortlaut. War ein <span> mit Inline-SVG-„M" (entfernt). */
.mo-header-logo[b-nydnr870gb] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 12px;
    flex-shrink: 0;
    text-decoration: none;
}

/* Signet-Bild: 24px Höhe, Breite auto, vertikal zentriert via Flex-Container. */
.mo-header-sign[b-nydnr870gb] {
    height: 24px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

/* App-Name — Farbe wird global via modus-theme.css §12 (header.mo-topbar a / .mo-topbar-title, !important,
   Zeilen 595-599) gesteuert; eine scoped Farb-Regel würde durch !important überschrieben (harmlos, aber
   irreführend — daher kein eigenes color hier hinzufügen). Der Anchor hat text-decoration:none, kein
   Underline-Durchschlag. */
.mo-topbar-title[b-nydnr870gb] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mo-header-title, var(--mo-ink));
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* Kontext-Label (read-only, Bereichsname) */
.mo-header-context[b-nydnr870gb] {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--mo-header-meta, var(--mo-muted));
    white-space: nowrap;
}

/* ==========================================================================
   Sidebar (FluentNavMenu)
   ========================================================================== */

/* Scoped auf .mo-sidebar via ::deep — FluentNavMenu rendert als WC.
   Primäre Farb-Steuerung via --mo-sidebar-bg in modus-theme.css §12 (globale Regel),
   da scoped-CSS das b-xxx-Attribut nicht auf fluent-nav-menu durchreicht.
   Diese scoped-Regeln dienen als Dokumentation und redundante Absicherung. */
[b-nydnr870gb] .mo-sidebar {
    background-color: var(--mo-sidebar-bg, var(--mo-surface-2));
    border-right: 1px solid var(--mo-sidebar-border, var(--mo-hairline));
}

/* Fallback für fluent-nav-menu Host-Element (in 4.14.2 ein div.fluent-nav-menu).
   App-Shell (2026-06-21): height:100% + overflow-y:auto → Sidebar füllt die
   mittlere Reihe und scrollt intern wenn viele Nav-Punkte vorhanden. */
[b-nydnr870gb] .fluent-nav-menu {
    background-color: var(--mo-sidebar-bg, var(--mo-surface-2)) !important;
    border-right: 1px solid var(--mo-sidebar-border, var(--mo-hairline)) !important;
    height: 100% !important;
    overflow-y: auto !important;
}

/* ==========================================================================
   Sidebar-Kopf (Toggle-Bereich — kein Logo, B1 entfernt)
   ========================================================================== */

/* Sidebar-Kopf: enthält den Rail-Toggle-Button, kein Logo mehr.
   Im Voll-Modus: linksbündig, 56px Mindesthöhe (konsistent mit Rail-Icons).
   Im Rail-Modus (.mo-rail-collapsed): zentriert (via globale modus-theme.css-Regel §20). */
.mo-sidebar-head[b-nydnr870gb] {
    display: flex;
    align-items: center;
    padding: 8px 8px 4px;
    border-bottom: 1px solid var(--mo-hairline);
    margin-bottom: 4px;
    min-height: 52px;
    box-sizing: border-box;
}

/* Toggle-Button: stealth, dezent, volle Zeile im Voll-Modus */
.mo-rail-toggle[b-nydnr870gb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: var(--mo-muted);
    border-radius: var(--mo-radius-md);
    transition: color var(--mo-motion-fast);
}

.mo-rail-toggle:hover[b-nydnr870gb],
.mo-rail-toggle:focus-visible[b-nydnr870gb] {
    color: var(--mo-ink);
}

/* ==========================================================================
   Nav-Items — DELEGIERT AN modus-theme.css §14 (GLOBAL, NICHT SCOPED)
   BEGRÜNDUNG: FluentNavMenu 4.14.2 rendert seine inneren Elemente (a.fluent-nav-link,
   div.fluent-nav-group etc.) mit eigenem Scope-Attribut (b-5upkyn31e7). Der Blazor
   CSS-Isolation-Mechanismus erzeugt hier [b-nydnr870gb] als Scope für MainLayout.
   Da a.fluent-nav-link kein Vorfahre mit [b-nydnr870gb] hat, würde
   "[b-nydnr870gb] a.fluent-nav-link" nie matchen — egal ob mit ::deep oder ohne.
   Lösung: Nav-Item-Regeln global in modus-theme.css §14 ohne Scope-Attribut.
   ========================================================================== */
 /* → siehe modus-theme.css §14: QW1–QW7 Nav-Item-Styles */

/* ==========================================================================
   Smile-Akzent (Sidebar-Fuß)
   ========================================================================== */

.mo-sidebar-smile[b-nydnr870gb] {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 8px 0 12px;
    margin-top: auto;
    opacity: 0.5;
}

/* ==========================================================================
   Body-Content / page-content
   QW1-Scroll-Struktur erhalten (Popups nicht abgeschnitten)
   ========================================================================== */

/* innerer Scroll-Wrapper — Scrollen hier, nicht auf FluentBodyContent.
   App-Shell-Layout-Regeln (2026-06-21):
   - flex:1          → nimmt allen freien Platz in FluentBodyContent
   - min-height:0    → Flexbox-Pflichtangabe: ohne diese kann ein flex-Kind nicht
                        unter seine intrinsische Höhe schrumpfen → kein Innen-Scroll
   - overflow-y:auto → nur diese Pane scrollt; html/body und Seite selbst scrollen NICHT
   - height:100% entfernt → war redundant und kämpfte gegen das Flex-Modell */
.page-content[b-nydnr870gb] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
    box-sizing: border-box;
    background-color: var(--mo-page);
}

/* ==========================================================================
   Footer — volle Breite, 3-Spalten-Flex, unterhalb Sidebar+Content
   Ersetze das alte <FluentFooter>-Inline-Copyright.
   ========================================================================== */

[b-nydnr870gb] .fluent-footer {
    border-top: 1px solid var(--mo-hairline);
    background-color: var(--mo-surface-2);
}

/* Nativer <footer class="app-footer"> — volle Breite, kein sticky */
.app-footer[b-nydnr870gb] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 16px;              /* D1: 24px → 16px, gewinnt horizontalen Raum */
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: var(--mo-muted);            /* #6B7280 Light (≈ 4,7:1 auf #FAFAFA — AA ✓ bei 11px normal?) */
    background-color: var(--mo-surface-2);
    border-top: 1px solid var(--mo-hairline);
    line-height: 1.4;
    flex-shrink: 0;
    box-sizing: border-box;         /* D1: Footer überschreitet nicht die Viewport-Breite */
    max-width: 100%;                /* D1: defensiv kein Überlauf */
    overflow: hidden;               /* D1: defensiv gegen content-overflow */
}

/* WCAG-Hinweis: 11 px (normal weight) → AA erfordert 4,5:1.
   --mo-muted (#6B7280) auf --mo-surface-2 (#FAFAFA) ≈ 4,7:1 → knapp bestanden.
   Falls Dark nicht genug: wird auf --mo-ink-3 erhöht (siehe Dark-Abschnitt oben). */

.app-footer__left[b-nydnr870gb]  { flex: 1; text-align: left;   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; /* D1: Flex-Item schrumpft unter content-size */ }
.app-footer__center[b-nydnr870gb] { flex: 1; text-align: center; white-space: nowrap; display: flex; justify-content: center; align-items: center; gap: 6px; min-width: 0; /* D1: Flex-Item schrumpft unter content-size */ }
.app-footer__right[b-nydnr870gb] { flex: 1; text-align: right;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; /* D1: Flex-Item schrumpft unter content-size */ }

/* Umgebungs-Badge — nur außerhalb Produktion */
.app-footer__env-badge[b-nydnr870gb] {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 3px;
    padding: 1px 5px;
    line-height: 1.5;
    vertical-align: middle;
}

/* D2: Env-Badges tokenisiert — adaptieren automatisch zu Dark via color-mix(--mo-danger/warning + --mo-surface) */
.app-footer__env-badge--dev[b-nydnr870gb] {
    background: color-mix(in srgb, var(--mo-danger) 12%, var(--mo-surface));
    color: var(--mo-danger);
    border: 1px solid color-mix(in srgb, var(--mo-danger) 35%, var(--mo-surface));
}

.app-footer__env-badge--staging[b-nydnr870gb] {
    background: color-mix(in srgb, var(--mo-warning) 14%, var(--mo-surface));
    color: var(--mo-warning);
    border: 1px solid color-mix(in srgb, var(--mo-warning) 35%, var(--mo-surface));
}

/* ==========================================================================
   Footer „Über"-Link — dezenter Button-als-Link im Footer
   ========================================================================== */

.app-footer__about-link[b-nydnr870gb] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: var(--mo-muted);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: color var(--mo-motion-fast), text-decoration-color var(--mo-motion-fast);
    line-height: inherit;
    vertical-align: baseline;
}

.app-footer__about-link:hover[b-nydnr870gb],
.app-footer__about-link:focus-visible[b-nydnr870gb] {
    color: var(--mo-green-interactive);
    text-decoration-color: var(--mo-green-interactive);
    outline: none;
}

.app-footer__about-link:focus-visible[b-nydnr870gb] {
    outline: 2px solid var(--mo-focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==========================================================================
   Tablet-Rail (768px – 1199px)
   Sidebar → 56px Icon-Rail: Logo → mowa-sign.png 30px zentriert;
   Nav-Labels ausblenden ist bei FluentNavMenu begrenzt möglich (WC kein ::part(label)).
   Realisierbar: Breite auf 56px, Logo tauschen, Overflow verstecken.
   Limitierung: FluentNavMenu-NavLink-Labels lassen sich in Blazor 4.14.2 via reiner
   scoped-CSS nicht 100 % ausblenden (Shadow-DOM-barrier für Label-Slot). Die Labels
   werden durch overflow:hidden + sehr enge Breite abgeschnitten — visuell funktional.
   Tooltips über title-Attribut bleiben auf den FluentNavLink-Elementen erhalten.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1199px) {

    /* Sidebar → 56px-Rail (Tablet) */
    [b-nydnr870gb] .fluent-nav-menu {
        width: 56px !important;
        min-width: 56px !important;
        overflow: hidden !important;
    }

    /* Nav-Links: nur Icon (Buchstabe/Abkürzung durch overflow verdeckt).
       Pille/margin-inline auf 0 zurücksetzen im Rail-Mode. */
    [b-nydnr870gb] .fluent-nav-link {
        overflow: hidden;
        white-space: nowrap;
        min-height: 44px;  /* Touch-Ziel 44px */
        justify-content: center;
        margin-inline: 0 !important;
        border-radius: 0 !important;
    }

    /* Nav-Group-Label ausblenden */
    [b-nydnr870gb] .fluent-nav-group > div.fluent-nav-link {
        display: none;
    }

    /* Smile auf Rail zentrieren */
    .mo-sidebar-smile[b-nydnr870gb] {
        padding: 4px 0 8px;
    }
}
/* /Pages/Cockpit/Cockpit.razor.rz.scp.css */
/* ==========================================================================
   Cockpit.razor.css — Scoped-Styling für Lohnlauf-Cockpit
   Plan §5 (Roster/Badges/KPI) + §6 (KPI-Hero)
   Konsumiert --mo-*-Tokens aus modus-theme.css (Strang A0).
   Nutzt ::deep für FluentDataGrid-interne Web-Component-Elemente.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. KPI-Hero-Reihe (Plan §6)
      4-Card-Grid, horizontal, über dem Roster.
   -------------------------------------------------------------------------- */

.mo-kpi-row[b-coctab0c1l] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 24px;
    margin-bottom: 24px;
}

.mo-kpi-card[b-coctab0c1l] {
    background-color: var(--mo-surface);
    border: 1px solid var(--mo-hairline);
    border-top: 3px solid var(--mo-border);
    border-radius: var(--mo-radius-md);
    box-shadow: var(--mo-elev-card);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Grüner Top-Akzent auf der erfasst-Quote-Card */
.mo-kpi-card--accent[b-coctab0c1l] {
    border-top-color: var(--mo-green);
}

.mo-kpi-label[b-coctab0c1l] {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mo-muted);
    text-align: center;
}

.mo-kpi-value[b-coctab0c1l] {
    font-size: 28px;
    font-weight: 700;
    color: var(--mo-ink);
    line-height: 1.1;
    font-variant-numeric: tabular-nums slashed-zero lining-nums;
    font-feature-settings: 'tnum' 1, 'zero' 1;
    text-align: center;
}

.mo-kpi-sub[b-coctab0c1l] {
    font-size: 12px;
    color: var(--mo-muted);
    text-align: center;
}

/* Fortschrittsbalken (immer sichtbar, auch 0 %) */
.mo-kpi-progress-track[b-coctab0c1l] {
    height: 6px;
    background-color: var(--mo-hairline);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
    width: 100%;
}

.mo-kpi-progress-fill[b-coctab0c1l] {
    height: 100%;
    background-color: var(--mo-green);
    border-radius: 3px;
    transition: width var(--mo-motion-fast);
    min-width: 0;
}

/* Tablet: KPI 2-spaltig (768–1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
    .mo-kpi-row[b-coctab0c1l] {
        grid-template-columns: repeat(2, 1fr);
    }

    .mo-kpi-value[b-coctab0c1l] {
        font-size: 22px;
    }
}

/* Sehr schmale Viewports: 1-spaltig */
@media (max-width: 767px) {
    .mo-kpi-row[b-coctab0c1l] {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   2. FluentDataGrid — Roster-Styling
      WICHTIG (DOM-verifiziert, FluentUI v4 4.14.2): FluentDataGrid rendert sein
      <table class="fluent-data-grid"> in EINEM EIGENEN CSS-Isolation-Scope
      (eigene b-xxxx-Attribute). Cockpits ::deep-Scope-Attribut landet NICHT auf
      einem Vorfahren der Grid-Zeilen → ::deep-Regeln auf das Grid greifen NICHT.
      Daher sind Header/Zebra/Hover/Aktiv/Focus des Rosters GLOBAL in
      modus-theme.css (§17), gekeyt auf table[data-testid="roster-grid"].
      Hier verbleiben nur Regeln auf Cockpit-eigene (gescopte) Elemente.
   -------------------------------------------------------------------------- */

/* Geld/Stunden-Klassen: tabular-nums, Farbe */
[b-coctab0c1l] .money,
[b-coctab0c1l] .money-hero,
[b-coctab0c1l] .hours {
    font-variant-numeric: tabular-nums slashed-zero lining-nums;
    font-feature-settings: 'tnum' 1, 'zero' 1;
    color: var(--mo-ink);
}

/* --------------------------------------------------------------------------
   3. Inline-Edit FluentNumberField — Fokus-Styling via ::deep
      border + Focus-Ring in Grün (best effort, Shadow-DOM-Grenze).
   -------------------------------------------------------------------------- */

[b-coctab0c1l] fluent-number-field:focus-within,
[b-coctab0c1l] fluent-number-field[focused] {
    border-color: var(--mo-green-interactive) !important;
    border-radius: var(--mo-radius-xs);
    /* B5: color-mix statt hardcoded rgba — theme-aware, Alpha bleibt erhalten (20 %) */
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mo-green-interactive) 20%, transparent);
}

[b-coctab0c1l] fluent-number-field .control:focus {
    outline: none;
    border: 1px solid var(--mo-green-interactive);
    border-radius: var(--mo-radius-xs);
}

/* --------------------------------------------------------------------------
   4. Tablet-Anpassungen (768–1199px)
   -------------------------------------------------------------------------- */

/* (Touch-Zeilenhöhe für Tablet ist global in modus-theme.css §17 — siehe Hinweis oben.) */

/* --------------------------------------------------------------------------
   5. Save-State UI (Strang D — Pending/Failed/Retry)
   -------------------------------------------------------------------------- */

/* Pending-Puls: dezenter Pulseffekt auf der Wrapper-div während Save läuft */
.mo-pending-pulse[b-coctab0c1l] {
    animation: mo-pulse-b-coctab0c1l 1.2s ease-in-out infinite;
}

@keyframes mo-pulse-b-coctab0c1l {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
}

/* Reduced-motion: Puls deaktivieren */
@media (prefers-reduced-motion: reduce) {
    .mo-pending-pulse[b-coctab0c1l] {
        animation: none;
    }
}

/* Inline-Retry-Link (Text-Link, kein Button) */
.mo-retry-link[b-coctab0c1l] {
    display: block;
    font-size: 12px;
    color: var(--mo-danger, #B91C1C);
    cursor: pointer;
    text-decoration: underline;
    margin-top: 2px;
    white-space: nowrap;
}

.mo-retry-link:hover[b-coctab0c1l] {
    color: var(--mo-danger-hover, #991B1B);
}

/* Persistenter Fehler-Banner oben (Save-Fehler, bleibt bis aufgelöst)
   B5: hardcoded hex (#FEF2F2 / #F87171 / #B91C1C und Dark-Override mit #FCA5A5)
   → token-basiert via color-mix. color-mix ist theme-aware: im Dark-Modus liefern
   --mo-danger (= #F0908A) + --mo-surface (= dunkle Fläche) automatisch das korrekte
   Ergebnis — kein separater body[data-theme="dark"]-Block nötig. */
.mo-save-error-banner[b-coctab0c1l] {
    background: color-mix(in srgb, var(--mo-danger) 8%, var(--mo-surface));
    border: 1px solid color-mix(in srgb, var(--mo-danger) 45%, var(--mo-surface));
    border-radius: var(--mo-radius-sm, 4px);
    padding: 10px 14px;
    color: var(--mo-danger);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   6. Festgeschrieben-Badge (Period-Lock, D6/D8/D12)
   -------------------------------------------------------------------------- */

.mo-badge--frozen[b-coctab0c1l] {
    background-color: var(--mo-hairline);
    color: var(--mo-ink-3, var(--mo-muted));
    border: 1px solid var(--mo-border);
    font-weight: 600;
    white-space: nowrap;
}
/* /Pages/Employees/EmployeeDetail.razor.rz.scp.css */
/* ==========================================================================
   EmployeeDetail.razor.css — Scoped-Styling für Personen-Detail
   Plan §5 (Strang D) — Tabs, DataGrids (Roster-Sprache), Saldo-Cards.
   Konsumiert --mo-*-Tokens aus modus-theme.css (Strang A0).
   Nutzt ::deep für FluentTabs/FluentDataGrid-interne Web-Component-Elemente.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FluentTabs — aktiver Tab: EINZIGER Marker ist FASTs nativer activeIndicator
      (die kleine grüne Linie, ::part(activeIndicator)). Wir bauen NICHTS drumherum:
      kein Custom-Underline, kein Fill, keine Umrandung. Nur Fettschrift + --mo-ink
      als dezenter A11y-Zusatz.
   -------------------------------------------------------------------------- */

/* Aktiver Tab: nur fett + --mo-ink (nativer activeIndicator markiert „aktiv") */
[b-uqojsubyi3] fluent-tabs [slot="tablist"] fluent-tab[aria-selected="true"],
[b-uqojsubyi3] fluent-tab[aria-selected="true"] {
    color: var(--mo-ink);
    font-weight: 600;
}

/* Hover auf inaktiven Tabs (wie im Original, ohne Zusatz) */
[b-uqojsubyi3] fluent-tab:not([aria-selected="true"]):hover {
    color: var(--mo-ink);
    background-color: var(--mo-green-tint-hover);
}

/* --------------------------------------------------------------------------
   2. FluentDataGrid — Roster-Sprache (Zeitkonto / Urlaub / Historie)
      Gleiche Technik wie Cockpit.razor.css.
      ::deep nötig da FluentDataGrid Web-Component-interne DOM-Elemente erzeugt.
   -------------------------------------------------------------------------- */

/* Grid-Wrapper */
[b-uqojsubyi3] fluent-data-grid {
    width: 100%;
    background-color: var(--mo-surface);
    border: 1px solid var(--mo-hairline);
    border-radius: var(--mo-radius-md);
    overflow: hidden;
}

/* Header-Zeilen: sticky, muted uppercase */
[b-uqojsubyi3] fluent-data-grid-row[row-type="header"] {
    position: sticky;
    top: 0;
    background-color: var(--mo-page) !important;
    z-index: 1;
    border-bottom: 2px solid var(--mo-border);
}

[b-uqojsubyi3] fluent-data-grid-cell.column-header {
    color: var(--mo-muted);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Aktives Sortier-Icon grün */
[b-uqojsubyi3] fluent-data-grid-cell.column-header svg,
[b-uqojsubyi3] fluent-data-grid-cell.column-header [class*="sort"] {
    color: var(--mo-green-interactive);
    fill: var(--mo-green-interactive);
}

/* Datenzeilen: Zeilenhöhe 36px Desktop */
[b-uqojsubyi3] fluent-data-grid-row[row-type="default"] {
    min-height: 36px;
    transition: background-color var(--mo-motion-fast);
    /* B3: Kante-zu-Kante Zeilen-Trenner auf der Row (statt Cell-border-bottom) */
    border-bottom: 1px solid var(--mo-hairline);
}

/* Zebra-Striping */
[b-uqojsubyi3] fluent-data-grid-row[row-type="default"]:nth-child(odd) {
    background-color: var(--mo-surface);
}

[b-uqojsubyi3] fluent-data-grid-row[row-type="default"]:nth-child(even) {
    background-color: var(--mo-surface-2);
}

/* Hover */
[b-uqojsubyi3] fluent-data-grid-row[row-type="default"]:hover {
    background-color: var(--mo-green-tint-hover);
}

/* Datenzellen */
[b-uqojsubyi3] fluent-data-grid-cell {
    color: var(--mo-ink);
    /* B3: border-bottom entfernt — Trenner liegt jetzt auf der Row (s. o.), nicht auf der Cell */
    display: flex;
    align-items: center;
}

/* Geld/Stunden: tabular-nums, Ausrichtung rechts */
[b-uqojsubyi3] .money,
[b-uqojsubyi3] .hours {
    font-variant-numeric: tabular-nums slashed-zero lining-nums;
    font-feature-settings: 'tnum' 1, 'zero' 1;
    color: var(--mo-ink);
}

/* --------------------------------------------------------------------------
   3. Saldo-/Rest-Cards (Zeitkonto + Urlaubskonto)
      Via FluentCard — BG, Border, Radius, Shadow, optionaler grüner Top-Akzent
   -------------------------------------------------------------------------- */

/* Zeitkonto + Urlaubskonto Saldo-Card: grüner Top-Akzent via first-of-type */
[b-uqojsubyi3] fluent-card {
    background-color: var(--mo-surface);
    border: 1px solid var(--mo-hairline);
    border-radius: var(--mo-radius-md);
    box-shadow: var(--mo-elev-card);
}

/* Tablet-Anpassungen */
@media (min-width: 768px) and (max-width: 1199px) {
    [b-uqojsubyi3] fluent-data-grid-row[row-type="default"] {
        min-height: 44px;
    }
}

/* --------------------------------------------------------------------------
   4. Feld-Label (Stammdaten View/Edit) — vormals 10× Inline-Style (#16)
      FluentLabel rendert als <p class="fluent-typography">. Die FAST-eigene
      .fluent-typography-Regel setzt font-weight/font-size bei GLEICHER Spezifität
      (0,0,1,0) → ein einfaches ::deep .mo-field-label verliert per Source-Order.
      Daher an .fluent-typography koppeln (Spezifität 0,0,2,0) → schlägt FAST
      zuverlässig OHNE !important (Token-Hygiene). color greift ohnehin (FAST
      setzt dort keine color). Werte byte-identisch zum vormaligen Inline-Style.
   -------------------------------------------------------------------------- */
[b-uqojsubyi3] .fluent-typography.mo-field-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--mo-muted);
}

/* --------------------------------------------------------------------------
   Stammdaten-Karte als plain <div> statt <FluentCard>. Grund: die
   <fluent-card>-Web-Component clippt das inline gerenderte fluent-select-Popup
   an ihrer Box (Gehaltsgruppe/Entgeltstufe/AVR-Jahr im Edit) — unabhängig von
   overflow/contain-Overrides (live in Chrome verifiziert). Ein plain div hat
   diese Clipping-Box nicht → das Dropdown läuft frei über die Kartenkante.
   Optik byte-nah zu FluentCard: --mo-surface / --mo-hairline / --mo-elev-card /
   --mo-radius-md, padding 1.5rem, margin-top 0.75rem (= vormalige Inline-Werte).
   -------------------------------------------------------------------------- */
.mo-detail-card[b-uqojsubyi3] {
    background-color: var(--mo-surface);
    border: 1px solid var(--mo-hairline);
    border-radius: var(--mo-radius-md, 6px);
    box-shadow: var(--mo-elev-card, 0 1px 3px rgba(0, 0, 0, .06));
    color: var(--mo-ink);
    padding: 1.5rem;
    margin-top: 0.75rem;
    box-sizing: border-box;
}
/* /Pages/Employees/EmployeeList.razor.rz.scp.css */
/* ==========================================================================
   EmployeeList.razor.css — Scoped-Styling für Mitarbeiterliste
   Plan §5 (Strang D) — DataGrid in Roster-Sprache.
   Konsumiert --mo-*-Tokens aus modus-theme.css (Strang A0).
   Nutzt ::deep für FluentDataGrid-interne Web-Component-Elemente.
   ========================================================================== */

/* Grid-Wrapper */
[b-eisqajlqzj] fluent-data-grid {
    width: 100%;
    background-color: var(--mo-surface);
    border: 1px solid var(--mo-hairline);
    border-radius: var(--mo-radius-md);
    overflow: hidden;
}

/* Header-Zeilen */
[b-eisqajlqzj] fluent-data-grid-row[row-type="header"] {
    position: sticky;
    top: 0;
    background-color: var(--mo-page) !important;
    z-index: 1;
    border-bottom: 2px solid var(--mo-border);
}

[b-eisqajlqzj] fluent-data-grid-cell.column-header {
    color: var(--mo-muted);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Sortier-Icon */
[b-eisqajlqzj] fluent-data-grid-cell.column-header svg,
[b-eisqajlqzj] fluent-data-grid-cell.column-header [class*="sort"] {
    color: var(--mo-green-interactive);
    fill: var(--mo-green-interactive);
}

/* Datenzeilen */
[b-eisqajlqzj] fluent-data-grid-row[row-type="default"] {
    min-height: 36px;
    transition: background-color var(--mo-motion-fast);
    /* B3: Kante-zu-Kante Zeilen-Trenner auf der Row (statt Cell-border-bottom) */
    border-bottom: 1px solid var(--mo-hairline);
}

/* Zebra-Striping */
[b-eisqajlqzj] fluent-data-grid-row[row-type="default"]:nth-child(odd) {
    background-color: var(--mo-surface);
}

[b-eisqajlqzj] fluent-data-grid-row[row-type="default"]:nth-child(even) {
    background-color: var(--mo-surface-2);
}

/* Hover */
[b-eisqajlqzj] fluent-data-grid-row[row-type="default"]:hover {
    background-color: var(--mo-green-tint-hover);
}

/* Datenzellen */
[b-eisqajlqzj] fluent-data-grid-cell {
    color: var(--mo-ink);
    /* B3: border-bottom entfernt — Trenner liegt jetzt auf der Row (s. o.), nicht auf der Cell */
    display: flex;
    align-items: center;
}

/* Inline-AVR-Jahr-Auswahl in der Tabelle (natives <select> → Popup nicht vom Grid-overflow geclippt) */
.mo-inline-year[b-eisqajlqzj] {
    font: inherit;
    color: var(--mo-ink);
    background-color: var(--mo-surface);
    border: 1px solid var(--mo-border);
    border-radius: var(--mo-radius-sm, 4px);
    padding: 2px 6px;
    min-width: 72px;
    cursor: pointer;
}

.mo-inline-year:hover[b-eisqajlqzj] {
    border-color: var(--mo-green-interactive);
}

.mo-inline-year:focus-visible[b-eisqajlqzj] {
    outline: 2px solid var(--accent-fill-rest, #5A8A00);
    outline-offset: -1px;
}

/* Hinweis: Das Fill-/Scroll-Layout (Titel+Button fix, nur Tabellen-Rows scrollen) liegt GLOBAL
   in modus-theme.css (.mo-w-list / .mo-emp-stack / table.fluent-data-grid), weil FluentStack &
   FluentDataGrid als Kind-Komponenten das scoped b-xxx-Attribut nicht erhalten. */

/* Tablet */
@media (min-width: 768px) and (max-width: 1199px) {
    [b-eisqajlqzj] fluent-data-grid-row[row-type="default"] {
        min-height: 44px;
    }
}
/* /Pages/Rollover/YearEndRollover.razor.rz.scp.css */
/* ==========================================================================
   YearEndRollover.razor.css — Scoped-Styling für Jahresabschluss / Rollover
   Plan §5 (Strang D) — DataGrid (Ergebnistabelle) in Roster-Sprache.
   Konsumiert --mo-*-Tokens aus modus-theme.css (Strang A0).
   Nutzt ::deep für FluentDataGrid-interne Web-Component-Elemente.
   ========================================================================== */

/* Grid-Wrapper */
[b-nr0p55rm1n] fluent-data-grid {
    width: 100%;
    background-color: var(--mo-surface);
    border: 1px solid var(--mo-hairline);
    border-radius: var(--mo-radius-md);
    overflow: hidden;
}

/* Header-Zeilen */
[b-nr0p55rm1n] fluent-data-grid-row[row-type="header"] {
    background-color: var(--mo-page) !important;
    border-bottom: 2px solid var(--mo-border);
}

[b-nr0p55rm1n] fluent-data-grid-cell.column-header {
    color: var(--mo-muted);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Datenzeilen */
[b-nr0p55rm1n] fluent-data-grid-row[row-type="default"] {
    min-height: 36px;
    transition: background-color var(--mo-motion-fast);
    /* B3: Kante-zu-Kante Zeilen-Trenner auf der Row (statt Cell-border-bottom) */
    border-bottom: 1px solid var(--mo-hairline);
}

/* Zebra-Striping */
[b-nr0p55rm1n] fluent-data-grid-row[row-type="default"]:nth-child(odd) {
    background-color: var(--mo-surface);
}

[b-nr0p55rm1n] fluent-data-grid-row[row-type="default"]:nth-child(even) {
    background-color: var(--mo-surface-2);
}

/* Hover */
[b-nr0p55rm1n] fluent-data-grid-row[row-type="default"]:hover {
    background-color: var(--mo-green-tint-hover);
}

/* Datenzellen — tabular-nums für Urlaubs- und Zeitkontowerte */
[b-nr0p55rm1n] fluent-data-grid-cell {
    color: var(--mo-ink);
    /* B3: border-bottom entfernt — Trenner liegt jetzt auf der Row (s. o.), nicht auf der Cell */
    display: flex;
    align-items: center;
    font-variant-numeric: tabular-nums slashed-zero lining-nums;
}