/* |================================================================================|
| === DARK MODE PREMIUM (Sneat Inspired - Cores Ajustadas) === 
|================================================================================|
*/

/* ----------------------------------------------------------------------------- */
/* I. CONFIGURAÇÕES GLOBAIS E LAYOUTS PRINCIPAIS */
/* ----------------------------------------------------------------------------- */

/* Elemento base do Dark Mode e Cores de Fundo Principais */
.dark-mode {
    /* Fundo principal mais escuro e menos azulado */
    background-color: #232333;
    color: #d2d2e2;
}

    .dark-mode .layout-wrapper,
    .dark-mode .layout-page,
    .dark-mode .content-wrapper {
        background-color: #232333; /* Mantém o fundo principal */
    }

    /* Navbar */
    .dark-mode .navbar {
        background-color: #232333; /* Fundo igual ao principal */
        border-bottom: 1px solid #44446c; /* Borda de separação */
    }

    /* Transições e Scrollbars */
    .dark-mode * {
        /* Transição suave para todas as mudanças de cor e borda */
        transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    }

    /* Scrollbars - Webkit */
    .dark-mode ::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 10px;
    }

    .dark-mode ::-webkit-scrollbar-thumb {
        background: #44446c;
        border-radius: 10px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }

        .dark-mode ::-webkit-scrollbar-thumb:hover {
            background: #5a5a8a;
        }


    /* ----------------------------------------------------------------------------- */
    /* II. TIPOGRAFIA E CORES DE TEXTO (TEXT-X E TÍTULOS) */
    /* ----------------------------------------------------------------------------- */
    .dark-mode .text-heading {
        color: #696cff !important;
    }

    /* Cores Padrão de Títulos (h1, h2, etc.) */
    .dark-mode h1,
    .dark-mode h2,
    .dark-mode h3,
    .dark-mode h4,
    .dark-mode h5 {
        /* Cor de título no dark mode para h que NÃO tem classe de cor */
        color: #a5a6b7 !important;
    }

    /* Cores Padrão de Parágrafos e Elementos Secundários */
    .dark-mode p,
    .dark-mode li,
    .dark-mode label {
        color: #a5a6b7; /* Texto padrão/secundário mais claro */
    }
    .dark-mode span {
        color: #696cff;
    }

    /* Acentos e Links (Default) */
    .dark-mode a,
    .dark-mode .icon,
    .dark-mode .metric-value {
        color: #696cff !important; /* Cor Primary do Sneat */
    }

    /* Sobrescrita de Cores Utilitárias Bootstrap (Prioridade Máxima) */
    .dark-mode .text-primary {
        color: #696cff !important;
    }

    .dark-mode .text-secondary {
        color: #8592a3 !important;
    }

    .dark-mode .text-success {
        color: #71dd37 !important;
    }

    .dark-mode .text-danger {
        color: #ff3e1d !important;
    }

    .dark-mode .text-warning {
        color: #ffab00 !important;
    }

    .dark-mode .text-info {
        color: #03c3ec !important;
    }

    .dark-mode .text-dark {
        color: #d5d5e2 !important;
    }
    /* Invertido para claro */
    .dark-mode .text-light {
        color: #3b3b5c !important;
    }
    /* Invertido para escuro */

    /* ----------------------------------------------------------------------------- */
    /* III. COMPONENTES PRINCIPAIS E MODAIS (CARDS, BLOCOS, DROPDOWNS) */
    /* ----------------------------------------------------------------------------- */

    /* Fundo Base dos Componentes (Cards, Modals, Dropdowns) */
    .dark-mode .card,
    .dark-mode .demo-blocks > *,
    .dark-mode .layout-demo-placeholder,
    .dark-mode .info-box,
    .dark-mode .table,
    .dark-mode .dropdown-menu,
    .dark-mode .tooltip-inner,
    .dark-mode .popover,
    .dark-mode .modal-content,
    .dark-mode .nav-tabs,
    .dark-mode .tab-content,
    .dark-mode .bg-light {
        background-color: #2c2c43 !important;
        border-color: #44446c !important;
        color: #d2d2e2 !important;
        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.4);
    }

    /* Modais */
    .dark-mode .modal-title,
    .dark-mode .modal-header h1,
    .dark-mode .modal-header h2,
    .dark-mode .modal-header h3 {
        color: #ffffff !important; /* Título da modal branco puro */
    }

    .dark-mode .modal-body,
    .dark-mode .modal-body p,
    .dark-mode .modal-body label,
    .dark-mode .modal-footer {
        color: #d2d2e2 !important; /* Conteúdo da modal */
    }

    /* Botão de Fechar Modal ('x') */
    .dark-mode .btn-close {
        /* Força o ícone 'x' para branco (se for SVG) */
        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 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
        opacity: 1;
    }


    /* Dropdown Menu Itens */
    .dark-mode .dropdown-item {
        color: #d2d2e2;
    }

        .dark-mode .dropdown-item:hover,
        .dark-mode .dropdown-item:focus {
            background-color: #3b3b5c !important; /* Fundo do menu sutil no hover */
            color: #ffffff !important;
        }

    /* Ajuste de Fundo para Classes Utilitárias (bg-label-X) */
    .dark-mode .bg-label-primary {
        background-color: #3b3b5c !important;
        color: #696cff !important;
    }

    .dark-mode .bg-label-secondary {
        background-color: #44446c !important;
        color: #8592a3 !important;
    }

    .dark-mode .bg-label-success {
        background-color: #3b5c40 !important;
        color: #71dd37 !important;
    }

    .dark-mode .bg-label-danger {
        background-color: #5c3b3b !important;
        color: #ff3e1d !important;
    }

    .dark-mode .bg-label-info {
        background-color: #3b5c5c !important;
        color: #03c3ec !important;
    }

    .dark-mode .bg-label-warning {
        background-color: #5c533b !important;
        color: #ffab00 !important;
    }

    .dark-mode .bg-primary {
        color: #ffffff !important;
    }
    /* Garante texto branco em fundos primários fortes */


    /* ----------------------------------------------------------------------------- */
    /* IV. MENU LATERAL (SIDEBAR) E TOGGLES */
    /* ----------------------------------------------------------------------------- */

    .dark-mode .menu {
        background-color: #2c2c43; /* Fundo do menu mais claro que o principal */
        border-color: #44446c; /* Borda do menu */
    }

    .dark-mode .app-brand-text.demo {
        color: #d2d2e2;
    }

    /* Título de Seção do Menu (ADMIN, COMPONENTS) */
    .dark-mode .menu-header .menu-header-text {
        color: #a5a6b7 !important;
    }

    /* Item de Menu ATIVO */
    .dark-mode .menu-item.active > .menu-link,
    .dark-mode .menu-item.active > .menu-link:hover,
    .dark-mode .menu-item.active > .menu-link:focus {
        color: #ffffff !important;
        background-color: #696cff !important;
    }

    /* Item de Menu Hover (Não Ativo) */
    .dark-mode .menu-link:hover {
        background-color: #3b3b5c !important; /* Fundo sutil para hover */
        color: #b2b2c4 !important;
        border-radius: 6px;
    }

    /* Cor Padrão de Links e Ícones no Menu */
    .dark-mode .menu-link {
        color: #eceff1 !important;
    }

        .dark-mode .menu-link .menu-icon {
            color: #a5a6b7;
        }

    /* Ícone do Item Ativo */
    .dark-mode .menu-item.active .menu-link .menu-icon {
        color: #ffffff;
    }

    /* Toggle do Menu (Ícone Chevron) */
    .dark-mode .layout-menu-toggle {
        border-color: #2b2c40 !important; /* Borda do toggle */
    }


    /* ----------------------------------------------------------------------------- */
    /* V. FORMULÁRIOS E INPUTS */
    /* ----------------------------------------------------------------------------- */

    /* Campos de Input (Base) */
    .dark-mode .form-control,
    .dark-mode .form-select,
    .dark-mode .input-group-text {
        background-color: #2c2c43 !important;
        color: #d2d2e2 !important;
        border-color: #44446c !important;
    }

        /* Placeholder */
        .dark-mode .form-control::placeholder {
            color: #a5a6b7 !important;
            opacity: 1;
        }

    /* Correção de Autofill (Preenchimento Automático do Navegador) */
    .dark-mode input:-webkit-autofill,
    .dark-mode input:-webkit-autofill:hover,
    .dark-mode input:-webkit-autofill:focus,
    .dark-mode input:-webkit-autofill:active {
        /* Truque: box-shadow para mascarar o fundo amarelo */
        box-shadow: 0 0 0 1000px #2c2c43 inset !important;
        /* Força a cor do texto para clara */
        -webkit-text-fill-color: #d2d2e2 !important;
        border-color: #44446c !important;
        caret-color: #d2d2e2 !important;
    }


    /* ----------------------------------------------------------------------------- */
    /* VI. ACORDION E ABAS */
    /* ----------------------------------------------------------------------------- */

    /* Accordion Item */
    .dark-mode .accordion-item {
        border: 1px solid #44446c !important;
    }

        /* Accordion Item ATIVO (Fundo Específico) */
        .dark-mode .accordion-item.active {
            background-color: #2b2c40 !important; /* Fundo específico solicitado */
        }

    /* Botão/Header do Accordion */
    .dark-mode .accordion-button {
        background-color: #2c2c43 !important;
        color: #d2d2e2 !important;
        border-color: #44446c !important;
    }

        /* Botão/Header do Accordion ATIVO */
        .dark-mode .accordion-button:not(.collapsed) {
            background-color: #2b2c40 !important; /* Usa o fundo específico solicitado */
        }

            .dark-mode .accordion-button:not(.collapsed)::after {
                filter: brightness(0) invert(1); /* Inverte a cor da seta */
            }

    /* Abas de Navegação (Tabs) */
    .dark-mode .nav-tabs .nav-link,
    .dark-mode .nav-pills .nav-link {
        color: #a5a6b7;
    }

        .dark-mode .nav-tabs .nav-link.active,
        .dark-mode .nav-pills .nav-link.active {
            background-color: #2c2c43 !important;
            color: #696cff !important;
            border-color: #44446c #44446c #2c2c43 !important;
        }


    /* ----------------------------------------------------------------------------- */
    /* VII. TABELAS (DATATABLES/BOOTSTRAP) E PAGINAÇÃO */
    /* ----------------------------------------------------------------------------- */

    /* Fundo Geral da Tabela e Células */
    .dark-mode .table,
    .dark-mode .table > :not(caption) > * > * {
        background-color: #2c2c43 !important;
        color: #d2d2e2 !important;
        border-color: #44446c !important;
    }

        /* Cabeçalho da Tabela */
        .dark-mode .table thead th,
        .dark-mode .table thead {
            background-color: #232333 !important; /* Fundo principal mais escuro */
            color: #d5d5e2 !important;
            border-color: #44446c !important;
        }

    /* Efeito Hover nas Linhas */
    .dark-mode .table-hover > tbody > tr:hover,
    .dark-mode .table-hover > tbody > tr:hover > * {
        background-color: #3b3b5c !important;
        color: #ffffff !important;
    }

    /* Paginação e Filtros (DataTables/Bootstrap) */
    .dark-mode .dataTables_wrapper .dataTables_length,
    .dark-mode .dataTables_wrapper .dataTables_filter,
    .dark-mode .dataTables_wrapper .dataTables_info,
    .dark-mode .dataTables_wrapper .dataTables_paginate {
        color: #a5a6b7 !important;
    }

    /* Botões da Paginação */
    .dark-mode .pagination .page-item .page-link {
        background-color: #2c2c43 !important;
        color: #a5a6b7 !important;
        border-color: #44446c !important;
    }

    /* Botão de Paginação Ativo */
    .dark-mode .pagination .page-item.active .page-link {
        background-color: #696cff !important;
        color: #ffffff !important;
        border-color: #696cff !important;
    }