/* ==========================================================
   ESTRATÉGIA SEGURA — TEMA UNIFICADO
   Paleta oficial (edite aqui para mudar o site inteiro):
   
   Fundo:       #041023 (navy principal)
   Fundo-alt:   #0a1f3a (navy levemente mais claro - cards/sidebar)
   Primária:    #00eaae (turquesa - botões, destaques)
   Texto:       #ffffff (branco)
   Texto-suave: #c8d6e5 (texto secundário)
   ========================================================== */

:root {
    /* === PALETA OFICIAL === */
    --es-fundo: #050c1d;
    --es-fundo-alt: #141e2e;
    --es-primaria: #00eaae;
    --es-primaria-hover: #00c993;
    --es-texto: #ffffff;
    --es-texto-suave: #c8d6e5;
    --es-borda: rgba(255, 255, 255, 0.08);
    --es-borda-hover: rgba(255, 255, 255, 0.15);
}

/* === FUNDO GERAL === */
.fi-body,
html,
body {
    background-color: var(--es-fundo) !important;
    color: var(--es-texto) !important;
}

/* === ÁREAS INTERNAS (transparentes para mostrar o fundo) === */
.fi-main,
.fi-main-ctn,
.fi-page,
.fi-page-content,
.fi-layout {
    background: transparent !important;
}

/* === SIDEBAR === */
.fi-sidebar,
aside.fi-sidebar,
.fi-sidebar-header,
.fi-sidebar-nav,
.fi-sidebar-nav-bg {
    background-color: var(--es-fundo-alt) !important;
    border-color: var(--es-borda) !important;
}

.fi-sidebar-header {
    border-bottom: 1px solid var(--es-borda) !important;
}

/* === TOPBAR === */
.fi-topbar,
.fi-topbar-ctn,
.fi-topbar > nav,
.fi-topbar nav,
header.fi-topbar {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* === TEXTO E LINKS === */
.fi-body,
.fi-body * {
    color: var(--es-texto) !important;
}

.fi-body a,
.fi-body .fi-link {
    color: var(--es-primaria) !important;
}

.fi-body a:hover,
.fi-body .fi-link:hover {
    color: var(--es-primaria-hover) !important;
}

/* === BOTÕES PRIMÁRIOS === */
.fi-btn-primary,
button.fi-btn-primary,
a.fi-btn-primary,
.fi-btn.fi-btn-primary {
    background-color: var(--es-primaria) !important;
    border-color: var(--es-primaria) !important;
    color: var(--es-fundo) !important;
}

.fi-btn-primary:hover,
button.fi-btn-primary:hover,
a.fi-btn-primary:hover,
.fi-btn.fi-btn-primary:hover {
    background-color: var(--es-primaria-hover) !important;
    border-color: var(--es-primaria-hover) !important;
}

/* === CARDS === */
.fi-card,
.fi-card-section,
.fi-section {
    background-color: var(--es-fundo-alt) !important;
    border: 1px solid var(--es-borda) !important;
    color: var(--es-texto) !important;
}

.fi-card:hover,
.fi-card-section:hover,
.fi-section:hover {
    border-color: var(--es-borda-hover) !important;
}

/* === INPUTS === */
.fi-input,
.fi-input-wrapper input,
input.fi-input,
textarea.fi-input,
select.fi-input {
    background-color: var(--es-fundo) !important;
    border: 1px solid var(--es-borda) !important;
    color: var(--es-texto) !important;
}

.fi-input:focus,
input.fi-input:focus,
textarea.fi-input:focus,
select.fi-input:focus {
    border-color: var(--es-primaria) !important;
    box-shadow: 0 0 0 2px rgba(0, 234, 174, 0.1) !important;
}

/* === TABELAS === */
.fi-table,
table.fi-table {
    background-color: transparent !important;
}

.fi-table th,
table.fi-table th {
    background-color: var(--es-fundo-alt) !important;
    border-color: var(--es-borda) !important;
    color: var(--es-texto) !important;
}

.fi-table td,
table.fi-table td {
    border-color: var(--es-borda) !important;
}

/* === NAVEGAÇÃO (SIDEBAR LINKS) === */
.fi-sidebar .fi-sidebar-item a,
.fi-sidebar .fi-sidebar-item-button {
    color: var(--es-texto) !important;
}

.fi-sidebar .fi-sidebar-item a:hover,
.fi-sidebar .fi-sidebar-item-button:hover {
    background-color: var(--es-borda) !important;
    color: var(--es-primaria) !important;
}

.fi-sidebar .fi-sidebar-item-active a,
.fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: var(--es-primaria) !important;
    color: var(--es-fundo) !important;
}

