/* =============================================================================
 *  fitur-v16.css — PERBAIKAN TAMPILAN & FITUR v1.6
 *
 *  1. Tombol mengambang tidak bertumpuk & tidak menutupi isi halaman
 *  2. Menu "Main Game" (wali asrama, orang tua, pengelola)
 *  3. Unduh PDF hasil ujian (portal orang tua)
 *  4. Ujian Kosakata: kartu ujian bersama (buatan Admin), timer PG & isian
 *  5. Pengaturan → Jadwal Kegiatan: tombol ubah/hapus & kegiatan terhapus
 *  6. Perbaikan kecil tata letak lain
 *  Dimuat paling akhir di index.html (setelah fitur-v14.css).
 * ========================================================================== */

/* ---- 1. TOMBOL MENGAMBANG ---------------------------------------------------
   Dulu tombol "Asisten Data" (.ai-fab, 56px, right 20px, bottom 84px) dan tombol
   "+ Absensi" (#fab-absen, right 16px, bottom ±86px) menempati sudut yang sama di
   HP sehingga saling menumpuk; di tablet (768–1023px) tombol AI turun ke bottom
   24px dan menutupi tab bar bawah. Kini keduanya berjajar rapi di atas tab bar
   pada HP & tablet, dan isi halaman diberi ruang bawah secukupnya. */
@media screen and (max-width: 1023.98px) {
    .ai-fab {
        right: 16px !important;
        bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px)) !important;
        width: 48px !important; height: 48px !important;
    }
    .ai-fab svg { width: 21px; height: 21px; }
    body.ada-ai-fab #app-shell #fab-absen { right: calc(16px + 48px + 10px) !important; }
    #app-shell #fab-absen { height: 48px; }
    /* Ruang bawah isi halaman: tab bar (±70px) + tombol mengambang (48px) + jarak. */
    body.ada-ai-fab #content-area,
    body.ada-fab-absen #content-area { padding-bottom: calc(5.4rem + 48px + 28px + env(safe-area-inset-bottom, 0px)) !important; }
}
/* Ruang bawah juga untuk modal/lembar yang menempel ke bawah layar: tombol mengambang
   disembunyikan saat dialog atau laci asisten terbuka supaya tidak menutupi tombol aksi. */
body.modal-open #fab-absen, body:has(#modal-container > *:not(:empty)) #fab-absen,
body:has(.ai-drawer.is-open) #fab-absen { opacity: 0; pointer-events: none; }
@media print { .ai-fab { display: none !important; } }

