h1:focus {
    outline: none;
}

/* Aus der Blazor-Projektvorlage uebernommen und bis hierher nie an die Marke angepasst -
   Giftgruen und Signalrot standen neben der Navy/Gold-Palette wie Fremdkoerper. */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--sms-success);
}

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

.validation-message {
    color: var(--sms-danger);
}

.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: var(--sms-steel-500);
}

/* Aus der Blazor-Projektvorlage: sie faerbt und rechtsbuendigt den Platzhalter, wodurch
   Bootstraps eigene Regel (Platzhalter transparent, solange das schwebende Label darueber liegt)
   aufgehoben wurde. Sichtbar wurde das als doppelter Text im Feld - links das Label, rechts
   blass derselbe Platzhalter. Der Platzhalter bleibt unsichtbar, bis das Label nach oben
   wandert, also bei Fokus oder Eingabe. */
.form-floating > .form-control::placeholder {
    color: transparent;
}

.form-floating > .form-control:focus::placeholder {
    color: var(--sms-text-faint);
}

/* ==========================================================================
   State Marshal Service – Designsystem (Abschnitt 3)
   ========================================================================== */
:root {
    --sms-navy-950: #0a1220;
    --sms-navy-900: #0f1b2d;
    --sms-navy-800: #16283f;
    --sms-navy-700: #1f3654;
    --sms-steel-600: #3c5a78;
    --sms-steel-500: #51749a;
    --sms-sand-400: #c9a24b;
    --sms-sand-300: #d9bc78;
    --sms-surface-light: #f4f6f8;
    --sms-surface: #ffffff;
    --sms-text-dark: #101820;
    --sms-text-light: #eef2f6;
    --sms-success: #2e7d4f;
    --sms-warning: #b8860b;
    --sms-danger: #b3261e;
    --sms-info: #2f6690;
    /* Liquid-Glass-Redesign: großzügigere, gestaffelte Rundungen statt eines einzelnen Werts –
       kleine Bedienelemente (Chips, Tags) bleiben dezent gerundet, Flächen (Karten, Dialoge)
       wirken großzügiger, Buttons/Suchfelder werden zu vollen Pillen. */
    --sms-radius-sm: 10px;
    --sms-radius: 14px;
    --sms-radius-lg: 22px;
    --sms-radius-pill: 999px;
    --sms-shadow: 0 1px 2px rgba(6, 10, 18, 0.16), 0 12px 28px -8px rgba(6, 10, 18, 0.38);
    --sms-shadow-sm: 0 1px 2px rgba(6, 10, 18, 0.14), 0 4px 10px -2px rgba(6, 10, 18, 0.22);
    --sms-glass-blur: 26px;
    --sms-glass-saturate: 180%;
    --sms-glass-sheen: linear-gradient(155deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 45%);
    --sms-ease-spring: cubic-bezier(0.22, 1, 0.36, 1);

    /* MudBlazor bringt seine Schrift nur fuer eigene Komponenten mit. Die Identity-Seiten
       (Anmeldung, Passwort vergessen, Zugriff verweigert) benutzen keine davon und wurden
       deshalb in der Serifen-Standardschrift des Browsers gezeichnet - ausgerechnet die erste
       Seite, die jeder zu sehen bekommt, sah nach einer anderen Anwendung aus. */
    --sms-font: Roboto, "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;

    /* Bewegungsdauern als Stufen statt frei gewaehlter Werte: bis hierher wurden fuer dieselbe
       Art Uebergang mal 0.15s, mal 0.2s, mal 0.25s benutzt. */
    --sms-duration-fast: 0.15s;
    --sms-duration: 0.2s;
    --sms-duration-slow: 0.35s;

    /* Rollen-Tokens fuer Text und Trennlinien. --sms-text-light/-dark sind Palettenwerte (eine
       helle bzw. dunkle Farbe), die folgenden beschreiben stattdessen die AUFGABE und werden
       weiter unten je Theme umdefiniert. Vorher hat jede Komponente ihre eigene Abstufung
       erfunden - rgba(238,242,246,...) kam in sechs verschiedenen Deckkraeften vor. */
    --sms-text-primary: var(--sms-text-light);
    --sms-text-muted: rgba(238, 242, 246, 0.6);
    --sms-text-subtle: rgba(238, 242, 246, 0.45);
    --sms-text-faint: rgba(238, 242, 246, 0.32);

    /* Zweite Familie fuer Flaechen, die IMMER dunkel sind: das Einsatzboard ist eine
       Leitstellen-Wandtafel und bringt seinen dunklen Grund selbst mit. Diese Abstufungen
       duerfen deshalb nicht mit dem Theme drehen - sonst stuende im hellen Modus dunkle
       Schrift auf dunkler Kachel. Bewusst ohne Gegenstueck im Light-Block. */
    --sms-on-dark-muted: rgba(238, 242, 246, 0.6);
    --sms-on-dark-subtle: rgba(238, 242, 246, 0.45);
    --sms-on-dark-faint: rgba(238, 242, 246, 0.32);

    --sms-hairline: rgba(255, 255, 255, 0.08);
    --sms-hairline-strong: rgba(255, 255, 255, 0.15);

    /* Das Einsatzboard ist bewusst immer dunkel (Leitstellen-Wandtafel) - eigene Tokens, damit
       diese Absicht sichtbar ist und nicht mit den themenabhaengigen Flaechen verwechselt wird. */
    --sms-surface-board: var(--sms-navy-900);
    --sms-surface-board-tile: var(--sms-navy-800);
}

body {
    font-family: var(--sms-font);
}

body,
body[data-theme="dark"] {
    background:
        radial-gradient(circle at 12% 8%, rgba(201, 162, 75, 0.10), transparent 42%),
        radial-gradient(circle at 88% 20%, rgba(47, 102, 144, 0.18), transparent 48%),
        radial-gradient(circle at 50% 100%, rgba(60, 90, 120, 0.12), transparent 55%),
        linear-gradient(160deg, var(--sms-navy-950) 0%, var(--sms-navy-900) 55%, var(--sms-navy-950) 100%);
    background-attachment: fixed;
    color: var(--sms-text-light);
}

/* Heller Modus (Abschnitt 3): body{} war zuvor unbedingt auf die dunkle Navy-Palette fixiert –
   der Umschalter in der Kopfleiste (_isDarkMode) hat zwar MudBlazors eigene Komponenten (Karten,
   Kopfleiste, Drawer) über PaletteLight korrekt umgestellt, aber die Seiten-Hintergrundfarbe und
   -Textfarbe blieben dunkel, da body{} keine der beiden MudBlazor-Paletten referenzierte. MainLayout
   spiegelt _isDarkMode deshalb per JS-Interop (theme.js) in ein data-theme-Attribut auf <body>.*/
