/*
 * Theme compatibility layer.
 * Loaded last to override hardcoded Tailwind/zinc classes and local CSS colors.
 */

body[data-theme] {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--theme-screen-accent) 8%, hsl(var(--background, 240 10% 4%)) 74%, #000000 8%) 0%,
            hsl(var(--background, 240 10% 4%)) 42%,
            color-mix(in srgb, hsl(var(--background, 240 10% 4%)) 94%, #000000) 100%);
    background-attachment: fixed;
    color: var(--theme-text, hsl(var(--foreground, 0 0% 98%)));
}

body[data-theme] [class*="bg-zinc-950"],
body[data-theme] [class*="bg-zinc-900"],
body[data-theme] [class*="bg-neutral-950"],
body[data-theme] [class*="bg-neutral-900"],
body[data-theme] [class*="bg-slate-950"],
body[data-theme] [class*="bg-slate-900"],
body[data-theme] [class~="bg-black"] {
    background: var(--theme-surface-2, var(--admin-surface-2)) !important;
    background-image: none !important;
}

body[data-theme] [class*="bg-zinc-800"],
body[data-theme] [class*="bg-zinc-700"],
body[data-theme] [class*="bg-neutral-800"],
body[data-theme] [class*="bg-slate-800"],
body[data-theme] [class~="bg-white"] {
    background: var(--theme-surface, var(--admin-surface)) !important;
    background-image: none !important;
}

