/* Sidebar base styles */
.sidebar {
  height: calc(100vh - 70px); /* Subtract header height */
  width: 250px; /* Fixed width for sidebar */
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 10px;
  position: fixed;
  top: 70px; /* Header height */
  left: 0;
  bottom: 0;
  background-color: #fff; /* Ensure sidebar has a background */
  border-right: 1px solid #e7e7e7; /* Add subtle border */
  z-index: 100; /* Ensure sidebar stays above content */
  transition: transform 0.3s ease-in-out;
}

/* Hidden sidebar state */
.sidebar.hidden {
  transform: translateX(-250px);
}

/* Adjust main content when sidebar is hidden */
.content-wrapper {
  transition: padding-left 0.3s ease-in-out;
}

.content-wrapper.sidebar-hidden {
  padding-left: 0 !important;
}

/* Main menu items */
.sidebar .nav > li > a {
  cursor: pointer;
  padding-left: 25px;
}

/* Add margin to first menu item */
.sidebar .nav > li:first-child {
  margin-top: 15px;
}

/* Hover states */
.sidebar .nav > li > a:hover {
  background-color: rgb(241, 243, 244);
}

/* Submenu items */
.sidebar ul.submenu li > a {
  cursor: pointer;
  padding-left: 45px;
}

/* Expanded menu items */
.sidebar .nav > li.open > a {
  background-color: transparent !important;
}

.sidebar .nav > li.open > a:hover {
  background-color: rgb(241, 243, 244) !important;
}

/* Submenu styling */
.sidebar ul.submenu li a {
  background-color: transparent !important;
  padding-left: 45px;
}

.sidebar ul.submenu li a:hover,
.sidebar ul.submenu li.active > a {
  background-color: transparent !important;
  color: rgb(37, 107, 255) !important;
  border-left: 2px solid rgb(37, 107, 255);
}

/* Active states */
.sidebar .nav > li.active > a,
.sidebar .nav > li.has-active-submenu > a {
  background-color: rgb(224, 233, 254) !important;
  color: rgb(37, 107, 255) !important;
  border-left: 4px solid rgb(37, 107, 255);
}
.sidebar .submenu a {
  border-left: 2px solid rgb(241, 243, 244);
}
/* Also style active submenu items */
.sidebar .submenu > li.active > a {
  background-color: rgb(224, 233, 254) !important;
  color: rgb(37, 107, 255) !important;
  border-left: 2px solid rgb(37, 107, 255);
}

/* When submenu item is active, highlight parent */
.sidebar .nav > li.has-active-submenu > a {
  background-color: rgb(224, 233, 254) !important;
  color: rgb(37, 107, 255) !important;
  border-left: 4px solid rgb(37, 107, 255);
}

/* Ensure SVG icons in active menu items also get the blue color */
.sidebar .nav > li.active > a svg,
.sidebar .submenu > li.active > a svg,
.sidebar .nav > li.has-active-submenu > a svg {
  color: rgb(37, 107, 255) !important;
}

/* Style the submenu icons */
.submenu-icon {
  margin-top: 2px;
  font-size: 16px;
  margin-left: auto;
  display: inline-block;
  position: absolute;
  right: 15px;
  font-weight: bold;
}