/* Anwendungsweite Ergänzungen zu MudBlazor.
   Constitution V: alle Schriften und Stile werden lokal ausgeliefert,
   es wird keine externe Schriftquelle (CDN) eingebunden. */

html, body {
    margin: 0;
    padding: 0;
}

h1:focus {
    outline: none;
}

.validation-message {
    color: var(--mud-palette-error);
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: #fff;
}

.blazor-error-boundary::after {
    content: "Es ist ein Fehler aufgetreten.";
}

/* Einheitliches Formularraster der Pflegemasken. Native Formularfelder halten
   Maske, Komponententests und Nutzerreisen-Tests auf denselben Bedienelementen. */
.pflege-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
}

.pflege-feld {
    display: flex;
    flex-direction: column;
}

.pflege-feld label {
    font-size: 0.8125rem;
    margin-bottom: 0.25rem;
    color: var(--mud-palette-text-secondary);
}

.pflege-feld input,
.pflege-feld select,
.pflege-feld textarea {
    font: inherit;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: transparent;
    color: inherit;
}

.pflege-feld-suche {
    min-width: 16rem;
}

.pflege-verweis {
    color: var(--mud-palette-primary);
    text-decoration: none;
    align-self: center;
}

.pflege-verweis:hover {
    text-decoration: underline;
}

.historie-zustand {
    font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

.drift-liste {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.8125rem;
}

.drift-liste code {
    font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
}

.filter-liste {
    max-height: 24rem;
    overflow-y: auto;
}

.spalten-eintrag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.125rem 0;
}

.spalten-eintrag label {
    font-size: 0.8125rem;
}

.handbuch-block {
    font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    padding: 0.75rem 1rem;
    margin: 0.25rem 0 1rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Meldungen oben rechts (alle Seiten gleich). Rechts in der Kopfleiste liegt
   kein Bedienelement; die Meldung beginnt deshalb dort statt erst knapp über
   dem Seitentitel (Browserprüfung 006, Befund 1.6). */
.mud-snackbar-location-top-right {
    top: 8px;
}

/* Ein Verweis, der als Verweis erkennbar sein muss (z. B. mitten in einer Tabellenzelle). */
.verweis-sichtbar {
    color: var(--mud-palette-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.verweis-sichtbar:hover {
    text-decoration-thickness: 2px;
}

/* --- Spec 009: Anmeldung ---------------------------------------------------
   Hinweiskarte für „Kein Zugang“ und „Anmeldung nicht abgeschlossen“: eine
   ruhige Karte mittig im Inhaltsbereich, links eine Farbleiste wie beim
   Zustand der TheCarAPI-Anbindung. Der Ton folgt dem Grund. */
.hinweis-karte {
    --ton: var(--mud-palette-primary);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.25rem;
    max-width: 40rem;
    margin: 3rem auto 0;
    padding: 1.75rem 2rem 1.75rem 1.75rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 5px solid var(--ton);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -12px rgba(0, 0, 0, 0.12);
}

.hinweis-karte.ton-info { --ton: var(--mud-palette-info); }
.hinweis-karte.ton-achtung { --ton: var(--mud-palette-warning); }
.hinweis-karte.ton-gefahr { --ton: var(--mud-palette-error); }

.hinweis-symbol {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ton) 14%, var(--mud-palette-surface));
    color: color-mix(in srgb, var(--ton) 82%, black);
}

.hinweis-symbol .mud-icon-root {
    font-size: 1.625rem;
}

.hinweis-titel {
    margin: 0.5rem 0 0.5rem !important;
    font-weight: 600 !important;
}

.hinweis-text {
    color: var(--mud-palette-text-primary);
    max-width: 34rem;
}

.hinweis-person {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 1.25rem 0 1.5rem;
    padding-top: 0.875rem;
    border-top: 1px dashed var(--mud-palette-lines-default);
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.hinweis-person strong {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.hinweis-aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.hinweis-aktionen form {
    margin: 0;
}

@media (max-width: 600px) {
    .hinweis-karte {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
        margin-top: 1rem;
        padding: 1.25rem;
    }
}

/* Startseite: Kopf mit Einstieg, darunter die drei Datenebenen. */
.start-kopf {
    position: relative;
    overflow: hidden;
    padding: 2.5rem 2.5rem 2.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) 0%, transparent 55%),
        var(--mud-palette-surface);
}

.start-kopf-text {
    position: relative;
    max-width: 44rem;
}

.start-titel {
    margin: 0 0 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

.start-beschreibung {
    color: var(--mud-palette-text-secondary);
    margin-bottom: 1.75rem !important;
    font-size: 1.0625rem !important;
    line-height: 1.6 !important;
}

.start-kopf-bild {
    position: absolute;
    right: -1.5rem;
    bottom: -3rem;
    color: var(--mud-palette-primary);
    opacity: 0.07;
    pointer-events: none;
}

.start-hinweis {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 45%, transparent);
    background: color-mix(in srgb, var(--mud-palette-warning) 10%, var(--mud-palette-surface));
    font-size: 0.9375rem;
}

.start-hinweis .mud-icon-root {
    color: color-mix(in srgb, var(--mud-palette-warning) 80%, black);
    flex: none;
}

.start-hinweis a {
    color: var(--mud-palette-primary);
    font-weight: 500;
    text-underline-offset: 2px;
}

.start-ebenen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 960px) {
    .start-ebenen {
        grid-template-columns: minmax(0, 1fr);
    }

    .start-kopf {
        padding: 1.75rem 1.5rem;
    }
}

.start-ebene {
    padding: 1.25rem 1.25rem 1.375rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

.start-ebene-symbol {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.875rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
    color: var(--mud-palette-primary);
}

.start-ebene h2 {
    margin: 0 0 0.375rem;
    font-size: 1.0625rem;
    font-weight: 600;
}

.start-ebene p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
}