/* ==========================================================================
   dark-mode.css v5 — ASA FINANCE
   --------------------------------------------------------------------------
   Estratégia: TEMA ESCURO COM TINT SEMÂNTICO.
     - Apenas COR DE FUNDO e COR DE TEXTO mudam. Nada de padding, border,
       sizing, posicionamento, layout. Estrutura intocada.
     - Header gradient roxo (#667eea → #764ba2) PERMANECE.
     - Sidebar gradient escuro (#1b233f → #131a31) PERMANECE.
     - Cards/modais/inputs/tabelas: fundo escuro condizente com o tema preto.
     - Lançamentos de ENTRADA: wash verde sutil no card / linha.
     - Lançamentos de SAÍDA:   wash vermelho sutil no card / linha.
     - Detecção automática via :has() — não precisa adicionar classe nenhuma
       nos templates; já reconhece os badges inline-styled que o app usa.
     - Botões coloridos, badges semânticos e ícones de ação NÃO MUDAM.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
    /* fundos */
    --background-page:    #0b1020;                /* body */
    --bg-card:            #141a2e;                /* cards / modais / dropdowns */
    --bg-card-2:          #1a2238;                /* zebra / hover / table head */
    --bg-input:           #0f1530;                /* form-controls */

    /* textos */
    --text-strong:        #f1f5f9;                /* títulos / valores */
    --text:               #cbd5e1;                /* corpo */
    --text-soft:          #94a3b8;                /* labels / muted */
    --link:               #7aa2f7;

    /* bordas */
    --border:             rgba(255, 255, 255, 0.07);
    --border-strong:      rgba(255, 255, 255, 0.14);

    /* tints semânticos (washes sutis sobre o card escuro) */
    --tint-in:            rgba( 16, 185, 129, 0.07);   /* entrada · verde */
    --tint-in-strong:     rgba( 16, 185, 129, 0.13);
    --tint-in-edge:       rgba( 16, 185, 129, 0.32);   /* borda esquerda */

    --tint-out:           rgba(239,  68,  68, 0.07);   /* saída · vermelho */
    --tint-out-strong:    rgba(239,  68,  68, 0.13);
    --tint-out-edge:      rgba(239,  68,  68, 0.32);

    --tint-warn:          rgba(245, 158,  11, 0.07);   /* atenção · amarelo */
    --tint-warn-edge:     rgba(245, 158,  11, 0.32);

    color-scheme: dark;
}

/* ==========================================================================
   1) BODY + WRAPPERS
   ========================================================================== */
html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: var(--background-page) !important;
    color: var(--text);
}
html[data-theme="dark"] .all,
html[data-theme="dark"] .conteudo,
html[data-theme="dark"] section.conteudo,
html[data-theme="dark"] .conteudo-row,
html[data-theme="dark"] .conteudo .container-fluid,
html[data-theme="dark"] .conteudo .container,
html[data-theme="dark"] main {
    background-color: transparent !important;
    color: var(--text);
}

html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--background-page); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a3149; border-radius: 4px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3a4365; }

/* ==========================================================================
   2) HEADER + SIDEBAR — MESMA COR EXATA (gradient roxo escuro)
   --------------------------------------------------------------------------
   Concorrentes que precisamos vencer:
     - style.css:908            .menu { background: gradient navy }      (sem !important)
     - professional-enh.css:7   .menu { background: gradient roxo claro !important }
     - planifin-theme.css:63    .menu { background: gradient navy !important }
   Ultimo arquivo a carregar vence em caso de !important empate. Aqui usamos
   especificidade BEM maior (html body section.menu.transition) para vencer
   sem ambiguidade. Tambem aplicamos background-image separadamente.
   ========================================================================== */
