/* ─────────────────────────────────────────────────────────────
   Veynt Bots — Theme overrides (Light mode + toggle UI)
   Aplica quando html[data-theme="light"]. Default = dark.
   ───────────────────────────────────────────────────────────── */

/* Ambos os modos: flag de luminosidade para rgba dinâmicos */
:root { --on-surface-rgb: 255, 255, 255; }

html[data-theme="light"] {
  /* Backgrounds */
  --bg:         #ffffff;
  --bg-2:       #f7f8f8;
  --surface:    #f3f4f5;
  --surface-2:  #e8eaed;
  --surface-3:  #d0d6e0;

  /* Borders (semi-transparentes em preto) */
  --border:     rgba(0, 0, 0, 0.06);
  --border-2:   rgba(0, 0, 0, 0.09);
  --border-3:   rgba(0, 0, 0, 0.14);

  /* Texto — --white vira o texto primário escuro */
  --white:      #0a0a0a;
  --gray-1:     #2a2d33;
  --gray-2:     #5a5f68;
  --gray-3:     #8a8f98;
  --gray-4:     #c7ccd4;

  /* Flag pra rgba dinâmicos */
  --on-surface-rgb: 0, 0, 0;

  /* accent/status permanecem iguais (funcionam em ambos) */

  /* App-shell vars (espelho) */
  --app-bg:        #ffffff;
  --app-surface:   #f7f8f8;
  --app-surface-2: #f3f4f5;
  --app-surface-3: #e8eaed;
  --app-elev:      #ffffff;
  --app-border:    rgba(0, 0, 0, 0.06);
  --app-border-2:  rgba(0, 0, 0, 0.09);
  --app-border-3:  rgba(0, 0, 0, 0.14);
  --app-text:      #0a0a0a;
  --app-text-2:    #2a2d33;
  --app-text-3:    #5a5f68;
  --app-text-4:    #8a8f98;
}

/* ── Theme toggle (dropdown) ─────────────────────────────── */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm, 6px);
  background: rgba(var(--on-surface-rgb), 0.03);
  border: 1px solid var(--border-2);
  color: var(--gray-1);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.theme-toggle-btn:hover {
  background: rgba(var(--on-surface-rgb), 0.06);
  border-color: var(--border-3);
  color: var(--white);
}
.theme-toggle-btn svg { width: 16px; height: 16px; }
.theme-toggle-btn .theme-icon { display: none; }
html[data-theme="light"] .theme-toggle-btn .theme-icon-sun { display: block; }
html:not([data-theme="light"]) .theme-toggle-btn .theme-icon-moon { display: block; }

.theme-toggle-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
  display: none;
  z-index: 1000;
}
.theme-toggle[data-open="true"] .theme-toggle-menu { display: block; }
.theme-toggle-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--r-sm, 6px);
  color: var(--gray-1);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.theme-toggle-item:hover { background: rgba(var(--on-surface-rgb), 0.05); color: var(--white); }
.theme-toggle-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.theme-toggle-item[aria-checked="true"] { color: var(--accent-2); }
.theme-toggle-item .check { margin-left: auto; opacity: 0; }
.theme-toggle-item[aria-checked="true"] .check { opacity: 1; }

/* Mobile nav — item do tema no menu hamburguer */
.mobile-theme-row {
  display: flex;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.mobile-theme-row button {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm, 6px);
  background: rgba(var(--on-surface-rgb), 0.03);
  color: var(--gray-1);
  font-size: 13px;
  cursor: pointer;
}
.mobile-theme-row button[aria-checked="true"] {
  color: var(--accent-2);
  border-color: var(--accent-line);
  background: var(--accent-dim);
}

/* ── Light mode: Admin panel vars ───────────────────────────── */
html[data-theme="light"] {
  --adm-bg:      #ffffff;
  --adm-bg-soft: #f7f8f8;
  --adm-panel:   #f3f4f5;
  --adm-panel-2: #e8eaed;
  --adm-hover:   #e0e3e8;
  --adm-line:    rgba(0, 0, 0, 0.06);
  --adm-line-2:  rgba(0, 0, 0, 0.09);
  --adm-text:    #0a0a0a;
  --adm-muted:   #5a5f68;
  --adm-muted-2: #8a8f98;
  --adm-shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --adm-shadow-md: 0 4px 20px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
  --adm-shadow-lg: 0 20px 60px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
}

/* ── Light mode: hardcoded dark surfaces ─────────────────────── */

/* app-shell sidebar */
html[data-theme="light"] .app-side {
  background: linear-gradient(180deg, var(--app-surface), var(--app-surface-2));
}

/* app-shell topbar */
html[data-theme="light"] .app-topbar {
  background: rgba(255, 255, 255, 0.85);
}

/* app-shell mobile scrim — slightly lighter in light mode */
html[data-theme="light"] .app-side-scrim {
  background: rgba(0, 0, 0, 0.4);
}

/* admin sidebar */
html[data-theme="light"] .adm-side {
  background: linear-gradient(180deg, var(--adm-panel), var(--adm-panel-2));
}

/* admin topbar */
html[data-theme="light"] .adm-topbar {
  background: rgba(255, 255, 255, 0.85);
}

/* admin cards */
html[data-theme="light"] .adm-card {
  background: var(--adm-panel);
}

/* admin auth card */
html[data-theme="light"] .adm-auth-card {
  background: var(--adm-panel);
}

/* admin stat cards (.adm-bento) usam tokens --adm-* e --on-surface-rgb,
   que ja mudam com o tema; sem override necessario */

/* checkout body background — handled directly in checkout.css */

/* hero mockup wrapper — intentional "dark browser frame" simulation; keep dark */
/* .mockup-wrapper stays dark in both themes — it simulates a dark UI screenshot */

