/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  ul {
    margin-left: 1.5em;
  }

  main:focus {
    outline: 3px solid purple; /* or whatever color you want */
  }
  body {
    /* A pronounced green gradient background */
    background: linear-gradient(to bottom, #c3ffc3, #ecffec);
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    font-size: 18px; /* Minimum font size of 18px */
    overflow-x: hidden; /* Prevent horizontal overflow */
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  
  /* Focus Styles for Interactive Elements */
  a:focus,   input:focus {
    outline: 3px solid purple;
  }
  button:focus{
    outline: 4px solid purple;
    outline-offset: 4px;       /* space between the select and its outline */
  }
  .filter-dropdown:focus{
    outline: 3px solid rgb(255, 254, 255);
    outline-offset: 4px;       /* space between the select and its outline */
  }



  .leaflet-container:focus {
    outline: 6px solid purple;      /* your chosen focus style */
             
  }
  /* style the SR buttons (won’t show for sighted, but nicer if you un‑hide for debug) */
#srListWrapper button {
  display: block;
  width: 100%;
  margin: 4px 0;
  padding: 8px;
  background-color: #004d1a;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
#srListWrapper button:focus {
  outline: 2px solid purple;
  outline-offset: 2px;
}

#srListWrapper {
  position: relative;  /* establish a stacking context */
  z-index: 1000;       /* or whatever high value you need */
}

  /* Header Styles */
  #header {
    background: #fff;  /* White background for the banner */
    padding: 20px;
    text-align: center;
  }
  
  #headerImage {
    max-width: 130px;    /* never exceed 120px */
    width: 100%;         /* otherwise fill its container */
    height: auto;
  }
  
  #headerText {
    margin: 10px 0;
    font-size: 2.0rem;
    color:#0b3f1a;
  }
  
  .tabs-nav-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }
  
  
  
  /* Filter Section */
  .filter-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 15px;
    background-color: #165c2a;  /* Dark green background */
    color: #fff;
  }
  
  .filter-label {
    font-weight: bold;
    font-size: 16px;
    margin-right: 5px;
  }
  
  .choices {
    width: 100%;
    max-width: 400px; /* optional max */
    min-width: 150px; /* prevent too small */
    margin: 0;
    position: relative;
    z-index: 9000;
  }

/* Wrapper around dropdown */
.focus-wrapper {
  display: inline-block;
  padding: 3px; /* space around dropdown */
  background-color: transparent;
  border: 2px solid transparent; /* Start invisible */
  border-radius: 6px;
  transition: border 0.2s;
  width:300px;
}

/* When tabbed into dropdown, activate wrapper */
.focus-wrapper:focus-within {
  border: 2px solid white; /* White solid outline */
}

.choices__inner {
  width: 100%;
  max-width: 400px;
  min-width: 50px;
  min-height: 50px;
  padding: 6px 10px;
  font-size: 1.3em; /* 🔥 Flexible font size */
  background-color: white;
  color: #000;
  border: 2px solid #333;
  border-radius: 4px;
  box-sizing: border-box;
  line-height: 1.4em;
}

/* For smaller screens or huge zoom, make text even bigger */
@media (max-width: 800px) {
  .choices__inner {
    font-size: 1.3em; /* 🔥 Grow text when zoomed/small screen */
  }
}

@media (max-width: 500px) {
  .choices__inner {
    font-size: 1.3em; /* 🔥 Super big text on tiny screens or big zoom */
  }
}



/* Focus outline */
.choices__inner:focus {
  outline: 4px solid white;
  outline-offset: 4px;
}

/* Dropdown arrow (centered) */
.choices[data-type*="select-one"]::after {
  content: "";
  position: absolute;
  top: 60%;
  right: 12px;
  width: 0;
  height: 0;
  pointer-events: none;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #333;
  transform: translateY(-50%);
}

/* Open dropdown background */
.choices__list--dropdown {
  background-color: white;
  border: 2px solid #333;
}

/* Country headers (optgroup labels) inside open dropdown */
.choices__list--dropdown .choices__heading {
  font-size: 0.8em; /* Bigger */
  font-weight: 900; /* Super bold */
  text-transform: uppercase; /* Uppercase */
  padding: 14px 12px;
  text-align: left;
  letter-spacing: 1.2px;
  pointer-events: none;
  border-bottom: 2px solid #555; /* Bottom separator */
}

/* Options inside open dropdown */
.choices__list--dropdown .choices__item--selectable {
  background-color: white;
  color: #000;
  padding: 6px 10px;
  font-size: 1em; /* Normal size */
  white-space: normal; /* Allow word wrapping */
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.2em;
}

/* Highlighted option */
.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: #0078D4 !important;
  color: white !important;
}

