/* lanes-v2: palco di corsie e persone (BlazorLanesBoard, scheda Persone dei ruoli), solo sotto body.nh-v2.
   Specifica: docs/ComponenteCorsiPersone.md. Solo token del sito; le tinte dei ruoli arrivano dal server come variabili
   --lane-* / --person-* (dato, calcolato con contrasto verificato in CategoricalTintRules). Nessun colore fisso dell'interfaccia:
   restano solo ombre e veli neutri. Testo minimo 12px. Pensato per desktop e portatile. Link mai sottolineati. */

body.nh-v2 {
  --nhl-ease: cubic-bezier(.16, 1, .3, 1);
  /* Inchiostri di avviso e pericolo: il sito ha solo i toni chiari, quindi si scuriscono verso il testo (>= 4.5:1 sui toni tenui). */
  --nhl-warn-ink: color-mix(in srgb, var(--warning) 40%, var(--text));
  --nhl-danger-ink: color-mix(in srgb, var(--danger) 55%, var(--text));
}

body.nh-v2 .nhl { position: relative; color: var(--text); }
body.nh-v2 .nhl [hidden] { display: none !important; }
body.nh-v2 .nhl :focus-visible,
body.nh-v2 .nhl-pn :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
body.nh-v2 .nhl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- ricerca ---------- */
body.nh-v2 .nhl-toolbar { display: flex; align-items: flex-end; margin: 0 0 14px; }
body.nh-v2 .nhl-toolbar .nhl-search { width: 260px; }

/* ---------- palco ---------- */
body.nh-v2 .nhl-stage { height: clamp(420px, calc(100vh - 360px), 900px); border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); overflow: hidden; }
body.nh-v2 .nhl-scroller { height: 100%; overflow: auto; padding: 18px; }
body.nh-v2 .nhl-state { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; }
body.nh-v2 .nhl-state h3 { margin: 0; font-size: 18px; font-weight: 800; }
body.nh-v2 .nhl-skel { display: grid; gap: 10px; padding: 18px; }
body.nh-v2 .nhl-skel i { display: block; height: 48px; border-radius: 12px; background: linear-gradient(90deg, var(--bg-soft) 0%, var(--surface) 50%, var(--bg-soft) 100%) 0 0 / 200% 100%; animation: nhl-shimmer 1.4s linear infinite; }
body.nh-v2 .nhl-skel i:nth-child(2) { width: 82%; }
body.nh-v2 .nhl-skel i:nth-child(3) { width: 64%; }
body.nh-v2 .nhl-skel i:nth-child(4) { width: 74%; }
body.nh-v2 .nhl-skel i:nth-child(5) { width: 48%; }
@keyframes nhl-shimmer { to { background-position: -200% 0; } }

