/* Custom styles for a modern, focused look - CONVERTED TO LIGHT MODE */
        body {
            font-family: 'Manrope', sans-serif; /* Changed typeface to Manrope */
            background-color: #F8F8F8; /* Light gray/near-white background */
            min-height: 100vh;
            color: #333333; /* Dark default text */
        }
        .container {
            max-width: 768px;
        }
#primary-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-in-out;
}

#primary-menu.show {
  display: flex !important;
  flex-direction: column; /* vertical layout on mobile */
  max-height: 500px;
}

@media (min-width: 768px) {
  #primary-menu {
    max-height: none;   /* disable the mobile animation limits */
    overflow: visible;
  }
}


        /* Light Card Style */
        .card-dark {
            background-color: #FFFFFF; /* White card background */
            border: 1px solid #E0E0E0; /* Light gray border */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Soft light shadow */
        }
        .log-item {
            transition: all 0.2s ease-in-out;
            background-color: #F5F5F5; /* Very light gray element background */
            border-color: #EEEEEE;
        }
        .log-item:hover {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
            transform: translateY(-1px);
        }
        /* Style for the custom unit toggle - Primary Accent: Vibrant Red/Magenta */
        .toggle-switch input:checked + .slider {
            background-color: #C5003D; /* Darker red for contrast */
        }
        .toggle-switch input:checked + .slider:before {
            transform: translateX(20px);
        }
        /* Overriding tailwind input focus for light theme */
        input:focus {
            --tw-ring-color: #C5003D !important;
            border-color: #C5003D !important;
        }
        /* Input field contrast refinement */
        input, select {
            background-color: #F5F5F5; 
            border-color: #D1D5DB; 
            color: #1A1A1A;
        }
        input[type="date"] {
            color-scheme: light;
        }

        /* --- Tooltip Styling --- */
        .tooltip-container {
          position: relative;
          display: inline-block;
          cursor: pointer;
          margin-left: 0.5rem;
        }
        .tooltip-icon {
          font-size: 0.75rem;
          font-style: italic;
          color: #1d4ed8; /* blue in light mode */
          transition: color 0.2s;
        }
        .tooltip-text {
          visibility: hidden;
          background-color: #1A1A1A;
          color: #FFFFFF;
          text-align: left;
          border-radius: 6px;
          padding: 8px 12px;
          position: absolute;
          z-index: 10;
          width: 250px;
          bottom: 125%;
          left: 50%;
          margin-left: -125px;
          opacity: 0;
          transition: opacity 0.3s;
          font-size: 0.8rem;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
        }
        .tooltip-container:hover .tooltip-text {
          visibility: visible;
          opacity: 1;
        }
        .tooltip-text::after {
          content: "";
          position: absolute;
          top: 100%;
          left: 50%;
          margin-left: -5px;
          border-width: 5px;
          border-style: solid;
          border-color: #1A1A1A transparent transparent transparent;
        }
        
        #message-box {
            width: 90%; max-width: 400px; left: 50%; transform: translateX(-50%);
            bottom: 20px; text-align: center; font-weight: bold;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); transition: all 0.3s ease-in-out;
        }
        
        .nav-link { transition: color 0.2s, border-bottom 0.2s; border-bottom: 2px solid transparent; color: #4B5563; }
        .nav-link:hover { color: #1A1A1A; }
        .nav-link.active { color: #C5003D; border-bottom: 2px solid #C5003D; font-weight: bold; }
        
        #summary-content .text-gray-400 { color: #6B7280; }
        #summary-content .text-gray-200 { color: #1A1A1A; }

        /* Visual Bar Indicator Styles */
        .bmi-indicator-dot { width: 12px; height: 12px; border: 2px solid white; border-radius: 50%; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); transition: all 0.3s; }
        .bmi-indicator-label {
            position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -10px);
            padding: 4px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: bold;
            white-space: nowrap; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            transition: opacity 0.2s; opacity: 0; pointer-events: none;
        }
        .bmi-indicator-wrapper:hover .bmi-indicator-label { opacity: 1; }
        .bmi-indicator-label::after {
            content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px;
            border-width: 5px; border-style: solid; border-color: #1A1A1A transparent transparent transparent;
        }
        
        /* Using a darker red for better contrast */
        :root { --accent-color: #C5003D; }
        .bg-bmi-fail { background-color: var(--accent-color); }
        .border-bmi-fail::after { border-color: var(--accent-color) transparent transparent transparent; }
        .text-accent { color: var(--accent-color); }
        .bg-accent { background-color: var(--accent-color); }
        .hover-bg-accent-dark:hover { background-color: #A30032; }
        .border-accent { border-color: var(--accent-color); }
        .ring-accent-50 { --tw-ring-color: rgba(197, 0, 61, 0.5); }
        
        /* Cookie Banner Styling */
        #cookie-banner {
            position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
            background-color: #1A1A1A; color: #FFFFFF; padding: 16px;
            box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);}

#cookie-banner.hidden { display: none; }

        /* --- Dark Mode Styles --- */
        body.dark-mode {
          background-color: #121212;
          color: #E5E7EB;
        }
        /* Cards, sections, milestones, history, etc */
        body.dark-mode .card-dark,
        body.dark-mode .bg-white,
        body.dark-mode #milestones-section,
        body.dark-mode #history-section,
        body.dark-mode #goal-section,
        body.dark-mode #about-section {
          background-color: #1E1E1E !important;
          border-color: #333 !important;
          color: #E5E7EB;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
        }
        /* Headers */
        body.dark-mode h1,
        body.dark-mode h2,
        body.dark-mode h3,
        body.dark-mode h4 {
          color: #F3F4F6;
        }
        /* Text */
        body.dark-mode p,
        body.dark-mode label,
        body.dark-mode span,
        body.dark-mode li {
          color: #D1D5DB;
        }
        /* Inputs, dropdowns */
        body.dark-mode input,
        body.dark-mode select,
        body.dark-mode textarea {
          background-color: #2C2C2C !important;
          border-color: #555 !important;
          color: #E5E7EB !important;
        }
        body.dark-mode input:focus,
        body.dark-mode select:focus,
        body.dark-mode textarea:focus {
          border-color: #FF3366 !important; /* brighter accent for dark mode */
          outline: none;
        }
        /* Nav links */
        body.dark-mode .nav-link {
          color: #9CA3AF;
        }
        body.dark-mode .nav-link.active {
          color: #FF3366;
          border-bottom-color: #FF3366;
        }
        /* Milestones badges */
        body.dark-mode #milestones-grid div {
          background-color: transparent;
        }
        body.dark-mode #milestones-grid .w-20.h-20 {
          border: 2px solid #444;
        }
        body.dark-mode #milestones-grid p {
          color: #D1D5DB;
        }
        /* Tooltip Dark Mode Overrides */
        body.dark-mode .tooltip-icon {
          color: #9CA3AF !important; /* neutral gray */
        }
        body.dark-mode .tooltip-text {
          background-color: #333 !important;
          color: #fff !important;
        }
        body.dark-mode .tooltip-text::after {
          border-color: #333 transparent transparent transparent !important;
        }
        /* Footer */
        body.dark-mode footer {
          border-color: #333;
          color: #9CA3AF;
        }
        /* Progress ring canvas container */
        body.dark-mode #progress-ring-container {
          background-color: #1E1E1E !important;
          border: 1px solid #333 !important;
        }
        /* History logs */body.dark-mode #logs-list > div {
          background-color: #1E1E1E !important;
          border: 1px solid #333 !important;
          color: #E5E7EB !important;
        }body.dark-mode #logs-list p,body.dark-mode #logs-list span {
          color: #D1D5DB !important;
        }/* Goal weight & target panels */body.dark-mode #goal-display,body.dark-mode #ideal-range-display {
          background-color: #1E1E1E !important;
          border: 1px solid #333 !important;
          color: #F3F4F6 !important;
        }body.dark-mode #ideal-range-bar-container {
          background-color: #2C2C2C !important;
        }body.dark-mode #ideal-range-labels {
          color: #9CA3AF !important;
        }
