/* =======================================================================
   QUALIDADE.CSS — casco do módulo Qualidade (menu lateral + áreas vazias).
   Reusa o Design System (styles.css): .card .page-head .muted + o componente
   .nav (menu lateral no desktop, barra inferior no celular). Idêntico ao casco
   de RH/Planejamento/Agentes de IA. O submódulo Mobuss tem o seu mobuss.css;
   aqui só o CASCO (sidebar + área principal) e o estado vazio das áreas futuras.
   Só TOKENS do Design System — nada de hex solto.
   ======================================================================= */

/* --- casco: menu lateral + área principal (idêntico ao RH/Planejamento) --- */
.qua { display: flex; align-items: flex-start; margin: calc(-1 * var(--content-py)) calc(-1 * var(--content-px)) calc(-1 * var(--content-pb)); }
.qua-nav { z-index: 39; }
.qua-main { flex: 1; min-width: 0; padding: var(--content-py) var(--content-px) calc(var(--content-py) + var(--content-pb)); }
.wrap:has(.qua) { max-width: none; }

/* --- recolher/expandir a barra lateral (mais área para o painel) --- */
/* Igual ao do Planejamento (.plan-nav-toggle): quadrado 32×32 só com ícone, texto no tooltip;
   presente nos dois estados (é o único acesso ao menu quando recolhido). `.btn.` vence o padding
   do .btn. Na Visão Geral fica na linha do título; nas demais áreas, sozinho no topo. */
.btn.qua-nav-toggle { width: 32px; height: 32px; padding: 0; gap: 0; flex: 0 0 auto;
  background: var(--surface); border-color: var(--border); color: var(--text-secondary); }
.btn.qua-nav-toggle svg { display: block; flex: 0 0 auto; width: 20px; height: 20px; }
.btn.qua-nav-toggle:hover { border-color: var(--accent); color: var(--accent-strong); filter: none; }
.btn.qua-nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qua-main > .qua-nav-toggle { margin-bottom: 10px; }

/* Desktop: recolhido esconde a coluna lateral → o conteúdo ocupa toda a largura. */
@media (min-width: 781px) {
  .qua.qua-recolhido > .qua-nav { display: none; }
}
/* Celular: a .qua-nav é a barra INFERIOR fixa (styles.css) — nunca some e não há coluna
   lateral p/ recuperar, então o botão de recolher não se aplica. */
@media (max-width: 780px) {
  .btn.qua-nav-toggle { display: none; }
}

/* --- item do menu com título + subtítulo (2 linhas no desktop) --- */
.qua-nav .txt { display: flex; flex-direction: column; line-height: 1.15; }
.qua-nav .txt small { font-size: .74rem; font-weight: 500; color: var(--text-muted); }
.qua-nav .active .txt small { color: inherit; opacity: .85; }

/* --- grupo do menu (pai "Mobuss Construção" que expande 2 submenus) --- */
/* No DESKTOP: cabeçalho clicável + filhos indentados com guia vertical. O pai é um
   disclosure (não é rota, nunca recebe .active). O rótulo 'curto' só aparece no
   celular (ver bloco mobile). */
.qua-grp-cab { font-weight: 600; }
.qua-grp-seta { margin-left: auto; color: var(--text-muted); font-size: .78rem; transition: transform .15s ease; }
.qua-grp-cab[aria-expanded="true"] .qua-grp-seta { transform: rotate(90deg); }
.qua-grp-filhos { position: relative; }
.qua-grp-filhos.fechado { display: none; }               /* recolhido (desktop) */
.qua-grp-filhos::before {                                  /* guia vertical do submenu */
  content: ""; position: absolute; left: 21px; top: 3px; bottom: 3px;
  width: 1px; background: var(--border);
}
.qua-grp-filhos .qua-sub { padding-left: 34px; }          /* indentação do filho */
.qua-grp-filhos .qua-sub.active::before { left: 20px; }   /* barra dourada junto à guia */
.qua-curto { display: none; }                             /* atalho só no celular */
/* Menu lateral ESTREITO (781–1080 px: o .nav tem 178 px): o filho do grupo usa o rótulo curto, como na barra do
   celular — com o recuo do submenu, "FVS e Não Conformidades" não cabia e o menu rolava de lado (QUA-01; nome
   completo no title do botão). */
@media (min-width: 781px) and (max-width: 1080px) {
  .qua-nav .qua-sub .txt b { display: none; }
  .qua-nav .qua-sub .qua-curto { display: inline; font-weight: inherit; font-style: normal; }
}

/* No celular a .qua-nav vira barra inferior fixa (regra do styles.css): o casco
   vira bloco simples e some o subtítulo (só o título curto cabe na barra). */
@media (max-width: 780px) {
  .qua { display: block; margin: 0; }
  .qua-nav { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .qua-main { padding: 0; padding-bottom: max(0px, calc(var(--qua-nav-h, 0px) - 84px)); }
  .qua-nav .txt { line-height: 1.1; }
  .qua-nav .txt small { display: none; }
  /* Na barra inferior não há acordeão: o grupo "some" (display:contents) e os 2
     filhos viram itens planos da barra, ao lado dos demais. O cabeçalho do grupo e
     a guia vertical não aparecem; cada filho mostra o rótulo 'curto' no lugar do
     subtítulo longo. Resultado: 6 itens planos (idêntico ao layout anterior). */
  .qua .qua-nav .qua-grp,
  .qua .qua-nav .qua-grp-filhos { display: contents; }
  .qua .qua-nav .qua-grp-cab,
  .qua .qua-nav .qua-grp-filhos::before { display: none; }
  .qua .qua-nav .qua-sub { padding-left: 4px; }           /* remove a indentação do desktop */
  .qua .qua-nav .qua-sub.active::before { left: 0; }
  .qua .qua-nav .qua-sub .txt b { display: none; }        /* esconde o rótulo longo */
  .qua .qua-nav .qua-sub .qua-curto { display: inline; font-weight: 500; font-style: normal; }
  /* 6 itens de rótulo longo: força 3 por linha (2 linhas), dando largura para o
     título não se sobrepor ao vizinho. Escopado ao .qua-nav — NÃO toca o
     componente compartilhado .nav.nav-multi (usado por Estoque/RH/Apontamento). */
  .qua .qua-nav.nav-multi button { flex: 1 1 30%; min-width: 30%; max-width: 40%; }
}

/* --- estado vazio (áreas ainda não desenvolvidas) --- */
.qua-vazia { text-align: center; padding: 30px 18px; }
.qua-vazia-ic { font-size: 2.2rem; margin-bottom: 6px; }
.qua-vazia-tit { font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }