/* Gestão de Recebimentos — ajustes visuais do módulo financeiro.
   Complementa o Tabler; nada aqui redefine componente do tema, só refina o que
   é específico da tela de cobranças. */

/* Tabela financeira: números alinhados e legíveis, sem quebra de valor no meio.
   A linha de apoio (encargos, imóvel, vencimento) fica menor para não competir
   com o valor principal de cada coluna. */
.tabela-financeiro td,
.tabela-financeiro th {
  white-space: nowrap;
}

.tabela-financeiro td .text-secondary.small {
  white-space: normal;
  line-height: 1.3;
}

/* A primeira coluna carrega inquilino e imóvel empilhados: é a única que quebra
   linha, com largura máxima para a tabela não esticar. */
.tabela-financeiro td:first-child {
  white-space: normal;
  max-width: 260px;
}

/* Faixa lateral na cor da situação — verde pago, laranja parcial, vermelho em
   atraso, azul a vencer. Na varredura da lista o estado é lido pela cor, antes
   de qualquer número; a cor vem do enum `SituacaoCobranca.CORES`, a mesma do
   badge, então badge e faixa nunca divergem.

   `--cor-situacao` é o único ponto que muda por estado: a regra da faixa é
   escrita uma vez só, na tabela e no accordion. */
.linha-situacao {
  --cor-situacao: var(--tblr-border-color);
}

