/* ================================================================
   style.css – Nairobi GIS Parcel Map
   Mobile-first responsive design
   ================================================================ */

/* ── Reset & base ─────────────────────────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family:
    'Segoe UI',
    system-ui,
    -apple-system,
    sans-serif;
  background: #f5f5f5;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* ── Map fills viewport ───────────────────────────────────── */
#map {
  position: absolute;
  inset: 0;
  z-index: 0;
}
#map:fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: #fff;
}
#map:fullscreen .leaflet-control-attribution,
#map:fullscreen .leaflet-control-scale,
#map:fullscreen .leaflet-control-zoom {
  display: none !important;
}

/* ── Top bar ──────────────────────────────────────────────── */
.top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  z-index: 800;
}

/* Theme toggle icon visibility */
#btnTheme .icon-moon {
  display: none;
}
#btnTheme .icon-sun {
  display: block;
}
[data-theme='dark'] #btnTheme .icon-moon {
  display: block;
}
[data-theme='dark'] #btnTheme .icon-sun {
  display: none;
}

/* ── User dropdown menu ───────────────────────────────────── */
.user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: -8px;
  min-width: 220px;
  background: #fff;
  border-radius: 10px;
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.15),
    0 1px 3px rgba(0, 0, 0, 0.08);
  z-index: 1200;
  padding: 6px 0;
  animation: dropdownIn 0.18s ease-out;
  transform-origin: top right;
}
.user-dropdown.open {
  display: block;
}
@keyframes dropdownIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ── Search ───────────────────────────────────────────────── */
.search-toggle {
  display: none; /* desktop: hidden, search bar shown inline */
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #1f2937;
  border-radius: 6px;
  cursor: pointer;
  margin-left: auto;
}
.search-toggle:hover {
  background: #f3f4f6;
}
[data-theme='dark'] .search-toggle {
  background: #1f2937;
  color: #e5e7eb;
  border-color: #374151;
}
[data-theme='dark'] .search-toggle:hover {
  background: #374151;
}
.search-wrapper {
  position: relative;
  flex: 1;
  max-width: 380px;
  margin-left: auto;
}

#searchInput {
  width: 100%;
  height: 36px;
  padding: 0 36px 0 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
#searchInput:focus {
  border-color: #228b22;
}

.search-clear {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  background: #ccc;
  border: none;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s;
}
.search-clear:hover {
  background: #999;
}
.search-clear.visible {
  display: flex;
}

.search-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  fill: #888;
  pointer-events: none;
}

[data-theme='dark'] .search-clear {
  background: #555;
  color: #ddd;
}
[data-theme='dark'] .search-clear:hover {
  background: #777;
}

/* Autocomplete dropdown */
.autocomplete {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  display: none;
  z-index: 900;
}
.autocomplete.active {
  display: block;
}

.autocomplete-item {
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s;
}
.autocomplete-item:hover,
.autocomplete-item.active {
  background: #e8f5e9;
}

.autocomplete-item .label {
  font-weight: 600;
  color: #333;
}
.autocomplete-item .ac-label {
  font-weight: 600;
  color: #333;
}
.autocomplete-item .sub {
  font-size: 12px;
  color: #777;
  margin-top: 2px;
}
.autocomplete-item .ac-sub {
  font-size: 12px;
  color: #777;
  margin-top: 2px;
}
.autocomplete-empty {
  padding: 12px;
  font-size: 13px;
  color: #999;
  text-align: center;
  font-style: italic;
}

/* ── Graticule labels ─────────────────────────────────────── */
.graticule-label {
  font-size: 10px;
  color: #555;
  opacity: 0.6;
  white-space: nowrap;
  pointer-events: none;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  font-family: monospace;
}
.graticule-label-bottom {
  text-align: center;
}

/* ── Map controls (right side) ────────────────────────────── */
.map-controls {
  position: absolute;
  top: 64px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 700;
}

.ctrl-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: none;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.15s;
}
.ctrl-btn:hover {
  background: #f0f0f0;
}
.ctrl-btn:active {
  transform: scale(0.92);
}
.ctrl-btn svg {
  width: 20px;
  height: 20px;
  fill: #333;
}
.ctrl-btn.active {
  background: #228b22;
}
.ctrl-btn.active svg {
  fill: #fff;
}
.ctrl-btn--clear svg {
  fill: #dc2626;
}
.ctrl-btn--clear:hover {
  background: #fef2f2;
}

/* ── Tile loading progress bar ────────────────────────────── */
.tile-progress {
  position: absolute;
  top: 52px;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 801;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.tile-progress.active {
  opacity: 1;
}
.tile-progress.active::after {
  content: '';
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #228b22, #4caf50, #81c784, #228b22);
  background-size: 300% 100%;
  animation: tileSlide 1.2s linear infinite;
  border-radius: 0 0 2px 2px;
}
.tile-progress.done::after {
  animation: none;
  background: #4caf50;
  width: 100%;
}
@keyframes tileSlide {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
[data-theme='dark'] .tile-progress.active::after {
  background: linear-gradient(90deg, #1b5e20, #388e3c, #66bb6a, #1b5e20);
  background-size: 300% 100%;
  animation: tileSlide 1.2s linear infinite;
}
[data-theme='dark'] .tile-progress.done::after {
  background: #388e3c;
}

/* ── Loading spinner ──────────────────────────────────────── */
.loader {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(2px);
  z-index: 900;
  animation: loaderFadeIn 0.2s ease;
}
.loader.active {
  display: flex;
}
@keyframes loaderFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.loader-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 36px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.loader-spinner {
  position: relative;
  width: 56px;
  height: 56px;
}
.loader-ring {
  width: 56px;
  height: 56px;
  animation: spin 1s linear infinite;
}
.loader-ring circle {
  stroke: #228b22;
  stroke-dasharray: 80, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: loaderDash 1.4s ease-in-out infinite;
}
@keyframes loaderDash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 80, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 80, 200;
    stroke-dashoffset: -124;
  }
}
.loader-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  fill: #228b22;
  animation: loaderPulse 1.2s ease-in-out infinite;
}
@keyframes loaderPulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.15);
  }
}

.loader-text {
  font-size: 14px;
  font-weight: 600;
  color: #1a3c34;
  letter-spacing: 0.3px;
}

