/* ============ AUTH PAGES (Login) ============
   Ported from the Angular auth-modal component's visual design, adapted from a
   modal overlay to a standalone page (this MVC skeleton doesn't have an in-page
   auth modal yet — Login/Logout are full pages). Reuses theme.css tokens plus
   the already-global .checkbox-row/.btn/.spinner classes. */

.auth-section{ min-height:calc(100vh - 400px); display:flex; align-items:center; }

.auth-card{
  background:var(--surface-800); border:1px solid var(--border-muted); border-radius:var(--radius-lg);
  padding:40px 36px 32px; box-shadow:var(--shadow-card);
}

.auth-card h1{ font-size:26px; text-align:center; margin-bottom:8px; }
.auth-card .auth-sub{ text-align:center; color:var(--gray-400); font-size:14px; margin:0 0 28px; }

.auth-card .field{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.auth-card .field label{ font-size:13px; font-weight:600; color:var(--gray-400); }
.auth-card .field input{
  height:48px; border-radius:12px; border:1px solid var(--border-muted); background:var(--bg-900);
  color:var(--white-soft); padding:0 16px; font-size:15px; font-family:inherit; width:100%;
}
.auth-card .field input:focus{ border-color:var(--red-500); box-shadow:0 0 0 3px rgba(229,57,53,0.15); outline:none; }
.auth-card .field input.input-validation-error{ border-color:var(--red-500); }

.auth-card .checkbox-row{ margin-bottom:22px; }

.auth-card .tabs{ background:var(--bg-900); margin-bottom:24px; }

.auth-card .form-error{
  background:rgba(229,57,53,0.1); border:1px solid rgba(229,57,53,0.35); border-radius:10px;
  padding:12px 14px; color:#ff8a80; font-size:13px; margin-bottom:18px;
}
.auth-card .form-error ul{ margin:0; padding-left:18px; }

.google-btn-slot{ display:flex; justify-content:center; min-height:44px; }
.divider{ display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--gray-600); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.divider::before, .divider::after{ content:''; flex:1; height:1px; background:var(--border-muted); }

.auth-card .form-info{
  background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.3); border-radius:10px;
  padding:12px 14px; color:#86efac; font-size:13px; margin-bottom:18px;
}

.auth-card .code-input{ text-align:center; letter-spacing:8px; font-size:20px; font-weight:700; }

.auth-card .verify-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:16px; flex-wrap:wrap; gap:10px; }
.auth-card .link-btn{
  background:none; border:none; padding:0; font-size:13px; color:var(--gray-400);
  border-bottom:1px dashed var(--gray-600); cursor:pointer;
}
.auth-card .link-btn:hover{ color:var(--red-500); border-color:var(--red-500); }

.auth-card .fine-print{ font-size:12px; color:var(--gray-600); text-align:center; margin:22px 0 0; }

/* jQuery unobtrusive validation toggles these classes — hide the "no error" state. */
.validation-summary-valid,
.field-validation-valid{ display:none; }