:root {
  --bg-color-dark: #1f2125;
  --card-color-dark: #2c2f35;
  --text-color-light: #e0e1e3;
  --text-color-muted: #a0a1a3;
  --accent-color-orange: #ff9900;
  --accent-color-blue: #00bcd4;
  --success-color-green: #4caf50;
  --border-color-light: rgba(255, 255, 255, 0.1);
}

/*#map {
  height: 90vh;
}*/
.controls {
  margin: 10px 0;
}
input,
button,
select {
  margin: 5px;
  padding: 5px;
}
.info-panel {
  background: #f0f0f0;
  padding: 10px;
  margin: 10px 0;
}

#loading-indicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#loading-indicator img {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  box-shadow: 0 4px 24px 8px rgba(100, 100, 100, 0.17);
  /* border fade/glow */
  outline: 2px solid rgba(160, 160, 160, 0);
  box-shadow:
    0 0 24px 8px rgba(160, 160, 160, 0.12),
    0 4px 24px 8px rgba(100, 100, 100, 0.17);
  /* Feather-like border fading into background */
}

/* Custom leaflet css */
/* Custom Leaflet popup styling using Tailwind theme colors */
.leaflet-popup-content-wrapper {
  background: #1f2937; /* bg-gray-800 */
  color: #f3f4f6; /* text-gray-100 */
  border-radius: 0.75rem; /* rounded-xl */
  padding: 0;
  overflow: hidden;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.5),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.leaflet-popup-content {
  margin: 0;
  width: 500px !important; /* Fixed width for the chart container */
  padding: 0;

  text-align: center;
}

.leaflet-popup-content p {
  margin: 0 0 10px 0;
}

.leaflet-popup-tip {
  background: #1f2937;
}

.leaflet-attribution-flag {
  display: none !important;
}

/* Chart.js tooltips will handle data display, but we ensure the canvas fits the space */
#solarChart {
  max-height: 250px;
}

/* Custom range input styling, works well with Tailwind utility colors */
input[type="range"] {
  @apply h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer focus:outline-none;
}
input[type="range"]::-webkit-slider-thumb {
  @apply appearance-none w-4 h-4 bg-blue-600 rounded-full shadow;
  border: 2px solid #fff;
}
input[type="range"]:focus::-webkit-slider-thumb {
  @apply ring-2 ring-blue-400;
}
input[type="range"]::-moz-range-thumb {
  @apply w-4 h-4 bg-blue-600 rounded-full shadow;
  border: 2px solid #fff;
}
input[type="range"]:focus::-moz-range-thumb {
  @apply ring-2 ring-blue-400;
}
input[type="range"]::-ms-thumb {
  width: 1rem;
  height: 1rem;
  background: #2563eb;
  border-radius: 9999px;
  border: 2px solid #fff;
}
input[type="range"]::-ms-fill-lower {
  background: #e5e7eb;
  border-radius: 1rem;
}
input[type="range"]::-ms-fill-upper {
  background: #e5e7eb;
  border-radius: 1rem;
}


/* --- Sponsor --- */
@media (width < 1200px) {
    .sponsor {
        max-width: 300px;
    }
}

@media (width > 1200px) {
    .sponsor {
        max-width: 350px;
    }
}

@media (width > 1800px) {
    .sponsor {
        max-width: 650px;
    }
}

@media (width > 2600px) {
    .sponsor {
        max-width: 1000px;
    }
}