/* ==========================================================================
   KanzleiDesk Design Tokens
   Zentrale Stelle für Farben/Radien/Schatten - Seiten und Komponenten sollen
   diese Variablen referenzieren statt eigene Hex-Werte zu hart zu codieren.
   ========================================================================== */
:root {
    --kd-green: #47b067;
    --kd-green-dark: #3a9457;
    --kd-green-light: #e8f6ec;
    --kd-petrol: #1a4d5c;
    --kd-petrol-light: #2c6e82;
    --kd-petrol-lighter: #e5eef0;

    --kd-bg: #f8f9fa;
    --kd-surface: #ffffff;
    --kd-border: #e2e6ea;
    --kd-text: #212529;
    --kd-text-muted: #6c757d;

    --kd-radius-sm: 0.4rem;
    --kd-radius: 0.6rem;
    --kd-radius-lg: 0.9rem;

    --kd-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
    --kd-shadow-lg: 0 10px 30px rgba(16, 24, 40, 0.16);

    --kd-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Akzentfarbe (Einstellungen.razor): eigene Indirektionsebene statt direkt --kd-green zu verwenden, damit
       das Sidebar-Gradient (siehe MainLayout.razor.css, nutzt --kd-green/--kd-petrol direkt) unverändert bleibt,
       während Buttons/Fokus/Tabellen-Hover im Inhaltsbereich live umschaltbar sind. --kd-accent-light wird per
       color-mix() aus --kd-accent berechnet, dadurch passt es sich automatisch auch an das Dark-Theme an, ohne
       dass pro Farbe+Theme ein eigener Hell-Ton gespeichert werden müsste. */
    --kd-accent: var(--kd-green);
    --kd-accent-dark: var(--kd-green-dark);
    /* --kd-accent-light (14%) bleibt bewusst subtil - für persistente, flächige Einfärbungen (eigene Chat-
       Bubbles, "Heute"-Spalte im Kalender), wo ein kräftigerer Ton stören würde. Für tatsächliches Hover-/
       Active-Feedback auf Klickelementen (Tabellenzeilen, Cards, Listeneinträge) reichte 14% auf hellem/weißem
       Untergrund nicht für sichtbaren Kontrast - dafür --kd-accent-hover (22%) und --kd-accent-active (30%). */
    --kd-accent-light: color-mix(in srgb, var(--kd-accent) 14%, var(--kd-surface));
    --kd-accent-hover: color-mix(in srgb, var(--kd-accent) 22%, var(--kd-surface));
    --kd-accent-active: color-mix(in srgb, var(--kd-accent) 30%, var(--kd-surface));
}

/* Dunkles Design (Einstellungen.razor -> wwwroot/js/theme.js setzt data-theme="dark" auf <html>). Nur die
   Kern-Tokens werden hier überschrieben - alle Regeln, die bereits var(--kd-*) verwenden, passen sich dadurch
   automatisch an. Zusätzlich setzt theme.js auch Bootstraps eigenes data-bs-theme="dark", wodurch Tabellen/
   Formulare/Cards/Modals von Bootstrap selbst mitgestylt werden (bootstrap.min.css bringt das bereits mit). */
:root[data-theme="dark"] {
    --kd-bg: #1a1f24;
    --kd-surface: #2a3038;
    --kd-border: #3d454f;
    --kd-text: #e8eaed;
    --kd-text-muted: #9aa4ad;
}

/* Textgröße (Einstellungen.razor): skaliert die rem-Basis - da Bootstrap fast durchgängig mit rem arbeitet,
   wirkt sich das global auf die gesamte Anwendung aus, ohne jede Komponente einzeln anzupassen. */
html[data-textsize="gross"] {
    font-size: 18.5px;
}

html[data-textsize="klein"] {
    font-size: 15px;
}

html, body {
    font-family: var(--kd-font);
    color: var(--kd-text);
}

body {
    background-color: var(--kd-bg);
}

h1, h2, h3, h4, h5 {
    font-weight: 700;
    color: var(--kd-text);
}

h1 { font-size: 1.7rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }

.text-muted, small {
    color: var(--kd-text-muted) !important;
}

a, .btn-link {
    color: var(--kd-petrol-light);
}

a:hover, .btn-link:hover {
    color: var(--kd-petrol);
}

/* ---- Buttons ---- */
.btn {
    border-radius: var(--kd-radius-sm);
    font-weight: 500;
}

