/* ============================================================================
   BACK-OFFICE - guscio (LayoutBackoffice), elenchi ed entita'.
   Direzione "Blueprint Tecnico" (ADR-0006) portata sulla densita' interna (D83):
   rail navy + top-bar (D114), tabelle dense con scroll orizzontale (D115),
   schede entita' a due colonne (D116) e storico append-only a timeline.
   Decisioni D114-D123 / ADR-0012. I VALORI vengono dai token (tokens.css);
   qui solo composizione. Assorbe i fogli provvisori gestione-utenti.css (.gestione,
   S2.2) e audit.css (.registro-audit, S2.3): primitive ora generiche e DRY.
   ============================================================================ */

/* ===========================================================================
   1. GUSCIO - rail navy + top-bar (D114). App-shell a piena altezza: top-bar e
   rail restano fissi, solo il contenuto scorre. Sotto la soglia desktop il guscio
   torna a flusso normale e la rail diventa una barra orizzontale (zero JS, D85).
   =========================================================================== */
.bo {
  --bo-rail-larghezza: 232px;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-columns: var(--bo-rail-larghezza) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "topbar topbar"
    "rail   main";
  background: var(--neutral-50);
}

.bo-topbar { grid-area: topbar; }
.bo-main {
  grid-area: main;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-6);
}

/* ---- Rail di navigazione (superficie scura) ---- */
.bo-rail {
  grid-area: rail;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4) var(--space-3);
  background: var(--rail-bg);
  border-right: var(--border-width) solid var(--rail-bordo);
}
.bo-rail__sezione {
  margin: var(--space-4) var(--space-3) var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rail-testo-muto);
}
.bo-rail__sezione:first-child { margin-top: 0; }
.bo-rail__voce {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  color: var(--rail-testo);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  transition: background-color var(--motion-fast), color var(--motion-fast);
}
.bo-rail__voce:hover { background: var(--rail-hover-bg); color: var(--rail-attivo-testo); }
.bo-rail__voce[aria-current="page"] {
  background: var(--rail-attivo-bg);
  color: var(--rail-attivo-testo);
  border-left-color: var(--rail-attivo-barra);
}
.bo-rail__voce svg { flex: none; width: 18px; height: 18px; opacity: .82; }
.bo-rail__voce[aria-current="page"] svg { opacity: 1; }

/* ===========================================================================
   2. ELENCO - testata, barra filtri, tabella densa, paginazione, stati (D117-D122)
   =========================================================================== */
.elenco { width: 100%; }

/* ---- Testata: titolo + sottotitolo + azioni ---- */
.elenco-testata {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.elenco-testata__titolo h1 {
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  color: var(--neutral-900);
}
.elenco-testata__titolo p {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--neutral-500);
}
.elenco-testata__azioni { display: inline-flex; gap: var(--space-3); flex-wrap: wrap; }

/* Link di ritorno (dalla scheda all'elenco). */
.bo-ritorno {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
}

/* ---- Barra filtri (form GET, stato nell'URL: D119) ---- */
.filtri {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--neutral-50);
  border: var(--border-default);
  border-radius: var(--radius-md);
}
.filtri .campo { margin-bottom: 0; }
.filtri__cerca { flex: 1 1 16rem; }
.filtri select.campo__input { min-width: 11rem; }

/* ---- Contenitore con scroll orizzontale per le tabelle larghe (D115) ----
   Bound dell'altezza: con `overflow-x: auto` il browser calcola anche `overflow-y: auto`,
   quindi il wrap diventa il contenitore di scroll a cui si ancora il thead sticky; senza
   un'altezza massima non scorrerebbe mai in verticale e lo sticky resterebbe inerte (ux 5).
   Limitando l'altezza, l'header resta incollato mentre le righe scorrono dentro il wrap. */
.tabella-wrap {
  overflow: auto;
  max-height: calc(100dvh - 13rem);
  border: var(--border-default);
  background: var(--neutral-0);
}

