/* ============================================================
   NEURIAM — GRAFICA V2 · rev.2 (mirata sulle variabili reali)
   L'app usa token CSS su html[data-theme=light|dark].
   Questo file li ridefinisce coi valori della proposta V2:
   LIGHT = "Porcelain"  ·  DARK = "Broadcast Stage"
   Caricato DOPO il bundle -> stessa specificita', vince l'ultimo.
   ============================================================ */

/* ---------------- LIGHT = PORCELAIN ---------------- */
:root, html[data-theme=light]{
  color-scheme:light;
  --bg-void:    #eef0f4;   /* fondo piu' esterno */
  --bg-base:    #f3f4f7;   /* canvas mockup */
  --bg-surface: #ffffff;   /* card */
  --bg-raised:  #fbfbfc;   /* paper mockup */
  --bg-overlay: #f7f8fa;
  --bg-control: #edeef3;
  --ink:        #11131a;
  --ink-bright: #000000;
  --ink-muted:  #737988;

  /* Viola = segnale e controllo (brand mockup #5B3DF5) */
  --violet-50:  #4526d6;   /* testo viola leggibile su chiaro */
  --violet-300: #4526d6;
  --violet-500: #5b3df5;
  --violet-900: #eeeafd;   /* fondo pallido pillole */

  /* Semantici riletti sulla palette V2 */
  --teal-text:  #0d7f9c;
  --teal-bright:#22b8dd;
  --teal-base:  #22b8dd;
  --teal-900:   #dcf3f9;
  --teal-900b:  #e8f7fb;
  --amber-text: #b27511;
  --amber-base: #f0a229;
  --amber-900:  #fdf0d6;
  --amber-900b: #fdf4dd;
  --coral-text: #d74250;
  --coral-base: #f15b66;
  --coral-900:  #fee6e4;
  --danger-text:#c93a44;
  --danger-base:#f15b66;
  --danger-900: #fbdfe1;

  --scrollbar-track:#eceef2;
  --scrollbar-thumb:#cfd3dc;
  --scrollbar-thumb-hover:#b3b8c4;
  --input-bg:#ffffff;
  --input-border:rgba(17,19,26,.12);
}

/* ---------------- DARK = BROADCAST STAGE ---------------- */
html[data-theme=dark]{
  color-scheme:dark;
  --bg-void:    #090b10;
  --bg-base:    #0f1118;   /* obs mockup */
  --bg-surface: #171a23;   /* obs2 */
  --bg-raised:  #1c2029;
  --bg-overlay: #131620;
  --bg-control: #202431;   /* obs3 */
  --ink:        #e8eaf2;
  --ink-bright: #ffffff;
  --ink-muted:  #8f96a8;

  --violet-50:  #a794ff;
  --violet-300: #8b72ff;   /* vio2 mockup: testo viola su scuro */
  --violet-500: #5b3df5;
  --violet-900: #2a2350;

  --teal-text:  #48d9ff;   /* cyan mockup */
  --teal-bright:#48d9ff;
  --teal-base:  #2fb9de;
  --teal-900:   #10333f;
  --teal-900b:  #0e2a34;
  --amber-text: #f2b559;
  --amber-base: #f0a229;
  --amber-900:  #3a2d12;
  --amber-900b: #33280f;
  --coral-text: #ff8a7a;
  --coral-base: #f15b66;
  --coral-900:  #3d1a1c;
  --danger-text:#ff7d84;
  --danger-base:#f15b66;
  --danger-900: #3a171c;

  --scrollbar-track:#131620;
  --scrollbar-thumb:#2a2f3d;
  --scrollbar-thumb-hover:#3a4152;
  --input-bg:#131620;
  --input-border:rgba(255,255,255,.10);
}

/* ---------------- TIPOGRAFIA ---------------- */
html, body{
  font-family:Inter, ui-sans-serif, system-ui, -apple-system,
              "Segoe UI", Arial, sans-serif !important;
}
h1{ letter-spacing:-.025em; }

/* ---------------- SIDEBAR ----------------
   Firma V2: navigazione sempre scura.
   Rev.3 (richieste Ruben): grigio piu' chiaro e OPACO (tinta
   unita, niente gradiente), icone piu' grandi, testi/icone
   piu' bianchi, logo bianco, lunetta viola + sfumatura sulla
   voce attiva (ripresa dalla rev.1). */
html[data-theme=light] aside{
  background:#2b303c !important;              /* grigio B scelto da Ruben */
  border-right:1px solid #3a4150 !important;
}
html[data-theme=dark] aside{
  background:#14161d !important;
  border-right:1px solid #222633 !important;
}
/* Testi e icone: quasi bianchi, bianchi pieni su hover/attivo */
aside{ color:#dde1ea; }
aside a{ color:#dde1ea !important; }
aside a:hover{
  color:#ffffff !important;
  background:linear-gradient(90deg,rgba(34,184,221,.32),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:#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. */
:root{ --nv2-band:76px; }
aside{ --logo-h:66px; }

/* Testata pagina: altezza fissata, contenuto centrato in verticale */
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 #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; }

/* Logo blu elettrico anche fuori dalla sidebar (login compreso):
   swap dell'immagine + targa grigio-menu dietro, cosi' l'alone
   respira anche su sfondi chiari. Il watermark piccolo (h-4)
   sulle card resta quello che e'. */
img[src*="neuriam-logo" i]:not([class*="h-4"]){
  content:url("/neuriam-logo-blu-elettrico.png");
  background:#2b303c !important;
  border-radius:16px;
  padding:10px 22px;
  box-sizing:content-box;
}
/* La voce attiva resta viola anche sotto il mouse */
aside a.active:hover, aside a[aria-current="page"]:hover{
  background:linear-gradient(90deg,rgba(91,61,245,.45),rgba(72,140,255,.10)) !important;
}

/* Voce attiva: lunetta a sinistra + sfumatura blu-viola */
aside a.active, aside a[aria-current="page"],
aside a[class*="violet"], aside a[class*="bg-\[\#4A2FD0\]"]{
  color:#ffffff !important;
  background:linear-gradient(90deg,rgba(91,61,245,.45),rgba(72,140,255,.10)) !important;
  box-shadow:inset 3px 0 0 #8b72ff !important;
  border-radius:10px !important;
}
aside a.active svg, aside a[aria-current="page"] svg{ opacity:1; }

/* ---------------- BADGE AMBIENTE ---------------- */
body::after{
  content:"STAGING · GRAFICA V2";
  position:fixed; right:14px; bottom:14px; z-index:99999;
  font:800 9px/1 Inter,sans-serif; letter-spacing:.14em;
  color:#fff; padding:8px 12px; border-radius:999px;
  background:linear-gradient(135deg,#694cff,#4a28e8);
  box-shadow:0 8px 20px rgba(91,61,245,.35);
  pointer-events:none;
}