.sidebar {
  padding: 8px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-parent {
  z-index: 1000;
}

.sidebar-item {
  cursor: pointer;
  border-radius: 5px;
  padding: 8px;
  display: block;
  color: #1a1a1a;
  margin-bottom: 4px;
  text-decoration: none;

  &.active {
    background: #E5F0FB;
    font-weight: 600;
    color: $primary;
  }
}

// New styles for collapse functionality
.col-md-3.collapsed {
  flex: 0 0 auto;
  width: 50px !important; // Keep a small width for the toggle button
  padding-right: 0;
  padding-left: 8px;
}

.col-md-9.expanded {
  flex: 0 0 auto;
  width: calc(100% - 50px) !important;
}

// Ensure smooth transitions
.col-md-3,
.col-md-9 {
  transition: width 0.3s ease;
}

// Hide sidebar content but keep toggle visible
.collapsed .sidebar {
  width: 35px; // Enough width for the toggle button
  height: 68px !important;

  // Hide everything except the toggle button
  >.d-flex>*:not(#sidebarToggle) {
    display: none !important;
  }

  // Hide all content after the top section
  >*:not(:first-child) {
    display: none !important;
  }
}

// Keep toggle button visible and centered when collapsed
.collapsed #sidebarToggle {
  margin: 0;
  padding: 4px;
}

.sidebar-project-title {
  white-space: nowrap;
  /* Prevent wrapping */
}

.compact-divider {
  height: 2px;
  border-width: 0;
  background-color: #DCE0E4;
}