/**
 * Tema próprio do SkyNet — substitui o CSS do Phoenix (theme.css/theme.min.css).
 * Carregar SEMPRE depois de vendors/bootstrap/bootstrap.min.css (Bootstrap puro,
 * sem skin de terceiros) — a ordem de carregamento é o que garante que os
 * tokens abaixo vençam os valores padrão do Bootstrap.
 *
 * Estrutura deste arquivo:
 *   1. Tokens (claro/escuro/auto — mesmo padrão de 3 estados dos artifacts)
 *   2. Remapeamento das variáveis nativas do Bootstrap 5.3 pros tokens acima
 *      (assim card, modal, dropdown, btn-primary etc. já saem no tema certo
 *      sem precisar reescrever componente por componente)
 *   3. Componentes novos da casca do produto (prefixo sn-, usados só pelo
 *      layout novo — layouts/app_v2.php)
 *   4. Camada de compatibilidade — preserva os NOMES de classe que as 119
 *      telas de conteúdo já usam (btn-phoenix-*, badge-phoenix-*, fs-7..11,
 *      variáveis --phoenix-*), só troca o visual por trás. Ver a análise de
 *      impacto: zero telas de conteúdo precisam mudar por causa disso.
 */

/* ============================================================
   1. TOKENS
   ============================================================ */

:root {
    --sn-paper: #eef0f5;
    --sn-paper-raised: #ffffff;
    --sn-paper-sunken: #e0e3ec;
    --sn-ink: #14151d;
    --sn-ink-soft: #4b4f5e;
    --sn-ink-faint: #7d8195;
    --sn-ink-quaternary: #9a9eb0;
    --sn-line: #dfe1ea;
    --sn-line-soft: #eceef4;

    --sn-brand: #4735c9;
    --sn-brand-rgb: 71, 53, 201;
    --sn-brand-ink: #ffffff;
    --sn-brand-soft: #d7d3f3;
    --sn-brand-soft-ink: #3b2fa8;

    --sn-success: #157a52;
    --sn-success-rgb: 21, 122, 82;
    --sn-success-soft: #cce2d9;
    --sn-warning: #9a6a13;
    --sn-warning-rgb: 154, 106, 19;
    --sn-warning-soft: #e9decb;
    --sn-danger: #b6392f;
    --sn-danger-rgb: 182, 57, 47;
    --sn-danger-soft: #efd3d1;
    --sn-info: #1f6fa8;
    --sn-info-rgb: 31, 111, 168;
    --sn-info-soft: #cedfec;

    --sn-shadow-sm: 0 1px 2px rgba(20, 21, 29, 0.04);
    --sn-shadow: 0 1px 2px rgba(20, 21, 29, 0.04), 0 8px 24px -12px rgba(20, 21, 29, 0.14);

    --sn-font-ui: 'Manrope', 'Segoe UI', sans-serif;
    --sn-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-sn-theme="light"]) {
        --sn-paper: #0a0b10;
        --sn-paper-raised: #13141c;
        --sn-paper-sunken: #0e0f15;
        --sn-ink: #eceefa;
        --sn-ink-soft: #b0b4c8;
        --sn-ink-faint: #767b93;
        --sn-ink-quaternary: #565a6e;
        --sn-line: #262838;
        --sn-line-soft: #1c1e2a;

        --sn-brand: #9c90ff;
        --sn-brand-rgb: 156, 144, 255;
        --sn-brand-ink: #0a0b10;
        --sn-brand-soft: #201c42;
        --sn-brand-soft-ink: #c3baff;

        --sn-success: #3fbf8f;
        --sn-success-rgb: 63, 191, 143;
        --sn-success-soft: #103228;
        --sn-warning: #e0a83f;
        --sn-warning-rgb: 224, 168, 63;
        --sn-warning-soft: #332508;
        --sn-danger: #e2685c;
        --sn-danger-rgb: 226, 104, 92;
        --sn-danger-soft: #341612;
        --sn-info: #5aa6e0;
        --sn-info-rgb: 90, 166, 224;
        --sn-info-soft: #102838;

        --sn-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
        --sn-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px -16px rgba(0, 0, 0, 0.65);

        color-scheme: dark;
    }
}

