/* Desktop collapsed: shrink to icons only */
@media (min-width: 769px) {
  .sidebar.collapsed {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    overflow: hidden !important;
  }
  /* Hide ONLY label/text elements when collapsed.
     Previously this used `.sidebar.collapsed a span, .sidebar.collapsed button span`
     which also caught .nav-icon (which is a <span> wrapping the SVG) and made
     every nav icon invisible. Now we list the actual label classes explicitly. */
  .sidebar.collapsed .nav-text,
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .label,
  .sidebar.collapsed .category-heading,
  .sidebar.collapsed .nav-cat,
  .sidebar.collapsed .logo-text,
  .sidebar.collapsed .logo-primary,
  .sidebar.collapsed .logo-secondary {
    display: none !important;
  }
}

/* Mobile collapsed: hide sidebar entirely, no blur, no purple handle */
@media (max-width: 768px) {
  .sidebar.collapsed {
    transform: translateX(-110%) !important;
    visibility: hidden !important;
  }
  /* Remove any blur/overlay from page when sidebar collapsed */
  body.sidebar-collapsed,
  body.sidebar-collapsed main,
  body.sidebar-collapsed .main-content {
    filter: none !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
  }
  /* Hide the ugly purple handle - user will use standard hamburger icon */
  .sidebar-collapsed-handle,
  #sidebarHandle {
    display: none !important;
  }
}

/* Mobile bottom spacer so users can see their full profile */
@media (max-width: 768px) {
  body, main, .main-content, #main, .page-content, .content-wrap {
    padding-bottom: 120px !important;
  }
}