/* ============================================================
   Pro SST — MENU LATERAL NOVO (sidebar dos modulos)
   ------------------------------------------------------------
   Desenho do Figma "Taskboard - Task Management Dashboard Kanban
   View" (file v6plCwzw3SbkYzmCf9myta, frame "Nav" 256x968), com o
   acento azul da Pro SST no lugar do roxo #7147FB do template.

   Ativado por `body.sidebar-nova` — flag por empresa
   (Empresa.painel_sidebar_nova) + override de sessao
   (?sidebar=nova / ?sidebar=classica). ADITIVO: sem a classe no body
   este arquivo e inerte e o menu classico (azul-marinho, caixa alta,
   ativo laranja) renderiza intacto.

   Fase 1: Control (base.html) e Finance (base_finance.html) — os dois
   usam as MESMAS classes de menu (.sidebar-link, .menu-toggle,
   .submenu, .submenu-link). Fase 2 (24/09): Marketing (base_marketing
   .html), menu plano com .menu-link — tratado igual ao .sidebar-link.
   Nenhum link, permissao ou cadeado muda: e so acabamento.

   CSS ESCRITO A MAO DE PROPOSITO: o Tailwind do projeto e bundle
   pre-compilado. Os !important vencem o <style> inline do base.html
   e os style="" dos itens especiais (Agentes IA, Suporte).

   Tokens (extraidos do arquivo pela API do Figma):
     fundo     #FFFFFF · borda direita #F3F5F6 · divisores #DFE4E7
     item      36px · raio 8 · 14/500 #525252 · icone 20
     ativo     fundo tom da marca (#EFEFF8 no template) · 14/600
     submenu   recuo com linha vertical #DFE4E7
     fonte     Plus Jakarta Sans (ja carregada no base.html)
   ============================================================ */

