@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ─── CSS Variables ──────────────────────────────────────────────────────
   Token values follow two concrete references Arthur supplied (2026-09):
   light mode = shadcn/ui light spec (achromatic canvas/paper/ink stack,
   large-radius cards+pills); dark mode = Linear's dark spec (near-black
   void/carbon/obsidian surfaces, hairline borders, tight tracking) with
   Linear's own acid-lime CTA swapped for our existing blue — cloning
   another product's exact signature accent color would read as literally
   copying their brand, not "in that style". Structure (surfaces, hairline
   borders, radius scale, restrained color) is what's being adopted, not
   the literal lime hex. Both spec sheets list Inter as their own named
   substitute font, so the existing Inter import stays as-is.

   THIS IS THE CANONICAL COPY. Portal (templates/portal_me.html, own
   <style> block, --bg2/--muted/--faint/--border2 naming) and TV
   (tv.html, own <style> block, --card/--faint(=track bg, NOT muted
   text!)/--muted2 naming) are separate self-contained pages with no
   shared stylesheet — they duplicate these same hex values by hand
   under different variable names. If you change a value here, also
   update it in those two files or the three surfaces will silently
   drift apart. Checked in sync 2026-09-08. ─────────────────────────── */
:root {
  /* Light — shadcn/ui: canvas #f5f5f5 → surface-alt #fafafa → paper #fff */
  --bg:          #f5f5f5;
  --bg-2:        #ffffff;
  --bg-3:        #ececec;
  --text:        #0a0a0a;
  --text-muted:  #737373;
  --text-faint:  #a3a3a3;
  --border:      #e5e5e5;
  --border-2:    #d4d4d4;
  --accent:      #4145c4;
  --accent-rgb:  65,69,196;
  --accent-text: #ffffff;
  --navbar-bg:   #090b10;
  --sidebar-bg:  #0c0e14;
  --navbar-text: #e8edf5;
  --navbar-muted:#6878a0;
  --input-bg:    #f5f5f5;
  --card-bg:     #ffffff;
  --card-hover:  #fafafa;
  --row-alt:     #fafafa;
  --surface:     var(--card-bg);
  --surface2:    var(--bg-3);
  --shadow:      0 0 0 1px rgba(23,23,23,0.05), 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  --shadow-md:   0 0 0 1px rgba(23,23,23,0.05), 0 12px 28px rgba(23,23,23,0.12);
  /* shadcn's own spec calls for 24px/18px - dialed to 20px/16px here since a
     dense HR data table full of 24px-radius rows reads bubbly rather than
     "considered"; still clearly the same large-radius language, just tuned
     for a data-heavy admin tool instead of a marketing dashboard. */
  --radius-card: 20px;
  --radius-btn:  16px;
  --radius-pill: 9999px;
  --radius-input:16px;
  --radius-sm:   6px;
  --radius:      var(--radius-input);
  --radius-lg:   var(--radius-card);
  /* Status colors — one definition, referenced everywhere via var(--x) or
     rgba(var(--x-rgb), α). Previously ~55 rules across this file hardcoded
     4 DIFFERENT literal greens/reds/yellows/blues that never matched these
     variables (e.g. rgba(46,204,113,…) alongside --green:#16a34a) — theme
     tweaks silently didn't propagate to most of the app. Fixed 2026-09. */
  --green:       #0f8f3d;
  --green-rgb:   15,143,61;
  --red:         #d1372f;
  --red-rgb:     209,55,47;
  --yellow:      #b5720a;
  --yellow-rgb:  181,114,10;
  --blue:        var(--accent);
  --blue-rgb:    var(--accent-rgb);
}

[data-theme="dark"] {
  /* Dark — Linear: void #08090a → carbon #0f1011 → obsidian #161718 */
  --bg:          #08090a;
  --bg-2:        #0f1011;
  --bg-3:        #161718;
  --text:        #ffffff;
  --text-muted:  #8a8f98;
  --text-faint:  #62666d;
  --border:      #23252a;
  --border-2:    #383b3f;
  --accent:      #5563e0;
  --accent-rgb:  85,99,224;
  --accent-text: #ffffff;
  --navbar-bg:   #08090a;
  --sidebar-bg:  #0c0d0f;
  --navbar-text: #e8edf5;
  --navbar-muted:#62666d;
  --input-bg:    #131415;
  --card-bg:     #0f1011;
  --card-hover:  #161718;
  --row-alt:     #0c0d0e;
  --surface:     var(--card-bg);
  --surface2:    var(--bg-3);
  --shadow:      0 0 0 1px rgba(255,255,255,0.06), 0 2px 4px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 32px rgba(8,9,10,0.6);
  /* Linear's own scale: cards 12px, buttons/inputs 6px, badges 4px, pills full.
     Dialed to 8px for cards (2026-09 Redesign-Schritt 2) — Arthurs Referenz-
     Spec nennt explizit "tight radii (5-8px)", 12px liest sich dagegen einen
     Tick zu weich für eine dichte, Linear-artige Flächen-Sprache. */
  --radius-card: 8px;
  --radius-btn:  6px;
  --radius-pill: 9999px;
  --radius-input:6px;
  --radius-sm:   2px;
  --radius:      var(--radius-input);
  --radius-lg:   var(--radius-card);
  --green:       #3bc45c;
  --green-rgb:   59,196,92;
  --red:         #e66767;
  --red-rgb:     230,103,103;
  --yellow:      #d9a53e;
  --yellow-rgb:  217,165,62;
  --blue:        var(--accent);
  --blue-rgb:    var(--accent-rgb);
}

/* ─── Reset & Base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.85em;
  background: var(--bg-3);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ─── Navbar ────────────────────────────────────────────────────────────── */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--navbar-bg);
  height: 52px;
  padding: 0 20px;
  border-radius: 0;
  margin: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.navbar-logo {
  height: 22px;
  border-radius: 3px;
  filter: brightness(10);
}

.navbar-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navbar-text);
  letter-spacing: -0.01em;
  opacity: 0.9;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--navbar-muted);
}

.navbar-icon { color: var(--navbar-muted); }
.navbar-date { color: var(--navbar-muted); }

.sep { color: #1e2538; }

.nav-btn {
  background: none;
  border: none;
  color: var(--navbar-muted);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.15s, color 0.15s;
}

.nav-btn:hover {
  background: rgba(255,255,255,0.1);
  color: var(--navbar-text);
}

.nav-btn-icon { font-size: 1rem; padding: 4px 6px; }

/* ─── App Shell (Sidebar + Content) ────────────────────────────────────── */
.app-shell {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - 52px);
}

.sidebar {
  position: sticky;
  top: 52px;
  height: calc(100vh - 52px);
  width: 220px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid #111827;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
  transition: width 0.2s ease;
}
.sidebar::-webkit-scrollbar { display: none; }

/* Workspace-Kopf — gibt der Sidebar eine eigene Identität statt direkt mit
   dem Einklapp-Button zu starten (Referenz: Linear-Style Workspace-Switcher). */
.sidebar-workspace {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 14px 13px 15px;
  border-bottom: 1px solid #111827;
}
.sidebar-workspace-glyph {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 7px;
  background: rgba(var(--accent-rgb),0.16);
  color: var(--accent);
  font-size: 0.66rem; font-weight: 700; letter-spacing: -0.02em;
}
.sidebar-workspace-name {
  font-size: 0.85rem; font-weight: 600; color: var(--navbar-text);
  letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity 0.15s, width 0.2s;
}
.sidebar-collapsed .sidebar-workspace-name { opacity: 0; width: 0; }
.sidebar-collapsed .sidebar-workspace { justify-content: center; padding: 14px 0; }

