/*
 * Ajustes finos de espacamento do painel (identidade Franqueo). CSS puro
 * registrado via FilamentAsset::register() em AppServiceProvider — sem
 * build (Node/npm nao estava disponivel quando isso foi escrito), por
 * isso nao usa @apply/diretivas do Tailwind, so propriedades CSS comuns.
 * Escopo limitado a classes de componente do Filament (nunca utilitarios
 * genericos tipo .p-6, que sao reusados em lugares nao relacionados).
 */

/*
 * Bricolage Grotesque (tela de login, ver seção mais abaixo) — @import
 * só é válido no topo do arquivo, antes de qualquer outra regra, senão o
 * navegador ignora silenciosamente. Mesmo provedor que o Filament já usa
 * pra Instrument Sans (BunnyFontProvider), evita introduzir outro host
 * de fonte só pra isto.
 */
@import url('https://fonts.bunny.net/css?family=bricolage-grotesque:500,700,800');

body .fi-section-header {
    padding-inline: 1.5rem;
    padding-block: 1.25rem;
}

body .fi-ta-text {
    padding-inline: 1rem;
    padding-block: 1.125rem;
}

/*
 * Painel de cobranca (App\Filament\Pages\PainelCobranca): pagina "simples"
 * (blade proprio + computed properties, sem Filament\Tables\Table), cujo
 * blade original usava classes Tailwind arbitrarias (grid-cols-6,
 * ring-warning-500/30, dark:border-white/10...) que NAO existem no CSS
 * pre-compilado do Filament (vendor/filament/filament/dist/theme.css so
 * contem as classes que os proprios componentes do pacote usam) —
 * resultado: pagina sem nenhum estilo aplicado. As classes abaixo cobrem
 * só o que esta pagina precisa e nao existe pronto; usam var(--gray-N)
 * do Filament pro modo claro (essas variaveis sao injetadas inline no
 * <style> de cada request, geradas a partir da cor configurada — nao tem
 * versao dark separada, por isso o modo escuro abaixo usa tons fixos).
 */
.painel-cobranca-resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.painel-cobranca-aging-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.painel-cobranca-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.painel-cobranca-tabela th {
    padding: 0.625rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gray-500);
    border-bottom: 1px solid var(--gray-100);
}

.painel-cobranca-tabela td {
    padding: 0.875rem 1.5rem;
    color: var(--gray-950);
    border-bottom: 1px solid var(--gray-50);
}

.painel-cobranca-tabela tbody tr:last-child td {
    border-bottom: none;
}

.painel-cobranca-tabela tbody tr:hover td {
    background-color: var(--gray-50);
}

