/* =============================================================================
 *  fitur-santri.css — tambahan tampilan aplikasi pengelola untuk:
 *  dashboard nilai ujian bulanan, pengaturan jadwal kegiatan, pusat Game
 *  Santri (koin & tukar poin), dan Bank Soal Game (guru mapel).
 *  Mobile-first, mengikuti token warna aplikasi (--c-primary-*, html.dark).
 * ========================================================================== */

/* ------------------------------------------------ dashboard nilai ujian */
.du-pilih {
    min-height: 36px; padding: 6px 30px 6px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 600;
    border: 1px solid rgb(203 213 225); background: #fff; color: #0f172a; max-width: 100%;
}
html.dark .du-pilih { background: #111C2D; border-color: #24324A; color: #E2E8F0; }
.du-tabel-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid rgb(226 232 240); border-radius: 12px; }
html.dark .du-tabel-wrap { border-color: #1E2A3F; }
.du-tabel { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 280px; }
.du-tabel th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; color: #64748B; padding: 9px 10px; background: rgb(248 250 252); border-bottom: 1px solid rgb(226 232 240); white-space: nowrap; }
.du-tabel td { padding: 8px 10px; border-bottom: 1px solid rgb(241 245 249); white-space: nowrap; color: #334155; }
.du-tabel tr:last-child td { border-bottom: 0; }
html.dark .du-tabel th { background: #0F1A2B; color: #94A3B8; border-color: #1E2A3F; }
html.dark .du-tabel td { border-color: #18233A; color: #CBD5E1; }
.du-sm, .du-md { display: none; }
@media (min-width: 480px) { .du-sm { display: table-cell; } }
@media (min-width: 768px) { .du-md { display: table-cell; } }
@media (max-width: 380px) { .du-tabel th, .du-tabel td { padding: 7px 6px; } .du-tabel { min-width: 0; } }
.du-tahun-btn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid rgb(203 213 225); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #475569; background: #fff; }
.du-tahun-btn:disabled { opacity: .4; }
html.dark .du-tahun-btn { background: #111C2D; border-color: #24324A; color: #CBD5E1; }

/* ------------------------------------------------ jadwal kegiatan */
.jk-daftar { display: grid; gap: 10px; }
.jk-baris {
    display: grid; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid rgb(226 232 240); background: rgb(248 250 252 / .7);
    grid-template-columns: 1fr 1fr; grid-template-areas: "kunci kunci" "judul judul" "jam singkat";
}
html.dark .jk-baris { border-color: #1E2A3F; background: rgb(17 28 45 / .6); }
.jk-kunci { grid-area: kunci; display: flex; align-items: center; gap: 10px; min-width: 0; }
.jk-kunci b { display: block; font-size: 13px; }
.jk-kunci small { display: block; font-size: 11px; color: #64748B; }
.jk-no { width: 26px; height: 26px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
    background: rgb(var(--c-primary-50, 239 246 255)); color: rgb(var(--c-primary-700, 29 78 216)); }
html.dark .jk-no { background: rgb(var(--c-primary-900, 30 58 138) / .45); color: rgb(var(--c-primary-200, 191 219 254)); }
.jk-f { display: grid; gap: 4px; min-width: 0; }
.jk-f span { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #64748B; }
.jk-f input { width: 100%; min-height: 40px; padding: 8px 11px; border-radius: 10px; border: 1px solid rgb(203 213 225); background: #fff; font-size: 13px; font-weight: 600; color: #0f172a; }
html.dark .jk-f input { background: #0F1A2B; border-color: #24324A; color: #E2E8F0; color-scheme: dark; }
.jk-f input:focus { outline: 2px solid rgb(var(--c-primary-500, 59 130 246) / .45); outline-offset: 1px; }
.jk-f-judul { grid-area: judul; } .jk-f-jam { grid-area: jam; } .jk-f-singkat { grid-area: singkat; }
@media (min-width: 900px) {
    .jk-baris { grid-template-columns: minmax(170px, 1.1fr) minmax(200px, 2fr) 130px 110px; grid-template-areas: "kunci judul jam singkat"; align-items: end; }
}

/* ------------------------------------------------ Game Santri & Bank Soal Game (game-admin.js) */
.gs-wrap { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-bottom: 24px; }
.gs-wrap > * { min-width: 0; }
.gs-muat { display: flex; justify-content: center; gap: 6px; padding: 34px 0; }
.gs-muat span { width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--c-primary-500, 59 130 246)); animation: gs-titik 1s infinite ease-in-out; }
.gs-muat span:nth-child(2) { animation-delay: .15s; } .gs-muat span:nth-child(3) { animation-delay: .3s; }
@keyframes gs-titik { 0%, 80%, 100% { transform: scale(.55); opacity: .45; } 40% { transform: scale(1); opacity: 1; } }
.gs-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; border: 1px solid rgb(226 232 240); background: linear-gradient(120deg, rgb(var(--c-primary-50, 239 246 255)), #fff 60%); }
html.dark .gs-hero { border-color: #1E2A3F; background: linear-gradient(120deg, rgb(var(--c-primary-900, 30 58 138) / .35), #0F1A2B 60%); }
.gs-hero-ikon { width: 52px; height: 52px; flex: none; border-radius: 16px; background: #fff; border: 1px solid rgb(226 232 240); display: flex; align-items: center; justify-content: center; font-size: 26px; }
html.dark .gs-hero-ikon { background: #111C2D; border-color: #24324A; }
.gs-hero > .min-w-0 { flex: 1 1 260px; }
.gs-hero h1 { margin: 0; font-size: 20px; font-weight: 800; }
.gs-hero p { margin: 4px 0 0; font-size: 12.5px; color: #64748B; line-height: 1.55; }
.gs-aksi { display: flex; flex-wrap: wrap; gap: 8px; }
.gs-stat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .gs-stat { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gs-stat-kecil { gap: 8px; }
.gs-mini { padding: 10px 12px; border-radius: 12px; border: 1px solid rgb(226 232 240); background: rgb(248 250 252); }
html.dark .gs-mini { border-color: #1E2A3F; background: #0F1A2B; }
.gs-mini small { display: block; font-size: 11px; color: #64748B; font-weight: 600; }
.gs-mini b { display: block; font-size: 18px; font-weight: 800; margin-top: 2px; }
.gs-tab { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px; border-radius: 14px; background: rgb(241 245 249); border: 1px solid rgb(226 232 240); -webkit-overflow-scrolling: touch; }
.gs-tab::-webkit-scrollbar { display: none; }
html.dark .gs-tab { background: #0B1424; border-color: #1E2A3F; }
.gs-tab button { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 10px; border: 0; background: transparent; font-size: 12.5px; font-weight: 700; color: #475569; white-space: nowrap; }
html.dark .gs-tab button { color: #94A3B8; }
.gs-tab button[aria-selected="true"] { background: #fff; color: rgb(var(--c-primary-700, 29 78 216)); box-shadow: 0 4px 12px -8px rgba(15, 23, 42, .5); }
html.dark .gs-tab button[aria-selected="true"] { background: #111C2D; color: rgb(var(--c-primary-200, 191 219 254)); }
.gs-tab em { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #F43F5E; color: #fff; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.gs-tab-kecil { margin: 6px 0 12px; }
.gs-tab-kecil em { background: rgb(203 213 225); color: #334155; }
.gs-kartu { padding: 16px; border-radius: 18px; border: 1px solid rgb(226 232 240); background: #fff; min-width: 0; }
html.dark .gs-kartu { border-color: #1E2A3F; background: #0F1A2B; }
.gs-kartu-kepala { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.gs-kartu-kepala > .min-w-0 { flex: 1 1 240px; }
.gs-kartu-kepala h2 { margin: 0; font-size: 15px; font-weight: 800; }
.gs-kartu-kepala p { margin: 3px 0 0; font-size: 12px; color: #64748B; line-height: 1.55; }
.gs-saring { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 12px; align-items: end; }
@media (min-width: 640px) { .gs-saring { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
.gs-saring-tombol { display: flex; }
.gs-saring-tombol button { width: 100%; }
.gs-massal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.gs-centang-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; margin-right: auto; }
.gs-daftar { display: grid; gap: 8px; }
.gs-baris, .gs-soal, .gs-kartu-ut, .gs-guru { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid rgb(226 232 240); background: rgb(248 250 252 / .6); }
html.dark .gs-baris, html.dark .gs-soal, html.dark .gs-kartu-ut, html.dark .gs-guru { border-color: #1E2A3F; background: #0B1424; }
.gs-centang { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: rgb(var(--c-primary-600, 37 99 235)); }
.gs-centang-kosong { width: 18px; flex: none; }
.gs-baris-isi { flex: 1 1 220px; min-width: 0; display: grid; gap: 4px; }
.gs-baris-isi b, .gs-guru b { font-size: 13.5px; font-weight: 800; }
.gs-baris-isi small, .gs-guru small { font-size: 11.5px; color: #64748B; }
.gs-chip-baris { display: flex; flex-wrap: wrap; gap: 6px; }
.gs-catatan { font-style: italic; color: #64748B; font-size: 11.5px; }
.gs-baris-aksi { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.gs-tabel-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid rgb(226 232 240); border-radius: 12px; }
html.dark .gs-tabel-wrap { border-color: #1E2A3F; }
.gs-tabel { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 420px; }
.gs-tabel th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: #64748B; padding: 9px 10px; background: rgb(248 250 252); border-bottom: 1px solid rgb(226 232 240); }
.gs-tabel td { padding: 8px 10px; border-bottom: 1px solid rgb(241 245 249); vertical-align: top; }
.gs-tabel small { color: #64748B; }
html.dark .gs-tabel th { background: #0B1424; border-color: #1E2A3F; color: #94A3B8; }
html.dark .gs-tabel td { border-color: #18233A; }
.gs-tabel .kanan { text-align: right; } .gs-tabel .nowrap { white-space: nowrap; }
.gs-plus { color: #059669; font-weight: 800; } .gs-minus { color: #E11D48; font-weight: 800; }
.gs-sm { display: none; } @media (min-width: 560px) { .gs-sm { display: table-cell; } }
.gs-form { display: grid; gap: 12px; }
.gs-grid2, .gs-grid3 { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .gs-grid2 { grid-template-columns: 1fr 1fr; } .gs-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gs-saklar { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 10px 12px; border-radius: 12px; border: 1px solid rgb(226 232 240); background: rgb(248 250 252 / .6); }
html.dark .gs-saklar { border-color: #1E2A3F; background: #0B1424; }
.gs-saklar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gs-saklar-ui { flex: none; position: relative; width: 40px; height: 23px; border-radius: 999px; background: rgb(203 213 225); transition: background .15s; margin-top: 1px; }
.gs-saklar-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.gs-saklar input:checked + .gs-saklar-ui { background: rgb(var(--c-primary-600, 37 99 235)); }
.gs-saklar input:checked + .gs-saklar-ui::after { transform: translateX(17px); }
.gs-saklar input:focus-visible + .gs-saklar-ui { outline: 2px solid rgb(var(--c-primary-500, 59 130 246)); outline-offset: 2px; }
.gs-saklar b { display: block; font-size: 13px; font-weight: 700; }
.gs-saklar small { display: block; font-size: 11.5px; color: #64748B; line-height: 1.45; margin-top: 2px; }
.gs-hari { display: flex; flex-wrap: wrap; gap: 6px; }
.gs-hari label { position: relative; cursor: pointer; }
.gs-hari input { position: absolute; opacity: 0; }
.gs-hari span { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 12px; border-radius: 10px; border: 1px solid rgb(203 213 225); font-size: 12px; font-weight: 700; color: #475569; background: #fff; }
html.dark .gs-hari span { background: #111C2D; border-color: #24324A; color: #CBD5E1; }
.gs-hari input:checked + span { background: rgb(var(--c-primary-50, 239 246 255)); border-color: rgb(var(--c-primary-400, 96 165 250)); color: rgb(var(--c-primary-700, 29 78 216)); }
html.dark .gs-hari input:checked + span { background: rgb(var(--c-primary-900, 30 58 138) / .45); color: rgb(var(--c-primary-200, 191 219 254)); }
.gs-hari input:focus-visible + span { outline: 2px solid rgb(var(--c-primary-500, 59 130 246)); }
.gs-info { font-size: 12px; color: #64748B; line-height: 1.55; margin: 0; }
.gs-simpan { display: flex; justify-content: flex-end; }
.gs-simpan button { min-width: 220px; }
@media (max-width: 639px) { .gs-simpan button { width: 100%; } }
.gs-sub { font-size: 12.5px; font-weight: 800; margin: 0 0 6px; }
.gs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.gs-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; padding: 7px 10px; border-radius: 10px; background: rgb(248 250 252); font-size: 12.5px; }
html.dark .gs-list li { background: #0B1424; }
.gs-list small { color: #64748B; }
.gs-opsi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.gs-opsi span { padding: 4px 10px; border-radius: 8px; font-size: 12px; border: 1px solid rgb(226 232 240); background: #fff; }
html.dark .gs-opsi span { background: #111C2D; border-color: #24324A; }
.gs-opsi span.benar { border-color: #86EFAC; background: #F0FDF4; color: #166534; font-weight: 700; }
html.dark .gs-opsi span.benar { background: rgba(22, 101, 52, .25); color: #86EFAC; border-color: #166534; }
.gs-langkah { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.gs-langkah.naik { background: #DCFCE7; color: #166534; } .gs-langkah.turun { background: #FFE4E6; color: #BE123C; }
.gs-kartu-ut { align-items: center; font-size: 13px; }
.gs-tumpuk { display: grid; gap: 8px; }
.gs-opsi-isi { display: flex; align-items: center; gap: 8px; }
.gs-opsi-isi input[type=radio] { width: 18px; height: 18px; flex: none; accent-color: #16A34A; }
.gs-x { flex: none; width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgb(254 205 211); background: #FFF1F2; color: #E11D48; }
.gs-link { border: 0; background: none; color: rgb(var(--c-primary-600, 37 99 235)); font-size: 12.5px; font-weight: 700; padding: 4px 0; }
.gs-arab { font-family: "Noto Naskh Arabic", "Traditional Arabic", "Amiri", serif; font-size: 1.2em; line-height: 1.7; }
.gs-mapel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.gs-mapel { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid rgb(226 232 240); background: #fff; text-align: left; transition: border-color .15s, box-shadow .15s; }
html.dark .gs-mapel { background: #0F1A2B; border-color: #1E2A3F; }
.gs-mapel.aktif { border-color: rgb(var(--c-primary-500, 59 130 246)); box-shadow: 0 6px 16px -10px rgb(var(--c-primary-500, 59 130 246) / .8); }
.gs-mapel.mati { opacity: .6; }
.gs-mapel b { display: block; font-size: 13px; font-weight: 800; }
.gs-mapel small { display: block; font-size: 11px; color: #64748B; }
.gs-mapel-ikon { width: 36px; height: 36px; flex: none; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; color: #0f172a;
    background: #E0F2FE; background: color-mix(in srgb, var(--w, #3EF2FF) 30%, #fff); border: 1px solid #BAE6FD; border-color: color-mix(in srgb, var(--w, #3EF2FF) 55%, #fff); }
.gs-soal.mati { opacity: .65; }
.gs-soal-tanya { margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.55; }
.gs-soal > .min-w-0 { flex: 1 1 240px; }
.gs-hal { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; font-size: 12.5px; font-weight: 700; }
.gs-impor-ringkas { padding: 10px 12px; border-radius: 12px; background: #F0FDF4; border: 1px solid #BBF7D0; color: #166534; font-size: 12.5px; margin-bottom: 8px; }
.gs-guru { display: grid; gap: 8px; }
.gs-guru .gs-hari { margin: 2px 0; }
.gs-guru > button { justify-self: end; }

/* ===== Game Catur & Username (v1.3) — Admin ===== */
.ct-tumpuk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.ct-tumpuk > * { min-width: 0; }
.ct-barang { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgb(226 232 240); background: rgb(248 250 252); }
html.dark .ct-barang { border-color: #1E2A3F; background: #0B1424; }
.ct-barang.mati { opacity: .62; }
.ct-barang-gbr { width: 56px; height: 56px; flex: none; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 30px; line-height: 1;
  background: radial-gradient(circle at 50% 30%, #fff 0%, #e2e8f0 100%); border: 1px solid rgb(226 232 240); }
html.dark .ct-barang-gbr { background: radial-gradient(circle at 50% 30%, #23324a 0%, #0f172a 100%); border-color: #24324A; }
.ct-barang-gbr img, .ct-barang-besar img, .ct-ikon-pratinjau img { width: 100%; height: 100%; object-fit: contain; }
.ct-barang-besar, .ct-ikon-pratinjau { width: 120px; height: 120px; margin: 0 auto; border-radius: 22px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 56px;
  background: radial-gradient(circle at 50% 30%, #fff 0%, #e2e8f0 100%); border: 1px solid rgb(226 232 240); }
html.dark .ct-barang-besar, html.dark .ct-ikon-pratinjau { background: radial-gradient(circle at 50% 30%, #23324a 0%, #0f172a 100%); border-color: #24324A; }
.ct-ikon-pratinjau { border-radius: 50%; }
.ct-un { font-weight: 700; color: rgb(var(--c-primary-600, 37 99 235)); font-size: 12px; }
html.dark .ct-un { color: rgb(var(--c-primary-300, 147 197 253)); }
.ct-langkah { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 12.5px; line-height: 1.55; color: #475569; }
html.dark .ct-langkah { color: #CBD5E1; }
.ct-tabel-level { min-width: 520px; }
.ct-tabel-level td { vertical-align: middle; }
.ct-tabel-level .ct-angka { width: 96px; padding: 6px 9px; }
.ct-tabel-level tr.ct-bos td { background: rgb(254 243 199 / .45); }
html.dark .ct-tabel-level tr.ct-bos td { background: rgb(120 53 15 / .22); }