/* ==========================================================================
   PULSANTI DI AMMINISTRAZIONE  (markup: <ul class="admin"><li><a class="adm X">)
   --------------------------------------------------------------------------
   Sostituisce i vecchi bg_adm_*.png, che erano file per sito (quindi da
   rifare nove volte), disomogenei fra loro come stile e pesanti: su Demo le
   undici icone usate facevano 371.832 byte, sette da ~50 KB l'una per
   mostrarle a 30 pixel. Adesso le icone stanno nel framework, in
   css/icons/*.svg, disegnate tutte sullo stesso reticolo 24x24 a solo tratto.

   Come prendono il colore del progetto: l'icona NON e' un'immagine di sfondo,
   e' una MASCHERA. Il quadratino e' colorato con `background-color:
   currentColor` e la SVG ritaglia la forma. Quindi l'icona vale sempre
   esattamente il colore del testo del pulsante, che a sua volta viene dalle
   variabili del sito: cambiando la tavolozza cambia tutto insieme, senza
   ridisegnare niente. Colore e maschera stanno nella stessa riga apposta:
   accenderebbero un quadratino pieno se si separassero e la maschera
   mancasse.

   Variabili lette (tutte con ripiego, un sito che non le dichiara funziona
   lo stesso):
     --awv-admin-bg     fondo del pulsante   <- --color-accent  <- #00aa00
     --awv-admin-text   testo e icona                           <- #fff
     --color-focus-outline  colore del contorno di focus        <- #1a73e8

   AGGIUNGERE UN'ICONA (serve a chi arriva da BusinessDoc, Synd, ecc.):
     1. `css/icons/<nome>.svg`, copiando l'intestazione di una esistente
        (viewBox 24 24, fill none, stroke 2, cap e join round: e' quello che
        tiene insieme la famiglia).
     2. una riga in fondo a questo file, nel gruppo giusto.
     3. nel markup: <a class="adm <nome>">.
   Non serve toccare il CSS del sito.
   ========================================================================== */

/* La lista. `#article ul.admin li` batte per specificita' `#article ul li`
   del foglio editoriale del sito, che mette pallino e rientro agli elenchi:
   qui non sono elenchi di testo, sono pulsanti. */
#article ul.admin            { list-style: none; margin: 5px 0; padding: 0 0 5px; }
#article ul.admin li         { margin: 0; padding: 0; background: none; letter-spacing: 0; }
/* sui siti che hanno gia' convertito il pallino in CSS puro non basta
   `background: none`: il pallino li' e' uno pseudo-elemento. */
#article ul.admin li::before { content: none; }

/* Il pulsante. Volutamente grande: e' il comando principale della pagina e
   si deve notare. `a.text` e' escluso perche' non e' un pulsante ma il
   linkino di modifica testo che get_text() infila dentro l'etichetta quando
   si e' redattori.
   Sono compresi gli <a> senza classe: c'e' ancora molto codice che li scrive
   cosi' (vedi la nota sulle icone mancanti in FW_SYNC_REQUIREMENTS.md), e
   devono restare pulsanti anche prima di essere sistemati. */
