/* =======================================================================
   EUROPA – SITE.CSS (limpo e funcional)
   1) Variáveis/Paleta
   2) Base & Layout
   3) Login (.login-layout)
   4) Formulários & Botões
   5) Zebra
   6) Tema Claro/Escuro – contraste melhorado
   7) Transições de tema
   ======================================================================= */

/* ===================== 1) VARIÁVEIS ===================== */
:root {
    --brand-700: #0F5F0F;
    --brand-600: #167416;
    --brand-500: #1C8C1C;
    --brand-400: #379837;
    --text: #1a1f1a;
    --bs-primary: var(--brand-500);
    --bs-primary-rgb: 28,140,28;
    --bs-link-color: var(--brand-500);
    --bs-link-hover-color: var(--brand-600);
    --sidebar-width-open: 300px;
    --sidebar-width-collapsed: 88px;
    /* DARK tokens (contraste alto - Esperança Show Dark) */
    --dark-bg: #020502;
    --dark-surface: #081008;
    --dark-surface-2: #0e1a0e;
    --dark-border: rgba(57, 255, 20, 0.18);
    --dark-text: #e0eee0;
    --dark-muted: #8fa08f;
    --dark-zebra-even: #050a05;
    --dark-zebra-odd: #0a100a;
}

/* ===================== 2) BASE & LAYOUT ===================== */
body {
    background: #fff;
    color: var(--text);
}

@media (min-width:992px) {
    .app-content {
        margin-left: var(--sidebar-width-open);
        width: calc(100vw - var(--sidebar-width-open) - 15px);
        max-width: calc(100vw - var(--sidebar-width-open));
        overflow-x: hidden;
        box-sizing: border-box;
        transition: margin-left .22s ease;
        position: relative;
        z-index: 3000;
    }

    body.sidebar-collapsed .app-content {
        margin-left: var(--sidebar-width-collapsed);
        width: calc(100vw - var(--sidebar-width-collapsed));
        max-width: calc(100vw - var(--sidebar-width-collapsed));
    }
}

@media (max-width: 991.98px) {
    .app-content {
        padding-top: calc(64px + 1rem) !important;
    }
}

.ec-container {
    padding-left: .75rem;
    padding-right: 1rem;
}

.ec-topbar-form {
    min-width: 0;
}

    .ec-topbar-form > .form-control {
        flex: 1 1 460px; /* campo de busca MAIOR */
        min-width: 320px; /* evita truncar placeholder */
    }

    .ec-topbar-form > .btn {
        flex: 0 0 auto;
    }

.text-nowrap {
    white-space: nowrap !important;
}

/* ===================== 3) LOGIN (.login-layout) ===================== */
.login-layout::before {
    content: "";
    position: fixed;
    inset: 0 auto auto 0;
    top: 0;
    width: 100vw;
    height: 780px;
    background-image: url("/img/bg-strip.png");
    background-repeat: repeat-x;
    background-position: center top;
    background-size: auto 100%;
    pointer-events: none;
    z-index: -1;
}

.login-screen {
    padding-top: 80px;
}

.login-card {
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    position: relative;
    animation: pop .2s ease-out;
}

@keyframes pop {
    from {
        transform: translateY(6px);
        opacity: 0
    }

    to {
        transform: none;
        opacity: 1
    }
}

.brand-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-bottom: .5rem;
}

    .brand-wrap img {
        height: 200px;
        width: auto;
        image-rendering: -webkit-optimize-contrast;
    }

.login-title {
    color: var(--brand-500);
}

@media(max-width:576px) {
    .login-layout::before {
        height: 120px;
    }

    .brand-wrap img {
        height: 132px;
    }
}

/* ===================== 4) FORMULÁRIOS & BOTÕES ===================== */
.form-control {
    background: #F3F6F3;
    border-color: #CAD8CA;
}

    .form-control::placeholder {
        color: #7a8a7a;
    }

    .form-control:focus {
        border-color: var(--brand-400);
        box-shadow: 0 0 0 .2rem rgba(55,152,55,.20);
    }

.captcha-img {
    border: 1px solid #DDE7DD;
    border-radius: .5rem;
    height: 42px;
}

