/* ld-qualify-wizard.css — Qualify-Mini-Prozess (Lead → Verkaufschance).
   Step-Machine-Modal auf der modal.css-SSOT; hier nur die ld-qw-*-Inhalte
   (Weiche-Karten, Dedup-Liste, Bedarf-Formular). Self-scoped unter .app-scope. */

.app-scope .ld-qw-modal {
  width: min(560px, 94vw);
  max-width: 560px;
}
.app-scope .ld-qw-sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.app-scope .ld-qw-body { display: flex; flex-direction: column; gap: var(--space-3); }

/* Footer-Aktionen */
.app-scope .ld-qw-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}
.app-scope .ld-qw-actions [data-qw-go] { margin-left: auto; }
.app-scope .ld-qw-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-2) var(--space-3-5);
  border: 1px solid var(--lod-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--lod-darkblue-700);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  font-family: var(--lod-font-sans);
  cursor: pointer;
  transition: background var(--duration-quick), border-color var(--duration-quick);
}
.app-scope .ld-qw-btn:hover { background: var(--lod-gray-50); border-color: var(--lod-gray-300); }
.app-scope .ld-qw-btn--primary {
  background: var(--lod-darkblue);
  border-color: var(--lod-darkblue);
  color: var(--lod-white);
}
.app-scope .ld-qw-btn--primary:hover { background: var(--lod-darkblue-700); border-color: var(--lod-darkblue-700); }
.app-scope .ld-qw-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Weiche: drei Auswahl-Karten ─────────────────────────────────────────── */
.app-scope .ld-qw-cards { display: flex; flex-direction: column; gap: var(--space-2); }
.app-scope .ld-qw-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  text-align: left;
  padding: var(--space-3) var(--space-3-5);
  border: 1px solid var(--lod-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--duration-quick), background var(--duration-quick), box-shadow var(--duration-quick);
}
.app-scope .ld-qw-card:hover { border-color: var(--lod-darkblue-300); background: var(--lod-gray-50); }
.app-scope .ld-qw-card.is-active {
  border-color: var(--lod-darkblue);
  background: var(--lod-darkblue-50);
  box-shadow: 0 0 0 1px var(--lod-darkblue) inset;
}
.app-scope .ld-qw-card-ico {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--lod-gray-100);
}
.app-scope .ld-qw-card-ico img { width: 22px; height: 22px; opacity: 0.85; }
.app-scope .ld-qw-card--vk .ld-qw-card-ico { background: var(--lod-turquoise-50); }
.app-scope .ld-qw-card--support .ld-qw-card-ico { background: var(--lod-darkblue-100); }
.app-scope .ld-qw-card--ablehnen .ld-qw-card-ico { background: var(--lod-gray-100); }
.app-scope .ld-qw-card-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app-scope .ld-qw-card-titel { font-size: var(--font-size-base); font-weight: var(--fw-semibold); color: var(--lod-darkblue-700); }
.app-scope .ld-qw-card-sub { font-size: var(--fs-badge); font-weight: var(--fw-medium); color: var(--lod-turquoise); text-transform: uppercase; letter-spacing: .03em; }
.app-scope .ld-qw-card--support .ld-qw-card-sub { color: var(--lod-darkblue); }
.app-scope .ld-qw-card--ablehnen .ld-qw-card-sub { color: var(--lod-gray-500); }
.app-scope .ld-qw-card-desc { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.45; }

