/* ============================================================
   Pro SST — TELAS DOS MODULOS no visual novo (camada GERAL)
   ------------------------------------------------------------
   Pedido da equipe (24/09): levar o desenho das listas novas do CRM
   (Figma "Customer Management") para TODAS as telas dos modulos —
   Servicos, Exames, Tabelas, Parceiros, Comunicacao, Config...

   ~140 telas (Control, Finance, Marketing) repetem o mesmo esqueleto:
     <div class="space-y-6|space-y-5">  <- raiz do {% block content %}
       <div class="bg-gradient-*|theme-header|*-hero ..."> <- faixa
       <div class="grid ..."> cartoes de numero </div>
       <div class="bg-white rounded-2xl"> filtros / tabela / formulario </div>
   Em vez de refazer tela por tela, esta camada reconhece o esqueleto e
   troca SO o acabamento. Nenhum template, view, link ou JS muda.

   Liga junto com o menu lateral novo (body.sidebar-nova — hoje so a
   Pro SST); ?sidebar=classica volta tudo. Telas ja refeitas a mao
   (.cl listas do CRM, .ld tela do lead) ficam de fora.

   O seletor usa o id #conteudo-principal de proposito: a especificidade
   do id vence as utilitarias do Tailwind e os style="" dos botoes.
   ============================================================ */

