/**
 * CrewLink Design System - Map & Leaflet Styles
 */

/* =========================================================================
   MAP CONTAINER
   ========================================================================= */
#map,
#leaflet-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  z-index: var(--z-map);
  background-color: var(--color-bg-base);
}

/* =========================================================================
   CARTO HIGH-CONTRAST ROAD & BASEMAP ENHANCEMENT
   ========================================================================= */
.leaflet-tile-pane .carto-dark-base,
.leaflet-pane .carto-dark-base,
.carto-dark-base,
img.leaflet-tile.carto-dark-base {
  filter: brightness(5.8) contrast(1.65) saturate(0.85);
}

.leaflet-labelsPane-pane .leaflet-tile,
.leaflet-labelsPane-pane img,
.labelsPane-pane .carto-dark-labels,
.leaflet-pane .carto-dark-labels,
.carto-dark-labels,
img.leaflet-tile.carto-dark-labels {
  filter: contrast(1.5) brightness(2) drop-shadow(0 0 2px rgba(0, 0, 0, 0.95));
}

/* =========================================================================
   TRACK POLYLINES & CONTRAST CASING HALO
   ========================================================================= */
.track-polyline,
.track-gpx-base,
.gpx-course-polyline,
.gpx-course-casing,
.done-trail-polyline,
.overlap-dash-polyline,
.interpolated-trail-polyline,
.detour-base-polyline,
.detour-chevron-polyline {
  stroke-linejoin: round !important;
  stroke-linecap: round !important;
}

/* =========================================================================
   LEAFLET MAP CONTROLS & CORNER DOCKING (CONSOLIDATED)
   ========================================================================= */