/* Selected option */
.choices__list--dropdown .choices__item--selectable.is-selected {
  background-color: #0078D4;
  color: white;
}





  
  
  /* Map Container */
  #map-container {
    margin: 0px 0;
    width: 100%;  /* Use almost the entire width */
  }
  
  #map {
    width: 100%;
    height: 400px;
    background-color: #ddd;
  }


  /* Main Content: Collage Background & Container */
  .collage-background {
    /* Use the same green gradient behind the cards */
    background: linear-gradient(to bottom, #c3ffc3, #ecffec);
    padding: 20px 0;
  }
  
  .collage-container {
    width: 100%;   /* Full available width */
    margin: 0;     /* Remove lateral margins */
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  
  /* Card Sections & Cards */
  .card-section {
    width: 100%;
    margin-bottom: 20px;
    margin-left:5px;
    margin-right:5px;
    padding: 15px;
    /* Remove background and borders so they blend with the collage background */
    background: transparent;
    border: none;
    /* Ensure sufficient contrast with text */
    color: #000;
  }
  
  /* Preserve horizontal two-column card layout */
  .card {
    display: flex;
  }
  
/* keep your existing gap between items */
.content-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.card-section:focus {
  outline: 2px solid purple;
}

/* reverse the order as before */
.card.reverse .content-container {
  flex-direction: row-reverse;
}

.card.reverse .content-container {
  flex-direction: row-reverse;
  padding-inline-end: 15px;  /* adds 15px inside space at the right edge */
}
  /* The text column */
  .text {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  /* Card Title placed at the top of the text column */
  .card-title {
    margin-bottom: 10px;
    font-size: 1.5em;
    /* Use a dark blue that should contrast well with the green */
    color: #00509e;
  }
  
  .image {
    flex: 0 0 auto;
    width: 350px;
    height: 250px;
    overflow: hidden;
    border-radius: 15px;
    display: flex;               /* Centering support */
    align-items: center;
    justify-content: center;
    
  }
  
  .image img {
    width: 100%;
    height: 100%;
    object-fit: contain;         /* 🔁 changed from cover to contain */
    border-radius: 15px;
  }

  @media (max-width: 600px) {
    .card .content-container,
    .card.reverse .content-container {
      flex-direction: column !important;
      align-items: flex-start;
    }
  
    .image {
      width: 100% !important;
      height: auto !important;
    }
  
    .image img {
      width: 100%;
      height: auto;
    }
  }
  
  
/* Footer Container */
#bottom-footer {
    display: flex;
    flex-direction: column; /* Stack images group above text links group */
    align-items: center;    /* Center everything horizontally */
    justify-content: center;
    gap: 10px;             /* Space between the images row and the text links row */
    background: #fff;      /* White background */
    padding: 15px;
  }
  
  /* Footer Images Container:
     Display images side by side (in a row) */
  .footer-images {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;             /* Space between images */
    justify-content: center;
    align-items: center;
    height: auto;
  }

  
  /* Ensure images are displayed side by side without distortion */
  .footer-images img {
    width: 10rem;           /* Adjust size to your liking */
    height: auto;          /* Preserve aspect ratio */
    object-fit: contain;
    display: block;
  }
  
  @media (max-width: 600px) {
  
    /* 📦 Footer images should wrap and scale */
    .footer-images {
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }
  
    .footer-images img {
      max-width: 100%;
      width: auto;
      height: auto;
      flex: 1 1 100px;
    }
  }
  
  /* Footer Text Links Container */
  .footer-text-links {
    text-align: center;    /* Center any text links horizontally */
  }
  
  /* Accessibility Link: black, underlined, bold */
  .footer-accessibility {
    color: #000;
    text-decoration: underline;
    font-weight: bold;
  }
  .footer-images ul,
.footer-text-links ul {
  list-style: none;      /* Removes the bullets */
  margin: 0;             /* Removes default margin */
  padding: 0;            /* Removes default padding */
  display: flex;         /* Places items side by side */
  align-items: center;   /* Vertically align items if needed */
}

.footer-images li,
.footer-text-links li {
  margin-right: 1rem;    /* Spacing between list items */
}

.footer-images a:focus,
.footer-images a:focus-visible {
  outline: 2px solid purple;
  outline-offset: 4px;
  
  display: inline-block;
}



/* Cookie Button */
#cookieButton {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1000;
  padding: 8px;
}

#cookieButton:focus {
  outline: 2px solid purple;
}

#cookieButton img {
  width: 2rem;
  height: 2rem;
}

/* Sidebar container */
#cookieSidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 350px;
  max-width: 100%;
  height: 100vh;
  background: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  padding: 20px;
  z-index: 1001;
  font-size: 1rem;
  animation: slideIn 0.3s ease-out;
}

/* Content inside sidebar */
.cookie-sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}

/* Cookie info rows */
.cookie-row {
  font-size: 0.95em;
}

/* Bottom Close button */
.cookie-bottom-close {
  align-self: flex-start;
  margin-top: 2em;
  padding: 0.75em 1.5em;
  font-size: 1rem;
  background-color: #006747;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.cookie-bottom-close:focus {
  outline: 3px solid purple;
  outline-offset: 4px;       /* space between the select and its outline */
}

/* Sidebar entrance animation */
@keyframes slideIn {
  from {
    right: -400px;
    opacity: 0;
  }
  to {
    right: 0;
    opacity: 1;
  }
}

