/* Leaflet map styling — GLOBAL (Leaflet builds its own DOM via JS, scoped .razor.css can't reach it).
   Themed to the admin design system; dark theme inverts the tile layer for a night map. */

.bg-map {
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--hair);
    background: var(--card-2);
    z-index: 0;
}

.bg-map .leaflet-container {
    font: 500 12px/1.4 'Manrope', system-ui, sans-serif;
    background: var(--card-2);
}

/* Night map: invert OSM raster tiles only (markers/overlays stay true-color). */
html[data-theme="dark"] .bg-map .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.92) saturate(0.7);
}

/* Zoom + attribution chrome, themed. */
.bg-map .leaflet-bar a {
    background: var(--card);
    color: var(--text-2);
    border-color: var(--hair);
    transition: background .14s, color .14s;
}
.bg-map .leaflet-bar a:hover { background: var(--card-2); color: var(--acc); }
.bg-map .leaflet-control-attribution {
    background: color-mix(in srgb, var(--card) 78%, transparent);
    color: var(--text-4);
    font-size: 10px;
    border-radius: 7px 0 0 0;
}
.bg-map .leaflet-control-attribution a { color: var(--text-3); }

/* Themed tooltip for admin areas / markers. */
.leaflet-tooltip.bg-map-tip {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--hair-strong);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
    font: 700 12px/1.2 'Manrope', sans-serif;
    padding: 5px 9px;
}
.leaflet-tooltip.bg-map-tip::before { display: none; }

/* Pick marker (divIcon) — emerald teardrop pin, no image asset. */
.bg-pin { background: transparent; border: 0; }
.bg-pin .bg-pin-dot {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--acc);
    border: 2.5px solid #fff;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
}

/* Point marker (divIcon dot) — clusterable. */
.bg-dot { background: transparent; border: 0; }
.bg-dot .bg-dot-i {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2.5px solid #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
}

/* Cluster bubble (Leaflet.markercluster iconCreateFunction) — themed, count inside. */
.bg-cluster {
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--acc-soft);
    color: var(--acc-text);
    border: 2px solid var(--acc);
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    box-shadow: 0 2px 9px rgba(0, 0, 0, .2);
    transition: transform .12s ease;
}
.bg-cluster:hover { transform: scale(1.06); }
.bg-cluster span { line-height: 1; }
.bg-cluster-sm { font-size: 12px; }
.bg-cluster-md { font-size: 13px; }
.bg-cluster-lg { font-size: 14.5px; background: var(--acc); color: #fff; border-color: var(--acc-2, var(--acc)); }

/* Empty / loading shell shown by the component before init. */
.bg-map-shell {
    display: grid;
    place-items: center;
    color: var(--text-4);
    font-size: 12.5px;
}