/* ==========================================================================
   drawer-field-primitives.css — generische Field-Grid-Primitive für ALLE Drawer.

   `.app-drawer-input`, `.app-drawer-static`, `.app-drawer-date-wrap/-trigger/
   -trigger-label/-chips` + der geteilte Focus-Block (.app-drawer-select:focus,
   .app-betreff-/-kategorie-/-async-/-phase-picker, .app-duration-picker-trigger,
   .app-person-field, .app-drawer-date-trigger). Genutzt von ~10 Drawern
   (anfr/ag/kt/ant/prof/abrechnung/assets/pv/rp/tm) — NICHT termin-spezifisch.

   Lag historisch in domain/termin/tm-attendees-editor.css (die Picker-Sub-Regeln
   wurden extrahiert, diese Basis-Primitive blieben liegen — die „bleibt bewusst"-
   Notiz in pickers.css nannte keinen technischen Grund). Hierher verschoben, damit
   ein Refactor/Delete am Termin-Drawer nicht 10 fremde Drawer bricht.

   LADEPOSITION: direkt NACH drawer-fields.css (dessen Basis diese Regeln ergänzen:
   .app-drawer-input überschreibt cursor + ergänzt appearance/outline; der Focus-
   Block ist die EINZIGE :focus-Definition dieser Control-Familie). Alle anderen
   Consumer (shared-drawer/rp/pv/abrechnung/assets/kontingente) überschreiben nur
   höher-spezifisch oder disjunkt → kein Kaskaden-Flip.
   ========================================================================== */

.app-scope .app-drawer-input {
  cursor: text;
  /* Browser-Default-Styles (besonders auf Chrome/Edge) setzen einen dunkleren
     border-bottom / appearance fuer Input-Elemente — explizit ueberschreiben,
     damit der Rahmen konsistent zu .app-drawer-select etc. ist.
     Sichtbarer Default-Border statt transparent (siehe Block oben). */
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-surface);
  border: 1px solid var(--lod-gray-200);
  outline: none;
  box-shadow: none;
}
.app-scope .app-drawer-input:focus {
  outline: none;
  background: var(--color-surface);
  border: 1px solid var(--lod-turquoise);
}
.app-scope .app-drawer-select:focus,
.app-scope .app-drawer-select:focus-visible,
.app-scope .app-betreff-picker:focus,
.app-scope .app-betreff-picker:focus-visible,
.app-scope .app-kategorie-picker:focus,
.app-scope .app-kategorie-picker:focus-visible,
.app-scope .app-async-picker:focus,
.app-scope .app-async-picker:focus-visible,
.app-scope .app-phase-picker:focus,
.app-scope .app-phase-picker:focus-visible,
.app-scope .app-duration-picker-trigger:focus,
.app-scope .app-duration-picker-trigger:focus-visible,
.app-scope .app-person-field:focus,
.app-scope .app-person-field:focus-visible,
.app-scope .app-drawer-date-trigger:focus,
.app-scope .app-drawer-date-trigger:focus-visible {
  outline: none;
  background: var(--color-surface);
  border-color: var(--lod-darkblue-300);
  box-shadow: var(--lod-shadow-focus);
}

/* Static read-only Wert — gleiche Hoehe wie app-drawer-input, aber KEIN
   Rahmen, KEIN Hover, KEIN Cursor — klar nicht-editierbar.
   Verwendet in View-Mode und fuer unveraenderliche Felder im Edit-Mode. */
.app-scope .app-drawer-static {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--lod-gray-900);
  cursor: default;
}

/* Date: Trigger-Button (nutzt openDatePicker) links, Chips rechtsbuendig */
.app-scope .app-drawer-date-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  flex-wrap: nowrap;
  min-width: 0;
  flex: 1;
}
.app-scope .app-drawer-date-trigger {
  /* Kein flex/min-width-Override hier: der Trigger erbt flex:1; min-width:0 aus
     drawer-fields.css und fuellt damit seinen Field-Grid-Slot — rechte Kante
     fluchtet mit den Nachbar-Dropdowns. Frueher stand hier global
     min-width:180px; flex:0 1 auto, was in allen anderen Drawern (Anfrage,
     Kontingent-Buchung/-Leistung, Abrechnung) die Datumsfelder zu kurz
     stehen liess. Der Termin-Drawer forciert seine Datums-Trigger ueber die
     slot-scoped Regeln (width:100%) in tm-attendees-editor.css selbst. */
}
.app-scope .app-drawer-date-trigger-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-scope .app-drawer-date-trigger-label.muted { color: var(--lod-gray-500); font-style: italic; }
.app-scope .app-drawer-date-chips {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  /* Gleiches Pattern wie .app-duration-picker-chips unten: shrinkbar +
     min-width:0 + overflow-x:auto — der Chips-Block darf unter seine
     Inhaltsbreite schrumpfen und scrollt dann intern, statt die min-content-
     Breite des Field-Grids hochzusetzen und rechts aus dem Drawer zu laufen
     (Viewport-Band 480-599px, Drawer = Vollbreite). flex-shrink:4 statt 1:
     bei Platzdruck schrumpfen ZUERST die Chips, nicht der Datums-Trigger —
     das Datum ("2. Juli 2026") bleibt lesbar, die Chips scrollen. */
  flex: 0 4 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin-left: auto;         /* Quick-Chips rechtsbuendig */
}
.app-scope .app-drawer-date-chips::-webkit-scrollbar { display: none; }
.app-scope .app-drawer-date-chips button { white-space: nowrap; flex: 0 0 auto; }
.app-scope .app-drawer-date-chips button {
  padding: 3px var(--space-2-5);
  border-radius: var(--radius-xl);
  background: var(--lod-gray-50);
  border: 1px solid transparent;
  color: var(--lod-gray-700);
  font-size: 11.5px;
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.app-scope .app-drawer-date-chips button:hover { background: var(--lod-gray-100); color: var(--lod-darkblue); }