/**
 * LE FINESTRE, quello che al kit manca.                        [13/08/2026]
 *
 * ⛔ QUI NON C'E' IL GUSCIO DELLE FINESTRE, e non e' una dimenticanza: il
 * guscio ce l'ha gia' il kit (`.nk-ovl`, `.nk-modal`, `.nk-modal-top`,
 * `.nk-modal-body`, `.nk-modal-f`, `.nk-x`). Riscriverlo qui vorrebbe dire
 * avere due finestre leggermente diverse, che e' esattamente il difetto da cui
 * si sta uscendo: le 34 finestre della V4 erano nate cosi', una alla volta, con
 * lo stile scritto dentro il tag.
 *
 * Qui stanno **soltanto** le tre o quattro cose che nel kit non esistono
 * perche' nel disegno non c'erano, e che invece dentro le finestre servono:
 * la riga con la casella da spuntare, il riquadro del file da caricare, la
 * riga d'esito che il JavaScript accende. Nient'altro. Se una cosa si puo'
 * fare con una classe del kit, si fa con quella.
 *
 * ⚠ NIENTE `!important` QUI DENTRO. Se una regola ha bisogno di gridare, vuol
 * dire che la finestra ha ancora dello stile scritto nel tag, e la cura e'
 * togliere quello: `dev/tests/controllo_finestre.php` boccia una finestra col
 * kit addosso che si porta ancora dietro lo stile in riga.
 */

/* ── La riga con la scelta (radio o casella) ──────────────────────────
   Nel kit c'e' `.nk-row`, ma e' una riga d'elenco con la linea sotto: qui
   serve una riga cliccabile stretta, senza linea, che sta bene in colonna. */
.nk-scelta {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--nk-paper);
  cursor: pointer;
  padding: 7px 0;
}
.nk-scelta + .nk-scelta { padding-top: 0; }
.nk-scelta input { accent-color: var(--nk-accent); width: 15px; height: 15px; flex-shrink: 0; }
.nk-scelte-riga { display: flex; gap: 16px; flex-wrap: wrap; }

/* ── Il riquadro del file da caricare ─────────────────────────────────
   Il `<input type="file">` vero resta nel documento e invisibile: lo apre il
   bottone. ⚠ Invisibile con `position:absolute` e non con `display:none`,
   se no in qualche browser non si puo' aprire da JavaScript. */
.nk-carica {
  border: 1.5px dashed var(--nk-line-2);
  border-radius: var(--nk-r-md);
  padding: 22px 16px;
  text-align: center;
  background: var(--nk-ink-2);
}
.nk-carica:hover { border-color: var(--nk-accent); }
.nk-carica-t { font-size: 13px; color: var(--nk-muted); margin-bottom: 11px; }
.nk-carica-nome { font-size: 11.5px; color: var(--nk-muted-2); margin-top: 9px; word-break: break-all; }
.nk-file-vero { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }

/* ── La riga d'esito ──────────────────────────────────────────────────
   La accende il JavaScript con `style.display = 'block'`, quindi qui **non**
   si scrive nessun `display`: sarebbe una regola che litiga col codice che la
   usa. Si scrive solo com'e' fatta quando si vede. */
.nk-riga-esito {
  font-size: 12.5px;
  line-height: 1.45;
  margin-top: 11px;
  padding: 9px 11px;
  border-radius: var(--nk-r-sm);
  background: var(--nk-ink-2);
  color: var(--nk-muted);
}
.nk-riga-esito.ok { background: color-mix(in oklch, #34C759 10%, var(--nk-ink)); color: var(--nk-success-ink); }
.nk-riga-esito.ko { background: color-mix(in oklch, #FF3B30 8%, var(--nk-ink)); color: var(--nk-danger); }

/* ── Finestre piu' larghe di 468px ────────────────────────────────────
   Il kit ne ha una misura sola perche' nel disegno ce n'era una sola. Due
   finestre pero' mostrano una tabella o un'anteprima e a 468px non ci stanno.
   Sono due misure e basta: se ne servisse una terza, val la pena chiedersi
   se quella finestra non sia in realta' una schermata. */
.nk-modal.lg { max-width: 620px; }
.nk-modal.xl { max-width: 780px; }

/* ── L'elenco a scorrimento dentro una finestra ───────────────────────
   Serve dove il contenuto e' un elenco che puo' essere lungo (i gruppi
   dell'esportazione, lo storico dei punti): scorre lui, non tutta la
   finestra, se no l'intestazione e i bottoni scappano via. */
.nk-elenco-scorre {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--nk-line);
  border-radius: var(--nk-r-sm);
  padding: 7px 9px;
}