/* Restyle pagina "Timbrature" (docs/PianoRestyleTimbrature.md). Ogni regola sta sotto body.nh-v2: in produzione
   il foglio e' inerte. NON contiene e non deve contenere selettori degli interni della SmartTable (.smart-table-*, .data-table,
   intestazioni, barra, righe, piede): la grafica della tabella condivisa e' in redesign e arriva da li'. Niente selettori della
   Pianificazione ne' delle Timbrature aggregate.
   Per tornare indietro: togliere il <link> e la proprieta' TimbratureV2CssHref in App.razor, oppure git revert; tag di ritorno pre-restyle-timbrature. */

/* ===== Fase 1: fascia dei controlli ===== */
/* La scheda non ha padding proprio: la fascia, la striscia dei giorni e la tabella condivisa stanno a filo. */
body.nh-v2 .presence-v2-surface {
  position: relative;
  margin-inline: 28px;
  padding: 0;
  overflow: visible;
}

body.nh-v2 .presence-v2-ctrl {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  padding: 12px 16px 0;
  border-bottom: 1px solid var(--border);
}

/* Contenitore del periodo: il pannello si ancora alla fascia, non al pulsante. */
body.nh-v2 .presence-v2-ctrl .presence-v2-period {
  position: static;
  display: block;
  margin-bottom: 6px;
}

body.nh-v2 .presence-v2-period-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

body.nh-v2 .presence-v2-period-btn:hover {
  border-color: var(--muted);
}

body.nh-v2 .presence-v2-period[open] > .presence-v2-period-btn {
  border-color: var(--primary);
}

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

body.nh-v2 .presence-v2-ic {
  flex: none;
  color: var(--muted);
}

body.nh-v2 .presence-v2-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 16px;
  z-index: 30;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 20px;
  width: min(640px, calc(100% - 32px));
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 22px 40px -14px rgba(15, 23, 42, .38);
}

body.nh-v2 .presence-v2-presets {
  display: grid;
  align-content: start;
  gap: 2px;
  padding-right: 16px;
  border-right: 1px solid var(--border);
}

body.nh-v2 .presence-v2-presets button {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

body.nh-v2 .presence-v2-presets button:hover,
body.nh-v2 .presence-v2-presets button[aria-current="true"] {
  background: var(--primary-soft);
  color: var(--primary-strong);
}

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

body.nh-v2 .presence-v2-fields {
  display: grid;
  align-content: space-between;
  gap: 18px;
}

body.nh-v2 .presence-v2-dates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* Etichetta come negli altri moduli v2 (il sito forza "label" a 600 con !important). */
body.nh-v2 .presence-v2-date > label {
  color: #334155;
  font-size: 12.5px;
  font-weight: 500 !important;
  line-height: 15px;
  text-transform: none;
}

body.nh-v2 .presence-v2-apply {
  display: flex;
  justify-content: flex-end;
}

/* Tab profilo: aspetto da .settings-tabs (detail-v2.css) e .tab-count; qui solo il posto nella fascia. */
body.nh-v2 .presence-v2-ctrl .settings-tabs.settings-tabs {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  margin-bottom: 0;
}

body.nh-v2 .presence-v2-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

/* Striscia dei giorni dentro la scheda: solo rientro (lo stile e' della fase 3). */
body.nh-v2 .presence-v2-surface .presence-day-strip {
  padding: 12px 16px;
}

/* ===== Riepilogo timbrature (pagina /attivita/riepilogo-timbrature, prototipo docs/PropostaRiepilogoTimbrature.html) =====
   Stati: Lavorato = verde del tema (--primary), Non lavorato grigio neutro, Da lavorare (stato interno ToManage, "Da gestire") ambra, Da rivedere arancione, Da correggere rosso, Futuro tratteggiato
   neutro. Nella matrice solo colore (decisione 2026-10-12: il nome dello stato sta nell'aria-label della cella e nella legenda);
   la tabella del mese tiene il badge con simbolo. Mese senza attivita' = trattino, solo spese = cella neutra.
   Niente selettori degli interni della SmartTable. */
body.nh-v2 .month-page {
  --month-slate: color-mix(in srgb, var(--text) 72%, var(--muted));
  /* Ambra e arancione non hanno un token del sito: definiti qui una volta sola. */
  --month-todo: #d97706;
  --month-todo-soft: #fff4d6;
  --month-todo-line: #f4b74a;
  --month-todo-ink: #8a4a05;
  --month-rev: #ea580c;
  --month-rev-soft: #ffefdd;
  --month-rev-line: var(--warning);
  --month-rev-ink: #9a3412;
  --month-corr-line: color-mix(in srgb, var(--danger) 50%, white);
  --month-corr-ink: var(--test-environment-red-strong);
  /* Non lavorato: grigio neutro del sito (mai l'unico segnale: il nome e il simbolo ci sono sempre). */
  --month-nw: var(--muted);
  --month-nw-soft: var(--surface-soft);
  --month-nw-line: var(--muted);
  --month-nw-ink: var(--month-slate);
  padding: 18px 18px 20px;
}

body.nh-v2 .month-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  margin-bottom: 18px;
}

body.nh-v2 .month-filters .month-year-field { width: 104px; }
body.nh-v2 .month-filters .month-op-field { width: 240px; }
body.nh-v2 .month-filters .month-state-field { width: 190px; }

body.nh-v2 .month-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  margin-left: auto;
  padding-bottom: 8px;
  color: var(--month-slate);
  font-size: 13.5px;
  font-weight: 600;
}

body.nh-v2 .month-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

body.nh-v2 .month-tabs { margin-bottom: 20px; }

/* Quadratino della legenda: stesso aspetto della cella di stato (bordo + fondo). */
body.nh-v2 .month-sw {
  display: inline-block;
  flex: none;
  width: 22px;
  height: 14px;
  border: 1.5px solid;
  border-radius: 4px;
}
body.nh-v2 .month-sw.is-ok { border-color: rgba(var(--primary-rgb), .55); background: var(--primary-soft); }
body.nh-v2 .month-sw.is-nw { border-color: var(--month-nw-line); background: var(--month-nw-soft); }
body.nh-v2 .month-sw.is-todo { border-color: var(--month-todo-line); background: var(--month-todo-soft); }
body.nh-v2 .month-sw.is-rev { border-color: var(--month-rev-line); background: var(--month-rev-soft); }
body.nh-v2 .month-sw.is-corr { border-color: var(--month-corr-line); background: var(--danger-soft); }
body.nh-v2 .month-sw.is-fut { border-style: dashed; border-color: var(--border-strong); background: none; }
body.nh-v2 .month-sw.is-exp { border-color: var(--border-strong); background: var(--surface-soft); }

