/*
* skeleton-loader.css
* CSS style declarations for skeleton loading states and GPU-accelerated shimmering animations
* Located in assets/css/pages/
******************************************************************************/

/* Global Container-Based Loading States (Card & Table Skeletons) */
.card.is-loading *,
.table-responsive.is-loading *,
.table.is-loading * {
  pointer-events: none !important;
}

@keyframes shimmer-gpu {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    transform: translate3d(100%, 0, 0);
  }
}

/* Card Skeleton Styles (Non-destructive: Instant rendering, No fade) */
.card:not(.is-loading) {
  transition: none !important;
}

/* Card Transitions (Instant without fade) */
.card {
  transition: none !important;
}

/* ==========================================================================
   Smooth Table Loading Overlay (Instant, Zero Fade, Zero Flicker)
   ========================================================================== */
.table-responsive {
  position: relative;
  transition: none !important;
}

.table-responsive.table-loading {
  pointer-events: none;
}

.table-responsive.table-loading tbody {
  opacity: 1 !important;
  pointer-events: none !important;
  transition: none !important;
}

.table-responsive.table-loading::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 3px !important;
  background: linear-gradient(90deg, #ff5b1e 0%, #ff9f43 50%, #ff5b1e 100%) !important;
  background-size: 200% 100% !important;
  animation: table-loading-pulse 1.2s infinite linear !important;
  z-index: 20 !important;
}

@keyframes table-loading-pulse {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Flexible Proportional Table Loading Container (Matches 6-8 table rows height) */
.table-loading-proportional {
  min-height: 320px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2.5rem 1rem !important;
}

.skeleton-text {
  display: inline-block;
  height: 1em;
  background: linear-gradient(90deg, 
    var(--skeleton-bg-color) 25%, 
    var(--skeleton-shine-color) 50%, 
    var(--skeleton-bg-color) 75%
  );
  background-size: 200% 100%;
  border-radius: 4px;
  animation: shimmer-skeleton 1.5s infinite linear;
  color: transparent !important;
  pointer-events: none;
}

.skeleton-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  background: linear-gradient(90deg, 
    var(--skeleton-bg-color) 25%, 
    var(--skeleton-shine-color) 50%, 
    var(--skeleton-bg-color) 75%
  );
  background-size: 200% 100%;
  border-radius: 0.375rem;
  animation: shimmer-skeleton 1.5s infinite linear;
  border: none;
  color: transparent !important;
  pointer-events: none;
}

.skeleton-avatar {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(90deg, 
    var(--skeleton-bg-color) 25%, 
    var(--skeleton-shine-color) 50%, 
    var(--skeleton-bg-color) 75%
  );
  background-size: 200% 100%;
  animation: shimmer-skeleton 1.5s infinite linear;
  pointer-events: none;
}

.skeleton-block {
  display: block;
  width: 100%;
  background: linear-gradient(90deg, 
    var(--skeleton-bg-color) 25%, 
    var(--skeleton-shine-color) 50%, 
    var(--skeleton-bg-color) 75%
  );
  background-size: 200% 100%;
  border-radius: 6px;
  animation: shimmer-skeleton 1.5s infinite linear;
  pointer-events: none;
}

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