:root[data-sn-theme="dark"] {
    --sn-paper: #0a0b10;
    --sn-paper-raised: #13141c;
    --sn-paper-sunken: #0e0f15;
    --sn-ink: #eceefa;
    --sn-ink-soft: #b0b4c8;
    --sn-ink-faint: #767b93;
    --sn-ink-quaternary: #565a6e;
    --sn-line: #262838;
    --sn-line-soft: #1c1e2a;

    --sn-brand: #9c90ff;
    --sn-brand-rgb: 156, 144, 255;
    --sn-brand-ink: #0a0b10;
    --sn-brand-soft: #201c42;
    --sn-brand-soft-ink: #c3baff;

    --sn-success: #3fbf8f;
    --sn-success-rgb: 63, 191, 143;
    --sn-success-soft: #103228;
    --sn-warning: #e0a83f;
    --sn-warning-rgb: 224, 168, 63;
    --sn-warning-soft: #332508;
    --sn-danger: #e2685c;
    --sn-danger-rgb: 226, 104, 92;
    --sn-danger-soft: #341612;
    --sn-info: #5aa6e0;
    --sn-info-rgb: 90, 166, 224;
    --sn-info-soft: #102838;

    --sn-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --sn-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px -16px rgba(0, 0, 0, 0.65);

    color-scheme: dark;
}

/* ============================================================
   2. REMAPEAMENTO DAS VARIÁVEIS NATIVAS DO BOOTSTRAP 5.3
   ============================================================ */

:root {
    --bs-body-font-family: var(--sn-font-ui);
    --bs-body-bg: var(--sn-paper);
    --bs-body-bg-rgb: 243, 244, 248;
    --bs-body-color: var(--sn-ink);
    --bs-emphasis-color: var(--sn-ink);
    --bs-border-color: var(--sn-line);
    --bs-border-color-translucent: var(--sn-line);

    --bs-secondary-color: var(--sn-ink-soft);
    --bs-secondary-bg: var(--sn-paper-sunken);
    --bs-tertiary-color: var(--sn-ink-faint);
    --bs-tertiary-bg: var(--sn-paper-sunken);

    --bs-primary: var(--sn-brand);
    --bs-primary-rgb: var(--sn-brand-rgb);
    --bs-primary-bg-subtle: var(--sn-brand-soft);
    --bs-primary-border-subtle: var(--sn-brand-soft);
    --bs-primary-text-emphasis: var(--sn-brand);

    --bs-success: var(--sn-success);
    --bs-success-rgb: var(--sn-success-rgb);
    --bs-success-bg-subtle: var(--sn-success-soft);
    --bs-success-text-emphasis: var(--sn-success);

    --bs-danger: var(--sn-danger);
    --bs-danger-rgb: var(--sn-danger-rgb);
    --bs-danger-bg-subtle: var(--sn-danger-soft);
    --bs-danger-text-emphasis: var(--sn-danger);

    --bs-warning: var(--sn-warning);
    --bs-warning-rgb: var(--sn-warning-rgb);
    --bs-warning-bg-subtle: var(--sn-warning-soft);
    --bs-warning-text-emphasis: var(--sn-warning);

    --bs-info: var(--sn-info);
    --bs-info-rgb: var(--sn-info-rgb);
    --bs-info-bg-subtle: var(--sn-info-soft);
    --bs-info-text-emphasis: var(--sn-info);

    --bs-link-color: var(--sn-brand);
    --bs-link-color-rgb: var(--sn-brand-rgb);
    --bs-link-hover-color: var(--sn-brand);
    --bs-link-hover-color-rgb: var(--sn-brand-rgb);

    --bs-card-border-color: var(--sn-line);

    --bs-dropdown-border-color: var(--sn-line);
    --bs-dropdown-link-color: var(--sn-ink-soft);
    --bs-dropdown-link-hover-color: var(--sn-ink);
    --bs-dropdown-link-hover-bg: var(--sn-paper-sunken);
    --bs-dropdown-header-color: var(--sn-ink-faint);
    --bs-dropdown-box-shadow: var(--sn-shadow);

    --bs-modal-border-color: var(--sn-line);
    --bs-modal-header-border-color: var(--sn-line);
    --bs-modal-footer-border-color: var(--sn-line);

    --bs-form-control-bg: var(--sn-paper);

    /* Botões nunca foram tocados até aqui — saíam no tamanho padrão do
       Bootstrap (1rem/peso 400), destoando da densidade 0.8rem/peso 600 já
       aplicada em formulário/Choices. Mesma escala, agora nos botões. */
    --bs-btn-font-size: 0.8rem;
    --bs-btn-font-weight: 600;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
}

