/* Sistema visivo di Fidara — direzione "console".
   Denso e da mestiere: barra laterale fissa, righe strette, numeri a larghezza fissa.
   Pensato per chi ci guarda dentro ogni giorno e vuole vedere senza scorrere.

   Ogni colore e ogni misura di ritmo stanno qui sotto come variabile. Fuori da :root non si
   scrive un colore né una spaziatura a mano: un test lo verifica, perché la coerenza di un
   sistema tenuto da una persona sola non regge sulla memoria. */

:root {
  /* inchiostro e superfici */
  --inchiostro: #1a1d21;
  --tenue: #7c8592;
  --fioco: #a3abb5;
  --fondo: #f4f5f7;
  --pannello: #ffffff;
  --pannello-testa: #fafbfc;
  --riga-alterna: #fcfcfd;
  --bordo: #dcdfe4;
  --griglia: #eef0f2;
  --campo-bordo: #b8bfc7;

  /* barra laterale */
  --barra: #1f2429;
  --barra-testo: #b9c0c9;
  --barra-tenue: #6b7480;
  --barra-attivo: #2c3238;
  --barra-chiaro: #ffffff;

  /* significati */
  --accento: #2f6f5e;
  --accento-cupo: #245546;
  --allarme: #c0392b;
  --allarme-fondo: #fbeae7;
  --allarme-bordo: #f0c8c1;
  --allarme-riga: #fdf4f2;
  --buono: #1a7f5a;
  --buono-fondo: #eef6f3;
  --messa-a-fuoco: rgba(47, 111, 94, 0.18);
  --ombra: 0 1px 2px rgba(26, 29, 33, 0.05);
  --ombra-menu: 0 8px 24px rgba(26, 29, 33, 0.12);

  /* ritmo */
  --s0: 0;
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1.1rem;
  --s5: 1.6rem;
  --s6: 2.2rem;
  --s7: 3.2rem;

  /* forme */
  --raggio: 4px;
  --raggio-largo: 6px;
  --barra-larga: 14rem;
  --colonna: 62rem;
  --colonna-stretta: 26rem;

  /* caratteri */
  --testo: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --corpo: 14.5px;
  --minuto: 0.8rem;
  --minuscolo: 0.72rem;
  --etichetta: 0.7rem;
  --grande: 1.5rem;
  --enorme: 2.3rem;
}

* { box-sizing: border-box; }

body {
  margin: var(--s0);
  background: var(--fondo);
  color: var(--inchiostro);
  font: var(--corpo)/1.5 var(--testo);
}

/* --- telaio ------------------------------------------------------------------------- */

.telaio { display: grid; grid-template-columns: var(--barra-larga) 1fr; min-height: 100vh; }
.telaio.senza-barra { grid-template-columns: 1fr; }

