/* Relatórios — ajustes visuais das telas de relatório.
   Complementa o Tabler; nada aqui redefine componente do tema.
   Os cartões de indicador do topo são o componente compartilhado
   `static/css/componentes/indicadores.css` — nenhuma regra de cartão aqui. */

/* Matriz anual (imóvel + 12 meses + total): 14 colunas só cabem com número
   compacto e sem quebra no meio do valor. */
.tabela-relatorio-anual {
  font-size: 0.8125rem;
}

.tabela-relatorio-anual td,
.tabela-relatorio-anual th {
  white-space: nowrap;
}

/* A coluna do imóvel acompanha a rolagem horizontal: valor sem o imóvel ao lado
   não se lê. É a única que quebra linha (descrição + endereço empilhados). */
.tabela-relatorio-anual .coluna-imovel {
  position: sticky;
  left: 0;
  z-index: 2;
  white-space: normal;
  min-width: 15rem;
  max-width: 20rem;
  background-color: var(--tblr-bg-surface);
  box-shadow: 1px 0 0 0 var(--tblr-border-color);
}

.tabela-relatorio-anual thead .coluna-imovel,
.tabela-relatorio-anual tfoot .coluna-imovel {
  background-color: var(--tblr-bg-surface-tertiary, var(--tblr-bg-surface-secondary));
}

.tabela-relatorio-anual .coluna-imovel .text-secondary.small {
  line-height: 1.3;
}

/* Linha de totais do rodapé: é o número que o usuário veio buscar. */
.tabela-relatorio-anual tfoot .linha-totais th {
  background-color: var(--tblr-bg-surface-secondary);
  border-top: 2px solid var(--tblr-border-color-active);
}

/* ── Matriz anual no celular e no tablet ─────────────────────────────── */

/* Um valor embaixo do outro só se lê com dígito de largura fixa: sem isso
   "R$ 1.800,00" e "R$ 15.317,86" saem serrilhados na mesma coluna. */
.relatorio-anual-movel,
.bloco-total-geral {
  font-variant-numeric: tabular-nums;
}

/* Cabeçalho do item: descrição, endereço e total do ano. São três linhas de
   texto — a seta sobe para o topo em vez de flutuar no meio delas. O resto do
   cartão (borda, respiro, alvo de toque) é o padrão de listagem no celular, em
   `classes-proprias.css`. */
.relatorio-anual-movel .accordion-button {
  align-items: flex-start;
}

.relatorio-anual-movel .accordion-button::after {
  margin-top: 0.125rem;
}

/* Total do imóvel: rótulo à esquerda, valor à direita, separado do endereço por
   uma linha sutil. É o número que se compara entre um imóvel e outro, então ele
   fica na mesma coluna em todos os itens. */
.relatorio-anual-movel .linha-total-imovel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--tblr-border-color);
}

/* Os 12 meses, do imóvel ou do total geral: duas colunas de pares rótulo/valor
   com linha separando cada mês do seguinte. Sem isso são 24 textos iguais
   empilhados, sem nenhum apoio para o olho. */
.grade-meses.datagrid-listagem {
  grid-gap: 0;
}

.grade-meses .datagrid-campo {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--tblr-border-color);
}

.grade-meses .datagrid-campo:nth-child(odd) {
  padding-right: 0.75rem;
}

.grade-meses .datagrid-campo:nth-child(even) {
  padding-left: 0.75rem;
  border-left: 1px solid var(--tblr-border-color);
}

/* A última linha fecha o bloco sem risco sobrando embaixo. */
.grade-meses .datagrid-campo:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.grade-meses .valor-do-mes {
  font-weight: var(--tblr-font-weight-medium);
}

/* Mês sem recebimento continua impresso — em relatório fiscal o zero é
   informação —, só apagado, para o olho ir direto ao que entrou. */
.grade-meses .mes-sem-valor {
  opacity: 0.5;
}

/* Celular e tablet: o rodapé da tabela vira bloco próprio abaixo do accordion.
   O recuo lateral acompanha o dos cartões do accordion, para os dois blocos
   começarem na mesma coluna. */
.bloco-total-geral {
  padding: 1rem 0.75rem;
  border-top: 2px solid var(--tblr-border-color-active);
}

/* O total do ano é o número que o usuário veio buscar: rótulo em cima, valor
   grande embaixo — empilhado para não disputar largura em telas de 360px. */
.destaque-total {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.75rem 1rem;
  border-radius: var(--tblr-border-radius);
  background-color: var(--tblr-bg-surface-secondary);
}

.destaque-total .destaque-total-valor {
  font-size: 1.25rem;
  font-weight: var(--tblr-font-weight-bold);
  line-height: 1.2;
  color: var(--tblr-green);
}