body {
    font-family: var(--sn-font-ui);
    background: var(--sn-paper);
    color: var(--sn-ink);
}

/* Bootstrap puro usa font-size:1rem/peso 400 nos controles de formulário —
   o Phoenix sempre usou 0.8rem/peso 600 (confirmado no theme.css original),
   mais denso. Sem isso, todo formulário fica com fonte ~25% maior que o
   resto da interface (foi o que ficou "grande" nas telas de proposta/kanban). */
.form-control, .form-select {
    background-color: var(--sn-paper);
    border-color: var(--sn-line);
    color: var(--sn-ink);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    line-height: 1.49;
}
.form-select { padding-right: 2.5rem; }
.form-control-sm, .form-select-sm {
    font-size: 0.76rem;
    padding: 0.35rem 0.75rem;
}
.form-select-sm { padding-right: 2.25rem; }
.form-control:focus, .form-select:focus {
    border-color: var(--sn-brand);
    box-shadow: 0 0 0 0.2rem var(--sn-brand-soft);
}
.form-label { font-size: 0.82rem; font-weight: 700; color: var(--sn-ink-soft); }

.btn-primary {
    background-color: var(--sn-brand);
    border-color: var(--sn-brand);
    color: var(--sn-brand-ink);
}
.btn-primary:hover, .btn-primary:focus {
    filter: brightness(1.06);
    background-color: var(--sn-brand);
    border-color: var(--sn-brand);
    color: var(--sn-brand-ink);
}
::selection { background: var(--sn-brand-soft); color: var(--sn-brand-soft-ink); }
:focus-visible { outline: 2px solid var(--sn-brand); outline-offset: 2px; }

a { color: var(--sn-brand); }
a:hover { color: var(--sn-brand); filter: brightness(0.9); }

/* Bootstrap 5.3 redeclara --bs-*-bg localmente na PRÓPRIA raiz de cada
   componente (.card, .modal, .dropdown-menu), sempre caindo pra
   var(--bs-body-bg) como default — então remapear --bs-card-bg/--bs-modal-bg/
   --bs-dropdown-bg lá no :root (seção 2 acima) nunca chega a valer: a
   declaração local do próprio componente, mais perto no DOM, ganha da
   herdada do :root independente da ordem/especificidade entre os arquivos.
   Por isso essas três (bg de fundo) precisam ser sobrescritas aqui, direto
   no seletor do componente — mesma "camada" que o Bootstrap usa. */
.card { --bs-card-bg: var(--sn-paper-raised); --bs-card-cap-bg: transparent; box-shadow: var(--sn-shadow); }
.modal-content { --bs-modal-bg: var(--sn-paper-raised); }
.dropdown-menu {
    --bs-dropdown-bg: var(--sn-paper-raised);
    --bs-dropdown-link-active-color: var(--sn-brand-soft-ink);
    --bs-dropdown-link-active-bg: var(--sn-brand-soft);
}
.shadow, .shadow-sm { box-shadow: var(--sn-shadow) !important; }

/* números tabulares em qualquer coluna monetária/numérica das 119 telas */
.font-monospace, .fw-mono { font-family: var(--sn-font-mono); font-variant-numeric: tabular-nums; }

/* ============================================================
   3. COMPONENTES NOVOS DA CASCA (layouts/app_v2.php)
   ============================================================ */

.sn-shell { display: flex; min-height: 100vh; background: var(--sn-paper); }

