/* Diese vier Regeln kommen aus der Projektvorlage und setzen Farben HART — sie schlagen damit
   jede Variablen-Überschreibung. Damit die Erscheinungsbilder greifen, stehen sie jetzt selbst
   auf Variablen. Der Rückfallwert ist jeweils der bisherige Wert: ohne gewähltes Erscheinungsbild
   ändert sich hier nichts. */

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

a, .btn-link {
    color: var(--wp-accent, #006bb7);
}

.btn-primary {
    color: #fff;
    background-color: var(--wp-accent, #1b6ec2);
    border-color: var(--wp-accent, #1861ac);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--wp-accent, #258cfb);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

/* Tastaturbenutzer erreichen den Seiteninhalt ohne die lange Navigation. */
.wp-skip-link {
    position: fixed;
    top: .5rem;
    left: .5rem;
    z-index: 2000;
    padding: .65rem .9rem;
    color: #fff;
    background: var(--wp-accent-2, #084298);
    border-radius: .5rem;
    text-decoration: none;
    transform: translateY(-160%);
}

.wp-skip-link:focus {
    color: #fff;
    transform: translateY(0);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.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."
    }

/* Farbpunkt der Stammdatenlisten (Mitarbeiter, Taetigkeiten, Schichtvorlagen, Saisons).
   Die Klasse wurde an vier Stellen benutzt, hatte aber NIRGENDS eine Regel — in jeder
   Zeile stand deshalb eine rund 43 px breite leere Spalte, und die gepflegte Farbe war
   ueberhaupt nicht sichtbar. Hier als Grundregel, damit sie in allen vier Erscheinungs-
   bildern gilt. Der duenne dunkle Ring haelt die WCAG-Grenze von 3:1 fuer Nicht-Text
   auch dann ein, wenn die Kundschaft ein sehr helles Gelb waehlt (rgba(0,0,0,.45) auf
   Weiss ergibt 3,36:1). */
.wp-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .45);
    vertical-align: -1px;
}

/* In JEDEM Dialog bleiben Kopf und Fusszeile stehen; nur der Inhalt scrollt.
   Gemessen: Der Dienst-Dialog ist 800 px hoch — auf dem in Kommunen ueblichen Notebook mit
   768 px Hoehe lag „Speichern" damit 60 px unter dem Rand; am Handy waren es bei fuenf Dialogen
   bis 1374 px, also mehr als eine halbe Bildschirmhoehe. Erreichbar war der Knopf (der Dialog
   scrollt), sichtbar war er nicht — man muss erst suchen, um speichern zu koennen.
   Von 48 Dialogen trugen nur 6 die Bootstrap-Klasse modal-dialog-scrollable; statt sie einzeln
   nachzuruesten gilt das Verhalten hier fuer alle.
   BEWUSST max-height statt height (so macht es die Bootstrap-Klasse): Ein kleiner
   Bestaetigungsdialog soll klein bleiben und nicht auf Bildschirmhoehe aufgeblasen werden.
   Der Dialog ist ein FLEX-Container mit Hoechsthoehe: nur so kann der Inhalt zwischen
   Kopf und Fusszeile schrumpfen. Ein blosses max-height am .modal-content reichte nicht,
   weil ein prozentualer Wert eine definierte Elternhoehe braucht und .modal-dialog nur
   eine Hoechst-, keine feste Hoehe hat. */
.modal-dialog {
    max-height: calc(100% - var(--bs-modal-margin, .5rem) * 2);
    display: flex;
    flex-direction: column;
}

.modal-dialog > .modal-content {
    overflow: hidden;
    min-height: 0;
}

.modal-dialog > .modal-content > .modal-body {
    overflow-y: auto;
    min-height: 0;
}

/* Seitlich scrollende Tabellen zeigen, DASS sie scrollen.
   Gemessen auf 390 px: 17 von 20 Verwaltungslisten sind breiter als der Bildschirm (bis 837 px),
   sie scrollen korrekt in ihrem Rahmen — aber nichts wies darauf hin, und rechts stehen oft die
   Aktionsknoepfe. Der Schatten am Rand verschwindet, sobald dort nichts mehr kommt:
   Die beiden ersten Verlaeufe scrollen MIT dem Inhalt (local) und decken den jeweiligen Schatten
   am Anschlag zu; die beiden Schatten selbst stehen fest (scroll). */
.table-responsive {
    background:
        linear-gradient(to right, var(--wp-surface, #fff) 30%, rgba(255, 255, 255, 0)) left center,
        linear-gradient(to left, var(--wp-surface, #fff) 30%, rgba(255, 255, 255, 0)) right center,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0)) left center,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0)) right center;
    background-repeat: no-repeat;
    background-size: 36px 100%, 36px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* Eine gewarnte Tabellenzeile bekommt eine KANTE, keine Flaeche.
   Gemessen auf der Stundenkonten-Seite: 23 von 24 Zeilen trugen die volle Bernsteinflaeche
   (ein fehlender Kostensatz ist dort der Normalfall) — die Tabelle las sich nicht mehr als
   Tabelle, und ausgerechnet die eine Zeile MIT Daten sah aus wie der Ausreisser.
   Als Grundregel und nicht je Erscheinungsbild: Der Fehler steckte in allen vieren.
   Text bleibt weit ueber 4,5:1, die 3-px-Marke liegt bei 6,5:1 auf Weiss. */
tr.table-warning {
    --bs-table-bg: color-mix(in srgb, var(--wp-open-soft, #fff8ec) 34%, var(--wp-surface, #fff));
}

tr.table-warning > td:first-child {
    box-shadow: inset 3px 0 0 var(--wp-open, #b45309);
}

/* Zahlenansicht der Diagramme. Global und nicht je Baustein, weil alle vier
   Diagramme dieselbe Tabelle tragen sollen — eine abweichende Zeilenhoehe pro
   Karte faellt sofort auf. */
.wp-chart-table {
    font-size: .82rem;
}

.wp-chart-table th {
    font-weight: 600;
    color: var(--wp-ink-3, #6c757d);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.wp-chart-table td,
.wp-chart-table th {
    padding: .3rem .5rem;
}

.wp-chart-table td {
    font-variant-numeric: tabular-nums;
}

.wp-chart-table tr.wp-row-now td {
    font-weight: 600;
}

/* Der Umschalter Bild/Zahlen sitzt an der Karte und soll leise sein: Er ist
   eine Ansichtssache, kein Befehl. */
.wp-chart-switch {
    --bs-btn-padding-x: .45rem;
    --bs-btn-padding-y: .1rem;
    line-height: 1.2;
}

.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;
}

/* Seitenfuss mit den rechtlichen Pflichtangaben. Leise gehalten: Impressum und
   Datenschutzerklaerung muessen erreichbar sein, sie sind aber kein Bedienelement. */
.wp-footer {
    padding: .75rem 1rem 1.1rem;
    text-align: center;
    font-size: .78rem;
    color: var(--wp-ink-3, #656b80);
}

/* Die Rechtstexte kommen als Freitext aus den Einstellungen. pre-line erhaelt die Absaetze
   der eingebenden Person, bricht aber lange Zeilen weiterhin um — pre wuerde die Seite auf
   dem Handy seitlich wegschieben. */
.wp-legal-text {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Die Anmeldekarte ist mit 26rem fuer ein Formular richtig und fuer einen Rechtstext zu schmal:
   Live gemessen brach ein Impressum von 3.872 Zeichen mitten in Begriffen um
   („Umsatzsteuer-Identifikationsnummer gemaess § 27a / UStG:"). Die Rechtsseite bekommt deshalb
   mehr Breite — rund 70 Zeichen je Zeile, die uebliche Lesebreite.
   Erkannt wird sie am Inhalt (:has), damit dafuer kein zweites Layout noetig ist. Browser ohne
   :has zeigen weiterhin die schmale Karte: laenger, aber vollstaendig und lesbar. */
.wp-auth-panel:has(.wp-legal-section) {
    max-width: 44rem;
}

.wp-legal-section + .wp-legal-section {
    margin-top: 1.35rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--wp-line, #ecedf4);
}

/* Der Fehlerbalken von Blazor. GLOBAL und nicht im isolierten Stylesheet eines Layouts:
   Es ist ein Element mit fester Id, das jedes Layout ausgibt. Solange die Regeln nur an
   MainLayout hingen, war der Balken in jedem anderen Layout unformatiert — also dauerhaft
   sichtbar statt versteckt, im Textfluss statt am Seitenrand. */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ---------------------------------------------------------------------------
   Seiten VOR der Anmeldung (AuthLayout): Anmelden, Passwort vergessen,
   Kontobestaetigung, Sperre, kein Zugriff.

   Vorher liefen sie im MainLayout: links eine 232 px breite, voellig LEERE
   Seitenleiste, oben rechts ein Knopf „Anmelden" auf der Anmeldeseite selbst,
   und das Formular als 531 px schmale Spalte in einem 1366 px breiten Fenster.
   Daneben stand eine zweite Spalte, die nur mitteilte, dass keine externen
   Anmeldedienste konfiguriert sind.

   Alle Werte kommen aus den Erscheinungsbild-Variablen mit dem bisherigen Wert
   als Rueckfall — damit gilt die Karte in allen vier Erscheinungsbildern und
   sieht in „klassisch" trotzdem nicht kaputt aus.
   --------------------------------------------------------------------------- */
.wp-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--wp-ground, #f4f5fa);
}

/* Auf dem Handy ist 100vh die Hoehe OHNE eingeblendete Adressleiste; die Karte
   waere dann angeschnitten. dvh rechnet mit dem tatsaechlich sichtbaren Bereich. */
@supports (min-height: 100dvh) {
    .wp-auth {
        min-height: 100dvh;
    }
}

.wp-auth-panel {
    width: 100%;
    max-width: 26rem;
}

.wp-auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin-bottom: 1.15rem;
    color: var(--wp-ink, #1c1e2b);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -.01em;
}

.wp-auth-brand i {
    font-size: 1.45rem;
    line-height: 1;
    color: var(--wp-accent, #5948dc);
}

.wp-auth-card {
    padding: 1.75rem;
    background: var(--wp-surface, #fff);
    border: 1px solid var(--wp-line-strong, #dee0ec);
    /* Die Kante oben ist das einzige Markenelement der Seite: ein schmaler Akzentstreifen
       statt eines Bildes — Kommunen und ISO-Netze laden keine fremden Dateien nach. */
    border-top: 3px solid var(--wp-accent, #5948dc);
    border-radius: var(--wp-radius, 12px);
    box-shadow: var(--wp-shadow, 0 1px 2px rgba(28, 30, 43, .04), 0 6px 20px rgba(28, 30, 43, .06));
}

.wp-auth-title {
    margin-bottom: .25rem;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.015em;
}

.wp-auth-sub {
    margin-bottom: 1.35rem;
    color: var(--wp-ink-3, #656b80);
    font-size: .925rem;
}

/* Trenner mit Wort in der Mitte. Die Linie wird aus zwei wachsenden Flaechen gebildet,
   damit sie ohne feste Breiten in jede Kartenbreite passt. */
.wp-auth-or {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.25rem 0;
    color: var(--wp-ink-3, #656b80);
    font-size: .8rem;
}

.wp-auth-or::before,
.wp-auth-or::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--wp-line-strong, #dee0ec);
}

.wp-auth-foot,
.wp-auth-links {
    margin: 1.15rem 0 0;
    text-align: center;
    font-size: .82rem;
    color: var(--wp-ink-3, #656b80);
}

.wp-auth-links {
    margin-top: 1rem;
}

/* Der Rahmen ist auf schmalen Geraeten mehr Rand als Nutzen: Die Karte laeuft dort
   bis an die Kante und traegt nur noch die Akzentlinie oben. */
@media (max-width: 420px) {
    .wp-auth {
        padding: 1.25rem .75rem;
        align-items: flex-start;
    }

    .wp-auth-card {
        padding: 1.25rem 1.1rem;
    }
}