/* ═══════════════════════════════════════════════════════════════
   EVIDENT — Skeleton Loading States
   
   Premium loading experience: no blank screens, ever.
   Shimmer animation with reduced-motion support.
   
   Usage:
     <div class="skeleton skeleton--card">
       <div class="skeleton__line skeleton__line--title"></div>
       <div class="skeleton__line skeleton__line--text"></div>
       <div class="skeleton__line skeleton__line--text skeleton__line--short"></div>
     </div>
   ═══════════════════════════════════════════════════════════════ */

/* ── Base Skeleton ─────────────────────────────────────────── */
.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md, 8px);
  background: var(--skeleton-bg, color-mix(in srgb, var(--color-surface, #f8fafc) 100%, transparent));
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--color-on-surface, #0f172a) 4%, transparent) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: skeleton-shimmer 1.8s ease-in-out infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
    background: color-mix(in srgb, var(--color-on-surface, #0f172a) 6%, transparent);
  }
}

/* ── Skeleton Lines ────────────────────────────────────────── */
.skeleton__line {
  height: 1rem;
  border-radius: var(--radius-sm, 4px);
  background: color-mix(in srgb, var(--color-on-surface, #0f172a) 8%, transparent);
  margin-block-end: 0.75rem;
}

.skeleton__line--title {
  height: 1.5rem;
  width: 60%;
  margin-block-end: 1rem;
}

.skeleton__line--heading {
  height: 2rem;
  width: 45%;
  margin-block-end: 1.25rem;
}

.skeleton__line--text {
  width: 100%;
}

.skeleton__line--short {
  width: 65%;
}

.skeleton__line--xs {
  height: 0.75rem;
  width: 40%;
}

/* ── Skeleton Card ─────────────────────────────────────────── */
.skeleton--card {
  padding: var(--space-lg, 2rem);
  border: 1px solid color-mix(in srgb, var(--color-on-surface, #0f172a) 8%, transparent);
  border-radius: var(--radius-lg, 12px);
  background: var(--color-surface, #f8fafc);
}

/* ── Skeleton Avatar ──────────────────────────────────────── */
.skeleton__avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-on-surface, #0f172a) 8%, transparent);
  flex-shrink: 0;
}

.skeleton__avatar--lg {
  width: 4.5rem;
  height: 4.5rem;
}

/* ── Skeleton Image ────────────────────────────────────────── */
.skeleton__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md, 8px);
  background: color-mix(in srgb, var(--color-on-surface, #0f172a) 6%, transparent);
  margin-block-end: 1rem;
}

/* ── Skeleton Stat Card ────────────────────────────────────── */
.skeleton--stat {
  display: grid;
  gap: 0.5rem;
  padding: var(--space-md, 1rem);
  border: 1px solid color-mix(in srgb, var(--color-on-surface, #0f172a) 8%, transparent);
  border-radius: var(--radius-lg, 12px);
  background: var(--color-surface, #f8fafc);
}

.skeleton--stat .skeleton__line--number {
  height: 2.5rem;
  width: 35%;
  border-radius: var(--radius-sm, 4px);
  background: color-mix(in srgb, var(--color-on-surface, #0f172a) 10%, transparent);
}

/* ── Skeleton Table Row ────────────────────────────────────── */
.skeleton--table-row {
  display: grid;
  grid-template-columns: 3rem 2fr 1fr 1fr 1fr;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-on-surface, #0f172a) 6%, transparent);
}

.skeleton--table-row .skeleton__line {
  margin-block-end: 0;
  height: 0.875rem;
}

/* ── Skeleton Pipeline Stage ───────────────────────────────── */
.skeleton--pipeline {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface, #f8fafc);
}

.skeleton__stage-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-on-surface, #0f172a) 8%, transparent);
  flex-shrink: 0;
}

.skeleton__stage-bar {
  flex: 1;
  height: 0.5rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-on-surface, #0f172a) 6%, transparent);
}

/* ── Skeleton Grid (for dashboard cards) ───────────────────── */
.skeleton--grid {
  display: grid;
  gap: var(--space-lg, 2rem);
}

.skeleton--grid-2 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.skeleton--grid-3 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.skeleton--grid-4 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

/* ── Dark Mode ─────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .skeleton--card,
  .skeleton--stat,
  .skeleton--pipeline {
    background: var(--color-surface, oklch(15% 0.02 260));
    border-color: color-mix(in srgb, var(--color-on-surface, #e2e8f0) 10%, transparent);
  }

  .skeleton__line,
  .skeleton__avatar,
  .skeleton__image,
  .skeleton__stage-icon,
  .skeleton__stage-bar,
  .skeleton--stat .skeleton__line--number {
    background: color-mix(in srgb, var(--color-on-surface, #e2e8f0) 10%, transparent);
  }
}

[data-theme="dark"] .skeleton--card,
[data-theme="dark"] .skeleton--stat,
[data-theme="dark"] .skeleton--pipeline {
  background: var(--color-surface, oklch(15% 0.02 260));
  border-color: color-mix(in srgb, var(--color-on-surface, #e2e8f0) 10%, transparent);
}

[data-theme="dark"] .skeleton__line,
[data-theme="dark"] .skeleton__avatar,
[data-theme="dark"] .skeleton__image,
[data-theme="dark"] .skeleton__stage-icon,
[data-theme="dark"] .skeleton__stage-bar,
[data-theme="dark"] .skeleton--stat .skeleton__line--number {
  background: color-mix(in srgb, var(--color-on-surface, #e2e8f0) 10%, transparent);
}