/* Responsive for narrow screens */
@media (max-width: 350px) {
  #cookieSidebar {
    width: 100%;
  }
}

/* Default: map + charts side by side */
#bottomPanel {
  display: flex;
  flex-wrap: nowrap;      /* never stack, side-by-side */
  gap: 1rem;
}

/* Once the viewport is too narrow (or zoomed)… */
@media (max-width: 900px) {
  #bottomPanel {
    flex-wrap: wrap;      /* now allow stacking */
  }
  #bottomLeftPanel,
  #widgetsAreaDataAnalysis {
    flex: 1 1 100%;       /* full width when wrapped */
    min-width: auto;
  }
}

/* 2) Give each side a “preferred” size but let it flex/shrink */
#bottomLeftPanel {
  flex: 0 0 40%;       /* ideal 40% for the map */
  min-width: 280px;    /* won’t shrink the map below this */
}

#widgetsAreaDataAnalysis {
  flex: 1 1 55%;       /* take the rest for charts, but shrink/grow */
  min-width: 280px;    /* won’t collapse below this */
}

/* 3) (Optional) At very narrow widths, stack completely */
@media (max-width: 800px) {
  #bottomPanel {
    flex-direction: column;
  }
  #bottomLeftPanel,
  #widgetsAreaDataAnalysis {
    width: 100%;
  }
}



  /* Accessibility Page Styles (Start Here) */
/************************************************************/

.skip-link {
  position: absolute;
  top: -60px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 1000;
  text-decoration: none;
  font-weight: bold;
  transition: top 0.2s ease-in-out;
}

.skip-link:focus {
  top: 0;
}

/* Accessibility Page Header Styles */
.accessibility-header {
    background-color: #f8f9fa; /* Match header background color */
    color: #343a40; /* Match header text color */
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
  }
  
  /* Shared Base Styles for Both Buttons */
.accessibility-main-button,
.tab-main-button {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: #0B3F1A;
  color: white;
  padding: 10px 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  z-index: 1000;
}

/* Medium screen: shrink slightly */
@media (max-width: 1024px) {
  .accessibility-main-button,
  .tab-main-button {
    font-size: 13px;
    padding: 8px 14px;
  }
}

/* Small screen or high zoom (400% of 1280px ≈ 320px) */
@media (max-width: 480px) {
  .accessibility-main-button,
  .tab-main-button {
    font-size: 12px;
    padding: 6px 10px;
    top: 10px;
    right: 10px;
  }
}

  
/* Imperial-Inspired Accessibility Styles */
.accessibility-content {
  font-family: Arial, sans-serif;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #000;
  background-color: #fff;
  padding: 2rem;
  max-width: auto;
  margin: auto;
  background: linear-gradient(to bottom, #c3ffc3, #ecffec);
}

.accessibility-content h2 {
  font-size: 2rem;
  color: #003e74;
  border-bottom: 2px solid #003e74;
  padding-bottom: 0.5rem;
  margin-top: 2rem;
}

.accessibility-content h3 {
  font-size: 1.5rem;
  color: #003e74;
  margin-top: 1.5rem;
}

.accessibility-content h4 {
  font-size: 1.25rem;
  color: #003e74;
  margin-top: 1.25rem;
}

.accessibility-content a {
  color: #005ea5;
  text-decoration: underline;
}

.accessibility-content ul {
  margin-left: 1.5rem;
  list-style-type: disc;
}

  
    /* Tabs */
/************************************************************/

#useCaseDisplay {
  width: 100%;
  background-color: #165c2a; /* forest green */
  color: #fff;
  text-align: center;
  padding: 10px 20px;
  margin: 0;
}

.useCase-label {
  font-size: 1.25rem; /* slightly smaller than h1 */
  font-weight: bold;
  margin: 0;
}

@media (max-width: 600px) {
  #useCaseDisplay {
    padding: 8px 10px;
  }

  .useCase-label {
    font-size: 1rem;
  }
}

/* Accessibility Page Main Button Styles */
.tabs-main-button {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: #0B3F1A; /* Button color */
  color: white; /* Button text color */
  padding: 10px 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
}
.tabs-container {
  width: 100%;
  padding: 20px 0;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  align-items: center; /* center content horizontally */
  gap: 15px;
  border-bottom: 1px solid #ccc;
}

.tabs-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ————— Tabs Bar Container ————— */
#tabsAndAlert {
  display: flex;
  flex-wrap: wrap;       /* allow buttons to wrap on small screens */
  justify-content: center;
  align-items: stretch;  /* make all buttons match the tallest */
  gap: 10px;             /* space between tabs */
  background: #fff;
  padding: 20px 0;
  overflow-x: hidden;    /* no horizontal scroll */
  overflow-y: visible;   /* let alert spill below */
}

/* ————— Tab Buttons ————— */
#tabsAndAlert .tabButton {
  flex: 0 0 200px;       /* fixed 160px width */
  width: 180px;
  text-align: center;
  padding: 10px 16px;    /* vertical & horizontal padding */
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  border-radius: 6px;
  position: relative;
  top: 2px;              /* visually lift slightly */
  transition: background-color 0.3s ease, border 0.3s ease;

  /* base colors */
  background-color: #f9f9f9;
  border: 2px solid #000;
  color: #000;
}

