/* ===========================
     Variabili Colori
  =========================== */
  :root {
    --color-primary: #3b82f6;
    --color-primary-light: #eff6ff;
    --color-primary-dark: #2563eb;
    --color-success: #10b981;
    --color-danger: #ef4444;
    --color-text: #1f2937;
    --color-text-light: #6b7280;
    --color-border: #e5e7eb;
    --color-background: #ffffff;
    --color-background-hover: #f9fafb;
    --sidebar-width: 280px; /* Larghezza sidebar su mobile */
  }

  /* ===========================
     NAVBAR
  =========================== */

  .navbar {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: var(--color-background);
    border-bottom: 1px solid var(--color-border);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    justify-content: space-around;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  /* Logo */
  .navbar-logo {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .navbar-logo svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--color-primary);
  }

  /* Menu orizzontale (solo desktop) */
  .navbar-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .navbar-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    color: var(--color-text-light);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9375rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
  }

  .navbar-link:hover {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
  }

  .navbar-link.active {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: 600;
  }

  /* Bottone Hamburger (mostrato solo su mobile) */
  .navbar-hamburger {
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 1.25rem;
    cursor: pointer;
    display: none; /* nascosto su desktop */
  }

  /* Avatar utente (desktop) */
  .navbar-user {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
  }

  .avatar-image {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
  }

  /* Contenitore testo utente (nome + email) */
  .navbar-user-info {
    display: flex;
    flex-direction: column; /* Nome e email su due righe */
    line-height: 1.2;
  }

  .navbar-user-info .user-name {
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.875rem;
  }

  .navbar-user-info .user-email {
    font-size: 0.75rem;
    color: var(--color-text-light);
  }

  .navbar-user-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    min-width: 180px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0;
    display: none; /* hidden default */
    z-index: 9999;
  }

  .navbar-user-dropdown a {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: var(--color-text);
    font-size: 0.875rem;
  }

  .navbar-user-dropdown a:hover {
    background-color: var(--color-background-hover);
  }

  .text-danger {
    color: var(--color-danger);
  }

  /* OFF-CANVAS SIDEBAR (per mobile) */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background-color: var(--color-background);
    border-right: 1px solid var(--color-border);
    transform: translateX(-100%); /* inizialmente nascosta */
    transition: transform 0.3s ease;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  }
  .sidebar.open {
    transform: translateX(0);
  }

  /* Chiudi sidebar */
  .sidebar-close {
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 1.25rem;
    margin-left: auto;
    margin-bottom: 1rem;
    cursor: pointer;
  }

  .sidebar a {
    text-decoration: none;
    color: var(--color-text);
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9375rem;
  }
  .sidebar a:hover {
    color: var(--color-primary);
  }

  .sidebar-user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 1rem;
  }
  .sidebar-user-info img {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
  }
  .sidebar-user-text {
    display: flex;
    flex-direction: column;
  }
  .sidebar-user-text .name {
    font-weight: 600;
    color: var(--color-text);
  }
  .sidebar-user-text .email {
    font-size: 0.875rem;
    color: var(--color-text-light);
  }

  /* Auth (non loggato) dentro la sidebar */
  .sidebar-auth {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  .sidebar-auth a {
    display: block;
    text-align: center;
    padding: 0.5rem 0;
    border-radius: 0.5rem;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
  }
  .sidebar-auth a.login {
    color: var(--color-primary);
    background-color: var(--color-primary-light);
  }
  .sidebar-auth a.login:hover {
    background-color: var(--color-primary);
    color: #fff;
  }
  .sidebar-auth a.register {
    background-color: var(--color-primary);
    color: #fff;
  }
  .sidebar-auth a.register:hover {
    background-color: var(--color-primary-dark);
  }

  /* MEDIA QUERIES */
  @media (max-width: 992px) {
    /* Nascondo il menu orizzontale su tablet/mobile */
    .navbar-menu {
      display: none;
    }
    /* Mostro l’hamburger */
    .navbar-hamburger {
      display: block;
    }
  }