/* Dynamic bottom clearance container (rides smoothly above bottom dock) */
.leaflet-bottom {
  bottom: var(--map-bottom-controls-bottom, 15px) !important;
  margin-bottom: 0 !important;
  transition: bottom 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.leaflet-bottom.leaflet-left {
  margin-left: 10px !important;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 8px;
}

.leaflet-bottom.leaflet-right {
  margin-right: 10px !important;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 8px;
}

/* Master Glassmorphism Container Rule for all bottom map controls */
.leaflet-bottom .leaflet-control {
  margin: 0 !important;
  border: 1px solid var(--color-border-default) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  background: var(--color-bg-glass) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  overflow: hidden;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Control buttons inside containers (Zoom In/Out, Locate, Debug) */
.leaflet-bottom .leaflet-bar a {
  width: 42px !important;
  height: 42px !important;
  line-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  color: var(--color-text-secondary) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 18px !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

/* Subtle separator between Zoom In and Zoom Out */
.leaflet-bottom .leaflet-control-zoom a:first-child {
  border-bottom: 1px solid var(--color-border-subtle) !important;
}

/* Common Button Hover */
.leaflet-bottom .leaflet-bar a:hover {
  background-color: var(--color-bg-surface) !important;
  color: var(--color-brand-accent) !important;
}

/* Debug Button Alert Styling */
.leaflet-control-debug {
  border-color: var(--color-alert-border) !important;
}

.leaflet-control-debug:hover {
  border-color: var(--color-status-alert) !important;
}

.leaflet-debug-btn .act-svg {
  width: 20px !important;
  height: 20px !important;
  stroke: var(--color-status-alert);
}

.leaflet-locate-btn .locate-svg {
  width: 20px !important;
  height: 20px !important;
}

/* Locate Pulse Animation */
.leaflet-locate-btn.locating-pulse {
  color: var(--color-brand-accent) !important;
  animation: pulse-locate 1.2s infinite ease-in-out;
}

@keyframes pulse-locate {
  0% { transform: scale(1); box-shadow: 0 0 0 0 var(--color-finished-glow); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(56, 189, 248, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 var(--color-finished-glow); }
}

/* Locate & Spectator Vector Container */
.leaflet-control-locate {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: auto !important;
}

.leaflet-bottom .leaflet-bar a.spectator-vector-btn {
  display: none !important;
  width: auto !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 10px 0 9px !important;
  gap: 6px !important;
  border-right: 1px solid var(--color-border-subtle) !important;
  font-size: 0.82rem !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  user-select: none !important;
  align-items: center !important;
}

.leaflet-bottom .leaflet-bar a.spectator-vector-btn.is-active {
  display: inline-flex !important;
}

.spectator-vector-cardinal {
  font-weight: 700;
  color: var(--color-brand-accent);
  letter-spacing: -0.01em;
}

.spectator-vector-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--color-brand-accent);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.spectator-vector-arrow svg {
  width: 16px !important;
  height: 16px !important;
  stroke: var(--color-brand-accent);
}

.spectator-vector-arrow svg polygon {
  fill: var(--color-brand-accent);
}

.spectator-vector-text {
  letter-spacing: -0.02em;
}

.leaflet-bottom .leaflet-bar a.spectator-vector-btn:hover {
  background-color: var(--color-bg-surface) !important;
  color: var(--color-brand-accent) !important;
}

/* Layer Switcher - Collapsed State */
.leaflet-control-layers:not(.leaflet-control-layers-expanded) {
  width: 42px !important;
  height: 42px !important;
}

.leaflet-control-layers-toggle {
  width: 42px !important;
  height: 42px !important;
  background-size: 22px 22px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f8fafc' stroke-width='2.2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E") !important;
  transition: background-color 0.15s ease;
}

.leaflet-control-layers-toggle:hover {
  background-color: var(--color-bg-surface) !important;
}

/* Layer Switcher - Expanded Flyout State */
.leaflet-control-layers-expanded {
  padding: 12px 16px !important;
  background: rgba(15, 23, 42, 0.96) !important;
  border-color: var(--color-border-strong) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: var(--color-text-primary) !important;
  min-width: 170px !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}

.leaflet-control-layers-expanded label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
  cursor: pointer !important;
}

.leaflet-control-layers-expanded input[type="radio"] {
  accent-color: var(--color-status-active) !important;
  cursor: pointer !important;
}

.leaflet-control-attribution {
  display: none !important;
}

@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  .leaflet-control-zoom {
    display: none !important;
  }
}


/* =========================================================================
   MARKERS & TOOLTIPS
   ========================================================================= */
.leaflet-blue-dot {
  width: 15px;
  height: 15px;
  background-color: var(--color-route-base);
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 10px rgba(var(--palette-cyan-rgb), 0.8);
  position: relative;
  will-change: transform;
}

.leaflet-blue-dot::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--color-route-base);
  opacity: 0.7;
  pointer-events: none;
  animation: pulse-dot-gpu 1.6s infinite ease-out;
}

.leaflet-green-dot {
  width: 15px;
  height: 15px;
  background-color: var(--color-status-active);
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 10px var(--color-active-glow);
  position: relative;
  will-change: transform;
}

.leaflet-green-dot::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--color-status-active);
  opacity: 0.7;
  pointer-events: none;
  animation: pulse-dot-gpu 1.6s infinite ease-out;
}

@keyframes pulse-dot-gpu {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70% {
    transform: scale(2.2);
    opacity: 0;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.runner-tooltip {
  background-color: var(--color-bg-glass) !important;
  color: var(--color-status-active) !important;
  border: 1px solid var(--color-active-border) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-sm) !important;
}

.leaflet-tooltip-top.runner-tooltip:before {
  border-top-color: var(--color-active-border) !important;
}

#leaflet-map.zoom-out .runner-tooltip {
  font-size: 0.55rem !important;
  padding: 2px 4px !important;
}

.runner-tooltip.you-tooltip {
  background-color: var(--color-bg-glass) !important;
  color: var(--color-brand-accent) !important;
  border: 1px solid var(--color-finished-border) !important;
  font-weight: 600 !important;
}

.leaflet-tooltip-top.runner-tooltip.you-tooltip:before {
  border-top-color: var(--color-finished-border) !important;
}

.dist-marker {
  background-color: var(--palette-cyan) !important;
  color: var(--palette-slate-950) !important;
  font-size: 0.65rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border-radius: 50%;
  border: 1.5px solid #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.75), 0 0 6px rgba(var(--palette-cyan-rgb), 0.5);
  width: 18px !important;
  height: 18px !important;
  margin-left: -9px !important;
  margin-top: -9px !important;
  cursor: pointer;
}

