/* ==========================================================================
   APEX TALE — PAINEL PLAYER — CAMADA PREMIUM MMORPG (Design System)
   ==========================================================================
   Carregada por último (depois de KLVN.css, apex-player-dashboard.css,
   apex-panel-theme.css e apex-panel-theme-dark.css). Não reescreve a
   estrutura/markup nem remove nada dessas camadas — apenas refina cores,
   transparências, iluminação e acabamento dourado por cima do que já
   existe, trazendo de volta a identidade "MMORPG premium" (azul + dourado)
   para o tema escuro do Painel Player, hoje 100% azul/cinza (igual ao
   Master/Admin).

   Não altera: logo, imagem de fundo (apex-auth-bg-premium.png já usada),
   rotas, dados ou estrutura HTML/PHP.

   Variáveis do Design System pedidas: --apex-bg, --apex-panel,
   --apex-panel-soft, --apex-border, --apex-gold, --apex-gold-soft,
   --apex-blue, --apex-blue-glow, --apex-text, --apex-text-muted.
   ========================================================================== */

html[data-theme="dark"] body.apex-player-panel {
    --apex-bg: #0a0d14;
    --apex-panel: rgba(20, 26, 36, .84);
    --apex-panel-soft: rgba(24, 31, 43, .7);
    --apex-border: rgba(140, 172, 209, .22);
    --apex-gold: #d9b56b;
    --apex-gold-soft: rgba(217, 181, 107, .4);
    --apex-blue: #5b9bd5;
    --apex-blue-glow: rgba(91, 155, 213, .38);
    --apex-text: #eef2f8;
    --apex-text-muted: #93a0b3;
}

/* --------------------------------------------------------------------------
   1) Topbar e Sidebar — vidro translúcido com blur moderado sobre o
      background já existente, friso dourado discreto na borda.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] body.apex-player-panel .painel-sidebar,
html[data-theme="dark"] body.apex-player-panel .painel-sidebar.nk-aside,
html[data-theme="dark"] body.apex-player-panel .painel-sidebar .nk-sidebar-menu,
html[data-theme="dark"] body.apex-player-panel .painel-sidebar .simplebar-content-wrapper,
html[data-theme="dark"] body.apex-player-panel .painel-sidebar .simplebar-content,
html[data-theme="dark"] body.apex-player-panel .painel-sidebar .nk-menu-heading {
    background: var(--apex-panel) !important;
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
}
html[data-theme="dark"] body.apex-player-panel .painel-sidebar,
html[data-theme="dark"] body.apex-player-panel .painel-sidebar.nk-aside {
    border-right: 1px solid var(--apex-gold-soft) !important;
}
html[data-theme="dark"] body.apex-player-panel .nk-header.painel-header.apx-topbar {
    background: var(--apex-panel) !important;
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border-bottom: 1px solid var(--apex-gold-soft) !important;
}
html[data-theme="dark"] body.apex-player-panel .painel-sidebar .nk-menu-item > .nk-menu-link {
    background: transparent !important;
    border-color: transparent !important;
}
html[data-theme="dark"] body.apex-player-panel .painel-sidebar .nk-menu-item > .nk-menu-link:hover,
html[data-theme="dark"] body.apex-player-panel .painel-sidebar .nk-menu-item > .nk-menu-link:focus-visible {
    background: rgba(91, 155, 213, .14) !important;
    border-color: var(--apex-blue-glow) !important;
}

/* Item ativo do menu: glow azul suave + friso dourado (acabamento premium) */
html[data-theme="dark"] body.apex-player-panel .painel-sidebar .nk-menu-item.active > .nk-menu-link,
html[data-theme="dark"] body.apex-player-panel .painel-sidebar .nk-menu-item.nk-menu-item-active > .nk-menu-link,
html[data-theme="dark"] body.apex-player-panel .painel-sidebar .painel-aside-nav .nk-menu-item.active > .nk-menu-link,
html[data-theme="dark"] body.apex-player-panel .painel-sidebar .painel-aside-nav .nk-menu-item.nk-menu-item-active > .nk-menu-link {
    background: linear-gradient(90deg, rgba(91, 155, 213, .24), rgba(91, 155, 213, .04)) !important;
    border-color: var(--apex-blue-glow) !important;
    box-shadow: inset 3px 0 0 var(--apex-gold), 0 0 18px rgba(91, 155, 213, .18) !important;
}
html[data-theme="dark"] body.apex-player-panel .painel-sidebar .nk-menu-item.active > .nk-menu-link .icon,
html[data-theme="dark"] body.apex-player-panel .painel-sidebar .nk-menu-item.nk-menu-item-active > .nk-menu-link .icon {
    color: var(--apex-gold) !important;
}

