.p-stepper .p-stepper-separator {
  background: var(--p-surface-300) !important;
}

:root[class*="app-dark"] .p-stepper .p-stepper-separator {
  background: var(--p-surface-600) !important;
}

/* PrimeVue marks connector before active step as active via :has(~ .p-step-active). Keep it neutral. */
.p-stepper .p-step:has(~ .p-step-active) .p-stepper-separator {
  background: var(--p-surface-300) !important;
}

:root[class*="app-dark"] .p-stepper .p-step:has(~ .p-step-active) .p-stepper-separator {
  background: var(--p-surface-600) !important;
}

.base-stepper__step--passed .p-step-number {
  background: var(--p-primary-color);
  color: var(--p-primary-contrast-color, #fff);
  border-color: var(--p-primary-color);
}

.base-stepper__step--passed .p-step-title,
.base-stepper__step--active .p-step-title {
  color: var(--p-primary-color);
  font-weight: 600;
}

.base-stepper__step--active .p-step-number {
  background: var(--p-surface-0);
  color: var(--p-primary-color);
  border-color: var(--p-primary-color);
}

:root[class*="app-dark"] .base-stepper__step--active .p-step-number {
  background: var(--p-surface-900);
}

.base-stepper__step--upcoming .p-step-number {
  background: var(--p-surface-100);
  color: var(--p-surface-600);
  border-color: var(--p-surface-300);
}

.base-stepper__step--upcoming .p-step-title {
  color: var(--p-surface-500);
}

:root[class*="app-dark"] .base-stepper__step--upcoming .p-step-number {
  background: var(--p-surface-800);
  color: var(--p-surface-400);
  border-color: var(--p-surface-600);
}

:root[class*="app-dark"] .base-stepper__step--upcoming .p-step-title {
  color: var(--p-surface-400);
}

.base-stepper--readonly .p-step-header:disabled {
  cursor: default;
}