/* --- Fix intro + personal info + goal panels in dark mode --- */

/* Intro paragraph on each page move to dark mode ---*/
body.dark-mode #tracker-intro {
  background-color: #1E1E1E !important;
  border-color: #333 !important;
  color: #E5E7EB !important;
}

/* Metadata / Personal Info box */
body.dark-mode #metadata-display {
  background-color: #2A2A2A !important;
  border: 1px solid #444 !important;
  color: #E5E7EB !important;
}
body.dark-mode #metadata-display p,
body.dark-mode #metadata-display span {
  color: #D1D5DB !important;
}

/* Goal + Ideal BMI display cards */
body.dark-mode #goal-display,
body.dark-mode #ideal-range-display {
  background-color: #2A2A2A !important;
  border: 1px solid #444 !important;
  color: #E5E7EB !important;
}
body.dark-mode #goal-display p,
body.dark-mode #ideal-range-display p {
  color: #D1D5DB !important;
}
/* --- Accent color tweaks for dark mode --- */

/* Buttons (narrowed to primary actions) */
body.dark-mode .btn,
body.dark-mode .btn-primary,
body.dark-mode button.bg-accent,
body.dark-mode #submit-log-btn,
body.dark-mode #edit-metadata-btn,
body.dark-mode #edit-goal-btn,
body.dark-mode #set-goal-btn,
body.dark-mode #log-entry-btn,
body.dark-mode #export-btn,
body.dark-mode #import-btn,
body.dark-mode #delete-all-btn,
body.dark-mode #calc-button {
  background-color: #FF3366 !important;
  color: #fff !important;
  border: none;
}

