#map {
  border: 1px solid var(--cn-border, #dcdacd);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  min-height: clamp(240px, 45vh, 520px);
}

.planner-map {
  height: clamp(280px, 55vh, 520px);
}

#map,
.leaflet-container {
  z-index: 1 !important;
}

.leaflet-top,
.leaflet-bottom {
  z-index: 10 !important;
}

/* Planner uses top-row dropdown for layer selection. Hide Leaflet side layer panel. */
#map .leaflet-control-layers {
  display: none !important;
}

.map-controls {
  margin: 0.5rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.map-controls button {
  width: auto;
  min-width: 130px;
}

.planner-map-card,
.planner-form-card,
.planner-card-block {
  width: 100%;
}

.planner-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.planner-options-col {
  border: 1px solid var(--cn-border, #dcdacd);
  border-radius: 14px;
  background: linear-gradient(180deg, #fdfdf9 0%, #f6f7f1 100%);
  padding: 0.72rem 0.8rem;
}

.planner-options-col label {
  margin: 0.2rem 0;
}

.map-layer-picker {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.map-layer-picker select {
  min-width: 220px;
}

.nav-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 0.55rem;
  margin-top: 0.65rem;
}

.nav-stat {
  border: 1px solid var(--cn-border, #dcdacd);
  border-radius: 12px;
  background: #fff;
  padding: 0.52rem 0.62rem;
  box-shadow: 0 5px 12px rgba(25, 34, 27, 0.06);
}

.nav-stat span {
  display: block;
  color: #606d60;
  font-size: 0.78rem;
}

.nav-stat strong {
  display: block;
  margin-top: 0.15rem;
  color: #1f251f;
}

html[data-theme="dark"] #map {
  border-color: #2a3f66;
  box-shadow: 0 10px 24px rgba(1, 7, 18, 0.45);
}

html[data-theme="dark"] .planner-options-col {
  border-color: #2a3f66;
  background: #12203a;
}

html[data-theme="dark"] .planner-options-col label {
  color: #dbe7ff;
}

html[data-theme="dark"] .nav-stat {
  border-color: #2a3f66;
  background: #12203a;
}

html[data-theme="dark"] .nav-stat span {
  color: #a8b6ca;
}

html[data-theme="dark"] .nav-stat strong {
  color: #e6edf8;
}

@media (max-width: 900px) {
  .planner-map {
    height: clamp(240px, 48vh, 420px);
  }

  .map-layer-picker {
    margin-left: 0;
    width: 100%;
  }

  .map-layer-picker select {
    width: 100%;
    min-width: 0;
  }

  .nav-status-grid {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .planner-form-grid {
    grid-template-columns: 1fr;
  }
}


/* Updated: 2026-03-16 17:04 UTC — map/mobile controls hardening. */
.map-controls button,
.map-controls select,
.map-controls input,
.map-layer-picker select {
  min-height: 44px;
}

.map-controls > * {
  min-width: min(220px, 100%);
}

@media (max-width: 767px) {
  .map-controls > * {
    flex: 1 1 100%;
    min-width: 0;
  }

  .nav-status-grid {
    grid-template-columns: 1fr;
  }
}