.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid #111827;
  cursor: pointer;
  color: #3a4e65;
  font-size: 0.7rem;
  width: 100%;
  transition: color 0.15s, background 0.15s;
}
.sidebar-toggle:hover { color: #6878a0; background: rgba(255,255,255,0.03); }

.sidebar-nav {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 6px 0;
}

.sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 18px;
}
.sidebar-group:last-of-type { margin-bottom: 0; }

.sidebar-group-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #3a4560;
  padding: 4px 16px 6px 13px;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.15s, height 0.15s;
}
.sidebar-collapsed .sidebar-group-label { opacity: 0; height: 0; padding-top: 0; padding-bottom: 0; }

.sidebar-group-bottom {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 10px;
  border-top: 1px solid #111827;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px 11px 13px;
  width: 100%;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  color: #4d617a;
  font-size: 0.88rem;
  font-weight: 500;
  font-family: inherit;
  text-align: left;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
  white-space: nowrap;
  margin-bottom: 0;
  border-bottom: none;
  border-radius: 0;
  overflow: hidden;
}

.sidebar-nav-item:hover {
  color: #a0b4cc;
  background: rgba(255,255,255,0.04);
}

.sidebar-nav-item.active {
  color: #ffffff;
  background: rgba(var(--accent-rgb),0.16);
  border-left-color: var(--accent);
  border-left-width: 3px;
  font-weight: 600;
}

.sidebar-nav-item.active .sidebar-icon { color: var(--accent); }

.sidebar-icon {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  font-size: 0.9rem;
  transition: color 0.12s;
}

.sidebar-label {
  letter-spacing: -0.01em;
  transition: opacity 0.15s, width 0.2s;
  overflow: hidden;
}

/* ─── Collapsed state ───────────────────────────────────────────────────── */
.sidebar-collapsed { width: 52px; overflow: visible; }
.sidebar-collapsed .sidebar-label { opacity: 0; width: 0; pointer-events: none; }
.sidebar-collapsed .sidebar-nav-item { padding: 11px; justify-content: center; gap: 0; }
.sidebar-collapsed .sidebar-toggle { justify-content: center; padding: 10px; }


.main-area {
  flex: 1;
  min-width: 0;
}

/* ─── Tab Bar (legacy, hidden) ───────────────────────────────────────────── */
.tab-bar { display: none; }

.tab-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* Sidebar items override ALL tab-btn active/hover styles */
.sidebar-nav-item {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}
.sidebar-nav-item.active {
  border-bottom: none !important;
  border-left: 3px solid var(--accent) !important;
  color: #ffffff !important;
  background: rgba(var(--accent-rgb),0.16) !important;
  font-weight: 600;
}
.sidebar-nav-item:not(.active) {
  border-left: 3px solid transparent;
  color: #4d617a;
}
.sidebar-nav-item:hover:not(.active) {
  color: #a0b4cc !important;
  background: rgba(255,255,255,0.04) !important;
}

/* ─── Tab Content ───────────────────────────────────────────────────────── */
.tab-content {
  margin: 0 auto;
  padding: 0 24px 80px;
  max-width: 1560px;
}

/* Responsive: top strip at small width */
/* ─── Mobile-Navigation: Slide-in-Drawer statt horizontalem Scrollen ────────
   12 Nav-Items sind zu viele für eine feste Bottom-Bar und horizontales
   Scrollen fühlt sich auf Mobile nicht gut an (Feedback Arthur, 2026-09-09).
   Stattdessen: Hamburger-Button in der Navbar öffnet die normale (vertikale)
   Sidebar als Off-Canvas-Drawer von links, mit Backdrop zum Schließen. */
.mobile-menu-btn { display: none; }
.mobile-nav-backdrop { display: none; }

@media (max-width: 780px) {
  /* Antippbare Fläche 40px statt 34px (näher an den 44px WCAG-Richtwert für
     Touch-Targets) — Icon selbst bleibt optisch gleich groß. */
  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: none;
    border: none;
    color: #cdd6e4;
    font-size: 1.05rem;
    cursor: pointer;
    border-radius: 8px;
    margin-right: 2px;
    margin-left: -4px;
    transition: background 0.12s, color 0.12s;
  }
  .mobile-menu-btn:hover,
  .mobile-menu-btn:active { background: rgba(255,255,255,0.08); color: #fff; }

  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(1px);
    z-index: 299;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }
  .mobile-nav-backdrop.show { display: block; opacity: 1; pointer-events: auto; }

  .app-shell { flex-direction: column; }
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    height: 100vh;
    width: 80vw;
    max-width: 300px;
    flex-direction: column;
    border-right: 1px solid #111827;
    border-bottom: none;
    box-shadow: 8px 0 32px rgba(0,0,0,0.5);
    z-index: 300;
    transform: translateX(-100%);
    transition: transform 0.24s cubic-bezier(.32,.72,0,1);
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: env(safe-area-inset-top, 0px);
  }
  .sidebar.mobile-nav-open { transform: translateX(0); }

  /* Der Einklapp-Button ist ein reines Desktop-Feature (spart horizontalen
     Platz neben dem Content) — im Drawer ist die Sidebar eh schon schmal
     genug, der Button ergibt hier keinen Sinn. */
  .sidebar-toggle { display: none; }

  .sidebar-workspace { padding: 16px 16px 14px 17px; }
  .sidebar-workspace-glyph { width: 26px; height: 26px; font-size: 0.7rem; }
  .sidebar-workspace-name { font-size: 0.92rem; }

  .sidebar-nav { flex-direction: column; padding: 8px 8px; gap: 0; }
  .sidebar-group { flex-direction: column; gap: 3px; margin-bottom: 18px; }
  .sidebar-group-bottom { margin-top: auto; padding-top: 10px; border-top: 1px solid #111827; border-left: none; margin-left: 0; }
  .sidebar-group-label { display: block; padding-left: 9px; }
  .sidebar-nav-item {
    padding: 13px 12px;
    border-left: none;
    border-bottom: none;
    margin-bottom: 0;
    flex-direction: row;
    gap: 13px;
    justify-content: flex-start;
    border-radius: 10px;
    min-height: 46px;
  }
  .sidebar-nav-item:active { background: rgba(255,255,255,0.05); }
  .sidebar-nav-item.active {
    border-left: none;
    border-bottom: none;
    background: rgba(var(--accent-rgb),0.13);
  }
  .sidebar-label { display: inline; font-size: 0.9rem; letter-spacing: -0.01em; opacity: 1 !important; width: auto !important; }
  .sidebar-icon { width: 18px; font-size: 0.95rem; }

  /* Ein evtl. von einer früheren Desktop-Session noch aktives .sidebar-collapsed
     (Zustand kommt unconditional aus localStorage, siehe base.html) darf auf
     Mobile nichts mehr bewirken. */
  .sidebar.sidebar-collapsed { width: 80vw; max-width: 300px; }
  .sidebar-collapsed .sidebar-nav-item { padding: 13px 12px !important; justify-content: flex-start; gap: 13px !important; }
  .sidebar-collapsed .sidebar-group-label { display: block; }
  .sidebar-collapsed .sidebar-label { display: inline !important; }

  /* ── Touch-Targets: kleine Aktions-Buttons sind auf Desktop bewusst dicht
     (Datentabellen), auf Mobile brauchen sie mehr Fläche zum Antippen. ── */
  .btn-sm { padding: 8px 11px; min-height: 36px; }
  .mc-actions .btn-sm,
  .actions-menu-item { min-height: 40px; }
}