body[data-theme="light"] {
    background:
        radial-gradient(circle at 12% 8%, rgba(201, 162, 75, 0.06), transparent 42%),
        radial-gradient(circle at 88% 20%, rgba(47, 102, 144, 0.08), transparent 48%),
        var(--sms-surface-light);
    background-attachment: fixed;
    color: var(--sms-text-dark);

    /* Ohne diese Umschaltung blieb der helle Modus auf den Seitenhintergrund beschraenkt: alles,
       was seine Schriftfarbe selbst setzte (Leitfaeden, Gesetze, Einsatzberichte, der
       Text-Editor, die Identity-Seiten), zeichnete weiterhin helle Schrift - im hellen Modus
       also hell auf hell. Flaechen, die bewusst immer dunkel bleiben (Einsatzboard,
       Anmeldekarte), sind davon nicht betroffen, sie bringen ihren Hintergrund selbst mit. */
    --sms-text-primary: var(--sms-text-dark);
    --sms-text-muted: rgba(16, 24, 32, 0.68);
    --sms-text-subtle: rgba(16, 24, 32, 0.52);
    --sms-text-faint: rgba(16, 24, 32, 0.38);
    --sms-hairline: rgba(16, 24, 32, 0.1);
    --sms-hairline-strong: rgba(16, 24, 32, 0.18);
}

/* ==========================================================================
   "Liquid Glass"-Designsprache (Abschnitt 3, Redesign): an Apples aktuelle
   Glas-Materialsprache angelehnte, transluzente, geblurrte Flächen auf Basis
   der bestehenden Navy/Gold-Markenfarben statt deckender Karten. Greift
   global über die MudBlazor-Basisklassen, damit nicht jede Seite einzeln
   angepasst werden muss. Gegenüber der Vorversion: stärkerer Blur/Saturate
   für mehr "Tiefe", ein diffuseres, geschichtetes Schattenbild statt eines
   einzelnen harten Schattens, und ein Lichtschein-Verlauf, der die obere
   Kante jeder Fläche wie eine echte Glaskante wirken lässt.
   ========================================================================== */
.mud-paper,
.mud-appbar,
.mud-drawer,
.mud-popover {
    backdrop-filter: blur(var(--sms-glass-blur)) saturate(var(--sms-glass-saturate));
    -webkit-backdrop-filter: blur(var(--sms-glass-blur)) saturate(var(--sms-glass-saturate));
    border: 1px solid var(--sms-hairline-strong);
}

.mud-paper {
    background-image: var(--sms-glass-sheen);
    box-shadow: var(--sms-shadow-sm);
    transition: box-shadow var(--sms-duration-slow) var(--sms-ease-spring), transform var(--sms-duration-slow) var(--sms-ease-spring);
}

.mud-drawer {
    border-right: 1px solid var(--sms-hairline-strong);
    border-top: none;
    border-bottom: none;
    border-left: none;
    box-shadow: 4px 0 24px -8px rgba(6, 10, 18, 0.28);
}

/* Dialoge liegen über beliebigem Seiteninhalt (Tabellen, Karten, Text) und brauchen daher
   deutlich mehr Deckkraft als die übrigen Glaskacheln, sonst schimmert der Hintergrund zu
   stark durch und Formularinhalte werden schwer lesbar. Mischung aus der (transluzenten)
   Surface- und der (deckenden) Background-Palettenfarbe hält den Glass-Look, wird aber
   spürbar deckender – und bleibt dabei automatisch für Dark/Light-Modus korrekt. */
.mud-dialog {
    background-color: color-mix(in srgb, var(--mud-palette-surface) 30%, var(--mud-palette-background) 70%);
    background-image: var(--sms-glass-sheen);
    border-radius: var(--sms-radius-lg) !important;
    box-shadow: var(--sms-shadow);
}

.mud-appbar {
    border: none;
    border-bottom: 1px solid var(--sms-hairline-strong);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 8px 24px -12px rgba(6, 10, 18, 0.35);
}

/* Apple-artige, großzügig gerundete Flächen: Karten/Dialoge/Popover bekommen die größere
   "lg"-Rundung, damit sie sich spürbar von kleinteiligeren Bedienelementen (Chips, Tags,
   die weiterhin --sms-radius-sm nutzen) absetzen. */
.mud-paper,
.mud-popover .mud-list,
.mud-menu .mud-list {
    border-radius: var(--sms-radius-lg) !important;
}

/* Sanfte, "federnde" Übergänge statt abrupter Zustandswechsel für die wichtigsten
   interaktiven Elemente – zusammen mit dem Press-Effekt unten das taktile Apple-Gefühl. */
.mud-button-root,
.mud-icon-button,
.mud-switch,
.mud-nav-link,
.mud-chip,
.mud-input-control {
    transition: background-color var(--sms-duration) var(--sms-ease-spring), border-color var(--sms-duration) var(--sms-ease-spring),
        box-shadow var(--sms-duration) var(--sms-ease-spring), transform var(--sms-duration-fast) var(--sms-ease-spring), opacity 0.2s ease;
}

/* Gefüllte Buttons als volle Pille mit dezentem Press-Feedback, statt der eher kantigen
   Material-Defaultform – das ist eine der auffälligsten visuellen Apple-Signaturen. */
.mud-button-filled {
    border-radius: var(--sms-radius-pill);
    box-shadow: var(--sms-shadow-sm);
}

.mud-button-filled:active {
    transform: scale(0.97);
}

.mud-button-outlined {
    border-radius: var(--sms-radius-pill);
}

.mud-icon-button:active {
    transform: scale(0.92);
}

/* Runde Suchfelder/Textfelder mit "Outlined"-Variante wirken in Apples Sprache eher wie Pillen
   (siehe z. B. Spotlight-Suche) als wie klassische Formularfelder mit Radius 4px. */
.sms-global-search .mud-input-outlined {
    border-radius: var(--sms-radius-pill);
}

.sms-login-page {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 20% 15%, rgba(201, 162, 75, 0.14), transparent 45%),
        radial-gradient(circle at 82% 25%, rgba(63, 143, 206, 0.16), transparent 50%),
        radial-gradient(circle at top, var(--sms-navy-800), var(--sms-navy-950) 70%);
    padding: 1.5rem;
}

/* ==========================================================================
   Anmeldung – Auftrittschoreografie
   Die Anmeldeseite wird statisch gerendert (klassischer Formular-POST, siehe
   IdentityLayout), deshalb ist alles hier bewusst reines CSS: die Animationen
   laufen beim Rendern los und brauchen keinen Blazor-Circuit. Die Reihenfolge
   kommt aus --sms-step am jeweiligen Element, damit sich Felder nachträglich
   umsortieren lassen, ohne das CSS anzufassen.
   ========================================================================== */
.sms-login-page::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 30% 80%, rgba(201, 162, 75, 0.10), transparent 40%),
        radial-gradient(circle at 70% 20%, rgba(63, 143, 206, 0.10), transparent 40%);
    animation: sms-login-drift 18s ease-in-out infinite alternate;
}

@keyframes sms-login-drift {
    from { transform: translate3d(-2%, -1%, 0) scale(1.02); }
    to   { transform: translate3d(2%, 1%, 0) scale(1.08); }
}

