/* ──────────────────────────────────────────────────────────────────────
   neo42 SideQuest — MudBlazor global overrides
   Maps MudBlazor's Material defaults to the V2 ("Data-Forward") look.

   Load order:
     1) <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
     2) <link href="css/neo42-mudblazor.css" rel="stylesheet" />     ← THIS
     3) <link href="css/site.css" rel="stylesheet" />               (your app)

   What it does:
     • Brand tokens as CSS vars (mirror MudBlazor's --mud-palette-* so you
       can use either name in your views).
     • Border radius → 0 (sharp corners).
     • Buttons → flat, no ripple, mixed case.
     • Inputs → outlined-only, no floating animation, eyebrow-friendly.
     • Tables → uppercase headers, no hover-ripple, dense by default.
     • Chips / Status pills → rectangular, color-coded.
     • Dialog / Menu / Tooltip → sharp, quiet shadows.
     • Stepper, Tabs, DatePicker → red accent + sharp geometry.
     • Switch → narrow rectangular V2-toggle.
     • Tabular nums everywhere a class .num is set (or .mud-table .num).
   ────────────────────────────────────────────────────────────────────── */

@font-face {
    font-family: "Unit Pro";
    src: url("../fonts/UnitPro-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Unit Pro";
    src: url("../fonts/UnitPro-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ─── 1) Brand tokens (mirror tokens.css + MudBlazor palette vars) ─── */
:root, .mud-theme-light, .theme-light {
    --n42-rot: #e2000f;
    --n42-rot-deep: #b8000c;
    --n42-rot-soft: #fde6e7;
    --n42-schwarz: #111111;
    --n42-blau: #0071aa;
    --n42-blau-soft: #e3f0f7;
    --n42-gruen: #08a697;
    --n42-gruen-soft: #def4f1;
    --n42-orange: #ec6935;
    --n42-orange-soft: #fde6dc;
    --n42-navy: #082452;
    --bg-page: #f6f6f6;
    --bg-card: #ffffff;
    --bg-sunken: #efefef;
    --bg-quiet: #fafafa;
    --bg-overlay: rgba(17,17,17,.06);
    --fg-1: #111111;
    --fg-2: #3a3a3a;
    --fg-3: #6b6b6b;
    --fg-4: #9a9a9a;
    --line-1: #ececec;
    --line-2: #dadada;
    --line-3: #c4c4c4;
    --status-draft-bg: #ececec;
    --status-draft-fg: #444;
    --status-pending-bg: #fff0d1;
    --status-pending-fg: #8a5b00;
    --status-review-bg: #e3f0f7;
    --status-review-fg: #034a72;
    --status-approved-bg: #def4f1;
    --status-approved-fg: #00574f;
    --status-rejected-bg: #fde6e7;
    --status-rejected-fg: #a30009;
    /* Geometry */
    --mud-default-borderradius: 0px;
    --n42-radius-pill: 0;
}

.mud-theme-dark, .theme-dark {
    --n42-rot: #ff3340;
    --n42-rot-deep: #e2000f;
    --n42-rot-soft: #3a1014;
    --n42-blau: #4aa8d8;
    --n42-blau-soft: #0e2939;
    --n42-gruen: #2ec9b8;
    --n42-gruen-soft: #0b2e2b;
    --n42-orange: #ff8459;
    --n42-orange-soft: #3a1f10;
    --bg-page: #0d0f13;
    --bg-card: #161a21;
    --bg-sunken: #0a0c10;
    --bg-quiet: #1c2129;
    --bg-overlay: rgba(255,255,255,.04);
    --fg-1: #f4f5f7;
    --fg-2: #c8ccd3;
    --fg-3: #8d939d;
    --fg-4: #5d636d;
    --line-1: #22262e;
    --line-2: #2c313a;
    --line-3: #3a4049;
    --status-draft-bg: #262a32;
    --status-draft-fg: #b0b6bf;
    --status-pending-bg: #3a2d10;
    --status-pending-fg: #f5c25b;
    --status-review-bg: #0e2939;
    --status-review-fg: #6cbce4;
    --status-approved-bg: #0d2f2b;
    --status-approved-fg: #4ed6c5;
    --status-rejected-bg: #3a1014;
    --status-rejected-fg: #ff6470;
}

/* ─── 2) Global type & numerics ─────────────────────────────────────── */
html, body {
    font-family: "Unit Pro", "Inter", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "ss01", "ss02";
}

/* Force the MudBlazor typography variables onto "Unit Pro" so every typed
   component (MudText, MudTable cells, MudInput, MudChip, MudButton) honors
   the brand font even when the theme inlines var(--mud-typography-*-family). */
:root, .mud-theme-light, .mud-theme-dark, .theme-light, .theme-dark {
    --mud-typography-default-family: "Unit Pro", "Inter", "Helvetica Neue", Arial, sans-serif;
    --mud-typography-h1-family: "Unit Pro", "Inter", "Helvetica Neue", Arial, sans-serif;
    --mud-typography-h2-family: "Unit Pro", "Inter", "Helvetica Neue", Arial, sans-serif;
    --mud-typography-h3-family: "Unit Pro", "Inter", "Helvetica Neue", Arial, sans-serif;
    --mud-typography-h4-family: "Unit Pro", "Inter", "Helvetica Neue", Arial, sans-serif;
    --mud-typography-h5-family: "Unit Pro", "Inter", "Helvetica Neue", Arial, sans-serif;
    --mud-typography-h6-family: "Unit Pro", "Inter", "Helvetica Neue", Arial, sans-serif;
    --mud-typography-subtitle1-family: "Unit Pro", "Inter", "Helvetica Neue", Arial, sans-serif;
    --mud-typography-subtitle2-family: "Unit Pro", "Inter", "Helvetica Neue", Arial, sans-serif;
    --mud-typography-body1-family: "Unit Pro", "Inter", "Helvetica Neue", Arial, sans-serif;
    --mud-typography-body2-family: "Unit Pro", "Inter", "Helvetica Neue", Arial, sans-serif;
    --mud-typography-button-family: "Unit Pro", "Inter", "Helvetica Neue", Arial, sans-serif;
    --mud-typography-caption-family: "Unit Pro", "Inter", "Helvetica Neue", Arial, sans-serif;
    --mud-typography-overline-family: "Unit Pro", "Inter", "Helvetica Neue", Arial, sans-serif;
    --mud-typography-input-family: "Unit Pro", "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* Tables: belt-and-braces — force the loaded family on every cell, header,
   pagination element, and footer regardless of any inlined style. */
.mud-table, .mud-table-cell, .mud-table-head, .mud-table-body,
.mud-table .mud-table-pagination,
.mud-data-grid, .mud-table-root,
.mud-table-toolbar {
    font-family: "Unit Pro", "Inter", "Helvetica Neue", Arial, sans-serif !important;
}

.num, .mud-num, .mud-input-control input[inputmode="numeric"],
.mud-input-control input[type="number"] {
    font-variant-numeric: tabular-nums;
}

/* Eyebrow label (use .n42-eyebrow on any element) */
.n42-eyebrow {
    font-size: 13.8px;
    font-weight: 700;
    color: var(--fg-3);
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ─── 3) Buttons ─────────────────────────────────────────────────────
   MudBlazor default = Material with elevation + uppercase + ripple.
   V2 = flat, mixed case, no ripple, primary = solid red.            */
.mud-button-root {
    border-radius: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transition: background-color 120ms, color 120ms, border-color 120ms;
}

    .mud-button-root.mud-button-filled-primary {
        background-color: var(--n42-rot);
        color: #fff;
    }

        .mud-button-root.mud-button-filled-primary:hover {
            background-color: var(--n42-rot-deep);
        }

    .mud-button-root.mud-button-outlined {
        border: 1px solid var(--line-2);
        background-color: transparent;
        color: var(--fg-1);
    }

        .mud-button-root.mud-button-outlined:hover {
            background-color: var(--bg-quiet);
        }

    .mud-button-root.mud-button-text {
        color: var(--n42-rot);
    }

        .mud-button-root.mud-button-text:hover {
            background-color: var(--n42-rot-soft);
        }

.mud-icon-button {
    border-radius: 0 !important;
}

    .mud-icon-button:hover {
        background-color: var(--bg-overlay) !important;
    }

/* Ripples left at MudBlazor defaults — earlier overrides (display:none, then
   opacity:0) hid not just the ripple wave but the click-target container
   that wraps content in MudBlazor 9 (MudIconButton, MudButton, MudMenu
   activator, MudSelect item, MudDatePicker day cell). Result: invisible
   day cells, empty dropdown popovers, missing wizard buttons. Cosmetic
   ripple is an acceptable trade for working components. */

/* ─── 4) Cards / Paper ──────────────────────────────────────────────── */
.mud-paper, .mud-card {
    border-radius: 0 !important;
    background-color: var(--bg-card);
}

    .mud-paper.mud-elevation-1,
    .mud-card.mud-elevation-1 {
        box-shadow: none !important;
        border: 1px solid var(--line-1);
    }

.mud-card-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--line-1);
}

.mud-card-content {
    padding: 18px 22px;
}

.mud-card-actions {
    padding: 14px 18px;
    border-top: 1px solid var(--line-1);
}

/* ─── 5) Inputs / TextField / Select ─────────────────────────────────
   V2 uses static eyebrow labels above the field, sharp rectangular
   outlined inputs. Use <MudTextField Variant="Variant.Outlined" /> and
   skip the Label prop — render the label yourself with .n42-eyebrow.

   If you DO use floating labels (MudBlazor default), this CSS at least
   sharpens corners and colors.                                      */
.mud-input-control .mud-input-outlined-border {
    border-radius: 0 !important;
    border-color: var(--line-1);
}

.mud-input-control.mud-input-focused .mud-input-outlined-border,
.mud-input-control:hover:not(.mud-disabled) .mud-input-outlined-border,
.mud-input-outlined.mud-focused .mud-input-outlined-border,
.mud-input.mud-focused .mud-input-outlined-border,
.mud-input-control.mud-focused .mud-input-outlined-border,
.mud-input-control.mud-focused > fieldset {
    border-color: var(--n42-rot) !important;
}
/* Focused label colour (purple → brand red). */
.mud-input-control.mud-input-focused .mud-input-label,
.mud-input-outlined.mud-focused .mud-input-label-outlined,
.mud-input.mud-focused .mud-input-label,
.mud-input-label.mud-input-label-outlined.mud-shrink {
    color: var(--n42-rot) !important;
}

.mud-input-control .mud-input-slot input,
.mud-input-control .mud-input-slot textarea,
.mud-select-input {
    font-family: inherit;
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--fg-1);
}

.mud-input-label,
.mud-input-label.mud-input-label-outlined {
    font-family: inherit;
    font-weight: 700;
    color: var(--fg-3);
}

    .mud-input-label.mud-input-label-outlined.mud-input-label-shrink {
        color: var(--n42-rot);
        font-size: 13.8px;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

.mud-input-helper-text {
    font-size: 13.8px;
    color: var(--fg-3);
}

    .mud-input-helper-text.mud-input-error {
        color: var(--n42-rot);
    }

/* "Static" alternative — render <label class="n42-eyebrow"> above an
   outlined input and add .n42-static onto the MudTextField. */
.n42-static .mud-input-control .mud-input-label {
    display: none;
}

.n42-static .mud-input-control .mud-input-outlined-border {
    top: 0;
}

/* Disabled */
.mud-input-control.mud-disabled .mud-input-outlined-border {
    background: var(--bg-quiet);
    border-color: var(--line-1);
}

/* ─── 6) Chips / Status pills ───────────────────────────────────────── */
.mud-chip {
    border-radius: 0 !important;
    height: auto;
    padding: 4px 10px;
    font-size: 14.4px;
    font-weight: 700;
    background-color: var(--bg-quiet);
    color: var(--fg-1);
    border: 1px solid var(--line-1);
}

    .mud-chip.mud-chip-color-primary {
        background: var(--n42-rot);
        color: #fff;
        border-color: var(--n42-rot);
    }

    .mud-chip.mud-chip-color-info {
        background: var(--status-review-bg);
        color: var(--status-review-fg);
        border-color: transparent;
    }

    .mud-chip.mud-chip-color-success {
        background: var(--status-approved-bg);
        color: var(--status-approved-fg);
        border-color: transparent;
    }

    .mud-chip.mud-chip-color-warning {
        background: var(--status-pending-bg);
        color: var(--status-pending-fg);
        border-color: transparent;
    }

    .mud-chip.mud-chip-color-error {
        background: var(--status-rejected-bg);
        color: var(--status-rejected-fg);
        border-color: transparent;
    }

    .mud-chip.mud-chip-color-default {
        background: var(--status-draft-bg);
        color: var(--status-draft-fg);
        border-color: transparent;
    }

    /* Status pill with dot — add .n42-pill onto a MudChip */
    .mud-chip.n42-pill::before {
        content: "";
        width: 6px;
        height: 6px;
        background: currentColor;
        display: inline-block;
        margin-right: 6px;
    }

/* ─── 7) Tables ─────────────────────────────────────────────────────── */
.mud-table {
    background-color: var(--bg-card);
    border: 1px solid var(--line-1);
    border-radius: 0 !important;
}

    .mud-table .mud-table-toolbar {
        border-bottom: 1px solid var(--line-1);
    }

    .mud-table thead .mud-table-head .mud-table-row .mud-table-cell,
    .mud-table thead .mud-table-cell {
        background: var(--bg-quiet);
        color: var(--fg-3);
        font-size: 13.8px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        padding: 12px 14px;
        border-bottom: 1px solid var(--line-1);
    }

    .mud-table tbody .mud-table-cell {
        padding: 12px 14px;
        font-size: 15.6px;
        color: var(--fg-1);
        border-bottom: 1px solid var(--line-1);
    }

    .mud-table tbody .mud-table-row:hover .mud-table-cell {
        background: var(--bg-quiet) !important;
    }

    .mud-table tbody .mud-table-row:last-child .mud-table-cell {
        border-bottom: none;
    }

    .mud-table .mud-table-pagination {
        border-top: 1px solid var(--line-1);
    }

/* ─── 8) Tabs ───────────────────────────────────────────────────────── */
.mud-tabs .mud-tabs-toolbar {
    background: transparent;
    box-shadow: none;
}

.mud-tabs .mud-tab {
    text-transform: none;
    font-weight: 700;
    font-size: 16.2px;
    letter-spacing: 0;
    color: var(--fg-3);
    min-width: 0;
    padding: 0 14px;
}

    .mud-tabs .mud-tab.mud-tab-active {
        color: var(--fg-1);
    }

.mud-tabs .mud-tab-slider {
    background-color: var(--n42-rot) !important;
    height: 2px;
}

/* ─── 9) Stepper (MudStepper, v7+) ──────────────────────────────────── */
.mud-stepper-nav-step .mud-stepper-nav-step-content {
    background: var(--bg-quiet);
    color: var(--fg-3);
    border-radius: 0;
    width: 22px;
    height: 22px;
    font-size: 13.2px;
    font-weight: 700;
}

.mud-stepper-nav-step.mud-stepper-nav-step-active .mud-stepper-nav-step-content {
    background: var(--n42-rot);
    color: #fff;
}

.mud-stepper-nav-step.mud-stepper-nav-step-completed .mud-stepper-nav-step-content {
    background: var(--n42-schwarz);
    color: #fff;
}

.mud-stepper-nav-step-label {
    font-size: 14.4px;
    font-weight: 700;
}

.mud-stepper-nav-connector {
    background: var(--line-2);
    height: 1px;
}

/* ─── 10) Dialog / Modal ────────────────────────────────────────────── */
.mud-dialog {
    border-radius: 0 !important;
    background: var(--bg-card);
}

.mud-dialog-title {
    padding: 22px 24px 8px;
    font-family: "Unit Pro", sans-serif;
    font-size: 20.4px;
    font-weight: 700;
    border-bottom: none;
}

.mud-dialog-content {
    padding: 8px 24px 18px;
}

.mud-dialog-actions {
    padding: 14px 24px 22px;
    border-top: none;
}

.mud-overlay-scrim {
    background: rgba(0,0,0,.45) !important;
}

/* ─── 11) Menu / Popover ────────────────────────────────────────────── */
.mud-popover, .mud-menu-popover {
    border-radius: 0 !important;
    background: var(--bg-card);
    border: 1px solid var(--line-1);
    box-shadow: 0 4px 14px rgba(17,17,17,.06), 0 2px 4px rgba(17,17,17,.04) !important;
}
/* MudSelect and MudAutocomplete render their item list inside a popover with
   class `mud-popover-open`. Ensure they receive the same visibility/elevation
   as the menu popover even if MudBlazor flips the class name across versions. */
.mud-popover-open,
.mud-select-popover-paper,
.mud-autocomplete-popover-paper {
    background: var(--bg-card) !important;
    border: 1px solid var(--line-1);
    z-index: 1500;
}
/* Double-scrollbar fix for MudSelect / MudAutocomplete: when MaxHeight is set,
   MudPopover applies BOTH `max-height` and the `overflow-y-auto` class to the
   popover, while the inner `.mud-list` ALSO scrolls (max-height:inherit;
   overflow-y:auto) — yielding two stacked scrollbars. Let only the inner list
   scroll. Mirrors MudBlazor's own `.mud-popover:has(>.mud-menu-list){overflow:hidden}`
   rule, which covers menus but not the select/autocomplete list. */
.mud-popover:has(> .mud-list) { overflow-y: hidden !important; }

/* On-page help popover (HelpAnchor). Scoped to .n42-help-popover ONLY — never the shared
   .mud-popover rule above, which menus/selects/autocompletes/pickers/tooltips depend on.
   - accent edge + stronger elevation so the box reads as distinct from the page (WI 6677)
   - z-index above the open-popover 1500 so it sits over inline field errors on the receipt. */
.mud-popover.n42-help-popover {
    z-index: 1600 !important;
    background: var(--bg-card);
    border: 1px solid var(--line-3);
    border-left: 3px solid var(--n42-blau);
    box-shadow: 0 10px 30px rgba(17, 17, 17, .16), 0 4px 10px rgba(17, 17, 17, .10) !important;
}

/* Field + inline help icon row: keeps the ? beside its field (instead of dangling below) and
   decoupled from any inline validation alert, so the icon never shifts. Used by the receipt
   OCR fields (WI 6677). */
.n42-field-with-help {
    display: flex;
    align-items: center;
    gap: 4px;
}

    .n42-field-with-help > .mud-input-control {
        flex: 1 1 auto;
        min-width: 0;
    }

.mud-list-item {
    border-radius: 0 !important;
}

    .mud-list-item:hover {
        background: var(--bg-quiet) !important;
    }

.mud-list-item-text {
    font-size: 15px;
    font-weight: 700;
    color: var(--fg-1);
}

/* Row-action button (table cell — visible 3-dot trigger). */
.n42-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--line-1);
    background: var(--bg-card);
    color: var(--fg-1);
    cursor: pointer;
}

    .n42-row-actions:hover {
        background: var(--bg-quiet);
        border-color: var(--line-3);
    }

