/* ==========================================================================
   DP+ REDESIGN — PREVIEW-LAYER (Phase 1)
   Additiv, reversibel: wird NACH style.css geladen, ersetzt nichts darin.
   Ziel dieser Datei: das neue Design-System (Farben/Typo/Nav/Komponenten)
   sichtbar machen, ohne die 8000-Zeilen style.css anzufassen.
   Entfernen = eine <link>-Zeile in base.html loeschen.
   ========================================================================== */

/* ---------- Fonts (lokal gehostet, kein CDN) ---------- */
@font-face{
  font-family:'Big Shoulders';font-weight:700;font-style:normal;font-display:swap;
  src:url('/static/fonts/bigshoulders700.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans';font-weight:400;font-style:normal;font-display:swap;
  src:url('/static/fonts/plexsans400.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans';font-weight:600;font-style:normal;font-display:swap;
  src:url('/static/fonts/plexsans600.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans';font-weight:700;font-style:normal;font-display:swap;
  src:url('/static/fonts/plexsans700.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:swap;
  src:url('/static/fonts/plexmono400.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';font-weight:600;font-style:normal;font-display:swap;
  src:url('/static/fonts/plexmono600.woff2') format('woff2');
}

/* ---------- Tokens: EIN System (ersetzt --dp-*, --primary/--secondary, --bg-main/*) ---------- */
:root{
  --rd-stone-50:#F3F5F4; --rd-stone-100:#E9ECEA; --rd-stone-200:#DCE1DE; --rd-stone-300:#C2C9C5;
  --rd-ink-600:#445055; --rd-ink-800:#1E2A2E; --rd-ink-950:#10161A;
  --rd-teal-500:#128A94; --rd-teal-600:#0E7C86; --rd-teal-700:#0A6169; --rd-teal-100:#DDF0F0;
  --rd-amber-500:#D99A2B; --rd-amber-100:#FBEDD3;
  --rd-green-600:#2E8B63; --rd-green-100:#DEF0E6;
  --rd-red-600:#C0463A; --rd-red-100:#F8E1DE;

  --rd-bg:var(--rd-stone-50); --rd-surface:#fff; --rd-surface-sunken:var(--rd-stone-100);
  --rd-border:var(--rd-stone-200); --rd-border-strong:var(--rd-stone-300);
  --rd-text:var(--rd-ink-950); --rd-text-muted:var(--rd-ink-600);
  --rd-accent:var(--rd-teal-600); --rd-accent-strong:var(--rd-teal-700); --rd-accent-soft:var(--rd-teal-100);
  --rd-radius-sm:6px; --rd-radius-md:10px; --rd-radius-lg:16px;
  --rd-font-display:'Big Shoulders','Arial Narrow',sans-serif;
  --rd-font-body:'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;
  --rd-font-mono:'IBM Plex Mono',ui-monospace,monospace;

  /* bestehende --dp-* Tokens umleiten: faengt Stellen ab, die diese noch nutzen
     (z.B. das PWA-Install-Banner in base.html) */
  --dp-primary:var(--rd-accent); --dp-primary-dark:var(--rd-accent-strong); --dp-primary-light:var(--rd-accent-soft);
  --dp-bg:var(--rd-bg); --dp-surface:var(--rd-surface); --dp-surface-2:var(--rd-surface-sunken);
  --dp-border:var(--rd-border); --dp-text:var(--rd-text); --dp-text-muted:var(--rd-text-muted);
  --dp-nav-bg:var(--rd-ink-950); --dp-nav-text:#9FC9CC; --dp-nav-active:#fff;
}
/* Dark Mode bewusst deaktiviert (User-Feedback: schlecht lesbar/wirkt nicht
   gut) - es gibt ohnehin keinen manuellen Umschalter in der App, nur
   OS-Praeferenz. Die App bleibt jetzt unabhaengig von prefers-color-scheme
   durchgehend im hellen Design (:root-Werte oben). */

/* ---------- Typografie global ---------- */
body, .main-nav, .topnav-v234, .mobile-bottom-nav, input, select, textarea, button{
  font-family:var(--rd-font-body) !important;
}
/* Big Shoulders bewusst nur fuer sehr grosse, seltene Anlaesse (z.B. Login-Hero) -
   auf normalen UI-Ueberschriften (h1-h3 kommen dutzendfach pro Seite vor) wirkte
   die fette, grossgeschriebene Signage-Schrift zu plakativ/"wuchtig". */
h1, h2, h3, .topbar-title, .brand-copy h2{
  font-family:var(--rd-font-body) !important;
  font-weight:700 !important;
  text-transform:none !important; letter-spacing:normal !important;
}
h1{ font-size:1.65rem !important; font-weight:700 !important; }
h2{ font-size:1.32rem !important; font-weight:600 !important; }
h3{ font-size:1.12rem !important; font-weight:600 !important; }
.mono, .schedule-time, td.time-cell, .time-value{ font-variant-numeric:tabular-nums; }

/* ---------- Grundflaechen ---------- */
body{ background:var(--rd-bg) !important; color:var(--rd-text) !important; }
.content{ background:transparent; }
a{ color:var(--rd-accent-strong); }

/* ---------- Sidebar (mobile Schublade, <921px) ---------- */
/* War bewusst dunkel/navy gestaltet, User-Feedback: wirkt wie Dark Mode und
   gefaellt nicht - jetzt durchgehend helles Design wie der Rest der App.
   style.css hat einen alten Fix "Sidebar Hintergrund" (aside.sidebar +
   .sidebar .sidebar-scroll, #F4F6FB) mit hoeherer Selektor-Spezifitaet als
   ein einfaches .sidebar - der gewinnt sonst trotz spaeterem Laden dieser
   Datei. Deshalb hier dieselbe Spezifitaet mitliefern. */
.sidebar, aside.sidebar, .sidebar .sidebar-scroll{
  background:var(--rd-surface) !important;
  background-image:none !important;
}
.sidebar{
  color:var(--rd-text) !important;
  border-right:1px solid var(--rd-border) !important;
}
.hotel-switcher.flat-panel, .compact-context-card{
  background:var(--rd-surface-sunken) !important; border-color:var(--rd-border) !important;
}
.hotel-switcher select, .sidebar select{
  background:var(--rd-surface) !important; border-color:var(--rd-border-strong) !important; color:var(--rd-text) !important;
}
.main-nav-primary, .main-nav-group summary, .main-nav-secondary{
  color:var(--rd-text) !important; font-weight:600 !important;
  border-radius:var(--rd-radius-sm) !important;
}
.main-nav-primary:hover, .main-nav-group summary:hover, .main-nav-secondary:hover{
  background:var(--rd-surface-sunken) !important;
}
.main-nav-primary.nav-link-dashboard{
  background:var(--rd-surface-sunken) !important;
}
.main-nav-submenu a{
  color:var(--rd-text-muted) !important;
}
.main-nav-submenu a:hover{
  color:var(--rd-accent-strong) !important; background:var(--rd-accent-soft) !important;
}
.main-nav-submenu a.rd-active, .main-nav-primary.rd-active{
  color:#fff !important; background:var(--rd-accent) !important;
}
.sidebar-version-footnote{ color:var(--rd-text-muted) !important; }

/* ---------- Topnav (Desktop-Hauptnav, >=921px) ---------- */
.topnav-v234{
  background:var(--rd-surface) !important;
  border-bottom:1px solid var(--rd-border) !important;
}
.topnav-v234 .topnav-link{
  color:var(--rd-text) !important; font-weight:600; font-size:13.5px;
  border-radius:var(--rd-radius-sm);
}
.topnav-v234 .topnav-link:hover{ background:var(--rd-accent-soft) !important; color:var(--rd-accent-strong) !important; }
.topnav-v234 .topnav-item.rd-active .topnav-link{
  color:var(--rd-accent-strong) !important; background:var(--rd-accent-soft) !important;
}
.topnav-v234 .topnav-dropdown{
  background:var(--rd-surface) !important; border:1px solid var(--rd-border) !important;
  border-radius:var(--rd-radius-md) !important; box-shadow:0 12px 28px rgba(16,22,26,.12) !important;
}
.topnav-v234 .topnav-dropdown a{ color:var(--rd-text) !important; }
.topnav-v234 .topnav-dropdown a:hover{ background:var(--rd-accent-soft) !important; color:var(--rd-accent-strong) !important; }
.topnav-username{ color:var(--rd-text) !important; }
.topnav-hotel-name{ color:var(--rd-text-muted) !important; }
.topnav-hotel-select{ border-color:var(--rd-border-strong) !important; border-radius:var(--rd-radius-sm) !important; }
.topnav-logo{ border-color:var(--rd-border) !important; }
#logout-timer{ color:var(--rd-text-muted) !important; }

/* ---------- Mobile Topbar + Bottom-Nav ---------- */
/* Erst reines Schwarz, dann dunkles Teal - beides zu dunkel, das "+" im Logo
   ist selbst teal/cyan und ging darin unter. Jetzt weiss wie die Desktop-
   Topnav (.topnav-v234), das Logo hat dort den besten Kontrast. */
.mobile-topbar{
  background:var(--rd-surface) !important; color:var(--rd-text) !important;
  border-bottom:1px solid var(--rd-border) !important;
}
.mobile-topbar-user{ color:var(--rd-text) !important; }
.mobile-menu-button{ background:var(--rd-surface-sunken) !important; }
.mobile-menu-icon{ color:var(--rd-text) !important; }
.mobile-bottom-nav{
  background:var(--rd-surface) !important; border-top:1px solid var(--rd-border) !important;
}
.mobile-bottom-nav a{ color:var(--rd-text-muted) !important; }
.mobile-bottom-nav a.rd-active{ color:var(--rd-accent-strong) !important; }

/* ---------- Buttons ---------- */
.btn, button, button[type="submit"], button[type="button"], input[type="submit"]{
  border-radius:var(--rd-radius-sm) !important;
  font-family:var(--rd-font-body) !important; font-weight:600 !important;
}
.btn-primary, .primary-btn, button[type="submit"]:not(.btn-danger):not(.btn-secondary):not(.btn-success):not(.btn-neutral):not(.btn-gray):not(.muted-btn):not(.dp-btn){
  background:var(--rd-accent) !important; border-color:var(--rd-accent) !important; color:#fff !important;
}
.btn-primary:hover, .primary-btn:hover, button[type="submit"]:not(.btn-danger):not(.btn-secondary):not(.btn-success):not(.btn-neutral):not(.btn-gray):not(.muted-btn):not(.dp-btn):hover{
  background:var(--rd-accent-strong) !important; border-color:var(--rd-accent-strong) !important;
  transform:none !important; box-shadow:none !important;
}
.btn-secondary{ border-color:var(--rd-border-strong) !important; color:var(--rd-text) !important; background:transparent !important; }
.btn-secondary:hover{ border-color:var(--rd-accent) !important; color:var(--rd-accent-strong) !important; }
.btn-success{ background:var(--rd-green-600) !important; border-color:var(--rd-green-600) !important; }
.btn-danger{ background:var(--rd-red-600) !important; border-color:var(--rd-red-600) !important; }
.btn-neutral, .btn-gray{ background:var(--rd-surface-sunken) !important; color:var(--rd-text) !important; border-color:var(--rd-border) !important; }
/* Ein <a class="btn"> oder <button class="btn"> ganz ohne Modifier-Klasse
   faellt sonst durch alle Regeln oben durch und landet beim alten Blau-Cyan-
   Verlauf aus dem Legacy-CSS (button, .btn{background:linear-gradient(...)}).
   Bekommt hier denselben neutralen/outlined Look wie .btn-neutral. */
a.btn:not(.primary-btn):not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-neutral):not(.btn-gray):not(.ghost-btn):not(.dp-btn),
button.btn:not([type="submit"]):not(.primary-btn):not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-neutral):not(.btn-gray):not(.ghost-btn):not(.dp-btn){
  background:var(--rd-surface-sunken) !important; color:var(--rd-text) !important; border:1px solid var(--rd-border-strong) !important;
}
a.btn:not(.primary-btn):not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-neutral):not(.btn-gray):not(.ghost-btn):not(.dp-btn):hover,
button.btn:not([type="submit"]):not(.primary-btn):not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-neutral):not(.btn-gray):not(.ghost-btn):not(.dp-btn):hover{
  border-color:var(--rd-accent) !important; color:var(--rd-accent-strong) !important;
}
/* .muted-btn: bestehende Klasse fuer "Ablehnen/Nein"-Aktionen (Urlaub/Krank-
   Entscheidungen etc.) - musste explizit ausgeschlossen werden, sonst haette
   sie dieselbe Akzentfarbe wie "Ja/Genehmigen" bekommen und die wichtige
   Positiv/Negativ-Unterscheidung waere verloren gegangen. */
.muted-btn{ background:var(--rd-surface-sunken) !important; color:var(--rd-text) !important; border:1.5px solid var(--rd-border-strong) !important; }
.muted-btn:hover{ border-color:var(--rd-red-600) !important; color:var(--rd-red-600) !important; }

/* ---------- Formulare ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="search"], input[type="tel"],
input[type="time"], select, textarea{
  border:1.5px solid var(--rd-border-strong) !important; border-radius:var(--rd-radius-sm) !important;
  background:var(--rd-surface) !important; color:var(--rd-text) !important;
}
/* Safari rendert type="date"/"datetime-local"/"time" sonst mit dem nativen
   Bedienelement-Rahmen des Betriebssystems statt unserem Box-Modell zu
   folgen - das ignoriert Breite/Rand/Radius und laeuft je nach Kontext links
   oder rechts aus seiner Box heraus (siehe Bugreports "Urlaubsantrag
   stellen"). -webkit-appearance:none erzwingt normales CSS-Boxverhalten. */
input[type="date"], input[type="datetime-local"], input[type="time"]{
  -webkit-appearance:none !important; appearance:none !important;
  box-sizing:border-box !important; min-height:44px !important; padding:9px 12px !important;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--rd-accent) !important; outline:none !important;
  box-shadow:0 0 0 3px var(--rd-accent-soft) !important;
}
/* "Urlaubsantrag stellen" (my_requests.html): natives type="date" ignoriert
   in Safari haeufig jede Breiten-Beschraenkung als CSS-Grid-Item (bekannter
   WebKit-Quirk, minmax(0,1fr) allein reicht nicht) und laeuft rechts aus dem
   Bildschirm. Flex-Spaltenstapel statt Grid umgeht das zuverlaessig - in
   flex-direction:column betrifft die Auto-Mindestgroesse nur die Haupt-
   achse (Hoehe), nicht die Breite. */
