/*
  Fix "menu precisa vir ABERTO por padrão ao abrir o sistema, só fecha clicando no X / fora dele"
  (12/10 — ajuste: a 1ª versão deste fix deixava a tela inicial vazia/sem menu, pedido revertido).

  O tema tinha o menu DOCADO permanente em telas >=992px, com várias variantes (ícone colapsado,
  hover-pra-expandir, double-menu, detached...) controladas por data-nav-style/data-vertical-style.
  O modo hover (HoverToggleInnerMenuFn, NavMenu.razor) disparava uma chamada ao servidor a cada
  passada do mouse no menu inteiro — risco real de estourar o circuito Blazor (explica os "menu não
  fecha"/"circuito caiu" encontrados nesta mesma sessão). Removido de vez (ver NavMenu.razor e
  javaScriptInterop.js — interop.toggleSidebar/closeSidebar viraram um binário único).

  Esta folha unifica o comportamento: o menu é SEMPRE um overlay flutuante (.app-sidebar já é
  position:fixed por baixo do tema), escondido por padrão em QUALQUER tamanho de tela — só aparece
  com html[data-toggled="open"]. Mesma regra que o tema já usava só para <992px, agora sem a media
  query, com !important pra vencer as variantes de data-nav-style/data-vertical-style do tema (que
  deixam de ter efeito sobre a visibilidade do menu — só controlavam isso).
*/

html:not([data-toggled="open"]) .app-sidebar {
  transform: translateX(-15rem) !important;
  transition: transform 300ms ease;
}

html[data-toggled="open"] .app-sidebar {
  transform: translateX(0) !important;
  transition: transform 300ms ease;
}

html[dir="rtl"]:not([data-toggled="open"]) .app-sidebar {
  transform: translateX(15rem) !important;
}

html[dir="rtl"][data-toggled="open"] .app-sidebar {
  transform: translateX(0) !important;
}

/* conteúdo nunca reserva espaço pro menu — ele sempre fica por cima (overlay), nunca "empurra" a tela */
.app-header {
  padding-inline-start: 0 !important;
}

/* overlay escurecido atrás do menu — mesma regra de sempre (styles.css), só reforçando pra qualquer largura */
html[data-toggled="open"] #responsive-overlay {
  visibility: visible;
}

/* botão "X" dentro do cabeçalho do menu */
.b9-sidebar-close {
  position: absolute;
  inset-inline-end: 0.75rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--menu-prime-color, #536485);
  cursor: pointer;
}

.b9-sidebar-close:hover {
  background: rgba(132, 90, 223, 0.1);
  color: #845ADF;
}