/**
 * sections/abwesenheiten/abwesenheiten.css — Startseite „Abwesenheiten" (Modul hr).
 *
 * Self-scoped `.abw-*` unter der Section-Wurzel. NUR Layout und Rhythmus dieser
 * Fläche — jeder Baustein (KpiTiles, AbsenceCalendar, Pills, EmptyState,
 * app-cta-btn) bringt seine Optik selbst mit. Vier Breakpoints.
 *
 * Typo-Staffelung wie in den Einstellungen: Block-Titel --fs-card-title/600,
 * Kurztext --fs-meta, Inhalt --fs-body. Ein Block-Titel trägt NIE dieselbe
 * Größe UND Stärke wie die Zeilen darunter.
 */

.abw-wrap { display: flex; flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-6); }

/* ── Toolbar-Kopf (Titel links, Antrags-Aktionen rechts) ──────────────────── */
.abw-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); width: 100%; min-width: 0; }
.abw-toolbar-titel { min-width: 0; }
.abw-h1 { margin: 0; font-size: var(--fs-section, 16px); font-weight: var(--fw-semibold); color: var(--color-text); line-height: 1.25; }
.abw-sub { margin: 2px 0 0; font-size: var(--fs-meta, 12px); color: var(--color-text-muted); }
.abw-toolbar-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }

/* ── Block (umrandete Fläche mit getöntem Kopf — gleiche Sprache wie Settings) ── */
.abw-block {
  border: 1px solid var(--lod-gray-150, #e5e8ec);
  border-radius: var(--radius-lg, 10px);
  background: var(--color-surface, #fff);
  overflow: hidden;
}
.abw-block-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--lod-gray-50, #f7f8fa);
  border-bottom: 1px solid var(--lod-gray-150, #e5e8ec);
}
.abw-block-titel {
  margin: 0; font-size: var(--fs-card-title, 14px); font-weight: var(--fw-semibold);
  color: var(--color-text); letter-spacing: -.01em; flex-shrink: 0;
}
.abw-block-thema {
  font-size: var(--fs-meta, 12px); color: var(--color-text-muted);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.abw-block > *:not(.abw-block-head) { padding: var(--space-3) var(--space-4) var(--space-4); }

/* Zwei gleichwertige Spalten: „Wer fehlt" und „Meine Abwesenheiten". */
.abw-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }

/* ── Segment-Umschalter (Heute / Diese Woche) ─────────────────────────────── */
.abw-seg { display: inline-flex; gap: 2px; padding: 2px; margin-left: auto; background: var(--lod-gray-100, #eef0f3); border-radius: var(--radius-md); flex-shrink: 0; }
.app-scope .abw-seg-btn {
  padding: var(--space-1) var(--space-2-5); border: none; background: transparent; cursor: pointer;
  font-size: var(--fs-meta, 12px); font-weight: var(--fw-medium); color: var(--lod-gray-700);
  border-radius: var(--radius-sm);
}
.app-scope .abw-seg-btn:hover { color: var(--lod-darkblue); }
.app-scope .abw-seg-btn.is-active { background: var(--color-surface, #fff); color: var(--lod-darkblue); font-weight: var(--fw-semibold); box-shadow: var(--shadow-2, 0 1px 2px rgba(0,0,0,.08)); }

/* Konten-Block: Breiten-Deckel nach Kachelzahl — EINE Kachel auf 1400px sieht
   nach Fehler aus, drei duerfen die Flaeche nehmen. */
.abw-konten--1 { max-width: 460px; }
.abw-konten--2 { max-width: 920px; }

/* ── „Wer fehlt"-Liste ───────────────────────────────────────────────────── */
.abw-wer-liste, .abw-meine-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.abw-wer {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--space-3);
  min-height: 48px; padding: var(--space-2) 0;
}
.abw-wer + .abw-wer, .abw-meine-row + .abw-meine-row { border-top: 1px solid var(--lod-gray-100); }
/* Beantragt (noch nicht genehmigt) = gedämpft, damit „sicher weg" vom „vielleicht weg" unterscheidbar bleibt. */
.abw-wer.is-beantragt { opacity: .68; }
.abw-wer-avatar { flex-shrink: 0; display: inline-flex; }
.abw-wer-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.abw-wer-name { font-size: var(--fs-body, 14px); font-weight: var(--fw-medium); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abw-wer-bereich { font-size: var(--fs-meta, 12px); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abw-wer-art { font-size: var(--fs-meta, 12px); color: var(--color-text-secondary); white-space: nowrap; }
.abw-wer-dauer { font-size: var(--fs-meta, 12px); color: var(--color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── „Meine Abwesenheiten" / „Zu entscheiden" ────────────────────────────── */
.abw-meine-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--space-3);
  min-height: 52px; padding: var(--space-2) var(--space-1);
  cursor: pointer; border-radius: var(--radius-md);
}
.abw-meine-row:hover { background: var(--lod-gray-50); }
.abw-meine-row:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
/* Farbstrich in der Farbe der Abwesenheitsart (kommt aus dem Katalog). */
.abw-meine-strich { width: 4px; align-self: stretch; min-height: 32px; border-radius: var(--radius-pill-sm); background: var(--lod-gray-300); }
.abw-meine-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.abw-meine-titel { font-size: var(--fs-body, 14px); font-weight: var(--fw-medium); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abw-meine-zeit { font-size: var(--fs-meta, 12px); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abw-mehr { margin: var(--space-2) 0 0; font-size: var(--fs-meta, 12px); color: var(--color-text-muted); }

/* ── Monats-Navigation im Kalender-Kopf ─────────────────────────────────── */
.abw-monat-nav { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; flex-shrink: 0; }
.abw-monat-label {
  font-size: var(--fs-body, 14px); font-weight: var(--fw-semibold); color: var(--color-text);
  min-width: 11ch; text-align: center; font-variant-numeric: tabular-nums;
}

/* ── Notebook: Kalender braucht die volle Breite ─────────────────────────── */
@media (max-width: 1399px) {
  .abw-spalten { gap: var(--space-3); }
}

/* ── Tablet: die zwei Spalten stapeln ───────────────────────────────────── */
@media (max-width: 999px) {
  .abw-spalten { grid-template-columns: minmax(0, 1fr); }
  .abw-toolbar { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .abw-toolbar-actions { justify-content: flex-start; }
}

/* ── Mobile: nur das Wesentliche je Zeile ───────────────────────────────── */
@media (max-width: 599px) {
  .abw-wrap { gap: var(--space-3); }
  .abw-block-head { flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3); }
  .abw-block > *:not(.abw-block-head) { padding: var(--space-2) var(--space-3) var(--space-3); }
  .abw-block-thema { white-space: normal; }
  /* Art und Dauer wandern unter den Namen — vier Spalten sind hier zu viel. */
  .abw-wer { grid-template-columns: auto minmax(0, 1fr); }
  .abw-wer-art, .abw-wer-dauer { grid-column: 2; font-size: var(--fs-badge, 11px); }
  .abw-monat-nav { width: 100%; justify-content: space-between; margin-left: 0; }
  .abw-monat-label { min-width: 0; flex: 1; }
  .abw-toolbar-actions .app-cta-btn { flex: 1 1 auto; }
}