/* 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).

   Prinsip fase ini: ADDITIVE saja -- nambah class baru, tidak mengubah/menghapus apa pun yang
   sudah dipakai halaman existing (mis. quiz-builder.css punya .qb-sheet sendiri; itu belum
   disatukan ke .admin-sheet di sini supaya Quiz Builder yang sudah jalan tidak berisiko
   regresi. Migrasinya menyusul di fase halaman-per-halaman). */

/* ───────────────────────── 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-modal-backdrop (1000) supaya toast tetap kelihatan sesudah modal ditutup */
    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: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--admin-success);
}
.admin-toast.error .admin-toast__icon { background: var(--admin-critical); }
.admin-toast__icon svg { width: 11px; height: 11px; stroke: #fff; }
.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: 14px; height: 14px; stroke: var(--admin-surface); opacity: .7; }
@media (min-width: 1024px) { .admin-toast { bottom: 24px; } } /* desktop tidak punya bottom navbar */

/* ───────────────────────── Skeleton loading ─────────────────────────
   Pengganti teks "Memuat data..." polos -- dipasang manual di markup (lihat contoh
   pemakaian di dokumentasi tim), bukan di-generate JS, karena bentuknya beda-beda tiap
   halaman (baris tabel vs kartu vs list). */
.admin-skeleton {
    background: linear-gradient(90deg, var(--admin-border) 25%, var(--admin-bg) 37%, var(--admin-border) 63%);
    background-size: 400% 100%;
    animation: admin-skeleton-shimmer 1.4s ease infinite;
    border-radius: 6px;
    flex-shrink: 0;
}
@keyframes admin-skeleton-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.admin-skeleton-row { display: flex; align-items: center; gap: 11px; padding: 12px 13px; }

/* ───────────────────────── 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; }

/* ───────────────────────── Bottom sheet generik ─────────────────────────
   Untuk menu aksi (mis. "Duplikat / Pindahkan / Hapus") dari sebuah item list, dipicu tombol
   "⋯" atau tekan-lama (lihat .admin-ctx-hint di bawah). Beda dari modal: nempel di bawah
   layar, cocok untuk aksi yang sifatnya "menu", bukan form. Dikontrol lewat
   openAdminSheet(id)/closeAdminSheet(id) di components.js -- BUKAN id tunggal hardcode
   seperti .qb-sheet di Quiz Builder, supaya 1 halaman bisa punya lebih dari 1 sheet. */
.admin-sheet-scrim {
    position: fixed; inset: 0; background: rgba(23,24,26,.45); z-index: 1050;
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.admin-sheet-scrim.show { opacity: 1; pointer-events: auto; }
.admin-sheet {
    position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 100%);
    width: 100%; max-width: 460px;
    background: var(--admin-surface);
    border-radius: 16px 16px 0 0;
    border: 1px solid var(--admin-border); border-bottom: none;
    z-index: 1051;
    padding: 8px 16px 24px;
    transition: transform .25s cubic-bezier(.32,.72,0,1);
}
.admin-sheet.show { transform: translate(-50%, 0); }
.admin-sheet-grabber { width: 34px; height: 4px; background: var(--admin-border); border-radius: 3px; margin: 8px auto 14px; }
.admin-sheet__title { font-size: var(--text-lg); font-weight: 600; margin: 0 0 10px; }
.admin-sheet-option {
    display: flex; align-items: center; gap: 12px; padding: 11px 6px; border-radius: 9px; cursor: pointer;
}
.admin-sheet-option:hover { background: var(--admin-hover); }
.admin-sheet-option__icon {
    width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--admin-neutral-soft);
}
.admin-sheet-option__icon svg { width: 17px; height: 17px; stroke: var(--admin-text-secondary); }
.admin-sheet-option__icon.danger { background: var(--admin-critical-soft); }
.admin-sheet-option__icon.danger svg { stroke: var(--admin-critical); }
.admin-sheet-option__title { font-size: var(--text-md); font-weight: 600; }
.admin-sheet-option__desc { font-size: var(--text-xs); color: var(--admin-text-secondary); margin-top: 1px; }

/* ───────────────────────── Context menu (tekan lama) ─────────────────────────
   Alternatif akses cepat aksi item list tanpa buka sheet -- tekan & tahan ~500ms
   (lihat initAdminContextMenu() di components.js). Taruh class "admin-ctx-hint" di elemen
   list-item yang mau diberi context menu, lalu panggil initAdminContextMenu(itemEl, menuEl). */
.admin-ctx-hint { -webkit-user-select: none; user-select: none; touch-action: pan-y; }
.admin-ctx-menu {
    position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px;
    background: var(--admin-surface); border: 1px solid var(--admin-border);
    border-radius: var(--admin-border-radius); box-shadow: 0 8px 20px rgba(20,20,20,.16);
    z-index: 20; overflow: hidden; display: none;
}
.admin-ctx-menu.show { display: block; }
.admin-ctx-item { display: flex; align-items: center; gap: 9px; padding: 10px 14px; font-size: var(--text-base); color: var(--admin-text-primary); cursor: pointer; }
.admin-ctx-item:hover { background: var(--admin-hover); }
.admin-ctx-item + .admin-ctx-item { border-top: 1px solid var(--admin-border); }
.admin-ctx-item.danger { color: var(--admin-critical); }
.admin-ctx-item svg { width: 15px; height: 15px; stroke: currentColor; flex-shrink: 0; }

