/*
 * ==========================================================
 * PROGETTO:    Kerno Framework
 * FILE:        tippy.css
 * Path:        public/css/vendor/tippy.css
 * ==========================================================
 * DESCRIZIONE GENERALE:
 * Definisce il tema personalizzato dei tooltip informativi usati dall’interfaccia.
 *
 * FUNZIONE DEL FILE:
 * Questo foglio di stile raccoglie regole CSS specifiche per: tooltip tippy.js.
 * Le regole definiscono solo la presentazione grafica degli elementi HTML e
 * non introducono logica applicativa. Eventuali comportamenti dinamici sono
 * gestiti dai file JavaScript o dal markup prodotto dalle view PHP.
 *
 * NOTE OPERATIVE:
 * - mantenere i selettori coerenti con il markup generato dalle view;
 * - modificare colori, spaziature e transizioni solo verificando le pagine
 *   che riutilizzano gli stessi componenti;
 * - evitare rinominazioni dei selettori senza aggiornare anche HTML e JS.
 * ==========================================================
 */

/* ==========================================================
 * SEZIONE: tema custom dei tooltip
 * ========================================================== */

/*
 * Tema personalizzato per Tippy.js.
 * Definisce i colori, le ombre e le spaziature dei fumetti informativi.
 */
.tippy-box[data-theme~='custom'] {
    background-color: var(--color-tooltip-bg);
    color: white;
    font-weight: 500;
    padding: 4px 6px 7px;
    border-radius: var(--radius-medium);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Corrispondenza cromatica per la freccia indicatrice del tooltip. */
.tippy-box[data-theme~='custom'] .tippy-arrow {
    color: var(--color-tooltip-bg);
}