/* ==========================================================
   kunden_suche.css — Live-Duplikat-Check Dropdown
   Wird vom KundenSuche-Helper an beliebige Container gehängt.
   ========================================================== */

.ks-dropdown {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  box-shadow: var(--shadow-modal, 0 10px 30px rgba(0,0,0,.12));
  max-height: 280px;
  overflow-y: auto;
  z-index: 12500;          /* über Modals (12000), unter Toasts (14000) */
  font-family: var(--font-body, system-ui, sans-serif);
}

/* Floating-Variante: position:fixed, vom JS-Helper am body angehängt
   und per getBoundingClientRect zum aktuell fokussierten Input
   positioniert. So funktioniert die Suche in JEDEM Modal, egal wie
   das Layout der Form-Felder aussieht. */
.ks-dropdown-floating {
  position: fixed;
  /* left, top, width werden per JS gesetzt (siehe repositionTo) */
}

.ks-dropdown[hidden] { display: none; }

.ks-head {
  padding: 7px 12px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
  background: var(--surface-2, #f1f5f9);
  border-bottom: 1px solid var(--border, #e2e8f0);
  position: sticky;
  top: 0;
}

.ks-row {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border, #e2e8f0);
  padding: 9px 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s;
}
.ks-row:last-child { border-bottom: none; }
.ks-row:hover {
  background: var(--accent-light, #eff6ff);
}

.ks-row-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.ks-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #0f172a);
}

.ks-firma {
  font-size: 12px;
  color: var(--text-muted, #64748b);
}
.ks-firma::before { content: '·'; margin-right: 6px; color: var(--text-dim, #94a3b8); }

.ks-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--text-dim, #94a3b8);
}

.ks-email,
.ks-telefon {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
}

.ks-adresse {
  font-size: 11px;
  font-style: italic;
}

/* ===========================================================
   Warn-Highlight: Eingabefeld bekommt gelben Rand,
   wenn ein Bestandskunde EXAKT zur Eingabe passt.
   =========================================================== */

.ks-warn {
  border-color: var(--color-warning, #d97706) !important;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, .18) !important;
  background: #fffbeb !important;
}
.ks-warn:focus {
  border-color: var(--color-warning, #d97706) !important;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, .28) !important;
}