/* ==========================================================================
 personal.css — Personal-Tab (HR: Verzeichnis / Urlaubskonten / Anträge /
 Team-Kalender)

 Konsumenten: web/js/sections/personal.js + web/js/sections/personal/pv-*.js

 SSOT-Hinweis: Section-Chrome (Toolbar/ViewSwitcher/Counter) kommt aus
 LoD.PageToolbar + ViewSwitcher. View-spezifische Controls (Jahr-Nav,
 Monats-Nav, Filter-Dropdowns) leben IM stabilen Toolbar-Controls-Host
 (.pv-toolbar-controls, slots.center — Kontrakt _pvViewControlsHost in
 personal.js); die Views rendern pro show() eine frische
 .pv-toolbar-controls-group hinein. Jahr-/Monats-Nav recycelt die
 Month-Nav-Klassen aus month-switcher.css, Filter-Dropdowns den
 CustomSelect (custom-select.css, Trigger button.select), Listen-States
 LoadState/EmptyState, die Tabelle LoDDataTable (data-table.css),
 Gruppen-Header grouped-list.css. Diese Datei enthaelt nur die Personal-
 spezifischen Layouts (Toolbar-Controls, Verzeichnis-Grid, Antrag-Grid,
 Urlaubs-Tabellen-Feinschliff, Chips/Badges).
 ========================================================================== */

/* Der ID-Selektor #tab-content-personal in layout.css (display:flex, Tab-Liste)
   schlaegt .tab-content.hidden (Klassen-Spezifitaet) — deshalb braucht jede
   Section ihre eigene .hidden-Gegenregel (Muster wie anfragen/abrechnung). */
#tab-content-personal.hidden { display: none; }

/* ── View-Host ──────────────────────────────────────────────────────────── */
#tab-content-personal > .app-scope .pv-view-host { padding: var(--space-3); }
#tab-content-personal > .app-scope .pv-view { display: flex; flex-direction: column; gap: var(--space-3); }

/* ── Toolbar-Controls-Host (stabiler slots.center in der PageToolbar) ────
   Host bleibt ueber alle Views stehen (Toolbar springt nicht); die Views
   tauschen nur die innere .pv-toolbar-controls-group aus. */
#tab-content-personal > .app-scope .pv-toolbar-controls {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-width: 0;
}
#tab-content-personal > .app-scope .pv-toolbar-controls-group {
  display: inline-flex; align-items: center; gap: var(--space-2);
  flex-wrap: nowrap;
}

/* Jahr-Switcher-Label (zwischen den Month-Nav-Pfeilen) */
#tab-content-personal > .app-scope .pv-jahr-label {
  min-width: 52px; text-align: center;
  font-size: var(--font-size-md); font-weight: var(--fw-semibold); color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* ── View-Controls in die Toolbar-Kollaps-Kette einhaengen ───────────────────
   Personals bespoke Controls (Jahr-/Monats-Nav, Heute, Filter-Selects) sind
   flex:0 0 auto und gaben nie nach → der Tier-Algorithmus opferte stattdessen
   den Counter ("N Mitarbeiter · N Abwesenheitstage") als erstes (Tier 1–2),
   sichtbar v.a. im Team-Kalender bei ausgeklappter Nav-Rail @1366px. Gegenmittel:
   ab Tier 1 (Attribut vorhanden = tier≥1) geben die Controls Breite ab, damit
   der Counter bei ueblichen Breiten erhalten bleibt.
   [data-tb-tier] matcht jeden Tier≥1 (Tier 0 entfernt das Attribut). */

/* 1) Suche darf frueher schmaler werden — in Personal ist sie reine Namens-/
   Attributsuche, 440px sind uebergross. Kleinere flex-basis senkt den gemessenen
   Platzbedarf (ToolbarResponsive misst die flex-basis), sodass Controls + Counter
   gemeinsam passen, statt den Counter zu verlieren. */
#tab-content-personal > .app-scope [data-tb-tier] .app-search-input {
  /* flex-shrink bleibt 0 (Basis-Regel) → die Suche haelt exakt diese Breite,
     kein min-width noetig. */
  flex-basis: 320px;
}
/* 2) "Heute"-Button (Team-Kalender) wird icon-only — spart Breite, Funktion
   bleibt (Kalender-Icon). Muster wie CTA-/Board-Switcher-Icon-only. */
