/* ==========================================================================
   Admin Bebas Mengajar — Polish Layer (Sep 2026)
   ==========================================================================
   FITUR: lapisan tambahan di atas style.css -- SAMA SEKALI TIDAK mengubah
   struktur/kelas yang sudah ada, murni menambahkan sentuhan halus (transisi,
   hover, skeleton loading, animasi masuk) yang SUDAH LEBIH DULU ada di
   aplikasi guru (public/css/ui-refresh-v5.css & redesign-v4.css) tapi belum
   sempat dibawa ke panel admin. Ditemukan saat diminta "buat tampilan
   seluruh aplikasi lebih enak dipandang" -- panel admin (dipakai sehari-hari
   untuk mengelola platform) justru yang paling tertinggal dibanding
   kecanggihan polish aplikasi guru.

   Filosofi SAMA PERSIS dengan ui-refresh-v5.css: aditif/progressive
   enhancement, dimuat PALING AKHIR (setelah style.css) supaya aman menimpa
   kalau perlu, dan MENGHORMATI prefers-reduced-motion di seluruh file.
   ========================================================================== */

/* ── 1. Kartu & stat-card: transisi halus + sedikit terangkat saat hover ── */
.card, .stat-card{
  transition:transform .2s cubic-bezier(.34,1.4,.64,1), box-shadow .2s ease;
}
.card:hover, .stat-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(23,18,43,.1), 0 2px 6px rgba(23,18,43,.06);
}
/* Kartu yang memang tidak dimaksudkan interaktif (mis. kartu status statis di dashboard
   pengawas dgn warna latar khusus) -- kalau ada di masa depan cukup tambah kelas ini utk
   menonaktifkan efek hover, tanpa perlu sentuh CSS di atas. */
.card.no-hover, .stat-card.no-hover{ transform:none !important; box-shadow:var(--shadow) !important; }

/* ── 2. Tombol: transisi lebih hidup, feedback tekan ─────────────────────── */
.btn{
  transition:transform .15s cubic-bezier(.34,1.4,.64,1), box-shadow .15s ease, background .15s ease, opacity .15s ease;
}
.btn:hover:not(:disabled){ box-shadow:0 4px 12px rgba(124,58,237,.22); }
.btn:active:not(:disabled){ transform:scale(.96); }
.btn.secondary:hover:not(:disabled){ box-shadow:0 2px 8px rgba(23,18,43,.08); }

/* ── 3. Navigasi sidebar: indikator aktif lebih jelas + ikon sedikit bergerak ── */
.nav a{ transition:background .18s ease, color .18s ease, border-color .18s ease; }
.nav a .icon{ display:inline-block; transition:transform .2s cubic-bezier(.34,1.4,.64,1); }
.nav a:hover .icon{ transform:scale(1.15); }
.nav a.active{ position:relative; }

/* ── 4. Baris tabel: transisi halus, bukan potongan warna kasar ──────────── */
tbody tr{ transition:background .15s ease; }

/* ── 5. Form input: ring fokus yang lebih hidup ──────────────────────────── */
input[type=text],input[type=email],input[type=password],input[type=date],input[type=tel],select,textarea{
  transition:border-color .18s ease, box-shadow .18s ease;
}

/* ── 6. Badge & chip: transisi masuk lembut kalau muncul dinamis lewat JS ── */
.badge, .chip-kode{ transition:background .15s ease, color .15s ease; }

/* ── 7. Skeleton loading -- dipakai saat data sedang diambil lewat fetch(),
   supaya tidak ada "kedipan kosong" tiba-tiba saat halaman dashboard/laporan
   memuat data. Kelas generik, tinggal ditambahkan lewat JS ke placeholder
   sebelum data asli masuk. Sama persis konvensi dgn public/css/main.css
   (.skeleton-bar/.skeleton-card) di app guru, supaya kalau developer terbiasa
   dgn salah satu, langsung paham yang lain. ─────────────────────────────── */
.skeleton-bar, .skeleton-card{
  background:linear-gradient(90deg, var(--border) 25%, #F8FAFC 50%, var(--border) 75%);
  background-size:200% 100%;
  border-radius:var(--radius-sm);
  animation:admSkeletonShimmer 1.5s infinite;
}
.skeleton-bar{ height:16px; margin-bottom:10px; }
.skeleton-bar.w-40{ width:40%; } .skeleton-bar.w-60{ width:60%; } .skeleton-bar.w-80{ width:80%; }
.skeleton-card{ height:120px; margin-top:14px; }
@keyframes admSkeletonShimmer{ to{ background-position:-200% 0; } }

/* ── 8. Animasi masuk halus untuk kartu statistik saat halaman pertama dimuat
   (bukan animasi berulang -- cuma sekali saat elemen pertama tampil) ─────── */
.stat-card{ animation:admCardIn .35s cubic-bezier(.22,1,.36,1) both; }
.stat-card:nth-child(2){ animation-delay:.04s; }
.stat-card:nth-child(3){ animation-delay:.08s; }
.stat-card:nth-child(4){ animation-delay:.12s; }
.stat-card:nth-child(5){ animation-delay:.16s; }
@keyframes admCardIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }

/* ── 9. Fokus keyboard yang lebih jelas (navigasi tanpa mouse) ───────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
  border-radius:6px;
}

/* ── 10. Target sentuh minimum 44×44px di layar kecil -- standar aksesibilitas
   yang sama dgn app guru (ui-refresh-v5.css bagian 5), supaya admin yang
   sesekali membuka panel dari HP tetap nyaman menekan tombol. ──────────────── */
@media (max-width:768px){
  .btn, .modal-close{ min-height:44px; }
}

/* ── 11. Modal: animasi masuk lembut, bukan muncul-mendadak ──────────────── */
.modal-overlay.open .modal{ animation:admModalIn .22s cubic-bezier(.22,1,.36,1) both; }
@keyframes admModalIn{ from{ opacity:0; transform:translateY(12px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }

/* ── 12. Hormati prefers-reduced-motion di SELURUH file ini -- prinsip yang
   sama dgn app guru: kenyamanan visual tidak boleh mengorbankan pengguna
   dengan sensitivitas gerak/vertigo. ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .card, .stat-card, .btn, .nav a .icon, .modal-overlay.open .modal, .skeleton-bar, .skeleton-card{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .card:hover, .stat-card:hover{ transform:none; }
}