/* ============================================================
   assets/css/skeleton.css
   Skeleton loading animations for all components.
   All skeleton elements use the .skeleton class.
   ============================================================ */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface2) 25%,
    var(--surface3) 50%,
    var(--surface2) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 6px;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Light mode adjustment */
body.light .skeleton {
  background: linear-gradient(90deg, #EAE6E0 25%, #DEDAD3 50%, #EAE6E0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

/* Skeleton text lines */
.skeleton-text        { height: 13px; margin-bottom: 8px; border-radius: 4px; }
.skeleton-text.wide   { width: 80%; }
.skeleton-text.medium { width: 55%; }
.skeleton-text.short  { width: 30%; }

/* Skeleton components */
.skeleton-avatar  { width: 38px; height: 38px; border-radius: 50 !important; flex-shrink: 0; }
.skeleton-metric  { height: 90px; border-radius: 12px; }
.skeleton-card    { height: 70px; border-radius: 12px; margin-bottom: 10px; }

/* Page load state */
.page-loading { pointer-events: none; }