/* ============================================================================
 * theme-linear-core.css
 * Redesign Linear (linear.app) do CRM Avalanche — fatia CORE.
 *
 * Cobre: tokens, base (tipografia, botões, badges, inputs, checkbox, tooltip,
 * scrollbar, seleção, foco), login overlay, casca do app (sidebar, ctx-switcher,
 * nav-item, topbar, mobile) e toast.
 *
 * Carregado por ÚLTIMO na cascata (depois de app.css, theme-crm-clean.css,
 * saas-operability.css e subaccount-operability.css). Estratégia em duas camadas:
 *   1. remapear os custom properties que as folhas anteriores já consomem,
 *      o que atravessa os !important delas sem brigar por especificidade;
 *   2. override direto e cirúrgico onde o valor está hardcoded na base
 *      (raio, altura, degradê, uppercase) — com !important só onde a regra
 *      anterior também usa !important ou onde há style inline no HTML.
 *
 * Escopo: estrutura compartilhada pelos temas escuro, claro e híbrido.
 * A geometria é única; somente os tokens de superfície e contraste variam.
 * Todo seletor aqui existe no DOM real de agent-manager.py ou no CSS base.
 *
 * Regras duras respeitadas: zero degradê (cor sólida sempre), zero emoji
 * autoral, âmbar reservado a valor em dinheiro.
 * ========================================================================== */


/* ============================================================================
   ESCALA DE Z-INDEX (camada Linear) · referência única
   conteúdo/base 1-9 · sticky/shell 20 · popovers (.conv-filter-pop, .ct-pop) 40 ·
   dropdown (.pw-tagdrop) 50 · modal de página (.pw-fbmodal) 200 ·
   drawer/sheet lateral (.ct-drawer, .ct-wide) 300.
   Acima ficam os overlays globais definidos nas folhas legadas, por design:
   ops-editor 1200 · flow-ov 9000 (inline no HTML) · theme-crm-clean 10000 ·
   saas-modal 100000 · saas-toast 100001. O drawer fica ACIMA do conteúdo da
   página e ABAIXO de qualquer modal/toast global.
   ========================================================================== */


/* ============================================================================
   1. TOKENS · paleta Linear com prefixo próprio (--lx-*)
   Namespace independente: as fatias de páginas consomem daqui sem depender
   de como cada var legada do app foi remapeada abaixo.
   ========================================================================== */