/* === TEXTO SUAVE (legendas, subtítulos) === */
.fi-body .fi-text-sm,
.fi-body .fi-text-muted,
.fi-body small,
.fi-body .text-gray-500 {
    color: var(--es-texto-suave) !important;
}

/* === BADGES E TAGS === */
.fi-badge {
    background-color: var(--es-primaria) !important;
    color: var(--es-fundo) !important;
}

/* === RESPONSIVIDADE === */
@media (max-width: 768px) {
    .fi-sidebar {
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
    }
    
    .fi-sidebar-nav {
        max-height: 100dvh !important;
    }
}

/* ==========================================================
   CARDS DE MÉTRICAS (dashboard) — IDENTIDADE
   Troca o cinza-900 por navy-alt + linha turquesa no topo
   ========================================================== */
.fi-wi-stats-overview-stat {
    background: var(--es-fundo-alt) !important;
    border: 1px solid var(--es-borda) !important;
    box-shadow: none !important;
    position: relative;
    overflow: hidden;
}

.fi-wi-stats-overview-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--es-primaria);
    opacity: 0.7;
}

.fi-wi-stats-overview-stat:hover {
    border-color: var(--es-borda-hover) !important;
}

.fi-wi-stats-overview-stat-label {
    color: var(--es-texto-suave) !important;
}

/* ==========================================================
   HELPERS DO TEMA (cards customizados CreatorTopCards)
   ========================================================== */
.es-top-card {
    background: var(--es-fundo-alt) !important;
    border: 1px solid var(--es-borda) !important;
    box-shadow: none !important;
}

.es-top-card:hover {
    border-color: var(--es-borda-hover) !important;
}

.es-top-label {
    color: var(--es-texto-suave) !important;
}

.es-top-icon {
    color: var(--es-primaria) !important;
}

.es-panel {
    background: var(--es-fundo) !important;
    border: 1px solid var(--es-borda) !important;
}

/* ==========================================================
   TABELAS-WIDGET (RecentActivity, PendingRequests, etc.)
   ========================================================== */
.fi-ta-ctn,
.fi-wi-table {
    background: var(--es-fundo-alt) !important;
    border: 1px solid var(--es-borda) !important;
    box-shadow: none !important;
}

.fi-ta-header,
.fi-ta-header-heading {
    color: var(--es-texto) !important;
}

.fi-ta-table thead th,
.fi-ta-table th {
    background: var(--es-fundo) !important;
    color: var(--es-texto-suave) !important;
    border-color: var(--es-borda) !important;
}

.fi-ta-table tbody td,
.fi-ta-table td {
    border-color: var(--es-borda) !important;
    color: var(--es-texto) !important;
}

.fi-ta-table tbody tr:hover {
    background: var(--es-borda) !important;
}

/* ==========================================================
   SECTIONS E PAINÉIS GENÉRICOS
   ========================================================== */
.fi-section {
    background: var(--es-fundo-alt) !important;
    border: 1px solid var(--es-borda) !important;
    box-shadow: none !important;
}

.fi-section-header,
.fi-section-header-heading {
    color: var(--es-texto) !important;
}

.fi-section-content {
    color: var(--es-texto) !important;
}

