/* ═══════════════════════════════════════════════════════════════════════════════
   VIPartyPick — Auswahl von Personen, Firmen und Organisationen
   Optik ausschließlich über Tokens. Feldhöhe und Fokusring kommen vom zentralen
   Suchfeld (.vi-search) — hier wird nichts davon neu definiert, sondern nur das
   ergänzt, was diese Auswahl zusätzlich braucht: Gruppen, Trefferzeilen und die
   gewählte Zeile.
   ═══════════════════════════════════════════════════════════════════════════════ */

.vpp { display: block; }

/* ── Gewählter Zustand ────────────────────────────────────────────────────────
   Bewusst KEIN leeres Suchfeld nach der Auswahl: der Nutzer soll sehen, WEN er
   gewählt hat. Dieselbe Linie wie `variant:'context'` beim Objektpicker. */
.vpp-chosen {
  display: flex; align-items: center; gap: var(--space-3, 12px);
  min-height: var(--ui-field-h, 40px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border: 1px solid var(--green-200, #C6E4D4);
  border-radius: var(--radius-md, 8px);
  background: var(--green-50, #EDF7F2);
}
.vpp-chosen-ic { flex: 0 0 auto; font-size: var(--text-base); line-height: 1; }
.vpp-chosen-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vpp-chosen-n {
  font-weight: var(--fw-semibold, 600); color: var(--gray-900, #141A17);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vpp-chosen-m {
  font-size: var(--text-sm, 13px); color: var(--gray-500, #5F6B66);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vpp-clear {
  flex: 0 0 auto; appearance: none; cursor: pointer;
  height: 30px; padding: 0 var(--space-3, 12px);
  border: 1px solid var(--gray-300, #D8DFDC); border-radius: var(--radius-md, 8px);
  background: var(--color-surface, #fff); color: var(--text-secondary, #3A4441);
  font: var(--fw-medium, 500) 12.5px/1 var(--font-body);
}
.vpp-clear:hover { border-color: var(--gray-500, #5F6B66); color: var(--gray-900, #141A17); }

/* ── Gruppen ──────────────────────────────────────────────────────────────────
   Die Überschrift ordnet die Treffer nach ihrer HERKUNFT. Sie ist die einzige
   Stelle, an der Versalien zulässig wären — hier bewusst Satzschreibung, weil
   sie über Daten steht, nicht über einer Navigationsgruppe. */
.vpp-group { margin-top: var(--space-3, 12px); }
.vpp-group-h {
  font: var(--fw-semibold, 600) var(--text-xs, 12px)/1.4 var(--font-body);
  color: var(--gray-500, #5F6B66);
  margin-bottom: var(--space-1, 4px);
}
.vpp-list { display: flex; flex-direction: column; gap: 2px; }

/* ── Trefferzeile ─────────────────────────────────────────────────────────────
   Eine Zeile ist ein Knopf, kein Listenpunkt mit Klickbereich irgendwo: sie ist
   per Tabulator erreichbar und zeigt ihren Fokus. */
/* EIN BUTTON ALS SPALTE MUSS `align-items: stretch` AUSDRÜCKLICH SETZEN.
   Gemessen 10.09.2026 im Auftragsassistenten: der Browser gibt jedem <button>
   von sich aus `align-items: center`. Die beiden Spans wurden dadurch NICHT auf
   Kartenbreite gezogen, sondern auf ihre Inhaltsbreite (597 px in einer 314 px
   breiten Karte) — die Ellipse unten greift dann nie, und der Text stand
   MITTIG und beidseitig über den Kartenrand hinaus („er · Auftragnehmer ·
   Firma · … OT"). `text-align: left` allein reicht nicht: es richtet den Text
   IM Span aus, nicht den Span in seinem Knopf.
   Dieselbe Falle steckt in `.vic-ch-i` (vi-components.css) und `.aaw-pick-i`
   (anlagen-workflow.css) — dort ebenfalls behoben. */
.vpp-item {
  display: flex; flex-direction: column; align-items: stretch; gap: 1px; text-align: left;
  appearance: none; cursor: pointer; width: 100%; min-width: 0;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border: 1px solid transparent; border-radius: var(--radius-md, 8px);
  background: none; color: inherit; font: inherit;
}
.vpp-item:hover { background: var(--gray-100, #EFF2F1); }
.vpp-item:focus-visible {
  outline: none;
  border-color: var(--brand-primary, #128054);
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(18, 128, 84, .18));
}
.vpp-item-n { font-weight: var(--fw-medium, 500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vpp-item-m {
  font-size: var(--text-sm, 13px); color: var(--gray-500, #5F6B66);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Lade- und Leerzustand ────────────────────────────────────────────────────
   Der Leerzustand sagt, was zu tun ist — das ist der einzige erklärende Text,
   den die UI-Regeln ausdrücklich erlauben. */
.vpp-load,
.vpp-empty {
  padding: var(--space-3, 12px);
  font-size: var(--text-sm, 13px); color: var(--gray-500, #5F6B66);
}
.vpp-new {
  appearance: none; cursor: pointer; border: 0; background: none; padding: 0;
  color: var(--color-forest, #0F5C42); font: inherit; text-decoration: underline;
}

/* Auf schmalen Geräten darf die gewählte Zeile umbrechen, statt den Knopf
   „Ändern" aus dem Bild zu schieben. */
@media (max-width: 640px) {
  .vpp-chosen { flex-wrap: wrap; }
  .vpp-chosen-txt { flex: 1 1 100%; order: 2; }
  .vpp-clear { order: 3; margin-left: auto; }
}

/* ── Beziehungsfähige Treffer (07.09.2026) ──────────────────────────────────
   Ein Treffer ist die Organisation; ihre aktiven Ansprechpartner stehen darunter
   eingerückt und sind einzeln wählbar. Die Einrückung mit Führungslinie sagt
   „gehört dazu", ohne eine zweite Karte in der Karte aufzumachen. */
.vpp-org { display: block; }
.vpp-sub {
  margin: 2px 0 var(--space-2, 8px) var(--space-4, 16px);
  padding-left: var(--space-3, 12px);
  border-left: 1px solid var(--gray-200, #DCE2E0);
  display: flex; flex-direction: column; gap: 2px;
}
.vpp-sub-h {
  font-size: var(--text-xxs, 11px); color: var(--gray-500, #5F6B66);
  padding: var(--space-1, 4px) 0 2px;
}
.vpp-item--sub .vpp-item-n { font-weight: var(--fw-regular, 400); }