.loader-dots {
  display: flex;
  gap: 6px;
}
.loader-dots span {
  width: 6px;
  height: 6px;
  background: #228b22;
  border-radius: 50%;
  animation: loaderBounce 1.2s ease-in-out infinite;
}
.loader-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.loader-dots span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes loaderBounce {
  0%,
  80%,
  100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Dark mode loader */
[data-theme='dark'] .loader-card {
  background: rgba(42, 42, 74, 0.92);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
[data-theme='dark'] .loader-text {
  color: #e0e0e0;
}
[data-theme='dark'] .loader-ring circle {
  stroke: #4caf50;
}
[data-theme='dark'] .loader-icon {
  fill: #4caf50;
}
[data-theme='dark'] .loader-dots span {
  background: #4caf50;
}

/* ── Info popup ─────────────────────────────────────────────── */

/* ── Legend ────────────────────────────────────────────────── */
.legend {
  position: absolute;
  bottom: 24px;
  right: 12px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  font-size: 12px;
  z-index: 700;
}
.legend h5 {
  margin-bottom: 6px;
  font-size: 13px;
  color: #333;
}
.legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

/* ── Report Issue Modal ───────────────────────────────────── */
.issue-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}
.issue-overlay.open {
  display: flex;
}
@keyframes issueSlide {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ── Attribute table ──────────────────────────────────────── */
.attr-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 40vh;
  background: #fff;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 850;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.attr-panel.open {
  transform: translateY(0);
}

.attr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: #1a3c34;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.attr-header button {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

.attr-body {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.attr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.attr-table th {
  position: sticky;
  top: 0;
  background: #e8f5e9;
  padding: 6px 10px;
  text-align: left;
  font-weight: 600;
  color: #333;
  border-bottom: 2px solid #c8e6c9;
}
.attr-table td {
  padding: 5px 10px;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
}
.attr-table tr:hover {
  background: #f0faf0;
  cursor: pointer;
}
.attr-table tr.selected {
  background: #e3f2fd;
  box-shadow: inset 3px 0 0 #1565c0;
}

/* ── Coordinate display (follows cursor) ───────────────── */
.coord-bar {
  position: fixed;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  font-size: 11px;
  font-family: 'Consolas', 'Monaco', monospace;
  color: #333;
  z-index: 1200;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  white-space: nowrap;
}

/* ── Toast notifications ──────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  background: rgba(30, 30, 30, 0.92);
  backdrop-filter: blur(8px);
  color: #f0f0f0;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  z-index: 9999;
  max-width: 340px;
  white-space: nowrap;
}
.toast::before {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #228b22;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* ── Layer sidebar ─────────────────────────────────────────── */
.layer-sidebar {
  position: absolute;
  top: 52px;
  left: 0;
  bottom: 0;
  width: 280px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.12);
  z-index: 810;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.layer-sidebar.open {
  transform: translateX(0);
}

/* ── App Sidebar (right, icon tabs + content panels) ──────── */
.app-sidebar {
  position: absolute;
  top: 52px;
  right: 0;
  bottom: 0;
  display: flex;
  z-index: 810;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.app-sidebar.open {
  transform: translateX(0);
}

/* Close button */
.app-sidebar-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.app-sidebar.open .app-sidebar-close {
  opacity: 1;
  pointer-events: auto;
}

/* Icon strip */
.app-sidebar-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  background: #1a3c34;
  width: 44px;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
}
.app-sidebar-menu .sb-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  cursor: pointer;
  transition: background 0.15s;
}
.app-sidebar-menu .sb-item:hover {
  background: rgba(255, 255, 255, 0.1);
}
.app-sidebar-menu .sb-item.active {
  background: #228b22;
}
.app-sidebar-menu .sb-item svg {
  width: 20px;
  height: 20px;
  fill: #a5d6a7;
  pointer-events: none;
  display: block;
}
.app-sidebar-menu .sb-item.active svg {
  fill: #ffff00;
}

/* Content area */
.app-sidebar-content {
  width: 300px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.app-sidebar.open .app-sidebar-content {
  opacity: 1;
  pointer-events: auto;
}

/* Panels */
.sb-panel {
  display: none;
  flex-direction: column;
  height: 100%;
}
.sb-panel.active {
  display: flex;
}
.sb-panel h2 {
  margin: 0;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffff00;
  background: #1a3c34;
  flex-shrink: 0;
}
.sb-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: #333;
  -webkit-overflow-scrolling: touch;
}
.sb-panel-body h4 {
  margin: 14px 0 6px;
  font-size: 13px;
  color: #1a3c34;
  font-weight: 700;
}
.sb-panel-body ul {
  margin: 0 0 10px 18px;
  padding: 0;
}
.sb-panel-body li {
  margin-bottom: 4px;
}
.sb-panel-body a {
  color: #228b22;
  text-decoration: none;
  border-bottom: 1px dotted #228b22;
}
.sb-panel-body a:hover {
  color: #1a3c34;
}
.sb-panel-body details {
  margin-bottom: 8px;
  border-left: 3px solid #228b22;
  padding: 6px 10px;
  background: #f0f9f4;
  border-radius: 4px;
}
.sb-panel-body summary {
  cursor: pointer;
  font-weight: 600;
  color: #228b22;
}
.sb-panel-body details[open] summary {
  margin-bottom: 6px;
}
.sb-panel-body kbd {
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 12px;
  font-family: monospace;
}
.sb-signature {
  margin-top: 20px;
  text-align: right;
  color: #777;
}

/* Download list inside sidebar */
.sb-download-list {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}
.sb-download-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
.sb-download-list a {
  font-size: 12px;
  font-weight: 600;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #1a3c34;
  color: #fff;
  flex-shrink: 0;
}
.sidebar-header h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}
.sidebar-header button {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.layer-list {
  list-style: none;
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
  -webkit-overflow-scrolling: touch;
}

/* ── Categorised sidebar (filter toolbar + group accordions) ── */
.layer-toolbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
}
.layer-filter {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  padding: 4px 6px 4px 8px;
  color: #64748b;
}
.layer-filter svg {
  flex-shrink: 0;
  opacity: 0.6;
}
.layer-filter input[type='search'] {
  flex: 1;
  border: 0;
  outline: 0;
  padding: 4px 6px;
  font-size: 12.5px;
  background: transparent;
  color: #0f172a;
  min-width: 0;
}
#layerFilterClear {
  border: 0;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  padding: 0 4px;
}
#layerFilterClear:hover {
  color: #475569;
}
.layer-toolbar-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.layer-mini-btn {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  color: #475569;
  cursor: pointer;
  transition: background 0.15s;
}
.layer-mini-btn:hover {
  background: #e8f5e9;
  color: #1a3c34;
}

/* Category accordion */
.layer-list .layer-group {
  padding: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.layer-list .layer-group > details {
  margin: 0;
}
.layer-list .layer-group > details > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  background: rgba(0, 0, 0, 0.025);
  list-style: none;
  user-select: none;
}
.layer-list .layer-group > details > summary::-webkit-details-marker {
  display: none;
}
.layer-list .layer-group > details > summary:hover {
  background: rgba(34, 139, 34, 0.08);
  color: #1a3c34;
}
.lg-caret {
  display: inline-block;
  font-size: 10px;
  color: #94a3b8;
  transition: transform 0.15s;
}
.layer-list .layer-group > details[open] > summary .lg-caret {
  transform: rotate(90deg);
}
.lg-name {
  flex: 1;
}
.lg-count {
  font-size: 10.5px;
  background: rgba(15, 58, 50, 0.08);
  color: #1a3c34;
  padding: 1px 7px;
  border-radius: 9999px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.layer-group-actions {
  display: flex;
  gap: 6px;
  padding: 4px 14px 6px;
  background: rgba(0, 0, 0, 0.012);
}
.layer-sublist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.layer-sublist .layer-row {
  padding: 0;
}
.layer-sublist .layer-row label {
  padding-left: 26px; /* indent under group */
}
.layer-empty {
  padding: 16px 14px;
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
  text-align: center;
}

.layer-list li {
  padding: 0;
}
.layer-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s;
}
.layer-list label:hover {
  background: #e8f5e9;
}
.layer-list input[type='checkbox'] {
  accent-color: #228b22;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.layer-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}
.layer-label {
  flex: 1;
  color: #333;
}
.layer-badge {
  font-size: 10px;
  background: #ff9800;
  color: #fff;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
}
.layer-zoom {
  font-size: 10px;
  color: #999;
  font-style: italic;
}

/* Layer opacity slider */
.layer-opacity {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 14px 8px 38px;
}
.layer-opacity-slider {
  flex: 1;
  height: 4px;
  accent-color: #228b22;
  cursor: pointer;
}
.layer-opacity-val {
  font-size: 10px;
  color: #888;
  min-width: 30px;
  text-align: right;
}

/* ── Remove focus outline on map vector clicks ────────────── */
.leaflet-interactive:focus {
  outline: none;
}

/* ── Map tooltip override ─────────────────────────────────── */
.map-tooltip {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* ── Feature popup ────────────────────────────────────────── */
.feat-popup {
  min-width: 220px;
  max-width: 320px;
}
.feat-popup h4 {
  margin: 0 0 6px;
  font-size: 14px;
  color: #1a3c34;
}
.popup-badge {
  display: inline-block;
  font-size: 10px;
  background: #228b22;
  color: #fff;
  padding: 1px 8px;
  border-radius: 8px;
  margin-bottom: 6px;
}
.feat-popup table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
}
.feat-popup td {
  padding: 3px 0;
  vertical-align: top;
}
.feat-popup td:first-child {
  font-weight: 600;
  color: #555;
  width: 110px;
  text-transform: capitalize;
}

/* ── Table badge ──────────────────────────────────────────── */
.table-badge {
  display: inline-block;
  font-size: 10px;
  background: #e8f5e9;
  color: #2e7d32;
  padding: 1px 6px;
  border-radius: 6px;
  font-weight: 600;
}

/* ================================================================
   DARK THEME
   ================================================================ */
[data-theme='dark'] body {
  background: #1a1a2e;
}

/* Top bar */
[data-theme='dark'] .top-bar {
  background: rgba(26, 26, 46, 0.94);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
[data-theme='dark'] .top-bar h1 {
  color: #e0e0e0;
}

/* User dropdown dark */
[data-theme='dark'] .user-dropdown {
  background: #1e1e3a;
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.4),
    0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Search */
[data-theme='dark'] #searchInput {
  background: #2a2a4a;
  border-color: #444;
  color: #e0e0e0;
}
[data-theme='dark'] #searchInput::placeholder {
  color: #888;
}
[data-theme='dark'] #searchInput:focus {
  border-color: #4caf50;
}
[data-theme='dark'] .search-icon {
  fill: #999;
}