/* Saldo (Balance) no menu — pill dourada */
html[data-theme="dark"] body.apex-player-panel .apx-balance-menu-value {
    background: rgba(217, 181, 107, .12) !important;
    border-color: var(--apex-gold-soft) !important;
    color: var(--apex-gold) !important;
}
html[data-theme="dark"] body.apex-player-panel .apx-balance-menu-value .icon { color: var(--apex-gold) !important; }

/* --------------------------------------------------------------------------
   2) Cards do painel — vidro translúcido com blur moderado + friso
      dourado fino no topo (acabamento, sem dominar a interface).
   -------------------------------------------------------------------------- */
html[data-theme="dark"] body.apex-player-panel .painel-main .nk-content-body .card,
html[data-theme="dark"] body.apex-player-panel .painel-main .nk-content-body .card.card-bordered,
html[data-theme="dark"] body.apex-player-panel .painel-main .nk-content-body .card-inner {
    background: var(--apex-panel) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
html[data-theme="dark"] body.apex-player-panel .apx-panel-card {
    background: var(--apex-panel) !important;
    border: 1px solid var(--apex-border) !important;
    position: relative;
    overflow: hidden;
}
html[data-theme="dark"] body.apex-player-panel .apx-panel-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--apex-gold-soft) 22%, var(--apex-gold-soft) 78%, transparent);
    pointer-events: none;
}

/* Hero de boas-vindas: friso dourado no topo (já existe, reforçado) */
html[data-theme="dark"] body.apex-player-panel .apx-player-hero {
    border-color: var(--apex-border) !important;
}
html[data-theme="dark"] body.apex-player-panel .apx-player-hero:before {
    border-top-color: var(--apex-gold-soft) !important;
}
html[data-theme="dark"] body.apex-player-panel .apx-player-kicker,
html[data-theme="dark"] body.apex-player-panel .apx-section-eyebrow {
    color: var(--apex-gold) !important;
}

/* Stat cards — leve vidro + realce dourado no ícone, glow azul no hover */
html[data-theme="dark"] body.apex-player-panel .apx-stat-card {
    background: var(--apex-panel-soft) !important;
    border: 1px solid var(--apex-border) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
html[data-theme="dark"] body.apex-player-panel .apx-stat-card:hover {
    border-color: var(--apex-gold-soft) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .32), 0 0 0 1px var(--apex-blue-glow) !important;
}
html[data-theme="dark"] body.apex-player-panel .apx-stat-icon {
    background: rgba(217, 181, 107, .1) !important;
    border-color: var(--apex-gold-soft) !important;
    color: var(--apex-gold) !important;
}

/* Personagem principal — moldura dourada no portrait, mantendo o mesmo
   arquivo/proporção de imagem já usado (classes/*.png) */
html[data-theme="dark"] body.apex-player-panel .apx-main-char {
    border-color: var(--apex-gold-soft) !important;
    background: linear-gradient(120deg, rgba(217, 181, 107, .1), rgba(91, 155, 213, .05)) !important;
}
html[data-theme="dark"] body.apex-player-panel .apx-main-char__portrait {
    border: 1px solid var(--apex-gold) !important;
    box-shadow: 0 0 0 3px rgba(217, 181, 107, .14), inset 0 0 14px rgba(217, 181, 107, .14) !important;
}
html[data-theme="dark"] body.apex-player-panel .apx-char-card.is-main {
    border-color: var(--apex-gold-soft) !important;
}
html[data-theme="dark"] body.apex-player-panel .apx-count-pill {
    border-color: var(--apex-gold-soft) !important;
    color: var(--apex-gold) !important;
}

/* --------------------------------------------------------------------------
   3) Botões — pill azul com glow (principal) e contorno azul discreto
      (secundário), com pequena elevação no hover.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] body.apex-player-panel .apex-player-dashboard .btn-primary {
    border-radius: 999px !important;
    box-shadow: 0 8px 22px var(--apex-blue-glow) !important;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
html[data-theme="dark"] body.apex-player-panel .apex-player-dashboard .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px var(--apex-blue-glow) !important;
    filter: brightness(1.06);
}
html[data-theme="dark"] body.apex-player-panel .apex-player-dashboard .btn-outline-light {
    border-radius: 999px !important;
    color: var(--apex-text) !important;
    border-color: var(--apex-blue-glow) !important;
    background: rgba(91, 155, 213, .08) !important;
    transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
html[data-theme="dark"] body.apex-player-panel .apex-player-dashboard .btn-outline-light:hover {
    transform: translateY(-1px);
    background: rgba(91, 155, 213, .18) !important;
    border-color: var(--apex-blue) !important;
    color: #fff !important;
}
html[data-theme="dark"] body.apex-player-panel .apex-player-dashboard .btn-outline-primary:hover,
html[data-theme="dark"] body.apex-player-panel .painel-main .btn-outline-primary:hover {
    transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   4) Tickets / notificações / tabela — realces dourados pontuais
   -------------------------------------------------------------------------- */
