/* Eigene Ergänzungen zu MudBlazor. Alles, was hier steht, liegt in der Instanz –
   es werden bewusst keine Schriften oder Skripte aus fremden Netzen nachgeladen. */

html, body {
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* --- Kopfzeile ---------------------------------------------------------- */

.zw-appbar {
    backdrop-filter: saturate(140%);
}

.zw-logo {
    height: 30px;
    max-width: 130px;
    object-fit: contain;
    display: block;
}

.zw-appname {
    line-height: 1.15;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zw-appsub {
    opacity: .75;
    line-height: 1.15;
    white-space: nowrap;
}

.zw-avatar {
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

/* Schaltfläche, die wie ein Symbolknopf aussieht (Abmelden im Formular). */
.zw-iconbutton {
    background: none;
    border: 0;
    padding: .35rem;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    border-radius: 50%;
    transition: background-color .15s ease;
}

.zw-iconbutton:hover {
    background-color: rgba(255, 255, 255, .14);
}

.zw-linkbutton {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* --- Navigation --------------------------------------------------------- */

/* Überschrift über einer Gruppe von Menüpunkten – ordnet, ohne eine eigene Ebene
   einzuziehen, durch die man erst klicken müsste. */
.zw-navgroup {
    padding: 1.1rem 1.25rem .35rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    opacity: .55;
}

.mud-nav-link {
    border-radius: 0 22px 22px 0;
    margin-right: .5rem;
}

/* --- Inhalt ------------------------------------------------------------- */

/* Karten bekommen eine leichte Reaktion auf den Zeiger: genug, um zu zeigen, dass sie
   zusammengehören – zu wenig, um vom Inhalt abzulenken. */
.zw-content .mud-paper-outlined {
    transition: box-shadow .18s ease, border-color .18s ease;
}

.zw-content .mud-paper-outlined:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

/* Kennzahl-Karten: große Zahl, kleine Beschriftung darüber. */
.zw-metric {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 8.5rem;
}

.zw-metric .zw-metric-value {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.zw-metric .zw-metric-label {
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .7;
}

/* Zahlen in Tabellen sollen untereinander stehen. */
.zw-num, .mud-table-cell .zw-num {
    font-variant-numeric: tabular-nums;
}

/* Die Stempeluhr: die eine Schaltfläche, um die es geht. */
.zw-stamp-button {
    height: 5.5rem;
    font-size: 1.35rem;
    letter-spacing: .01em;
}

/* Ampel der Stempelung – grün Kommen/Weiter, gelb Pause, rot Gehen. Dieselben Werte wie
   Texts.KindColor in der App. Das Rot ist bewusst nicht das Fehlerrot der Palette, damit
   „Gehen“ neben einer Fehlermeldung nicht wie ein zweiter Fehler wirkt. Farbe ist Zusatz:
   Symbol und Text tragen die Bedeutung. */
:root {
    --zw-kommen: #2e7d32;
    --zw-pause: #c26e00;
    --zw-gehen: #b03a2e;
}

.mud-button-filled.zw-stamp-button { color: #fff; }
.mud-button-filled.zw-stamp-button.zw-stamp-kommen { background-color: var(--zw-kommen); }
.mud-button-filled.zw-stamp-button.zw-stamp-pause { background-color: var(--zw-pause); }
.mud-button-filled.zw-stamp-button.zw-stamp-gehen { background-color: var(--zw-gehen); }
.mud-button-filled.zw-stamp-button.zw-stamp-kommen:hover { background-color: color-mix(in srgb, var(--zw-kommen) 88%, black); }
.mud-button-filled.zw-stamp-button.zw-stamp-pause:hover { background-color: color-mix(in srgb, var(--zw-pause) 88%, black); }
.mud-button-filled.zw-stamp-button.zw-stamp-gehen:hover { background-color: color-mix(in srgb, var(--zw-gehen) 88%, black); }
.mud-button-filled.zw-stamp-button.mud-disabled { color: var(--mud-palette-action-disabled); background-color: var(--mud-palette-action-disabled-background); }

/* Der Feierabend-Knopf unter Pause/Weiter: Rand und Schrift im Gehen-Rot */
.mud-button-outlined.zw-stamp-outline-gehen { color: var(--zw-gehen); border-color: var(--zw-gehen); }
.mud-button-outlined.zw-stamp-outline-gehen:hover { background-color: color-mix(in srgb, var(--zw-gehen) 10%, transparent); }
.mud-button-outlined.zw-stamp-outline-gehen.mud-disabled { color: var(--mud-palette-action-disabled); border-color: var(--mud-palette-action-disabled-background); }
/* Auf dunklem Grund heller, sonst liest sich das Rot nicht (die Farbtaste selbst bleibt, weiße Schrift) */
.zw-dark .mud-button-outlined.zw-stamp-outline-gehen { color: #e8746a; border-color: #e8746a; }

/* Punkte der Zeitleiste in denselben Farben */
.zw-dot-kommen .mud-timeline-item-dot .mud-timeline-item-dot-inner { background-color: var(--zw-kommen); }
.zw-dot-pause .mud-timeline-item-dot .mud-timeline-item-dot-inner { background-color: var(--zw-pause); }
.zw-dot-gehen .mud-timeline-item-dot .mud-timeline-item-dot-inner { background-color: var(--zw-gehen); }

.zw-clock {
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Farbiger Streifen am linken Rand einer Karte, in der Hausfarbe. */
.zw-accent-bar {
    border-left: 3px solid var(--mud-palette-primary);
}

/* --- Anmeldung und Ersteinrichtung ---------------------------------------
   Diese Seiten laufen ohne Navigation und teilweise ohne Interaktivität (die Anmeldung
   braucht den HTTP-Kontext und wird deshalb statisch gerendert). Deshalb bringen sie
   ihre eigene, schlichte Gestaltung mit – gefärbt in der Hausfarbe. */

.zw-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(900px 520px at 50% -5%, color-mix(in srgb, var(--zw-accent, #0e5e6f) 38%, transparent), transparent 68%),
        radial-gradient(700px 400px at 85% 105%, color-mix(in srgb, var(--zw-accent, #0e5e6f) 18%, transparent), transparent 70%),
        #f4f5f8;
}

@media (prefers-color-scheme: dark) {
    .zw-auth {
        background:
            radial-gradient(900px 520px at 50% -5%, color-mix(in srgb, var(--zw-accent, #0e5e6f) 42%, transparent), transparent 68%),
            radial-gradient(700px 400px at 85% 105%, color-mix(in srgb, var(--zw-accent, #0e5e6f) 22%, transparent), transparent 70%),
            #16171b;
    }
}

.zw-auth-card {
    width: 100%;
    max-width: 30rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(15, 20, 35, .12), 0 2px 6px rgba(15, 20, 35, .06);
    padding: 2.25rem 2.25rem 2rem;
}

@media (prefers-color-scheme: dark) {
    .zw-auth-card {
        background: #212328;
        color: #e9eaee;
        box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
    }
}

.zw-auth-logo {
    max-height: 52px;
    max-width: 190px;
    object-fit: contain;
    margin-bottom: 1.25rem;
}

.zw-auth-card h1 {
    margin: 0 0 .25rem;
    font-size: 1.45rem;
    font-weight: 600;
}

.zw-auth-sub {
    margin: 0 0 1.75rem;
    opacity: .7;
    font-size: .9rem;
}

.zw-field {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.zw-field label {
    font-size: .82rem;
    font-weight: 500;
    opacity: .85;
}

.zw-field input,
.zw-field select {
    padding: .7rem .8rem;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 9px;
    font: inherit;
    background: inherit;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

@media (prefers-color-scheme: dark) {
    .zw-field input,
    .zw-field select {
        border-color: rgba(255, 255, 255, .18);
    }
}

.zw-field input:focus,
.zw-field select:focus {
    outline: none;
    border-color: var(--zw-accent, #0e5e6f);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--zw-accent, #0e5e6f) 22%, transparent);
}

.zw-submit {
    width: 100%;
    padding: .8rem 1rem;
    border: 0;
    border-radius: 9px;
    background: var(--zw-accent, #0e5e6f);
    color: var(--zw-accent-contrast, #fff);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease, transform .08s ease;
}

.zw-submit:hover {
    filter: brightness(.93);
}

.zw-submit:active {
    transform: translateY(1px);
}

.zw-error {
    background: rgba(198, 40, 40, .1);
    border-left: 4px solid #c62828;
    padding: .8rem 1rem;
    border-radius: 6px;
    margin-bottom: 1.1rem;
    font-size: .9rem;
}

.zw-hint {
    font-size: .85rem;
    opacity: .75;
    margin-top: 1.4rem;
}

.zw-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.1rem;
    font-size: .9rem;
}

/* Fehleranzeige von Blazor unten am Bildschirmrand. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #ffe9a8;
    color: #3b2f00;
    padding: .8rem 1.2rem;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, .2);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
}

/* Wer Bewegung abgestellt hat, bekommt keine – das ist eine Einstellung des Betriebssystems
   und keine Geschmacksfrage. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* --- Monatsübersicht: Wochensummen und Füllbalken --------------------------
   Der Balken beantwortet die Frage „reicht die Zeit?“ schneller als drei
   Zahlen. Er ist bewusst schmal: Er soll den Blick führen, nicht die Zeile
   dominieren. */

.zw-week-row td,
.zw-week-row th {
    background: var(--mud-palette-background-gray);
    border-top: 2px solid var(--mud-palette-lines-default);
}

.zw-week-cell {
    padding-top: .35rem !important;
    padding-bottom: .35rem !important;
    font-size: .8125rem;
}

.zw-fill {
    height: 3px;
    margin-top: .2rem;
    border-radius: 2px;
    background: var(--mud-palette-lines-default);
    overflow: hidden;
}

.zw-fill span {
    display: block;
    height: 100%;
    border-radius: 2px;
    transition: width .25s ease;
}

/* Ein Tag, der noch läuft, wird blasser gezeichnet – er ist keine Bilanz. */
.zw-fill-open {
    opacity: .45;
}

@media (prefers-reduced-motion: reduce) {
    .zw-fill span {
        transition: none;
    }
}

/* --- Benutzermenü in der Kopfzeile -----------------------------------------
   Bewusst ohne JavaScript: Es öffnet über :focus-within und schließt, sobald
   der Fokus es verlässt. Ein Menü, das ein Skript braucht, öffnet in manchen
   Umgebungen gar nicht – und dann käme niemand mehr an das Abmelden. */

.zw-usermenu {
    position: relative;
    display: flex;
    align-items: center;
}

.zw-usermenu-trigger {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: flex;
    border-radius: 50%;
    color: inherit;
}

.zw-usermenu-trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.zw-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.zw-usermenu-panel {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    min-width: 13rem;
    padding: .35rem 0;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: var(--mud-elevation-8);
    z-index: 1400;

    /* Nicht display:none, damit der Übergang greift – und visibility hält es
       für die Tastatur und Vorleseprogramme wirklich aus dem Weg. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.25rem);
    transition: opacity .12s ease, transform .12s ease, visibility .12s;
}

.zw-usermenu:hover .zw-usermenu-panel,
.zw-usermenu:focus-within .zw-usermenu-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.zw-usermenu-head {
    padding: .5rem .9rem .6rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    margin-bottom: .35rem;
}

.zw-usermenu-name {
    font-weight: 600;
    font-size: .875rem;
}

.zw-usermenu-role {
    font-size: .75rem;
    opacity: .7;
}

.zw-usermenu-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .55rem .9rem;
    background: none;
    border: 0;
    font: inherit;
    font-size: .875rem;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
}

.zw-usermenu-item:hover,
.zw-usermenu-item:focus-visible {
    background: var(--mud-palette-action-default-hover);
    outline: none;
}

.zw-usermenu-signout {
    color: var(--mud-palette-error);
    /* Ein <button> bringt eigene Innenabstände und Zentrierung mit – der Eintrag soll bündig
       mit den Links darüber stehen. */
    justify-content: flex-start;
    margin: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.zw-usermenu form {
    margin: 0;
    padding: 0;
}

@media (prefers-reduced-motion: reduce) {
    .zw-usermenu-panel {
        transition: none;
    }
}

/* --- Glocke ---------------------------------------------------------------- */

.zw-bell {
    position: relative;
    padding: .35rem;
}

.zw-bell-count {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 .2rem;
    border-radius: .55rem;
    background: var(--mud-palette-error);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1.05rem;
    text-align: center;
}

.zw-bell-panel {
    min-width: 21rem;
    max-width: 24rem;
    max-height: 26rem;
    overflow-y: auto;
}

.zw-bell-clear {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: .75rem;
    color: var(--mud-palette-primary);
    cursor: pointer;
    text-decoration: underline;
}

.zw-bell-empty {
    padding: 1rem .9rem;
    font-size: .8125rem;
    opacity: .7;
}

.zw-bell-item {
    display: block;
    padding: .6rem .9rem;
    color: inherit;
    text-decoration: none;
    border-left: 3px solid transparent;
}

.zw-bell-item:hover {
    background: var(--mud-palette-action-default-hover);
}

/* Ungelesenes wird markiert, nicht die gelesenen ausgegraut: Die Liste soll
   zeigen, was noch etwas von einem will. */
.zw-bell-unread {
    border-left-color: var(--mud-palette-primary);
    background: var(--mud-palette-background-gray);
}

.zw-bell-title {
    font-size: .8125rem;
    font-weight: 600;
}

.zw-bell-text {
    font-size: .75rem;
    opacity: .8;
    margin-top: .1rem;
}

.zw-bell-when {
    font-size: .7rem;
    opacity: .6;
    margin-top: .2rem;
}

/* --- Anmeldung: zweiter Weg ------------------------------------------------ */

.zw-or {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.25rem 0;
    color: #6b7280;
    font-size: .8125rem;
}

.zw-or::before,
.zw-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: .3;
}

.zw-submit-secondary {
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
}

/* --- Urlaubsplantafel ------------------------------------------------------
   Eine Tabelle und kein Rasterlayout: Personen sind Zeilen, Tage sind Spalten,
   und genau so liest ein Mensch eine Plantafel. Der Name bleibt beim Blättern
   stehen, sonst weiß man nach Spalte zwölf nicht mehr, wessen Zeile das ist. */

.zw-board {
    border-collapse: separate;
    border-spacing: 0;
    font-size: .75rem;
    white-space: nowrap;
}

.zw-board th,
.zw-board td {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    border-right: 1px solid var(--mud-palette-lines-default);
}

.zw-board-name {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 13rem;
    max-width: 16rem;
    padding: .4rem .6rem;
    text-align: left;
    font-weight: 500;
    background: var(--mud-palette-surface);
    white-space: normal;
}

.zw-board-name a {
    color: inherit;
    text-decoration: none;
}

.zw-board-name a:hover {
    text-decoration: underline;
}

.zw-board-unit {
    display: block;
    font-size: .6875rem;
    font-weight: 400;
    opacity: .6;
}

.zw-board-day {
    width: 1.6rem;
    min-width: 1.6rem;
    padding: .25rem 0;
    text-align: center;
    font-weight: 500;
    background: var(--mud-palette-background-gray);
}

.zw-board-dow {
    display: block;
    font-size: .625rem;
    font-weight: 400;
    opacity: .6;
}

.zw-board-num {
    display: block;
    line-height: 1.1;
}

.zw-board-cell {
    height: 1.9rem;
    text-align: center;
    background: var(--mud-palette-surface);
}

/* Frei ist nicht abwesend: Ein Urlaubstag am Sonntag kostet nichts und soll
   deshalb auch nicht so aussehen. */
.zw-board-free {
    background: var(--mud-palette-background-gray);
}

.zw-board-weekend {
    opacity: .75;
}

.zw-board-today {
    box-shadow: inset 2px 0 0 var(--mud-palette-primary);
}

.zw-board-absent {
    background: var(--zw-board-color, var(--mud-palette-primary));
}

/* Beantragt wird gestreift statt voll gefüllt – der Unterschied muss auch dann
   erkennbar sein, wenn jemand Farben schlecht unterscheidet. */
.zw-board-requested {
    background: repeating-linear-gradient(
        45deg,
        var(--zw-board-color, var(--mud-palette-primary)) 0 4px,
        transparent 4px 8px
    );
}

.zw-board-pending {
    font-size: .625rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.zw-board-sum {
    padding: .3rem .5rem;
    text-align: right;
    background: var(--mud-palette-background-gray);
    min-width: 3.5rem;
}

.zw-board-negative {
    color: var(--mud-palette-error);
    font-weight: 600;
}

.zw-board-swatch {
    display: inline-block;
    width: .9rem;
    height: .9rem;
    border-radius: 3px;
    border: 1px solid var(--mud-palette-lines-default);
}

.zw-board-swatch-free {
    background: var(--mud-palette-background-gray);
}

.zw-board-swatch-pending {
    background: repeating-linear-gradient(45deg, var(--mud-palette-primary) 0 4px, transparent 4px 8px);
}

.zw-board-warn {
    color: var(--mud-palette-warning);
    font-weight: 500;
}

/* Freie Tage müssen auf einen Blick als Block erkennbar sein – das Wochenende
   ist die Struktur, an der man sich auf einer Plantafel entlanghangelt.
   `background-gray` ist gegen Weiß fast unsichtbar; eine Mischung aus der
   Textfarbe trägt sich dagegen in beide Darstellungen. */
.zw-board-free,
.zw-board-swatch-free {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent);
}

.zw-board-day.zw-board-weekend {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 16%, transparent);
    opacity: 1;
}

/* Jahresstatistik: Ist zu Soll als schmaler Balken je Monat. Gearbeitet in der Hausfarbe,
   Abwesenheit blasser – auf einen Blick sichtbar, ob ein Monat aus Arbeit oder aus Urlaub
   bestand. Die Spur ist das Soll; was darüber hinausgeht, wird bei 100 % gekappt. */

.zw-yearbar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
}

.zw-yearbar-worked {
    display: block;
    background: var(--mud-palette-primary);
}

.zw-yearbar-absent {
    display: block;
    background: var(--mud-palette-primary);
    opacity: .35;
}

/* Betreiber-Sitzung: ein Band über dem Inhalt, das sich nicht übersehen lässt. */
.zw-operator-banner {
    position: sticky;
    top: 64px;
    z-index: 5;
}

/* --- Marke: Zeitwerk-Zeichen, wo das Haus kein eigenes Logo hat --------------------------- */
.zw-auth-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.25rem;
    color: var(--zw-accent, #0e5e6f);
    font-weight: 600;
    font-size: 1.35rem;
    letter-spacing: -.01em;
}

.zw-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    vertical-align: middle;
}

/* --- Fußzeile immer unten: der Inhalt wächst, die Fußzeile bleibt am Seitenende -------------- */
.zw-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.zw-content-grow {
    flex: 1 0 auto;
}

/* --- Seite /app: Anleitung fürs Telefon ---------------------------------------------------- */
.zw-app-h2 {
    margin: .25rem 0 .75rem;
    font-size: 1.15rem;
    font-weight: 600;
}

.zw-app-steps {
    padding-left: 1.25rem;
    margin: 0 0 1rem;
}

.zw-app-steps li {
    margin-bottom: .5rem;
}

/* Kalender: Wochenende gedämpft, Feiertage rot – wie am Terminal (0.34.0). */
.mud-picker-calendar .zw-weekend, .mud-picker-calendar .zw-weekend .mud-button-label { color: #B03A2E; opacity: .8; }
.mud-picker-calendar .zw-holiday, .mud-picker-calendar .zw-holiday .mud-button-label { color: #B03A2E; font-weight: 600; background: rgba(176, 58, 46, .10); }
.mud-picker-calendar .zw-half-holiday, .mud-picker-calendar .zw-half-holiday .mud-button-label { color: #C26E00; font-weight: 600; background: rgba(194, 110, 0, .10); }

/* Demo-Umgebung: Zugänge auf der Anmeldeseite (0.35.0). */
.zw-demo-hint { background: #E3EEF0; border-radius: .5rem; padding: .8rem 1rem; margin: 0 0 1rem; font-size: .95rem; line-height: 1.6; }
.zw-demo-hint code { background: #fff; padding: 0 .3rem; border-radius: .25rem; }