/* =========================================================
   RELATÓRIOS (Produtos, Clientes, Entradas, Vendas)
   Módulo desktop-first, mesma base de .shell-main--wide (app.css) e .table
   (components.css) já usada pela Conferência Scanntech. Aqui só o que é
   específico destes quatro relatórios: abas de tipo, grade de filtros,
   rodapé de paginação local e os badges de situação próprios deste módulo
   (o componente .situacao de components.css é específico da Conferência
   Scanntech — ver comentário lá).
   ========================================================= */

/* ---------------------------------------------------------
   ABAS DE TIPO (Produtos: normal/atacado/fabricante/secao;
   Entradas: notas/produtos/fornecedor/icms/duplicatas/marcacao-preco).
   Navegação real (cada aba é um link para ?tipo=...), não troca de estado
   em JS — evita duplicar lógica de exibição de colunas/filtros por tipo em
   uma página só.
   --------------------------------------------------------- */

.filtro-tabs {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.filtro-tab {
    padding: 9px 14px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);

    background: var(--color-surface);

    color: var(--color-text-secondary);

    font-size: 0.82rem;
    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.filtro-tab:hover {
    background: var(--color-surface-hover);
}

.filtro-tab.active {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ---------------------------------------------------------
   GRADE DE FILTROS — quantos campos couberem por linha,
   responsiva (mesmo .form-group/.input-control de components.css).
   --------------------------------------------------------- */

.filtros-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

    gap: 14px;

    margin-bottom: 16px;
}

.filtros-grid .form-group--faixa {
    grid-column: span 1;
}

.checkbox-label {
    display: flex;
    align-items: center;

    gap: 8px;

    min-height: 46px;

    margin-bottom: 0;

    font-size: 0.88rem;
    font-weight: 600;

    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 17px;
    height: 17px;

    accent-color: var(--color-primary);

    cursor: pointer;
}

.filtros-acoes {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}

/* ---------------------------------------------------------
   RODAPÉ DA GRID — contagem de registros + paginação local.
   --------------------------------------------------------- */

.grid-rodape {
    display: flex;
    flex-wrap: wrap;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-top: 14px;
}

.grid-info {
    color: var(--color-text-secondary);

    font-size: 0.82rem;
}

.grid-paginacao {
    display: flex;

    gap: 8px;
}

.btn-sm {
    min-height: 36px;

    padding: 7px 14px;

    font-size: 0.82rem;
}

/* Colunas monetárias/numéricas alinhadas à direita — aplicada pelo helper
   de grid genérico (ver static/js/relatorios-common.js). */
.table .col-direita {
    text-align: right;
}

/* ---------------------------------------------------------
   BADGES DE SITUAÇÃO PRÓPRIOS DESTE MÓDULO — mesmo padrão visual
   (bolinha + texto) de .situacao em components.css, mas com nome próprio
   (ver comentário em components.css: "novos módulos... com suas próprias
   classes").
   --------------------------------------------------------- */

.status-badge {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding: 4px 10px;

    border-radius: var(--radius-full);

    font-size: 0.78rem;
    font-weight: 600;

    white-space: nowrap;
}

.status-badge::before {
    content: "";

    width: 7px;
    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background: currentColor;
}

.status-badge--ok {
    background: var(--color-success-light);
    color: var(--color-success-hover);
}

.status-badge--neutro {
    background: var(--color-background);
    color: var(--color-text-secondary);
}

.status-badge--alerta {
    background: var(--color-warning-light);
    color: var(--color-warning-text);
}

.status-badge--erro {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

/* ---------------------------------------------------------
   CHAVE DE ACESSO (NFC-e) — abreviada na grid, com botão de copiar; nunca
   ocupa a largura inteira da coluna (ver relatorio-vendas.js).
   --------------------------------------------------------- */

.chave-acesso {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    font-variant-numeric: tabular-nums;
}

.chave-acesso-btn {
    width: 28px;
    height: 28px;

    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);

    background: var(--color-surface);

    color: var(--color-text-secondary);

    cursor: pointer;
}

.chave-acesso-btn:hover {
    background: var(--color-surface-hover);
    color: var(--color-primary);
}

.chave-acesso-btn svg {
    width: 14px;
    height: 14px;
}

/* ---------------------------------------------------------
   AÇÃO "DETALHAR" (Clientes) — mesmo botão secundário compacto usado nas
   linhas da grid.
   --------------------------------------------------------- */

.tabela-acao-btn {
    min-height: 32px;

    padding: 6px 12px;

    font-size: 0.78rem;
}

/* Lista rótulo/valor do modal "Detalhar" (Clientes) — mesmo padrão visual
   de .confirmacao-resumo em modules/scanntech.css, com nome próprio deste
   módulo (só carregado nas páginas de relatórios). */
.detalhe-lista {
    margin: 0;
}

.detalhe-lista>div {
    display: flex;
    justify-content: space-between;

    gap: 16px;

    padding: 7px 0;

    border-bottom: 1px solid var(--color-border);
}

.detalhe-lista>div:last-child {
    border-bottom: none;
}

.detalhe-lista dt {
    color: var(--color-text-secondary);
}

.detalhe-lista dd {
    margin: 0;

    font-weight: 600;
    text-align: right;
}

/* ---------------------------------------------------------
   PAINEL "SEM COLUNA DE COMPARAÇÃO" (Marcação de Preço) — aviso discreto
   quando um campo pedido não existe no contrato atual da API (ver
   relatorio-entradas.js e o relatório final desta tarefa).
   --------------------------------------------------------- */

.aviso-campo-indisponivel {
    margin-bottom: 16px;
}

/* =========================================================
   RELATÓRIOS FINANCEIROS (Extrato de Conta Corrente, DRE)
   Mesmo módulo/arquivo dos quatro relatórios acima — aqui só o que é
   específico dos dois relatórios financeiros: KPIs compactos, valor
   negativo, badge de conciliação, colunas opcionais responsivas e a
   estrutura hierárquica + barra comparativa simples do DRE.
   ========================================================= */

/* ---------------------------------------------------------
   KPIs — mesmo padrão visual de .kpi-card em modules/dashboard.css
   (não carregado nestas páginas; ver relatorio-conta-corrente.js/
   relatorio-dre.js), com nome próprio deste módulo. minmax 200px: "R$
   1.000.000,00" cabe numa linha só sem cortar (ver .kpi-fin-valor).
   --------------------------------------------------------- */

.kpi-fin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 14px;

    /* Respiro em relação ao card de filtros acima (nenhum .card do projeto
       tem margem própria — ver components.css) e ao card de resultado
       abaixo. */
    margin-top: 20px;
    margin-bottom: 20px;
}

