/* Menu lateral — "você está aqui".

   Navegar sem saber onde se está é o pior defeito de um menu: o usuário clica,
   a página troca e o menu volta ao estado neutro. Aqui a seção aberta fica
   marcada (pílula lateral, ícone colorido, texto em destaque), o submenu da
   seção continua ABERTO e o item exato em que o usuário está ganha o seu
   próprio realce.

   Quem decide o que está ativo é o servidor, não o JS: `menu_ativo(...)` no
   `header.html` lê o módulo de permissão do endpoint atual. Rota nova de um
   módulo já acende o menu sozinha — não existe lista de endpoints para manter.

   Os seletores começam em `.menu-lateral` (classe do `<aside>`) de propósito:
   este arquivo é carregado ANTES do `tabler.css` e as regras do tema para o
   menu vertical têm cinco classes. A classe do projeto entra para vencer a
   cascata sem `!important`. */

.menu-lateral {
  --cor-marcador-menu: var(--tblr-primary, #0054a6);
  --fundo-item-ativo: rgba(255, 255, 255, 0.07);
  --fundo-item-hover: rgba(255, 255, 255, 0.04);
}

/* Efeito mínimo: cor e fundo entram suaves, sem nada saltando de lugar. */
.menu-lateral .navbar-nav .nav-link,
.menu-lateral .navbar-nav .dropdown-item {
  transition: background-color 0.15s ease, color 0.15s ease;
}

.menu-lateral .navbar-nav .nav-link:hover,
.menu-lateral .navbar-nav .dropdown-item:hover {
  background-color: var(--fundo-item-hover);
}

/* ── Seção ativa ────────────────────────────────────────────────────── */

/* O item de menu da tela aberta: fundo discreto, texto sólido e ícone na cor
   de destaque. Sem cor chapada — o menu continua sendo menu, não um botão. */
.menu-lateral .navbar-nav .nav-item.active > .nav-link {
  color: #fff;
  background-color: var(--fundo-item-ativo);
  font-weight: 600;
}

.menu-lateral .navbar-nav .nav-item.active > .nav-link .nav-link-icon {
  color: var(--cor-marcador-menu);
}

/* O tema marca a seção com um filete reto de ponta a ponta. Aqui ele vira uma
   pílula curta e arredondada, que lê como marcador e não como borda. */
.menu-lateral.navbar-vertical .navbar-collapse .nav-item.active::after {
  content: '';
  border: 0;
  top: 0.375rem;
  bottom: 0.375rem;
  left: 0;
  right: auto;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background-color: var(--cor-marcador-menu);
}

/* ── Ritmo vertical do submenu ──────────────────────────────────────── */

/* O tema dá 1rem de respiro ao título da seção e 0.5rem aos itens do submenu.
   Aberto, o desencontro aparece: 24px entre o título e o primeiro item contra
   8px entre o último e a linha da seção seguinte — o grupo lê como se estivesse
   caindo para fora. Aqui o título encolhe para perto do item, o item de submenu
   recebe o MESMO respiro do título (uma altura de linha só, para a seção e o
   que está dentro dela) e o bloco ganha um respiro embaixo, então o submenu
   fica visivelmente preso ao seu título.

   Só a partir de `lg`, que é onde o menu é a barra lateral fixa: no celular ele
   é o painel colapsado e o alvo de toque maior do tema continua valendo. */
@media (min-width: 992px) {
  .menu-lateral.navbar-vertical .navbar-collapse .navbar-nav .nav-link {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .menu-lateral.navbar-vertical .navbar-collapse .dropdown-menu {
    padding-top: 0.125rem;
    padding-bottom: 0.375rem;
  }

  .menu-lateral.navbar-vertical .navbar-collapse .dropdown-menu .dropdown-item {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }
}

/* ── Item exato dentro da seção ─────────────────────────────────────── */

/* Dentro de "Cadastro", saber que se está em "Imóvel": o ponto colorido marca a
   linha certa sem repetir o peso visual da seção. */
.menu-lateral .navbar-nav .dropdown-menu .dropdown-item {
  position: relative;
}

.menu-lateral .navbar-nav .dropdown-menu .dropdown-item.active {
  color: #fff;
  background-color: var(--fundo-item-ativo);
  font-weight: 600;
}

.menu-lateral .navbar-nav .dropdown-menu .dropdown-item.active::before {
  content: '';
  position: absolute;
  /* Mesma conta de indentação do tema (page-padding + recuo do submenu), para o
     ponto acompanhar o texto em vez de flutuar no vão à esquerda dele. */
  left: calc(var(--tblr-page-padding, 1rem) + 1rem);
  top: 50%;
  width: 0.375rem;
  height: 0.375rem;
  margin-top: -0.1875rem;
  border-radius: 50%;
  background-color: var(--cor-marcador-menu);
}

/* ── Abrir e fechar ─────────────────────────────────────────────────── */

/* A seta acompanha o estado do submenu — o `aria-expanded` é o mesmo atributo
   que o leitor de tela usa, então o desenho e a acessibilidade não divergem.

   O caret do tema é um quadrado de duas bordas já girado em -45deg; meia volta a
   partir dali é 135deg, não 180deg — com 180deg o chevron vira um canto torto. */
.menu-lateral .navbar-nav .nav-link.dropdown-toggle::after {
  transition: transform 0.2s ease;
}

.menu-lateral .navbar-nav .nav-link.dropdown-toggle[aria-expanded='true']::after {
  transform: rotate(135deg);
}

/* Submenu entra com um fade curto em vez de aparecer seco. */
.menu-lateral .navbar-nav .dropdown-menu.show {
  animation: menu-abrir 0.18s ease;
}

@keyframes menu-abrir {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-lateral .navbar-nav .nav-link,
  .menu-lateral .navbar-nav .dropdown-item,
  .menu-lateral .navbar-nav .nav-link.dropdown-toggle::after {
    transition: none;
  }

  .menu-lateral .navbar-nav .dropdown-menu.show {
    animation: none;
  }
}

/* ── Seção interna (Gestão SaaS) ────────────────────────────────────── */

/* Esta seção não existe para o assinante: é a administração do produto. O
   destaque diz isso sem depender de o operador lembrar — cor própria (a azul do
   sistema é do produto) e o selo "interno" ao lado do título. Cor sozinha não
   comunicaria: o selo é texto.

   Sem borda aqui: o tema já desenha a linha que separa um item do seguinte, e
   somar outra deixaria duas riscas coladas. */
.menu-lateral .navbar-nav .nav-item-interno {
  --cor-marcador-menu: var(--tblr-purple, #ae3ec9);
}

/* O ícone já nasce na cor da seção, e não só quando ela está aberta. */
.menu-lateral .navbar-nav .nav-item-interno > .nav-link .nav-link-icon {
  color: var(--cor-marcador-menu);
}

.menu-lateral .navbar-nav .nav-item-interno > .nav-link {
  font-weight: 600;
}

/* O título abriga o selo: alinha os dois na mesma linha, com o selo colado. */
.menu-lateral .navbar-nav .nav-item-interno .nav-link-title {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.selo-interno {
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.1875rem 0.3125rem;
  border-radius: 0.25rem;
  color: var(--tblr-purple, #ae3ec9);
  background-color: rgba(174, 62, 201, 0.18);
  border: 1px solid rgba(174, 62, 201, 0.45);
  white-space: nowrap;
}

/* ── Recolher o menu (≥ lg) ─────────────────────────────────────────── */

/* Quem quer a tela inteira para a listagem recolhe o menu a uma coluna de
   ícones. O estado é a classe `menu-recolhido` no <html>, posta antes da
   pintura pelo `base.html` e alternada pelo botão (`menu.js`); a preferência
   fica no navegador. Só a partir de `lg`: no celular o menu já é o painel do
   toggler, e nada aqui vale lá.

   Recolhido, cada seção com submenu abre em um painel flutuante ao lado do
   ícone (o submenu do tema é estático, dentro da coluna — aqui ele sai dela),
   e o nome de cada item flutua à direita do ícone ao passar o mouse — é o
   próprio `.nav-link-title`, reposicionado, sem JS e sem tooltip do Bootstrap
   (instância criada e descartada a cada alternância era o que deixava dica
   pendurada na tela). */

.menu-recolher {
  position: absolute;
  top: 0.875rem;
  right: 0.5rem;
  z-index: 2;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  color: var(--tblr-navbar-color, rgba(255, 255, 255, 0.7));
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.2s ease;
}

.menu-recolher .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.menu-recolher:hover,
.menu-recolher:focus-visible {
  color: #fff;
  background-color: var(--fundo-item-ativo);
  outline: none;
}

@media (min-width: 992px) {
  /* A coluna encolhe e a página acompanha, no mesmo tempo. */
  .menu-lateral.navbar-vertical.navbar-expand-lg {
    transition: width 0.2s ease, transform 0.3s;
  }

  .menu-lateral.navbar-vertical.navbar-expand-lg ~ .page-wrapper {
    transition: margin-left 0.2s ease;
  }

  .menu-recolhido .menu-lateral.navbar-vertical.navbar-expand-lg {
    width: 4rem;
    /* O painel flutuante do submenu sai da coluna: com a rolagem do tema ele
       seria cortado. Recolhido o menu é curto (só ícones) e cabe na tela. */
    overflow: visible;
  }

  .menu-recolhido .menu-lateral.navbar-vertical.navbar-expand-lg ~ .page-wrapper {
    margin-left: 4rem;
  }

  /* Some o que precisa de largura: logomarca, selo do nível, setas. */
  .menu-recolhido .menu-lateral .navbar-brand,
  .menu-recolhido .menu-lateral .selo-nivel,
  .menu-recolhido .menu-lateral .navbar-nav .nav-link.dropdown-toggle::after {
    display: none;
  }

  /* O rótulo não some: sai da linha e vira a dica ao lado do ícone, visível
     só enquanto o mouse (ou o foco do teclado) está no item. Fica no DOM, então
     o leitor de tela continua lendo o nome da seção. */
  .menu-recolhido .menu-lateral .navbar-nav > .nav-item > .nav-link {
    position: relative;
  }

  .menu-recolhido .menu-lateral .navbar-nav > .nav-item > .nav-link > .nav-link-title {
    position: absolute;
    top: 50%;
    left: calc(100% + 0.5rem);
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    color: #fff;
    background-color: var(--tblr-bg-surface-dark, #151f2c);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease, visibility 0.12s ease;
    z-index: 1032;
  }

  .menu-recolhido .menu-lateral .navbar-nav > .nav-item > .nav-link:hover > .nav-link-title,
  .menu-recolhido .menu-lateral .navbar-nav > .nav-item > .nav-link:focus-visible > .nav-link-title {
    opacity: 1;
    visibility: visible;
  }

  /* Com o painel do submenu aberto, a dica ficaria por cima dele: some. */
  .menu-recolhido .menu-lateral .navbar-nav > .nav-item > .nav-link.show > .nav-link-title {
    display: none;
  }

  /* O botão vai para o topo da coluna, centralizado, com a seta espelhada. */
  .menu-recolhido .menu-lateral .menu-recolher {
    right: 50%;
    transform: translateX(50%) scaleX(-1);
  }

  .menu-recolhido .menu-lateral .navbar-collapse {
    padding-top: 2.5rem;
  }

  /* Ícone centralizado na coluna, sem o recuo do texto. */
  .menu-recolhido .menu-lateral.navbar-vertical .navbar-collapse .navbar-nav .nav-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  .menu-recolhido .menu-lateral .navbar-nav .nav-link .nav-link-icon {
    margin-right: 0;
  }

  /* O submenu vira painel flutuante ao lado do ícone. */
  .menu-recolhido .menu-lateral .navbar-nav .nav-item.dropdown {
    position: relative;
  }

  .menu-recolhido .menu-lateral.navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 0.25rem;
    min-width: 14rem;
    padding: 0.5rem 0;
    border-radius: 0.5rem;
    background-color: var(--tblr-bg-surface-dark, #151f2c);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
    z-index: 1031;
  }

  .menu-recolhido .menu-lateral.navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item {
    padding-left: 1.5rem;
    padding-right: 1.25rem;
  }

  .menu-recolhido .menu-lateral .navbar-nav .dropdown-menu .dropdown-item.active::before {
    left: 0.625rem;
  }

  /* O painel entra da esquerda, não de cima. */
  .menu-recolhido .menu-lateral .navbar-nav .dropdown-menu.show {
    animation: menu-abrir-lado 0.18s ease;
  }

  @keyframes menu-abrir-lado {
    from {
      opacity: 0;
      transform: translateX(-0.25rem);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-lateral.navbar-vertical.navbar-expand-lg,
  .menu-lateral.navbar-vertical.navbar-expand-lg ~ .page-wrapper,
  .menu-recolher {
    transition: none;
  }

  .menu-recolhido .menu-lateral .navbar-nav .dropdown-menu.show {
    animation: none;
  }
}

/* ── A gaveta do celular (< lg) ─────────────────────────────────────── */

/* Abaixo de `lg` o menu não é mais o painel que abre no fluxo e empurra a
   página para baixo: é uma gaveta (offcanvas do Bootstrap) que desliza por
   cima da tela, ocupa só parte da largura e deixa a página visível atrás, sob
   o escurecimento do tema. Fundo levemente translúcido com desfoque: o
   conteúdo atrás sugere onde se está, sem competir com o menu. A partir de
   `lg` o tema torna o offcanvas estático e nada daqui vale — a coluna fixa e
   o modo recolhido continuam como estão. */
@media (max-width: 991.98px) {
  /* Três classes de propósito: o tema declara a largura em
     `.offcanvas.offcanvas-start` (duas) e é carregado DEPOIS deste arquivo. */
  .menu-lateral .menu-gaveta.offcanvas-start {
    width: min(20rem, 85vw);
    /* `.navbar-collapse` centraliza os filhos; em coluna isso encolhe a lista
       e deixa um vão à esquerda. A lista ocupa a gaveta inteira. */
    align-items: stretch;
    background-color: rgba(24, 36, 51, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0.5rem 0 2rem rgba(0, 0, 0, 0.35);
    overflow-y: auto;
  }

  .menu-lateral .menu-gaveta .offcanvas-header {
    padding: 1rem 1.25rem 0.5rem;
  }

  .menu-lateral .menu-gaveta .offcanvas-title {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
  }

  .menu-lateral .menu-gaveta .navbar-nav {
    padding-bottom: 1rem;
  }

  /* Um pouco mais de respiro em cada item, em cima e embaixo: no dedo, a
     linha apertada do tema fica difícil de acertar. Pouco — o menu inteiro
     ainda precisa caber numa tela de celular sem rolar. */
  .menu-lateral.navbar .menu-gaveta.navbar-collapse .navbar-nav .nav-item .nav-link {
    padding-top: 0.8125rem;
    padding-bottom: 0.8125rem;
  }

  .menu-lateral .menu-gaveta .navbar-nav .dropdown-menu .dropdown-item {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }
}

/* ── Submenu dentro da seção (`subgrupo_menu`, macros_menu.html) ────────
   Ex.: Gestão SaaS › Gestão T.I. O título do grupo é um item que abre e fecha
   os seus; os itens dele ficam um degrau mais recuados que os da seção, com o
   ponto do item ativo acompanhando o recuo. */
.menu-lateral .menu-subgrupo-toggle {
  justify-content: space-between;
  align-items: center;
}

.menu-lateral .menu-subgrupo-toggle.menu-subgrupo-ativo {
  color: #fff;
}

.menu-lateral .menu-subgrupo-seta {
  flex-shrink: 0;
  width: 0.4375rem;
  height: 0.4375rem;
  margin-left: 0.75rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.7;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}

.menu-lateral .menu-subgrupo-toggle[aria-expanded="true"] .menu-subgrupo-seta {
  transform: rotate(-135deg) translateY(-2px);
}

.menu-lateral.navbar-vertical.navbar-expand-lg .navbar-collapse .menu-subgrupo-itens .dropdown-item,
.menu-lateral .navbar-nav .menu-subgrupo-itens .dropdown-item {
  padding-left: calc(var(--tblr-page-padding, 1rem) + 2.75rem);
}

.menu-lateral .navbar-nav .menu-subgrupo-itens .dropdown-item.active::before {
  left: calc(var(--tblr-page-padding, 1rem) + 2rem);
}

/* Menu recolhido (painel flutuante): o mesmo degrau a partir do recuo do painel. */
@media (min-width: 992px) {
  .menu-recolhido .menu-lateral.navbar-vertical.navbar-expand-lg .navbar-collapse .menu-subgrupo-itens .dropdown-item {
    padding-left: 2.5rem;
  }

  .menu-recolhido .menu-lateral .navbar-nav .menu-subgrupo-itens .dropdown-item.active::before {
    left: 1.625rem;
  }
}