/* ============================================================
   Custom CSS — Verbo Hub white-label do Chatwoot
   Cole isso em: /super_admin → Custom Branding → Custom CSS

   Paleta oficial (brand book Verbo Hub):
   - Preto Verbo      #0E1012   base / fundos escuros
   - Verde Profundo   #004146   identidade da marca
   - Verde Médio      #016076   suporte / bordas
   - Teal Elétrico    #03BFB5   ACENTO PRINCIPAL / CTAs
   - Cinza Petronas   #949398   textos secundários
   - Off-White        #F5F3EE   fundo claro
   ============================================================ */

:root {
  --vh-preto: #0E1012;
  --vh-verde-profundo: #004146;
  --vh-verde-medio: #016076;
  --vh-teal: #03BFB5;          /* acento principal — CTAs */
  --vh-teal-hover: #029f96;
  --vh-teal-light: #4DD9D0;
  --vh-cinza: #949398;
  --vh-offwhite: #F5F3EE;
  --vh-text-on-teal: #ffffff;
}

/* ----- Botões e ações primárias ----- */
.button.primary,
.button.button--primary,
.btn-primary,
button[type="submit"]:not(.danger),
.app-tab.active::after,
.tab-pane.active,
.sidebar-toggle--button,
[data-test="submit-button"] {
  background-color: var(--vh-teal) !important;
  border-color: var(--vh-teal) !important;
  color: var(--vh-text-on-teal) !important;
}

.button.primary:hover,
.btn-primary:hover,
button[type="submit"]:not(.danger):hover {
  background-color: var(--vh-teal-hover) !important;
  border-color: var(--vh-teal-hover) !important;
}

/* ----- Links e textos de acento ----- */
a,
.text-primary,
.conversation--unread-count,
.message-bubble__sender {
  color: var(--vh-teal) !important;
}

a:hover {
  color: var(--vh-teal-hover) !important;
}

/* ----- Badges de notificação / não lido ----- */
.conversation--unread-count,
.badge--primary,
.unread-indicator {
  background-color: var(--vh-teal) !important;
  color: var(--vh-text-on-teal) !important;
}

/* ----- Sidebar (claro) ----- */
.app-sidebar {
  background-color: var(--vh-offwhite);
  border-right: 1px solid rgba(14,16,18,0.08);
}

.app-sidebar .secondary-sidebar {
  background-color: #ffffff;
}

/* ----- Tema escuro: usar Preto Verbo ----- */
[data-theme="dark"] {
  --color-background: var(--vh-preto);
  --color-background-light: #1a1c1f;
}

[data-theme="dark"] .app-sidebar {
  background-color: var(--vh-preto);
  border-right: 1px solid rgba(255,255,255,0.06);
}

/* ----- Login screen ----- */
.login-page,
.auth-page,
.signup-page {
  background: linear-gradient(135deg, var(--vh-preto) 0%, var(--vh-verde-profundo) 60%, var(--vh-verde-medio) 100%);
}

.login-page .form-wrap,
.auth-page .form-wrap {
  background-color: var(--vh-offwhite);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(3, 191, 181, 0.15);
}

/* ----- Esconder "Powered by Chatwoot" e branding interno ----- */
.branding,
.branding--link,
[data-test="powered-by"],
.app-sidebar__footer .footer-link[href*="chatwoot"] {
  display: none !important;
}

/* ----- Tipografia (quando Surgena/Geist Mono não estiverem disponíveis) ----- */
body, .app-wrapper {
  font-family: "Surgena", "Inter", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

code, pre, .conversation--metadata {
  font-family: "Geist Mono", "JetBrains Mono", "SF Mono", Consolas, monospace;
}

/* ----- Logo no header (override fino caso env var não cubra) ----- */
.app-sidebar .logo img,
.sidebar-header .logo img,
.public-page__logo img {
  max-height: 32px;
  width: auto;
}

/* ----- Cor do scrollbar ----- */
::-webkit-scrollbar-thumb {
  background-color: var(--vh-teal-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--vh-teal);
}

/* ----- Inputs em foco ----- */
input:focus,
textarea:focus,
select:focus,
.multiselect--active {
  border-color: var(--vh-teal) !important;
  box-shadow: 0 0 0 3px rgba(3, 191, 181, 0.18) !important;
}