/* ── Host (map + overlays) ────────────────────────────────────────── */
/* The map host wraps the MapLibre canvas and the two Figma "map wrapper"
   overlays: the indicator chip and the custom zoom controls. It is the
   positioned ancestor both overlays resolve against. */
.ocorrencia-map-host {
    position: relative;
    height: 100%;
    width: 100%;
    min-width: 0;
}

.ocorrencia-map-host .ocorrencia-map {
    height: 100%;
    width: 100%;
}

/* ── Load-failure message ──────────────────────────────────────────── */
/* Dev_docs auto-hospedagem standard, §9.5/§14.2: dependency bootstrap or
   WebGL2 failures render an explicit pt-BR message instead of a blank
   screen. Rendered either by the component (module import failure) over
   the host, or by the JS module (WebGL2 missing) inside the MapLibre
   container — canvas containers are positioned, so the same inset works
   in both places. Sits above map controls and popups (z-index 700 zone). */
.ocorrencia-map-error {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    font-size: 14px;
    color: var(--semantic-text-primary, #3c4047);
    background-color: var(--semantic-background-secondary, #fafafa);
    z-index: 1100;
}

/* ── Indicator (Figma: "Indicador — ocorrências nesta área") ──────── */
/* 167×32 chip, 8px radius, #ffffff fill, #e2e3e6 border; label 12px/500
   #3c4047, padding 8×10. Anchored to the map's top edge with the Figma
   wrapper's 20px top inset. */
.ocorrencia-indicator {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    display: inline-flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: var(--border-radius-md);
    background: var(--semantic-background-primary);
    border: var(--border-width-regular) solid var(--semantic-border-subtle);
}

.ocorrencia-indicator-label {
    font-family: var(--rz-text-font-family, sans-serif);
    font-size: var(--typescale-label-small-size);
    font-weight: 500;
    line-height: var(--typescale-label-small-line-height);
    letter-spacing: 0;
    color: var(--semantic-content-secondary);
    white-space: nowrap;
}

/* ── Zoom controls (Figma: 38×72, #fafafa, 8px radius) ────────────── */
/* Two 30×30 outlined squared icon-buttons, 4px gap, anchored bottom-right
   with the Figma wrapper's 20px right and 8px bottom insets. */
.ocorrencia-zoom-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 500;
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
    border-radius: var(--border-radius-md);
    background: var(--semantic-background-secondary);
}

.ocorrencia-zoom-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: var(--border-width-regular) solid var(--semantic-border-default);
    border-radius: var(--components-button-dimension-border-radius-squared);
    background: var(--semantic-background-primary);
    cursor: pointer;
}

.ocorrencia-zoom-button:hover {
    background: var(--semantic-action-neutral-ghost-container-hover);
}

.ocorrencia-zoom-button:active {
    background: var(--semantic-action-neutral-ghost-container-pressed);
}

.ocorrencia-zoom-button:focus-visible {
    outline: var(--rz-outline-width) solid var(--semantic-action-brand-shared-focus-ring);
    outline-offset: var(--rz-outline-offset);
}

.ocorrencia-zoom-icon {
    display: block;
    width: 14px;
    height: 14px;
    padding: 1px;
    box-sizing: border-box;
    object-fit: contain;
}

/* ── Container ─────────────────────────────────────────────────────── */
/* Structural contract: OcorrenciaMap.razor sets --ocorrencia-map-height and
   --ocorrencia-map-width; this rule reads them. Keeps dynamic geometry out of
   a literal `style` attribute (design-strategy §11, §13.1).

   NOT scoped under `.mod-zeladoria` any more (change of 2026-10-24). The
   module root class is applied per page, not by `ModeratorLayout`, so any page
   that rendered `OcorrenciaMap` without remembering to add it lost this whole
   contract: the MapLibre container ended up without a definite height (a
   barely-visible canvas strip) and the indicator/zoom overlays fell back into
   normal flow at the top-left corner. That is exactly how
   `ProgramacaoCriacao.razor` and `ProgramacaoDetalhe.razor` broke.

   Every selector in this file targets a map-specific class
   (`ocorrencia-map*`, `ocorrencia-pin*`, `ocorrencia-indicator`,
   `ocorrencia-zoom-*`, `maplibregl-*`), so dropping the prefix keeps every rule
   applying to the map part of components only — the contract this file exists
   to express — while making the component self-contained. Contexts that need a
   different frame (`.occurrence-detail-map`, `.pg-mini-map`,
   `.dashboard-map-view`, `.occurrence-map-frame`) keep their own more specific
   rules. */
.ocorrencia-map {
    height: var(--ocorrencia-map-height, 600px);
    width: var(--ocorrencia-map-width, 100%);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    border: var(--border-width-regular) solid var(--semantic-border-subtle);
    background-color: var(--semantic-background-secondary);
}

/* Resize affordance only when the caller opts in. min/max are geometry guard
   rails, not visual values, so they remain literal. */
.ocorrencia-map--resizable {
    resize: horizontal;
    min-width: 320px;
    max-width: 100%;
}

