/* ============================================================
   ONYX PAG — design system (override) do painel seller
   Paleta da logo: preto #0B0B0B · verde #64A300 · cinza #8A8A8A
   Carregado por último; reestiliza o shell + páginas no visual claro do mockup.
   ============================================================ */
:root{
  --onyx-black:#0B0B0B;
  --onyx-ink:#14161a;
  --onyx-green:#64A300;
  --onyx-green-600:#558C00;
  --onyx-green-050:#eef6e3;
  --onyx-grey:#8A8A8A;
  --onyx-muted:#6b7280;
  --onyx-bg:#f4f5f7;
  --onyx-surface:#ffffff;
  --onyx-border:#e7e9ee;
  --onyx-border-strong:#d9dce3;
  --onyx-radius:14px;
  --onyx-radius-sm:10px;
  --onyx-shadow:0 1px 2px rgba(16,18,26,.04), 0 1px 3px rgba(16,18,26,.06);
  --onyx-shadow-md:0 4px 16px rgba(16,18,26,.06);
  --onyx-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* ---------- base (força tema claro do mockup) ---------- */
html,body{
  background:var(--onyx-bg)!important;
  color:var(--onyx-ink)!important;
  font-family:var(--onyx-font)!important;
}
body,body[data-theme],:root[data-theme="dark"] body{ background:var(--onyx-bg)!important; }
a{ color:inherit; }
::selection{ background:var(--onyx-green); color:#fff; }

/* ---------- SIDEBAR ---------- */
.sidebar{
  background:var(--onyx-surface)!important;
  border-right:1px solid var(--onyx-border)!important;
  box-shadow:none!important;
}
.sidebar-content{ padding:18px 14px!important; }
.sidebar-logo{ padding:14px 8px 18px!important; display:flex; align-items:center; justify-content:center!important; }
.sidebar-logo .logo-img,.mobile-logo-img,.mobile-menu-logo{
  height:46px!important; width:auto!important; max-width:210px!important; object-fit:contain;
}
.sidebar-divider,.mobile-menu-divider{ background:var(--onyx-border)!important; height:1px; border:0; margin:10px 0; }

/* saldo card */
.sidebar-balance-card{
  background:linear-gradient(135deg,#101317,#1c2127)!important;
  border:1px solid #23262d!important;
  border-radius:var(--onyx-radius)!important;
  color:#fff!important; padding:16px!important; margin:6px 4px 14px!important;
}
.sidebar-balance-card .balance-label{ color:#aeb4bd!important; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; }
.sidebar-balance-card .balance-amount{ color:#fff!important; font-weight:800!important; }
.btn-withdraw{
  background:var(--onyx-green)!important; color:#0b0b0b!important; border:0!important;
  font-weight:700!important; border-radius:10px!important; margin-top:10px!important;
}
.btn-withdraw:hover{ background:var(--onyx-green-600)!important; }

/* grupos de navegação (rótulo injetado via .nav-group-title) */
.nav-group-title{
  font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#9aa1ab; padding:14px 12px 6px; user-select:none;
}
.sidebar-nav{ gap:2px!important; }
.nav-item{
  color:#4b5563!important; border-radius:10px!important; font-weight:500!important;
  padding:.6rem .8rem!important; font-size:.9rem!important; position:relative;
  transition:background .15s,color .15s;
}
.nav-item:hover{ background:#f3f4f6!important; color:var(--onyx-ink)!important; }
.nav-item .nav-icon{ color:#8b93a1!important; width:19px; height:19px; stroke-linecap:round; stroke-linejoin:round; }
.nav-item.active{
  background:var(--onyx-green-050)!important; color:var(--onyx-green-600)!important; font-weight:600!important;
}
.nav-item.active .nav-icon{ color:var(--onyx-green-600)!important; }
.nav-item.active::before{
  content:""; position:absolute; left:0; top:20%; height:60%; width:3px;
  background:var(--onyx-green); border-radius:0 3px 3px 0;
}
.nav-item-disabled{ opacity:.5!important; }
.badge-new{ background:var(--onyx-green-050)!important; color:var(--onyx-green-600)!important; border-color:rgba(100,163,0,.3)!important; }
.badge-soon{ background:#eef0f3!important; color:#8a93a0!important; }

.sidebar-footer .btn-logout{ color:#6b7280!important; border-radius:10px!important; }
.sidebar-footer .btn-logout:hover{ background:#fdeaea!important; color:#d64242!important; }

/* ---------- TOPBAR (injetada no shell) ---------- */
.onyx-topbar{ display:none; }
@media (min-width:1024px){
  .onyx-topbar{
    position:sticky; top:0; z-index:40;
    display:flex; align-items:center; gap:14px;
    height:62px; padding:0 26px;
    margin-left:var(--sidebar-width);
    background:rgba(255,255,255,.9); backdrop-filter:saturate(160%) blur(8px);
    border-bottom:1px solid var(--onyx-border);
  }
  /* compensa: o header antigo do dashboard fica escondido em favor da topbar */
  .desktop-header.desktop-only{ display:none!important; }
}
.onyx-topbar .spacer{ flex:1; }
.onyx-topbar .tb-icon-btn{
  width:38px; height:38px; display:grid; place-items:center; border-radius:10px;
  background:transparent; border:1px solid transparent; color:#4b5563; cursor:pointer;
}
.onyx-topbar .tb-icon-btn:hover{ background:#f3f4f6; }
.onyx-topbar .tb-icon-btn svg{ width:19px; height:19px; }
.btn-nova-transacao{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--onyx-black); color:#fff; border:0; cursor:pointer;
  font-weight:600; font-size:.875rem; padding:.6rem 1rem; border-radius:10px;
}
.btn-nova-transacao:hover{ background:#222; }
.btn-nova-transacao svg{ width:16px; height:16px; }
.live-toggle{ display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:600; color:#3f4653; }
.live-toggle .live-track{ width:44px; height:24px; border-radius:999px; background:var(--onyx-green); position:relative; transition:background .2s; }
.live-toggle .live-knob{ position:absolute; top:3px; left:23px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .2s; }
.live-toggle.off .live-track{ background:#c9ccd3; }
.live-toggle.off .live-knob{ left:3px; }

/* ---------- MAIN / CONTAINERS ---------- */
.main-content{ background:var(--onyx-bg)!important; }
.dashboard-container,.page-container,.content-wrapper{ background:transparent!important; }
.page-title,.dashboard-header .page-title{ color:var(--onyx-ink)!important; font-weight:800!important; letter-spacing:-.01em; }

/* período / date picker */
.period-selector .period-btn{ background:#fff!important; border:1px solid var(--onyx-border)!important; color:#5b6472!important; border-radius:9px!important; font-weight:600!important; }
.period-selector .period-btn.active{ background:var(--onyx-black)!important; color:#fff!important; border-color:var(--onyx-black)!important; }
.btn-date-picker{ background:#fff!important; border:1px solid var(--onyx-border)!important; color:#374151!important; border-radius:9px!important; }

/* ---------- CARDS / MÉTRICAS ---------- */
.metrics-grid{ gap:16px!important; }
.metric-card,.card,.panel,.dashboard-card,.info-card,.stat-card{
  background:var(--onyx-surface)!important;
  border:1px solid var(--onyx-border)!important;
  border-radius:var(--onyx-radius)!important;
  box-shadow:var(--onyx-shadow)!important;
}
.metric-card{ padding:20px!important; }
.metric-title,.metric-subtitle{ color:var(--onyx-muted)!important; }
.metric-value{ color:var(--onyx-ink)!important; font-weight:800!important; }
.metric-icon{ border-radius:12px!important; }
.metric-icon.bg-green,.bg-green{ background:var(--onyx-green-050)!important; color:var(--onyx-green-600)!important; }
.metric-icon svg{ color:var(--onyx-green-600)!important; }

/* ---------- TABELAS ---------- */
table{ background:var(--onyx-surface); border-radius:var(--onyx-radius); overflow:hidden; }
thead th{ background:#fafbfc!important; color:#6b7280!important; font-weight:600!important; border-bottom:1px solid var(--onyx-border)!important; }
tbody td{ border-bottom:1px solid var(--onyx-border)!important; color:#2b2f36!important; }
tbody tr:hover{ background:#fafbfc!important; }

/* ---------- BADGES DE STATUS ---------- */
.status-badge,.badge-status,.badge{ border-radius:999px!important; font-weight:600!important; font-size:.72rem!important; padding:3px 10px!important; }
.status-processado,.status-pago,.status-aprovado,.status-success,.badge-success,.status-paid{
  background:var(--onyx-green-050)!important; color:var(--onyx-green-600)!important; border:1px solid rgba(100,163,0,.25)!important;
}
.status-pendente,.badge-warning{ background:#fff6e6!important; color:#b7791f!important; border:1px solid #f4e1bb!important; }
.status-cancelado,.status-recusado,.badge-danger,.status-failed{ background:#fdeaea!important; color:#d64242!important; border:1px solid #f4c9c9!important; }

/* ---------- BOTÕES ---------- */
.btn-primary,.btn-black,button.primary,.btn-main{
  background:var(--onyx-black)!important; color:#fff!important; border:0!important; border-radius:10px!important; font-weight:600!important;
}
.btn-primary:hover,.btn-black:hover{ background:#222!important; }
.btn-success,.btn-green{ background:var(--onyx-green)!important; color:#0b0b0b!important; border:0!important; border-radius:10px!important; font-weight:700!important; }
.btn-success:hover,.btn-green:hover{ background:var(--onyx-green-600)!important; }

/* links / acentos diversos que eram roxos no tema antigo */
a.text-accent,.text-primary,.link-accent{ color:var(--onyx-green-600)!important; }

/* scrollbar sutil */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:#d7dae1; border-radius:8px; border:2px solid transparent; background-clip:content-box; }

/* ============================================================
   COBERTURA AMPLA DE COMPONENTES (padroniza todas as páginas)
   ============================================================ */
/* headers de página */
h1,.page-title,.section-title,.titulo-pagina{ color:var(--onyx-ink)!important; }
h2,h3{ color:var(--onyx-ink)!important; }
.page-header,.content-header,.header-section{ margin-bottom:18px; }

/* inputs / selects / textareas */
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],
input[type=date],input[type=tel],input[type=url],select,textarea,
.form-input,.form-control,.modern-input,.form-input-modern,.input,.select{
  background:#fff!important; color:var(--onyx-ink)!important;
  border:1px solid var(--onyx-border)!important; border-radius:10px!important;
  padding:.6rem .8rem!important; font-family:var(--onyx-font)!important; font-size:.9rem!important;
  transition:border-color .15s, box-shadow .15s;
}
/* corrige "R$" sobreposto ao valor no campo de saque (prefixo) */
.input-with-prefix{ position:relative; }
.input-with-prefix .form-input{ padding-left:2.6rem!important; }
.input-with-prefix .input-prefix{ z-index:2; }
input:focus,select:focus,textarea:focus,.form-input:focus,.form-control:focus,.form-input-modern:focus{
  outline:none!important; border-color:var(--onyx-green)!important;
  box-shadow:0 0 0 3px rgba(100,163,0,.12)!important;
}
label,.form-label,.field-label{ color:#4b5563!important; font-weight:600!important; font-size:.82rem!important; }
::placeholder{ color:#9ca3af!important; }

/* checkbox/radio accent */
input[type=checkbox],input[type=radio]{ accent-color:var(--onyx-green); }

/* modais */
.modal,.modal-content,.modal-container,.modal-box,.dialog,.popup-content{
  background:var(--onyx-surface)!important; color:var(--onyx-ink)!important;
  border:1px solid var(--onyx-border)!important; border-radius:16px!important; box-shadow:var(--onyx-shadow-md)!important;
}
.modal-overlay,.overlay,.modal-backdrop{ background:rgba(12,14,20,.5)!important; }
.modal-header,.modal-title{ color:var(--onyx-ink)!important; border-bottom:1px solid var(--onyx-border)!important; }

/* tabs / pills */
.tab,.tab-item,.nav-tab,.pill{ color:#5b6472!important; border-radius:9px!important; font-weight:600!important; }
.tab.active,.tab-item.active,.nav-tab.active,.tab-active,.pill.active{
  background:var(--onyx-black)!important; color:#fff!important;
}
.tabs,.tab-list{ border-bottom:1px solid var(--onyx-border)!important; }

/* filtros / toolbars / busca */
.filters,.filter-bar,.toolbar,.search-bar{ background:transparent!important; }
.search-input,.busca input{ border-radius:10px!important; }

/* paginação */
.pagination a,.pagination button,.page-link,.paginacao a{
  border:1px solid var(--onyx-border)!important; background:#fff!important; color:#4b5563!important; border-radius:8px!important;
}
.pagination .active a,.pagination .active,.page-link.active,.paginacao .active{
  background:var(--onyx-black)!important; color:#fff!important; border-color:var(--onyx-black)!important;
}

/* ícones font-awesome dentro de cards/headers acompanham o verde quando são "de marca" */
.metric-card i.fa,.metric-card i.fas,.card i.fa-coins,.stat-card i{ color:var(--onyx-green-600); }

/* estados vazios */
.empty-state,.no-data,.sem-dados{ color:var(--onyx-muted)!important; }

/* chips/tags */
.chip,.tag{ background:#f1f3f5!important; color:#41474f!important; border-radius:999px!important; }

/* dividers */
hr{ border:0; border-top:1px solid var(--onyx-border); }

/* links de ação verdes (eram roxos/azuis) */
.btn-link,.action-link,.link-primary{ color:var(--onyx-green-600)!important; }

/* cards de admin.css (páginas tipo saques) */
.admin-card,.card-admin,.box,.painel{ background:var(--onyx-surface)!important; border:1px solid var(--onyx-border)!important; border-radius:var(--onyx-radius)!important; box-shadow:var(--onyx-shadow)!important; }

/* força containers escuros herdados do tema antigo a ficarem claros */
.content,.content-area,.page-content,.wrapper,.container-fluid{ background:transparent!important; color:var(--onyx-ink)!important; }

/* ---------- fixes por página ---------- */
/* recebimentos: cards de saldo escuros -> claros (padrão dashboard) */
.wallet-stat-card{ background:var(--onyx-surface)!important; border:1px solid var(--onyx-border)!important; color:var(--onyx-ink)!important; box-shadow:var(--onyx-shadow)!important; border-radius:var(--onyx-radius)!important; }
.wallet-stat-value{ color:var(--onyx-ink)!important; font-weight:800!important; }
.wallet-stat-label{ color:var(--onyx-muted)!important; }
.wallet-stat-icon,.wallet-stat-card .icon,.wallet-stat-card [class*="icon"]{ background:var(--onyx-green-050)!important; color:var(--onyx-green-600)!important; }
.wallet-stat-card .btn,.wallet-stat-card button{ background:var(--onyx-green)!important; color:#0b0b0b!important; font-weight:700!important; }
/* tabs do recebimentos (Extrato/Antecipações/Taxas) */
.wallet-tab.active,[class*="tab"].active{ color:var(--onyx-green-600)!important; border-color:var(--onyx-green)!important; }

/* qualquer card que tenha ficado com fundo escuro herdado */
[class*="stat-card"],[class*="wallet-card"],[class*="balance-card"]:not(.sidebar-balance-card){
  background:var(--onyx-surface)!important; color:var(--onyx-ink)!important; border:1px solid var(--onyx-border)!important;
}

/* ============================================================
   OVERRIDE DOS TOKENS DE TEMA (força claro + acento verde)
   cobre páginas que usam var(--card-bg), var(--bg-primary), etc.
   ============================================================ */
:root,
:root[data-theme="dark"],
[data-theme="dark"],
html[data-theme="dark"],
body[data-theme="dark"],
.dark, body.dark{
  --bg-primary:#f4f5f7!important;
  --bg-secondary:#ffffff!important;
  --bg-tertiary:#ffffff!important;
  --color-surface:#ffffff!important;
  --card-bg:#ffffff!important;
  --card-background:#ffffff!important;
  --panel-bg:#ffffff!important;
  --surface:#ffffff!important;

  --text-primary:#14161a!important;
  --text-secondary:#5b6472!important;
  --text-tertiary:#8a93a0!important;
  --text-muted:#8a93a0!important;

  --border-primary:#e7e9ee!important;
  --border-color:#e7e9ee!important;
  --border-hover:#d9dce3!important;
  --hover-border:#d9dce3!important;

  --input-bg:#ffffff!important;
  --input-background:#ffffff!important;
  --input-text:#14161a!important;
  --input-border:#e7e9ee!important;
  --input-border-focus:#64A300!important;
  --input-placeholder:#9ca3af!important;

  --table-bg:#ffffff!important;
  --table-header-bg:#fafbfc!important;
  --table-header-background:#fafbfc!important;
  --table-border:#e7e9ee!important;

  --sidebar-bg:#ffffff!important;
  --sidebar-text:#4b5563!important;
  --sidebar-text-active:#558C00!important;
  --sidebar-border:#e7e9ee!important;

  --accent-primary:#64A300!important;
  --accent-secondary:#558C00!important;
  --accent-hover:#558C00!important;
  --gradient-primary:linear-gradient(135deg,#0B0B0B,#0B0B0B)!important; /* botões pretos */
  --btn-primary-bg:#0B0B0B!important;
  --btn-primary-hover:#222!important;
  --btn-primary-text:#ffffff!important;
}
/* troca o roxo herdado (#180f72) por verde onde aparecer literal */
[style*="#180f72"]{ color:#558C00!important; }

/* ---------- força containers estruturais claros mesmo em data-theme=dark ---------- */
html[data-theme="dark"], html[data-theme="dark"] body,
[data-theme="dark"] body,
[data-theme="dark"] .main-content, [data-theme="dark"] #mainContent,
.main-content, #mainContent{
  background:var(--onyx-bg)!important;
}
[data-theme="dark"] .perfil-tab-content,[data-theme="dark"] .perfil-content,
[data-theme="dark"] .tab-content,[data-theme="dark"] .content-area,
.perfil-tab-content,.perfil-content{ background:transparent!important; }
/* seções de form com barra cinza -> branco */
.perfil-section-modern,.form-section,.card-section,.section-card{ background:var(--onyx-surface)!important; border:1px solid var(--onyx-border)!important; }
.perfil-section-header,.section-header-bar{ background:transparent!important; color:var(--onyx-ink)!important; }
/* header verde do perfil: mantém verde de marca */
.perfil-header-modern{ background:linear-gradient(135deg,#5b9400,#3f6d00)!important; }
/* aba ativa do perfil */
.perfil-tab-btn.active{ background:var(--onyx-green)!important; color:#0b0b0b!important; }

/* perfil: o painel .active tinha bg escuro (2 classes) — vence com 3 */
html[data-theme] .perfil-tab-content.active,
html[data-theme="dark"] .perfil-tab-content.active,
body .perfil-tab-content.active,
.perfil-tab-content.active{ background:transparent!important; }
html[data-theme] .main-content#mainContent{ background:var(--onyx-bg)!important; }
/* header do form (barra cinza) -> branco limpo */
.perfil-card-header-modern{ background:#fafbfc!important; border-bottom:1px solid var(--onyx-border)!important; }

/* perfil: wrapper raiz .page-perfil estava escuro */
html[data-theme] .page-perfil,.page-perfil,
[data-theme="dark"] .page-perfil{ background:transparent!important; }

/* wrappers de busca/filtro que herdaram fundo escuro */
[class*="search"],[class*="busca"],[class*="filter-container"],.search-wrapper,.search-box{
  background:transparent!important;
}
[class*="search"] input,[class*="busca"] input{ background:#fff!important; border:1px solid var(--onyx-border)!important; }
/* selects de filtro */
select{ background:#fff!important; }

/* ============================================================
   SEM DARK MODE — só white. Esconde todos os controles de tema.
   ============================================================ */
.theme-toggle,
.theme-toggle-switch,
.mobile-menu-theme-toggle,
.toggle-switch[data-testid="toggle-mode"],
.theme-btn,
.theme-btn-light,.theme-btn-dark,
#modeToggle,
[data-testid="toggle-mode"],
[data-testid="button-theme-light"],[data-testid="button-theme-dark"],
[data-testid="button-theme-light-perfil"],[data-testid="button-theme-dark-perfil"]{
  display:none!important;
}
/* garante claro independentemente do data-theme salvo */
html,html[data-theme="dark"],html[data-theme="light"]{ color-scheme:light!important; }

/* ============================================================
   LOGIN — painel esquerdo Onyx (remove arte Nitro /assets/4.png)
   ============================================================ */
.left-side{
  background:radial-gradient(120% 120% at 30% 20%, #14210a 0%, #0B0B0B 55%)!important;
  display:flex!important; align-items:center; justify-content:center; padding:48px;
}
.onyx-login-hero{ text-align:center; max-width:440px; }
.onyx-login-wordmark{ width:78%; max-width:380px; height:auto; display:block; margin:0 auto 22px; }
.onyx-login-tagline{ color:#cfd3d8; font-size:1.02rem; font-weight:500; letter-spacing:.01em; margin:0; }
/* form de login (direita): botão preto padrão da marca + acento verde */
.right-side .btn-login,.right-side button[type="submit"],#loginBtn,.login-btn{
  background:var(--onyx-black)!important; color:#fff!important; border:0!important; font-weight:600!important; border-radius:10px!important;
}
.right-side a,.login-form-container a{ color:var(--onyx-green-600)!important; }

/* ============================================================
   SIDEBAR 2.0 — moderna + micro-animações
   ============================================================ */
.sidebar{
  transition:width .30s cubic-bezier(.4,0,.2,1)!important;
  overflow:hidden;
}
.sidebar-content{ overflow-y:auto; overflow-x:hidden; }
.sidebar-content::-webkit-scrollbar{ width:8px; }
.sidebar-content::-webkit-scrollbar-thumb{ background:#e2e5ea; border-radius:8px; }

/* logo: ícone escondido (aparece só recolhido) */
.sidebar-logo{ gap:8px; }
.sidebar-logo .logo-icon-collapsed{ width:34px; height:34px; border-radius:9px; display:none; }
.sidebar-logo .logo-img{ transition:opacity .25s, transform .25s; }
.sidebar-logo:hover .logo-img{ transform:translateY(-1px); }

/* card de saldo: brilho passando + hover lift */
.sidebar-balance-card{ position:relative; overflow:hidden; transition:transform .25s, box-shadow .25s; }
.sidebar-balance-card:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(100,163,0,.16)!important; }
.sidebar-balance-card::after{
  content:""; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(100,163,0,.10),transparent);
  transform:skewX(-18deg); animation:balanceSheen 5.5s ease-in-out infinite;
}
@keyframes balanceSheen{ 0%,72%{ left:-60%; } 88%,100%{ left:130%; } }
.btn-withdraw{ transition:transform .18s, box-shadow .18s, background .18s!important; }
.btn-withdraw:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(100,163,0,.35)!important; }
.btn-withdraw:active{ transform:translateY(0) scale(.98); }

/* grupos: rótulo com traço animado ao aparecer */
.nav-group-title{ display:flex; align-items:center; gap:8px; opacity:.9; }
.nav-group-title::before{ content:""; width:14px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--onyx-green),transparent); }

/* itens de nav: hover/active animados */
.sidebar-nav .nav-item{
  transition:background .2s, color .2s, transform .16s cubic-bezier(.4,0,.2,1), box-shadow .2s!important;
  will-change:transform;
}
.sidebar-nav .nav-item .nav-icon{ transition:transform .2s cubic-bezier(.34,1.56,.64,1), color .2s; }
.sidebar-nav .nav-item:hover{ transform:translateX(3px); }
.sidebar-nav .nav-item:hover .nav-icon{ transform:scale(1.15); color:var(--onyx-green-600)!important; }
.sidebar-nav .nav-item:active{ transform:translateX(3px) scale(.98); }

/* indicador ativo: barra que "cresce" + leve glow + ícone em selo verde */
.sidebar-nav .nav-item.active{ box-shadow:inset 0 0 0 1px rgba(100,163,0,.12); }
.sidebar-nav .nav-item.active::before{
  content:""; position:absolute; left:0; top:50%; height:0; width:3px;
  background:var(--onyx-green); border-radius:0 4px 4px 0;
  box-shadow:0 0 10px rgba(100,163,0,.6);
  transform:translateY(-50%); animation:activeBar .28s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes activeBar{ from{ height:0; } to{ height:62%; } }
.sidebar-nav .nav-item.active .nav-icon{ transform:scale(1.08); }

/* entrada em cascata dos itens ao carregar */
.sidebar-nav > *{ animation:navIn .4s ease both; }
.sidebar-nav > *:nth-child(1){ animation-delay:.02s } .sidebar-nav > *:nth-child(2){ animation-delay:.05s }
.sidebar-nav > *:nth-child(3){ animation-delay:.08s } .sidebar-nav > *:nth-child(4){ animation-delay:.11s }
.sidebar-nav > *:nth-child(5){ animation-delay:.14s } .sidebar-nav > *:nth-child(6){ animation-delay:.17s }
.sidebar-nav > *:nth-child(7){ animation-delay:.20s } .sidebar-nav > *:nth-child(8){ animation-delay:.23s }
.sidebar-nav > *:nth-child(9){ animation-delay:.26s } .sidebar-nav > *:nth-child(10){ animation-delay:.29s }
.sidebar-nav > *:nth-child(n+11){ animation-delay:.32s }
@keyframes navIn{ from{ opacity:0; transform:translateX(-8px); } to{ opacity:1; transform:translateX(0); } }

/* badge NOVO pulsando; EM BREVE discreto */
.badge-new{ animation:badgePulse 2.4s ease-in-out infinite; }
@keyframes badgePulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(100,163,0,.30); } 50%{ box-shadow:0 0 0 5px rgba(100,163,0,0); } }

/* logout com micro-interação */
.sidebar-footer .btn-logout{ transition:background .2s,color .2s,transform .16s!important; }
.sidebar-footer .btn-logout:hover{ transform:translateX(3px); }
.sidebar-footer .btn-logout:hover .icon{ transform:translateX(-2px); transition:transform .2s; }

/* submenu (Checkout) seta gira suave já existe; item filho recua no hover */
#checkoutSubmenu .nav-item:hover{ transform:translateX(2px); }

/* ---------- MODO RECOLHIDO ---------- */
body.sidebar-collapsed .sidebar{ width:78px!important; }
body.sidebar-collapsed .sidebar-content{ padding:18px 12px!important; }
body.sidebar-collapsed .sidebar .logo-img,
body.sidebar-collapsed .nav-item span,
body.sidebar-collapsed .nav-group-title,
body.sidebar-collapsed .sidebar-balance-card .balance-label,
body.sidebar-collapsed .sidebar-balance-card .balance-amount,
body.sidebar-collapsed .btn-withdraw,
body.sidebar-collapsed .badge-new,
body.sidebar-collapsed .badge-soon,
body.sidebar-collapsed #checkoutArrow,
body.sidebar-collapsed .sidebar-footer .btn-logout span{ display:none!important; }
body.sidebar-collapsed .sidebar-logo{ justify-content:center; }
body.sidebar-collapsed .sidebar-logo .logo-icon-collapsed{ display:block; }
body.sidebar-collapsed .sidebar-balance-card{ padding:12px!important; display:flex; justify-content:center; }
body.sidebar-collapsed .sidebar-balance-card .balance-header{ margin:0; }
body.sidebar-collapsed .nav-item{ justify-content:center; padding:.6rem!important; }
body.sidebar-collapsed .nav-item .nav-icon{ margin:0; }
@media (min-width:1024px){
  body.sidebar-collapsed .main-content,
  body.sidebar-collapsed .onyx-topbar{ margin-left:78px!important; transition:margin-left .30s cubic-bezier(.4,0,.2,1); }
}
/* tooltip no modo recolhido */
body.sidebar-collapsed .nav-item{ position:relative; }
body.sidebar-collapsed .nav-item:hover::after{
  content:attr(data-tip); position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%);
  background:#0B0B0B; color:#fff; font-size:.75rem; font-weight:600; padding:6px 10px; border-radius:8px; white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.18); z-index:60; animation:tipIn .15s ease both;
}
@keyframes tipIn{ from{ opacity:0; transform:translateY(-50%) translateX(-4px);} to{ opacity:1; transform:translateY(-50%) translateX(0);} }

/* respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce){
  .sidebar-balance-card::after,.badge-new{ animation:none!important; }
  .sidebar-nav > *{ animation:none!important; }
  .sidebar-nav .nav-item.active::before{ animation:none!important; height:62%; }
}

/* ============================================================
   FIX: remove vestígio da borda-esquerda 4px do tema antigo
   + item ativo limpo e moderno
   ============================================================ */
.sidebar-nav .nav-item,
.sidebar-nav .nav-item.active,
.mobile-menu-nav .mobile-menu-item,
.mobile-menu-nav .mobile-menu-item.active{
  border:0!important; padding-left:.8rem!important;
}
/* pill do ativo: fundo suave, sem sombra/anel de borda */
.sidebar-nav .nav-item.active{
  background:var(--onyx-green-050)!important;
  color:var(--onyx-green-600)!important;
  box-shadow:none!important;
  font-weight:600!important;
}
/* acento: pílula fininha destacada da borda (não parece "border") */
.sidebar-nav .nav-item.active::before{
  left:4px!important; width:3px!important; border-radius:99px!important;
  background:var(--onyx-green)!important;
  box-shadow:0 0 8px rgba(100,163,0,.45)!important;
}
@keyframes activeBar{ from{ height:0; } to{ height:55%; } }
/* mobile ativo idem (sem borda grossa) */
.mobile-menu-nav .mobile-menu-item.active{ background:var(--onyx-green-050)!important; color:var(--onyx-green-600)!important; }

/* ============================================================
   Páginas herdadas: esconde header legado + moderniza botões
   ============================================================ */
header.header{ display:none!important; }                 /* breadcrumb + dropdown antigo (topbar novo já cobre) */
.filter-button,.export-button,.btn-filtro,.btn-export{
  border-radius:10px!important; font-weight:600!important; font-family:var(--onyx-font)!important;
}
.filter-button{ background:#fff!important; border:1px solid var(--onyx-border)!important; color:#374151!important; }
.filter-button.active{ background:var(--onyx-black)!important; color:#fff!important; border-color:var(--onyx-black)!important; }
.export-button{ background:var(--onyx-black)!important; color:#fff!important; border:0!important; }
.export-button:hover,.filter-button.active:hover{ background:#222!important; }
/* adquirentes: banner de troféus/ranking mais discreto e legível */
[class*="ranking"] [class*="faded"],.text-muted-2{ color:#8a93a0!important; }

/* ============================================================
   OVERRIDE do set --color-* (financeiro/adquirentes/integracoes)
   — texto apagado, verde murcho e fundos escuros herdados
   ============================================================ */
:root, :root[data-theme="dark"], [data-theme="dark"], html[data-theme="dark"], body[data-theme="dark"]{
  --color-background:#f4f5f7!important;
  --color-surface:#ffffff!important;
  --color-card:#ffffff!important;
  --color-border:#e7e9ee!important;
  --color-text-primary:#14161a!important;
  --color-text-secondary:#5b6472!important;
  --color-text-tertiary:#8a93a0!important;
  --color-green:#64A300!important;
  --color-primary:#64A300!important;
  --color-primary-dark:#4e8000!important;
  --color-accent:#64A300!important;
  --color-purple:#64A300!important;
  --color-orange:#64A300!important;
}
/* botões de ação do financeiro (Solicitar saque/antecipação) */
.btn-wallet-action{ background:var(--onyx-green)!important; color:#0b0b0b!important; font-weight:700!important; border:0!important; border-radius:10px!important; }
.btn-wallet-action:hover{ background:var(--onyx-green-600)!important; }
/* integrações: caixa de chave mais limpa (era preta/cinza) */
.api-key-item{ background:#fff!important; border:1px solid var(--onyx-border)!important; }
.api-key-label{ color:#6b7280!important; font-weight:600!important; }
.api-key-value-wrapper{ background:#f6f7f9!important; border:1px solid var(--onyx-border)!important; }
.api-key-value{ color:#2b2f36!important; }
.api-key-badge.public{ background:var(--onyx-green-050)!important; color:var(--onyx-green-600)!important; }
/* adquirentes: banner de troféus mais discreto + nome legível */
.adq-rank-info,[class*="adq-rank"]{ background:#fafbfc!important; border:1px solid var(--onyx-border)!important; }
.adq-rank-info-txt,[class*="adq"] [class*="txt"]{ color:#5b6472!important; }

/* transações: badge de método neutro e limpo (era azul fixo) */
.payment-badge{ background:#eef0f3!important; color:#41474f!important; border:1px solid #e4e7eb!important; border-radius:999px!important; font-weight:600!important; font-size:.72rem!important; padding:3px 10px!important; text-transform:uppercase!important; letter-spacing:.02em; }
/* financeiro: ícone dos cards em verde (era branco → invisível no fundo claro) */
.wallet-stat-icon.bg-green,.wallet-stat-icon.bg-purple,.wallet-stat-icon.bg-orange,.wallet-stat-icon{ background:var(--onyx-green-050)!important; }
.wallet-stat-icon svg,.wallet-stat-icon img,.wallet-stat-icon i{ color:var(--onyx-green-600)!important; }
/* ação (olho) da tabela de transações mais nítida */
.transacoes-table .btn-ver,.transacao-acao button,td .btn-icon{ color:#6b7280!important; }

/* ============================================================
   TOPBAR 2.0 — Ajuda + sino + menu de perfil
   ============================================================ */
.onyx-topbar{ gap:10px!important; }
/* botão Ajuda (chat) */
.tb-help{
  display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px;
  background:#fff; border:1px solid var(--onyx-border); border-radius:10px; cursor:pointer;
  font-family:var(--onyx-font); font-size:.85rem; font-weight:600; color:#374151; transition:all .15s;
}
.tb-help svg{ width:17px; height:17px; color:var(--onyx-green-600); }
.tb-help:hover{ border-color:#c9cdd4; background:#fafbfc; transform:translateY(-1px); }

/* sino + dot */
.tb-pop-wrap{ position:relative; }
.onyx-topbar .tb-icon-btn{ position:relative; }
.tb-dot{ display:none; position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:50%; background:var(--onyx-green); border:2px solid #fff; }
.tb-dot.on{ display:block; }

/* popover genérico */
.tb-pop{
  position:absolute; top:calc(100% + 10px); right:0; min-width:280px;
  background:#fff; border:1px solid var(--onyx-border); border-radius:14px;
  box-shadow:0 12px 34px rgba(16,18,26,.12); padding:8px; z-index:80;
  opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; transition:opacity .15s, transform .15s;
}
.tb-pop.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.tb-pop-head{ font-weight:700; color:#14161a; font-size:.9rem; padding:8px 10px 6px; }
.tb-pop-empty{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; color:#9aa1ab; font-size:.82rem; padding:22px 14px 24px; }
.tb-pop-empty svg{ width:26px; height:26px; color:#c9cdd4; }

/* menu de perfil */
.tb-profile{ position:relative; }
.tb-profile-btn{
  display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 8px 0 6px;
  background:transparent; border:1px solid transparent; border-radius:12px; cursor:pointer; font-family:var(--onyx-font);
  transition:background .15s, border-color .15s;
}
.tb-profile-btn:hover{ background:#f3f4f6; }
.tb-avatar{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:0 0 34px;
  background:var(--onyx-green); color:#0b0b0b; font-weight:800; font-size:.82rem; letter-spacing:.02em;
}
.tb-avatar.lg{ width:40px; height:40px; flex:0 0 40px; border-radius:11px; }
.tb-profile-meta{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; }
.tb-profile-name{ font-size:.85rem; font-weight:700; color:#14161a; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tb-profile-sub{ font-size:.72rem; color:#8a93a0; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tb-caret{ width:16px; height:16px; color:#9aa1ab; transition:transform .18s; }
.tb-profile-menu.open ~ * .tb-caret, .tb-profile-btn:has(+ .tb-profile-menu.open) .tb-caret{ transform:rotate(180deg); }
.tb-profile-pop{ min-width:250px; padding:8px; }
.tb-profile-card{ display:flex; align-items:center; gap:12px; padding:10px 10px 12px; border-bottom:1px solid var(--onyx-border); margin-bottom:6px; }
.tb-menu-item{ display:flex; align-items:center; gap:11px; padding:10px 10px; border-radius:9px; text-decoration:none; color:#374151; font-size:.88rem; font-weight:500; transition:background .12s; }
.tb-menu-item svg{ width:17px; height:17px; color:#8b93a1; }
.tb-menu-item:hover{ background:#f3f4f6; }
.tb-menu-item.danger{ color:#d64242; }
.tb-menu-item.danger svg{ color:#d64242; }
.tb-menu-item.danger:hover{ background:#fdeaea; }
.tb-menu-sep{ height:1px; background:var(--onyx-border); margin:6px 4px; }

/* ============================================================
   Botão flutuante de Ajuda (canto inferior direito)
   ============================================================ */
.tb-help{ display:none!important; }  /* removido da topbar */
.onyx-help-fab{
  position:fixed; right:24px; bottom:24px; z-index:90;
  display:inline-flex; align-items:center; justify-content:center; gap:0;
  height:54px; width:54px; padding:0; border:0; border-radius:999px; cursor:pointer;
  background:var(--onyx-green); color:#0b0b0b; box-shadow:0 8px 24px rgba(100,163,0,.35);
  overflow:hidden; font-family:var(--onyx-font); font-weight:700; font-size:.92rem;
  transition:width .22s ease, padding .22s ease, box-shadow .18s, transform .12s;
}
.onyx-help-fab svg{ width:24px; height:24px; flex:0 0 24px; }
.onyx-help-fab-txt{ white-space:nowrap; opacity:0; max-width:0; transition:opacity .18s, max-width .22s, margin .2s; }
.onyx-help-fab:hover{ width:auto; padding:0 20px 0 16px; box-shadow:0 10px 30px rgba(100,163,0,.45); }
.onyx-help-fab:hover .onyx-help-fab-txt{ opacity:1; max-width:120px; margin-left:9px; }
.onyx-help-fab:active{ transform:scale(.95); }
@media (max-width:640px){ .onyx-help-fab{ right:16px; bottom:16px; height:52px; width:52px; } }

/* ============================================================
   Chat de ajuda flutuante (painel + FAB alterna ícone)
   ============================================================ */
.onyx-help-fab .ohc-ico-close{ display:none; }
.onyx-help-fab.is-open{ width:54px!important; padding:0!important; }
.onyx-help-fab.is-open .onyx-help-fab-txt{ opacity:0!important; max-width:0!important; margin-left:0!important; }
.onyx-help-fab.is-open .ohc-ico-chat{ display:none; }
.onyx-help-fab.is-open .ohc-ico-close{ display:block; }

.onyx-help-chat{
  position:fixed; right:24px; bottom:90px; z-index:95;
  width:360px; max-width:calc(100vw - 32px); height:520px; max-height:calc(100vh - 130px);
  display:flex; flex-direction:column; background:#fff; border:1px solid #ececf0;
  border-radius:18px; box-shadow:0 18px 50px rgba(11,11,11,.22); overflow:hidden;
  font-family:var(--onyx-font); opacity:0; transform:translateY(12px) scale(.98);
  pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.onyx-help-chat.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

.ohc-head{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px 18px; background:var(--onyx-black); color:#fff; }
.ohc-head-info{ display:flex; align-items:center; gap:11px; }
.ohc-avatar{ width:38px; height:38px; border-radius:50%; background:var(--onyx-green); color:#0b0b0b;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.05rem; }
.ohc-head-txt strong{ display:block; font-size:.95rem; font-weight:700; }
.ohc-head-txt em{ display:flex; align-items:center; gap:6px; font-style:normal; font-size:.76rem; color:#b9bdc4; margin-top:1px; }
.ohc-dot{ width:7px; height:7px; border-radius:50%; background:var(--onyx-green); box-shadow:0 0 0 3px rgba(100,163,0,.25); }
.ohc-close{ background:none; border:0; color:#c9cdd3; font-size:24px; line-height:1; cursor:pointer; padding:0 2px; }
.ohc-close:hover{ color:#fff; }

.ohc-body{ flex:1; overflow-y:auto; padding:18px 16px; background:#f7f8f9;
  display:flex; flex-direction:column; gap:10px; }
.ohc-msg{ max-width:82%; padding:10px 13px; font-size:.9rem; line-height:1.45; border-radius:14px; }
.ohc-msg.bot{ align-self:flex-start; background:#fff; color:#1c1f24; border:1px solid #ececf0; border-bottom-left-radius:5px; }
.ohc-msg.user{ align-self:flex-end; background:var(--onyx-green); color:#0b0b0b; font-weight:500; border-bottom-right-radius:5px; }
.ohc-msg.typing{ display:flex; gap:4px; align-items:center; }
.ohc-msg.typing span{ width:7px; height:7px; border-radius:50%; background:#c4c8ce; animation:ohcBlink 1s infinite; }
.ohc-msg.typing span:nth-child(2){ animation-delay:.18s; }
.ohc-msg.typing span:nth-child(3){ animation-delay:.36s; }
@keyframes ohcBlink{ 0%,60%,100%{ opacity:.3; } 30%{ opacity:1; } }

.ohc-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.ohc-chip{ border:1px solid #d8dbe0; background:#fff; color:#2b2f36; border-radius:99px;
  padding:8px 14px; font-family:var(--onyx-font); font-size:.83rem; font-weight:600; cursor:pointer;
  transition:all .15s; }
.ohc-chip:hover{ border-color:var(--onyx-green); color:var(--onyx-green-600); background:var(--onyx-green-050); }

.ohc-wa{ align-self:flex-start; display:inline-flex; align-items:center; gap:7px;
  background:var(--onyx-black); color:#fff!important; text-decoration:none; font-size:.85rem; font-weight:600;
  padding:9px 15px; border-radius:99px; }
.ohc-wa:hover{ background:#20242b; }

.ohc-composer{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-top:1px solid #ececf0; background:#fff; }
.ohc-composer input{ flex:1; border:0; outline:none; background:#f2f3f5; border-radius:99px;
  padding:11px 15px; font-family:var(--onyx-font); font-size:.9rem; color:#1c1f24; }
.ohc-composer input::placeholder{ color:#9aa0a8; }
.ohc-send{ width:42px; height:42px; flex:0 0 42px; border:0; border-radius:50%; cursor:pointer;
  background:var(--onyx-green); color:#0b0b0b; display:flex; align-items:center; justify-content:center;
  transition:background .15s, transform .1s; }
.ohc-send svg{ width:19px; height:19px; }
.ohc-send:hover{ background:var(--onyx-green-600); }
.ohc-send:active{ transform:scale(.93); }

@media (max-width:640px){
  .onyx-help-chat{ right:12px; left:12px; bottom:80px; width:auto; height:70vh; }
}

/* ============================================================
   Header MOBILE em paleta Onyx (branco + verde) — global
   ============================================================ */
@media (max-width:767px){
  .mobile-header{
    background:#fff!important;
    background-image:none!important;
    color:var(--onyx-ink)!important;
    border-bottom:1px solid var(--onyx-border)!important;
    border-radius:0 0 18px 18px!important;
    box-shadow:0 2px 12px rgba(11,11,11,.06)!important;
  }
  .mobile-menu-btn{
    background:var(--onyx-green-050)!important;
    box-shadow:none!important; border:1px solid var(--onyx-border)!important;
  }
  .mobile-menu-btn svg{ color:var(--onyx-green-600)!important; stroke:var(--onyx-green-600)!important; }
  .mobile-logo{ background:transparent!important; }
  .mobile-logo-img{ height:28px!important; width:auto!important; }
  .mobile-header .avatar,.mobile-avatar-link .avatar{
    background:var(--onyx-green)!important; color:#0b0b0b!important; font-weight:800!important;
    border:0!important;
  }
}

/* ícone do cabeçalho de Webhooks em paleta Onyx (era azul) */
.webhooks-icon{ background:var(--onyx-green-050)!important; color:var(--onyx-green-600)!important; }
.webhooks-icon svg{ color:var(--onyx-green-600)!important; }