/* MudSelect chevron icon — must stay visible on the right edge. */
.mud-select .mud-input-adornment,
.mud-select .mud-input-adornment-end {
    display: inline-flex !important;
    align-items: center;
}

/* ─── 12) Tooltip ───────────────────────────────────────────────────── */
.mud-popover.mud-tooltip {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    font-size: 13.8px;
    font-weight: 700;
    border-radius: 0;
    padding: 6px 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* ─── 13) Switch / Toggle — V2 rectangular shape, MudBlazor's native motion.
   Only override visual properties (radius, colors). Do NOT redefine
   transform / position / display — MudBlazor's internal CSS owns the thumb
   movement and we mustn't fight it.

   In MudBlazor 9 the thumb is an inner element with class names like
   `.mud-switch-thumb`, `.mud-switch-base`, or a wrapped `.mud-icon-button`.
   It picks colour from the parent's `color:` (currentColor) and from the
   Color prop on <MudSwitch>. When the Color prop is unset (or in the half-
   coloured ⇢ checked transition state), MudBlazor falls back to its default
   secondary palette, which in the stock theme is violet — visible here as
   the purple thumb circle. The rules below pin the thumb to a neutral
   white in either state. */
.mud-switch-track,
.mud-switch .mud-switch-track {
    border-radius: 0 !important;
    background-color: var(--line-3) !important;
    opacity: 1 !important;
}
/* Visible thumb only — the round/square disc inside the track. Do NOT
   touch `.mud-switch-base`: that's the absolutely-positioned wrapper that
   spans from the start of the track to the thumb position, and tinting it
   produces a white gap between the red track segment and the thumb. */