/* Tabella larga (molte colonne): larghezza minima oltre cui scrolla nel wrap.
   In classe (non inline) per non violare la guardia anti-style della CSP (D111). */
.tabella--larga { min-width: 56rem; }

/* ---- Tabella densa. Bordi netti (niente raggio): il border-radius non si rende
   sulle tabelle border-collapse e l'overflow che lo simula spegnerebbe il thead
   sticky (ux 5). Gli angoli vivi rafforzano il "disegno tecnico" (ADR-0006);
   le card e i controlli mantengono il raggio. La tabella avvolta lascia il bordo
   al contenitore .tabella-wrap. ---- */
.tabella {
  width: 100%;
  border-collapse: collapse;
  background: var(--neutral-0);
  border: var(--border-default);
}
.tabella-wrap > .tabella { border: 0; }
.tabella thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--neutral-500);
  background: var(--neutral-50);
  border-bottom: var(--border-strong);
  white-space: nowrap;
}
.tabella tbody td {
  padding: var(--pad-riga-y) var(--space-4);
  font-size: var(--text-sm);
  color: var(--neutral-700);
  border-bottom: var(--border-default);
  vertical-align: middle;
}
.tabella tbody tr:last-child td { border-bottom: none; }
.tabella tbody tr:hover { background: var(--neutral-100); }
.tabella .col-azioni { text-align: right; white-space: nowrap; }
.tabella td .principale { font-weight: var(--fw-medium); color: var(--neutral-800); }
.tabella td .secondario { color: var(--neutral-500); font-size: var(--text-xs); }
/* Codici e identificativi in mono funzionale (D63): P.IVA, protocolli, istanti, IP. */
.tabella .mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--neutral-600);
  white-space: nowrap;
}
/* Valore assente o attore non identificato: tono attenuato ma leggibile (AA). */
.testo-muto { color: var(--neutral-500); }

/* Celle con piu' colonne dense impilano in alto (registro audit). */
.tabella--alto tbody td { vertical-align: top; }

/* ---- Intestazione ordinabile (link GET, aria-sort, zero JS: D118) ---- */
.tabella th .ordina {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: inherit;
  text-decoration: none;
  letter-spacing: inherit;
}
.tabella th .ordina:hover { color: var(--neutral-700); }
.tabella th .ordina::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: .35;
  transform: rotate(45deg);
}
.tabella th[aria-sort="ascending"] .ordina::after { opacity: .9; transform: rotate(-135deg); }
.tabella th[aria-sort="descending"] .ordina::after { opacity: .9; transform: rotate(45deg); }

/* ---- Dettagli non-PII in chip etichetta/valore (registro audit) ---- */
.dettagli-chip { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.dettaglio-chip { font-size: var(--text-xs); color: var(--neutral-700); }
.dettaglio-chip__k { color: var(--neutral-500); font-weight: var(--fw-medium); }

/* ---- Paginazione server-side (D120) ---- */
.paginazione {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--neutral-500);
}
.paginazione__controlli { display: inline-flex; gap: var(--space-2); }

/* ---- Stato vuoto: distingue il vuoto positivo dal vuoto da riempire (D122) ---- */
.elenco-vuoto {
  padding: var(--space-10) var(--space-6);
  text-align: center;
  color: var(--neutral-500);
  background: var(--neutral-0);
  border: var(--border-default);
  border-radius: var(--radius-md);
}
.elenco-vuoto__titolo {
  margin-bottom: var(--space-1);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  color: var(--neutral-700);
}

/* ===========================================================================
   3. SCHEDA ENTITA' - header + corpo a due colonne + sezioni (D116/D121)
   =========================================================================== */
.scheda { width: 100%; }
/* Scheda a colonna stretta per le pagine-form (invito, editor a campo singolo):
   un form non deve stirarsi su tutta la larghezza del back-office. */
.scheda--stretta { max-width: 44rem; }

