/* absence-calendar.css — AbsenceCalendar (Team-Kalender Matrix Mitarbeiter × Monatstage)

   Design-System-Modul, Spec: docs/reference/design-system/modules/absence-calendar.md
   JS: web/js/components/calendar/absence-calendar.js

   Aufbau: .abs-cal (optionaler Head fuer Standalone-Nutzung · Scroll-Container
   mit Tabelle · Legende). Die Tabelle fuellt via table-layout: fixed + width
   100% IMMER die volle Containerbreite: die Namensspalte ist fix
   (col.abs-cal-col-name), alle Tagesspalten teilen die Restbreite
   gleichmaessig. Erst unterhalb der min-width (Namensspalte + 31 ×
   Tages-Minimum) scrollt das Grid horizontal im eigenen .abs-cal-scroll —
   nie Body-Scroll. Erste Spalte sticky.

   Abwesenheiten = durchgehende Pills (.abs-cal-seg) ueber zusammenhaengende
   Tage (Wallchart-Muster wie absentify/Timetastic): die Pill liegt absolut in
   der Start-Zelle und spannt via --abs-span ueber die Folgezellen — Breite =
   Span × Zellbreite + dazwischenliegende Grid-Linien (je 1px border-right),
   abzueglich 6px Kappen-Inset. Beantragt = schraffiert, halbtags = halbe
   Pill (morgens links / nachmittags rechts).

   Zusaetzlich am Dateiende: Toolbar-Controls der Personal-View
   „Team-Kalender" (.pv-abw-*) — Monats-Nav + Heute + Bereich-CustomSelect,
   die pv-abwesenheit.js in den PageToolbar-Controls-Host rendert. */

.abs-cal {
  /* Typ-Farben (SSOT fuer Pills + Legende + Avatar-Punkt) */
  --abs-cal-urlaub:   var(--lod-success);
  --abs-cal-krank:    var(--lod-danger);
  --abs-cal-schule:   var(--brand-default);
  --abs-cal-schulung: var(--lod-turquoise-cyan);
  --abs-cal-ausgleich: var(--lod-violet);
  --abs-cal-feiertag: var(--lod-amber-500);
  --abs-cal-sonstig:  var(--lod-gray-400);
  /* Spalten-Toenungen + Grid-Linien. Bewusst deutlich sichtbar — gray-50/
     amber-50 gingen auf dem weissen Grid optisch unter (Kyle-QA am
     Live-Screenshot, Referenz ist der klar getoente PBI-Firmenkalender). */
  --abs-cal-we-bg:       color-mix(in srgb, var(--lod-gray-200) 55%, white);
  --abs-cal-feiertag-bg: color-mix(in srgb, var(--lod-amber-500) 12%, white);
  --abs-cal-heute-bg:    var(--lod-darkblue-50);
  --abs-cal-grid-line:   var(--color-border-light);
  /* Zeilen-Hover als translucenter Overlay (background-image), damit die
     Spalten-Toenungen (Wochenende/Feiertag/Heute) darunter sichtbar bleiben —
     dafuer gibt es kein deckendes Basis-Token. */
  --abs-cal-row-hover: rgba(37, 60, 102, 0.05);

  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-family: var(--lod-font-sans);
}

/* ── Optionaler Head (nur Standalone-Nutzung mit header: true) ─────────── */
.abs-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
.abs-cal-nav { gap: var(--space-2); }
.abs-cal-month-label {
  min-width: 132px;
  text-align: center;
  font-size: var(--font-size-md);
  font-weight: var(--fw-semibold);
  color: var(--lod-darkblue);
  font-variant-numeric: tabular-nums;
}
.abs-cal-head-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  min-width: 0;
}