/* Simbolo di stato: cerchio pieno col segno dentro, il tratteggio per il futuro. */
body.nh-v2 .month-sym {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--surface);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}
body.nh-v2 .month-sym.is-nw { background: var(--month-nw); }
body.nh-v2 .month-sym.is-todo { background: var(--month-todo); }
body.nh-v2 .month-sym.is-rev { background: var(--month-rev); }
body.nh-v2 .month-sym.is-corr { background: var(--danger); }
body.nh-v2 .month-sym.is-fut { background: none; border: 1.5px dashed var(--muted); color: var(--muted); }

/* ---- matrice operatori x mesi ---- */
body.nh-v2 .month-matrix-wrap {
  overflow-x: auto;
  margin: 0 -4px;
  padding: 0 4px 4px;
}

body.nh-v2 .month-matrix {
  width: 100%;
  min-width: 980px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

body.nh-v2 .month-matrix col.month-col-op { width: 280px; }
body.nh-v2 .month-matrix col.month-col-year { width: 98px; }
/* Mese vuoto per tutti gli operatori: colonna raccolta, il resto si divide lo spazio rimasto. */
body.nh-v2 .month-matrix col.month-col-thin { width: 44px; }

body.nh-v2 .month-matrix th,
body.nh-v2 .month-matrix td {
  padding: 0;
  vertical-align: middle;
}

body.nh-v2 .month-matrix thead th {
  padding: 0 3px 8px;
  font-weight: 400;
  text-align: center;
  vertical-align: bottom;
}

body.nh-v2 .month-matrix thead th.is-left { padding-left: 8px; text-align: left; }

body.nh-v2 .month-mon,
body.nh-v2 .month-yh {
  display: grid;
  justify-items: center;
  gap: 1px;
  width: 100%;
  padding: 6px 2px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

body.nh-v2 .month-mon > b,
body.nh-v2 .month-yh > b { color: var(--text); font-size: 14.5px; font-weight: 800; }
body.nh-v2 button.month-mon { cursor: pointer; }
body.nh-v2 button.month-mon:hover { border-color: var(--border); background: var(--surface-soft); }
body.nh-v2 .month-mon.is-fut { cursor: default; }
body.nh-v2 .month-mon.is-thin { padding-left: 0; padding-right: 0; }
body.nh-v2 .month-mon.is-thin > b { color: var(--muted); font-size: 12.5px; font-weight: 700; }

body.nh-v2 .month-matrix tbody tr > * { border-top: 1px solid var(--border); }
body.nh-v2 .month-matrix tbody tr:first-child > * { border-top: 0; }
body.nh-v2 .month-matrix tbody td { height: 62px; padding: 3px; }
body.nh-v2 .month-matrix tbody td.is-op { padding-left: 8px; }

body.nh-v2 .month-name {
  color: var(--primary-ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

body.nh-v2 .month-mini.btn { height: 30px; padding: 0 10px; font-size: 12.5px; font-weight: 800; }

/* Nome e "Assenza manuale" sempre sulla stessa riga: il pulsante resta a fianco del nome, mai sotto. */
body.nh-v2 .month-op { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; white-space: nowrap; }
body.nh-v2 .month-op-btn.btn { flex: none; height: 26px; padding: 0 10px; font-size: 12px; font-weight: 700; }

/* Cella: e' essa stessa il collegamento alla dashboard del mese. */
body.nh-v2 .month-cell {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1px;
  width: 100%;
  height: 54px;
  padding: 4px 2px;
  border: 1.5px solid;
  border-radius: 9px;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  text-decoration: none;
  transition: transform .16s cubic-bezier(.16, 1, .3, 1), box-shadow .16s;
}

body.nh-v2 a.month-cell:hover { transform: translateY(-1px); box-shadow: 0 8px 14px -8px color-mix(in srgb, var(--text) 40%, transparent); }
body.nh-v2 .month-cell-top { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 800; }
body.nh-v2 .month-cell-eu { font-size: 11.5px; font-weight: 600; opacity: .88; }

body.nh-v2 .month-cell.is-ok { border-color: rgba(var(--primary-rgb), .55); background: var(--primary-soft); color: var(--primary-ink); }
body.nh-v2 .month-cell.is-nw { border-color: var(--month-nw-line); background: var(--month-nw-soft); color: var(--month-nw-ink); }
body.nh-v2 .month-cell.is-todo { border-color: var(--month-todo-line); background: var(--month-todo-soft); color: var(--month-todo-ink); }
body.nh-v2 .month-cell.is-rev { border-color: var(--month-rev-line); background: var(--month-rev-soft); color: var(--month-rev-ink); }
body.nh-v2 .month-cell.is-corr { border-color: var(--month-corr-line); background: var(--danger-soft); color: var(--month-corr-ink); }
body.nh-v2 .month-cell.is-fut { border: 1.5px dashed var(--border-strong); background: none; color: var(--muted); }
body.nh-v2 .month-cell.is-expense { border-color: var(--border-strong); background: var(--surface-soft); color: var(--month-slate); }
/* Senza timbrature: solo un trattino; il riquadro neutro compare a hover e da tastiera. */
body.nh-v2 .month-cell.is-empty { border-color: transparent; background: none; color: var(--muted); font-size: 15px; font-weight: 400; }
body.nh-v2 a.month-cell.is-empty:hover,
body.nh-v2 a.month-cell.is-empty:focus-visible { border-color: var(--border-strong); background: var(--surface-soft); box-shadow: none; transform: none; }
body.nh-v2 a.month-cell.is-empty:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

body.nh-v2 .month-year-total { padding: 0 4px; text-align: center; line-height: 1.2; }
body.nh-v2 .month-year-total > b { display: block; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
body.nh-v2 .month-year-total > span { color: var(--muted); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- tabella del mese ---- */
body.nh-v2 .month-table {
  width: 100%;
  min-width: 1000px;
  border-collapse: collapse;
  font-size: 14.5px;
}

body.nh-v2 .month-table th {
  padding: 10px 9px;
  border-bottom: 2px solid var(--border-strong);
  background: var(--surface-soft);
  color: var(--month-slate);
  font-size: 13px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

body.nh-v2 .month-table td {
  padding: 9px 9px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  text-align: right;
  vertical-align: middle;
}

body.nh-v2 .month-table th.is-left,
body.nh-v2 .month-table td.is-left { text-align: left; }
body.nh-v2 .month-table th.is-center,
body.nh-v2 .month-table td.is-center { text-align: center; }
body.nh-v2 .month-table tbody tr:hover { background: var(--surface-soft); }
body.nh-v2 .month-table td.is-zero { color: var(--muted); }
body.nh-v2 .month-table td.month-corr { color: var(--month-corr-ink); font-weight: 800; }
body.nh-v2 .month-table tfoot td { border-top: 2px solid var(--border-strong); border-bottom: 0; background: var(--surface-soft); font-weight: 800; }
body.nh-v2 .month-actions { white-space: nowrap; }
body.nh-v2 .month-actions > * + * { margin-left: 6px; }

body.nh-v2 .month-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px 0 7px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
body.nh-v2 .month-badge.is-ok { border-color: rgba(var(--primary-rgb), .5); background: var(--primary-soft); color: var(--primary-ink); }
body.nh-v2 .month-badge.is-nw { border-color: var(--month-nw-line); background: var(--month-nw-soft); color: var(--month-nw-ink); }
body.nh-v2 .month-badge.is-todo { border-color: var(--month-todo-line); background: var(--month-todo-soft); color: var(--month-todo-ink); }
body.nh-v2 .month-badge.is-rev { border-color: var(--month-rev-line); background: var(--month-rev-soft); color: var(--month-rev-ink); }
body.nh-v2 .month-badge.is-corr { border-color: var(--month-corr-line); background: var(--danger-soft); color: var(--month-corr-ink); }
body.nh-v2 .month-badge.is-fut { border: 1px dashed var(--border-strong); background: none; color: var(--muted); }
body.nh-v2 .month-why { margin-top: 3px; color: var(--month-rev-ink); font-size: 12.5px; font-weight: 700; }

/* ---- caricamento e stati vuoti ---- */
body.nh-v2 .month-skeleton { display: grid; gap: 10px; padding-top: 6px; }
body.nh-v2 .month-skeleton i {
  display: block;
  height: 54px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-soft);
  animation: month-pulse 1.4s ease-in-out infinite;
}
body.nh-v2 .month-skeleton i:first-child { height: 58px; }
@keyframes month-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  body.nh-v2 .month-skeleton i { animation: none; }
  body.nh-v2 .month-cell { transition: none; }
}

body.nh-v2 .month-ghost {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 210px;
  border: 2px dashed var(--border-strong);
  border-radius: 12px;
  background: none;
  color: var(--primary-ink);
  font-size: 16px;
  font-weight: 800;
}
/* Riga fantasma "Azzera filtri" resa da BlazorActionButton (classe .btn): si riprendono le misure e i colori della riga. */
body.nh-v2 .btn.month-ghost {
  height: auto;
  min-height: 210px;
  padding: 0;
  border: 2px dashed var(--border-strong);
  border-radius: 12px;
  background: none;
  color: var(--primary-ink);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  box-shadow: none;
  cursor: pointer;
}
body.nh-v2 .btn.month-ghost:hover,
body.nh-v2 .btn.month-ghost:focus-visible { border-color: rgba(var(--primary-rgb), .6); background: var(--primary-soft); color: var(--primary-ink); }
body.nh-v2 .btn.month-ghost:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
body.nh-v2 .month-ghost > span { display: inline-flex; align-items: center; gap: 10px; }

/* ===== Fase 2: pannello "La giornata" (TimeStampsDayPanel) ===== */
/* Banda come la testata della modale Giornata. Le variabili --nh-* le usano gli stili della linea del tempo (.nh-dl*, day-modal-v2.css),
   che le definisce solo dentro la modale: qui stessi valori, misure fisse. */
body.nh-v2 .presence-v2-day {
  --nh-ink2: #475569;
  --nh-danger-ink: var(--test-environment-red-strong);
  --nh-amber-ink: #92400e;
  --nh-ok-ink2: #065f46;
  --nh-primary-ink: var(--primary-ink);
  --nh-axis: 14px;
  --nh-trk: 26px;
  --nh-chp: 20px;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  padding: 14px 20px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
}

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

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

body.nh-v2 .pv2d-kpi,
body.nh-v2 .pv2d-main {
  min-width: 0;
}

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

body.nh-v2 .pv2d-kpi-v {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  margin: 4px 0 10px;
  color: var(--text);
  line-height: 1;
}

body.nh-v2 .pv2d-kpi-v output {
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

body.nh-v2 .pv2d-kpi-v small {
  margin-right: 8px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
}

body.nh-v2 .pv2d-dl {
  display: grid;
  gap: 3px;
  margin: 0;
  max-width: 210px;
}

body.nh-v2 .pv2d-dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

body.nh-v2 .pv2d-dl dt {
  color: var(--nh-ink2, #475569);
  font-size: 12.5px;
  font-weight: 500;
}

body.nh-v2 .pv2d-dl dd {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Vista periodo: asse comune in alto (resta fermo), una riga per giorno. */
body.nh-v2 .pv2d-plist {
  max-height: 210px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

body.nh-v2 .pv2d-pax,
body.nh-v2 .pv2d-prow {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 12px;
  padding: 0 4px;
}

body.nh-v2 .pv2d-pax {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 16px;
  background: var(--surface-soft);
}

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

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

body.nh-v2 .pv2d-prow {
  appearance: none;
  width: 100%;
  height: 26px;
  margin: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .12s;
}

body.nh-v2 .pv2d-prow:hover {
  background: var(--surface);
}

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

body.nh-v2 .pv2d-pd {
  color: var(--nh-ink2, #475569);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

body.nh-v2 .pv2d-ptrack {
  position: relative;
  display: block;
  height: 12px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--bg-soft);
}

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

body.nh-v2 .pv2d-ptrack > b {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-radius: 4px;
  background: var(--primary-strong);
}

body.nh-v2 .pv2d-ptrack > b.is-open {
  box-sizing: border-box;
  border: 1.5px dashed var(--primary);
  background: var(--primary-soft);
}

body.nh-v2 .pv2d-ph {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Nessuna timbratura: la pista vuota tratteggiata e' il pulsante "Aggiungi timbratura". */
body.nh-v2 .presence-v2-day .pv2d-empty.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 90px;
  padding: 0 16px;
  border: 1.5px dashed var(--border-strong);
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: var(--nh-ink2, #475569);
  font-size: 13.5px;
  font-weight: 600;
  transition: border-color .12s, color .12s, background-color .12s;
}

body.nh-v2 .presence-v2-day .pv2d-empty.btn:hover:not(:disabled) {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-strong);
}

body.nh-v2 .presence-v2-day .pv2d-empty.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

body.nh-v2 .presence-v2-day .pv2d-empty.btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

body.nh-v2 .pv2d-empty-ic {
  flex: none;
  width: 16px;
  height: 16px;
}

@media (prefers-reduced-motion: reduce) {
  body.nh-v2 .pv2d-prow,
  body.nh-v2 .presence-v2-day .pv2d-empty.btn {
    transition: none;
  }
}

/* ===== Fase 3: striscia dei giorni (PresenceDayStripPicker con Compact) ===== */
/* Stile unico: un bordo, ore lavorate sotto ogni giorno, "Tutti" a due righe, oggi con anello, selezionato pieno. */
body.nh-v2 .presence-v2-surface .presence-day-strip.is-compact {
  align-items: center;
  gap: 8px;
}

body.nh-v2 .presence-v2-surface .is-compact .day-strip-cards {
  gap: 6px;
  flex-wrap: wrap;
}

body.nh-v2 .presence-v2-surface .is-compact .day-all-pill,
body.nh-v2 .presence-v2-surface .is-compact .day-card {
  gap: 1px;
  height: 56px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  line-height: 1.1;
  transition: border-color .15s ease, background-color .15s ease;
}

body.nh-v2 .presence-v2-surface .is-compact .day-all-pill {
  width: auto;
  min-width: 76px;
  padding: 0 12px;
}

body.nh-v2 .presence-v2-surface .is-compact .day-all-pill-value {
  font-size: 15px;
  font-weight: 700;
}

body.nh-v2 .presence-v2-surface .is-compact .day-all-pill-count {
  font-size: 12px;
  font-weight: 500;
  opacity: 1;
  color: var(--muted);
}

body.nh-v2 .presence-v2-surface .is-compact .day-card {
  flex: 0 0 52px;
  min-width: 0;
  max-width: none;
  width: 52px;
}

body.nh-v2 .presence-v2-surface .is-compact .day-card-weekday {
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0;
  color: var(--muted);
}

body.nh-v2 .presence-v2-surface .is-compact .day-card-number {
  margin-top: 0;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  color: var(--text);
}

body.nh-v2 .presence-v2-surface .is-compact .day-card-hours {
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--primary-ink);
}

/* Giorno senza timbrature: bordo tratteggiato, trattino al posto delle ore. */
body.nh-v2 .presence-v2-surface .is-compact .day-card.is-empty {
  background: transparent;
  border-style: dashed;
}

body.nh-v2 .presence-v2-surface .is-compact .day-card.is-empty .day-card-hours {
  color: var(--muted);
}

body.nh-v2 .presence-v2-surface .is-compact .day-all-pill:hover:not(.active),
body.nh-v2 .presence-v2-surface .is-compact .day-card:hover:not(:disabled):not(.is-selected):not(.is-today) {
  border-color: var(--border-strong);
}

/* Oggi: anello interno col colore primario, senza cambiare il riempimento. */
body.nh-v2 .presence-v2-surface .is-compact .day-card.is-today:not(.is-selected) {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

body.nh-v2 .presence-v2-surface .is-compact .day-card.is-today:not(.is-selected) .day-card-weekday {
  color: var(--text);
}

/* Selezionato ("Tutti" compreso): pieno col primario, testi bianchi. */
body.nh-v2 .presence-v2-surface .is-compact .day-all-pill.active,
body.nh-v2 .presence-v2-surface .is-compact .day-card.is-selected {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: none;
}

body.nh-v2 .presence-v2-surface .is-compact .day-all-pill.active .day-all-pill-value,
body.nh-v2 .presence-v2-surface .is-compact .day-all-pill.active .day-all-pill-count,
body.nh-v2 .presence-v2-surface .is-compact .day-card.is-selected .day-card-weekday,
body.nh-v2 .presence-v2-surface .is-compact .day-card.is-selected .day-card-number,
body.nh-v2 .presence-v2-surface .is-compact .day-card.is-selected .day-card-hours {
  color: #fff;
}

body.nh-v2 .presence-v2-surface .is-compact .day-card.is-future {
  opacity: .4;
  background: var(--surface);
  border-color: var(--border);
}

body.nh-v2 .presence-v2-surface .is-compact .day-all-pill:focus-visible,
body.nh-v2 .presence-v2-surface .is-compact .day-card:focus-visible,
body.nh-v2 .presence-v2-surface .is-compact .day-page-nav:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

body.nh-v2 .presence-v2-surface .is-compact .day-page-nav {
  height: 56px;
  border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
  body.nh-v2 .presence-v2-surface .is-compact .day-all-pill,
  body.nh-v2 .presence-v2-surface .is-compact .day-card {
    transition: none;
  }
}

/* ===== Fase 5: pagina timbratura (editor a pagina intera) =====
   I campi li stila gia' forms-v2.css (.settings-form-grid): qui solo cio' che manca. */
body.nh-v2 .presence-stamp-editor-page .stamp-multi-block {
  gap: 10px;
}

/* Allegati gia' presenti: elenco di link sotto l'etichetta del campo, senza riquadro. */
body.nh-v2 .presence-stamp-editor-page .timestamp-existing-attachments-list {
  gap: 6px 16px;
  padding-top: 2px;
}

/* ===== Inserimento multiplo di giornate (pagina /attivita/dashboard-timbrature/inserimento-multiplo) =====
   Stessi token e raggi della modale Giornata; punto focale: la linea del tempo di ogni giornata. */
body.nh-v2 .batch-page {
  --batch-ok-ink: #065f46;
  --batch-amber-ink: #92400e;
  display: grid;
  gap: 16px;
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 4px 0 24px;
}

body.nh-v2 .batch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

body.nh-v2 .batch-head h1 {
  margin: 0;
  color: var(--text);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
}

body.nh-v2 .batch-who,
body.nh-v2 .batch-template,
body.nh-v2 .batch-days {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

body.nh-v2 .batch-who {
  padding: 16px 20px;
}

body.nh-v2 .batch-template,
body.nh-v2 .batch-days {
  display: grid;
  gap: 12px;
  padding: 16px 20px 20px;
}

body.nh-v2 .batch-title {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

body.nh-v2 .batch-lines {
  display: grid;
  gap: 8px;
}

/* Righe dell'orario tipo: Ora stretta, il resto si divide lo spazio. */
body.nh-v2 .batch-line-row {
  grid-template-columns: 130px repeat(3, minmax(0, 1fr)) auto;
}

body.nh-v2 .batch-line-row.is-no-job {
  grid-template-columns: 130px repeat(2, minmax(0, 1fr)) auto;
}

/* ----- Elenco giornate ----- */
body.nh-v2 .batch-day {
  display: grid;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  transition: background-color .15s ease, border-color .15s ease;
}

body.nh-v2 .batch-day.is-selected {
  border-color: var(--primary);
  background: var(--surface);
}

body.nh-v2 .batch-day.is-saved {
  border-color: var(--success);
  background: var(--success-soft);
  box-shadow: none;
}

body.nh-v2 .batch-day-main {
  display: grid;
  grid-template-columns: 124px 228px minmax(0, 1fr) 60px 124px;
  align-items: center;
  column-gap: 14px;
}

body.nh-v2 .batch-day-check {
  grid-column: 1;
  font-weight: 700;
  text-transform: capitalize;
}

/* Giornata saltata: niente opacita' (testo a contrasto pieno); i blocchi si schiariscono con il colore, non con la trasparenza. */
body.nh-v2 .batch-day.is-skipped:not(.is-selected) .batch-tl-block:not(.is-pause):not(.is-open):not(.is-invalid) {
  background: color-mix(in srgb, var(--primary-strong) 72%, var(--surface));
}

body.nh-v2 .batch-day-reason {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(245, 158, 11, .18);
  color: var(--batch-amber-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.nh-v2 .batch-day-line {
  position: relative;
  grid-column: 3;
  height: 32px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

body.nh-v2 .batch-day:not(.is-selected) .batch-day-line {
  background: var(--surface-soft);
}

/* Linea senza blocchi: solo un filo tratteggiato centrale, niente riquadro vuoto. */
body.nh-v2 .batch-day-line:not(:has(.batch-tl-block)) {
  border-color: transparent;
  background: transparent;
}

body.nh-v2 .batch-day-line:not(:has(.batch-tl-block))::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  border-top: 2px dashed var(--muted);
}

body.nh-v2 .batch-tl-block {
  position: absolute;
  top: 5px;
  bottom: 5px;
  min-width: 4px;
  border-radius: 6px;
  background: var(--primary-strong);
}

body.nh-v2 .batch-tl-block.is-pause {
  border: 2px dashed var(--border-strong);
  background: transparent;
}

body.nh-v2 .batch-tl-block.is-open,
body.nh-v2 .batch-tl-block.is-invalid {
  border: 2px dashed var(--danger);
  background: var(--danger-soft);
}

body.nh-v2 .batch-day-hours {
  grid-column: 4;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

body.nh-v2 .batch-day-main > .btn,
body.nh-v2 .batch-day-main > button,
body.nh-v2 .batch-day-done {
  grid-column: 5;
  justify-self: end;
}

body.nh-v2 .batch-day-done {
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(5, 150, 105, .14);
  color: var(--batch-ok-ink);
  font-size: 13px;
  font-weight: 700;
}

body.nh-v2 .batch-day-custom {
  padding-top: 10px;
  border-top: 1px dashed var(--border-strong);
}

/* Esito per giorno dopo il salvataggio. */
body.nh-v2 .batch-day-result {
  justify-self: start;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 18px;
}

body.nh-v2 .batch-day-result.is-saved { background: rgba(5, 150, 105, .14); color: var(--batch-ok-ink); }
body.nh-v2 .batch-day-result.is-skipped { background: rgba(245, 158, 11, .18); color: var(--batch-amber-ink); }
body.nh-v2 .batch-day-result.is-failed { background: rgba(220, 38, 38, .12); color: var(--test-environment-red-strong); }

/* Giorno riattivato: motivo e numero di timbrature gia' presenti nella stessa cella. */
body.nh-v2 .batch-day-tags {
  grid-column: 2;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
}

body.nh-v2 .batch-day-tags .batch-day-reason {
  grid-column: auto;
  flex: 0 1 auto;
}

body.nh-v2 .batch-day-existing {
  flex: none;
  padding: 2px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  white-space: nowrap;
}

/* Stato vuoto: binario tratteggiato, nessuna frase. */
body.nh-v2 .batch-days .batch-empty {
  min-height: 84px;
  border: 2px dashed var(--border-strong);
  border-radius: 8px;
  background: transparent;
}

/* ----- Barra in basso: totale, avvisi, Salva ----- */
body.nh-v2 .batch-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 -6px 16px rgba(15, 23, 42, .06);
}

body.nh-v2 .batch-total {
  margin-right: auto;
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

body.nh-v2 .batch-warning {
  flex: 1 1 280px;
  min-width: 0;
  max-width: fit-content;
  padding: 3px 10px;
  border-radius: 12px;
  line-height: 18px;
  background: rgba(245, 158, 11, .18);
  color: var(--batch-amber-ink);
  font-size: 12.5px;
  font-weight: 700;
}

body.nh-v2 .batch-bar .batch-save {
  flex: none;
  min-width: 140px;
  min-height: 40px;
  font-weight: 700;
}

/* Spazio in fondo alla lista: la barra sticky non copre le ultime giornate. */
body.nh-v2 .batch-days {
  padding-bottom: 28px;
}

@media (max-width: 1100px) {
  body.nh-v2 .batch-day-main { grid-template-columns: 112px 212px minmax(0, 1fr) 54px 112px; column-gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  body.nh-v2 .batch-day { transition: none; }
}

body.nh-v2 .batch-who.settings-form-grid {
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 1fr);
  grid-template-columns: minmax(240px, 2fr);
  align-items: end;
}

/* Nuova timbratura del dipendente (stessa pagina senza la scelta del dipendente): Dal, Al e Profilo accanto. */
body.nh-v2 .batch-who.batch-who--own.settings-form-grid {
  grid-template-columns: repeat(3, minmax(150px, 220px));
  grid-auto-columns: minmax(150px, 220px);
  justify-content: start;
}

/* Nota e allegati della giornata, dentro l'area personalizzata. */
body.nh-v2 .batch-day-custom {
  display: grid;
  gap: 12px;
}

body.nh-v2 .batch-day-extras.settings-form-grid {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
}

/* ===== Timbrature inserite dal controller (ind_timbratura_tipo = 3) =====
   Stessa forma a pillola delle manuali (ambra) ma riempimento pieno blu scuro: non si confonde con app, manuale o da correggere.
   Il colore non e' mai l'unico segnale: legenda, nome accessibile ("inserita dal controller") e pillola "Controller" nelle tabelle.
   Il "da correggere" (rosso) prevale sempre sull'origine. */
body.nh-v2 .report-stamp-cell-controller.report-stamp-cell-missed .report-stamp-list,
body.nh-v2 .report-stamp-cell-controller.report-stamp-cell-missed strong {
  background: var(--primary-deep);
  color: var(--surface);
  box-shadow: 0 0 0 5px rgba(30, 64, 175, .12);
}

body.nh-v2 .status-pill.status-ctl {
  border-color: var(--primary-deep);
  background: var(--primary-deep);
  color: var(--surface);
}

body.nh-v2 .status-pill.status-ctl::before { background: var(--surface); }

/* ===== Mese colorato dallo stato complessivo (TimeStampMonthBoardRules.MonthState) =====
   Sigla del mese nella matrice e titolo della scheda del mese: stesse tinte degli stati della cella. Il nome dello stato sta nel nome
   accessibile (aria-label); un mese futuro o vuoto per tutti resta neutro. */
body.nh-v2 .month-mon.is-st-ok { border-color: rgba(var(--primary-rgb), .5); background: var(--primary-soft); }
body.nh-v2 .month-mon.is-st-ok > b { color: var(--primary-ink); }
body.nh-v2 .month-mon.is-st-nw { border-color: var(--month-nw-line); background: var(--month-nw-soft); }
body.nh-v2 .month-mon.is-st-nw > b { color: var(--month-nw-ink); }
body.nh-v2 .month-mon.is-st-todo { border-color: var(--month-todo-line); background: var(--month-todo-soft); }
body.nh-v2 .month-mon.is-st-todo > b { color: var(--month-todo-ink); }
body.nh-v2 .month-mon.is-st-rev { border-color: var(--month-rev-line); background: var(--month-rev-soft); }
body.nh-v2 .month-mon.is-st-rev > b { color: var(--month-rev-ink); }
body.nh-v2 .month-mon.is-st-corr { border-color: var(--month-corr-line); background: var(--danger-soft); }
body.nh-v2 .month-mon.is-st-corr > b { color: var(--month-corr-ink); }
body.nh-v2 button.month-mon[class*="is-st-"]:not(.is-st-fut):hover { filter: brightness(.97); }

body.nh-v2 .month-tabs .month-tab.is-st-ok { color: var(--primary-ink); }
body.nh-v2 .month-tabs .month-tab.is-st-nw { color: var(--month-nw-ink); }
body.nh-v2 .month-tabs .month-tab.is-st-todo { color: var(--month-todo-ink); }
body.nh-v2 .month-tabs .month-tab.is-st-rev { color: var(--month-rev-ink); }
body.nh-v2 .month-tabs .month-tab.is-st-corr { color: var(--month-corr-ink); }
body.nh-v2 .month-tabs .month-tab[class*="is-st-"]:not(.is-st-fut) { font-weight: 800; }

/* Colonna azioni delle giornate (dashboard): matita e occhio del motivo anomalia affiancati a sinistra. */
/* Matita sempre nello stesso punto (allineata a sinistra, padding fisso); l'occhio, quando c'e', le sta subito a destra senza spostarla. */
body.nh-v2 .report-edit-actions { display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 6px; }
/* Pulsante 34 + gap 6 + occhio 22 = 62px di contenuto: colonna da 72 con 4px di margine per lato (era 60), tabella +12px. */
body.nh-v2 #reports-table { min-width: 2074px; }
body.nh-v2 #reports-table td.report-edit-cell { padding-left: 6px; padding-right: 2px; text-align: left; }
body.nh-v2 #reports-table th.report-col-edit { width: 72px; min-width: 72px; }

/* Scheda del mese (vista classica): freccia indietro + titolo del mese con la tinta dello stato, al posto della barra Anno | Mese. */
body.nh-v2 .month-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; outline: none; }
body.nh-v2 .month-head .month-title { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2; color: var(--text); }
body.nh-v2 .month-head .month-title.is-st-ok { color: var(--primary-ink); }
body.nh-v2 .month-head .month-title.is-st-nw { color: var(--month-nw-ink); }
body.nh-v2 .month-head .month-title.is-st-todo { color: var(--month-todo-ink); }
body.nh-v2 .month-head .month-title.is-st-rev { color: var(--month-rev-ink); }
body.nh-v2 .month-head .month-title.is-st-corr { color: var(--month-corr-ink); }

/* Tabella Timbrature: stessa regola della dashboard, matita ferma a sinistra della cella e occhio del motivo anomalia subito dopo. */
body.nh-v2 .presence-stamps-table .row-actions.row-actions--start { justify-content: flex-start; flex-wrap: nowrap; }

/* Dashboard: colonna Modalita' (pillola compatta, in attesa tratteggiata, segnale di timbrature diverse). */
body.nh-v2 .report-col-mode { width: 1%; white-space: nowrap; }
body.nh-v2 #reports-table th.report-col-mode { width: 152px; min-width: 152px; }
body.nh-v2 .nh-dmode-pill.is-compact { min-height: 24px; padding: 0 9px 0 7px; gap: 5px; font-size: 12px; }
body.nh-v2 .nh-dmode-pill.is-compact .nh-dmode-ic { width: 14px; height: 14px; }
body.nh-v2 .nh-dmode-pill.is-pending { background: var(--surface); border-style: dashed; }
body.nh-v2 .nh-dmode-pill.is-compact.is-plain { padding: 0 9px; }
body.nh-v2 .report-mode-cell { display: inline-flex; align-items: center; gap: 6px; }
body.nh-v2 .report-mode-mismatch { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--surface)); border-radius: 999px; background: var(--danger-soft); color: var(--danger); cursor: pointer; }
body.nh-v2 span.report-mode-mismatch { cursor: default; }
body.nh-v2 .report-mode-mismatch svg { width: 13px; height: 13px; }
body.nh-v2 .report-mode-mismatch:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
body.nh-v2 .report-mode-none { color: var(--muted); font-weight: 700; }

/* Dashboard: "+N" timbrature oltre le colonne visibili. */
body.nh-v2 .report-stamp-multi { display: inline-flex; align-items: center; white-space: nowrap; }
/* Con il chip "+N" la colonna e' troppo stretta anche per il tipo: resta solo per i lettori di schermo (lo stato si legge dal colore della cella e dal title). */
body.nh-v2 .report-stamp-multi .report-stamp-real-type { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body.nh-v2 .report-stamp-more { display: inline-flex; align-items: center; min-height: 22px; margin-right: 6px; padding: 0 7px; border: 1px solid var(--primary-tint-13); border-radius: 999px; background: var(--primary-soft); color: var(--primary-strong); font: inherit; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; vertical-align: middle; }
body.nh-v2 button.report-stamp-more { cursor: pointer; }
body.nh-v2 button.report-stamp-more:hover { background: var(--primary-tint-9); }
body.nh-v2 .report-stamp-more:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Anomalia di sede (fuori raggio, smart working non richiesto): pillola modalita' e "+N" rossi come il segnale di modalita' diversa;
   al passaggio sull'occhio le timbrature segnalate prendono il contorno tratteggiato e compare il testo per timbratura. */
body.nh-v2 .nh-dmode-pill.is-bad { --dm-ink: var(--danger); --dm-tint: var(--danger-soft); --dm-line: color-mix(in srgb, var(--danger) 45%, var(--surface)); }
body.nh-v2 .report-stamp-more.is-site-flag { border-color: color-mix(in srgb, var(--danger) 45%, var(--surface)); background: var(--danger-soft); color: var(--danger); }
body.nh-v2 button.report-stamp-more.is-site-flag:hover { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); }
body.nh-v2 tr:has(.report-anomaly-indicator:is(:hover, :focus-visible)) .report-stamp-list.is-site-flag,
body.nh-v2 tr:has(.report-anomaly-indicator:is(:hover, :focus-visible)) .report-stamp-more.is-site-flag { outline: 2px dashed var(--danger); outline-offset: 3px; }
body.nh-v2 .report-anomaly-wrap { position: relative; display: inline-flex; }
body.nh-v2 .report-anomaly-wrap.has-tip:is(:hover, :focus-within)::after {
  content: attr(data-tip);
  /* fixed senza coordinate = resta nella posizione naturale ma non viene tagliato dal contenitore della tabella */
  position: fixed;
  z-index: 60;
  left: auto;
  top: auto;
  margin: 12px 0 0 32px;
  transform: translateY(-50%);
  width: max-content;
  max-width: 300px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 12px 28px -8px rgba(15, 23, 42, .35);
  color: var(--test-environment-red-strong);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  white-space: pre-line;
  pointer-events: none;
}
body.nh-v2 .report-tools-count, .report-columns-toggle .report-tools-count { margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-strong); font-size: 12px; font-weight: 800; }

/* Spese in sola lettura: tab Note spese della Giornata e modale "Note spese del mese" (stesse righe). */
body.nh-v2 .nh-exp { display: grid; gap: 12px; align-content: start; }
body.nh-v2 .nh-exp-table td, body.nh-v2 .nh-exp-table th { white-space: nowrap; }
body.nh-v2 .nh-exp-table td.desc { white-space: normal; min-width: 220px; }
body.nh-v2 .nh-exp-table tfoot td { font-weight: 800; border-top: 2px solid var(--border-strong); background: var(--surface-soft); }
body.nh-v2 .nh-exp-num { text-align: right; font-variant-numeric: tabular-nums; }
body.nh-v2 .nh-exp-cat { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--text); }
body.nh-v2 .nh-exp-cat i { width: 9px; height: 9px; border-radius: 3px; background: var(--c, var(--primary)); flex: none; }
body.nh-v2 .nh-exp-no { color: var(--muted); }
body.nh-v2 .nh-exp-yes { color: color-mix(in srgb, var(--success) 62%, var(--text)); font-weight: 700; }
body.nh-v2 .nh-exp-less { color: color-mix(in srgb, var(--danger) 72%, var(--text)); font-weight: 800; }
body.nh-v2 .nh-exp-table td > .status-pill + .table-name-link { margin-left: 8px; }
/* Titolo e numero della nota restano un blocco: se va a capo, il numero si allinea al titolo e non sotto il badge. */
body.nh-v2 .nh-exp-table td > .status-pill + .nh-exp-note { margin-left: 8px; }
body.nh-v2 .nh-exp-note { display: inline-block; vertical-align: middle; }
body.nh-v2 .nh-empty-slot { display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 220px; padding: 28px; border: 1.5px dashed var(--border-strong); border-radius: 14px; background: repeating-linear-gradient(135deg, var(--surface) 0 14px, var(--primary-tint-1) 14px 28px); text-align: center; }
body.nh-v2 .nh-empty-slot svg { width: 46px; height: 46px; color: var(--primary); }
body.nh-v2 .nh-empty-slot strong { font-size: 16px; font-weight: 800; color: var(--text); }
body.nh-v2 .nh-exp-month .nh-exp-month-body { display: grid; gap: 14px; padding: 16px 20px 20px; }
body.nh-v2 .nh-exp-month { width: min(94vw, 1240px); max-width: min(94vw, 1240px); }
/* La modale cresce col contenuto e scorre l'overlay (AllowFloatingContent, come le modali di Commesse): la testata con la chiusura resta in vista. */
/* top negativo = padding di .editor-modal (24px, site.css): lo sticky si ferma al bordo interno del padding e sopra resterebbe una fascia da cui si vedono le righe. */
body.nh-v2 .nh-exp-month.editor-dialog-floating-content > .surface-head { position: sticky; top: -24px; z-index: 2; }
body.nh-v2 .nh-exp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
body.nh-v2 .nh-exp-kpi { padding: 12px 18px; border-right: 1px solid var(--border); }
body.nh-v2 .nh-exp-kpi:last-child { border-right: 0; }
body.nh-v2 .nh-exp-kpi p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 700; }
body.nh-v2 .nh-exp-kpi output { display: block; margin-top: 2px; font-size: 28px; font-weight: 800; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
body.nh-v2 .nh-exp-kpi.is-ok output { color: color-mix(in srgb, var(--success) 62%, var(--text)); }
/* Blu fisso come nel prototipo: tutti i --primary-* seguono il colore tema dell'azienda (UserThemeColor), che puo' essere verde.
   Il valore e' il default di --primary-nav-deep in site.css, fissato qui perche' il tema non lo sovrascriva. */
body.nh-v2 .nh-exp-kpis { --nh-exp-fixed-blue: #0369a1; }
body.nh-v2 .nh-exp-kpi.is-pri output { color: var(--nh-exp-fixed-blue); }
body.nh-v2 .nh-exp-kpi.is-bar { display: grid; align-content: center; gap: 6px; min-width: 260px; }
body.nh-v2 .nh-exp-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-soft); border: 1px solid var(--border); }
body.nh-v2 .nh-exp-bar span { display: block; height: 100%; }
body.nh-v2 .nh-exp-tone-ok { background: var(--success); }
body.nh-v2 .nh-exp-tone-wait { background: var(--warning); }
body.nh-v2 .nh-exp-tone-ko { background: var(--danger); }
body.nh-v2 .nh-exp-legend { display: flex; gap: 12px; font-size: 12px; color: var(--muted); font-weight: 700; }
body.nh-v2 .nh-exp-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 3px; vertical-align: -1px; }
body.nh-v2 .nh-exp-table tr.nh-exp-group > td { background: var(--primary-tint-3); font-weight: 800; color: var(--text); }
body.nh-v2 .nh-exp-day { display: inline-flex; gap: 10px; align-items: center; }
body.nh-v2 .nh-exp-table tr.nh-exp-group .table-name-link { padding: 0; border: 0; background: transparent; font: inherit; font-weight: 800; cursor: pointer; }
/* Modalita' di lavoro della singola giornata nell'inserimento multiplo. */
body.nh-v2 .batch-day-mode {
  padding-top: 10px;
  border-top: 1px dashed var(--border-strong);
}
/* "Nuova spesa" nella Giornata: lo slot tratteggiato e' esso stesso il pulsante (stesso aspetto, in piu' mano e fuoco). */
body.nh-v2 button.nh-empty-slot { width: 100%; color: var(--text); font: inherit; cursor: pointer; transition: border-color .12s, background-color .12s; }
body.nh-v2 button.nh-empty-slot:hover { border-color: var(--primary); background: repeating-linear-gradient(135deg, var(--primary-soft) 0 14px, var(--primary-tint-1) 14px 28px); }
body.nh-v2 button.nh-empty-slot:hover strong { color: var(--primary-strong); }
body.nh-v2 button.nh-empty-slot:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* Dashboard: scelta delle colonne. Il pulsante sta a destra della legenda, fuori flusso (nessun ingombro in toolbar a nessuna larghezza). */
.report-legend-row { position: relative; }
.report-columns-toggle { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
/* Sotto 1280px la legenda (~750px) arriverebbe sotto il pulsante: riserva il suo spazio. Da 1280px in su la riga resta identica a prima. */
@media (max-width: 1279px) { .report-legend-row .report-stamp-legend { padding-right: 150px; } }
/* Popover ancorato al pulsante: si apre sotto la riga della legenda sopra la tabella (come .presence-v2-panel), senza riservare spazio ne' toccare toolbar e filtri. Assoluto e non fisso: segue la pagina; Ripristina e la X stanno in testata, sempre raggiungibili, e solo l'elenco scorre. Altezza = viewport meno barra del sito e una fascia per tenere in vista il pulsante Colonne. Lo sticky non regge (html/body hanno overflow-x hidden in site.css). */
.report-columns-panel { position: absolute; z-index: 50; top: calc(100% + 6px); right: 0; display: flex; flex-direction: column; width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - var(--topbar-height, 72px) - 88px); border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: 0 12px 28px -8px rgba(15, 23, 42, .35); overflow: hidden; }
/* Con una sola colonna straordinario la cella e' stretta: serve spazio per leggere "Sposta" nel combo. */
#reports-table th.report-col-wide.report-ot-single { width: 112px; min-width: 112px; }
.report-columns-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 10px; border-bottom: 1px solid var(--border); }
.report-columns-head-actions { display: flex; align-items: center; gap: 8px; }
.report-columns-head h2 { margin: 0; font-size: 16px; font-weight: 800; color: var(--text); }
.report-columns-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 4px; padding: 4px 16px 8px; }
.report-columns-group { padding: 8px 0 6px; border-top: 1px solid var(--row-line, var(--border)); }
.report-columns-group:first-child { border-top: 0; }
.report-columns-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; font-weight: 800; }
.report-columns-count { font-size: 14px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.report-columns-items { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; padding-left: 4px; }
.report-columns-items.is-single { padding-left: 0; }
.report-columns-items .check-row { min-height: 32px; font-size: 14px; }
@media (max-height: 780px) {
  .report-columns-group { padding: 4px 0 2px; }
  .report-columns-items .check-row, .report-columns-group-head { min-height: 26px; }
  .report-columns-body { gap: 2px; padding-top: 0; }
  .report-columns-head { padding: 6px 16px; }
}