body.sidebar-nova {
  --ln-ink:    #2D364F;
  --ln-text:   #151718;
  --ln-muted:  #8A8FA0;
  --ln-label:  #787988;
  --ln-card:   #FFFFFF;
  --ln-edge:   rgba(63, 64, 95, .15);
  --ln-thead:  #FAFCFE;
  --ln-zebra:  #FBFBFB;
  --ln-rule:   #F0F0F4;
  --ln-chip:   #F3F4F6;
  --ln-accent: #1E5CAD;
  --ln-accent-d: #153060;
}
html[data-theme="dark"] body.sidebar-nova {
  --ln-ink:    #E8ECF2;
  --ln-text:   #D6DCE4;
  --ln-muted:  #8A929C;
  --ln-label:  #9AA3AE;
  --ln-card:   #161B23;
  --ln-edge:   #2A313C;
  --ln-thead:  #1B212B;
  --ln-zebra:  #181E27;
  --ln-rule:   #232A35;
  --ln-chip:   #1F2631;
  --ln-accent: #7FB2EE;
  --ln-accent-d: #5B9BEA;
}
/* Finance: verde do Finance (decisao da equipe), como no resto do modulo */
body.fin-cazura { --ln-accent: #3B6064; --ln-accent-d: #2E4E51; }
html[data-theme="dark"] body.fin-cazura { --ln-accent: #7FB8A5; --ln-accent-d: #6FA894; }

/* ---------- Faixa do topo -> cabecalho limpo ---------- */
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > :first-child:is([class*="bg-gradient"][class*="rounded-"], .theme-header, [class*="-hero"]) {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: var(--ln-ink) !important;
}
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > :first-child:is([class*="bg-gradient"][class*="rounded-"], .theme-header, [class*="-hero"]) :is(h1, h2) {
  font-size: 30px !important; font-weight: 500 !important; color: var(--ln-ink) !important; letter-spacing: -.01em;
}
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > :first-child:is([class*="bg-gradient"][class*="rounded-"], .theme-header, [class*="-hero"]) p {
  color: var(--ln-muted) !important;
}
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > :first-child:is([class*="bg-gradient"][class*="rounded-"], .theme-header, [class*="-hero"]) :is(.text-white, span, strong) {
  color: inherit;
}
/* o bloco do icone ao lado do titulo (o desenho nao tem) */
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > :first-child:is([class*="bg-gradient"][class*="rounded-"], .theme-header, [class*="-hero"]) div:is(.w-12, .w-14, .w-16):is(.h-12, .h-14, .h-16) {
  display: none !important;
}
/* botoes: todos no formato neutro; o branco (a acao principal da tela) vira o acento */
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > :first-child:is([class*="bg-gradient"][class*="rounded-"], .theme-header, [class*="-hero"]) :is(a, button)[class*="rounded-xl"] {
  background: var(--ln-card) !important;
  background-image: none !important;
  color: var(--ln-text) !important;
  border: 1px solid var(--ln-edge) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 9px 14px !important;
}
/* Botao colorido (bg-red-500 PDF, bg-sky-500 Email, bg-purple-500...) que a regra
   acima neutralizou para fundo BRANCO continuava com texto branco: o forms-nova
   (#1085) forca branco em botao de fundo colorido + .text-white e vencia a cor
   daqui -> botao invisivel (Orcamento: PDF, Email, Reenviar, Atualizar status,
   Cancelar; clientes reclamando 29/09). Aqui o fundo ja e branco, entao texto
   escuro. O #id repetido so aumenta a especificidade para vencer aquela regra;
   ficam de fora os que viram acento (bg-white e os verdes), que seguem brancos. */
body.sidebar-nova #conteudo-principal#conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > :first-child:is([class*="bg-gradient"][class*="rounded-"], .theme-header, [class*="-hero"]) :is(a, button)[class*="rounded-xl"]:not(.bg-white):not([class*="bg-emerald-5"]):not([class*="bg-green-5"]):not([class*="bg-emerald-6"]) {
  color: var(--ln-text) !important;
}
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > :first-child:is([class*="bg-gradient"][class*="rounded-"], .theme-header, [class*="-hero"]) :is(a, button)[class*="rounded-xl"]:hover {
  border-color: var(--ln-label) !important;
}
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > :first-child:is([class*="bg-gradient"][class*="rounded-"], .theme-header, [class*="-hero"]) :is(a, button)[class*="rounded-xl"].bg-white {
  background: var(--ln-accent) !important;
  border-color: var(--ln-accent) !important;
  color: #FFF !important;
}
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > :first-child:is([class*="bg-gradient"][class*="rounded-"], .theme-header, [class*="-hero"]) :is(a, button)[class*="rounded-xl"].bg-white:hover {
  background: var(--ln-accent-d) !important;
}
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > :first-child:is([class*="bg-gradient"][class*="rounded-"], .theme-header, [class*="-hero"]) :is(a, button)[class*="rounded-xl"] svg {
  color: currentColor !important;
}
/* selects e etiquetas translucidas que ficavam dentro da faixa */
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > :first-child:is([class*="bg-gradient"][class*="rounded-"], .theme-header, [class*="-hero"]) select {
  background-color: var(--ln-card) !important; color: var(--ln-text) !important;
  border: 1px solid var(--ln-edge) !important; border-radius: 8px !important;
}
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > :first-child:is([class*="bg-gradient"][class*="rounded-"], .theme-header, [class*="-hero"]) :is(.bg-white\/10, .bg-white\/15, .bg-white\/20, .bg-white\/25):not(a):not(button) {
  background: var(--ln-chip) !important; color: var(--ln-text) !important; border-color: var(--ln-edge) !important;
}

/* ---------- Cartoes de numero ---------- */
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > .grid > :is(div, a).bg-white[class*="rounded-"] {
  border: 1px solid var(--ln-edge) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > .grid > a.bg-white[class*="rounded-"]:hover {
  border-color: var(--ln-accent) !important;
}
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > .grid > .bg-white :is(p, span).text-2xl {
  font-size: 28px !important; font-weight: 400 !important; color: var(--ln-ink);
}
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > .grid > .bg-white p.uppercase {
  text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; color: var(--ln-label) !important;
}

/* ---------- Cards (filtros, tabela, formulario) ---------- */
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > .bg-white[class*="rounded-2xl"] {
  border: 1px solid var(--ln-edge) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > .bg-white[class*="rounded-2xl"] > :is(.bg-gray-50, .bg-gray-50\/50):first-child {
  background: transparent !important;
}
/* botao de enviar filtro (roxo, verde-agua, laranja...) no acento */
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) form button[type="submit"]:not(.bg-red-600):not(.bg-rose-600) {
  background: var(--ln-accent) !important;
  background-image: none !important;
  color: #FFF !important;
  box-shadow: none !important;
}

/* ---------- Tabelas ---------- */
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) table thead,
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) table thead tr {
  background: var(--ln-thead) !important;
}
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) table thead th {
  font-size: 12px !important; font-weight: 700 !important; color: var(--ln-label) !important; letter-spacing: .02em;
}
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) table tbody tr {
  border-bottom: 1px solid var(--ln-rule);
}
/* zebra so em linha sem cor propria (linhas de alerta mantem o aviso) */
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) table tbody tr:nth-child(even):not([class*="bg-"]) {
  background: var(--ln-zebra);
}
/* avatar de inicial (quadrado colorido) — igual em toda linha, pesava mais que o nome */
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) table tbody td div.w-10.h-10:not(:has(img)) {
  display: none !important;
}
/* Finance e telas com faixa "de marca" (.fat-hero, .cli-hero...): o fundo vem de
   um <style> da propria tela e tem enfeites em ::before/::after — some tudo. */
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > :first-child:is([class*="bg-gradient"][class*="rounded-"], .theme-header, [class*="-hero"]) { background-image: none !important; overflow: visible !important; }
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > :first-child:is([class*="bg-gradient"][class*="rounded-"], .theme-header, [class*="-hero"])::before, body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > :first-child:is([class*="bg-gradient"][class*="rounded-"], .theme-header, [class*="-hero"])::after { display: none !important; }
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > :first-child:is([class*="bg-gradient"][class*="rounded-"], .theme-header, [class*="-hero"]) :is(h1, h2)[class*="font-black"] { font-weight: 500 !important; }
/* acao principal colorida (o verde "+ Lancar servico" do Finance) = acento, como o botao branco */
body.sidebar-nova #conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > :first-child:is([class*="bg-gradient"][class*="rounded-"], .theme-header, [class*="-hero"]) :is(a, button):is([class*="bg-emerald-5"], [class*="bg-green-5"], [class*="bg-emerald-6"]) {
  background: var(--ln-accent) !important; background-image: none !important;
  border: 1px solid var(--ln-accent) !important; color: #FFF !important; box-shadow: none !important;
  border-radius: 8px !important; font-weight: 600 !important;
}