@keyframes sms-login-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* Das Logo kommt zuerst und etwas beherzter als der Rest – es ist der Anker der Seite. */
@keyframes sms-login-badge-in {
    0%   { opacity: 0; transform: scale(0.72) translateY(10px); }
    60%  { opacity: 1; transform: scale(1.04) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes sms-login-halo {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50%      { opacity: 0.7; transform: scale(1.18); }
}

@keyframes sms-login-sheen {
    0%   { transform: translateX(-140%) rotate(18deg); }
    55%  { transform: translateX(140%) rotate(18deg); }
    100% { transform: translateX(140%) rotate(18deg); }
}

@keyframes sms-login-spin {
    to { transform: rotate(360deg); }
}


.sms-login-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    animation: sms-login-rise 0.55s var(--sms-ease-spring) both;
    background: rgba(20, 32, 52, 0.5);
    background-image: var(--sms-glass-sheen);
    backdrop-filter: blur(var(--sms-glass-blur)) saturate(var(--sms-glass-saturate));
    -webkit-backdrop-filter: blur(var(--sms-glass-blur)) saturate(var(--sms-glass-saturate));
    border: 1px solid var(--sms-hairline-strong);
    border-radius: var(--sms-radius-lg);
    box-shadow: var(--sms-shadow);
    padding: 2.5rem 2.25rem;
}

.sms-login-brand {
    position: relative;
    text-align: center;
    margin-bottom: 1.75rem;
}

.sms-login-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: var(--sms-radius-lg);
    background: linear-gradient(135deg, var(--sms-sand-400), var(--sms-sand-300));
    box-shadow: 0 8px 20px -6px rgba(201, 162, 75, 0.55), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
    color: var(--sms-navy-950);
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 0.85rem;
    overflow: hidden;
    animation: sms-login-badge-in 0.7s var(--sms-ease-spring) both;
}

.sms-login-badge-text {
    font-size: 1.15rem;
}

.sms-login-logo {
    max-width: 78%;
    max-height: 78%;
    object-fit: contain;
}

/* Weicher, atmender Schein hinter dem Logo – liegt ausserhalb des Badges, damit ihn dessen
   overflow:hidden (das den Lichtstreifen beschneidet) nicht mit abschneidet. */
.sms-login-brand::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 110px;
    height: 110px;
    margin-left: -55px;
    margin-top: -19px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 162, 75, 0.38), transparent 68%);
    pointer-events: none;
    animation: sms-login-halo 4.5s ease-in-out infinite;
}

/* Einmaliger Lichtstreifen über das Logo, kurz nachdem es sitzt. */
.sms-login-badge::after {
    content: "";
    position: absolute;
    top: -50%;
    left: 0;
    width: 45%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    animation: sms-login-sheen 1.6s ease-out 0.55s both;
}

.sms-login-brand h1 {
    animation: sms-login-rise 0.5s var(--sms-ease-spring) 0.18s both;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--sms-text-light);
    margin: 0;
}

.sms-login-brand p {
    animation: sms-login-rise 0.5s var(--sms-ease-spring) 0.26s both;
    color: var(--sms-steel-500);
    font-size: 0.9rem;
    margin: 0.25rem 0 0;
}

.sms-login-page .form-control {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    border-radius: var(--sms-radius-sm);
    color: var(--sms-text-light);
    transition: background-color var(--sms-duration) var(--sms-ease-spring), border-color var(--sms-duration) var(--sms-ease-spring),
        box-shadow var(--sms-duration) var(--sms-ease-spring);
}

.sms-login-page .form-control:focus {
    background-color: rgba(255, 255, 255, 0.07);
    color: var(--sms-text-light);
    border-color: var(--sms-sand-400);
    box-shadow: 0 0 0 0.2rem rgba(201, 162, 75, 0.22);
}

.sms-login-page .form-label {
    color: var(--sms-steel-500);
}

.sms-btn-primary {
    background-color: var(--sms-sand-400);
    border-color: var(--sms-sand-400);
    color: var(--sms-navy-950);
    font-weight: 600;
    border-radius: var(--sms-radius-pill) !important;
    box-shadow: var(--sms-shadow-sm);
    transition: background-color var(--sms-duration) var(--sms-ease-spring), transform var(--sms-duration-fast) var(--sms-ease-spring),
        box-shadow var(--sms-duration) var(--sms-ease-spring);
}

.sms-btn-primary:hover, .sms-btn-primary:focus {
    background-color: var(--sms-sand-300);
    border-color: var(--sms-sand-300);
    color: var(--sms-navy-950);
}

.sms-btn-primary:active {
    transform: scale(0.98);
}

.sms-alert-error {
    background-color: rgba(179, 38, 30, 0.15);
    border: 1px solid var(--sms-danger);
    color: #f3b6b2;
    border-radius: var(--sms-radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.sms-login-footnote {
    margin-top: 1.5rem;
    font-size: 0.8rem;
    color: var(--sms-steel-500);
    text-align: center;
}

/* Jede Zeile des Formulars folgt der vorigen; --sms-step steht am Element im Markup. */
.sms-login-step {
    animation: sms-login-rise 0.45s var(--sms-ease-spring) calc(0.3s + var(--sms-step, 0) * 0.07s) both;
}

/* Absende-Zustand: der Beschriftungstext weicht einem Spinner, die Karte tritt leicht zurück.
   Wird per JS gesetzt; ohne JS bleibt der Button unverändert und das Formular funktioniert. */
.sms-login-submit {
    position: relative;
}

.sms-login-form--submitting .sms-login-submit {
    pointer-events: none;
}

.sms-login-form--submitting .sms-login-submit-label {
    visibility: hidden;
}

.sms-login-form--submitting .sms-login-submit::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.15rem;
    height: 1.15rem;
    margin: -0.575rem 0 0 -0.575rem;
    border: 2px solid rgba(10, 18, 32, 0.25);
    border-top-color: var(--sms-navy-950);
    border-radius: 50%;
    animation: sms-login-spin 0.7s linear infinite;
}

.sms-login-form--submitting {
    opacity: 0.75;
    transition: opacity var(--sms-duration-slow) var(--sms-ease-spring);
}

/* Wer Bewegung reduziert haben möchte, bekommt die Seite sofort fertig aufgebaut – der
   Spinner bleibt, weil er Zustand anzeigt und keine Dekoration ist. */
@media (prefers-reduced-motion: reduce) {
    .sms-login-page::before,
    .sms-login-card,
    .sms-login-badge,
    .sms-login-badge::after,
    .sms-login-brand::before,
    .sms-login-brand h1,
    .sms-login-brand p,
    .sms-login-step {
        animation: none;
    }
}


.sms-account-message {
    max-width: 640px;
    margin: 4rem auto;
    text-align: center;
    color: var(--sms-text-primary);
}

.sms-identity-page {
    max-width: 900px;
    margin: 3rem auto;
    padding: 0 1.5rem;
    color: var(--sms-text-primary);
}

.sms-identity-page h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.sms-identity-lead {
    color: var(--sms-steel-500);
    margin-bottom: 1.75rem;
}

/* Die Kontoseiten benutzten die unveraenderten Bootstrap-"nav-pills": kraeftiges Blau als
   Linkfarbe und als Flaeche des aktiven Eintrags. Das ist die einzige Stelle der Anwendung mit
   dieser Farbe und stach aus der Navy/Gold-Palette heraus wie ein Fremdkoerper - ausgerechnet
   auf der Seite, auf die jeder neue Benutzer beim ersten Anmelden zwangsweise geleitet wird. */
.sms-identity-page .nav-pills {
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}

.sms-identity-page .nav-pills .nav-link {
    color: var(--sms-text-primary);
    border: 1px solid transparent;
    border-radius: var(--sms-radius-sm);
    padding: 0.5rem 0.75rem;
    transition: background-color var(--sms-duration) var(--sms-ease-spring),
        border-color var(--sms-duration) var(--sms-ease-spring);
}

.sms-identity-page .nav-pills .nav-link:hover {
    background-color: rgba(201, 162, 75, 0.12);
    border-color: var(--sms-steel-600);
}

.sms-identity-page .nav-pills .nav-link.active {
    background-color: rgba(201, 162, 75, 0.18);
    border-color: var(--sms-sand-400);
    color: var(--sms-sand-300);
    font-weight: 600;
}

/* Wie die Seite selbst themenabhaengig: zuvor standen hier feste dunkle Felder, die im hellen
   Modus als dunkle Kaesten auf heller Seite stehen geblieben waeren. */
.sms-identity-page .form-control {
    background-color: var(--sms-hairline);
    border-color: var(--sms-steel-600);
    color: var(--sms-text-primary);
}

.sms-identity-page .form-control:focus {
    background-color: var(--sms-hairline);
    color: var(--sms-text-primary);
    border-color: var(--sms-sand-400);
    box-shadow: 0 0 0 0.2rem rgba(201, 162, 75, 0.25);
}

.sms-identity-page .form-label {
    color: var(--sms-steel-500);
}

.sms-identity-back {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--sms-steel-500);
    font-size: 0.9rem;
    text-decoration: none;
}