.painel-cobranca-tabela .painel-cobranca-valor {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dark .painel-cobranca-tabela th {
    color: rgb(255 255 255 / 60%);
    border-bottom-color: rgb(255 255 255 / 10%);
}

.dark .painel-cobranca-tabela td {
    color: #fff;
    border-bottom-color: rgb(255 255 255 / 6%);
}

.dark .painel-cobranca-tabela tbody tr:hover td {
    background-color: rgb(255 255 255 / 4%);
}

/*
 * Severidade dos cards de resumo/aging via borda lateral colorida — mais
 * simples e previsível do que tentar reconstruir o sistema dinamico de
 * cor por componente do Filament (FilamentColor::getColor(), usado
 * internamente por Badge/Section) fora de um componente de verdade.
 * --warning-500/--danger-500 são as mesmas variaveis que .fi-color-warning/
 * .fi-color-danger referenciam, então a cor acompanha a paleta do painel.
 */
.painel-cobranca-stat {
    border-left: 4px solid var(--gray-200);
}

.painel-cobranca-stat[data-severidade='warning'] {
    border-left-color: var(--warning-500);
}

.painel-cobranca-stat[data-severidade='danger'] {
    border-left-color: var(--danger-500);
}

/*
 * :not([data-severidade]) de propósito — sem isso, esta regra (mesma
 * especificidade de `.painel-cobranca-stat[data-severidade='danger']`,
 * porém declarada depois no arquivo) vencia o cascade e apagava a borda
 * colorida no modo escuro (bug real, pego só depois de zoom na borda
 * via Playwright — no screenshot normal a diferença é sutil demais pra
 * notar a olho nu).
 */
.dark .painel-cobranca-stat:not([data-severidade]) {
    border-left-color: rgb(255 255 255 / 10%);
}

/*
 * Taxa de recuperação por etapa/canal (item 8 da fila "usabilidade pra
 * gestor") — duas tabelas lado a lado em telas largas, mesma classe
 * fantasma que o resto da página já evitava: nada de `grid grid-cols-2`
 * direto no blade.
 */
.painel-cobranca-recuperacao-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .painel-cobranca-recuperacao-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.painel-cobranca-recuperacao-titulo {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
}

.dark .painel-cobranca-recuperacao-titulo {
    color: rgb(255 255 255 / 70%);
}

/*
 * Tela de login (App\Filament\Pages\Auth\Login): layout split-screen na
 * identidade Franqueo (docs/BRANDING.md) — painel decorativo em Tinta
 * (#14231F, a cor do rodapé do site-franqueo, mais escura que o Verde
 * institucional #1F4D3F) à esquerda, card de formulário à direita.
 * Selo + wordmark portados do componente Logo.astro do site-franqueo
 * (src/components/Logo.astro) — mesmo SVG (path do "F", não uma letra
 * em fonte), só maior. Cores aplicadas só aqui dentro (Laranja Ação só
 * no CTA desta tela, não no `primary` global do painel — ver CLAUDE.md,
 * decisão de escopo). Sempre a paleta clara, mesmo com o dark mode do
 * Filament ligado: o branding book não define uma versão escura ainda.
 */

/*
 * .fi-simple-main/.fi-simple-main-ctn/.fi-simple-layout têm padding,
 * max-width, fundo branco e sombra fixos (o card centralizado padrão do
 * Filament) — sem neutralizar isso, não tem como o painel colorido
 * bater de ponta a ponta na tela. Escopado com :has(.fi-login-franqueo)
 * de propósito: /admin/profile (onde fica a configuração de 2FA)
 * também usa o mesmo SimplePage/.fi-simple-layout — sem esse escopo, a
 * página de perfil quebraria também.
 */
.fi-simple-layout:has(.fi-login-franqueo) {
    min-height: 100vh;
    padding: 0;
}

.fi-simple-main-ctn:has(.fi-login-franqueo) {
    width: 100%;
    padding: 0;
}

.fi-simple-main:has(.fi-login-franqueo) {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.fi-login-franqueo {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
}

.fi-login-franqueo-panel {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    width: 44%;
    padding: 4rem;
    background-color: #14231F;
    color: #fff;
    background-image: radial-gradient(rgb(255 255 255 / 10%) 2px, transparent 2px);
    background-size: 28px 28px;
}

.fi-login-franqueo-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/*
 * Selo em SVG de verdade (traço do "F" do componente Logo.astro do
 * site-franqueo, não uma letra em fonte) — width/height controlam o
 * tamanho porque o viewBox (36x36) escala tudo proporcionalmente,
 * inclusive o raio do cantos arredondados. "logo maior" foi pedido
 * explicitamente: bem acima dos 36px que o site usa no próprio header,
 * porque aqui o selo é o elemento principal do painel, não um item de
 * navegação.
 */
.fi-login-franqueo-badge {
    width: 4.5rem;
    height: 4.5rem;
    flex-shrink: 0;
}

.fi-login-franqueo-wordmark {
    font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
    font-weight: 800;
    font-size: 2.25rem;
    letter-spacing: -0.03em;
    text-transform: lowercase;
    color: #fff;
}

.fi-login-franqueo-wordmark--dark {
    color: #14231F;
}

.fi-login-franqueo-tagline {
    max-width: 24ch;
    font-size: 1.125rem;
    color: rgb(255 255 255 / 85%);
}

.fi-login-franqueo-signature {
    font-size: 0.875rem;
    font-style: italic;
    color: rgb(255 255 255 / 60%);
}

.fi-login-franqueo-form-ctn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 2rem;
    background-color: #F5F2EA;
}

.fi-login-franqueo-card {
    width: 100%;
    max-width: 26rem;
    padding: 2.5rem;
    background-color: #fff;
    border: 1px solid #E2DDD0;
    border-radius: 1rem;
    box-shadow: 0 12px 32px rgb(20 35 31 / 8%);
}

/* Onboarding self-service (RegisterGrupo) tem 5 campos — card de login
   fica apertado demais pra isso. */
.fi-login-franqueo-card--wide {
    max-width: 34rem;
}

.fi-login-franqueo-brand--mobile {
    display: flex;
    margin-bottom: 1.5rem;
}

/* Selo/wordmark menores aqui — é um cabeçalho compacto dentro do card
   (26rem de largura), não o elemento hero do painel esquerdo. */
.fi-login-franqueo-brand--mobile .fi-login-franqueo-badge {
    width: 2.75rem;
    height: 2.75rem;
}

.fi-login-franqueo-brand--mobile .fi-login-franqueo-wordmark {
    font-size: 1.5rem;
}

.fi-login-franqueo-heading {
    font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    letter-spacing: -0.02em;
    color: #14231F;
    margin-bottom: 0.375rem;
}

.fi-login-franqueo-subheading {
    font-size: 0.9375rem;
    color: #3F4B47;
    margin-bottom: 1.5rem;
}

/*
 * Bug real, achado pelo usuário testando com o navegador em dark mode:
 * o Filament aplica <html class="fi dark"> sozinho (lê prefers-color-scheme
 * do sistema), e os rótulos/texto digitado do formulário (.fi-fo-field-label,
 * .fi-input) viram branco nesse modo — invisível em cima do card que a
 * tela de login/registro/criar grupo sempre força branco, de propósito
 * ("sempre a paleta clara", ver CLAUDE.md). O Filament usa suas próprias
 * variáveis de cor (injetadas inline por request) pra decidir a cor do
 * texto do form, sem saber que este card nunca muda de claro — então
 * precisa ser sobrescrito aqui explicitamente, não só o fundo/heading.
 * .fi-one-time-code-input-digit (os 6 quadrados do desafio de 2FA, mesma
 * tela de login) tem o mesmo problema — achado só depois de inspecionar o
 * computedStyle via Playwright, porque no screenshot os quadrados ficam só
 * "em branco" (nenhum texto visível) em vez de uma cor óbvia errada.
 */
.fi-login-franqueo-card .fi-fo-field-label,
.fi-login-franqueo-card .fi-fo-field-label-content,
.fi-login-franqueo-card .fi-input,
.fi-login-franqueo-card .fi-select-input,
.fi-login-franqueo-card .fi-one-time-code-input-digit {
    color: #14231F;
}

/*
 * color: #14231F sozinho não bastava pro <select> nativo (ex.: "Segmento"
 * na tela de criar grupo) — o popup de opções aberto é desenhado pelo
 * próprio navegador no color-scheme do sistema, independente do CSS da
 * página: com o SO em dark mode, o popup nativo sai com fundo escuro e
 * nosso texto escuro por cima vira ilegível ("combo preto, sem dar pra
 * ler as opções", reportado pelo usuário em produção). color-scheme:
 * light força o navegador a desenhar esse popup nativo em claro, igual
 * o resto do card já é "sempre claro, de propósito".
 */
.fi-login-franqueo-card .fi-select-input {
    color-scheme: light;
}

/*
 * color: #fff explícito — sem isso, o texto do botão fica na cor de
 * texto calculada pro `primary` global (verde), porque só a classe
 * utilitária de fundo (fi-bg-color-*) é trocada aqui, não a de texto
 * (fi-text-color-*). Resultado sem o override: texto verde-escuro sobre
 * fundo laranja, ilegível e contra a própria regra do branding book
 * ("Laranja: sempre com texto branco").
 */
.fi-login-franqueo-card .fi-btn.fi-color-primary {
    background-color: #C2511F;
    border-color: #C2511F;
    color: #fff;
}

.fi-login-franqueo-card .fi-btn.fi-color-primary:hover {
    background-color: #A8431A;
    border-color: #A8431A;
}

@media (min-width: 1024px) {
    .fi-login-franqueo {
        flex-direction: row;
    }

    .fi-login-franqueo-panel {
        display: flex;
    }

    .fi-login-franqueo-brand--mobile {
        display: none;
    }
}

/*
 * Painel de métricas do SaaS (App\Filament\Pages\PainelSaas) — mesma
 * grade de cards que o Painel de Cobrança já usa (.painel-cobranca-resumo),
 * só com nome próprio porque é outra página. Os cards em si
 * (.fi-wi-stats-overview-stat) já têm estilo completo no CSS
 * pré-compilado do Filament, sem precisar de CSS próprio — só a grade
 * que falta.
 */
.painel-saas-resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

/*
 * Páginas simples de relatório/operação (blade próprio + computed
 * properties, sem Filament\Tables\Table — mesmo padrão do Painel de
 * Cobrança): Dre, Dfc, FluxoDeCaixa, OrcamentoRealizado,
 * AgingContasPagar, ExtratoPessoa, ConciliacaoBancaria, IntegracaoOmie,
 * PagamentosEmLote, ExportacaoContabil. Cada `<x-filament-panels::page
 * class="app-relatorio-simples">` escopa este bloco inteiro — nunca
 * vaza pra Resource/Form/Widget nenhum.
 *
 * A causa raiz (achada investigando um print do usuário, 2026-10-12):
 * essas 10 páginas usam uma sopa de classes no "estilo Tailwind"
 * (flex, gap-4, rounded-lg, shadow-sm, ring-1, bg-white, divide-y,
 * px-4, tabular-nums, text-success-600...) que **não existe** no CSS
 * pré-compilado do Filament (`public/css/filament/filament/app.css`) —
 * confirmado inspecionando o arquivo classe a classe: só sobrevivem
 * classes de **componente** do Filament (as com prefixo `fi-`), nenhum
 * utilitário Tailwind genérico (Filament v5 compila só o que os
 * próprios componentes do pacote usam, não publica uma folha de
 * utilitários solta). `.fi-section` sozinho já dá conta do card
 * externo certinho (claro e escuro — confirmado no CSS, não precisou
 * de ajuste); o que quebra de verdade é o miolo: cabeçalho, campos
 * `<select>`/`<input>` nativos, tabela simples e os badges/pontos de
 * status. As regras abaixo definem, em CSS puro, exatamente o mesmo
 * vocabulário de classes que essas 10 páginas já escrevem — sem
 * reescrever o HTML de cada uma, só o necessário pra cada nome virar
 * uma classe real.
 */
.app-relatorio-simples .flex { display: flex; }
.app-relatorio-simples .inline-flex { display: inline-flex; }
.app-relatorio-simples .inline-block { display: inline-block; }
.app-relatorio-simples .block { display: block; }
.app-relatorio-simples .grid { display: grid; }
.app-relatorio-simples .flex-wrap { flex-wrap: wrap; }

/*
 * Achado testando com Playwright de verdade (não só olhando o código):
 * um `<label class="flex items-center gap-2">Até o mês <select>...`
 * (OrcamentoRealizado/PagamentosEmLote) é, ao mesmo tempo, um item flex
 * do filtro inteiro (`.fi-section.flex.flex-wrap...`) — sem isso, o
 * item encolhe (comportamento padrão de flex-shrink) até o texto
 * "Até o mês" quebrar linha sozinho dentro do próprio label, ficando
 * empilhado em vez de ao lado do <select>.
 */
.app-relatorio-simples label.flex {
    flex-shrink: 0;
    white-space: nowrap;
}
.app-relatorio-simples .flex-col { flex-direction: column; }
.app-relatorio-simples .items-center { align-items: center; }
.app-relatorio-simples .items-end { align-items: flex-end; }
.app-relatorio-simples .justify-between { justify-content: space-between; }
.app-relatorio-simples .justify-end { justify-content: flex-end; }
.app-relatorio-simples .justify-center { justify-content: center; }
.app-relatorio-simples .gap-1 { gap: 0.25rem; }
.app-relatorio-simples .gap-1\.5 { gap: 0.375rem; }
.app-relatorio-simples .gap-2 { gap: 0.5rem; }
.app-relatorio-simples .gap-4 { gap: 1rem; }
.app-relatorio-simples .shrink-0 { flex-shrink: 0; }
.app-relatorio-simples .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.app-relatorio-simples .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-relatorio-simples .w-full { width: 100%; }
.app-relatorio-simples .mx-auto { margin-left: auto; margin-right: auto; }
.app-relatorio-simples .max-w-md { max-width: 28rem; }
.app-relatorio-simples .max-w-0 { max-width: 0; }

/*
 * Achado no mesmo teste com Playwright: a tabela "Parcelas em aberto"
 * (ConciliacaoBancaria) é a única com uma coluna de texto livre longo
 * (pessoa + descrição do título) dentro de um grid de 2 colunas — sem
 * truncar, o nome mais longo empurra a tabela pra fora da coluna até a
 * coluna "Em aberto"/botão "Conciliar" sumir pra fora da área visível.
 * `max-width: 0` é o truque padrão pra truncar célula de `<table>` sem
 * `table-layout: fixed` (que reorganizaria as outras colunas também).
 */
.app-relatorio-simples .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-relatorio-simples .h-2\.5 { height: 0.625rem; }
.app-relatorio-simples .w-2\.5 { width: 0.625rem; }
.app-relatorio-simples .overflow-x-auto { overflow-x: auto; }

@media (min-width: 640px) {
    .app-relatorio-simples .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-relatorio-simples .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .app-relatorio-simples .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-relatorio-simples .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .app-relatorio-simples .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.app-relatorio-simples .rounded { border-radius: 0.25rem; }
.app-relatorio-simples .rounded-lg { border-radius: 0.5rem; }
.app-relatorio-simples .rounded-xl { border-radius: 0.75rem; }
.app-relatorio-simples .rounded-full { border-radius: 9999px; }
.app-relatorio-simples .shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%); }
.app-relatorio-simples .border { border: 1px solid var(--gray-200); }
.app-relatorio-simples .border-none { border-style: none; }
.app-relatorio-simples .border-b { border-bottom: 1px solid var(--gray-200); }
.app-relatorio-simples .border-t { border-top: 1px solid var(--gray-200); }
.app-relatorio-simples .border-r { border-right: 1px solid var(--gray-200); }

