@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

body {
  font-family: var(--font-sans);
  background-color: #0b0f19;
  color: #f3f4f6;
  overflow: hidden;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

.font-mono {
  font-family: var(--font-mono);
}

/* Glassmorphism Card Utilities */
.glass-card {
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
}

.glass-pill {
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Leaflet Container Customization */
#map {
  width: 100vw;
  height: 100vh;
  z-index: 0;
  background-color: #0b0f19;
}

.leaflet-container {
  background-color: #0b0f19 !important;
  font-family: var(--font-sans) !important;
}

.leaflet-control-zoom {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
  margin-bottom: 12px !important;
  margin-right: 14px !important;
}

.leaflet-control-zoom-in, .leaflet-control-zoom-out {
  background-color: rgba(15, 23, 42, 0.92) !important;
  color: #38bdf8 !important;
  border: none !important;
  font-size: 18px !important;
}

.leaflet-control-zoom-in:hover, .leaflet-control-zoom-out:hover {
  background-color: rgba(30, 41, 59, 1) !important;
  color: #7dd3fc !important;
}

.leaflet-control-attribution {
  background: rgba(15, 23, 42, 0.75) !important;
  color: #94a3b8 !important;
  font-size: 10px !important;
  padding: 2px 8px !important;
  border-radius: 8px 0 0 0 !important;
  backdrop-filter: blur(6px);
}

.leaflet-control-attribution a {
  color: #38bdf8 !important;
  text-decoration: none !important;
}

/* Dark Glass Leaflet Tooltips (Explore & Whole-State Modes) */
.leaflet-tooltip,
.custom-leaflet-tooltip {
  background: rgba(15, 23, 42, 0.94) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  border-radius: 12px !important;
  color: #f8fafc !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55) !important;
  padding: 4px 8px !important;
  backdrop-filter: blur(8px);
}

.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
  display: none !important;
}

/* Pulsing Beacon Ring for Highlighted / Small Polygons */
@keyframes beaconPulse {
  0% {
    stroke-width: 2px;
    stroke-opacity: 0.95;
  }
  50% {
    stroke-width: 6px;
    stroke-opacity: 0.45;
  }
  100% {
    stroke-width: 2px;
    stroke-opacity: 0.95;
  }
}

.pulse-beacon-ring {
  animation: beaconPulse 1.6s infinite ease-in-out;
}

/* Region Preset Pill Active State */
.region-preset-pill {
  transition: all 0.15s ease;
}

.region-preset-pill.active {
  background: rgba(14, 165, 233, 0.22);
  border-color: rgba(56, 189, 248, 0.75);
  color: #f0f9ff;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.25);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
}
::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 189, 248, 0.6);
}

/* Glow & Pulse Animations */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.35);
  }
  50% {
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.7);
  }
}

.animate-glow {
  animation: pulseGlow 2.4s infinite ease-in-out;
}

/* Form Controls & Custom Checkboxes */
input[type="checkbox"], input[type="radio"] {
  accent-color: #38bdf8;
}