:root{
  /* --------------------------------------------------------------------
     Nomes CANÔNICOS do protótipo (linhas 7-45 de crm-avalanche-proto.html).
     Publicados aqui porque nenhuma folha anterior usa o prefixo --color-*
     (colisão zero, conferida) e porque as fatias de páginas consomem
     exatamente estes nomes. Esta é a fonte única; --lx-* abaixo é alias.
     -------------------------------------------------------------------- */
  --color-void:#08090a;
  --color-carbon:#0f1011;
  --color-obsidian:#161718;
  --color-graphite:#23252a;
  --color-smoke:#383b3f;
  --color-ash:#62666d;
  --color-fog:#8a8f98;
  --color-mist:#d0d6e0;
  --color-bone:#e5e5e6;
  --color-paper:#ffffff;
  --color-acid-lime:#e4f222;
  --color-pulse-green:#27a644;
  --color-coral-red:#eb5757;
  --color-signal-teal:#02b8cc;
  --color-iris-violet:#6366f1;
  --color-lavender:#8b5cf6;
  /* ÚNICA cor fora do sistema, reservada a VALOR EM DINHEIRO */
  --color-amber:#e0a33e;

  /* superfícies */
  --lx-void:var(--color-void);
  --lx-carbon:var(--color-carbon);
  --lx-obsidian:var(--color-obsidian);
  --lx-graphite:var(--color-graphite);
  --lx-smoke:var(--color-smoke);

  /* texto */
  --lx-ash:var(--color-ash);
  --lx-fog:var(--color-fog);
  --lx-mist:var(--color-mist);
  --lx-bone:var(--color-bone);
  --lx-paper:var(--color-paper);

  /* muted theme-aware: ícone de estado vazio (decorativo) e dia fora do mês */
  --lx-empty-art:var(--lx-smoke);
  --lx-day-out:var(--lx-ash);

  /* acentos */
  --lx-acid-lime:var(--color-acid-lime);
  --lx-acid-lime-hi:#eef85c;
  --lx-acid-lime-deep:#cbd91c;
  --lx-on-lime:#08090a;
  --lx-pulse-green:var(--color-pulse-green);
  --lx-coral-red:var(--color-coral-red);
  --lx-signal-teal:var(--color-signal-teal);
  --lx-iris-violet:var(--color-iris-violet);
  --lx-lavender:var(--color-lavender);
  --lx-amber:var(--color-amber);

  /* variantes legíveis dos acentos sobre fundo escuro (texto/ícone) */
  --lx-green-text:#4ec96c;
  --lx-coral-text:#f07d7d;
  --lx-teal-text:#38cbdb;
  --lx-violet-text:#9497f5;
  --lx-lavender-text:#a985f8;

  /* Lime e ciano COMO TEXTO (theme-aware). No escuro valem o acento vivo (o
     visual aprovado não muda); o bloco claro reescreve p/ oliva/ciano escuro
     com razão >= 4.5 sobre superfície clara. Fundo lima usa --lx-on-lime. */
  --lx-lime-ink:var(--lx-acid-lime);
  --lx-cyan-ink:var(--lx-signal-teal);

  /* washes sólidos por transparência (sem degradê) */
  --lx-wash-lime:rgba(228,242,34,.10);
  --lx-wash-green:rgba(39,166,68,.14);
  --lx-wash-coral:rgba(235,87,87,.14);
  --lx-wash-teal:rgba(2,184,204,.14);
  --lx-wash-violet:rgba(99,102,241,.16);
  --lx-wash-lavender:rgba(139,92,246,.16);
  --lx-wash-hover:rgba(255,255,255,.04);
  --lx-wash-hover-2:rgba(255,255,255,.06);
  --lx-wash-active:rgba(255,255,255,.08);

  /* --------------------------------------------------------------------
     Tokens theme-aware adicionais (tokenização das cores antes hardcoded).
     Canais RGB crus para compor tint/borda com alpha variável sem perder o
     valor exato no escuro: rgba(var(--lx-X-rgb), A). No escuro cada canal
     vale o literal atual; o bloco claro/híbrido reescreve para o harmônico.
     -------------------------------------------------------------------- */
  --lx-lime-rgb:228,242,34;
  --lx-green-rgb:39,166,68;
  --lx-coral-rgb:235,87,87;
  --lx-teal-rgb:2,184,204;
  --lx-violet-rgb:99,102,241;
  --lx-lavender-rgb:139,92,246;
  --lx-amber-rgb:224,163,62;
  --lx-ink-rgb:255,255,255;                                    /* tint neutro de hover/seleção */
  --lx-wire-rgb:34,211,238;                                    /* glow do fio do canvas */
  --lx-wire:#22d3ee;                                           /* fio do canvas de automação */
  --lx-wire-hi:#67e8f9;                                        /* fio selecionado/realçado */
  --lx-raised-hover:#1b1c1e;                                   /* superfície de hover de card/glass */
  --lx-sh-subtle-strong:rgb(56,59,63) 0px 0px 0px 1px inset;  /* anel inset em hover */

  /* tipografia — reusa as fontes JÁ carregadas localmente (zero request novo) */
  --lx-font-ui:'Manrope','Inter',ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --lx-font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --lx-w-reg:400;
  --lx-w-510:510;
  --lx-w-590:590;

  /* escala de espaçamento */
  --lx-s4:4px;  --lx-s8:8px;   --lx-s12:12px; --lx-s16:16px;
  --lx-s20:20px; --lx-s24:24px; --lx-s32:32px; --lx-s40:40px; --lx-s48:48px;

  /* raios */
  --lx-r-sm:2px;
  --lx-r-badge:4px;
  --lx-r-md:6px;
  --lx-r-card:12px;
  --lx-r-pill:9999px;

  /* sombras */
  --lx-sh-sm:rgba(0,0,0,.4) 0px 2px 4px 0px;
  --lx-sh-subtle:rgb(35,37,42) 0px 0px 0px 1px inset;
  --lx-sh-xl:rgba(8,9,10,.6) 0px 4px 32px 0px;

  /* alturas de controle */
  --lx-h-btn:32px;
  --lx-h-btn-sm:26px;
  --lx-h-input:34px;
  --lx-h-nav:34px;
  --lx-h-topbar:52px;
}


/* ============================================================================
   2. REATRIBUIÇÃO DAS VARS DO APP
   app.css e theme-crm-clean.css consomem estas vars com !important; remapeá-las
   é o caminho que vence sem duplicar centenas de seletores.
   Especificidade (0,2,0) — vence :root, [data-palette=*] e empata com
   ":root,:root[data-theme='dark']" do theme-crm-clean (e ganha por ordem).
   ========================================================================== */
