/* ===========================================================================
   Sidebar do backoffice — INAPEM Certifica
   ---------------------------------------------------------------------------
   Substitui o menu lateral exportado do Webflow (.sidebar-block / .sidebar-nav-link
   em inapem-certificacao.css). Fica num ficheiro próprio, carregado depois, para
   que o resto do CSS legado continue intacto: o menu é a única parte da interface
   que estamos a refazer.

   Três problemas concretos do menu antigo que este ficheiro resolve:

   1. Altura em percentagem (25% logo / 60% nav / 15% rodapé). Com treze entradas
      a 60px cada, a lista nunca cabia nos 60% e ficava com scroll interno por
      baixo de um quarto de ecrã vazio. Aqui a coluna é flex: o logótipo e o
      rodapé ocupam o que precisam e a navegação fica com o resto.
   2. Entradas de 50px + 10px de margem. Passam a 38px com 2px de intervalo, o
      que faz caber a lista inteira sem scroll num portátil de 768px de altura.
   3. Ícones de três famílias tipográficas diferentes, com letras repetidas
      ("1" no Início e nos Documentos, "3" nas Empresas e na Renovação). Passam a
      SVG inline, um por entrada, em fragments/sidebar-icones.html.

   A largura mantém-se nos 270px de propósito: .content-wrapper tem
   margin-left: 270px fixo em dezenas de páginas.
   =========================================================================== */

.side-bar {
  --sb-altura-item: 38px;
  --sb-raio: 8px;
  --sb-activo: var(--weba-orange);
  --sb-activo-fundo: rgba(255, 92, 75, 0.09);

  /* Permite animar o abrir/fechar dos submenus até à altura natural do
     conteúdo (ver ::details-content mais abaixo). Fica aqui e não no :root
     para não alterar transições do resto da aplicação. */
  interpolate-size: allow-keywords;

  z-index: 20;
  display: flex;
  flex-direction: column;
  width: 270px;
  height: 100vh;
  background-color: #fff;
  border-right: 1px solid var(--fine-line);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
}

/* --- Cabeçalho: logótipo ------------------------------------------------- */

.sb-topo {
  flex: none;
  padding: 22px 20px 14px;
}

.sb-logo {
  display: block;
  line-height: 0;
}

.sb-logo img {
  width: 140px;
  height: auto;
}

/* --- Navegação ----------------------------------------------------------- */

.sb-nav {
  flex: 1 1 auto;
  min-height: 0;          /* sem isto o flex não deixa a lista encolher e o scroll nunca aparece */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 12px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--lines) transparent;
}

.sb-nav::-webkit-scrollbar {
  width: 6px;
}

.sb-nav::-webkit-scrollbar-thumb {
  background-color: var(--lines);
  border-radius: 3px;
}

/* Rótulo de secção: dá a hierarquia que faltava sem gastar uma linha clicável. */
.sb-seccao {
  margin: 16px 0 4px;
  padding: 0 10px;
  color: var(--navigation-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
}

.sb-seccao:first-child {
  margin-top: 6px;
}

/* --- Entradas ------------------------------------------------------------ */

.sb-item {
  display: flex;
  align-items: center;
  gap: 11px;
  height: var(--sb-altura-item);
  padding: 0 10px;
  margin-bottom: 2px;
  border-radius: var(--sb-raio);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 90ms ease, color 90ms ease;
}

.sb-item:hover {
  background-color: var(--hover);
  color: var(--text);
}

.sb-item:focus-visible {
  outline: 2px solid var(--sb-activo);
  outline-offset: -2px;
}

.sb-item.sb-activo {
  background-color: var(--sb-activo-fundo);
  color: var(--sb-activo);
  font-weight: 600;
}

.sb-icone {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--menu-icon-color);
}

.sb-item:hover .sb-icone {
  color: var(--text);
}

.sb-item.sb-activo .sb-icone {
  color: var(--sb-activo);
}

.sb-texto {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sinal de pendentes (chat, processos devolvidos). Substitui o .red-dot
   posicionado em absoluto a 130px da esquerda, que deixava de bater certo
   assim que o texto mudava de comprimento. */
.sb-sinal {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--rejected);
}

/* --- Acção principal (só no menu provincial) ----------------------------- */

.sb-accao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  margin: 6px 0 4px;
  border-radius: var(--sb-raio);
  background-color: var(--sb-activo);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 120ms ease;
}

