/* ==========================================================================
   AIRH Loading Skeletons — Futuristic Neumorphism
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Shimmer Animation
   --------------------------------------------------------------------------- */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ---------------------------------------------------------------------------
   Base Skeleton — Neumorphic inset shimmer
   --------------------------------------------------------------------------- */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-primary) 25%,
    rgba(255,255,255,0.3) 50%,
    var(--color-bg-primary) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
  pointer-events: none;
  user-select: none;
  box-shadow: var(--neu-inset-sm);
}

/* ---------------------------------------------------------------------------
   Text Lines
   --------------------------------------------------------------------------- */
.skeleton--text { height: 14px; width: 100%; border-radius: var(--radius-sm); }
.skeleton--text-sm { height: 11px; width: 100%; border-radius: var(--radius-sm); }
.skeleton--text-lg { height: 18px; width: 100%; border-radius: var(--radius-sm); }
.skeleton--heading { height: 24px; width: 60%; border-radius: var(--radius-sm); }

/* Width variants */
.skeleton--w-full { width: 100%; }
.skeleton--w-3\/4 { width: 75%; }
.skeleton--w-2\/3 { width: 66.7%; }
.skeleton--w-1\/2 { width: 50%; }
.skeleton--w-1\/3 { width: 33.3%; }
.skeleton--w-1\/4 { width: 25%; }

/* ---------------------------------------------------------------------------
   Avatar Skeleton
   --------------------------------------------------------------------------- */
.skeleton--avatar { border-radius: var(--radius-full); flex-shrink: 0; }
.skeleton--avatar-xs { width: 24px; height: 24px; }
.skeleton--avatar-sm { width: 32px; height: 32px; }
.skeleton--avatar-md { width: 40px; height: 40px; }
.skeleton--avatar-lg { width: 56px; height: 56px; }
.skeleton--avatar-xl { width: 80px; height: 80px; }

/* ---------------------------------------------------------------------------
   Card Skeleton — Raised neumorphic
   --------------------------------------------------------------------------- */
.skeleton-card {
  background: var(--color-bg-primary);
  border: none;
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: var(--neu-raised);
}

.skeleton-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.skeleton-card__lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ---------------------------------------------------------------------------
   Table Row Skeleton
   --------------------------------------------------------------------------- */
.skeleton-table-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
}

.skeleton-table-row__cell { flex: 1; }
.skeleton-table-row__cell--sm { flex: 0 0 80px; }
.skeleton-table-row__cell--md { flex: 0 0 120px; }

/* ---------------------------------------------------------------------------
   Stat Card Skeleton — Raised neumorphic
   --------------------------------------------------------------------------- */
.skeleton-stat {
  background: var(--color-bg-primary);
  border: none;
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  box-shadow: var(--neu-raised);
}

.skeleton-stat__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ---------------------------------------------------------------------------
   List Skeleton
   --------------------------------------------------------------------------- */
.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.skeleton-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}

.skeleton-list__item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ---------------------------------------------------------------------------
   Image Skeleton
   --------------------------------------------------------------------------- */
.skeleton--image { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); }
.skeleton--image-square { aspect-ratio: 1 / 1; }

/* ---------------------------------------------------------------------------
   Button Skeleton
   --------------------------------------------------------------------------- */
.skeleton--button { height: 36px; width: 100px; border-radius: var(--radius-md); }
.skeleton--button-lg { height: 44px; width: 140px; border-radius: var(--radius-lg); }

/* ---------------------------------------------------------------------------
   Paragraph Skeleton
   --------------------------------------------------------------------------- */
.skeleton-paragraph {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.skeleton-paragraph > .skeleton:last-child { width: 60%; }