@import url("inter.css");

/*
#############################################
##### PAGINE DA TELEFONO (QR MACCHINA) ######
############################################ */

/* usato da macchina.php (js/scriptQM.js) e da Tecnico.php. Stessa linea dello scadenziario
   (css/styleSC.css): fondo #242424, pannelli #222 / #2b2b2b / #333, arancio #f96d00 con testo nero,
   rosso #f44336, giallo #fbd204, verde #2ec27e. Tutte le classi iniziano con qm- */

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: "Inter", sans-serif;
}

/* pagina ---------------------------------------------------------------- */
.qm-page {
  max-width: 520px;
  margin: 0 auto;
  padding: 12px 12px 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#qmContenuto {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* pannello, come .sc-card ------------------------------------------------ */
.qm-card {
  background: var(--pannello);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 14px;
}

.qm-card h4 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--arancio-testo);
}

.qm-card h4.qm-stacco {
  margin-top: 16px;
}

/* sottotitolo dentro una scheda: gruppi di modelli */
.qm-card h4.qm-sotto {
  color: var(--testo-3);
}

.qm-card p {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--testo-2);
  line-height: 1.45;
}

.qm-card p.qm-dopo {
  margin: 12px 0 0;
}

/* intestazione macchina, come .sc-head ----------------------------------- */
.qm-head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.qm-head img {
  width: 34px;
  flex-shrink: 0;
}

.qm-title {
  min-width: 0;
  flex: 1;
}

.qm-az-name {
  font-size: 12px;
  color: var(--testo-3);
  text-transform: uppercase;
}

.qm-title h2 {
  margin: 2px 0 0;
  font-weight: 700;
  font-size: 1.3rem;
  text-transform: uppercase;
}

.qm-codice {
  font-size: 13px;
  color: var(--arancio-testo);
}

/* selettore a segmenti, come .sc-seg -------------------------------------- */
.qm-seg {
  display: flex;
  background: var(--blocco);
  border-radius: 8px;
  padding: 3px;
}

.qm-seg button {
  flex: 1;
  background: none;
  border: none;
  color: var(--testo-2);
  padding: 10px 8px;
  border-radius: 5px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.qm-seg button.on {
  background: #f96d00;
  color: black;
}

/* i passi non si cliccano */
.qm-seg.qm-passi span {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--testo-3);
}

.qm-seg.qm-passi span.on {
  background: #f96d00;
  color: black;
}

.qm-seg.qm-passi span.fatto {
  color: var(--verde-testo);
}

/* bottoni, come .sc-btn-primary e .sc-btn-ghost ---------------------------- */
.qm-btn {
  border: none;
  border-radius: 5px;
  background: #f96d00;
  color: black;
  padding: 8px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.qm-btn:hover {
  background: #f58d3d;
}

.qm-btn:disabled {
  background: var(--rilievo);
  color: var(--testo-3);
  cursor: default;
}

.qm-btn-ghost {
  border: 1px solid var(--linea-forte);
  border-radius: 5px;
  background: none;
  color: var(--testo);
  padding: 8px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.qm-btn-ghost:hover {
  background: var(--blocco);
}

/* sul telefono i bottoni principali sono a tutta larghezza */
.qm-grande {
  width: 100%;
  padding: 13px 14px;
}

.qm-azioni {
  display: flex;
  gap: 8px;
}

.qm-azioni button,
.qm-azioni a {
  flex: 1;
  padding: 13px 14px;
}

/* campi, come .sc-form / .sc-field ------------------------------------------ */
.qm-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.qm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.qm-field.full {
  grid-column: span 2;
}

.qm-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--arancio-testo);
  letter-spacing: 0.5px;
}

.qm-field input,
.qm-field select,
.qm-field textarea {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--linea);
  background: var(--blocco);
  color: var(--testo);
  font: inherit;
  font-size: 14px;
  line-height: 18px;
  color-scheme: dark;
}

.qm-field textarea {
  resize: vertical;
  min-height: 80px;
}

.qm-field input:focus,
.qm-field select:focus,
.qm-field textarea:focus {
  outline: none;
  border-color: #f96d00;
}

.qm-field input:disabled {
  opacity: 0.85;
}

/* menu a tutta larghezza alto quanto i bottoni: si tocca bene con i guanti */
.qm-field select {
  min-height: 44px;
}

.qm-field.qm-sopra {
  margin-bottom: 12px;
}

/* note colorate, come .sc-note ----------------------------------------------- */
.qm-note {
  font-size: 12.5px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--velo);
  color: var(--testo-2);
  line-height: 1.45;
}

.qm-note.warn {
  background: #fbd2041a;
  color: var(--giallo-tenue-testo);
}

.qm-note.late {
  background: #f443361a;
  color: #ffb1b1;
}

.qm-note.ok {
  background: #2ec27e1a;
  color: #9be4c1;
}

