/*
 * wes-components.css — AS RECEITAS DE CADA ELEMENTO DO REWARDS
 *
 * Regra de ouro: nenhuma cor solta aqui, só var(--wes-...) vinda do wes-tokens.css.
 * Nenhuma classe "wes-" daqui é usada em nenhuma página ainda — elas só passam a
 * aparecer conforme cada página for migrada, uma etapa de cada vez (ver o quadro de
 * acompanhamento em IMPLEMENTACAO-TEMA-REWARDS.md). Por isso este arquivo, sozinho,
 * não muda a aparência de nada no site.
 *
 * Conforme o Wesley for aprovando a migração de mais páginas, mais receitas entram
 * aqui — sempre uma classe nova por elemento realmente migrado, nunca inventada.
 */

/* CARD — o retângulo padrão que segura conteúdo no sistema todo. */
.wes-card {
    background: var(--wes-surface-raised);
    border: 1px solid var(--wes-border);
    border-radius: 0.75rem;
}

/* CARD GRANDE — variação do .wes-card pra telas isoladas de tela cheia (ex: login),
   onde o card é o único elemento na tela e pode ter cantos mais arredondados pra se
   destacar. Precisa vir DEPOIS de .wes-card no arquivo pra sobrepor o raio padrão. */
.wes-card-lg {
    border-radius: 1.5rem;
}

/* PÁGINA — fundo da página inteira, por trás de qualquer card. */
.wes-page {
    background: var(--wes-surface);
}

/* PAINEL — superfície elevada de borda reta (barra lateral, cabeçalho fixo), sem cantos
   arredondados como o .wes-card. A direção da borda (topo/base/lado) continua vindo do
   Tailwind na própria página, porque cada painel usa um lado diferente. */
.wes-panel {
    background: var(--wes-surface-raised);
    border-color: var(--wes-border);
}

/* TÍTULO — h1/h2/h3 do sistema. Tamanho e peso da fonte continuam vindo do Tailwind. */
.wes-title {
    color: var(--wes-text);
}

/* DESCRIÇÃO — texto secundário, abaixo de um título ou rótulo. */
.wes-desc {
    color: var(--wes-text-muted);
}

/* DIVISOR — linha fina que separa blocos dentro de uma página ou card. */
.wes-divider {
    border-top: 1px solid var(--wes-border);
}

/* ALERTA — aviso de sistema. Base neutra + variação por tipo (hoje só "danger",
   as outras variações entram na etapa em que alguma página precisar delas). */
.wes-alert {
    border-radius: 0.75rem;
    border-width: 1px;
    border-style: solid;
}
.wes-alert-danger {
    background: var(--wes-danger-bg);
    border-color: var(--wes-danger-border);
    color: var(--wes-danger-text);
}
.wes-alert-success {
    background: var(--wes-success-bg);
    border-color: var(--wes-success-border);
    color: var(--wes-success-text);
}
.wes-alert-warning {
    background: var(--wes-warning-bg);
    border-color: var(--wes-warning-border);
    color: var(--wes-warning-text);
}

/* ETIQUETA / BADGE — selo pequeno (cooldown, categoria, nível). Base neutra + variação por tipo.
   Não define raio nem espaçamento: cada uso tem um tamanho de selo diferente (rounded-md, rounded,
   rounded-full...), então isso continua vindo do Tailwind, junto da classe. */
.wes-badge {
    background: var(--wes-surface-sunken);
    border: 1px solid var(--wes-border);
    color: var(--wes-text-muted);
}
.wes-badge-info {
    background: var(--wes-info-bg);
    border-color: var(--wes-info-border);
    color: var(--wes-info-text);
}

/* TEXTO DE STATUS (sucesso/perigo) — cor sozinha, sem fundo nem borda, pra rótulos curtos tipo
   "Online"/"Offline". Usa os mesmos tokens de --wes-success-text/--wes-danger-text que já
   existiam pros badges/alertas; aqui só a cor do texto, nada mais. */
.wes-text-success {
    color: var(--wes-success-text);
}
.wes-text-danger {
    color: var(--wes-danger-text);
}

