/* Nitido · pagine «contratti» nel design editoriale. Un file per gruppo di pagine, caricato dopo nitido.css (vedi _pagine_css.html).
   Solo token di colore di nitido.css, classi con lo scope della pagina.

   Pagine: l'elenco dei contratti (contracts_list.html, .nx-ctr-list), il modulo del contratto (contract_form.html,
   .nx-ctr-form), il registro delle firme (contract_registro.html, .nx-ctr-reg) e il Magazzino (warehouse_dashboard.html, .nx-mag, finestre in .mag-mod). Come Oggi (sezione 14 di
   nitido.css): testata col doppio filetto, titolo in DM Serif, cifre a colonne divise da filetti, sezioni numerate,
   tabelle «da giornale». Scelte di Francesco: 1A «Nuova richiesta» vino pieno; 2A soldi attesi in vino; 3A angoli,
   ombre e margini di oggi (40 px, 16 sul telefono). Classi nuove con il prefisso ctr- (contratti) e mag- (magazzino),
   tutte dentro .nx-ctr; pezzi comuni in _contratti.html. In fondo, il testo del contratto nelle Impostazioni (cls-). */

/* ───────────────────────── 0. Ponte e pezzi comuni ───────────────────────── */
:where(.nx-ctr) :is(p, ul, ol, figure, h1, h2, h3, h4) { margin: 0; }
:where(.nx-ctr) :is(ul, ol) { padding: 0; list-style: none; }
:where(.nx-ctr) a:not(.nx-btn) { color: inherit; text-decoration: none; }
.nx-ctr :is(b, strong) { font-weight: 500; }
.nx-ctr .nx-st { height: auto; line-height: 1.35; align-items: baseline; }
.nx-ctr .nx-st::before { align-self: center; }
.nx-ctr .nx-sh { margin-bottom: 14px; }
.nx-ctr .is-due { color: var(--nx-wine); }

/* testata */
.ctr-mast .nx-mast-r { align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.ctr-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -12px 0;
  font-size: 13px; font-weight: 500; color: var(--nx-ink2); white-space: nowrap; transition: color .15s;
}
.ctr-back .nx-i { width: 14px; height: 14px; }
.ctr-brand {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--nx-r-pill);
  font-size: 12px; font-weight: 500; color: var(--nx-ink); background: var(--nx-wall); box-shadow: inset 0 0 0 1px var(--nx-line);
  white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
.ctr-brand.is-alt { color: var(--nx-ink2); background: var(--nx-grey); box-shadow: none; }

/* titolo, frase, cifre */
.ctr-hero { margin-top: 30px; }
.ctr-hero .nx-dek { max-width: 72ch; }
.nx-ctr .ctr-figs { margin-top: 30px; }
.nx-ctr .nx-fig-v { white-space: nowrap; }
.nx-ctr .nx-fig-v.is-due { color: var(--nx-wine); }
.ctr-note { margin-top: 20px; max-width: 920px; }
.ctr-note .nx-i { flex: none; }

/* stato vuoto da pagina, senza riquadro */
.ctr-empty { margin-top: 30px; padding: 26px 0 28px; border-top: 1px solid var(--nx-rule-strong); border-bottom: 1px solid var(--nx-rule); }
.ctr-empty-t { font: 400 24px/1.2 var(--nx-f-serif); letter-spacing: -.01em; color: var(--nx-ink); }
.ctr-empty-x { margin-top: 8px; max-width: 60ch; font-size: 14px; line-height: 1.5; color: var(--nx-ink2); }
.ctr-empty-a { margin-top: 18px; }

/* ───────────────────────── 1. Elenco dei contratti ───────────────────────── */
.ctr-tbl-wrap { margin-top: var(--nx-gap-sec); }
.ctr-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ctr-tbl thead th {
  padding: 0 12px 10px; vertical-align: bottom; text-align: left; white-space: nowrap;
  font: 600 var(--nx-t-eb)/1.35 var(--nx-f-ui); letter-spacing: var(--nx-eb-track); text-transform: uppercase; color: var(--nx-ink2);
  border-bottom: 1px solid var(--nx-rule-strong);
}
.ctr-tbl :is(th, td):first-child { padding-left: 0; }
.ctr-tbl :is(th, td):last-child { padding-right: 0; }
.ctr-tbl .is-num { text-align: right; }
.ctr-tbl td { padding: 12px; vertical-align: middle; border-bottom: 1px solid var(--nx-rule); }
.ctr-tbl thead .ctr-c-who { padding-left: 64px; }

