/**
 * sm/lib_css/custom_skeleton.css
 *
 * Skeleton di caricamento: la forma di cio' che sta arrivando, al posto di uno spinner
 * che copre il vuoto. Lo disegna LoaderManager.showSkeleton() in custom_loader.js.
 *
 * QUANDO. Solo al PRIMO caricamento, quando sotto non c'e' ancora niente. Sui
 * ricaricamenti di dati gia' a video conviene restare su SMBlockLoader (l'overlay con
 * lo spinner), che non fa sparire quello che si sta guardando.
 *
 * Colori solo via var(--clean-*), cosi' lo scheletro sembra la pagina che si sta
 * formando e non un elemento di un'altra libreria.
 *
 * Caricato da sm/lib_page/_head.php con ?v=filemtime insieme agli altri fogli di
 * lib_css/: NON iniettarlo a runtime dal JS, perche' senza versione nell'URL i browser
 * con la copia in cache continuerebbero a servire quella vecchia dopo ogni modifica,
 * disegnando gli skeleton con regole mancanti.
 */

/* Il pannello copre l'ospite: e' in position:absolute, quindi non ne detta l'altezza.
   Ci pensa showSkeleton() a misurare il contenuto e imporre un min-height temporaneo.
   Il padding lo scrive showSkeleton() ricopiando quello dell'ospite: absolute si misura
   sul padding box, quindi con inset:0 lo scheletro partirebbe a filo del bordo mentre il
   contenuto vero parte piu' dentro. */
.sk-skel-panel {
    position: absolute;
    inset: 0;
    z-index: 5;
    overflow: hidden;
    background: #fff;
    pointer-events: none;
}
.sk-skel-panel.is-leaving { animation: sk-skel-out .22s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes sk-skel-out { to { opacity: 0; } }

/* Il mattone di base. Tutto il resto e' disposizione.
   Base sul grigio del bordo e luce sulla canvas, non il contrario: la rampa
   canvas -> neutro su fondo bianco e' cosi' tenue che lo scheletro si intuisce
   appena, e uno scheletro che non si vede non fa il suo mestiere. */
.sk-skel-bar {
    height: 13px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--clean-card-border) 25%,
                var(--clean-canvas) 37%, var(--clean-card-border) 63%);
    background-size: 400% 100%;
    animation: sk-skel-glow 1.3s ease-in-out infinite;
}
@keyframes sk-skel-glow {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ---- table: griglia con colonna etichetta + N colonne di valori ------------------
   --sk-cols e' il numero di colonne di VALORI: quella dell'etichetta si aggiunge da
   se' ed e' piu' larga, come la prima colonna delle tabelle vere. */
.sk-skel-table { display: flex; flex-direction: column; gap: 2px; }
.sk-skel-row {
    display: grid;
    grid-template-columns: minmax(120px, 1.8fr) repeat(var(--sk-cols, 6), minmax(48px, 1fr));
    gap: 12px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px dashed var(--clean-card-border);
}
.sk-skel-row:last-child { border-bottom: 0; }
/* L'intestazione e' piu' bassa e piu' corta: e' quello che fa leggere "tabella" a
   colpo d'occhio invece che "elenco di barre". */
.sk-skel-row-head { padding: 9px 0; }
.sk-skel-row-head .sk-skel-bar { height: 9px; width: 62%; }
/* Le righe di gruppo hanno l'etichetta piu' corta e marcata: restituiscono la
   gerarchia senza sapere niente dei dati veri. */
.sk-skel-row-group .sk-skel-cell-label .sk-skel-bar { width: 58%; height: 14px; }
.sk-skel-row-leaf  .sk-skel-cell-label .sk-skel-bar { width: 84%; }
/* Le celle di valore non arrivano a filo: nelle tabelle vere sono numeri corti. */
.sk-skel-cell .sk-skel-bar { width: 70%; }
.sk-skel-cell-label .sk-skel-bar { width: 84%; }

/* ---- block: ripiego generico per card e form ----------------------------------- */
.sk-skel-block { display: flex; flex-direction: column; gap: 14px; padding: 8px 0; }
/* Larghezze decrescenti e poi una lunga: un blocco di barre tutte uguali sembra una
   griglia, non un testo che si sta formando. */
.sk-skel-block .sk-skel-bar:nth-child(3n+1) { width: 100%; }
.sk-skel-block .sk-skel-bar:nth-child(3n+2) { width: 82%; }
.sk-skel-block .sk-skel-bar:nth-child(3n+3) { width: 64%; }

/* ---- list: pallino + nome + valore, la forma dei riquadri a elenco -------------- */
.sk-skel-list { display: flex; flex-direction: column; gap: 4px; }
.sk-skel-list-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--clean-card-border);
}
.sk-skel-list-row:last-child { border-bottom: 0; }
.sk-skel-list-avatar { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; }
.sk-skel-list-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sk-skel-list-text .sk-skel-bar:first-child { width: 46%; }
.sk-skel-list-text .sk-skel-bar:last-child  { width: 72%; height: 10px; }
.sk-skel-list-value { width: 62px; flex: 0 0 auto; }

