/* ═══════════════════════════════════════════════════════════════════════════
   wenergy-dark.css — Tema "Cyber Marine" (modo escuro azul marinho)

   Filosofia:
   - Mantém a ESTRUTURA do tema padrão (variáveis CSS, classes, layout)
   - Apenas SOBRESCREVE cores via seletor [data-theme="dark"]
   - Quando o usuário voltar para claro, é só remover o atributo

   Paleta:
   - Background:    #050a1f → #0a1428 (gradient marinho profundo)
   - Cards:         rgba(13, 27, 58, 0.7) + backdrop-blur (glassmorphism dark)
   - Acento ação:   #0ea5e9 (sky-500)
   - Acento glow:   #22d3ee (cyan-400)
   - Texto:         #e2e8f0 (slate-200)
   - Borda glow:    rgba(56, 189, 248, 0.15)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. BACKGROUND DA PÁGINA ───────────────────────────────────────── */
html[data-theme="dark"] body,
html[data-theme="dark"] {
    background: radial-gradient(ellipse at top left, #0a1f3d 0%, #050a1f 100%) !important;
    background-attachment: fixed !important;
    color: #e2e8f0 !important;
}

html[data-theme="dark"] body::before {
    /* overlay com efeito "circuito" sutil — pontos azul claros pulsando */
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(34, 211, 238, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(14, 165, 233, 0.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ── 2. SIDEBAR ESQUERDA ───────────────────────────────────────────── */
/* IMPORTANTE: o wenergy-theme.css usa lista de seletores com atributo
   [data-sidebarbg="skin1..9"] — todas têm especificidade 0,0,2,0. Para
   garantir override do tema dark, replicamos as mesmas variantes com
   nosso prefix html[data-theme="dark"] → especificidade fica 0,0,3,1. */
html[data-theme="dark"] .left-sidebar,
html[data-theme="dark"] .left-sidebar[data-sidebarbg],
html[data-theme="dark"] .left-sidebar[data-sidebarbg="skin1"],
html[data-theme="dark"] .left-sidebar[data-sidebarbg="skin2"],
html[data-theme="dark"] .left-sidebar[data-sidebarbg="skin3"],
html[data-theme="dark"] .left-sidebar[data-sidebarbg="skin4"],
html[data-theme="dark"] .left-sidebar[data-sidebarbg="skin5"],
html[data-theme="dark"] .left-sidebar[data-sidebarbg="skin6"],
html[data-theme="dark"] .left-sidebar[data-sidebarbg="skin7"],
html[data-theme="dark"] .left-sidebar[data-sidebarbg="skin8"],
html[data-theme="dark"] .left-sidebar[data-sidebarbg="skin9"],
html[data-theme="dark"] #main-wrapper[data-layout="vertical"][data-sidebar-position="fixed"] .left-sidebar,
html[data-theme="dark"] #main-wrapper[data-layout="vertical"][data-sidebar-position="fixed"][data-sidebartype="full"] .left-sidebar {
    background:       rgba(10, 20, 40, 0.85) !important;
    background-color: rgba(10, 20, 40, 0.85) !important;
    backdrop-filter:  blur(20px) saturate(180%) !important;
    border:           1px solid rgba(56, 189, 248, 0.10) !important;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.40),
        0 0 0 1px rgba(56, 189, 248, 0.08) inset !important;
}
/* Sobrescreve background dos <ul> internos da sidebar */
html[data-theme="dark"] .left-sidebar[data-sidebarbg] ul,
html[data-theme="dark"] .left-sidebar[data-sidebarbg="skin1"] ul,
html[data-theme="dark"] .left-sidebar[data-sidebarbg="skin2"] ul,
html[data-theme="dark"] .left-sidebar[data-sidebarbg="skin3"] ul,
html[data-theme="dark"] .left-sidebar[data-sidebarbg="skin4"] ul,
html[data-theme="dark"] .left-sidebar[data-sidebarbg="skin5"] ul,
html[data-theme="dark"] .left-sidebar[data-sidebarbg="skin6"] ul,
html[data-theme="dark"] .left-sidebar[data-sidebarbg="skin7"] ul,
html[data-theme="dark"] .left-sidebar[data-sidebarbg="skin8"] ul,
html[data-theme="dark"] .left-sidebar[data-sidebarbg="skin9"] ul {
    background: transparent !important;
}

html[data-theme="dark"] .left-sidebar ul,
html[data-theme="dark"] .scroll-sidebar,
html[data-theme="dark"] .sidebar-nav,
html[data-theme="dark"] .sidebar-nav ul,
html[data-theme="dark"] ul#sidebarnav,
html[data-theme="dark"] ul#sidebarnav ul {
    background: transparent !important;
}

html[data-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link {
    color: #cbd5e1 !important;
}
html[data-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link i,
html[data-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link svg {
    color: #64748b !important;
    stroke: #64748b !important;
}
html[data-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link:hover {
    background: rgba(14, 165, 233, 0.10) !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link:hover i,
html[data-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link:hover svg {
    color: #22d3ee !important;
    stroke: #22d3ee !important;
}

html[data-theme="dark"] .sidebar-nav ul .sidebar-item.selected > .sidebar-link,
html[data-theme="dark"] .sidebar-nav ul .sidebar-item.active > .sidebar-link {
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.20) 0%, rgba(14, 165, 233, 0.05) 100%) !important;
    color: #22d3ee !important;
    box-shadow: inset 3px 0 0 #22d3ee !important;
}
html[data-theme="dark"] .sidebar-nav ul .sidebar-item.active > .sidebar-link::before {
    background: #22d3ee !important;
    box-shadow: 0 0 8px #22d3ee !important;
}
html[data-theme="dark"] .sidebar-nav ul .sidebar-item.active > .sidebar-link i,
html[data-theme="dark"] .sidebar-nav ul .sidebar-item.active > .sidebar-link svg {
    color: #22d3ee !important;
    stroke: #22d3ee !important;
}

/* Submenu */
html[data-theme="dark"] .sidebar-nav ul .first-level {
    border-left: 2px solid rgba(56, 189, 248, 0.20) !important;
}
html[data-theme="dark"] .sidebar-nav .has-arrow::after {
    border-color: #64748b !important;
}
html[data-theme="dark"] .sidebar-nav .has-arrow[aria-expanded="true"]::after,
html[data-theme="dark"] .sidebar-item.active > .has-arrow::after {
    border-color: #22d3ee !important;
}

/* Card do avatar no rodapé */
html[data-theme="dark"] .navbar-collapse .navbar-nav:not(.me-auto) .nav-item.dropdown {
    background: rgba(7, 15, 35, 0.95) !important;
    border-top: 1px solid rgba(56, 189, 248, 0.15) !important;
}
html[data-theme="dark"] .we-user-name { color: #f1f5f9 !important; }
html[data-theme="dark"] .we-user-role { color: #64748b !important; }
html[data-theme="dark"] .we-logout-btn { color: #64748b !important; }
html[data-theme="dark"] .we-logout-btn:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}

/* ── 3. PAGE WRAPPER + CARDS ───────────────────────────────────────── */
/* O wenergy-theme.css define .page-wrapper com #main-wrapper na frente
   (especificidade 0,1,1,1). Replicamos o mesmo padrão para vencer. */
html[data-theme="dark"] .page-wrapper,
html[data-theme="dark"] #main-wrapper[data-layout="vertical"] .page-wrapper,
html[data-theme="dark"] #main-wrapper[data-layout="vertical"][data-sidebar-position="fixed"][data-sidebartype="full"] .page-wrapper {
    background:       rgba(10, 20, 40, 0.45) !important;
    background-color: rgba(10, 20, 40, 0.45) !important;
    backdrop-filter:  blur(20px) saturate(150%) !important;
    border:           1px solid rgba(56, 189, 248, 0.10) !important;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.40),
        0 0 0 1px rgba(56, 189, 248, 0.05) inset !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .we-kpi-frozen .card {
    background: rgba(13, 27, 58, 0.65) !important;
    border: 1px solid rgba(56, 189, 248, 0.12) !important;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.30),
        0 0 0 1px rgba(56, 189, 248, 0.05) inset !important;
    color: #cbd5e1 !important;
}
html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .we-kpi-frozen .card:hover {
    border-color: rgba(34, 211, 238, 0.25) !important;
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.40),
        0 0 24px rgba(34, 211, 238, 0.08),
        0 0 0 1px rgba(34, 211, 238, 0.15) inset !important;
}
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-title { color: #e2e8f0 !important; }
html[data-theme="dark"] .card .display-6 { color: #f1f5f9 !important; }

/* ── 4. KPI CARDS — glow azul-ciano nos números ────────────────────── */
html[data-theme="dark"] .we-kpi-frozen .display-6 {
    color: #f0f9ff !important;
    text-shadow: 0 0 16px rgba(34, 211, 238, 0.40) !important;
}
html[data-theme="dark"] .we-kpi-frozen h6 {
    color: #94a3b8 !important;
}
html[data-theme="dark"] .we-kpi-frozen p {
    color: #64748b !important;
}
html[data-theme="dark"] .we-kpi-frozen [data-feather] {
    color: #22d3ee !important;
    stroke: #22d3ee !important;
    filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.40)) !important;
}

/* ── 5. HEADER / BREADCRUMB / TÍTULOS ──────────────────────────────── */
html[data-theme="dark"] .page-title {
    color: #f0f9ff !important;
    text-shadow: 0 0 20px rgba(34, 211, 238, 0.20) !important;
}
html[data-theme="dark"] .we-subtitle { color: #94a3b8 !important; }

html[data-theme="dark"] .breadcrumb-item,
html[data-theme="dark"] .breadcrumb-item a {
    color: #94a3b8 !important;
}
html[data-theme="dark"] .breadcrumb-item a:hover { color: #22d3ee !important; }
html[data-theme="dark"] .breadcrumb-item.active { color: #22d3ee !important; }
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: #475569 !important;
}

/* ── 6. SEARCH BOX (topbar) ────────────────────────────────────────── */
html[data-theme="dark"] .app-search input,
html[data-theme="dark"] .nav-item.search-box input {
    background: rgba(13, 27, 58, 0.6) !important;
    border: 1px solid rgba(56, 189, 248, 0.20) !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .app-search input::placeholder {
    color: #64748b !important;
}
html[data-theme="dark"] .app-search input:focus {
    border-color: #22d3ee !important;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.20),
                0 0 20px rgba(34, 211, 238, 0.15) !important;
    background: rgba(7, 15, 35, 0.8) !important;
}

/* ── 7. SINO DE NOTIFICAÇÕES ───────────────────────────────────────── */
html[data-theme="dark"] .top-navbar .nav-link,
html[data-theme="dark"] .top-navbar .nav-link i,
html[data-theme="dark"] .top-navbar .nav-link svg {
    color: #cbd5e1 !important;
    stroke: #cbd5e1 !important;
}
html[data-theme="dark"] .top-navbar .nav-link:hover,
html[data-theme="dark"] .top-navbar .nav-link:hover i,
html[data-theme="dark"] .top-navbar .nav-link:hover svg {
    color: #22d3ee !important;
    stroke: #22d3ee !important;
}

/* ── 8. BOTÕES ─────────────────────────────────────────────────────── */
html[data-theme="dark"] .we-pill-btn,
html[data-theme="dark"] .we-pill-btn--green {
    background: linear-gradient(135deg, #0ea5e9 0%, #22d3ee 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.40),
                0 0 0 1px rgba(34, 211, 238, 0.30) inset !important;
}
html[data-theme="dark"] .we-pill-btn:hover {
    box-shadow: 0 6px 24px rgba(14, 165, 233, 0.55),
                0 0 0 1px rgba(34, 211, 238, 0.50) inset !important;
    transform: translateY(-1px);
}

html[data-theme="dark"] .btn-success {
    background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35) !important;
}
html[data-theme="dark"] .btn-success:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%) !important;
}

html[data-theme="dark"] .btn-info {
    background: rgba(14, 165, 233, 0.15) !important;
    border: 1px solid rgba(34, 211, 238, 0.30) !important;
    color: #22d3ee !important;
}

/* ── 9. INPUTS / FORMS ─────────────────────────────────────────────── */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background: rgba(13, 27, 58, 0.5) !important;
    border: 1px solid rgba(56, 189, 248, 0.20) !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .form-control::placeholder { color: #64748b !important; }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    border-color: #22d3ee !important;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15) !important;
    background: rgba(7, 15, 35, 0.7) !important;
}
html[data-theme="dark"] .form-label,
html[data-theme="dark"] label { color: #cbd5e1 !important; }

/* ── 10. TABELAS ───────────────────────────────────────────────────── */
html[data-theme="dark"] table,
html[data-theme="dark"] .table {
    color: #cbd5e1 !important;
}
html[data-theme="dark"] .table thead,
html[data-theme="dark"] .grid-view table thead {
    background: rgba(7, 15, 35, 0.7) !important;
}
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .grid-view table thead th {
    color: #94a3b8 !important;
    border-color: rgba(56, 189, 248, 0.15) !important;
}
html[data-theme="dark"] .table tbody tr {
    border-color: rgba(56, 189, 248, 0.08) !important;
}
html[data-theme="dark"] .table tbody tr:hover {
    background: rgba(34, 211, 238, 0.05) !important;
}
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background: rgba(13, 27, 58, 0.30) !important;
}

/* ── 11. DROPDOWNS ─────────────────────────────────────────────────── */
html[data-theme="dark"] .dropdown-menu {
    background: rgba(10, 20, 40, 0.95) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(56, 189, 248, 0.20) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.50),
                0 0 0 1px rgba(34, 211, 238, 0.10) inset !important;
}
html[data-theme="dark"] .dropdown-item { color: #cbd5e1 !important; }
html[data-theme="dark"] .dropdown-item:hover {
    background: rgba(34, 211, 238, 0.10) !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .dropdown-divider { border-color: rgba(56, 189, 248, 0.15) !important; }

/* Header colorido do dropdown do avatar */
html[data-theme="dark"] .we-user-dropdown-header {
    background: linear-gradient(135deg, rgba(7, 15, 35, 0.95) 0%, rgba(13, 27, 58, 0.95) 100%) !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.20) !important;
}
html[data-theme="dark"] .we-user-dropdown-header h4 {
    color: #f0f9ff !important;
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.30);
}
html[data-theme="dark"] .we-user-dropdown-header p { color: #94a3b8 !important; }

/* ── 12. MODAIS ────────────────────────────────────────────────────── */
html[data-theme="dark"] .modal-content {
    background: rgba(10, 20, 40, 0.95) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(56, 189, 248, 0.20) !important;
    color: #e2e8f0 !important;
}
html[data-theme="dark"] .modal-header { border-bottom-color: rgba(56, 189, 248, 0.15) !important; }
html[data-theme="dark"] .modal-footer { border-top-color: rgba(56, 189, 248, 0.15) !important; }
html[data-theme="dark"] .modal-title { color: #f0f9ff !important; }

/* ── 13. FOOTER ────────────────────────────────────────────────────── */
html[data-theme="dark"] .footer {
    color: rgba(148, 163, 184, 0.55) !important;
}
html[data-theme="dark"] .footer a { color: rgba(148, 163, 184, 0.55) !important; }
html[data-theme="dark"] .footer a:hover { color: #22d3ee !important; }

/* ── 14. PRELOADER ─────────────────────────────────────────────────── */
html[data-theme="dark"] .preloader {
    background: rgba(5, 10, 31, 0.92) !important;
}
html[data-theme="dark"] .we-preloader-logo {
    filter: drop-shadow(0 4px 16px rgba(34, 211, 238, 0.50)) !important;
}

/* ── 15. SCROLLBARS ────────────────────────────────────────────────── */
html[data-theme="dark"] .we-scroll-section,
html[data-theme="dark"] .left-sidebar {
    scrollbar-color: rgba(56, 189, 248, 0.30) transparent !important;
}
html[data-theme="dark"] .we-scroll-section::-webkit-scrollbar-thumb,
html[data-theme="dark"] .left-sidebar::-webkit-scrollbar-thumb {
    background: rgba(56, 189, 248, 0.30) !important;
}
html[data-theme="dark"] .we-scroll-section::-webkit-scrollbar-thumb:hover {
    background: rgba(34, 211, 238, 0.50) !important;
}

/* ── 16. STATUS BADGES (Off/On) ────────────────────────────────────── */
html[data-theme="dark"] [style*="background:#fee2e2"],
html[data-theme="dark"] [style*="background: #fee2e2"] {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.30) !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.20);
}
html[data-theme="dark"] [style*="background:#dcfce7"],
html[data-theme="dark"] [style*="background: #dcfce7"] {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.30) !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.20);
}
html[data-theme="dark"] [style*="background:#f1f5f9"],
html[data-theme="dark"] [style*="background: #f1f5f9"] {
    background: rgba(100, 116, 139, 0.15) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(100, 116, 139, 0.30) !important;
}

/* ── 17. TOOLTIP ───────────────────────────────────────────────────── */
html[data-theme="dark"] .tooltip .tooltip-inner {
    background: rgba(7, 15, 35, 0.95) !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(34, 211, 238, 0.30) !important;
    box-shadow: 0 0 16px rgba(34, 211, 238, 0.15);
}

/* ── 18. WE-PILL-BTN VARIANTS ──────────────────────────────────────── */
html[data-theme="dark"] .we-pill-btn--slate {
    background: rgba(13, 27, 58, 0.80) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(56, 189, 248, 0.20) !important;
}

/* ── 19. CHIPS / TAGS ──────────────────────────────────────────────── */
html[data-theme="dark"] .we-chip {
    background: rgba(34, 211, 238, 0.15) !important;
    color: #22d3ee !important;
    border: 1px solid rgba(34, 211, 238, 0.30) !important;
}

/* ── 20. AÇÕES DA GRID (botões Editar / Excluir) ───────────────────── */
html[data-theme="dark"] .we-action-btn--edit {
    background: rgba(100, 116, 139, 0.15) !important;
    color: #cbd5e1 !important;
    border-color: rgba(100, 116, 139, 0.30) !important;
}
html[data-theme="dark"] .we-action-btn--edit:hover {
    background: rgba(34, 211, 238, 0.15) !important;
    color: #22d3ee !important;
}
html[data-theme="dark"] .we-action-btn--delete {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.30) !important;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ OVERRIDE DE ALTA ESPECIFICIDADE — última camada                  ║
   ║ Lista regras que perdiam para o tema light por seletores compostos║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Itens do menu — texto/ícones (wenergy-theme usa .sidebar-nav ul .sidebar-item) */
html[data-theme="dark"] .left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link,
html[data-theme="dark"] .left-sidebar .sidebar-nav ul .sidebar-item a.sidebar-link {
    color: #cbd5e1 !important;
    background: transparent !important;
}
html[data-theme="dark"] .left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link i,
html[data-theme="dark"] .left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link svg,
html[data-theme="dark"] .left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link [data-feather] {
    color: #94a3b8 !important;
    stroke: #94a3b8 !important;
}
html[data-theme="dark"] .left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link:hover {
    background: rgba(14, 165, 233, 0.10) !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link:hover i,
html[data-theme="dark"] .left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link:hover svg {
    color: #22d3ee !important;
    stroke: #22d3ee !important;
}
html[data-theme="dark"] .left-sidebar .sidebar-nav ul .sidebar-item.selected > .sidebar-link,
html[data-theme="dark"] .left-sidebar .sidebar-nav ul .sidebar-item.active > .sidebar-link {
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.20) 0%, rgba(34, 211, 238, 0.05) 100%) !important;
    color: #22d3ee !important;
}
html[data-theme="dark"] .left-sidebar .sidebar-nav ul .sidebar-item.active > .sidebar-link i,
html[data-theme="dark"] .left-sidebar .sidebar-nav ul .sidebar-item.active > .sidebar-link svg {
    color: #22d3ee !important;
    stroke: #22d3ee !important;
}
html[data-theme="dark"] .left-sidebar .sidebar-nav ul .sidebar-item.active > .sidebar-link::before {
    background: #22d3ee !important;
    box-shadow: 0 0 8px #22d3ee !important;
}

/* Cards: especificidade reforçada com .container-fluid e .we-scroll-section */
html[data-theme="dark"] .page-wrapper .card,
html[data-theme="dark"] .container-fluid .card,
html[data-theme="dark"] .we-scroll-section .card,
html[data-theme="dark"] .we-kpi-frozen .card {
    background:       rgba(13, 27, 58, 0.65) !important;
    background-color: rgba(13, 27, 58, 0.65) !important;
    border:           1px solid rgba(56, 189, 248, 0.12) !important;
    color:            #e2e8f0 !important;
}

/* Body geral */
html[data-theme="dark"] body,
html[data-theme="dark"] #main-wrapper {
    background:       transparent !important;
    background-color: transparent !important;
}

/* Container-fluid (área de cards): garantir que não cria background opaco */
html[data-theme="dark"] .page-wrapper .container-fluid,
html[data-theme="dark"] .container-fluid {
    background: transparent !important;
}

/* Avatar card no rodapé da sidebar — reforço */
html[data-theme="dark"] .navbar-collapse .navbar-nav:not(.me-auto) .nav-item.dropdown {
    background: rgba(7, 15, 35, 0.95) !important;
    border-top: 1px solid rgba(56, 189, 248, 0.15) !important;
    box-shadow:
        0 -4px 16px rgba(0, 0, 0, 0.30),
        0 0 0 1px rgba(56, 189, 248, 0.10) inset !important;
}
html[data-theme="dark"] .navbar-collapse .navbar-nav:not(.me-auto) .nav-item.dropdown .nav-link {
    color: #cbd5e1 !important;
}

/* Header / Top navbar — fundo transparente para mostrar o background dark */
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .top-navbar,
html[data-theme="dark"] header.topbar,
html[data-theme="dark"] .navbar-collapse {
    background: transparent !important;
}

/* Logo no canto superior esquerdo */
html[data-theme="dark"] .navbar-brand {
    background: transparent !important;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ CORREÇÃO #1 — Caixa branca atrás da logo (navbar-header)         ║
   ║ O wenergy-theme.css usa #main-wrapper[data-layout="vertical"]    ║
   ║ .topbar .top-navbar .navbar-header — especificidade alta (com    ║
   ║ ID). Replicamos para aplicar fundo dark on-brand.                ║
   ╚══════════════════════════════════════════════════════════════════╝ */
html[data-theme="dark"] .topbar .top-navbar .navbar-header,
html[data-theme="dark"] #main-wrapper[data-layout="vertical"] .topbar .top-navbar .navbar-header,
html[data-theme="dark"] #main-wrapper[data-layout="vertical"] .topbar .top-navbar .navbar-header[data-logobg],
html[data-theme="dark"] #main-wrapper[data-layout="vertical"][data-sidebartype="full"] .topbar .top-navbar .navbar-header {
    background:       rgba(10, 20, 40, 0.85) !important;
    background-color: rgba(10, 20, 40, 0.85) !important;
    backdrop-filter:  blur(20px) saturate(180%) !important;
    border-bottom:    1px solid rgba(56, 189, 248, 0.10) !important;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.30),
        0 0 0 1px rgba(56, 189, 248, 0.08) inset !important;
}

