/*
 * Redesign — Etapa 5, sub-etapa 7: Ícones do menu.
 *
 * Achado: a COR do icone ja veio certa de graca desde a Etapa 2 - os
 * SVGs do catalogo navMenuIconSvg() usam stroke="currentColor", entao
 * herdam a cor que ja redefinimos em .docs-sidebar__link-inner/
 * .docs-sidebar__category-title. Nao precisa de nada novo pra cor.
 *
 * O que faltava de verdade: TAMANHO. As regras de tamanho de
 * `.nav-icon` que ja existem (pro-ui.css:163s, index.php:12528) sao
 * escopadas a `.app-sidebar` (modo "classico") - o modo realmente ativo
 * e' `.docs-sidebar` (confirmado na Etapa 2), que nao tinha NENHUMA
 * regra de tamanho pro `.nav-icon`. Isso nao e' uma mudanca de algo que
 * já existia - e' preencher uma lacuna, igual aconteceu com .status-pill
 * na sub-etapa 2.
 *
 * Tamanho 15px vem direto do App.tsx do Figma (<item.icon size={15}/>).
 */

body[data-theme-preset="dark"] .docs-sidebar .nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
body[data-theme-preset="dark"] .docs-sidebar .nav-icon svg {
  width: 100%;
  height: 100%;
}

/* Atualizacao: o markup do <span class="nav-icon"> nao existia de
   verdade em renderDocsSidebarNode() (so no menu "classico") - as
   regras acima ficaram sem efeito ate essa funcao ganhar a chamada
   pra renderNavMenuIcon(), so no item de topo (depth 0), igual o menu
   classico ja faz. Isso mudou o HTML (nao so CSS), entao o link-inner
   precisa virar flex pra alinhar icone + rotulo lado a lado. */
body[data-theme-preset="dark"] .docs-sidebar__link-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}
body[data-theme-preset="dark"] .docs-sidebar__label {
  flex: 1;
  min-width: 0;
}

/* Preset claro fica intocado (decisao do cliente): o span do icone
   agora existe no HTML pros dois presets, mas so deve APARECER no
   escuro - no claro ele fica oculto, mantendo o layout exatamente
   como era antes desta mudanca. */
body:not([data-theme-preset="dark"]) .docs-sidebar .nav-icon {
  display: none;
}

/* Mesma logica de icone + rotulo lado a lado, agora tambem pro
   cabecalho de grupo (Sistemas/Servicos/Financeiro), que usa um
   <button class="docs-sidebar__category-title"> em vez do link. */
body[data-theme-preset="dark"] .docs-sidebar__category-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Fidelidade ao Figma (App.tsx): no item ATIVO, o icone fica na cor de
   destaque (accent/cyan) - uma cor DIFERENTE do texto do item, que fica
   num tom claro/quase-branco. No item inativo, o icone fica ainda mais
   apagado que o proprio texto (60% de opacidade). Ate aqui o icone so
   herdava currentColor do texto (mesma cor sempre) - agora tem cor
   propria nos dois estados, igual ao mock. */
body[data-theme-preset="dark"] .docs-sidebar__link .nav-icon,
body[data-theme-preset="dark"] .docs-sidebar__category-title .nav-icon {
  color: color-mix(in srgb, var(--ds-sidebar-foreground) 60%, transparent);
}
body[data-theme-preset="dark"] .docs-sidebar__link.is-active .nav-icon,
body[data-theme-preset="dark"] .docs-sidebar__category.is-active-branch > .docs-sidebar__category-head .docs-sidebar__category-title .nav-icon {
  color: var(--ds-accent);
}