/* Modus-Tokens (hell/dunkel). Hell: Werte 1:1 aus dem alten ui/theme.py
   (THEMES["webapp"]). Dunkel (Schritt 42, überarbeitet): von advarics blue
   #053147 abgeleitete Flächen statt frei gewählter Grautöne - --text/--text-muted
   nutzen die offiziellen CI-Blau-Abstufungen (siehe CI Manual), nicht Weiß/Grau. */
[data-mode="light"] {
    --page-bg: #f4f6f8;
    --card-bg: #ffffff;
    --text: #1a1a1a;
    --text-muted: #6b7280;
    --border: #d8dee4;
    --error-text: #AF1919;
}

[data-mode="dark"] {
    --page-bg: #000000;
    --card-bg: #0F2A38;
    --text: #EDF2F4;
    --text-muted: #698391;
    --border: #26495A;
    --error-text: #F38F8F;
}

/* Layout-Tokens (Kopfzeile/Sidebar-Farbe + Akzent) - je Layout × Modus.
   Helles Erscheinungsbild nutzt die offiziellen advarics-CI-Farben (siehe CI Manual):
   advarics blue #053147 für Kopfzeile/Sidebar, advarics orange #EC6D28 für Akzente/CTAs. */
[data-layout="1"][data-mode="light"] {
    --chrome-bg: #053147;
    --chrome-text: #ffffff;
    --chrome-hover: rgba(255, 255, 255, 0.1);
    --rail-bg: #053147;
    --accent: #EC6D28;
    --accent-hover: #C95D22;
}

[data-layout="1"][data-mode="dark"] {
    --chrome-bg: #053147;
    --chrome-text: #ffffff;
    --chrome-hover: rgba(255, 255, 255, 0.08);
    --rail-bg: #053147;
    --accent: #EC6D28;
    --accent-hover: #C95D22;
}

/* Layout 2 nutzt bewusst dieselben Chrome-Farben wie Layout 1 (auf Patricks Wunsch) -
   der Unterschied zwischen den Layouts ist rein strukturell (Icon-Leiste + kontextuelles
   Panel statt voller Akkordeon-Liste), nicht farblich. */
[data-layout="2"][data-mode="light"] {
    --chrome-bg: #053147;
    --chrome-text: #ffffff;
    --chrome-hover: rgba(255, 255, 255, 0.1);
    --rail-bg: #053147;
    --accent: #EC6D28;
    --accent-hover: #C95D22;
}

[data-layout="2"][data-mode="dark"] {
    --chrome-bg: #053147;
    --chrome-text: #ffffff;
    --chrome-hover: rgba(255, 255, 255, 0.08);
    --rail-bg: #053147;
    --accent: #EC6D28;
    --accent-hover: #C95D22;
}

* {
    box-sizing: border-box;
}

/* Formularelemente übernehmen sonst die Browser-Standardschrift statt "Segoe UI". */
input,
button,
select,
textarea {
    font-family: inherit;
}

/* ---------------------------------------------------------------------------
   Ecken-Konvention (Patrick, Teil 13): alles Anklickbare ist "eckig-rund", nicht
   pillenfoermig - Vorbild ist der Abmelden-Knopf und die Symbol-Kacheln.
     6px   kleine Kennzeichen/Textknoepfe
     8px   normale Knoepfe, Chips, Reiter, Pfeile, Datumsfeld
     10px  Symbol-Kacheln in der Sidebar, Zahnrad
     14px  Rail-Knoepfe in Layout 2
     16px  Kacheln/Karten in Layout 2

   Bewusst RUND bleiben nur Dinge, bei denen die runde Form die Bedeutung tragt
   oder Zierde ist: das Logo-Badge (.login-badge, .booking-badge, Portal-Loader),
   der orange Lichtfleck der Login-Buehne (.login-accent), die runden
   Auswahlpunkte (.check-badge, .booking-type-check - Kreis heisst "genau einer"),
   der Schalter (.switch-track samt Knopf, Pillenform ist dort die
   allgemeingueltige Anmutung eines Umschalters) und die Mitarbeiterfoto-Avatare
   (.employee-avatar - rund ist die branchenuebliche Form fuer ein Personenfoto,
   z.B. Teams/Slack/GitHub).
   --------------------------------------------------------------------------- */

/* Mitarbeiterfoto oder Initialen-Platzhalter (siehe _avatar.html) - Tag-/
   Monatsansicht vor dem Namen, Admin -> Mitarbeiter in der Liste und beim
   Bearbeiten. */
.employee-avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 8px;
}

.employee-avatar-lg {
    width: 34px;
    height: 34px;
    margin-right: 8px;
}

.employee-avatar-fallback {
    background: var(--accent);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
}

.employee-avatar-lg.employee-avatar-fallback {
    font-size: 0.85rem;
}

/* Grundzoom der eingeloggten App: 90%, damit mehr auf den Bildschirm passt, ohne
   dass jeder Benutzer den Browser-Zoom selbst umstellen muss. Das Attribut setzt
   base.html nur fuer eingeloggte Seiten - Login-Buehne und die oeffentlichen
   Kunden-/Geheimnis-Seiten (eigener <html>-Tag in public_base.html) bleiben bei 100%.

   WICHTIG: zoom skaliert auch vh-Einheiten mit - 100vh sind bei 0.9 nur noch 90%
   der sichtbaren Hoehe. Alle Regeln, die die Fensterhoehe ausreizen, teilen deshalb
   durch --zoom (siehe .app-body/.app-content). Ohne das endete die Sidebar sichtbar
   vor dem unteren Fensterrand. Fixierte Overlays sind davon NICHT betroffen: sowohl
   inset:0 (Portal-Loader) als auch top/left:50% (Inhalts-Spinner) sitzen unter zoom
   nachgemessen korrekt. */
html[data-zoom="90"] {
    zoom: 0.9;
    --zoom: 0.9;
}

body {
    font-family: "Segoe UI", system-ui, sans-serif;
    background: var(--page-bg);
    color: var(--text);
    margin: 0;
}

a {
    color: inherit;
}

/* Kopfzeile */

.app-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--chrome-bg);
    color: var(--chrome-text);
    padding: 0.75rem 1.5rem;
    height: 52px;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    font-size: 1.05rem;
}

/* Logo als Kachel wie die Symbole in der Sidebar - aber bewusst weiter mit weissem
   Grund statt des navy Verlaufs: das Logo selbst ist dunkel und wuerde auf der
   dunklen Kachel verschwinden. Gemeinsam ist die Plastik (Schlagschatten +
   Lichtkante oben), dadurch wirkt es wie dieselbe Bauform. */