/* embed-win Discord preview — intentional dark Discord UI simulation; keep as-is */
/* .embed-win / .edw-sidebar stay dark — they simulate Discord's dark UI */

/* In light mode, the Discord-simulation containers stay dark (intentional),
   but their inner text uses theme vars (--white, --gray-1, etc.) which become
   dark in light mode. Re-scope those vars to dark-mode values inside the
   simulated Discord surfaces so text stays readable on the dark background. */
html[data-theme="light"] .mockup-wrapper,
html[data-theme="light"] .embed-win,
html[data-theme="light"] .wallet-section {
  --bg:        #08090a;
  --bg-2:      #0f1011;
  --surface:   #191a1b;
  --surface-2: #1f2021;
  --surface-3: #28282c;
  --white:     #f5f6f8;
  --gray-1:    #d6d8de;
  --gray-2:    #a8adb8;
  --gray-3:    #8a8f98;
  --gray-4:    #6a7080;
  --border:    rgba(255, 255, 255, 0.06);
  --border-2:  rgba(255, 255, 255, 0.09);
  --border-3:  rgba(255, 255, 255, 0.14);
  --on-surface-rgb: 255, 255, 255;
}

/* ── Light mode: heavy dark shadows on surfaces ──────────────── */
html[data-theme="light"] .mockup-wrapper {
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.04) inset,
    0 30px 80px -20px rgba(0,0,0,0.12),
    0 0 100px -20px var(--accent-glow);
}

html[data-theme="light"] .adm-modal-backdrop {
  background: rgba(0, 0, 0, 0.4);
}

/* embed-tabs background in light mode */
html[data-theme="light"] .embed-tabs {
  background: var(--surface-2);
}

/* checkout nav in light mode */
html[data-theme="light"] .co-nav {
  background: rgba(255, 255, 255, 0.9);
}

/* checkout nav in light mode */
html[data-theme="light"] .cov2-nav {
  background: rgba(255, 255, 255, 0.9);
}

/* checkout mobile bar in light mode */
html[data-theme="light"] .cov2-mob {
  background: rgba(255, 255, 255, 0.9);
}

/* section-divider logo: in light mode the new black logo is already correct. */
html[data-theme="light"] .section-divider img {
  filter: none;
  opacity: 0.2;
}

/* Marketing site nav — hardcoded dark rgba(8,9,10, X) */
html[data-theme="light"] .nav {
  background: rgba(255, 255, 255, 0.7);
}
html[data-theme="light"] .nav.scrolled {
  background: rgba(255, 255, 255, 0.88);
}

/* Hero headline gradient — hardcoded light-on-light becomes invisible.
   Use theme-aware gradient so light mode gets a dark-ish gradient on the headline. */
html[data-theme="light"] .hero h1 {
  background: linear-gradient(180deg, #0a0a0a 0%, #3a3d44 120%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Logo is now black-on-transparent (new identity v1 · abril/2026).
   Dark mode = default → invert to white. Light mode → no filter. */
.nav-logo img,
.footer-logo-img,
.auth-brand-logo,
.login-brand-logo,
.topbar-logo img,
.app-side-brand-mark img,
.adm-side-brand img,
.cov2-nav-logo img,
.co-nav-logo img {
  filter: invert(1);
}
html[data-theme="light"] .nav-logo img,
html[data-theme="light"] .footer-logo-img,
html[data-theme="light"] .auth-brand-logo,
html[data-theme="light"] .login-brand-logo,
html[data-theme="light"] .topbar-logo img,
html[data-theme="light"] .app-side-brand-mark img,
html[data-theme="light"] .adm-side-brand img,
html[data-theme="light"] .cov2-nav-logo img,
html[data-theme="light"] .co-nav-logo img {
  filter: none;
}

/* Footer background in light mode (if dark) */
html[data-theme="light"] .footer {
  background: var(--surface);
}
html[data-theme="light"] .footer-bottom {
  background: var(--surface-2);
}

/* Dashboard auth card — hardcoded dark gradient */
html[data-theme="light"] .dashboard-auth-card {
  background: linear-gradient(180deg, #ffffff, #f7f8f8);
  box-shadow:
    0 30px 80px -24px rgba(0, 0, 0, 0.14),
    0 0 0 1px rgba(0, 0, 0, 0.03) inset,
    0 0 120px -36px rgba(94, 106, 210, 0.2);
}

/* App-shell sidebar upgrade CTA card */
html[data-theme="light"] .app-side-upgrade {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(94, 106, 210, 0.10), transparent 55%),
    linear-gradient(180deg, #ffffff, #f3f4f5);
}

/* Servidores featured card */
html[data-theme="light"] .server-card--featured {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(94, 106, 210, 0.05), transparent 55%),
    linear-gradient(180deg, #ffffff, #f7f8f8);
}

/* App toast (notification) */
html[data-theme="light"] .app-toast {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.18);
}

/* Bot-config save bar + mobile nav sticky */
html[data-theme="light"] .cfg-section-foot,
html[data-theme="light"] .cfg-nav {
  background: rgba(255, 255, 255, 0.85);
}

/* Bento mini-rows (moderation log, leaderboard, tickets) — match marquee pill look */
html[data-theme="light"] .log-row,
html[data-theme="light"] .lb-row,
html[data-theme="light"] .ticket-row {
  background: var(--bg);
}
html[data-theme="light"] .lb-row.lb-you {
  background: var(--accent-dim);
}

/* Modules section command pills — match marquee pill look */
html[data-theme="light"] .module-command-list span {
  background: var(--bg);
  border-color: var(--border-2);
  color: var(--gray-1);
}
html[data-theme="light"] .module-command-list span:hover {
  border-color: var(--accent);
  color: var(--accent-2);
}