aside {
  background: var(--barra);
  color: var(--barra-testo);
  padding: var(--s4) var(--s2);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
aside .marchio {
  display: block;
  color: var(--barra-chiaro);
  font-weight: 650;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: var(--s0) var(--s2) var(--s4);
}
aside .gruppo {
  font-size: var(--etichetta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--barra-tenue);
  padding: var(--s4) var(--s2) var(--s1);
}
aside a {
  display: block;
  padding: var(--s1) var(--s2);
  color: var(--barra-testo);
  text-decoration: none;
  border-radius: var(--raggio-largo);
  font-size: var(--minuto);
}
aside a .sotto {
  display: block;
  color: var(--barra-tenue);
  font-size: var(--etichetta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
aside a:hover { color: var(--barra-chiaro); }
aside a.attivo { background: var(--barra-attivo); color: var(--barra-chiaro); }
aside .in-fondo { margin-top: auto; padding-top: var(--s4); }

main { padding: var(--s4) var(--s6) var(--s7); }
.colonna { max-width: var(--colonna); }
.colonna-stretta { max-width: var(--colonna-stretta); margin: var(--s6) auto; }

/* --- testate ------------------------------------------------------------------------ */

.testata-pagina {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4);
  border-bottom: 1px solid var(--bordo);
  padding-bottom: var(--s2);
  margin-bottom: var(--s3);
}
h1 { font-size: 1.15rem; margin: var(--s0); font-weight: 650; }
h2 { font-size: 1rem; margin: var(--s0); font-weight: 600; }
h3 { font-size: var(--minuto); margin: var(--s0); font-weight: 600; }
.briciole { color: var(--tenue); font-size: var(--minuto); }
.occhiello { color: var(--tenue); font-size: var(--minuto); margin: var(--s1) var(--s0) var(--s4); }
.nota { color: var(--tenue); font-size: var(--minuto); margin: var(--s3) var(--s0) var(--s0); }
.dettaglio { color: var(--tenue); font-size: var(--minuto); }

.freschezza {
  font: 600 var(--minuscolo)/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tenue);
  white-space: nowrap;
}
.freschezza.vecchia { color: var(--allarme); }

/* --- pannelli ----------------------------------------------------------------------- */

.pannello {
  background: var(--pannello);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  margin-bottom: var(--s4);
}
.pannello > h2,
.pannello > .testa {
  font: 600 var(--etichetta)/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tenue);
  margin: var(--s0);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--bordo);
  background: var(--pannello-testa);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
}
.corpo { padding: var(--s4); }

.allarme {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: baseline;
  background: var(--allarme-fondo);
  border: 1px solid var(--allarme-bordo);
  border-radius: var(--raggio);
  color: var(--allarme);
  font-size: var(--minuto);
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s4);
}
.allarme a { color: inherit; }
.conferma {
  background: var(--buono-fondo);
  border: 1px solid var(--bordo);
  border-left: 3px solid var(--buono);
  border-radius: var(--raggio);
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s4);
  font-size: var(--minuto);
}
.vuoto {
  color: var(--tenue);
  border: 1px dashed var(--bordo);
  border-radius: var(--raggio);
  padding: var(--s4);
  font-size: var(--minuto);
}
.vuoto p { margin: var(--s0) var(--s0) var(--s2); }
.vuoto form { margin-top: var(--s3); }

/* --- misure ------------------------------------------------------------------------- */

.misure { display: flex; flex-wrap: wrap; gap: var(--s6); align-items: flex-end; }
.misura .etichetta {
  font: var(--etichetta)/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tenue);
}
.misura .valore {
  font: 600 var(--grande)/1.15 var(--mono);
  font-variant-numeric: tabular-nums;
  margin-top: var(--s1);
}
.misura.principale .valore { font-size: var(--enorme); }
.misura .valore.male { color: var(--allarme); }
.misura .valore.assente { color: var(--fioco); font-size: var(--minuto); }
.misura .nota { font-size: var(--minuscolo); color: var(--tenue); margin: var(--s1) var(--s0) var(--s0); }

.numero-grande {
  font: 600 var(--enorme)/1.1 var(--mono);
  font-variant-numeric: tabular-nums;
  margin: var(--s0);
}
.numero-grande .unita { font-size: var(--grande); color: var(--tenue); }
.etichetta-numero {
  font: var(--etichetta)/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tenue);
  margin: var(--s2) var(--s0) var(--s4);
}