body[data-theme] [class*="from-zinc-"],
body[data-theme] [class*="to-zinc-"],
body[data-theme] [class*="via-zinc-"] {
    --tw-gradient-from: var(--theme-surface, var(--admin-surface)) !important;
    --tw-gradient-to: var(--theme-surface-2, var(--admin-surface-2)) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

body[data-theme] [class*="border-zinc-"],
body[data-theme] [class*="border-neutral-"],
body[data-theme] [class*="border-slate-"],
body[data-theme] [class*="border-white"],
body[data-theme] [class*="border-black"] {
    border-color: var(--theme-border, var(--admin-border)) !important;
}

body[data-theme] [class*="text-zinc-50"],
body[data-theme] [class*="text-zinc-100"],
body[data-theme] [class*="text-zinc-200"],
body[data-theme] [class*="text-zinc-300"],
body[data-theme] [class*="text-neutral-50"],
body[data-theme] [class*="text-slate-100"],
body[data-theme] [class~="text-white"],
body[data-theme] [class~="text-black"] {
    color: var(--theme-text, var(--admin-text)) !important;
}

body[data-theme] [class*="text-zinc-400"],
body[data-theme] [class*="text-zinc-500"],
body[data-theme] [class*="text-zinc-600"],
body[data-theme] [class*="text-zinc-700"],
body[data-theme] [class*="text-neutral-400"],
body[data-theme] [class*="text-slate-400"] {
    color: var(--theme-muted, var(--admin-muted)) !important;
}

body[data-theme] input,
body[data-theme] select,
body[data-theme] textarea {
    background-color: var(--theme-surface, var(--admin-surface)) !important;
    border-color: var(--theme-border, var(--admin-border)) !important;
    color: var(--theme-text, var(--admin-text)) !important;
}

body[data-theme] > header,
body[data-theme] .bottom-nav,
body[data-theme] .app-modal__box,
body[data-theme] .desktop-nav-brand,
body[data-theme] .glass-card,
body[data-theme] .pwa-banner,
body[data-theme] .mercado-item,
body[data-theme] .mercado-filtros,
body[data-theme] .mercado-attr,
body[data-theme] .mercado-icon-btn,
body[data-theme] .mercado-floating-actions {
    background: var(--theme-surface, var(--admin-surface-2)) !important;
    border-color: var(--theme-border, var(--admin-border)) !important;
    color: var(--theme-text, var(--admin-text)) !important;
}

body[data-theme] .cta-primary {
    background: var(--theme-primary-action) !important;
    background-image: none !important;
    color: var(--theme-primary-text) !important;
}

body[data-theme] [class~="bg-primary-500"] {
    background-color: var(--theme-primary-action) !important;
    color: var(--theme-primary-text) !important;
}

body[data-theme] [class*="from-primary-"] {
    --tw-gradient-from: var(--theme-primary-action) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: color-mix(in srgb, var(--theme-primary-action) 0%, transparent) var(--tw-gradient-to-position) !important;
}

body[data-theme] .text-primary-400,
body[data-theme] .text-primary-300 {
    color: var(--theme-primary) !important;
}

body[data-theme="club"] > header,
body[data-theme="club"] .bottom-nav,
body[data-theme="club"] .app-dashboard-hero {
    border-color: color-mix(in srgb, var(--club-primary) 48%, var(--theme-border)) !important;
}

/* Classe genérica para cards que precisam ficar visivelmente mais
   transparentes/apagados que os demais, mesmo com um tema custom ativo
   (as regras de border/bg-zinc-* acima forçam cor sólida do tema, ignorando
   o sufixo de opacidade da classe Tailwind). Usar junto de .card-dim
   definida em app.css. */
body[data-theme] .card-dim {
    border-color: color-mix(in srgb, var(--theme-border, var(--admin-border)) 30%, transparent) !important;
    background: color-mix(in srgb, var(--theme-surface-2, var(--admin-surface-2)) 22%, #000000 28%) !important;
}

body[data-theme] .torneios-empty-state {
    border-color: color-mix(in srgb, var(--theme-border) 42%, transparent) !important;
    background: color-mix(in srgb, var(--theme-surface-2) 28%, transparent) !important;
}

/* Admin uses its own variables; map them into the shared theme layer. */
body[data-theme] .admin-shell {
    background: var(--admin-surface);
    color: var(--admin-text);
}

body[data-theme] .admin-sidebar,
body[data-theme] .admin-header,
body[data-theme] .admin-card,
body[data-theme] .admin-list__item,
body[data-theme] .admin-home-card,
body[data-theme] .admin-modal,
body[data-theme] .sim-modal,
body[data-theme] .admin-tournament-row,
body[data-theme] .admin-stats div,
body[data-theme] .admin-table-wrap,
body[data-theme] .admin-alert,
body[data-theme] .cfg-sim-card,
body[data-theme] .cfg-help-section--exemplo,
body[data-theme] .sim-slot {
    background: var(--admin-surface-2) !important;
    border-color: var(--admin-border) !important;
    color: var(--admin-text) !important;
}

body[data-theme] .admin-home__header h2,
body[data-theme] .admin-home-card strong,
body[data-theme] .admin-header h1,
body[data-theme] .admin-card h2,
body[data-theme] .admin-panel h2,
body[data-theme] .admin-table td,
body[data-theme] .sim-modal__header h3,
body[data-theme] .cfg-sim-title {
    color: var(--admin-text) !important;
}

body[data-theme] .admin-muted,
body[data-theme] .admin-kicker,
body[data-theme] .admin-home-card span,
body[data-theme] .admin-table th,
body[data-theme] .sim-slot__stats,
body[data-theme] .sim-field-row > label,
body[data-theme] .cfg-sim-muted {
    color: var(--admin-muted) !important;
}

body[data-theme] .admin-button--primary,
body[data-theme] .admin-brand__mark {
    background: var(--admin-primary) !important;
    border-color: var(--admin-primary) !important;
    color: var(--admin-primary-text) !important;
}

body[data-theme] .admin-tabs button.is-active {
    background: color-mix(in srgb, var(--admin-primary) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--admin-primary) 44%, var(--admin-border)) !important;
    color: var(--admin-primary) !important;
}

body[data-theme] .nav-item.is-active {
    color: var(--nav-accent) !important;
}

body[data-theme] .nav-item.is-active::before {
    background: var(--nav-accent) !important;
}

body.device-desktop[data-theme]:not(.is-unauthenticated) .nav-item.is-active {
    background: color-mix(in srgb, var(--nav-accent) 16%, transparent) !important;
    border-color: color-mix(in srgb, var(--nav-accent) 38%, var(--theme-border)) !important;
}

.peladacs-brand-mark,
.desktop-nav-brand__mark,
.admin-brand__mark {
    background: var(--peladacs-green, #0f9f6e) !important;
    background-image: none !important;
    border-color: var(--peladacs-green, #0f9f6e) !important;
    color: #ffffff !important;
}

.peladacs-brand-name,
.desktop-nav-brand__text strong,
.admin-brand strong {
    color: var(--peladacs-green, #0f9f6e) !important;
}

body.is-unauthenticated[data-theme="medium"] .peladacs-login-brand-mark {
    background: linear-gradient(135deg, #18b981, var(--peladacs-green, #0f9f6e)) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 30px rgb(15 159 110 / 28%) !important;
}

body.is-unauthenticated[data-theme="medium"] .peladacs-login-brand-name {
    color: var(--peladacs-green, #0f9f6e) !important;
}

body.is-unauthenticated[data-theme="medium"] #app-content {
    min-height: 100vh;
    background:
        linear-gradient(180deg, var(--theme-surface-2, #344258) 0%, var(--theme-surface, #293548) 52%, #222d3d 100%) !important;
    color: var(--theme-text, #f1f5f9) !important;
}

body.is-unauthenticated[data-theme="medium"] #app-content > section {
    background: transparent !important;
}

body.is-unauthenticated[data-theme="medium"] #form-login .cta-primary {
    background: var(--peladacs-green, #0f9f6e) !important;
    color: #ffffff !important;
}

body.is-unauthenticated[data-theme="medium"] #form-login .cta-primary:hover {
    background: #0d875e !important;
}

body.is-unauthenticated[data-theme="medium"] #btn-recuperar-senha,
body.is-unauthenticated[data-theme="medium"] #btn-abrir-cadastro span,
body.is-unauthenticated[data-theme="medium"] a[href*="/auth/google"] .fa-google {
    color: var(--peladacs-green, #0f9f6e) !important;
}
/* Regra global de interação: botões não devem ficar translúcidos por herança
   de utilitários, estados de tema ou estilos de componentes. */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"] {
    opacity: 1 !important;
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled {
    opacity: 1 !important;
}

/* O conteúdo da aba também não pode aplicar transparência no ancestral do
   botão; opacity no pai reduz visualmente todos os descendentes. */
#app-content,
#app-content.route-tab-animate {
    opacity: 1 !important;
    animation: none !important;
}

#app-content button[class*="opacity-"],
#app-content [role="button"][class*="opacity-"] {
    opacity: 1 !important;
}