#tab-content-personal > .app-scope [data-tb-tier] .pv-abw-controls .app-tb-btn > span { display: none; }
#tab-content-personal > .app-scope [data-tb-tier] .pv-abw-controls .app-tb-btn {
  width: 36px; padding: 0; justify-content: center; position: relative;
}
#tab-content-personal > .app-scope [data-tb-tier] .pv-abw-controls .app-tb-btn::before {
  content: ''; width: 16px; height: 16px;
  background: url('/assets/icons/fluent/calendar_ltr_24_regular.svg') no-repeat center / contain;
  opacity: 0.7;
}

/* Kompakte Filter-Dropdowns (CustomSelect-Trigger) in der Toolbar:
   .select ist per Primitive width:100% — hier auf Inhaltsbreite begrenzen und
   auf die einheitliche 36px-Toolbar-Hoehe angleichen (wie .app-tb-btn,
   .app-segmented, Board-/Month-Switcher). Fixe Hoehe + box-sizing + align-items
   (Base-Primitive) zentrieren den Text vertikal — kein asymmetrisches Padding,
   das die Controls je View unterschiedlich hoch/vertikal versetzt aussehen liess. */
#tab-content-personal > .app-scope .pv-toolbar-select { display: inline-flex; position: relative; }
#tab-content-personal > .app-scope .pv-toolbar-select .select[data-cs-trigger] {
  width: auto; min-width: 128px; max-width: 200px;
  height: 36px; box-sizing: border-box;
  padding-top: 0; padding-bottom: 0;
  font-weight: var(--fw-medium);
}

/* ══════════════════════════════════════════════════════════════
   Badges (Meta-Infos: Urlaub übrig, offene Anträge, Dringlichkeit)
   ══════════════════════════════════════════════════════════════ */
#tab-content-personal > .app-scope .pv-badge {
  display: inline-flex; align-items: center;
  padding: 1px var(--space-2); border-radius: var(--radius-pill, 999px);
  font-size: var(--fs-badge); font-weight: var(--fw-semibold); line-height: 1.5;
  white-space: nowrap;
  background: var(--color-bg-muted); color: var(--color-text-muted);
}
#tab-content-personal > .app-scope .pv-badge--success { background: var(--status-success-bg); color: var(--status-success-fg); }
#tab-content-personal > .app-scope .pv-badge--warn    { background: var(--status-warning-bg); color: var(--status-warning-fg); }
#tab-content-personal > .app-scope .pv-badge--info    { background: var(--status-info-bg);    color: var(--status-info-fg); }

/* Leere Zellen (kein Kontakt/Bereich/Urlaubswert) — gedimmter Strich haelt
   die Spalte optisch besetzt, ohne Aufmerksamkeit zu ziehen. */
#tab-content-personal > .app-scope .pv-mit-leer { color: var(--color-text-tertiary); }

/* ══════════════════════════════════════════════════════════════
   Verzeichnis — Mitarbeiter-Zeile (GroupedList renderCard)
   Festes 7-Spalten-Grid — alle Zeilen einer Liste fluchten buendig:
   [Avatar] [Name+Position] [Bereich] [Kontakt] [Urlaub] [Anträge] [Einordnung]
   ══════════════════════════════════════════════════════════════ */
#tab-content-personal > .app-scope .pv-mit-row {
  display: grid;
  grid-template-columns: 40px minmax(190px, 1.1fr) 150px minmax(210px, 1.2fr) 130px 110px 200px;
  align-items: center;
  column-gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: box-shadow var(--duration-quick) var(--ease-standard),
              border-color var(--duration-quick) var(--ease-standard);
}
#tab-content-personal > .app-scope .pv-mit-row:hover {
  box-shadow: var(--shadow-4);
  border-color: var(--color-border);
}
#tab-content-personal > .app-scope .pv-mit-row:focus-visible {
  outline: 2px solid var(--brand-default); outline-offset: 1px;
}
#tab-content-personal > .app-scope .pv-mit-avatar { display: flex; }
#tab-content-personal > .app-scope .pv-mit-main { min-width: 0; }
#tab-content-personal > .app-scope .pv-mit-name-line {
  display: flex; align-items: center; gap: var(--space-1-5);
  min-width: 0; flex-wrap: wrap;
}
#tab-content-personal > .app-scope .pv-mit-name {
  font-weight: var(--fw-semibold); color: var(--color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#tab-content-personal > .app-scope .pv-mit-position {
  font-size: var(--font-size-sm); color: var(--color-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#tab-content-personal > .app-scope .pv-mit-bereich { min-width: 0; }

/* Kontakt-Spalte: E-Mail + Telefon als dauerhaft SICHTBARE Links
   (kein Hover-Reveal), muted mit Ellipsis, Hover → Brand-Farbe. */
#tab-content-personal > .app-scope .pv-mit-kontakt {
  /* align-items: flex-start hält die mailto/tel-Anker auf Inhaltsbreite — sonst
     streckt der Column-Flex (Default stretch) sie über die ganze breite Kontakt-
     spalte, und ein Klick in den Leerraum startet einen Anruf statt die Akte zu
     öffnen. Der Zeilen-Klick (GroupedList) fällt so wieder auf die Card durch. */
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0;
}
#tab-content-personal > .app-scope .pv-mit-kontakt-link {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  min-width: 0; max-width: 100%;
  font-size: var(--font-size-sm); color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
#tab-content-personal > .app-scope .pv-mit-kontakt-link .ui-ico { flex: 0 0 auto; opacity: 0.55; }
#tab-content-personal > .app-scope .pv-mit-kontakt-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#tab-content-personal > .app-scope .pv-mit-kontakt-link:hover {
  color: var(--lod-darkblue); text-decoration: underline;
}
#tab-content-personal > .app-scope .pv-mit-kontakt-link:hover .ui-ico { opacity: 0.9; }
#tab-content-personal > .app-scope .pv-mit-kontakt-link:focus-visible {
  outline: 2px solid var(--lod-darkblue); outline-offset: 1px;
}

