/* jahreskalender.css — Mein-Bereich Jahreskalender (Zone D)

   Quelle: extrahiert aus mein-bereich.css ("Zone D: Jahreskalender" +
   "Abwesenheitsbalken"-Bloecke). Inhalt 1:1.

   Konsumenten: web/js/sections/mein-bereich.js — rendert 12 Monatsbloecke
   in 4-Spalten-Grid (Desktop) bzw. Quartals-Lanes auf Mobile. Drag-Select
   markiert Tagesbereiche und oeffnet einen Type-Chooser-Popup
   (Urlaub / Krank / Schule).

   Klassen:
   - `.ich-kalender-jahr` — Grid-Container (4 Spalten)
   - `.kalender-quartal-lane` — Wrapper-Layer (display:contents Desktop,
     sichtbar auf Mobile mit horizontalem Scroll-Snap)
   - `.monat-block`, `.monat-name`, `.monat-dow-row`, `.monat-tage-grid`
   - `.tag-zelle` + Status-Klassen (`.heute`, `.pze-feiertag`,
     `.pze-urlaub-genehmigt|-beantragt|-storno-beantragt|-storniert`,
     `.pze-krank`, `.pze-schule`, `.pze-ausgleich` (+ `.pze-storniert|-storno-beantragt`))
   - `.tag-zelle::after` als Abwesenheitsbalken mit bar-shape-Modifier
     (`.bar-single`, `.bar-start`, `.bar-mid`, `.bar-end`)
   - `.ich-drag-chooser` + `.ich-drag-opt--urlaub|-krank|-ausgleich|-schule`
   - `.ich-kal-legende`, `.ich-kal-leg-item`, `.ich-kal-leg-bar`, `.ich-kal-leg-bg`

   PZE-Tokens (var(--pze-approved-fg/bg)) liegen in tokens.css.
   ========================================================================== */

