/* Main layout and critical styles */
html, body { 
  margin: 0; 
  padding: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; 
  height: 100dvh; 
  overflow: hidden; /* Disable main page scrolling */
  background: #0b1220; 
  color: #e5e7eb; 
}

body { 
  display: grid; 
  grid-template-columns: 320px 1fr; 
}

/* Sidebar styles moved to sidebar.css */

.emphasized-text {
  font-weight: 700;
  /* Fallback color for browsers that don't support background-clip: text */
  color: #60a5fa;
  /* Gradient background for supported browsers */
  background: linear-gradient(90deg, #60a5fa 0%, #a78bfa 50%, #f472b6 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 6s linear infinite, colorPulse 3s ease-in-out infinite;
  /* Ensure the element is visible */
  display: inline-block;
}

@keyframes gradientShift {
  0% {
    background-position: -200% 0%;
  }
  100% {
    background-position: 200% 0%;
  }
}

@keyframes colorPulse {
  0% {
    color: #60a5fa;
  }
  50% {
    color: #f472b6;
  }
  100% {
    color: #60a5fa;
  }
}


/* Sidebar toggle styles moved to sidebar.css */

#map { 
  position: relative; 
  height: 100dvh; 
  overflow: hidden; /* Disable map container scrolling */
}

/* Status and pill styles moved to status.css */

label { 
  font-size: 12px; 
  display: flex; 
  align-items: center; 
  gap: 6px; 
  color: #d1d5db; 
}

input[type="number"] { 
  width: 90px; 
  padding: 4px 6px; 
  font-size: 12px; 
  background: #111827; 
  color: #e5e7eb; 
  border: 1px solid #374151; 
  border-radius: 6px; 
}

input[type="text"] { 
  width: 100%; 
  padding: 8px 10px; 
  font-size: 13px; 
  background: #111827; 
  color: #e5e7eb; 
  border: 1px solid #374151; 
  border-radius: 6px; 
}

select { 
  padding: 6px 8px; 
  background: #111827; 
  color: #e5e7eb; 
  border: 1px solid #374151; 
  border-radius: 6px; 
}

input[type="range"] { 
  accent-color: #60a5fa; 
}

/* Button styles moved to buttons.css */

.row { 
  display: flex; 
  gap: 8px; 
  align-items: center; 
  flex-wrap: wrap; 
}

.legend { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 6px; 
  max-height: 25vh; 
  overflow: auto;
  padding: 8px 0;
}

.legend-item { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  font-size: 13px; 
  color: #e5e7eb; 
  padding: 6px 10px;
  background: rgba(17, 24, 39, 0.6);
  border-radius: 6px;
  border: 1px solid #374151;
  transition: all 0.2s ease;
  cursor: pointer;
}

.legend-item:hover {
  background: rgba(17, 24, 39, 0.8);
  border-color: #60a5fa;
  transform: translateX(4px);
}

.legend-color { 
  width: 14px; 
  height: 14px; 
  border-radius: 3px; 
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.legend-text {
  font-weight: 500;
  flex: 1;
}

.legend-count {
  font-size: 11px;
  color: #9ca3af;
  background: rgba(55, 65, 81, 0.5);
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 600;
}

.checkboxes { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 6px; 
}

.muted { 
  color: #9ca3af; 
  font-size: 12px; 
}

a { 
  color: #93c5fd; 
  text-decoration: none; 
}

/* Keep overlays above WebGL canvas */
.deck-tooltip { 
  z-index: 9999 !important; 
}

.maplibregl-popup { 
  z-index: 10000; 
}

.maplibregl-popup-content { 
  padding: 0 !important; 
  border-radius: 10px !important; 
  box-shadow: 0 10px 32px rgba(0,0,0,0.35) !important; 
  background: #111827 !important; 
  color: #f9fafb !important; 
  border: 1px solid #1f2937 !important; 
}

.maplibregl-popup { 
  background: transparent !important; 
}

.maplibregl-popup-tip { 
  background: #111827 !important; 
  border: 1px solid #1f2937 !important; 
}

/* Sidebar and button styles moved to respective CSS files */

/* Optimize loading indicator transition */
#map-loading {
  transition: opacity 0.3s ease-out;
}

/* Ensure scrollable elements within the main page can still scroll */
.scrollable, 
.map-search-results, 
.map-search-results-content,
.fuzzy-suggestions,
.search-results,
.legend,
.checkboxes,
#details {
  overflow-y: auto;
  overflow-x: hidden;
}

/* Prevent main page from scrolling while allowing child elements to scroll */
body * {
  box-sizing: border-box;
}