/* =========================================================
   FINAL LAYOUT FIX
   Desktop/tablet: fixed left sidebar + independently scrollable page content.
   Mobile: fixed bottom nav + independently scrollable page content.
   ========================================================= */

html,
body{
  width:100%;
  height:100%;
  overflow:hidden!important;
}

body{
  margin:0;
}

.app{
  display:block!important;
  width:100%;
  height:100vh!important;
  height:100dvh!important;
  min-height:0!important;
  overflow:hidden!important;
}

/* Desktop sidebar: truly fixed, never moves with page content */
.sidebar{
  position:fixed!important;
  z-index:50;
  left:0;
  top:0;
  bottom:auto;
  width:236px;
  height:100vh!important;
  height:100dvh!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
}

/* Every route/page gets its own scroll container */
.main.page{
  box-sizing:border-box;
  display:block;
  position:relative;
  margin:0 0 0 236px!important;
  width:calc(100vw - 236px)!important;
  max-width:none!important;
  height:100vh!important;
  height:100dvh!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
  padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))!important;
}

/* hidden SPA routes must remain completely absent */
.main.page[hidden]{
  display:none!important;
}

/* Tablet: same behavior, only the fixed sidebar becomes narrow */
@media (max-width:1120px) and (min-width:761px){
  .sidebar{
    width:76px!important;
  }

  .main.page{
    margin-left:76px!important;
    width:calc(100vw - 76px)!important;
  }
}

/* Mobile: bottom navigation stays fixed, content scrolls above/behind it */
@media (max-width:760px){
  .app{
    height:100vh!important;
    height:100dvh!important;
  }

  .sidebar{
    position:fixed!important;
    z-index:55;
    left:0!important;
    right:0!important;
    top:auto!important;
    bottom:0!important;
    width:100%!important;
    height:calc(64px + env(safe-area-inset-bottom,0px))!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
  }

  .main.page{
    margin-left:0!important;
    width:100vw!important;
    height:100vh!important;
    height:100dvh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding-bottom:calc(172px + env(safe-area-inset-bottom,0px))!important;
  }
}

/* When an overlay is open, only the page scroller is frozen behind it */
html.sheet-open .main.page:not([hidden]),
html.gated .main.page:not([hidden]){
  overflow:hidden!important;
}