/* ============================================================
   EduShieldID — components/badges.css
   Every small colour-coded pill in the app: generic status
   badges, the profile-page is-success/is-warning variant,
   document statuses, pricing plan pills, and fraud tags.
   ============================================================ */

/* ── Status badge (partials/status_badge.html) ────────────────
   One rule, not two. There used to be a second `.status-badge` block further
   down (the inline-flex + dot version), and the line above it was a leftover
   sentence from an edited comment ending in a comment-close marker with no
   opener. The parser therefore read that orphaned prose plus the selector
   after it as a single invalid selector and threw the whole block away, so
   every badge in the app lost display:inline-flex, the gap and the border
   while KEEPING the ::before dot the next rule declares: a dot jammed against
   the label with nothing between them.

   Note that a comment-close marker cannot be quoted inside a CSS comment — it
   ends the comment wherever it appears, which is how the original damage got
   in. Merged here so there is exactly one place the base badge is defined. */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 1px solid transparent;
  /* A status is a label, not a sentence: never let it wrap mid-word inside a
     table cell. */
  white-space: nowrap;
  /* Unmatched statuses used to render as bare uppercase text with a black dot
     and no pill at all. This is the floor every variant below overrides. */
  background: var(--clr-surface-alt);
  color: var(--clr-text-muted);
}

