/* Correção de navegação — menu lateral com rolagem própria.
   Soluciona itens cortados em notebooks e ao redimensionar a janela.
   Só altera a apresentação. Não modifica acesso, navegação ou dados. */
@media (min-width: 901px) {
  .app > .system-nav {
    /* A altura deve acompanhar a janela, nunca impor 640px em tela menor. */
    height: calc(100vh - 24px) !important;
    height: calc(100dvh - 24px) !important;
    min-height: 0 !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 199, 222, .7) transparent;
    scroll-padding-block: 12px;
  }
  .app > .system-nav::-webkit-scrollbar {
    width: 7px;
  }
  .app > .system-nav::-webkit-scrollbar-thumb {
    background: rgba(156, 199, 222, .7);
    border-radius: 10px;
  }
  .app > .system-nav::-webkit-scrollbar-track {
    background: transparent;
  }
  /* Itens de menu não podem encolher a ponto de desaparecer. */
  .app > .system-nav > .brand,
  .app > .system-nav > .nav-btn,
  .app > .system-nav > .nav-status {
    flex-shrink: 0 !important;
  }
  /* Espaço flexível só ocupa a sobra quando ela realmente existe. */
  .app > .system-nav > .nav-spacer {
    flex: 1 0 0 !important;
    min-height: 0;
  }
  .app > .system-nav .nav-btn:focus-visible,
  .app > .system-nav .nav-signout:focus-visible {
    outline: 2px solid #8bd4fa !important;
    outline-offset: -2px;
  }
}
/* Em celulares, a navegação continua horizontal, sem altura fixa. */
@media (max-width: 900px) {
  .app > .system-nav {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
    overscroll-behavior-y: auto;
  }
  .app > .system-nav > .nav-btn,
  .app > .system-nav > .brand {
    flex-shrink: 0 !important;
  }
}