/* Compact desktop navigation. Rows share the actual available height; no
   hard-coded module count (the previous /17 overflowed after adding Compras).
   Keep scrolling as an accessibility fallback only for extremely short views. */
@media screen {
  .app-shell > .sidebar {
    width: 168px;
    min-width: 168px;
    flex-shrink: 0;
    height: 100dvh;
    padding-block: 4px;
  }

  .app-shell > .sidebar .brand {
    padding-block: 2px 6px;
    margin-bottom: 4px;
  }

  .app-shell > .sidebar .menu {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: auto;
  }

  /* Flatten only the layout boxes, retaining the DOM order and all labels. */
  .app-shell > .sidebar .menu .menu-section {
    display: contents;
  }

  .app-shell > .sidebar .menu .menu-section-title {
    flex: 0 0 18px;
    height: 18px;
    margin: 0;
    padding-block: 0 2px;
    line-height: 16px;
  }

  .app-shell > .sidebar .menu .menu-section + .menu-section .menu-section-title {
    margin-top: 4px;
  }

  .app-shell > .sidebar .menu button {
    --sb-row-height: auto;
    flex: 1 1 26px;
    height: auto;
    min-height: 24px;
    max-height: none;
    padding-block: 0;
  }

  .app-shell > .sidebar .sidebar-user {
    margin-top: 4px;
    padding-block: 6px 2px;
  }
}

@media screen and (max-height: 620px) {
  .app-shell > .sidebar .brand {
    padding-block: 0 4px;
    margin-bottom: 3px;
  }
  .app-shell > .sidebar .menu .menu-section-title {
    flex-basis: 16px;
    height: 16px;
    padding-block: 0;
  }
  .app-shell > .sidebar .menu .menu-section + .menu-section .menu-section-title {
    margin-top: 3px;
  }
  .app-shell > .sidebar .menu button {
    flex-basis: 24px;
    min-height: 22px;
    max-height: none;
  }
  .app-shell > .sidebar .sidebar-user {
    margin-top: 3px;
    padding-block: 4px 0;
  }
}