/* Le griglie delle singole schermate del mattone 1. */

/* --- accesso -------------------------------------------------------- */
.accesso {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s5);
}
.accesso .colonna { width: 100%; max-width: 400px; }
.accesso .intestazione {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-bottom: var(--s6);
  text-align: center;
}
.accesso .intestazione h1 {
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -0.025em;
}
.accesso .card { padding: var(--s6) var(--s5) var(--s5); }
.accesso .piede {
  margin-top: var(--s4);
  display: flex;
  justify-content: center;
  gap: var(--s4);
}
.regole-password {
  list-style: none;
  margin: 0 0 var(--s4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.regole-password li {
  font-size: 12px;
  color: var(--testo-3);
  display: flex;
  gap: var(--s2);
}
.regole-password li::before { content: "\00B7"; color: var(--testo-4); }
.regole-password li.soddisfatta { color: var(--testo-2); }
.regole-password li.soddisfatta::before {
  content: "\2713"; color: var(--verde);
}

/* --- scelta azienda ------------------------------------------------- */
.aziende {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s4);
}
.aziende { gap: var(--s5); }
.azienda {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  cursor: pointer;
  text-align: left;
  padding: var(--s5);
  min-height: 148px;
  justify-content: space-between;
  transition: border-color 140ms ease, transform 140ms ease;
}
.azienda .nome { font-size: 26px; font-weight: 300; }
.azienda:hover {
  border-color: var(--bordo-forte);
  transform: translateY(-1px);
}
.azienda .riga-alta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
}
.azienda .nome { font-size: 20px; letter-spacing: -0.01em; }
.azienda .piede {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

.titolo-sezione {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  margin-bottom: var(--s5);
}

/* --- cruscotto ------------------------------------------------------ */
/* spaziatura generosa fra le sezioni: il nero vuoto e' parte del
   disegno, non spazio da riempire */
.cruscotto {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
}

.testata-report {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  align-items: center;
}
.testata-report .pod { gap: var(--s2); }

.riga-titolo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s4);
}

/* fascia del verdetto */
.verdetto { padding: var(--s5); }
.verdetto-testa {
  display: flex;
  align-items: center;
  gap: var(--s4);
}
.verdetto-parola {
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.02em;
  text-transform: capitalize;
  line-height: 1.05;
}
.verdetto-regole {
  margin-left: auto;
  max-width: 340px;
  text-align: right;
  font-size: 12px;
  line-height: 1.35;
}
.verdetto-motivi {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-top: var(--s3);
}

.verdetto .pallino { width: 12px; height: 12px; }

/* KPI a mosaico: una dominante grande, le altre piccole, e la nota
   del controller a fianco. Misure diverse, non una griglia di uguali. */
.mosaico { display: flex; flex-direction: column; gap: var(--s4); }
.mosaico-alto {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr);
  gap: var(--s4);
  align-items: stretch;
}
.mosaico-alto:only-child { grid-template-columns: minmax(0, 1fr); }
.mosaico-striscia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s4);
}
.mosaico-striscia .kpi { padding: var(--s4); gap: var(--s2); }

.kpi {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4) var(--s5) var(--s4);
}
.kpi-dominante {
  justify-content: space-between;
  padding: var(--s5) var(--s5) var(--s4);
}
.kpi-dominante .kpi-piede { margin-top: var(--s3); }
.kpi-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 22px;
}
.kpi-piede { display: flex; gap: var(--s2); flex-wrap: wrap; }
.kpi-piede .pod { gap: 6px; }
.kpi-esercizi {
  display: flex;
  align-items: flex-end;
  gap: var(--s3);
  margin-top: auto;
}
.kpi-esercizi .grafico { width: 60px; }

/* andamento e composizione */
.andamento-mensile { padding-bottom: var(--s3); }
.nota-soglia { margin-top: var(--s2); }

.due-colonne {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
}

.tabella-composizione td { padding: var(--s2) var(--s3) var(--s2) 0; }
.colonna-area { width: 40%; }
.colonna-barra { width: 30%; }
.colonna-spark { width: 15%; }
.colonna-spark .grafico { height: 26px; }
.colonna-barra .grafico { height: 14px; }

