/* ============================================================
   SKELETON LOADING

   ATURAN INTI: skeleton TIDAK BOLEH punya salinan angka.

   Versi sebelumnya memakai class tiruan (.sk-card, .sk-panel, .sk-row) yang
   padding/radius/kolom-grid-nya disalin tangan dari dashboard.css. Akibatnya
   sudah melenceng (padding .mc 16px disalin jadi 16px 18px, donat 160px jadi
   150px) dan akan melenceng lagi tiap kali CSS asli diubah — diam-diam, tanpa
   ada yang gagal.

   Sekarang skeleton memakai KERANGKA ASLI (.ds-card, .mc, .dd-card,
   .dash-charts-row, ...). Padding, radius, border, kolom grid, dan SEMUA
   breakpoint diwarisi. Karena itu file ini tidak lagi punya satu pun @media
   selain prefers-reduced-motion.

   Batang kilau adalah elemen teks aslinya sendiri:
       <div class="ds-label">Total Kekayaan</div>   <- asli
       <div class="ds-label sk">&nbsp;</div>        <- skeleton
   .ds-label menyumbang font-size + line-height + margin; &nbsp; membuat line
   box-nya nyata. Tingginya DITURUNKAN, bukan ditulis. Itu sebabnya tidak ada
   satu pun angka `height` di bawah (kecuali 100% yang berarti "ikut wadah").

   Loader di-nyalakan JS dengan display:flex INLINE, jadi .ldg tidak bisa
   dijadikan block lewat CSS. Skeleton karena itu jadi flex-child yang mengisi
   penuh (.sk-wrap{flex:1}).
   ============================================================ */

.ldg.ldg-skel{
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  min-height: 0;
}
.sk-wrap{ flex: 1; width: 100%; min-width: 0; }

/* ── Kilau ────────────────────────────────────────────────────
   Dipasang PADA elemen teks asli. Tidak menyetel tinggi — tinggi datang dari
   elemen itu sendiri. Lebar boleh disetel: ia tidak memengaruhi tinggi.
   Warna memakai token veil supaya light & dark ikut tema otomatis. */
.ldg-skel .sk{
  color: transparent !important;
  background: linear-gradient(90deg,
              var(--veil-1) 25%, var(--veil-3) 37%, var(--veil-1) 63%);
  background-size: 400% 100%;
  animation: skShimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
  max-width: var(--w, 60%);
}
/* Elemen inline (mis. .dd-debt-name adalah <span>) perlu jadi inline-block
   supaya kilaunya punya kotak. Line box-nya tetap dari font aslinya. */
.ldg-skel span.sk{ display: inline-block; width: var(--w, 60%); }
/* Kotak polos (donat, area chart, tombol mata) — bukan teks, jadi ia mengambil
   tinggi dari WADAH aslinya (mis. <div style="height:160px">). */
.ldg-skel .sk-fill{ width: 100%; height: 100%; max-width: none; }
.ldg-skel .sk-circle{ border-radius: 50%; max-width: none; }

@keyframes skShimmer{
  from{ background-position: 100% 0; }
  to  { background-position: -100% 0; }
}

/* ── Penetral ─────────────────────────────────────────────────
   Kerangka asli membawa serta hover, transition, shadow, dan cursor. Skeleton
   bukan sesuatu yang bisa disentuh — matikan. (3D tilt & animasi giliran sudah
   dimatikan di sisi JS lewat guard .ldg di entrance.js dan effects.js.) */
.ldg-skel *{ pointer-events: none; }
.ldg-skel .ds-card,
.ldg-skel .mc,
.ldg-skel .dc-card,
.ldg-skel .dd-card,
.ldg-skel .card{
  transition: none;
  box-shadow: none;
  transform: none;
  cursor: default;
}

/* ── Bar progres: gaya "Sweep" (pilihan user) ─────────────────
   Dipasang di dalam .dd-debt-bar yang ASLI, jadi tingginya 4px tanpa perlu
   ditulis di sini. Ini satu-satunya bar di app (baris hutang/kartu kredit di
   Dashboard) — Budget tidak punya progress bar, dia tabel. */
.ldg-skel .dd-debt-bar{ background: var(--veil-1); overflow: hidden; position: relative; }
.ldg-skel .dd-debt-bar::after{
  content: '';
  position: absolute; inset: 0;
  width: 38%;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--pu), transparent);
  opacity: .55;
  animation: skSweep 1.15s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes skSweep{
  from{ transform: translateX(-100%); }
  to  { transform: translateX(360%); }
}
/* Jangan serempak — kalau bareng semua, terlihat mekanis. */
.ldg-skel .dd-debt-item:nth-child(2) .dd-debt-bar::after{ animation-delay: .10s; }
.ldg-skel .dd-debt-item:nth-child(3) .dd-debt-bar::after{ animation-delay: .20s; }
.ldg-skel .dd-debt-item:nth-child(4) .dd-debt-bar::after{ animation-delay: .30s; }
.ldg-skel .dd-debt-item:nth-child(5) .dd-debt-bar::after{ animation-delay: .40s; }

/* Tanpa gerakan: bentuknya tetap ada (itu gunanya skeleton), kilaunya mati. */
@media (prefers-reduced-motion: reduce){
  .ldg-skel .sk{ animation: none; }
  .ldg-skel .dd-debt-bar::after{ animation: none; opacity: .3; }
}