/* i due riquadri, come .sc-kpi ------------------------------------------------ */
.qm-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.qm-kpi {
  background: var(--pannello);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 12px 10px;
}

.qm-kpi b {
  display: block;
  font-size: 22px;
  line-height: 1.1;
}

.qm-kpi small {
  font-size: 12px;
  color: var(--testo-3);
}

.qm-kpi.late b {
  color: var(--rosso-testo);
}

.qm-kpi.warn b {
  color: var(--giallo-testo);
}

/* righe con la data, come .sc-row dell'agenda ---------------------------------- */
.qm-row {
  display: grid;
  grid-template-columns: 56px 4px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  background: var(--blocco);
  border: 1px solid var(--linea-forte);
  margin-bottom: 6px;
  cursor: pointer;
}

.qm-row:last-child {
  margin-bottom: 0;
}

.qm-row:hover {
  background: var(--rilievo);
}

.qm-row-date {
  text-align: center;
  line-height: 1.1;
}

.qm-row-date b {
  display: block;
  font-size: 20px;
}

.qm-row-date small {
  font-size: 12px;
  color: var(--testo-3);
  text-transform: uppercase;
}

.qm-row-bar {
  width: 4px;
  height: 36px;
  border-radius: 4px;
  background: #9aa0a6;
}

.qm-row-main {
  min-width: 0;
}

/* sul telefono il titolo va a capo invece di essere tagliato */
.qm-row-main b {
  display: block;
  font-size: 14px;
  line-height: 1.25;
}

.qm-row-main small {
  display: block;
  color: var(--testo-3);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* riepilogo prima della chiusura: stessa riga senza data, non si clicca */
.qm-row.qm-riepilogo {
  grid-template-columns: 4px minmax(0, 1fr) auto;
  cursor: default;
}

.qm-row.qm-riepilogo:hover {
  background: var(--blocco);
}

/* allegati: stessa riga, al posto della data il tipo di file */
.qm-row.qm-file {
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.qm-ext {
  text-align: center;
  background: var(--pannello);
  border: 1px solid var(--linea);
  color: var(--arancio-testo);
  border-radius: 8px;
  padding: 8px 0;
  font-size: 12px;
  font-weight: 700;
}

.qm-pill {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
}

.qm-pill.late {
  background: #f4433626;
  color: #f44336;
}

.qm-pill.warn {
  background: #fbd20426;
  color: var(--giallo-testo);
}

.qm-pill.ok {
  background: #2ec27e26;
  color: #2ec27e;
}

.qm-pill.next {
  background: var(--velo-forte);
  color: var(--testo-2);
}

/* chi e' entrato ------------------------------------------------------------- */
.qm-utente {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 2px;
}

.qm-utente div {
  flex: 1;
  min-width: 0;
}

.qm-utente b {
  display: block;
  font-size: 14px;
}

.qm-utente small {
  color: var(--testo-3);
  font-size: 12px;
}

/* uscita dall'account: in fondo, lontana dai comandi del report */
.qm-uscita {
  display: flex;
  justify-content: center;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--linea);
}

.qm-uscita .qm-btn-ghost {
  color: var(--testo-3);
  font-size: 13px;
}

/* verbale DPI ---------------------------------------------------------------- */
.qm-check {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--blocco);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 6px;
  font-size: 14px;
  cursor: pointer;
}

.qm-check input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: #f96d00;
}

.qm-codice + .qm-posto {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--testo-2);
}

.qm-posto a {
  color: var(--testo);
  text-underline-offset: 2px;
}

/* la dichiarazione dei DPI si deve vedere: va spuntata per forza */
.qm-check.qm-dichiaro {
  border: 2px solid #f96d00;
  background: #f96d001a;
  line-height: 1.4;
  margin: 14px 0;
  padding: 14px 12px;
  font-size: 15px;
}

.qm-check.qm-dichiaro b {
  display: block;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--arancio-testo);
  margin-bottom: 2px;
}

.qm-check.qm-dichiaro.fatto {
  border-color: #2ec27e;
  background: #2ec27e1a;
}

/* righe dell'albero delle macchine: icona del tipo al posto dell'estensione */
.qm-tipo {
  display: grid;
  place-items: center;
  height: 36px;
  border-radius: 8px;
  background: var(--pannello);
  border: 1px solid var(--linea);
}

.qm-row.qm-solo {
  cursor: default;
}

.qm-row.qm-solo:hover {
  background: var(--blocco);
}

a.qm-row {
  color: inherit;
  text-decoration: none;
}

/* voci della checklist --------------------------------------------------------- */
.qm-voce {
  background: var(--blocco);
  border: 1px solid var(--linea-forte);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 6px;
}

.qm-voce:last-child {
  margin-bottom: 0;
}

