/* Admin-Oberflaeche — abgeleitet aus Mandys Admin-Mockup, auf echte
   scrollbare Web-App umgestellt. */

/* Selbst gehostete Schriften (kein Google-CDN — Zielserver ist offline).
   Source Sans 3 = App-Schrift, DM Sans = nur Timo-Wortmarke.
   Beide SIL OFL 1.1, siehe /fonts/LICENSE.md. */
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/source-sans-3-300.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/source-sans-3-400.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/source-sans-3-600.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/source-sans-3-700.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/source-sans-3-800.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/dm-sans-700.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/dm-sans-900.woff2') format('woff2'); }

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

/* Timo-Wortmarke (Produkt-Marke): DM Sans, „T" 900 + „imo" 700. */
.timo-wordmark { font-family: 'DM Sans', 'Source Sans 3', system-ui, sans-serif; line-height: 1; letter-spacing: .01em; display: inline-flex; align-items: baseline; }
.timo-wordmark .tw-t { font-weight: 900; }
.timo-wordmark .tw-imo { font-weight: 700; }

:root {
  /* Richert-Marke (Salbeigrün, aus dem Briefbogen). --brand = Akzent/Linien,
     --brand-strong = gefüllte, interaktive Flächen mit weißer Schrift (AA),
     --brand-hover/-light = Hover bzw. hellere Textvariante auf dunklem Grund. */
  --brand: #688868;
  --brand-strong: #4E764E;
  --brand-hover: #3E623E;
  --brand-light: #7FA07F;
  --bg: #0F0F11;
  --surface: #181820;
  --card: #1E1E26;
  --card2: #222230;
  --border: #2E2E3A;
  --border2: #3A3A48;
  --txt: #EAEAE4;
  --sub: #8888A0;
  --muted: #4A4A5C;
  --green: #30D158;
  --green-bg: #0C2018;
  --amber: #FFB340;
  --amber-bg: #221506;
  --red: #FF453A;
  --red-bg: #200806;
  --blue: #0A84FF;
}

/* Hell-Theme: spiegelt die dunkle Palette in eine helle. Marken-Grün bleibt
   in beiden Themes gleich; --brand-light wird für weißen Grund abgedunkelt
   (Text-Kontrast). Status gruen/amber/rot ebenfalls fuer hellen Grund
   abgedunkelt. Default bleibt dunkel (kein data-theme-Attribut). */
html[data-theme="light"] {
  --brand-light: #4E764E;
  --bg: #F4F4F1;
  --surface: #FFFFFF;
  --card: #FFFFFF;
  --card2: #F0F0EC;
  --border: #E5E4DE;
  --border2: #D4D3CB;
  --txt: #1C1C1E;
  --sub: #63636B;
  --muted: #9A9AA0;
  --green: #1E9E4A;
  --green-bg: #DCF5E4;
  --amber: #B7791F;
  --amber-bg: #FBEFD6;
  --red: #D93A2F;
  --red-bg: #FBE0DE;
  --blue: #0A6FD8;
}
/* Hartkodierter Dunkel-Avatar-Grund (weg/abwesend) → helle Variante. */
html[data-theme="light"] .emp-row.status-gegangen .emp-avatar-sm,
html[data-theme="light"] .emp-row.status-keine .emp-avatar-sm,
html[data-theme="light"] .emp-row.status-abwesend .emp-avatar-sm {
  background: var(--card2); color: var(--muted);
}

html, body {
  background: var(--bg);
  color: var(--txt);
  font-family: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  min-height: 100vh;
}

a { color: inherit; }

/* ══ HEADER + NAV ══ */
.header {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 22px; background: var(--surface);
  border-bottom: 2px solid var(--brand); position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand-badge {
  width: 32px; height: 32px; border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.brand-badge svg { width: 100%; height: 100%; display: block; }

/* Betreiber-/Support-Modus Kennzeichnung */
.support-bar {
  background: #D97706; color: #1C1917; font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em; text-align: center; padding: 7px 16px;
}
.support-bar strong { font-weight: 800; }
.brand-label { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; }
.brand-sep { width: 1px; height: 18px; background: var(--border2); margin: 0 4px; }
.admin-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-light); background: rgba(104,136,104,0.14); padding: 3px 9px;
  border-radius: 20px; border: 1px solid rgba(104,136,104,0.34);
}
.header-right { display: flex; align-items: center; gap: 14px; }
.header-date { font-size: 12px; color: var(--sub); letter-spacing: 0.06em; }