:root[data-theme]{
  color-scheme:dark;

  /* superfícies do cockpit */
  --bg:var(--lx-void);
  --panel:var(--lx-carbon);
  --panel-2:var(--lx-obsidian);
  --raised:var(--lx-graphite);
  --line:var(--lx-graphite);
  --line-strong:var(--lx-smoke);

  /* texto */
  --text:var(--lx-bone);
  --dim:var(--lx-fog);
  --mute:var(--lx-ash);

  /* acento: lime é a cor de ação do sistema Linear */
  --accent:var(--lx-acid-lime);
  --accent-deep:var(--lx-acid-lime-deep);
  --accent-glow:var(--lx-wash-lime);
  --on-accent:var(--lx-void);
  --focus-ring:var(--lx-acid-lime);

  /* semânticos — âmbar NÃO entra aqui (é só dinheiro) */
  --live:var(--lx-green-text);
  --warn:var(--lx-coral-text);
  --bad:var(--lx-coral-red);
  --info:var(--lx-iris-violet);

  /* raios legados */
  --r:var(--lx-r-card);
  --r-sm:var(--lx-r-md);
  --card-radius:var(--lx-r-card);
  --card-radius-lg:var(--lx-r-card);
  --mono:var(--lx-font-mono);

  /* compat de tokens antigos */
  --bg-primary:var(--lx-void);
  --bg-secondary:var(--lx-carbon);
  --bg-card:var(--lx-carbon);
  --bg-card-solid:var(--lx-carbon);
  --text-primary:var(--lx-bone);
  --text-secondary:var(--lx-mist);
  --text-dim:var(--lx-fog);
  --text-muted:var(--lx-ash);
  --border-color:var(--lx-graphite);
  --border-hover:var(--lx-smoke);
  --input-bg:var(--lx-obsidian);
  --modal-bg:var(--lx-carbon);
  --table-hover:rgba(255,255,255,.03);
  --scrollbar-bg:transparent;
  --scrollbar-thumb:var(--lx-graphite);

  /* chrome da sidebar (consumido com !important pelo theme-crm-clean) */
  --sidebar-chrome:var(--lx-carbon);
  --sidebar-chrome-border:var(--lx-graphite);
  --sidebar-chrome-text:var(--lx-bone);
  --sidebar-chrome-muted:var(--lx-fog);
  --sidebar-bg:var(--lx-carbon);
  --sidebar-border:var(--lx-graphite);
  --theme-sidebar:var(--lx-carbon);
  --theme-sidebar-text:var(--lx-bone);
  --theme-sidebar-muted:var(--lx-fog);
  --theme-sidebar-hover:var(--lx-wash-hover);

  /* superfícies temáticas */
  --theme-canvas:var(--lx-void);
  --theme-surface:var(--lx-carbon);
  --theme-raised:var(--lx-obsidian);
  --theme-overlay:rgba(8,9,10,.72);
  --theme-focus-offset:var(--lx-void);
  --theme-card-shadow:none;

  /* sombras premium: Linear não usa sombra difusa em superfície de conteúdo */
  --surface-shadow:none;
  --surface-shadow-raised:var(--lx-sh-xl);

  /* toast */
  --toast-success-bg:var(--lx-void);
  --toast-success-fg:var(--lx-mist);
  --toast-error-bg:var(--lx-void);
  --toast-error-fg:var(--lx-mist);
  --toast-neutral-bg:var(--lx-void);
  --toast-neutral-fg:var(--lx-mist);
  --toast-border:var(--lx-smoke);
}

/* A mesma estrutura Linear precisa existir em todos os temas. O claro troca
   apenas os tokens, preservando grid, flex, espaçamento e responsividade. */
