@supports (height: 100dvh) {
  .app-shell-sidebar,
  .app-sidebar-shell {
    height: 100dvh;
    max-height: 100dvh;
  }
}

@media (max-width: 767.98px) {
  .app-shell-sidebar {
    inset: 0 auto auto 0;
    height: 100vh;
    max-height: 100vh;
  }

  @supports (height: 100dvh) {
    .app-shell-sidebar {
      height: 100dvh;
      max-height: 100dvh;
    }
  }

  .app-sidebar-shell {
    min-height: 0;
    height: 100%;
    max-height: 100%;
  }

  .app-shell:has(.app-page-mobile-sticky-bar) .app-shell-sidebar {
    --app-mobile-sidebar-top: calc(env(safe-area-inset-top, 0px) + 4.55rem);

    top: var(--app-mobile-sidebar-top);
    height: calc(100vh - var(--app-mobile-sidebar-top));
    max-height: calc(100vh - var(--app-mobile-sidebar-top));
  }

  @supports (height: 100dvh) {
    .app-shell:has(.app-page-mobile-sticky-bar) .app-shell-sidebar {
      height: calc(100dvh - var(--app-mobile-sidebar-top));
      max-height: calc(100dvh - var(--app-mobile-sidebar-top));
    }
  }

  .app-sidebar-content,
  .app-sidebar-expanded,
  .app-sidebar-panel,
  .app-sidebar-rail-panel {
    min-height: 0;
    height: 100%;
    max-height: 100%;
  }

  .app-sidebar-panel,
  .app-sidebar-rail-panel {
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .app-sidebar-scroll-region {
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .app-sidebar-footer {
    flex: 0 0 auto;
    max-height: none;
  }
}