.mud-switch-thumb,
.mud-switch .mud-switch-thumb,
.mud-switch [class*="switch-thumb"] {
    border-radius: 0 !important;
    background-color: #fff !important;
}
    /* Neutralise the thumb's inner icon colour so MudBlazor's secondary-palette
   purple doesn't bleed through the wrapped MudIconButton / SVG. */
    .mud-switch .mud-icon-button,
    .mud-switch .mud-icon-root,
    .mud-switch .mud-switch-thumb .mud-icon-root,
    .mud-switch svg {
        color: var(--fg-2) !important;
        fill: var(--fg-2) !important;
        background-color: transparent !important;
    }
/* Brand red track when checked — class-name resilient. */
.mud-switch.mud-checked .mud-switch-track,
.mud-switch-checked .mud-switch-track,
.mud-switch:has(input:checked) .mud-switch-track {
    background-color: var(--n42-rot) !important;
}

.mud-switch:has(input:checked) .mud-icon-root,
.mud-switch:has(input:checked) .mud-switch-thumb .mud-icon-root,
.mud-switch:has(input:checked) svg {
    color: var(--n42-rot) !important;
    fill: var(--n42-rot) !important;
}

/* ─── 14) Checkbox / Radio (sharpen) ────────────────────────────────── */
.mud-checkbox .mud-icon-root,
.mud-radio .mud-icon-root {
    width: 18px;
    height: 18px;
}