/* ————— Selected Tab ————— */
#tabsAndAlert .tabButton[aria-selected="true"] {
  background-color: #003166;
  border-color: #003166;
  color: #fff;
  z-index: 1;
}

/* ————— Focused Tab ————— */
#tabsAndAlert .tabButton:focus {
  outline: 3px solid purple;
  outline-offset: 2px;
}


/* Alert container fixed on top */
.alert-container {
  position: fixed;
  top: 80px; /* Start below header */
  right: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
}

/* Alert box styling */
.alert-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #d32f2f; /* Red for errors */
  color: #fff; /* High contrast text */
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  font-size: 1rem;
  line-height: 1.4;
}

/* Optional alert variants */
.alert-box.alert-warning {
  background: #f9a825; /* Yellow, ensure sufficient contrast */
  color: #000;
}

.alert-box.alert-success {
  background: #388e3c; /* Green */
}

/* Close button styling */
.close-alert-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  margin-left: 10px;
}

.close-alert-btn:focus {
  outline: 3px solid #fff; /* Visible focus for keyboard */
  outline-offset: 2px;
}


.tabContent {
  background: linear-gradient(to bottom, #c3ffc3, #ecffec);
  padding: 20px;
}



.combined-accessible-layout {
  display: flex;
  flex-wrap: nowrap;                     /* no wrapping */  
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
}                                          /* :contentReference[oaicite:0]{index=0}​:contentReference[oaicite:1]{index=1} */

/* Keep all categories side-by-side, never wrapping */
.categories-group {
  display: flex;
  flex-wrap: wrap;    /* ← no wrapping into new rows */
  gap: 30px;
  overflow-x: auto;    /* if you have too many columns, enable horizontal scroll */
}

/* Base layout for every category */
.category-container {
  flex: 0 0 auto;      /* size to its content */
}

/* Column of checkboxes */
.checkboxes-container {
  display: flex;
  padding:4px;
  flex-direction: column;
  gap: 0.5rem;
}

/* Only categories with >5 items get a vertical scrollbar */
.overflow-category {
  max-height: 16rem;    /* height of ~5 items; tweak as needed */
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.5rem;/* avoid scrollbar covering content */
}

/* Optional: style the scrollbar in WebKit */
.overflow-category::-webkit-scrollbar {
  width: 8px;
}
.overflow-category::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 4px;
}


.custom-graph-wrapper {
  flex: 0 0 300px;                       /* fixed panel width */
  min-width: 250px;
}

/* ─── keep your existing fieldset styles ─────────────────────────────────── */

.category-container {
  flex: 1 1 180px;
  min-width: 180px;
  padding: 10px 0;
  border: none;
}

.category-container legend {
  font-size: 1.3em;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
  margin-bottom: 10px;
}

/* ─── reset the container so there’s no extra padding/margin ────────────── */



/* ─── make each checkbox+label a two‑column grid ───────────────────────── */

.sub-category {
  display: grid;
  /* first column sized to the box, second takes the rest */
  grid-template-columns: max-content 1fr;
  column-gap: 0.5em;
  align-items: start;    /* top‑align the checkbox with the first line of text */
}

/* ─── zero out any funky flex rules & nudge the box into perfect vertical center ── */

.sub-category input[type="checkbox"] {
  /* the grid’s first column is already max-content, so no flex‑shrink needed */
  margin: 0.5em 0 0 0;    /* tweak this to taste for perfect centering */
  justify-self: start;    /* lock it at the left edge of column one */
}

/* ─── ensure labels wrap under themselves, no extra margins ─────────────── */

.sub-category label {
  margin: 0;
  line-height: 1.4;       /* control your wrap height if you like */
}



.toggle-more {
  background: none;           /* no background */
  border: none;               /* no border */
  padding: 0;                 /* reset default padding */
  margin: 0;                  /* reset default margin */
  color: inherit;             /* inherit text color */
  font: inherit;              /* inherit font family/size */
  cursor: pointer;            /* pointer on hover */
}

/* Optional: subtle hover/focus feedback */
.toggle-more:hover,
.toggle-more:focus {
  text-decoration: underline;
}

/* Visible focus outline for accessibility */
.toggle-more:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Hide visually but keep in AT tree */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}



#dateRangeContainer + #combinedContainer {
  margin-top: 20px;
}

.custom-graph-container {
  display: flex;
  flex-direction: column;
  gap: 12px;              /* space between each dropdown & the button */
}

.custom-graph-container h3 {
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 15px;
  text-decoration: underline;
}

/* Dropdowns */
.dropdown-container {
  display: flex;
  align-items: center;
  gap: 10px;              /* label on left, dropdown on right */
}

.dropdown-container label {
  font-weight: bold;
  font-size: 1em;
  display: block;
  margin-bottom: 5px;
}

.data-dropdown {
  width: 225px;
  padding: 8px 10px;
  font-size: 1em; /* Normal */
  border: 2px solid #333;
  border-radius: 4px;
  background-color: white;
  color: #000;
}

