/* ============================================================================
   Auth-page styling — EXTERNAL stylesheet (login / signup / password / invite).

   Why external: the product surfaces ship a strict CSP `style-src 'self'` with
   NO 'unsafe-inline', so the browser silently DROPS inline <style> blocks (and
   style="" attrs). The auth-card scaffolding used to live in an inline <style>
   in shared/_auth_base.html, ca/_auth_base.html and the nbfc/mfg/diaglab inline-
   HTML auth pages — present in the served HTML but never applied (cards rendered
   unstyled: transparent bg, no border/padding). Browser-verified via page-inspect.

   Served from /static/ (= 'self'), this file IS CSP-allowed, exactly like
   tokens/app/components.css. Token-driven (tokens.css loads first).
   ============================================================================ */

/* ---- Card scaffolding (used by shared/_auth_base, ca/_auth_base AND the inline-
        HTML auth pages: centered card + brand + heading + footer + legal line) ---- */
.sah-auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sah-space-8) var(--sah-space-4); background: var(--sah-bg); }
.sah-auth-card { width: 100%; max-width: 480px; background: var(--sah-surface); border: var(--sah-border-width) solid var(--sah-border); border-radius: var(--sah-radius-xl); box-shadow: var(--sah-shadow-md); padding: var(--sah-space-8); }
.sah-auth-brand { display: flex; align-items: center; gap: var(--sah-space-2); justify-content: center; margin-bottom: var(--sah-space-6); text-decoration: none; }
.sah-auth-head { text-align: center; margin-bottom: var(--sah-space-6); }
.sah-auth-head h1 { font-size: var(--sah-text-xl); margin: 0 0 var(--sah-space-1); color: var(--sah-text); }
.sah-auth-head p { color: var(--sah-text-muted); font-size: var(--sah-text-sm); margin: 0; }
.sah-auth-foot { margin-top: var(--sah-space-5); text-align: center; font-size: var(--sah-text-sm); color: var(--sah-text-muted); }
.sah-auth-foot a { color: var(--sah-accent); font-weight: var(--sah-weight-medium); }
.sah-auth-legal { margin-top: var(--sah-space-6); text-align: center; font-size: var(--sah-text-xs); color: var(--sah-text-subtle); }

/* ---- Form fields + submit button for the inline-HTML auth pages
        (nbfc/mfg/diaglab login+signup + nbfc signup), which use .ca-login-form /
        .form-row / .cta rather than the shared .sah-field component set. The
        shared-base products (ca/food/diag/ngo/rera/edu/export) instead use
        .sah-field/.sah-input/.sah-btn from components.css and need only the
        card scaffolding above. ---- */
.ca-login-form .form-row { display: flex; flex-direction: column; margin-bottom: var(--sah-space-4); }
.ca-login-form .form-row label { font-size: var(--sah-text-sm); color: var(--sah-text-muted); margin-bottom: var(--sah-space-1); }
.ca-login-form .form-row input, .ca-login-form .form-row select { width: 100%; box-sizing: border-box; padding: var(--sah-space-2) var(--sah-space-3); font-size: var(--sah-text-base); font-family: inherit; color: var(--sah-text); background: var(--sah-surface); border: var(--sah-border-width) solid var(--sah-border); border-radius: var(--sah-radius-md); }
.ca-login-form .form-row input:focus, .ca-login-form .form-row select:focus { outline: none; border-color: var(--sah-accent); box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15); }
.ca-login-form .consent-row label { display: flex; flex-direction: row; align-items: flex-start; gap: var(--sah-space-2); margin: 0; font-size: var(--sah-text-sm); color: var(--sah-text); }
.ca-login-form .consent-row input { width: auto; margin-top: 0.2rem; }
.ca-login-form .cta { display: block; width: 100%; box-sizing: border-box; text-align: center; padding: var(--sah-space-3) var(--sah-space-4); margin-top: var(--sah-space-2); border: 0; border-radius: var(--sah-radius-md); font-family: inherit; font-size: var(--sah-text-base); font-weight: var(--sah-weight-semibold); cursor: pointer; text-decoration: none; }
.ca-login-form .cta-primary { background: var(--sah-primary-700); color: var(--sah-text-on-primary); }
.ca-login-form .cta-primary:hover { background: var(--sah-primary-800); }

/* ---- Auth content spacing (replaces CSP-dropped style="" margins on the
        CA login/signup alerts + footer links + consent field) ---- */
.sah-auth .sah-alert { margin-bottom: var(--sah-space-4); }
.sah-auth-foot p { margin: 0 0 var(--sah-space-2); }
.sah-auth-foot p:last-child { margin: 0; }
.sah-mb-3 { margin-bottom: var(--sah-space-3); }

/* ---- Mobile ---- */
@media (max-width: 520px) { .sah-auth-card { padding: var(--sah-space-6); } }