/* BORDA DE STATUS (sucesso) — só a borda, sem fundo, pra destacar uma caixa já existente (ex:
   caixa de copiar código) no instante do feedback, sem brigar com o fundo que ela já tinha. */
.wes-border-success {
    border-color: var(--wes-success-border);
}

/* SUBTÍTULO — texto com mais contraste que .wes-desc (a descrição mais apagada), mas menos que
   .wes-title. Usado em títulos de estado vazio ("Nenhum item encontrado") e em textos de corpo
   que precisam se destacar um pouco mais que uma descrição comum. */
.wes-subtitle {
    color: var(--wes-text-secondary);
}

/* RÓTULO DE CAMPO — texto acima de um input/select/textarea. Mesma cor de --wes-desc
   (--wes-text-muted), mas como classe própria porque semanticamente é outra coisa (rótulo de
   formulário, não descrição de corpo). Peso da fonte, caixa alta e tamanho continuam vindo do
   Tailwind, junto da classe. */
.wes-label {
    color: var(--wes-text-muted);
}

/* CAMPO DE TEXTO — fundo e borda padrão de input/select. Cor do texto e cor da borda em foco
   ficam de fora de propósito: usam tons que não bateram exatamente com --wes-text (ex.: cinza
   claro em vez de branco puro no escuro) ou já são uma cor fixa da marca (não a variável de
   destaque), então continuam vindo do Tailwind na própria página. */
.wes-input {
    background: var(--wes-surface-raised);
    border: 1px solid var(--wes-border);
}

/* BOTÃO — base comum a todo botão do sistema. */
.wes-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border-radius: 0.5rem;
    transition: all 0.15s ease-in-out;
}

/* BOTÃO PRIMÁRIO — a ação principal da tela (Salvar, Resgatar, Confirmar).
   A cor muda sozinha pra laranja (admin) ou roxo (espectador) via data-wes-area no <body>. */
.wes-btn-primary {
    background: var(--wes-accent);
    color: #ffffff;
}
.wes-btn-primary:hover {
    background: var(--wes-accent-hover);
}

/* BOTÃO FANTASMA — ação secundária (Voltar, Resetar). Fundo = --wes-surface, a mesma cor da
   página por trás — só a borda destaca o botão, pra não competir visualmente com o botão
   primário. No hover, escurece/clareia um degrau pra --wes-surface-sunken. */
.wes-btn-ghost {
    background: var(--wes-surface);
    color: var(--wes-text);
    border: 1px solid var(--wes-border);
}
.wes-btn-ghost:hover {
    background: var(--wes-surface-sunken);
}

/* BARRA DE ROLAGEM INTERNA — usada dentro de um card, não na página inteira.
   6px e trilho transparente pra não desenhar um sulco cinza por cima do card. */
.wes-scroll::-webkit-scrollbar {
    width: 6px;
}
.wes-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.wes-scroll::-webkit-scrollbar-thumb {
    background: var(--wes-scroll-thumb);
    border-radius: 10px;
}
.wes-scroll {
    scrollbar-color: var(--wes-scroll-thumb) transparent;
}

/* CAMPO SENSÍVEL (chaves/keys) — desfoque padronizado, revela ao passar o mouse.
   ATENÇÃO: isto é SÓ visual. Campos type="password" continuam type="password";
   nada aqui altera o que é enviado, salvo ou mascarado no servidor. */
.wes-secret {
    filter: blur(6px);
    user-select: none;
    transition: filter 0.3s;
}
.wes-secret:hover,
.wes-secret:focus-within {
    filter: blur(0);
    user-select: auto;
}

/* TOGGLE (liga/desliga) — chave tipo "interruptor", ex.: Live ON/OFF do admin.
   Estrutura de sempre: um <input type="checkbox" class="toggle-checkbox"> absoluto por cima
   de um <label class="toggle-label"> que faz de trilho. Nomes de classe mantidos sem prefixo
   "wes-" de propósito: essa CSS já era compartilhada por mais de uma página do admin através
   do <style> do header.php; centralizar aqui sem renomear evita precisar editar cada página
   que já usa esse par de classes. A cor de "ligado" é fixa (verde), igual em claro e escuro. */
