/* public/css/layouts/navbar.css
   Le 151 righe della barra in alto. Stavano in un <style> nel layout, quindi
   viaggiavano dentro all'HTML di ogni pagina del sito. */

/* === VARIABLES === */
  :root {
    --nav-glass-bg: color-mix(in srgb, var(--theme-secondary, #1e3a5a) 65%, #0e1a2b);
    --glass-white: rgba(255, 255, 255, 0.15);
    --glass-hover: rgba(255, 255, 255, 0.25);
  }

  /* === NAVBAR STRUCTURE (GLASS EFFECT) === */
  .navbar-azure {
    /* Colore: Theme Settings o formula “glass” legacy (--nav-glass-bg) */
    background: var(--theme-navbar-bg, var(--nav-glass-bg));
    
    /* EFFETTO VETRO: Blur + Saturazione */
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    
    /* Bordi per simulare lo spessore e il riflesso del vetro */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Ombra colorata per profondità */
    box-shadow: 0 8px 32px 0 rgba(0, 40, 150, 0.25);
    
    padding-top: 0.6rem; padding-bottom: 0.6rem;
    height: 64px;
    transition: background 0.3s ease;
    color: var(--theme-navbar-text, rgba(255, 255, 255, 0.92));
  }

  /* Navbar chiara: niente alone blu, hover leggibile */
  html[data-theme="light"] .navbar-azure {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    border-top: 1px solid transparent;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
  }
  html[data-theme="light"] .nav-link-glass:hover {
    background: transparent;
    color: var(--theme-navbar-text, #0f172a);
    text-shadow: none;
  }
  html[data-theme="light"] .nav-link-glass.is-active {
    color: var(--theme-primary, var(--theme-primary, #e61a0a));
    box-shadow: none;
    text-shadow: none;
  }
  html[data-theme="light"] .brand-text {
    text-shadow: none;
  }

  html[data-theme="light"] .navbar-azure .btn-auth-glass {
    background: var(--theme-primary, var(--theme-primary, #e61a0a));
    color: #fff;
    border: 1px solid transparent;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--theme-primary, var(--theme-primary, #e61a0a)) 28%, transparent);
  }
  html[data-theme="light"] .navbar-azure .btn-auth-glass:hover,
  html[data-theme="light"] .navbar-azure .btn-auth-glass:focus {
    background: color-mix(in srgb, var(--theme-primary, var(--theme-primary, #e61a0a)) 88%, #000);
    color: #fff;
    border-color: transparent;
  }

  /* === BRAND === */
  .brand-text {
    font-weight: 900; font-size: 1.5rem; letter-spacing: -0.03em;
    color: var(--theme-navbar-text, #fff); text-shadow: 0 2px 10px rgba(0,0,0,0.1);
    line-height: 1;
  }

  /* === AVATAR (utente loggato): bordo sempre visibile; primary su hover / focus / menu aperto === */
  .navbar-azure a.btn-user-glass .avatar-circle {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    aspect-ratio: 1;
    background: var(--theme-primary, var(--theme-primary, #e61a0a));
    border: 1.5px solid color-mix(in srgb, var(--theme-primary, var(--theme-primary, #e61a0a)) 72%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary, var(--theme-primary, #e61a0a)) 8%, transparent);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 0.9rem;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  }
  .navbar-azure a.btn-user-glass:hover .avatar-circle,
  .navbar-azure a.btn-user-glass:focus .avatar-circle,
  .navbar-azure a.btn-user-glass:focus-visible .avatar-circle,
  .navbar-azure .dropdown.show > a.btn-user-glass .avatar-circle {
    background: var(--theme-primary, var(--theme-primary, #e61a0a));
    border-color: var(--theme-primary, var(--theme-primary, #e61a0a));
    color: #ffffff;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--theme-primary, var(--theme-primary, #e61a0a)) 28%, transparent);
  }

  /* === NAV LINKS (Desktop) === */
  .nav-link-glass {
    color: color-mix(in srgb, var(--theme-navbar-text, #ffffff) 90%, transparent);
    padding: 0.5rem 1rem;
    border-radius: 50rem; text-decoration: none; font-weight: 400; font-size: 0.95rem;
    transition: all 0.2s;
  }
  .nav-link-glass:hover { 
    background: rgba(255,255,255,0.15); 
    color: var(--theme-navbar-text, #fff); 
    text-shadow: 0 0 10px rgba(255,255,255,0.4);
  }
  .nav-link-glass.is-active { 
    background: rgba(255,255,255,0.25); 
    color: var(--theme-navbar-text, #fff); 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }

  .navbar-azure .text-white {
    color: var(--theme-navbar-text, #fff) !important;
  }

  /* === NOTIFICATION DOT === */
  .notif-dot {
    position: absolute; top: 10px; right: 10px;
    width: 8px; height: 8px; background: var(--theme-primary, var(--theme-primary, #e61a0a));
    border-radius: 50%; border: 2px solid rgba(255,255,255,0.8);
    box-shadow: 0 0 5px rgba(255, 71, 87, 0.5);
  }

  /* === DROPDOWN (Glass Effect) === */
  .glass-dropdown {
    background: rgba(255, 255, 255, 0.95); /* Quasi solido per leggibilità */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 1rem;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15); 
    border: 1px solid rgba(255,255,255,0.5);
    animation: slideDown 0.2s ease-out;
  }
  .icon-square { width: 36px; height: 36px; display: grid; place-items: center; flex-shrink: 0; }
  
  @keyframes slideDown { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

  /* Mobile Adjustment */
  @media (max-width: 959.98px) {
    .container-fluid { padding-left: 1rem; padding-right: 1rem; }
  }

  /* L'aggiustamento di prima — `#notifDropdown + .dropdown-menu` con
       `left: auto; right: 1rem` — e' stato tolto: serviva quando il pannello
       era una tendina stretta appesa alla campanella. Adesso sotto i 992px e'
       a tutto schermo (`spedireweb-pro.css`, §117), e quella regola, scritta
       con un id, vinceva sulla posizione lasciando il pannello spostato di
       14px a sinistra. Se serve di nuovo, va scritto li', non qui.  */