/* ── Scroll-Container + Tabelle ────────────────────────────────────────── */
.abs-cal-scroll {
  overflow-x: auto;
  border: 1px solid var(--lod-gray-200);
  border-radius: var(--radius-lg);
  background: var(--lod-white);
}
.abs-cal-table {
  table-layout: fixed;
  width: 100%;
  /* 240px Namensspalte + 31 × 26px Tages-Minimum = 1046px — darunter
     horizontaler Scroll statt gequetschter Zellen. */
  min-width: 1046px;
  border-collapse: separate;
  border-spacing: 0;
}
.abs-cal-col-name { width: 240px; }

/* Kopfzeile: Wochentags-Kuerzel (Mo/Di/…) ueber Tages-Nummer */
.abs-cal-day-h {
  position: relative;
  padding: var(--space-1-5) 0;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--lod-gray-200);
  border-right: 1px solid var(--abs-cal-grid-line);
  font-weight: var(--fw-regular);
}
.abs-cal-day-h:last-child { border-right: none; }
.abs-cal-dow {
  display: block;
  font-size: var(--font-size-xs);
  line-height: var(--lh-tight);
  color: var(--lod-gray-500);
}
.abs-cal-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-top: var(--space-xxs);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  color: var(--lod-gray-700);
  font-variant-numeric: tabular-nums;
}

/* Erste Spalte (Kopf + Zeilen) sticky mit deckendem Hintergrund */
.abs-cal-name-h,
.abs-cal-name {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--lod-white);
  text-align: left;
  border-right: 1px solid var(--lod-gray-200);
}
.abs-cal-name-h {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--lod-gray-600);
  border-bottom: 1px solid var(--lod-gray-200);
  vertical-align: bottom;
}
.abs-cal-name {
  padding: var(--space-1) var(--space-3);
  vertical-align: middle;
  border-bottom: 1px solid var(--abs-cal-grid-line);
}
/* Flex-Layout auf dem Inner-Wrapper — display:flex direkt auf dem <td>
   wuerde die table-cell-Box zerstoeren (table-layout: fixed). Die min-height
   entspricht der Hoehe eines ZWEIZEILIGEN Namensblocks (Name + Bereich):
   damit wird eine Zeile OHNE Bereich-Label (z.B. „Ohne Bereich") auf
   dieselbe Hoehe gehoben — sonst waere ihre Zeile niedriger als die
   zweizeiligen (Avatar allein = 28px). */
.abs-cal-name-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: 32px;
}
.abs-cal-name.is-clickable { cursor: pointer; }
.abs-cal-name.is-clickable:focus-visible {
  outline: 2px solid var(--brand-default);
  outline-offset: -2px;
}
/* Avatar-Wrapper: relativ, damit der „heute abwesend"-Punkt am Slot vorbei
   positioniert werden kann (der Slot-Inhalt wird von avatar-cache.js per
   innerHTML ersetzt — der Punkt lebt deshalb als Geschwister daneben). */
