/* Basis-Stile der Admin-App in Fahrnova.
   ======================================
   Nur Reset, Grundtypografie und die app-weiten Grundmuster (Knöpfe, Felder, Hinweise). Alles
   Seiten- und Komponentenspezifische liegt in komponenten-isoliertem CSS (*.razor.css).

   Kein Hex-Wert in dieser Datei: jede Farbe, jeder Radius, jeder Schatten kommt aus
   fahrnova-tokens.css bzw. fahrnova-erweiterung.css. */

*, *::before, *::after {
    box-sizing: border-box;
}

/* Die Wurzel behält 16 px, damit die vorhandenen rem-Maße der Komponenten ihre Größe behalten;
   die Schriftgröße der Oberfläche setzt der Körper (Fahrnova: 13.5 px Fließtext). */
html {
    font-size: 16px;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: var(--fn-font);
    font-size: var(--fn-fs-body);
    line-height: 1.45;
    color: var(--fn-text);
    background-color: var(--fn-bg);
    -webkit-font-smoothing: antialiased;
}

/* Überschriften: Fahrnova setzt sie eng (negatives letter-spacing) und flach (lh 1.1). */
h1, h2, h3 {
    margin: 0 0 var(--fn-gap-4) 0;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

h1 {
    font-size: var(--fn-fs-h1);
}

h2 {
    font-size: 19px;
}

h3 {
    font-size: var(--fn-fs-card);
}

a {
    color: var(--fn-copper-text);
    text-decoration: none;
}

a:hover {
    color: var(--fn-nav-bg);
    text-decoration: underline;
}

/* Fokus ist nie der Browser-Standard: 2 px Türkis, Offset 2 px (Handoff, Interaktion & Verhalten).
   Steht bereits in fahrnova-tokens.css und wird hier nur für Klarheit wiederholt. */
:focus-visible {
    outline: 2px solid var(--fn-copper);
    outline-offset: 2px;
}

/* Zahlen sind tabellarisch — Uhrzeiten, Kilometer, Nummern, Beträge
   (Handoff, Designsprache Satz 4). */
.num {
    font-variant-numeric: tabular-nums;
}

/* Kicker: 10.5 px, 700, 0.16em, Großbuchstaben. */
.kicker {
    font-size: var(--fn-fs-kicker);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fn-muted);
}

/* ---------------------------------------------------------------- Knöpfe --- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fn-gap-2);
    padding: 9px 15px;
    border: 1px solid transparent;
    border-radius: var(--fn-r-ctrl);
    font-family: inherit;
    font-size: var(--fn-fs-body);
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background-color 120ms, border-color 120ms, transform 90ms;
}

.btn:hover {
    text-decoration: none;
}

/* Druckpunkt: kurzes Einsinken statt Farbsprung (Handoff: :active scale(.98), 90 ms). */
.btn:active:not(:disabled) {
    transform: scale(0.98);
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Primär ist das dunkle Marineblau — das Türkis bleibt Signal, nicht Fläche. */
.btn-primary {
    background-color: var(--fn-accent);
    border-color: var(--fn-accent);
    color: var(--fn-accent-text);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--fn-accent-hover);
    border-color: var(--fn-accent-hover);
    color: var(--fn-accent-text);
}

.btn:not(.btn-primary) {
    background-color: transparent;
    border-color: var(--fn-hairline);
    color: var(--fn-text);
}

.btn:not(.btn-primary):hover:not(:disabled) {
    background-color: var(--fn-bg);
    color: var(--fn-text);
}

/* Kleiner Knopf in Kartenköpfen und Zeilen: 12 px auf Papiergrund. */
.btn-klein {
    padding: 6px 11px;
    font-size: var(--fn-fs-small);
    border-radius: 7px;
}

.btn:not(.btn-primary).btn-klein {
    background-color: var(--fn-bg);
}

/* Zerstörende Aktion in einem Formular: bewusst nicht flächig rot — der Knopf steht neben
   „Speichern" und darf ihn nicht optisch überstimmen. */
.btn:not(.btn-primary).btn-gefahr {
    border-color: var(--fn-error);
    color: var(--fn-error-text);
}

.btn:not(.btn-primary).btn-gefahr:hover:not(:disabled) {
    background-color: var(--fn-tint-error);
    color: var(--fn-error-text);
}

/* ------------------------------------------------- Hinweise und Meldungen --- */

/* Fahrnova zeichnet Hinweise mit einer 3 px-Kante links, nicht mit einer Farbfläche
   (README §3.2, Hinweiszeile). */
.alert {
    margin: var(--fn-gap-4) 0;
    padding: 12px 14px;
    border: 1px solid var(--fn-hairline);
    border-left: 3px solid var(--fn-copper);
    border-radius: var(--fn-r-panel);
    background-color: var(--fn-surface);
    font-size: var(--fn-fs-row);
    line-height: 1.45;
    color: var(--fn-muted);
}

