/* Dettaglio del rendiconto (docs/AnalisiNoteSpeseCreazioneGrafica.md sez. 3.6, prototipo docs/PropostaNoteSpeseDettaglio.html).
   Foglio del rendiconto fermo a sinistra (componente ExpenseDetailSheet) e tabella delle righe a destra (la SmartTable condivisa, mai ritoccata);
   colonna Approvato con i suoi stati, pulsanti della colonna azioni, stato vuoto. Componenti e ramo UseV2 di ExpenseNotesBlazor.
   Ogni regola sta sotto body.nh-v2: senza la classe nh-v2 il foglio e' inerte.
   Classi tutte con prefisso exd-: nessuna regola di site.css (.expense-*), delle SmartTable o di expense-create-v2.css (exv2-) viene toccata.
   Token: quelli del sito (tema azienda: --primary, --primary-soft, --primary-ink, --primary-rgb, --border, --border-strong, --surface, --text, --muted,
   --radius, e gli stati --success, --success-soft, --warning-soft, --danger, --danger-soft, --test-environment-red-strong). Locali a .exd-page solo
   le tinte di testo piu' scure del sito (grigio, verde, ambra e rosso di testo, per il contrasto sui fondi tenui), l'ambra pieno (il --warning del
   sito su bianco non arriva a 3:1 come bordo) e il grigio chiaro dei tratteggi, ricavato da --muted.
   Lo stato di un importo non e' mai solo cromatico: bordo tratteggiato finche' da decidere, contrassegno a cerchio (vuoto = rifiutato, a meta' = in
   parte, pieno = per intero, a righe oblique = oltre il richiesto) e testo nascosto per i lettori di schermo.
   Il sito web non si usa da telefono: nessuna @media per telefono. Per tornare indietro: togliere il <link> e la proprieta' ExpenseDetailV2CssHref
   in App.razor, oppure git revert; tag di ritorno pre-spesa-creazione. */

/* ================= token e scala continua con l'altezza dello schermo ================= */
/* Come Nuova spesa: le misure crescono in modo continuo con l'altezza, senza @media a gradini sull'altezza, con due rampe, --exd-r1 da 768 a 888px (veloce) e --exd-r2 da 888 a 1440px
   (lenta); sotto i 768px --exd-lo le comprime. Ogni misura e' "base + --exd-r1 * a + --exd-r2 * b" (base a 768, valore a 888, a 1440).
   Restano due breakpoint DESKTOP sulla larghezza (min-width 1900px e max-width 1320px: aria tra le colonne e margini del foglio); nessuno e' per telefono. */
body.nh-v2 .exd-page {
  --exd-slate: #475569;
  --exd-ink: #334155;
  --exd-faint: color-mix(in srgb, var(--muted) 70%, var(--surface));                                      /* tratteggi e puntini guida */
  --exd-amber: #d97706;
  --exd-amber-ink: #8a4a05;
  --exd-ok-ink: #047857;
  --exd-danger-ink: var(--test-environment-red-strong);
  --exd-ease: cubic-bezier(.16, 1, .3, 1);
  --exd-shadow-paper: drop-shadow(0 1px 1px rgba(15, 23, 42, .1)) drop-shadow(0 14px 16px rgba(30, 58, 100, .2));

  --exd-r1: clamp(0px, calc(100dvh - 768px), 120px);
  --exd-r2: clamp(0px, calc(100dvh - 888px), 552px);
  --exd-lo: clamp(0px, calc(768px - 100dvh), 200px);
  --exd-st: calc(22px + var(--exd-r1) * .0167 + var(--exd-r2) * .0054);                                 /* titolo del foglio 22 / 24 / 27 */
  --exd-sfs: calc(14px + var(--exd-r1) * .0083 + var(--exd-r2) * .0027);                                /* testo righe e piede 14 / 15 / 16,5 */
  --exd-ssm: calc(12.5px + var(--exd-r1) * .0083 + var(--exd-r2) * .0018);                              /* testo secondario 12,5 / 13,5 / 14,5 */
  --exd-tot: calc(18px + var(--exd-r1) * .0125 + var(--exd-r2) * .0027);                                /* Totale 18 / 19,5 / 21: sempre minore del titolo */
  --exd-shp: calc(14px - var(--exd-lo) * .04 + var(--exd-r1) * .0083 + var(--exd-r2) * .0072);          /* aria verticale della testata 14 / 15 / 19 */
  --exd-shx: calc(18px + var(--exd-r1) * .0167 + var(--exd-r2) * .0109);                                /* aria laterale testata e piede 18 / 20 / 26 */
  --exd-cmh: calc(38px - var(--exd-lo) * .03 + var(--exd-r1) * .0417 + var(--exd-r2) * .0254);          /* riga della composizione 38 / 43 / 57 */
  --exd-gap: calc(6px + var(--exd-r1) * .0083 + var(--exd-r2) * .0145);                                 /* aria tra le voci del piede 6 / 7 / 14 */
  --exd-bh: calc(38px + var(--exd-r1) * .0333 + var(--exd-r2) * .0145 - var(--exd-lo) * .03);           /* pulsanti 38 / 42 / 50 */
  --exd-bfs: calc(14px + var(--exd-r1) * .0083 + var(--exd-r2) * .0027);                                /* testo dei pulsanti 14 / 15 / 16,5 */
  position: relative;
  /* Non si stira sui monitor grandi: titolo, foglio e tabella restano in una colonna di 1760px, centrata. */
  max-width: 1760px;
  margin: 0 auto;
}