.mud-checkbox.mud-checked .mud-checkbox-icon {
    color: var(--n42-schwarz);
}

.mud-radio.mud-checked .mud-icon-root {
    color: var(--n42-rot);
}

/* ─── 15) DatePicker / TimePicker ───────────────────────────────────── */
.mud-picker,
.mud-picker .mud-picker-container,
.mud-picker .mud-picker-content,
.mud-picker .mud-picker-paper,
.mud-picker-popover,
.mud-picker .mud-paper {
    border-radius: 0 !important;
    background-color: var(--bg-card) !important;
    color: var(--fg-1) !important;
}
    /* Calendar grid + clock face surface — pick up theme colours instead of
   MudBlazor's hard-coded white that breaks in dark mode. */
    .mud-picker-calendar,
    .mud-picker-calendar-header,
    .mud-picker-month-container,
    .mud-picker-year-container,
    .mud-picker .mud-day-of-week,
    .mud-time-picker-clock,
    .mud-time-picker-clock-container {
        background-color: var(--bg-card) !important;
        color: var(--fg-1) !important;
    }
        /* Weekday labels (Mo · Di · …) — dim. */
        .mud-picker .mud-day-of-week,
        .mud-picker-calendar-header span {
            color: var(--fg-3) !important;
        }
        /* Day cells — base + hover + outside-month + disabled. */
        .mud-picker-calendar .mud-button-day,
        .mud-picker .mud-button-day {
            color: var(--fg-1) !important;
            background-color: transparent !important;
        }

        .mud-picker-calendar .mud-button-outlined,
        .mud-picker .mud-button-outlined {
            border-color: var(--line-2) !important;
        }

    .mud-picker .mud-button-day.mud-disabled,
    .mud-picker .mud-button-day[disabled] {
        color: var(--fg-4) !important;
    }

