/* ============================================================
   GM Design System (GDS) — Single Source of Truth
   Version 1.0  ·  Stand 2026-04-21
   ============================================================
   Konsumiert von:
   - gm Dashboard – Planung (Desktop + Mobile + TV)   Dark-Theme
   - Urlaubsdashboard                            Dark-Theme
   - Fuhrpark App                                Light-Theme
     (setzt <html data-theme="light"> oder <body data-theme="light">)
   - gm Kalkulation (React/Vite, Repo gm-Kalkulation) Light-Theme,
     Kopfzeile dunkel; haelt eine Kopie unter
     src/web/src/gds/gds-tokens.css — Aenderungen hier, dann Kopie nachziehen
   ------------------------------------------------------------
   Regeln:
   - Referenziere nie Hex-Werte direkt im Komponenten-CSS.
   - Neue Farben/Maße NUR durch Erweiterung dieser Datei.
   - Semitransparenzen fuer Rollen-Badges kommen aus
     rgba(var(--gds-role-*), alpha) — KEINE eigenen Hex-Varianten.
   ============================================================ */

:root {

  /* ==========================================================
     1  MARKE
     ========================================================== */
  --gds-brand:            #f5a300;
  --gds-brand-dark:       #c8860a;
  --gds-brand-soft:       rgba(245, 163, 0, 0.16);
  --gds-brand-strong:     rgba(245, 163, 0, 0.34);
  --gds-brand-border:     rgba(245, 163, 0, 0.42);

  /* ==========================================================
     2  STATUS
     ========================================================== */
  --gds-good:             #22c55e;
  --gds-watch:            #f59e0b;
  --gds-critical:         #ef4444;

  --gds-good-halo:        rgba(34, 197, 94, 0.16);
  --gds-watch-halo:       rgba(245, 158, 11, 0.16);
  --gds-critical-halo:    rgba(239, 68, 68, 0.16);

  /* ==========================================================
     3  DOMAENE (Hochbau / Tiefbau / GalaBau)
     ========================================================== */
  --gds-hochbau:          #8fb9e8;
  --gds-tiefbau:          #aeb7c4;
  --gds-galabau:          #6fc28a;

  /* ==========================================================
     4  ROLLEN — RGB-Triplets fuer .person-badge-*
     Verwendung: rgba(var(--gds-role-X), alpha)
     ========================================================== */
  --gds-role-polier:       96, 165, 250;
  --gds-role-vorarbeiter: 245, 163,   0;
  --gds-role-eh:          239,  68,  68;
  --gds-role-kran:         45, 212, 191;
  --gds-role-bagger:      163, 230,  53;
  --gds-role-maschinist:  192, 132, 252;

  /* ==========================================================
     5  TYPOGRAFIE
     ========================================================== */
  --gds-font-sans:
    Bahnschrift, "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --gds-font-mono:
    "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --gds-fs-hero:          clamp(2rem, 4vw, 3.4rem);
  --gds-fs-h1:            1.7rem;
  --gds-fs-h2:            1.3rem;
  --gds-fs-h3:            1.05rem;
  --gds-fs-body:          1rem;
  --gds-fs-meta:          0.85rem;
  --gds-fs-cap:           0.78rem;
  --gds-fs-cap-xs:        0.68rem;

  --gds-lh-tight:         1.0;
  --gds-lh-snug:          1.15;
  --gds-lh-normal:        1.35;

  --gds-ls-kicker:        0.08em;
  --gds-ls-over:          0.14em;

  --gds-fw-regular:       400;
  --gds-fw-medium:        500;
  --gds-fw-semi:          650;
  --gds-fw-bold:          750;
  --gds-fw-extrabold:     900;

  /* ==========================================================
     6  SPACING — 2er-Skala (keine krummen Werte zulassen)
     ========================================================== */
  --gds-s-2:   2px;
  --gds-s-4:   4px;
  --gds-s-6:   6px;
  --gds-s-8:   8px;
  --gds-s-10: 10px;
  --gds-s-12: 12px;
  --gds-s-14: 14px;
  --gds-s-16: 16px;
  --gds-s-18: 18px;
  --gds-s-20: 20px;
  --gds-s-24: 24px;
  --gds-s-32: 32px;
  --gds-s-40: 40px;

  /* ==========================================================
     7  RADIUS
     ========================================================== */
  /* Seit 0.20.0 ist die Oberflaeche komplett eckig (passend zur
     gm-Website). Alle Flaechen-Radien stehen auf 0; die Tokens bleiben
     als Stellschraube erhalten. Rund bleiben nur echte Kreise
     (Status-Punkte, Theme-Umschalter, Radio-Knoepfe). */
  --gds-r-chip:     0;
  --gds-r-input:     0;
  --gds-r-card-s:    0;
  --gds-r-card:      0;
  --gds-r-card-l:    0;
  --gds-r-board:     0;

  /* ==========================================================
     8  ELEVATION
     ========================================================== */
  --gds-shadow-1:  0 1px  3px rgba(0, 0, 0, 0.06),
                   0 4px 12px rgba(0, 0, 0, 0.04);
  --gds-shadow-2:  0 8px 20px rgba(0, 0, 0, 0.18);
  --gds-shadow-3:  0 24px 60px rgba(0, 0, 0, 0.28);
  --gds-border-width: 1.5px;

  /* ==========================================================
     9  TOUCH
     ========================================================== */
  --gds-tap:        44px;
  --gds-tap-lg:     48px;

  /* ==========================================================
     9.1 LAYOUT-BREITEN
     ----------------------------------------------------------
     Zentrale Seitenbreiten, damit breite Monitore nicht durch
     app-spezifische Max-Widths ungenutzt bleiben.
     ========================================================== */
  --gds-page-gutter:      clamp(12px, 1vw, 24px);
  --gds-page-max:         1880px;
  --gds-page-max-wide:    2560px;
  /* Seitlicher Innenabstand der Seiten-Shell: Gutter, auf sehr breiten
     Bildschirmen der Rest zur max. Inhaltsbreite. Die Kopfzeile hebt ihn
     per negativem Rand wieder auf und laeuft so randlos ueber die volle
     Browserbreite (.gds-header-bar). */
  --gds-shell-pad:        max(var(--gds-page-gutter), calc((100vw - var(--gds-page-max-wide)) / 2));

  /* ==========================================================
     10 THEME — DARK (Default: Planung + Urlaub)
     ========================================================== */
  --gds-bg:            #0d1520;
  --gds-bg-gradient:
    radial-gradient(circle at -10% -12%, rgba(245, 163, 0, 0.14), transparent 30%),
    linear-gradient(180deg, #0b131d 0%, #0d1520 100%);
  --gds-panel:         #101923;
  --gds-panel-2:       #12202d;
  --gds-panel-3:       #162434;
  --gds-panel-grad:
    linear-gradient(180deg, rgba(17, 28, 40, 0.98), rgba(12, 20, 30, 0.98));
  --gds-line:          rgba(255, 255, 255, 0.12);
  --gds-text:          #fbfdff;
  --gds-text-muted:    #95a4b8;

  --gds-chip-bg:       linear-gradient(180deg, #dbe6f3, #bdd2ea);
  --gds-chip-border:   rgba(232, 240, 250, 0.58);
  --gds-chip-text:     #10151f;

  --gds-input-bg:      #0f1926;
  --gds-btn-primary-bg:
    linear-gradient(180deg, rgba(245, 163, 0, 0.18), rgba(245, 163, 0, 0.08));
  --gds-btn-primary-border: rgba(245, 163, 0, 0.24);
  --gds-btn-primary-text:   var(--gds-brand);

  /* Sichtbare Rand-Stärke für inaktive Buttons (etwas über --gds-line) */
  --gds-btn-border:    rgba(255, 255, 255, 0.14);

  /* Brand-Glow: Box-Shadow für aktive/fokussierte orange Elemente */
  --gds-brand-glow:
    0 0 0 2px rgba(245, 163, 0, 0.22),
    0 0 14px rgba(245, 163, 0, 0.28);
}

/* ============================================================
   THEME — LIGHT (Fuhrpark App)
   Aktivierung: <html data-theme="light"> oder entsprechend im body
   ============================================================ */
[data-theme="light"] {
  --gds-bg:            #ffffff;
  --gds-bg-gradient:   none;
  --gds-panel:         #ffffff;
  --gds-panel-2:       #F8F7F3;
  --gds-panel-3:       #EEEBE3;
  --gds-panel-grad:    #ffffff;
  --gds-line:          #DCD5C8;
  --gds-text:          #1a1a1a;
  --gds-text-muted:    #6b7280;

  --gds-chip-bg:       #F8F7F3;
  --gds-chip-border:   #DCD5C8;
  --gds-chip-text:     #1a1a1a;

  --gds-input-bg:      #ffffff;
  --gds-btn-primary-bg:     var(--gds-brand);
  --gds-btn-primary-border: var(--gds-brand);
  --gds-btn-primary-text:   #1a1a1a;

  --gds-btn-border:    rgba(0, 0, 0, 0.24);
  --gds-brand-glow:
    0 0 0 2px rgba(245, 163, 0, 0.20),
    0 0 10px rgba(245, 163, 0, 0.16);

  /* Rollen-Farbfelder werden im Light-Theme intensiver */
  --gds-brand-soft:    rgba(245, 163, 0, 0.12);
  --gds-brand-strong:  rgba(245, 163, 0, 0.26);
}


/* ============================================================
   BASE — Body-Grundlagen
   ============================================================ */
html,
body {
  margin: 0;
  min-height: 100%;
  background-color: var(--gds-bg);
  background-image: var(--gds-bg-gradient);
  color: var(--gds-text);
  font-family: var(--gds-font-sans);
  line-height: var(--gds-lh-normal);
  -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}


/* ============================================================
   PERSON-BADGE — einzige Wahrheit fuer Rollen-Kennzeichnung
   ------------------------------------------------------------
   Verwendung:
     <span class="person-badges">
       <span class="person-badge person-badge-polier">P</span>
       <span class="person-badge person-badge-eh">EH</span>
     </span>
   ------------------------------------------------------------
   Gilt identisch fuer Desktop, Mobile, TV. Keine App darf
   eigene Badge-Klassen definieren.
   ============================================================ */
.person-badges {
  display: inline-flex;
  gap: var(--gds-s-4);
  flex-wrap: wrap;
  align-items: center;
}

.person-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  min-width: 21px;
  border-radius: 50%;
  border: 1px solid var(--gds-brand-border);
  background: var(--gds-brand-soft);
  color: var(--gds-brand);
  font-family: var(--gds-font-sans);
  font-size: 0.7rem;
  font-weight: var(--gds-fw-extrabold);
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.person-badge-polier {
  background:   rgba(var(--gds-role-polier),     0.32);
  border-color: rgba(var(--gds-role-polier),     0.78);
  color:        #d9ecff;
}

.person-badge-vorarbeiter {
  background:   rgba(var(--gds-role-vorarbeiter), 0.34);
  border-color: rgba(var(--gds-role-vorarbeiter), 0.78);
  color:        #ffe7ad;
}

.person-badge-eh {
  background:   rgba(var(--gds-role-eh),          0.34);
  border-color: rgba(var(--gds-role-eh),          0.78);
  color:        #ffd2d2;
}

.person-badge-kran {
  background:   rgba(var(--gds-role-kran),        0.32);
  border-color: rgba(var(--gds-role-kran),        0.74);
  color:        #cbfff8;
}

.person-badge-bagger {
  background:   rgba(var(--gds-role-bagger),      0.32);
  border-color: rgba(var(--gds-role-bagger),      0.76);
  color:        #ecffc7;
}

.person-badge-maschinist {
  background:   rgba(var(--gds-role-maschinist),  0.34);
  border-color: rgba(var(--gds-role-maschinist),  0.78);
  color:        #f1dcff;
}

/* Kran + Bagger: kuerzeres Label nutzt enger gesetzte Schrift */
.person-badge-kran,
.person-badge-bagger {
  letter-spacing: -0.03em;
}

[data-theme="light"] .person-badge {
  box-shadow: none;
}

[data-theme="light"] .person-badge-polier {
  background: rgba(var(--gds-role-polier), 0.18);
  border-color: rgba(var(--gds-role-polier), 0.55);
  color: #1d4ed8;
}

[data-theme="light"] .person-badge-vorarbeiter {
  background: rgba(var(--gds-role-vorarbeiter), 0.16);
  border-color: rgba(180, 90, 0, 0.60);
  color: #92400e;
}

[data-theme="light"] .person-badge-eh {
  background: rgba(var(--gds-role-eh), 0.14);
  border-color: rgba(var(--gds-role-eh), 0.55);
  color: #b91c1c;
}

[data-theme="light"] .person-badge-kran {
  background: rgba(var(--gds-role-kran), 0.16);
  border-color: rgba(var(--gds-role-kran), 0.55);
  color: #0f766e;
}

[data-theme="light"] .person-badge-bagger {
  background: rgba(var(--gds-role-bagger), 0.16);
  border-color: rgba(var(--gds-role-bagger), 0.55);
  color: #3f6212;
}

[data-theme="light"] .person-badge-maschinist {
  background: rgba(var(--gds-role-maschinist), 0.16);
  border-color: rgba(var(--gds-role-maschinist), 0.55);
  color: #6d28d9;
}


/* ============================================================
   GDS-CHIP — Summen-/Kontext-Pille
   Verwendung: <span class="gds-chip">28 Mitarbeiter</span>
   ============================================================ */
.gds-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 13px;
  border-radius: var(--gds-r-chip);
  background: var(--gds-chip-bg);
  border: var(--gds-border-width) solid var(--gds-chip-border);
  color: var(--gds-chip-text);
  font-family: var(--gds-font-sans);
  font-size: var(--gds-fs-cap);
  font-weight: var(--gds-fw-bold);
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--gds-shadow-2);
}