.cifre { list-style: none; padding: var(--s0); margin: var(--s0); display: grid; gap: var(--s3); }
.cifre li { display: grid; grid-template-columns: 14rem auto; align-items: baseline; gap: var(--s3); }
.cifre span { color: var(--tenue); font-size: var(--minuto); }
.cifre strong { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.cifre strong.assente, .cifre strong.in-ritardo { color: var(--allarme); }
.cifre small { grid-column: 2; color: var(--tenue); font-size: var(--minuscolo); }

/* --- tabelle ------------------------------------------------------------------------ */

.tabella {
  width: 100%;
  border-collapse: collapse;
  font: var(--minuto)/1.45 var(--mono);
  font-variant-numeric: tabular-nums;
}
.tabella th {
  font: 600 var(--etichetta)/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tenue);
  text-align: left;
  padding: var(--s0) var(--s2) var(--s1);
}
.tabella td { padding: var(--s1) var(--s2); border-top: 1px solid var(--griglia); }
.tabella th:first-child, .tabella td:first-child { padding-left: var(--s0); }
.tabella td:first-child { font-family: var(--testo); }
.tabella .numero { text-align: right; }
.tabella th.numero { text-align: right; }
.tabella tbody tr:nth-child(odd) { background: var(--riga-alterna); }
.tabella .titolo { font-weight: 550; }
.tabella tfoot td { border-top: 1px solid var(--inchiostro); font-weight: 600; }
.tabella tr.sforata td, .tabella tr.tipo-rettifica td { color: var(--allarme); }
.tabella tr.sforata { background: var(--allarme-riga); }
.tabella tr.tipo-impegno td { color: var(--tenue); }
.tabella tr.stato-chiusa td { color: var(--tenue); }
.azioni-riga { display: flex; align-items: center; gap: var(--s3); white-space: nowrap; }
.azioni-riga form { margin: var(--s0); }

/* --- elenchi ------------------------------------------------------------------------ */

.elenco { list-style: none; padding: var(--s0); margin: var(--s0); }
.elenco li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--griglia);
}
.elenco li:last-child { border-bottom: none; }
/* L'indirizzo va a capo sotto il nome: flex-basis piena, non una spaziatura scritta a mano. */
.elenco .sotto { flex-basis: 100%; color: var(--tenue); font-size: var(--minuto); }
.elenco .titolo { font-weight: 550; color: var(--inchiostro); text-decoration: none; }
.elenco .titolo:hover { text-decoration: underline; }
.suggerimenti {
  list-style: none;
  padding: var(--s0);
  margin: var(--s1) var(--s0) var(--s0);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--pannello);
  overflow: hidden;
}
.suggerimenti li { border-bottom: 1px solid var(--griglia); }
.suggerimenti li:last-child { border-bottom: none; }
.suggerimenti a {
  display: block;
  padding: var(--s2) var(--s3);
  text-decoration: none;
  color: var(--inchiostro);
}
.suggerimenti a:hover { background: var(--fondo); }
.suggerimenti .titolo { display: block; font-weight: 550; }
.suggerimenti .sotto { display: block; color: var(--tenue); font-size: var(--minuto); }

.elenco-nudo { list-style: none; padding: var(--s3) var(--s0) var(--s0); margin: var(--s0); }
.elenco-nudo li { padding: var(--s1) var(--s0); border-bottom: 1px solid var(--griglia); }
.storico { margin-top: var(--s4); }
.storico summary { cursor: pointer; color: var(--tenue); font-size: var(--minuto); }

/* --- moduli ------------------------------------------------------------------------- */

.campo { display: flex; flex-direction: column; gap: var(--s1); margin: var(--s0) var(--s0) var(--s3); }
.campo label { font-size: var(--minuto); color: var(--tenue); }
.campo input, .campo select, .campo textarea, input, select, textarea {
  font: var(--minuto) var(--testo);
  width: 100%;
  padding: var(--s2) var(--s2);
  color: var(--inchiostro);
  background: var(--pannello);
  border: 1px solid var(--campo-bordo);
  border-radius: var(--raggio);
}
input[type="number"] { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
input[type="date"] { font-family: var(--mono); }
input[type="radio"] { width: auto; margin: var(--s0); }
select {
  appearance: none;
  padding-right: var(--s6);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--tenue) 50%),
    linear-gradient(135deg, var(--tenue) 50%, transparent 50%);
  background-position: right var(--s4) center, right var(--s3) center;
  background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
  background-repeat: no-repeat;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accento);
  box-shadow: 0 0 0 3px var(--messa-a-fuoco);
}
.campo small { font-size: var(--minuscolo); color: var(--tenue); }
.campo small ul { margin: var(--s1) var(--s0) var(--s0); padding-left: var(--s4); }
.errore { color: var(--allarme); }
abbr.obbligatorio { color: var(--allarme); text-decoration: none; border: none; margin-left: var(--s1); cursor: help; }
.valore-fisso { font-family: var(--mono); letter-spacing: 0.02em; padding: var(--s2) var(--s0); }

