/* ==========================================================================
   LUCPAGUEI UI SYSTEM 2.0 — CAMADA DE PONTE (LEGACY BRIDGE)
   --------------------------------------------------------------------------
   Este arquivo NAO define valores. Ele apenas MAPEIA as classes legadas
   do template (.card, .btn, .table, .pc-sidebar, .stat-card...) para os
   tokens do Design System.

   Fonte unica da verdade:  lucpaguei-ds.css  (carregado ANTES deste)

   Por que fora de @layer e com !important:
     as paginas legadas trazem <style> proprio (nao-layered) que venceria
     qualquer regra em @layer. Enquanto a migracao nao termina, esta camada
     precisa dessa forca. Componentes NOVOS devem usar .lp-* e NAO passam
     por aqui.

   Ao migrar uma tela para os componentes .lp-*, as regras correspondentes
   aqui podem ser removidas. Este arquivo deve encolher ate desaparecer.
   ========================================================================== */

/* Tokens: definidos em lucpaguei-ds.css (secao 1).
   Os aliases curtos (--lp-bg, --lp-surface, --lp-r...) usados abaixo
   sao declarados la, na secao 1.12. Nenhum valor cru aqui. */


/* ==========================================================================
   2. BASE
   ========================================================================== */
html {
    background: var(--lp-bg) !important;
    -webkit-text-size-adjust: 100%;
}

body,
body[data-pc-theme="light"],
body[data-pc-theme="dark"],
body[data-pc-preset] {
    background: var(--lp-bg) !important;
    background-image:
        radial-gradient(1100px 620px at 12% -12%, rgba(0, 87, 255, 0.16) 0%, transparent 62%),
        radial-gradient(900px 520px at 92% 4%, rgba(122, 92, 255, 0.11) 0%, transparent 60%),
        radial-gradient(760px 460px at 60% 108%, rgba(0, 209, 255, 0.07) 0%, transparent 62%) !important;
    background-attachment: fixed !important;
    color: var(--lp-text) !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-feature-settings: "cv02", "cv03", "cv04", "ss01", "tnum";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.011em;
}

/* Tipografia */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--lp-text) !important;
    font-weight: 650 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.22 !important;
}

h1, .h1 { font-weight: 700 !important; letter-spacing: -0.032em !important; }

p, span, li, td, th, div, label, small {
    letter-spacing: -0.008em;
}

a { color: var(--lp-blue-400); text-decoration: none; transition: color .2s var(--lp-ease); }
a:hover { color: var(--lp-cyan); }

hr, .divider {
    border-color: var(--lp-border) !important;
    background: var(--lp-border) !important;
    opacity: 1 !important;
}

::selection { background: rgba(0, 87, 255, 0.35); color: var(--lp-color-white); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.14) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--lp-r-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); background-clip: content-box; }

/* Foco acessivel */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--lp-blue) !important;
    outline-offset: 2px !important;
    border-radius: var(--lp-r-sm);
}

/* Texto utilitario do template */
.text-muted, .text-secondary, small.text-muted {
    color: var(--lp-text-3) !important;
}
.text-dark, .text-body, .text-black { color: var(--lp-text) !important; }
.text-white { color: var(--lp-text) !important; }
.bg-white, .bg-light { background: var(--lp-surface) !important; }
.text-primary { color: var(--lp-blue-400) !important; }
.text-success { color: var(--lp-success) !important; }
.text-danger  { color: var(--lp-danger) !important; }
.text-warning { color: var(--lp-warning) !important; }
.text-info    { color: var(--lp-info) !important; }

/* ==========================================================================
   3. SHELL — containers de pagina
   ========================================================================== */
main,
.pc-container,
.pc-content,
.container,
.container-fluid,
.modern-dashboard-container,
.modern-login-container,
.modern-register-container,
.deposits-container,
.withdraws-container,
.users-container,
.profit-container,
.affiliates-container,
.commissions-container,
.referred-container,
.verify-container,
.doc-container,
.email-container,
.error-container,
.transactions-table-container,
.deposits-table-container,
.withdraws-table-container,
.modern-table-container {
    background: transparent !important;
    background-color: transparent !important;
}

.modern-dashboard-container,
.modern-login-container,
.modern-register-container {
    max-width: 1320px !important;
    margin-inline: auto !important;
}

/* ==========================================================================
   4. SIDEBAR
   ========================================================================== */
body .pc-sidebar,
body .pc-sidebar .navbar-wrapper {
    background: rgba(12, 17, 27, 0.92) !important;
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    backdrop-filter: blur(28px) saturate(150%);
    border-right: 1px solid var(--lp-border) !important;
    box-shadow: var(--lp-shadow-lg) !important;
    width: 288px !important;
    max-width: 288px !important;
}

body .pc-sidebar .m-header {
    border-bottom: 1px solid var(--lp-border-soft) !important;
    padding: 1.5rem 1.25rem !important;
    margin-bottom: .5rem !important;
}

body .pc-sidebar .navbar-content { padding: .25rem .75rem 2rem !important; }

body .pc-sidebar .pc-navbar > .pc-item { margin-bottom: 2px !important; }

body .pc-sidebar .pc-navbar .pc-link {
    color: var(--lp-text-2) !important;
    border-radius: 12px !important;
    padding: .72rem .85rem !important;
    margin: 0 !important;
    font-size: .9rem !important;
    font-weight: 500 !important;
    letter-spacing: .002em !important;
    border: 1px solid transparent !important;
    transition: background .18s var(--lp-ease), color .18s var(--lp-ease), border-color .18s var(--lp-ease) !important;
}

body .pc-sidebar .pc-navbar .pc-link > div {
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
}

body .pc-sidebar .pc-navbar .pc-link svg,
body .pc-sidebar .pc-navbar .pc-link i {
    color: var(--lp-text-3) !important;
    width: 20px !important;
    height: 20px !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
    transition: color .18s var(--lp-ease) !important;
}

body .pc-sidebar .pc-navbar .pc-link:hover {
    background: var(--lp-glass-strong) !important;
    color: var(--lp-text) !important;
    border-color: var(--lp-border) !important;
}
body .pc-sidebar .pc-navbar .pc-link:hover svg,
body .pc-sidebar .pc-navbar .pc-link:hover i { color: var(--lp-cyan) !important; }

body .pc-sidebar .pc-navbar .pc-item.active > .pc-link,
body .pc-sidebar .pc-navbar .pc-link.active {
    background: linear-gradient(90deg, rgba(0, 87, 255, 0.22) 0%, rgba(0, 209, 255, 0.06) 100%) !important;
    color: var(--lp-color-white) !important;
    border-color: rgba(0, 87, 255, 0.32) !important;
    box-shadow: var(--lp-inset) !important;
}
body .pc-sidebar .pc-navbar .pc-item.active > .pc-link svg,
body .pc-sidebar .pc-navbar .pc-item.active > .pc-link i { color: var(--lp-cyan) !important; }

body .pc-sidebar .pc-navbar .pc-submenu {
    background: transparent !important;
    border-left: 1px solid var(--lp-border) !important;
    margin: .25rem 0 .35rem 1.4rem !important;
    padding-left: .5rem !important;
}
body .pc-sidebar .pc-navbar .pc-submenu .pc-link {
    color: var(--lp-text-3) !important;
    font-size: .845rem !important;
    padding: .5rem .75rem !important;
}
body .pc-sidebar .pc-navbar .pc-submenu .pc-link:hover { color: var(--lp-cyan) !important; }

body .pc-sidebar .pc-arrow > svg,
body .pc-sidebar .pc-arrow > i { color: var(--lp-text-muted) !important; width: 16px; height: 16px; }

