/* vmshub-snav.css — componente de NAVEGACAO LATERAL/ABAS UNICO do VMSHub (etapa MB, 21/10/2026). Camada de TEMA: carregar DEPOIS de vmshub-theme.css.
 * Reproduz EXATAMENTE o visual do menu de /config de camera (antigo .cf-nav, aprovado). Cor SO por var(--token) da camada de tema, nenhum hex, Claro e Escuro pelos mesmos tokens.
 * Usos: /config de camera (lateral; vira faixa rolavel abaixo de 768 px), /members (abas em faixa .vm-snav--row e lista de papeis).
 * HTML: <nav|div class="vm-snav [vm-snav--row]" role="tablist"> [<div class="vm-snav-gl">GRUPO</div>] <button type="button" role="tab" class="vm-snav-item [on]" aria-selected>
 *         <span class="vm-snav-nm">Nome</span> [<span class="vm-snav-tag [ok|bad|off]">1</span>] </button> [<div class="vm-snav-gsep" aria-hidden="true"></div>] [<div class="vm-snav-empty">texto</div>] </nav>
 * Estados: .on = ativo (acento); :hover; :focus-visible. O breakpoint (767.98px) e o do /config de camera. A camada vmshub-theme.css NAO pode ter @media de largura (sonda p0a T15): por isso este componente mora num arquivo proprio. */
.vm-snav { background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--border); border-radius: 4px; padding: 8px; }
.vm-snav .vm-snav-gl { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 10px 10px 4px; }
.vm-snav .vm-snav-gsep { display: none; }
.vm-snav .vm-snav-empty { font-size: 13px; color: var(--muted); padding: 6px 10px; }
.vm-snav button.vm-snav-item { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 8px; text-align: left; font: inherit; font-size: 14px; border: 0; background: transparent; color: var(--text); padding: 8px 10px; border-radius: 4px; cursor: pointer; }
.vm-snav button.vm-snav-item:hover { background: var(--hover); }
.vm-snav button.vm-snav-item:focus-visible { outline: 2px solid var(--focus-border); outline-offset: 1px; }
.vm-snav button.vm-snav-item.on { background: var(--accent); color: var(--on-accent); font-weight: 600; }
/* BARRA de destaque na aba ATIVA (decisao do dono 21/10, token trocado em 25/10): a FORMA do ativo (barra contra o fundo do item ativo) passa a ter >= 3:1 nos dois temas sem depender so da cor do fundo (Claro: amarelo sobre branco = 1,44:1).
 * Cor = token --on-accent (o texto-sobre-acento do tema: Claro e Escuro #212529), o par do fundo --accent do item ativo: a barra fica VISIVEL nos dois temas (decisao do dono 25/10; com --accent-text a barra era IGUAL ao fundo do item no Escuro). Inset = nao ocupa espaco (nada se mexe). Menu lateral = barra a esquerda; faixa (row / celular) = barra embaixo. */
/* BARRA CERCADA (maquete 26/10): 3 px do proprio acento no limite do item + barra --on-accent por dentro; no Escuro a borda amarela separa a barra do menu (antes 1,04:1 contra o menu). */
.vm-snav button.vm-snav-item.on { box-shadow: inset 3px 0 0 var(--accent), inset 7px 0 0 var(--on-accent); }
.vm-snav button.vm-snav-item .vm-snav-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vm-snav-tag { display: inline-block; border-radius: 3px; padding: 2px 7px; font-size: 12px; font-weight: 600; line-height: 14px; background: var(--sa-secondary-bg); color: var(--sa-secondary-fg); white-space: nowrap; }
.vm-snav-tag.ok { background: var(--sa-success-bg); color: var(--sa-success-fg); }
.vm-snav-tag.bad { background: var(--sa-danger-bg); color: var(--sa-danger-fg); }
.vm-snav-tag.off { background: var(--sa-warning-bg); color: var(--sa-warning-fg); }
.vm-snav button.vm-snav-item.on .vm-snav-tag { background: var(--surface); color: var(--text); }
/* faixa horizontal em qualquer largura (abas do /members) */
.vm-snav--row { display: flex; overflow-x: auto; gap: 4px; padding: 6px; scrollbar-width: thin; }
.vm-snav--row .vm-snav-gl { display: none; }
.vm-snav--row button.vm-snav-item { width: auto; flex: 0 0 auto; white-space: nowrap; }
.vm-snav--row button.vm-snav-item.on { box-shadow: inset 0 -3px 0 var(--accent), inset 0 -6px 0 var(--on-accent); }
.vm-snav--row .vm-snav-gsep { display: block; flex: 0 0 1px; background: var(--border); margin: 4px 6px; }
.vm-snav--row .vm-snav-empty { white-space: nowrap; flex: 0 0 auto; }
/* celular: o menu lateral vira faixa rolavel DENTRO dele (a pagina nao rola) */
@media (max-width: 767.98px) {
    .vm-snav { display: flex; overflow-x: auto; gap: 4px; padding: 6px; scrollbar-width: thin; }
    .vm-snav .vm-snav-gl { display: none; }
    .vm-snav button.vm-snav-item { width: auto; flex: 0 0 auto; white-space: nowrap; }
    .vm-snav button.vm-snav-item.on { box-shadow: inset 0 -3px 0 var(--accent), inset 0 -6px 0 var(--on-accent); }
    .vm-snav .vm-snav-gsep { display: block; flex: 0 0 1px; background: var(--border); margin: 4px 6px; }
    .vm-snav .vm-snav-empty { white-space: nowrap; flex: 0 0 auto; }
}