/* Noleggiando — libreria componenti. Solo token semantici: nessun esadecimale qui dentro.
   Il test di appartenenza al sistema: cambia data-theme e guarda cosa NON cambia.
   Quello che resta fermo è fuori sistema. */

/* Bottoni — 44px di altezza minima: è la misura del dito, non una preferenza estetica. */
.nl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--nl-s2);
  min-height:var(--nl-hit-min);padding:0 var(--nl-s5);
  font:700 var(--nl-t-b)/1 var(--nl-font-ui);letter-spacing:-.01em;
  border:1px solid transparent;border-radius:var(--nl-r2);cursor:pointer;
  background:var(--nl-accent-1);color:var(--nl-on-accent-1);
  transition:background-color var(--nl-dur-2) var(--nl-ease),border-color var(--nl-dur-2) var(--nl-ease);
}
.nl-btn:hover{background:color-mix(in srgb,var(--nl-accent-1),var(--nl-shade-ink) 14%)}
.nl-btn:active{background:color-mix(in srgb,var(--nl-accent-1),var(--nl-shade-ink) 24%)}
.nl-btn:focus-visible{outline:2px solid var(--nl-accent-1);outline-offset:2px}
.nl-btn[disabled]{opacity:.45;cursor:not-allowed}
.nl-btn--secondario{background:transparent;color:var(--nl-accent-1-text);border-color:var(--nl-line-strong)}
.nl-btn--secondario:hover{background:var(--nl-accent-1-tint);border-color:var(--nl-accent-1)}
.nl-btn--quieto{background:transparent;color:var(--nl-text-2);border-color:transparent}
.nl-btn--quieto:hover{background:var(--nl-surface-2);color:var(--nl-text-1)}
/* Il rosso è l'accento che attraversa, non un secondo bottone primario: vale per un'azione
   sola per schermata (annullamento, disdetta, penale). */
.nl-btn--accento{background:var(--nl-accent-2);color:var(--nl-on-accent-2)}
.nl-btn--accento:hover{background:color-mix(in srgb,var(--nl-accent-2),var(--nl-shade-ink) 14%)}

/* Superfici */
.nl-card{
  background:var(--nl-surface-1);border:1px solid var(--nl-line);
  border-radius:var(--nl-r4);padding:var(--nl-s5);box-shadow:var(--nl-e1);
}
.nl-card--quieta{box-shadow:none;background:var(--nl-surface-2);border-color:transparent}

/* Stati — colore, bordo e testo insieme: il documento deve restare leggibile in fotocopia
   e per chi non distingue i rossi dai verdi. */
.nl-stato{
  display:inline-flex;align-items:center;gap:var(--nl-s2);
  padding:var(--nl-s1) var(--nl-s3);border-radius:var(--nl-r-full);
  font:700 var(--nl-t-bs)/1.4 var(--nl-font-ui);border:1px solid;
}
.nl-stato--ok{background:var(--nl-ok-tint);color:var(--nl-ok-text);border-color:color-mix(in srgb,var(--nl-ok),transparent 62%)}
.nl-stato--attesa{background:var(--nl-warn-tint);color:var(--nl-warn-text);border-color:color-mix(in srgb,var(--nl-warn),transparent 62%)}
.nl-stato--fermo{background:var(--nl-err-tint);color:var(--nl-err-text);border-color:color-mix(in srgb,var(--nl-err),transparent 62%)}
.nl-stato--quieto{background:var(--nl-surface-2);color:var(--nl-text-2);border-color:var(--nl-line-strong)}

/* Campi */
.nl-input,.nl-select,.nl-textarea{
  width:100%;box-sizing:border-box;min-height:var(--nl-hit-min);
  padding:var(--nl-s3) var(--nl-s4);
  font:400 var(--nl-t-b)/1.5 var(--nl-font-testo);
  color:var(--nl-text-1);background:var(--nl-surface-1);
  border:1px solid var(--nl-line-strong);border-radius:var(--nl-r2);
}
.nl-input::placeholder,.nl-textarea::placeholder{color:var(--nl-text-3)}
.nl-input:focus,.nl-select:focus,.nl-textarea:focus{outline:2px solid var(--nl-accent-1);outline-offset:1px;border-color:var(--nl-accent-1)}
.nl-etichetta{display:block;font:600 var(--nl-t-bs)/1.4 var(--nl-font-ui);color:var(--nl-text-2);margin-bottom:var(--nl-s2)}

/* Occhiello — l'etichetta mono maiuscola che apre ogni sezione, a schermo e sulla carta. */
.nl-occhiello{
  font:500 var(--nl-t-ov)/var(--nl-t-ov-lh) var(--nl-font-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--nl-text-3);
}

/* Dato incolonnato — importi, matricole, date. Tabular per forza: le cifre devono allinearsi. */
.nl-dato{font:400 var(--nl-t-dato)/var(--nl-t-dato-lh) var(--nl-font-mono);font-variant-numeric:tabular-nums}

/* Campo da compilare — il segnaposto giallo dei documenti. Il giallo qui è fondo, mai
   inchiostro, e non si spezza mai a fine riga: un campo spezzato non si riconosce più. */
.nl-da-compilare{
  background:var(--nl-accent-3-tint);color:var(--nl-accent-3-text);
  border-bottom:1px dashed color-mix(in srgb,var(--nl-accent-3),var(--nl-shade-ink) 30%);
  padding:0 3px;white-space:nowrap;
}

/* Tabella dati — il capello sopra la riga, mai una griglia completa: la griglia piena
   raddoppia le linee e i documenti diventano moduli da ufficio anni Settanta. */
.nl-tabella{width:100%;border-collapse:collapse;font:400 var(--nl-t-bs)/var(--nl-t-bs-lh) var(--nl-font-testo)}
.nl-tabella thead th{
  font:500 var(--nl-t-ov)/var(--nl-t-ov-lh) var(--nl-font-mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--nl-text-3);
  text-align:left;padding:0 var(--nl-s2) var(--nl-s2) 0;border-bottom:2px solid var(--nl-text-1);
}
.nl-tabella tbody td{padding:var(--nl-s3) var(--nl-s2) var(--nl-s3) 0;border-bottom:1px solid var(--nl-line)}
.nl-tabella .nl-num{text-align:right;font-family:var(--nl-font-mono);font-variant-numeric:tabular-nums}