/* ───────────────────────── Stepper angka ───────────────────────── */
.admin-stepper { display: inline-flex; align-items: center; border: 1px solid var(--admin-border); border-radius: var(--admin-border-radius); overflow: hidden; }
.admin-stepper button {
    width: 36px; height: 36px; background: var(--admin-surface); border: none;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    color: var(--admin-text-primary); flex-shrink: 0;
}
.admin-stepper button:hover { background: var(--admin-hover); }
.admin-stepper button:disabled { color: var(--admin-border); cursor: not-allowed; }
.admin-stepper button svg { width: 15px; height: 15px; stroke: currentColor; }
.admin-stepper input {
    width: 52px; text-align: center; border: none;
    border-left: 1px solid var(--admin-border); border-right: 1px solid var(--admin-border);
    font-family: var(--admin-font); font-size: var(--text-base); font-weight: 600;
    color: var(--admin-text-primary); background: var(--admin-surface);
    padding: 0 2px; height: 36px;
}
.admin-stepper input:focus { outline: none; }
/* Audit UI/UX: sama seperti .cp-hex-row -- indikator fokus dipindah ke wrapper
   supaya pengguna keyboard tetap lihat jejak fokus tanpa merusak bentuk stepper. */
.admin-stepper:focus-within { outline: 2px solid var(--admin-primary); outline-offset: 1px; }

/* ───────────────────────── Tooltip / popover ─────────────────────────
   Ganti tumpukan <p class="qb-field-hint"> di bawah tiap field dengan ikon info kecil --
   hint muncul saat ditekan (mobile-friendly, tidak butuh hover). */
.admin-tooltip-wrap { position: relative; display: inline-flex; align-items: center; }
.admin-tooltip-trigger {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--admin-neutral-soft); border: 1px solid var(--admin-border);
    display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; padding: 0;
}
.admin-tooltip-trigger svg { width: 11px; height: 11px; stroke: var(--admin-text-secondary); }
.admin-tooltip-bubble {
    position: absolute; bottom: calc(100% + 9px); left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--admin-text-primary); color: var(--admin-surface);
    font-size: var(--text-sm); line-height: 1.5; padding: 9px 11px;
    border-radius: 7px; width: 220px; box-shadow: 0 8px 20px rgba(0,0,0,.2); z-index: 15;
    opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease;
}
.admin-tooltip-bubble::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: var(--admin-text-primary);
}
.admin-tooltip-wrap.open .admin-tooltip-bubble { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* ───────────────────────── Search bar ───────────────────────── */
.admin-search-bar { position: relative; display: flex; align-items: center; }
.admin-search-bar__icon { position: absolute; left: 11px; width: 16px; height: 16px; stroke: var(--admin-text-secondary); pointer-events: none; }
.admin-search-bar input {
    width: 100%; font-family: var(--admin-font); font-size: var(--text-base); color: var(--admin-text-primary);
    background: var(--admin-surface); border: 1px solid var(--admin-border);
    border-radius: var(--admin-border-radius); padding: 10px 34px;
}
.admin-search-bar input:focus { outline: none; border-color: var(--admin-primary); }
/* Indikator fokus dipindah ke wrapper via :focus-within (pola sama dengan
   .cp-hex-row dan .admin-stepper) supaya konsisten dan cukup jelas untuk
   pengguna keyboard, bukan cuma perubahan border-color yang samar. */
.admin-search-bar:focus-within { outline: 2px solid var(--admin-primary); outline-offset: 1px; border-radius: var(--admin-border-radius); }
.admin-search-bar__clear {
    position: absolute; right: 7px; background: var(--admin-border); border: none;
    width: 19px; height: 19px; border-radius: 50%;
    display: none; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.admin-search-bar.has-value .admin-search-bar__clear { display: flex; }
.admin-search-bar__clear svg { width: 10px; height: 10px; stroke: var(--admin-surface); }

/* ───────────────────────── Segmented control ───────────────────────── */
.admin-segmented { display: flex; background: var(--admin-bg); border: 1px solid var(--admin-border); border-radius: var(--admin-border-radius); padding: 3px; gap: 2px; }
.admin-segment {
    flex: 1; text-align: center; padding: 8px 6px; font-size: var(--text-sm); font-weight: 500;
    color: var(--admin-text-secondary); background: none; border: none; border-radius: 6px; cursor: pointer;
    font-family: var(--admin-font);
}
.admin-segment.active { background: var(--admin-surface); color: var(--admin-text-primary); font-weight: 600; box-shadow: var(--admin-shadow-sm); }

/* ───────────────────────── Modal konfirmasi bergaya ikon ─────────────────────────
   Varian dari .admin-modal yang SUDAH ADA (admin.css) -- tambahkan class "admin-modal--confirm"
   di elemen .admin-modal yang sudah ada, isi .admin-modal-icon SEBELUM .admin-modal__title.
   Tidak menggantikan .admin-modal biasa/--form/--wide, cuma tambahan varian. */
.admin-modal--confirm { text-align: center; }
.admin-modal-icon {
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--space-3);
    background: var(--admin-critical-soft); color: var(--admin-critical);
}
.admin-modal-icon.info { background: var(--admin-info-soft); color: var(--admin-info-text); }
.admin-modal-icon svg { width: 21px; height: 21px; stroke: currentColor; }
.admin-modal--confirm .admin-modal__actions { justify-content: center; }
.admin-modal--confirm .admin-modal__actions .btn-admin { flex: 1; justify-content: center; }