#tab-content-personal > .app-scope .pv-mit-urlaub,
#tab-content-personal > .app-scope .pv-mit-antraege { min-width: 0; }

/* Einordnung: 'VG: Name' + Verhältnis · Seit MM/JJJJ (Kleingedrucktes) */
#tab-content-personal > .app-scope .pv-mit-einordnung { min-width: 0; }
#tab-content-personal > .app-scope .pv-mit-vg {
  font-size: var(--font-size-sm); color: var(--color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#tab-content-personal > .app-scope .pv-mit-einordnung-sub {
  font-size: var(--fs-badge); color: var(--color-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Chips (Bereich/Partner/Azubi/Ausgeschieden) — Token-Tonalitaeten */
#tab-content-personal > .app-scope .pv-chip {
  display: inline-flex; align-items: center;
  padding: 1px var(--space-2); border-radius: var(--radius-pill, 999px);
  font-size: var(--fs-badge); font-weight: var(--fw-semibold); line-height: 1.5;
  white-space: nowrap;
  background: var(--color-bg-muted); color: var(--color-text-muted);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
#tab-content-personal > .app-scope .pv-chip--bereich { background: var(--status-info-bg);    color: var(--status-info-fg); }
#tab-content-personal > .app-scope .pv-chip--partner { background: var(--status-review-bg);  color: var(--status-review-fg); }
#tab-content-personal > .app-scope .pv-chip--azubi   { background: var(--status-success-bg); color: var(--status-success-fg); }
#tab-content-personal > .app-scope .pv-chip--austritt{ background: var(--status-keine-prio-bg); color: var(--status-keine-prio-fg); }

/* ══════════════════════════════════════════════════════════════
   Urlaubskonten — premium statt Vollbild-Excel:
   Inhalt zentriert auf Lese-Breite begrenzt, Zahlen tabular-nums,
   betonte Verfuegbar-Spalte, gedimmte Null-Werte.
   ══════════════════════════════════════════════════════════════ */
#tab-content-personal > .app-scope .pv-url-view { flex: 1; min-height: 0; }
#tab-content-personal > .app-scope .pv-url-wrap {
  width: 100%; max-width: 1560px; margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--space-2);
  flex: 1; min-height: 0;
}
#tab-content-personal > .app-scope #pv-url-table { min-height: 0; }
#tab-content-personal > .app-scope .pv-url-note {
  margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted);
}
/* Zahlen-Zellen: tabular-nums verhindert Zapplig-Spalten beim Sortieren. */
#tab-content-personal > .app-scope .pv-url-wrap .lod-dt-td.lod-dt-align-right,
#tab-content-personal > .app-scope .pv-url-wrap .lod-dt-tf.lod-dt-align-right {
  font-variant-numeric: tabular-nums;
}
#tab-content-personal > .app-scope .pv-url-null { color: var(--color-text-tertiary); }
/* Betonte Spalte 'Verfügbar (genehmigt)' — DIE Zahl, auf die HR schaut. */
#tab-content-personal > .app-scope .pv-url-avail {
  font-weight: var(--fw-semibold); color: var(--status-success-fg);
}

