/* ===== PferdeStall Design-Tokens (SPEC Abschnitt 7) ===== */
:root {
    --background: #F5EBE0;
    --surface: #FFFFFF;
    --surface-alt: #EDD9C6;
    --primary: #A9714B;
    --primary-dark: #8B5E3C;
    --secondary: #C68863;
    --text-primary: #4A342A;
    --text-secondary: #8A6F5F;
    --success: #7A8B6F;
    --warning: #C9803F;
    --danger: #A94B4B;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 2px 10px rgba(74, 52, 42, 0.08);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    background: var(--background);
    color: var(--text-primary);
    font-size: 15px;
}

h1, h2, h3, h4 { color: var(--text-primary); margin: 0 0 0.6em; font-weight: 650; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
p { line-height: 1.5; }

/* ===== Layout ===== */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--surface-alt);
    padding: 1.25rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.sidebar .brand {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-dark);
    padding: 0.4rem 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.brand-logo {
    width: 34px;
    height: 34px;
    border-radius: 8px;
}
.sidebar .nav-link {
    display: block;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-weight: 500;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
}
.sidebar .nav-link:hover { background: var(--background); }
.sidebar .nav-link.active { background: var(--primary); color: #fff; }
.sidebar .nav-section {
    margin: 0.9rem 0.75rem 0.3rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.sidebar .spacer { flex: 1; }
.sidebar .user-box {
    border-top: 1px solid var(--surface-alt);
    padding: 0.8rem 0.75rem 0.2rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

/* min-width: 0 hebt das „auto" auf, das Flex-Kinder von sich aus haben. Ohne das wächst
   der Inhaltsbereich auf die Breite seiner breitesten Tabelle, statt dass .table-scroll
   scrollt — und die ganze Seite lässt sich seitwärts schieben.

   Keine max-width: Der Inhalt soll die ganze Seite nutzen (ab V1.7). Vorher standen hier
   1100 px, wodurch rechts ein breiter Streifen leer blieb, während der Wochenplan
   gleichzeitig seitlich gescrollt werden musste. Der Abstand ist links und rechts gleich. */
.main-content { flex: 1; min-width: 0; padding: 2rem 2.5rem; }

/* Auf schmalen Fenstern soll der Abstand schrumpfen, statt den Inhalt zu quetschen. */
@media (max-width: 700px) {
    .main-content { padding: 1.2rem 1rem; }
}

/* Fließtext bekommt eine lesbare Zeilenlänge, auch wenn die Seite jetzt sehr breit werden
   kann — über den halben Monitor laufende Sätze liest niemand gern. Tabellen, Formulare
   und Karten sind davon nicht betroffen, die profitieren von der Breite. */
.card > p,
.card > .muted { max-width: 90ch; }

/* ===== Karten ===== */
.card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.25rem;
}
.card h2:first-child, .card h3:first-child { margin-top: 0; }

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.55rem 1.1rem;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 1.5px solid var(--primary);
}
.btn-outline:hover { background: var(--surface-alt); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(0.92); }
.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.82rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== Formulare ===== */
label { display: block; font-size: 0.85rem; color: var(--text-secondary); margin: 0.7rem 0 0.25rem; font-weight: 600; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="time"], input[type="number"], textarea, select {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1.5px solid var(--surface-alt);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.75rem;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--text-primary);
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--primary);
}
textarea { min-height: 90px; resize: vertical; }

/* ===== Tabellen ===== */
table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
table.data th {
    text-align: left;
    color: var(--text-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.5rem 0.6rem;
    border-bottom: 2px solid var(--surface-alt);
}
table.data td {
    padding: 0.6rem;
    border-bottom: 1px solid var(--background);
    vertical-align: middle;
}

/* ===== Wochenplan-Tabelle ===== */
.schedule-scroll { overflow-x: auto; }
table.schedule { min-width: 900px; }
table.schedule th { white-space: nowrap; }
table.schedule td { vertical-align: top; padding: 0.5rem 0.4rem; }
table.schedule .employee-name { font-weight: 600; white-space: nowrap; }

/* Heute und Vergangenheit im Wochenplan (ab V1.7). Nur in der laufenden Woche gesetzt —
   in alten Wochen sähe eine komplett blasse Tabelle nach „gesperrt" aus. */
table.schedule th.day-today,
table.schedule td.day-today { background: var(--surface-alt); }
table.schedule th.day-today { border-bottom-color: var(--primary); }
.today-mark {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 0.68rem;
    text-transform: none;
    letter-spacing: 0;
}
/* Zurückgenommen, nicht abgeschaltet: Vergangene Wochen darf man korrigieren, deshalb
   bleiben die Felder voll bedienbar und beim Bearbeiten wieder voll sichtbar. */
table.schedule td.day-past { opacity: 0.55; }
table.schedule td.day-past:hover,
table.schedule td.day-past:focus-within { opacity: 1; }
table.schedule th.day-past { opacity: 0.6; }

/* Mitarbeiterfarbe für die Tagesansicht der App (ab V1.6) */
.employee-cell { display: flex; align-items: center; gap: 0.5rem; }
.color-dot {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    border: 2px solid var(--surface-alt);
    padding: 0;
    cursor: pointer;
}
.color-dot:disabled { cursor: default; opacity: 0.5; }
/* Ohne zugewiesene Farbe wäre der Kreis unsichtbar — und damit nicht anklickbar. */
.color-dot.is-empty { background: var(--surface); border-style: dashed; }
.color-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    max-width: 220px;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--background);
    border-radius: var(--radius-sm);
}