/* Autocomplete */
[data-theme='dark'] .autocomplete {
  background: #2a2a4a;
  border-color: #444;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
[data-theme='dark'] .autocomplete-item {
  border-bottom-color: #3a3a5a;
}
[data-theme='dark'] .autocomplete-item:hover,
[data-theme='dark'] .autocomplete-item.active {
  background: #1a3c34;
}
[data-theme='dark'] .autocomplete-item .ac-label,
[data-theme='dark'] .autocomplete-item .label {
  color: #e0e0e0;
}
[data-theme='dark'] .autocomplete-item .ac-sub,
[data-theme='dark'] .autocomplete-item .sub {
  color: #999;
}
[data-theme='dark'] .autocomplete-empty {
  color: #777;
}

/* Map controls */
[data-theme='dark'] .ctrl-btn {
  background: #2a2a4a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
[data-theme='dark'] .ctrl-btn:hover {
  background: #3a3a5a;
}
[data-theme='dark'] .ctrl-btn svg {
  fill: #ddd;
}
[data-theme='dark'] .ctrl-btn.active {
  background: #228b22;
}
[data-theme='dark'] .ctrl-btn.active svg {
  fill: #fff;
}
[data-theme='dark'] .ctrl-btn--clear svg {
  fill: #f87171;
}
[data-theme='dark'] .ctrl-btn--clear:hover {
  background: rgba(220, 38, 38, 0.15);
}

/* Layer sidebar */
[data-theme='dark'] .layer-sidebar {
  background: rgba(26, 26, 46, 0.97);
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.35);
}
[data-theme='dark'] .layer-list label:hover {
  background: rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .layer-label {
  color: #ddd;
}

/* Categorised sidebar — dark */
[data-theme='dark'] .layer-toolbar {
  background: rgba(255, 255, 255, 0.03);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme='dark'] .layer-filter {
  background: #1e1e3a;
  border-color: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}
[data-theme='dark'] .layer-filter input[type='search'] {
  color: #e0e0e0;
}
[data-theme='dark'] .layer-mini-btn {
  background: #2a2a4a;
  border-color: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}
[data-theme='dark'] .layer-mini-btn:hover {
  background: #1a3c34;
  color: #a5d6a7;
}
[data-theme='dark'] .layer-list .layer-group {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}
[data-theme='dark'] .layer-list .layer-group > details > summary {
  background: rgba(255, 255, 255, 0.03);
  color: #cbd5e1;
}
[data-theme='dark'] .layer-list .layer-group > details > summary:hover {
  background: rgba(34, 139, 34, 0.18);
  color: #a5d6a7;
}
[data-theme='dark'] .lg-count {
  background: rgba(165, 214, 167, 0.15);
  color: #a5d6a7;
}
[data-theme='dark'] .layer-group-actions {
  background: rgba(255, 255, 255, 0.02);
}
[data-theme='dark'] .layer-empty {
  color: #64748b;
}

/* App sidebar */
[data-theme='dark'] .app-sidebar-content {
  background: rgba(26, 26, 46, 0.97);
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.35);
}
[data-theme='dark'] .sb-panel-body {
  color: #ccc;
}
[data-theme='dark'] .sb-panel-body h4 {
  color: #a5d6a7;
}
[data-theme='dark'] .sb-panel-body a {
  color: #66bb6a;
  border-bottom-color: #66bb6a;
}
[data-theme='dark'] .sb-panel-body a:hover {
  color: #a5d6a7;
}
[data-theme='dark'] .sb-panel-body details {
  background: #1a3c34;
  border-left-color: #4caf50;
}
[data-theme='dark'] .sb-panel-body summary {
  color: #66bb6a;
}
[data-theme='dark'] .sb-panel-body kbd {
  background: #333;
  border-color: #555;
  color: #ddd;
}
[data-theme='dark'] .sb-download-list li {
  border-bottom-color: #3a3a5a;
}

/* Attribute panel */
[data-theme='dark'] .attr-panel {
  background: #1e1e3a;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.4);
}
[data-theme='dark'] .attr-table th {
  background: #1a3c34;
  color: #e0e0e0;
  border-bottom-color: #2a5a2a;
}
[data-theme='dark'] .attr-table td {
  color: #ccc;
  border-bottom-color: #2a2a4a;
}
[data-theme='dark'] .attr-table tr:hover {
  background: rgba(21, 101, 192, 0.08);
}
[data-theme='dark'] .attr-table tr.selected {
  background: rgba(21, 101, 192, 0.18);
  box-shadow: inset 3px 0 0 #42a5f5;
}

/* Toast */
[data-theme='dark'] .toast {
  background: rgba(15, 23, 42, 0.94);
  color: #e2e8f0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Coordinate bar */
[data-theme='dark'] .coord-bar {
  background: rgba(26, 26, 46, 0.92);
  color: #e5e7eb;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Layer opacity */
[data-theme='dark'] .layer-opacity-slider {
  accent-color: #4caf50;
}
[data-theme='dark'] .layer-opacity-val {
  color: #aaa;
}

/* Legend */
[data-theme='dark'] .legend {
  background: rgba(26, 26, 46, 0.92);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
[data-theme='dark'] .legend h5 {
  color: #e0e0e0;
}

/* Tooltip & popup */
[data-theme='dark'] .map-tooltip {
  background: rgba(30, 30, 58, 0.95);
  border-color: #555;
  color: #ddd;
}
[data-theme='dark'] .feat-popup h4 {
  color: #a5d6a7;
}
[data-theme='dark'] .feat-popup td:first-child {
  color: #aaa;
}

/* Graticule */
[data-theme='dark'] .graticule-label {
  color: #aaa;
}

/* Leaflet zoom control */
.leaflet-top.leaflet-left {
  top: 60px;
}

[data-theme='dark'] .leaflet-control-zoom a {
  background: #2a2a4a;
  color: #ddd;
  border-color: #444;
}
[data-theme='dark'] .leaflet-control-zoom a:hover {
  background: #3a3a5a;
}

/* Leaflet popups */
[data-theme='dark'] .leaflet-popup-content-wrapper {
  background: #2a2a4a;
  color: #ddd;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.5);
}
[data-theme='dark'] .leaflet-popup-tip {
  background: #2a2a4a;
}
[data-theme='dark'] .leaflet-popup-close-button {
  color: #aaa;
}

/* Leaflet attribution */
[data-theme='dark'] .leaflet-control-attribution {
  background: rgba(26, 26, 46, 0.8) !important;
  color: #999;
}
[data-theme='dark'] .leaflet-control-attribution a {
  color: #66bb6a;
}

/* ── Floating Report Issue button ─────────────────────── */
.report-fab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 6px 10px;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
  transition:
    background 0.2s,
    box-shadow 0.2s,
    transform 0.15s;
  flex-shrink: 0;
}
.report-fab:hover {
  background: #b91c1c;
  box-shadow: 0 4px 18px rgba(220, 38, 38, 0.45);
  transform: translateY(-1px);
}
.report-fab:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}
.report-fab svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

[data-theme='dark'] .report-fab {
  background: #991b1b;
  box-shadow: 0 3px 12px rgba(153, 27, 27, 0.4);
}
[data-theme='dark'] .report-fab:hover {
  background: #b91c1c;
  box-shadow: 0 4px 18px rgba(185, 28, 28, 0.5);
}

/* ── WhatsApp billing button ──────────────────────────────── */
.whatsapp-fab {
  background: #25d366;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.35);
  text-decoration: none;
}
.whatsapp-fab:hover {
  background: #1ebe5d;
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.5);
  transform: translateY(-1px);
  color: #fff;
}
.whatsapp-fab:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.35);
}
[data-theme='dark'] .whatsapp-fab {
  background: #128c47;
  box-shadow: 0 3px 12px rgba(18, 140, 71, 0.4);
}
[data-theme='dark'] .whatsapp-fab:hover {
  background: #1ebe5d;
  box-shadow: 0 4px 18px rgba(30, 190, 93, 0.5);
}

