/* ============================================================================
   Step Wizard — shared styles for any multi-step flow.

   Used by:
     - Views/Shared/_StepWizard.cshtml (the reusable partial)
     - Dynamic record Create form when its layout = "wizard"
     - (also matches the inline styles in Views/DynamicEntities/Create.cshtml so
       the look is consistent across the platform)
   ============================================================================ */

.sp-step-wizard {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 0;
}

.sp-step-wizard .step-dot {
    flex-shrink: 0;
}

.sp-step-wizard .step-circle {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 600;
    /* Inactive: muted surface; active/completed swap to primary below.  Each
       layer uses both the bridged --sp-* token and a modern hsl(var(--…))
       fallback so the wizard tracks the active design-system regardless of
       which token contract is in scope (legacy bridge or the new contract). */
    background: var(--sp-card-bg, hsl(var(--muted)));
    color: var(--sp-text-muted, hsl(var(--muted-foreground)));
    border: 2px solid var(--sp-card-border, hsl(var(--border)));
    transition: all .25s ease;
}

.sp-step-wizard .step-label {
    font-size: .85rem;
    color: var(--sp-text-muted, hsl(var(--muted-foreground)));
    font-weight: 500;
    transition: color .25s ease;
}

.sp-step-wizard .step-line {
    flex: 1;
    height: 0.125rem;
    background: var(--sp-card-border, hsl(var(--border)));
    margin: 0 0.5rem;
    transition: background .25s ease;
}

.sp-step-wizard .step-dot.active .step-circle,
.sp-step-wizard .step-dot.completed .step-circle {
    background: var(--sp-btn-primary-bg, hsl(var(--primary)));
    border-color: var(--sp-btn-primary-bg, hsl(var(--primary)));
    color: var(--sp-btn-primary-color, hsl(var(--primary-foreground)));
}

.sp-step-wizard .step-dot.active .step-label,
.sp-step-wizard .step-dot.completed .step-label {
    color: var(--sp-text-primary, hsl(var(--foreground)));
}

.sp-step-wizard .step-dot.completed + .step-line {
    background: var(--sp-btn-primary-bg, hsl(var(--primary)));
}

/* Per-step body — the partial wraps each step's content so the JS can swap
   visibility purely with class toggles. */
.sp-wizard-step { /* default: visible */ }
.sp-wizard-step.d-none { display: none !important; }

/* Optional step description shown under the wizard's step label */
.sp-step-description {
    font-size: .75rem;
    color: var(--sp-text-muted);
    margin-top: .15rem;
}