.sms-identity-back:hover {
    color: var(--sms-sand-400);
}

/* ==========================================================================
   Leitstelle – Einheitenboard (Abschnitt 17.4)
   ========================================================================== */
.sms-unit-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sms-unit-timestamp {
    display: block;
    color: #ffffff;
    text-align: right;
    margin-top: auto;
    padding-top: 0.4rem;
}

.sms-roster-tile,
.sms-unit-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--sms-radius-pill);
    background-color: var(--sms-navy-800);
    border: 1px solid var(--sms-steel-600);
    font-size: 0.85rem;
    color: var(--sms-text-light);
}

.sms-roster-tile,
.sms-unit-tag-draggable {
    cursor: grab;
    user-select: none;
}

.sms-roster-tile:active,
.sms-unit-tag-draggable:active {
    cursor: grabbing;
}

.sms-roster-pool {
    min-height: 2.5rem;
    border-radius: var(--sms-radius);
    transition: background-color 0.15s ease;
}

/* Karten-Metazeile (Standort, Funkkanal, Fahrzeug, Besatzung) als deutlich lesbare Pills statt
   blasser Fließtextzeilen (vorher u. a. "Kein Standort erfasst" kaum lesbar). */
.sms-unit-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.sms-unit-tag {
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
}

.sms-unit-tag-muted {
    color: var(--sms-steel-500);
    border-style: dashed;
    background-color: transparent;
}

.sms-unit-tag-clickable {
    cursor: pointer;
}

.sms-unit-tag-clickable:hover {
    border-color: var(--sms-steel-500);
}

.sms-unit-tag-editing {
    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
}

.sms-unit-inline-input {
    width: 9rem;
}

.sms-unit-inline-input .mud-input-slot {
    padding-top: 0;
    padding-bottom: 0;
}

.sms-radio-channel-tile {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--sms-radius-sm);
    background-color: var(--sms-navy-800);
    border: 1px solid var(--sms-steel-600);
    font-size: 0.85rem;
}

.sms-radio-channel-name {
    font-weight: 600;
    color: var(--sms-sand-300);
}

.sms-radio-channel-freq {
    color: var(--sms-text-light);
}

.sms-drop-zone {
    border: 2px dashed var(--sms-steel-600);
    background: transparent !important;
    box-shadow: none !important;
    height: 100%;
}

.sms-drop-zone-content {
    min-height: 96px;
}

.sms-duty-toggle {
    padding: 0 0.25rem;
}

.sms-notification-panel {
    min-width: 320px;
    max-width: 420px;
    max-height: 420px;
    overflow-y: auto;
}

.sms-notification-item {
    cursor: pointer;
    border-bottom: 1px solid var(--sms-steel-600, rgba(255, 255, 255, 0.08));
}

.sms-notification-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.sms-notification-unread {
    background: rgba(255, 193, 7, 0.08);
    border-left: 3px solid var(--sms-sand-300);
}

/* Fokus-Sichtbarkeit für Tastaturbedienung (Abschnitt 3.4) */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--sms-sand-400);
    outline-offset: 2px;
}

/* ==========================================================================
   Anwendungsshell (MainLayout)
   ========================================================================== */
.sms-brand-text {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.sms-global-search {
    max-width: 320px;
    margin-right: 1rem;
}

/* Auf breiten Schirmen sagt die Textbeschriftung alles; das Symbol bliebe redundant. */
.sms-duty-toggle-icon {
    display: none;
}

.sms-global-search .mud-input {
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: var(--sms-radius);
}

.sms-logout-form {
    margin: 0;
    padding: 0.4rem 1rem;
}

.sms-logout-button {
    background: none;
    border: none;
    color: var(--sms-danger);
    font-weight: 600;
    padding: 0;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

/* macOS-/iOS-Seitenleisten heben den aktiven Eintrag über eine vollflächige, gerundete
   "Pille" hinter der ganzen Zeile hervor statt eines schmalen Farbstreifens am Rand –
   deutlich ruhiger und dem Vorbild näher. */
.sms-drawer .mud-nav-link {
    border-radius: var(--sms-radius-sm);
    margin: 2px 0.5rem;
}

/* !important nötig: MudBlazors eigene Regel
   ".mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled)" hat höhere
   Spezifität (5 Klassen) als ein einfacher ".sms-drawer .mud-nav-link.active"-Selektor (3 Klassen)
   und würde sonst weiterhin den neutralen Grauton statt des Marken-Golds anzeigen. */
.sms-drawer .mud-nav-link.active {
    background-color: rgba(201, 162, 75, 0.16) !important;
    box-shadow: 0 0 0 1px rgba(201, 162, 75, 0.25) inset;
}

.sms-drawer .mud-nav-link:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.05);
}

.sms-drawer .mud-nav-group .mud-nav-link {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.sms-main-content {
    position: relative;
    z-index: 0;
    min-height: 100vh;
}

/* Dezentes Wasserzeichen des Portal-Logos im Hauptframe (Abschnitt 17.5) - hinter dem eigentlichen
   Inhalt, klickdurchlässig und über "background-attachment: fixed" auch beim Scrollen zentriert im
   sichtbaren Bereich, statt nur einmal am oberen Rand der Seite zu erscheinen. */
.sms-has-watermark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("/files/system/logo");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: min(50vw, 560px);
    opacity: 0.1;
    pointer-events: none;
}

/* ==========================================================================
   Responsive: normaler Desktop / MacBook (schmalerer Laptop-Viewport) / Handy
   (Abschnitt "Ansicht für verschiedene Bildschirmformate optimieren"). Statt
   die Suche unterhalb einer Breite komplett auszublenden (früher: display:none
   ab 900px, was die Suche auf Tablet/Handy funktional entfernt hätte), schrumpft
   sie stattdessen und die weniger wichtigen Kopfleisten-Texte weichen zuerst.
   ========================================================================== */