/* ==========================================================
   FORMS (inputs, selects, textareas)
   ========================================================== */
.fi-input-wrp {
    background: var(--es-fundo) !important;
    border: 1px solid var(--es-borda) !important;
}

.fi-input-wrp:focus-within {
    border-color: var(--es-primaria) !important;
}

input.fi-input,
textarea.fi-input,
select.fi-select-input {
    background: var(--es-fundo) !important;
    color: var(--es-texto) !important;
    border-color: var(--es-borda) !important;
}

input.fi-input:focus,
textarea.fi-input:focus,
select.fi-select-input:focus {
    border-color: var(--es-primaria) !important;
    box-shadow: 0 0 0 2px rgba(0, 234, 174, 0.15) !important;
}

/* ==========================================================
   DROPDOWNS E MODAIS
   ========================================================== */
.fi-dropdown-panel,
.fi-modal-window {
    background: var(--es-fundo-alt) !important;
    border: 1px solid var(--es-borda) !important;
}

.fi-modal-header-heading,
.fi-modal-header-description {
    color: var(--es-texto) !important;
}

/* ==========================================================
   BADGES (status, tags)
   ========================================================== */
.fi-badge {
    border: 1px solid var(--es-borda) !important;
}

/* ==========================================================
   PAGINATION
   ========================================================== */
.fi-pagination button {
    color: var(--es-texto) !important;
}

.fi-pagination button:hover {
    background: var(--es-borda) !important;
}

/* ==========================================================
   HELPERS UNIVERSAIS DE IDENTIDADE (páginas customizadas)
   ========================================================== */
.es-text { color: var(--es-texto) !important; }
.es-text-suave { color: var(--es-texto-suave) !important; }

/* Painel que envolve tabelas/listas */
.es-table-panel {
    background: var(--es-fundo-alt) !important;
    border: 1px solid var(--es-borda) !important;
    box-shadow: none !important;
}

.es-panel-header {
    border-color: var(--es-borda) !important;
}

.es-panel-title {
    color: var(--es-texto) !important;
}

.es-panel-subtitle {
    color: var(--es-texto-suave) !important;
}

/* Tabelas customizadas */
.es-table thead th {
    background: var(--es-fundo) !important;
    color: var(--es-texto-suave) !important;
    border-color: var(--es-borda) !important;
}

.es-table tbody td {
    border-color: var(--es-borda) !important;
    color: var(--es-texto) !important;
}

.es-table tbody tr {
    transition: background .15s;
}

.es-table tbody tr:hover {
    background: var(--es-borda) !important;
}

/* Botões */
.es-btn-primary {
    background: var(--es-primaria) !important;
    color: var(--es-fundo) !important;
    border: 1px solid var(--es-primaria) !important;
}
.es-btn-primary:hover {
    background: var(--es-primaria-hover) !important;
    border-color: var(--es-primaria-hover) !important;
}

.es-btn-outline {
    background: transparent !important;
    color: var(--es-texto-suave) !important;
    border: 1px solid var(--es-borda) !important;
}
.es-btn-outline:hover {
    color: var(--es-primaria) !important;
    border-color: var(--es-primaria) !important;
}

.es-btn-active {
    background: var(--es-primaria) !important;
    color: var(--es-fundo) !important;
    border: 1px solid var(--es-primaria) !important;
}

/* Inputs */
.es-input {
    background: var(--es-fundo) !important;
    border: 1px solid var(--es-borda) !important;
    color: var(--es-texto) !important;
}
.es-input:focus {
    outline: none;
    border-color: var(--es-primaria) !important;
    box-shadow: 0 0 0 2px rgba(0, 234, 174, 0.15) !important;
}
.es-input::placeholder {
    color: var(--es-texto-suave) !important;
}

/* Divisor */
.es-divider {
    background: var(--es-borda) !important;
}

/* ==========================================================
   NOVO TOM — AZUL MAIS FORTE (MENU LATERAL)
   ========================================================== */