body .sidebar-overlay,
body .sidebar-overlay.show {
    background: rgba(5, 8, 14, 0.68) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* ==========================================================================
   5. CARDS / SUPERFICIES
   ========================================================================== */
.card,
.modern-card,
.dashboard-card,
.stat-card,
.stats-card,
.modern-stat-card,
.mobile-stat-card,
.deposit-card,
.deposits-card,
.withdrawals-card,
.history-card,
.report-card,
.progress-card,
.summary-card,
.support-card,
.ticket-card,
.settings-card,
.smtp-card,
.search-card,
.rate-card,
.edit-rate-card,
.custom-rate-card,
.gateway-card,
.manager-card,
.email-card,
.pix-card,
.modern-pix-card,
.modern-info-card,
.modern-user-info-card,
.identification-card,
.doc-info-card,
.doc-image-card,
.twofa-card,
.premiacao-card,
.commission-summary-card,
.system-activities-card,
.total-users-card,
.total-deposits-card,
.total-withdrawals-card,
.users-deposits-card,
.users-balance-card,
.profit-today-card,
.notreve-profit-today-card,
.pending-withdrawals-card,
.gateways-available-card,
.modern-table-card,
.dashboard-table-card,
.users-table-card,
.referred-table-card,
.commissions-table-card,
.verify-glass-card,
.login-card,
.register-card,
.reset-card,
.forgot-card,
.panel,
.search-box,
.info-section,
.form-section,
.history-section,
.doc-section,
.chart-container,
.qr-container,
.file-upload-container,
.filters-container {
    background: var(--lp-surface) !important;
    background-image: var(--lp-grad-surface) !important;
    border: 1px solid var(--lp-border) !important;
    border-radius: var(--lp-r) !important;
    box-shadow: var(--lp-shadow-sm), var(--lp-inset) !important;
    color: var(--lp-text) !important;
    /* Sem backdrop-filter aqui: a superficie e opaca, o blur nao teria efeito
       visivel e custa repaint em listas longas. Ele fica apenas onde o fundo
       e translucido (sidebar, header, modais, bottom nav, card de login). */
    transition: transform .24s var(--lp-ease), border-color .24s var(--lp-ease), box-shadow .24s var(--lp-ease) !important;
}

/* Elevacao no hover apenas para cards interativos */
.modern-stat-card:hover,
.stat-card:hover,
.mobile-stat-card:hover,
.deposit-card:hover,
.report-card:hover,
.history-card:hover,
.gateway-card:hover,
.rate-card:hover,
.custom-rate-card:hover,
.summary-card:hover,
.dashboard-card:hover {
    transform: translateY(-3px) !important;
    border-color: var(--lp-border-strong) !important;
    box-shadow: var(--lp-shadow), var(--lp-inset) !important;
}

/* Cabecalhos internos de card */
.card-header,
.modern-table-header,
.table-header,
.deposit-card-header,
.history-header,
.report-header,
.section-header,
.commissions-header,
.referred-header,
.withdraws-header,
.users-header,
.deposits-header,
.gateway-header,
.settings-header,
.smtp-header,
.support-header,
.ticket-header,
.twofa-header,
.profit-header,
.email-header,
.affiliates-header,
.gateway-stats-header,
.modern-form-header {
    background: transparent !important;
    border-bottom: 1px solid var(--lp-border-soft) !important;
    color: var(--lp-text) !important;
    border-radius: var(--lp-r) var(--lp-r) 0 0 !important;
}

.card-body   { background: transparent !important; color: var(--lp-text) !important; }
.card-footer {
    background: transparent !important;
    border-top: 1px solid var(--lp-border-soft) !important;
    color: var(--lp-text-2) !important;
}

/* Titulos / rotulos / valores */
.card-title, .page-title, .section-title, .table-title, .chart-title,
.stat-title, .modal-title, .login-title, .register-title, .reset-title,
.forgot-title, .report-title, .support-title, .ticket-title, .settings-title,
.smtp-title, .twofa-title, .profit-title, .commissions-title, .referred-title,
.affiliates-title, .dashboard-table-title, .edit-rate-title, .custom-rate-title,
.doc-section-title, .form-section-title, .modern-pix-title, .modern-info-title,
.error-title, .email-title, .verify-title, .product-title, .receipt-title {
    color: var(--lp-text) !important;
    font-weight: 650 !important;
    letter-spacing: -0.022em !important;
}

.stat-label, .info-label, .form-label, .modern-label, .summary-label,
.rate-label, .filter-label, .doc-label, .doc-info-label, .doc-image-label,
.credential-label, .bar-label, .custom-rate-label, .stats-label, .balance-label,
.table-subtitle, .login-subtitle, .label {
    color: var(--lp-text-3) !important;
    font-weight: 500 !important;
    letter-spacing: .002em !important;
}

.stat-value, .info-value, .summary-value, .doc-info-value, .doc-value,
.credential-value, .secret-value, .card-value, .bar-value, .stats-number,
.balance-value {
    color: var(--lp-text) !important;
    font-weight: 700 !important;
    letter-spacing: -0.028em !important;
    font-variant-numeric: tabular-nums !important;
}

/* Blocos de conteudo neutros */
.stat-content, .card-content, .info-content, .modern-table-content,
.alert-content, .status-content, .tab-content, .history-content,
.doc-info-content, .rates-content, .info-item, .detail-item, .summary-item,
.step-item, .tip-item, .faq-item, .setting-item, .rate-item, .faixa-item,
.reply-item, .transaction-item, .usuario-item, .receipt-item, .doc-info-item,
.benefit-item, .history-item, .custom-rate-item, .affiliate-result-item {
    color: var(--lp-text-2) !important;
}

.info-item, .detail-item, .summary-item, .step-item, .tip-item,
.setting-item, .rate-item, .history-item, .transaction-item, .reply-item,
.receipt-item, .doc-info-item, .faixa-item, .usuario-item, .custom-rate-item {
    background: var(--lp-glass) !important;
    border: 1px solid var(--lp-border-soft) !important;
    border-radius: 12px !important;
}

/* Icones em "tile" — forma comum a todos */
.stat-icon, .card-icon, .deposit-icon, .table-icon, .modal-icon,
.transaction-icon, .rates-icon, .doc-info-icon, .amount-icon, .step-icon,
.referred-icon, .history-icon, .gateway-icon, .faixa-icon, .commissions-icon,
.chart-stat-icon, .alert-icon, .empty-icon, .status-icon, .progress-trophy {
    border-radius: 14px !important;
}

/* Tile de marca (neutro, sem semantica propria) */
.stat-icon, .card-icon, .table-icon, .deposit-icon,
.rates-icon, .commissions-icon, .referred-icon, .gateway-icon, .chart-stat-icon {
    background: var(--lp-grad-brand) !important;
    color: var(--lp-color-white) !important;
    box-shadow: 0 6px 18px rgba(0, 87, 255, 0.22) !important;
}

.mobile-stat-card .stat-icon { background: var(--lp-grad-brand) !important; }

/* Transacoes: entrada e saida precisam continuar distinguiveis */
.transaction-icon {
    background: var(--lp-glass-strong) !important;
    color: var(--lp-text) !important;
    box-shadow: none !important;
}
.transaction-icon.deposit,
.transaction-icon.entrada,
.transaction-icon.in {
    background: var(--lp-success-dim) !important;
    border: 1px solid rgba(0, 214, 163, 0.28) !important;
    color: var(--lp-success) !important;
}
.transaction-icon.withdrawal,
.transaction-icon.saida,
.transaction-icon.out {
    background: rgba(0, 87, 255, 0.16) !important;
    border: 1px solid rgba(0, 87, 255, 0.32) !important;
    color: var(--lp-blue-400) !important;
}

/* ==========================================================================
   6. SALDO / DESTAQUES
   ========================================================================== */
.mobile-balance-card {
    background: var(--lp-gradient-balance) !important;
    border: 1px solid rgba(0, 209, 255, 0.28) !important;
    border-radius: var(--lp-r-lg) !important;
    box-shadow: 0 18px 44px rgba(0, 87, 255, 0.3), var(--lp-inset) !important;
}
.mobile-balance-card .balance-label { color: rgba(255,255,255,.82) !important; }
.mobile-balance-card .balance-amount { color: var(--lp-color-white) !important; letter-spacing: -0.035em !important; }
.mobile-balance-card .balance-amount.negative { color: var(--lp-color-danger-on-brand) !important; }

.balance-toggle {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: var(--lp-color-white) !important;
    border-radius: 12px !important;
}
.balance-toggle:hover { background: rgba(255, 255, 255, 0.2) !important; }

.blocked-balance-card {
    background: var(--lp-gradient-blocked) !important;
    border: 1px solid rgba(255, 77, 106, 0.32) !important;
    border-radius: var(--lp-r-lg) !important;
    box-shadow: 0 18px 44px rgba(255, 77, 106, 0.18), var(--lp-inset) !important;
}

.blocked-balance-alert {
    background: var(--lp-danger-dim) !important;
    border: 1px solid rgba(255, 77, 106, 0.28) !important;
    border-radius: var(--lp-r) !important;
    box-shadow: none !important;
}
.blocked-balance-alert .alert-content h3,
.blocked-balance-alert .alert-content strong { color: var(--lp-color-danger-fg) !important; }
.blocked-balance-alert .alert-content p { color: var(--lp-text-2) !important; }
.blocked-balance-alert .alert-content small { color: var(--lp-text-3) !important; }
.blocked-balance-alert .alert-icon {
    background: var(--lp-gradient-danger) !important;
    box-shadow: 0 6px 18px rgba(255, 77, 106, 0.28) !important;
}

/* Barra de progresso */
.progress, .progress-bar-container .progress-bar {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid var(--lp-border-soft) !important;
    border-radius: var(--lp-r-pill) !important;
    overflow: hidden !important;
}
.progress-fill, .progress .progress-bar, .progresso-bar {
    background: var(--lp-grad-brand) !important;
    border-radius: var(--lp-r-pill) !important;
    box-shadow: 0 0 14px rgba(0, 209, 255, 0.35) !important;
}
.progress-percentage { color: var(--lp-cyan) !important; }
.progress-trophy { background: var(--lp-gradient-warning) !important; }
.premiacao-btn {
    background: var(--lp-gradient-warning) !important;
    border-radius: var(--lp-r-pill) !important;
    color: var(--lp-color-warning-contrast) !important;
    font-weight: 650 !important;
    border: none !important;
}

/* ==========================================================================
   7. BOTOES
   ========================================================================== */
.btn,
.modern-btn,
.action-btn,
.btn-action,
.deposit-btn,
.filter-btn,
.search-btn,
.report-action-btn,
.receipt-btn,
.process-btn,
.view-btn,
.view-all-btn,
.print-btn,
.pix-btn,
.credential-btn,
.no-data-btn,
.close-btn,
.close-modal-btn,
.doc-copy-btn,
.back-button,
.btn-back,
.secondary-btn,
button.btn {
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: .875rem !important;
    letter-spacing: -0.006em !important;
    padding: .68rem 1.15rem !important;
    border: 1px solid var(--lp-border) !important;
    transition: transform .16s var(--lp-ease), background .2s var(--lp-ease),
                box-shadow .2s var(--lp-ease), border-color .2s var(--lp-ease) !important;
    box-shadow: none !important;
}

.btn:active,
.modern-btn:active,
.action-btn:active,
.deposit-btn:active { transform: translateY(1px) !important; }

/* Primario */
.btn-primary,
.modern-btn.primary,
.deposit-btn,
.process-btn,
.btn-save,
.btn.btn-primary,
button.btn-primary,
input[type="submit"],
button[type="submit"]:not(.btn-secondary):not(.btn-outline-secondary):not(.btn-close) {
    background: var(--lp-grad-brand) !important;
    background-color: var(--lp-blue) !important;
    border: 1px solid rgba(0, 209, 255, 0.35) !important;
    color: var(--lp-color-white) !important;
    box-shadow: 0 8px 22px rgba(0, 87, 255, 0.32), var(--lp-inset) !important;
}
.btn-primary:hover,
.deposit-btn:hover,
.btn-save:hover,
button.btn-primary:hover,
input[type="submit"]:hover,
button[type="submit"]:not(.btn-secondary):not(.btn-outline-secondary):not(.btn-close):hover {
    filter: brightness(1.08) !important;
    box-shadow: 0 12px 30px rgba(0, 87, 255, 0.42), var(--lp-inset) !important;
    color: var(--lp-color-white) !important;
}

/* Secundario / neutro */
.btn-secondary,
.btn-light,
.btn-outline-secondary,
.secondary-btn,
.btn-back,
.back-button,
.filter-btn,
.search-btn,
.view-btn,
.print-btn,
.no-data-btn,
.credential-btn,
.doc-copy-btn,
.receipt-btn {
    background: var(--lp-glass-strong) !important;
    border: 1px solid var(--lp-border) !important;
    color: var(--lp-text) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.btn-secondary:hover,
.btn-light:hover,
.btn-outline-secondary:hover,
.secondary-btn:hover,
.btn-back:hover,
.back-button:hover,
.filter-btn:hover,
.search-btn:hover,
.view-btn:hover,
.print-btn:hover,
.no-data-btn:hover,
.credential-btn:hover,
.doc-copy-btn:hover,
.receipt-btn:hover {
    background: var(--lp-glass-hover) !important;
    border-color: var(--lp-border-strong) !important;
    color: var(--lp-color-white) !important;
}

/* Estados semanticos */
.btn-success { background: var(--lp-gradient-success) !important; border-color: rgba(0,214,163,.35) !important; color: var(--lp-color-success-contrast) !important; }
.btn-danger  { background: var(--lp-gradient-danger) !important; border-color: rgba(255,77,106,.35) !important; color: var(--lp-color-white) !important; }
.btn-warning { background: var(--lp-gradient-warning) !important; border-color: rgba(255,176,32,.35) !important; color: var(--lp-color-warning-contrast) !important; }
.btn-info    { background: var(--lp-gradient-brand) !important; border-color: rgba(0,209,255,.35) !important; color: var(--lp-color-secondary-contrast) !important; }

.btn-outline-primary { background: transparent !important; border: 1px solid rgba(0,87,255,.5) !important; color: var(--lp-blue-400) !important; }
.btn-outline-primary:hover { background: rgba(0,87,255,.14) !important; color: var(--lp-color-white) !important; }
.btn-outline-danger { background: transparent !important; border: 1px solid rgba(255,77,106,.5) !important; color: var(--lp-color-danger-fg) !important; }
.btn-outline-danger:hover { background: var(--lp-danger-dim) !important; color: var(--lp-color-white) !important; }
.btn-outline-light { background: transparent !important; border: 1px solid var(--lp-border-strong) !important; color: var(--lp-text) !important; }
.btn-outline-light:hover { background: var(--lp-glass-strong) !important; color: var(--lp-color-white) !important; }

/* Botoes de acao compactos em tabelas */
.action-btn, .btn-action, .row-actions .btn, .action-buttons .btn {
    padding: .42rem .8rem !important;
    font-size: .8rem !important;
    border-radius: 10px !important;
}

.btn-sm { padding: .42rem .8rem !important; font-size: .8rem !important; border-radius: 10px !important; }
.btn-lg { padding: .9rem 1.5rem !important; font-size: .95rem !important; border-radius: 14px !important; }

/* Hamburger / toggles do header */
.hamburger-btn,
.settings-toggle,
.password-toggle,
.menu-icon {
    background: var(--lp-glass-strong) !important;
    border: 1px solid var(--lp-border) !important;
    color: var(--lp-text-2) !important;
    border-radius: 12px !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: all .2s var(--lp-ease) !important;
}
.hamburger-btn:hover,
.settings-toggle:hover,
.password-toggle:hover {
    background: var(--lp-glass-hover) !important;
    border-color: var(--lp-border-strong) !important;
    color: var(--lp-color-white) !important;
}

/* ==========================================================================
   8. FORMULARIOS
   ========================================================================== */
.form-control,
.form-select,
.form-input,
.modern-input,
.modern-select,
.search-input,
.filter-input,
.filter-select,
.amount-input,
.code-input,
.credential-input,
.affiliate-input,
.affiliate-search-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--lp-border) !important;
    border-radius: 12px !important;
    color: var(--lp-text) !important;
    padding: .78rem 1rem !important;
    font-size: .9rem !important;
    font-family: inherit !important;
    box-shadow: none !important;
    transition: border-color .18s var(--lp-ease), background .18s var(--lp-ease), box-shadow .18s var(--lp-ease) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.form-control:hover,
.form-input:hover,
.search-input:hover,
select:hover,
textarea:hover { border-color: var(--lp-border-strong) !important; }

.form-control:focus,
.form-select:focus,
.form-input:focus,
.modern-input:focus,
.modern-select:focus,
.search-input:focus,
.filter-input:focus,
.filter-select:focus,
.amount-input:focus,
.code-input:focus,
.credential-input:focus,
input:focus,
select:focus,
textarea:focus {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--lp-blue) !important;
    box-shadow: var(--lp-ring) !important;
    color: var(--lp-color-white) !important;
    outline: none !important;
}