/* No tema dark — usa a logo CLARA (light-logo) ao invés da dark */
html[data-theme="dark"] .topbar .top-navbar .navbar-header .dark-logo  { display: none !important; }
html[data-theme="dark"] .topbar .top-navbar .navbar-header .light-logo { display: inline !important; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ CORREÇÃO #2 — KPIs com texto branco/destacado                    ║
   ║ Pages usam <h3 class="mb-0"> dentro de .we-kpi-frozen + cards    ║
   ║ Sem override, Bootstrap aplica color: inherit que vira escuro    ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* H3/H4/H5 dentro de cards (KPIs principais) — branco com glow ciano */
html[data-theme="dark"] .we-kpi-frozen .card h3,
html[data-theme="dark"] .we-kpi-frozen .card h4,
html[data-theme="dark"] .we-kpi-frozen .card h5,
html[data-theme="dark"] .we-kpi-frozen .card .display-6,
html[data-theme="dark"] .we-kpi-frozen .card .display-7,
html[data-theme="dark"] .we-kpi-frozen .card span.display-6 {
    color:       #f0f9ff !important;
    text-shadow: 0 0 16px rgba(34, 211, 238, 0.30) !important;
    font-weight: 600 !important;
}

/* Bootstrap utility classes — preservar semântica mas com brilho dark */
html[data-theme="dark"] .we-kpi-frozen .card h3.text-success,
html[data-theme="dark"] .we-kpi-frozen .card .text-success {
    color:       #34d399 !important;
    text-shadow: 0 0 12px rgba(52, 211, 153, 0.40) !important;
}
html[data-theme="dark"] .we-kpi-frozen .card h3.text-danger,
html[data-theme="dark"] .we-kpi-frozen .card .text-danger {
    color:       #f87171 !important;
    text-shadow: 0 0 12px rgba(248, 113, 113, 0.40) !important;
}
html[data-theme="dark"] .we-kpi-frozen .card h3.text-warning,
html[data-theme="dark"] .we-kpi-frozen .card .text-warning {
    color:       #fbbf24 !important;
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.40) !important;
}
html[data-theme="dark"] .we-kpi-frozen .card h3.text-info,
html[data-theme="dark"] .we-kpi-frozen .card .text-info,
html[data-theme="dark"] .we-kpi-frozen .card h3.text-primary,
html[data-theme="dark"] .we-kpi-frozen .card .text-primary {
    color:       #22d3ee !important;
    text-shadow: 0 0 12px rgba(34, 211, 238, 0.40) !important;
}

