/* Dark Theme - Enhanced with Navbar & Progress Bar Styling */

/* ═══════════════════════════════════════════════════════════════════════════
   CSS VARIABLES - DARK THEME PALETTE
   ═══════════════════════════════════════════════════════════════════════════ */

:root.theme-dark {
  --dark-bg-primary: #1a1a1a;        /* Very dark navbar */
  --dark-bg-secondary: #2d2d2d;      /* Dark progress bar */
  --dark-bg-surface: #2a2a2a;        /* Background surfaces */
  --dark-text-light: #f8f9fa;        /* Light text on dark */
  --dark-text-muted: #adb5bd;        /* Muted text */
  --dark-accent-primary: #2ecc71;    /* Green accent */
  --dark-accent-secondary: #3498db;  /* Blue accent */
  --dark-accent-warning: #f39c12;    /* Orange warning */
  --dark-accent-danger: #e74c3c;     /* Red danger */
  
  /* Food Finder Widget Variables */
  --card-bg: #2c3139;
  --surface-bg: #3a404a;
  --surface-hover: #454c57;
  --border-color: #495057;
  --text-primary: #e9ecef;
  --text-muted: #adb5bd;
  --primary-color: #4dabf7;
  --category-header-bg: #343a40;
  --item-bg: transparent;
  --item-hover-bg: rgba(77, 171, 247, 0.1);
  --scrollbar-track: #404854;
  --scrollbar-thumb: #6c757d;
  --scrollbar-thumb-hover: #868e96;
  
  /* CTA Button Colors */
  --cta-finance: #F3B340;      /* light amber */
  --cta-lifestyle: #35B7FF;    /* light cyan */
}

