h1:focus {
    outline: none;
}

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

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

/* ==========================================================================
   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);
}

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

/* ==========================================================================
   "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 rgba(255, 255, 255, 0.1);
}

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

.mud-drawer {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    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 rgba(255, 255, 255, 0.1);
    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 0.2s var(--sms-ease-spring), border-color 0.2s var(--sms-ease-spring),
        box-shadow 0.2s var(--sms-ease-spring), transform 0.15s 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 {
    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;
}

.sms-login-card {
    width: 100%;
    max-width: 420px;
    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 rgba(255, 255, 255, 0.1);
    border-radius: var(--sms-radius-lg);
    box-shadow: var(--sms-shadow);
    padding: 2.5rem 2.25rem;
}

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

.sms-login-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 20px;
    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;
}

.sms-login-brand h1 {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--sms-text-light);
    margin: 0;
}

.sms-login-brand p {
    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 0.2s var(--sms-ease-spring), border-color 0.2s var(--sms-ease-spring),
        box-shadow 0.2s 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 0.2s var(--sms-ease-spring), transform 0.15s var(--sms-ease-spring),
        box-shadow 0.2s 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;
}

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

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

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

.sms-identity-page .form-control {
    background-color: var(--sms-navy-800);
    border-color: var(--sms-steel-600);
    color: var(--sms-text-light);
}

.sms-identity-page .form-control:focus {
    background-color: var(--sms-navy-800);
    color: var(--sms-text-light);
    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: 999px;
    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: 8px;
    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;
}

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

@media (max-width: 900px) {
    .sms-global-search {
        display: none;
    }
}

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

.sms-overdue {
    color: #b3261e;
    font-weight: 600;
}

.sms-court-today {
    border-left: 4px solid #b8860b;
    background-color: rgba(184, 134, 11, 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 rgba(255, 255, 255, 0.15);
    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-light);
    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-rich-text-content {
    color: var(--sms-text-light);
    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: rgba(255, 255, 255, 0.08);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.9em;
}

.sms-rich-text-content pre {
    background: rgba(255, 255, 255, 0.08);
    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;
}

/* ==========================================================================
   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-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);
}