@media (max-width: 960px) {
    .sms-brand-text,
    .sms-duty-toggle-label {
        display: none;
    }

    /* Ohne Textbeschriftung muss das Symbol die Unterscheidung tragen - es wird erst hier
       sichtbar, damit auf breiten Schirmen Symbol und Text nicht doppelt dasselbe sagen. */
    .sms-duty-toggle-icon {
        display: inline-flex;
        opacity: 0.85;
    }

    .sms-global-search {
        max-width: none;
        flex: 1 1 120px;
        min-width: 0;
        margin-right: 0.5rem;
    }
}

@media (max-width: 480px) {
    .sms-duty-toggle {
        margin-right: 0.25rem !important;
    }

    .sms-main-content .mud-container {
        padding: 0.5rem !important;
    }

    /* Verhindert, dass eine einzelne, unbedacht breit gesetzte Zeile (Tabelle, Grid, langes Wort)
       horizontales Scrollen der gesamten Seite statt nur der betroffenen Zeile auslöst. */
    .mud-table-container {
        overflow-x: auto;
    }
}

.sms-search-result-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.25rem 0;
}

.sms-search-result-category {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.65;
}

.sms-search-result-snippet {
    opacity: 0.7;
    white-space: normal;
}

.sms-radio-code-drawer .mud-drawer-content {
    overflow-y: auto;
}

/* Verhindert horizontales Überlaufen auf sehr schmalen Handy-Viewports (< 380px), ohne die
   MudBlazor-interne Öffnen/Schließen-Positionsberechnung zu stören, die auf dem Width-Parameter
   als reinem Pixelwert basiert – ein CSS max-width-Cap greift erst NACH dieser Berechnung. */
.sms-radio-code-drawer {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Das Adornment-Icon des outlined MudTextField sitzt standardmäßig mit einem leicht negativen
   Versatz im Feldrand verankert - im schmalen Drawer (380px, davon 32px pa-4-Innenabstand) wirkt
   das dadurch optisch am linken Rand angeschnitten. Zusätzlicher Innenabstand kompensiert das. */
.sms-radio-code-search {
    padding-left: 0.25rem;
    box-sizing: border-box;
}

.sms-radio-code-search .mud-input-adornment-start {
    margin-left: 0 !important;
}

.sms-radio-code-row {
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(255, 255, 255, 0.08));
}

.sms-radio-code-code {
    font-weight: 600;
    min-width: 3.5rem;
}

.sms-radio-code-desc {
    opacity: 0.85;
}

.sms-subtle {
    color: var(--sms-steel-500);
}

/* Rangkuerzel in Listen: die gepunktete Unterlinie zeigt an, dass hinter der Abkuerzung noch
   etwas steht (der ausgeschriebene Rang im Tooltip) - ohne diesen Hinweis probiert niemand,
   darauf zu zeigen. help-Cursor aus demselben Grund. */
.sms-rank-code {
    border-bottom: 1px dotted var(--sms-steel-500);
    cursor: help;
    white-space: nowrap;
}

.sms-overdue {
    color: var(--sms-danger);
    font-weight: 600;
}

.sms-court-today {
    border-left: 4px solid #b8860b;
    background-color: rgba(184, 134, 11, 0.08);
}

/* Erhöht/Dringend haben helle Kopfleisten-Hintergründe (siehe MainLayout.razor
   ThreatLevelAppBarStyle) und brauchen deshalb dunklen statt weißen Text/Icons. Die meisten
   Elemente erben die auf .mud-appbar gesetzte Inline-color per CSS-Vererbung automatisch (u. a.
   alle Icons mit Color="Color.Inherit"); das Sucheingabefeld setzt seine Textfarbe jedoch selbst
   und muss hier gezielt überschrieben werden. */
.sms-appbar-threat-light .sms-global-search .mud-input-root,
.sms-appbar-threat-light .sms-global-search input {
    color: #0a1220 !important;
}

.sms-appbar-threat-light .sms-global-search .mud-input-root::placeholder,
.sms-appbar-threat-light .sms-global-search input::placeholder {
    color: rgba(10, 18, 32, 0.6) !important;
}

.sms-appbar-threat-light .sms-global-search .mud-input {
    background-color: rgba(10, 18, 32, 0.08);
}

.sms-threatlevel-label {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    white-space: nowrap;
}

.sms-report-editor textarea {
    font-size: 1rem;
    line-height: 1.6;
}

.sms-signature-pad-wrapper {
    background: #ffffff;
    border-radius: var(--sms-radius);
    border: 1px solid var(--sms-hairline-strong);
    display: inline-block;
    touch-action: none;
}

.sms-signature-pad {
    display: block;
    width: 100%;
    max-width: 600px;
    height: 180px;
    cursor: crosshair;
    touch-action: none;
}

/* ==========================================================================
   Formatierbare Textfelder (Quill, vendored – Abschnitt "Textformatierung")
   ========================================================================== */
.sms-rich-text-editor-quill {
    display: flex;
    flex-direction: column;
    border-radius: var(--sms-radius);
    overflow: hidden;
    border: 1px solid var(--sms-steel-600);
}

.sms-rich-text-editor-quill .ql-toolbar.ql-snow {
    background: var(--sms-navy-800);
    border: none;
    border-bottom: 1px solid var(--sms-steel-600);
}

.sms-rich-text-editor-quill .ql-container.ql-snow {
    border: none;
    flex: 1;
    overflow-y: auto;
    background: var(--sms-navy-900);
}

.sms-rich-text-editor-quill .ql-editor {
    color: var(--sms-text-primary);
    font-size: 1rem;
    line-height: 1.6;
}

.sms-rich-text-editor-quill .ql-editor.ql-blank::before {
    color: var(--sms-steel-500);
    font-style: normal;
}

.sms-rich-text-editor-quill .ql-snow .ql-stroke {
    stroke: var(--sms-text-light);
}

.sms-rich-text-editor-quill .ql-snow .ql-fill,
.sms-rich-text-editor-quill .ql-snow .ql-stroke.ql-fill {
    fill: var(--sms-text-light);
}

.sms-rich-text-editor-quill .ql-snow .ql-picker {
    color: var(--sms-text-light);
}

.sms-rich-text-editor-quill .ql-snow .ql-picker-options {
    background: var(--sms-navy-800);
    border-color: var(--sms-steel-600);
}

.sms-rich-text-editor-quill .ql-snow.ql-toolbar button:hover,
.sms-rich-text-editor-quill .ql-snow .ql-toolbar button:hover,
.sms-rich-text-editor-quill .ql-snow.ql-toolbar button.ql-active,
.sms-rich-text-editor-quill .ql-snow .ql-toolbar button.ql-active {
    color: var(--sms-sand-300);
}

.sms-rich-text-editor-quill .ql-snow.ql-toolbar button:hover .ql-stroke,
.sms-rich-text-editor-quill .ql-snow .ql-toolbar button:hover .ql-stroke,
.sms-rich-text-editor-quill .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.sms-rich-text-editor-quill .ql-snow .ql-toolbar button.ql-active .ql-stroke {
    stroke: var(--sms-sand-300);
}