.mud-picker-toolbar {
    background: var(--n42-rot) !important;
    color: #fff !important;
    border-radius: 0;
}
    /* Force white text on every descendant of any picker toolbar (date + time
   + range) so the selected-date/hour/minute buttons (MudButton-text, which
   our text-button rule otherwise tints brand-red) stay legible on the red
   bar. Only target DESCENDANTS (`* > *`) so the toolbar's own red
   background stays untouched. */
    [class*="picker-toolbar"] > *,
    [class*="picker-toolbar"] > * *,
    .mud-picker-toolbar > *,
    .mud-picker-toolbar > * *,
    .mud-time-picker-toolbar > *,
    .mud-time-picker-toolbar > * * {
        color: #fff !important;
        background-color: transparent !important;
    }

/* MudTimePicker selected hour/minute button — keep white text on red, mark
   the active digit with an underline instead of a coloured pill so the
   contrast against the toolbar stays clean. */
[class*="picker-toolbar"] .mud-button-root.mud-button-text:focus,
[class*="picker-toolbar"] .mud-button-root.mud-button-text.mud-selected,
.mud-time-picker-toolbar .mud-button-root.mud-selected {
    color: #fff !important;
    background-color: transparent !important;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.mud-picker-calendar .mud-button-day,
.mud-picker .mud-button-day {
    border-radius: 0 !important;
    font-weight: 300;
}

    .mud-picker-calendar .mud-button-day.mud-selected,
    .mud-picker .mud-button-day.mud-selected,
    .mud-picker .mud-button-day.mud-button-day-selected,
    .mud-picker .mud-button-day[class*="selected"],
    .mud-time-picker-clock .mud-clock-pin,
    .mud-time-picker-clock .mud-clock-pointer,
    .mud-time-picker-clock .mud-clock-pointer-thumb {
        background: var(--n42-rot) !important;
        background-color: var(--n42-rot) !important;
        color: #fff !important;
        font-weight: 700;
        border-color: var(--n42-rot) !important;
    }

    .mud-picker-calendar .mud-button-day:hover:not(.mud-selected),
    .mud-picker .mud-button-day:hover:not(.mud-selected) {
        background: var(--n42-rot-soft) !important;
        color: var(--fg-1) !important;
    }

/* ─── 16) AppBar / NavBar ───────────────────────────────────────────── */
.mud-appbar {
    background: var(--bg-card) !important;
    color: var(--fg-1) !important;
    border-bottom: 1px solid var(--line-1);
    box-shadow: none !important;
    border-radius: 0;
}

.mud-drawer {
    background: var(--bg-card) !important;
    border-right: 1px solid var(--line-1);
    border-radius: 0;
    box-shadow: none !important;
}

.mud-nav-link {
    border-radius: 0 !important;
    font-weight: 700;
    font-size: 15.6px;
    color: var(--fg-2);
}

    .mud-nav-link.active,
    .mud-nav-link[aria-current="page"] {
        background: var(--bg-quiet);
        color: var(--fg-1);
        border-left: 2px solid var(--n42-rot);
    }

/* ─── 17) Alerts / Snackbar ─────────────────────────────────────────── */
.mud-alert {
    border-radius: 0 !important;
    border-left: 3px solid currentColor;
    padding: 12px 14px;
    font-size: 15px;
}

    .mud-alert.mud-alert-filled-info,
    .mud-alert.mud-alert-text-info {
        background: var(--n42-blau-soft);
        color: var(--n42-blau);
    }

    .mud-alert.mud-alert-filled-success,
    .mud-alert.mud-alert-text-success {
        background: var(--n42-gruen-soft);
        color: var(--n42-gruen);
    }

    .mud-alert.mud-alert-filled-warning,
    .mud-alert.mud-alert-text-warning {
        background: var(--n42-orange-soft);
        color: var(--n42-orange);
    }

    .mud-alert.mud-alert-filled-error,
    .mud-alert.mud-alert-text-error {
        background: var(--status-rejected-bg);
        color: var(--status-rejected-fg);
    }

/* ─── 18) Progress / Loaders ────────────────────────────────────────── */
.mud-progress-linear {
    border-radius: 0;
    height: 4px;
}

.mud-progress-linear-bar {
    background: var(--n42-rot);
}

.mud-progress-circular-circle {
    color: var(--n42-rot);
}

/* ─── 19) Avatar / Badge ────────────────────────────────────────────── */
.mud-avatar {
    border-radius: 0 !important;
    background: var(--n42-schwarz);
    color: #fff;
    font-weight: 700;
}

.mud-badge {
    border-radius: 0 !important;
    font-weight: 700;
}

/* ─── 20) Misc helpers (use in your views) ──────────────────────────── */
.n42-card {
    background: var(--bg-card);
    border: 1px solid var(--line-1);
    padding: 22px;
}

.n42-card--quiet {
    background: var(--bg-quiet);
}

/* Local-auth pages (Components/Account, static SSR) have no MudThemeProvider, so their
   styles here use only the brand tokens defined at :root above (--n42-rot, --bg-page,
   --fg-1, --line-1, etc.), never --mud-palette-x. See AccountLayout.razor. */
.n42-auth-shell {
    min-height: 100vh;
    background: var(--bg-page);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.n42-auth-column {
    max-width: 440px;
    width: 100%;
}

.n42-auth-header {
    text-align: center;
    margin-bottom: 22px;
}

    .n42-auth-header h1 {
        font-size: 26px;
        font-weight: 700;
        margin: 6px 0 0 0;
        color: var(--fg-1);
    }

.n42-auth-card {
    border-top: 4px solid var(--n42-rot);
}

.n42-auth-field {
    margin-bottom: 20px;
}

    .n42-auth-field label {
        display: block;
        margin-bottom: 6px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--fg-3);
    }

    .n42-auth-field input {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 12px;
        border: 1px solid var(--line-1);
        border-radius: 0;
        font: inherit;
        font-size: 15px;
        color: var(--fg-1);
        background: var(--bg-card);
    }

        .n42-auth-field input:focus {
            outline: none;
            border-color: var(--n42-rot);
        }

    .n42-auth-field .validation-message {
        display: block;
        margin-top: 6px;
        font-size: 13px;
        color: var(--n42-rot);
    }

.n42-auth-links {
    margin-top: 16px;
}

.n42-auth-passkey {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line-1);
}

    .n42-auth-passkey-btn {
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
        border: 1px solid var(--n42-rot);
        border-radius: 0;
        background: transparent;
        color: var(--n42-rot);
        font: inherit;
        font-weight: 700;
        cursor: pointer;
    }

        .n42-auth-passkey-btn:hover {
            background: var(--n42-rot-soft);
        }

    .n42-auth-passkey-error {
        margin-top: 8px;
        color: var(--n42-rot);
        font-size: 14px;
    }

