/* Varial — Skeleton shimmer placeholders for loading states */

/* ── Base skeleton — warm gray with shimmer animation ────────── */
.vrl-skeleton {
  background: linear-gradient(
    90deg,
    var(--varial-gray-100, #F1F0ED) 25%,
    var(--varial-gray-50, #F8F7F5) 50%,
    var(--varial-gray-100, #F1F0ED) 75%
  );
  background-size: 200% 100%;
  animation: vrl-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--varial-radius-sm, 0.25rem);
}

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

/* ── Row skeleton — table row placeholder ────────────────────── */
.vrl-skeleton-row {
  height: 1rem;
  margin-bottom: 0.5rem;
}

.vrl-skeleton-row:last-child {
  width: 60%;
}

/* ── Chart skeleton — chart area placeholder + centred spinner ─── */
.vrl-skeleton-chart {
  height: 12rem;
  border-radius: var(--varial-radius-md, 0.375rem);
  position: relative;
}

/* Spinning circle overlaid on chart skeleton */
.vrl-skeleton-chart::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  top: 50%;
  left: 50%;
  margin: -14px 0 0 -14px;
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-top-color: rgba(0, 0, 0, 0.28);
  border-radius: 50%;
  animation: vrl-spin 0.75s linear infinite;
}

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

/* ── Dark mode ────────────────────────────────────── */
[data-bs-theme="dark"] .vrl-skeleton {
  background: linear-gradient(
    90deg,
    var(--varial-gray-100, #334155) 25%,
    var(--varial-gray-50, #1E293B) 50%,
    var(--varial-gray-100, #334155) 75%
  );
  background-size: 200% 100%;
}