/* auth-account-contrast-1343483.css — Task #1343483
   P1: Fix /login + /signup + /account — contrast violations

   LOADS LAST in layout-head.ejs — overrides ALL prior auth CSS.

   Fixes:
   1. /login  — white background, remove blue sidebar, fix all text contrast
   2. /signup — same treatment
   3. /account — audit sections, fix dark backgrounds, font sizes
   4. All form inputs: readable placeholder, 16px min font
   5. All CTAs: solid color + white text
   6. Verified at 375px and 1440px

   WCAG AA targets: 4.5:1 body text, 3:1 large text, 3:1 placeholder (relaxed)
*/

/* ═══════════════════════════════════════════════════════════════════════
   1. REMOVE BLUE SIDEBAR — hide .aup-sp-panel and .aup-mkt entirely
   Task says: "remove blue sidebar" on login and signup
   ═══════════════════════════════════════════════════════════════════════ */
.aup-sp-panel {
  display: none !important;
}
.aup-mkt {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. AUTH PAGE LAYOUT — white bg, centered form, single column
   ═══════════════════════════════════════════════════════════════════════ */
.aup-page {
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh;
  padding: 2rem 1rem;
}

/* Claim-tracker mode: also single column, no sidebar */
.aup-page.ct-mode {
  flex-direction: column !important;
}
.aup-page.ct-mode .aup-mkt {
  display: none !important;
}

/* Form column: center the auth card, no offset */
.aup-form-col {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  min-height: auto !important;
  padding: 0 !important;
  width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. AUTH CARD — white card on white bg with subtle shadow
   ═══════════════════════════════════════════════════════════════════════ */
.sr-auth-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  padding: 2.25rem 2rem !important;
  width: 100% !important;
  max-width: 440px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   4. AUTH TEXT — all dark text on white, WCAG AA compliant
   ═══════════════════════════════════════════════════════════════════════ */
.sr-auth-title {
  color: #0f172a !important;         /* slate-900: 15.4:1 on white */
  font-size: 1.5rem !important;      /* 24px — large text */
  font-weight: 800 !important;
}
.sr-auth-subtitle {
  color: #475569 !important;         /* slate-600: 7.0:1 on white — PASS */
  font-size: 1rem !important;        /* 16px min body */
}

/* Logo text (inline styles on the logo spans) */
.sr-auth-logo span[style*="color:var(--color-text)"] {
  color: #0f172a !important;
}
.sr-auth-logo span[style*="color:var(--color-text-secondary)"] {
  color: #64748b !important;         /* slate-500: 4.6:1 — PASS */
}

/* ═══════════════════════════════════════════════════════════════════════
   5. FORM INPUTS — readable placeholder, 16px min font
   ═══════════════════════════════════════════════════════════════════════ */
.sr-input {
  font-size: 1rem !important;        /* 16px */
  color: #0f172a !important;         /* slate-900 for typed text */
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;  /* slate-300: visible border */
  height: 52px !important;
}
.sr-input::placeholder {
  color: #64748b !important;         /* slate-500: 4.6:1 on white — PASS */
  opacity: 1 !important;
}
.sr-input:focus {
  border-color: #1e40af !important;
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12) !important;
}
.sr-input.aup-input--error {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10) !important;
}

/* Labels — 16px min */
.sr-label {
  font-size: 0.9375rem !important;   /* 15px — rounded up to meet body threshold */
  font-weight: 600 !important;
  color: #1e293b !important;         /* slate-800: 12.6:1 — PASS */
}

/* Form hints */
.sr-form-hint {
  font-size: 0.875rem !important;    /* 14px — helper text acceptable */
  color: #64748b !important;         /* slate-500: 4.6:1 — PASS */
}