::placeholder { color: var(--lp-text-muted) !important; opacity: 1 !important; }
input::placeholder, textarea::placeholder { color: var(--lp-text-muted) !important; }

select, .form-select, .filter-select, .modern-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A9B3C6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    padding-right: 2.6rem !important;
}
select option { background: var(--lp-surface-2) !important; color: var(--lp-text) !important; }

/* Autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--lp-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--lp-color-card) inset !important;
    caret-color: var(--lp-text) !important;
    border-radius: 12px !important;
}

.form-group, .form-row, .input-wrapper, .input-group, .search-input-group,
.filter-group, .value-group, .code-input-group, .credential-input-group,
.affiliate-link-group { color: var(--lp-text-2) !important; }

.input-icon, .search-icon { color: var(--lp-text-3) !important; }
.input-wrapper:focus-within .input-icon { color: var(--lp-cyan) !important; }

/* Inputs com icone a esquerda precisam manter o recuo — o padding base
   acima nao pode encobrir o icone. */
.input-wrapper { position: relative; }
.input-wrapper .form-input,
.input-wrapper .form-control,
.input-wrapper input,
.search-container .search-input,
.search-input-group .search-input {
    padding-left: 2.85rem !important;
}

/* Espaco a direita apenas quando existe um botao (olho de senha, limpar) */
.input-wrapper:has(.password-toggle) .form-input,
.input-wrapper:has(.password-toggle) input,
.search-container:has(.clear-search) .search-input {
    padding-right: 3rem !important;
}