.btn {
    border-radius: .8rem;
    transition: transform .12s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .btn:hover {
        transform: translateY(-1px);
    }

    .btn:active {
        transform: translateY(0);
    }

.btn-primary {
    background: var(--brand-500);
    border: 1px solid var(--brand-500);
    color: #fff;
}

    .btn-primary:hover, .btn-primary:focus {
        background: #fff;
        color: var(--brand-500);
        border-color: var(--brand-500);
        box-shadow: 0 0 0 .25rem rgba(28,140,28,.25);
    }

.btn-outline-secondary.btn-sm {
    border-radius: .5rem;
    background: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
}

    .btn-outline-secondary.btn-sm:hover, .btn-outline-secondary.btn-sm:focus {
        background: #fff;
        color: var(--brand-500);
        border-color: var(--brand-500);
        box-shadow: 0 0 0 .25rem rgba(28,140,28,.25);
    }


/* ===================== 5) ZEBRA – versão robusta (sobrepõe Bootstrap) ===================== */
/* Regra: linha ÍMPAR = cinza claro; linha PAR = branco */

.table.ec-grid.table-zebra > tbody > tr.zebra-odd:not(.row-details) > td {
    background-color: #e1ebe1 !important; /* ímpar */
}

.table.ec-grid.table-zebra > tbody > tr.zebra-even:not(.row-details) > td {
    background-color: #ffffff !important; /* par */
}

/* Sub-linha de detalhes deve seguir a cor da linha principal */
.table.ec-grid.table-zebra > tbody > tr.row-details.zebra-odd > td {
    background-color: #e1ebe1 !important; /* detalhe de ímpar */
}

.table.ec-grid.table-zebra > tbody > tr.row-details.zebra-even > td {
    background-color: #ffffff !important; /* detalhe de par */
}


/* ===================== 6) TEMA CLARO/ESCURO ===================== */
/* Claro */
html[data-theme="light"] body:not(.login-layout) {
    background: #f4f7f4;
    color: #1a1f1a;
}

/* Escuro – alto contraste */
html[data-theme="dark"] body:not(.login-layout) {
    background: var(--dark-bg);
    color: var(--dark-text);
}

    /* Superfícies */
    html[data-theme="dark"] body:not(.login-layout) .card,
    html[data-theme="dark"] body:not(.login-layout) .table,
    html[data-theme="dark"] body:not(.login-layout) .form-control,
    html[data-theme="dark"] body:not(.login-layout) .form-select {
        background: var(--dark-surface);
        color: var(--dark-text);
        border-color: var(--dark-border);
    }

        html[data-theme="dark"] body:not(.login-layout) .form-control::placeholder {
            color: var(--dark-muted);
        }

        html[data-theme="dark"] body:not(.login-layout) .form-control:focus,
        html[data-theme="dark"] body:not(.login-layout) .form-select:focus {
            border-color: #66c07a;
            box-shadow: 0 0 0 .2rem rgba(76,175,80,.18);
        }

    /* Texto “Mostrando X–Y…” visível */
    html[data-theme="dark"] body:not(.login-layout) .text-muted {
        color: var(--dark-muted) !important;
    }

    /* Cabeçalho do grid CLARO no escuro (alto contraste) */
    html[data-theme="dark"] body:not(.login-layout) .table-header-strong thead th {
        background: #1c8c1c; /* claro */
        color: #FFF; /* texto escuro para contraste */
        border-bottom-color: #b9ddbb;
        box-shadow: 0 4px 12px rgba(0,0,0,.25);
    }

        html[data-theme="dark"] body:not(.login-layout) .table-header-strong thead th a {
            color: inherit;
        }

    /* Zebra no escuro */
    html[data-theme="dark"] body:not(.login-layout) .table.ec-grid.table-zebra > tbody > tr.zebra-odd:not(.row-details) > td {
        background-color: var(--dark-zebra-odd) !important;
    }

    html[data-theme="dark"] body:not(.login-layout) .table.ec-grid.table-zebra > tbody > tr.zebra-even:not(.row-details) > td {
        background-color: var(--dark-zebra-even) !important;
    }

    /* Sub-linha de detalhes deve seguir a cor da linha principal no dark */
    html[data-theme="dark"] body:not(.login-layout) .table.ec-grid.table-zebra > tbody > tr.row-details.zebra-odd > td {
        background-color: var(--dark-zebra-odd) !important;
    }

    html[data-theme="dark"] body:not(.login-layout) .table.ec-grid.table-zebra > tbody > tr.row-details.zebra-even > td {
        background-color: var(--dark-zebra-even) !important;
    }
    /* Foto/placeholder no escuro */
    html[data-theme="dark"] body:not(.login-layout) .emp-photo-wrap {
        border-color: rgba(163,207,187,.85);
        background: var(--dark-surface);
    }

    /* Botões de AÇÃO no grid – visíveis no escuro (detalhes/olho) */
    html[data-theme="dark"] body:not(.login-layout) .table.ec-grid .btn-outline-secondary {
        background: #ffffff;
        color: #212529;
        border-color: #ced4da;
    }

        html[data-theme="dark"] body:not(.login-layout) .table.ec-grid .btn-outline-secondary:hover,
        html[data-theme="dark"] body:not(.login-layout) .table.ec-grid .btn-outline-secondary:focus {
            background: #f8f9fa;
            color: #212529;
            border-color: #bfc6ce;
            box-shadow: 0 0 0 .15rem rgba(208,214,221,.25);
        }

    /* ====== NOVO: botão LUPA (Editar) igual ao “Cadastrar Funcionário” no DARK ====== */
    html[data-theme="dark"] body:not(.login-layout) .table.ec-grid .btn-primary {
        background: var(--brand-500); /* verde da marca */
        border-color: var(--brand-500);
        color: #fff;
    }

        html[data-theme="dark"] body:not(.login-layout) .table.ec-grid .btn-primary:hover,
        html[data-theme="dark"] body:not(.login-layout) .table.ec-grid .btn-primary:focus {
            background: #fff; /* inversão igual ao botão “Cadastrar” */
            color: var(--brand-500);
            border-color: var(--brand-500);
            box-shadow: 0 0 0 .25rem rgba(28,140,28,.25);
        }

    /* Badges de status no escuro */
    html[data-theme="dark"] body:not(.login-layout) .badge.text-bg-success {
        color: #08381f;
        background-color: #9edbb7;
    }

/* ====== Login mantém identidade no DARK (escopado ao login) ====== */
html[data-theme="dark"] body.login-layout .login-card {
    background: var(--brand-500);
    color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

html[data-theme="dark"] body.login-layout .login-title {
    color: #fff;
}

html[data-theme="dark"] body.login-layout .brand-wrap img {
    filter: grayscale(1) brightness(0) invert(1);
    opacity: .98;
}

html[data-theme="dark"] body.login-layout .btn-primary {
    background: #fff;
    color: var(--brand-500);
    border-color: #fff;
}

    html[data-theme="dark"] body.login-layout .btn-primary:hover,
    html[data-theme="dark"] body.login-layout .btn-primary:focus {
        background: transparent;
        color: #fff;
        border-color: #fff;
        box-shadow: 0 0 0 .25rem rgba(255,255,255,.25);
    }

/* ===================== 7) TRANSIÇÕES ===================== */
:root.theme-anim body,
:root.theme-anim .login-card,
:root.theme-anim .form-control,
:root.theme-anim .btn,
:root.theme-anim .btn-primary,
:root.theme-anim .login-title,
:root.theme-anim .brand-wrap img {
    transition: background-color .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease, filter .28s ease;
}

#themeToggle i, #themeToggleSide i {
    transition: transform .28s ease;
}

    #themeToggle i.flip, #themeToggleSide i.flip {
        transform: rotate(-180deg);
    }

