/* Modale Giornata (TimeStampDayEditor, ramo test): testata con ore e linea del tempo, lista timbrature come sequenza, registro ore con
   pannello Straordinario, dock fisso in basso. Tutto sotto body.nh-v2 .nh-day-final: in produzione il file e' inerte.
   Per tornare indietro: togliere il <link> in App.razor e il ramo IsV2 del componente (o git revert). Prototipo approvato: docs/PropostaGiornata_Finale.html.
   Solo token e componenti del sito; animazioni solo su transform/opacity e spente con prefers-reduced-motion. */

body.nh-v2 .nh-day-final {
  --nh-ink2: #475569;
  --nh-ink3: #334155;
  --nh-danger-ink: var(--test-environment-red-strong);
  --nh-danger-text: #b91c1c;
  --nh-amber-ink: #92400e;
  --nh-ok-ink: #047857;
  --nh-ok-ink2: #065f46;
  --nh-primary-ink: var(--primary-ink);
  --nh-teal: var(--teal);
  --nh-gap: 12px;
  /* Dimensionamento fluido (solo altezza/larghezza desktop, nessun @media): --g cresce con l'altezza dello schermo (0 fino a 600px, 640px da 1240px in su)
     e fa crescere tutto in modo continuo; --nh-avail e' lo spazio rimasto al corpo, da cui le altezze di riga: la modale non scorre mai. */
  --g: clamp(0px, calc(100dvh - 600px), 640px);
  --nh-D: calc(100dvh - clamp(14px, calc((100dvh - 600px) * .1 + 14px), 110px));
  --nh-hd: calc(42px + var(--g) * .016);
  --nh-kpi-fs: calc(28px + var(--g) * .032);
  --nh-axis: calc(12px + var(--g) * .006);
  --nh-trk: calc(22px + var(--g) * .022);
  --nh-chp: calc(18px + var(--g) * .01);
  --nh-bandpad: calc(6px + var(--g) * .014);
  --nh-band: calc(var(--nh-bandpad) * 2 + var(--nh-axis) + var(--nh-trk) + 4px + 2 * (var(--nh-chp) + 3px) + 1px);
  --nh-tabs: calc(32px + var(--g) * .012);
  --nh-dockh: calc(44px + var(--g) * .022);
  --nh-bodypad: calc(6px + var(--g) * .012);
  --nh-avail: calc(var(--nh-D) - var(--nh-hd) - var(--nh-band) - var(--nh-tabs) - var(--nh-dockh) - 2 * var(--nh-bodypad) - 10px);
  --nh-kpi-w: clamp(250px, 22%, 330px);
  --nh-aside: clamp(270px, 25%, 400px);
}

/* ---------- finestra: larga e alta quanto lo schermo consente, piu' compatta se e' piccolo ---------- */
body.nh-v2 .editor-modal.report-day-editor-modal {
  padding: 12px;
}

body.nh-v2 .editor-modal .editor-dialog.nh-day-final {
  width: min(94vw, clamp(1000px, 70vw, 1560px));
  height: var(--nh-D);
  max-height: none;
}

/* Solo la testata della Giornata: con il discendente semplice valeva anche per le conferme annidate
   (Elimina spesa, Scartare le modifiche?) e ne annullava lo spazio sopra l'icona. */
body.nh-v2 .editor-modal .editor-dialog.nh-day-final > .surface-head {
  min-height: var(--nh-hd);
  padding: 6px 12px 6px 24px;
}

body.nh-v2 .editor-modal .editor-dialog.nh-day-final > .editor-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

body.nh-v2 .nh-day-final .nh-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body.nh-v2 .nh-day-final .nh-dg-ic {
  flex: none;
  width: 16px;
  height: 16px;
}

/* ---------- testata: Ore del giorno + linea del tempo (lettura, non controllo) ---------- */
body.nh-v2 .nh-dg-band {
  flex: none;
  display: grid;
  grid-template-columns: var(--nh-kpi-w) minmax(0, 1fr);
  column-gap: 28px;
  align-items: center;
  padding: var(--nh-bandpad) 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
}

body.nh-v2 .nh-dg-kpi {
  min-width: 0;
}

body.nh-v2 .nh-dg-kpi-l {
  margin: 0;
  color: var(--nh-ink2);
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
}

body.nh-v2 .nh-dg-kpi-v {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
  margin: 2px 0 0;
}

body.nh-v2 .nh-dg-kpi-v output {
  display: inline-block;
  font-size: var(--nh-kpi-fs);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.08;
  font-variant-numeric: tabular-nums;
}

body.nh-v2 .nh-dg-kpi-was {
  color: var(--nh-ink2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

body.nh-v2 .nh-dg-kpi-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 18px;
}

body.nh-v2 .nh-dg-kpi-sub > div {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

body.nh-v2 .nh-dg-kpi-sub dt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--nh-ink2);
  font-weight: 400;
}

body.nh-v2 .nh-dg-kpi-sub dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

body.nh-v2 .nh-dg-ot-sw {
  display: inline-block;
  width: 16px;
  height: 10px;
  border-radius: 3px;
  background: var(--primary-strong) repeating-linear-gradient(135deg, rgba(255, 255, 255, .65) 0 2px, transparent 2px 4px);
}

/* Linea del tempo */
body.nh-v2 .nh-dl {
  position: relative;
  min-width: 0;
}

body.nh-v2 .nh-dl-axis {
  position: relative;
  height: var(--nh-axis);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  line-height: var(--nh-axis);
  font-variant-numeric: tabular-nums;
}

body.nh-v2 .nh-dl-axis span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

body.nh-v2 .nh-dl-axis small {
  margin-left: 2px;
  font-size: 9.5px;
  font-weight: 700;
}

body.nh-v2 .nh-dl-track {
  position: relative;
  height: var(--nh-trk);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

body.nh-v2 .nh-dl-track > i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

body.nh-v2 .nh-dl-track > i.mid {
  width: 2px;
  margin-left: -1px;
  background: var(--border-strong);
}

body.nh-v2 .nh-dl-blk {
  position: absolute;
  top: 4px;
  bottom: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 4px;
  padding: 0 6px;
  overflow: hidden;
  border-radius: 7px;
  background: var(--primary-strong);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
}

body.nh-v2 .nh-dl-blk:not(.is-static):hover {
  background: var(--nh-primary-ink);
}

body.nh-v2 .nh-dl-blk.is-static { cursor: default; }

body.nh-v2 .nh-dl-blk .nh-dg-ic {
  width: 13px;
  height: 13px;
  color: #fff;
}

body.nh-v2 .nh-dl-bt {
  position: relative;
  z-index: 1;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--primary-strong);
}