.tab-section { padding-top: 24px; }

.loading-state {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  padding: 40px 0;
  font-size: 0.9rem;
}

@keyframes skel-shimmer {
  0%   { background-position: -400px 0 }
  100% { background-position: 400px 0 }
}
.skel {
  background: linear-gradient(90deg, var(--surface2) 25%, rgba(255,255,255,.06) 50%, var(--surface2) 75%);
  background-size: 800px 100%;
  animation: skel-shimmer 1.4s infinite linear;
}

.divider {
  height: 1px;
  background: var(--border);
  margin: 26px 0;
}

.section-header { margin-bottom: 16px; }
.section-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding-left: 10px;
  border-left: 2px solid var(--accent);
  line-height: 1.6;
}
.section-desc { font-size: 0.82rem; color: var(--text-muted); }

/* ─── Page title (top of each tab, one per page) ─────────────────────────
   Distinct from .section-title above, which stays the small uppercase
   label used for sub-sections within a page (Soll/Ist-Tabelle, Vorschau,
   etc.) - those keep working exactly as before. This is the actual "what
   page am I on" heading, previously sharing the same tiny 0.7rem uppercase
   style as every sub-label, which read as flat/templated (every heading
   on the page shouting at the same low volume). */
.page-title {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 3px;
  line-height: 1.25;
}
.page-title i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; flex-shrink: 0;
  border-radius: 8px;
  background: rgba(var(--accent-rgb),0.14);
  color: var(--accent);
  font-size: 0.62em;
}
.page-subtitle { font-size: 0.86rem; color: var(--text-muted); }

/* ─── Filter Row ────────────────────────────────────────────────────────── */
.filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ─── View-Toolbar: Segmented-Control statt <select>-Dropdown ─────────────
   Ersetzt die reine Formular-Optik (Zeitraum als <select>) durch eine echte
   Tab-Leiste — Layoutveränderung, nicht nur Farbe/Radius wie die vorherigen
   Redesign-Schritte. */
.view-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.segmented-control {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 3px;
  flex-wrap: wrap;
}
.segmented-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.segmented-btn:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.segmented-btn.active {
  background: var(--card-bg);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--border-2);
}
.view-toolbar-dates { display: flex; align-items: center; gap: 8px; }

.filter-select, .filter-date {
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.15s;
}

.filter-select:focus, .filter-date:focus {
  border-color: var(--accent);
}

.filter-sep { color: var(--text-muted); font-size: 0.9rem; }

/* ─── Metric Cards ──────────────────────────────────────────────────────── */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  margin-bottom: 4px;
}

@media (max-width: 1200px) { .metrics-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .metrics-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .metrics-grid { grid-template-columns: repeat(2, 1fr); } }

.metric-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  transition: border-color 0.15s, background 0.15s;
}

/* Hero variant: the one number that matters most on the page gets more
   visual weight than the 6 metrics around it, instead of 7 cards shouting
   at the same volume. Spans 2 of the grid's 7 columns. */
