/* ======== SIDEBAR HOVER — DARK (funziona con o senza .has-sidebar) ======== */

/* Variabili */
[id$="-root"].has-sidebar:has(> div:first-child[style*="position: fixed"]),
[id$="-root"]:not(.has-sidebar):has(> div:first-child[style*="position: fixed"]) {
  --sidebar-open:   320px;
  --sidebar-closed: 56px;
  --content-gap:    28px;
}

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

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

/* Espansione al passaggio del mouse */
[id$="-root"].has-sidebar > div:first-child[style*="position: fixed"]:hover,
[id$="-root"]:not(.has-sidebar) > div:first-child[style*="position: fixed"]:hover {
  width: var(--sidebar-open) !important;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.15);
}

/* Rendo interattivo il contenuto quando aperta */
[id$="-root"].has-sidebar > div:first-child[style*="position: fixed"]:hover > *,
[id$="-root"]:not(.has-sidebar) > 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-sidebar:has(> div:first-child[style*="position: fixed"]) > div:nth-child(2),
[id$="-root"]:not(.has-sidebar):has(> div:first-child[style*="position: fixed"]) > div:nth-child(2) {
  margin-left: calc(var(--sidebar-closed) + var(--content-gap)) !important;
  transition: margin-left .25s ease;
  position: relative;
  z-index: 1; /* sotto la sidebar */
}

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

/* Maniglia/hamburger */
[id$="-root"].has-sidebar > div:first-child[style*="position: fixed"]::after,
[id$="-root"]:not(.has-sidebar) > 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;
}

/* 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"].has-sidebar > div:first-child[style*="position: fixed"],
  [id$="-root"]:not(.has-sidebar) > div:first-child[style*="position: fixed"] {
    width: 0 !important;
    border-right: none !important;
  }
  [id$="-root"].has-sidebar > div:first-child[style*="position: fixed"]:hover,
  [id$="-root"]:not(.has-sidebar) > 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-sidebar:has(> div:first-child[style*="position: fixed"]) > div:nth-child(2),
  [id$="-root"]:not(.has-sidebar):has(> div:first-child[style*="position: fixed"]) > div:nth-child(2),
  [id$="-root"].has-sidebar > div:first-child[style*="position: fixed"]:hover + div,
  [id$="-root"]:not(.has-sidebar) > div:first-child[style*="position: fixed"]:hover + div {
    margin-left: 0 !important;
  }
}

/* --- Christmas: sidebar più stretta --- */
#christmas-root {
  --sidebar-open:   280px;
  --sidebar-closed: 56px;
  --content-gap:    50px;
}

/* =========================================================
   PERF PATCH — riduce reflow/repaint con molti grafici Plotly
   (solo aggiunte, non altera il comportamento visivo)
   ========================================================= */

/* 1) Il contenuto non cambia più margin-left su hover: si muove in GPU */
[id$="-root"].has-sidebar:has(> div:first-child[style*="position: fixed"]) > div:nth-child(2),
[id$="-root"]:not(.has-sidebar):has(> div:first-child[style*="position: fixed"]) > div:nth-child(2) {
  /* lascia il margine "chiuso" fisso, ma anima con transform */
  margin-left: calc(var(--sidebar-closed) + var(--content-gap)) !important;
  transform: translateX(var(--content-shift, 0));
  will-change: transform;
  transition: transform .25s ease; /* invece di rilayout col margin */
}

/* 2) Quando la sidebar è aperta, sposta il contenuto solo via transform */
[id$="-root"].has-sidebar > div:first-child[style*="position: fixed"]:hover + div,
[id$="-root"]:not(.has-sidebar) > div:first-child[style*="position: fixed"]:hover + div {
  /* delta = open - closed */
  --content-shift: calc(var(--sidebar-open) - var(--sidebar-closed));
  transform: translateX(var(--content-shift));
}

/* 3) Overlay full-screen leggero al posto del box-shadow gigante */
[id$="-root"].has-sidebar > div:first-child[style*="position: fixed"],
[id$="-root"]:not(.has-sidebar) > div:first-child[style*="position: fixed"] {
  position: fixed; /* esplicito per lo pseudo-elemento */
}

/* rimuovi l’effetto box-shadow in hover (causa repaint enorme) */
[id$="-root"].has-sidebar > div:first-child[style*="position: fixed"]:hover,
[id$="-root"]:not(.has-sidebar) > div:first-child[style*="position: fixed"]:hover {
  box-shadow: none !important;
}

/* overlay leggero; non blocca i click */
[id$="-root"].has-sidebar > div:first-child[style*="position: fixed"]:hover::before,
[id$="-root"]:not(.has-sidebar) > div:first-child[style*="position: fixed"]:hover::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.15);
  pointer-events: none;
  z-index: 2500; /* sotto la sidebar (3000) ma sopra i grafici */
}

/* 4) Mobile: overlay un po’ più scuro, niente cambi funzionali */
@media (max-width: 1024px) {
  [id$="-root"].has-sidebar > div:first-child[style*="position: fixed"]:hover::before,
  [id$="-root"]:not(.has-sidebar) > div:first-child[style*="position: fixed"]:hover::before {
    background: rgba(0,0,0,.35);
  }
}