/* components.css — Fase 0 "Redesain UI/UX Menyeluruh" (sisi staff & guest, murid dikecualikan).

   Pola-pola reusable dari referensi "Design System" yang belum ada sebagai komponen bersama
   di admin.css -- semuanya pakai var(--admin-*) dari tokens-admin.css (jadi otomatis ikut
   mode gelap), TIDAK mendefinisikan token warna sendiri. Di-load setelah admin.css (lihat
   layouts/admin.php & layouts/guest.php).

   Overlay (modal/sheet/dropdown) TIDAK ada di file ini: semuanya memakai satu komponen
   .admin-sheet di admin.css. */

/* ───────────────────────── Toast / Snackbar ─────────────────────────
   Feedback SEKALI-JALAN (auto-hilang) untuk aksi cepat: simpan/hapus/dsb berhasil.
   Beda dari .qb-alert/.neutral-alert yang statis di atas halaman -- toast ini muncul
   sebentar lalu hilang sendiri, tidak menggeser layout. Dipicu lewat showAdminToast()
   di components.js. Cuma 1 instance per halaman (#admin-toast, dirender sekali oleh
   showAdminToast() saat pertama dipanggil -- lihat components.js). */
.admin-toast {
    position: fixed;
    left: 50%;
    bottom: 84px; /* di atas bottom navbar mobile (.admin-bottomnav) -- lihat admin.css */
    transform: translateX(-50%) translateY(8px);
    width: calc(100% - 32px);
    max-width: 420px;
    background: var(--admin-text-primary);
    color: var(--admin-surface);
    border-radius: var(--admin-border-radius);
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-base);
    font-weight: 500;
    box-shadow: 0 10px 28px rgba(0,0,0,0.24);
    z-index: 1100; /* di atas .admin-sheet-backdrop (1000/1010) supaya toast tetap kelihatan di atas sheet */
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.admin-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.admin-toast__icon {
    width: 22px; height: 22px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.admin-toast__icon svg { width: 22px; height: 22px; }
.admin-toast__text { flex: 1; min-width: 0; }
.admin-toast__close { margin-left: auto; background: none; border: none; cursor: pointer; padding: 2px; flex-shrink: 0; line-height: 0; }
.admin-toast__close svg { width: 18px; height: 18px; }
@media (min-width: 1024px) { .admin-toast { bottom: 24px; } } /* desktop tidak punya bottom navbar */

/* ───────────────────────── Empty state ─────────────────────────
   Pengganti teks polos "Belum ada X" -- ikon + judul + deskripsi + (opsional) tombol aksi. */
.admin-empty {
    border: 1px dashed var(--admin-border);
    border-radius: var(--admin-border-radius);
    text-align: center;
    padding: 34px 20px;
}
.admin-empty svg { width: 36px; height: 36px; stroke: var(--admin-border); margin-bottom: 12px; }
.admin-empty__title { font-size: var(--text-lg); font-weight: 600; margin: 0 0 4px; }
.admin-empty__desc { font-size: var(--text-sm); color: var(--admin-text-secondary); margin: 0 0 16px; line-height: 1.5; }