/* 🔥 When screen shrinks (after zoom ~250%) */
@media (max-width: 1000px) {
  .data-dropdown {
    font-size: 0.5em;
  }
}

/* 🔥 When screen is very small (after zoom ~400%) */
@media (max-width: 600px) {
  .data-dropdown {
    font-size: 0.4em;
  }
}

.data-dropdown:focus {
  outline: 2px solid purple;
  outline-offset: 2px;
}

/* Graph button */
.button-container {
  margin-top: 15px;
}

#customGraphBtn {
  width: 100%;
  background-color: #004d1a;
  color: white;
  font-weight: bold;
  font-size: 1em;
  border: none;
  border-radius: 4px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#customGraphBtn:hover {
  background-color: #006400;
}

#customGraphBtn:focus {
  outline: 2px solid #4b0082;
  outline-offset: 2px;
}

/* Responsive */
@media (max-width: 1024px) {
  .combined-accessible-layout {
    flex-direction: column;
  }

  
  .custom-graph-wrapper {
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    flex-grow: 1;
    width: 100%;
  }
}

.map2-container {
  width: 100%;
  height: 400px;
  margin-top: 20px;
  border: 1px solid #ccc;
}

/* ————— Date Pickers ————— */
input[type="date"] {
  padding: 6px 10px;
  font-size: 1rem;
  border: 2px solid #333;
  border-radius: 4px;
  background-color: #fff;
  color: #000;
  min-width: 140px;
}

input[type="date"]:focus {
  outline: 2px solid #4b0082;
  outline-offset: 2px;
}

/* ————— Toolbar Buttons ————— */
#searchButton,
.export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;                  /* space between icon/text */
  padding: 8px 16px;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  background-color: #004d1a; /* dark green */
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#searchButton span {         /* if you’re using the 🔍 inside a span */
  font-size: 1.2em;
}

#searchButton:hover,
.export-btn:hover {
  background-color: #006400; /* lighter green on hover */
}

#searchButton:focus,
.export-btn:focus {
  outline: 2px solid purple;
  outline-offset: 2px;       /* space between the select and its outline */
}

.controls-inner {
  display: flex;
  flex-wrap: wrap;         /* allow wrap on narrow screens */
  align-items: center;     /* vertically center dates & buttons */
  justify-content: space-between;
  gap: 2rem;               /* reasonable gutter */
  width: 100%;
}

#dateRangeContainer button,
#dateRangeContainer input[type="date"] {
  margin: 0;                 /* reset defaults so gap works */
}

.date-controls {
  display: flex;
  flex-wrap: wrap;        /* allow items to break onto new lines */
  align-items: baseline;  /* line up date inputs and button on their text baseline */
  gap: 1rem;              /* space between each control */
}

.separator {
  border: none;               /* remove the default 1px border */
  height: 6px;                /* “fatness” of the line */
  background-color: #4a5568;  /* pick any color you like */
  margin: 2rem 0;             /* vertical spacing around it */
  border-radius: 3px;         /* soften the edges */
}

/* 1) Distinct border & background */
#subcategoryInfo {
  background-color: #fafafa;      /* light off‑white background */
  border: 1px solid #ccc;        /* thin gray border */
  border-radius: 4px;            /* slightly rounded corners */
  padding: 1em;                  /* inner breathing room */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* subtle lift */
}

/* 2) Limit height and enable scrolling once content grows */
#subcategoryInfo {
  max-height: 200px;             /* adjust as needed */
  overflow-y: auto;              /* vertical scrollbar when content overflows */
}

/* Optional: style the scrollbar (WebKit browsers) */
#subcategoryInfo::-webkit-scrollbar {
  width: 8px;
}
#subcategoryInfo::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 4px;
}
#subcategoryInfo::-webkit-scrollbar-track {
  background-color: transparent;
}


/* Override the injected <h3> sizing & spacing */
#subcategoryInfo h3 {
  font-size: 20px !important;
  font-weight: bold !important;
  margin-bottom: 5px !important;
}

/* Override the injected <hr> margins & appearance */
#subcategoryInfo hr {
  margin: 5px 0 !important;
  border: none !important;
  height: 2px !important;
  background-color: #000000 !important;
}

/* Override the injected <p> sizing & spacing */
#subcategoryInfo p {
  font-size: 18px !important;
  line-height: 1.4 !important;
  margin-bottom: 5px !important;
}



#ndvi-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 10px;
  border-radius: 8px;
  font-size: 14px;
  margin-top: 10px;
}

#ndvi-legend span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  vertical-align: middle;
}

/* ===== Toast Base Styles ===== */
#toastExport {
  /* Center on screen */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  display: none;               /* JS will toggle to block */
  z-index: 10000;

  /* High‑contrast “error” palette */
  background-color: #c53030;   /* strong red (WCAG AA with white text) */
  color: #ffffff;              /* pure white text */
  border: 2px solid #9b2c2c;   /* darker red border for definition */
  border-radius: 6px;

  /* Bigger spacing & typography */
  padding: 1rem 2rem;
  min-width: 260px;
  text-align: center;
  font-size: 1.25rem;          /* ~20px */
  line-height: 1.5;            /* more breathing room */

  /* Depth */
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);

  /* Fade/scale transition */
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* When JS sets display:block, animate in */
#toastExport[style*="display: block"] {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}



