/* ================================
   JAIFORE SKELETON KIT
   frontend/styles/skeleton.css

   Shared by the storefront and the admin. Colours come from the --skel-*
   variables (light defaults below; admin.css overrides them for glass).
   The shimmer moves a pseudo-element with `transform` only — no
   background-position animation, so it stays cheap on slow machines.
   ================================ */
:root {
  --skel-base:   var(--purple-tint, #f1e6f7);
  --skel-shine:  rgba(255, 255, 255, 0.55);
  --skel-border: var(--border, #e2d6ea);
  --skel-radius: 8px;
  --skel-ink:    var(--ink, #14121c);
  --skel-muted:  var(--muted, #6b6779);
  --skel-accent: var(--purple-dark, #5d0f78);
}

.skel {
  position: relative;
  overflow: hidden;
  background: var(--skel-base);
  border-radius: calc(var(--skel-radius) - 2px);
}
.skel::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--skel-shine), transparent);
  animation: skel-shimmer 1.4s infinite;
}
@keyframes skel-shimmer { to { transform: translateX(100%); } }

.skel-line   { display: block; height: 0.9em; width: 100%; margin: 0.35em 0; }
.skel-line.short { width: 40%; }
.skel-line.tall  { height: 1.8em; }
.skel-circle { display: block; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.skel-block  { display: block; width: 100%; height: 120px; }
.skel-img    { display: block; width: 100%; aspect-ratio: 1; }

.skel-flex { display: flex; align-items: center; gap: 1rem; }
.skel-grow { flex: 1; min-width: 0; }
.rv-track .load-error { flex: 1 1 100%; }

.skel-card {
  background: transparent;
  border: 1px solid var(--skel-border);
  border-radius: var(--skel-radius);
  padding: 1rem;
  overflow: hidden;
}

/* Error state with Retry — what every skeleton ends in if the server is unreachable */
.load-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-align: center;
  padding: 2rem 1rem;
  color: var(--skel-muted);
  font-size: 0.88rem;
  grid-column: 1 / -1;
}
.load-error-icon { font-size: 1.6rem; line-height: 1; }
.load-error-msg  { max-width: 32ch; }
.load-error-retry {
  background: transparent;
  color: var(--skel-ink);
  border: 1px solid var(--skel-accent);
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  padding: 0.5rem 1.3rem;
  cursor: pointer;
}
.load-error-retry:hover { background: var(--skel-accent); color: #fff; }
.load-error-retry:disabled { opacity: 0.5; cursor: wait; }

@media (prefers-reduced-motion: reduce) {
  .skel::after { animation: none; display: none; }
}

[data-theme="dark"] { --skel-shine: rgba(255, 255, 255, 0.07); }