/* ── Guide button + modal ─────────────────────────────────── */
.guide-fab {
  background: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}
.guide-fab:hover {
  background: #1d4ed8;
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.5);
  transform: translateY(-1px);
  color: #fff;
}
.guide-fab:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}
[data-theme='dark'] .guide-fab {
  background: #1e40af;
  box-shadow: 0 3px 12px rgba(30, 64, 175, 0.45);
}
[data-theme='dark'] .guide-fab:hover {
  background: #2563eb;
}

.guide-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
[data-theme='dark'] .guide-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.guide-tab {
  background: transparent;
  border: 0;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: inherit;
  opacity: 0.65;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 6px 6px 0 0;
}
.guide-tab:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.04);
}
[data-theme='dark'] .guide-tab:hover {
  background: rgba(255, 255, 255, 0.06);
}
.guide-tab.active {
  opacity: 1;
  color: #2563eb;
  border-bottom-color: #2563eb;
}
[data-theme='dark'] .guide-tab.active {
  color: #60a5fa;
  border-bottom-color: #60a5fa;
}
.guide-body {
  font-size: 14px;
  line-height: 1.55;
}
.guide-pane {
  display: none;
}
.guide-pane.active {
  display: block;
}
.guide-pane h4 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 8px;
  color: inherit;
}
.guide-pane p {
  margin: 0 0 10px;
}
.guide-pane ul {
  list-style: disc;
  padding-left: 20px;
  margin: 0 0 8px;
}
.guide-pane ul li {
  margin-bottom: 6px;
}
.guide-pane code {
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12.5px;
}
[data-theme='dark'] .guide-pane code {
  background: rgba(255, 255, 255, 0.1);
}
.guide-pane kbd {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11.5px;
  font-family: 'Consolas', monospace;
  color: #1f2937;
  display: inline-block;
}
[data-theme='dark'] .guide-pane kbd {
  background: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}
.guide-kbd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.guide-kbd-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
[data-theme='dark'] .guide-kbd-table td {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.guide-kbd-table td:first-child {
  width: 38%;
  white-space: nowrap;
}

/* ── Right-click context menu ─────────────────────────────── */
.ctx-menu {
  position: fixed;
  display: none;
  min-width: 220px;
  max-width: 300px;
  background: #fff;
  border-radius: 10px;
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.18),
    0 1px 4px rgba(0, 0, 0, 0.08);
  z-index: 10000;
  overflow: hidden;
  font-family: inherit;
  animation: ctxFadeIn 0.12s ease;
}
.ctx-menu.active {
  display: block;
}
@keyframes ctxFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.ctx-header {
  padding: 10px 14px 8px;
  font-size: 11.5px;
  font-family: 'Consolas', 'Monaco', monospace;
  color: #555;
  background: #f8f9fa;
  border-bottom: 1px solid #eee;
  user-select: all;
}
.ctx-features {
  max-height: 150px;
  overflow-y: auto;
}
.ctx-features:empty {
  display: none;
}
.ctx-features .ctx-feat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 12px;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
}
.ctx-features .ctx-feat-item:last-child {
  border-bottom: none;
}
.ctx-feat-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.ctx-feat-label {
  font-weight: 600;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ctx-feat-layer {
  font-size: 10.5px;
  color: #999;
  white-space: nowrap;
}
.ctx-divider {
  height: 1px;
  background: #eee;
  margin: 0;
}
.ctx-features + .ctx-divider {
  display: block;
}
.ctx-features:empty + .ctx-divider {
  display: none;
}
.ctx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
  font-size: 12.5px;
  color: #333;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: background 0.12s;
}
.ctx-item:hover {
  background: #f0faf0;
}
.ctx-item svg {
  width: 16px;
  height: 16px;
  fill: #666;
  flex-shrink: 0;
}

/* Dark mode */
[data-theme='dark'] .ctx-menu {
  background: #1e293b;
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.45),
    0 1px 4px rgba(0, 0, 0, 0.2);
}
[data-theme='dark'] .ctx-header {
  background: #0f172a;
  border-bottom-color: #334155;
  color: #94a3b8;
}
[data-theme='dark'] .ctx-features .ctx-feat-item {
  color: #e2e8f0;
  border-bottom-color: #334155;
}
[data-theme='dark'] .ctx-feat-layer {
  color: #64748b;
}
[data-theme='dark'] .ctx-divider {
  background: #334155;
}
[data-theme='dark'] .ctx-item {
  color: #e2e8f0;
}
[data-theme='dark'] .ctx-item:hover {
  background: rgba(34, 139, 34, 0.1);
}
[data-theme='dark'] .ctx-item svg {
  fill: #94a3b8;
}

/* ── AI Chat Panel ────────────────────────────────────────── */
.ai-panel {
  position: fixed;
  right: 60px;
  top: 57px;
  width: 340px;
  max-height: calc(100vh - 90px);
  background: #fff;
  border-radius: 12px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.15),
    0 1px 4px rgba(0, 0, 0, 0.06);
  z-index: 900;
  display: none;
  flex-direction: column;
  overflow: hidden;
  font-family: inherit;
  animation: aiSlideIn 0.2s ease;
}
.ai-panel.open {
  display: flex;
}
@keyframes aiSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(135deg, #228b22, #1a6f1a);
  color: #fff;
}
.ai-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
}
.ai-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s;
  line-height: 1;
}
.ai-close:hover {
  opacity: 1;
}