:root {
    --es-menu: #010a18;        /* ← azul royal (o MAIS forte) */
    --es-menu-hover: #061528;  /* hover dos itens */
    --es-menu-border: rgba(255, 255, 255, 0.12);
}

/* Fundo do menu lateral (substitui o --es-fundo-alt) */
.fi-sidebar,
aside.fi-sidebar,
.fi-sidebar-header,
.fi-sidebar-nav,
.fi-sidebar-nav-bg {
    background-color: var(--es-menu) !important;
    border-color: var(--es-menu-border) !important;
}

/* Borda de separação entre menu e conteúdo (lado direito) */
.fi-sidebar,
aside.fi-sidebar {
    border-right: 1px solid var(--es-menu-border) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35) !important;
}

/* Header do menu (área do logo) */
.fi-sidebar-header {
    border-bottom: 1px solid var(--es-menu-border) !important;
}

/* ── Links do menu ── */
.fi-sidebar .fi-sidebar-item a,
.fi-sidebar .fi-sidebar-item-button {
    color: var(--es-texto) !important;
}

/* Hover: um degrau acima do azul royal */
.fi-sidebar .fi-sidebar-item a:hover,
.fi-sidebar .fi-sidebar-item-button:hover {
    background-color: var(--es-menu-hover) !important;
    color: var(--es-primaria) !important;
}

/* Item ativo: turquesa destacado sobre o azul royal */
.fi-sidebar .fi-sidebar-item-active a,
.fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: var(--es-primaria) !important;
    color: var(--es-fundo) !important;
    box-shadow: inset 3px 0 0 var(--es-primaria-hover) !important;
}

/* Ícones do menu */
.fi-sidebar .fi-sidebar-item-icon {
    color: var(--es-texto-suave) !important;
}
.fi-sidebar .fi-sidebar-item:hover .fi-sidebar-item-icon {
    color: var(--es-primaria) !important;
}
.fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-icon {
    color: var(--es-fundo) !important;
}

/* ==========================================================

/* ==========================================================

/* ==========================================================

/* ==========================================================
   MENU LATERAL — item ativo (Filament v3.3.54)
   ========================================================== */
.fi-sidebar-item-active .fi-sidebar-item-button,
.fi-sidebar-item-active .fi-sidebar-item-button:hover,
.fi-sidebar-item-active .fi-sidebar-item-button:focus,
.fi-sidebar-item-active .fi-sidebar-item-button:focus-visible {
    background-color: #00eaae !important; /* turquesa novo */
}

.fi-sidebar-item-active .fi-sidebar-item-button,
.fi-sidebar-item-active .fi-sidebar-item-button * {
    color: #010a18 !important; /* azul do menu novo */
}

/* ==========================================================
   TABELAS — cantos arredondados
   ========================================================== */
.fi-ta-header-ctn {
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
}

.fi-ta-pagination {
    border-bottom-left-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}

/* ============================================================
   [FINAL] Correções com as classes REAIS do Filament v3.3.54
   ============================================================ */

/* MENU: item ativo SEMPRE turquesa + texto escuro (hover/foco incluídos) */
.fi-sidebar-item-active .fi-sidebar-item-button,
.fi-sidebar-item-active .fi-sidebar-item-button:hover,
.fi-sidebar-item-active .fi-sidebar-item-button:focus,
.fi-sidebar-item-active .fi-sidebar-item-button:focus-visible,
.fi-sidebar-item.fi-active .fi-sidebar-item-button,
.fi-sidebar-item.fi-active .fi-sidebar-item-button:hover,
.fi-sidebar-item.fi-active .fi-sidebar-item-button:focus {
    background-color: #00eaae !important;
    background-image: none !important;
    color: #010a18 !important;
}

/* Texto interno (ícone + rótulo) sempre escuro */
.fi-sidebar-item-active .fi-sidebar-item-button *,
.fi-sidebar-item.fi-active .fi-sidebar-item-button * {
    color: #010a18 !important;
}

