/* attendees-editor.css — Termin-Teilnehmer-Editor (Picker-Tabs, Chips, Stack). */

.app-attendees-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  width: 100%;
}
/* Single-Modus: ohne Label-Spalte, weil das Label aus dem field-grid kommt
   ("Pflicht" / "Optional" als field-label-Zelle links). 2026-05-01 Kyle. */
.app-attendees-editor--single {
  gap: 0;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}
.app-attendees-row {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
}
.app-attendees-row--bare .app-attendees-label { display: none; }
/* Single-Modus (Termin-Drawer): die Row sieht aus wie ein Eingabefeld
   (Border + weisser Hintergrund + min-height:32px), analog
   .app-drawer-date-trigger / .app-drawer-input / .app-drawer-select.
   Ohne Border wirken Pflicht/Optional optisch "mager" gegenueber den
   Nachbarfeldern Datum/Uhrzeit/Bearbeiter. */
.app-attendees-row--bare {
  /* Volle Breite analog Bearbeiter-/Date-Trigger: flex:1 zwingt die Row,
     den verfuegbaren Platz im field-value-content (das selbst flex:1 1 auto
     ist) komplett zu fuellen. Sonst behaelt der Container die Inhaltsbreite
     und wirkt schmal wenn die Liste leer ist. */
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 32px;
  background: var(--color-surface);
  border: 1px solid var(--lod-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2);
  box-sizing: border-box;
  align-items: center;
}
.app-attendees-row--bare .app-attendees-stack {
  padding: 0;
  flex-wrap: wrap;
  row-gap: var(--space-1);
}
/* Hover-Verhalten analog der anderen Trigger — der ganze Slot reagiert,
   nicht nur der Add-Button. */
.app-scope .app-attendees-row--bare:hover {
  background: var(--lod-gray-50);
}
/* "Hinzufuegen"-Button im Slot: dezenter machen, da der Slot selbst schon
   den Border traegt. Kein eigener Border mehr noetig. */
.app-attendees-row--bare .app-attendees-add {
  border: 0;
  padding: var(--space-xxs) var(--space-2) var(--space-xxs) var(--space-1);
  color: var(--lod-darkblue);
  background: transparent;
}
.app-attendees-row--bare .app-attendees-add:hover {
  background: transparent;
}
/* Auch der field-value-Slot fuer Pflicht/Optional soll volle Breite gehen
   (analog Ort/Herkunft/Status). */
.app-scope .field-value[data-termin-field-slot="attRequired"],
.app-scope .field-value[data-termin-field-slot="attOptional"] {
  width: 100%;
  min-height: 32px;
  align-items: stretch;
}
.app-attendees-label {
  flex: 0 0 auto;
  width: 64px;
  font-size: var(--fs-badge);
  color: var(--lod-gray-600);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.app-attendees-stack {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
  min-width: 0;
}
.app-attendees-empty { font-size: var(--font-size-sm); }
.app-attendees-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-xxs) var(--space-2) var(--space-xxs) var(--space-xxs);
  background: var(--lod-gray-50);
  border: 1px solid var(--lod-gray-200);
  border-radius: var(--radius-circular);
  font-size: var(--font-size-sm);
  color: var(--lod-gray-900);
  max-width: 200px;
}
.app-attendees-chip .avatar,
.app-attendees-chip .avatar-slot {
  flex: 0 0 auto;
}
.app-attendees-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 130px;
}
.app-attendees-chip-remove {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-circular);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: var(--space-xxs);
}
.app-attendees-chip-remove:hover {
  background: var(--lod-gray-200);
}
.app-attendees-chip-remove img { opacity: 0.55; }
.app-attendees-add {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-2-5);
  background: transparent;
  border: 1px dashed var(--lod-gray-300);
  border-radius: var(--radius-circular);
  font-size: var(--font-size-sm);
  color: var(--lod-gray-700);
  cursor: pointer;
}
.app-attendees-add:hover {
  background: var(--lod-gray-50);
  border-style: solid;
}
.app-attendees-add img { opacity: 0.6; }

.app-attendees-picker-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--lod-darkblue-900) 8%, transparent);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.app-attendees-picker-tabs {
  display: flex;
  border-bottom: 1px solid var(--lod-gray-100);
  background: var(--lod-gray-50);
}
.app-attendees-picker-tab {
  flex: 1 1 0;
  border: 0;
  background: transparent;
  padding: var(--space-2) var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--lod-gray-700);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-family: var(--lod-font-sans);
}
.app-attendees-picker-tab.is-active {
  color: var(--lod-darkblue);
  border-bottom-color: var(--lod-turquoise);
  background: var(--color-surface);
  font-weight: var(--fw-semibold);
}
.app-attendees-picker-search {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-2) var(--space-2-5);
  border-bottom: 1px solid var(--lod-gray-100);
  background: var(--color-surface);
}
.app-attendees-picker-search img { flex: 0 0 auto; opacity: 0.55; }
.app-attendees-picker-search input {
  flex: 1 1 auto;
  border: 0;
  outline: none;
  background: transparent;
  font-size: var(--fs-body);
  font-family: var(--lod-font-sans);
  color: var(--lod-gray-900);
  min-width: 0;
}
.app-attendees-picker-list {
  display: flex;
  flex-direction: column;
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: var(--space-1) 0;
}
.app-attendees-picker-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 0;
  background: transparent;
  text-align: left;
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--fs-body);
  font-family: var(--lod-font-sans);
  color: var(--lod-gray-900);
  cursor: pointer;
  width: 100%;
}
.app-attendees-picker-item:hover { background: var(--lod-gray-50); }
.app-attendees-picker-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  min-width: 0;
}
.app-attendees-picker-stack .small {
  font-size: var(--fs-badge);
  line-height: 1.3;
}
.app-attendees-picker-empty {
  padding: var(--space-2-5) var(--space-3);
  font-size: var(--font-size-sm);
  text-align: center;
}

