/* LA PIASTRELLA DELLE ICONE, IN UN POSTO SOLO.
 *
 * Lo stile nato con l'header menu v9: un glifo pieno a due toni di bianco su
 * una piastrella del colore dello strumento. Stava dentro index_menu.css, che
 * pero' lo carica solo il sito pubblico: il checkout e' una pagina autonoma con
 * la sua testa e non lo vedeva. Invece di copiarlo di la', vive qui e lo
 * caricano tutti e due.
 *
 * Il colore arriva sempre dall'esterno, come `--tc` sull'elemento, e da quello
 * si ricavano gradiente, lumeggiatura e ombra: cosi' il colore di uno strumento
 * resta deciso in un punto solo (_partials/tool_identity.html) e qui non e'
 * scritto da nessuna parte.
 *
 * Il glifo usa due toni, mai uno: --i1 pieno per la massa, --i2 al 62% per la
 * parte secondaria. Dove serve un dettaglio dentro il glifo si buca con --tc,
 * cioe' si lascia vedere la piastrella, invece di disegnare una linea.
 *
 * Chi lo carica: index_menu_newww.html (sito pubblico) e checkout_tools.html.
 * Chi lo usa: la macro `tile()` di _partials/menu_v9_macros.html.
 */

.smm9-tile {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--tc) 70%, #fff) 0%,
        var(--tc) 48%,
        color-mix(in srgb, var(--tc) 78%, #000) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 2px rgba(4, 20, 61, .12);
    --i1: #fff;
    --i2: rgba(255, 255, 255, .62);
}

.smm9-glyph {
    width: 62%;
    height: 62%;
    overflow: visible;
}

/* Piccola: le righe del menu sul telefono e le strisce. */
.smm9-tile-sm { width: 28px; height: 28px; border-radius: 8px; }
.smm9-tile-sm .smm9-glyph { width: 60%; height: 60%; }

/* Grande: il checkout. La pastiglia che c'era prima era 42px con raggio 12, e
 * la riga della card e' costruita su quella misura: tenerla evita che tutta la
 * colonna si sposti quando si cambia icona. */
.smm9-tile-lg { width: 42px; height: 42px; border-radius: 12px; }
.smm9-tile-lg .smm9-glyph { width: 58%; height: 58%; }

/* Il colore di sfondo e' deciso, non ereditato: se `--tc` non arriva la
 * piastrella resta grigia invece di diventare trasparente o nera. */
