/* ==========================================================================
   Brücke MudBlazor -> NWT-Hausdesign
   Laedt nach MudBlazor.min.css und css/nwt.css. Die Farbwerte stehen in
   css/nwt.css (Tokens) und gleichlautend im MudTheme in MainLayout.razor.
   ========================================================================== */

/* ---------- Farben: Mud-Variablen folgen data-theme ------------------------
   MudThemeProvider schreibt seine Palette auf :root. html[data-theme] ist
   spezifischer und gewinnt. So stimmen Flaechen und Texte schon vor dem
   Verbindungsaufbau mit dem Thema ueberein (kein helles Aufblitzen). */

html[data-theme] {
    --mud-palette-background: var(--flaeche-0);
    --mud-palette-background-gray: var(--flaeche-2);
    --mud-palette-surface: var(--flaeche-1);
    --mud-palette-drawer-background: var(--flaeche-1);
    --mud-palette-text-primary: var(--text-1);
    --mud-palette-text-secondary: var(--text-2);
    --mud-palette-text-disabled: var(--text-3);
    --mud-palette-lines-default: var(--rand);
    --mud-palette-lines-inputs: var(--rand-stark);
    --mud-palette-table-lines: var(--rand);
    --mud-palette-table-hover: var(--flaeche-3);
    --mud-palette-divider: var(--rand);
}

html[data-theme="light"] {
    --mud-palette-appbar-background: #004388;
    --mud-palette-appbar-text: #FFFFFF;
}

html[data-theme="dark"] {
    --mud-palette-appbar-background: var(--flaeche-1);
    --mud-palette-appbar-text: var(--text-1);
}

body {
    background: var(--flaeche-0);
}

/* Die 4K-Skalierung aus nwt.css arbeitet mit CSS-zoom auf <body>. MudBlazor
   positioniert Menues und Auswahllisten mit Fensterkoordinaten, die dann
   nicht mehr passen. Bis die Oberflaeche ohne MudBlazor auskommt: aus. */
:root {
    --skalierung: 1;
}

/* ---------- Karten ------------------------------------------------------- */

main .mud-paper:not(.mud-elevation-0):not(.rounded-0),
main .mud-card,
main .mud-table:not(.mud-elevation-0) {
    border-radius: 14px;
}

main .mud-paper[class*="mud-elevation-"]:not(.mud-elevation-0),
main .mud-table[class*="mud-elevation-"]:not(.mud-elevation-0) {
    border: 1px solid var(--rand);
    box-shadow: var(--schatten);
}

main .mud-paper-outlined {
    border-color: var(--rand);
}

/* ---------- Tabellen (wie .gitter) --------------------------------------- */

.mud-table-head .mud-table-cell {
    background: var(--flaeche-2);
    color: var(--text-2);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .03em;
}

.mud-table-head .mud-table-sort-label:hover,
.mud-table-head .mud-table-sort-label.mud-direction-asc,
.mud-table-head .mud-table-sort-label.mud-direction-desc {
    color: var(--text-1);
}

/* Erste und letzte Kopfzelle folgen der runden Tabellenecke */
.mud-table-container {
    border-radius: inherit;
}

.mud-table-head .mud-table-row:first-child .mud-table-cell:first-child {
    border-top-left-radius: inherit;
}

.mud-table-head .mud-table-row:first-child .mud-table-cell:last-child {
    border-top-right-radius: inherit;
}

.mud-table-body .mud-table-cell {
    font-variant-numeric: tabular-nums;
}

/* ---------- Knoepfe (wie .knopf) ----------------------------------------- */

.mud-button-root.mud-button {
    border-radius: 9px;
}

.mud-button-filled,
.mud-button-filled:hover,
.mud-button-filled:active,
.mud-button-filled:focus-visible {
    box-shadow: none;
}

.mud-button-outlined.mud-button-outlined-default,
.mud-button-outlined.mud-button-outlined-inherit {
    border-color: var(--rand-stark);
}

/* ---------- Status-Etiketten (wie .pill) --------------------------------- */

.mud-chip {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .02em;
}

/* ---------- Meldungen (wie .meldung) ------------------------------------- */

.mud-alert {
    border-radius: 9px;
}

/* ---------- Dialoge, Menues, Auswahllisten ------------------------------- */

.mud-dialog {
    border-radius: 14px;
    border: 1px solid var(--rand);
    box-shadow: var(--schatten-tief);
}

.mud-dialog .mud-dialog-title {
    font-weight: 600;
}

.mud-popover.mud-paper {
    border-radius: 11px;
    border: 1px solid var(--rand);
    box-shadow: var(--schatten-tief);
}

/* ---------- Layout: Seitenleiste + Kopfzeile (MainLayout.razor) ----------- */

/* Viele Seiten rechnen Tabellenhoehen mit calc(100vh - var(--mud-appbar-height) - ...).
   Die AppBar gibt es nicht mehr; die Variable steht jetzt fuer alles, was oben
   ueber dem Inhalt klebt (Kopfzeile, auf schmalen Fenstern plus Menueleiste). */
html[data-theme] {
    --kopfzeile-hoehe: 52px;
    --mud-appbar-height: var(--kopfzeile-hoehe);
    /* Breite der Seitenleiste (Spalte in .shell, nwt.css) - fuer fest positionierte
       Leisten der Seiten, z. B. die Reiter in Customer.razor */
    --seitenleiste-breite: 236px;
}

/* Navigation scrollt, wenn sie (z. B. fuer Admins) laenger ist als das Fenster */
@media (min-width: 1001px) {
    .seitenleiste .nav {
        overflow-y: auto;
        min-height: 0;
        margin-right: -6px;
        padding-right: 6px;
    }
}

.seitenleiste a.marke-block:hover {
    opacity: .85;
}

.seitenleiste-fuss form {
    margin: 0;
}

.kopfzeile {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--kopfzeile-hoehe);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 22px;
    background: var(--flaeche-0);
    border-bottom: 1px solid var(--rand);
}

.kopf-titel {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kopf-link {
    margin-left: auto;
}

.kopfzeile .kopf-lade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
}

/* Die Fachseiten brauchen die volle Breite (breite Tabellen) und rechnen mit
   wenig Abstand oben - daher knapper als .inhalt aus nwt.css. */
.shell .inhalt {
    max-width: none;
    padding: 14px 22px 20px;
}

@media (max-width: 1000px) {
    html[data-theme] {
        --menueleiste-hoehe: 57px;
        --mud-appbar-height: calc(var(--kopfzeile-hoehe) + var(--menueleiste-hoehe));
        --seitenleiste-breite: 0px;
    }

    /* Die Menueleiste klebt oben (z-index 60), die Kopfzeile direkt darunter */
    .kopfzeile {
        top: var(--menueleiste-hoehe);
        padding: 0 14px;
    }

    .shell .inhalt {
        padding: 12px 14px 20px;
    }
}

/* ---------- Reiter (Akzentstrich kommt ueber Primary = NWT-Rot) ---------- */

.mud-tab {
    text-transform: none;
    font-weight: 500;
}