.n42-info-strip {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    background: var(--n42-blau-soft);
    color: var(--n42-blau);
    border-left: 3px solid var(--n42-blau);
    font-size: 15px;
}

.n42-kpi {
    font-size: 52.8px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.n42-kpi--rot {
    color: var(--n42-rot);
}

.n42-divider {
    height: 1px;
    background: var(--line-1);
    margin: 14px 0;
}

/* ─── 21) App shell (top-nav layout) ────────────────────────────────── */
.app-shell {
    min-height: 100vh;
    background: var(--bg-page);
    color: var(--fg-1);
    font-family: "Unit Pro", "Helvetica Neue", Arial, sans-serif;
    font-weight: 300;
    line-height: 1.5;
    font-feature-settings: "ss01", "ss02";
}

    .app-shell .num {
        font-variant-numeric: tabular-nums;
    }

.neo-topbar {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 56px;
    padding: 0 20px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--line-1);
    position: sticky;
    top: 0;
    z-index: 50;
}

.neo-logo {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    text-decoration: none;
    color: var(--fg-1);
}

.neo-logo-side {
    font-family: "Unit Pro", sans-serif;
    font-weight: 300;
    font-size: 21.6px;
    letter-spacing: -0.01em;
}

.neo-logo-quest {
    font-family: "Unit Pro", sans-serif;
    font-weight: 700;
    font-size: 21.6px;
    color: var(--n42-rot);
}

.neo-logo-subtitle {
    font-size: 13.8px;
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    margin-left: 8px;
}

.neo-tabs {
    display: flex;
    align-items: stretch;
    height: 100%;
    gap: 0;
    flex: 1;
}

.neo-tab {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    font-size: 15.6px;
    font-weight: 700;
    color: var(--fg-3);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    height: 100%;
    cursor: pointer;
    transition: color .12s, border-color .12s;
}

    .neo-tab:hover {
        color: var(--fg-1);
    }

    .neo-tab.active {
        color: var(--fg-1);
        border-bottom-color: var(--n42-rot);
    }

.neo-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.neo-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line-1);
    background: transparent;
    color: var(--fg-2);
    cursor: pointer;
}

    .neo-icon-btn:hover {
        background: var(--bg-quiet);
        color: var(--fg-1);
    }

.neo-avatar {
    width: 32px;
    height: 32px;
    background: var(--n42-schwarz);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14.4px;
    cursor: pointer;
}
/* MudMenu Label="..." renders the activator as a <MudButton class="mud-menu">
   internally. Force the square avatar look on that button regardless of its
   filled/text variant — the entire .neo-avatar-btn (which is on the MudMenu
   root, and via cascade on the inner activator button) needs to read as a
   black square that flips to brand-red on hover. */
.neo-avatar-btn,
.mud-menu.neo-avatar-btn,
.neo-avatar-btn .mud-button-root,
.neo-avatar-btn > .mud-button-root,
.neo-avatar-btn .mud-menu-activator {
    min-width: 32px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    background-color: var(--n42-schwarz) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 14.4px !important;
    border-radius: 0 !important;
}

    .neo-avatar-btn:hover,
    .mud-menu.neo-avatar-btn:hover,
    .neo-avatar-btn .mud-button-root:hover,
    .neo-avatar-btn > .mud-button-root:hover,
    .neo-avatar-btn .mud-menu-activator:hover {
        background-color: var(--n42-rot) !important;
    }

.neo-subnav {
    display: flex;
    align-items: center;
    gap: 0;
    height: 44px;
    padding: 0 20px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--line-1);
}

