/**
 * Il configuratore — il minimo che la pagina aggiunge al livello
 * applicativo.
 *
 * Solo token --sw-* (spazi, testo, linee, superfici) e le classi del kit
 * (`nlg-card`, `nlg-field`, `nlg-input`, `nlg-btn`): nessun colore e
 * nessuna misura letterale, cosi' il kit si cambia dal pannello e la
 * pagina si riveste da sola, come il resto del sito. Niente media query:
 * le soglie sarebbero numeri scritti qui, e le righe che si stringono
 * vanno a capo da sole (flex-wrap) o scorrono nel proprio riquadro.
 *
 * Si carica solo su questa pagina (`@push('head')` della vista): il
 * resto del sito non paga regole che non usa.
 */

/* ═══════════════════════ Impianto ═══════════════════════ */

.sw-configuratore__configurazione,
.sw-configuratore__richiesta {
  display: grid;
  gap: var(--sw-s5);
  margin-top: var(--sw-s6);
}

.sw-configuratore__riepilogo { margin-top: var(--sw-s6); }

.sw-configuratore__riepilogo,
.sw-configuratore__richiesta { padding: var(--sw-s6); }

/* Un fieldset porta bordo, margini e una larghezza minima propri del
   browser: con la scheda del kit sopra si vedrebbero due cornici, e la
   tabella non potrebbe restringersi sotto la sua larghezza naturale. */
.sw-configuratore__blocco {
  display: grid;
  gap: var(--sw-s4);
  min-width: 0;
  margin: 0;
  padding: var(--sw-s6);
  border: 0;
}

.sw-configuratore__scelta {
  display: grid;
  gap: var(--sw-s2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sw-configuratore__titolo {
  margin: 0 0 var(--sw-s3);
  padding: 0;
  color: var(--sw-text-1);
  font: var(--sw-t-h3)/var(--sw-t-h3-lh) var(--sw-font-display);
}

.sw-configuratore__nota {
  display: block;
  margin: 0;
  color: var(--sw-text-2);
  font: var(--sw-t-bs)/var(--sw-t-bs-lh) var(--sw-font-ui);
}

.sw-configuratore__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sw-s3);
}

/* L'avviso del [DECISO Q100] e del Core muto: non e' un errore — la
   richiesta parte lo stesso — e non si colora come un errore. */
.sw-configuratore__avviso {
  background: var(--sw-warn-tint);
  color: var(--sw-text-1);
}

/* ═══════════════════════ Righe ═══════════════════════ */

/* La tabella scorre nel suo riquadro, non la pagina: a larghezza di
   telefono sei colonne non ci stanno, e lo scorrimento orizzontale della
   pagina e' vietato. */
.sw-configuratore__scorri { overflow-x: auto; }

.sw-configuratore__righe {
  width: 100%;
  border-collapse: collapse;
  font: var(--sw-t-bs)/var(--sw-t-bs-lh) var(--sw-font-ui);
}

.sw-configuratore__righe th,
.sw-configuratore__righe td {
  padding: var(--sw-s3) var(--sw-s2);
  border-bottom: thin solid var(--sw-line);
  text-align: left;
  vertical-align: top;
}

.sw-configuratore__righe thead th {
  color: var(--sw-text-3);
  font: var(--sw-t-cap)/var(--sw-t-cap-lh) var(--sw-font-ui);
  border-bottom-color: var(--sw-line-strong);
}

.sw-configuratore__didascalia {
  caption-side: bottom;
  padding-top: var(--sw-s3);
  color: var(--sw-text-3);
  text-align: left;
}

/* Il correlato obbligatorio si distingue dalle scelte: e' una riga che
   non si tocca, e deve dirlo prima ancora di leggerla. */
.sw-configuratore__riga.is-obbligatoria { background: var(--sw-surface-2); }

.sw-configuratore__codice {
  display: block;
  color: var(--sw-text-3);
  font: var(--sw-t-mono)/var(--sw-t-mono-lh) var(--sw-font-mono);
}

.sw-configuratore__nome,
.sw-configuratore__prezzo {
  display: block;
  color: var(--sw-text-1);
  font-weight: bolder;
}

.sw-configuratore__prezzo,
.sw-configuratore__barrato { white-space: nowrap; }

.sw-configuratore__barrato {
  display: block;
  color: var(--sw-text-3);
}

.sw-configuratore__vuoto { color: var(--sw-text-3); }

.sw-configuratore__campo-quantita { max-width: calc(var(--sw-s8) * 2); }

/* ═══════════════════════ Aggiunte ═══════════════════════ */

.sw-configuratore__aggiungi {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sw-s3);
}

.sw-configuratore__aggiungi > .nlg-field:first-child { flex: 1 1 calc(var(--sw-s9) * 3); }

.sw-configuratore__suggerimenti {
  display: grid;
  gap: var(--sw-s3);
}

.sw-configuratore__elenco {
  display: grid;
  gap: var(--sw-s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sw-configuratore__suggerimento {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sw-s3);
}

/* ═══════════════════════ Riepilogo ═══════════════════════ */

.sw-configuratore__conti {
  display: grid;
  gap: var(--sw-s2);
  margin: 0;
}

.sw-configuratore__conti > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sw-s4);
  padding-bottom: var(--sw-s2);
  border-bottom: thin solid var(--sw-line);
}

.sw-configuratore__conti dt { color: var(--sw-text-2); }

.sw-configuratore__conti dd {
  margin: 0;
  color: var(--sw-text-1);
  font-weight: bolder;
}

.sw-configuratore__totale dt,
.sw-configuratore__totale dd {
  color: var(--sw-text-1);
  font: var(--sw-t-h3)/var(--sw-t-h3-lh) var(--sw-font-display);
}

.sw-configuratore__riepilogo .sw-configuratore__nota { margin-top: var(--sw-s4); }