/* Neon × txAdmin - proxy theme. Tokens: public/neon-tokens.css (servido em /__neon/tokens.css). */

@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap");

:root,
.dark,
html.dark {
  --background: 0 0% 4%;
  --foreground: 0 0% 96%;
  --card: 0 0% 9%;
  --card-foreground: 0 0% 96%;
  --popover: 0 0% 8%;
  --popover-foreground: 0 0% 96%;
  --primary: 0 0% 84%;
  --primary-foreground: 0 0% 4%;
  --secondary: 0 0% 12%;
  --secondary-foreground: 0 0% 96%;
  --muted: 0 0% 12%;
  --muted-foreground: 0 0% 54%;
  --accent: 0 0% 16%;
  --accent-foreground: 0 0% 90%;
  --border: 0 0% 14%;
  --input: 0 0% 12%;
  --ring: 0 0% 84%;
  --destructive: 6 78% 57%;
  --destructive-foreground: 0 0% 100%;
  --radius: 0.75rem;
}

html { scroll-behavior: smooth; }

html,
body {
  font-family: var(--n-font) !important;
  color: var(--n-text) !important;
  background: var(--n-bg) !important;
}

/* Fundo - igual ao painel */
body.neon-tx {
  background: var(--n-ambient) !important;
  min-height: 100%;
}

body.neon-tx::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: var(--n-grid);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 15%, transparent 72%);
}

/* Ambient estático (sem follow do rato) - igual ao painel das logs, mais leve */
body.neon-tx::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    520px 380px at 50% 18%,
    rgba(214, 214, 214, 0.05),
    transparent 70%
  );
}

#root,
[data-radix-portal] {
  position: relative;
  z-index: 1;
}

::selection {
  background: rgba(214, 214, 214, 0.35);
  color: #fff;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(214, 214, 214, 0.45) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(214, 214, 214, 0.6), rgba(240, 240, 240, 0.35));
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

h1, h2, h3,
.text-2xl.font-semibold,
.text-xl.font-semibold {
  font-family: var(--n-display) !important;
  letter-spacing: -0.03em;
}

code, pre, kbd, .font-mono {
  font-family: var(--n-mono) !important;
}

/* ========== LOGIN ========== */
.pattern-dots {
  background: transparent !important;
}

/* Kill partner ads (GPORTAL / Discord promo) */
body.neon-tx .mx-auto.flex.flex-wrap.gap-4.justify-center {
  display: none !important;
}

body.neon-tx .min-h-screen.flex.items-center.justify-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 32px 28px !important;
}

body.neon-tx .min-h-screen.flex.items-center.justify-center > .neon-login-stage {
  max-width: 980px !important;
  width: 100% !important;
}

body.neon-tx .min-h-screen.flex.items-center.justify-center > div:not(.neon-login-stage) {
  max-width: 28rem !important;
}

/* Cartão de login - igual a .login-card do painel */
body.neon-tx .min-h-screen .bg-card\/40,
body.neon-tx .min-h-screen [class*="bg-card/40"] {
  background: var(--n-card-strong) !important;
  border: 1px solid var(--n-line-2) !important;
  border-radius: var(--n-radius-lg) !important;
  box-shadow: var(--n-shadow-lg) !important;
  backdrop-filter: blur(12px);
  overflow: hidden;
  min-height: unset !important;
}

body.neon-tx .min-h-screen form > div.bg-card,
body.neon-tx .min-h-screen form .border-t.bg-card {
  background: transparent !important;
  border-color: var(--n-line) !important;
}

body.neon-tx .min-h-screen h3 {
  gap: 1rem !important;
}

body.neon-tx .min-h-screen h3 img {
  border-radius: 10px !important;
  box-shadow: 0 12px 32px rgba(214, 214, 214, 0.28);
}

@media (min-width: 900px) {
  body.neon-tx .min-h-screen h3 {
    height: auto !important;
    justify-content: flex-start !important;
  }
  body.neon-tx .min-h-screen h3 > div:has(img) {
    display: none !important;
  }
  body.neon-tx .min-h-screen h3 > div:not(:has(img)) {
    gap: 6px;
    justify-content: flex-start !important;
  }
}

