/*!
 * Loading Components - 2025 Design System
 * Reusable loading indicators, progress bars, and skeleton components
 * Features: Shimmer effects, smooth animations, accessibility-first
 */

/* ================================
   SPINNER COMPONENTS
   ================================ */

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border, #e5e7eb);
  border-top: 2px solid var(--color-primary-6, #2563eb);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spinner-lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

.spinner-sm {
  width: 16px;
  height: 16px;
  border-width: 1.5px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ================================
   PROGRESS COMPONENTS
   ================================ */

.progress {
  width: 100%;
  height: 8px;
  background: var(--color-surface-tertiary, #f3f4f6);
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
  position: relative;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary-6, #2563eb), var(--color-primary-5, #3b82f6));
  border-radius: var(--radius-full, 9999px);
  transition: width var(--transition-medium, 0.3s) var(--transition-ease, ease-in-out);
  position: relative;
  overflow: hidden;
}

.progress-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: progressShimmer 2s infinite;
}

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

/* Large progress bar */
.progress-lg {
  height: 12px;
}

/* Progress with label */
.progress-labeled {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
}

.progress-label {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-secondary, #6b7280);
  min-width: 3rem;
  text-align: right;
}

/* Indeterminate progress bar */
.progress-indeterminate .progress-bar {
  width: 30%;
  animation: progressIndeterminate 2s ease-in-out infinite;
}

@keyframes progressIndeterminate {
  0% { left: -30%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

/* ================================
   SKELETON COMPONENTS
   ================================ */

.skeleton {
  background: linear-gradient(90deg, 
    var(--color-surface-secondary, #f9fafb), 
    var(--color-surface-tertiary, #f3f4f6), 
    var(--color-surface-secondary, #f9fafb)
  );
  background-size: 200% 100%;
  animation: skeletonPulse 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm, 0.375rem);
}

.skeleton-text {
  height: 1em;
  margin-bottom: var(--space-2, 0.5rem);
}

.skeleton-title {
  height: 1.5em;
  width: 60%;
  margin-bottom: var(--space-3, 0.75rem);
}

.skeleton-button {
  height: 44px;
  width: 120px;
  border-radius: var(--radius-md, 0.5rem);
}

.skeleton-card {
  height: 200px;
  border-radius: var(--radius-lg, 0.75rem);
}

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

/* ================================
   LOADING STATE CONTAINERS
   ================================ */

.loading-container {
  text-align: center;
  padding: var(--space-6, 1.5rem);
}

.loading-content {
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
}

.loading-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3, 0.75rem);
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-heading, #111827);
  gap: var(--space-2, 0.5rem);
}

.loading-description {
  color: var(--color-text-secondary, #6b7280);
  margin-bottom: var(--space-4, 1rem);
  font-size: var(--font-size-base, 1rem);
  line-height: var(--line-height-comfortable, 1.6);
}

.loading-progress {
  margin: var(--space-4, 1rem) 0;
}

.loading-text {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary, #6b7280);
  font-style: italic;
  margin-top: var(--space-2, 0.5rem);
}

/* ================================
   LOADING ROW SPECIFIC STYLES
   ================================ */

.loading-row {
  background: var(--color-surface-secondary, #f9fafb) !important;
  border-left: 3px solid var(--color-primary-6, #2563eb) !important;
  transition: background-color var(--transition-fast, 0.2s) var(--transition-ease, ease-in-out);
}

.loading-row:hover {
  background: var(--color-primary-50, #eff6ff) !important;
}

.loading-row td {
  padding: var(--space-6, 1.5rem) !important;
}

/* ================================
   BUTTON LOADING STATE
   ================================ */

.btn-loading {
  position: relative;
  color: transparent;
  cursor: wait;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  color: var(--color-surface-primary, #ffffff);
}

/* ================================
   LOADING DOTS ANIMATION
   ================================ */

.loading-dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.loading-dots::after {
  content: '';
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
  animation: loadingDots 1.4s ease-in-out infinite both;
}

.loading-dots::before {
  content: '';
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
  animation: loadingDots 1.4s ease-in-out infinite both;
  animation-delay: -0.16s;
  margin-right: 2px;
}

@keyframes loadingDots {
  0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

/* ================================
   RESPONSIVE DESIGN
   ================================ */

@media (max-width: 768px) {
  .loading-content {
    max-width: 100%;
    padding: var(--space-4, 1rem);
  }
  
  .loading-header {
    font-size: var(--font-size-base, 1rem);
    flex-direction: column;
    gap: var(--space-1, 0.25rem);
  }
  
  .progress-labeled {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  
  .progress-label {
    text-align: center;
    min-width: auto;
  }
}

/* ================================
   ACCESSIBILITY ENHANCEMENTS
   ================================ */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .spinner,
  .progress-bar::before,
  .skeleton,
  .btn-loading::after,
  .loading-dots::before,
  .loading-dots::after {
    animation: none;
  }
  
  .progress-indeterminate .progress-bar {
    animation: none;
    left: 0;
    width: 100%;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .progress {
    border: 1px solid currentColor;
  }
  
  .spinner {
    border-color: currentColor;
    border-top-color: transparent;
  }
}

/* Screen reader announcements */
.loading-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}