/* Menu lateral: recolhível (248 → 56 px), realce de hover que desliza, tooltip no modo recolhido e drawer no celular.
   O estado recolhido é a classe html.menu-recolhido (aplicada no <head> antes da pintura, a partir do localStorage). */
:root {
  --menu-larg: 248px;
  --menu-larg-rec: 56px;
  --menu-mola: cubic-bezier(.32, .72, 0, 1);
  --menu-dur: 320ms;
}

.menu-lateral { display: flex; flex-direction: column; overflow: hidden; padding: 14px 8px 8px; }
.menu-lateral .marca { flex: none; padding: 4px 6px 18px; overflow: hidden; white-space: nowrap; }
.menu-lateral .logo-ph-texto { transition: opacity 150ms ease; }
.menu-nav { position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.menu-nav::-webkit-scrollbar { display: none; }

/* Itens: padding fixo à esquerda para o ícone não andar ao recolher. */
.menu-lateral nav.menu-nav a { position: relative; z-index: 1; padding: 9px 9px; gap: 14px; white-space: nowrap; overflow: hidden; }
.menu-lateral nav.menu-nav a .ico { flex: none; }
.menu-lateral .menu-rotulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; transition: opacity 150ms ease; }
.menu-lateral .seta-ativo { transition: opacity 150ms ease; }
.menu-lateral nav.menu-nav a:focus-visible, .menu-recolher:focus-visible { outline: 2px solid rgba(109, 156, 255, .7); outline-offset: -2px; }

/* Realce de hover (com JS): um só fundo que desliza entre os itens; o item não pinta o próprio hover. */
.menu-realce { position: absolute; left: 0; right: 0; top: 0; height: 0; border-radius: 8px; background: rgba(255, 255, 255, .07); opacity: 0;
  pointer-events: none; z-index: 0; transition: transform var(--menu-dur) var(--menu-mola), height var(--menu-dur) var(--menu-mola), opacity 150ms ease; }
html.menu-js .menu-lateral nav.menu-nav a:not(.ativo):hover { background: transparent; }
.menu-lateral nav.menu-nav a.ativo { transition: background-color 200ms ease, color 200ms ease; }

/* Títulos de grupo: viram uma linha divisória quando recolhido. */
.menu-lateral .menu-grupo-titulo { position: relative; white-space: nowrap; overflow: hidden; transition: opacity 150ms ease; }
.menu-lateral .menu-grupo-titulo::after { content: ''; position: absolute; left: 10px; right: 10px; top: 50%; height: 1px; background: rgba(255, 255, 255, .12); opacity: 0; transition: opacity 150ms ease; }

/* Rodapé: Recolher / Expandir. */
.menu-rodape { flex: none; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 8px; margin-top: 6px; }
.menu-recolher { display: flex; align-items: center; gap: 14px; width: 100%; padding: 9px; border: 0; border-radius: 8px; background: transparent; color: var(--menu-texto);
  font-size: 14px; cursor: pointer; white-space: nowrap; overflow: hidden; text-align: left; transition: background-color 150ms ease, color 150ms ease; }
.menu-recolher:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.menu-recolher .ico { width: 20px; height: 20px; flex: none; transition: transform var(--menu-dur) var(--menu-mola); }
.menu-recolher kbd { flex: none; font: 10px/1.6 inherit; padding: 0 5px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 4px; color: var(--menu-texto); opacity: .8; }

/* Tooltip único (posicionado por JS), só com o menu recolhido. */
.menu-tooltip { position: fixed; z-index: 60; transform: translateY(-50%); pointer-events: none; white-space: nowrap; padding: 5px 9px; border-radius: 6px;
  background: #0b0f14; color: #fff; font-size: 12.5px; font-weight: 500; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .1);
  animation: menu-tip 120ms ease both; }
@keyframes menu-tip { from { opacity: 0; transform: translate(-4px, -50%); } to { opacity: 1; transform: translateY(-50%); } }

.menu-gatilho { display: none; }
.menu-fundo { display: none; }

