/* Desktop layout fixes: ensure pages use wide containers and mobile nav doesn't cover content on large screens */

/* Allow the main app container to expand on larger viewports */
.app-content-fullwidth {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Ensure body/min-height uses full viewport height on desktop */
@media (min-width: 768px) {
  html, body {
    min-height: 100vh;
  }
}

/* Hide the mobile bottom nav on larger screens to avoid covering page content */
@media (min-width: 1024px) {
  #bottom-nav {
    display: none !important;
  }
}

/* Side menu tweaks: make side menu appear as panel on desktop (not full overlay) */
@media (min-width: 1024px) {
  #side-menu .w-80 {
    transform: translateX(0) !important;
    position: relative !important;
    box-shadow: none !important;
  }
  #side-menu {
    position: static !important;
    display: block !important;
    background: transparent !important;
  }
}

/* Pin the sidebar to the right on desktop and reserve space for it */
@media (min-width: 1024px) {
  /* The sidebar inner panel (w-80 = 20rem = 320px) */
  #side-menu {
    position: fixed !important;
    top: 0;
    right: 0; /* keep it on the right side */
    height: 100vh;
    width: 20rem;
    z-index: 60;
    display: block !important;
    background: linear-gradient(180deg, rgba(17,24,39,0.95), rgba(17,24,39,0.95));
    box-shadow: -8px 0 24px rgba(0,0,0,0.45);
  }

  /* Hide overlay/backdrop because sidebar is always visible on desktop */
  #side-menu > [data-action="close-overlay"] {
    display: none !important;
  }

  /* Ensure main app content is not hidden under the fixed sidebar */
  .has-sidebar #app-main {
    margin-right: 20rem; /* reserve same width as sidebar */
    min-height: 100vh;
  }
}

/* Make the inner sidebar panel scrollable and allow pointer events */
#side-menu > div {
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* When the mouse is over the sidebar use its scrolling, not the page (nice UX) */
#side-menu:hover {
  pointer-events: auto;
}


/* Utility to widen inner content when needed (use by server templates) */
.content-wider {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Small tweak for fixed overlays/backdrops so they don't block desktop click areas */
@media (min-width: 1024px) {
  #side-menu > [data-action="close-overlay"] {
    display: none !important;
  }
}