@media (max-width:980px){
  .my-request-create-grid-v184{
    display:flex !important; flex-direction:column !important; min-width:0 !important;
  }
  .my-request-create-grid-v184 input,
  .my-request-create-grid-v184 select,
  .my-request-create-grid-v184 textarea,
  .my-request-create-grid-v184 button{
    min-width:0 !important; width:100% !important; flex:0 0 auto !important; box-sizing:border-box !important;
  }
}

/* ---------- Flash / Meldungen ---------- */
.flash, .flash-message, .alert{
  border-radius:var(--rd-radius-md) !important; font-weight:500 !important; border:1px solid transparent !important;
}
.flash.success, .flash-success, .alert-success{
  background:var(--rd-green-100) !important; color:var(--rd-green-600) !important;
}
.flash.error, .flash-error, .alert-error, .alert-danger{
  background:var(--rd-red-100) !important; color:var(--rd-red-600) !important;
}
.flash-warning, .alert-warning{
  background:var(--rd-amber-100) !important; color:var(--rd-amber-500) !important;
}

/* ---------- Tabellen (generisch) ---------- */
table{ border-color:var(--rd-border) !important; }
table th{
  background:var(--rd-surface-sunken) !important; color:var(--rd-text-muted) !important;
  text-transform:uppercase; font-size:11px !important; letter-spacing:0.04em;
}
table td{ border-color:var(--rd-border) !important; }

