html, body { height: 100%; }
body.map-body { display: flex; flex-direction: column; }
#map {
  flex: 1 1 auto;
  min-height: 0;
  background: #0a0b0e;
}

/* Dark-mode tweaks for Leaflet controls */
.leaflet-control-attribution, .leaflet-control-zoom a {
  background: rgba(15, 17, 22, 0.85) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.leaflet-control-zoom a:hover { background: rgba(25, 28, 36, 0.95) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
.leaflet-popup-close-button { color: var(--muted) !important; }

.map-popup {
  width: 220px;
}
.map-popup img, .map-popup video {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
  margin-bottom: 0.4rem;
  background: #000;
}
.map-popup .name {
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-popup .date { font-size: 0.75rem; color: var(--muted); margin-top: 0.2rem; }
.map-popup a.open { color: var(--accent); font-size: 0.85rem; text-decoration: none; }
.map-popup a.open:hover { color: var(--accent-hi); }

/* Layer control — match the dark theme */
.leaflet-control-layers {
  background: rgba(15, 17, 22, 0.92) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  backdrop-filter: blur(6px);
}
.leaflet-control-layers-toggle { filter: invert(1); }
.leaflet-control-layers-expanded { padding: 0.5rem 0.75rem !important; }
.leaflet-control-layers label { font-size: 0.85rem; }