/* Fix sidebar behavior on mobile - no hover when toggled off */
@media (max-width: 767.98px) {
  /* When sidebar is toggled on mobile, completely hide it - no hover behavior */
  .sidebar.toggled {
    width: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    display: none !important;
  }

  /* Prevent any hover behavior from showing menu items when toggled off */
  .sidebar.toggled .nav-item,
  .sidebar.toggled .nav-item:hover,
  .sidebar.toggled .nav-item .nav-link,
  .sidebar.toggled .nav-item .nav-link:hover,
  .sidebar.toggled .nav-item .collapse,
  .sidebar.toggled .nav-item .collapse:hover,
  .sidebar.toggled .nav-item .collapsing,
  .sidebar.toggled .nav-item .collapse .collapse-inner,
  .sidebar.toggled .sidebar-brand,
  .sidebar.toggled hr.sidebar-divider,
  .sidebar.toggled .sidebar-heading {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Ensure sidebar is only visible when NOT toggled on mobile */
  .sidebar:not(.toggled) {
    width: 16rem !important;
    overflow: visible;
    visibility: visible;
    display: block !important;
  }

  /* Hide sidebar toggle button when sidebar is toggled on mobile */
  .sidebar.toggled #sidebarToggle {
    display: none !important;
    visibility: hidden !important;
  }
}

/* For desktop (md and up), keep the original collapsed behavior with hover */
@media (min-width: 768px) {
  /* On desktop, when toggled, show collapsed sidebar with hover behavior */
  .sidebar.toggled {
    overflow: visible;
    visibility: visible;
    display: block;
  }
}