/* Leaflet base overrides to match the dark theme */
.leaflet-container {
  background: var(--bg-inset);
  font-family: var(--font-sans);
}
.leaflet-popup-content-wrapper {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}
.leaflet-popup-tip { background: var(--bg-elevated); }
.leaflet-popup-content { margin: var(--sp-3) var(--sp-4); font-size: var(--fs-13); }
.leaflet-popup-content h4 { font-size: var(--fs-14); font-weight: 600; margin-bottom: 4px; }
.leaflet-control-zoom a {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-default) !important;
}
.leaflet-control-zoom a:hover { background: var(--bg-hover) !important; }
.leaflet-control-attribution {
  background: color-mix(in srgb, var(--bg-app) 70%, transparent) !important;
  color: var(--text-tertiary) !important;
}
.leaflet-control-attribution a { color: var(--text-secondary) !important; }

/* Specific-location pin (sharp marker) */
.strike-pin {
  width: 22px; height: 22px; border-radius: 50% 50% 50% 0;
  background: var(--accent); border: 2px solid var(--bg-app);
  transform: rotate(-45deg);
  box-shadow: var(--shadow-sm);
}
.strike-pin--pending { background: var(--status-pending); opacity: 0.75; border-style: dashed; }
.strike-pin--approved { background: var(--accent); }
.strike-pin--rejected { background: var(--status-rejected); opacity: 0.6; }

/* Broad-location "pile": city/oblast-level strikes have no real point, so
   they're grouped per city into one marker instead of a scattered circle
   each — a stacked-square silhouette (two offset squares) reading as "a
   pile of reports here," with a count on top. Click opens a pick-list. */
.strike-pile {
  position: relative;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pile-c, var(--accent));
  border: 2px solid var(--bg-app);
  border-radius: var(--r-sm);
}
.strike-pile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate(-4px, 4px);
  background: var(--pile-c, var(--accent));
  border: 2px solid var(--bg-app);
  border-radius: var(--r-sm);
  opacity: 0.55;
}
.strike-pile__count { font-size: var(--fs-11); font-weight: 700; color: #fff; line-height: 1; }
.strike-pile--pending  { --pile-c: var(--status-pending); }
.strike-pile--approved { --pile-c: var(--accent); }
.strike-pile--rejected  { --pile-c: var(--status-rejected); opacity: 0.75; }
.strike-pile--mixed     { --pile-c: var(--text-tertiary); }

.pile-popup__list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.pile-popup__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; padding: 6px var(--sp-2); border-radius: var(--r-sm); text-align: left; cursor: pointer;
}
.pile-popup__item:hover { background: var(--bg-hover); }
.pile-popup__item-title { font-size: var(--fs-12); font-weight: 500; color: var(--text-primary); }
.pile-popup__item-meta { font-size: var(--fs-11); color: var(--text-tertiary); flex: none; }

.marker-cluster-strike {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}
.marker-cluster-strike div {
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-12); font-weight: 600;
}