/*
 * ZapsChat — Base Visual Oficial
 * Etapa 1 / 2026-09-07
 *
 * Objetivo desta camada:
 * - uma única tipografia (Inter)
 * - cores oficiais e semânticas
 * - fundos, superfícies, bordas e sombras consistentes
 * - botões, campos, badges e dropdowns com o mesmo padrão
 * - escala única de espaçamento, raios e tamanhos
 *
 * IMPORTANTE:
 * Este arquivo deve ser carregado por ÚLTIMO nas telas internas.
 * Ele não redesenha a arquitetura das páginas; apenas normaliza a base visual.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* =========================================================
   1. DESIGN TOKENS — LIGHT
   ========================================================= */
html:root {
  color-scheme: light;

  /* Tipografia */
  --zc-font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --zc-font-xs: 12px;
  --zc-font-sm: 13px;
  --zc-font-base: 14px;
  --zc-font-md: 15px;
  --zc-font-lg: 18px;
  --zc-font-xl: 22px;
  --zc-font-2xl: 28px;
  --zc-line-height: 1.5;

  /* Espaçamento */
  --zc-space-1: 4px;
  --zc-space-2: 8px;
  --zc-space-3: 12px;
  --zc-space-4: 16px;
  --zc-space-5: 20px;
  --zc-space-6: 24px;
  --zc-space-8: 32px;
  --zc-space-10: 40px;
  --zc-space-12: 48px;

  /* Tamanhos de controles */
  --zc-control-sm: 34px;
  --zc-control-md: 40px;
  --zc-control-lg: 44px;

  /* Raios */
  --zc-radius-xs: 6px;
  --zc-radius-sm: 8px;
  --zc-radius-md: 10px;
  --zc-radius-lg: 12px;
  --zc-radius-xl: 16px;
  --zc-radius-pill: 999px;

  /* Base neutra */
  --zc-bg-main: #F7F8F8;
  --zc-bg-subtle: #F3F5F5;
  --zc-panel: #FFFFFF;
  --zc-card: #FFFFFF;
  --zc-field: #FFFFFF;
  --zc-hover-bg: #F1F3F4;
  --zc-selected-bg: #EAF7F4;

  --zc-border-official: #E6E9EC;
  --zc-border-strong: #D7DCE0;

  --zc-text-main: #18181B;
  --zc-text-secondary: #5F6670;
  --zc-text-muted: #7A828C;
  --zc-text-disabled: #A0A6AD;

  /* Marca */
  --zc-primary: #00A884;
  --zc-primary-hover: #008F72;
  --zc-primary-active: #007A62;
  --zc-primary-soft: #E7F7F3;
  --zc-primary-line: #B9E6DB;
  --zc-primary-contrast: #FFFFFF;

  /* Semânticas */
  --zc-success: #168A67;
  --zc-success-soft: #EAF7F2;
  --zc-warning: #B7791F;
  --zc-warning-soft: #FFF7E8;
  --zc-danger-official: #D92D20;
  --zc-danger-hover: #B42318;
  --zc-danger-soft-official: #FEF0EE;
  --zc-info: #3578C6;
  --zc-info-soft: #EDF5FF;

  /* Sombras — discretas por padrão */
  --zc-shadow-none: none;
  --zc-shadow-xs: 0 1px 2px rgba(16, 24, 40, .035);
  --zc-shadow-sm: 0 4px 14px rgba(16, 24, 40, .045);
  --zc-shadow-md: 0 10px 28px rgba(16, 24, 40, .075);
  --zc-shadow-lg: 0 20px 56px rgba(16, 24, 40, .13);

  /* Foco e transição */
  --zc-focus-ring: 0 0 0 3px rgba(0, 168, 132, .14);
  --zc-transition: .16s ease;

  /* -----------------------------------------------------
     Pontes de compatibilidade com estilos antigos
     ----------------------------------------------------- */
  --font-ui: var(--zc-font-family);
  --font-sans: var(--zc-font-family);

  --bg: var(--zc-bg-main);
  --bg-soft: var(--zc-bg-subtle);
  --page-bg: var(--zc-bg-main);
  --panel: var(--zc-panel);
  --panel-2: var(--zc-card);
  --panel-3: var(--zc-bg-subtle);
  --surface: var(--zc-panel);
  --surface-2: var(--zc-bg-subtle);
  --surface-hover: var(--zc-hover-bg);
  --card: var(--zc-card);
  --card-2: var(--zc-card);
  --card2: var(--zc-bg-subtle);
  --card-bg: var(--zc-card);
  --input-bg: var(--zc-field);
  --search-bg: var(--zc-bg-subtle);
  --hover: var(--zc-hover-bg);
  --hover-strong: var(--zc-hover-bg);
  --border: var(--zc-border-official);
  --border-2: var(--zc-border-strong);
  --border-color: var(--zc-border-official);
  --border-hover: var(--zc-border-strong);

  --fg: var(--zc-text-main);
  --text: var(--zc-text-main);
  --text-2: var(--zc-text-secondary);
  --text-main: var(--zc-text-main);
  --text-primary: var(--zc-text-main);
  --text-soft: var(--zc-text-secondary);
  --text-secondary: var(--zc-text-secondary);
  --muted: var(--zc-text-muted);
  --muted-soft: var(--zc-text-disabled);

  --primary: var(--zc-primary);
  --primary-hover: var(--zc-primary-hover);
  --brand: var(--zc-primary);
  --brand-primary: var(--zc-primary);
  --brand-secondary: var(--zc-primary-active);
  --brand-hover: var(--zc-primary-hover);
  --brand-dark: var(--zc-primary-active);
  --brand-soft: var(--zc-primary-soft);
  --primary-color: var(--zc-primary);
  --accent: var(--zc-primary);
  --ring: rgba(0, 168, 132, .28);
  --ok: var(--zc-success);
  --success: var(--zc-success);
  --success-soft: var(--zc-success-soft);
  --danger: var(--zc-danger-official);
  --danger-hover: var(--zc-danger-hover);
  --danger-soft: var(--zc-danger-soft-official);
  --warning: var(--zc-warning);
  --warn: var(--zc-warning);
  --warning-soft: var(--zc-warning-soft);
  --info: var(--zc-info);

  --radius: var(--zc-radius-lg);
  --radius-sm: var(--zc-radius-md);
  --radius-xs: var(--zc-radius-sm);
  --shadow: var(--zc-shadow-md);
  --shadow-soft: var(--zc-shadow-sm);
  --shadow-soft-2: var(--zc-shadow-xs);
  --soft-hover: var(--zc-hover-bg);
  --scroll-track: var(--zc-bg-main);
  --scroll-thumb: var(--zc-border-strong);

  /* APP/legado Valora dentro do projeto */
  --navy: var(--zc-panel);
  --navy-dark: var(--zc-bg-main);
  --navy-soft: var(--zc-bg-subtle);

  /* Dashboard */
  --dash-bg: var(--zc-bg-main);
  --dash-card: var(--zc-panel);
  --dash-card-soft: var(--zc-bg-subtle);
  --dash-border: var(--zc-border-official);
  --dash-border-strong: var(--zc-border-strong);
  --dash-text: var(--zc-text-main);
  --dash-title: var(--zc-text-main);
  --dash-muted: var(--zc-text-secondary);
  --dash-soft: var(--zc-text-disabled);
  --dash-hover: var(--zc-hover-bg);
  --dash-primary: var(--zc-primary);
  --dash-primary-soft: var(--zc-primary-soft);
  --dash-purple: var(--zc-primary);
  --dash-purple-soft: var(--zc-primary-soft);
  --dash-green: var(--zc-primary);
  --dash-green-soft: var(--zc-primary-soft);
  --dash-shadow: var(--zc-shadow-sm);
  --dash-shadow-sm: var(--zc-shadow-xs);
  --dash-radius: var(--zc-radius-lg);
  --dash-font: var(--zc-font-family);

  /* Clientes */
  --clients-primary: var(--zc-primary);
  --clients-primary-hover: var(--zc-primary-hover);
  --clients-primary-soft: var(--zc-primary-soft);
  --clients-bg: var(--zc-bg-main);
  --clients-surface: var(--zc-panel);
  --clients-surface-2: var(--zc-bg-subtle);
  --clients-line: var(--zc-border-official);
  --clients-title: var(--zc-text-main);
  --clients-text: var(--zc-text-secondary);
  --clients-muted: var(--zc-text-muted);
  --clients-soft: var(--zc-text-disabled);
  --clients-hover: var(--zc-hover-bg);
  --clients-danger: var(--zc-danger-official);
  --clients-shadow: var(--zc-shadow-sm);
  --clients-modal-shadow: var(--zc-shadow-lg);

  /* Famílias zc usadas por Chatbot, Configurações, Mídias e Disparos */
  --zc-bg: var(--zc-bg-main);
  --zc-page-bg: var(--zc-bg-main);
  --zc-surface: var(--zc-panel);
  --zc-surface-2: var(--zc-bg-subtle);
  --zc-surface-3: var(--zc-bg-subtle);
  --zc-surface-hover: var(--zc-hover-bg);
  --zc-hover: var(--zc-hover-bg);
  --zc-border: var(--zc-border-official);
  --zc-border-2: var(--zc-border-strong);
  --zc-border-color: var(--zc-border-official);
  --zc-title: var(--zc-text-main);
  --zc-text: var(--zc-text-main);
  --zc-text-color: var(--zc-text-main);
  --zc-muted: var(--zc-text-secondary);
  --zc-muted-color: var(--zc-text-secondary);
  --zc-soft: var(--zc-text-disabled);
  --zc-brand: var(--zc-primary);
  --zc-brand-2: var(--zc-primary-hover);
  --zc-brand-hover: var(--zc-primary-hover);
  --zc-brand-soft: var(--zc-primary-soft);
  --zc-brand-line: var(--zc-primary-line);
  --zc-green: var(--zc-primary);
  --zc-green-soft: var(--zc-primary-soft);
  --zc-blue: var(--zc-info);
  --zc-blue-soft: var(--zc-info-soft);
  --zc-amber: var(--zc-warning);
  --zc-amber-soft: var(--zc-warning-soft);
  --zc-danger: var(--zc-danger-official);
  --zc-danger-soft: var(--zc-danger-soft-official);
  --zc-shadow: var(--zc-shadow-md);
  --zc-radius: var(--zc-radius-lg);
  --zc-font: var(--zc-font-family);

  /* Departamentos */
  --dept-font: var(--zc-font-family);
  --dept-bg: var(--zc-bg-main);
  --dept-bg-2: var(--zc-bg-subtle);
  --dept-surface: var(--zc-panel);
  --dept-surface-2: var(--zc-bg-subtle);
  --dept-text: var(--zc-text-main);
  --dept-title: var(--zc-text-main);
  --dept-muted: var(--zc-text-secondary);
  --dept-soft: var(--zc-text-disabled);
  --dept-border: var(--zc-border-official);
  --dept-border-2: var(--zc-border-official);
  --dept-brand: var(--zc-primary);
  --dept-brand-2: var(--zc-primary-hover);
  --dept-brand-soft: var(--zc-primary-soft);
  --dept-blue: var(--zc-info);
  --dept-blue-soft: var(--zc-info-soft);
  --dept-danger: var(--zc-danger-official);
  --dept-shadow: var(--zc-shadow-md);
  --dept-shadow-soft: var(--zc-shadow-sm);
  --dept-radius: var(--zc-radius-lg);

  /* Chat interno */
  --ci-app-bg: var(--zc-bg-main);
  --ci-shell: var(--zc-panel);
  --ci-surface: var(--zc-panel);
  --ci-soft: var(--zc-bg-subtle);
  --ci-soft-2: var(--zc-hover-bg);
  --ci-border: var(--zc-border-official);
  --ci-border-2: var(--zc-border-strong);
  --ci-text: var(--zc-text-main);
  --ci-title: var(--zc-text-main);
  --ci-muted: var(--zc-text-secondary);
  --ci-faint: var(--zc-text-disabled);
  --ci-brand: var(--zc-primary);
  --ci-brand-2: var(--zc-primary-hover);
  --ci-brand-soft: var(--zc-primary-soft);
  --ci-danger: var(--zc-danger-official);
  --ci-radius: var(--zc-radius-lg);
  --ci-shadow: var(--zc-shadow-md);
  --ci-shadow-sm: var(--zc-shadow-sm);

  /* Colaboradores */
  --colab-bg: var(--zc-bg-main);
  --colab-card: var(--zc-panel);
  --colab-card-2: var(--zc-bg-subtle);
  --colab-card-3: var(--zc-hover-bg);
  --colab-text: var(--zc-text-main);
  --colab-muted: var(--zc-text-secondary);
  --colab-muted-2: var(--zc-text-disabled);
  --colab-brand: var(--zc-primary);
  --colab-brand-2: var(--zc-primary-hover);
  --colab-brand-dark: var(--zc-primary-active);
  --colab-brand-soft: var(--zc-primary-soft);
  --colab-brand-soft-2: var(--zc-primary-soft);
  --colab-primary: var(--zc-primary);
  --colab-primary-hover: var(--zc-primary-hover);
  --colab-danger: var(--zc-danger-official);
  --colab-danger-soft: var(--zc-danger-soft-official);

  /* Perfil */
  --pf-bg: var(--zc-bg-main);
  --pf-card: var(--zc-panel);
  --pf-card-soft: var(--zc-bg-subtle);
  --pf-input: var(--zc-field);
  --pf-text: var(--zc-text-main);
  --pf-muted: var(--zc-text-secondary);
  --pf-border: var(--zc-border-official);
  --pf-border-strong: var(--zc-border-strong);
  --pf-primary: var(--zc-primary);
  --pf-primary-hover: var(--zc-primary-hover);
  --pf-primary-soft: var(--zc-primary-soft);
  --pf-success: var(--zc-success);
  --pf-warning: var(--zc-warning);
  --pf-danger: var(--zc-danger-official);
  --pf-shadow: var(--zc-shadow-sm);
  --pf-radius: var(--zc-radius-lg);
  --pf-font: var(--zc-font-family);

  /* Sidebar — somente cores/tipografia nesta etapa */
  --zc-active: var(--zc-text-main);
  --zc-active-bg: var(--zc-primary-soft);
  --zc-dropdown-bg: var(--zc-panel);
  --zc-mobile-bg: rgba(255, 255, 255, .94);
  --zc-danger-bg: var(--zc-danger-soft-official);
  --zc-sidebar-font: var(--zc-font-family);

  /* Tailwind/legado: azul/índigo/roxo de marca migram para verde */
  --color-blue-50: #EAF8F5;
  --color-blue-100: #D6F2EB;
  --color-blue-400: #00BC96;
  --color-blue-500: #00A884;
  --color-blue-600: #008F72;
  --color-blue-700: #007A62;
  --color-blue-800: #006B56;
  --color-blue-900: #005C4B;
  --color-indigo-50: #EAF8F5;
  --color-indigo-100: #D6F2EB;
  --color-indigo-400: #00BC96;
  --color-indigo-500: #00A884;
  --color-indigo-600: #008F72;
  --color-indigo-700: #007A62;
  --color-purple-50: #EAF8F5;
  --color-purple-100: #D6F2EB;
  --color-purple-400: #00BC96;
  --color-purple-500: #00A884;
  --color-purple-600: #008F72;
  --color-purple-700: #007A62;
}