/* ============================================================
   GDS-BUTTON
   ============================================================ */
.gds-btn {
  min-height: var(--gds-tap);
  padding: 10px 16px;
  border-radius: var(--gds-r-input);
  border: var(--gds-border-width) solid var(--gds-line);
  background: var(--gds-input-bg);
  color: var(--gds-text);
  font-family: var(--gds-font-sans);
  font-weight: var(--gds-fw-bold);
  cursor: pointer;
}

.gds-btn--primary {
  background:   var(--gds-btn-primary-bg);
  border-color: var(--gds-btn-primary-border);
  color:        var(--gds-btn-primary-text);
}


/* ============================================================
   GDS-CARD — universelle Card-Grundform
   Varianten (Radien seit 0.20.0 alle 0, Tokens siehe Abschnitt 7):
     .gds-card            Standard
     .gds-card--board     Board-Container
     .gds-card--site      Site-/List-Item
     .gds-card--brand     Brand-Header
   ============================================================ */
.gds-card {
  background: var(--gds-panel-grad);
  border: var(--gds-border-width) solid var(--gds-line);
  border-radius: var(--gds-r-card);
  box-shadow: var(--gds-shadow-3);
}

[data-theme="light"] .gds-card {
  background: var(--gds-panel);
  box-shadow: var(--gds-shadow-1);
}

