:root, [data-bs-theme="light"] {
  --line: #dde2e7;
  --line-strong: #9aa5b1;
  --off: #e9edf1;
  --accent: #0d6efd;
  --name-w: 250px;
  --cell-w: 24px;
  --head-h: 28px;
  --ferien: #fff8e1;
  --ferien-strong: #ffe8a3;
  /* Feiertage/Sonderfeiertage in derselben Intensität wie die Ferien: Kopf pastell, Spalte nur leicht getönt */
  --hol: #f8d7d3;
  --hol-strong: #f6c9c5;
  --hol-text: #a8322c;
  --clo: #fbe2c2;
  --clo-strong: #fbdcb5;
  --clo-text: #9a5208;
  --ferien-text: #7a5d00;
  --surface: var(--bs-body-bg);   /* Hintergrund von Raster und Tabellen */
  --surface-2: #f6f8fa;           /* Kopfzellen, Kennzahl-Kästchen */
  --mix: #fff;                    /* Grundton, mit dem Arten-/Personenfarben aufgehellt werden */
  --hover: #f3f7fb;
  --mine-row: #eaf2ff;
  --today-col: #f3f8ff;
  --conflict-bg: #fdecea;
  --ok-text: #1a7f45;
  --danger-text: #b3261e;
}

/* Dunkelmodus: Bootstrap schaltet über data-bs-theme="dark" am <html>-Element um, hier die eigenen Farben */
[data-bs-theme="dark"] {
  /* Bootstrap: Seitenhintergrund #0A0A0A, Flächen (Navigationsleiste, Dialoge, Eingabefelder) leicht abgestuft */
  --bs-body-bg: #0a0a0a;
  --bs-body-bg-rgb: 10, 10, 10;
  --bs-secondary-bg: #1a1a1a;
  --bs-secondary-bg-rgb: 26, 26, 26;
  --bs-tertiary-bg: #141414;
  --bs-tertiary-bg-rgb: 20, 20, 20;
  --bs-border-color: #2e2e2e;

  --line: #262626;
  --line-strong: #4a4a4a;
  --off: #181818;
  --ferien: #1d1a0f;
  --ferien-strong: #4d4013;
  --ferien-text: #f1d57a;
  --hol: #3d1b1a;
  --hol-strong: #5c2622;
  --hol-text: #f6b6b0;
  --clo: #3b2a10;
  --clo-strong: #5c3a0e;
  --clo-text: #f7c68c;
  --surface-2: #141414;
  --mix: #0a0a0a;
  --hover: #161b22;
  --mine-row: #10203a;
  --today-col: #0f1824;
  --conflict-bg: #2e1314;
  --ok-text: #5fd08f;
  --danger-text: #f2948c;
}

.narrow { max-width: 420px; }

.navbar-brand.brand { letter-spacing: .08em; }
.brand-block { text-align: center; }
.brand-logo { font-size: 44px; font-weight: 800; letter-spacing: .12em; line-height: 1; color: var(--accent); }
.brand-long { margin-top: 6px; font-size: 13px; color: var(--bs-secondary-color); }
.brand-long b { color: var(--bs-body-color); }

#themeToggle { width: 2.1rem; padding-left: 0; padding-right: 0; }

/* ---------- Teamübersicht: Seite füllt das Fenster, nur das Raster scrollt ---------- */

body.planner { display: flex; flex-direction: column; height: 100vh; }
body.planner main { flex: 1; overflow: auto; background: var(--surface); }

.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }

.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--bs-secondary-color); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 18px; height: 13px; border-radius: 3px; }
.legend i.ferien { background: var(--ferien-strong); }
.legend i.hol { background: var(--hol-strong); }
.legend i.clo { background: var(--clo-strong); }
.legend .sep { width: 1px; background: var(--line); }

/* ---------- Jahresraster ---------- */

#grid { border-collapse: separate; border-spacing: 0; user-select: none; font-size: 14px; }

#grid th, #grid td {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0;
}

#grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: var(--head-h);
  background: var(--surface);
  font-weight: 600;
}
#grid thead tr:nth-child(2) th { top: var(--head-h); height: 36px; }
#grid thead tr:nth-child(3) th { top: calc(var(--head-h) + 36px); height: 18px; }

