/* Tela Localidades (Módulo Vendas, etapa 5). Mesma paleta/tamanhos dos
   demais CSS do módulo (var(--color-surface) superfície, var(--color-border) borda, verde
   var(--color-primary)/var(--color-focus) de destaque) — todo seletor prefixado por
   ".localidades-vendas" porque CSS de componente de módulo não usa CSS
   isolado (.razor.css) nesta solução; ver .claude/rules/arquitetura.md.

   Cor de preenchimento do choropleth (CORES_FAIXAS) duplicada em
   localidadesMapa.js e em Localidades.razor.cs (legenda) — ver comentário
   em Localidades.razor.cs sobre a paleta ainda não ter sido confirmada
   pixel a pixel contra o protótipo (handoff extraído não tinha o
   preenchimento do mapa, só contorno/hover). */

.localidades-vendas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.localidades-vendas__titulo {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink-forte);
}

.localidades-vendas__erro {
  padding: 12px;
  background: var(--danger-bg);
  color: var(--danger-text);
  border-radius: 8px;
  border: 1px solid var(--danger-border);
}

.localidades-vendas__vazio {
  padding: 16px;
  text-align: center;
  color: var(--color-subtle);
  font-size: 11px;
}

.localidades-vendas__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px;
}

.localidades-vendas__card h2,
.localidades-vendas__card h3 {
  margin: 0;
  font-size: 10.5px;
  color: var(--color-muted);
  font-weight: 700;
}

/* Cabeçalho de cartão: título à esquerda, nota discreta à direita —
   o protótipo tem os dois ("Faturamento por UF" / "Malha territorial
   por UF"; "Faturamento por Cidade" / contagem de cidades). */
.localidades-vendas__card-cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.localidades-vendas__card-nota {
  font-size: 9px;
  color: var(--color-subtle);
  white-space: nowrap;
}

/* --- Grade externa: cartão do mapa + cartão da tabela lado a lado.

   Largura da tabela é FIXA em 342px, não uma fração — é o que o
   protótipo faz (`grid-template-columns:1fr 342px`, extraído do
   standalone em 28/07/2026). Com fração (1fr 1fr, depois 7fr 3fr) a
   coluna da tabela crescia junto com a tela e roubava espaço do mapa
   justamente nos monitores largos, que é onde o mapa deveria respirar
   mais — a origem do "o mapa do Brasil ficou muuuuito pequeno". A
   tabela tem largura de conteúdo previsível (UF + cidade + valor), então
   fixá-la e dar todo o resto ao mapa é o comportamento certo. */
.localidades-vendas__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 342px;
  gap: 12px;
}

/* Cartões da grade viram flex column pra a lista poder preencher a
   altura toda (ver `__tabela-area`). A altura da linha da grade é
   ditada só pelo cartão do mapa — ver a nota em `__tabela-area` sobre
   por que a lista fica fora do fluxo. */
.localidades-vendas__grade > .localidades-vendas__card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* --- Mapa: área do SVG + coluna lateral (legenda + "fora do mapa") --- */

/* Coluna lateral em 150px (protótipo usa 138px): nossa legenda mostra o
   valor por extenso (`ToString("C0")`), enquanto a do protótipo usa uma
   forma compacta ("R$ 402 mil"), então precisa de um pouco mais de
   largura pra não quebrar cada faixa em duas linhas. */
.localidades-vendas__mapa-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 8px;
}

/* Altura FIXA (não `min-height`): o mapa nacional e o mapa do estado
   usam a mesma classe, então os dois quadros ficam exatamente do mesmo
   tamanho — pedido explícito do Sylvio em 28/07/2026 ("quando abrir o
   frame de UF tem que ser do mesmo tamanho da do Brasil"). O protótipo
   usa 290px/250px; 420px é a altura que esta tela já vinha usando e que
   o Sylvio pediu pra manter ("volta na altura de antes"). */