.sn-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--sn-paper-sunken);
    border-right: 1px solid var(--sn-line);
    display: flex;
    flex-direction: column;
    padding: 1.1rem 0.85rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sn-brandmark {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.5rem 1.3rem;
    font-weight: 800;
    font-size: 1.02rem;
    letter-spacing: -0.01em;
    color: var(--sn-ink);
    text-decoration: none;
}
.sn-brandmark:hover { color: var(--sn-ink); }
.sn-brandmark .sn-dot {
    width: 24px; height: 24px; border-radius: 7px;
    background: var(--sn-brand); color: var(--sn-brand-ink);
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.78rem;
}
.sn-brand-logo { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.sn-brandmark .sn-g360 { color: var(--sn-ink-faint); font-weight: 600; }

.sn-navgroup { margin-bottom: 1.1rem; }
.sn-navlabel {
    font-family: var(--sn-font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--sn-ink-faint);
    padding: 0 0.6rem;
    margin-bottom: 0.4rem;
    display: block;
}

.sn-navitem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    font-size: 0.855rem;
    font-weight: 600;
    color: var(--sn-ink-soft);
    text-decoration: none;
    cursor: pointer;
}
.sn-navitem .sn-navitem-main { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.sn-navitem .sn-navitem-main span.label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-navitem i.sn-nav-icon { width: 15px; text-align: center; opacity: 0.75; flex-shrink: 0; }
.sn-navitem.active { background: var(--sn-brand-soft); color: var(--sn-brand-soft-ink); }
.sn-navitem.active i.sn-nav-icon { opacity: 1; }
.sn-navitem:not(.active):hover { background: var(--sn-paper-raised); color: var(--sn-ink); }
.sn-navitem .sn-caret { font-size: 0.7rem; opacity: 0.6; transition: transform 0.15s ease; }
.sn-navitem[aria-expanded="true"] .sn-caret { transform: rotate(90deg); }

.sn-navchildren { padding-left: 1.4rem; border-left: 1px solid var(--sn-line); margin-left: 0.9rem; }
.sn-navchildren .sn-navitem { font-size: 0.82rem; font-weight: 500; }

.sn-side-spacer { flex: 1; }

.sn-userchip {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 0.6rem; border-radius: 10px;
    border: 1px solid var(--sn-line); background: var(--sn-paper-raised);
    font-size: 0.8rem; text-decoration: none; color: inherit;
}
.sn-avatar {
    border-radius: 50%;
    background: var(--sn-brand); color: var(--sn-brand-ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; flex-shrink: 0; overflow: hidden;
    width: 28px; height: 28px; font-size: 0.7rem;
}
.sn-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sn-userchip .sn-avatar { width: 27px; height: 27px; font-size: 0.7rem; }
.sn-userchip .sn-who { font-weight: 700; display: block; line-height: 1.2; color: var(--sn-ink); }
.sn-userchip .sn-role { color: var(--sn-ink-faint); font-size: 0.72rem; }

.sn-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.sn-topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 0.7rem 1.4rem;
    border-bottom: 1px solid var(--sn-line);
    background: var(--sn-paper-raised);
    position: sticky; top: 0; z-index: 1020;
}
.sn-topbar .sn-topbar-left { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.sn-topbar .sn-topbar-actions { display: flex; align-items: center; gap: 0.35rem; }

.sn-icon-btn {
    width: 34px; height: 34px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--sn-ink-soft); background: transparent; border: none;
    font-size: 0.95rem; cursor: pointer; position: relative;
}
.sn-icon-btn:hover { background: var(--sn-paper-sunken); color: var(--sn-ink); }

.sn-badge-dot {
    position: absolute; top: 4px; right: 4px;
    min-width: 15px; height: 15px; padding: 0 3px;
    border-radius: 999px; background: var(--sn-danger); color: #fff;
    font-size: 0.6rem; font-weight: 700; line-height: 15px; text-align: center;
    display: none;
}

.sn-sidebar-toggle {
    display: none;
    width: 34px; height: 34px; border-radius: 8px; border: none; background: transparent;
    color: var(--sn-ink-soft); align-items: center; justify-content: center; cursor: pointer;
}
.sn-sidebar-toggle:hover { background: var(--sn-paper-sunken); }

@media (max-width: 991.98px) {
    .sn-sidebar { position: fixed; z-index: 1030; left: 0; top: 0; transform: translateX(-100%); transition: transform 0.18s ease; box-shadow: var(--sn-shadow); }
    .sn-shell.sn-sidebar-open .sn-sidebar { transform: translateX(0); }
    .sn-sidebar-toggle { display: inline-flex; }
    .sn-sidebar-backdrop {
        display: none; position: fixed; inset: 0; background: rgba(10,11,16,0.4); z-index: 1025;
    }
    .sn-shell.sn-sidebar-open .sn-sidebar-backdrop { display: block; }
}

.sn-content { padding: 1.4rem; flex: 1; }

.sn-footer {
    padding: 1.1rem 1.4rem;
    border-top: 1px solid var(--sn-line);
    background: var(--sn-paper-raised);
    color: var(--sn-ink-faint);
    font-size: 0.82rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.sn-footer a { color: inherit; text-decoration: underline; }

.sn-dropdown-card { min-width: 320px; padding: 0; overflow: hidden; }
.sn-dropdown-card .sn-dropdown-head {
    padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--sn-line);
    display: flex; justify-content: space-between; align-items: center;
}
.sn-dropdown-card .sn-dropdown-head h6 { margin: 0; font-weight: 700; font-size: 0.85rem; }

/* ============================================================
   4. COMPATIBILIDADE — nomes de classe já usados nas 119 telas
   ============================================================ */

:root {
    --phoenix-primary: var(--sn-brand);
    --phoenix-body-bg: var(--sn-paper);
    --phoenix-body-color: var(--sn-ink);
    --phoenix-border-color: var(--sn-line);
    --phoenix-body-tertiary-color: var(--sn-ink-faint);
    --phoenix-tertiary-bg: var(--sn-paper-sunken);
    --phoenix-emphasis-color: var(--sn-ink);
}

.text-body-tertiary { color: var(--sn-ink-faint) !important; }
.text-body-quaternary { color: var(--sn-ink-quaternary) !important; }
.text-body-emphasis { color: var(--sn-ink) !important; }
.text-body-secondary { color: var(--sn-ink-soft) !important; }
.bg-body-emphasis { background-color: var(--sn-paper-sunken) !important; }

/* Idioma de "colar a tabela na borda" do Phoenix (mx-n4 bg-body-emphasis
   border-y border-translucent) — em vez da faixa cinza esquisita original,
   vira um cartão de verdade (fundo elevado, borda nas 4 bordas, sombra),
   igual ao padrão usado no painel do WhatsApp. Zera as margens negativas
   (mx-n4/mx-lg-n6) que existiam só pra fazer a faixa antiga sangrar até a
   borda do container — não fazem sentido pra um cartão contido. Só aplica
   quando as DUAS classes aparecem JUNTAS — border-translucent sozinha é o
   separador de linha usado em ~50 tabelas (<tr class="border-bottom
   border-translucent">) e não pode ser afetada. */
.bg-body-emphasis.border-translucent {
    background-color: var(--sn-paper-raised) !important;
    border: 1px solid var(--sn-line) !important;
    border-radius: 12px !important;
    box-shadow: var(--sn-shadow);
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}
/* mesma lógica — o wrapper interno (.table-responsive.scrollbar.mx-n1.px-1)
   também tinha margem negativa pensada pro sangramento antigo; dentro do
   cartão isso sobra como uma tira clara na borda esquerda. */
.bg-body-emphasis.border-translucent .table-responsive {
    margin: 0 !important;
    padding: 0 !important;
}

/* Mesmo raciocínio pro bloco de filtros — <div class="mb-4"><div class="row
   ... filter-toolbar">...</div></div>, presente em ~33 telas de listagem.
   Aplica o cartão no wrapper externo (não na .row em si, que tem margens
   negativas próprias do grid do Bootstrap — mexer nela quebraria o
   alinhamento das colunas). */
.mb-4:has(> .filter-toolbar) {
    background-color: var(--sn-paper-raised);
    border: 1px solid var(--sn-line);
    border-radius: 12px;
    box-shadow: var(--sn-shadow-sm);
    padding: 1rem 1.1rem;
}

/* Tela de Oportunidades (kanban) não usa o padrão .filter-toolbar acima —
   o filtro é um <form id="filters-form"> solto, sem nenhum wrapper de
   cartão, ficando puro sobre o fundo da página. Mesmo tratamento aplicado
   diretamente no form (único uso de #filters-form no sistema). */
#filters-form {
    background-color: var(--sn-paper-raised);
    border: 1px solid var(--sn-line);
    border-radius: 12px;
    box-shadow: var(--sn-shadow-sm);
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}
#filters-form .mb-4 { margin-bottom: 0 !important; }