body.nh-v2 .nh-dl-blk:not(.is-static):hover .nh-dl-bt {
  background: var(--nh-primary-ink);
}

body.nh-v2 .nh-dl-ot {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border-left: 2px solid #fff;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .6) 0 2px, transparent 2px 5px);
}

body.nh-v2 .nh-dl-blk.is-edit {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--nh-primary-ink);
}

body.nh-v2 .nh-dl-blk.is-open,
body.nh-v2 .nh-dl-blk.is-bad {
  padding: 0 8px;
  border: 2px dashed var(--danger);
  background: var(--danger-soft, #fef2f2);
  color: var(--nh-danger-ink);
}

body.nh-v2 .nh-dl-blk.is-open:not(.is-static):hover,
body.nh-v2 .nh-dl-blk.is-bad:not(.is-static):hover {
  background: var(--test-environment-red-soft);
}

body.nh-v2 .nh-dl-blk.is-open .nh-dg-ic,
body.nh-v2 .nh-dl-blk.is-bad .nh-dg-ic {
  color: var(--nh-danger-ink);
}

body.nh-v2 .nh-dl-blk.is-open .nh-dl-bt,
body.nh-v2 .nh-dl-blk.is-bad .nh-dl-bt {
  background: transparent;
}

body.nh-v2 .nh-dl-pause {
  position: absolute;
  top: 4px;
  bottom: 4px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px dashed var(--border-strong);
  border-radius: 7px;
  color: var(--nh-ink2);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Pillole d'origine sotto la linea */
body.nh-v2 .nh-dl-chips {
  position: relative;
  height: calc(2 * (var(--nh-chp) + 3px));
  margin-top: 4px;
}

body.nh-v2 .nh-dl-chips .nh-dl-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: var(--nh-chp);
  min-height: 0;
  padding: 0 10px 0 8px;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

body.nh-v2 .nh-dl-chip .nh-dg-ic {
  width: 13px;
  height: 13px;
}

body.nh-v2 .nh-dl-chip small {
  font-size: 10px;
  font-weight: 700;
}

body.nh-v2 .nh-dl-chip.og-app { background: rgba(5, 150, 105, .12); color: var(--nh-ok-ink2); }
body.nh-v2 .nh-dl-chip.og-manual,
body.nh-v2 .nh-dl-chip.og-system { background: rgba(245, 158, 11, .18); color: var(--nh-amber-ink); }
/* Inserita dal controller: riempimento pieno (le altre origini sono tinte tenui) e il nome "Controller" resta in lista e nel nome accessibile. */
body.nh-v2 .nh-dl-chip.og-controller { background: var(--primary-deep); color: var(--surface); }
body.nh-v2 .nh-dl-chip.og-problem { background: rgba(220, 38, 38, .16); color: var(--nh-danger-ink); box-shadow: 0 0 0 3px rgba(220, 38, 38, .10); }
body.nh-v2 .nh-dl-chip.og-unknown { background: var(--surface-soft); color: var(--nh-ink2); border: 1px solid var(--border); }
body.nh-v2 .nh-dl-chip.is-edit { outline: 2px solid var(--nh-primary-ink); outline-offset: 1px; }
body.nh-v2 .nh-dl-chip.is-compact { padding: 0 6px; }
body.nh-v2 .nh-dl-chip.is-compact .nh-dl-ct { display: none; }
body.nh-v2 button.nh-dl-chip:hover { filter: brightness(.95); }
body.nh-v2 .nh-dl-chips span.nh-dl-chip { cursor: default; }

/* ---------- tab: conteggio modificato ---------- */
body.nh-v2 .nh-day-final .nh-dg-tabs {
  flex: none;
  margin: 0;
  padding: 0 24px;
}

body.nh-v2 .nh-day-final .nh-dg-tabs .settings-tab {
  min-height: var(--nh-tabs);
}

body.nh-v2 .nh-day-final .settings-tab .tab-count.is-dirty {
  border-color: rgba(var(--primary-rgb), .3);
  background: var(--primary-soft);
  color: var(--nh-primary-ink);
}

/* ---------- corpo (stessa altezza per le due tab: scorre dentro) ---------- */
body.nh-v2 .nh-dg-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: var(--nh-bodypad) 24px;
}

body.nh-v2 .nh-dg-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--nh-danger-text);
  font-size: 13px;
  font-weight: 600;
}

body.nh-v2 .nh-dg-note .nh-dg-ic {
  margin-top: 2px;
  width: 15px;
  height: 15px;
}

/* errori e avvisi di campo: testo con icona, mai strip */
body.nh-v2 .nh-day-final .nh-dg-err,
body.nh-v2 .nh-day-final .nh-dg-inf {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 4px 0;
  font-size: 12.5px;
  font-weight: 600;
}

body.nh-v2 .nh-day-final .nh-dg-err { color: var(--nh-danger-text); }
body.nh-v2 .nh-day-final .nh-dg-inf { color: var(--nh-ink2); }
body.nh-v2 .nh-day-final .nh-dg-err .nh-dg-ic,
body.nh-v2 .nh-day-final .nh-dg-inf .nh-dg-ic { margin-top: 2px; width: 15px; height: 15px; }

/* "era X" in linea: BlazorFieldWas compatto, senza riquadro ne' ombra */
body.nh-v2 .nh-day-final .nh-was.nh-was-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--nh-ink2);
  font-size: 12.5px;
}

body.nh-v2 .nh-day-final .nh-was-inline .nh-was-value {
  flex: 0 1 auto;
  min-width: 0;
  overflow: visible;
  color: var(--nh-ink2);
  font-size: 12.5px;
  font-weight: 400;
  white-space: normal;
  overflow-wrap: anywhere;
}

body.nh-v2 .nh-day-final .nh-was-inline .nh-was-value b {
  color: var(--text);
  font-weight: 600;
}

body.nh-v2 .nh-day-final .nh-was-inline .btn {
  min-width: 0;
  height: 26px;
  padding: 0 12px;
  font-size: 12.5px;
}

body.nh-v2 .nh-day-final .nh-dg-fold:not(:has(*)) {
  display: none;
}

/* ---------- timbrature: sequenza della giornata (colonna con connettore e nodi; la riga intera e' afferrabile) ---------- */
body.nh-v2 .nh-dg-stamps {
  position: relative;
  --rail: 32px;
  --rx: 27px;
  --c-time: 92px;
  --c-dir: 104px;
  --c-og: 128px;
}