.gds-card--board { border-radius: var(--gds-r-board);  }
.gds-card--site  { border-radius: var(--gds-r-card-s); }
.gds-card--brand { border-radius: var(--gds-r-card-l); }


/* ============================================================
   STATUS-DOT
   Verwendung: <span class="gds-status-dot"></span>
               .gds-status-dot--watch / --critical
   ============================================================ */
.gds-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--gds-good);
  box-shadow: 0 0 0 5px var(--gds-good-halo);
  flex-shrink: 0;
  display: inline-block;
}

.gds-status-dot--watch {
  background: var(--gds-watch);
  box-shadow: 0 0 0 5px var(--gds-watch-halo);
}

.gds-status-dot--critical {
  background: var(--gds-critical);
  box-shadow: 0 0 0 5px var(--gds-critical-halo);
}


/* ============================================================
   TYPOGRAPHIE-UTILITIES
   ============================================================ */
.gds-kicker {
  font-family: var(--gds-font-sans);
  font-size: var(--gds-fs-cap);
  font-weight: var(--gds-fw-medium);
  line-height: 1;
  letter-spacing: var(--gds-ls-kicker);
  text-transform: uppercase;
  color: var(--gds-brand);
}

.gds-overline {
  font-family: var(--gds-font-sans);
  font-size: var(--gds-fs-cap-xs);
  font-weight: var(--gds-fw-medium);
  line-height: 1;
  letter-spacing: var(--gds-ls-over);
  text-transform: uppercase;
  color: var(--gds-text-muted);
}