.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 120px;
  max-height: 50vh;
}
.ai-msg {
  font-size: 12.5px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 10px;
  max-width: 92%;
}
.ai-msg strong {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
  opacity: 0.6;
}
.ai-msg p {
  margin: 0 0 6px;
}
.ai-msg--bot {
  background: #f0faf0;
  color: #14352e;
  align-self: flex-start;
  border-bottom-left-radius: 3px;
}
.ai-msg--user {
  background: #228b22;
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 3px;
}
.ai-msg--user strong {
  color: rgba(255, 255, 255, 0.7);
}
.ai-msg--error {
  background: #fef2f2;
  color: #dc2626;
  align-self: flex-start;
  border-bottom-left-radius: 3px;
  font-size: 11.5px;
}
.ai-msg--loading {
  align-self: flex-start;
  padding: 8px 16px;
}
.ai-typing {
  display: inline-flex;
  gap: 4px;
}
.ai-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #228b22;
  animation: aiDot 1.2s ease-in-out infinite;
}
.ai-typing span:nth-child(2) {
  animation-delay: 0.15s;
}
.ai-typing span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes aiDot {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.3;
  }
  30% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

.ai-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.ai-suggest {
  padding: 4px 10px;
  font-size: 11px;
  border: 1px solid #a7d5a7;
  background: #fff;
  border-radius: 12px;
  cursor: pointer;
  color: #1a6f1a;
  font-family: inherit;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.ai-suggest:hover {
  background: #e8f5e8;
  border-color: #228b22;
}

.ai-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid #eee;
  background: #fafafa;
}
.ai-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  background: #fff;
  color: #1a1a2e;
}
.ai-input:focus {
  border-color: #228b22;
}
.ai-send {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: #228b22;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
}
.ai-send:hover {
  background: #1a6f1a;
}
.ai-send:disabled {
  background: #8fc68f;
  cursor: default;
}

/* AI action chips in bot messages */
.ai-action-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 4px 4px 0 0;
  padding: 3px 10px;
  font-size: 11px;
  background: #e8f5e8;
  border: 1px solid #a7d5a7;
  border-radius: 12px;
  cursor: pointer;
  color: #1a6f1a;
  font-family: inherit;
  transition: background 0.15s;
}
.ai-action-chip:hover {
  background: #c8e6c8;
}

/* ── AI Dark mode ──────────────────────────────────────────── */
[data-theme='dark'] .ai-panel {
  background: #1a2e1a;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
[data-theme='dark'] .ai-msg--bot {
  background: #1e3a1e;
  color: #d4ecd4;
}
[data-theme='dark'] .ai-msg--user {
  background: #1a6f1a;
}
[data-theme='dark'] .ai-msg--error {
  background: #3b1010;
  color: #fca5a5;
}
[data-theme='dark'] .ai-typing span {
  background: #4ade80;
}
[data-theme='dark'] .ai-suggest {
  background: #1e3a1e;
  border-color: #2d5a2d;
  color: #86efac;
}
[data-theme='dark'] .ai-suggest:hover {
  background: #2a4d2a;
  border-color: #228b22;
}
[data-theme='dark'] .ai-input-row {
  background: #142014;
  border-top-color: #1e3a1e;
}
[data-theme='dark'] .ai-input {
  background: #1e3a1e;
  border-color: #2d5a2d;
  color: #e0e0e0;
}
[data-theme='dark'] .ai-input:focus {
  border-color: #228b22;
}
[data-theme='dark'] .ai-action-chip {
  background: #1e3a1e;
  border-color: #2d5a2d;
  color: #86efac;
}
[data-theme='dark'] .ai-action-chip:hover {
  background: #2a4d2a;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .legend {
    bottom: 12px;
    right: 8px;
    padding: 8px 10px;
    font-size: 11px;
  }
  .map-controls {
    top: 60px;
    right: 8px;
  }
  .ctrl-btn {
    width: 34px;
    height: 34px;
  }
  .layer-sidebar {
    width: 240px;
  }
  .app-sidebar-content {
    width: 240px;
  }
  .app-sidebar-menu {
    width: 38px;
  }
  .coord-bar {
    font-size: 10px;
    padding: 2px 6px;
  }
  .report-fab {
    padding: 5px 8px;
    font-size: 11px;
    border-radius: 6px;
  }
  .report-fab span {
    display: none;
  }
  .leaflet-control-scale {
    display: none !important;
  }
  .top-bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    justify-content: space-between;
    gap: 6px;
    padding: 0 8px;
  }
  .search-toggle {
    display: inline-flex;
  }
  .search-wrapper {
    position: fixed !important;
    top: 52px; /* sit just under the top bar, NOT at the bottom */
    bottom: auto !important;
    left: 12px;
    right: 12px;
    max-width: none;
    margin-left: 0;
    z-index: 850;
    flex: none;
    display: none; /* hidden by default; toggle button reveals it */
  }
  .search-wrapper.open {
    display: block;
  }
  .autocomplete {
    top: 42px;
    bottom: auto;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  }
  .ai-panel {
    right: 8px;
    left: 8px;
    top: 52px;
    width: auto;
    max-height: calc(100vh - 70px);
  }
}

/* ============================================================
   Theme-aware overrides for the map overlay UI.
   Light mode uses explicit solid colors (Leaflet UI must NEVER
   be transparent over basemap tiles). Dark mode overrides come
   from the existing [data-theme='dark'] blocks above.
   ============================================================ */

/* Map controls (right-side floating column) — solid surfaces */
.ctrl-btn {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #1f2937;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.ctrl-btn:hover {
  background: #f3f4f6;
}
.ctrl-btn svg {
  fill: #1f2937;
}
.ctrl-btn.active {
  background: #228b22;
  border-color: #228b22;
}
.ctrl-btn.active svg {
  fill: #ffffff;
}

/* Dark-mode ctrl-btn surfaces */
[data-theme='dark'] .ctrl-btn {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
[data-theme='dark'] .ctrl-btn:hover {
  background: #334155;
}
[data-theme='dark'] .ctrl-btn svg {
  fill: #e2e8f0;
}
[data-theme='dark'] .ctrl-btn.active {
  background: #4caf50;
  border-color: #4caf50;
}

/* Layer + app sidebars use solid surfaces in dark mode */
[data-theme='dark'] .layer-sidebar,
[data-theme='dark'] .app-sidebar,
[data-theme='dark'] .app-sidebar-content {
  background: #1e293b;
  color: #e2e8f0;
}

/* Leaflet zoom & scale controls — explicit, opaque */
.leaflet-control-zoom a,
.leaflet-bar a {
  background: #ffffff !important;
  color: #1f2937 !important;
  border-color: #e5e7eb !important;
}
.leaflet-control-zoom a:hover,
.leaflet-bar a:hover {
  background: #f3f4f6 !important;
}
[data-theme='dark'] .leaflet-control-zoom a,
[data-theme='dark'] .leaflet-bar a {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}
[data-theme='dark'] .leaflet-control-zoom a:hover,
[data-theme='dark'] .leaflet-bar a:hover {
  background: #334155 !important;
}
.leaflet-control-attribution,
.leaflet-control-scale-line {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #4b5563 !important;
  border-color: #e5e7eb !important;
}
.leaflet-control-attribution a {
  color: #1565c0 !important;
}
[data-theme='dark'] .leaflet-control-attribution,
[data-theme='dark'] .leaflet-control-scale-line {
  background: rgba(15, 23, 42, 0.92) !important;
  color: #cbd5e1 !important;
  border-color: #334155 !important;
}

/* Modern Mapbox-style marker pin (used by point GeoJSON layers) */
.modern-marker {
  background: transparent !important;
  border: none !important;
}
.modern-marker .mm-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 0 0 2px rgba(255, 255, 255, 0.85);
  transition: transform 0.15s ease;
}
.modern-marker .mm-pin svg {
  transform: rotate(45deg);
}
.modern-marker:hover .mm-pin {
  transform: rotate(-45deg) scale(1.12);
}

/* Locked download list (signed-out state) */
.sb-download-locked {
  list-style: none;
  padding: 0;
  margin: 8px 0;
}
.sb-download-locked .alert {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  line-height: 1.4;
}
.sb-download-list a[aria-disabled='true'] {
  pointer-events: none;
  opacity: 0.5;
}

