/* ── Radar toggle button ──────────────────────────────────────────── */
.radar-toggle-ctrl a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
  color: #333;
  cursor: pointer;
}
.radar-toggle-ctrl a:hover { background: #f0f0f0; }
.radar-toggle-ctrl.active a { color: #1b6cff; background: #e0eaff; }

/* Dark-theme variants — drop these if you don't have dark mode */
.dark-theme .radar-toggle-ctrl a { color: #e2e8f0; background: #1a1f2e; }
.dark-theme .radar-toggle-ctrl a:hover { background: #2a3040; }
.dark-theme .radar-toggle-ctrl.active a { color: #60a5fa; background: #243149; }

/* ── Timeline panel ───────────────────────────────────────────────── */
.radar-panel {
  position: absolute;
  left: 50%; bottom: 80px;        /* clears desktop search bar */
  transform: translateX(-50%);
  z-index: 1000;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  padding: 8px 12px;
  min-width: 260px;
  max-width: calc(100vw - 40px);
  font: 12px system-ui, -apple-system, sans-serif;
  user-select: none;
  pointer-events: auto;
}
@media (max-width: 768px) {
  .radar-panel { bottom: 24px; }
  /* mobile search lives at top */
}
.radar-panel-row {
  display: flex; align-items: center; gap: 8px;
}
.radar-panel-row + .radar-panel-row { margin-top: 4px; }
.radar-panel .radar-play {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border: none;
  background: #1b6cff;
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
}
.radar-panel .radar-play:hover { background: #155bd9; }
.radar-panel .radar-slider {
  flex: 1 1 auto;
  height: 4px;
  cursor: pointer;
  accent-color: #1b6cff;
}
.radar-panel-meta {
  font-size: 11px;
  color: #555;
  justify-content: space-between;
  letter-spacing: 0.2px;
}
.radar-panel .radar-time { font-weight: 700; color: #111; }
.radar-panel .radar-kind { color: #1b6cff; font-weight: 700; }

.dark-theme .radar-panel {
  background: rgba(26, 31, 46, 0.96);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
}
.dark-theme .radar-panel-meta { color: #94a3b8; }
.dark-theme .radar-panel .radar-time { color: #e2e8f0; }
.dark-theme .radar-panel .radar-kind { color: #60a5fa; }

/* Smooth crossfade between radar frames */
.leaflet-tile-container[data-radar="1"] .leaflet-tile {
  transition: opacity 0.18s ease-out;
}

/* ── Drawer-mounted play button + progress slider ─────────────────── */
.radar-bottom-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.radar-play-btn {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: none;
  background: #2f7dff;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  border-radius: 4px;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
}
.radar-play-btn:hover:not(:disabled) { background: #155bd9; }
.radar-play-btn:disabled { opacity: 0.45; cursor: default; }
.radar-progress {
  flex: 1 1 auto;
  width: 100%;
  height: 4px;
  cursor: pointer;
  accent-color: #2f7dff;
  margin: 0;
}
.radar-progress:disabled { opacity: 0.45; cursor: default; }