/*
 * Voxentra: o que o tema JSON do WhatsCRM (theme-voxentra) não alcança.
 * Seletores só em classes estáveis (MUI e as do próprio WhatsCRM: brand-text, logo-box) e em atributos.
 * Cores da marca: docs/brand e packages/ui/src/styles/tokens.css.
 */
:root {
  --vx-violet: #6a00f4;
  --vx-blue: #0040fa;
  --vx-cyan: #00c9f0;
  --vx-navy: #070b28;
  --vx-gradient-brand: linear-gradient(
    120deg,
    var(--vx-violet) 0%,
    var(--vx-blue) 52%,
    var(--vx-cyan) 100%
  );
  --vx-scroll-thumb: #b9bfd6;
  --vx-scroll-thumb-hover: #838db4;
  --vx-scroll-track: transparent;
}

/* Nome do app ("Voxen" + "tra"): o trecho destacado ganha o gradiente da marca, como o X do logotipo. */
.brand-text > span {
  background: var(--vx-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Logo vindo do banco (web_public.logo): o símbolo V já é a marca; sem moldura nem fundo herdados. */
.logo-box:has(> img[src*="/voxentra/brand/"]) {
  background: transparent;
  box-shadow: none;
}

/* Rodapé da landing: o logotipo horizontal entra no lugar do símbolo (troca feita em brand.js). */
footer img[src*="/voxentra/brand/logo-horizontal"] {
  width: 180px;
  max-width: 100%;
  height: auto;
}

footer img[src*="/voxentra/brand/mark"] {
  max-width: 64px;
}

/* Barras de rolagem e seleção na paleta navy (o CSS do WhatsCRM usa cinza neutro). */
::-webkit-scrollbar-track {
  background: var(--vx-scroll-track);
}

::-webkit-scrollbar-thumb {
  background: var(--vx-scroll-thumb);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--vx-scroll-thumb-hover);
}

html {
  scrollbar-color: var(--vx-scroll-thumb) var(--vx-scroll-track);
}

html.vx-dark {
  --vx-scroll-thumb: #2c3566;
  --vx-scroll-thumb-hover: #4a5592;
}

::selection {
  background: rgba(0, 64, 250, 0.22);
}

/* Foco visível consistente com o console (anel azul da marca). */
.MuiButtonBase-root:focus-visible {
  outline: 2px solid #4f7bff;
  outline-offset: 2px;
}

/* Barra de progresso global (NProgress/LinearProgress primária) no gradiente da marca. */
.MuiLinearProgress-barColorPrimary {
  background-image: var(--vx-gradient-brand);
}