/*
 * Coluna "Conta" fixa na visão multi-mês da DRE (pedido do usuário,
 * 2026-10-15): com muitos meses na janela ("Este ano" chega a 12
 * colunas), rolar a tabela horizontalmente fazia o nome da conta sumir
 * da tela — sem saber qual linha é qual, a rolagem fica inútil. `left:
 * 0` sozinho não bastaria (o conteúdo das outras colunas passaria por
 * baixo, transparente); precisa de um `background-color` opaco também
 * — aqui igual ao fundo do próprio card (`.fi-section`), já que a
 * tabela não tem zebra striping na visão multi-mês (diferente do
 * PDF/Excel, que têm).
 */
.app-relatorio-simples .sticky { position: sticky; }
.app-relatorio-simples .left-0 { left: 0; }
.app-relatorio-simples .z-10 { z-index: 10; }
.app-relatorio-simples .border-gray-50 { border-color: var(--gray-50); }
.app-relatorio-simples .border-gray-100 { border-color: var(--gray-100); }
.app-relatorio-simples .border-gray-200 { border-color: var(--gray-200); }
.app-relatorio-simples .border-gray-300 { border-color: var(--gray-300); }
.app-relatorio-simples .ring-1 { box-shadow: 0 0 0 1px var(--tw-ring-color, var(--gray-200)); }
.app-relatorio-simples .ring-gray-300 { --tw-ring-color: var(--gray-300); }
.app-relatorio-simples .ring-gray-950\/5 { --tw-ring-color: rgb(3 7 18 / 5%); }
.app-relatorio-simples .ring-gray-950\/10 { --tw-ring-color: rgb(3 7 18 / 10%); }
.app-relatorio-simples .ring-primary-600 { --tw-ring-color: var(--primary-600); }
.app-relatorio-simples .ring-success-600 { --tw-ring-color: var(--success-600); }
.app-relatorio-simples .hover\:ring-primary-500:hover { --tw-ring-color: var(--primary-500); }
.app-relatorio-simples .bg-white { background-color: #fff; }
.app-relatorio-simples .bg-primary-50 { background-color: var(--primary-50); }
.app-relatorio-simples .bg-primary-600 { background-color: var(--primary-600); }
/*
 * Semáforo (OrcamentoRealizado::labelSemaforo() + DRE, pedido do usuário
 * 2026-10-15, "orçado x realizado dentro da DRE") — mesmo bug de classe
 * fantasma de sempre: OrcamentoRealizado já usava `bg-success-500`/
 * `bg-warning-500`/`bg-danger-500`/`bg-gray-300` desde a Fase 3, nunca
 * tinha sido definida de verdade (achado só agora, reaproveitando o
 * mesmo padrão pra DRE).
 */
.app-relatorio-simples .bg-success-500 { background-color: var(--success-500); }
.app-relatorio-simples .bg-warning-500 { background-color: var(--warning-500); }
.app-relatorio-simples .bg-danger-500 { background-color: var(--danger-500); }
.app-relatorio-simples .bg-gray-300 { background-color: var(--gray-300); }
.app-relatorio-simples .bg-gray-50\/60 { background-color: rgb(249 250 251 / 60%); }
.app-relatorio-simples .divide-y > :not([hidden]) ~ :not([hidden]) { border-top: 1px solid var(--gray-100); }
.app-relatorio-simples .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--gray-100); }
.app-relatorio-simples .disabled\:opacity-40:disabled { opacity: 0.4; }