body.neon-tx .min-h-screen h3 .text-xl,
body.neon-tx .min-h-screen h3 .text-2xl {
  color: var(--n-text) !important;
  font-family: var(--n-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  text-transform: none;
  font-size: 1.6rem !important;
  line-height: 1.1 !important;
}

body.neon-tx .min-h-screen h3 .text-muted-foreground {
  color: var(--n-muted) !important;
  font-family: var(--n-font) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Esconde o wordmark/links do txAdmin no login */
body.neon-tx .min-h-screen svg.w-36,
body.neon-tx .min-h-screen svg.mx-auto,
body.neon-tx .min-h-screen a[href*="github.com/tabarra"] {
  display: none !important;
}

/* ========== CONTROLOS ========== */
body.neon-tx input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.neon-tx textarea,
body.neon-tx select {
  background: var(--n-input) !important;
  border: 1px solid var(--n-line-2) !important;
  border-radius: var(--n-radius-sm) !important;
  color: var(--n-text) !important;
  transition: border-color 0.2s var(--n-ease), box-shadow 0.2s var(--n-ease) !important;
}

body.neon-tx input:hover,
body.neon-tx textarea:hover {
  border-color: color-mix(in srgb, var(--n-accent) 28%, var(--n-line-2)) !important;
}

body.neon-tx input:focus,
body.neon-tx input:focus-visible,
body.neon-tx textarea:focus,
body.neon-tx textarea:focus-visible {
  border-color: color-mix(in srgb, var(--n-accent) 60%, transparent) !important;
  box-shadow: var(--n-ring) !important;
  outline: none !important;
}

body.neon-tx label {
  color: var(--n-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body.neon-tx :where(button, a, [role="tab"], [role="menuitem"]):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--n-accent) 70%, transparent) !important;
  outline-offset: 2px;
}

/* Botão principal - igual a .login-card button / botões verdes do painel */
body.neon-tx .min-h-screen form button:first-of-type,
body.neon-tx button.neon-btn-primary,
body.neon-tx button.bg-primary {
  background: var(--n-grad) !important;
  background-color: var(--n-accent) !important;
  color: var(--n-ink) !important;
  font-weight: 700 !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: var(--n-radius-sm) !important;
  box-shadow: var(--n-glow-btn) !important;
  transition: transform 0.2s var(--n-ease), box-shadow 0.2s var(--n-ease), filter 0.2s var(--n-ease) !important;
  animation: none !important;
}

body.neon-tx .min-h-screen form button:first-of-type:hover,
body.neon-tx button.neon-btn-primary:hover,
body.neon-tx button.bg-primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(214, 214, 214, 0.3) !important;
}

/* Botão secundário - igual a .ghost do painel */
body.neon-tx .min-h-screen form button:last-of-type,
body.neon-tx button.neon-btn-ghost {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--n-text) !important;
  border: 1px solid transparent !important;
  border-radius: var(--n-radius-sm) !important;
  box-shadow: none !important;
  outline: none !important;
}

body.neon-tx .min-h-screen form button:last-of-type:hover,
body.neon-tx button.neon-btn-ghost:hover {
  background: rgba(214, 214, 214, 0.08) !important;
  border-color: transparent !important;
  color: #fff !important;
}

body.neon-tx button.bg-secondary,
body.neon-tx button[class*="border-input"] {
  background: var(--n-surface-2) !important;
  border: 1px solid var(--n-line-2) !important;
  border-radius: var(--n-radius-sm) !important;
  color: var(--n-text) !important;
  font-weight: 600;
  transition: border-color 0.2s var(--n-ease), background 0.2s var(--n-ease) !important;
}

body.neon-tx button.bg-secondary:hover,
body.neon-tx button[class*="border-input"]:hover {
  border-color: color-mix(in srgb, var(--n-accent) 45%, transparent) !important;
  background: color-mix(in srgb, var(--n-accent) 8%, var(--n-surface-2)) !important;
}

body.neon-tx button.bg-destructive {
  border-radius: var(--n-radius-sm) !important;
}

/* Rodapé de versão + anúncios - esconder */
body.neon-tx .text-center.text-muted-foreground.text-sm,
body.neon-tx .mx-auto.flex.flex-wrap.gap-4.justify-center,
body.neon-tx a[href*="utm_medium=advert"],
body.neon-tx img[src*="advert-"],
body.neon-tx img[src$="/img/discord.png"],
body.neon-tx .min-h-screen svg.w-36,
body.neon-tx .min-h-screen svg.mx-auto,
body.neon-tx .min-h-screen svg[viewBox="0 0 1115 288"] {
  display: none !important;
}

/* Chrome injetado (embed.js) - mesmas classes visuais que o login do painel */
.neon-tx-kicker {
  display: block;
  margin: 0 0 6px;
  color: var(--n-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--n-display);
}

