/* sb-menu.css · v695 — menu do usuario no rodape da barra lateral.
   ------------------------------------------------------------------------------
   FONTE UNICA das duas telas (SPA e admin Jinja), como tema-tokens.css. Nao copiar
   estas regras para dashboard.css nem para o <style> do base.html: foi exatamente a
   copia divergente que produziu os defeitos da v694.

   O rodape acumulava preferencias (tema, tamanho do texto, modo do menu) e acoes raras
   (suporte, sair) como linhas permanentes: nove linhas para uma identidade e um punhado
   de ajustes. Agora elas moram atras do card do usuario, que e onde todo app moderno as
   coloca, e o rodape volta a ser navegacao. */

.sb-userwrap{position:relative;display:flex;flex-direction:column}

/* o card do usuario vira o disparador do menu */
.sb-user[aria-expanded]{width:100%}
.sb-user .sb-user-cev{margin-left:auto;flex:0 0 auto;width:14px;height:14px;color:var(--faint-on-dark);
  transition:transform .16s}
.sb-user[aria-expanded="true"] .sb-user-cev{transform:rotate(180deg)}
.sb-user[aria-expanded="true"]{background:var(--sb-item-hover)}

/* o painel abre PARA CIMA: o card vive colado no fim da barra */
.sb-menu{position:fixed;z-index:1400;min-width:232px;max-width:calc(var(--vw-tela) * .92);   /* a largura vem do disparador (sb-menu.js); aqui so o limite da janela */padding:6px;
  border-radius:14px;border:1px solid var(--border-strong,rgba(191,205,232,.34));
  background:color-mix(in srgb,var(--panel-solid,#1A2740) 97%,var(--bg,#0A1120));
  box-shadow:var(--shadow-lg,0 30px 72px rgba(0,0,0,.58));
  /* v852 · teto também na ALTURA. O sb-menu.js só limitava quando o painel estourava o TOPO
     da tela; com muitos itens (ou com o texto ampliado) ele passava do rodapé e os últimos
     ficavam inalcançáveis. O ajuste inline que o JS faz nesse caso continua vencendo. */
  max-height:calc(var(--vh-tela) - 16px);overflow-y:auto;
  display:flex;flex-direction:column;gap:1px}
.sb-menu[hidden]{display:none}

/* os controles movidos para ca mantem os proprios listeners (sao os MESMOS nos, so
   mudaram de lugar). Aqui eles sao reestilizados como linhas de menu. */
.sb-menu .sb-item,.sb-menu .theme-toggle,.sb-menu .sb-menu-item,.sb-menu .sb-icon-btn{
  display:flex;align-items:center;gap:11px;width:100%;height:auto;padding:9px 10px;border-radius:9px;
  border:1px solid transparent;background:transparent;color:var(--dim-on-dark);cursor:pointer;
  font:500 13px inherit;text-align:left;text-decoration:none;box-shadow:none;place-items:initial}
.sb-menu .sb-item:hover,.sb-menu .theme-toggle:hover,.sb-menu .sb-menu-item:hover,
.sb-menu .sb-icon-btn:hover{background:var(--sb-item-hover);color:var(--text-on-dark)}
/* Só TAMANHO e cor. Sem `display` de propósito: o item Tema alterna sol/lua justamente
   por `display:none` num dos dois ícones, e forçar display aqui mostrava os dois juntos. */
.sb-menu .ic{flex:0 0 auto;width:19px;height:19px;color:var(--faint-on-dark)}
.sb-menu .ic svg{width:19px;height:19px;display:block}
/* o "Sair" vinha como botão-ícone quadrado (38x38) da linha do usuário */
.sb-menu .sb-icon-btn>svg{flex:0 0 auto;width:19px;height:19px;display:block;margin:0}
/* no rodape o rotulo some quando a barra esta so com icones; dentro do menu ele SEMPRE aparece */
.sb-menu .tx,.sb-menu .theme-tx{opacity:1!important;width:auto!important;overflow:visible!important;
  pointer-events:auto!important;white-space:nowrap}
.sb-menu .sb-item.on::before{display:none}          /* sem a barrinha de "tela ativa" aqui */
.sb-menu form{margin:0;width:100%}
.sb-menu .sb-menu-sep{height:1px;margin:5px 6px;background:var(--border-on-dark,rgba(191,205,232,.22))}
.sb-menu .sb-menu-ver{padding:7px 10px 4px;text-align:center;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint-on-dark);opacity:.75;font-variant-numeric:tabular-nums}
/* v700 · no claro a opacidade .75 derrubava a tinta já secundária para ~3,4:1 num texto
   de 10px. A tinta sozinha já é o "apagado" certo (5,2:1). No escuro nada muda. */
:root[data-theme="light"] .sb-menu .sb-menu-ver{opacity:1}
.sb-menu .sb-menu-sair{color:var(--bad-ink,#FB7185)}
.sb-menu .sb-menu-sair .ic{color:inherit}

@media (prefers-reduced-motion:reduce){ .sb-user .sb-user-cev{transition:none} }