/**
 * aufgaben-planung.css - die Arbeitsplanung (#710 T1)
 *
 * Nur was diese Seite selbst braucht: die Zweiteilung, der Kapazitäts-Ring am
 * Zeilenkopf und der Inhalt einer Karte. Zeilen, Karten-Rahmen und Drag-Optik
 * kommen aus blocks/kanban und idf-sortable, der Ring aus
 * primitives/progress-ring. Farben und Größen ausschließlich aus den Tokens.
 */

/* ------------------------------------------------------------------ */
/* Zweiteilung                                                         */
/*                                                                     */
/* Links der Vorrat, rechts die Woche. Der Vorrat ist schmal und lang  */
/* (Karten stapeln), die Woche breit (Karten fließen in der Zeile) -   */
/* deshalb keine zwei gleich großen Hälften.                           */
/* ------------------------------------------------------------------ */
/* Feste Breite links, nicht minmax: mit einer elastischen Spalte springt die
   Vorratsleiste bei jedem Filterklick in der Breite, weil die Spalte dem
   Inhalt folgt (Joerg, 25.08.2026). Eine Leiste, die sich beim Filtern
   bewegt, zwingt das Auge nach jedem Klick zurück auf die Suche. */
.ap-split {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: var(--space-4);
  align-items: start;
}

.ap-seite {
  min-width: 0;   /* sonst sprengt eine lange Karte die Grid-Spalte */
}

/* In den Zeilenköpfen stehen Namen und Stundenzahlen, also Inhalt und keine
   Kategorie-Labels. Der Baustein setzt dort per Vorgabe 12 px in Versalien;
   das ist die Größe für ein Status-Wort und lässt einen Personennamen
   untergehen (Joerg, 25.08.2026). Umgestellt über die Variablen des
   Bausteins, nicht per Override seiner Regel. */
.ap-split {
  --idf-kanban-head-size: var(--font-base);
  --idf-kanban-head-weight: var(--weight-semi);
  --idf-kanban-head-color: var(--ink);
  --idf-kanban-head-transform: none;
  --idf-kanban-head-spacing: 0;
}

.ap-seite-titel {
  margin: 0 0 var(--space-2);
  font-size: var(--font-base);
  font-weight: var(--weight-semi);
  color: var(--ink);
}

/* ------------------------------------------------------------------ */
/* Der Vorrat bleibt stehen (Issue 863)                                */
/* ------------------------------------------------------------------ */
/* Die rechte Seite hat eine Zeile je Akteur und wird schnell länger als der
   Bildschirm. Scrollt man dorthin, wanderte der Vorrat mit nach oben aus dem
   Bild, und damit war das Ziehen von links nach rechts nur noch mit einem
   Zurückscrollen möglich (Joerg, 29.08.2026). Der Vorrat ist aber genau die
   Fläche, aus der man die ganze Beratung über zieht.

   Gemessen: über der Seite steht nichts Klebendes (Kopf 81 px, Subnavi 42,
   Werkzeugleiste 61, Stats 35 - alle `static`), und zwischen `.ap-seite-vorrat`
   und dem Dokument liegt keine Überlauf-Schachtel. `sticky` gilt also gegen den
   Bildschirmrand, und `top` ist ein reiner Sichtabstand, kein Abzug für eine
   Kopfzeile.

   Die Deckelung ist deshalb auch KEIN geratener Abzug. Vorher stand hier
   `max-height: calc(100vh - 260px)`, und diese 260 px waren die geschätzte
   Summe aus Kopf, Subnavi, Werkzeugleiste und Stats-Zeile - sobald die
   Werkzeugleiste umbrach, stimmte sie nicht mehr (Joerg, 25.08.2026). Hier
   steht nur der Sticky-Abstand selbst, zweimal: oben der Anschlag, unten
   derselbe Abstand zum Bildschirmrand.

   Ein klebender Kasten, der höher ist als der Bildschirm, klebt zwar, aber
   sein unteres Ende bleibt unerreichbar. Deshalb die Deckelung, und deshalb
   trägt das Brett darunter den Rollbalken - die Überschrift „Vorrat" bleibt
   oben stehen. */
.ap-seite-vorrat {
  position: sticky;
  top: var(--space-4);
  max-height: calc(100vh - 2 * var(--space-4));
  display: flex;
  flex-direction: column;

  /* Der Rang scrollt NICHT mehr in sich. Der Grund dafür war, dass ein Rang
     mit achtzig Karten die Woche aus dem Bild schiebt (Joerg, 25.08.2026) -
     und genau das kann jetzt nicht mehr passieren, weil der ganze Vorrat nie
     höher wird als der Bildschirm. Bliebe die Deckelung stehen, lägen zwei
     Rollbalken ineinander. Die Woche behält sie (siehe unten). */
  --idf-kanban-col-max: none;
}

