/* Additional styles for the SideNav component */
.nav-footer {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1rem;
}

.user-info {
  padding: 1rem;
  color: #cbd5e0;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
}

.username {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.user-info i {
  margin-right: 0.5rem;
  color: #63b3ed;
}

.nav-item.logout {
  color: #fc8181;
  margin-top: 0.5rem;
}

.nav-item.logout:hover {
  background-color: rgba(252, 129, 129, 0.2);
}

/* Make the side nav display items from top to bottom */
.side-nav {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.nav-items {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}