/* =====================================================================
   Skeleton loading — ใช้ร่วมทุกหน้าใน Teacher portal (กฎ Required loading state ใน AGENTS.md)
   ย้ายมาจาก CurriculumBuilderApp.astro เพื่อไม่ต้อง copy

   ทั้ง view : ใส่ .is-view-loading + aria-busy="true" ที่กล่องเนื้อหา
               เนื้อหาเดิมจางลง แล้วซ้อนการ์ดที่มีบล็อกเทา (หัวข้อ 2 เส้น + กล่อง 2 ชั้น) + แสงวิ่ง
   รายการ    : <div class="ui-skeleton-list" aria-hidden="true"><div class="ui-skeleton-row"></div>…</div>
   เวลา      : แสดงขั้นต่ำ ~220 ms, แสงวิ่งรอบละ 0.9 s
   สี        : token กลางเท่านั้น (ไม่ใช้สีแบรนด์)
   ===================================================================== */

.is-view-loading {
  position: relative;
  min-height: 360px;
}

.is-view-loading > * {
  opacity: 0.32;
  pointer-events: none;
}

.is-view-loading::after {
  content: "";
  position: absolute;
  z-index: 5;
  /* กันขอบเท่า padding ของกล่องเนื้อหา — หน้าแต่ละพอร์ทัลตั้ง --skeleton-inset เอง */
  inset: var(--skeleton-inset, 0);
  border-radius: 12px;
  /* บล็อกเทา (neutral-100) บนพื้นการ์ด — เห็นโครงหน้าชัด ไม่ดูเป็นพื้นที่ว่าง */
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent) -42% 0 / 42% 100% no-repeat,
    linear-gradient(var(--ci-neutral-100), var(--ci-neutral-100)) 24px 24px / 38% 22px no-repeat,
    linear-gradient(var(--ci-neutral-100), var(--ci-neutral-100)) 24px 62px / 24% 14px no-repeat,
    linear-gradient(var(--ci-neutral-100), var(--ci-neutral-100)) 24px 104px / calc(100% - 48px) 132px no-repeat,
    linear-gradient(var(--ci-neutral-100), var(--ci-neutral-100)) 24px 260px / calc(100% - 48px) 108px no-repeat,
    var(--ci-surface);
  box-shadow: inset 0 0 0 1px var(--ci-line);
  animation: ui-skeleton-view-shimmer 0.9s ease-in-out infinite;
  pointer-events: none;
}

.ui-skeleton-list {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.ui-skeleton-row {
  min-height: 72px;
  border: 1px solid var(--ci-line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent) -42% 0 / 42% 100% no-repeat,
    linear-gradient(var(--ci-neutral-100), var(--ci-neutral-100)) 16px 16px / 44px 40px no-repeat,
    linear-gradient(var(--ci-neutral-100), var(--ci-neutral-100)) 74px 18px / 42% 14px no-repeat,
    linear-gradient(var(--ci-neutral-100), var(--ci-neutral-100)) 74px 42px / 56% 12px no-repeat,
    var(--ci-surface);
  animation: ui-skeleton-row-shimmer 0.9s ease-in-out infinite;
}

@keyframes ui-skeleton-view-shimmer {
  to {
    background-position:
      142% 0,
      24px 24px,
      24px 62px,
      24px 104px,
      24px 260px,
      0 0;
  }
}

@keyframes ui-skeleton-row-shimmer {
  to {
    background-position:
      142% 0,
      16px 16px,
      74px 18px,
      74px 42px,
      0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-view-loading::after,
  .ui-skeleton-row {
    animation: none;
  }
}