/**
 * Component: Loading & Skeleton states
 * For content that will be populated client-side later (e.g. a
 * dashboard widget fetched over REST by the future lms-core plugin).
 * No JS is required to use these — they're plain CSS classes applied
 * to placeholder markup while real content loads.
 *
 * Shimmer respects prefers-reduced-motion via the global rule in
 * base.css (animation-duration collapses to ~0, iteration-count: 1),
 * so no separate override is needed here.
 */

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--sf-border);
  border-radius: var(--sf-radius-sm);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: sf-shimmer 1.6s infinite;
}

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

.skeleton--text { height: 0.9em; margin-bottom: var(--sf-space-2); }
.skeleton--text:last-child { margin-bottom: 0; width: 70%; }
.skeleton--title { height: 1.4em; width: 60%; margin-bottom: var(--sf-space-4); }
.skeleton--avatar { width: 44px; height: 44px; border-radius: var(--sf-radius-full); flex-shrink: 0; }
.skeleton--thumb { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--sf-radius-md); }
.skeleton--button { width: 110px; height: 2.75rem; border-radius: var(--sf-radius-md); }

.skeleton-card { display: block; }
.skeleton-card > * + * { margin-top: var(--sf-space-3); }

/* ---------- Spinner (inline / button loading) ---------- */

.spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid rgba(68, 56, 202, 0.2);
  border-top-color: var(--sf-indigo);
  border-radius: 50%;
  animation: sf-spin 0.7s linear infinite;
}
.spinner--on-dark { border-color: rgba(255, 255, 255, 0.25); border-top-color: #fff; }
.spinner--lg { width: 1.5em; height: 1.5em; border-width: 3px; }

@keyframes sf-spin {
  to { transform: rotate(360deg); }
}

/* Button loading state: hides label, shows a centered spinner, keeps
   the button's footprint so layout doesn't shift. */
.btn.is-loading {
  color: transparent !important;
  pointer-events: none;
  position: relative;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 1em; height: 1em;
  margin: -0.5em 0 0 -0.5em;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: sf-spin 0.7s linear infinite;
  color: #fff;
}
.btn--secondary.is-loading::after,
.btn--text.is-loading::after { color: var(--sf-indigo); border-color: rgba(68, 56, 202, 0.2); border-top-color: var(--sf-indigo); }

/* Full-panel loading overlay for a dashboard card mid-refresh */
.loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  border-radius: inherit;
  z-index: 1;
}