/* Forest-Core Nature Theme - Enhanced with Lighter Colors */
/* Refreshed nature theme with lighter, more vibrant forest palette */

/* ═══════════════════════════════════════════════════════════════════════════
   CSS VARIABLES - REFRESHED FOREST PALETTE
   ═══════════════════════════════════════════════════════════════════════════ */

:root.theme-nature {
  --tm-fern-900: #2E5339;        /* Deep evergreen - TOP nav bar */
  --tm-wood-600: #A8956D;        /* Much lighter warm brown - progress bar */
  --tm-moss-500: #5A8A4A;        /* Brighter sage green - active elements */
  --tm-leaf-300: #ffffff;        /* Clean white for contrast */
  --tm-wood-light: #E8DCC6;      /* Very light cream/beige - card backgrounds */
  --tm-text-light: #FFFFFF;      /* Pure white for dark backgrounds */
  --tm-text-dark: #2F3E2A;       /* Softer forest text, less harsh */
  --tm-warning-sun: #E8C468;     /* Brighter, warmer gold */
  --tm-accent-berry: #C47B56;    /* Warmer rust - errors/highlights */
  
  /* Semantic mappings - ENHANCED */
  --tm-bg-primary: #2E5339;                /* Navbar = Dark Green (direct value) */
  --tm-bg-secondary: #A8956D;              /* Progress bar = Much lighter brown */
  --tm-bg-surface: #A8956D;                /* Page background = Same as progress bar */
  --tm-bg-cards: #E8DCC6;                  /* Card backgrounds = Very light cream */
  --tm-accent-primary: #5A8A4A;            /* Brighter sage green */
  --tm-accent-secondary: #4a5d31;          /* Darker green accent */
  
  /* CTA Button Colors */
  --cta-finance: #EFA017;      /* warm amber */
  --cta-lifestyle: #0597F2;    /* bright cyan */
  
  /* Card text token for proper contrast */
  --card-text: #0F2120;        /* near-black for AAA contrast on white */
  --card-text-light: #0F2120;  /* near-black for white cards */
  --card-icon-light: #0F2120;  /* near-black for white cards */
}