/* O codigo 2FA e centralizado: nao deve herdar o recuo de icone */
.code-input, .code-input-group .code-input {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    text-align: center !important;
}
.input-underline { background: var(--lp-grad-brand) !important; }

/* Checkbox / radio */
.form-check-input {
    background-color: rgba(255,255,255,.06) !important;
    border: 1px solid var(--lp-border-strong) !important;
    border-radius: 6px !important;
}
.form-check-input:checked {
    background-color: var(--lp-blue) !important;
    border-color: var(--lp-blue) !important;
}
.form-check-input:focus { box-shadow: var(--lp-ring) !important; }
.form-switch .form-check-input { border-radius: var(--lp-r-pill) !important; }

/* Upload */
.file-input-label, .file-upload-placeholder, .file-upload-container, .file-input-wrapper {
    background: var(--lp-glass) !important;
    border: 1px dashed var(--lp-border-strong) !important;
    border-radius: var(--lp-r) !important;
    color: var(--lp-text-2) !important;
    transition: all .2s var(--lp-ease) !important;
}
.file-input-label:hover, .file-upload-container:hover {
    background: var(--lp-glass-strong) !important;
    border-color: var(--lp-blue) !important;
}

.form-text, .form-actions { color: var(--lp-text-3) !important; }
.required-field { color: var(--lp-danger) !important; }

/* ==========================================================================
   9. TABELAS
   ========================================================================== */
.table,
.modern-table,
.deposits-table,
.withdraws-table,
.support-table,
.dashboard-table,
.meds-table,
.email-table,
.transactions-table,
.history-table {
    background: transparent !important;
    color: var(--lp-text-2) !important;
    border-color: var(--lp-border-soft) !important;
    --bs-table-bg: transparent;
    --bs-table-color: var(--lp-text-2);
    --bs-table-border-color: rgba(255, 255, 255, 0.06);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
    --bs-table-striped-color: var(--lp-text-2);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.045);
    --bs-table-hover-color: var(--lp-text);
    --bs-table-accent-bg: transparent;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.table thead th,
.modern-table thead th,
.deposits-table thead th,
.withdraws-table thead th,
.support-table thead th,
.dashboard-table thead th,
.meds-table thead th,
.transactions-table thead th,
.history-table thead th,
.email-table thead th,
.header-cell {
    background: rgba(255, 255, 255, 0.028) !important;
    color: var(--lp-text-3) !important;
    font-size: .72rem !important;
    font-weight: 650 !important;
    text-transform: uppercase !important;
    letter-spacing: .085em !important;
    border-bottom: 1px solid var(--lp-border) !important;
    border-top: none !important;
    padding: .95rem 1.1rem !important;
    white-space: nowrap !important;
}

.table tbody td,
.modern-table tbody td,
.deposits-table tbody td,
.withdraws-table tbody td,
.support-table tbody td,
.dashboard-table tbody td,
.meds-table tbody td,
.transactions-table tbody td,
.history-table tbody td,
.email-table tbody td,
.table-cell {
    background: transparent !important;
    color: var(--lp-text-2) !important;
    border-bottom: 1px solid var(--lp-border-soft) !important;
    border-top: none !important;
    padding: .95rem 1.1rem !important;
    font-size: .875rem !important;
    vertical-align: middle !important;
}

.table tbody tr,
.modern-table tbody tr,
.deposits-table tbody tr,
.withdraws-table tbody tr,
.transactions-table tbody tr,
.table-row,
.modern-table-row,
.activity-row,
.user-deposits-row,
.user-balance-row {
    background: transparent !important;
    transition: background .16s var(--lp-ease) !important;
}

.table tbody tr:hover,
.modern-table tbody tr:hover,
.deposits-table tbody tr:hover,
.withdraws-table tbody tr:hover,
.support-table tbody tr:hover,
.dashboard-table tbody tr:hover,
.transactions-table tbody tr:hover,
.history-table tbody tr:hover,
.meds-table tbody tr:hover,
.table-row:hover,
.modern-table-row:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

.table tbody tr:last-child td { border-bottom: none !important; }

.table > :not(caption) > * > * { box-shadow: none !important; }
.table-responsive, .modern-table-content { background: transparent !important; border-radius: var(--lp-r) !important; }

.table-title-section, .table-title-content, .table-stats { color: var(--lp-text-2) !important; }

/* simple-datatables */
.dataTable-wrapper, .dataTable-container, .dataTable-top, .dataTable-bottom {
    background: transparent !important;
    color: var(--lp-text-2) !important;
    border-color: var(--lp-border-soft) !important;
}
.dataTable-input, .dataTable-selector {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid var(--lp-border) !important;
    color: var(--lp-text) !important;
    border-radius: 10px !important;
    padding: .45rem .7rem !important;
}
.dataTable-pagination a {
    background: var(--lp-glass) !important;
    border: 1px solid var(--lp-border) !important;
    color: var(--lp-text-2) !important;
    border-radius: 10px !important;
}
.dataTable-pagination .active a { background: var(--lp-blue) !important; color: var(--lp-color-white) !important; border-color: var(--lp-blue) !important; }

/* ==========================================================================
   10. BADGES / STATUS
   ========================================================================== */
.badge,
.status-badge,
.status-pill,
.security-badge,
.delivery-badge,
.default-rates-badge,
.custom-rates-badge,
.history-status,
.row-status,
.badge-status,
.transaction-status,
.status-tag,
.chip {
    border-radius: var(--lp-r-pill) !important;
    font-size: .72rem !important;
    font-weight: 650 !important;
    letter-spacing: .02em !important;
    padding: .34rem .78rem !important;
    border: 1px solid transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: .35rem !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}

/* Aprovado / pago / sucesso */
.badge.bg-success, .badge-success, .status-badge.success, .status-badge.approved,
.status-badge.aprovado, .status-badge.paid, .status-badge.pago, .status-badge.completed,
.status-badge.concluido, .status-badge.active, .status-badge.ativo,
.status-pill.success, .status-approved, .status-success, .history-status.success,
.transaction-status.success, .badge-status.success {
    background: var(--lp-success-dim) !important;
    color: var(--lp-success) !important;
    border-color: rgba(0, 214, 163, 0.28) !important;
}

/* Pendente / aguardando */
.badge.bg-warning, .badge-warning, .status-badge.pending, .status-badge.pendente,
.status-badge.warning, .status-badge.aguardando, .status-badge.processing,
.status-badge.processando, .status-pill.pending, .status-pending, .pending,
.history-status.pending, .transaction-status.pending, .badge-status.pending,
.warning, .status-warning {
    background: var(--lp-warning-dim) !important;
    color: var(--lp-warning) !important;
    border-color: rgba(255, 176, 32, 0.28) !important;
}

