/**
 * LDRC skeleton loaders — design-system tokens, admin + public.
 * Shimmer is disabled when prefers-reduced-motion: reduce.
 */

:root {
  --skeleton-base: var(--color-surface-2, #1e293b);
  --skeleton-shine: rgba(99, 102, 241, 0.14);
  --skeleton-radius: 8px;
  --skeleton-shimmer-dur: 1.15s;
}

[data-theme="light"] {
  --skeleton-shine: rgba(99, 102, 241, 0.18);
}

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

.skeleton-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skeleton-line,
.skeleton-pill,
.skeleton-circle,
.skeleton-rect,
.skeleton-table .skeleton-td {
  position: relative;
  overflow: hidden;
  background: var(--skeleton-base);
  border-radius: var(--skeleton-radius);
}

.skeleton-line {
  display: block;
  height: 0.7rem;
  max-width: 100%;
}

.skeleton-line--sm {
  height: 0.5rem;
  width: 40%;
}
.skeleton-line--md {
  width: 75%;
}
.skeleton-line--lg {
  height: 0.85rem;
  width: 90%;
}
.skeleton-line--full {
  width: 100%;
}

.skeleton-pill {
  display: inline-block;
  height: 1.5rem;
  min-width: 3.5rem;
  border-radius: 999px;
}

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

.skeleton-rect {
  min-height: 2.5rem;
  width: 100%;
}

.skeleton-rect--thumb {
  width: 50px;
  height: 50px;
  min-width: 50px;
  border-radius: 0.25rem;
}

.skeleton-shimmer {
  background: linear-gradient(
    100deg,
    var(--skeleton-base) 0%,
    var(--skeleton-base) 35%,
    var(--skeleton-shine) 50%,
    var(--skeleton-base) 65%,
    var(--skeleton-base) 100%
  );
  background-size: 200% 100%;
  background-position: 200% 0;
  animation: ldrc-skeleton-shimmer var(--skeleton-shimmer-dur) ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --skeleton-shimmer-dur: 0.01ms;
  }
  .skeleton-shimmer {
    animation: none;
    background: var(--skeleton-base);
    opacity: 0.9;
  }
}

/* Grouped text block */
.skeleton-text {
  position: relative;
  min-width: 8rem;
}

.skeleton-reveal-root {
  position: relative;
}

/* Table placeholder (keeps same responsive shell as .table) */
.skeleton-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.skeleton-table thead th {
  padding: 0.75rem;
  vertical-align: middle;
  border: 1px solid var(--color-border, rgba(99, 102, 241, 0.12));
}

.skeleton-table tbody td {
  padding: 0.75rem;
  vertical-align: middle;
  border: 1px solid var(--color-border, rgba(99, 102, 241, 0.12));
}

.skeleton-table .skeleton-td-inner {
  min-height: 1.1rem;
}

.skeleton-stat-row .card {
  min-height: 5.5rem;
}

.skeleton-stat-row .skeleton-pill--stat {
  width: 4.5rem;
  height: 0.6rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.skeleton-stat-row .skeleton-line--h {
  width: 3rem;
  height: 1.35rem;
  border-radius: 4px;
}

.skeleton-stat-row .skeleton-circle--icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
}

/* Product / card grid (public shop) */
.skeleton-product-card {
  background: var(--color-surface, #0f172a);
  border: 1px solid var(--color-border, rgba(99, 102, 241, 0.12));
  border-radius: var(--radius, 16px);
  overflow: hidden;
  height: 100%;
}

.skeleton-product-card__media {
  width: 100%;
  height: 200px;
  border-radius: 0;
}

.skeleton-product-card__body {
  padding: 1.25rem;
}