#article ul.admin li a:not(.text) {
    display: flex;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
    width: 90%;
    min-height: 44px;          /* bersaglio comodo da toccare su telefono */
    margin: 15px 5%;
    padding: 10px 18px;
    border: 0;
    border-radius: 10px;
    color: var(--awv-admin-text, #fff);
    background: var(--awv-admin-bg, var(--color-accent, #00aa00));
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    transition: filter .15s ease;
}
#article ul.admin li a:not(.text):link,
#article ul.admin li a:not(.text):visited { color: var(--awv-admin-text, #fff); }
/* niente colore nuovo da inventare: si scurisce quello che c'e' gia', cosi'
   funziona con qualunque tavolozza. */
#article ul.admin li a:not(.text):hover,
#article ul.admin li a:not(.text):active { filter: brightness(.9); text-decoration: underline; }
#article ul.admin li a:not(.text):focus-visible {
    outline: 3px solid var(--color-focus-outline, #1a73e8);
    outline-offset: 2px;
}

/* Il riquadro dell'icona: geometria e basta, resta invisibile finche' una
   regola piu' sotto non gli da' maschera e colore insieme.
   Lo spazio pero' lo prende su OGNI pulsante, anche su quelli a cui nessuno
   ha ancora messo la classe dell'icona. E' voluto: cosi' dentro la stessa
   lista le etichette restano incolonnate mentre il codice viene uniformato a
   poco a poco, e il posto vuoto si vede - e' un promemoria, non un difetto. */
#article ul.admin li a:not(.text)::before {
    content: "";
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    /* il colore lo accende la regola dell'icona, insieme alla maschera:
       separati, un pulsante senza classe d'icona mostrerebbe un quadratino
       pieno invece di uno spazio vuoto. */
    background-color: transparent;
    -webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
    -webkit-mask-position: center;    mask-position: center;
    -webkit-mask-size: contain;       mask-size: contain;
}

/* Schermi stretti: il pulsante resta a tutta larghezza ma alleggerisce
   corpo, spazi e icona, altrimenti l'etichetta va a capo tre volte. */
@media only screen and (max-width: 480px) {
    #article ul.admin li a:not(.text) { font-size: 1em; gap: 10px; padding: 10px 12px; }
    #article ul.admin li a:not(.text)::before { width: 22px; height: 22px; }
}

/* Chi ha chiesto al sistema operativo meno animazioni non vuole nemmeno
   questa. */
@media (prefers-reduced-motion: reduce) {
    #article ul.admin li a:not(.text) { transition: none; }
}

/* --------------------------------------------------------------------------
   LE MASCHERE. Un solo posto in cui aggiungere.
   -------------------------------------------------------------------------- */

/* operazioni di base */
#article ul.admin li a.add::before      { -webkit-mask-image: url("icons/add.svg");      mask-image: url("icons/add.svg"); background-color: currentColor; }
#article ul.admin li a.edit::before     { -webkit-mask-image: url("icons/edit.svg");     mask-image: url("icons/edit.svg"); background-color: currentColor; }
#article ul.admin li a.del::before      { -webkit-mask-image: url("icons/del.svg");      mask-image: url("icons/del.svg"); background-color: currentColor; }
#article ul.admin li a.copy::before     { -webkit-mask-image: url("icons/copy.svg");     mask-image: url("icons/copy.svg"); background-color: currentColor; }
#article ul.admin li a.browse::before   { -webkit-mask-image: url("icons/browse.svg");   mask-image: url("icons/browse.svg"); background-color: currentColor; }
#article ul.admin li a.home::before     { -webkit-mask-image: url("icons/home.svg");     mask-image: url("icons/home.svg"); background-color: currentColor; }
#article ul.admin li a.search::before   { -webkit-mask-image: url("icons/search.svg");   mask-image: url("icons/search.svg"); background-color: currentColor; }
#article ul.admin li a.refresh::before  { -webkit-mask-image: url("icons/refresh.svg");  mask-image: url("icons/refresh.svg"); background-color: currentColor; }
#article ul.admin li a.validate::before { -webkit-mask-image: url("icons/validate.svg"); mask-image: url("icons/validate.svg"); background-color: currentColor; }
#article ul.admin li a.undo::before     { -webkit-mask-image: url("icons/undo.svg");     mask-image: url("icons/undo.svg"); background-color: currentColor; }

/* classificazione e relazioni */
#article ul.admin li a.cat::before      { -webkit-mask-image: url("icons/cat.svg");      mask-image: url("icons/cat.svg"); background-color: currentColor; }
#article ul.admin li a.rel::before      { -webkit-mask-image: url("icons/rel.svg");      mask-image: url("icons/rel.svg"); background-color: currentColor; }
#article ul.admin li a.join::before     { -webkit-mask-image: url("icons/join.svg");     mask-image: url("icons/join.svg"); background-color: currentColor; }
#article ul.admin li a.merge::before    { -webkit-mask-image: url("icons/merge.svg");    mask-image: url("icons/merge.svg"); background-color: currentColor; }
#article ul.admin li a.transfer::before { -webkit-mask-image: url("icons/transfer.svg"); mask-image: url("icons/transfer.svg"); background-color: currentColor; }
#article ul.admin li a.trans::before    { -webkit-mask-image: url("icons/trans.svg");    mask-image: url("icons/trans.svg"); background-color: currentColor; }

/* documenti e stampa */
#article ul.admin li a.csv::before      { -webkit-mask-image: url("icons/csv.svg");      mask-image: url("icons/csv.svg"); background-color: currentColor; }
#article ul.admin li a.efattura::before { -webkit-mask-image: url("icons/efattura.svg"); mask-image: url("icons/efattura.svg"); background-color: currentColor; }
#article ul.admin li a.print::before    { -webkit-mask-image: url("icons/print.svg");    mask-image: url("icons/print.svg"); background-color: currentColor; }
#article ul.admin li a.picture::before  { -webkit-mask-image: url("icons/picture.svg");  mask-image: url("icons/picture.svg"); background-color: currentColor; }
#article ul.admin li a.sign::before     { -webkit-mask-image: url("icons/sign.svg");     mask-image: url("icons/sign.svg"); background-color: currentColor; }

/* utenti e sicurezza */
#article ul.admin li a.user::before     { -webkit-mask-image: url("icons/user.svg");     mask-image: url("icons/user.svg"); background-color: currentColor; }
#article ul.admin li a.key::before      { -webkit-mask-image: url("icons/key.svg");      mask-image: url("icons/key.svg"); background-color: currentColor; }
#article ul.admin li a.lock::before     { -webkit-mask-image: url("icons/lock.svg");     mask-image: url("icons/lock.svg"); background-color: currentColor; }
#article ul.admin li a.pw::before       { -webkit-mask-image: url("icons/pw.svg");       mask-image: url("icons/pw.svg"); background-color: currentColor; }

/* impostazioni, dati, logistica */
#article ul.admin li a.set::before      { -webkit-mask-image: url("icons/set.svg");      mask-image: url("icons/set.svg"); background-color: currentColor; }
#article ul.admin li a.stats::before    { -webkit-mask-image: url("icons/stats.svg");    mask-image: url("icons/stats.svg"); background-color: currentColor; }
#article ul.admin li a.parsing::before  { -webkit-mask-image: url("icons/parsing.svg");  mask-image: url("icons/parsing.svg"); background-color: currentColor; }
#article ul.admin li a.email::before    { -webkit-mask-image: url("icons/email.svg");    mask-image: url("icons/email.svg"); background-color: currentColor; }
#article ul.admin li a.ship::before     { -webkit-mask-image: url("icons/ship.svg");     mask-image: url("icons/ship.svg"); background-color: currentColor; }