/* Cards de oportunidade dentro das colunas do kanban usam bg-body +
   shadow-none (Bootstrap), ou seja, saem exatamente na mesma cor do fundo
   da coluna/página — sem nenhuma separação visual. Único uso de bg-body
   fora da página de erro (verificado), então é seguro mirar direto nele
   combinado com .deal-card. */
.deal-card.bg-body {
    background-color: var(--sn-paper-raised) !important;
    box-shadow: var(--sn-shadow-sm);
}
.deal-card.bg-body:hover { box-shadow: var(--sn-shadow); }

/* Tela de Importações (listagem) tem o mesmo problema do filtro de
   Oportunidades: <div class="row g-3 mb-3 align-items-end"> solta, sem
   .filter-toolbar nem id próprio. Âncora nos <select> únicos dessa tela
   (#imp-filtro-empresa/#imp-filtro-status) pra não pegar nenhum outro
   ".row.g-3.mb-3.align-items-end" do sistema por engano. */
.row.g-3.mb-3.align-items-end:has(#imp-filtro-empresa) {
    background-color: var(--sn-paper-raised);
    border: 1px solid var(--sn-line);
    border-radius: 12px;
    box-shadow: var(--sn-shadow-sm);
    padding: 1rem 1.1rem 0.25rem;
    margin-left: 0;
    margin-right: 0;
}

