/* ══════════════════════════════════════════════════════
   Menu lateral — BKon OS (ver js/menu.js). Só tokens do portal.
══════════════════════════════════════════════════════ */

/* Itens mais compactos e com estado ativo claro: 28 itens cabem melhor */
.sidebar__nav { padding-top: 6px; }
.sidebar__nav .sidebar__link { min-height: 34px; padding-top: 6px; padding-bottom: 6px; position: relative; }
.sidebar__grupo-itens { display: flex; flex-direction: column; gap: 1px; }
.sidebar__grupo + .sidebar__grupo { margin-top: 2px; }

/* Busca */
.menu-busca { position: relative; margin: 4px 8px 6px; }
.menu-busca svg { position: absolute; left: 10px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.menu-busca input {
  width: 100%; box-sizing: border-box; height: 34px; padding: 0 30px 0 32px;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-md);
  color: var(--text-primary); font: inherit; font-size: 13px;
}
.menu-busca input::placeholder { color: var(--text-muted); }
.menu-busca input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-soft); }
.menu-busca input::-webkit-search-cancel-button { display: none; }
.menu-busca kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; line-height: 16px; pointer-events: none;
}
.menu-busca input:focus + kbd, .menu-busca input:not(:placeholder-shown) + kbd { display: none; }
.menu-busca__vazio { margin: 4px 14px 8px; font-size: 12px; color: var(--text-muted); }
.sidebar__link.menu-fora, .sidebar__grupo.menu-fora { display: none !important; }
/* buscando: todo grupo com resultado fica aberto */
.menu-buscando .sidebar__grupo.is-recolhido .sidebar__grupo-itens { display: flex; }

/* Selos (não lidos, vencidas) */
.menu-selo {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box;
  display: inline-grid; place-items: center; border-radius: var(--radius-full);
  background: var(--accent); color: var(--accent-text-on, #fff);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.sidebar__link[data-nav="admin-faturas"] .menu-selo { background: var(--danger); color: #fff; }

/* Botão de recolher */
.menu-compacto-btn {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-height: 36px;
  border-radius: var(--radius-sm); color: var(--text-muted); font-size: 13px;
}
.menu-compacto-btn:hover { color: var(--text-primary); background: var(--bg-raised); }
.menu-compacto-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.menu-compacto-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duration-fast) var(--easing); }

/* Modo compacto: só ícones (desktop) */
@media (min-width: 901px) {
  html.menu-compacto { --sidebar-width: 68px; }
  html.menu-compacto .menu-compacto-btn svg { transform: rotate(180deg); }
  html.menu-compacto .menu-compacto-btn span,
  html.menu-compacto .menu-busca,
  html.menu-compacto .menu-busca__vazio,
  html.menu-compacto .sidebar__grupo-titulo,
  html.menu-compacto .client-info,
  html.menu-compacto .brand-os,
  html.menu-compacto .sidebar__bottom .theme-toggle span,
  html.menu-compacto .sidebar__bottom a span { display: none !important; }
  html.menu-compacto .sidebar__grupo.is-recolhido .sidebar__grupo-itens { display: flex; }
  html.menu-compacto .sidebar__grupo + .sidebar__grupo { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; }
  html.menu-compacto .sidebar__link { font-size: 0; justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
  html.menu-compacto .sidebar__link svg { margin: 0; }
  html.menu-compacto .menu-selo { position: absolute; top: 2px; right: 8px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
  html.menu-compacto .sidebar__logo { justify-content: center; }
  html.menu-compacto .sidebar__logo .brand-wordmark { display: none !important; }
  html.menu-compacto .sidebar__logo .brand-reduzida { display: block; }
  html.menu-compacto .sidebar__client { justify-content: center; padding-left: 0; padding-right: 0; }
  html.menu-compacto .menu-compacto-btn, html.menu-compacto .sidebar__bottom > * { justify-content: center; }
}

.sidebar .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .menu-compacto-btn svg { transition: none; } }
/* soma dos selos no título do grupo: só aparece com o grupo fechado */
.sidebar__grupo-titulo .menu-selo--grupo { margin-left: auto; margin-right: 8px; letter-spacing: 0; display: none; }
.sidebar__grupo.is-recolhido .sidebar__grupo-titulo .menu-selo--grupo { display: inline-grid; }

.sidebar__logo .brand-reduzida { display: none; border-radius: 8px; }