.localidades-vendas__mapa-area {
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Drill-down municipal: mora dentro do cartão do mapa, separado do mapa
   nacional só por uma divisória — espelha o `#statewrap` do protótipo. */
.localidades-vendas__drilldown {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}

.localidades-vendas__drilldown-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.localidades-vendas__mapa-lateral {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.localidades-vendas__legenda {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 9px;
  line-height: 1.35;
  color: var(--color-ink-soft);
}

.localidades-vendas__legenda-titulo {
  font-size: 9px;
  font-weight: 700;
  color: var(--color-subtle);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.localidades-vendas__legenda-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.localidades-vendas__legenda-cor {
  width: 14px;
  height: 9px;
  border-radius: 2px;
  flex: none;
}

/* "Bloco amarelo" de vendas ao exterior — handoff-prototipo-interacao.md
   §4 ("o bloco amarelo 'R$ X fora do mapa'"), mesmo padrão de bloco de
   aviso já usado em .localidades-vendas__erro pro vermelho. */
.localidades-vendas__fora-mapa {
  padding: 8px 10px;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: 8px;
  color: var(--warning-text);
  font-size: 10.5px;
  line-height: 1.4;
}

/* --- SVG do mapa (D3 desenha os <path> dentro, via localidadesMapa.js) --- */

/* O SVG preenche o quadro e se ajusta dentro dele (`viewBox` +
   `preserveAspectRatio` padrão já centralizam sem distorcer). Antes era
   `height: auto; max-height: 480px`: com o quadro agora em altura FIXA
   (420px), o `auto` calculava a altura pela proporção do viewBox e
   estourava o quadro, fazendo o mapa nacional invadir o drill-down logo
   abaixo — "os mapas ficaram sobrepostos" (28/07/2026). */
#mapa-brasil,
#mapa-estado {
  width: 100%;
  height: 100%;
  display: block;
}

#mapa-brasil path,
#mapa-estado path {
  /* --color-subtle (tom médio) sumia contra os verdes mais escuros da
     faixa de faturamento — contorno precisa ser --color-ink (claro no
     tema escuro, escuro no tema claro) pra separar os estados com
     contraste de verdade, não só --color-ink-forte no hover. */
  stroke: var(--color-ink);
  stroke-width: .7;
  cursor: default;
  transition: opacity .12s ease;
  outline: none;
}

#mapa-brasil path[data-clicavel="true"] {
  cursor: pointer;
}

#mapa-brasil path:hover,
#mapa-estado path:hover,
#mapa-brasil path:focus-visible,
#mapa-estado path:focus-visible,
#mapa-brasil path.loc-uf-aberta {
  stroke: var(--color-ink-forte);
  stroke-width: 1.2;
  opacity: .82;
}

/* Destaque recíproco tabela <-> mapa (ligado em JS, nunca no servidor —
   ADR 0018). Mesmos valores visuais do hover/estado aberto. */
#mapa-brasil path.loc-mapa-destacada,
#mapa-estado path.loc-mapa-destacada {
  stroke: var(--color-ink-forte);
  stroke-width: 1.2;
}

/* --- Tabela "Faturamento por Cidade" --- */

/* A altura da linha da grade é o MAIOR conteúdo entre os dois cartões, e
   `PorCidade` pode ter centenas de linhas (341 no filtro sem filtro
   nenhum) — em 28/07/2026 isso esticou os dois cartões pra ~10.000px de
   altura, com a lista inteira aberta e o mapa perdido no topo.
   `flex: 1 + overflow` sozinho não resolve: o cartão é dimensionado por
   `max-content`, que continua contando a tabela toda.

   A saída é tirar a lista do fluxo: a área é `relative` e só reserva
   espaço (`flex: 1`), enquanto o rolável é `absolute` dentro dela e não
   contribui nada pra altura. Assim a linha da grade passa a ser ditada
   só pelo cartão do mapa, e a lista preenche exatamente o que sobra —
   "a lista deve chegar até embaixo" sem esticar a tela. */
.localidades-vendas__tabela-area {
  position: relative;
  flex: 1;
  min-height: 220px;
}

.localidades-vendas__tabela-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  /* Espaço reservado pra barra de rolagem não colar em cima do texto da
     última coluna ("Total Geral") — achado de 28/07/2026. */
  padding-right: 10px;
}

/* `table-layout: fixed` + larguras nas colunas de fora: as três colunas
   do protótipo são `34px 1fr 88px`. Sem isso o nome da cidade empurra a
   coluna de valor e o alinhamento dança de linha pra linha. */