.metric-card-hero {
  grid-column: span 2;
  background: linear-gradient(160deg, rgba(var(--accent-rgb),0.10), var(--card-bg) 60%);
  border-color: rgba(var(--accent-rgb),0.35);
}
@media (max-width: 700px) { .metric-card-hero { grid-column: span 2; } }
.metric-hero-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.metric-hero-value { font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.metric-hero-of { font-size: 1rem; color: var(--text-muted); font-weight: 600; }
.metric-hero-bar-wrap { height: 6px; background: var(--bg-3); border-radius: 3px; margin-top: 10px; overflow: hidden; }
.metric-hero-bar { height: 100%; border-radius: 3px; background: var(--accent); transition: width 0.3s; }

.metric-card.clickable {
  cursor: pointer;
}

.metric-card.clickable:hover {
  background: var(--card-hover);
  border-color: var(--border-2);
}

.metric-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.metric-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.metric-warn { color: var(--red); }

.metric-sub {
  font-size: 0.75rem;
  color: var(--text-faint);
  margin-top: 4px;
  min-height: 1em;
}

/* ─── Charts ────────────────────────────────────────────────────────────── */
.chart-container { width: 100%; min-height: 300px; }

.charts-row {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.chart-box {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 14px 16px;
}

.chart-box-wide   { flex: 1 1 0; min-width: 0; }
.chart-box-narrow { flex: 0 0 280px; }

@media (max-width: 900px) {
  .charts-row { flex-direction: column; }
  .chart-box-narrow { flex: none; width: 100%; }
}

.chart-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

/* ─── Table header row ──────────────────────────────────────────────────── */
.table-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

/* ─── Gruppierte Zeilen-Liste (ersetzt die flache Tabelle für Aktive
   Mitarbeiter) — dichte Zeilen, Hairline-Trenner statt Tabellenraster,
   nach Auslastung gruppiert mit einklappbaren Gruppenköpfen. ─────────── */
.emp-list { display: flex; flex-direction: column; gap: 14px; }
.emp-group { border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.emp-group-header {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: var(--bg-3); border: none; padding: 9px 14px;
  cursor: pointer; text-align: left; font: inherit;
}
.emp-group-header:hover { background: var(--card-hover); }
.emp-group-chevron { font-size: 0.7rem; color: var(--text-faint); transition: transform 0.15s; width: 10px; }
.emp-group.collapsed .emp-group-chevron { transform: rotate(-90deg); }
.emp-group.collapsed .emp-group-rows { display: none; }
.emp-group-label { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.emp-group-count {
  margin-left: auto; font-size: 0.74rem; color: var(--text-faint);
  background: var(--bg); border-radius: 999px; padding: 1px 8px;
}
.emp-group-rows { display: flex; flex-direction: column; }
.emp-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px; min-height: 44px;
  border-top: 1px solid var(--border);
  transition: background 0.1s;
}
.emp-row:hover { background: var(--row-alt); }
.emp-row-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.emp-row-name {
  display: flex; align-items: center; gap: 8px;
  min-width: 160px; color: inherit; text-decoration: none;
}
.emp-row-name:hover strong { color: var(--accent); }
.emp-row-stats { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.emp-row-stat { display: flex; flex-direction: column; align-items: flex-end; min-width: 56px; line-height: 1.25; }
.emp-row-stat-val { font-size: 0.85rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.emp-row-stat-label { font-size: 0.65rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; }
.emp-row-pct { min-width: 40px; text-align: right; font-size: 0.9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.emp-row-stat-nonbill { display: none; }
@media (min-width: 900px) { .emp-row-stat-nonbill { display: flex; } }

/* ─── Leaderboard: gleiche Zeilen-Sprache, aber Rang statt Status-Punkt ── */
.emp-row-rank { width: 26px; flex-shrink: 0; text-align: center; font-size: 0.95rem; font-weight: 700; color: var(--text-faint); }
.emp-row-badges { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.emp-row.emp-row-active { background: var(--card-hover); }
.emp-detail-panel { border-top: 1px solid var(--border); background: var(--bg-2); }
.emp-detail-panel > div { padding: 12px 16px 14px 52px; }
.table-title {
  font-size: 0.88rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
}

/* ─── Inactive details ──────────────────────────────────────────────────── */
.inactive-details {
  margin-top: 12px;
}
.inactive-details summary {
  font-size: 0.82rem;
  color: var(--text-faint);
  cursor: pointer;
  padding: 6px 0;
  user-select: none;
}
.inactive-details summary:hover { color: var(--text-muted); }
.data-table .row-muted td { color: var(--text-faint); }

/* ─── Data Table ────────────────────────────────────────────────────────── */
.table-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.data-table th {
  text-align: left;
  /* War 600/uppercase/0.04em letter-spacing - schreit auf jeder Tabelle im
     ganzen Dashboard "altes Admin-Panel-Template". Beide Referenzen
     (shadcn/Linear) halten Spaltenköpfe bewusst ruhig: normale Groß-/
     Kleinschreibung, mittleres statt fettes Gewicht, kein Tracking. */
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  /* War position:sticky mit top:52px (unter der Navbar). Seit die Navbar
     selbst sticky ist, kollidiert das: der sticky th-Offset wurde relativ
     zu seiner statischen Position berechnet statt zum Viewport, dadurch
     verschob sich der Header nach unten und überlappte Zeile 1 der Tabelle
     (live von Arthur entdeckt: "man sieht #1 nicht mehr"). Statisch ist
     robuster als ein zweites verschachteltes Sticky-Element zu debuggen.
     background war fix var(--navbar-bg) (immer dunkel, auch im Light Mode) -
     ergab einen schwarzen Balken quer über einer sonst hellen Seite. Jetzt
     themekorrekt. */
  background: var(--bg-3);
  z-index: 2;
}

.data-table th.num, .data-table td.num { text-align: right; }
.sortable-th { cursor: pointer; user-select: none; }
.sortable-th:hover { color: var(--text); }
.sortable-th i { font-size: 0.7rem; margin-left: 3px; color: var(--text-faint); }

.data-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}

.data-table tbody tr:nth-child(even) td { background: var(--row-alt); }
.data-table tbody tr:hover td { background: var(--card-hover); }

.data-table .row-warn td { background: rgba(var(--red-rgb),0.05); }
.data-table .row-warn:hover td { background: rgba(var(--red-rgb),0.09); }

.empty-row { text-align: center; color: var(--text-faint); padding: 30px !important; }

.note-cell { color: var(--text-muted); font-style: italic; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.date-cell { color: var(--text-muted); font-size: 0.8rem; }
.filename-cell { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.82rem; }

/* ─── Status Badge ──────────────────────────────────────────────────────── */
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ─── Billable % bar ───────────────────────────────────────────────────── */
.pct-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 80px;
}

.pct-bar {
  display: inline-block;
  height: 6px;
  background: var(--green);
  border-radius: 3px;
  min-width: 2px;
}

.pct-label { font-size: 0.8rem; white-space: nowrap; color: var(--text-muted); }

/* ─── Rank cell ─────────────────────────────────────────────────────────── */
.rank-cell { color: var(--text-faint); font-size: 0.78rem; font-weight: 600; width: 28px; text-align: center; }

/* ─── Avatar (Namens-Initialen-Kreis) ───────────────────────────────────────
   Bricht die reine Text-Tabelle auf, gibt jeder Zeile eine visuelle Identität
   statt einer grauen Namensliste. Farbe deterministisch aus dem Namen
   berechnet (main.py: avatar_hue-Filter), nirgends gespeichert. */
.name-with-avatar { display: flex; align-items: center; gap: 10px; }
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.66rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0;
}
.avatar-lg { width: 40px; height: 40px; font-size: 0.85rem; }
img.avatar { object-fit: cover; }
.avatar-sm { width: 18px; height: 18px; font-size: 0.56rem; }

/* ─── Info card (Birthday / Absence / Alert strips) ──────────────────────────
   Ein Bauteil für alle "kleinen Info-Streifen" auf den Tab-Seiten, damit sie
   nicht mehr wie zufällig gestylte Einzelstücke wirken. Icon-Badge + Chips
   mit Avatar teilen sich Radius/Abstand/Typografie; nur Akzentfarbe variiert. */
/* Reiht mehrere .info-card nebeneinander statt gestapelt volle Breite — für
   Übersicht: Mitarbeiter-ohne-Stunden/Abwesend/Geburtstage nebeneinander,
   damit sie bei wenig Inhalt nicht sinnlos viel leere Breite verschwenden. */
.info-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  align-items: start;
  margin-bottom: 4px;
}
.info-cards-row .info-card { margin-bottom: 0; }

.info-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 12px 16px;
  margin-bottom: 4px;
}
.info-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
}
summary.info-card-header { list-style: none; cursor: pointer; }
summary.info-card-header::-webkit-details-marker { display: none; }
.info-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 0.78rem;
  flex-shrink: 0;
  background: var(--bg-3);
  color: var(--text-muted);
}
.info-card-icon-warn   { background: rgba(var(--red-rgb),0.14);    color: var(--red); }
.info-card-icon-accent { background: rgba(var(--blue-rgb),0.14);   color: var(--blue); }
.info-card-icon-yellow { background: rgba(var(--yellow-rgb),0.14); color: var(--yellow); }
.info-card-meta {
  margin-left: auto;
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.78rem;
}
.info-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.info-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px 3px 4px;
  font-size: 0.8rem;
  color: var(--text);
}
.info-chip-plain { padding: 3px 10px; }
.info-chip strong { font-weight: 600; }
.info-chip-meta {
  font-size: 0.7rem;
  color: var(--text-faint);
  background: var(--bg);
  border-radius: 4px;
  padding: 0 5px;
}

/* ─── Info-card Personen-Kacheln (klickbar → Profil-Popup) ────────────────
   Ersetzt die reine .info-chip-Pille dort, wo man auf eine Person klicken
   können soll (Übersicht: fehlende Stunden / abwesend / Geburtstage). */
