:root {
  --panel-width: 320px;
  --accent: #1a73e8;
  --border: #d7dce1;
  --bg-panel: #f7f9fb;
  --text-main: #1b1f23;
  --text-muted: #667085;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-main);
  overflow: hidden;
}

#app {
  display: flex;
  height: 100vh;
  width: 100vw;
}

/* ---------------- LEFT PANEL ---------------- */
#layerPanel {
  width: var(--panel-width);
  min-width: var(--panel-width);
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: margin-left 0.25s ease;
  z-index: 500;
}

#layerPanel.collapsed {
  margin-left: calc(-1 * var(--panel-width));
}

.panelHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.panelHeader h1 {
  font-size: 16px;
  margin: 0;
  font-weight: 600;
}

#panelToggleBtn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
#panelToggleBtn:hover { background: #eef1f4; }

.panelBody {
  overflow-y: auto;
  flex: 1;
  padding: 10px 14px 40px 14px;
}

.ctrlSection {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.ctrlSection:last-child { border-bottom: none; }

.ctrlSection h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin: 0 0 8px 0;
}

.hint { text-transform: none; font-weight: normal; letter-spacing: 0; }

.layerList { display: flex; flex-direction: column; gap: 4px; }

.layerRow {
  display: flex;
  align-items: center;
  padding: 4px 2px;
}

.layerRow label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  width: 100%;
}

