:root {
    /* circle diameter */
    --sbm-stepper-node-size: 2rem;
    /* connector thickness */
    --sbm-stepper-rail-h: .25rem;
    /* small gap after/before a circle */
    --sbm-stepper-rail-gap: 8px;
    /* visual gap between step columns */
    --sbm-stepper-col-gap: 1rem;
    /* min width per column for comfy labels */
    --sbm-stepper-col-min: 11rem;
}

/* Produce one track per child. Keep columns at least --sbm-col-min, grow up to 1fr. */
.sbm-stepper-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(var(--sbm-stepper-col-min), 1fr);
    column-gap: 0;
    /* connectors remain continuous; we emulate the gap via cell padding */
    width: 100%;
    padding: 0.25rem .5rem;
    overflow: hidden;
}

/* ===== TOP: CIRCLES + CONNECTORS ===== */
.sbm-stepper-circle__cell {
    display: flex;
    align-items: center;
    padding-right: var(--sbm-stepper-col-gap);
    height: 2.5rem;
    position: relative;
}

.sbm-stepper-circle__cell:last-child {
    padding-right: 0;
}

.sbm-stepper-circle__link {
    display: inline-flex;
    flex: 0 0 var(--sbm-stepper-node-size);
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    color: inherit;
    pointer-events: auto;
}

.sbm-stepper-circle__link.disabled {
    pointer-events: none;
    opacity: .6;
    text-decoration: none;
    cursor: default;
}

.sbm-stepper-circle {
    width: var(--sbm-stepper-node-size);
    height: var(--sbm-stepper-node-size);
    border-radius: 50%;
    border: 2px solid var(--bs-border-color, #dee2e6);
    background: #fff;
    display: grid;
    place-items: center;
    color: var(--bs-secondary, #6c757d);
    font-size: .95rem;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
    -webkit-user-select: none;
    user-select: none;
}

.sbm-stepper-circle__link:not(.disabled):hover .sbm-stepper-circle--completed {
    box-shadow: 0px 0px 0px 4px var(--bs-success-border-subtle);
}


.sbm-stepper-circle__link:not(.disabled):hover .sbm-stepper-circle--active {
    box-shadow: 0px 0px 0px 4px var(--bs-primary-border-subtle);
}

/* Circle state colors */
.sbm-stepper-circle--completed {
    background: var(--bs-success, #198754);
    border-color: var(--bs-success, #198754);
    color: #fff;
}

.sbm-stepper-circle--active {
    background: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    color: #fff;
}

.sbm-stepper-circle--pending {
    border-color: var(--bs-secondary, #6c757d);
    color: var(--bs-secondary, #6c757d);
    background: #fff;
    opacity: .95;
}

.sbm-stepper-circle--rejected {
    background: var(--bs-danger, #DC3545);
    border-color: var(--bs-danger, #DC3545);
    color: #fff;
}

.sbm-stepper-circle__connector {
    flex: 1 1 auto;
    height: var(--sbm-stepper-rail-h);
    border-radius: 9999px;
    margin-left: var(--sbm-stepper-rail-gap);
    margin-right: var(--sbm-stepper-rail-gap);
    background: var(--bs-secondary, #6c757d);
    opacity: .6;
}

.sbm-stepper-circle__connector--completed {
    background: var(--bs-success, #198754);
}

.sbm-stepper-circle__connector--active {
    background: linear-gradient(to right,
            var(--bs-primary, #0d6efd) 0 50%,
            var(--bs-secondary, #6c757d) 50% 100%);
}

.sbm-stepper-circle__connector--rejected {
    background: var(--bs-danger, #DC3545);
}

/* Last column has no connector */
.sbm-stepper-circle__cell:last-child .sbm-stepper-circle__connector {
    display: none;
}

/* ===== BOTTOM: LABELS ===== */
.sbm-stepper-label__cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: .35rem;
    color: inherit;
    padding-right: var(--sbm-stepper-col-gap);
}

.sbm-stepper-label__cell:last-child {
    padding-right: 0;
}

.sbm-stepper-label__cell > .p2 {
    font-weight: 600;
    line-height: 1.2;
}

/* Badge container */
.sbm-stepper-label__badge .badge {
    font-size: .7rem;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    :root {
        --sbm-stepper-col-min: 9.5rem;
    }

    .sbm-stepper-grid {
        overflow-x: auto;
    }
}