/* The map: buttons on top of it, pins, your location dot, popups and Leaflet tweaks. */

.map-wrap { position: relative; min-height: 0; }
#map { position: absolute; inset: 0; }
.leaflet-container { font-family: inherit; background: var(--bg); }
@media (prefers-color-scheme: dark) {
  .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.5); }
  .leaflet-control-attribution { background: rgba(26, 23, 20, .8) !important; color: var(--muted); }
  .leaflet-control-attribution a { color: var(--muted); }
}

/* Zoom buttons. Leaflet's own style turns them white on hover and focus, and on phones
   that sticks after a tap. Here they only flash while pressed, then go back. */
.leaflet-bar a,
.leaflet-bar a:hover,
.leaflet-bar a:focus {
  background: var(--panel);
  color: var(--text);
  border-color: var(--border);
  transition: background .25s, color .25s;
}
.leaflet-bar a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.leaflet-bar a:active,
.leaflet-bar a.pressed { background: #ffffff; color: #1a1714; transition: none; }

/* Buttons on the map */
.map-btn {
  position: absolute;
  z-index: 500;
  border: none;
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
  font-weight: 600;
  cursor: pointer;
}
.search-area {
  top: 16px; left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 14px;
}
.map-wrap:has(.leaflet-popup) .search-area { display: none; } /* don't cover an open popup */
.locate {
  right: 10px; bottom: 40px;
  width: 44px; height: 44px;
  border-radius: 12px;
  font-size: 22px;
  color: #2563eb;
}

.live-pill {
  position: absolute;
  z-index: 500;
  left: 16px; bottom: 24px;
  background: var(--panel);
  box-shadow: var(--shadow);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 600;
  display: flex; align-items: center; gap: 7px;
  opacity: .5;
}
.live-pill.on { opacity: 1; }
.live-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; }
.live-pill.on .dot { background: #22c55e; animation: pulse 1.6s infinite; }

/* Pulsing blue dot for your location */
.me-dot {
  width: 18px; height: 18px;
  margin: 3px;
  border-radius: 50%;
  background: #2563eb;
  border: 3px solid #fff;
  box-shadow: 0 0 0 0 rgba(37, 99, 235, .5);
  animation: me-pulse 2s infinite;
}
@keyframes me-pulse { 70% { box-shadow: 0 0 0 14px rgba(37, 99, 235, 0); } }

/* Category-colored pins */
.pin {
  width: 34px; height: 34px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--cat);
  border: 2.5px solid #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
  display: grid; place-items: center;
  transition: transform .15s;
}
.pin span { transform: rotate(45deg); font-size: 16px; line-height: 1; }
.pin.active { transform: rotate(-45deg) scale(1.3); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cat) 40%, transparent), 0 3px 10px rgba(0, 0, 0, .4); }
.leaflet-marker-icon:has(.pin.active) { z-index: 9999 !important; }

/* Popups */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}
.leaflet-popup-content { margin: 14px 16px; min-width: 220px; }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
.iw-top { display: flex; align-items: center; gap: 8px; padding-right: 12px; }
.iw h3 { margin: 0; font-size: 15px; flex: 1; }
.iw p { margin: 4px 0; font-size: 12.5px; color: var(--muted); }
.iw .info { margin-top: 8px; }
.iw .week { font-size: 11.5px; }
.iw .week th { padding-right: 8px; }
.iw .week td { white-space: nowrap; }
.iw .actions { margin-top: 10px; }
.iw .btn.primary, .iw .btn.primary:hover { color: #fff; }
@media (prefers-color-scheme: dark) {
  .iw .btn.primary, .iw .btn.primary:hover { color: #1a1714; }
}

/* Don't cover an open popup with the location label */
.map-wrap:has(.leaflet-popup) .live-pill { display: none; }

@media (max-width: 760px) {
  .locate { bottom: 30px; }
  .live-pill { bottom: 16px; }
  /* On phones the full details open in the list below the map, so the popup is a short summary */
  .iw .info, .iw .chips, .iw .week-wrap, .iw .actions .btn:not(.primary) { display: none; }
  .leaflet-popup-content { min-width: 200px; }
}