/* Recusado / erro / cancelado */
.badge.bg-danger, .badge-danger, .status-badge.danger, .status-badge.failed,
.status-badge.rejected, .status-badge.recusado, .status-badge.cancelled,
.status-badge.cancelado, .status-badge.error, .status-badge.inactive,
.status-badge.inativo, .status-pill.danger, .status-rejected, .status-danger,
.history-status.failed, .transaction-status.failed, .badge-status.danger {
    background: var(--lp-danger-dim) !important;
    color: var(--lp-color-danger-fg) !important;
    border-color: rgba(255, 77, 106, 0.28) !important;
}

/* Info / neutro */
.badge.bg-info, .badge-info, .status-badge.info, .status-pill.info {
    background: var(--lp-info-dim) !important;
    color: var(--lp-info) !important;
    border-color: rgba(0, 209, 255, 0.28) !important;
}
.badge.bg-primary, .badge-primary {
    background: rgba(0, 87, 255, 0.16) !important;
    color: var(--lp-blue-400) !important;
    border-color: rgba(0, 87, 255, 0.34) !important;
}
.badge.bg-secondary, .badge-secondary, .badge.bg-light, .badge.bg-dark {
    background: var(--lp-glass-strong) !important;
    color: var(--lp-text-2) !important;
    border-color: var(--lp-border) !important;
}

.security-badges, .row-badges { gap: .4rem !important; }
.security-badge {
    background: var(--lp-glass-strong) !important;
    color: var(--lp-text-2) !important;
    border-color: var(--lp-border) !important;
}

/* Avatares */
.user-avatar, .aff-avatar {
    background: var(--lp-grad-violet) !important;
    color: var(--lp-color-white) !important;
    border: 1px solid var(--lp-border-strong) !important;
    border-radius: var(--lp-r-pill) !important;
    font-weight: 650 !important;
}

/* ==========================================================================
   11. ALERTAS
   ========================================================================== */
.alert, .modern-alert, .modal-alert, .warning-alert {
    border-radius: 14px !important;
    border: 1px solid var(--lp-border) !important;
    background: var(--lp-glass-strong) !important;
    color: var(--lp-text-2) !important;
    padding: .95rem 1.15rem !important;
    font-size: .875rem !important;
    display: flex !important;
    align-items: center !important;
    gap: .65rem !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: none !important;
}

.alert-success, .modern-alert.alert-success, .modal-alert.alert-success {
    background: var(--lp-success-dim) !important;
    border-color: rgba(0, 214, 163, 0.3) !important;
    color: var(--lp-color-success-fg) !important;
}
.alert-danger, .alert-error, .modern-alert.alert-danger, .modal-alert.alert-danger {
    background: var(--lp-danger-dim) !important;
    border-color: rgba(255, 77, 106, 0.3) !important;
    color: var(--lp-color-danger-fg) !important;
}
.alert-warning, .warning-alert, .modern-alert.alert-warning {
    background: var(--lp-warning-dim) !important;
    border-color: rgba(255, 176, 32, 0.3) !important;
    color: var(--lp-color-warning-fg) !important;
}
.alert-info, .modern-alert.alert-info {
    background: var(--lp-info-dim) !important;
    border-color: rgba(0, 209, 255, 0.3) !important;
    color: var(--lp-color-info-fg) !important;
}
.alert i, .modern-alert i { font-size: 1.05rem !important; flex-shrink: 0 !important; }

/* Estados vazios */
.empty-state, .history-placeholder, .no-data-actions, .qr-placeholder {
    background: var(--lp-glass) !important;
    border: 1px dashed var(--lp-border-strong) !important;
    border-radius: var(--lp-r) !important;
    color: var(--lp-text-3) !important;
    text-align: center !important;
}
.empty-icon { background: var(--lp-glass-strong) !important; color: var(--lp-text-3) !important; box-shadow: none !important; }
.empty-text { color: var(--lp-text-3) !important; }

/* ==========================================================================
   12. MODAIS
   ========================================================================== */
.modal-content, .modern-modal .modal-content, .settings-modal-content,
.premiacao-modal-content, .premio-detalhe-content {
    background: rgba(16, 22, 34, 0.96) !important;
    background-image: var(--lp-grad-surface) !important;
    border: 1px solid var(--lp-border-strong) !important;
    border-radius: var(--lp-r-lg) !important;
    box-shadow: var(--lp-shadow-lg) !important;
    color: var(--lp-text) !important;
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    backdrop-filter: blur(30px) saturate(150%);
}

.modal-header, .settings-modal-header, .premiacao-modal-header, .premio-detalhe-header {
    border-bottom: 1px solid var(--lp-border-soft) !important;
    background: transparent !important;
    padding: 1.35rem 1.5rem !important;
}
.modal-body { color: var(--lp-text-2) !important; padding: 1.5rem !important; }
.modal-footer, .modal-actions {
    border-top: 1px solid var(--lp-border-soft) !important;
    background: transparent !important;
    padding: 1.1rem 1.5rem !important;
}
.modal-backdrop, .modal-backdrop.show {
    background: rgba(5, 8, 14, 0.72) !important;
    opacity: 1 !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.btn-close, .btn-close-white {
    filter: invert(1) grayscale(1) brightness(2.2) !important;
    opacity: .55 !important;
    transition: opacity .2s var(--lp-ease) !important;
}
.btn-close:hover { opacity: 1 !important; }

/* Lista dentro de modais (ex.: modal de configuracoes) */
.modal .list-group, .modal .list-group-item {
    background: transparent !important;
    color: var(--lp-text) !important;
    border-color: var(--lp-border-soft) !important;
}
.settings-modal-link {
    background: var(--lp-glass-strong) !important;
    border: 1px solid var(--lp-border) !important;
    border-radius: 12px !important;
    color: var(--lp-text) !important;
}
.settings-modal-link:hover {
    background: var(--lp-glass-hover) !important;
    border-color: var(--lp-border-strong) !important;
    box-shadow: var(--lp-shadow-sm) !important;
}
.settings-modal-link i { color: var(--lp-cyan) !important; }

/* SweetAlert2 */
.swal2-popup {
    background: rgba(16, 22, 34, 0.97) !important;
    border: 1px solid var(--lp-border-strong) !important;
    border-radius: var(--lp-r-lg) !important;
    color: var(--lp-text) !important;
    box-shadow: var(--lp-shadow-lg) !important;
}
.swal2-title, .swal2-html-container { color: var(--lp-text) !important; }
.swal2-container { background: rgba(5, 8, 14, 0.6) !important; }
.swal2-confirm.swal2-styled {
    background: var(--lp-grad-brand) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 22px rgba(0, 87, 255, 0.32) !important;
}
.swal2-cancel.swal2-styled {
    background: var(--lp-glass-strong) !important;
    border: 1px solid var(--lp-border) !important;
    border-radius: 12px !important;
}

/* ==========================================================================
   13. PAGINACAO
   ========================================================================== */
.pagination-container, .pagination { gap: .35rem !important; }

.page-link, .pagination-btn, .pagination-link, .page-item > a, .page-item > span {
    background: var(--lp-glass) !important;
    border: 1px solid var(--lp-border) !important;
    color: var(--lp-text-2) !important;
    border-radius: 10px !important;
    min-width: 38px !important;
    padding: .5rem .75rem !important;
    font-size: .84rem !important;
    font-weight: 600 !important;
    transition: all .18s var(--lp-ease) !important;
    margin: 0 !important;
}
.page-link:hover, .pagination-btn:hover, .pagination-link:hover {
    background: var(--lp-glass-hover) !important;
    border-color: var(--lp-border-strong) !important;
    color: var(--lp-color-white) !important;
}
.page-item.active .page-link, .pagination-btn.active, .pagination-link.active {
    background: var(--lp-blue) !important;
    border-color: var(--lp-blue) !important;
    color: var(--lp-color-white) !important;
    box-shadow: 0 6px 16px rgba(0, 87, 255, 0.3) !important;
}
.page-item.disabled .page-link, .pagination-btn:disabled {
    background: transparent !important;
    color: var(--lp-text-muted) !important;
    border-color: var(--lp-border-soft) !important;
    opacity: .55 !important;
}

/* ==========================================================================
   14. AUTENTICACAO (login / registro / recuperacao)
   ========================================================================== */
.modern-login-container, .modern-register-container, .auth-wrapper {
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem 1.25rem !important;
}

.login-card, .register-card, .reset-card, .forgot-card, .twofa-card, .verify-glass-card {
    background: rgba(16, 22, 34, 0.72) !important;
    background-image: var(--lp-grad-surface) !important;
    border: 1px solid var(--lp-border-strong) !important;
    border-radius: var(--lp-r-xl) !important;
    box-shadow: var(--lp-shadow-lg), var(--lp-inset) !important;
    -webkit-backdrop-filter: blur(34px) saturate(160%);
    backdrop-filter: blur(34px) saturate(160%);
    padding: 2.5rem !important;
    width: 100% !important;
    max-width: 460px !important;
}

.login-header, .auth-header { border-bottom: none !important; text-align: center !important; }
.login-header .logo, .logo-link .logo { max-height: 46px !important; width: auto !important; }
.login-title { font-size: 1.6rem !important; margin-top: 1.4rem !important; }
.login-subtitle { color: var(--lp-text-3) !important; font-size: .9rem !important; }

.login-footer, .register-footer, .reset-footer, .forgot-footer {
    border-top: 1px solid var(--lp-border-soft) !important;
    color: var(--lp-text-3) !important;
    text-align: center !important;
    margin-top: 1.5rem !important;
    padding-top: 1.25rem !important;
}
.forgot-password, .terms-link, .footer-link, .back-link { color: var(--lp-blue-400) !important; }
.forgot-password:hover, .terms-link:hover, .footer-link:hover, .back-link:hover { color: var(--lp-cyan) !important; }

.divider { position: relative !important; color: var(--lp-text-muted) !important; }

.code-input {
    text-align: center !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    letter-spacing: .28em !important;
    font-variant-numeric: tabular-nums !important;
}

.btn-loader, .btn-text { color: inherit !important; }

/* ==========================================================================
   15. NAVEGACAO MOBILE (bottom nav)
   ========================================================================== */
body .nav-pill-menu-single-row,
body:not(.dark-theme) .nav-pill-menu-single-row,
body.dark-theme .nav-pill-menu-single-row {
    background: rgba(13, 18, 28, 0.86) !important;
    border: 1px solid var(--lp-border) !important;
    border-radius: var(--lp-r-lg) !important;
    box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.45) !important;
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    backdrop-filter: blur(26px) saturate(160%);
}

