/* Leaflet map view: container, count-in-pin markers, user marker, popups, legend.
   Pin colours follow the active provider theme (--pin1/2/3). */
#map { height: 540px; width: 100%; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); }
.leaflet-container { font: inherit; }

.map-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 12px; font-size: 0.78rem; color: var(--text2); }
.map-legend span { display: flex; align-items: center; gap: 6px; }
.map-legend .dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.map-legend .dot.t1 { background: var(--pin1); }
.map-legend .dot.t2 { background: var(--pin2); }
.map-legend .dot.t3 { background: var(--pin3); }
.map-legend .dot.user { background: #10b981; }

/* Count-in-pin markers */
.pin {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 13px;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(10,25,60,.4); box-sizing: border-box;
}
.pin.sm { font-size: 10px; }
.pin.t1 { background: var(--pin1); }
.pin.t2 { background: var(--pin2); }
.pin.t3 { background: var(--pin3); }
.userpin {
  width: 16px; height: 16px; border-radius: 50%;
  background: #10b981; border: 3px solid #fff;
  box-shadow: 0 0 0 4px rgba(16,185,129,.3), 0 2px 5px rgba(0,0,0,.3);
}

/* Popups */
.leaflet-popup-content { margin: 13px 15px; line-height: 1.45; }
.leaflet-popup-content-wrapper { border-radius: 11px; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.pop { font-size: 13px; min-width: 200px; color: var(--text); }
.pop-name { font-weight: 800; font-size: 14px; margin-bottom: 2px; }
.pop-code { font-size: 11.5px; color: var(--text3); margin-bottom: 8px; }
.pop-row { margin: 6px 0 0; }
.pop-row.dim { color: var(--text3); font-size: 12px; }
.pop .stock { margin: 9px 0; background: var(--red-pale); border-radius: 8px; padding: 7px 10px; display: flex; align-items: baseline; gap: 7px; }
.pop .stock .qty { font-size: 20px; font-weight: 800; color: var(--red-dark); }
.pop .stock .lbl { font-size: 12px; color: var(--text2); }
.pop a { color: var(--red); font-weight: 700; text-decoration: none; }
.pop a:hover { text-decoration: underline; }

@media (max-width: 640px) { #map { height: 400px; } }