/*
 * PRODS — paleta da marca sobre o tema CoreUI v4 do Backpack.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * POR QUE UM ARQUIVO SEPARADO
 *
 * `public/css/app.css` é gerado pelo Vite a partir de `resources/css/app.css` —
 * editar o build seria perdido no próximo `npm run build`. E o CSS do tema mora
 * em `vendor/backpack/theme-coreuiv4`, que volta ao original a cada
 * `vendor:publish`.
 *
 * Este arquivo entra pelo gancho previsto (`config/backpack/ui.php` → `styles`),
 * depois dos dois, e só redefine variáveis CSS. Nenhuma regra de layout é
 * tocada: a mudança é de cor, não de estrutura.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * ⚠️ VERDE NÃO É COR DE BOTÃO
 *
 * O manual define o verde #00B894 como cor da marca, e a tentação é usá-lo nos
 * botões primários. Texto branco sobre #00B894 dá contraste de ~2,2:1 — reprova
 * no WCAG AA (mínimo 4,5:1), e este é um sistema de chão de fábrica, operado em
 * tela sob luz forte.
 *
 * Por isso a divisão: **ardósia #253A4D** carrega as ações (7,5:1 com branco,
 * passa até em AAA) e o **verde** fica como acento — indicador de item ativo,
 * foco, estado de sucesso. É a mesma hierarquia do símbolo, onde o verde é um
 * módulo e não a massa principal.
 */

:root {
    --prods-ardosia: #253a4d;
    --prods-verde: #00b894;
    --prods-verde-escuro: #00997b;
    --prods-grafite: #16232e;
    --prods-nevoa: #e6e9ed;
    --prods-modulo: #c3ccd5;

    /* Ações primárias do Bootstrap/CoreUI. */
    --cui-primary: var(--prods-ardosia);
    --cui-primary-rgb: 37, 58, 77;
    --cui-link-color: var(--prods-ardosia);
    --cui-link-color-rgb: 37, 58, 77;
    --cui-link-hover-color: var(--prods-grafite);

    /* Verde só onde é acento. */
    --cui-success: var(--prods-verde);
    --cui-success-rgb: 0, 184, 148;

    /*
     * ⚠️ As mesmas cores, agora nas variáveis do BOOTSTRAP puro.
     *
     * O painel do produto roda sobre o tema CoreUI, que usa `--cui-*`. Mas o
     * site público e o painel da plataforma usam Bootstrap direto, que lê
     * `--bs-*` — e sem estas linhas os botões saíam no roxo padrão do
     * framework, no único lugar onde um cliente novo vê a marca pela primeira
     * vez.
     */
    --bs-primary: var(--prods-ardosia);
    --bs-primary-rgb: 37, 58, 77;
    --bs-success: var(--prods-verde);
    --bs-success-rgb: 0, 184, 148;
    --bs-link-color: var(--prods-ardosia);
    --bs-link-color-rgb: 37, 58, 77;
    --bs-link-hover-color: var(--prods-grafite);
}

/*
 * Botões do Bootstrap puro — site público e painel de plataforma.
 *
 * ⚠️ Texto ESCURO no botão verde, pelo mesmo motivo documentado no topo deste
 * arquivo: branco sobre #00B894 dá ~2,2:1 e reprova no WCAG AA.
 */
.btn-primary {
    --bs-btn-bg: var(--prods-ardosia);
    --bs-btn-border-color: var(--prods-ardosia);
    --bs-btn-hover-bg: var(--prods-grafite);
    --bs-btn-hover-border-color: var(--prods-grafite);
    --bs-btn-active-bg: var(--prods-grafite);
    --bs-btn-active-border-color: var(--prods-grafite);
    --bs-btn-disabled-bg: var(--prods-ardosia);
    --bs-btn-disabled-border-color: var(--prods-ardosia);
}

