/* MapLibre-specific styling. */

/* Don't show the default attribution bar — we provide our own pill. */
.maplibregl-ctrl-attrib { display: none !important; }

/* Top-left control group: navigation + draw buttons */
.maplibregl-ctrl-group {
  border-radius: 12px !important;
  overflow: hidden;
  border: none !important;
  box-shadow: 0 8px 24px rgba(31, 35, 40, 0.18);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}
.maplibregl-ctrl-group button {
  background: rgba(246, 248, 250, 0.92) !important;
  color: #24292f !important;
  border-color: rgba(208, 215, 222, 0.9) !important;
  transition: background 120ms;
}
.maplibregl-ctrl-group button:hover { background: rgba(255, 255, 255, 1) !important; }
.dark .maplibregl-ctrl-group button {
  background: rgba(22, 27, 34, 0.92) !important;
  color: #e6edf3 !important;
  border-color: rgba(48, 54, 61, 0.95) !important;
}
.dark .maplibregl-ctrl-group button:hover { background: rgba(33, 38, 45, 0.95) !important; }

/* Invert the SVG-based icons in dark mode so they remain visible against
   the dark control surface. */
.dark .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
  filter: invert(1) hue-rotate(180deg) brightness(1.05);
}

/* Popups */
.maplibregl-popup-content {
  background: rgba(255, 255, 255, 0.97) !important;
  color: #24292f !important;
  box-shadow: 0 10px 24px rgba(31, 35, 40, 0.18) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
}
.maplibregl-popup-tip { display: none; }
.dark .maplibregl-popup-content {
  background: rgba(22, 27, 34, 0.95) !important;
  color: #e6edf3 !important;
}
.maplibregl-popup-close-button {
  color: #64748b !important;
  font-size: 18px !important;
  padding: 2px 8px !important;
}

/* Dark-mode satellite tiles get a subtle desaturation, same as Leaflet. */
.dark .maplibregl-canvas-container canvas { filter: brightness(0.86) saturate(0.9); }