body.nh-v2 .exd-page :focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ================= barra azioni ed esiti ================= */
body.nh-v2 .exd-page .exd-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--exd-bh);
  margin-top: calc(14px + var(--exd-r1) * .0167);
}

body.nh-v2 .exd-page .exd-back.btn {
  flex: none;
  width: var(--exd-bh);
  height: var(--exd-bh);
  min-width: 0;
  padding: 0;
}

/* L'esito sta nella barra, in uno spazio che c'e' gia' (una riga se il testo ci sta): niente striscia in cima che spinge giu' il foglio e la tabella. */
body.nh-v2 .exd-page .exd-msg {
  flex: 1 1 0;
  min-width: 0;
  max-width: 720px;
  display: flex;
}

body.nh-v2 .exd-page .exd-msg:not(:has(*)) {
  display: none;
}

body.nh-v2 .exd-page .exd-msg .status-strip {
  flex: 1;
  min-width: 0;
  min-height: var(--exd-bh);
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  animation: exd-msgin .22s var(--exd-ease);
}

body.nh-v2 .exd-page .exd-acts {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

body.nh-v2 .exd-page .exd-acts .btn {
  height: var(--exd-bh);
  font-size: var(--exd-bfs);
}

/* ================= foglio e tabella ================= */
body.nh-v2 .exd-page .exd-cols {
  display: grid;
  grid-template-columns: clamp(312px, 25vw, 460px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: calc(14px + var(--exd-r1) * .0167);
}

body.nh-v2 .exd-page .exd-tablecol {
  min-width: 0;
}

body.nh-v2 .exd-page .exd-foot {
  margin-top: 16px;
}

body.nh-v2 .exd-page .exd-foot .modal-form-actions {
  display: flex;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  border-top: 0;
  background: none;
  box-shadow: none;
}

body.nh-v2 .exd-page .exd-foot .modal-form-actions .btn {
  height: var(--exd-bh);
  font-size: var(--exd-bfs);
}

/* ================= carta: il foglio del rendiconto ================= */
/* Fermo mentre la tabella scorre; se non ci sta nell'altezza dello schermo scorre solo la composizione per tipo e il piede con Approva e Rifiuta
   restano in vista. Misure sotto la barra del sito (--topbar-height). */
body.nh-v2 .exd-page .exd-sheet {
  position: sticky;
  top: calc(var(--topbar-height, 72px) + 12px);
  display: flex;
  min-width: 0;
  max-height: calc(100dvh - var(--topbar-height, 72px) - 24px);
}

body.nh-v2 .exd-page .exd-pwrap {
  flex: 1;
  display: flex;
  min-width: 0;
  min-height: 0;
  filter: var(--exd-shadow-paper);
}

/* Bordi a zig-zag in alto e in basso: la maschera ritaglia anche l'ombra, per questo l'ombra sta sul contenitore (filter) e non sulla carta. */
body.nh-v2 .exd-page .exd-paper {
  --z: 7px;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 0 0 calc(var(--z) + 12px);
  background: var(--surface);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--z) * 2) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--z) * 2) 51% repeat-x;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--z) * 2) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--z) * 2) 51% repeat-x;
}

