/* Applica SOLO ai container che:
   1) hanno id che termina in -root
   2) hanno come primo figlio un <div> con inline style "position: fixed"
*/
[id$="-root"]:has(> div:first-child[style*="position: fixed"]) {
  --sidebar-open:   320px;
  --sidebar-closed: 56px;
  --content-gap:    28px;   /* NEW: piccolo spazio extra per non tagliare le scritte */
}

/* Sidebar collassata di default */
[id$="-root"] > div:first-child[style*="position: fixed"] {
  width: var(--sidebar-closed) !important;
  transition: width .25s ease, box-shadow .25s ease;
  overflow: hidden;

  /* Sidebar sopra i grafici */
  z-index: 3000;
}

/* Nascondo i contenuti interni quando chiusa */
[id$="-root"] > div:first-child[style*="position: fixed"] > * {
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease .05s;
}

/* Espansione al passaggio del mouse */
[id$="-root"] > div:first-child[style*="position: fixed"]:hover {
  width: var(--sidebar-open) !important;
}

/* Rendo interattivo il contenuto quando aperta */
[id$="-root"] > div:first-child[style*="position: fixed"]:hover > * {
  opacity: 1;
  pointer-events: auto;
  transition-delay: .15s;
}

/* Corpo: lascia spazio alla sidebar + gap extra */
[id$="-root"]:has(> div:first-child[style*="position: fixed"]) > div:nth-child(2) {
  margin-left: calc(var(--sidebar-closed) + var(--content-gap)) !important; /* NEW */
  transition: margin-left .25s ease;

  /* Corpo sotto la sidebar */
  position: relative;
  z-index: 1;
}

/* Quando la sidebar è aperta, il contenuto slitta + gap extra */
[id$="-root"] > div:first-child[style*="position: fixed"]:hover + div {
  margin-left: calc(var(--sidebar-open) + var(--content-gap)) !important; /* NEW */
}

/* Maniglia/hamburger */
[id$="-root"] > div:first-child[style*="position: fixed"]::after {
  content: "☰";
  position: absolute;
  right: 10px;
  top: 8px;
  font-size: 18px;
  line-height: 1;
  opacity: .75;
  color: #fff;
  pointer-events: none;
}

/* Overlay leggero quando aperta */
[id$="-root"] > div:first-child[style*="position: fixed"]:hover {
  box-shadow: 0 0 0 9999px rgba(0,0,0,.15);
}

/* Plotly modebar sotto la sidebar */
.js-plotly-plot .modebar {
  z-index: 1200 !important; /* < 3000 della sidebar */
}

/* Mobile: sidebar in overlay, niente spinta del contenuto */
@media (max-width: 1024px) {
  [id$="-root"] > div:first-child[style*="position: fixed"] {
    width: 0 !important;
    border-right: none !important;
  }
  [id$="-root"] > div:first-child[style*="position: fixed"]:hover {
    width: var(--sidebar-open) !important;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.35);
  }
  [id$="-root"]:has(> div:first-child[style*="position: fixed"]) > div:nth-child(2),
  [id$="-root"] > div:first-child[style*="position: fixed"]:hover + div {
    margin-left: 0 !important;
  }
}


/* --- Christmas: sidebar più stretta del Portfolio --- */
#christmas-root {
  --sidebar-open:   280px;  /* <— larghezza sidebar aperta (ridotta) */
  --sidebar-closed: 56px;   /* maniglia invariata */
  --content-gap:    50px;   /* spazio tra sidebar e contenuto */
}