.gds-meta {
  font-size: var(--gds-fs-meta);
  color: var(--gds-text-muted);
}


/* ============================================================
   HELPERS
   ============================================================ */
.gds-hidden { display: none !important; }

/* Universelle Hidden-Klasse. Frueher in styles.css, mobile.css und
   urlaub/styles.css redundant definiert; jetzt zentral. */
.hidden { display: none !important; }


/* ============================================================
   GDS-TOPBAR — gemeinsamer Header-Grid fuer Dashboards
   Frueher in styles.css und urlaub/styles.css identisch dupliziert.
   ============================================================ */
.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  margin-bottom: 16px;
  align-items: stretch;
}


/* ============================================================
   GDS-HEADER-BAR — randlose Kopfzeile ueber die volle Browserbreite
   Seit 0.20.0 ersetzt der Balken die frueheren Brand-"Pillen"
   (Card mit Radius 22). Er sitzt oben buendig, hat keine Rundungen
   und traegt den Marken-Akzent (gelbe Linie) am unteren Rand.
   Voraussetzung: die umgebende Shell nutzt --gds-shell-pad als
   seitliches Padding (statt einer begrenzten Breite mit margin auto),
   damit der negative Rand exakt bis zum Fensterrand reicht.
   Verwendung: <header class="topbar gds-header-bar"> usw.
   ============================================================ */
.gds-header-bar {
  position: relative;
  margin-left: calc(-1 * var(--gds-shell-pad));
  margin-right: calc(-1 * var(--gds-shell-pad));
  padding: 12px var(--gds-shell-pad) 16px;
  background: var(--gds-panel-grad);
  border: 0;
  border-bottom: var(--gds-border-width) solid var(--gds-line);
  border-radius: 0;
  box-shadow: var(--gds-shadow-2);
}

[data-theme="light"] .gds-header-bar {
  background: var(--gds-panel-2);
  box-shadow: var(--gds-shadow-1);
}

/* Einheitliche Groesse von Logo und Seitenueberschrift in allen Kopfzeilen
   (Wochenuebersicht, Urlaub, Stunden, Auswertung, Startseite). Seiten-CSS
   darf diese Werte nicht mehr ueberschreiben; TV-Modus bleibt eigen. */