.info-card-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.info-person-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  font: inherit;
  color: inherit;
  width: 100%;
}
.info-person-card:hover { border-color: var(--accent); background: rgba(var(--accent-rgb),0.06); }
.info-person-card .avatar { width: 30px; height: 30px; font-size: 0.72rem; flex-shrink: 0; }
.info-person-card-body { min-width: 0; flex: 1; }
.info-person-card-name { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info-person-card-sub { display: block; font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }

/* Kompakte Info-Card, die per Klick die volle Personen-Liste im Dialog zeigt
   statt sie inline (evtl. leer/eingeklappt wirkend) auszubreiten. */
.info-card-clickable { cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.info-card-clickable:hover { border-color: var(--accent); background: rgba(var(--accent-rgb),0.04); }
.info-card-clickable .info-card-meta { color: var(--text-faint); font-size: 0.72rem; }
.info-card-avatars { display: flex; align-items: center; }
.info-card-avatars .avatar { margin-right: -6px; border: 2px solid var(--bg-2); }
.info-card-avatars-more {
  margin-left: 8px; font-size: 0.72rem; color: var(--text-muted); font-weight: 600;
}
.info-card-warn {
  background: rgba(var(--red-rgb),0.05);
  border-color: rgba(var(--red-rgb),0.25);
}
.info-card-warn .info-card-header { color: var(--red); }
.info-card-accent {
  background: rgba(var(--blue-rgb),0.05);
  border-color: rgba(var(--blue-rgb),0.25);
}
.info-card-accent .info-card-header { color: var(--blue); }

/* ─── Employee project breakdown ────────────────────────────────────────── */
.emp-row-active td { background: var(--card-hover) !important; }
.emp-detail-cell { padding: 0 !important; border-bottom: 2px solid var(--accent) !important; }
.emp-detail-inner { padding: 12px 16px 14px 44px; background: var(--bg-2); }
.emp-detail-loading { font-size: 0.8rem; color: var(--text-faint); }

.emp-projects-breakdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.emp-projects-empty { font-size: 0.82rem; color: var(--text-faint); }

.emp-proj-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
}
.emp-proj-name {
  width: 180px;
  flex-shrink: 0;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.emp-proj-bar-wrap {
  flex: 1;
  background: var(--bg-3);
  border-radius: 3px;
  height: 6px;
  min-width: 60px;
}
.emp-proj-bar {
  height: 6px;
  background: var(--accent);
  border-radius: 3px;
  min-width: 2px;
  opacity: 0.7;
}
.emp-proj-hours {
  width: 46px;
  text-align: right;
  flex-shrink: 0;
  color: var(--text);
  font-weight: 600;
  font-size: 0.8rem;
}

/* ─── Streak badge ──────────────────────────────────────────────────────── */
.streak-badge {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--yellow);
  white-space: nowrap;
}

/* ─── Missing / OK badges ───────────────────────────────────────────────── */
.missing-badge {
  background: rgba(var(--red-rgb),0.12);
  color: var(--red);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.8rem;
}

.ok-badge {
  color: var(--green);
  font-weight: 700;
}

.escalated-badge {
  background: rgba(var(--red-rgb),0.12);
  color: var(--red);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* ─── Tracking ──────────────────────────────────────────────────────────── */
.tracking-section { margin-bottom: 8px; }

.week-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.week-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.week-label strong { font-size: 1rem; }

.week-range {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-left: 6px;
}

.week-days-badge {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 9px;
  margin-left: 10px;
}

.progress-wrap {
  height: 6px;
  background: var(--bg-3);
  border-radius: 3px;
  min-width: 80px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}

td.muted { color: var(--text-muted); }

.invoiced-val  { color: var(--green);  font-weight: 600; }
.uninvoiced-val { color: var(--yellow); font-weight: 600; }

/* ─── Tracking-Kalender ─────────────────────────────────────────────────── */
.trk-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.trk-table {
  border-collapse: collapse;
  min-width: 100%;
  font-size: 0.82rem;
}
.trk-name-col { min-width: 140px; }
.trk-kw-col {
  min-width: 78px;
  text-align: center;
  padding: 6px 4px 10px;
  vertical-align: bottom;
}
.trk-kw-num {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.trk-kw-range {
  display: block;
  font-size: 0.65rem;
  color: var(--text-faint);
  font-weight: 400;
  margin-top: 2px;
}
.trk-current-tag {
  display: inline-block;
  font-size: 0.6rem;
  padding: 1px 5px;
  border-radius: 8px;
  background: rgba(var(--green-rgb),0.15);
  color: var(--green);
  font-weight: 600;
  margin-top: 3px;
}
.trk-col-current .trk-kw-num,
.trk-col-current .trk-kw-range { color: var(--green); opacity: 0.85; }
.trk-table thead th { border-bottom: 2px solid var(--border); }
.trk-table tbody tr { border-bottom: 1px solid var(--border); }
.trk-table tbody tr:last-child { border-bottom: none; }
.trk-name {
  padding: 8px 16px 8px 0;
  font-weight: 500;
  white-space: nowrap;
  font-size: 0.85rem;
}
.trk-cell {
  text-align: center;
  padding: 8px 4px;
  vertical-align: middle;
  min-width: 78px;
}
.trk-col-current { border-left: 2px solid rgba(var(--green-rgb),0.25); }
.trk-cell-ok     { background: rgba(var(--green-rgb),0.12); }
.trk-cell-warn   { background: rgba(var(--yellow-rgb),0.12); }
.trk-cell-bad    { background: rgba(var(--red-rgb),0.12); }
.trk-cell-nodata { color: var(--text-faint); font-size: 0.75rem; }
.trk-cell-hours {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
}
.trk-cell-icon { font-size: 0.8rem; display: block; }
.trk-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  margin-top: 2px;
  line-height: 1.4;
}
.trk-badge-r1  { background: rgba(var(--yellow-rgb),0.2);  color: var(--yellow); }
.trk-badge-r2  { background: rgba(var(--red-rgb),0.2);   color: var(--red); }
.trk-badge-esc { background: rgba(var(--red-rgb),0.3);   color: var(--red); }
.trk-legend-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}
.trk-legend-ok   { background: rgba(var(--green-rgb),0.3); }
.trk-legend-warn { background: rgba(var(--yellow-rgb),0.3); }
.trk-legend-bad  { background: rgba(var(--red-rgb),0.3); }

/* ─── Matrix ────────────────────────────────────────────────────────────── */
.matrix-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.matrix-table {
  border-collapse: collapse;
  font-size: 0.82rem;
  min-width: 500px;
}

.matrix-table th {
  padding: 6px 10px;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.matrix-kw { min-width: 80px; }
.matrix-kw-range { font-weight: 400; font-size: 0.68rem; }

.matrix-table td { padding: 0; border-bottom: 1px solid var(--border); }

.matrix-name-col { min-width: 130px; }

.matrix-name {
  padding: 8px 10px !important;
  white-space: nowrap;
  font-weight: 500;
  min-width: 130px;
}

.matrix-cell {
  text-align: center;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 8px 6px !important;
  min-width: 75px;
  position: relative;
}

.matrix-hours {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  opacity: 0.75;
}

/* ─── Manage ────────────────────────────────────────────────────────────── */
.manage-group { margin-bottom: 20px; }
.manage-group-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.manage-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.manage-table-header {
  display: flex;
  align-items: center;
  background: var(--bg-3);
  padding: 10px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  gap: 8px;
}

.manage-table-body .manage-row {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: var(--card-bg);
  transition: background 0.12s;
}
.manage-table-body .manage-row:last-child { border-bottom: none; }
.manage-table-body .manage-row:nth-child(even) { background: rgba(255,255,255,0.015); }
.manage-table-body .manage-row:hover { background: rgba(var(--accent-rgb),0.04); }
.manage-row-excluded .manage-row-form { opacity: 0.5; }

.manage-row-form {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 12px;
}

.mc { display: flex; align-items: center; }
.mc-name   { flex: 1 1 0; min-width: 130px; flex-direction: column; align-items: flex-start; gap: 1px; }
.mc-status { flex: 0 0 130px; }
.mc-hours  { flex: 0 0 100px; }
.edtime-soll-badge { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.mc-freeday { flex: 0 0 150px; display: flex; gap: 3px; align-items: center; flex-wrap: wrap; }
.day-check { display: inline-flex; align-items: center; cursor: pointer; }
.day-check input[type=checkbox] { display: none; }
.day-check span {
  display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: 600;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted);
  transition: background 0.1s, color 0.1s;
  user-select: none;
}
.day-check input[type=checkbox]:checked + span,
.day-check-active span {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.mc-note   { flex: 0 1 150px; min-width: 80px; }
.mc-actions { flex: 0 0 76px; gap: 7px; justify-content: flex-end; }

.actions-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 100;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  padding: 4px; min-width: 200px; box-shadow: 0 4px 16px rgba(0,0,0,.3);
  display: flex; flex-direction: column; gap: 1px;
}
.actions-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; border-radius: 5px; padding: 7px 9px;
  font-size: 0.82rem; color: var(--text); text-align: left; cursor: pointer;
  transition: background 0.1s;
}
.actions-menu-item:hover { background: rgba(var(--accent-rgb),0.1); }
.actions-menu-item i { width: 14px; text-align: center; color: var(--text-muted); flex-shrink: 0; }
.actions-menu-item:hover i { color: var(--accent); }

.manage-name-main { font-size: 0.88rem; font-weight: 600; line-height: 1.2; }
.manage-email { font-size: 0.74rem; color: var(--text-muted); }

@keyframes fadeout {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* ─── Forms ─────────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group-wide { flex: 1; min-width: 160px; }
.form-group-btn { align-self: flex-end; }

.form-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.form-input, .form-select {
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 10px;
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}

.form-input:focus, .form-select:focus { border-color: var(--accent); }
.form-input-sm, .form-select-sm {
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 8px;
  font-size: 0.82rem;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}
.form-input-sm:focus, .form-select-sm:focus { border-color: var(--accent); }
.hours-input { width: 60px !important; text-align: center; }
.note-input  { width: 100%; }

.btn-sm { padding: 5px 9px; font-size: 0.78rem; }

.form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.form-actions { margin-top: 16px; }

.settings-form { width: 100%; }

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  .settings-grid { grid-template-columns: 1fr; }
}

.settings-col { display: flex; flex-direction: column; gap: 16px; }

.settings-group-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 10px;
  border-left: 2px solid var(--accent);
  line-height: 1.6;
  margin-bottom: -4px;
}