/* ---------- Karten / Panels (generisch, haeufige Klassennamen) ---------- */
.card, .flat-panel, .topbar, .panel, .box{
  border-radius:var(--rd-radius-lg) !important;
}

/* ---------- Statuspunkte, falls vorhanden ---------- */
.badge-success, .status-genehmigt{ background:var(--rd-green-100) !important; color:var(--rd-green-600) !important; }
.badge-warning, .status-offen{ background:var(--rd-amber-100) !important; color:var(--rd-amber-500) !important; }
.badge-danger, .status-abgelehnt{ background:var(--rd-red-100) !important; color:var(--rd-red-600) !important; }

/* ---------- Scrollbar (kosmetisch, Desktop) ---------- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--rd-border-strong); border-radius:8px; }

/* ==========================================================================
   PHASE 3 - Komponenten-Bibliothek (templates/components/*.html)
   ========================================================================== */

/* ---------- Button (components/button.html) ---------- */
.dp-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--rd-font-body); font-weight:600; font-size:14px;
  padding:10px 18px; border-radius:var(--rd-radius-sm); border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; line-height:1.2;
}
.dp-btn-sm{ padding:6px 12px; font-size:13px; }
.dp-btn-icon{ display:inline-flex; width:16px; height:16px; }
.dp-btn-icon svg{ width:16px; height:16px; }
.dp-btn-primary{ background:var(--rd-accent) !important; color:#fff !important; border-color:var(--rd-accent) !important; }
.dp-btn-primary:hover{ background:var(--rd-accent-strong) !important; border-color:var(--rd-accent-strong) !important; }
.dp-btn-secondary{ background:transparent !important; color:var(--rd-text) !important; border-color:var(--rd-border-strong) !important; }
.dp-btn-secondary:hover{ border-color:var(--rd-accent) !important; color:var(--rd-accent-strong) !important; }
.dp-btn-ghost{ background:transparent !important; color:var(--rd-accent-strong) !important; }
.dp-btn-ghost:hover{ background:var(--rd-accent-soft) !important; }
.dp-btn-danger{ background:var(--rd-red-600) !important; color:#fff !important; border-color:var(--rd-red-600) !important; }
.dp-btn-danger:hover{ filter:brightness(0.92); }
.dp-btn-success{ background:var(--rd-green-600) !important; color:#fff !important; border-color:var(--rd-green-600) !important; }

/* ---------- Badge (components/badge.html) ---------- */
.dp-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  padding:4px 11px; border-radius:999px; font-family:var(--rd-font-body);
}
.dp-badge::before{ content:""; width:6px; height:6px; border-radius:50%; }
.dp-badge-success{ background:var(--rd-green-100); color:var(--rd-green-600); }
.dp-badge-success::before{ background:var(--rd-green-600); }
.dp-badge-pending{ background:var(--rd-amber-100); color:var(--rd-amber-500); }
.dp-badge-pending::before{ background:var(--rd-amber-500); }
.dp-badge-danger{ background:var(--rd-red-100); color:var(--rd-red-600); }
.dp-badge-danger::before{ background:var(--rd-red-600); }
.dp-badge-neutral{ background:var(--rd-surface-sunken); color:var(--rd-text-muted); }
.dp-badge-neutral::before{ background:var(--rd-border-strong); }
.dp-badge-info{ background:var(--rd-accent-soft); color:var(--rd-accent-strong); }
.dp-badge-info::before{ background:var(--rd-accent); }

/* ---------- Karte (components/card.html) ---------- */
.dp-card{
  background:var(--rd-surface); border:1px solid var(--rd-border); border-radius:var(--rd-radius-lg);
  padding:var(--rd-radius-lg,16px); box-shadow:0 1px 2px rgba(16,22,26,.05);
}
.dp-card-title{ font-weight:700; font-size:15px; margin-bottom:10px; color:var(--rd-text); }
.dp-card-body{ color:var(--rd-text); font-size:14px; }

/* ---------- Formularfeld (components/form_field.html) ---------- */
.dp-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.dp-field label{ font-size:12.5px; font-weight:600; color:var(--rd-text-muted); }
.dp-field input, .dp-field select{
  font-family:var(--rd-font-body); font-size:14px; padding:9px 12px;
  border-radius:var(--rd-radius-sm); border:1.5px solid var(--rd-border-strong);
  background:var(--rd-surface); color:var(--rd-text);
}
.dp-field input:focus, .dp-field select:focus{
  border-color:var(--rd-accent); outline:none; box-shadow:0 0 0 3px var(--rd-accent-soft);
}
.dp-field-help{ font-size:12px; color:var(--rd-text-muted); }

/* ---------- Seitenkopf (components/page_header.html) ---------- */
.dp-page-header{ margin-bottom:20px; }
.dp-page-header h1{ font-size:1.5rem !important; }
.dp-page-subtitle{ color:var(--rd-text-muted); font-size:14px; margin-top:4px; }

/* ---------- Leerzustand (components/empty_state.html) ---------- */
.dp-empty-state{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  padding:48px 24px; color:var(--rd-text-muted);
}
.dp-empty-icon{ width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--rd-surface-sunken); margin-bottom:4px; }
.dp-empty-icon svg{ width:20px; height:20px; }
.dp-empty-title{ font-weight:600; color:var(--rd-text); font-size:15px; }
.dp-empty-text{ font-size:13.5px; max-width:40ch; }

/* ---------- Modal (components/modal.html) ---------- */
.dp-modal[hidden]{ display:none; }
.dp-modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; }
.dp-modal-backdrop{ position:absolute; inset:0; background:rgba(16,22,26,.45); }
.dp-modal-panel{
  position:relative; background:var(--rd-surface); border-radius:var(--rd-radius-lg);
  max-width:min(520px,92vw); width:100%; max-height:86vh; overflow:auto;
  box-shadow:0 24px 60px rgba(16,22,26,.35);
}
.dp-modal-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--rd-border); }
.dp-modal-header h3{ font-size:16px !important; }
.dp-modal-close{ background:none; border:none; cursor:pointer; color:var(--rd-text-muted); font-size:16px; }
.dp-modal-body{ padding:20px; }

