/* =======================
   Sidebar (left + only desktop)
   ======================= */

.sidebar {
  position: fixed;
  top: var(--layout-navbar-height);
  left: 0;
  z-index: 100;

  width: var(--layout-sidebar-width);
  height: calc(100vh - var(--layout-navbar-height));

  display: flex;
  flex-direction: column;

  padding: 16px 12px;
  background-color: var(--color-primary);

  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-bottom: 18px;
}

.sidebar__brand img {
  display: block;
  height: 34px;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar__link,
.sidebar__logout {
  display: flex;
  align-items: center;
  gap: 10px;

  text-decoration: none;
  color: var(--color-text);

  padding: 10px 12px;
  border-radius: 999px;

  background: transparent;
}

.sidebar__link:hover,
.sidebar__logout:hover {
  background-color: var(--color-text);
  color: var(--color-background);
}

.sidebar__icon {
  width: 18px;
  height: 18px;
  display: block;
}

/* Rende l'icona bianca quando:
   1. Si fa hover sul link del menu (.sidebar__link)
   2. Il link è attivo (.is-active)
   3. Si fa hover sul logout (.sidebar__logout)
*/
.sidebar__link:hover .sidebar__icon,
.sidebar__link.is-active .sidebar__icon,
.sidebar__logout:hover .sidebar__icon {
  filter: brightness(0) invert(1);
}

.sidebar__text {
  font-weight: var(--font-weight-semi);
  font-size: var(--font-size-sm);
}

/* Active item (matches screenshot “pill” style) */
.sidebar__link.is-active {
  background-color: var(--color-text);
  color: #ffffff;
}

.sidebar__footer {
  margin-top: auto;
  padding-top: 14px;
}


/* Reset minimale per il bottone di logout della sidebar.
   La forma, il padding e l'hover sono gestiti dalla classe .sidebar__link */
button.sidebar__logout {
  background: transparent;
  border: none;           
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  
  width: 100%;             /* Assicura che riempia la sidebar */
  text-align: left;
}


/* =======================
   MEDIA QUERIES
   ======================= */
   
  /*MOBILE: sidebar hidden*/
  @media (max-width: 768px) {
    
  .sidebar {
    display: none;
  }

}