/* ══ Hell/Dunkel-Umschalter ══ */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  background: transparent; border: 1px solid var(--border2);
  color: var(--sub); cursor: pointer; font-family: inherit; padding: 0;
}
.theme-toggle:hover { color: var(--txt); background: var(--card); }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
.theme-toggle .ic-moon { display: none; }
html[data-theme="light"] .theme-toggle .ic-sun { display: none; }
html[data-theme="light"] .theme-toggle .ic-moon { display: block; }
.theme-toggle.floating { position: fixed; top: 16px; right: 16px; z-index: 200; background: var(--card); }

.nav {
  display: flex; gap: 4px; padding: 0 22px; background: var(--surface);
  border-bottom: 1px solid var(--border); position: sticky; top: 56px; z-index: 9;
}
.nav a {
  padding: 12px 18px; font-size: 13px; font-weight: 600; color: var(--sub);
  text-decoration: none; border-bottom: 2px solid transparent; letter-spacing: 0.02em;
}
.nav a:hover { color: var(--txt); }
.nav a.active { color: var(--brand-light); border-bottom-color: var(--brand); }

.wrap { max-width: 1200px; margin: 0 auto; padding: 22px; }

/* ══ Buttons ══ */
.btn, button.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 700;
  letter-spacing: 0.03em; cursor: pointer; border: 1px solid var(--border2);
  background: var(--card); color: var(--txt); text-decoration: none; font-family: inherit;
}
.btn:hover { background: var(--card2); }
.btn svg { width: 15px; height: 15px; }
.btn.primary { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
.btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn.green { background: rgba(48,209,88,0.12); border-color: rgba(48,209,88,0.35); color: var(--green); }
.btn.blue { background: rgba(10,132,255,0.12); border-color: rgba(10,132,255,0.35); color: var(--blue); }
.btn.red { background: rgba(255,69,58,0.1); border-color: rgba(255,69,58,0.35); color: var(--red); }
.btn.sm { padding: 5px 11px; font-size: 11px; }

/* ══ Status-Karten ══ */
.status-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.stat-card { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border2); border-radius: 10px; padding: 14px 18px; }
.stat-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.stat-count { font-size: 26px; font-weight: 800; line-height: 1; }
.stat-label { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 3px; }
.stat-card.green .stat-count, .stat-card.green .stat-label { color: var(--green); }
.stat-card.green .stat-dot { background: var(--green); }
.stat-card.amber .stat-count, .stat-card.amber .stat-label { color: var(--amber); }
.stat-card.amber .stat-dot { background: var(--amber); }
.stat-card.muted .stat-count, .stat-card.muted .stat-label { color: var(--sub); }
.stat-card.muted .stat-dot { background: var(--muted); }

/* ══ Abschnittstitel ══ */
.sec-title { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; }
.sec-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.sec-title .spacer { flex: 1; }
.sec-title::after { display: none; }
.sec-line { flex: 1; height: 1px; background: var(--border); }

