/* Stato approvazione di una richiesta, "il percorso della richiesta" (solo test, WorkflowStatusModal).
   Prototipo: docs/PropostaModaleAnomaliaApprovazioni.html, vista "Stato approvazione". Stesso linguaggio del percorso del flusso
   (detail-components-v2.css, .nhp-*): nodo iniziale, riquadro per livello, connettori pieni, nodo finale. Sola lettura.
   Tutto sotto body.nh-v2 .wfs: in produzione la pagina resta identica. Colori solo da token (tema per azienda). */
body.nh-v2 .wfs {
  --wfs-ink2: color-mix(in srgb, var(--text) 62%, var(--muted));
  --wfs-ok-ink: color-mix(in srgb, var(--success) 72%, var(--text));
  --wfs-no-ink: color-mix(in srgb, var(--danger) 72%, var(--text));
  --wfs-amber-ink: color-mix(in srgb, var(--warning) 40%, var(--text));
  --wfs-line: color-mix(in srgb, var(--text) 42%, var(--surface));
  /* bordo tratteggiato dei riquadri non attivi: almeno 3:1 su bianco e su surface-soft (WCAG 1.4.11) */
  --wfs-edge: color-mix(in srgb, var(--muted) 85%, var(--text));
}

/* Contenitore di misura: le container query si leggono sulla larghezza utile del percorso, non sulla finestra. */
body.nh-v2 .wfs .wfs-wrap {
  container-type: inline-size;
}

body.nh-v2 .wfs .wfs-path {
  /* dimensioni dei nodi: compattate sotto per container query */
  --wfs-node-w: 132px;
  --wfs-end-w: 116px;
  --wfs-link-w: 24px;
  --wfs-level-min: 184px;
}

/* Il percorso e' orizzontale: a meta' schermata (max-width 50%) non entrerebbero nemmeno due livelli, quindi in test la scheda prende tutta la larghezza. */
body.nh-v2 .wfs.work-surface.work-surface--half {
  max-width: none;
}

/* ---------- testata: il badge dello stato accanto al titolo ---------- */
body.nh-v2 .wfs.work-surface.work-surface--half > .surface-head > div:first-child:not(.surface-actions) {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
}

body.nh-v2 .wfs .wfs-state {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 14px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

body.nh-v2 .wfs .wfs-state--prog {
  border-color: var(--warning);
  background: var(--warning-soft);
  color: var(--wfs-amber-ink);
}

body.nh-v2 .wfs .wfs-state--ok {
  border-color: var(--success);
  background: var(--success-soft);
  color: var(--wfs-ok-ink);
}

body.nh-v2 .wfs .wfs-state--no {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--wfs-no-ink);
}

body.nh-v2 .wfs .wfs-state--cnc {
  border-color: var(--border-strong);
  background: var(--surface-soft);
  color: var(--wfs-ink2);
}

/* ---------- il percorso ---------- */
body.nh-v2 .wfs .wfs-path {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding-top: 8px;
  padding-bottom: 28px;
  list-style: none;
  flex-wrap: wrap;
  row-gap: 14px;
}

/* Oltre 4 livelli (o con la scheda stretta) il percorso va a capo ordinatamente: i connettori si nascondono, l'ordine lo dicono i numeri. */
body.nh-v2 .wfs .wfs-path--wrap .wfs-link {
  display: none;
}

body.nh-v2 .wfs .wfs-path--wrap .wfs-level {
  margin-right: 12px;
}

@container (max-width: 1160px) {
  body.nh-v2 .wfs .wfs-path {
    --wfs-node-w: 108px;
    --wfs-end-w: 100px;
    --wfs-link-w: 16px;
    --wfs-level-min: 160px;
  }

  body.nh-v2 .wfs .wfs-level {
    padding: 10px;
  }

  body.nh-v2 .wfs .wfs-lname {
    font-size: 14px;
  }
}

@container (max-width: 880px) {
  body.nh-v2 .wfs .wfs-link {
    display: none;
  }

  body.nh-v2 .wfs .wfs-level {
    margin-right: 12px;
  }
}

/* nodi iniziale e finale */
body.nh-v2 .wfs .wfs-node {
  flex: 0 0 var(--wfs-node-w);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

body.nh-v2 .wfs .wfs-node--end {
  flex-basis: var(--wfs-end-w);
}

body.nh-v2 .wfs .wfs-node--ok {
  border-color: var(--success);
  box-shadow: 0 0 0 1px var(--success);
}

body.nh-v2 .wfs .wfs-node--no {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger);
}

body.nh-v2 .wfs .wfs-node--prog,
body.nh-v2 .wfs .wfs-node--cnc {
  border-style: dashed;
  border-color: var(--wfs-edge);
}

/* Esito ancora aperto: slot tratteggiato senza testo (lo stato sta nel badge in testata) */
body.nh-v2 .wfs .wfs-slot {
  align-self: stretch;
  flex: 1;
  min-height: 40px;
  border: 1.5px dashed var(--wfs-edge);
  border-radius: 6px;
}

