/**
 * nh-page-l1l23.css — Layout unificato pagine team-operator L1/L2-3.
 * ══════════════════════════════════════════════════════════════════
 * 2026-05-22 — SoT condiviso (NH #4 integrare, #5 riuso, #14 simplicità).
 * Le pagine domain-specific override solo --accent + --accent-dim via :root inline.
 */

:root {
  --bg:#f3f5f8; --surface:#ffffff; --surface-2:#f7f9fc; --surface-3:#eef1f5;
  --border:#e3e7ec; --border-hi:#cfd5dd;
  --text-1:#111827; --text-2:#374151; --text-3:#6b7280;
  --primary:#2563eb; --bg-hover:#eef1f5;
  --ok:#10b981; --warn:#f59e0b; --danger:#ef4444; --info:#06b6d4;
  --accent:#2563eb; --accent-dim:rgba(37,99,235,0.12);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif; font-size: 13px; background: var(--bg); color: var(--text-1); overflow: hidden; }

/* 🆕 2026-05-26 — KPI strip layout single-row (altezza −40%):
   label · value · sub inline su una sola riga invece di 3 righe stacked.
   Su schermi piccoli (<900px) fa fallback al layout precedente.
*/
.nh-kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 6px; padding: 6px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.nh-kpi { background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; padding: 5px 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.nh-kpi .label { font-size: 10px; text-transform: uppercase; color: var(--text-3); letter-spacing: 0.4px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.nh-kpi .value { font-size: 18px; font-weight: 700; margin: 0; white-space: nowrap; flex-shrink: 0; }
.nh-kpi .value.ok { color: var(--ok); } .nh-kpi .value.warn { color: var(--warn); } .nh-kpi .value.danger { color: var(--danger); }
.nh-kpi .sub { font-size: 10px; color: var(--text-3); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 900px) {
  .nh-kpi { flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 10px; }
  .nh-kpi .value { font-size: 17px; margin-top: 1px; }
}

/* 🆕 2026-05-22 — Lascia spazio per bottom dock (96px reservato: dock ~74px
   + safety 22px) + toolbar (56px) + kpi strip (~72px). Usa 100dvh per
   coprire mobile address-bar shrink. */
/* 🛠 2026-05-26 — Rimosso "-96px" che riservava spazio al bottom dock.
   Il dock è position:fixed → non occupa flow grid. I 96px riservati creavano
   un buco bianco non-scrollabile in fondo, mentre il dock (~50px reali a scale(0.6))
   galleggiava sopra. Fix: layout occupa tutto lo spazio disponibile, le aree
   scrollabili interne (detail-body, queue-list, tools-pane) hanno padding-bottom
   per evitare overlap col dock. NH #14 simplicity. */
.nh-layout { display: grid; grid-template-columns: 320px 1fr 340px; height: calc(100vh - 56px - 72px); height: calc(100dvh - 56px - 72px); min-height: 0; }
@media (max-width: 1200px) { .nh-layout { grid-template-columns: 280px 1fr 280px; } }

/* 🆕 2026-05-22 — CSS Grid overflow fix.
   Grid items hanno default `min-height: auto` che impedisce a overflow-y:auto
   interno di scattare (la cella si espande oltre la track). `min-height: 0`
   forza il rispetto della track height → overflow-y:auto sui figli scatta
   correttamente. Stesso pattern per min-width:0 (evita overflow orizzontale).
   `scrollbar-gutter: stable` riserva spazio fisso per la scrollbar così non
   c'è layout-shift quando appare/scompare e la scrollbar è sempre visibile
   quando serve (NH binary: "alcune info nascoste" → scrollbar sempre disponibile). */
.nh-queue,
.nh-detail,
.nh-tools { min-height: 0; min-width: 0; }
.nh-queue-list,
.nh-detail-body,
.nh-tools { scrollbar-gutter: stable; }

.nh-queue { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.nh-queue-head { padding: 10px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.nh-queue-head h3 { font-size: 13px; font-weight: 600; }
.nh-queue-head .count { background: var(--accent-dim); color: var(--accent); padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.nh-queue-filters { padding: 6px 10px; display: flex; gap: 4px; border-bottom: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap; }
.nh-queue-filters .pill { padding: 4px 9px; background: transparent; border: 1px solid var(--border); border-radius: 12px; font-size: 11px; cursor: pointer; color: var(--text-3); }
.nh-queue-filters .pill.active { background: var(--accent); color: white; border-color: var(--accent); }
.nh-queue-search { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.nh-queue-search input { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px; font-size: 12px; }
.nh-queue-list { flex: 1; overflow-y: auto; }
/* 🆕 2026-05-25 — Coda ticket con colonne estese + sort + toggle compact/extended.
   Layout grid:
   - compact:  [ck] [prio-dot] [key+summary] [status-chip] [prio-badge] [SLA] [team] [age] [filler]
   - extended: + [assignee] [reporter] [type] [updated]
   NH #5 single CSS, NH #14 simplicity. */

/* HEADER colonne sortabili */
/* 🛠 2026-05-26 — Refit colonne compatto: team+age erano fuori viewport in panel 320px.
   Nuove larghezze compatte (status 70, prio 36, SLA 64, team/age nascoste in compact)
   → tutte le info essenziali (incluso SLA col gradiente) visibili senza scroll. */
.nh-queue-header {
  display: grid;
  grid-template-columns: 18px 10px 50px 28px minmax(110px, 1fr) 60px 32px 56px 22px;
  gap: 4px;
  align-items: center;
  padding: 6px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.4px;
  position: sticky; top: 0; z-index: 5;
}
/* Extended view (toggle 📊): TUTTI i campi delle 3 zone detail (17 extra colonne) */
.nh-queue-header.expanded {
  grid-template-columns:
    18px 10px 50px 28px minmax(160px, 1fr) 70px 32px 60px /* base: ck/dot/tenant/cnt/key/status/prio/sla */
    80px 60px 60px 80px 80px 70px 50px /* type/team/domain/flow_src/channel/actor/sev */
    60px 60px 64px 100px 100px 100px 100px 36px 36px 36px /* age/upd/due/assignee/reporter/ci/source/att/lnk/sub */
    22px;
}
.nh-queue-header .nh-qh-col { cursor: pointer; user-select: none; padding: 2px 0; }
.nh-queue-header .nh-qh-col:hover { color: var(--text); }
.nh-queue-header .nh-qh-col.sorted { color: var(--accent); }

/* 🆕 2026-05-26 — Filter row (stesso grid template del header per allineamento) */
.nh-queue-filter-row {
  display: grid;
  grid-template-columns: 18px 10px 50px 28px minmax(110px, 1fr) 60px 32px 56px 22px;
  gap: 4px;
  align-items: center;
  padding: 4px 12px 6px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 30px; z-index: 4;
}
.nh-queue-filter-row.expanded {
  grid-template-columns:
    18px 10px 50px 28px minmax(160px, 1fr) 70px 32px 60px
    80px 60px 60px 80px 80px 70px 50px
    60px 60px 64px 100px 100px 100px 100px 36px 36px 36px
    22px;
}
.nh-queue-filter-row .nh-qf-input {
  width: 100%; padding: 2px 6px; font-size: 11px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); color: var(--text-1);
  min-width: 0; box-sizing: border-box;
}
.nh-queue-filter-row .nh-qf-input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.nh-queue-filter-row .nh-qf-input::placeholder { color: var(--text-3); opacity: 0.6; font-size: 10.5px; }
.nh-queue-filter-row .nh-qf-clear {
  cursor: pointer; text-align: center; color: var(--text-3); font-size: 12px; line-height: 1;
  width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
}
.nh-queue-filter-row .nh-qf-clear:hover { background: rgba(239,68,68,0.1); color: var(--danger); }
.nh-queue-header .nh-qh-toggle { cursor: pointer; padding: 0 4px; font-size: 13px; }
.nh-queue-header .nh-qh-toggle:hover { transform: scale(1.15); }
/* 🆕 SLA breach notify toggle */
.nh-queue-header .nh-qh-notify { cursor: pointer; padding: 0 4px; font-size: 13px; opacity: 0.6; transition: opacity 0.15s, transform 0.15s; }
.nh-queue-header .nh-qh-notify:hover { transform: scale(1.15); }
.nh-queue-header .nh-qh-notify.on { opacity: 1; filter: drop-shadow(0 0 3px rgba(239,68,68,0.5)); }

/* RIGA ticket (grid stesso pattern dell'header — DEVE coincidere per allineamento) */
.nh-queue-item {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  display: grid;
  grid-template-columns: 18px 10px 50px 28px minmax(110px, 1fr) 60px 32px 56px 22px;
  gap: 4px;
  align-items: center;
  min-height: 38px;
  overflow: hidden;
}
.nh-queue-item.expanded {
  grid-template-columns:
    18px 10px 50px 28px minmax(160px, 1fr) 70px 32px 60px
    80px 60px 60px 80px 80px 70px 50px
    60px 60px 64px 100px 100px 100px 100px 36px 36px 36px
    22px;
  overflow: visible;
}

/* 🆕 2026-05-26 — Tenant + country cells (sempre visibili) */
.nh-queue-item .nh-qr-tenant {
  font-family: ui-monospace, monospace; font-size: 9.5px; font-weight: 700;
  background: rgba(99,102,241,0.12); color: #4338ca;
  padding: 2px 4px; border-radius: 4px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nh-queue-item .nh-qr-country {
  font-size: 10.5px; font-weight: 700; color: var(--text-2);
  text-align: center;
  white-space: nowrap;
}
.nh-queue-item .nh-qr-ext {
  font-size: 11px; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}

/* 🆕 2026-05-26 — Scroll orizzontale per coda quando in extended (molte colonne) */
.nh-queue-list { overflow-y: auto; overflow-x: auto; }
.nh-queue-list:has(.nh-queue-item.expanded) .nh-queue-item.expanded,
.nh-queue-list:has(.nh-queue-item.expanded) .nh-queue-header.expanded,
.nh-queue-list:has(.nh-queue-item.expanded) .nh-queue-filter-row.expanded {
  min-width: 1820px;
}
/* 🛠 2026-05-26 — Nascondi team + age nel compact (sono al di fuori del template). */
.nh-queue-item:not(.expanded) .nh-qr-team,
.nh-queue-item:not(.expanded) .nh-qr-age { display: none; }
.nh-queue-header:not(.expanded) .nh-qh-col[data-sort-col="team"],
.nh-queue-header:not(.expanded) .nh-qh-col[data-sort-col="age"] { display: none; }
.nh-queue-item:hover { background: var(--bg-hover); }
.nh-queue-item.selected { background: var(--accent-dim); border-left: 3px solid var(--accent); padding-left: 11px; }
.nh-queue-item .nh-qr-ck-spacer { display: inline-block; width: 16px; }
.nh-queue-item .prio { width: 8px; height: 8px; border-radius: 50%; }
.nh-queue-item .prio.p1 { background: var(--danger); box-shadow: 0 0 4px var(--danger); }
.nh-queue-item .prio.p2 { background: #f97316; }
.nh-queue-item .prio.p3 { background: #eab308; }
.nh-queue-item .prio.p4 { background: var(--text-3); }
.nh-queue-item .prio.p5 { background: var(--border-hi); }
.nh-queue-item .body {
  min-width: 0; /* fondamentale per fit in 1fr senza overflow */
  display: flex; flex-direction: column; gap: 1px;
  overflow: hidden;
}
.nh-queue-item .body .key {
  font-family: ui-monospace, monospace; font-size: 10.5px;
  color: var(--accent); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* 🛠 2026-05-26 — no wrap */
}
.nh-queue-item .summary {
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 🛠 2026-05-26 — Status come badge plain (era chip interattivo che disallineava le colonne).
   Larghezza fissa per allineamento perfetto delle colonne sulla griglia. */
.nh-queue-item .nh-qr-status { min-width: 0; text-align: left; }
.nh-queue-item .nh-qr-status-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;
  background: rgba(148,163,184,0.15); color: #475569;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
/* Color-code per stato canonical NH (regole #1 no hardcode → mappa basata su data-status normalized) */
.nh-queue-item .nh-qr-status-badge[data-status="nuovo"],
.nh-queue-item .nh-qr-status-badge[data-status="new"]            { background: rgba(34,197,94,0.13); color: #15803d; }
.nh-queue-item .nh-qr-status-badge[data-status="triage"]          { background: rgba(234,179,8,0.13); color: #a16207; }
.nh-queue-item .nh-qr-status-badge[data-status="aperto"],
.nh-queue-item .nh-qr-status-badge[data-status="open"]            { background: rgba(59,130,246,0.13); color: #1e40af; }
.nh-queue-item .nh-qr-status-badge[data-status="assegnato"],
.nh-queue-item .nh-qr-status-badge[data-status="assigned"]        { background: rgba(99,102,241,0.13); color: #4338ca; }
.nh-queue-item .nh-qr-status-badge[data-status="in-lavorazione"],
.nh-queue-item .nh-qr-status-badge[data-status="in-progress"]     { background: rgba(14,165,233,0.15); color: #0369a1; }
.nh-queue-item .nh-qr-status-badge[data-status="risolto"],
.nh-queue-item .nh-qr-status-badge[data-status="resolved"]        { background: rgba(16,185,129,0.15); color: #047857; }
.nh-queue-item .nh-qr-status-badge[data-status="chiuso"],
.nh-queue-item .nh-qr-status-badge[data-status="closed"]          { background: rgba(100,116,139,0.15); color: #334155; }
.nh-queue-item .nh-qr-status-badge[data-status="cancellato"],
.nh-queue-item .nh-qr-status-badge[data-status="cancelled"]       { background: rgba(100,116,139,0.1); color: #64748b; text-decoration: line-through; }
.nh-queue-item .nh-qr-status-badge[data-status="falso-positivo"],
.nh-queue-item .nh-qr-status-badge[data-status="false-positive"]  { background: rgba(239,68,68,0.13); color: #b91c1c; }
.nh-queue-item .nh-qr-status-badge[data-status="duplicato"],
.nh-queue-item .nh-qr-status-badge[data-status="duplicate"]       { background: rgba(168,85,247,0.12); color: #7c3aed; }
/* priority badge */
.nh-queue-item .nh-qr-prio { text-align: left; }
.nh-queue-item .nh-qr-prio-badge {
  display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 10.5px; font-weight: 700;
}
.nh-queue-item .nh-qr-prio-badge.nh-qr-p1 { background: rgba(220,38,38,0.13); color: #b91c1c; }
.nh-queue-item .nh-qr-prio-badge.nh-qr-p2 { background: rgba(249,115,22,0.13); color: #c2410c; }
.nh-queue-item .nh-qr-prio-badge.nh-qr-p3 { background: rgba(234,179,8,0.13); color: #a16207; }
.nh-queue-item .nh-qr-prio-badge.nh-qr-p4 { background: rgba(59,130,246,0.1); color: #1e40af; }
.nh-queue-item .nh-qr-prio-badge.nh-qr-p5 { background: rgba(148,163,184,0.15); color: #475569; }
/* SLA countdown */
.nh-queue-item .nh-qr-sla {
  font-size: 11px; font-variant-numeric: tabular-nums;
  padding: 2px 7px; border-radius: 4px;
  display: inline-block;
}
.nh-queue-item .nh-qr-sla.ok { color: var(--ok, #10b981); }
.nh-queue-item .nh-qr-sla.warn { color: #b45309; font-weight: 600; background: rgba(245,158,11,0.12); }
.nh-queue-item .nh-qr-sla.breach { color: #fff; font-weight: 700; background: var(--danger, #ef4444); animation: nh-sla-pulse 1.6s ease-in-out infinite; }
.nh-queue-item .nh-qr-sla.neutral { color: var(--text-3); }

/* 🆕 2026-05-25 — Highlight riga ticket in SLA breach / warn (NH #2 esplicito):
   - breach (SLA scaduto): sfondo rosso tenue + border-left rosso + SLA badge pulse
   - warn (entro 1h): sfondo amber tenue + border-left amber
   Accessibilità: rispetta prefers-reduced-motion (disable animation).
*/
/* 🆕 2026-05-26 — Gradiente livello SLA su 6 livelli.
   lvl 0 = >24h (no tint) · 1 = 8-24h · 2 = 4-8h · 3 = 1-4h (ambra crescente)
   lvl 4 = <1h (warn rosa-rosso) · 5 = breach (rosso intenso + pulse)
   Più si avvicina la scadenza, più intenso il colore di fondo + border-left.
*/
.nh-queue-item.sla-lvl-0 { /* no tint */ }
.nh-queue-item.sla-lvl-1 {
  background: rgba(245, 158, 11, 0.04);
  border-left: 3px solid rgba(245, 158, 11, 0.35);
  padding-left: 11px;
}
.nh-queue-item.sla-lvl-1:hover { background: rgba(245, 158, 11, 0.08); }
.nh-queue-item.sla-lvl-2 {
  background: rgba(245, 158, 11, 0.09);
  border-left: 3px solid rgba(245, 158, 11, 0.55);
  padding-left: 11px;
}
.nh-queue-item.sla-lvl-2:hover { background: rgba(245, 158, 11, 0.13); }
.nh-queue-item.sla-lvl-3 {
  background: rgba(245, 158, 11, 0.15);
  border-left: 3px solid rgba(245, 158, 11, 0.8);
  padding-left: 11px;
}
.nh-queue-item.sla-lvl-3:hover { background: rgba(245, 158, 11, 0.20); }
.nh-queue-item.sla-breach,
.nh-queue-item.sla-lvl-5 {
  background: rgba(239, 68, 68, 0.18);
  border-left: 3px solid var(--danger, #ef4444);
  padding-left: 11px;
}
.nh-queue-item.sla-breach:hover,
.nh-queue-item.sla-lvl-5:hover { background: rgba(239, 68, 68, 0.26); }
.nh-queue-item.sla-warn,
.nh-queue-item.sla-lvl-4 {
  background: rgba(239, 68, 68, 0.08);
  border-left: 3px solid var(--warn, #f59e0b);
  padding-left: 11px;
}
.nh-queue-item.sla-warn:hover,
.nh-queue-item.sla-lvl-4:hover { background: rgba(239, 68, 68, 0.13); }
/* Selected vince visivamente su SLA (mantengo il border-left accent per selezione) */
.nh-queue-item.selected.sla-breach { border-left-color: var(--accent); background: var(--accent-dim); }
.nh-queue-item.selected.sla-warn   { border-left-color: var(--accent); background: var(--accent-dim); }

@keyframes nh-sla-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.65; transform: scale(0.97); }
}
@media (prefers-reduced-motion: reduce) {
  .nh-queue-item .nh-qr-sla.breach { animation: none; }
  .nh-queue-item .nh-qr-sla.breach { box-shadow: 0 0 0 1.5px #b91c1c inset; }
}
/* team tag */
.nh-queue-item .nh-qr-team { font-size: 11px; color: var(--text-2); }
.nh-queue-item .nh-qr-team-tag {
  display: inline-block;
  background: var(--surface-3, #f1f5f9);
  padding: 1px 7px; border-radius: 8px;
  font-family: ui-monospace, monospace; font-size: 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
/* age */
.nh-queue-item .nh-qr-age { font-size: 10.5px; color: var(--text-3); text-align: right; white-space: nowrap; }
/* extended-only cells */
.nh-queue-item .nh-qr-ext {
  font-size: 11px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* responsive: nascondi colonne extra su schermi stretti */
@media (max-width: 1200px) {
  .nh-queue-header.expanded, .nh-queue-item.expanded {
    grid-template-columns: 22px 12px 1fr 90px 70px 80px 50px 30px;
  }
  .nh-queue-header.expanded .nh-qh-col[data-sort-col="team"],
  .nh-queue-header.expanded .nh-qh-col[data-sort-col="assignee"],
  .nh-queue-header.expanded .nh-qh-col[data-sort-col="reporter"],
  .nh-queue-header.expanded .nh-qh-col[data-sort-col="type"],
  .nh-queue-header.expanded .nh-qh-col[data-sort-col="updated"],
  .nh-queue-item.expanded .nh-qr-team,
  .nh-queue-item.expanded .nh-qr-ext { display: none; }
}

.nh-detail { display: flex; flex-direction: column; overflow: hidden; }
.nh-detail-head { padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--surface); }
.nh-detail-head .top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nh-detail-head .key { font-family: ui-monospace, monospace; font-size: 13px; color: var(--accent); font-weight: 600; }
.nh-detail-head .sev { padding: 2px 8px; border-radius: 12px; font-size: 10.5px; font-weight: 700; color: white; }
.nh-detail-head .sev.p1 { background: var(--danger); }
.nh-detail-head .sev.p2 { background: #f97316; }
.nh-detail-head .sev.p3 { background: #eab308; color: #1a1a1a; }
.nh-detail-head .sev.p4 { background: var(--text-3); }
.nh-detail-head .sev.p5 { background: var(--border-hi); color: var(--text-2); }
.nh-detail-head h2 { font-size: 16px; margin-top: 6px; font-weight: 600; }
.nh-detail-head .meta { margin-top: 4px; font-size: 11.5px; color: var(--text-3); display: flex; gap: 14px; flex-wrap: wrap; }
.nh-detail-head .meta b { color: var(--text-1); font-weight: 500; }

/* 🆕 2026-05-26 — Opzione B "Three-zone grid": header detail organizzato in
   3 zone semantiche (Identità · Stato&Urgenza · Assegnazione&Contesto).
   v2: layout SINGLE-ROW (3 colonne strette) + tutti i campi disponibili (NH #14). */
.nh-detail-3zone { padding: 10px 14px 12px; }
.nh-detail-3zone .nh-dh-title-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.nh-detail-3zone .nh-dh-title-row .key { font-family: ui-monospace, monospace; font-size: 13px; color: var(--accent); font-weight: 600; }
.nh-detail-3zone .nh-dh-title-row h2 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; flex: 1; min-width: 0; }
.nh-detail-3zone .nh-dh-zones {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
.nh-detail-3zone .nh-dh-zone {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  min-width: 0;
}
.nh-detail-3zone .nh-dh-zone-h {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  font-weight: 700;
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px dashed var(--border);
}
/* Riga = grid 3-col: [icona] [chiave] [valore] — chiave fissa, valore flex */
.nh-detail-3zone .nh-dh-row {
  display: grid;
  grid-template-columns: 14px 58px 1fr;
  gap: 4px;
  align-items: center;
  font-size: 10.5px;
  color: var(--text-2);
  padding: 1px 0;
  line-height: 1.4;
  min-width: 0;
}
.nh-detail-3zone .nh-dh-row.muted { opacity: 0.55; }
.nh-detail-3zone .nh-dh-row .ico {
  font-size: 10px;
  color: var(--text-3);
  text-align: center;
}
.nh-detail-3zone .nh-dh-row .nh-dh-k {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-3);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nh-detail-3zone .nh-dh-row .nh-dh-v {
  font-size: 11px;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.nh-detail-3zone .nh-dh-row .nh-dh-v b { font-weight: 600; }
.nh-detail-3zone .nh-dh-row .sev { padding: 1px 6px; border-radius: 8px; font-size: 9.5px; font-weight: 700; }
.nh-detail-3zone .nh-dh-row .sev.p1 { background: var(--danger); color: #fff; }
.nh-detail-3zone .nh-dh-row .sev.p2 { background: #f97316; color: #fff; }
.nh-detail-3zone .nh-dh-row .sev.p3 { background: #eab308; color: #1a1a1a; }
.nh-detail-3zone .nh-dh-row .sev.p4 { background: var(--text-3); color: #fff; }
.nh-detail-3zone .nh-dh-row .sev.p5 { background: var(--border-hi); color: var(--text-2); }

/* Responsive: solo sotto i 1000px collassiamo a 2 colonne, sotto 700 stacked */
@media (max-width: 1000px) {
  .nh-detail-3zone .nh-dh-zones { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .nh-detail-3zone .nh-dh-zones { grid-template-columns: 1fr; }
}
/* 🆕 2026-05-26 — 7 tab: ottimizzato per overflow horizontal su detail pane stretto. */
.nh-detail-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); background: var(--surface); padding: 0 14px; overflow-x: auto; scrollbar-width: thin; white-space: nowrap; }
.nh-detail-tabs .tab { padding: 9px 12px; font-size: 12px; color: var(--text-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; flex-shrink: 0; }
.nh-detail-tabs .tab:hover { background: var(--bg-hover); }
.nh-detail-tabs .tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
/* 🛠 2026-05-26 — padding-bottom: 80px = ~50px dock + 30px margine sicurezza.
   Garantisce che l'ultimo elemento scrollato non finisca sotto il dock floating. */
.nh-detail-body { flex: 1; overflow-y: auto; padding: 16px 18px 80px; background: var(--surface); }
.nh-queue-list { padding-bottom: 80px; }
.nh-tools { padding-bottom: 80px; overflow-y: auto; }

/* 🆕 2026-05-26 — Quick actions: layout compatto 4 per riga (altezza −35%) */
.nh-quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.nh-action { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); cursor: pointer; display: flex; flex-direction: column; gap: 1px; min-height: 0; }
.nh-action:hover { background: var(--surface-3); border-color: var(--accent); }
.nh-action .title { font-size: 11.5px; font-weight: 600; line-height: 1.25; }
.nh-action .sub { font-size: 9.5px; color: var(--text-3); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1200px) { .nh-quick-actions { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .nh-quick-actions { grid-template-columns: repeat(2, 1fr); } }
.nh-action.danger { background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.3); }
.nh-action.danger .title { color: var(--danger); }
.nh-action.ok { background: rgba(16,185,129,0.06); border-color: rgba(16,185,129,0.3); }
.nh-action.ok .title { color: var(--ok); }

.nh-section-h { font-size: 11px; text-transform: uppercase; color: var(--text-3); letter-spacing: 0.5px; font-weight: 600; margin: 18px 0 8px; }
.nh-section-h:first-of-type { margin-top: 0; }
.nh-timeline-item { display: grid; grid-template-columns: 80px 16px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.nh-timeline-item .ts { color: var(--text-3); font-variant-numeric: tabular-nums; }
.nh-timeline-item .actor { width: 16px; height: 16px; border-radius: 50%; background: var(--accent-dim); color: var(--accent); display: grid; place-items: center; font-size: 9px; font-weight: 700; }

/* 🛠 2026-05-25 — Compact tools sidebar (-20% altezza per box + pulsanti vicini).
   Riduzione: padding card 10→7px, margin-bottom card 10→7px, h4 margin 8→5px,
   tool-btn padding 7→4px, margin-top 6→3px. Container padding 14→10px. */
.nh-tools { background: var(--surface); border-left: 1px solid var(--border); overflow-y: auto; padding: 10px 12px; }
.nh-tool-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px 8px; margin-bottom: 7px; }
.nh-tool-card h4 { font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.nh-tool-card .row { display: flex; justify-content: space-between; font-size: 11.5px; padding: 2px 0; }
.nh-tool-card .row .k { color: var(--text-3); }
.nh-tool-btn { display: block; width: 100%; padding: 4px 9px; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; font-size: 12px; margin-top: 3px; cursor: pointer; text-align: left; line-height: 1.35; }
.nh-tool-btn:first-of-type { margin-top: 0; }
.nh-tool-btn:hover { background: var(--bg-hover); border-color: var(--accent); }

.nh-empty { padding: 40px 20px; text-align: center; color: var(--text-3); font-size: 12.5px; }
.nh-tag { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 10.5px; background: var(--surface-3); color: var(--text-2); margin-right: 4px; }

/* 🆕 2026-05-24 — Sprint bulk-assign F5: checkbox + bulk-bar */
.nh-bulk-checkbox {
  width: 18px; height: 18px; border: 2px solid var(--border);
  border-radius: 3px; background: var(--surface); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: border-color .15s ease, background .15s ease;
}
.nh-bulk-checkbox:hover { border-color: var(--accent); }
.nh-bulk-checkbox.checked { background: var(--accent); border-color: var(--accent); }
.nh-bulk-checkbox.checked::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.nh-queue-item.bulk-selected { background: rgba(37,99,235,.08); }
[data-theme="dark"] .nh-queue-item.bulk-selected { background: rgba(47,129,247,.12); }

/* 🛠 2026-05-24 UX1 — Compact bulk-bar: -50% altezza.
   Causa altezza precedente: button text wrap multi-line (no nowrap).
   NH #14 simplicity: padding ridotto + white-space:nowrap su tutto. */
.nh-bulk-bar {
  background: linear-gradient(90deg, rgba(47,129,247,.12), rgba(47,129,247,.04));
  border: 1px solid var(--accent); border-radius: 5px;
  padding: 4px 10px; margin: 6px 12px 0; display: flex; align-items: center; gap: 8px;
  font-size: 12px; line-height: 1.2; white-space: nowrap;
}
.nh-bulk-count { white-space: nowrap; }
.nh-bulk-count strong { color: var(--accent); font-size: 13px; }
.nh-bulk-spacer { flex: 1; }
.nh-bulk-btn {
  padding: 3px 10px; border-radius: 3px; font-size: 11px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--border); font-family: inherit;
  white-space: nowrap; line-height: 1.4;
}
.nh-bulk-ghost { background: transparent; color: var(--text-2); }
.nh-bulk-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.nh-bulk-primary:hover { filter: brightness(1.08); }
.nh-pill-select.active { background: var(--accent); color: #fff; border-color: var(--accent); }