/* Ferienzeile; der Name ist absolut positioniert, damit er die Spalten nicht verbreitert */
#grid th.ferien { background: var(--ferien-strong); }
#grid th.ferien span {
  position: absolute;
  inset: 0 4px;
  overflow: hidden;
  font-size: 10px;
  font-weight: 600;
  line-height: 18px;
  color: var(--ferien-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#grid th.corner, #grid th.name {
  position: sticky;
  left: 0;
  width: var(--name-w);
  min-width: var(--name-w);
  max-width: var(--name-w);
  padding: 3px 10px;
  text-align: left;
  background: var(--surface);
  border-right: 2px solid var(--line-strong);
}
#grid th.corner { z-index: 4; }
#grid th.name { box-shadow: inset 5px 0 0 var(--pc, transparent); padding-left: 14px; }
#grid th.name { z-index: 1; font-weight: 500; line-height: 1.3; }
#grid tr.mine th.name { background: var(--mine-row); font-weight: 700; }
#grid th.name div { display: flex; align-items: baseline; gap: 8px; }
#grid th.name a { color: inherit; text-decoration: none; }
#grid th.name a:hover { text-decoration: underline; }
#grid th.name div span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#grid th.name b { font-size: 11px; font-weight: 600; color: var(--ok-text); white-space: nowrap; }
#grid th.name b.over { color: var(--danger-text); }
#grid th.name i.plan-warn {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e0962b;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  align-self: center;
}
#grid th.name small { display: block; font-size: 11px; font-weight: 400; color: var(--bs-secondary-color); white-space: nowrap; }

#grid th.month { text-align: left; border-left: 1px solid var(--line-strong); }
#grid th.month span { position: sticky; left: calc(var(--name-w) + 8px); padding: 0 8px; }

#grid th.day {
  width: var(--cell-w);
  min-width: var(--cell-w);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
}
#grid th.day small { display: block; font-size: 10px; color: var(--bs-secondary-color); }

#grid td { position: relative; width: var(--cell-w); min-width: var(--cell-w); height: 40px; }
#grid tr.editable td { cursor: cell; }
#grid tr.editable:hover td:not(.off) { background-color: var(--hover); }

#grid .ms { border-left: 1px solid var(--line-strong); }
#grid td.fe:not(.off) { background-color: var(--ferien); }
#grid .off { background-color: var(--off); }

/* Feiertage (rot) und Sonderfeiertage (orange) heben sich wie die Ferien als ganze Spalte ab */
#grid th.day.holiday, #grid th.hol-band { color: var(--hol-text); background: var(--hol-strong); }
#grid th.day.closure, #grid th.clo-band { color: var(--clo-text); background: var(--clo-strong); }
#grid th.day.holiday small { color: var(--hol-text); }
#grid th.day.closure small { color: var(--clo-text); }
#grid td.hol { background-color: var(--hol); }
#grid td.clo { background-color: var(--clo); }
/* Betriebsurlaub (Sonderfeiertag, für den man Urlaub nehmen muss): schraffiert statt gefüllt, Spalte bleibt Arbeitstag */
#grid th.day.closure-work { color: var(--clo-text); box-shadow: inset 0 -3px 0 var(--clo-strong); }
#grid th.day.closure-work small { color: var(--clo-text); }
#grid th.cln-band, .legend i.cln {
  background: repeating-linear-gradient(135deg, var(--clo-strong) 0 4px, var(--clo) 4px 8px);
}
#grid td.cln:not(.off) { background-image: repeating-linear-gradient(135deg, var(--clo) 0 5px, transparent 5px 10px); }
#grid th.day.today { background: var(--accent); color: #fff; }
#grid th.day.today small { color: #fff; }
#grid td.today::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent);
  pointer-events: none;
}
#grid td.sel { background: color-mix(in srgb, var(--accent) 35%, var(--mix)) !important; }

/* Einträge sind Balken im Tag: ganz, nur Vormittag (linke Hälfte) oder nur Nachmittag (rechte Hälfte).
   --c ist die Farbe der Art, die Klasse st-<status> bestimmt die Darstellung. */
#grid td .e { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
#grid td .e.am { right: 50%; }
#grid td .e.pm { left: 50%; }
#grid td .e.rest { opacity: .35; }
#grid tr.editable td .e { cursor: pointer; }

