/* ============================================================================
   OPERS UI — shared design-system layer (Pre-Q4 P6).
   ONE vocabulary of design TOKENS + a small set of canonical container widths,
   shared by the customer portal AND the admin shell. Additive and namespaced
   (`--opers-*`, `.opers-*`) so it NEVER overrides Bootstrap or existing page CSS.
   It promotes the admin-finance.css palette into portable custom properties; the
   admin sheet (admin-finance.css) and the business sheet (business.css) keep their
   own identity and are unaffected. No framework, no reset — tokens + utilities only.
   ============================================================================ */
:root {
  /* Brand palette — promoted from admin-finance.css (kept in sync). */
  --opers-navy:   #0d1b3e;   /* primary brand / headings   (== --fin-navy)   */
  --opers-border: #e3e6ee;   /* hairline borders           (== --fin-border) */
  --opers-muted:  #667085;   /* secondary text             (== --fin-muted)  */
  --opers-bg:     #f6f7fb;   /* app background             (== --fin-bg)     */
  --opers-accent: #f5b301;   /* OPERS amber accent                            */

  /* Spacing scale */
  --opers-space-1: 4px;
  --opers-space-2: 8px;
  --opers-space-3: 12px;
  --opers-space-4: 16px;
  --opers-space-5: 24px;
  --opers-space-6: 32px;

  /* Radius scale */
  --opers-radius-sm: 8px;
  --opers-radius:    14px;   /* the OPERS card/button radius seen across finance/admin */
  --opers-radius-pill: 999px;

  /* Canonical container widths — the small set that replaces 61 ad-hoc max-widths.
     Map any bespoke width to the NEAREST bucket below. */
  --opers-w-narrow:  520px;  /* single form / OTP / receipt card */
  --opers-w-form:    720px;  /* forms, auth, transactional pages  */
  --opers-w-content: 1100px; /* default customer content width    */
  --opers-w-wide:    1320px; /* dashboards / wide customer content */
  --opers-w-admin:   1400px; /* admin shell (== .admin-shell/.dept-shell/.finance-page) */
}

/* Canonical container utilities — centred, responsive, gutter-padded.
   Prefer these over inline style="max-width:…px". */
.opers-container,
.opers-container-narrow,
.opers-container-form,
.opers-container-content,
.opers-container-wide,
.opers-container-admin {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--opers-space-4);
}
.opers-container,
.opers-container-content { max-width: var(--opers-w-content); }
.opers-container-narrow  { max-width: var(--opers-w-narrow); }
.opers-container-form    { max-width: var(--opers-w-form); }
.opers-container-wide    { max-width: var(--opers-w-wide); }
.opers-container-admin   { max-width: var(--opers-w-admin); }

/* A few shared, namespaced component helpers built on the tokens (opt-in). */
.opers-card {
  background: #fff;
  border: 1px solid var(--opers-border);
  border-radius: var(--opers-radius);
  padding: var(--opers-space-4);
}
.opers-muted { color: var(--opers-muted); }
.opers-navy  { color: var(--opers-navy); }
.opers-pill  {
  display: inline-block;
  border-radius: var(--opers-radius-pill);
  padding: 2px 10px;
  font-size: .8rem;
}

/* ----------------------------------------------------------------------------
   Brand primary action (Phase-2 closure): ONE primary-button idiom across all
   shared OPERS surfaces. Pages historically mixed .btn-primary (Bootstrap blue)
   and .btn-dark (near-black) for the primary CTA; both are mapped to the OPERS
   brand navy via Bootstrap 5.3's own `--bs-btn-*` theming variables (no markup
   churn, no specificity hacks, color-only). The business portal keeps its own
   `.btn-biz` identity (loads business.css, not affected). This is a deliberate,
   scoped brand override — the only place opers-ui.css touches Bootstrap classes.
   ---------------------------------------------------------------------------- */
.btn-primary,
.btn-dark {
  --bs-btn-bg: var(--opers-navy);
  --bs-btn-border-color: var(--opers-navy);
  --bs-btn-hover-bg: #0a1531;
  --bs-btn-hover-border-color: #0a1531;
  --bs-btn-active-bg: #0a1531;
  --bs-btn-active-border-color: #0a1531;
  --bs-btn-disabled-bg: var(--opers-navy);
  --bs-btn-disabled-border-color: var(--opers-navy);
}
.btn-outline-primary,
.btn-outline-dark {
  --bs-btn-color: var(--opers-navy);
  --bs-btn-border-color: var(--opers-navy);
  --bs-btn-hover-bg: var(--opers-navy);
  --bs-btn-hover-border-color: var(--opers-navy);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--opers-navy);
  --bs-btn-active-border-color: var(--opers-navy);
}