/**
 * CampusQCM — Skeleton loaders (réutilisable global)
 * Usage:
 *   <div class="cq-skeleton" style="height:120px"></div>
 *   <div class="cq-skeleton cq-skeleton--text"></div>
 *   <div class="cq-skeleton cq-skeleton--avatar"></div>
 *   <div class="cq-skeleton-card"> ... </div>
 *
 * @package CampusQCM
 * @version 1.0.0 — 20 avril 2026
 */

@keyframes cq-skel-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.cq-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.12) 0%,
    rgba(148, 163, 184, 0.22) 50%,
    rgba(148, 163, 184, 0.12) 100%
  );
  background-size: 800px 100%;
  animation: cq-skel-shimmer 1.4s var(--cq-ease-out, ease) infinite;
  border-radius: 8px;
  min-height: 14px;
}

.cq-skeleton--text {
  height: 12px;
  margin: 6px 0;
  border-radius: 6px;
}

.cq-skeleton--text-lg {
  height: 18px;
  margin: 8px 0;
}

.cq-skeleton--title {
  height: 22px;
  width: 60%;
  margin-bottom: 12px;
}

.cq-skeleton--avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.cq-skeleton--avatar-lg {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.cq-skeleton--button {
  height: 44px;
  width: 140px;
  border-radius: 12px;
}

.cq-skeleton--card {
  height: 180px;
  border-radius: 16px;
}

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

/* Card scaffold for full QCM/notion/leaderboard rows */
.cq-skeleton-card {
  background: var(--cq-bg-elevated, #fff);
  border: 1px solid var(--cq-border-subtle, rgba(15, 23, 42, 0.06));
  border-radius: var(--cq-radius-card, 16px);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--cq-elev-1);
}

.cq-skeleton-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--cq-bg-elevated, #fff);
  border-radius: 12px;
  border: 1px solid var(--cq-border-subtle, rgba(15, 23, 42, 0.06));
}

/* Dark mode */
body.qcm-dark .cq-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
}

body.qcm-dark .cq-skeleton-card,
body.qcm-dark .cq-skeleton-row {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
}

/* Reduced motion: pause shimmer */
@media (prefers-reduced-motion: reduce) {
  .cq-skeleton {
    animation: none;
    background: rgba(148, 163, 184, 0.18);
  }
}