/* ---------- barra delle modifiche non salvate ---------- */
body.nh-v2 .nhl-bar { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
body.nh-v2 .nhl-bar-count { margin-right: auto; display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 800; }
body.nh-v2 .nhl-bar-count em { font-style: normal; display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border: 2px solid var(--warning); border-radius: 999px; background: var(--warning-soft); color: var(--nhl-warn-ink); font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---------- corsie ---------- */
body.nh-v2 .nhl-lanes { display: flex; gap: 14px; align-items: stretch; height: 100%; min-width: max-content; }
body.nh-v2 .nhl-lane { --lt: var(--lane-tint, var(--muted)); --li: var(--lane-ink, var(--text)); --lw: var(--lane-wash, var(--bg-soft)); --ll: var(--lane-line, var(--border-strong));
  position: relative; width: 252px; flex: none; display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--ll); border-radius: 14px; background: var(--surface); box-shadow: 0 1px 2px rgba(15, 23, 42, .06); transition: width .26s var(--nhl-ease), background .15s, box-shadow .15s; }
body.nh-v2 .nhl-lane.is-dashed { border-style: dashed; border-color: var(--muted); }
body.nh-v2 .nhl-lane.is-plain { box-shadow: none; }
body.nh-v2 .nhl-lane.is-separate { background: var(--surface-soft); border-style: dashed; border-color: var(--muted); box-shadow: none; }
body.nh-v2 .nhl-sep { flex: none; width: 0; margin: 0 8px; border-left: 2px solid var(--border-strong); }
body.nh-v2 .nhl-lane-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px; border-radius: 13px 13px 0 0; background: var(--lane-wash, transparent); }
body.nh-v2 .nhl-lane-title { flex: 1; min-width: 0; line-height: 1.2; }
body.nh-v2 .nhl-lane-title h3 { margin: 0; font-size: 14px; font-weight: 800; overflow-wrap: break-word; color: var(--li); }
body.nh-v2 .nhl-lane-title p { margin: 0; font-size: 13px; font-weight: 700; color: var(--li); }
/* Il titolo-link si distingue da quello senza link col colore (anche sulla tinta), mai con la sottolineatura. */
body.nh-v2 .nhl-title-link { color: var(--primary-strong); text-decoration: none; }
body.nh-v2 .nhl-title-link:hover,
body.nh-v2 .nhl-title-link:focus-visible { color: var(--primary-ink); text-decoration: none; }
body.nh-v2 .nhl-lane-body { flex: 1; min-height: 0; overflow: auto; padding: 8px 10px 12px; display: flex; flex-direction: column; gap: 6px; }
body.nh-v2 .nhl-slot { min-height: 46px; border: 2px dashed var(--border-strong); border-radius: 12px; }
/* Slot vuoto che e' un pulsante: tema DevExpress e .btn ridisegnano fondo, colore e ombra, quindi qui si dicono con !important. */
body.nh-v2 .btn.nhl-slot.is-action { display: grid; grid-auto-flow: row; place-items: center; align-content: center; gap: 6px; width: 100%; padding: 10px; border: 2px dashed var(--lane-tint, var(--border-strong)) !important; border-radius: 12px; background: transparent !important; color: var(--lane-ink, var(--primary-ink)) !important; box-shadow: none !important; cursor: pointer; }
body.nh-v2 .btn.nhl-slot.is-action:hover:not(:disabled) { background: var(--lane-wash, var(--primary-soft)) !important; }
/* Slot vuoto con scritta (2-3 parole): la corsia dice cosa fare, mai una frase. */
body.nh-v2 .nhl-slot.has-label { display: grid; place-items: center; min-height: 96px; padding: 10px; border-color: var(--lane-tint, var(--border-strong)); color: var(--lane-ink, var(--slate)); font-size: 14.5px; font-weight: 800; }
body.nh-v2 .nhl-chev.btn { flex: none; width: 24px; height: 24px; min-width: 24px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 13px; line-height: 1; box-shadow: none; }
body.nh-v2 .nhl-chev.btn:hover { background: rgba(15, 23, 42, .06); color: var(--text); }
body.nh-v2 .nhl-chev.btn span { display: inline-block; transition: transform .16s ease; }
body.nh-v2 .nhl-chev.btn[aria-expanded="false"] span { transform: rotate(-90deg); }
body.nh-v2 .nhl-lane.is-collapsed { width: 60px; }
body.nh-v2 .nhl-lane.is-collapsed .nhl-lane-head { flex-direction: column; height: 100%; padding: 12px 6px; justify-content: flex-start; border-radius: 13px; }
body.nh-v2 .nhl-lane.is-collapsed .nhl-lane-title { order: 3; }
body.nh-v2 .nhl-lane.is-collapsed .nhl-lane-title p { display: none; }
body.nh-v2 .nhl-lane.is-collapsed .nhl-lane-title h3 { margin-top: 6px; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); }
body.nh-v2 .nhl-lane.is-collapsed .nhl-lane-body { display: none; }

/* contatore: cerchio col numero; pieno nella tinta della corsia, neutro senza tinta, tratteggiato se la corsia lo e' */
body.nh-v2 .nhl-count { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; transition: box-shadow .2s; }
body.nh-v2 .nhl-lane:not(.is-separate):not(.is-neutral) .nhl-count { border-color: var(--lt); background: var(--lt); color: var(--surface); }
body.nh-v2 .nhl-lane.is-dashed .nhl-count { border: 2px dashed var(--li); background: var(--surface); color: var(--li); }