.sms-rich-text-editor-quill .ql-snow .ql-tooltip {
    background: var(--sms-navy-800);
    border-color: var(--sms-steel-600);
    color: var(--sms-text-light);
    box-shadow: var(--sms-shadow);
}

.sms-rich-text-editor-quill .ql-snow .ql-tooltip input[type="text"] {
    background: var(--sms-navy-900);
    color: var(--sms-text-light);
    border-color: var(--sms-steel-600);
}

/* Anzeige von gespeicherten formatierten Inhalten (Einsatzberichte, Bekanntmachungen, Ausbildungen) */
.sms-search-highlight {
    background-color: rgba(201, 162, 75, 0.45);
    color: inherit;
    border-radius: 3px;
    padding: 0 2px;
}

.sms-rich-text-content {
    color: var(--sms-text-primary);
    line-height: 1.6;
    word-break: break-word;
}

.sms-rich-text-content p {
    margin: 0 0 0.75rem 0;
}

.sms-rich-text-content h2 {
    font-size: 1.3rem;
    margin: 1rem 0 0.5rem 0;
}

.sms-rich-text-content h3 {
    font-size: 1.1rem;
    margin: 0.85rem 0 0.4rem 0;
}

.sms-rich-text-content ul,
.sms-rich-text-content ol {
    margin: 0 0 0.75rem 1.5rem;
    padding: 0;
}

.sms-rich-text-content a {
    color: var(--sms-sand-300);
}

.sms-rich-text-content h1 {
    font-size: 1.6rem;
    margin: 1.25rem 0 0.6rem 0;
}

.sms-rich-text-content h4,
.sms-rich-text-content h5,
.sms-rich-text-content h6 {
    font-size: 1rem;
    margin: 0.75rem 0 0.35rem 0;
}

.sms-rich-text-content hr {
    border: none;
    border-top: 1px solid var(--sms-steel-600, rgba(255, 255, 255, 0.15));
    margin: 1rem 0;
}

.sms-rich-text-content blockquote {
    margin: 0 0 0.75rem 0;
    padding: 0.4rem 0.9rem;
    border-left: 3px solid var(--sms-sand-300);
    color: var(--sms-text-light);
    opacity: 0.85;
}

.sms-rich-text-content code {
    font-family: 'Courier New', monospace;
    background: var(--sms-hairline);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.9em;
}

.sms-rich-text-content pre {
    background: var(--sms-hairline);
    padding: 0.75rem;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0 0 0.75rem 0;
}

.sms-rich-text-content pre code {
    background: none;
    padding: 0;
}

.sms-rich-text-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 0 0.75rem 0;
}

.sms-rich-text-content th,
.sms-rich-text-content td {
    border: 1px solid var(--sms-steel-600, rgba(255, 255, 255, 0.15));
    padding: 0.4rem 0.6rem;
    text-align: left;
}

/* ==========================================================================
   Ausbildungskalender – Monatsansicht mit Kacheln
   ========================================================================== */
.sms-training-calendar-wrapper {
    overflow-x: auto;
}

.sms-training-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(120px, 1fr));
    gap: 1px;
    min-width: 800px;
    background-color: var(--sms-steel-600);
    border: 1px solid var(--sms-steel-600);
    border-radius: var(--sms-radius);
    overflow: hidden;
}

.sms-training-calendar-weekday-header {
    background-color: var(--sms-navy-800);
    padding: 0.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
}

.sms-training-calendar-cell {
    background-color: var(--sms-navy-900);
    min-height: 110px;
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sms-training-calendar-cell-muted {
    opacity: 0.4;
}

.sms-training-calendar-cell-today {
    box-shadow: inset 0 0 0 2px var(--sms-sand-400);
}

.sms-training-calendar-daynum {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sms-steel-500);
}

.sms-training-calendar-event {
    background-color: var(--sms-steel-600);
    border-radius: 6px;
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    gap: 0.3rem;
    align-items: baseline;
    white-space: nowrap;
    overflow: hidden;
}

.sms-training-calendar-event:hover {
    background-color: var(--sms-sand-400);
    color: var(--sms-navy-950);
}

.sms-training-calendar-event-cancelled {
    text-decoration: line-through;
    opacity: 0.6;
}

.sms-training-calendar-event-time {
    font-weight: 600;
    flex-shrink: 0;
}

.sms-training-calendar-event-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sms-training-calendar-month-label {
    min-width: 160px;
    text-align: center;
}

/* ==========================================================================
   State Prison – Personenfotos (Abschnitt 10.2, bis zu vier je Person)
   ========================================================================== */
.sms-prisoner-photo-tile {
    position: relative;
    display: inline-block;
}

.sms-prisoner-photo-remove {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    background: var(--sms-danger);
    color: white;
}

.sms-prisoner-photo-enlarge {
    display: inline-block;
    cursor: pointer;
    border-radius: 50%;
    transition: opacity 0.15s ease;
}

.sms-prisoner-photo-enlarge:hover {
    opacity: 0.85;
}

.sms-prisoner-photo-upload {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ==========================================================================
   Feinschliff: schlanke, halbtransparente Scrollbalken (macOS-Look) statt der
   breiten, deckenden Standard-Balken – rein kosmetisch, ohne Funktionsänderung.
   ========================================================================== */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.18);
    border-radius: var(--sms-radius-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
    background-clip: content-box;
}

body[data-theme="light"] {
    scrollbar-color: rgba(16, 24, 32, 0.22) transparent;
}

body[data-theme="light"] ::-webkit-scrollbar-thumb {
    background-color: rgba(16, 24, 32, 0.18);
}

body[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(16, 24, 32, 0.3);
}
/* ==========================================================================
   Leitstelle – Tabellarisches Einsatzboard
   Rasteroptik einer klassischen Leitstellen-/CAD-Wandtafel: feste Spalten je
   Einheit, durchgehende Zellenrahmen, freie Plätze bleiben als leere Slots
   sichtbar (statt einfach zu fehlen), damit die Kapazität auf einen Blick
   ablesbar ist. Drag & Drop der Besatzung bleibt unverändert erhalten.
   ========================================================================== */
/* Drei feste Zonen: links der Personalvorrat (Wartepool, Sammelbereiche wie "Bereit zur
   Einteilung", Fahrzeuge), in der Mitte die Streifen mit den übrigen Bereichen darunter,
   rechts die offenen Einsätze. Die Leitungszeile spannt über alle drei. */
.sms-board {
    display: grid;
    grid-template-columns: minmax(190px, 225px) minmax(0, 1fr) minmax(230px, 290px);
    gap: 1rem;
    align-items: start;
}

