/* Skeleton Loader — shimmer placeholders for lazy-loaded sections */

/* Base skeleton element */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--color-border-light, #f0f0f0);
  border-radius: 4px;
}

/* Shimmer animation */
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

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

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
  }
}

/* Variants */
.skeleton-text {
  height: 14px;
  margin-bottom: var(--space-sm, 8px);
  width: 80%;
}

.skeleton-heading {
  height: 20px;
  margin-bottom: var(--space-md, 16px);
  width: 40%;
}

.skeleton-chart {
  height: 300px;
  width: 100%;
}

.skeleton-table-row {
  height: 36px;
  margin-bottom: 2px;
  width: 100%;
}

/* Container variants — match real section styling */
.skeleton-chart-section {
  padding: var(--space-md, 16px);
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 8px;
  margin-bottom: var(--space-md, 16px);
  background: var(--color-bg-white, #fff);
}

.skeleton-table-section {
  padding: var(--space-md, 16px);
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 8px;
  margin-bottom: var(--space-md, 16px);
  background: var(--color-bg-white, #fff);
}