.abs-cal-avatar {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
}
.abs-cal-avatar-slot { display: inline-flex; }
.abs-cal-avatar-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-circular);
  background: var(--abs-cal-sonstig);
  box-shadow: 0 0 0 2px var(--lod-white);
}
.abs-cal-avatar-dot--urlaub   { background: var(--abs-cal-urlaub); }
.abs-cal-avatar-dot--krank    { background: var(--abs-cal-krank); }
.abs-cal-avatar-dot--schule   { background: var(--abs-cal-schule); }
.abs-cal-avatar-dot--schulung { background: var(--abs-cal-schulung); }
.abs-cal-avatar-dot--ausgleich { background: var(--abs-cal-ausgleich); }
.abs-cal-person {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.abs-cal-person-name {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--lod-fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.abs-cal-person-bereich {
  font-size: var(--fs-badge);
  line-height: var(--lh-tight);
  color: var(--lod-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tages-Zellen: zarte Grid-Linien; position: relative als Anker fuer die
   absolut positionierten Lauf-Pills (padding 0, die Pill zentriert sich
   selbst vertikal). */
.abs-cal-cell {
  position: relative;
  height: 40px;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--abs-cal-grid-line);
  border-right: 1px solid var(--abs-cal-grid-line);
}
.abs-cal-cell:last-child { border-right: none; }
.abs-cal-row:last-child .abs-cal-cell,
.abs-cal-row:last-child .abs-cal-name { border-bottom: none; }

/* Zeilen-Hover: ganze Zeile toenen (Overlay via background-image, damit
   Wochenend-/Feiertags-/Heute-Toenung darunter erhalten bleibt). */
.abs-cal-row:hover .abs-cal-cell,
.abs-cal-row:hover .abs-cal-name {
  background-image: linear-gradient(var(--abs-cal-row-hover), var(--abs-cal-row-hover));
}

/* Spalten-Toenungen — Reihenfolge = Vorrang: Wochenende < Feiertag < Heute */
.abs-cal-day-h.is-weekend,
.abs-cal-cell.is-weekend { background-color: var(--abs-cal-we-bg); }
.abs-cal-day-h.is-weekend .abs-cal-dow,
.abs-cal-day-h.is-weekend .abs-cal-num { color: var(--lod-gray-400); }
.abs-cal-day-h.is-feiertag,
.abs-cal-cell.is-feiertag { background-color: var(--abs-cal-feiertag-bg); }
.abs-cal-day-h.is-feiertag .abs-cal-num { color: var(--lod-amber-700); }
.abs-cal-day-h.is-feiertag .abs-cal-dow { color: var(--lod-amber-600); }
/* Feiertags-Marker: kleiner Punkt unter der Tages-Nummer */
.abs-cal-day-h.is-feiertag::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: var(--radius-circular);
  background: var(--lod-amber-500);
}
/* Heute-Spalte: dezente Toenung + schmaler Akzent-Balken oben im Kopf,
   Tages-Nummer als gefuellter Brand-Kreis. */
.abs-cal-day-h.is-today,
.abs-cal-cell.is-today { background-color: var(--abs-cal-heute-bg); }
.abs-cal-day-h.is-today { box-shadow: inset 0 3px 0 var(--brand-default); }
.abs-cal-day-h.is-today .abs-cal-num {
  background: var(--brand-default);
  color: var(--lod-white);
  border-radius: var(--radius-circular);
}
.abs-cal-day-h.is-today .abs-cal-dow {
  color: var(--brand-default);
  font-weight: var(--fw-semibold);
}

/* ── Lauf-Pills (durchgehende Balken ueber zusammenhaengende Tage) ─────── */
/* Basis-Skin — gilt auch fuer die Mini-Pills der Legende (dort statisch). */
.abs-cal-seg {
  --abs-chip: var(--abs-cal-sonstig);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circular);
  background: var(--abs-chip);
  color: var(--lod-white);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  line-height: 1;
}
.abs-cal-seg--urlaub   { --abs-chip: var(--abs-cal-urlaub); }
.abs-cal-seg--krank    { --abs-chip: var(--abs-cal-krank); }
.abs-cal-seg--schule   { --abs-chip: var(--abs-cal-schule); }
.abs-cal-seg--schulung { --abs-chip: var(--abs-cal-schulung); }
.abs-cal-seg--ausgleich { --abs-chip: var(--abs-cal-ausgleich); }
.abs-cal-seg--feiertag { --abs-chip: var(--abs-cal-feiertag); }
/* In der Zelle: absolut, vertikal zentriert, Breite = Lauf-Laenge in
   Zell-Prozenten (100% = Padding-Box der Start-Zelle) + 1px Grid-Linie je
   Folgezelle, abzueglich 6px Kappen-Inset (3px je Seite). */
.abs-cal-seg--cell {
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  height: 22px;
  width: calc(var(--abs-span, 1) * 100% + (var(--abs-span, 1) - 1) * 1px - 6px);
  z-index: 1;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(9, 24, 48, 0.14);
  transition: filter var(--duration-quick), box-shadow var(--duration-quick);
}
.abs-cal-seg--cell:hover {
  filter: brightness(1.07);
  box-shadow: 0 2px 6px rgba(9, 24, 48, 0.22);
}
.abs-cal-seg-text {
  padding: 0 var(--space-1-5);
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Beantragt (noch nicht genehmigt): Schraffur in aufgehellter Typ-Farbe +
   feine Kontur, Text in dunkler Typ-Farbe — liest sich als „vorlaeufig",
   bleibt aber dem Typ zuordenbar. */
.abs-cal-seg.is-beantragt {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--abs-chip) 12%, white) 0 4px,
    color-mix(in srgb, var(--abs-chip) 28%, white) 4px 8px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--abs-chip) 55%, white);
  color: color-mix(in srgb, var(--abs-chip) 78%, black);
}
.abs-cal-seg--cell.is-beantragt {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--abs-chip) 55%, white),
    0 1px 2px rgba(9, 24, 48, 0.10);
}
/* Halbtags: halbe Pill — morgens linke, nachmittags rechte Zellhaelfte
   (Zeitachse laeuft links → rechts). Immer Ein-Tages-Segmente. Der Typ-
   Buchstabe wird hart geclippt statt ellipsiert — „U…" in einer 10px-Pill
   waere Rauschen; bei breiten Zellen (Grid fuellt Container) passt er ganz. */
