/**
 * idf-form-cell v0.1.0 - Formularfeld im Inline-Edit-Muster (Issue 883)
 *
 * Label oben, Wert als Text darunter, Stift am rechten Rand beim Hover.
 * Geometrie und Aussehen des Stifts kommen aus `functions/inline-editing`;
 * hier steht nur, was die Zelle im Formular-Raster von einer Listenzelle
 * unterscheidet.
 *
 * Voraussetzung: idf-tokens.css, idf-forms.css und idf-inline-edit.css sind
 * geladen (die Zelle benutzt deren Feld-Variablen und den Stift).
 *
 * WARUM JEDE REGEL ZWEIMAL DASTEHT (Issue 1015): einmal ohne Vorfahre und
 * einmal unter `.idf-form`. Die Zelle steht nicht mehr nur im Formular,
 * sondern auch in einer Tabellenzeile (Lieferanten-Reiter, Varianten). Dort
 * gibt es kein `.idf-form`, und ohne die vorfahrenlose Fassung stuende sie
 * ohne ihre eigene Optik da - das Label so gross wie der Wert.
 *
 * Die Fassung MIT `.idf-form` bleibt trotzdem: dort muss die Regel gegen
 * `blocks/forms` gewinnen (`.idf-form > .idf-form-row-full > span` hat
 * dieselbe Spezifitaet wie die vorfahrenlose, siehe Issue 926 - wer sie
 * loescht, holt sich den grauen 14-px-Wert zurueck).
 */

/* Zwei Spalten (Wert, Stift) und zwei Zeilen (Label, Wert). Das Raster ist
   EXPLIZIT: ein `grid-row: 2` auf einer Auto-Platzierung greift sonst ins
   Leere, sobald ein Kind fehlt.

   Die Zelle ist bewusst KEIN <label>. Ein Label, das einen Knopf
   umschliesst, loest ihn bei jedem Klick auf den Text mit aus - der Editor
   ginge dann auf, sobald jemand den Wert nur markieren will. */
.idf-form-cell,
.idf-form .idf-form-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  min-height: var(--idf-form-h);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}

/* Versteckt heisst versteckt (Issue 926). `display: grid` oben ist eine
   Autoren-Regel und schlaegt das `[hidden] { display: none }` des Browsers -
   eine Zelle mit `hidden` bliebe sichtbar. Dieselbe Falle steht schon am
   `.idf-form-subgrid[hidden]` in blocks/forms, und am Stift der gesperrten
   Zelle ist sie mir in derselben Woche zugeschnappt.

   Erster Fall: die Ortsfelder des Aufgaben-Fensters, die nur bei einem
   Geschaeftsfeld mit Ortsbezug stehen. */
.idf-form-cell[hidden],
.idf-form .idf-form-cell[hidden] {
  display: none !important;
}

/* Das Label ist hier eine META-ZEILE, kein Formular-Label mehr (Joerg,
   30.08.2026: „die Labels koennten kleiner").

   Ein Formular-Label steht auf --font-md (14 px), weil es die Beschriftung
   eines Eingabekastens ist und mit ihm um Aufmerksamkeit konkurriert. Hier
   gibt es keinen Kasten: unter dem Wort steht der WERT, und der ist der
   Inhalt. Damit ist das Wort darueber genau das, wofuer --font-xs2 (12 px)
   da ist - Meta-Zeilen und Sublines (CLAUDE.md, Verbot 11). Zum Vergleich
   die Nachbarn: Hilfe- und Erklaertexte unter einem Feld stehen auf
   --font-sm (13 px), der Wert selbst auf --font-base (16 px). */