/* il titolo del gruppo: serif, filetto, quante */
.ctr-grp th { padding: 34px 0 10px; text-align: left; font-weight: 400; border-bottom: 0; }
.ctr-grp-h { display: grid; grid-template-columns: auto minmax(16px, 1fr) auto; align-items: baseline; column-gap: 12px; }
.ctr-grp-t { font: 400 var(--nx-t-sec)/1.1 var(--nx-f-serif); letter-spacing: -.014em; color: var(--nx-ink); white-space: nowrap; }
.ctr-grp-h .nx-sh-r { align-self: center; }
.ctr-grp-h .nx-mt { text-transform: none; letter-spacing: 0; font-weight: 400; }
tbody:first-of-type .ctr-grp th { padding-top: 26px; }

.ctr-row { position: relative; transition: background .15s; }
.ctr-c-m { width: 64px; }
.ctr-c-m .nx-thumb { vertical-align: middle; }
.ctr-c-who { min-width: 0; }
.ctr-name { display: inline-block; font: 400 var(--nx-t-list)/1.2 var(--nx-f-serif); letter-spacing: -.006em; color: var(--nx-ink); overflow-wrap: anywhere; }
.ctr-state { display: block; margin-top: 6px; }
.ctr-sub { display: block; margin-top: 3px; font-size: 12.5px; color: var(--nx-ink2); overflow-wrap: anywhere; }
.ctr-c-date { width: 190px; white-space: nowrap; }
.ctr-d1 { display: block; font-weight: 500; color: var(--nx-ink); }
.ctr-d1.is-none { font-weight: 400; color: var(--nx-ink2); }
.ctr-d2 { display: block; margin-top: 2px; font-size: 12.5px; color: var(--nx-ink2); }
.ctr-d2.is-due { color: var(--nx-wine); font-weight: 500; }
.ctr-c-made { width: 130px; color: var(--nx-ink2); white-space: nowrap; }
.ctr-c-val { width: 130px; white-space: nowrap; }
.ctr-val { font-size: 15px; font-weight: 500; color: var(--nx-ink); }
.ctr-none { font-size: 15px; color: var(--nx-ink2); }
.ctr-c-act { width: 170px; white-space: nowrap; }
.ctr-acts { display: inline-flex; align-items: center; gap: 4px; }
.ctr-acts .nx-btn--sm { min-width: 64px; }
.ctr-pdf { color: var(--nx-ink); }
.ctr-row.is-blocked .ctr-name { color: var(--nx-ink2); }

/* ───────────────────────── 2. Modulo del contratto ───────────────────────── */
.ctr-mast--form, .ctr-mast--form .nx-mast-l { align-items: center; }
.ctr-hero--form { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-top: 26px; }
.ctr-hero-t { min-width: 0; flex: 1 1 420px; }
.nx-ctr-title { margin: 8px 0 0; font: 400 var(--nx-t-hello)/1.02 var(--nx-f-serif); letter-spacing: -.024em; color: var(--nx-ink); text-wrap: balance; overflow-wrap: anywhere; }
.ctr-when { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 12px; font-size: 15.5px; color: var(--nx-ink2); }
.ctr-when b { color: var(--nx-ink); font-weight: 500; }
.ctr-when span { display: inline-flex; align-items: center; gap: 6px; }
.ctr-when .nx-i { width: 15px; height: 15px; }
.ctr-dl { flex: none; }
/* la firma online accanto al PDF: i comandi in riga («Manda da firmare», o il PDF firmato e «Annulla e modifica»),
   sotto i problemi che impediscono di mandare o lo stato delle firme */