.layerRow input[type="checkbox"],
.layerRow input[type="radio"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.wideBtn {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
}
.wideBtn:hover { filter: brightness(1.08); }
.wideBtn.active { background: #0d47a1; }

.secondaryBtn {
  background: #fff;
  color: var(--text-main);
  border: 1px solid var(--border);
}

.fileBtn { cursor: pointer; }

.subControl {
  margin-top: 6px;
  padding-left: 4px;
}

.smallLabel {
  font-size: 12px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
}

.subControl input[type="text"] {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 6px;
}

.smallNote {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 4px 0 0 0;
}

.smallNote a { color: var(--accent); }

.statusLine {
  font-size: 12px;
  color: var(--accent);
  min-height: 16px;
  margin-top: 4px;
}

.smallLoadBtn {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.smallLoadBtn:hover { background: #eef4ff; }

/* Opener button + group-code badge, shown top-left whenever the panel
   is collapsed (which is the default state) — this is the one place
   guaranteed visible regardless of screen size, so the group code goes
   here too rather than only inside the panel header. */
#topLeftControls {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 900;
  display: none;
  align-items: center;
  gap: 6px;
}
#layerPanel.collapsed ~ #topLeftControls { display: flex; }

#panelOpenerBtn {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.groupBadgeBtnOuter {
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* ---------------- RIGHT: MAP ---------------- */
#mapPanel {
  flex: 1;
  position: relative;
}

#map {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.coordReadout {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 800;
  background: rgba(255,255,255,0.9);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-family: monospace;
  pointer-events: none;
}

.mapTopRightControls {
  position: absolute;
  top: 12px;
  right: 10px;
  bottom: 12px;
  z-index: 800;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 260px;
  pointer-events: none;
}
.mapTopRightControls > * { pointer-events: auto; }
.mapQuickBaseButtons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.mapQuickBtn {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 4px;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  white-space: nowrap;
  width: 46px;
  text-align: center;
}
.mapQuickBtn:hover { background: #eef4ff; }
.mapQuickBtn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.mapSearchWidget {
  width: 240px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  /* On short/mobile screens the panel (esp. "Registreeri jälg", which has
     many fields) can be taller than the remaining viewport space, hiding
     the Save button below the fold. The parent (.mapTopRightControls) is
     anchored top+bottom to the viewport, so this flex/min-height:0
     combination lets the panel shrink to whatever space is actually left
     and scroll internally for the rest — a flat vh-based max-height was
     not enough because it didn't account for how far down the button
     row had already pushed the panel. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mapSearchWidgetHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}
.mapSearchWidget select,
.mapSearchWidget input[type="text"] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 8px;
}

/* Small standalone "my location" button directly on the map, stacked
   directly under the Leaflet zoom control (below) — both reachable
   with a thumb on mobile. Positioned with a small fixed gap under the
   zoom control's resized (50px) buttons, and moved up from the very
   bottom edge so it stays clear of phone gesture bars / home indicators. */
.mapLocateBtn {
  position: absolute;
  bottom: 66px;
  right: 10px;
  z-index: 800;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.mapLocateBtn:hover { background: #eef4ff; }
.mapLocateBtn.active { background: var(--accent); filter: brightness(1.1); }

/* Leaflet's own zoom +/- control, bottom-right, above the location pin. */
.leaflet-bottom.leaflet-right .leaflet-control-zoom {
  margin: 0 10px 116px 0;
}
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  width: 38px !important;
  height: 38px !important;
  line-height: 38px !important;
  font-size: 19px;
}

/* -------- User location "blue dot" (Google-Maps style) -------- */
/* Leaflet's default .leaflet-div-icon class applies its own white
   background + border box, which was silently covering our custom
   marker on some devices (this was likely the "my location not
   visible" bug) — reset it explicitly for our marker. */
.leaflet-div-icon.userLocationDot {
  background: transparent;
  border: none;
}

.userLocationDot .dotOuter {
  width: 22px; height: 22px;
  background: rgba(26,115,232,0.25);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.userLocationDot .dotInner {
  width: 12px; height: 12px;
  background: var(--accent);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(0,0,0,0.4);
}

/* -------- Popup table for PRIA / uploaded feature attributes -------- */
.popupTable { font-size: 12px; border-collapse: collapse; }
.popupTable td { padding: 2px 6px; border-bottom: 1px solid #eee; vertical-align: top; }
.popupTable td:first-child { font-weight: 600; color: var(--text-muted); white-space: nowrap; }

/* -------- EANS iframe overlay -------- */
.iframeOverlay {
  position: absolute;
  inset: 0;
  z-index: 950;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.iframeOverlayBar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #1b1f23;
  color: #fff;
  font-size: 13px;
}
.iframeOverlayBar span { flex: 1; font-weight: 600; }
.openNewTabLink { color: #9ecbff; text-decoration: none; font-size: 12px; }
.closeIframeBtn {
  background: none; border: none; color: #fff;
  font-size: 16px; cursor: pointer; padding: 2px 8px;
}
.iframeOverlay iframe {
  flex: 1;
  border: none;
  width: 100%;
}

.sourceToggle {
  display: flex;
  gap: 14px;
  margin-bottom: 8px;
  font-size: 13px;
}
.sourceToggle label {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

/* ---------------- Collapsible sections ---------------- */
.sectionHeaderRow {
  display: flex;
  align-items: center;
  gap: 6px;
}
.collapseBtn {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 20px;
  height: 20px;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.collapseBtn:hover { background: #eef4ff; }
.sectionBody.collapsed { display: none; }
.ctrlSection.noCollapse { padding-top: 4px; }

/* ---------------- PRIA grouped lists / quick buttons ---------------- */
.presetQuickButtons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}

/* ---------------- Minu kaardid: zoom + thematic controls ---------------- */
.myLayerZoomRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
}
.zoomNumberInput {
  width: 46px;
  padding: 3px 5px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
}

.thematicLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.legendColorInput {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 3px;
  cursor: pointer;
  vertical-align: middle;
}

.legendChip {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  background: #f2f2f2;
  border-radius: 10px;
  padding: 2px 8px 2px 4px;
}

/* ---------------- Search + directions ---------------- */
.nestedDivider {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin: 14px 0 8px 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
#searchLayerSelect, #searchFieldSelect, #searchTextInput {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 8px;
}
.searchResultBox {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fafbfc;
}
.directionsLink {
  display: block;
  text-align: center;
  margin-top: 8px;
  text-decoration: none;
}

/* ---------------- Generic utility ---------------- */
.hidden { display: none !important; }

#sheetJoinControls select,
#sheetJoinControls input[type="text"] {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 8px;
}

.rowWithBtn {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.rowWithBtnField { flex: 1; min-width: 0; }
.rowWithBtnField select { margin-bottom: 0; }
.rowWithBtn .smallIconBtn { margin-bottom: 8px; }

#sheetUrlInput, #repoFileUrlInput {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 8px;
}

.confirmBtnRow {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.confirmBtnRow .wideBtn { margin-bottom: 0; }
.dangerWideBtn { background: #c0392b; }
.dangerWideBtn:hover { filter: brightness(1.1); }

/* ---------------- INFO ICON BUTTONS ---------------- */
.infoIconBtn {
  background: none;
  border: 1px solid var(--border);
  color: var(--accent);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  margin-left: auto;
}
.infoIconBtn:hover { background: #eef4ff; }
.infoIconBtn.small { width: 18px; height: 18px; font-size: 11px; }

.ctrlSection h2 {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ---------------- MODAL ---------------- */
.modalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modalOverlay.hidden { display: none; }

.modalBox {
  background: #fff;
  border-radius: 10px;
  max-width: 480px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.modalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}

.modalBody {
  padding: 14px 16px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.5;
}
.modalBody h3 { margin-top: 0; }
.modalBody ul { margin: 6px 0; padding-left: 20px; }

/* ---------------- PRIA layer list / color swatches / presets ---------------- */
.colorSwatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.2);
  flex-shrink: 0;
}

.presetBar {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
}
.presetBar input[type="text"],
.presetBar select {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  min-width: 0;
}
.smallBtn {
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.smallBtn:hover { background: #eef4ff; }
.dangerBtn { color: #c0392b; }

/* ---------------- Minu kaardid: unified layer rows ---------------- */
.myLayersList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.myLayerRow {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
}

.myLayerTopLine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.myLayerTopLine label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  min-width: 0;
}

.myLayerName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.myLayerBtnGroup {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.smallIconBtn {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.smallIconBtn:hover { background: #eef4ff; }
.dangerIconBtn { color: #c0392b; }

.myLayerDetails.collapsed { display: none; }

.colorFieldLabel {
  margin-left: 6px;
}
.colorFieldLabel:first-child { margin-left: 0; }

/* Bigger, cube-like color swatches for "Värv"/"Joon" — the native
   <input type="color"> is quite small by default and its current
   color can be hard to see; this makes the selected color the clear
   focal point of the control. */
.colorSwatchInput {
  width: 34px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  vertical-align: middle;
}
.colorSwatchInput::-webkit-color-swatch-wrapper { padding: 2px; }
.colorSwatchInput::-webkit-color-swatch { border: none; border-radius: 2px; }
.colorSwatchInput::-moz-color-swatch { border: none; border-radius: 2px; }

.myLayerLabelRow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.myLayerLabelRow select {
  flex: 1;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
}

.featureLabel {
  background: rgba(255,255,255,0.85);
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  font-size: 11px;
  padding: 1px 5px;
}

/* ---------------- Generic subtle link-style button (used in group gate) ---------------- */
.linkBtn {
  background: none;
  border: none;
  color: var(--accent);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.linkBtn:hover { text-decoration: underline; }

/* ---------------- Warning banner (e.g. base layer tile failures) ---------------- */
.warningBanner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  z-index: 850;
  background: #fff3cd;
  color: #7a5b00;
  border: 1px solid #ffe08a;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  max-width: 80%;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.warningBanner.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------------- RESPONSIVE (phones / RC controller touchscreens) ---------------- */
@media (max-width: 820px) {
  :root { --panel-width: 86vw; }
  #layerPanel {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    box-shadow: 2px 0 8px rgba(0,0,0,0.2);
  }
  #mapPanel { width: 100%; }
}

/* ==========================================================================
   ULUKITE JÄLJED (wildlife track registrations)
   ========================================================================== */

.trackDateRange {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.trackDateRange input[type="date"] { flex: 1; min-width: 0; }
.trackDateRange span { color: var(--text-muted); }

.trackSpeciesRow {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.trackSpeciesSwatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.25);
}

.trackRegisterBtn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

#trackRegisterWidget textarea {
  width: 100%;
  resize: vertical;
  font-family: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 8px;
  box-sizing: border-box;
}
#trackRegisterWidget select,
#trackRegisterWidget input[type="date"],
#trackRegisterWidget input[type="number"] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 8px;
  box-sizing: border-box;
  font-size: 13px;
}

/* Cursor feedback while a point/line drawing session is active */
.map-drawing-cursor .leaflet-container { cursor: crosshair; }

/* Small rotated-triangle arrowhead marker used on line-type track features */
.trackArrowIcon {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 12px solid currentColor;
  transform-origin: 50% 50%;
}

.hundilipudBtn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ==========================================================================
   GRUPI VALIK (startup gate)
   ========================================================================== */
.groupGateOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.groupGateBox {
  position: relative;
  background: #fff;
  border-radius: 10px;
  padding: 24px 22px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.groupGateBox h2 { margin: 0 0 10px; font-size: 18px; }
.groupGateBox .wideBtn { margin-bottom: 10px; }
.groupGateBox #groupGateCloseBtn {
  position: absolute;
  top: 10px;
  right: 10px;
}
.groupGateBox input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  font-size: 20px;
  letter-spacing: 4px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin: 10px 0;
}
.groupGateCodeDisplay {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 8px;
  text-align: center;
  color: var(--accent);
  margin: 14px 0;
}

.groupBadgeBtn {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  max-width: 220px;
  white-space: normal;
  text-align: left;
  line-height: 1.4;
}
.groupBadgeBtn:hover { background: #eef4ff; }

.badgeActiveGroup {
  color: var(--accent);
  background: #eef4ff;
  border-radius: 4px;
  padding: 1px 4px;
}
.badgeInactiveGroup { color: var(--text-muted); }

/* ==========================================================================
   KIIRFILTRID (Täna / Eile / Nädal / Kõik)
   ========================================================================== */
.quickFilterRow {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}
.quickFilterBtn {
  flex: 1;
  padding: 5px 4px;
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.quickFilterBtn:hover { background: #eef4ff; }
.quickFilterBtn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.statsTable { width: 100%; border-collapse: collapse; font-size: 13px; }
.statsTable td { padding: 4px 2px; border-bottom: 1px solid var(--border); }
.statsTable td:first-child { color: var(--text-muted); }
.statsTable td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }

#statsGroupSelect {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 13px;
  box-sizing: border-box;
}

/* Grupihalduse nimekiri (Minu grupid) */
.groupGateList {
  margin: 10px 0;
  max-height: 260px;
  overflow-y: auto;
}
.groupGateRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: pointer;
}
.groupGateRow:hover { background: #f7f9fc; }
.groupGateRow.active { border-color: var(--accent); background: #eef4ff; }
.groupGateRowCode { font-weight: 700; letter-spacing: 1px; }
.groupGateRowActiveLabel { font-size: 12px; color: var(--text-muted); flex: 1; text-align: right; }
.groupGateRow.active .groupGateRowActiveLabel { color: var(--accent); font-weight: 600; }
.groupGateRowRemove {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 15px;
  color: #999;
  line-height: 1;
  padding: 2px 4px;
}
.groupGateRowRemove:hover { color: #c00; }


.activeGroupNote {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: #eef4ff;
  border-radius: 6px;
  padding: 5px 8px;
  margin-bottom: 8px;
}

/* Edit/Delete buttons inside map popups (track + hundilipud) */
.popupActionRow {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.popupEditBtn, .popupDeleteBtn {
  flex: 1;
  padding: 5px 6px;
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
}
.popupEditBtn {
  border: 1px solid var(--accent);
  background: #fff;
  color: var(--accent);
}
.popupEditBtn:hover { background: #eef4ff; }
.popupDeleteBtn {
  border: 1px solid #c62828;
  background: #fff;
  color: #c62828;
}
.popupDeleteBtn:hover { background: #fdecea; }

.editModeBanner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #b8860b;
  background: #fff8e1;
  border-radius: 6px;
  padding: 5px 8px;
  margin-bottom: 8px;
}
.editModeBanner .linkBtn { padding: 2px 6px; white-space: nowrap; }

/* Map scale bar — ported directly from SAK26's own custom implementation:
   deliberately not Leaflet's built-in L.control.scale, so its width
   always matches the quick-button stack above it exactly (Leaflet's own
   scale control picks its own "nice number" width instead of a fixed one). */
.mapScaleBar {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px 6px 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  box-sizing: border-box;
}
.mapScaleBarLabel {
  font-size: 11px;
  text-align: center;
  color: var(--text-main);
  margin-bottom: 2px;
  line-height: 1;
}
.mapScaleBarLine {
  height: 6px;
  border-left: 2px solid var(--text-main);
  border-right: 2px solid var(--text-main);
  border-bottom: 2px solid var(--text-main);
}

/* "Karja suurus" label on track markers — hidden until zoomed in past
   CONFIG.tracks.labelMinZoom (see updateTrackLabelVisibility()), toggled
   via a class on the map container rather than per-tooltip, so it's
   cheap regardless of how many tracks are on screen. */
.leaflet-tooltip.trackPackSizeLabel {
  display: none;
}
.track-labels-visible .leaflet-tooltip.trackPackSizeLabel {
  display: block;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-main);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.track-labels-visible .leaflet-tooltip.trackPackSizeLabel::before {
  display: none; /* hide Leaflet's default tooltip arrow — badge style instead */
}