/* Testata a tinta piena del tema: e' il primo blocco di colore dopo il titolo della pagina. */
body.nh-v2 .exd-page .exd-sh-head {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  padding: calc(var(--z) + var(--exd-shp)) var(--exd-shx) var(--exd-shp);
  background: var(--primary);
  color: #fff;
}

body.nh-v2 .exd-page .exd-sh-t {
  min-width: 0;
  margin: 0;
  color: #fff;
  font-size: var(--exd-st);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* Utente e periodo su una riga sola (a capo solo se il nome e' lungo). */
body.nh-v2 .exd-page .exd-sh-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  color: #fff;
  line-height: 1.3;
}

body.nh-v2 .exd-page .exd-sh-u {
  min-width: 0;
  font-size: calc(var(--exd-ssm) + 1.5px);
  font-weight: 600;
  overflow-wrap: anywhere;
}

body.nh-v2 .exd-page .exd-sh-p {
  font-size: calc(var(--exd-ssm) + .5px);
  font-variant-numeric: tabular-nums;
}

/* La pillola e' bianca con il testo del colore dello stato, come in Nuova spesa: Rifiutata resta rossa, un esito negativo non si legge come il tema. */
body.nh-v2 .exd-page .exd-sh-head .status-pill.exd-sh-pill {
  border-color: transparent;
  background: var(--surface);
  color: var(--primary-ink);
  font-size: calc(var(--exd-ssm) - .5px);
  min-height: calc(26px + (var(--exd-ssm) - 12.5px) * 2.08);
}

body.nh-v2 .exd-page .exd-sh-head .status-pill.is-submitted {
  color: var(--exd-amber-ink);
}

body.nh-v2 .exd-page .exd-sh-head .status-pill.is-approved {
  color: var(--exd-ok-ink);
}

body.nh-v2 .exd-page .exd-sh-head .status-pill.is-rejected {
  color: var(--exd-danger-ink);
}

/* Composizione per tipo: tick nel colore del tipo, nome, numero di spese, puntini guida, importo. */
body.nh-v2 .exd-page .exd-cms {
  flex: 0 1 auto;
  min-height: 0;
  margin: 0;
  padding: 6px 12px 0;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
}

body.nh-v2 .exd-page .exd-cm {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: var(--exd-cmh);
  padding: 3px 6px 3px 8px;
}

body.nh-v2 .exd-page .exd-cm-tk {
  flex: none;
  align-self: stretch;
  width: 3px;
  min-height: calc(var(--exd-cmh) - 10px);
  margin: 2px 0;
  border-radius: 999px;
  background: var(--c, var(--border-strong));
}

body.nh-v2 .exd-page .exd-cm b {
  min-width: 0;
  font-size: var(--exd-sfs);
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

body.nh-v2 .exd-page .exd-cm small {
  flex: none;
  color: var(--exd-slate);
  font-size: var(--exd-ssm);
  white-space: nowrap;
}

body.nh-v2 .exd-page .exd-cm-d,
body.nh-v2 .exd-page .exd-ld-d {
  flex: 1;
  min-width: 14px;
  border-bottom: 2px dotted var(--exd-faint);
}

body.nh-v2 .exd-page .exd-cm-d {
  transform: translateY(2px);
}

body.nh-v2 .exd-page .exd-ld-d {
  transform: translateY(-3px);
}

body.nh-v2 .exd-page .exd-cm-v {
  flex: none;
  font-size: var(--exd-sfs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Rendiconto senza spese: stessa struttura con barre tratteggiate, nessuna frase. */
body.nh-v2 .exd-page .exd-cm.is-ghost .exd-cm-tk {
  background: var(--border-strong);
}

body.nh-v2 .exd-page .exd-dsh {
  display: block;
  height: 9px;
  border: 1.5px dashed var(--exd-faint);
  border-radius: 999px;
}

/* Piede come uno scontrino: voci con puntini guida; il Totale non e' mai il numero piu' grande della pagina. */
body.nh-v2 .exd-page .exd-sf {
  flex: none;
  display: grid;
  gap: var(--exd-gap);
  margin: 6px var(--exd-shx) 0;
  padding-top: 10px;
  border-top: 2px dashed var(--border-strong);
}

body.nh-v2 .exd-page .exd-ld {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: var(--exd-sfs);
}

body.nh-v2 .exd-page .exd-ld-l {
  color: var(--exd-ink);
  font-weight: 500;
}

body.nh-v2 .exd-page .exd-ld-v {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-radius: var(--radius);
}

/* Approvato: verde, neutro finche' nessuna riga e' decisa, rosso se le decise valgono zero. */
body.nh-v2 .exd-page .exd-ld.is-approved .exd-ld-l,
body.nh-v2 .exd-page .exd-ld.is-approved .exd-ld-v {
  color: var(--exd-ok-ink);
}

body.nh-v2 .exd-page .exd-ld.is-approved .exd-ld-l {
  font-weight: 650;
}

body.nh-v2 .exd-page .exd-ld.is-approved .exd-ld-v {
  font-weight: 700;
}

body.nh-v2 .exd-page .exd-ld.is-approved.is-none .exd-ld-l,
body.nh-v2 .exd-page .exd-ld.is-approved.is-none .exd-ld-v {
  color: var(--exd-ink);
}

body.nh-v2 .exd-page .exd-ld.is-approved.is-zero .exd-ld-l,
body.nh-v2 .exd-page .exd-ld.is-approved.is-zero .exd-ld-v {
  color: var(--exd-danger-ink);
}

body.nh-v2 .exd-page .exd-ld.is-total {
  margin-top: 2px;
}

body.nh-v2 .exd-page .exd-ld.is-total .exd-ld-l {
  color: var(--text);
  font-size: calc(var(--exd-sfs) + 1px);
  font-weight: 800;
}

body.nh-v2 .exd-page .exd-ld.is-total .exd-ld-v {
  font-size: var(--exd-tot);
  font-weight: 800;
  letter-spacing: -.01em;
}

body.nh-v2 .exd-page .exd-ld.is-total .exd-ld-v small {
  margin-left: 3px;
  color: var(--exd-slate);
  font-size: var(--exd-sfs);
  font-weight: 600;
}

/* Il valore che cambia lo dice con un breve alone verde. */
body.nh-v2 .exd-page .exd-ld-v.is-bump {
  animation: exd-bump .7s var(--exd-ease);
}

/* Avanzamento delle decisioni: bordo tratteggiato ambra finche' restano righe da decidere (lo stesso segnale dei campi importo), pieno e verde a fine corsa. */
body.nh-v2 .exd-page .exd-dchip {
  align-self: center;
  padding: 1px 8px;
  border: 1px dashed color-mix(in srgb, var(--exd-amber) 80%, transparent);
  border-radius: 999px;
  background: var(--warning-soft);
  color: var(--exd-amber-ink);
  font-size: calc(var(--exd-ssm) - 1px);
  font-weight: 700;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  animation: exd-chip-in .25s var(--exd-ease);
}

body.nh-v2 .exd-page .exd-dchip.is-done {
  border-style: solid;
  border-color: color-mix(in srgb, var(--success) 50%, transparent);
  background: var(--success-soft);
  color: var(--exd-ok-ink);
}

/* Approva e Rifiuta: nel piede, sotto i totali che cambiano. Senza spese restano al loro posto ma non disponibili (aria-disabled). */
body.nh-v2 .exd-page .exd-sa {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: calc(10px + var(--exd-r1) * .0167) var(--exd-shx) 0;
}

body.nh-v2 .exd-page .exd-sa .btn {
  width: 100%;
  min-width: 0;
  height: var(--exd-bh);
  padding: 0 10px;
  font-size: var(--exd-bfs);
  font-weight: 750;
}

/* Rifiuta e' un contorno di pericolo (non un pieno): resta meno evidente di Approva, l'azione primaria. */
body.nh-v2 .exd-page .exd-sa .btn.exd-reject {
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--surface)) !important;
  background: var(--surface) !important;
  color: var(--exd-danger-ink) !important;
}

body.nh-v2 .exd-page .exd-sa .btn.exd-reject:hover:not(:disabled) {
  border-color: var(--danger) !important;
  background: var(--danger-soft) !important;
}

body.nh-v2 .exd-page .exd-sa .btn.exd-act[aria-disabled="true"],
body.nh-v2 .exd-page .exd-sa .btn.exd-act[aria-disabled="true"]:hover {
  border: 1px solid var(--border-strong) !important;
  background: var(--border) !important;
  color: var(--exd-slate) !important;
  cursor: not-allowed;
}

/* ================= tabella: stato vuoto, colonna Approvato, colonna azioni ================= */
/* Stato vuoto: la riga fantasma tratteggiata (la cornice la disegna la tabella) E' l'azione "Nuova spesa".
   E' un BlazorActionButton con contenuto proprio (come la riga fantasma della modale Giornata), non un button nativo: fondo e colore passano da due
   variabili che lo stato ridefinisce (--exd-g-bg, --exd-g-fg). */
body.nh-v2 .exd-page .exd-empty-ghost {
  --exd-g-bg: transparent;
  --exd-g-fg: var(--primary-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  margin: 0;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--radius);
  background: var(--exd-g-bg);
  color: var(--exd-g-fg);
  font: inherit;
  font-weight: 650;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  opacity: 1;
  cursor: pointer;
  transition: background-color .12s;
}

body.nh-v2 .exd-page .exd-empty-ghost:hover:not(:disabled) {
  --exd-g-bg: var(--primary-soft);
}

body.nh-v2 .exd-page .exd-empty-ghost:disabled {
  cursor: default;
  opacity: .6;
}

/* Nel BlazorActionButton il tema DevExpress e quello dei .btn ridisegnano fondo, colore e ombra al passaggio, in focus e da disabilitato (.dxbl-btn:not(...):hover,
   .btn-outline-secondary:focus, .btn:disabled), con !important o con specificita' piu' alta di una classe sola: qui si dicono una volta, con !important,
   dalle due variabili sopra. Il contorno del fuoco resta quello di .exd-page :focus-visible, per questo l'ombra del .btn si toglie. */
body.nh-v2 .exd-page .btn.exd-empty-ghost {
  background: var(--exd-g-bg) !important;
  color: var(--exd-g-fg) !important;
  box-shadow: none !important;
}

/* Carta aziendale: testo normale, mai un campo ne' un alone. */
body.nh-v2 .exd-page .exd-ap-card {
  color: var(--exd-ink);
  font-weight: 600;
}

/* Importo gia' deciso (sola lettura): alone verde se per intero, ambra se in parte o oltre il richiesto, rosso se zero, neutro se ancora da decidere.
   Il contrassegno a cerchio (vedi sotto) dice la stessa cosa senza colore. */
body.nh-v2 .exd-page .exd-ap-val {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 9px;
  border-radius: var(--radius);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

body.nh-v2 .exd-page .exd-ap-val.is-full {
  background: var(--success-soft);
  color: var(--exd-ok-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 40%, transparent);
}

body.nh-v2 .exd-page .exd-ap-val:is(.is-part, .is-over) {
  background: var(--warning-soft);
  color: var(--exd-amber-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--exd-amber) 50%, transparent);
}

body.nh-v2 .exd-page .exd-ap-val.is-zero {
  background: var(--danger-soft);
  color: var(--exd-danger-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 40%, transparent);
}

body.nh-v2 .exd-page .exd-ap-val.is-none {
  background: var(--bg-soft);
  color: var(--exd-slate);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

/* Campo importo compatto (BlazorTextInput): cifre tabulari a destra, circa 110px (il contrassegno a sinistra ha il suo posto). La classe form-control
   sta sul contenitore del DxTextBox. Finche' la riga non e' decisa il valore e' solo una proposta: bordo tratteggiato ambra; appena si decide il bordo
   e' pieno (verde, ambra, rosso). */
body.nh-v2 .exd-page .exd-ap-field {
  position: relative;
  display: block;
  width: 110px;
  max-width: 100%;
  margin: 0 0 0 auto;
}

/* L'etichetta (nome del campo e stato a parole) c'e' per i lettori di schermo ma non si vede. */
body.nh-v2 .exd-page .exd-ap-field > span:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body.nh-v2 .exd-page .exd-ap.dxbl-text-edit {
  width: 110px;
  max-width: 100%;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid var(--muted);
  border-radius: var(--radius);
  background-color: var(--surface);
  box-shadow: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  transition: border-color .12s, box-shadow .12s;
}

body.nh-v2 .exd-page .exd-ap.dxbl-text-edit :is(input, .dxbl-text-edit-input) {
  min-height: 0;
  height: 30px;
  padding: 0 9px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

body.nh-v2 .exd-page .exd-ap.dxbl-text-edit input::placeholder {
  color: var(--muted);
}

body.nh-v2 .exd-page .exd-ap.dxbl-text-edit:hover {
  border-color: var(--exd-ink);
}

body.nh-v2 .exd-page .exd-ap.dxbl-text-edit:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .25);
  outline: 0;
}

/* Stati: dopo hover e focus, e con !important sul bordo e sullo sfondo perche' site.css forza i campi disabilitati a testo nudo
   (senza scrittura il campo resta spento ma conserva il segnale "da decidere"). */
body.nh-v2 .exd-page .exd-ap.dxbl-text-edit.is-todo {
  border: 1px dashed var(--exd-amber) !important;
  background: var(--warning-soft) !important;
  color: var(--exd-ink) !important;
  font-weight: 500;
}

body.nh-v2 .exd-page .exd-ap.dxbl-text-edit.is-todo:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--exd-amber) 25%, transparent);
}