.smm9-tile:not([style*="--tc"]) { --tc: #64748b; }


/* ------------------------------------------------------------------ *
 * IL GLIFO SENZA PIASTRELLA
 *
 * Decisione dell'owner del 25/09 per la barra laterale della dashboard:
 * lo stesso disegno, ma monocromatico. Una colonna di venti piastrelle
 * colorate sarebbe rumore, e le voci di un menu laterale sono controlli,
 * non soggetti.
 *
 * Il glifo resta a DUE TONI anche in monocromia: e' quello che lo rende
 * riconoscibile. La massa prende il colore del testo, la parte secondaria
 * lo stesso colore al 55%.
 *
 * Il foro e' il punto delicato. Dentro la piastrella `--tc` e' il colore
 * dello strumento, cioe' quello che si vede attraverso il buco. Qui il
 * buco deve lasciar vedere lo SFONDO della superficie, che questo file
 * non puo' conoscere: la superficie lo dichiara con `--smm9-knockout`.
 * Il ripiego e' il bianco, perche' e' il fondo piu' comune.
 * ------------------------------------------------------------------ */
.smm9-mono {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    overflow: visible;
    color: inherit;
    --i1: currentColor;
    --i2: color-mix(in srgb, currentColor 55%, transparent);
    --tc: var(--smm9-knockout, #fff);
}

/* ------------------------------------------------------------------ *
 * LE TINTE DELLA DASHBOARD (27/09)
 *
 * Le piastrelle della dashboard non sono strumenti, quindi il loro colore
 * non sta in _partials/tool_identity.html: sono titoli di scheda, voci del
 * Breakdown, riquadri. Le tinte sono le stesse famiglie che quelle pagine
 * usavano gia' (il verde dei ricavi, l'ambra dei costi, il blu delle
 * commissioni, il rosa delle spese), un po' piu' profonde perche' il glifo
 * bianco a due toni ha bisogno di piu' contrasto dell'icona piatta di prima.
 *
 * Si usano per nome, mai per valore: nel template m9.tile(glifo,
 * 'var(--sm-tone-green)'), nel JavaScript smTile(glifo, 'green').
 * ------------------------------------------------------------------ */
:root {
    --sm-tone-blue:   #046bfc;
    --sm-tone-green:  #059669;
    --sm-tone-red:    #dc2626;
    --sm-tone-amber:  #d97706;
    --sm-tone-purple: #7c3aed;
    --sm-tone-navy:   #1e3a8a;
    --sm-tone-rose:   #e11d48;
    --sm-tone-slate:  #475569;
    --sm-tone-teal:   #0d9488;
    --sm-tone-indigo: #4f46e5;
}

/* ------------------------------------------------------------------ *
 * LA PIASTRELLA DENTRO UN CONTENITORE CHE C'ERA GIA'
 *
 * Molte pagine hanno gia' il loro quadratino colorato con un'icona dentro
 * (.sm-section-icon, .dh-mini-ico, .breakdown-section-icon...), con misura,
 * raggio e posto nella riga gia' decisi. Invece di rifarli, il contenitore
 * resta e dentro va la piastrella vera, che lo riempie.
 *
 * Il contenitore pero' ha ancora il suo vecchio sfondo, dichiarato da regole
 * della pagina di specificita' alta (e da quelle del tema scuro): sotto una
 * piastrella dello stesso raggio si vedrebbe come un filo colorato sui bordi
 * arrotondati. Da qui il `!important`, l'unico di questo file: vale solo per
 * gli elementi che portano la classe smm9-host, che si mette a mano proprio
 * sul contenitore di una piastrella e da nessun'altra parte.
 * ------------------------------------------------------------------ */
.smm9-host.smm9-host {
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.smm9-host > .smm9-tile {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

/* ------------------------------------------------------------------ *
 * IL GLIFO AL POSTO DI UN'ICONA FONT AWESOME, DENTRO LA PAGINA
 *
 * L'<i> della pagina resta: cambia la classe in smm9-i e dentro va il
 * glifo. Resta perche' le pagine gli danno margini, colore e misura con
 * regole proprie (".btn i", ".label i", style="font-size: 14px") che,
 * togliendolo, smetterebbero di valere senza nessun errore. Il glifo segue
 * la misura del testo dell'<i> (1.2em: il disegno sta dentro una griglia
 * di 24 con un po' d'aria, quindi a 1.2em e' grande quanto l'icona di prima)
 * e il suo colore.
 * ------------------------------------------------------------------ */
.smm9-i {
    font-style: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: -0.2em;
}
.smm9-i > .smm9-mono {
    width: 1.2em;
    height: 1.2em;
}

/* Dentro un riquadro tenue (fondo chiaro, icona colorata): il foro deve
 * lasciar vedere quel fondo chiaro, che e' il colore del glifo molto
 * schiarito. Ricavarlo cosi' evita una regola per ogni colore. */
.smm9-mono.smm9-soft, .smm9-g.smm9-soft { --tc: color-mix(in srgb, currentColor 9%, #fff); }
[data-theme="dark"] .smm9-mono.smm9-soft, [data-theme="dark"] .smm9-g.smm9-soft { --tc: color-mix(in srgb, currentColor 18%, #111827); }

/* Dentro il riquadro di vetro sull'intestazione blu-indaco di una finestra. */
.smm9-mono.smm9-glass { --tc: color-mix(in srgb, #fff 18%, #3b5bf0); }

/* ------------------------------------------------------------------ *
 * IL GLIFO AL POSTO DI UN'ICONA SVG DELLE PAGINE PUBBLICHE (27/09)
 *
 * Le pagine pubbliche disegnano le icone come SVG inline (Heroicons), con
 * misura e colore dati dalle classi Tailwind sulla <svg> stessa (w-5 h-5
 * text-blue-600). Il glifo prende il posto del disegno dentro la stessa
 * <svg>: questa classe da' solo i due toni e il foro, NON la misura, cosi'
 * la <svg> resta grande quanto prima e le classi della pagina continuano a
 * decidere. (.smm9-mono invece ha una misura sua, per la dashboard.)
 * ------------------------------------------------------------------ */
.smm9-g {
    overflow: visible;
    --i1: currentColor;
    --i2: color-mix(in srgb, currentColor 55%, transparent);
    --tc: var(--smm9-knockout, #fff);
}