/* STAS-3790 map pin styles.
   Lives in wwwroot (not scoped to the component) because MapLibre HTML markers
   are appended to the map canvas DOM, which is outside Blazor's CSS-isolation scope. */

.stas-map-pin {
    position: relative;
    width: 32px;
    height: 40px;
    cursor: pointer;
    transition: transform 140ms ease;
}

.stas-map-pin:hover,
.stas-map-pin:focus-visible {
    transform: scale(1.12) translateY(-2px);
    outline: none;
}

.stas-map-pin:focus-visible .pin-bg {
    filter: drop-shadow(0 0 0 2px #ED880E) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45));
}

/* Teardrop background — Font Awesome map-marker-alt glyph, colored per kind */
.stas-map-pin .pin-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 40px;
    font-size: 40px;
    line-height: 1;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

/* Kind icon sits inside the round head of the pin (upper ~55% of height) */
.stas-map-pin .pin-kind {
    position: absolute;
    top: 8px;
    left: 0;
    width: 32px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    pointer-events: none;
}

.stas-map-pin.pin-site .pin-bg { color: #003951; }
.stas-map-pin.pin-workorder .pin-bg { color: #ED880E; }
.stas-map-pin.pin-worker .pin-bg { color: #0ea5e9; }
.stas-map-pin.pin-asset .pin-bg { color: #4b5563; }

.stas-map-pin.pin-worker {
    width: 26px;
    height: 32px;
}
.stas-map-pin.pin-worker .pin-bg { width: 26px; height: 32px; font-size: 32px; }
.stas-map-pin.pin-worker .pin-kind { width: 26px; top: 6px; font-size: 12px; }

.stas-map-pin.pin-asset {
    width: 26px;
    height: 32px;
}
.stas-map-pin.pin-asset .pin-bg { width: 26px; height: 32px; font-size: 32px; }
.stas-map-pin.pin-asset .pin-kind { width: 26px; top: 6px; font-size: 12px; }

/* Overdue overlay — red pin head with a soft ring. Size bump too so screen
   readers / low-vision users distinguish it without relying on color alone. */
.stas-map-pin.pin-overdue .pin-bg {
    color: #dc2626;
    filter: drop-shadow(0 0 0 2px rgba(220, 38, 38, 0.35)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

@media (prefers-reduced-motion: reduce) {
    .stas-map-pin { transition: none; }
    .stas-map-pin:hover, .stas-map-pin:focus-visible { transform: none; }
}