/* ============================================================
   NEURIAM — MENU V2 · la barra laterale
   Nato il 23 ago 2026 come estratto di produzione. Rimesso dentro
   il sistema il 13/9/2026 (Ruben: «sistema anche il css del menu»)
   SENZA cambiare come appare: i colori e le misure qui dentro sono
   scelte tue — il «grigio B», il logo blu elettrico, la fascia da
   76 px — e questa passata non le tocca. Cambia da dove vengono.

   ★ PERCHÉ ESISTE ANCORA UN FOGLIO A PARTE.
   Sta fuori dal pacchetto, e quindi si carica prima e vince sulle
   utility di Tailwind: è per questo che qui dentro c'è `!important`
   quasi ovunque. Spostarlo dentro il pacchetto vorrebbe dire
   riscrivere la cascata di un elemento che sta su OGNI pagina, e
   non è il momento. Quello che si poteva fare senza rischio è
   farlo parlare la lingua del sistema: i colori ora sono token.

   ★ I VALORI DI RIPIEGO NON SONO UN DOPPIONE.
   Ogni `var()` ha accanto il colore di prima: se il foglio dei token
   non fosse ancora arrivato, la barra si dipinge comunque — com'è
   sempre stato. Senza ripiego, per un istante sarebbe trasparente su
   ogni caricamento.

   ★ LA NAVIGAZIONE È SEMPRE SCURA, ED È VOLUTO.
   Non è una dimenticanza sui temi: è la firma V2. Il tema CHIARO ha
   una barra scura apposta. Il tema COLORATO non ha una regola qui —
   e non è un buco: lo veste il tema stesso, e viene viola scuro
   (misurato: rgb(39,28,82)). Lasciarlo al tema è la scelta giusta,
   perché lì il viola è il colore di casa.
   ============================================================ */

/* ---------------- LA BARRA ---------------- */
html[data-theme=light] aside{
  background: var(--nrm-nav-fondo, #2b303c) !important;   /* grigio B scelto da Ruben */
  border-right: 1px solid var(--nrm-nav-bordo, #3a4150) !important;
}
html[data-theme=dark] aside{
  background: var(--nrm-nav-fondo, #14161d) !important;
  border-right: 1px solid var(--nrm-nav-bordo, #222633) !important;
}

/* Testi e icone: quasi bianchi, bianchi pieni su hover/attivo */
aside{ color: var(--nrm-nav-tx, #dde1ea); }
aside a{ color: var(--nrm-nav-tx, #dde1ea) !important; }
aside a:hover{
  color:#ffffff !important;
  background: linear-gradient(90deg,
    var(--nrm-nav-hover-1, rgba(34,184,221,.32)),
    var(--nrm-nav-hover-2, rgba(72,217,255,.06))) !important;
  border-radius:10px;
}
aside b, aside strong, aside h1, aside h2, aside h3{ color:#ffffff; }
aside .text-gray-400, aside .text-gray-500, aside small{
  color: var(--nrm-nav-tx-2, #aab2c2) !important;
}

/* Icone di navigazione piu' grandi */
aside a svg{
  width:24px !important; height:24px !important;
  flex-shrink:0; opacity:.95;
}

/* Logo + allineamento — Rev.10 (misure lette dal bundle).
   UNA variabile comanda ENTRAMBE le testate: quella della pagina
   (header px-5 py-4) e quella della sidebar. Le righe combaciano
   per costruzione. --logo-h regola solo la taglia del logo.

   ★ ATTENZIONE, per chi passa di qui: il selettore della testata di
   pagina e' agganciato alle classi `px-5 py-4 border-b`. Se un domani
   qualcuno cambia quelle classi in una pagina, la sua testata smette
   di allinearsi con la barra e non c'e' nessun errore da nessuna
   parte: si vede e basta. E' il prezzo di far combaciare due cose
   disegnate da due parti diverse. */
:root{ --nv2-band:76px; }
aside{ --logo-h:66px; }

header.px-5.py-4.border-b{
  height:var(--nv2-band) !important;
  min-height:var(--nv2-band) !important;
  padding-top:0 !important; padding-bottom:0 !important;
  display:flex !important; align-items:center !important;
  box-sizing:border-box;
}
header.px-5.py-4.border-b > div{ flex:1; }

/* Testata sidebar: stessa altezza, logo dipinto e centrato */
aside > :first-child{
  height:var(--nv2-band) !important;
  min-height:var(--nv2-band) !important;
  max-height:var(--nv2-band) !important;
  margin:0 !important; padding:0 !important;
  border-bottom:1px solid var(--nrm-nav-bordo, #3a4150) !important;
  box-sizing:border-box; overflow:hidden;
  background-image:url("/neuriam-logo-blu-elettrico.png") !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:auto var(--logo-h) !important;
}
aside > :first-child *{ display:none !important; }

/* ---------------- LA VOCE ATTIVA ----------------
   ★ UN SELETTORE SOLO, e i due vecchi tolti dopo averli MISURATI
   (13/9). Prima ce n'erano quattro:
     · `aside a.active`            — non ha mai agganciato niente:
       React Router non mette quella classe. Zero elementi su tre
       pagine diverse.
     · `aside a[class*="violet"]`  — funzionava, ma per un motivo
       fragile: pescava qualunque voce con «violet» dentro il nome di
       una classe. Un giorno qualcuno usa un viola per altro e si
       ritrova una voce che sembra selezionata.
     · `aside a[class*="bg-[#4A2FD0]"]` — quell'esadecimale non esiste
       piu' da nessuna parte: e' stato sostituito dal token di marca
       mesi fa. Zero elementi.
     · `aside a[aria-current="page"]` — questo. Lo mette React Router
       da solo, ed e' esattamente uno per pagina.
   Provato su /alerts, /users e /sedi: `aria-current` trova sempre una
   voce e sempre quella giusta. Gli altri tre erano rumore o rischio. */
aside a[aria-current="page"]{
  color:#ffffff !important;
  background: linear-gradient(90deg,
    var(--nrm-nav-attiva-1, rgba(91,61,245,.45)),
    var(--nrm-nav-attiva-2, rgba(72,140,255,.10))) !important;
  box-shadow: inset 3px 0 0 var(--nrm-nav-lunetta, #8b72ff) !important;
  border-radius:10px !important;
}
/* e resta viola anche sotto il mouse */
aside a[aria-current="page"]:hover{
  background: linear-gradient(90deg,
    var(--nrm-nav-attiva-1, rgba(91,61,245,.45)),
    var(--nrm-nav-attiva-2, rgba(72,140,255,.10))) !important;
}
aside a[aria-current="page"] svg{ opacity:1; }