/* ACHTUNG, die Regel MUSS `.idf-form` mitnennen (Issue 926).

   `blocks/forms` beschriftet die Spans eines Feldes: der Selektor dort ist
   `.idf-form > label > span, .idf-form > .idf-form-row-full > span`, und er
   setzt Farbe und Groesse eines Formular-Labels (--idf-form-label-color,
   --idf-form-label-size).

   Beide Spans der Zelle - Label UND Wert - sind direkte Kinder ihres Hosts,
   und ein Host mit `idf-form-row-full` ist genau so ein Ziel. Die Regel dort
   hat (0,2,1), eine Regel `.idf-form-cell > .idf-form-cell-value` nur (0,2,0)
   und verliert: der Wert stand grau und in Label-Groesse statt schwarz und in Inhalts-Groesse.

   Aufgefallen ist das erst, als `idf-form-row-full` ueberhaupt am Host ankam
   (Issue 925) - vorher warf `mount` die Klasse weg, und damit auch dieses
   Problem. Ein Fehler hat den anderen verdeckt. */
.idf-form-cell > .idf-form-cell-label,
.idf-form .idf-form-cell > .idf-form-cell-label {
  grid-column: 1 / -1;
  grid-row: 1;
  color: var(--idf-form-label-color);
  font-size: var(--font-xs2);
  line-height: 1.3;
}

/* „(Pflichtfeld)" steht als Wort am Label und nicht als Sternchen: ein
   Sternchen muss man kennen, und ohne Eingabekasten gibt es auch keinen
   Rahmen mehr, den man faerben koennte. Etwas blasser als das Label, damit
   der Feldname zuerst gelesen wird. */
.idf-form-cell-pflicht {
  color: var(--mid);
  font-weight: var(--weight-regular);
}

/* Der Wert ist Inhalt, also `--font-base` (CLAUDE.md, Verbot 11). */
.idf-form-cell > .idf-form-cell-value,
.idf-form .idf-form-cell > .idf-form-cell-value {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  color: var(--ink);
  font-size: var(--font-base);
  line-height: 1.4;
  cursor: text;
  overflow-wrap: anywhere;
}

/* Der Wert sagt etwas ueber sich selbst (Issue 925, `opts.wertKlasse`).

   Dieselben drei Zustaende und dieselben Farben wie in der Listenzeile
   (`IDF.date.dueClass` + die Due-Modifier in list-view/grid-css) - ein Datum
   soll nicht im Fenster anders sprechen als in der Zeile darueber.

   - `is-today`   faellig heute: rot.
   - `is-overdue` ueberfaellig: rot und fett. Die zweite Stufe ist noetig,
     weil „heute faellig" und „seit drei Wochen ueberfaellig" sonst gleich
     aussehen und man die Dringlichkeit nur noch am Datum abliest.
   - `is-fehlt`   das Feld ist leer, obwohl ein Wert hier hingehoert. Faerbt
     den PLATZHALTER, nicht einen Wert - deshalb eine eigene Klasse und
     nicht `is-leer`: leer ist der Normalfall (ein Erledigt-Datum an einer
     offenen Aufgabe), fehlend ist die Ausnahme. */
.idf-form-cell > .idf-form-cell-value.is-today,
.idf-form .idf-form-cell > .idf-form-cell-value.is-today {
  color: var(--primary);
}
.idf-form-cell > .idf-form-cell-value.is-overdue,
.idf-form .idf-form-cell > .idf-form-cell-value.is-overdue {
  color: var(--primary);
  font-weight: var(--weight-semi);
}
.idf-form-cell > .idf-form-cell-value.is-leer.is-fehlt,
.idf-form .idf-form-cell > .idf-form-cell-value.is-leer.is-fehlt {
  color: var(--primary);
}

/* Ein mehrzeiliger Wert steht auch mehrzeilig da. `pre-line` und nicht
   `pre-wrap`: die Zeilenumbrueche der Eingabe zaehlen, fuehrende Leerzeichen
   nicht - ein Wert, der eingerueckt gespeichert wurde, soll die Zeile nicht
   verschieben. Ohne die Regel fasst HTML den Weissraum zusammen, und aus drei
   Zeilen Notiz wird ein Satz. */