/* ── Dedup-Liste (Firma-Schritt) ─────────────────────────────────────────── */
.app-scope .ld-qw-dedup { display: flex; flex-direction: column; gap: var(--space-1-5); }
.app-scope .ld-qw-dedup-label {
  font-size: var(--fs-badge); color: var(--lod-gray-600); font-weight: var(--fw-medium);
  margin-top: var(--space-1);
}
.app-scope .ld-qw-dedup-hint { font-size: var(--font-size-sm); color: var(--color-text-muted); padding: var(--space-2) 0; }
.app-scope .ld-qw-dedup-row {
  display: flex; align-items: center; gap: var(--space-2-5);
  text-align: left; width: 100%;
  padding: var(--space-2-5) var(--space-3);
  border: 1px solid var(--lod-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--duration-quick), background var(--duration-quick);
}
.app-scope .ld-qw-dedup-row:hover { border-color: var(--lod-darkblue-300); background: var(--lod-gray-50); }
.app-scope .ld-qw-dedup-row.is-active {
  border-color: var(--lod-darkblue);
  background: var(--lod-darkblue-50);
  box-shadow: 0 0 0 1px var(--lod-darkblue) inset;
}
.app-scope .ld-qw-dedup-ico { flex: 0 0 auto; opacity: 0.7; }
.app-scope .ld-qw-dedup-ico img { width: 18px; height: 18px; }
.app-scope .ld-qw-dedup-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.app-scope .ld-qw-dedup-name { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--lod-darkblue-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-scope .ld-qw-dedup-meta { font-size: var(--fs-badge); color: var(--lod-gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-scope .ld-qw-dedup-score {
  flex: 0 0 auto;
  font-size: var(--fs-badge); font-weight: var(--fw-semibold);
  padding: var(--space-px) var(--space-2);
  border-radius: var(--radius-pill-sm);
  background: var(--lod-gray-100); color: var(--lod-gray-700);
}
.app-scope .ld-qw-dedup-score--sicher { background: var(--lod-warning-100); color: var(--lod-warning-800); }
.app-scope .ld-qw-dedup-score--wahrscheinlich { background: var(--lod-darkblue-100); color: var(--lod-darkblue); }

.app-scope .ld-qw-hint { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.45; margin: 0; }
.app-scope .ld-qw-hint strong { color: var(--lod-darkblue-700); font-weight: var(--fw-medium); }

/* ── Bedarf-/Grund-Formular ──────────────────────────────────────────────── */
.app-scope .ld-qw-form { display: flex; flex-direction: column; gap: var(--space-3); }
.app-scope .ld-qw-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2-5) var(--space-3); }
.app-scope .ld-qw-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.app-scope .ld-qw-field > label { font-size: var(--fs-badge); font-weight: var(--fw-medium); color: var(--lod-gray-600); }
.app-scope .ld-qw-input,
.app-scope .ld-qw-select,
.app-scope .ld-qw-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--lod-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--lod-darkblue);
  font-family: var(--lod-font-sans);
  font-size: var(--fs-body);
  padding: 0 var(--space-2-5);
  height: 34px;
}
.app-scope .ld-qw-textarea { height: auto; min-height: 68px; padding: var(--space-2) var(--space-2-5); line-height: 1.5; resize: vertical; }
/* App-Optik statt OS-Default (letzter „graue-native-Felder"-Bruch im sonst
   polierten Wizard): eigener SVG-Chevron am Select + Hover-Kante wie die
   Drawer-Picker. Date-/Number-Inputs behalten ihre nativen Controls (Funktion),
   bekommen aber dieselbe Hover-Sprache. */
.app-scope .ld-qw-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238A9099' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right var(--space-2-5) center;
  padding-right: var(--space-6); cursor: pointer;
}
.app-scope .ld-qw-input:hover,
.app-scope .ld-qw-select:hover,
.app-scope .ld-qw-textarea:hover { border-color: var(--color-border-hover, var(--lod-gray-300)); }
.app-scope .ld-qw-input:focus-visible,
.app-scope .ld-qw-select:focus-visible,
.app-scope .ld-qw-textarea:focus-visible { outline: none; border-color: var(--lod-darkblue); box-shadow: 0 0 0 1px var(--lod-darkblue); }
.app-scope .ld-qw-check {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--font-size-sm); color: var(--lod-darkblue-700); cursor: pointer;
}
.app-scope .ld-qw-check input { margin-top: 2px; accent-color: var(--lod-darkblue); }

/* Tablet/Mobile: 2-Spalten-Bedarf bricht auf eine Spalte. */
@media (max-width: 599px) {
  .app-scope .ld-qw-grid2 { grid-template-columns: 1fr; }
}