/* Leaflet shared CSS — imported once globally in App.js
   Marker fix: react-leaflet doesn't ship marker images by default.        */
.leaflet-container {
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Default markers from CDN (Leaflet's classic blue pin) */
.leaflet-default-icon-path {
    background-image: url("https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png");
}

/* Cluster bubble styling — readable in dark mode too */
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div {
    font-weight: 600;
}

/* Pin label tooltip */
.leaflet-tooltip.pin-label {
    background: rgba(0, 0, 0, 0.85);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    padding: 2px 6px;
}

/* Custom salesman pulse marker */
.salesman-pulse {
    position: relative;
}
.salesman-pulse::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(16, 185, 129, 0.5);
    animation: pulse-ring 1.6s ease-out infinite;
}
@keyframes pulse-ring {
    0%   { transform: scale(0.7); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}