/* Tema scuro, tabelle fluide, nessuno scroll orizzontale (dir. Fabio 2026-11-01). */
:root {
  color-scheme: dark;
  --bg: #0f1115;
  --panel: #171a21;
  --fg: #e8eaf0;
  --muted: #9aa3b2;
  --line: #2a2f3a;
  --line-strong: #3a4048;
}
* { box-sizing: border-box; }
html, body { background: var(--bg); }
body {
  margin: 0;
  padding: 0 0 3rem;
  color: var(--fg);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.skip-link { position: absolute; left: -999px; top: 0; }
.skip-link:focus { position: fixed; left: .5rem; top: .5rem; z-index: 10;
  background: var(--panel); color: var(--fg); padding: .4rem .6rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }

.topbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  justify-content: space-between; padding: .6rem .8rem;
  border-bottom: 1px solid var(--line); background: var(--panel); }
.brand { margin: 0; font-weight: 600; }
.topbar-actions { display: flex; gap: .4rem; }
.btn { border: 1px solid var(--line); background: var(--bg); color: var(--fg);
  padding: .35rem .7rem; border-radius: 6px; font: inherit; cursor: pointer; }
.btn.ghost { border-style: dashed; }

main { padding: 0 .8rem; }
.noscript { color: var(--muted); padding: .6rem 0; }
.errorbar { margin: .7rem 0; padding: .5rem .7rem; border: 1px solid #7c3; border-radius: 6px;
  background: #241318; color: #f2a3ab; }

/* Blocchi filtri (dir. Fabio 2026-11-05/06): TRE blocchi distinti con titoli
   visibili (Colori / Ambiti / Visualizzazione); i pulsanti tutti/nessuno del
   rispettivo gruppo VICINI al titolo; wrap + min-width 0, focus visibile,
   niente overflow anche mobile. */
.filtra-blocco { display: block; margin: .55rem 0 .2rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  padding: .4rem .55rem .5rem; min-width: 0; }
#view .blocco-head { display: flex; flex-wrap: wrap; gap: .45rem .6rem;
  align-items: center; justify-content: space-between; min-width: 0; }
#view .blocco-head .blocco-titolo { margin: 0; }
#view .blocco-head .btn { flex: none; }
.legend-na { display: block; color: var(--muted); font-size: .82em;
  margin: .35rem 0 0; }
#view section.ambito { margin: 1.1rem 0; }
#view h2 { font-size: 1.05rem; margin: .2rem 0 .45rem; }
.legend { display: flex; flex-wrap: wrap; gap: .35rem; margin: .7rem 0 .2rem; }
.caption { color: var(--muted); font-size: .85rem; margin: .25rem 0 .4rem; }

table.comp-table { width: 100%; max-width: 62rem; border-collapse: collapse; table-layout: fixed; }
/* Pallini R/D centrati orizzontale+verticale; nome componente e nota/editor
   a SINISTRA (dir. Fabio 2026-11-01); tutte le celle vertical-middle. */
th, td { border: 1px solid var(--line); padding: .45rem .5rem; text-align: center;
  vertical-align: middle; overflow-wrap: break-word; word-break: break-word; }
thead th { background: var(--panel); }
th.comp-name, td.nota-cella { text-align: left; }
th.comp-name { font-weight: 600; }
textarea, .note-editor textarea { text-align: left; }
/* proporzioni colonne (3 HEADER: Componente prima, poi R/D): R/D strette
   quanto pallino+padding in rem fissi (non percentuali) su thead (il th
   scope=row del corpo resta fluido), Componente occupa il resto; la riga
   nota copre le tre colonne via colspan=3; nessuno scroll orizzontale. */
table.comp-table thead th:nth-child(2) { width: 2.6rem; }
table.comp-table thead th:nth-child(3) { width: 2.6rem; }
/* Componente su due righe: display sopra, tecnico attenuato sotto (solo se differisce). */
.comp-display { display: block; min-width: 0; }
.comp-tecnico { display: block; font-size: .78em; font-weight: 400;
  color: var(--muted); overflow-wrap: break-word; }

.badge { display: inline-block; border-radius: 999px; padding: .12rem .5rem;
  font-size: .87em; border: 1px solid transparent; white-space: normal; }