.scheda-testata {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-default);
}
.scheda-testata__titolo { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.scheda-testata__titolo h1 {
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  color: var(--neutral-900);
}
.scheda-testata__azioni { display: inline-flex; gap: var(--space-3); flex-wrap: wrap; }

/* Corpo: colonna principale + aside sticky a destra. */
.scheda-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: var(--space-5);
  align-items: start;
}
.scheda-main { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.scheda-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: sticky;
  top: var(--space-5);
}

/* ---- Sezione (card bordata) ---- */
.scheda-sezione {
  padding: var(--space-5) var(--space-6);
  background: var(--neutral-0);
  border: var(--border-default);
  border-radius: var(--radius-md);
}
.scheda-sezione h2 {
  margin-bottom: var(--space-4);
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  color: var(--neutral-800);
}
.scheda-sezione > p.aiuto {
  margin-top: calc(-1 * var(--space-2));
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--neutral-500);
}

/* Coppie etichetta/valore (metadati). */
.dati {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
}
.dati dt { color: var(--neutral-500); }
.dati dd { color: var(--neutral-800); font-weight: var(--fw-medium); }
.dati dd.mono { font-family: var(--font-mono); font-weight: var(--fw-regular); letter-spacing: .02em; }

/* Gruppo di azioni (ogni azione e' un form SSR). */
.azioni-riga { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.azioni-riga form { display: inline-flex; margin: 0; }

/* Righe ruolo (toggle assegna/revoca). */
.ruoli-lista { display: flex; flex-direction: column; gap: var(--space-2); }
.ruolo-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: var(--border-default);
  border-radius: var(--radius-sm);
}
.ruolo-riga[data-assegnato="true"] { background: var(--primary-50); border-color: color-mix(in srgb, var(--primary-700) 25%, var(--neutral-200)); }
.ruolo-riga__nome { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--neutral-800); }
.ruolo-riga__nome small { display: block; font-weight: var(--fw-regular); color: var(--neutral-500); }

/* ===========================================================================
   4. MATRICE (ruolo x permesso) - tabella di toggle
   =========================================================================== */
.matrice {
  width: 100%;
  border-collapse: collapse;
  background: var(--neutral-0);
  border: var(--border-default);
  border-radius: var(--radius-md);
}
.matrice th, .matrice td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  border-bottom: var(--border-default);
  text-align: left;
}
.matrice thead th { background: var(--neutral-50); color: var(--neutral-600); font-weight: var(--fw-semibold); border-bottom: var(--border-strong); }
.matrice tbody tr:last-child td { border-bottom: none; }
.matrice td.cella-permesso { text-align: center; }
.matrice .ruolo-nome { font-weight: var(--fw-medium); color: var(--neutral-800); }
.matrice form { margin: 0; }

.toggle-permesso {
  min-width: 7.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .03em;
}
.toggle-permesso[data-concesso="true"] { color: var(--success-text); border-color: color-mix(in srgb, var(--success) 45%, var(--neutral-200)); background: var(--success-bg); }
.toggle-permesso[data-bloccato="true"] { opacity: .55; cursor: not-allowed; }

/* ===========================================================================
   5. STORICO - timeline verticale append-only (D116/ADR-0009/0010).
   Nodi quadrati e righello sottile: feel "disegno tecnico" del Blueprint.
   Primitiva del sistema per gli storici di entita' (stati fornitore,
   provvedimenti, revoche) di Sprint 3.
   =========================================================================== */
.storico { display: flex; flex-direction: column; }
.storico__voce {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  padding-bottom: var(--space-4);
}
.storico__voce:last-child { padding-bottom: 0; }
.storico__marker { position: relative; display: flex; justify-content: center; width: 12px; }
.storico__marker::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: calc(-1 * var(--space-4));
  width: 2px;
  background: var(--neutral-200);
}
.storico__voce:last-child .storico__marker::before { display: none; }
.storico__nodo {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  margin-top: 2px;
  background: var(--neutral-0);
  border: 2px solid var(--primary-700);
  border-radius: 2px;
}
.storico__corpo { min-width: 0; }
.storico__quando {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--neutral-500);
}
.storico__titolo { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--neutral-800); }
.storico__dettaglio { font-size: var(--text-xs); color: var(--neutral-500); }

