/* This creates a skinny side bar fixed to the left of the page */
.sidebar {
  position: fixed;
  top: 7vh;
  left: 0;
  bottom: 0;
  width: 5rem;
  padding: 2rem 1rem;
  background-color: lightgreen;
  z-index: 1050;
  transition: width 0.1s ease-in-out;
}

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

/* make sure the contents of the navlink don't wrap when navbar collapses */
.sidebar .nav-link {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  color: black !important; /* Ensure text and icons are black */
  display: flex; 
  align-items: center; 
  justify-content: flex-start; /* Align items to the start */
  padding-left: 1rem; /* Further reduced from 1.25rem to move icons more left */
  padding-right: 0; 
}

.sidebar:hover .nav-link {
  /* justify-content: flex-start; */ /* Already set above */
  padding-left: 0.5rem; /* Indent items slightly on hover */
}

/* fix the width of the icons */
.sidebar .nav-link i,
.sidebar .nav-link svg {
  /* width: 1rem; */ 
  flex-shrink: 0;
  display: block; 
  margin-left: 0; /* Remove auto margins */
  margin-right: 0; /* Remove auto margins */
}

.sidebar:hover .nav-link svg,
.sidebar:hover .nav-link i {
  /* margin-left: 0; */ /* Already 0 */
  margin-right: 0.5rem; 
}

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

/* when the sidebar is hovered, reveal the labels */
.sidebar:hover .nav-link span {
  visibility: visible;
  opacity: 1;
  color: black;
}

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

/* position the header relative to the logo and hide by default */
.sidebar-header h2 {
  opacity: 0;
  margin-left: 1rem;
  margin-bottom: 0;
  transition: opacity 0.1s ease-in-out;
}

/* reveal the header when the sidebar is toggled */
.sidebar:hover .sidebar-header h2 {
  opacity: 1;
}

/* position the content relative to the collapsed sidebar */
.content {
  margin-left: 0.2vw; /* Reduced from 0.5vw */
  margin-right: 0; 
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .sidebar {
    width: 2.5rem !important; /* Half width on mobile */
    padding: 1rem 0.5rem; /* Adjust padding slightly for smaller width */
  }
  .sidebar .nav-link {
    padding-left: 0.1rem; /* Further reduced from 0.25rem */
  }
  .sidebar:hover {
    width: 8rem; /* Reduced hover width on mobile */
  }
  .sidebar .nav-link span {
    /* Optionally hide text even on hover on very small screens if needed */
    /* Or adjust font size */
  }
  .content {
    margin-left: 2.6rem; /* Reduced from 2.75rem */
    margin-right: 0; 
  }
}

/* Custom Navbar Style */
.custom-navbar {
    background-color: lightgreen !important;
}

.custom-navbar .navbar-brand,
.custom-navbar .nav-link {
    color: #333 !important; /* A dark grey color for better readability */
}

.custom-navbar .navbar-brand {
    font-size: 1.25rem; /* Make brand text slightly larger */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Add a subtle shadow */
}

.custom-navbar .navbar-brand:hover,
.custom-navbar .nav-link:hover {
    color: #000 !important; /* Darker on hover */
}