/* =============================================================================
   Camada do MODO SST+  (Opcao 2 / Fase 2 — adapta o "miolo" das telas internas)

   Escopada em `body.sst-plus` -> so tem efeito quando o modo SST+ esta ativo
   (context_processor sst_plus_context). Aditiva e reversivel: fora do modo, o
   Control classico permanece 100% intacto. Em vez de reescrever as 276 telas,
   padronizamos aqui os COMPONENTES COMPARTILHADOS que quase toda tela usa
   (.theme-header, botoes, cards, topo) na paleta exata do painel SST+.
   Refina progressivamente: telas com marcacao propria podem ganhar ajuste fino
   depois, mas a base ja fica coerente em todo o sistema.
   ========================================================================== */

:root { }

/* Paleta SST+ (navy da marca + azulzinho) */
body.sst-plus {
  --plus-from: #153060;
  --plus-to:   #1E5CAD;
}

/* --- Fundo da area de conteudo: cinza claro do SST+ --------------------- */
body.sst-plus main#conteudo-principal {
  background: #f4f5f7;
}

/* --- Faixa do topo de cada tela (theme-header) e variantes -------------- */
/* Uniformiza para o navy SST+, independente do tema white-label do tenant, */
/* para todas as telas terem a mesma cara do Dashboard SST+.               */
body.sst-plus .theme-header,
body.sst-plus .theme-header-alt {
  background: linear-gradient(135deg, #153060 0%, #1E5CAD 100%) !important;
  box-shadow: 0 10px 24px -12px rgba(21, 48, 96, 0.45) !important;
}

/* --- Botoes primarios / toggles -> azul-marca chapado ------------------- */
body.sst-plus .theme-btn-primary,
body.sst-plus .btn-primary,
body.sst-plus .theme-toggle-active {
  background: linear-gradient(135deg, #153060 0%, #1E5CAD 100%) !important;
  box-shadow: 0 8px 16px -8px rgba(21, 48, 96, 0.40) !important;
}
body.sst-plus .theme-btn-primary:hover,
body.sst-plus .btn-primary:hover {
  background: linear-gradient(135deg, #1E5CAD 0%, #2f6fca 100%) !important;
}

/* Texto/realce da marca (ex.: botao branco com texto do tema) */
body.sst-plus .theme-text { color: #1E5CAD !important; }
body.sst-plus .theme-icon { color: #1E5CAD !important; }

/* --- Cards brancos: cantos e sombra no padrao suave do SST+ ------------- */
body.sst-plus .bg-white.rounded-xl,
body.sst-plus .bg-white.rounded-2xl {
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.04) !important;
  border-color: #eef0f3 !important;
}

/* --- Topo (topbar): elementos com gradiente do tema -> navy SST+ -------- */
body.sst-plus .unit-selector-icon,
body.sst-plus .dropdown-header,
body.sst-plus .user-avatar {
  background: linear-gradient(135deg, #153060 0%, #1E5CAD 100%) !important;
}

/* Foco de inputs na cor da marca */
body.sst-plus .theme-input:focus {
  border-color: #1E5CAD !important;
  box-shadow: 0 0 0 4px rgba(30, 92, 173, 0.10) !important;
}

/* --- Botoes de acao no cabecalho navy (.theme-header) -> sobrios --------- */
/* O topo do detalhe (cliente/lead) tinha um "arco-iris" de botoes solidos
   (azul/indigo/violeta/roxo). Unifica todos no estilo translucido branco
   (limpo e organizado), mantendo o WhatsApp (emerald/green) na cor de marca e
   o Editar (bg-white) como esta. Vale para todos os .theme-header do sistema. */
body.sst-plus .theme-header a[class*="bg-blue-5"],
body.sst-plus .theme-header button[class*="bg-blue-5"],
body.sst-plus .theme-header a[class*="bg-blue-6"],
body.sst-plus .theme-header button[class*="bg-blue-6"],
body.sst-plus .theme-header a[class*="bg-indigo-"],
body.sst-plus .theme-header button[class*="bg-indigo-"],
body.sst-plus .theme-header a[class*="bg-violet-"],
body.sst-plus .theme-header button[class*="bg-violet-"],
body.sst-plus .theme-header a[class*="bg-purple-"],
body.sst-plus .theme-header button[class*="bg-purple-"],
body.sst-plus .theme-header a[class*="bg-sky-"],
body.sst-plus .theme-header button[class*="bg-sky-"] {
  background-color: rgba(255, 255, 255, 0.15) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: none !important;
}
body.sst-plus .theme-header a[class*="bg-blue-5"]:hover,
body.sst-plus .theme-header button[class*="bg-blue-5"]:hover,
body.sst-plus .theme-header a[class*="bg-indigo-"]:hover,
body.sst-plus .theme-header button[class*="bg-indigo-"]:hover,
body.sst-plus .theme-header a[class*="bg-violet-"]:hover,
body.sst-plus .theme-header button[class*="bg-violet-"]:hover,
body.sst-plus .theme-header a[class*="bg-purple-"]:hover,
body.sst-plus .theme-header button[class*="bg-purple-"]:hover {
  background-color: rgba(255, 255, 255, 0.28) !important;
}

/* --- Cards de estatistica CHAPADOS -> brancos com numero na cor --------- */
/* Estilo FluxoMed: a cor sai do fundo e vai pro NUMERO. Padrao repetido em
   varios dashboards/listas: `bg-gradient-to-br from-<cor>-500/600 p-4 rounded-xl`
   com numero `.text-white` e rotulo `.text-<cor>-100`. Resolvido aqui de uma
   vez (lista de OS, dashboards, etc.), mantendo o significado da cor. */
body.sst-plus a.bg-gradient-to-br.p-4.rounded-xl,
body.sst-plus div.bg-gradient-to-br.p-4.rounded-xl,
body.sst-plus label.bg-gradient-to-br.p-4.rounded-xl {
  background-image: none !important;
  background-color: #ffffff !important;
  border: 1px solid #eef0f3 !important;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06) !important;
}
/* Numero: cor conforme o significado do card (a partir do from-*) */
body.sst-plus .bg-gradient-to-br.p-4.rounded-xl.from-gray-700 .text-white,
body.sst-plus .bg-gradient-to-br.p-4.rounded-xl.from-slate-700 .text-white,
body.sst-plus .bg-gradient-to-br.p-4.rounded-xl.from-slate-800 .text-white,
body.sst-plus .bg-gradient-to-br.p-4.rounded-xl.from-gray-800 .text-white { color: #1e293b !important; }
body.sst-plus .bg-gradient-to-br.p-4.rounded-xl.from-amber-500 .text-white,
body.sst-plus .bg-gradient-to-br.p-4.rounded-xl.from-amber-400 .text-white { color: #d97706 !important; }
body.sst-plus .bg-gradient-to-br.p-4.rounded-xl.from-blue-500 .text-white,
body.sst-plus .bg-gradient-to-br.p-4.rounded-xl.from-blue-600 .text-white,
body.sst-plus .bg-gradient-to-br.p-4.rounded-xl.from-sky-500 .text-white { color: #2563eb !important; }
body.sst-plus .bg-gradient-to-br.p-4.rounded-xl.from-emerald-500 .text-white,
body.sst-plus .bg-gradient-to-br.p-4.rounded-xl.from-green-500 .text-white { color: #059669 !important; }
body.sst-plus .bg-gradient-to-br.p-4.rounded-xl.from-red-500 .text-white,
body.sst-plus .bg-gradient-to-br.p-4.rounded-xl.from-rose-600 .text-white,
body.sst-plus .bg-gradient-to-br.p-4.rounded-xl.from-rose-500 .text-white { color: #dc2626 !important; }
body.sst-plus .bg-gradient-to-br.p-4.rounded-xl.from-orange-500 .text-white { color: #ea580c !important; }
body.sst-plus .bg-gradient-to-br.p-4.rounded-xl.from-teal-500 .text-white { color: #0d9488 !important; }
body.sst-plus .bg-gradient-to-br.p-4.rounded-xl.from-purple-500 .text-white,
body.sst-plus .bg-gradient-to-br.p-4.rounded-xl.from-violet-500 .text-white,
body.sst-plus .bg-gradient-to-br.p-4.rounded-xl.from-indigo-500 .text-white { color: #6d28d9 !important; }
/* Rotulo (era claro sobre cor) -> cinza legivel sobre branco */
body.sst-plus .bg-gradient-to-br.p-4.rounded-xl [class*="text-"][class*="-100"],
body.sst-plus .bg-gradient-to-br.p-4.rounded-xl .text-gray-300,
body.sst-plus .bg-gradient-to-br.p-4.rounded-xl .text-white\/70,
body.sst-plus .bg-gradient-to-br.p-4.rounded-xl .text-white\/80 { color: #6b7280 !important; }

/* --- Cabecalhos de SECAO com px-5/py-4 (teal/rosa/laranja...) -> navy ---- */
/* Cards do detalhe de lead usam cabecalho `px-5 py-4 bg-gradient-to-r
   from-<cor>-500` com texto branco. Exigir py-4/py-5 evita pegar botoes (py-2).*/
body.sst-plus .px-5.py-4.bg-gradient-to-r,
body.sst-plus .px-5.py-5.bg-gradient-to-r,
body.sst-plus .px-6.py-4.bg-gradient-to-r,
body.sst-plus .px-6.py-5.bg-gradient-to-r,
body.sst-plus .px-4.py-4.bg-gradient-to-r {
  background-image: linear-gradient(135deg, #153060 0%, #1E5CAD 100%) !important;
}

/* --- Card Pos-Venda (lavanda claro, texto escuro) -> branco limpo ------- */
/* Estava ilegivel (texto azul sobre fundo escuro). Vira card branco e o
   texto indigo escuro fica legivel. */
/* IMPORTANTE: mirar so gradientes CLAROS (from-*-50), que sempre tem texto
   ESCURO. NAO usar padding (p-6 etc.) porque cabecalhos de pagina tambem sao
   `p-6 bg-gradient-to-r ... rounded-2xl` mas com texto BRANCO — vira-los
   brancos sumia o titulo. from-*-500 (headers) fica navy pelas regras acima. */
body.sst-plus .bg-gradient-to-r.rounded-2xl.from-indigo-50,
body.sst-plus .bg-gradient-to-r.rounded-2xl.from-purple-50,
body.sst-plus .bg-gradient-to-r.rounded-2xl.from-amber-50,
body.sst-plus .bg-gradient-to-r.rounded-2xl.from-orange-50,
body.sst-plus .bg-gradient-to-r.rounded-2xl.from-blue-50,
body.sst-plus .bg-gradient-to-r.rounded-2xl.from-emerald-50,
body.sst-plus .bg-gradient-to-r.rounded-2xl.from-slate-50,
body.sst-plus .bg-gradient-to-r.rounded-2xl.from-gray-50,
body.sst-plus .bg-gradient-to-br.rounded-2xl.from-indigo-50,
body.sst-plus .bg-gradient-to-br.rounded-2xl.from-purple-50,
body.sst-plus .bg-gradient-to-br.rounded-2xl.from-slate-50 {
  background-image: none !important;
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
}

/* --- PROTECAO: cabecalhos com gradiente CLARO neutro NAO viram navy ------ */
/* Ex.: `px-6 py-4 bg-gradient-to-r from-gray-50 to-white` (cabecalhos de card
   do dashboard central) tem TEXTO ESCURO. As regras de navy acima pegam por
   padding e os pintavam de navy -> texto preto no navy = ilegivel. Aqui
   restauramos o fundo claro. O `body.sst-plus.sst-plus.sst-plus` da
   especificidade suficiente para vencer as regras de navy independente da
   ordem. Os gradientes claros COLORIDOS (from-indigo-50 etc.) ja viram branco
   pela regra acima; aqui cobrimos os neutros gray/slate/white. */
body.sst-plus.sst-plus.sst-plus .bg-gradient-to-r.from-gray-50,
body.sst-plus.sst-plus.sst-plus .bg-gradient-to-r.from-slate-50,
body.sst-plus.sst-plus.sst-plus .bg-gradient-to-r.from-white,
body.sst-plus.sst-plus.sst-plus .bg-gradient-to-r.from-gray-100,
body.sst-plus.sst-plus.sst-plus .bg-gradient-to-r.from-slate-100,
body.sst-plus.sst-plus.sst-plus .bg-gradient-to-br.from-gray-50,
body.sst-plus.sst-plus.sst-plus .bg-gradient-to-br.from-slate-50,
body.sst-plus.sst-plus.sst-plus .bg-gradient-to-b.from-gray-50 {
  background-image: none !important;
  background-color: #f9fafb !important;
}

/* --- Suaviza E DIMINUI os KPI cards dos dashboards --------------------- */
/* KPI cards = `.group.relative.rounded-2xl.p-6` (Dashboard central e CRM).
   Mira `.group.relative` para NAO afetar o container do funil (que e
   rounded-2xl p-6 mas sem group/relative). Card menor (menos padding), numero
   mais leve (600) e menor, chip de icone menor, e some o circulo decorativo.
   So no modo SST+. */
body.sst-plus .group.relative.rounded-2xl.p-6 {
  padding: 1.1rem 1.25rem !important;
}
body.sst-plus .group.relative.rounded-2xl .text-4xl {
  font-size: 1.7rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}
body.sst-plus .group.relative.rounded-2xl .text-3xl {
  font-size: 1.55rem !important;
  font-weight: 600 !important;
}
body.sst-plus .group.relative.rounded-2xl .w-14.h-14 {
  width: 2.5rem !important;
  height: 2.5rem !important;
  margin-bottom: 0.5rem !important;
  border-radius: 0.7rem !important;
}
body.sst-plus .group.relative.rounded-2xl .w-14.h-14 svg {
  width: 1.15rem !important;
  height: 1.15rem !important;
}
/* Circulo decorativo borrado no canto dos cards -> some (ruido visual) */
body.sst-plus .group.relative.rounded-2xl .absolute.rounded-full,
body.sst-plus .rounded-2xl.p-6 > .absolute.rounded-full {
  display: none !important;
}
/* Chip de icone: tira a sombra colorida forte (fica sobrio) */
body.sst-plus [class*="shadow-blue-500"],
body.sst-plus [class*="shadow-emerald-500"],
body.sst-plus [class*="shadow-amber-500"],
body.sst-plus [class*="shadow-purple-500"],
body.sst-plus [class*="shadow-primary-500"],
body.sst-plus [class*="shadow-indigo-500"] {
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06) !important;
}

/* --- Sub-faixas de SECAO (roxo/verde/indigo/ambar...) -> navy SST+ ------ */
/* Nos formularios/detalhes, cada bloco tem um cabecalho colorido escrito
   direto no template (ex.: `px-6 py-5 bg-gradient-to-r from-violet-500
   to-purple-500`). Nao e classe compartilhada, mas segue um PADRAO: faixa de
   secao = padding horizontal px-6 + gradiente. Miramos exatamente esse padrao
   (px-6 + bg-gradient-to-r/br) para uniformizar TODAS as faixas de secao de
   uma vez, sem tocar em botoes, badges ou cards de status (que usam padding
   menor ou `p-*`, nao `px-6`). Sobrescreve o background-image inteiro, entao
   independe de qual par de cores o template usou. */
body.sst-plus .px-6.bg-gradient-to-r,
body.sst-plus .px-6.bg-gradient-to-br,
body.sst-plus .px-6.bg-gradient-to-l,
body.sst-plus .px-8.bg-gradient-to-r,
body.sst-plus .px-8.bg-gradient-to-br {
  background-image: linear-gradient(135deg, #153060 0%, #1E5CAD 100%) !important;
}

/* --- Headers-heroi dos dashboards (p-6/p-8 + gradiente) -> navy --------- */
/* Ex.: Dashboard CRM usa `rounded-3xl bg-gradient-to-r from-blue-600
   to-indigo-700 p-8`. Como e `p-*` (nao `px-*`), o bloco acima nao pegava. */
body.sst-plus .p-6.bg-gradient-to-r,
body.sst-plus .p-6.bg-gradient-to-br,
body.sst-plus .p-8.bg-gradient-to-r,
body.sst-plus .p-8.bg-gradient-to-br {
  background-image: linear-gradient(135deg, #153060 0%, #1E5CAD 100%) !important;
}

/* --- Quadradinhos de ICONE com gradiente colorido -> navy -------------- */
/* Os stat-cards dos dashboards usam icones `w-14 h-14 bg-gradient-to-br
   from-blue-500 ...` (azul/verde/ambar/roxo) = visual "arco-iris". Uniformiza
   para navy. NAO afeta as cores de ETAPA (funil/kanban), que sao inline
   `style="background-color: etapa.cor"` — CSS de classe nao alcanca estilo
   inline, entao a identidade das etapas fica preservada. */
body.sst-plus .w-14.h-14.bg-gradient-to-br,
body.sst-plus .w-12.h-12.bg-gradient-to-br,
body.sst-plus .w-11.h-11.bg-gradient-to-br,
body.sst-plus .w-10.h-10.bg-gradient-to-br,
body.sst-plus .w-14.h-14.bg-gradient-to-r,
body.sst-plus .w-12.h-12.bg-gradient-to-r,
body.sst-plus .w-10.h-10.bg-gradient-to-r {
  background-image: linear-gradient(135deg, #153060 0%, #1E5CAD 100%) !important;
}