html[data-theme="dark"] .modern-header,
html[data-theme="dark"] header.modern-header {
    background: linear-gradient(135deg, #463a82 0%, #553e7d 100%) !important;
    background-image: linear-gradient(135deg, #463a82 0%, #553e7d 100%) !important;
}

/* Sidebar - todos os seletores possiveis com especificidade alta */
html[data-theme="dark"] body section.menu,
html[data-theme="dark"] body section.menu.transition,
html[data-theme="dark"] body .menu,
html[data-theme="dark"] body .menu.transition,
html[data-theme="dark"] html body section.menu,
html[data-theme="dark"] .modern-sidebar,
html[data-theme="dark"] body .modern-sidebar {
    background: linear-gradient(135deg, #463a82 0%, #553e7d 100%) !important;
    background-image: linear-gradient(135deg, #463a82 0%, #553e7d 100%) !important;
    background-color: #463a82 !important;
}

/* Sidebar quando o user passa hover (expande) - inclui backdrop-filter reset */
html[data-theme="dark"] body section.menu:hover,
html[data-theme="dark"] body .menu:hover {
    background: linear-gradient(135deg, #463a82 0%, #553e7d 100%) !important;
    background-image: linear-gradient(135deg, #463a82 0%, #553e7d 100%) !important;
    backdrop-filter: none !important;
}

/* ★ CRITICO: pseudo-element .menu::before
   professional-enhancements.css linha 29-40 cria um <div virtual> com
   gradient roxo CLARO (#667eea -> #764ba2) posicionado absoluto ocupando
   100% do .menu. Mesmo com z-index: -1 esse pseudo aparece. Sobrescrever
   o background dele tambem. */
html[data-theme="dark"] body section.menu::before,
html[data-theme="dark"] body .menu::before,
html[data-theme="dark"] section.menu::before,
html[data-theme="dark"] .menu::before {
    background: linear-gradient(135deg, #463a82 0%, #553e7d 100%) !important;
    background-image: linear-gradient(135deg, #463a82 0%, #553e7d 100%) !important;
}
html[data-theme="dark"] body section.menu:hover::before,
html[data-theme="dark"] body .menu:hover::before,
html[data-theme="dark"] .menu:hover::before {
    background: linear-gradient(135deg, #463a82 0%, #553e7d 100%) !important;
    background-image: linear-gradient(135deg, #463a82 0%, #553e7d 100%) !important;
}

/* Item ativo do menu - destaque sutil */
html[data-theme="dark"] .menu-nav .nav-pills > li > a.active,
html[data-theme="dark"] .menu .link-menu.active,
html[data-theme="dark"] .menu-nav .link-menu.active {
    background: linear-gradient(90deg, rgba(129,140,248,.55), rgba(167,139,250,.30)) !important;
    background-image: linear-gradient(90deg, rgba(129,140,248,.55), rgba(167,139,250,.30)) !important;
    border-left-color: #c4b5fd !important;
}

/* ==========================================================================
   3) CARDS, MODAIS, DROPDOWNS
   ========================================================================== */
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .pf-card,
html[data-theme="dark"] .pf-kpi-card,
html[data-theme="dark"] .pf-stat,
html[data-theme="dark"] .pf-panel,
html[data-theme="dark"] .pf-section,
html[data-theme="dark"] .pf-summary,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .resumo-card,
html[data-theme="dark"] .modern-search-section,
html[data-theme="dark"] .modern-filters,
html[data-theme="dark"] .modern-filters-section,
html[data-theme="dark"] .modern-totals-summary,
html[data-theme="dark"] .modern-table-container,
html[data-theme="dark"] .modern-batch-actions,
html[data-theme="dark"] .filters-section,
html[data-theme="dark"] .filtros-section,
html[data-theme="dark"] .filtros-container,
html[data-theme="dark"] .search-section,
html[data-theme="dark"] .totals-container-enhanced,
html[data-theme="dark"] .contas-correlacionadas,
html[data-theme="dark"] .lista-itens,
html[data-theme="dark"] .lista-resultado,
html[data-theme="dark"] .resultado-busca {
    background-color: var(--bg-card) !important;
    color: var(--text);
    border-color: var(--border) !important;
}

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

html[data-theme="dark"] .card-header:not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-primary-light):not(.pf-card-header-success):not(.pf-card-header-danger):not(.pf-card-header-warning):not(.pf-card-header-info),
html[data-theme="dark"] .modal-header:not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.pf-card-header-success):not(.pf-card-header-danger):not(.pf-card-header-warning):not(.pf-card-header-info) {
    background: linear-gradient(135deg, #463a82 0%, #553e7d 100%) !important;
}

html[data-theme="dark"] .card-body,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .popover-body,
html[data-theme="dark"] .pf-card-body {
    background-color: transparent !important;
    color: var(--text);
}
html[data-theme="dark"] .modal-footer {
    background-color: var(--bg-card-2) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-body,
html[data-theme="dark"] .bg-body-tertiary {
    background-color: var(--bg-card) !important;
    color: var(--text);
}

/* ==========================================================================
   4) TABELAS
   ========================================================================== */
html[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.025);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
    color: var(--text);
}
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table-light th,
html[data-theme="dark"] thead.table-light {
    background-color: var(--bg-card-2) !important;
    color: var(--text-soft) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .table tbody td,
html[data-theme="dark"] .table tbody th {
    color: var(--text-strong) !important;
    border-color: var(--border) !important;
    background-color: transparent;
}
html[data-theme="dark"] .table tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.04);
}

/* ==========================================================================
   5) INPUTS / SELECTS / TEXTAREAS
   ========================================================================== */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] input.form-control,
html[data-theme="dark"] textarea.form-control,
html[data-theme="dark"] input[type="text"]:not(.no-dark),
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .search-input {
    background-color: var(--bg-input) !important;
    color: var(--text-strong) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] .search-input:focus {
    background-color: var(--bg-input) !important;
    color: var(--text-strong) !important;
    border-color: var(--link) !important;
    box-shadow: 0 0 0 3px rgba(122, 162, 247, 0.20) !important;
    outline: none !important;
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--text-soft) !important;
    opacity: 0.8;
}
html[data-theme="dark"] .input-group-text {
    background-color: var(--bg-card-2) !important;
    color: var(--text) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .form-label,
html[data-theme="dark"] label:not(.form-check-label) {
    color: var(--text) !important;
}
html[data-theme="dark"] .form-check-label,
html[data-theme="dark"] .form-text,
html[data-theme="dark"] small.form-text {
    color: var(--text-soft) !important;
}

/* ==========================================================================
   6) TÍTULOS / TEXTO LIVRE
   ========================================================================== */
html[data-theme="dark"] .title,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .modern-page-title,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .modern-section-title,
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] .h1, html[data-theme="dark"] .h2, html[data-theme="dark"] .h3,
html[data-theme="dark"] .h4, html[data-theme="dark"] .h5, html[data-theme="dark"] .h6,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .modal-title {
    color: var(--text-strong) !important;
}
html[data-theme="dark"] .card-header h1,
html[data-theme="dark"] .card-header h2,
html[data-theme="dark"] .card-header h3,
html[data-theme="dark"] .card-header h4,
html[data-theme="dark"] .card-header h5,
html[data-theme="dark"] .card-header h6,
html[data-theme="dark"] .card-header .card-title,
html[data-theme="dark"] .modal-header .modal-title,
html[data-theme="dark"] .modal-header h1,
html[data-theme="dark"] .modal-header h2,
html[data-theme="dark"] .modal-header h3,
html[data-theme="dark"] .modal-header h4,
html[data-theme="dark"] .modal-header h5,
html[data-theme="dark"] .modal-header h6 {
    color: #ffffff !important;
}

/* ==========================================================================
   7) TEXTO MUTED / INLINE
   ========================================================================== */
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] small.text-muted,
html[data-theme="dark"] .text-secondary {
    color: var(--text-soft) !important;
}
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .text-black {
    color: var(--text) !important;
}

html[data-theme="dark"] .text-success { color: #4ade80 !important; }
html[data-theme="dark"] .text-danger  { color: #fca5a5 !important; }
html[data-theme="dark"] .text-warning { color: #fcd34d !important; }
html[data-theme="dark"] .text-info    { color: #7dd3fc !important; }
html[data-theme="dark"] .text-primary { color: #a5b8f9 !important; }

html[data-theme="dark"] [style*="color: #6c757d"],
html[data-theme="dark"] [style*="color:#6c757d"],
html[data-theme="dark"] [style*="color: #495057"],
html[data-theme="dark"] [style*="color:#495057"],
html[data-theme="dark"] [style*="color: #212529"],
html[data-theme="dark"] [style*="color:#212529"],
html[data-theme="dark"] [style*="color: #1e293b"],
html[data-theme="dark"] [style*="color:#1e293b"],
html[data-theme="dark"] [style*="color: #1E293B"],
html[data-theme="dark"] [style*="color:#1E293B"],
html[data-theme="dark"] [style*="color: #475569"],
html[data-theme="dark"] [style*="color:#475569"],
html[data-theme="dark"] [style*="color: #334155"],
html[data-theme="dark"] [style*="color:#334155"] {
    color: var(--text) !important;
}

/* ==========================================================================
   8) LINKS / DROPDOWN ITEMS / NAV TABS
   ========================================================================== */
/* FIX 2026-07-01 (sweep): + :not(.pf-btn) — azul de link sobre o gradiente roxo do
   .pf-btn-primary deixava "Novo Lançamento" ilegível (contraste 1.5). */
html[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.link-menu):not(.alert-link):not(.logo-link):not(.pf-btn) {
    color: var(--link);
}
html[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.link-menu):not(.alert-link):not(.logo-link):not(.pf-btn):hover {
    color: #a5b8f9;
}
html[data-theme="dark"] .pf-btn-primary {
    color: #fff !important;   /* texto branco sobre o gradiente roxo */
}

html[data-theme="dark"] .dropdown-item { color: var(--text); }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--bg-card-2);
    color: var(--text-strong);
}
html[data-theme="dark"] .dropdown-divider { border-color: var(--border); }
html[data-theme="dark"] .dropdown-header { color: var(--text-soft); }

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

html[data-theme="dark"] hr,
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end {
    border-color: var(--border) !important;
}

/* ==========================================================================
   ★ 9) BADGES — REVISAO ABRANGENTE DE CONTRASTE NO DARK
   --------------------------------------------------------------------------
   Bootstrap 5 tem variantes "subtle" (bg-success-subtle, etc.) onde o fundo
   pastel claro + texto da mesma cor familiar funciona BEM no light mode mas
   fica PESSIMO no dark (cor sobre cor da mesma familia = baixo contraste).

   Estrategia: no dark, manter o tint SEMANTICO mas usar texto BEM mais
   claro/saturado para garantir 4.5:1 minimo (WCAG AA).

   Tambem cobrimos:
     - .badge sólidos (.bg-success, .bg-danger, .bg-warning) - mantem cor
     - .badge.bg-warning.text-dark - mantem amarelo + texto bem escuro
     - .badge.bg-secondary - cinza neutro
     - Inline styled (#d1fae5 / #fee2e2) cobre tambem o COLOR inline
   ========================================================================== */

/* ---------- BADGES "SUBTLE" do Bootstrap (causa principal do problema) ---------- */
html[data-theme="dark"] .badge.bg-success-subtle,
html[data-theme="dark"] .badge.bg-success-subtle.text-success,
html[data-theme="dark"] span.badge.bg-success-subtle {
    background-color: rgba(74, 222, 128, 0.18) !important;
    color: #86efac !important;
    border: 1px solid rgba(74, 222, 128, 0.35);
}
html[data-theme="dark"] .badge.bg-danger-subtle,
html[data-theme="dark"] .badge.bg-danger-subtle.text-danger,
html[data-theme="dark"] span.badge.bg-danger-subtle {
    background-color: rgba(248, 113, 113, 0.18) !important;
    color: #fecaca !important;
    border: 1px solid rgba(248, 113, 113, 0.35);
}
html[data-theme="dark"] .badge.bg-warning-subtle,
html[data-theme="dark"] .badge.bg-warning-subtle.text-warning,
html[data-theme="dark"] span.badge.bg-warning-subtle {
    background-color: rgba(252, 211, 77, 0.18) !important;
    color: #fde68a !important;
    border: 1px solid rgba(252, 211, 77, 0.35);
}
html[data-theme="dark"] .badge.bg-info-subtle,
html[data-theme="dark"] .badge.bg-info-subtle.text-info,
html[data-theme="dark"] span.badge.bg-info-subtle {
    background-color: rgba(125, 211, 252, 0.18) !important;
    color: #bae6fd !important;
    border: 1px solid rgba(125, 211, 252, 0.35);
}
html[data-theme="dark"] .badge.bg-primary-subtle,
html[data-theme="dark"] .badge.bg-primary-subtle.text-primary,
html[data-theme="dark"] span.badge.bg-primary-subtle {
    background-color: rgba(165, 184, 249, 0.18) !important;
    color: #c4d0ff !important;
    border: 1px solid rgba(165, 184, 249, 0.35);
}
html[data-theme="dark"] .badge.bg-secondary-subtle,
html[data-theme="dark"] .badge.bg-secondary-subtle.text-secondary,
html[data-theme="dark"] span.badge.bg-secondary-subtle {
    background-color: rgba(148, 163, 184, 0.18) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(148, 163, 184, 0.35);
}

/* ---------- BADGES SOLIDOS do Bootstrap (mantem cor mas garante texto branco) ---------- */
html[data-theme="dark"] .badge.bg-success,
html[data-theme="dark"] .badge.text-bg-success {
    background-color: #16a34a !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .badge.bg-danger,
html[data-theme="dark"] .badge.text-bg-danger {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .badge.bg-warning,
html[data-theme="dark"] .badge.text-bg-warning {
    background-color: #d97706 !important;
    color: #fef3c7 !important;
}
/* warning.text-dark — Bootstrap usa texto escuro proposital para amarelo */
html[data-theme="dark"] .badge.bg-warning.text-dark {
    background-color: #fbbf24 !important;
    color: #422006 !important;
}
html[data-theme="dark"] .badge.bg-info,
html[data-theme="dark"] .badge.text-bg-info {
    background-color: #0284c7 !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .badge.bg-primary,
html[data-theme="dark"] .badge.text-bg-primary {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .badge.bg-secondary,
html[data-theme="dark"] .badge.text-bg-secondary {
    background-color: #475569 !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .badge.bg-dark,
html[data-theme="dark"] .badge.text-bg-dark {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

/* ---------- INLINE STYLED badges (dashboard.html linhas 153/157) ---------- *
   Templates usam:
     <span class="badge" style="background:#d1fae5; color:#065f46">  (verde)
     <span class="badge" style="background:#fee2e2; color:#991b1b">  (vermelho)
   Cobrir AMBOS (background + color) com [style*=...]. */
html[data-theme="dark"] span.badge[style*="#d1fae5"],
html[data-theme="dark"] .badge[style*="background:#d1fae5"],
html[data-theme="dark"] .badge[style*="background: #d1fae5"] {
    background-color: rgba(74, 222, 128, 0.18) !important;
    color: #86efac !important;
}
html[data-theme="dark"] span.badge[style*="#fee2e2"],
html[data-theme="dark"] .badge[style*="background:#fee2e2"],
html[data-theme="dark"] .badge[style*="background: #fee2e2"] {
    background-color: rgba(248, 113, 113, 0.18) !important;
    color: #fecaca !important;
}
html[data-theme="dark"] span.badge[style*="#fef3c7"],
html[data-theme="dark"] .badge[style*="background:#fef3c7"] {
    background-color: rgba(252, 211, 77, 0.18) !important;
    color: #fde68a !important;
}
html[data-theme="dark"] span.badge[style*="#dbeafe"],
html[data-theme="dark"] .badge[style*="background:#dbeafe"] {
    background-color: rgba(125, 211, 252, 0.18) !important;
    color: #bae6fd !important;
}
html[data-theme="dark"] span.badge[style*="#e0e7ff"],
html[data-theme="dark"] .badge[style*="background:#e0e7ff"] {
    background-color: rgba(165, 184, 249, 0.18) !important;
    color: #c4d0ff !important;
}
/* Cor inline escura sobre badge claro - sobrescrever texto tambem */
html[data-theme="dark"] .badge[style*="color:#065f46"],
html[data-theme="dark"] .badge[style*="color: #065f46"] { color: #86efac !important; }
html[data-theme="dark"] .badge[style*="color:#991b1b"],
html[data-theme="dark"] .badge[style*="color: #991b1b"] { color: #fecaca !important; }
html[data-theme="dark"] .badge[style*="color:#92400e"],
html[data-theme="dark"] .badge[style*="color: #92400e"] { color: #fde68a !important; }
html[data-theme="dark"] .badge[style*="color:#1e40af"],
html[data-theme="dark"] .badge[style*="color: #1e40af"] { color: #bae6fd !important; }

/* ---------- Badges padrao bg-light variantes (mantido do anterior) ----------*/
html[data-theme="dark"] .badge.bg-light,
html[data-theme="dark"] .badge.text-bg-light {
    background-color: var(--bg-card-2) !important;
    color: var(--text-strong) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .badge.bg-light.text-dark,
html[data-theme="dark"] a.badge.bg-light.text-dark {
    background-color: rgba(122, 162, 247, 0.12) !important;
    color: #a5b8f9 !important;
    border-color: rgba(122, 162, 247, 0.32) !important;
}
html[data-theme="dark"] .badge.bg-light.text-dark:hover,
html[data-theme="dark"] a.badge.bg-light.text-dark:hover {
    background-color: rgba(122, 162, 247, 0.22) !important;
    color: #c4d0ff !important;
}
html[data-theme="dark"] .badge.bg-light.text-dark.border-success {
    background-color: rgba(16, 185, 129, 0.12) !important;
    color: #4ade80 !important;
    border-color: rgba(16, 185, 129, 0.38) !important;
}
html[data-theme="dark"] .badge.bg-light.text-dark.border-danger {
    background-color: rgba(239, 68, 68, 0.12) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.38) !important;
}

/* ==========================================================================
  10) ALERTS
   ========================================================================== */
html[data-theme="dark"] .alert.alert-light {
    background-color: var(--bg-card);
    color: var(--text);
    border-color: var(--border);
}
html[data-theme="dark"] .alert { border-color: var(--border); }

/* ==========================================================================
  11) PAGINATION
   ========================================================================== */
html[data-theme="dark"] .page-link {
    background-color: var(--bg-card);
    color: var(--text);
    border-color: var(--border);
}
html[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--bg-card-2);
    color: var(--text-soft);
}
html[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--link);
    border-color: var(--link);
    color: #0b1020;
}

/* ==========================================================================
  12) MODAL BACKDROP
   ========================================================================== */
html[data-theme="dark"] .modal-backdrop.show {
    background-color: #03061a;
    opacity: 0.72;
}

/* ==========================================================================
  ★ 13) TINT SEMÂNTICO — entradas/saídas
   ========================================================================== */
html[data-theme="dark"] .card.is-entrada,
html[data-theme="dark"] .card-entrada,
html[data-theme="dark"] .pf-kpi-card.is-entrada,
html[data-theme="dark"] .pf-card.is-entrada,
html[data-theme="dark"] .card:has(.pf-card-header-success),
html[data-theme="dark"] .pf-card:has(.pf-card-header-success),
html[data-theme="dark"] .pf-kpi-card:has(.text-success):not(:has(.text-danger)) {
    background-color: var(--bg-card) !important;
    background-image: linear-gradient(180deg, var(--tint-in), transparent 35%) !important;
    border-left: 3px solid var(--tint-in-edge) !important;
}

html[data-theme="dark"] .card.is-saida,
html[data-theme="dark"] .card-saida,
html[data-theme="dark"] .pf-kpi-card.is-saida,
html[data-theme="dark"] .pf-card.is-saida,
html[data-theme="dark"] .card:has(.pf-card-header-danger),
html[data-theme="dark"] .pf-card:has(.pf-card-header-danger),
html[data-theme="dark"] .pf-kpi-card:has(.text-danger):not(:has(.text-success)) {
    background-color: var(--bg-card) !important;
    background-image: linear-gradient(180deg, var(--tint-out), transparent 35%) !important;
    border-left: 3px solid var(--tint-out-edge) !important;
}

html[data-theme="dark"] .card.is-aviso,
html[data-theme="dark"] .pf-kpi-card:has(.text-warning):not(:has(.text-success)):not(:has(.text-danger)) {
    background-color: var(--bg-card) !important;
    background-image: linear-gradient(180deg, var(--tint-warn), transparent 35%) !important;
    border-left: 3px solid var(--tint-warn-edge) !important;
}

html[data-theme="dark"] .table tbody tr:has(td span[style*="d1fae5"]) > td,
html[data-theme="dark"] .table tbody tr:has(td span[style*="D1FAE5"]) > td,
html[data-theme="dark"] .table tbody tr:has(.badge.bg-success) > td,
html[data-theme="dark"] .table tbody tr.is-entrada > td,
html[data-theme="dark"] .table tbody tr.tipo-entrada > td {
    background-color: var(--tint-in) !important;
}
html[data-theme="dark"] .table tbody tr:has(td span[style*="d1fae5"]):hover > td,
html[data-theme="dark"] .table tbody tr:has(.badge.bg-success):hover > td,
html[data-theme="dark"] .table tbody tr.is-entrada:hover > td,
html[data-theme="dark"] .table tbody tr.tipo-entrada:hover > td {
    background-color: var(--tint-in-strong) !important;
}

html[data-theme="dark"] .table tbody tr:has(td span[style*="fee2e2"]) > td,
html[data-theme="dark"] .table tbody tr:has(td span[style*="FEE2E2"]) > td,
html[data-theme="dark"] .table tbody tr:has(.badge.bg-danger) > td,
html[data-theme="dark"] .table tbody tr.is-saida > td,
html[data-theme="dark"] .table tbody tr.tipo-saida > td {
    background-color: var(--tint-out) !important;
}
html[data-theme="dark"] .table tbody tr:has(td span[style*="fee2e2"]):hover > td,
html[data-theme="dark"] .table tbody tr:has(.badge.bg-danger):hover > td,
html[data-theme="dark"] .table tbody tr.is-saida:hover > td,
html[data-theme="dark"] .table tbody tr.tipo-saida:hover > td {
    background-color: var(--tint-out-strong) !important;
}

/* ==========================================================================
  14) CÓDIGOS
   ========================================================================== */
html[data-theme="dark"] code:not(.no-dark),
html[data-theme="dark"] .table td code,
html[data-theme="dark"] .table td .user-code {
    background-color: var(--bg-input);
    color: var(--text-strong);
}

/* ==========================================================================
  15) PRINT
   ========================================================================== */
@media print {
    html[data-theme="dark"],
    html[data-theme="dark"] body,
    html[data-theme="dark"] .all,
    html[data-theme="dark"] .conteudo,
    html[data-theme="dark"] .conteudo-row,
    html[data-theme="dark"] .card,
    html[data-theme="dark"] .modal-content,
    html[data-theme="dark"] .table tbody tr td {
        background-color: #ffffff !important;
        background-image: none !important;
        color: #1e293b !important;
        border-color: #e4e8ef !important;
    }
}

/* ==========================================================================
  16) COMPONENTES ESPECÍFICOS DO APP
   ========================================================================== */

/* ---------- modern-panel ---------- */
html[data-theme="dark"] .modern-panel,
html[data-theme="dark"] .modern-panel-header,
html[data-theme="dark"] .modern-panel-footer,
html[data-theme="dark"] .modern-panel-controls {
    background-color: var(--bg-card) !important;
    color: var(--text);
    border-color: var(--border) !important;
}
html[data-theme="dark"] .modern-panel-title,
html[data-theme="dark"] .modern-panel-actions { color: var(--text-strong); }
html[data-theme="dark"] .modern-pagination-info,
html[data-theme="dark"] .modern-page-selector { color: var(--text-soft); }

/* ---------- modern-filters ---------- */
html[data-theme="dark"] .modern-filter-group { color: var(--text); }
html[data-theme="dark"] .modern-filter-label { color: var(--text) !important; }
html[data-theme="dark"] .modern-filter-input,
html[data-theme="dark"] select.modern-filter-input,
html[data-theme="dark"] input.modern-filter-input {
    background-color: var(--bg-input) !important;
    color: var(--text-strong) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .modern-filter-input:focus {
    background-color: var(--bg-input) !important;
    border-color: var(--link) !important;
    box-shadow: 0 0 0 3px rgba(122, 162, 247, .20) !important;
}

/* ---------- modern-table — FORCA BRUTA contra layout-compacto.css ----------
   layout-compacto.css linhas 277/289/306/311/315 forcam
   `background: #ffffff !important` em 5 niveis:
     .modern-table             linha 277
     .modern-table tbody       linha 289
     .modern-table td          linha 306
     .modern-table tbody tr    linha 311
     .modern-table tbody tr:hover linha 315 (#f8f9fa)
   E style.css linha 5591 forca `.modern-table td { color: #4a5568 !important; }`.

   Estrategia: usar `background:` (shorthand) ao inves de background-color
   para casar com a propriedade que eles usam. Aumentar especificidade com
   `html body` no inicio. Cobrir TODOS os niveis. */

/* CONTAINER da tabela */
html[data-theme="dark"] body .modern-table-container,
html[data-theme="dark"] .modern-table-container {
    background: var(--bg-card) !important;
    color: var(--text-strong) !important;
}

/* TABLE em si */
html[data-theme="dark"] body .modern-table,
html[data-theme="dark"] body table.modern-table,
html[data-theme="dark"] .modern-table {
    background: transparent !important;
    color: #f1f5f9 !important;
}

/* THEAD - faixa mais escura */
html[data-theme="dark"] body .modern-table thead,
html[data-theme="dark"] body .modern-table thead tr,
html[data-theme="dark"] body .modern-table thead th,
html[data-theme="dark"] .modern-table thead,
html[data-theme="dark"] .modern-table thead tr,
html[data-theme="dark"] .modern-table thead th {
    background: var(--bg-card-2) !important;
    color: var(--text-soft) !important;
    border-color: var(--border) !important;
    border-bottom-color: var(--border-strong) !important;
}

/* TBODY - corpo da tabela (CRITICO - era branco !important) */
html[data-theme="dark"] body .modern-table tbody,
html[data-theme="dark"] .modern-table tbody {
    background: transparent !important;
}

/* TR - linhas (CRITICO - era branco !important) */
html[data-theme="dark"] body .modern-table tbody tr,
html[data-theme="dark"] .modern-table tbody tr {
    background: transparent !important;
}

/* HOVER da linha */
html[data-theme="dark"] body .modern-table tbody tr:hover,
html[data-theme="dark"] .modern-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* TD - celulas individuais (CRITICO - era branco !important + texto cinza) */
html[data-theme="dark"] body .modern-table tbody td,
html[data-theme="dark"] body .modern-table td,
html[data-theme="dark"] .modern-table tbody td,
html[data-theme="dark"] .modern-table td {
    background: transparent !important;
    color: #f1f5f9 !important;
    border-bottom-color: var(--border) !important;
}

/* TD ao hover - sutil destaque */
html[data-theme="dark"] body .modern-table tbody tr:hover td,
html[data-theme="dark"] .modern-table tbody tr:hover td {
    background: transparent !important;
    color: #f1f5f9 !important;
}

/* COLUNAS especificas - garantir cor branca forte */
html[data-theme="dark"] .modern-table tbody td.modern-data-col,
html[data-theme="dark"] .modern-table tbody td.modern-date-col,
html[data-theme="dark"] .modern-table tbody td.modern-id-col,
html[data-theme="dark"] .modern-table tbody td.modern-status-col,
html[data-theme="dark"] .modern-table tbody td.modern-actions-col {
    color: #f1f5f9 !important;
    opacity: 1 !important;
    background: transparent !important;
}

/* Filhos diretos sem cor semantica propria */
html[data-theme="dark"] .modern-table tbody td.modern-data-col > *:not(.badge):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info):not(.text-primary),
html[data-theme="dark"] .modern-table tbody td.modern-date-col > *:not(.badge),
html[data-theme="dark"] .modern-table tbody td.modern-id-col > * {
    color: #f1f5f9 !important;
    opacity: 1 !important;
}
html[data-theme="dark"] .modern-table .modern-value-col.positive,
html[data-theme="dark"] .modern-value-col.positive {
    color: #4ade80 !important;
}
html[data-theme="dark"] .modern-table .modern-value-col.negative,
html[data-theme="dark"] .modern-value-col.negative {
    color: #fca5a5 !important;
}
html[data-theme="dark"] .modern-table tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* ==========================================================================
   ★ COBERTURA ABRANGENTE — TODAS AS TABELAS DO PROJETO
   --------------------------------------------------------------------------
   Modulos cobertos:
     /plano-contas      .balancete-table + .conta-sintetica + .conta-analitica
     /recorrencias      .table .table-hover
     /relatorios/*      .table .table-fixed .tabela-livre + variantes Bootstrap
     /dre/visualizar    .dre-table
     Demais reports     .table .table-striped + .table-dark + .table-light
   ========================================================================== */

/* ---------- BOOTSTRAP .table (padrao) - container externo + corpo ---------- */
html[data-theme="dark"] body .table,
html[data-theme="dark"] body table.table,
html[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: #f1f5f9;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.025);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
    --bs-table-border-color: var(--border);
    background: transparent !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] body .table thead,
html[data-theme="dark"] body .table thead tr,
html[data-theme="dark"] body .table thead th,
html[data-theme="dark"] .table thead th {
    background: var(--bg-card-2) !important;
    color: var(--text-soft) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] body .table tbody,
html[data-theme="dark"] body .table tbody tr,
html[data-theme="dark"] body .table tbody td,
html[data-theme="dark"] body .table tbody th,
html[data-theme="dark"] .table tbody td,
html[data-theme="dark"] .table tbody th {
    background: transparent !important;
    color: #f1f5f9 !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] body .table tbody tr:hover td,
html[data-theme="dark"] body .table tbody tr:hover,
html[data-theme="dark"] .table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Variantes Bootstrap .table-* */
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table-light th,
html[data-theme="dark"] .table-light td,
html[data-theme="dark"] thead.table-light,
html[data-theme="dark"] thead.table-light th {
    background: var(--bg-card-2) !important;
    color: var(--text-soft) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .table-dark,
html[data-theme="dark"] thead.table-dark,
html[data-theme="dark"] tfoot.table-dark,
html[data-theme="dark"] .table-dark th,
html[data-theme="dark"] .table-dark td {
    background: #0a0e1a !important;
    color: #f1f5f9 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
html[data-theme="dark"] tr.table-danger,
html[data-theme="dark"] tr.table-danger td {
    background: rgba(239, 68, 68, 0.18) !important;
    color: #fca5a5 !important;
}
html[data-theme="dark"] tr.table-success,
html[data-theme="dark"] tr.table-success td {
    background: rgba(16, 185, 129, 0.18) !important;
    color: #6ee7b7 !important;
}
html[data-theme="dark"] tr.table-warning,
html[data-theme="dark"] tr.table-warning td {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #fcd34d !important;
}
html[data-theme="dark"] tr.table-info,
html[data-theme="dark"] tr.table-info td {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #93c5fd !important;
}

/* tfoot Bootstrap */
html[data-theme="dark"] .table tfoot,
html[data-theme="dark"] .table tfoot tr,
html[data-theme="dark"] .table tfoot th,
html[data-theme="dark"] .table tfoot td {
    background: var(--bg-card-2) !important;
    color: #f1f5f9 !important;
    border-color: var(--border) !important;
}

/* table-responsive (wrapper Bootstrap) - tipico em relatorios */
html[data-theme="dark"] .table-responsive {
    background: transparent !important;
    color: var(--text);
}

/* ---------- .tabela-livre (relatorios/*) ---------- */
html[data-theme="dark"] body .table.tabela-livre,
html[data-theme="dark"] .table.tabela-livre {
    background: transparent !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .table.tabela-livre tbody td,
html[data-theme="dark"] .table.tabela-livre tbody th {
    background: transparent !important;
    color: #f1f5f9 !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .table.tabela-livre tbody tr:hover td {
    background: rgba(255, 255, 255, 0.04) !important;
}
html[data-theme="dark"] .table.tabela-livre.table-striped tbody tr:nth-of-type(odd) td {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* ---------- .table-fixed (relatorios/saldos) ---------- */
html[data-theme="dark"] .table-fixed,
html[data-theme="dark"] .table.table-fixed {
    background: transparent !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .table.table-fixed tbody td {
    background: transparent !important;
    color: #f1f5f9 !important;
}

/* ---------- table-scroll-container (relatorio_lancamentos) ---------- */
html[data-theme="dark"] .table-scroll-container {
    background: var(--bg-card) !important;
    color: var(--text);
}

/* ==========================================================================
   ★ PLANO DE CONTAS — .balancete-table (inline CSS no template)
   --------------------------------------------------------------------------
   plano_contas.html linhas 6-129 tem <style> inline com cores HARDCODED:
     .balancete-container -> bg #fff
     .balancete-table thead th -> bg #f5f5f5, color #000
     .balancete-table tbody tr:hover -> bg #fafafa
     .conta-sintetica td -> bg #e8e8e8 (cinza claro - vira invisivel no dark)
     .balancete-header (h2) -> color #000
   ========================================================================== */
html[data-theme="dark"] body .balancete-container,
html[data-theme="dark"] .balancete-container {
    background: var(--bg-card) !important;
    color: var(--text);
}
html[data-theme="dark"] body .balancete-header,
html[data-theme="dark"] .balancete-header {
    background: transparent !important;
    border-bottom-color: var(--border-strong) !important;
}
html[data-theme="dark"] body .balancete-header h2,
html[data-theme="dark"] .balancete-header h2 {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] body .balancete-table,
html[data-theme="dark"] .balancete-table {
    background: transparent !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] body .balancete-table thead,
html[data-theme="dark"] body .balancete-table thead tr,
html[data-theme="dark"] body .balancete-table thead th,
html[data-theme="dark"] .balancete-table thead th {
    background: var(--bg-card-2) !important;
    color: var(--text-soft) !important;
    border-top-color: var(--border-strong) !important;
    border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] body .balancete-table tbody tr,
html[data-theme="dark"] body .balancete-table tbody td,
html[data-theme="dark"] .balancete-table tbody tr,
html[data-theme="dark"] .balancete-table tbody td {
    background: transparent !important;
    color: #f1f5f9 !important;
    border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] body .balancete-table tbody tr:hover,
html[data-theme="dark"] body .balancete-table tbody tr:hover td,
html[data-theme="dark"] .balancete-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Linhas SINTETICAS (categorias grupo - Receitas, Despesas etc) ----------
   Tinham bg cinza-claro (#e8e8e8) que invisibiliza no dark. Agora wash roxo
   sutil para destacar visualmente que e' linha de cabecalho/grupo. */
html[data-theme="dark"] body tr.conta-sintetica,
html[data-theme="dark"] body tr.conta-sintetica td,
html[data-theme="dark"] tr.conta-sintetica,
html[data-theme="dark"] tr.conta-sintetica td {
    background: rgba(122, 162, 247, 0.10) !important;
    color: #f1f5f9 !important;
    font-weight: 700 !important;
}
html[data-theme="dark"] body tr.conta-sintetica:hover td,
html[data-theme="dark"] tr.conta-sintetica:hover td {
    background: rgba(122, 162, 247, 0.16) !important;
}

/* Linhas ANALITICAS - texto branco normal */
html[data-theme="dark"] body tr.conta-analitica,
html[data-theme="dark"] body tr.conta-analitica td,
html[data-theme="dark"] tr.conta-analitica,
html[data-theme="dark"] tr.conta-analitica td {
    background: transparent !important;
    color: #f1f5f9 !important;
}

/* .tipo-conta (span "(entrada)" / "(saida)" pequeno do lado do nome) */
html[data-theme="dark"] .tipo-conta {
    color: var(--text-soft) !important;
}

/* total-row do balancete */
html[data-theme="dark"] body .total-row,
html[data-theme="dark"] body .total-row td,
html[data-theme="dark"] .total-row,
html[data-theme="dark"] .total-row td {
    background: var(--bg-card-2) !important;
    color: #f1f5f9 !important;
    border-top-color: var(--border-strong) !important;
    border-bottom-color: var(--border-strong) !important;
}

/* ==========================================================================
   ★ DRE — .dre-table
   ========================================================================== */
html[data-theme="dark"] body .dre-table,
html[data-theme="dark"] .dre-table {
    background: transparent !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] body .dre-table thead,
html[data-theme="dark"] body .dre-table thead tr,
html[data-theme="dark"] body .dre-table thead th,
html[data-theme="dark"] .dre-table thead th {
    background: var(--bg-card-2) !important;
    color: var(--text-soft) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] body .dre-table tbody tr,
html[data-theme="dark"] body .dre-table tbody td,
html[data-theme="dark"] .dre-table tbody tr,
html[data-theme="dark"] .dre-table tbody td {
    background: transparent !important;
    color: #f1f5f9 !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] body .dre-table tbody tr:hover td,
html[data-theme="dark"] .dre-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.04) !important;
}
html[data-theme="dark"] body .dre-table tfoot,
html[data-theme="dark"] body .dre-table tfoot td,
html[data-theme="dark"] .dre-table tfoot td {
    background: var(--bg-card-2) !important;
    color: #f1f5f9 !important;
}

/* ★ DRE INLINE STYLES — dre_visualizar.html linhas 6-175 tem <style> inline
   com cores HARDCODED que nao eram cobertas pelas regras acima.
   Aqui sobrescrevemos cada uma. */

/* .dre-container (envoltorio da tabela) era #fff */
html[data-theme="dark"] body .dre-container,
html[data-theme="dark"] .dre-container {
    background: var(--bg-card) !important;
    color: #f1f5f9 !important;
}

/* Hover na linha era #f9f9f9 !important inline - precisa de !important + especificidade */
html[data-theme="dark"] body .dre-table tbody tr:hover,
html[data-theme="dark"] body .dre-table tbody tr:hover td,
html[data-theme="dark"] .dre-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Linha SUBTOTAL (RECEITA LIQUIDA, etc.) era azul-claro #f0f8ff */
html[data-theme="dark"] body .dre-table tr.tipo-subtotal,
html[data-theme="dark"] body .dre-table tr.tipo-subtotal td,
html[data-theme="dark"] .dre-table .tipo-subtotal td,
html[data-theme="dark"] .tipo-subtotal td {
    background: rgba(122, 162, 247, 0.10) !important;
    color: #f1f5f9 !important;
    border-top-color: rgba(122, 162, 247, 0.5) !important;
    border-bottom-color: rgba(122, 162, 247, 0.5) !important;
}

/* Linha TOTAL (RESULTADO LIQUIDO, etc.) era cinza-claro #f5f5f5 */
html[data-theme="dark"] body .dre-table tr.tipo-total,
html[data-theme="dark"] body .dre-table tr.tipo-total td,
html[data-theme="dark"] .dre-table .tipo-total td,
html[data-theme="dark"] .tipo-total td {
    background: var(--bg-card-2) !important;
    color: #f1f5f9 !important;
    border-top-color: var(--border-strong) !important;
    border-bottom-color: var(--border-strong) !important;
}

/* Colunas estruturais que tinham color: #888 / #aaa */
html[data-theme="dark"] td.dre-codigo {
    color: var(--text-soft) !important;
}
html[data-theme="dark"] td.dre-operacao {
    color: var(--text-soft) !important;
}
html[data-theme="dark"] td.dre-descricao {
    color: #f1f5f9 !important;
}

/* Valor neutro era color: #000 (invisivel no dark) */
html[data-theme="dark"] .valor-neutro {
    color: #f1f5f9 !important;
}
/* Reforco dos valores positivos/negativos (DRE) */
html[data-theme="dark"] .valor-positivo,
html[data-theme="dark"] .dre-table .valor-positivo {
    color: #4ade80 !important;
}
html[data-theme="dark"] .valor-negativo,
html[data-theme="dark"] .dre-table .valor-negativo {
    color: #fca5a5 !important;
}

/* Mensagem "sem configuracao" */
html[data-theme="dark"] .sem-configuracao {
    color: var(--text-soft) !important;
}
html[data-theme="dark"] .sem-configuracao i {
    color: var(--border-strong) !important;
}

/* Modifiers de linha do DRE (linha-negrito, linha-acima, linha-abaixo) */
html[data-theme="dark"] tr.linha-negrito td {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] tr.linha-acima td {
    border-top-color: var(--border-strong) !important;
}
html[data-theme="dark"] tr.linha-abaixo td {
    border-bottom-color: var(--border-strong) !important;
}

/* ==========================================================================
   ★ COLUNA STICKY DE ACOES — style.css linhas 1290-1326
   --------------------------------------------------------------------------
   .table:not(.tabela-livre) td:last-child / th:last-child tem
   position: sticky + background: #fff !important. Sticky precisa de bg
   solido pra nao ficar transparente sobre o conteudo. No dark mode usamos
   bg-card escuro com mesma logica.
   ========================================================================== */
html[data-theme="dark"] body .table:not(.tabela-livre) th:last-child,
html[data-theme="dark"] body .table:not(.tabela-livre) td:last-child,
html[data-theme="dark"] .table:not(.tabela-livre) th:last-child,
html[data-theme="dark"] .table:not(.tabela-livre) td:last-child {
    background: var(--bg-card) !important;
    color: #f1f5f9 !important;
    border-left-color: var(--border-strong) !important;
}
html[data-theme="dark"] body .table:not(.tabela-livre) tbody tr:nth-child(odd) td:last-child,
html[data-theme="dark"] .table:not(.tabela-livre) tbody tr:nth-child(odd) td:last-child {
    background: var(--bg-card) !important;
}
html[data-theme="dark"] body .table:not(.tabela-livre) tbody tr:nth-child(even) td:last-child,
html[data-theme="dark"] .table:not(.tabela-livre) tbody tr:nth-child(even) td:last-child {
    background: var(--bg-card-2) !important;
}
html[data-theme="dark"] body .table:not(.tabela-livre) tbody tr:hover td:last-child,
html[data-theme="dark"] .table:not(.tabela-livre) tbody tr:hover td:last-child,
html[data-theme="dark"] .table.table-hover tbody tr:hover td:last-child {
    background: rgba(255, 255, 255, 0.06) !important;
}
/* IDs especificos (tabela-compras, tabelaLancamentos) */
html[data-theme="dark"] #tabela-compras th:last-child,
html[data-theme="dark"] #tabela-compras td:last-child,
html[data-theme="dark"] #tabelaLancamentos th:last-child,
html[data-theme="dark"] #tabelaLancamentos td:last-child {
    background: var(--bg-card) !important;
    border-left-color: var(--border-strong) !important;
    color: #f1f5f9 !important;
}

/* Scrollbar do .table-responsive */
html[data-theme="dark"] .table-responsive::-webkit-scrollbar-track {
    background: var(--bg-card-2) !important;
}
html[data-theme="dark"] .table-responsive::-webkit-scrollbar-thumb {
    background: var(--border-strong) !important;
}
html[data-theme="dark"] .table-responsive::-webkit-scrollbar-thumb:hover {
    background: #475569 !important;
}

/* style.css:3167 forca border-responsive com #cfe8d6 (verde claro) */
html[data-theme="dark"] body .table-responsive,
html[data-theme="dark"] .table-responsive {
    border-color: var(--border) !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* ==========================================================================
   ★ BOTOES OUTLINED — sobrescrever fundo branco quando dentro de coluna sticky
   --------------------------------------------------------------------------
   Bootstrap .btn-outline-* tem background: transparent. Como pais (a coluna
   sticky) tem bg branco no light/escuro no dark, o botao pega transparencia
   correta automaticamente. Mas para garantir contraste alto dos icones,
   forcamos cor de texto bem clara.
   ========================================================================== */
html[data-theme="dark"] .btn-outline-secondary {
    color: #cbd5e1 !important;
    border-color: var(--border-strong) !important;
    background: transparent !important;
}
html[data-theme="dark"] .btn-outline-secondary:hover {
    background: var(--bg-card-2) !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}
html[data-theme="dark"] .btn-outline-primary {
    color: #a5b8f9 !important;
    border-color: rgba(165, 184, 249, 0.4) !important;
    background: transparent !important;
}
html[data-theme="dark"] .btn-outline-primary:hover {
    background: rgba(99, 102, 241, 0.18) !important;
    color: #c4d0ff !important;
    border-color: rgba(165, 184, 249, 0.6) !important;
}
html[data-theme="dark"] .btn-outline-success {
    color: #86efac !important;
    border-color: rgba(134, 239, 172, 0.4) !important;
    background: transparent !important;
}
html[data-theme="dark"] .btn-outline-success:hover {
    background: rgba(74, 222, 128, 0.18) !important;
    color: #bbf7d0 !important;
    border-color: rgba(134, 239, 172, 0.6) !important;
}
html[data-theme="dark"] .btn-outline-danger {
    color: #fca5a5 !important;
    border-color: rgba(252, 165, 165, 0.4) !important;
    background: transparent !important;
}
html[data-theme="dark"] .btn-outline-danger:hover {
    background: rgba(248, 113, 113, 0.18) !important;
    color: #fecaca !important;
    border-color: rgba(252, 165, 165, 0.6) !important;
}
html[data-theme="dark"] .btn-outline-warning {
    color: #fcd34d !important;
    border-color: rgba(252, 211, 77, 0.4) !important;
    background: transparent !important;
}
html[data-theme="dark"] .btn-outline-warning:hover {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #fde68a !important;
    border-color: rgba(252, 211, 77, 0.6) !important;
}
html[data-theme="dark"] .btn-outline-info {
    color: #7dd3fc !important;
    border-color: rgba(125, 211, 252, 0.4) !important;
    background: transparent !important;
}
html[data-theme="dark"] .btn-outline-info:hover {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #bae6fd !important;
}
html[data-theme="dark"] .btn-outline-light {
    color: #f1f5f9 !important;
    border-color: var(--border-strong) !important;
    background: transparent !important;
}
html[data-theme="dark"] .btn-outline-light:hover {
    background: var(--bg-card-2) !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .btn-outline-dark {
    color: #cbd5e1 !important;
    border-color: var(--border-strong) !important;
    background: transparent !important;
}

/* btn-group dentro de coluna sticky */
html[data-theme="dark"] td:last-child .btn-group .btn {
    background: transparent !important;
}

/* ==========================================================================
   ★ RECORRENCIAS — recorrencias.html linhas 5-36
   --------------------------------------------------------------------------
   Template tem <style> inline com classes HARDCODED:
     .recorrencias-card .table thead th -> bg #f8fafc + color #64748b
     .recorrencias-card .table tbody tr:hover -> bg #f8fafc
     .recorrencias-card .table tbody td -> border-color #f1f5f9
     .rec-totais .card-tot -> bg #fff + border #e2e8f0
     .rec-totais .card-tot .label -> color #64748b
     .rec-totais .card-tot .subtitulo -> color #94a3b8
     .rec-totais .card-tot.entrada/saida/saldo -> cores fortes
   ========================================================================== */

/* Cards de resumo (Entradas/Saidas/Saldo recorrente) */
html[data-theme="dark"] body .rec-totais .card-tot,
html[data-theme="dark"] .rec-totais .card-tot {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
}
html[data-theme="dark"] .rec-totais .card-tot .label {
    color: var(--text-soft) !important;
}
html[data-theme="dark"] .rec-totais .card-tot .subtitulo {
    color: var(--text-muted) !important;
}
/* Card ENTRADA - verde */
html[data-theme="dark"] .rec-totais .card-tot.entrada .label {
    color: #6ee7b7 !important;
}
html[data-theme="dark"] .rec-totais .card-tot.entrada .valor {
    color: #4ade80 !important;
}
html[data-theme="dark"] .rec-totais .card-tot.entrada {
    border-left-color: #10b981 !important;
}
/* Card SAIDA - vermelho */
html[data-theme="dark"] .rec-totais .card-tot.saida .label {
    color: #fca5a5 !important;
}
html[data-theme="dark"] .rec-totais .card-tot.saida .valor {
    color: #fca5a5 !important;
}
html[data-theme="dark"] .rec-totais .card-tot.saida {
    border-left-color: #ef4444 !important;
}
/* Card SALDO - azul */
html[data-theme="dark"] .rec-totais .card-tot.saldo .label {
    color: #a5b8f9 !important;
}
html[data-theme="dark"] .rec-totais .card-tot.saldo .valor.positivo {
    color: #4ade80 !important;
}
html[data-theme="dark"] .rec-totais .card-tot.saldo .valor.negativo {
    color: #fca5a5 !important;
}
html[data-theme="dark"] .rec-totais .card-tot.saldo {
    border-left-color: #3b82f6 !important;
}

/* Tabela de recorrencias - thead */
html[data-theme="dark"] body .recorrencias-card .table thead th,
html[data-theme="dark"] .recorrencias-card .table thead th {
    background: var(--bg-card-2) !important;
    color: var(--text-soft) !important;
    border-bottom-color: var(--border) !important;
}
/* Recorrencias - tbody hover */
html[data-theme="dark"] body .recorrencias-card .table tbody tr:hover,
html[data-theme="dark"] .recorrencias-card .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}
html[data-theme="dark"] .recorrencias-card .table tbody td {
    border-color: var(--border) !important;
}

/* Titulo da pagina Recorrencias (h4 inline #1e293b) */
html[data-theme="dark"] h4[style*="color:#1e293b"],
html[data-theme="dark"] h4[style*="color: #1e293b"] {
    color: #f1f5f9 !important;
}

/* ==========================================================================
   ★ CONCILIACAO BANCARIA — conciliacao_painel.html linhas 7-162
   --------------------------------------------------------------------------
   Template tem <style> inline com cores HARDCODED em:
     .conc-painel .header-resumo  -> bg #fff
     .conc-painel .progresso-bar-wrap -> bg #e5e7eb (cinza claro)
     .conc-painel .saldo-item small/strong -> color #64748b / #1e293b
     .conc-painel .titulo-arquivo -> color #1e293b
     .conc-painel .filtro-chips   -> bg #f8fafc
     .conc-painel .filtro-chip    -> bg #fff + color #475569 + border #e2e8f0
     .conc-painel .filtro-painel  -> bg #f8fafc + border #e2e8f0
     .conc-painel tr.row-selected -> bg #eef6ff
     .conc-painel .match-chip.alta/media -> verde/amarelo claro
     .conc-painel .match-chip-box.alta/media -> idem com border
     .conc-painel .table thead th -> color #64748b
   ========================================================================== */

/* HEADER RESUMO (card de progresso + saldos) - era #fff */
html[data-theme="dark"] body .conc-painel .header-resumo,
html[data-theme="dark"] .conc-painel .header-resumo {
    background: var(--bg-card) !important;
    color: #f1f5f9 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
    border: 1px solid var(--border);
}

/* Progresso bar - track cinza claro */
html[data-theme="dark"] body .conc-painel .progresso-bar-wrap,
html[data-theme="dark"] .conc-painel .progresso-bar-wrap {
    background: var(--bg-card-2) !important;
}

/* Saldos: labels e valores */
html[data-theme="dark"] .conc-painel .saldo-item small {
    color: var(--text-soft) !important;
}
html[data-theme="dark"] .conc-painel .saldo-item strong {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .conc-painel .saldo-item.diff-ok strong {
    color: #4ade80 !important;
}
html[data-theme="dark"] .conc-painel .saldo-item.diff-warn strong {
    color: #fca5a5 !important;
}

/* Titulo arquivo - "sua-contabil-..." era cinza-escuro */
html[data-theme="dark"] .conc-painel .titulo-arquivo {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .conc-painel .titulo-arquivo small {
    color: var(--text-soft) !important;
}

/* FILTRO CHIPS (tabs Todos/Pendentes/Conciliadas/Ignoradas) ----------
   Wrapper era bg #f8fafc */
html[data-theme="dark"] body .conc-painel .filtro-chips,
html[data-theme="dark"] .conc-painel .filtro-chips {
    background: var(--bg-card-2) !important;
    border-bottom: 1px solid var(--border);
}
/* Chip individual - era bg #fff + texto #475569 + border #e2e8f0 */
html[data-theme="dark"] body .conc-painel .filtro-chip,
html[data-theme="dark"] .conc-painel .filtro-chip {
    background: var(--bg-input) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-strong) !important;
}
html[data-theme="dark"] .conc-painel .filtro-chip:hover {
    background: var(--bg-card) !important;
    color: #f1f5f9 !important;
}
/* Chip ATIVO - mantem roxo, mas ajusta para dark */
html[data-theme="dark"] body .conc-painel .filtro-chip.ativo,
html[data-theme="dark"] .conc-painel .filtro-chip.ativo {
    background: #6366f1 !important;
    color: #ffffff !important;
    border-color: #6366f1 !important;
}

/* FILTRO PAINEL (faixa de busca abaixo dos chips) - era bg #f8fafc */
html[data-theme="dark"] body .conc-painel .filtro-painel,
html[data-theme="dark"] .conc-painel .filtro-painel {
    background: var(--bg-card-2) !important;
    border-bottom-color: var(--border) !important;
}

/* Painel periodo controls (Ajustar periodo) - usa .bg-light */
html[data-theme="dark"] body #painel-periodo-controls,
html[data-theme="dark"] #painel-periodo-controls.bg-light {
    background: var(--bg-card-2) !important;
    color: var(--text);
    border-bottom-color: var(--border) !important;
}

/* Linha selecionada - era #eef6ff (azul muito claro) */
html[data-theme="dark"] .conc-painel tr.row-selected {
    background-color: rgba(99, 102, 241, 0.15) !important;
}

/* THEAD da tabela conc-painel - era color #64748b */
html[data-theme="dark"] .conc-painel .table thead th {
    color: var(--text-soft) !important;
    background: var(--bg-card-2) !important;
}

/* MATCH-CHIP (verde/amarelo pequeno na descricao) */
html[data-theme="dark"] .conc-painel .match-chip.alta {
    background: rgba(74, 222, 128, 0.18) !important;
    color: #86efac !important;
    border-color: rgba(74, 222, 128, 0.45) !important;
}
html[data-theme="dark"] .conc-painel .match-chip.media {
    background: rgba(252, 211, 77, 0.18) !important;
    color: #fde68a !important;
    border-color: rgba(252, 211, 77, 0.45) !important;
}

/* MATCH-CHIP-BOX (box rico verde "Match 100% - Conciliar este par" / amarelo "Match 70%") */
html[data-theme="dark"] body .conc-painel .match-chip-box.alta,
html[data-theme="dark"] .conc-painel .match-chip-box.alta {
    background: rgba(74, 222, 128, 0.12) !important;
    color: #86efac !important;
    border-color: rgba(74, 222, 128, 0.45) !important;
}
html[data-theme="dark"] body .conc-painel .match-chip-box.media,
html[data-theme="dark"] .conc-painel .match-chip-box.media {
    background: rgba(252, 211, 77, 0.12) !important;
    color: #fde68a !important;
    border-color: rgba(252, 211, 77, 0.45) !important;
}
/* Botoes de acao dentro do match-chip-box (Conciliar este par) */
html[data-theme="dark"] .conc-painel .match-chip-acao {
    background: #16a34a !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .conc-painel .match-chip-acao:hover {
    background: #15803d !important;
}

/* Card-painel + card-header bg-white na conciliacao */
html[data-theme="dark"] body .conc-painel .card.card-painel,
html[data-theme="dark"] body .conc-painel .card-painel {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] body .conc-painel .card-header.bg-white {
    background: linear-gradient(135deg, #463a82 0%, #553e7d 100%) !important;
    color: #ffffff !important;
    border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] body .conc-painel .card-header.bg-white h6,
html[data-theme="dark"] body .conc-painel .card-header.bg-white .text-primary,
html[data-theme="dark"] body .conc-painel .card-header.bg-white .text-success {
    color: #ffffff !important;
}

/* Card body interno da conciliacao - garantir transparente */
html[data-theme="dark"] body .conc-painel .card-body {
    background: var(--bg-card) !important;
    color: var(--text);
}

/* ---------- pf-table ---------- */
html[data-theme="dark"] .pf-table {
    background-color: transparent !important;
    color: var(--text-strong) !important;
}
html[data-theme="dark"] .pf-table thead,
html[data-theme="dark"] .pf-table thead tr,
html[data-theme="dark"] .pf-table thead th {
    background-color: var(--bg-card-2) !important;
    color: var(--text-soft) !important;
    border-color: var(--border) !important;
    border-bottom-color: var(--border-strong) !important;
}
html[data-theme="dark"] .pf-table tbody td {
    color: var(--text-strong) !important;
    background-color: transparent !important;
    border-color: var(--border) !important;
    border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .pf-table tbody tr {
    border-color: var(--border) !important;
}
html[data-theme="dark"] .pf-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] .pf-table tbody tr:hover td {
    background-color: transparent !important;
}
html[data-theme="dark"] .pf-table tbody tr:has(.pf-money-pos) > td {
    background-color: var(--tint-in) !important;
}
html[data-theme="dark"] .pf-table tbody tr:has(.pf-money-pos):hover > td {
    background-color: var(--tint-in-strong) !important;
}
html[data-theme="dark"] .pf-table tbody tr:has(.pf-money-neg) > td {
    background-color: var(--tint-out) !important;
}
html[data-theme="dark"] .pf-table tbody tr:has(.pf-money-neg):hover > td {
    background-color: var(--tint-out-strong) !important;
}
html[data-theme="dark"] .pf-table tbody td span,
html[data-theme="dark"] .pf-table tbody td a {
    color: inherit !important;
}

/* ---------- pf-badge variantes (NOVO v5.6) ----------
   .pf-badge-success/danger/warning/info tinham bg pastel + texto escuro
   (#1B5E20 / #B71C1C etc) que somia no dark. Trocamos por wash translucido
   + texto claro semantico. */
html[data-theme="dark"] .pf-badge-muted {
    background-color: var(--bg-card-2) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .pf-badge-success {
    background-color: rgba(16,185,129,0.18) !important;
    color: #6ee7b7 !important;
}
html[data-theme="dark"] .pf-badge-danger {
    background-color: rgba(239,68,68,0.18) !important;
    color: #fca5a5 !important;
}
html[data-theme="dark"] .pf-badge-warning {
    background-color: rgba(245,158,11,0.18) !important;
    color: #fcd34d !important;
}
html[data-theme="dark"] .pf-badge-info {
    background-color: rgba(59,130,246,0.18) !important;
    color: #93c5fd !important;
}
html[data-theme="dark"] .pf-btn-outline {
    background-color: transparent !important;
    color: var(--text-strong) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .pf-btn-outline:hover {
    background-color: var(--bg-card-2) !important;
    color: var(--text-strong) !important;
}

/* ---------- modern-pagination-btn ---------- */
html[data-theme="dark"] .modern-pagination-btn:not(.active):not(.danger):not(.success) {
    background-color: var(--bg-input) !important;
    color: var(--text) !important;
    border-color: var(--border-strong) !important;
}

/* ---------- modern-action-btn - cores semanticas solidas ----------
   style.css linhas 5677-5710 define versoes pastel claras (perfeitas para
   light mode mas com pouco contraste no dark). Aqui aplicamos cores
   SOLIDAS saturadas para o dark com icone branco. */
html[data-theme="dark"] .modern-action-btn:not(.delete):not(.edit):not(.danger):not(.success):not(.warning):not(.check):not(.times) {
    background-color: var(--bg-input) !important;
    color: var(--text) !important;
}
/* .check (Marcar como Realizado) - VERDE solido pedido pelo user */
html[data-theme="dark"] body .modern-action-btn.check,
html[data-theme="dark"] .modern-action-btn.check {
    background: #16a34a !important;
    background-color: #16a34a !important;
    color: #ffffff !important;
}
html[data-theme="dark"] body .modern-action-btn.check:hover,
html[data-theme="dark"] .modern-action-btn.check:hover {
    background: #15803d !important;
    background-color: #15803d !important;
    color: #ffffff !important;
}
/* .times (Marcar como NAO realizado / Estornar) - AMBAR/AMARELO solido */
html[data-theme="dark"] body .modern-action-btn.times,
html[data-theme="dark"] .modern-action-btn.times {
    background: #d97706 !important;
    background-color: #d97706 !important;
    color: #ffffff !important;
}
html[data-theme="dark"] body .modern-action-btn.times:hover,
html[data-theme="dark"] .modern-action-btn.times:hover {
    background: #b45309 !important;
    background-color: #b45309 !important;
    color: #ffffff !important;
}
/* .edit - AZUL solido */
html[data-theme="dark"] body .modern-action-btn.edit,
html[data-theme="dark"] .modern-action-btn.edit {
    background: #2563eb !important;
    background-color: #2563eb !important;
    color: #ffffff !important;
}
html[data-theme="dark"] body .modern-action-btn.edit:hover,
html[data-theme="dark"] .modern-action-btn.edit:hover {
    background: #1d4ed8 !important;
    background-color: #1d4ed8 !important;
    color: #ffffff !important;
}
/* .delete - VERMELHO solido */
html[data-theme="dark"] body .modern-action-btn.delete,
html[data-theme="dark"] .modern-action-btn.delete,
html[data-theme="dark"] body .modern-action-btn.danger,
html[data-theme="dark"] .modern-action-btn.danger {
    background: #dc2626 !important;
    background-color: #dc2626 !important;
    color: #ffffff !important;
}
html[data-theme="dark"] body .modern-action-btn.delete:hover,
html[data-theme="dark"] .modern-action-btn.delete:hover,
html[data-theme="dark"] body .modern-action-btn.danger:hover,
html[data-theme="dark"] .modern-action-btn.danger:hover {
    background: #b91c1c !important;
    background-color: #b91c1c !important;
    color: #ffffff !important;
}
/* .success generico (alias de .check) */
html[data-theme="dark"] body .modern-action-btn.success,
html[data-theme="dark"] .modern-action-btn.success {
    background: #16a34a !important;
    color: #ffffff !important;
}
html[data-theme="dark"] body .modern-action-btn.warning,
html[data-theme="dark"] .modern-action-btn.warning {
    background: #d97706 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   ★ TOTALIZADORES — .item-label / .item-value / .group-title
   --------------------------------------------------------------------------
   layout-compacto.css linhas 416-443 forca:
     .item-label -> color #6c757d (cinza escuro = invisivel no dark)
     .entrada-*  -> color #28a745 (verde light)
     .saida-*    -> color #dc3545 (vermelho light)
   No dark precisamos: labels claras + valores em cores brilhantes.
   ========================================================================== */

/* Labels "Realizada:", "A vencer:", "Vencida:" - eram #6c757d cinza escuro */
html[data-theme="dark"] body .item-label,
html[data-theme="dark"] .item-label {
    color: #cbd5e1 !important;
    font-weight: 500 !important;
}

/* Valor base (sem classe semantica especifica) */
html[data-theme="dark"] body .item-value,
html[data-theme="dark"] .item-value {
    color: #f1f5f9 !important;
}

/* Variantes coloridas - reforco com cores BEM mais claras pro dark */
html[data-theme="dark"] body .item-value.entrada-total,
html[data-theme="dark"] body .item-value.entrada-realizada,
html[data-theme="dark"] body .item-value.entrada-vencer,
html[data-theme="dark"] body .item-value.entrada-vencida,
html[data-theme="dark"] body .item-value.entrada-agendada,
html[data-theme="dark"] .entrada-total,
html[data-theme="dark"] .entrada-realizada,
html[data-theme="dark"] .entrada-vencer,
html[data-theme="dark"] .entrada-vencida,
html[data-theme="dark"] .entrada-agendada {
    color: #4ade80 !important;
}

html[data-theme="dark"] body .item-value.saida-total,
html[data-theme="dark"] body .item-value.saida-realizada,
html[data-theme="dark"] body .item-value.saida-vencer,
html[data-theme="dark"] body .item-value.saida-vencida,
html[data-theme="dark"] body .item-value.saida-agendada,
html[data-theme="dark"] .saida-total,
html[data-theme="dark"] .saida-realizada,
html[data-theme="dark"] .saida-vencer,
html[data-theme="dark"] .saida-vencida,
html[data-theme="dark"] .saida-agendada {
    color: #fca5a5 !important;
}

/* Variantes "vencer" / "vencida" - amarelo/laranja pra avisar de prazo */
html[data-theme="dark"] body .item-value.entrada-vencer,
html[data-theme="dark"] .entrada-vencer {
    color: #fcd34d !important; /* amarelo - entrada a receber */
}
html[data-theme="dark"] body .item-value.entrada-vencida,
html[data-theme="dark"] .entrada-vencida {
    color: #fb923c !important; /* laranja - atrasada */
}
html[data-theme="dark"] body .item-value.saida-vencer,
html[data-theme="dark"] .saida-vencer {
    color: #fcd34d !important;
}
html[data-theme="dark"] body .item-value.saida-vencida,
html[data-theme="dark"] .saida-vencida {
    color: #fb923c !important;
}

/* group-title (titulos dos blocos ENTRADAS/SAIDAS) */
html[data-theme="dark"] body .group-title,
html[data-theme="dark"] .group-title {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] body .group-title[style*="color: #495057"],
html[data-theme="dark"] body .group-title[style*="color:#495057"] {
    color: #cbd5e1 !important;
}

/* totals-container / totals-section / totals-detail wrappers */
html[data-theme="dark"] .totals-container,
html[data-theme="dark"] .totals-section,
html[data-theme="dark"] .totals-detail {
    color: var(--text);
}

/* ---------- modern-status-badge (variantes coloridas - NOVO v5.6) ----------
   PAGO / PENDENTE / VENCIDO nas tabelas de Lancamentos / Vendas / Compras. */
html[data-theme="dark"] .modern-status-badge:not(.completed):not(.pending):not(.failed):not(.warning):not(.success):not(.danger):not(.info):not(.overdue) {
    background-color: var(--bg-card-2) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .modern-status-badge.completed,
html[data-theme="dark"] .modern-status-badge.success {
    background-color: rgba(16,185,129,0.18) !important;
    color: #6ee7b7 !important;
}
html[data-theme="dark"] .modern-status-badge.pending,
html[data-theme="dark"] .modern-status-badge.warning {
    background-color: rgba(245,158,11,0.18) !important;
    color: #fcd34d !important;
}
html[data-theme="dark"] .modern-status-badge.overdue,
html[data-theme="dark"] .modern-status-badge.failed,
html[data-theme="dark"] .modern-status-badge.danger {
    background-color: rgba(239,68,68,0.18) !important;
    color: #fca5a5 !important;
}
html[data-theme="dark"] .modern-status-badge.info {
    background-color: rgba(59,130,246,0.18) !important;
    color: #93c5fd !important;
}

/* ---------- modern-batch-actions ---------- */
html[data-theme="dark"] .modern-batch-actions,
html[data-theme="dark"] .modern-batch-info,
html[data-theme="dark"] .modern-batch-buttons {
    background-color: var(--bg-card) !important;
    color: var(--text);
    border-color: var(--border) !important;
}

/* ---------- modern-totals ----------
   planifin-theme.css:1606 forca .modern-total-label color: var(--pf-gray-400)
   planifin-theme.css:1614 forca .modern-total-value color: var(--pf-gray-800)
   Esses cinzas ficam INVISIVEIS no dark. Adicionando !important + cor
   hardcoded com seletor mais especifico para vencer. */
html[data-theme="dark"] body .modern-totals,
html[data-theme="dark"] .modern-totals { color: #f1f5f9 !important; }
html[data-theme="dark"] body .modern-total-label,
html[data-theme="dark"] .modern-total-label {
    color: #cbd5e1 !important;
}
html[data-theme="dark"] body .modern-total-value,
html[data-theme="dark"] .modern-total-value {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] body .modern-total-value.positive,
html[data-theme="dark"] .modern-total-value.positive {
    color: #4ade80 !important;
}
html[data-theme="dark"] body .modern-total-value.negative,
html[data-theme="dark"] .modern-total-value.negative {
    color: #fca5a5 !important;
}

html[data-theme="dark"] .modern-value-col.positive { color: #4ade80 !important; }
html[data-theme="dark"] .modern-value-col.negative { color: #fca5a5 !important; }

html[data-theme="dark"] .modern-checkbox { accent-color: var(--link); }

/* ---------- CONCILIAÇÃO ---------- */
html[data-theme="dark"] .card-painel,
html[data-theme="dark"] .card.card-painel {
    background-color: var(--bg-card) !important;
    color: var(--text);
    border-color: var(--border) !important;
}

/* ---------- PLANO DE CONTAS ---------- */
html[data-theme="dark"] .balancete-container {
    background-color: transparent !important;
    color: var(--text);
}
html[data-theme="dark"] .balancete-container table { color: var(--text); }
html[data-theme="dark"] .card-header.bg-dark {
    background-color: var(--bg-card-2) !important;
    color: var(--text-strong) !important;
}

/* ---------- DRE ---------- */
html[data-theme="dark"] .add-periodo-panel {
    background-color: var(--bg-card-2) !important;
    color: var(--text);
    border-color: var(--border) !important;
}

/* ---------- TELAS DE PAGAMENTO ---------- */
html[data-theme="dark"] .success-card,
html[data-theme="dark"] .pending-card,
html[data-theme="dark"] .failure-card {
    color: var(--text);
}
html[data-theme="dark"] .success-card { background-color: rgba(34, 197, 94, 0.08) !important; border-color: rgba(34, 197, 94, 0.32) !important; }
html[data-theme="dark"] .pending-card { background-color: rgba(245, 158, 11, 0.08) !important; border-color: rgba(245, 158, 11, 0.32) !important; }
html[data-theme="dark"] .failure-card { background-color: rgba(239,  68, 68, 0.08) !important; border-color: rgba(239,  68, 68, 0.32) !important; }

/* ---------- STATS-CARD do admin ---------- */
html[data-theme="dark"] .stats-card .card-title,
html[data-theme="dark"] .stats-card h1, html[data-theme="dark"] .stats-card h2,
html[data-theme="dark"] .stats-card h3, html[data-theme="dark"] .stats-card h4,
html[data-theme="dark"] .stats-card h5, html[data-theme="dark"] .stats-card h6 {
    color: #ffffff !important;
}

/* ---------- AUTH ---------- */
html[data-theme="dark"] body > .container-fluid:not(.has-conteudo) {
    background-color: var(--background-page) !important;
    color: var(--text);
    min-height: 100vh;
}

/* ---------- CONTADOR / BPO ---------- */
html[data-theme="dark"] #contador-context-bar {
    background-color: #fff3cd !important;
    color: #856404 !important;
}

/* ---------- planifin-theme: pf-filter-bar ---------- */
html[data-theme="dark"] .pf-filter-bar {
    background-color: var(--bg-card) !important;
    color: var(--text);
    border-color: var(--border) !important;
}
html[data-theme="dark"] .pf-filter-bar label { color: var(--text-soft) !important; }

/* ---------- pf-summary-row + pf-summary-item ---------- */
html[data-theme="dark"] .pf-summary-row {
    background-color: var(--bg-card-2) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .pf-summary-item {
    background-color: var(--bg-card) !important;
    color: var(--text);
}
html[data-theme="dark"] .pf-summary-item:not(:last-child)::after {
    background-color: var(--border) !important;
}
html[data-theme="dark"] .pf-summary-label { color: var(--text-soft) !important; }
html[data-theme="dark"] .pf-summary-value { color: var(--text-strong); }
html[data-theme="dark"] .pf-summary-sub   { color: var(--text-soft) !important; }

html[data-theme="dark"] .pf-money-pos { color: #4ade80 !important; }
html[data-theme="dark"] .pf-money-neg { color: #fca5a5 !important; }
html[data-theme="dark"] .pf-money-neu { color: var(--text-soft) !important; }

html[data-theme="dark"] .pf-section-title { color: var(--text-strong) !important; }

/* ---------- DASHBOARD: dash-card-listagem ---------- */
html[data-theme="dark"] .dashboard-content .pf-card.dash-card-listagem > .card-body,
html[data-theme="dark"] .dashboard-content .pf-card.dash-card-listagem > .card-footer {
    background-color: var(--bg-card) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* ---------- DASHBOARD: alerts inline gradient pastel ---------- */
html[data-theme="dark"] [style*="background: linear-gradient(135deg, #fffbeb"],
html[data-theme="dark"] [style*="background:linear-gradient(135deg,#fffbeb"] {
    background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(245,158,11,0.04)) !important;
    color: var(--text) !important;
    border-color: rgba(245,158,11,0.32) !important;
}
html[data-theme="dark"] [style*="background: linear-gradient(135deg, #ecfdf5"],
html[data-theme="dark"] [style*="background: linear-gradient(135deg, #d1fae5"],
html[data-theme="dark"] [style*="background:linear-gradient(135deg,#ecfdf5"],
html[data-theme="dark"] [style*="background:linear-gradient(135deg,#d1fae5"] {
    background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(16,185,129,0.04)) !important;
    color: var(--text) !important;
    border-color: rgba(16,185,129,0.32) !important;
}

html[data-theme="dark"] [style*="background:#fffbeb"],
html[data-theme="dark"] [style*="background: #fffbeb"] {
    background-color: rgba(245, 158, 11, 0.08) !important;
}

/* ---------- totals-container-enhanced + totals-group ---------- */
html[data-theme="dark"] .modern-totals-summary,
html[data-theme="dark"] .totals-container-enhanced {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .totals-header {
    background-color: var(--bg-card-2) !important;
    border-color: var(--border) !important;
    border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .totals-title { color: var(--text-soft) !important; }
html[data-theme="dark"] .totals-group {
    background-color: var(--bg-card-2) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .totals-group.entradas-group {
    background-color: var(--bg-card-2) !important;
    background-image: linear-gradient(180deg, var(--tint-in), transparent 60%) !important;
    border-right-color: var(--border) !important;
}
html[data-theme="dark"] .totals-group.saidas-group {
    background-color: var(--bg-card-2) !important;
    background-image: linear-gradient(180deg, var(--tint-out), transparent 60%) !important;
}
html[data-theme="dark"] .group-title { color: var(--text-strong) !important; }
html[data-theme="dark"] .group-title.text-success { color: #4ade80 !important; }
html[data-theme="dark"] .group-title.text-danger  { color: #fca5a5 !important; }

html[data-theme="dark"] .total-badge.bg-success-light,
html[data-theme="dark"] .bg-success-light {
    background-color: rgba(16,185,129,0.12) !important;
    color: var(--text) !important;
    border-color: rgba(16,185,129,.32) !important;
}
html[data-theme="dark"] .total-badge.bg-danger-light,
html[data-theme="dark"] .bg-danger-light {
    background-color: rgba(239,68,68,0.12) !important;
    color: var(--text) !important;
    border-color: rgba(239,68,68,.32) !important;
}
html[data-theme="dark"] .total-badge.bg-warning-light,
html[data-theme="dark"] .bg-warning-light {
    background-color: rgba(245,158,11,0.12) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .total-badge.bg-info-light,
html[data-theme="dark"] .bg-info-light {
    background-color: rgba(59,130,246,0.12) !important;
    color: var(--text) !important;
}

/* ---------- ASSISTENTE IA ---------- */
html[data-theme="dark"] #sidebar-assistente {
    background-color: var(--bg-card) !important;
    color: var(--text);
    border-color: var(--border) !important;
}
/* Backdrop do assistente: precisa ser SEMI-TRANSPARENTE (dim), não opaco — com
   #03061a sólido a tela inteira virava um vazio preto ao abrir o chat no dark.
   60% mantém o leve tom azulado e escurece o app atrás sem apagá-lo. */
html[data-theme="dark"] #overlay-assistente { background-color: rgba(3, 6, 26, 0.6) !important; }
html[data-theme="dark"] #assistente-input {
    background-color: var(--bg-input) !important;
    color: var(--text-strong) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .assistente-boas-vindas {
    background-color: var(--bg-card-2) !important;
    color: var(--text);
    border-color: var(--border) !important;
}

/* ==========================================================================
   ★ BROAD SWEEP — cores inline hardcoded comuns em 44 templates com <style>
   --------------------------------------------------------------------------
   Em vez de listar cada classe de cada template, atacamos os PADROES de
   cor mais usados via [style*="..."] attribute selector. Cobre QUALQUER
   elemento com style inline contendo essas cores.
   ========================================================================== */

/* BACKGROUND BRANCO inline em qualquer elemento */
html[data-theme="dark"] [style*="background:#fff;"],
html[data-theme="dark"] [style*="background: #fff;"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background-color:#fff;"],
html[data-theme="dark"] [style*="background-color: #fff;"],
html[data-theme="dark"] [style*="background-color:#ffffff"],
html[data-theme="dark"] [style*="background-color: #ffffff"],
html[data-theme="dark"] [style*="background-color:white"],
html[data-theme="dark"] [style*="background-color: white"] {
    background-color: var(--bg-card) !important;
    color: var(--text);
}

/* BACKGROUNDS CINZA-CLARO inline (#f8f9fa, #f5f5f5, #e9ecef, #f0f0f0, #fafafa, #f1f5f9) */
html[data-theme="dark"] [style*="background:#f8f9fa"],
html[data-theme="dark"] [style*="background: #f8f9fa"],
html[data-theme="dark"] [style*="background-color:#f8f9fa"],
html[data-theme="dark"] [style*="background-color: #f8f9fa"],
html[data-theme="dark"] [style*="background:#f5f5f5"],
html[data-theme="dark"] [style*="background: #f5f5f5"],
html[data-theme="dark"] [style*="background:#e9ecef"],
html[data-theme="dark"] [style*="background:#f0f0f0"],
html[data-theme="dark"] [style*="background:#fafafa"],
html[data-theme="dark"] [style*="background: #fafafa"],
html[data-theme="dark"] [style*="background:#f1f5f9"] {
    background-color: var(--bg-card-2) !important;
}

/* BORDAS CLARAS inline (#dee2e6, #e2e8f0, #f0f0f0, #ced4da, #e9ecef) */
html[data-theme="dark"] [style*="border:1px solid #dee2e6"],
html[data-theme="dark"] [style*="border: 1px solid #dee2e6"],
html[data-theme="dark"] [style*="border:1px solid #e2e8f0"],
html[data-theme="dark"] [style*="border: 1px solid #e2e8f0"],
html[data-theme="dark"] [style*="border:1px solid #f0f0f0"],
html[data-theme="dark"] [style*="border:1px solid #ced4da"],
html[data-theme="dark"] [style*="border:1px solid #e9ecef"],
html[data-theme="dark"] [style*="border-color:#dee2e6"],
html[data-theme="dark"] [style*="border-color: #dee2e6"],
html[data-theme="dark"] [style*="border-bottom:1px solid #f0f0f0"],
html[data-theme="dark"] [style*="border-bottom: 1px solid #f0f0f0"] {
    border-color: var(--border) !important;
}

/* ==========================================================================
   ★ IMPORTACAO OFX — importacao_ofx.html linhas 7-204
   --------------------------------------------------------------------------
   12 classes proprias com bg #fff / #f8f9fa / color #6c757d / border #dee2e6
   ========================================================================== */

/* Cards painel */
html[data-theme="dark"] body .ofx-card-painel,
html[data-theme="dark"] .ofx-card-painel {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}
html[data-theme="dark"] body .ofx-card-header,
html[data-theme="dark"] .ofx-card-header {
    background: var(--bg-card-2) !important;
    color: #f1f5f9 !important;
    border-bottom-color: var(--border) !important;
}

/* Items individuais (transacoes OFX) */
html[data-theme="dark"] body .ofx-item,
html[data-theme="dark"] .ofx-item {
    border-bottom-color: var(--border) !important;
    background: transparent !important;
}
html[data-theme="dark"] body .ofx-item:hover,
html[data-theme="dark"] .ofx-item:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}
/* Descricao do item (texto principal) - garante branco forte */
html[data-theme="dark"] .ofx-item-desc {
    color: #f1f5f9 !important;
}
/* Meta (data + info secundaria) - era #6c757d cinza */
html[data-theme="dark"] .ofx-item-meta {
    color: var(--text-soft) !important;
}
/* Valor - eh classe text-success/text-danger Bootstrap (ja' coberto) */

/* Tabela de mapeados */
html[data-theme="dark"] #tabela-mapeados {
    background: transparent !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] #tabela-mapeados thead th {
    background: var(--bg-card-2) !important;
    color: var(--text-soft) !important;
    border-bottom-color: var(--border-strong) !important;
}
html[data-theme="dark"] #tabela-mapeados tbody td {
    background: transparent !important;
    color: #f1f5f9 !important;
    border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] #tabela-mapeados tbody tr:hover,
html[data-theme="dark"] #tabela-mapeados tbody tr:hover td {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Badge sugestao */
html[data-theme="dark"] .badge-sug {
    background: rgba(125, 211, 252, 0.18) !important;
    color: #bae6fd !important;
    border-color: rgba(125, 211, 252, 0.45) !important;
}

/* Autocomplete dropdown */
html[data-theme="dark"] .ac-dropdown {
    background: var(--bg-card) !important;
    border-color: var(--border-strong) !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .ac-item {
    border-bottom-color: var(--border) !important;
    color: #f1f5f9 !important;
    background: transparent !important;
}
html[data-theme="dark"] .ac-item:hover {
    background: var(--bg-card-2) !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .ac-criar {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #86efac !important;
}
html[data-theme="dark"] .ac-criar:hover {
    background: rgba(16, 185, 129, 0.22) !important;
    color: #bbf7d0 !important;
}

/* Empty state (icone + "Mapeie transacoes para ver...") */
html[data-theme="dark"] .ofx-card-body .text-center,
html[data-theme="dark"] .ofx-card-body .text-muted {
    color: var(--text-soft) !important;
}

/* ==========================================================================
   ★ MINHA ASSINATURA — minha_assinatura.html
   --------------------------------------------------------------------------
   .tier-card / .tiers-row / outras classes proprias
   ========================================================================== */
html[data-theme="dark"] body .tier-card,
html[data-theme="dark"] .tier-card {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .tier-card:hover {
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .tier-card.active,
html[data-theme="dark"] .tier-card.atual {
    background: var(--bg-card-2) !important;
    border-color: #7aa2f7 !important;
}
html[data-theme="dark"] .tiers-row {
    color: var(--text);
}

/* ==========================================================================
   ★ CATCH-ALL — classes "card" especificas comuns em multiplos templates
   --------------------------------------------------------------------------
   Templates usam padroes como .filtro-card, .info-card, .config-card,
   .historico-card, .resumo-card, .upload-card, .info-box, .preview-card,
   .arquivo-card, .periodo-card, .topo-card. Cobrimos preventivamente
   com regra unica.
   ========================================================================== */
html[data-theme="dark"] body .filtro-card,
html[data-theme="dark"] body .info-card,
html[data-theme="dark"] body .config-card,
html[data-theme="dark"] body .historico-card,
html[data-theme="dark"] body .upload-card,
html[data-theme="dark"] body .preview-card,
html[data-theme="dark"] body .arquivo-card,
html[data-theme="dark"] body .periodo-card,
html[data-theme="dark"] body .topo-card,
html[data-theme="dark"] body .info-box,
html[data-theme="dark"] body .alert-box,
html[data-theme="dark"] body .vinculo-card,
html[data-theme="dark"] body .empresa-card,
html[data-theme="dark"] body .usuario-card,
html[data-theme="dark"] body .recurso-card,
html[data-theme="dark"] body .plano-card,
html[data-theme="dark"] body .aviso-card {
    background: var(--bg-card) !important;
    color: #f1f5f9 !important;
    border-color: var(--border) !important;
}

/* Empty states comuns ("Nenhum X cadastrado", "Mapeie...", etc.) */
html[data-theme="dark"] body .empty-state,
html[data-theme="dark"] body .vazio,
html[data-theme="dark"] body .sem-resultados,
html[data-theme="dark"] body .nenhum-registro {
    color: var(--text-soft) !important;
}

/* ==========================================================================
   ★ CARRINHO — nova_venda.html / nova_compra.html / novo_lancamento.html
   --------------------------------------------------------------------------
   3 tabelas com mesma estrutura: #tabela-itens-venda, #tabela-itens-compra,
   #tabela-itens-lanc + classe .carrinho-table.

   Causa raiz dos fundos brancos no carrinho:
     style.css:3205-3208 -> table.table thead th:last-child / td:last-child
                           { background-color: #f0f4f8 !important }
     style.css:3212-3218 -> #tabela-itens-(venda|compra|lanc) tbody td:last-child
                           background #fff (sem barra: a sequencia fecha-comentario
                           prematuramente e vazava `tbody td:last-child{background:#fff}`
                           como regra GLOBAL -> coluna de acoes branca no dark)
     style.css:3331-3335 -> tbody tr:hover td { background: #f7f9ff !important }
     style.css:3338-3340 -> table.table tbody td:has(.badge)
                           { background-color: #f0f4f8 !important }
     style.css:3239-3243 -> .cart-remove-btn.btn { background: #fff }

   Header (.carrinho-table thead) ja' tem gradient roxo - mantido.
   ========================================================================== */

/* CARRINHO - tabela inteira (linhas, celulas, hover) */
html[data-theme="dark"] body .carrinho-table,
html[data-theme="dark"] .carrinho-table {
    background: transparent !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] body .carrinho-table tbody,
html[data-theme="dark"] .carrinho-table tbody {
    background: transparent !important;
}
html[data-theme="dark"] body .carrinho-table tbody tr,
html[data-theme="dark"] .carrinho-table tbody tr {
    background: transparent !important;
}
html[data-theme="dark"] body .carrinho-table tbody td,
html[data-theme="dark"] .carrinho-table tbody td {
    background: transparent !important;
    color: #f1f5f9 !important;
    border-bottom-color: var(--border) !important;
}

/* Tfoot (rodape "Itens" + total) - era #fff */
html[data-theme="dark"] body .carrinho-table tfoot,
html[data-theme="dark"] body .carrinho-table tfoot tr,
html[data-theme="dark"] body .carrinho-table tfoot td,
html[data-theme="dark"] body .carrinho-table tfoot th,
html[data-theme="dark"] .carrinho-table tfoot td,
html[data-theme="dark"] .carrinho-table tfoot th {
    background: var(--bg-card-2) !important;
    color: #f1f5f9 !important;
    border-color: var(--border) !important;
}

/* IDs especificos das 3 tabelas - cobertura COMPLETA do <table>
   --------------------------------------------------------------------------
   style.css:3422-3432 forca #tabela-itens-* { background: #fff }
   style.css:3446-3453 forca #tabela-itens-* tbody td { background: #fff }
   style.css:3455-3464 forca #tabela-itens-* tfoot { background: #f7f9fc }
   style.css:3478-3487 forca #tabela-itens-* td:last-child { background: #fff !important }
   Cobrir cada um com seletor ID explicito para vencer sem ambiguidade. */

/* TABELA inteira - era bg #fff */
html[data-theme="dark"] body #tabela-itens-venda,
html[data-theme="dark"] body #tabela-itens-compra,
html[data-theme="dark"] body #tabela-itens-lanc,
html[data-theme="dark"] #tabela-itens-venda,
html[data-theme="dark"] #tabela-itens-compra,
html[data-theme="dark"] #tabela-itens-lanc {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}

/* TBODY td - era bg #fff (sem !important mas com seletor #id) */
html[data-theme="dark"] body #tabela-itens-venda tbody td,
html[data-theme="dark"] body #tabela-itens-compra tbody td,
html[data-theme="dark"] body #tabela-itens-lanc tbody td,
html[data-theme="dark"] #tabela-itens-venda tbody td,
html[data-theme="dark"] #tabela-itens-compra tbody td,
html[data-theme="dark"] #tabela-itens-lanc tbody td {
    background: transparent !important;
    color: #f1f5f9 !important;
}

/* TBODY tr (linha do item) - garantir transparente */
html[data-theme="dark"] #tabela-itens-venda tbody tr,
html[data-theme="dark"] #tabela-itens-compra tbody tr,
html[data-theme="dark"] #tabela-itens-lanc tbody tr {
    background: transparent !important;
}

/* td:last-child com !important do style.css:3481 - sobrescrever */
html[data-theme="dark"] body #tabela-itens-venda tbody td:last-child,
html[data-theme="dark"] body #tabela-itens-compra tbody td:last-child,
html[data-theme="dark"] body #tabela-itens-lanc tbody td:last-child,
html[data-theme="dark"] #tabela-itens-venda tbody td:last-child,
html[data-theme="dark"] #tabela-itens-compra tbody td:last-child,
html[data-theme="dark"] #tabela-itens-lanc tbody td:last-child,
html[data-theme="dark"] body #tabela-itens-venda thead th:last-child,
html[data-theme="dark"] body #tabela-itens-compra thead th:last-child,
html[data-theme="dark"] body #tabela-itens-lanc thead th:last-child {
    background: transparent !important;
    color: #f1f5f9 !important;
    border-left: none !important;
}

/* TFOOT - era bg #f7f9fc cinza-azulado claro */
html[data-theme="dark"] body #tabela-itens-venda tfoot,
html[data-theme="dark"] body #tabela-itens-venda tfoot tr,
html[data-theme="dark"] body #tabela-itens-venda tfoot th,
html[data-theme="dark"] body #tabela-itens-venda tfoot td,
html[data-theme="dark"] body #tabela-itens-compra tfoot,
html[data-theme="dark"] body #tabela-itens-compra tfoot tr,
html[data-theme="dark"] body #tabela-itens-compra tfoot th,
html[data-theme="dark"] body #tabela-itens-compra tfoot td,
html[data-theme="dark"] body #tabela-itens-lanc tfoot,
html[data-theme="dark"] body #tabela-itens-lanc tfoot tr,
html[data-theme="dark"] body #tabela-itens-lanc tfoot th,
html[data-theme="dark"] body #tabela-itens-lanc tfoot td,
html[data-theme="dark"] #tabela-itens-venda tfoot,
html[data-theme="dark"] #tabela-itens-venda tfoot tr,
html[data-theme="dark"] #tabela-itens-venda tfoot th,
html[data-theme="dark"] #tabela-itens-venda tfoot td,
html[data-theme="dark"] #tabela-itens-compra tfoot,
html[data-theme="dark"] #tabela-itens-compra tfoot tr,
html[data-theme="dark"] #tabela-itens-compra tfoot th,
html[data-theme="dark"] #tabela-itens-compra tfoot td,
html[data-theme="dark"] #tabela-itens-lanc tfoot,
html[data-theme="dark"] #tabela-itens-lanc tfoot tr,
html[data-theme="dark"] #tabela-itens-lanc tfoot th,
html[data-theme="dark"] #tabela-itens-lanc tfoot td {
    background: var(--bg-card-2) !important;
    color: #f1f5f9 !important;
    border-top-color: var(--border-strong) !important;
}

/* .carrinho-card (container do carrinho - card com classes Bootstrap + carrinho-card)
   style.css:3870 forca background: #ffffff. Sobrescrever com bg-card. */
html[data-theme="dark"] body .carrinho-card,
html[data-theme="dark"] .carrinho-card {
    background: var(--bg-card) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* .btn-adicionar-item (botao "+ Adicionar item")
   style.css:4094 -> bg: white + color: #667eea + border: #667eea
   No dark: bg transparent + texto roxo claro + border roxo */
html[data-theme="dark"] body .btn-adicionar-item,
html[data-theme="dark"] .btn-adicionar-item {
    background: var(--bg-input) !important;
    color: #a5b8f9 !important;
    border-color: rgba(165, 184, 249, 0.4) !important;
}
html[data-theme="dark"] body .btn-adicionar-item:hover,
html[data-theme="dark"] .btn-adicionar-item:hover {
    background: rgba(99, 102, 241, 0.18) !important;
    color: #c4d0ff !important;
    border-color: rgba(165, 184, 249, 0.6) !important;
}

/* .btn-remover-item-* com !important do style.css:3668-3673 */
html[data-theme="dark"] body .btn-remover-item-venda,
html[data-theme="dark"] body .btn-remover-item-compra,
html[data-theme="dark"] body .btn-remover-item-lanc,
html[data-theme="dark"] .btn-remover-item-venda,
html[data-theme="dark"] .btn-remover-item-compra,
html[data-theme="dark"] .btn-remover-item-lanc {
    background: transparent !important;
    color: #fca5a5 !important;
    border-color: rgba(252, 165, 165, 0.4) !important;
}
html[data-theme="dark"] body .btn-remover-item-venda:hover,
html[data-theme="dark"] body .btn-remover-item-compra:hover,
html[data-theme="dark"] body .btn-remover-item-lanc:hover {
    background: rgba(248, 113, 113, 0.12) !important;
    border-color: rgba(252, 165, 165, 0.6) !important;
    color: #fecaca !important;
}

/* Hover linha do carrinho - era #f7f9ff azul claro */
html[data-theme="dark"] body #tabela-itens-venda tbody tr:hover td,
html[data-theme="dark"] body #tabela-itens-compra tbody tr:hover td,
html[data-theme="dark"] body #tabela-itens-lanc tbody tr:hover td,
html[data-theme="dark"] #tabela-itens-venda tbody tr:hover td,
html[data-theme="dark"] #tabela-itens-compra tbody tr:hover td,
html[data-theme="dark"] #tabela-itens-lanc tbody tr:hover td {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Item-row variants */
html[data-theme="dark"] tr.item-row-venda,
html[data-theme="dark"] tr.item-row-compra,
html[data-theme="dark"] tr.item-row-lanc,
html[data-theme="dark"] tr.item-row-venda td,
html[data-theme="dark"] tr.item-row-compra td,
html[data-theme="dark"] tr.item-row-lanc td {
    background: transparent !important;
    color: #f1f5f9 !important;
}

/* Botao remover (X vermelho) - era bg #fff */
html[data-theme="dark"] body .cart-remove-btn.btn,
html[data-theme="dark"] .cart-remove-btn.btn {
    background: transparent !important;
    color: #fca5a5 !important;
    border-color: rgba(252, 165, 165, 0.4) !important;
}
html[data-theme="dark"] body .cart-remove-btn.btn:hover,
html[data-theme="dark"] .cart-remove-btn.btn:hover {
    background: rgba(248, 113, 113, 0.12) !important;
    border-color: rgba(252, 165, 165, 0.6) !important;
    color: #fecaca !important;
}
/* Variants alternativas usadas no template */
html[data-theme="dark"] .carrinho-remove-btn,
html[data-theme="dark"] .btn-remover-item-venda,
html[data-theme="dark"] .btn-remover-item-compra,
html[data-theme="dark"] .btn-remover-item-lanc {
    background: transparent !important;
    color: #fca5a5 !important;
    border-color: rgba(252, 165, 165, 0.4) !important;
}

/* Botao "X" de limpar (.input-clear-btn) - era branco */
html[data-theme="dark"] body .input-clear-btn.btn,
html[data-theme="dark"] .input-clear-btn.btn {
    background: transparent !important;
    color: var(--text-soft) !important;
}

/* ==========================================================================
   ★ AUTOCOMPLETE — style.css linhas 3706-3805 (era TODO branco/claro)
   ========================================================================== */

/* Container do autocomplete */
html[data-theme="dark"] .autocomplete-container {
    background: transparent !important;
}

/* Suggestions dropdown - era bg #ffffff + border #e6eaf2 */
html[data-theme="dark"] body .autocomplete-suggestions,
html[data-theme="dark"] body .item-suggestions,
html[data-theme="dark"] .autocomplete-suggestions,
html[data-theme="dark"] .item-suggestions {
    background: var(--bg-card) !important;
    border-color: var(--border-strong) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5) !important;
    color: #f1f5f9 !important;
}

/* Cada sugestao */
html[data-theme="dark"] body .autocomplete-suggestion,
html[data-theme="dark"] .autocomplete-suggestion {
    background: transparent !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] body .autocomplete-suggestion:hover,
html[data-theme="dark"] .autocomplete-suggestion:hover {
    background: var(--bg-card-2) !important;
}
html[data-theme="dark"] .autocomplete-suggestion.selected {
    background: rgba(122, 162, 247, 0.18) !important;
    color: #f1f5f9 !important;
}

/* Textos dentro da sugestao - eram #2a2f3a / #6b7280 */
html[data-theme="dark"] .autocomplete-suggestion strong {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .autocomplete-suggestion small {
    color: var(--text-soft) !important;
}

/* Badge pill (estoque/info a direita) - era #eef2ff + #4e5dd1 + border #dee3ff */
html[data-theme="dark"] .autocomplete-suggestion .badge-pill {
    background: rgba(122, 162, 247, 0.18) !important;
    color: #a5b8f9 !important;
    border-color: rgba(122, 162, 247, 0.45) !important;
}

/* Scrollbar do autocomplete - era cinza claro */
html[data-theme="dark"] .autocomplete-suggestions::-webkit-scrollbar-thumb {
    background: var(--border-strong) !important;
}
html[data-theme="dark"] .autocomplete-suggestions::-webkit-scrollbar-thumb:hover {
    background: #475569 !important;
}

/* ==========================================================================
   ★ INPUTS dentro do CARRINHO - vence inline style="background-color: #f8f9fa"
   --------------------------------------------------------------------------
   O input do TOTAL eh readonly com inline style="background-color: #f8f9fa".
   Author !important > inline (sem !important) - DEVERIA bater. Reforcando
   com seletores ultra-especificos para garantir vitoria sobre inline.
   ========================================================================== */

/* Inputs readonly (total) - sobrescrever inline #f8f9fa */
html[data-theme="dark"] body input.form-control[readonly],
html[data-theme="dark"] body input[readonly].form-control,
html[data-theme="dark"] body input[readonly],
html[data-theme="dark"] input.form-control[readonly],
html[data-theme="dark"] input[readonly] {
    background-color: var(--bg-input) !important;
    background: var(--bg-input) !important;
    color: var(--text-strong) !important;
    border-color: var(--border-strong) !important;
}

/* Input total especifico (item_total) - via name attribute */
html[data-theme="dark"] body input[name="item_total[]"],
html[data-theme="dark"] input[name="item_total[]"] {
    background-color: var(--bg-input) !important;
    background: var(--bg-input) !important;
    color: #f1f5f9 !important;
}

/* Inline style com background-color hardcoded em INPUTS - hack agressivo */
html[data-theme="dark"] input[style*="background-color: #f8f9fa"],
html[data-theme="dark"] input[style*="background-color:#f8f9fa"],
html[data-theme="dark"] input[style*="background: #f8f9fa"],
html[data-theme="dark"] input[style*="background:#f8f9fa"] {
    background-color: var(--bg-input) !important;
    background: var(--bg-input) !important;
    color: #f1f5f9 !important;
}

/* Forcar TODOS form-controls dentro do carrinho serem bg-input */
html[data-theme="dark"] body #tabela-itens-venda .form-control,
html[data-theme="dark"] body #tabela-itens-compra .form-control,
html[data-theme="dark"] body #tabela-itens-lanc .form-control,
html[data-theme="dark"] body #tabela-itens-venda .form-select,
html[data-theme="dark"] body #tabela-itens-compra .form-select,
html[data-theme="dark"] body #tabela-itens-lanc .form-select,
html[data-theme="dark"] body .carrinho-table .form-control,
html[data-theme="dark"] body .carrinho-table .form-select {
    background-color: var(--bg-input) !important;
    background: var(--bg-input) !important;
    color: var(--text-strong) !important;
    border-color: var(--border-strong) !important;
}

/* ==========================================================================
   ★ Bootstrap table - sobrescrever style.css:3205+ ultima coluna #f0f4f8
   --------------------------------------------------------------------------
   style.css:3205 forca table.table thead th:last-child / td:last-child
   com bg #f0f4f8 (azul-acinzentado para destaque de Status). E linha 3338
   forca td:has(.badge) com mesmo bg. Anular no dark.
   ========================================================================== */
html[data-theme="dark"] body table.table thead th:last-child,
html[data-theme="dark"] body table.table tbody td:last-child,
html[data-theme="dark"] table.table thead th:last-child {
    background-color: var(--bg-card) !important;
}
html[data-theme="dark"] body table.table tbody td:has(.badge),
html[data-theme="dark"] table.table tbody td:has(.badge) {
    background-color: transparent !important;
}

/* ==========================================================================
   [MOVIDO] EDGE-TO-EDGE LAYOUT (largura full das listagens)
   Regras ESTRUTURAIS de largura/colunas de listagem foram movidas para
   planifin-theme.css (seção "LISTAGENS — LARGURA & DISTRIBUIÇÃO DE COLUNAS").
   Layout não depende do tema; dark-mode.css mantém só overrides de COR.
   ========================================================================== */

/* ==========================================================================
   v7.1 - DARK MODE ADMIN + CONTADOR/BPO
   Cobertura de classes especificas que ainda apareciam brancas no tema
   escuro nos paineis de Admin e Contador/BPO. PF/PJ ja' estavam cobertos
   ate' v7.0. Todas as regras scoped em html[data-theme="dark"] para nao
   afetar o tema claro.
   ========================================================================== */

/* --- Admin Dashboard: .saas-metric-card --- */
html[data-theme="dark"] body .saas-metric-card,
html[data-theme="dark"] .saas-metric-card {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .saas-metric-card .metric-value { color: #f1f5f9 !important; }
html[data-theme="dark"] .saas-metric-card .metric-label { color: var(--text-soft) !important; }
html[data-theme="dark"] .saas-metric-card .metric-sub strong { color: var(--text) !important; }
html[data-theme="dark"] .saas-metric-card .metric-icon { opacity: 0.85; }

/* --- Admin Usuarios: .account-card, .account-info-card, .user-code --- */
html[data-theme="dark"] body .account-card,
html[data-theme="dark"] .account-card {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .account-card:hover { background: var(--bg-card-2) !important; }
html[data-theme="dark"] body .account-info-card,
html[data-theme="dark"] .account-info-card {
    background: var(--bg-card-2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .user-code {
    background: var(--bg-input) !important;
    color: var(--text-strong) !important;
    border-color: var(--border) !important;
}

/* --- Admin Conta Detalhes: .uso-card, .totais-card --- */
html[data-theme="dark"] body .uso-card,
html[data-theme="dark"] .uso-card {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .uso-card .valor { color: #f1f5f9 !important; }
html[data-theme="dark"] .uso-card .label { color: var(--text-soft) !important; }
html[data-theme="dark"] body .totais-card,
html[data-theme="dark"] .totais-card {
    background: var(--bg-card-2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* --- Admin Avisos: .aviso-preview-box, .aviso-tpl-btn, .aviso-historico --- */
html[data-theme="dark"] .aviso-preview-box {
    background: var(--bg-card-2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .aviso-tpl-btn {
    background: var(--bg-input) !important;
    color: var(--text) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .aviso-tpl-btn:hover {
    background: var(--bg-card-2) !important;
    color: var(--link) !important;
}
html[data-theme="dark"] .aviso-historico {
    background: var(--bg-card) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .aviso-historico tbody tr:hover {
    background: rgba(255,255,255,0.04) !important;
}

/* --- Admin Planos: .plano-table --- */
html[data-theme="dark"] .plano-table {
    background: var(--bg-card) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .plano-table th {
    background: var(--bg-card-2) !important;
    color: var(--text-soft) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .plano-table td {
    border-color: var(--border) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .plano-table tr:hover td { background: rgba(255,255,255,0.04) !important; }

/* --- Admin Editar Conta: garantir input[readonly] no tema escuro --- */
html[data-theme="dark"] body input.form-control[readonly][style*="background-color:#e9ecef"],
html[data-theme="dark"] body input.form-control[readonly][style*="background-color: #e9ecef"],
html[data-theme="dark"] body input[readonly] {
    background: var(--bg-input) !important;
    background-color: var(--bg-input) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* --- Admin Vinculos: .stat-vinc, .vinc-tabela, .vinc-empresa-* --- */
html[data-theme="dark"] body .stat-vinc,
html[data-theme="dark"] .stat-vinc {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .stat-vinc .label { color: var(--text-soft) !important; }
html[data-theme="dark"] .stat-vinc .valor { color: #f1f5f9 !important; }
html[data-theme="dark"] .vinc-tabela {
    background: var(--bg-card) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .vinc-tabela th {
    background: var(--bg-card-2) !important;
    color: var(--text-soft) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .vinc-tabela td {
    border-color: var(--border) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .vinc-tabela tbody tr:hover { background: rgba(255,255,255,0.04) !important; }
html[data-theme="dark"] .vinc-empresa-nome { color: #f1f5f9 !important; }
html[data-theme="dark"] .vinc-empresa-doc { color: var(--text-soft) !important; }

/* --- Contador Dashboard: .contador-tabs + cores inline --- */
html[data-theme="dark"] .contador-tabs {
    background: var(--bg-card-2) !important;
    border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .contador-tabs .nav-link {
    color: var(--text-soft) !important;
    border-color: transparent !important;
}
html[data-theme="dark"] .contador-tabs .nav-link:hover {
    color: var(--link) !important;
    background: rgba(255,255,255,0.04) !important;
    border-color: transparent !important;
}
html[data-theme="dark"] .contador-tabs .nav-link.active {
    background: var(--bg-card) !important;
    color: var(--link) !important;
    border-color: var(--border) var(--border) var(--bg-card) !important;
}

/* Cobertura de elementos com inline style color: #000000 (5 h5 no contador_dashboard) */
html[data-theme="dark"] [style*="color: #000000"],
html[data-theme="dark"] [style*="color:#000000"],
html[data-theme="dark"] [style*="color: #000"],
html[data-theme="dark"] [style*="color:#000"] {
    color: #f1f5f9 !important;
}
/* Cobertura de background-color inline #fafafa (div no contador_dashboard linha 1027) */
html[data-theme="dark"] [style*="background-color:#fafafa"],
html[data-theme="dark"] [style*="background-color: #fafafa"],
html[data-theme="dark"] [style*="background:#fafafa"],
html[data-theme="dark"] [style*="background: #fafafa"] {
    background-color: var(--bg-card-2) !important;
    background: var(--bg-card-2) !important;
}

/* ==========================================================================
   [MOVIDO] EDGE-TO-EDGE v7.2 (DRE / balancete / recorrências / conciliação)
   Regras ESTRUTURAIS de largura/colunas de listagem foram movidas para
   planifin-theme.css (seção "LISTAGENS — LARGURA & DISTRIBUIÇÃO DE COLUNAS").
   Layout não depende do tema; dark-mode.css mantém só overrides de COR.
   ========================================================================== */

/* ==========================================================================
   v7.3 - UX & ACESSIBILIDADE: indicador scroll, fontes minimas, contraste,
   focus visible.
   Regras UNIVERSAIS (NAO scoped em dark), aplicam-se a tema claro E escuro.
   ========================================================================== */

/* --- C6: Indicador visual de scroll horizontal em tabelas largas ---
   Shadow gradiente sutil no canto direito quando ha overflow horizontal.
   Funciona em qualquer .table-responsive ou .modern-table-container. */
.table-responsive,
.modern-table-container {
    background-image:
        linear-gradient(to right, transparent 0%, transparent 99%),
        linear-gradient(to right, rgba(15,23,42,0) 0%, rgba(15,23,42,0.06) 100%);
    background-repeat: no-repeat;
    background-position: 0 0, 100% 0;
    background-size: calc(100% - 18px) 100%, 18px 100%;
    background-attachment: local, scroll;
}
html[data-theme="dark"] .table-responsive,
html[data-theme="dark"] .modern-table-container {
    background-image:
        linear-gradient(to right, transparent 0%, transparent 99%),
        linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%);
}

/* --- D1: Fontes minimas legiveis ---
   Eleva o piso global para 12.5px (0.78rem). WCAG AA recomenda 12px+
   para texto secundario. Atinge apenas elementos textuais (nao icones). */
small, .small,
.text-muted,
.modern-status-col,
.modern-pagination-info,
.modern-total-label,
.conc-painel .table thead th,
.recorrencias-card .table small,
.dre-table small {
    font-size: 0.78rem !important;
}
/* Excecao explicita: badges minusculas continuam pequenas mas com piso 0.72rem. */
.badge.small,
.modern-status-badge {
    font-size: 0.74rem !important;
}

/* --- D2: Contraste WCAG AA em textos muted ---
   #64748b (slate-500) sobre fundo claro = ~3.2:1 (FAIL).
   #475569 (slate-600) sobre fundo claro = ~7.1:1 (AAA).
   Aplicado a textos pequenos que herdam o cinza padrao do Bootstrap. */
.text-muted small,
small.text-muted,
.conc-painel .titulo-arquivo small,
.conc-painel .table thead th,
.modern-pagination-info,
.modern-total-label {
    color: #475569 !important;
}
/* Em dark mode, o slate-500 fica claro suficiente; mantemos var(--text-soft) */
html[data-theme="dark"] .text-muted small,
html[data-theme="dark"] small.text-muted,
html[data-theme="dark"] .conc-painel .titulo-arquivo small,
html[data-theme="dark"] .conc-painel .table thead th,
html[data-theme="dark"] .modern-pagination-info,
html[data-theme="dark"] .modern-total-label {
    color: var(--text-soft) !important;
}

/* --- D5: Focus visible reforcado ---
   Muitos arquivos CSS fazem outline:none. Garantimos que :focus-visible
   (foco via teclado) sempre tenha indicador claro - acessibilidade WCAG. */
*:focus-visible {
    outline: 2px solid #0d6efd !important;
    outline-offset: 2px !important;
    border-radius: 3px;
}
html[data-theme="dark"] *:focus-visible {
    outline-color: #60a5fa !important;
}
/* Excecao: btn-close (Bootstrap) ja tem indicador proprio */
.btn-close:focus-visible {
    outline: 2px solid #dc3545 !important;
}

/* ==========================================================================
   v7.5 - EXPORTACAO: cards de colunas do layout no tema escuro
   ========================================================================== */
html[data-theme="dark"] .layout-cols-container {
    background: var(--bg-card-2) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .layout-col-row {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .layout-col-row .col-pos-badge {
    background: rgba(139,92,246,0.2) !important;
    color: #c4b5fd !important;
}
html[data-theme="dark"] .layout-col-row .col-nome-edit,
html[data-theme="dark"] .layout-col-row .col-tipo-edit {
    background: var(--bg-input) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* ==========================================================================
   v7.6 - ACESSIBILIDADE: fontes minimas residuais + touch targets +
   focus visible em botoes-icon. Regras UNIVERSAIS (claro + escuro).
   ========================================================================== */

/* S8.1 - Fontes minimas legivieis (WCAG AA: 12.5px = 0.78rem).
   v7.3 cobriu casos principais; aqui pegamos o restante: badges minusculas,
   small em estatisticas, e classes especificas do assistente. */
.assistente-msg, .assistente-input,
.text-muted small, small.text-muted,
.badge {
    font-size: 0.78rem !important;
}
/* Excecao para badges absolutamente pequenas - so' chips de status */
.modern-status-badge, .badge.bg-light, .badge.bg-secondary-subtle,
span.badge[style*="font-size: 0.7"], span.badge[style*="font-size:0.7"] {
    font-size: 0.74rem !important;
}

/* S8.2 - Touch targets minimos para botoes icon-only.
   WCAG 2.5.5 recomenda 44x44px; usamos 36px como balanco aceitavel
   (preserva densidade UI). btn-sm icones isolados ficavam em 24-28px
   no padrao Bootstrap. */
.btn-sm > i:only-child,
.btn-sm > .fas:only-child,
.btn-sm > .far:only-child,
.btn-sm > .fab:only-child {
    /* Pad o conteudo para garantir area minima */
    min-width: 16px;
    min-height: 16px;
    display: inline-block;
}
.btn.btn-sm[title]:not(.btn-link) {
    min-height: 32px;
    min-width: 32px;
}
/* Botoes de acao em modern-action-btn (ja' existentes) - garantir tamanho consistente */
.modern-action-btn {
    min-width: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* S8.3 - Focus visible em botoes icon-only (alem do focus-visible global v7.3).
   Garante que tabulando pelo teclado, usuario nunca perde de vista o botao ativo. */
.btn:focus-visible,
button:focus-visible,
.modern-action-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.35) !important;
}
html[data-theme="dark"] .btn:focus-visible,
html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] .modern-action-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.45) !important;
}

/* Tooltip implicito para botoes sem texto: cursor help quando ha title */
.btn[title]:hover,
.modern-action-btn[title]:hover {
    cursor: help;
}
.btn[title]:hover {
    cursor: pointer;  /* btn principal, restaura pointer */
}

/* Empty state card (S6.6) - centrado, com leve fundo no dark mode */
.empty-state-card {
    padding: 1rem;
}
html[data-theme="dark"] .empty-state-card {
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 8px;
}

/* ==========================================================================
   [MOVIDO] LARGURAS CONSISTENTES v7.7 (colunas da modern-table)
   Regras ESTRUTURAIS de largura/colunas de listagem foram movidas para
   planifin-theme.css (seção "LISTAGENS — LARGURA & DISTRIBUIÇÃO DE COLUNAS").
   Layout não depende do tema; dark-mode.css mantém só overrides de COR.
   ========================================================================== */

/* ==========================================================================
   v7.8 - C7 MOBILE TOUCH TARGETS (44px)
   WCAG 2.5.5 (AAA) recomenda touch targets minimos de 44x44px em mobile.
   Bootstrap padrao gera botoes ~36-40px. Em telas < 768px elevamos.
   ========================================================================== */

@media (max-width: 768px) {
    /* Botoes primarios em geral */
    body .btn,
    body button.btn,
    body a.btn,
    body input[type="submit"],
    body input[type="button"] {
        min-height: 44px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* Botoes pequenos (btn-sm): permitir 40px ja' que sao secundarios */
    body .btn-sm,
    body .btn.btn-sm {
        min-height: 40px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    /* Botoes de acao das listagens modernas (editar/excluir/duplicar) */
    body .modern-action-btn {
        min-height: 40px !important;
        min-width: 40px !important;
        padding: 8px 10px !important;
    }

    /* Nav links no menu lateral / topo */
    body .nav-link,
    body nav a {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Inputs/selects em forms (evita zoom em iOS quando font < 16px) */
    body input.form-control,
    body select.form-select,
    body textarea.form-control {
        font-size: 16px !important;
        min-height: 44px !important;
    }
    body textarea.form-control {
        min-height: 88px !important;
    }

    /* Checkboxes maiores p/ touch */
    body input[type="checkbox"],
    body input[type="radio"] {
        min-width: 20px !important;
        min-height: 20px !important;
    }

    /* Espacamento maior entre botoes de acao em barras de lote */
    body .modern-batch-buttons .btn,
    body .modern-batch-buttons button {
        margin-right: 6px !important;
    }
}

/* ==========================================================================
   ★ v8.1 — GAPS DE SUPERFICIE CLARA EM <style> INLINE (estados ocultos)
   --------------------------------------------------------------------------
   Auditoria estatica (workflow) dos <style> de 32 templates + filtro contra a
   cobertura ja existente. Estes 24 seletores pintam superficie CLARA e NAO
   eram cobertos por nenhuma regra dark — quase todos sao ESTADOS OCULTOS que o
   sweep em runtime nao alcanca: dropdowns de autocomplete, hovers de itens,
   paineis condicionais (DRE/preview/assinatura). Padrao: superficie principal
   -> --bg-card; secundaria/realce/hover/cabecalho -> --bg-card-2.
   ========================================================================== */

/* --- Dropdowns de autocomplete/sugestoes (ocultos ate digitar) --- */
html[data-theme="dark"] .suggestions-dropdown,
html[data-theme="dark"] .conc-ac-dropdown {
    background-color: var(--bg-card) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .new-item {
    background-color: var(--bg-card-2) !important;
    color: var(--text) !important;
}

/* --- DRE configurar: paineis e itens (condicionais) --- */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .linha-dre-item {
    background-color: var(--bg-card) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .conta-item {
    background-color: var(--bg-card-2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .conta-item:hover { background-color: #243049 !important; }
html[data-theme="dark"] .instrucoes {
    background-color: var(--bg-card-2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* --- Exportacao: card de layout + preview (mostrados sob demanda) --- */
html[data-theme="dark"] .layout-card,
html[data-theme="dark"] .preview-table {
    background-color: var(--bg-card) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .preview-wrapper { background-color: var(--bg-card-2) !important; }
html[data-theme="dark"] .preview-table th {
    background-color: var(--bg-card-2) !important;
    color: var(--text-soft) !important;
    border-color: var(--border) !important;
}

/* --- Minha assinatura: tabs de periodo, box de credito, hist-table --- */
html[data-theme="dark"] .period-tabs,
html[data-theme="dark"] .plan-credit-info {
    background-color: var(--bg-card-2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .hist-table th {
    background-color: var(--bg-card-2) !important;
    color: var(--text-soft) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .hist-table tbody tr:hover td,
html[data-theme="dark"] .hist-table tr:hover td { background-color: var(--bg-card-2) !important; }

/* --- Admin: tickets (msg/resposta), users-table th, historico hover --- */
html[data-theme="dark"] .ticket-msg,
html[data-theme="dark"] .ticket-resposta {
    background-color: var(--bg-card-2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .users-table th {
    background-color: var(--bg-card-2) !important;
    color: var(--text-soft) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .historico-tabela tbody tr:hover td,
html[data-theme="dark"] .historico-tabela tbody tr:hover { background-color: var(--bg-card-2) !important; }

/* --- Perfil / recorrencia: campos readonly e card hover --- */
html[data-theme="dark"] .field-readonly {
    background-color: var(--bg-card-2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .hist-card:hover { background-color: var(--bg-card-2) !important; }

/* --- Card "listagem principal": style.css:3122 forca background:#fff via
   .card:has(#tabelaLancamentos)/.card:has(#tabela-compras)/.card.listagem-principal.
   A pseudo-classe :has(#id) tem especificidade (1,1,0) e vencia o
   `html[data-theme="dark"] .card` (0,2,0) -> o card da tabela ficava branco no
   dark (visivel nas frestas/padding). Reaplica fundo escuro com (1,2,0). --- */
html[data-theme="dark"] .card.listagem-principal,
html[data-theme="dark"] .card:has(#tabelaLancamentos),
html[data-theme="dark"] .card:has(#tabela-compras) {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}

/* ==========================================================================
   FIM
   ========================================================================== */

/* ==========================================================================
   FIX 2026-07-01 — sweep de visibilidade (2 temas):
   - .card-title (ex.: "Contas Caixa") ficava slate-escuro (#334155) sobre
     card escuro → invisível no dark.
   - .group-title.gt-neutro ("SALDOS CONTAS" em /lancamentos): a cor cinza
     saiu do inline !important do template p/ classe, permitindo o override.
   ========================================================================== */
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .card-header h5 {
    color: var(--text) !important;
}
html[data-theme="dark"] .totals-group .group-title.gt-neutro {
    color: #aab3c0 !important;
}

/* ==========================================================================
   FIX 2026-07-01 — remapeamento SISTÊMICO da escala --pf-gray-* no escuro.
   O planifin usa var(--pf-gray-700/800) como cor de TEXTO (títulos de card,
   labels) com seletores muito específicos + !important — impossíveis de
   vencer regra-a-regra. Invertendo a escala, TODO uso da paleta vira
   dark-safe de uma vez (texto slate→claro; superfícies claras→escuras).
   ========================================================================== */
html[data-theme="dark"] {
    --pf-gray-50:  #0f1523;
    --pf-gray-100: #141a2b;
    --pf-gray-200: #232b3f;
    --pf-gray-300: #3a4358;
    --pf-gray-400: #8b96ab;
    --pf-gray-500: #9aa4b8;
    --pf-gray-600: #b7c0d2;
    --pf-gray-700: #cbd5e1;
    --pf-gray-800: #e2e8f0;
    --pf-gray-900: #f1f5f9;
}

/* Componentes que usavam o TOPO da escala gray como superfície ESCURA com texto
   branco (padrão "dark-surface") — com a escala invertida acima, ficariam claros
   com texto branco. Superfícies escuras explícitas no dark: */
html[data-theme="dark"] .btn-secondary {
    background: #3a4358 !important;
    border-color: #3a4358 !important;
}
html[data-theme="dark"] .pf-card-header-neutral {
    background: linear-gradient(135deg, #232b3f 0%, #2c3550 100%) !important;
    color: #e5e7eb !important;
}