/*
 * Skeleton Loading — Yellika SMS
 * ------------------------------------------------------------------
 * Affiche une maquette grise animée du contenu pendant son chargement,
 * à la place d'un spinner ou d'un écran vide.
 *
 * Utilisation :
 *   - DataTables : automatique (voir js/skeleton-loading.js), aucun
 *     changement à faire dans les vues.
 *   - Manuel : <span class="skeleton skeleton-text"></span>
 *              <div class="skeleton skeleton-block" style="height:120px"></div>
 *              Skeleton.show('#mon-bloc') / Skeleton.hide('#mon-bloc')
 */

:root {
    --skeleton-base: #e9ecef;
    --skeleton-shine: #f6f7f8;
    --skeleton-radius: 0.375rem;
    --skeleton-speed: 1.4s;
}

/* Thème sombre */
[data-layout="dark-layout"],
.dark-layout {
    --skeleton-base: #2f3349;
    --skeleton-shine: #3b3f5c;
}

/* ------------------------------------------------------------------
   Primitive de base
   ------------------------------------------------------------------ */
.skeleton {
    display: block;
    position: relative;
    overflow: hidden;
    background-color: var(--skeleton-base);
    border-radius: var(--skeleton-radius);
    /* Empêche la sélection / le copier-coller d'un contenu factice */
    user-select: none;
    pointer-events: none;
    color: transparent !important;
}

.skeleton::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        var(--skeleton-shine) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: skeleton-shimmer var(--skeleton-speed) ease-in-out infinite;
}

/* Sens de l'animation inversé en RTL */
[dir="rtl"] .skeleton::after,
html[data-textdirection="rtl"] .skeleton::after {
    transform: translateX(100%);
    animation-name: skeleton-shimmer-rtl;
}

@keyframes skeleton-shimmer {
    100% {
        transform: translateX(100%);
    }
}

@keyframes skeleton-shimmer-rtl {
    100% {
        transform: translateX(-100%);
    }
}

/* Accessibilité : pas d'animation si l'utilisateur la refuse */
@media (prefers-reduced-motion: reduce) {
    .skeleton::after {
        animation: none;
    }
    .skeleton {
        opacity: 0.7;
    }
}

/* ------------------------------------------------------------------
   Variantes
   ------------------------------------------------------------------ */
.skeleton-text {
    height: 0.75rem;
    width: 100%;
    border-radius: 0.25rem;
}

.skeleton-text.w-25 { width: 25% !important; }
.skeleton-text.w-50 { width: 50% !important; }
.skeleton-text.w-75 { width: 75% !important; }

.skeleton-title {
    height: 1.15rem;
    width: 45%;
    border-radius: 0.25rem;
}

.skeleton-block {
    width: 100%;
    height: 100px;
}

.skeleton-circle {
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
}

.skeleton-badge {
    height: 1.25rem;
    width: 4.5rem;
    border-radius: 1rem;
}

.skeleton-btn {
    height: 2.25rem;
    width: 6rem;
    border-radius: 0.5rem;
}

/* Espacement vertical entre lignes empilées */
.skeleton + .skeleton {
    margin-top: 0.5rem;
}

/* ------------------------------------------------------------------
   Intégration DataTables
   ------------------------------------------------------------------ */

/* On masque l'indicateur "Traitement..." natif quand le squelette est actif */
.dt-skeleton-active .dataTables_processing {
    display: none !important;
}

/* Les lignes squelette ne doivent pas réagir au survol ni au clic */
tr.skeleton-row,
tr.skeleton-row td {
    background: transparent !important;
    cursor: default !important;
}

tr.skeleton-row td {
    vertical-align: middle;
    border-top-color: rgba(0, 0, 0, 0.04);
}

/* Largeurs variées pour un rendu plus naturel (moins "code-barres") */
tr.skeleton-row td:nth-child(3n + 1) .skeleton-text { width: 85%; }
tr.skeleton-row td:nth-child(3n + 2) .skeleton-text { width: 65%; }
tr.skeleton-row td:nth-child(3n + 3) .skeleton-text { width: 75%; }

/* Léger décalage de l'animation ligne par ligne : effet de cascade */
tr.skeleton-row:nth-child(1) .skeleton::after { animation-delay: 0s; }
tr.skeleton-row:nth-child(2) .skeleton::after { animation-delay: 0.08s; }
tr.skeleton-row:nth-child(3) .skeleton::after { animation-delay: 0.16s; }
tr.skeleton-row:nth-child(4) .skeleton::after { animation-delay: 0.24s; }
tr.skeleton-row:nth-child(5) .skeleton::after { animation-delay: 0.32s; }
tr.skeleton-row:nth-child(6) .skeleton::after { animation-delay: 0.4s; }
tr.skeleton-row:nth-child(7) .skeleton::after { animation-delay: 0.48s; }
tr.skeleton-row:nth-child(8) .skeleton::after { animation-delay: 0.56s; }
tr.skeleton-row:nth-child(9) .skeleton::after { animation-delay: 0.64s; }
tr.skeleton-row:nth-child(10) .skeleton::after { animation-delay: 0.72s; }

/* ------------------------------------------------------------------
   Graphiques (ApexCharts)
   ------------------------------------------------------------------ */
.skeleton-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    padding: 12px 0 4px;
    box-sizing: border-box;
}

.skeleton-chart > .skeleton {
    flex: 1 1 0;
    min-width: 0;
    margin-top: 0;
    border-radius: 0.25rem 0.25rem 0 0;
}

/* Cascade de l'animation d'une barre à l'autre */
.skeleton-chart > .skeleton:nth-child(1)::after  { animation-delay: 0s; }
.skeleton-chart > .skeleton:nth-child(2)::after  { animation-delay: 0.06s; }
.skeleton-chart > .skeleton:nth-child(3)::after  { animation-delay: 0.12s; }
.skeleton-chart > .skeleton:nth-child(4)::after  { animation-delay: 0.18s; }
.skeleton-chart > .skeleton:nth-child(5)::after  { animation-delay: 0.24s; }
.skeleton-chart > .skeleton:nth-child(6)::after  { animation-delay: 0.3s; }
.skeleton-chart > .skeleton:nth-child(7)::after  { animation-delay: 0.36s; }
.skeleton-chart > .skeleton:nth-child(8)::after  { animation-delay: 0.42s; }
.skeleton-chart > .skeleton:nth-child(9)::after  { animation-delay: 0.48s; }
.skeleton-chart > .skeleton:nth-child(10)::after { animation-delay: 0.54s; }
.skeleton-chart > .skeleton:nth-child(11)::after { animation-delay: 0.6s; }
.skeleton-chart > .skeleton:nth-child(12)::after { animation-delay: 0.66s; }

/* Camemberts / jauges : un disque plutôt que des barres */
.skeleton-chart-round {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.skeleton-donut {
    border-radius: 50%;
    margin-top: 0;
}

/* ------------------------------------------------------------------
   Blocs génériques (cartes, listes, widgets)
   ------------------------------------------------------------------ */
.skeleton-line-group .skeleton-text:last-child {
    width: 55%;
}

.skeleton-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0;
}

.skeleton-list-item + .skeleton-list-item {
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

[data-layout="dark-layout"] .skeleton-list-item + .skeleton-list-item,
.dark-layout .skeleton-list-item + .skeleton-list-item {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.skeleton-list-item .skeleton-lines {
    flex: 1 1 auto;
    min-width: 0;
}

/* Conteneur en cours de chargement via l'API JS */
.skeleton-loading-container {
    position: relative;
    min-height: 60px;
}