/*
 * Visualizador de mapa (UI-10): estrutura da página /mapa/.
 *
 * Só a estrutura da página: os componentes do mapa (camadas, legenda, popup, controles) estão em components.css (DES-06).
 * Reaproveita o painel lateral, a barra superior e o rodapé de components.css e muda só o que a
 * proposta da DES-05 pede (seção 6.7 do guia): a página ocupa a altura da janela, sem rolagem da
 * página, e só a lista de camadas rola dentro do painel lateral. Origem das medidas: docs/design-system/mapa.css.
 */

.app-shell-viewer {
  height: 100vh;
  min-height: 0;
}
/* Nos celulares, 100dvh acompanha a barra de endereço que aparece e some */
@supports (height: 100dvh) {
  .app-shell-viewer { height: 100dvh; }
}

/* Painel lateral: é o componente de components.css (js/app-sidebar.js); aqui só a altura e a lista de camadas, que rola */
.app-shell-viewer .app-sidebar { height: 100%; }
.map-layers-slot { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.map-layers-slot .data-state { flex: none; min-height: 0; padding: var(--tb-space-4) var(--tb-space-3); }

/* Área principal: barra superior, mapa e rodapé empilhados na altura da janela */
.app-shell-viewer .app-main { height: 100%; min-height: 0; }
.app-shell-viewer .app-header { flex: none; }
.app-shell-viewer .app-footer { flex: none; margin-top: 0; }
.map-area { display: flex; flex: 1; min-height: 0; }
/* O mapa recorta o que sai dele (o painel inferior recolhido fica abaixo da borda) e é o quadro de consulta dos contêineres */
/* Ordem interna: controles do Leaflet (500), legenda (550) e estados do mapa (600), isolados do cabeçalho e do painel lateral. */
.map-stage { --map-z-controls: 500; --map-z-legend: 550; --map-z-state: 600; --map-z-popup: 700; --map-z-pin: 690; position: relative; isolation: isolate; display: flex; flex: 1; min-width: 0; container: mapframe / inline-size; overflow: hidden; background: var(--tb-color-surface-sunken); }
.map-stage.leaflet-container { font: inherit; }
.map-stage .leaflet-control-layers { border: 1px solid var(--tb-color-border); border-radius: var(--tb-radius-lg); box-shadow: var(--tb-elevation-2); color: var(--tb-color-text); font: var(--tb-text-caption); }
.map-stage .leaflet-control-layers-expanded { padding: var(--tb-space-2) var(--tb-space-3); }
.map-stage .leaflet-control-layers-selector { accent-color: var(--tb-color-brand); }
.map-stage .leaflet-top, .map-stage .leaflet-bottom { z-index: var(--map-z-controls); }
.map-stage .leaflet-control-attribution, .map-coordinates { padding: 2px 6px; border-radius: var(--tb-radius-sm); background: rgb(255 255 255 / 88%); color: var(--tb-color-text-secondary); font: 11px/1.4 var(--tb-font-ui); }
.map-coordinates { min-width: 138px; margin-top: 2px; text-align: center; }
.map-stage .leaflet-control-scale-line { border-color: var(--tb-color-text-secondary); background: rgb(255 255 255 / 88%); color: var(--tb-color-text); font: 10px/1.1 var(--tb-font-ui); }
.map-stage .leaflet-control-zoom a { color: var(--tb-color-text); }
.map-stage .leaflet-control-zoom a:focus-visible, .map-stage .leaflet-control-layers-toggle:focus-visible { outline: var(--tb-focus-outline); outline-offset: 1px; }
.map-stage:focus-visible { outline-offset: -3px; }
.map-stage .data-state, .map-stage .loading-overlay { position: absolute; inset: 0; z-index: var(--map-z-state); }
.data-state[hidden] { display: none; }
/* A camada de carregamento é a do dashboard (components.css); aqui cobre só a área do mapa e a mensagem fica no centro dela */
.map-stage .loading-overlay-message { position: static; height: 100%; }
/* Carregando, o mapa continua à vista e responde ao clique: o aviso é só um cartão no centro, sem véu e sem pegar o mouse */
.map-stage .loading-overlay { display: grid; place-items: center; background: transparent; pointer-events: none; }
.map-stage .loading-overlay[hidden] { display: none; }
.map-stage .loading-overlay-message {
  height: auto; padding: var(--tb-space-3) var(--tb-space-5); border-radius: var(--tb-radius-lg);
  background: rgb(255 255 255 / 92%); box-shadow: var(--tb-elevation-2);
}

/* A legenda fica acima dos controles e abaixo dos avisos de estado do mapa. */
.map-legend, .map-legend-chip { z-index: var(--map-z-legend); }

/* Popup, marcador e mira ficam acima dos painéis do Leaflet (400) e dos controles (500): o components.css traz os valores do protótipo, em que o mapa é um SVG.
   No celular o popup é o painel inferior e mantém o valor do components.css (abaixo dos avisos de estado e acima dos controles). */
.map-pin { z-index: var(--map-z-pin); }
.map-crosshair { z-index: var(--map-z-legend); }
@container mapframe (min-width: 600px) {
  .map-popup { z-index: var(--map-z-popup); }
}

/* No celular, o popup e a legenda compartilham o painel inferior. */
.map-stage:has(.map-popup:not([hidden])) .map-legend-chip { display: none !important; }