/*
 * Tema do painel CRM BioPulse.
 *
 * CSS artesanal, sem Vite e sem npm — deliberado. O caminho oficial do
 * Filament (`make:filament-theme`) exige um build Node dentro da imagem, e
 * este projeto nao tem Node no Dockerfile. Carregado por um renderHook em
 * AdminPanelProvider (HEAD_END), com ?v= bumpado a mao.
 *
 * As cores da paleta vivem no PHP (Color::hex no provider), nao aqui: quem
 * pinta botao, badge e grafico e' o Filament. Este arquivo cuida de fundo,
 * superficie e texto — e de nada mais. A cor do risco (vermelho de "abaixo do
 * piso") nao passa por aqui em nenhuma modalidade.
 *
 * REGRA QUE ESTE ARQUIVO PAGOU CARO PARA APRENDER: todo fundo claro opaco
 * precisa de contraparte `.dark`. A faixa branca de ~90px acima das tabelas
 * era `.fi-ta-header-ctn: #fbfcfd` sem par escuro, com o Filament pintando o
 * titulo de branco — branco no branco. TemaTest trava isso: fundo claro novo
 * sem regra `.dark` quebra a suite.
 *
 * O painel abre CLARO (defaultThemeMode) e alterna pelo botao nativo. As duas
 * modalidades sao suportadas; nenhuma e' decorativa.
 */

:root {
    --bp-navy: #002766;
    --bp-navy-escuro: #15233b;
    --bp-cobre: #ce9053;
    --bp-azul: #2563eb;
}

/* ---------- Sidebar ---------- */
/*
 * No claro a sidebar e' branca e o logo entra como veio do site: palavra navy
 * sobre branco. No escuro ela volta ao navy e o logo e' monocromatizado por
 * filtro (ver adiante) — nao ha' variante branca do PNG em nenhum repo, e
 * monocromatizar e' mais honesto do que servir uma palavra invisivel.
 */

.fi-sidebar,
.fi-sidebar-header {
    background-color: #ffffff;
    border-color: rgb(15 23 42 / 0.08) !important;
}

.fi-sidebar-nav {
    background-color: transparent !important;
}

.fi-sidebar-item-label {
    color: rgb(51 65 85) !important;
    font-weight: 500;
}

.fi-sidebar-item-icon {
    color: rgb(100 116 139) !important;
}

.fi-sidebar-item:hover .fi-sidebar-item-label,
.fi-sidebar-item:hover .fi-sidebar-item-icon {
    color: var(--bp-navy) !important;
}

.fi-sidebar-item:not(.fi-active):hover .fi-sidebar-item-btn {
    background-color: rgb(15 23 42 / 0.04) !important;
}

/*
 * Ativo: bloco azul cheio, como na referencia — nao so' o texto colorido.
 * A classe e' `fi-sidebar-item-btn`, nao `-button`: a grafia errada passou
 * despercebida enquanto a sidebar era navy (branco sobre navy legivel de
 * qualquer jeito) e virou branco-no-branco assim que o fundo clareou.
 */
.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background-color: var(--bp-azul) !important;
    border-radius: 0.6rem;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: #fff !important;
}

.fi-sidebar-group-label {
    color: rgb(100 116 139) !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.68rem;
}

/*
 * Respiro para o logo nao encostar na borda do cabecalho.
 *
 * Sem `.fi-sidebar-header` na frente de proposito: o Filament renderiza DOIS
 * `.fi-logo` — um dentro do `.fi-sidebar-header`, que fica oculto no desktop, e
 * o visivel, que vive em `.fi-topbar-start`. Prender a regra ao header e' mirar
 * na copia escondida.
 */
.fi-logo {
    padding-block: 0.35rem;
}

/* ---------- Conteudo ---------- */

.fi-main-ctn {
    background-color: #f7f8fa;
}

/* O topbar nao tem <nav> dentro; a borda mora no proprio .fi-topbar. */
.fi-topbar {
    border-bottom: 1px solid rgb(0 0 0 / 0.06);
    box-shadow: none;
}

/* Cards e tabelas: borda discreta em vez de sombra pesada, como a referencia. */
.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn {
    border: 1px solid rgb(15 23 42 / 0.07) !important;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04) !important;
}

.fi-wi-stats-overview-stat {
    border-radius: 0.75rem;
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
}

.fi-wi-stats-overview-stat-label {
    font-weight: 500;
    color: rgb(71 85 105);
}

/* Cabecalho de tabela mais leve: a referencia usa rotulo pequeno em cinza. */
.fi-ta-header-cell {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: rgb(100 116 139);
}

.fi-ta-header-ctn {
    background-color: #fbfcfd;
}