:root {
  --gds-header-logo-w: 160px;
  --gds-header-title-size: clamp(29px, 3vw, 42px);
}

body:not(.tv-mode) .gds-header-bar .brand-logo,
body:not(.tv-mode) .gds-header-bar .landing-logo {
  width: var(--gds-header-logo-w);
  max-width: none;
  height: auto;
  flex: 0 0 auto;
}

/* body:not(...) = höhere Spezifität als Seiten-Regeln wie ".brand h1";
   der echte TV-Modus behält seine eigene Größe. */
html body:not(.tv-mode) .gds-header-bar h1 {
  font-size: var(--gds-header-title-size);
  line-height: 1;
  letter-spacing: -0.02em;
}

@media (max-width: 640px) {
  :root {
    --gds-header-logo-w: 110px;
    --gds-header-title-size: 24px;
  }
}

.gds-header-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 5px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--gds-brand) 0%, var(--gds-brand) 42%, transparent 100%);
}


/* ============================================================
   THEME-TOGGLE
   ============================================================ */
.theme-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  border: var(--gds-border-width) solid rgba(0, 0, 0, 0.16);
  background: #E8E3D9;
  box-shadow: var(--gds-shadow-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 0;
  z-index: 1000;
  transition: opacity 0.15s, box-shadow 0.15s;
}

[data-theme="light"] .theme-toggle {
  background: #162434;
  border-color: rgba(255, 255, 255, 0.15);
}

.theme-toggle:hover {
  opacity: 0.85;
  box-shadow: var(--gds-brand-glow);
}

.theme-icon-svg {
  width: 25px;
  height: 25px;
  display: block;
  color: #162434;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  user-select: none;
}

.theme-icon-svg--moon {
  stroke: none;
  transform: translate(0.7px, 0);
}

.theme-icon-svg--sun circle {
  stroke: none;
}

[data-theme="light"] .theme-icon-svg {
  color: #f4f0e6;
}


/* ============================================================
   GDS DATE PICKER
   Custom Date-Picker (loest den nativen Browser-Picker ab),
   konsistent mit dem Dashboard-Design.
   ============================================================ */
.gds-date-wrap {
  position: relative;
  display: inline-block;
}

.gds-date-input--hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.gds-date-trigger {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--gds-s-6);
  min-height: 36px;
  padding: 6px 14px;
  background: var(--gds-panel-2);
  border: var(--gds-border-width) solid var(--gds-line);
  border-radius: var(--gds-r-input);
  color: var(--gds-text);
  font-family: var(--gds-font-sans);
  font-size: 0.88rem;
  font-weight: var(--gds-fw-medium);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.gds-date-trigger__text {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Kalender-Icon als physisches <span> mit SVG-Mask: nimmt die Textfarbe an
   (currentColor), damit es in Dark- und Light-Theme automatisch passt.
   Vorher als ::after-Pseudo-Element — das hat auf schmalen Layouts geklemmt
   und wurde unter dem Text gerendert. */
.gds-date-trigger__icon {
  display: inline-block;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z'/></svg>") center / contain no-repeat;
  opacity: 0.7;
  transition: opacity 0.12s ease;
}

.gds-date-trigger:hover .gds-date-trigger__icon {
  opacity: 1;
}

.gds-date-trigger:hover {
  border-color: var(--gds-brand);
  background: var(--gds-panel-3);
}

.gds-date-trigger:focus-visible,
.gds-date-trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--gds-brand);
  box-shadow: 0 0 0 3px var(--gds-brand-soft);
}

.gds-date-trigger--empty {
  color: var(--gds-text-muted);
  font-weight: var(--gds-fw-regular);
}

[data-theme="light"] .gds-date-trigger {
  background: var(--gds-panel);
}
[data-theme="light"] .gds-date-trigger:hover {
  background: var(--gds-panel-2);
}

/* ── Popup-Calendar ─────────────────────────────────────── */
.gds-date-popup {
  position: absolute;
  z-index: 1100;
  width: 280px;
  padding: var(--gds-s-12);
  background: var(--gds-panel);
  border: var(--gds-border-width) solid var(--gds-line);
  border-radius: var(--gds-r-card-s);
  box-shadow: var(--gds-shadow-3);
  color: var(--gds-text);
  font-family: var(--gds-font-sans);
  font-size: 0.88rem;
}

[data-theme="light"] .gds-date-popup {
  background: var(--gds-panel);
  box-shadow: var(--gds-shadow-2);
}

.gds-date-popup__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gds-s-8);
  margin-bottom: var(--gds-s-10);
}

.gds-date-popup__title {
  font-weight: var(--gds-fw-bold);
  font-size: 0.95rem;
  color: var(--gds-text);
  letter-spacing: 0.01em;
}