/* Remove any hard coding on gauge canvases */
.gauge-widget canvas {
  width: 100%  !important;
  height: 100% !important;
}
:root {
  /* ─── Common Vars ───────────────────────────────────────────────────────── */
  --chart-width:           100%;           /* default width for all canvases */
  --chart-height: 600px;         /* default height */

  /* ─── Scatter Plot ───────────────────────────────────────────────────────── */
  --scatter-point-color:   rgba(75,192,192,0.6);
  --scatter-title-font:    1rem bold;
  --scatter-axis-title:    0.9rem bold;
  --scatter-tick-font:     0.8rem;

  /* ─── Line Chart ─────────────────────────────────────────────────────────── */
  --line-fill-color:       rgba(76,175,80,0.3);
  --line-stroke-color:     rgba(76,175,80,1);

  /* ─── Bar Chart ──────────────────────────────────────────────────────────── */
  --bar-fill-color:        rgba(255,159,64,0.7);
  --bar-stroke-color:      rgba(255,159,64,1);

  /* ─── Gauge ──────────────────────────────────────────────────────────────── */
  --gauge-bg-color:        #e0e0e0;
  --gauge-fill-color:      rgba(76,175,80,1);
  --gauge-text-color:      #333;
  --gauge-text-font:       1.5rem sans-serif;
}

/* ─── Scatter Plot Canvas ────────────────────────────────────────────────── */
.scatter-chart-widget {
  width: 100%;
  max-width: 1100px;
  height: min(70vw, 600px);  /* Consistent with other charts */
  margin: 1rem auto;
  padding-right: 0.1rem;
  box-sizing: border-box;
  position: relative;
}

.scatter-chart-widget canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* 1) Center the entire region’s content */
.fit-options-region {
  text-align: center;
}

/* 2) Center & bold the “Select a fit” heading */
.fit-options-title {
  display: block;          /* ensure it’s a block so text-align works */
  font-weight: bold;
  margin-bottom: 0.5rem;
  text-align: center;
}

/* 3) Switch to a single‐column list below the title */
.fit-options {
  display: flex;
  flex-direction: column;  /* stack vertically */
  align-items: flex-start; /* if you want the checkboxes left‐aligned under the title */
  /* align-items: center;  use this instead if you’d prefer each choice centered */
  gap: 0.5rem;             /* space between each option */
  width: max-content;      /* shrink to fit the contents */
  margin: 0 auto;          /* center that block in the region */
}

/* 4) (Optional) tighten up each label’s spacing */
.fit-options .sub-category label {
  margin: 0;
}

.line-plot-widget,
.bar-chart-widget
 {
  width: 100%;
  max-width: 1100px;
  height: min(70vw, 600px); /* Adjusts with screen width but doesn't get too tall */
  margin: 1rem auto;
  padding-right: 0.1rem;
  box-sizing: border-box;
  position: relative;
}

.line-plot-widget canvas,
.bar-chart-widget canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}



.gauge-widget {
  width: 100%;
  max-width: 900px;
  margin: 1rem auto;
  padding-right: 2rem; /* prevents overlap with cookie icon */
  box-sizing: border-box;
}






.gauge-widget canvas {
  width:  var(--chart-width)  !important;
  height: var(--chart-width)  !important;  /* maintain square aspect */
}

/* ─── Chart.js Plugin Overrides ─────────────────────────────────────────── */
.chartjs-render-monitor + .chartjs-size-monitor {
  /* keep Chart.js container from injecting awkward wrappers */
  display: none !important;
}
.separator {
  border: 0;                         /* remove default */
  border-top: 1px solid rgba(0, 0, 0, 0.15);  /* very light grey */
  height: 0;                         /* only the border shows */
  margin: 2rem 0;                    /* vertical spacing */
}

/* Scenario Tab Layout */
.section-title {
  font-size: 1.75rem;
  font-weight: bold;
  text-transform: uppercase;
  margin: 1rem 0;
}
.separator {
  margin: 1rem 0;
  border: none;
  border-top: 2px solid #ccc;
}

.section-title {
  text-align: center;
}

.bottom-section {
  display: flex;
  flex-direction: column; /* 💥 important change */
  align-items: center;
  gap: 32px;
}

.left-column {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 24px;
}

#categoryOptions {
  display: flex;
  flex-direction: row; /* 🔥 force horizontal */
  flex-wrap: wrap; /* allow wrapping if small screen */
  justify-content: center;
  align-items: center;
  gap: 24px; /* space between each radio button */
  margin-bottom: 16px; /* space before graphs */
}

#categoryOptions label {
  display: flex;
  align-items: center;
  gap: 8px; /* small space between circle and text */
  font-size: 18px; /* make it more readable */
  cursor: pointer; /* pointer cursor on hover */
}