/* TABELA: o cartão é .fi-ta — arredondar + recortar os cantos */
.fi-ta {
    border-radius: 1rem !important;
    overflow: hidden !important;
}

/* Reforço nos cantos do topo e da paginação */
.fi-ta-header-ctn {
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
}

.fi-ta-pagination {
    border-bottom-left-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}

/* ============================================================
   [CORREÇÃO FINAL] Especificidade máxima (ganha de tudo)
   ============================================================ */

/* MENU: item ativo SEMPRE turquesa + texto escuro, em qualquer estado */
html body .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-button,
html body .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-button:hover,
html body .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-button:focus,
html body .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-button:focus-visible,
html body .fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-button,
html body .fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-button:hover,
html body .fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-button:focus,
html body .fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-button:focus-visible {
    background-color: #00eaae !important;
    background-image: none !important;
    color: #010a18 !important;
    box-shadow: none !important;
}

/* Texto/ícone dentro do item ativo: sempre escuro */
html body .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-button *,
html body .fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-button *,
html body .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label,
html body .fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-label,
html body .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon,
html body .fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-icon {
    color: #010a18 !important;
}

/* TABELA: arredonda TODOS os contêineres e recorta os cantos */
html body .fi-ta,
html body .fi-ta-ctn,
html body .fi-wi-table {
    border-radius: 1rem !important;
    overflow: hidden !important;
}

html body .fi-ta-header-ctn {
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
}

html body .fi-ta-pagination {
    border-bottom-left-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}

/* ============================================================

/* ============================================================

/* ============================================================
   [FINAL v2] Fundo com focos + hover + texto escuro no turquesa
   ============================================================ */

