:root {
  color-scheme: light dark;
  --bg: #f6f7f9;
  --fg: #16181d;
  --muted: #5b6472;
  --card: #ffffff;
  --line: #dfe3e9;
  --ok: #1a7f4b;
  --ko: #b3261e;
  --pending: #8a6d1f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --fg: #e8eaee;
    --muted: #9aa3b1;
    --card: #1c1f25;
    --line: #2c313a;
    --ok: #4ac47f;
    --ko: #ff6b61;
    --pending: #d9b449;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.site-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}

.site-title {
  font-weight: 700;
  letter-spacing: 0.14em;
}

.site-subtitle {
  color: var(--muted);
  font-size: 0.85rem;
}

main {
  max-width: 84rem;
  margin: 1.5rem auto 3rem;
  padding: 0 1.5rem;
}

/* Reading width, for the pages that are prose and a form rather than tables. */
.narrow {
  max-width: 46rem;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.5rem;
}

h1 {
  margin-top: 0;
  font-size: 1.35rem;
}

.lede {
  color: var(--muted);
}

.status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.25rem 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 600;
}

.status .dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--pending);
}

.status[data-state="ok"] {
  color: var(--ok);
}

.status[data-state="ok"] .dot {
  background: var(--ok);
}

.status[data-state="error"] {
  color: var(--ko);
}

.status[data-state="error"] .dot {
  background: var(--ko);
}

.facts {
  display: grid;
  grid-template-columns: minmax(12rem, auto) 1fr;
  gap: 0.4rem 1rem;
  margin: 0 0 1.25rem;
}

.facts dt {
  color: var(--muted);
}

.facts dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

code,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86rem;
}

pre {
  overflow-x: auto;
  padding: 0.9rem;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
}

summary {
  cursor: pointer;
  color: var(--muted);
}

/* ==========================================================================
   Fase 4 — the application shell and the three pages.

   One stylesheet, no build step, no framework: the pages are tables, filters
   and forms, and the stack decision of Fase 0 was deliberately to avoid a
   toolchain for exactly this much CSS.
   ========================================================================== */

:root {
  --avviso: #8a6d1f;
  --avviso-bg: #fdf6e3;
  --banner-bg: #7a1f1a;
  --banner-fg: #ffffff;
  --accento: #1f4f8a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --avviso: #d9b449;
    --avviso-bg: #2a2413;
    --banner-bg: #5d1a16;
    --banner-fg: #ffe9e7;
    --accento: #6fa8e6;
  }
}

/* --- The unprotected-access banner ---------------------------------------
   Deliberately loud and deliberately not dismissible: it states that this
   deployment has no authentication, which stays true until Fase 7. */
.banner {
  background: var(--banner-bg);
  color: var(--banner-fg);
  padding: 0.6rem 1.5rem;
  font-size: 0.84rem;
  line-height: 1.45;
}

.banner code {
  background: rgba(255, 255, 255, 0.16);
  padding: 0 0.25rem;
  border-radius: 3px;
}

.site-header {
  gap: 1.25rem;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 5;
}

a.site-title {
  color: inherit;
  text-decoration: none;
}

.site-nav {
  display: flex;
  gap: 1.1rem;
  font-size: 0.92rem;
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 0.15rem;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover {
  color: var(--fg);
}

.site-nav a[aria-current="page"] {
  color: var(--fg);
  border-bottom-color: var(--accento);
  font-weight: 600;
}

/*
 * Schede di Impostazioni (Fase 6, parte 3). Stesso linguaggio visivo di
 * .site-nav a[aria-current="page"] — sottolineatura in --accento sulla voce
 * attiva — così la sotto-navigazione a schede non introduce un secondo modo
 * di indicare "sei qui" nell'interfaccia.
 */
.tabs {
  display: flex;
  gap: 1.5rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.25rem;
}

.tabs a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.6rem 0.1rem 0.65rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tabs a:hover {
  color: var(--fg);
}

.tabs a[aria-selected="true"] {
  color: var(--fg);
  border-bottom-color: var(--accento);
  font-weight: 600;
}

.site-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
}

.site-user form {
  display: inline;
}

.user-name {
  color: var(--muted);
}