body.dark-mode button:hover,
body.dark-mode .btn:hover {
  background-color: #FF4D7A !important;
}

/* Accent text (where you use .text-accent or red spans) */
body.dark-mode .text-accent {
  color: #FF3366 !important;
}

/* Green success (healthy BMI etc.) */
body.dark-mode .text-green-600,
body.dark-mode .bg-green-100 {
  color: #4ADE80 !important;   /* lime green */
  background-color: rgba(74, 222, 128, 0.2) !important;
}

/* Blue info (BMR, BMI numbers etc.) */
body.dark-mode .text-blue-600,
body.dark-mode .bg-blue-100 {
  color: #3B82F6 !important;   /* bright Tailwind blue */
  background-color: rgba(59, 130, 246, 0.2) !important;
}

/* Orange (streaks, warnings) */
body.dark-mode .text-orange-600,
body.dark-mode .bg-orange-100 {
  color: #F97316 !important;   /* bright orange */
  background-color: rgba(249, 115, 22, 0.2) !important;
}
/* Dark mode nav capsule style */
body.dark-mode nav {
  background-color: #1A1A1A; /* subtle dark bar */
  border-radius: 9999px; /* capsule */
  padding: 0.5rem 1rem;
}

body.dark-mode .nav-link {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

body.dark-mode .nav-link.active {
  background-color: #FF3366;
  color: #fff !important;
  border: none !important; /* remove bottom border highlight */
}
body.dark-mode .nav-link:hover {
  background-color: #FF4D7A;
  color: #fff !important;
}
/* Ensure confidence colors still show in dark mode */
body.dark-mode .text-green-600 { color: #4ADE80 !important; }  /* lime green */
body.dark-mode .text-yellow-600 { color: #FACC15 !important; } /* bright yellow */
body.dark-mode .text-red-600 { color: #F87171 !important; }    /* soft red */
body.dark-mode .text-gray-500 { color: #9CA3AF !important; }   /* muted gray */

/* Confidence indicator strip colors */
.confidence-high { color: #16A34A !important; }   /* Tailwind green-600 */
.confidence-medium { color: #FACC15 !important; } /* yellow */
.confidence-low { color: #EF4444 !important; }    /* red */
.confidence-verylow { color: #9CA3AF !important; }/* gray */
/* Add spacing between Day/Week/Month buttons */
#chart-view-toggle-container {
  gap: 0.5rem; /* 8px spacing */
}

/* --- Fix: tooltip icons should NOT be pink in dark mode --- */
body.dark-mode button.tooltip {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body.dark-mode button.tooltip svg,
body.dark-mode .tooltip-icon,
body.dark-mode .info-icon,
body.dark-mode .info-icon svg {
  color: #9CA3AF !important;   /* neutral gray */
  fill: #9CA3AF !important;
  background: transparent !important;
}

/* Prevent first-child margin collapse & give consistent top spacing */
header.container { padding-top: 2rem; }           /* mobile/tablet */
@media (min-width: 768px) {
  header.container { padding-top: 3rem; }         /* desktop */
}
/* Adds extra breathing room ONLY when FAQ is open */
.faq-item.active .faq-content {
  padding-top: 1.25rem; /* Same as pt-5 (~20px) */
}
/* ------------------------------------------------------------
   Fix: Force white text in "Our Mission" section across all browsers
   ------------------------------------------------------------ */
.bg-accent,
.bg-accent p,
.bg-accent h2,
.bg-accent span {
  color: #FFFFFF !important;
}

body.dark-mode .bg-accent,
body.dark-mode .bg-accent p,
body.dark-mode .bg-accent h2,
body.dark-mode .bg-accent span {
  color: #FFFFFF !important;
}

/* ------------------------------------------------------------
   Footer: dark mode overrides (matches your #tracker-intro pattern)
   ------------------------------------------------------------ */
body.dark-mode #site-footer {
  background-color: #0F1115 !important;  /* deep dark */
  color: #E5E7EB !important;             /* text-gray-200-ish */
  border-top-color: #2A2F36 !important;   /* softer top border */
}

/* Headings a touch brighter in dark mode */
body.dark-mode #site-footer h3 {
  color: #F3F4F6 !important;              /* near white */
}

/* Links: readable by default, pink on hover to match brand */
body.dark-mode #site-footer a {
  color: #E5E7EB !important;
}
body.dark-mode #site-footer a:hover {
  color: #EC4899 !important;              /* your accent pink */
}

/* Tidy up any muted text inside the footer columns */
body.dark-mode #site-footer p,
body.dark-mode #site-footer li,
body.dark-mode #site-footer .text-gray-700,
body.dark-mode #site-footer .text-gray-600 {
  color: #D1D5DB !important;              /* text-gray-300-ish */
}

/* If you use a light logo tile (bg-gray-200) in the footer, darken it here */
body.dark-mode #site-footer .bg-gray-200 {
  background-color: #1F2937 !important;   /* gray-800 */
  border-color: #2A2F36 !important;
}
/* ------------------------------------------------------------
   FORCE footer into dark mode (works no matter where .dark-mode is applied)
   ------------------------------------------------------------ */
html.dark-mode #site-footer,
body.dark-mode #site-footer,
.dark-mode ~ #site-footer,         /* if a sibling wrapper above footer has .dark-mode */
html.dark #site-footer {           /* in case you ever switch to Tailwind's .dark */
  background-color: #0F1115 !important;  /* deep dark */
  border-top-color: #2A2F36 !important;
  color: #E5E7EB !important;
}

/* Headings a touch brighter */
html.dark-mode #site-footer h3,
body.dark-mode #site-footer h3,
.dark-mode ~ #site-footer h3,
html.dark #site-footer h3 {
  color: #F3F4F6 !important;
}

/* Links readable by default, turn pink on hover */
html.dark-mode #site-footer a,
body.dark-mode #site-footer a,
.dark-mode ~ #site-footer a,
html.dark #site-footer a {
  color: #E5E7EB !important;
}
html.dark-mode #site-footer a:hover,
body.dark-mode #site-footer a:hover,
.dark-mode ~ #site-footer a:hover,
html.dark #site-footer a:hover {
  color: #EC4899 !important; /* your accent pink */
}