/* 2026-05-01 Termin-Drawer: Ort-Picker im BetreffPicker-Style — Search-Input
   oben + scrollbare Raumliste aus Microsoft Graph + Free-Text-Option. */
.app-scope .app-drawer-ort-trigger {
  /* Volle Slot-Breite, identisch zu Titel/Herkunft/Betreff. Ohne explizites
     width:100% verhaelt sich der inline-flex-Trigger im flex-Container je
     nach Content schmaler. */
  width: 100%;
}
.app-scope .field-value[data-termin-field-slot="ort"],
.app-scope .field-value[data-termin-field-slot="herkunft"],
.app-scope .field-value[data-termin-field-slot="status"],
.app-scope .field-value[data-termin-field-slot="datum"],
.app-scope .field-value[data-termin-field-slot="uhrzeit"],
.app-scope .field-value[data-termin-field-slot="dauer"] {
  /* Volle Slot-Breite: Datum/Uhrzeit/Dauer sollen optisch identisch breit
     sein, sonst wirkt das Field-Grid unruhig. Der innere field-value-content
     ist flex:1 1 auto, das Kind (Trigger / Select / DurationPicker-Wrapper)
     zieht sich auf 100% des Slots. */
  width: 100%;
}
.app-scope .field-value[data-termin-field-slot="ort"] .app-drawer-date-trigger,
.app-scope .field-value[data-termin-field-slot="herkunft"] .app-drawer-select,
.app-scope .field-value[data-termin-field-slot="status"] .app-drawer-select,
.app-scope .field-value[data-termin-field-slot="datum"] .app-drawer-date-trigger,
.app-scope .field-value[data-termin-field-slot="uhrzeit"] .app-drawer-date-trigger {
  width: 100%;
}
/* Dauer-Picker: Trigger soll den freien Platz einnehmen, Quick-Chips bleiben
   rechts daneben (sichtbar, nicht abgeschnitten). flex:1 auf den Trigger,
   die Chips behalten ihre intrinsische Breite. */
.app-scope .field-value[data-termin-field-slot="dauer"] .app-duration-picker-trigger {
  flex: 1 1 auto;
  min-width: 0;
}
.app-ort-picker-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--lod-darkblue-900) 8%, transparent);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.app-ort-picker-search {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-2) var(--space-2-5);
  border-bottom: 1px solid var(--lod-gray-100);
  background: var(--lod-gray-50);
}
.app-ort-picker-search img {
  flex: 0 0 auto;
  opacity: 0.6;
}
.app-ort-picker-search input {
  flex: 1 1 auto;
  border: 0;
  outline: none;
  background: transparent;
  font-size: var(--fs-body);
  font-family: var(--lod-font-sans);
  color: var(--lod-gray-900);
  min-width: 0;
}
.app-ort-picker-search input::placeholder {
  color: var(--lod-gray-500);
}
.app-ort-picker-list {
  display: flex;
  flex-direction: column;
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: var(--space-1) 0;
}
.app-ort-picker-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 0;
  background: transparent;
  text-align: left;
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--fs-body);
  font-family: var(--lod-font-sans);
  color: var(--lod-gray-900);
  cursor: pointer;
  width: 100%;
  min-height: 28px;
}
.app-ort-picker-item:hover {
  background: var(--lod-gray-50);
}
.app-ort-picker-item img {
  flex: 0 0 auto;
  opacity: 0.6;
}
.app-ort-picker-item--freetext {
  border-bottom: 1px solid var(--lod-gray-100);
}
.app-ort-picker-name {
  font-weight: var(--fw-medium);
  flex: 0 0 auto;
}
.app-ort-picker-addr {
  font-size: var(--font-size-sm);
  margin-left: var(--space-1);
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-ort-picker-empty {
  padding: var(--space-2-5) var(--space-3);
  font-size: var(--font-size-sm);
  text-align: center;
}

/* Generische Field-Grid-Primitive (.app-drawer-input/-static/-date-*, Shared-Focus-
   Block) ausgelagert → _shared/drawer-field-primitives.css (von ~10 Drawern genutzt,
   nicht termin-spezifisch). Die slot-scoped Termin-Overrides (width:100% etc.) bleiben
   oben in dieser Datei. */