/* ============================================================
   Pro SST — SIDEBAR NA COR DA MARCA (desenho "Morning")
   ------------------------------------------------------------
   Figma "Morning - Top Product Page Sales Dashboard"
   (Blig3ZjX5p4eMbdbEhsew5, no 207:147): sidebar em creme #F4F1EA com
   divisoria #D0D5DD, item ativo numa pilula de raio 10 em degrade
   horizontal (#FDCBF1 -> #E6DEE9), texto ativo #23272A/600 e os demais
   #666D80/500. O rosa do desenho vira a COR DA MARCA do cliente
   (--marca/--marca-2, do tema da empresa; ver
   core.context_processors._sidebar_marca), meio-termo entre o branco da
   repaginacao e a sidebar colorida antiga.

   Liga com body.sidebar-marca (por cima de body.sidebar-nova): toda empresa
   com a sidebar nova (piloto na Pro SST, aberto aos clientes em 25/09), na
   cor do tema da rede — a mesma regra da sidebar antiga (tema_empresa).
   So no tema claro — o escuro segue o da sidebar nova.
   ============================================================ */

html:not([data-theme="dark"]) body.sidebar-marca {
  --sb-bg:    color-mix(in srgb, var(--marca) 2%, #F4F1EA);
  --sb-line:  #D0D5DD;
  --sb-edge:  #D0D5DD;
  --sb-hover: color-mix(in srgb, var(--marca) 8%, #EFEBE3);
  --sb-ink:   #23272A;
  --sb-text:  #666D80;
  --sb-muted: #8A8F9C;
  --sb-accent: var(--marca);
  /* como no desenho (#FDCBF1 -> #E6DEE9): a cor da marca bem presente a
     esquerda e um neutro quente a direita, que se funde com o creme. Com
     pouco contraste (marca e apoio em tons parecidos, caso da Pro SST) o
     degrade some e vira um bloco chapado. */
  --mc-ativo: linear-gradient(90deg,
                color-mix(in srgb, var(--marca) 34%, #FFFFFF) 0%,
                color-mix(in srgb, var(--marca) 16%, #F7F3F4) 45%,
                color-mix(in srgb, var(--marca-2) 5%, #E9E4E1) 100%);
}

html:not([data-theme="dark"]) body.sidebar-marca aside {
  background: var(--sb-bg) !important;
  border-right: 1px solid var(--sb-line) !important;
}

/* item ativo: a pilula em degrade do desenho, na cor da marca */
html:not([data-theme="dark"]) body.sidebar-marca :is(.sidebar-link, .menu-link, .submenu-link).active {
  background: var(--mc-ativo) !important;
  color: var(--sb-ink) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}
html:not([data-theme="dark"]) body.sidebar-marca :is(.sidebar-link, .menu-link, .submenu-link).active svg {
  color: var(--marca) !important;
}

/* demais itens: cinza do desenho, escurece no hover */
html:not([data-theme="dark"]) body.sidebar-marca :is(.sidebar-link, .menu-link, .menu-toggle):not(.active) {
  color: var(--sb-text) !important;
}
html:not([data-theme="dark"]) body.sidebar-marca :is(.sidebar-link, .menu-link, .menu-toggle, .submenu-link):hover {
  background: var(--sb-hover) !important;
  color: var(--sb-ink) !important;
}

/* caixa "Empresa ativa" e rodape: cartao claro sobre o creme (o card
   "Upgrade Premium" do desenho: borda #D0D5DD, raio 20) */
html:not([data-theme="dark"]) body.sidebar-marca aside .bg-white\/10.rounded-lg {
  background: color-mix(in srgb, #FFFFFF 60%, var(--sb-bg)) !important;
  border-color: var(--sb-line) !important;
  border-radius: 12px !important;
}