/* IMPORTANT: Apply nature background to entire body with high specificity */
html body.theme-nature,
html .theme-nature,
body.theme-nature,
.theme-nature,
html.theme-nature body,
.theme-nature body {
  background: linear-gradient(135deg, #f8fdf8 0%, #e8f5e8 100%) !important;
  background-color: #f0f8f0 !important; /* Fallback color */
  color: #2F3E2A !important;
  min-height: 100vh !important;
}

/* Force background on all pages */
body.theme-nature:not(.modal-open) {
  background: linear-gradient(135deg, #f8fdf8 0%, #e8f5e8 100%) !important;
  background-attachment: fixed !important;
}

/* Ensure CSS variables are properly applied with high specificity */
html.theme-nature,
html body.theme-nature,
body.theme-nature {
  --tm-fern-900: #2E5339 !important;        /* Deep evergreen - TOP nav bar */
  --tm-wood-600: #A8956D !important;        /* Much lighter warm brown - progress bar */
  --tm-moss-500: #5A8A4A !important;        /* Brighter sage green - active elements */
  --tm-leaf-300: #4a5d31 !important;        /* Darker green for accents */
  --tm-wood-light: #E8DCC6 !important;      /* Very light cream/beige - card backgrounds */
  --tm-text-light: #FFFFFF !important;      /* Pure white for dark backgrounds */
  --tm-text-dark: #2F3E2A !important;       /* Softer forest text */
  --tm-warning-sun: #E8C468 !important;     /* Brighter, warmer gold */
  --tm-accent-berry: #C47B56 !important;    /* Warmer rust - errors/highlights */
  --card-text-light: #0F2120 !important;    /* near-black for white cards */
  --card-icon-light: #0F2120 !important;    /* near-black for white cards */
}

/* Process Cards for Health Page */
.theme-nature .process-card,
body.theme-nature .process-card {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(46, 125, 50, 0.3) !important;
  color: #2e1c0d !important;
}

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

.theme-nature .process-number,
body.theme-nature .process-number {
  background: linear-gradient(135deg, #2e7d32, #1b5e20) !important;
  color: white !important;
}

.theme-nature .process-icon,
body.theme-nature .process-icon {
  background: rgba(46, 125, 50, 0.2) !important;
  color: #2e7d32 !important;
}

.theme-nature .feature-item,
body.theme-nature .feature-item {
  background: rgba(46, 125, 50, 0.1) !important;
  border-color: rgba(46, 125, 50, 0.2) !important;
}

.theme-nature .process-cta,
body.theme-nature .process-cta {
  background: linear-gradient(135deg, #2e7d32, #1b5e20) !important;
  color: white !important;
}

.theme-nature .process-cta:hover,
body.theme-nature .process-cta:hover {
  background: linear-gradient(135deg, #1b5e20, #0d4012) !important;
  transform: translateY(-2px) !important;
}

/* Hero section styling for nature theme */
.theme-nature .theme-hero,
body.theme-nature .hero {
  background: linear-gradient(135deg, #1f4721 0%, #76a840 100%) !important;
  color: white !important;
}

/* ═══════════════════════════════════════════════════════════════════
   NAVBAR STYLING – FOREST-CORE (fixed)
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- bar container ---------- */
/* COMMENTED OUT - Now using unified navigation styling in lines 1570-1588
html body.theme-nature .navbar,
html body.theme-nature .health-nav-main,
body.theme-nature .navbar,
body.theme-nature .health-nav-main,
.theme-nature .navbar,
.theme-nature .health-nav-main {
  background: var(--tm-bg-primary) !important;
  border-bottom: 2px solid var(--tm-bg-secondary) !important;
  box-shadow: 0 2px 8px rgba(46, 83, 57, 0.30) !important;
}
*/

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

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

/* ---------- nav-pills - UNIFIED STYLING FOR ALL PAGES ---------- */
.theme-nature .nav-pills .nav-link,
.theme-nature .health-tools-nav .nav-link,
body.theme-nature .nav-pills .nav-link,
body.theme-nature .health-tools-nav .nav-link {
  position: relative;
  border-radius: 8px !important;
  transition: color 0.2s ease, background-color 0.2s ease !important;
  color: #ffffff !important; /* Pure white for contrast */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  font-weight: 600 !important;
}

/* underline (appears on hover & active) */
.theme-nature .nav-pills .nav-link::after,
.theme-nature .health-tools-nav .nav-link::after,
body.theme-nature .nav-pills .nav-link::after,
body.theme-nature .health-tools-nav .nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: rgba(255, 255, 255, 0.6); /* Light white accent line */
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.theme-nature .nav-pills .nav-link:hover,
.theme-nature .nav-pills .nav-link.active,
.theme-nature .health-tools-nav .nav-link:hover,
.theme-nature .health-tools-nav .nav-link.active,
body.theme-nature .nav-pills .nav-link:hover,
body.theme-nature .nav-pills .nav-link.active,
body.theme-nature .health-tools-nav .nav-link:hover,
body.theme-nature .health-tools-nav .nav-link.active {
  background-color: rgba(255, 255, 255, 0.15) !important; /* Light white background */
  color: #ffffff !important; /* Keep white text */
}

.theme-nature .nav-pills .nav-link:hover::after,
.theme-nature .nav-pills .nav-link.active::after,
.theme-nature .health-tools-nav .nav-link:hover::after,
.theme-nature .health-tools-nav .nav-link.active::after,
body.theme-nature .nav-pills .nav-link:hover::after,
body.theme-nature .nav-pills .nav-link.active::after,
body.theme-nature .health-tools-nav .nav-link:hover::after,
body.theme-nature .health-tools-nav .nav-link.active::after {
  transform: scaleX(1);
}

/* Ensure icons in nav pills have same styling */
.theme-nature .nav-pills .nav-link i,
.theme-nature .health-tools-nav .nav-link i,
body.theme-nature .nav-pills .nav-link i,
body.theme-nature .health-tools-nav .nav-link i {
  color: #ffffff !important;
  opacity: 1 !important;
}

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

.theme-nature .navbar .btn-outline-primary {
  border-color: var(--tm-leaf-300) !important;
  color: var(--tm-text-dark) !important;
}
.theme-nature .navbar .btn-outline-primary:hover {
  background-color: var(--tm-leaf-300) !important;
  border-color: var(--tm-leaf-300) !important;
  color: var(--tm-text-light) !important;
}


/* Card Colors for Nature Theme - BRIGHTENED and more differentiated backgrounds */
.theme-nature .health-card, 
body.theme-nature .health-card {
  background: rgba(129, 199, 132, 0.45) !important; /* Slightly more vibrant green */
  border-color: rgba(46, 125, 50, 0.5) !important; /* Darker border */
  transition: all 0.3s ease !important;
}

.theme-nature .finance-card,
body.theme-nature .finance-card {
  background: rgba(255, 193, 7, 0.25) !important; /* Brighter yellow base for better contrast */
  border-color: rgba(184, 134, 11, 0.4) !important;
  transition: all 0.3s ease !important;
}

.theme-nature .lifestyle-card,
body.theme-nature .lifestyle-card {
  background: rgba(144, 202, 249, 0.35) !important; /* Even lighter blue for better contrast */
  border-color: rgba(25, 118, 210, 0.4) !important;
  transition: all 0.3s ease !important;
}

/* Card Hover Effects */
.theme-nature .health-card-link:hover .health-card,
body.theme-nature .health-card-link:hover .health-card {
  background: rgba(129, 199, 132, 0.65) !important; /* Brighter on hover */
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
}

.theme-nature .finance-card-link:hover .finance-card,
body.theme-nature .finance-card-link:hover .finance-card {
  background: rgba(255, 213, 79, 0.5) !important; /* Even brighter yellow on hover */
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
}

.theme-nature .lifestyle-card-link:hover .lifestyle-card,
body.theme-nature .lifestyle-card-link:hover .lifestyle-card {
  background: rgba(144, 202, 249, 0.55) !important; /* Brighter blue on hover */
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Adjust icon colors to be more distinct */
.theme-nature .health-icon,
body.theme-nature .health-icon {
  color: #1b5e20 !important; /* Deeper green */
  transition: transform 0.3s ease !important;
}

.theme-nature .finance-icon,
body.theme-nature .finance-icon {
  color: #7d5006 !important; /* Much darker gold/brown for better contrast */
  transition: transform 0.3s ease !important;
}

.theme-nature .lifestyle-icon,
body.theme-nature .lifestyle-icon {
  color: #0a3066 !important; /* Even darker blue for better contrast against lighter background */
  transition: transform 0.3s ease !important;
}

/* Icon hover effects */
.theme-nature .health-card-link:hover .health-icon,
body.theme-nature .health-card-link:hover .health-icon,
.theme-nature .finance-card-link:hover .finance-icon,
body.theme-nature .finance-card-link:hover .finance-icon,
.theme-nature .lifestyle-card-link:hover .lifestyle-icon,
body.theme-nature .lifestyle-card-link:hover .lifestyle-icon {
  transform: scale(1.1) !important;
}

/* IMPROVED text with more contrast between colors */
.theme-nature .card-title,
body.theme-nature .card-title {
  color: #29200c !important; /* Darker brown for better contrast */
  font-weight: 700 !important;
  transition: color 0.3s ease !important;
}

.theme-nature .card-text,
body.theme-nature .card-text {
  color: #32220e !important; /* Differentiated dark brown for text */
  font-weight: 600 !important;
  transition: color 0.3s ease !important;
}

/* Title hover effects */
.theme-nature .health-card-link:hover .card-title,
body.theme-nature .health-card-link:hover .card-title {
  color: #1b5e20 !important; /* Darker green on hover */
}

.theme-nature .finance-card-link:hover .card-title,
body.theme-nature .finance-card-link:hover .card-title {
  color: #7d5006 !important; /* Darker gold color on hover to match icon */
}

.theme-nature .lifestyle-card-link:hover .card-title,
body.theme-nature .lifestyle-card-link:hover .card-title {
  color: #0a3066 !important; /* Even darker blue on hover to match icon */
}

/* Health, Finance, Lifestyle card text fixes */
.theme-nature .health h2,
body.theme-nature .health h2 {
  color: #1b5e20 !important; /* Deeper green */
}

.theme-nature .finance h2,
body.theme-nature .finance h2 {
  color: #7d5006 !important; /* Darker gold for better contrast */
}

.theme-nature .lifestyle h2,
body.theme-nature .lifestyle h2 {
  color: #0a3066 !important; /* Even darker blue for better contrast */
}

.theme-nature .health p,
body.theme-nature .health p,
.theme-nature .finance p,
body.theme-nature .finance p,
.theme-nature .lifestyle p,
body.theme-nature .lifestyle p {
  color: #32220e !important; /* Slightly darker brown for text */
}

/* Button styling for each card type - Semi-transparent buttons */
.theme-nature .health-card .cta-button,
body.theme-nature .health-card .cta-button {
  background-color: rgba(46, 125, 50, 0.75) !important; /* More opaque green */
  color: white !important;
  transition: all 0.3s ease !important;
}

.theme-nature .finance-card .cta-button,
body.theme-nature .finance-card .cta-button {
  background-color: rgba(125, 80, 6, 0.75) !important; /* Darker gold to match icon */
  color: white !important;
  transition: all 0.3s ease !important;
}

.theme-nature .lifestyle-card .cta-button,
body.theme-nature .lifestyle-card .cta-button {
  background-color: rgba(10, 48, 102, 0.75) !important; /* Darker blue to match icon */
  color: white !important;
  transition: all 0.3s ease !important;
}

/* Button hover effects - More solid on hover */
.theme-nature .health-card-link:hover .cta-button,
body.theme-nature .health-card-link:hover .cta-button {
  background-color: #1b5e20 !important; /* Solid darker green */
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15) !important;
}

.theme-nature .finance-card-link:hover .cta-button,
body.theme-nature .finance-card-link:hover .cta-button {
  background-color: #7d5006 !important; /* Darker gold to match icon */
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15) !important;
}

.theme-nature .lifestyle-card-link:hover .cta-button,
body.theme-nature .lifestyle-card-link:hover .cta-button {
  background-color: #0a3066 !important; /* Even darker blue to match icon */
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15) !important;
}

/* Enhanced Footer with smooth transition from Quick Actions */
.theme-nature footer,
body.theme-nature footer {
  background: linear-gradient(180deg, 
    #a6956b 0%,        /* Matches quick-actions end color - warm earth brown */
    #8d7b56 15%,       /* Deeper earth tone */
    #6e5a3f 35%,       /* Rich brown */
    #4a3625 55%,       /* Deep brown */
    #3d2a15 75%,       /* Darker brown */
    #2e1c0d 90%,       /* Very deep brown */
    #1f1209 100%       /* Deep earth */
  ) !important;
  color: #f5f0e8 !important; /* Light cream text */
  border-top: 2px solid rgba(93, 78, 66, 0.4) !important;
  position: relative !important;
  padding: 1.5rem 0 1rem !important;
}

/* Removed earth floor texture for consistency with other themes */





/* Nature Theme - Adjusted Colors */
:root .theme-nature,
:root body.theme-nature {
  --primary: #2e7d32 !important;
  --secondary: #795548 !important;
  --success: #43a047 !important;
  --info: #29b6f6 !important;
  --warning: #fdd835 !important;
  --danger: #e53935 !important;
  --light: #e0e0d5 !important;
  --dark: #33691e !important;
  
  --body-bg: #0e6443 !important;
  --text-color: #2e1c0d !important; /* Darker brown */
  --link-color: #33691e !important; /* Forest green for links */
  --link-hover-color: #1b5e20 !important;
  
  --navbar-bg: #b8d9ba !important;
  --navbar-color: #2e1c0d !important; /* Match body text color */
  --navbar-active: #2e7d32 !important;
  --navbar-hover-bg: #8fb292 !important;
  
  --dropdown-bg: #f1f8e9 !important;
  --dropdown-color: #2e1c0d !important; /* Match body text color */
  --dropdown-hover-bg: #c8e6c9 !important;
  --dropdown-border-color: rgba(0,0,0,.05) !important;
  
  --card-bg: #ffffff !important;
  --card-border: #a5d6a7 !important;
  --card-shadow: 0 .125rem .25rem rgba(0,0,0,.05) !important;
  
  --input-bg: #f1f8e9 !important;
  --input-border: #a5d6a7 !important;
  --input-color: #2e1c0d !important; /* Match body text color */
  --input-focus-border: #2e7d32 !important;
  
  --btn-default-bg: #c8e6c9 !important;
  --btn-default-color: #2e1c0d !important; /* Match body text color */
  --btn-default-border: #a5d6a7 !important;
  
  --footer-bg: linear-gradient(135deg, #19593c 0%, #117864 100%) !important; /* Ocean teal gradient */
  --footer-color: #3d2a15 !important; /* Light mint text */
  
  /* Health page specific variables */
  --health-card-bg: rgba(255, 255, 255, 0.9) !important;
  --health-card-border: var(--tm-leaf-300) !important;
  --health-hover-bg: rgba(255, 255, 255, 0.95) !important;
  --health-text-primary: var(--tm-moss-500) !important;
  --health-text-secondary: var(--tm-text-dark) !important;
}

/* Meal Planner Specific Fixes */
/* Meal selector area */
.theme-nature .meal-selector {
  background-color: #eff1ea !important;
  color: #2e1c0d !important;
}

.theme-nature .meal-selector label {
  color: #2e1c0d !important;
}

/* Override Bootstrap's bg-light class */
.theme-nature .card-header.bg-light {
  background-color: #d9cba1 !important;
  color: #2e1c0d !important;
  border-color: #b39d5c !important;
}

/* Button styles */
.theme-nature .btn-outline-primary {
  color: #2e7d32 !important;
  border-color: #2e7d32 !important;
}

.theme-nature .btn-outline-primary:hover {
  background-color: rgba(46, 125, 50, 0.1) !important;
}

.theme-nature .btn-outline-success {
  color: #1b5e20 !important;
  border-color: #1b5e20 !important;
}

.theme-nature .btn-outline-success:hover {
  background-color: rgba(27, 94, 32, 0.1) !important;
}

.theme-nature .dropdown-menu {
  background-color: #f2f0eb !important;
  border-color: rgba(46, 125, 50, 0.1) !important;
}

.theme-nature .dropdown-item {
  color: #2e1c0d !important;
}

.theme-nature .dropdown-item:hover {
  background-color: #e0e0d5 !important;
}

/* Fix for empty meals */
.theme-nature .empty-meal,
.theme-nature .empty-meal .card-body {
  background-color: #eff1ea !important;
  color: #2e1c0d !important;
}

.theme-nature .empty-meal .text-muted,
.theme-nature .empty-meal-content p {
  color: #52392b !important; /* Darker for better contrast */
}

/* Stats Bar Nature Theme Fixes - Enhanced Contrast for Better Readability */
.theme-nature .stats-bar,
body.theme-nature .stats-bar {
  background: linear-gradient(135deg, rgba(139, 154, 91, 0.35) 0%, rgba(79, 121, 66, 0.45) 100%) !important;
  border-bottom: 2px solid rgba(79, 121, 66, 0.6) !important;
  position: relative !important;
}

/* Add subtle overlay for better text contrast */
.theme-nature .stats-bar::before,
body.theme-nature .stats-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.1) !important;
  pointer-events: none;
}

.theme-nature .stat-icon,
body.theme-nature .stat-icon {
  color: #0d4012 !important; /* Darker forest green for better contrast */
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) !important;
}

.theme-nature .stat-label,
body.theme-nature .stat-label {
  color: #ffffff !important; /* White text for better readability on dark background */
  font-weight: 700 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important; /* Dark shadow for contrast */
}

.theme-nature .stat-text,
body.theme-nature .stat-text {
  color: #1b5e20 !important; /* Slightly lighter but still readable */
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) !important;
}

/* Enhance contrast for the stat-item container */
.theme-nature .stat-item,
body.theme-nature .stat-item {
  position: relative !important;
  z-index: 2 !important; /* Ensure content is above the overlay */
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(2px) !important;
  transition: all 0.3s ease !important;
  color: #f3ede3 !important;
  font-size: 0.8rem !important;
}

.theme-nature .stat-item:hover,
body.theme-nature .stat-item:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px) !important;
}