/* Die Rollfläche des Vorrats, und zwar als eigene Hülle um den Kanban-Host.
   `min-height: 0` ist im Flex-Kontext Pflicht, sonst wächst das Kind über die
   Deckelung des Elternteils hinaus statt zu scrollen.

   Warum eine eigene Hülle und nicht der Host selbst: der Baustein macht seinen
   Host per `classList` zu `.idf-kanban`, also zu einem Raster. Trägt dasselbe
   Element die Rolle des Flex-Kindes, bekommt das Raster eine FESTE Höhe, und
   ein Raster mit fester Höhe presst seine automatischen Zeilen darauf zusammen.
   Gemessen mit zwei offenen Rängen: `grid-template-rows` stand auf
   `341px 46px 46px 46px 46px 341px`, während die beiden offenen Spalten je
   1483 px hoch waren - ihre Karten liefen also über die Köpfe der Ränge
   darunter (Joerg, 29.08.2026: „Beim Sticky wird die Headline überlagert").
   Mit der Hülle rollt die Hülle und das Raster wächst wieder mit seinem
   Inhalt. */
.ap-vorrat-board {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Eine Personen-Zeile scrollt weiter in sich: rechts stapeln sich die Karten
   nicht, sie fließen in der Zeile, und eine Zeile mit dreißig Karten würde die
   nächste Person aus dem Bild schieben. */
.ap-seite-woche {
  --idf-kanban-col-max: 60vh;
}

/* ------------------------------------------------------------------ */
/* Kapazität am Zeilenkopf                                             */
/* ------------------------------------------------------------------ */
/* Die Kapazität füllt den Rest des Zeilenkopfs, damit der Ring an dessen
   rechter Kante sitzt. Über alle Zeilen hinweg stehen die Ringe dadurch
   untereinander, statt mit der Länge der Zahlen zu wandern. */
.ap-kapazitaet {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* Der Ring ist das letzte Element und behält seine Größe. */
.ap-kapazitaet .idf-ring {
  flex: 0 0 auto;
}

.ap-kapazitaet-text {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--font-base);
  font-weight: var(--weight-semi);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Drei beschriftete Werte statt einer Bruchzahl: „Planbar 32 h · Verplant
   12 h · Gebucht 6 h". Eine Zahl, die zwei andere schon verrechnet hat, kann
   man nicht nachrechnen. */
.ap-wert {
  white-space: nowrap;
}

.ap-wert-label {
  font-weight: var(--weight-regular);
  color: var(--mid);
}

/* Karten ohne Stundenzahl fehlen im Ring. Das steht am Ring und nicht in
   einer Fußnote: eine halb bezifferte Woche sieht sonst aus wie eine freie. */
/* Dieselbe Aussage wie der rote Kartenrand, nur im Zeilenkopf: so viele
   Karten dieser Zeile fehlen im Ring. */
.ap-kapazitaet-offen {
  font-size: var(--font-base);
  font-weight: var(--weight-semi);
  color: var(--red);
}

/* ------------------------------------------------------------------ */
/* Karten                                                              */
/* ------------------------------------------------------------------ */
/* Fußzeile der Karte: der Haken links, die Stunden rechts, beide am unteren
   Rand. Dadurch stehen sie über alle Karten einer Zeile hinweg auf einer
   Linie, egal wie lang der Titel darüber ist. */
/* Eine Zeile, drei Bedienelemente, EINE Hoehe (Issue 793). Joerg, 27.08.2026:
   „Check-Pille, Buchen-Button und Input-Feld haben je eine andere Hoehe.
   Solche Felder, Buttons und Pillen sollen immer gleich gross sein."
   Gemessen waren es Pille 28, Knopf 36, Feld 40.

   Massgebend ist die KOMPAKTE Reihe (36px, `--space-9`): der Knopf traegt
   `is-sm`, weil eine 240px-Karte kein Ort fuer 40px-Knoepfe mit 15px-Schrift
   ist. Die anderen beiden ziehen ueber die Variable ihres Bausteins nach,
   nicht ueber eine nachgebaute Hoehe:
     `--idf-list-pill-h` → Zeilen-Pillen (functions/list-view/grid-css)
     `--idf-form-h`      → Eingabefelder (blocks/forms)
   Beide sind vom Baustein ausdruecklich zum Ueberschreiben vorgesehen.
   Aendert sich dort die Geometrie, geht die Karte mit.

   `--idf-form-h` steht dabei NICHT hier, sondern unten am `.ap-karte-werte`:
   `.idf-form` deklariert die Variable an sich selbst, und eine am Element
   gesetzte Custom Property schlaegt jeden geerbten Wert. Von hier aus wuerde
   sie also nie ankommen. Bei den Pillen ist das anders, deren Default steht
   seit Issue 793 im var()-Fallback.

   Die Fingerkuppen-Regel bleibt unberuehrt: unter `data-input-mode="touch"`
   setzt der Listen-Baustein `--idf-list-pill-h` am Element selbst auf 44px
   und schlaegt damit den hier geerbten Wert. Das ist richtig so - 44px ist
   ein Mindestmass und keine Geschmacksfrage. */
.ap-karte-fuss {
  --idf-list-pill-h: var(--space-9, 36px);
  margin-top: auto;
  padding-top: var(--space-2);
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}

/* Der Haken ist die Erledigt-Pille der Liste (`idf-list-done-pill` aus dem
   Shared list-grid-CSS) und bringt sein ganzes Aussehen mit. Hier steht, dass
   er nicht mitschrumpfen darf - und dass er seine Blaesse ablegt.

   In der LISTE ist die Pille ein Zustands-Schalter mit drei Zustaenden:
   `opacity: .2` heisst „Schalter da, aber aus", gruen heisst erledigt. Das ist
   dort richtig, sonst waeren fuenfzig Zeilen ein Punktraster, und der
   Zeilen-Hover holt sie bei Bedarf hervor.

   In der PLANUNGS-KARTE zaehlt nur der Unterschied zwischen offen und
   erledigt. Die dritte Lesart, „Schalter da, aber aus", gibt es hier nicht:
   die Karte liegt in einer Woche, und jede Karte in einer Woche ist abhakbar.
   Eine Blaesse, die „aus" meldet, wo es kein „aus" gibt, ist keine Bedeutung,
   sondern ein Fehlbild - und neben der voll deckenden Stoppuhr liest sie sich
   als Panne (Joerg, 28.08.2026: „Check und Uhr sehen unterschiedlich aus").
   Also volle Deckkraft, und der Hover-Ton wird mitgezogen, damit „gleich"
   auch unter der Maus gilt; der Baustein setzt an der Pille `--shade-15`, an
   der Aktion `--shade-08`.

   `is-active` traegt die Pille sehr wohl, seit eine erledigte Karte in der
   Woche stehen bleibt: zuerst die gezogene (Issue 831), seit Issue 864 die
   abgeleitete. Gruen heisst hier wie ueberall erledigt, und der Klick
   darauf oeffnet wieder.

   Bewusst KEIN neuer Baustein-Griff: es ist heute genau ein Konsument, und
   eine Variable auf Vorrat waere teurer als diese vier Zeilen. Kommt der Fall
   ein zweites Mal, gehoert er in den Baustein. */
.ap-karte-fertig {
  flex: 0 0 auto;
  opacity: 1;
}

.ap-karte-fuss .ap-karte-fertig:hover,
.ap-karte-fuss .ap-gebucht-btn:hover {
  background: var(--shade-15);
}

.ap-karte-fertig:disabled {
  opacity: 0.5;
  cursor: default;
}

.ap-karte-titel {
  font-size: var(--font-base);
  color: var(--ink);
  line-height: var(--leading-snug);
}

.ap-karte-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--font-xs2);
  color: var(--mid);
}