body.sidebar-nova {
  --sb-bg:      #FFFFFF;
  --sb-edge:    #EDF0F2;
  --sb-line:    #DFE4E7;
  --sb-ink:     #282727;
  --sb-text:    #525252;
  --sb-muted:   #8B8B8B;
  --sb-hover:   #F4F6F6;
  --sb-accent:  #1E5CAD;   /* azul Pro SST */
  --sb-accent-d:#153060;
  --sb-tint:    #EAF1FB;
  --sb-warm-bg: #FFF4E0;
  --sb-warm-fg: #9A5B00;
  --sb-font:    "Plus Jakarta Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
html[data-theme="dark"] body.sidebar-nova {
  --sb-bg:      #12171F;
  --sb-edge:    #1F2630;
  --sb-line:    #2A313C;
  --sb-ink:     #E8ECF2;
  --sb-text:    #C4CDD8;
  --sb-muted:   #8A929C;
  --sb-hover:   #1B222C;
  --sb-accent:  #7FB2EE;
  --sb-tint:    rgba(91, 155, 234, .16);
  --sb-warm-bg: rgba(224, 160, 0, .14);
  --sb-warm-fg: #F2C14E;
}

/* ---------- Casca ---------- */
body.sidebar-nova aside {
  background: var(--sb-bg) !important;
  border-right: 1px solid var(--sb-edge);
  box-shadow: none !important;
  font-family: var(--sb-font);
}

/* Utilitarios brancos do markup classico -> tinta do tema claro.
   (o Tailwind escapa a barra: text-white/60 vira .text-white\/60) */
body.sidebar-nova aside .text-white      { color: var(--sb-ink) !important; }
body.sidebar-nova aside .text-white\/50,
body.sidebar-nova aside .text-white\/60,
body.sidebar-nova aside .text-white\/70  { color: var(--sb-muted) !important; }
body.sidebar-nova aside .text-white\/80  { color: var(--sb-text) !important; }
body.sidebar-nova aside .border-white\/10,
body.sidebar-nova aside .border-white\/20 { border-color: var(--sb-line) !important; }
body.sidebar-nova aside .bg-white\/10,
body.sidebar-nova aside .bg-white\/20    { background: var(--sb-hover) !important; }
body.sidebar-nova aside .hover\:bg-white\/5:hover,
body.sidebar-nova aside .hover\:bg-white\/10:hover { background: var(--sb-hover) !important; }
body.sidebar-nova aside .hover\:text-white:hover   { color: var(--sb-ink) !important; }

/* ---------- Logo ---------- */
body.sidebar-nova aside .sb-logo-branco { display: none !important; }
body.sidebar-nova aside .sb-logo-cor    { display: block !important; }
html[data-theme="dark"] body.sidebar-nova aside .sb-logo-branco { display: block !important; }
html[data-theme="dark"] body.sidebar-nova aside .sb-logo-cor    { display: none !important; }
/* Finance desenha a marca em SVG com quadrados brancos */
body.sidebar-nova aside > a:first-child svg rect[fill="#FFFFFF"] { fill: var(--sb-accent-d); }
html[data-theme="dark"] body.sidebar-nova aside > a:first-child svg rect[fill="#FFFFFF"] { fill: #FFFFFF; }

/* ---------- "Empresa ativa" (o seletor "OnPoint Studio" do design) ---------- */
body.sidebar-nova aside .bg-white\/10.rounded-lg {
  background: var(--sb-bg) !important;
  border: 1px solid var(--sb-line);
  border-radius: 8px !important;
}
body.sidebar-nova aside [x-transition].absolute {
  background: var(--sb-bg) !important;
  border-color: var(--sb-line) !important;
  box-shadow: 0 12px 28px rgba(16, 24, 40, .14) !important;
}

/* ---------- Itens de primeiro nivel ---------- */
body.sidebar-nova aside nav { padding-top: 12px !important; }
body.sidebar-nova aside nav.space-y-3 > * + * { margin-top: 2px !important; }
body.sidebar-nova .sidebar-link,
body.sidebar-nova .menu-link,
body.sidebar-nova .menu-toggle {
  height: 36px;
  padding: 0 8px !important;
  gap: 8px !important;
  border-radius: 8px !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--sb-text) !important;
  font-family: var(--sb-font);
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: background-color .15s, color .15s !important;
}
body.sidebar-nova .sidebar-link,
body.sidebar-nova .menu-link { margin: 0 12px !important; }
body.sidebar-nova .menu-group   { margin: 0 12px 2px !important; }
body.sidebar-nova .sidebar-link svg,
body.sidebar-nova .menu-link svg,
body.sidebar-nova .menu-toggle svg {
  width: 20px !important; height: 20px !important;
  color: var(--sb-text) !important;
  filter: none !important;
}
/* setinha do grupo: menor e apagada, como o "ri:arrow-down-s-line" do design */
body.sidebar-nova .menu-toggle > svg:last-child { width: 16px !important; height: 16px !important; color: var(--sb-muted) !important; }
body.sidebar-nova .sidebar-link:hover,
body.sidebar-nova .menu-link:hover,
body.sidebar-nova .menu-toggle:hover { background: var(--sb-hover) !important; color: var(--sb-ink) !important; }

/* Ativo: fundo no tom da marca + texto no acento (o "Design Project" do design).
   Grupo aberto NAO fica pintado — so o item da pagina atual. */
body.sidebar-nova .sidebar-link.active,
body.sidebar-nova .menu-link.active {
  background: var(--sb-tint) !important;
  color: var(--sb-accent) !important;
  font-weight: 600 !important;
}
body.sidebar-nova .sidebar-link.active svg,
body.sidebar-nova .menu-link.active svg { color: var(--sb-accent) !important; }
body.sidebar-nova .menu-toggle.active { background: none !important; color: var(--sb-ink) !important; font-weight: 600 !important; }
body.sidebar-nova .menu-toggle.active:hover { background: var(--sb-hover) !important; }

/* ---------- Submenu ---------- */
body.sidebar-nova .submenu {
  margin: 2px 0 6px 17px !important;
  padding-left: 9px !important;
  border-left: 1px solid var(--sb-line) !important;
}
body.sidebar-nova .submenu-link {
  min-height: 34px;
  padding: 7px 10px !important;
  margin-bottom: 1px !important;
  border-radius: 8px !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--sb-text) !important;
  font-family: var(--sb-font);
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.3;
}
body.sidebar-nova .submenu-link::before { display: none !important; }
body.sidebar-nova .submenu-link:hover { background: var(--sb-hover) !important; color: var(--sb-ink) !important; }
body.sidebar-nova .submenu-link.active {
  background: var(--sb-tint) !important;
  color: var(--sb-accent) !important;
  font-weight: 600 !important;
}
/* divisores dentro dos submenus (Configuracoes) */
body.sidebar-nova .submenu .border-t { border-color: var(--sb-line) !important; }

