/**
 * Skeleton Shimmer UI - FAANG Grade Loading Experience
 * Meta / YouTube inspired shimmering placeholders for tables, cards & stats
 * 
 * Line Limit: Strictly < 120 lines (Global Rule 3)
 * @version 1.0.0
 */

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

.kb-shimmer-active {
  background: linear-gradient(
    90deg,
    rgba(226, 232, 240, 0.6) 0%,
    rgba(241, 245, 249, 0.9) 50%,
    rgba(226, 232, 240, 0.6) 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: kbShimmerWave 1.6s ease-in-out infinite !important;
}

/* Dark Mode Adaptation */
.dark .kb-shimmer-active {
  background: linear-gradient(
    90deg,
    rgba(30, 41, 59, 0.7) 0%,
    rgba(51, 65, 85, 0.9) 50%,
    rgba(30, 41, 59, 0.7) 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: kbShimmerWave 1.6s ease-in-out infinite !important;
}

.skeleton-box {
  display: block;
  border-radius: 0.5rem;
  min-height: 0.875rem;
}

.skeleton-pill {
  display: inline-block;
  border-radius: 9999px;
  height: 1.25rem;
}

.skeleton-circle {
  display: inline-block;
  border-radius: 9999px;
  width: 2rem;
  height: 2rem;
}

/* Floating Offline Queue Radar Badge */
#offlineQueueBadge {
  position: fixed;
  bottom: 5rem;
  right: 1.25rem;
  z-index: 45;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 640px) {
  #offlineQueueBadge {
    bottom: 5.25rem;
    right: 0.75rem;
    left: 0.75rem;
  }
}