/**
 * skeleton.css — Loading skeleton placeholders
 * ----------------------------------------------
 * Provides consistent perceived performance across all data-loading views.
 * Skeleton placeholders prevent layout jumps by occupying the same space
 * that real content will fill once loaded.
 *
 * Classes:
 *   .hf-skeleton           — Root container (hidden by default, visible when --active)
 *   .hf-skeleton--active   — Activates visibility and shimmer animation
 *   .hf-skeleton__line     — Single text-row placeholder
 *   .hf-skeleton__block    — Card/chart block placeholder
 *   .hf-skeleton--table    — Table-shaped skeleton variant
 *   .hf-skeleton--cards    — Card-grid skeleton variant
 *   .hf-skeleton--text     — Multi-line text skeleton variant
 *
 * Chunk 458: Loading skeletons v1
 */

/* ------------------------------------------------------------------ */
/* Shimmer keyframes                                                   */
/* ------------------------------------------------------------------ */
@keyframes hf-skeleton-shimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}

/* ------------------------------------------------------------------ */
/* Root container                                                      */
/* ------------------------------------------------------------------ */
.hf-skeleton {
  display: none;
  width: 100%;
  box-sizing: border-box;
}

.hf-skeleton--active {
  display: block;
}

/* ------------------------------------------------------------------ */
/* Shared shimmer base for all placeholder shapes                      */
/* ------------------------------------------------------------------ */
.hf-skeleton__line,
.hf-skeleton__block {
  background-color: #e9ecef;
  background-image: linear-gradient(
    90deg,
    #e9ecef 0%,
    #f4f5f7 40%,
    #e9ecef 80%
  );
  background-size: 800px 100%;
  background-repeat: no-repeat;
  animation: hf-skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: 4px;
}

/* ------------------------------------------------------------------ */
/* Line placeholder (text rows)                                        */
/* ------------------------------------------------------------------ */
.hf-skeleton__line {
  height: 14px;
  margin-bottom: 12px;
}

.hf-skeleton__line:last-child {
  margin-bottom: 0;
  width: 60%;
}

/* ------------------------------------------------------------------ */
/* Block placeholder (cards, charts)                                   */
/* ------------------------------------------------------------------ */
.hf-skeleton__block {
  height: 120px;
  margin-bottom: 16px;
}

.hf-skeleton__block:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Variant: table skeleton                                             */
/* ------------------------------------------------------------------ */
.hf-skeleton--table .hf-skeleton__line {
  height: 18px;
  margin-bottom: 10px;
}

.hf-skeleton--table .hf-skeleton__line:first-child {
  height: 22px;
  width: 100%;
  margin-bottom: 14px;
  opacity: 0.7;
}

.hf-skeleton--table .hf-skeleton__line:last-child {
  width: 80%;
}

/* ------------------------------------------------------------------ */
/* Variant: cards skeleton                                             */
/* ------------------------------------------------------------------ */
.hf-skeleton--cards {
  display: none;
}

.hf-skeleton--cards.hf-skeleton--active {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.hf-skeleton--cards .hf-skeleton__block {
  height: 140px;
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Variant: text skeleton                                              */
/* ------------------------------------------------------------------ */
.hf-skeleton--text .hf-skeleton__line {
  height: 12px;
  margin-bottom: 10px;
}

.hf-skeleton--text .hf-skeleton__line:nth-child(odd) {
  width: 90%;
}

.hf-skeleton--text .hf-skeleton__line:nth-child(even) {
  width: 75%;
}

/* ------------------------------------------------------------------ */
/* Accessibility: respect reduced motion preference                    */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hf-skeleton__line,
  .hf-skeleton__block {
    animation: none;
    background-image: none;
  }
}