.sms-board-leadrow {
    display: grid;
    grid-template-columns: minmax(190px, 225px) minmax(0, 1fr);
    grid-column: 1 / -1;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

.sms-board-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* align-items:flex-start ist hier wesentlich: als Grid-Element wird dieser Container so hoch wie
   die Leitungs-Ebene daneben, und die Rollenkacheln wuerden ohne das mitwachsen – die Kacheln
   fuer Warden und Commanding Marshal haben aber einen festen Inhalt und sollen ihre Hoehe
   behalten, egal wie viele Personen links stehen. */
.sms-board-lead-boxes {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
}

.sms-board-role {
    flex: 1 1 200px;
    min-height: 3.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.9rem;
    text-align: center;
    border: 1px solid var(--sms-steel-600);
    border-radius: var(--sms-radius-sm);
    background-color: rgba(46, 125, 79, 0.16);
    color: var(--sms-text-light);
    font-weight: 600;
    letter-spacing: 0.02em;
    font-size: 0.85rem;
}

.sms-board-role--clickable {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.sms-board-role--clickable:hover {
    background-color: rgba(46, 125, 79, 0.28);
}

.sms-board-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-width: 0;
}

.sms-board-group {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sms-steel-600);
    border-radius: var(--sms-radius-sm);
    overflow: hidden;
    min-width: 0;
    /* Explizit gesetzt statt vom Seitenhintergrund geerbt: leere Slots sind durchsichtig und
       ihre blasse Schrift wuerde im hellen Modus sonst auf hellem Grund verschwinden. */
    background-color: var(--sms-surface-board);
}

.sms-board-group-header {
    padding: 0.5rem 0.7rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
    color: #ffffff;
    background-color: var(--sms-success);
}

.sms-board-group-header--info {
    background-color: var(--sms-info);
}

/* Jeder Marshal ist eine eigenstaendige Kachel mit sichtbarem Rahmen und Abstand – bei mehreren
   Personen in einer Einheit oder einem Bereich verschwimmen die Eintraege sonst zu einem Block. */
.sms-board-slot {
    display: block;
    margin: 0.35rem;
    padding: 0.4rem 0.55rem;
    text-align: center;
    font-size: 0.82rem;
    line-height: 1.3;
    color: var(--sms-text-light);
    background-color: var(--sms-surface-board-tile);
    border: 1px solid var(--sms-steel-600);
    border-radius: var(--sms-radius-sm);
    word-break: break-word;
}

.sms-board-slot--empty {
    color: var(--sms-on-dark-faint);
    background-color: transparent;
    border-style: dashed;
}

/* Rang in eigener, zurueckhaltender Zeile unter dem Namen (wie in der Vorlage). */
.sms-person-rank {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.72rem;
    font-style: italic;
    color: var(--sms-on-dark-subtle);
}

.sms-board-slot--draggable {
    cursor: grab;
    user-select: none;
}

.sms-board-slot--draggable:active {
    cursor: grabbing;
}

.sms-board-units {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    padding-bottom: 0.5rem;
}

/* Bereiche (Administration, Bürodienst, …) bilden eine eigene Reihe unterhalb der Streifen –
   bewusst ein eigener Flex-Container, damit sie nie neben eine einzelne Streife rutschen. */
.sms-board-areas {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--sms-steel-600);
}

.sms-area-col {
    flex: 0 0 250px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sms-steel-600);
    border-radius: var(--sms-radius-sm);
    overflow: hidden;
    background-color: var(--sms-surface-board);
    min-height: 8rem;
}

.sms-area-col-header {
    padding: 0.45rem 0.7rem;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    background-color: var(--sms-steel-600);
    text-shadow: 0 1px 2px rgba(6, 10, 18, 0.55);
}

.sms-area-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    padding: 1rem 0.6rem;
    text-align: center;
    font-size: 0.78rem;
    color: var(--sms-on-dark-faint);
}

.sms-unit-col {
    flex: 0 0 250px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sms-steel-600);
    border-radius: var(--sms-radius-sm);
    overflow: hidden;
    background-color: var(--sms-navy-900);
}

.sms-unit-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    /* Die Hintergrundfarbe kommt aus den Stammdaten und kann beliebig hell gewaehlt werden -
       gegen das Standardgruen erreicht Weiss nur rund 4.4:1 und verfehlt damit knapp die 4.5:1
       fuer Text dieser Groesse. Der dunkle Schatten haelt die Kennung auch dann lesbar, ohne
       der Behoerde ihre Farbwahl vorzuschreiben. */
    text-shadow: 0 1px 2px rgba(6, 10, 18, 0.55);
}

.sms-unit-line {
    display: flex;
    align-items: stretch;
    min-height: 2.1rem;
    border-top: 1px solid var(--sms-steel-600);
    font-size: 0.8rem;
    color: var(--sms-text-light);
}

.sms-unit-cell {
    display: flex;
    align-items: center;
    padding: 0.3rem 0.6rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.sms-unit-cell--label {
    flex: 0 0 auto;
    font-weight: 600;
    border-right: 1px solid var(--sms-steel-600);
}

.sms-unit-cell--grow {
    flex: 1 1 auto;
}

.sms-unit-cell--center {
    justify-content: center;
    text-align: center;
}

.sms-unit-cell--split {
    flex: 1 1 50%;
    justify-content: center;
    text-align: center;
    border-left: 1px solid var(--sms-steel-600);
}

.sms-unit-cell--muted {
    color: var(--sms-on-dark-faint);
}

.sms-unit-cell--clickable {
    cursor: pointer;
}

.sms-unit-cell--clickable:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

/* Der Standort ist die im Funkbetrieb am häufigsten abgefragte Angabe einer Streife und ging als
   schlichte Tabellenzeile zwischen Funkkanal und Einsatzdaten unter – deshalb eigene Zeile mit
   Beschriftung, Sandton-Hinterlegung und deutlich größerem Wert. */
.sms-unit-location {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.4rem 0.6rem;
    border-top: 1px solid var(--sms-steel-600);
    background-color: rgba(201, 162, 75, 0.1);
}

.sms-unit-location--clickable {
    cursor: pointer;
}

.sms-unit-location--clickable:hover {
    background-color: rgba(201, 162, 75, 0.2);
}

.sms-unit-location-label {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sms-sand-300);
}

.sms-unit-location-label .mud-icon-root {
    font-size: 0.9rem;
}

.sms-unit-location-value {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--sms-text-light);
    overflow-wrap: anywhere;
}

.sms-unit-location-value--empty {
    font-size: 0.85rem;
    font-weight: 400;
    font-style: italic;
    color: var(--sms-on-dark-faint);
}

.sms-unit-block {
    border-top: 1px solid var(--sms-steel-600);
    padding: 0.4rem 0.6rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--sms-text-light);
}