body .nav-mobile-link,
body:not(.dark-theme) .nav-mobile-link,
body .nav-mobile-icon,
body:not(.dark-theme) .nav-mobile-icon,
body .nav-mobile-label,
body:not(.dark-theme) .nav-mobile-label {
    color: var(--lp-text-3) !important;
}

body .nav-mobile-link:hover,
body .nav-mobile-link:hover .nav-mobile-icon,
body .nav-mobile-link:hover .nav-mobile-label { color: var(--lp-text) !important; }

body .nav-mobile-link.active,
body .nav-mobile-link.active .nav-mobile-icon,
body .nav-mobile-link.active .nav-mobile-label {
    color: var(--lp-cyan) !important;
    background: transparent !important;
}

body .transfer-circle,
body:not(.dark-theme) .transfer-circle {
    background: var(--lp-grad-brand) !important;
    border: 3px solid var(--lp-color-bg) !important;
    box-shadow: 0 8px 24px rgba(0, 87, 255, 0.45) !important;
    color: var(--lp-color-white) !important;
}

body .payment-method-btn:not(.active) {
    background: var(--lp-glass-strong) !important;
    color: var(--lp-text-3) !important;
    border: 1px solid var(--lp-border) !important;
    border-radius: 12px !important;
}
body .payment-method-btn.active {
    background: var(--lp-grad-brand) !important;
    color: var(--lp-color-white) !important;
    border: 1px solid rgba(0, 209, 255, .35) !important;
    border-radius: 12px !important;
}
body .quick-value-btn {
    background: var(--lp-glass-strong) !important;
    color: var(--lp-text-2) !important;
    border: 1px solid var(--lp-border) !important;
    border-radius: 10px !important;
}
body .quick-value-btn:hover { background: rgba(0, 87, 255, .2) !important; color: var(--lp-color-white) !important; }

/* ==========================================================================
   16. DASHBOARD — header e grids
   ========================================================================== */
.dashboard-header, .modern-header, .page-header {
    background: rgba(16, 22, 34, 0.6) !important;
    background-image: var(--lp-grad-surface) !important;
    border: 1px solid var(--lp-border) !important;
    border-radius: var(--lp-r) !important;
    box-shadow: var(--lp-shadow-sm), var(--lp-inset) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
    padding: 1.25rem 1.5rem !important;
}
.dashboard-header h1, .header-content h1 {
    color: var(--lp-text) !important;
    font-size: 1.5rem !important;
    font-weight: 650 !important;
    letter-spacing: -0.03em !important;
}

.modern-stats-grid, .stats-grid, .deposit-cards-grid, .reports-grid,
.settings-grid, .rates-grid, .gateways-grid, .filters-grid,
.custom-rates-grid, .premiacoes-grid, .doc-images-grid, .checkout-grid {
    gap: 1.25rem !important;
}

.mobile-action-btn {
    background: var(--lp-glass-strong) !important;
    border: 1px solid var(--lp-border) !important;
    border-radius: 14px !important;
    color: var(--lp-text) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: all .2s var(--lp-ease) !important;
}
.mobile-action-btn:hover {
    background: var(--lp-glass-hover) !important;
    border-color: rgba(0, 87, 255, .4) !important;
    transform: translateY(-2px) !important;
}
.mobile-action-btn i { color: var(--lp-cyan) !important; }
.mobile-action-btn span { color: var(--lp-text) !important; }

.indicator { background: var(--lp-border-strong) !important; }
.indicator.active { background: var(--lp-cyan) !important; }

.stat-trend, .stat-trend.up { color: var(--lp-success) !important; }
.stat-trend.down, .stat-trend.negative { color: var(--lp-danger) !important; }

/* PIX / QR */
.pix-info, .pix-card, .modern-pix-card, .qr-container {
    background: var(--lp-glass) !important;
    border: 1px solid var(--lp-border) !important;
    border-radius: var(--lp-r) !important;
    color: var(--lp-text-2) !important;
}
.qr-container img, .qr-container canvas {
    background: var(--lp-color-white) !important;
    border-radius: 12px !important;
    padding: 12px !important;
}

/* ==========================================================================
   17. GRAFICOS
   ========================================================================== */
.apexcharts-canvas, .chart-container canvas { color: var(--lp-text-2) !important; }
.apexcharts-text, .apexcharts-text tspan,
.apexcharts-xaxis text, .apexcharts-yaxis text, .apexcharts-legend-text {
    fill: var(--lp-text-3) !important;
    color: var(--lp-text-3) !important;
    font-family: "Inter", sans-serif !important;
}
.apexcharts-gridline, .apexcharts-grid line { stroke: rgba(255, 255, 255, 0.06) !important; }
.apexcharts-tooltip, .apexcharts-tooltip.apexcharts-theme-light {
    background: rgba(16, 22, 34, 0.97) !important;
    border: 1px solid var(--lp-border-strong) !important;
    border-radius: 12px !important;
    box-shadow: var(--lp-shadow) !important;
    color: var(--lp-text) !important;
}
.apexcharts-tooltip-title {
    background: rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid var(--lp-border) !important;
    color: var(--lp-text) !important;
}
.chart-bar, .chart-bars .chart-bar { background: var(--lp-grad-brand) !important; border-radius: 6px 6px 0 0 !important; }
.chart-stats, .chart-summary, .chart-stat-item { color: var(--lp-text-2) !important; }

/* ==========================================================================
   18. DIVERSOS DO TEMPLATE
   ========================================================================== */
.pc-footer, footer.pc-footer {
    background: transparent !important;
    border-top: 1px solid var(--lp-border-soft) !important;
    color: var(--lp-text-muted) !important;
    margin-left: 0 !important;
}
.pc-footer p, .pc-footer a { color: var(--lp-text-muted) !important; font-size: .82rem !important; }

.pc-header, .pc-header .header-wrapper {
    background: rgba(11, 15, 25, 0.8) !important;
    border-bottom: 1px solid var(--lp-border) !important;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    box-shadow: none !important;
}