/* O titulo do widget-tabela e' o texto que sumia na faixa branca. */
.fi-ta-header-heading {
    color: var(--bp-navy);
}

/* ---------- Modal de decisao de alcada ---------- */
/*
 * O unico blade proprio do projeto (resources/views/filament/modals/
 * decidir-alcada.blade.php). Ele nasceu escrito em utilitarios Tailwind, que
 * nunca existiram aqui — sem Node no Dockerfile, o navegador so' recebe as
 * classes `.fi-*` do Filament e este arquivo. O modal inteiro renderizava sem
 * layout: a regua de faixas virava texto empilhado e o vermelho de
 * abaixo-do-piso nao pintava.
 *
 * As cores saem de `var(--danger-600)` e irmas — as variaveis que o Filament
 * deriva do Color::hex do AdminPanelProvider. A semantica do risco continua
 * morando so' no PHP; aqui e' referencia, nunca hex repetido.
 *
 * Fundos usam color-mix com transparent: nenhum e' opaco, entao nenhum precisa
 * de contraparte `.dark` — a mesma regra serve as duas modalidades.
 */

.bp-decisao {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.875rem;
}

.bp-veredito {
    border-left: 4px solid;
    border-radius: 0 0.375rem 0.375rem 0;
    padding: 0.75rem;
}

.bp-veredito-critico {
    border-color: var(--danger-500);
    background-color: color-mix(in oklch, var(--danger-500) 6%, transparent);
}

.bp-veredito-alerta {
    border-color: var(--warning-500);
    background-color: color-mix(in oklch, var(--warning-500) 8%, transparent);
}

.bp-veredito-neutro {
    border-color: var(--gray-300);
    background-color: color-mix(in oklch, var(--gray-500) 6%, transparent);
}

.dark .bp-veredito-neutro {
    border-color: var(--gray-600);
}

.bp-veredito-titulo {
    font-weight: 600;
}

.bp-nota {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    opacity: 0.7;
}

.bp-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
}

.bp-linha-medidas {
    margin-top: 0.5rem;
}

.bp-rotulo {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
}

.bp-esmaecido {
    opacity: 0.6;
}

.bp-pilula {
    border-radius: 9999px;
    padding: 0.125rem 0.5rem;
    background-color: color-mix(in oklch, var(--gray-500) 15%, transparent);
}

/*
 * Margem negativa e' vermelha, positiva e' verde — nas duas modalidades. E' a
 * mesma semantica da coluna Impacto da fila; se um dia divergirem, o errado e'
 * quem mudou, nao esta regra.
 */
.bp-pilula-negativa {
    background-color: color-mix(in oklch, var(--danger-500) 15%, transparent);
    color: var(--danger-600);
    font-weight: 500;
}

.bp-pilula-positiva {
    background-color: color-mix(in oklch, var(--success-600) 15%, transparent);
    color: var(--success-700);
    font-weight: 500;
}

.dark .bp-pilula-positiva {
    color: var(--success-500);
}

.bp-pilula-aviso {
    background-color: color-mix(in oklch, var(--warning-500) 15%, transparent);
    color: var(--warning-600);
    font-style: italic;
}

.bp-item {
    border: 1px solid var(--gray-200);
    border-radius: 0.375rem;
    padding: 0.75rem;
}

.dark .bp-item {
    border-color: var(--gray-700);
}

.bp-item-titulo {
    font-weight: 500;
}

/* A regua: um degrau por faixa, lado a lado, com a linha do topo indicando onde
   o preco caiu. Sem `display: flex` aqui os degraus empilham — foi o defeito. */
.bp-regua {
    display: flex;
    margin-top: 0.5rem;
}

.bp-regua-degrau {
    flex: 1;
    border-top: 2px solid var(--gray-300);
    padding-top: 0.25rem;
    text-align: center;
    font-size: 0.75rem;
    opacity: 0.6;
}

.dark .bp-regua-degrau {
    border-top-color: var(--gray-600);
}

.bp-regua-degrau-atingida {
    border-top-color: var(--primary-500);
    color: var(--primary-600);
    font-weight: 700;
    opacity: 1;
}

.dark .bp-regua-degrau-atingida {
    color: var(--primary-500);
}

/* Abaixo do piso e' vermelho — nas duas modalidades, sem excecao. */
.bp-regua-degrau-abaixo {
    border-top-color: var(--danger-500);
    color: var(--danger-600);
    font-weight: 700;
    opacity: 1;
}

.dark .bp-regua-degrau-abaixo {
    color: var(--danger-500);
}

.bp-erro {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-style: italic;
    color: var(--warning-600);
}

.bp-historico-titulo {
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
}

.bp-historico-linha {
    font-size: 0.75rem;
    opacity: 0.8;
}