.btn-success {
    --bs-btn-bg: var(--prods-verde);
    --bs-btn-border-color: var(--prods-verde);
    --bs-btn-hover-bg: var(--prods-verde-escuro);
    --bs-btn-hover-border-color: var(--prods-verde-escuro);
    --bs-btn-active-bg: var(--prods-verde-escuro);
    --bs-btn-active-border-color: var(--prods-verde-escuro);
    --bs-btn-color: var(--prods-grafite);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

.btn-outline-primary {
    --bs-btn-color: var(--prods-ardosia);
    --bs-btn-border-color: var(--prods-ardosia);
    --bs-btn-hover-bg: var(--prods-ardosia);
    --bs-btn-hover-border-color: var(--prods-ardosia);
    --bs-btn-hover-color: #fff;
}

/* ── Barra lateral ────────────────────────────────────────────────────────── */

.sidebar {
    --cui-sidebar-bg: var(--prods-grafite);
    --cui-sidebar-brand-bg: var(--prods-ardosia);
    --cui-sidebar-color: var(--prods-modulo);
    --cui-sidebar-nav-link-color: var(--prods-modulo);
    --cui-sidebar-nav-link-hover-color: #fff;
    --cui-sidebar-nav-link-hover-bg: rgba(255, 255, 255, 0.06);
    --cui-sidebar-nav-link-active-color: #fff;
    --cui-sidebar-nav-link-active-bg: rgba(0, 184, 148, 0.16);
    --cui-sidebar-nav-group-bg: rgba(0, 0, 0, 0.18);
    --cui-sidebar-nav-title-color: rgba(230, 233, 237, 0.55);
}

/*
 * Filete verde no item ativo.
 *
 * Fundo esverdeado sozinho é sutil demais sob luz de galpão; a barra dá o
 * "você está aqui" sem depender de discriminação fina de cor — quem não
 * distingue o verde ainda percebe a marca lateral.
 */
.sidebar .nav-link.active {
    box-shadow: inset 3px 0 0 0 var(--prods-verde);
}

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

.header {
    --cui-header-bg: #fff;
    --cui-header-border-color: var(--prods-nevoa);
    --cui-header-color: var(--prods-ardosia);
    --cui-header-hover-color: var(--prods-grafite);
}

/* ── Botões ───────────────────────────────────────────────────────────────── */

.btn-primary {
    --cui-btn-bg: var(--prods-ardosia);
    --cui-btn-border-color: var(--prods-ardosia);
    --cui-btn-hover-bg: var(--prods-grafite);
    --cui-btn-hover-border-color: var(--prods-grafite);
    --cui-btn-active-bg: var(--prods-grafite);
    --cui-btn-active-border-color: var(--prods-grafite);
    --cui-btn-disabled-bg: var(--prods-ardosia);
    --cui-btn-disabled-border-color: var(--prods-ardosia);
    --cui-btn-color: #fff;
    --cui-btn-hover-color: #fff;
    --cui-btn-active-color: #fff;
}

.btn-success {
    --cui-btn-bg: var(--prods-verde);
    --cui-btn-border-color: var(--prods-verde);
    --cui-btn-hover-bg: var(--prods-verde-escuro);
    --cui-btn-hover-border-color: var(--prods-verde-escuro);
    --cui-btn-active-bg: var(--prods-verde-escuro);
    --cui-btn-active-border-color: var(--prods-verde-escuro);
    /*
     * Texto escuro, não branco: branco sobre #00B894 reprova no contraste. O
     * grafite sobre o verde dá 5,4:1 e passa em AA.
     */
    --cui-btn-color: var(--prods-grafite);
    --cui-btn-hover-color: #fff;
    --cui-btn-active-color: #fff;
}

.btn-outline-primary {
    --cui-btn-color: var(--prods-ardosia);
    --cui-btn-border-color: var(--prods-ardosia);
    --cui-btn-hover-bg: var(--prods-ardosia);
    --cui-btn-hover-border-color: var(--prods-ardosia);
    --cui-btn-hover-color: #fff;
}

/* ── Paginação ────────────────────────────────────────────────────────────── */

/*
 * O CoreUI pinta a página atual com o roxo próprio dele (#7C69EF), por uma
 * variável separada de `--cui-primary`. Foi o último resquício do tema padrão
 * na listagem — varrido conferindo, no navegador, todos os elementos com aquela
 * cor computada.
 */
.pagination {
    --cui-pagination-active-bg: var(--prods-ardosia);
    --cui-pagination-active-border-color: var(--prods-ardosia);
    --cui-pagination-color: var(--prods-ardosia);
    --cui-pagination-hover-color: var(--prods-grafite);
    --cui-pagination-focus-color: var(--prods-grafite);
    --cui-pagination-focus-bg: var(--prods-nevoa);
}

/* ── Marcadores de formulário ─────────────────────────────────────────────── */

/*
 * Checkbox, rádio e switch marcados.
 *
 * ⚠️ Mesmo caso da paginação: o CoreUI pinta o estado marcado com o roxo
 * próprio dele (#7C69EF), por uma variável separada de `--cui-primary`. Num
 * formulário com vários checkboxes, era a única coisa roxa da tela.
 */
.form-check-input:checked {
    background-color: var(--prods-ardosia);
    border-color: var(--prods-ardosia);
}

.form-check-input:focus {
    border-color: var(--prods-verde);
    box-shadow: 0 0 0 0.2rem rgba(0, 184, 148, 0.3);
}

/* ── Foco: acento da marca, sem remover o indicador ───────────────────────── */

.form-control:focus,
.form-select:focus,
.btn:focus-visible,
a:focus-visible {
    border-color: var(--prods-verde);
    box-shadow: 0 0 0 0.2rem rgba(0, 184, 148, 0.3);
    outline: none;
}

/* ── Tela de login ────────────────────────────────────────────────────────── */

body.login,
.login .card {
    --cui-card-border-color: var(--prods-nevoa);
}