.site-footer {
  max-width: 84rem;
  margin: 0 auto 2rem;
  padding: 0 1.5rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.site-footer a {
  color: var(--muted);
}

/* --- Blocks --------------------------------------------------------------- */

.card {
  margin-bottom: 1.25rem;
}

h2 {
  margin-top: 0;
  font-size: 1.08rem;
}

h3 {
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
}

h4 {
  font-size: 0.86rem;
  color: var(--muted);
  margin: 1.1rem 0 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.riga-titolo {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.riga-titolo h2 {
  margin: 0;
}

.riga-titolo input[type="search"] {
  margin-left: auto;
  min-width: 20rem;
}

.criteri {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 1rem;
}

.nota {
  color: var(--muted);
  font-size: 0.8rem;
  margin: 0.35rem 0 0;
}

.assente {
  color: var(--muted);
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.84rem;
}

.piccolo {
  font-size: 0.76rem;
}

.forte {
  font-weight: 700;
}

.avviso {
  background: var(--avviso-bg);
  border: 1px solid var(--avviso);
  border-left-width: 4px;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin: 0 0 1.25rem;
  font-size: 0.88rem;
}

.errore {
  color: var(--ko);
  font-weight: 600;
}

.esito-ok {
  border: 1px solid var(--ok);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-top: 1rem;
  font-size: 0.88rem;
}

.esito-conteggi {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  columns: 2;
}

.esito-sezione {
  margin-top: 1rem;
}

.esito-sezione h4 {
  margin: 0 0 0.3rem;
  font-size: 0.9rem;
}

/* --- Forms ---------------------------------------------------------------- */

label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.2rem;
}

input,
select,
textarea,
button {
  font: inherit;
  font-size: 0.9rem;
  color: var(--fg);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
}

textarea {
  width: 100%;
  resize: vertical;
}

button {
  cursor: pointer;
}

button.primario {
  background: var(--accento);
  border-color: var(--accento);
  color: #fff;
  font-weight: 600;
}

button.pericolo {
  border-color: var(--ko);
  color: var(--ko);
}

button.linkish,
a.linkish,
summary.linkish {
  background: none;
  border: none;
  padding: 0;
  color: var(--accento);
  text-decoration: underline;
  font-size: 0.85rem;
  cursor: pointer;
}

.filtri,
.form-griglia {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.1rem;
  align-items: end;
}

.form-riga {
  display: flex;
  gap: 0.75rem;
  align-items: end;
  flex-wrap: wrap;
}

/* Fase 7 — form minuscole dentro una cella di tabella (Utenti locali,
   Richieste di accesso, Provider): una riga stretta, non l'intera larghezza
   di .form-riga, che è pensata per i filtri sopra una tabella. */
.form-inline {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

.azioni {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Fase 7 Parte 3 — checkbox group dei distretti di un Coordinatore, dentro
   lo stesso .form-inline di "Utenti locali" (Impostazioni). La regola
   `display` di una classe CSS d'autore batte sempre lo stile utente-agente
   `[hidden] { display: none }` (l'origine della cascata conta più della
   specificità) — senza la riga sotto, l'attributo `hidden` sarebbe stato
   silenziosamente ignorato ogni volta che il ruolo non è Coordinatori
   (trovato in verifica browser, non solo per prudenza). */
.distretti-campo {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
}

.distretti-campo[hidden] {
  display: none;
}

.campo {
  display: flex;
  flex-direction: column;
}

.campo-largo {
  flex: 1 1 100%;
}

.campo-check {
  gap: 0.3rem;
  align-self: center;
}

.campo-check label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--fg);
  font-size: 0.85rem;
  margin: 0;
}

.campo-check input {
  width: auto;
}

.campo-azioni {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}

.upload-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.upload {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: start;
}

.upload input[type="file"] {
  max-width: 100%;
}

/* --- Tables --------------------------------------------------------------- */

.tabella-scroll {
  overflow-x: auto;
}

.tabella {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.tabella th,
.tabella td {
  padding: 0.4rem 0.55rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.tabella th {
  position: sticky;
  top: 0;
  background: var(--card);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  white-space: nowrap;
}

/* Intestazioni di colonna cliccabili (ordinamento) — stesso linguaggio visivo
   di .site-nav a[aria-current="page"]: sottolineatura in --accento sulla voce
   attiva, mai il solo colore. */
.tabella th a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.tabella th a:hover {
  text-decoration: underline;
}

.tabella th[aria-sort] a {
  color: var(--accento);
  text-decoration: underline;
}

.tabella .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tabella tbody tr:hover {
  background: var(--bg);
}

.tabella .vuoto {
  text-align: center;
  color: var(--muted);
  padding: 1.5rem;
}

.troncato {
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.riga-dettaglio td {
  padding: 0;
  border-bottom: none;
}

.riga-dettaglio:hover {
  background: none;
}

/* Evidenziazione al click su una fetta della torta urgenza ("To Do First
   New") — mai un filtro: la riga resta a schermo, solo lo sfondo cambia.
   Riusa --avviso-bg (già tema chiaro/scuro), nessun nuovo token solo per
   questo. */
.riga-evidenziata td {
  background: var(--avviso-bg);
}

/* --- "To Do First New" (Modifica 9, layout corretto in Modifica 10 — vedi
   PROJECT-LOG) ---------------------------------------------------------- */

/* Filtri e torta sono ora card a piena larghezza, impilate (niente più
   riga a due colonne): la torta usa `.card` "nudo" più il suo contenuto,
   nessuna classe di colonna/altezza dedicata — l'altezza standard di
   `.grafico-riquadro` (18rem, sopra) si applica senza override. */

/* Intestazione di "Uffici in scadenza": titolo/testo a sinistra, export
   compatto a destra della stessa riga.

   `margin-left: auto` su `.tdf-nuovo-export-compatto` (sotto) non è solo
   estetico: quando il testo a sinistra è lungo abbastanza da forzare il
   wrap, `.tdf-nuovo-export-compatto` resta l'unico figlio sulla propria
   riga, e `justify-content: space-between` con un solo figlio lo
   sposta a flex-start (sinistra) invece che a destra — bug reale
   osservato il 2026-09-13, popover aperto fuori dal bordo sinistro del
   viewport perché il suo ancoraggio `right: 0` seguiva quello
   spostamento. Il margine automatico vince sempre su `justify-content`
   per quel figlio e lo tiene incollato al bordo destro della riga in
   entrambi i casi (wrap o no) — vedi il commento su
   `.tdf-nuovo-export-compatto` per il motivo per cui la soluzione non è,
   invece, spostare `position: relative` su questo contenitore. */
.tdf-nuovo-intestazione-sezione {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

/* `position: relative` resta qui (non sale su
   `.tdf-nuovo-intestazione-sezione`) perché è il positioning context
   verticale del `.popover`: `top: calc(100% + 0.4rem)` deve misurarsi
   dal fondo del BOTTONE, non dal fondo dell'intera riga. Un primo
   tentativo di fix (stessa data) aveva spostato `position: relative`
   sulla riga per risolvere l'ancoraggio orizzontale — funzionava nel
   caso wrappato (il bottone è l'ultima riga flex, quindi coincide col
   fondo del contenitore) ma rompeva il caso normale non wrappato: la
   riga è alta quanto il testo a sinistra (più alto del bottone), quindi
   `top: 100%` cadeva sotto il TESTO, con un vistoso spazio vuoto tra
   bottone e popover — rilevato in revisione (`heimdall-reviewer`) prima
   del commit, mai osservato in produzione. `margin-left: auto` sulla
   riga sopra risolve l'orizzontale senza toccare il positioning context
   verticale: il wrapper del bottone resta sempre a sé stante (la sua
   altezza è sempre solo quella del bottone), `top: 100%` misurato da lì
   è quindi sempre corretto, wrap o non wrap. */
.tdf-nuovo-export-compatto {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
}

.btn-compatto {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  color: var(--fg);
  cursor: pointer;
  white-space: nowrap;
}

.btn-compatto:hover {
  border-color: var(--accento);
}

/* Toggle "+"/"−" di riga (Modifica 10, correzione da valutazione UX): prima
   riusava `.linkish` (padding:0, un solo glifo) — area di tocco ben sotto i
   24x24px CSS minimi di WCAG 2.5.8, sentita di più qui perché è un vero
   toggle apri/chiudi/riapri, non una singola espansione come nell'originale
   "To Do First". Stesso linguaggio visivo di `.btn-compatto`, dimensionato
   per restare un quadrato con area di tocco reale attorno al glifo. */
.btn-toggle-ufficio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  min-height: 1.75rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.25rem;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--fg);
  cursor: pointer;
}

.btn-toggle-ufficio:hover {
  border-color: var(--accento);
}

/* Popover minimale, nessuna libreria: stesso linguaggio visivo di `.card`,
   solo posizionato in overlay sotto il bottone che lo apre.

   Convenzione per i futuri FiltroBeta che riusano questo pattern: il
   positioning context (`position: relative`) va tenuto sul wrapper LOCALE
   del bottone (qui `.tdf-nuovo-export-compatto`), mai su un antenato più
   largo — `top: calc(100% + 0.4rem)` deve misurarsi dal fondo del
   bottone, non dal fondo di una riga che può contenere anche altro
   contenuto più alto (il testo dell'intestazione). Il problema del
   contenitore che può wrappare (e quindi spostarsi a sinistra, portando
   con sé un ancoraggio `right: 0` — bug reale osservato il 2026-09-13) si
   risolve invece sul wrapper stesso, con `margin-left: auto` (vedi
   commento su `.tdf-nuovo-export-compatto`): lo tiene ancorato al bordo
   destro della riga wrap o non wrap, così `right: 0` resta affidabile
   SENZA dover spostare il positioning context altrove. Semplicemente
   scambiare `right: 0` con `left: 0` non sarebbe comunque un fix
   equivalente: sposterebbe lo sconfinamento sul bordo opposto nel caso
   (non wrappato) in cui il bottone è già correttamente a destra.

   Larghezza corretta in Modifica 10 (correzione da valutazione UX): era
   `min-width: 20rem` fisso, che su un viewport stretto (~360-375px, un
   telefono comune) sconfina fuori dallo schermo. `min-width` vince sempre
   su `max-width` quando i due sono in conflitto (per specifica CSS),
   quindi aggiungere solo un `max-width` non avrebbe corretto nulla:
   bisognava sostituire `min-width` con `width` (base desiderata, cede il
   passo a `max-width` quando non c'è spazio).

   `max-width` corretto il 2026-09-13: contava solo il padding di `main`
   (1.5rem per lato = 3rem), non quello di `.card` (altri 1.5rem per
   lato) in cui il popover è annidato — sottostimava di 3rem l'ingombro
   reale, lasciando il popover libero di sconfinare visivamente oltre il
   bordo sinistro della card (non del viewport: non era il bug di questa
   sessione, ma un'imprecisione distinta nello stesso calcolo). Ora conta
   entrambi: `100vw` meno il padding di `main` E di `.card` (1.5rem per
   lato ciascuno = 6rem totali). */
.popover {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 10;
  width: 20rem;
  max-width: calc(100vw - 6rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Intestazione di "Direttive" (scheda "Direttive New"): stessa identica
   struttura di `.tdf-nuovo-intestazione-sezione`/`.tdf-nuovo-export-
   compatto` (vedi i loro commenti sopra per il ragionamento completo,
   incluso il bug del 2026-09-13 e perché la correzione non era spostare
   `position: relative` sulla riga) — classi proprie invece di riuso
   letterale, perché "Direttive New" è una scheda diversa e questo pattern
   è pensato per essere clonato, non condiviso, dai futuri FiltroBeta. */
.dn-intestazione-sezione {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.dn-export-compatto {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
}

/* Touch target WCAG 2.5.8 fin dall'inizio (non una correzione successiva,
   richiesta esplicita per questa scheda) — stessa identica regola di
   `.btn-toggle-ufficio`, classe propria per lo stesso motivo di `.dn-*`
   sopra. */
.btn-toggle-direttiva {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  min-height: 1.75rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.25rem;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--fg);
  cursor: pointer;
}

.btn-toggle-direttiva:hover {
  border-color: var(--accento);
}

/* Intestazione di "Carico per Distretto" — stessa identica struttura di
   `.dn-intestazione-sezione`/`.dn-export-compatto` (position: relative
   locale + margin-left: auto sin dall'inizio, non una correzione
   successiva: la duplicazione/lo sconfinamento erano bug già noti prima
   di scrivere questa scheda). Classi proprie, stesso motivo di `.dn-*`. */
.cd-intestazione-sezione {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.cd-export-compatto {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
}

/* Touch target WCAG 2.5.8 fin dall'inizio, stessa regola di `.btn-toggle-direttiva`. */
.btn-toggle-distretto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  min-height: 1.75rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.25rem;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--fg);
  cursor: pointer;
}

.btn-toggle-distretto:hover {
  border-color: var(--accento);
}

/* Intestazione di "Per Tecnico" — stessa identica struttura di
   `.dn-*`/`.cd-*` (position: relative locale + margin-left: auto sin
   dall'inizio). Classi proprie, stesso motivo. */
.pt-intestazione-sezione {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.pt-export-compatto {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
}

/* Touch target WCAG 2.5.8 fin dall'inizio, stessa regola di `.btn-toggle-distretto`. */
.btn-toggle-tecnico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  min-height: 1.75rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.25rem;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--fg);
  cursor: pointer;
}

.btn-toggle-tecnico:hover {
  border-color: var(--accento);
}

/* Intestazione di "Anzianità" — stessa identica struttura di
   `.pt-*`/`.dn-*`/`.cd-*` (position: relative locale + margin-left: auto sin
   dall'inizio). Classi proprie, stesso motivo. */
.an-intestazione-sezione {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.an-export-compatto {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
}

/* Touch target WCAG 2.5.8 fin dall'inizio, stessa regola di `.btn-toggle-tecnico`. */
.btn-toggle-fascia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  min-height: 1.75rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.25rem;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--fg);
  cursor: pointer;
}

.btn-toggle-fascia:hover {
  border-color: var(--accento);
}

/* Intestazione di "Attività Field per gruppo" (Fase 7, una per ogni ambito)
   — stessa identica struttura di `.pt-*`/`.dn-*`/`.cd-*`/`.an-*` (position:
   relative locale + margin-left: auto sin dall'inizio). Classi proprie,
   stesso motivo. Il toggle di riga riusa `.btn-toggle-tecnico` (sopra,
   "Per Tecnico"): stesso identico linguaggio visivo, nessuna variante di
   colore/dimensione — solo lo stile del bottone, non un positioning
   context, quindi qui non serve clonarlo come per le due classi sopra. */
.gt-intestazione-sezione {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.gt-export-compatto {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
}

.tabella-diagnostica td:first-child {
  width: 6rem;
}

.chiave {
  color: var(--muted);
  font-size: 0.72rem;
}

.diagnostica {
  padding: 0 0.5rem 1rem;
}

/* --- KPI tiles ------------------------------------------------------------ */

.kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.kpi-cella {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.kpi-valore {
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.kpi-etichetta {
  font-size: 0.74rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- Tags and duplicates -------------------------------------------------- */

.tag {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}

.tag-escluso {
  border-color: var(--ko);
  color: var(--ko);
}

.tag-motivo {
  border-color: var(--avviso);
  color: var(--avviso);
}

/* Semaforo Monitoraggio Direttive — stesse variabili di colore già in uso sopra. */
.tag-rosso {
  border-color: var(--ko);
  color: var(--ko);
}

.tag-arancione {
  border-color: var(--pending);
  color: var(--pending);
}

.tag-verde {
  border-color: var(--ok);
  color: var(--ok);
}

.esito {
  font-size: 0.78rem;
  font-weight: 600;
}

.esito-completato {
  color: var(--ok);
}

.esito-fallito {
  color: var(--ko);
}

.esito-in_corso {
  color: var(--pending);
}

/* --- Anomalie: direction, colour plus text, never colour alone ------------ */

.direzione-sopra {
  color: var(--ok);
}

.direzione-sotto {
  color: var(--avviso);
}

/* --- Confronto: winner per metric, colour plus a bold weight, never colour alone --- */

.confronto-vince {
  color: var(--ok);
  font-weight: 700;
}

/* --- Obiettivi: progress bar. Width is a server-computed number (0-100), --- */
/* never raw user text, so an inline `style="width: …%"` is safe here.       */

.barra-avanzamento {
  display: inline-block;
  width: 8rem;
  height: 0.6rem;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  vertical-align: middle;
  margin-right: 0.4rem;
}

.barra-avanzamento-riempimento {
  height: 100%;
  background: var(--accento);
}

/* --- Giornaliero: the 60-day calendar --------------------------------- */

.giorni {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.giorno-riga {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 0.5rem 1rem;
  padding: 0.55rem 0.3rem;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.giorno-riga:last-child {
  border-bottom: none;
}

.giorno-vuoto {
  opacity: 0.65;
}

.giorno-data {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

.giorno-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.giorno-dettaglio {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.giorno-elenco {
  margin: 0.2rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.giorno-elenco li {
  margin-bottom: 0.1rem;
}

/* --- Grafici: four Chart.js canvases in a 2x2 grid ---------------------- */

.grafici-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 1.25rem;
}

.grafico-riquadro {
  position: relative;
  height: 18rem;
}

.elenco-duplicati {
  margin: 0.6rem 0 0;
  padding-left: 1.1rem;
}

.elenco-duplicati li {
  margin-bottom: 0.4rem;
}

.dup-voce {
  display: inline-block;
}

.vs {
  color: var(--muted);
  margin: 0 0.4rem;
}

details.modifica > summary {
  white-space: nowrap;
}

details.modifica[open] {
  display: block;
  min-width: 34rem;
}

.form-tecnico {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.esito-riga {
  flex: 1 1 100%;
}

/* htmx sets this class while a request is in flight. */
.htmx-indicator {
  opacity: 0;
  color: var(--muted);
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}