.ap-karte-kunde {
  font-weight: var(--weight-semi);
}

/* Abgeleitet statt gezogen: die Karte steht in der Woche, weil ein Beginn
   dort liegt oder die Aufgabe wiederkehrend fällig ist. Der gestrichelte Rand
   sagt das ohne Worte - eine Ableitung darf nicht aussehen wie eine
   Absprache. */
.idf-kanban-card.ap-karte-auto {
  border-style: dashed;
}

.ap-karte-auto-grund {
  margin-top: var(--space-1);
  font-size: var(--font-xs2);
  color: var(--mid);
}

.ap-karte-auto-grund i {
  opacity: 0.6;
}

/* Wer sonst noch an der Aufgabe hängt. Links vor dem Ziehen („3 im Team"),
   rechts als Namen der anderen Zeilen („mit Anna, Bernd"). */
.ap-karte-team {
  margin-top: var(--space-1);
  font-size: var(--font-xs2);
  color: var(--mid);
}

.ap-karte-team i {
  opacity: 0.6;
}

.ap-karte-aufwand {
  margin-top: var(--space-1);
  font-size: var(--font-xs2);
  color: var(--mid);
  font-variant-numeric: tabular-nums;
}

/* Eine fehlende Stundenzahl ist kein Hinweis, sondern ein Fehlstand: die
   Karte liegt in der Woche, zählt aber im Ring nicht mit, und die Woche sieht
   damit leerer aus, als sie ist. Deshalb Rot und nicht Orange - Orange ist im
   Token-System die Warnfarbe („freigegeben", „mehr als geplant"), Rot der
   Fehler (Joerg, 25.08.2026). */
