/* ============================================================
 * Batch lifecycle stepper (.ng-batch-stepper)
 * ------------------------------------------------------------
 * The canonical batch status progression, shared by the payment
 * batch page and the enrolment batch page. Markup and rationale:
 * resources/views/partials/batch-lifecycle-stepper.blade.php and
 * docs/design.md, "Batch lifecycle stepper".
 *
 * Four step states, each with its OWN SHAPE, not just its own
 * colour — same rule as .ng-criteria. Recolouring one ring four
 * ways would fail WCAG 1.4.1 for anyone who cannot discriminate
 * hue, and this strip's whole job is to say "you are here":
 *
 *   --done            filled disc + check glyph
 *   --current         ring with a solid centre dot
 *   --upcoming        hollow ring
 *   --not-applicable  dashed ring with a centre bar
 *
 * Every colour is a semantic token so the component flips with
 * the dark theme for free.
 * ============================================================ */

.ng-batch-stepper {
    margin: var(--space-4) 0;
}

.ng-batch-stepper__track {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.ng-batch-stepper__step {
    position: relative;
    flex: 1 1 96px;
    min-width: 96px;
    padding-top: 28px;
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-text-muted);
}

/* Connector — drawn to the LEFT of every step but the first, so the
   line never dangles past the end of the strip. */
.ng-batch-stepper__step + .ng-batch-stepper__step::before {
    content: "";
    position: absolute;
    top: 9px;
    right: 50%;
    left: -50%;
    height: 2px;
    margin-right: 12px;
    margin-left: 12px;
    background: var(--color-border-default);
}

.ng-batch-stepper__step--done + .ng-batch-stepper__step::before,
.ng-batch-stepper__step--current + .ng-batch-stepper__step::before {
    background: var(--color-feedback-success);
}

/* ---- Marker -------------------------------------------------- */

.ng-batch-stepper__marker {
    position: absolute;
    top: 0;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    border: 2px solid var(--color-border-default);
    border-radius: var(--radius-full);
    background: var(--color-bg-surface);
}

/* done — filled disc with a check drawn from two borders */
.ng-batch-stepper__step--done .ng-batch-stepper__marker {
    border-color: var(--color-feedback-success);
    background: var(--color-feedback-success);
}

.ng-batch-stepper__step--done .ng-batch-stepper__marker::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: solid var(--color-neutral-0);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* current — ring with a solid centre dot */
.ng-batch-stepper__step--current .ng-batch-stepper__marker {
    border-color: var(--color-brand-secondary);
}

.ng-batch-stepper__step--current .ng-batch-stepper__marker::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--color-brand-secondary);
}

/* upcoming — hollow ring, no inner glyph. */

/* not applicable — dashed ring with a centre bar */
.ng-batch-stepper__step--not-applicable .ng-batch-stepper__marker {
    border-style: dashed;
}

.ng-batch-stepper__step--not-applicable .ng-batch-stepper__marker::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 3px;
    width: 10px;
    height: 2px;
    background: var(--color-text-muted);
}

/* ---- Label --------------------------------------------------- */

.ng-batch-stepper__label {
    display: block;
    word-break: break-word;
}

.ng-batch-stepper__step--current .ng-batch-stepper__label {
    font-weight: 600;
    color: var(--color-text-default);
}

.ng-batch-stepper__step--done .ng-batch-stepper__label {
    color: var(--color-text-default);
}

/* The one visual difference between the two batch pages: a stage this
   batch type can never reach. Struck through and dimmed so it reads as
   "not part of this batch's story" without being mistaken for a step
   that is merely still ahead. */
.ng-batch-stepper__step--not-applicable .ng-batch-stepper__label {
    text-decoration: line-through;
    opacity: 0.65;
}

/* ---- Off-sequence outcome ------------------------------------ */

.ng-batch-stepper__outcome {
    margin: var(--space-3) 0 0;
    font-size: 12px;
    line-height: 18px;
    color: var(--color-text-muted);
}

.ng-batch-stepper__outcome-text {
    margin-right: var(--space-2);
}

/* When the batch has left the sequence the strip is history, not a
   forecast — dim it so the outcome badge below carries the message. */
.ng-batch-stepper--exited .ng-batch-stepper__track {
    opacity: 0.55;
}

@media (max-width: 480px) {
    .ng-batch-stepper__step {
        flex-basis: 72px;
        min-width: 72px;
        font-size: 11px;
    }
}