.btn-primary,
.btn-success {
    color: #fff;
    background-color: var(--kd-accent);
    border-color: var(--kd-accent);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-success:hover, .btn-success:focus, .btn-success:active {
    color: #fff;
    background-color: var(--kd-accent-dark) !important;
    border-color: var(--kd-accent-dark) !important;
}

.btn-outline-primary {
    color: var(--kd-accent);
    border-color: var(--kd-accent);
}

.btn-outline-primary:hover, .btn-outline-primary:active {
    background-color: var(--kd-accent) !important;
    border-color: var(--kd-accent) !important;
}

.btn-outline-secondary:hover {
    background-color: var(--kd-petrol-light);
    border-color: var(--kd-petrol-light);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus, .form-select:focus {
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--kd-accent) 25%, transparent);
}

/* ---- Formulare ---- */
.form-control, .form-select {
    border: 1px solid var(--kd-border);
    border-radius: var(--kd-radius-sm);
    background-color: var(--kd-surface);
    color: var(--kd-text);
}

.form-control:focus, .form-select:focus {
    border-color: var(--kd-accent);
}

label, .form-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--kd-text);
}

/* ---- Cards ---- */
.card {
    border: 1px solid var(--kd-border);
    border-radius: var(--kd-radius);
    box-shadow: var(--kd-shadow);
}

/* ---- Tabellen ---- */
.table {
    color: var(--kd-text);
}

.table thead th {
    background-color: color-mix(in srgb, var(--kd-text) 5%, var(--kd-surface));
    color: var(--kd-text);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid var(--kd-border);
    font-weight: 700;
}

.table td, .table th {
    vertical-align: middle;
    padding: 0.7rem 1rem;
    border-color: var(--kd-border);
}

.table tbody tr {
    color: var(--kd-text);
}

/* WICHTIG: Hover/Active auf den ZELLEN (> *), nicht auf <tr> selbst. Bootstrap 5.3 setzt über
   ".table>:not(caption)>*>*{background-color:var(--bs-table-bg)}" ein eigenes, deckendes background-color
   direkt auf jede <td>/<th> - das übermalt vollständig jede background-color, die man stattdessen auf das
   <tr> setzt (per Pixel-Vergleich in CDP bestätigt: computed style auf <tr> war korrekt, der tatsächlich
   gemalte Pixel blieb aber unverändert weiß). ".table tbody tr:hover > *" hat mit Spezifität (0,2,2) mehr
   Gewicht als Bootstraps (0,1,1) und gewinnt dadurch unabhängig von der Reihenfolge im Stylesheet - "> *"
   deckt sowohl <td> als auch ein eventuelles <th> in tbody ab, spiegelt Bootstraps eigenes Muster. */
.table tbody tr > * {
    transition: background-color 0.15s ease;
}

.table tbody tr:hover > * {
    background-color: var(--kd-accent-hover);
}

.table tbody tr:active > * {
    background-color: var(--kd-accent-active);
}

/* ---- Ticket-Listen (Tickets.razor/Home.razor/Ruckrufliste.razor/MeldetSich.razor/MandantDetail.razor -
   jeweils Aktive/Erledigte Tickets) ---- */
/* Opt-in über .tickets-tabelle, zusätzlich zu .table - EINE gemeinsame Klasse für alle Ticket-Listen (siehe
   oben), betrifft aber keine der Nicht-Ticket-Tabellen (Kalender/Anrufe/MandantDetail-Gesprächsdauer-Historie)
   und nicht die Karten-Ansicht (board-karte, siehe <style> in Tickets.razor). Zeilen wirken wie separate
   Karten: box-shadow/border-radius sitzen auf dem <tr> selbst (nicht von Bootstraps eigener
   Zellen-Hintergrundregel überdeckt, da das nur background-color betrifft, siehe Kommentar oben bei
   ".table tbody tr:hover > *") - der zusätzliche 1px-Rahmen (siehe Auftrag: "sichtbarere Trennung") dagegen
   MUSS auf den Zellen selbst liegen (border ist, anders als box-shadow, Teil des Tabellen-Rahmenmodells und
   wird im separaten Modus auf <tr> grundsätzlich NICHT gerendert) - oben/unten auf JEDER Zelle (ergibt dank
   border-spacing:0 in der Horizontalen eine nahtlose durchgehende Linie), links/rechts nur an den äußeren
   Zellen, zusammen mit der Eckenrundung. Hover/Active brauchen keine eigene Regel: ".table tbody tr:hover/
   :active > *" oben (Spezifität 0,2,2) gewinnt bereits gegen die Basis-Hintergrundregel unten (0,1,2).
   ticket-zeile-erledigt (siehe Tickets.razor) bleibt unverändert auf dem <tr> und wirkt wie bisher (Opacity
   betrifft die ganze Zeilenbox inkl. Schatten/Rahmen). */