.shift {
    background: var(--background);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
    margin-bottom: 0.4rem;
    min-width: 150px;
}
.shift .times { display: flex; gap: 0.3rem; align-items: center; }
.shift input[type="time"] { width: 100%; padding: 0.3rem 0.4rem; font-size: 0.85rem; }
.shift select { width: 100%; padding: 0.3rem 0.4rem; font-size: 0.85rem; margin-top: 0.3rem; }
/* Pausen in der Schicht (ab V1.7): als schmale Marken statt eines zweiten Auswahlmenüs —
   sonst wächst jede Schicht um eine ganze Zeile, auch bei denen ohne Pause. */
.break-tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
    margin-top: 0.3rem;
    padding: 0.15rem 0.2rem 0.15rem 0.45rem;
    background: var(--surface-alt);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
}
.break-total {
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: right;
}
.break-add {
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.2rem;
    background: none;
    border: 1px dashed var(--surface-alt);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}
.break-add:hover:not(:disabled) { color: var(--primary); border-color: var(--primary); }

.shift .remove {
    background: none; border: none; color: var(--danger);
    cursor: pointer; font-size: 0.9rem; padding: 0 0.2rem;
}
.shift-add {
    background: none;
    border: 1.5px dashed var(--surface-alt);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    width: 100%;
}
.shift-add:hover { border-color: var(--primary); color: var(--primary); }

.sick-badge {
    background: var(--danger);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.4rem;
}

/* ===== Badges & Chips ===== */
.badge {
    display: inline-block;
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--surface-alt);
    color: var(--text-primary);
}
.badge-success { background: var(--success); color: #fff; }
.badge-warning { background: var(--warning); color: #fff; }
.badge-danger { background: var(--danger); color: #fff; }
.badge-secondary { background: var(--secondary); color: #fff; }

/* ===== Banner & Meldungen ===== */
.banner-locked {
    background: var(--danger);
    color: #fff;
    border-radius: var(--radius);
    padding: 0.9rem 1.3rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}
/* Kontingent der Lizenz über der Mitgliederliste — informierend, nicht alarmierend. */
.banner-quota {
    background: var(--surface-alt);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-sm);
    padding: 0.7rem 1rem;
    margin: 0.8rem 0 1.2rem;
    font-size: 0.95rem;
}
/* Bereiche benennen: zwei Spalten (Web / App) nebeneinander, auf schmal untereinander. */
.area-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}
.area-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.5rem;
}
.area-row input[type="text"] { max-width: none; flex: 1; }
.area-toggle {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    white-space: nowrap;
    font-weight: 500;
}
.area-toggle input { width: auto; }

/* ===== Druckansicht der Abrechnung =====
   Eigene Seite ohne Menü. Über „Drucken -> Als PDF sichern" macht jeder Browser eine
   PDF-Datei daraus — deshalb kommt das Projekt ohne PDF-Bibliothek aus. */
.print-page { max-width: 820px; margin: 0 auto; padding: 2rem 1.5rem; }
.print-actions { display: flex; gap: 0.6rem; margin-bottom: 1.5rem; }
.print-sheet {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2.5rem;
}
.print-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.print-head h1 { margin-bottom: 0.2rem; }
.print-logo { width: 56px; height: 56px; border-radius: 12px; }
.print-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin: 1.8rem 0;
    padding: 1rem 0;
    border-top: 1px solid var(--surface-alt);
    border-bottom: 1px solid var(--surface-alt);
}
.print-label { display: block; font-size: 0.78rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--text-secondary); }
.print-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.print-table th {
    text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-secondary); padding: 0.5rem 0; border-bottom: 2px solid var(--surface-alt);
}
.print-table td { padding: 0.7rem 0; border-bottom: 1px solid var(--background); vertical-align: top; }
.print-table tfoot td { border-bottom: none; border-top: 2px solid var(--surface-alt); font-size: 1.05rem; }
.print-table .right { text-align: right; white-space: nowrap; }
.print-note { margin-top: 2rem; font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; }
/* Am Bildschirm stehen die Blätter der Monatsansicht untereinander wie Karten. */
.print-page-break + .print-page-break { margin-top: 2rem; }