/* =========================================================
   2. DESIGN TOKENS — DARK
   ========================================================= */
html:root.dark,
html:root[data-theme="dark"] {
  color-scheme: dark;

  /* ChatGPT-like: fundo realmente escuro, superfícies neutras e sem azul/roxo decorativo. */
  --zc-bg-main: #000000;
  --zc-bg-subtle: #0D0D0D;
  --zc-panel: #111111;
  --zc-card: #111111;
  --zc-field: #212121;
  --zc-hover-bg: #1D1D1D;
  --zc-selected-bg: #12221D;

  --zc-border-official: #242424;
  --zc-border-strong: #303030;

  --zc-text-main: #F2F2F2;
  --zc-text-secondary: #B4B4B4;
  --zc-text-muted: #8E8E8E;
  --zc-text-disabled: #686868;

  /* O verde continua sendo a assinatura do ZapsChat, mas só em ação/status. */
  --zc-primary: #00A884;
  --zc-primary-hover: #0BB795;
  --zc-primary-active: #008F72;
  --zc-primary-soft: rgba(0, 168, 132, .14);
  --zc-primary-line: rgba(0, 168, 132, .30);

  --zc-success: #48C9A7;
  --zc-success-soft: rgba(72, 201, 167, .12);
  --zc-warning: #E7B15A;
  --zc-warning-soft: rgba(231, 177, 90, .12);
  --zc-danger-official: #F06A61;
  --zc-danger-hover: #FF7D74;
  --zc-danger-soft-official: rgba(240, 106, 97, .12);
  --zc-info: #9DB7D8;
  --zc-info-soft: rgba(157, 183, 216, .11);

  /* Superfícies comuns ficam praticamente sem sombra; elevação só em popovers/modais. */
  --zc-shadow-xs: none;
  --zc-shadow-sm: none;
  --zc-shadow-md: 0 8px 24px rgba(0, 0, 0, .30);
  --zc-shadow-lg: 0 16px 48px rgba(0, 0, 0, .42);
  --zc-focus-ring: 0 0 0 3px rgba(0, 168, 132, .18);

  --zc-mobile-bg: rgba(0, 0, 0, .96);
}

