/* ============================================
   WMA Digital - Dark Theme
   ============================================ */

[data-theme="dark"] {
    /* Base colors */
    --bg-primary: #0f1117;
    --bg-secondary: #161822;
    --bg-card: #1a1d2e;
    --bg-hover: #222640;
    --bg-input: #1e2136;
    --border-color: #2a2d42;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --shadow-color: rgba(0, 0, 0, 0.4);

    /* Design system tokens (admin.css / client.css) */
    --bg-body: #0f1117;
    --bg-soft: #171a26;
    --border-soft: #262a3d;
    --border-strong: #343a52;
    --text-strong: #f1f5f9;
    --text-body: #cbd2e2;
    --thead-bg: rgba(255, 255, 255, 0.035);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -18px rgba(0, 0, 0, 0.55);
    --shadow-pop: 0 12px 40px -10px rgba(0, 0, 0, 0.6);
}

/* Body */
[data-theme="dark"] body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Navbar */
[data-theme="dark"] .navbar {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .navbar .text-dark,
[data-theme="dark"] .navbar .btn-link.text-dark {
    color: var(--text-primary) !important;
}

/* Cards */
[data-theme="dark"] .card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: 0 2px 8px var(--shadow-color);
}

[data-theme="dark"] .card-header {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .card-body {
    color: var(--text-primary);
}

/* Tables */
[data-theme="dark"] .table {
    color: var(--text-primary);
}

[data-theme="dark"] .table th {
    color: var(--text-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .table td {
    border-color: var(--border-color);
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(79, 70, 229, 0.08);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .table-bordered > :not(caption) > * {
    border-color: var(--border-color);
}

/* Linhas/cabeçalhos com variante clara do Bootstrap (table-light/table-secondary).
   O Bootstrap pinta as CÉLULAS via --bs-table-bg (ex.: #e2e3e5 no table-secondary),
   e o texto continua sendo o do dark (claro) => texto claro sobre fundo claro
   (contraste ~1,2). Ex.: a linha "Total geral" (tfoot.table-secondary) dos
   relatórios. Aqui a variante passa a seguir a superfície escura do design system. */
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-secondary {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: rgba(79, 70, 229, 0.10);
    --bs-table-border-color: var(--border-color);
}

/* Células das variantes claras: fundo opaco (há tfoot com position: sticky).
   thead fica de fora de propósito — ele já usa --thead-bg. */
[data-theme="dark"] .table > tbody > .table-light > *,
[data-theme="dark"] .table > tbody > .table-secondary > *,
[data-theme="dark"] .table > tfoot > .table-light > *,
[data-theme="dark"] .table > tfoot > .table-secondary > * {
    background-color: var(--bg-soft) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Linha de total (tfoot) — destaque sutil sobre as linhas normais */
[data-theme="dark"] .table tfoot td,
[data-theme="dark"] .table tfoot th {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--bg-input);
    color: var(--text-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] .form-label {
    color: var(--text-secondary);
}

/* A ajuda embaixo do campo (`.form-text`) não era coberta: ficava na cor do
   tema CLARO — `rgba(33,37,41,.75)` — sobre o fundo escuro do card, contraste
   **1.08:1**. Ou seja, a instrução que existe justamente para ser lida era o
   único texto ilegível da tela. Mesmo padrão já usado acima para o label. */
[data-theme="dark"] .form-text {
    color: var(--text-secondary);
}

[data-theme="dark"] .form-floating label {
    color: var(--text-muted);
}

[data-theme="dark"] .form-floating .form-control {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .input-group-text {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* ============================================================================
   SELECTS — o `<select>` nativo E o campo do plugin select2.

   POR QUE ESTE BLOCO EXISTE (medido, não suposto): o `.form-select` já escurecia,
   mas os filtros que usam **select2** continuavam BRANCOS. Motivo: o CSS que vem
   com o `select2-bootstrap-5-theme` não tem UMA ÚNICA regra de tema escuro — ele
   escurece por `data-bs-theme`, atributo que este sistema NÃO usa (aqui o tema é
   marcado com `data-theme`). Medido na tela do relatório financeiro, com o tema
   escuro ligado: `.select2-selection` com fundo `rgb(255,255,255)` e texto
   `rgb(33,37,41)`, enquanto o `.form-select` do lado já estava em `rgb(30,33,54)`.

   ATENÇÃO À ESPECIFICIDADE: **cada regra daqui precisa do prefixo
   `[data-theme="dark"]`**. Quando este bloco foi escrito, o CSS do select2
   chegava DEPOIS desta folha (vinha da seção `styles` da view) e sem o prefixo o
   fornecedor venceria pelo empate de especificidade em cima da ordem. Hoje a
   ordem é declarada no LAYOUT (o vendor vem antes, ver `admin/layout.php`) e o
   prefixo virou reforço — ele fica, porque continua correto nos dois cenários e
   porque a guarda (`DarkThemeSelectsTest`) lê as regras por esse prefixo. Foi de
   propósito não usar `!important`: o tema do plugin fica livre para o que ele
   precisa (borda vermelha de campo inválido, por exemplo).

   E não basta a caixa fechada: o select2 desenha TRÊS coisas fora do `<select>`
   (a caixa, a lista aberta e o campo de busca dentro dela) e usa IMAGENS
   embutidas com traço escuro para o caret e para o "x" de limpar
   (`stroke='#343a40'`) — num fundo escuro o caret simplesmente desaparece. Por
   isso as imagens são substituídas por versões claras nas mesmas regras.
   ============================================================================ */

/* --- caixa fechada (única e múltipla) ------------------------------------- */
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* O foco acompanha o resto dos campos (indigo do sistema, não o azul padrão). */
[data-theme="dark"] .select2-container--bootstrap-5.select2-container--focus .select2-selection,
[data-theme="dark"] .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25);
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary);
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
    color: var(--text-muted);
}

/* O CARET: imagem embutida trocada por uma de traço claro. */
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* As etiquetas da seleção múltipla ("João", "Maria") */
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    background-color: var(--bg-hover);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-search .select2-search__field {
    color: var(--text-primary);
}

/* Os "x" de limpar (etiqueta e caixa): mesmas imagens escuras do caret. */
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear,
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear,
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
}

/* Campo desabilitado: fundo "afundado" e texto apagado, como o `.form-select`. */
[data-theme="dark"] .select2-container--bootstrap-5.select2-container--disabled .select2-selection,
[data-theme="dark"] .select2-container--bootstrap-5.select2-container--disabled.select2-container--focus .select2-selection {
    background-color: var(--bg-soft);
    border-color: var(--border-color);
    color: var(--text-muted);
}

/* --- lista aberta --------------------------------------------------------- */
[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--bg-card);
    border-color: #4f46e5;
    color: var(--text-primary);
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
    color: var(--text-body);
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    background-color: var(--bg-hover);
    color: var(--text-strong);
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
    background-color: #4f46e5;
    color: #fff;
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--disabled,
[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-disabled="true"],
[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__message,
[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role="group"] .select2-results__group {
    color: var(--text-muted);
}

/* --- o `<select>` nativo --------------------------------------------------- */
/* A LISTA que o sistema operacional abre usa a cor de cada `option`. Sem isto o
   navegador desenha o popup claro com o texto CLARO do tema — e a lista fica
   ilegível justamente no momento da escolha. (Medido: `option` com
   background-color transparente e color `rgb(226,232,240)`.) */
[data-theme="dark"] select option,
[data-theme="dark"] select optgroup {
    background-color: var(--bg-input);
    color: var(--text-primary);
}

/* Text utilities */
[data-theme="dark"] .text-dark {
    color: var(--text-primary) !important;
}

/* Superfícies claras do Bootstrap no tema escuro.
   .text-dark vira CLARO no dark, mas .bg-light/.bg-white continuavam claros —
   texto claro sobre fundo claro (contraste ~1, texto praticamente invisível).
   Ex.: cabeçalhos "Tráfego Pago / Orgânico" e blocos de código dos relatórios. */
[data-theme="dark"] .bg-light {
    background-color: var(--bg-soft) !important;
}

[data-theme="dark"] .bg-light.text-dark,
[data-theme="dark"] .bg-light .text-dark {
    color: var(--text-primary) !important;
}

/* Mesmo problema em blocos de código/tabelas com bg-white (o QR Code e a
   navbar ficam de fora de propósito — precisam de fundo claro) */
[data-theme="dark"] code.bg-white,
[data-theme="dark"] pre.bg-white,
[data-theme="dark"] table.bg-white {
    background-color: var(--bg-soft) !important;
    color: var(--text-primary) !important;
}

/* .text-muted do Bootstrap é escuro demais sobre os cards coloridos dos
   relatórios (contraste ~2,9); segue o token secundário (ainda visivelmente
   mais fraco que o texto principal, mas legível). */
[data-theme="dark"] .text-muted {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-body {
    color: var(--text-primary) !important;
}

/* TEXTO SECUNDÁRIO — a família que faltava aqui.

   O Bootstrap resolve `.text-body-secondary` e `.text-body-tertiary` com
   `rgba(var(--bs-body-color-rgb), .75 / .5)`. O app NÃO usa `data-bs-theme`: o
   tema entra por `[data-theme="dark"]` no <html> com os tokens próprios lá em
   cima. Resultado: `--bs-body-color-rgb` continua sendo a cor do tema CLARO
   (#212529) e o texto secundário saía cinza-escuro sobre o card escuro —
   contraste ~1,4. Era o defeito visível na tela de importação, onde quase todo
   rótulo é `.text-body-secondary` ("Linhas lidas", "Serão criados", o traço
   dos valores vazios e o cabeçalho da tabela de prévia).

   Os dois seguem o token secundário — inclusive o terciário, que num primeiro
   momento pediria `--text-muted`: o próprio tema já decidiu, no `.text-muted`
   logo acima, que `--text-muted` é fraco demais para TEXTO (contraste ~3,4). A
   hierarquia fica por tamanho e peso, não por contraste ilegível. */
[data-theme="dark"] .text-body-secondary,
[data-theme="dark"] .text-body-tertiary {
    color: var(--text-secondary) !important;
}

/* Ênfases "dark" do Bootstrap continuam ESCURAS no tema escuro: texto quase da
   cor do fundo (contraste ~2). Ex.: rótulos "4,12% CTR" / "16,90% CVR" das
   caixas do funil dos relatórios. */
[data-theme="dark"] .text-dark-emphasis,
[data-theme="dark"] .text-black-50 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-body-emphasis {
    color: var(--text-strong) !important;
}

[data-theme="dark"] .text-secondary-emphasis,
[data-theme="dark"] .text-secondary {
    color: var(--text-secondary) !important;
}

/* Utilitários de cor do Bootstrap usam os tons 600 (escuros) e ficavam apagados
   sobre a superfície escura. Aqui sobem para tons 300/400, mantendo o matiz. */
[data-theme="dark"] .text-primary { color: #a5b4fc !important; }
[data-theme="dark"] .text-success { color: #4ade80 !important; }
[data-theme="dark"] .text-danger  { color: #f87171 !important; }
[data-theme="dark"] .text-warning { color: #fbbf24 !important; }
[data-theme="dark"] .text-info    { color: #38bdf8 !important; }

/* Barras de progresso com fundo claro (amarelo/ciano) precisam de texto escuro —
   o Bootstrap usa #fff e o contraste caía para ~1,6 */
[data-theme="dark"] .progress-bar.bg-warning,
[data-theme="dark"] .progress-bar.bg-info,
[data-theme="dark"] .progress-bar.bg-light {
    color: #101322 !important;
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item.text-danger:hover {
    background-color: rgba(239, 68, 68, 0.15);
}

[data-theme="dark"] .dropdown-header {
    color: var(--text-muted);
}

[data-theme="dark"] .dropdown-divider {
    border-color: var(--border-color);
}

/* Alerts */
[data-theme="dark"] .alert-success {
    background-color: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(234, 179, 8, 0.15);
    color: #fde047;
}

[data-theme="dark"] .alert-info {
    background-color: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
}

[data-theme="dark"] .alert-primary {
    background-color: rgba(79, 70, 229, 0.15);
    color: #a5b4fc;
}

/* .alert-light não é coberto pelas variantes acima: continuava um bloco BRANCO
   no meio do layout escuro. Aqui segue a superfície escura. */
[data-theme="dark"] .alert-light {
    background-color: var(--bg-soft);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .alert-light .alert-link,
[data-theme="dark"] .alert-light a {
    color: #a5b4fc;
}

[data-theme="dark"] .btn-close {
    filter: invert(1);
}

/* Badges */
[data-theme="dark"] .badge.bg-secondary {
    background-color: var(--bg-hover) !important;
    color: var(--text-secondary) !important;
}

/* Chips claros do Bootstrap (bg-light / bg-white + text-dark).
   No dark o .text-dark vira CLARO, mas bg-light/bg-white continuavam claros —
   o resultado era texto quase da cor do fundo (contraste ~1). Aqui o chip
   passa a usar a superfície escura do design system. */
[data-theme="dark"] .badge.bg-light,
[data-theme="dark"] .badge.bg-white {
    background-color: var(--bg-hover) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Texto interno desses chips (inclusive <span class="text-dark"> filho) */
[data-theme="dark"] .badge.bg-light .text-dark,
[data-theme="dark"] .badge.bg-white .text-dark,
[data-theme="dark"] .badge.bg-light.text-dark,
[data-theme="dark"] .badge.bg-white.text-dark {
    color: var(--text-primary) !important;
}

/* Variantes -subtle (fundo bem claro do Bootstrap) seguem a superfície escura,
   senão viram chips brilhantes no meio do layout escuro */
[data-theme="dark"] .badge.bg-primary-subtle,
[data-theme="dark"] .badge.bg-secondary-subtle,
[data-theme="dark"] .badge.bg-success-subtle,
[data-theme="dark"] .badge.bg-warning-subtle,
[data-theme="dark"] .badge.bg-danger-subtle,
[data-theme="dark"] .badge.bg-info-subtle,
[data-theme="dark"] .badge.bg-light-subtle {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

/* Fundos claros coloridos exigem texto ESCURO (amarelo/ciano + texto claro
   tinha contraste ~2) */
[data-theme="dark"] .badge.bg-warning,
[data-theme="dark"] .badge.bg-info {
    color: #101322 !important;
}

/* Chips com bg-*-opacity-10: clareia o texto para manter leitura no escuro
   (os tons 600 do Bootstrap ficam apagados sobre a superfície escura) */
[data-theme="dark"] .badge.text-primary   { color: #a5b8ff !important; }
[data-theme="dark"] .badge.text-success   { color: #6ee7b7 !important; }
[data-theme="dark"] .badge.text-danger    { color: #fca5a5 !important; }
[data-theme="dark"] .badge.text-warning   { color: #fcd34d !important; }
[data-theme="dark"] .badge.text-info      { color: #7dd3fc !important; }
[data-theme="dark"] .badge.text-secondary { color: var(--text-secondary) !important; }

/* Modals */
[data-theme="dark"] .modal-content {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .modal-header {
    border-color: var(--border-color);
}

[data-theme="dark"] .modal-footer {
    border-color: var(--border-color);
}

[data-theme="dark"] .modal-title {
    color: var(--text-primary);
}

[data-theme="dark"] .btn-close {
    filter: invert(1);
}

/* Pagination */
[data-theme="dark"] .page-link {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Sidebar - Admin */
[data-theme="dark"] #sidebar-wrapper {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] #sidebar-wrapper .list-group-item {
    color: var(--text-secondary);
    background-color: transparent;
}

[data-theme="dark"] #sidebar-wrapper .list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] #sidebar-wrapper .list-group-item.active {
    background-color: var(--primary-color) !important;
    color: white !important;
}

[data-theme="dark"] #sidebar-wrapper .sidebar-heading {
    color: var(--text-muted);
}

/* Sidebar - Client */
[data-theme="dark"] .sidebar {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .sidebar .nav-link {
    color: var(--text-secondary);
}

[data-theme="dark"] .sidebar .nav-link.active {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #3a3d52;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #4a4d62;
}

/* Kanban — `.fb-kanban-card`, a família única desde 14/10/2026 (o quadro do CRM
   entrou no driver e a família `.kanban-*` deixou de existir). */
[data-theme="dark"] .fb-kanban-card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .fb-kanban-card:hover {
    box-shadow: 0 2px 8px var(--shadow-color) !important;
}

/* List groups */
[data-theme="dark"] .list-group-item {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Code / Pre */
[data-theme="dark"] code {
    background-color: var(--bg-hover);
    color: #f472b6;
    padding: 2px 6px;
    border-radius: 4px;
}

[data-theme="dark"] pre {
    background-color: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Accordion

   O corpo do accordion não herda a cor do card: o Bootstrap 5 pinta
   `.accordion-body` com a variável DELE (`--bs-accordion-color`, que aponta para
   `--bs-body-color` do tema CLARO) e o app não usa `data-bs-theme`. Resultado
   medido no navegador antes desta correção: o texto de "Como exportar o extrato"
   ficava em rgb(33,37,41) sobre o fundo rgb(26,29,46) do card — contraste 1.08:1,
   ou seja, ilegível no modo escuro.

   A correção são as PRÓPRIAS variáveis do componente (e não só a cor do
   `.accordion-body`): assim o botão, o item e o corpo saem todos da mesma
   paleta, sem depender de qual seletor o Bootstrap usar. */
[data-theme="dark"] .accordion {
    --bs-accordion-color: var(--text-primary);
    --bs-accordion-bg: var(--bg-card);
    --bs-accordion-border-color: var(--border-color);
    --bs-accordion-btn-color: var(--text-primary);
    --bs-accordion-btn-bg: var(--bg-card);
    --bs-accordion-active-color: var(--text-primary);
    --bs-accordion-active-bg: var(--bg-hover);
}

[data-theme="dark"] .accordion-body {
    color: var(--text-primary);
}

[data-theme="dark"] .accordion-item {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .accordion-button {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .accordion-button::after {
    filter: invert(1);
}

[data-theme="dark"] .accordion-collapse {
    background-color: var(--bg-card);
}

/* Tab panels */
[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-secondary);
    border-color: transparent;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .tab-content {
    color: var(--text-primary);
}

/* Offcanvas */

/* ============================================================
   Dark Theme — Ajustes do novo design system
   ============================================================ */

/* Fundo decorativo suave (em vez dos raios claros do tema claro) */
[data-theme="dark"] body {
    background-image:
        radial-gradient(720px 420px at 88% -6%, rgba(99, 102, 241, 0.10), transparent 60%),
        radial-gradient(640px 380px at -8% 108%, rgba(124, 58, 237, 0.08), transparent 60%);
}

[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: var(--text-strong);
}

[data-theme="dark"] a { color: #a5b4fc; }

/* Abas/pills inativos: o Bootstrap usa o azul padrão de link (#0d6efd), que
   fica apagado sobre a superfície escura (contraste ~3,9). Ex.: abas
   "Estado / Por Cidade" no relatório. */
[data-theme="dark"] .nav-pills .nav-link {
    color: var(--text-secondary);
}

[data-theme="dark"] .nav-pills .nav-link:hover,
[data-theme="dark"] .nav-pills .nav-link:focus {
    color: var(--text-primary);
    background-color: var(--bg-hover);
}

[data-theme="dark"] .nav-pills .nav-link.active {
    color: #fff;
    background-color: var(--brand-600);
}

/* Navbar translúcida no tema escuro */
[data-theme="dark"] .navbar {
    background: rgba(22, 24, 34, 0.8) !important;
}

/* Outlines */
[data-theme="dark"] .btn-outline-primary {
    color: #a5b4fc;
    border-color: rgba(165, 180, 252, 0.35);
}

[data-theme="dark"] .btn-outline-primary:hover {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}

/* `.btn-outline-dark` NÃO tinha regra: o Bootstrap pinta o texto de `#212529`
   (quase preto) e o fundo é transparente, então no tema escuro o botão sumia.
   MEDIDO no botão "Cancelar" do orçamento (`quotes/form.php`, rota
   `/admin/quotes/editar/92`): sem esta regra o texto sai `rgb(33,37,41)` sobre o
   painel `rgb(26,29,46)` = **contraste 1,08**; com ela, `rgb(148,163,184)` sobre
   o mesmo painel = **6,5**. (Os botões da faixa "pago sem conta" são
   `btn-outline-secondary`, medidos em 6,76 no tema escuro — estes aqui são os
   botões de status do orçamento.) Aqui a classe passa a ser o mesmo "neutro" do
   outline-secondary, que é o que ela queria dizer. */
[data-theme="dark"] .btn-outline-dark {
    color: var(--text-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-outline-dark:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-outline-dark.active,
[data-theme="dark"] .btn-outline-dark:active,
[data-theme="dark"] .btn-outline-dark.show {
    background: var(--bg-hover);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Ativo dos outlines no dark: o fundo sólido do Bootstrap (#6c757d etc.) ficava
   com o texto quase da mesma cor (contraste ~1,8). Ex.: "Sincronizado (...)". */
[data-theme="dark"] .btn-outline-secondary.active,
[data-theme="dark"] .btn-outline-secondary:active,
[data-theme="dark"] .btn-outline-secondary.show {
    background: var(--bg-hover);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-outline-primary.active,
[data-theme="dark"] .btn-outline-primary:active,
[data-theme="dark"] .btn-outline-primary.show {
    background: rgba(99, 102, 241, 0.28);
    border-color: rgba(165, 180, 252, 0.5);
    color: #e0e7ff;
}

[data-theme="dark"] .btn-outline-success.active,
[data-theme="dark"] .btn-outline-success:active,
[data-theme="dark"] .btn-outline-success.show {
    background: rgba(34, 197, 94, 0.22);
    border-color: rgba(74, 222, 128, 0.45);
    color: #bbf7d0;
}

/* Table header */
[data-theme="dark"] .table thead th {
    background: var(--thead-bg);
    color: var(--text-secondary);
}

[data-theme="dark"] .table td { color: var(--text-body); }

/* Cards: manter brilho suave */
[data-theme="dark"] .card {
    border-color: var(--border-soft);
}

/* Sidebar permanece escura em ambos os temas */
[data-theme="dark"] #sidebar-wrapper {
    background:
        radial-gradient(420px 260px at 115% -8%, rgba(124, 58, 237, 0.30), transparent 60%),
        radial-gradient(360px 300px at -20% 110%, rgba(99, 102, 241, 0.22), transparent 60%),
        linear-gradient(180deg, #0d0f1e 0%, #12152e 60%, #170d33 100%);
}

[data-theme="dark"] #sidebar-wrapper .list-group-item {
    color: rgba(255, 255, 255, 0.72);
}

/* Scrollbars */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #31354d;
    border-color: var(--bg-primary);
}

/* Tema claro vs dark em páginas de autenticação */
[data-theme="dark"] .auth-card {
    background: #1a1d2e;
    border: 1px solid #262a3d;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .auth-card .text-dark { color: var(--text-strong) !important; }

/* ============================================================
   Dark Theme — correções (bg-white do Bootstrap usa !important)
   ============================================================ */

/* Headers/rodapés de cards com classe bg-white ficavam brancos no dark,
   com o texto claro por cima (ilegível). O !important vence o utilitário
   .bg-white do Bootstrap. */
[data-theme="dark"] .card-header.bg-white,
[data-theme="dark"] .card-footer.bg-white {
    background-color: var(--bg-secondary) !important;
}

/* Mesmo problema com os utilitários de TEMA do Bootstrap: `.bg-body` e
   `.bg-body-tertiary` resolvem para --bs-body-bg (claro), que não é remapeado
   no dark. Eram os títulos de "Minha Assinatura" (Renovar plano, Alterar
   plano, Números de WhatsApp, Histórico de pagamentos) com fundo claro e
   texto claro. O !important é obrigatório: os utilitários do Bootstrap também
   usam !important. */
[data-theme="dark"] .card-header.bg-body,
[data-theme="dark"] .card-footer.bg-body,
[data-theme="dark"] .card-header.bg-body-tertiary,
[data-theme="dark"] .card-footer.bg-body-tertiary {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Blocos que usam bg-body-tertiary como caixa (config de relatório, cartões de
   destaque): sem isto a caixa fica clara no dark com o texto claro por cima. */
[data-theme="dark"] .bg-body-tertiary {
    background-color: var(--bg-soft) !important;
}

/* `.bg-body-secondary` é o MESMO caso — e era o único da família que ficou de
   fora. Resolve para `--bs-secondary-bg` (tema claro), então saía um retângulo
   cinza-claro no meio de tela escura. É a prévia de anexo do compositor do
   WhatsApp (`#wa-attach-preview`), que aparece justamente quando se está
   enviando arquivo. */
[data-theme="dark"] .bg-body-secondary {
    background-color: var(--bg-soft) !important;
}

/* Kanban: área dos cards da coluna com fundo escuro no dark */
[data-theme="dark"] .fb-kanban-coluna .card-body.fb-kanban-cards {
    background-color: rgba(255, 255, 255, 0.04);
}