.ctr-hero-a { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; min-width: 0; max-width: 100%; }
.ctr-hero-b { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.ctr-firma { display: inline; }
.ctr-firma-problemi { max-width: 56ch; margin: 0; padding-left: 18px; font-size: 13px; color: var(--nx-wine); }
.ctr-firma-avvisi { max-width: 56ch; margin: 0; padding-left: 18px; font-size: 13px; color: var(--nx-ink2); }
.ctr-firma-stato { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 12px; align-items: center; margin: 0; }
.nx-ctr .ctr-sum { margin-top: 28px; }
.ctr-sum .nx-fig-d b { color: var(--nx-ink); }
.ctr-help { display: flex; align-items: flex-start; gap: 8px; max-width: 86ch; margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--nx-ink2); }
.ctr-help .nx-i { flex: none; margin-top: 2px; }

.ctr-board { display: grid; grid-template-columns: minmax(0, 1fr) 312px; column-gap: 56px; align-items: start; margin-top: 44px; }
.ctr-board.is-solo { grid-template-columns: minmax(0, 1fr); max-width: 1120px; }
.ctr-main { min-width: 0; }
.ctr-fs { min-width: 0; margin: 0; padding: 0; border: 0; }
.ctr-blk + .ctr-blk { margin-top: 44px; }
.ctr-blk .nx-sh { margin-bottom: 16px; }
.ctr-grid--4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 20px; }
.ctr-span-2 { grid-column: span 2; }
.ctr-span-4 { grid-column: 1 / -1; }
/* la sezione «Pagamenti» (0021): la cifra e «%»/«€» sulla stessa riga; con 2 quote il secondo acconto si nasconde */
.ctr-quota { display: grid; grid-template-columns: minmax(0, 1fr) 80px; gap: 8px; }
.ctr-scad { margin-top: 8px; }
.ctr-pag [hidden] { display: none; }
.ctr-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
/* l'email della richiesta sopra i campi degli sposi, con «È della sposa» / «È dello sposo» */
.ctr-richiesta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 20px; padding: 12px 14px; border: 1px solid var(--nx-line); border-radius: var(--nx-r-sm); }
.ctr-richiesta-t { margin: 0; font-size: 13.5px; color: var(--nx-ink2); overflow-wrap: anywhere; }
.ctr-richiesta-x { display: flex; flex-wrap: wrap; gap: 8px; }
.ctr-richiesta-x[hidden] { display: none; }
.ctr-person { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ctr-person-t { padding-bottom: 8px; border-bottom: 1px solid var(--nx-rule-strong); }
.ctr-town { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; }
.ctr-via { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; align-items: end; }
.ctr-upper { text-transform: uppercase; }
.ctr-upper::placeholder { text-transform: none; }
.ctr-notes { min-height: 96px; }

/* i comandi: sempre a portata di mano in fondo allo schermo */
.ctr-actions {
  position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px;
  margin-top: 36px; padding: 14px 0; border-top: 1px solid var(--nx-rule); background: var(--nx-wall);
}
.ctr-back-q { margin-right: auto; padding-left: 0; }
.ctr-actions-b { display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: center; gap: 10px; }
.ctr-ro { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--nx-ink2); }

/* a destra: le voci che entrano nel contratto */
.ctr-side { position: sticky; top: calc(var(--nx-top-h) + 24px); min-width: 0; padding-left: 32px; box-shadow: inset 1px 0 0 var(--nx-rule); }
.ctr-voci li { align-items: baseline; }
.ctr-voce { min-width: 0; max-width: 72%; font-weight: 500; color: var(--nx-ink); overflow-wrap: anywhere; }
.ctr-voci .nx-amt { flex: none; }
.nx-kv.ctr-voci li.ctr-voci-tot { margin-top: 2px; padding-top: 12px; border-bottom: 0; border-top: 1px solid var(--nx-rule-strong); }
.ctr-side-x { margin-top: 18px; font-size: 13px; line-height: 1.5; color: var(--nx-ink2); }
.ctr-side-x .nx-ul { margin-left: 4px; }

/* ───────────────────────── 3. Magazzino ───────────────────────── */
.mag-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-top: 30px; }
.mag-hero-t { min-width: 0; flex: 1 1 480px; }
.mag-hero .nx-dek { max-width: 72ch; }
.mag-hero .nx-dek .is-due { font-weight: 500; }
.mag-acts { flex: none; display: flex; gap: 10px; }
.mag-ro { display: inline-flex; align-items: center; gap: 6px; color: var(--nx-ink); }
.mag-sec { margin-top: var(--nx-gap-sec); }