.elenco-anomalie {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.elenco-anomalie li {
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.elenco-anomalie .tenue { flex: 1; }

/* nota del controller: l'unico vetro della schermata */
.nota-controller { display: flex; flex-direction: column; gap: var(--s3); }
.nota-controller p { max-width: 78ch; }
.nota-piede { display: flex; gap: var(--s4); }

@media (max-width: 1100px) {
  .due-colonne { grid-template-columns: minmax(0, 1fr); }
}

/* --- conto economico navigabile ------------------------------------- */
.ce { display: flex; flex-direction: column; gap: var(--s5); }

.riga-briciole {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}
.briciole { display: flex; align-items: center; flex-wrap: wrap; }
.briciola { display: inline-flex; align-items: center; }
.briciola .separatore {
  color: var(--testo-4);
  margin: 0 var(--s3);
}
.collegamento-briciola {
  background: none;
  border: 0;
  padding: 0;
  color: var(--testo-2);
  cursor: pointer;
  font-size: 13px;
}
.collegamento-briciola:hover { color: var(--testo); }
.briciola-corrente { color: var(--testo); font-size: 13px; }

/* testata di livello: il numero grande comanda la schermata */
.testata-livello {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s6);
  padding: var(--s2) var(--s2) var(--s4);
}
.testata-testo { display: flex; flex-direction: column; gap: var(--s2); }
.testata-testo h1 {
  font-size: 34px;
  font-weight: 300;
  letter-spacing: -0.02em;
}
.testata-numeri {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s2);
}
.testata-pod { display: flex; align-items: center; gap: var(--s3); }

/* blocco macro */
.blocco-macro { padding: var(--s4) var(--s5) var(--s3); }
.riga-macro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--riga);
  margin-bottom: var(--s2);
}
.riga-macro h2 {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--testo);
}
.macro-numeri {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
}

/* la tabella del CE */
.tabella-ce { table-layout: auto; }
.tabella-ce th { padding-bottom: var(--s3); }
.tabella-ce td {
  padding: var(--s3) var(--s3) var(--s3) 0;
  vertical-align: middle;
}
.tabella-ce .col-voce { width: 34%; padding-right: var(--s5); }
.tabella-ce .col-tot { width: 13%; }
.tabella-ce .col-pct { width: 7%; }
.tabella-ce .col-chk { width: 5%; }
.tabella-ce .col-spark { width: 11%; }
.tabella-ce .col-spark .grafico { height: 24px; }

.voce-nome { line-height: 1.3; }
.riga-dettaglio .voce-nome { color: var(--testo-2); }

.riga-apribile { cursor: pointer; transition: background 120ms ease; }
.riga-apribile:hover { background: var(--bianco-tenue); }
.riga-apribile .voce-nome { position: relative; padding-right: 18px; }
.riga-apribile:hover .voce-nome::after {
  content: "\2197";
  position: absolute;
  right: 0;
  top: -1px;
  color: var(--ambra);
  font-size: 12px;
}

.quadra { color: var(--testo-4); }

/* provenienza: si accende solo quando ci passi sopra */
.con-provenienza { cursor: pointer; }
.con-provenienza:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--testo-4);
}
.con-provenienza[data-aperto] { color: var(--ambra); }

.provenienza {
  position: fixed;
  z-index: 40;
  min-width: 260px;
  background: var(--vetro);
  border: 1px solid var(--vetro-bordo);
  border-radius: var(--r-vetro);
  box-shadow: var(--vetro-ombra);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.provenienza-riga { display: flex; gap: var(--s2); flex-wrap: wrap; }
.provenienza-riga .pod { gap: 6px; }
.provenienza-file { display: flex; flex-direction: column; gap: 3px; }
.provenienza-file div:last-child {
  font-size: 12px;
  color: var(--testo-2);
  word-break: break-all;
}

/* --- anomalie -------------------------------------------------------- */
.anomalie-pagina { display: flex; flex-direction: column; gap: var(--s4); }
.blocco-anomalia { padding: var(--s4) var(--s5); }
.titolo-anomalia h2 { font-size: 16px; font-weight: 400; line-height: 1.35; }
.stato-anomalia { flex: 0 0 auto; }
.stato-anomalia .pod { gap: 6px; }
.nota-controllo { font-size: 13px; }

.tabella-anomalie td { padding: var(--s2) var(--s3) var(--s2) 0; }
.tabella-anomalie .col-conto { width: 18%; }
.tabella-anomalie .col-descrizione { width: 32%; color: var(--testo-2); }
.tabella-anomalie .col-note { width: 30%; }
.tabella-anomalie .col-note .pod { margin: 2px 4px 2px 0; }
.tabella-anomalie .col-valori { width: 20%; }
.tabella-anomalie .col-valori span { margin-left: var(--s3); }

.collegamento-conto {
  background: none;
  border: 0;
  padding: 0;
  color: var(--testo);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--testo-4);
}
.collegamento-conto:hover {
  color: var(--ambra);
  border-bottom-color: var(--ambra);
}