/* ===========================================================================
   6. RESPONSIVE - sotto la soglia desktop il guscio torna a flusso normale e
   la rail collassa in barra orizzontale scorrevole (back-office desktop-first,
   ux-principles 1/4: nessun caso d'uso mobile, ma non si rompe).
   =========================================================================== */
@media (max-width: 880px) {
  .bo {
    height: auto;
    overflow: visible;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "topbar"
      "rail"
      "main";
  }
  .bo-rail, .bo-main { overflow: visible; }
  .bo-rail {
    flex-direction: row;
    gap: var(--space-1);
    overflow-x: auto;
    padding: var(--space-2) var(--space-3);
    border-right: none;
    border-bottom: var(--border-width) solid var(--rail-bordo);
  }
  .bo-rail__sezione { display: none; }
  .bo-rail__voce {
    white-space: nowrap;
    border-left: none;
    border-bottom: 2px solid transparent;
  }
  .bo-rail__voce[aria-current="page"] { border-left-color: transparent; border-bottom-color: var(--rail-attivo-barra); }
  .bo-main { padding: var(--space-5); }
}

@media (max-width: 1024px) {
  .scheda-corpo { grid-template-columns: 1fr; }
  .scheda-aside { position: static; }
}

/* ===========================================================================
   7. SCHEDA ENTITA' RICCA - affinamento (D124-D138 / ADR-0012 esteso).
   Banco di prova: scheda Fornitore. Testata a banda identita', stato primario
   + sotto-stato + banner critico, indice ad ancore, checklist documentale,
   provvedimenti, storico arricchito, menu overflow. I VALORI vengono dai token.
   =========================================================================== */

/* ---- Testata: banda identita' (D125) a sinistra, cluster stato/azioni (D126/D127) a destra.
   La .scheda-testata (sopra) resta il contenitore flex space-between con bordo. ---- */
.scheda-identita { min-width: 0; }
.scheda-identita h1 { font-size: var(--text-2xl); line-height: var(--leading-2xl); color: var(--neutral-900); }
.scheda-identita__codici {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--neutral-500);
}
.scheda-identita__codici .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--neutral-700); }
.scheda-identita__codici .sep { color: var(--neutral-300); }

.scheda-cluster { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); }
.scheda-stato { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.scheda-stato__sotto { font-size: var(--text-xs); color: var(--neutral-500); }

/* ---- Banner critico (D126): esclusione attiva o documento bloccante scaduto.
   Piu' forte di .avviso, a tutta larghezza sotto la testata. ---- */
.scheda-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  border: var(--border-width) solid;
  border-left-width: 4px;
  border-radius: var(--radius-md);
}
.scheda-banner__icona { flex: none; margin-top: 1px; }
.scheda-banner__corpo { flex: 1; min-width: 0; }
.scheda-banner__titolo { font-weight: var(--fw-semibold); }
.scheda-banner__dettaglio { margin-top: 2px; font-size: var(--text-sm); }
.scheda-banner__azione { flex: none; }
.scheda-banner--danger  { background: var(--danger-bg);  border-color: color-mix(in srgb, var(--danger) 45%, var(--danger-bg));   border-left-color: var(--danger);  color: var(--danger-text); }
.scheda-banner--warning { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 45%, var(--warning-bg)); border-left-color: var(--warning); color: var(--warning-text); }

/* ---- Indice ad ancore (D128) nell'aside sticky: link puri (zero JS), deep-link,
   stampa, nessun reset su POST. ---- */