html[data-theme="dark"] body.apex-player-panel .apx-ticket-row,
html[data-theme="dark"] body.apex-player-panel .apx-char-card,
html[data-theme="dark"] body.apex-player-panel .apx-account-list,
html[data-theme="dark"] body.apex-player-panel .apx-quick-actions a {
    background: rgba(255, 255, 255, .025) !important;
    border-color: var(--apex-border) !important;
}
html[data-theme="dark"] body.apex-player-panel .apx-ticket-row:hover,
html[data-theme="dark"] body.apex-player-panel .apx-quick-actions a:hover {
    border-color: var(--apex-gold-soft) !important;
    background: rgba(217, 181, 107, .06) !important;
}
html[data-theme="dark"] body.apex-player-panel .apx-notification-row.is-unread .apx-notification-dot {
    background: var(--apex-gold) !important;
    box-shadow: 0 0 0 4px rgba(217, 181, 107, .16) !important;
}

/* --------------------------------------------------------------------------
   5) Responsivo — mantém o mesmo vidro/blur também no menu mobile (off-canvas)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    html[data-theme="dark"] body.apex-player-panel .painel-sidebar {
        backdrop-filter: blur(20px) saturate(130%);
        -webkit-backdrop-filter: blur(20px) saturate(130%);
    }
}

/* ==========================================================================
   6) AUDITORIA — correções pontuais encontradas em páginas internas
      (Eventos, Notificações, Suporte, Loja ApexCoin/Doações) que ainda
      tinham CSS herdado de apex-panel-theme.css sem par escuro, deixando
      texto/ícone quase invisível ou um card claro sobre fundo escuro.
      ========================================================================== */

/* Eventos — badge de estado da agenda: borda clara sem par escuro,
   e variações "Em andamento"/"Encerrado" sem estilo nenhum (claro ou escuro). */
html[data-theme="dark"] body.apex-player-panel .apx-events-page .apx-event-state {
    border-color: var(--apex-border) !important;
}
html[data-theme="dark"] body.apex-player-panel .apx-events-page .apx-event-card:hover {
    border-color: var(--apex-gold-soft) !important;
}
html body.apex-player-panel .apx-events-page .apx-event-state.is-active {
    color: #2f855a !important;
    background: rgba(47, 133, 90, .12) !important;
}
html body.apex-player-panel .apx-events-page .apx-event-state.is-ended {
    color: #8a94a6 !important;
    background: rgba(138, 148, 166, .12) !important;
}
html[data-theme="dark"] body.apex-player-panel .apx-events-page .apx-event-state.is-active {
    color: #8fe0ac !important;
    background: rgba(111, 191, 142, .16) !important;
}
html[data-theme="dark"] body.apex-player-panel .apx-events-page .apx-event-state.is-ended {
    color: var(--apex-text-muted) !important;
    background: rgba(120, 140, 165, .16) !important;
}

/* Notificações / Suporte — os cards de "caixa de entrada" (.nk-ibx-item),
   o pontinho de não-lido e as bolhas de resposta (.nk-reply-item) usam
   cores claras fixas em apex-panel-theme.css sem nenhum par escuro. */
html[data-theme="dark"] body.apex-player-panel .painel-main .nk-ibx-item {
    background: var(--apex-panel-surface) !important;
    border-color: var(--apex-panel-border) !important;
    color: var(--apex-text) !important;
}
html[data-theme="dark"] body.apex-player-panel .painel-main .nk-ibx-item:hover {
    background: rgba(91, 155, 213, .1) !important;
}
html[data-theme="dark"] body.apex-player-panel .painel-main .nk-ibx-item.is-unread::before {
    background: var(--apex-gold) !important;
    box-shadow: 0 0 8px rgba(0, 0, 0, .4) !important;
}
html[data-theme="dark"] body.apex-player-panel .painel-main .nk-reply-item {
    background: var(--apex-panel-surface) !important;
    border-color: var(--apex-panel-border) !important;
}
html[data-theme="dark"] body.apex-player-panel .painel-main .nk-reply-item + .nk-reply-item {
    border-top-color: var(--apex-panel-border) !important;
}