body.nh-v2 .exd-page .exd-ap.dxbl-text-edit.is-full {
  border-color: var(--success) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent);
}

body.nh-v2 .exd-page .exd-ap.dxbl-text-edit:is(.is-part, .is-over) {
  border-color: var(--exd-amber) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--exd-amber) 25%, transparent);
}

body.nh-v2 .exd-page .exd-ap.dxbl-text-edit:is(.is-zero, .is-bad) {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent);
}

body.nh-v2 .exd-page .exd-ap.dxbl-text-edit.is-bad {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 30%, transparent);
}

body.nh-v2 .exd-page .exd-ap.dxbl-text-edit.dxbl-disabled:not(.is-todo, .is-full, .is-part, .is-over, .is-zero, .is-bad) {
  border-color: var(--border-strong) !important;
  background: var(--surface-soft) !important;
  color: var(--exd-slate) !important;
  cursor: not-allowed;
}

/* Contrassegno dell'esito, per chi non distingue i colori: un cerchio di 12px che dice quanto del richiesto e' approvato. Vuoto = rifiutato, a meta' = in parte,
   pieno = per intero, a righe oblique = oltre il richiesto (le stesse righe del misuratore di Nuova spesa per "oltre"). Nel campo sta sul contenitore
   (il tema DevExpress usa ::before e ::after del campo stesso per il suo stato disabilitato); in sola lettura sta davanti al numero.
   Nessun contrassegno finche' la riga e' da decidere (bordo tratteggiato) o il valore non e' valido. */
