/* Visão Geral — o painel inicial do produto.

   Complementa o Tabler sem brigar com ele: todas as cores saem das variáveis do
   tema (`--tblr-*`), então o modo escuro funciona sem regra a mais.

   **Sem rolagem no computador.** A partir de `lg` (com altura de tela de ao
   menos 640px) a página ocupa exatamente a altura da janela: cabeçalho,
   indicadores e uma grade 2 × 2 que fica com o resto. O que tem muito conteúdo
   (a lista, o quadro da carteira) rola DENTRO do próprio cartão. Abaixo disso
   — celular, tablet, janela muito baixa — a página empilha e rola, porque ali
   não há como caber tudo legível.

   Escopo: tudo sob `.pagina-visao-geral` ou classes próprias. As medidas
   (arco, altura) chegam calculadas da camada de apresentação. */

/* ── Tokens da tela ─────────────────────────────────────────────────── */

.pagina-visao-geral {
  --raio-painel: 0.625rem;
  --sombra-painel: 0 1px 2px rgba(24, 36, 51, 0.04), 0 6px 20px -12px rgba(24, 36, 51, 0.22);
  --sombra-painel-alta: 0 2px 4px rgba(24, 36, 51, 0.05), 0 16px 32px -16px rgba(24, 36, 51, 0.3);
  --superficie-suave: var(--tblr-bg-surface-secondary, #f6f8fb);
  --cor-previsto: var(--tblr-blue, #0054a6);
  --cor-recebido: var(--tblr-green, #2fb344);
}

/* ── Cabeçalho ─────────────────────────────────────────────────────── */

.cabecalho-painel {
  padding-top: 1rem;
  padding-bottom: 0.875rem;
}

.titulo-painel {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.acoes-painel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.acoes-painel .botao-suporte-formulario {
  margin: 0;
}

/* ── Seletor de período ────────────────────────────────────────────── */

.seletor-periodo-botao {
  gap: 0.5rem;
  font-weight: 600;
}

.seletor-periodo-botao .icon {
  color: var(--tblr-primary, #0054a6);
}

.seletor-periodo-intervalo {
  font-weight: 400;
  color: var(--tblr-secondary, #667382);
}

.seletor-periodo-menu {
  padding: 0;
  width: min(32rem, calc(100vw - 2rem));
  border-radius: var(--raio-painel);
  box-shadow: var(--sombra-painel-alta);
  overflow: hidden;
}

.seletor-periodo-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.seletor-periodo-atalhos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 0.5rem;
  padding: 0.875rem;
}

.seletor-periodo-grupo {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.seletor-periodo-grupo-titulo {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tblr-secondary, #667382);
  margin-bottom: 0.25rem;
}

.seletor-periodo-atalho {
  display: block;
  padding: 0.3125rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.seletor-periodo-atalho:hover,
.seletor-periodo-atalho:focus-visible {
  color: inherit;
  text-decoration: none;
  background: var(--superficie-suave);
}

.seletor-periodo-atalho.ativo {
  font-weight: 600;
  color: var(--tblr-primary, #0054a6);
  background: rgba(var(--tblr-primary-rgb, 0, 84, 166), 0.1);
}

.seletor-periodo-personalizado {
  padding: 0.875rem;
  border-left: 1px solid var(--tblr-border-color, #dadfe5);
  background: var(--superficie-suave);
}

.seletor-periodo-explicacao {
  margin: 0.625rem 0 0;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--tblr-secondary, #667382);
}

/* ── Cartões do painel ─────────────────────────────────────────────── */

.cartao-painel {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--raio-painel);
  box-shadow: var(--sombra-painel);
  transition: box-shadow 0.18s ease;
}

.cartao-painel:hover {
  box-shadow: var(--sombra-painel-alta);
}

.cartao-painel-cabecalho {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--tblr-border-color, #dadfe5);
}

.cartao-painel-cabecalho > .badge {
  flex: 0 0 auto;
}

.cartao-painel .card-title {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.subtitulo-painel {
  font-size: 0.75rem;
  line-height: 1.35;
}

/* O corpo ocupa o que sobra do cartão; `min-height: 0` é o que deixa ele
   encolher dentro da grade em vez de empurrar a página. */
.cartao-painel-corpo {
  flex: 1 1 auto;
  min-height: 0;
}

.cartao-painel-rolagem {
  overflow-y: auto;
}

.cartao-painel-rodape {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.8125rem;
  text-align: right;
}

/* ── Indicadores do topo ───────────────────────────────────────────── */

/* O componente compartilhado (`componentes/indicadores.css`) é o dono do
   cartão; aqui entram o filete lateral e uma versão mais baixa — cinco
   cartões numa linha, sem roubar altura da grade. */
.painel-visao-geral .painel-indicadores {
  margin-bottom: 0.75rem !important;
}

.painel-visao-geral .cartao-indicador {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio-painel);
  box-shadow: var(--sombra-painel);
}

.painel-visao-geral .cartao-indicador::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--cor-indicador);
  opacity: 0.9;
}

.painel-visao-geral .cartao-indicador:hover {
  box-shadow: var(--sombra-painel-alta);
}

.painel-visao-geral .cartao-indicador-corpo {
  padding: 0.75rem 0.875rem;
  gap: 0.625rem;
}

.painel-visao-geral .indicador-valor {
  font-size: 1.375rem;
}

/* ── Grade 2 × 2 ───────────────────────────────────────────────────── */

.grade-painel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

/* Cada célula é uma coluna flex e o cartão cresce até ocupá-la: com
   `height: 100%` o cartão não pegava a altura da célula da grade. */
.grade-painel > * {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.grade-painel > * > .cartao-painel {
  flex: 1 1 auto;
  min-height: 0;
}

@media (min-width: 992px) {
  .grade-painel {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-areas:
      'fluxo situacao'
      'lista carteira';
  }

  .grade-painel-fluxo { grid-area: fluxo; }
  .grade-painel-situacao { grid-area: situacao; }
  .grade-painel-lista { grid-area: lista; }
  .grade-painel-carteira { grid-area: carteira; }
}

/* Sem rolagem: a página tem a altura da janela e a grade fica com o resto.
   Janela baixa demais (< 640px) volta a rolar — espremer os cartões a ponto
   de não se lerem é pior que rolar. */
@media (min-width: 992px) and (min-height: 640px) {
  /* `min-height: 0` e `flex: none`: a página é item do `.page` (flex) do
     tema, e o `min-height: auto` padrão de item flex a deixaria crescer até o
     tamanho do conteúdo — era o que trazia a rolagem de volta. */
  .pagina-visao-geral {
    flex: none;
    height: 100vh;
    min-height: 0;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .pagina-visao-geral > .footer {
    display: none;
  }

  .pagina-visao-geral > .corpo-painel {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0.875rem;
    display: flex;
    flex-direction: column;
  }

  .conteudo-painel {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .conteudo-painel > .grade-painel {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1.1fr);
  }
}

/* No celular os cartões têm altura própria (a página rola): a lista e o
   quadro ganham um teto para não virarem uma tela inteira cada. */
@media (max-width: 991.98px) {
  .grade-painel-fluxo .cartao-painel { min-height: 15rem; }
  .cartao-painel-rolagem { max-height: 28rem; }
}

/* ── Previsto × Recebido ───────────────────────────────────────────── */

.grafico-fluxo-corpo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.625rem;
  padding-bottom: 0.5rem;
}

.grafico-fluxo-legenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  font-size: 0.8125rem;
  color: var(--tblr-secondary, #667382);
}

.grafico-fluxo-legenda strong {
  color: var(--tblr-body-color, #182433);
  font-variant-numeric: tabular-nums;
}

.grafico-fluxo-marca {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 0.1875rem;
  margin-right: 0.25rem;
  vertical-align: -0.0625rem;
}

.marca-previsto { background: var(--cor-previsto); opacity: 0.35; }
.marca-recebido { background: var(--cor-recebido); }

.grafico-fluxo {
  flex: 1 1 auto;
  min-height: 7rem;
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
}

.grafico-fluxo-ponto {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.grafico-fluxo-barras {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  border-bottom: 1px solid var(--tblr-border-color, #dadfe5);
  border-radius: 0.25rem 0.25rem 0 0;
  transition: background 0.15s ease;
}

.grafico-fluxo-ponto:hover .grafico-fluxo-barras {
  background: var(--superficie-suave);
}

.grafico-fluxo-barra {
  flex: 0 1 0.875rem;
  min-width: 2px;
  border-radius: 0.1875rem 0.1875rem 0 0;
}

.barra-previsto { background: var(--cor-previsto); opacity: 0.35; }
.barra-recebido { background: var(--cor-recebido); }

.grafico-fluxo-rotulo {
  height: 1.125rem;
  padding-top: 0.125rem;
  font-size: 0.6875rem;
  text-align: center;
  white-space: nowrap;
  color: var(--tblr-secondary, #667382);
}

/* O ponto de hoje: rótulo em destaque — é a referência de "antes e depois". */
.ponto-hoje .grafico-fluxo-rotulo {
  font-weight: 700;
  color: var(--tblr-primary, #0054a6);
}

.ponto-hoje .grafico-fluxo-barras {
  border-bottom-color: var(--tblr-primary, #0054a6);
  border-bottom-width: 2px;
}

/* ── Situação das parcelas (rosca) ─────────────────────────────────── */

.grafico-situacao-corpo {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.grafico-situacao-corpo .grafico-rosca-area {
  flex: 0 0 auto;
  width: min(9rem, 40%);
  max-width: none;
  margin: 0;
}

.grafico-situacao-corpo .grafico-legenda {
  flex: 1 1 auto;
  min-width: 0;
}

.grafico-rosca-area {
  position: relative;
  max-width: 11rem;
  margin: 0 auto;
}

/* O anel começa no topo: sem esta rotação a primeira fatia nasceria às 3 horas
   e a leitura circular perderia o ponto de partida. */
.grafico-rosca {
  width: 100%;
  height: auto;
  transform: rotate(-90deg);
}

.grafico-rosca circle {
  fill: none;
  stroke-width: 3.6;
}

.grafico-rosca-trilho {
  stroke: var(--superficie-suave);
}

.grafico-rosca-fatia {
  stroke-linecap: butt;
  transition: stroke-width 0.18s ease, opacity 0.18s ease;
}

/* A fatia do recorte aplicado engrossa: é o que liga o gráfico à lista
   filtrada logo acima. */
.grafico-rosca-fatia.fatia-ativa {
  stroke-width: 5.2;
}

.fatia-green { stroke: var(--tblr-green, #2fb344); }
.fatia-red { stroke: var(--tblr-red, #d63939); }
.fatia-orange { stroke: var(--tblr-orange, #f76707); }
.fatia-blue { stroke: var(--tblr-blue, #0054a6); }
.fatia-secondary { stroke: var(--tblr-secondary, #667382); }

/* O número no miolo do anel responde "quantas cobranças estão nesta conta". */
.grafico-rosca-centro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.grafico-rosca-total {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--tblr-body-color, #182433);
}

.grafico-rosca-legenda {
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tblr-secondary, #667382);
}

/* ── Legenda (rosca e barra empilhada) ─────────────────────────────── */

/* A legenda é a versão TEXTUAL do gráfico: rótulo, número e percentual. Quem
   não distingue as cores lê exatamente a mesma informação. */
.grafico-legenda {
  list-style: none;
  margin: 0;
  padding: 0;
}

.grafico-legenda-item + .grafico-legenda-item {
  margin-top: 0.25rem;
}

.grafico-legenda-item,
.grafico-legenda-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
}

.grafico-legenda-link {
  color: inherit;
  text-decoration: none;
  border-radius: 0.5rem;
  padding: 0.25rem 0.375rem;
  margin: -0.25rem -0.375rem;
  width: 100%;
  transition: background 0.15s ease;
}

.grafico-legenda-link:hover,
.grafico-legenda-link:focus-visible {
  color: inherit;
  background: var(--superficie-suave);
}

.grafico-legenda-link.legenda-ativa {
  background: var(--superficie-suave);
  font-weight: 600;
}

.grafico-legenda-marca {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 0.25rem;
  flex: 0 0 auto;
}

.marca-green { background: var(--tblr-green, #2fb344); }
.marca-red { background: var(--tblr-red, #d63939); }
.marca-orange { background: var(--tblr-orange, #f76707); }
.marca-blue { background: var(--tblr-blue, #0054a6); }
.marca-secondary { background: var(--tblr-secondary, #667382); }

/* min-width: 0 permite o corte do rótulo longo sem empurrar o número. */
.grafico-legenda-rotulo {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grafico-legenda-valor {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.grafico-legenda-percentual {
  min-width: 2.75rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--tblr-secondary, #667382);
}

/* ── Carteira hoje ─────────────────────────────────────────────────── */

.quadro-carteira {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.quadro-carteira-titulo {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tblr-secondary, #667382);
  margin-bottom: 0.25rem;
}

.quadro-carteira-percentual {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.quadro-carteira-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.quadro-carteira-lista a {
  display: flex;
  flex-direction: column;
  padding: 0.3125rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: 0.375rem;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease;
}

.quadro-carteira-lista a:hover,
.quadro-carteira-lista a:focus-visible {
  color: inherit;
  background: var(--superficie-suave);
}

.quadro-carteira-rotulo {
  font-size: 0.8125rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quadro-carteira-detalhe,
.quadro-carteira-restante,
.quadro-carteira-vazio {
  font-size: 0.75rem;
  color: var(--tblr-secondary, #667382);
}

.quadro-carteira-vazio {
  margin: 0;
}

/* ── Lista "Quem me deve?" ─────────────────────────────────────────── */

/* Mesma disciplina da tabela do financeiro: número sem quebra no meio, e só a
   coluna de identidade quebra linha. */
.tabela-visao-geral td,
.tabela-visao-geral th {
  white-space: nowrap;
}

.tabela-visao-geral thead th {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tblr-secondary, #667382);
}

.tabela-visao-geral td:first-child {
  white-space: normal;
  max-width: 260px;
}

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

.tabela-visao-geral td {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.tabela-visao-geral tbody tr {
  transition: background 0.15s ease;
}

.tabela-visao-geral tbody tr:hover {
  background: var(--superficie-suave);
}

/* Cabeçalho da tabela fixo enquanto a lista rola dentro do cartão. */
.tabela-visao-geral thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--tblr-bg-surface, #fff);
}

.pagina-visao-geral .accordion-body {
  padding-top: 0.875rem;
}

/* ── Modo escuro ───────────────────────────────────────────────────── */

[data-bs-theme='dark'] .pagina-visao-geral {
  --sombra-painel: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 20px -12px rgba(0, 0, 0, 0.6);
  --sombra-painel-alta: 0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 32px -16px rgba(0, 0, 0, 0.7);
  --cor-previsto: var(--azul-tinta, var(--tblr-blue));
}

/* ── Movimento reduzido ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .cartao-painel,
  .grafico-rosca-fatia,
  .grafico-legenda-link,
  .grafico-fluxo-barras,
  .seletor-periodo-atalho,
  .quadro-carteira-lista a,
  .tabela-visao-geral tbody tr {
    transition: none;
  }
}

/* ── Celular ───────────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
  .titulo-painel {
    font-size: 1.125rem;
  }

  .acoes-painel > * {
    flex: 1 1 auto;
  }

  .acoes-painel .btn {
    width: 100%;
    justify-content: center;
  }

  .seletor-periodo-intervalo {
    display: none;
  }

  .seletor-periodo-grade {
    grid-template-columns: minmax(0, 1fr);
  }

  .seletor-periodo-personalizado {
    border-left: 0;
    border-top: 1px solid var(--tblr-border-color, #dadfe5);
  }

  .painel-visao-geral .indicador-valor {
    font-size: 1.125rem;
  }

  .grafico-rosca-total {
    font-size: 1.375rem;
  }
}