.app-logo {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #ffffff;
    padding: 2px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.app-topbar-user {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
}

.app-topbar-user form {
    margin: 0;
}

.app-topbar-user button.logout-button {
    background: var(--accent);
    color: #ffffff;
    border: none;
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

.app-topbar-user button.logout-button:hover {
    background: var(--accent-hover);
}

/* Kleiner Icon-Button in der Kopfzeile (Zahnrad-Link zu den Einstellungen). */

/* Zahnrad als Kachel - dieselbe Optik wie die Rail-Knoepfe in Layout 2: die
   Schaltflaeche selbst IST die Kachel, Groesse und Radius bleiben unveraendert. */
.icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: var(--chrome-text);
    text-decoration: none;
    background: linear-gradient(160deg, #2a5578 0%, #123049 55%, #071523 100%);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Aufgehellte Variante desselben Verlaufs - ein flaechiges Weiss wuerde die Kachel
   beim Ueberfahren verschwinden lassen (gleiches Vorgehen wie bei .rail-item). */
.icon-button:hover {
    background: linear-gradient(160deg, #38668a 0%, #1a405c 55%, #0d2537 100%);
}

/* Aktions-Buttons in der Terminbuchungen-Tabelle (kopieren / widerrufen / loeschen).
   Nutzten vorher .icon-button, dessen Icon-Farbe aber --chrome-text (#ffffff) ist -
   gedacht fuer die navy Kopfzeile, auf der hellen Tabelle also weiss auf weiss und
   praktisch unsichtbar. Jetzt volltonige Flaechen mit weissem Icon, damit sie in
   allen vier Layout-/Modus-Kombinationen klar zu erkennen sind. Alle drei bewusst
   exakt gleich gross. */
.link-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.link-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    color: #ffffff;
    cursor: pointer;
}

.link-action-btn.is-copy {
    background: var(--accent);
}

.link-action-btn.is-copy:hover {
    background: var(--accent-hover);
}

/* Widerrufen ist keine Loeschung - deshalb neutral in Marken-Navy statt in Rot. */
.link-action-btn.is-revoke {
    background: var(--chrome-bg);
}

.link-action-btn.is-revoke:hover {
    background: #0a4160;
}

/* CI-Fehlerfarbe, weil hier wirklich Daten verschwinden. */
.link-action-btn.is-delete {
    background: #AF1919;
}

.link-action-btn.is-delete:hover {
    background: #8d1414;
}

/* Im Dark Mode liegen die Zeilen auf --card-bg (#0F2A38). Marken-Navy waere darauf
   praktisch unsichtbar (Kontrast 1.09) und das dunkle CI-Rot zu schwach (2.11) -
   deshalb hier hellere Toene: die offizielle CI-Blauabstufung #698391 und ein
   aufgehelltes Rot. Der orange Kopier-Button funktioniert in beiden Modi. */
[data-mode="dark"] .link-action-btn.is-revoke {
    background: #698391;
}

[data-mode="dark"] .link-action-btn.is-revoke:hover {
    background: #7d97a5;
}

[data-mode="dark"] .link-action-btn.is-delete {
    background: #D64545;
}

[data-mode="dark"] .link-action-btn.is-delete:hover {
    background: #e05a5a;
}

/* Kurze Rueckmeldung nach dem Kopieren (copy-link.js) - als Farbwechsel, damit das
   Icon im Button erhalten bleibt. */
.link-action-btn.is-copied {
    background: #2e7d32;
}

/* ---------- Sicherer Link (Einmal-Geheimnisse) ----------
   Aufbau nach dem Vorbild onetimesecret.com (zentrierte Hero-Zeile, eine Karte mit
   grossem Eingabefeld, Passphrase und Ablaufzeit nebeneinander, Hinweisbox, Fusszeile
   mit Aktionsbutton). Farben kommen bewusst aus den Theme-Tokens statt fest dunkel wie
   im Original - die Seite muss in allen vier Layout-/Modus-Kombinationen funktionieren. */

/* "Sicherer Link" (Fachlogik nach dem Vorbild onetimesecret.com) nutzt bewusst die
   normalen Bausteine der App: Kachelreihe (.settings-columns.columns-equal +
   .settings-card) und .settings-row fuer die Einstellungen - also derselbe Aufbau
   wie z.B. Termin-Typ anlegen. Eigene Regeln gibt es nur noch fuer die Dinge, die
   die Originalseite ausmachen: Monospace-Eingabe, Auge-Schalter an der Passphrase,
   Hinweisbanner und die Link-Ausgabe. */
.secret-input {
    display: block;
    width: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--page-bg);
    /* Monospace wie im Original: Passwoerter mit Sonderzeichen bleiben eindeutig lesbar. */
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.95rem;
    color: var(--text);
    resize: vertical;
}

.secret-input:focus {
    outline: none;
    border-color: var(--accent);
}

/* Eingabefeld mit Auge-Button darin (Sichtbarkeit der Passphrase umschalten). */
.secret-passphrase {
    position: relative;
}

.secret-passphrase input {
    width: 100%;
    padding: 0.6rem 2.4rem 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--page-bg);
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text);
}

.secret-eye {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.secret-eye:hover,
.secret-eye.is-visible {
    color: var(--accent);
}

.secret-lifetime {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--page-bg);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}

/* Passphrase-Feld und Ablaufzeit-Auswahl exakt gleich breit - sie stehen in den
   beiden .settings-row-Zeilen untereinander und sollen eine Kante bilden. Die
   Breite steht hier gemeinsam, damit sie nicht auseinanderlaufen kann. */
.secret-passphrase,
.secret-lifetime {
    width: 200px;
}

.secret-info {
    /* 1rem Luft zum Eingabefeld darueber. */
    margin-top: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    /* Dezent eingefaerbter Hinweis in Marken-Blau, in beiden Modi lesbar. */
    background: rgba(26, 95, 180, 0.10);
    border: 1px solid rgba(26, 95, 180, 0.25);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.secret-info svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: #1a5fb4;
}

[data-mode="dark"] .secret-info svg {
    color: #6ea8f0;
}

.secret-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

/* Der Absende-Knopf ist der normale Aktionsknopf der App (.report-export-btn),
   hier nur ohne dessen margin-left:auto (das schiebt ihn in Werkzeugleisten nach
   rechts) und mit Abstand zum Schloss-Symbol. Doppelte Klasse, damit das
   unabhaengig von der Reihenfolge im Stylesheet gewinnt. */
.report-export-btn.secret-submit {
    margin-left: 0;
    gap: 0.5rem;
    cursor: pointer;
    border: none;
    font-family: inherit;
}

.secret-shortcut {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.secret-list-title {
    margin: 2rem 0 0.75rem;
    font-size: 1.05rem;
    color: var(--text);
}

/* Leerzustand mit Symbol, wie im Original ("Keine aktuellen Nachrichten"). */
.secret-empty {
    padding: 2.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card-bg);
    text-align: center;
    color: var(--text-muted);
}

.secret-empty p {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
}

@media (max-width: 640px) {
    .secret-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Link-Ausgabe nach dem Erzeugen: breites Feld + Kopier-Button daneben. */
.secret-link-box,
.secret-reveal-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.secret-link-box input {
    flex: 1;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--page-bg);
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text);
}

/* Das abgerufene Geheimnis: Monospace und Umbruch, damit auch lange Passwoerter mit
   Sonderzeichen exakt lesbar bleiben. */
.secret-reveal-box pre {
    flex: 1;
    margin: 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--page-bg);
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.95rem;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-all;
}

.secret-reveal-title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    color: var(--text);
}

.secret-error {
    margin: 0.75rem 0 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--error-text);
}

/* Layout 2: alles liegt auf der Seiten-Hintergrundfarbe, Kopfzeile/Icon-Leiste/Sidebar
   sind eigenständige, abgerundete "Kacheln" mit Abstand dazwischen statt randlos
   aneinandergrenzender Flächen (wie in Patricks Referenzbild). */
[data-layout="2"] .app-topbar {
    margin: 12px 12px 0 12px;
    border-radius: 16px;
}

[data-layout="2"] .app-body {
    padding: 12px;
    gap: 12px;
    min-height: calc(100vh / var(--zoom, 1) - 64px);
}

[data-layout="2"] .icon-rail,
[data-layout="2"] .app-sidebar {
    border-radius: 16px;
    border-right: none;
}

/* Inhalt soll oben auf gleicher Höhe wie die Icon-Leiste/Sidebar-Kacheln beginnen,
   nicht durch das zusätzliche große Padding von .app-content tiefer hängen. */
[data-layout="2"] .app-content {
    padding-top: 12px;
}

/* Erneutes Klicken auf das aktive Rail-Icon blendet das Panel aus/ein (siehe sidebar.js). */
[data-layout="2"] .app-body.panel-collapsed .sidebar-context {
    display: none;
}

/* Sidebar + Content */

.app-body {
    display: flex;
    align-items: stretch;
    /* / var(--zoom) rechnet den Grundzoom heraus, sonst endet die Sidebar-Spalte
       10% vor dem unteren Fensterrand. Ohne Zoom (Login) ist --zoom nicht gesetzt,
       der Fallback 1 laesst die Rechnung unveraendert. */
    min-height: calc(100vh / var(--zoom, 1) - 52px);
}