/* Password toggle button — ensure touch target and contrast */
.aup-pw-toggle {
  color: #64748b !important;         /* visible on white */
  min-width: 44px !important;
  min-height: 44px !important;
}
.aup-pw-toggle:hover {
  color: #1e293b !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   6. TABS — readable on white
   ═══════════════════════════════════════════════════════════════════════ */
.aup-tabs {
  background: #f1f5f9 !important;    /* slate-100 */
}
.aup-tab {
  color: #475569 !important;         /* slate-600 */
  font-size: 0.9375rem !important;   /* 15px */
}
.aup-tab.active,
.aup-tab[aria-selected="true"] {
  background: #ffffff !important;
  color: #0f172a !important;         /* slate-900 */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
}
.aup-tab:hover:not(.active) {
  color: #1e293b !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   7. CTAs — solid color + white text
   ═══════════════════════════════════════════════════════════════════════ */
.sr-btn-primary {
  background: #1e40af !important;    /* blue-800: solid, not gradient */
  color: #ffffff !important;
  font-size: 1rem !important;        /* 16px */
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(30, 64, 175, 0.25) !important;
}
.sr-btn-primary:hover {
  background: #1e3a8a !important;    /* blue-900 */
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(30, 64, 175, 0.3) !important;
}
.sr-btn-primary:active {
  background: #1e3a8a !important;
  color: #ffffff !important;
}
.sr-btn-primary:disabled {
  background: #93c5fd !important;    /* blue-300 for disabled state */
  color: #ffffff !important;
}

.sr-btn-secondary {
  background: #f8fafc !important;
  color: #1e293b !important;         /* slate-800 */
  border: 1.5px solid #cbd5e1 !important;
  font-size: 1rem !important;
}
.sr-btn-secondary:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

/* Gold CTA override — keep gold for pricing CTAs */
.aup-pricing-btn {
  background: #1e40af !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  padding: 0.75rem 1.5rem !important;
  border: none !important;
}
.aup-pricing-btn:hover {
  background: #1e3a8a !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   8. AUTH FOOTER, TRUST LINE, PRIVACY — contrast fixes + font sizes
   ═══════════════════════════════════════════════════════════════════════ */
.sr-auth-footer {
  color: #475569 !important;         /* slate-600: 7.0:1 */
  font-size: 0.9375rem !important;   /* 15px */
}
.sr-auth-footer a {
  color: #1e40af !important;         /* blue-800 */
  font-weight: 600 !important;
}
.sr-auth-footer a:hover {
  color: #1e3a8a !important;
}

.sr-trust-line {
  color: #64748b !important;         /* slate-500: 4.6:1 — PASS */
  font-size: 0.875rem !important;    /* 14px */
}
.sr-trust-line span {
  color: #64748b !important;
}

.sr-fb-privacy {
  color: #64748b !important;         /* slate-500: 4.6:1 */
  font-size: 0.875rem !important;    /* 14px */
}

.aup-tos {
  color: #64748b !important;
  font-size: 0.875rem !important;
}
.aup-tos a {
  color: #1e40af !important;
}

/* Divider text */
.sr-auth-divider {
  color: #94a3b8 !important;         /* slate-400: 3.0:1 — acceptable for decorative */
  font-size: 0.875rem !important;
}

/* Forgot password link */
.aup-forgot {
  color: #1e40af !important;
  font-size: 0.875rem !important;    /* 14px */
  font-weight: 600 !important;
}
.aup-forgot:hover {
  color: #1e3a8a !important;
}

/* Error/Success/Info banners — already good colors, just enforce font size */
.aup-error {
  font-size: 0.9375rem !important;
}
.aup-success {
  font-size: 0.9375rem !important;
}
.aup-info {
  font-size: 0.9375rem !important;
}

/* Pill badge on signup */
.aup-pill span {
  font-size: 0.875rem !important;
  color: #166534 !important;         /* green-800: 7.1:1 on green-50 */
}

/* SMS consent */
.aup-checkbox-text {
  color: #1e293b !important;         /* slate-800 */
  font-size: 0.9375rem !important;
}
.aup-sms-terms {
  color: #64748b !important;         /* slate-500 */
  font-size: 0.875rem !important;
}
.aup-sms-terms a {
  color: #1e40af !important;
}

/* Password strength label */
.aup-strength-label {
  font-size: 0.8125rem !important;   /* 13px — small helper */
}

/* Page footer */
.aup-page-footer {
  color: #64748b !important;
  font-size: 0.9375rem !important;
}
.aup-page-footer p {
  color: #64748b !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   9. MAGIC LOGIN PAGE — already mostly good, enforce white bg
   ═══════════════════════════════════════════════════════════════════════ */
.ml-page {
  background: #ffffff !important;
}
.ml-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}
.ml-title {
  color: #0f172a !important;
  font-size: 1.5rem !important;
}
.ml-sub {
  color: #475569 !important;
  font-size: 1rem !important;
}
.ml-feature {
  color: #1e293b !important;
  font-size: 0.9375rem !important;
}
.ml-input {
  font-size: 1rem !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
}
.ml-input::placeholder {
  color: #64748b !important;
}
.ml-btn {
  background: #1e40af !important;
  color: #ffffff !important;
  font-size: 1rem !important;
}
.ml-btn:hover {
  background: #1e3a8a !important;
  color: #ffffff !important;
}
.ml-alt-link {
  color: #475569 !important;
  font-size: 0.9375rem !important;
}
.ml-alt-link a {
  color: #1e40af !important;
}
.ml-divider-text {
  color: #94a3b8 !important;
  font-size: 0.8125rem !important;
}
.ml-resend-btn {
  color: #1e293b !important;
  font-size: 0.9375rem !important;
}
.ml-sent-title {
  color: #0f172a !important;
}
.ml-sent-sub {
  color: #475569 !important;
  font-size: 1rem !important;
}
.ml-sent-email {
  color: #1e40af !important;
}
.ml-error-banner {
  font-size: 0.9375rem !important;
}
/* Social login buttons on magic page */
.ml-social-btn--google {
  color: #1e293b !important;
  font-size: 0.9375rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   10. ACCOUNT PAGE — fix dark backgrounds, font sizes, contrast
   ═══════════════════════════════════════════════════════════════════════ */
.account-page {
  background: #ffffff !important;
}

/* Account header — keep light gradient but ensure contrast */
.account-header {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  border: 1px solid #bfdbfe !important;
}
.account-info h1 {
  color: #0f172a !important;
  font-size: 1.25rem !important;
}
.account-info p {
  color: #475569 !important;         /* slate-600: 7.0:1 */
  font-size: 0.9375rem !important;   /* bump from 0.82rem */
}

/* Section headings */
.account-section h2 {
  color: #1e293b !important;         /* slate-800 */
  font-size: 0.875rem !important;    /* bump from 0.8rem */
}

/* Stat labels — were 0.67rem */
.stat-label {
  font-size: 0.8125rem !important;   /* 13px → acceptable for labels */
  color: #475569 !important;         /* slate-600 */
}

/* Sub status badge — was 0.72rem */
.sub-status-badge {
  font-size: 0.8125rem !important;
}

/* Sub detail text */
.sub-detail {
  font-size: 0.9375rem !important;
  color: #334155 !important;         /* slate-700 */
}

/* Feature items — were 0.74rem */
.feature-item p {
  font-size: 0.8125rem !important;   /* 13px — small helper */
  color: #475569 !important;
}
.feature-item h3 {
  font-size: 0.9375rem !important;   /* bump from 0.83rem */
  color: #0f172a !important;
}

/* Buttons */
.btn-cancel {
  font-size: 0.9375rem !important;
  color: #475569 !important;
}
.btn-cancel:hover {
  color: #dc2626 !important;
}
.btn-upgrade {
  font-size: 0.9375rem !important;
  color: #ffffff !important;
  background: #1e40af !important;
}
.btn-upgrade:hover {
  background: #1e3a8a !important;
  color: #ffffff !important;
}

/* Sign out */
.btn-signout {
  font-size: 0.875rem !important;    /* bump from 0.78rem */
  color: #475569 !important;
}
.btn-signout:hover {
  color: #1e293b !important;
}

/* No sub CTA */
.no-sub-cta p {
  font-size: 1rem !important;
  color: #334155 !important;
}
.no-sub-cta a {
  background: #1e40af !important;
  color: #ffffff !important;
  font-size: 1rem !important;
}
.no-sub-cta a:hover {
  background: #1e3a8a !important;
  color: #ffffff !important;
}

/* Alert banner */
.alert-banner {
  font-size: 0.9375rem !important;
}

/* Pro badge */
.pro-badge-inline {
  font-size: 0.8125rem !important;   /* bump from 0.72rem */
}

/* Account section cards — ensure white bg */
.account-section {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

/* Stat box */
.stat-box {
  background: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   11. RESPONSIVE — 375px mobile
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .aup-page {
    padding: 1rem 0.5rem !important;
    align-items: flex-start !important;
    padding-top: calc(var(--header-height, 64px) + 1rem) !important;
  }
  .sr-auth-card {
    border-radius: 14px !important;
    padding: 1.5rem 1.125rem !important;
    box-shadow: none !important;
    border: none !important;
    max-width: 100% !important;
  }
  .aup-form-col {
    align-items: flex-start !important;
    padding: 0 !important;
  }
  .sr-auth-title {
    font-size: 1.25rem !important;
  }
  .sr-auth-subtitle {
    font-size: 0.9375rem !important;
  }
  .ml-card {
    border-radius: 14px !important;
    padding: 1.5rem 1.125rem !important;
  }
}

@media (max-width: 360px) {
  .sr-auth-title {
    font-size: 1.125rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   12. RESPONSIVE — 1440px desktop
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  /* Override the sidebar display:flex from base CSS */
  .aup-sp-panel {
    display: none !important;
  }
  .aup-mkt {
    display: none !important;
  }

  .aup-page {
    justify-content: center !important;
  }

  /* Page footer — show below card on desktop */
  .aup-page-footer {
    display: block !important;
    text-align: center;
    margin-top: 1rem;
    color: #64748b !important;
    font-size: 0.9375rem !important;
  }
}