body {
  margin: 0
}

/* contenitore di pagina: classe DEDICATA (non 'wrap' generico) per non collidere
   con css/common/form.css che stila 'div.wrap' come riga di form flex/nowrap
   (la collisione faceva collassare la larghezza del grafico all'apertura/chiusura
   degli accordion laterali). */
.func3d-wrap {
  max-width: 1400px;
  margin: 12px auto;
  padding: 0 12px
}

#chart {
  height: 760px;
  border: 1px solid #cdd0d5;
  background: #fff;
  position: relative;
  /* Contesto di stacking isolato: gli overlay interni (colorbar z-1000, titolo
     z-1002, tooltip...) mantengono la loro gerarchia SOLO dentro il grafico e
     non coprono più il menu a tendina della navbar (z-index Bootstrap 1000). */
  z-index: 0;
}

.accordion-button:focus {
  box-shadow: none
}

/* Pannello impostazioni (accordion laterale, colonna stretta): le etichette
   lunghe devono andare a capo dentro la loro colonna invece di traboccare e
   sovrapporsi a quella accanto; range e fieldset a piena larghezza. */
#accSettings .form-label {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
  margin-bottom: .25rem
}

#accSettings .form-range {
  width: 100%
}

#accSettings fieldset legend {
  margin-bottom: 0
}

/* ============================================================================
   DE-POLLUTION di css/common/form.css
   Quel foglio (stili dei vecchi form del sito) applica regole GLOBALI molto
   aggressive che rovinano questa pagina, basata su Bootstrap:
     - label { float:left; margin:auto .5rem auto 0 }  -> le etichette floattano,
       si accavallano e mandano a capo il testo, rubando spazio ai controlli;
     - input[type=number] { height:1rem; text-align:center } -> tutti i number
       schiacciati a 16px (il selettore d'attributo batte .form-control);
     - input[type=checkbox] { margin:... auto }.
   Le neutralizzo SOLO dentro .func3d-wrap, ripristinando i default Bootstrap. */
.func3d-wrap label {
  float: none;
  margin: 0 0 .25rem 0
}

.func3d-wrap .form-check-label {
  margin-bottom: 0
}

.func3d-wrap input[type="number"] {
  height: auto;
  text-align: left
}

/* i .btn in Bootstrap 5 non hanno white-space:nowrap: senza, "Usa z del click"
   e simili vanno a capo su piu' righe nella colonna stretta. */
.func3d-wrap .btn {
  white-space: nowrap
}

/* color-swatch: altezza coerente col form-control-sm, cosi' lo swatch non appare
   "diviso a meta'" (padding uniforme sopra/sotto la zona colore). */
.func3d-wrap input[type="color"].form-control-color {
  padding: 2px;
  height: calc(1.5em + .5rem + 2px);
  min-height: 0
}
.func3d-wrap input[type="color"].form-control-color.form-control-sm {
  height: calc(1.5em + .25rem + 2px)
}

.series-card {
  border: 1px solid #d8dbe0;
  border-radius: .5rem;
  padding: 10px;
  background: var(--bs-body-bg);
  margin-bottom: 8px
}

.gui-footer {
  margin-top: 10px;
  text-align: center
}

.axis-group {
  border: 1px dashed #d9dee4;
  padding: 8px;
  border-radius: 6px;
  margin-bottom: 8px
}

.fmt-group {
  border: 1px dashed #e6e9ef;
  padding: 8px;
  border-radius: 6px;
  margin-top: 6px
}

.form-text.small {
  font-size: .8rem
}

/* Colorbar tweaks */
.jqplot-3d-cb-multi {
  background: #fff;
  border: 1px solid #d0d4da;
  border-radius: 6px;
}

.jqplot-3d-cb-multi canvas {
  border: none !important;
}

.jqplot-3d-title {
  z-index: 1002;
}

.eye {
  opacity: .85;
  transition: opacity .15s ease;
}

.eye.off {
  opacity: .35;
}

/* Colormap designer */
.cm-preview-title, .cm-list-title { 
  font-weight: 600; 
  font-size: .9rem; 
  color: #334; 
}