.sb-accao:hover {
  background-color: var(--hover-red);
  color: #fff;
}

.sb-accao:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.sb-accao .sb-icone {
  color: currentColor;
}

/* --- Submenus ------------------------------------------------------------
   <details>/<summary> nativo: abre e fecha sem JavaScript, é navegável por
   teclado, e o "procurar na página" do browser encontra o que está fechado.
   O atributo open é decidido no servidor, pelo que um submenu que contenha a
   página actual já vem aberto no primeiro pixel pintado — sem o salto que o
   accordion em JS dava a cada navegação.
   ------------------------------------------------------------------------- */

.sb-grupo > summary {
  cursor: pointer;
  list-style: none;
}

.sb-grupo > summary::-webkit-details-marker {
  display: none;
}

.sb-seta {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--navigation-text);
  transition: transform 180ms ease;
}

.sb-grupo[open] > summary .sb-seta {
  transform: rotate(90deg);
}

.sb-sub {
  /* Calha vertical a ligar os filhos ao pai; alinhada com o centro do ícone
     (10px de padding da entrada + 9px de meio ícone). */
  margin: 2px 0 6px 19px;
  padding-left: 11px;
  border-left: 1px solid var(--fine-line);
}

.sb-sub .sb-item {
  height: 32px;
  font-size: 13px;
  font-weight: 500;
  color: var(--navigation-text);
}

.sb-sub .sb-item:hover {
  color: var(--text);
}

.sb-sub .sb-item.sb-activo {
  color: var(--sb-activo);
  font-weight: 600;
}

/* Animação do abrir/fechar. Progressive enhancement: onde ::details-content
   ou interpolate-size não existirem, o submenu abre de imediato. */
.sb-grupo::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 200ms ease, content-visibility 200ms allow-discrete;
}

.sb-grupo[open]::details-content {
  block-size: auto;
}

/* --- Rodapé: quem está autenticado + sair -------------------------------- */

.sb-rodape {
  flex: none;
  padding: 10px 12px 14px;
  border-top: 1px solid var(--fine-line);
}

.sb-perfil {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 10px;
}

.sb-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--bg-2);
  color: var(--navigation-text);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.sb-perfil-texto {
  min-width: 0;
}

.sb-perfil-nome {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-perfil-papel {
  overflow: hidden;
  color: var(--navigation-text);
  font-size: 11px;
  line-height: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-item--sair:hover {
  background-color: var(--erro-message-bg);
  color: var(--rejected);
}

.sb-item--sair:hover .sb-icone {
  color: var(--rejected);
}

/* --- Ecrãs estreitos: gaveta -------------------------------------------- */

.sb-abrir {
  display: none;
  position: fixed;
  z-index: 30;
  top: 12px;
  left: 12px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--fine-line);
  border-radius: var(--sb-raio);
  background-color: #fff;
  color: var(--text);
  box-shadow: 0 1px 3px rgba(23, 31, 54, 0.12);
  cursor: pointer;
}

.sb-veu {
  position: fixed;
  z-index: 19;
  inset: 0;
  background-color: rgba(23, 31, 54, 0.45);
}

/* O atributo hidden é a única fonte de verdade da gaveta: o JS mexe nele e o
   véu deixa de ser lido pelas tecnologias de apoio, coisa que um display:none
   por classe não garantia. */
.sb-veu[hidden] {
  display: none;
}

@media (max-width: 991px) {
  .sb-abrir {
    display: flex;
  }

  .side-bar {
    transform: translateX(-100%);
    transition: transform 220ms ease;
    box-shadow: 0 0 24px rgba(23, 31, 54, 0.18);
  }

  body.sb-aberta .side-bar {
    transform: translateX(0);
  }

  /* O ._9 existe no CSS legado com padding-top: 0 e ganharia por
     especificidade; por isso vai nomeado. */
  .content-wrapper,
  .content-wrapper._9 {
    margin-left: 0;
    padding-top: 64px;
  }

  .top-bar {
    margin-left: 0;
  }
}

/* Se a janela alargar com a gaveta aberta, o menu volta a ser coluna fixa e o
   véu não pode ficar a tapar a página. */
@media (min-width: 992px) {
  .sb-veu {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .side-bar,
  .sb-item,
  .sb-seta,
  .sb-grupo::details-content {
    transition: none;
  }
}