/* ============================================================
   idf-anwesenheit.css v0.1.0 - Abwesenheiten: Status-Farben + Antrags-Form

   Bewusst klein. Die Geometrie der Pillen kommt aus `.idf-pill-tag`
   (functions/list-view/grid-css), die Zeile aus `.idf-sa-o2m-item`, das
   Formular aus `blocks/forms`. Hier stehen nur:

     1. die drei Status-Farben (welche Farbe „beantragt" hat, kann kein
        anderer Baustein wissen),
     2. drei Kleinteile des Antrags-Formulars.

   Das Schema der Status-Tints ist dasselbe wie bei der Save-Pille des
   Standard-Artefakts: gelb = wartet, gruen = erledigt, rot = Problem.
   Deshalb hier dieselben Token-Paare und keine neuen Farben.

   Laedt mit $useAnwesenheit (page-styles) und ueber den Lazy-Stack des
   Sidebar-Avatars. Siehe _shared/domain/anwesenheit/README.md.
   ============================================================ */

/* ---------- Status-Pille ---------- */

.idf-abw-status[data-status="beantragt"] { background: var(--tint-yellow);  color: var(--yellow-text); }
.idf-abw-status[data-status="genehmigt"] { background: var(--tint-confirm); color: var(--confirm); }
.idf-abw-status[data-status="abgelehnt"] { background: var(--tint-primary); color: var(--primary); }

/* Typ-Pille: neutral wie jedes andere Domain-Tag. Sie traegt bewusst KEINE
   Farbe je Typ - „Krank" rot einzufaerben machte aus einer Zeile, die
   Kollegen sowieso nur als „abwesend" sehen duerfen, ein Signal quer durch
   den Raum. Ohne Leserecht steht dort `unbekannt`; dann auch optisch
   zuruecknehmen, damit die Zeile nicht so aussieht, als fehle etwas. */
.idf-abw-typ[data-typ="unbekannt"] { color: var(--soft); }

/* ---------- Haken und Kreuz (entscheiden) ---------- */

/* Geometrie, Ruhezustand und Hover kommen aus `.idf-list-done-pill`. Hier
   steht nur die FARBE des aktiven Kreuzes: die Pille faerbt sich aktiv
   gruen, weil sie fuer „erledigt" gebaut ist. Eine gruene Ablehnung ist
   aber genau die falsche Auskunft - der Zustand ist derselbe Rot-Ton, den
   die abgelehnt-Pille daneben traegt. Additiv, die Geometrie bleibt
   unberuehrt. */
.idf-abw-nein.is-active,
.idf-abw-nein.is-active:hover {
  background: var(--primary);
  color: var(--white);
}

/* ---------- Zeile im Reiter ---------- */

/* Tage, Status und die Aktionen ruecken nach rechts, der Zeitraum bleibt
   links: in einer Spalte gelesen sind die Zahlen damit untereinander.
   Im o2m-Reiter besorgt das schon `.idf-sa-o2m-item .idf-sa-relation-label
   { flex: 1 1 auto }`; `margin-left: auto` haelt die Klasse ausserhalb
   dieser Zeile eigenstaendig (Team-Liste, Tranche C) und ueberschreibt
   dort nichts. */
.idf-abw-tage {
  margin-left: auto;
  color: var(--mid);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Antrags-Formular ---------- */

.idf-abw-halb[hidden] { display: none; }

/* Der Hinweis ist ein <p>, kein <div>: nur fuer den <p>-Zweig laesst
   blocks/forms den Fliesstext ein Block-Element bleiben. Ein <div> waere
   dort ein Grid, und jedes <strong> mitten im Satz bekaeme eine eigene
   Zeile (Joerg 15.08.2026 am Antrags-Formular). Den Abstand setzt laut
   Shared-Regel der Konsument, deshalb `margin` hier. */
.idf-abw-hint {
  margin: 0;
  font-size: var(--font-sm);
  color: var(--mid);
  min-height: 1.2em;
  line-height: 1.5;
}
.idf-abw-hint strong { color: var(--ink); }