#categoryOptions fieldset {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px;
  border: 2px solid black; /* 🔥 Nice solid black border */
  border-radius: 8px; /* ✨ Rounded corners */
  padding: 16px 24px; /* ✨ Good inner spacing */
  margin: 0;
  margin-top: 16px; /* Optional: small space above */
  width: auto;
}

#categoryOptions legend {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 12px;
  text-align: center;
  padding: 0 8px; /* Keep the legend clean inside border */
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
}

.radio-option input[type="radio"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}



/* All scenario charts (base rule) */
.line-plot-widget-scenario,
.bar-chart-widget-scenario {
  flex: 1 1 100%;
  min-width: 0; /* ✅ Let it shrink on small screens */
  max-width: 600px;
  width: 100%;
  box-sizing: border-box;
}

/* Force full-width layout on smaller screens or high zoom */
@media (max-width: 1280px) {
  .line-plot-widget-scenario,
  .bar-chart-widget-scenario {
    flex: 1 1 100%;
    width: 100%;
    max-width: 800px;
    height: 550px;
  }
}

@media (max-width: 800px) {
  .line-plot-widget-scenario,
  .bar-chart-widget-scenario {
    height: 520px;
  }
}

/* Container flexbox adjustments */
#widgetsAreaScenario {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* Prevent horizontal scroll on overflow */
}

/* Single chart centering remains the same */
#widgetsAreaScenario:has(.graph-item:nth-child(1):last-child) .graph-item {
  flex: 1 1 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}





.scenario-textbox,
.category-options {
  width: 100%;
}
.right-column {
  flex: 2 1 65%;
}

/* === GRID FOR CHARTS === */
.chart-container {
  display: grid;
  grid-template-columns: 1fr;  /* one column only */
  gap: 1rem;
  
}

.chart-container canvas {
  width: auto !important;
  height: 350px !important;
  position: relative !important;
  
}


/* === MODAL === */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 1001;
  
}
.modal[hidden] { display: none; }

  .modal-content {
    background: white;
    padding: 1.5rem;
    border-radius: 6px;
    width: 90%;
    max-width: 500px;
    max-height: 95vh;         /* Constrain modal height */
    overflow-y: auto;         /* Enable scroll if content overflows */
    position: relative;
    box-sizing: border-box;   /* Ensure padding doesn't overflow */
  }

.modal-content .close {
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  background: none; border: none;
  font-size: 1.5rem; cursor: pointer;
}

/* === SLIDERS === */
.slider-row {
  display: grid;
  /* col1: fixed 150px for labels
     col2: fixed width for value (3ch for “-100”–“100”)
     col3: flexible slider
     col4: fixed 4rem for number input */
  grid-template-columns: 150px 3ch 1fr 4rem;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* zero-line marker */
.slider-container {
  position: relative;
}
.zero-line {
  position: absolute;
  top: 50%; left: 50%;
  width: 2px; height: 100%;
  background: #999;
  transform: translate(-50%,-50%);
  pointer-events: none;
}

/* slider track + thumb */
.slider {
  width: 100%;
  height: 8px;
  background: #ddd;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  background: #007bff;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(0,0,0,0.3);
}
.slider::-moz-range-thumb {
  width: 16px; height: 16px;
  background: #007bff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(0,0,0,0.3);
}

/* number input */
.slider-number {
  width: 100%;
  max-width: 4rem;
  padding: 0.2rem;
  font-size: 1rem;
}

/* === TOAST === */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  background: #4caf50;
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  
  font-size: 1rem;
  text-align: center;
  
  max-width: 80%;      /* up to 80% of viewport width */
  width: auto;         /* shrink-to-fit content */
  white-space: nowrap; /* keep it one line if possible */
  
  z-index: 1002;
}

/* Hide/show */
.toast[hidden] {
  display: none;
}
.toast:not([hidden]) {
  display: block;
}



.select-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 600px; /* Optional: control max width */
  margin: 0 auto;
}



.export-buttons {
  display: flex;
  justify-content: flex-end;  /* ← push them to the right */
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* your buttons already have class="export-btn" */
.export-btn {
  background-color: #004d1a;
  color: #fff;
  border: 1px solid #004d1a;
  padding: 0.4rem 0.8rem;
  font-size: 1rem;
  cursor: pointer;
}
.export-btn:disabled {
  background-color: #e0e0e0;    /* light grey bg */
  border-color:    #ccc;        /* grey border */
  color:           #777;        /* darker grey text */
  cursor:          not-allowed;
}

/* Give the button a class for scoping */
#createScenarioBtn {
  background: linear-gradient(135deg, #6b73ff, #000dff);
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 999px;          /* pill shape */
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  transition: 
    background 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* Center container */
.centered-button {
  display: flex;
  justify-content: center;
  margin-top: 1em; /* optional spacing */
}


/* Lift on hover */
#createScenarioBtn:hover {
  background: linear-gradient(135deg, #5563e8, #000bcf);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* Pressed state */
#createScenarioBtn:active {
  transform: translateY(0);
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}




.custom-dropdown {
  width: auto;
  padding: 8px 10px;
  font-size: 1em; /* Normal */
  border: 2px solid #333;
  border-radius: 4px;
  background-color: white;
  color: #000;
}

/* 🔥 When screen shrinks (after zoom ~250%) */
@media (max-width: 1000px) {
  .custom-dropdown {
    font-size: 0.5em;
  }
}

/* 🔥 When screen is very small (after zoom ~400%) */
@media (max-width: 600px) {
  .custom-dropdown {
    font-size: 0.4em;
  }
}

.custom-dropdown:focus{
  outline: 3px solid purple;
  outline-offset: 4px;       /* space between the select and its outline */
}


#textBox {
  width: 100%;
  max-width: 600px; /* Optional: don't allow it to become too huge */
  margin: 0 auto; /* Center horizontally */
  text-align: center; /* Center the inside text */
}

/* Container for LST controls */
#tiff-controls {
  display: flex;              /* horizontal layout */
  justify-content: center;    /* center horizontally */
  align-items: center;        /* vertical alignment */
  gap: 10px;                  /* spacing between buttons and date */
  margin: 10px 0;             /* spacing above/below */
  font-family: Arial, sans-serif;
  font-size: 14px;
}

