/* ==========================================================
   AG102 Dark Mode — Hardcoded Color Overrides
   Covers pages with hardcoded light colors not handled by
   CSS variable overrides or stylesheet disabling.
   Loaded dynamically by nav.js on every page.

   Color palette:
     Background (main):    #0f0f23
     Background (surface): #1a1f2e
     Background (alt):     #141829
     Heading text:         #ffffff
     Body text:            #D4C8C0
     Secondary text:       #B0A8A0
     Brand accent (gold):  #D4A84B
     Brand green:          #2D5A3D / #4A9D6B (bright)
     Border:               rgba(255,255,255,0.1)
   ========================================================== */


/* ── GLOBAL BODY (pages without styles.css) ── */

html.theme-dark body {
  background: var(--ag-bg, #0f0f23);
  color: var(--ag-text, #ffffff);
}


/* ==========================================================
   MUSCLE EXPLORER
   ========================================================== */

/* Info panel: hardcoded background: white */
html.theme-dark .info-panel {
  background: #1a1f2e;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* Body/SVG container: hardcoded background: white */
html.theme-dark .body-container {
  background: #1a1f2e;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}

/* Control buttons: hardcoded background: white */
html.theme-dark .view-btn,
html.theme-dark .layer-btn,
html.theme-dark .sex-btn {
  background: #1a1f2e;
  color: #D4C8C0;
  border-color: rgba(255,255,255,0.2);
}

html.theme-dark .view-btn:hover,
html.theme-dark .layer-btn:hover,
html.theme-dark .sex-btn:hover {
  background: rgba(255,255,255,0.08);
}

/* Active view/sex buttons */
html.theme-dark .view-btn.active,
html.theme-dark .sex-btn.active {
  background: #2D5A3D;
  color: white;
  border-color: #2D5A3D;
}

/* Dropdown selector: hardcoded background: white */
html.theme-dark .muscle-navigator select {
  background-color: #1a1f2e;
  color: #D4C8C0;
  border-color: rgba(255,255,255,0.2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23D4C8C0' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}

html.theme-dark .muscle-navigator select option {
  background: #1a1f2e;
  color: #D4C8C0;
}

/* Tooltip: --ag-dark becomes light text color, so tooltip bg breaks */
html.theme-dark .muscle-tooltip {
  background: #1a1f2e;
  color: #ffffff;
}

/* Clinical warning: hardcoded #FFF8F0 */
html.theme-dark .clinical-warning {
  background: rgba(232, 168, 56, 0.1);
  color: #D4C8C0;
}

/* Phase card headings: --ag-primary is dark green, boost brightness */
html.theme-dark .phase-card h4 {
  color: #4A9D6B;
}

/* Muscle title: --ag-primary is dark green, boost brightness */
html.theme-dark .muscle-title {
  color: #4A9D6B;
}

/* Info panel scrollbar */
html.theme-dark .info-panel::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
}


/* ==========================================================
   DONATE PAGE (all styles are in inline <style> block)
   ========================================================== */

/* Hero section */
html.theme-dark .donate-hero {
  background: #141829;
}
html.theme-dark .donate-hero h1 {
  color: #ffffff;
}
html.theme-dark .donate-hero .hero-subtitle {
  color: #D4C8C0;
}

/* Progress card */
html.theme-dark .progress-card {
  background: #1a1f2e;
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
html.theme-dark .progress-card h2 {
  color: #ffffff;
}
html.theme-dark .progress-card .progress-subtitle {
  color: #D4C8C0;
}
html.theme-dark .progress-bar-wrap {
  background: rgba(255,255,255,0.08);
}
html.theme-dark .progress-stats .raised {
  color: #D4A84B;
}
html.theme-dark .progress-stats .raised span {
  color: #D4C8C0;
}
html.theme-dark .progress-stats .donors {
  color: #B0A8A0;
}

/* Impact section */
html.theme-dark .impact-section h2 {
  color: #ffffff;
}
html.theme-dark .impact-section .impact-subtitle {
  color: #D4C8C0;
}

/* Tier cards */
html.theme-dark .tier-card {
  background: #1a1f2e;
  border-color: rgba(255,255,255,0.1);
}
html.theme-dark .tier-card:hover {
  border-color: #D4A84B;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
html.theme-dark .tier-card .tier-amount {
  color: #D4A84B;
}
html.theme-dark .tier-card .tier-desc {
  color: #D4C8C0;
}

/* Mission section */
html.theme-dark .mission-section {
  background: #141829;
}
html.theme-dark .mission-section h2 {
  color: #ffffff;
}
html.theme-dark .mission-section p {
  color: #D4C8C0;
}
html.theme-dark .mission-section .mission-highlight {
  color: #D4A84B;
}
html.theme-dark .mission-section a {
  color: #D4A84B;
}

/* Sticky banner */
html.theme-dark .sticky-banner {
  background: #1a1f2e;
  border-top-color: rgba(255,255,255,0.1);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}
html.theme-dark .sticky-banner .banner-text {
  color: #D4C8C0;
}
html.theme-dark .sticky-banner .btn-banner-close {
  color: #B0A8A0;
}
html.theme-dark .sticky-banner .btn-banner-close:hover {
  color: #ffffff;
}

/* ==========================================================
   GAMIFICATION RADAR (index "Your Progress" card) — item 7
   radar-chart.js emits an SVG with light-brown inline colors;
   these override them in dark mode via class hooks. Inline
   presentation attributes lose to any author rule, so light
   mode (no matching rule) keeps its inline defaults untouched.
   Palette per this file's documented dark tokens.
   ========================================================== */
html.theme-dark .radar-grid  { fill: rgba(255,255,255,0.04); stroke: rgba(255,255,255,0.15); }
html.theme-dark .radar-axis  { stroke: rgba(255,255,255,0.15); }
html.theme-dark .radar-data  { fill: rgba(212,168,75,0.20); stroke: #D4A84B; }
html.theme-dark .radar-dot   { fill: #D4A84B; }
html.theme-dark .radar-label { fill: #D4C8C0; }
html.theme-dark .radar-badge { fill: #D4A84B; }