/* map.css — Leaflet/TeamMap global styles moved verbatim from app.css (Leaflet builds its DOM in JS, unreachable by scoped CSS). */

/* ─────────────────────────────────────────────────────────────────────────
   Live Team Map (Leaflet) — GLOBAL because Leaflet's DOM and the DivIcon
   markers are created by JavaScript and never carry a component's scoped
   attribute (same rationale as the teleported DxPopup styles).
   ───────────────────────────────────────────────────────────────────────── */
.leaflet-container {
    font: inherit;
    background: var(--dxds-color-surface-neutral-subdued-rest);
}

.leaflet-control-attribution {
    background: color-mix(in srgb, var(--dxds-color-surface-neutral-default-rest) 85%, transparent) !important;
    color: var(--dxds-color-content-secondary-default-rest) !important;
    font-size: 0.65rem;
}
.leaflet-control-attribution a { color: var(--sos-accent) !important; }

.leaflet-bar a {
    background: var(--dxds-color-surface-neutral-default-rest) !important;
    color: var(--dxds-color-content-neutral-default-rest) !important;
    border-color: var(--dxds-color-border-neutral-default-rest) !important;
}
.leaflet-bar a:hover { background: var(--dxds-color-surface-neutral-default-hovered) !important; }

/* Avatar markers (Leaflet DivIcons built in teamMap.js) */
.tm-marker-wrap { background: none; border: none; }

.tm-marker {
    position: relative;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--dxds-color-content-neutral-default-static-dark-rest);
    background: var(--tm-bg, var(--sos-avatar-1));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    border: 2px solid var(--tm-ring, var(--dxds-color-surface-neutral-default-rest));
    cursor: pointer;
}

.tm-marker .tm-marker-initials { pointer-events: none; line-height: 1; }

/* Freshness ring */
.tm-marker.tm-fresh  { --tm-ring: var(--sos-status-success-solid); }
.tm-marker.tm-recent { --tm-ring: var(--sos-status-warning-solid); }
.tm-marker.tm-stale  { --tm-ring: var(--sos-status-neutral-solid); }

/* Selected emphasis */
.tm-marker.tm-selected {
    box-shadow: 0 0 0 3px var(--sos-accent), 0 3px 10px rgba(0, 0, 0, 0.4);
}

/* Soft pulse for active (fresh) markers */
@media (prefers-reduced-motion: no-preference) {
    .tm-marker.tm-fresh::after {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 50%;
        border: 2px solid var(--sos-status-success-solid);
        animation: tm-pulse 2s ease-out infinite;
        pointer-events: none;
    }
}

@keyframes tm-pulse {
    0%   { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.85); opacity: 0; }
}