:root[data-theme="light"],
:root[data-theme="hybrid"]{
  color-scheme:light;

  --color-void:#f4f6fb;
  --color-carbon:#f8f9fc;
  --color-obsidian:#fbfcfe;
  --color-graphite:#dbe2ec;
  --color-smoke:#b8c5d6;
  --color-ash:#556172;
  --color-fog:#475569;
  --color-mist:#334155;
  --color-bone:#0f172a;
  --color-paper:#020617;
  --lx-void:#f4f6fb;
  --lx-carbon:#f8f9fc;
  --lx-obsidian:#fbfcfe;
  --lx-graphite:#dbe2ec;
  --lx-smoke:#b8c5d6;
  --lx-ash:#556172;
  --lx-fog:#475569;
  --lx-mist:#334155;
  --lx-bone:#0f172a;
  --lx-paper:#020617;
  --lx-empty-art:#7f8da0;
  --lx-day-out:#7f8da0;

  --lx-acid-lime:#d5e314;
  --lx-acid-lime-hi:#c4d20d;
  --lx-acid-lime-deep:#879307;
  --lx-green-text:#15803d;
  --lx-coral-text:#dc2626;
  --lx-teal-text:#0e7490;
  --lx-violet-text:#4f46e5;
  --lx-lavender-text:#7c3aed;
  --lx-amber:#a16207;
  --color-amber:#a16207;

  /* lime/ciano como texto no claro: oliva e ciano escuros (>= 4.5 sobre #f4f6fb) */
  --lx-lime-ink:#5c660a;
  --lx-cyan-ink:#0c6b80;

  --lx-wash-lime:rgba(135,147,7,.10);
  --lx-wash-green:rgba(21,128,61,.10);
  --lx-wash-coral:rgba(220,38,38,.10);
  --lx-wash-teal:rgba(14,116,144,.10);
  --lx-wash-violet:rgba(79,70,229,.10);
  --lx-wash-lavender:rgba(124,58,237,.10);
  --lx-wash-hover:rgba(15,23,42,.04);
  --lx-wash-hover-2:rgba(15,23,42,.06);
  --lx-wash-active:rgba(15,23,42,.08);
  --lx-sh-sm:rgba(15,23,42,.10) 0 2px 4px 0;
  --lx-sh-subtle:#dbe2ec 0 0 0 1px inset;
  --lx-sh-xl:rgba(15,23,42,.14) 0 8px 28px 0;

  --bg:var(--lx-void);
  --panel:var(--lx-carbon);
  --panel-2:var(--lx-obsidian);
  --raised:var(--lx-graphite);
  --line:var(--lx-graphite);
  --line-strong:var(--lx-smoke);
  --text:var(--lx-bone);
  --dim:var(--lx-fog);
  --mute:var(--lx-ash);
  --accent:var(--lx-teal-text);
  --accent-deep:#155e75;
  --accent-glow:var(--lx-wash-teal);
  --on-accent:#fff;
  --focus-ring:var(--lx-teal-text);
  --bg-primary:var(--lx-void);
  --bg-secondary:var(--lx-carbon);
  --bg-card:var(--lx-obsidian);
  --bg-card-solid:var(--lx-obsidian);
  --text-primary:var(--lx-bone);
  --text-secondary:var(--lx-mist);
  --text-dim:var(--lx-fog);
  --text-muted:var(--lx-ash);
  --border-color:var(--lx-graphite);
  --border-hover:var(--lx-smoke);
  --input-bg:var(--lx-obsidian);
  --modal-bg:var(--lx-obsidian);
  --table-hover:var(--lx-wash-hover);
  --scrollbar-thumb:var(--lx-smoke);
  --theme-canvas:var(--lx-void);
  --theme-surface:var(--lx-carbon);
  --theme-raised:var(--lx-obsidian);
  --theme-overlay:rgba(15,23,42,.58);
  --theme-focus-offset:var(--lx-void);
  --theme-card-shadow:0 1px 2px rgba(15,23,42,.06);
  --surface-shadow:none;
  --surface-shadow-raised:var(--lx-sh-xl);

  /* tokens theme-aware adicionais · variante clara/híbrida (ver bloco escuro) */
  --lx-lime-rgb:135,147,7;
  --lx-green-rgb:21,128,61;
  --lx-coral-rgb:220,38,38;
  --lx-teal-rgb:14,116,144;
  --lx-violet-rgb:79,70,229;
  --lx-lavender-rgb:124,58,237;
  --lx-amber-rgb:161,98,7;
  --lx-ink-rgb:15,23,42;
  --lx-wire-rgb:8,145,178;
  --lx-wire:#0891b2;
  --lx-wire-hi:#06b6d4;
  --lx-raised-hover:#eef2f8;
  --lx-sh-subtle-strong:#b8c5d6 0px 0px 0px 1px inset;
}


/* ============================================================================
   3. BASE · tipografia, superfície global, seleção, scrollbar, foco
   ========================================================================== */