#grid .e, .legend i { background: var(--c); }
#grid .st-geplant, .legend i.st-geplant {
  background: repeating-linear-gradient(135deg, var(--c) 0 4px, color-mix(in srgb, var(--c) 25%, var(--mix)) 4px 8px);
}
#grid .st-beantragt, .legend i.st-beantragt {
  background: color-mix(in srgb, var(--c) 45%, var(--mix));
  box-shadow: inset 0 4px 0 var(--c), inset 0 -4px 0 var(--c);
}

/* ---------- Urlaubskonto ---------- */

.account-table tr.sum > * { font-weight: 700; border-top: 2px solid var(--line-strong); }

.my-vacation { width: 26rem; max-width: calc(100vw - 24px); }
.my-vacation .vac-list { max-height: 50vh; overflow-y: auto; }
.vac-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.vac-stats div { padding: 6px 4px; background: var(--surface-2); border-radius: 6px; }
.vac-stats strong { display: block; font-size: 18px; line-height: 1.2; }
.vac-stats span { font-size: 11px; color: var(--bs-secondary-color); }
.vac-list td { padding-top: 3px; padding-bottom: 3px; }
.vac-list tr.past td { color: var(--bs-secondary-color); }
.vac-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--c); align-self: center; }

/* ---------- Hotline-Schichtplan (Wochen-Stundenplan) ---------- */

.shift-week { width: 100%; min-width: 760px; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.shift-week th, .shift-week td {
  padding: 6px;
  vertical-align: top;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.shift-week thead th { text-align: center; background: var(--surface-2); border-top: 1px solid var(--line); }
.shift-week thead th.today { color: #fff; background: var(--accent); }
.shift-week thead th.past { color: var(--bs-secondary-color); }
.shift-week th.corner, .shift-week th.shift-name { width: 7.5rem; border-left: 1px solid var(--line); }
.shift-week th.shift-name { vertical-align: middle; background: var(--surface-2); }
.shift-week .closed-name { font-size: 11px; font-weight: 400; }
.shift-week td.today { background: var(--today-col); }
.shift-week td.closed { background: var(--hol); }
.shift-week thead th.closed { color: var(--hol-text); background: var(--hol-strong); }
.shift-week td.past { filter: grayscale(1); opacity: .45; }   /* Grauschleier für vergangene Schichten */
.shift-time { font-size: 11px; color: var(--bs-secondary-color); }
.shift-slots { display: flex; flex-direction: column; gap: 4px; margin-top: 3px; }

/* Schicht einer Person: --pc ist die Personenfarbe */
.chip {
  padding: 4px 8px;
  font-size: 13px;
  line-height: 1.3;
  background: color-mix(in srgb, var(--pc, #9aa5b1) 16%, var(--mix));
  border: 1px solid color-mix(in srgb, var(--pc, #9aa5b1) 40%, var(--mix));
  border-left: 5px solid var(--pc, #9aa5b1);
  border-radius: 5px;
}
.chip.mine { font-weight: 700; box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc) 55%, var(--mix)); }
.chip.conflict { background: var(--conflict-bg); border: 2px solid #d9534f; border-left-width: 5px; }
.chip.open { color: var(--bs-secondary-color); background: var(--surface); border: 1px dashed var(--line-strong); }
.chip-warn, .chip-note { display: block; font-size: 11px; font-weight: 400; }
.chip-warn { color: var(--danger-text); }
.chip-note { color: var(--bs-secondary-color); }

.shift-week.interactive .chip[draggable="true"] { cursor: grab; user-select: none; }
.chip.dragging { opacity: .4; }
.chip.drop-target { outline: 2px solid var(--accent); outline-offset: 1px; }

.shift-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.shift-legend span { display: inline-flex; align-items: center; gap: 6px; }
.shift-legend .chip { display: inline-block; width: 24px; height: 16px; padding: 0; box-shadow: none; }
.shift-legend .chip.past-sample { filter: grayscale(1); opacity: .45; }

.plan-table tr.shift-start > * { border-top: 2px solid var(--line-strong); }
.plan-table select { min-width: 9rem; }
.times-table input { max-width: 9rem; }