/* ---------- Tabellen-Scroll-Wrapper (components/table.html) ---------- */
.dp-table-scroll{ overflow-x:auto; border-radius:var(--rd-radius-md); }
.dp-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.dp-table th{ text-align:left; background:var(--rd-surface-sunken); color:var(--rd-text-muted);
  font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding:9px 12px; }
.dp-table td{ padding:9px 12px; border-top:1px solid var(--rd-border); }

/* ---------- Flash-Meldungen, vereinheitlicht (components/flash.html) ---------- */
.dp-flash-stack{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.dp-flash{
  display:flex; align-items:flex-start; gap:10px; padding:12px 14px;
  border-radius:var(--rd-radius-md); font-size:14px; font-weight:500; line-height:1.4;
}
.dp-flash-icon{ display:flex; width:18px; height:18px; flex-shrink:0; margin-top:1px; }
.dp-flash-icon svg{ width:18px; height:18px; }
.dp-flash-success{ background:var(--rd-green-100); color:var(--rd-green-600); }
.dp-flash-danger{ background:var(--rd-red-100); color:var(--rd-red-600); }
.dp-flash-warning{ background:var(--rd-amber-100); color:var(--rd-amber-500); }
.dp-flash-info{ background:var(--rd-accent-soft); color:var(--rd-accent-strong); }

/* ---------- SocketIO-Toast optisch an dp-flash angeglichen ---------- */
.global-message-toast-v227{
  font-family:var(--rd-font-body) !important;
  background:var(--rd-surface) !important; color:var(--rd-text) !important;
  border:1px solid var(--rd-border) !important; border-left:4px solid var(--rd-accent) !important;
  border-radius:var(--rd-radius-md) !important; box-shadow:0 12px 28px rgba(16,22,26,.18) !important;
}
.global-message-toast-v227 a{ color:var(--rd-text) !important; }

/* ==========================================================================
   PHASE 4 - Dashboard
   ========================================================================== */

/* ---------- Begruessungs-Hero ---------- */
.dp-hero{
  background:var(--rd-surface); border:1px solid var(--rd-border); border-radius:var(--rd-radius-lg);
  padding:22px 24px; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.dp-hero-copy{ min-width:0; }
.dp-hero-badge{ margin-bottom:8px; }
.dp-hero h1{ font-size:1.55rem !important; margin:0 0 4px; }
.dp-hero p{ color:var(--rd-text-muted); font-size:13.5px; margin:0; max-width:52ch; }
.dp-hotel-strip{
  display:flex; align-items:center; gap:12px; background:var(--rd-surface-sunken);
  border:1px solid var(--rd-border); border-radius:var(--rd-radius-md); padding:10px 14px; flex-shrink:0;
}
.dp-hotel-strip img{ height:36px; width:auto; max-width:72px; object-fit:contain; border-radius:6px; flex-shrink:0; }
.dp-hotel-strip-label{ font-size:10.5px; color:var(--rd-text-muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.dp-hotel-strip-name{ font-weight:700; font-size:14px; color:var(--rd-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.dp-hotel-strip-city{ font-size:12px; color:var(--rd-text-muted); }

/* ---------- Stempeluhr-Widget ---------- */
.dp-timeclock{ background:var(--rd-surface); border:1px solid var(--rd-border); border-radius:var(--rd-radius-lg); overflow:hidden; margin-bottom:14px; }
.dp-timeclock-row{ display:flex; align-items:center; gap:12px; padding:12px 16px; }
.dp-timeclock-avatar{ width:40px; height:40px; border-radius:50%; flex-shrink:0; object-fit:cover; border:2px solid var(--rd-border); }
.dp-timeclock-avatar-fallback{
  width:40px; height:40px; border-radius:50%; flex-shrink:0; background:var(--rd-accent);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:#fff;
}
.dp-timeclock-status-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; background:var(--rd-border-strong); }
.dp-timeclock-status-dot.is-active{ background:var(--rd-green-600); }
.dp-timeclock-info{ min-width:0; }
.dp-timeclock-status{ font-weight:700; font-size:13px; color:var(--rd-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dp-timeclock-sub{ font-size:11px; color:var(--rd-text-muted); }
.dp-timeclock-history-btn{
  background:var(--rd-surface-sunken); border:1px solid var(--rd-border); border-radius:var(--rd-radius-sm);
  padding:6px 12px; font-size:11.5px; font-weight:600; color:var(--rd-text-muted); cursor:pointer;
  white-space:nowrap; flex-shrink:0; display:inline-flex; align-items:center; gap:6px;
}
.dp-timeclock-actions{ display:flex; gap:8px; padding:0 16px 14px; }
/* Jeder Button steckt in einem eigenen <form> - das ist das direkte Flex-Kind,
   nicht der Button selbst. flex:1 auf .dp-btn allein wirkungslos, dadurch
   blieben die Formulare schmal und clusterten links (siehe Bugreport).
   display:contents lässt die Buttons direkt am Flex des Elternelements teilnehmen. */
.dp-timeclock-actions form{ display:contents; }
.dp-timeclock-actions .dp-btn{ flex:1; justify-content:center; }
.dp-timeclock-actions .dp-btn[disabled]{ opacity:.55; cursor:not-allowed; }

/* Legacy-Modals (Stempeluhr) - eigenes JS toggelt style.display, siehe dashboard.html */
.dp-legacy-modal{ display:none; position:fixed; inset:0; z-index:1000; background:rgba(16,22,26,.5); align-items:center; justify-content:center; padding:20px; }
.dp-legacy-modal-panel{ background:var(--rd-surface); border-radius:var(--rd-radius-lg); padding:24px; max-width:400px; width:100%; box-shadow:0 20px 60px rgba(16,22,26,.35); }
.dp-legacy-modal-panel.slim{ padding:0; }
.dp-legacy-modal-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.dp-legacy-modal-header h3{ margin:0; font-size:15px !important; }
.dp-legacy-modal-close{ background:none; border:none; font-size:18px; cursor:pointer; color:var(--rd-text-muted); }
.dp-legacy-entry-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--rd-border); font-size:13.5px; }
.dp-legacy-entry-row span:first-child{ color:var(--rd-text); font-weight:500; }
.dp-legacy-entry-row span:last-child{ color:var(--rd-text-muted); font-variant-numeric:tabular-nums; }
.dp-confirm-icon{ font-size:2rem; margin-bottom:10px; text-align:center; color:var(--rd-accent); display:flex; justify-content:center; }
.dp-confirm-icon svg{ width:34px; height:34px; }
.dp-confirm-title{ font-weight:700; color:var(--rd-text); text-align:center; margin:0 0 6px; font-size:15px; }
.dp-confirm-text{ font-size:13px; color:var(--rd-text-muted); text-align:center; line-height:1.6; margin:0 0 18px; }
.dp-confirm-actions{ padding:0 24px 24px; display:flex; flex-direction:column; gap:9px; }

/* ---------- Stat-Kacheln ---------- */
.dp-stat-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.dp-stat-grid.cols-1{ grid-template-columns:1fr; }
.dp-stat-grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.dp-stat-grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
/* Bug: .cols-3 (Spezifitaet 0-2-0) stand ausserhalb der Media-Queries und
   schlug daher IMMER die responsiven Regeln unten (0-1-0), egal wie schmal
   der Bildschirm war - dadurch quetschten sich Log-Dateien/Daten & Updates
   auf Mobile in 3 viel zu schmale Spalten und der Text wurde abgeschnitten.
   Fix: passende Breakpoint-Regeln mit gleicher Spezifitaet fuer jede .cols-N
   Variante, dann gewinnt die spaeter stehende (responsive) Regel korrekt. */
@media (max-width:900px){
  .dp-stat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dp-stat-grid.cols-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .dp-stat-grid{ grid-template-columns:1fr; }
  .dp-stat-grid.cols-2, .dp-stat-grid.cols-3{ grid-template-columns:1fr; }
}

.dp-stat-tile{
  display:flex; align-items:flex-start; gap:12px; background:var(--rd-surface); border:1px solid var(--rd-border-strong);
  border-radius:var(--rd-radius-lg); padding:16px; text-decoration:none; color:inherit;
  box-shadow:0 1px 3px rgba(16,22,26,.07);
  transition:border-color .15s ease, box-shadow .15s ease;
}
a.dp-stat-tile:hover{ border-color:var(--rd-accent); box-shadow:0 4px 16px rgba(16,22,26,.1); }
.dp-stat-tile.wide{ align-items:center; }
.dp-stat-icon{
  width:38px; height:38px; border-radius:var(--rd-radius-md); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--rd-accent-soft); color:var(--rd-accent-strong);
}
.dp-stat-icon svg{ width:19px; height:19px; }
.dp-stat-icon.tone-amber{ background:var(--rd-amber-100); color:var(--rd-amber-500); }
.dp-stat-icon.tone-green{ background:var(--rd-green-100); color:var(--rd-green-600); }
.dp-stat-icon.tone-neutral{ background:var(--rd-surface-sunken); color:var(--rd-text-muted); }
.dp-stat-body{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.dp-stat-label{ display:block; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--rd-text-muted); }
.dp-stat-value{ display:block; font-family:var(--rd-font-mono); font-size:1.55rem; font-weight:600; color:var(--rd-text); line-height:1.15; font-variant-numeric:tabular-nums; }
.dp-stat-value.sm{ font-size:1.05rem; font-family:var(--rd-font-body); font-weight:700; line-height:1.3; }
.dp-stat-sub{ display:block; font-size:12px; color:var(--rd-text-muted); }

/* ---------- Schnellaktionen ---------- */
.dp-section-label{ font-size:12px; font-weight:700; color:var(--rd-text-muted); text-transform:uppercase; letter-spacing:.05em; margin:22px 0 10px; }
.dp-quick-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
@media (max-width:900px){ .dp-quick-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.dp-quick-action{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  background:var(--rd-surface); border:1px solid var(--rd-border-strong); border-radius:var(--rd-radius-lg);
  padding:16px 10px; text-decoration:none; color:var(--rd-text); font-size:13px; font-weight:600;
  box-shadow:0 1px 3px rgba(16,22,26,.07);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.dp-quick-action:hover{ border-color:var(--rd-accent); box-shadow:0 4px 16px rgba(16,22,26,.1); }
.dp-quick-icon{
  width:36px; height:36px; border-radius:50%; background:var(--rd-accent-soft); color:var(--rd-accent-strong);
  display:flex; align-items:center; justify-content:center;
}
.dp-quick-icon svg{ width:18px; height:18px; }

/* ==========================================================================
   PHASE 4 - Dienstplan (schedule.html)
   Additiv: bestehende Klassen restylen, Schicht-Typ-Farben (frueh/spaet/nacht/
   urlaub/krank/frei/homeoffice/buero/zwischendienst) bleiben UNVERAENDERT -
   das ist funktionale Farbcodierung, keine Markenfarbe.
   ========================================================================== */

/* ---------- Toolbar (Smart-Planung/PDF/Veroeffentlichen) ---------- */
.dp-toolbar-select{
  flex:1; min-width:110px; max-width:190px; border:1.5px solid var(--rd-border-strong) !important;
  border-radius:var(--rd-radius-sm) !important; padding:7px 10px; font-size:13.5px;
  background:var(--rd-surface) !important; color:var(--rd-text) !important; font-family:var(--rd-font-body) !important;
}
/* Auf Mobile wirkten die Buttons ungleich breit/wirr nebeneinander (Smart-
   Planung breit, PDF schmal, Veroeffentlicht dann allein in eigener Zeile
   durch den unsichtbaren Spacer-Div). Jetzt: alles sauber untereinander,
   gleich breit. .planning-row > div matcht NUR den Spacer-Div, da die
   Formulare (display:contents) selbst keine div-Boxen erzeugen. */
@media (max-width:640px){
  .planning-row{ flex-direction:column !important; align-items:stretch !important; }
  .planning-row .dp-toolbar-select{
    width:100% !important; max-width:none !important;
    flex:0 0 auto !important; height:auto !important;
  }
  .planning-row .dp-btn{ width:100% !important; justify-content:center !important; }
  .planning-row > div{ display:none !important; }
}

/* ---------- Wochen-Navigation ---------- */
.dp-week-nav{
  display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px;
  background:var(--rd-surface); border-radius:var(--rd-radius-md); border:1px solid var(--rd-border); margin-bottom:1rem;
}
.dp-week-nav-arrow{
  display:flex; align-items:center; justify-content:center; width:36px; height:36px; flex-shrink:0;
  border-radius:var(--rd-radius-sm); background:var(--rd-accent-soft); border:1px solid var(--rd-border);
  color:var(--rd-accent-strong); text-decoration:none;
}
.dp-week-nav-arrow svg{ width:18px; height:18px; }
.dp-week-nav-select{
  font-weight:700; font-size:13.5px; color:var(--rd-accent-strong) !important; border:1.5px solid var(--rd-border-strong) !important;
  border-radius:var(--rd-radius-sm) !important; padding:6px 10px; background:var(--rd-accent-soft) !important; cursor:pointer;
  max-width:100%; outline:none; font-family:var(--rd-font-body) !important;
}

/* ---------- Nicht-veroeffentlicht-Badge + Hinweis-Panel ---------- */
.schedule-publish-state-v30{
  display:inline-block; padding:8px 16px; border-radius:999px; font-weight:600; font-size:13px;
}
.schedule-publish-state-v30.is-published{ background:var(--rd-green-100); color:var(--rd-green-600); }
.schedule-publish-state-v30.is-draft{ background:var(--rd-amber-100); color:var(--rd-amber-500); }
.panel.glass-panel{
  background:var(--rd-surface) !important; border:1px solid var(--rd-border) !important;
  border-radius:var(--rd-radius-lg) !important; color:var(--rd-text) !important;
}

/* ---------- Mobile-Tabs (Mein Dienstplan / Gesamter Plan) ---------- */
.schedule-mobile-tabs-v30 button{
  background:var(--rd-surface) !important; border:1.5px solid var(--rd-border) !important; color:var(--rd-text) !important;
}
.schedule-mobile-tabs-v30 button.is-active{
  background:var(--rd-accent) !important; color:#fff !important; border-color:var(--rd-accent) !important;
}

/* ---------- Mobile Karten (Mein Dienstplan) ---------- */
.mobile-plan-card-v30, .mobile-hotel-card-v30{
  background:var(--rd-surface) !important; border:1px solid var(--rd-border) !important;
}
.status-chip-v30{
  background:var(--rd-surface-sunken) !important; border:1px solid var(--rd-border) !important; color:var(--rd-text) !important;
}
.status-chip-v30.shift{ border-left-color:var(--rd-green-600) !important; }
.status-chip-v30.wish{ border-left-color:var(--rd-accent) !important; }
.status-chip-v30.absence{ border-left-color:var(--rd-amber-500) !important; }
.status-chip-v30.muted{ color:var(--rd-text-muted) !important; }
.wish-open-btn-v30{
  background:var(--rd-accent-soft) !important; color:var(--rd-accent-strong) !important; border:1px solid var(--rd-border) !important;
  border-radius:var(--rd-radius-sm) !important; font-family:var(--rd-font-body) !important;
}
.wish-open-btn-v30.deadline-passed{ background:var(--rd-surface-sunken) !important; color:var(--rd-text-muted) !important; }
.mobile-shift-row{ color:var(--rd-text); }
.mobile-shift-name.absent{ color:var(--rd-text-muted); }

/* ---------- Desktop-Tabelle ---------- */
.desktop-schedule-table-v30 th, .desktop-schedule-table-v30 td{ border-color:var(--rd-border) !important; background:var(--rd-surface) !important; }
.desktop-schedule-table-v30 th{ background:var(--rd-surface-sunken) !important; color:var(--rd-text-muted) !important; font-weight:600; }
.day-head-v30{ font-family:var(--rd-font-body); }
.employee-cell-v30 strong{ color:var(--rd-text); }
/* Kurze Eintraege (Frei/Urlaub, kein Zeit-Untertitel) liessen bei fixer 118px-
   Mindesthoehe unten sichtbar Leerraum stehen - Zelle schrumpft jetzt naeher an
   den Inhalt und zentriert vertikal statt am Kopf zu kleben. */
.desktop-cell-v30{ min-height:84px !important; justify-content:center !important; }
/* nur generische Kartenzustaende (nicht die Schicht-Typ-Farbklassen frueh/spaet/... ) */
/* WICHTIG: kein !important auf background/border-color hier - das wuerde die
   spezifischeren Schicht-Typ-Klassen (.frueh/.spaet/.nacht/.urlaub/.krank/...
   weiter unten in style.css) ueberstimmen und alle Farbakzente plattmachen.
   Ohne !important gewinnt die hoehere Selektor-Spezifitaet von z.B.
   ".desktop-card-v30.frueh" ganz regulaer - Farben bleiben erhalten. */
/* Einheitliche Kachelhoehe: Karten mit Zeit-Zeile (Spaet 13:30-22:00, 2 Zeilen)
   waren sonst hoeher als welche ohne (Frei/Urlaub, 1 Zeile) - jetzt feste
   Mindesthoehe fuer beide + vertikal zentrierter Inhalt. */
.desktop-card-v30{
  background:var(--rd-surface); border-color:var(--rd-border); border-radius:var(--rd-radius-md) !important;
  min-height:76px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center;
}
.desktop-card-v30.wish{ background:var(--rd-accent-soft); border-left-color:var(--rd-accent); }
.desktop-card-v30.empty, .desktop-card-v30.muted{ background:var(--rd-surface-sunken); color:var(--rd-text-muted); }
.empty-shift-cell{
  border:1.5px dashed var(--rd-border-strong) !important; background:var(--rd-surface-sunken) !important; border-radius:var(--rd-radius-sm) !important;
}
.empty-shift-cell:hover{ border-color:var(--rd-accent) !important; background:var(--rd-accent-soft) !important; }
.empty-shift-cell:hover::after{ color:var(--rd-accent-strong) !important; font-family:var(--rd-font-body) !important; }

/* ---------- Bearbeiten/Loeschen Mini-Formulare ---------- */
.desktop-edit-v30 summary{ background:var(--rd-amber-500) !important; border-radius:var(--rd-radius-sm) !important; }
.mini-form-v30 select, .mini-form-v30 input[type="time"]{
  border:1.5px solid var(--rd-border-strong) !important; border-radius:var(--rd-radius-sm) !important;
  background:var(--rd-surface) !important; color:var(--rd-text) !important;
}
.mini-form-v30 button[type="submit"]{
  background:var(--rd-accent) !important; border-radius:var(--rd-radius-sm) !important; font-family:var(--rd-font-body) !important;
}

/* ---------- Wunsch-Modal (Bottom-Sheet) ---------- */
#wish-modal > div{ background:var(--rd-surface) !important; }
#wish-modal-title{ color:var(--rd-text) !important; }
#wish-wunschfrei, #wish-frueh, #wish-spaet, #wish-nacht{
  border-color:var(--rd-border) !important; background:var(--rd-surface-sunken) !important;
}
#wish-note{
  border:1.5px solid var(--rd-border-strong) !important; background:var(--rd-surface) !important; color:var(--rd-text) !important;
}
#wish-save-btn{ background:var(--rd-accent) !important; font-family:var(--rd-font-body) !important; }
#wish-delete-btn{ background:var(--rd-red-100) !important; color:var(--rd-red-600) !important; border-color:var(--rd-red-600) !important; }

/* ==========================================================================
   PHASE 4 - Arbeitszeit (working_time_combined.html)
   Grosser Teil des Chromes kommt aus dem seiteneigenen <style>-Block, den ich
   dort direkt auf Tokens umgestellt habe. Hier nur das Korrektur-Modal
   (eigene IDs, Button ohne type="submit" -> nicht von der globalen
   Button-Regel erfasst).
   ========================================================================== */
#correct-modal > div{ background:var(--rd-surface) !important; }
#correct-title{ color:var(--rd-text) !important; }
#c-save-btn{ background:var(--rd-accent) !important; font-family:var(--rd-font-body) !important; }
#bulk-confirm-bar{ background:var(--rd-green-100) !important; border-color:var(--rd-green-600) !important; }
#bulk-count{ color:var(--rd-green-600) !important; }

/* ==========================================================================
   PHASE 4 - Mitarbeiter (employees.html)
   Seite nutzt ausschliesslich globale Klassen (kein eigenes <style>, kein JS
   ausser nativem <details>) - hier nur Farb-/Rahmen-Retheme der bestehenden
   Klassen, keine Strukturaenderung noetig.
   ========================================================================== */
.summary-card, .section-summary-bar-v172 .summary-card{
  background:var(--rd-surface) !important; border:1px solid var(--rd-border) !important;
  box-shadow:0 1px 2px rgba(16,22,26,.05) !important; border-radius:var(--rd-radius-lg) !important;
}
.summary-card span, .section-summary-bar-v172 .summary-card span{ color:var(--rd-text-muted) !important; }
.summary-card strong, .section-summary-bar-v172 .summary-card strong{
  font-family:var(--rd-font-mono) !important; color:var(--rd-text) !important; font-variant-numeric:tabular-nums;
}

.status-pill{ font-family:var(--rd-font-body) !important; border-radius:999px !important; }
.status-pill.active{ background:var(--rd-green-100) !important; color:var(--rd-green-600) !important; }
.status-pill.inactive{ background:var(--rd-surface-sunken) !important; color:var(--rd-text-muted) !important; }
.status-pill.pending{ background:var(--rd-amber-100) !important; color:var(--rd-amber-500) !important; }

.employee-edit-card, .employee-edit-card-v172{
  background:var(--rd-surface) !important; border:1px solid var(--rd-border) !important;
  border-radius:var(--rd-radius-lg) !important;
}
.employee-edit-card.inactive-card{ opacity:.85; }
.employee-edit-card > summary strong, .employee-edit-card-v172 summary strong{ color:var(--rd-text) !important; }

.hotel-section-title{
  font-family:var(--rd-font-body) !important; color:var(--rd-accent-strong) !important;
  font-weight:700 !important; font-size:12.5px !important; text-transform:uppercase; letter-spacing:.04em;
}
.multi-select-wide{ border:1.5px solid var(--rd-border-strong) !important; border-radius:var(--rd-radius-sm) !important; background:var(--rd-surface) !important; }
.multi-select-wide option{ color:var(--rd-text); }

.ghost-btn{ background:var(--rd-accent-soft) !important; color:var(--rd-accent-strong) !important; border-radius:var(--rd-radius-sm) !important; font-family:var(--rd-font-body) !important; }
.ghost-btn:hover{ background:var(--rd-accent) !important; color:#fff !important; }
.btn.small, .small-btn{ background:var(--rd-surface-sunken) !important; color:var(--rd-text) !important; border:1px solid var(--rd-border-strong) !important; border-radius:var(--rd-radius-sm) !important; font-family:var(--rd-font-body) !important; }
.btn.small:hover, .small-btn:hover{ border-color:var(--rd-accent) !important; color:var(--rd-accent-strong) !important; }

/* ---------- employee_detail.html: Personalakte-Karten + Danger-Button ---------- */
.personalakte-recent-item-v222, .personalakte-doc-item-v223{
  background:var(--rd-surface) !important; border:1px solid var(--rd-border) !important;
}
.danger-btn{ background:var(--rd-red-600) !important; color:#fff !important; border-radius:var(--rd-radius-sm) !important; font-family:var(--rd-font-body) !important; }
.danger-btn:hover{ background:var(--rd-red-600) !important; filter:brightness(0.9); }

/* ==========================================================================
   PHASE 4 - Kommunikation (communication_hub.html, new_chat.html,
   group_message.html, group_inbox.html). SocketIO-JS/IDs unangetastet,
   nur bestehende Klassen retthemt.
   ========================================================================== */
.communication-contact-card-v30{ background:var(--rd-surface) !important; border:1px solid var(--rd-border) !important; }
.communication-contact-card-v30.is-active{ border-color:var(--rd-accent) !important; background:var(--rd-accent-soft) !important; }
.chat-card-top-v30 strong{ color:var(--rd-text) !important; }
.chat-preview-v30{ color:var(--rd-text-muted) !important; }
.chat-badge-v30{ background:var(--rd-accent) !important; font-family:var(--rd-font-body) !important; }
.communication-thread-head-v30{ border-bottom-color:var(--rd-border) !important; }
.message-bubble-v30{ background:var(--rd-surface) !important; border:1px solid var(--rd-border) !important; }
.message-bubble-v30.is-own{ background:var(--rd-green-100) !important; border-color:var(--rd-green-100) !important; }
.message-meta-v30{ color:var(--rd-text-muted) !important; }
.communication-empty-v30{ color:var(--rd-text-muted) !important; }
.chat-toast-v30{ background:var(--rd-ink-950,#10161A) !important; }
.chat-delete-btn:hover{ background:var(--rd-red-100) !important; }
.communication-compose-v30 textarea{
  border:1.5px solid var(--rd-border-strong) !important; border-radius:var(--rd-radius-sm) !important;
  background:var(--rd-surface) !important; color:var(--rd-text) !important; font-family:var(--rd-font-body) !important;
}
.communication-compose-v30 button{
  background:var(--rd-accent) !important; color:#fff !important; border:none !important;
  border-radius:var(--rd-radius-sm) !important; font-weight:600 !important; padding:0 20px !important;
}
.communication-compose-v30 button:hover{ background:var(--rd-accent-strong) !important; }

/* Tab-Buttons (Nachrichten/Benachrichtigungen) + Unread-Badges - inline im
   Template gesteuert, hier per ID/Klasse nicht erreichbar -> siehe Template-Edit. */