/* ==========================================================
   AG102 Exercise Pages — Shared Light Theme Overrides
   Loaded LAST on all exercise pages to override dark theme
   from exercise.css + page-specific CSS files.
   DO NOT modify exercise.css or page-specific CSS.
   ========================================================== */


/* ── SECTION 1: Variable Overrides ── */
:root {
  /* Backgrounds */
  --bg-dark: #F5F0EB;
  --bg-card: #FFFFFF;
  --bg-card-hover: #FAF7F4;

  /* Extra bg vars used by resources.css */
  --bg-primary: #F5F0EB;
  --bg-secondary: #FAF7F4;
  --bg-tertiary: #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 — brown/gold palette (replaces green) */
  --accent-green: #8B4513;
  --accent-green-light: #A0522D;
  --accent-gold: #B85042;
  --accent-gold-light: #D4A574;
  --primary-green: #8B4513;

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

  /* Focus ring — warm brown */
  --focus-ring: 0 0 0 3px rgba(139, 69, 19, 0.3);
}


/* ── 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: exercise.css Hardcoded rgba Overrides ── */
.muscle-tag {
  background: rgba(45, 27, 20, 0.04) !important;
}

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

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

.feedback-btn:hover {
  background: rgba(45, 27, 20, 0.06) !important;
  border-color: var(--accent-green) !important;
}

.equipment-tag {
  background: rgba(45, 27, 20, 0.04) !important;
}

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

.importance-card {
  background: rgba(45, 27, 20, 0.02) !important;
}

.muscle-exercise-card {
  background: rgba(45, 27, 20, 0.02) !important;
}