/* ============================================================
   LEADS DO MARKETING (marketing/lead_marketing_list.html) — tabela do
   Figma "Optivue - Contact CRM Dashboard" (cg3gA8bCsr6Y9EB8g7p1fn, no
   498:3976): cabecalho num trilho cinza arredondado, rotulos sem caixa
   alta, nome numa pilula com a inicial, etiquetas finas com borda,
   linha divisoria fina e sem zebra. So ancoras .ml-* no template.
   ============================================================ */
body.sidebar-nova {
  --ml-edge:  #E6E9E8;
  --ml-rail:  #F6F6F6;
  --ml-rail-edge: #E6E8EA;
  --ml-ink:   #0C0C0C;
  --ml-muted: #929292;
}
html[data-theme="dark"] body.sidebar-nova {
  --ml-edge:  #2A313C;
  --ml-rail:  #1B212B;
  --ml-rail-edge: #2A313C;
  --ml-ink:   #E8ECF2;
  --ml-muted: #8A929C;
}
body.sidebar-nova #conteudo-principal .ml .ml-tabela {
  border: 1px solid var(--ml-edge) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
  padding: 16px 20px 8px;
}
body.sidebar-nova #conteudo-principal .ml .ml-tabela table {
  border-collapse: separate; border-spacing: 0;
}
/* cabecalho: trilho cinza com borda fina e cantos de 8 */
body.sidebar-nova #conteudo-principal .ml .ml-tabela thead tr {
  background: transparent !important; border: 0 !important;
}
body.sidebar-nova #conteudo-principal .ml .ml-tabela thead th {
  background: var(--ml-rail) !important;
  border-top: 1px solid var(--ml-rail-edge);
  border-bottom: 1px solid var(--ml-rail-edge);
  box-shadow: inset 0 2px 3px -2px rgba(0, 0, 0, .05);
  font-size: 12px !important; font-weight: 400 !important;
  text-transform: none !important; letter-spacing: 0 !important;
  color: var(--ml-muted) !important;
  padding-top: 8px !important; padding-bottom: 8px !important;
}
body.sidebar-nova #conteudo-principal .ml .ml-tabela thead th:first-child {
  border-left: 1px solid var(--ml-rail-edge); border-radius: 8px 0 0 8px;
}
body.sidebar-nova #conteudo-principal .ml .ml-tabela thead th:last-child {
  border-right: 1px solid var(--ml-rail-edge); border-radius: 0 8px 8px 0;
}
/* linhas: divisoria fina, sem zebra */
body.sidebar-nova #conteudo-principal .ml .ml-tabela tbody tr {
  background: transparent !important;
}
body.sidebar-nova #conteudo-principal .ml .ml-tabela tbody td {
  border-bottom: 1px solid var(--ml-edge);
  font-size: 14px;
}
body.sidebar-nova #conteudo-principal .ml .ml-tabela tbody tr:last-child td { border-bottom: 0; }
body.sidebar-nova #conteudo-principal .ml .ml-tabela tbody tr:hover td { background: color-mix(in srgb, var(--ml-rail) 70%, transparent); }
body.sidebar-nova #conteudo-principal .ml .ml-tabela tbody { border: 0 !important; }
body.sidebar-nova #conteudo-principal .ml .ml-tabela tbody > tr + tr { border-top: 0 !important; }