.neo-subnav-tab {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--fg-3);
    text-decoration: none;
    height: 100%;
    border-bottom: 2px solid transparent;
}

    .neo-subnav-tab:hover {
        color: var(--fg-1);
    }

    .neo-subnav-tab.active {
        color: var(--fg-1);
        border-bottom-color: var(--n42-rot);
    }

/* ─── 21b) Mobile navigation: burger + drawer (WI 6618) ────────────────
   The custom topbar/sub-nav do not collapse on small screens, so below the
   768px breakpoint the horizontal nav is hidden and a burger opens a MudDrawer
   carrying every nav element (main tabs, sub-nav, theme toggle, profile, logout). */
.neo-burger {
    display: none; /* shown only below the breakpoint, see media query */
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin-right: 4px;
    border: none;
    background: transparent;
    color: var(--fg-1);
    cursor: pointer;
}

    .neo-burger:hover {
        color: var(--n42-rot);
    }

.neo-mobile-drawer {
    background: var(--bg-card) !important;
}

.neo-drawer-nav {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
}

.neo-drawer-link {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* keep button labels (theme/logout) left-aligned, not centred */
    gap: 12px;
    width: 100%;
    padding: 12px 20px;
    font-family: inherit;
    font-size: 15.6px;
    font-weight: 700;
    color: var(--fg-2);
    text-align: left;
    text-decoration: none;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
}

.neo-drawer-icon {
    flex: 0 0 auto;
}

    .neo-drawer-link:hover {
        color: var(--fg-1);
        background: var(--bg-quiet);
    }

    .neo-drawer-link.active {
        color: var(--fg-1);
        border-left-color: var(--n42-rot);
    }

.neo-drawer-sublink {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 20px 10px 34px;
    font-size: 15px;
    font-weight: 700;
    color: var(--fg-3);
    text-decoration: none;
    border-left: 3px solid transparent;
}

    .neo-drawer-sublink:hover {
        color: var(--fg-1);
        background: var(--bg-quiet);
    }

    .neo-drawer-sublink.active {
        color: var(--fg-1);
        border-left-color: var(--n42-rot);
    }

.neo-drawer-divider {
    height: 1px;
    margin: 8px 0;
    background: var(--line-1);
}

.neo-drawer-logout {
    margin: 0;
}

@media (max-width: 768px) {
    .neo-burger {
        display: inline-flex;
        margin-left: auto; /* push to the far right of the topbar (tabs/actions are hidden here) */
        margin-right: 0;
    }

    .neo-tabs,
    .neo-subnav,
    .neo-topbar-actions {
        display: none;
    }

    /* Create-new buttons collapse to icon-only on mobile (WI 6618). */
    .n42-pageheader-actions .n42-action-text {
        display: none;
    }

    .n42-pageheader-actions .mud-button-root {
        min-width: 0;
    }

        .n42-pageheader-actions .mud-button-root .mud-button-icon-start {
            margin-right: 0;
            margin-left: 0;
        }
}

.neo-main {
    padding: 24px 20px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ─── 22) Page header ──────────────────────────────────────────────── */
.n42-pageheader {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 18px;
    gap: 16px;
    flex-wrap: wrap;
}

    .n42-pageheader h1 {
        font-size: 31.2px;
        font-weight: 700;
        margin: 0;
        line-height: 1.2;
    }

        .n42-pageheader h1:focus,
        h1:focus {
            outline: none;
        }

    .n42-pageheader .n42-eyebrow {
        display: block;
        margin-bottom: 4px;
    }

.n42-pageheader-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ─── 23) Grid helpers ─────────────────────────────────────────────── */
.n42-grid {
    display: grid;
    gap: 14px;
}

.n42-grid--cards-3 {
    grid-template-columns: repeat(3, 1fr);
}

.n42-grid--cards-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Auto-fit count-card row: every card takes an equal 1fr track, and unused
   trailing tracks collapse — so a missing-role card leaves no empty gap. */
.n42-grid--cards-auto {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.n42-grid--main-side {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

@media (max-width: 1300px) {
    .n42-grid--cards-auto {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1100px) {
    .n42-grid--cards-3, .n42-grid--cards-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .n42-grid--main-side {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .n42-grid--cards-3, .n42-grid--cards-4, .n42-grid--cards-auto {
        grid-template-columns: 1fr;
    }
}

/* ─── 24) Filter / chip rows ───────────────────────────────────────── */
.n42-filterbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    align-items: center;
}

.n42-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-card);
    border: 1px solid var(--line-2);
    font-size: 14.4px;
    font-weight: 700;
    color: var(--fg-2);
    cursor: pointer;
    user-select: none;
}

    .n42-chip:hover {
        background: var(--bg-quiet);
        color: var(--fg-1);
    }

    .n42-chip.active {
        background: var(--n42-schwarz);
        color: #fff;
        border-color: var(--n42-schwarz);
    }

/* ─── 25) Status pill dot color helpers (n42-pill ::before) ────────── */
.mud-chip.n42-pill {
    padding: 4px 10px;
    font-size: 13.8px;
}

/* ─── 26) Form rows ────────────────────────────────────────────────── */
.n42-formrow {
    display: grid;
    gap: 16px;
}

.n42-formrow--2 {
    grid-template-columns: 1fr 1fr;
}

.n42-formrow--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 720px) {
    .n42-formrow--2, .n42-formrow--3 {
        grid-template-columns: 1fr;
    }
}