.theme-nature .stat-text,
body.theme-nature .stat-text {
  color: #2e4a2e !important; /* Even darker green for excellent contrast */
  font-weight: 600 !important;
}

/* Quick Actions Section - Redesigned with lighter, more vibrant colors */
.theme-nature .quick-actions,
body.theme-nature .quick-actions {
  background: linear-gradient(180deg, 
    #f6fbf4 0%,        /* Matches lighter body gradient end color */
    #edf7eb 20%,       /* Soft sage green */
    #e1f2dd 50%,       /* Light sage green */
    #d8e7cd 80%,       /* Gentle earth tone */
    #cfd9b8 100%       /* Light sage brown */
  ) !important;
  padding: 4rem 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Add subtle texture overlay */
.theme-nature .quick-actions::before,
body.theme-nature .quick-actions::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(79, 121, 66, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(138, 154, 91, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.theme-nature .quick-actions h2,
body.theme-nature .quick-actions h2 {
  color: #1b5e20 !important; /* Dark forest green for title */
  font-size: 2.25rem !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  margin-bottom: 2rem !important;
}

.theme-nature .quick-action-card,
body.theme-nature .quick-action-card {
  background: rgba(250, 252, 248, 0.95) !important; /* Very light sage background */
  border: 2px solid rgba(168, 149, 109, 0.3) !important; /* Lighter border */
  box-shadow: 0 4px 16px rgba(90, 138, 74, 0.08) !important; /* Green-tinted shadow */
  backdrop-filter: blur(10px) !important;
  border-radius: 1rem !important;
  padding: 1.75rem !important;
  transition: all 0.3s ease !important;
}

.theme-nature .quick-action-icon,
body.theme-nature .quick-action-icon {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 1rem !important;
  font-size: 1.75rem !important;
  background: rgba(90, 138, 74, 0.15) !important; /* Light sage green background */
  color: #2F3E2A !important; /* Softer forest text color */
  transition: all 0.3s ease !important;
}

.theme-nature .quick-action-card h5,
body.theme-nature .quick-action-card h5 {
  color: #2F3E2A !important; /* Softer forest heading */
  font-weight: 700 !important;
  font-size: 1.125rem !important;
  margin-bottom: 0.5rem !important;
}

.theme-nature .quick-action-card p,
body.theme-nature .quick-action-card p {
  color: #4A5E45 !important; /* Softer green-brown text */
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  margin: 0 !important;
}

.theme-nature .quick-action-card:hover,
body.theme-nature .quick-action-card:hover {
  background: rgba(255, 255, 255, 0.98) !important; /* Clean white on hover */
  transform: translateY(-6px) !important;
  box-shadow: 0 8px 24px rgba(90, 138, 74, 0.15) !important; /* Green-tinted shadow */
  border-color: rgba(90, 138, 74, 0.4) !important; /* Sage green border */
}

.theme-nature .quick-action-card:hover .quick-action-icon,
body.theme-nature .quick-action-card:hover .quick-action-icon {
  background: rgba(90, 138, 74, 0.25) !important; /* Slightly darker sage on hover */
  color: #2F3E2A !important; /* Forest text on hover */
  transform: scale(1.1) !important;
  box-shadow: 0 4px 12px rgba(90, 138, 74, 0.2) !important; /* Green shadow */
}

/* Activity section improvements for nature theme */
.theme-nature .activity-section,
body.theme-nature .activity-section {
  background: linear-gradient(180deg, 
    #a6956b 0%,        /* Continues from quick actions - warm earth brown */
    #967f56 50%,       /* Mid-tone earth */
    #7d6943 100%       /* Leading to footer */
  ) !important;
  padding: 3rem 0 !important;
}

.theme-nature .activity-card,
body.theme-nature .activity-card {
  background: rgba(245, 240, 225, 0.95) !important; /* Warm light brown background */
  border: 1px solid rgba(93, 78, 66, 0.3) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 2px 8px rgba(61, 42, 21, 0.15) !important;
  transition: all 0.3s ease !important;
}

.theme-nature .activity-card:hover,
body.theme-nature .activity-card:hover {
  background: rgba(250, 247, 235, 0.98) !important;
  box-shadow: 0 4px 16px rgba(61, 42, 21, 0.2) !important;
  transform: translateX(4px) !important;
}

.theme-nature .activity-title,
body.theme-nature .activity-title {
  color: #2e1c0d !important; /* Dark brown title */
  font-weight: 700 !important;
}

.theme-nature .activity-time,
body.theme-nature .activity-time {
  color: #5a4136 !important; /* Rich brown time text */
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS & BADGES - FOREST-CORE
   ═══════════════════════════════════════════════════════════════════════════ */

   .theme-nature .btn-outline-success,
   body.theme-nature .btn-outline-success {
     background-color: #ffffff !important;                      /* white background */
     border-color: var(--tm-accent-primary) !important;         /* green border */
     color: var(--tm-text-dark) !important;                     /* dark text */
     font-weight: 600 !important;
     box-shadow: 0 2px 8px rgba(79, 121, 66, 0.15) !important;
     transition: all 0.2s ease;
   }
   
   .theme-nature .btn-outline-success:hover,
   body.theme-nature .btn-outline-success:hover {
     background-color: var(--tm-accent-primary) !important;     /* green background */
     color: var(--tm-text-light) !important;                    /* white text */
     border-color: var(--tm-accent-primary) !important;
     transform: translateY(-1px) !important;
     box-shadow: 0 4px 12px rgba(79, 121, 66, 0.25) !important;
   }
   

.theme-nature .btn-outline-info,
body.theme-nature .btn-outline-info {
  color: var(--tm-fern-700) !important;
  border-color: var(--tm-fern-700) !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(46, 83, 57, 0.2) !important;
}

.theme-nature .btn-outline-info:hover,
body.theme-nature .btn-outline-info:hover {
  background-color: var(--tm-fern-700) !important;
  border-color: var(--tm-fern-700) !important;
  color: var(--tm-text-light) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(46, 83, 57, 0.3) !important;
}

/* Badge Styling with Forest-Core Colors */
.theme-nature .badge.bg-success,
.theme-nature .badge-new,
body.theme-nature .badge.bg-success,
body.theme-nature .badge-new {
  background-color: var(--tm-leaf-300) !important;
  color: var(--tm-text-light) !important;
  font-weight: 600 !important;
}

.theme-nature .badge.bg-warning,
body.theme-nature .badge.bg-warning {
  background-color: var(--tm-warning-sun) !important;
  color: var(--tm-text-light) !important;
  font-weight: 700 !important;
}

.theme-nature .badge.bg-danger,
body.theme-nature .badge.bg-danger {
  background-color: var(--tm-accent-berry) !important;
  color: var(--tm-text-light) !important;
}

/* Icons with Forest-Core Colors */
.theme-nature .bi-star-fill,
.theme-nature .bi-fire,
.theme-nature .bi-award-fill,
body.theme-nature .bi-star-fill,
body.theme-nature .bi-fire,
body.theme-nature .bi-award-fill {
  color: var(--tm-warning-sun) !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)) !important;
}

/* Progress Bars */
.theme-nature .progress-bar.bg-success,
body.theme-nature .progress-bar.bg-success {
  background-color: var(--tm-accent-primary) !important;
}

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

/* Button General Enhancements */
.theme-nature .navbar .btn,
body.theme-nature .navbar .btn {
  border-width: 2px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

/* Special styling for Log Today button - WHITE BACKGROUND */
html body.theme-nature .btn-outline-primary,
body.theme-nature .btn-outline-primary {
  background-color: #ffffff !important;
  border-color: var(--tm-accent-primary) !important;
  color: var(--tm-accent-primary) !important;
  font-weight: 600 !important;
}

/* ——————————————————————————————————————————
   1) Existing global rule (leave as-is)
   ------------------------------------------------
   html body.theme-nature .btn-outline-primary,
   body.theme-nature .btn-outline-primary { …white bg… }
   ------------------------------------------------ */

/* ——————————————————————————————————————————
   2) NEW override – only inside navbar / topbar
   ------------------------------------------------ */
   .theme-nature .navbar  .btn-outline-primary,
   .theme-nature .tm-topbar .btn-outline-primary {
     background-color: transparent !important;      /* no white box   */
     border-color: var(--tm-leaf-300) !important;    /* subtle outline */
     color: var(--tm-text-light) !important;         /* keep icon pale */
     padding: 0.25rem 0.45rem;                       /* tidy square btn */
     box-shadow: none !important;                    /* kills btn-light halo */
   }
   
   .theme-nature .navbar  .btn-outline-primary:hover,
   .theme-nature .tm-topbar .btn-outline-primary:hover {
     background-color: var(--tm-leaf-300) !important; /* green invert on hover */
     color: var(--tm-text-light) !important;
   }
   /* ──────────────────────────────────────────────
   NAV LINKS – KEEP BRIGHT ON HOVER/FOCUS
   ────────────────────────────────────────────── */

.theme-nature .navbar .nav-link:hover,
.theme-nature .navbar .nav-link:focus,
.theme-nature .navbar .nav-pills .nav-link:hover,
/*.theme-nature .navbar .nav-pills .nav-link:focus {
  color: var(--tm-leaf-300) !important;  /* bright forest green */
  text-decoration: none;                 /* optional: remove underline */
}

/* if you prefer pure white instead, swap the token: */
/* color: var(--tm-text-light) !important; */

   


html body.theme-nature .btn-outline-primary:hover,
body.theme-nature .btn-outline-primary:hover {
  background-color: var(--tm-accent-primary) !important;
  border-color: var(--tm-accent-primary) !important;
  color: #ffffff !important;
}
/* ──────────────────────────────────────────────
   POINTS DISPLAY BUTTON (navbar only)
   ────────────────────────────────────────────── */
   .theme-nature .navbar  .points-display .btn-outline-success,
   .theme-nature .tm-topbar .points-display .btn-outline-success {
     /* kill white fill */
     background-color: transparent !important;
     /* harmonious outline */
     border-color: var(--tm-leaf-300) !important;
     color: var(--tm-text-light) !important;
     box-shadow: none !important;              /* no glow */
     padding: 0.25rem 0.55rem;                 /* aligns icon nicely */
   }
   
   .theme-nature .navbar  .points-display .btn-outline-success:hover,
   .theme-nature .tm-topbar .points-display .btn-outline-success:hover {
     /* green invert on hover for feedback */
     background-color: var(--tm-leaf-300) !important;
     color: var(--tm-text-light) !important;
   }
   
   /* keep the tiny “+5” badge readable */
   .theme-nature .points-display .badge {
     background-color: var(--tm-warning-sun) !important;
     color: var(--tm-text-dark) !important;
   }
   
/* Fix theme dropdown button to match dashboard nature theme */
.theme-nature .navbar .theme-switcher .btn-outline-secondary,
body.theme-nature .navbar .theme-switcher .btn-outline-secondary {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.3) !important;  /* Light white border */
  color: #ffffff !important;                          /* White icon */
  box-shadow: none !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.theme-nature .navbar .theme-switcher .btn-outline-secondary:hover,
body.theme-nature .navbar .theme-switcher .btn-outline-secondary:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;  /* Light white background on hover */
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;                              /* Keep white text on hover */
}

/* Fix notification button to match dashboard nature theme */
.theme-nature .navbar #notificationBell,
body.theme-nature .navbar #notificationBell {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.3) !important;  /* Light white border */
  color: #ffffff !important;
  box-shadow: none !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.theme-nature .navbar #notificationBell:hover,
body.theme-nature .navbar #notificationBell:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;  /* Light white background on hover */
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
}

