/* ===========================================================================
   Componenti del framework che si portano dietro il proprio stile.
   ---------------------------------------------------------------------------
   PERCHE' STA QUI E NON NEGLI styles/ DEI SITI.

   styles/ e' cartella del sito, non del framework: ogni foglio va copiato e
   mantenuto in ogni progetto. Lo abbiamo gia' visto con la paginazione delle
   tabelle admin, che oggi esiste solo su due siti su nove - negli altri sette
   esce con l'aspetto di un elenco di contenuto perche' nessuno l'ha copiata.

   Un componente nuovo del FW non puo' pretendere che nove progetti aggiornino
   il proprio CSS per funzionare. Quindi se lo porta dietro: il modulo che lo
   usa emette il <link> a questo file, che arriva con l'overlay del framework.
   Nessun sito deve toccare niente. E' lo stesso schema gia' usato da
   tiptap/tiptap.css, che si linka da tiptap/editor.php.

   I COLORI SEGUONO IL SITO, non sono decisi qui: si leggono dalle variabili
   CSS che il sito definisce nel suo screen.css (--color-accent e compagnia),
   col valore dopo la virgola come ripiego per chi non le ha ancora. Stessa
   logica delle decorazioni rifatte in CSS al posto delle immagini.
   =========================================================================== */

/* Numeri incolonnati a destra: una classifica si legge male se le cifre
   ballano. Il prefisso #article serve a superare "#article td { text-align:
   left }" dei fogli editoriali, che contiene un id e vincerebbe. */
