/* This creates a skinny side bar fixed to the left of the page */
.sidebar {
  position: fixed;
  opacity: 1;
  top: 0;
  left: 0;
  bottom: 0;
  width: 5rem;
  padding: 2rem 1rem;
  background-color: var(--bs-body-bg);
  border-right: 1px solid var(--bs-gray-800);
  z-index: 1050;
  transition: width 0.1s ease-in-out;
}

/* when the user hovers on the sidebar, expand it */
.sidebar:hover {
  width: 18rem;
}

.sidebar .sidebar-group-title {
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center; /* Vertically align items */
  height: 2rem;

  text-transform: uppercase;
  padding-left: 0rem;
  padding-bottom: 0.5rem;
  padding-top: 1rem;
}

/* manage visibility of the separator line in group headers */
.sidebar .sidebar-group-title hr {
  visibility: visible;
  opacity:0.5;
  display: block;
  width: 100%;
  border-top: 5px dotted;
  color: var(--bs-body-color, #212529);
}
.sidebar:hover .sidebar-group-title hr {
  visibility: hidden;
  display: none;
}

/* make sure the contents of the navlink don't wrap when navbar collapses */
.sidebar .nav-link {
  width: 100%;
  max-width: 100%;
  height: 2.5rem;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center; /* Vertically align items */
  padding:0.5rem 1rem;

  background-color: var(--bs-body-bg) !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease;
}

/* Hover state: change background to a lighter gray */
.sidebar .nav-link:hover {
  background-color: var(--bs-gray-700) !important;
}

/* Active state: different gray and bold text */
.sidebar .nav-link.active {
  background-color: var(--bs-gray-600) !important;
  font-weight: bold;
}

/* fix the width of the icons */
.sidebar .nav-link i {
  width: 1rem;
  margin-right: 1em;
  color: var(--bs-body-color, #212529);
}

/* hide the navlink labels by default */
.sidebar .nav-link span, .sidebar .sidebar-group-title span {
  visibility: hidden;
  display: none;
  opacity: 1;
  transition: opacity 0.1s ease-in-out;
}

/* when the sidebar is hovered, reveal the labels */
.sidebar:hover .nav-link span, .sidebar:hover .sidebar-group-title span {
  visibility: visible;
  display: block;
  opacity: 1;
  color: var(--bs-body-color, #212529);
}

/* container for the sidebar header. make sure the contents don't wrap when
  * the sidebar is collapsed.
  */
.sidebar-header {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}

/* Default: show the collapsed logo and hide the expanded logo */
.sidebar-header img.logo-collapsed {
  opacity: 1;
  transition: opacity 0.1s ease-in-out;
  display: block;
}

.sidebar-header img.logo-expanded {
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
  display: none;
}

/* On sidebar hover: hide the collapsed logo and show the expanded logo */
.sidebar:hover .sidebar-header img.logo-collapsed {
  opacity: 0;
  display: none;
}

.sidebar:hover .sidebar-header img.logo-expanded {
  opacity: 1;
  display: block;
}

.sidebar .sidebar-footer {
  opacity: 0;
  display: none;
  position: absolute;
  bottom: 0;
  background-color: var(--bs-body-bg);
}

.sidebar:hover .sidebar-footer {
  opacity: 1;
  display: block;
  padding: 1rem;
}