.mag-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.mag-tbl thead th {
  padding: 0 12px 10px; vertical-align: bottom; text-align: left; white-space: nowrap;
  font: 600 var(--nx-t-eb)/1.35 var(--nx-f-ui); letter-spacing: var(--nx-eb-track); text-transform: uppercase; color: var(--nx-ink2);
  border-bottom: 1px solid var(--nx-rule-strong);
}
.mag-tbl td { padding: 14px 12px; vertical-align: middle; border-bottom: 1px solid var(--nx-rule); }
.mag-tbl :is(th, td):first-child { padding-left: 0; }
.mag-tbl :is(th, td):last-child { padding-right: 0; }
.mag-tbl .is-num { text-align: right; white-space: nowrap; }
.mag-row { position: relative; transition: background .15s; }
.mag-name { font: 400 19px/1.2 var(--nx-f-serif); letter-spacing: -.006em; color: var(--nx-ink); overflow-wrap: anywhere; }
.mag-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 4px; font-size: 12.5px; color: var(--nx-ink2); }
.mag-link {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin: -9px 0; font-weight: 500; color: var(--nx-ink);
  background: linear-gradient(var(--nx-line), var(--nx-line)) 0 calc(100% - 8px) / 100% 1px no-repeat;
}
.mag-c-q { width: 170px; }
.mag-c-s { width: 80px; }
.mag-c-m { width: 110px; }
.mag-c-st { width: 140px; white-space: nowrap; }
.mag-c-a { width: 96px; }
.mag-k { display: none; }

/* la scorta: − numero + */
.mag-qty { display: inline-flex; align-items: center; gap: 10px; }
.mag-step-f { display: inline-flex; margin: 0; }
.mag-step {
  display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  color: var(--nx-ink); background: var(--nx-wall); box-shadow: inset 0 0 0 1px var(--nx-line); cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.mag-step .nx-i { width: 14px; height: 14px; stroke-width: 1.8; }
.mag-step:focus-visible { outline: 0; box-shadow: inset 0 0 0 1.5px var(--nx-ink); }
.mag-step:active { transform: scale(.94); }
.mag-n { display: inline-flex; align-items: baseline; gap: 4px; min-width: 44px; justify-content: center; font: 400 26px/1 var(--nx-f-serif); letter-spacing: -.02em; color: var(--nx-ink); }
.mag-n small { font: 500 12px var(--nx-f-ui); letter-spacing: 0; color: var(--nx-ink2); }
.mag-n.is-low { color: var(--nx-wine); }

/* modifica ed elimina: icone a 36 px (44 sul telefono) */
.mag-acts-r { display: inline-flex; align-items: center; gap: 2px; }
.mag-del-f { display: inline-flex; margin: 0; }
.mag-ib {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--nx-r);
  color: var(--nx-ink); background: none; cursor: pointer; transition: background .15s, color .15s;
}
.mag-ib .nx-i { width: 16px; height: 16px; }
.mag-ib--quiet { color: var(--nx-ink2); }
.mag-ib:focus-visible { outline: 0; box-shadow: inset 0 0 0 1.5px var(--nx-ink); }

.mag-empty-row td { padding: 26px 0 28px; }
.mag-empty-t { font: 400 22px/1.2 var(--nx-f-serif); letter-spacing: -.01em; color: var(--nx-ink); }
.mag-empty-x { margin-top: 8px; max-width: 60ch; font-size: 14px; line-height: 1.5; color: var(--nx-ink2); }

/* finestre: nuovo prodotto e modifica. Il piede scritto per esteso: --bs-modal-padding in nitido.css ha due
   valori e il calcolo di Bootstrap darebbe padding 0 (come nella scheda della coppia) */
.mag-mod .modal-footer { gap: 8px; padding: 14px 24px 20px; }
.mag-mod .modal-footer > * { margin: 0; }
.mag-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.mag-span-2 { grid-column: 1 / -1; }
.mag-fgrid .nx-hint { margin: -8px 0 0; }