/* Suporte — modal "Regras": o <textarea> de leitura não tem classe
   nenhuma (nem form-control), então herda o branco padrão do navegador. */
html[data-theme="dark"] body.apex-player-panel #regras textarea {
    background: var(--apex-panel-surface) !important;
    color: var(--apex-text) !important;
    border: 1px solid var(--apex-panel-border) !important;
}
/* Reforça o rodapé do modal de suporte contra a classe utilitária bg-light
   presente na marcação, para não depender só de especificidade. */
html[data-theme="dark"] body.apex-player-panel .modal-footer.bg-light {
    background: rgba(15, 18, 22, .70) !important;
}

/* Loja ApexCoin / Doações — títulos e o selo de cotação ("100 ApexCoin /
   R$ 1") ficavam com texto quase preto (#172033) sobre fundo escuro,
   porque só o background tinha par no tema escuro, nunca o color. */
html[data-theme="dark"] body.apex-player-panel .apx-donate-page .apx-donate-panel h4,
html[data-theme="dark"] body.apex-player-panel .apx-donate-page .apx-donate-history h4 {
    color: var(--apex-text) !important;
}
html[data-theme="dark"] body.apex-player-panel .apx-donate-page .apx-donate-rate {
    color: var(--apex-gold) !important;
}
/* Logos de pagamento (cartão/PayPal) são escuras e ficam ilegíveis sobre
   fundo escuro — recebem uma placa clara discreta só no tema escuro. */
html[data-theme="dark"] body.apex-player-panel .apx-donate-page .payment-method-group img {
    background: #fff;
    border-radius: 6px;
    padding: 4px 8px;
}

/* ==========================================================================
   7) AUDITORIA FINAL (2ª passagem) — gaps confirmados por releitura direta
      do markup real: divisores <hr>, botão fechar de modal, botões
      secundários fora do dashboard, .btn-success sem par nenhum, e os
      cards da Loja ApexCoin que ainda usavam background:#ffffff literal.
      ========================================================================== */

/* Divisores <hr> — regra genérica de apex-panel-theme.css não tem par
   escuro em nenhum lugar; linha clara cruzando cards escuros. */
html[data-theme="dark"] body.apex-player-panel hr {
    border-color: var(--apex-border) !important;
}
html[data-theme="dark"] body.apex-player-panel .painel-main .preview-hr {
    border-top-color: var(--apex-border) !important;
}

/* Botão fechar (x) de modais — cor azul "legado" sem par dourado. */
html[data-theme="dark"] body.apex-player-panel .modal-content .close {
    color: var(--apex-gold) !important;
}

/* Botões secundários fora do dashboard (Cancelar, Permissões, Desativar,
   Reativar etc.) — o tema escuro reescrevia o fundo desses botões mas
   nunca o texto, que ficava quase preto (#172033) sobre fundo escuro. */
html[data-theme="dark"] body.apex-player-panel .painel-main .nk-content-body:not(.apex-player-dashboard) .btn:not(.btn-primary):not(.btn-success) {
    color: var(--apex-text) !important;
}

/* .btn-success (ex.: "Ativar Conta!") não tinha NENHUM par no tema escuro
   — ficava um botão branco sólido com texto escuro fixo. */
html[data-theme="dark"] body.apex-player-panel .painel-main .nk-content-body:not(.apex-player-dashboard) .btn-success {
    color: var(--apex-text) !important;
    background: rgba(20, 24, 29, .70) !important;
    border-color: var(--apex-border) !important;
}
html[data-theme="dark"] body.apex-player-panel .painel-main .nk-content-body:not(.apex-player-dashboard) .btn-success:hover {
    background: rgba(91, 155, 213, .14) !important;
    border-color: var(--apex-blue-glow) !important;
}

/* Loja ApexCoin — hero e cards de conta/informação usavam
   background:#ffffff literal (não levam a classe .card, então não
   herdavam o override genérico de card escuro). */
html[data-theme="dark"] body.apex-player-panel .apx-donate-page .apx-donate-hero,
html[data-theme="dark"] body.apex-player-panel .apx-donate-page .apx-donate-account-card,
html[data-theme="dark"] body.apex-player-panel .apx-donate-page .apx-donate-info-card {
    background: var(--apex-panel) !important;
}
html[data-theme="dark"] body.apex-player-panel .apx-donate-page .apx-donate-hero h3 {
    color: var(--apex-text) !important;
}