.campo #id_forma { display: flex; gap: var(--s5); }
.campo #id_forma label {
  display: flex; align-items: center; gap: var(--s1);
  color: var(--inchiostro); font-size: var(--minuto); cursor: pointer;
}

/* Nei moduli con molti importi l'etichetta sta a sinistra e i campi si incolonnano, così
   le cifre si leggono una sopra l'altra e si confrontano a occhio. */
.modulo-tabellare .campo {
  display: grid;
  grid-template-columns: 1fr 14rem;
  align-items: center;
  gap: var(--s1) var(--s4);
  margin-bottom: var(--s1);
  padding-bottom: var(--s1);
  border-bottom: 1px solid var(--griglia);
}
.modulo-tabellare .campo label { grid-column: 1; color: var(--inchiostro); }
.modulo-tabellare .campo > :not(label) { grid-column: 2; }
.modulo-tabellare .campo small, .modulo-tabellare .campo textarea { grid-column: 1 / -1; }
.modulo-tabellare h3.gruppo { margin-top: var(--s5); }
@media (max-width: 34rem) {
  .modulo-tabellare .campo { grid-template-columns: 1fr; }
  .modulo-tabellare .campo > :not(label) { grid-column: 1; }
}

h3.gruppo {
  font: 600 var(--etichetta)/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tenue);
  margin: var(--s5) var(--s0) var(--s3);
}
.riga-modulo { margin: var(--s4) var(--s0) var(--s0); }
.riga-modulo .azioni { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s3); }

/* --- comandi ------------------------------------------------------------------------ */

button, a.bottone {
  font: 600 var(--minuto) var(--testo);
  padding: var(--s2) var(--s4);
  border: 1px solid var(--accento);
  border-radius: var(--raggio);
  background: var(--accento);
  color: var(--barra-chiaro);
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
}
button:hover, a.bottone:hover { background: var(--accento-cupo); border-color: var(--accento-cupo); }
button.principale { width: 100%; }
button.principale.stretto, button.stretto { width: auto; }
a.bottone.tenue, button.tenue {
  background: var(--pannello);
  color: var(--accento);
  border-color: var(--bordo);
}
a.bottone.tenue:hover, button.tenue:hover { background: var(--pannello); border-color: var(--accento); }
button.collegamento {
  border: none;
  background: none;
  padding: var(--s0);
  color: var(--accento);
  font-weight: 500;
  text-decoration: underline;
  width: auto;
}
button.collegamento:hover { background: none; color: var(--accento-cupo); }
.comandi { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }

a { color: var(--accento); }

/* --- menù del profilo --------------------------------------------------------------- */

.menu { position: relative; }
.menu summary {
  list-style: none;
  cursor: pointer;
  color: var(--barra-testo);
  font-size: var(--minuto);
  padding: var(--s1) var(--s2);
  border-radius: var(--raggio-largo);
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: " ▾"; color: var(--barra-tenue); }
.menu summary:hover { background: var(--barra-attivo); color: var(--barra-chiaro); }
.menu .voci {
  position: absolute;
  bottom: 100%;
  left: var(--s0);
  right: var(--s0);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3);
  margin-bottom: var(--s1);
  background: var(--pannello);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-largo);
  box-shadow: var(--ombra-menu);
}
.menu .voci a { color: var(--inchiostro); font-size: var(--minuto); padding: var(--s0); }
.menu .voci form { margin: var(--s0); }

@media (max-width: 48rem) {
  .telaio { grid-template-columns: 1fr; }
  aside { flex-direction: row; flex-wrap: wrap; align-items: center; }
  aside .gruppo { display: none; }
  aside .in-fondo { margin-top: var(--s0); margin-left: auto; padding-top: var(--s0); }
  .menu .voci { bottom: auto; top: 100%; left: auto; right: var(--s0); min-width: 12rem; }
  main { padding: var(--s4) var(--s4) var(--s7); }
}