/* =========================================================
   contrast-fixes.css

   Fixes light/dark mode text contrast on three pages:
     1. Leaderboard (leaderboard.html)
     2. Form Coach (video-coach.html)
     3. Generate Workout modals (generate.html)

   The pages all hardcode either white text (unreadable on light
   backgrounds in light mode) or dark text (unreadable on dark
   backgrounds in dark mode). These rules scope colors to the
   active theme via the [data-theme="light"] / [data-theme="dark"]
   attribute on <html>, falling back to system preference when no
   explicit theme is set.

   Loaded LAST so it can override page-level inline styles.
   ========================================================= */


/* =========================================================
   1) LEADERBOARD — light mode rescue

   The page bakes a navy gradient + white text into inline
   <style>. In light mode that becomes invisible white-on-white,
   so re-skin the surfaces with cream backgrounds and dark text.
   Dark mode is left untouched.
   ========================================================= */
[data-theme="light"] body.leaderboard-page,
:root:not([data-theme="dark"]) body.leaderboard-page {
  background: linear-gradient(135deg, #FAF7F2 0%, #F5F2EE 50%, #ECE7DF 100%) !important;
  color: #0F1A2E !important;
}

[data-theme="light"] .leaderboard-container,
:root:not([data-theme="dark"]) .leaderboard-container {
  color: #0F1A2E;
}

[data-theme="light"] .leaderboard-header h1,
:root:not([data-theme="dark"]) .leaderboard-header h1 {
  /* Keep gradient headline (already legible on cream). */
}

[data-theme="light"] .leaderboard-header p,
:root:not([data-theme="dark"]) .leaderboard-header p {
  color: #4B5568 !important;
}

/* Glass surfaces: flip from translucent-white-on-dark to
   opaque-cream-on-light so dark text reads. */
[data-theme="light"] .stat-card,
[data-theme="light"] .top-user-card,
[data-theme="light"] .league-section,
[data-theme="light"] .search-section,
[data-theme="light"] .progress-card,
[data-theme="light"] .chart-container,
:root:not([data-theme="dark"]) .stat-card,
:root:not([data-theme="dark"]) .top-user-card,
:root:not([data-theme="dark"]) .league-section,
:root:not([data-theme="dark"]) .search-section,
:root:not([data-theme="dark"]) .progress-card,
:root:not([data-theme="dark"]) .chart-container {
  background: #FFFFFF !important;
  border: 1px solid rgba(15, 26, 46, 0.10) !important;
  color: #0F1A2E !important;
  box-shadow: 0 1px 2px rgba(15, 26, 46, 0.06);
}

[data-theme="light"] .top-user-card.rank-1,
:root:not([data-theme="dark"]) .top-user-card.rank-1 {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.18), #FFFFFF) !important;
  border-color: rgba(255, 165, 0, 0.40) !important;
}
[data-theme="light"] .top-user-card.rank-2,
:root:not([data-theme="dark"]) .top-user-card.rank-2 {
  background: linear-gradient(135deg, rgba(160, 160, 160, 0.18), #FFFFFF) !important;
  border-color: rgba(120, 120, 120, 0.35) !important;
}
[data-theme="light"] .top-user-card.rank-3,
:root:not([data-theme="dark"]) .top-user-card.rank-3 {
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.18), #FFFFFF) !important;
  border-color: rgba(205, 127, 50, 0.40) !important;
}

/* Tab buttons: dark text on a light pill in light mode. */
[data-theme="light"] .tab-btn,
:root:not([data-theme="dark"]) .tab-btn {
  background: #FFFFFF !important;
  border: 1px solid rgba(15, 26, 46, 0.12) !important;
  color: #0F1A2E !important;
}
[data-theme="light"] .tab-btn:hover,
:root:not([data-theme="dark"]) .tab-btn:hover {
  background: #F5F2EE !important;
}
[data-theme="light"] .tab-btn.active,
:root:not([data-theme="dark"]) .tab-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
}

/* User & label text */
[data-theme="light"] .user-name,
[data-theme="light"] .league-name,
[data-theme="light"] .progress-title,
:root:not([data-theme="dark"]) .user-name,
:root:not([data-theme="dark"]) .league-name,
:root:not([data-theme="dark"]) .progress-title {
  color: #0F1A2E !important;
}

[data-theme="light"] .user-stats,
[data-theme="light"] .stat-label,
[data-theme="light"] .league-range,
[data-theme="light"] .progress-period,
[data-theme="light"] .progress-label,
[data-theme="light"] .empty-state,
:root:not([data-theme="dark"]) .user-stats,
:root:not([data-theme="dark"]) .stat-label,
:root:not([data-theme="dark"]) .league-range,
:root:not([data-theme="dark"]) .progress-period,
:root:not([data-theme="dark"]) .progress-label,
:root:not([data-theme="dark"]) .empty-state {
  color: #4B5568 !important;
}

/* Table */
[data-theme="light"] .user-table th,
:root:not([data-theme="dark"]) .user-table th {
  color: #4B5568 !important;
  border-bottom-color: rgba(15, 26, 46, 0.10) !important;
}
[data-theme="light"] .user-table td,
:root:not([data-theme="dark"]) .user-table td {
  color: #0F1A2E !important;
  border-bottom-color: rgba(15, 26, 46, 0.06) !important;
}
[data-theme="light"] .user-table tr:hover,
:root:not([data-theme="dark"]) .user-table tr:hover {
  background: rgba(15, 26, 46, 0.04) !important;
}