/* ───────────────────────── larghezze ───────────────────────── */
@media (max-width: 1180px) and (min-width: 768px) {
  .ctr-board { grid-template-columns: minmax(0, 1fr); }
  .ctr-side { position: static; margin-top: 48px; padding: 20px 0 0; box-shadow: inset 0 1px 0 var(--nx-rule); max-width: 560px; }
  .ctr-c-made { display: none; }
}
@media (max-width: 1024px) and (min-width: 768px) {
  .ctr-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctr-pair { column-gap: 28px; }
}
@media (max-width: 960px) and (min-width: 768px) {
  .ctr-figs.nx-figs--3 .nx-fig { padding-left: 16px; }
  .ctr-figs.nx-figs--3 .nx-fig:first-child { padding-left: 0; }
  .ctr-pair { grid-template-columns: minmax(0, 1fr); }
}

/* elenco dei contratti sotto i 1000 px: una scheda per contratto (la tabella non ci sta accanto alla barra) */
@media (max-width: 1000px) {
  .ctr-tbl, .ctr-tbl tbody, .ctr-grp, .ctr-grp th { display: block; width: 100%; }
  .ctr-tbl thead { display: none; }
  .ctr-grp th { padding: 30px 0 6px; }
  .ctr-row {
    display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "m who val" "m date act";
    column-gap: 16px; row-gap: 6px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--nx-rule);
  }
  .ctr-tbl .ctr-row > td { display: block; width: auto; padding: 0; border: 0; }
  .ctr-c-m { grid-area: m; align-self: start; }
  .ctr-c-who { grid-area: who; }
  .ctr-c-val { grid-area: val; text-align: right; }
  .ctr-c-date { grid-area: date; white-space: normal; }
  .ctr-c-date .ctr-d1, .ctr-c-date .ctr-d2 { display: inline; margin: 0; }
  .ctr-c-date .ctr-d2::before { content: " · "; color: var(--nx-ink2); }
  .ctr-tbl .ctr-row > .ctr-c-made { display: none; }
  .ctr-c-act { grid-area: act; }
}

/* Magazzino sotto i 1100 px: un prodotto per scheda, con soglia, costo e vendita etichettati */
@media (max-width: 1100px) {
  .mag-tbl, .mag-tbl tbody { display: block; width: 100%; }
  .mag-tbl thead { display: none; }
  .mag-row {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    grid-template-areas: "p p p a" "q q q st" "s cost sale .";
    column-gap: 16px; row-gap: 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--nx-rule);
  }
  .mag-tbl .mag-row > td { display: block; width: auto; padding: 0; border: 0; text-align: left; }
  .mag-row > .mag-c-p { grid-area: p; }
  .mag-row > .mag-c-q { grid-area: q; }
  .mag-row > .mag-c-st { grid-area: st; justify-self: end; }
  .mag-row > .mag-c-s { grid-area: s; }
  .mag-row > .mag-c-cost { grid-area: cost; }
  .mag-row > .mag-c-sale { grid-area: sale; }
  .mag-row > .mag-c-a { grid-area: a; align-self: start; justify-self: end; }
  .mag-tbl .mag-row > :is(.mag-c-s, .mag-c-m) { padding-top: 10px; border-top: 1px solid var(--nx-rule); font-size: 13.5px; font-weight: 500; }
  .mag-k { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--nx-ink2); }
  .mag-empty-row, .mag-empty-row td { display: block; }
}

/* ───────────────────────── 3. Registro delle firme (contract_registro.html) ───────────────────────── */
.ctr-reg-v { margin-top: var(--nx-gap-sec); }
.ctr-reg-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 32px; }
.ctr-reg-facts { flex: 1 1 520px; min-width: 0; }
.ctr-reg-state { margin-bottom: 10px; }
.ctr-reg-kv li { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 2px 16px; padding: 7px 0; font-size: 13.5px; border-bottom: 1px solid var(--nx-rule); }
.ctr-reg-kv .ctr-reg-k { color: var(--nx-ink2); }
.ctr-reg-hash { justify-self: start; max-width: 100%; font: 400 12px/1.5 var(--nx-f-ui); letter-spacing: .02em; color: var(--nx-ink); overflow-wrap: anywhere; }
.ctr-reg-pdf { display: flex; flex-wrap: wrap; gap: 8px; }
.ctr-reg-tbl { margin-top: 26px; }
.ctr-reg-tbl .ctr-reg-k { display: none; }
.ctr-reg-c-when { white-space: nowrap; }
.ctr-reg-c-what { font-weight: 500; color: var(--nx-ink); }
.ctr-reg-c-who, .ctr-reg-c-mail { white-space: nowrap; }
.ctr-reg-c-ua { max-width: 320px; font-size: 12.5px; color: var(--nx-ink2); overflow-wrap: anywhere; }