.localidades-vendas__tabela {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 9.5px;
}

.localidades-vendas__tabela th:first-child,
.localidades-vendas__tabela td:first-child {
  width: 34px;
}

.localidades-vendas__tabela th:last-child,
.localidades-vendas__tabela td:last-child {
  width: 92px;
}

.localidades-vendas__tabela thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-surface);
  text-align: left;
  color: var(--color-subtle);
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
}

/* "Total Geral" — cabeçalho precisa do mesmo alinhamento à direita da
   célula (.localidades-vendas__valor), senão o texto do <th> fica à
   esquerda enquanto os valores embaixo ficam à direita. */
.localidades-vendas__tabela thead th.localidades-vendas__valor {
  text-align: right;
}

/* Rodapé "Vendas ao exterior" fixo na base da área rolável — o
   protótipo mantém esse total sempre visível (`#cityfoot` fica fora do
   `#citylist`), então ele não some ao rolar a lista. */
.localidades-vendas__tabela tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: var(--color-surface);
  padding: 6px 0;
  border-top: 1px solid var(--color-border-soft);
}

/* Nome de cidade longo não pode empurrar a coluna de valor. */
.localidades-vendas__tabela tbody td:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.localidades-vendas__tabela tbody td {
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-ink);
}

/* Cabeçalho e rodapé da lista são fixos (sticky), e `scrollIntoView` não
   sabe disso: com `block: 'nearest'` ele encosta a linha na borda da área
   rolável, bem embaixo do rodapé "Vendas ao exterior" — ao clicar num
   município do mapa a linha "não subia o suficiente" e ficava escondida
   (28/07/2026). `scroll-margin` é o mecanismo próprio pra isso: reserva a
   faixa ocupada pelos elementos fixos, então o scroll para antes dela. */
.localidades-vendas__tabela tbody tr {
  scroll-margin-top: 28px;
  scroll-margin-bottom: 30px;
}

/* Realce da linha sob o cursor — CSS puro, sem JS nem evento no
   servidor (Delta Spec, "Scenario: Linha sob o cursor fica realçada"). */
.localidades-vendas__tabela tbody tr:hover {
  background: var(--neutral-bg);
}

/* Destaque recíproco (linha acesa porque o mapa está com o mouse/foco
   em cima da área correspondente) — ligado por localidadesMapa.js. */
.localidades-vendas__tabela tbody tr.loc-tabela-destacada {
  background: var(--success-bg);
}

.localidades-vendas__badge-uf {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--color-border);
  color: var(--color-muted);
  font-size: 9px;
  font-weight: 700;
}

