/* ═══════════════════════════════════════════════════════════════════════
   RAVVO — V17 menu em acordeão + logo clicável            2026-09-10
   Pareia com js/v17-menu-accordion.js.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── título da categoria vira botão ── */
.sidebar-nav .nav-section-title[data-accordion] {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  padding: 9px 12px;
  margin-bottom: 2px;
  border-radius: var(--radius-sm);
  transition: background .15s, color .15s;
}
.sidebar-nav .nav-section-title[data-accordion]:hover {
  background: var(--bg-card);
  color: var(--text-secondary);
}
.sidebar-nav .nav-section-title[data-accordion]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* o ponto de pendência fica colado no texto, antes da seta */
.sidebar-nav .nav-section-title[data-accordion] { position: relative; }

/* seta: aponta pra direita fechado, pra baixo aberto */
.sidebar-nav .nav-section-title[data-accordion]::after {
  content: "";
  margin-left: auto;
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transform-origin: center;
  opacity: .55;
  transition: transform .18s ease, opacity .15s;
  flex-shrink: 0;
}
.sidebar-nav .nav-section.nav-open > .nav-section-title[data-accordion]::after {
  transform: rotate(45deg);
  opacity: .9;
}

/* categoria aberta ganha destaque discreto */
.sidebar-nav .nav-section.nav-open > .nav-section-title[data-accordion] {
  color: var(--text-primary);
}

/* ── o corpo: some quando fechado ──
   `:where()` zera a especificidade do :has(). Sem isso a regra de esconder
   (0,5,0) venceria a de mostrar (0,4,0) e a seção aberta ficaria vazia —
   foi exatamente o que aconteceu no primeiro teste. */
.sidebar-nav .nav-section:has(> :where(.nav-section-title[data-accordion])) > .nav-item {
  display: none;
}
.sidebar-nav .nav-section.nav-open > .nav-item {
  display: flex;
}

/* Fallback para navegador sem :has() — o JS marca as seções tratadas.
   Sem isto, num browser antigo o menu ficaria sempre aberto (degradação
   segura: continua usável, só não recolhe). */
@supports not (selector(:has(*))) {
  .sidebar-nav .nav-section > .nav-section-title[data-accordion] ~ .nav-item { display: none; }
  .sidebar-nav .nav-section.nav-open > .nav-section-title[data-accordion] ~ .nav-item { display: flex; }
}

/* seções fechadas encostam mais — o menu inteiro cabe sem rolagem */
.sidebar-nav .nav-section:has(> :where(.nav-section-title[data-accordion])) {
  margin-bottom: 4px;
}
.sidebar-nav .nav-section.nav-open {
  margin-bottom: 16px;
}

/* badge de pendências (Aprovações) some junto com a seção fechada — o dono
   perderia a contagem. O JS copia o número pro título; aqui é só o visual. */
.sidebar-nav .nav-section-title .nav-section-badge {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--danger);
  flex-shrink: 0;
  margin-left: 2px;
}
.sidebar-nav .nav-section.nav-open .nav-section-title .nav-section-badge { display: none; }

/* ── sidebar recolhida (v10-nav-upgrade): sem acordeão, mostra tudo ── */
body.sb-collapsed .sidebar-nav .nav-section > .nav-item { display: flex; }
body.sb-collapsed .sidebar-nav .nav-section-title[data-accordion] { cursor: default; }
body.sb-collapsed .sidebar-nav .nav-section-title[data-accordion]::after { display: none; }

/* ── logo clicável (app-nav.js) ── */
.sidebar-header .sidebar-home-btn {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  transition: opacity .15s;
}
.sidebar-header .sidebar-home-btn:hover { opacity: .75; }
.sidebar-header .sidebar-home-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.sidebar-header .sidebar-home-btn .logo-img { display: block; }

@media (prefers-reduced-motion: reduce) {
  .sidebar-nav .nav-section-title[data-accordion]::after { transition: none; }
}