/* Normalize muted text inside footer in dark mode */
html.dark-mode #site-footer p,
body.dark-mode #site-footer p,
.dark-mode ~ #site-footer p,
html.dark #site-footer p,
html.dark-mode #site-footer li,
body.dark-mode #site-footer li,
.dark-mode ~ #site-footer li,
html.dark #site-footer li {
  color: #D1D5DB !important;
}

/* If you use a light tile in the logo block, darken it */
html.dark-mode #site-footer .bg-gray-200,
body.dark-mode #site-footer .bg-gray-200,
.dark-mode ~ #site-footer .bg-gray-200,
html.dark #site-footer .bg-gray-200 {
  background-color: #1F2937 !important; /* gray-800 */
  border-color: #2A2F36 !important;
}
/* ------------------------------------------------------------
   Footer: improve text contrast in LIGHT mode (esp. mobile)
   ------------------------------------------------------------ */
#site-footer {
  color: #1F2937 !important; /* text-gray-800 for strong contrast */
}

/* Make sure smaller text and muted lines also remain readable */
#site-footer p,
#site-footer li,
#site-footer a {
  color: #1F2937 !important;
}

/* Keep hover accent color for consistency */
#site-footer a:hover {
  color: #EC4899 !important; /* brand pink accent */
}
/* Match header APP logo to footer in dark mode */
body.dark-mode header .bg-gray-200 {
  background-color: #1F2937 !important; /* Tailwind gray-800 */
  border-color: #2A2F36 !important;
}
/* ------------------------------------------------------------
   Fix: Improve text contrast on ABOUT page in light mode (esp. mobile)
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   Improve text contrast on ABOUT page (light mode)
   (excludes accent cards like mission block)
   ------------------------------------------------------------ */
