@import "tailwindcss";

:root {
  --background: #000000;
  --foreground: #ededed;
  --bg-primary: #000000;
  --bg-secondary: rgb(17, 24, 39);
  --bg-tertiary: rgb(31, 41, 55);
  --bg-panel: rgba(17, 24, 39, 0.8);
  --border-primary: rgb(55, 65, 81);
  --border-secondary: rgb(75, 85, 99);
  --text-primary: rgb(243, 244, 246);
  --text-secondary: rgb(156, 163, 175);
  --text-muted: rgb(107, 114, 128);
  --text-heading: rgb(236, 254, 255);
  --hover-accent: rgba(8, 51, 68, 0.2);
  --scrollbar-thumb: rgba(100, 116, 139, 0.3);
  --scrollbar-thumb-hover: rgba(100, 116, 139, 0.5);
}

/* Light theme: only the map basemap changes — UI stays dark */
[data-theme="light"] {
  --background: #000000;
  --foreground: #ededed;
  --bg-primary: #000000;
  --bg-secondary: rgb(17, 24, 39);
  --bg-tertiary: rgb(31, 41, 55);
  --bg-panel: rgba(17, 24, 39, 0.8);
  --border-primary: rgb(55, 65, 81);
  --border-secondary: rgb(75, 85, 99);
  --text-primary: rgb(243, 244, 246);
  --text-secondary: rgb(156, 163, 175);
  --text-muted: rgb(107, 114, 128);
  --text-heading: rgb(236, 254, 255);
  --hover-accent: rgba(8, 51, 68, 0.2);
  --scrollbar-thumb: rgba(100, 116, 139, 0.3);
  --scrollbar-thumb-hover: rgba(100, 116, 139, 0.5);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

/* Styled thin scrollbar for dark HUD UI */
.styled-scrollbar::-webkit-scrollbar {
  width: 5px;
}

.styled-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.styled-scrollbar::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 10px;
}

.styled-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

.styled-scrollbar {
  scrollbar-width: thin;
}

/* MapLibre Popup Overrides */
.maplibregl-popup-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.maplibregl-popup-tip {
  display: none !important;
}

/* Focus mode: dim the map canvas (tiles + drawn layers) when a popup is active.
   Inside MapLibre's DOM, .maplibregl-canvas-container is a SIBLING of .maplibregl-popup,
   so this filter dims the map without affecting the popup at all. */
.map-focus-active .maplibregl-canvas-container {
  filter: brightness(0.3);
  transition: filter 0.3s ease;
}

/* Keep popups fully bright and interactive above the dimmed canvas */
.map-focus-active .maplibregl-popup {
  z-index: 10 !important;
}