/* Mitarbeiter-Zelle in der DataTable (Avatar + Name) */
#tab-content-personal > .app-scope .pv-dt-person {
  display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0;
}
#tab-content-personal > .app-scope .pv-dt-person-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: var(--fw-semibold); color: var(--color-text);
}

/* ══════════════════════════════════════════════════════════════
   Anträge — Hinweis-Banner + gruppierte Zeilen
   Festes 5-Zonen-Grid — alle Zeilen fluchten buendig:
   [Avatar] [Person] [Zeitraum] [Status] [Aktionen]
   ══════════════════════════════════════════════════════════════ */

#tab-content-personal > .app-scope .pv-antrag-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 250px 160px 200px;
  align-items: center;
  column-gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: box-shadow var(--duration-quick) var(--ease-standard),
              border-color var(--duration-quick) var(--ease-standard);
}
#tab-content-personal > .app-scope .pv-antrag-row:hover {
  box-shadow: var(--shadow-4);
  border-color: var(--color-border);
}
#tab-content-personal > .app-scope .pv-antrag-row:focus-visible {
  outline: 2px solid var(--brand-default); outline-offset: 1px;
}
#tab-content-personal > .app-scope .pv-antrag-row--inaktiv { opacity: .65; }
#tab-content-personal > .app-scope .pv-antrag-avatar { display: flex; }
#tab-content-personal > .app-scope .pv-antrag-main { min-width: 0; }
#tab-content-personal > .app-scope .pv-antrag-top {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
}
#tab-content-personal > .app-scope .pv-antrag-name {
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold); color: var(--color-text);
}
#tab-content-personal > .app-scope .pv-antrag-grund {
  margin-top: 2px; font-size: var(--font-size-sm); color: var(--color-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Zeitraum-Spalte: Range prominent, 'x,5 Tage · eingereicht am DD.MM.' +
   Dringlichkeit darunter — linksbuendig in fester Spur. */
#tab-content-personal > .app-scope .pv-antrag-zeit {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 0;
}
#tab-content-personal > .app-scope .pv-antrag-zeit-range {
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold); color: var(--color-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#tab-content-personal > .app-scope .pv-antrag-zeit-sub {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  font-size: var(--font-size-sm); color: var(--color-text-muted);
  flex-wrap: wrap;
}
/* Status-Spalte: Pill + Antragsnummer klein darunter. */
#tab-content-personal > .app-scope .pv-antrag-status-col {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 0;
}
#tab-content-personal > .app-scope .pv-antrag-nr {
  font-size: var(--fs-badge); color: var(--color-text-muted); white-space: nowrap;
}
/* Aktions-Spalte: Entscheidungs-Buttons vertikal gestapelt (Storno-Labels
   sind lang); leerer Container haelt die Spalte in Nicht-Wartet-Zeilen. */
#tab-content-personal > .app-scope .pv-antrag-actions {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1);
  min-width: 0;
}
#tab-content-personal > .app-scope .pv-antrag-actions .btn-primary-sm,
#tab-content-personal > .app-scope .pv-antrag-actions .btn-outline-sm {
  width: 100%; justify-content: center; white-space: nowrap;
}

/* Typ-Badge (Urlaub/Krank/Schule) */
#tab-content-personal > .app-scope .pv-typ-badge {
  display: inline-flex; align-items: center;
  padding: 1px var(--space-2); border-radius: var(--radius-pill, 999px);
  font-size: var(--fs-badge); font-weight: var(--fw-semibold); line-height: 1.5; white-space: nowrap;
}
#tab-content-personal > .app-scope .pv-typ-urlaub  { background: var(--status-success-bg); color: var(--status-success-fg); }
#tab-content-personal > .app-scope .pv-typ-krank   { background: var(--status-danger-bg);  color: var(--status-danger-fg); }
#tab-content-personal > .app-scope .pv-typ-schule  { background: var(--status-vorgeschlagen-bg); color: var(--status-vorgeschlagen-fg); }
#tab-content-personal > .app-scope .pv-typ-sonstig { background: var(--color-bg-muted); color: var(--color-text-muted); }