@media (prefers-reduced-motion:reduce) {
    :root.theme-anim * {
        transition: none !important;
    }

    #themeToggle i, #themeToggleSide i {
        transition: none !important;
    }
}

/* Garantir que tooltips/popovers fiquem acima da app-content (z-index:3000) */
.tooltip {
    z-index: 5000 !important;
}

.popover {
    z-index: 5000 !important;
}

/* Z-index alto para garantir que o modal sempre fique acima do conteúdo */
.modal {
    z-index: 12000 !important;
}

.modal-backdrop {
    z-index: 11000 !important;
}

/* Comentário: empurra um pouco para baixo em telas altas, sem quebrar o centering padrão */
@media (min-height: 700px) {
    .modal-dialog.modal-dialog-centered {
        margin-top: 2vh;
    }
}

.eu-error-message {
    margin-bottom: .25rem;
    color: var(--danger-500);
    font-size: .875rem;
    font-weight: 500;
}

/* =======================================================================
   ESPERANÇA SHOW - OVERRIDES PARA TÓPICOS/PÁGINAS GLOBAIS (Premium)
   ======================================================================= */

/* --- TEMA ESCURO (Dark Mode - Esperança Show) --- */
html[data-theme="dark"],
[data-bs-theme="dark"] {
    /* Mapeamento de variáveis locais dos módulos para o tema Dark */
    --pl-bg: #020502;
    --pl-panel: #081008;
    --pl-panel-2: #0e1a0e;
    --pl-ink: #e0eee0;
    --pl-muted: #8fa08f;
    --pl-border: rgba(57, 255, 20, 0.18);
    --pl-border-soft: #050a05;

    --sl-bg: #020502;
    --sl-panel: #081008;
    --sl-panel-2: #0e1a0e;
    --sl-ink: #e0eee0;
    --sl-muted: #8fa08f;
    --sl-border: rgba(57, 255, 20, 0.18);
    --sl-border-soft: #050a05;

    --ol-bg: #020502;
    --ol-panel: #081008;
    --ol-panel-2: #0e1a0e;
    --ol-ink: #e0eee0;
    --ol-muted: #8fa08f;
    --ol-border: rgba(57, 255, 20, 0.18);
    --ol-border-soft: #050a05;

    --gr-bg: #020502;
    --gr-panel: #081008;
    --gr-panel-2: #0e1a0e;
    --gr-ink: #e0eee0;
    --gr-muted: #8fa08f;
    --gr-border: rgba(57, 255, 20, 0.18);
    --gr-border-soft: #050a05;

    --stk-ink: #e0eee0;
    --stk-muted: #8fa08f;
    --stk-border: rgba(57, 255, 20, 0.18);
    --stk-soft: rgba(57, 255, 20, 0.08);

    --cc-border: rgba(57, 255, 20, 0.18);
    --cc-border-soft: #050a05;
}