/* Tile-progress bar */
.tile-progress.active::after {
  background: linear-gradient(90deg, #228b22, #4caf50, #81c784, #228b22);
  background-size: 300% 100%;
}
.tile-progress.done::after {
  background: #4caf50;
}
[data-theme='dark'] .tile-progress.active::after {
  background: linear-gradient(90deg, #1b5e20, #388e3c, #66bb6a, #1b5e20);
  background-size: 300% 100%;
}

/* Graticule labels readable in both modes */
.graticule-label {
  color: #4b5563;
  opacity: 0.7;
}
[data-theme='dark'] .graticule-label {
  color: #cbd5e1;
  opacity: 0.7;
}

/* ── Feature popups: SOLID, opaque, high-contrast ───────── */
.leaflet-popup-content-wrapper {
  background: #ffffff !important;
  color: #1f2937 !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) !important;
}
.leaflet-popup-tip {
  background: #ffffff !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12) !important;
}
.leaflet-popup-close-button {
  color: #6b7280 !important;
  background: transparent !important;
  font-weight: 700;
}
.leaflet-popup-close-button:hover {
  color: #111827 !important;
}
.feat-popup,
.feat-popup table,
.feat-popup td {
  color: #1f2937;
  background: transparent;
}
.feat-popup h4 {
  color: #228b22;
}
.feat-popup td:first-child {
  color: #6b7280;
}
.popup-badge {
  background: rgba(34, 139, 34, 0.12);
  color: #228b22;
  border: 1px solid rgba(34, 139, 34, 0.3);
}

/* Dark-mode popup overrides (consolidated, explicit) */
[data-theme='dark'] .leaflet-popup-content-wrapper {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6) !important;
}
[data-theme='dark'] .leaflet-popup-tip {
  background: #1e293b !important;
}
[data-theme='dark'] .leaflet-popup-close-button {
  color: #94a3b8 !important;
}
[data-theme='dark'] .leaflet-popup-close-button:hover {
  color: #ffffff !important;
}
[data-theme='dark'] .feat-popup,
[data-theme='dark'] .feat-popup table,
[data-theme='dark'] .feat-popup td {
  color: #e2e8f0;
}
[data-theme='dark'] .feat-popup h4 {
  color: #66bb6a;
}
[data-theme='dark'] .feat-popup td:first-child {
  color: #94a3b8;
}
[data-theme='dark'] .popup-badge {
  background: rgba(102, 187, 106, 0.18);
  color: #a5d6a7;
  border-color: rgba(102, 187, 106, 0.4);
}

/* Tooltips — opaque, readable */
.map-tooltip,
.leaflet-tooltip {
  background: #ffffff !important;
  color: #1f2937 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}
[data-theme='dark'] .map-tooltip,
[data-theme='dark'] .leaflet-tooltip {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

/* -- Layer info panel + buttons (sidebar) ------------------ */
.layer-info-btn,
.layer-zoom-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #6b7280;
  border-radius: 6px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 4px;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.layer-info-btn:hover,
.layer-zoom-btn:hover {
  background: #f3f4f6;
  color: #228b22;
  border-color: #e5e7eb;
}
.layer-info-btn.active {
  background: rgba(34, 139, 34, 0.12);
  color: #228b22;
  border-color: rgba(34, 139, 34, 0.35);
}
[data-theme='dark'] .layer-info-btn,
[data-theme='dark'] .layer-zoom-btn {
  color: #94a3b8;
}
[data-theme='dark'] .layer-info-btn:hover,
[data-theme='dark'] .layer-zoom-btn:hover {
  background: #334155;
  color: #86efac;
  border-color: #475569;
}
[data-theme='dark'] .layer-info-btn.active {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.4);
}

.layer-info {
  margin: 4px 0 6px 28px;
  padding: 8px 10px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-left: 3px solid #228b22;
  border-radius: 6px;
  font-size: 11.5px;
  color: #374151;
}
.layer-info[hidden] {
  display: none;
}
.layer-info-note {
  margin: 0 0 6px;
  line-height: 1.45;
  color: #4b5563;
}
.layer-info-grid {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 3px 8px;
  margin: 0;
  font-size: 11px;
}
.layer-info-grid dt {
  color: #6b7280;
  font-weight: 600;
}
.layer-info-grid dd {
  margin: 0;
  color: #1f2937;
  word-break: break-word;
}
.layer-info-keys code {
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 1px 5px;
  margin: 1px 2px 1px 0;
  border-radius: 4px;
  font-size: 10.5px;
  display: inline-block;
}
.layer-info .muted {
  color: #9ca3af;
  font-style: italic;
}
[data-theme='dark'] .layer-info {
  background: #1e293b;
  border-color: #334155;
  border-left-color: #22c55e;
  color: #cbd5e1;
}
[data-theme='dark'] .layer-info-note {
  color: #cbd5e1;
}
[data-theme='dark'] .layer-info-grid dt {
  color: #94a3b8;
}
[data-theme='dark'] .layer-info-grid dd {
  color: #e2e8f0;
}
[data-theme='dark'] .layer-info-keys code {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}
[data-theme='dark'] .layer-info .muted {
  color: #64748b;
}

/* -- North arrow control ---------------------------------- */
.north-arrow-ctrl {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: default;
  margin-top: 8px !important;
  padding: 0 !important;
  width: 34px;
  height: 34px;
}
.north-arrow-ctrl svg {
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25));
}
[data-theme='dark'] .north-arrow-ctrl svg circle {
  fill: rgba(30, 41, 59, 0.92);
  stroke: #cbd5e1;
}
[data-theme='dark'] .north-arrow-ctrl svg text {
  fill: #f1f5f9;
}
[data-theme='dark'] .north-arrow-ctrl svg polygon:last-of-type {
  fill: #f1f5f9;
}

/* -- Mapbox GL 3D overlay -------------------------------- */
#map3d {
  position: absolute;
  inset: 56px 0 0 0; /* below top-bar */
  z-index: 350; /* above #map (200) but below sidebars (1000) */
  display: none;
  background: #0b1220;
}
#map3d.active {
  display: block;
}
#map3d .mapboxgl-canvas {
  outline: none;
}

/* Mapbox controls � match Leaflet visual language */
#map3d .mapboxgl-ctrl-group {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  border: 1px solid #e5e7eb;
}
#map3d .mapboxgl-ctrl-group button {
  width: 32px;
  height: 32px;
}
[data-theme='dark'] #map3d .mapboxgl-ctrl-group {
  background: #1e293b;
  border-color: #334155;
}
[data-theme='dark'] #map3d .mapboxgl-ctrl-group button span {
  filter: invert(0.85);
}

/* Mapbox popups � solid, match Leaflet popups */
#map3d .mapboxgl-popup-content {
  background: #ffffff;
  color: #1f2937;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  font-family: inherit;
}
#map3d .mapboxgl-popup-tip {
  border-top-color: #ffffff !important;
}
#map3d .mapboxgl-popup-close-button {
  color: #6b7280;
  font-size: 18px;
  padding: 4px 8px;
  background: transparent;
}
[data-theme='dark'] #map3d .mapboxgl-popup-content {
  background: #1e293b;
  color: #e2e8f0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}
[data-theme='dark'] #map3d .mapboxgl-popup-tip {
  border-top-color: #1e293b !important;
}
[data-theme='dark'] #map3d .mapboxgl-popup-close-button {
  color: #94a3b8;
}

.mb-popup {
  font-size: 12.5px;
  min-width: 180px;
  max-width: 320px;
}
.mb-popup h4 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: #228b22;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mb-popup .mb-badge {
  display: inline-block;
  padding: 1px 8px;
  background: rgba(34, 139, 34, 0.12);
  color: #228b22;
  border: 1px solid rgba(34, 139, 34, 0.3);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}