.ich-kalender-jahr { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
/* Paket Quartals-Lanes-Wrapper. Auf
 Desktop/Tablet ist der Wrapper visuell transparent (display:contents) —
 die 12 Monat-Bloecke liegen damit direkt im Grid wie zuvor. Auf Mobile
 wird der Wrapper sichtbar (eigene Spalte mit 3 Monaten gestackt, siehe
 Mobile-Block). */
.ich-kalender-jahr > .kalender-quartal-lane { display: contents; }
/* Lane-Indikator (Q1-Q4) ist nur auf Mobile sichtbar — Default versteckt,
   Mobile-Block macht ihn zu Flex sichtbar. */
.ich-kal-pagination { display: none; }
.ich-kal-nav { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.ich-kal-nav .btn-sm { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
.ich-kal-jahr-label { font-weight: var(--fw-semibold); font-size: var(--font-size-base); min-width: 44px; text-align: center; }

/* Month block — typography hierarchy */
.monat-block { padding: var(--space-2) var(--space-1-5); }
.ich-kalender-jahr { row-gap: var(--space-1); }
.ich-kalender-jahr > .monat-block:nth-child(n+5) { border-top: 1px solid var(--color-border-light); padding-top: var(--space-2); }
.monat-name { font-size: var(--font-size-base); font-weight: var(--fw-semibold); color: var(--color-text); text-align: center; margin-bottom: var(--space-1-5); }
.monat-dow-row { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: var(--space-xxs); }
.monat-dow-cell { font-size: var(--font-size-xs); color: var(--color-text-muted); text-align: center; padding: var(--space-xxs) 0; }
.monat-dow-we { color: var(--color-text-disabled); }
.monat-tage-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-px) 0; user-select: none; }

/* Day cell — base */
.tag-zelle {
  width: 100%;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  cursor: pointer;
  color: var(--color-text);
  position: relative;
}
.tag-zelle.leer { cursor: default; pointer-events: none; visibility: hidden; }
.tag-zelle.wochenende { color: var(--color-text-disabled); }
.tag-zelle:not(.leer):not(.pze-urlaub-genehmigt):not(.pze-urlaub-beantragt):not(.pze-urlaub-storno-beantragt):not(.pze-urlaub-storniert):not(.pze-krank):not(.pze-schule):not(.pze-ausgleich):hover { background: var(--color-bg-muted); border-radius: var(--radius-sm); }
.tag-zelle > span { position: relative; z-index: 1; }

/* Today: sichtbarer Rahmen um die Zelle */
.tag-zelle.heute {
  font-weight: var(--fw-bold);
  color: var(--brand-default);
  outline: 2.5px solid var(--brand-default);
  outline-offset: -1px;
  border-radius: var(--radius-xs);
}

/* Feiertag — subtle background tint */
.tag-zelle.pze-feiertag { color: var(--status-warning-fg); font-weight: var(--fw-semibold); z-index: 1; }

/* ── Abwesenheitsbalken (::after) ───────────────────────── */
.tag-zelle.pze-urlaub-genehmigt,
.tag-zelle.pze-krank,
.tag-zelle.pze-ausgleich,
.tag-zelle.pze-schule { color: var(--brand-text-on); font-weight: var(--fw-semibold); z-index: 1; }
/* PZE-Kalenderfarben — Tokens var(--pze-approved-fg/bg) in tokens.css */
.tag-zelle.pze-urlaub-beantragt { color: var(--pze-approved-fg); font-weight: var(--fw-semibold); z-index: 1; }
/* Storno-Zustaende: warning-Ton bei "Stornierung beantragt", gedimmt + durchgestrichen
   bei "Storniert". cellSuffix kommt aus StatusPill.antragStatusInfo(). */
.tag-zelle.pze-urlaub-storno-beantragt { color: var(--status-warning-fg); font-weight: var(--fw-semibold); z-index: 1; }
.tag-zelle.pze-urlaub-storniert { color: var(--color-text-disabled); font-weight: var(--fw-regular); text-decoration: line-through; z-index: 1; }
.tag-zelle.pze-schule.pze-storno-beantragt { color: var(--status-warning-fg); }
.tag-zelle.pze-schule.pze-storniert { color: var(--color-text-disabled); text-decoration: line-through; }
.tag-zelle.pze-ausgleich.pze-storno-beantragt { color: var(--status-warning-fg); }
.tag-zelle.pze-ausgleich.pze-storniert { color: var(--color-text-disabled); text-decoration: line-through; }

.tag-zelle.pze-urlaub-genehmigt::after,
.tag-zelle.pze-urlaub-beantragt::after,
.tag-zelle.pze-urlaub-storno-beantragt::after,
.tag-zelle.pze-urlaub-storniert::after,
.tag-zelle.pze-krank::after,
.tag-zelle.pze-schule::after,
.tag-zelle.pze-ausgleich::after,
.tag-zelle.pze-feiertag::after {
  content: '';
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  right: 0;
  z-index: 0;
  opacity: 0.85;
}

/* Bar colors */
.tag-zelle.pze-urlaub-genehmigt::after { background: var(--status-success-fg); }
.tag-zelle.pze-urlaub-beantragt::after { background: var(--pze-approved-bg); opacity: 1; }
.tag-zelle.pze-urlaub-storno-beantragt::after { background: var(--status-warning-bg); opacity: 1; }
.tag-zelle.pze-urlaub-storniert::after { background: var(--color-bg-muted); opacity: 0.6; }
.tag-zelle.pze-krank::after { background: var(--status-danger-fg); }
.tag-zelle.pze-schule::after { background: var(--status-review-fg); }
.tag-zelle.pze-ausgleich::after { background: var(--lod-violet); }
.tag-zelle.pze-feiertag::after { background: var(--status-warning-bg); opacity: 1; }

/* Bar shape: single = fully rounded */
.tag-zelle.bar-single::after { border-radius: var(--radius-sm); left: 2px; right: 2px; }
/* Bar shape: start = rounded left */
.tag-zelle.bar-start::after { border-radius: var(--radius-sm) 0 0 var(--radius-sm); left: 2px; }
/* Bar shape: mid = no radius, extend fully */
.tag-zelle.bar-mid::after { border-radius: 0; }
/* Bar shape: end = rounded right */
.tag-zelle.bar-end::after { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; right: 2px; }

/* Drag-select highlight */
.tag-zelle--drag-selected { background: var(--brand-bg-subtle, rgba(0, 120, 212, 0.15)) !important; color: var(--brand-default) !important; font-weight: var(--fw-semibold); border-radius: var(--radius-sm); }

/* Drag-select type chooser popup */
.ich-drag-chooser {
  position: fixed;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  /* Umbruchsicher: seit dem Ausgleich-Button koennen es 3–4 Optionen sein —
     auf schmalen Viewports umbrechen statt ueber den Rand zu wachsen. */
  max-width: min(320px, calc(100vw - 16px));
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-8);
}
.ich-drag-opt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--brand-text-on);
  cursor: pointer;
  transition: filter var(--duration-fast);
}
.ich-drag-opt:hover { filter: brightness(1.1); }
.ich-drag-opt--urlaub { background: var(--brand-default); }
.ich-drag-opt--krank { background: var(--status-danger-fg); }
/* Schule-Option fuer Azubis — gleicher Blau-Ton wie Schule-Balken im Jahreskalender */
.ich-drag-opt--schule { background: var(--status-review-fg); }
/* Arbeitszeitausgleich — gleicher Violett-Ton wie das Ausgleich-Chip im Kalender. */
.ich-drag-opt--ausgleich { background: var(--lod-violet); }