.dropdown-menu {
    background: rgba(16, 22, 34, 0.97) !important;
    border: 1px solid var(--lp-border-strong) !important;
    border-radius: 14px !important;
    box-shadow: var(--lp-shadow) !important;
    padding: .4rem !important;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}
.dropdown-item { color: var(--lp-text-2) !important; border-radius: 10px !important; padding: .55rem .8rem !important; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--lp-glass-strong) !important; color: var(--lp-color-white) !important; }
.dropdown-divider { border-color: var(--lp-border-soft) !important; }

.nav-tabs, .report-tabs, .doc-nav {
    border-bottom: 1px solid var(--lp-border) !important;
    gap: .25rem !important;
}
.nav-tabs .nav-link, .doc-nav-link {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    color: var(--lp-text-3) !important;
    font-weight: 600 !important;
    padding: .7rem 1rem !important;
}
.nav-tabs .nav-link:hover, .doc-nav-link:hover { color: var(--lp-text) !important; }
.nav-tabs .nav-link.active, .doc-nav-link.active {
    background: transparent !important;
    color: var(--lp-cyan) !important;
    border-bottom-color: var(--lp-cyan) !important;
}

/* Abas em "pill" — mesmo componente usado na dashboard */
.report-tabs {
    display: flex !important;
    gap: .25rem !important;
    background: rgba(255, 255, 255, .045) !important;
    border: 1px solid var(--lp-border-soft) !important;
    border-radius: var(--lp-r-pill) !important;
    padding: 3px !important;
}
.report-tabs .tab-btn {
    background: transparent !important;
    border: none !important;
    border-radius: var(--lp-r-pill) !important;
    color: var(--lp-text-3) !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    padding: .42rem .95rem !important;
    white-space: nowrap !important;
}
.report-tabs .tab-btn:hover:not(.active) {
    color: var(--lp-text) !important;
    background: rgba(255, 255, 255, .05) !important;
}
.report-tabs .tab-btn.active {
    background: var(--lp-gradient-tab) !important;
    color: var(--lp-color-white) !important;
    box-shadow: 0 4px 12px rgba(0, 87, 255, .3) !important;
}

.list-group-item {
    background: transparent !important;
    border-color: var(--lp-border-soft) !important;
    color: var(--lp-text-2) !important;
}

.tooltip-inner {
    background: var(--lp-elevated) !important;
    border-radius: 8px !important;
    color: var(--lp-text) !important;
    font-size: .78rem !important;
}

code, pre, kbd, .doc-content-area code {
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid var(--lp-border-soft) !important;
    border-radius: 8px !important;
    color: var(--lp-color-code) !important;
    font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace !important;
    font-size: .85em !important;
}
pre { padding: 1rem 1.15rem !important; overflow-x: auto !important; }
pre code { background: transparent !important; border: none !important; padding: 0 !important; }

/* Loader inicial */
body .loader,
body[data-pc-theme="light"] .loader,
body[data-pc-theme="dark"] .loader {
    background: var(--lp-bg) !important;
}
body .loader-content p,
body[data-pc-theme="light"] .loader-content p { color: var(--lp-text-2) !important; }
body .spinner {
    border-color: rgba(255, 255, 255, 0.1) !important;
    border-top-color: var(--lp-cyan) !important;
}

/* Imagens em fundo claro nao devem "brilhar" */
.qr-container img { box-shadow: var(--lp-shadow-sm) !important; }

/* ==========================================================================
   19. RESPONSIVIDADE
   ========================================================================== */
@media (max-width: 1200px) {
    .modern-dashboard-container { padding: 1.5rem !important; }
}

@media (max-width: 992px) {
    .modern-dashboard-container { padding: 1.25rem !important; }
    .dashboard-header, .modern-header, .page-header { padding: 1.1rem 1.15rem !important; }
    .dashboard-header h1, .header-content h1 { font-size: 1.28rem !important; }
    .login-card, .register-card, .reset-card, .forgot-card { padding: 2rem !important; }
}

@media (max-width: 768px) {
    /* background-attachment: fixed causa repaint pesado no iOS/Safari.
       Em telas pequenas o gradiente rola junto com a pagina. */
    body, body[data-pc-preset], body[data-pc-theme="light"], body[data-pc-theme="dark"] {
        background-attachment: scroll !important;
    }

    /* Blur em inputs nao agrega e encarece o scroll no mobile */
    .form-control, .form-input, .search-input, input, select, textarea {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    body .pc-sidebar { width: 280px !important; max-width: 84vw !important; }

    main, .pc-container, .pc-content { padding: 14px !important; }
    .modern-dashboard-container { padding: .85rem !important; }

    .card, .modern-card, .dashboard-card, .stat-card, .modern-stat-card,
    .mobile-stat-card, .deposit-card, .report-card, .history-card,
    .modern-table-card, .progress-card { border-radius: 14px !important; }

    .dashboard-header, .modern-header, .page-header {
        padding: .9rem 1rem !important;
        border-radius: 14px !important;
    }
    .dashboard-header h1, .header-content h1 { font-size: 1.12rem !important; }

    .login-card, .register-card, .reset-card, .forgot-card, .twofa-card {
        padding: 1.75rem 1.35rem !important;
        border-radius: var(--lp-r-lg) !important;
    }

    .modern-stats-grid, .stats-grid, .deposit-cards-grid, .reports-grid,
    .settings-grid, .rates-grid, .gateways-grid, .filters-grid,
    .custom-rates-grid, .checkout-grid { gap: .85rem !important; }

    /* Tabelas com rolagem horizontal — nunca quebram o layout */
    .table-responsive, .modern-table-content, .modern-table-container,
    .deposits-table-container, .withdraws-table-container,
    .transactions-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .table thead th, .modern-table thead th { padding: .7rem .8rem !important; font-size: .68rem !important; }
    .table tbody td, .modern-table tbody td { padding: .7rem .8rem !important; font-size: .82rem !important; }

    .btn, .modern-btn, .action-btn { padding: .62rem 1rem !important; }

    /* Espaco para a barra inferior fixa */
    .pc-footer { margin-bottom: 92px !important; }
    main { padding-bottom: 100px !important; }
}

@media (max-width: 576px) {
    .modern-dashboard-container { padding: .7rem !important; }
    .dashboard-header h1, .header-content h1 { font-size: 1.02rem !important; }
    .balance-amount { font-size: 2.15rem !important; }
    .login-card, .register-card { padding: 1.5rem 1.15rem !important; }
    .stat-value, .stats-number { font-size: 1.25rem !important; }
    .modal-content { border-radius: var(--lp-r) !important; }
    .modal-header, .modal-body, .modal-footer { padding: 1.1rem !important; }
}

/* Conteudo largo rola dentro do proprio container (ver .table-responsive acima).
   Nao usamos overflow-x:hidden global para nao quebrar 'position: sticky'
   usado na documentacao da API e no checkout publico. */
img, video { max-width: 100%; height: auto; }

/* ==========================================================================
   20. ACESSIBILIDADE / PREFERENCIAS
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ==========================================================================
   21. COMPATIBILIDADE
   Regras de pagina que possuem especificidade/!important maiores que a base.
   Reescritas aqui apenas em aparencia — nenhuma estrutura e alterada.
   ========================================================================== */

/* Login/Registro animavam o <body> com um gradiente claro.
   O fundo ja e sobrescrito pela cascata; aqui apenas cessamos a animacao
   para o gradiente da marca permanecer estavel. */
body { animation: none !important; }

/* Selects: as opcoes sao desenhadas pelo SO — precisam de cor explicita */
select option,
.form-select option,
.filter-select option,
.modern-select option,
.modal select option {
    background-color: var(--lp-surface-2) !important;
    color: var(--lp-text) !important;
}
select option:checked,
.form-select option:checked,
.filter-select option:checked {
    background-color: var(--lp-blue) !important;
    color: var(--lp-color-white) !important;
}

/* Campos dentro de modais (Admin/Managers usa .modal input[type=...]) */
.modal input[type="text"],
.modal input[type="number"],
.modal input[type="email"],
.modal input[type="password"],
.modal input[type="date"],
.modal select,
.modal textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--lp-border) !important;
    border-radius: 12px !important;
    color: var(--lp-text) !important;
}
.modal input[type="text"]:focus,
.modal input[type="number"]:focus,
.modal input[type="email"]:focus,
.modal input[type="password"]:focus,
.modal select:focus,
.modal textarea:focus {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: var(--lp-blue) !important;
    box-shadow: var(--lp-ring) !important;
    color: var(--lp-color-white) !important;
}