.settings-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 18px 20px;
}

.settings-card-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 7px;
}

.settings-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  justify-content: space-between;
}
.settings-toggle-label {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.form-hint {
  font-size: 0.75rem;
  color: var(--text-faint);
  margin-top: 4px;
  line-height: 1.4;
}

/* Status panel */
.status-list { display: flex; flex-direction: column; gap: 10px; }
.status-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.83rem;
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.status-ok   { background: var(--green); }
.status-warn { background: var(--yellow); }
.status-err  { background: var(--red); }
.status-body { display: flex; flex-direction: column; gap: 1px; }
.status-label { color: var(--text-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.status-value { color: var(--text); font-size: 0.83rem; }
.status-meta  { color: var(--text-faint); font-size: 0.72rem; margin-top: 1px; }

/* keep old group class for compat */
.settings-group { margin-bottom: 24px; }
.settings-group-title {
  font-size: 0.85rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 14px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}

/* ─── Toggle Switch ─────────────────────────────────────────────────────── */
.toggle-switch { position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider {
  position:absolute; inset:0; border-radius:24px; cursor:pointer;
  background:var(--border); transition:.25s;
}
.toggle-slider::before {
  content:''; position:absolute; width:18px; height:18px; border-radius:50%;
  left:3px; bottom:3px; background:#fff; transition:.25s;
}
.toggle-switch input:checked + .toggle-slider { background:var(--green); }
.toggle-switch input:checked + .toggle-slider::before { transform:translateX(18px); }

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, opacity 0.15s;
  white-space: nowrap;
}

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

.btn-primary:hover { opacity: 0.85; }

.btn-secondary {
  background: var(--bg-2);
  color: var(--text);
  border-color: var(--border);
}

.btn-secondary:hover { background: var(--bg-3); }

.btn-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── Dots (ED Time status) ─────────────────────────────────────────────── */
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  vertical-align: middle;
}
.dot-green  { background: var(--green); }
.dot-yellow { background: var(--yellow); }
.dot-red    { background: var(--red); }

/* ─── EDtime Tab ─────────────────────────────────────────────────────────── */
.edtime-bv-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.03em;
}
.edtime-bv-vz { background: rgba(var(--accent-rgb),0.18); color: var(--blue); }
.edtime-bv-tz { background: rgba(var(--yellow-rgb),0.18); color: var(--yellow); }

.edtime-eff-wrap {
  position: relative;
  height: 18px;
  background: rgba(128,128,128,0.1);
  border-radius: 4px;
  overflow: hidden;
  min-width: 100px;
}
.edtime-eff-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 4px;
  transition: width 0.4s ease;
}
.edtime-eff-bar.eff-green  { background: rgba(var(--green-rgb),0.45); }
.edtime-eff-bar.eff-yellow { background: rgba(var(--yellow-rgb),0.45); }
.edtime-eff-bar.eff-red    { background: rgba(var(--red-rgb),0.45); }
.edtime-eff-label {
  position: absolute;
  right: 5px; top: 50%; transform: translateY(-50%);
  font-size: 0.74rem; font-weight: 700;
}
.edtime-eff-label.eff-green  { color: var(--green); }
.edtime-eff-label.eff-yellow { color: var(--yellow); }
.edtime-eff-label.eff-red    { color: var(--red); }

/* ─── Alerts ────────────────────────────────────────────────────────────── */
.alert {
  padding: 10px 14px;
  border-radius: var(--radius);
  margin-bottom: 14px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.alert-success {
  background: rgba(var(--green-rgb),0.12);
  color: var(--green);
  border: 1px solid rgba(var(--green-rgb),0.25);
  animation: fadeout 4s ease forwards;
}

/* ─── Empty state ───────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.empty-state i { margin-bottom: 12px; display: block; }
.empty-state p { margin-bottom: 8px; }
.empty-hint { font-size: 0.82rem; color: var(--text-faint); line-height: 1.8; }
.empty-state-msg { padding: 20px 0; color: var(--text-muted); font-style: italic; }

/* ─── Dialogs ───────────────────────────────────────────────────────────── */
dialog {
  /* closed dialogs stay display:none — never override here */
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 24px 64px rgba(0,0,0,0.22);
  max-height: 85vh;
  overflow: hidden;
}

dialog[open] {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

dialog::backdrop {
  background: rgba(0,0,0,0.55);
}

[data-theme="dark"] dialog::backdrop {
  background: rgba(0,0,0,0.72);
}

.data-dialog { width: min(92vw, 800px); }

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.dialog-header h3 {
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dialog-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 5px;
  transition: background 0.15s, color 0.15s;
}

.dialog-close:hover { background: var(--bg-3); color: var(--text); }

.dialog-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 0; /* needed for flex overflow-y to work */
}

.dialog-period {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* ─── Chat Dialog ───────────────────────────────────────────────────────── */
.chat-dialog {
  width: min(92vw, 480px);
  height: min(82vh, 640px);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0; /* required for flex scroll */
}

.chat-msg {
  max-width: 85%;
  padding: 10px 13px;
  border-radius: var(--radius-card);
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.chat-msg-user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--accent-text);
  border-bottom-right-radius: 3px;
}

.chat-msg-assistant {
  align-self: flex-start;
  background: var(--bg-2);
  color: var(--text);
  border-bottom-left-radius: 3px;
  border: 1px solid var(--border);
}

.chat-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.chat-examples button {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.chat-examples button:hover {
  background: var(--bg-3);
  color: var(--text);
}

.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.chat-input-row input {
  flex: 1;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 0.85rem;
  outline: none;
}

.chat-input-row input:focus { border-color: var(--accent); }

.chat-input-row button {
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: var(--radius);
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: opacity 0.15s;
}

.chat-input-row button:hover { opacity: 0.85; }

/* ─── Chat FAB ──────────────────────────────────────────────────────────── */
.chat-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--navbar-bg);
  color: #fff;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s;
  z-index: 50;
}

.chat-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(0,0,0,0.28);
}
.chat-fab img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ─── Login ─────────────────────────────────────────────────────────────── */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb),0.07) 0%, transparent 55%),
    linear-gradient(rgba(var(--accent-rgb),0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb),0.025) 1px, transparent 1px);
  background-size: 100% 100%, 48px 48px, 48px 48px;
}

.login-box {
  width: 100%;
  max-width: 360px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--surface);
  border: 1px solid rgba(var(--accent-rgb),0.15);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 64px rgba(0,0,0,0.45);
}

.login-logo { height: 40px; margin-bottom: 24px; }

[data-theme="dark"] .login-logo { filter: brightness(10); }

.login-subtitle {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 28px;
  text-align: center;
  letter-spacing: 0.01em;
}