:root[data-theme] body{
  background-color:var(--lx-void) !important;
  background-image:none !important;
  color:var(--lx-mist) !important;
  font-family:var(--lx-font-ui);
  font-size:14px;
  font-weight:var(--lx-w-reg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

:root[data-theme] #app-wrapper{
  background-color:var(--lx-void) !important;
  background-image:none !important;
}

/* Hierarquia de título do Linear: peso médio, tracking negativo, branco puro. */
:root[data-theme] :where(h1,h2,h3,h4){
  color:var(--lx-paper);
  font-family:var(--lx-font-ui);
  font-weight:var(--lx-w-590);
  letter-spacing:-.024em;
  line-height:1.25;
}
:root[data-theme] :where(h3,h4){
  color:var(--lx-bone);
  font-weight:var(--lx-w-510);
  letter-spacing:-.011em;
}

:root[data-theme] .font-mono,
:root[data-theme] code,
:root[data-theme] pre,
:root[data-theme] .stat-number{
  font-family:var(--lx-font-mono) !important;
  letter-spacing:-.013em;
  font-variant-numeric:tabular-nums;
}

:root[data-theme] ::selection{
  background:rgba(var(--lx-lime-rgb),.22);
  color:var(--lx-paper);
}

/* Scrollbar Linear: trilho invisível, polegar graphite com respiro. */
:root[data-theme] ::-webkit-scrollbar{ width:10px; height:10px; }
:root[data-theme] ::-webkit-scrollbar-track{ background:transparent; }
:root[data-theme] ::-webkit-scrollbar-thumb{
  background:var(--lx-graphite);
  border-radius:var(--lx-r-pill);
  border:3px solid transparent;
  background-clip:padding-box;
}
:root[data-theme] ::-webkit-scrollbar-thumb:hover{
  background:var(--lx-smoke);
  background-clip:padding-box;
  border:3px solid transparent;
}
:root[data-theme] .sidebar-nav{
  scrollbar-color:var(--lx-graphite) transparent;
}

/* Foco: 2px lime com respiro. Vence os dois blocos !important anteriores
   (o de app.css usa :where(), especificidade 0; o do theme-crm-clean idem). */
:root[data-theme] :where(a,button,input,select,textarea,[role="button"],[tabindex]):focus-visible,
:root[data-theme] :where(.sidebar,.main-area,.theme-mode-menu) :where(button,a,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--lx-acid-lime) !important;
  outline-offset:2px !important;
  box-shadow:none !important;
}

:root[data-theme] .skip-link{
  background:var(--lx-obsidian);
  border:1px solid var(--lx-acid-lime);
  border-radius:var(--lx-r-md);
  color:var(--lx-bone);
  font-weight:var(--lx-w-510);
}


/* ============================================================================
   4. COMPONENTES GLOBAIS · botões
   Altura 32px, raio 6, borda graphite, primário em lime sólido.
   ========================================================================== */
:root[data-theme] .btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:var(--lx-h-btn);
  height:auto;
  padding:0 12px;
  border-radius:var(--lx-r-md);
  border:1px solid var(--lx-graphite);
  background:transparent;
  color:var(--lx-mist);
  font-family:var(--lx-font-ui);
  font-size:13px;
  font-weight:var(--lx-w-510);
  letter-spacing:-.011em;
  box-shadow:none;
  transition:background-color .12s ease,border-color .12s ease,color .12s ease;
}
:root[data-theme] .btn:hover{
  background:var(--lx-wash-hover);
  border-color:var(--lx-smoke);
  color:var(--lx-bone);
  transform:none;
  box-shadow:none;
}

:root[data-theme] .btn-primary{
  background:var(--lx-acid-lime);
  background-image:none;
  border:1px solid var(--lx-acid-lime);
  color:var(--lx-on-lime) !important;
  font-weight:var(--lx-w-590);
  box-shadow:none;
}
:root[data-theme] .btn-primary:hover{
  background:var(--lx-acid-lime-hi);
  border-color:var(--lx-acid-lime-hi);
  color:var(--lx-on-lime) !important;
  filter:none;
  transform:none;
  box-shadow:none;
}
/* Irmãos do primário que o app.css já agrupa na mesma regra de cor. */
:root[data-theme] :where(.bill-btn,.ctxp-btn.primary,.aw-confirm,.crm-btn-primary){
  background:var(--lx-acid-lime);
  background-image:none;
  border-color:var(--lx-acid-lime);
  color:var(--lx-on-lime) !important;
  border-radius:var(--lx-r-md);
  box-shadow:none;
}

