body {
  /* Update this path to your local image file */
  background-size: cover;
  background-position: center;
  transition: background-image 0.5s ease;
  background-color: #1a1a2e; /* Dark navy blue */
  background-image: url('bg.jpg');
  overflow-y: scroll;
}

/* Adjust map container if needed */
#map {
  /* Ensuring the map container fills the given height */
  width: 100%;
  height: 100%;
}

/* Scrollable List Container */
.scrollable {
  max-height: 18.75rem; /* 300px / 16 = 18.75rem */
  overflow-y: auto;
}

/* Chart Container: Adjust height based on screen width */
.chart-container {
  width: 100%;
  height: 18.75rem; /* Mobile default (300px) */
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 768px) {
  .chart-container {
    height: 25rem; /* 400px / 16 = 25rem */
  }
}

/* Ensure canvas elements fill their containers */
canvas {
  max-width: 100%;
  height: 100%;
}

/* Year Scroller Styles */
.year-scroller {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0.625rem; /* 10px */
  gap: 0.625rem;    /* 10px */
  scroll-behavior: smooth;
}

/* Glass-fuzzy effect for location widgets (list items) */
/* Light mode: light blue background with dark blue text */
.location-list li {
  text-align: center; /* Center the text */
  background-color: rgba(225, 225, 225, 0.486); /* Light blue */
  color: #2f2f2f; /* Dark blue */
  padding: 0.5rem; /* 8px */
  border-radius: 0.5rem; /* 8px */
  backdrop-filter: blur(10px);
  transition: background-color 0.3s, transform 0.3s;
  user-select: none;
}

/* Hover state for location widgets */
.location-list li:hover {
  background-color: rgba(173, 216, 230, 0.8);
  transform: scale(1.05);
}

/* Dark mode override for location widgets: use a translucent dark blue background with light text */
.dark .location-list li {
  background-color: rgba(42, 59, 97, 0.204); /* Dark blue translucent */
  color: #ffffff; /* White text */
}

.location-list {
  overflow-x: hidden;
}

/* Water Status Indicator Classes */
.safe-card {
  background-color: #10b981 !important; /* Tailwind green-500 */
  transition: background-color 0.5s ease;
}

.not-safe-card {
  background-color: #ef4444 !important; /* Tailwind red-500 */
  transition: background-color 0.5s ease;
}

/* Year Button Styling Similar to Location List */
.year-button {
  background-color: rgba(225, 225, 225, 0.486); /* Light background */
  color: #2f2f2f;
  padding: 0.625rem 1.25rem; /* 10px 20px */
  border-radius: 0.5rem; /* 8px */
  backdrop-filter: blur(10px);
  transition: background-color 0.3s, transform 0.3s;
  user-select: none;
}

.year-button:hover {
  background-color: rgba(173, 216, 230, 0.8);
  transform: scale(1.05);
}

/* Dark mode adjustments */
.dark .year-button {
  background-color: rgba(42, 59, 97, 0.204);
  color: #ffffff;
}

/* Repeated Year Scroller Styles for consistency */
.year-scroller {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0.625rem;
  gap: 0.625rem;
  scroll-behavior: smooth;
}