/* Altezza di riga ricavata dallo spazio rimasto e dal numero di righe (--n per colonna); con una timbratura aperta o un avviso si tiene da parte lo spazio del modulo. */
body.nh-v2 .nh-dg-cols {
  --editH: 0px;
  --noteH: 0px;
  --srow-h: clamp(22px, calc((var(--nh-avail) - var(--editH) - var(--noteH)) / (var(--n) * 1.5 - .5)), calc(44px + var(--g) * .03));
  --sg: clamp(10px, calc(var(--srow-h) * .5), 28px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 28px;
  align-items: start;
}

/* Modulo aperto: tre campi con "era X" (~94px) + riga di errore o avviso a tutta larghezza (~36px) + margini; riservato sempre intero, cosi' le righe non saltano mentre si digita. */
body.nh-v2 .nh-dg-cols.has-edit { --editH: 152px; }
body.nh-v2 .nh-dg-cols.has-note { --noteH: 30px; }
body.nh-v2 .nh-dg-cols.is-dense { grid-template-columns: repeat(2, minmax(0, 1fr)); --rail: 28px; --rx: 23px; --c-time: 68px; --c-dir: 22px; --c-og: 112px; }
body.nh-v2 .nh-dg-cols.is-dense .nh-dg-row { column-gap: 8px; padding: 0 8px; }
body.nh-v2 .nh-dg-cols.is-dense .nh-dg-row .dr { font-size: 0; }
body.nh-v2 .nh-dg-cols.is-dense .nh-dg-gap { column-gap: 8px; padding: 0 8px; }
body.nh-v2 .nh-dg-cols.is-dense .nh-dg-form { grid-template-columns: 116px minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; padding-left: 40px; }

body.nh-v2 .nh-dg-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.nh-v2 .nh-dg-item {
  position: relative;
  --bgrow: #fff;
  border-radius: 12px;
}

body.nh-v2 .nh-dg-item.is-editing {
  --bgrow: var(--primary-soft);
  background: var(--primary-soft);
}

body.nh-v2 .nh-dg-item.is-source {
  opacity: .38;
}

/* connettore: pieno = lavoro (ingresso -> uscita), tratteggiato = pausa (uscita -> ingresso), rosso tratteggiato = sequenza anomala */
body.nh-v2 .nh-dg-item::before,
body.nh-v2 .nh-dg-item::after,
body.nh-v2 .nh-dg-gap::before {
  content: "";
  position: absolute;
  left: var(--rx);
  z-index: 1;
  width: 0;
  border-left: 2px solid transparent;
  pointer-events: none;
}

body.nh-v2 .nh-dg-item::before { top: 0; height: calc(var(--srow-h) / 2); }
body.nh-v2 .nh-dg-item::after { top: calc(var(--srow-h) / 2); bottom: 0; }
body.nh-v2 .nh-dg-gap::before { top: 0; bottom: 0; }

body.nh-v2 .nh-dg-item[data-up="work"]::before,
body.nh-v2 .nh-dg-item[data-dn="work"]::after,
body.nh-v2 .nh-dg-gap[data-k="work"]::before { border-left-color: rgba(var(--primary-rgb), .5); }

body.nh-v2 .nh-dg-item[data-up="pause"]::before,
body.nh-v2 .nh-dg-item[data-dn="pause"]::after,
body.nh-v2 .nh-dg-gap[data-k="pause"]::before { border-left: 2px dashed var(--border-strong); }

body.nh-v2 .nh-dg-item[data-up="odd"]::before,
body.nh-v2 .nh-dg-item[data-dn="odd"]::after,
body.nh-v2 .nh-dg-gap[data-k="odd"]::before { border-left: 2px dashed rgba(220, 38, 38, .55); }

body.nh-v2 .nh-dg-gap {
  position: relative;
  display: grid;
  grid-template-columns: var(--rail) var(--c-time) minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  height: var(--sg);
  padding: 0 12px;
  list-style: none;
  pointer-events: none;
}

/* Durante il trascinamento anche la fascia durata/pausa tra due righe accoglie il rilascio (inserisce dopo la riga sopra). */
body.nh-v2 .nh-dg-list.is-dragging-any .nh-dg-gap { pointer-events: auto; }

body.nh-v2 .nh-dg-gap .gl {
  grid-column: 2;
  color: var(--nh-ink2);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body.nh-v2 .nh-dg-gap[data-k="pause"] .gl {
  color: var(--muted);
  font-weight: 400;
}

body.nh-v2 .nh-dg-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--rail) var(--c-time) minmax(0, 1fr) var(--c-dir) var(--c-og) 32px;
  column-gap: 12px;
  align-items: center;
  height: var(--srow-h);
  padding: 0 12px;
  border-radius: 12px;
  cursor: grab;
  transition: background-color .12s;
}

body.nh-v2 .nh-dg-item.is-editing .nh-dg-row,
body.nh-v2 .nh-dg-row.is-readonly { cursor: default; }
body.nh-v2 .nh-dg-item:not(.is-editing) .nh-dg-row:not(.is-readonly):hover { --bgrow: var(--surface-soft); background: var(--surface-soft); }
body.nh-v2 .nh-dg-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
body.nh-v2 .nh-dg-list.is-dragging-any,
body.nh-v2 .nh-dg-list.is-dragging-any * { cursor: grabbing !important; }

body.nh-v2 .nh-dg-row .rail { position: relative; align-self: stretch; }

body.nh-v2 .nh-dg-row .nd {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid var(--primary-strong);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px var(--bgrow, #fff);
}

body.nh-v2 .nh-dg-row .nd.e { background: var(--primary-strong); }
body.nh-v2 .nh-dg-row .nd.bad { border-color: var(--danger); }
body.nh-v2 .nh-dg-row .nd.e.bad { background: var(--danger); }
body.nh-v2 .nh-dg-item.is-editing .nd { box-shadow: 0 0 0 3px var(--bgrow), 0 0 0 5px rgba(var(--primary-rgb), .35); }

body.nh-v2 .nh-dg-row .t {
  font-size: clamp(15px, calc(var(--srow-h) * .42), 22px);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body.nh-v2 .nh-dg-row .t small {
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--nh-ink2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: 3px;
}

body.nh-v2 .nh-dg-row .rs {
  min-width: 0;
  overflow: hidden;
  font-size: clamp(13px, calc(var(--srow-h) * .33), 16px);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dove era la persona (modalita' e cliente/commessa): dopo la causale, tenue e sulla stessa riga. */
body.nh-v2 .nh-dg-row .rs .wh {
  margin-left: 8px;
  color: var(--nh-ink2);
  font-size: .86em;
  font-weight: 500;
}

/* Timbratura fuori raggio o smart working non richiesto: occhio e motivo in rosso dopo la causale. */
body.nh-v2 .nh-dg-row .rs .sf {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 10px;
  color: var(--danger);
  font-size: .9em;
  font-weight: 700;
  vertical-align: middle;
}
body.nh-v2 .nh-dg-row .rs .sf .nh-dg-ic { width: 16px; height: 16px; flex: none; }

/* L'alone sta dentro la cella (che resta con overflow nascosto): margine interno di 6px compensato dal margine negativo, cosi' la
   riga non cambia misura e l'etichetta, se lunga, si accorcia con i puntini senza uscire dalla colonna. */
body.nh-v2 .nh-dg-row .rs:has(.wh.is-bad) {
  display: flex;
  align-items: center;
  padding: 6px;
  margin: -6px;
}

/* Modalita' non richiesta: alone rosso intorno all'etichetta, senza testo aggiuntivo (stessi colori del badge modalita' rosso). */
body.nh-v2 .nh-dg-row .rs .wh.is-bad {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--danger-soft);
  color: var(--nh-danger-text);
  font-weight: 700;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--danger) 55%, var(--surface)), 0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent);
}

