/* ===========================================
 * Info Sete CHAT — LOGIN & BRANDING
 * Versão: v3 logos (logo.v3.png / logo-dark.v3.png / logo-square.png)
 * =========================================== */


/* ===== LOGIN: botões vermelhos ===== */

body.text-slate-600 main form button[type="submit"],
body.text-slate-600 main form [type="submit"] {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

body.text-slate-600 main form button[type="submit"]:hover,
body.text-slate-600 main form [type="submit"]:hover {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
}

body.text-slate-600 main form button[type="submit"]:focus,
body.text-slate-600 main form button[type="submit"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.35) !important;
}

/* Login social (Google) */
body.text-slate-600 main a[href*="google_oauth2"],
body.text-slate-600 main a[href*="google"] {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.6rem 0.9rem !important;
  border-radius: 0.5rem !important;
  text-decoration: none !important;
}

body.text-slate-600 main a[href*="google_oauth2"]:hover,
body.text-slate-600 main a[href*="google"]:hover {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
}


/* ===========================================
 * BRAND OVERRIDES — BOTÕES PRIMÁRIOS (APP)
 * =========================================== */

/* Botões primários com vermelho da Info Sete */
#app .bg-n-brand,
#app [class~="bg-n-brand"] {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
}

#app .hover\:bg-n-brand-dark:hover,
#app .hover\:bg-n-brand-darker:hover {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
}

#app .active\:bg-n-brand-dark:active,
#app .active\:bg-n-brand-darker:active {
  background-color: #991b1b !important;
  border-color: #991b1b !important;
}

/* Texto/ícone brand */
#app .text-n-brand,
#app [class~="text-n-brand"] {
  color: #dc2626 !important;
}

/* Bordas brand */
#app .border-n-brand,
#app [class~="border-n-brand"] {
  border-color: #dc2626 !important;
}

/* Foco geral em botões */
#app button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25) !important;
}

/* Mais botões primários por classe */
#app .button--primary,
#app .woot-button--primary,
#app .btn-primary,
#app .is-primary,
#app [class*="btn-primary"],
#app [class*="button--primary"],
#app [class*="woot-button--primary"],
#app button[type="submit"].bg-n-brand,
#app button[type="submit"][class*="bg-n-brand"],
#app a[role="button"].bg-n-brand,
#app a[role="button"][class*="bg-n-brand"] {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

#app .button--primary:hover,
#app .woot-button--primary:hover,
#app .btn-primary:hover,
#app .is-primary:hover,
#app button[type="submit"].bg-n-brand:hover,
#app a[role="button"].bg-n-brand:hover {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
}

#app .button--primary:active,
#app .woot-button--primary:active,
#app .btn-primary:active,
#app .is-primary:active,
#app button[type="submit"].bg-n-brand:active,
#app a[role="button"].bg-n-brand:active {
  background-color: #991b1b !important;
  border-color: #991b1b !important;
}


/* ===========================================
 * CONVERSA: Botão Resolver em vermelho
 * =========================================== */

#app [class*="conversation"] .button--success,
#app [class*="conversation"] .woot-button--success,
#app [class*="conversation"] .btn-success,
#app [class*="conversation"] .is-success,
#app [class*="conversation"] [data-testid*="resolve"],
#app [class*="conversation"] [data-testid*="close"],
#app [data-testid*="resolve"] {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

#app [class*="conversation"] .button--success:hover,
#app [class*="conversation"] .woot-button--success:hover,
#app [class*="conversation"] .btn-success:hover,
#app [class*="conversation"] .is-success:hover,
#app [class*="conversation"] [data-testid*="resolve"]:hover,
#app [data-testid*="resolve"]:hover {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
}

#app [class*="conversation"] .button--success:active,
#app [class*="conversation"] .woot-button--success:active,
#app [class*="conversation"] .btn-success:active,
#app [class*="conversation"] .is-success:active,
#app [class*="conversation"] [data-testid*="resolve"]:active,
#app [data-testid*="resolve"]:active {
  background-color: #991b1b !important;
  border-color: #991b1b !important;
}

/* Garante ícones/textos brancos no Resolver */
#app [class*="conversation"] .button--success *,
#app [class*="conversation"] .woot-button--success *,
#app [class*="conversation"] [data-testid*="resolve"] * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Alvos extras por atributos (resolver) */
#app button[data-testid*="resolve" i],
#app button[data-testid*="resolved" i],
#app button[data-cy*="resolve" i],
#app button[aria-label*="resolver" i],
#app button[aria-label*="resolve" i],
#app button[title*="resolver" i],
#app button[title*="resolve" i],
#app a[data-testid*="resolve" i],
#app a[data-cy*="resolve" i],
#app a[aria-label*="resolver" i],
#app a[title*="resolver" i] {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

#app button[data-testid*="resolve" i]:hover,
#app button[data-cy*="resolve" i]:hover,
#app button[aria-label*="resolver" i]:hover,
#app button[title*="resolver" i]:hover,
#app a[data-testid*="resolve" i]:hover,
#app a[data-cy*="resolve" i]:hover,
#app a[aria-label*="resolver" i]:hover,
#app a[title*="resolver" i]:hover {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
}

#app button[data-testid*="resolve" i] *,
#app button[data-cy*="resolve" i] *,
#app button[aria-label*="resolver" i] *,
#app button[title*="resolver" i] *,
#app a[data-testid*="resolve" i] *,
#app a[data-cy*="resolve" i] * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}


/* ===========================================
 * LOGOS — TAMANHO GERAL (APP TODO)
 * =========================================== */

/* Logos principais v3 */
img[src="/brand-assets/logo.v3.png"],
img[src="/brand-assets/logo-dark.v3.png"] {
  max-width: 220px !important;
  max-height: 80px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Logo quadrada padrão (ícones) */
img[src="/brand-assets/logo-square.png"] {
  max-width: 18px !important;
  max-height: 18px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Evitar logo como background (duplica) — apenas no LOGIN */
.login__logo,
.login__header .logo {
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}


/* ===========================================
 * LOGIN — GARANTIR UMA ÚNICA LOGO
 * =========================================== */

/* No login, some com a quadrada (apenas no cabeçalho de login) */
body.text-slate-600 .login__header img[src="/brand-assets/logo-square.png"] {
  display: none !important;
}

/* Primeiro, zera exibição das duas horizontais no login */
body.text-slate-600 img[src="/brand-assets/logo.v3.png"],
body.text-slate-600 img[src="/brand-assets/logo-dark.v3.png"] {
  display: none !important;
  margin: 0 auto 10px auto !important;
}

/* Tema claro: só logo.v3.png aparece */
html:not(.dark) body.text-slate-600 img[src="/brand-assets/logo.v3.png"] {
  display: block !important;
}

/* Tema escuro: só logo-dark.v3.png aparece */
html.dark body.text-slate-600 img[src="/brand-assets/logo-dark.v3.png"] {
  display: block !important;
}


/* ===========================================
 * SIDEBAR — Usa só logo quadrada
 * =========================================== */

.sidebar-brand img[src="/brand-assets/logo.v3.png"],
.sidebar__brand img[src="/brand-assets/logo.v3.png"] {
  display: none !important;
}

.sidebar-brand img[src="/brand-assets/logo-square.png"],
.sidebar__brand img[src="/brand-assets/logo-square.png"] {
  display: inline-block !important;
}


/* Garantir que containers de LOGIN não usem background com logo (pra não duplicar) */
.login__logo,
.login__header .logo {
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}