/* Correção de gradientes e fundos duros em modo escuro */
html[data-theme="dark"] [class*="-hero"],
html[data-theme="dark"] [class$="-hero"],
html[data-theme="dark"] .stk-hero,
html[data-theme="dark"] .pl-hero,
html[data-theme="dark"] .ol-hero,
html[data-theme="dark"] .gr-hero {
    background: linear-gradient(135deg, rgba(28, 140, 28, 0.12), rgba(0, 0, 0, 0.4)), linear-gradient(180deg, #050a05 0%, #081008 100%) !important;
    border-color: rgba(57, 255, 20, 0.25) !important;
    color: #e0eee0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

/* Cartões de indicador (KPI/stat) em modo escuro.
   As classes são listadas UMA A UMA de propósito. Antes esta regra usava
   [class*="-kpi"] e [class*="-stat"], que casam por SUBSTRING do atributo class
   inteiro — ou seja, pegavam qualquer nome que contivesse esses pedaços em
   qualquer posição. Isso atingia o ponto colorido de status (.sl-status-dot,
   .mkt-status-dot), as pílulas de status (.cmp-status, .gt-status), os ícones
   dentro dos cartões (.gt-kpi-icon, .es-kpi-icon), os grids que só agrupam os
   cartões (.gt-kpis, .es-kpis, .bm-stats), os estados vazios (*-empty-state) e
   até os rótulos dentro do próprio cartão — produzindo caixa dentro de caixa e
   apagando cores que codificam informação.
   Ao criar um cartão novo, acrescente a classe aqui E na regra gêmea do tema
   claro; não volte a usar seletor por substring. */
html[data-theme="dark"] .stk-stat,
html[data-theme="dark"] .bm-stat,
html[data-theme="dark"] .sl-kpi,
html[data-theme="dark"] .pl-kpi,
html[data-theme="dark"] .ol-kpi,
html[data-theme="dark"] .gr-kpi,
html[data-theme="dark"] .gt-kpi,
html[data-theme="dark"] .el-kpi,
html[data-theme="dark"] .es-kpi,
html[data-theme="dark"] .cmp-kpi,
html[data-theme="dark"] .cmpv-kpi,
html[data-theme="dark"] .mkt-kpi {
    background: #050a05 !important;
    border: 1px solid rgba(57, 255, 20, 0.15) !important;
    color: #e0eee0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] [class*="-table-shell"],
html[data-theme="dark"] [class*="-grid-wrapper"],
html[data-theme="dark"] [class*="-filter-card"],
html[data-theme="dark"] [class*="-details-panel"],
html[data-theme="dark"] .stk-table-shell,
html[data-theme="dark"] .pl-table-shell,
html[data-theme="dark"] .ol-table-shell,
html[data-theme="dark"] .cc-grid-wrapper,
html[data-theme="dark"] .cc-filters-card {
    background: #050a05 !important;
    border: 1px solid rgba(57, 255, 20, 0.18) !important;
    color: #e0eee0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] [class*="-table-shell"] table thead th,
html[data-theme="dark"] [class*="-grid-wrapper"] table thead th,
html[data-theme="dark"] .table thead th {
    background-color: #081008 !important;
    color: #ffffff !important;
    border-bottom: 2px solid rgba(57, 255, 20, 0.3) !important;
}

html[data-theme="dark"] [class*="-table-shell"] table tbody tr td,
html[data-theme="dark"] [class*="-grid-wrapper"] table tbody tr td {
    color: #e0eee0 !important;
}

html[data-theme="dark"] [class*="-table-shell"] table tbody tr:nth-child(even) td,
html[data-theme="dark"] [class*="-grid-wrapper"] table tbody tr:nth-child(even) td {
    background-color: #050a05 !important;
}

html[data-theme="dark"] [class*="-table-shell"] table tbody tr:nth-child(odd) td,
html[data-theme="dark"] [class*="-grid-wrapper"] table tbody tr:nth-child(odd) td {
    background-color: #0a100a !important;
}

html[data-theme="dark"] [class*="-table-shell"] table tbody tr:hover td,
html[data-theme="dark"] [class*="-grid-wrapper"] table tbody tr:hover td {
    background-color: rgba(57, 255, 20, 0.08) !important;
}

/* Elementos de formulário genéricos em modo escuro para garantir que nenhum input fique branco */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] [class*="-select"],
html[data-theme="dark"] [class*="-input"] {
    background-color: #060c06 !important;
    border: 1px solid rgba(57, 255, 20, 0.25) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] [class*="-select"]:focus,
html[data-theme="dark"] [class*="-input"]:focus {
    border-color: #39ff14 !important;
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.4) !important;
    background-color: #081208 !important;
}


/* --- TEMA CLARO (Light Mode - Esperança Show) --- */
html[data-theme="light"],
[data-bs-theme="light"] {
    --pl-bg: #f4f7f4;
    --pl-panel: #ffffff;
    --pl-panel-2: #eff6ef;
    --pl-ink: #1a1f1a;
    --pl-muted: #65746a;
    --pl-border: rgba(28, 140, 28, 0.18);
    --pl-border-soft: #eff6ef;

    --sl-bg: #f4f7f4;
    --sl-panel: #ffffff;
    --sl-panel-2: #eff6ef;
    --sl-ink: #1a1f1a;
    --sl-muted: #65746a;
    --sl-border: rgba(28, 140, 28, 0.18);
    --sl-border-soft: #eff6ef;

    --ol-bg: #f4f7f4;
    --ol-panel: #ffffff;
    --ol-panel-2: #eff6ef;
    --ol-ink: #1a1f1a;
    --ol-muted: #65746a;
    --ol-border: rgba(28, 140, 28, 0.18);
    --ol-border-soft: #eff6ef;

    --gr-bg: #f4f7f4;
    --gr-panel: #ffffff;
    --gr-panel-2: #eff6ef;
    --gr-ink: #1a1f1a;
    --gr-muted: #65746a;
    --gr-border: rgba(28, 140, 28, 0.18);
    --gr-border-soft: #eff6ef;

    --stk-ink: #1a1f1a;
    --stk-muted: #65746a;
    --stk-border: rgba(28, 140, 28, 0.18);
    --stk-soft: rgba(28, 140, 28, 0.08);

    --cc-border: rgba(28, 140, 28, 0.18);
    --cc-border-soft: #eff6ef;
}

/* Correção de gradientes e fundos duros em modo claro */
html[data-theme="light"] [class*="-hero"],
html[data-theme="light"] [class$="-hero"],
html[data-theme="light"] .stk-hero,
html[data-theme="light"] .pl-hero,
html[data-theme="light"] .ol-hero,
html[data-theme="light"] .gr-hero {
    background: linear-gradient(135deg, rgba(28, 140, 28, 0.08), rgba(255, 255, 255, 0.25)), linear-gradient(180deg, #eff6ef 0%, #ffffff 100%) !important;
    border-color: rgba(28, 140, 28, 0.25) !important;
    color: #18231b !important;
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.03) !important;
}

/* Gêmea da regra do tema escuro — mantenha as duas listas em sincronia.
   Ver o comentário lá em cima sobre por que aqui não se usa [class*="-kpi"]. */
html[data-theme="light"] .stk-stat,
html[data-theme="light"] .bm-stat,
html[data-theme="light"] .sl-kpi,
html[data-theme="light"] .pl-kpi,
html[data-theme="light"] .ol-kpi,
html[data-theme="light"] .gr-kpi,
html[data-theme="light"] .gt-kpi,
html[data-theme="light"] .el-kpi,
html[data-theme="light"] .es-kpi,
html[data-theme="light"] .cmp-kpi,
html[data-theme="light"] .cmpv-kpi,
html[data-theme="light"] .mkt-kpi {
    background: #ffffff !important;
    border: 1px solid rgba(28, 140, 28, 0.15) !important;
    color: #18231b !important;
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.03) !important;
}

html[data-theme="light"] [class*="-table-shell"],
html[data-theme="light"] [class*="-grid-wrapper"],
html[data-theme="light"] [class*="-filter-card"],
html[data-theme="light"] [class*="-details-panel"],
html[data-theme="light"] .stk-table-shell,
html[data-theme="light"] .pl-table-shell,
html[data-theme="light"] .ol-table-shell,
html[data-theme="light"] .cc-grid-wrapper,
html[data-theme="light"] .cc-filters-card {
    background: #ffffff !important;
    border: 1px solid rgba(28, 140, 28, 0.18) !important;
    color: #18231b !important;
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.03) !important;
}