.neon-login-copy > .neon-tx-kicker {
  margin: 18px 0 0;
  color: var(--n-accent-2);
  font-family: var(--n-font);
  letter-spacing: 0.16em;
}

.neon-tx-brand-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}

.neon-login-stage {
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 400px);
  gap: 56px;
  align-items: center;
  box-sizing: border-box;
}

.neon-login-copy { min-width: 0; }

.neon-login-hero {
  width: min(520px, 100%);
  height: auto;
  max-height: 320px;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 18px 36px rgba(214, 214, 214, 0.35));
}

.neon-login-title {
  margin: 8px 0 0;
  font-family: var(--n-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--n-text);
}

.neon-login-lead {
  margin: 8px 0 0;
  max-width: 36ch;
  color: var(--n-muted);
  font-size: 16px;
  line-height: 1.5;
}

.neon-login-stage > div.w-full {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

@media (max-width: 899px) {
  .neon-login-stage {
    display: block;
    width: min(28rem, 100%);
    padding: 12px;
  }
  .neon-login-copy { display: none; }
}

/* ========== APP SHELL ========== */
aside,
[class*="sidebar"] {
  background:
    linear-gradient(180deg, rgba(214, 214, 214, 0.07), transparent 140px),
    rgba(6, 10, 7, 0.96) !important;
  border-color: var(--n-line) !important;
  backdrop-filter: blur(10px);
}

aside a,
aside button {
  border-radius: 10px !important;
  transition: background 0.22s var(--n-ease), color 0.22s var(--n-ease) !important;
}

aside a:hover,
nav a:hover,
aside button:hover {
  background: var(--n-hover-bg) !important;
  color: var(--n-text) !important;
}

/* Item ativo - igual a .nav-btn.active do painel (pílula + barra à esquerda) */
aside [aria-current="page"],
aside [data-active="true"],
aside [data-state="active"] {
  position: relative;
  background: var(--n-active-bg) !important;
  box-shadow: inset 0 0 0 1px rgba(214, 214, 214, 0.14) !important;
  color: #fff !important;
}

aside [aria-current="page"]::before,
aside [data-active="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: inherit;
  background: none;
  box-shadow: none;
  pointer-events: none;
}

aside [aria-current="page"] svg,
aside [data-active="true"] svg {
  color: var(--n-accent) !important;
}

/* Barra de topo - igual a .topbar do painel */
body.neon-tx header {
  background: var(--n-glass) !important;
  border-bottom: 1px solid var(--n-line) !important;
  box-shadow: inset 0 -1px 0 rgba(214, 214, 214, 0.08);
  backdrop-filter: blur(10px);
}

/* Cartões - igual a .dash-card / .hist-card do painel */
[class*="rounded"][class*="border"][class*="bg-card"],
[data-slot="card"] {
  background: var(--n-card) !important;
  border-color: var(--n-line) !important;
  border-radius: var(--n-radius) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
  transition: border-color 0.22s var(--n-ease), box-shadow 0.22s var(--n-ease) !important;
}

[class*="rounded"][class*="border"][class*="bg-card"]:hover,
[data-slot="card"]:hover {
  border-color: color-mix(in srgb, var(--n-accent) 22%, var(--n-line)) !important;
  transform: none !important;
}

/* Menus / popovers / diálogos - igual a .dd-menu e .cmd-panel do painel */
[role="menu"],
[role="listbox"],
[role="dialog"],
[data-radix-popper-content-wrapper] > div {
  background: var(--n-card-strong) !important;
  border-color: color-mix(in srgb, var(--n-accent) 22%, var(--n-line-2)) !important;
  box-shadow: var(--n-shadow), 0 0 0 1px rgba(214, 214, 214, 0.06) !important;
}

[role="menuitem"]:hover,
[role="menuitem"][data-highlighted],
[role="option"][data-highlighted] {
  background: color-mix(in srgb, var(--n-accent) 14%, transparent) !important;
  color: #fff !important;
}

/* Tabelas - igual a .row do painel */
table thead tr,
table thead th {
  background: transparent !important;
  color: var(--n-muted) !important;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

table tbody tr:hover,
[role="row"]:hover {
  background: rgba(214, 214, 214, 0.04) !important;
}

/* Tabs / badges */
[role="tab"][data-state="active"] {
  background: var(--n-active-bg) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(214, 214, 214, 0.14) !important;
}

a:hover {
  color: var(--n-accent-2);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}