/* Superficies escuras legadas (#23272f, #1f2326, #2d3238...) harmonizadas
   para que o sistema tenha uma unica familia de tons. */
[style*="background: #1f2326"], [style*="background:#1f2326"],
[style*="background: #23272f"], [style*="background:#23272f"],
[style*="background: #2d3238"], [style*="background:#2d3238"],
[style*="background: #1a1d23"], [style*="background:#1a1d23"] {
    background-color: var(--lp-surface-2) !important;
    background-image: none !important;
    border-color: var(--lp-border) !important;
}

/* --------------------------------------------------------------------------
   LOGO
   O arquivo de marca tem o simbolo azul (#0361C1) e o texto em preto, feito
   para fundo claro — em dark o texto desapareceria.
   invert(1) hue-rotate(180deg) resolve sem tocar no asset nem no markup:
     preto   #000000 -> #FFFFFF (texto branco, como na identidade)
     azul    #0361C1 -> #5AB8FF (simbolo permanece azul, dentro da paleta)
   -------------------------------------------------------------------------- */
.sidebar-logo,
.sidebar-logo-dark,
.pc-sidebar .m-header img,
.loader-content img,
.mobile-logo-img,
.login-header .logo,
.logo-link img,
img.logo,
img[alt="Logo"],
img[alt="Logo do site"],
img[alt^="Logo "]:not([alt="Logo Light"]):not([alt="Logo Dark"]),
img[alt$="Logo"] {
    filter: invert(1) hue-rotate(180deg) !important;
}

/* Na tela de configuracoes o admin precisa ver o arquivo real.
   Mantemos o asset original sobre um "chip" claro para ficar legivel. */
img[alt="Logo Light"],
img[alt="Logo Dark"] {
    filter: none !important;
    background: var(--lp-color-text) !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    border: 1px solid var(--lp-border) !important;
}

/* Bordas legadas em atributos inline */
[style*="solid #2d3238"],
[style*="solid #3a4047"],
[style*="solid #31343b"],
[style*="solid #444"] {
    border-color: var(--lp-border) !important;
}

/* ==========================================================================
   22. COBERTURA FINAL
   Superficies claras remanescentes, mapeadas uma a uma.
   ========================================================================== */

/* --- Superficies neutras -------------------------------------------------- */
.modern-body,
.modern-footer,
.comprovante-content,
.comprovante-section,
.customer-preview,
.doc-row,
.doc-sidebar,
.faixa-info,
.info-row,
.premio-status,
.product-summary,
.product-summary-description,
.receipt-card,
.receipt-header,
.receipt-footer,
.receipt-modal,
.search-filter-section,
.meds-table-container,
.stat-item,
.transaction-card,
.user-card,
.modern-qr-modal,
.modal-content-modern {
    background: var(--lp-surface) !important;
    background-image: none !important;
    border-color: var(--lp-border) !important;
    color: var(--lp-text-2) !important;
}

.modal-content-modern, .modern-qr-modal, .receipt-modal {
    border: 1px solid var(--lp-border-strong) !important;
    border-radius: var(--lp-r-lg) !important;
    box-shadow: var(--lp-shadow-lg) !important;
    -webkit-backdrop-filter: blur(28px);
    backdrop-filter: blur(28px);
}

.doc-row, .info-row, .stat-item, .transaction-card, .user-card,
.faixa-info, .premio-status, .customer-preview, .product-summary {
    border: 1px solid var(--lp-border-soft) !important;
    border-radius: 12px !important;
}

.doc-row:hover,
.setting-link:hover,
.settings-modal-close:hover {
    background: var(--lp-glass-hover) !important;
    color: var(--lp-text) !important;
}

/* Trechos monoespacados / chaves */
.secret-key, .ip-address, .currency {
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid var(--lp-border) !important;
    border-radius: 10px !important;
    color: var(--lp-color-code) !important;
    font-variant-numeric: tabular-nums !important;
}

.status-select {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--lp-border) !important;
    border-radius: 10px !important;
    color: var(--lp-text) !important;
}

/* --- Chips e mensagens com fundo colorido claro --------------------------- */
.status-answered, .value-badge {
    background: var(--lp-success-dim) !important;
    color: var(--lp-success) !important;
    border: 1px solid rgba(0, 214, 163, 0.28) !important;
}
.status-closed, .status-denied {
    background: var(--lp-danger-dim) !important;
    color: var(--lp-color-danger-fg) !important;
    border: 1px solid rgba(255, 77, 106, 0.28) !important;
}
.payment-method {
    background: var(--lp-success-dim) !important;
    border: 1px solid rgba(0, 214, 163, 0.26) !important;
    color: var(--lp-text-2) !important;
    border-radius: 12px !important;
}
.delivery-notice {
    background: var(--lp-warning-dim) !important;
    border: 1px solid rgba(255, 176, 32, 0.26) !important;
    color: var(--lp-color-warning-fg) !important;
    border-radius: 12px !important;
}
.support-message {
    background: var(--lp-success-dim) !important;
    border: 1px solid rgba(0, 214, 163, 0.22) !important;
    color: var(--lp-text-2) !important;
    border-radius: 14px !important;
}
.user-message {
    background: rgba(0, 87, 255, 0.14) !important;
    border: 1px solid rgba(0, 87, 255, 0.28) !important;
    color: var(--lp-text-2) !important;
    border-radius: 14px !important;
}
.support-message *, .user-message *, .payment-method * { color: inherit !important; }

/* --- Icones circulares que eram brancos ----------------------------------- */
.modern-pix-icon {
    background: rgba(0, 87, 255, 0.16) !important;
    border: 1px solid rgba(0, 209, 255, 0.3) !important;
    color: var(--lp-cyan) !important;
}
.modern-info-icon {
    background: var(--lp-glass-strong) !important;
    border: 1px solid var(--lp-border) !important;
    color: var(--lp-text) !important;
}

/* --- Elementos que DEVEM continuar claros --------------------------------- */

/* O QR precisa de fundo branco para ser lido pelo app do banco. */
.modern-qr-frame {
    background: #FFFFFF !important;
    border: 1px solid var(--lp-border-strong) !important;
    border-radius: 18px !important;
    box-shadow: var(--lp-shadow) !important;
}

/* O "check" de sucesso e desenhado com mascaras solidas que precisam ter
   exatamente a cor do fundo atras dele — senao viram manchas brancas. */
.modal-content:has(.success-animation),
.modal-content:has(.success-checkmark) {
    background: var(--lp-surface) !important;
    background-image: none !important;
}
.success-animation .icon-circle,
.success-animation .icon-fix,
.success-checkmark .icon-circle,
.success-checkmark .icon-fix,
.check-icon::before,
.check-icon::after {
    background: var(--lp-surface) !important;
}

/* --- Textos que eram escuros sobre fundo claro ---------------------------- */
.affiliate-info h4,
.customer-name,
.detail-section h5,
.faixa-detalhes h5,
.history-amount,
.history-email,
.history-id,
.history-section-item h4,
.ips-info h4,
.message-content,
.premio-info h4,
.product-name,
.profile-name,
.receipt-body,
.receipt-value,
.ticket-closed h4,
.transaction-amount,
.transaction-header,
.text-center h4 {
    color: var(--lp-text) !important;
}

.message-author { color: var(--lp-text-3) !important; }
.error-message  { color: var(--lp-color-danger-fg) !important; }
.delivery-text h6, .delivery-text { color: var(--lp-color-warning-fg) !important; }

/* Botoes de acento: fundo vivo + texto escuro ja tem bom contraste.
   Apenas alinhamos o ciano ao tom exato da marca. */
.cta-button,
.header .login-button,
.btn-refund {
    background: var(--lp-cyan) !important;
    background-color: var(--lp-cyan) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 22px rgba(0, 209, 255, 0.28) !important;
}

@media print {
    body { background: #fff !important; color: #000 !important; }
    .pc-sidebar, .pc-bottom-nav, .sidebar-overlay, .hamburger-btn { display: none !important; }
    .card, .modern-card, .modern-table-card {
        background: #fff !important;
        border: 1px solid #ddd !important;
        box-shadow: none !important;
        color: #000 !important;
    }
}