/* auth-contrast-fix-1343445.css — Task #1343445
   P0: Fix /login, /signup, /account contrast violations (18 issues).
   Loaded LAST in layout-head after desktop-lightmode-1342842.css.

   Hard constraints:
   - White (#FFFFFF) backgrounds on ALL standard pages including auth
   - Dark element → white text
   - Light element → dark text
   - Body text minimum 16px, no font below 14px
   - All CTA buttons: solid color bg + white text
*/

/* ═══════════════════════════════════════════════════════════════════════
   1. AUTH PAGE BACKGROUNDS — must be white, not gray
   ═══════════════════════════════════════════════════════════════════════ */
.aup-page {
  background: #ffffff !important;
}

/* Account page container */
.account-page {
  background: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. .aup-sp-panel — Auth sidebar: reinforce light mode
   desktop-lightmode fixed bg/title/stats but missed signal span text
   ═══════════════════════════════════════════════════════════════════════ */
.aup-sp-signal-text span {
  color: #475569 !important;
}
/* Ensure stat box text is readable on white bg */
.aup-sp-stat {
  color: #0f172a !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. .aup-mkt — Claim Tracker marketing panel: full light mode conversion
   Was: dark gradient (0f172a→1e3a5f→1a4080) with white text
   Fix: Light background with dark text
   ═══════════════════════════════════════════════════════════════════════ */
.aup-mkt {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-right: 1px solid #e2e8f0;
}
.aup-mkt::before {
  background: radial-gradient(circle, rgba(37, 99, 235, 0.06) 0%, transparent 70%) !important;
}
.aup-mkt-badge {
  color: #059669 !important;
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}
.aup-mkt-h2 {
  color: #0f172a !important;
}
.aup-mkt-sub {
  color: #475569 !important;
}

/* Dashboard preview card — light treatment */
.aup-preview {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}
.aup-preview-title {
  color: #374151 !important;
}
.aup-preview-stat {
  background: #f1f5f9 !important;
}
.aup-preview-stat-num {
  color: #0f172a !important;
}
.aup-stat-amber {
  color: #b45309 !important;
}
.aup-preview-stat-lbl {
  color: #64748b !important;
  font-size: 0.875rem !important;
}
.aup-preview-claim-name {
  color: #334155 !important;
}
.aup-preview-claim-status {
  font-size: 0.875rem !important;
}
.aup-status-paid {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #059669 !important;
}
.aup-status-approved {
  background: rgba(37, 99, 235, 0.12) !important;
  color: #1d4ed8 !important;
}
.aup-status-filed {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #b45309 !important;
}
.aup-preview-claim-amt {
  color: #0f172a !important;
}

/* Features list — dark text on light bg */
.aup-feature-text strong {
  color: #0f172a !important;
}
.aup-feature-text span {
  color: #475569 !important;
}

/* Pricing block — light treatment */
.aup-pricing {
  background: rgba(37, 99, 235, 0.06) !important;
  border: 1px solid rgba(37, 99, 235, 0.2) !important;
}
.aup-pricing-amt {
  color: #1e40af !important;
}
.aup-pricing-per {
  color: #64748b !important;
}
.aup-pricing-desc {
  color: #475569 !important;
  font-size: 0.875rem !important;
}
.aup-pricing-trust {
  color: #64748b !important;
  font-size: 0.875rem !important;
}

/* Social proof — dark text */
.aup-social-proof {
  color: #475569 !important;
}
.aup-avatar {
  border-color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   4. ACCOUNT PAGE — Fix header, sections, contrast
   ═══════════════════════════════════════════════════════════════════════ */

/* Account header — white bg instead of blue gradient */
.account-header {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}
.account-header::after {
  display: none !important;
}

/* Ensure account section text is readable */
.account-section {
  background: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   5. FONT SIZE FIXES — No font below 14px, body text min 16px
   Auth pages
   ═══════════════════════════════════════════════════════════════════════ */

/* Auth card elements */
.sr-trust-line {
  font-size: 0.875rem !important;
}
.sr-fb-privacy {
  font-size: 0.875rem !important;
}
.aup-tos {
  font-size: 0.875rem !important;
}
.sr-form-hint {
  font-size: 0.875rem !important;
}
.aup-strength-label {
  font-size: 0.875rem !important;
}
.aup-sms-terms {
  font-size: 0.875rem !important;
}
.aup-page-footer {
  font-size: 0.875rem !important;
}
.aup-checkbox-text {
  font-size: 0.875rem !important;
}
.sr-auth-divider {
  font-size: 0.875rem !important;
}
.aup-forgot {
  font-size: 0.875rem !important;
}

/* Signup pill */
.aup-pill span {
  font-size: 0.875rem !important;
}

/* Social proof panel font sizes */
.aup-sp-signal-text span {
  font-size: 0.875rem !important;
}
.aup-social-proof {
  font-size: 0.875rem !important;
}

/* Preview card text */
.aup-preview-claim {
  font-size: 0.875rem !important;
}
.aup-preview-title {
  font-size: 0.875rem !important;
}
.aup-mkt-badge {
  font-size: 0.875rem !important;
}
.aup-feature-text span {
  font-size: 0.875rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   6. ACCOUNT PAGE FONT SIZE FIXES
   ═══════════════════════════════════════════════════════════════════════ */

/* Section headings — was 0.8rem (12.8px) */
.account-section h2 {
  font-size: 0.875rem !important;
}

/* Stat label — was 0.67rem (10.7px) */
.stat-label {
  font-size: 0.875rem !important;
}

/* Status badges — was 0.72rem (11.5px) */
.sub-status-badge {
  font-size: 0.875rem !important;
}

/* Pro badge — was 0.72rem (11.5px) */
.pro-badge-inline {
  font-size: 0.875rem !important;
}
.annual-pass-badge {
  font-size: 0.875rem !important;
}

/* Account email — was 0.82rem (13.1px) */
.account-info p {
  font-size: 0.875rem !important;
}

/* Subscription detail — ensure body text min */
.sub-detail {
  font-size: 1rem !important;
}

/* Button fonts — was 0.78rem–0.82rem */
.btn-signout {
  font-size: 0.875rem !important;
}
.btn-cancel {
  font-size: 0.875rem !important;
}
.btn-upgrade {
  font-size: 0.875rem !important;
}

/* Feature items — was 0.74rem (11.8px) */
.feature-item p {
  font-size: 0.875rem !important;
}
.feature-item h3 {
  font-size: 0.875rem !important;
}

/* Alert banner — was 0.85rem, border to 14px */
.alert-banner {
  font-size: 0.875rem !important;
}

/* No sub CTA — body text */
.no-sub-cta p {
  font-size: 1rem !important;
}

/* Stat number font is fine (1.6rem) but stat box padding text */
.stat-box {
  font-size: 0.875rem !important;
}

/* Streak section small fonts */
.acct-cal-dot {
  width: 10px !important;
  height: 10px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   7. ACCOUNT PAGE — Inline style overrides for small fonts
   These target elements with inline font-size set in account.ejs
   ═══════════════════════════════════════════════════════════════════════ */

/* Generic: any span/div inside account-page with font-size under 14px */
.account-page div[style*="font-size:0.65rem"],
.account-page span[style*="font-size:0.65rem"],
.account-page div[style*="font-size: 0.65rem"],
.account-page span[style*="font-size: 0.65rem"] {
  font-size: 0.875rem !important;
}
.account-page div[style*="font-size:0.68rem"],
.account-page span[style*="font-size:0.68rem"],
.account-page div[style*="font-size: 0.68rem"],
.account-page span[style*="font-size: 0.68rem"] {
  font-size: 0.875rem !important;
}
.account-page div[style*="font-size:0.7rem"],
.account-page span[style*="font-size:0.7rem"],
.account-page div[style*="font-size: 0.7rem"],
.account-page span[style*="font-size: 0.7rem"] {
  font-size: 0.875rem !important;
}
.account-page div[style*="font-size:0.72rem"],
.account-page span[style*="font-size:0.72rem"],
.account-page div[style*="font-size: 0.72rem"],
.account-page span[style*="font-size: 0.72rem"] {
  font-size: 0.875rem !important;
}
.account-page div[style*="font-size:0.75rem"],
.account-page span[style*="font-size:0.75rem"],
.account-page a[style*="font-size:0.75rem"],
.account-page div[style*="font-size: 0.75rem"],
.account-page span[style*="font-size: 0.75rem"],
.account-page a[style*="font-size: 0.75rem"] {
  font-size: 0.875rem !important;
}
.account-page div[style*="font-size:0.77rem"],
.account-page span[style*="font-size:0.77rem"],
.account-page div[style*="font-size: 0.77rem"],
.account-page span[style*="font-size: 0.77rem"] {
  font-size: 0.875rem !important;
}
.account-page div[style*="font-size:0.78rem"],
.account-page span[style*="font-size:0.78rem"],
.account-page div[style*="font-size: 0.78rem"],
.account-page span[style*="font-size: 0.78rem"] {
  font-size: 0.875rem !important;
}
.account-page div[style*="font-size:0.8rem"],
.account-page span[style*="font-size:0.8rem"],
.account-page div[style*="font-size: 0.8rem"],
.account-page span[style*="font-size: 0.8rem"] {
  font-size: 0.875rem !important;
}
.account-page div[style*="font-size:0.82rem"],
.account-page span[style*="font-size:0.82rem"],
.account-page div[style*="font-size: 0.82rem"],
.account-page span[style*="font-size: 0.82rem"] {
  font-size: 0.875rem !important;
}
.account-page button[style*="font-size:0.75rem"],
.account-page button[style*="font-size: 0.75rem"] {
  font-size: 0.875rem !important;
}

/* Alert banner inline color fix — ensure contrast on light bg */
.account-page .alert-banner a {
  color: #ea580c !important;
  font-weight: 700 !important;
}

/* Grace period banner text contrast */
.account-page .alert-banner[style*="color:#fbbf24"] {
  color: #92400e !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   8. CTA BUTTONS — Solid color bg + white text (reinforced)
   ═══════════════════════════════════════════════════════════════════════ */
.sr-btn-primary {
  background: #2563eb !important;
  color: #ffffff !important;
}
.sr-btn-primary:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
}
.btn-upgrade {
  background: #2563eb !important;
  color: #ffffff !important;
}
.btn-upgrade:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   9. MOBILE RESPONSIVE — Ensure fixes apply at all viewports
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .aup-page {
    background: #ffffff !important;
  }
}
@media (max-width: 480px) {
  .account-page {
    background: #ffffff !important;
  }
  .account-header {
    background: #ffffff !important;
  }
}