.kpi-fin-card {
    padding: 14px 16px;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}

.kpi-fin-label {
    display: block;

    margin-bottom: 8px;

    color: var(--color-text-secondary);

    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.kpi-fin-valor {
    color: var(--color-text);

    font-size: 1.22rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Indicação discreta de crédito/débito — nunca a única forma de
   identificação (o rótulo do card já diz "Créditos"/"Débitos"), só um
   reforço visual leve (ver pedido: não pintar a tela de verde/vermelho). O
   card de Débitos usa vermelho (pedido explícito) sem sinal negativo — o
   próprio rótulo "Débitos" já deixa claro o que é. */
.kpi-fin-valor--credito {
    color: var(--color-success-hover);
}

.kpi-fin-valor--debito {
    color: var(--color-danger);
}

/* Saldo negativo pede atenção — débito em si nunca usa esta classe (ver
   kpi-fin-valor--debito acima e o pedido: "DÉBITO não significa erro"). */
.kpi-fin-valor--negativo {
    color: var(--color-danger);
}

.kpi-fin-card--destaque {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary-light);
}

.kpi-fin-card--destaque .kpi-fin-valor {
    font-size: 1.4rem;
}

/* ---------------------------------------------------------
   BADGE DE CONCILIAÇÃO — discreto, nunca vermelho/verde saturado (ver
   pedido: "não exagerar na cor").
   --------------------------------------------------------- */

.badge-conciliado {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    color: var(--color-success-hover);

    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-conciliado svg {
    width: 13px;
    height: 13px;
}

.badge-pendente {
    color: var(--color-text-muted);

    font-size: 0.72rem;
    white-space: nowrap;
}

/* ---------------------------------------------------------
   HISTÓRICO truncado com acesso ao texto completo via title (ver
   relatorio-conta-corrente.js) — nunca quebra a largura da grid.
   --------------------------------------------------------- */

.col-truncar {
    max-width: 260px;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Valor monetário nunca trunca (ver pedido) — sobrepõe qualquer
   white-space:nowrap conflitante vindo de .table th/td. */
.table .valor-monetario {
    white-space: nowrap;
}

.valor-negativo {
    color: var(--color-danger);
}

/* Coluna única "Movimentação" do Extrato (crédito/débito juntos — ver
   relatorio-conta-corrente.js): só a cor do valor muda, nunca o fundo da
   linha inteira. Mesmos tokens já usados nos KPIs (.kpi-fin-valor--credito/
   --debito), para as duas telas usarem exatamente a mesma leitura de
   cor. */
.valor-credito {
    color: var(--color-success-hover);
}

.valor-debito {
    color: var(--color-danger);
}

/* ---------------------------------------------------------
   DRE — estrutura hierárquica (Receitas/Despesas) com expandir/recolher
   por conta.
   --------------------------------------------------------- */

.dre-secao {
    margin-bottom: 22px;
}

.dre-secao-titulo {
    margin-bottom: 8px;

    color: var(--color-text-secondary);

    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dre-conta-lista {
    display: flex;
    flex-direction: column;
}

.dre-conta-linha {
    border-bottom: 1px solid var(--color-border);
}

.dre-conta-linha:last-child {
    border-bottom: none;
}

.dre-conta-cabecalho {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px 4px;

    border: none;

    background: none;

    color: var(--color-text);

    font-size: 0.9rem;
    text-align: left;

    cursor: pointer;
}

.dre-conta-cabecalho:hover {
    background: var(--color-surface-hover);
}

.dre-conta-arrow {
    width: 15px;
    height: 15px;

    flex-shrink: 0;

    color: var(--color-text-muted);

    transition: transform 0.15s ease;
}

.dre-conta-cabecalho[aria-expanded="true"] .dre-conta-arrow {
    transform: rotate(90deg);
}

.dre-conta-codigo {
    flex-shrink: 0;

    width: 56px;

    color: var(--color-text-muted);

    font-variant-numeric: tabular-nums;
}

.dre-conta-nome {
    flex: 1;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.dre-conta-nome-sintetica {
    font-weight: 700;
}

.dre-conta-valor {
    flex-shrink: 0;

    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dre-conta-detalhe {
    padding: 0 4px 12px 29px;
}

.dre-conta-total {
    display: flex;

    justify-content: space-between;

    gap: 10px;

    padding: 10px 4px;

    border-top: 2px solid var(--color-border-strong);

    font-weight: 700;
}

.dre-resultado {
    display: flex;
    flex-wrap: wrap;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 14px 16px;

    margin-top: 6px;

    background: var(--color-primary-light);
    border-radius: var(--radius-md);

    font-size: 1rem;
    font-weight: 700;
}

.dre-resultado-valor {
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

.dre-resultado--negativo {
    background: var(--color-danger-light);
}

.dre-resultado--negativo .dre-resultado-valor {
    color: var(--color-danger);
}

/* ---------------------------------------------------------
   BARRA COMPARATIVA (Receitas x Despesas) — mesmo padrão de barra
   proporcional de .op-bar-track/.op-bar-fill em modules/dashboard.css (não
   carregado nesta página), nome próprio deste módulo. Único gráfico da
   DRE, secundário à estrutura textual acima.
   --------------------------------------------------------- */

.dre-bar-chart {
    display: flex;
    flex-direction: column;

    gap: 14px;
}

.dre-bar-row-header {
    display: flex;

    align-items: baseline;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 5px;

    font-size: 0.85rem;
}

.dre-bar-name {
    color: var(--color-text-secondary);

    font-weight: 600;
}

.dre-bar-value {
    color: var(--color-text);

    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dre-bar-track {
    height: 12px;

    background: var(--color-background);
    border-radius: var(--radius-full);

    overflow: hidden;
}

.dre-bar-fill {
    height: 100%;

    background: var(--color-success);

    border-radius: var(--radius-full);

    transition: width 0.3s ease;
}

.dre-bar-fill--despesa {
    background: var(--color-primary);
}

/* ---------------------------------------------------------
   Select "Conta" do DRE — contas sintéticas diferenciadas visualmente na
   lista (ver relatorio-dre.js / GET /v1/icomercio/centros-custo).
   --------------------------------------------------------- */

.select-conta-sintetica {
    font-weight: 700;
}

@media (max-width: 900px) {

    /* Tablet: Documento/Origem do extrato saem primeiro — Data, Histórico,
       Crédito/Débito e Saldo continuam sempre visíveis. */
    .col-opcional-tablet {
        display: none;
    }
}

@media (max-width: 640px) {
    .filtros-grid {
        grid-template-columns: 1fr;
    }

    .filtros-acoes .btn {
        width: 100%;
    }

    .grid-rodape {
        flex-direction: column;
        align-items: stretch;
    }

    .kpi-fin-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .col-opcional-mobile {
        display: none;
    }

    .dre-conta-codigo {
        width: 40px;
    }
}