.app-relatorio-simples .px-2 { padding-inline: 0.5rem; }
.app-relatorio-simples .px-3 { padding-inline: 0.75rem; }
.app-relatorio-simples .px-4 { padding-inline: 1rem; }
.app-relatorio-simples .px-6 { padding-inline: 1.5rem; }
.app-relatorio-simples .py-1 { padding-block: 0.25rem; }
.app-relatorio-simples .py-1\.5 { padding-block: 0.375rem; }
.app-relatorio-simples .py-2 { padding-block: 0.5rem; }
.app-relatorio-simples .py-3 { padding-block: 0.75rem; }
.app-relatorio-simples .py-8 { padding-block: 2rem; }
.app-relatorio-simples .pb-2 { padding-bottom: 0.5rem; }
.app-relatorio-simples .p-4 { padding: 1rem; }
.app-relatorio-simples .p-8 { padding: 2rem; }
.app-relatorio-simples .mt-1 { margin-top: 0.25rem; }
.app-relatorio-simples .mt-2 { margin-top: 0.5rem; }
.app-relatorio-simples .mt-4 { margin-top: 1rem; }
.app-relatorio-simples .mt-6 { margin-top: 1.5rem; }
.app-relatorio-simples .mb-2 { margin-bottom: 0.5rem; }
.app-relatorio-simples .mb-4 { margin-bottom: 1rem; }
.app-relatorio-simples .mb-6 { margin-bottom: 1.5rem; }
.app-relatorio-simples .ml-1 { margin-left: 0.25rem; }