.qm-voce b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.qm-esiti {
  display: flex;
  background: var(--pannello);
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 3px;
}

.qm-esiti button {
  flex: 1;
  background: none;
  border: none;
  color: var(--testo-2);
  padding: 10px 4px;
  border-radius: 5px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.qm-esiti button.ok.on {
  background: #2ec27e;
  color: black;
}

.qm-esiti button.ko.on {
  background: #f44336;
  color: white;
}

.qm-esiti button.na.on {
  background: #9aa0a6;
  color: black;
}

/* nota sul NON OK e voci di tipo testo o numero */
.qm-voce textarea,
.qm-voce input {
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--linea);
  background: var(--pannello);
  color: var(--testo);
  font: inherit;
  font-size: 14px;
  min-height: 64px;
  resize: vertical;
}

.qm-voce input {
  min-height: 0;
  line-height: 18px;
}

/* campi data e ora: Chrome e Safari su iPhone danno loro una larghezza minima propria (il selettore) che allarga
   la colonna, e su iPhone un'altezza diversa. Cosi' restano larghi e alti come i campi di testo */
.qm-field input[type="date"],
.qm-field input[type="time"],
.qm-voce input[type="date"],
.qm-voce input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  min-height: 40px;
}

.qm-field input::-webkit-date-and-time-value,
.qm-voce input::-webkit-date-and-time-value {
  text-align: left;
}

/* subito sotto il titolo della voce lo stacco c'e' gia' */
.qm-voce b + textarea,
.qm-voce b + input {
  margin-top: 0;
}

.qm-voce textarea:focus,
.qm-voce input:focus {
  outline: none;
  border-color: #f96d00;
}

/* voci del modello: descrizione, scelte, elenchi, firma -------------------------- */
.qm-desc {
  display: block;
  font-size: 12px;
  color: var(--testo-3);
  line-height: 1.35;
  margin: -4px 0 8px;
}

.qm-note.qm-sopra {
  margin-bottom: 8px;
}