/* --- report ---------------------------------------------------------- */
.report-pagina { display: flex; flex-direction: column; gap: var(--s4); }
.varianti { display: flex; flex-direction: column; gap: var(--s2);
            align-items: flex-end; }
.tabella-report td { padding: var(--s3) var(--s3) var(--s3) 0; }
.tabella-report .col-quando { width: 30%; }
.tabella-report .col-periodo { width: 12%; }
.tabella-report .col-conti { width: 10%; }
.tabella-report .col-collaudi { width: 16%; }
.tabella-report .col-marcatori { width: 16%; }
.tabella-report .col-azioni { width: 16%; text-align: right; }
.tabella-report .col-azioni .pill { padding: 5px 12px; font-size: 12px; }
.pod-ambra {
  border-color: color-mix(in srgb, var(--ambra) 35%, transparent);
  background: var(--ambra-tenue);
  color: var(--ambra);
}
.pod-allarme {
  border-color: var(--errore-bordo);
  background: var(--errore-fondo);
  color: var(--errore-testo);
}

/* --- dialogo --------------------------------------------------------- */
.dialogo-pagina { display: flex; flex-direction: column; gap: var(--s4); }
.azioni-testata { display: flex; align-items: center; gap: var(--s3); }
.due-colonne-dialogo {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 2fr);
  gap: var(--s4);
  align-items: start;
}
.elenco-dialogo {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3);
  max-height: 620px;
  overflow-y: auto;
}
.voce-dialogo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pod);
  padding: var(--s3);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.voce-dialogo:hover { background: var(--bianco-tenue); }
.voce-dialogo.scelta {
  background: var(--bianco-tenue-2);
  border-color: var(--card-bordo);
}
.voce-nota.scelta, .voce-nota:hover {
  border-color: color-mix(in srgb, var(--ambra) 30%, transparent);
}
.voce-testa { display: flex; gap: var(--s2); flex-wrap: wrap; }
.voce-titolo { line-height: 1.35; }
.voce-piede { display: flex; gap: var(--s3); align-items: center;
              flex-wrap: wrap; }

.conversazione { display: flex; flex-direction: column; gap: var(--s4); }
.azioni-conversazione { display: flex; align-items: center; gap: var(--s3); }
.messaggi { display: flex; flex-direction: column; gap: var(--s3); }
.messaggio {
  border-left: 1px solid var(--card-bordo);
  padding: var(--s2) 0 var(--s2) var(--s4);
}
.messaggio-regia { border-left-color: var(--ambra); }
.messaggio-testa { display: flex; gap: var(--s3); margin-bottom: 5px; }
.messaggio p { color: var(--testo-2); max-width: 82ch; line-height: 1.5; }

.rispondi { display: flex; flex-direction: column; gap: var(--s3); }
.rispondi .bottone { align-self: flex-start; width: auto; padding: 10px 22px; }
.chiusa-il { padding-top: var(--s2); }

.nuova-conversazione { display: flex; flex-direction: column; }
.nuova-conversazione .bottone { align-self: flex-start; width: auto;
                                padding: 11px 24px; }

textarea, select {
  width: 100%;
  background: var(--bianco-tenue);
  border: 1px solid var(--card-bordo);
  border-radius: var(--r-pod);
  padding: 11px 13px;
  color: var(--testo);
  resize: vertical;
  font-family: inherit;
}
textarea:focus, select:focus {
  outline: none;
  border-color: var(--ambra);
  background: var(--bianco-tenue-2);
}

@media (max-width: 1100px) {
  .due-colonne-dialogo { grid-template-columns: minmax(0, 1fr); }
}

.vuoto {
  border: 1px dashed var(--card-bordo);
  border-radius: var(--r-card);
  padding: var(--s6);
  text-align: center;
  color: var(--testo-3);
}