/* Varial — Wizard step nav and sub-tab strip */

/* ── Wizard step nav (horizontal scrollable pill list) ──────── */
#wizard-nav {
  gap: 0.25rem;
}

#wizard-nav .nav-item {
  flex: 0 0 auto;
}

#wizard-nav .nav-link {
  padding: 0.35rem 0.875rem;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  color: var(--varial-gray-600, #4D4A46);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--varial-radius-md, 0.375rem);
  white-space: nowrap;
  transition:
    background var(--varial-transition-fast, 150ms ease),
    color var(--varial-transition-fast, 150ms ease);
}

#wizard-nav .nav-link:hover {
  background: var(--varial-gray-100, #F1F0ED);
  color: var(--varial-gray-900, #131210);
  border-color: var(--varial-gray-200, #E4E2DC);
}

#wizard-nav .nav-link.active {
  background: var(--varial-primary, #1B3AA0);
  color: var(--varial-white, #fff);
  border-color: var(--varial-primary, #1B3AA0);
}

/* Dot indicator next to each step label */
.step-icon {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
  margin-right: 5px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* Upcoming step: hollow dot (default state) */
#wizard-nav .nav-link .step-icon {
  background: transparent;
  border: 1.5px solid currentColor;
  opacity: 0.5;
}

/* Active step: solid white dot */
#wizard-nav .nav-link.active .step-icon {
  opacity: 1;
  background: rgba(255, 255, 255, 0.85);
  border-color: transparent;
}

/* Completed step: green filled dot, muted text */
#wizard-nav .nav-link.completed {
  color: var(--varial-gray-500, #6B6763);
}

#wizard-nav .nav-link.completed .step-icon {
  opacity: 1;
  background: var(--varial-green, #16A34A);
  border-color: transparent;
}

/* ── Sub-tab strip (underline style, for page-level sections) ── */
.vrl-sub-tabs {
  display: flex;
  border-bottom: 2px solid var(--varial-border, #E4E2DC);
  margin-bottom: 1rem;
  gap: 0.25rem;
}

.vrl-sub-tabs .nav-link {
  padding: 0.375rem 0.75rem;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  color: var(--varial-gray-500);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  border-radius: 0;
  background: transparent;
  transition:
    color var(--varial-transition-fast, 150ms ease),
    border-color var(--varial-transition-fast, 150ms ease);
}

.vrl-sub-tabs .nav-link:hover {
  color: var(--varial-gray-900);
  border-bottom-color: var(--varial-gray-300);
}

.vrl-sub-tabs .nav-link.active {
  color: var(--varial-primary);
  border-bottom-color: var(--varial-primary);
}

/* ── Dark mode ────────────────────────────────────── */
[data-bs-theme="dark"] #wizard-nav .nav-link {
  color: var(--varial-gray-400);
}

[data-bs-theme="dark"] #wizard-nav .nav-link:hover {
  background: var(--varial-gray-100);
  color: var(--varial-gray-900);
}

[data-bs-theme="dark"] .vrl-sub-tabs {
  border-bottom-color: var(--varial-border);
}