/* ══════════════════════════════════════════════════════════════
   Responsive (Notebook 1000–1399 · Tablet 600–999 · Mobile <600)
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1000px) and (max-width: 1399px) {
  #tab-content-personal > .app-scope .pv-view-host { padding: var(--space-3); }
  /* Verzeichnis: Einordnung-Spalte faellt weg (Details stehen in der Akte). */
  #tab-content-personal > .app-scope .pv-mit-row {
    grid-template-columns: 40px minmax(180px, 1.1fr) 140px minmax(200px, 1.2fr) 120px 100px;
  }
  #tab-content-personal > .app-scope .pv-mit-einordnung { display: none; }
  /* Anträge: Spuren enger, Aktionen bleiben erreichbar. */
  #tab-content-personal > .app-scope .pv-antrag-row {
    grid-template-columns: 36px minmax(0, 1fr) 230px 140px 180px;
  }
}
@media (min-width: 600px) and (max-width: 999px) {
  #tab-content-personal > .app-scope .pv-view-host { padding: var(--space-2); }
  /* Verzeichnis: Kontakt + Einordnung weg, Urlaub/Anträge-Meta rutscht als
     zweite Zeile unter Name/Position (Bereich bleibt rechts in Zeile 1). */
  #tab-content-personal > .app-scope .pv-mit-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    row-gap: var(--space-1);
  }
  #tab-content-personal > .app-scope .pv-mit-kontakt,
  #tab-content-personal > .app-scope .pv-mit-einordnung { display: none; }
  #tab-content-personal > .app-scope .pv-mit-bereich { grid-column: 3; grid-row: 1; justify-self: end; }
  #tab-content-personal > .app-scope .pv-mit-urlaub { grid-column: 2; grid-row: 2; }
  #tab-content-personal > .app-scope .pv-mit-antraege { grid-column: 3; grid-row: 2; justify-self: end; }
  /* Anträge: Zeitraum unter die Person, Status rechts, Aktionen als dritte
     Zeile nebeneinander. */
  #tab-content-personal > .app-scope .pv-antrag-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    row-gap: var(--space-1);
  }
  #tab-content-personal > .app-scope .pv-antrag-status-col { grid-column: 3; grid-row: 1; align-items: flex-end; }
  #tab-content-personal > .app-scope .pv-antrag-zeit { grid-column: 2 / 4; grid-row: 2; }
  #tab-content-personal > .app-scope .pv-antrag-actions {
    grid-column: 2 / 4; grid-row: 3;
    flex-direction: row; justify-content: flex-start;
  }
  #tab-content-personal > .app-scope .pv-antrag-actions:empty { display: none; }
  #tab-content-personal > .app-scope .pv-antrag-actions .btn-primary-sm,
  #tab-content-personal > .app-scope .pv-antrag-actions .btn-outline-sm { width: auto; }
}
@media (max-width: 599px) {
  #tab-content-personal > .app-scope .pv-view-host { padding: var(--space-2); }
  /* Toolbar-Controls duerfen umbrechen (Jahr-Nav + Reset bzw. 2 Dropdowns). */
  #tab-content-personal > .app-scope .pv-toolbar-controls-group { flex-wrap: wrap; }
  #tab-content-personal > .app-scope .pv-toolbar-select .select[data-cs-trigger] { min-width: 112px; }
  /* Verzeichnis: 2-Zeilen-Stack — Zeile 1 Avatar+Name, Zeile 2 Chips/Badges,
     Zeile 3 Kontakt (tel: ist auf dem Handy die wichtigste Aktion). */
  #tab-content-personal > .app-scope .pv-mit-row {
    grid-template-columns: 40px minmax(0, 1fr);
    row-gap: var(--space-1);
  }
  #tab-content-personal > .app-scope .pv-mit-einordnung { display: none; }
  #tab-content-personal > .app-scope .pv-mit-bereich,
  #tab-content-personal > .app-scope .pv-mit-urlaub,
  #tab-content-personal > .app-scope .pv-mit-antraege {
    grid-column: 2; grid-row: auto;
    display: inline-flex; gap: var(--space-1-5); flex-wrap: wrap;
  }
  #tab-content-personal > .app-scope .pv-mit-antraege:empty { display: none; }
  #tab-content-personal > .app-scope .pv-mit-kontakt { grid-column: 2; grid-row: auto; }
  /* Anträge: alles stapelt in der Textspur, Aktionen volle Breite. */
  #tab-content-personal > .app-scope .pv-antrag-row {
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: var(--space-2);
    row-gap: var(--space-1);
  }
  #tab-content-personal > .app-scope .pv-antrag-zeit,
  #tab-content-personal > .app-scope .pv-antrag-status-col,
  #tab-content-personal > .app-scope .pv-antrag-actions { grid-column: 2; grid-row: auto; }
  #tab-content-personal > .app-scope .pv-antrag-zeit-range { white-space: normal; }
  #tab-content-personal > .app-scope .pv-antrag-status-col { flex-direction: row; align-items: center; }
  #tab-content-personal > .app-scope .pv-antrag-actions:empty { display: none; }
}