/* IMPORTANT: Apply dark background to entire body */
body.theme-dark,
.theme-dark {
  background: linear-gradient(135deg, #2a2a2a 0%, #232323 100%) !important;
  color: #e9ecef !important;
}

/* Fix stats-wrapper transparency - remove any transparency effects */
.theme-dark .stats-wrapper,
body.theme-dark .stats-wrapper {
  background: none !important;
  backdrop-filter: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVBAR STYLING - DARK THEME (Enhanced)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- Top-bar Dark Variant: Advanced Gradient ---------- */
.theme-dark {
  --canopy-start: #1a1a1a;       /* very dark top */
  --canopy-end:   #2d2d2d;       /* slightly lighter bottom */
  --canopy-text:  #f8f9fa;       /* light text */
}

/* ---------- bar container with subtle texture overlay ---------- */
html body.theme-dark .navbar,
html body.theme-dark .health-nav-main,
html body.theme-dark .tm-topbar,
body.theme-dark .navbar,
body.theme-dark .health-nav-main,
body.theme-dark .tm-topbar,
.theme-dark .navbar,
.theme-dark .health-nav-main,
.theme-dark .tm-topbar {
  background: linear-gradient(to bottom, var(--canopy-start) 0%, var(--canopy-end) 100%) !important;
  background-image: url('/img/texture-noise-light.png');         /* subtle texture overlay */
  background-blend-mode: overlay;                                /* keeps texture faint */
  border-bottom: 2px solid var(--dark-bg-secondary) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  color: var(--canopy-text) !important;
}

/* ---------- brand & basic links ---------- */
.theme-dark .navbar-brand,
.theme-dark .navbar a,
.theme-dark .navbar .nav-link,
.theme-dark .navbar .btn,
.theme-dark .tm-topbar a,
.theme-dark .tm-topbar .nav-link,
.theme-dark .tm-topbar .btn {
  color: var(--dark-text-light) !important;
  text-shadow: none !important;
}

/* Clean, flat TrueMetrics brand styling for dark theme */
.theme-dark .navbar-brand,
body.theme-dark .navbar-brand {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  background: none !important;
  text-decoration: none !important;
}

/* ---------- bootstrap-icon + <i> reset (kills white squares) ---------- */
.theme-dark .navbar i,
.theme-dark .navbar .bi,
.theme-dark .tm-topbar i,
.theme-dark .tm-topbar .bi {
  color: var(--dark-text-light) !important;
  background: none !important;
  fill: currentColor !important;
}

/* ---------- nav-pills ---------- */
.theme-dark .nav-pills .nav-link {
  position: relative;
  border-radius: 8px !important;
  transition: color 0.2s ease, background-color 0.2s ease !important;
  color: var(--dark-text-light) !important;
}

/* underline (appears on hover & active) */
.theme-dark .nav-pills .nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--dark-accent-primary);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.theme-dark .nav-pills .nav-link:hover,
.theme-dark .nav-pills .nav-link.active {
  background-color: rgba(46, 204, 113, 0.1) !important;
}

.theme-dark .nav-pills .nav-link:hover::after,
.theme-dark .nav-pills .nav-link.active::after {
  transform: scaleX(1);
}

/* ---------- navbar buttons ---------- */
.theme-dark .navbar .btn-outline-secondary,
.theme-dark .tm-topbar .btn-outline-secondary {
  border-color: var(--dark-accent-primary) !important;
  color: var(--dark-accent-primary) !important;
  background-color: transparent !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.theme-dark .navbar .btn-outline-secondary:hover,
.theme-dark .tm-topbar .btn-outline-secondary:hover {
  background-color: var(--dark-accent-primary) !important;
  border-color: var(--dark-accent-primary) !important;
  color: white !important;
}

/* Special override for navbar/topbar btn-outline-primary */
.theme-dark .navbar .btn-outline-primary,
.theme-dark .tm-topbar .btn-outline-primary {
  background-color: transparent !important;
  border-color: var(--dark-accent-secondary) !important;
  color: var(--dark-text-light) !important;
  padding: 0.25rem 0.45rem;
  box-shadow: none !important;
}

.theme-dark .navbar .btn-outline-primary:hover,
.theme-dark .tm-topbar .btn-outline-primary:hover {
  background-color: var(--dark-accent-secondary) !important;
  border-color: var(--dark-accent-secondary) !important;
  color: var(--dark-text-light) !important;
}

/* Points display button in navbar */
.theme-dark .navbar .points-display .btn-outline-success,
.theme-dark .tm-topbar .points-display .btn-outline-success {
  background-color: transparent !important;
  border-color: var(--dark-accent-primary) !important;
  color: var(--dark-text-light) !important;
  box-shadow: none !important;
  padding: 0.25rem 0.55rem;
}

.theme-dark .navbar .points-display .btn-outline-success:hover,
.theme-dark .tm-topbar .points-display .btn-outline-success:hover {
  background-color: var(--dark-accent-primary) !important;
  color: var(--dark-text-light) !important;
}

/* Keep the tiny badge readable */
.theme-dark .points-display .badge {
  background-color: var(--dark-accent-warning) !important;
  color: black !important;
}

/* Kill default white fill on light buttons in navbar */
.theme-dark .navbar .btn-light,
.theme-dark .navbar .btn-white,
.theme-dark .tm-topbar .btn-light,
.theme-dark .tm-topbar .btn-white {
  background-color: transparent !important;
  border-color: var(--dark-accent-primary) !important;
  color: var(--dark-text-light) !important;
}

/* Nav links hover/focus brightness */
.theme-dark .navbar .nav-link:hover,
.theme-dark .navbar .nav-link:focus,
.theme-dark .navbar .nav-pills .nav-link:hover,
.theme-dark .tm-topbar .nav-link:hover,
.theme-dark .tm-topbar .nav-link:focus {
  color: var(--dark-accent-primary) !important;
  text-decoration: none;
}

/* Enhanced hover effects */
.theme-dark .btn:hover {
  transition: all 0.2s ease-in-out !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRESS STATS BAR - DARK THEME
   ═══════════════════════════════════════════════════════════════════════════ */

.theme-dark .progress-stats-bar,
body.theme-dark .progress-stats-bar {
  background: var(--dark-bg-secondary) !important;
  border-bottom: 1px solid var(--dark-bg-primary) !important;
  color: var(--dark-text-light) !important;
}

.theme-dark .stat-label,
body.theme-dark .stat-label {
  color: var(--dark-text-muted) !important;
  font-weight: 600 !important;
}

.theme-dark .stat-item,
body.theme-dark .stat-item {
  color: var(--dark-text-light) !important;
}

.theme-dark .stat-item i,
body.theme-dark .stat-item i {
  color: var(--dark-accent-primary) !important;
}

.theme-dark .stat-item span,
body.theme-dark .stat-item span {
  color: var(--dark-accent-primary) !important;
}

.theme-dark .stat-item strong,
body.theme-dark .stat-item strong {
  color: var(--dark-text-light) !important;
  font-weight: 700 !important;
}

.theme-dark .stat-divider,
body.theme-dark .stat-divider {
  background-color: var(--dark-bg-primary) !important;
}

.theme-dark .clickable-stat:hover,
body.theme-dark .clickable-stat:hover {
  background-color: rgba(46, 204, 113, 0.1) !important;
  border-radius: 6px !important;
  transform: translateY(-1px) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS & BADGES - DARK THEME
   ═══════════════════════════════════════════════════════════════════════════ */

.theme-dark .btn-outline-success,
body.theme-dark .btn-outline-success {
  border-color: var(--dark-accent-primary) !important;
  color: var(--dark-accent-primary) !important;
  background-color: rgba(45, 45, 45, 0.9) !important;
}

.theme-dark .btn-outline-success:hover,
body.theme-dark .btn-outline-success:hover {
  background-color: var(--dark-accent-primary) !important;
  color: white !important;
}

.theme-dark .btn-outline-info,
body.theme-dark .btn-outline-info {
  border-color: var(--dark-accent-secondary) !important;
  color: var(--dark-accent-secondary) !important;
  background-color: rgba(45, 45, 45, 0.9) !important;
}

.theme-dark .btn-outline-info:hover,
body.theme-dark .btn-outline-info:hover {
  background-color: var(--dark-accent-secondary) !important;
  color: white !important;
}

.theme-dark .badge.bg-success,
.theme-dark .badge-new,
body.theme-dark .badge.bg-success,
body.theme-dark .badge-new {
  background-color: var(--dark-accent-primary) !important;
}

.theme-dark .badge.bg-warning,
body.theme-dark .badge.bg-warning {
  background-color: var(--dark-accent-warning) !important;
}

.theme-dark .badge.bg-danger,
body.theme-dark .badge.bg-danger {
  background-color: var(--dark-accent-danger) !important;
}

.theme-dark .bi-star-fill,
.theme-dark .bi-fire,
.theme-dark .bi-award-fill,
body.theme-dark .bi-star-fill,
body.theme-dark .bi-fire,
body.theme-dark .bi-award-fill {
  color: var(--dark-accent-warning) !important;
}

/* Getting Started Dismiss Button */
.theme-dark .getting-started-card #dismissGettingStarted,
body.theme-dark .getting-started-card #dismissGettingStarted {
  border-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-muted) !important;
  background-color: rgba(45, 45, 45, 0.8) !important;
}

.theme-dark .getting-started-card #dismissGettingStarted:hover,
body.theme-dark .getting-started-card #dismissGettingStarted:hover {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-light) !important;
}

/* Process Cards for Health Page */
.theme-dark .process-card,
body.theme-dark .process-card {
  background: rgba(45, 45, 45, 0.95) !important;
  border-color: rgba(46, 204, 113, 0.3) !important;
  color: #e9ecef !important;
}

.theme-dark .process-card:hover,
body.theme-dark .process-card:hover {
  background: rgba(50, 50, 50, 0.98) !important;
  border-color: rgba(46, 204, 113, 0.6) !important;
  box-shadow: 0 8px 25px rgba(46, 204, 113, 0.2) !important;
}

.theme-dark .process-number,
body.theme-dark .process-number {
  background: linear-gradient(135deg, #2ecc71, #27ae60) !important;
  color: white !important;
}

.theme-dark .process-icon,
body.theme-dark .process-icon {
  background: rgba(46, 204, 113, 0.2) !important;
  color: #2ecc71 !important;
}

.theme-dark .feature-item,
body.theme-dark .feature-item {
  background: rgba(46, 204, 113, 0.1) !important;
  border-color: rgba(46, 204, 113, 0.2) !important;
}

.theme-dark .process-cta,
body.theme-dark .process-cta {
  background: linear-gradient(135deg, #2ecc71, #27ae60) !important;
  color: white !important;
}

.theme-dark .process-cta:hover,
body.theme-dark .process-cta:hover {
  background: linear-gradient(135deg, #27ae60, #229954) !important;
  transform: translateY(-2px) !important;
}

/* Add vibrant card colors for dark theme - BRIGHTENED */
.theme-dark .health-card, 
body.theme-dark .health-card {
  background: rgba(46, 204, 113, 0.25) !important; /* Slightly more vibrant */
  border-color: rgba(46, 204, 113, 0.35) !important;
  transition: all 0.3s ease-out !important;
}

.theme-dark .finance-card,
body.theme-dark .finance-card {
  background: rgba(241, 196, 15, 0.25) !important; /* Slightly more vibrant */
  border-color: rgba(241, 196, 15, 0.35) !important;
  transition: all 0.3s ease-out !important;
}

.theme-dark .lifestyle-card,
body.theme-dark .lifestyle-card {
  background: rgba(52, 152, 219, 0.25) !important; /* Slightly more vibrant */
  border-color: rgba(52, 152, 219, 0.35) !important;
  transition: all 0.3s ease-out !important;
}

.theme-dark .health-icon,
body.theme-dark .health-icon {
  color: #2ecc71 !important;
  transition: all 0.3s ease-out !important;
}

.theme-dark .finance-icon,
body.theme-dark .finance-icon {
  color: #f1c40f !important;
  transition: all 0.3s ease-out !important;
}

.theme-dark .lifestyle-icon,
body.theme-dark .lifestyle-icon {
  color: #3498db !important;
  transition: all 0.3s ease-out !important;
}

/* Brightened hover states with subtle movement */
.theme-dark .health-card-link:hover .health-card,
body.theme-dark .health-card-link:hover .health-card {
  background: rgba(46, 204, 113, 0.35) !important;
  border-color: rgba(46, 204, 113, 0.5) !important;
  transform: scale(1.03) !important;
  box-shadow: 0 6px 15px rgba(46, 204, 113, 0.2) !important;
}

.theme-dark .finance-card-link:hover .finance-card,
body.theme-dark .finance-card-link:hover .finance-card {
  background: rgba(241, 196, 15, 0.35) !important;
  border-color: rgba(241, 196, 15, 0.5) !important;
  transform: scale(1.03) !important;
  box-shadow: 0 6px 15px rgba(241, 196, 15, 0.2) !important;
}

.theme-dark .lifestyle-card-link:hover .lifestyle-card,
body.theme-dark .lifestyle-card-link:hover .lifestyle-card {
  background: rgba(52, 152, 219, 0.35) !important;
  border-color: rgba(52, 152, 219, 0.5) !important;
  transform: scale(1.03) !important;
  box-shadow: 0 6px 15px rgba(52, 152, 219, 0.2) !important;
}

/* Icon hover effects */
.theme-dark .health-card-link:hover .health-icon,
body.theme-dark .health-card-link:hover .health-icon {
  color: #42d885 !important; /* Brighter green */
  transform: rotate(5deg) scale(1.1) !important;
}

.theme-dark .finance-card-link:hover .finance-icon,
body.theme-dark .finance-card-link:hover .finance-icon {
  color: #f9d44c !important; /* Brighter yellow */
  transform: rotate(-5deg) scale(1.1) !important;
}

.theme-dark .lifestyle-card-link:hover .lifestyle-icon,
body.theme-dark .lifestyle-card-link:hover .lifestyle-icon {
  color: #4dabec !important; /* Brighter blue */
  transform: rotate(5deg) scale(1.1) !important;
}

/* Text styling */
.theme-dark .card-title,
body.theme-dark .card-title {
  color: #ffffff !important;
  transition: color 0.3s ease-out !important;
}

.theme-dark .card-text,
body.theme-dark .card-text {
  color: #f0f0f0 !important; /* Even brighter text */
  transition: color 0.3s ease-out !important;
}

/* Health, Finance, Lifestyle card text styles */
.theme-dark .health h2,
body.theme-dark .health h2 {
  color: #2ecc71 !important; /* Match icon color */
  transition: color 0.3s ease-out !important;
}

.theme-dark .finance h2,
body.theme-dark .finance h2 {
  color: #f1c40f !important; /* Match icon color */
  transition: color 0.3s ease-out !important;
}

.theme-dark .lifestyle h2,
body.theme-dark .lifestyle h2 {
  color: #3498db !important; /* Match icon color */
  transition: color 0.3s ease-out !important;
}

/* Text hover effects */
.theme-dark .health-card-link:hover .card-title,
body.theme-dark .health-card-link:hover .card-title,
.theme-dark .health-card-link:hover h2,
body.theme-dark .health-card-link:hover h2 {
  color: #42d885 !important; /* Brighter green */
  text-shadow: 0 0 10px rgba(46, 204, 113, 0.3) !important;
}

.theme-dark .finance-card-link:hover .card-title,
body.theme-dark .finance-card-link:hover .card-title,
.theme-dark .finance-card-link:hover h2,
body.theme-dark .finance-card-link:hover h2 {
  color: #f9d44c !important; /* Brighter yellow */
  text-shadow: 0 0 10px rgba(241, 196, 15, 0.3) !important;
}

.theme-dark .lifestyle-card-link:hover .card-title,
body.theme-dark .lifestyle-card-link:hover .card-title,
.theme-dark .lifestyle-card-link:hover h2,
body.theme-dark .lifestyle-card-link:hover h2 {
  color: #4dabec !important; /* Brighter blue */
  text-shadow: 0 0 10px rgba(52, 152, 219, 0.3) !important;
}

/* Paragraph text hover effects */
.theme-dark .health-card-link:hover .card-text,
body.theme-dark .health-card-link:hover .card-text,
.theme-dark .health-card-link:hover p,
body.theme-dark .health-card-link:hover p {
  color: #ffffff !important; /* Brighter text */
}

.theme-dark .finance-card-link:hover .card-text,
body.theme-dark .finance-card-link:hover .card-text,
.theme-dark .finance-card-link:hover p,
body.theme-dark .finance-card-link:hover p {
  color: #ffffff !important; /* Brighter text */
}

.theme-dark .lifestyle-card-link:hover .card-text,
body.theme-dark .lifestyle-card-link:hover .card-text,
.theme-dark .lifestyle-card-link:hover p,
body.theme-dark .lifestyle-card-link:hover p {
  color: #ffffff !important; /* Brighter text */
}

/* Button styling with semi-transparent backgrounds */
.theme-dark .health-card .cta-button,
body.theme-dark .health-card .cta-button {
  background-color: rgba(39, 174, 96, 0.7) !important; /* Semi-transparent green */
  color: white !important;
  border: 1px solid rgba(46, 204, 113, 0.2) !important;
  transition: all 0.3s ease-out !important;
}

.theme-dark .finance-card .cta-button,
body.theme-dark .finance-card .cta-button {
  background-color: rgba(243, 156, 18, 0.7) !important; /* Semi-transparent orange */
  color: white !important;
  border: 1px solid rgba(241, 196, 15, 0.2) !important;
  transition: all 0.3s ease-out !important;
}

.theme-dark .lifestyle-card .cta-button,
body.theme-dark .lifestyle-card .cta-button {
  background-color: rgba(41, 128, 185, 0.7) !important; /* Semi-transparent blue */
  color: white !important;
  border: 1px solid rgba(52, 152, 219, 0.2) !important;
  transition: all 0.3s ease-out !important;
}

/* Improved button hover states */
.theme-dark .health-card-link:hover .cta-button,
body.theme-dark .health-card-link:hover .cta-button {
  background-color: #27ae60 !important; /* Solid color on hover */
  border-color: #2ecc71 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3) !important;
}

.theme-dark .finance-card-link:hover .cta-button,
body.theme-dark .finance-card-link:hover .cta-button {
  background-color: #f39c12 !important; /* Solid color on hover */
  border-color: #f1c40f !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(241, 196, 15, 0.3) !important;
}

.theme-dark .lifestyle-card-link:hover .cta-button,
body.theme-dark .lifestyle-card-link:hover .cta-button {
  background-color: #2980b9 !important; /* Solid color on hover */
  border-color: #3498db !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3) !important;
}

/* Hero section styling for dark theme - LIGHTENED banner */
.theme-dark .theme-hero,
body.theme-dark .hero {
  background: linear-gradient(135deg, #38506e 0%, #1e2b3a 100%) !important;
  color: #eef3fb !important;
}


/* Ensure navbar gets the dark styling */
.theme-dark .navbar,
body.theme-dark .navbar {
  background-color: #2d2d2d !important;
  border-bottom: 1px solid #3a3a3a !important;
}

/* Ensure navbar-light doesn't override our clean brand styling */
.theme-dark .navbar-light .navbar-brand,
body.theme-dark .navbar-light .navbar-brand {
  color: #ffffff !important;
  text-shadow: none !important;
}


/* Brighter navigation links for dark theme */
.theme-dark .navbar-light .navbar-nav .nav-link,
body.theme-dark .navbar-light .navbar-nav .nav-link {
  color: #e0ecff !important;  /* slightly brighter */
}

.theme-dark .navbar-light .navbar-nav .nav-link:hover,
body.theme-dark .navbar-light .navbar-nav .nav-link:hover {
  color: #ffffff !important;
}

/* Enhanced link colors for health, finance, and lifestyle elements */
.theme-dark .health-link,
body.theme-dark .health-link {
  color: #2ecc71 !important;
}

.theme-dark .finance-link,
body.theme-dark .finance-link {
  color: #f1c40f !important;
}

.theme-dark .lifestyle-link,
body.theme-dark .lifestyle-link {
  color: #3498db !important;
}
.theme-dark footer,
body.theme-dark footer {
  background: linear-gradient(to top, #11181f 0%, #2f3645 70%, #394151 100%) !important;
  border-top: 1px solid #35495a !important;
  color: #c5d2dc !important;
}

.theme-dark footer a,
body.theme-dark footer a {
  color: var(--dark-accent-secondary) !important;
  transition: color 0.3s ease !important;
}

.theme-dark footer a:hover,
body.theme-dark footer a:hover {
  color: var(--dark-accent-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MISSING HEALTH.HTML COMPONENTS - DARK THEME
   ═══════════════════════════════════════════════════════════════════════════ */

/* Journey Overview Section */
.theme-dark .journey-overview-section,
body.theme-dark .journey-overview-section {
  background: rgba(45, 45, 45, 0.95) !important;
  border-color: rgba(46, 204, 113, 0.2) !important;
  color: var(--dark-text-light) !important;
}

.theme-dark .journey-overview-section h2,
body.theme-dark .journey-overview-section h2 {
  color: var(--dark-accent-primary) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Score Showcase Section */
.theme-dark .score-showcase,
body.theme-dark .score-showcase {
  background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%) !important;
  border: 1px solid rgba(46, 204, 113, 0.3) !important;
}

.theme-dark .score-showcase .metric-card,
body.theme-dark .score-showcase .metric-card {
  background: rgba(50, 50, 50, 0.8) !important;
  border-color: rgba(46, 204, 113, 0.4) !important;
  color: var(--dark-text-light) !important;
}

.theme-dark .score-showcase .metric-card:hover,
body.theme-dark .score-showcase .metric-card:hover {
  background: rgba(55, 55, 55, 0.9) !important;
  border-color: rgba(46, 204, 113, 0.6) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(46, 204, 113, 0.2) !important;
}

/* Quick Actions Section */
.theme-dark .quick-actions,
body.theme-dark .quick-actions {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
  border-top: 2px solid var(--dark-accent-primary) !important;
}

.theme-dark .quick-actions h2,
body.theme-dark .quick-actions h2 {
  color: var(--dark-text-light) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.theme-dark .quick-action-card,
body.theme-dark .quick-action-card {
  background: rgba(50, 50, 50, 0.9) !important;
  border: 1px solid rgba(46, 204, 113, 0.3) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.3s ease !important;
}

.theme-dark .quick-action-card h5,
body.theme-dark .quick-action-card h5 {
  color: var(--dark-accent-primary) !important;
  font-weight: 700 !important;
}

.theme-dark .quick-action-card p,
body.theme-dark .quick-action-card p {
  color: var(--dark-text-muted) !important;
}

.theme-dark .quick-action-card:hover,
body.theme-dark .quick-action-card:hover {
  background: rgba(55, 55, 55, 0.95) !important;
  border-color: rgba(46, 204, 113, 0.5) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 25px rgba(46, 204, 113, 0.2) !important;
}

/* Form Controls Enhancement */
.theme-dark .form-control,
body.theme-dark .form-control {
  background-color: rgba(60, 60, 60, 0.9) !important;
  border-color: rgba(46, 204, 113, 0.3) !important;
  color: var(--dark-text-light) !important;
}

.theme-dark .form-control:focus,
body.theme-dark .form-control:focus {
  background-color: rgba(65, 65, 65, 0.95) !important;
  border-color: var(--dark-accent-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(46, 204, 113, 0.25) !important;
}

/* Enhanced Button Styles */
.theme-dark .btn-primary,
body.theme-dark .btn-primary {
  background-color: var(--dark-accent-primary) !important;
  border-color: var(--dark-accent-primary) !important;
  color: white !important;
  font-weight: 600 !important;
}

.theme-dark .btn-primary:hover,
body.theme-dark .btn-primary:hover {
  background-color: #27ae60 !important;
  border-color: #27ae60 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3) !important;
}

.theme-dark .btn-secondary,
body.theme-dark .btn-secondary {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-light) !important;
}

.theme-dark .btn-secondary:hover,
body.theme-dark .btn-secondary:hover {
  background-color: #3a3a3a !important;
  border-color: #3a3a3a !important;
  transform: translateY(-1px) !important;
}

/* Alert Components */
.theme-dark .alert-success,
body.theme-dark .alert-success {
  background-color: rgba(46, 204, 113, 0.15) !important;
  border-color: rgba(46, 204, 113, 0.3) !important;
  color: #42d885 !important;
}

.theme-dark .alert-warning,
body.theme-dark .alert-warning {
  background-color: rgba(243, 156, 18, 0.15) !important;
  border-color: rgba(243, 156, 18, 0.3) !important;
  color: #f9d44c !important;
}

.theme-dark .alert-info,
body.theme-dark .alert-info {
  background-color: rgba(52, 152, 219, 0.15) !important;
  border-color: rgba(52, 152, 219, 0.3) !important;
  color: #4dabec !important;
}

/* Table Styling */
.theme-dark .table,
body.theme-dark .table {
  color: var(--dark-text-light) !important;
  background-color: transparent !important;
}

.theme-dark .table th,
body.theme-dark .table th {
  background-color: var(--dark-bg-secondary) !important;
  border-color: rgba(46, 204, 113, 0.3) !important;
  color: var(--dark-accent-primary) !important;
}

.theme-dark .table td,
body.theme-dark .table td {
  border-color: rgba(60, 60, 60, 0.5) !important;
}

.theme-dark .table-hover tbody tr:hover,
body.theme-dark .table-hover tbody tr:hover {
  background-color: rgba(46, 204, 113, 0.1) !important;
}

/* Modal Enhancements */
.theme-dark .modal-content,
body.theme-dark .modal-content {
  background-color: var(--dark-bg-surface) !important;
  border: 1px solid rgba(46, 204, 113, 0.3) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.theme-dark .modal-header,
body.theme-dark .modal-header {
  background-color: var(--dark-bg-secondary) !important;
  border-bottom: 1px solid rgba(46, 204, 113, 0.3) !important;
  color: var(--dark-text-light) !important;
}

.theme-dark .modal-title,
body.theme-dark .modal-title {
  color: var(--dark-accent-primary) !important;
}

.theme-dark .btn-close,
body.theme-dark .btn-close {
  filter: invert(1) !important;
}

/* Dark Theme - Use !important to override base styles */
:root .theme-dark,
:root body.theme-dark {
  --primary: #375a7f !important;
  --secondary: #444444 !important;
  --success: #00bc8c !important;
  --info: #3498db !important;
  --warning: #f39c12 !important;
  --danger: #e74c3c !important;
  --light: #303030 !important;
  --dark: #222222 !important;
  
  --body-bg: linear-gradient(135deg, #2a2a2a 0%, #232323 100%) !important;
  --text-color: #e9ecef !important;
  --link-color: #3498db !important;
  --link-hover-color: #1d6fa5 !important;
  
  --navbar-bg: #2d2d2d !important; /* Slightly lightened */
  --navbar-color: #e9ecef !important;
  --navbar-active: #3498db !important;
  --navbar-hover-bg: #343434 !important;
  
  --dropdown-bg: #323232 !important; /* Slightly lightened */
  --dropdown-color: #e9ecef !important;
  --dropdown-hover-bg: #375a7f !important;
  --dropdown-border-color: rgba(255,255,255,.05) !important;
  
  --card-bg: #323232 !important; /* Slightly lightened */
  --card-border: rgba(255,255,255,.05) !important;
  --card-shadow: 0 .125rem .25rem rgba(0,0,0,.3) !important;
  
  --input-bg: #383838 !important; /* Slightly lightened */
  --input-border: #444444 !important;
  --input-color: #e9ecef !important;
  --input-focus-border: #375a7f !important;
  
  --btn-default-bg: #444444 !important;
  --btn-default-color: #e9ecef !important;
  --btn-default-border: #444444 !important;
  
  --footer-bg: #2d2d2d !important; /* Slightly lightened */
  --footer-color: #999999 !important;
  
  /* Health page specific variables */
  --health-card-bg: rgba(50, 50, 50, 0.9) !important;
  --health-card-border: rgba(46, 204, 113, 0.3) !important;
  --health-hover-bg: rgba(55, 55, 55, 0.95) !important;
  --health-text-primary: #2ecc71 !important;
  --health-text-secondary: #f8f9fa !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK THEME BUTTON AND UI FIXES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Button text fixes - ensure light text on dark buttons */
.theme-dark .btn-primary,
.theme-dark .btn-enhanced,
.theme-dark .next-step-btn,
body.theme-dark .btn-primary,
body.theme-dark .btn-enhanced,
body.theme-dark .next-step-btn {
  color: #f8f9fa !important; /* Light text for better visibility */
}

.theme-dark .btn-primary:hover,
.theme-dark .btn-enhanced:hover,
.theme-dark .next-step-btn:hover,
body.theme-dark .btn-primary:hover,
body.theme-dark .btn-enhanced:hover,
body.theme-dark .next-step-btn:hover {
  color: #ffffff !important;
}

/* Dropdown items - brightened text */
.theme-dark .dropdown-item,
.theme-dark .height-unit,
body.theme-dark .dropdown-item,
body.theme-dark .height-unit {
  color: #e9ecef !important; /* Brightened for better visibility */
}

.theme-dark .dropdown-item:hover,
.theme-dark .height-unit:hover,
body.theme-dark .dropdown-item:hover,
body.theme-dark .height-unit:hover {
  background-color: rgba(55, 90, 127, 0.15) !important;
  color: #ffffff !important;
}

/* Theme dropdown button visibility */
.theme-dark .btn-outline-secondary,
body.theme-dark .btn-outline-secondary {
  border-color: #4dabec !important;
  color: #4dabec !important;
  background-color: rgba(20, 20, 20, 0.9) !important;
}

.theme-dark .btn-outline-secondary:hover,
body.theme-dark .btn-outline-secondary:hover {
  background-color: #4dabec !important;
  border-color: #4dabec !important;
  color: #ffffff !important;
}

/* Bell icon and other icons */
.theme-dark .bi-bell,
body.theme-dark .bi-bell {
  color: #adb5bd !important;
}

.theme-dark .bi-bell:hover,
body.theme-dark .bi-bell:hover {
  color: #4dabec !important;
}

/* Fire icons and stats */
.theme-dark .bi-fire,
body.theme-dark .bi-fire {
  color: #ff6b35 !important; /* Bright orange fire */
}

.theme-dark .stat-item strong,
body.theme-dark .stat-item strong {
  color: #ffffff !important; /* Bright white numbers */
}

/* Text improvements */
.theme-dark .text-muted,
body.theme-dark .text-muted {
  color: #e9ecef !important; /* Much brighter than default */
}

.theme-dark span,
body.theme-dark span {
  color: #f8f9fa !important;
}

.theme-dark small,
body.theme-dark small {
  color: #e9ecef !important;
}

/* Points details section */
.theme-dark .points-details-expanded.bg-light,
body.theme-dark .points-details-expanded.bg-light {
  background-color: #2c3139 !important;
  color: #f8f9fa !important;
}

.theme-dark .points-details-expanded h6,
body.theme-dark .points-details-expanded h6 {
  color: #ffffff !important;
}

.theme-dark .points-details-expanded .small.text-muted,
body.theme-dark .points-details-expanded .small.text-muted {
  color: #e9ecef !important;
}

/* Premium and Beta badges */
.theme-dark .premium-badge,
body.theme-dark .premium-badge {
  background-color: #ffd700 !important;
  color: #000000 !important;
  position: relative;
  top: -3px !important;
  z-index: 15 !important;
}

.theme-dark .beta-badge,
body.theme-dark .beta-badge {
  background-color: #20c997 !important;
  color: #000000 !important;
  position: relative;
  top: -3px !important;
  z-index: 15 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MISSING COMPONENTS FROM NATURE.CSS - DARK THEME ADAPTATION
   ═══════════════════════════════════════════════════════════════════════════ */

/* Meal Planning Components */
.theme-dark .meal-selector,
body.theme-dark .meal-selector {
  background-color: var(--dark-bg-surface) !important;
  color: var(--dark-text-light) !important;
  border: 1px solid rgba(46, 204, 113, 0.3) !important;
  border-radius: 0.5rem !important;
}

.theme-dark .meal-selector label,
body.theme-dark .meal-selector label {
  color: var(--dark-text-light) !important;
  font-weight: 600 !important;
}

/* Override Bootstrap's bg-light class for dark theme */
.theme-dark .card-header.bg-light,
body.theme-dark .card-header.bg-light {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-light) !important;
  border-color: rgba(46, 204, 113, 0.3) !important;
}

/* Empty meal styling */
.theme-dark .empty-meal,
.theme-dark .empty-meal .card-body,
body.theme-dark .empty-meal,
body.theme-dark .empty-meal .card-body {
  background-color: rgba(50, 50, 50, 0.8) !important;
  color: var(--dark-text-light) !important;
  border: 1px solid rgba(46, 204, 113, 0.2) !important;
}

.theme-dark .empty-meal .text-muted,
.theme-dark .empty-meal-content p,
body.theme-dark .empty-meal .text-muted,
body.theme-dark .empty-meal-content p {
  color: var(--dark-text-muted) !important;
}

/* Theme Chooser Dropdown Styling */
.theme-dark .dropdown-item.theme-option,
body.theme-dark .dropdown-item.theme-option {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  padding: 0.35rem 0.75rem !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--dark-text-light) !important;
}

.theme-dark .theme-color-preview,
body.theme-dark .theme-color-preview {
  width: 1rem !important;
  height: 1rem !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.theme-dark .dropdown-item.theme-option:hover,
body.theme-dark .dropdown-item.theme-option:hover {
  background: rgba(52, 152, 219, 0.1) !important;
  color: #3498db !important;
}

/* Enhanced Dropdown Styling */
.theme-dark .dropdown-menu,
body.theme-dark .dropdown-menu {
  background-color: var(--dark-bg-surface) !important;
  border: 2px solid rgba(46, 204, 113, 0.3) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
  border-radius: 0.5rem !important;
}

.theme-dark .dropdown-item,
body.theme-dark .dropdown-item {
  color: var(--dark-text-light) !important;
  transition: all 0.2s ease !important;
}

.theme-dark .dropdown-item:hover,
body.theme-dark .dropdown-item:hover {
  background-color: rgba(46, 204, 113, 0.1) !important;
  color: var(--dark-accent-primary) !important;
}

.theme-dark .dropdown-item.active,
body.theme-dark .dropdown-item.active {
  background-color: #3498db !important;
  color: white !important;
}

/* Progress Bar Enhancements */
.theme-dark .progress,
body.theme-dark .progress {
  background-color: rgba(60, 60, 60, 0.6) !important;
  border-radius: 0.5rem !important;
}

.theme-dark .progress-bar,
body.theme-dark .progress-bar {
  background-color: var(--dark-accent-primary) !important;
  border-radius: 0.5rem !important;
}

.theme-dark .progress-bar.bg-success,
body.theme-dark .progress-bar.bg-success {
  background-color: var(--dark-accent-primary) !important;
}

.theme-dark .progress-bar.bg-danger,
body.theme-dark .progress-bar.bg-danger {
  background-color: var(--dark-accent-danger) !important;
}

.theme-dark .progress-bar.bg-warning,
body.theme-dark .progress-bar.bg-warning {
  background-color: var(--dark-accent-warning) !important;
}

/* Breadcrumb Styling */
.theme-dark .breadcrumb,
body.theme-dark .breadcrumb {
  background-color: rgba(50, 50, 50, 0.8) !important;
  border: 1px solid rgba(46, 204, 113, 0.3) !important;
  border-radius: 0.5rem !important;
}

.theme-dark .breadcrumb-item a,
body.theme-dark .breadcrumb-item a {
  color: var(--dark-accent-secondary) !important;
  transition: color 0.2s ease !important;
}

.theme-dark .breadcrumb-item a:hover,
body.theme-dark .breadcrumb-item a:hover {
  color: var(--dark-accent-primary) !important;
}

.theme-dark .breadcrumb-item.active,
body.theme-dark .breadcrumb-item.active {
  color: var(--dark-text-light) !important;
}

/* Pagination Styling */
.theme-dark .page-link,
body.theme-dark .page-link {
  color: var(--dark-accent-primary) !important;
  background-color: rgba(50, 50, 50, 0.8) !important;
  border-color: rgba(46, 204, 113, 0.3) !important;
  transition: all 0.2s ease !important;
}

.theme-dark .page-link:hover,
body.theme-dark .page-link:hover {
  color: white !important;
  background-color: var(--dark-accent-primary) !important;
  border-color: var(--dark-accent-primary) !important;
}

.theme-dark .page-item.active .page-link,
body.theme-dark .page-item.active .page-link {
  background-color: var(--dark-accent-primary) !important;
  border-color: var(--dark-accent-primary) !important;
  color: white !important;
}

.theme-dark .page-item.disabled .page-link,
body.theme-dark .page-item.disabled .page-link {
  color: var(--dark-text-muted) !important;
  background-color: rgba(30, 30, 30, 0.8) !important;
  border-color: rgba(60, 60, 60, 0.3) !important;
}

/* Tooltip Styling */
.theme-dark .tooltip .tooltip-inner,
body.theme-dark .tooltip .tooltip-inner {
  background-color: var(--dark-bg-primary) !important;
  color: var(--dark-text-light) !important;
  border: 1px solid rgba(46, 204, 113, 0.3) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.theme-dark .tooltip.bs-tooltip-top .tooltip-arrow::before,
body.theme-dark .tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--dark-bg-primary) !important;
}

.theme-dark .tooltip.bs-tooltip-bottom .tooltip-arrow::before,
body.theme-dark .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--dark-bg-primary) !important;
}

.theme-dark .tooltip.bs-tooltip-left .tooltip-arrow::before,
body.theme-dark .tooltip.bs-tooltip-left .tooltip-arrow::before {
  border-left-color: var(--dark-bg-primary) !important;
}

.theme-dark .tooltip.bs-tooltip-right .tooltip-arrow::before,
body.theme-dark .tooltip.bs-tooltip-right .tooltip-arrow::before {
  border-right-color: var(--dark-bg-primary) !important;
}

/* Getting Started Section Enhancements */
.theme-dark .getting-started-section,
body.theme-dark .getting-started-section {
  background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%) !important;
  border: 2px solid rgba(46, 204, 113, 0.3) !important;
  border-radius: 1rem !important;
}

.theme-dark .getting-started-card,
body.theme-dark .getting-started-card {
  background: rgba(50, 50, 50, 0.9) !important;
  border: 1px solid rgba(46, 204, 113, 0.4) !important;
  color: var(--dark-text-light) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.theme-dark .getting-started-card h3,
body.theme-dark .getting-started-card h3 {
  color: var(--dark-accent-primary) !important;
  font-weight: 700 !important;
}

.theme-dark .getting-started-card p,
body.theme-dark .getting-started-card p {
  color: var(--dark-text-muted) !important;
}

/* Enhanced Nav Tab and Active State Styling */
.theme-dark .nav-tabs .nav-link.active,
.theme-dark .day-tab.active,
body.theme-dark .nav-tabs .nav-link.active,
body.theme-dark .day-tab.active {
  background-color: var(--dark-accent-primary) !important;
  color: white !important;
  border-color: var(--dark-accent-primary) !important;
}

.theme-dark .nav-tabs .nav-link,
body.theme-dark .nav-tabs .nav-link {
  color: var(--dark-text-light) !important;
  border-color: rgba(60, 60, 60, 0.5) !important;
}

.theme-dark .nav-tabs .nav-link:hover,
body.theme-dark .nav-tabs .nav-link:hover {
  border-color: rgba(46, 204, 113, 0.5) !important;
  color: var(--dark-accent-primary) !important;
}

/* Enhanced Feature Items */
.theme-dark .feature-item,
body.theme-dark .feature-item {
  background: rgba(46, 204, 113, 0.15) !important;
  border: 1px solid rgba(46, 204, 113, 0.3) !important;
  border-radius: 0.5rem !important;
  padding: 1rem !important;
  transition: all 0.3s ease !important;
}

.theme-dark .feature-item:hover,
body.theme-dark .feature-item:hover {
  background: rgba(46, 204, 113, 0.2) !important;
  border-color: rgba(46, 204, 113, 0.5) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 15px rgba(46, 204, 113, 0.2) !important;
}

.theme-dark .feature-item h5,
body.theme-dark .feature-item h5 {
  color: var(--dark-accent-primary) !important;
  font-weight: 700 !important;
}

.theme-dark .feature-item p,
body.theme-dark .feature-item p {
  color: var(--dark-text-light) !important;
}

/* Enhanced Background Override Utilities */
.theme-dark .bg-light,
body.theme-dark .bg-light {
  background-color: var(--dark-bg-surface) !important;
  color: var(--dark-text-light) !important;
}

.theme-dark .bg-white,
body.theme-dark .bg-white {
  background-color: rgba(60, 60, 60, 0.9) !important;
  color: var(--dark-text-light) !important;
}

.theme-dark .bg-dark,
body.theme-dark .bg-dark {
  background-color: var(--dark-bg-primary) !important;
  color: var(--dark-text-light) !important;
}

/* Enhanced Text Color Utilities */
.theme-dark .text-primary,
body.theme-dark .text-primary {
  color: var(--dark-accent-primary) !important;
}

.theme-dark .text-secondary,
body.theme-dark .text-secondary {
  color: var(--dark-text-muted) !important;
}

.theme-dark .text-success,
body.theme-dark .text-success {
  color: var(--dark-accent-primary) !important;
}

.theme-dark .text-warning,
body.theme-dark .text-warning {
  color: var(--dark-accent-warning) !important;
}

.theme-dark .text-danger,
body.theme-dark .text-danger {
  color: var(--dark-accent-danger) !important;
}

.theme-dark .text-info,
body.theme-dark .text-info {
  color: var(--dark-accent-secondary) !important;
}
/* ──────────────────────────────────────────────
   GOAL-ADVISOR CARDS – DARK THEME
   ────────────────────────────────────────────── */

/* Outer card shell */
.theme-dark .result-card,
body.theme-dark .result-card {
  background: var(--dark-bg-surface);                  /* charcoal surface */
  border: 1px solid rgba(46, 204, 113, 0.25);          /* subtle green edge */
  border-radius: 0.75rem;
  padding: 1.5rem 1.75rem;
  text-align: center;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.theme-dark .result-card:hover,
body.theme-dark .result-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(46, 204, 113, 0.22);
}

/* Default pill-style value (visible only when *not* inside .result-card) */
.theme-dark .result-value,
body.theme-dark .result-value {
  display: inline-block;
  padding: 1.25rem 2rem;
  border-radius: 0.75rem;

  background: rgba(42, 42, 42, 0.95);                  /* deep grey overlay */
  border: 1px solid rgba(46, 204, 113, 0.35);
  color: var(--dark-accent-primary);                   /* bright green */

  font-size: 3rem;
  font-weight: 700;
  line-height: 1;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.theme-dark .result-value:hover,
body.theme-dark .result-value:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(46, 204, 113, 0.28);
}

/* Override: no inner pill when value is inside .result-card */
.theme-dark .result-card .result-value,
body.theme-dark .result-card .result-value {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;

  font-size: 2.25rem;
}

/* Label under the value */
.theme-dark .result-card .result-label,
body.theme-dark .result-card .result-label {
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dark-text-muted);
}
/* ──────────────────────────────────────────────
   FORM FIELDS – DARK THEME
   ────────────────────────────────────────────── */
   .theme-dark .form-control,
   body.theme-dark .form-control {
     background: var(--dark-bg-surface);     /* deep grey */
     color: var(--dark-text-light, #f5f5f5);
     border: 1px solid rgba(255, 255, 255, 0.08);
   }
   
   .theme-dark .form-control::placeholder,
   body.theme-dark .form-control::placeholder {
     color: var(--dark-text-muted, #bfbfbf);
     opacity: 0.75;
   }
   
   .theme-dark .form-control:focus,
   body.theme-dark .form-control:focus {
     border-color: var(--dark-accent-primary, #2ecc71);
     box-shadow: 0 0 0 0.15rem rgba(46, 204, 113, 0.25);
     background: var(--dark-bg-surface);
     color-scheme: dark;
   }
   
   /* invalid state */
   .theme-dark .form-control.is-invalid,
   body.theme-dark .form-control.is-invalid {
     border-color: #dc3545;
     background: rgba(220, 53, 69, 0.08);
     color: var(--dark-text-light, #f5f5f5);
   }
/* ═════════════════════════════════════════════
   FORM-SELECT – DARK THEME
   ═════════════════════════════════════════════ */
   .theme-dark .form-select,
   body.theme-dark .form-select {
     background: var(--dark-bg-surface);              /* charcoal surface */
     color: var(--dark-text-light, #f5f5f5);
     border: 1px solid rgba(255, 255, 255, 0.08);
   }
   
   .theme-dark .form-select:focus,
   body.theme-dark .form-select:focus {
     border-color: var(--dark-accent-primary, #2ecc71);
     box-shadow: 0 0 0 0.15rem rgba(46, 204, 113, 0.25);
     background: var(--dark-bg-surface);
     color-scheme: dark;
   }
   
   /* invalid state */
   .theme-dark .form-select.is-invalid,
   body.theme-dark .form-select.is-invalid {
     border-color: #dc3545;
     background: rgba(220, 53, 69, 0.08);
     color: var(--dark-text-light, #f5f5f5);
   }
/* Dropdown list items (works in Chromium browsers) */
.theme-dark .form-select option,
.theme-dark .form-select optgroup {
  background: var(--dark-bg-surface);
  color: var(--dark-text-light, #f5f5f5);
}
/* ──────────────────────────────────────────────
   “Did You Know?” / Info Cards – DARK THEME
   ────────────────────────────────────────────── */
   .theme-dark .info-card,
   body.theme-dark .info-card {
     background: var(--dark-bg-surface);          /* charcoal surface */
     border: 1px solid rgba(46,204,113,.25);      /* subtle green edge */
     border-radius: .75rem;
     box-shadow: 0 6px 18px rgba(0,0,0,.55);
     transition: transform .25s ease, box-shadow .25s ease;
   }
   
   .theme-dark .info-card:hover,
   body.theme-dark .info-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 10px 28px rgba(46,204,113,.22);
   }
   
   /* title & text */
   .theme-dark .info-card .card-title   { color: var(--dark-accent-primary); font-weight: 600; }
   .theme-dark .info-card .card-text    { color: var(--dark-text-light, #f5f5f5); }
   
   /* button */
   .theme-dark .info-card .btn-enhanced {
     background: var(--dark-accent-primary);     /* bright green */
     border-color: var(--dark-accent-primary);
     color: #111;                                /* readable on green */
     font-weight: 600;
   }
   .theme-dark .info-card .btn-enhanced:hover {
     background: #38b56c;
     border-color: #38b56c;
   }

/* ──────────────────────────────────────────────
   TEMP: hide site-wide search buttons
   ────────────────────────────────────────────── */
#search-toggle,
#mobile-search {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGE DARK MODE BLUE FIXES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Override green primary colors with blue for homepage elements */
.theme-dark .text-primary,
body.theme-dark .text-primary {
  color: var(--dark-accent-secondary) !important; /* Blue instead of green */
}

/* Primary buttons - use blue instead of green */
.theme-dark .btn-primary,
body.theme-dark .btn-primary {
  background-color: var(--dark-accent-secondary) !important;
  border-color: var(--dark-accent-secondary) !important;
  color: var(--dark-text-light) !important;
}

.theme-dark .btn-primary:hover,
body.theme-dark .btn-primary:hover {
  background-color: #4dabf7 !important; /* Brighter blue on hover */
  border-color: #4dabf7 !important;
  color: var(--dark-text-light) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3) !important;
}

/* Outline primary buttons - use blue */
.theme-dark .btn-outline-primary,
body.theme-dark .btn-outline-primary {
  color: var(--dark-accent-secondary) !important;
  border-color: var(--dark-accent-secondary) !important;
}

.theme-dark .btn-outline-primary:hover,
body.theme-dark .btn-outline-primary:hover {
  background-color: var(--dark-accent-secondary) !important;
  border-color: var(--dark-accent-secondary) !important;
  color: var(--dark-text-light) !important;
}

/* Theme switcher button - use blue */
.theme-dark .btn-outline-secondary,
body.theme-dark .btn-outline-secondary {
  border-color: var(--dark-accent-secondary) !important;
  color: var(--dark-accent-secondary) !important;
}

.theme-dark .btn-outline-secondary:hover,
body.theme-dark .btn-outline-secondary:hover {
  background-color: var(--dark-accent-secondary) !important;
  border-color: var(--dark-accent-secondary) !important;
  color: var(--dark-text-light) !important;
}

/* Border colors - use blue instead of green */
.theme-dark .border-primary,
body.theme-dark .border-primary {
  border-color: var(--dark-accent-secondary) !important;
}

/* Specific homepage div with inline border style */
.theme-dark .bg-light[style*="border: 2px solid"],
body.theme-dark .bg-light[style*="border: 2px solid"] {
  border-color: var(--dark-accent-secondary) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   FITNESS PLAN BUILDER - DARK THEME
   ════════════════════════════════════════════════════════════════════════════ */
   
/* Hero section with dark theme gradient */
.theme-dark .fitness-hero,
body.theme-dark .fitness-hero {
  background: linear-gradient(135deg, var(--dark-accent-secondary) 0%, #4dabf7 100%) !important;
  color: var(--dark-text-light) !important;
  opacity: 1 !important;
}

.theme-dark .fitness-hero h1,
body.theme-dark .fitness-hero h1,
.theme-dark .fitness-hero p,
body.theme-dark .fitness-hero p {
  color: var(--dark-text-light) !important;
  opacity: 1 !important;
}

/* Hero info cards with glass effect */
.theme-dark .hero-info-card,
body.theme-dark .hero-info-card {
  background: rgba(33, 33, 33, 0.7) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(52, 152, 219, 0.3) !important;
  color: var(--dark-text-light) !important;
  opacity: 1 !important;
}

.theme-dark .hero-info-card:hover,
body.theme-dark .hero-info-card:hover {
  background: rgba(52, 152, 219, 0.15) !important;
  border-color: rgba(52, 152, 219, 0.5) !important;
}

.theme-dark .hero-info-card span,
body.theme-dark .hero-info-card span {
  color: var(--dark-text-light) !important;
  font-weight: 600;
  opacity: 1 !important;
}

.theme-dark .hero-info-card i,
body.theme-dark .hero-info-card i {
  color: var(--dark-accent-secondary) !important;
  opacity: 0.9 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DIARY TRUEMETRICS OVERVIEW SECTION - DARK THEME
   ═══════════════════════════════════════════════════════════════════════════ */

/* Main overview section */
.theme-dark .diary-truemetrics-overview,
body.theme-dark .diary-truemetrics-overview {
  background: var(--dark-bg-secondary) !important;
  border-top: 1px solid rgba(46, 204, 113, 0.3) !important;
  padding: 2rem 0 !important;
}

/* Section headers */
.theme-dark .diary-truemetrics-overview h5,
body.theme-dark .diary-truemetrics-overview h5 {
  color: var(--dark-accent-primary) !important;
  font-weight: 600 !important;
}

.theme-dark .diary-truemetrics-overview .text-muted,
body.theme-dark .diary-truemetrics-overview .text-muted {
  color: var(--dark-text-muted) !important;
}

/* Stat cards */
.theme-dark .diary-truemetrics-overview .stat-card,
body.theme-dark .diary-truemetrics-overview .stat-card {
  background: rgba(50, 50, 50, 0.9) !important;
  border: 1px solid rgba(46, 204, 113, 0.3) !important;
  border-radius: 0.75rem !important;
  padding: 1.5rem !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.theme-dark .diary-truemetrics-overview .stat-card:hover,
body.theme-dark .diary-truemetrics-overview .stat-card:hover {
  background: rgba(55, 55, 55, 0.95) !important;
  border-color: rgba(46, 204, 113, 0.5) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(46, 204, 113, 0.2) !important;
}

/* Stat card links */
.theme-dark .diary-truemetrics-overview .stat-card-link,
body.theme-dark .diary-truemetrics-overview .stat-card-link {
  text-decoration: none !important;
}

/* Stat icons */
.theme-dark .diary-truemetrics-overview .stat-icon,
body.theme-dark .diary-truemetrics-overview .stat-icon {
  background: rgba(46, 204, 113, 0.15) !important;
  color: var(--dark-accent-primary) !important;
  width: 3.5rem !important;
  height: 3.5rem !important;
  border-radius: 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.5rem !important;
  margin-bottom: 1rem !important;
}

/* Different colors for different stat icons */
.theme-dark .diary-truemetrics-overview .stat-icon[style*="background: rgba(40, 167, 69"],
body.theme-dark .diary-truemetrics-overview .stat-icon[style*="background: rgba(40, 167, 69"] {
  background: rgba(46, 204, 113, 0.15) !important;
  color: #2ecc71 !important;
}

.theme-dark .diary-truemetrics-overview .stat-icon[style*="background: rgba(78, 147, 232"],
body.theme-dark .diary-truemetrics-overview .stat-icon[style*="background: rgba(78, 147, 232"] {
  background: rgba(52, 152, 219, 0.15) !important;
  color: #3498db !important;
}

.theme-dark .diary-truemetrics-overview .stat-icon[style*="background: rgba(245, 158, 11"],
body.theme-dark .diary-truemetrics-overview .stat-icon[style*="background: rgba(245, 158, 11"] {
  background: rgba(243, 156, 18, 0.15) !important;
  color: #f39c12 !important;
}

.theme-dark .diary-truemetrics-overview .stat-icon[style*="background: rgba(14, 165, 233"],
body.theme-dark .diary-truemetrics-overview .stat-icon[style*="background: rgba(14, 165, 233"] {
  background: rgba(14, 165, 233, 0.15) !important;
  color: #0ea5e9 !important;
}

/* Stat numbers and labels */
.theme-dark .diary-truemetrics-overview .stat-number,
body.theme-dark .diary-truemetrics-overview .stat-number {
  color: var(--dark-text-light) !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
}

.theme-dark .diary-truemetrics-overview .stat-label,
body.theme-dark .diary-truemetrics-overview .stat-label {
  color: var(--dark-text-muted) !important;
  font-size: 0.875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Metric value standalone */
.theme-dark .metric-value,
body.theme-dark .metric-value {
  color: var(--dark-accent-primary) !important;
  font-weight: 600 !important;
}