/* ── SECTION 4: Search Suggestions Dropdown ── */
.search-suggestions {
  background: #FFFFFF !important;
  border: 1px solid var(--ag-border, #E5E0DB) !important;
  box-shadow: var(--ag-shadow-lg, 0 4px 16px rgba(45, 27, 20, 0.12)) !important;
}

.suggestion-item {
  border-bottom-color: rgba(45, 27, 20, 0.06) !important;
}

.suggestion-item:hover {
  background: rgba(45, 27, 20, 0.04) !important;
}

.suggestion-name mark {
  background: rgba(139, 69, 19, 0.15) !important;
  color: #8B4513 !important;
}

.suggestion-footer {
  background: rgba(45, 27, 20, 0.03) !important;
  border-top-color: rgba(45, 27, 20, 0.06) !important;
}


/* ── SECTION 5: routines.css Hardcoded rgba Overrides ── */
/* Filter buttons */
.filter-btn {
  border-color: var(--border-color) !important;
  background: rgba(45, 27, 20, 0.03) !important;
}

.filter-btn:hover {
  border-color: var(--accent-green) !important;
  background: rgba(45, 27, 20, 0.06) !important;
}

/* Routine cards */
.routine-card {
  border-color: var(--border-color) !important;
  background: #FFFFFF !important;
}

.routine-card:hover {
  box-shadow: 0 4px 12px rgba(45, 27, 20, 0.1) !important;
}

.routine-duration {
  background: rgba(139, 69, 19, 0.15) !important;
  color: #1A1A1A !important;
}

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

.routine-footer {
  border-top-color: var(--border-color) !important;
}

/* Start routine button gradient — brown/gold */
.btn-start-routine {
  background: linear-gradient(135deg, #8B4513, #D4A574) !important;
}

/* Routine player intro */
.intro-card {
  background: #FFFFFF !important;
  border-color: var(--border-color) !important;
}

/* Player header & progress */
.player-header {
  border-bottom-color: var(--border-color) !important;
}

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

.progress-bar {
  background: linear-gradient(90deg, #8B4513, #D4A574) !important;
}

/* Visual placeholder */
.visual-placeholder {
  background: rgba(45, 27, 20, 0.03) !important;
  border-color: rgba(45, 27, 20, 0.15) !important;
}

.visual-placeholder:hover {
  background: rgba(45, 27, 20, 0.06) !important;
  border-color: rgba(45, 27, 20, 0.25) !important;
}

/* Player controls */
.control-btn {
  border-color: var(--border-color) !important;
  background: rgba(45, 27, 20, 0.03) !important;
}

.control-btn:hover {
  border-color: var(--accent-green) !important;
  background: rgba(45, 27, 20, 0.06) !important;
}

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

/* Exercise preview list */
.exercise-preview-list li {
  border-bottom-color: rgba(45, 27, 20, 0.06) !important;
}

/* Exit button */
.btn-exit {
  border-color: var(--border-color) !important;
}

/* Completion stats */
.completion-stats {
  background: rgba(45, 27, 20, 0.03) !important;
}

/* Next up */
.next-up {
  background: rgba(45, 27, 20, 0.02) !important;
}

/* Suggested routines */
.suggested-next {
  border-top-color: var(--border-color) !important;
}

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

.suggested-routine:hover {
  background: rgba(45, 27, 20, 0.06) !important;
}


/* ── SECTION 6: workout-builder.css Hardcoded rgba Overrides ── */
.exercise-item {
  background: rgba(45, 27, 20, 0.02) !important;
}

.exercise-item:hover {
  background: rgba(45, 27, 20, 0.04) !important;
}

.coverage-region {
  border-bottom-color: rgba(45, 27, 20, 0.05) !important;
}

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

.stat-card {
  background: rgba(45, 27, 20, 0.02) !important;
}

.btn-close-modal:hover {
  background: rgba(45, 27, 20, 0.06) !important;
}

/* Modal search input */
.workout-builder-page .search-input {
  background: var(--ag-bg-alt, #FAF7F4) !important;
}

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

.exercise-picker-item:hover {
  background: rgba(45, 27, 20, 0.04) !important;
}

.muscle-hover-tooltip {
  border-color: var(--border-color) !important;
}

.next-up-preview {
  background: rgba(45, 27, 20, 0.02) !important;
}


/* ── SECTION 7: resources.css Gradient Overrides ── */
.resources-hero {
  background: linear-gradient(180deg, var(--ag-bg-alt, #FAF7F4) 0%, var(--ag-bg, #F5F0EB) 100%) !important;
  border-bottom-color: var(--border-color) !important;
}


/* ── SECTION 8: Card Hover Shadows ── */
.quick-filter-card:hover,
.exercise-card:hover,
.muscle-exercise-card:hover {
  box-shadow: 0 4px 12px rgba(45, 27, 20, 0.1) !important;
}

.exercise-card-thumbnail {
  background: #EDE7E0 !important;
}


/* ── SECTION 9: Filter Sidebar Accents ── */
.filter-option:hover {
  background: rgba(139, 69, 19, 0.06) !important;
}

.filter-tag {
  background: rgba(139, 69, 19, 0.1) !important;
  border-color: #8B4513 !important;
}

.clear-filters-btn:hover,
.show-all-quick-btn:hover {
  background: rgba(139, 69, 19, 0.06) !important;
}


/* ── SECTION 10: Loading Spinner ── */
.loading-spinner {
  border-color: rgba(45, 27, 20, 0.15) !important;
  border-top-color: var(--accent-green) !important;
}


/* ── SECTION 11: Footer ── */
.exercise-footer {
  background: var(--ag-bg-alt, #FAF7F4) !important;
}

.exercise-footer p,
.footer-brand p,
.footer-bottom p {
  color: #3D2B1F !important;
}

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

.footer-links a:hover {
  text-decoration: underline !important;
}


/* ── SECTION 12: Disclaimer Modal — Intentionally Kept Dark ── */
/* The disclaimer uses hardcoded dark colors (#1F2937, #111827, red header).
   This is intentional for a medical safety warning — do not override. */


/* ── SECTION 13: Nav Protection (keep dark) ── */
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/exercise.css target bare selectors */
nav:not(.site-nav) {
  background: transparent !important;
  border-bottom: none !important;
}


/* ── SECTION 14: Detail Page Highlight Card ── */
.muscle-detail-page .detail-card.highlight-card {
  background: linear-gradient(135deg, rgba(139, 69, 19, 0.08), rgba(212, 165, 116, 0.06)) !important;
  border-color: #8B4513 !important;
}


/* ── SECTION 15: Progress Buttons (Favorite/Complete) ── */
/* Default: white circle, subtle border, muted brown icon — always visible */
.progress-btn {
  background: #FFFFFF !important;
  border: 1px solid var(--border-color, #E5E0DB) !important;
  color: #A89B93 !important;
  backdrop-filter: none !important;
}

.progress-btn:hover {
  background: #FAF7F4 !important;
  border-color: #8B4513 !important;
}

/* Favorite: accent red on hover & active */
.favorite-btn:hover {
  color: #B85042 !important;
}

.favorite-btn.active {
  color: #B85042 !important;
  background: rgba(184, 80, 66, 0.1) !important;
  border-color: rgba(184, 80, 66, 0.3) !important;
}

.favorite-btn.active:hover {
  background: rgba(184, 80, 66, 0.15) !important;
}

/* Complete: green on hover & active */
.complete-btn:hover {
  color: #4A7C59 !important;
}

.complete-btn.active {
  color: #4A7C59 !important;
  background: rgba(74, 124, 89, 0.1) !important;
  border-color: rgba(74, 124, 89, 0.3) !important;
}

.complete-btn.active:hover {
  background: rgba(74, 124, 89, 0.15) !important;
}

/* Toast notifications */
.toast {
  background: #FFFFFF !important;
  color: #1A1A1A !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 4px 16px rgba(45, 27, 20, 0.12) !important;
}

.toast-success {
  border-color: #4A7C59 !important;
  background: linear-gradient(135deg, rgba(74, 124, 89, 0.08), #FFFFFF) !important;
}

.toast-error {
  border-color: #ef4444 !important;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), #FFFFFF) !important;
}

.toast-info {
  border-color: #8B4513 !important;
  background: linear-gradient(135deg, rgba(139, 69, 19, 0.08), #FFFFFF) !important;
}


/* ── SECTION 16: Routine Player Text & Separation ── */
/* Timer — near black for maximum readability */
.timer-display {
  color: #1A1A1A !important;
}

/* Exercise name — heading weight */
.current-exercise .exercise-name {
  color: #1A1A1A !important;
}

/* Instruction/cue text — body text, NOT muted */
.exercise-instruction {
  color: #3D2B1F !important;
}

/* Exercise counter */
.exercise-counter {
  color: #3D2B1F !important;
}

/* Rep display — brand accent */
.rep-display {
  color: #8B4513 !important;
}

/* Progress bar — stronger background for visible track */
.progress-bar-container {
  background: rgba(45, 27, 20, 0.15) !important;
}

/* Control buttons — white with visible borders */
.control-btn {
  background: #FFFFFF !important;
  border: 2px solid var(--border-color, #E5E0DB) !important;
  color: #3D2B1F !important;
}

.control-btn:hover {
  background: #FAF7F4 !important;
  border-color: #8B4513 !important;
}

/* Control labels readable */
.control-label {
  color: #3D2B1F !important;
}

/* Visual placeholder — cream bg with clear border */
.visual-placeholder {
  background: #FAF7F4 !important;
  border: 1px dashed rgba(45, 27, 20, 0.2) !important;
  color: #3D2B1F !important;
}

.visual-placeholder:hover {
  background: #F5F0EB !important;
  border-color: #8B4513 !important;
}

/* Next up — distinct card */
.next-up {
  background: #FAF7F4 !important;
  border: 1px solid var(--border-color, #E5E0DB) !important;
  color: #3D2B1F !important;
}

.next-up span {
  color: #1A1A1A !important;
}

/* Exit button */
.btn-exit {
  color: #3D2B1F !important;
  border-color: var(--border-color, #E5E0DB) !important;
}


/* ── SECTION 17: Routine Card Text Hierarchy ── */
/* Filter active state — brown accent */
.filter-btn.active {
  border-color: #8B4513 !important;
  background: rgba(139, 69, 19, 0.1) !important;
  color: #8B4513 !important;
}

/* Card title — near black */
.routine-name {
  color: #1A1A1A !important;
}

/* Description — body text, not muted */
.routine-description {
  color: #3D2B1F !important;
}

/* Meta items (exercise count, difficulty) */
.meta-item {
  color: #3D2B1F !important;
}

/* Equipment text */
.routine-equipment {
  color: #3D2B1F !important;
}

/* Pillar tag text — keep pillar colors but darken for contrast */
.pillar-tag {
  border-width: 1px !important;
}

/* Routine card hover — stronger shadow */
.routine-card:hover {
  box-shadow: 0 8px 24px rgba(45, 27, 20, 0.12) !important;
}

/* Hero subtitle */
.hero-subtitle {
  color: #3D2B1F !important;
}

/* Filter button inactive text */
.filter-btn {
  color: #3D2B1F !important;
}

/* Pillar tag — dark text, keep colored border */
.pillar-tag {
  color: #3D2B1F !important;
}


/* ── SECTION 18: Routine Intro Card Text ── */
.intro-description {
  color: #3D2B1F !important;
}

.intro-meta {
  color: #3D2B1F !important;
}

.intro-best-for {
  color: #3D2B1F !important;
}

.intro-best-for strong {
  color: #1A1A1A !important;
}

.exercise-preview-list li {
  color: #1A1A1A !important;
}

.preview-time {
  color: #3D2B1F !important;
}

.benefits-list li {
  color: #3D2B1F !important;
}


/* ── SECTION 19: Tracker Legend Contrast ── */
.legend-item {
  color: #3D2B1F !important;
}

.legend-icon {
  opacity: 1 !important;
}


/* ── SECTION 20: Anatomy Page Contrast ── */
.region-desc { color: #3D2B1F !important; }
.muscle-card .common-name { color: #3D2B1F !important; }
.panel-subtitle { color: #3D2B1F !important; }
.region-header-count { color: #3D2B1F !important; }
.diagram-tooltip .tooltip-common { color: #3D2B1F !important; }
.diagram-hint { color: #3D2B1F !important; }
.region-count { color: #8B4513 !important; }
.education-card h4 { color: #8B4513 !important; }


/* ── SECTION 21: Exercise & Muscle Detail Contrast ── */
.alternate-names { color: #3D2B1F !important; }
.common-name { color: #3D2B1F !important; }
.exercise-card-mini .card-muscles { color: #3D2B1F !important; }
.dysfunction-item h4 { color: #3D2B1F !important; }
.exercises-to-help { color: #3D2B1F !important; }
.exercises-to-help strong { color: #1A1A1A !important; }


/* ── SECTION 22: Resources Page Contrast ── */
/* Hero text */
.resources-hero .subtitle { color: #3D2B1F !important; }
.resources-hero .description { color: #3D2B1F !important; }

/* Type badges — dark text, keep tinted backgrounds for identity */
.resource-type-badge { color: #3D2B1F !important; }

/* Access badges — same approach */
.access-badge { color: #3D2B1F !important; }

/* Section descriptions */
.resources-page .section-header p { color: #3D2B1F !important; }

/* Jump nav */
.jump-nav-label { color: #3D2B1F !important; }
.jump-nav a { color: #8B4513 !important; }

/* Card metadata */
.resource-publication { color: #3D2B1F !important; }
.resource-year { color: #3D2B1F !important; }
.tag { color: #3D2B1F !important; }

/* Used-in section */
.resource-used-in { color: #3D2B1F !important; }
.resource-used-in a { color: #8B4513 !important; }

/* Action buttons */
.action-btn.secondary { color: #3D2B1F !important; }

/* Footer */
.resources-footer p { color: #3D2B1F !important; }
.resources-footer a { color: #8B4513 !important; }

/* Empty state */
.no-results { color: #3D2B1F !important; }


/* ── SECTION 23: Workout Builder Contrast ── */
/* Hero — override gradient text fill to solid */
.builder-hero h1 {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #1A1A1A !important;
  color: #1A1A1A !important;
}

/* Completion modal — same gradient override */
.completion-modal h2 {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #1A1A1A !important;
  color: #1A1A1A !important;
}

/* Body maps hint & region hint */
.body-maps-hint { color: #3D2B1F !important; }
.region-hint { color: #3D2B1F !important; }
.coverage-region.covered .region-hint { color: #4A7C59 !important; }

/* Stats */
.stat-value { color: #1A1A1A !important; }
.stat-label { color: #3D2B1F !important; }
.coverage-percent { color: #8B4513 !important; }

/* Template meta, difficulty labels */
.template-meta { color: #3D2B1F !important; }
.exercise-difficulty { color: #3D2B1F !important; }
.rec-reason { color: #3D2B1F !important; }
.body-map-label { color: #3D2B1F !important; }

/* Execution mode timer/reps */
.execution-active .timer-display { color: #1A1A1A !important; }
.execution-active .rep-display { color: #8B4513 !important; }

/* Motivational quote */
.motivational-quote { color: #3D2B1F !important; background: rgba(139, 69, 19, 0.06) !important; }

/* Next up label */
.next-up-label { color: #3D2B1F !important; }


/* ── SECTION 24: For-You & Baseline Page Contrast ── */
/* Hero headings — override gradient text fill */
.for-you-hero h1,
.baseline-hero h1 {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #1A1A1A !important;
  color: #1A1A1A !important;
}

/* Recommendation card metadata */
.recommendation-card .duration { color: #3D2B1F !important; }
.reason-text { color: #3D2B1F !important; }

/* Baseline form hints */
.form-hint { color: #3D2B1F !important; }


/* ── SECTION 25: Auth Modal Light Theme ── */
/* Modal overlay and container — matches index.css Section 5 */
.modal-overlay {
  background: rgba(45, 27, 20, 0.5) !important;
}

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

.modal h2 { color: #1A1A1A !important; }
.modal .subtitle { color: #3D2B1F !important; }
.modal-close { color: #3D2B1F !important; }

/* Form controls */
.form-group label { color: #3D2B1F !important; }
.form-group input,
.form-group select {
  background: #FAF7F4 !important;
  border-color: #E5E0DB !important;
  color: #1A1A1A !important;
}
.form-group input::placeholder { color: #8B7355 !important; }
.form-group input:focus,
.form-group select:focus { border-color: #8B4513 !important; }
.form-group select option {
  background: #FFFFFF !important;
  color: #1A1A1A !important;
}

/* Submit button */
.btn-submit {
  background: linear-gradient(135deg, #8B4513, #D4A574) !important;
  color: #FFFFFF !important;
}
.btn-submit:hover {
  box-shadow: 0 10px 30px rgba(139, 69, 19, 0.25) !important;
}

/* Auth switch & forgot links */
.auth-switch { color: #3D2B1F !important; }
.auth-switch button { color: #8B4513 !important; }
.forgot-password button { color: #8B7355 !important; }
.forgot-password button:hover { color: #8B4513 !important; }
.back-btn { color: #8B7355 !important; }
.back-btn:hover { color: #8B4513 !important; }

/* Message styles */
.message.error { color: #DC2626 !important; }
.message.success { color: #16A34A !important; }


/* ── SECTION 26: Access Gate & Gate Modal ── */

.access-gate .gate-benefits {
  background: rgba(45, 27, 20, 0.03) !important;
}

.access-gate .gate-benefits h4 {
  color: #1A1A1A !important;
}

.access-gate .gate-benefits li {
  color: #3D2B1F !important;
}

.access-gate .price-card {
  background: #FFFFFF !important;
  border-color: rgba(45, 27, 20, 0.12) !important;
  cursor: pointer !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.access-gate .price-card:hover {
  border-color: rgba(139, 69, 19, 0.4) !important;
}

.access-gate .price-card.popular {
  background: rgba(212, 165, 116, 0.06) !important;
  border-color: #D4A574 !important;
}

.access-gate .price-label {
  color: #1A1A1A !important;
  font-weight: 600 !important;
}

.access-gate .gate-icon {
  background: rgba(139, 69, 19, 0.1) !important;
}

.access-gate .gate-icon.premium {
  background: rgba(212, 165, 116, 0.15) !important;
  color: #8B4513 !important;
}

.access-gate .trial-notice {
  background: rgba(212, 165, 116, 0.12) !important;
  color: #8B4513 !important;
}

.access-gate .price-card.selected {
  border-color: #8B4513 !important;
  box-shadow: 0 0 0 2px #8B4513 !important;
}

.access-gate .price-amount {
  color: #1A1A1A !important;
}

.access-gate .price-period {
  color: #1A1A1A !important;
}

.access-gate .price-savings {
  color: #4A7C59 !important;
}

.access-gate .popular-badge {
  background: linear-gradient(135deg, #D4A574, #B85042) !important;
  color: #FFFFFF !important;
}

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

.gate-modal .gate-icon {
  background: rgba(139, 69, 19, 0.1) !important;
}

.gate-modal-benefits {
  background: rgba(45, 27, 20, 0.03) !important;
}

.gate-modal-benefits p {
  color: #1A1A1A !important;
}

.gate-modal-benefits li {
  color: #3D2B1F !important;
}

/* ─── Pillar Badge Light Theme ───────────────────────────────────────────── */

.pillar-pill {
  background: color-mix(in srgb, var(--pill-color) 10%, white) !important;
  border-color: color-mix(in srgb, var(--pill-color) 30%, transparent) !important;
}

.pillar-badge-detail {
  background: color-mix(in srgb, var(--pill-color) 10%, white) !important;
  border-color: color-mix(in srgb, var(--pill-color) 30%, transparent) !important;
}

/* ─── Phase 5: For You Light Theme ───────────────────────────────────────── */

.pillar-bar-track {
  background: rgba(0, 0, 0, 0.06) !important;
}

.self-rating-slider {
  background: rgba(0, 0, 0, 0.08) !important;
}

.pillar-priority-card {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.pillar-exercise-link:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

.pillar-insight-weak {
  background: rgba(231, 76, 60, 0.06) !important;
}

.pillar-insight-strong {
  background: rgba(46, 204, 113, 0.06) !important;
}

.pillar-insight-balanced {
  background: rgba(52, 152, 219, 0.06) !important;
}