/* Search + filter inputs */
[data-theme="light"] .search-input,
:root:not([data-theme="dark"]) .search-input {
  background: #FFFFFF !important;
  border: 1px solid rgba(15, 26, 46, 0.18) !important;
  color: #0F1A2E !important;
}
[data-theme="light"] .search-input::placeholder,
:root:not([data-theme="dark"]) .search-input::placeholder {
  color: #6B7280 !important;
}
[data-theme="light"] .search-icon,
:root:not([data-theme="dark"]) .search-icon {
  color: #6B7280 !important;
}

[data-theme="light"] .filter-select,
[data-theme="light"] select.filter-select,
:root:not([data-theme="dark"]) .filter-select,
:root:not([data-theme="dark"]) select.filter-select {
  background: #FFFFFF !important;
  border: 1px solid rgba(15, 26, 46, 0.18) !important;
  color: #0F1A2E !important;
}

[data-theme="light"] .empty-state i,
:root:not([data-theme="dark"]) .empty-state i {
  color: #8A93A6 !important;
}


/* =========================================================
   2) FORM COACH (video-coach.html) — flip white text in light

   Most of the page already uses --wg-text* tokens which adapt
   to the theme. The remaining hardcoded #fff rules cover h3s,
   button text, exercise card names, rep numbers, and the help
   panel. In light mode the surrounding glass surfaces become
   dark-tint-on-cream, so #fff disappears.
   ========================================================= */
[data-theme="light"] .pc-card h3,
[data-theme="light"] .picker .ex .name,
[data-theme="light"] .rep-row .rep-num,
[data-theme="light"] .empty-state .big,
[data-theme="light"] details.help summary,
:root:not([data-theme="dark"]) .pc-card h3,
:root:not([data-theme="dark"]) .picker .ex .name,
:root:not([data-theme="dark"]) .rep-row .rep-num,
:root:not([data-theme="dark"]) .empty-state .big,
:root:not([data-theme="dark"]) details.help summary {
  color: var(--wg-text-strong, #050B17) !important;
}

[data-theme="light"] .btn-ghost,
:root:not([data-theme="dark"]) .btn-ghost {
  color: var(--wg-text, #0F1A2E) !important;
}

/* Camera-off placeholder: the inline white text inside .stage
   .placeholder is on a black video background so it should
   stay white. Only the "Pick an exercise" hint is dim and
   already uses --wg-text-dim, so leave the placeholder alone. */

[data-theme="light"] .legend code,
:root:not([data-theme="dark"]) .legend code {
  background: rgba(15, 26, 46, 0.08) !important;
  color: var(--wg-text-strong, #050B17) !important;
}


/* =========================================================
   3) GENERATE WORKOUT MODALS — fix dark-mode dark-on-dark

   The wizard modal flips correctly via dark-mode-enhanced.css,
   but the Training Styles modal and a few inline style="color:..."
   labels were never dark-mode'd. Add the missing rules.
   ========================================================= */

/* Training Styles modal: light card on dark modal in dark mode. */
[data-theme="dark"] .training-styles-content {
  background: #1A1F2E !important;
  color: #F9FAFB !important;
}

[data-theme="dark"] .training-style-item {
  background: #252A3A !important;
  border-left-color: var(--primary-color, #FF6B00) !important;
  color: #F9FAFB !important;
}

[data-theme="dark"] .training-style-item:hover {
  background: #2D3548 !important;
}

[data-theme="dark"] .training-style-description {
  color: #D1D5DB !important;
}

[data-theme="dark"] .training-style-detail {
  color: #B5BECF !important;
}

/* "How would you like to train?" choice cards (3398-3420 in
   generate.html). The inline style on each <p> hardcodes
   #64748b which is fine on cream but dim on dark. Lift the
   contrast so it reads. */
[data-theme="dark"] .training-option-card p[style*="#64748b"],
[data-theme="dark"] .training-option-card p {
  color: #B5BECF !important;
}

/* Streak / weekly limit blocks inside the wizard sidebar
   (generate.html lines 3836-3846 use inline color: #333 / #666). */
[data-theme="dark"] [id="workoutLimitDisplay"] [style*="color: #333"],
[data-theme="dark"] [id="workoutLimitDisplay"] [style*="color: #666"],
[data-theme="dark"] [id="workoutLimitDisplay"] div {
  color: #F9FAFB !important;
}
[data-theme="dark"] [id="resetTimeDisplay"] {
  color: #B5BECF !important;
}

/* Premium blocker pill: amber on dark needs lifted contrast. */
[data-theme="dark"] #weeklyPremiumBlocker {
  background: rgba(254, 243, 199, 0.10) !important;
  border-color: rgba(254, 243, 199, 0.30) !important;
  color: #FCD34D !important;
}

/* Wizard option labels — generate.html sets color:#000 on
   .wizard-option and color:#333 on .wizard-muscle-option span.
   dark-mode-enhanced.css already handles most of these but
   the small subtitle and stale inline rules slip through. */
[data-theme="dark"] .wizard-option,
[data-theme="dark"] .wizard-option span {
  color: #F9FAFB !important;
}
[data-theme="dark"] .wizard-option small {
  color: #B5BECF !important;
}
[data-theme="dark"] .wizard-muscle-option span,
[data-theme="dark"] .wizard-equipment-option span {
  color: #F9FAFB !important;
}

/* Modern workout display modal — muscle badges keep their
   pastel light backgrounds, so their dark text is fine in
   either theme. The dashboard header subtitle however was
   forced to #ffffff !important, which fails in light mode
   (white-on-light-gray). Restore theme-aware contrast. */
[data-theme="light"] .dashboard-header p,
:root:not([data-theme="dark"]) .dashboard-header p {
  color: var(--text-secondary, #4b5563) !important;
}