.sms-unit-block dt {
    /* Gleiche Beschriftungssprache wie .sms-unit-location-label: der Datenblock stand direkt
       darueber und benutzte eine zweite, schwaechere Variante - Etikett und Wert waren kaum
       voneinander zu unterscheiden. */
    color: var(--sms-on-dark-subtle);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sms-unit-block dd {
    margin: 0 0 0.45rem 0;
    font-size: 0.85rem;
}

.sms-unit-block dd:last-child {
    margin-bottom: 0;
}

.sms-unit-actions {
    display: flex;
    border-top: 1px solid var(--sms-steel-600);
    margin-top: auto;
}

.sms-unit-actions > * {
    flex: 1 1 0;
    min-width: 0;
}

.sms-unit-actions > * + * {
    border-left: 1px solid var(--sms-steel-600);
}

.sms-unit-col--placeholder {
    border-style: dashed;
    background-color: transparent;
}

/* Responsive: zuerst wandert die Einsatzspalte unter das Board, dann die Sidebar darüber;
   erst auf Handybreite werden die Einheiten- und Bereichsspalten gestapelt. */
@media (max-width: 1400px) {
    .sms-board {
        grid-template-columns: minmax(190px, 225px) minmax(0, 1fr);
    }

    .sms-board-incidents {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1100px) {
    .sms-board {
        grid-template-columns: minmax(0, 1fr);
    }

    .sms-board-leadrow {
        display: flex;
        flex-wrap: wrap;
    }

    .sms-board-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
        /* Ohne das dehnt sich jede Gruppe auf die Hoehe der hoechsten daneben - ein Bereich mit
           einem Eintrag bekam so ein grosses leeres Feld untergeschoben und sah unfertig aus. */
        align-items: flex-start;
    }

    .sms-board-sidebar > .sms-board-group {
        flex: 1 1 200px;
    }
}

@media (max-width: 700px) {
    /* Die leeren Plaetze zeigen auf der breiten Wandtafel die freie Kapazitaet einer Einheit -
       gestapelt auf dem Handy sind sie nur noch Leerlauf: eine Streife mit einem Marshal wurde
       dreimal so hoch wie noetig, und man scrollte an Platzhaltern statt an Personal vorbei. */
    .sms-board-slot--empty {
        display: none;
    }

    .sms-board-units,
    .sms-board-areas {
        flex-direction: column;
        overflow-x: visible;
    }

    .sms-unit-col,
    .sms-area-col {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* Fahrzeug-Pool: mehrzeilige Kacheln (Kennung, Mindestrang, Kennzeichen, Standort), per
   Drag & Drop in eine Streife ziehbar. */
.sms-vehicle-slot {
    display: block;
    padding: 0.45rem 0.6rem;
    border-top: 1px solid var(--sms-steel-600);
    background-color: var(--sms-navy-900);
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--sms-text-light);
    cursor: grab;
    user-select: none;
}

.sms-vehicle-slot:active {
    cursor: grabbing;
}

.sms-vehicle-slot strong {
    display: block;
    font-size: 0.82rem;
}

.sms-vehicle-slot span {
    color: var(--sms-on-dark-muted);
}

.sms-board-group--scroll {
    max-height: 26rem;
    overflow-y: auto;
}

/* Fahrzeug in der Einheit – bewusst dieselbe Kacheloptik wie im Fahrzeug-Pool, damit erkennbar
   bleibt, dass es sich um dieselbe Kachel handelt, die dorthin gezogen wurde. */
.sms-unit-vehicle {
    display: block;
    padding: 0.45rem 0.6rem;
    border-top: 1px solid var(--sms-steel-600);
    background-color: var(--sms-navy-800);
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--sms-text-light);
}

.sms-unit-vehicle strong {
    display: block;
    font-size: 0.82rem;
}

.sms-unit-vehicle span {
    display: block;
    color: var(--sms-on-dark-muted);
}

.sms-unit-vehicle--empty {
    text-align: center;
    color: var(--sms-on-dark-faint);
    background-color: transparent;
}

.sms-unit-vehicle-action {
    margin-top: 0.25rem;
}

/* Einsatzspalte rechts: kompakte Karten statt Tabelle, damit die Einsätze neben dem Board
   Platz finden. Jede Karte ist auf eine Streifenspalte ziehbar (= Einheit zuweisen). */
.sms-board-incidents {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sms-steel-600);
    border-radius: var(--sms-radius-sm);
    overflow: hidden;
    min-width: 0;
    background-color: var(--sms-surface-board);
}

.sms-board-group-header--alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background-color: var(--sms-danger);
}

.sms-incidents-all {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem;
    font-weight: 500;
}

.sms-incident-card {
    padding: 0.5rem 0.6rem;
    border-top: 1px solid var(--sms-steel-600);
    border-left: 4px solid var(--sms-steel-500);
    background-color: var(--sms-navy-900);
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--sms-text-light);
}

.sms-incident-card--draggable {
    cursor: grab;
    user-select: none;
}

.sms-incident-card--draggable:active {
    cursor: grabbing;
}

.sms-incident-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.sms-incident-prio {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sms-incident-title {
    margin-top: 0.15rem;
    overflow-wrap: anywhere;
}

.sms-incident-meta {
    font-size: 0.72rem;
    color: var(--sms-on-dark-muted);
    overflow-wrap: anywhere;
}

.sms-incident-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.4rem;
}

.sms-incident-hint {
    margin: 0;
    padding: 0.45rem 0.6rem;
    border-top: 1px dashed var(--sms-steel-600);
    font-size: 0.7rem;
    font-style: italic;
    color: var(--sms-on-dark-faint);
}

/* "Passwort vergessen?" unter dem Anmelde-Knopf sowie die neutrale Bestätigung auf der
   Anforderungsseite – gehören zur Anmeldestrecke und teilen deren Choreografie. */
.sms-login-page .checkbox .form-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.sms-login-page .form-check-input {
    margin: 0;
    flex: 0 0 auto;
}

.sms-login-forgot {
    margin: 0.85rem 0 0;
    text-align: center;
    font-size: 0.85rem;
}

.sms-login-forgot a,
.sms-login-footnote a {
    color: var(--sms-sand-300);
    text-decoration: none;
}

.sms-login-forgot a:hover,
.sms-login-footnote a:hover {
    text-decoration: underline;
}

.sms-login-notice {
    background-color: rgba(46, 125, 79, 0.15);
    border: 1px solid var(--sms-success);
    color: #bfe3cd;
    border-radius: var(--sms-radius);
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    line-height: 1.45;
}

/* Bewusst ganz am Dateiende und nicht oben bei den uebrigen Breakpoints: die Grundregeln der
   Einsatzkarten stehen weiter oben NACH jener Media-Query, und bei gleicher Spezifitaet gewinnt
   die spaetere Regel - die Rasterumstellung waere dort wirkungslos geblieben. */
@media (max-width: 1400px) {
    /* Auf voller Breite wuerde die schmale Kartenspalte zu einer Reihe extrem breiter, fast
       leerer Karten - Titel ganz links, Prioritaet ganz rechts, dazwischen nichts. Als Raster
       behalten die Karten ihre gedachte Breite und fuellen die Zeile. */
    .sms-board-incidents {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        align-content: start;
        gap: 0.6rem;
        padding: 0 0.6rem 0.6rem;
    }

    .sms-board-incidents > .sms-board-group-header,
    .sms-board-incidents > .sms-incident-hint {
        grid-column: 1 / -1;
        /* Die Kopfzeile sass bisher buendig im Rahmen; im Raster muessen die Innenabstaende
           wieder heraus, damit sie weiterhin ueber die gesamte Breite abschliesst. */
        margin-left: -0.6rem;
        margin-right: -0.6rem;
    }

    .sms-board-incidents > .sms-board-group-header {
        margin-bottom: 0.6rem;
    }

    /* Im Raster grenzt keine Karte mehr an die naechste - die obere Trennlinie wird zum Rahmen. */
    .sms-incident-card {
        border: 1px solid var(--sms-steel-600);
        border-left-width: 4px;
        border-radius: var(--sms-radius-sm);
    }
}