.localidades-vendas__valor {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.localidades-vendas__linha-exterior td {
  color: var(--color-muted);
  font-style: italic;
}

/* A coluna da tabela é fixa (342px), então mapa e tabela continuam
   cabendo lado a lado bem abaixo dos 1400px que os filtros precisam —
   só empilha quando o que sobraria pro mapa ficaria estreito demais. */
@media (max-width: 1100px) {
  .localidades-vendas__grade {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .localidades-vendas__mapa-grade {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Pedidos da cidade selecionada (composição B)

   A troca de conteúdo do cartão da direita é resolvida AQUI, não no
   C#: o Blazor renderiza a tabela e o painel de pedidos juntos, e a
   largura decide qual aparece. Isso é o que torna "redimensionar não
   perde a seleção nem refaz a consulta" verdade de graça — não existe
   listener de `resize`, nem re-render por circuito, nem estado de
   largura no servidor.

   Abaixo de 1920px: a lista OCUPA O LUGAR da tabela.
   A partir de 1920px: os dois convivem, e os pedidos viram a terceira
   coluna da grade — só nessa largura a linha selecionada recebe
   marcação persistente, porque só nela a tabela continua visível.
   ═══════════════════════════════════════════════════════════════════ */

/* O `__grade >` é obrigatório, não enfeite: `.localidades-vendas__grade >
   .localidades-vendas__card` (duas classes) já declara `display: flex`, e
   venceria um `.localidades-vendas__card-tabela--substituida` solto (uma
   classe) por especificidade. Sem isto a tabela nunca some abaixo de
   1920px — a lista só desce pra uma segunda linha da grade, e os dois
   Scenarios de troca por largura falham em silêncio. */
.localidades-vendas__grade > .localidades-vendas__card-tabela--substituida {
  display: none;
}

/* Abaixo de 1920px, com a lista no lugar da tabela, a coluna da direita
   cresce de 342px para 560px — é o que o protótipo faz na composição B
   (`grid.style.gridTemplateColumns = '1fr 560px'` no ramo `else` de
   `W >= 1920`). Não é detalhe estético: as quatro colunas fixas de
   pedido somam 348px, então em 342px a coluna "Cliente" é espremida a
   zero e a tabela ainda vaza pra fora do cartão.

   O piso de 1101px preserva o empilhamento em coluna única declarado
   acima: `:has()` tem especificidade maior que o `.__grade` daquela
   regra e venceria em qualquer largura, forçando duas colunas onde o
   mapa já não cabe. */
@media (min-width: 1101px) {
  .localidades-vendas__grade:has(.localidades-vendas__card-pedidos) {
    grid-template-columns: minmax(0, 1fr) 560px;
  }
}

.localidades-vendas__linha--selecionada {
  background: var(--color-surface-hover, rgba(148, 163, 184, 0.12));
}

/* Abaixo de 1920 a tabela some, então marcar a linha não teria efeito
   visível nenhum — e deixar a regra ativa sugeriria que existe algo
   marcado onde não há tabela em tela. */
@media (max-width: 1919px) {
  .localidades-vendas__linha--selecionada {
    background: transparent;
  }
}

@media (min-width: 1920px) {
  .localidades-vendas__grade {
    grid-template-columns: minmax(0, 1fr) 342px;
  }

  /* Com cidade selecionada, a grade ganha a terceira coluna e a tabela
     volta a aparecer ao lado da lista. Medidas literais do protótipo
     (`grid.style.gridTemplateColumns = '1fr 360px 560px'` na composição
     B com W >= 1920): a tabela de cidades ganha 18px em relação aos
     342px que tem sem seleção, e a lista precisa dos 560px — com 420px
     as cinco colunas de pedido não cabem. */
  .localidades-vendas__grade:has(.localidades-vendas__card-pedidos) {
    grid-template-columns: minmax(0, 1fr) 360px 560px;
  }

  /* Mesma especificidade da regra que esconde, senão a tabela não volta. */
  .localidades-vendas__grade > .localidades-vendas__card-tabela--substituida {
    display: flex;
  }
}

.localidades-vendas__card-pedidos {
  min-width: 0;
}

/* Larguras das cinco colunas de pedido — medidas literais do protótipo
   (`ordersCols()`): `128px 80px 84px 1fr 124px` a partir de 1920px e
   `100px 62px 74px 1fr 112px` abaixo disso. Precisam estar aqui porque
   `__tabela` fixa `first-child: 34px` e `last-child: 92px` para as TRÊS
   colunas da tabela de cidades — herdadas cruas, "Empresa" transborda
   em 34px e "Cliente", que é a coluna elástica, fica a mais estreita de
   todas. */
.localidades-vendas__tabela-pedidos th:nth-child(1),
.localidades-vendas__tabela-pedidos td:nth-child(1) {
  width: 100px;
}

.localidades-vendas__tabela-pedidos th:nth-child(2),
.localidades-vendas__tabela-pedidos td:nth-child(2) {
  width: 62px;
}

.localidades-vendas__tabela-pedidos th:nth-child(3),
.localidades-vendas__tabela-pedidos td:nth-child(3) {
  width: 74px;
}

/* Cliente é a coluna elástica (`1fr` no protótipo): sem largura fixa,
   `table-layout: fixed` dá a ela tudo o que sobra. */
.localidades-vendas__tabela-pedidos th:nth-child(4),
.localidades-vendas__tabela-pedidos td:nth-child(4) {
  width: auto;
}

.localidades-vendas__tabela-pedidos th:nth-child(5),
.localidades-vendas__tabela-pedidos td:nth-child(5) {
  width: 112px;
}

@media (min-width: 1920px) {
  .localidades-vendas__tabela-pedidos th:nth-child(1),
  .localidades-vendas__tabela-pedidos td:nth-child(1) {
    width: 128px;
  }

  .localidades-vendas__tabela-pedidos th:nth-child(2),
  .localidades-vendas__tabela-pedidos td:nth-child(2) {
    width: 80px;
  }

  .localidades-vendas__tabela-pedidos th:nth-child(3),
  .localidades-vendas__tabela-pedidos td:nth-child(3) {
    width: 84px;
  }

  .localidades-vendas__tabela-pedidos th:nth-child(5),
  .localidades-vendas__tabela-pedidos td:nth-child(5) {
    width: 124px;
  }
}

.localidades-vendas__voltar {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-accent, #38bdf8);
  cursor: pointer;
  font-size: 0.8125rem;
}

.localidades-vendas__voltar:hover,
.localidades-vendas__voltar:focus-visible {
  text-decoration: underline;
}

/* Célula acionável: o botão herda a aparência do texto da célula — quem
   olha vê o nome da cidade, quem navega por teclado encontra um botão
   de verdade. */
.localidades-vendas__celula-acionavel {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}

.localidades-vendas__celula-acionavel:hover,
.localidades-vendas__celula-acionavel:focus-visible {
  text-decoration: underline;
}

/* Linha não detalhável: sem cara de link, porque não navega para lugar
   nenhum — ela explica. */
.localidades-vendas__celula-acionavel--nota {
  color: var(--color-text-muted, #94a3b8);
}

.localidades-vendas__nota-inline {
  margin: 4px 0 0;
  padding: 6px 8px;
  border-left: 3px solid var(--color-warning, #f59e0b);
  background: var(--color-warning-surface, rgba(245, 158, 11, 0.12));
  color: var(--color-text, #e2e8f0);
  font-size: 0.75rem;
  line-height: 1.35;
}

.localidades-vendas__ordenar {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.localidades-vendas__ordenar:hover,
.localidades-vendas__ordenar:focus-visible {
  text-decoration: underline;
}

/* Flex pra seta ficar colada no rótulo sem depender de espaço em branco
   do markup — o Razor recorta os nós de texto e o gap some. */
.localidades-vendas__ordenar {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* O cabeçalho "Valor" é alinhado à direita como a coluna; sem isto o
   botão fica à esquerda e só o texto solto obedece o alinhamento. */
.localidades-vendas__tabela thead th.localidades-vendas__valor .localidades-vendas__ordenar {
  justify-content: flex-end;
  width: 100%;
}

/* A seta sublinhada junto do rótulo no hover fica com aparência de erro
   de renderização — o sublinhado é do texto, não do glifo. */
/* `--color-disabled`, não uma cor de borda: a seta neutra tem de ser
   discreta e ainda assim legível nos DOIS temas. `--color-border-soft`
   (#e0ebf1 no tema claro) sumia contra o fundo branco do cartão — o
   protótipo é só tema escuro, então copiar o #334155 dele às cegas
   deixaria a affordance invisível justamente no tema que a CDC usa. */
.localidades-vendas__seta {
  text-decoration: none;
  display: inline-block;
  color: var(--color-disabled, #94a3b8);
}

.localidades-vendas__seta--ativa {
  color: var(--color-focus, #34d399);
}

.localidades-vendas__paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0 0;
  font-size: 0.75rem;
}

.localidades-vendas__exportar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0 0;
}

.localidades-vendas__exportar-apoio {
  color: var(--color-text-muted, #94a3b8);
  font-size: 0.6875rem;
}

.localidades-vendas__erro-pedidos,
.localidades-vendas__erro-exportacao {
  padding: 8px;
  color: var(--color-danger, #f87171);
  font-size: 0.75rem;
}

/* Região de anúncio para leitor de tela: fora da vista, nunca fora da
   árvore de acessibilidade (`display:none` não é anunciado). */
.localidades-vendas__anuncio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Contorno persistente do município selecionado. Classe SEPARADA da de
   hover/foco (que o localidadesMapa.js aplica e remove a cada
   mouseleave): esta sobrevive enquanto a lista estiver aberta, porque é
   a referência de "vim daqui" que substituiu a linha marcada da tabela
   na composição B. */
.loc-municipio--selecionado {
  stroke: var(--color-accent, #38bdf8);
  stroke-width: 2.5;
  paint-order: stroke;
}