/* ============================================================================
   Loading/Updating State
   ============================================================================ */

.ffmpeg-media-dashboard--loading {
  opacity: 0.7;
  pointer-events: none;
  position: relative;
}

.ffmpeg-media-dashboard--loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
}

.gin--dark-mode .ffmpeg-media-dashboard--loading::after {
  background: rgba(0, 0, 0, 0.35);
}

/* ============================================================================
   Loading Skeletons
   ============================================================================ */

.ffmpeg-skeleton {
  background: linear-gradient(
    90deg,
    var(--ffmpeg-surface-2) 25%,
    var(--ffmpeg-surface-3) 50%,
    var(--ffmpeg-surface-2) 75%
  );
  background-size: 200% 100%;
  animation: ffmpeg-skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: var(--ffmpeg-radius-s);
}

.ffmpeg-skeleton--text {
  height: 1em;
  width: 60%;
  margin-bottom: 0.5em;
}

.ffmpeg-skeleton--text-short {
  height: 1em;
  width: 35%;
  margin-bottom: 0.5em;
}

.ffmpeg-skeleton--stat {
  height: 3rem;
  width: 100%;
}

.ffmpeg-skeleton--row {
  height: 2.5rem;
  width: 100%;
  margin-bottom: 0.5rem;
}

.ffmpeg-skeleton--row:last-child {
  margin-bottom: 0;
}

.ffmpeg-skeleton--badge {
  height: 1.6rem;
  width: 4rem;
  border-radius: 9999px;
}

.ffmpeg-skeleton--card {
  height: 5.5rem;
  width: 100%;
  border-radius: var(--ffmpeg-radius-m);
}

@keyframes ffmpeg-skeleton-pulse {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* Skeleton containers hidden by default, shown during loading */
.ffmpeg-skeleton-group {
  display: none;
}

.ffmpeg-media-dashboard--loading .ffmpeg-skeleton-group,
[aria-busy="true"] .ffmpeg-skeleton-group {
  display: block;
}

.ffmpeg-media-dashboard--loading .ffmpeg-skeleton-hide,
[aria-busy="true"] .ffmpeg-skeleton-hide {
  display: none;
}

/* Skeleton grid for stats cards placeholder */
.ffmpeg-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
}

/* Dark mode skeleton adjustments */
.gin--dark-mode .ffmpeg-skeleton {
  background: linear-gradient(
    90deg,
    var(--ffmpeg-surface-2) 25%,
    var(--ffmpeg-border) 50%,
    var(--ffmpeg-surface-2) 75%
  );
  background-size: 200% 100%;
}

/* prefers-color-scheme fallback for non-Gin themes */
@media (prefers-color-scheme: dark) {
  :root:not(.gin--dark-mode):not([data-theme="light"]) .ffmpeg-media-dashboard--loading::after {
    background: rgba(0, 0, 0, 0.35);
  }

  :root:not(.gin--dark-mode):not([data-theme="light"]) .ffmpeg-skeleton {
    background: linear-gradient(
      90deg,
      var(--ffmpeg-surface-2) 25%,
      var(--ffmpeg-border) 50%,
      var(--ffmpeg-surface-2) 75%
    );
    background-size: 200% 100%;
  }
}
