/* Independent Fixed Sidebar with Instant Hover Scroll & Extra Bottom Clearance */
aside#menu.sidebar,
.sidebar {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 230px !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 1000 !important;

  /* Firefox scrollbar */
  scrollbar-width: thin !important;
  scrollbar-color: rgba(100, 116, 139, 0.2) transparent !important;
  transition: scrollbar-color 0.2s ease-in-out;
}

aside#menu.sidebar:hover,
.sidebar:hover {
  scrollbar-color: #64748b transparent !important;
}

#setup-menu-wrapper {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 230px !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 1001 !important;

  scrollbar-width: thin !important;
  scrollbar-color: rgba(100, 116, 139, 0.2) transparent !important;
}

#setup-menu-wrapper:hover {
  scrollbar-color: #64748b transparent !important;
}

/* WebKit (Chrome, Edge, Safari) Scrollbar Styling */
aside#menu.sidebar::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
#setup-menu-wrapper::-webkit-scrollbar {
  width: 6px !important;
}

aside#menu.sidebar::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track,
#setup-menu-wrapper::-webkit-scrollbar-track {
  background: transparent !important;
}

aside#menu.sidebar::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
#setup-menu-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(100, 116, 139, 0.2) !important;
  border-radius: 4px !important;
  transition: background-color 0.2s ease-in-out;
}

/* Highlight Scrollbar Thumb on Hover */
aside#menu.sidebar:hover::-webkit-scrollbar-thumb,
.sidebar:hover::-webkit-scrollbar-thumb,
#setup-menu-wrapper:hover::-webkit-scrollbar-thumb {
  background-color: #64748b !important;
}

/* CRITICAL FIX FOR BOTTOM TRUNCATION: Add 250px bottom padding so all items & expanded submenus scroll completely to the end */
#side-menu,
#setup-menu,
.sidebar > ul.nav {
  padding-bottom: 250px !important;
  margin-bottom: 0 !important;
}