/* ---- grafici ------------------------------------------------------------------
   Una forma per tipo ApexCharts. La linea di base e' l'asse: senza, le colonne
   galleggiano e non si legge "grafico". */
.sk-skel-graph { display: flex; flex-direction: column; height: 100%; min-height: 220px; }
.sk-skel-graph-base { height: 2px; border-radius: 1px; background: var(--clean-card-border); margin-top: 10px; }

/* bar: colonne verticali (type:'bar') */
.sk-skel-bar-v { flex: 1 1 auto; display: flex; align-items: flex-end; gap: 10px; }
.sk-skel-bar-v .sk-skel-bar { flex: 1 1 0; border-radius: 4px 4px 0 0; }

/* bar-h: barre orizzontali con etichetta (type:'bar' + horizontal) */
.sk-skel-bar-h { display: flex; flex-direction: column; gap: 16px; padding: 10px 0; }
.sk-skel-bar-h-row { display: flex; align-items: center; gap: 12px; }
.sk-skel-bar-h-label { width: 96px; flex: 0 0 auto; height: 10px; }
.sk-skel-bar-h-row > .sk-skel-bar:last-child { height: 16px; }

/* donut: anello + legenda (type:'donut'|'pie') */
.sk-skel-donut { display: flex; align-items: center; gap: 28px; min-height: 220px; }
/* Anello e non disco: il buco al centro e' quello che distingue una ciambella da una
   torta, ed e' la prima cosa che l'occhio cerca. */