/* Notification badge styling */
.theme-nature .navbar #notification-badge,
body.theme-nature .navbar #notification-badge {
  background-color: #dc3545 !important;  /* Red for notifications */
  color: white !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

/* Enhanced hover effects for better user feedback */
.theme-nature .btn:hover,
body.theme-nature .btn:hover {
  transition: all 0.2s ease-in-out !important;
}
/* ──────────────────────────────────────────────
   THEME-CHOOSER DROPDOWN (readable text colors)
   ────────────────────────────────────────────── */

/* base layout: small swatch + label */
.theme-nature .dropdown-item.theme-option{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-weight:600;
  border-radius:4px;
}

/* make every swatch look crisp */
.theme-nature .theme-color-preview{
  width:1rem;
  height:1rem;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.15);
}

/* 1) rows whose preview is dark → light text  */
.theme-nature .theme-option[data-theme="dark"],
.theme-nature .theme-option[data-theme="night"],
.theme-nature .theme-option[data-theme="midnight"]{
  color:#f5f3ee !important;
}

/* 2) rows whose preview is light → dark text  */
.theme-nature .theme-option[data-theme="light"],
.theme-nature .theme-option[data-theme="nature"],
.theme-nature .theme-option[data-theme="sunrise"]{
  color:#2e1c0d !important;
}