/* FUNDO: fade escuro da esquerda p/ direita + focos pontuais fechados */
html, body, .fi-body {
    background:
        radial-gradient(130% 100% at 115% 115%, rgba(0, 5, 14, 0.95) 0%, transparent 55%),
        radial-gradient(28% 24% at 76% 14%, rgba(0, 234, 174, 0.07) 0%, transparent 100%),
        radial-gradient(26% 24% at 14% 10%, rgba(52, 96, 168, 0.16) 0%, transparent 100%),
        radial-gradient(34% 30% at 52% 92%, rgba(16, 38, 78, 0.14) 0%, transparent 100%),
        linear-gradient(90deg, #01060f 0%, #020a16 35%, #030f1f 70%, #051629 100%)
        !important;
    background-attachment: fixed !important;
}

/* CARDS: transição base (suave na ida e na volta) */
.fi-card,
.fi-card-section,
.fi-section,
.fi-wi-stats-overview-stat,
.es-top-card,
.es-table-panel {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* CARDS: hover com elevação + sombra (o efeito que você gostou) */
.fi-card:hover,
.fi-card-section:hover,
.fi-section:hover,
.fi-wi-stats-overview-stat:hover,
.es-top-card:hover,
.es-table-panel:hover {
    transform: translateY(-4px) !important;
    box-shadow:
        0 12px 40px rgba(0, 234, 174, 0.15),
        0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

/* TEXTO AZUL ESCURO em todo fundo turquesa (botões, badges, item ativo) */
html body .fi-btn-primary,
html body a.fi-btn-primary,
html body .fi-badge,
html body .es-btn-primary,
html body .es-btn-active,
html body .fi-sidebar .fi-sidebar-item-active a,
html body .fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-button,
html body .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-button {
    color: #010a18 !important;
}

html body .fi-btn-primary *,
html body .fi-badge *,
html body .es-btn-primary *,
html body .es-btn-active *,
html body .fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-button *,
html body .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-button * {
    color: #010a18 !important;
}

/* ============================================================
   [CORES DOS VALORES DOS CARDS]
   ============================================================ */

/* "Valores recebidos" -> cifrão + número em turquesa */
.es-stat-value-turquesa .fi-wi-stats-overview-stat-value {
    color: #00eaae !important;
}

/* Saldo: estado amarelo */
.es-stat-value-amarelo .fi-wi-stats-overview-stat-value {
    color: #dfb44b !important;
}

/* Saldo: estado vermelho */
.es-stat-value-vermelho .fi-wi-stats-overview-stat-value {
    color: #e35b55 !important;
}


/* [PADRONIZAÇÃO] Botão primário turquesa com texto azul escuro */
html body .fi-btn.fi-color-primary,
html body .fi-btn.fi-btn-color-primary,
html body a.fi-btn.fi-color-primary,
html body a.fi-btn.fi-btn-color-primary,
html body .fi-btn.fi-color-primary:hover,
html body .fi-btn.fi-btn-color-primary:hover {
    color: #010a18 !important;
}

html body .fi-btn.fi-color-primary .fi-btn-icon,
html body .fi-btn.fi-btn-color-primary .fi-btn-icon,
html body .fi-btn.fi-color-primary .fi-btn-label,
html body .fi-btn.fi-btn-color-primary .fi-btn-label {
    color: #010a18 !important;
}



/* [PADRONIZAÇÃO] Botões success (aprovar/aceitar) = turquesa + texto azul */
html body .fi-btn.fi-color-success,
html body .fi-btn.fi-btn-color-success,
html body a.fi-btn.fi-color-success,
html body a.fi-btn.fi-btn-color-success {
    background-color: #00eaae !important;
    border-color: #00eaae !important;
    color: #010a18 !important;
}

html body .fi-btn.fi-color-success:hover,
html body .fi-btn.fi-btn-color-success:hover,
html body a.fi-btn.fi-color-success:hover,
html body a.fi-btn.fi-btn-color-success:hover {
    background-color: #00c993 !important;
    border-color: #00c993 !important;
    color: #010a18 !important;
}

html body .fi-btn.fi-color-success .fi-btn-icon,
html body .fi-btn.fi-btn-color-success .fi-btn-icon,
html body .fi-btn.fi-color-success .fi-btn-label,
html body .fi-btn.fi-btn-color-success .fi-btn-label {
    color: #010a18 !important;
}



/* [PADRONIZAÇÃO] Botões danger (excluir/rejeitar) = vermelho #E35B55 + texto branco */
html body .fi-btn.fi-color-danger,
html body .fi-btn.fi-btn-color-danger,
html body a.fi-btn.fi-color-danger,
html body a.fi-btn.fi-btn-color-danger {
    background-color: #E35B55 !important;
    border-color: #E35B55 !important;
    color: #ffffff !important;
}

html body .fi-btn.fi-color-danger:hover,
html body .fi-btn.fi-btn-color-danger:hover,
html body a.fi-btn.fi-color-danger:hover,
html body a.fi-btn.fi-btn-color-danger:hover {
    background-color: #cf4a45 !important;
    border-color: #cf4a45 !important;
    color: #ffffff !important;
}

html body .fi-btn.fi-color-danger .fi-btn-icon,
html body .fi-btn.fi-btn-color-danger .fi-btn-icon,
html body .fi-btn.fi-color-danger .fi-btn-label,
html body .fi-btn.fi-btn-color-danger .fi-btn-label {
    color: #ffffff !important;
}

/* Valor verde turquesa no card "Crédito Total de Todos" (dashboard) */
.es-stat-total-verde .fi-wi-stats-overview-stat-value {
    color: var(--es-primaria) !important;
}

/* === BARRA TURQUESA NO TOPO (::before — igual aos widgets originais) === */
/* Reverter: apague deste comentário até o fechamento do ::before abaixo */
.es-top-card {
    position: relative !important;
    overflow: hidden !important;
}
.es-top-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--es-primaria);
    opacity: 0.7;
}

/* ============================================================
   BARRA TURQUESA EM TODOS OS CARDS + SOME NO HOVER
   Reverter: apague deste comentário até o fim do arquivo
   ============================================================ */

/* Posicionamento + recorte (mesma técnica dos cards aprovados) */
.fi-card,
.fi-card-section,
.fi-section,
.es-table-panel {
    position: relative !important;
    overflow: hidden !important;
}

/* Barra turquesa no topo (cor/altura iguais aos originais) */
.fi-card::before,
.fi-card-section::before,
.fi-section::before,
.es-table-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--es-primaria);
    opacity: 0.7;
    z-index: 5;
}