.gds-date-popup__nav {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--gds-border-width) solid var(--gds-line);
  background: var(--gds-panel-2);
  color: var(--gds-text);
  border-radius: var(--gds-r-input);
  cursor: pointer;
  font-size: 0.78rem;
}

.gds-date-popup__nav:hover {
  border-color: var(--gds-brand);
  color: var(--gds-brand);
}

.gds-date-popup__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.gds-date-popup__weekday {
  text-align: center;
  font-size: var(--gds-fs-cap-xs);
  font-weight: var(--gds-fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gds-text-muted);
  padding: 4px 0 6px;
}

.gds-date-popup__day {
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 0;
  color: var(--gds-text);
  font-family: var(--gds-font-sans);
  font-size: 0.85rem;
  font-weight: var(--gds-fw-medium);
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}

.gds-date-popup__day:hover {
  background: var(--gds-brand-soft);
  color: var(--gds-brand);
}

.gds-date-popup__day.is-outside {
  color: var(--gds-text-muted);
  opacity: 0.55;
}

.gds-date-popup__day.is-weekend {
  color: var(--gds-text-muted);
}

.gds-date-popup__day.is-today {
  border-color: var(--gds-brand);
  color: var(--gds-brand);
  font-weight: var(--gds-fw-bold);
}

.gds-date-popup__day.is-selected {
  background: var(--gds-brand);
  color: var(--gds-chip-text);
  border-color: var(--gds-brand-dark);
  font-weight: var(--gds-fw-extrabold);
}

.gds-date-popup__day.is-selected:hover {
  background: var(--gds-brand-dark);
  color: var(--gds-chip-text);
}

/* ── Month-Mode (Picker mit 3x4 Monats-Raster) ───────────── */
.gds-date-popup--month {
  width: 260px;
}

.gds-date-popup__months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gds-s-6);
}

.gds-date-popup__month {
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 0;
  color: var(--gds-text);
  font-family: var(--gds-font-sans);
  font-size: 0.88rem;
  font-weight: var(--gds-fw-medium);
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}

.gds-date-popup__month:hover {
  background: var(--gds-brand-soft);
  color: var(--gds-brand);
}

.gds-date-popup__month.is-today {
  border-color: var(--gds-brand);
  color: var(--gds-brand);
  font-weight: var(--gds-fw-bold);
}

.gds-date-popup__month.is-selected {
  background: var(--gds-brand);
  color: var(--gds-chip-text);
  border-color: var(--gds-brand-dark);
  font-weight: var(--gds-fw-extrabold);
}

.gds-date-popup__month.is-selected:hover {
  background: var(--gds-brand-dark);
  color: var(--gds-chip-text);
}

.gds-date-popup__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--gds-s-8);
  margin-top: var(--gds-s-10);
  padding-top: var(--gds-s-8);
  border-top: 1px solid var(--gds-line);
}

.gds-date-popup__action {
  background: transparent;
  border: none;
  color: var(--gds-text-muted);
  font-family: var(--gds-font-sans);
  font-size: 0.82rem;
  font-weight: var(--gds-fw-bold);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 0;
}

.gds-date-popup__action:hover {
  color: var(--gds-brand);
  background: var(--gds-brand-soft);
}

.gds-date-popup__action--today {
  color: var(--gds-brand);
}


/* ============================================================
   ADMIN-IMPERSONATION-BANNER
   Wird per /wwwroot/admin-impersonate.js eingeblendet, sobald
   ein Admin die Test-Ansicht einer anderen Rolle nutzt.
   ============================================================ */
.gm-impersonate-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: var(--gds-s-12);
  padding: var(--gds-s-8) var(--gds-s-16);
  background: linear-gradient(90deg, var(--gds-brand) 0%, var(--gds-brand-dark) 100%);
  color: #10151f;
  font-family: var(--gds-font-sans);
  font-size: var(--gds-fs-meta);
  font-weight: var(--gds-fw-bold);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.gm-impersonate-banner__icon {
  font-size: 1.05rem;
  line-height: 1;
}

.gm-impersonate-banner__text {
  flex: 1 1 auto;
  min-width: 0;
}

.gm-impersonate-banner__text strong {
  margin-left: var(--gds-s-6);
  font-weight: var(--gds-fw-extrabold);
}

.gm-impersonate-banner__exit {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 6px 14px;
  border-radius: var(--gds-r-chip);
  border: 1px solid rgba(16, 21, 31, 0.35);
  background: rgba(255, 255, 255, 0.92);
  color: #10151f;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: var(--gds-fw-bold);
  cursor: pointer;
}

.gm-impersonate-banner__exit:hover {
  background: #ffffff;
  border-color: rgba(16, 21, 31, 0.55);
}

