/**
 * Stream View Loaders Stylesheet
 * Sizing, positioning, and integration styles for animated loaders
 * Version: 1.0
 * Generated: November 24, 2025
 */

/* ===== LOADER SIZING CLASSES ===== */
/* Standardized sizes for consistent appearance */

.loader-xs {
  width: 16px;
  height: 16px;
}

.loader-sm {
  width: 24px;
  height: 24px;
}

.loader-md {
  width: 48px;
  height: 48px;
}

.loader-lg {
  width: 96px;
  height: 96px;
}

.loader-xl {
  width: 128px;
  height: 128px;
}

/* ===== LOADER POSITIONING ===== */

/* Center loader in container */
.loader-center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

/* Inline loader (next to text) */
.loader-inline {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}

/* Full-screen overlay loader */
.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 22, 34, 0.9); /* bg-primary with opacity */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* ===== STREAM STATUS INDICATORS ===== */

/* Container for stream status with loader */
.stream-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.stream-indicator .loader-sm {
  flex-shrink: 0;
}

/* Live stream indicator (pulsing) */
.stream-indicator-live {
  color: var(--color-success-light);
  font-weight: 600;
}

/* Offline stream indicator (static) */
.stream-indicator-offline {
  color: var(--text-tertiary);
  font-weight: 400;
}

/* Status badge with loader */
.status-badge-with-loader {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
}

.status-badge-with-loader.live {
  background: rgba(75, 139, 59, 0.15);
  border: 1px solid var(--color-success);
  color: var(--color-success-light);
}

.status-badge-with-loader.offline {
  background: rgba(107, 124, 135, 0.15);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
}

/* ===== HTMX LOADING INDICATORS ===== */

/* Hide loader by default */
.htmx-indicator {
  display: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

/* Show loader during HTMX request */
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-flex;
  opacity: 1;
}

/* Loading state wrapper */
.htmx-loading-wrapper {
  position: relative;
  min-height: 60px;
}

/* Centered HTMX loader */
.htmx-indicator-centered {
  display: none;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.htmx-request .htmx-indicator-centered {
  display: flex;
}

/* ===== UPLOAD PROCESSING LOADERS ===== */

/* Upload progress container */
.upload-loader-container {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--bg-elevated);
  border: 2px dashed var(--border-light);
  border-radius: var(--radius-md);
  margin: 1rem 0;
}

.upload-loader-container.active {
  display: flex;
}

.upload-loader-container .loader-md {
  margin-bottom: 1rem;
}

.upload-loader-text {
  color: var(--text-secondary);
  font-size: 0.875rem;
  text-align: center;
}

.upload-loader-text strong {
  color: var(--text-primary);
  display: block;
  margin-bottom: 0.25rem;
}

/* ===== BUTTON LOADERS ===== */

/* Loader in button (replaces text during action) */
.btn-with-loader {
  position: relative;
}

.btn-with-loader .btn-text {
  transition: opacity var(--transition-fast);
}

.btn-with-loader.loading .btn-text {
  opacity: 0;
}

.btn-with-loader .loader-inline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.btn-with-loader.loading .loader-inline {
  opacity: 1;
}

/* ===== SYNC OPERATION LOADERS ===== */

/* Sync button with loader */
.sync-button-wrapper {
  position: relative;
  display: inline-block;
}

.sync-loader {
  display: none;
  position: absolute;
  top: 50%;
  right: -40px;
  transform: translateY(-50%);
}

.sync-button-wrapper.syncing .sync-loader {
  display: block;
}

/* Sync status text */
.sync-status-text {
  display: inline-block;
  margin-left: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-style: italic;
}

/* ===== PAGE TRANSITION LOADERS ===== */

/* Full-page loader for navigation */
.page-loader {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--bg-elevated);
  z-index: 9998;
}

.page-loader-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--teal-500), var(--copper-500));
  width: 0;
  animation: pageLoadProgress 0.8s ease-out forwards;  /* Faster animation, ease-out for snappier feel */
}

@keyframes pageLoadProgress {
  0% { width: 0; }
  50% { width: 70%; }
  100% { width: 100%; opacity: 0; }  /* Fade out at end */
}

body.page-loading .page-loader {
  display: block;
}

/* ===== LOADER ANIMATIONS ===== */

/* Fade in loader */
@keyframes loaderFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.loader-fade-in {
  animation: loaderFadeIn var(--transition-base) ease-out;
}

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

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

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .htmx-indicator,
  .loader-fade-in {
    animation: none;
    transition: none;
  }
}

/* ===== RESPONSIVE SIZING ===== */

/* Adjust loader sizes on mobile */
@media (max-width: 768px) {
  .loader-lg {
    width: 64px;
    height: 64px;
  }

  .loader-xl {
    width: 96px;
    height: 96px;
  }

  .loader-center {
    min-height: 150px;
  }
}