/* ══ Live-Liste ══ */
.emp-list { display: flex; flex-direction: column; gap: 7px; }
.emp-row { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 9px; padding: 10px 14px; }
.emp-row.status-anwesend { border-left: 3px solid var(--green); }
.emp-row.status-pause { border-left: 3px solid var(--amber); }
.emp-row.status-gegangen, .emp-row.status-keine, .emp-row.status-abwesend { border-left: 3px solid var(--muted); opacity: 0.7; }
.emp-avatar-sm { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-strong); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.emp-row.status-anwesend .emp-avatar-sm { background: var(--green-bg); color: var(--green); }
.emp-row.status-pause .emp-avatar-sm { background: var(--amber-bg); color: var(--amber); }
.emp-row.status-gegangen .emp-avatar-sm, .emp-row.status-keine .emp-avatar-sm, .emp-row.status-abwesend .emp-avatar-sm { background: #1A1A20; color: var(--muted); }
.emp-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.emp-fullname { font-size: 13px; font-weight: 700; }
.emp-detail { font-size: 11px; color: var(--sub); }
.emp-row.status-anwesend .emp-detail { color: var(--green); opacity: 0.85; }
.emp-row.status-pause .emp-detail { color: var(--amber); opacity: 0.85; }
.emp-hours { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; min-width: 64px; }
.emp-stamp { display: flex; gap: 6px; flex-shrink: 0; margin: 0; }
.emp-stamp .btn.sm { white-space: nowrap; }

/* ══ Tabellen ══ */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 4px 0; overflow: hidden; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { background: var(--surface); color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border2); }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--card2); }
tr.weekend td, tr.feiertag td { color: var(--sub); }
tr.feiertag { background: rgba(104,136,104,0.06); }
tr.today td { color: var(--brand-light); font-weight: 600; }
/* Offener Vergangenheitstag (vergessenes Ausstempeln) — auffaellig markieren. */
tr.fehler { background: var(--red-bg); }
tr.fehler td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; letter-spacing: 0.04em; }
.badge.urlaub { background: rgba(10,132,255,0.15); color: var(--blue); }
.badge.krank { background: rgba(255,69,58,0.15); color: var(--red); }
.badge.feiertag { background: rgba(104,136,104,0.16); color: var(--brand-light); }
.badge.frei, .badge.schule { background: var(--card2); color: var(--sub); }
.pos { color: var(--green); }
.neg { color: var(--red); }

/* Aufklappbare Tages-Details (Monatsauswertung) */
tr.expandable { cursor: pointer; }
.daycaret { display: inline-block; width: 0; height: 0; margin-right: 9px; vertical-align: middle;
  border-left: 5px solid var(--sub); border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform 0.15s; }
.daycaret.placeholder { border-left-color: transparent; }
tr.expandable.open .daycaret { transform: rotate(90deg); }
tr.day-detail td { background: var(--surface); padding: 14px 20px; border-bottom: 1px solid var(--border2); }
tr.day-detail:hover td { background: var(--surface); }
.daydet-sec { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 9px; }
.daydet-stamps + .daydet-sec, .daydet-zline + .daydet-sec { margin-top: 18px; }
.daydet-stamps { display: flex; flex-wrap: wrap; gap: 8px; }
.daydet-stamp { display: inline-flex; align-items: baseline; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 5px 11px; font-size: 12px; }
.daydet-zeit { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--txt); }
.daydet-typ { color: var(--txt); }
.daydet-quelle { color: var(--sub); font-size: 11px; }
.daydet-zline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 6px 0; font-size: 12.5px; border-bottom: 1px solid var(--border); }
.daydet-zline:last-child { border-bottom: none; }
.daydet-zlabel { min-width: 140px; font-weight: 600; color: var(--txt); }
.daydet-zwin { flex: 1; min-width: 160px; color: var(--brand-light); font-variant-numeric: tabular-nums; }
.daydet-zsum { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--green); }

.emp-name-cell { display: flex; align-items: center; gap: 9px; }
/* Mitarbeiter-Name als Link zur Monats-Detailseite (ersetzt den fruehereren
   „Details"-Button). Marken-Gruen in beiden Themes lesbar, Hover dezent. */
.emp-name-link { color: var(--brand-light); font-weight: 600; text-decoration: none; width: fit-content; cursor: pointer; }
.emp-name-link:hover { text-decoration: underline; }
.mini-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--card2); color: var(--sub); font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ══ Nav (Monat) ══ */
.month-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.month-label { font-size: 16px; font-weight: 700; }

/* ══ Formulare / Dialoge ══ */
.form-grid { display: grid; grid-template-columns: 180px 1fr; gap: 12px 16px; align-items: center; max-width: 620px; }
.form-grid label { font-size: 13px; color: var(--sub); }
/* Nicht-Feld-Elemente (Hilfetexte etc.) direkt im Raster ueberspannen beide
   Spalten — sonst belegen sie eine einzelne Zelle und verschieben alle
   folgenden Label/Feld-Paare gegeneinander. */