.cm-preview-bar {
  width: 100%;
  height: 24px;
  border: 1px solid #ccd2da;
  border-radius: 4px;
  background: linear-gradient(90deg, #FF0000, #00FF00, #0000FF);
}

.title {
  font-weight: 600;
  font-size: .85rem;
  margin-bottom: 6px;
}
.cm-stops-grid {
  display: grid;
  gap: 8px;
}


.cm-stop-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cm-stop-row .cm-stop-pos {
    width: 100px;
}

.cm-stop-row button.cm-stop-del {
    flex: 0 0 auto;
    margin: 0;
    padding: 2px 6px;
}

.cm-chip{
  display:inline-block;
  /* abbastanza largo da LEGGERE il gradiente, non solo da segnalarlo */
  width:56px;
  height:14px;
  border:1px solid #999;
  border-radius:2px;
  vertical-align:middle;
  margin-right:6px;
  box-sizing:border-box;
}

.cm-chip-bar {
  width: 100%;
  height: 16px;
  border-radius: 4px;
  border: 1px solid #cfd5dd;
  background: #fff;
}

.cm-chip-bar.gradient {
  background: linear-gradient(90deg, #000000, #ffffff);
}

/* --- Colormap designer: ogni stop su 2 righe, slider = 120px --- */
.cm-stop {
  display: grid;

  /* 4 colonne: handle | contenuti | spazio | colonna destra (colore/elimina) */
  grid-template-columns: auto 1fr auto auto;

  /* Riga 1: handle | posizione | . | color (destra)
     Riga 2: handle | opacità  | . | del   (destra) */
  grid-template-areas:
    "handle pos    .      color"
    "handle alpha  .      del";

  gap: 6px;
  align-items: center;

  /* slider uguali, dimensione controlli destri */
  --cm-slider-w: 120px;      /* larghezza slider richiesta */
  --cm-control-size: 2.6rem; /* misura unificata color-picker e bottone */

  /* padding + bordo sopra/sotto */
  padding: 8px 10px;
  border-top: 1px solid #e6e9ef;
  border-bottom: 1px solid #e6e9ef;

  background: var(--bs-body-bg, #fff);

  will-change: transform;
}

/* Aree griglia */
.cm-stop .pos   { grid-area: pos;   display:flex; gap:6px; align-items:center; }
.cm-stop .alpha { grid-area: alpha; display:flex; gap:6px; align-items:center; }
.cm-stop .color { grid-area: color; justify-self: end; }
.cm-stop .del   { grid-area: del;   justify-self: end; align-self: center; }

/* Maniglia: colonna dedicata, centro verticale su 2 righe */
.cm-stop .cm-stop-handle {
  grid-area: handle;
  align-self: center;          /* <<< centrata verticalmente */
  width: 1.25rem;
  min-width: 1.25rem;
  height: var(--cm-control-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8a8fa3;
  cursor: grab;
  user-select: none;
  border-radius: 4px;
}
.cm-stop .cm-stop-handle:hover  { background: #f2f3f7; color: #6b7280; }
.cm-stop .cm-stop-handle:active { cursor: grabbing; }

/* Slider compatti e stessa larghezza */
.cm-stop .form-range { margin: 0; }
.cm-stop .pos   .form-range,
.cm-stop .alpha .form-range {
  flex: 0 0 var(--cm-slider-w);
  min-width: var(--cm-slider-w);
}
.cm-stop .val { width: 5rem; }

/* Stessa dimensione per color-picker e bottone elimina */
.cm-stop .cm-stop-col {
  width:  var(--cm-control-size);
  height: var(--cm-control-size);
  padding: 0;
}
.cm-stop .cm-stop-del {
  width:  var(--cm-control-size);
  /* stessa ALTEZZA effettiva del color-picker (la regola generale
     .form-control-color.form-control-sm vince su --cm-control-size) */
  height: calc(1.5em + .25rem + 2px);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Feedback durante il drag */
.cm-stop.drag-over {
  background: #f6f8fc;
  outline: 2px dashed #c7d2fe;
  outline-offset: 2px;
}

@media (max-width: 420px) {
  .cm-stop { grid-template-columns: auto 1fr auto auto; --cm-slider-w: 100px; }
}

.cb-tick-label {
    font-size: 11px;
    line-height: 11px;
}
/* Sezione/profilo 2D sotto il grafico 3D */
.f3d-section {
  margin-top: .5rem;
  border: 1px solid #d9dee3;
  border-radius: .375rem;
  background: #fff;
  padding: .25rem;
}
.f3d-section canvas {
  display: block;
  width: 100%;
  height: 230px;
}

/* ── Gruppi richiudibili delle Impostazioni generali (schede Scena/Legenda) ──
   <details class="f3d-group">: nativi (niente id, niente JS), stessa soluzione
   della versione storica. Il marker di default sparisce: il riquadro stesso
   dice che il gruppo si apre. */
details.f3d-group {
  border: 1px solid #7fa8cc;
  border-radius: .4rem;
  padding: .4rem .75rem .5rem;
  margin-top: .5rem;
  background-color: #eef4fa;
}
details.f3d-group[open] {
  padding-bottom: .65rem;
}
details.f3d-group > summary {
  display: flex;
  align-items: center;
  gap: .3rem;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-size: .8125rem;
  font-weight: 600;
  color: #2c5f8a;
}
details.f3d-group[open] > summary {
  margin-bottom: .4rem;
}
details.f3d-group > summary::-webkit-details-marker,
details.f3d-group > summary::marker {
  display: none;
}

/* ── Editor delle classi (modo colore "classi") ──
   Griglia a due righe per classe: colore | da | a | elimina, e sotto l'etichetta a
   tutta larghezza. Nella colonna stretta la vecchia tabella mostrava dei campi
   numerici larghi un carattere: illeggibili. */
.f3d-classe {
  display: grid;
  grid-template-columns: 2.4rem 1fr 1fr 1.8rem;
  gap: .25rem .3rem;
  align-items: center;
  margin-bottom: .45rem;
}
.f3d-classe .cat-label {
  grid-column: 1 / -1;
}
.f3d-classe-testa {
  margin-bottom: .1rem;
  font-size: .72rem;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
}
.f3d-classe .cat-del {
  padding: .1rem .3rem;
  line-height: 1;
}

/* ── Bottoni di "Serie dati" in griglia 2x2 ──
   Nella colonna stretta le scritte lunghe devono poter andare a capo (il nowrap
   generale dei .btn qui farebbe traboccare il testo dal bottone). */
.func3d-wrap .f3d-btn-serie {
  white-space: normal;
  line-height: 1.2;
}

/* radio di selezione della serie, accanto all'occhio nell'intestazione */
#accSeriesList .serie-radio {
  flex: 0 0 auto;
  cursor: pointer;
  /* grande quanto l'occhio accanto: il default di .form-check-input dentro
     il flex dell'intestazione lo gonfiava */
  height: 1rem;
  margin: 0;
  width: 1rem;
}

/* Velo "Calcolo in corso" sopra la vista 3D: compare solo quando il
   campionamento stimato supera la soglia (app.js, buildPlot). */
#veloCalcolo {
  align-items: center;
  background: rgba(255, 255, 255, 0.65);
  display: none;
  flex-direction: column;
  gap: .5rem;
  inset: 0;
  justify-content: center;
  position: absolute;
  z-index: 20;
}
#veloCalcolo .velo-testo {
  color: #333;
  font-size: .9rem;
}

/* Parametri del designer funzioni: griglia a colonne allineate (nome,
   etichetta, min, max, passo, valore, elimina) con riga di intestazioni. */
.fn-param-grid {
  align-items: center;
  display: grid;
  gap: .25rem;
  grid-template-columns: 1.1fr 1.5fr .7fr .7fr .7fr .8fr 2rem;
  /* larghezza esplicita: dentro la modale la griglia finiva stretta e a destra */
  margin-left: 0;
  width: 100%;
}
.fn-param-testata > div {
  padding-left: .25rem;
}