.scheda-indice {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--space-4);
  background: var(--neutral-0);
  border: var(--border-default);
  border-radius: var(--radius-md);
}
.scheda-indice__titolo {
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-500);
}
.scheda-indice a {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  color: var(--neutral-700);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.scheda-indice a:hover { background: var(--neutral-100); color: var(--primary-700); border-left-color: var(--primary-700); }
.scheda-indice a .conteggio { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--neutral-500); }

/* ---- Header di sezione con azione (per l'edit inline a toggle di sezione, D134) ---- */
.scheda-sezione__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.scheda-sezione__head h2 { margin-bottom: 0; }
.scheda-sezione__head a { font-size: var(--text-sm); font-weight: var(--fw-medium); }
.scheda-sezione__sintesi { font-size: var(--text-sm); color: var(--neutral-500); }

/* Meta-header della Pratica corrente: chip di contesto sopra la checklist (D129). */
.pratica-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-default);
  font-size: var(--text-sm);
  color: var(--neutral-600);
}
.pratica-meta b { color: var(--neutral-800); font-weight: var(--fw-medium); }
.pratica-meta .mono { font-family: var(--font-mono); }

/* ---- Chip: etichette brevi (obbligatorio/facoltativo, ambito, categoria) ---- */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  white-space: nowrap;
  color: var(--neutral-600);
  background: var(--neutral-100);
  border: var(--border-default);
  border-radius: var(--radius-sm);
}
.chip--obbligatorio { color: var(--primary-700); background: var(--primary-50); border-color: color-mix(in srgb, var(--primary-700) 25%, var(--neutral-200)); }

/* ---- Checklist documentale (D130): sotto-componente cardine, lista-righe.
   Riga = documento: icona-stato | nome+meta | scadenza | azione, con la
   motivazione del rifiuto inline sotto. Dual-mode (D136) in fondo. ---- */
.checklist { display: flex; flex-direction: column; background: var(--neutral-0); border: var(--border-default); border-radius: var(--radius-md); }
.checklist__riga {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-default);
}
.checklist__riga:last-child { border-bottom: none; }
.checklist__riga:hover { background: var(--neutral-50); }
.checklist__stato { display: inline-flex; }
.checklist__doc { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.checklist__nome { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--neutral-800); }
/* neutral-600 (non 500): la meta puo' trovarsi sull'hover di riga (neutral-50), dove
   neutral-500 scenderebbe a 4.19:1; neutral-600 resta sopra 7:1 sia su bianco sia su neutral-50. */
.checklist__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--neutral-600); }
.checklist__scadenza { font-size: var(--text-xs); white-space: nowrap; }
.checklist__flag { font-size: var(--text-xs); white-space: nowrap; }
.checklist__azione { justify-self: end; display: inline-flex; gap: var(--space-2); }
/* Motivazione del rifiuto: sempre visibile (espansa) sotto la riga, indentata
   sotto il nome del documento. Tono d'allerta (D130). */
.checklist__motivazione {
  grid-column: 2 / -1;
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  color: var(--danger-text);
  background: var(--danger-bg);
  border-left: 2px solid var(--danger);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
/* Stato vuoto delle sezioni della scheda (D135). */
.checklist-vuoto { padding: var(--space-8) var(--space-5); text-align: center; color: var(--neutral-500); }
.checklist-vuoto > * + * { margin-top: var(--space-2); }

/* ---- Provvedimenti (ADR-0010): record append-only, blocco bordato. La revoca
   e' un record separato; il bordo sinistro segnala l'attivita'. ---- */
.provv { border: var(--border-default); border-radius: var(--radius-md); border-left: 4px solid var(--danger); background: var(--neutral-0); }
.provv + .provv { margin-top: var(--space-3); }
.provv--revocato { border-left-color: var(--neutral-300); opacity: .72; }
.provv__head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-bottom: var(--border-default); }
.provv__quando { font-size: var(--text-sm); color: var(--neutral-500); }
.provv__azione { margin-left: auto; }
.provv__corpo { padding: var(--space-4); }