/* nome na pilula com a inicial (a "Jane McCarthy" da tabela) */
body.sidebar-nova #conteudo-principal .ml .ml-nome { font-weight: 400 !important; margin-bottom: 4px; }
body.sidebar-nova #conteudo-principal .ml .ml-pessoa {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--ml-edge); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  color: var(--ml-ink); font-size: 14px; line-height: 20px;
  max-width: 100%;
}
body.sidebar-nova #conteudo-principal .ml .ml-av {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ln-accent, #1E5CAD); color: #FFF;
  font-style: normal; font-size: 10px; font-weight: 600;
}
body.sidebar-nova #conteudo-principal .ml .ml-nome ~ p { color: var(--ml-muted) !important; padding-left: 4px; }
body.sidebar-nova #conteudo-principal .ml .ml-data { color: var(--ml-muted) !important; }

/* etiquetas: pilula fina com borda (Lead/Prospect/Customer do desenho) */
body.sidebar-nova #conteudo-principal .ml :is(.ml-origem > span, .ml-pill, .ml-st) {
  border-radius: 999px !important;
  border: 1px solid #EDEDED !important;
  background: #FBFBFB !important;
  color: #434343 !important;
  box-shadow: inset 0 -2px 2px rgba(0, 0, 0, .04);
  font-weight: 400 !important; font-size: 12px !important;
  padding: 3px 9px !important;
  white-space: nowrap;
}
body.sidebar-nova #conteudo-principal .ml .ml-st.ml-st--pend {
  background: #FEF7C3 !important; border-color: #FDE272 !important; color: #A15C07 !important;
}
/* Pendente = amarelo; Convertido = azul da marca; Desqualificado = vermelho (pedido do Fred, 05/10).
   `.ml-st.ml-st--x`: sem a classe dupla a regra generica das pilulas acima
   (:is(.ml-origem > span, ...)) ganhava na especificidade e as cores nunca apareciam. */
body.sidebar-nova #conteudo-principal .ml .ml-st.ml-st--ok {
  background: #E8F0FA !important; border-color: #C3D6EF !important; color: #1E5CAD !important;
}
body.sidebar-nova #conteudo-principal .ml .ml-st.ml-st--desq {
  background: #FEF3F2 !important; border-color: #FECDCA !important; color: #B42318 !important;
}
html[data-theme="dark"] body.sidebar-nova #conteudo-principal .ml :is(.ml-origem > span, .ml-pill, .ml-st) {
  background: #1F2631 !important; border-color: #2A313C !important; color: #C4CDD8 !important;
}
html[data-theme="dark"] body.sidebar-nova #conteudo-principal .ml .ml-st.ml-st--pend { color: #FAC515 !important; }
html[data-theme="dark"] body.sidebar-nova #conteudo-principal .ml .ml-st.ml-st--ok { color: #7FB0EE !important; }
html[data-theme="dark"] body.sidebar-nova #conteudo-principal .ml .ml-st.ml-st--desq { color: #F97066 !important; }