/* =========================================================
   3. TIPOGRAFIA GLOBAL
   ========================================================= */
html,
body,
button,
input,
select,
textarea {
  font-family: var(--zc-font-family) !important;
}

body {
  background-color: var(--zc-bg-main);
  color: var(--zc-text-main);
  font-size: var(--zc-font-base);
  line-height: var(--zc-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4, h5, h6) {
  color: var(--zc-text-main);
  font-family: var(--zc-font-family);
}

:where(p, label, td, th, li, span, small) {
  font-family: inherit;
}

/* =========================================================
   4. SUPERFÍCIES, BORDAS E SOMBRAS
   ========================================================= */
:where(.card, .box, .section-card, .panel-card, .metric-card, .profile-card, .side-card) {
  border-color: var(--zc-border-official);
}

:where(.dropdown, .popover, .menu-popover, .zc-user-dropdown, .zc-inst-dropdown) {
  background-color: var(--zc-panel);
  border-color: var(--zc-border-official);
  border-radius: var(--zc-radius-lg);
  box-shadow: var(--zc-shadow-md);
}

:where(.modal-content, .modal-card, .dialog, [role="dialog"]) {
  border-color: var(--zc-border-official);
}

/* Sombras pesadas antigas viram superfícies mais discretas em componentes genéricos. */
:where(.card, .box, .panel-card, .section-card):not(.message):not(.bubble):not(.whatsapp-preview) {
  box-shadow: var(--zc-shadow-xs);
}

/* =========================================================
   5. CAMPOS
   ========================================================= */
:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .input,
  .select,
  .form-control
) {
  color: var(--zc-text-main);
  border-color: var(--zc-border-official);
  caret-color: var(--zc-primary);
  transition: border-color var(--zc-transition), box-shadow var(--zc-transition), background-color var(--zc-transition);
}