/* ---- Storico arricchito (D131): attore + causale + nodo tipizzato per categoria.
   Estende la primitiva .storico (sezione 5). Il colore del nodo rinforza, il
   titolo porta il significato (icona+testo, ux 3). ---- */
.storico__attore { font-size: var(--text-xs); color: var(--neutral-600); }
.storico__attore b { font-weight: var(--fw-medium); color: var(--neutral-700); }
.storico__causale { font-size: var(--text-xs); color: var(--neutral-500); }
.storico__cat { display: inline-block; margin-left: var(--space-2); font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--neutral-500); }
.storico__voce--stato         .storico__nodo { border-color: var(--primary-700); }
.storico__voce--provvedimento .storico__nodo { border-color: var(--danger);  background: var(--danger-bg); }
.storico__voce--comunicazione .storico__nodo { border-color: var(--info); }
.storico__voce--esito         .storico__nodo { border-color: var(--success); background: var(--success-bg); }

/* ---- Menu overflow (D124/D127): Popover API nativa ancorata al bottone 3-puntini.
   Una sola overflow per scheda: anchor-name fisso (niente style inline, CSP D111).
   Con anchor positioning (Baseline 2024) si ancora sotto il bottone; senza, il
   reset * { margin:0 } (base.css) ancorerebbe il popover in alto a sinistra, quindi
   ripristiniamo margin:auto come fallback (action-sheet centrato). ---- */
.scheda-overflow { anchor-name: --scheda-overflow; }
.menu {
  width: min(20rem, calc(100vw - var(--space-8)));
  padding: var(--space-2);
  background: var(--neutral-0);
  border: var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-2);
  margin: auto;
}
@supports (position-area: bottom span-left) {
  /* inset:auto annulla l'inset:0 dello UA stylesheet del popover: senza, l'inset
     ereditato diventa offset rispetto alla position-area e sovra-vincola il box
     (reset canonico MDN per i popover ancorati). Cosi' e' la sola position-area
     a collocare il menu sotto il bottone, allineato a destra (span-left). */
  .menu { margin: 0; inset: auto; margin-top: var(--space-1); position-anchor: --scheda-overflow; position-area: bottom span-left; }
}
.menu:popover-open { animation: menu-entra var(--motion-fast) both; }
@keyframes menu-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .menu:popover-open { animation: none; } }
.menu__gruppo { padding: var(--space-2) var(--space-3) var(--space-1); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--neutral-500); }
.menu__gruppo--pericolo { color: var(--danger); }
.menu__sep { border: 0; border-top: var(--border-default); margin: var(--space-2) calc(-1 * var(--space-2)); }
.menu form { margin: 0; display: block; }
.menu__voce {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--neutral-700);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.menu__voce:hover { background: var(--neutral-100); color: var(--neutral-900); }
.menu__voce svg { flex: none; width: 16px; height: 16px; opacity: .7; }
.menu__voce--pericolo { color: var(--danger-text); }
.menu__voce--pericolo:hover { background: var(--danger-bg); }

/* ---- Responsive della scheda ricca (D136). Back-office desktop-first: la riga
   di checklist manda l'azione a capo su stretto (resta riga). Il collasso a card
   resta del portale fornitore (.densita-fornitore) su mobile. ---- */
@media (max-width: 720px) {
  .checklist__riga { grid-template-columns: auto minmax(0, 1fr); }
  .checklist__scadenza, .checklist__flag, .checklist__azione { grid-column: 2 / -1; justify-self: start; }
}
@media (max-width: 640px) {
  .densita-fornitore .checklist__riga { grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-4); }
  .densita-fornitore .checklist__stato { justify-self: start; }
  .densita-fornitore .checklist__azione { justify-self: stretch; }
  .densita-fornitore .checklist__azione .btn { width: 100%; }
}