.abs-cal-seg--cell.is-halb-am { width: calc(50% - 4px); }
.abs-cal-seg--cell.is-halb-pm {
  left: calc(50% + 1px);
  width: calc(50% - 4px);
}
.abs-cal-seg--cell.is-halb-am .abs-cal-seg-text,
.abs-cal-seg--cell.is-halb-pm .abs-cal-seg-text {
  padding: 0 var(--space-xxs);
  text-overflow: clip;
}

/* ── Legende (dezente Zeile unter dem Grid, links) ─────────────────────── */
.abs-cal-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--lod-gray-600);
}
.abs-cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
}
.abs-cal-legend .abs-cal-seg {
  width: 26px;
  height: 14px;
  font-size: 9px;
  flex-shrink: 0;
}
/* Feiertag = Spalten-Toenung, kein Personen-Eintrag → Flaechen-Swatch. */
.abs-cal-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}
.abs-cal-legend-swatch--feiertag {
  background: var(--abs-cal-feiertag-bg);
  box-shadow: inset 0 0 0 1px var(--lod-amber-500);
}
/* Halbtags-Muster: graue Tages-Spur mit halber Pill links (morgens). */
.abs-cal-legend-halb {
  display: inline-flex;
  align-items: center;
  width: 26px;
  height: 14px;
  border-radius: var(--radius-circular);
  background: color-mix(in srgb, var(--lod-gray-200) 70%, white);
  overflow: hidden;
  flex-shrink: 0;
}
.abs-cal-legend-halb .abs-cal-seg {
  width: 50%;
  height: 100%;
  border-radius: var(--radius-circular);
}

/* ── Toolbar-Controls der Personal-View „Team-Kalender" ────────────────── */
/* pv-abwesenheit.js rendert diese Controls in den stabilen Controls-Host
   der PageToolbar (slots.center aus personal.js): Monats-Nav (app-month-nav-
   Klassen) + Heute-Button (app-tb-btn) + Bereich-Filter als CustomSelect. */
