/* Enhanced Loading States Styles */

/* Loading state for containers */
.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

.loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(1px);
  z-index: 10;
  pointer-events: none;
}

/* Skeleton loaders */
.skeleton-loader {
  padding: 1rem;
  animation: skeleton-loading 1.5s infinite ease-in-out;
}

.skeleton-line {
  height: 1rem;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: skeleton-shimmer 1.5s infinite;
}

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

@keyframes skeleton-loading {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* Enhanced button loading states */
.btn.loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

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

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

/* Form loading states */
.form-loading {
  opacity: 0.6;
  pointer-events: none;
}

.form-loading .form-control,
.form-loading .form-select {
  background-color: #f8f9fa;
  border-color: #dee2e6;
}

/* Progress indicators */
.progress-container {
  margin: 1rem 0;
}

.progress {
  height: 8px;
  background-color: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar {
  background: linear-gradient(90deg, #007bff, #0056b3);
  height: 100%;
  transition: width 0.3s ease;
  position: relative;
}

.progress-bar.indeterminate {
  background: linear-gradient(90deg, #007bff 0%, #0056b3 50%, #007bff 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 loading states */
.search-loading {
  position: relative;
}

.search-loading .search-results {
  min-height: 200px;
}

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

/* Table loading states */
.table-loading {
  position: relative;
  min-height: 200px;
}

.table-skeleton {
  width: 100%;
}

.table-skeleton td {
  padding: 0.75rem;
  border-top: 1px solid #dee2e6;
}

.table-skeleton .skeleton-line {
  height: 0.875rem;
  margin: 0;
}

/* Modal loading states */
.modal-loading .modal-body {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Card loading states */
.card-loading {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
}

.card-skeleton {
  padding: 1rem;
}

.card-skeleton .skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  margin-bottom: 1rem;
}

/* Pulse loading animation */
.pulse-loading {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Fade loading animation */
.fade-loading {
  animation: fade 2s ease-in-out infinite;
}

@keyframes fade {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

/* Loading overlay for full page */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(2px);
}

.loading-overlay .spinner-container {
  text-align: center;
}

.loading-overlay .spinner-border {
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .skeleton-loader {
    padding: 0.5rem;
  }
  
  .loading-overlay .spinner-border {
    width: 2rem;
    height: 2rem;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .loading::after {
    background: rgba(0, 0, 0, 0.8);
  }
  
  .skeleton-line {
    background: linear-gradient(90deg, #2d3748 25%, #4a5568 50%, #2d3748 75%);
  }
  
  .card-skeleton .skeleton-avatar {
    background: linear-gradient(90deg, #2d3748 25%, #4a5568 50%, #2d3748 75%);
  }
}

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