body.nh-v2 .wfs .wfs-node-title {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

body.nh-v2 .wfs .wfs-who {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

body.nh-v2 .wfs .wfs-meta {
  color: var(--wfs-ink2);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

body.nh-v2 .wfs .wfs-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body.nh-v2 .wfs .wfs-note {
  margin: 2px 0 0;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* connettore pieno con punta (clip-path, mai il trucco del bordo) */
body.nh-v2 .wfs .wfs-link {
  position: relative;
  flex: 0 0 var(--wfs-link-w);
  align-self: stretch;
}

body.nh-v2 .wfs .wfs-link-line {
  position: absolute;
  left: 0;
  right: 5px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--wfs-line);
}

body.nh-v2 .wfs .wfs-link-tip {
  position: absolute;
  right: 0;
  top: 50%;
  width: 8px;
  height: 12px;
  margin-top: -6px;
  background: var(--wfs-line);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* riquadro di un livello */
body.nh-v2 .wfs .wfs-level {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: var(--wfs-level-min);
  max-width: 320px;
  padding: 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

body.nh-v2 .wfs .wfs-level--act {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), 0 10px 20px -12px rgba(var(--primary-rgb), .45);
}

body.nh-v2 .wfs .wfs-level--ok {
  border-color: color-mix(in srgb, var(--success) 55%, var(--border-strong));
}

body.nh-v2 .wfs .wfs-level--rej {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger);
}

body.nh-v2 .wfs .wfs-level--idle,
body.nh-v2 .wfs .wfs-level--skip,
body.nh-v2 .wfs .wfs-level--cnc {
  border-style: dashed;
  border-color: var(--wfs-edge);
  background: var(--surface-soft);
}

body.nh-v2 .wfs .wfs-lh {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

body.nh-v2 .wfs .wfs-lnum {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--surface);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

body.nh-v2 .wfs .wfs-level--idle .wfs-lnum,
body.nh-v2 .wfs .wfs-level--skip .wfs-lnum,
body.nh-v2 .wfs .wfs-level--cnc .wfs-lnum {
  background: var(--wfs-ink2);
}

body.nh-v2 .wfs .wfs-lname {
  flex: 1;
  min-width: 0;
  margin: 2px 0 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: break-word;
}

body.nh-v2 .wfs .wfs-mode {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

body.nh-v2 .wfs .wfs-lstate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--wfs-ink2);
  font-size: 12.5px;
  font-weight: 800;
}

body.nh-v2 .wfs .wfs-lstate--act {
  color: var(--primary-ink);
}

body.nh-v2 .wfs .wfs-lstate--ok {
  color: var(--wfs-ok-ink);
}

body.nh-v2 .wfs .wfs-lstate--rej {
  color: var(--wfs-no-ink);
}

body.nh-v2 .wfs .wfs-due {
  color: var(--wfs-amber-ink);
}

body.nh-v2 .wfs .wfs-due--late {
  color: var(--wfs-no-ink);
}

/* approvatori */
body.nh-v2 .wfs .wfs-aps {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.nh-v2 .wfs .wfs-ap {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0 8px;
  align-items: center;
  padding: 7px 0;
  border-top: 1px solid var(--border);
}

body.nh-v2 .wfs .wfs-ap:first-child {
  border-top: 0;
}

body.nh-v2 .wfs .wfs-av {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--wfs-ink2);
  font-size: 11px;
  font-weight: 800;
}

body.nh-v2 .wfs .wfs-ap--ok .wfs-av {
  border-color: var(--success);
  background: var(--success-soft);
  color: var(--wfs-ok-ink);
}

body.nh-v2 .wfs .wfs-ap--no .wfs-av {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--wfs-no-ink);
}

body.nh-v2 .wfs .wfs-ap--none .wfs-av {
  border-style: dashed;
}

body.nh-v2 .wfs .wfs-ap-name {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

body.nh-v2 .wfs .wfs-ap-out {
  display: flex;
  flex-wrap: wrap;
  column-gap: 6px;
  min-width: 0;
  grid-column: 2;
  color: var(--wfs-ink2);
  font-size: 12.5px;
  line-height: 1.3;
}

body.nh-v2 .wfs .wfs-ap-out em {
  font-style: normal;
  font-weight: 800;
}

body.nh-v2 .wfs .wfs-ap--ok .wfs-ap-out em {
  color: var(--wfs-ok-ink);
}

body.nh-v2 .wfs .wfs-ap--no .wfs-ap-out em {
  color: var(--wfs-no-ink);
}

body.nh-v2 .wfs .wfs-ap-by {
  grid-column: 2;
  color: var(--wfs-amber-ink);
  font-size: 12px;
  font-weight: 700;
}

body.nh-v2 .wfs .wfs-q {
  grid-column: 2;
  margin: 3px 0 0;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

body.nh-v2 .wfs .wfs-lfoot {
  margin-top: auto;
  padding-top: 6px;
}

/* nessun flusso / nessun approvatore: slot tratteggiato di due parole */
body.nh-v2 .wfs .wfs-ghost {
  display: grid;
  place-items: center;
  min-height: 56px;
  padding: 8px 12px;
  border: 1.5px dashed var(--wfs-edge);
  border-radius: var(--radius);
  color: var(--wfs-ink2);
  font-size: 12.5px;
  font-weight: 700;
}

body.nh-v2 .wfs .wfs-path > li.wfs-ghost {
  flex: 0 0 220px;
  min-height: 96px;
}

/* ---------- contrasto forzato: colori di sistema, forme e bordi restano ---------- */
@media (forced-colors: active) {
  body.nh-v2 .wfs .wfs-link-line,
  body.nh-v2 .wfs .wfs-link-tip {
    background: CanvasText;
  }

  body.nh-v2 .wfs .wfs-state,
  body.nh-v2 .wfs .wfs-level,
  body.nh-v2 .wfs .wfs-node,
  body.nh-v2 .wfs .wfs-av {
    border-color: CanvasText;
  }

  body.nh-v2 .wfs .wfs-level--act,
  body.nh-v2 .wfs .wfs-level--rej {
    border-width: 3px;
    box-shadow: none;
  }

  body.nh-v2 .wfs .wfs-lnum {
    background: CanvasText;
    color: Canvas;
  }
}