:where(.input, .select, .form-control) {
  min-height: var(--zc-control-md);
  padding: 9px 12px;
  border-radius: var(--zc-radius-md);
  background-color: var(--zc-field);
  font-size: var(--zc-font-base);
}

:where(input, textarea)::placeholder {
  color: var(--zc-text-disabled);
  opacity: 1;
}

:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .input,
  .select,
  .form-control
):focus-visible {
  outline: 0;
  border-color: var(--zc-primary);
  box-shadow: var(--zc-focus-ring);
}

:where(input, select, textarea, button):disabled,
:where(.disabled, [aria-disabled="true"]) {
  opacity: .58;
  cursor: not-allowed;
}

/* =========================================================
   6. BOTÕES
   ========================================================= */
:where(.btn, .button, [class^="btn-"], [class*=" btn-"]) {
  font-family: var(--zc-font-family);
}

.btn {
  min-height: var(--zc-control-md);
  padding: 0 14px;
  border-radius: var(--zc-radius-md);
  border: 1px solid var(--zc-border-official);
  background: var(--zc-panel);
  color: var(--zc-text-main);
  font-size: var(--zc-font-sm);
  font-weight: 600;
  line-height: 1;
  gap: 8px;
  box-shadow: none;
  transition: background-color var(--zc-transition), border-color var(--zc-transition), color var(--zc-transition), transform .08s ease;
}

