/**
 * Mobile Navbar Fix
 * Critical fixes to ensure sidebar appears below header on mobile
 * This file MUST load last to override all other styles
 *
 * @package Trippy's Food Corporation ERP
 * @version 1.0
 */

/* Force sidebar below header on mobile with maximum specificity */
@media screen and (max-width: 767px) {
  html body #sidebar.sidebar,
  html body aside#sidebar.sidebar,
  html body aside.sidebar#sidebar {
    position: fixed !important;
    top: 80px !important;
    left: 0 !important;
    height: calc(100vh - 80px) !important;
    width: 16rem !important;
    transform: translateX(-100%) !important;
    z-index: 40 !important;
    margin: 0 !important;
    padding-top: 0 !important;
  }

  html body #sidebar.sidebar.show,
  html body aside#sidebar.sidebar.show,
  html body aside.sidebar#sidebar.show {
    transform: translateX(0) !important;
  }

  html body #main-header.header-container,
  html body header#main-header.header-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 80px !important;
    z-index: 50 !important;
  }

  html body .sidebar-overlay,
  html body #sidebar-overlay.sidebar-overlay {
    position: fixed !important;
    top: 80px !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100vh - 80px) !important;
    z-index: 39 !important;
  }
}