.pv-abw-controls {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: nowrap;
}
.pv-abw-month-label {
  min-width: 120px;
  text-align: center;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--lod-darkblue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pv-abw-bereich {
  position: relative;
  width: 180px;
  flex-shrink: 0;
}
.pv-abw-bereich .select[data-cs-trigger] { height: 36px; }

/* ── Toolbar-Controls des Mein-Bereich-Firmenkalenders ─────────────────── */
/* mb-firmenkalender.js rendert diese in den PageToolbar-slots.left (MbvShell-
   Toolbar-Bar): Monats-Nav (app-month-nav-*) + „Heute" (app-tb-btn) +
   Monats-Label + Bereich-CustomSelect. Analog zu .pv-abw-* der Personal-View,
   nur ohne eigenen Controls-Host (die PageToolbar layoutet die Slots selbst). */
.mb-fk-nav { gap: var(--space-1-5); }
.mb-fk-month-label {
  min-width: 120px;
  text-align: center;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--lod-darkblue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mb-fk-bereich {
  position: relative;
  width: 180px;
  flex-shrink: 0;
}
.mb-fk-bereich .select[data-cs-trigger] { height: 36px; }

/* ── Breakpoints (Range-Form wie pv-drawer.css/personal.css) ──────────────────
   Nicht-kumulativ: die Bänder sind disjunkt (min+max), nicht desktop-first
   gestapelt. Der frühere max-width-only-Stack vererbte das Namensspalten-Padding
   und die Monats-Label-Größe des Tablet-Bandes an Mobile weiter — diese zwei
   Regeln stehen im Mobile-Band jetzt explizit, damit das effektive Styling je
   Breakpoint identisch bleibt. */
/* Notebook 1000–1399px */
@media (min-width: 1000px) and (max-width: 1399px) {
  .abs-cal-col-name { width: 216px; }
  .abs-cal-table { min-width: 992px; }  /* 216 + 31 × 25px */
  .abs-cal-seg--cell { height: 20px; }
  .abs-cal-seg { font-size: 10px; }
  .pv-abw-bereich { width: 164px; }
  .mb-fk-bereich { width: 164px; }
}

/* Tablet 600–999px */
@media (min-width: 600px) and (max-width: 999px) {
  .abs-cal-col-name { width: 176px; }
  .abs-cal-table { min-width: 920px; }  /* 176 + 31 × 24px */
  .abs-cal-name-h,
  .abs-cal-name { padding-left: var(--space-2); padding-right: var(--space-2); }
  .abs-cal-cell { height: 36px; }
  .abs-cal-seg--cell { height: 18px; }
  .abs-cal-seg { font-size: 10px; }
  .abs-cal-month-label { min-width: 116px; font-size: var(--font-size-base); }
  .pv-abw-bereich { width: 150px; }
  .mb-fk-month-label { min-width: 112px; font-size: var(--font-size-base); }
  .mb-fk-bereich { width: 150px; }
}

/* Mobile <600px */
@media (max-width: 599px) {
  .abs-cal-head { flex-direction: column; align-items: stretch; }
  .abs-cal-nav { justify-content: center; }
  .abs-cal-head-actions { justify-content: center; }
  .abs-cal-col-name { width: 140px; }
  .abs-cal-table { min-width: 822px; }  /* 140 + 31 × 22px */
  /* Aus dem Tablet-Band nachgezogen (Range-Form ist nicht mehr kumulativ). */
  .abs-cal-name-h,
  .abs-cal-name { padding-left: var(--space-2); padding-right: var(--space-2); }
  .abs-cal-month-label { min-width: 116px; font-size: var(--font-size-base); }
  /* Bereich-Label hier ausgeblendet → alle Namen einzeilig; die
     Zweizeilen-min-height entfaellt (sonst waeren die Zeilen unnoetig hoch). */
  .abs-cal-person-bereich { display: none; }
  .abs-cal-name-inner { min-height: 0; }
  .abs-cal-cell { height: 32px; }
  .abs-cal-seg--cell { height: 15px; }
  .abs-cal-seg { font-size: 9px; }
  .abs-cal-seg-text { padding: 0 var(--space-1); }
  .abs-cal-avatar-dot { width: 8px; height: 8px; }
  .abs-cal-num { min-width: 18px; height: 18px; }
  .abs-cal-legend { gap: var(--space-1-5) var(--space-3); font-size: var(--font-size-xs); }
  .abs-cal-legend .abs-cal-seg { width: 22px; height: 12px; font-size: 8px; }
  .pv-abw-controls { flex-wrap: wrap; }
  .pv-abw-month-label { min-width: 104px; }
  .pv-abw-bereich { width: 140px; }
  .mb-fk-month-label { min-width: 100px; }
  .mb-fk-bereich { width: 140px; }
}