/* date-field.css — LoD.DateField (Ersatz fuer <input type="date"/datetime-local>)
 *
 * Bewusst SCHMAL: die Flaechen-Optik der beiden Trigger (Rahmen, Hintergrund,
 * 32px, Radius, Polsterung) kommt aus der gemeinsamen Feld-Control-Gruppe in
 * components/drawers/_shared/drawer-fields.css, in der `.app-date-field-trigger`
 * und `.app-date-field-zeit` mitgelistet sind. Hier steht nur, was es dort noch
 * nicht gibt: die Anordnung der beiden Trigger zueinander. Eine eigene Flaeche
 * waere dieselbe Optik ein zweites Mal — sie saehe am Tag der Kopie gleich aus
 * und liefe danach auseinander (check:css-doppel).
 *
 * Das Label traegt absichtlich `app-drawer-date-trigger-label` (Ellipse +
 * kursiv-grauer Leer-Zustand) — dieselbe Klasse wie im Drawer-Datumsfeld.
 */

/* Wrapper: fuellt seinen Slot und gibt die Breite an den Datums-Trigger weiter.
   Das hidden <input> darin ist der Wert-Traeger und nimmt keinen Platz. */
.app-date-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  min-width: 0;
  flex: 1;
  width: 100%;
  /* ★ min-height ist KEIN Duplikat einer Hoehe, sondern der Schutz gegen dieselbe
     Falle, die in drawer-fields.css am Trigger steht — hier eine Ebene hoeher:
     `flex: 1` heisst `flex-basis: 0%`, und in einem SPALTEN-Flex sizet der
     Flex-Algorithmus damit die HOEHE. Der Wrapper wird auf seine Inhaltshoehe
     gedrueckt, und weil er `align-items: center` traegt, schrumpft der Trigger
     darin mit — seine eigenen 32px aus der Control-Gruppe helfen ihm dann nicht.
     Live gemessen 2026-07-30 im Sonderrechnungs-Dialog: 19px statt 32px, weil
     `.abr-sonder-meta label` ein Spalten-Flex ist (Label ueber Feld). Gefunden hat
     das `check:datumsfelder-live`; statisch ist es unsichtbar, und 19px liest sich
     wie ein gequetschtes Feld, nicht wie ein Fehler. */
  min-height: 32px;
}

/* Feldhoehe der Trigger — ausdruecklich HIER und nicht nur in der
   Feld-Control-Gruppe von drawer-fields.css: die traegt ein `.app-scope`-Praefix,
   und drei Konsumenten sind body-gemountete Overlays, die den Vorfahren NICHT
   haben (`bm-overlay` der Sonderrechnung setzt nur seine eigene Klasse). Dort
   stand der Trigger auf 19px Inhaltshoehe, also 13px flacher als jedes Nachbarfeld.
   Bewusst nur Hoehe/box-sizing: Flaeche, Rahmen und Polsterung bleiben in der
   geteilten Gruppe — die hier zu wiederholen waere dieselbe Optik ein zweites Mal
   (check:css-doppel). In app-scope-Kontexten gewinnt die Gruppe ueber die
   Spezifitaet, die Werte sind identisch. */
.app-date-field-trigger,
.app-date-field-zeit {
  height: 32px;
  min-height: 32px;
  box-sizing: border-box;
}

/* Mit Uhrzeit: das Datum nimmt den Rest, die Zeit ist auf ihren Inhalt fixiert.
   Ohne die feste Spur teilten sich beide die Breite gleichmaessig und das
   Datum („27. April 2026") waere abgeschnitten, waehrend neben „08:30" Luft
   steht — `flex: 1` aus der Control-Gruppe gilt fuer BEIDE, deshalb muss die
   Zeit hier ausdruecklich zurueckgenommen werden. */
.app-date-field--mit-zeit .app-date-field-zeit {
  flex: 0 0 auto;
  width: 82px;
  justify-content: center;
}

/* Kompakte Variante fuer TABELLEN-ZELLEN (`kompakt: true`). Anlass ist der
   Wochenplan der Arbeitszeit: 7 Zeilen x 2–4 Zeitspalten in `minmax(96px, 1fr)`,
   im Notebook 84px. Mit Chevron braucht der Trigger dort gemessen ~78px — kein
   Spielraum. Ohne Chevron (im JS weggelassen, nicht nur versteckt) und mit engerer
   Polsterung bleibt Luft.

   `justify-content: center` statt `text-align: center`: der Trigger ist ein
   inline-flex-Container aus der Feld-Control-Gruppe, dort wirkt `text-align` NICHT
   auf das Label. Genau daran waere ein reiner Klassen-Tausch gescheitert — die
   bestehende Regel `.einst-wplan-zeit { text-align: center }` griff auf ein
   `<input>` und hat am Button-Trigger keine Wirkung mehr.

   Tabellenziffern, damit die Uhrzeiten untereinander fluchten (wie im nativen
   Feld zuvor). */
.app-date-field--kompakt .app-date-field-zeit {
  justify-content: center;
  padding-left: var(--space-1);
  padding-right: var(--space-1);
  font-variant-numeric: tabular-nums;
}
.app-date-field--kompakt .app-drawer-date-trigger-label {
  flex: 0 1 auto;          /* nicht die Bahn fuellen — der Wert steht mittig */
  text-align: center;
}

/* Fehler-Optik gehoert an den SICHTBAREN Trigger. Beide Wege sind gedeckt, weil
   Callsites die Klasse mal am Trigger (Vertrags-Abschluss) und mal am Wrapper
   setzen — vorher zeigte eine `has-error`-Regel der Callsite auf das inzwischen
   verborgene <input> und war damit wirkungslos: die Meldung kam als Toast, das
   Feld blieb unmarkiert. */
.app-date-field-trigger.has-error,
.app-date-field.has-error .app-date-field-trigger {
  border-color: var(--color-danger-border);
}

/* Mobile: unter 600px stapeln, sonst bleiben fuer das Datum ~90px uebrig. */
@media (max-width: 599px) {
  .app-date-field--mit-zeit {
    flex-wrap: wrap;
  }
  .app-date-field--mit-zeit .app-date-field-trigger {
    flex: 1 0 100%;
  }
  .app-date-field--mit-zeit .app-date-field-zeit {
    flex: 0 0 auto;
  }
}