/* ==========================================================
   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: #040a16;
    --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: #030812;        /* ← 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(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, #000308 0%, #010710 35%, #010b17 70%, #031221 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;
}

html body .es-btn-whatsapp {
    background-color: #25D366 !important;
    border: 1px solid #25D366 !important;
    color: #ffffff !important;
}
html body .es-btn-whatsapp:hover {
    background-color: #1ebe5d !important;
    border-color: #1ebe5d !important;
}
html body .es-btn-whatsapp *,
html body .es-btn-whatsapp svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}


/* [MOBILE] Botões do card mobile (MobileTableCard) — paleta oficial */
.es-mobile-btn-success {
    border-radius: 0.5rem !important;
    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 {
    border-radius: 0.5rem !important;
    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 {
    border-radius: 0.5rem !important;
    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 {
    border-radius: 0.5rem !important;
    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 {
    border-radius: 0.5rem !important;
    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 {
    border-radius: 0.5rem !important;
    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;
}

/* ============================================================
   BADGE "PENDENTE" / DANGER — fundo VERMELHO + texto BRANCO
   (sobrescreve o tema que força todos os badges para turquesa)
   ============================================================ */
html body .fi-badge[class*="danger"] {
    background-color: #E35B55 !important;
    border-color: #E35B55 !important;
    color: #ffffff !important;
}

html body .fi-badge[class*="danger"] * {
    color: #ffffff !important;
}


/* ============================================================
   [GLOBAL] TODOS os botões APROVAR/REJEITAR do sistema
   Garante que qualquer botão success/danger em qualquer página
   siga o padrão: turquesa+azul escuro / vermelho+branco
   ============================================================ */

/* APROVAR (success) — turquesa + texto azul escuro */
html body .fi-btn.fi-color-success,
html body .fi-btn.fi-btn-color-success,
html body button.fi-color-success,
html body a.fi-color-success,
html body .fi-btn.fi-color-success:hover,
html body .fi-btn.fi-btn-color-success:hover {
    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 {
    background-color: #00c993 !important;
    border-color: #00c993 !important;
}
html body .fi-btn.fi-color-success *,
html body .fi-btn.fi-btn-color-success * {
    color: #010a18 !important;
}

/* REJEITAR (danger) — vermelho + texto branco */
html body .fi-btn.fi-color-danger,
html body .fi-btn.fi-btn-color-danger,
html body button.fi-color-danger,
html body a.fi-color-danger,
html body .fi-btn.fi-color-danger:hover,
html body .fi-btn.fi-btn-color-danger:hover {
    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 {
    background-color: #cf4a45 !important;
    border-color: #cf4a45 !important;
}
html body .fi-btn.fi-color-danger *,
html body .fi-btn.fi-btn-color-danger * {
    color: #ffffff !important;
}

/* Ícones dentro dos botões */
html body .fi-btn.fi-color-success .fi-btn-icon,
html body .fi-btn.fi-color-success svg {
    color: #010a18 !important;
    stroke: #010a18 !important;
}
html body .fi-btn.fi-color-danger .fi-btn-icon,
html body .fi-btn.fi-color-danger svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Botões dentro de modais de confirmação */
html body .fi-modal .fi-btn.fi-color-success,
html body .fi-modal .fi-btn.fi-color-danger {
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
}



/* ============================================================
   [GLOBAL] BADGE EXPIRADA — vermelho padrão do site
   ============================================================ */
html body .fi-badge[class*="fi-color-expired"],
html body .fi-badge:has([class*="fi-color-expired"]),
html body [class*="fi-color-expired"] {
    background-color: #E35B55 !important;
    color: #ffffff !important;
    border: 1px solid #E35B55 !important;
    box-shadow: none !important;
}
html body .fi-badge[class*="fi-color-expired"] svg,
html body .fi-badge[class*="fi-color-expired"] .fi-badge-icon,
html body [class*="fi-color-expired"] svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: none !important;
}

/* ============================================================
   [GLOBAL] BADGE MODO — contorno turquesa + texto turquesa
   (fundo transparente, apenas a borda em turquesa)
   ============================================================ */
html body .fi-badge[class*="fi-color-modo"],
html body .fi-badge:has([class*="fi-color-modo"]),
html body [class*="fi-color-modo"] {
    background-color: transparent !important;
    color: #00eaae !important;
    border: 1px solid #00eaae !important;
    box-shadow: none !important;
}
html body .fi-badge[class*="fi-color-modo"] svg,
html body .fi-badge[class*="fi-color-modo"] .fi-badge-icon,
html body [class*="fi-color-modo"] svg {
    color: #00eaae !important;
    stroke: #00eaae !important;
    fill: none !important;
}
/* Forçar cor do texto dentro do badge modo */
html body .fi-badge[class*="fi-color-modo"] *,
html body [class*="fi-color-modo"] * {
    color: #00eaae !important;
}

/* ============================================================
   [GLOBAL] EXPIRADA — TEXTO BRANCO FORÇADO (fundo vermelho)
   ============================================================ */
html body .fi-badge[class*="fi-color-expired"],
html body .fi-badge[class*="fi-color-expired"] .fi-badge-label,
html body .fi-badge[class*="fi-color-expired"] span,
html body .fi-badge[class*="fi-color-expired"] *,
html body [class*="fi-color-expired"],
html body [class*="fi-color-expired"] * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ============================================================
   [PÁGINA CRIADORES] Bloquear / Apagar de vez — vermelho sem fundo
   ============================================================ */
html body .fi-btn.es-btn-danger-text,
html body a.fi-btn.es-btn-danger-text,
html body .fi-link.es-btn-danger-text,
html body .fi-btn.es-btn-danger-text:hover {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #E35B55 !important;
    box-shadow: none !important;
}
html body .fi-btn.es-btn-danger-text *,
html body .fi-btn.es-btn-danger-text .fi-btn-icon,
html body .fi-btn.es-btn-danger-text svg,
html body .fi-link.es-btn-danger-text *,
html body .fi-link.es-btn-danger-text svg {
    color: #E35B55 !important;
    stroke: #E35B55 !important;
}

/* ============================================================
   [PÁGINA CRIADORES] Todos os botões sem fundo
   ============================================================ */

/* Adicionar Créditos — turquesa sem fundo */
html body .fi-btn.es-btn-credits,
html body .fi-btn.es-btn-credits:hover {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #00eaae !important;
    box-shadow: none !important;
}
html body .fi-btn.es-btn-credits *,
html body .fi-btn.es-btn-credits .fi-btn-icon,
html body .fi-btn.es-btn-credits svg {
    color: #00eaae !important;
    stroke: #00eaae !important;
}

/* Extrato e Editar — sem fundo, mantendo cor original */
html body .fi-btn.es-btn-text-only,
html body .fi-btn.es-btn-text-only:hover {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* ============================================================
   [PÁGINA CRIADORES] Adicionar Créditos — TEXTO turquesa forçado
   ============================================================ */
html body .fi-btn.es-btn-credits,
html body .fi-btn.es-btn-credits .fi-btn-label,
html body .fi-btn.es-btn-credits span,
html body .fi-btn.es-btn-credits *,
html body .fi-btn.es-btn-credits:hover,
html body .fi-btn.es-btn-credits:hover * {
    color: #00eaae !important;
    -webkit-text-fill-color: #00eaae !important;
}

/* [MOBILE] Botão ghost danger — sem fundo, texto e ícone vermelhos */
.es-mobile-btn-ghost-danger {
    background-color: transparent !important;
    border: none !important;
    color: #E35B55 !important;
    border-radius: 0.5rem !important;
}
.es-mobile-btn-ghost-danger:hover {
    background-color: rgba(227, 91, 85, 0.1) !important;
    color: #cf4a45 !important;
}

/* [DESKTOP] Botão excluir ghost - sem fundo, vermelho */
.excluir-btn-ghost,
.excluir-btn-ghost.fi-link,
.excluir-btn-ghost.fi-btn,
a.excluir-btn-ghost,
button.excluir-btn-ghost {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #E35B55 !important;
    text-decoration: none !important;
}
.excluir-btn-ghost:hover,
.excluir-btn-ghost:focus {
    background: rgba(227, 91, 85, 0.1) !important;
    background-color: rgba(227, 91, 85, 0.1) !important;
    color: #cf4a45 !important;
}
.excluir-btn-ghost svg,
.excluir-btn-ghost .fi-icon {
    color: #E35B55 !important;
}

/* [DESKTOP] Garante texto e ícone vermelhos no Excluir */
.excluir-btn-ghost .fi-link-label,
.excluir-btn-ghost .fi-link-icon,
.excluir-btn-ghost span {
    color: #E35B55 !important;
    -webkit-text-fill-color: #E35B55 !important;
}
.excluir-btn-ghost svg,
.excluir-btn-ghost svg * {
    color: #E35B55 !important;
    stroke: #E35B55 !important;
}

/* [DESKTOP] Garante texto e ícone vermelhos no Excluir */
.excluir-btn-ghost .fi-link-label,
.excluir-btn-ghost .fi-link-icon,
.excluir-btn-ghost span {
    color: #E35B55 !important;
    -webkit-text-fill-color: #E35B55 !important;
}
.excluir-btn-ghost svg,
.excluir-btn-ghost svg * {
    color: #E35B55 !important;
    stroke: #E35B55 !important;
}

/* ====== COR DOS NÚMEROS DOS CARDS DE ESTATÍSTICAS (DashboardStats) ====== */
.fi-wi-stats-overview-stat-value {
    color: var(--es-primaria) !important;
}

/* ====== FUNDO GERAL DA PÁGINA MAIS ESCURO ====== */
html, body {


/* Fallback sem classe */
html:has(body),
html body,
html .fi-body {
    background-color: #020612 !important;
    background-image: none !important;
}



/* === CARDS / WIDGETS (fundo azul-marinho escuro) === */
.fi-wi-stats-overview-stat,
.fi-wi-table,
.es-table-panel,
.es-top-card {
    background: #0f1826 !important;
    border-color: var(--es-borda) !important;
}

/* [MOBILE] Botão neutro — sem fundo turquesa (contorno + texto discretos) */
.es-mobile-btn-neutral {
    border-radius: 0.5rem !important;
    background-color: transparent !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: #e2e8f0 !important;
}
.es-mobile-btn-neutral:hover {
    background-color: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.35) !important;
    color: #ffffff !important;
}

/* === MOBILE: Reordenação dos campos === */
@media (max-width: 1023.98px) {
  /* Grid A: Distribution antes de Preset */
  .es-ordem-grid-a > div > div:nth-child(1) { order: 2; }
  .es-ordem-grid-a > div > div:nth-child(2) { order: 1; }

  /* Grid B: Data Inicial, Data Final, Plano, Status */
  .es-ordem-grid-b > div > div:nth-child(1) { order: 1; }
  .es-ordem-grid-b > div > div:nth-child(2) { order: 3; }
  .es-ordem-grid-b > div > div:nth-child(3) { order: 2; }
  .es-ordem-grid-b > div > div:nth-child(4) { order: 4; }
}

/* ============================================================
   CARD MOBILE — .es-table viram cartões empilhados (sem rolagem)
   SOMENTE mobile/tablet (<= 1023.98px). Desktop permanece intacto.
   ============================================================ */
@media (max-width: 1023.98px) {
  .es-table:has(td[data-label]) thead {
    display: none !important;
  }

  .es-table:has(td[data-label]) tbody,
  .es-table:has(td[data-label]) tbody tr {
    display: block !important;
  }

  .es-table:has(td[data-label]) tbody tr {
    border: 1px solid var(--es-borda) !important;
    border-radius: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    padding: 0.25rem 0 !important;
    background: var(--es-fundo-alt) !important;
  }

  .es-table:has(td[data-label]) tbody td {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 1rem !important;
    text-align: right !important;
    border: none !important;
    white-space: normal !important;
    word-break: break-word;
  }

  .es-table:has(td[data-label]) tbody td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--es-texto-suave);
    text-align: left;
  }
}
/* Subtítulo mobile-only nas tabelas Filament (usado em PendingCreators) */
.es-mobile-sub {
    display: none;
}
@media (max-width: 1023.98px) {
    .es-mobile-sub {
        display: inline;
        font-size: 0.75rem;
        color: var(--es-texto-suave);
    }
}
/* Alinhamento vertical nas células das tabelas Filament (mobile) */
@media (max-width: 1023.98px) {
  .fi-ta-table tbody td {
    vertical-align: middle !important;
  }
}

/* Força alinhamento vertical no meio em todas as células das tabelas Filament */
.fi-ta-table tbody td,
.fi-ta-table tbody th {
  vertical-align: middle !important;
}