/* Rótulos h6 dos KPIs — cinza claro legível */
html[data-theme="dark"] .we-kpi-frozen .card h6 {
    color: #94a3b8 !important;
}

/* H3 page-title em qualquer card (não só we-kpi-frozen) — fallback geral */
html[data-theme="dark"] .card h3.mb-0,
html[data-theme="dark"] .card h4.mb-0 {
    color: #f0f9ff !important;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ TABELAS / GRIDS — padrão "data table" dark                       ║
   ║                                                                    ║
   ║ ESTRATÉGIA DE OVERRIDE:                                           ║
   ║   1) Sobrescreve CSS vars do Bootstrap 5 (--bs-table-*)           ║
   ║   2) Seletor `> tbody > tr > *` (cobre o stripe que BS5 aplica    ║
   ║      no <td>, não no <tr>)                                         ║
   ║   3) Override de inline styles do PHP (background:#f8fafc no      ║
   ║      thead) via [style*="..."]                                     ║
   ║                                                                    ║
   ║ Paleta aplicada:                                                  ║
   ║   • Cabeçalho:       #0a1428 (azul-quase-preto) + texto slate    ║
   ║   • Linhas ímpares:  #0d1b35 (preto-azulado profundo)            ║
   ║   • Linhas pares:    #14213d (cinza-azulado intermediário)       ║
   ║   • Hover:           glow ciano sutil + border-left ciano        ║
   ║   • Texto:           #cbd5e1 (slate-300, branco quente discreto) ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ── 1) CSS vars do Bootstrap 5 — raiz da solução ─────────────────── */
/* O BS5 usa variáveis nas tabelas. Sobrescrevê-las aqui faz com que
   QUALQUER variante (.table-striped, .table-bordered, .table-borderless)
   herde automaticamente as cores do tema dark. */
html[data-theme="dark"] .page-wrapper .table,
html[data-theme="dark"] .page-wrapper .grid-view .table,
html[data-theme="dark"] .page-wrapper .grid-view table.table {
    --bs-table-bg:             transparent !important;
    --bs-table-color:          #cbd5e1 !important;
    --bs-table-border-color:   rgba(56, 189, 248, 0.06) !important;
    --bs-table-striped-bg:     #14213d !important;
    --bs-table-striped-color:  #cbd5e1 !important;
    --bs-table-hover-bg:       rgba(34, 211, 238, 0.08) !important;
    --bs-table-hover-color:    #f1f5f9 !important;
    --bs-table-active-bg:      rgba(34, 211, 238, 0.10) !important;
    --bs-table-active-color:   #f1f5f9 !important;
    --bs-emphasis-color-rgb:   20, 33, 61 !important;  /* base do stripe nth-of-type(odd) */
    color:                     #cbd5e1 !important;
    background-color:          transparent !important;
}

/* Container da tabela — fundo escuro discreto */
html[data-theme="dark"] .page-wrapper .table-responsive,
html[data-theme="dark"] .page-wrapper .card .table-responsive {
    background:   transparent !important;
    border-radius: 8px;
    overflow: hidden;
}

/* Tabela base — texto discreto, sem cor saturada */
html[data-theme="dark"] .page-wrapper table,
html[data-theme="dark"] .page-wrapper .table,
html[data-theme="dark"] .page-wrapper .grid-view table {
    color:           #cbd5e1 !important;
    background:      transparent !important;
    border-collapse: separate !important;
    border-spacing:  0 !important;
}

/* Células do corpo */
html[data-theme="dark"] .page-wrapper table td,
html[data-theme="dark"] .page-wrapper .table td,
html[data-theme="dark"] .page-wrapper .grid-view td {
    color:        #cbd5e1 !important;
    background:   transparent !important;
    border-color: rgba(56, 189, 248, 0.06) !important;
    border-style: solid !important;
}

/* Cabeçalho — fundo preto-azulado, texto slate uppercase */
html[data-theme="dark"] .page-wrapper table thead,
html[data-theme="dark"] .page-wrapper .table thead,
html[data-theme="dark"] .page-wrapper .grid-view table thead {
    background: rgba(10, 20, 40, 0.85) !important;
}
/* OVERRIDE de estilo inline do GridView (Yii):
   `headerRowOptions => 'style' => 'background:#f8fafc; color:#64748b;...'`
   aplica direto na <tr> do <thead>. Capturamos via attribute selector. */