.tickets-tabelle {
    border-collapse: separate;
    border-spacing: 0 0.5rem;
}

/* Etwas kräftiger als var(--kd-shadow) (0.06/0.04) - macht die Zeilen-Karten klarer von der Seite abgesetzt,
   ohne --kd-shadow selbst zu ändern (das würde auch board-karte/board-modal-content mitverändern). Rgba-Werte
   wirken in beiden Themes gleich (wie --kd-shadow selbst auch), da sie direkt auf var(--kd-surface) liegen. */
.tickets-tabelle tbody tr {
    box-shadow: 0 1px 4px rgba(16, 24, 40, 0.09), 0 1px 3px rgba(16, 24, 40, 0.06);
    border-radius: var(--kd-radius);
}

.tickets-tabelle tbody tr > * {
    background-color: var(--kd-surface);
    border-top: 1px solid var(--kd-border);
    border-bottom: 1px solid var(--kd-border);
}

.tickets-tabelle tbody tr > *:first-child {
    border-left: 1px solid var(--kd-border);
    border-top-left-radius: var(--kd-radius);
    border-bottom-left-radius: var(--kd-radius);
}

.tickets-tabelle tbody tr > *:last-child {
    border-right: 1px solid var(--kd-border);
    border-top-right-radius: var(--kd-radius);
    border-bottom-right-radius: var(--kd-radius);
}

/* Ticket-Nr.-Badge am Zeilenanfang (siehe TicketNrBadge.razor, verwendet auf allen Ticket-Listen) -
   min-width == height ergibt bei 1-3 stelligen Nummern einen Kreis; ab 4-5 Stellen sprengt der Inhalt die
   min-width und das Padding dehnt die Breite zur Pastille, bei gleichbleibender Höhe - kein aspect-ratio/JS
   nötig. */
.ticket-nr-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.4rem;
    margin-right: 0.6rem;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--kd-text) 10%, var(--kd-surface));
    color: var(--kd-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Mandant-Zelle mit Badge + Name (+ ggf. abweichender Kontakt, siehe MandantZelle.razor/Ticket.Kontaktname) -
   zwei Zeilen statt des früheren Inline-"(Kontakt: ...)"-Suffix. */
.mandant-zelle {
    display: inline-flex;
    align-items: flex-start;
}

.mandant-zelle-text {
    display: flex;
    flex-direction: column;
}

.mandant-zelle-kontakt {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kd-text-muted);
}

/* Status-Pastille in den Ticket-Listen UND im Ticket-Detail-Kopf - ein einziger Ort für Form (.kd-badge) UND
   Farbe (.kd-badge-status-*, siehe TicketStatusBadge.razor/TicketDetailModal.razor/TicketStatusExtensions.
   BadgeKlasse). Liegt hier global statt lokal in TicketDetailModal, da dessen <style>-Block nicht immer im DOM
   ist, wenn eine Liste zuerst gerendert wird. .kd-badge-icon/-label/-outline/-dringend (Priorität/Kategorie)
   bleiben weiterhin lokal in TicketDetailModal.razor, dort unverändert. */
.kd-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Weicher Stil für jeden Status: heller Hintergrund, farbiger Text, dezente Kontur derselben Nuance (wie schon
   zuvor bei InBearbeitung) - jetzt einheitlich für alle 6 Status. Jede Nuance bewusst unterscheidbar von jeder
   anderen (Neu/Wiedervorlage nicht mehr beide Blau, Erledigt nicht mehr dieselbe Grün-Familie wie
   InBearbeitung). Dasselbe Muster wie .kd-badge-dringend (helle Light-Theme-Werte + eigener Dark-Theme-
   Override via color-mix mit var(--kd-surface)) - für lesbaren Text in beiden Themes. */
