/* Loading States - Custom Animations and Overlays */

/* Loading overlay with blur backdrop */
.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(1px);
  z-index: 10;
  pointer-events: none;
}

/* Skeleton shimmer animation */
.skeleton-line {
  height: 1rem;
  background: linear-gradient(90deg, var(--bs-gray-200) 25%, var(--bs-gray-300) 50%, var(--bs-gray-200) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}

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

/* Button loading spinner */
.btn.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: button-spin 0.8s linear infinite;
}

@keyframes button-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Indeterminate progress bar */
.progress-bar.indeterminate {
  background: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-primary-dark, #0056b3) 50%, var(--bs-primary) 100%);
  background-size: 200% 100%;
  animation: progress-indeterminate 2s linear infinite;
}

@keyframes progress-indeterminate {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Search spinner positioning */
.search-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
}

/* Skeleton avatar shimmer */
.skeleton-avatar {
  background: linear-gradient(90deg, var(--bs-gray-200) 25%, var(--bs-gray-300) 50%, var(--bs-gray-200) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}

/* Full page loading overlay */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 9999;
  backdrop-filter: blur(2px);
}

/* Turbo frame refresh overlay */
.refresh-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.95);
  z-index: 1000;
  backdrop-filter: blur(2px);
}

/* Accessibility - reduced motion */
@media (prefers-reduced-motion: reduce) {
  .skeleton-line,
  .skeleton-avatar,
  .progress-bar.indeterminate,
  .btn.loading::after {
    animation: none;
  }

  .loading::after,
  .loading-overlay,
  .refresh-loading-overlay {
    backdrop-filter: none;
  }
}