html[data-theme="dark"] .page-wrapper .table thead tr,
html[data-theme="dark"] .page-wrapper .table thead tr[style],
html[data-theme="dark"] .page-wrapper .grid-view table thead tr,
html[data-theme="dark"] .page-wrapper .grid-view table thead tr[style] {
    background:       rgba(10, 20, 40, 0.85) !important;
    background-color: rgba(10, 20, 40, 0.85) !important;
    color:            #94a3b8 !important;
}
html[data-theme="dark"] .page-wrapper table thead th,
html[data-theme="dark"] .page-wrapper .table thead th,
html[data-theme="dark"] .page-wrapper .grid-view table thead th,
html[data-theme="dark"] .page-wrapper .table thead tr[style] th,
html[data-theme="dark"] .page-wrapper .grid-view table thead tr[style] th {
    color:           #94a3b8 !important;
    background:      transparent !important;
    border-color:    rgba(56, 189, 248, 0.15) !important;
    font-weight:     600 !important;
    letter-spacing:  0.4px !important;
}

/* Sticky thead (algumas tabelas usam style sticky inline) */
html[data-theme="dark"] .page-wrapper .table thead[style*="background"],
html[data-theme="dark"] .page-wrapper .table thead[style*="background"] tr,
html[data-theme="dark"] .page-wrapper .table thead[style*="background"] th {
    background:       rgba(10, 20, 40, 0.85) !important;
    background-color: rgba(10, 20, 40, 0.85) !important;
    color:            #94a3b8 !important;
    border-color:     rgba(56, 189, 248, 0.15) !important;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ ÚLTIMA CAMADA — supressão de TODOS os estilos inline do GridView ║
   ║                                                                    ║
   ║ Yii GridView cria:                                                ║
   ║   <tr style="background:#f8fafc; color:#64748b; ...">              ║
   ║     <th style="color:#64748b; font-weight:600;">NOME</th>          ║
   ║                                                                    ║
   ║ Especificidade EXTRA via .card .table-responsive .grid-view +     ║
   ║ background-image: none (zera shorthand do inline)                 ║
   ╚══════════════════════════════════════════════════════════════════╝ */
html[data-theme="dark"] .card .grid-view table > thead > tr,
html[data-theme="dark"] .card .grid-view table > thead > tr[style],
html[data-theme="dark"] .card .table-responsive .grid-view table > thead > tr,
html[data-theme="dark"] .card .table-responsive .grid-view table > thead > tr[style],
html[data-theme="dark"] .page-wrapper .card .grid-view table > thead > tr,
html[data-theme="dark"] .page-wrapper .card .grid-view table > thead > tr[style] {
    background:        rgba(10, 20, 40, 0.85) !important;
    background-color:  rgba(10, 20, 40, 0.85) !important;
    background-image:  none !important;  /* zera shorthand do inline */
    color:             #94a3b8 !important;
    border:            none !important;
    border-bottom:     1px solid rgba(56, 189, 248, 0.15) !important;
}

html[data-theme="dark"] .card .grid-view table > thead > tr > th,
html[data-theme="dark"] .card .grid-view table > thead > tr[style] > th,
html[data-theme="dark"] .card .grid-view table > thead > tr > th[style],
html[data-theme="dark"] .card .grid-view table > thead > tr[style] > th[style],
html[data-theme="dark"] .page-wrapper .card .grid-view table > thead > tr > th[style] {
    background:        transparent !important;
    background-color:  transparent !important;
    background-image:  none !important;
    color:             #94a3b8 !important;
    border:            none !important;
    border-bottom:     1px solid rgba(56, 189, 248, 0.15) !important;
    font-weight:       600 !important;
}

/* Mesma camada para tabelas SEM grid-view (ex: alarm-log-table direto) */
html[data-theme="dark"] .card .table-responsive table > thead > tr,
html[data-theme="dark"] .card .table-responsive table > thead > tr[style],
html[data-theme="dark"] .card .table-responsive table > thead[style] > tr {
    background:        rgba(10, 20, 40, 0.85) !important;
    background-color:  rgba(10, 20, 40, 0.85) !important;
    background-image:  none !important;
    color:             #94a3b8 !important;
}
html[data-theme="dark"] .card .table-responsive table > thead > tr > th,
html[data-theme="dark"] .card .table-responsive table > thead > tr > th[style],
html[data-theme="dark"] .card .table-responsive table > thead[style] > tr > th {
    background:        transparent !important;
    background-color:  transparent !important;
    background-image:  none !important;
    color:             #94a3b8 !important;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ /sites/unidades — cards de unidade (.branch-*) + sites (.s-card) ║
   ║                                                                    ║
   ║ A view tem CSS hardcoded com cores claras (#fafcfd, #f8fafe,      ║
   ║ #fff, #263238). Precisamos override completo para o tema dark.   ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Container do card de unidade */
html[data-theme="dark"] .branch-card-wrap > .card {
    background:       rgba(13, 27, 58, 0.65) !important;
    background-color: rgba(13, 27, 58, 0.65) !important;
    border:           1px solid rgba(56, 189, 248, 0.12) !important;
    box-shadow:       0 4px 16px rgba(0, 0, 0, 0.30),
                      0 0 0 1px rgba(56, 189, 248, 0.05) inset !important;
}

/* Header da unidade (avatar + nome + endereço + stats) */
html[data-theme="dark"] .branch-top {
    background: transparent !important;
}
html[data-theme="dark"] .branch-top:hover {
    background: rgba(34, 211, 238, 0.05) !important;
}

/* Avatar/logo da unidade — fundo dark com glow ciano sutil */
html[data-theme="dark"] .branch-logo {
    background:       rgba(7, 15, 35, 0.80) !important;
    background-color: rgba(7, 15, 35, 0.80) !important;
    border:           1px solid rgba(56, 189, 248, 0.20) !important;
    box-shadow:       0 0 8px rgba(34, 211, 238, 0.10) !important;
}

/* Nome da unidade — antes #263238 (preto), agora branco */
html[data-theme="dark"] .branch-info h5 {
    color: #f0f9ff !important;
}
html[data-theme="dark"] .branch-info .branch-client {
    color: #94a3b8 !important;
}
html[data-theme="dark"] .branch-info .branch-addr {
    color: #64748b !important;
}

/* Badges de status (X online / Y offline) */
html[data-theme="dark"] .branch-stats .bs-online {
    background: rgba(16, 185, 129, 0.15) !important;
    color:      #6ee7b7 !important;
    border:     1px solid rgba(16, 185, 129, 0.30) !important;
}
html[data-theme="dark"] .branch-stats .bs-offline {
    background: rgba(239, 68, 68, 0.15) !important;
    color:      #fca5a5 !important;
    border:     1px solid rgba(239, 68, 68, 0.30) !important;
}

/* Barra de performance (CONSUMO | META | BASELINE | % Economia) */
/* ANTES: background: #f8fafe (cinza muito claro/branco) */
html[data-theme="dark"] .branch-perf {
    background:       rgba(7, 15, 35, 0.55) !important;
    background-color: rgba(7, 15, 35, 0.55) !important;
    border-top:       1px solid rgba(56, 189, 248, 0.10) !important;
}
html[data-theme="dark"] .bp-icon { color: #22d3ee !important; }
html[data-theme="dark"] .bp-label { color: #64748b !important; }
html[data-theme="dark"] .bp-val   { color: #e2e8f0 !important; }
html[data-theme="dark"] .bp-sep   { background: rgba(56, 189, 248, 0.15) !important; }

/* Pills de economia */
html[data-theme="dark"] .bp-green {
    background: rgba(16, 185, 129, 0.15) !important;
    color:      #6ee7b7 !important;
    border:     1px solid rgba(16, 185, 129, 0.30) !important;
}
html[data-theme="dark"] .bp-yellow {
    background: rgba(251, 191, 36, 0.15) !important;
    color:      #fcd34d !important;
    border:     1px solid rgba(251, 191, 36, 0.30) !important;
}
html[data-theme="dark"] .bp-red {
    background: rgba(239, 68, 68, 0.15) !important;
    color:      #fca5a5 !important;
    border:     1px solid rgba(239, 68, 68, 0.30) !important;
}
html[data-theme="dark"] .bp-neutral {
    background: rgba(100, 116, 139, 0.15) !important;
    color:      #cbd5e1 !important;
    border:     1px solid rgba(100, 116, 139, 0.30) !important;
}

/* Chevron de expandir */
html[data-theme="dark"] .branch-chevron { color: #64748b !important; }
html[data-theme="dark"] .branch-chevron:hover { color: #22d3ee !important; }

/* Resource tabs (Água / Energia / Gás / Diesel quando expandido) */
html[data-theme="dark"] .resource-tabs {
    border-bottom: 1px solid rgba(56, 189, 248, 0.10) !important;
}
html[data-theme="dark"] .resource-tab { color: #64748b !important; }
html[data-theme="dark"] .resource-tab:hover { color: #cbd5e1 !important; }
html[data-theme="dark"] .resource-tab .tab-count {
    background: rgba(100, 116, 139, 0.20) !important;
    color:      #94a3b8 !important;
}

/* Resource panel header (info do total de sites) */
html[data-theme="dark"] .resource-panel-header .rph-info { color: #64748b !important; }
html[data-theme="dark"] .resource-panel-header .rph-info strong { color: #cbd5e1 !important; }

/* Cards individuais de SITE dentro do painel expandido */
html[data-theme="dark"] .s-card {
    background:       rgba(7, 15, 35, 0.65) !important;
    background-color: rgba(7, 15, 35, 0.65) !important;
    border:           1px solid rgba(56, 189, 248, 0.12) !important;
}
html[data-theme="dark"] .s-card:hover {
    border-color: rgba(34, 211, 238, 0.25) !important;
    box-shadow:   0 8px 24px rgba(0, 0, 0, 0.40),
                  0 0 16px rgba(34, 211, 238, 0.10) !important;
}
html[data-theme="dark"] .s-card .s-name { color: #f0f9ff !important; }
html[data-theme="dark"] .s-card .s-status { color: #94a3b8 !important; }
html[data-theme="dark"] .s-card .s-dot { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.30) !important; }
html[data-theme="dark"] .s-card .s-dot.on  {
    background: #34d399 !important;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25),
                0 0 8px rgba(52, 211, 153, 0.40) !important;
}
html[data-theme="dark"] .s-card .s-dot.off {
    background: #f87171 !important;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.20),
                0 0 8px rgba(248, 113, 113, 0.30) !important;
}

/* Empty state */
html[data-theme="dark"] .empty-state { color: #64748b !important; }
html[data-theme="dark"] .empty-state svg { opacity: 0.5 !important; }

/* Filtro "Filtrar por nome, cliente ou status..." */
html[data-theme="dark"] .we-units-filter input {
    background:       rgba(13, 27, 58, 0.70) !important;
    background-color: rgba(13, 27, 58, 0.70) !important;
    border:           1px solid rgba(56, 189, 248, 0.20) !important;
    color:            #f1f5f9 !important;
}
html[data-theme="dark"] .we-units-filter input::placeholder {
    color: #64748b !important;
}
html[data-theme="dark"] .we-units-filter input:focus {
    border-color: #22d3ee !important;
    box-shadow:   0 0 0 3px rgba(34, 211, 238, 0.15),
                  0 0 16px rgba(34, 211, 238, 0.10) !important;
    background:   rgba(7, 15, 35, 0.85) !important;
}
html[data-theme="dark"] .we-units-filter .search-icon {
    color: #64748b !important;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ OVERRIDE FINAL — especificidade COMPOSTA para /sites/unidades    ║
   ║                                                                    ║
   ║ A view unidades.php tem <style> inline no body que vem DEPOIS    ║
   ║ no DOM. Vamos vencer com seletores extremamente específicos.     ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Container do card de unidade — força background dark com max specificity */
html[data-theme="dark"] body .branch-card-wrap > .card,
html[data-theme="dark"] body div.branch-card-wrap > div.card {
    background:       rgba(13, 27, 58, 0.65) !important;
    background-color: rgba(13, 27, 58, 0.65) !important;
    background-image: none !important;
    border:           1px solid rgba(56, 189, 248, 0.18) !important;
    box-shadow:       0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

/* Header da unidade — hover ciano */
html[data-theme="dark"] body div.branch-top {
    background:       transparent !important;
    background-color: transparent !important;
}
html[data-theme="dark"] body div.branch-top:hover {
    background:       rgba(34, 211, 238, 0.06) !important;
    background-color: rgba(34, 211, 238, 0.06) !important;
}

/* TÍTULO da unidade (h5) — máxima especificidade para vencer */
html[data-theme="dark"] body .branch-card-wrap .branch-info h5,
html[data-theme="dark"] body div.branch-card-wrap div.branch-info h5 {
    color: #f0f9ff !important;
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.15);
}
html[data-theme="dark"] body .branch-card-wrap .branch-info .branch-client,
html[data-theme="dark"] body div.branch-card-wrap div.branch-info div.branch-client {
    color: #94a3b8 !important;
}
html[data-theme="dark"] body .branch-card-wrap .branch-info .branch-addr,
html[data-theme="dark"] body div.branch-card-wrap div.branch-info div.branch-addr {
    color: #64748b !important;
}

/* Logo da unidade */
html[data-theme="dark"] body div.branch-card-wrap img.branch-logo {
    background:       rgba(7, 15, 35, 0.90) !important;
    background-color: rgba(7, 15, 35, 0.90) !important;
    background-image: none !important;
    border:           1px solid rgba(56, 189, 248, 0.25) !important;
    box-shadow:       0 0 12px rgba(34, 211, 238, 0.12) !important;
}

/* Barra de performance (CONSUMO | META | BASELINE) — máxima especificidade */
html[data-theme="dark"] body .branch-card-wrap .branch-perf,
html[data-theme="dark"] body div.branch-card-wrap div.branch-perf {
    background:       rgba(7, 15, 35, 0.65) !important;
    background-color: rgba(7, 15, 35, 0.65) !important;
    background-image: none !important;
    border-top:       1px solid rgba(56, 189, 248, 0.12) !important;
}
html[data-theme="dark"] body .branch-card-wrap .branch-perf .bp-icon  { color: #22d3ee !important; }
html[data-theme="dark"] body .branch-card-wrap .branch-perf .bp-label { color: #94a3b8 !important; }
html[data-theme="dark"] body .branch-card-wrap .branch-perf .bp-val   { color: #f0f9ff !important; }
html[data-theme="dark"] body .branch-card-wrap .branch-perf .bp-sep   {
    background:       rgba(56, 189, 248, 0.20) !important;
    background-color: rgba(56, 189, 248, 0.20) !important;
}

/* Cards de sites dentro do painel expandido */
html[data-theme="dark"] body div.s-card {
    background:       rgba(7, 15, 35, 0.75) !important;
    background-color: rgba(7, 15, 35, 0.75) !important;
    background-image: none !important;
    border:           1px solid rgba(56, 189, 248, 0.15) !important;
}
html[data-theme="dark"] body div.s-card .s-name {
    color: #f0f9ff !important;
}

/* Resource tabs (Água/Energia/Gás/Diesel quando expande) */
html[data-theme="dark"] body div.resource-tabs {
    border-bottom: 1px solid rgba(56, 189, 248, 0.15) !important;
}
html[data-theme="dark"] body div.resource-tabs .resource-tab {
    color: #64748b !important;
}
html[data-theme="dark"] body div.resource-tabs .resource-tab:hover {
    color: #cbd5e1 !important;
}

/* Chevron de expandir */
html[data-theme="dark"] body .branch-card-wrap i.branch-chevron {
    color: #64748b !important;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ AUTOCOMPLETE (jQuery UI) — dropdown de busca                     ║
   ║ Usado em: topbar (full_search) + filtro do /sites/calendario     ║
   ╚══════════════════════════════════════════════════════════════════╝ */
html[data-theme="dark"] .ui-autocomplete,
html[data-theme="dark"] ul.ui-autocomplete,
html[data-theme="dark"] body ul.ui-autocomplete {
    background:       rgba(10, 20, 40, 0.97) !important;
    background-color: rgba(10, 20, 40, 0.97) !important;
    border:           1px solid rgba(56, 189, 248, 0.25) !important;
    box-shadow:       0 12px 40px rgba(0, 0, 0, 0.55),
                      0 0 0 1px rgba(34, 211, 238, 0.10) inset !important;
    border-radius:    8px !important;
    backdrop-filter:  blur(20px) saturate(180%) !important;
    color:            #f1f5f9 !important;
    padding:          4px !important;
}
html[data-theme="dark"] .ui-autocomplete .ui-menu-item,
html[data-theme="dark"] .ui-autocomplete li.ui-menu-item {
    background: transparent !important;
    border:     none !important;
    margin:     2px 0 !important;
    border-radius: 6px !important;
}
html[data-theme="dark"] .ui-autocomplete .ui-menu-item-wrapper,
html[data-theme="dark"] .ui-autocomplete li.ui-menu-item div,
html[data-theme="dark"] .ui-autocomplete li.ui-menu-item a {
    color:           #e2e8f0 !important;
    background:      transparent !important;
    border:          none !important;
    padding:         9px 12px !important;
    font-size:       13px !important;
    border-radius:   6px !important;
    transition:      background .12s, color .12s !important;
}
html[data-theme="dark"] .ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
html[data-theme="dark"] .ui-autocomplete .ui-menu-item-wrapper:hover,
html[data-theme="dark"] .ui-autocomplete li.ui-menu-item:hover > div,
html[data-theme="dark"] .ui-autocomplete li.ui-menu-item.ui-state-active > div,
html[data-theme="dark"] .ui-autocomplete li.ui-menu-item:hover a,
html[data-theme="dark"] .ui-autocomplete li.ui-menu-item a:hover,
html[data-theme="dark"] .ui-autocomplete .ui-state-focus,
html[data-theme="dark"] .ui-autocomplete .ui-state-hover {
    background:       linear-gradient(90deg, rgba(34,211,238,0.18) 0%, rgba(14,165,233,0.10) 100%) !important;
    background-color: rgba(34, 211, 238, 0.15) !important;
    color:            #f0f9ff !important;
    border:           none !important;
    box-shadow:       inset 3px 0 0 #22d3ee !important;
}

/* Categorias do autocomplete (Site / Unidade / Grupo) — header */
html[data-theme="dark"] .ui-autocomplete-category,
html[data-theme="dark"] .ui-menu-divider {
    background: rgba(7, 15, 35, 0.85) !important;
    color:      #94a3b8 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    font-size:  10px !important;
    padding:    8px 12px 4px !important;
    border:     none !important;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ /sites/calendario — caixas de dias + título do mês               ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Caixas de cada dia (1, 2, 3...) — antes branco #fff */
html[data-theme="dark"] body .calendar .day,
html[data-theme="dark"] body div.calendar div.day {
    background:       rgba(13, 27, 58, 0.65) !important;
    background-color: rgba(13, 27, 58, 0.65) !important;
    background-image: none !important;
    border:           1px solid rgba(56, 189, 248, 0.15) !important;
    box-shadow:       0 1px 3px rgba(0, 0, 0, 0.30) !important;
}
html[data-theme="dark"] body .calendar .day:hover {
    border-color: rgba(34, 211, 238, 0.40) !important;
    box-shadow:   0 4px 16px rgba(0, 0, 0, 0.40),
                  0 0 16px rgba(34, 211, 238, 0.15) !important;
}

/* Número do dia (1, 2, 3...) — antes #1e293b (preto) */
html[data-theme="dark"] body .calendar .day .text-left {
    color: #f0f9ff !important;
}

/* Cabeçalho DOM/SEG/TER/QUA */
html[data-theme="dark"] body .calendar .day-header {
    color: #94a3b8 !important;
}

/* Pill de consumo total no canto do dia */
html[data-theme="dark"] body .calendar .total-consumption.subtle-display {
    background: rgba(34, 211, 238, 0.15) !important;
    color:      #22d3ee !important;
    border:     1px solid rgba(34, 211, 238, 0.25) !important;
}

/* Título "Junho 2026" — gerado dinamicamente como <h2 class="text-center"> */
html[data-theme="dark"] #calendar-container > h2.text-center,
html[data-theme="dark"] #initial-calendar > h2.text-center,
html[data-theme="dark"] body h2.text-center {
    color: #f0f9ff !important;
    text-shadow: 0 0 16px rgba(34, 211, 238, 0.25);
    font-weight: 700 !important;
}

/* Inputs de filtro do calendário */
html[data-theme="dark"] body .we-cal-filter-row .filter-search input,
html[data-theme="dark"] body .we-cal-filter-row .filter-date input {
    background:       rgba(13, 27, 58, 0.70) !important;
    background-color: rgba(13, 27, 58, 0.70) !important;
    background-image: none !important;
    border:           1px solid rgba(56, 189, 248, 0.20) !important;
    color:            #f1f5f9 !important;
}
html[data-theme="dark"] body .we-cal-filter-row .filter-search input::placeholder,
html[data-theme="dark"] body .we-cal-filter-row .filter-date input::placeholder {
    color: #64748b !important;
}
html[data-theme="dark"] body .we-cal-filter-row .filter-search input:focus,
html[data-theme="dark"] body .we-cal-filter-row .filter-date input:focus {
    border-color: #22d3ee !important;
    box-shadow:   0 0 0 3px rgba(34, 211, 238, 0.15) !important;
    background:   rgba(7, 15, 35, 0.85) !important;
}
html[data-theme="dark"] body .we-cal-filter-row .filter-search .search-icon,
html[data-theme="dark"] body .we-cal-filter-row .filter-date .cal-icon {
    color: #64748b !important;
}

/* Botão "Consultar dados" — gradient ciano-W-Energy */
html[data-theme="dark"] body .we-cal-btn-consult {
    background: linear-gradient(135deg, #0ea5e9 0%, #22d3ee 100%) !important;
    color:      #ffffff !important;
    box-shadow: 0 4px 14px rgba(34, 211, 238, 0.30) !important;
}
html[data-theme="dark"] body .we-cal-btn-consult:hover {
    box-shadow: 0 6px 20px rgba(34, 211, 238, 0.45) !important;
}
html[data-theme="dark"] body .we-cal-btn-reset {
    background: rgba(100, 116, 139, 0.20) !important;
    color:      #cbd5e1 !important;
}
html[data-theme="dark"] body .we-cal-btn-reset:hover {
    background: rgba(239, 68, 68, 0.20) !important;
    color:      #f87171 !important;
}

/* Loading overlay */
html[data-theme="dark"] #we-cal-loading .we-cal-loading-box {
    background:       rgba(10, 20, 40, 0.95) !important;
    background-color: rgba(10, 20, 40, 0.95) !important;
    border:           1px solid rgba(34, 211, 238, 0.25) !important;
    box-shadow:       0 20px 60px rgba(0, 0, 0, 0.60),
                      0 0 32px rgba(34, 211, 238, 0.15) !important;
}
html[data-theme="dark"] #we-cal-loading .we-cal-loading-spinner {
    border-color: rgba(56, 189, 248, 0.20) !important;
    border-top-color: #22d3ee !important;
}
html[data-theme="dark"] #we-cal-loading .we-cal-loading-text { color: #f0f9ff !important; }
html[data-theme="dark"] #we-cal-loading .we-cal-loading-sub  { color: #94a3b8 !important; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ APEXCHARTS / ECHARTS — paleta de linhas/eixos dark               ║
   ║ Sobrescreve cores hardcoded SVG via filtros e seletores           ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Linhas de grid dos gráficos ApexCharts */
html[data-theme="dark"] .apexcharts-gridline,
html[data-theme="dark"] .apexcharts-grid line,
html[data-theme="dark"] .apexcharts-xaxis-tick,
html[data-theme="dark"] .apexcharts-yaxis-tick {
    stroke: rgba(56, 189, 248, 0.10) !important;
}

/* Texto dos eixos (labels) */
html[data-theme="dark"] .apexcharts-text,
html[data-theme="dark"] .apexcharts-xaxis-label,
html[data-theme="dark"] .apexcharts-yaxis-label,
html[data-theme="dark"] .apexcharts-xaxis text,
html[data-theme="dark"] .apexcharts-yaxis text,
html[data-theme="dark"] .apexcharts-legend-text {
    fill:  #94a3b8 !important;
    color: #94a3b8 !important;
}

/* Título dos eixos */
html[data-theme="dark"] .apexcharts-yaxis-title-text,
html[data-theme="dark"] .apexcharts-xaxis-title-text {
    fill:  #cbd5e1 !important;
    color: #cbd5e1 !important;
}

/* Borda do eixo */
html[data-theme="dark"] .apexcharts-xaxis line,
html[data-theme="dark"] .apexcharts-yaxis line {
    stroke: rgba(56, 189, 248, 0.20) !important;
}

/* Tooltip dos gráficos */
html[data-theme="dark"] .apexcharts-tooltip,
html[data-theme="dark"] .apexcharts-xaxistooltip,
html[data-theme="dark"] .apexcharts-yaxistooltip {
    background:       rgba(7, 15, 35, 0.95) !important;
    background-color: rgba(7, 15, 35, 0.95) !important;
    border:           1px solid rgba(34, 211, 238, 0.30) !important;
    box-shadow:       0 8px 24px rgba(0, 0, 0, 0.50),
                      0 0 16px rgba(34, 211, 238, 0.10) !important;
    color:            #f1f5f9 !important;
}
html[data-theme="dark"] .apexcharts-tooltip-title,
html[data-theme="dark"] .apexcharts-tooltip-text {
    background:       rgba(7, 15, 35, 0.95) !important;
    color:            #f0f9ff !important;
    border:           none !important;
}
html[data-theme="dark"] .apexcharts-tooltip-text-y-label,
html[data-theme="dark"] .apexcharts-tooltip-text-y-value,
html[data-theme="dark"] .apexcharts-tooltip-text-z-label,
html[data-theme="dark"] .apexcharts-tooltip-text-z-value {
    color: #cbd5e1 !important;
}

/* Toolbar (zoom/pan/menu) */
html[data-theme="dark"] .apexcharts-menu {
    background:       rgba(10, 20, 40, 0.95) !important;
    border:           1px solid rgba(56, 189, 248, 0.25) !important;
    color:            #cbd5e1 !important;
}
html[data-theme="dark"] .apexcharts-menu-item {
    color: #cbd5e1 !important;
}
html[data-theme="dark"] .apexcharts-menu-item:hover {
    background: rgba(34, 211, 238, 0.15) !important;
    color:      #f0f9ff !important;
}
html[data-theme="dark"] .apexcharts-toolbar svg {
    fill: #64748b !important;
}
html[data-theme="dark"] .apexcharts-toolbar svg:hover {
    fill: #22d3ee !important;
}

/* eCharts — overlay tooltip também */
html[data-theme="dark"] [_echarts_instance_] {
    color: #cbd5e1 !important;
}

/* Linha alternada — combinação preto/cinza-azulado clássica dark */
html[data-theme="dark"] .page-wrapper .table tbody tr:nth-of-type(odd),
html[data-theme="dark"] .page-wrapper .table-striped tbody tr:nth-of-type(odd),
html[data-theme="dark"] .page-wrapper .grid-view table tbody tr:nth-of-type(odd) {
    background: #0d1b35 !important;
}
html[data-theme="dark"] .page-wrapper .table tbody tr:nth-of-type(odd) td,
html[data-theme="dark"] .page-wrapper .table-striped tbody tr:nth-of-type(odd) td,
html[data-theme="dark"] .page-wrapper .grid-view table tbody tr:nth-of-type(odd) td {
    background: #0d1b35 !important;
}

html[data-theme="dark"] .page-wrapper .table tbody tr:nth-of-type(even),
html[data-theme="dark"] .page-wrapper .table-striped tbody tr:nth-of-type(even),
html[data-theme="dark"] .page-wrapper .grid-view table tbody tr:nth-of-type(even) {
    background: #14213d !important;
}
html[data-theme="dark"] .page-wrapper .table tbody tr:nth-of-type(even) td,
html[data-theme="dark"] .page-wrapper .table-striped tbody tr:nth-of-type(even) td,
html[data-theme="dark"] .page-wrapper .grid-view table tbody tr:nth-of-type(even) td {
    background: #14213d !important;
}

/* Hover — leve glow ciano + borda esquerda destacada */
html[data-theme="dark"] .page-wrapper .table tbody tr:hover,
html[data-theme="dark"] .page-wrapper .table-striped tbody tr:hover,
html[data-theme="dark"] .page-wrapper .grid-view table tbody tr:hover,
html[data-theme="dark"] .page-wrapper .table tbody tr:hover td,
html[data-theme="dark"] .page-wrapper .table-striped tbody tr:hover td,
html[data-theme="dark"] .page-wrapper .grid-view table tbody tr:hover td {
    background: rgba(34, 211, 238, 0.06) !important;
    color:      #f1f5f9 !important;
}
html[data-theme="dark"] .page-wrapper .table tbody tr:hover td:first-child,
html[data-theme="dark"] .page-wrapper .table-striped tbody tr:hover td:first-child,
html[data-theme="dark"] .page-wrapper .grid-view table tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 #22d3ee;
}

/* Borda inferior entre linhas — sutil */
html[data-theme="dark"] .page-wrapper .table tbody tr td,
html[data-theme="dark"] .page-wrapper .grid-view table tbody tr td {
    border-bottom: 1px solid rgba(56, 189, 248, 0.05) !important;
}

/* Inputs de filtro dentro do grid-view (linha abaixo do cabeçalho) */
html[data-theme="dark"] .grid-view .filters,
html[data-theme="dark"] .grid-view .filters td {
    background: rgba(7, 15, 35, 0.70) !important;
}
html[data-theme="dark"] .grid-view .filters input,
html[data-theme="dark"] .grid-view .filters select {
    background: rgba(13, 27, 58, 0.70) !important;
    border:     1px solid rgba(56, 189, 248, 0.20) !important;
    color:      #f1f5f9 !important;
}

/* "Última leitura" e textos secundários no fundo dos KPIs */
html[data-theme="dark"] .we-kpi-frozen .card p {
    color: #64748b !important;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ AJUSTE: suaviza o text-shadow dos KPIs                           ║
   ║ Estava muito agressivo (neon exagerado), agora glow discreto     ║
   ╚══════════════════════════════════════════════════════════════════╝ */
html[data-theme="dark"] .we-kpi-frozen .card h3,
html[data-theme="dark"] .we-kpi-frozen .card h3.text-success,
html[data-theme="dark"] .we-kpi-frozen .card h3.text-danger,
html[data-theme="dark"] .we-kpi-frozen .card h3.text-warning,
html[data-theme="dark"] .we-kpi-frozen .card h3.text-info,
html[data-theme="dark"] .we-kpi-frozen .card h3.text-primary {
    /* glow reduzido a 8px (era 16px) e opacidade menor (0.25) */
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.20) !important;
}
html[data-theme="dark"] .we-kpi-frozen .card h3.text-success {
    text-shadow: 0 0 6px rgba(52, 211, 153, 0.25) !important;
}
html[data-theme="dark"] .we-kpi-frozen .card h3.text-danger {
    text-shadow: 0 0 6px rgba(248, 113, 113, 0.25) !important;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ STATUS BADGES em tabelas (Off/On, Em Ocorrência, Finalizado)     ║
   ║ Cores menos saturadas para evitar competição visual              ║
   ╚══════════════════════════════════════════════════════════════════╝ */
html[data-theme="dark"] .page-wrapper table [style*="background:#fee2e2"],
html[data-theme="dark"] .page-wrapper table [style*="background: #fee2e2"],
html[data-theme="dark"] .page-wrapper table [style*="#fee2e2"] {
    background: rgba(239, 68, 68, 0.12) !important;
    color:      #fca5a5 !important;
    border:     1px solid rgba(239, 68, 68, 0.25) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .page-wrapper table [style*="background:#dcfce7"],
html[data-theme="dark"] .page-wrapper table [style*="background: #dcfce7"],
html[data-theme="dark"] .page-wrapper table [style*="#dcfce7"] {
    background: rgba(16, 185, 129, 0.12) !important;
    color:      #6ee7b7 !important;
    border:     1px solid rgba(16, 185, 129, 0.25) !important;
    box-shadow: none !important;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ DROPDOWN DO SINO DE ALARMES (topbar)                             ║
   ║ Antes: titulo "Alarmes" ficava invisivel (cor azul em bg dark)   ║
   ╚══════════════════════════════════════════════════════════════════╝ */
html[data-theme="dark"] .mailbox,
html[data-theme="dark"] .dropdown-menu.mailbox {
    background:       rgba(10, 20, 40, 0.97) !important;
    background-color: rgba(10, 20, 40, 0.97) !important;
    border:           1px solid rgba(56, 189, 248, 0.25) !important;
    box-shadow:       0 12px 40px rgba(0, 0, 0, 0.55) !important;
    backdrop-filter:  blur(20px) saturate(180%) !important;
    color:            #f1f5f9 !important;
}
html[data-theme="dark"] .mailbox .border-bottom,
html[data-theme="dark"] .dropdown-menu.mailbox .border-bottom {
    border-bottom: 1px solid rgba(56, 189, 248, 0.20) !important;
}
html[data-theme="dark"] .mailbox .font-weight-medium,
html[data-theme="dark"] .dropdown-menu.mailbox .font-weight-medium,
html[data-theme="dark"] .mailbox .fs-4 {
    color: #f0f9ff !important;
    text-shadow: 0 0 12px rgba(34, 211, 238, 0.25);
}
html[data-theme="dark"] .mailbox .message-center,
html[data-theme="dark"] .mailbox .notifications {
    background: transparent !important;
    color:      #cbd5e1 !important;
}
html[data-theme="dark"] .mailbox .message-item {
    background: transparent !important;
    color:      #cbd5e1 !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.08) !important;
}
html[data-theme="dark"] .mailbox .message-item:hover {
    background: rgba(34, 211, 238, 0.08) !important;
    color:      #f0f9ff !important;
}
html[data-theme="dark"] .mailbox .nav-link.border-top,
html[data-theme="dark"] .mailbox a.nav-link.border-top,
html[data-theme="dark"] .mailbox .text-dark {
    background:    transparent !important;
    color:         #22d3ee !important;
    border-top:    1px solid rgba(56, 189, 248, 0.20) !important;
    font-weight:   600 !important;
}
html[data-theme="dark"] .mailbox .nav-link.border-top:hover {
    background: rgba(34, 211, 238, 0.10) !important;
    color:      #f0f9ff !important;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ DROPDOWN DO AVATAR — visibility dos itens                        ║
   ╚══════════════════════════════════════════════════════════════════╝ */
html[data-theme="dark"] .user-dd .dropdown-item,
html[data-theme="dark"] .dropdown-menu.user-dd .dropdown-item {
    color: #e2e8f0 !important;
    background: transparent !important;
}
html[data-theme="dark"] .user-dd .dropdown-item:hover {
    background: rgba(34, 211, 238, 0.10) !important;
    color:      #f0f9ff !important;
}
html[data-theme="dark"] .user-dd .dropdown-item i.text-info,
html[data-theme="dark"] .user-dd .dropdown-item .feather-sm.text-info {
    color: #22d3ee !important;
    filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.40));
}
html[data-theme="dark"] .user-dd .dropdown-item i.text-success,
html[data-theme="dark"] .user-dd .dropdown-item .feather-sm.text-success {
    color: #34d399 !important;
    filter: drop-shadow(0 0 4px rgba(52, 211, 153, 0.40));
}
html[data-theme="dark"] .user-dd .we-tour-trigger i { color: #22d3ee !important; }
html[data-theme="dark"] .user-dd .we-appearance-trigger i {
    color: #38bdf8 !important;
    filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.40));
}
html[data-theme="dark"] .user-dd .we-user-dropdown-header {
    background: linear-gradient(135deg, rgba(7, 15, 35, 0.95) 0%, rgba(13, 27, 58, 0.95) 100%) !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.20) !important;
}
html[data-theme="dark"] .user-dd .we-user-dropdown-header h4 {
    color: #f0f9ff !important;
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.30);
}
html[data-theme="dark"] .user-dd .we-user-dropdown-header p {
    color: #94a3b8 !important;
}
html[data-theme="dark"] .user-dd .we-user-dropdown-header img {
    border: 2px solid rgba(34, 211, 238, 0.30) !important;
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.20) !important;
}
html[data-theme="dark"] .user-dd .dropdown-divider {
    border-color: rgba(56, 189, 248, 0.15) !important;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ MODAL "Minha conta" — abas + corpo no tema dark                  ║
   ╚══════════════════════════════════════════════════════════════════╝ */
html[data-theme="dark"] #we-user-modal .modal-body {
    background: rgba(10, 20, 40, 0.95) !important;
    color:      #e2e8f0 !important;
}
html[data-theme="dark"] #we-user-tabs {
    background:    transparent !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.20) !important;
}
html[data-theme="dark"] #we-user-tabs .nav-link {
    color:      #94a3b8 !important;
    background: transparent !important;
}
html[data-theme="dark"] #we-user-tabs .nav-link:hover {
    color: #cbd5e1 !important;
}
html[data-theme="dark"] #we-user-tabs .nav-link.active {
    color:               #22d3ee !important;
    border-bottom-color: #22d3ee !important;
    background:          transparent !important;
}
html[data-theme="dark"] #we-password-form .form-label,
html[data-theme="dark"] #we-user-modal .form-label {
    color: #cbd5e1 !important;
}
html[data-theme="dark"] #we-password-form input,
html[data-theme="dark"] #we-user-modal input.form-control {
    background:       rgba(7, 15, 35, 0.70) !important;
    background-color: rgba(7, 15, 35, 0.70) !important;
    border:           1px solid rgba(56, 189, 248, 0.20) !important;
    color:            #f1f5f9 !important;
}
html[data-theme="dark"] #we-password-form input:focus,
html[data-theme="dark"] #we-user-modal input.form-control:focus {
    border-color: #22d3ee !important;
    box-shadow:   0 0 0 3px rgba(34, 211, 238, 0.15) !important;
}
html[data-theme="dark"] #we-password-form small.text-muted,
html[data-theme="dark"] #we-password-form small.form-text {
    color: #64748b !important;
}
html[data-theme="dark"] #we-pwd-submit {
    background: linear-gradient(135deg, #0ea5e9 0%, #22d3ee 100%) !important;
    box-shadow: 0 4px 14px rgba(34, 211, 238, 0.30) !important;
}
html[data-theme="dark"] #we-pwd-submit:hover {
    box-shadow: 0 6px 20px rgba(34, 211, 238, 0.45) !important;
}
html[data-theme="dark"] #we-user-modal button[data-bs-dismiss="modal"] {
    background: rgba(100, 116, 139, 0.20) !important;
    color:      #cbd5e1 !important;
    border:     1px solid rgba(100, 116, 139, 0.30) !important;
}
html[data-theme="dark"] #we-tab-support .we-support-row {
    background:       rgba(13, 27, 58, 0.60) !important;
    background-color: rgba(13, 27, 58, 0.60) !important;
    border:           1px solid rgba(56, 189, 248, 0.15) !important;
    color:            #e2e8f0 !important;
}
html[data-theme="dark"] #we-tab-support .we-support-row:hover {
    background:   rgba(34, 211, 238, 0.08) !important;
    border-color: rgba(34, 211, 238, 0.30) !important;
}
html[data-theme="dark"] #we-tab-support .we-support-title { color: #f0f9ff !important; }
html[data-theme="dark"] #we-tab-support .we-support-sub   { color: #94a3b8 !important; }
html[data-theme="dark"] #we-user-modal .tab-pane > div[style*="background:#f8fafc"],
html[data-theme="dark"] #we-user-modal .tab-pane > div[style*="background: #f8fafc"] {
    background:       rgba(7, 15, 35, 0.60) !important;
    background-color: rgba(7, 15, 35, 0.60) !important;
    background-image: none !important;
    color:            #94a3b8 !important;
    border:           1px solid rgba(56, 189, 248, 0.10) !important;
}
html[data-theme="dark"] #we-user-modal .tab-pane > div[style*="background:#f8fafc"] strong,
html[data-theme="dark"] #we-user-modal .tab-pane > div[style*="background: #f8fafc"] strong {
    color: #cbd5e1 !important;
}
html[data-theme="dark"] #we-user-modal p { color: #94a3b8 !important; }
html[data-theme="dark"] #we-user-modal .modal-title { color: #f0f9ff !important; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ MODAL "Minha conta" — HEADER (no dark)                           ║
   ║ Inline gradient verde-azul vivo destoava + subtitulo/btn-close   ║
   ║ perdiam contraste sobre tom claro.                                ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Sobrescreve gradient inline do header — usa gradient ciano/marinho dark */
html[data-theme="dark"] #we-user-modal .we-user-modal-header,
html[data-theme="dark"] #we-user-modal .modal-header.we-user-modal-header {
    background:       linear-gradient(135deg, #0f172a 0%, #0c4a6e 60%, #155e75 100%) !important;
    background-image: linear-gradient(135deg, #0f172a 0%, #0c4a6e 60%, #155e75 100%) !important;
    border-bottom:    1px solid rgba(34, 211, 238, 0.30) !important;
    box-shadow:       0 4px 16px rgba(0, 0, 0, 0.30),
                      inset 0 -1px 0 rgba(34, 211, 238, 0.15) !important;
}

/* Avatar circular (icone do user) — borda ciano + fundo dark translúcido */
html[data-theme="dark"] #we-user-modal .we-user-modal-header > div > span:first-child {
    background: rgba(34, 211, 238, 0.18) !important;
    border:     1px solid rgba(34, 211, 238, 0.40) !important;
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.25) !important;
}
html[data-theme="dark"] #we-user-modal .we-user-modal-header i {
    color:  #22d3ee !important;
    stroke: #22d3ee !important;
}