.login-form { width: 100%; display: flex; flex-direction: column; gap: 0; }

.login-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.login-error {
  width: 100%;
  padding: 10px 14px;
  background: rgba(var(--red-rgb),0.1);
  color: var(--red);
  border: 1px solid rgba(var(--red-rgb),0.3);
  border-radius: var(--radius);
  font-size: 0.85rem;
  margin-bottom: 16px;
  text-align: center;
}

.login-input {
  width: 100%;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 0.95rem;
  outline: none;
  margin-bottom: 16px;
  transition: border-color 0.15s;
}

.login-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.12); }

.login-btn {
  width: 100%;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: var(--radius);
  padding: 11px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, box-shadow 0.15s;
  letter-spacing: 0.01em;
}

.login-btn:hover { opacity: 0.88; box-shadow: 0 0 20px rgba(var(--accent-rgb),0.25); }

/* ─── htmx loading bar ──────────────────────────────────────────────────── */
.tab-skeleton { padding: 6px 2px; }

.tab-loading-bar {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 3px;
  background: var(--accent);
  z-index: 9999;
  transition: width 0.3s ease;
  border-radius: 0 2px 2px 0;
}
.htmx-indicator { opacity: 0; pointer-events: none; }
.htmx-request.htmx-indicator,
.htmx-request .htmx-indicator {
  opacity: 1;
  animation: loading-bar 1.4s ease-in-out infinite;
}
@keyframes loading-bar {
  0%   { width: 0; left: 0; }
  50%  { width: 70%; left: 0; }
  100% { width: 0; left: 100%; }
}

/* ─── Birthday bar ──────────────────────────────────────────────────────── */
.birthday-today {
  background: rgba(var(--yellow-rgb),0.15) !important;
  border-color: var(--yellow) !important;
  color: var(--yellow) !important;
  font-weight: 600;
}

/* ─── Kalender Tab ───────────────────────────────────────────────────────── */
.kal-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kal-table {
  border-collapse: collapse;
  min-width: 100%;
  font-size: 0.82rem;
}
.kal-name-col { min-width: 130px; }
.kal-day-col {
  min-width: 46px;
  text-align: center;
  padding: 0 2px;
}
.kal-day-name {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
}
.kal-day-date {
  display: block;
  font-size: 0.72rem;
  color: var(--text-faint);
}
.kal-today-col th { color: var(--accent); }
.kal-today-col .kal-day-name,
.kal-today-col .kal-day-date { color: var(--accent); }
.kal-weekend-col { opacity: 0.4; background: rgba(255,255,255,0.015); }
.kal-weekend-col .kal-day-name { font-size: 0.6rem; }
.kal-name {
  padding: 6px 10px 6px 0;
  font-weight: 500;
  font-size: 0.85rem;
  white-space: nowrap;
}
.kal-cell {
  text-align: center;
  padding: 4px 2px;
  border-radius: 4px;
  font-size: 1rem;
  transition: background 0.15s;
}
.kal-cell-ok { background: transparent; }
.kal-cell-urlaub { background: rgba(59,130,246,0.12); }
.kal-cell-krank  { background: rgba(var(--red-rgb),0.12); }
.kal-cell-karenz { background: rgba(155,89,182,0.12); }
.kal-cell-inaktiv { background: transparent; color: var(--text-faint); }
.kal-cell-weekend { background: var(--bg-2); }
.kal-ok-dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  opacity: 0.5;
}
.kal-legend { margin-right: 4px; }
.kal-table thead th {
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.kal-table tbody tr { border-bottom: 1px solid var(--border); }
.kal-table tbody tr:last-child { border-bottom: none; }

/* ─── Reminder History ───────────────────────────────────────────────────── */
.reminder-history-details {
  margin-top: 8px;
}
.reminder-history-details > summary {
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--text-muted);
  padding: 6px 0;
  list-style: none;
  user-select: none;
}
.reminder-history-details > summary::-webkit-details-marker { display: none; }
.reminder-history-details > summary::before { content: "▶ "; font-size: 0.65rem; }
.reminder-history-details[open] > summary::before { content: "▼ "; }
.reminder-history-list { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.rh-week { }
.rh-week-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rh-entries { display: flex; flex-direction: column; gap: 3px; }
.rh-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
}
.rh-name { font-weight: 500; min-width: 120px; }
.rh-badge {
  border-radius: 20px;
  padding: 1px 8px;
  font-size: 0.74rem;
  font-weight: 500;
}
.rh-r1  { background: rgba(var(--accent-rgb),0.13);  color: var(--accent); border: 1px solid rgba(var(--accent-rgb),0.25); }
.rh-r2  { background: rgba(var(--yellow-rgb),0.13);  color: var(--yellow); border: 1px solid rgba(var(--yellow-rgb),0.25); }
.rh-r3  { background: rgba(var(--red-rgb),0.13);   color: var(--red); border: 1px solid rgba(var(--red-rgb),0.25); }
.rh-esc { background: rgba(var(--red-rgb),0.18);   color: var(--red); border: 1px solid rgba(var(--red-rgb),0.35); font-weight: 600; }

/* ─── Mobile responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Navbar: compact, title only ─────────────────────────── */
  .navbar {
    margin: 0;
    border-radius: 0;
    height: 54px;
    padding: 0 10px 0 6px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 4px 16px rgba(0,0,0,0.25);
  }
  .navbar-title { font-size: 0.8rem; }
  .navbar-right .navbar-date,
  .navbar-right .sep,
  .navbar-right .nav-btn-icon,
  .navbar-right #refresh-btn { display: none; }

  /* Hinweis: die alte "Tab Bar" (feste Bottom-Navigation, eigene .tab-btn-
     Größen/Layout) wurde durch die horizontale Sidebar-Leiste oben ersetzt
     (siehe @media 780px). .tab-bar selbst wird nirgends mehr im Markup
     verwendet — die zugehörigen Regeln standen hier bis 2026-09 noch als
     Leiche rum und überschrieben (gleiche Klasse .tab-btn!) unbeabsichtigt
     Padding/Schriftgröße/Icon-Größe der echten Sidebar-Buttons auf Mobile. */

  .tab-content { margin: 0; padding: 4px 8px 24px; }

  /* ── Content tweaks ──────────────────────────────────────── */
  .tab-section { padding: 12px 0; }
  .section-header { margin-bottom: 12px; }
  .page-title { font-size: 1.15rem; gap: 8px; }

  .metrics-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .metric-value { font-size: 1.5rem; }
  .metric-card  { padding: 12px; }

  .data-table { font-size: 0.78rem; }
  .data-table th, .data-table td { padding: 6px 7px; white-space: nowrap; }

  .charts-row { flex-direction: column !important; }
  .chart-box-narrow { flex: none !important; width: 100% !important; }

  .manage-table-header { display: none; }
  .manage-row-form { flex-wrap: wrap; padding: 10px 12px; gap: 6px; }
  .mc-name    { flex: 1 1 100%; }
  .mc-status  { flex: 1 1 calc(50% - 4px); }
  .mc-hours   { flex: 0 0 68px; }
  .mc-note    { flex: 1 1 100%; }
  .mc-actions { flex: 0 0 auto; }

  .week-nav   { gap: 8px; }
  .week-label { text-align: center; }

  .matrix-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Dialogs ─────────────────────────────────────────────── */
  .chat-dialog {
    width: 100vw !important; height: 75vh !important;
    top: auto !important; bottom: 0 !important; left: 0 !important;
    transform: none !important; border-radius: 12px 12px 0 0 !important;
    margin: 0;
  }
  .data-dialog { width: 98vw !important; max-height: 88vh !important; }

  /* ── Chat FAB: etwas kleiner + näher an den Rand auf Mobile ── */
  .chat-fab {
    bottom: 16px; right: 12px;
    width: 46px; height: 46px; font-size: 1rem;
  }
}

