/* maps-2.css - styles for the WF mapping subsystem (MapControl / MiniMap).
   Colors track the tenant theme via --theme-* tokens.
   (The "-2" is a cache-buster rename - see wfmap-2.js header.) */

.wf-map {
    position: relative;
    width: 100%;
    border-radius: var(--theme-radius-md, 8px);
    overflow: hidden;
    background: var(--theme-surface-2, #eef1f5);
}

.wf-map__canvas {
    width: 100%;
    height: 100%;
}

.wf-map__nokey {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 100%;
    min-height: 160px;
    color: var(--theme-text-muted, #6b7280);
    font-size: 0.875rem;
    background: var(--theme-surface-2, #eef1f5);
}

/* ---- On-map layer controls (style switcher + traffic/weather toggles) ----
   Collapsed by default to a small corner button at the map's 0,0 so small maps
   (mobile, minimaps, surface cards) keep their real estate. Pressing it pops
   the settings dialog open where the old box lived (top-right); the X pops it
   back. The chosen layers persist via wfmap.layers localStorage regardless. */

.wf-map__layers-fab {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--theme-border, #dfe3e8);
    border-radius: 50%;
    background: linear-gradient(180deg, var(--theme-surface, #fff), var(--theme-surface-2, #eef1f5));
    color: var(--theme-text, #1f2937);
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .6);
    transition: transform .12s ease, box-shadow .12s ease;
}

.wf-map__layers-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 5px 12px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .6);
}

.wf-map__layers {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    align-items: stretch;
    min-width: 200px;
    background: linear-gradient(180deg, var(--theme-surface, #fff) 0%, var(--theme-surface-2, #eef1f5) 100%);
    border: 1px solid var(--theme-border, #dfe3e8);
    border-radius: var(--theme-radius-md, 10px);
    padding: 0.55rem 0.7rem 0.65rem;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .28), 0 3px 8px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 0.78rem;
    transform-origin: top right;
    animation: wf-map-pop .16s ease-out;
}

@keyframes wf-map-pop {
    from {
        transform: scale(.7);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.wf-map__layers-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-bottom: 0.35rem;
    margin-bottom: 0.1rem;
    border-bottom: 1px solid var(--theme-border, #dfe3e8);
    color: var(--theme-text, #1f2937);
    font-weight: 600;
    font-size: 0.8rem;
}

.wf-map__layers-close {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--theme-text-muted, #6b7280);
    font-size: 0.72rem;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.wf-map__layers-close:hover {
    background: var(--theme-surface-2, #eef1f5);
    color: var(--theme-text, #1f2937);
}

.wf-map__styles {
    display: flex;
    gap: 0;
    border: 1px solid var(--theme-border, #dfe3e8);
    border-radius: var(--theme-radius-button, 6px);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);
}

.wf-map__style-btn {
    flex: 1 1 auto;
    border: 0;
    background: var(--theme-surface, #fff);
    color: var(--theme-text, #1f2937);
    padding: 0.3rem 0.55rem;
    font-size: 0.76rem;
    cursor: pointer;
}

.wf-map__style-btn--active {
    background: var(--theme-primary, #2f6fe0);
    color: var(--theme-on-primary, #fff);
    font-weight: 600;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25);
}

.wf-map__toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--theme-text, #1f2937);
    cursor: pointer;
    margin: 0;
}

/* ---- Custom DOM pins (atlas.HtmlMarker) ---- */

.wfpin {
    position: relative;
    width: 26px;
    height: 34px;
    cursor: pointer;
    transform-origin: bottom center;
    transition: transform .1s ease;
}

.wfpin:hover {
    transform: scale(1.15);
    z-index: 10;
}

.wfpin svg {
    display: block;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
    pointer-events: auto;
}

.wfpin__label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 1px;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.2;
    color: var(--theme-text, #333);
    text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff;
    pointer-events: none;
}

/* Azure Maps popup content wrapper (the pin data dialog) */
.wfmap-popup-wrap {
    padding: 0.55rem 0.8rem;
    font-size: 0.8125rem;
    color: var(--theme-text, #1f2937);
    max-width: 260px;
}

.wfmap-popup-wrap strong {
    color: var(--theme-text, #1f2937);
}

/* ---- MiniMap ---- */

.wf-minimap {
    position: relative;
    width: 100%;
}

.wf-minimap__bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0.25rem 0;
    font-size: 0.8125rem;
}

.wf-minimap__label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--theme-text, #1f2937);
    font-weight: 600;
}

.wf-minimap__route {
    color: var(--theme-text-muted, #6b7280);
}

.wf-minimap__cta,
.wf-minimap__fallback {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    padding: 0.3rem 0.65rem;
    border-radius: var(--theme-radius-button, 6px);
    background: var(--theme-primary, #2f6fe0);
    color: var(--theme-on-primary, #fff);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.8125rem;
}

.wf-minimap__cta:hover,
.wf-minimap__fallback:hover {
    filter: brightness(0.95);
    color: var(--theme-on-primary, #fff);
}

.wf-minimap__fallback {
    margin-left: 0;
}