/* ============ Onboarding shell ============ */

.onb-shell {
    max-width: 720px;
    padding: 1.5rem 1rem;
}

@media (max-width: 576px) {
    .onb-shell {
        padding: 1rem .75rem;
    }
}

.onb-header {
    margin-bottom: 1rem;
}

.onb-card {
    overflow: hidden;
}

.onb-footer {
    text-align: center;
    margin-top: .75rem;
}

/* Full-bleed adaptive backdrop (with fallbacks for older parsers) */
.onb-bg {
    min-height: 100vh;
    background: radial-gradient(1200px 200px at 50% -10%, rgba(13,110,253,.14), transparent 70%) no-repeat;
    /* Modern overrides */
    min-height: 100svh;
    --tone: var(--bs-primary);
    background: radial-gradient(1200px 200px at 50% -10%, color-mix(in srgb, var(--tone) 14%, transparent), transparent 70%) no-repeat;
}

    .onb-bg[data-tone="primary"] {
        --tone: var(--bs-primary);
    }

    .onb-bg[data-tone="info"] {
        --tone: var(--bs-info);
    }

    .onb-bg[data-tone="warning"] {
        --tone: var(--bs-warning);
    }

    .onb-bg[data-tone="success"] {
        --tone: var(--bs-success);
    }

/* Tiny colored dot beside the shell title (if you keep it) */
.onb-step-icon {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tone);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 20%, transparent);
}

/* ============ Swap animations without JS (grid overlay) ============ */

/* Let old & new fragments stack while cross-fading */
#onboarding-root {
    display: grid;
}

    #onboarding-root > * {
        grid-area: 1 / 1;
    }

    /* Incoming fades in on top */
    #onboarding-root .onb-fade-enter,
    #onboarding-root .htmx-added {
        animation: onbFadeIn .18s ease both;
        z-index: 1;
    }

    /* Outgoing fades out beneath */
    #onboarding-root .htmx-swapping {
        animation: onbFadeOut .18s ease both;
        z-index: 0;
    }

/* Optional steady floor so tiny steps don't collapse the card */
#onboarding-root {
    min-height: 220px;
}

/* Keyframes */
@keyframes onbFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes onbFadeOut {
    from {
        opacity: 1;
        transform: none;
    }

    to {
        opacity: 0;
        transform: translateY(-4px);
    }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    #onboarding-root .onb-fade-enter,
    #onboarding-root .htmx-added,
    #onboarding-root .htmx-swapping {
        animation: none;
    }
}

/* ============ Forms / inputs polish ============ */

.onb-form .form-actions {
    margin-top: 1rem;
}

/* 6-digit verify inputs */
[data-code-container] .code-box {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.25rem;
    text-align: center;
}

@media (max-width: 420px) {
    [data-code-container] {
        gap: .4rem;
    }

        [data-code-container] .code-box {
            width: 2.5rem;
            height: 2.5rem;
            font-size: 1.1rem;
        }
}

/* ============ Progress bar (track + dots + labels) ============ */
/* Expect _Progress.cshtml to set: style="--steps:N; --pct:X%" on #onboarding-progress */

.ob-track {
    position: relative;
    width: 100%;
    padding-top: .25rem;
}

/* Track fill driven by --pct */
.ob-track__bar {
    position: relative;
    height: 4px;
    background: #e9eef5;
    border-radius: 999px;
    overflow: hidden;
}

    .ob-track__bar::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: var(--pct, 0%);
        border-radius: 999px;
        background: linear-gradient(90deg, #0d6efd, #6ea8fe);
        transition: width .35s ease;
    }

/* Dots/labels grids driven by --steps */
.ob-track__dots {
    position: relative;
    margin-top: -10px;
    display: grid;
    grid-template-columns: repeat(var(--steps, 6), 1fr);
}

.ob-track__labels {
    display: grid;
    grid-template-columns: repeat(var(--steps, 6), 1fr);
    margin-top: .35rem;
    color: #6b7280;
}

/* Dot visuals */
.ob-dot {
    width: 20px;
    height: 20px;
    margin: 0 auto;
    border-radius: 50%;
    border: 2px solid #b9c6d6;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 2px rgba(16,24,40,.06);
    cursor: default;
}

    /* Completed: filled + ✓ */
    .ob-dot.ob-done {
        border-color: #0d6efd;
        background: #0d6efd;
        color: #fff;
        box-shadow: 0 0 0 4px rgba(13,110,253,.10);
    }

        .ob-dot.ob-done::after {
            content: "✓";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -55%);
            font-size: .9rem;
            font-weight: 700;
            color: #fff;
        }

    /* Active: ring + subtle pulse */
    .ob-dot.ob-active {
        border-color: #0d6efd;
        background: #fff;
        box-shadow: 0 0 0 6px rgba(13,110,253,.12);
        animation: obPulse 2s infinite;
    }

@keyframes obPulse {
    0% {
        box-shadow: 0 0 0 6px rgba(13,110,253,.12);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(13,110,253,.05);
    }

    100% {
        box-shadow: 0 0 0 6px rgba(13,110,253,.12);
    }
}

/* Labels */
.ob-label {
    text-align: center;
    font-size: .85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .ob-label.ob-active {
        color: #111827;
        font-weight: 600;
    }

    .ob-label.ob-done {
        color: #374151;
    }

/* Mobile: hide labels for a cleaner look */
@media (max-width: 420px) {
    .ob-track__labels {
        display: none;
    }
}


/* 2FA -  Center QR + timers */
.qr-wrap {
    text-align: center;
}

.qr-img {
    max-width: 200px;
    height: auto;
    margin: 0 auto;
    display: block;
}

/* Center input and keep it compact */
#step-2fa input[name="TotpVerificationCode"] {
    font-size: 1.25rem;
    letter-spacing: .25rem;
    text-align: center;
}

/* Push verify button to full width at bottom */
#step-2fa form {
    display: flex;
    flex-direction: column;
    height: 100%;
}

    #step-2fa form button[type="submit"] {
        margin-top: auto; /* pushes button to bottom if container is taller */
    }

.onb-bg[data-tone="warning"] .totp-rotation .rotor-ring {
    --rotor-color: #f59f00;
}

.onb-bg[data-tone="success"] .totp-rotation .rotor-ring {
    --rotor-color: #198754;
}