.mb-popup table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.mb-popup td {
  padding: 2px 4px;
  vertical-align: top;
}
.mb-popup td:first-child {
  color: #6b7280;
  padding-right: 8px;
  white-space: nowrap;
}
[data-theme='dark'] .mb-popup h4 {
  color: #66bb6a;
}
[data-theme='dark'] .mb-popup td:first-child {
  color: #94a3b8;
}
[data-theme='dark'] .mb-popup .mb-badge {
  background: rgba(102, 187, 106, 0.18);
  color: #a5d6a7;
  border-color: rgba(102, 187, 106, 0.4);
}

/* -- 3D toggle control (sits below north arrow) ----------- */
.threed-ctrl {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  margin-top: 8px !important;
  width: 34px;
  height: 34px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12.5px;
  color: #1f2937;
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
  transition:
    background 0.15s,
    color 0.15s,
    transform 0.15s;
  user-select: none;
}
.threed-ctrl:hover {
  background: #f3f4f6 !important;
  transform: translateY(-1px);
}
.threed-ctrl.active {
  background: #228b22 !important;
  color: #ffffff !important;
  border-color: #1a6f1a !important;
  box-shadow: 0 2px 8px rgba(34, 139, 34, 0.4) !important;
}
[data-theme='dark'] .threed-ctrl {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}
[data-theme='dark'] .threed-ctrl:hover {
  background: #334155 !important;
}
[data-theme='dark'] .threed-ctrl.active {
  background: #22c55e !important;
  color: #0f172a !important;
  border-color: #16a34a !important;
}

/* 3D mode badge (top-center, indicates active mode) */
.threed-mode-badge {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  background: rgba(34, 139, 34, 0.95);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  display: none;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.threed-mode-badge.active {
  display: inline-flex;
}
.threed-mode-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
  animation: pulse-3d 2s infinite;
}
@keyframes pulse-3d {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* -- Mapbox 3D: Parcels toggle control ------------------------ */
.threed-parcels-ctrl button {
  display: flex !important;
  align-items: center;
  gap: 6px;
  width: auto !important;
  min-width: 86px;
  padding: 0 10px !important;
  height: 30px !important;
  font-size: 12px;
  font-weight: 600;
  color: #1f2937;
  background: #fff;
  cursor: pointer;
}
.threed-parcels-ctrl button .tp-icon {
  font-size: 14px;
  line-height: 1;
  color: #f59e0b;
}
.threed-parcels-ctrl button:hover {
  background: #fff7ed;
}
.threed-parcels-ctrl button.active {
  background: #f59e0b;
  color: #fff;
}
.threed-parcels-ctrl button.active .tp-icon {
  color: #fff;
}
.threed-parcels-ctrl button.loading {
  background: #fef3c7;
  color: #92400e;
  pointer-events: none;
}
.threed-parcels-ctrl button.loading .tp-icon {
  animation: tp-spin 1s linear infinite;
  display: inline-block;
}
@keyframes tp-spin {
  to {
    transform: rotate(360deg);
  }
}

[data-theme='dark'] .threed-parcels-ctrl button {
  background: #1f2937;
  color: #f3f4f6;
}
[data-theme='dark'] .threed-parcels-ctrl button:hover {
  background: #374151;
}
[data-theme='dark'] .threed-parcels-ctrl button.active {
  background: #f59e0b;
  color: #111827;
}

/* -- 3D mode: hide overlapping Leaflet controls so they don't shadow Mapbox -- */
body.threed-active .map-controls,
body.threed-active .leaflet-top.leaflet-right,
body.threed-active .leaflet-bottom.leaflet-left,
body.threed-active .coord-readout,
body.threed-active #mapGraticuleOverlay {
  display: none !important;
}

/* Lock the 3D button when user is signed out */
.threed-ctrl.locked {
  opacity: 0.45;
  cursor: not-allowed;
  position: relative;
}
.threed-ctrl.locked::after {
  content: '??';
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 9px;
  background: #fff;
  border-radius: 50%;
  padding: 1px 2px;
  line-height: 1;
}

/* -- Mapbox 3D: Home + Print controls ---------------------- */
.threed-home-ctrl button,
.threed-print-ctrl button {
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #1f2937;
  cursor: pointer;
}
.threed-home-ctrl button:hover {
  background: #eff6ff;
  color: #1d4ed8;
}
.threed-print-ctrl button:hover {
  background: #f5f3ff;
  color: #6d28d9;
}
[data-theme='dark'] .threed-home-ctrl button,
[data-theme='dark'] .threed-print-ctrl button {
  background: #1f2937;
  color: #f3f4f6;
}
[data-theme='dark'] .threed-home-ctrl button:hover {
  background: #1e3a8a;
  color: #bfdbfe;
}
[data-theme='dark'] .threed-print-ctrl button:hover {
  background: #4c1d95;
  color: #ddd6fe;
}

/* Tighten spacing for the stack of custom Mapbox top-left controls */
#map3d .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
  margin-bottom: 6px;
}

/* Make sure Mapbox top-right controls are fully clickable above #map3d */
#map3d .mapboxgl-ctrl-top-right {
  z-index: 360;
}

/* -- 2D Print mode: hide chrome, show map full-bleed ------- */
body.printing-2d header,
body.printing-2d #layerSidebar,
body.printing-2d .map-controls,
body.printing-2d .attr-panel,
body.printing-2d .toast,
body.printing-2d #userDropdown,
body.printing-2d #appSidebar,
body.printing-2d .leaflet-control-zoom,
body.printing-2d .leaflet-control-attribution,
body.printing-2d #threedModeBadge,
body.printing-2d #map3d {
  display: none !important;
}
body.printing-2d #map {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
}

@media print {
  @page {
    size: A4 landscape;
    margin: 8mm;
  }
  body {
    background: #fff !important;
  }
  header,
  #layerSidebar,
  .map-controls,
  .attr-panel,
  .toast,
  #userDropdown,
  #appSidebar,
  .leaflet-control-zoom,
  .leaflet-control-attribution,
  #threedModeBadge,
  #map3d {
    display: none !important;
  }
  #map {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    box-shadow: none !important;
  }
}

/* Highlight selected attr-table row */
.attr-table tr.selected {
  background: #fef3c7 !important;
}
[data-theme='dark'] .attr-table tr.selected {
  background: #78350f !important;
  color: #fff;
}

/* -- Auth Gate (3-minute guest timeout) ------------------- */
.auth-gate-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 30, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: authGateFade 0.25s ease;
}
.auth-gate-overlay.open {
  display: flex;
}
@keyframes authGateFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes authGatePop {
  from {
    transform: translateY(20px) scale(0.96);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
.auth-gate-card {
  background: #ffffff;
  color: #1a3c34;
  width: 100%;
  max-width: 440px;
  border-radius: 18px;
  padding: 28px 26px 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  text-align: center;
  animation: authGatePop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
[data-theme='dark'] .auth-gate-card {
  background: #1f2937;
  color: #e5e7eb;
}
.auth-gate-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a3c34, #2c8a78);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(26, 60, 52, 0.35);
}
.auth-gate-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.25;
}
.auth-gate-text {
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 20px;
  opacity: 0.85;
}
.auth-gate-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.auth-gate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    transform 0.12s ease,
    box-shadow 0.15s ease,
    background 0.15s;
  min-width: 140px;
}
.auth-gate-btn:hover {
  transform: translateY(-1px);
}
.auth-gate-btn-primary {
  background: #1a3c34;
  color: #fff;
  box-shadow: 0 4px 12px rgba(26, 60, 52, 0.25);
}
.auth-gate-btn-primary:hover {
  background: #14302a;
  box-shadow: 0 6px 16px rgba(26, 60, 52, 0.4);
}
.auth-gate-btn-secondary {
  background: #fff;
  color: #1a3c34;
  border-color: #1a3c34;
}
.auth-gate-btn-secondary:hover {
  background: #f1f5f4;
}
[data-theme='dark'] .auth-gate-btn-secondary {
  background: transparent;
  color: #e5e7eb;
  border-color: #6ee7b7;
}
.auth-gate-hint {
  font-size: 12px;
  opacity: 0.65;
  margin: 6px 0 0;
}
/* When the gate is open, block pointer events on the map for safety */
body.auth-gated #map,
body.auth-gated #map3d,
body.auth-gated .map-controls,
body.auth-gated .attr-panel,
body.auth-gated #layerSidebar,
body.auth-gated #appSidebar {
  pointer-events: none !important;
  user-select: none;
}
/* ── Subscription / plan-gating UI (added by billing rollout) ───── */