.idf-form-cell.is-mehrzeilig > .idf-form-cell-value,
.idf-form .idf-form-cell.is-mehrzeilig > .idf-form-cell-value {
  white-space: pre-line;
}

/* Leer heisst leer: der Platzhalter ist blass und darf nie wie ein Wert
   aussehen. Anklickbar bleibt er trotzdem, sonst kaeme man an ein nie
   gefuelltes Feld nur ueber die 24 px des Stifts. */
.idf-form-cell > .idf-form-cell-value.is-leer,
.idf-form .idf-form-cell > .idf-form-cell-value.is-leer {
  color: var(--mid);
}

/* Der Stift steht im Fluss, nicht schwebend wie in der Liste: die Zelle hat
   eine eigene Spalte dafuer. Damit verdeckt er nichts und braucht auch
   keinen eigenen Grund. `--idf-pen-position` ist die Variable, die der
   Stift-Baustein dafuer vorsieht. */
.idf-form-cell > .idf-inline-edit-btn {
  --idf-pen-position: static;
  --idf-pen-bg: transparent;
  --idf-pen-shadow: none;
  grid-column: 2;
  grid-row: 2;
  margin-left: 0;
}

/* Waehrend der Bearbeitung nimmt das Eingabefeld die volle Breite des
   Wertes. `IDF.inlineEdit.start` ersetzt das INNERE Element, das Input
   haengt also im Wert-Span und nicht direkt in der Zelle. */
.idf-form-cell-value > .idf-inline-edit-input {
  width: 100%;
}

/* Ein eigenes Bedienelement (`opts.editor`: Farbwaehler, Mehrfachauswahl)
   sitzt in diesem Kasten. Er bringt selbst keine Optik mit - die gehoert dem
   Element darin - sondern nur die Breite und ein wenig Luft nach oben, damit
   ein Chip-Feld nicht am Label klebt. */
.idf-form-cell-editor {
  width: 100%;
  padding-top: var(--space-1);
}

/* Auswahl-Felder: waehrend die Combobox offen ist, gehoert ihr die ganze
   Zeile. Der Stift verschwindet solange - er wuerde neben einem offenen
   Bedienelement stehen und nichts mehr bedeuten. */
.idf-form-cell.is-editing > .idf-form-cell-value,
.idf-form .idf-form-cell.is-editing > .idf-form-cell-value {
  grid-column: 1 / -1;
  cursor: default;
}
.idf-form-cell.is-editing > .idf-inline-edit-btn {
  display: none;
}

/* Anzeige-Zelle (`nurAnzeige`, Issue 967): ein Wert, der aus einem anderen
   FOLGT und deshalb nirgends bearbeitet wird - die Farbgruppe einer
   Kleidungsfarbe folgt ihrem Farbwert. Kein Stift (es gibt nichts zu
   tippen) und kein Schloss (nichts ist gesperrt; ein Schloss liest sich als
   fehlendes Recht). Sie ist trotzdem eine Zelle, damit ihr Label neben den
   echten Zellen dieselbe Groesse hat. */
.idf-form-cell.is-nur-anzeige > .idf-form-cell-value,
.idf-form .idf-form-cell.is-nur-anzeige > .idf-form-cell-value {
  grid-column: 1 / -1;
  cursor: default;
}

/* Eine Zeile mit EIGENEM Bedienelement zwischen lauter Zellen (Pillen-Reihe
   „Automatik", Flag-Pille „Mit Akku"): sie ist keine Zelle - der Wert ist
   das Bedienelement selbst - soll aber dieselbe Label-Groesse tragen.
   Ohne das steht ihr Label auf --font-md (14 px), die Zellen daneben auf
   --font-xs2 (12 px), und die Zeile faellt aus der Spalte (Joerg,
   01.09.2026). */
.idf-form > label.idf-form-zeile > span,
.idf-form > .idf-form-row-full.idf-form-zeile > span {
  font-size: var(--font-xs2);
  line-height: 1.3;
}