.status-badge--pending      { background: var(--clr-warning-bg); color: var(--clr-warning); }
.status-badge--approved     { background: var(--clr-success-bg); color: var(--clr-success); }
.status-badge--rejected     { background: var(--clr-danger-bg);  color: var(--clr-danger); }
.status-badge--flagged      { background: #fff3e0; color: #e65100; }
.status-badge--processing   { background: var(--clr-info-bg);    color: var(--clr-info); }
.status-badge--completed    { background: var(--clr-success-bg); color: var(--clr-success); }
.status-badge--failed       { background: var(--clr-danger-bg);  color: var(--clr-danger); }
.status-badge--low          { background: var(--clr-success-bg); color: var(--clr-success); }
.status-badge--medium       { background: var(--clr-warning-bg); color: var(--clr-warning); }
.status-badge--high         { background: #ffe0e0; color: #c62828; }
.status-badge--critical     { background: #fce4ec; color: #880e4f; }
.status-badge--eligible      { background: var(--clr-success-bg); color: var(--clr-success); }
.status-badge--manual_review { background: var(--clr-warning-bg); color: var(--clr-warning); }
.status-badge--not_eligible  { background: var(--clr-danger-bg);  color: var(--clr-danger); }

/* ── Payment ledger and processor values (admin billing) ─────── */
.status-badge--settled   { background: var(--clr-success-bg); color: var(--clr-success); }
.status-badge--reversed  { background: var(--clr-danger-bg);  color: var(--clr-danger); }
.status-badge--processed { background: var(--clr-success-bg); color: var(--clr-success); }
.status-badge--ignored   { background: var(--clr-surface-alt); color: var(--clr-text-muted); }
.status-badge--open      { background: var(--clr-danger-bg);  color: var(--clr-danger); }
.status-badge--under_review { background: var(--clr-warning-bg); color: var(--clr-warning); }
.status-badge--won       { background: var(--clr-success-bg); color: var(--clr-success); }
.status-badge--lost      { background: var(--clr-danger-bg);  color: var(--clr-danger); }

/* ── Document status values (documents/*.html) ───────────────── */
.status-badge--uploaded          { background: var(--clr-info-bg);    color: var(--clr-info); }
.status-badge--ocr_complete      { background: var(--clr-success-bg); color: var(--clr-success); }
.status-badge--ocr_needs_review  { background: var(--clr-warning-bg); color: var(--clr-warning); }
.status-badge--flagged_unreadable{ background: var(--clr-danger-bg);  color: var(--clr-danger); }
.status-badge--flagged_duplicate { background: var(--clr-warning-bg); color: var(--clr-warning); }
.status-badge--flagged_tampered  { background: var(--clr-danger-bg);  color: var(--clr-danger); }

/* ── Statuses that reach status_badge.html but had no variant ──
   partials/status_badge.html renders `status-badge--{{ status|lower }}` from
   whatever the model hands it, so every choice value in every model that gets
   passed through it needs a variant here or the badge falls through to the
   neutral floor. These are the ones that were missing, grouped by the model
   they come from. Colour follows meaning, not the field: "unpaid" and
   "overdue" are different levels of bad, "graduated" and "withdrawn" are both
   terminal but only one is good news. */

/* Institution.Status */
.status-badge--active     { background: var(--clr-success-bg); color: var(--clr-success); }
.status-badge--suspended  { background: var(--clr-danger-bg);  color: var(--clr-danger); }

/* billing.Invoice.Status + institutions.Invoice.Status */
.status-badge--draft          { background: var(--clr-surface-alt); color: var(--clr-text-muted); }
.status-badge--scheduled      { background: var(--clr-info-bg);     color: var(--clr-info); }
.status-badge--issued         { background: var(--clr-info-bg);     color: var(--clr-info); }
.status-badge--paid           { background: var(--clr-success-bg);  color: var(--clr-success); }
.status-badge--partially_paid { background: var(--clr-warning-bg);  color: var(--clr-warning); }
.status-badge--unpaid         { background: var(--clr-warning-bg);  color: var(--clr-warning); }
.status-badge--overdue        { background: var(--clr-danger-bg);   color: var(--clr-danger); }
.status-badge--cancelled      { background: var(--clr-surface-alt); color: var(--clr-text-muted); }
.status-badge--refunded       { background: var(--clr-info-bg);     color: var(--clr-info); }
.status-badge--written_off    { background: var(--clr-surface-alt); color: var(--clr-text-muted); }
.status-badge--trial          { background: var(--clr-info-bg);     color: var(--clr-info); }

/* appeals.Appeal.Status — "open" means awaiting us, so it reads as pending. */
.status-badge--open { background: var(--clr-warning-bg); color: var(--clr-warning); }

/* roster.ImportJob.Status */
.status-badge--awaiting_approval { background: var(--clr-warning-bg); color: var(--clr-warning); }
.status-badge--queued            { background: var(--clr-surface-alt); color: var(--clr-text-muted); }
.status-badge--running           { background: var(--clr-info-bg);     color: var(--clr-info); }
.status-badge--succeeded         { background: var(--clr-success-bg);  color: var(--clr-success); }

/* semester_data.EnrollmentRecord.Status */
.status-badge--enrolled    { background: var(--clr-success-bg);  color: var(--clr-success); }
.status-badge--graduated   { background: var(--clr-info-bg);     color: var(--clr-info); }
.status-badge--deferred    { background: var(--clr-warning-bg);  color: var(--clr-warning); }
.status-badge--withdrawn   { background: var(--clr-surface-alt); color: var(--clr-text-muted); }
.status-badge--transferred { background: var(--clr-surface-alt); color: var(--clr-text-muted); }
.status-badge--inactive    { background: var(--clr-surface-alt); color: var(--clr-text-muted); }

/* onboarding.InstitutionInquiry.Status — a pipeline, so the in-flight states
   share the "work in progress" blue and only the ends are green/red/grey. */
.status-badge--submitted                { background: var(--clr-info-bg);     color: var(--clr-info); }
.status-badge--pending_review           { background: var(--clr-warning-bg);  color: var(--clr-warning); }
.status-badge--discovery_scheduled      { background: var(--clr-info-bg);     color: var(--clr-info); }
.status-badge--discovery_completed      { background: var(--clr-info-bg);     color: var(--clr-info); }
.status-badge--awaiting_verification    { background: var(--clr-warning-bg);  color: var(--clr-warning); }
.status-badge--verification_in_progress { background: var(--clr-info-bg);     color: var(--clr-info); }
.status-badge--invitation_sent          { background: var(--clr-info-bg);     color: var(--clr-info); }
.status-badge--registration_completed   { background: var(--clr-success-bg);  color: var(--clr-success); }
.status-badge--closed                   { background: var(--clr-surface-alt); color: var(--clr-text-muted); }
.status-badge--expired                  { background: var(--clr-surface-alt); color: var(--clr-text-muted); }

/* onboarding.VerificationCheck.Status — "waived" is a deliberate human
   override, not a pass, so it reads as neither green nor red. */
.status-badge--passed { background: var(--clr-success-bg);  color: var(--clr-success); }
.status-badge--waived { background: var(--clr-surface-alt); color: var(--clr-text-muted); }

/* OnboardingInvitation.state — a derived property, not a field: USED is the
   happy ending (the school registered), REVOKED is an admin action. */
.status-badge--used    { background: var(--clr-success-bg);  color: var(--clr-success); }
.status-badge--revoked { background: var(--clr-danger-bg);   color: var(--clr-danger); }

/* configuration.ConfigEntry.Status / monitoring.Incident.Status */
.status-badge--pending_approval { background: var(--clr-warning-bg);  color: var(--clr-warning); }
.status-badge--superseded       { background: var(--clr-surface-alt); color: var(--clr-text-muted); }
.status-badge--acknowledged     { background: var(--clr-info-bg);     color: var(--clr-info); }
.status-badge--resolved         { background: var(--clr-success-bg);  color: var(--clr-success); }
.status-badge--muted            { background: var(--clr-surface-alt); color: var(--clr-text-muted); }

/* ── Profile-page status badge (dot + is-* variants) ─────────── */
.status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.status-badge.is-success { color: var(--clr-success); background: var(--clr-success-bg); border-color: rgba(163,190,140,.35); }
.status-badge.is-warning { color: var(--clr-warning); background: var(--clr-warning-bg); border-color: rgba(235,203,139,.35); }
.status-badge.is-danger  { color: var(--clr-danger);  background: var(--clr-danger-bg);  border-color: rgba(191,97,106,.35); }
.status-badge.is-neutral { color: var(--clr-text-muted); background: var(--clr-surface-alt); border-color: var(--clr-border); }

/* ── Pricing plan pills (landing/pricing.html) ────────────────── */
.plan-badges-wrap { display: flex; gap: 8px; margin-bottom: var(--sp-3); }
.plan-pill {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 3px 10px;
  border-radius: var(--radius-full);
}
.plan-pill.offer   { background: var(--clr-warning-bg); color: var(--clr-warning); }
.plan-pill.popular { background: var(--clr-primary-light); color: var(--clr-primary); }

/* ── Fraud indicator tag (school/fraud/alerts.html) ───────────── */
.fraud-indicator-tag {
  display: inline-block;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--clr-danger-bg);
  color: var(--clr-danger);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-family: var(--font-mono);
}

/* ── Generic badge (onboarding pipeline risk scores, inline tags) ──
   Distinct from .status-badge above: that one keys off a domain status
   value, this one is a plain colour-coded pill the template chooses. */
.badge {
  display: inline-block;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  background: var(--clr-surface-alt, #eef1f6);
  color: var(--clr-text-muted, #4b5563);
}
.badge-success { background: var(--clr-success-bg); color: var(--clr-success); }
.badge-warning { background: var(--clr-warning-bg); color: var(--clr-warning); }
.badge-danger  { background: var(--clr-danger-bg);  color: var(--clr-danger); }