@media (max-width: 640px) {
  .gm-impersonate-banner {
    flex-wrap: wrap;
    gap: var(--gds-s-6);
  }
  .gm-impersonate-banner__text {
    flex: 1 1 100%;
  }
}


/* ============================================================
   ADMIN-IMPERSONATION-CHOOSER (Landing-Page)
   Bedien-Panel fuer Admins, um Ansicht einer anderen Rolle zu testen.
   ============================================================ */
.gm-impersonate-chooser {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gds-s-12);
  margin-top: var(--gds-s-18);
  padding: var(--gds-s-14) var(--gds-s-18);
  border: var(--gds-border-width) solid var(--gds-brand-border);
  border-radius: var(--gds-r-card-s);
  background: var(--gds-brand-soft);
  color: var(--gds-text);
}

/* Notwendig: ohne diesen Selektor wuerde das HTML-`hidden`-Attribut
   vom obigen `display: flex` ueberschrieben und der Balken bliebe
   als leerer Container sichtbar. */
.gm-impersonate-chooser[hidden] {
  display: none !important;
}

.gm-impersonate-chooser__label {
  font-size: var(--gds-fs-cap);
  font-weight: var(--gds-fw-bold);
  letter-spacing: var(--gds-ls-kicker);
  text-transform: uppercase;
  color: var(--gds-brand);
}

.gm-impersonate-chooser__select {
  min-height: 36px;
  padding: 6px 10px;
  border-radius: var(--gds-r-input);
  border: var(--gds-border-width) solid var(--gds-line);
  background: var(--gds-panel-2);
  color: var(--gds-text);
  font-family: var(--gds-font-sans);
  font-size: 0.9rem;
}

[data-theme="light"] .gm-impersonate-chooser__select {
  background: var(--gds-panel);
}

.gm-impersonate-chooser__apply,
.gm-impersonate-chooser__reset {
  min-height: 36px;
  padding: 6px 14px;
  border-radius: var(--gds-r-input);
  border: var(--gds-border-width) solid var(--gds-btn-primary-border);
  background: var(--gds-btn-primary-bg);
  color: var(--gds-btn-primary-text);
  font-family: var(--gds-font-sans);
  font-size: 0.85rem;
  font-weight: var(--gds-fw-bold);
  cursor: pointer;
}

.gm-impersonate-chooser__reset {
  background: transparent;
  border-color: var(--gds-line);
  color: var(--gds-text-muted);
}

.gm-impersonate-chooser__apply:hover,
.gm-impersonate-chooser__reset:hover {
  opacity: 0.9;
}

.gm-impersonate-chooser__current {
  flex: 1 1 100%;
  font-size: var(--gds-fs-meta);
  color: var(--gds-text-muted);
}

.gm-impersonate-chooser__current strong {
  color: var(--gds-text);
}


/* ============================================================
   ADMIN-IMPERSONATION-FAB
   Floating-Switcher unten rechts: auf jeder Seite verfuegbar fuer
   Admins. Klick auf das Auge oeffnet ein kleines Menue zum Wechseln
   der Test-Ansicht. Pille am Auge zeigt die aktuelle Impersonation.
   ============================================================ */
.gm-impersonate-fab {
  position: fixed;
  left: var(--gds-s-16);
  bottom: var(--gds-s-16);
  z-index: 990;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: var(--gds-s-8);
}

.gm-impersonate-fab__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--gds-s-8);
  min-height: 48px;
  padding: 6px 14px 6px 10px;
  border-radius: 0;
  border: var(--gds-border-width) solid var(--gds-brand);
  background: var(--gds-panel);
  color: var(--gds-brand);
  font-family: var(--gds-font-sans);
  font-size: 0.85rem;
  font-weight: var(--gds-fw-bold);
  cursor: pointer;
  box-shadow: var(--gds-shadow-3);
}

.gm-impersonate-fab__icon {
  font-size: 1.1rem;
  line-height: 1;
}

.gm-impersonate-fab__pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 0;
  background: var(--gds-brand);
  color: #10151f;
  font-size: 0.7rem;
  font-weight: var(--gds-fw-extrabold);
  letter-spacing: 0.02em;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gm-impersonate-fab.is-impersonating .gm-impersonate-fab__toggle {
  background: var(--gds-brand);
  color: #10151f;
  border-color: var(--gds-brand-dark);
}

.gm-impersonate-fab.is-impersonating .gm-impersonate-fab__pill {
  background: #10151f;
  color: var(--gds-brand);
}

.gm-impersonate-fab__menu {
  width: min(320px, calc(100vw - var(--gds-s-32)));
  padding: var(--gds-s-14);
  border-radius: var(--gds-r-card-s);
  border: var(--gds-border-width) solid var(--gds-line);
  background: var(--gds-panel);
  color: var(--gds-text);
  box-shadow: var(--gds-shadow-3);
  display: flex;
  flex-direction: column;
  gap: var(--gds-s-12);
}

