/* ============================================================================
   GxGaming CMS - camada moderna
   ----------------------------------------------------------------------------
   Traz para os temas antigos o acabamento dos temas novos (aurora, obsidian,
   ember, gxgaming) SEM reescrever nenhum deles.

   Tres regras que este arquivo segue de proposito:

   1. Nao mexe em layout. Nada aqui altera width, height, position, float,
      display, grid ou border-collapse. So estados e acabamento.

   2. Nao encosta em background-image nem em background-color. Varios temas
      (sandero, webzen_new, primemu, skystone) desenham botao e caixa com
      sprite: pintar por cima apagaria a identidade do tema. O brilho vem de
      box-shadow inset, que convive com o sprite em vez de substitui-lo.

   3. Nao chuta cor. Tudo deriva de currentColor: em tema escuro o texto e
      claro e os veus saem claros; no raven_light o texto e escuro e os veus
      saem escuros. Nenhuma paleta precisa ser configurada por tema.

   Carregado por ultimo no <head> de cada tema. Para desligar num tema, basta
   remover a linha do <link> no view.header.php dele.
   ========================================================================== */

:root {
    --gx-raio: 10px;
    --gx-raio-p: 6px;
    --gx-transicao: 180ms cubic-bezier(.4, 0, .2, 1);
    --gx-sombra: 0 1px 2px rgba(0, 0, 0, .18), 0 8px 24px -12px rgba(0, 0, 0, .45);
    --gx-sombra-alta: 0 2px 4px rgba(0, 0, 0, .22), 0 16px 40px -16px rgba(0, 0, 0, .55);
    --gx-brilho: inset 0 1px 0 rgba(255, 255, 255, .10);
    /* veus derivados do texto: claros em tema escuro, escuros em tema claro */
    --gx-veu-1: color-mix(in srgb, currentColor 7%, transparent);
    --gx-veu-2: color-mix(in srgb, currentColor 14%, transparent);
    --gx-veu-3: color-mix(in srgb, currentColor 24%, transparent);
}

/* ---------------------------------------------------------------- movimento
   O que faz um site parecer "atual" antes de qualquer outra coisa: nada muda
   de estado num corte seco. */

a,
button,
.btn,
.button-style,
input,
select,
textarea,
.card,
.gx-page-box,
.box-style1,
.blockHomePlugin,
.vs-sidebox,
.thumbnail {
    transition: border-color var(--gx-transicao),
                color var(--gx-transicao),
                box-shadow var(--gx-transicao),
                transform var(--gx-transicao),
                filter var(--gx-transicao),
                opacity var(--gx-transicao);
}

@media (prefers-reduced-motion: reduce) {
    a, button, .btn, .button-style, input, select, textarea,
    .card, .gx-page-box, .box-style1, .blockHomePlugin, .vs-sidebox, .thumbnail {
        transition: none !important;
        transform: none !important;
    }
}

/* ---------------------------------------------------------------- botoes
   So elementos com classe de botao. <button> pelado fica de fora: em varios
   temas ele carrega o sprite e qualquer raio cortaria a borda desenhada. */

.btn,
.button-style,
input[type="submit"],
input[type="button"] {
    border-radius: var(--gx-raio-p);
}

.btn:hover,
.button-style:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    transform: translateY(-1px);
    filter: saturate(1.06) brightness(1.07);
}

.btn:active,
.button-style:active,
button:active,
input[type="submit"]:active,
input[type="button"]:active {
    transform: translateY(0);
    filter: saturate(1) brightness(.97);
}

.btn:disabled,
.btn.disabled,
button:disabled,
input:disabled {
    transform: none !important;
    filter: none !important;
    opacity: .55;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------- campos */

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
select,
textarea,
.form-control {
    border-radius: var(--gx-raio-p);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
select:focus,
textarea:focus,
.form-control:focus {
    outline: none;
    border-color: color-mix(in srgb, currentColor 45%, transparent);
    box-shadow: 0 0 0 3px var(--gx-veu-2);
}

/* Foco por teclado sempre visivel. Acessibilidade, e nao aparece no mouse. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.button-style:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid color-mix(in srgb, currentColor 65%, transparent);
    outline-offset: 2px;
}

::placeholder {
    opacity: .6;
}

/* ---------------------------------------------------------------- caixas
   Profundidade sem repintar: so sombra e raio. */

.gx-page-box,
.card,
.blockHomePlugin,
.vs-sidebox {
    border-radius: var(--gx-raio);
    box-shadow: var(--gx-sombra), var(--gx-brilho);
}

.gx-page-box:hover,
.card:hover {
    box-shadow: var(--gx-sombra-alta), var(--gx-brilho);
}

/* ---------------------------------------------------------------- tabelas
   border-collapse fica como o tema definiu: mexer nisso duplica borda. */

.ranking-table tbody tr,
.table tbody tr,
table.dataTable tbody tr {
    transition: filter var(--gx-transicao);
}

/* filter em vez de background: clareia o que o tema ja desenhou na linha,
   seja cor solida ou sprite, sem substituir nada. */
.ranking-table tbody tr:hover,
.table tbody tr:hover,
table.dataTable tbody tr:hover {
    filter: brightness(1.35) saturate(1.1);
}

/* Tabela larga rola no lugar de estourar a pagina no celular. */
@media (max-width: 767px) {
    .table-responsive,
    .gx-page-content,
    .entry {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------------------------------------------------------------- avisos */

.alert,
.e_note,
.s_note,
.i_note,
.w_note {
    border-radius: var(--gx-raio-p);
    box-shadow: var(--gx-sombra);
}

/* ---------------------------------------------------------------- links */

a {
    text-underline-offset: 2px;
}

/* ---------------------------------------------------------------- entrada
   O conteudo principal entra com um deslize curto. animation-fill-mode:
   backwards de proposito: se a animacao nao rodar por qualquer motivo, o
   elemento fica no estado normal dele - nunca invisivel. */

@media (prefers-reduced-motion: no-preference) {
    @keyframes gxEntra {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: none; }
    }

    .gx-content,
    #content,
    .account-panel-content {
        animation: gxEntra 320ms cubic-bezier(.4, 0, .2, 1) backwards;
    }

    html {
        scroll-behavior: smooth;
    }
}

/* ---------------------------------------------------------------- barra de rolagem */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--gx-veu-3) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--gx-veu-3);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, currentColor 38%, transparent);
    background-clip: content-box;
}

/* ---------------------------------------------------------------- selecao */

::selection {
    background: color-mix(in srgb, currentColor 25%, transparent);
}

/* ----------------------------------------------------------------
   Navegador sem color-mix (Safari < 16.2, Chrome < 111): as variaveis
   ficariam invalidas e as regras que dependem delas seriam ignoradas.
   Valores neutros fixos mantem a camada funcionando, so sem se adaptar.
   ---------------------------------------------------------------- */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
    :root {
        --gx-veu-1: rgba(128, 128, 128, .10);
        --gx-veu-2: rgba(128, 128, 128, .18);
        --gx-veu-3: rgba(128, 128, 128, .30);
    }

    input:focus,
    select:focus,
    textarea:focus,
    .form-control:focus {
        border-color: rgba(128, 128, 128, .55);
    }
}