/* Scheda di osservazione partita — foglio A4 identico su schermo e in stampa.
   Tutte le misure del documento sono in millimetri: quel che si vede a schermo
   è già la pagina stampata. */

:root {
  --inchiostro: #0F172A;
  --tenue: #6B7280;
  --bordo: #D6DCE4;
  --bordo-forte: #9AA5B1;
  --verde: #16543A;
  --verde-chiaro: #EDF4EF;
  --grigio: #F6F8FA;
  --squadra-a: #1D4ED8;
  --squadra-b: #B91C1C;
  --riserva-a: #93B4F5;
  --riserva-b: #F0A9A9;
  --zoom: 1;
  --passo-riga: 6.3mm;
}

* { box-sizing: border-box; }

html {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;        /* i colori dei pallini devono uscire in stampa */
}

body {
  margin: 0;
  background: #E7EAEF;
  color: var(--inchiostro);
  font: 400 10.5pt/1.35 "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------------ barra */
.barra {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
  padding: .6rem 1rem;
  background: var(--verde); color: #fff;
  box-shadow: 0 1px 8px rgb(15 23 42 / .25);
}
.marchio { font-size: .95rem; letter-spacing: .02em; }
.azioni { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.barra button {
  font: inherit; font-size: .82rem;
  padding: .4rem .75rem; border-radius: 6px; cursor: pointer;
  border: 1px solid rgb(255 255 255 / .35);
  background: rgb(255 255 255 / .1); color: #fff;
}
.barra button:hover { background: rgb(255 255 255 / .2); }
.barra button.primario { background: #fff; color: var(--verde); border-color: #fff; font-weight: 600; }
.barra button.primario:hover { background: #DCEDE3; }
.zoom { display: inline-flex; align-items: center; gap: .2rem; margin-right: .3rem; }
.zoom button { min-width: 2rem; padding: .35rem 0; }
.zoom output { font-size: .78rem; min-width: 3.2rem; text-align: center; opacity: .85; }

.stato {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
  padding: .5rem .85rem; border-radius: 6px;
  background: var(--inchiostro); color: #fff; font-size: .8rem;
  opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.stato.visibile { opacity: .92; transform: none; }

/* ----------------------------------------------------------------- foglio */
main {
  display: flex; flex-direction: column; align-items: center;
  gap: 1.5rem; padding: 1.5rem .75rem 4rem;
}
.foglio {
  /* colonna flessibile: se l'intestazione cresce, a cedere spazio sono il
     riquadro della distinta e l'area del giudizio, non l'altezza della pagina */
  width: 210mm; height: 297mm; padding: 12mm;
  display: flex; flex-direction: column;
  background: #fff; position: relative;
  box-shadow: 0 2px 14px rgb(15 23 42 / .18);
  transform: scale(var(--zoom)); transform-origin: top center;
  margin-bottom: calc((var(--zoom) - 1) * 297mm);
}

/* ------------------------------------------------------- testi modificabili */
[contenteditable] { outline: none; }
[contenteditable]:focus { background: #FFF8DC; }
[contenteditable]:empty::before,
[contenteditable].vuoto::before {
  content: attr(data-vuoto); color: var(--bordo-forte); font-weight: 400;
}

/* ------------------------------------------------------------- intestazione */
.banda {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  background: var(--verde); color: #fff;
  padding: 2.4mm 5mm; height: 10mm;
}
.banda h1 {
  margin: 0; font-size: 12pt; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.banda p { margin: 0; font-size: 8.5pt; color: #C8E0D2; }

.sezione {
  margin: 4.5mm 0 1.5mm; padding-bottom: 1.2mm;
  border-bottom: 1.5pt solid var(--verde);
  font-size: 11pt; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.sezione .num { color: var(--verde); margin-right: 1.5mm; }
.sezione em {
  font-size: 8pt; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: var(--tenue); margin-left: 2mm;
}

.griglia {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: .75pt solid var(--bordo); border-width: .75pt 0 0 .75pt;
}
.cella {
  border: .75pt solid var(--bordo); border-width: 0 .75pt .75pt 0;
  padding: 1.6mm 2.4mm; min-height: 12.5mm;
}
.cella.larga { grid-column: 1 / -1; min-height: 14.5mm; }
.cella.evidenza { background: var(--verde-chiaro); }
.cella label {
  display: block; font-size: 7pt; font-weight: 700; color: var(--tenue);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: .6mm;
}
.valore { font-size: 11pt; font-weight: 600; min-height: 5mm; }
.valore.grande { font-size: 16pt; color: var(--verde); }
.cella.evidenza .valore { color: var(--verde); }

/* ---------------------------------------------------------------- distinta */
.distinta {
  position: relative; flex: 1 1 auto; min-height: 60mm;
  border: 1pt dashed var(--bordo-forte); background: var(--grigio);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.distinta.trascinamento { background: var(--verde-chiaro); border-color: var(--verde); }
.invito { text-align: center; color: var(--tenue); padding: 4mm; }
.invito strong {
  display: block; font-size: 12pt; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bordo-forte); margin-bottom: 2.5mm;
}
.invito p { margin: .8mm 0; font-size: 9.5pt; }
.invito .minuta { font-size: 8.5pt; font-style: italic; color: var(--bordo-forte); }
#btn-sfoglia {
  font: inherit; font-size: 9.5pt; color: var(--verde); background: none;
  border: none; border-bottom: 1px solid currentColor; padding: 0; cursor: pointer;
}
#img-distinta { max-width: 100%; max-height: 100%; object-fit: contain; }
.rimuovi {
  position: absolute; top: 2mm; right: 2mm; width: 7mm; height: 7mm;
  border-radius: 50%; border: none; cursor: pointer;
  background: rgb(15 23 42 / .6); color: #fff; font-size: 12pt; line-height: 1;
}

/* ----------------------------------------------------------------- squadre */
.squadra + .squadra { margin-top: 3.5mm; }
.riga-squadra {
  display: flex; align-items: baseline; justify-content: space-between;
  height: 8.5mm; padding-bottom: 1mm; border-bottom: 1.5pt solid var(--colore);
}
.squadra[data-squadra="0"] { --colore: var(--squadra-a); --riserva: var(--riserva-a); }
.squadra[data-squadra="1"] { --colore: var(--squadra-b); --riserva: var(--riserva-b); }
.riga-squadra .nome {
  font-size: 11.5pt; font-weight: 700; color: var(--colore);
  text-transform: uppercase; letter-spacing: .04em; min-width: 30mm;
}
.riga-squadra .verso { font-size: 8pt; font-style: italic; color: var(--tenue); }

.corpo {
  position: relative; height: 117mm;
  display: grid; grid-template-columns: 80mm 1fr;
  touch-action: none;                       /* il trascinamento gestisce il tocco */
}
.corpo .campo {
  width: 78mm; height: 117mm; display: block; margin-left: 1mm;
  grid-column: 1; user-select: none; -webkit-user-drag: none;
}
.lato { grid-column: 2; padding-left: 3mm; }

.riga-modulo { display: flex; align-items: baseline; gap: 2mm; margin: 0; height: 10mm; }
.riga-modulo label {
  font-size: 7.5pt; font-weight: 700; color: var(--tenue);
  text-transform: uppercase; letter-spacing: .07em;
}
input.modulo {
  font: 700 18pt/1 inherit; color: var(--colore); width: 26mm;
  border: none; border-bottom: 1pt solid var(--bordo); background: none; padding: 0 0 .5mm;
}
input.modulo:focus { outline: none; background: #FFF8DC; }
.variazioni { font-size: 8pt; color: var(--tenue); flex: 1; }
.variazioni span { display: inline-block; min-width: 22mm; border-bottom: .75pt solid var(--bordo); color: var(--inchiostro); }

.etichetta {
  margin: 0; height: 5mm; overflow: hidden; white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: var(--tenue);
  text-transform: uppercase; letter-spacing: .07em;
}
.etichetta em {
  font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--bordo-forte); margin-left: 2mm; font-size: 7.5pt;
}
.spazio-panchina { height: 12mm; }

/* righe su cui scrivere */
.righe {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0, transparent calc(var(--passo-riga) - .75pt),
    var(--bordo) calc(var(--passo-riga) - .75pt), var(--bordo) var(--passo-riga));
  line-height: var(--passo-riga);
  font-size: 10pt;
}
.lato .righe { height: calc(13 * var(--passo-riga)); }

/* ----------------------------------------------------------------- pallini */
.pallino {
  position: absolute; z-index: 10;
  width: 6.4mm; height: 6.4mm; margin: -3.2mm 0 0 -3.2mm;   /* left/top = centro */
  border-radius: 50%; border: .75pt solid #fff;
  background: var(--colore); color: #fff;
  font: 700 7.5pt/1 inherit; text-align: center;
  display: flex; align-items: center; justify-content: center;
  cursor: grab; user-select: none; touch-action: none;
  box-shadow: 0 .5pt 1.5pt rgb(15 23 42 / .3);
}
.pallino.riserva { background: var(--riserva); border-color: var(--colore); }
.pallino.presa { cursor: grabbing; transform: scale(1.15); z-index: 30; }
.pallino.modifica { cursor: text; outline: 2px solid #FACC15; }

/* ---------------------------------------------------------------- giudizio */
.giudizio { flex: 1 1 auto; min-height: 60mm; margin-top: 2mm; }
.chiusura { display: grid; grid-template-columns: 30fr 28fr 42fr; margin-top: 4mm; }
.chiusura .cella { background: var(--grigio); border: .75pt solid var(--bordo); min-height: 15mm; }
.chiusura .cella + .cella { border-left: 0; }
.chiusura .valore.grande { color: var(--inchiostro); font-size: 13pt; }

/* ------------------------------------------------------------------ stampa */
@page { size: A4; margin: 0; }

@media print {
  body { background: #fff; }
  .barra, .stato, .rimuovi, #btn-sfoglia { display: none !important; }
  main { display: block; padding: 0; gap: 0; }
  .foglio {
    width: 210mm; height: 297mm; box-shadow: none; margin: 0; overflow: hidden;
    transform: none; break-after: page; page-break-after: always;
  }
  .foglio:last-child { break-after: auto; page-break-after: auto; }
  [contenteditable]:focus { background: none; }
  .invito { display: none; }          /* riquadro distinta vuoto: resta il bordo */
}

/* --------------------------------------------------------- schermi stretti */
@media (max-width: 860px) {
  main { padding: 1rem .25rem 3rem; align-items: flex-start; }
  .foglio { transform-origin: top left; }
}