:root{
  --bg: #0b0f0d;
  --panel: #0f1612;
  --text: #c9d3cc;
  --muted: #8ea196;
  --green: #1f7a4a;
  --green2: #2aa15f;
  --border: #1a2a21;
}

/* Page background (removes the default “white UI” look in index.css) */
html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: Consolas, "Courier New", monospace !important;
}

/* If the map has empty areas, show your dark background */
#map {
  background: transparent !important;
}

/* Darken the map tiles (visual “dark mode” effect). Tweak to taste. */
.ol-viewport canvas {
  filter: brightness(0.78) contrast(1.10) saturate(0.90);
}

/* Mouse position + coordinate box (these are white in the default CSS) */
.mouseposition,
div.ol-mouse-position {
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35) !important;
}

/* OpenLayers controls */
.ol-control {
  background: rgba(15, 22, 18, 0.85) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}

.ol-control button {
  background: transparent !important;
  color: var(--green) !important;
  font-family: Consolas, "Courier New", monospace !important;
  border-radius: 10px !important;
}

.ol-control button:hover {
  color: var(--green2) !important;
}

/* Context menu */
.ol-ctx-menu-container {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  color: var(--text) !important;
  font-family: Consolas, "Courier New", monospace !important;
}

.ol-ctx-menu-container li:hover {
  background: rgba(31,122,74,0.12) !important;
}

/* Toastify notifications */
.toastify {
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}