/* public/css/mobile-fixes.css
 * Hot-fixes for mobile navigation & layout — 2025-05-25
 * – Correct stacking order so sidebars sit above the blur overlay
 * – Disable heavy backdrop-blur on small screens (header / footer)
 * – Keep overlay non-interactive until JS enables it
 */

@media (max-width: 767px) {

  /* Overlay should dim the **page**, not the sidebar itself */
  #sidebarOverlay {
    z-index: 53 !important;      /* below #sidebar (56) & #mobileNavPanel (59)   */
    pointer-events: none;        /* JS switches to 'auto' when visible           */
  }

  /* CodeGen slide-out sidebar */
  #sidebar {
    z-index: 56 !important;
  }

  /* Global off-canvas navigation panel */
  #mobileNavPanel {
    z-index: 59 !important;
  }

  /* Remove double-blur on very small screens */
  header.fixed-header,
  footer.fixed-footer,
  .dark header.fixed-header,
  .dark footer.fixed-footer {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  header.fixed-header,
  footer.fixed-footer {
    background-color: var(--card-bg-light) !important;
  }
  .dark header.fixed-header,
  .dark footer.fixed-footer {
    background-color: var(--card-bg-dark) !important;
  }
}