/**
 * idf-multiselect - Pillen-Multi-Select für apps-v2
 *
 * L5c (#201, Joerg-Feedback 2026-07-03): .ms-empty von Soft-Braun auf
 * var(--mid) (Muted-Hierarchie der Modals); Chip-Hover-Tint auf
 * color-mix(var(--primary) 8%) statt bare rgba (render-identisch).
 *
 * Markup wird vom JS gerendert (siehe idf-multiselect.js):
 *   <div class="ms-wrap">
 *     <div class="ms-chips">
 *       <span class="ms-chip"><span>Name</span><button>×</button></span>
 *       …
 *     </div>
 *     <div>… Combobox …</div>
 *   </div>
 *
 * Voraussetzung: _shared/tokens/design-tokens/idf-tokens.css.
 *
 * Override-Layer für die v1-Defaults aus idf-core.css (.ms-chip mit
 * border-radius: 14px, gap: 8px). v2-konform sind 6 px Radius (analog
 * Flag-Check, Buttons, Status-Badges) und mehr Abstand zwischen Pillen-
 * Liste und Combobox-Trigger, damit der Mauszeiger beim Wechsel von
 * den Chips zur Combobox NICHT mehr durch die Hover-Region des
 * letzten Chip-Buttons läuft.
 */

.ms-wrap {
  /* mehr Luft zwischen Chips und Combobox-Trigger — verhindert, dass
     der Mauszeiger beim Hovern über die Combobox die :hover-Region
     der untersten Chip-Buttons mit-aktiviert. */
  gap: var(--space-3, 12px);
}

.ms-chips {
  gap: var(--space-2, 8px);
  min-height: 32px;
}

.ms-chip {
  /* v2-Standard: 6 px abgerundet, analog Flag-Check, Buttons, Badges. */
  border-radius: var(--radius-md, 6px);
  padding: var(--space-1, 4px) var(--space-2, 8px) var(--space-1, 4px) var(--space-3, 12px);
  background: var(--bg, #fafafa);
  border: 1px solid var(--line, #e5e5e5);
  font-size: var(--font-md, 0.875rem);
  color: var(--ink, #111);
}

.ms-chip > span {
  /* Nur das Label-Span behält den vollen Klickraum für Text-Selektion;
     der Trash-Button hat seinen eigenen, kleineren Hit-Bereich. */
  line-height: var(--leading-tight, 1);
}

.ms-chip button {
  /* Kompakter X-Button mit klar abgegrenztem Hit-Bereich. Hover-Color
     wird nur ausgelöst, wenn der Cursor wirklich auf dem Button ist
     (kein Bleed über die Chip-Grenze hinaus). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  color: var(--soft, #ae9586);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--motion-base, 120ms), background var(--motion-base, 120ms);
}

.ms-chip button:hover {
  color: var(--primary, #c8134b);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.ms-empty {
  /* Mid-Grau wie alle Modal-Leertexte (Joerg-Feedback 2026-07-03:
     das fruehere Soft-Braun fiel aus der Muted-Hierarchie). */
  color: var(--mid);
  font-size: var(--font-md, 0.875rem);
  font-style: italic;
  padding: var(--space-1, 4px) 0;
}