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;
    --sms-radius: 10px;
    --sms-shadow: 0 2px 10px rgba(10, 18, 32, 0.18);
}

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

/* ==========================================================================
   Glasmorphismus-Designsprache (Abschnitt 3, Redesign): 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.
   ========================================================================== */
.mud-paper,
.mud-appbar,
.mud-drawer,
.mud-popover {
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.mud-paper {
    background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 55%);
}

.mud-drawer {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-top: none;
    border-bottom: none;
    border-left: none;
}

/* 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) 25%, var(--mud-palette-background) 75%);
}

.mud-appbar {
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sms-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: 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(18, 30, 49, 0.55);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--sms-radius);
    box-shadow: var(--sms-shadow);
    padding: 2.25rem 2rem;
}

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

.sms-login-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sms-sand-400), var(--sms-sand-300));
    color: var(--sms-navy-950);
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.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: var(--sms-navy-800);
    border-color: var(--sms-steel-600);
    color: var(--sms-text-light);
}

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

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

.sms-drawer .mud-nav-link.active {
    background-color: rgba(201, 162, 75, 0.15);
    border-left: 3px solid var(--sms-sand-400);
}

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