/* =========================================================
   Extrato financeiro analitico (pages/financeiroExtrato.js, 2026-10-27).
   So tokens do design system: nenhuma cor literal, raio e sombra em token.
   ========================================================= */

/* ---------- Faixa de filtros ---------- */
.ext-filtros-cf { padding: var(--space-5); }
.ext-filtros-cf__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4) var(--space-5);
}
.ext-filtros-cf__periodo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); }
.ext-filtros-cf__grupo { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
/* Segunda linha: fontes a esquerda, exportar a direita. */
.ext-filtros-cf__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-color);
}
.ext-filtros-cf__fontes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); flex: 1 1 420px; min-width: 0; }
.ext-filtros-cf__acoes { display: flex; gap: var(--space-2); margin-left: auto; }
/* O botao que recolhe fluxo e fontes so existe no celular. */
.ext-filtros-cf__mais { display: none; }
.ext-chips-cf { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
/* O check e a marca do ligado (nao so a cor). */
.ext-fonte-cf__check { display: none; font-size: 0.75em; }
.ext-fonte-cf.active .ext-fonte-cf__check { display: inline-block; }
/* Ligado em tom SUAVE (com o check): oito chips ligados em verde cheio viravam
   uma barra pesada que disputava com os numeros. Mesmo par fundo/texto da aba
   ligada do controle segmentado no escuro (.tabs-cf__tab.active). */
.ext-fonte-cf.active {
  background: var(--color-primary-soft);
  border-color: transparent;
  color: var(--color-primary);
}

/* Cinco indicadores numa fileira so no desktop (a tira padrao fecha 4 + 1). */
@media (min-width: 576px) {
  .ext-kpis-cf { grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); }
}
/* Com cinco por fileira o rotulo nao cabe numa linha ("Resultado liqui..."): quebra em ate duas, equilibradas. */
.ext-kpis-cf .metric-cf__label { white-space: normal; text-wrap: balance; }

/* ---------- Abas por fonte (rotulo + total) ---------- */
.ext-abas-cf { overflow: hidden; }
.ext-abas-cf__topo { padding: var(--space-4) var(--space-4) 0; }
.ext-tabs-cf { max-width: 100%; }
.ext-tab-cf {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.2;
  padding-block: 0.45rem;
}
.ext-tab-cf__valor {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.ext-tab-cf.active .ext-tab-cf__valor { color: inherit; }
.ext-tab-cf--alerta .ext-tab-cf__valor { color: var(--color-danger-ink); }
.ext-painel-cf { padding: var(--space-4); }

/* ---------- Lista de uma fonte ---------- */
.ext-lista-cf__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.ext-lista-cf__busca { min-width: min(100%, 260px); }
.ext-bloco-cf + .ext-bloco-cf { margin-top: var(--space-6); }
.ext-bloco-cf__titulo {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}

/* Cabecalho que ordena: botao de verdade (teclado e leitor de tela), com a
   aparencia do cabecalho. O anel de foco e o global do design system. */
.ext-ordena-cf {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  border-radius: var(--radius-xs);
}
.ext-ordena-cf i { opacity: 0.45; font-size: 0.8em; }
th[aria-sort='ascending'] .ext-ordena-cf i,
th[aria-sort='descending'] .ext-ordena-cf i { opacity: 1; color: var(--color-primary); }
th.col-cf--dinheiro .ext-ordena-cf,
th.col-cf--num .ext-ordena-cf { justify-content: flex-end; width: 100%; }

/* Linha de subtotal / total: fundo abafado e fio da primaria em cima. */
table.table-cf tfoot .ext-total-cf td,
table.table-cf .ext-total-cf td {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  background: var(--bg-muted);
  border-top: 2px solid var(--color-primary);
}
table.table-cf tfoot .ext-total-cf td.col-cf--dinheiro { text-align: right; font-variant-numeric: tabular-nums; }

/* Valor no cartao do celular: o numero que interessa, em destaque. */
.ext-cartao-valor-cf {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.ext-total-movel-cf__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--bg-muted);
  border-top: 2px solid var(--color-primary);
  font-weight: var(--fw-semibold);
}

/* ---------- Celular ---------- */
@media (max-width: 640px) {
  .ext-filtros-cf { padding: var(--space-4); }
  .ext-filtros-cf__periodo { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  /* min-width 0: sem isso o input de data impoe a largura intrinseca e o "Ate" estoura o cartao. */
  .ext-filtros-cf__periodo > * { min-width: 0; }
  .ext-filtros-cf__periodo .form-control { width: 100%; min-width: 0; }
  .ext-filtros-cf__grupo { width: 100%; }
  .ext-filtros-cf__mais { display: inline-flex; width: 100%; justify-content: center; min-height: 44px; }
  .ext-filtros-cf.is-recolhido .ext-filtros-cf__extra { display: none; }
  .ext-filtros-cf.is-recolhido .ext-filtros-cf__rodape { margin-top: var(--space-3); padding-top: 0; border-top: 0; }
  .ext-filtros-cf__acoes { width: 100%; margin-left: 0; }
  .ext-filtros-cf__acoes .btn-cf { flex: 1 1 0; justify-content: center; min-height: 44px; }
  .ext-chips-cf .chip-cf { min-height: 44px; }
  .ext-abas-cf__topo { padding: var(--space-3) var(--space-3) 0; }
  .ext-painel-cf { padding: var(--space-3); }
  .ext-lista-cf__busca { width: 100%; }
}
@media (max-width: 575.98px) {
  /* Duas colunas no celular: o quinto indicador fica com a linha inteira, sem buraco ao lado. */
  .ext-kpis-cf > .metric-cf:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- Lanchonete consolidada (PDV Fase 5, D11) ----------
   Um cartao entre os indicadores e as abas: tres numeros e o recebido por forma.
   Nada de custo aqui (a margem mora no relatorio gerencial). */
.ext-lanch-cf { padding: var(--space-5); }
.ext-lanch-cf__cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.ext-lanch-cf__titulo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.ext-lanch-cf__icone {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 0.9rem;
}
:root[data-theme='dark'] .ext-lanch-cf__icone { color: var(--pitch-300); }
.ext-lanch-cf__atalho { flex: none; }
.ext-lanch-cf__corpo {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-5) var(--space-6);
  align-items: start;
}
.ext-lanch-cf__nums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--space-4);
  margin: 0;
}
.ext-lanch-cf__num { min-width: 0; }
.ext-lanch-cf__num dt {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  color: var(--text-secondary);
  text-wrap: balance;
}
.ext-lanch-cf__num dd {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  margin: 0;
  min-width: 0;
}
.ext-lanch-cf__num .num-display {
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
  color: var(--text-primary);
}
/* O destaque ocupa a fileira inteira: o numero grande nunca disputa largura com os outros. */
.ext-lanch-cf__num--destaque { grid-column: 1 / -1; }
.ext-lanch-cf__num--destaque .num-display { font-size: var(--text-2xl); }
.ext-lanch-cf__sub { font-size: var(--text-xs); color: var(--text-secondary); }
.ext-lanch-cf__sec {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}
.ext-lanch-cf__valor { min-width: 5.5rem; }
.ext-lanch-cf__nota {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-color);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
@media (max-width: 1100px) {
  .ext-lanch-cf__corpo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ext-lanch-cf { padding: var(--space-4); }
  .ext-lanch-cf__nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ext-lanch-cf__atalho { width: 100%; justify-content: center; min-height: 44px; }
}