/* Titulo "Minha conta" — reforca contraste */
html[data-theme="dark"] #we-user-modal .we-user-modal-header .modal-title {
    color:       #f0f9ff !important;
    text-shadow: 0 0 12px rgba(34, 211, 238, 0.40);
}

/* Subtitulo — antes rgba(255,255,255,0.88) inline, agora cor solida com peso visivel */
html[data-theme="dark"] #we-user-modal .we-user-modal-header p {
    color:       #cbd5e1 !important;
    opacity:     1 !important;
    font-weight: 500 !important;
}

/* Botao X (fechar) — SVG branco FIXO + fundo ciano para destacar contra gradient dark */
html[data-theme="dark"] #we-user-modal .we-user-modal-header .btn-close,
html[data-theme="dark"] #we-user-modal .we-user-modal-header .btn-close-white {
    /* Reset do background do Bootstrap — substitui pelo nosso SVG branco direto */
    background-color: rgba(34, 211, 238, 0.18) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3E%3C/svg%3E") !important;
    background-repeat:   no-repeat !important;
    background-position: center !important;
    background-size:     14px 14px !important;
    border:              1px solid rgba(34, 211, 238, 0.40) !important;
    border-radius:       8px !important;
    opacity:             1 !important;
    width:               30px !important;
    height:              30px !important;
    padding:             0 !important;
    box-shadow:          0 0 8px rgba(34, 211, 238, 0.25) !important;
    /* IMPORTANTE: sem filter — para o SVG branco renderizar nativo */
    filter:              none !important;
    transition:          background-color .15s, transform .15s, border-color .15s !important;
}
html[data-theme="dark"] #we-user-modal .we-user-modal-header .btn-close:hover,
html[data-theme="dark"] #we-user-modal .we-user-modal-header .btn-close-white:hover {
    background-color: rgba(239, 68, 68, 0.30) !important;
    border-color:     rgba(239, 68, 68, 0.60) !important;
    box-shadow:       0 0 12px rgba(239, 68, 68, 0.40) !important;
    transform:        rotate(90deg);
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ TOPBAR SEARCH — input #full_search                               ║
   ║ Antes: fundo branco + texto branco (invisivel ao digitar)        ║
   ╚══════════════════════════════════════════════════════════════════╝ */