/* telefono: un campo per riga, bottoni da 44 px, nessuno scorrimento di lato */
@media (max-width: 767px) {
  /* la testata dice sezione e pagina anche qui (in Oggi il telefono nasconde la settimana) */
  .ctr-mast .nx-mast-l > i { display: block; }
  .ctr-mast .nx-mast-l > p + i + p { display: block; }
  .ctr-mast { flex-wrap: wrap; row-gap: 6px; }
  .ctr-hero, .mag-hero { margin-top: 18px; }
  .nx-ctr .ctr-figs { margin-top: 22px; }
  .nx-ctr .ctr-figs.nx-figs--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-ctr .ctr-figs.nx-figs--3 .nx-fig:nth-child(3) { grid-column: 1 / -1; padding-left: 0; box-shadow: none; border-top: 1px solid var(--nx-rule); }
  .nx-ctr .nx-sh-x .nx-mt { white-space: normal; text-align: right; }
  .nx-ctr .ctr-figs .nx-eb { white-space: normal; }

  /* elenco dei contratti: i comandi sotto, larghi */
  .ctr-tbl-wrap { margin-top: 32px; }
  .ctr-grp th { padding: 26px 0 6px; }
  .ctr-grp-h { grid-template-columns: auto minmax(12px, 1fr); }
  .ctr-grp-h .nx-mt { grid-column: 1 / -1; margin-top: 4px; white-space: normal; }
  .ctr-row { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "m who val" "m date date" "act act act"; column-gap: 12px; padding: 12px 0; }
  .ctr-c-m .nx-thumb { width: 40px; height: 40px; }
  .ctr-c-m .nx-thumb-m { font-size: 14px; }
  .ctr-acts { display: flex; gap: 8px; margin-top: 4px; }
  .ctr-acts .nx-btn { flex: 1 1 0; height: 44px; font-size: 14px; }
  .ctr-name { font-size: 18px; }

  /* modulo del contratto */
  .nx-ctr-title { font-size: 34px; }
  .ctr-when { font-size: 14.5px; gap: 2px 12px; }
  .ctr-hero--form { align-items: stretch; }
  .ctr-dl { width: 100%; height: 44px; }
  /* la firma online: comandi uno sotto l'altro, larghi come «Scarica il PDF»; stato e problemi a sinistra */
  .ctr-hero-a { align-items: stretch; }
  .ctr-hero-b { justify-content: flex-start; }
  .ctr-hero-b > * { flex: 1 1 100%; }
  .ctr-hero-b .nx-btn { width: 100%; height: 44px; }
  .ctr-firma-stato { justify-content: flex-start; }
  .ctr-board { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .ctr-blk + .ctr-blk { margin-top: 36px; }
  .ctr-grid--4, .ctr-pair { grid-template-columns: minmax(0, 1fr); }
  .ctr-span-2, .ctr-span-4 { grid-column: 1 / -1; }
  .nx-ctr-form .nx-sh { grid-template-columns: auto auto minmax(16px, 1fr); }
  .nx-ctr-form .nx-sh-x { display: none; }
  /* sopra la barra in basso del telefono (66 px): «Salva» sempre a portata di pollice */
  .ctr-actions {
    bottom: calc(66px + env(safe-area-inset-bottom)); flex-wrap: nowrap; gap: 8px;
    margin: 28px -16px 0; padding: 10px 16px; border-top: 0; box-shadow: 0 -1px 0 var(--nx-rule);
  }
  .ctr-back-q { display: none; }
  .ctr-actions-b { flex: 1 1 auto; flex-wrap: nowrap; gap: 8px; }
  .ctr-actions-b .nx-btn { flex: 1 1 0; min-width: 0; height: 46px; padding: 0 10px; font-size: 14px; }
  .ctr-actions-b .nx-btn span { overflow: hidden; text-overflow: ellipsis; }
  .ctr-side { position: static; margin-top: 40px; padding: 0; box-shadow: none; }

  /* registro delle firme: ogni passo è un blocco, con l'etichetta davanti a ogni dato */
  .ctr-reg-v { margin-top: 40px; }
  .ctr-reg-kv li { grid-template-columns: minmax(0, 1fr); }
  .ctr-reg-pdf { width: 100%; }
  .ctr-reg-pdf .nx-btn { flex: 1 1 100%; height: 44px; }
  .ctr-reg-tbl thead { display: none; }
  .ctr-reg-tbl, .ctr-reg-tbl tbody, .ctr-reg-tbl tr, .ctr-reg-tbl td { display: block; }
  .ctr-reg-tbl tr { padding: 12px 0; border-bottom: 1px solid var(--nx-rule); }
  .ctr-reg-tbl td { padding: 2px 0; border-bottom: 0; }
  .ctr-reg-tbl .ctr-reg-k { display: inline; margin-right: 8px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--nx-ink2); }
  .ctr-reg-c-when, .ctr-reg-c-who, .ctr-reg-c-mail { white-space: normal; overflow-wrap: anywhere; }
  .ctr-reg-c-ua { max-width: none; }

  /* Magazzino: la scorta e lo stato su una riga, i comandi in fondo */
  .mag-acts { width: 100%; }
  .mag-acts .nx-btn { flex: 1 1 auto; height: 44px; font-size: 14px; }
  .mag-row { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "p p p" "q q st" "s cost sale" "a a a"; column-gap: 12px; }
  .mag-row > .mag-c-a { justify-self: start; }
  .mag-step { width: 44px; height: 44px; }
  .mag-n { font-size: 28px; }
  .mag-acts-r { display: flex; gap: 8px; }
  .mag-ib { width: 44px; height: 44px; box-shadow: inset 0 0 0 1px var(--nx-line); }
  .mag-fgrid { grid-template-columns: minmax(0, 1fr); }
  .mag-fgrid .nx-field { grid-column: 1 / -1; }
}