#article table.awv-table .awv-num,
table.awv-table .awv-num { text-align: right; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   BARRA PROPORZIONALE
   Due span annidati: il contenitore e' la traccia, quello interno e' la parte
   piena, larga in percentuale. Nessuna libreria, nessun canvas, nessun SVG -
   e funziona anche a JavaScript spento, perche' e' solo larghezza.
   --------------------------------------------------------------------------- */
#article table.awv-table .awv-bar-cell,
table.awv-table .awv-bar-cell { width: 34%; min-width: 90px; }

#article table.awv-table .awv-bar,
table.awv-table .awv-bar {
    display: block;
    height: 10px;
    border-radius: 5px;
    background: #eef2f6;
    overflow: hidden;
}

#article table.awv-table .awv-bar > span,
table.awv-table .awv-bar > span {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: var(--color-accent, #33CC66);
    /* larghezza minima visibile: una voce con una sola richiesta deve
       comunque lasciare un segno, altrimenti la riga sembra vuota */
    min-width: 2px;
}

/* In stampa il colore pieno sparirebbe su molte stampanti: si vira al grigio,
   che resta leggibile in bianco e nero. */
@media print {
    #article table.awv-table .awv-bar > span,
    table.awv-table .awv-bar > span { background: #666; }
}

/* ---------------------------------------------------------------------------
   SOLO PER I LETTORI DI SCHERMO
   Il testo resta nel documento e viene letto, ma non occupa spazio a video.
   Non si usa display:none ne' visibility:hidden: quelli tolgono l'elemento
   anche agli screen reader, cioe' fanno l'opposto di quello che serve.

   NON ERA DEFINITA DA NESSUNA PARTE. Sei file del framework emettono gia'
   class="sr-only" - le didascalie di aWVgestNews e aWVgestMenu, e quattro
   moduli - convinti di nascondere quel testo. Non essendo la classe definita
   in nessun foglio, quelle didascalie si vedevano tutte. (OleaDB ha una
   .aw-sr-only, con un altro nome, che quindi non le copriva.)
   --------------------------------------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------
   ANTEPRIMA DEL FILE GIA' ALLEGATO (form di gestione)
   Il campo "file" di aWVgest mostra il file attuale con accanto la casella per
   rimuoverlo. L'anteprima va contenuta, altrimenti una foto da 3000px occupa
   tutto il form.

   Il prefisso #article non e' un vezzo: i fogli editoriali dei siti hanno
   "#article img { max-width: 98% }", che con il suo id batte qualunque
   selettore per sole classi - e' lo stesso motivo per cui la "img.form"
   dichiarata nei form.css di tutti i progetti non ha mai avuto effetto dentro
   #article. La seconda forma serve dove il form sia reso fuori da #article.
   --------------------------------------------------------------------------- */
#article form img.awv-file-preview,
form img.awv-file-preview {
    display: block;
    width: auto;
    max-width: 220px;
    max-height: 160px;
    margin: 0 0 .6em;
    padding: 0;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
}

/* ---------------------------------------------------------------------------
   PAGINAZIONE DELLE TABELLE DI GESTIONE  (markup: <nav class="admpaging"><ul>)
   Emessa da functions/pagination.php, usata dalle tabelle admin e dall'archivio
   news. Stava negli styles/ dei siti: risultato, era stilizzata su 2 progetti
   su 12 e negli altri 10 la paginazione usciva con l'aspetto di un elenco di
   contenuto - corpo 1.4em sopra i 1241px (24,6px contro i 14 della tabella),
   rientro del 10% e un pallino di elenco puntato su ogni numero di pagina.

   Il prefisso #article e' obbligatorio, non e' un vezzo: le regole editoriali
   dei siti sono scritte come "#article ul", che per specificita' (1-0-1) batte
   "nav.admpaging ul" (0-1-2). Un componente scritto per sole classi viene
   sopraffatto dal foglio del sito, non il contrario.

   I colori vengono dalle variabili del sito. Un progetto che voglia una
   paginazione diversa (OleaDB la centra e usa la propria tavolozza) la
   ridichiara nel suo article.css: basta che il <link> del framework sia nel
   <head> PRIMA di styles/article.css, ed e' cosi' che va montato.
   --------------------------------------------------------------------------- */
#article nav.admpaging ul,
nav.admpaging ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 1.5em 0;
    padding: 0;
    font-size: 14px;    /* come table.awv-table: e' navigazione, non testo */
    line-height: 1.4;
}
/* azzera pallino e rientro che "#article ul li" mette sugli elenchi. Sui siti
   che hanno gia' convertito il pallino in CSS puro serve anche ::before. */
#article nav.admpaging li,
nav.admpaging li {
    background: none;
    margin: 0;
    padding: 0;
    line-height: inherit;
}
#article nav.admpaging li::before,
nav.admpaging li::before { content: none; }

#article nav.admpaging a, #article nav.admpaging span,
nav.admpaging a, nav.admpaging span {
    display: inline-block;
    min-width: 2em;
    padding: 4px 10px;
    text-align: center;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
}
#article nav.admpaging a,
nav.admpaging a { border: 1px solid #e4e7ec; }

#article nav.admpaging a:hover,
nav.admpaging a:hover { background: var(--color-accent, #33CC66); color: #fff; border-color: transparent; }

#article nav.admpaging a:focus-visible,
nav.admpaging a:focus-visible {
    outline: 2px solid var(--color-focus-outline, #1a73e8);
    outline-offset: 2px;
}
#article nav.admpaging span[aria-current="page"],
nav.admpaging span[aria-current="page"] { background: #eef2f6; font-weight: 600; }

/* ---------------------------------------------------------------------------
   ICONE DELLE AZIONI DI RIGA (functions/adminIcons.php)
   Dal 2026-08-25 sono tutte a tratto, come i pulsanti di css/awvIcons.css: una
   famiglia sola invece di due (prima quattro erano piene e solo 'history' a
   tratto, e infatti negli article.css c'era la pezza ".awv-action-history svg
   { fill: none }" per quell'unico caso).

   Il prefisso #article serve perche' gli article.css dei siti dichiarano
   ".awv-action svg { fill: currentColor }": una regola CSS batte gli attributi
   di presentazione dell'SVG, quindi senza questa le icone tornerebbero piene e
   nere. Con l'id vince questa, e nessun sito deve aggiornare il proprio foglio.
   Quando un progetto ci mette mano, la sua regola e la pezza su -history si
   possono togliere.
   --------------------------------------------------------------------------- */
#article .awv-action svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------------------------------------------------------------------------
   CELLE CON TESTO LUNGO  (colonna dichiarata con "clamp": true in fields.json)
   Il testo NON viene tagliato lato PHP: resta tutto nel documento, quindi la
   ricerca del browser lo trova e il title lo mostra intero. Qui si limita solo
   quello che si vede, a due righe. E' il motivo per cui non si usa
   short_text(): quella taglia davvero, e una riga trovata dalla ricerca del
   modulo poteva mostrare un testo in cui la parola cercata non compariva.

   -webkit-line-clamp e' l'unica forma con supporto vero su tutti i browser
   (anche Firefox lo implementa con questo nome), e richiede display:-webkit-box.
   --------------------------------------------------------------------------- */
#article table.awv-table td.awv-cell-long,
table.awv-table td.awv-cell-long {
    max-width: 34rem;
    min-width: 12rem;
}
/* IL RITAGLIO VA SU UN CONTENITORE INTERNO, NON SULLA CELLA.
   Prima queste righe stavano sul <td>: dare a una cella un display diverso da
   table-cell la fa uscire dal layout della tabella - il browser le costruisce
   intorno una cella anonima - e la colonna non e' piu' allineata con la propria
   intestazione. Misurato su gest_text: intestazione "Testo" a x=160 larga 211,
   la cella sotto a x=164 larga 204, mentre le altre quattro colonne
   combaciavano al pixel. Il display calcolato del <td> risultava flow-root,
   non piu' table-cell.
   Cosi' invece la cella resta una cella e a essere ritagliato e' il <div>
   dentro, che di suo non ha vincoli di layout. */
#article table.awv-table td.awv-cell-long > .awv-clamp,
table.awv-table td.awv-cell-long > .awv-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* il testo lungo va a capo anche senza spazi (chiavi, URL) */
    overflow-wrap: anywhere;
}
/* Senza il contenitore interno non si ritaglia niente: il testo esce per
   intero. E' il caso degli storici scritti a mano che non sono ancora
   allineati (Sinfao Synd, functions-synd/logStorico.php). Meglio una riga
   lunga di una colonna disallineata. */
#article table.awv-table td.awv-cell-long,
table.awv-table td.awv-cell-long { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
   FOCUS DEI CAMPI DI FORM
   Prima erano DUE linee: il bordo del campo diventava colorato e in piu' veniva
   disegnato un outline staccato di 1px. Due tratti dello stesso spessore
   separati da uno stacco, che l'occhio legge come due oggetti.

   Ora e' una linea sola - il bordo - con attorno un alone diffuso. Il campo
   resta un oggetto solo, e il segnale e' piu' forte di prima pur essendo meno
   invadente.

   L'OUTLINE TRASPARENTE NON E' CODICE INUTILE. In modalita' contrasto elevato
   di Windows (forced-colors) il sistema butta via le box-shadow e riscrive i
   colori: un focus fatto di solo alone sparirebbe del tutto proprio per chi ne
   ha piu' bisogno. L'outline trasparente li' torna a essere una linea vera.

   IL COLORE VIENE DA --color-focus-outline, NON DA --color-accent. Non e' una
   svista: e' una scelta di accessibilita' misurata, e su alcuni progetti
   (quelli per il CNR) e' materia di obbligo di legge, non di gusto - Legge
   Stanca 4/2004 e linee guida AgID, che adottano WCAG 2.1 livello AA.
     - WCAG 2.1 criterio 1.4.11 "Contrasto del contenuto non testuale" (AA)
       chiede almeno 3:1 fra l'indicatore di stato e il colore adiacente;
       il 2.4.7 "Focus visibile" (AA) chiede che l'indicatore ci sia;
     - --color-accent di CMS aWV Demo (#33CC66) su bianco sta a 2.11:1, cioe'
       NON basta. Il ripiego #1a73e8 sta a 4.51:1.
     - e comunque --color-accent oggi lo definiscono 2 progetti su 12: legarci
       il focus significherebbe dare a dieci siti il verde di Demo, che con la
       loro tavolozza non c'entra niente.
   Un progetto che voglia il focus del proprio colore ridichiara
   --color-focus-outline nel suo screen.css, con un valore che superi il 3:1.
   Su Demo, volendo il verde, il candidato e' #00A650 (3.20:1) - lo stesso
   verde dei link - non #33CC66. Sinfao Synd ha gia' un accent blu (#0366C9,
   5.60:1), quindi li' il colore del sito e il ripiego coincidono.
   --------------------------------------------------------------------------- */
form.cmxform input:focus,
form.cmxform select:focus,
form.cmxform textarea:focus {
    outline: 2px solid transparent;   /* invisibile, ma reale in forced-colors */
    outline-offset: 2px;
    border-color: var(--color-focus-outline, #1a73e8);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus-outline, #1a73e8) 22%, transparent);
}

/* ---------------------------------------------------------------------------
   ELENCO DELLE MODIFICHE nello storico (aWVgest::history)
   Una voce per campo cambiato: nome del campo, valore prima, valore dopo. Non
   e' un elenco di contenuto, quindi niente pallino ne' rientro - e serve il
   prefisso #article perche' "#article ul" dei fogli editoriali contiene un id
   e vincerebbe (stessa trappola di paginazione e pulsanti admin).

   I valori lunghi non si tagliano qui: la cella ha gia' .awv-cell-long, che li
   limita a due righe lasciandoli interi nel documento.
   --------------------------------------------------------------------------- */
#article ul.awv-diff,
ul.awv-diff { list-style: none; margin: 0; padding: 0; font-size: .92em; }
#article ul.awv-diff li,
ul.awv-diff li { background: none; margin: 0 0 .25em; padding: 0; line-height: 1.45; }
#article ul.awv-diff li::before { content: none; }

.awv-diff-campo {
    font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
    font-size: .85em;
    opacity: .75;
    margin-right: .35em;
}
/* il valore superato si legge come tale senza affidarsi al solo colore:
   la barratura resta percepibile anche a chi non distingue le tinte */
.awv-diff-prima { text-decoration: line-through; opacity: .7; }
.awv-diff-dopo  { font-weight: 600; }
.awv-diff-freccia { opacity: .5; }

/* Due classi emesse dallo storico e finora mai definite: "nessun campo
   modificato" e il percorso dello script. Restavano testo normale.
   L'opacita' si ferma a .75: piu' in la' il contrasto scende sotto il 4.5:1
   richiesto dal testo (WCAG 1.4.3 AA), e questa e' un'informazione, non una
   decorazione. */
.awv-muted { opacity: .75; font-style: italic; }
.awv-mono  {
    font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
    font-size: .85em;
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   CONFERMA DI UN'OPERAZIONE (ripristino di una versione, e in prospettiva le
   pagine del.php). Un riquadro, non solo un paragrafo: la pagina che chiede
   conferma deve distinguersi a colpo d'occhio da quella che mostra un esito,
   altrimenti si conferma per inerzia.
   -------------------------------------------------------------------------- */
.awv-confirm {
    border: 1px solid var(--color-border, #d0d0d0);
    border-left: 4px solid var(--color-focus-outline, #1a73e8);
    border-radius: 4px;
    padding: 1em 1.2em;
    margin: 0 0 1em;
    background: var(--color-surface-alt, rgba(0, 0, 0, .02));
}
/* Il prefisso #article non e' pedanteria: i fogli editoriali hanno
   "#article p { text-align: justify; margin: 5px 10% }", un selettore con un id
   che batte qualunque classe. Senza, dentro il riquadro il testo restava
   giustificato - gli spazi si allargano a fisarmonica su righe corte, ed e' una
   nota barriera di lettura (WCAG, tecnica F88) - e rientrato del 10%.
   E' la stessa trappola gia' incontrata su paginazione, pulsanti admin e
   immagini di form. */
#article .awv-confirm p,
.awv-confirm p { text-align: left; margin: 0 0 .8em; }
#article .awv-confirm p:last-child,
.awv-confirm p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   LA CASELLA DI RICERCA DELLE LISTE DI GESTIONE (form.awv-search)

   La emette il framework in tre punti - aWVgest::browse(), aWVgestNews e
   [gest_stats] - ma finora la stilavano soltanto CMS aWV Demo e aWebVision, nei
   propri styles/form.css. Sugli altri nove progetti usciva senza forma. Su
   OleaDB il caso limite: form.css:51 dichiara

       input, textarea, select { width: 80%; padding: 8px 15px; font-size: 1.2em; }

   per TUTTI gli input del sito, quindi anche il pulsante OK della ricerca
   diventava largo l'80% della pagina.

   E' lo stesso schema gia' visto con la paginazione e i pulsanti admin: markup
   dal framework, stile lasciato a ciascuno, e quindi assente quasi ovunque.

   NIENTE PREFISSO #article, di proposito. Qui serve il contrario del solito:
   con la stessa specificita' dei fogli dei siti, e caricato prima, questo
   blocco fa da valore predefinito e chi ha gia' il proprio stile continua a
   vincere - Demo e aWebVision restano identici a com'erano. Contro il selettore
   generico `input` di OleaDB (0,0,1) basta e avanza `form.awv-search input`.

   I colori seguono la catena dei pulsanti admin: chi ha gia' dichiarato
   --awv-admin-bg per quelli si ritrova la ricerca in tinta senza fare altro.
   --------------------------------------------------------------------------- */
form.awv-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 1em;
    flex-wrap: wrap;
}
form.awv-search label { font-size: 0.85em; font-weight: 600; }

form.awv-search input[type="text"],
form.awv-search input[type="search"],
form.awv-search select {
    /* width esplicita: e' la dichiarazione che neutralizza il width:80% dato
       agli input dell'intero sito. flex-basis tiene la casella comoda sui
       monitor larghi e la lascia stringere sui piccoli. */
    width: auto;
    flex: 0 1 24em;
    min-width: 8em;
    max-width: 100%;
    margin: 0;
    padding: 7px 10px;
    border: 1px solid #d5d9e0;
    border-radius: 8px;
    font-size: 0.9em;
}
form.awv-search input[type="text"]:focus,
form.awv-search input[type="search"]:focus,
form.awv-search select:focus {
    outline: 2px solid var(--color-focus-outline, #1a73e8);
    outline-offset: 1px;
}

form.awv-search input[type="submit"] {
    width: auto;            /* vedi sopra: senza, il pulsante prende l'80% */
    flex: 0 0 auto;
    margin: 0;
    padding: 7px 18px;
    border: none;
    border-radius: 999px;
    background: var(--awv-admin-bg, var(--color-accent, #00aa00));
    color: var(--awv-admin-text, #fff);
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}
form.awv-search input[type="submit"]:hover {
    background: color-mix(in srgb, var(--awv-admin-bg, var(--color-accent, #00aa00)) 82%, black);
}
form.awv-search input[type="submit"]:focus-visible {
    outline: 2px solid var(--color-focus-outline, #1a73e8);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    form.awv-search input[type="submit"] { transition: none; }
}

/* ---------------------------------------------------------------------------
   IL MARGINE LATERALE DEI COMPONENTI DI GESTIONE

   Tutto quello che il framework emette in pagina - ricerca, tabella,
   paginazione - nasceva incollato al bordo sinistro, mentre il titolo della
   pagina ha il rientro editoriale del sito (10%). Misurato su Demo e OleaDB a
   1280px: titolo a x=128, ricerca e pulsanti a x=0.

   Sulla tabella l'effetto era anche peggio e ha un nome preciso: i fogli dei
   siti dichiarano "#article table { width: 95% }" senza margini, quindi la
   tabella e' larga il 95% ma appoggiata a sinistra e TUTTO lo spazio libero
   finisce a destra.

   Il valore non e' inventato: 2% per lato e' la stessa gronda che i tre siti
   usano gia' per le tabelle di contenuto ("table.items { width:96%; margin:0
   2% }"). Si applica a tutti i componenti insieme, cosi' si incolonnano fra
   loro.

   E' UNA VARIABILE, non un numero fisso: un progetto che voglia allinearli al
   titolo invece che alla gronda dichiara nel proprio screen.css

       :root { --awv-admin-inset: 10%; }

   e si spostano tutti insieme, senza toccare il framework.

   Il prefisso #article serve sulla tabella: "#article table" (1-0-1) batterebbe
   "table.awv-table" (0-1-1), ed e' proprio quella regola che impone il 95%.
   --------------------------------------------------------------------------- */
#article table.awv-table,
table.awv-table {
    margin-left:  var(--awv-admin-inset, 2%);
    margin-right: var(--awv-admin-inset, 2%);
    width: calc(100% - 2 * var(--awv-admin-inset, 2%));
}

form.awv-search {
    margin-left:  var(--awv-admin-inset, 2%);
    margin-right: var(--awv-admin-inset, 2%);
}

#article nav.admpaging ul,
nav.admpaging ul {
    margin-left:  var(--awv-admin-inset, 2%);
    margin-right: var(--awv-admin-inset, 2%);
}

/* ===========================================================================
   LA TABELLA DI AMMINISTRAZIONE (table.awv-table)

   Era duplicata in tre article.css - Demo, OleaDB, aWebVision - con struttura
   identica e sole tinte diverse. Chi apriva un quarto progetto non aveva
   niente e la tabella usciva grezza. Struttura e spaziature stanno quindi qui;
   ogni sito dichiara solo le proprie variabili, se ha una tavolozza sua.

       --awv-table-head-bg     fondo dell'intestazione   <- #f4f4f4
       --awv-table-head-text   testo dell'intestazione   <- #555
       --awv-table-head-line   filetto sotto             <- --awv-admin-bg
       --awv-table-border      righelli fra le righe     <- #e4e7ec
       --awv-table-zebra       righe pari                <- #fafbfc
       --awv-table-hover       riga sotto il puntatore   <- #eef3e6

   DUE COSE IMPARATE SU OleaDB, che qui diventano il comportamento di tutti:

   1. lo sfondo di riga va messo sulle CELLE, non sul <tr>: i fogli editoriali
      dichiarano "#article td { background: #fff }" e quello coprirebbe lo
      sfondo della riga, cancellando zebratura ed evidenziazione;
   2. il grigio del testo secondario e' #717171 e non #999: quest'ultimo non
      arriva al 4.5:1 su bianco richiesto dal criterio WCAG 1.4.3.

   Il prefisso #article e' obbligatorio ovunque: le regole generiche dei fogli
   dei siti ("#article table", "#article th", "#article td") contengono un id e
   batterebbero un selettore per sole classi.
   =========================================================================== */
#article table.awv-table,
table.awv-table {
    border-collapse: collapse;
    font-size: 14px;        /* "#article table" imporrebbe 0.9em, cioe' 15,84px */
    color: #2b2b2b;
}

#article table.awv-table th,
#article table.awv-table td,
table.awv-table th,
table.awv-table td {
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--awv-table-border, #e4e7ec);
}

#article table.awv-table thead th,
table.awv-table thead th {
    background: var(--awv-table-head-bg, #f4f4f4);
    color: var(--awv-table-head-text, #555);
    border-bottom: 2px solid var(--awv-table-head-line, var(--awv-admin-bg, #00aa00));
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .05em;
    white-space: nowrap;
}

/* vedi il punto 1 in testa: sulle celle, non sulla riga */
#article table.awv-table tbody tr:nth-child(even) td,
table.awv-table tbody tr:nth-child(even) td { background: var(--awv-table-zebra, #fafbfc); }
#article table.awv-table tbody tr:hover td,
table.awv-table tbody tr:hover td           { background: var(--awv-table-hover, #eef3e6); }

#article table.awv-table .awv-name,
table.awv-table .awv-name { font-weight: 600; }
#article table.awv-table .awv-warn,
table.awv-table .awv-warn { color: #b71c1c; }

/* Le immagini in tabella: i fogli editoriali danno a "#article img" bordo e
   margini pensati per le foto di un articolo, che in una cella sono fuori
   posto. La miniatura contenuta serve agli elenchi con anteprima (le foto di
   [gest_images] uscivano a dimensione piena, una per riga). */
#article table.awv-table img,
table.awv-table img { border: 0; margin: 0; padding: 0; }
#article table.awv-table img.awv-thumb,
table.awv-table img.awv-thumb { display: block; max-width: 80px; max-height: 80px; }

/* ---------------------------------------------------------------------------
   MESSAGGI: ERRORE, AVVISO, CONFERMA
   ---------------------------------------------------------------------------
   Nato da un caso concreto: l'avviso di sovrapposizione delle assegnazioni in
   Sinfao Synd era un <p> come tutti gli altri, e gli operatori meno attenti
   non lo vedevano - salvavano credendo di aver salvato. Un messaggio che non
   si distingue dal testo intorno non svolge il suo lavoro, e qui il prezzo non
   e' estetico: sono dati sbagliati che entrano in archivio.

   Perche' un BLOCCO e non una frase colorata. Il solo colore non basta: a
   pagina piena il rosso si legge come "testo un po' diverso", e in queste
   pagine il rosso compare anche altrove (.awv-warn nelle celle). Il fondo, la
   barra laterale e l'icona fermano l'occhio, e l'informazione non sta solo
   nella tinta - chi distingue male i colori vede comunque un segno di
   attenzione e un blocco staccato dal resto.

   I colori NON seguono l'accento del sito, a differenza degli altri componenti
   di questo foglio: il rosso di un errore e' rosso in tutti i progetti. Sono
   comunque esposti come variabili, per chi dovesse ritoccarli.

   Markup: lo emette awv_msg() in functions/messaggi.php, che linka anche
   questo foglio. A mano sarebbe <p class="awv-msg awv-msg-error">testo</p>.

   Il prefisso #article serve a superare "#article p" dei fogli editoriali, che
   contiene un id e altrimenti vincerebbe su margini e colore.
   --------------------------------------------------------------------------- */
#article .awv-msg,
.awv-msg {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 14px 2%;
    padding: 14px 16px;
    border: 1px solid;
    border-left-width: 6px;
    border-radius: 5px;
    font-size: 1em;
    line-height: 1.45;
    font-weight: 500;
    text-align: left;
}

/* L'icona e' una maschera, come nei pulsanti admin: un solo file per tema
   chiaro e scuro, e il colore lo decide la regola del tipo qui sotto. */
#article .awv-msg::before,
.awv-msg::before {
    content: "";
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    -webkit-mask-repeat: no-repeat;         mask-repeat: no-repeat;
    -webkit-mask-position: center;          mask-position: center;
    -webkit-mask-size: contain;             mask-size: contain;
}

/* dentro al messaggio il grassetto non cambia colore: i fogli dei siti danno
   a #article strong un colore proprio, che qui stonerebbe */
#article .awv-msg strong,
.awv-msg strong { color: inherit; }

#article .awv-msg-error,
.awv-msg-error {
    color:              var(--awv-msg-error-text, #8a1414);
    background:         var(--awv-msg-error-bg,   #fdeded);
    border-color:       var(--awv-msg-error-bd,   #f2bcbc);
    border-left-color:  var(--awv-msg-error-bar,  #b71c1c);
}
#article .awv-msg-error::before,
.awv-msg-error::before {
    background-color: var(--awv-msg-error-bar, #b71c1c);
    -webkit-mask-image: url("icons/alert.svg"); mask-image: url("icons/alert.svg");
}

#article .awv-msg-warn,
.awv-msg-warn {
    color:              var(--awv-msg-warn-text, #7a4a00);
    background:         var(--awv-msg-warn-bg,   #fff7e6);
    border-color:       var(--awv-msg-warn-bd,   #f0d9a8);
    border-left-color:  var(--awv-msg-warn-bar,  #e08a00);
}
#article .awv-msg-warn::before,
.awv-msg-warn::before {
    background-color: var(--awv-msg-warn-bar, #e08a00);
    -webkit-mask-image: url("icons/alert.svg"); mask-image: url("icons/alert.svg");
}

#article .awv-msg-ok,
.awv-msg-ok {
    color:              var(--awv-msg-ok-text, #1b5e20);
    background:         var(--awv-msg-ok-bg,   #edf7ed);
    border-color:       var(--awv-msg-ok-bd,   #c3e0c4);
    border-left-color:  var(--awv-msg-ok-bar,  #2e7d32);
}
#article .awv-msg-ok::before,
.awv-msg-ok::before {
    background-color: var(--awv-msg-ok-bar, #2e7d32);
    -webkit-mask-image: url("icons/validate.svg"); mask-image: url("icons/validate.svg");
}

/* In stampa il fondo colorato sparirebbe comunque su molte stampanti: si
   tiene il bordo, che sopravvive, e il testo resta nero leggibile. */
@media print {
    #article .awv-msg,
    .awv-msg { background: none; color: #000; border-color: #666; }
    #article .awv-msg::before,
    .awv-msg::before { display: none; }
}