/* Mobile sidebar override loaded after styles.css */
@media (max-width: 991.98px) {
  .page .main-content,
  .page .app-header,
  .page .footer {
    padding-left: 0 !important;
    transition: none !important;
  }

  .page .app-sidebar {
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    width: 15rem !important;
    height: 100vh !important;
    z-index: 1050 !important;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
    overflow: visible !important;
  }

  .page.sidebar-toggled .app-sidebar,
  .page .app-sidebar.show {
    transform: translateX(0) !important;
  }

  /* Force-close on mobile when page state says sidebar is closed,
     even if Bootstrap keeps the static 'show' class on #sidebar. */
  .page:not(.sidebar-toggled) .app-sidebar,
  .page:not(.sidebar-toggled) .app-sidebar.show {
    transform: translateX(-100%) !important;
  }

  .page .app-sidebar .main-sidebar-header {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 5rem !important;
    flex-shrink: 0;
  }

  .page .app-sidebar .main-sidebar {
    padding-block-start: 0 !important;
    height: calc(100vh - 5rem) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
}

.sidebar-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.3s ease;
}