/* passaggio del mouse (solo puntatori veri) */
@media (hover: hover) and (pointer: fine) {
  .ctr-back:hover { color: var(--nx-ink); }
  .ctr-row:hover, .mag-row:hover { background: var(--nx-hover); }
  .ctr-name:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--nx-line); }
  .mag-step:hover { background: var(--nx-hover); box-shadow: inset 0 0 0 1px var(--nx-ink2); }
  .mag-ib:hover { background: var(--nx-hover); }
  .mag-ib--quiet:hover { color: var(--nx-wine); }
  .mag-link:hover { background-image: linear-gradient(var(--nx-ink), var(--nx-ink)); }
}

/* Impostazioni › Contratto (settings_contratto.html, 0020). Prefisso cls-: ct- è già delle pagine dei contatti */
.cls-tuo { margin-bottom: 18px; }
.cls-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--nx-rule-strong); }
.cls-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px 18px; padding: 18px 0; border-bottom: 1px solid var(--nx-rule); }
.cls-row > .nx-field:not(.cls-pos), .cls-row > .nx-check, .cls-row > .cls-pay { grid-column: 2; }
.cls-row--pay .cls-pay { margin: 0; align-self: center; font-size: 14px; color: var(--nx-ink2); }
.cls-row--new { background: var(--nx-grey); border-radius: var(--nx-r-md); padding: 18px; margin-top: 12px; border: 0; }
.cls-row--new .nx-input { background: var(--nx-wall); box-shadow: inset 0 0 0 1px var(--nx-line); }  /* i campi sul grigio restano visibili */
.cls-row--new .nx-input:focus { box-shadow: inset 0 0 0 1.5px var(--nx-ink); }
.cls-togli { color: var(--nx-ink2); }
/* «Uso delle immagini per promuovere lo studio» (0052): due scelte una sotto l'altra, tonde */
.cls-immagini .nx-check { display: flex; margin-bottom: 12px; }
.cls-immagini .nx-check input[type="radio"] { border-radius: 50%; }
.cls-immagini .nx-check small { display: inline-block; margin-top: 3px; }
@media (max-width: 720px) { .cls-row { grid-template-columns: 1fr; } .cls-row > * { grid-column: 1 !important; } }