/* Cliente e commessa della timbratura: una sola colonna a due righe (cliente sopra, commessa sotto) tra causale e direzione, presente solo se almeno una timbratura del giorno le ha; il testo lungo si accorcia con i puntini (intero nel title). */
body.nh-v2 .nh-dg-row .cj { display: none; }
body.nh-v2 .nh-dg-stamps.has-cj .nh-dg-row {
  grid-template-columns: var(--rail) var(--c-time) minmax(0, 1fr) minmax(0, 1fr) var(--c-dir) var(--c-og) 32px;
}
body.nh-v2 .nh-dg-stamps.has-cj .nh-dg-row .cj {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  font-size: clamp(12px, calc(var(--srow-h) * .26), 15px);
  line-height: 1.15;
}
body.nh-v2 .nh-dg-row .cj > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.nh-v2 .nh-dg-row .cj > :empty { display: none; }
body.nh-v2 .nh-dg-row .cj .cu { color: var(--text); font-weight: 600; }
body.nh-v2 .nh-dg-row .cj .jb { color: var(--nh-ink2); font-weight: 500; }
/* Riga senza cliente e commessa: la colonna resterebbe vuota, quindi la causale (con modalita' e sede) prende anche il suo posto e il testo non si tronca. */
body.nh-v2 .nh-dg-stamps.has-cj .nh-dg-row:not(:has(.cj > span:not(:empty))) .cj { display: none; }
body.nh-v2 .nh-dg-stamps.has-cj .nh-dg-row:not(:has(.cj > span:not(:empty))) .rs { grid-column: 3 / 5; }

/* Due colonne di lista (7 o piu' timbrature) con Cliente/Commessa: la riga e' stretta, quindi la causale tiene il proprio rigo e modalita' e sede passano sotto (due righe come Cliente/Commessa); stesse misure della fascia durata/pausa. */
body.nh-v2 .nh-dg-stamps.has-cj .nh-dg-cols.is-dense { --c-og: 88px; --c-time: 64px; }
body.nh-v2 .nh-dg-stamps.has-cj .nh-dg-cols.is-dense .nh-dg-row { grid-template-columns: var(--rail) var(--c-time) minmax(0, 1.2fr) minmax(0, 1fr) var(--c-dir) var(--c-og) 32px; }
body.nh-v2 .nh-dg-stamps.has-cj .nh-dg-cols.is-dense .nh-dg-row,
body.nh-v2 .nh-dg-stamps.has-cj .nh-dg-cols.is-dense .nh-dg-gap { column-gap: 6px; padding: 0 6px; }
body.nh-v2 .nh-dg-stamps.has-cj .nh-dg-cols.is-dense .nh-dg-row .rs {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  column-gap: 6px;
  row-gap: 1px;
}
body.nh-v2 .nh-dg-stamps.has-cj .nh-dg-cols.is-dense .nh-dg-row .rs .rn {
  flex: 0 0 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.nh-v2 .nh-dg-stamps.has-cj .nh-dg-cols.is-dense .nh-dg-row .rs .wh,
body.nh-v2 .nh-dg-stamps.has-cj .nh-dg-cols.is-dense .nh-dg-row .rs .sf {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  margin-left: 0;
}
body.nh-v2 .nh-dg-stamps.has-cj .nh-dg-cols.is-dense .nh-dg-row .rs:has(.wh.is-bad) { padding: 3px; margin: -3px; }
body.nh-v2 .nh-dg-stamps.has-cj .nh-dg-cols.is-dense .nh-dg-row .rs .wh.is-bad { padding: 1px 5px; }
body.nh-v2 .nh-dg-stamps.has-cj .nh-dg-cols.is-dense .nh-dg-row .rs .wh:not(.is-bad) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.nh-v2 .nh-dg-row .dr,
body.nh-v2 .nh-dg-row .og {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--nh-ink2);
  font-size: 13px;
  white-space: nowrap;
}

body.nh-v2 .nh-dg-row .dr { font-weight: 600; }
body.nh-v2 .nh-dg-row .dr .nh-dg-ic { width: 15px; height: 15px; }
body.nh-v2 .nh-dg-row .og .nh-dg-ic { width: 14px; height: 14px; }
body.nh-v2 .nh-dg-row .og.manual,
body.nh-v2 .nh-dg-row .og.system { color: var(--nh-amber-ink); font-weight: 600; }
body.nh-v2 .nh-dg-row .og.controller { color: var(--primary-deep); font-weight: 700; }
body.nh-v2 .nh-dg-row .og.problem { color: var(--nh-danger-ink); font-weight: 700; }

/* matita: leggera, piena a hover e fuoco */
body.nh-v2 .nh-dg-row .pen {
  display: inline-grid;
  place-items: center;
  opacity: .5;
  transition: opacity .12s;
}

body.nh-v2 .nh-dg-row:hover .pen,
body.nh-v2 .nh-dg-row:focus-within .pen,
body.nh-v2 .nh-dg-item.is-editing .pen { opacity: 1; }

body.nh-v2 .nh-dg-row .pen .btn {
  width: min(32px, var(--srow-h));
  height: min(32px, var(--srow-h));
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--nh-ink2);
  box-shadow: none;
}