/* Transição suave da opacidade em todas as barras */
.fi-wi-stats-overview-stat::before,
.es-top-card::before,
.fi-card::before,
.fi-card-section::before,
.fi-section::before,
.es-table-panel::before {
    transition: opacity 0.3s ease;
}

/* No hover, a barra some */
.fi-wi-stats-overview-stat:hover::before,
.es-top-card:hover::before,
.fi-card:hover::before,
.fi-card-section:hover::before,
.fi-section:hover::before,
.es-table-panel:hover::before {
    opacity: 0 !important;
}

/* ============================================================
   BARRA TURQUESA EM TABELAS (.fi-ta-ctn) — TODAS AS PÁGINAS
   Reverter: apague deste comentário até o fim do arquivo
   ============================================================ */

.fi-ta-ctn {
    position: relative !important;
    overflow: hidden !important;
}

.fi-ta-ctn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--es-primaria);
    opacity: 0.7;
    z-index: 5;
    transition: opacity 0.3s ease;
}

.fi-ta-ctn:hover::before {
    opacity: 0 !important;
}

/* ============================================================

/* ============================================================

/* ============================================================
   AÇÕES DE TABELA: APROVAR (turquesa) / REJEITAR (vermelho)
   ============================================================ */

/* --- APROVAR: fundo turquesa, ícone/texto escuro --- */
html body .fi-icon-btn.fi-color-success,
html body .fi-btn.fi-color-success,
html body .fi-btn.fi-btn-color-success {
    background-color: var(--es-primaria) !important;
    border: 1px solid var(--es-primaria) !important;
    border-radius: 0.5rem !important;
    color: var(--es-fundo) !important;
}

html body .fi-icon-btn.fi-color-success:hover,
html body .fi-btn.fi-color-success:hover,
html body .fi-btn.fi-btn-color-success:hover {
    background-color: var(--es-primaria-hover) !important;
    border-color: var(--es-primaria-hover) !important;
}

html body .fi-icon-btn.fi-color-success .fi-icon-btn-icon,
html body .fi-icon-btn.fi-color-success svg,
html body .fi-btn.fi-color-success .fi-btn-icon,
html body .fi-btn.fi-color-success .fi-btn-label {
    color: var(--es-fundo) !important;
}

/* --- REJEITAR: fundo vermelho, ícone/texto branco --- */
html body .fi-icon-btn.fi-color-danger,
html body .fi-btn.fi-color-danger,
html body .fi-btn.fi-btn-color-danger {
    background-color: #E35B55 !important;
    border: 1px solid #E35B55 !important;
    border-radius: 0.5rem !important;
    color: #ffffff !important;
}

html body .fi-icon-btn.fi-color-danger:hover,
html body .fi-btn.fi-color-danger:hover,
html body .fi-btn.fi-btn-color-danger:hover {
    background-color: #cf4a45 !important;
    border-color: #cf4a45 !important;
}

html body .fi-icon-btn.fi-color-danger .fi-icon-btn-icon,
html body .fi-icon-btn.fi-color-danger svg,
html body .fi-btn.fi-color-danger .fi-btn-icon,
html body .fi-btn.fi-color-danger .fi-btn-label {
    color: #ffffff !important;
}

/* ============================================================
   AÇÕES DE TABELA (icon-button): APROVAR / REJEITAR
   Classe real: .fi-icon-btn.fi-color-{success|danger}
   ============================================================ */