.dist-marker.passed-marker {
  background-color: var(--palette-lime) !important;
  color: var(--palette-slate-950) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.75), 0 0 6px rgba(var(--palette-lime-rgb), 0.5);
}

#leaflet-map.zoom-out .dist-marker {
  display: none !important;
}

#leaflet-map.zoom-out .dist-marker.km-5,
#leaflet-map.zoom-out .dist-marker.km-last {
  display: flex !important;
  width: 15px !important;
  height: 15px !important;
  margin-left: -7.5px !important;
  margin-top: -7.5px !important;
  font-size: 0.56rem;
}

#leaflet-map.zoom-in .dist-marker {
  width: 22px !important;
  height: 22px !important;
  margin-left: -11px !important;
  margin-top: -11px !important;
  font-size: 0.75rem;
}

.wpt-icon {
  width: 28px !important;
  height: 34px !important;
  margin-left: -14px !important;
  margin-top: -34px !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.wpt-icon.wpt-start-icon,
.wpt-icon.wpt-finish-icon {
  width: 30px !important;
  height: 36px !important;
  margin-left: -15px !important;
  margin-top: -36px !important;
}

.wpt-pin-container {
  width: 28px;
  height: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
  cursor: pointer;
}

.wpt-pin-container:hover {
  transform: translateY(-2px) scale(1.12);
  transition: transform 0.15s ease-in-out;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6));
}

.wpt-pin-head {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--palette-slate-500);
  border: 2px solid var(--palette-white, #ffffff);
  color: var(--palette-white, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.wpt-pin-tail {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid var(--palette-slate-500);
  margin-top: -2.5px;
  z-index: 1;
}

.wpt-pin-head svg,
.wpt-pin-head .wpt-svg,
.wpt-pin-head .act-svg {
  width: 14px;
  height: 14px;
  stroke: var(--palette-white, #ffffff) !important;
  color: var(--palette-white, #ffffff) !important;
  stroke-width: 4 !important;
  fill: none;
  flex-shrink: 0;
  display: block;
}

.wpt-pin-head svg polygon[fill="currentColor"] {
  fill: var(--palette-white, #ffffff) !important;
}

/* Category Specific Color Fills & Tails */
.wpt-pin-container.water-bubble .wpt-pin-head  { background-color: var(--palette-cyan); }
.wpt-pin-container.water-bubble .wpt-pin-tail  { border-top-color: var(--palette-cyan); }

.wpt-pin-container.aid-bubble .wpt-pin-head    { background-color: var(--color-status-alert); }
.wpt-pin-container.aid-bubble .wpt-pin-tail    { border-top-color: var(--color-status-alert); }

.wpt-pin-container.food-bubble .wpt-pin-head   { background-color: var(--palette-brand); }
.wpt-pin-container.food-bubble .wpt-pin-tail   { border-top-color: var(--palette-brand); }

.wpt-pin-container.start-bubble .wpt-pin-head  { background-color: var(--palette-lime); }
.wpt-pin-container.start-bubble .wpt-pin-tail  { border-top-color: var(--palette-lime); }

.wpt-pin-container.finish-bubble .wpt-pin-head { background-color: var(--palette-amber); }
.wpt-pin-container.finish-bubble .wpt-pin-tail { border-top-color: var(--palette-amber); }

.wpt-pin-container.clock-bubble .wpt-pin-head  { background-color: var(--palette-amber); }
.wpt-pin-container.clock-bubble .wpt-pin-tail  { border-top-color: var(--palette-amber); }

.wpt-pin-container.pin-bubble .wpt-pin-head    { background-color: var(--palette-slate-500); }
.wpt-pin-container.pin-bubble .wpt-pin-tail    { border-top-color: var(--palette-slate-500); }

/* Responsive Zoom Scaling */
#leaflet-map.zoom-out .wpt-icon {
  width: 22px !important;
  height: 27px !important;
  margin-left: -11px !important;
  margin-top: -27px !important;
}

#leaflet-map.zoom-out .wpt-pin-head {
  width: 20px;
  height: 20px;
  border-width: 1.5px;
}

#leaflet-map.zoom-out .wpt-pin-tail {
  border-left-width: 4px;
  border-right-width: 4px;
  border-top-width: 7px;
}

#leaflet-map.zoom-out .wpt-pin-head svg,
#leaflet-map.zoom-out .wpt-pin-head .wpt-svg,
#leaflet-map.zoom-out .wpt-pin-head .act-svg {
  width: 11px;
  height: 11px;
}

#leaflet-map.zoom-in .wpt-icon {
  width: 32px !important;
  height: 38px !important;
  margin-left: -16px !important;
  margin-top: -38px !important;
}