/* ───────────────────────── Profondità (palette Grafite): Contratti e Magazzino ───────────────────────── */
/* il modulo del contratto e il registro delle firme: ogni sezione è un foglio, col suo titolo dentro */
.nx-crm .ctr-blk { padding: var(--nx-sheet-pad); background: var(--nx-sheet); border-radius: var(--nx-r-sheet); box-shadow: var(--nx-sheet-ring); }
.nx-crm .ctr-blk + .ctr-blk { margin-top: var(--nx-gap-sheet); }
.nx-crm .ctr-reg-v { margin-top: var(--nx-gap-sheet); padding: var(--nx-sheet-pad); background: var(--nx-sheet); border-radius: var(--nx-r-sheet); box-shadow: var(--nx-sheet-ring); }
/* le tabelle (contratti, magazzino): un foglio, le intestazioni senza il filetto nero, l'ultima riga senza filetto */
.nx-crm .ctr-tbl-wrap, .nx-crm .mag-tbl-wrap { margin-top: 24px; padding: 6px var(--nx-sheet-padx) 12px; background: var(--nx-sheet); border-radius: var(--nx-r-sheet); box-shadow: var(--nx-sheet-ring); }
.nx-crm .mag-sec { margin-top: 28px; }
.nx-crm .mag-sec .mag-tbl-wrap { margin-top: 8px; }
.nx-crm .ctr-tbl thead th, .nx-crm .mag-tbl thead th { padding-top: 14px; border-bottom-color: var(--nx-rule); }
.nx-crm .ctr-tbl tbody tr:last-child > td, .nx-crm .mag-tbl tbody tr:last-child > td { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  .nx-crm .ctr-tbl .ctr-row:hover > td, .nx-crm .mag-tbl .mag-row:hover > td { background: var(--nx-hover); }
}

/* Impostazioni › Contratto: le clausole e l'incolla-tutto stanno in un foglio solo */
.nx-crm .cls-imp > form { margin-top: var(--nx-gap-sheet); padding: var(--nx-sheet-pad); background: var(--nx-sheet); border-radius: var(--nx-r-sheet); box-shadow: var(--nx-sheet-ring); }
.nx-crm .cls-list { border-top: 0; }
.nx-crm .cls-row { border-bottom-color: var(--nx-rule); }
.nx-crm .cls-list > .cls-row:last-child { border-bottom: 0; }
.nx-crm .ctr-board { column-gap: var(--nx-gap-col); margin-top: 28px; }
.nx-crm .ctr-side { padding: var(--nx-sheet-pad); background: var(--nx-sheet); border-radius: var(--nx-r-sheet); box-shadow: var(--nx-sheet-ring); }
/* azioni secondarie tranquille: il PDF si accende sulla riga; il magazzino fa lo stesso con matita e cestino */
@media (hover: hover) and (pointer: fine) {
  .nx-crm .ctr-row .ctr-pdf { opacity: .5; transition: opacity .15s; }
  .nx-crm .ctr-row:hover .ctr-pdf, .nx-crm .ctr-row:focus-within .ctr-pdf { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) {
  .nx-crm .mag-row .mag-ib { opacity: .5; transition: opacity .15s; }
  .nx-crm .mag-row:hover .mag-ib, .nx-crm .mag-row:focus-within .mag-ib { opacity: 1; }
}
/* Magazzino: «Scorta ok» è il ripetuto e scende di tono; quello che manca (scorta bassa o esaurito) ha il segnalibro vino */
.nx-crm .mag-row:not(.is-low) .nx-st--paid { color: var(--nx-ink2); }
.nx-crm .mag-row.is-low > td:first-child { box-shadow: inset 3px 0 0 var(--nx-wine); }