.upgrade-modal {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: 480px;
  width: 92vw;
}
.upgrade-modal::backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}
.upgrade-modal-box {
  background: #fff;
  border-radius: 18px;
  padding: 34px 30px 26px;
  box-shadow: 0 30px 60px -15px rgba(15, 58, 50, 0.45);
  text-align: center;
  position: relative;
  font-family: inherit;
  color: #0f172a;
}
.upgrade-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  padding: 4px 8px;
}
.upgrade-modal-close:hover {
  color: #1a3c34;
}
.upgrade-modal-icon {
  font-size: 42px;
  margin-bottom: 6px;
}
.upgrade-modal-title {
  font-size: 22px;
  font-weight: 800;
  color: #1a3c34;
  margin: 0 0 8px;
}
.upgrade-modal-msg {
  color: #475569;
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0 0 22px;
}
.upgrade-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.upgrade-btn-primary {
  background: linear-gradient(135deg, #1a3c34, #2c8a78);
  color: #fff !important;
  padding: 11px 26px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(44, 138, 120, 0.35);
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.upgrade-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(44, 138, 120, 0.45);
}
.upgrade-btn-secondary {
  background: transparent;
  color: #64748b;
  padding: 11px 18px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-weight: 500;
  cursor: pointer;
}
.upgrade-btn-secondary:hover {
  color: #1a3c34;
  border-color: #1a3c34;
}
.upgrade-modal-hint {
  color: #94a3b8;
  font-size: 12px;
  margin: 8px 0 0;
}

/* Locked layer rows in sidebar */
.layer-row.layer-locked {
  opacity: 0.55;
  cursor: not-allowed;
}
.layer-row.layer-locked .layer-label {
  color: #64748b;
}
.layer-row.layer-locked input[type='checkbox'] {
  cursor: not-allowed;
}
.layer-row .lock-ico {
  margin-left: 4px;
  opacity: 0.85;
  font-size: 12px;
}

/* 3D button locked */
.threed-ctrl.plan-locked {
  opacity: 0.55;
}
.threed-ctrl.plan-locked .lock-ico {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 11px;
  background: #fff;
  border-radius: 50%;
  padding: 1px 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Locked download links */
.sb-download-list a.dl-locked {
  color: #a16207 !important;
}
.sb-download-list a.dl-locked:hover {
  color: #78350f !important;
}

/* Plan badges (inline; e.g. user dropdown role) */
.plan-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge-public {
  background: #e2e8f0;
  color: #475569;
}
.badge-silver {
  background: #cbd5e1;
  color: #1e293b;
}
.badge-gold {
  background: #fde68a;
  color: #78350f;
}
.badge-platinum {
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  color: #fff;
}
.badge-admin {
  background: #1a3c34;
  color: #fff;
}
.badge-guest {
  background: #f1f5f9;
  color: #94a3b8;
}

/* Auth-gate "See plans" CTA */
.auth-gate-pricing {
  display: inline-block;
  margin-top: 10px;
  color: #2c8a78;
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
}
.auth-gate-pricing:hover {
  color: #1a3c34;
  text-decoration: underline;
}

/* dark-mode tweaks */
[data-theme='dark'] .upgrade-modal-box {
  background: #1f2937;
  color: #e5e7eb;
}
[data-theme='dark'] .upgrade-modal-title {
  color: #86efac;
}
[data-theme='dark'] .upgrade-modal-msg {
  color: #cbd5e1;
}
[data-theme='dark'] .upgrade-btn-secondary {
  color: #cbd5e1;
  border-color: #475569;
}

/* -- Toolkit (tools.js) ------------------------------------ */
.nm-toolbar {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  background: #ffffff;
  color: #1f2937;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  z-index: 780;
  max-width: 96vw;
  overflow-x: auto;
}
[data-theme='dark'] .nm-toolbar {
  background: #1f2937;
  color: #e5e7eb;
  border-color: #374151;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}
.nm-tbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.nm-tbtn:hover {
  background: rgba(0, 0, 0, 0.06);
}
[data-theme='dark'] .nm-tbtn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.nm-tbtn.active {
  background: #228b22;
  color: #fff;
}
.nm-tbtn .nm-ico {
  font-size: 18px;
  line-height: 1;
}
.nm-tbtn .nm-lbl {
  font-size: 10px;
  margin-top: 2px;
  opacity: 0.85;
  color: inherit;
}
.nm-panel {
  position: fixed;
  left: 50%;
  bottom: 74px;
  transform: translateX(-50%);
  width: min(380px, 94vw);
  max-height: 60vh;
  overflow: auto;
  background: #ffffff;
  color: #1f2937;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
  z-index: 780;
  font-size: 13px;
}
[data-theme='dark'] .nm-panel {
  background: #1f2937;
  border-color: #374151;
  color: #e5e7eb;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}
.nm-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-bottom: 6px;
}
[data-theme='dark'] .nm-panel-head {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.nm-x {
  background: none;
  border: 0;
  font-size: 18px;
  cursor: pointer;
  color: inherit;
  line-height: 1;
  padding: 2px 6px;
}
.nm-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 6px 0;
}
.nm-row label {
  font-size: 11px;
  opacity: 0.8;
}
.nm-row input,
.nm-row select {
  width: 100%;
  padding: 5px 7px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font: inherit;
}
[data-theme='dark'] .nm-row input,
[data-theme='dark'] .nm-row select {
  border-color: #4b5563;
  background: #111827;
}
.nm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}
.nm-btn {
  padding: 5px 10px;
  border: 1px solid #228b22;
  background: #228b22;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
.nm-btn:hover {
  background: #1a6f1a;
}
.nm-btn-sm {
  padding: 2px 6px;
  font-size: 11px;
}
.nm-warn {
  color: #dc2626;
  font-size: 12px;
}
.nm-hint {
  font-size: 11px;
  opacity: 0.75;
  margin: 6px 0;
}
.nm-out {
  margin-top: 8px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 5px;
  font-size: 12px;
}
[data-theme='dark'] .nm-out {
  background: rgba(255, 255, 255, 0.05);
}
.nm-list {
  margin-top: 6px;
  max-height: 30vh;
  overflow: auto;
}
.nm-bm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.nm-bm-main {
  flex: 1;
  min-width: 0;
}
.nm-bm-main strong {
  display: block;
  font-size: 12px;
  line-height: 1.3;
}
.nm-bm-main small {
  display: block;
  font-size: 10px;
  opacity: 0.7;
}
.nm-bm-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.nm-measure {
  background: rgba(124, 58, 237, 0.85);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
}
.nm-measure:before {
  display: none;
}
@media (max-width: 540px) {
  .nm-tbtn .nm-lbl {
    display: none;
  }
  .nm-tbtn {
    min-width: 40px;
  }
}