/* subtle hover feedback (keeps contrast) */
.theme-nature .theme-option:hover{
  background:rgba(79,121,66,.10);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRESS STATS BAR - FOREST-CORE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Progress Stats Bar with High Specificity - DARK GREEN FOREST THEME */
html body.theme-nature .progress-stats-bar,
body.theme-nature .progress-stats-bar,
.theme-nature .progress-stats-bar {
  background: linear-gradient(135deg, #1f3d26 0%, #1b3420 100%) !important; /* Dark forest green gradient */
  background-color: #1b3420 !important;
  border-bottom: 2px solid rgba(74, 124, 78, 0.3) !important;
  color: #ffffff !important; /* Pure white text for contrast */
  padding: 0.5rem 0 !important; /* Match other themes exactly */
  min-height: auto !important; /* Reset any height overrides */
  box-shadow: 0 2px 8px rgba(46, 83, 57, 0.3) !important;
}

/* Override common Bootstrap background utilities */
html body.theme-nature .bg-light,
body.theme-nature .bg-light {
  background-color: var(--tm-mist-50) !important;
  color: var(--tm-text-dark) !important;
}

html body.theme-nature .bg-white,
body.theme-nature .bg-white {
  background-color: #ffffff !important;
  color: var(--tm-text-dark) !important;
}

html body.theme-nature .bg-dark,
body.theme-nature .bg-dark {
  background-color: var(--tm-wood-900) !important;
  color: var(--tm-text-light) !important;
}

.theme-nature .stat-label,
body.theme-nature .stat-label {
  color: rgba(255, 255, 255, 0.95) !important; /* Pure white with slight transparency */
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.theme-nature .stat-item,
body.theme-nature .stat-item {
  color: #ffffff !important; /* Pure white */
  font-size: 0.8rem !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.theme-nature .stat-item i,
body.theme-nature .stat-item i {
  color: rgba(255, 255, 255, 0.9) !important; /* Slightly transparent white */
  font-size: 0.8rem !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.theme-nature .stat-item span,
body.theme-nature .stat-item span {
  color: rgba(255, 255, 255, 0.9) !important; /* Slightly transparent white */
  font-size: 0.8rem !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.theme-nature .stat-item strong,
body.theme-nature .stat-item strong {
  color: #ffffff !important; /* Pure white for emphasis */
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.theme-nature .stat-divider,
body.theme-nature .stat-divider {
  background-color: #8b7355 !important; /* Lightish brown divider to match nature theme */
  opacity: 0.5 !important;
}

.theme-nature .clickable-stat:hover,
body.theme-nature .clickable-stat:hover {
  background-color: rgba(255, 255, 255, 0.2) !important; /* Light white hover effect */
  border-radius: 6px !important;
  transform: translateY(-1px) !important;
}

/* Points Details Expanded Section */
.theme-nature .points-details-expanded,
body.theme-nature .points-details-expanded {
  background: linear-gradient(135deg, #efebe9 0%, #d7ccc8 100%) !important; /* Light warm gradient */
  border-top: 2px solid #8d6e63 !important;
  color: #3e2723 !important; /* Dark brown text */
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS & SECTIONS - FOREST-CORE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Getting Started Section with High Specificity */
html body.theme-nature .getting-started-section,
body.theme-nature .getting-started-section {
  background: var(--tm-bg-surface) !important;
}

html body.theme-nature .getting-started-card,
body.theme-nature .getting-started-card {
  background: var(--tm-bg-cards) !important;
  border: 1px solid var(--tm-leaf-300) !important;
  color: var(--tm-text-light) !important;
}

html body.theme-nature .getting-started-card h3,
body.theme-nature .getting-started-card h3 {
  color: var(--tm-text-light) !important;
}

/* All card backgrounds in nature theme - NOW LIGHT BROWN */
html body.theme-nature .card,
body.theme-nature .card {
  background-color: var(--tm-bg-cards) !important;
  border-color: var(--tm-leaf-300) !important;
  color: var(--tm-text-light) !important;
}

/* Getting Started Dismiss Button */
html body.theme-nature .getting-started-card #dismissGettingStarted,
body.theme-nature .getting-started-card #dismissGettingStarted {
  border-color: var(--tm-wood-900) !important;
  color: var(--tm-wood-900) !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  transition: all 0.2s ease !important;
}

html body.theme-nature .getting-started-card #dismissGettingStarted:hover,
body.theme-nature .getting-started-card #dismissGettingStarted:hover {
  background-color: var(--tm-wood-900) !important;
  border-color: var(--tm-wood-900) !important;
  color: var(--tm-text-light) !important;
  transform: scale(1.05) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRESS STATS BAR & POINTS DETAILS - NATURE THEME FIXES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fix progress stats bar text and icons in nature theme */
.theme-nature .stat-item,
body.theme-nature .stat-item {
  color: var(--tm-text-light) !important;
}

.theme-nature .stat-item span,
body.theme-nature .stat-item span {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 600 !important;
}

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

/* Fix graph-up icon visibility - ensure it's visible on nature theme */
.theme-nature .bi-graph-up,
body.theme-nature .bi-graph-up {
  color: var(--tm-text-light) !important;
  background: none !important;
  opacity: 1 !important;
}

/* Enhanced points details button for nature theme */
.theme-nature .points-details-btn,
body.theme-nature .points-details-btn {
  background: linear-gradient(135deg, var(--tm-moss-500), var(--tm-accent-primary)) !important;
  color: var(--tm-text-light) !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.theme-nature .points-details-btn:hover,
body.theme-nature .points-details-btn:hover {
  background: linear-gradient(135deg, var(--tm-accent-primary), var(--tm-leaf-300)) !important;
  color: var(--tm-text-light) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 4px 15px rgba(79, 121, 66, 0.4) !important;
}

.theme-nature .points-details-btn i,
body.theme-nature .points-details-btn i {
  color: var(--tm-text-light) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Improve stat labels readability */
.theme-nature .stat-label,
body.theme-nature .stat-label {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.5px !important;
}

/* Fix all icons in progress stats */
.theme-nature .stat-item i,
body.theme-nature .stat-item i {
  color: var(--tm-leaf-300) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  font-weight: 600 !important;
}

/* Ensure bi-graph-up specifically is always visible */
.theme-nature .stat-item .bi-graph-up,
body.theme-nature .stat-item .bi-graph-up,
.theme-nature .points-details-btn .bi-graph-up,
body.theme-nature .points-details-btn .bi-graph-up {
  color: var(--tm-text-light) !important;
  background-color: transparent !important;
  opacity: 1 !important;
  font-style: normal !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

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

/* Score Showcase Section */
.theme-nature .score-showcase,
body.theme-nature .score-showcase {
  background: linear-gradient(135deg, #f1f8e9 0%, #e8f5e8 100%) !important;
  border: 2px solid var(--tm-moss-500) !important;
  border-radius: 1rem !important;
}

.theme-nature .score-showcase .metric-card,
body.theme-nature .score-showcase .metric-card {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: var(--tm-leaf-300) !important;
  color: var(--tm-text-dark) !important;
  transition: all 0.3s ease !important;
}

.theme-nature .score-showcase .metric-card:hover,
body.theme-nature .score-showcase .metric-card:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: var(--tm-moss-500) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(79, 121, 66, 0.2) !important;
}

/* Enhanced Journey Overview Section */
.theme-nature .journey-overview-section,
body.theme-nature .journey-overview-section {
  background: linear-gradient(135deg, var(--tm-wood-light) 0%, #a5956a 100%) !important;
  border: 2px solid var(--tm-moss-500) !important;
  color: var(--tm-text-light) !important;
  border-radius: 1rem !important;
}

.theme-nature .journey-overview-section h2,
body.theme-nature .journey-overview-section h2 {
  color: var(--tm-text-light) !important;
  text-shadow: 0 2px 4px rgba(46, 83, 57, 0.3) !important;
}

.theme-nature .journey-overview-section p,
body.theme-nature .journey-overview-section p {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Enhanced Form Controls */
.theme-nature .form-control,
body.theme-nature .form-control {
  background-color: rgba(241, 248, 233, 0.95) !important;
  border-color: var(--tm-leaf-300) !important;
  color: var(--tm-text-dark) !important;
}

.theme-nature .form-control:focus,
body.theme-nature .form-control:focus {
  background-color: #ffffff !important;
  border-color: var(--tm-moss-500) !important;
  box-shadow: 0 0 0 0.2rem rgba(79, 121, 66, 0.25) !important;
}

.theme-nature .form-control::placeholder,
body.theme-nature .form-control::placeholder {
  color: rgba(46, 28, 13, 0.6) !important;
}

/* Enhanced Button Styles */
.theme-nature .btn-primary,
body.theme-nature .btn-primary {
  background-color: var(--tm-moss-500) !important;
  border-color: var(--tm-moss-500) !important;
  color: var(--tm-text-light) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.theme-nature .btn-primary:hover,
body.theme-nature .btn-primary:hover {
  background-color: #3a5f2d !important;
  border-color: #3a5f2d !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(79, 121, 66, 0.3) !important;
}

.theme-nature .btn-secondary,
body.theme-nature .btn-secondary {
  background-color: var(--tm-wood-light) !important;
  border-color: var(--tm-wood-light) !important;
  color: var(--tm-text-light) !important;
  font-weight: 600 !important;
}

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

/* Alert Components */
.theme-nature .alert-success,
body.theme-nature .alert-success {
  background-color: rgba(67, 160, 71, 0.15) !important;
  border-color: var(--tm-moss-500) !important;
  color: #2e7d32 !important;
}

.theme-nature .alert-warning,
body.theme-nature .alert-warning {
  background-color: rgba(194, 169, 76, 0.15) !important;
  border-color: var(--tm-warning-sun) !important;
  color: #8a7006 !important;
}

.theme-nature .alert-info,
body.theme-nature .alert-info {
  background-color: rgba(138, 154, 91, 0.15) !important;
  border-color: var(--tm-leaf-300) !important;
  color: #5a6b3a !important;
}

.theme-nature .alert-danger,
body.theme-nature .alert-danger {
  background-color: rgba(163, 92, 55, 0.15) !important;
  border-color: var(--tm-accent-berry) !important;
  color: var(--tm-accent-berry) !important;
}

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

.theme-nature .table th,
body.theme-nature .table th {
  background-color: var(--tm-wood-light) !important;
  border-color: var(--tm-leaf-300) !important;
  color: var(--tm-text-light) !important;
  font-weight: 700 !important;
}

.theme-nature .table td,
body.theme-nature .table td {
  border-color: rgba(138, 154, 91, 0.3) !important;
}

.theme-nature .table-hover tbody tr:hover,
body.theme-nature .table-hover tbody tr:hover {
  background-color: rgba(79, 121, 66, 0.1) !important;
}

/* Modal Enhancements */
.theme-nature .modal-content,
body.theme-nature .modal-content {
  background-color: #ffffff !important;
  border: 2px solid var(--tm-moss-500) !important;
  box-shadow: 0 10px 30px rgba(79, 121, 66, 0.3) !important;
  border-radius: 1rem !important;
}

.theme-nature .modal-header,
body.theme-nature .modal-header {
  background-color: var(--tm-wood-light) !important;
  border-bottom: 1px solid var(--tm-leaf-300) !important;
  color: var(--tm-text-light) !important;
  border-radius: 1rem 1rem 0 0 !important;
}

.theme-nature .modal-title,
body.theme-nature .modal-title {
  color: var(--tm-text-light) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.theme-nature .modal-body,
body.theme-nature .modal-body {
  color: var(--tm-text-dark) !important;
}

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

/* Progress Bar Enhancements */
.theme-nature .progress,
body.theme-nature .progress {
  background-color: rgba(138, 154, 91, 0.2) !important;
  border-radius: 0.5rem !important;
}

.theme-nature .progress-bar,
body.theme-nature .progress-bar {
  background-color: var(--tm-moss-500) !important;
  border-radius: 0.5rem !important;
}

/* Breadcrumb Styling */
.theme-nature .breadcrumb,
body.theme-nature .breadcrumb {
  background-color: rgba(241, 248, 233, 0.8) !important;
  border: 1px solid var(--tm-leaf-300) !important;
}

.theme-nature .breadcrumb-item a,
body.theme-nature .breadcrumb-item a {
  color: var(--tm-moss-500) !important;
}

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

/* Pagination Styling */
.theme-nature .page-link,
body.theme-nature .page-link {
  color: var(--tm-moss-500) !important;
  background-color: rgba(241, 248, 233, 0.8) !important;
  border-color: var(--tm-leaf-300) !important;
}

.theme-nature .page-link:hover,
body.theme-nature .page-link:hover {
  color: var(--tm-text-light) !important;
  background-color: var(--tm-moss-500) !important;
  border-color: var(--tm-moss-500) !important;
}

.theme-nature .page-item.active .page-link,
body.theme-nature .page-item.active .page-link {
  background-color: var(--tm-moss-500) !important;
  border-color: var(--tm-moss-500) !important;
  color: var(--tm-text-light) !important;
}

/* Enhanced Dropdown Styling */
.theme-nature .dropdown-menu,
body.theme-nature .dropdown-menu {
  background-color: #ffffff !important;
  border: 2px solid var(--tm-leaf-300) !important;
  box-shadow: 0 4px 15px rgba(79, 121, 66, 0.2) !important;
  border-radius: 0.5rem !important;
}

.theme-nature .dropdown-item,
body.theme-nature .dropdown-item {
  color: var(--tm-text-dark) !important;
}

.theme-nature .dropdown-item:hover,
body.theme-nature .dropdown-item:hover {
  background-color: rgba(79, 121, 66, 0.1) !important;
  color: var(--tm-moss-500) !important;
}

.theme-nature .dropdown-item.active,
body.theme-nature .dropdown-item.active {
  background-color: var(--tm-moss-500) !important;
  color: var(--tm-text-light) !important;
}

/* Tooltip Styling */
.theme-nature .tooltip .tooltip-inner,
body.theme-nature .tooltip .tooltip-inner {
  background-color: var(--tm-wood-900) !important;
  color: var(--tm-text-light) !important;
}

.theme-nature .tooltip.bs-tooltip-top .tooltip-arrow::before,
body.theme-nature .tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--tm-wood-900) !important;
}

.theme-nature .tooltip.bs-tooltip-bottom .tooltip-arrow::before,
body.theme-nature .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--tm-wood-900) !important;
}

/* Enhanced Footer Links */
.theme-nature footer a,
body.theme-nature footer a {
  color: #f6f0e7 !important;
  transition: color 0.3s ease !important;
}

.theme-nature footer a:hover,
body.theme-nature footer a:hover {
  color: var(--tm-leaf-300) !important;
  text-decoration: underline !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADDITIONAL NATURE THEME FIXES WITH HIGH SPECIFICITY
   ═══════════════════════════════════════════════════════════════════════════ */

/* FORCE NATURE THEME OVERRIDE - ULTRA HIGH SPECIFICITY */
html body.theme-nature.theme-nature,
body.theme-nature.theme-nature {
  background: linear-gradient(135deg, #f8fdf8 0%, #e8f5e8 100%) !important;
  color: #2e1c0d !important;
}

html body.theme-nature.theme-nature .progress-stats-bar,
body.theme-nature.theme-nature .progress-stats-bar {
  background: #5D4E42 !important; /* Lighter brown as specified */
  color: #f5f3ee !important;
}

/* Fix lime green elements - force override with higher specificity */
html body.theme-nature .nav-tabs .nav-link.active,
html body.theme-nature .day-tab.active,
body.theme-nature .nav-tabs .nav-link.active,
body.theme-nature .day-tab.active {
  background-color: #aee9f4 !important; /* Light Ocean Blue */
  color: #123840 !important;            /* Deep sea green-blue text */
  border-color: #8fd3e0 !important;
}  
/* Fix nature theme spans that appear lime green */
html body.theme-nature span,
body.theme-nature span {
  color: #3d2a15 !important; /* Dark brown instead of lime green */
}

/* Fix all elements that use the old lime green variable */
html body.theme-nature .nav-tabs .nav-link.active,
html body.theme-nature .day-tab.active,
html body.theme-nature .nav-pills .nav-link.active,
body.theme-nature .nav-tabs .nav-link.active,
body.theme-nature .day-tab.active,
body.theme-nature .nav-pills .nav-link.active {
  background-color: #4a5d31 !important; /* Forest green */
  border-color: #4a5d31 !important;
  color: #f5f3ee !important;
}

/* Specific fix for "Meals" and other navigation spans */
html body.theme-nature .nav-link span,
html body.theme-nature .navbar span,
body.theme-nature .nav-link span,
body.theme-nature .navbar span {
  color: #f3ede3 !important; /* Light cream for nav elements */
}

/* Fix nature theme background - force lighter gradient */
html body.theme-nature,
body.theme-nature {
  background: linear-gradient(135deg, #f8fdf8 0%, #e8f5e8 100%) !important;
  color: #2e1c0d !important;
}

/* ---------- Top-bar Nature Variant A: Dark Green Forest Theme ---------- */
.theme-nature {
  --canopy-start: #2E5339;       /* Deep forest green */
  --canopy-end:   #1b3420;       /* Darker forest green */
  --canopy-text:  #ffffff;       /* Pure white text */
  --canopy-accent: #4a7c4e;      /* Forest green accent */
}

/* UNIFIED NAVIGATION STYLING - Same appearance for all pages */
/* bar background with dark green forest theme */
html body.theme-nature .tm-topbar,
html body.theme-nature .navbar,
html body.theme-nature .health-nav-main,
html body.theme-nature .health-nav-enhanced header,
body.theme-nature .tm-topbar,
body.theme-nature .navbar,
body.theme-nature .health-nav-main,
body.theme-nature .health-nav-enhanced header,
.theme-nature header.navbar,
.theme-nature header.tm-topbar,
.theme-nature nav.navbar {
  background: linear-gradient(135deg, #2E5339 0%, #1f3d26 25%, #1b3420 75%, #16291a 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(46, 83, 57, 0.4) !important;
  border-bottom: 2px solid rgba(74, 124, 78, 0.3) !important;
}

/* Ensure health navigation uses same styles as coach/other pages */
.theme-nature .health-nav-enhanced .navbar,
body.theme-nature .health-nav-enhanced .navbar {
  background: transparent !important; /* Let parent gradient show through */
}

/* shared nav elements - UNIFIED FOR ALL PAGES */
.theme-nature .tm-topbar a,
.theme-nature .navbar a,
.theme-nature .health-nav-main a,
.theme-nature .health-nav-enhanced a,
.theme-nature .tm-topbar .nav-link,
.theme-nature .navbar .nav-link,
.theme-nature .health-nav-main .nav-link,
.theme-nature .health-nav-enhanced .nav-link,
.theme-nature .tm-topbar i,
.theme-nature .navbar i,
.theme-nature .health-nav-main i,
.theme-nature .health-nav-enhanced i,
.theme-nature .tm-topbar .btn,
.theme-nature .navbar .btn,
.theme-nature .health-nav-main .btn,
.theme-nature .health-nav-enhanced .btn,
body.theme-nature .tm-topbar a,
body.theme-nature .navbar a,
body.theme-nature .health-nav-main a,
body.theme-nature .health-nav-enhanced a,
body.theme-nature .tm-topbar i,
body.theme-nature .navbar i,
body.theme-nature .health-nav-main i,
body.theme-nature .health-nav-enhanced i {
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Fix dropdown text in health nav */
.theme-nature .health-nav-enhanced .dropdown-menu,
body.theme-nature .health-nav-enhanced .dropdown-menu {
  background-color: #ffffff !important;
  border: 2px solid var(--tm-leaf-300) !important;
}

.theme-nature .health-nav-enhanced .dropdown-item,
body.theme-nature .health-nav-enhanced .dropdown-item {
  color: var(--tm-text-dark) !important;
}

.theme-nature .health-nav-enhanced .dropdown-item:hover,
body.theme-nature .health-nav-enhanced .dropdown-item:hover {
  background-color: rgba(79, 121, 66, 0.1) !important;
  color: var(--tm-moss-500) !important;
}

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

/* Section selector dropdown in health nav */
.theme-nature .section-selector .btn,
body.theme-nature .section-selector .btn {
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.theme-nature .section-selector .btn:hover,
body.theme-nature .section-selector .btn:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
/* kill the default white fill on any .btn-light / .btn-white living in the navbar */
.theme-nature .navbar .btn-light,
.theme-nature .navbar .btn-white {
  background-color: transparent !important;   /* let the nav gradient show through */
  border-color: var(--tm-leaf-300) !important; /* keep the outline visible */
  color: var(--tm-text-light) !important;      /* icon / text stays creamy-white */
}
/* ──────────────────────────────────────────────
   FLATTEN THEME-CHOOSER ROWS (dropdown items)
   ────────────────────────────────────────────── */
   .theme-nature .dropdown-item.theme-option{
    /* strip any btn-like styling */
    background: transparent !important;
    border:   none !important;
    box-shadow:none !important;
  
    /* readable text */
    color:#2e1c0d !important;          /* dark forest text */
    font-weight:600;
  
    /* tidy layout */
    display:flex;
    align-items:center;
    gap:.5rem;
    border-radius:4px;
    padding:.35rem .75rem;
  }
  
  /* small color-swatch circle */
  .theme-nature .theme-option .theme-color-preview{
    width:1rem; height:1rem;
    border-radius:50%;
    border:1px solid rgba(0,0,0,.15);
  }
  
  /* subtle hover so row still feels clickable */
  .theme-nature .dropdown-item.theme-option:hover{
    background:rgba(79,121,66,.08) !important;  /* faint moss tint */
    color:#2e1c0d !important;
  }
/* ──────────────────────────────────────────────
   TEMP: hide site-wide search buttons
   ────────────────────────────────────────────── */
   #search-toggle,
   #mobile-search {
     display:none !important;
   }

/* ──────────────────────────────────────────────
   ICON VISIBILITY FIXES - Dark icons on brown backgrounds
   ────────────────────────────────────────────── */

/* Fix dark icons that are hard to see against brown/earth tone backgrounds */
.theme-nature .bi,
.theme-nature i,
body.theme-nature .bi,
body.theme-nature i {
  color: #1b5e20 !important; /* Dark forest green instead of dark brown/black */
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) !important; /* Light shadow for better contrast */
}

/* Specific icon overrides for better visibility on nature theme backgrounds */
.theme-nature .bi-star,
.theme-nature .bi-heart,
.theme-nature .bi-clock,
.theme-nature .bi-check,
.theme-nature .bi-plus,
.theme-nature .bi-minus,
.theme-nature .bi-pencil,
.theme-nature .bi-trash,
.theme-nature .bi-gear,
.theme-nature .bi-info-circle,
body.theme-nature .bi-star,
body.theme-nature .bi-heart,
body.theme-nature .bi-clock,
body.theme-nature .bi-check,
body.theme-nature .bi-plus,
body.theme-nature .bi-minus,
body.theme-nature .bi-pencil,
body.theme-nature .bi-trash,
body.theme-nature .bi-gear,
body.theme-nature .bi-info-circle {
  color: #2e7d32 !important; /* Bright forest green for better contrast */
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.4)) !important;
}

/* Icons on card backgrounds need extra contrast */
.theme-nature .card .bi,
.theme-nature .card i,
body.theme-nature .card .bi,
body.theme-nature .card i {
  color: #1b5e20 !important; /* Dark forest green */
  font-weight: 700 !important; /* Bold for better visibility */
}

/* Icons on light brown/cream backgrounds */
.theme-nature .bg-light .bi,
.theme-nature .bg-light i,
body.theme-nature .bg-light .bi,
body.theme-nature .bg-light i {
  color: #0d4012 !important; /* Very dark green for light backgrounds */
  text-shadow: none !important;
}

/* Action icons that need to stand out */
.theme-nature .btn .bi,
.theme-nature .btn i,
body.theme-nature .btn .bi,
body.theme-nature .btn i {
  color: inherit !important; /* Let button color determine icon color */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}
/* ──────────────────────────────────────────────
   GOAL-ADVISOR CARDS – NATURE THEME
   ────────────────────────────────────────────── */

/* Outer card shell */
.theme-nature .result-card,
body.theme-nature .result-card {
  background: var(--tm-bg-cards, var(--tm-wood-600));  /* deep earthy brown */
  border: 1px solid rgba(79, 121, 66, 0.28);           /* moss-green edge */
  border-radius: 0.75rem;
  padding: 1.5rem 1.75rem;
  text-align: center;

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

.theme-nature .result-card:hover,
body.theme-nature .result-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(79, 121, 66, 0.22);
}

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

  background: rgba(46, 83, 57, 0.95);                  /* dark forest overlay */
  border: 1px solid rgba(79, 121, 66, 0.35);
  color: var(--tm-accent-primary, #4F7942);            /* fern accent */

  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-nature .result-value:hover,
body.theme-nature .result-value:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(79, 121, 66, 0.28);
}

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

  font-size: 2.25rem;          /* headline size inside card */
}

/* Label under the value */
.theme-nature .result-card .result-label,
body.theme-nature .result-card .result-label {
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tm-text-dark, #162314);
}

/* ──────────────────────────────────────────────
   NOTIFICATION SPAN FIX - Fix white text on white background
   ────────────────────────────────────────────── */

/* Fix notification text in nav to be dark for readability */
.theme-nature .nav-link span,
.theme-nature .navbar span,
.theme-nature .navbar-nav span,
.theme-nature span.text-white,
body.theme-nature .nav-link span,
body.theme-nature .navbar span,
body.theme-nature .navbar-nav span,
body.theme-nature span.text-white {
  color: #ffffff !important; /* Pure white for maximum contrast */
  font-weight: 600 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important; /* Dark shadow for readability */
}

/* Specific notification-related spans */
.theme-nature .notification-bell span,
.theme-nature .notification-badge,
.theme-nature .notification-count,
.theme-nature [href*="notifications"] span,
body.theme-nature .notification-bell span,
body.theme-nature .notification-badge,
body.theme-nature .notification-count,
body.theme-nature [href*="notifications"] span {
  color: #ffffff !important; /* White text with shadow for contrast */
  font-weight: 700 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important; /* Strong shadow */
}

/* Fix badge backgrounds for notifications */
.theme-nature .notification-badge,
.theme-nature .badge.bg-danger,
body.theme-nature .notification-badge,
body.theme-nature .badge.bg-danger {
  background: #dc3545 !important; /* Keep red background for notification badges */
  color: #ffffff !important; /* White text on red background */
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODULE CARD TEXT CONTRAST FIX (ROUND 2)
   Fix remaining low-contrast body copy on Dashboard module cards in Nature theme
   ═══════════════════════════════════════════════════════════════════════════ */

/* Paragraph under heading */
body.theme-nature .module-card p {
  color: var(--card-text-light) !important;
}

/* Bullet rows already fixed; cover any other feature rows */
body.theme-nature .module-card .module-feature {
  color: var(--card-text-light) !important;
}

/* Icons inside features */
body.theme-nature .module-card .module-feature svg {
  color: var(--card-icon-light) !important;
}

/* Additional specificity for any module description paragraphs */
body.theme-nature .module-card .module-description {
  color: var(--card-text-light) !important;
}

/* Ensure all text elements inside module cards use proper contrast */
body.theme-nature .module-card p,
body.theme-nature .module-card span,
body.theme-nature .module-card div:not([class*="badge"]):not([class*="btn"]) {
  color: var(--card-text-light) !important;
}

/* Keep module card headings their original color (already high contrast) */
body.theme-nature .module-card h1,
body.theme-nature .module-card h2,
body.theme-nature .module-card h3,
body.theme-nature .module-card h4,
body.theme-nature .module-card h5,
body.theme-nature .module-card h6 {
  /* Let existing heading styles apply */
}

/* Keep buttons their original styling */
body.theme-nature .module-card .btn,
body.theme-nature .module-card button {
  /* Let existing button styles apply */
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD STAT LABELS AND MODULE CTA BUTTONS FIX
   Fix stat labels and module CTA buttons readability on Nature theme
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fix stat labels to be black/dark for better readability */
.theme-nature .stat-label,
body.theme-nature .stat-label {
  color: #000000 !important; /* Pure black for maximum contrast */
  font-weight: 700 !important;
  text-shadow: none !important;
}

/* Fix module CTA buttons for better contrast on all module types */
.theme-nature .module-cta,
body.theme-nature .module-cta,
.theme-nature .module-cta--finance,
body.theme-nature .module-cta--finance,
.theme-nature .module-cta--lifestyle,
body.theme-nature .module-cta--lifestyle {
  color: #ffffff !important; /* White text */
  background-color: #1b5e20 !important; /* Dark green background for all modules */
  border: none !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Hover states for module CTA buttons */
.theme-nature .module-cta:hover,
body.theme-nature .module-cta:hover,
.theme-nature .module-cta--finance:hover,
body.theme-nature .module-cta--finance:hover,
.theme-nature .module-cta--lifestyle:hover,
body.theme-nature .module-cta--lifestyle:hover {
  color: #ffffff !important; /* Keep white text on hover */
  background-color: #0d4012 !important; /* Even darker green on hover */
  text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM INPUT TEXT CONTRAST FIX
   Fix form input text color for better readability on Nature theme
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fix form control text color for better contrast */
.theme-nature .form-control,
body.theme-nature .form-control,
.theme-nature input[type="text"],
body.theme-nature input[type="text"],
.theme-nature input[type="email"],
body.theme-nature input[type="email"],
.theme-nature input[type="password"],
body.theme-nature input[type="password"],
.theme-nature textarea,
body.theme-nature textarea,
.theme-nature select,
body.theme-nature select {
  color: #000000 !important; /* Pure black text for maximum contrast */
  font-weight: 500 !important; /* Slightly bolder for better readability */
}

/* Fix placeholder text color */
.theme-nature .form-control::placeholder,
body.theme-nature .form-control::placeholder,
.theme-nature input::placeholder,
body.theme-nature input::placeholder,
.theme-nature textarea::placeholder,
body.theme-nature textarea::placeholder {
  color: #4a5568 !important; /* Dark gray for placeholder text */
  opacity: 1 !important; /* Ensure full opacity */
}

/* Fix form labels for better contrast */
.theme-nature .form-label,
body.theme-nature .form-label,
.theme-nature label,
body.theme-nature label {
  color: #000000 !important; /* Pure black for labels */
  font-weight: 600 !important; /* Slightly bolder for better readability */
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEEDBACK MODULE - NATURE THEME ICON FIXES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fix feedback module button icons for better contrast */
.theme-nature .btn-outline-danger .bi-bug,
body.theme-nature .btn-outline-danger .bi-bug,
.theme-nature .btn-outline-success .bi-lightbulb,
body.theme-nature .btn-outline-success .bi-lightbulb,
.theme-nature .btn-outline-info .bi-chat-heart,
body.theme-nature .btn-outline-info .bi-chat-heart {
  color: inherit !important; /* Let button color determine icon color */
  opacity: 1 !important;
  font-weight: 700 !important;
}

/* Ensure feedback module buttons have good contrast */
.theme-nature .feedback-quick-panel .btn-outline-danger,
body.theme-nature .feedback-quick-panel .btn-outline-danger {
  background-color: #ffffff !important; /* White background */
  border-color: #dc3545 !important; /* Red border */
  color: #dc3545 !important; /* Red text and icons */
}

.theme-nature .feedback-quick-panel .btn-outline-danger:hover,
body.theme-nature .feedback-quick-panel .btn-outline-danger:hover,
.theme-nature .feedback-quick-panel .btn-outline-danger.active,
body.theme-nature .feedback-quick-panel .btn-outline-danger.active {
  background-color: #dc3545 !important; /* Red background on hover/active */
  border-color: #dc3545 !important;
  color: #ffffff !important; /* White text and icons */
}

.theme-nature .feedback-quick-panel .btn-outline-success,
body.theme-nature .feedback-quick-panel .btn-outline-success {
  background-color: #ffffff !important; /* White background */
  border-color: #28a745 !important; /* Green border */
  color: #28a745 !important; /* Green text and icons */
}

.theme-nature .feedback-quick-panel .btn-outline-success:hover,
body.theme-nature .feedback-quick-panel .btn-outline-success:hover,
.theme-nature .feedback-quick-panel .btn-outline-success.active,
body.theme-nature .feedback-quick-panel .btn-outline-success.active {
  background-color: #28a745 !important; /* Green background on hover/active */
  border-color: #28a745 !important;
  color: #ffffff !important; /* White text and icons */
}

.theme-nature .feedback-quick-panel .btn-outline-info,
body.theme-nature .feedback-quick-panel .btn-outline-info {
  background-color: #ffffff !important; /* White background */
  border-color: #17a2b8 !important; /* Info blue border */
  color: #17a2b8 !important; /* Info blue text and icons */
}

.theme-nature .feedback-quick-panel .btn-outline-info:hover,
body.theme-nature .feedback-quick-panel .btn-outline-info:hover,
.theme-nature .feedback-quick-panel .btn-outline-info.active,
body.theme-nature .feedback-quick-panel .btn-outline-info.active {
  background-color: #17a2b8 !important; /* Info blue background on hover/active */
  border-color: #17a2b8 !important;
  color: #ffffff !important; /* White text and icons */
}

/* Fix the main feedback toggle button for nature theme */
.theme-nature .feedback-toggle-btn,
body.theme-nature .feedback-toggle-btn {
  background-color: #2e7d32 !important; /* Nature green background */
  border-color: #2e7d32 !important;
  color: #ffffff !important; /* White icon */
}

.theme-nature .feedback-toggle-btn:hover,
body.theme-nature .feedback-toggle-btn:hover {
  background-color: #1b5e20 !important; /* Darker green on hover */
  border-color: #1b5e20 !important;
  box-shadow: 0 0 20px rgba(46, 125, 50, 0.5) !important; /* Green glow */
}

/* Fix feedback panel header for nature theme */
.theme-nature .feedback-quick-panel .card-header.bg-primary,
body.theme-nature .feedback-quick-panel .card-header.bg-primary {
  background-color: #2e7d32 !important; /* Nature green */
  border-color: #2e7d32 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FITNESS PLAN BUILDER - NATURE THEME
   ═══════════════════════════════════════════════════════════════════════════ */
   
/* Hero section with nature green gradient */
.theme-nature .fitness-hero,
body.theme-nature .fitness-hero {
  background: linear-gradient(135deg, #2e7d32 0%, #4caf50 100%) !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.theme-nature .fitness-hero h1,
body.theme-nature .fitness-hero h1,
.theme-nature .fitness-hero p,
body.theme-nature .fitness-hero p {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Hero info cards with nature glass effect */
.theme-nature .hero-info-card,
body.theme-nature .hero-info-card {
  background: rgba(46, 125, 50, 0.2) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.theme-nature .hero-info-card:hover,
body.theme-nature .hero-info-card:hover {
  background: rgba(76, 175, 80, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.theme-nature .hero-info-card span,
body.theme-nature .hero-info-card span {
  color: #ffffff !important;
  font-weight: 600;
  opacity: 1 !important;
}

.theme-nature .hero-info-card i,
body.theme-nature .hero-info-card i {
  color: #e8f5e9 !important;
  opacity: 0.9 !important;
}

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

/* Main overview section with organic forest floor pattern */
.theme-nature .diary-truemetrics-overview,
body.theme-nature .diary-truemetrics-overview {
  background: linear-gradient(180deg, 
    rgba(232, 245, 233, 0.8) 0%, 
    rgba(220, 237, 200, 0.9) 50%, 
    rgba(197, 225, 165, 0.8) 100%) !important;
  border-top: 2px solid rgba(139, 195, 74, 0.4) !important;
  padding: 2.5rem 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Add subtle leaf pattern overlay */
.theme-nature .diary-truemetrics-overview::before,
body.theme-nature .diary-truemetrics-overview::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-image: radial-gradient(circle at 20% 50%, rgba(139, 195, 74, 0.05) 0%, transparent 50%),
                    radial-gradient(circle at 80% 80%, rgba(104, 159, 56, 0.05) 0%, transparent 50%),
                    radial-gradient(circle at 40% 80%, rgba(124, 179, 66, 0.05) 0%, transparent 50%) !important;
  pointer-events: none !important;
}

/* Section headers with forest green */
.theme-nature .diary-truemetrics-overview h5,
body.theme-nature .diary-truemetrics-overview h5 {
  color: #2e7d32 !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5) !important;
}

.theme-nature .diary-truemetrics-overview .text-muted,
body.theme-nature .diary-truemetrics-overview .text-muted {
  color: #558b2f !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}

/* Stat cards with wood-grain inspired design */
.theme-nature .diary-truemetrics-overview .stat-card,
body.theme-nature .diary-truemetrics-overview .stat-card {
  background: linear-gradient(145deg, 
    rgba(255, 255, 255, 0.9) 0%, 
    rgba(248, 246, 242, 0.95) 100%) !important;
  border: 2px solid rgba(139, 195, 74, 0.3) !important;
  border-radius: 1rem !important;
  padding: 1.75rem !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(104, 159, 56, 0.15),
              inset 0 1px 3px rgba(255, 255, 255, 0.8) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Wood grain texture effect */
.theme-nature .diary-truemetrics-overview .stat-card::before,
body.theme-nature .diary-truemetrics-overview .stat-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 200% !important;
  height: 100% !important;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 40px,
    rgba(168, 149, 109, 0.03) 40px,
    rgba(168, 149, 109, 0.03) 80px
  ) !important;
  pointer-events: none !important;
}

.theme-nature .diary-truemetrics-overview .stat-card:hover,
body.theme-nature .diary-truemetrics-overview .stat-card:hover {
  background: linear-gradient(145deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(250, 248, 244, 1) 100%) !important;
  border-color: rgba(104, 159, 56, 0.5) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 25px rgba(104, 159, 56, 0.25),
              inset 0 1px 3px rgba(255, 255, 255, 0.9) !important;
}

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

/* Stat icons with natural, earthy colors */
.theme-nature .diary-truemetrics-overview .stat-icon,
body.theme-nature .diary-truemetrics-overview .stat-icon {
  width: 3.5rem !important;
  height: 3.5rem !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.5rem !important;
  margin-bottom: 1rem !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
}

/* Different nature-inspired colors for different stat icons */
/* Foods Scored - Forest green */
.theme-nature .diary-truemetrics-overview .stat-icon[style*="background: rgba(40, 167, 69"],
body.theme-nature .diary-truemetrics-overview .stat-icon[style*="background: rgba(40, 167, 69"] {
  background: linear-gradient(135deg, #689f38 0%, #558b2f 100%) !important;
  color: #ffffff !important;
}

/* Meals Planned - Sky blue (like clear forest sky) */
.theme-nature .diary-truemetrics-overview .stat-icon[style*="background: rgba(78, 147, 232"],
body.theme-nature .diary-truemetrics-overview .stat-icon[style*="background: rgba(78, 147, 232"] {
  background: linear-gradient(135deg, #42a5f5 0%, #1e88e5 100%) !important;
  color: #ffffff !important;
}

/* Diary Entries - Autumn amber */
.theme-nature .diary-truemetrics-overview .stat-icon[style*="background: rgba(245, 158, 11"],
body.theme-nature .diary-truemetrics-overview .stat-icon[style*="background: rgba(245, 158, 11"] {
  background: linear-gradient(135deg, #ffa726 0%, #fb8c00 100%) !important;
  color: #ffffff !important;
}

/* Goals Progress - Fresh water teal */
.theme-nature .diary-truemetrics-overview .stat-icon[style*="background: rgba(14, 165, 233"],
body.theme-nature .diary-truemetrics-overview .stat-icon[style*="background: rgba(14, 165, 233"] {
  background: linear-gradient(135deg, #26a69a 0%, #00897b 100%) !important;
  color: #ffffff !important;
}

/* Hover effect for icons */
.theme-nature .diary-truemetrics-overview .stat-card:hover .stat-icon,
body.theme-nature .diary-truemetrics-overview .stat-card:hover .stat-icon {
  transform: scale(1.1) rotate(5deg) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Stat numbers and labels */
.theme-nature .diary-truemetrics-overview .stat-number,
body.theme-nature .diary-truemetrics-overview .stat-number {
  color: #1b5e20 !important;
  font-size: 2.25rem !important;
  font-weight: 800 !important;
  margin-bottom: 0.5rem !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  letter-spacing: -0.02em !important;
}

.theme-nature .diary-truemetrics-overview .stat-label,
body.theme-nature .diary-truemetrics-overview .stat-label {
  color: #558b2f !important;
  opacity: 1 !important;
  font-size: 0.875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   USER GREETING SECTION - NATURE THEME
   ═══════════════════════════════════════════════════════════════════════════ */

/* User greeting section with morning mist effect */
.theme-nature .user-greeting-section,
body.theme-nature .user-greeting-section {
  background: linear-gradient(to right, 
    rgba(241, 248, 233, 0.9) 0%, 
    rgba(220, 237, 200, 0.8) 50%, 
    rgba(241, 248, 233, 0.9) 100%) !important;
  border-bottom: 1px solid rgba(139, 195, 74, 0.3) !important;
  padding: 1.25rem 0 !important;
  box-shadow: 0 2px 8px rgba(139, 195, 74, 0.1) !important;
}

/* Welcome text styling */
.theme-nature .user-greeting .text-muted,
body.theme-nature .user-greeting .text-muted {
  color: #689f38 !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

.theme-nature .user-greeting strong,
body.theme-nature .user-greeting strong {
  color: #2e7d32 !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
}

/* Streak badge with campfire theme */
.theme-nature .streak-badge,
body.theme-nature .streak-badge {
  background: linear-gradient(135deg, #ff6f00 0%, #ff8f00 100%) !important;
  color: #ffffff !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 2rem !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(255, 111, 0, 0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
}

.theme-nature .streak-badge .bi-fire,
body.theme-nature .streak-badge .bi-fire {
  color: #ffeb3b !important;
  filter: drop-shadow(0 0 2px rgba(255, 235, 59, 0.5)) !important;
}

/* Nature-themed buttons */
.theme-nature .user-greeting-section .btn-outline-primary,
body.theme-nature .user-greeting-section .btn-outline-primary {
  border-color: #689f38 !important;
  color: #689f38 !important;
  background-color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 600 !important;
}

.theme-nature .user-greeting-section .btn-outline-primary:hover,
body.theme-nature .user-greeting-section .btn-outline-primary:hover {
  background-color: #689f38 !important;
  border-color: #689f38 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(104, 159, 56, 0.3) !important;
}

.theme-nature .user-greeting-section .btn-primary,
body.theme-nature .user-greeting-section .btn-primary {
  background: linear-gradient(135deg, #689f38 0%, #558b2f 100%) !important;
  border-color: #558b2f !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(104, 159, 56, 0.3) !important;
}

.theme-nature .user-greeting-section .btn-primary:hover,
body.theme-nature .user-greeting-section .btn-primary:hover {
  background: linear-gradient(135deg, #7cb342 0%, #689f38 100%) !important;
  border-color: #689f38 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(104, 159, 56, 0.4) !important;
}

/* Metric value standalone */
.theme-nature .metric-value,
body.theme-nature .metric-value {
  color: var(--tm-moss-500) !important;
  font-weight: 600 !important;
}