/* ---------- Itens com cor propria no classico ---------- */
/* separadores inline "border-top: rgba(255,255,255,.15)" */
body.sidebar-nova aside nav > div[style*="border-top"] { border-top-color: var(--sb-line) !important; }
/* Agentes IA: gradiente roxo inline -> item comum */
body.sidebar-nova .menu-toggle[style] { background: none !important; }
body.sidebar-nova .menu-toggle[style]:hover { background: var(--sb-hover) !important; }
/* Suporte Pro SST: segue em destaque, mas no tom quente suave do tema claro */
body.sidebar-nova .sidebar-link[style] {
  background: var(--sb-warm-bg) !important;
  color: var(--sb-warm-fg) !important;
  font-weight: 600 !important;
}
body.sidebar-nova .sidebar-link[style] svg { color: var(--sb-warm-fg) !important; }
body.sidebar-nova .sidebar-link[style]:hover { filter: brightness(.98); }
body.sidebar-nova .sidebar-link span[style*="border-radius: 999px"] { box-shadow: 0 0 0 1px var(--sb-warm-fg); }

/* Item sem permissao continua com o cadeado, so no tom claro */
body.sidebar-nova .sidebar-link.locked,
body.sidebar-nova .submenu-link.locked,
body.sidebar-nova .menu-toggle.locked { opacity: .5; }

/* ---------- Rodape (Trocar painel + usuario) ---------- */
body.sidebar-nova aside .bg-white\/20.rounded-lg { background: var(--sb-tint) !important; color: var(--sb-accent) !important; }
body.sidebar-nova aside .hover\:text-red-400:hover { color: #D93025 !important; }

/* ============================================================
   FINANCE: menu lateral do Figma "Cazura" (so no Finance — decisao
   da equipe em 24/09; os outros modulos seguem com o Taskboard).
   body.fin-cazura so existe junto de body.sidebar-nova (base_finance.html).
   Fundo cinza, item ativo como cartao claro com borda, e o conteudo
   (topbar + pagina) num painel arredondado. Verde do Finance.
   ============================================================ */
body.fin-cazura {
  --sb-bg:     #F4F4F4;
  --sb-edge:   transparent;
  --sb-line:   #E0E0E0;
  --sb-ink:    #060F0D;
  --sb-text:   #727272;
  --sb-muted:  #A5A5A5;
  --sb-hover:  #EDEDED;
  --sb-accent: #3B6064;
  --sb-tint:   #F8F8F8;
  --sb-panel:  #F8F8F8;
  background: var(--sb-bg) !important;
}
html[data-theme="dark"] body.fin-cazura {
  --sb-bg:     #0B0F0D;
  --sb-line:   #25302C;
  --sb-ink:    #E6EEEA;
  --sb-text:   #9AA7A2;
  --sb-muted:  #66726E;
  --sb-hover:  #141A18;
  --sb-accent: #7FB8A5;
  --sb-tint:   #161C1A;
  --sb-panel:  #121816;
}
body.fin-cazura aside { border-right: 0 !important; }

/* item ativo = cartao claro com borda (o "Overview" do desenho) */
body.fin-cazura .sidebar-link,
body.fin-cazura .menu-toggle,
body.fin-cazura .submenu-link { font-weight: 400 !important; border: 1px solid transparent; }
body.fin-cazura .sidebar-link.active,
body.fin-cazura .submenu-link.active {
  background: var(--sb-tint) !important;
  border-color: var(--sb-line);
  color: var(--sb-accent) !important;
  font-weight: 700 !important;
}
body.fin-cazura .sidebar-link svg,
body.fin-cazura .menu-toggle svg { color: var(--sb-text) !important; }
body.fin-cazura .sidebar-link.active svg { color: var(--sb-accent) !important; }
body.fin-cazura .menu-toggle.active { font-weight: 600 !important; }

/* o conteudo (topbar + pagina) num painel arredondado sobre o fundo cinza.
   overflow: clip (e nao hidden) para nao quebrar a topbar sticky. */
body.fin-cazura div:has(> header.sticky) {
  margin: 12px 12px 12px 0;
  background: var(--sb-panel);
  border: 1px solid var(--sb-line);
  border-radius: 12px;
  overflow: clip;
  min-height: calc(100vh - 24px) !important;
}
body.fin-cazura header.sticky { background: var(--sb-panel) !important; border-bottom-color: #EBEBEB !important; }
html[data-theme="dark"] body.fin-cazura header.sticky { border-bottom-color: var(--sb-line) !important; }
@media (max-width: 1023px) {
  body.fin-cazura div:has(> header.sticky) { margin: 0; border-radius: 0; border: 0; }
}