body.nh-v2 .nh-dg-row .pen .btn:hover { background: #fff; color: var(--text); }

/* trascinamento: indicatore di inserimento sopra o sotto la riga bersaglio, solo con pseudo-elemento (nessuno scatto di layout) */
body.nh-v2 .nh-dg-item.is-drop-before > .nh-dg-row::after,
body.nh-v2 .nh-dg-item.is-drop-after > .nh-dg-row::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 0;
  z-index: 3;
  height: 2px;
  border-radius: 2px;
  background: var(--primary);
  pointer-events: none;
}

body.nh-v2 .nh-dg-item.is-drop-before > .nh-dg-row::after { top: -1px; }
body.nh-v2 .nh-dg-item.is-drop-after > .nh-dg-row::after { bottom: -1px; }

body.nh-v2 .nh-dg-tail {
  height: 14px;
  list-style: none;
}

body.nh-v2 .nh-dg-tail.is-over { box-shadow: inset 0 2px 0 var(--primary); }
body.nh-v2 .nh-dg-tail.is-target { box-shadow: inset 0 1px 0 var(--border-strong); }

/* modulo di modifica sotto la riga: Ora, Causale, Posizione */
body.nh-v2 .nh-dg-form {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 10px 16px;
  padding: 2px 12px 16px 56px;
}

body.nh-v2 .nh-dg-fld { min-width: 0; }

/* errore o avviso sull'ora: su tutta la larghezza sotto i tre campi */
body.nh-v2 .nh-dg-form > .nh-dg-fmsg { grid-column: 1 / -1; padding: 0; }

/* ---------- registro ore ---------- */
body.nh-v2 .nh-dg-hours {
  --nh-row: clamp(22px, calc((var(--nh-avail) - 28px - var(--f, 0) * 30px) / var(--m, 10)), calc(42px + var(--g) * .025));
  --nh-ih: clamp(20px, calc(var(--nh-row) - 3px), 40px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--nh-aside);
  gap: clamp(20px, 2.4vw, 40px);
  align-items: start;
}

body.nh-v2 .nh-dg-reg { min-width: 0; }

body.nh-v2 .nh-dg-reg-head,
body.nh-v2 .nh-dg-vrow {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, .75fr);
  column-gap: var(--nh-gap);
  align-items: center;
  margin: 0 -12px;
  padding: 0 12px;
}