/* ─── 27) Number / KPI helpers ─────────────────────────────────────── */
.n42-kpi-small {
    font-size: 28.8px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.n42-kpi-delta {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    font-size: 13.2px;
    font-weight: 700;
}

.n42-kpi-delta--pos {
    background: var(--status-approved-bg);
    color: var(--status-approved-fg);
}

.n42-kpi-delta--neg {
    background: var(--status-rejected-bg);
    color: var(--status-rejected-fg);
}

/* ─── 28) Dropzone ─────────────────────────────────────────────────── */
.n42-dropzone {
    border: 1.5px dashed var(--line-3);
    padding: 28px;
    text-align: center;
    background: var(--bg-quiet);
    color: var(--fg-3);
    font-size: 15.6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .n42-dropzone:hover {
        border-color: var(--n42-rot);
        color: var(--fg-1);
    }

    .n42-dropzone.active {
        border-color: var(--n42-rot);
        background: var(--n42-rot-soft);
        color: var(--n42-rot-deep);
    }

/* ─── 29) Wizard summary side panel ────────────────────────────────── */
.n42-wizard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
}

@media (max-width: 1100px) {
    .n42-wizard {
        grid-template-columns: 1fr;
    }
}

.n42-wizard-summary {
    position: sticky;
    top: 116px;
    align-self: start;
}

.n42-wizard-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 18px;
}

/* Receipt new/edit action bar (Save draft / Submit / Rerun OCR): the long German
   labels overflow when laid out in a row on phones, so stack them vertically below
   the MudBlazor sm breakpoint. MudStack renders a <div class="d-flex flex-row ...">
   (no .mud-stack class) and MudBlazor's .flex-row sets flex-direction: row !important,
   so we must use !important too — our element-qualified selector (0,1,1) then outweighs
   .flex-row (0,1,0). Column + stretch makes the buttons full-width so the labels fit. */
@media (max-width: 600px) {
    div.n42-form-actions {
        flex-direction: column !important;
        align-items: stretch;
    }

    /* Keep an inline help icon (ReceiptUpload) at its natural size, not stretched. */
    div.n42-form-actions > .mud-icon-button {
        align-self: flex-start;
    }
}

/* Per-currency money lines (CurrencyTotals component): a single-currency value is one line; a
   mixed-currency sum card / folder row stacks one line per currency. Tight line-height keeps the
   stack compact, and secondary currencies render smaller + dimmer so the dominant currency (the
   first, largest subtotal) reads first. */
.n42-money-line {
    line-height: 1.2;
}

    .n42-money-line + .n42-money-line {
        font-size: 0.72em;
        opacity: 0.85;
    }

/* ─── 30) Timeline (Prüfprotokoll) ─────────────────────────────────── */
.n42-timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.n42-timeline-item {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 10px;
    align-items: start;
}

.n42-timeline-dot {
    width: 8px;
    height: 8px;
    background: var(--fg-3);
    margin-top: 6px;
}

.n42-timeline-dot--rot {
    background: var(--n42-rot);
}

.n42-timeline-dot--gruen {
    background: var(--n42-gruen);
}

.n42-timeline-dot--blau {
    background: var(--n42-blau);
}

.n42-timeline-dot--orange {
    background: var(--n42-orange);
}

/* ─── 31) Sub-text helpers ─────────────────────────────────────────── */
.n42-muted { color: var(--fg-3); font-size: 14.4px; }
.n42-strong-num { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ─── 32) Blazor reconnect overlay ──────────────────────────────────────
   Custom #components-reconnect-modal (markup in Components/App.razor). The
   framework toggles components-reconnect-{show,hide,failed,rejected} on it; we
   paint it with the neo42 theme tokens, which resolve to dark values via the
   theme class ThemeService mirrors onto <body>. Without this the framework's
   default reconnect UI stays light over a dark app. See WI 6564. */
#components-reconnect-modal {
  display: none;
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 30000;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .45);
}
.n42-reconnect-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 280px;
  max-width: 90vw;
  padding: 28px 32px;
  text-align: center;
  background: var(--bg-card);
  color: var(--fg-1);
  border: 1px solid var(--line-1);
  border-top: 3px solid var(--n42-rot);
  box-shadow: 0 10px 30px rgba(17, 17, 17, .16), 0 4px 10px rgba(17, 17, 17, .10);
}
.n42-reconnect-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--line-2);
  border-top-color: var(--n42-rot);
  border-radius: 50%;
  animation: n42-reconnect-spin 0.8s linear infinite;
}
@keyframes n42-reconnect-spin { to { transform: rotate(360deg); } }
.n42-reconnect-msg { margin: 0; font-size: 15px; line-height: 1.5; max-width: 42ch; }
.n42-reconnect-btn {
  font-family: inherit;
  font-weight: 700;
  font-size: 13.8px;
  padding: 8px 18px;
  border: 1px solid var(--line-2);
  background: var(--bg-card);
  color: var(--fg-1);
  cursor: pointer;
  transition: color 120ms, border-color 120ms, background-color 120ms;
}
.n42-reconnect-btn:hover { border-color: var(--n42-rot); color: var(--n42-rot); }
.n42-reconnect-reload { background: var(--n42-rot); border-color: var(--n42-rot); color: #fff; }
.n42-reconnect-reload:hover { background: var(--n42-rot-deep); border-color: var(--n42-rot-deep); color: #fff; }

/* State-driven visibility: hide every message/spinner/action by default, then
   reveal only what each connection state needs. */
.n42-reconnect-msg,
.n42-reconnect-spinner,
.n42-reconnect-actions { display: none; }
.n42-reconnect-actions { gap: 10px; }

#components-reconnect-modal.components-reconnect-show .n42-reconnect-spinner,
#components-reconnect-modal.components-reconnect-show .n42-reconnect-msg-show { display: block; }

#components-reconnect-modal.components-reconnect-failed .n42-reconnect-msg-failed,
#components-reconnect-modal.components-reconnect-rejected .n42-reconnect-msg-rejected { display: block; }

#components-reconnect-modal.components-reconnect-failed .n42-reconnect-actions,
#components-reconnect-modal.components-reconnect-rejected .n42-reconnect-actions { display: flex; }
#components-reconnect-modal.components-reconnect-failed .n42-reconnect-reload,
#components-reconnect-modal.components-reconnect-rejected .n42-reconnect-retry { display: none; }