html[data-theme="dark"] .app-search,
html[data-theme="dark"] form.app-search {
    background: transparent !important;
}
html[data-theme="dark"] #full_search,
html[data-theme="dark"] input#full_search,
html[data-theme="dark"] .app-search #full_search,
html[data-theme="dark"] .app-search input.form-control {
    background:       rgba(7, 15, 35, 0.65) !important;
    background-color: rgba(7, 15, 35, 0.65) !important;
    background-image: none !important;
    border:           1px solid rgba(56, 189, 248, 0.25) !important;
    color:            #f0f9ff !important;
    -webkit-text-fill-color: #f0f9ff !important;
    caret-color:      #22d3ee !important;
    backdrop-filter:  blur(12px) !important;
}
html[data-theme="dark"] #full_search::placeholder,
html[data-theme="dark"] .app-search input::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}
html[data-theme="dark"] #full_search:focus,
html[data-theme="dark"] .app-search input.form-control:focus {
    background:   rgba(7, 15, 35, 0.85) !important;
    border-color: #22d3ee !important;
    box-shadow:   0 0 0 3px rgba(34, 211, 238, 0.18),
                  0 0 16px rgba(34, 211, 238, 0.10) !important;
    color:        #f0f9ff !important;
    -webkit-text-fill-color: #f0f9ff !important;
    outline:      none !important;
}
/* Reset autofill (Chrome aplica fundo amarelo + texto preto) */
html[data-theme="dark"] #full_search:-webkit-autofill,
html[data-theme="dark"] #full_search:-webkit-autofill:hover,
html[data-theme="dark"] #full_search:-webkit-autofill:focus {
    -webkit-text-fill-color: #f0f9ff !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(7, 15, 35, 0.95) inset !important;
    caret-color: #22d3ee !important;
}