.gm-impersonate-fab__section {
  display: flex;
  flex-direction: column;
  gap: var(--gds-s-6);
  padding-top: var(--gds-s-8);
  border-top: 1px dashed var(--gds-line);
}

.gm-impersonate-fab__section:first-of-type {
  padding-top: 0;
  border-top: none;
}

.gm-impersonate-fab__sublabel {
  font-size: var(--gds-fs-meta);
  color: var(--gds-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Mount-Container fuer gds-search-select im FAB-Menue. Eigener Block,
   damit das Suchfeld voll-breit ist und das Dropdown unter das Feld
   passt, ohne aus dem FAB rauszubrechen. */
.gm-impersonate-fab__search {
  position: relative;
}

.gm-impersonate-fab__search .gds-search-select__menu {
  /* Im FAB-Menue (das selbst ein Container ist) reicht das Default-
     Listing-Verhalten — kein zusaetzliches Floating noetig. */
  max-height: 220px;
}

.gm-impersonate-fab__search-empty {
  margin: 0;
  padding: var(--gds-s-8) 0;
  font-size: var(--gds-fs-meta);
  color: var(--gds-text-muted);
}

.gm-impersonate-fab__apply:disabled,
.gm-impersonate-fab__select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.gm-impersonate-fab__menu[hidden] {
  display: none !important;
}

.gm-impersonate-fab__label {
  margin: 0;
  font-size: var(--gds-fs-cap-xs);
  font-weight: var(--gds-fw-bold);
  letter-spacing: var(--gds-ls-kicker);
  text-transform: uppercase;
  color: var(--gds-brand);
}

.gm-impersonate-fab__select {
  min-height: 36px;
  padding: 6px 10px;
  background: var(--gds-panel-2);
  border: var(--gds-border-width) solid var(--gds-line);
  border-radius: var(--gds-r-input);
  color: var(--gds-text);
  font-family: var(--gds-font-sans);
  font-size: 0.85rem;
}

.gm-impersonate-fab__actions {
  display: flex;
  gap: var(--gds-s-6);
}

.gm-impersonate-fab__apply,
.gm-impersonate-fab__reset {
  flex: 1;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: var(--gds-r-input);
  border: var(--gds-border-width) solid var(--gds-line);
  background: var(--gds-panel-2);
  color: var(--gds-text);
  font-family: var(--gds-font-sans);
  font-size: 0.82rem;
  font-weight: var(--gds-fw-bold);
  cursor: pointer;
}

.gm-impersonate-fab__apply {
  background: var(--gds-brand-soft);
  border-color: var(--gds-brand-border);
  color: var(--gds-brand);
}

.gm-impersonate-fab__current {
  margin: 0;
  font-size: var(--gds-fs-meta);
  color: var(--gds-text-muted);
  line-height: 1.35;
}

.gm-impersonate-fab__current strong {
  color: var(--gds-text);
}

/* Footer-Sektion im Admin-FAB: zeigt "Deine Rollen" und "Version" als
   zwei Zeilen mit Label links und Wert rechts. Sitzt unter der
   "Aktuell"-Zeile, abgetrennt durch eine dezente Linie. */
.gm-impersonate-fab__footer {
  margin-top: var(--gds-s-12);
  padding-top: var(--gds-s-10);
  border-top: 1px solid var(--gds-line);
  display: flex;
  flex-direction: column;
  gap: var(--gds-s-4);
}

.gm-impersonate-fab__footer p {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: var(--gds-s-10);
  font-size: var(--gds-fs-meta);
  line-height: 1.3;
}

.gm-impersonate-fab__footer-label {
  color: var(--gds-text-muted);
  font-weight: var(--gds-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--gds-ls-kicker);
  font-size: var(--gds-fs-cap-xs);
}

.gm-impersonate-fab__footer-value {
  color: var(--gds-text);
  font-weight: var(--gds-fw-bold);
  text-align: right;
  font-family: var(--gds-font-mono, ui-monospace, "Consolas", monospace);
}

/* ==========================================================
   Logo-Link zur Startseite
   ----------------------------------------------------------
   Das Logo in jedem Dashboard-Header ist in einen <a href="/">
   gewickelt. Der Link soll die Logo-Groesse 1:1 uebernehmen,
   keine Unterstreichung mitbringen und visuelles Feedback geben.
   ========================================================== */
.brand-logo-link,
.m-logo-link {
  display: inline-flex;
  line-height: 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
  transition: opacity 120ms ease-out;
}

.brand-logo-link:hover,
.m-logo-link:hover {
  opacity: 0.78;
}

.brand-logo-link:focus-visible,
.m-logo-link:focus-visible {
  outline: 2px solid var(--gds-focus, currentColor);
  outline-offset: 3px;
}