/* Sidebar container */
.sidebar {
  width: 250px;
  height: 100ev;
  background: var(--primary-color);
  color: var(--secondary-color);
  display: flex;
  flex-direction: column;
  gap: 10px;

}

.sidebar img{
  margin: 10%;
  width: 80%;
  max-height: 200px;
}
  
.sidebar a{
  text-decoration: none;
}

/* Sidebar row (menu item) */
.sidebar .menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  background: none;
  transition: background 0.3s;
}

/* Hover effect *
.sidebar .menu-item:hover {
  background: var(--secondary-color);
}

/* Main link inside row */
.sidebar .menu-item .main-link {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  gap: 10px;
  text-decoration: none;
  color: var(--secondary-color);
  font-size: 16px;
  flex-grow: 1;  /* Ensures it takes up all available space */
}

.sidebar .menu-item .main-link:hover {
  background: var(--secondary-color);
  color: var(--primary-color);
}

/* Icon inside link */
.sidebar .menu-item .icon {
  font-size: 20px;
}

/* Extra link (styled as a smaller "+" link) */
.sidebar .menu-item .extra-link {
  padding: 12px 8px;
  font-size: 18px;
  color: var(--secondary-color);
  text-decoration: none;
  transition: color 0.3s;
}

.sidebar .menu-item .extra-link:hover {
  background: var(--secondary-color);
  color: var(--primary-color);
}

.sidebar .bottom-links {
  margin-top: auto; /* Pushes this div to the bottom */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Submenu (Initially Hidden) */
.submenu {
  display: none;
  flex-direction: column;
  transition: max-height 0.3s ease-out;
  overflow: hidden;
  padding-left: 20px; /* Indent submenu */
}

.submenu .menu-item .main-link{
  background: var(--secondary-color);
  color: var(--primary-color);
}

.submenu .menu-item .main-link:hover {
  background: var(--primary-color);
  color: var(--secondary-color);
}

/* Show Submenu when active */
.submenu.active {
  display: flex;
}