.btn:hover:not(:disabled) {
  background: var(--zc-hover-bg);
  border-color: var(--zc-border-strong);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

:where(
  .btn-primary, .button-primary, .primary-button, .btn--primary,
  button.primary, button[data-variant="primary"],
  [class*="btn-primary"], [class*="button-primary"]
) {
  background: var(--zc-primary) !important;
  background-image: none !important;
  border-color: var(--zc-primary) !important;
  color: var(--zc-primary-contrast) !important;
  box-shadow: none !important;
}

:where(
  .btn-primary, .button-primary, .primary-button, .btn--primary,
  button.primary, button[data-variant="primary"],
  [class*="btn-primary"], [class*="button-primary"]
):hover:not(:disabled) {
  background: var(--zc-primary-hover) !important;
  border-color: var(--zc-primary-hover) !important;
}

:where(.btn-secondary, .btn-outline, .btn--outline) {
  background: var(--zc-panel) !important;
  color: var(--zc-text-main) !important;
  border-color: var(--zc-border-official) !important;
  background-image: none !important;
  box-shadow: none !important;
}

:where(.btn-secondary, .btn-outline, .btn--outline):hover:not(:disabled) {
  background: var(--zc-hover-bg) !important;
  border-color: var(--zc-border-strong) !important;
}

:where(.btn-soft, .btn-quiet) {
  background: var(--zc-primary-soft) !important;
  color: var(--zc-primary-active) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

:where(.btn-ghost, .btn-text, .btn-link) {
  background: transparent !important;
  color: var(--zc-text-secondary) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

:where(.btn-ghost, .btn-text, .btn-link):hover:not(:disabled) {
  background: var(--zc-hover-bg) !important;
  color: var(--zc-text-main) !important;
}

:where(
  .btn-danger, .button-danger, .danger-button, .btn--danger,
  .delete-button, .btn-delete, .remove-button,
  button[data-variant="danger"], [data-action="delete"], [data-action="remove"]
) {
  background: var(--zc-danger-official) !important;
  background-image: none !important;
  border-color: var(--zc-danger-official) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

:where(.btn-danger-soft, .btn--ghost-danger, .profile-btn--ghost-danger) {
  background: var(--zc-danger-soft-official) !important;
  color: var(--zc-danger-official) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

:where(.btn-sm) {
  min-height: var(--zc-control-sm);
  padding-inline: 11px;
  font-size: var(--zc-font-xs);
}

:where(.btn-lg) {
  min-height: var(--zc-control-lg);
  padding-inline: 17px;
  font-size: var(--zc-font-base);
}

/* =========================================================
   7. BADGES, PILLS E CHIPS
   ========================================================= */
:where(
  .badge, .soft-badge, .title-badge, .queue-badge, .user-badge,
  .metric-badge, .panel-badge, .trial-badge,
  .pill, .chip, .status-pill, .cliente-status-pill,
  .fornecedor-status-pill, .produto-status-pill, .patrimonio-status-pill
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: var(--zc-radius-pill);
  border: 1px solid var(--zc-border-official);
  background: var(--zc-bg-subtle);
  color: var(--zc-text-secondary);
  font-size: var(--zc-font-xs);
  font-weight: 600;
  line-height: 1.2;
  box-shadow: none;
}

:where(.soft-badge-green, .badge-success, .status-success, .is-success) {
  background: var(--zc-success-soft);
  color: var(--zc-success);
  border-color: transparent;
}

:where(.badge-danger, .status-danger, .is-danger) {
  background: var(--zc-danger-soft-official);
  color: var(--zc-danger-official);
  border-color: transparent;
}

:where(.badge-warning, .status-warning, .is-warning) {
  background: var(--zc-warning-soft);
  color: var(--zc-warning);
  border-color: transparent;
}

/* =========================================================
   8. DROPDOWNS / MENUS
   ========================================================= */
:where(.dropdown-item, .zc-dropdown-item, [role="menuitem"], [role="option"]) {
  border-radius: var(--zc-radius-sm);
  transition: background-color var(--zc-transition), color var(--zc-transition);
}

:where(.dropdown-item, .zc-dropdown-item, [role="menuitem"], [role="option"]):hover {
  background-color: var(--zc-hover-bg);
}

:where(.dropdown-divider, .zc-dropdown-divider) {
  border-color: var(--zc-border-official);
  background-color: var(--zc-border-official);
}

/* =========================================================
   9. LINKS, FOCO E ESTADOS
   ========================================================= */
:where(a.link, .link, .text-link, [class*="link-primary"]) {
  color: var(--zc-primary);
}

:where(button, a, [tabindex]):focus-visible {
  outline: 2px solid var(--zc-primary);
  outline-offset: 2px;
}

/* Item ativo de navegação: verde discreto, sem roxo/azul de marca. */
:where(nav a.active, nav a[aria-current="page"], .nav-item.active, .menu-item.active) {
  background-color: var(--zc-primary-soft);
  color: var(--zc-text-main);
  border-color: var(--zc-primary-line);
  background-image: none;
}

/* =========================================================
   10. LIMPEZA DE GRADIENTES DECORATIVOS DE COMPONENTES BASE
   ========================================================= */
:where(
  .btn, .button,
  .topbar, .page-header, .section-header,
  .dropdown, .popover
):not(.whatsapp-preview):not(.chat-preview):not(.loader):not(.skeleton) {
  background-image: none !important;
}

/* Classes antigas de marca azul/roxa passam para o verde oficial.
   Cores semânticas de gráficos/alertas continuam preservadas. */
:where(
  .text-indigo, .text-purple, .text-violet,
  [class*="text-indigo-"], [class*="text-purple-"], [class*="text-violet-"]
) {
  color: var(--zc-primary) !important;
}

:where(
  .bg-indigo, .bg-purple, .bg-violet,
  [class*="bg-indigo-"], [class*="bg-purple-"], [class*="bg-violet-"]
) {
  background-color: var(--zc-primary-soft) !important;
  background-image: none !important;
}

:where(
  .border-indigo, .border-purple, .border-violet,
  [class*="border-indigo-"], [class*="border-purple-"], [class*="border-violet-"]
) {
  border-color: var(--zc-primary) !important;
}

/* =========================================================
   11. DARK — ChatGPT-like
   ========================================================= */
html:root.dark,
html:root[data-theme="dark"] {
  scrollbar-color: #303030 #000000;
}

html:root.dark body,
html:root[data-theme="dark"] body,
html:root.dark :where(.main, main, .page, .page-content, .content, .app-content),
html:root[data-theme="dark"] :where(.main, main, .page, .page-content, .content, .app-content) {
  background-color: var(--zc-bg-main);
  color: var(--zc-text-main);
}

/* Cards e painéis: contraste por superfície/borda, não por sombra. */
html:root.dark :where(.card, .box, .panel-card, .section-card, .metric-card, .profile-card, .side-card),
html:root[data-theme="dark"] :where(.card, .box, .panel-card, .section-card, .metric-card, .profile-card, .side-card) {
  background-color: var(--zc-card);
  border-color: var(--zc-border-official);
  box-shadow: none !important;
}

/* Inputs no mesmo cinza do campo principal do ChatGPT. */
html:root.dark :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .input,
  .select,
  .form-control,
  .search-input,
  .search-box
),
html:root[data-theme="dark"] :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .input,
  .select,
  .form-control,
  .search-input,
  .search-box
) {
  background-color: var(--zc-field);
  color: var(--zc-text-main);
  border-color: var(--zc-border-official);
  box-shadow: none;
}

html:root.dark :where(input, textarea)::placeholder,
html:root[data-theme="dark"] :where(input, textarea)::placeholder {
  color: var(--zc-text-muted);
}

html:root.dark select option,
html:root[data-theme="dark"] select option {
  background: var(--zc-panel);
  color: var(--zc-text-main);
}

/* Botões neutros não parecem CTA. Verde fica reservado para ações primárias. */
html:root.dark .btn,
html:root[data-theme="dark"] .btn {
  background: var(--zc-panel);
  color: var(--zc-text-main);
  border-color: var(--zc-border-official);
  box-shadow: none;
}

html:root.dark .btn:hover:not(:disabled),
html:root[data-theme="dark"] .btn:hover:not(:disabled) {
  background: var(--zc-hover-bg);
  border-color: var(--zc-border-strong);
}

html:root.dark :where(.btn-soft, .btn-quiet),
html:root[data-theme="dark"] :where(.btn-soft, .btn-quiet) {
  background: var(--zc-primary-soft) !important;
  color: #6FE0C1 !important;
}

/* Menus e modais usam 1 nível de elevação, sem efeito glass. */
html:root.dark :where(.dropdown, .popover, .menu-popover, .zc-user-dropdown, .zc-inst-dropdown),
html:root[data-theme="dark"] :where(.dropdown, .popover, .menu-popover, .zc-user-dropdown, .zc-inst-dropdown) {
  background-color: var(--zc-panel);
  border-color: var(--zc-border-official);
  box-shadow: var(--zc-shadow-md);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html:root.dark :where(.modal-content, .modal-card, .dialog),
html:root[data-theme="dark"] :where(.modal-content, .modal-card, .dialog) {
  background-color: var(--zc-panel);
  color: var(--zc-text-main);
  border-color: var(--zc-border-official);
  box-shadow: var(--zc-shadow-lg);
}

/* Tabelas: cabeçalho discreto e linhas quase invisíveis. */
html:root.dark table,
html:root[data-theme="dark"] table {
  color: var(--zc-text-main);
  background: transparent;
}

html:root.dark thead,
html:root[data-theme="dark"] thead {
  background: var(--zc-bg-subtle);
}

html:root.dark :where(th, td),
html:root[data-theme="dark"] :where(th, td) {
  border-color: var(--zc-border-official);
}

html:root.dark tbody tr:hover,
html:root[data-theme="dark"] tbody tr:hover {
  background: var(--zc-hover-bg);
}

html:root.dark hr,
html:root[data-theme="dark"] hr {
  border-color: var(--zc-border-official);
}

html:root.dark ::selection,
html:root[data-theme="dark"] ::selection {
  background: rgba(0, 168, 132, .30);
  color: #FFFFFF;
}

html:root.dark ::-webkit-scrollbar-track,
html:root[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #000000;
}

html:root.dark ::-webkit-scrollbar-thumb,
html:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #303030;
  border-color: #000000;
}

html:root.dark ::-webkit-scrollbar-thumb:hover,
html:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #3A3A3A;
}

/* =========================================================
   12. MOBILE — só escala base, sem redesign de layout
   ========================================================= */
@media (max-width: 768px) {
  html:root {
    --zc-font-base: 14px;
    --zc-control-md: 42px;
    --zc-control-lg: 46px;
  }

  .btn {
    min-height: var(--zc-control-md);
  }
}

/* =========================================================
   13. CONSISTÊNCIA DARK POR TELA — CHATGPT / ZAPSCHAT
   Corrige módulos legados que ainda declaravam um tema próprio.
   Mantém o verde apenas para ações e status.
   ========================================================= */

/* ---------- COLABORADORES / EQUIPE ---------- */
html:root.dark body.colab-midias-match[data-page="colaboradores"],
html:root[data-theme="dark"] body.colab-midias-match[data-page="colaboradores"] {
  --colab-bg: var(--zc-bg-main) !important;
  --colab-page: var(--zc-bg-main) !important;
  --colab-card: var(--zc-panel) !important;
  --colab-card-2: var(--zc-bg-subtle) !important;
  --colab-card-3: var(--zc-hover-bg) !important;
  --colab-line: var(--zc-border-official) !important;
  --colab-line-2: var(--zc-border-strong) !important;
  --colab-text: var(--zc-text-main) !important;
  --colab-title: var(--zc-text-main) !important;
  --colab-muted: var(--zc-text-secondary) !important;
  --colab-muted-2: var(--zc-text-muted) !important;
  --colab-brand: var(--zc-primary) !important;
  --colab-brand-2: var(--zc-primary-hover) !important;
  --colab-brand-dark: var(--zc-primary) !important;
  --colab-brand-soft: var(--zc-primary-soft) !important;
  --colab-brand-soft-2: var(--zc-primary-soft) !important;
  --colab-primary: var(--zc-primary) !important;
  --colab-primary-hover: var(--zc-primary-hover) !important;
  --colab-danger: var(--zc-danger-official) !important;
  --colab-danger-soft: var(--zc-danger-soft-official) !important;
  --colab-warn: var(--zc-warning) !important;
  --colab-warn-soft: var(--zc-warning-soft) !important;
  --colab-info: var(--zc-info) !important;
  --colab-info-soft: var(--zc-info-soft) !important;
  --colab-shadow: none !important;
  --colab-shadow-sm: none !important;
  background: var(--zc-bg-main) !important;
}

html:root.dark body.colab-midias-match[data-page="colaboradores"] :where(
  .colab-midias-page,
  .colab-shell,
  .colab-workspace
),
html:root[data-theme="dark"] body.colab-midias-match[data-page="colaboradores"] :where(
  .colab-midias-page,
  .colab-shell,
  .colab-workspace
) {
  background: var(--zc-bg-main) !important;
  background-image: none !important;
}

html:root.dark body.colab-midias-match[data-page="colaboradores"] :where(
  .panel,
  .colab-table-panel,
  .modal-card,
  .perfil-modal-card,
  .colab-profile-rail,
  .colab-list-toolbar,
  .colab-list-region,
  .overview-card,
  .fieldbox
),
html:root[data-theme="dark"] body.colab-midias-match[data-page="colaboradores"] :where(
  .panel,
  .colab-table-panel,
  .modal-card,
  .perfil-modal-card,
  .colab-profile-rail,
  .colab-list-toolbar,
  .colab-list-region,
  .overview-card,
  .fieldbox
) {
  background: var(--zc-panel) !important;
  background-image: none !important;
  border-color: var(--zc-border-official) !important;
  box-shadow: none !important;
}

html:root.dark body.colab-midias-match[data-page="colaboradores"] :where(
  .colab-searchbar,
  .search-wrap,
  .department-filter-wrap,
  .colab-security-control,
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
),
html:root[data-theme="dark"] body.colab-midias-match[data-page="colaboradores"] :where(
  .colab-searchbar,
  .search-wrap,
  .department-filter-wrap,
  .colab-security-control,
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
) {
  background: var(--zc-field) !important;
  color: var(--zc-text-main) !important;
  border-color: var(--zc-border-official) !important;
  box-shadow: none !important;
}

html:root.dark body.colab-midias-match[data-page="colaboradores"] table.colabs,
html:root[data-theme="dark"] body.colab-midias-match[data-page="colaboradores"] table.colabs {
  background: var(--zc-panel) !important;
}
html:root.dark body.colab-midias-match[data-page="colaboradores"] table.colabs thead,
html:root[data-theme="dark"] body.colab-midias-match[data-page="colaboradores"] table.colabs thead {
  background: var(--zc-bg-subtle) !important;
}
html:root.dark body.colab-midias-match[data-page="colaboradores"] table.colabs tbody tr,
html:root[data-theme="dark"] body.colab-midias-match[data-page="colaboradores"] table.colabs tbody tr {
  background: var(--zc-panel) !important;
}
html:root.dark body.colab-midias-match[data-page="colaboradores"] table.colabs tbody tr:hover,
html:root[data-theme="dark"] body.colab-midias-match[data-page="colaboradores"] table.colabs tbody tr:hover {
  background: var(--zc-hover-bg) !important;
}

html:root.dark body.colab-midias-match[data-page="colaboradores"] :where(.btn-primary, .colab-profile-photo-action.is-primary),
html:root[data-theme="dark"] body.colab-midias-match[data-page="colaboradores"] :where(.btn-primary, .colab-profile-photo-action.is-primary) {
  background: var(--zc-primary) !important;
  background-image: none !important;
  border-color: var(--zc-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* ---------- DEPARTAMENTOS ---------- */
html:root.dark body[data-page="departamentos"],
html:root[data-theme="dark"] body[data-page="departamentos"] {
  --dept-bg: var(--zc-bg-main) !important;
  --dept-bg-2: var(--zc-bg-subtle) !important;
  --dept-surface: var(--zc-panel) !important;
  --dept-surface-2: var(--zc-bg-subtle) !important;
  --dept-text: var(--zc-text-main) !important;
  --dept-title: var(--zc-text-main) !important;
  --dept-muted: var(--zc-text-secondary) !important;
  --dept-soft: var(--zc-text-muted) !important;
  --dept-border: var(--zc-border-official) !important;
  --dept-border-2: var(--zc-border-official) !important;
  --dept-brand: var(--zc-primary) !important;
  --dept-brand-2: var(--zc-primary-hover) !important;
  --dept-brand-soft: var(--zc-primary-soft) !important;
  --dept-blue: var(--zc-info) !important;
  --dept-blue-soft: var(--zc-info-soft) !important;
  --dept-danger: var(--zc-danger-official) !important;
  --dept-shadow: none !important;
  --dept-shadow-soft: none !important;
  background: var(--zc-bg-main) !important;
}

html:root.dark body[data-page="departamentos"] .departments-page,
html:root[data-theme="dark"] body[data-page="departamentos"] .departments-page {
  background: var(--zc-bg-main) !important;
  background-image: none !important;
}

html:root.dark body[data-page="departamentos"] :where(.dept-topbar,.dept-side-panel,.org-card,.modal-card),
html:root[data-theme="dark"] body[data-page="departamentos"] :where(.dept-topbar,.dept-side-panel,.org-card,.modal-card) {
  background: var(--zc-panel) !important;
  background-image: none !important;
  border-color: var(--zc-border-official) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root.dark body[data-page="departamentos"] .dept-canvas,
html:root[data-theme="dark"] body[data-page="departamentos"] .dept-canvas {
  background: var(--zc-bg-subtle) !important;
  background-image: none !important;
  border-color: var(--zc-border-official) !important;
  box-shadow: none !important;
}

html:root.dark body[data-page="departamentos"] :where(
  .topbar-icon,.side-icons button,.modal-close,.topbar-search,.summary-box,.info-box,
  .side-search,.input,.parent-picker,.members-list,.members-search,.review-card,
  .preview-company-box,.preview-parent-box,.preview-dept-card,.person-row,.assign-box,
  .side-empty,.add-people-btn,.members-toolbar button,.btn-modal.ghost,.instancias-list,
  .mini-info-box,.config-card-clean,.members-summary-clean,.instancia-pill,.org-action-menu,.parent-panel
),
html:root[data-theme="dark"] body[data-page="departamentos"] :where(
  .topbar-icon,.side-icons button,.modal-close,.topbar-search,.summary-box,.info-box,
  .side-search,.input,.parent-picker,.members-list,.members-search,.review-card,
  .preview-company-box,.preview-parent-box,.preview-dept-card,.person-row,.assign-box,
  .side-empty,.add-people-btn,.members-toolbar button,.btn-modal.ghost,.instancias-list,
  .mini-info-box,.config-card-clean,.members-summary-clean,.instancia-pill,.org-action-menu,.parent-panel
) {
  background: var(--zc-field) !important;
  background-image: none !important;
  border-color: var(--zc-border-official) !important;
  color: var(--zc-text-main) !important;
  box-shadow: none !important;
}

html:root.dark body[data-page="departamentos"] :where(.btn-add-dept,.btn-modal.primary,.modal-progress span.active),
html:root[data-theme="dark"] body[data-page="departamentos"] :where(.btn-add-dept,.btn-modal.primary,.modal-progress span.active) {
  background: var(--zc-primary) !important;
  background-image: none !important;
  border-color: var(--zc-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}

html:root.dark body[data-page="departamentos"] .org-footer,
html:root[data-theme="dark"] body[data-page="departamentos"] .org-footer {
  background: var(--zc-selected-bg) !important;
  background-image: none !important;
  color: #79DFC3 !important;
}

/* ---------- FILAS ---------- */
html:root.dark body[data-page="filas"],
html:root[data-theme="dark"] body[data-page="filas"] {
  --fq-bg: var(--zc-bg-main) !important;
  --fq-surface: var(--zc-panel) !important;
  --fq-surface-2: var(--zc-bg-subtle) !important;
  --fq-border: var(--zc-border-official) !important;
  --fq-border-2: var(--zc-border-strong) !important;
  --fq-title: var(--zc-text-main) !important;
  --fq-text: var(--zc-text-main) !important;
  --fq-muted: var(--zc-text-secondary) !important;
  --fq-soft: var(--zc-text-muted) !important;
  --fq-hover: var(--zc-hover-bg) !important;
  --fq-brand: var(--zc-primary) !important;
  --fq-brand-2: var(--zc-primary-hover) !important;
  --fq-brand-soft: var(--zc-primary-soft) !important;
  --fq-green: var(--zc-primary) !important;
  --fq-green-soft: var(--zc-primary-soft) !important;
  --fq-blue: var(--zc-info) !important;
  --fq-blue-soft: var(--zc-info-soft) !important;
  --fq-danger: var(--zc-danger-official) !important;
  --fq-danger-soft: var(--zc-danger-soft-official) !important;
  --fq-shadow: none !important;
  --fq-shadow-sm: none !important;
  background: var(--zc-bg-main) !important;
}

html:root.dark body[data-page="filas"] :where(.main,.filas-page,.filas-workspace),
html:root[data-theme="dark"] body[data-page="filas"] :where(.main,.filas-page,.filas-workspace) {
  background: var(--zc-bg-main) !important;
  background-image: none !important;
}

html:root.dark body[data-page="filas"] :where(
  .filas-assistant,.filas-flow-card,.filas-chatbot-gate,.filas-metric-card,.filas-filter-card,
  .fila-card,.filas-side-card,.filas-empty,.filas-summary-list,.fila-info-box
),
html:root[data-theme="dark"] body[data-page="filas"] :where(
  .filas-assistant,.filas-flow-card,.filas-chatbot-gate,.filas-metric-card,.filas-filter-card,
  .fila-card,.filas-side-card,.filas-empty,.filas-summary-list,.fila-info-box
) {
  background: var(--zc-panel) !important;
  background-image: none !important;
  border-color: var(--zc-border-official) !important;
  box-shadow: none !important;
}

html:root.dark body[data-page="filas"] :where(.filas-search,.filas-filter-card .select,.fila-card>.body),
html:root[data-theme="dark"] body[data-page="filas"] :where(.filas-search,.filas-filter-card .select,.fila-card>.body) {
  background: var(--zc-field) !important;
  background-image: none !important;
  border-color: var(--zc-border-official) !important;
}

html:root.dark body[data-page="filas"] :where(.btn-primary,.filas-assistant-dots span.active),
html:root[data-theme="dark"] body[data-page="filas"] :where(.btn-primary,.filas-assistant-dots span.active) {
  background: var(--zc-primary) !important;
  background-image: none !important;
  border-color: var(--zc-primary) !important;
  box-shadow: none !important;
}

html:root.dark body[data-page="filas"] :where(.tag-fila,.filas-assistant,.fila-card>.head:hover),
html:root[data-theme="dark"] body[data-page="filas"] :where(.tag-fila,.filas-assistant,.fila-card>.head:hover) {
  background-image: none !important;
}

/* ---------- CONECTAR WHATSAPP ---------- */
html:root.dark :where(
  .zc-smart-card,.zc-empty-card,.zc-tab-empty,.zc-connect-modal,.zc-wizard-card,.zc-help-card,
  .zc-qr-box,.zc-btn-outline,.zc-btn-cancel,.zc-icon-btn,.zc-help-drawer,.zc-help-step-card,
  .zc-help-problems,.zc-connect-problems,.kebab-menu
),
html:root[data-theme="dark"] :where(
  .zc-smart-card,.zc-empty-card,.zc-tab-empty,.zc-connect-modal,.zc-wizard-card,.zc-help-card,
  .zc-qr-box,.zc-btn-outline,.zc-btn-cancel,.zc-icon-btn,.zc-help-drawer,.zc-help-step-card,
  .zc-help-problems,.zc-connect-problems,.kebab-menu
) {
  background: var(--zc-panel) !important;
  background-image: none !important;
  border-color: var(--zc-border-official) !important;
  color: var(--zc-text-main) !important;
  box-shadow: none !important;
}

html:root.dark :where(.zc-field input,.zc-field select,.zc-phone-screen),
html:root[data-theme="dark"] :where(.zc-field input,.zc-field select,.zc-phone-screen) {
  background: var(--zc-field) !important;
  background-image: none !important;
  border-color: var(--zc-border-official) !important;
  color: var(--zc-text-main) !important;
}

html:root.dark :where(.zc-empty-state,.zc-connect-body,.zc-help-head,.zc-help-footer,.zc-connect-footer),
html:root[data-theme="dark"] :where(.zc-empty-state,.zc-connect-body,.zc-help-head,.zc-help-footer,.zc-connect-footer) {
  background: var(--zc-bg-subtle) !important;
  background-image: none !important;
  border-color: var(--zc-border-official) !important;
}

html:root.dark .zc-empty-divider span,
html:root[data-theme="dark"] .zc-empty-divider span {
  background: var(--zc-border-official) !important;
  background-image: none !important;
}

html:root.dark :where(.zc-btn-main,.btn--primary,.btn--ok),
html:root[data-theme="dark"] :where(.zc-btn-main,.btn--primary,.btn--ok) {
  background: var(--zc-primary) !important;
  background-image: none !important;
  border-color: var(--zc-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* ---------- MÍDIAS ---------- */
html:root.dark :where(.main.midias-page,.main.midias-page .midias-workspace),
html:root[data-theme="dark"] :where(.main.midias-page,.main.midias-page .midias-workspace) {
  background: var(--zc-bg-main) !important;
  background-image: none !important;
}
html:root.dark .main.midias-page :where(.panel,.side-card,.file-detail-card,.overview-card,.insights-card),
html:root[data-theme="dark"] .main.midias-page :where(.panel,.side-card,.file-detail-card,.overview-card,.insights-card) {
  background: var(--zc-panel) !important;
  background-image: none !important;
  border-color: var(--zc-border-official) !important;
  box-shadow: none !important;
}
html:root.dark .main.midias-page :where(.media-thumb,.mini-chart span),
html:root[data-theme="dark"] .main.midias-page :where(.media-thumb,.mini-chart span) {
  background: var(--zc-field) !important;
  background-image: none !important;
}

/* ---------- CHATBOT ---------- */
html:root.dark :where(.main.chatbot-page,.main.chatbot-page .chatbot-workspace),
html:root[data-theme="dark"] :where(.main.chatbot-page,.main.chatbot-page .chatbot-workspace) {
  background: var(--zc-bg-main) !important;
  background-image: none !important;
}
html:root.dark .main.chatbot-page :where(.intro-card,.bot-card,.editor-panel,.filas-panel,.departamentos-panel),
html:root[data-theme="dark"] .main.chatbot-page :where(.intro-card,.bot-card,.editor-panel,.filas-panel,.departamentos-panel) {
  background: var(--zc-panel) !important;
  background-image: none !important;
  border-color: var(--zc-border-official) !important;
  box-shadow: none !important;
}
html:root.dark .main.chatbot-page :where(.bot-card-head:hover,.whatsapp-preview,.mini-whatsapp-demo),
html:root[data-theme="dark"] .main.chatbot-page :where(.bot-card-head:hover,.whatsapp-preview,.mini-whatsapp-demo) {
  background: var(--zc-bg-subtle) !important;
  background-image: none !important;
}
html:root.dark .main.chatbot-page :where(.btn-primary,.save-status.is-saved),
html:root[data-theme="dark"] .main.chatbot-page :where(.btn-primary,.save-status.is-saved) {
  background-color: var(--zc-primary) !important;
  background-image: none !important;
  border-color: var(--zc-primary) !important;
  box-shadow: none !important;
}

/* ---------- ATENDIMENTOS: remove restos de azul/cinza do tema WhatsApp antigo ---------- */
html:root.dark body.zc-atendimentos-page,
html:root[data-theme="dark"] body.zc-atendimentos-page {
  --bg: var(--zc-bg-main) !important;
  --panel: var(--zc-panel) !important;
  --panel-2: var(--zc-bg-subtle) !important;
  --panel-3: var(--zc-hover-bg) !important;
  --card: var(--zc-panel) !important;
  --card-2: var(--zc-bg-subtle) !important;
  --input-bg: var(--zc-field) !important;
  --search-bg: var(--zc-field) !important;
  --border: var(--zc-border-official) !important;
  --border-2: var(--zc-border-strong) !important;
  --text: var(--zc-text-main) !important;
  --text-2: var(--zc-text-secondary) !important;
  --muted: var(--zc-text-muted) !important;
  --leftbar-bg: var(--zc-panel) !important;
  --leftbar-border: var(--zc-border-official) !important;
  --bubble-in-bg: var(--zc-hover-bg) !important;
  --bubble-in-border: var(--zc-border-official) !important;
  --bubble-in-text: var(--zc-text-main) !important;
  --scroll-track: var(--zc-bg-main) !important;
  --scroll-thumb: var(--zc-border-strong) !important;
  --shadow-soft: none !important;
  --shadow-soft-2: none !important;
  background: var(--zc-bg-main) !important;
}

html:root.dark body.zc-atendimentos-page :where(#chat-main,.whatsapp-auto-bg),
html:root[data-theme="dark"] body.zc-atendimentos-page :where(#chat-main,.whatsapp-auto-bg) {
  background-color: var(--zc-bg-main) !important;
  background-image: none !important;
}

html:root.dark body.zc-atendimentos-page :where(
  .drawer,.drawer-panel,.zcPerfil-card,.zcPerfil-section,.ag-card,.ag-panel,.modal-content,.modal-card
),
html:root[data-theme="dark"] body.zc-atendimentos-page :where(
  .drawer,.drawer-panel,.zcPerfil-card,.zcPerfil-section,.ag-card,.ag-panel,.modal-content,.modal-card
) {
  background-color: var(--zc-panel) !important;
  border-color: var(--zc-border-official) !important;
  box-shadow: none !important;
}

/* Nenhum módulo acima deve reintroduzir gradiente decorativo no dark. */
html:root.dark :where(
  body.colab-midias-match[data-page="colaboradores"] .btn-primary,
  body[data-page="departamentos"] .btn-add-dept,
  body[data-page="filas"] .btn-primary,
  .zc-btn-main,
  .main.chatbot-page .btn-primary
),
html:root[data-theme="dark"] :where(
  body.colab-midias-match[data-page="colaboradores"] .btn-primary,
  body[data-page="departamentos"] .btn-add-dept,
  body[data-page="filas"] .btn-primary,
  .zc-btn-main,
  .main.chatbot-page .btn-primary
) {
  background-image: none !important;
}