body.nh-v2 .nh-dg-reg-head {
  position: sticky;
  top: 0;
  z-index: 3;
  min-height: 28px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

body.nh-v2 .nh-dg-reg-head .n { text-align: right; }
body.nh-v2 .nh-dg-reg-head .d { padding-right: 11px; }

body.nh-v2 .nh-dg-vrow {
  min-height: var(--nh-row);
  padding-block: 1px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  transition: background-color .15s;
}

body.nh-v2 .nh-dg-vrow.is-dirty {
  background: color-mix(in srgb, var(--primary) 6%, #fff);
  border-radius: 8px;
}

body.nh-v2 .nh-dg-vrow .nm {
  min-width: 0;
  padding: 2px 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

body.nh-v2 .nh-dg-vrow.is-hours .nm { padding-left: 14px; color: var(--nh-ink2); font-weight: 400; }
body.nh-v2 .nh-dg-vrow.is-cause { border-bottom: 0; padding-bottom: 0; }
body.nh-v2 .nh-dg-vrow.is-cause + .nh-dg-vrow.is-hours { padding-top: 0; }

body.nh-v2 .nh-dg-vrow .rc {
  min-width: 0;
  color: var(--nh-ink2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

body.nh-v2 .nh-dg-vrow .rc.dash { color: var(--muted); }
body.nh-v2 .nh-dg-vrow .rc-cause { display: flex; justify-content: flex-end; }
body.nh-v2 .nh-dg-vrow .fc { min-width: 0; }

body.nh-v2 .nh-dg-vrow .tag {
  display: inline-block;
  max-width: 100%;
  padding: 3px 10px;
  border: 1px solid rgba(71, 85, 105, .18);
  border-radius: 6px;
  background: #f1f5f9;
  color: var(--nh-ink2);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  overflow-wrap: anywhere;
}

/* Differenza: segno e testo neutri (il rosso sta sul valore definitivo) */
body.nh-v2 .nh-dg-vrow .dc {
  min-width: 0;
  padding-right: 11px;
  color: var(--nh-ink3);
  text-align: right;
  font-size: 13.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

body.nh-v2 .nh-dg-vrow .dc .same { color: var(--muted); font-weight: 400; }

body.nh-v2 .nh-dg-vrow .dc .word {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--nh-ink3);
  font-size: 12.5px;
  font-weight: 700;
}

body.nh-v2 .nh-dg-vrow.is-total {
  margin-top: 6px;
  border-top: 1px solid var(--border-strong);
  border-bottom: 0;
}

body.nh-v2 .nh-dg-vrow.is-total .rc { font-weight: 600; }
body.nh-v2 .nh-dg-vrow .tv { padding-right: 11px; text-align: right; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

body.nh-v2 .nh-dg-vrow > .nh-dg-fold,
body.nh-v2 .nh-dg-vrow > .nh-dg-err { grid-column: 2 / -1; padding-right: 0; }
body.nh-v2 .nh-dg-vrow > .nh-dg-fold .nh-was-inline { justify-content: flex-end; }

/* campi del registro: altezza compatta, cifre a destra */
body.nh-v2 .nh-dg-vrow .field,
body.nh-v2 .nh-dov-row .field { margin: 0; }

body.nh-v2 .nh-dg-vrow .dxbl-text-edit,
body.nh-v2 .nh-dov-row .dxbl-text-edit {
  height: var(--nh-ih);
  min-height: var(--nh-ih);
}

body.nh-v2 .nh-dg-vrow .dxbl-text-edit input,
body.nh-v2 .nh-dov-row .dxbl-text-edit input {
  height: calc(var(--nh-ih) - 2px);
}

body.nh-v2 .nh-dg-field input,
body.nh-v2 .nh-dov-field input { text-align: right; font-variant-numeric: tabular-nums; }

/* definitivo diverso dal richiesto: rosso con alone come nella dashboard (report-definitive-diff); il bordo resta neutro */
body.nh-v2 .nh-day-final .is-diff .dxbl-text-edit,
body.nh-v2 .nh-day-final .is-diff .dxbl-text-edit input {
  background: rgba(220, 38, 38, .07);
  color: var(--nh-danger-ink);
  font-weight: 700;
}

body.nh-v2 .nh-day-final .is-diff .dxbl-text-edit { box-shadow: 0 0 0 4px rgba(220, 38, 38, .10); }
body.nh-v2 .nh-day-final .is-diff .dxbl-text-edit:focus-within { box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .25); }

/* causale: testo a capo per le voci lunghe */
body.nh-v2 .nh-day-final .nh-dg-cause .dxbl-text-edit { height: auto; min-height: var(--nh-ih); }
body.nh-v2 .nh-day-final .nh-dg-cause .dxbl-text-edit input { height: auto; min-height: calc(var(--nh-ih) - 2px); white-space: normal; text-overflow: ellipsis; }

/* ---------- pannello Straordinario ---------- */
body.nh-v2 .nh-dov {
  position: sticky;
  top: 0;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}

body.nh-v2 .nh-dov h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.005em;
}

body.nh-v2 .nh-dov-eq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.25fr);
  align-items: end;
  column-gap: 8px;
  margin: 0;
}

body.nh-v2 .nh-dov-eq > div { display: grid; gap: 1px; }
body.nh-v2 .nh-dov-eq dt { order: 2; margin: 0; color: var(--nh-ink2); font-size: 12px; font-weight: 400; line-height: 15px; }
body.nh-v2 .nh-dov-eq dd { order: 1; margin: 0; font-size: 19px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
body.nh-v2 .nh-dov-eq .op { padding-bottom: 17px; color: var(--muted); font-size: 17px; line-height: 1; }
body.nh-v2 .nh-dov-eq .res dt { color: var(--text); font-weight: 700; }
body.nh-v2 .nh-dov-eq .res dd { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }

body.nh-v2 .nh-dov-bar {
  position: relative;
  display: flex;
  gap: 2px;
  height: 26px;
  margin: 12px 0 6px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--border);
}

body.nh-v2 .nh-dov-bar .seg {
  display: grid;
  place-items: center;
  flex: 0 1 auto;
  min-width: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  white-space: nowrap;
}

body.nh-v2 .nh-dov-bar .seg span { padding: 0 4px; border-radius: 3px; background: rgba(15, 23, 42, .38); }
body.nh-v2 .nh-dov-bar .pay,
body.nh-v2 .nh-dov-row .sw.pay { background: var(--primary); }
body.nh-v2 .nh-dov-bar .recover,
body.nh-v2 .nh-dov-row .sw.recover { background: var(--nh-teal) radial-gradient(rgba(255, 255, 255, .6) 1.3px, transparent 1.7px) 0 0 / 6px 6px; }
body.nh-v2 .nh-dov-bar .unpaid,
body.nh-v2 .nh-dov-row .sw.unpaid { background: #475569 repeating-linear-gradient(0deg, rgba(255, 255, 255, .5) 0 2px, transparent 2px 5px); }

body.nh-v2 .nh-dov-bar .exc {
  position: absolute;
  inset: 0 0 0 auto;
  border-left: 2px solid #fff;
  background: repeating-linear-gradient(135deg, #b91c1c 0 6px, #dc2626 6px 12px);
}

body.nh-v2 .nh-dov-bar.is-none {
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--nh-ink2);
  font-size: 12.5px;
}

body.nh-v2 .nh-dov-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 96px;
  column-gap: 10px;
  align-items: center;
  min-height: var(--nh-row);
}

body.nh-v2 .nh-dov-row.plain {
  grid-template-columns: minmax(0, 1fr) 96px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

body.nh-v2 .nh-dov-row .lbl { min-width: 0; margin: 0; color: var(--nh-ink3); font-weight: 600; overflow-wrap: anywhere; }
body.nh-v2 .nh-dov-row .sw { width: 14px; height: 14px; border-radius: 3px; }
body.nh-v2 .nh-dov .nh-was-inline { justify-content: flex-end; }

body.nh-v2 .nh-dov-sum {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 22px;
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
}

body.nh-v2 .nh-dov-sum.ok { color: var(--nh-ok-ink); }
body.nh-v2 .nh-dov-sum.bad { color: var(--nh-danger-text); }
body.nh-v2 .nh-dov-sum .nh-dg-ic { margin-top: 2px; width: 15px; height: 15px; }

/* ---------- dock: azioni e esito sempre in vista ---------- */
body.nh-v2 .nh-dg-dock { flex: none; }

body.nh-v2 .editor-modal .editor-dialog.nh-day-final .nh-dg-dock .modal-form-actions {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--nh-dockh);
  margin: 0;
  padding: 6px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
  box-shadow: 0 -10px 16px -14px rgba(15, 23, 42, .22);
}

body.nh-v2 .nh-dg-dock .modal-form-main-actions {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

body.nh-v2 .nh-dg-dock .nh-dg-msg {
  order: -1;
  display: flex;
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
  margin: 0;
}

body.nh-v2 .nh-dg-dock .nh-dg-msg .status-strip,
body.nh-v2 .nh-dg-dock .nh-dg-msg > * {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 13.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

body.nh-v2 .nh-dg-dock .nh-dg-msg .success { color: var(--nh-ok-ink); }
body.nh-v2 .nh-dg-dock .nh-dg-msg .error { color: var(--nh-danger-text); }

@media (prefers-reduced-motion: reduce) {
  body.nh-v2 .nh-day-final *,
  body.nh-v2 .nh-day-final *::before,
  body.nh-v2 .nh-day-final *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* La pausa non ha il riempimento del blocco di lavoro: l'etichetta resta testo semplice. */
body.nh-v2 .nh-dl-pause .nh-dl-bt {
  padding: 0;
  background: transparent;
}

/* ---------- stato vuoto: binario tratteggiato in testata e riga fantasma che e' l'azione "Aggiungi timbratura" ---------- */
body.nh-v2 .nh-dl-track.is-empty {
  border: 2px dashed var(--border-strong);
  background: transparent;
}

body.nh-v2 .nh-dg-ghost {
  --rail: 32px;
  --rx: 27px;
  width: 100%;
  margin: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  position: relative;
  display: grid;
  grid-template-columns: var(--rail) 92px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  height: clamp(48px, calc(var(--nh-avail) * .12), 72px);
  padding: 0 12px;
  border: 2px dashed var(--border-strong);
  border-radius: 12px;
  color: var(--nh-ink2);
  cursor: pointer;
  transition: background-color .12s, border-color .12s;
}

body.nh-v2 .nh-dg-ghost:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

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

body.nh-v2 .nh-dg-ghost .rail { position: relative; align-self: stretch; }

body.nh-v2 .nh-dg-ghost .nd {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px dashed var(--nh-ink2);
  border-radius: 50%;
}

body.nh-v2 .nh-dg-ghost .t {
  color: var(--muted);
  font-size: clamp(16px, calc(var(--nh-avail) * .05), 24px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

body.nh-v2 .nh-dg-ghost .lbl {
  color: var(--primary-strong);
  font-size: 15px;
  font-weight: 700;
}

/* "era X" e errori di riga occupano una riga compatta (il calcolo dell'altezza del registro ne tiene conto: 30px ciascuna). */
body.nh-v2 .nh-dg-vrow > .nh-dg-fold .nh-was.nh-was-inline,
body.nh-v2 .nh-dov .nh-dov-fold .nh-was.nh-was-inline {
  padding: 1px 0;
  min-height: 26px;
}

body.nh-v2 .nh-dg-vrow > .nh-dg-fold .nh-was-inline .btn,
body.nh-v2 .nh-dov .nh-dov-fold .nh-was-inline .btn {
  height: 24px;
}

body.nh-v2 .nh-day-final .nh-dg-vrow > .nh-dg-err {
  padding: 1px 0;
  min-height: 26px;
}

/* Righe del registro: contenuto che non supera l'altezza calcolata (--nh-row), cosi' la somma delle righe resta quella prevista dal dimensionamento. */
body.nh-v2 .nh-dg-vrow {
  padding-block: 0;
  line-height: 1.2;
}

body.nh-v2 .nh-dg-vrow .nm { padding: 0; }
body.nh-v2 .nh-dg-vrow .tag { padding-block: 1px; }
body.nh-v2 .nh-dg-vrow .dc .word { padding-block: 0; }
body.nh-v2 .nh-dg-vrow .dxbl-text-edit { box-sizing: border-box; }
body.nh-v2 .nh-dg-vrow > .nh-dg-fold .nh-was.nh-was-inline,
body.nh-v2 .nh-dg-vrow > .nh-dg-err { min-height: 24px; padding-block: 0; line-height: 1.2; }

body.nh-v2 .nh-dg-vrow { font-size: clamp(12.5px, calc(var(--nh-row) * .52), 15px); }
body.nh-v2 .nh-dg-vrow .dxbl-text-edit input { font-size: inherit; }

/* Su schermi alti le righe crescono con il loro contenuto (tipografia fluida, stessa scala delle altezze). */
body.nh-v2 .nh-dg-row .t { font-size: clamp(15px, calc(var(--srow-h) * .42), 27px); }
body.nh-v2 .nh-dg-row .rs { font-size: clamp(13px, calc(var(--srow-h) * .3), 18px); }
body.nh-v2 .nh-dg-row .dr,
body.nh-v2 .nh-dg-row .og { font-size: clamp(13px, calc(var(--srow-h) * .24), 15.5px); }
body.nh-v2 .nh-dg-vrow { font-size: clamp(12.5px, calc(var(--nh-row) * .52), 17px); }
body.nh-v2 .nh-dov-eq dd { font-size: clamp(18px, calc(14px + var(--g) * .008), 22px); }

/* Modalita' di lavoro (In sede / Fuori sede / Smart working): pillola nella testata della Giornata, pannello di cambio e campo
   "Modalita'" delle timbrature manuali. Senza prefisso body.nh-v2: il componente vive anche nel ramo storico. Prototipo: docs/PropostaSceltaModalitaTimbratura.html. */
.nh-dmode,
.nh-dmode-field {
  --dm-ink: #475569;
  --dm-tint: #f1f5f9;
  --dm-line: var(--border);
}

.nh-dmode-opt.is-sede, .nh-dmode-pill.is-sede { --dm-ink: var(--primary-strong, #1d4ed8); --dm-tint: var(--primary-soft, #eaf2ff); --dm-line: #93b4f5; }
.nh-dmode-opt.is-fuori, .nh-dmode-pill.is-fuori { --dm-ink: var(--teal, #0f766e); --dm-tint: #e3f6f3; --dm-line: #7fcdc3; }
.nh-dmode-opt.is-smart, .nh-dmode-pill.is-smart { --dm-ink: #6d28d9; --dm-tint: #f1eafe; --dm-line: #c2a8f5; }

.nh-dmode { position: relative; display: inline-flex; align-items: center; }

.nh-dmode-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--dm-line, var(--border));
  border-radius: 999px;
  background: var(--dm-tint, #f1f5f9);
  color: var(--dm-ink, #475569);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

button.nh-dmode-pill { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
button.nh-dmode-pill:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-ink) 14%, transparent); }
button.nh-dmode-pill:active { transform: translateY(1px); }
button.nh-dmode-pill:focus-visible { outline: 2px solid var(--dm-ink); outline-offset: 2px; }

.nh-dmode-ic { width: 16px; height: 16px; flex: none; }
.nh-dmode-caret { width: 12px; height: 12px; flex: none; opacity: .7; }

.nh-dmode-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  display: grid;
  gap: 12px;
  width: min(340px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  background: var(--surface, #fff);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
}

.nh-dmode-opts { display: flex; flex-wrap: wrap; gap: 8px; }

.nh-dmode-opt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border-strong, #cbd5e1);
  border-radius: var(--radius, 8px);
  background: var(--surface, #fff);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.nh-dmode-opt small { color: var(--muted); font-size: 11px; font-weight: 600; }
.nh-dmode-opt:hover:not(:disabled) { border-color: var(--dm-line, var(--border-strong)); background: var(--dm-tint, #f8fafc); }
.nh-dmode-opt.is-on { border-color: var(--dm-ink); background: var(--dm-tint); color: var(--dm-ink); box-shadow: inset 0 0 0 1px var(--dm-ink); }
.nh-dmode-opt.is-on small { color: var(--dm-ink); }
.nh-dmode-opt:focus-visible, .nh-dmode-site:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.nh-dmode-opt:disabled, .nh-dmode-site:disabled { opacity: .6; cursor: not-allowed; }

.nh-dmode-sites { display: flex; flex-wrap: wrap; gap: 6px; }

.nh-dmode-site {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft, #f8fafc);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.nh-dmode-site.is-on { border-color: var(--primary); background: var(--primary-soft, #eaf2ff); color: var(--primary-strong, #1d4ed8); }

.nh-dmode-err { margin: 0; color: var(--danger); font-size: 13px; font-weight: 600; }
.nh-dmode-act { display: flex; justify-content: flex-end; gap: 8px; }

.nh-dmode-field { display: grid; gap: 8px; margin: 0; }
.nh-dmode-field-l { color: var(--muted); font-size: 12px; text-transform: uppercase; }
.nh-dmode-field.is-invalid .nh-dmode-opt { border-color: var(--danger); }

@media (prefers-reduced-motion: reduce) {
  button.nh-dmode-pill, .nh-dmode-opt { transition: none; }
}

/* Buoni pasto nel registro Ore: riga staccata dalle ore; mese gestito = valore bloccato con lucchetto. */
body.nh-v2 .nh-dg-vrow.is-voucher { margin-top: 6px; border-top: 1px dashed var(--border-strong); padding-top: 4px; }
body.nh-v2 .nh-dg-vrow.is-voucher .nm { font-weight: 800; }
body.nh-v2 .nh-dg-vrow.is-voucher .nh-dg-fold { display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
body.nh-v2 .nh-dg-vrow.is-locked .fc .dxbl-text-edit { background: var(--surface-soft); border-style: dashed; }
body.nh-v2 .nh-dg-vrow.is-locked .fc input { color: var(--muted); }
body.nh-v2 .nh-vou-lock { display: inline-flex; align-items: center; gap: 5px; color: color-mix(in srgb, var(--warning) 38%, var(--text)); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
body.nh-v2 .nh-vou-lock svg { width: 14px; height: 14px; }

/* ================= tab Note spese: elenco spese e form incorporato (solo test) ================= */
/* Elenco (TimeStampDayExpenses): il solo foglio del rendiconto, centrato e alto quanto il corpo; le sue righe del giorno aprono la spesa.
   I token (--exv2-*) arrivano da .exv2-page di expense-create-v2.css, quindi la scala con l'altezza e' la stessa di Nuova spesa. */
body.nh-v2 :is(.nh-day-final, .nh-exp-month) .exv2-page.nh-dex {
  display: flex;
  justify-content: center;
  align-items: stretch;
  height: 100%;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 2px 0 8px;
}

/* Modale del mese: il corpo non ha un'altezza propria come la Giornata, quindi il foglio ne riceve una dallo schermo. */
body.nh-v2 .nh-exp-month .exv2-page.nh-dex {
  height: clamp(360px, calc(100dvh - 240px), 920px);
}

body.nh-v2 .nh-exp-month .nh-exp-month-foot {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
}

body.nh-v2 :is(.nh-day-final, .nh-exp-month) .nh-dex > .exv2-sheet {
  flex: 0 1 clamp(320px, 52%, 560px);
  min-height: 0;
}

/* Riga della spesa del giorno apribile: il pulsante copre la riga, cosi' la lista resta una lista e la riga intera e' il bersaglio. */
body.nh-v2 :is(.nh-day-final, .nh-exp-month) .nh-dex .exv2-rw.is-openable {
  position: relative;
  cursor: pointer;
  transition: background-color .15s var(--exv2-ease);
}

body.nh-v2 :is(.nh-day-final, .nh-exp-month) .nh-dex .exv2-rw.is-openable:hover {
  background: var(--primary-tint-6);
}

body.nh-v2 :is(.nh-day-final, .nh-exp-month) .nh-dex .exv2-rw-open {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

body.nh-v2 :is(.nh-day-final, .nh-exp-month) .nh-dex .exv2-rw-open:focus-visible {
  outline: 2px solid var(--primary-strong);
  outline-offset: -2px;
}

/* La spesa appena salvata si illumina una volta. */
body.nh-v2 :is(.nh-day-final, .nh-exp-month) .nh-dex .exv2-rw.is-fresh {
  animation: nh-fresh 2.4s ease-out;
}

@keyframes nh-fresh {
  0%, 40% { background: var(--primary-soft); }
  100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  body.nh-v2 :is(.nh-day-final, .nh-exp-month) .nh-dex .exv2-rw.is-fresh { animation: none; }
  body.nh-v2 :is(.nh-day-final, .nh-exp-month) .nh-dex .exv2-rw.is-openable { transition: none; }
}

/* Form incorporato (ExpenseNotesBlazor con EmbeddedDay): la stessa pagina di Nuova spesa dentro il corpo della Giornata. Niente titolo
   (non viene reso), niente cornice della scheda, altezza = quella del corpo, colonne in percentuale e mai scroll interno; il dock ha
   solo il messaggio perche' i pulsanti sono quelli del dock della modale. */
body.nh-v2 .nh-day-final .nh-dg-body > .exv2-page:not(.nh-dex) {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  max-width: none;
  margin: 0;
}

body.nh-v2 .nh-day-final .nh-dg-body > .exv2-page:not(.nh-dex) .exv2-scheda {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

body.nh-v2 .nh-day-final .nh-dg-body > .exv2-page:not(.nh-dex) .exv2-cols {
  flex: 1 1 auto;
  grid-template-columns: clamp(150px, 18%, 236px) minmax(0, 1fr) clamp(250px, 30%, 460px);
  gap: 16px;
  height: 100%;
  min-height: 0;
}

body.nh-v2 .nh-day-final .nh-dg-body > .exv2-page:not(.nh-dex) .exv2-form {
  padding: 2px 0 var(--exv2-g);
}

/* Senza il campo Data (la giornata e' quella aperta) il Tipo occupa tutta la riga, anche nel form stretto. */
body.nh-v2 .nh-day-final .nh-dg-body > .exv2-page:not(.nh-dex) .exv2-grp.is-type-date {
  grid-template-columns: minmax(0, 1fr);
}

body.nh-v2 .nh-day-final .nh-dg-body > .exv2-page:not(.nh-dex) .exv2-grp.is-type-date > * {
  grid-column: 1 / -1;
}

body.nh-v2 .nh-day-final .nh-dg-body > .exv2-page:not(.nh-dex) .exv2-dock {
  flex: none;
  margin-top: 6px;
  padding-top: 0;
  border-top: 0;
}

body.nh-v2 .nh-day-final .nh-dg-body > .exv2-page:not(.nh-dex) .exv2-dock:not(:has(*)) {
  display: none;
}

/* Diaria nel form incorporato: i pagamenti (Carta/Fattura) non ci sono, quindi i figli sono una riga in meno
   di quelle dichiarate da expense-create-v2.css e la Note finiva in una riga "auto" schiacciata. */
body.nh-v2 .nh-day-final .nh-dg-body > .exv2-page:not(.nh-dex) .exv2-form.is-diaria {
  grid-template-rows: repeat(4, auto) var(--exv2-note-row);
}

body.nh-v2 .nh-day-final .nh-dg-body > .exv2-page:not(.nh-dex) .exv2-form.is-diaria.has-company {
  grid-template-rows: repeat(5, auto) var(--exv2-note-row);
}

body.nh-v2 .nh-day-final .nh-dg-body > .exv2-page:not(.nh-dex) .exv2-form.is-diaria.is-compact {
  grid-template-rows: repeat(4, auto) auto;
}

body.nh-v2 .nh-day-final .nh-dg-body > .exv2-page:not(.nh-dex) .exv2-form.is-diaria.is-compact.has-company {
  grid-template-rows: repeat(5, auto) auto;
}