/* APROVAR (success) — turquesa sólido + ícone escuro */
html body .fi-icon-btn.fi-color-success {
    background-color: #00eaae !important;
    border: 1px solid #00eaae !important;
    border-radius: 0.5rem !important;
}
html body .fi-icon-btn.fi-color-success:hover {
    background-color: #00c993 !important;
    border-color: #00c993 !important;
}
html body .fi-icon-btn.fi-color-success .fi-icon-btn-icon,
html body .fi-icon-btn.fi-color-success svg {
    color: #010a18 !important;
    stroke: #010a18 !important;
}

/* REJEITAR (danger) — vermelho sólido + ícone branco */
html body .fi-icon-btn.fi-color-danger {
    background-color: #E35B55 !important;
    border: 1px solid #E35B55 !important;
    border-radius: 0.5rem !important;
}
html body .fi-icon-btn.fi-color-danger:hover {
    background-color: #cf4a45 !important;
    border-color: #cf4a45 !important;
}
html body .fi-icon-btn.fi-color-danger .fi-icon-btn-icon,
html body .fi-icon-btn.fi-color-danger svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* ============================================================
   BOTÕES APROVAR/REJEITAR (classe custom garantida)
   ============================================================ */
html body .es-btn-aprovar,
html body .es-btn-rejeitar {
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.875rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

html body .es-btn-aprovar {
    background-color: #00eaae !important;
    border: 1px solid #00eaae !important;
    color: #010a18 !important;
}
html body .es-btn-aprovar:hover {
    background-color: #00c993 !important;
    border-color: #00c993 !important;
}
html body .es-btn-aprovar *,
html body .es-btn-aprovar svg {
    color: #010a18 !important;
    stroke: #010a18 !important;
}

html body .es-btn-rejeitar {
    background-color: #E35B55 !important;
    border: 1px solid #E35B55 !important;
    color: #ffffff !important;
}
html body .es-btn-rejeitar:hover {
    background-color: #cf4a45 !important;
    border-color: #cf4a45 !important;
}
html body .es-btn-rejeitar *,
html body .es-btn-rejeitar svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* [MOBILE] Botões do card mobile (MobileTableCard) — paleta oficial */
.es-mobile-btn-success {
    background-color: #00eaae !important;
    border: 1px solid #00eaae !important;
    color: #010a18 !important;
}
.es-mobile-btn-success:hover {
    background-color: #00c993 !important;
    border-color: #00c993 !important;
    color: #010a18 !important;
}

.es-mobile-btn-danger {
    background-color: #E35B55 !important;
    border: 1px solid #E35B55 !important;
    color: #ffffff !important;
}
.es-mobile-btn-danger:hover {
    background-color: #cf4a45 !important;
    border-color: #cf4a45 !important;
    color: #ffffff !important;
}

.es-mobile-btn-gray {
    background-color: #64748b !important;
    border: 1px solid #64748b !important;
    color: #ffffff !important;
}
.es-mobile-btn-gray:hover {
    background-color: #475569 !important;
    border-color: #475569 !important;
    color: #ffffff !important;
}

/* [MOBILE] Botão primário = turquesa (mesma cor do success) */
.es-mobile-btn-primary {
    background-color: #00eaae !important;
    border: 1px solid #00eaae !important;
    color: #010a18 !important;
}
.es-mobile-btn-primary:hover {
    background-color: #00c993 !important;
    border-color: #00c993 !important;
    color: #010a18 !important;
}

/* [MOBILE] Botão warning (Bloquear) = amarelo */
.es-mobile-btn-warning {
    background-color: #FFB020 !important;
    border: 1px solid #FFB020 !important;
    color: #010a18 !important;
}
.es-mobile-btn-warning:hover {
    background-color: #e69a00 !important;
    border-color: #e69a00 !important;
    color: #010a18 !important;
}

/* [MOBILE] Botão info = azul */
.es-mobile-btn-info {
    background-color: #3B82F6 !important;
    border: 1px solid #3B82F6 !important;
    color: #ffffff !important;
}
.es-mobile-btn-info:hover {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}