.linha-green {
  --cor-situacao: var(--tblr-green, #2fb344);
}

.linha-orange {
  --cor-situacao: var(--tblr-orange, #f76707);
}

.linha-red {
  --cor-situacao: var(--tblr-red, #d63939);
}

.linha-blue {
  --cor-situacao: var(--tblr-blue, #0054a6);
}

.tabela-financeiro tr.linha-situacao td:first-child {
  box-shadow: inset 3px 0 0 0 var(--cor-situacao);
}

/* No celular a faixa acompanha o item inteiro do accordion. */
.accordion-listagem .accordion-item.linha-situacao {
  border-left: 3px solid var(--cor-situacao);
}

/* ── Composição do valor atualizado ─────────────────────────────────── */

/* A conta aberta do que se cobra hoje, dentro do accordion do celular. É uma
   CONTA, não uma lista de campos: rótulo à esquerda, valor à direita, e a soma
   fecha embaixo — do jeito que se lê um extrato. Empilhado em pares
   rótulo/valor, este bloco sozinho ocupava metade da tela.

   Compartilhado pela listagem da Gestão de Recebimentos e pela Visão Geral: a
   macro é uma só (`macros_financeiro.composicao_do_valor`), o estilo também. */
.composicao-valor {
  margin: 0.875rem 0 0;
  padding: 0.75rem 0.875rem;
  border-radius: 0.5rem;
  background: var(--tblr-bg-surface-secondary, #f6f8fb);
}

.composicao-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8125rem;
}

.composicao-linha + .composicao-linha {
  margin-top: 0.375rem;
}

.composicao-linha dt {
  font-weight: 400;
  color: var(--tblr-secondary, #667382);
  min-width: 0;
}

.composicao-linha dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A linha que fecha a soma: separada por um filete e com o peso de um total. */
.composicao-total {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--tblr-border-color, #dadfe5);
}

.composicao-total dt {
  font-weight: 600;
  color: var(--tblr-body-color, #182433);
}

.composicao-total dd {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--tblr-red, #d63939);
}

/* A borda que separa os campos das ações é do componente compartilhado e
   pressupõe o datagrid colado na barra de botões. Com a composição no meio,
   quem passa a encostar nas ações é ela — a linha acompanha. */
.accordion-listagem .datagrid-listagem + .composicao-valor + .btn-list,
.accordion-listagem .composicao-valor + .btn-list {
  border-top: 1px solid var(--tblr-border-color, #dadfe5);
  margin-top: 0.875rem;
  padding-top: 0.875rem;
}

/* Extrato de pagamentos: cada recebimento é um cartão discreto. */
.pagamento-item {
  border-left: 3px solid var(--tblr-green, #2fb344);
}

.pagamento-item:last-child {
  margin-bottom: 0 !important;
}

/* Pagamento estornado continua visível (é histórico), mas visualmente apagado. */
.pagamento-estornado {
  border-left-color: var(--tblr-danger, #d63939);
  opacity: 0.72;
}

/* Filtro com vários campos: no celular o modal ocupa a tela inteira em vez de
   virar uma coluna estreita com rolagem dupla. */
@media (max-width: 575.98px) {
  .modal-filtro .modal-dialog {
    margin: 0.5rem;
  }

  .modal-filtro .modal-body {
    max-height: 70vh;
    overflow-y: auto;
  }
}

/* Cabeçalho do accordion de cobranças: o badge e o saldo ficam na mesma linha
   sem empurrar o título quando a tela é estreita. */
@media (max-width: 575.98px) {
  .accordion-listagem .accordion-button .badge {
    font-size: 0.6875rem;
  }
}

/* ── Listagem agrupada por contrato ───────────────────────────────────
   Cada contrato é uma linha da tabela; a linha seguinte guarda o painel com
   as parcelas, recolhido por padrão. A linha inteira é alvo de clique
   (`grupos_contrato.js`) e a seta gira quando o painel está aberto. */
.tabela-contratos > tbody.grupo-contrato > tr.linha-contrato {
  cursor: pointer;
}

.tabela-contratos > tbody.grupo-contrato > tr.linha-contrato:hover > td {
  background-color: var(--tblr-bg-surface-secondary, #f6f8fb);
}

/* A linha do contrato quebra texto como a primeira coluna das parcelas. */
.tabela-contratos > tbody.grupo-contrato > tr.linha-contrato > td {
  white-space: normal;
}

.tabela-contratos .seta-grupo .icon {
  transition: transform 0.15s ease;
}

.tabela-contratos .seta-grupo[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

/* A linha que guarda as parcelas não tem respiro próprio: quem tem é o painel.
   Recolhida (o `collapse` sem `show` e sem estar animando), some do fluxo —
   senão sobraria um filete vazio entre um contrato e o seguinte. */
.tabela-contratos > tbody.grupo-contrato > tr.linha-parcelas > td {
  padding: 0;
  border-top: 0;
}

.tabela-contratos > tbody.grupo-contrato > tr.linha-parcelas:has(> td > .collapse:not(.show):not(.collapsing)) {
  display: none;
}

/* Contrato aberto: o cabeçalho ganha fundo e o painel de parcelas fica
   recuado, com um filete na cor do produto ligando as parcelas ao contrato. */
.tabela-contratos > tbody.grupo-contrato:has(> tr.linha-parcelas .collapse.show) > tr.linha-contrato > td {
  background-color: var(--tblr-bg-surface-secondary, #f6f8fb);
}

.painel-parcelas {
  margin: 0 0 0.75rem 0.75rem;
  border-left: 3px solid var(--tblr-primary);
  border-radius: 0 0.375rem 0.375rem 0;
  background-color: var(--tblr-bg-surface, #fff);
  box-shadow: inset 0 1px 0 var(--tblr-border-color, #dadfe5);
  /* Num notebook com o menu aberto a tabela de parcelas pode não caber: ela
     rola sozinha, dentro do contrato, em vez de cortar as ações. */
  overflow-x: auto;
}

/* As parcelas cabem no espaço que sobra do recuo: respiro lateral menor e a
   coluna do inquilino mais contida (o nome já está na linha do contrato). */
.tabela-parcelas {
  margin-bottom: 0;
}

.tabela-parcelas > :not(caption) > * > * {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.tabela-parcelas td:first-child {
  max-width: 200px;
}

.tabela-parcelas > thead > tr > th {
  border-top: 0;
}

/* Celular: o accordion das parcelas mora dentro do cartão do contrato. Fica
   sobre um fundo levemente escurecido, com menos respiro que o de fora, para
   se ler como "as parcelas deste contrato" e não como uma segunda lista. */
.accordion.accordion-listagem.accordion-parcelas {
  padding: 0.5rem;
  background-color: var(--tblr-bg-surface-secondary, #f6f8fb);
}

.accordion.accordion-listagem.accordion-parcelas .accordion-item {
  margin-bottom: 0.5rem;
}

/* Só o respiro vertical e o da direita: o da esquerda continua o do cartão
   (e o maior, quando há checkbox de seleção no canto). */
.accordion.accordion-listagem.accordion-parcelas .accordion-button {
  min-height: 3rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-right: 0.875rem;
}

/* ── Coluna de seleção (exclusão em massa) ─────────────────────────────
   A coluna de checkbox soma ~50px a uma tabela que já ocupa a largura inteira
   num notebook com o menu aberto — e empurrava as ações para uma rolagem
   horizontal. Com ela presente, a tabela devolve esse espaço: a coluna do
   checkbox fica colada à do inquilino, e as demais células apertam um pouco o
   respiro lateral. Sem seleção (quem não pode excluir), nada muda. */
.tabela-financeiro.tabela-com-selecao > :not(caption) > * > * {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.tabela-financeiro.tabela-com-selecao > :not(caption) > * > .coluna-selecao {
  padding-left: 1rem;
  padding-right: 0.25rem;
}

/* A faixa lateral da situação continua na primeira célula visível. */
.tabela-financeiro.tabela-com-selecao tr.linha-situacao td.coluna-selecao {
  box-shadow: inset 3px 0 0 0 var(--cor-situacao);
}


/* Coluna Parcelas da listagem por contrato: a barra fina do que já foi
   quitado, sob o "restam N" — curta, para não competir com o texto. */
.andamento-parcelas {
  max-width: 7rem;
}