@media print {
    /* Auf Papier gehören Schaltflächen und Schatten nicht hin. */
    .print-actions, .no-print { display: none; }
    .print-page { padding: 0; max-width: none; }
    .print-sheet { box-shadow: none; border-radius: 0; padding: 0; }
    body { background: #fff; }

    /* Ein Pferd, ein Blatt — nach dem letzten kein leeres Blatt hinterher. */
    .print-page-break { break-after: page; page-break-after: always; margin-top: 0; }
    .print-page-break:last-child { break-after: auto; page-break-after: auto; }
}

/* Einnahmen / Ausgaben / Ergebnis nebeneinander */
.finance-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin-top: 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--surface-alt);
    border-bottom: 1px solid var(--surface-alt);
}
.finance-summary strong { display: block; font-size: 1.35rem; }
.amount-positive { color: var(--success); }
.amount-negative { color: var(--danger); }
.chip-remove {
    background: none; border: none; cursor: pointer; font-size: 1rem;
    color: inherit; padding: 0 0 0 0.3rem; line-height: 1;
}

/* Karte für etwas, das schiefgeht — abgesetzt, aber nicht schreiend rot. */
.card-danger {
    border-left: 5px solid var(--danger);
}
.card-danger h2 { color: var(--danger); }

.quota-warning {
    color: var(--danger);
    font-weight: 600;
    margin-top: 0.3rem;
}
.alert {
    border-radius: var(--radius-sm);
    padding: 0.7rem 1rem;
    margin: 0.8rem 0;
    font-size: 0.9rem;
}
.alert-error { background: #F6E4E4; color: var(--danger); }
.alert-success { background: #E9EDE5; color: var(--success); }
.alert-info { background: var(--surface-alt); color: var(--text-primary); }
/* Nicht Fehler, sondern „schau mal drauf" — z. B. Pferde ohne Leistungen (ab V1.11). */
.alert-warning { background: #F7EBDF; color: #8A5424; }

/* ===== Dialog ===== */
.dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(74, 52, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.dialog {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 8px 30px rgba(74, 52, 42, 0.25);
    padding: 1.6rem 1.8rem;
    width: min(480px, 92vw);
    /* Lange Dialoge sollen im Fenster scrollen, statt oben und unten abzuschneiden. */
    max-height: 90vh;
    overflow-y: auto;
}
/* Für Dialoge mit Tabelle — 480 px reichen dafür nicht. */
.dialog.dialog-wide {
    width: min(980px, 94vw);
}
/* Die Tabelle darf schmal werden und notfalls scrollen, statt aus dem Dialog zu laufen. */
.table-scroll {
    overflow-x: auto;
    margin-bottom: 0.5rem;
}
.dialog .dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.3rem;
}

/* ===== Tabs ===== */
.tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}
.tabs button {
    border: none;
    background: var(--surface);
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    font-family: inherit;
}
.tabs button.active { background: var(--primary); color: #fff; }
.tabs button:hover:not(.active) { background: var(--surface-alt); }

/* Zahl am Tab („3 Dinge brauchen Aufmerksamkeit") — auch aus einem anderen Tab sichtbar. */
.tab-count {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0 0.4rem;
    min-width: 1.35em;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 0.78rem;
    line-height: 1.35em;
    text-align: center;
}
.tabs button.active .tab-count { background: rgba(255, 255, 255, 0.28); }

/* Unterreiter innerhalb eines Tabs (Geld-Management, ab V1.11) — bewusst leiser als
   die Hauptleiste, damit auf einen Blick klar bleibt, was Ebene eins und was Ebene
   zwei ist. */
.tabs-sub button {
    background: transparent;
    border: 1px solid var(--surface-alt);
    font-size: 0.85rem;
    padding: 0.4rem 0.9rem;
}
.tabs-sub button.active {
    background: var(--surface-alt);
    border-color: var(--surface-alt);
    color: var(--text-primary);
}
.tabs-sub button:hover:not(.active) { background: var(--surface); }

/* Monatsablauf auf der Finanz-Übersicht: erst Ausgaben, dann Abrechnung (ab V1.11).
   Bewusst untereinander statt nebeneinander — in der schmalen Karte bricht eine Zeile
   ohnehin um, und die Nummern tragen die Reihenfolge besser als ein Pfeil. */
.monatsablauf {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    background: var(--surface-alt);
    border-radius: 10px;
}
.monatsablauf .schritt { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }

/* ===== Verlaufsdiagramm =====
   Bewusst reines CSS statt einer Diagramm-Bibliothek — aus demselben Grund wie bei
   ImageSharp und QuestPDF in V1.3: Umsatzgrenzen in den Lizenzen. Zwölf Spalten mit
   Höhenangabe reichen für die Frage „rauf oder runter" vollkommen. */
.chart {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    height: 190px;
    padding-top: 1.2rem;
    overflow-x: auto;
}
.chart-col {
    flex: 1;
    min-width: 34px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    text-align: center;
}
.chart-bar {
    background: var(--primary);
    border-radius: 4px 4px 0 0;
    min-height: 0;
    transition: height 0.25s;
}
.chart-value {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
    white-space: nowrap;
}
.chart-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding-top: 0.35rem;
    border-top: 1px solid var(--surface-alt);
}

/* ===== Plattenplatz ===== */
/* Ein Balken statt einer nackten Prozentzahl: „7,8 von 38 GB" sieht man schneller,
   als man es liest. Reines CSS — dafür braucht es keine Diagramm-Bibliothek. */
.disk-bar {
    height: 10px;
    border-radius: 999px;
    background: var(--surface-alt);
    overflow: hidden;
    margin: 0.4rem 0 0.3rem;
}
.disk-bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 999px;
    transition: width 0.3s;
}
.disk-bar-fill.disk-bar-warn { background: var(--danger); }

/* ===== Posteingang ===== */
/* Anfragen stehen als Karten untereinander, nicht als Tabellenzeilen: die Nachricht
   ist Fließtext und soll im Volltext lesbar sein, ohne seitwärts zu scrollen. */
.request-item {
    border: 1px solid var(--surface-alt);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius);
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.9rem;
}
.request-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.request-message {
    background: var(--surface-alt);
    border-radius: var(--radius);
    padding: 0.7rem 0.9rem;
    margin: 0 0 0.8rem;
    white-space: pre-wrap;   /* Absätze so lassen, wie sie geschrieben wurden */
    overflow-wrap: anywhere; /* eine lange URL darf die Karte nicht aufziehen */
}

