/*
 * Styles for the Home Area "Device Locations" map.
 *
 * Leaflet renders markers outside of Blazor's component DOM, so those nodes do not receive
 * the scoped CSS attribute generated for DeviceLocationMap.razor. The marker styles therefore
 * live in this regular (non-scoped) stylesheet.
 *
 * Colors reference the WAGO design tokens defined in the UILibrary theme.css, which Host.razor
 * loads before this file; no fallbacks are needed. Prefer the theme-aware role tokens
 * (--w-surface-*, --w-content-*, --w-border-*) so the styles follow the dark theme; the
 * palette tokens (--w-color-*) are only used where the design is mode-independent.
 */

.dlm-pin {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    border: 1px solid var(--w-color-light);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(31, 40, 55, .35);
}

/* Cluster pin: larger circle than a single device pin so the device count stays readable.
   The size is constant - selecting the cluster only adds the ring below. */
.dlm-pin--cluster {
    width: 32px;
    height: 32px;
    font-size: 15px;
}

/* Selected pin (Figma): a 4 px ring with a 1 px outline is drawn around the unchanged pin
   circle (it replaces the drop shadow). Ring and outline use the theme-aware role tokens, so
   they flip with the dark theme (light: white ring + content/subtle outline). */
.dlm-pin--selected {
    box-shadow:
        0 0 0 4px var(--w-surface-layer-1),
        0 0 0 5px var(--w-content-subtle);
}

.dlm-pin--online {
    background: var(--w-surface-primary);
    color: var(--w-content-variant-fixed);
}

.dlm-pin--offline {
    background: var(--w-surface-warning);
    color: var(--w-content-variant-fixed);
}

.dlm-pin--not-connected {
    background: var(--w-color-neutral-40);
    color: var(--w-content-variant-fixed);
}