/* ---- 2. MAIN GAME ----------------------------------------------------------- */
.v16-game { max-width: 1040px; margin: 0 auto; padding-bottom: 12px; }
.v16-game-kepala h2 { font-family: var(--font-display, inherit); font-size: 1.35rem; font-weight: 700; margin: 0; color: #0f172a; }
.v16-game-kepala p { margin: 4px 0 16px; font-size: 13px; line-height: 1.55; color: #475569; max-width: 760px; }
html.dark .v16-game-kepala h2 { color: #fff; }
html.dark .v16-game-kepala p { color: #94a3b8; }
.v16-game-kisi { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.v16-game-kartu {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 12px 14px; align-items: start;
    padding: 16px; border-radius: 18px; border: 1px solid rgb(226 232 240); background: #fff; box-shadow: 0 6px 20px -14px rgb(15 23 42 / .35);
}
html.dark .v16-game-kartu { background: #0f1a2b; border-color: #1e2a3f; }
.v16-game-ikon { width: 58px; height: 58px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 30px; background: #eff6ff; }
.v16-game-kartu[data-w="hijau"] .v16-game-ikon { background: #ecfdf5; }
.v16-game-kartu[data-w="emas"] .v16-game-ikon { background: #fffbeb; }
.v16-game-kartu[data-w="ungu"] .v16-game-ikon { background: #f5f3ff; }
html.dark .v16-game-ikon { background: rgb(59 130 246 / .15); }
html.dark .v16-game-kartu[data-w="hijau"] .v16-game-ikon { background: rgb(16 185 129 / .15); }
html.dark .v16-game-kartu[data-w="emas"] .v16-game-ikon { background: rgb(245 158 11 / .15); }
html.dark .v16-game-kartu[data-w="ungu"] .v16-game-ikon { background: rgb(139 92 246 / .16); }
.v16-game-isi h3 { margin: 2px 0 4px; font-size: 15px; font-weight: 800; color: #0f172a; }
.v16-game-isi p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #64748b; }
html.dark .v16-game-isi h3 { color: #f1f5f9; }
html.dark .v16-game-isi p { color: #94a3b8; }
.v16-game-main {
    grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; border-radius: 12px;
    background: rgb(var(--c-primary-600, 37 99 235)); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer;
}
.v16-game-main:hover { filter: brightness(1.06); }
.v16-game-main:disabled { opacity: .55; cursor: not-allowed; }
.v16-game-catatan { display: flex; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 14px; font-size: 12.5px; line-height: 1.55;
    background: #f8fafc; border: 1px dashed #cbd5e1; color: #475569; }
html.dark .v16-game-catatan { background: rgb(17 28 45 / .6); border-color: #24324a; color: #94a3b8; }
.v16-game-catatan i { margin-top: 3px; color: rgb(var(--c-primary-500, 59 130 246)); }

/* ---- 3. PDF HASIL UJIAN (portal orang tua) --------------------------------- */
.du-pdf {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 46px; min-height: 42px;
    border-radius: 11px; border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c; cursor: pointer; font: inherit;
}
.du-pdf i { font-size: 15px; }
.du-pdf span { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; }
.du-pdf:hover { background: #fee2e2; }
.du-pdf:disabled { opacity: .6; cursor: progress; }
html.dark .du-pdf { background: rgb(127 29 29 / .25); border-color: rgb(248 113 113 / .35); color: #fecaca; }

/* ---- 4. UJIAN KOSAKATA ------------------------------------------------------ */
.svx-kartu-bersama { border-style: dashed; }
.svx-bersama-dari { margin: -2px 0 8px; font-size: .74rem; font-weight: 700; color: #4338ca; display: flex; align-items: center; gap: 6px; }
html.dark .svx-bersama-dari { color: #a5b4fc; }
.svx-timer-tipe { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .74rem; font-weight: 700; }
.svx-timer-tipe .svx-sel { width: auto; min-height: 32px; font-size: .74rem; }

/* ---- 5. JADWAL KEGIATAN ----------------------------------------------------- */
.jk-baris { grid-template-columns: 1fr 1fr; grid-template-areas: "kunci aksi" "judul judul" "jam singkat"; }
.jk-aksi { grid-area: aksi; display: flex; gap: 6px; justify-self: end; align-self: center; }
@media (min-width: 900px) {
    .jk-baris { grid-template-columns: minmax(170px, 1.1fr) minmax(200px, 2fr) 130px 110px auto; grid-template-areas: "kunci judul jam singkat aksi"; }
    .jk-aksi { align-self: end; padding-bottom: 2px; }
}
.jk-ikon { width: 38px; height: 38px; min-height: 0; border-radius: 10px; border: 1px solid rgb(203 213 225); background: #fff; color: #334155;
    display: inline-flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; }
.jk-ikon:hover { background: #f1f5f9; }
.jk-ikon.is-bahaya { color: #dc2626; border-color: #fecaca; }
.jk-ikon.is-bahaya:hover { background: #fef2f2; }
html.dark .jk-ikon { background: #0f1a2b; border-color: #24324a; color: #cbd5e1; }
html.dark .jk-ikon.is-bahaya { color: #fca5a5; border-color: rgb(248 113 113 / .35); }
.jk-baris.is-nonaktif { opacity: .7; }
.jk-nonaktif { color: #d97706; font-weight: 700; }
.jk-terhapus { margin-top: 14px; padding: 12px 14px; border-radius: 14px; border: 1px dashed #cbd5e1; background: #f8fafc; }
html.dark .jk-terhapus { border-color: #24324a; background: rgb(17 28 45 / .5); }
.jk-terhapus summary { cursor: pointer; font-size: 13px; font-weight: 700; color: #475569; }
html.dark .jk-terhapus summary { color: #cbd5e1; }
.jk-terhapus > p { margin: 8px 0 10px; font-size: 12px; color: #64748b; }
.jk-terhapus-baris { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid #e2e8f0; }
html.dark .jk-terhapus-baris { border-color: #1e2a3f; }
.jk-terhapus-baris b { display: block; font-size: 13px; }
.jk-terhapus-baris small { display: block; font-size: 11px; color: #64748b; }
.svx-rincian { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.svx-rincian > div { padding: 10px 12px; border-radius: 12px; border: 1px solid rgb(226 232 240); background: rgb(248 250 252 / .7); min-width: 0; }
html.dark .svx-rincian > div { border-color: #1e2a3f; background: rgb(17 28 45 / .6); }
.svx-rincian span { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #64748b; margin-bottom: 3px; }
.svx-rincian b { display: block; font-size: .84rem; font-weight: 700; overflow-wrap: anywhere; }

/* ---- 6. PERBAIKAN TATA LETAK LAIN ------------------------------------------
   Input tanggal-jam (datetime-local/date/time) di dalam .svx-f (display:grid) punya
   lebar minimum bawaan ±220px, sehingga di kartu sempit (Ujian Cepat → Jadwal &
   penilaian, Ubah Jadwal) kolom "Selesai" meluber keluar kartu. */
.svx-f > .svx-in, .svx-f > .svx-sel, .svx-f > .svx-area { min-width: 0; max-width: 100%; }
.svx-baris > * { min-width: 0; }

/* ------------------------------------------------------------------ */
/* v1.6 — Game Santri → Puzzle Kuis (assets/js/puzzle-admin.js)        */
/* ------------------------------------------------------------------ */
.pz-adm { display: grid; gap: 14px; }
.pz-adm-stat { margin-top: 4px; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (min-width: 640px) { .pz-adm-stat { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
.pz-adm-stat > div { padding: 12px; border-radius: 14px; background: #f5f3ff; text-align: center; }
.pz-adm-stat b { display: block; font-size: 20px; font-weight: 800; color: #5b21b6; }
.pz-adm-stat small { display: block; font-size: 11px; color: #64748b; }
html.dark .pz-adm-stat > div { background: rgb(139 92 246 / .14); }
html.dark .pz-adm-stat b { color: #c4b5fd; }
.pz-adm-unggah { display: grid; gap: 12px; grid-template-columns: 1fr; margin-bottom: 14px; }
@media (min-width: 640px) { .pz-adm-unggah { grid-template-columns: 220px minmax(0, 1fr); align-items: end; } }
.pz-adm-pilih { display: block; cursor: pointer; }
.pz-adm-pilih > span { display: grid; place-items: center; gap: 4px; min-height: 140px; padding: 10px; border-radius: 14px; border: 2px dashed #c4b5fd; background: #faf5ff; color: #6d28d9; text-align: center; }
.pz-adm-pilih i { font-size: 26px; }
.pz-adm-pilih small { font-size: 11px; color: #64748b; }
.pz-adm-pilih img { max-width: 100%; max-height: 150px; border-radius: 10px; display: block; }
html.dark .pz-adm-pilih > span { background: #120d24; border-color: #4c1d95; color: #c4b5fd; }
.pz-adm-form { display: grid; gap: 10px; }
.pz-adm-kisi { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.pz-adm-gbr { display: grid; border-radius: 16px; overflow: hidden; border: 1px solid rgb(226 232 240); background: #fff; }
.pz-adm-gbr.mati { opacity: .6; }
.pz-adm-gbr img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #f1f5f9; }
.pz-adm-gbr-isi { display: grid; gap: 6px; padding: 10px; }
.pz-adm-gbr-isi small { font-size: 11px; color: #64748b; }
.pz-adm-gbr-aksi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pz-adm-gbr-aksi .gs-saklar { flex: 1 1 120px; padding: 6px 8px; }
html.dark .pz-adm-gbr { background: #0f1a2b; border-color: #1e2a3f; }

/* ------------------------------------------------------------------ */
/* v1.6 — Bilah "Simpan Data Absensi" (halaman Input Absensi)          */
/* Dulu: position:fixed + left 256px. Sidebar sebenarnya 268px (76px   */
/* saat diciutkan), bilah menutupi tab bar di HP/tablet, dan ikut      */
/* tergulir (melayang) bila #content-area ber-transform. Kini bilah    */
/* menempel (sticky) di dasar kolom isi, tepat di atas tab bar; pada   */
/* daftar pendek tetap berada di bawah layar (flex + margin-top:auto). */
/* ------------------------------------------------------------------ */
body.ada-bilah-simpan #content-area, #content-area:has(> .absen-wadah) { padding-bottom: 0 !important; }
.absen-wadah { display: flex; flex-direction: column; min-height: 100%; }
.absen-wadah > .absen-simpan {
    position: -webkit-sticky; position: sticky; z-index: 25; margin-top: auto !important;
    bottom: calc(var(--tinggi-tabbar, 0px) + 10px);
    padding: 10px; border-radius: 18px;
    background: rgb(255 255 255 / .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid rgb(15 23 42 / .08);
    box-shadow: 0 -10px 28px -16px rgb(27 22 56 / .38), 0 12px 26px -20px rgb(27 22 56 / .45);
}
html.dark .absen-wadah > .absen-simpan { background: rgb(12 19 33 / .92); border-color: rgb(255 255 255 / .08); }
.absen-wadah > .absen-simpan > button { min-height: 52px; padding-top: .85rem; padding-bottom: .85rem; }
/* Ruang di bawah bilah = tab bar + jarak, sehingga santri terakhir tidak pernah tertutup. */
.absen-wadah > .absen-simpan-ruang { flex: none; margin-top: 0 !important; height: calc(var(--tinggi-tabbar, 0px) + 10px + env(safe-area-inset-bottom, 0px) * 0); }
@media (min-width: 1024px) { .absen-wadah > .absen-simpan { bottom: 16px; } .absen-wadah > .absen-simpan-ruang { height: 16px; } }
/* Tombol "+ Absensi" tidak perlu di halaman absensi; tombol Asisten Data naik di atas bilah. */
body.ada-bilah-simpan #app-shell #fab-absen { display: none !important; }
body.ada-bilah-simpan .ai-fab { bottom: calc(var(--tinggi-tabbar, 0px) + var(--tinggi-bilah, 76px) + 22px) !important; }
@media print { .absen-simpan, .absen-simpan-ruang { display: none !important; } }