/* v0.5.151: mobile nav remains visible and horizontally scrollable */
@media (max-width: 820px) {
  #app.app-shell:not(.hidden) {display:block; padding:0}
  #app.app-shell > .sidebar {
    position:sticky !important; inset:auto !important; top:0 !important;
    z-index:1000; display:flex !important; flex-direction:column !important;
    width:100%; height:auto !important; max-height:none !important;
    padding:7px 8px; overflow:visible !important;
    background:#0c0f12; border-right:0; border-bottom:1px solid #343a43;
  }
  #app.app-shell > .sidebar .logo-row {display:none}
  #app.app-shell > .sidebar #nav {
    display:flex !important; flex-direction:row !important;
    flex-wrap:nowrap !important; flex:none !important; width:100%;
    min-width:0; gap:5px; overflow-x:auto !important;
    overflow-y:hidden !important; -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain; padding-bottom:5px;
  }
  #app.app-shell > .sidebar #nav button {
    display:flex !important; flex:0 0 auto !important;
    font-size:12px !important; min-height:40px;
    justify-content:center; padding:8px 10px; white-space:nowrap;
  }
  #app.app-shell > .sidebar .sidebar-foot {display:none}
  #app.app-shell > .main {width:100%; min-width:0}
}

/* v0.5.152: cancel the older off-canvas transform, not only its fixed position. */
@media(max-width:820px){
 #app.app-shell > .sidebar{transform:none !important;transition:none;box-shadow:none}
 .mobile-nav-toggle,.mobile-nav-backdrop{display:none !important}
 body.mobile-nav-locked{overflow-y:auto}
 #app .topbar{position:relative;top:auto;grid-template-columns:minmax(0,1fr)}
}

@media(max-width:820px){
 #app.app-shell > .sidebar .sidebar-foot{display:flex !important;width:100%;margin:0;border:0;padding:2px 8px;min-height:28px}
 #app.app-shell > .sidebar .sidebar-foot .text-btn{display:inline-block !important}
 #app.app-shell > .sidebar .sidebar-foot .status-line span{display:inline !important}
}