body.nh-v2 .exd-page .exd-ap-field:has(.exd-ap.is-full),
body.nh-v2 .exd-page .exd-ap-val.is-full {
  --exd-tone: var(--success);
}

body.nh-v2 .exd-page .exd-ap-field:has(.exd-ap:is(.is-part, .is-over)),
body.nh-v2 .exd-page .exd-ap-val:is(.is-part, .is-over) {
  --exd-tone: var(--exd-amber);
}

body.nh-v2 .exd-page .exd-ap-field:has(.exd-ap.is-zero),
body.nh-v2 .exd-page .exd-ap-val.is-zero {
  --exd-tone: var(--danger);
}

body.nh-v2 .exd-page .exd-ap-field:has(.exd-ap:is(.is-full, .is-part, .is-over, .is-zero))::before,
body.nh-v2 .exd-page .exd-ap-val:is(.is-full, .is-part, .is-over, .is-zero)::before {
  content: "";
  box-sizing: border-box;
  flex: none;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--exd-tone);
  border-radius: 50%;
  pointer-events: none;
}

body.nh-v2 .exd-page .exd-ap-field:has(.exd-ap:is(.is-full, .is-part, .is-over, .is-zero))::before {
  position: absolute;
  z-index: 1;
  left: 10px;
  top: 50%;
  margin-top: -6px;
}