/* .table pra todo mundo, sem precisar adicionar table-sm/table-hover/
   table-striped/table-group-divider em cada view — mesma regra que o
   Bootstrap usaria pra essas classes, só que baked direto em .table. */
.table > :not(caption) > * > * { padding: 0.4rem 0.6rem; }
.table > tbody > tr:hover > * {
    --bs-table-color-state: var(--bs-table-hover-color);
    --bs-table-bg-state: var(--bs-table-hover-bg);
}
.table > tbody > tr:nth-of-type(odd) > * {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: var(--bs-table-striped-bg);
}
.table > tbody {
    border-top: calc(var(--bs-border-width) * 2) solid var(--sn-line);
}

/* .search-box-icon (busca com lupa dentro do campo) — outra classe própria
   do Phoenix, sem equivalente nativo do Bootstrap. */
.search-box { width: auto; }
.search-input { padding-left: 2.5rem; padding-right: 2rem; }
.search-box-icon {
    position: absolute;
    top: 50%;
    left: 0.9rem;
    transform: translateY(-50%);
    color: var(--sn-ink-faint);
    pointer-events: none;
}

/* Escala estendida de font-size (fs-1..6 já vem do Bootstrap) */
.fs-7  { font-size: 1rem !important; }
.fs-8  { font-size: 0.9375rem !important; }
.fs-9  { font-size: 0.875rem !important; }
.fs-10 { font-size: 0.8125rem !important; }
.fs-11 { font-size: 0.75rem !important; }

.btn-phoenix-primary {
    background-color: var(--sn-brand-soft); border-color: var(--sn-brand-soft);
    color: var(--sn-brand-soft-ink); font-weight: 600;
}
.btn-phoenix-primary:hover { background-color: var(--sn-brand); border-color: var(--sn-brand); color: var(--sn-brand-ink); }
.btn-phoenix-secondary {
    background-color: var(--sn-paper-sunken); border-color: var(--sn-paper-sunken);
    color: var(--sn-ink-soft); font-weight: 600;
}
.btn-phoenix-secondary:hover { background-color: var(--sn-paper); border-color: var(--sn-ink-faint); color: var(--sn-ink); }
.btn-phoenix-success  { background-color: var(--sn-success-soft); border-color: var(--sn-success-soft); color: var(--sn-success); font-weight: 600; }
.btn-phoenix-danger   { background-color: var(--sn-danger-soft);  border-color: var(--sn-danger-soft);  color: var(--sn-danger);  font-weight: 600; }
.btn-phoenix-warning  { background-color: var(--sn-warning-soft); border-color: var(--sn-warning-soft); color: var(--sn-warning); font-weight: 600; }
.btn-phoenix-info     { background-color: var(--sn-info-soft);    border-color: var(--sn-info-soft);    color: var(--sn-info);    font-weight: 600; }