#leaflet-map.zoom-in .wpt-pin-head {
  width: 30px;
  height: 30px;
  border-width: 2.5px;
}

#leaflet-map.zoom-in .wpt-pin-tail {
  border-left-width: 6px;
  border-right-width: 6px;
  border-top-width: 9px;
}

#leaflet-map.zoom-in .wpt-pin-head svg,
#leaflet-map.zoom-in .wpt-pin-head .wpt-svg,
#leaflet-map.zoom-in .wpt-pin-head .act-svg {
  width: 16px;
  height: 16px;
}

/* Waypoint Navigation Popups (Obsidian Glass) */
.wpt-popup-card {
  text-align: center;
  padding: 4px 6px;
  min-width: 160px;
}

.wpt-popup-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.wpt-popup-desc {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 3px;
  line-height: 1.3;
}

.wpt-popup-coords {
  font-size: 0.72rem;
  color: var(--palette-slate-500);
  font-family: var(--font-mono);
  margin-top: 4px;
}

.wpt-popup-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  background: linear-gradient(135deg, var(--palette-sky), var(--palette-cyan));
  color: var(--palette-slate-900) !important;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0, 229, 255, 0.25);
  transition: all 0.15s ease-in-out;
}

.wpt-popup-nav-btn:hover {
  background: linear-gradient(135deg, var(--palette-cyan), var(--palette-mint));
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 229, 255, 0.4);
  color: var(--palette-slate-900) !important;
}

.wpt-nav-svg {
  width: 13px;
  height: 13px;
}

.wpt-tooltip {
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xs);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.wpt-tooltip::before {
  border-top-color: var(--color-border-default);
}

/* =========================================================================
   LEAFLET POPUPS (DARK OBSIDIAN GLASS)
   ========================================================================= */
.leaflet-popup-content-wrapper {
  background: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-md) !important;
  color: var(--color-text-primary) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.75) !important;
  padding: 4px 6px !important;
}

.leaflet-popup-tip {
  background: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid var(--color-border-strong) !important;
}

.leaflet-popup-content {
  margin: 10px 14px !important;
  line-height: 1.45 !important;
  font-size: 0.82rem !important;
  color: var(--palette-slate-300) !important;
  max-width: 240px;
}

.km-popup-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.km-popup-title {
  color: var(--palette-cyan);
  font-size: 0.92rem;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.km-popup-desc {
  color: var(--palette-slate-200);
  font-size: 0.82rem;
  line-height: 1.4;
  font-style: italic;
}

.leaflet-container a.leaflet-popup-close-button {
  color: var(--palette-slate-400) !important;
  padding: 6px 8px 0 0 !important;
  font-size: 16px !important;
  width: 20px !important;
  height: 20px !important;
}

.leaflet-container a.leaflet-popup-close-button:hover {
  color: var(--palette-slate-50) !important;
}

/* =========================================================================
   DETOUR POLYLINES
   ========================================================================= */

.detour-base-polyline {
  stroke-linejoin: round !important;
  stroke-linecap: round !important;
}

.detour-chevron-polyline {
  stroke-linejoin: round !important;
  stroke-linecap: butt !important;
  filter: drop-shadow(0 0 3px rgba(0, 230, 118, 0.35));
}

.ghost-tether-polyline {
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 0 3px rgba(239, 68, 68, 0.5));
}