html[data-theme="light"] [class*="-table-shell"] table thead th,
html[data-theme="light"] [class*="-grid-wrapper"] table thead th,
html[data-theme="light"] .table thead th {
    background-color: #eff6ef !important;
    color: #18231b !important;
    border-bottom: 2px solid rgba(28, 140, 28, 0.3) !important;
}

/* Sobrescrita de utilitários de background do Bootstrap para Dark/Light mode */
html[data-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-light {
    background-color: var(--dark-surface-2) !important;
    color: var(--dark-text) !important;
}

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

html[data-theme="light"] .bg-light,
[data-bs-theme="light"] .bg-light {
    background-color: #f4f7f4 !important;
    color: #1a1f1a !important;
}

html[data-theme="light"] .bg-white,
[data-bs-theme="light"] .bg-white {
    background-color: #ffffff !important;
    color: #1a1f1a !important;
}

/* Botões claros secundários (Limpar, Voltar) em modo escuro */
html[data-theme="dark"] .btn-light,
[data-bs-theme="dark"] .btn-light {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(57, 255, 20, 0.3) !important;
    color: var(--brand-neon-green, #39ff14) !important;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.2) !important;
}

html[data-theme="dark"] .btn-light:hover,
[data-bs-theme="dark"] .btn-light:hover {
    background-color: rgba(57, 255, 20, 0.08) !important;
    border-color: var(--brand-neon-green, #39ff14) !important;
    color: var(--brand-neon-green, #39ff14) !important;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.4) !important;
}

/* Moldura e foto 3x4 de funcionário em modo escuro */
html[data-theme="dark"] .photo-3x4 {
    background: #050a05 !important;
    border-color: rgba(57, 255, 20, 0.25) !important;
    color: #e0eee0 !important;
}

html[data-theme="dark"] .photo-3x4.has-photo {
    background: #081008 !important;
    border-color: var(--brand-neon-green, #39ff14) !important;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.25) !important;
}

/* =======================================================================
   ESPERANÇA SHOW - OVERRIDES PARA TELA DE ESTOQUE (Premium)
   ======================================================================= */

/* --- TEMA ESCURO (Estoque Dark Mode) --- */
html[data-theme="dark"] .filt-shell,
[data-bs-theme="dark"] .filt-shell {
    --filt-primary: #39ff14; /* neon green */
    --filt-primary-soft: rgba(57, 255, 20, 0.1);
    --filt-surface: #081008; /* dark green surface */
    --filt-surface-soft: #050a05;
    --filt-ink: #e0eee0;
    --filt-muted: #8fa08f;
    --filt-border: rgba(57, 255, 20, 0.18);
    --filt-border-soft: rgba(57, 255, 20, 0.12);
}

html[data-theme="dark"] .filt-store-strip,
html[data-theme="dark"] .filt-main,
html[data-theme="dark"] .filt-region,
html[data-theme="dark"] .filt-store,
html[data-theme="dark"] .filt-chip,
html[data-theme="dark"] .stk-hero,
html[data-theme="dark"] .stk-stat,
html[data-theme="dark"] .stk-filter-card,
html[data-theme="dark"] .stk-table-shell,
html[data-theme="dark"] .stk-details-panel {
    background: #081008 !important;
    border-color: rgba(57, 255, 20, 0.18) !important;
    color: #e0eee0 !important;
}

html[data-theme="dark"] .filt-region__badge {
    background: rgba(57, 255, 20, 0.1) !important;
    color: var(--brand-neon-green, #39ff14) !important;
}

html[data-theme="dark"] .filt-store-strip__count {
    background: rgba(57, 255, 20, 0.1) !important;
    color: var(--brand-neon-green, #39ff14) !important;
}

html[data-theme="dark"] .stk-filter-card__title,
html[data-theme="dark"] .filt-store-strip__eyebrow,
html[data-theme="dark"] .filt-store-strip__regions,
html[data-theme="dark"] .filt-rail__eyebrow,
html[data-theme="dark"] .filt-rail__title,
html[data-theme="dark"] .filt-region__name,
html[data-theme="dark"] .filt-region__eyebrow,
html[data-theme="dark"] .filt-store__content,
html[data-theme="dark"] .filt-store-strip__title-row,
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 {
    color: #e0eee0 !important;
}


/* --- TEMA CLARO (Estoque Light Mode) --- */
html[data-theme="light"] .filt-shell,
[data-bs-theme="light"] .filt-shell {
    --filt-primary: #1c8c1c; /* forest green */
    --filt-primary-soft: #eff6ef;
    --filt-surface: #ffffff;
    --filt-surface-soft: #f4f7f4;
    --filt-ink: #1a1f1a;
    --filt-muted: #65746a;
    --filt-border: rgba(28, 140, 28, 0.18);
    --filt-border-soft: rgba(28, 140, 28, 0.12);
}

html[data-theme="light"] .filt-store-strip,
html[data-theme="light"] .filt-main,
html[data-theme="light"] .filt-region,
html[data-theme="light"] .filt-store,
html[data-theme="light"] .stk-hero,
html[data-theme="light"] .stk-stat,
html[data-theme="light"] .stk-filter-card,
html[data-theme="light"] .stk-table-shell,
html[data-theme="light"] .stk-details-panel {
    background: #ffffff !important;
    border-color: rgba(28, 140, 28, 0.18) !important;
    color: #1a1f1a !important;
}

html[data-theme="light"] .filt-region__badge {
    background: #eff6ef !important;
    color: #1c8c1c !important;
}

html[data-theme="light"] .filt-store-strip__count {
    background: #eff6ef !important;
    color: #1c8c1c !important;
}

/* Correções de contraste adicionais da tela de estoque (Estoque V2.0 Premium) */
html[data-theme="dark"] .filt-region__header {
    background: linear-gradient(180deg, #0a140a 0%, #050a05 100%) !important;
    border-bottom: 1px solid rgba(57, 255, 20, 0.15) !important;
}

html[data-theme="dark"] .filt-store__code {
    color: #ffffff !important;
    text-shadow: 0 0 3px rgba(57, 255, 20, 0.2);
}

html[data-theme="dark"] .filt-region__eyebrow {
    color: var(--brand-neon-green, #39ff14) !important;
}

/* Matriz de Estoque (Grelha de tamanhos por loja) */
html[data-theme="dark"] .stk-store-matrix__store-code,
html[data-theme="dark"] .stk-store-matrix__cell,
html[data-theme="dark"] .stk-store-matrix__total {
    color: #e0eee0 !important;
}

html[data-theme="dark"] .stk-store-matrix__cell.is-empty {
    color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

html[data-theme="dark"] .stk-store-matrix__total.stk-store-matrix__total--grand {
    background: #1c8c1c !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .stk-store-matrix__store.stk-store-matrix__store--total,
html[data-theme="dark"] .stk-store-matrix__cell.stk-store-matrix__cell--total {
    background: #0f5f0f !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .stk-table-shell,
html[data-theme="dark"] .stk-details-panel,
html[data-theme="dark"] .stk-detail-block {
    background: #050a05 !important;
    border-color: rgba(57, 255, 20, 0.18) !important;
}

html[data-theme="dark"] .stk-table thead th {
    background: linear-gradient(180deg, #0a140a 0%, #050a05 100%) !important;
    color: #ffffff !important;
    border-bottom: 2px solid rgba(57, 255, 20, 0.3) !important;
}

/* Light mode equivalents */
html[data-theme="light"] .filt-region__header {
    background: linear-gradient(180deg, #fbfcfd 0%, #f4f7f6 100%) !important;
    border-bottom: 1px solid rgba(28, 140, 28, 0.15) !important;
}

html[data-theme="light"] .filt-store__code {
    color: #0f172a !important;
}

/* =======================================================================
   ESPERANÇA SHOW - REVISÃO DE CONTRASTE & ACABAMENTO PREMIUM UI V3.0
   ======================================================================= */

/* --- TEMA ESCURO: Sobrescritas de Variáveis Globais & Componentes --- */
html[data-theme="dark"],
[data-bs-theme="dark"] {
    /* Corrigir texto principal que usa var(--text) */
    --text: #e0eee0;

    /* Variáveis locais de Contas a Pagar (pl-page) - Alto Contraste Premium */
    --pl-red: #ff5252;
    --pl-red-700: #ff5252;
    --pl-green: #39ff14;
    --pl-green-700: #39ff14;
    --pl-amber: #ffb300;
    --pl-amber-700: #ffb300;
    --pl-blue: #64b5f6;
    --pl-blue-700: #64b5f6;
    --pl-purple: #b39ddb;
    --pl-purple-700: #b39ddb;
    --pl-gray: #a0a0a0;
    --pl-gray-700: #a0a0a0;

    /* Variáveis locais de Lojas/Fluxo de Caixa (sl-page) - Alto Contraste Premium */
    --sl-red: #ff5252;
    --sl-green: #39ff14;
    --sl-green-700: #39ff14;
    --sl-teal: #4db6ac;
    --sl-amber: #ffb300;
    --sl-indigo: #9fa8da;
}

/* --- Matriz de Estoque (Grelha de tamanhos por loja) - PREMIUM --- */
html[data-theme="dark"] .stk-store-matrix__head,
html[data-theme="dark"] .stk-store-matrix__store,
html[data-theme="dark"] .stk-store-matrix__cell,
html[data-theme="dark"] .stk-store-matrix__total {
    background: #081008 !important;
    border-color: rgba(57, 255, 20, 0.18) !important;
}

html[data-theme="dark"] .stk-store-matrix__head {
    background: rgba(57, 255, 20, 0.15) !important;
    color: var(--brand-neon-green, #39ff14) !important;
}

html[data-theme="dark"] .stk-store-matrix__store {
    background: linear-gradient(180deg, #081008 0%, #050a05 100%) !important;
}

html[data-theme="dark"] .stk-store-matrix__store-code {
    color: var(--brand-neon-green, #39ff14) !important;
}

html[data-theme="dark"] .stk-store-matrix__store-meta {
    color: #8fa08f !important;
}

html[data-theme="dark"] .stk-store-matrix__cell {
    color: #ffffff !important;
}

html[data-theme="dark"] .stk-store-matrix__cell.is-empty {
    color: rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

html[data-theme="dark"] .stk-store-matrix__total {
    background: rgba(57, 255, 20, 0.1) !important;
    color: var(--brand-neon-green, #39ff14) !important;
}

html[data-theme="dark"] .stk-store-matrix__store.stk-store-matrix__store--total,
html[data-theme="dark"] .stk-store-matrix__cell.stk-store-matrix__cell--total {
    background: #0f5f0f !important;
    color: #ffffff !important;
    border-color: rgba(57, 255, 20, 0.3) !important;
}

html[data-theme="dark"] .stk-store-matrix__total.stk-store-matrix__total--grand {
    background: #1c8c1c !important;
    color: #ffffff !important;
    border-color: rgba(57, 255, 20, 0.4) !important;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.25) !important;
}

/* Matriz - Light Mode Equivalents */
html[data-theme="light"] .stk-store-matrix__head,
html[data-theme="light"] .stk-store-matrix__store,
html[data-theme="light"] .stk-store-matrix__cell,
html[data-theme="light"] .stk-store-matrix__total {
    background: #ffffff !important;
    border-color: rgba(28, 140, 28, 0.12) !important;
}

html[data-theme="light"] .stk-store-matrix__head {
    background: rgba(28, 140, 28, 0.08) !important;
    color: #0f5f0f !important;
}

html[data-theme="light"] .stk-store-matrix__store {
    background: linear-gradient(180deg, #ffffff 0%, #f4f7f4 100%) !important;
}

html[data-theme="light"] .stk-store-matrix__store-code {
    color: #101827 !important;
}

html[data-theme="light"] .stk-store-matrix__store-meta {
    color: #65746a !important;
}

html[data-theme="light"] .stk-store-matrix__cell {
    color: #1a1f1a !important;
}

html[data-theme="light"] .stk-store-matrix__cell.is-empty {
    color: #b2bfb5 !important;
    background: #f8faf8 !important;
}

html[data-theme="light"] .stk-store-matrix__total {
    background: rgba(28, 140, 28, 0.06) !important;
    color: #0f5f0f !important;
}

html[data-theme="light"] .stk-store-matrix__store.stk-store-matrix__store--total,
html[data-theme="light"] .stk-store-matrix__cell.stk-store-matrix__cell--total {
    background: #eff6ef !important;
    color: #0f5f0f !important;
    border-color: rgba(28, 140, 28, 0.25) !important;
}

html[data-theme="light"] .stk-store-matrix__total.stk-store-matrix__total--grand {
    background: #1c8c1c !important;
    color: #ffffff !important;
    border-color: rgba(28, 140, 28, 0.3) !important;
}

/* --- Estoque: Pickers & Pílulas --- */
html[data-theme="dark"] .stk-brand-picker__suggestions {
    background: #081008 !important;
    border-color: rgba(57, 255, 20, 0.25) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] .stk-brand-suggestion {
    background: #050a05 !important;
    color: #e0eee0 !important;
    border-color: rgba(57, 255, 20, 0.12) !important;
}

html[data-theme="dark"] .stk-brand-suggestion:hover,
html[data-theme="dark"] .stk-brand-suggestion:focus {
    background: rgba(57, 255, 20, 0.08) !important;
    border-color: rgba(57, 255, 20, 0.3) !important;
    color: var(--brand-neon-green, #39ff14) !important;
}

html[data-theme="dark"] .stk-store-check {
    background: #050a05 !important;
    color: #e0eee0 !important;
    border-color: rgba(57, 255, 20, 0.18) !important;
}

html[data-theme="dark"] .stk-store-check:hover {
    background: rgba(57, 255, 20, 0.08) !important;
    border-color: rgba(57, 255, 20, 0.3) !important;
}

html[data-theme="dark"] .stk-master-link.is-active,
html[data-theme="dark"] .stk-master-link[aria-current="true"] {
    background: rgba(57, 255, 20, 0.1) !important;
    border-color: var(--brand-neon-green, #39ff14) !important;
    color: #ffffff !important;
}

/* --- Contas a Pagar: Ações de Linha --- */
html[data-theme="dark"] .pl-row-actions .btn {
    background-color: rgba(57, 255, 20, 0.08) !important;
    color: var(--brand-neon-green, #39ff14) !important;
    border: 1px solid rgba(57, 255, 20, 0.2) !important;
}

html[data-theme="dark"] .pl-row-actions .btn:hover {
    background-color: rgba(57, 255, 20, 0.2) !important;
    border-color: var(--brand-neon-green, #39ff14) !important;
    color: #ffffff !important;
}

/* --- Páginas de Criação / Edição --- */

/* Cadastro de Produto (product-create) */
html[data-theme="dark"] .product-create {
    color: #e0eee0 !important;
}

html[data-theme="dark"] .product-create .fixed-header {
    background: #081008 !important;
    border-bottom-color: rgba(57, 255, 20, 0.18) !important;
}

html[data-theme="dark"] .product-create .fixed-footer {
    background: #081008 !important;
    border-top-color: rgba(57, 255, 20, 0.18) !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .product-create .section-card {
    background: #050a05 !important;
    border-color: rgba(57, 255, 20, 0.15) !important;
    color: #e0eee0 !important;
}

html[data-theme="dark"] .product-create .color-card {
    background: #050a05 !important;
    border-color: rgba(57, 255, 20, 0.15) !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .product-create .color-card__photo {
    background: #081008 !important;
    border-color: rgba(57, 255, 20, 0.25) !important;
}

html[data-theme="dark"] .product-create .subnav .nav-pills .nav-link {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #c7d0d9 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .product-create .subnav .nav-pills .nav-link.active {
    background: var(--brand-500) !important;
    color: #ffffff !important;
    border-color: var(--brand-500) !important;
}

html[data-theme="dark"] .product-create .pill-num {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #c7d0d9 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .product-create .subnav .nav-pills .nav-link.active .pill-num {
    background: #ffffff !important;
    color: var(--brand-500) !important;
}

html[data-theme="dark"] .product-create .section-num {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #c7d0d9 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .product-create .section-card.is-active {
    border-color: var(--brand-500) !important;
}

/* Fechamento Mensal (bonusmonth-create) */
html[data-theme="dark"] .bonusmonth-container {
    --card-border: rgba(57, 255, 20, 0.18) !important;
    --card-shadow: 0 6px 18px rgba(0, 0, 0, 0.6) !important;
    --card-shadow-hover: 0 10px 26px rgba(0, 0, 0, 0.8) !important;
    --card-bg: #050a05 !important;
    --muted: #8fa08f !important;
}

/* Ajustes finos adicionais na tela de fechamento mensal */
html[data-theme="dark"] .metric-suffix,
html[data-theme="dark"] .metric-hint {
    color: #8fa08f !important;
}

/* Recorrência do Fluxo de Caixa (month-pills) */
html[data-theme="dark"] .entries-create .month-pill {
    border-color: rgba(57, 255, 20, 0.25) !important;
    color: #e0eee0 !important;
}

html[data-theme="dark"] .entries-create .month-pill:hover {
    border-color: rgba(57, 255, 20, 0.45) !important;
    box-shadow: 0 0 0 0.15rem rgba(57, 255, 20, 0.12) !important;
}