/* Posti del piano (scheda Licenze): anello = quota occupata, scritto occupati/totali; pieno = cerchio riempito; oltre il limite = anello e testo in avviso. */
body.nh-v2 .nhl-seat { flex: none; position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: conic-gradient(var(--lt) calc(var(--seat, 0) * 1%), var(--border-strong) 0); color: var(--li); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
body.nh-v2 .nhl-seat::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface); }
body.nh-v2 .nhl-seat > span { position: relative; white-space: nowrap; }
body.nh-v2 .nhl-seat-frac { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
body.nh-v2 .nhl-seat-frac > span + span { margin-top: 1px; padding-top: 1px; border-top: 1.5px solid currentColor; }
body.nh-v2 .nhl-seat.is-full { background: var(--lt); color: var(--surface); }
body.nh-v2 .nhl-seat.is-full::before { inset: 0; background: var(--lt); }
body.nh-v2 .nhl-seat.is-over { background: var(--nhl-danger-ink); color: var(--nhl-danger-ink); }
body.nh-v2 .nhl-seat.is-over::before { inset: 3px; background: var(--danger-soft); }
body.nh-v2 .nhl-lane:has(.nhl-seat.is-over) .nhl-lane-title p { color: var(--nhl-danger-ink); }

/* ---------- scheda persona ---------- */
body.nh-v2 .nhl-card { --pt: var(--person-tint, var(--lt, var(--muted))); --pi: var(--person-ink, var(--li, var(--text))); --pw: var(--person-wash, var(--lw, var(--bg-soft))); --pl: var(--person-line, var(--ll, var(--border-strong)));
  position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 46px; overflow: hidden; border: 1px solid var(--pl); border-radius: 12px; background: var(--pw); color: var(--text); cursor: default; transition: border-color .15s, box-shadow .15s, background .15s; }
body.nh-v2 .nhl-card[data-drag] { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
body.nh-v2 .nhl-card[data-drag]:active { cursor: grabbing; }
body.nh-v2 .nhl-row { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 6px 8px; }
body.nh-v2 .nhl-av { --pt: var(--person-tint, var(--muted)); flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--pt); border-radius: 50%; background: var(--pt); color: var(--surface); font-size: 12px; font-weight: 800; letter-spacing: .02em; }
body.nh-v2 .nhl-card .nhl-av { --pt: var(--person-tint, var(--lt, var(--muted))); }
body.nh-v2 .nhl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
body.nh-v2 .nhl-name { overflow: hidden; font-size: 14px; font-weight: 800; color: var(--pi); text-overflow: ellipsis; white-space: nowrap; }
body.nh-v2 .nhl-sub { overflow: hidden; font-size: 13px; font-weight: 700; color: var(--pi); text-overflow: ellipsis; white-space: nowrap; }
body.nh-v2 .nhl-sub:empty { display: none; }
/* Terza riga (email del secondo account): attenuata dal peso e da un inchiostro piu' tenue, resta >= 4.5:1 (inchiostro >= 8:1 mescolato all'80%). */
body.nh-v2 .nhl-third { font-weight: 400; color: color-mix(in srgb, var(--pi) 80%, var(--pw)); }
body.nh-v2 .nhl-card.is-repeat { border-style: dashed; }
body.nh-v2 .nhl-card.is-off { border-style: dashed; border-color: var(--pi); background: var(--surface); }
body.nh-v2 .nhl-card.is-off .nhl-av { border: 2px dashed var(--pi); background: var(--pw); color: var(--pi); }
body.nh-v2 .nhl-card.is-locked { background: var(--surface-soft); border-color: var(--border-strong); }
body.nh-v2 .nhl-card.is-locked .nhl-name,
body.nh-v2 .nhl-card.is-locked .nhl-sub { color: var(--muted); }
body.nh-v2 .nhl-card.is-locked .nhl-av { border: 2px solid var(--muted); background: var(--muted); color: var(--surface); }
body.nh-v2 .nhl-card.is-moved { box-shadow: 0 0 0 2px var(--nhl-warn-ink); }
body.nh-v2 .nhl-card.is-moved .nhl-name::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--nhl-warn-ink); vertical-align: 1px; }
body.nh-v2 .nhl-card.is-lifted,
body.nh-v2 .nhl-card.is-grabbed { border-color: var(--primary-ink); background: var(--primary-ink); color: var(--surface); box-shadow: 0 16px 28px -10px rgba(var(--primary-rgb), .5); }
body.nh-v2 .nhl-card.is-lifted .nhl-name,
body.nh-v2 .nhl-card.is-lifted .nhl-sub,
body.nh-v2 .nhl-card.is-grabbed .nhl-name,
body.nh-v2 .nhl-card.is-grabbed .nhl-sub { color: var(--surface); }
body.nh-v2 .nhl-card.is-lifted .nhl-av,
body.nh-v2 .nhl-card.is-grabbed .nhl-av { border: 2px solid color-mix(in srgb, var(--surface) 70%, transparent); background: transparent; color: var(--surface); }
/* Scheda d'origine durante il gesto: testo attenuato ma >= 4.5:1 sullo sfondo tenue (circa 7.7:1). */
body.nh-v2 .nhl-card.is-origin { border-style: dashed; border-color: var(--border-strong); background: var(--surface-soft); }
body.nh-v2 .nhl-card.is-origin .nhl-name,
body.nh-v2 .nhl-card.is-origin .nhl-sub { color: color-mix(in srgb, var(--text) 75%, var(--surface-soft)); }
body.nh-v2 .nhl.nhl-ghost { position: fixed; z-index: 2000; left: 0; top: 0; pointer-events: none; will-change: transform; }
body.nh-v2.nhl-dragging,
body.nh-v2.nhl-dragging * { cursor: grabbing !important; user-select: none; }
/* Alt premuto durante il gesto: la scheda viene aggiunta, non spostata. */
body.nh-v2.nhl-dragging.nhl-alt,
body.nh-v2.nhl-dragging.nhl-alt * { cursor: copy !important; }