/* botões btn-outline-* (nativos do Bootstrap, ~220 ocorrências em 67 telas)
   deixam de ser contorno e viram sólidos — mesmo tratamento visual do
   btn-primary (fundo cheio, texto claro), sem faixa de cor "pastel"
   intermediária. Sobrescrevendo as variáveis do próprio Bootstrap (não as
   propriedades finais) pra active/disabled continuarem calculando certo
   sozinhos; hover só escurece via filter (ver regra .btn-outline-* :hover
   abaixo), não troca de cor. */
.btn-outline-primary {
    --bs-btn-color: var(--sn-brand-ink);
    --bs-btn-bg: var(--sn-brand);
    --bs-btn-border-color: var(--sn-brand);
    --bs-btn-hover-color: var(--sn-brand-ink);
    --bs-btn-hover-bg: var(--sn-brand);
    --bs-btn-hover-border-color: var(--sn-brand);
    --bs-btn-active-color: var(--sn-brand-ink);
    --bs-btn-active-bg: var(--sn-brand);
    --bs-btn-active-border-color: var(--sn-brand);
}
.btn-outline-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sn-ink-soft);
    --bs-btn-border-color: var(--sn-ink-soft);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sn-ink-soft);
    --bs-btn-hover-border-color: var(--sn-ink-soft);
}
.btn-outline-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sn-success);
    --bs-btn-border-color: var(--sn-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sn-success);
    --bs-btn-hover-border-color: var(--sn-success);
}
.btn-outline-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sn-danger);
    --bs-btn-border-color: var(--sn-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sn-danger);
    --bs-btn-hover-border-color: var(--sn-danger);
}
.btn-outline-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sn-warning);
    --bs-btn-border-color: var(--sn-warning);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sn-warning);
    --bs-btn-hover-border-color: var(--sn-warning);
}
.btn-outline-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sn-info);
    --bs-btn-border-color: var(--sn-info);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sn-info);
    --bs-btn-hover-border-color: var(--sn-info);
}
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-success:hover,
.btn-outline-danger:hover, .btn-outline-warning:hover, .btn-outline-info:hover {
    filter: brightness(1.08);
}

.badge-phoenix { padding: 0.3em 0.65em; border-radius: 999px; font-weight: 700; font-size: 0.72em; }
.badge-phoenix-primary   { background-color: var(--sn-brand-soft);   color: var(--sn-brand-soft-ink); }
.badge-phoenix-secondary { background-color: var(--sn-line-soft);    color: var(--sn-ink-faint); }
.badge-phoenix-success   { background-color: var(--sn-success-soft); color: var(--sn-success); }
.badge-phoenix-danger    { background-color: var(--sn-danger-soft);  color: var(--sn-danger); }
.badge-phoenix-warning   { background-color: var(--sn-warning-soft); color: var(--sn-warning); }
.badge-phoenix-info      { background-color: var(--sn-info-soft);    color: var(--sn-info); }

/* Choices.js — o CSS "de fábrica" da lib vem com cores fixas (#f9f9f9,
   #ddd) e tamanho (min-height:44px) que não combinam com Bootstrap 5.3 nem
   respondem a tema escuro. O Phoenix tinha uma integração pronta pra isso;
   isto aqui é a mesma ideia, alinhando com --bs-* / --sn-* em vez de cor
   fixa. Mantém a lib (48 telas já usam data-choices, inclusive a busca que
   ela oferece) — só corrige a casca visual. */
.choices { position: relative; margin-bottom: 0; font-size: 0.8rem; }

/* Mesma densidade de .form-control/.form-select (0.8rem/peso 600) — ver
   comentário ali em cima. Choices envolve o <select>, então precisa da
   mesma escala pra não destoar dos campos ao lado que não usam a lib. */