.toggle-checkbox:checked { right: 0; border-color: var(--wes-toggle-on); }
.toggle-checkbox:checked + .toggle-label { background-color: var(--wes-toggle-on); }
.toggle-checkbox { right: 20px; z-index: 1; border-color: var(--wes-toggle-off); transition: all 0.3s; }
.toggle-label { background-color: var(--wes-toggle-off); transition: all 0.3s; }

/* BARRA DE ROLAGEM DA PÁGINA — 8px, trilho visível. Hoje só existe no admin (ver decisão 1.1
   em IMPLEMENTACAO-TEMA-REWARDS.md); escopada por data-wes-area="admin" pra não vazar pro
   espectador/login, que ainda usam a barra padrão do navegador. Diferente do .wes-scroll
   (6px, trilho transparente, usado DENTRO de um card específico), esta é a barra de qualquer
   área que role dentro do painel admin. */
[data-wes-area="admin"] {
    scrollbar-color: var(--wes-scroll-thumb) var(--wes-scroll-track);
}
[data-wes-area="admin"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
[data-wes-area="admin"] ::-webkit-scrollbar-track {
    background: var(--wes-scroll-track);
}
[data-wes-area="admin"] ::-webkit-scrollbar-thumb {
    background: var(--wes-scroll-thumb);
    border-radius: 4px;
}
[data-wes-area="admin"] ::-webkit-scrollbar-thumb:hover {
    background: var(--wes-scroll-thumb-hover);
}

/* FUNDO ESCURECIDO DE MODAL — a camada escura por trás da janela do modal.
   O painel do modal em si (a caixa branca/escura com o conteúdo) reaproveita .wes-card,
   já que usa exatamente a mesma receita de fundo/borda de qualquer card do sistema. */
.wes-modal-overlay {
    background: var(--wes-overlay);
}

/* TABELA — cabeçalho e corpo de uma tabela grande (Auditoria, Usuários). Aplicar na tag <table>.
   Cobre só a cor da borda do cabeçalho (--wes-border) e a cor do texto do cabeçalho
   (--wes-text-muted). O fundo do cabeçalho mantém a opacidade fracionada original do Tailwind
   (ex.: bg-gray-50/80 dark:bg-dark-900/80) — sem token equivalente, já que todo token é 100%
   opaco, mesmo critério de sempre. A direção da borda (border-b), o "divide-y" entre linhas e o
   hover de cada linha continuam vindo do Tailwind na própria página. */
.wes-table thead {
    border-color: var(--wes-border);
    color: var(--wes-text-muted);
}

/* BOTÃO SÓ DE ÍCONE (cor) — ação isolada de tabela/lista (excluir, marcar como resgatado, zerar
   contador...). Só cuida de fundo/borda/texto; tamanho (padding), raio (rounded-md/rounded-lg,
   varia com o tamanho do ícone de cada botão) e a largura da borda (classe "border" do Tailwind)
   continuam vindo do Tailwind na própria página — mesmo critério do .wes-badge.
   Duas famílias:
   - "-danger" / "-success": o ícone já nasce colorido (repouso), escurece um pouco no hover via
     filter — não precisa de token de "hover" novo pra isso.
   - "-hover-danger" / "-hover-warning": o ícone é neutro em repouso — usar JUNTO das classes
     neutras que a própria página já tem (ex.: bg-white dark:bg-dark-800 text-gray-500 border
     border-gray-200 dark:border-dark-600); só ganha a cor semântica ao passar o mouse. */
.wes-btn-icon-danger {
    background: var(--wes-danger-bg);
    border-color: var(--wes-danger-border);
    color: var(--wes-danger-text);
}
.wes-btn-icon-success {
    background: var(--wes-success-bg);
    border-color: var(--wes-success-border);
    color: var(--wes-success-text);
}
.wes-btn-icon-danger:hover,
.wes-btn-icon-success:hover {
    filter: brightness(0.92);
}
.wes-btn-icon-hover-danger:hover {
    background: var(--wes-danger-bg);
    border-color: var(--wes-danger-border);
    color: var(--wes-danger-text);
}
.wes-btn-icon-hover-warning:hover {
    background: var(--wes-warning-bg);
    border-color: var(--wes-warning-border);
    color: var(--wes-warning-text);
}