/* ─── Employee name link ─────────────────────────────────────────────────── */
.emp-name-link {
  color: inherit;
  text-decoration: none;
}
.emp-name-link:hover { text-decoration: underline; color: var(--accent); }

/* ─── Employee profile panel ────────────────────────────────────────────── */
.profile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 200;
}
.profile-overlay.open { display: block; }
.profile-panel {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: var(--card-bg);
  box-shadow: -4px 0 24px rgba(0,0,0,0.18);
  overflow-y: auto;
  padding: 24px 20px 32px;
}
.profile-close {
  position: absolute;
  top: 14px; right: 16px;
  background: none; border: none;
  font-size: 1.1rem; cursor: pointer;
  color: var(--text-muted);
}
.profile-close:hover { color: var(--text); }
.profile-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  padding-right: 32px;
}
.profile-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
}
.profile-section {
  margin-top: 20px;
}
.profile-section-title {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: 12px;
}
.profile-history {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  height: 80px;
}
.profile-week-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  height: 100%;
}
.profile-week-bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
}
.profile-week-bar {
  width: 100%;
  background: var(--accent);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  opacity: 0.75;
}
.profile-week-hours {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-align: center;
}
.profile-week-label {
  font-size: 0.65rem;
  color: var(--text-faint);
  text-align: center;
  white-space: nowrap;
}

/* ── Tages-Breakdown (Profile Modal) ─────────────────────────────────────── */
.profile-days {
  display: flex; gap: 8px;
}
.profile-day {
  flex: 1; border-radius: 8px; padding: 8px 4px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 1px solid transparent; position: relative;
}
.pd-label  { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); }
.pd-hours  { font-size: .82rem; font-weight: 800; }
.pd-flag   { font-size: .6rem; color: var(--red); }
.pd-ok      { background: rgba(var(--green-rgb),.12); border-color: rgba(var(--green-rgb),.2); }
.pd-ok      .pd-hours { color: var(--green); }
.pd-partial { background: rgba(var(--yellow-rgb),.1);  border-color: rgba(var(--yellow-rgb),.2); }
.pd-partial .pd-hours { color: var(--yellow); }
.pd-missing { background: rgba(var(--red-rgb),.1);   border-color: rgba(var(--red-rgb),.2); }
.pd-missing .pd-hours { color: var(--red); }
.pd-excused { background: var(--bg2); border-color: var(--border); }
.pd-excused .pd-hours { color: var(--text-faint); }
.pd-future  { background: transparent; border-color: var(--border); opacity: .45; }
.pd-future  .pd-hours { color: var(--text-faint); }

/* ─── Reports tab ────────────────────────────────────────────────────────── */
.report-preview-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 16px;
}
.report-kpi-row {
  display: flex;
  gap: 24px;
  margin-bottom: 12px;
}
.report-kpi-val {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
}
.report-kpi-label {
  font-size: 0.75rem;
  color: var(--text-faint);
  margin-top: 2px;
}

/* ─── Upcoming absences ─────────────────────────────────────────────────── */
.upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.upcoming-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: var(--bg-2);
  border-radius: var(--radius-btn);
  font-size: 0.84rem;
}
.upcoming-name {
  width: 130px;
  flex-shrink: 0;
  font-weight: 600;
  color: var(--text);
}
.upcoming-days {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.upcoming-range {
  background: var(--bg-3);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.upcoming-count {
  color: var(--text-faint);
  font-size: 0.78rem;
  flex-shrink: 0;
}

/* ─── Saved flash ────────────────────────────────────────────────────────── */
.saved-flash {
  font-size: 0.82rem;
  color: var(--green);
  font-weight: 600;
}

/* ─── Überstunden row ────────────────────────────────────────────────────── */
.data-table .row-over td { background: rgba(var(--yellow-rgb),0.06); }
.data-table .row-over:hover td { background: rgba(var(--yellow-rgb),0.11); }
.over-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(var(--yellow-rgb),0.15);
  color: var(--yellow);
  border: 1px solid rgba(var(--yellow-rgb),0.3);
  white-space: nowrap;
  margin-left: 5px;
}

/* ─── Kein-Projekt row ───────────────────────────────────────────────────── */
.row-no-proj td { color: var(--text-faint); }
.emp-proj-noproj { color: var(--yellow) !important; }

/* ─── Vacation badge ─────────────────────────────────────────────────────── */
.vacation-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(var(--blue-rgb),0.12);
  color: var(--blue);
  border: 1px solid rgba(var(--blue-rgb),0.25);
  white-space: nowrap;
  margin-left: 5px;
}

/* ─── Alert box (Fehlende Stunden) ──────────────────────────────────────── */
.alert-rows { display: flex; flex-direction: column; gap: 6px; }
.alert-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
}
.alert-name { font-weight: 600; min-width: 140px; }
.alert-soll { font-size: 0.78rem; }
.reminder-sent-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--yellow);
  margin-left: 3px;
  vertical-align: middle;
}

/* ─── Custom Tooltip ──────────────────────────────────────────────────────── */
/* Tooltip via JS (#amha-tooltip div) */
#amha-tooltip {
  position: fixed;
  background: #1e293b;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 0.75rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  transition: opacity .15s;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
  max-width: 320px;
  white-space: normal;
}

/* ─── Missing alert block (Übersicht) ───────────────────────────────────── */
.missing-chip-hours { font-size: 0.72rem; color: var(--text-muted); }
.excused-reason { font-size: 0.7rem; color: var(--text-faint); background: var(--bg); border-radius: 4px; padding: 0 5px; }

/* ─── SOLL/IST metric sub colors ─────────────────────────────────────────── */
.text-green { color: var(--green) !important; }
.text-yellow { color: var(--yellow) !important; }
.text-red { color: var(--red) !important; }

/* ─── Chart section toggle ───────────────────────────────────────────────── */
.chart-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 8px;
  cursor: pointer;
  user-select: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
}
.chart-section-header:hover { color: var(--text); }

/* ─── Pending Time-Off Requests (Manage Tab) ─────────────────────────────── */
.pending-requests-block {
  background: rgba(var(--blue-rgb),0.05);
  border: 1px solid rgba(var(--blue-rgb),0.25);
  border-radius: var(--radius-card);
  padding: 12px 16px;
  margin-bottom: 16px;
}
.pending-requests-header {
  font-size: .86rem;
  font-weight: 600;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.pending-count {
  background: rgba(var(--blue-rgb),.16);
  color: var(--blue);
  font-size: .72rem;
  padding: 1px 7px;
  border-radius: 8px;
  font-weight: 700;
}
.pending-req-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.pending-req-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  flex-wrap: wrap;
}
.pending-req-policy {
  font-size: .75rem;
  background: rgba(59,130,246,.12);
  color: var(--blue);
  padding: 1px 7px;
  border-radius: 6px;
}
.pending-req-dates {
  font-size: .78rem;
  color: var(--text-muted);
}
.pending-req-note {
  font-size: .75rem;
  color: var(--text-faint);
  font-style: italic;
}
.pending-req-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

/* ─── Portal vacation request result ─────────────────────────────────────── */
.req-result { font-size: .83rem; display: inline-flex; align-items: center; gap: .4rem; }
.req-ok    { color: var(--green); }
.req-error { color: var(--red); }