/* Barra in alto condivisa da tutte le pagine del sito: nome del sito a sinistra,
   a destra la campanella delle notifiche (solo da loggati, gestita da notifiche-menu.js)
   e l'icona del profilo (gestita da profile-menu.js). Basta aggiungere nell'header:
     <header class="site-topbar">
       <a class="site-brand" href="/">MyUMTE</a>
       <div class="site-topbar-actions">
         <div id="notifSlot"></div>
         <div id="profileSlot"></div>
       </div>
     </header>
   La campanella resta vuota (quindi invisibile) finché l'utente non è loggato con una
   zona assegnata: per questo l'icona del profilo si sposta da sola leggermente a sinistra
   non appena la campanella compare, senza bisogno di JS dedicato. */
.site-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:calc(100% - 32px);
  max-width:1080px;
  margin:14px auto 26px;
  padding:10px 10px 10px 20px;
  border-radius:999px;
  background:var(--glass-bg, var(--surface-2));
  box-shadow:
    0 1px 0 var(--glass-border, rgba(255,255,255,.5)) inset,
    0 0 0 1px var(--glass-border, var(--border)),
    0 16px 34px -16px rgba(20,14,8,.22);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  position:relative;
  z-index:50;
}
.site-topbar .site-brand{
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;
  font-weight:700;
  font-size:20px;
  letter-spacing:.4px;
  color:var(--text);
  text-decoration:none;
  white-space:nowrap;
}
.site-topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.profile-wrap{ position:relative; display:inline-flex; }
.profile-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; border:1px solid var(--glass-border);
  background:var(--glass-bg, var(--surface-2)); backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%); color:var(--text); cursor:pointer;
  transition:transform .15s ease; padding:0; flex:0 0 auto;
}
.profile-btn:hover{ transform:translateY(-1px); }
.profile-btn svg{ width:19px; height:19px; }

.profile-menu{
  display:none; position:fixed; min-width:200px; background:var(--glass-bg, var(--surface));
  border:1px solid var(--glass-border, var(--border)); border-radius:16px;
  box-shadow:0 12px 36px rgba(0,0,0,.2); z-index:9999; overflow:hidden;
  backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%);
}
.profile-menu.open{ display:block; }
.profile-menu .pm-user{
  padding:12px 16px 8px; font-size:11px; color:var(--text-dim, var(--text-muted, #6b665d)); text-transform:uppercase;
  letter-spacing:.3px; font-weight:700; border-bottom:1px solid var(--glass-border, var(--border));
  margin-bottom:2px;
}
.profile-menu .pm-item{
  display:block; width:100%; text-align:left; border:none; background:none; cursor:pointer;
  padding:11px 16px; font-size:13.5px; color:var(--text); font-family:inherit; text-decoration:none;
  box-sizing:border-box;
}
.profile-menu .pm-item:hover{ background:rgba(255,255,255,.16); }
.profile-menu .pm-item.primary{ color:var(--accent); font-weight:600; }
.profile-menu .pm-item + .pm-item{ border-top:1px solid var(--glass-border, var(--border)); }

@media (max-width:600px){
  .site-topbar{ padding:12px 14px; }
  .site-topbar .site-brand{ font-size:18px; }
  .profile-btn{ width:34px; height:34px; }
  .profile-btn svg{ width:18px; height:18px; }
}