/* ==========================================================================
   8) BUSCA GLOBAL FINAL — cores claras hardcoded (#285daf/#172033/#ffffff)
      em apex-panel-theme.css sem NENHUM par no tema escuro em lugar
      nenhum (nem dark.css, nem premium.css). Levantamento feito com grep
      de todas as ~50 ocorrências de #285daf no arquivo claro, cruzando
      cada seletor contra apex-panel-theme-dark.css: a maioria já tinha
      par (sidebar, topbar, badges, tabs, paginação, tabelas, tickets,
      stat cards etc.). Os itens abaixo são os únicos confirmados sem
      par — corrigidos aqui, de forma centralizada, sem tocar em regras
      já cobertas em outro lugar.
   -------------------------------------------------------------------------- */

/* .form-label — usado em TODAS as páginas com formulário (Configurações,
   Segurança, Suporte, Doações etc.). Não tinha nenhum par no tema escuro
   em nenhuma das duas camadas; ficava azul-claro sobre fundo escuro. */
html[data-theme="dark"] body.apex-player-panel .painel-main .form-label {
    color: var(--apex-text-muted) !important;
}

/* .nk-menu-heading .overline-title — rótulo de seção do menu lateral
   ("PRINCIPAL", "CONTA" etc.), visível em todas as páginas. O fundo do
   heading já tinha par (seção 1 acima), mas o texto do rótulo nunca
   teve — permanecia azul-claro. */
html[data-theme="dark"] body.apex-player-panel .painel-sidebar .nk-menu-heading .overline-title {
    color: var(--apex-gold) !important;
}

/* Loja ApexCoin / Doações — rótulos (eyebrow, "Seu saldo atual",
   "Conversão" etc.) e texto de corpo (parágrafos do hero/painel,
   legenda do card de saldo) usavam #285daf hardcoded, sem variável e
   sem nenhum par no tema escuro — só o h3/h4 e o fundo dos cards
   tinham sido corrigidos até agora. */
html[data-theme="dark"] body.apex-player-panel .apx-donate-page .apx-donate-eyebrow,
html[data-theme="dark"] body.apex-player-panel .apx-donate-page .apx-donate-info-card > span,
html[data-theme="dark"] body.apex-player-panel .apx-donate-page .apx-donate-account-card > span,
html[data-theme="dark"] body.apex-player-panel .apx-donate-page .apx-donate-history__head > div > span {
    color: var(--apex-gold) !important;
}
html[data-theme="dark"] body.apex-player-panel .apx-donate-page .apx-donate-hero p,
html[data-theme="dark"] body.apex-player-panel .apx-donate-page .apx-donate-panel p,
html[data-theme="dark"] body.apex-player-panel .apx-donate-page .apx-donate-account-card small {
    color: var(--apex-text-muted) !important;
}
html[data-theme="dark"] body.apex-player-panel .apx-donate-page .apx-donate-live-summary .is-accent strong,
html[data-theme="dark"] body.apex-player-panel .apx-donate-page .apx-donate-history__link {
    color: var(--apex-gold) !important;
}

/* --------------------------------------------------------------------------
   9) Background global (arte dos 4 heróis) — telas de login, registro e
      recuperar senha (.nk-split-page). NÃO afeta a área logada do Painel
      (.apex-player-panel, tratada nas seções acima) — este bloco usa
      exatamente o mesmo seletor/!important da regra original em
      apex-player-dashboard.css ("A página inteira usa o background
      existente", apex-auth-bg-premium.jpg); como este arquivo é carregado
      por último (ver cabeçalho), esta regra prevalece com a mesma
      especificidade, apenas trocando a imagem de fundo pela identidade
      visual global do site (mesma arte usada em Home/Notícias/Download/
      Rankings/Wiki/Histórico). Estrutura, cores do cartão de login e
      demais estilos do formulário continuam intactos.
   -------------------------------------------------------------------------- */
body.dark-mode.bg-white:has(.nk-split-page) {
    background-color: #0c0b0a !important;
    background-image:
        linear-gradient(180deg, rgba(10, 8, 6, .30) 0%, rgba(9, 7, 5, .38) 55%, rgba(7, 6, 4, .50) 100%),
        url("../../site/templates/default/images/bg/bg-site-hero.jpg?v=2") !important;
    background-repeat: no-repeat !important;
    background-position: center 55% !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

/* Smartphones e tablets em retrato: "cover" cortaria os heróis das pontas
   (a imagem é bem mais larga que alta). Usamos "contain" para manter os 4
   sempre visíveis por completo; o espaço restante é preenchido pela
   background-color + gradiente já definidos acima — sem faixas brancas. */
@media (max-aspect-ratio: 4/5) {
    body.dark-mode.bg-white:has(.nk-split-page) {
        background-size: contain !important;
        background-position: center top !important;
    }
}