.b-gray { background: #2b303c; color: #c6cdda; }
.b-white { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.b-orange { background: #4a3312; color: #f3c17b; }
.b-green { background: #123b27; color: #8fe3ae; }
.b-red { background: #47161b; color: #f2a3ab; }
.b-yellow { background: #3f340c; color: #f0dc74; }
.b-blue { background: #16233d; color: #9ec3ff; }
.b-na { background: transparent; color: var(--muted); border-color: var(--line); }

/* Pallino colorato privo di testo: colore esposto solo via background, descrizione in
   title/aria-label (dir. Fabio 2026-11-01). Giallo riservato alla sospensione deliberata. */
.dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; }
.dot-gray { background: #8d95a6; }
.dot-white { background: #e8eaf0; }
.dot-orange { background: #e8983f; }
.dot-green { background: #34a853; }
.dot-red { background: #e35b62; }
.dot-yellow { background: #e0c23c; }
.dot-blue { background: #4d8ef7; }
.dot-na { background: #3a4048; }

/* Colonna conversazione: thread renderizzato come textContent; azioni SOLO
   icone Heroicons vendoring MIT (dir. Fabio 2026-11-01), aria-label completo.
   Primo messaggio (nota originale): italic opacity .7 come prima; risposte
   Theunis colore distrinto leggibile; nessuna opacity sull'intero thread. */
.thread-messaggi { display: block; margin: 0 0 .35rem; }
.thread-msg { margin: 0 0 .3rem; }
.thread-msg .msg-meta { font-size: .78em; color: var(--muted); margin-right: .45rem; }
.thread-msg .msg-body { white-space: pre-wrap; overflow-wrap: break-word; }
.thread-msg.autore-theunis .msg-body { color: #7fd0f2; }
.thread-msg.autore-fabio .msg-body { color: var(--fg); }
.thread-msg.msg-primo .msg-body { font-style: italic; opacity: .7; background: transparent; }
/* Stato dati "na" = solo esplicito/verificato a monte: emoji descritta, non grigio. */
.dot-na-emoji { font-size: 1.05rem; line-height: 1; vertical-align: middle; }
.btn-note { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--fg); border-radius: 6px; padding: .3rem .4rem; }
.btn-note:hover, .btn-note:focus-visible { background: rgba(255, 255, 255, 0.16); }
.icona { width: 1.15rem; height: 1.15rem; display: block; margin: auto; }
.note-editor { margin-top: .2rem; }
.note-editor textarea { width: 100%; min-height: 5rem; font: inherit; color: var(--fg);
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: .4rem .5rem; }
.note-actions { display: flex; gap: .4rem; margin-top: .3rem; justify-content: flex-start; }
.note-actions .btn { padding: .3rem .4rem; }
.btn-save { border-color: #34a853; }
.nota-msg { color: var(--muted); font-size: .86em; margin: .3rem 0 0; min-height: 1em; }

/* Componente = GRUPPO di due righe (tbody): sfondo verde semitrasparente su
   ENTRAMBE le righe, hover/focus condivisi a livello gruppo; contrasto
   mantenuto sul tema scuro (nessuna opacity sulla riga, badge/testi invariati). */
tbody.row-complete tr { background: rgba(52, 168, 83, 0.12); }
tbody.row-complete:hover tr, tbody.row-complete:focus-within tr { background: rgba(52, 168, 83, 0.18); }
/* Gruppo sospeso deliberata SOLO con repo e dati ENTRAMBI gialli (dir. Fabio
   2026-11-01): giallo semitrasparente su entrambe le righe, mai su gruppo
   completo; giallo singolo NON crea gruppo giallo. */
tbody.row-yellow tr { background: rgba(224, 194, 60, 0.12); }
tbody.row-yellow:hover tr, tbody.row-yellow:focus-within tr { background: rgba(224, 194, 60, 0.18); }
/* Ordine bucket (dir. Fabio 2026-11-02): bianco (con orange) -> blu -> verde
   -> giallo -> rosso; sfondo semitrasparente SOLO con entrambi i pallini dello
   stesso colore; blu+rosso e bianco+verde restano neutri; bianco+bianco =
   sfondo bianco attenuato (sconosciuto/in attesa). */
tbody.row-white tr { background: rgba(232, 234, 240, 0.08); }
tbody.row-white:hover tr, tbody.row-white:focus-within tr { background: rgba(232, 234, 240, 0.14); }
tbody.row-blue tr { background: rgba(77, 142, 247, 0.12); }
tbody.row-blue:hover tr, tbody.row-blue:focus-within tr { background: rgba(77, 142, 247, 0.18); }
/* row-gray rimosso: grigio normalizzato a bianco, il bianco e' lo sfondo base */
tbody.row-red tr { background: rgba(227, 91, 98, 0.12); }
tbody.row-red:hover tr, tbody.row-red:focus-within tr { background: rgba(227, 91, 98, 0.18); }

/* Riga percorsi: quattro slot (Hostinger sorgente vs Netcup destinazione,
   repo sopra, dati sotto) in griglia a due colonne; testo puro senza link,
   percorsi con spazi preservati e a capo sicuro (niente scroll orizzontale). */
td.paths-riga { text-align: left; }
.paths-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .45rem .9rem; align-items: stretch; }
/* Quattro celle QUADRATE in layout 2x2 (dir. Fabio 2026-11-05): bordi
   interni 1px DISTINTI, colonne uguali, celle della stessa riga stessa
   altezza (stretch per riga; non un ratio 1:1 letterale); i bordi esterni
   2px del modulo restano sul gruppo, i percorsi restano testo puro. */
.paths-slot { min-width: 0; border: 1px solid var(--line); border-radius: 6px;
  padding: .3rem .45rem; }
.paths-slot-h { display: flex; flex-wrap: wrap; gap: .3rem; align-items: baseline; }
.paths-slot-t { font-size: .78em; font-weight: 600; color: var(--fg); }
.paths-status { font-size: .74em; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: .02rem .4rem; }
.paths-ul { list-style: none; margin: .1rem 0 0; padding: 0; }
.paths-val { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8em; line-height: 1.35; overflow-wrap: anywhere; white-space: pre-wrap; }
li.paths-val.paths-vuoto { color: var(--muted); font-style: italic; }
.paths-desc { display: block; font-size: .72em; color: var(--muted);
  overflow-wrap: anywhere; margin-top: .05rem; }

/* Spaziatori tra blocchi nella STESSA tabella: riga vuota aria-hidden senza
   bordi/sfondo (gap visibile, header una sola volta per ambito). */
tbody.gap td { border: none; padding: .3rem 0; background: transparent; }
tbody.gap { pointer-events: none; }

/* Bordo esterno 2px CONTINUO sul gruppo a due righe, interni 1px (dir. Fabio
   2026-11-01): su collapse vale il bordo piu' largo; l'esterno (top della
   prima riga, bottom della seconda, lati su prima/ultima cella) e' 2px, la
   separazione interna rimane 1px. */
tbody.comp-gruppo tr.comp-riga > th, tbody.comp-gruppo tr.comp-riga > td {
  border-top-width: 2px; border-top-color: var(--line-strong);
}
tbody.comp-gruppo tr.nota-riga > td {
  border-bottom-width: 2px; border-bottom-color: var(--line-strong);
  border-top-width: 1px;
}
tbody.comp-gruppo tr > *:first-child {
  border-left-width: 2px; border-left-color: var(--line-strong);
}
tbody.comp-gruppo tr > *:last-child {
  border-right-width: 2px; border-right-color: var(--line-strong);
}

/* Filtri (dir. Fabio 2026-11-05): i badge legenda e i pulsanti ambito sono
   toggle (tutti ON all'avvio, aria-pressed); stato off attenuato ma leggibile.
   Nessuna preferenza persistente: al refresh lo stato riparte da tutti ON. */
.legend button { font: inherit; font-size: .87em; cursor: pointer; }
.ambiti-bar { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 .2rem; }
.legend button[aria-pressed="false"], .ambiti-bar button[aria-pressed="false"] { opacity: .5; }
.legend button:focus-visible, .ambiti-bar button:focus-visible {
  outline: 2px solid #9ec3ff; outline-offset: 1px; }

/* Controlli globali (dir. Fabio 2026-11-05, additivi): quattro pulsanti
   nativi con lo stile .btn esistente; fila dedicata con wrapping e
   focus-visible coerenti con legenda/ambiti, niente scroll orizzontale. */
.global-controls { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 .2rem; }
.global-controls button:focus-visible {
  outline: 2px solid #9ec3ff; outline-offset: 1px; }

/* Collasso gruppi (dir. Fabio 2026-11-05): bottone NATIVO nel nome (Enter/
   Space), header SEMPRE visibile; le due righe estese nascoste via DOM
   [hidden] con una sola regola globale (niente display override sbagliati). */
[hidden] { display: none !important; }
button.btn-collasso { background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%;
  display: inline-flex; align-items: flex-start; min-width: 0; }
.icona.chev { width: .9rem; height: .9rem; display: inline-block;
  margin: 0 .4rem .1rem 0; vertical-align: middle; transition: transform .12s ease;
  flex: none; }
.gruppo-collasso .btn-collasso .chev { transform: rotate(-90deg); }
tr.comp-riga { cursor: pointer; }
/* bordo base 2px del modulo anche a gruppo collassato (le righe nascoste
   non portano piu' il bordo esterno inferiore) */
tbody.gruppo-collasso > tr.comp-riga > th,
tbody.gruppo-collasso > tr.comp-riga > td {
  border-bottom-width: 2px; border-bottom-color: var(--line-strong);
}
/* Slug (nome tecnico) nascosto SOLO da collassato, visibile espanso (dir.
   Fabio 2026-11-05/06); riga collassata compatta: padding minimo, header su
   UNA riga (freccia+nome), R/D sempre a destra. */
.gruppo-collasso .comp-tecnico { display: none; }
tbody.gruppo-collasso > tr.comp-riga > th,
tbody.gruppo-collasso > tr.comp-riga > td { padding-top: .18rem; padding-bottom: .18rem; }

@media (max-width: 480px) {
  body { font-size: 14px; }
  th, td { padding: .4rem .35rem; }
  .badge, .legend button { font-size: .8em; }
  /* griglia percorsi RESTA 2 colonne anche mobile (dir. 2026-11-05):
     min-width 0 + overflow-wrap evitano scroll orizzontale */
}