/* ---------- Desktop / tablet (≥ 768 px): menu na grade, com largura animada ---------- */
@media (min-width: 768px) {
  body.com-menu { grid-template-columns: var(--menu-larg) minmax(0, 1fr); transition: grid-template-columns var(--menu-dur) var(--menu-mola); }
  html.menu-recolhido body.com-menu { grid-template-columns: var(--menu-larg-rec) minmax(0, 1fr); }
  /* Anula o menu "gaveta" antigo (≤ 900 px) nesta faixa. */
  .menu-lateral { position: sticky; inset: 0 auto auto 0; width: auto; height: 100vh; transform: none; box-shadow: none; z-index: auto; }
  .menu-lateral.aberto { transform: none; box-shadow: none; }

  html.menu-recolhido .menu-lateral .logo-ph-texto,
  html.menu-recolhido .menu-lateral .menu-rotulo,
  html.menu-recolhido .menu-lateral .seta-ativo { opacity: 0; }
  html.menu-recolhido .menu-lateral .menu-grupo-titulo { color: transparent; padding-top: 6px; padding-bottom: 6px; }
  html.menu-recolhido .menu-lateral .menu-grupo-titulo::after { opacity: 1; }
  html.menu-recolhido .menu-lateral .marca { padding-left: 2px; padding-right: 2px; }
  html.menu-recolhido .menu-recolher .ico { transform: scaleX(-1); }
}

/* ---------- Celular (< 768 px): drawer sobreposto ---------- */
@media (max-width: 767.98px) {
  body.com-menu { grid-template-columns: 1fr; }
  .menu-lateral { position: fixed; inset: 0 auto 0 0; width: 17rem; max-width: 85vw; height: 100dvh; z-index: 50; transform: translateX(-100%);
    transition: transform var(--menu-dur) var(--menu-mola); box-shadow: none; }
  .menu-lateral.aberto { transform: translateX(-100%); box-shadow: none; } /* ignora o toggle antigo */
  html.menu-drawer .menu-lateral { transform: none; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
  .menu-fundo { display: block; position: fixed; inset: 0; z-index: 49; background: rgba(8, 10, 14, .45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
  html.menu-drawer .menu-fundo { opacity: 1; pointer-events: auto; }
  .menu-gatilho { display: inline-flex; }
  .menu-rodape { display: none; }
  .menu-tooltip { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.com-menu, .menu-lateral, .menu-realce, .menu-fundo, .menu-recolher .ico, .menu-lateral .menu-rotulo, .menu-lateral .logo-ph-texto,
  .menu-lateral .menu-grupo-titulo, .menu-lateral .menu-grupo-titulo::after { transition: none !important; }
  .menu-tooltip { animation: none; }
}

@media print { .menu-fundo, .menu-tooltip, .menu-gatilho { display: none !important; } }
/* Subitem (Tarefas da equipe sob Comunicação): recuado, com um fio guia à esquerda. */
.menu-lateral nav.menu-nav a.menu-sub { margin-left: 22px; padding-left: 12px; font-size: .95em; }
.menu-lateral nav.menu-nav a.menu-sub::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; border-left: 1px solid var(--borda-forte, #3a424b); }
.menu-lateral nav.menu-nav a.menu-sub .ico { width: 18px; height: 18px; }
html.menu-recolhido .menu-lateral nav.menu-nav a.menu-sub, .menu-lateral.recolhido nav.menu-nav a.menu-sub { margin-left: 0; padding-left: 9px; }
html.menu-recolhido .menu-lateral nav.menu-nav a.menu-sub::before, .menu-lateral.recolhido nav.menu-nav a.menu-sub::before { display: none; }

/* Item expansível (ex.: Inventário FBA): seta gira quando aberto; filhos recuados como os submenus. */
.menu-lateral nav.menu-nav a.menu-pai .seta-pai { margin-left: auto; width: 16px; height: 16px; opacity: .6; transition: transform 150ms ease; }
.menu-lateral nav.menu-nav a.menu-pai.aberto .seta-pai { transform: rotate(180deg); }
.menu-lateral .menu-filhos[hidden] { display: none; }
html.menu-recolhido .menu-lateral nav.menu-nav a.menu-pai .seta-pai { display: none; }