/* portal.css — customer-portal-only styles (ITEM-130 P5).
 * 2026-06-03 — Kept SEPARATE from the admin dash.css so the two realms' class
 * namespaces never collide (a portal `.auth-card` once overrode the admin
 * login's `.auth-card`). Portal pages load dash.css (shared shell/tables/
 * buttons/theme vars) AND this file (portal-only bits). Theme vars (var(--bg-0)
 * etc.) come from dash.css's :root / [data-theme] blocks.
 *
 * Naming: portal-only classes are prefixed .pauth-* / .pmfa-*.
 */

/* ── login / MFA standalone pages ─────────────────────────────────────── */
.pauth-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; margin: 0; background: var(--bg-0);
}
.pauth-card {
  width: 360px; max-width: 92vw; background: var(--bg-1);
  border: 1px solid var(--border); border-radius: 10px; padding: 28px 26px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.pauth-card-wide { width: 520px; }
.pauth-title { font-size: 20px; font-weight: 700; margin: 0 0 4px; color: var(--fg-0); }
.pauth-form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.pauth-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--fg-2); }
.pauth-field input { width: 100%; }
.pauth-submit { margin-top: 6px; width: 100%; }

/* ── MFA enrollment QR + secret ───────────────────────────────────────── */
.pmfa-enroll-row { display: flex; gap: 18px; align-items: center; margin: 14px 0; flex-wrap: wrap; }
.pmfa-qr { width: 180px; height: 180px; background: #fff; padding: 6px; border-radius: 6px; }
.pmfa-secret { flex: 1 1 180px; }