/* =============================================================
   O MENU EM GRUPOS
   -------------------------------------------------------------
   O cabeçalho de grupo tem a medida de um item de menu (mesmo
   espaçamento, ícone e corpo de letra) para as oito entradas
   parecerem uma lista só; o que muda é a setinha, e os itens de
   dentro, que entram recuados sob um fio.
============================================================= */

/* Os grupos eram seções separadas por 20px, com um rótulo cada. Agora
   são linhas de menu: o espaço entre elas é o de qualquer item. */
.sidebar-nav.com-grupos { gap: 4px; }

.nav-grupo-cab {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.nav-grupo-cab > i {
    width: 17px;
    flex: 0 0 auto;
    font-size: 15px;
    text-align: center;
    opacity: .8;
}
.nav-grupo-cab > span { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-grupo-cab:hover { background: var(--surface-2); color: var(--text); }
.nav-grupo-cab:hover > i { opacity: 1; }

.nav-grupo-cab .nav-seta {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    stroke: currentColor;
    opacity: .55;
    transition: transform var(--t-fast), opacity var(--t-fast);
}
.nav-grupo.is-aberto > .nav-grupo-cab .nav-seta { transform: rotate(90deg); opacity: .9; }

/* O grupo onde a pessoa está: a cor de marca no ícone e no nome, sem
   pintar o fundo — o fundo é do item ativo, lá dentro. */
.nav-grupo.tem-ativo > .nav-grupo-cab { color: var(--text-strong); font-weight: 600; }
.nav-grupo.tem-ativo > .nav-grupo-cab > i { color: var(--accent); opacity: 1; }

.nav-sub {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 6px 20px;
    padding-left: 10px;
    border-left: 1px solid var(--border-soft);
    animation: nav-sub-entra .16s ease-out;
}
.nav-sub[hidden] { display: none; }
.nav-sub .nav-item { padding: 8px 10px; font-size: 13px; }

/* Só opacidade e um deslize curto: animar a ALTURA deslocaria os itens
   de baixo enquanto o farol (menu.js) ainda está medindo onde o item
   ativo está. */
@keyframes nav-sub-entra {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .nav-sub { animation: none; } }

/* ---- Menu recolhido (só ícones): sem cabeçalhos, tudo à vista ----
   Numa coluna de 76px um cabeçalho de grupo seria um ícone que não leva
   a lugar nenhum. Os itens aparecem todos, e um fio separa um grupo do
   outro. */
.app-layout.sidebar-collapsed .nav-grupo-cab { display: none; }
.app-layout.sidebar-collapsed .nav-sub {
    display: flex !important;
    margin: 0;
    padding: 0;
    border: 0;
    animation: none;
}
.app-layout.sidebar-collapsed .nav-sub .nav-item { padding: 11px 0; }
.app-layout.sidebar-collapsed .nav-grupo {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
}

/* ---- Modo simples: os cabeçalhos somem e o que sobrou fica solto ----
   Com quatro itens visíveis, um grupo por linha só criaria cliques a
   mais. (O modo simples já esconde os itens avançados e os grupos que
   ficam sem nenhum.) */
body.modo-simples .nav-grupo-cab { display: none; }
body.modo-simples .nav-sub {
    display: flex !important;
    margin: 0;
    padding: 0;
    border: 0;
    animation: none;
}
body.modo-simples .nav-sub .nav-item { padding: 10px 12px; font-size: 13.5px; }

/* =============================================================
   AS ABAS DO AJUSTES
============================================================= */

/* Classe própria (e não `hidden`) porque alguns blocos já se escondem
   sozinhos por permissão usando `hidden`, e as duas coisas não podem
   brigar. */
#tab-settings > .settings-group.st-fora { display: none; }

/* Os números 00, 01, 3B ordenavam a rolagem comprida. Com as abas eles
   viram ruído: o "3B" isolado numa aba não diz nada. */
#tab-settings .settings-group-index { display: none; }

.st-secoes { margin-bottom: 18px; }

/* =============================================================
   ÍCONES DO MENU, TODOS IGUAIS
   -------------------------------------------------------------
   Scripts, WhatsApp Oficial, Anúncios e Instagram usam ícone de fonte
   com `margin-right` e `color` escritos no próprio HTML. Isso os
   empurrava 8px para a direita dos demais e os pintava de verde
   mesmo fora de seleção. Dentro de um submenu recuado a diferença
   ficava evidente; a regra abaixo vence o estilo inline.
============================================================= */
.sidebar-nav .nav-item > i[style] { margin-right: 0 !important; color: inherit !important; }
.sidebar-nav .nav-item.active > i[style] { color: var(--accent) !important; }