/* ---------- bersagli di rilascio ---------- */
body.nh-v2 .nhl-lane.is-can { box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .8); }
body.nh-v2 .nhl-lane.is-no { outline: 2px dotted var(--nhl-danger-ink); outline-offset: -2px; }
body.nh-v2 .nhl-lane.is-can.is-hover,
body.nh-v2 .nhl-lane.is-can.is-kb { background: rgba(var(--primary-rgb), .07); box-shadow: 0 0 0 2px var(--primary); }
body.nh-v2 .nhl-lane.is-can.is-hover .nhl-count,
body.nh-v2 .nhl-lane.is-can.is-kb .nhl-count { box-shadow: 0 0 0 5px rgba(var(--primary-rgb), .18); }
body.nh-v2 .nhl-lane.is-no.is-hover { background: var(--danger-soft); box-shadow: 0 0 0 2px var(--danger); cursor: not-allowed; }
/* Il motivo del rifiuto e' scritto sulla corsia: il colore non e' l'unico segnale. */
body.nh-v2 .nhl-lane.is-no.is-hover::after { content: attr(data-reason); position: absolute; top: 66px; right: 10px; z-index: 5; max-width: calc(100% - 20px); padding: 3px 10px; border-radius: 12px; background: var(--nhl-danger-ink); color: var(--surface); font-size: 12px; font-weight: 700; line-height: 1.25; pointer-events: none; }
body.nh-v2 .nhl-lane.is-collapsed.is-no.is-hover::after { display: none; }

