/* ======== 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;
}

/* 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;
}

/* 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;
}

/* 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
   ========================================================= */

[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;
  transform: translateX(var(--content-shift, 0));
  will-change: transform;
  transition: transform .25s ease;
}

[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 {
  --content-shift: calc(var(--sidebar-open) - var(--sidebar-closed));
  transform: translateX(var(--content-shift));
}

[id$="-root"].has-sidebar > div:first-child[style*="position: fixed"],
[id$="-root"]:not(.has-sidebar) > div:first-child[style*="position: fixed"] {
  position: fixed;
}

[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;
}

[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;
}

@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);
  }
}

/* =========================================================
   DROPDOWN — sfondo scuro + testo visibile (globale)
   ========================================================= */

.Select-menu-outer,
div.Select-menu-outer {
  background-color: #1e1e1e !important;
  border: 1px solid #444 !important;
}

.Select-menu,
div.Select-menu {
  background-color: #1e1e1e !important;
}

.Select-option,
div.Select-option,
.VirtualizedSelectOption {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
}

.Select-option.is-focused,
div.Select-option.is-focused,
.Select-option:hover,
div.Select-option:hover {
  background-color: #333333 !important;
  color: #ffffff !important;
}

.Select-option.is-selected,
div.Select-option.is-selected {
  background-color: #11d6d6 !important;
  color: #000000 !important;
  font-weight: 800 !important;
}

.Select.is-open .Select-menu-outer,
.Select.is-open .Select-menu {
  background-color: #1e1e1e !important;
}

.Select.is-open .Select-option {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
}

.Select-control {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
}

.Select-value-label,
.Select-placeholder,
.Select-input > input {
  color: #ffffff !important;
}

/* Nuove classi react-select */
.react-select__control,
.react-select__menu,
.react-select__menu-list {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
}

.react-select__single-value,
.react-select__placeholder,
.react-select__input-container,
.react-select__option {
  color: #ffffff !important;
}

.react-select__option--is-focused {
  background-color: #333333 !important;
  color: #ffffff !important;
}

.react-select__option--is-selected {
  background-color: #11d6d6 !important;
  color: #000000 !important;
  font-weight: 800 !important;
}

/* =========================================================
   DROPDOWN RADIX (Dash moderno) — solo #theme-root.dark
   Classi: dash-dropdown-content, dash-dropdown-search,
           dash-dropdown-options, dash-options-list
   ========================================================= */

/* Il dropdown Radix è fuori da #theme-root nel DOM (è in un portal),
   quindi usiamo :has() sul html per capire se siamo in dark */
html:has(#theme-root.dark) .dash-dropdown-content {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
  border: 1px solid #444 !important;
}

html:has(#theme-root.dark) .dash-dropdown-search {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
  border-bottom: 1px solid #444 !important;
}

html:has(#theme-root.dark) .dash-dropdown-search input,
html:has(#theme-root.dark) .dash-dropdown-search input::placeholder {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
}

html:has(#theme-root.dark) .dash-dropdown-options,
html:has(#theme-root.dark) .dash-options-list {
  background-color: #1e1e1e !important;
}

html:has(#theme-root.dark) .dash-options-list [role="option"],
html:has(#theme-root.dark) .dash-dropdown-options [role="option"] {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
}

html:has(#theme-root.dark) .dash-options-list [role="option"]:hover,
html:has(#theme-root.dark) .dash-options-list [role="option"][data-highlighted],
html:has(#theme-root.dark) .dash-options-list [role="option"][aria-selected="true"],
html:has(#theme-root.dark) .dash-dropdown-options [role="option"]:hover,
html:has(#theme-root.dark) .dash-dropdown-options [role="option"][data-highlighted] {
  background-color: #333333 !important;
  color: #ffffff !important;
}

html:has(#theme-root.dark) .dash-options-list [aria-selected="true"] {
  background-color: #11d6d6 !important;
  color: #000000 !important;
  font-weight: 800 !important;
}

/* =========================================================
   INPUT (dcc.Input) — testo visibile in dark + rimuovi spinner
   ========================================================= */

.dark input,
.dark textarea,
.dark .dash-input {
  background-color: #ffffff !important;
  color: #0b1727 !important;
  border: 1px solid rgba(0,0,0,0.25) !important;
  border-radius: 6px !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: rgba(11, 23, 39, 0.55) !important;
}

.dark input:focus,
.dark textarea:focus,
.dark .dash-input:focus {
  outline: none !important;
  border-color: rgba(17,214,214,0.75) !important;
  box-shadow: 0 0 0 2px rgba(17,214,214,0.20) !important;
}

.dark input[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

.dark input[type="number"]::-webkit-outer-spin-button,
.dark input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* =========================================================
   RADIO e CHECKBOX — solo #theme-root.dark
   Colora accent + testo tramite classi Dash specifiche
   senza usare "label" generico che rompe i dropdown
   ========================================================= */

#theme-root.dark input[type="radio"],
#theme-root.dark input[type="checkbox"] {
  accent-color: #11d6d6 !important;
}

/* Testo label accanto a radio/checkbox: classi specifiche Dash */
#theme-root.dark .dash-radioitems label,
#theme-root.dark .dash-checklist label,
#theme-root.dark .dash-options-list label,
#theme-root.dark .dash-options-list-option,
#theme-root.dark .dash-options-list-option-text,
#theme-root.dark .form-check-label {
  color: #ffffff !important;
}

/* =========================================================
   SLIDER (dcc.Slider) — solo #theme-root.dark
   ========================================================= */

#theme-root.dark .dash-slider-track {
  background-color: rgba(255,255,255,0.2) !important;
}

#theme-root.dark .dash-slider-range {
  background-color: #11d6d6 !important;
}

#theme-root.dark .dash-slider-thumb {
  background-color: #11d6d6 !important;
  border-color: #11d6d6 !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

#theme-root.dark .dash-slider-mark {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* =========================================================
   OVERRIDE: input manuale "ticker esatto"
   ========================================================= */

.dark #manual-ticker-input,
#theme-root.light #manual-ticker-input {
  background-color: grey !important;
  color: #ffffff !important;
  border: 1px solid #555 !important;
  display: inline-block !important;
  width: auto !important;
}

.dark #manual-ticker-input::placeholder,
#theme-root.light #manual-ticker-input::placeholder {
  color: rgba(255,255,255,0.75) !important;
}

#manual-ticker-input {
  background-color: grey !important;
  color: #ffffff !important;
  border: 1px solid #555 !important;
  display: inline-block !important;
  width: auto !important;
}
#manual-ticker-input::placeholder {
  color: rgba(255,255,255,0.75) !important;
}

#theme-root:not(.light) #manual-ticker-input {
  background-color: grey !important;
  color: #ffffff !important;
  border: 1px solid #555 !important;
  display: inline-block !important;
  width: 220px !important;
  max-width: 220px !important;
  box-shadow: none !important;
}
#theme-root:not(.light) #manual-ticker-input::placeholder {
  color: rgba(255,255,255,0.75) !important;
}

/* FIX: contenitore bianco attorno al manual input */
#theme-root:not(.light) div:has(> #manual-ticker-input) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}