/* Layout-scoped (only _LayoutNoTracking links it, after pro-security.css): the signed-out pages (sign-in, SSO,
   forgot/reset password, "Wasn't you?") as one centred Pro card. Bump the ?v= in the layout when this changes:
   Cloudflare caches static files by URL. */
body.pro-signin-body { display: flex; flex-direction: column; min-height: 100vh; }

.pro-signin { flex: 1 0 auto; width: 100%; max-width: 440px; margin: 0 auto; padding: 48px 16px 32px; box-sizing: border-box; }
.pro-signin .card-panel { margin: 0; padding: 28px 32px 32px; }
.pro-signin h1 { margin: 0 0 8px; font-size: 26px; font-weight: 400; line-height: 1.2; }
.pro-signin p { margin: 0 0 12px; color: #616161; }
.pro-signin form { margin: 0; }

/* The fields: pro-security.css styles password inputs; email and text inputs get the same treatment here. */
.pro-signin .pro-field input[type=email],
.pro-signin .pro-field input[type=text] { width: 100%; height: 40px; box-sizing: border-box; margin: 0; padding: 0; font-size: 16px; }
.pro-signin .pro-field .input-validation-error { border-bottom: 1px solid #d32f2f; box-shadow: 0 1px 0 0 #d32f2f; }
.pro-signin .field-validation-error { display: block; margin-top: 4px; color: #c62828; font-size: 12px; }

/* Model-level errors ("Invalid login attempt.") in the same red panel as the Security page's. The panel is on the
   li: MVC renders the summary div even when it only holds a hidden placeholder li (field errors only). */
.pro-signin .validation-summary-errors ul { margin: 0; padding: 0; list-style: none; }
.pro-signin .validation-summary-errors li { margin: 4px 0 0; padding: 10px 16px; background: #ffebee; border-radius: 2px; color: #b71c1c; }
.pro-signin .pro-warning { margin: 4px 0 0; padding: 10px 16px; background: #fff8e1; border-radius: 2px; color: #5d4037; }

.pro-signin .pro-check { position: relative; padding-top: 16px; }
/* Materialize 0.x hides the real input with visibility:hidden, which drops it from the tab order and the
   accessibility tree. Keep it invisible but focusable, over the drawn box, and ring the box on focus. */
.pro-signin .pro-check [type=checkbox] { visibility: visible; opacity: 0; left: 0; top: 16px; width: 18px; height: 18px; margin: 0; }
.pro-signin .pro-check [type=checkbox].filled-in:focus + label:after { box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.35); }
.pro-signin .pro-check label { color: rgba(0,0,0,0.87); font-size: 14px; }
.pro-signin .pro-submit { width: 100%; margin-top: 24px; }
.pro-signin .pro-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 20px; font-size: 14px; }
.pro-signin .pro-ref { color: #757575; font-size: 13px; }

.pro-signin-footer { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; padding: 16px; color: #757575; font-size: 12px; }
.pro-signin-footer a { color: #757575; }
.pro-signin-footer a:hover { color: #424242; }

@media (max-width: 480px) {
    .pro-signin { padding-top: 24px; }
    .pro-signin .card-panel { padding: 20px; }
}