html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

/* Body background synced to theme toggle */
[data-theme="dark"] body { background: #070B18; }
[data-theme="light"] body { background: #F0F3FA; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) body { background: #070B18; }
}

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ─── MapLibre GL Controls — Shared Base ─────────────────────────────── */

.maplibregl-ctrl-group {
  border-radius: 12px !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  overflow: visible !important;
}

/* Icon buttons — fixed size */
.maplibregl-ctrl-group button:not(.maplibregl-style-list button) {
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  transition: background-color 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Style list buttons — natural size */
.maplibregl-ctrl-group .maplibregl-style-list button {
  width: auto !important;
  min-width: 130px !important;
  height: auto !important;
  display: block !important;
  text-align: left !important;
  padding: 8px 12px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
}

.maplibregl-ctrl-scale {
  border-radius: 4px !important;
  font-size: 10px !important;
  font-family: 'IBM Plex Mono', monospace !important;
}

.maplibregl-ctrl-geocoder .maplibregl-ctrl-geocoder--powered-by {
  display: none !important;
}

/* ─── Light Mode ─────────────────────────────────────────────────────── */

[data-theme="light"] .maplibregl-ctrl-group,
html:not([data-theme]) .maplibregl-ctrl-group {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(13, 20, 33, 0.10) !important;
  box-shadow: 0 4px 20px rgba(13, 20, 33, 0.12) !important;
}

[data-theme="light"] .maplibregl-ctrl-group button:not(.maplibregl-style-list button) + button:not(.maplibregl-style-list button),
html:not([data-theme]) .maplibregl-ctrl-group button:not(.maplibregl-style-list button) + button:not(.maplibregl-style-list button) {
  border-top: 1px solid rgba(13, 20, 33, 0.07) !important;
}

[data-theme="light"] .maplibregl-ctrl-group button:hover,
html:not([data-theme]) .maplibregl-ctrl-group button:hover {
  background-color: rgba(0, 110, 82, 0.07) !important;
}

[data-theme="light"] .maplibregl-ctrl-group button:active,
html:not([data-theme]) .maplibregl-ctrl-group button:active {
  background-color: rgba(0, 110, 82, 0.14) !important;
}

[data-theme="light"] .maplibregl-ctrl-attrib,
html:not([data-theme]) .maplibregl-ctrl-attrib {
  background: rgba(255, 255, 255, 0.85) !important;
  border-radius: 8px !important;
  font-size: 10px !important;
}

/* Geocoder — light */
[data-theme="light"] .maplibregl-ctrl-geocoder,
html:not([data-theme]) .maplibregl-ctrl-geocoder {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
  border: 1px solid rgba(13, 20, 33, 0.10) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(13, 20, 33, 0.12) !important;
  color: rgba(13, 20, 33, 0.85) !important;
  font-family: 'Outfit', sans-serif !important;
}

[data-theme="light"] .maplibregl-ctrl-geocoder.maplibregl-ctrl-geocoder--collapsed,
html:not([data-theme]) .maplibregl-ctrl-geocoder.maplibregl-ctrl-geocoder--collapsed {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(13, 20, 33, 0.10) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(13, 20, 33, 0.10) !important;
}

[data-theme="light"] .maplibregl-ctrl-geocoder input[type='text'],
html:not([data-theme]) .maplibregl-ctrl-geocoder input[type='text'] {
  background: transparent !important;
  color: rgba(13, 20, 33, 0.85) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 13px !important;
}

[data-theme="light"] .maplibregl-ctrl-geocoder input[type='text']::placeholder,
html:not([data-theme]) .maplibregl-ctrl-geocoder input[type='text']::placeholder {
  color: rgba(13, 20, 33, 0.35) !important;
}

[data-theme="light"] .maplibregl-ctrl-geocoder .maplibregl-ctrl-geocoder--icon-search,
html:not([data-theme]) .maplibregl-ctrl-geocoder .maplibregl-ctrl-geocoder--icon-search {
  fill: rgba(13, 20, 33, 0.4) !important;
}

[data-theme="light"] .maplibregl-ctrl-geocoder .maplibregl-ctrl-geocoder--icon-close,
html:not([data-theme]) .maplibregl-ctrl-geocoder .maplibregl-ctrl-geocoder--icon-close {
  fill: rgba(13, 20, 33, 0.3) !important;
}

[data-theme="light"] .maplibregl-ctrl-geocoder .suggestions,
html:not([data-theme]) .maplibregl-ctrl-geocoder .suggestions {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
  border: 1px solid rgba(13, 20, 33, 0.08) !important;
  border-top: none !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: 0 16px 48px rgba(13, 20, 33, 0.15) !important;
}

[data-theme="light"] .maplibregl-ctrl-geocoder .suggestions > li > a,
html:not([data-theme]) .maplibregl-ctrl-geocoder .suggestions > li > a {
  color: rgba(13, 20, 33, 0.75) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid rgba(13, 20, 33, 0.05) !important;
}

[data-theme="light"] .maplibregl-ctrl-geocoder .suggestions > .active > a,
[data-theme="light"] .maplibregl-ctrl-geocoder .suggestions > li > a:hover,
html:not([data-theme]) .maplibregl-ctrl-geocoder .suggestions > .active > a,
html:not([data-theme]) .maplibregl-ctrl-geocoder .suggestions > li > a:hover {
  background: rgba(0, 110, 82, 0.06) !important;
  color: rgba(13, 20, 33, 0.95) !important;
}

/* Layers dropdown — light */
[data-theme="light"] .maplibregl-style-list,
html:not([data-theme]) .maplibregl-style-list {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

[data-theme="light"] .maplibregl-ctrl-group .maplibregl-style-list button,
html:not([data-theme]) .maplibregl-ctrl-group .maplibregl-style-list button {
  color: rgba(13, 20, 33, 0.65) !important;
  background: transparent !important;
}

[data-theme="light"] .maplibregl-ctrl-group .maplibregl-style-list button:hover,
html:not([data-theme]) .maplibregl-ctrl-group .maplibregl-style-list button:hover {
  background-color: rgba(0, 110, 82, 0.07) !important;
  color: rgba(13, 20, 33, 0.9) !important;
}

[data-theme="light"] .maplibregl-ctrl-group .maplibregl-style-list button.active,
html:not([data-theme]) .maplibregl-ctrl-group .maplibregl-style-list button.active {
  color: #006E52 !important;
}

[data-theme="light"] .maplibregl-ctrl-group .maplibregl-style-list button + button,
html:not([data-theme]) .maplibregl-ctrl-group .maplibregl-style-list button + button {
  border-top: 1px solid rgba(13, 20, 33, 0.06) !important;
}

/* ─── Dark Mode ──────────────────────────────────────────────────────── */

[data-theme="dark"] .maplibregl-ctrl-group {
  background: rgba(11, 17, 32, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .maplibregl-ctrl-group button:not(.maplibregl-style-list button) + button:not(.maplibregl-style-list button) {
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

[data-theme="dark"] .maplibregl-ctrl-group button:hover {
  background-color: rgba(0, 229, 160, 0.08) !important;
}

[data-theme="dark"] .maplibregl-ctrl-group button:active {
  background-color: rgba(0, 229, 160, 0.16) !important;
}

/* Invert MapLibre icons to white in dark mode */
[data-theme="dark"] .maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon,
[data-theme="dark"] .maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon,
[data-theme="dark"] .maplibregl-ctrl-compass .maplibregl-ctrl-icon,
[data-theme="dark"] .maplibregl-ctrl-geolocate .maplibregl-ctrl-icon {
  filter: invert(1) brightness(0.8) !important;
}

[data-theme="dark"] .maplibregl-ctrl-zoom-in:hover .maplibregl-ctrl-icon,
[data-theme="dark"] .maplibregl-ctrl-zoom-out:hover .maplibregl-ctrl-icon,
[data-theme="dark"] .maplibregl-ctrl-compass:hover .maplibregl-ctrl-icon,
[data-theme="dark"] .maplibregl-ctrl-geolocate:hover .maplibregl-ctrl-icon {
  filter: invert(1) brightness(1) !important;
}

[data-theme="dark"] .maplibregl-ctrl-compass-arrow {
  filter: invert(1) brightness(0.8) !important;
}

[data-theme="dark"] .maplibre-ctrl-notification-off {
  filter: invert(1) brightness(0.75) !important;
}

[data-theme="dark"] .maplibregl-ctrl-attrib {
  background: rgba(11, 17, 32, 0.80) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.3) !important;
  font-size: 10px !important;
}

[data-theme="dark"] .maplibregl-ctrl-attrib a {
  color: rgba(255, 255, 255, 0.4) !important;
}

[data-theme="dark"] .maplibregl-ctrl-attrib-button {
  filter: invert(1) brightness(0.7) !important;
}

[data-theme="dark"] .maplibregl-ctrl-scale {
  background: rgba(11, 17, 32, 0.80) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Geocoder — dark */
[data-theme="dark"] .maplibregl-ctrl-geocoder {
  background: rgba(11, 17, 32, 0.92) !important;
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 229, 160, 0.06) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: 'Outfit', sans-serif !important;
}

[data-theme="dark"] .maplibregl-ctrl-geocoder.maplibregl-ctrl-geocoder--collapsed {
  background: rgba(11, 17, 32, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .maplibregl-ctrl-geocoder input[type='text'] {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

[data-theme="dark"] .maplibregl-ctrl-geocoder input[type='text']::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

[data-theme="dark"] .maplibregl-ctrl-geocoder .maplibregl-ctrl-geocoder--icon-search,
[data-theme="dark"] .maplibregl-ctrl-geocoder .maplibregl-ctrl-geocoder--icon-loading {
  fill: rgba(255, 255, 255, 0.4) !important;
}

[data-theme="dark"] .maplibregl-ctrl-geocoder .maplibregl-ctrl-geocoder--icon-close {
  fill: rgba(255, 255, 255, 0.3) !important;
}

[data-theme="dark"] .maplibregl-ctrl-geocoder .maplibregl-ctrl-geocoder--icon-close:hover {
  fill: rgba(255, 75, 87, 0.8) !important;
}

[data-theme="dark"] .maplibregl-ctrl-geocoder .suggestions {
  background: rgba(11, 17, 32, 0.96) !important;
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top: none !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6) !important;
  overflow: hidden !important;
}

[data-theme="dark"] .maplibregl-ctrl-geocoder .suggestions > li > a {
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  transition: background 0.15s ease !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

[data-theme="dark"] .maplibregl-ctrl-geocoder .suggestions > li:last-child > a {
  border-bottom: none !important;
}

[data-theme="dark"] .maplibregl-ctrl-geocoder .suggestions > .active > a,
[data-theme="dark"] .maplibregl-ctrl-geocoder .suggestions > li > a:hover {
  background: rgba(0, 229, 160, 0.08) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .maplibregl-ctrl-geocoder--suggestion-title {
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 13px !important;
}

[data-theme="dark"] .maplibregl-ctrl-geocoder--suggestion-address {
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  margin-top: 1px !important;
}

/* Layers switcher — dark */
[data-theme="dark"] .maplibregl-style-switcher {
  filter: invert(1) brightness(0.75) !important;
}

[data-theme="dark"] .maplibregl-style-list {
  background: rgba(11, 17, 32, 0.95) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

[data-theme="dark"] .maplibregl-ctrl-group .maplibregl-style-list button {
  color: rgba(255, 255, 255, 0.65) !important;
  background: transparent !important;
}

[data-theme="dark"] .maplibregl-ctrl-group .maplibregl-style-list button:hover {
  background-color: rgba(0, 229, 160, 0.08) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] .maplibregl-ctrl-group .maplibregl-style-list button.active {
  color: #00E5A0 !important;
}

[data-theme="dark"] .maplibregl-ctrl-group .maplibregl-style-list button + button {
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* OS dark mode fallback (no data-theme set yet) */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .maplibregl-ctrl-group {
    background: rgba(11, 17, 32, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5) !important;
  }

  html:not([data-theme]) .maplibregl-ctrl-group button:hover {
    background-color: rgba(0, 229, 160, 0.08) !important;
  }

  html:not([data-theme]) .maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon,
  html:not([data-theme]) .maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon,
  html:not([data-theme]) .maplibregl-ctrl-compass .maplibregl-ctrl-icon,
  html:not([data-theme]) .maplibregl-ctrl-geolocate .maplibregl-ctrl-icon {
    filter: invert(1) brightness(0.8) !important;
  }
}