/*
 * `space-y-N` do Tailwind: margem só entre irmãos consecutivos, nunca
 * no primeiro filho — mesmo seletor `:not([hidden]) ~ :not([hidden])`
 * que `.divide-y` já usa aqui embaixo, só que em margin em vez de
 * border.
 */
.app-relatorio-simples .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
.app-relatorio-simples .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }

.app-relatorio-simples .text-left { text-align: left; }
.app-relatorio-simples .text-right { text-align: right; }
.app-relatorio-simples .text-center { text-align: center; }
.app-relatorio-simples .text-xs { font-size: 0.75rem; }
.app-relatorio-simples .text-sm { font-size: 0.875rem; }
.app-relatorio-simples .text-lg { font-size: 1.125rem; }
.app-relatorio-simples .font-normal { font-weight: 400; }
.app-relatorio-simples .font-medium { font-weight: 500; }
.app-relatorio-simples .font-semibold { font-weight: 600; }
.app-relatorio-simples .capitalize { text-transform: capitalize; }
.app-relatorio-simples .tabular-nums { font-variant-numeric: tabular-nums; }
.app-relatorio-simples .text-white { color: #fff; }
.app-relatorio-simples .text-gray-500 { color: var(--gray-500); }
.app-relatorio-simples .text-gray-600 { color: var(--gray-600); }
.app-relatorio-simples .text-gray-700 { color: var(--gray-700); }
.app-relatorio-simples .text-gray-950 { color: var(--gray-950); }
.app-relatorio-simples .text-success-600 { color: var(--success-600); }
.app-relatorio-simples .text-danger-600 { color: var(--danger-600); }
.app-relatorio-simples .text-warning-600 { color: var(--warning-600); }
.app-relatorio-simples .text-primary-600 { color: var(--primary-600); }

/*
 * `var(--gray-N)`/`var(--success-N)`/etc. não têm "versão escura"
 * própria (são a paleta absoluta, injetada inline por request — mesmo
 * fato já documentado acima pro Painel de Cobrança) — por isso as
 * variantes `dark:*` abaixo precisam do seletor `.dark` explícito,
 * igual o resto deste arquivo já faz.
 */
.dark .app-relatorio-simples .dark\:bg-gray-900 { background-color: var(--gray-900); }
.dark .app-relatorio-simples .dark\:bg-white\/5 { background-color: rgb(255 255 255 / 5%); }
.dark .app-relatorio-simples .dark\:bg-white\/\[0\.02\] { background-color: rgb(255 255 255 / 2%); }
.dark .app-relatorio-simples .dark\:bg-primary-500\/10 { background-color: rgb(from var(--primary-500) r g b / 10%); }
.dark .app-relatorio-simples .dark\:border-white\/5 { border-color: rgb(255 255 255 / 5%); }
.dark .app-relatorio-simples .dark\:border-white\/10 { border-color: rgb(255 255 255 / 10%); }
.dark .app-relatorio-simples .dark\:border-white\/20 { border-color: rgb(255 255 255 / 20%); }
.dark .app-relatorio-simples .dark\:ring-white\/10 { --tw-ring-color: rgb(255 255 255 / 10%); }
.dark .app-relatorio-simples .dark\:ring-white\/20 { --tw-ring-color: rgb(255 255 255 / 20%); }
.dark .app-relatorio-simples .dark\:divide-white\/10 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(255 255 255 / 10%); }
.dark .app-relatorio-simples .dark\:text-white { color: #fff; }
.dark .app-relatorio-simples .dark\:text-gray-200 { color: var(--gray-200); }
.dark .app-relatorio-simples .dark\:text-gray-300 { color: var(--gray-300); }
.dark .app-relatorio-simples .dark\:text-gray-400 { color: var(--gray-400); }
.dark .app-relatorio-simples .dark\:text-success-400 { color: var(--success-400); }
.dark .app-relatorio-simples .dark\:text-danger-400 { color: var(--danger-400); }

/*
 * `<select>`/`<input>` nativos destas páginas (sem passar pelo
 * componente JS de verdade do Filament — decisão deliberada, ver
 * CLAUDE.md "Fluxo de caixa avançado") ficam sem caixa nenhuma: o
 * preflight do Filament zera `background-color`/`border-radius` de
 * todo `<select>`/`<input>`/`<button>` (regra do próprio
 * `app.css`), e as classes Tailwind que tentavam repor isso
 * (`rounded-lg`, `border-gray-300`, `bg-white`...) são as mesmas que
 * não existem. `fi-select-input`/`fi-input`/`fi-checkbox-input` em si
 * são classes reais, só que só ganham caixa própria quando usadas
 * dentro do componente JS completo do Filament — aqui são nativos, por
 * isso a caixa é refeita diretamente nestas duas regras.
 */
.app-relatorio-simples select.fi-select-input,
.app-relatorio-simples input.fi-input {
    display: block;
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    color: var(--gray-950);
    background-color: #fff;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
}

.dark .app-relatorio-simples select.fi-select-input,
.dark .app-relatorio-simples input.fi-input {
    color: #fff;
    background-color: rgb(255 255 255 / 5%);
    border-color: rgb(255 255 255 / 10%);
}

/*
 * Mesmo motivo do seletor de login (ver bloco "Tela de login" acima):
 * o popup nativo de opções do `<select>` é desenhado pelo navegador no
 * color-scheme do sistema, não no CSS da página — sem isso, SO em dark
 * mode abre o popup com fundo escuro e texto escuro por cima,
 * ilegível.
 */
.app-relatorio-simples select.fi-select-input {
    color-scheme: light;
}

.dark .app-relatorio-simples select.fi-select-input {
    color-scheme: dark;
}

/*
 * `fi-btn`/`fi-badge`/`fi-color-*`/`fi-checkbox-input` em si já são
 * classes reais e corretas (confirmado no CSS pré-compilado) — só os
 * modificadores de tamanho abaixo (`fi-btn-size-xs`/`fi-btn-size-md`,
 * nome de uma versão mais antiga do Filament, antes de virar
 * `fi-size-*` compartilhado) não existem mais. Mais simples redefinir
 * aqui do mesmo nome já escrito nas 10 páginas do que caçar botão por
 * botão pra trocar o nome da classe.
 */
.app-relatorio-simples .fi-btn-size-xs { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.app-relatorio-simples .fi-btn-size-md { padding: 0.5rem 1rem; font-size: 0.875rem; }