/* scelta tra opzioni corte: bottoni affiancati, come le categorie dello scadenziario */
.qm-opzioni {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.qm-opzioni button {
  border: 1px solid var(--linea-forte);
  border-radius: 5px;
  background: none;
  color: var(--testo);
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.qm-opzioni button.on {
  background: #f96d00;
  border-color: #f96d00;
  color: black;
}

/* scelta tra opzioni lunghe: dentro una voce le righe di spunta sono piu' scure */
.qm-voce .qm-check {
  background: var(--pannello);
  font-size: 13px;
  line-height: 1.35;
}

.qm-voce .qm-check input {
  width: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
}

/* una riga di un elenco (ricambi, anomalie): i campi uno sotto l'altro */
.qm-riga {
  border-bottom: 1px solid var(--linea-forte);
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.qm-riga input {
  margin: 0 0 6px;
}

.qm-voce .qm-grande {
  margin-top: 0;
}

/* firma: riquadro bianco su cui si scrive con il dito (touch-action: il dito non deve far scorrere la pagina) */
.qm-firma,
.qm-firma-fatta {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 1;
  background: white;
  border-radius: 8px;
  margin-bottom: 8px;
}

.qm-firma {
  touch-action: none;
  cursor: crosshair;
}

/* foto dell'intervento: miniature quadrate con la x per toglierle ------------------- */
.qm-foto {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

.qm-foto div {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--blocco);
}

.qm-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.qm-foto button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 5px;
  background: var(--pannello);
  color: var(--testo);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

/* il bottone e' una label che contiene il campo file nascosto */
.qm-carica {
  display: block;
  box-sizing: border-box;
  text-align: center;
  margin-bottom: 8px;
}

/* anteprima del foglio che diventa PDF ------------------------------------------ */
/* unica superficie chiara: nero su bianco, secondario #555, righe #ddd, arancio solo nei titoli delle sezioni.
   Gli stati usano tinte scure dei colori del sito, leggibili sulla carta */
.qm-foglio {
  background: white;
  color: black;
  border-radius: 8px;
  padding: 20px 18px;
  font-size: 13px;
  line-height: 1.35;
}

.qm-foglio .qm-piccolo {
  font-size: 12px;
  color: #555;
  font-weight: 400;
}

.qm-f-testa {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ddd;
}

.qm-f-ditta {
  margin-bottom: 2px;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
}

.qm-f-numero {
  text-align: right;
  white-space: nowrap;
}


.qm-f-titolo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 14px 0 8px;
}

.qm-foglio h1 {
  margin: 0 0 2px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* etichetta di stato: testo scuro su fondo dello stesso colore al 15% */
.qm-f-stato {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.qm-f-stato.grande {
  padding: 5px 10px;
  font-size: 13px;
}

.qm-f-stato.ok {
  color: #1b7a4c;
  background: #2ec27e26;
}

.qm-f-stato.ko {
  color: #c62828;
  background: #f4433626;
}

.qm-f-stato.warn {
  color: #7a5c00;
  background: #fbd20433;
}

.qm-f-stato.na {
  color: #555;
  background: #9aa0a626;
}

/* motivo dell'esito e conteggio dei controlli: testo semplice sotto il titolo */
.qm-f-motivo,
.qm-f-conti {
  margin: 0 0 6px;
}

.qm-f-conti {
  margin-bottom: 14px;
  color: #555;
}

.qm-f-spento {
  color: #555;
}

.qm-f-ok {
  color: #1b7a4c;
}

/* dati della macchina e dell'intervento: etichetta piccola sopra, valore sotto */
.qm-f-dati {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin-bottom: 12px;
}

.qm-f-dati small,
.qm-f-note small {
  display: block;
  font-size: 12px;
  color: #555;
}

.qm-f-dati b {
  font-weight: 600;
  word-break: break-word;
}

.qm-f-note {
  background: #f4f4f4;
  border-radius: 5px;
  padding: 8px 10px;
  margin-bottom: 4px;
  white-space: pre-line;
}

.qm-foglio h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 4px;
  padding-bottom: 5px;
  border-bottom: 2px solid #f96d00;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.qm-foglio h2 img {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.qm-foglio h2 span {
  color: #f96d00;
}

.qm-foglio table {
  width: 100%;
  border-collapse: collapse;
}

.qm-foglio td {
  padding: 7px 4px;
  border-bottom: 1px solid #ddd;
  vertical-align: top;
}

/* il testo delle righe in colonna con i titoli e con i dati sopra */
.qm-foglio td:first-child {
  padding-left: 0;
}

.qm-foglio td:last-child {
  padding-right: 0;
}

.qm-f-nota-sezione {
  margin: 2px 0 2px;
}

.qm-foglio td:last-child {
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}

/* nel pdf una sezione (titolo + tabella), una riga e una foto non si spezzano tra due pagine */
.qm-sezione,
.qm-foglio tr,
.qm-foto-foglio img {
  page-break-inside: avoid;
}

.qm-foglio .qm-valore {
  font-weight: 700;
  margin-top: 2px;
}

.qm-foglio td[colspan] {
  text-align: left;
  font-weight: 400;
  white-space: normal;
}

.qm-foglio .qm-elenco {
  margin-top: 6px;
  font-size: 12px;
}

.qm-foglio .qm-elenco th {
  text-align: left;
  font-weight: 600;
  color: #555;
  padding: 4px;
  border-bottom: 1px solid #ddd;
}

.qm-foglio .qm-elenco th:first-child {
  padding-left: 0;
}

.qm-foglio .qm-elenco td,
.qm-foglio .qm-elenco td:last-child {
  text-align: left;
  font-weight: 400;
  white-space: normal;
}

.qm-foglio .qm-elenco tr:last-child td {
  border-bottom: none;
}

.qm-firma-foglio {
  height: 60px;
  display: block;
  margin-left: auto;
  border-bottom: 1px solid #555;
}

.qm-foglio .qm-nota-voce {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 700;
}

/* avvertenza in fondo al foglio: piccola, e' un testo legale (unica eccezione ai 12px, solo sulla carta) */
.qm-foglio .qm-nota-finale {
  margin-top: 18px;
  font-size: 10px;
  line-height: 1.4;
}

.qm-foto-foglio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 6px;
  margin-top: 6px;
}

/* niente ritaglio (object-fit): html2canvas non lo disegna e nel PDF la foto uscirebbe deformata */
.qm-foto-foglio img {
  width: 100%;
  display: block;
}

@media (max-width: 420px) {
  .qm-foto-foglio {
    grid-template-columns: 1fr 1fr;
  }
}

.qm-piede {
  text-align: center;
  font-size: 12px;
  color: var(--testo-3);
  margin-top: 8px;
}

.qm-piede a {
  color: var(--testo-2);
}

/* messaggio in basso, come .sc-toast ----------------------------------------------- */
.qm-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: #111;
  border: 1px solid #363636;
  color: white;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: 0.25s;
  max-width: 90%;
  box-sizing: border-box;
  text-align: center;
}

.qm-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}


/* righe e bottoni che sono dei link ------------------------------------------- */
a.qm-row,
a.qm-btn-ghost {
  color: var(--testo);
  text-decoration: none;
}

a.qm-btn-ghost {
  display: block;
  box-sizing: border-box;
  text-align: center;
}

/* riga con il solo testo (elenco aziende in Tecnico.php) */
.qm-row.qm-sola {
  display: block;
  cursor: default;
  font-size: 14px;
}

.qm-row.qm-sola:hover {
  background: var(--blocco);
}

.qm-check input[type="radio"] {
  border-radius: 50%;
}