.form-grid > p, .form-grid > .hint { grid-column: 1 / -1; margin: 0; }
.pflicht { color: var(--brand-strong); font-weight: 700; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=time], input[type=datetime-local], select, textarea {
  background: var(--surface); border: 1px solid var(--border2); border-radius: 7px;
  color: var(--txt); padding: 9px 12px; font-size: 14px; font-family: inherit; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); }
/* Autofill: Chrome/Edge faerben erkannte Felder (Telefon/Handy/E-Mail) sonst
   weiss ein — beisst sich mit dem dunklen Timo-Design. Der Autofill-Hintergrund
   laesst sich nicht per background-color ueberschreiben, nur per riesigem
   inset-Shadow. --surface/--txt sind pro Theme gesetzt → greift hell + dunkel.
   transition = Fallback fuer Browser, die den Shadow ignorieren. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  -webkit-text-fill-color: var(--txt) !important;
  caret-color: var(--txt);
  transition: background-color 9999s ease-in-out 0s;
}
.weekday-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.weekday-picker label { display: flex; align-items: center; gap: 5px; background: var(--surface); border: 1px solid var(--border2); border-radius: 7px; padding: 6px 10px; font-size: 12px; cursor: pointer; color: var(--txt); }
.weekday-picker input { width: auto; }
.form-actions { display: flex; gap: 10px; margin-top: 20px; }
.hint { font-size: 12px; color: var(--muted); }

/* ══ Personalakte (aufklappbar, vertraulich) ══ */
.akte { margin-top: 24px; border: 1px solid var(--border2); border-radius: 10px; background: var(--card); overflow: hidden; }
.akte > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 18px; user-select: none; }
.akte > summary::-webkit-details-marker { display: none; }
.akte > summary::before { content: '▸'; color: var(--muted); font-size: 12px; transition: transform 0.15s; }
.akte[open] > summary::before { transform: rotate(90deg); }
.akte .akte-titel { font-size: 15px; font-weight: 700; }
.akte .akte-vertraulich { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #D97706; background: rgba(217,119,6,0.14); border: 1px solid rgba(217,119,6,0.4); padding: 3px 10px; border-radius: 20px; }
.akte .akte-body { padding: 4px 18px 20px; border-top: 1px solid var(--border); }
.akte .sec-title { margin: 20px 0 12px; }
.akte textarea { max-width: 100%; }

.flash { padding: 11px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 13px; font-weight: 600; }
.flash.ok { background: rgba(48,209,88,0.12); color: var(--green); border: 1px solid rgba(48,209,88,0.3); }
.flash.err { background: rgba(255,69,58,0.12); color: var(--red); border: 1px solid rgba(255,69,58,0.3); }

/* ══ Login ══ */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { background: var(--card); border: 1px solid var(--border2); border-radius: 16px; padding: 40px; width: 100%; max-width: 380px; }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 28px; }
.login-logo { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.login-logo .timo-wordmark { font-size: 52px; color: var(--txt); }
.login-logo .timo-wordmark .tw-imo { color: var(--sub); }
.timo-balken { display: flex; align-items: center; gap: 6px; width: 120px; }
.timo-balken span { width: 30px; height: 4px; border-radius: 2px; background: #D97706; }
.timo-balken i { flex: 1; height: 1.5px; background: var(--border2); }
.login-sub { font-size: 12px; color: var(--sub); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; }
.login-company { font-size: 13px; color: var(--txt); font-weight: 600; letter-spacing: 0.02em; }
.support-badge {
  font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: #D97706; background: rgba(217,119,6,0.14); padding: 4px 12px; border-radius: 20px;
  border: 1px solid rgba(217,119,6,0.4); margin-top: 6px;
}
.login-card.support { border-color: rgba(217,119,6,0.5); }
.login-card .field { margin-bottom: 14px; }
.login-card label { display: block; font-size: 12px; color: var(--sub); margin-bottom: 6px; }

/* ══ Timo-Chat („Timo fragen") ══ */
.timo-chat { max-width: 760px; }
#timoFeed { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; height: 60vh; min-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.timo-msg { display: flex; gap: 10px; align-items: flex-end; }
.timo-msg.user { justify-content: flex-end; }
.timo-avatar { width: 34px; height: 34px; border-radius: 9px; overflow: hidden; flex-shrink: 0; }
.timo-avatar svg { width: 100%; height: 100%; display: block; }
.timo-avatar.big { width: 52px; height: 52px; border-radius: 13px; }
.timo-bubble { padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; max-width: 78%; word-wrap: break-word; }
.timo-bubble.user { background: var(--brand-strong); color: #fff; border-bottom-right-radius: 4px; }
.timo-bubble.timo { background: var(--card2); color: var(--txt); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.timo-bubble a { color: var(--blue); font-weight: 600; }
.timo-bubble.user a { color: #fff; text-decoration: underline; }
.timo-err { color: var(--red); }
.timo-status { color: var(--sub); font-size: 12px; }
.timo-anhaenge { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.timo-anhang { display: inline-flex; align-items: center; background: rgba(48,209,88,0.12); border: 1px solid rgba(48,209,88,0.35); color: var(--green); padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; text-decoration: none; }
.timo-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; margin: auto; color: var(--sub); font-size: 14px; line-height: 1.5; max-width: 380px; }
.timo-empty-txt strong { color: var(--txt); }
.timo-typing { display: inline-flex; gap: 4px; vertical-align: middle; }
.timo-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--sub); display: inline-block; animation: timoBlink 1.2s infinite both; }
.timo-typing i:nth-child(2) { animation-delay: 0.2s; }
.timo-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes timoBlink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.timo-compose { display: flex; gap: 10px; margin-top: 14px; }
.timo-compose input { flex: 1; }

/* ══ Modal ══ */
.modal-bg { position: fixed; inset: 0; background: rgba(8,8,10,0.8); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal-bg.show { display: flex; }
.modal { background: var(--card); border: 1px solid var(--border2); border-radius: 14px; padding: 26px; width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; }
.modal h3 { font-size: 16px; margin-bottom: 18px; }
.close-x { float: right; cursor: pointer; color: var(--muted); font-size: 20px; line-height: 1; }

/* ══ Kollisions-Hinweis (Urlaubs-Überschneidung) ══ */
.koll-row td { background: var(--surface); padding: 0 12px 12px; border-bottom: 1px solid var(--border); }
.koll-box { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; line-height: 1.4; }
.koll-warn { color: var(--amber); font-weight: 600; }
.koll-ok { color: var(--green); }

/* ══ Abwesenheits-Kalender (Monats-Raster) ══ */
.kal-legende { display: flex; flex-wrap: wrap; gap: 16px; margin: 4px 0 14px; font-size: 12px; color: var(--sub); }
.kal-legende span { display: inline-flex; align-items: center; gap: 6px; }
.kal-sw { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border2); display: inline-block; }
.kal-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.kal-table { border-collapse: collapse; width: auto; min-width: 100%; }
.kal-table th, .kal-table td { border: 1px solid var(--border); }
.kal-table thead th { position: sticky; top: 0; }
.kal-name { position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: left; padding: 6px 12px; min-width: 180px; white-space: nowrap; font-weight: 600; }
.kal-table thead .kal-name { z-index: 3; }
.kal-daynum { background: var(--surface); text-align: center; padding: 4px 0; min-width: 26px; }
.kal-dn { display: block; font-size: 12px; font-weight: 700; color: var(--txt); }
.kal-wd { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.kal-cell { width: 26px; height: 30px; padding: 0; }
.kal-we { background: var(--card2); }
.kal-feier { background: var(--card2); }
.kal-daynum.kal-we .kal-dn, .kal-daynum.kal-feier .kal-dn { color: var(--muted); }
.kal-urlaub { background: var(--green); }
.kal-krank { background: var(--red); }
.kal-abw { background: var(--muted); }
.kal-antrag { background-image: repeating-linear-gradient(45deg, var(--green) 0, var(--green) 2px, transparent 2px, transparent 6px); }
.kal-sw.kal-we { border-color: var(--border2); }