/* Mesmo tratamento para o search do /sites/unidades (.we-units-filter) */
html[data-theme="dark"] .we-units-filter input,
html[data-theme="dark"] input.we-units-filter,
html[data-theme="dark"] body .we-units-filter input {
    background:       rgba(7, 15, 35, 0.65) !important;
    background-color: rgba(7, 15, 35, 0.65) !important;
    background-image: none !important;
    color:            #f0f9ff !important;
    -webkit-text-fill-color: #f0f9ff !important;
    caret-color:      #22d3ee !important;
    border:           1px solid rgba(56, 189, 248, 0.25) !important;
}
html[data-theme="dark"] .we-units-filter input::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}
html[data-theme="dark"] .we-units-filter input:focus {
    border-color: #22d3ee !important;
    box-shadow:   0 0 0 3px rgba(34, 211, 238, 0.18) !important;
    background:   rgba(7, 15, 35, 0.85) !important;
}

/* ── MOBILE — Topbar simplificado no tema dark ───────────────────── */
@media (max-width: 991px) {
    html[data-theme="dark"] .topbar {
        background:    rgba(10, 20, 40, 0.96) !important;
        border-bottom: 1px solid rgba(56, 189, 248, 0.15) !important;
        box-shadow:    0 2px 10px rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(10px);
    }
    html[data-theme="dark"] .topbar .navbar-brand .dark-logo  { display: none !important; }
    html[data-theme="dark"] .topbar .navbar-brand .light-logo { display: inline-block !important; }
}