body.nh-v2 .exd-page .exd-ap-field:has(.exd-ap.is-full)::before,
body.nh-v2 .exd-page .exd-ap-val.is-full::before {
  background: var(--exd-tone);
}

body.nh-v2 .exd-page .exd-ap-field:has(.exd-ap.is-part)::before,
body.nh-v2 .exd-page .exd-ap-val.is-part::before {
  background: linear-gradient(90deg, var(--exd-tone) 50%, transparent 50%);
}

body.nh-v2 .exd-page .exd-ap-field:has(.exd-ap.is-over)::before,
body.nh-v2 .exd-page .exd-ap-val.is-over::before {
  background: repeating-linear-gradient(135deg, var(--exd-tone) 0 2px, transparent 2px 4px);
}

body.nh-v2 .exd-page .exd-ap.dxbl-text-edit:is(.is-full, .is-part, .is-over, .is-zero) :is(input, .dxbl-text-edit-input) {
  padding-left: 30px;
}

/* Colonna azioni: la spunta "Conferma importo" ha bordo e fondo tinti, ben distinta dalla matita (icona nuda); piena quando c'e' un importo da salvare.
   !important perche' il tema dei .btn forza fondo e bordo. */
body.nh-v2 .exd-page .btn.exd-ck {
  border: 1.5px solid rgba(var(--primary-rgb), .65) !important;
  background: var(--primary-soft) !important;
  color: var(--primary-ink) !important;
}