#tiff-controls {
  margin: 10px 0;
  font-family: Arial, sans-serif;
}

.arrow {
  font-size: 24px;
  cursor: pointer;
  color: #007bff;
  user-select: none;
  transition: color 0.2s ease;
}

.arrow:hover {
  color: #0056b3;
}

#tiff-date {
  font-size: 16px;
  font-weight: bold;
  min-width: 140px;
  text-align: center;
  color: #333;
}

/* Table Styles */
.custom-scenario-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1em;
  font-size: 0.87em;       /* slightly smaller text to fit better */
}

.custom-scenario-table th,
.custom-scenario-table td {
  border: 2px solid #1a1a1a; /* high contrast border */
  padding: 0.4em;             /* slightly smaller padding */
  text-align: left;
  color: #000;                /* high contrast text */
  background-color: #fff;
  word-wrap: break-word;      /* allow long text to wrap */
}

.custom-scenario-table th {
  background-color: #004080; /* dark blue for header */
  color: #fff;               /* white text for contrast */
}

.custom-scenario-table select {
  width: 90%;                /* slightly smaller to fit cells */
  padding: 0.2em;            /* smaller padding */
  font-size: 0.83em;          /* match table text */
  box-sizing: border-box;
}


  /* Buttons */
  .add-day-btn, .button-container button {
    padding: 0.5em 1em;
    font-size: 1em;
    color: #fff;
    background-color: #007acc; /* blue AA-compliant */
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .add-day-btn:hover, .button-container button:hover {
    background-color: #005f99;
  }

  /* Focus Outline */
  button:focus, select:focus {
    outline: 3px solid purple; /* visible focus */
    outline-offset: 2px;
  }

  /* Modal Content */
.modal-content {
  background-color: #fefefe;
  padding: 1.5em;
  border-radius: 8px;
  max-width: 900px;        /* normal max width */
  width: 90vw;             /* scale with viewport */
  margin: 2em auto;
  box-sizing: border-box;  /* include padding in width */
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  overflow-x: hidden;      /* prevent horizontal scroll if content slightly too wide */
}


  /* Close Button */
  .close {
    float: right;
    font-size: 1.5em;
    background: none;
    border: none;
    cursor: pointer;
    color: #000;
  }
  .close:focus {
    outline: 3px solid #ffbf47;
  }


.custom-scenario-wrapper {
  overflow-x: auto;
  margin-top: 1rem;
}

.custom-scenario-result-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  font-size: 0.95rem;
}

.custom-scenario-result-table th,
.custom-scenario-result-table td {
  border: 1px solid #d1d5db; /* softer gray */
  padding: 0.6rem 0.8rem;
  text-align: center;
}

.custom-scenario-result-table th {
  background-color: #007523; /* soft blue */
  color: #ffffff; /* dark text for contrast */
  font-weight: 600;
}

.custom-scenario-result-table tr:nth-child(even) {
  background-color: #f8fafc; /* very light gray for striping */
}

.custom-scenario-result-table tr:hover {
  background-color: #dbeafe; /* light highlight on hover */
}

.custom-scenario-result-table caption {
  caption-side: top;
  font-weight: bold;
  text-align: left;
  padding: 0.5rem;
}


#newCustomScenarioBtn {
  background-color: #1d4ed8; /* deep blue */
  color: #ffffff; /* high contrast text */
  font-weight: 600;
  border: 2px solid #1d4ed8;
  border-radius: 8px;
  margin-top: 20px;
  padding: 0.7rem 1.4rem;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

#newCustomScenarioBtn:hover,
#newCustomScenarioBtn:focus {
  background-color: #007acc;
  border-color: #007acc;
  outline: 3px solid purple; /* or whatever color you want */
; /* yellow focus ring for keyboard users */
  outline-offset: 3px;
}

#newCustomScenarioBtn:disabled {
  background-color: #94a3b8;
  border-color: #94a3b8;
  cursor: not-allowed;
}