/* Layout 2: schmale Icon-Leiste als Abschnitts-Wechsler - nur dort sichtbar. */
.icon-rail {
    display: none;
    width: 64px;
    flex-shrink: 0;
    background: var(--rail-bg);
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0;
    /* Etwas mehr Luft als früher (0.25rem): seit die Rail-Knöpfe eine sichtbare
       Kachel mit Schatten sind, würden sie sonst optisch aneinanderkleben. */
    gap: 0.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

[data-layout="2"] .icon-rail {
    display: flex;
}

.rail-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    color: #ffffff;
    text-decoration: none;
    /* Dieselbe Kachel-Optik wie die Sidebar-Symbole (.app-sidebar .sidebar-icon),
       hier aber auf der Schaltfläche selbst statt um das Symbol herum - der
       Rail-Knopf IST die Kachel, sonst läge eine Kachel in einer Kachel. */
    background: linear-gradient(160deg, #2a5578 0%, #123049 55%, #071523 100%);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Aufgehellte Variante desselben Verlaufs - ein flächiges Weiß würde die Kachel
   beim Überfahren "verschwinden" lassen. */
.rail-item:hover {
    background: linear-gradient(160deg, #38668a 0%, #1a405c 55%, #0d2537 100%);
}

.rail-item.active {
    background: var(--accent);
    color: #ffffff;
}

.app-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--chrome-bg);
    color: var(--chrome-text);
    border-right: 1px solid var(--border);
    padding: 1rem 0.75rem;
}

/* Layout 1 zeigt die volle Akkordeon-Liste, Layout 2 nur das kontextuelle Panel
   des gerade aktiven Abschnitts (neben der Icon-Leiste) - nie beides gleichzeitig. */
.sidebar-context {
    display: none;
}

[data-layout="2"] .sidebar-full {
    display: none;
}

[data-layout="2"] .sidebar-context {
    display: block;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    color: var(--chrome-text);
    text-decoration: none;
    margin-bottom: 0.15rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

.sidebar-item:hover {
    background: var(--chrome-hover);
}

.sidebar-item.active {
    background: var(--accent);
    color: #ffffff;
}

.sidebar-main {
    font-size: 1rem;
    font-weight: 700;
}

.sidebar-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

/* Sidebar-Symbole sitzen auf einer eigenen kleinen Kachel ("Button-Optik") -
   derselbe Verlauf und Lichtsaum wie das Logo-Badge auf der Login-Seite
   (.login-badge), nur als abgerundetes Quadrat statt als Kreis, passend zur
   Kachel-Optik von Kopfzeile/Sidebar. Bewusst nur hier per CSS gelöst, damit
   dafür kein einziger Menüeintrag im Template angefasst werden muss.
   Die Icon-Leiste in Layout 2 (.rail-item) ist ausgenommen - die ist selbst
   schon eine 42px-Schaltfläche, eine Kachel darin wäre doppelt.
   Der Verlauf ist in Hell UND Dunkel gleich, weil --chrome-bg das auch ist. */
.app-sidebar .sidebar-icon {
    box-sizing: content-box;
    padding: 6px;
    border-radius: 9px;
    background: linear-gradient(160deg, #2a5578 0%, #123049 55%, #071523 100%);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.app-sidebar .sidebar-sub .sidebar-icon {
    padding: 5.5px;
    border-radius: 8px;
}

/* Auf dem orangen aktiven Balken darf der Schatten etwas weicher sein. */
.app-sidebar .sidebar-item.active .sidebar-icon {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Die Kachel bringt ihre eigene Höhe mit - deshalb hier weniger Innenabstand,
   sonst würde die Sidebar mit allen Menüs aufgeklappt deutlich höher und müsste
   auf kleineren Bildschirmen scrollen. */
.app-sidebar .sidebar-item {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-caret {
    transition: transform 0.2s ease;
    margin-left: auto;
}

.sidebar-group.open .sidebar-caret {
    transform: rotate(180deg);
}

.sidebar-submenu {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.2s ease;
}

.sidebar-submenu > div {
    overflow: hidden;
}

.sidebar-group.open .sidebar-submenu {
    grid-template-rows: 1fr;
}

.sidebar-sub {
    font-size: 0.85rem;
    font-weight: 500;
    /* Geringere Einrückung als früher (2.4rem), weil jetzt noch ein eigenes Icon
       davor steht - die Beschriftung landet dadurch trotzdem etwas weiter rechts
       als die der Hauptpunkte, die Hierarchie bleibt also sichtbar. */
    padding-left: 1.6rem;
}

/* Untermenü-Icons etwas kleiner als die der Hauptpunkte (18px). */
.sidebar-sub .sidebar-icon {
    width: 15px;
    height: 15px;
}

/* KEINE eigene min-height an der Fensterhoehe: .app-content ist ein Flex-Kind von
   .app-body (align-items: stretch) und wird dadurch automatisch so hoch wie dieses.
   Eine zweite, unabhaengige Fensterhoehen-Rechnung hier war die Ursache dafuer, dass
   in Layout 2 die Seite rund 35px hoeher als das Fenster war und unnoetig scrollte:
   dort liegt .app-content in einem .app-body mit 12px Polsterung, 12 + (100vh - 52) +
   12 ergibt mehr als die Fensterhoehe. Die Login-Seite ist der einzige Fall ohne
   .app-body-Wrapper - sie bringt ihre Hoehe ueber .login-stage selbst mit. */
.app-content {
    flex: 1;
    padding: 1.75rem 2rem;
    min-width: 0;
    position: relative;
}

.flash-message {
    padding: 0.7rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.flash-success {
    background: #4FA74F;
    color: #ffffff;
}

.flash-error {
    background: #AF1919;
    color: #ffffff;
}

/* Login: grosse Wortmarke direkt auf der navy Buehne, kein Karten-"Chip" mehr
   um Button/Notfall-Zugang (auf Wunsch entfernt) - nur EIN weicher Akzent-Fleck
   statt mehrerer Leuchtflecken. .login-stage nimmt die volle Breite/Hoehe von
   .app-content ein - negative Margin gleicht dessen Padding aus (Full-Bleed),
   da die Login-Seite (anders als eingeloggte Seiten) ohne .app-body-Wrapper
   direkt in .app-content liegt. Das pulsierende Logo-Badge sitzt jetzt direkt
   ueber der Ueberschrift statt in einer kleinen "advarics"-Zeile. */
.login-stage {
    position: relative;
    min-height: calc(100vh - 52px);
    margin: -1.75rem -2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    overflow: hidden;
    background: radial-gradient(circle at 20% 10%, #10395a 0%, #053147 40%, #041f2d 100%);
}

/* Dezentes Punktraster als Textur - keine externe Grafik noetig. */
.login-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
    pointer-events: none;
}

.login-accent {
    position: absolute;
    width: 640px;
    height: 640px;
    right: -220px;
    top: -260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(236, 109, 40, 0.30) 0%, transparent 70%);
    filter: blur(6px);
    pointer-events: none;
}

.login-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    text-align: center;
}

/* Doppelte Groesse gegenueber der ersten Fassung (88px) - auf Patricks Wunsch, das
   Logo ist auf dem Startbildschirm das zentrale Element. Die Innenmasse (.login-mark/
   .login-sq weiter unten) sind mitverdoppelt, damit die Proportion stimmt. */
.login-badge {
    width: 176px;
    height: 176px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    background: linear-gradient(160deg, #2a5578 0%, #123049 55%, #071523 100%);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: login-badge-breathe 4s ease-in-out infinite;
}

@keyframes login-badge-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    .login-badge { animation: none; }
}

.login-mark {
    display: grid;
    grid-template-columns: 18px 18px;
    grid-template-rows: 18px 18px;
    gap: 3px;
}

/* Nur im grossen Startbildschirm-Badge doppelt so gross - die oeffentlichen
   Buchungsseiten nutzen dieselben .login-mark/.login-sq in .booking-badge und
   sollen unveraendert klein bleiben (siehe booking-public.css). */
.login-badge .login-mark {
    grid-template-columns: 36px 36px;
    grid-template-rows: 36px 36px;
    gap: 6px;
}

.login-badge .login-sq {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.login-sq {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: #6A8EAE;
}

.login-sq.orange {
    background: #EC6D28;
    transform: rotate(12deg) scale(1.08);
}

.login-content h1 {
    color: #ffffff;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.02;
    margin: 0 0 0.75rem;
    text-wrap: balance;
}

.login-content h1 .accent {
    color: var(--accent);
}

.login-tagline {
    color: #BCCCDB;
    margin: 0 0 2.25rem;
    font-size: 1rem;
}

.login-content form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}

.login-content input {
    padding: 0.5rem;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.login-content label {
    color: #DDE5EC;
    font-size: 0.85rem;
    font-weight: 600;
}

.login-content form button {
    margin-top: 1rem;
    padding: 0.85rem;
    font-size: 1.05rem;
    cursor: pointer;
    background: var(--accent);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
}

.login-content form button:hover {
    background: var(--accent-hover);
}

.error {
    color: #F38F8F;
}

.login-azure-btn {
    display: block;
    margin-top: 1rem;
    padding: 0.85rem;
    font-size: 1.05rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background: var(--accent);
    color: #ffffff;
    border-radius: 6px;
}

.login-azure-btn:hover {
    background: var(--accent-hover);
}

@media (max-width: 560px) {
    .login-content h1 {
        font-size: 2.2rem;
    }
}

/* Notfall-Zugang (lokaler Login): bewusst unauffaellig, nur ein kleines Icon - das
   Formular selbst zeigt sich erst nach Klick (natives <details>, kein JS noetig,
   gleiches Muster wie die Zellen-Editoren im Tages-/Monatsraster). */
.login-emergency {
    margin-top: 1.5rem;
    text-align: center;
}

.login-emergency-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: #BCCCDB;
    cursor: pointer;
    list-style: none;
}

.login-emergency-icon::-webkit-details-marker {
    display: none;
}

.login-emergency-icon::marker {
    content: "";
}

.login-emergency-icon:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.login-emergency form {
    margin-top: 0.75rem;
    text-align: left;
}

/* .login-box form { display:flex; ... } (oben) gilt fuer JEDES Formular in der
   Login-Box, auch dieses hier - dadurch bleibt es trotz geschlossenem <details>
   sichtbar (die generische Regel ueberschreibt das native Ausblenden). Diese Regel
   ist spezifischer und gewinnt, kein !important noetig. */
.login-emergency:not([open]) form {
    display: none;
}

/* Tagesansicht: Toolbar */

.day-toolbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.day-tabs {
    display: flex;
    gap: 0.4rem;
}

.day-tabs a {
    padding: 0.45rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    background: var(--card-bg);
}

.day-tabs a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.day-date-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.day-date-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    text-decoration: none;
}

.day-date-nav a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.day-date-nav input[type="date"] {
    appearance: none;
    -webkit-appearance: none;
    background: var(--accent);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 0.45rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 700;
    min-width: 200px;
    text-align: center;
    cursor: pointer;
}

.day-date-nav input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

.day-sync-btn {
    padding: 0.45rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}

.day-sync-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Tagesansicht: Grid - Zellen als Chips (kein Tabellenraster), wie ui/day_view.py:
   CTkScrollableFrame mit fg_color=card_bg, Buttons mit corner_radius=4,
   padx=(14,2) vor Kernzeit-/Spätschicht-Beginn statt padx=(2,2) sonst. */

.day-grid-scroll {
    overflow-x: auto;
    width: fit-content;
    max-width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem;
}

.day-grid {
    border-collapse: separate;
    border-spacing: 2px 2px;
}

.day-grid th,
.day-grid td {
    padding: 6px 8px;
    text-align: center;
    white-space: nowrap;
    border-radius: 4px;
}

.day-grid .col-slot,
.day-grid .col-slot-label {
    min-width: 66px;
}

.day-grid .col-pool {
    min-width: 80px;
}

/* Echte Lücke statt Innenabstand vor Kernzeit-Beginn (09:00) und vor der Spätschicht
   (17:30) - eigene, schmale Spalte ohne Füllung, damit alle Zeitslot-Zellen gleich
   groß bleiben (siehe app/day/grid.py GUTTER_SLOTS). Trennt so optisch Sonderdienste
   (08:00/08:30), Kernzeit und Spätschicht (17:30/18:00). */
.day-grid .col-spacer {
    padding: 0;
    min-width: 12px;
    width: 12px;
}

.day-grid thead th {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--text);
}

.day-grid .col-name,
.day-grid .col-pool {
    font-weight: 700;
}

.day-grid .col-name {
    text-align: left;
    min-width: 140px;
}

.day-grid .col-late-header {
    background: var(--border);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text);
}

/* Name des gerade eingeloggten Mitarbeiters hervorheben - schnelleres Wiederfinden
   der eigenen Zeile im breiten Raster. Bewusst nur die Namenszelle (nicht die ganze
   Zeile) - eine Umrandung ueber alle Statuscode-Chips hinweg sah wegen deren
   abgerundeten Ecken unsauber aus. */
.day-grid tr.own-row .col-name {
    box-shadow: inset 0 0 0 2px var(--accent);
    border-radius: 4px;
}

.day-grid td {
    font-weight: 700;
    font-size: 0.85rem;
    height: 42px;
}

/* Statuscodes, themenunabhängig (wie Ampelfarben in der Desktop-App, STATUS_COLORS/
   POOLDIENST_COLOR/INACTIVE_CELL_COLOR aus ui/theme.py) - bewusst NICHT über
   --accent/--chrome-bg gesteuert, bleiben in allen 4 Layout×Modus-Kombinationen gleich. */
.status-x { background: #3fa34d; color: #ffffff; }
.status-T { background: #3b82f6; color: #ffffff; }
.status-F { background: #c9ced6; color: #1a1a1a; }
.status-U { background: #f0b429; color: #1a1a1a; }
.status-K { background: #e05252; color: #ffffff; }
.status-S { background: #8b5cf6; color: #ffffff; }
.status-pool { background: #053147; color: #ffffff; }
/* Leere Zeitslot-Zelle: flächig hellgrau, wie INACTIVE_CELL_COLOR (kein Rahmen).
   Eigene feste Textfarbe wie bei allen anderen Statuscodes hier - fehlte bisher
   (unbemerkt, da geerbtes Schwarz im Hellen zufällig passte; im Dunkeln wäre der
   geerbte fast-weiße --text auf diesem hellgrauen Hintergrund unlesbar gewesen). */
.status-inactive { background: #e9ebee; color: #1a1a1a; }
/* Leere Pooldienst-Zelle: nur Rahmen, keine Füllung (anders als Zeitslots, siehe
   day_view.py _render_flag_cell: fg_color=transparent, border_width=1). */
.status-pool-empty { background: transparent; border: 1px solid var(--border); }
/* Geburtstag (Monatsansicht) - eigene Farbe, damit es nicht mit einem Statuscode
   verwechselt wird (BIRTHDAY_COLOR aus ui/theme.py). */
.status-birthday { background: #f472b6; color: #ffffff; }
/* Spätschicht-Namens-Chip in der Monats-Zusammenfassungszeile (SPAETSCHICHT_COLOR). */
.status-spaet { background: var(--accent); color: #ffffff; }

/* Monatsansicht: Spaltenfarben je Wochentag/Feiertag - themenunabhängig wie die
   Statuscodes, damit die Ansicht in jedem Layout/Modus gleich lesbar bleibt.
   Werktage bewusst im selben Navy wie die Kopfzeile/Sidebar ("Menüband"),
   Feiertage in Hellblau (auf Patricks Wunsch, umgekehrt zur alten Desktop-App). */
.month-weekday { background: #053147; color: #ffffff; }
.month-saturday { background: #ffe699; color: #1a1a1a; }
.month-sunday { background: #000000; color: #ffffff; }
.month-holiday { background: #bdd7ee; color: #1a1a1a; }

/* CSS-Grid statt <table> - table-layout:fixed lieferte trotz expliziter Breiten
   (auf th/td UND per <colgroup>) sichtbar ungleiche Spalten, sobald der Inhalt
   je Zeile unterschiedlich lang war (Tagesnummern, Wochentagskürzel, Statuscodes,
   Namen in der Spätschicht-Zeile). Grid-Tracks sind exakt und inhaltsunabhängig -
   jede Zelle ist garantiert gleich groß, orientiert an der breitesten Zelle
   ("Patrick" in der Spätschicht-Zeile). Spaltenzahl kommt inline aus grid.headers
   (variiert je nach Anzahl Tage im Monat). */
/* Trägt die frühere .day-grid-scroll-Optik (Karte mit Rahmen/Hintergrund) - jetzt hier
   statt dort, weil die Mitarbeiter-Spalte (siehe .month-name-column) NICHT mehr Teil des
   scrollenden Bereichs ist, sondern optisch links daneben "in derselben Karte" sitzt. */
.month-grid-wrapper {
    display: flex;
    align-items: flex-start;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem;
    width: fit-content;
    max-width: 100%;
}

/* Eigene, nicht scrollende Spalte statt eines Sticky-Grid-Elements (siehe Kommentar in
   month.html) - dieselbe Zeilenhöhe/Abstand wie .month-grid, dadurch reihenweise
   deckungsgleich mit dem Tagesraster daneben. */
.month-name-column {
    display: grid;
    grid-auto-rows: 32px;
    gap: 2px;
    flex-shrink: 0;
    width: 140px;
    padding-right: 2px;
}

.month-day-scroll {
    overflow-x: auto;
    min-width: 0;
}

.month-grid {
    display: grid;
    grid-auto-rows: 32px;
    gap: 2px;
}

.month-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.8rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Editierbare Monats-Zelle: der eigentliche Grid-Baustein bleibt .month-cell (für
   die Grid-Spaltenbreite), <details>/<summary> darin füllen die Fläche komplett aus -
   vermeidet display:contents auf <details> (in manchen Browsern unzuverlässig mit
   dem nativen Auf-/Zuklapp-Verhalten). */
.month-cell-wrap {
    padding: 0;
}

.month-cell-wrap .cell-editor,
.month-cell-wrap summary {
    width: 100%;
    height: 100%;
}

.month-cell-wrap summary {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    list-style: none;
}

.month-cell-wrap summary::-webkit-details-marker {
    display: none;
}

.month-cell-wrap summary::marker {
    content: "";
}

.month-name-cell {
    justify-content: flex-start;
    padding-left: 6px;
    font-weight: 700;
    color: var(--text);
}

/* Name des gerade eingeloggten Mitarbeiters hervorheben - gleiches Prinzip wie
   .day-grid tr.own-row .col-name (nur die Namenszelle, kein Rahmen ueber die
   Statuscode-Chips hinweg). */
.month-name-cell.own-row {
    box-shadow: inset 0 0 0 2px var(--accent);
    border-radius: 4px;
}

.month-header-cell {
    color: var(--text);
}

.month-day-header {
    flex-direction: column;
    line-height: 1.2;
}

.month-day-header.month-today {
    box-shadow: inset 0 0 0 2px var(--accent);
}

.month-day-num,
.month-day-label {
    display: block;
    font-size: 0.75rem;
}

.month-summary-row-cell {
    font-size: 0.7rem;
}

.month-day-cell {
    font-weight: 700;
    font-size: 0.8rem;
}

/* Einstellungsseite: Layout als Karte mit echter Live-Vorschau der Tagesansicht
   (skaliertes iframe auf /tag mit preview_layout/preview_mode-Override, siehe
   inject_theme() in app/__init__.py) statt einer abstrakten Farbkachel. */

/* Darstellung + Spät-Verfügbarkeit nebeneinander (genug Breite vorhanden, seit
   Classic Design aus der Auswahl raus ist) - bricht auf schmalen Bildschirmen
   automatisch untereinander um. */
.settings-columns {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* flex-shrink:0 - die Vorschau-Iframes sind fest skaliert (siehe
   .theme-preview-frame), nicht responsiv. Wuerde .theme-grid schrumpfen,
   waere die Box schmaler als vorgesehen. Bei zu wenig Platz soll die zweite
   Spalte lieber komplett umbrechen (dank flex-wrap: wrap oben) statt beide
   Spalten zu quetschen. */
.settings-columns > div {
    flex-shrink: 0;
}

/* Alle Kacheln einer Reihe gleich hoch, gemessen an der hoechsten - genutzt bei
   Termin-Typ anlegen/bearbeiten, wo Grunddaten, Kundeninformationen und
   Planungsrichtlinie nebeneinander liegen und sehr unterschiedlich lang sind.
   Ohne diesen Zusatz behaelt jede Kachel ihre eigene Hoehe (align-items:
   flex-start oben), was dort unruhig aussieht. Bewusst eine eigene Klasse und
   keine Aenderung an .settings-columns selbst - die Einstellungsseite nutzt
   dieselbe Spaltenaufteilung, soll aber weiterhin inhaltshohe Karten haben. */
.settings-columns.columns-equal {
    align-items: stretch;
}

/* Zeilen-Layout fuer Planungsrichtlinie/Kundeninformationen (Vorbild: MS-Bookings-
   Dienst-Dialog) - Label+Beschreibung links, Eingabeelement/Aktion rechts, statt
   Label oben/Feld darunter wie in normalen Formularen. */
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--border);
}

.settings-row:last-child {
    border-bottom: none;
}

.settings-row-label {
    font-weight: 600;
}

.settings-row-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.settings-row-control {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    min-width: 160px;
}

/* Kundeninformationen-Zeilen ohne Trennlinie (Referenzbild zeigt nur Abstand,
   keine Linien zwischen den Zeilen - anders als Planungsrichtlinie). */
.settings-row-plain {
    border-bottom: none;
    padding: 0.75rem 0;
}

/* Dezentes Info-Symbol (z.B. Feldtyp/Ticket-Link-Hinweis bei Kundeninformationen) -
   Tooltip statt farbiger Badge, um die Zeile so aufgeraeumt wie im Referenzbild zu
   halten (dort traegt nur "Gast-E-Mail(s)" ein solches Symbol). */
.info-icon {
    display: inline-flex;
    color: var(--text-muted);
    cursor: help;
}

/* Dezenter Text-Link statt Button fuers Hinzufuegen (Referenzbild: "+ Benutzer-
   definiertes Feld hinzufuegen" ist ein schlichter blauer Link mit Plus-Icon,
   keine ausgefuellte Schaltflaeche). */
.add-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--accent);
    background: none;
    border: none;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.add-link:hover {
    color: var(--accent-hover);
}

.add-link svg {
    flex-shrink: 0;
}

/* Rundes Auswahl-Symbol wie im MS-Bookings-Referenzbild (Kundeninformationen) -
   gefuellter Kreis mit Haekchen wenn ausgewaehlt, leerer Kreisrand wenn nicht -
   statt einer nackten Checkbox oder Chip-Pille. */
.check-badge-wrap {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    flex-shrink: 0;
}

.check-badge-wrap input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.check-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border);
}

.check-badge svg {
    width: 13px;
    height: 13px;
    opacity: 0;
    stroke: #ffffff;
}

.check-badge-wrap input:checked + .check-badge {
    background: var(--accent);
    border-color: var(--accent);
}

.check-badge-wrap input:checked + .check-badge svg {
    opacity: 1;
}

.check-badge-wrap input:focus-visible + .check-badge {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.theme-grid {
    display: grid;
    /* Bewusst feste 2 Spalten (nicht auto-fit) - Classic Light/Dark bilden
       Reihe 1, App Light/Dark Reihe 2, statt bei 3 Spalten unschön umzubrechen. */
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 1rem;
    max-width: 720px;
}

.theme-card {
    margin: 0;
}

.theme-card-button {
    width: 100%;
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem;
    cursor: pointer;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
}

.theme-card-button.active {
    border-color: var(--accent);
    color: var(--accent);
}

.theme-preview {
    width: 100%;
    height: 160px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
    margin-bottom: 0.6rem;
    background: var(--page-bg);
}

.theme-preview-frame {
    width: 1280px;
    height: 850px;
    border: none;
    /* Skaliert auf die tatsaechliche Kartenbreite (~324px bei max-width:720px/
       2 Spalten), nicht auf die Boxhoehe - vorher war der Faktor (0.188) auf
       160px Boxhoehe abgestimmt, liess bei 1280x850 aber nur ~240px Breite
       uebrig und dadurch rechts eine leere Luecke (wirkte "abgeschnitten").
       Jetzt fuellt das Bild die Breite komplett aus, overflow:hidden auf
       .theme-preview schneidet dafuer unten etwas vom Vorschaubild ab. */
    transform: scale(0.253);
    transform-origin: top left;
    pointer-events: none;
}

.theme-card-label {
    display: block;
    padding-top: 0.25rem;
}

/* Einstellungen: Spät-Verfügbarkeit (Selbst-Eintragung VZ-Mitarbeiter) */
.settings-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem;
    max-width: 320px;
}

.settings-checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text);
    padding: 0.4rem 0;
}

.settings-card .report-export-btn {
    margin-top: 0.75rem;
    margin-left: 0;
}

/* Auswertung */

.report-toolbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.report-toolbar-label {
    font-weight: 600;
    color: var(--text);
}

/* Alle Formularelemente in Admin-Toolbars/Inline-Formularen einheitlich groß -
   explizite height statt nur padding, da input[type=date]/select sonst je nach
   Browser 1-2px höher/niedriger rendern als input[type=text] (native Rendering-
   Eigenart, kein CSS-Bug). */
.report-toolbar input[type="date"],
.report-toolbar input[type="text"],
.report-toolbar input[type="number"],
.report-toolbar input[type="password"],
.report-toolbar select,
.admin-inline-form input[type="date"],
.admin-inline-form input[type="text"],
.admin-inline-form input[type="number"],
.admin-inline-form input[type="password"],
.admin-inline-form select,
.form-fields input[type="date"],
.form-fields input[type="text"],
.form-fields input[type="number"],
.form-fields input[type="password"],
.form-fields select,
.rotation-date-label input[type="date"] {
    height: 38px;
    padding: 0 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text);
}

/* Wie .admin-inline-form, aber NUR die Eingabefeld-Optik (kein Flex-Container,
   keine label-Umstellung auf display:flex) - fuer Formulare, die zusaetzlich
   .chip-toggle/.switch-row enthalten, deren eigene label-Flex-Regeln sonst durch
   ".admin-inline-form label" ueberschrieben wuerden. */

/* Datumsfeld in der Rotation-Karte liegt selbst schon auf --card-bg - contrast
   über --page-bg statt --card-bg, wie zuvor. */
.rotation-date-label input[type="date"] {
    background: var(--page-bg);
}

.report-export-btn {
    margin-left: auto;
    height: 38px;
    background: var(--accent);
    color: #ffffff;
    text-decoration: none;
    padding: 0 1rem;
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
}

.report-export-btn:hover {
    background: var(--accent-hover);
}

.admin-inline-form {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.admin-delete-btn {
    /* inline-flex + gap: die Loeschen-Knoepfe tragen jetzt ein Muelleimer-Symbol,
       bei den Sammelaktionen zusaetzlich zur Beschriftung (siehe _icons.html). */
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    /* Eigene helle Flaeche statt transparent, damit die Kachel-Plastik am Ende der
       Datei etwas zum Anheben hat - Rahmen und Schrift bleiben in der Fehlerfarbe. */
    background-color: var(--page-bg);
    color: var(--error-text);
    border: 1px solid var(--error-text);
}

/* Nur-Symbol-Variante fuer die Loeschen-Knoepfe direkt in einer Tabellenzeile
   (Feiertage, Felder eines Termin-Typs) - quadratischer Zuschnitt statt der
   breiten Textform. Ruhezustand bewusst neutral statt rot (wie
   .rotation-remove-btn - "im Ruhezustand soll das Symbol in einer langen
   Liste nicht staendig Alarm schlagen"), erst beim Ueberfahren rot. Vorher
   war diese Variante durchgehend rot und sah dadurch anders aus als das
   optisch identische Loeschen-Symbol in der Rotation. */
.admin-delete-btn.is-icon {
    padding: 0.3rem 0.4rem;
    background-color: var(--page-bg);
    color: var(--text-muted);
    border-color: var(--border);
}

.admin-delete-btn.is-icon:hover {
    color: var(--error-text);
    border-color: var(--error-text);
}

/* Bearbeiten-Knopf - selbe Form wie .admin-delete-btn.is-icon, aber in der
   Akzentfarbe statt Rot (kein destruktiver Vorgang). Ersetzt den frueheren
   reinen Textlink "Bearbeiten" in den Admin-Tabellen. */
.admin-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: 6px;
    padding: 0.3rem 0.4rem;
    cursor: pointer;
    background-color: var(--page-bg);
    color: var(--accent);
    border: 1px solid var(--accent);
    text-decoration: none;
}

.admin-edit-btn:hover {
    background: var(--accent);
    color: #ffffff;
}

/* Abstand zwischen Tabelle und "Ausgewählte löschen"-Button (Mitarbeiter/
   Benutzeranmeldung) - einheitlich wie der Abstand unter der Toolbar oben. */
.admin-log-table-wrap + .admin-delete-btn {
    margin-top: 0.75rem;
}

.admin-delete-btn:hover {
    background: #AF1919;
    color: #ffffff;
}

h2 {
    font-size: 1.1rem;
    margin: 1.5rem 0 0.75rem;
}

/* Admin: Terminkarte je Mitarbeiter, responsives Grid statt seitlichem Scroll-Container
   (webtypische Anpassung des Original-Layouts, siehe ui/report_view.py). */
.employee-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.employee-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem;
}

.employee-card-name {
    font-weight: 700;
    color: var(--text);
}

.employee-card-counts {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.employee-card-entries {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: 220px;
    overflow-y: auto;
}

.entries-empty {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
}

.entry-chip {
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.entry-chip-spaet { background: var(--accent); color: #ffffff; }
.entry-chip-samstag { background: #ffe699; color: #1a1a1a; }

/* Normaler Nutzer: zwei getrennte Listen statt einer Terminkarte. */
.my-entries-columns {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
}

.my-entries-column {
    min-width: 260px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

.my-entries-column h3 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

.entry-row {
    display: flex;
    justify-content: space-between;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.3rem;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Übersichtstabelle mit Zebra-Zeilen. */
.summary-table-wrap {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    max-width: 520px;
}

.summary-table {
    width: 100%;
    border-collapse: collapse;
}

.summary-table th,
.summary-table td {
    padding: 0.5rem 0.9rem;
    text-align: left;
}

.summary-table th {
    color: var(--accent);
    font-size: 0.85rem;
}

.summary-table tbody tr:nth-child(even) {
    background: var(--page-bg);
}

/* Mini-Kalender neben den eigenen Terminlisten (nur normale Nutzer, siehe
   ui/report_view.py: _build_my_calendar()) - eigenes, kompaktes CSS-Grid, gleiches
   Prinzip wie die Monatsansicht (app/month/grid.py), aber nur für einen Mitarbeiter. */
.mini-calendar-column {
    min-width: 220px;
}

.mini-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.mini-calendar-nav h3 {
    margin: 0;
    font-size: 1rem;
    white-space: nowrap;
}

.mini-calendar-nav a {
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
}

.mini-calendar-nav a:hover {
    color: var(--accent);
}

.mini-calendar {
    display: grid;
    grid-template-columns: repeat(7, 28px);
    gap: 2px;
}

.mini-calendar-weekday {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
}

.mini-calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* :where() haelt die Spezifitaet bewusst bei 0, damit .status-spaet/.entry-chip-samstag
   (einfache Klassen, gleiche Spezifitaet) zuverlaessig gewinnen, unabhaengig von der
   Reihenfolge in dieser Datei - gleiches Muster wie schon beim Zellen-Popup im
   Tagesraster (siehe Kommentar dort zu :where()). Ohne das ueberschrieb die spaeter
   deklarierte Fallback-Farbe hier die Spaet-/Samstag-Markierung im Mini-Kalender. */
:where(.mini-calendar-day) {
    background: var(--page-bg);
    color: var(--text);
}

.mini-calendar-empty {
    background: transparent;
}

.mini-calendar-today {
    box-shadow: inset 0 0 0 2px var(--accent);
}

/* Tagesansicht: Klick-Bearbeitung über natives <details> statt JavaScript - Klick auf
   die Zelle öffnet ein kleines Auswahlmenü mit einem Formular je Option, Auswahl sendet
   sofort ab (kein Speichern-Button), wie schon beim Zahnrad/den Theme-Karten. */

.day-grid td.col-slot-editable,
.day-grid td.col-pool-editable {
    padding: 0;
}

.cell-editor {
    position: relative;
}

.cell-editor summary,
.cell-chip-select {
    list-style: none;
    cursor: pointer;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.85rem;
}

.cell-editor summary::-webkit-details-marker {
    display: none;
}

.cell-editor summary::marker {
    content: "";
}

.cell-picker {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    margin-top: 4px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 150px;
    max-height: 300px;
    overflow-y: auto;
}

.cell-picker form {
    margin: 0;
}

.cell-picker button {
    width: 100%;
    border: none;
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    text-align: left;
}

/* :where(...) hat Spezifität 0, damit Statuscode-Klassen (z.B. .status-x) mit
   ihrer höheren Spezifität (Klasse allein > Klasse+Element) die Fallback-Farbe
   hier zuverlässig überschreiben - sonst gewinnt sonst diese Regel und die
   Codes im Popup sehen alle gleich (unfarbig) aus. */
:where(.cell-picker) button {
    color: var(--text);
    background: var(--page-bg);
}

/* Vorschlag laut Rotation - siehe ui/worker_picker.py: WorkerPickerPopup zeigt
   dort einen Hinweistext + hervorgehobenen Rahmen um den vorgeschlagenen Namen. */
.candidate-suggested-hint {
    margin: 0 0 0.3rem;
    padding: 0 0.2rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent);
}

.candidate-suggested {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.pool-toggle-btn {
    width: 100%;
    height: 42px;
    cursor: pointer;
    font-weight: 700;
    border-radius: 4px;
}

/* :where() haelt die Spezifitaet bei 0, damit .status-pool-empty (einfache Klasse,
   gleiche Spezifitaet, aber weiter oben in dieser Datei) den Rahmen zuverlaessig
   setzen kann - sonst gewann diese Regel (steht spaeter) und der Button war beim
   eigenen, pooldienstfreien Tag komplett unsichtbar (kein Rahmen, kein Hintergrund).
   Gleiches Muster wie schon beim Mini-Kalender/Monatsraster/Zellen-Popup. */
:where(.pool-toggle-btn) {
    border: none;
}

/* Mehrfachauswahl im Tagesraster - siehe ui/day_view.py: dort per Klick+Drag
   markieren + Rechtsklick-Popup für alle markierten Zellen. Web-Entsprechung:
   direktes Maus-Drag über die Zellen (app/static/js/day-select.js), Sammel-
   Popup unten übernimmt die Rolle des Rechtsklick-Popups. */
.cell-chip-select {
    cursor: cell;
    user-select: none;
}

.cell-marked {
    outline: 3px solid var(--accent);
    outline-offset: -3px;
}

.bulk-bar {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    align-items: center;
    gap: 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.5rem 0.5rem 0.5rem 1.1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.bulk-bar.visible {
    display: flex;
}

.bulk-bar #bulk-bar-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.bulk-bar form {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.bulk-bar-code-btn {
    border: none;
    border-radius: 8px;
    padding: 0.4rem 0.9rem;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
}

.bulk-bar-reset-btn {
    background: var(--page-bg);
    color: var(--text);
    border: 1px solid var(--border);
}

.bulk-bar-cancel-btn {
    border: none;
    border-radius: 8px;
    padding: 0.4rem 0.9rem;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    background: transparent;
    color: var(--text);
}

/* Dashboard-Karten */

.dashboard-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dashboard-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    flex: 0 1 340px;
    min-width: 260px;
}

.dashboard-card h2 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

.dashboard-card-tall {
    min-height: 280px;
}

.dashboard-card-wide {
    flex-basis: 696px;
}

.dashboard-subtitle {
    margin: 0.75rem 0 0.4rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.25rem 0;
    font-size: 0.9rem;
}

.value-chip {
    display: inline-block;
    min-width: 90px;
    border-radius: 6px;
    padding: 0.25rem 0.6rem;
    font-weight: 700;
    font-size: 0.8rem;
    white-space: nowrap;
    text-align: center;
}

.week-label {
    flex-shrink: 0;
    min-width: 80px;
}

.week-date {
    flex: 1;
    text-align: right;
    padding-right: 0.75rem;
    white-space: nowrap;
}

.week-date-today {
    font-weight: 700;
    color: var(--accent);
}

.dashboard-week-saturday {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Dashboard-Karte "Meine heutigen Termine": Uhrzeit links in fester Spaltenbreite,
   damit die Betreffzeilen untereinander eine Kante bilden. */
.meeting-row {
    justify-content: flex-start;
}

.meeting-time {
    flex-shrink: 0;
    min-width: 4.5rem;
    font-weight: 700;
    color: var(--accent);
}

.meeting-subject {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bereits vorbei - blasser, damit der Blick auf dem haengenbleibt, was noch kommt. */
.meeting-over {
    opacity: 0.55;
}

.holiday-name {
    font-weight: 700;
    margin: 0;
}

.holiday-date {
    color: var(--accent);
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
}

/* Admin: Rotation - Drag&Drop-Listen je Rotationstyp (app/static/js/rotation-sort.js) */

.rotation-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1.5rem 0;
}

.rotation-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    flex: 0 1 260px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
}

.rotation-card h2 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

/* flex:1 füllt die Karte bis zur Höhe der Nachbarkarten (alle Karten sind gleich
   hoch, siehe .rotation-row: align-items:stretch) - dadurch sitzen "Hinzufügen"/
   "Neustart ab"/"Rotation neu starten" bei allen Karten auf gleicher Höhe, egal
   wie viele Namen die Liste gerade hat. max-height/overflow bleiben für den
   Scroll-Fall (viele Namen) unverändert. */
.rotation-list {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    max-height: 300px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.rotation-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.3rem;
    background: var(--page-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: grab;
    font-size: 0.9rem;
}

.rotation-item:active {
    cursor: grabbing;
}

.rotation-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--page-bg);
    border: 1px solid var(--border);
    /* Dunkelmodus siehe weiter unten: --page-bg ist dort reines Schwarz und waere
       dunkler als die Karte - der Knopf saehe aus wie ein Loch statt wie eine
       erhabene Kachel. */
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem 0.35rem;
}

/* Erst beim Ueberfahren rot - im Ruhezustand soll das Symbol in einer langen
   Liste nicht staendig Alarm schlagen. */
.rotation-remove-btn:hover {
    color: var(--error-text);
    border-color: var(--error-text);
}

.rotation-add-row {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.rotation-add-row select {
    flex: 1;
    height: 38px;
    padding: 0 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text);
    min-width: 0;
}

/* Gleiche Optik wie .report-export-btn (Feiertage/Mitarbeiter/Benutzeranmeldung
   "Hinzufügen") - dieselbe Aktion verdient überall dasselbe Erscheinungsbild. */
.rotation-add-btn {
    height: 38px;
    background: var(--accent);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 0 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
}

.rotation-add-btn:hover {
    background: var(--accent-hover);
}

.rotation-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.rotation-date-label {
    font-size: 0.85rem;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.rotation-restart-btn {
    margin-left: 0;
    width: 100%;
    text-align: center;
}

.rotation-many-blocked td {
    color: var(--error-text);
    font-weight: 700;
}

/* Änderungslog + Error Log */

.admin-clear-date-btn {
    height: 38px;
    display: inline-flex;
    align-items: center;
    color: var(--text);
    text-decoration: none;
    font-size: 0.85rem;
    padding: 0 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.admin-clear-date-btn:hover {
    color: var(--accent);
}

.admin-log-table-wrap {
    max-width: none;
    overflow-x: auto;
}

.error-log-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.error-log-entry {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem 0.9rem;
}

.error-log-entry summary {
    display: flex;
    gap: 1rem;
    cursor: pointer;
    align-items: baseline;
}

.error-log-time {
    color: var(--text-muted);
    font-size: 0.85rem;
    white-space: nowrap;
}

.error-log-user {
    font-weight: 600;
    white-space: nowrap;
}

.error-log-desc {
    color: var(--error-text);
}

.error-log-traceback {
    margin-top: 0.6rem;
    padding: 0.6rem;
    background: var(--page-bg);
    border-radius: 6px;
    overflow-x: auto;
    font-size: 0.8rem;
    white-space: pre-wrap;
}

/* Änderungslog-Archiv */

.archive-month-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 420px;
}

.archive-month-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
}

.archive-month-link:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.archive-month-count {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-muted);
}

/* Mitarbeiter */

.checkbox-cell {
    width: 2rem;
    text-align: center;
}

.admin-inline-form label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--text);
    font-size: 0.9rem;
}

/* Termin-Dialog (Status "T") - natives <dialog>, oeffnet sich statt dem sonst
   ueblichen Sofort-Absenden aus der Sammelleiste (siehe grid-select.js). */
.termin-dialog {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem;
    background: var(--card-bg);
    color: var(--text);
    width: 360px;
    max-width: 90vw;
}

.termin-dialog::backdrop {
    background: rgba(0, 0, 0, 0.4);
}

.termin-dialog h2 {
    margin: 0 0 1rem;
    font-size: 1.1rem;
}

.termin-dialog form {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.termin-dialog input[type="text"],
.termin-dialog textarea {
    padding: 0.5rem;
    font-size: 1rem;
    font-family: inherit;
    background: var(--page-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    resize: vertical;
}

.termin-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.termin-dialog-actions button {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--page-bg);
    color: var(--text);
    cursor: pointer;
}

.termin-dialog-actions button[type="submit"] {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
    font-weight: 600;
}

/* Neustart-Dialog der Rotation: Sicherheitsabfrage + Wahl der Startperson
   (siehe app/static/js/rotation-sort.js). Etwas breiter als der Termin-Dialog, weil
   die komplette Reihenfolge zur Auswahl steht. */
.rotation-start-dialog {
    width: 420px;
}

.rotation-start-frage {
    margin: 1rem 0 0.5rem;
    font-weight: 600;
}

.rotation-start-choices {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    /* Bei langen Listen (die Spaetschicht hat 8+ Namen) scrollt nur die Auswahl,
       damit die Knoepfe unten immer sichtbar bleiben. */
    max-height: 40vh;
    overflow-y: auto;
}

.rotation-start-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
}

.rotation-start-option:hover {
    background: var(--page-bg);
}

.rotation-start-option:has(input:checked) {
    background: var(--accent);
    color: #ffffff;
    font-weight: 600;
}

/* Tabs (z.B. Termin-Typ bearbeiten) - siehe app/static/js/tabs.js */
.tabs-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.75rem;
    flex-wrap: wrap;
}

.tab-button {
    padding: 0.45rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.tab-button.active {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}

/* Chip-Toggle: anklickbare Pille um eine versteckte Checkbox/Radio - fuer
   Mehrfach-/Einfachauswahl (Mitarbeiter-Zuordnung, Zuweisungsmodus), ersetzt
   nackte Checkbox-/Radio-Reihen. Reiner CSS-Checkbox-Hack, kein JS noetig. */
.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chip-toggle {
    display: inline-flex;
    cursor: pointer;
}

.chip-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.chip-toggle span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.9rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--page-bg);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.chip-toggle input:checked + span {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

.chip-toggle input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Switch: echter An/Aus-Schalter statt einer nackten Checkbox (z.B. "Aktiv",
   "Pflichtfeld", "Ticket-Link") - ebenfalls reiner CSS-Checkbox-Hack. */
.switch-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--text);
    cursor: pointer;
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-track {
    position: absolute;
    inset: 0;
    background: var(--border);
    border-radius: 999px;
    transition: background .15s ease;
}

.switch-track::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform .15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.switch input:checked + .switch-track {
    background: var(--accent);
}

.switch input:checked + .switch-track::before {
    transform: translateX(18px);
}

.switch input:focus-visible + .switch-track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Benutzerdefinierte Felder: Chip-/Card-Reihen statt nackter Tabelle. */
.field-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    margin-bottom: 0.5rem;
}

.field-row-label {
    font-weight: 600;
    flex: 1;
}

.field-row-type {
    font-size: 0.78rem;
    color: var(--text-muted);
    background: var(--page-bg);
    padding: 0.15rem 0.6rem;
    border-radius: 6px;
    white-space: nowrap;
}

.field-row-flag {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 6px;
    white-space: nowrap;
}

.field-row-flag.required {
    background: rgba(175, 25, 25, 0.12);
    color: var(--error-text);
}

.field-row-flag.ticket-link {
    background: rgba(236, 109, 40, 0.15);
    color: var(--accent);
}

.field-row-flag.standard {
    background: var(--page-bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.field-row.field-row-fixed {
    background: transparent;
}

/* Linke Haelfte einer individuellen Feld-Zeile (Bezeichnung + ggf. "Mehrzeilig").
   Als Klasse statt Inline-Style, weil sie in zwei Templates UND in
   booking-fields-builder.js (Anlegen-Seite, Zeilen entstehen dort im Browser)
   identisch gebraucht wird. */
.field-row-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ---------------------------------------------------------------------------
   Knopf-Plastik: dieselbe Anmutung wie die Kacheln in Kopfzeile und Sidebar -
   Lichtkante oben, Schatten unten, beim Druecken senkt sich der Knopf leicht.

   Bewusst ueber background-IMAGE statt background: so bleibt die jeweilige
   Grundfarbe (Orange, Rot, Navy, Kartenfarbe) unveraendert und bekommt nur einen
   Verlauf darueber gelegt - jeder Knopf behaelt Form, Groesse und Farbe.

   Dieser Block steht bewusst ganz am Ende der Datei: die :hover-Regeln der
   einzelnen Knoepfe weiter oben setzen "background" als Kurzform, was
   background-image zuruecksetzen wuerde. Deshalb sind die Hover-Zustaende hier
   noch einmal aufgefuehrt.

   Die frueher stillen Tabellen-Knoepfe (.admin-delete-btn = "Ausgewaehlte
   loeschen" unter den Admin-Tabellen, .rotation-remove-btn = das kleine x je
   Rotationseintrag) sind inzwischen ebenfalls dabei - sie haben dafuer weiter oben
   eine eigene helle Flaeche bekommen, da sich transparente Elemente nicht anheben
   lassen. Rahmen- und Schriftfarbe blieben unveraendert.

   Weiterhin NICHT enthalten: .pool-toggle-btn (sitzt direkt in den Rasterzellen),
   .secret-eye (liegt IM Eingabefeld) und .bulk-bar-cancel-btn (bewusst der leise
   Gegenpart zu den farbigen Knoepfen daneben).
   --------------------------------------------------------------------------- */
.report-export-btn,
.rotation-restart-btn,
.login-azure-btn,
.rotation-add-btn,
.app-topbar-user button.logout-button,
.link-action-btn,
.day-tabs a,
.day-date-nav a,
.day-date-nav input[type="date"],
.day-sync-btn,
.admin-clear-date-btn,
.bulk-bar-code-btn,
.bulk-bar-reset-btn,
.admin-delete-btn,
.admin-edit-btn,
.rotation-remove-btn,
.rotation-remove-btn:hover,
.report-export-btn:hover,
.login-azure-btn:hover,
.rotation-add-btn:hover,
.app-topbar-user button.logout-button:hover,
.link-action-btn.is-copy:hover,
.link-action-btn.is-revoke:hover,
.link-action-btn.is-delete:hover,
.day-sync-btn:hover,
.admin-clear-date-btn:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.14));
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.report-export-btn:active,
.rotation-restart-btn:active,
.login-azure-btn:active,
.rotation-add-btn:active,
.app-topbar-user button.logout-button:active,
.link-action-btn:active,
.day-tabs a:active,
.day-date-nav a:active,
.day-sync-btn:active,
.admin-clear-date-btn:active,
.bulk-bar-code-btn:active,
.bulk-bar-reset-btn:active,
.admin-delete-btn:active,
.admin-edit-btn:active,
.rotation-remove-btn:active,
.icon-button:active,
.rail-item:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Im Dunkelmodus ist --page-bg reines Schwarz und damit DUNKLER als die Karte,
   auf der diese beiden Knoepfe liegen (--card-bg #0F2A38) - gemessener Kontrast
   1.41, sie wirkten wie eine Vertiefung statt wie eine erhabene Kachel. Deshalb
   dort eine hellere Blaustufe zwischen Karte und Rahmenfarbe. */
[data-mode="dark"] .admin-delete-btn,
[data-mode="dark"] .admin-edit-btn,
[data-mode="dark"] .rotation-remove-btn {
    background-color: #1B3D4E;
}

@media (prefers-reduced-motion: reduce) {
    .report-export-btn:active,
    .link-action-btn:active,
    .day-tabs a:active,
    .day-date-nav a:active,
    .day-sync-btn:active,
    .icon-button:active,
    .rail-item:active {
        transform: none;
    }
}