body.nh-v2 .exd-page .btn.exd-ck:hover:not(:disabled) {
  border-color: var(--primary) !important;
  background: var(--surface) !important;
}

body.nh-v2 .exd-page .btn.exd-ck.is-dirty {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: #fff !important;
}

body.nh-v2 .exd-page .btn.exd-ck.is-dirty:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 85%, #000) !important;
}

/* La matita "Modifica importo approvato" e' l'unico modo di cambiare una decisione: resta sempre visibile (il sito mostra le matite delle righe solo al passaggio del mouse). */
body.nh-v2 .exd-page .btn.exd-pen {
  opacity: 1;
  transform: none;
}

/* Decisione finale (Approvata o Rifiutata) ancora modificabile: la matita non e' piu' neutra. */
body.nh-v2 .exd-page .btn.exd-reopen {
  border: 1px solid var(--border-strong) !important;
  background: var(--surface-soft) !important;
  color: var(--primary-ink) !important;
}

body.nh-v2 .exd-page .btn.exd-reopen:hover:not(:disabled) {
  border-color: rgba(var(--primary-rgb), .55) !important;
  background: var(--primary-soft) !important;
}

/* ================= conferme Approva e Rifiuta ================= */
/* La modale sta fuori da .exd-page. Sotto la domanda, una sola riga di dato calcolato (quante righe cambiano), centrata come la domanda. */
body.nh-v2 .nh-confirm .nh-confirm-extra:has(> .exd-conf-n) {
  margin-top: 8px;
}

body.nh-v2 .nh-confirm .nh-confirm-extra > .exd-conf-n {
  max-width: 65ch;
  margin: 0 auto;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.5;
  text-align: center;
  text-wrap: pretty;
}

/* ================= schermi larghi e stretti ================= */
/* Schermi larghi: il foglio si allarga con la pagina (fino a 460px) e la tabella prende il resto. */
@media (min-width: 1900px) {
  body.nh-v2 .exd-page .exd-cols {
    gap: 24px;
  }
}

/* Schermi stretti: meno aria tra le colonne, il foglio resta leggibile e la tabella scorre dentro la sua card (mai la pagina). */
@media (max-width: 1320px) {
  body.nh-v2 .exd-page .exd-cols {
    gap: 16px;
  }

  body.nh-v2 .exd-page .exd-sh-head {
    padding-left: 15px;
    padding-right: 15px;
  }

  body.nh-v2 .exd-page .exd-sf,
  body.nh-v2 .exd-page .exd-sa {
    margin-left: 15px;
    margin-right: 15px;
  }
}

/* ================= movimento ================= */
@keyframes exd-msgin {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@keyframes exd-chip-in {
  from { opacity: 0; transform: scale(.85); }
  to { opacity: 1; transform: none; }
}

@keyframes exd-bump {
  0% { background: color-mix(in srgb, var(--success) 22%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 22%, transparent); }
  100% { background: transparent; box-shadow: 0 0 0 4px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  body.nh-v2 .exd-page *,
  body.nh-v2 .exd-page *::before,
  body.nh-v2 .exd-page *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}