/* ===========================================================================
   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;
}
#article table.awv-table td.awv-cell-long,
table.awv-table td.awv-cell-long {
    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;
}

/* ---------------------------------------------------------------------------
   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);
}