:root[data-theme] .btn-secondary{
  background:var(--lx-obsidian);
  border:1px solid var(--lx-graphite);
  color:var(--lx-mist);
}
:root[data-theme] .btn-secondary:hover{
  background:var(--lx-graphite);
  border-color:var(--lx-smoke);
  color:var(--lx-bone);
}

:root[data-theme] .btn-danger{
  background:transparent;
  border:1px solid rgba(var(--lx-coral-rgb),.28);
  color:var(--lx-coral-red);
  border-radius:var(--lx-r-md);
}
:root[data-theme] .btn-danger:hover{
  background:rgba(var(--lx-coral-rgb),.10);
  border-color:rgba(var(--lx-coral-rgb),.45);
  color:var(--lx-coral-red);
}

:root[data-theme] .btn-success{
  background:var(--lx-pulse-green);
  color:var(--lx-paper);
  border:1px solid var(--lx-pulse-green);
  border-radius:var(--lx-r-md);
}
:root[data-theme] .btn-success:hover{
  background:var(--lx-pulse-green);
  opacity:.9;
  transform:none;
}

:root[data-theme] .btn-sm{
  min-height:var(--lx-h-btn-sm);
  height:auto;
  padding:0 8px;
  border-radius:var(--lx-r-badge);
  font-size:12px;
}

/* Botão-ícone (equivalente ao .ibtn do protótipo). */
:root[data-theme] :where(.theme-toggle,.copy-btn,.modal-close){
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--lx-r-md);
  color:var(--lx-fog);
  box-shadow:none;
  transition:background-color .12s ease,color .12s ease,border-color .12s ease;
}
:root[data-theme] :where(.theme-toggle,.copy-btn,.modal-close):hover{
  background:var(--lx-wash-hover-2);
  border-color:transparent;
  color:var(--lx-bone);
}
:root[data-theme] .theme-toggle{
  width:var(--lx-h-btn);
  height:var(--lx-h-btn);
  font-size:14px;
}
:root[data-theme] .copy-btn{
  padding:0 8px;
  min-height:var(--lx-h-btn-sm);
  font-size:12px;
  border-color:var(--lx-graphite);
}


/* ============================================================================
   5. COMPONENTES GLOBAIS · badges
   Linear: retângulo de raio 4, 20px de altura, sentença normal (sem CAPS).
   ========================================================================== */
:root[data-theme] .badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  height:20px;
  padding:0 6px;
  border-radius:var(--lx-r-badge);
  background:var(--lx-wash-hover);
  color:var(--lx-fog);
  font-family:var(--lx-font-ui);
  font-size:12px;
  font-weight:var(--lx-w-reg);
  line-height:1.4;
  letter-spacing:0;
  text-transform:none;
  white-space:nowrap;
}
:root[data-theme] :where(.badge-active,.badge-online){
  background:var(--lx-wash-green);
  color:var(--lx-green-text);
}
:root[data-theme] :where(.badge-inactive,.badge-stopped){
  background:var(--lx-wash-hover);
  color:var(--lx-fog);
}
:root[data-theme] .badge-error{
  background:var(--lx-wash-coral);
  color:var(--lx-coral-text);
}

:root[data-theme] .live-dot{
  width:6px;
  height:6px;
  background:var(--lx-green-text);
  box-shadow:none;
  animation:none !important;
}
:root[data-theme] .pulse-slow{ animation:none; }

:root[data-theme] .wa-link{
  color:var(--lx-teal-text) !important;
  text-decoration-color:rgba(var(--lx-teal-rgb),.4) !important;
}


/* ============================================================================
   6. COMPONENTES GLOBAIS · inputs, selects, checkbox
   ========================================================================== */
:root[data-theme] :where(.form-input,.ag-input,.ctxm-inp){
  min-height:var(--lx-h-input);
  padding:0 10px;
  border-radius:var(--lx-r-md);
  background:var(--lx-obsidian);
  border:1px solid var(--lx-graphite);
  color:var(--lx-mist);
  font-family:var(--lx-font-ui);
  font-size:13px;
  box-shadow:none;
  transition:border-color .12s ease;
}
:root[data-theme] :where(.form-input,.ag-input,.ctxm-inp):focus{
  border-color:var(--lx-mist) !important;
  box-shadow:none;
  outline:none;
}
:root[data-theme] textarea.form-input{
  padding:8px 10px;
  line-height:1.5;
}
:root[data-theme] .main-area :where(input,textarea)::placeholder{
  color:var(--lx-ash) !important;
  opacity:1;
}
:root[data-theme] .form-group label,
:root[data-theme] .detail-field .label{
  color:var(--lx-fog);
  font-size:12px;
  font-weight:var(--lx-w-reg);
  letter-spacing:0;
  text-transform:none;
}
:root[data-theme] .form-group label .req{ color:var(--lx-coral-red); }

