/* Service Map info card on the company Overview tab. */

.service-map {
    --service-map-active: #007BC3;
    --service-map-inactive: #e9ecef;
    --service-map-border: #ffffff;
}

[data-theme="dark"] .service-map {
    --service-map-inactive: #2a2d31;
    --service-map-border: #1A1D21;
}

.service-map-subtitle {
    letter-spacing: 0.04em;
}

/* Count value adapts to current theme (text-dark hard-codes #212529 and disappears
   in dark mode). Using the theme's primary text color keeps it readable in both. */
.service-map-count {
    color: var(--text-color, #212529);
}

.service-map-canvas {
    background: #f5f6fb;
    border-radius: 8px;
    padding: 8px;
}

[data-theme="dark"] .service-map-canvas {
    background: #1A1D21;
}

.service-map-canvas svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Default fill for every state path – overridden inline per active state. */
.service-map-canvas svg .state {
    fill: var(--service-map-inactive);
}

.service-map-canvas svg .borders {
    stroke: var(--service-map-border);
    stroke-width: 1;
}

/* Pointer affordance + subtle hover for active states is handled via JS
   tooltip; we keep CSS purely about colors to avoid per-state JS work. */
.service-map-canvas svg path {
    transition: fill 0.15s ease-in-out;
}