.ap-karte-aufwand.is-fehlt {
  color: var(--red);
}

/* Der Rand sagt dasselbe schon aus zwei Metern Entfernung. */
.idf-kanban-card.ap-karte-ohne-stunden {
  border-color: var(--red);
}

/* Abgeleitet UND ohne Stunden: gestrichelt bleibt gestrichelt, nur eben rot.
   Zwei Aussagen, ein Rahmen. */
.idf-kanban-card.ap-karte-ohne-stunden.ap-karte-auto {
  border-style: dashed;
}

/* Eine Zeile, drei Elemente: Haken, Buchen, ganz rechts Geplant (Joerg,
   27.08.2026). Die zwei Handlungen stehen links beieinander, die Zahl rechts -
   so liest sich die Zeile als „erledigt? buchen?" und dann „wie viel war
   geplant".

   Bis v0.119.0 standen hier zwei Felder nebeneinander, Geplant und Gebucht.
   Gebucht ist ein Knopf geworden, weil eine Buchung an ihren Tag gehört und
   eine Wochen-Karte den nicht kennt (Issue 758). Das verbliebene Feld nimmt
   den ganzen Rest der Zeile ein (Joerg, 27.08.2026: „so breit wie der Rest
   der Karte") - es endet damit bündig am rechten Kartenrand, statt als
   schmale Box daneben zu stehen.

   Der Host trägt `.idf-form.is-narrow`, die EIN-Spalten-Variante des
   Bausteins, und das ist Pflicht: ohne sie greift dessen Vorgabe
   `grid-template-columns: 1fr 1fr`, und ein einzelnes Feld bekommt nur die
   erste Spalte. Gemessen waren das 55,5 von 119,1 px, im Eingabefeld nach
   Innenabstand 30 px Textbreite - „12,5" passte gerade eben, „112,5" nicht
   mehr, und rechts daneben stand eine leere Spalte (Joerg, 27.08.2026: „Das
   Feld ist zu klein. Es zeigt nur einstellige Zahlen").

   Höhe, Rahmen, Radius und Schrift kommen aus dem Baustein und bleiben
   unangetastet; den unteren Rand bringt `.ap-karte-fuss` mit. Einen eigenen
   `gap` braucht es hier nicht mehr - bei einer Spalte und einem Feld gibt es
   nichts zu trennen, den Abstand zwischen Beschriftung und Feld setzt
   `.idf-form > label`. */
.ap-karte-werte {
  /* Auf die Zeilenhoehe der Fussleiste, siehe dort (Issue 793). Muss HIER stehen:
     `.idf-form` deklariert `--idf-form-h` an sich selbst, ein von der
     Fussleiste geerbter Wert kaeme nie an. */
  --idf-form-h: var(--space-9, 36px);
  flex: 1 1 auto;
  min-width: 0;
}

/* Das Label ist die Grid-Zelle von `.idf-form`, das Input darin. Beide müssen
   mitwachsen, sonst bleibt das Feld auf seiner Inhaltsbreite stehen und der
   gewonnene Platz bleibt leer. */
.ap-karte-werte label,
.ap-karte-werte input {
  width: 100%;
}

.ap-karte-werte input {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* „Buchen" ist der Standard-Knopf aus blocks/buttons und braucht keinen
   eigenen Skin, nur seinen Platz in der Zeile. */
.ap-gebucht-btn {
  flex: 0 0 auto;
}

/* ------------------------------------------------------------------ */
/* Schmal: Vorrat über die Woche, beide in voller Breite               */
/* ------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .ap-split {
    grid-template-columns: 1fr;
  }

  /* Übereinander gibt es kein „daneben stehen bleiben": ein klebender Vorrat
     läge hier auf der Woche und nähme ihr den halben Bildschirm. Also zurück
     in den Fluss, und der Rang scrollt wieder in sich - sonst schiebt er die
     Woche nach unten aus dem Bild, genau wie vor dem Umbau. */
  .ap-seite-vorrat {
    position: static;
    max-height: none;
    display: block;

    --idf-kanban-col-max: 60vh;
  }

  .ap-vorrat-board {
    overflow-y: visible;
  }
}