/* Legend — bar snippets */
/* Card-Footer ausserhalb Scroll-Body — haftet am unteren Card-Rand. */
.ich-kal-legende { display: flex; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-2) var(--space-4); border-top: 1px solid var(--color-border-light); flex-shrink: 0; }
.ich-kal-leg-item { display: flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.ich-kal-leg-bar { width: 20px; height: 8px; border-radius: var(--radius-xs); flex-shrink: 0; opacity: 0.85; }
.ich-kal-leg-bar--urlaub { background: var(--status-success-fg); }
.ich-kal-leg-bar--beantragt { background: var(--pze-approved-bg); border: 1px solid var(--pze-approved-fg); }
.ich-kal-leg-bar--krank { background: var(--status-danger-fg); }
.ich-kal-leg-bar--schule { background: var(--status-review-fg); }
.ich-kal-leg-bg { width: 20px; height: 8px; border-radius: var(--radius-xs); flex-shrink: 0; }
.ich-kal-leg-bg--feiertag { background: var(--status-warning-bg); border: 1px solid var(--status-warning-fg); }

/* ──────────────────────────────────────────────────────────────────────
 Responsive (extrahiert aus mein-bereich.css "Übersicht Responsive"-Block,
 ).
 ────────────────────────────────────────────────────────────────────── */

/* Notebook (≤1399px): 3-Spalten-Layout */
@media (max-width: 1399px) {
  .ich-kalender-jahr { grid-template-columns: repeat(3, 1fr); }
}

/* Tablet (≤999px): 2-Spalten-Layout */
@media (max-width: 999px) {
  .ich-kalender-jahr { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile (<600px): Jahreskalender als horizontale Quartals-Lanes (analog Kanban).
 Container = horizontaler Scroll mit scroll-snap pro Lane. Jede Lane =
 full-width-Spalte mit 3 Monaten untereinander gestackt. User swiped horizontal
 zwischen Q1/Q2/Q3/Q4 — Lane-Indikator (Dots unter dem Kalender) zeigt visuell
 die Position. Kein Peek der Nachbar-Lanes: jede Lane fuellt die Container-
 Breite genau aus, damit das Layout sauber wirkt. Navigations-Hinweis kommt
 ueber die Pagination-Dots, nicht ueber angeschnittene Nachbarn.
 Paket */
@media (max-width: 599px) {
  .ich-kalender-jahr {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .ich-kalender-jahr::-webkit-scrollbar { display: none; }
  /* Lane-Wrapper auf Mobile sichtbar (Desktop hatte display:contents).
     Lane = volle Container-Breite. */
  .ich-kalender-jahr > .kalender-quartal-lane {
    display: flex !important;
    flex-direction: column;
    flex: 0 0 100%;
    gap: var(--space-3);
    min-width: 0;
    /* overflow:hidden zwingt die inneren Grids in den Lane-Rahmen — sonst
       presst der Tag-Zellen-Inhalt das 7-Spalten-Grid breiter als die
       Lane-Breite und es entstehen "Geister-Spalten" die in die naechste
       Lane hineinragen. */
    overflow: hidden;
    scroll-snap-align: start;
  }
  /* Monat-Blocks in der Lane: full-width, kein horizontales Schrumpfen mehr */
  .ich-kalender-jahr > .kalender-quartal-lane > .monat-block {
    width: 100%;
    min-width: 0;
    /* Border-Top vom Default-Block ueberschreiben (war fuer Grid-Reihen ab Spalte 5) */
    border-top: none !important;
    padding: var(--space-2) 0 !important;
  }
  /* CSS-Grid-Trick: minmax(0, 1fr) statt 1fr — das ueberschreibt die
     implizite min-width:auto der Spalten und garantiert dass das 7-Spalten-
     Grid sich auf die Lane-Breite begrenzt, egal wie breit der Tag-Inhalt
     waere. Ohne das wuerden zweistellige Zahlen die Spaltenbreite zwingen. */
  .ich-kalender-jahr .monat-dow-row,
  .ich-kalender-jahr .monat-tage-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    min-width: 0;
  }
  /* Lane-Indikator (4 Dots Q1-Q4) unter dem Kalender-Container.
     Aktive Lane = gefuellt + brand-color, inaktive = gray-300 ring. */
  .ich-kal-pagination {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) 0 var(--space-1);
  }
  .ich-kal-pagination-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lod-gray-300);
    transition: background var(--duration-fast), transform var(--duration-fast);
  }
  .ich-kal-pagination-dot.is-active {
    background: var(--brand-default);
    transform: scale(1.25);
  }
  /* Legende ueber den Kalender schieben (statt ganz unten nach 12 Monaten).
     Legende ist Sibling zum Card-Body innerhalb .ich-card--full (flex-column). */
  .ich-ub-mid .ich-card--full > .ich-kal-legende { order: -1; border-top: none; border-bottom: 1px solid var(--color-border-light); justify-content: center; }
}

/* aus components.css extrahiert (Kal-Vorschau-Text). */
.kal-vorschau-text { font-size: var(--fs-body); color: var(--color-text-muted); white-space: pre-wrap; padding: var(--space-2) 0; }