.about-section p:not(.bg-accent *),
.about-section li:not(.bg-accent *),
.about-section h2:not(.bg-accent *),
.about-section h3:not(.bg-accent *) {
  color: #1A1A1A !important; /* good dark text for light mode */
}

/* Headings a touch stronger */
.about-section h2:not(.bg-accent *),
.about-section h3:not(.bg-accent *) {
  color: #111827 !important;
}


.about-section .text-gray-600,
.about-section .text-gray-700 {
  color: #1A1A1A !important;
}

/* Keep dark mode untouched */
body.dark-mode .about-section p,
body.dark-mode .about-section h2,
body.dark-mode .about-section h3,
body.dark-mode .about-section a,
body.dark-mode .about-section li {
  color: #E5E7EB !important;
}

/* Preserve header colors */
header h1,
header h2 {
  color: #111827 !important;
}
body.dark-mode header h1,
body.dark-mode header h2 {
  color: #F3F4F6 !important;
}

/* Restore tracker intro background and text for both modes */
#tracker-intro {
  background-color: #F9FAFB !important; /* very light gray */
  color: #1A1A1A !important;
  border: 1px solid #E5E7EB !important;
}
body.dark-mode #tracker-intro {
  background-color: #1E1E1E !important;
  color: #E5E7EB !important;
  border-color: #333 !important;
}

/* ------------------------------------------------------------
   FAQ section appearance – fixes light/dark mode consistency
   ------------------------------------------------------------ */
.faq-item {
  background-color: #FFFFFF;              /* light mode default */
  border: 1px solid #E0E0E0;
  color: #1A1A1A;
  transition: all 0.3s ease;
}

/* Dark mode overrides for FAQ */
body.dark-mode .faq-item {
  background-color: #1E1E1E !important;
  border-color: #333 !important;
  color: #E5E7EB !important;
}

body.dark-mode .faq-toggle {
  color: #E5E7EB !important;
}

body.dark-mode .faq-icon {
  color: #9CA3AF !important;
}

body.dark-mode .faq-content {
  color: #D1D5DB !important;
}
/* Fix: Ensure readable FAQ text in light mode (mobile especially) */
.faq-toggle,
.faq-content {
  color: #1A1A1A !important; /* Strong readable text */
}

.faq-icon {
  color: #4B5563 !important; /* medium gray for contrast */
}

.faq-item p {
  color: #1A1A1A !important; /* Ensure paragraphs are readable too */
}
/* ------------------------------------------------------------
   Fix Safari text color for .bg-accent blocks (mission section)
   ------------------------------------------------------------ */
.bg-accent,
.bg-accent * {
  color: #FFFFFF !important;
}
/* Splash Screen Styles */
.splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ec4899; /* Your pink accent color */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Make sure it's on top */
  transition: opacity 0.5s ease-in-out;
}

.splash-screen.hide {
  opacity: 0;
  visibility: hidden;
}

.splash-screen img.splash-icon {
  width: 80px; /* Adjust size as per your preference */
  height: 80px;
  margin-bottom: 10px;
}
.faq-content {
  color: white !important;
}