/* =============================================================================
   BUAMS AI new-ui — FORGOT PASSWORD / VERIFY OTP / RESET PASSWORD
   Spec: /frontend_design.md §J.3, §J.4

   Covers all three steps of the reset flow — they share a card, a header
   pattern and a step indicator, so one page file serves all three rather than
   three near-identical files (spec §L).
   ============================================================================= */

/* ── Step indicator ───────────────────────────────────────────────────────
   The reset flow is three steps and the old pages gave no sense of position.
   Numbered rather than colour-only, so the current step is unambiguous. */
.bui-steps {
  display: flex;
  align-items: center;
  gap: var(--bui-space-2);
  margin-bottom: var(--bui-space-6);
  list-style: none;
}

.bui-step {
  display: flex;
  align-items: center;
  gap: var(--bui-space-2);
  flex: 1 1 auto;
  min-width: 0;
}

.bui-step-marker {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: var(--bui-surface-2);
  border: 1px solid var(--bui-line-strong);
  border-radius: 50%;
  font-size: var(--bui-text-xs);
  font-weight: var(--bui-fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--bui-ink-500);
}

.bui-step-label {
  font-size: var(--bui-text-xs);
  font-weight: var(--bui-fw-medium);
  color: var(--bui-ink-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Connector line to the next step */
.bui-step:not(:last-child)::after {
  content: '';
  flex: 1 1 auto;
  min-width: var(--bui-space-3);
  height: 1px;
  background: var(--bui-line);
}

.bui-step.is-current .bui-step-marker {
  background: var(--bui-primary-700);
  border-color: var(--bui-primary-700);
  color: #fff;
}

.bui-step.is-current .bui-step-label {
  color: var(--bui-ink-900);
  font-weight: var(--bui-fw-bold);
}

.bui-step.is-done .bui-step-marker {
  background: var(--bui-primary-100);
  border-color: var(--bui-primary-200);
  color: var(--bui-primary-800);
}

/* Glyph, not just colour, marks a completed step (spec §F.3) */
.bui-step.is-done .bui-step-marker::before {
  content: '\2713';
  font-weight: var(--bui-fw-heavy);
}

.bui-step.is-done .bui-step-number {
  display: none;
}

/* ── Clinic context banner ────────────────────────────────────────────────
   A reset belongs to ONE clinic. Showing which one makes the tenant scoping
   visible instead of implicit (spec §J.3). */
.bui-reset-context {
  display: flex;
  align-items: center;
  gap: var(--bui-space-2);
  padding: var(--bui-space-2) var(--bui-space-3);
  margin-bottom: var(--bui-space-6);
  background: var(--bui-primary-50);
  border: 1px solid var(--bui-primary-200);
  border-radius: var(--bui-radius-md);
  font-size: var(--bui-text-xs);
  color: var(--bui-primary-900);
}

.bui-reset-context .bi {
  flex-shrink: 0;
  color: var(--bui-primary-700);
}

.bui-reset-context-host {
  font-family: var(--bui-font-mono);
  font-weight: var(--bui-fw-semibold);
  word-break: break-all;
}

/* ── Back link ────────────────────────────────────────────────────────────── */
.bui-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--bui-space-1);
  font-size: var(--bui-text-sm);
  font-weight: var(--bui-fw-semibold);
  color: var(--bui-ink-500);
}

.bui-back-link:hover {
  color: var(--bui-primary-700);
  text-decoration: none;
}

.bui-back-link .bi {
  font-size: .95rem;
  transition: transform var(--bui-transition);
}

.bui-back-link:hover .bi {
  transform: translateX(-2px);
}

/* ── OTP input (shared with login's OTP step) ─────────────────────────────── */
.bui-otp-input {
  font-family: var(--bui-font-mono);
  font-size: 1.375rem;
  font-weight: var(--bui-fw-bold);
  letter-spacing: .5em;
  text-align: center;
  text-indent: .5em;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
  /* Labels would truncate to nothing in three columns on a phone; the numbered
     markers alone still convey position. */
  .bui-step-label {
    display: none;
  }

  .bui-step:not(:last-child)::after {
    min-width: var(--bui-space-2);
  }

  .bui-otp-input {
    font-size: 1.125rem;
    letter-spacing: .35em;
    text-indent: .35em;
  }
}