.kd-badge-status-neu { background: #e7f1ff; color: #0a58ca; border: 1px solid #b6d4fe; }
:root[data-theme="dark"] .kd-badge-status-neu { background: color-mix(in srgb, #0d6efd 30%, var(--kd-surface)); color: #9ec5fe; border-color: color-mix(in srgb, #0d6efd 45%, var(--kd-surface)); }

/* Unverändert gegenüber vorher (Bahr-Hark-Grün-Familie, --kd-accent-light/-dark/-accent - bereits theme-sicher
   via color-mix, siehe :root oben, kein eigener Dark-Override nötig). */
.kd-badge-status-inbearbeitung { background: var(--kd-accent-light); color: var(--kd-accent-dark); border: 1.5px solid var(--kd-accent); }

.kd-badge-status-nichterreicht { background: #fdeee8; color: #a8381d; border: 1px solid #f6c7b3; }
:root[data-theme="dark"] .kd-badge-status-nichterreicht { background: color-mix(in srgb, #e85d3f 30%, var(--kd-surface)); color: #ffb199; border-color: color-mix(in srgb, #e85d3f 45%, var(--kd-surface)); }

/* Bernstein/Gold statt des früheren Himmelblaus (#0284c7) - mit Neu (ebenfalls Blau) im weichen Stil kaum zu
   unterscheiden gewesen. */
.kd-badge-status-wiedervorlage { background: #fdf0dc; color: #92400e; border: 1px solid #f7d49a; }
:root[data-theme="dark"] .kd-badge-status-wiedervorlage { background: color-mix(in srgb, #b45309 30%, var(--kd-surface)); color: #fbbf6a; border-color: color-mix(in srgb, #b45309 45%, var(--kd-surface)); }

.kd-badge-status-weitergeleitet { background: #f1ecfa; color: #5b3fa0; border: 1px solid #d9cbf0; }
:root[data-theme="dark"] .kd-badge-status-weitergeleitet { background: color-mix(in srgb, #7c5cbf 30%, var(--kd-surface)); color: #c7b3ec; border-color: color-mix(in srgb, #7c5cbf 45%, var(--kd-surface)); }

/* Türkis statt der früheren Bahr-Hark-Grün-Familie (--kd-green-dark) - mit InBearbeitung (ebenfalls Grün) im
   weichen Stil kaum zu unterscheiden gewesen (vorher durch solide Füllung vs. Outline getrennt, das fällt mit
   demselben weichen Stil für beide weg). */
.kd-badge-status-erledigt { background: #e3f4f2; color: #0f6b63; border: 1px solid #b9e4df; }
:root[data-theme="dark"] .kd-badge-status-erledigt { background: color-mix(in srgb, #0f766e 30%, var(--kd-surface)); color: #8fd9d0; border-color: color-mix(in srgb, #0f766e 45%, var(--kd-surface)); }

/* Fallback für einen (aktuell nicht existierenden) unbekannten Status - neutral wie .kd-badge-outline. */
.kd-badge-status-default { background: var(--kd-surface); color: var(--kd-text); border: 1.5px solid var(--kd-border); }

/* ---- Klickbare Cards (Dashboard-Kacheln, Mitarbeiter-Grid, Mein-Profil-Karte, ...) ---- */
.kd-card-clickable {
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.kd-card-clickable:hover {
    background-color: var(--kd-accent-hover);
}

.kd-card-clickable:active {
    background-color: var(--kd-accent-active);
}

/* ---- Geordnete Aktionsleiste + aufklappbare Aktions-Panels (Mitarbeiter-Detail) ---- */
/* Kleine, nebeneinander angeordnete Buttons statt verstreuter Überschriften+Buttons - öffnet per Klick GENAU
   EIN Panel darunter (siehe geoeffneteSektion in MitarbeiterDetail.razor). */
.kd-aktionsleiste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.kd-aktion-panel {
    border: 1px solid var(--kd-border);
    border-radius: var(--kd-radius);
    background: var(--kd-bg);
    padding: 1rem;
    margin-bottom: 1rem;
}

.kd-aktion-panel h5 {
    margin-top: 0;
    font-size: 0.95rem;
}

/* ---- Eigene, optisch abgesetzte Zone für Deaktivieren/Reaktivieren (Mitarbeiter-Detail/MandantDetail) ---- */
.kd-status-zone {
    margin-top: 2rem;
    padding: 1rem;
    border: 1px solid var(--kd-border);
    border-radius: var(--kd-radius);
    background: var(--kd-bg);
}

/* ---- Umschaltbare Überschriften (Notizen/Verlauf/Dateien, erledigte Tickets/Historie, ...) ---- */
/* Sichtbarer Rahmen/Hintergrund schon im Ruhezustand (nicht erst bei :hover) - reiner Text mit ▼/▲ gab keinen
   erkennbaren Hinweis, dass die Überschrift klickbar ist, bevor man mit der Maus darüberfährt. */
.kd-toggle-heading {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--kd-border);
    border-radius: var(--kd-radius-sm);
    background-color: var(--kd-bg);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.kd-toggle-heading:hover {
    background-color: var(--kd-accent-hover);
    border-color: var(--kd-accent);
}

.kd-toggle-heading:active {
    background-color: var(--kd-accent-active);
}

/* ---- Trefferlisten (MandantSuche/MitarbeiterSuche) - überschreibt Bootstraps eigenen .list-group-item-action-
   Hover mit den Design-Tokens, gleiche Farbsprache wie Tabellenzeilen/Cards. */
.list-group-item-action {
    transition: background-color 0.15s ease;
}

.list-group-item-action:hover, .list-group-item-action:focus {
    background-color: var(--kd-accent-hover);
    color: var(--kd-text);
}

.list-group-item-action:active {
    background-color: var(--kd-accent-active);
}

/* ---- Badges ---- */
.badge {
    border-radius: 999px;
    padding: 0.35em 0.75em;
    font-weight: 600;
}

.badge.bg-secondary {
    background-color: var(--kd-petrol-light) !important;
}

/* ---- Alerts ---- */
.alert {
    border-radius: var(--kd-radius);
    border: none;
}

.alert-success { background-color: var(--kd-green-light); color: #276b3f; }
.alert-danger { background-color: #fdecea; color: #9c2b26; }
.alert-warning { background-color: #fff6e5; color: #8a6100; }

/* Alert-Farben sind bewusst NICHT an --kd-accent gekoppelt (anders als Buttons/Fokus/Tabellen-Hover): Erfolg/
   Fehler/Warnung sind feste Statusfarben, unabhängig von der gewählten Akzentfarbe. Im Dark-Theme werden nur
   die konkreten Hell-Töne gegen dunklere, noch ausreichend kontrastreiche Varianten getauscht. */
:root[data-theme="dark"] .alert-success { background-color: #1d3a27; color: #8fd6a6; }
:root[data-theme="dark"] .alert-danger { background-color: #3a1f1e; color: #f0a8a4; }
:root[data-theme="dark"] .alert-warning { background-color: #3a2f14; color: #f0cd7a; }

.content {
    padding-top: 1.1rem;
}

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

.login-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background-color: var(--kd-bg);
}

.login-logo {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 0 auto 2rem;
}

.login-container {
    max-width: 380px;
    width: 100%;
    margin: 0 auto;
    padding: 2.5rem;
    background: var(--kd-surface);
    border: none;
    border-radius: var(--kd-radius-lg);
    box-shadow: var(--kd-shadow-lg);
}

.login-container h1, .login-container h3 {
    text-align: center;
}

.login-container h3 {
    margin-bottom: 1.5rem;
}

.ticket-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, 0.55);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1rem;
    overflow-y: auto;
    z-index: 1050;
    animation: kd-overlay-in 0.15s ease-out;
}

.ticket-modal-content {
    background: var(--kd-surface);
    border-radius: var(--kd-radius-lg);
    box-shadow: var(--kd-shadow-lg);
    /* 1100px statt vormals 900px - Platz für die 3. Spalte (Ticket Verlauf/Übersicht) im Kopfbereich,
       siehe TicketDetailModal.razor .ticket-modal-dreispaltig. */
    max-width: 1100px;
    width: 100%;
    padding: 1.5rem;
    position: relative;
    animation: kd-modal-in 0.15s ease-out;
}

.ticket-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

/* Wiederverwendbar für alle weiteren Overlay/Modal-Paare der App (Board-Status-Dialog, Kalender-Verschieben-Dialog,
   Anruf-Simulation, ...), damit nicht jede Seite ihre eigene Animation definieren muss. */
.board-modal-overlay, .kalender-modal-overlay, .anruf-sim-overlay, .confirm-dialog-overlay, .mandant-neu-overlay {
    animation: kd-overlay-in 0.15s ease-out;
}

.board-modal-content, .kalender-modal-content, .anruf-sim-dialog, .confirm-dialog-content, .mandant-neu-dialog {
    box-shadow: var(--kd-shadow-lg);
    animation: kd-modal-in 0.15s ease-out;
}

@keyframes kd-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes kd-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}