/* analysis/sp.php: analisi di spettri PerkinElmer (.sp) */

/* riquadro di caricamento: evidenziato mentre si trascinano i file */
.sp-zona {
  border: 2px dashed transparent;
  border-radius: .5rem;
  transition: border-color .15s, background-color .15s;
}
.sp-zona.sp-sopra {
  border-color: var(--bs-primary);
  background-color: var(--bs-primary-bg-subtle);
}
/* comandi su una riga che va a capo: campo file, bottoni, ordinata dei grafici */
.sp-comandi { display: flex; align-items: flex-end; gap: .75rem 1rem; flex-wrap: wrap; margin: .5rem 0; }
.sp-comandi label { display: block; margin-bottom: .15rem; }
.sp-comandi .sp-file { flex: 1 1 22rem; }
.sp-comandi select { min-width: 18rem; }
/* la casella sta in fondo alla riga come i bottoni: allineata al loro testo */
.sp-comandi .sp-assieme .form-check { margin-bottom: .3rem; }

/* tabella di riepilogo */
.sp-riepilogo th[scope="row"] {
  width: 34%;
  font-weight: 500;
  text-align: start;
}
.sp-riepilogo td { text-align: start; }
.sp-riepilogo td.small { width: 30%; }
.sp-riepilogo .sp-sez th {
  background-color: var(--bs-tertiary-bg);
  text-align: start;
  font-weight: 600;
}
.sp-inf { color: var(--bs-secondary-color); cursor: help; }
.sp-controlli { list-style: none; padding: 0; margin: 0; }
.sp-controlli .bi { margin-right: .25rem; }

/* medie per blocchi: l'esito si legge anche dal colore della riga */
.sp-blocchi summary { cursor: pointer; font-weight: 600; }
.sp-blocchi tr.sp-negativa td { background-color: var(--bs-danger-bg-subtle); }
.sp-blocchi tr.sp-fondo td { color: var(--bs-secondary-color); }

.sp-grafico { min-height: 460px; }
/* il grafico ha larghezza "100%" (sp.js), ma il renderer condiviso mette barra dei bottoni
   e contenitore inline-block: la percentuale si annullerebbe e la barra, larga quanto i
   suoi bottoni, non coinciderebbe col riquadro sotto. Qui diventano blocchi, larghi uguali */
.sp-grafico .cont_bott_graf,
.sp-grafico .primo_cont_graf { display: block; }

/* una scheda per file: con molti file le linguette vanno a capo, quindi compatte */
.sp-schede-file { margin-top: .5rem; }
.sp-schede-file .nav-link { padding: .3rem .65rem; font-size: .875rem; }
.sp-pannelli-file > .tab-pane { padding-top: .75rem; }

/* schede di documentazione */
.sp-doc th, .sp-doc td { text-align: start; vertical-align: top; }
.sp-doc td:first-child { white-space: nowrap; }
.sp-figura { margin: 1rem 0 1.5rem; }
.sp-svg { width: 100%; max-width: 860px; height: auto; color: var(--bs-body-color); }
/* foto: larghezza contenuta e centrate, proporzioni dagli attributi width/height dell'img;
   la didascalia allineata ai bordi della foto */
.sp-foto img { display: block; width: 100%; max-width: 720px; height: auto; margin-inline: auto; }
.sp-foto figcaption { max-width: 720px; margin: .4rem auto 0; }
/* la foto dello strumento porta un riquadro di dettaglio: più larga, perché si legga */
.sp-foto-larga img, .sp-foto-larga figcaption { max-width: 960px; }
/* schermate del software: fino alla grandezza naturale, perche' le scritte restino leggibili,
   e centrate nella pagina; la didascalia sta allineata ai bordi dell'immagine */
.sp-schermata img { display: block; width: 100%; max-width: 1024px; height: auto; margin-inline: auto;
  border: 1px solid var(--bs-border-color); }
.sp-schermata figcaption { max-width: 1024px; margin: .4rem auto 0; }
/* la tabella riquadro per riquadro ha cinque colonne di testo: sotto questa larghezza scorre */
.sp-dc { min-width: 760px; }
/* formule in display: sugli schermi stretti scorrono da sole invece di allargare la pagina
   (il margine verticale evita di tagliare indici e frazioni) */
.katex-display { overflow-x: auto; overflow-y: hidden; padding-block: .25em; }
.sp-biblio li { margin-bottom: .3rem; }
.sp-riepilogo td.small { min-width: 16rem; }