/* Single-click point marker. */
.mesic-point-marker {
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  background: #dc2626;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px rgba(220, 38, 38, 0.85);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ---------- Geometry toolbar ---------- */
.tool-bar {
  background: rgba(246, 248, 250, 0.92);
  border: 1px solid rgba(208, 215, 222, 0.9);
  box-shadow: 0 8px 24px rgba(31, 35, 40, 0.18);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}
.dark .tool-bar {
  background: rgba(22, 27, 34, 0.92);
  border-color: rgba(48, 54, 61, 0.95);
}
.tool-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #24292f;
  background: transparent;
  border: none;
  transition: background 120ms, color 120ms, transform 120ms;
  cursor: pointer;
}
.dark .tool-btn { color: #e6edf3; }
.tool-btn:hover { background: rgba(15, 23, 42, 0.06); }
.dark .tool-btn:hover { background: rgba(255, 255, 255, 0.08); }
.tool-btn:active { transform: scale(0.94); }
.tool-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.tool-btn:disabled:hover { background: transparent; }
.tool-btn.is-active {
  background: #658d1b;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(101, 141, 27, 0.35);
}
.tool-btn.is-active:hover { background: #547617; }
/* Edit button toggles between pencil (idle) and check (editing). */
.tool-btn .tool-icon-done { display: none; }
.tool-btn.is-editing .tool-icon-edit { display: none; }
.tool-btn.is-editing .tool-icon-done { display: block; }
.tool-btn.is-editing {
  background: #658d1b;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(101, 141, 27, 0.35);
}
.tool-btn.is-editing:hover { background: #547617; }
.tool-btn-accent { color: #547617; }
.dark .tool-btn-accent { color: #89a949; }
.tool-divider {
  height: 1px;
  margin: 4px 6px;
  background: rgba(15, 23, 42, 0.1);
}
.dark .tool-divider { background: rgba(255, 255, 255, 0.1); }

/* Cursor hint while drawing a polygon. */
.maplibregl-canvas.is-drawing { cursor: crosshair !important; }

/* Active geometry indicator badge. */
.active-badge {
  background: rgba(246, 248, 250, 0.92);
  border: 1px solid rgba(208, 215, 222, 0.9);
  color: #24292f;
  box-shadow: 0 4px 14px rgba(31, 35, 40, 0.12);
}
.dark .active-badge {
  background: rgba(22, 27, 34, 0.92);
  border-color: rgba(48, 54, 61, 0.95);
  color: #e6edf3;
}
.active-badge b { color: #547617; font-weight: 600; }
.dark .active-badge b { color: #89a949; }
.active-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.2);
}
.active-badge[data-active="point"] .active-dot {
  background: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
}
.active-badge[data-active="polygon"] .active-dot {
  background: #658d1b;
  box-shadow: 0 0 0 3px rgba(101, 141, 27, 0.25);
}
.active-badge[data-active="upload"] .active-dot {
  background: #2f7fd0;
  box-shadow: 0 0 0 3px rgba(47, 127, 208, 0.25);
}
.active-badge[data-active="watershed"] .active-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
}
.active-badge[data-active="watershed"] b { color: #b45309; }
.dark .active-badge[data-active="watershed"] b { color: #fbbf24; }
/* Bump the badge once a watershed is active so the current selection is
   easy to find even with the sidebar closed. */
.active-badge[data-active="watershed"] {
  padding: 4px 10px 4px 12px;
  font-size: 12px;
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.18);
}
.dark .active-badge[data-active="watershed"] {
  border-color: rgba(245, 158, 11, 0.45);
}
.active-badge-clear {
  display: grid;
  place-items: center;
  height: 18px;
  width: 18px;
  margin-left: 2px;
  border-radius: 9999px;
  color: rgba(31, 35, 40, 0.55);
  background: rgba(31, 35, 40, 0.06);
  transition: background 120ms, color 120ms, transform 120ms;
}
.active-badge-clear:hover { background: rgba(220, 38, 38, 0.14); color: #dc2626; }
.active-badge-clear:active { transform: scale(0.92); }
.dark .active-badge-clear { color: rgba(177, 186, 196, 0.7); background: rgba(241, 245, 249, 0.08); }
.dark .active-badge-clear:hover { background: rgba(220, 38, 38, 0.22); color: #f87171; }
.active-badge[data-active="none"] .active-badge-clear { display: none; }

/* ---------- Layers popover (top-right) ---------- */
.layer-control {
  background: rgba(246, 248, 250, 0.92);
  border: 1px solid rgba(208, 215, 222, 0.9);
  box-shadow: 0 8px 24px rgba(31, 35, 40, 0.18);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  color: #24292f;
  overflow: hidden;
  min-width: 9rem;
}
.dark .layer-control {
  background: rgba(22, 27, 34, 0.92);
  border-color: rgba(48, 54, 61, 0.95);
  color: #e6edf3;
}
.layer-control-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-size: 13px;
  font-weight: 500;
}
.layer-control-summary::-webkit-details-marker { display: none; }
.layer-control-summary > span { flex: 1; }
.layer-control-summary .chevron { transition: transform 200ms; opacity: 0.6; }
.layer-control[open] .layer-control-summary .chevron { transform: rotate(180deg); }
.layer-control[open] .layer-control-summary {
  border-bottom: 1px solid rgba(208, 215, 222, 0.5);
}
.dark .layer-control[open] .layer-control-summary {
  border-bottom-color: rgba(48, 54, 61, 0.7);
}
.layer-control-list {
  padding: 10px 14px 12px;
  min-width: 18rem;
  max-width: 22rem;
  font-size: 13px;
  /* Cap to the viewport so the open panel never runs off-screen (esp. on
     mobile); it scrolls internally instead. dvh tracks mobile browser chrome. */
  max-height: calc(100vh - 8rem);
  max-height: calc(100dvh - 8rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Themed scrollbar — Firefox + standards. */
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.18) transparent;
}
.dark .layer-control-list {
  scrollbar-color: rgba(241, 245, 249, 0.16) transparent;
}
/* WebKit/Blink. Keep the track invisible so it reads as a thin colored
   thumb floating against the glass panel. */
.layer-control-list::-webkit-scrollbar { width: 8px; }
.layer-control-list::-webkit-scrollbar-track { background: transparent; }
.layer-control-list::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.18);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.layer-control-list::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.32);
  background-clip: padding-box;
}
.dark .layer-control-list::-webkit-scrollbar-thumb {
  background: rgba(241, 245, 249, 0.16);
  background-clip: padding-box;
}
.dark .layer-control-list::-webkit-scrollbar-thumb:hover {
  background: rgba(241, 245, 249, 0.28);
  background-clip: padding-box;
}

/* When the Layers panel is open on mobile, let it span the full header row
   instead of clinging to the right edge. The brand pill is already hidden in
   this state (see app.css), so we expand the layers wrapper to fill and lift
   the panel's max-width so it reads as a centered full-width sheet. */
@media (max-width: 639px) {
  header > div:has(> #layersControl[open]) {
    flex: 1;
    min-width: 0;
  }
  #layersControl[open] {
    width: 100%;
    max-width: none;
  }
  #layersControl[open] .layer-control-list {
    min-width: 0;
    max-width: none;
  }
}
.layer-control-list .layer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
}
.layer-control-list .layer-row input[type="checkbox"] { accent-color: #658d1b; }
.layer-info-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  color: rgba(31, 35, 40, 0.5);
  border-radius: 9999px;
  padding: 2px;
  transition: color 120ms, background 120ms;
  flex-shrink: 0;
}
.layer-info-link:hover { color: #547617; background: rgba(101, 141, 27, 0.12); }
.dark .layer-info-link { color: rgba(177, 186, 196, 0.6); }
.dark .layer-info-link:hover { color: #89a949; background: rgba(101, 141, 27, 0.18); }
.layer-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(31, 35, 40, 0.55);
  margin-bottom: 8px;
}
.dark .layer-section-title { color: rgba(177, 186, 196, 0.7); }
.layer-section .panel-label { margin-top: 14px; margin-bottom: 6px; }
.layer-section .panel-label:first-of-type { margin-top: 0; }
.layer-section-divider {
  height: 1px;
  background: rgba(208, 215, 222, 0.6);
  margin: 14px -2px;
}
.dark .layer-section-divider { background: rgba(48, 54, 61, 0.7); }
.basemap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 6px;
}
.basemap-btn {
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.5);
  color: rgba(31, 35, 40, 0.85);
  font-size: 11px;
  font-weight: 500;
  padding: 5px 6px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
  text-align: center;
  line-height: 1.15;
}
.basemap-btn:hover { background: rgba(101, 141, 27, 0.08); }
.basemap-btn.is-active {
  background: #658d1b;
  color: #fff;
  border-color: #4d6c11;
}
.dark .basemap-btn {
  border-color: rgba(241, 245, 249, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(230, 237, 243, 0.85);
}
.dark .basemap-btn:hover { background: rgba(101, 141, 27, 0.18); }
.dark .basemap-btn.is-active {
  background: #658d1b;
  color: #fff;
  border-color: #4d6c11;
}

.resources-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 6px;
}
.resources-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 7px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.5);
  color: rgba(31, 35, 40, 0.85);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.15;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.resources-link:hover {
  background: rgba(101, 141, 27, 0.08);
  border-color: color-mix(in srgb, var(--accent) 30%, rgba(15, 23, 42, 0.12));
  color: var(--accent);
}
.resources-link svg { flex-shrink: 0; color: var(--accent); }
.resources-link-label { flex: 1; min-width: 0; }
.resources-beta {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  flex-shrink: 0;
}
.dark .resources-link {
  border-color: rgba(241, 245, 249, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(230, 237, 243, 0.85);
}
.dark .resources-link:hover { background: rgba(101, 141, 27, 0.18); }
.dark .resources-beta {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
}

/* ---------- Mythos credit (map bottom-right, below scale bar) ---------- */
.mythos-credit--map {
  position: fixed;
  z-index: 2;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  text-decoration: none;
  color: rgba(31, 35, 40, 0.6);
  transition: color 120ms ease, opacity 120ms ease;
}
.mythos-credit--map:hover { color: rgba(31, 35, 40, 0.9); }
.dark .mythos-credit--map { color: rgba(177, 186, 196, 0.7); }
.dark .mythos-credit--map:hover { color: rgba(230, 237, 243, 0.95); }
.mythos-credit-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.mythos-credit-logo {
  display: block;
  height: 16px;
  width: auto;
  object-fit: contain;
}

/* ---------- Theme toggle row (lives inside the Layers panel) ---------- */
/* Single button styled as a "Light mode / Dark mode" row with a sliding switch.
   The same #themeToggle id is reused by the existing JS handler. */
.theme-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink, #1f2328);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease;
}
.theme-toggle-row:hover {
  background: rgba(101, 141, 27, 0.08);
  border-color: color-mix(in srgb, #658d1b 28%, rgba(15, 23, 42, 0.1));
}
.dark .theme-toggle-row {
  border-color: rgba(241, 245, 249, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #e6edf3;
}
.dark .theme-toggle-row:hover { background: rgba(101, 141, 27, 0.16); }
.theme-toggle-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: color-mix(in srgb, #658d1b 14%, transparent);
  color: #658d1b;
  flex-shrink: 0;
}
.dark .theme-toggle-icon { background: color-mix(in srgb, #658d1b 22%, transparent); }
.theme-toggle-label { flex: 1; min-width: 0; }
.theme-toggle-switch {
  position: relative;
  width: 34px;
  height: 18px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.12);
  flex-shrink: 0;
  transition: background 200ms ease;
}
.dark .theme-toggle-switch { background: #658d1b; }
.theme-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dark .theme-toggle-knob { transform: translateX(16px); }

/* ---------- Search circle (header, desktop only) ---------- */
/* Sits next to the Layers pill on desktop; hidden on mobile so the top bar
   still collapses to a single row. Glass styling mirrors the Layers pill. */
.search-fab {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 2px 6px rgba(31, 35, 40, 0.18),
    0 12px 28px rgba(31, 35, 40, 0.12);
}
.dark .search-fab {
  box-shadow:
    0 0 0 1px rgba(48, 54, 61, 0.75),
    0 12px 28px rgba(1, 4, 9, 0.45);
}

/* ---------- Toast ---------- */
.toast {
  background: rgba(220, 38, 38, 0.96);
  color: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  max-width: 520px;
  text-align: center;
}

/* ---------- Search modal (Nominatim geocoder) ---------- */
/* The header only carries a search icon; clicking it reveals this
   top-centered modal, so the wide search box never shares the header row. */
.search-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.search-modal[hidden] { display: none; }
.search-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.3);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.search-modal-box {
  position: relative;
  margin-top: 20vh;
  width: min(34rem, 75vw);
}
.search-box {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 50px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 8px 30px rgba(31, 35, 40, 0.22);
  -webkit-backdrop-filter: saturate(135%) blur(14px);
  backdrop-filter: saturate(135%) blur(14px);
}
.dark .search-box {
  background: rgba(22, 27, 34, 0.9);
  border-color: rgba(48, 54, 61, 0.95);
  box-shadow: 0 0 0 1px rgba(48, 54, 61, 0.75), 0 8px 24px rgba(1, 4, 9, 0.4);
}
.search-box-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: rgba(31, 35, 40, 0.55);
}
.dark .search-box-icon { color: rgba(177, 186, 196, 0.7); }
.search-box input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: rgba(31, 35, 40, 0.92);
}
.dark .search-box input { color: rgba(230, 237, 243, 0.92); }
.search-box input::placeholder { color: rgba(31, 35, 40, 0.45); }
.dark .search-box input::placeholder { color: rgba(177, 186, 196, 0.55); }
.search-results {
  list-style: none;
  margin: 8px 0 0;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(31, 35, 40, 0.22);
  -webkit-backdrop-filter: saturate(135%) blur(14px);
  backdrop-filter: saturate(135%) blur(14px);
  max-height: 50vh;
  overflow-y: auto;
}
.search-results:empty { display: none; }
.dark .search-results {
  background: rgba(22, 27, 34, 0.92);
  border-color: rgba(48, 54, 61, 0.95);
  box-shadow: 0 0 0 1px rgba(48, 54, 61, 0.75), 0 8px 24px rgba(1, 4, 9, 0.4);
}
.search-result {
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(31, 35, 40, 0.9);
  cursor: pointer;
}
.dark .search-result { color: rgba(230, 237, 243, 0.9); }
.search-result:hover { background: rgba(101, 141, 27, 0.14); }
.dark .search-result:hover { background: rgba(101, 141, 27, 0.24); }
.search-result-empty {
  padding: 10px;
  font-size: 13px;
  text-align: center;
  color: rgba(31, 35, 40, 0.5);
}
.dark .search-result-empty { color: rgba(177, 186, 196, 0.55); }

/* ---------- Scale bar (bottom-right, imperial ft/mi) ----------
   Restyled to match the glass control aesthetic; sits above Mythos credit. */
.maplibregl-ctrl-bottom-right {
  right: 8px !important;
  bottom: 40px !important;
}
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-scale {
  background: rgba(246, 248, 250, 0.92);
  border: 1px solid rgba(208, 215, 222, 0.9);
  color: #24292f;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  padding: 2px 6px 3px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(31, 35, 40, 0.12);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  backdrop-filter: blur(8px) saturate(130%);
  margin: 0;
}
.dark .maplibregl-ctrl-bottom-right .maplibregl-ctrl-scale {
  background: rgba(22, 27, 34, 0.92);
  border-color: rgba(48, 54, 61, 0.95);
  color: #e6edf3;
  box-shadow: 0 4px 12px rgba(1, 4, 9, 0.4);
}