/* Ein Verweis mitten im Fließtext, der aber einen Tab wechselt statt zu navigieren. */
.btn-link {
    border: none;
    background: none;
    padding: 0;
    color: var(--primary);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* ===== Login ===== */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2.2rem 2.4rem;
    width: min(400px, 92vw);
}
/* Wochenraster der Pläne: Orte als Zeilen, Mo–So als Spalten */
.plan-grid td { padding: 0.35rem; }
.plan-slot {
    background: var(--surface-alt);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.5rem;
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
    border: 2px solid transparent;
}
/* Der Eintrag, der gerade unten im Formular bearbeitet wird */
.plan-slot-editing {
    border-color: var(--primary);
}
.plan-slot { cursor: pointer; }
.plan-slot:hover { border-color: var(--secondary); }
.horse-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    max-height: 200px;
    overflow-y: auto;
    padding: 0.6rem;
    border: 1px solid var(--surface-alt);
    border-radius: var(--radius-sm);
    margin-top: 0.4rem;
}
.horse-option { display: flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; }

.login-logo {
    width: 96px;
    height: 96px;
    border-radius: 22px;
    display: block;
    margin: 0 auto 0.6rem;
}

.row-inline { display: flex; gap: 0.7rem; align-items: flex-end; flex-wrap: wrap; }
.muted { color: var(--text-secondary); font-size: 0.87rem; }

#blazor-error-ui {
    background: var(--warning);
    color: #fff;
    bottom: 0;
    box-shadow: 0 -1px 4px rgba(0,0,0,0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* Auswahl „Stunden bei Krankheit" im Rollen-Fenster (ab V1.7) — abgesetzt, weil sie nur
   für planbare Rollen gilt und eine Pflichtangabe ist. */
.sick-rule {
    margin: 0.2rem 0 1rem 1.6rem;
    padding: 0.7rem 0.9rem;
    background: var(--background);
    border-radius: var(--radius-sm);
}
.sick-rule label { font-weight: 400; color: var(--text-primary); margin: 0; }