.alert-error {
    border-color: var(--fn-hairline);
    border-left-color: var(--fn-error);
    background-color: var(--fn-tint-error);
    color: var(--fn-error-text);
}

.alert-success {
    border-color: var(--fn-hairline);
    border-left-color: var(--fn-ok);
    background-color: var(--fn-tint-ok);
    color: var(--fn-ok-text);
}

/* -------------------------------------------------------------- Formulare --- */

.form-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: var(--fn-gap-4);
}

/* Beschriftung ÜBER dem Feld, 11.5 px, 600, gesperrt, Großbuchstaben (README §Screen 2). */
.form-field label {
    display: block;
    margin: 0;
    font-size: var(--fn-fs-micro);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fn-muted);
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--fn-hairline);
    border-radius: var(--fn-r-ctrl);
    font-family: inherit;
    font-size: var(--fn-fs-body);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    background-color: var(--fn-input);
    color: var(--fn-text);
}

/* Zahlenfelder tabellarisch: Kilometerstände und Uhrzeiten sollen untereinander stehen. */
.form-field input[type="number"],
.form-field input[type="time"],
.form-field input[type="date"],
.form-field input[type="datetime-local"],
.form-field input[type="tel"] {
    font-variant-numeric: tabular-nums;
}

.form-field textarea {
    line-height: 1.5;
    resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--fn-copper);
}

.form-field input.invalid,
.form-field select.invalid,
.form-field textarea.invalid {
    border-color: var(--fn-error);
}

/* Hilfstext unter einem Feld (z. B. „Wird zum Mandanten …"). */
.form-field .feld-hinweis {
    font-size: var(--fn-fs-micro);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--fn-muted);
}

.form-field-kontrollkaestchen {
    display: flex;
    align-items: center;
    gap: var(--fn-gap-2);
    margin-bottom: var(--fn-gap-4);
    font-size: var(--fn-fs-meta);
    color: var(--fn-muted);
}

.form-field-kontrollkaestchen label {
    margin: 0;
    font-weight: 500;
    color: var(--fn-muted);
}

.form-field-kontrollkaestchen input[type="checkbox"],
.form-field input[type="checkbox"],
.form-field input[type="radio"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--fn-mark-bg);
}

.form-zeile {
    display: flex;
    gap: var(--fn-gap-4);
}

.form-zeile > .form-field {
    flex: 1;
    min-width: 0;
}

@media (max-width: 768px) {
    .form-zeile {
        flex-direction: column;
        gap: 0;
    }
}

.validation-message {
    margin-top: var(--fn-gap-1);
    font-size: var(--fn-fs-micro);
    color: var(--fn-error-text);
}

.formular-knoepfe {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--fn-gap-3);
    margin-top: var(--fn-gap-6);
}

/* „Löschen" rückt nach links weg von „Abbrechen"/„Speichern" — ein Fehlklick darf nicht
   ausgerechnet den zerstörenden Knopf treffen. */
.formular-knoepfe .btn-gefahr {
    margin-right: auto;
}

/* Abschnitts-Überschrift in langen Formularen (Fahrnova: Kicker über dem Abschnitt). */
.formular-abschnitt {
    margin: var(--fn-gap-6) 0 var(--fn-gap-4) 0;
    padding-top: var(--fn-gap-4);
    border-top: 1px solid var(--fn-hairline);
    font-size: var(--fn-fs-kicker);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fn-muted);
}

.formular-abschnitt:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* ------------------------------------------------------------- Sonstiges --- */

/* Nur für Screenreader. `left`/`top` sind nicht kosmetisch, sondern der Kern der Sache
   (BUG-P18-6): ohne sie steht das Element an seiner statischen Position — in einem breiten,
   waagerecht scrollenden Raster also weit rechts. Ein absolut positioniertes Element wird vom
   `overflow` eines Vorfahren aber NICHT beschnitten, wenn dieser nicht sein Containing Block ist.
   Die versteckten Beschriftungen zogen dadurch das ganze Dokument in die Breite. */
.sr-only {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
}

/* Statushinweis (z. B. „Anmeldung wird geprüft …"). */
.status-hinweis {
    padding: var(--fn-gap-8);
    text-align: center;
    font-size: var(--fn-fs-meta);
    color: var(--fn-muted);
}

/* Blazor: unbehandelter Laufzeitfehler. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 14px;
    border-top: 3px solid var(--fn-error);
    background-color: var(--fn-tint-error);
    font-size: var(--fn-fs-meta);
    color: var(--fn-error-text);
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: var(--fn-gap-4);
    top: 12px;
    cursor: pointer;
}

/* Wer Bewegung reduzieren möchte, bekommt keine (Handoff: alle Übergänge auf 0 ms). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
    }
}