.sk-skel-donut-ring {
    width: 160px; height: 160px; border-radius: 50%; flex: 0 0 auto;
    -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%);
            mask: radial-gradient(circle, transparent 52%, #000 53%);
}
.sk-skel-donut-legend { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sk-skel-donut-legend-row { display: flex; align-items: center; gap: 10px; }
.sk-skel-donut-dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.sk-skel-donut-voce { height: 11px; flex: 1 1 auto; max-width: 190px; }

/* area: sagoma piena col profilo superiore spezzato (type:'area'|'line') */
.sk-skel-area .sk-skel-area-shape {
    flex: 1 1 auto;
    height: auto;
    border-radius: 0;
    -webkit-clip-path: polygon(0 62%, 12% 44%, 26% 58%, 38% 30%, 52% 46%, 66% 22%, 80% 40%, 100% 18%, 100% 100%, 0 100%);
            clip-path: polygon(0 62%, 12% 44%, 26% 58%, 38% 30%, 52% 46%, 66% 22%, 80% 40%, 100% 18%, 100% 100%, 0 100%);
}

/* heatmap: griglia di celle a intensita' variabile (type:'heatmap') */
.sk-skel-heatmap { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
.sk-skel-heatmap-row {
    display: grid;
    grid-template-columns: 76px repeat(var(--sk-hm-cols, 12), 1fr);
    gap: 4px;
    align-items: center;
}
.sk-skel-heatmap-label { height: 10px; }
.sk-skel-heatmap-cell { height: 20px; border-radius: 3px; }

/* ---- sm_skeleton.js: skeleton dal DOM -----------------------------------------------
   Non disegna un pannello sopra la pagina: luccicano gli elementi veri del contenitore acceso
   (.sm-sk-on). I campi del form luccicano da soli; il resto si marca con data-sk nel markup.
   La forma e' quella che arrivera', perche' e' gia' quella. */
.sm-sk-on :is(.form-control, .form-select, .select2-selection, [data-sk="blocco"], [data-sk="testo"]),
.sm-sk-barra {
    color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    /* Niente shorthand `background` con !important: fisserebbe anche background-position come
       !important, e una dichiarazione !important vince sui keyframe. L'animazione risultava
       applicata ma la posizione restava 0% 0%: il luccichio non si muoveva. Qui !important solo
       su immagine e dimensione, che servono a coprire lo sfondo dei campi. */
    background-color: var(--clean-card-border) !important;
    background-image: linear-gradient(90deg, var(--clean-card-border) 25%,
                      var(--clean-canvas) 37%, var(--clean-card-border) 63%) !important;
    background-size: 400% 100% !important;
    animation: sk-skel-glow 1.3s ease-in-out infinite;
    pointer-events: none;
    user-select: none;
}
.sm-sk-on :is(.form-control, .form-select)::placeholder { color: transparent; }
/* Freccia e testo che Select2 disegna dentro la selezione */
.sm-sk-on :is(.select2-selection, [data-sk="blocco"], [data-sk="testo"]) > * { visibility: hidden; }
/* Un valore corto: una barra, non la riga intera che il div occuperebbe */
.sm-sk-on [data-sk="testo"] { width: fit-content; min-width: var(--sk-min, 9ch); border-radius: 4px; }
.sm-sk-on [data-sk="inerte"] { pointer-events: none; opacity: .55; }

.sm-sk-nascosto { display: none !important; }
.sm-sk-barra { display: block; height: 12px; border-radius: 4px; }
li.sm-sk-riga, div.sm-sk-riga { list-style: none; padding: 10px 0; }
tr.sm-sk-riga > td { padding: 12px 14px; }
.sm-sk-riga:nth-child(odd) .sm-sk-barra { width: 86%; }
.sm-sk-riga:nth-child(even) .sm-sk-barra { width: 62%; }
tr.sm-sk-riga > td:last-child .sm-sk-barra { width: 40%; margin-left: auto; }

/* All'arrivo dei dati i valori emergono invece di comparire di scatto */
.sm-sk-rivela :is(.form-control, .form-select, .select2-selection, [data-sk="blocco"], [data-sk="testo"]) {
    animation: sm-sk-rivela .25s cubic-bezier(.22,1,.36,1);
}
@keyframes sm-sk-rivela { from { opacity: .3; } }

/* Reduced motion: resta la forma, sparisce il luccichio. Uno skeleton fermo dice
   comunque "sta arrivando questo", ed e' l'informazione che porta. */
@media (prefers-reduced-motion: reduce) {
    .sk-skel-bar { animation: none; background: var(--clean-card-border); }
    .sk-skel-panel.is-leaving { animation: none; opacity: 0; }
    .sm-sk-on :is(.form-control, .form-select, .select2-selection, [data-sk="blocco"], [data-sk="testo"]),
    .sm-sk-barra { animation: none; background: var(--clean-card-border) !important; }
    .sm-sk-rivela :is(.form-control, .form-select, .select2-selection, [data-sk="blocco"], [data-sk="testo"]) { animation: none; }
}