.choices__inner {
    display: block;
    width: 100%;
    min-height: calc(1.49em + 1rem + 2px);
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.49;
    color: var(--sn-ink);
    background-color: var(--sn-paper);
    border: 1px solid var(--sn-line);
    border-radius: var(--bs-border-radius, 0.375rem);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.choices[data-type*="select-multiple"] .choices__inner,
.choices[data-type*="text"] .choices__inner {
    padding-right: 1rem;
}
/* :has() porque o <select> original (com a classe -sm) fica DENTRO do
   .choices__inner, não ao lado — não dá pra pegar via combinador de irmão. */
.choices:has(.form-select-sm) .choices__inner {
    font-size: 0.76rem;
    min-height: calc(1.49em + 0.7rem + 2px);
    padding: 0.35rem 2.25rem 0.35rem 0.75rem;
}
.choices[data-type*="select-one"] .choices__inner { padding-bottom: 0.375rem; cursor: pointer; }
.choices[data-type*="select-multiple"] .choices__inner,
.choices[data-type*="text"] .choices__inner {
    background-color: var(--sn-paper) !important;
    border-color: var(--sn-line) !important;
    cursor: text;
}
.choices.is-focused .choices__inner, .choices.is-open .choices__inner {
    border-color: var(--sn-brand);
    box-shadow: 0 0 0 0.2rem var(--sn-brand-soft);
}
.choices.is-open .choices__inner { border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0; }
.choices.is-disabled .choices__inner { background-color: var(--sn-paper-sunken); opacity: 0.7; cursor: not-allowed; }

.choices__list--single { padding: 0; display: flex; align-items: center; height: 100%; }
.choices__list--single .choices__item { color: var(--sn-ink); }
.choices__placeholder { opacity: 0.65; color: var(--sn-ink-faint); }

/* Campo de busca (.choices__input) — no select-multiple/text ele fica
   SEMPRE visível dentro do .choices__inner (não só quando abre, como no
   select-one), então o padding dele SOMA com o do container. Precisa ficar
   quase sem padding próprio pra não somar altura por cima do container. */
.choices__input {
    background-color: transparent !important;
    color: var(--sn-ink);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}
/* Só o search DENTRO do dropdown aberto do select-one (esse sim é um campo
   separado, com fundo e borda próprios) recebe padding de verdade. */
.choices[data-type*="select-one"] .choices__input {
    background-color: var(--sn-paper) !important;
    padding: 0.5rem 1rem !important;
    border-bottom: 1px solid var(--sn-line) !important;
}
.choices__input::placeholder { color: var(--sn-ink-faint); }

/* seta indicadora do select-one — a lib desenha um triângulo cinza escuro
   via border-color, invisível em fundo escuro se não sobrescrever. */
.choices[data-type*="select-one"]::after { border-top-color: var(--sn-ink-faint) !important; }
.choices[data-type*="select-one"].is-open::after { border-bottom-color: var(--sn-ink-faint) !important; border-top-color: transparent !important; }

.choices__list--multiple .choices__item {
    background-color: var(--sn-brand-soft);
    border: none;
    color: var(--sn-brand-soft-ink);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
}
.choices__list--multiple .choices__item.is-highlighted { background-color: var(--sn-brand); color: var(--sn-brand-ink); }

.choices__list--dropdown, .choices__list[aria-expanded] {
    background-color: var(--sn-paper-raised);
    border: 1px solid var(--sn-line);
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
    box-shadow: var(--sn-shadow);
    min-width: 100%;
    width: max-content;
    max-width: min(420px, 90vw);
}
.choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item {
    color: var(--sn-ink-soft);
    font-size: 0.9rem;
    padding: 0.55rem 0.75rem;
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    line-height: 1.4;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list--dropdown .choices__item--selectable:hover,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: var(--sn-brand-soft) !important;
    color: var(--sn-brand-soft-ink) !important;
}
.choices__heading { color: var(--sn-ink-faint); border-bottom-color: var(--sn-line); }
.choices__list, .choices__item { writing-mode: horizontal-tb !important; text-orientation: mixed !important; white-space: normal !important; }

#global-loader {
    position: fixed; inset: 0;
    background: rgba(10, 11, 16, 0.35);
    backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    z-index: 2050;
}
#global-loader .card-like {
    display: flex; align-items: center;
    background: var(--sn-paper-raised); border-radius: 10px;
    box-shadow: var(--sn-shadow); padding: 0.9rem 1.1rem;
    color: var(--sn-ink); font-weight: 600;
}

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }