/* ==========================================================
   AG102 Index Page — Light Theme Overrides
   Loaded AFTER styles.css to override dark theme variables.
   DO NOT modify styles.css — other pages depend on it.
   ========================================================== */

/* ── SECTION 1: Variable Overrides (~70% coverage) ── */
:root {
  /* Backgrounds */
  --bg-dark: #F5F0EB;
  --bg-card: #FFFFFF;

  /* Text — WCAG AAA on #F5F0EB */
  --text-primary: #1A1A1A;     /* 15.9:1 — headings, titles */
  --text-secondary: #3D2B1F;   /* 12.4:1 — body text, subtitles */
  --text-muted: #A89B93;       /* small captions/labels only */

  /* Brand */
  --primary-green: #8B4513;
  --accent-gold: #B85042;
  --accent-green: #4A7C59;

  /* Borders */
  --border-color: #E5E0DB;

  /* Pillar colors — deepened one shade for light-bg contrast */
  --stability: #2563EB;
  --mobility: #059669;
  --strength: #DC2626;
  --power: #D97706;
  --cardio: #7C3AED;
  --cognition: #DB2777;
  --bodycomp: #0891B2;
  --surveys: #65A30D;
}


/* ── SECTION 2: Body & Background Grid ── */
body {
  background: var(--ag-bg, #F5F0EB) !important;
  color: #3D2B1F !important;
}

.bg-grid {
  background-image:
    linear-gradient(rgba(45, 27, 20, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 27, 20, 0.03) 1px, transparent 1px) !important;
}


/* ── SECTION 3: Hardcoded Border Overrides ── */
/* rgba(255,255,255,0.1) borders → light theme border */
.pillar-badge,
.feature-card,
.main-score,
.pillar-card,
.tracking-card,
.activity-card,
.modal,
.subscription-info,
.test-item,
.walkthrough-section,
.assessment-selector,
#btn-manage-subscription,
.form-group input,
.form-group select,
.user-menu-btn {
  border-color: var(--ag-border, #E5E0DB) !important;
}

/* Hover border states */
.activity-card:hover {
  border-color: var(--ag-primary, #8B4513) !important;
}

/* Subtle separator borders */
.tracking-item,
.subscription-row:not(:last-child) {
  border-bottom-color: rgba(45, 27, 20, 0.08) !important;
}

.activity-actions {
  border-top-color: rgba(45, 27, 20, 0.08) !important;
}


/* ── SECTION 4: Hardcoded Background Overrides ── */
/* Very subtle tints: rgba(255,255,255,0.03) → warm tint on light */
.walkthrough-section,
.subscription-details,
.activity-status {
  background: rgba(45, 27, 20, 0.02) !important;
}

/* Form inputs: rgba(255,255,255,0.05) → light input bg */
.form-group input,
.form-group select {
  background: var(--ag-bg-alt, #FAF7F4) !important;
  color: var(--text-primary) !important;
}

.form-group select option {
  background: #FFFFFF !important;
  color: var(--text-primary) !important;
}

.assessment-selector {
  background: var(--ag-bg-alt, #FAF7F4) !important;
  color: var(--text-primary) !important;
}

.assessment-selector option {
  background: #FFFFFF !important;
  color: var(--text-primary) !important;
}

/* Misc subtle backgrounds */
#btn-manage-subscription {
  background: rgba(45, 27, 20, 0.03) !important;
}

#btn-manage-subscription:hover {
  background: rgba(45, 27, 20, 0.06) !important;
}

.section-title .badge {
  background: var(--ag-bg-alt, #FAF7F4) !important;
}

.hide-walkthrough-btn:hover {
  background: rgba(45, 27, 20, 0.04) !important;
}


/* ── SECTION 5: Modal Backgrounds ── */
.modal-overlay {
  background: rgba(45, 27, 20, 0.5) !important;
}

.modal {
  background: #FFFFFF !important;
  box-shadow: var(--ag-shadow-lg, 0 4px 16px rgba(45, 27, 20, 0.12));
}


/* ── SECTION 6: Hero Section ── */
.hero h1 {
  background: linear-gradient(135deg, #1A1A1A 0%, #4A3728 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.hero-logo {
  box-shadow: 0 20px 60px rgba(139, 69, 19, 0.15) !important;
}


/* ── SECTION 7: Button Overrides ── */
.btn-large,
.btn-submit {
  background: linear-gradient(135deg, #8B4513, #D4A574) !important;
  color: #FFFFFF !important;
}

.btn-large:hover,
.btn-submit:hover {
  box-shadow: 0 10px 30px rgba(139, 69, 19, 0.25) !important;
}

.btn-primary {
  background: linear-gradient(135deg, #8B4513, #D4A574) !important;
  color: #FFFFFF !important;
}

.btn-outline {
  border: 2px solid var(--ag-border, #E5E0DB) !important;
  color: var(--text-primary) !important;
  background: transparent !important;
}

.btn-outline:hover {
  border-color: var(--ag-primary, #8B4513) !important;
  color: var(--ag-primary, #8B4513) !important;
  background: rgba(139, 69, 19, 0.05) !important;
}

/* Auth switch & forgot password links */
.auth-switch button {
  color: var(--ag-primary, #8B4513) !important;
}

.forgot-password button:hover {
  color: var(--ag-primary, #8B4513) !important;
}


/* ── SECTION 8: Score Ring & Pillar Details ── */
.ring-bg {
  stroke: var(--ag-border, #E5E0DB) !important;
}

.level-badge {
  background: rgba(184, 80, 66, 0.1) !important;
  border-color: rgba(184, 80, 66, 0.25) !important;
}

.level-badge .text {
  color: var(--ag-accent, #B85042) !important;
}

.pillar-bar {
  background: rgba(45, 27, 20, 0.08) !important;
}

/* Focus alert — darken text for light bg */
.focus-alert {
  color: #92400e !important;
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}


/* ── SECTION 9: Activity Links ── */
.activity-link {
  color: var(--ag-primary, #8B4513) !important;
}

.activity-link:hover {
  color: var(--ag-accent, #B85042) !important;
}


/* ── SECTION 10: Coming Soon & Assessment Actions ── */
.coming-soon,
.assessment-actions {
  background: linear-gradient(135deg, rgba(139, 69, 19, 0.06), rgba(212, 165, 116, 0.08)) !important;
  border-color: rgba(139, 69, 19, 0.2) !important;
}

.coming-soon h3,
.assessment-actions h3 {
  color: var(--ag-primary, #8B4513) !important;
}


/* ── SECTION 11: Messages — darken text for light bg ── */
.message.error {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #b91c1c !important;
}

.message.success {
  background: rgba(16, 185, 129, 0.08) !important;
  color: #15803d !important;
}

.message.info {
  background: rgba(59, 130, 246, 0.08) !important;
  color: #1d4ed8 !important;
}


/* ── SECTION 12: Spinner ── */
.spinner {
  border-color: rgba(45, 27, 20, 0.2) !important;
  border-top-color: var(--ag-primary, #8B4513) !important;
}


/* ── SECTION 13: Nav Protection (keep dark) ── */
/* The old `nav` styles in styles.css are overridden by .site-nav from global.css.
   But styles.css `nav` selector still applies — ensure it doesn't go light. */
nav.site-nav {
  background: var(--ag-nav-bg, #0B1120) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* Old nav styles from styles.css target bare `nav` — override to not conflict */
nav:not(.site-nav) {
  background: transparent !important;
  border-bottom: none !important;
}


/* ── SECTION 14: Pillar Modal & Test Detail ── */
.pillar-modal-header {
  border-bottom-color: var(--ag-border, #E5E0DB) !important;
}

.test-item {
  background: var(--ag-bg-alt, #FAF7F4) !important;
}

.test-item:nth-child(even) {
  background: #FFFFFF !important;
}

.test-item-clickable:hover {
  background: rgba(45, 27, 20, 0.04) !important;
  border-color: var(--ag-primary, #8B4513) !important;
}


/* ── SECTION 15: Your Score / Value Cards ── */
.your-score-card,
.your-value-card {
  background: linear-gradient(135deg, rgba(139, 69, 19, 0.08), rgba(74, 124, 89, 0.08)) !important;
  border-color: rgba(139, 69, 19, 0.2) !important;
  box-shadow: var(--ag-shadow, 0 2px 8px rgba(45, 27, 20, 0.08)) !important;
}

.norms-table {
  background: var(--ag-bg-alt, #FAF7F4) !important;
}

.norms-table thead {
  background: rgba(139, 69, 19, 0.08) !important;
}

.norms-table th {
  color: var(--ag-primary, #8B4513) !important;
}

.norms-table td {
  border-bottom-color: var(--ag-border, #E5E0DB) !important;
}

.norms-table tr.user-row {
  background: rgba(139, 69, 19, 0.06) !important;
}

.norms-table-wrapper::after {
  background: linear-gradient(90deg, transparent, rgba(245, 240, 235, 0.9)) !important;
}


/* ── SECTION 16: Tracking Modal ── */
.tracking-modal-header p {
  color: var(--text-muted) !important;
}

.range-item,
.cutoff-item {
  background: rgba(45, 27, 20, 0.02) !important;
}

#trend-chart-container {
  background: rgba(45, 27, 20, 0.02) !important;
}


/* ── SECTION 17: Upgrade Modal & Premium ── */
.btn-upgrade,
.btn-upgrade-inline {
  background: linear-gradient(135deg, #D4A574, #E5C068) !important;
  color: #2D1B14 !important;
}

.promo-card {
  border-color: var(--ag-border, #E5E0DB) !important;
}

.upgrade-features {
  background: rgba(45, 27, 20, 0.03) !important;
}

.upgrade-modal-content h2 {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #1A1A1A !important;
}

.upgrade-reason {
  color: #3D2B1F !important;
}

.upgrade-features h4 {
  color: #3D2B1F !important;
}

.pricing-option {
  background: #FFFFFF !important;
  border-color: rgba(45, 27, 20, 0.12) !important;
}

.pricing-option:hover {
  border-color: rgba(45, 27, 20, 0.25) !important;
}

.pricing-option.selected,
.pricing-option.recommended {
  border-color: var(--accent-gold, #D4A574) !important;
  background: rgba(212, 165, 116, 0.06) !important;
}

.pricing-option .plan-name {
  color: #3D2B1F !important;
}

.pricing-option .price {
  color: #1A1A1A !important;
}

.pricing-option .price span {
  color: #3D2B1F !important;
}

.btn-upgrade-later {
  border-color: rgba(45, 27, 20, 0.15) !important;
  color: #3D2B1F !important;
}

.btn-upgrade-later:hover {
  border-color: rgba(45, 27, 20, 0.3) !important;
  color: #1A1A1A !important;
}


/* ── SECTION 18: Course & Backcasting Modals ── */
.course-week-badge {
  background: var(--ag-primary, #8B4513) !important;
  color: #FFFFFF !important;
}

.backcasting-grid .age-label,
.backcasting-grid .grid-input {
  background: rgba(45, 27, 20, 0.03) !important;
  color: var(--text-primary) !important;
}

.backcasting-grid .grid-input:focus {
  border-color: var(--ag-primary, #8B4513) !important;
}


/* ── SECTION 19: Footer ── */
footer {
  border-top: 1px solid var(--ag-border, #E5E0DB);
}

footer a {
  color: var(--ag-primary, #8B4513) !important;
}

footer a:hover {
  color: var(--ag-accent, #B85042) !important;
  text-decoration: underline !important;
}

footer p,
footer .footer-text {
  color: #3D2B1F !important;
}


/* ── SECTION 20: Misc Text & Link Overrides ── */
/* Confidence sources, instructions, video sections */
.confidence-sources,
.test-modal-clinical,
.test-modal-trend,
.instructions-section,
.instructions-placeholder,
.video-placeholder {
  background: rgba(45, 27, 20, 0.02) !important;
  border-color: var(--ag-border, #E5E0DB) !important;
}

/* Disclaimer overlay needs to stay readable */
.disclaimer-overlay .disclaimer-popup {
  background: #FFFFFF !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--ag-border, #E5E0DB);
  box-shadow: var(--ag-shadow-lg, 0 4px 16px rgba(45, 27, 20, 0.12));
}