/* v2 polish for the lead pipeline page. Scoped to
   body[data-theme="v2"] #page-lead-pipeline. The page already leans
   heavily on shared primitives (card, field, status-chip, btn) which
   are styled by v2/primitives.css, so this sheet only re-tones the
   page-specific .wg-* selectors. */

body[data-theme="v2"] #page-lead-pipeline {
  padding: var(--space-6) 0;
}

/* ──────────────────────────────────────────────────────────────
   Sub-nav pill bar
   ────────────────────────────────────────────────────────────── */
body[data-theme="v2"] #page-lead-pipeline .wg-subnav,
body[data-theme="v2"] .wg-subnav {
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  padding: var(--space-1);
  background: var(--bg-soft);
  border: var(--border-subtle);
  border-radius: var(--radius-pill);
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

body[data-theme="v2"] .wg-subnav::-webkit-scrollbar { display: none; }

body[data-theme="v2"] .wg-subnav-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  letter-spacing: .01em;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

body[data-theme="v2"] .wg-subnav-btn:hover {
  background: var(--panel-2);
  color: var(--text);
}

body[data-theme="v2"] .wg-subnav-btn.active {
  background: var(--panel-3);
  color: var(--text-strong);
  border: none;
}

/* ──────────────────────────────────────────────────────────────
   Grids — keep the column logic, tune spacing
   ────────────────────────────────────────────────────────────── */
body[data-theme="v2"] .wg-section-stack {
  gap: var(--space-4);
}

body[data-theme="v2"] .wg-form-grid,
body[data-theme="v2"] .wg-filter-grid,
body[data-theme="v2"] .wg-detail-grid {
  gap: var(--space-3);
}

body[data-theme="v2"] .wg-actions-row {
  gap: var(--space-2);
  margin-top: var(--space-3);
}

body[data-theme="v2"] .wg-inline-controls {
  gap: var(--space-2);
}

body[data-theme="v2"] .wg-checkbox-field {
  margin-top: var(--space-6);
}

body[data-theme="v2"] .wg-inline-badges {
  gap: var(--space-2);
}

/* ──────────────────────────────────────────────────────────────
   Progress + checklist — used by the lead validation gate
   ────────────────────────────────────────────────────────────── */
body[data-theme="v2"] .wg-checklist-wrap {
  margin-top: var(--space-3);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: var(--panel-2);
}

body[data-theme="v2"] .wg-progress-head {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

body[data-theme="v2"] .wg-progress-bar {
  height: 8px;
  background: var(--bg-soft);
  border: var(--border-subtle);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

body[data-theme="v2"] .wg-progress-bar > span {
  background: linear-gradient(90deg, var(--blue), var(--blue-2));
}

body[data-theme="v2"] .wg-checklist {
  margin-top: var(--space-3);
  gap: var(--space-1);
}

body[data-theme="v2"] .wg-checklist li {
  border: var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--panel);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text);
}

body[data-theme="v2"] .wg-check-icon {
  font-weight: var(--weight-bold);
}

body[data-theme="v2"] .wg-check-icon.ok {
  background: rgba(47, 223, 163, .14);
  color: var(--positive-soft);
}

body[data-theme="v2"] .wg-check-icon.bad {
  background: rgba(243, 124, 145, .14);
  color: var(--danger-soft);
}