:root[data-theme] .form-section-title,
:root[data-theme] .acct-section-title,
:root[data-theme] .ctx-sec-title{
  color:var(--lx-ash);
  font-size:10px;
  font-weight:var(--lx-w-510);
  letter-spacing:.04em;
  text-transform:uppercase;
  border-top-color:var(--lx-graphite);
}

:root[data-theme] .acct-divider,
:root[data-theme] .hr{
  background:var(--lx-graphite);
  height:1px;
}

/* Checkbox e radio nativos: marca lime com miolo void. */
:root[data-theme] input[type="checkbox"],
:root[data-theme] input[type="radio"]{
  accent-color:var(--lx-acid-lime);
  width:15px;
  height:15px;
  cursor:pointer;
}


/* ============================================================================
   7. COMPONENTES GLOBAIS · superfícies, modais e tabelas
   ========================================================================== */
:root[data-theme] .main-area :where(.glass,.glass-strong,.glass-card,.glass-card-inner,.card,.panel,.detail-section,.agent-card,.channel-card,.ctxp-card,.bill-card,.bill-stat){
  border-radius:var(--lx-r-card);
  border:1px solid var(--lx-graphite) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

:root[data-theme] .modal-overlay{
  background:rgba(8,9,10,.72) !important;
  backdrop-filter:none !important;
}
:root[data-theme] .modal{
  background:var(--lx-carbon) !important;
  border:1px solid var(--lx-graphite) !important;
  border-radius:var(--lx-r-card);
  box-shadow:var(--lx-sh-xl);
}
:root[data-theme] .modal::before{ display:none; content:none; }
:root[data-theme] .modal-header{
  border-bottom:1px solid var(--lx-graphite);
}
:root[data-theme] .modal-header h2{
  color:var(--lx-paper);
  font-size:15px;
  font-weight:var(--lx-w-510);
  letter-spacing:-.165px;
}

:root[data-theme] .main-area :where(th){
  color:var(--lx-ash) !important;
  font-size:12px;
  font-weight:var(--lx-w-510);
  letter-spacing:0;
  border-color:var(--lx-graphite) !important;
}
:root[data-theme] .main-area :where(td){
  border-color:var(--lx-graphite) !important;
}


/* ============================================================================
   8. LOGIN OVERLAY (#login-overlay)
   Clima do protótipo: fundo void, painel carbon, input obsidian, CTA lime.
   Todos os degradês da base (fade do split, filete do card, halo, aurora,
   grade e botão) são desligados — cor sólida sempre.
   ========================================================================== */
:root[data-theme] .login-overlay{
  background:var(--lx-void);
}
:root[data-theme] .login-right{
  background:var(--lx-void);
  gap:var(--lx-s32);
}
:root[data-theme] .login-image-panel{
  background:var(--lx-void);
}
/* fade em degradê do split → desligado */
:root[data-theme] .login-image-panel::after{
  display:none;
  content:none;
  background:none;
}
/* aurora e grade da base são degradês puros → desligadas */
:root[data-theme] .login-aurora,
:root[data-theme] .login-grid{
  display:none !important;
  background:none !important;
  animation:none !important;
}

:root[data-theme] .login-tagline .lt-eyebrow{
  font-family:var(--lx-font-mono);
  font-size:10px;
  font-weight:var(--lx-w-510);
  letter-spacing:.04em;
  color:var(--lx-acid-lime);
}
:root[data-theme] .login-tagline .lt-title{
  color:var(--lx-paper);
  font-family:var(--lx-font-ui);
  font-size:32px;
  font-weight:var(--lx-w-590);
  line-height:1.16;
  letter-spacing:-.032em;
}
:root[data-theme] .login-tagline .lt-title span{
  color:var(--lx-acid-lime);
}
:root[data-theme] .login-tagline .lt-sub{
  color:var(--lx-fog);
  font-size:16px;
  line-height:1.5;
  letter-spacing:-.011em;
}

:root[data-theme] .login-card{
  width:400px;
  padding:32px 32px 28px;
  background:var(--lx-carbon);
  border:1px solid var(--lx-graphite);
  border-radius:var(--lx-r-card);
  box-shadow:var(--lx-sh-xl);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  animation:none;
}
:root[data-theme] .login-card::before,
:root[data-theme] .login-card::after{
  display:none;
  content:none;
  background:none;
  filter:none;
}

:root[data-theme] .login-logo{ margin-bottom:24px; }
:root[data-theme] .login-logo .icon-wrap{
  width:40px;
  height:40px;
  margin:0 auto 14px;
  background:var(--lx-acid-lime);
  border:1px solid var(--lx-acid-lime);
  border-radius:var(--lx-r-md);
  color:var(--lx-on-lime);
  box-shadow:none;
}
:root[data-theme] .login-logo h1{
  color:var(--lx-paper);
  font-size:20px;
  font-weight:var(--lx-w-590);
  letter-spacing:.06em;
}
:root[data-theme] .login-logo p{
  color:var(--lx-ash);
  font-size:12px;
  letter-spacing:0;
  margin-top:6px;
}

:root[data-theme] .login-field{ margin-bottom:14px; }
:root[data-theme] .login-field label{
  color:var(--lx-ash);
  font-size:10px;
  font-weight:var(--lx-w-510);
  letter-spacing:.04em;
  margin-bottom:6px;
}
:root[data-theme] .login-field input{
  height:var(--lx-h-input);
  padding:0 12px 0 34px;
  background:var(--lx-obsidian);
  border:1px solid var(--lx-graphite);
  border-radius:var(--lx-r-md);
  color:var(--lx-mist);
  font-family:var(--lx-font-ui);
  font-size:13px;
  box-shadow:none;
  transition:border-color .12s ease;
}
:root[data-theme] .login-field input::placeholder{ color:var(--lx-ash); }
:root[data-theme] .login-field input:focus{
  border-color:var(--lx-mist);
  box-shadow:none;
}
:root[data-theme] .login-input-icon{
  left:11px;
  color:var(--lx-ash);
}
:root[data-theme] .login-input-wrap:focus-within .login-input-icon{
  color:var(--lx-fog);
}

:root[data-theme] .login-submit{
  height:var(--lx-h-btn);
  padding:0 12px;
  margin-top:18px;
  background:var(--lx-acid-lime);
  background-image:none;
  border:1px solid var(--lx-acid-lime);
  border-radius:var(--lx-r-md);
  color:var(--lx-on-lime);
  font-family:var(--lx-font-ui);
  font-size:13px;
  font-weight:var(--lx-w-590);
  letter-spacing:-.011em;
  box-shadow:none;
  transition:background-color .12s ease,border-color .12s ease;
}
:root[data-theme] .login-submit:hover{
  background:var(--lx-acid-lime-hi);
  border-color:var(--lx-acid-lime-hi);
  color:var(--lx-on-lime);
  transform:none;
  box-shadow:none;
}
:root[data-theme] .login-submit:active{ transform:none; }
:root[data-theme] .login-submit:disabled{
  opacity:.52;
  box-shadow:none;
  transform:none;
}

:root[data-theme] .login-error{
  color:var(--lx-coral-text);
  font-size:12px;
  margin-top:12px;
}
:root[data-theme] .login-status{
  color:var(--lx-ash);
  font-family:var(--lx-font-mono);
  font-size:10px;
  letter-spacing:.02em;
  margin-top:16px;
}
:root[data-theme] .login-status .live-dot{
  background:var(--lx-pulse-green);
}
/* Item 12 — o overlay de login é uma superfície escura fixa nos dois temas
   (.login-overlay/.login-right = preto), mas os textos herdavam --lx-ash, que no
   claro E no escuro rende só 3.1-4.4 sobre esse fundo. Reancorar --lx-ash e
   --lx-coral-text no escopo do login p/ o cinza/coral legível (>= 4.5) cobre de
   uma vez label, cargo, status, placeholder, ícone e mensagem de erro. */
:root[data-theme] .login-overlay{
  --lx-ash:#8a8f98;
  --lx-coral-text:#f07d7d;
}

/* Compatibilidade dos trechos legados que ainda chegam com estilo inline. */
:root:is([data-theme="light"],[data-theme="hybrid"]) .main-area [style*="color:rgba(255,255,255"]{
  color:var(--lx-fog) !important;
}
:root:is([data-theme="light"],[data-theme="hybrid"]) .main-area [style*="background:rgba(255,255,255"]{
  background:var(--lx-wash-hover) !important;
}
:root:is([data-theme="light"],[data-theme="hybrid"]) .main-area [style*="border:1px solid rgba(255,255,255"]{
  border-color:var(--lx-graphite) !important;
}