/* ── MOBILE — Bottom nav + drawer no tema dark ───────────────────── */
@media (max-width: 991px) {
    html[data-theme="dark"] .we-bottom-nav {
        background:    rgba(10, 20, 40, 0.96) !important;
        border-top:    1px solid rgba(56, 189, 248, 0.15) !important;
        box-shadow:    0 -4px 20px rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(10px);
    }
    html[data-theme="dark"] .we-bn-item {
        color: #94a3b8 !important;
    }
    html[data-theme="dark"] .we-bn-item:hover,
    html[data-theme="dark"] .we-bn-item:focus-visible,
    html[data-theme="dark"] .we-bn-item.active {
        color:      #22d3ee !important;
        background: rgba(34, 211, 238, 0.10) !important;
    }

    html[data-theme="dark"] .we-drawer-panel {
        background: linear-gradient(180deg, #0a1428 0%, #050a1f 100%) !important;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5) !important;
        color:      #e2e8f0 !important;
    }
    html[data-theme="dark"] .we-drawer-header {
        border-bottom: 1px solid rgba(56, 189, 248, 0.15) !important;
    }
    html[data-theme="dark"] .we-drawer-title { color: #e2e8f0 !important; }
    html[data-theme="dark"] .we-drawer-close { color: #94a3b8 !important; }
    html[data-theme="dark"] .we-drawer-close:hover {
        background: rgba(34, 211, 238, 0.10) !important;
        color: #22d3ee !important;
    }
    html[data-theme="dark"] .we-drawer-item { color: #e2e8f0 !important; }
    html[data-theme="dark"] .we-drawer-item svg { color: #94a3b8 !important; }
    html[data-theme="dark"] .we-drawer-item:hover {
        background: rgba(34, 211, 238, 0.08) !important;
        color: #22d3ee !important;
    }
    html[data-theme="dark"] .we-drawer-item:hover svg { color: #22d3ee !important; }
    html[data-theme="dark"] .we-drawer-divider {
        background: rgba(56, 189, 248, 0.12) !important;
    }
    html[data-theme="dark"] .we-drawer-logout { color: #f87171 !important; }
    html[data-theme="dark"] .we-drawer-logout svg { color: #f87171 !important; }
    html[data-theme="dark"] .we-drawer-logout:hover {
        background: rgba(248, 113, 113, 0.10) !important;
        color: #fca5a5 !important;
    }
    html[data-theme="dark"] .we-drawer-logout:hover svg { color: #fca5a5 !important; }
}