html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/*
    Farben der Diagramme.

    Sie stehen hier als Variablen und nicht im Markup, weil sie in der dunklen Darstellung andere
    sein müssen: Ein sattes Grün auf weißem Grund ist kräftig, auf dunklem Grund wirkt es stumpf.
    Achse und Beschriftung folgen der Textfarbe des Themes (`currentColor`) — sie sind dadurch in
    beiden Darstellungen genauso lesbar wie der übrige Text.
*/
:root {
    --uf-chart-confirmed: #198754;
    --uf-chart-calendar: #d98c1f;
    --uf-chart-axis: rgba(0, 0, 0, 0.35);
}

[data-bs-theme="dark"] {
    --uf-chart-confirmed: #4ad991;
    --uf-chart-calendar: #ffc861;
    --uf-chart-axis: rgba(255, 255, 255, 0.35);
}

/*
    Verweise, Schaltflächen und Validierungsfarben kommen bewusst NICHT mehr fest verdrahtet aus
    dieser Datei, sondern aus den Theme-Variablen von Bootstrap. Vorher stand hier ein festes
    Dunkelblau — auf dunklem Grund war das kaum vom Hintergrund zu unterscheiden.
*/
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--bs-body-bg), 0 0 0 0.25rem var(--bs-primary);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--bs-success);
}

.invalid {
    outline: 1px solid var(--bs-danger);
}

.validation-message {
    color: var(--bs-danger-text-emphasis, var(--bs-danger));
}

/* ── Bedienung auf schmalen Bildschirmen ─────────────────────────────────────────────────────

   Eine breite Tabelle in einen waagerechten Schiebebereich zu stecken macht sie *erreichbar*,
   nicht *lesbar*: Man verliert beim Schieben die Zeile aus dem Blick und weiß am Ende nicht mehr,
   zu welchem Datensatz die Zahl rechts gehört. Auf schmalen Geräten wird deshalb jede Zeile zu
   einer Karte, und jede Zelle trägt ihre Spaltenüberschrift als Beschriftung mit.

   Die Beschriftung kommt aus `data-label` am `<td>`. Fehlt sie, erscheint die Zelle ohne
   Vorspann — das ist unschön, aber nie falsch. */
@media (max-width: 767.98px) {
    .table-cards thead {
        display: none;
    }

    .table-cards tbody tr {
        display: block;
        border: 1px solid var(--bs-border-color);
        border-radius: 0.5rem;
        margin-bottom: 0.75rem;
        padding: 0.5rem 0.75rem;
    }

    .table-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        border: 0;
        padding: 0.3rem 0;
        text-align: left !important;
        width: auto !important;
    }

    .table-cards tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        opacity: 0.75;
        flex: 0 0 auto;
    }

    /* Zellen ohne Inhalt UND ohne Beschriftung tragen nichts bei und verschwenden nur Höhe. */
    .table-cards tbody td:not([data-label]):empty {
        display: none;
    }

    /* Aktionsleisten: auf Fingerbreite statt nebeneinander gequetscht. */
    .action-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .action-bar > *,
    .action-bar > form > .btn {
        width: 100%;
    }

    .action-bar > form {
        width: 100%;
    }

    /* Formulare: Ein Knopf neben einem Feld wird auf schmalen Geräten zur eigenen Zeile in voller
       Breite. Nebeneinander bliebe für beides zu wenig Platz, und getroffen würde am Ende das
       Falsche. */
    fieldset .btn {
        width: 100%;
    }

    /* Der Fuß mit der Versionsangabe darf den Inhalt nicht verdrängen. */
    .content {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Ein Finger ist kein Mauszeiger: Auf Geräten ohne genaue Zeigeeinrichtung bekommen Schaltflächen
   und Formularfelder eine Mindesthöhe, die sich sicher treffen lässt. Das gilt bewusst über
   `pointer: coarse` und nicht über die Bildschirmbreite — ein Tablet am Schreibtisch ist breit
   und wird trotzdem mit dem Finger bedient. */
@media (pointer: coarse) {
    .btn, .form-control, .form-select {
        min-height: 2.75rem;
    }

    .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
    }

    .nav-link {
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }
}

/* Diagramme dürfen nie breiter sein als ihr Platz — sonst schiebt sich die ganze Seite. */
svg {
    max-width: 100%;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}