/* ---------- Modo escuro ---------- */
/*
 * Cada fundo claro acima reaparece aqui. Ordem espelhada de proposito: quem
 * editar o claro ve' o par logo abaixo e nao esquece dele.
 */

.dark .fi-sidebar,
.dark .fi-sidebar-header {
    background-color: var(--bp-navy-escuro);
    border-color: rgb(255 255 255 / 0.08) !important;
}

.dark .fi-sidebar-item-label {
    color: rgb(255 255 255 / 0.72) !important;
}

.dark .fi-sidebar-item-icon {
    color: rgb(255 255 255 / 0.55) !important;
}

.dark .fi-sidebar-item:hover .fi-sidebar-item-label,
.dark .fi-sidebar-item:hover .fi-sidebar-item-icon {
    color: #fff !important;
}

.dark .fi-sidebar-item:not(.fi-active):hover .fi-sidebar-item-btn {
    background-color: rgb(255 255 255 / 0.06) !important;
}

.dark .fi-sidebar-group-label {
    color: rgb(255 255 255 / 0.4) !important;
}

/*
 * O logo e' um PNG de fundo transparente com a palavra em navy: sobre o navy
 * escuro ela sumiria. brightness(0) zera o pixel, invert(1) leva a branco —
 * marca monocromatica sobre fundo escuro, uso classico. O icone cobre vai
 * junto; e' o preco de nao existir variante branca do arquivo.
 *
 * Sem `.fi-sidebar-header` na frente pelo mesmo motivo da regra do respiro: o
 * logo que aparece esta' na topbar. Com o header na frente, a palavra ficava
 * navy sobre navy — ilegivel, e foi assim que o defeito passou.
 */
.dark .fi-logo {
    filter: brightness(0) invert(1);
}

.dark .fi-main-ctn {
    background-color: rgb(15 23 42);
}

.dark .fi-topbar {
    border-bottom-color: rgb(255 255 255 / 0.08);
}

.dark .fi-section,
.dark .fi-wi-stats-overview-stat,
.dark .fi-ta-ctn {
    border-color: rgb(255 255 255 / 0.08) !important;
    box-shadow: none !important;
}

.dark .fi-wi-stats-overview-stat-label {
    color: rgb(148 163 184);
}

.dark .fi-ta-header-cell {
    color: rgb(148 163 184);
}

/* O par que faltava: sem ele, titulo branco sobre #fbfcfd = a faixa branca. */
.dark .fi-ta-header-ctn {
    background-color: rgb(15 23 42 / 0.6);
}

.dark .fi-ta-header-heading {
    color: rgb(241 245 249);
}

/* ---- Pagina publica de aceite (fora do painel Filament) ------------------
   Unicas classes do projeto usadas FORA do painel. Aqui o CSS do Filament nao
   e' carregado, entao as variaveis --primary-600 e irmas nao existem: as cores
   sao literais da marca (as mesmas do AdminPanelProvider). Folha de cliente e'
   sempre clara, como papel — nao ha contraparte .dark de proposito.           */
.bp-pub-body { margin: 0; background: #f7f7f8; font-family: system-ui, sans-serif; color: #1a1a1a; }
.bp-pub-folha { max-width: 52rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; background: #fff; }
.bp-pub-titulo { font-size: 1.5rem; margin: 0 0 .25rem; }
.bp-pub-sub { color: #555; margin: 0 0 1.5rem; }
.bp-pub-secao { font-size: 1.05rem; margin: 1.75rem 0 .5rem; border-bottom: 1px solid #ddd; padding-bottom: .25rem; }
.bp-pub-tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.bp-pub-tabela th { text-align: left; background: #f0f0f2; padding: .4rem .5rem; }
.bp-pub-tabela td { padding: .4rem .5rem; border-bottom: 1px solid #eee; }
.bp-pub-total { font-size: 1.15rem; font-weight: 700; margin: 1rem 0; }
.bp-pub-nota { font-size: .85rem; color: #555; }
.bp-pub-form { display: grid; gap: .5rem; max-width: 24rem; margin-top: 1rem; }
.bp-pub-label { font-size: .85rem; font-weight: 600; }
.bp-pub-input { padding: .5rem; border: 1px solid #bbb; border-radius: .375rem; font-size: 1rem; }
.bp-pub-erro { color: #C0392B; font-size: .8rem; }
.bp-pub-botao { margin-top: .75rem; padding: .6rem 1rem; border: 0; border-radius: .375rem;
                background: #2563EB; color: #fff; font-size: 1rem; cursor: pointer; }
.bp-pub-ok { background: #ecfdf5; border: 1px solid #1F8A4C; padding: .75rem 1rem;
             border-radius: .375rem; margin: 0 0 1.5rem; }