/* ---------- pillole, frecce, avvisi (nel palco e nei pannelli) ---------- */
body.nh-v2 .nhl-pill { --pt: var(--person-tint, var(--muted)); --pi: var(--person-ink, var(--text)); --pw: var(--person-wash, var(--bg-soft));
  display: inline-flex; align-items: center; max-width: 100%; padding: 1px 9px; border: 1px solid var(--pt); border-radius: 999px; background: var(--pt); color: var(--surface); font-size: 12.5px; font-weight: 700; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.nh-v2 .nhl-pill.is-off { border: 1px dashed var(--pi); background: var(--pw); color: var(--pi); }
body.nh-v2 .nhl-pill.is-plain { --pt: var(--muted); --pi: var(--text); --pw: var(--bg-soft); }
body.nh-v2 .nhl-pill.is-plain.is-off { border-color: var(--muted); background: var(--bg-soft); color: var(--text); }
body.nh-v2 .nhl-chip { display: inline-flex; align-items: center; padding: 1px 9px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 12.5px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
body.nh-v2 .nhl-chip.is-lose { border-color: var(--nhl-warn-ink); background: var(--warning-soft); color: var(--nhl-warn-ink); }
body.nh-v2 .nhl-chip.is-up { border-color: var(--primary); color: var(--primary-ink); }
body.nh-v2 .nhl-chip[title] { cursor: help; }
body.nh-v2 .nhl-arr { flex: none; display: inline-block; width: 8px; height: 8px; margin: 0 4px 0 1px; border-top: 2px solid var(--muted); border-right: 2px solid var(--muted); transform: rotate(45deg); }
body.nh-v2 .nhl-reason { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); }
body.nh-v2 .nhl-reason.is-warn { color: var(--nhl-warn-ink); }

/* ---------- contenuto di pannello e riepilogo (il guscio e' BlazorModalShell Side) ---------- */
body.nh-v2 .nhl-prev { margin-top: 18px; }
body.nh-v2 .nhl-prev-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 700; margin-bottom: 10px; }
body.nh-v2 .nhl-pages summary,
body.nh-v2 .nhl-plan summary { cursor: pointer; font-size: 14px; font-weight: 800; }
body.nh-v2 .nhl-plan { margin: 6px 0 0 14px; }
body.nh-v2 .nhl-plan summary { font-weight: 700; }
body.nh-v2 .nhl-pages ul { margin: 4px 0 6px; padding: 0; list-style: none; }
body.nh-v2 .nhl-pages li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 13px; }
body.nh-v2 .nhl-page-kind { flex: none; color: var(--muted); font-weight: 700; }
body.nh-v2 .nhl-page-kind.is-lose { color: var(--nhl-warn-ink); }

/* riga del riepilogo: avatar, nome, corpo, Annulla */
body.nh-v2 .nhl-mrow { display: grid; grid-template-columns: 32px 150px 1fr auto; column-gap: 10px; align-items: center; margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
body.nh-v2 .nhl-mrow-name { overflow: hidden; font-size: 14px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
body.nh-v2 .nhl-mrow-body { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
body.nh-v2 .nhl-inline-switch { margin: 0; }
/* nota di rifiuto sotto la riga del riepilogo (sotto nome e corpo, allineata al nome) */
body.nh-v2 .nhl-mrow-note { grid-column: 2 / -1; margin: 6px 0 0; }
/* riga-piano del pannello (scheda Licenze): interruttore, pillola del piano e, se serve, il motivo per cui non si puo' accendere */
body.nh-v2 .nhl-plan-row { display: flex; align-items: center; gap: 8px; }
body.nh-v2 .nhl-why { font-size: 13px; font-weight: 700; color: var(--muted); }
/* Conferma e salva con un Riattiva ancora spento: resta cliccabile (e annunciata) ma ha l'aspetto di un pulsante non disponibile. */
body.nh-v2 .nhl-is-blocked.btn { border-color: var(--border-strong); background: var(--bg-soft); color: var(--muted); cursor: not-allowed; }

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

/* ---------- palco a due corsie (modificatore nhl--split, solo membri del gruppo approvativo) ----------
   Come docs/PropostaGruppiMembri.html: "Utenti" 3 parti con le schede in griglia (colonne da almeno 210px), "Nel gruppo" 2 parti con
   una scheda per riga; le corsie riempiono la larghezza invece di restare a 252px. Gli altri palchi non hanno la classe e non cambiano. */
body.nh-v2 .nhl.nhl--split .nhl-lanes { min-width: 0; width: 100%; }
body.nh-v2 .nhl.nhl--split .nhl-lane { width: auto; min-width: 0; }
body.nh-v2 .nhl.nhl--split .nhl-lane[data-lane="out"] { flex: 3 1 0; }
body.nh-v2 .nhl.nhl--split .nhl-lane[data-lane="in"] { flex: 2 1 0; }
body.nh-v2 .nhl.nhl--split .nhl-lane.is-collapsed[data-lane] { flex: none; width: 60px; }
body.nh-v2 .nhl.nhl--split .nhl-lane[data-lane="out"] .nhl-lane-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); align-content: start; }
body.nh-v2 .nhl.nhl--split .nhl-lane[data-lane="out"] .nhl-slot,
body.nh-v2 .nhl.nhl--split .nhl-lane[data-lane="out"] .btn.nhl-slot { grid-column: 1 / -1; }