/* antraege.css — Mein-Bereich Antraege-Items (Zone C)

   Quelle: extrahiert aus mein-bereich.css ("Zone C: Antraege Items"-Block).
   Inhalt 1:1.

   Konsumenten: web/js/sections/mein-bereich.js — rendert Antraege-Liste
   im SubgridList-Pattern (.ia-item / .ia-row-inner / .ia-row-top + bottom).

   Typ-Badges (Urlaub/Krank/Sonstig) als `.ich-typ-*`-Klassen, gehoeren
   zu Antrags-Karten. Status-Badges kommen aus der globalen
   .aufgabe-status-badge-Klasse (Compound-Selektor `.ia-row-top >
   .aufgabe-status-badge`).
   ========================================================================== */

/* ── Antrags-Karten — Standard SubgridList-Pattern ────────────────────
   Gleiche Struktur wie Phasen-, Zeiteintrag- und Kontakt-Karten:
   festes 2-Zeilen-Layout, keine flex-wrap, Badges immer rechtsbuendig,
   Text truncated mit Ellipsis. Details im Drawer.
   ──────────────────────────────────────────────────────────────────── */

/* Paket MB-Visualpolish: Antraege-SubgridList soll wie Card-Header wirken,
   nicht wie Caps-Section-Label (die Karte steht neben "Urlaub & Abwesenheit"
   mit .ich-card-header — zwei Headerstile in einer Spalte waeren Bruch).
   2026-07-12 aus mb-personalantrag-drawer.css hierher gezogen (gehoert zur
   Antraege-Card, nicht zum Drawer). */
#ich-antraege-list .subgrid-header-title {
  text-transform: none;
  font-size: var(--font-size-base);
  letter-spacing: normal;
  color: var(--color-text);
}

/* Aeusserer Container (behaelt .ia-item fuer Stress-Tests + Highlight-Selektor) */
.ia-item--abgelehnt { opacity: 0.5; }
.ia-item--highlight {
  box-shadow: 0 0 0 3px var(--color-brand-accent);
  background: var(--color-brand-bg-subtle, rgba(0, 120, 212, 0.08));
  transition: box-shadow var(--duration-slow) var(--ease-soft), background var(--duration-slow) var(--ease-soft);
}

/* Inner wrapper — flex-column, volle Breite (identisch zu app-phase-aufgaben-row-inner).
   overflow: hidden verhindert, dass lange Inhalte (z.B. Schultage-Listen)
   die Karte breiter als den Container machen. */
.ia-row-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

/* Row Top: [Datum] [Typ-Badge] [Tage+Halbtag] ... [Status] [Storno] */
.ia-row-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.ia-row-date {
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: var(--fw-medium, 500);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* Tage + Halbtag: fuellt die Mitte, truncated bei Engpass */
.ia-row-tage {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Badges im Row-Top bleiben immer rechts */
.ia-row-top > .aufgabe-status-badge {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
}

/* Row Bottom: Bemerkung — einzeilig, truncated, muted */
.ia-row-bottom {
  font-size: 11px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Typ-Badges (Urlaub/Krank/Sonstig) */
.ich-typ-badge { font-size: var(--font-size-xs); font-weight: var(--fw-semibold); padding: var(--space-px) var(--space-1-5); border-radius: var(--radius-sm); flex-shrink: 0; white-space: nowrap; }
.ich-typ-urlaub { background: var(--status-info-bg); color: var(--brand-default); }
.ich-typ-krank { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.ich-typ-ausgleich { background: var(--lod-violet-50); color: var(--lod-violet-700); }
.ich-typ-sonstig { background: var(--color-bg-subtle); color: var(--color-text-muted); }

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

/* Tablet (≤999px): Antraege-Liste auf 480px Hoehe begrenzen (~6 Items à 80px).
 */
@media (max-width: 999px) {
  .ich-ub-left .ich-card.ich-card--antraege .ich-card-body--scroll { max-height: 480px; }
}

/* Mobile (<600px): Liste nutzt die ganze Card-Hoehe (kein 480px-Limit). */
@media (max-width: 599px) {
  .ich-ub-left .ich-card.ich-card--antraege .ich-card-body--scroll { max-height: none; }
}