/* ── Individual pin ────────────────────────────────────────────────── */
/* Pin glyphs are exported with their colour baked in (TipoProblema.IconFile),
   so no per-type tint is applied here. The old per-type `fill` overrides were
   hardcoded hex literals outside tokens.css and have been removed (§4.5). */
.ocorrencia-pin-host {
    background: none;
    border: 0;
}

.ocorrencia-pin {
    position: relative;
    width: 36px;
    height: 47px;
    cursor: pointer;
}

.ocorrencia-pin-img {
    display: block;
    width: 36px;
    height: 47px;
}

/* Selected halo: 42x42 ring offset -3px (Figma 2328:26541). */
.ocorrencia-pin--selected::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: var(--border-width-thick) solid var(--semantic-content-default);
    box-sizing: border-box;
}

/* Overlap indicator: pins of different types sharing the same screen spot. */
.ocorrencia-pin--overlap .ocorrencia-pin-img {
    filter: drop-shadow(0 0 0 transparent) drop-shadow(2px -2px 0 var(--semantic-background-primary));
}

/* ── Overlap popup list ───────────────────────────────────────────── */
.ocorrencia-overlap-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}

.ocorrencia-overlap-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    border: 0;
    border-radius: 6px;
    background: none;
    cursor: pointer;
    font-family: var(--rz-text-font-family, sans-serif);
    color: var(--semantic-content-default);
    text-align: left;
}

.ocorrencia-overlap-item:hover {
    background: var(--semantic-background-secondary);
}

.ocorrencia-overlap-item img {
    width: 24px;
    height: 31px;
}

.ocorrencia-overlap-name {
    flex: 1;
}

.ocorrencia-overlap-count {
    font-weight: 600;
}

/* ── Count badge (Figma: 16x16 at 23,-2) ──────────────────────────── */
.ocorrencia-pin-count {
    position: absolute;
    top: -2px;
    left: 23px;
    min-width: 16px;
    height: 16px;
    box-sizing: border-box;
    border-radius: var(--border-radius-full);
    border: var(--border-width-regular) solid var(--semantic-border-subtle);
    background: var(--semantic-background-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 3px;
    z-index: 1;
    font-family: var(--rz-text-font-family, sans-serif);
    font-size: var(--typescale-label-x-small-size);
    font-weight: 600;
    line-height: 1;
    color: var(--semantic-content-default);
}

/* ── Attribution ───────────────────────────────────────────────────── */
/* MapLibre AttributionControl (bottom-right), text always visible
   (AttributionControl compact:false — no info toggle).

   The mandated credits (OpenMapTiles / OpenStreetMap) come from the style
   source and are aggregated by the control automatically. Maps:Attribution
   is therefore empty by default — repeating them as a customAttribution was
   pure duplication. Keep this control readable: the notice is a licence
   obligation, only its presentation may be reduced. */
.maplibregl-ctrl-attrib {
    font-family: var(--rz-text-font-family, sans-serif);
    font-size: var(--typescale-label-x-small-size);
    color: var(--semantic-content-secondary);
    background: color-mix(in srgb,
        var(--semantic-background-primary) 80%, transparent);
}

/* Occurrence-detail mini-map: type scaled by RATIO, not by a literal (C1/C3).

   In the 314px dialog column the credit must stay on one line, so its size has
   to follow the map width instead of being pinned to a fixed value.

   Ratio derivation: the design step is the label/x-small token (10px) at the
   reference map width (314px) -> 10 / 314 = 3.2cqi. `container-type:
   inline-size` is declared on `.occurrence-detail-map`
   (figma-tokens/structural/40-patterns.css) so the container query unit resolves
   against the map frame and therefore tracks dialog, viewport and device size
   changes. The clamp keeps the result between the two label tokens (x-small ->
   small), so it can never fall below the design minimum nor exceed the link's
   step.

   line-height is unitless on purpose: 11/10 is the token-pair ratio, so it
   scales with the font instead of re-introducing an absolute. The base rule
   above is deliberately left as-is: other map instances keep their current size.

   The chip is dropped ONLY here. The selector carries three classes (0-3-0) to
   beat MapLibre's own .maplibregl-ctrl.maplibregl-ctrl-attrib (0-2-0), which
   loads after this sheet — no !important, and MapLibre declares none of these
   with !important. The white halo preserves legibility over the basemap now that
   the backdrop is gone, since the licence requires the notice to stay readable. */
.occurrence-detail-map .maplibregl-ctrl.maplibregl-ctrl-attrib {
    font-size: clamp(var(--typescale-label-x-small-size), 3.2cqi, var(--typescale-label-small-size));
    line-height: 1.1;
    background-color: transparent;
    color: var(--semantic-content-secondary);
    text-shadow: 0 0 3px var(--semantic-background-primary),
                 0 0 3px var(--semantic-background-primary);
}

/* ── MapLibre DOM markers (pins/clusters) ───────────────────── */
/* maplibregl.Marker hosts the Figma pin markup. MapLibre positions the
   host via transform; only cursor and hit area come from here — all pin
   visuals stay in the per-pin rules above, unchanged from the Leaflet
   implementation. */
.maplibregl-marker {
    cursor: pointer;
}

.maplibregl-marker .ocorrencia-pin-host {
    width: 36px;
    height: 47px;
}