<!-- ================================================================
     Miss Fish Bali LMS
     File        : MissFishLMS_v2.144.html
     Description : Rilis v2.144 — Food & Beverage jadi departemen payung.

                   Menyertai Utils.gs v1.1: pola Employee ID MF+4digit
                   dihapus karena ID di lapangan ternyata bermacam-macam
                   (BYUS013, MF001, dll) dan user tidak bisa ditambahkan
                   sama sekali.

                   Placeholder "e.g. MF0113" menyesatkan karena
                   menyiratkan hanya format itu yang diterima. Diganti
                   jadi "e.g. MF0113 / BYUS013" supaya terlihat bahwa
                   awalan lain memang boleh.

                   TIDAK ADA validasi Employee ID di sisi browser sama
                   sekali (sudah dicek: nol hasil) — jadi tidak ada
                   aturan tandingan yang perlu ikut diubah di sini.
                   Pesan "Format Employee ID harus MF0001–MF9999" yang
                   kak Wi lihat itu datang dari SERVER, dan itulah yang
                   diperbaiki di Utils.gs.

                   Riwayat v2.138 — tombol Reset Password oleh Admin.

                   Pola yang SAMA PERSIS dengan v2.137: mesinnya sudah
                   ada di server sejak lama, yang tidak ada cuma
                   tombolnya. resetPassword() ada di Auth.gs baris 553,
                   tapi dipanggil dari HTML sebanyak NOL kali.

                   Ini sudah dua kali dalam satu hari (Nonaktifkan, lalu
                   Reset Password) -- pertanda ada fungsi backend lain
                   yang mungkin juga belum punya tombol. Layak diaudit
                   terpisah, dicatat di STATUS.md.

                   YANG DILAKUKAN SERVER (tidak diubah sama sekali):
                   - Dijaga PERM.MANAGE_USERS (IT Admin & HRM)
                   - HRM DILARANG mereset password IT_ADMIN -- tanpa ini
                     HRM bisa reset password IT Admin lalu login memakai
                     password default yang polanya diketahui umum
                     (privilege escalation). Penjagaan bagus yang sudah
                     ada sejak v2.118 A5.
                   - Password dikembalikan ke getDefaultPassword():
                     [Employee ID]@MF[tahun]
                   - force_pw_change di-set TRUE, jadi user WAJIB
                     menggantinya saat login berikutnya
                   - Mengembalikan tempPassword supaya admin bisa
                     menyampaikannya

                   PASSWORD SEMENTARA DITAMPILKAN DI MODAL, BUKAN TOAST.
                   Toast hilang beberapa detik; kak Wi butuh membacanya
                   untuk disampaikan ke orangnya. Modal bertahan sampai
                   ditutup sendiri.
                   Pesannya ditulis mengalir satu paragraf karena modal
                   memakai textContent -- baris baru tidak terender jadi
                   pindah baris.

                   TOMBOL DISEMBUNYIKAN untuk user INACTIVE: mereset
                   password orang yang memang tidak bisa login sama
                   sekali tidak ada gunanya, cuma menambah tombol.
                   Untuk diri sendiri tetap DITAMPILKAN -- mereset
                   password sendiri itu sah dan tidak berbahaya (kak Wi
                   tahu rumus defaultnya, dan tetap diminta ganti saat
                   login). Beda dengan Nonaktifkan yang bisa mengunci
                   diri sendiri secara permanen.

                   Cara menambahkannya sama seperti v2.137: MURNI
                   MENAMBAH, tombol di-append ke rangkaian yang sudah
                   jadi. Nol baris logika lama dihapus.

                   Riwayat v2.137 — tombol Nonaktifkan / Aktifkan user.

                   Kak Wi minta fitur hapus user, lalu memilih opsi A:
                   "biar history orang tersebut masi ada, ya jangan ada
                   delete." Jadi TIDAK ada hapus permanen di rilis ini.

                   TERNYATA MESINNYA SUDAH ADA, TINGGAL SAKLARNYA:
                   - editUser() sudah menerima data.status ACTIVE/INACTIVE
                   - login() menolak user INACTIVE (Auth.gs ~126)
                   - validateSession() mematikan sesi yang sedang jalan
                     (Auth.gs ~446, "if (status !== 'ACTIVE')")
                   - Reports v1.9 sudah mengecualikan non-ACTIVE dari
                     hitungan penyelesaian per departemen
                   - kartu statistik "Inactive" sudah ada di layar
                   Yang tidak ada hanya tombolnya. Rilis ini menambah
                   tombol itu -- NOL perubahan di file .gs.

                   PENGAMAN: tombol TIDAK PERNAH muncul untuk diri
                   sendiri. Tanpa ini, kak Wi (satu-satunya IT Super
                   Admin) bisa menonaktifkan akunnya sendiri dan langsung
                   terkunci: login ditolak DAN sesi yang sedang berjalan
                   ikut mati. Pemulihannya harus lewat mengedit sheet
                   Users kolom H kembali ke ACTIVE secara manual.
                   CATATAN JUJUR: penjagaan ini ada di SISI BROWSER.
                   editUser() di server tidak punya penjaga "tidak boleh
                   mengubah diri sendiri". Untuk saat ini itu cukup,
                   karena satu-satunya jalan dari UI menuju status
                   INACTIVE adalah tombol ini (modal Edit tidak punya
                   field status sama sekali). Penjaga sisi server bisa
                   ditambahkan terpisah kalau kak Wi mau.

                   User berstatus LOCKED sengaja TIDAK diberi tombol ini
                   -- buka kuncinya dulu, jangan menumpuk dua keadaan
                   yang berbeda artinya (LOCKED = terkunci sementara,
                   INACTIVE = sudah tidak dipakai).

                   Cara menambahkannya sengaja MURNI MENAMBAH: tombol
                   di-append ke rangkaian tombol yang sudah jadi, bukan
                   dengan menulis ulang ternary lama yang penuh inline
                   style. Nol baris logika lama dihapus.

                   Riwayat v2.136 — "General" tidak lagi bisa dipilih
                   sebagai departemen user.

                   Permintaan kak Wi 28 Aug: "saya maunya department
                   General ga bisa dipilih di add / edit user."

                   Logikanya memang TERBALIK sejak v2.128:
                       if (mode === 'course' && d === 'General') return;
                   'General' disembunyikan di menu COURSE (karena di situ
                   sudah diwakili opsi sihir di baris pertama), tapi
                   MUNCUL di menu USER. Padahal justru menu User yang
                   tidak boleh menampilkannya.

                   Alasannya bukan selera: 'General' adalah CAKUPAN
                   COURSE ("berlaku untuk semua staff"), bukan tempat
                   orang bekerja. Tidak ada staff yang benar-benar
                   "berdepartemen General". Membiarkannya bisa dipilih
                   membuka peluang user diberi departemen yang sebenarnya
                   penanda sistem.

                   Sekarang disembunyikan di KEDUA mode:
                       if (d === 'General') return;
                   - mode 'course' : tetap tampil SEKALI lewat opsi
                     "★ General — SEMUA DEPARTEMEN" (nilai 'General').
                     Nol perubahan perilaku.
                   - mode 'user'   : hilang. Tersisa 13 departemen nyata.

                   CATATAN: kalau suatu saat ada user yang kolom
                   departemennya terlanjur berisi 'General' (diisi manual
                   lewat sheet), membuka Edit untuk user itu menampilkan
                   "— Select —" karena pilihannya sudah tidak ada, dan
                   menyimpan tanpa memilih ulang akan MENGUBAH
                   departemennya. Per 28 Agustus tidak ada user seperti
                   itu (6 user: IT, HR, kosong, Kitchen, Service,
                   Kitchen) -- dicatat supaya tidak mengagetkan nanti.

                   Riwayat v2.135 — daftar cadangan 14 departemen + label
                   opsi "semua departemen" diperjelas.

                   Kak Wi merapikan sheet Departments (28 Aug):
                   "General & Admin" diringkas jadi "GA" (DEPT13), dan
                   "General" DIKEMBALIKAN sebagai departemen tersendiri
                   (DEPT14) untuk general training. Jadi 14 baris.

                   Susunan ini justru MENYELESAIKAN jebakan yang dicatat
                   di v2.134. Dulu ada dua baris berbeda yang terbaca
                   mirip ("General (All Dept)" vs "General & Admin") dan
                   nilainya berbeda -- salah pilih membuat course diam-
                   diam berhenti sampai ke semua staff.
                   Sekarang kata "General" hanya muncul SATU kali dan
                   nilainya memang 'General' -- nilai sihir yang sudah
                   dikenali logika penugasan. Tidak ada lagi pasangan
                   yang bisa tertukar.

                   _fillDeptSelect() sudah melewati 'General' saat mode
                   'course' (baris "if (mode === 'course' && d ===
                   'General') return;"), jadi di menu Course kata itu
                   tampil sekali saja lewat opsi sihirnya -- tidak
                   terduplikasi. Di menu User, 'General' tampil sebagai
                   departemen biasa, dan itu memang benar.

                   LABEL DIKEMBALIKAN MEMUAT KATA "General":
                   v2.134 memakai "★ SEMUA DEPARTEMEN" saja, karena saat
                   itu kata General perlu disembunyikan supaya tidak
                   tertukar dengan "General & Admin". Sekarang pasangan
                   itu sudah tidak ada, dan kak Wi justru memikirkannya
                   sebagai departemen General. Menyembunyikan namanya
                   malah membuat opsinya sulit dicari. Labelnya jadi
                   "★ General — SEMUA DEPARTEMEN": menyebut namanya
                   sekaligus menegaskan akibatnya.
                   NILAI di belakangnya tetap 'General', tidak disentuh.

                   Riwayat v2.134 — dropdown departemen akhirnya benar-benar
                   mengikuti sheet Departments.

                   BUG YANG DIPERBAIKI (kelalaian saya di v2.128).
                   Kak Wi mengganti isi sheet Departments, tapi dropdown
                   tetap menampilkan daftar lama walau sudah logout-login.
                   Penyebabnya: openUserModal() menjalankan dua hal
                   berurutan --
                     _fillDeptSelect(...)  isi SEKARANG dari _DEPTS
                     _refreshDepts()       ambil dari server (asinkron)
                   Pengambilan dari server BERHASIL, tapi hasilnya cuma
                   disimpan ke variabel _DEPTS. Dropdown yang sudah
                   terlanjur terbuka TIDAK PERNAH diisi ulang. Karena
                   pengambilan cuma sekali per sesi dan setiap reload
                   selalu mulai dari daftar cadangan, yang terlihat
                   selamanya daftar cadangan -- berapa kali pun login.
                   Sekarang handler sukses ikut mengisi ulang dropdown
                   yang sedang terbuka. _fillDeptSelect mempertahankan
                   nilai terpilih, jadi mode Edit tidak kehilangan
                   pilihan. Kalau departemen user ternyata sudah tidak
                   ada di daftar baru, pilihan itu memang GUGUR -- itu
                   perilaku yang benar, jangan sampai nama departemen
                   yang tidak ada ikut tersimpan.

                   DAFTAR CADANGAN diperbarui ke 13 nama per 28 Agustus.
                   Cadangan hanya terlihat sepersekian detik sebelum
                   server menjawab, dan jadi penyelamat kalau pengambilan
                   gagal -- jadi isinya harus tetap benar.

                   LABEL "General" DIPERJELAS. Kak Wi mengganti nama
                   departemen General menjadi "General & Admin". Padahal
                   kata 'General' DITANAM SEBAGAI TEKS MATI di logika
                   penugasan course (Courses.gs baris 94 & 155,
                   CourseManager.gs baris 136 & 1003) -- course
                   berdepartemen 'General' otomatis milik SEMUA orang.
                   Begitu dropdown membaca sheet, menu Course akan
                   menampilkan dua pilihan yang mirip tapi perilakunya
                   berbeda total: "General (All Dept)" (sihirnya di sini)
                   dan "General & Admin" (departemen biasa). Salah pilih
                   = course diam-diam berhenti sampai ke semua staff,
                   tanpa error apa pun.
                   Karena itu labelnya diubah jadi "* SEMUA DEPARTEMEN"
                   supaya mustahil tertukar. NILAI di belakangnya tetap
                   'General' -- TIDAK disentuh, jadi semua course lama
                   tetap berperilaku sama persis.
                   Keempat baris hardcode 'General' di file .gs SENGAJA
                   TIDAK diubah: itu mengubah perilaku course yang sudah
                   berjalan, dan keputusannya ada di kak Wi.

                   Riwayat v2.133 — paket aksesibilitas (5 perbaikan).
                   Hasil audit SOP AnabhiDev v1.7 terhadap file ini.
                   Semua perbaikan MENAMBAH, nol baris logika dihapus.

                   1. KONTRAS LABEL TAB AKTIF (yang paling penting).
                      .bnav-label aktif memakai var(--gold) #C9A065 pada
                      font-size 10px. Di atas latar nav #F7F7F5,
                      kontrasnya 2,25:1 -- jauh di bawah ambang WCAG
                      4,5:1 untuk teks normal. Label yang TIDAK aktif
                      (#4A4A49) justru 8,27:1. Jadi tab yang seharusnya
                      paling menonjol malah paling sulit dibaca, 3,7x
                      lebih rendah dari tetangganya.
                      Ditambah token BARU --gold-text (#8A6A1F, 4,70:1)
                      khusus teks kecil di atas latar terang. --gold
                      TIDAK diubah -- itu warna brand yang dipakai
                      tombol Resume, progress bar, dan aksen sertifikat.
                      Mengikuti SOP kategori 13 rule 13-5 (MANDATORY):
                      warna aksen wajib punya varian terpisah, bukan
                      dipakai sama di semua latar.

                   2. :focus-visible. Sebelumnya nol. Pengguna keyboard
                      tidak bisa melihat elemen mana yang sedang fokus
                      karena outline bawaan browser sering kontrasnya
                      di bawah 3:1 di atas latar berwarna.

                   3. aria-current="page" pada tab/menu aktif. Kelas
                      .active hanya dimengerti mata; screen reader tidak
                      punya cara tahu halaman mana yang sedang dibuka.

                   4. Esc menutup modal. Sebelumnya Esc HANYA menutup
                      mode fokus PDF. Ketujuh modal desktop (Add User,
                      Course, Assign, Modules, Confirm, Quiz Questions,
                      Quiz Import) tidak bisa ditutup dengan keyboard
                      sama sekali -- harus klik tombol X.
                      Dibuat satu handler global supaya tidak perlu
                      menyentuh 7 fungsi close terpisah.
                      Sasarannya SENGAJA dipersempit ke .modal-overlay:
                      ada elemen lain yang juga memakai kelas .show
                      (toast, overlay PDF, panel) dan itu TIDAK boleh
                      ikut tertutup oleh Esc.
                      Urutan prioritas mengikuti SOP kategori 14: kalau
                      mode fokus PDF sedang aktif, handler lama yang
                      menangani -- handler ini mundur.
                      Catatan: ketujuh modal ini semuanya desktop, dan
                      memang di situ Esc relevan (HP tidak punya Esc).

                   5. alt pada 2 <img> di template sertifikat.
                      CATATAN JUJUR: sertifikat dirender jadi bitmap
                      oleh html2canvas sebelum masuk PDF, jadi alt di
                      sini TIDAK PERNAH dibaca screen reader. Nilainya
                      nol secara fungsional -- dikerjakan hanya supaya
                      hasil audit bersih, bukan karena memperbaiki
                      sesuatu yang nyata.

                   Riwayat v2.132 — warna bottom nav sedikit lebih gelap.
                   Permintaan kak Wi: setelah v2.131 nav sudah menyatu
                   dengan pita di bawahnya, tapi putih polos terasa
                   terlalu rata. Diminta sedikit lebih gelap seperti
                   sebelumnya.
                   BATASNYA: pita di bawah nav TIDAK BISA dicat oleh
                   halaman (LMS berjalan di dalam iframe HtmlService,
                   lihat catatan v2.131) dan warnanya PUTIH. Setiap
                   warna nav yang lebih gelap dari putih akan
                   memunculkan kembali garis batas di antara keduanya
                   -- makin gelap, makin kelihatan.
                   Dipilih var(--gray-50) = #F7F7F5, hanya ~3% lebih
                   gelap dari putih: cukup untuk memberi kesan nav
                   sebagai bidang tersendiri, tapi bedanya terhadap
                   pita putih masih nyaris tak terlihat. Garis atas
                   dinaikkan ke var(--gray-300) supaya batas ATAS nav
                   yang menegaskan bentuknya, bukan warna latarnya.
                   Ini praktis batas maksimum. Lebih gelap dari ini
                   dan masalah "mengambang" akan kembali.

                   Riwayat v2.131 — bottom nav menyatu + stat Profile benar.
                   BOTTOM NAV: setelah 5 percobaan gagal, penyebabnya
                   akhirnya jelas dan BUKAN CSS. LMS berjalan di dalam
                   IFRAME HtmlService (script.google.com/macros/...).
                   Di dalam iframe, env(safe-area-inset-*) SELALU 0 dan
                   viewport TIDAK PERNAH mencakup area gesture bar HP.
                   Jadi ada pita di bawah nav yang MUSTAHIL dicat oleh
                   halaman -- yang terlihat di situ adalah latar
                   halaman induk, yaitu putih. Selama nav berwarna abu
                   (#BFBFBE di v2.125, tint 6% di v2.126-v2.130), pita
                   putih itu terlihat sebagai batas, dan nav tampak
                   seperti balok mengambang.
                   App pembanding kak Wi (MFB-IT Daily Activity) bisa
                   karena dilayani langsung dari anabhidev.com sebagai
                   halaman tingkat atas, bukan iframe.
                   Karena pita itu tidak bisa dicat, satu-satunya jalan
                   adalah MENYAMAKAN warnanya: latar nav dibuat PUTIH
                   solid supaya menyatu dengan pita tersebut dan
                   batasnya hilang. backdrop-filter dibuang -- tidak
                   ada gunanya di atas warna solid.
                   STAT MY PROFILE: Dashboard menampilkan 3 Courses
                   sementara My Profile menampilkan 1, untuk user dan
                   waktu yang SAMA (dilaporkan kak Wi). Penyebabnya
                   sama persis dengan bug yang sudah diperbaiki di
                   Dashboard, tapi di tempat KETIGA: loadProfile()
                   memakai getProgress() -- yang hanya berisi course
                   yang SUDAH DIBUKA -- sedangkan Dashboard sudah
                   memakai definisi "course yang DITUGASKAN".
                   Sekarang Profile memakai getMyDashboard(), sumber
                   yang SAMA dengan Dashboard, jadi angkanya dijamin
                   identik. Bonus: dari DUA panggilan server
                   (getProgress + getCertificates) jadi SATU.

                   Riwayat v2.130 — sertifikat tetap A4, ruang kosong hilang.
                   Kak Wi mengonfirmasi sertifikat SERING DICETAK ke
                   kertas A4, jadi halaman PDF dikembalikan ke A4
                   landscape (v2.129 sempat memakai halaman seukuran
                   isi -- rapi di layar, tapi memaksa printer
                   menskalakan saat dicetak).
                   Ruang kosong di bawah diatasi dengan cara lain:
                   tinggi isi DIUKUR setelah salinan terpasang, lalu
                   kekurangannya menuju rasio A4 landscape (1060 /
                   1,4142 = 750px) DIBAGI RATA jadi padding atas dan
                   bawah. Hasilnya isi berada tepat di tengah halaman
                   dan tidak ada sisa ruang di bawah.
                   Bedanya dengan v2.127: v2.127 memakai
                   minHeight 750px TANPA mengukur isi, jadi isi tetap
                   menempel ke atas dan sisa ruangnya menumpuk di
                   bawah. Sekarang diukur, bukan ditebak.

                   Riwayat v2.129 — sertifikat PDF & format tanggal.
                   SERTIFIKAT: v2.127 memakai tinggi minimum 750px
                   supaya rasionya mendekati A4 landscape. Ternyata
                   masih menyisakan ruang kosong di bawah halaman —
                   pendekatan itu MENEBAK tinggi isi. Sekarang tidak
                   menebak lagi: tinggi salinan DIUKUR setelah
                   dipasang (offsetHeight), lalu ukuran halaman PDF
                   dibuat persis sebesar itu. Ruang kosong jadi
                   mustahil, berapa pun panjang isi sertifikat.
                   Konsekuensi disengaja: halamannya bukan A4 lagi,
                   melainkan seukuran sertifikat. Kalau dicetak ke
                   kertas A4, printer akan menskalakan otomatis dan
                   hasilnya tetap proporsional.
                   TANGGAL: kartu Certificates menampilkan
                   "Valid until: Sat Aug 14 2027 00:00:00 GMT+0800
                   (Waktu Indonesia Tengah)" — nilai Date mentah.
                   Ditambah _fmtTanggalPanjang() yang mengubahnya jadi
                   "14 August 2027", seragam dengan tanggal terbit di
                   sebelahnya. Kalau nilainya tidak bisa dibaca
                   sebagai tanggal, ditampilkan apa adanya (tidak
                   pernah jadi "Invalid Date").

                   Riwayat v2.128 — daftar departemen diambil dari sheet
                   Departments, bukan di-hardcode.
                   MASALAH: daftar departemen di-hardcode di TIGA
                   tempat (baris ~3380 modal user, ~3431 modal course,
                   ~9262 var _DEPTS untuk penugasan course), dan
                   isinya TERNYATA BERBEDA dari sheet Departments:
                   8 nama di HTML vs 13 di sheet; 4 nama di HTML
                   (Front of House, Finance, HR & People, Operations)
                   TIDAK ADA di sheet sama sekali; dan 8 departemen
                   nyata hilang (Service, Bar, Pastry, Stewarding,
                   Front Office, Housekeeping, Accounting, Purchasing).
                   Akibatnya user bisa diberi departemen yang tidak
                   ada di master — penugasan course per-DEPT untuk
                   dia tidak akan pernah cocok.
                   PERBAIKAN: kedua <select> dikosongkan dari opsi
                   hardcode dan diisi JavaScript dari _DEPTS.
                   _DEPTS sekarang berisi 13 nama yang BENAR sebagai
                   cadangan, lalu disegarkan dari server lewat
                   getDepartments() (Users.gs v1.4).
                   PENTING soal kecepatan: pengambilan dilakukan
                   SEKALI per sesi dan TIDAK memblokir apa pun.
                   Select langsung terisi dari _DEPTS (instan, sudah
                   benar), pengambilan berjalan di belakang untuk
                   dipakai berikutnya. Sengaja TIDAK ditaruh di
                   login() — membaca satu sheet di GAS ~400 ms, dan
                   itu akan menambah waktu tunggu staff setiap login
                   demi data yang cuma dipakai admin.

                   Riwayat v2.127 — AKAR MASALAH bottom nav akhirnya
                   ketemu, plus sertifikat PDF dirapikan.
                   BOTTOM NAV: v2.125 dan v2.126 dua-duanya gagal
                   karena memperbaiki GEJALA, bukan sebabnya. Tag
                   viewport LMS tidak punya viewport-fit=cover,
                   sehingga SETIAP env(safe-area-inset-*) yang
                   ditulis di v2.125/v2.126 bernilai NOL — tidak
                   pernah berpengaruh sama sekali. Lebih penting
                   lagi: tanpa viewport-fit=cover, viewport TIDAK
                   mencakup area gesture bar, jadi halaman tidak
                   bisa mengecat di sana. Warna atau tinggi nav apa
                   pun tidak akan pernah menutupnya — yang terlihat
                   adalah latar browser (putih). Ditemukan dengan
                   membandingkan baris-per-baris ke MFB-IT_v2.11.html
                   (app IT Daily Activity) yang dirujuk kak Wi, dan
                   memang punya viewport-fit=cover.
                   Konsekuensi: begitu viewport-fit dipasang, area
                   status bar di ATAS juga masuk viewport. Maka
                   .inner-topbar dan halaman login mobile ikut diberi
                   env(safe-area-inset-top) — kalau tidak, isinya
                   akan tertutup status bar. Tinggi topbar dihitung
                   calc(60px + safe-area) supaya padding benar-benar
                   MENAMBAH tinggi, bukan menyempitkan isi dari dalam
                   (box-sizing: border-box berlaku global).
                   SERTIFIKAT PDF: v2.126 sudah memperbaiki pergeseran
                   dan tepi terpotong. Sisanya rasio: sertifikat
                   1060x~700 (1,51) tidak sama dengan A4 landscape
                   (1,414), jadi ada ruang kosong di bawah halaman.
                   Tinggi minimum salinan dipatok 750px (1060/1,4142)
                   supaya isinya mengisi halaman dan ornamen sudut
                   bawah jatuh tepat di sudut kertas.

                   Riwayat v2.126 — bottom nav mobile + sertifikat PDF.
                   BOTTOM NAV: celah/pita abu di bawah nav akhirnya
                   hilang. Akar masalahnya BUKAN cuma safe-area:
                   nav memakai height TETAP (68px) DAN
                   align-items:center, sehingga ikon terkumpul di
                   tengah kotak 68px itu dan menyisakan pita abu
                   kosong di bawahnya. v2.125 sudah menambah
                   safe-area ke height, tapi pita itu tetap ada.
                   Sekarang mengikuti pola app MFB-IT Daily Activity
                   (v2.11) yang navnya sudah benar: TANPA height
                   tetap sama sekali — tinggi ditentukan isi +
                   padding, dan padding-bottom safe-area otomatis
                   memanjangkan nav sampai dasar layar. Latar juga
                   diganti dari abu solid #BFBFBE menjadi tint
                   transparan + backdrop blur, persis pola app itu,
                   supaya nav menyatu dengan halaman dan tidak
                   terlihat seperti balok terpisah yang mengambang.
                   SERTIFIKAT PDF: hasil unduhan tergeser ke kanan
                   dan tepi kirinya terpotong (tanda tangan Training
                   Manager hilang). Penyebabnya opsi html2canvas
                   windowWidth:1060 yang memaksa SELURUH halaman
                   ditata ulang pada lebar 1060px — di lebar itu
                   kerangka aplikasi (sidebar dsb) masih ikut dan
                   menggeser posisi sertifikat, sehingga hasil
                   tangkapannya ikut bergeser. Sekarang sertifikat
                   DISALIN ke panggung bersih di luar layout
                   aplikasi, berukuran tepat 1060px, lalu panggung
                   itu yang ditangkap. windowWidth tidak lagi
                   diperlukan dan dihapus. Panggung selalu dibersihkan
                   setelah selesai maupun saat gagal.
                   Bukan @media print: PDF dibuat html2pdf.js
                   (html2canvas + jsPDF), bukan cetak browser, jadi
                   aturan @media print tidak berpengaruh sama sekali.

                   Riwayat v2.125 — Phase F (satu round-trip) + 3 bug fix.
                   PHASE F: login() kini dipanggil dengan parameter
                   ketiga true, sehingga server sekalian mengembalikan
                   data dashboard di field .dashboard. Client memakai
                   data itu langsung, TIDAK memanggil getDashboardStats
                   atau getMyDashboard lagi. Dasarnya pengukuran 27 Aug:
                   tiap round-trip google.script.run menanggung
                   ~3.100 ms overhead DI LUAR waktu eksekusi server,
                   jauh melebihi kerja servernya sendiri (~741 ms).
                   Menghapus satu round-trip menghemat ~3.100 ms
                   sekaligus menghilangkan "2x loading" yang dilaporkan.
                   Aman: kalau data prefetch tidak ada atau gagal,
                   client jatuh kembali ke pola lama (panggil dashboard
                   terpisah). Butuh Auth_v1.5.gs; dengan Auth lama
                   parameter ketiga diabaikan dan alurnya tetap normal.
                   Role HoD dan Observer sengaja tetap 2 round-trip.
                   BUG 1 - celah di bawah bottom nav (mobile): height
                   68px dengan box-sizing border-box membuat
                   padding-bottom env(safe-area-inset-bottom) TIDAK
                   menambah tinggi, hanya menyempitkan isi, sehingga
                   area gesture bar tidak tertutup nav. Tinggi kini
                   dihitung calc(--bottomnav + safe-area) dan padding
                   bawah .scroll-content ikut menghitung safe-area.
                   BUG 2 - teks hitam di My Profile saat dark mode:
                   .mob-form-label dan .mob-form-select memakai
                   color var(--black), padahal body.dark-mode hanya
                   me-remap --white dan --gray-*, tidak --black.
                   Ditambah override dark untuk keduanya, plus class
                   baru prof-info-row / prof-info-label /
                   prof-info-value / prof-section-title di
                   loadProfile() supaya baris info bisa di-override.
                   BUG 3 - sisa min-height 100vh tanpa pasangan
                   100dvh di #mob #m-login (.m-page sudah diperbaiki
                   sejak Gelombang 1, yang ini terlewat).
                   Tombol Start/Resume TIDAK diubah - logika
                   pct === 0 ? 'Start' : 'Resume' memang sudah benar.
     HtmlService · Google Apps Script · Google Sheets
     IT Department · Miss Fish Bali
     Version     : 2.144
     Generated   : 2 September 2026, 20:01:53 WITA

     v2.144 — "Food & Beverage" jadi DEPARTEMEN PAYUNG.

     Kak Wi menambah DEPT15 "Food & Beverage" di sheet Departments,
     dengan maksud: itu WADAH TRAINING, bukan tempat orang bekerja.
     Tidak ada staff yang berdepartemen "Food & Beverage" — mereka
     bekerja di Kitchen, di Bar, atau di Service. Satu training F&B
     harus mengenai ketiganya sekaligus.

     Dua perubahan, dan sengaja dipisah tanggung jawabnya:

     1. DI SINI (tampilan saja): 'Food & Beverage' disembunyikan dari
        dropdown Add/Edit USER, TAPI TETAP ADA di dropdown Course.
        Ini bedanya dengan 'General' yang hilang dari kedua menu:
        F&B justru HARUS bisa dipilih saat membuat course — itulah
        gunanya.

     2. DI SERVER (yang menentukan): Utils.gs v1.3 memegang daftar
        DEPT_PAYUNG dan fungsi deptCocok(). Lima titik pencocokan
        departemen di empat berkas (Courses, Reports x3, PdfContent)
        sekarang memanggilnya.

     Pembagian itu disengaja. Kalau _DEPT_PAYUNG_UI di berkas ini
     sempat berbeda dari DEPT_PAYUNG di Utils.gs, akibatnya cuma satu
     nama tampil/tidak tampil di dropdown — BUKAN salah hitung siapa
     menerima course apa. Keputusan itu tidak boleh ditentukan dari
     sisi browser.

     v2.143 — REFRESH HALAMAN HEMAT SATU ROUND-TRIP.

     Phase F (v2.125) menghapus round-trip ganda di jalur LOGIN, tapi
     jalur RESTORE terlewat. Setiap kali staff me-refresh halaman —
     atau membuka lagi tab yang sesinya masih hidup — pola lamanya
     kembali utuh:
         restoreSession() -> validateSession()   ~3,9 detik
         goTo(halaman)    -> loadDashboard()     ~3,9 detik
     Pengukuran 27 Agustus: overhead murni tiap panggilan
     google.script.run ~3.100-3.900 ms, DI LUAR waktu kerja server.

     Sekarang restoreSession() meminta data dashboard ikut dikirim di
     round-trip yang sama, memakai mekanisme _takePrefetchedDash()
     yang SUDAH ADA sejak Phase F -- loadEmployeeDashboard() dan
     loadAdminDashboard() tidak disentuh sama sekali.

     PENTING -- prefetch TIDAK selalu diminta. Hanya kalau:
       (a) role-nya admin atau employee, DAN
       (b) halaman tujuannya memang dashboard.
     restoreSession() bisa mendarat di halaman lain lewat
     lms_last_page (courses, profile, reports, ...). Kalau prefetch
     tetap diminta di kasus itu, server menghitung dashboard 2-3
     detik yang hasilnya DIBUANG -- restore malah jadi LEBIH LAMBAT.
     Ini pelajaran yang sama dengan alasan Phase F sengaja tidak
     mem-prefetch role HoD dan Observer.

     Aman dideploy sendirian, dua arah: HTML ini + Auth.gs lama ->
     field `dashboard` tidak ada -> null -> pola dua round-trip
     seperti biasa. Auth.gs baru + HTML lama -> parameter tidak
     dikirim -> tidak ada prefetch.

     v2.142 — KEBOCORAN DATA ANTAR-USER. Bug ini lahir dari v2.140,
     jadi umurnya cuma beberapa jam dan belum sempat mengenai siapa
     pun -- tapi kalau lolos ke trial besok, akibatnya bukan sekadar
     tampilan yang salah.

     signOut() sudah memanggil sessionStorage.clear(), tapi cache
     MEMORI yang ditambahkan v2.140 (_coursesCache, _certsCache,
     _cacheWaktu) TIDAK ikut dibersihkan. Aplikasi ini SPA: sign out
     tidak me-reload halaman, hanya menukar tampilan ke layar login.
     Jadi isi cache milik orang SEBELUMNYA tetap hidup di memori.

     Skenario nyatanya sederhana dan justru mungkin terjadi saat
     trial: satu HP dipakai bergantian. Staff A sign out, staff B
     login dalam 60 detik, membuka My Courses -- router melihat
     cache masih "segar" dan menggambar DAFTAR COURSE MILIK STAFF A,
     lengkap dengan progresnya, tanpa memanggil server sama sekali.

     Sekarang _cacheBatal() dipanggil di signOut(), berbarengan
     dengan pembersihan _lmsUser dan sessionStorage -- satu tempat,
     supaya tidak mungkin lagi ada yang ikut tertinggal.

     v2.141 (Phase M) — TOMBOL IMPORT USER MASSAL.
     importUsersFromSheet() sudah ada dan sudah batch sejak v1.2, tapi
     TIDAK PERNAH punya pemanggil di UI -- nol. Fungsi matang yang
     tidak bisa disentuh siapa pun. Menambah 110 staff satu per satu
     lewat Add User = 110 modal, 110 kali round-trip ~3-4 detik.

     Alurnya SENGAJA meniru Import Quiz yang sudah ada (2 langkah:
     Preview -> Konfirmasi), bukan bikin gaya baru: admin yang sudah
     paham satu, otomatis paham yang lain.

     Preview KERING -- previewUserImport() tidak menulis apa pun.
     Angka yang tampil dihitung dengan aturan yang SAMA PERSIS dengan
     yang dipakai saat menyimpan, jadi bukan perkiraan.

     Saat konfirmasi, server MEMBACA ULANG sheet sumber (tidak memakai
     hasil preview yang disimpan client). Alasannya sama dengan
     Import Quiz: sheet bisa berubah di antara preview dan konfirmasi,
     dan yang boleh menentukan apa yang masuk database adalah isi
     sheet saat commit -- bukan salinan lama di browser.

     v2.140 (Phase K) — dua perubahan, keduanya di sisi tampilan saja.
     TIDAK ada angka laporan, logika progress, quiz, sertifikat, atau
     autentikasi yang disentuh.

     1. FIELD EMPLOYEE ID DIKUNCI SAAT MODE EDIT.
        Sebelumnya field itu tampak bisa diketik saat Edit User, padahal
        editUser() di server DIAM-DIAM MENGABAIKANNYA — kolom user_id
        justru yang dipakai untuk MENEMUKAN barisnya. Jadi admin bisa
        mengetik ID baru, menekan Save, melihat "berhasil", lalu
        mendapati ID-nya tidak berubah. Itu bukan sekadar tidak
        berfungsi; itu MEMBOHONGI orang yang memakainya. Sudah terjadi
        pada kak Wi 31 Agustus (MF0042 -> BYUS004).
        Sekarang: readonly + abu-abu + keterangan sebabnya. Saat mode
        Add User, field tetap normal seperti biasa.

     2. ROUTER TIDAK LAGI MEMANGGIL SERVER UNTUK DATA YANG BARU SAJA
        DIAMBIL.
        _coursesCache dan _certsCache sudah ada sejak lama, tapi tidak
        pernah dipakai untuk MENCEGAH panggilan ulang: showPage()
        memanggil loadMyCourses()/loadMyCerts() tanpa syarat, lalu
        hasilnya menimpa cache dengan isi yang sama persis. Klik
        Courses -> Profile -> Courses = 2x round-trip ke GAS (~3-4
        detik masing-masing) untuk data yang tidak berubah.
        Sekarang setiap cache punya stempel waktu; kalau umurnya
        di bawah 60 detik, halaman digambar langsung dari memori.
        Lewat 60 detik, ambil ulang seperti biasa.
        SENGAJA memakai memori, BUKAN sessionStorage: aplikasi ini
        SPA (showPage hanya menukar kelas .active, tidak me-reload),
        jadi memori sudah cukup — dan memori tidak bisa basi antar-tab
        atau tertinggal setelah logout.
        Setiap aksi yang MENGUBAH data (selesaikan modul, submit quiz,
        terbitkan sertifikat) membatalkan cache-nya sendiri, jadi
        perubahan tetap langsung terlihat.
     ================================================================ -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- v2.127 — viewport-fit=cover WAJIB ada. Tanpa ini, setiap
     env(safe-area-inset-*) di CSS bernilai 0, DAN viewport tidak
     mencakup area gesture bar / notch — halaman tidak bisa mengecat
     di sana, sehingga yang terlihat adalah latar browser (putih)
     di bawah bottom nav. Pola sama dengan app MFB-IT Daily Activity
     yang navnya sudah benar. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>Miss Fish Bali — LMS</title>

<!-- ================================================================
     MFB-IT — ikon, manifest PWA, dan meta berbagi tautan.
     Disisipkan bangun-app.cjs; baseline v2.144 tidak disunting.
     ================================================================ -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/icon-192.png">
<link rel="manifest" href="/manifest.webmanifest">

<!-- Mewarnai bilah alamat browser dan bilah status HP supaya
     menyambung dengan hitam hangat aplikasi, bukan putih. -->
<meta name="theme-color" content="#0C0B08">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Miss Fish LMS">
<meta name="mobile-web-app-capable" content="yes">

<!-- 🔴 JANGAN DI-INDEKS. Ini LMS staff internal — kalau sampai
     masuk hasil pencarian, halaman login Miss Fish akan muncul
     di Google lengkap dengan nomor IT Support yang tertulis di
     dalamnya. -->
<meta name="robots" content="noindex, nofollow">

<meta name="description" content="Portal training staff Miss Fish Bali. Belajar, pantau kemajuan, dan raih sertifikat.">
<link rel="canonical" href="https://missfish-lms.itm-b4d.workers.dev/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Miss Fish Bali LMS">
<meta property="og:title" content="Miss Fish Bali - Learning Management System">
<meta property="og:description" content="Portal training staff Miss Fish Bali. Belajar, pantau kemajuan, dan raih sertifikat.">
<meta property="og:url" content="https://missfish-lms.itm-b4d.workers.dev/">
<meta property="og:image" content="https://missfish-lms.itm-b4d.workers.dev/og-image.jpg">
<meta property="og:image:secure_url" content="https://missfish-lms.itm-b4d.workers.dev/og-image.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Miss Fish Bali - Learning Management System">
<meta property="og:locale" content="id_ID">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Miss Fish Bali - Learning Management System">
<meta name="twitter:description" content="Portal training staff Miss Fish Bali.">
<meta name="twitter:image" content="https://missfish-lms.itm-b4d.workers.dev/og-image.jpg">

<!-- Layar pembuka iOS. Android memakai background_color dari
     manifest, jadi tidak butuh berkas seperti ini. -->
<link rel="apple-touch-startup-image" href="/splash-750x1334.png" media="(device-width:375px) and (device-height:667px) and (-webkit-device-pixel-ratio:2)">
<link rel="apple-touch-startup-image" href="/splash-1125x2436.png" media="(device-width:375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3)">
<link rel="apple-touch-startup-image" href="/splash-1170x2532.png" media="(device-width:390px) and (device-height:844px) and (-webkit-device-pixel-ratio:3)">
<link rel="apple-touch-startup-image" href="/splash-1179x2556.png" media="(device-width:393px) and (device-height:852px) and (-webkit-device-pixel-ratio:3)">
<link rel="apple-touch-startup-image" href="/splash-1284x2778.png" media="(device-width:428px) and (device-height:926px) and (-webkit-device-pixel-ratio:3)">
<link rel="apple-touch-startup-image" href="/splash-1290x2796.png" media="(device-width:430px) and (device-height:932px) and (-webkit-device-pixel-ratio:3)">
<!-- v2.116 — preconnect ke domain CDN yang dipakai: DNS+TLS handshake
     dilakukan lebih awal secara paralel dengan parsing HTML, hemat
     ~200-400ms di jaringan 4G. -->
<link rel="preload" href="/fonts/inter-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preconnect" href="https://cdnjs.cloudflare.com">
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<!-- v2.116 Item 2A-4 — font weight dikurangi 6→3 (300,400,500,600,700,900
     jadi 400,600,700). Terverifikasi lewat grep seluruh CSS file ini:
     weight 300 dan 900 TIDAK PERNAH dipakai sama sekali (0 kemunculan) —
     murni pemborosan ±60 KB + 3 request. Weight 500 (17 titik) digeser
     ke 600 di patch CSS terpisah berikutnya, supaya browser tidak
     mensintesis weight palsu untuk 500 yang sudah tidak di-download. -->
<link href="/fonts.css" rel="stylesheet">
<style>

/* ══════════════════════════════════════════════════
   1. RESET + ROOT VARIABLES
══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* v2.133 — indikator fokus keyboard. Sebelumnya tidak ada sama sekali,
   jadi pengguna keyboard tidak bisa melihat elemen mana yang sedang
   dipilih. Outline bawaan browser tidak diandalkan: kontrasnya sering
   di bawah 3:1 di atas latar berwarna.
   :focus-visible (bukan :focus) supaya cincin ini HANYA muncul saat
   navigasi keyboard, tidak setiap kali tombol disentuh/diklik. */
:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 2px;
  border-radius: 4px;
}
html, body { height: 100%; font-family: 'Inter', sans-serif; overflow-x: hidden; }

:root {
  --gold:       #C9A065;
  --gold-light: #E8C97A;
  --gold-pale:  #F5E9C8;
  /* v2.133 — varian GELAP khusus TEKS KECIL di atas latar terang.
     --gold (#C9A065) kontrasnya cuma 2,25:1 di atas latar nav #F7F7F5,
     jauh di bawah ambang WCAG 4,5:1. Nilai di bawah = 4,70:1 (lulus).
     JANGAN pakai ini untuk elemen brand (tombol, progress bar, aksen
     sertifikat) -- di situ --gold tetap yang benar. Ini KHUSUS teks
     kecil. Lihat SOP kategori 13 rule 13-5 (MANDATORY). */
  --gold-text:  #8A6A1F;
  --black:      #0A0A0A;
  /* v2.114 — SENGAJA TIDAK di-override di body.dark-mode.
     --black dipakai untuk 2 tujuan berlawanan di codebase ini:
     sebagai warna TEKS (harus jadi terang di dark mode -- sudah
     benar, --black di-override #F0F0F0 untuk kasus ini), dan sebagai
     BACKGROUND SOLID tombol/hero/badge (harus TETAP gelap di dark
     mode, karena selalu dipasangkan dengan color:#fff di sebelahnya
     -- kalau ikut berubah terang, teks putih di atasnya jadi tidak
     terbaca). --solid-dark menampung tujuan kedua supaya keduanya
     tidak lagi berebut satu variabel yang sama. */
  --solid-dark: #0A0A0A;
  --charcoal:   #1C1C1C;
  --white:      #FFFFFF;
  --off-white:  #FAFAFA;
  --gray-50:    #F7F7F5;
  --gray-100:   #EFEFED;
  --gray-200:   #E0DFDD;
  --gray-300:   #C8C7C4;
  --gray-400:   #A8A7A3;
  --gray-500:   #787672;
  --gray-700:   #3A3936;
  --green:      #10B981;
  --red:        #DC2626;
  --amber:      #F59E0B;
  --blue:       #2563EB;
  --sidebar-w:  240px;
  --topbar-h:   64px;
  --bottomnav:  68px;
}

/* ══════════════════════════════════════════════════
   2. GLOBAL KEYFRAMES
══════════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.35; transform: scale(0.65); }
}
@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* ══════════════════════════════════════════════════
   3. RESPONSIVE LAYER CONTROL
══════════════════════════════════════════════════ */
#desk { display: none; }
#mob  { display: none; }

@media (min-width: 900px) {
  #desk { display: block; width: 100%; min-height: 100vh; }
}
@media (max-width: 899px) {
  #mob { display: flex; flex-direction: column; }
  #mob .mob-login-card {
    flex: 0 0 auto !important;
    border-radius: 28px !important;
    margin: 0 8px 8px 8px !important;
    padding: 24px 22px 20px !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.35) !important;
  }
}

/* ══════════════════════════════════════════════════
   4. DESKTOP — PAGE SYSTEM
══════════════════════════════════════════════════ */
#desk .d-page { display: none; width: 100%; }
#desk .d-page.active { display: block; }

#desk #d-login.active {
  display: flex;
  flex-direction: row;
  height: 100vh;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════
   5. DESKTOP — LOGIN PAGE
══════════════════════════════════════════════════ */
#desk .login-left {
  flex: 1;
  background: var(--solid-dark);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 52px 60px;
  position: relative;
  overflow: hidden;
}
#desk .login-left-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(201,160,101,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(201,160,101,0.06) 0%, transparent 70%);
  pointer-events: none;
}
#desk .login-left-grain {
  position: absolute; inset: 0; opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}
#desk .deco-vlines {
  position: absolute; top: 0; right: 100px; height: 100%;
  display: flex; gap: 20px; pointer-events: none;
}
#desk .deco-vline {
  width: 1px; height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(201,160,101,0.2) 40%, rgba(201,160,101,0.35) 60%, transparent);
}
#desk .deco-circle {
  position: absolute; top: 50%; left: 44%;
  transform: translate(-50%, -50%);
  width: 380px; height: 380px;
  border: 1px solid rgba(201,160,101,0.07);
  border-radius: 50%;
  animation: spin 40s linear infinite;
  pointer-events: none;
}
#desk .deco-circle::before {
  content: ''; position: absolute; inset: 40px;
  border: 1px solid rgba(201,160,101,0.05);
  border-radius: 50%;
}
#desk .login-logo-row {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  animation: fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) both;
}
#desk .mf-logo-dark {
  width: auto; height: auto; border-radius: 0;
  background: transparent; border: none;
  display: flex; align-items: center; flex-shrink: 0;
}
#desk .mf-logo-dark img { height: 93px; width: auto; display: block; }
#desk .login-logo-text .brand {
  font-family: Georgia, serif; font-size: 20px; font-weight: 700;
  color: #fff; letter-spacing: 0.03em;
}
#desk .login-logo-text .sub {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold); margin-top: 2px;
}
#desk .login-hero {
  position: relative; z-index: 2;
  animation: fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.1s both;
}
#desk .login-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
#desk .login-eyebrow-line { width: 36px; height: 1px; background: var(--gold); }
#desk .login-eyebrow-text {
  font-size: 10px; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--gold);
}
#desk .login-h1 {
  font-family: Georgia, serif;
  font-size: clamp(52px, 5vw, 76px);
  font-weight: 700; color: #fff; line-height: 0.95; margin-bottom: 20px;
}
#desk .login-h1 em { color: var(--gold); font-style: italic; }
#desk .login-desc {
  font-size: 14.5px; color: rgba(255,255,255,0.42);
  line-height: 1.75; max-width: 400px; margin-bottom: 48px;
}
#desk .login-stats { display: flex; gap: 36px; }
#desk .login-stat  { display: flex; flex-direction: column; gap: 3px; }
#desk .login-stat-n {
  font-family: Georgia, serif; font-size: 38px; font-weight: 700;
  color: #fff; line-height: 1;
}
#desk .login-stat-l {
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
}
#desk .login-stat-div {
  width: 1px; height: 44px;
  background: rgba(255,255,255,0.1); align-self: center;
}
#desk .login-left-footer {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  animation: fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.2s both;
}
#desk .login-left-footer span { font-size: 11px; color: rgba(255,255,255,0.18); }
#desk .pulse-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); animation: pulse 2.5s ease-in-out infinite;
}
#desk .login-right {
  width: 520px; flex-shrink: 0; background: var(--white);
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px 52px; position: relative; overflow: hidden;
}
#desk .login-right::before {
  content: ''; position: absolute; top: 0; left: 0; width: 2px; height: 100%;
  background: linear-gradient(to bottom, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
}
#desk .login-right::after {
  content: ''; position: absolute; top: -180px; right: -180px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(201,160,101,0.05) 0%, transparent 70%);
  pointer-events: none;
}
#desk .login-form-header {
  margin-bottom: 36px;
  animation: fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.15s both;
}
#desk .login-form-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 10px;
}
#desk .login-form-title {
  font-family: Georgia, serif; font-size: 36px; font-weight: 700;
  color: var(--black); line-height: 1.1; margin-bottom: 6px;
}
#desk .login-form-sub { font-size: 13.5px; color: var(--gray-500); }
#desk .login-form {
  display: flex; flex-direction: column; gap: 18px;
  animation: fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.25s both;
}
#desk .f-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--black); margin-bottom: 7px; display: block;
}
#desk .f-wrap { position: relative; }
#desk .f-input {
  width: 100%; height: 50px; border: 1.5px solid var(--gray-200); border-radius: 10px;
  padding: 0 46px 0 16px; font-family: 'Inter', sans-serif; font-size: 14.5px;
  color: var(--black); background: var(--gray-50); outline: none; transition: all 0.2s;
}
#desk .f-input::placeholder { color: var(--gray-400); }
#desk .f-input:focus {
  border-color: var(--gold); background: #fff;
  box-shadow: 0 0 0 3px rgba(201,160,101,0.13);
}
#desk .f-icon {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--gray-400); cursor: pointer; transition: color 0.2s;
  display: flex; align-items: center;
}
#desk .f-icon:hover { color: var(--gold); }
#desk .attempt-box {
  display: none;
  align-items: flex-start; gap: 10px;
  background: #FFFBF0; border: 1px solid #E8C042;
  border-radius: 8px; padding: 12px 14px;
  font-size: 12.5px; color: #6B4E00; font-weight: 600;
}
#desk .btn-signin {
  height: 52px; background: var(--solid-dark); color: #fff;
  border: none; border-radius: 10px;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; transition: all 0.2s; position: relative; overflow: hidden; margin-top: 2px;
}
#desk .btn-signin::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(201,160,101,0.18), transparent 60%);
  opacity: 0; transition: opacity 0.3s;
}
#desk .btn-signin:hover {
  background: var(--charcoal); transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
#desk .btn-signin:hover::after { opacity: 1; }
#desk .btn-signin:active { transform: none; }
#desk .btn-signin:disabled {
  opacity: 0.6; cursor: not-allowed; transform: none;
}
#desk .login-divider { display: flex; align-items: center; gap: 14px; }
#desk .login-divider-line { flex: 1; height: 1px; background: var(--gray-200); }
#desk .login-divider-text {
  font-size: 10px; color: var(--gray-400); letter-spacing: 0.1em; text-transform: uppercase;
}
#desk .login-forgot {
  text-align: center; font-size: 12.5px; color: var(--gray-500); line-height: 1.6;
}
#desk .login-forgot strong { color: var(--gold); font-weight: 600; }
#desk .login-right-footer {
  margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--gray-100);
  display: flex; justify-content: space-between; align-items: center;
  animation: fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.35s both;
}
#desk .login-right-footer span { font-size: 11px; color: var(--gray-400); }

/* ══════════════════════════════════════════════════
   6. DESKTOP — SHELL (Sidebar + Topbar + Main)
══════════════════════════════════════════════════ */
#desk .shell {
  display: flex; width: 100%; min-height: 100vh;
}
#desk .sidebar {
  width: var(--sidebar-w); flex-shrink: 0; background: var(--solid-dark);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; height: 100vh; z-index: 100; overflow: hidden;
}
#desk .sidebar-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 100%, rgba(201,160,101,0.08) 0%, transparent 70%);
  pointer-events: none;
}
#desk .sidebar-logo {
  padding: 24px 20px 20px;
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; position: relative; z-index: 1;
}
#desk .sb-sub {
  font-family: Georgia, serif; font-size: 15px; font-weight: 700;
  color: #fff; text-align: center;
}
#desk .sidebar-nav {
  flex: 1; padding: 16px 12px; overflow-y: auto; position: relative; z-index: 1;
}
#desk .sidebar-nav::-webkit-scrollbar { width: 4px; }
#desk .sidebar-nav::-webkit-scrollbar-track { background: transparent; }
#desk .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
#desk .nav-section-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.25); padding: 0 8px; margin: 16px 0 6px;
}
#desk .nav-section-label:first-child { margin-top: 4px; }
#desk .nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.55);
  cursor: pointer; transition: all 0.18s; margin-bottom: 1px; user-select: none;
}
#desk .nav-item:hover  { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); }
#desk .nav-item.active { background: rgba(201,160,101,0.12); color: var(--gold); font-weight: 600; }
#desk .nav-item svg       { flex-shrink: 0; opacity: 0.7; }
#desk .nav-item.active svg { opacity: 1; }
#desk .nav-badge {
  margin-left: auto; background: var(--gold); color: var(--black);
  font-size: 10px; font-weight: 700; border-radius: 10px; padding: 1px 7px;
}
#desk .sidebar-footer {
  padding: 16px 12px; border-top: 1px solid rgba(255,255,255,0.06);
  position: relative; z-index: 1;
}
#desk .sidebar-footer::after {
  content: 'LMS v2.144';
  display: block;
  font-size: 10px;
  color: #ffffff;
  padding: 4px 10px 0;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.05em;
}
#desk .sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  cursor: pointer; transition: background 0.18s;
}
#desk .sidebar-user:hover { background: rgba(255,255,255,0.06); }
#desk .sb-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), #A07840);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--black); flex-shrink: 0;
}
#desk .sb-name { font-size: 12.5px; font-weight: 600; color: #fff; }
#desk .sb-role { font-size: 10px; color: rgba(255,255,255,0.35); margin-top: 1px; }
#desk .main-area {
  margin-left: var(--sidebar-w); flex: 1; min-width: 0;
  display: flex; flex-direction: column; min-height: 100vh;
  overflow-x: hidden;
}
#desk .topbar {
  height: var(--topbar-h); background: var(--white);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; position: sticky; top: 0; z-index: 50;
}
#desk .topbar-left { display: flex; flex-direction: column; gap: 1px; }
#desk .topbar-breadcrumb { font-size: 11px; color: var(--gray-400); font-weight: 600; }
#desk .topbar-title { font-size: 17px; font-weight: 700; color: var(--black); }
#desk .topbar-right { display: flex; align-items: center; gap: 16px; }
#desk .topbar-icon-btn {
  width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid var(--gray-200); background: var(--white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--gray-500); transition: all 0.18s; position: relative;
}
#desk .topbar-icon-btn:hover { background: var(--gray-50); color: var(--black); }
#desk .notif-dot {
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); border: 1.5px solid #fff;
}
#desk .topbar-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), #A07840);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--black); cursor: pointer;
}
#desk .content { flex: 1; padding: 32px; background: var(--gray-50); }

/* ══════════════════════════════════════════════════
   7. LOADING OVERLAY
══════════════════════════════════════════════════ */
#lms-loading {
  position: fixed; inset: 0; background: var(--solid-dark);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 9999; animation: fadeIn 0.3s ease both;
}
#lms-loading .load-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
#lms-loading.hide {
  animation: fadeIn 0.4s ease reverse both;
  pointer-events: none;
}
#lms-loading .load-logo {
  font-family: Georgia, serif; font-size: 28px; font-weight: 700;
  color: #fff; margin-bottom: 8px;
}
#lms-loading .load-sub {
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 32px;
}
#lms-loading .load-spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid rgba(201,160,101,0.15);
  border-top-color: var(--gold);
  animation: spin 0.9s linear infinite;
  /* override spin transform for spinner — use different keyframe */
}
@keyframes spinSimple { to { transform: rotate(360deg); } }
#lms-loading .load-spinner { animation: spinSimple 0.9s linear infinite; }
#lms-loading .load-msg {
  font-size: 12px; color: rgba(255,255,255,0.35); margin-top: 16px;
}
/* Overlay mode — background semi-transparan, card putih di tengah (bukan full hitam) */
#lms-loading.overlay-mode { background: rgba(0,0,0,0.45); }
#lms-loading.overlay-mode .load-inner {
  background: #fff; border-radius: 18px; padding: 32px 40px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.22);
  display: flex; flex-direction: column; align-items: center;
}
#lms-loading.overlay-mode .load-logo { color: var(--black); }
#lms-loading.overlay-mode .load-sub  { color: var(--gold); }
#lms-loading.overlay-mode .load-msg  { color: var(--gray-500); }

/* ══════════════════════════════════════════════════
   8. MODAL — Change Password (force_pw_change)
══════════════════════════════════════════════════ */
#modal-changepw {
  display: none;
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(0,0,0,0.6);
  align-items: center; justify-content: center;
  animation: fadeIn 0.2s ease both;
}
#modal-changepw.show { display: flex; }
#modal-changepw .mpw-box {
  background: var(--white); border-radius: 18px;
  padding: 40px 44px; width: 100%; max-width: 440px;
  position: relative; animation: scaleIn 0.25s cubic-bezier(0.16,1,0.3,1) both;
}
#modal-changepw .mpw-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(201,160,101,0.1); border: 1px solid rgba(201,160,101,0.3);
  border-radius: 20px; padding: 5px 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 16px;
}
#modal-changepw .mpw-title {
  font-family: Georgia, serif; font-size: 26px; font-weight: 700;
  color: var(--black); margin-bottom: 6px;
}
#modal-changepw .mpw-sub {
  font-size: 13px; color: var(--gray-500); line-height: 1.6; margin-bottom: 28px;
}
#modal-changepw .mpw-fields { display: flex; flex-direction: column; gap: 16px; }
#modal-changepw .mpw-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--black); margin-bottom: 7px; display: block;
}
#modal-changepw .mpw-wrap { position: relative; }
#modal-changepw .mpw-input {
  width: 100%; height: 48px; border: 1.5px solid var(--gray-200); border-radius: 10px;
  padding: 0 44px 0 16px; font-family: 'Inter', sans-serif; font-size: 14px;
  color: var(--black); background: var(--gray-50); outline: none; transition: all 0.2s;
}
#modal-changepw .mpw-input:focus {
  border-color: var(--gold); background: #fff;
  box-shadow: 0 0 0 3px rgba(201,160,101,0.13);
}
#modal-changepw .mpw-eye {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  color: var(--gray-400); cursor: pointer; display: flex; align-items: center;
}
#modal-changepw .mpw-eye:hover { color: var(--gold); }
#modal-changepw .mpw-error {
  display: none;
  align-items: flex-start; gap: 8px;
  background: #FFF5F5; border: 1px solid #FCA5A5;
  border-radius: 8px; padding: 10px 12px;
  font-size: 12.5px; color: var(--red);
}
#modal-changepw .mpw-btn {
  width: 100%; height: 50px; background: var(--solid-dark); color: #fff;
  border: none; border-radius: 10px; margin-top: 8px;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer; transition: all 0.2s;
}
#modal-changepw .mpw-btn:hover { background: var(--charcoal); }
#modal-changepw .mpw-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ══════════════════════════════════════════════════
   9. MOBILE — SYSTEM
══════════════════════════════════════════════════ */
#mob .m-page { display: none; flex-direction: column; width: 100%; min-height: 100vh; min-height: 100dvh; }
#mob .m-page.active { display: flex; }

/* ══════════════════════════════════════════════════
   10. MOBILE — LOGIN PAGE
══════════════════════════════════════════════════ */
#mob #m-login {
  /* v2.125 — pasangan 100dvh ditambahkan; .m-page sudah punya sejak
     Gelombang 1, halaman login terlewat.
     v2.127 — padding safe-area atas & bawah, konsekuensi dari
     viewport-fit=cover. Latar gelapnya kini memenuhi layar sampai
     tepi (termasuk di belakang status bar), sedangkan isinya tetap
     berada di area yang aman. */
  background: var(--solid-dark); min-height: 100vh; min-height: 100dvh;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  flex-direction: column; position: relative;
}
#mob .mob-login-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201,160,101,0.15) 0%, transparent 60%);
  pointer-events: none;
}
#mob .mob-login-top {
  padding: 23px 32px 23px;
  position: relative; z-index: 1; text-align: center;
}
#mob .mob-login-brand {
  font-family: Georgia, serif; font-size: 26px; font-weight: 700;
  color: #fff; margin-top: 16px;
}
#mob .mob-login-sub {
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold); margin-top: 4px;
}
#mob .mob-login-tagline {
  font-size: 14px; color: rgba(255,255,255,0.4); margin-top: 12px; line-height: 1.6;
}
#mob .mob-login-card {
  background: var(--white); border-radius: 32px 32px 0 0;
  padding: 32px 28px 40px; flex: 1;
  position: relative; z-index: 1; margin-top: auto;
}
#mob .mob-login-card-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
}
#mob .mob-login-card-title {
  font-family: Georgia, serif; font-size: 28px; font-weight: 700;
  color: var(--black); margin-bottom: 4px;
}
#mob .mob-login-card-sub {
  font-size: 13px; color: var(--gray-500); margin-bottom: 28px;
}
#mob .lf-group  { margin-bottom: 16px; }
#mob .lf-label  {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--black); margin-bottom: 7px; display: block;
}
#mob .lf-wrap   { position: relative; }
#mob .lf-input  {
  width: 100%; height: 52px; border: 1.5px solid var(--gray-200); border-radius: 12px;
  padding: 0 46px 0 16px; font-family: 'Inter', sans-serif; font-size: 15px;
  color: var(--black); background: var(--gray-50); outline: none; transition: all 0.2s;
}
#mob .lf-input::placeholder { color: var(--gray-400); }
#mob .lf-input:focus {
  border-color: var(--gold); background: #fff;
  box-shadow: 0 0 0 3px rgba(201,160,101,0.13);
}
#mob .lf-icon {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--gray-400); cursor: pointer; display: flex; align-items: center;
}
#mob .mob-attempt-box {
  display: none;
  background: #FFFBF0; border: 1px solid #E8C042;
  border-radius: 10px; padding: 12px 14px;
  font-size: 12.5px; color: #6B4E00; font-weight: 600; margin-bottom: 16px;
}
#mob .btn-login-m {
  width: 100%; height: 54px; background: var(--solid-dark); color: #fff;
  border: none; border-radius: 14px;
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700;
  letter-spacing: 0.1em; cursor: pointer; transition: all 0.2s; margin-top: 8px;
}
#mob .btn-login-m:active { transform: scale(0.98); }
#mob .mob-login-forgot {
  text-align: center; font-size: 12.5px; color: var(--gray-500);
  margin-top: 18px; line-height: 1.6;
}
#mob .mob-login-forgot strong { color: var(--gold); }
#mob .m-form { display: flex; flex-direction: column; gap: 16px; }
#mob .m-f-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--black); margin-bottom: 6px; display: block;
}
#mob .m-f-wrap { position: relative; }
#mob .m-f-input {
  width: 100%; height: 52px; border: 1.5px solid var(--gray-200); border-radius: 12px;
  padding: 0 46px 0 16px; font-family: 'Inter', sans-serif; font-size: 15px;
  color: var(--black); background: var(--gray-50); outline: none; transition: all 0.2s;
}
#mob .m-f-input::placeholder { color: var(--gray-400); }
#mob .m-f-input:focus {
  border-color: var(--gold); background: #fff;
  box-shadow: 0 0 0 3px rgba(201,160,101,0.13);
}
#mob .m-f-icon {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--gray-400); cursor: pointer; display: flex; align-items: center;
}
#mob .m-f-icon:hover { color: var(--gold); }
#mob .m-attempt-box {
  display: none;
  padding: 12px 14px; background: #FFFBF0;
  border: 1px solid #E8C042; border-radius: 10px;
  font-size: 13px; color: #6B4E00; font-weight: 600;
}
#mob .m-btn-signin {
  height: 56px; background: var(--solid-dark); color: #fff;
  border: none; border-radius: 14px; width: 100%; margin-top: 4px;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; transition: all 0.2s;
}
#mob .m-btn-signin:active { transform: scale(0.98); }
#mob .m-btn-signin:disabled { opacity: 0.6; }
#mob .m-login-footer {
  text-align: center; margin-top: 24px;
  font-size: 12px; color: var(--gray-500); line-height: 1.6;
}
#mob .m-login-footer strong { color: var(--gold); }

/* ══════════════════════════════════════════════════
   11. MOBILE — INNER TOPBAR & BOTTOM NAV
══════════════════════════════════════════════════ */
#mob .inner-topbar {
  position: sticky; top: 0; z-index: 50;
  /* v2.127 — konsekuensi wajib dari viewport-fit=cover: area status
     bar kini ikut masuk viewport, jadi tanpa padding ini isi topbar
     akan tertutup jam/sinyal HP.
     Tinggi DIHITUNG (60px + safe-area), bukan dibiarkan 60px, karena
     box-sizing: border-box berlaku global — padding-top pada elemen
     ber-height tetap hanya MENYEMPITKAN isi dari dalam, tidak
     menambah tinggi. Ini jebakan yang sama yang membuat perbaikan
     bottom nav di v2.125 gagal. */
  height: calc(60px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
  display: flex; align-items: center;
  padding-left: 20px; padding-right: 20px;
}
/* v2.119 — .it-right dulu satu-satunya flex child, sehingga
   justify-content:space-between mendorongnya ke KIRI (bukan kanan
   seperti namanya). .it-center-block absolute jadi terlihat benar
   di tengah, tapi .it-right (avatar/tombol Add/logo) ikut nempel
   kiri, menabrak .it-back atau area kiri lain.
   Fix: .it-left jadi flex item nyata (bukan absolute), .it-right
   didorong ke kanan pakai margin-left:auto. Kedua sisi punya
   min-width sama supaya .it-center-block (absolute, translateX
   -50%) tetap presisi di tengah viewport, bukan di tengah sisa
   ruang. */
#mob .it-left  { display: flex; align-items: center; min-width: 42px; }
#mob .it-right { display: flex; align-items: center; gap: 10px; margin-left: auto; min-width: 42px; justify-content: flex-end; }
#mob .inner-topbar.dark {
  background: var(--solid-dark); border-color: rgba(255,255,255,0.08);
}
#mob .it-back {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--gold); cursor: pointer;
}
#mob .it-center-block {
  position: absolute; left: 50%; transform: translateX(-50%);
  text-align: center;
}
#mob .it-eyebrow {
  font-size: 9px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold);
}
#mob .it-title {
  font-size: 14px; font-weight: 700; color: var(--black);
}
#mob .it-title.white { color: #fff; }
#mob .it-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), #A07840);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--black);
  cursor: pointer;
}
/* ── Banner pengingat tenggat — v3.01 ──
   Data days_left sudah dikirim getDashboardStats, jadi tidak ada
   perubahan backend. Banner hanya muncul kalau memang ada yang
   lewat tenggat atau mendekati. */
.dl-banner{
  display:flex;align-items:flex-start;gap:12px;
  border-radius:14px;padding:14px 16px;margin-bottom:22px;
  border:1.5px solid; line-height:1.5;
}
.dl-banner.crit{ background:rgba(239,68,68,.07); border-color:rgba(239,68,68,.35); }
.dl-banner.warn{ background:rgba(201,160,101,.09); border-color:rgba(201,160,101,.45); }
.dl-banner .dlb-ic{ font-size:19px; line-height:1; flex-shrink:0; margin-top:1px }
.dl-banner .dlb-body{ flex:1; min-width:0 }
.dl-banner .dlb-title{ font-size:13.5px; font-weight:700; color:var(--black); margin-bottom:3px }
.dl-banner .dlb-list{ font-size:12.5px; color:var(--gray-500) }
.dl-banner .dlb-list b{ color:var(--black); font-weight:600 }
.dl-banner .dlb-go{
  flex-shrink:0;align-self:center;border:none;cursor:pointer;
  background:var(--solid-dark);color:#fff;font-family:inherit;
  font-size:12px;font-weight:600;padding:8px 14px;border-radius:8px;
}
.dl-banner .dlb-go:hover{ background:#333 }
#mob .dl-banner{ margin:0 16px 16px; padding:12px 14px }
#mob .dl-banner .dlb-go{ display:none }

/* v3.01 — pojok kiri atas mobile memakai logo Miss Fish, bukan inisial.
   Profil tetap dapat dibuka lewat tab Profile di bawah. */
/* v2.117 — logo topbar mobile diperbesar 26px -> 39px (+50%, permintaan
   kakak). Tinggi container .it-brand ikut dinaikkan sedikit dari 34px
   ke 42px supaya logo tidak terpotong/nempel ke tepi topbar (topbar
   sendiri tetap 60px, jadi masih ada ruang atas-bawah). Semua topbar
   mobile pakai class yang sama, jadi 1 perubahan ini konsisten di
   seluruh halaman. */
#mob .it-brand { display: flex; align-items: center; height: 42px; }
#mob .it-brand img { height: 39px; width: auto; display: block; }
#mob .inner-topbar.dark .it-brand img { filter: none; }
/* Header terang memakai logo gelap agar tetap terbaca */
#mob .inner-topbar:not(.dark) .it-brand img { filter: brightness(0); }
#mob .scroll-content {
  flex: 1; overflow-y: auto;
  /* v2.125 — ikut menghitung safe-area, kalau tidak konten paling
     bawah bisa tertutup nav di HP bergesture-bar. */
  padding-bottom: calc(var(--bottomnav) + env(safe-area-inset-bottom, 0px) + 8px);
}
#mob .bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  /* v2.126 — pola diambil dari app MFB-IT Daily Activity v2.11 yang
     navnya sudah benar (dirujuk kak Wi 27 Aug).
     TIDAK ADA height tetap. Tinggi ditentukan isi + padding, jadi
     padding-bottom safe-area OTOMATIS memanjangkan nav sampai dasar
     layar dan ikon tetap menempel tepat di atas gesture bar.
     Sebelumnya height dipatok 68px DAN align-items:center, sehingga
     ikon terkumpul di tengah kotak 68px dan menyisakan pita abu
     kosong di bawahnya — itulah yang terlihat "melayang", dan
     menambah safe-area ke height (v2.125) tidak menghilangkannya.
     Latar juga diganti: tint transparan + backdrop blur, bukan abu
     solid, supaya nav menyatu dengan halaman. Efek samping baik:
     kontras gold aktif ikut naik dari 1,31:1 ke sekitar 2,0:1
     (masih di bawah WCAG 4,5:1 — keputusan warna brand tetap
     menunggu kak Wi, TIDAK diubah di sini).
     --bottomnav tetap dipakai .scroll-content untuk memesan ruang. */
  /* v2.131 — latar PUTIH SOLID, disamakan dengan pita di bawah nav
     yang TIDAK BISA dicat oleh halaman (lihat penjelasan iframe di
     header). Selama nav berwarna abu, pita putih di bawahnya
     terlihat sebagai batas dan nav tampak mengambang. Dengan warna
     yang sama, batas itu hilang.
     backdrop-filter dibuang: tidak berguna di atas warna solid, dan
     di dalam iframe HtmlService justru menambah beban render. */
  /* v2.132 — sedikit lebih gelap sesuai permintaan kak Wi.
     #F7F7F5 (--gray-50) cuma ~3% lebih gelap dari putih, jadi garis
     batas terhadap pita putih di bawahnya nyaris tak terlihat.
     Penegasan bentuk nav dipindah ke garis ATAS (--gray-300), bukan
     ke warna latar -- supaya nav terbaca sebagai bidang tersendiri
     TANPA memunculkan lagi batas di bawah. */
  background: var(--gray-50);
  border-top: 1px solid var(--gray-300);
  display: flex; justify-content: space-around;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
}
#mob .bnav-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 12px; border-radius: 10px; cursor: pointer;
  transition: background 0.15s; flex: 1;
}
#mob .bnav-item:active { background: var(--gray-50); }
/* v2.133 — dari var(--gold) ke var(--gold-text): 2,25:1 -> 4,70:1.
   Label ini font-size 10px, jadi ambangnya 4,5:1 (teks normal). */
#mob .bnav-item.active .bnav-icon { color: var(--gold-text); }
#mob .bnav-item.active .bnav-label { color: var(--gold-text); font-weight: 600; }
#mob .bnav-icon { font-size: 20px; line-height: 1; color: #4A4A49; }
#mob .bnav-label { font-size: 10px; color: #4A4A49; font-weight: 600; }

/* ══════════════════════════════════════════════════
   12. CONTENT PLACEHOLDER (halaman belum diisi)
══════════════════════════════════════════════════ */
.page-placeholder {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 60vh; gap: 12px;
  color: var(--gray-400);
}
.page-placeholder .ph-icon { display: none; }
.page-placeholder .ph-title {
  font-size: 12px; font-weight: 600;
  color: var(--gray-400); margin-top: 4px;
}
.page-placeholder .ph-sub { font-size: 13px; color: var(--gray-400); }
/* v2.90: loading style login (background terang) — logo + spinner */
.page-placeholder::before {
  content: 'Miss Fish Bali';
  order: -2;
  font-family: Georgia, serif; font-size: 22px; font-weight: 700;
  color: var(--black); margin-bottom: 2px;
}
.page-placeholder::after {
  content: 'LEARNING MANAGEMENT SYSTEM';
  order: -1;
  font-size: 10px; font-weight: 600; letter-spacing: 0.2em;
  color: var(--gold); margin-bottom: 20px;
}
.page-placeholder .ph-dots {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(201,160,101,0.15);
  border-top-color: var(--gold);
  animation: spinSimple 0.9s linear infinite;
  margin-bottom: 4px;
  display: block;
}
.page-placeholder .ph-dots span { display: none; }

/* ══ Skeleton Loading ══ */
.sk-shimmer {
  background: linear-gradient(90deg, var(--gray-100) 25%, #f8f8f8 50%, var(--gray-100) 75%);
  background-size: 200% 100%;
  animation: sk-wave 1.5s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes sk-wave {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════
   DARK MODE
══════════════════════════════════════════════════ */
body.dark-mode {
  /* v2.117 — Opsi C (global): --white dinaikkan dari #1A1A1A ke #1E1E1E
     supaya SEMUA card (stat-card, course-card, course-mgmt-card,
     stat-mini, report-card, table-wrap, card, settings-card,
     profile-card, dll) terangkat kontras dari background #0F0F0F/#0A0A0A.
     Sebelumnya selisih card vs background cuma 11 poin RGB, nyaris
     tidak kelihatan (dilaporkan di Manage Courses & stat-mini). */
  --white    : #1E1E1E;
  --gray-50  : #232323;
  --gray-100 : #2E2E2E;
  --gray-200 : #3A3A3A;
  --gray-300 : #4A4A4A;
  --gray-400 : #8A8A8A;
  --gray-500 : #AAAAAA;
  --gray-700 : #CCCCCC;
  --black    : #F0F0F0;
  --charcoal : #E0E0E0;
  --off-white: #161616;
  background : #0A0A0A;
}
/* Desktop */
body.dark-mode #desk .main-area    { background: #0F0F0F; }
body.dark-mode #desk .sidebar      { background: #0A0A0A; border-right-color: #222; }
body.dark-mode #desk .topbar       { background: #141414; border-bottom-color: #222; }
body.dark-mode #desk .content      { background: #0F0F0F; }
body.dark-mode #desk .shell        { background: #0F0F0F; }
/* Cards & containers — v2.117: background & border-color ikut var(--white)/
   var(--gray-100) di atas (naik otomatis), shadow ditambah supaya card
   "terangkat" dari background, bukan cuma andalan beda warna tipis. */
body.dark-mode #desk .stat-card    { background: var(--white) !important; border-color: var(--gray-100) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.35) !important; }
body.dark-mode #desk .course-card  { background: var(--white) !important; border-color: var(--gray-100) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.35) !important; }
body.dark-mode #desk .module-list  { background: var(--white) !important; border-color: var(--gray-100) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.35) !important; }
body.dark-mode #desk .module-item  { border-bottom-color: var(--gray-100); }
body.dark-mode #desk .module-item:hover { background: #292929 !important; }
body.dark-mode #desk .report-card  { background: var(--white) !important; border-color: var(--gray-100) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.35) !important; }
body.dark-mode #desk .table-wrap   { background: var(--white) !important; border-color: var(--gray-100) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.35) !important; }
body.dark-mode #desk .card         { background: var(--white) !important; border-color: var(--gray-100) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.35) !important; }
body.dark-mode #desk .settings-card{ background: var(--white) !important; border-color: var(--gray-100) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.35) !important; }
body.dark-mode #desk .users-table  { background: var(--white) !important; }
body.dark-mode #desk .profile-card { background: var(--white) !important; border-color: var(--gray-100) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.35) !important; }
body.dark-mode #desk .profile-hero { background: var(--white) !important; }
body.dark-mode #desk .welcome-bar  { background: #111 !important; }
/* v2.117 — Manage Courses card & stat-mini eksplisit (grid/mgmt.card
   sebelumnya tidak terjangkau override di atas). */
body.dark-mode #desk .course-mgmt-card { background: var(--white) !important; border-color: var(--gray-100) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.35) !important; }
body.dark-mode #desk .stat-mini        { background: var(--white) !important; border-color: var(--gray-100) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.35) !important; }
body.dark-mode #desk table th      { background: #1E1E1E !important; }
body.dark-mode #desk table td      { border-bottom-color: #252525 !important; }
body.dark-mode #desk .lms-input,
body.dark-mode #desk input,
body.dark-mode #desk select,
body.dark-mode #desk textarea      { background: #252525 !important; border-color: #333 !important; color: #F0F0F0 !important; }
body.dark-mode #desk [style*="background:#fff"],
body.dark-mode #desk [style*="background: #fff"],
body.dark-mode #desk [style*="background:white"],
body.dark-mode #desk [style*="background:var(--white)"] { background: #1A1A1A !important; }
body.dark-mode #desk [style*="border-bottom:1px solid var(--gray"] { border-bottom-color: #252525 !important; }
/* v2.114 — Sertifikat SENGAJA DIKECUALIKAN dari catch-all di atas.
   Sertifikat adalah dokumen resmi yang identik dengan hasil
   download/print PDF-nya -- kalau preview di layar berubah gelap
   saat dark mode tapi PDF yang di-download tetap putih, staff akan
   bingung kenapa tampilannya beda. Diletakkan SETELAH catch-all
   supaya menang di CSS cascade (specificity sama, urutan menentukan). */
body.dark-mode #d-cert-view-content #cert-pdf-target,
body.dark-mode #m-cert-view-content #cert-pdf-target { background: #fff !important; }
/* Mobile */
body.dark-mode #mob .scroll-content               { background: #0A0A0A !important; }
body.dark-mode #mob .inner-topbar                 { background: #111111 !important; border-bottom-color: #222 !important; }
body.dark-mode #mob .inner-topbar .it-title       { color: #F0F0F0 !important; }
body.dark-mode #mob .inner-topbar .it-eyebrow     { color: var(--gold) !important; }
body.dark-mode #mob .inner-topbar .it-avatar      { background: #333 !important; color: #F0F0F0 !important; }
body.dark-mode #mob .inner-topbar .it-back        { color: #F0F0F0 !important; }
body.dark-mode #mob .m-welcome-bar,
body.dark-mode #mob [class*="welcome"]            { background: #111111 !important; }
body.dark-mode #mob .m-welcome-bar *              { color: #F0F0F0 !important; }
/* v2.117 — mobile ikut naik ke var(--white)/var(--gray-100) yang sama
   dengan desktop (Opsi C global), supaya tidak lagi ada dua tingkat
   kontras berbeda antara desktop dan mobile. */
body.dark-mode #mob .mod-item-m                   { background: var(--white) !important; border-color: var(--gray-100) !important; }
body.dark-mode #mob .m-quiz-option                { background: var(--white) !important; border-color: var(--gray-200) !important; }
body.dark-mode #mob .mob-form-card                { background: var(--white) !important; border-color: var(--gray-100) !important; }
body.dark-mode #mob .mob-form-input               { background: var(--gray-100) !important; border-color: var(--gray-200) !important; color: #F0F0F0 !important; }
body.dark-mode #mob [style*="background:var(--white)"],
body.dark-mode #mob [style*="background: white"],
body.dark-mode #mob [style*="background:#fff"]    { background: var(--white) !important; }
body.dark-mode #mob [style*="background:var(--gray-50)"] { background: var(--gray-50) !important; }
body.dark-mode #mob [style*="border-bottom:1px solid var(--gray"] { border-bottom-color: var(--gray-100) !important; }
/* Profile mobile */
body.dark-mode #mob .profile-hero-m               { background: var(--white) !important; }
body.dark-mode #mob .ph-bg                        { opacity: 0.15; }
body.dark-mode #mob .ph-name                      { color: #F0F0F0 !important; }
body.dark-mode #mob .ph-role                      { color: rgba(240,240,240,0.6) !important; }
body.dark-mode #mob .ph-stat-num                  { color: #F0F0F0 !important; }
body.dark-mode #mob .ph-stat-label                { color: rgba(240,240,240,0.5) !important; }
/* Bottom nav */
/* v2.125 — BUG FIX teks hitam di My Profile saat dark mode.
   .mob-form-label & .mob-form-select memakai color: var(--black),
   sedangkan body.dark-mode hanya me-remap --white dan --gray-*,
   TIDAK --black. Jadi labelnya tetap hitam di atas card gelap.
   Baris info profil dirender inline tanpa class, maka di
   loadProfile() ditambahkan class prof-info-* supaya bisa
   di-override dari sini. */
body.dark-mode #mob .mob-form-label               { color: #F0F0F0 !important; }
body.dark-mode #mob .mob-form-select              { background: var(--gray-100) !important; border-color: var(--gray-200) !important; color: #F0F0F0 !important; }
body.dark-mode #mob .prof-section-title           { color: #F0F0F0 !important; }
body.dark-mode #mob .prof-info-row                { border-bottom-color: var(--gray-100) !important; }
body.dark-mode #mob .prof-info-label              { color: rgba(240,240,240,0.55) !important; }
body.dark-mode #mob .prof-info-value              { color: #F0F0F0 !important; }
/* v2.126 — ikut pola transparan seperti mode terang. Tint putih tipis
   di atas latar gelap + blur; bukan hitam solid, supaya nav tetap
   menyatu dengan halaman dan tidak jadi balok terpisah. */
body.dark-mode #mob .bottom-nav                   { background: rgba(255,255,255,0.05) !important; border-top-color: rgba(255,255,255,0.10) !important; }
body.dark-mode #mob .bnav-label                   { color: #888 !important; }
body.dark-mode #mob .bnav-item.active .bnav-label { color: var(--gold) !important; }

/* Login page SELALU light — tidak ikut dark mode */
body.dark-mode #mob #m-login.active { background: #0A0A0A !important; }
body.dark-mode #mob .m-login-card   { background: #FFFFFF !important; color: #111 !important; }
body.dark-mode #mob .m-login-card-eyebrow { color: var(--gold) !important; }
body.dark-mode #mob .m-login-card-title   { color: #111 !important; }
body.dark-mode #mob .m-login-card-sub     { color: #666 !important; }
body.dark-mode #mob .lf-label  { color: #111 !important; }
body.dark-mode #mob .lf-input  { background: #F5F5F5 !important; border-color: #ddd !important; color: #111 !important; }
body.dark-mode #mob .m-login-footer { color: #666 !important; }
body.dark-mode #mob .m-btn-signin   { background: #111 !important; color: #fff !important; }

/* Dark mode toggle button */
.dm-toggle {
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: var(--gray-100); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; transition: background 0.2s;
  flex-shrink: 0;
}
.dm-toggle:hover { background: var(--gray-200); }

/* Mobile toggle di profile */
.dm-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--gray-50);
}
.dm-toggle-row-label { font-size: 13px; color: var(--gray-500); }
.dm-switch {
  position: relative; width: 44px; height: 24px;
}
.dm-switch input { opacity: 0; width: 0; height: 0; }
.dm-slider {
  position: absolute; inset: 0; background: var(--gray-200);
  border-radius: 999px; cursor: pointer; transition: background 0.25s;
}
.dm-slider::before {
  content: ''; position: absolute;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; left: 3px; top: 3px; transition: transform 0.25s;
}
.dm-switch input:checked + .dm-slider { background: var(--gold); }
.dm-switch input:checked + .dm-slider::before { transform: translateX(20px); }

/* Konfeti */
.confetti-overlay {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  display: none;
}
.confetti-overlay.show { display: block; }
@keyframes confetti-fall {
  0%   { transform: translateY(-10px) rotate(0deg);   opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.confetti-piece {
  position: absolute; width: 10px; height: 10px; border-radius: 2px;
  animation: confetti-fall linear forwards;
}

/* ══════════════════════════════════════════════════
   13. TOAST NOTIFICATION
══════════════════════════════════════════════════ */
#lms-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--solid-dark); color: #fff;
  padding: 12px 22px; border-radius: 10px;
  font-size: 13px; font-weight: 600;
  z-index: 9998; pointer-events: none;
  opacity: 0; transition: opacity 0.3s;
  /* v2.118 D4 -- sebelumnya white-space:nowrap tanpa max-width membuat
     pesan panjang (mis. "Contact HR to update your profile.") meluber
     keluar viewport di layar HP sempit (~360-390px), sehingga toast
     terlihat seperti tidak muncul sama sekali. max-width membatasi
     lebar ke lebar layar dikurangi margin aman, white-space:normal
     mengizinkan wrap ke baris berikutnya untuk pesan yang tidak muat. */
  max-width: calc(100vw - 48px);
  white-space: normal;
  text-align: center;
  border-left: 3px solid var(--gold);
}
/* ══════════════════════════════════════════════════
   14. DESKTOP — WELCOME BAR
══════════════════════════════════════════════════ */
#desk .welcome-bar {
  background: var(--solid-dark); border-radius: 16px;
  padding: 28px 32px; margin-bottom: 28px;
  display: flex; align-items: center; justify-content: space-between;
  position: relative; overflow: hidden;
}
#desk .welcome-bar-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 100% at 100% 50%, rgba(201,160,101,0.15) 0%, transparent 70%);
  pointer-events: none;
}
#desk .welcome-bar-left  { position: relative; z-index: 1; }
#desk .welcome-bar-right { position: relative; z-index: 1; text-align: right; }
#desk .welcome-greeting  {
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 6px;
}
#desk .welcome-name {
  font-family: Georgia, serif; font-size: 30px; font-weight: 700;
  color: #fff; margin-bottom: 6px;
}
#desk .welcome-sub  { font-size: 13px; color: rgba(255,255,255,0.4); }
#desk .welcome-date { font-size: 13px; color: rgba(255,255,255,0.35); margin-bottom: 4px; }
#desk .welcome-time {
  font-family: Georgia, serif; font-size: 42px; font-weight: 600;
  color: #fff; line-height: 1;
}

/* ══════════════════════════════════════════════════
   15. DESKTOP — STAT CARDS
══════════════════════════════════════════════════ */
#desk .stats-grid-1 {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px; margin-bottom: 16px;
}
#desk .stats-grid-2 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; margin-bottom: 28px;
}
#desk .stat-card {
  background: var(--white); border-radius: 14px; border: 1px solid var(--gray-100);
  padding: 22px 24px; display: flex; flex-direction: column; gap: 4px;
  transition: box-shadow 0.2s;
}
#desk .stat-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
#desk .stat-card-top {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
#desk .stat-card-icon {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
#desk .ic-gold   { background: rgba(201,160,101,0.12); }
#desk .ic-black  { background: var(--solid-dark); }
#desk .ic-green  { background: rgba(16,185,129,0.1); }
#desk .ic-blue   { background: rgba(37,99,235,0.1); }
#desk .ic-red    { background: rgba(220,38,38,0.1); }
#desk .ic-purple { background: rgba(124,58,237,0.1); }
#desk .stat-card-trend { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px; }
#desk .trend-up   { background: #E8F7EF; color: #1A8A4A; }
#desk .trend-warn { background: #FEE9E8; color: var(--red); }
#desk .stat-card-num   {
  font-family: Georgia, serif; font-size: 34px; font-weight: 700;
  color: var(--black); line-height: 1;
}
#desk .stat-card-label { font-size: 12.5px; font-weight: 600; color: var(--gray-500); }
#desk .stat-card-sub   { font-size: 11px; color: var(--gray-400); }

/* ══════════════════════════════════════════════════
   16. DESKTOP — SHARED CARD + DASH GRID
══════════════════════════════════════════════════ */
#desk .card {
  background: var(--white); border-radius: 14px; border: 1px solid var(--gray-100);
  overflow: hidden;
}
#desk .card-header {
  padding: 18px 24px; border-bottom: 1px solid var(--gray-100);
  display: flex; align-items: center; justify-content: space-between;
}
#desk .card-title  { font-size: 14px; font-weight: 700; color: var(--black); }
#desk .card-action {
  font-size: 12.5px; font-weight: 600; color: var(--gold);
  cursor: pointer; transition: opacity 0.18s;
}
#desk .card-action:hover { opacity: 0.75; }
#desk .dash-grid {
  display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start;
}

/* ══════════════════════════════════════════════════
   17. DESKTOP — DEADLINE + ACTIVITY LISTS
══════════════════════════════════════════════════ */
#desk .deadline-list { padding: 4px 0; }
#desk .deadline-item {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 24px; border-bottom: 1px solid var(--gray-50);
}
#desk .deadline-item:last-child { border-bottom: none; }
#desk .deadline-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
#desk .dd-urgent { background: var(--red); }
#desk .dd-soon   { background: var(--amber); }
#desk .dd-ok     { background: var(--green); }
#desk .deadline-info   { flex: 1; }
#desk .deadline-course { font-size: 13px; font-weight: 600; color: var(--black); }
#desk .deadline-dept   { font-size: 11px; color: var(--gray-500); margin-top: 2px; }
#desk .deadline-days   { font-size: 12px; font-weight: 700; flex-shrink: 0; }
#desk .days-urgent { color: var(--red); }
#desk .days-soon   { color: var(--amber); }
#desk .days-ok     { color: var(--green); }
#desk .btn-course { height: 34px; padding: 0 16px; border-radius: 7px; background: var(--solid-dark); color: #fff; border: none; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.18s; }
#desk .btn-course:hover { background: var(--charcoal); }
#desk .btn-course.resume { background: var(--gold); color: var(--black); }
#desk .btn-course.resume:hover { background: var(--gold-light); }

/* ══════════════════════════════════════════════════
   18. DESKTOP — MY COURSES PAGE
══════════════════════════════════════════════════ */
#desk .courses-filters {
  display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap;
}
#desk .search-bar {
  flex: 1; max-width: 320px; height: 40px;
  border: 1.5px solid var(--gray-200); border-radius: 8px;
  display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--white);
}
#desk .search-bar input {
  border: none; outline: none; font-family: 'Inter', sans-serif;
  font-size: 13.5px; color: var(--black); background: transparent; flex: 1;
}
#desk .search-bar input::placeholder { color: var(--gray-400); }
#desk .filter-pill {
  height: 36px; padding: 0 16px; border-radius: 8px;
  border: 1.5px solid var(--gray-200); background: var(--white);
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--gray-500); cursor: pointer; transition: all 0.18s;
  display: flex; align-items: center; gap: 6px;
}
#desk .filter-pill:hover  { border-color: var(--gold); color: var(--gold); }
#desk .filter-pill.active { background: var(--solid-dark); border-color: var(--solid-dark); color: #fff; }
/* v2.117 — hover baris My Progress lewat CSS var, bukan inline JS,
   supaya dark mode ikut menimpa (sebelumnya this.style.background
   hardcode '#faf9f7' tidak pernah gelap di dark mode). */
#desk .mp-row:hover { background: var(--gray-50); }
#desk .courses-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  align-items: stretch;
}
/* v2.106 — kartu course dulu tingginya mengikuti isi masing-masing,
   sehingga kartu tanpa deskripsi punya tombol yang lebih tinggi dari
   tetangganya. Sekarang kartu jadi kolom lentur dan footer didorong
   ke bawah, jadi tombolnya sejajar berapa pun panjang teksnya. */
#desk .course-card {
  background: var(--white); border-radius: 14px; border: 1px solid var(--gray-100);
  overflow: hidden; cursor: pointer; transition: all 0.22s;
  display: flex; flex-direction: column; height: 100%;
}
#desk .course-body   { flex: 1; display: flex; flex-direction: column; }
#desk .course-footer { margin-top: auto; }
#desk .course-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.1); transform: translateY(-2px); border-color: var(--gold);
}
#desk .course-thumb {
  height: 160px; background: var(--solid-dark); position: relative;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#desk .course-thumb-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(201,160,101,0.25) 0%, transparent 70%);
}
#desk .course-thumb-icon { font-size: 48px; position: relative; z-index: 1; }
#desk .course-thumb-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 20px;
}
#desk .tb-required { background: var(--gold); color: var(--black); }
#desk .tb-elective { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.2); }
#desk .tb-general  { background: rgba(37,99,235,0.85); color: #fff; }
#desk .course-progress-bar  { height: 3px; background: var(--gray-100); }
#desk .course-progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
#desk .course-body { padding: 18px 20px 20px; }
#desk .course-dept-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 6px;
}
#desk .course-title {
  font-family: Georgia, serif; font-size: 18px; font-weight: 700;
  color: var(--black); line-height: 1.25; margin-bottom: 6px;
}
#desk .course-desc  {
  font-size: 12px; color: var(--gray-500); line-height: 1.6; margin-bottom: 14px;
}
#desk .course-meta  { display: flex; gap: 14px; margin-bottom: 14px; }
#desk .course-meta-item { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--gray-500); }
#desk .course-footer {
  display: flex; align-items: center; justify-content: space-between;
}
#desk .course-progress-text { font-size: 11.5px; font-weight: 600; color: var(--gray-500); }
#desk .course-progress-pct  { font-size: 13px; font-weight: 700; color: var(--gold); }

/* ══════════════════════════════════════════════════
   19. DESKTOP — MY PROGRESS PAGE
══════════════════════════════════════════════════ */
#desk .prog-hero-card {
  background: var(--solid-dark); border-radius: 16px; padding: 28px 32px;
  margin-bottom: 28px; display: flex; align-items: center;
  justify-content: space-between; position: relative; overflow: hidden;
}
#desk .prog-hero-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(201,160,101,0.18) 0%, transparent 65%);
  pointer-events: none;
}
#desk .prog-hero-left  { position: relative; z-index: 1; }
#desk .prog-hero-right { position: relative; z-index: 1; display: flex; align-items: center; gap: 24px; }
#desk .prog-ring-d     { position: relative; width: 100px; height: 100px; flex-shrink: 0; }
#desk .prog-ring-d svg { transform: rotate(-90deg); }
#desk .prog-ring-pct-d {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; font-size: 24px; font-weight: 700; color: #fff;
}
#desk .prog-hero-stats { display: flex; flex-direction: column; gap: 10px; }
#desk .phs-item  { display: flex; align-items: center; gap: 8px; }
#desk .phs-dot   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
#desk .phs-text  { font-size: 13px; color: rgba(255,255,255,0.65); }
#desk .phs-val   { font-size: 13px; font-weight: 700; color: #fff; margin-left: auto; }
#desk .progress-overview {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px; margin-bottom: 28px;
}
#desk .course-prog-bar-d { display: flex; align-items: center; gap: 10px; }
#desk .cpb-bg   { flex: 1; height: 5px; background: var(--gray-100); border-radius: 999px; }
#desk .cpb-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 999px; }
#desk .cpb-pct  { font-size: 12px; font-weight: 700; color: var(--gold); flex-shrink: 0; width: 34px; text-align: right; }
#desk .status-badge { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 6px; }
#desk .sb-done { background: #E8F7EF; color: #1A8A4A; }
#desk .sb-prog { background: #FFF8E6; color: #A06800; }
#desk .sb-new  { background: var(--gray-100); color: var(--gray-500); }

/* ══════════════════════════════════════════════════
   20. DESKTOP — CERTIFICATES PAGE
══════════════════════════════════════════════════ */
#desk .certs-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}

#desk .cert-card-list {
  background: var(--white); border-radius: 14px; border: 1px solid var(--gray-100);
  overflow: hidden; cursor: pointer; transition: all 0.2s;
}
#desk .cert-card-list:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.1); transform: translateY(-2px); border-color: var(--gold);
}
#desk .cert-card-thumb {
  height: 100px; background: var(--solid-dark); position: relative;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#desk .cert-card-thumb-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(201,160,101,0.25) 0%, transparent 70%);
}
#desk .cert-card-badge {
  position: absolute; top: 10px; right: 10px; background: var(--gold); color: var(--black);
  font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; z-index: 1;
}
#desk .cert-card-body   { padding: 16px 18px 18px; }
#desk .cert-card-id     { font-size: 10px; color: var(--gray-400); font-family: monospace; margin-bottom: 6px; }
#desk .cert-card-course { font-family: Georgia, serif; font-size: 16px; font-weight: 700; color: var(--black); line-height: 1.2; margin-bottom: 8px; }
#desk .cert-card-meta   { font-size: 12px; color: var(--gray-500); line-height: 1.6; }
#desk .cert-card-score  { font-size: 13px; font-weight: 700; color: var(--gold); margin-top: 8px; }
#desk .cert-empty {
  grid-column: 1/-1; padding: 60px 24px; text-align: center;
  color: var(--gray-400); background: var(--white); border-radius: 14px;
  border: 2px dashed var(--gray-200);
}
#desk .cert-empty .ce-icon  { font-size: 40px; margin-bottom: 12px; }
#desk .cert-empty .ce-title { font-size: 16px; font-weight: 700; color: var(--gray-500); margin-bottom: 6px; }
#desk .cert-empty .ce-sub   { font-size: 13px; color: var(--gray-400); }

/* ══════════════════════════════════════════════════
   21. DESKTOP — TABLE (shared, Manage Users etc)
══════════════════════════════════════════════════ */
#desk .table-card { background: var(--white); border-radius: 14px; border: 1px solid var(--gray-100); overflow: hidden; }
#desk .table-wrap { overflow-x: auto; }
#desk .mgmt-table { width: 100%; border-collapse: collapse; }
#desk .mgmt-table thead tr { background: var(--gray-50); }
#desk .mgmt-table th {
  padding: 11px 16px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500);
  text-align: left; white-space: nowrap; border-bottom: 1px solid var(--gray-100);
}
#desk .mgmt-table td {
  padding: 13px 16px; font-size: 13px; color: var(--black);
  border-bottom: 1px solid var(--gray-50); vertical-align: middle;
}
#desk .mgmt-table tr:last-child td { border-bottom: none; }
#desk .mgmt-table tr:hover td { background: rgba(201,160,101,0.025); }
#desk .btn-tbl {
  height: 30px; padding: 0 12px; border-radius: 7px;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  cursor: pointer; border: 1.5px solid var(--gray-200);
  background: var(--white); color: var(--black); transition: all 0.18s;
}
#desk .btn-tbl:hover { border-color: var(--gold); }
#desk .btn-tbl.gold-btn { background: var(--gold); border-color: var(--gold); color: var(--black); }
#desk .btn-tbl.danger   { border-color: rgba(220,38,38,0.2); color: var(--red); }

/* ══════════════════════════════════════════════════
   22. MOBILE — EMPLOYEE PAGES (Dashboard, Courses, Progress, Certs)
══════════════════════════════════════════════════ */
#mob .dash-hero {
  background: var(--solid-dark); padding: 20px 20px 24px;
  position: relative; overflow: hidden; flex-shrink: 0;
}
#mob .dash-hero-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 80% at 100% 0%, rgba(201,160,101,0.18) 0%, transparent 65%);
  pointer-events: none;
}
#mob .dash-hero-top {
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 1;
}
#mob .dash-greeting {
  font-size: 11px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--gold);
}
#mob .dash-name {
  font-family: Georgia, serif; font-size: 22px; font-weight: 700;
  color: #fff; margin-top: 2px;
}
#mob .dash-role-tag { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 2px; }
#mob .dash-time {
  font-family: Georgia, serif; font-size: 36px; font-weight: 700;
  color: #fff; text-align: right; line-height: 1;
}
#mob .dash-date { font-size: 11px; color: rgba(255,255,255,0.35); text-align: right; margin-top: 3px; }
#mob .stats-scroll {
  display: flex; gap: 12px; overflow-x: auto;
  padding: 16px 20px; -webkit-overflow-scrolling: touch; flex-shrink: 0;
}
#mob .stats-scroll::-webkit-scrollbar { display: none; }
#mob .stat-chip {
  background: var(--white); border-radius: 14px; border: 1px solid var(--gray-100);
  padding: 14px 16px; flex-shrink: 0; min-width: 130px;
}
#mob .stat-chip-icon  { font-size: 20px; margin-bottom: 8px; }
#mob .stat-chip-num   {
  font-family: Georgia, serif; font-size: 28px; font-weight: 700;
  color: var(--black); line-height: 1;
}
#mob .stat-chip-label { font-size: 11px; color: var(--gray-500); margin-top: 3px; }
#mob .stat-chip-trend {
  font-size: 10px; font-weight: 600; padding: 2px 7px;
  border-radius: 20px; margin-top: 6px; display: inline-block;
}
#mob .mob-trend-up   { background: #E8F7EF; color: #1A8A4A; }
#mob .mob-trend-warn { background: #FEE9E8; color: var(--red); }
#mob .section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 12px; flex-shrink: 0;
}
#mob .section-title  { font-size: 15px; font-weight: 700; color: var(--black); }
#mob .section-action { font-size: 13px; font-weight: 600; color: var(--gold); cursor: pointer; }

/* Mobile My Courses */
#mob .filter-pills-m {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 14px 16px 0; -webkit-overflow-scrolling: touch; flex-shrink: 0;
}
#mob .filter-pills-m::-webkit-scrollbar { display: none; }
#mob .pill-m {
  height: 34px; padding: 0 16px; border-radius: 20px;
  border: 1.5px solid var(--gray-200); background: var(--white);
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600;
  color: var(--gray-500); cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
#mob .pill-m.active { background: var(--solid-dark); border-color: var(--solid-dark); color: #fff; }
#mob .courses-list-m { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
#mob .course-card-m {
  background: var(--white); border-radius: 18px; border: 1px solid var(--gray-100);
  overflow: hidden; cursor: pointer; transition: all 0.2s;
}
#mob .course-card-m:active { transform: scale(0.98); }
#mob .cc-thumb     { height: 140px; background: var(--solid-dark); position: relative; display: flex; align-items: center; justify-content: center; }
#mob .cc-thumb-bg  { position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 30%, rgba(201,160,101,0.2) 0%, transparent 70%); }
#mob .cc-thumb-icon { font-size: 52px; position: relative; z-index: 1; }
#mob .cc-badge { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
#mob .cb-required  { background: var(--gold); color: var(--black); }
#mob .cb-general   { background: rgba(37,99,235,0.85); color: #fff; }
#mob .cb-new       { background: var(--blue); color: #fff; }
#mob .cc-prog-bar  { height: 3px; background: var(--gray-100); }
#mob .cc-prog-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
#mob .cc-body      { padding: 16px 18px 18px; }
#mob .cc-dept      { font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 5px; }
#mob .cc-title     { font-family: Georgia, serif; font-size: 18px; font-weight: 700; color: var(--black); line-height: 1.2; margin-bottom: 8px; }
#mob .cc-meta      { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
#mob .cc-meta-item { font-size: 11.5px; color: var(--gray-500); display: flex; align-items: center; gap: 4px; }
#mob .cc-footer    { display: flex; align-items: center; justify-content: space-between; }
#mob .cc-pct       { font-size: 13px; font-weight: 700; color: var(--gold); }
#mob .cc-pct-done  { color: var(--green); }
#mob .btn-cc         { height: 36px; padding: 0 18px; border-radius: 10px; border: none; font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 700; cursor: pointer; }
#mob .btn-cc-start   { background: var(--solid-dark); color: #fff; }
#mob .btn-cc-resume  { background: var(--gold); color: var(--black); }
#mob .btn-cc-done    { background: #E8F7EF; color: #1A8A4A; }

/* Mobile My Progress */
#mob .prog-hero-m { background: var(--solid-dark); padding: 24px 20px; position: relative; overflow: hidden; flex-shrink: 0; }
#mob .prh-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 30%, rgba(201,160,101,0.18) 0%, transparent 65%); pointer-events: none; }
#mob .prh-content { display: flex; align-items: center; gap: 20px; position: relative; z-index: 1; }
#mob .prh-ring { position: relative; width: 80px; height: 80px; flex-shrink: 0; }
#mob .prh-ring svg { transform: rotate(-90deg); }
#mob .prh-ring-pct {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; font-size: 20px; font-weight: 700; color: #fff;
}
#mob .prh-info  { flex: 1; }
#mob .prh-label { font-size: 10px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
#mob .prh-title { font-family: Georgia, serif; font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 4px; }
#mob .prh-sub   { font-size: 12px; color: rgba(255,255,255,0.5); }
#mob .prog-stats-m {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255,255,255,0.08); margin-top: 20px;
  position: relative; z-index: 1; border-radius: 12px; overflow: hidden;
}
#mob .psm-item  { background: rgba(255,255,255,0.05); padding: 12px 8px; text-align: center; }
#mob .psm-num   { font-family: Georgia, serif; font-size: 20px; font-weight: 700; color: #fff; }
#mob .psm-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.4); margin-top: 2px; }
#mob .prog-course-item {
  background: var(--white); border-radius: 14px; border: 1px solid var(--gray-100);
  padding: 14px 16px; display: flex; align-items: center; gap: 14px;
  cursor: pointer; transition: all 0.15s;
}
#mob .prog-course-item:active { transform: scale(0.98); }
#mob .pci-icon  { width: 40px; height: 40px; border-radius: 10px; background: var(--solid-dark); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
#mob .pci-info  { flex: 1; min-width: 0; }
#mob .pci-title { font-size: 13px; font-weight: 600; color: var(--black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mob .pci-bar-wrap { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
#mob .pci-bar-bg   { flex: 1; height: 4px; background: var(--gray-100); border-radius: 999px; }
#mob .pci-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 999px; }
#mob .pci-pct  { font-size: 11px; font-weight: 700; color: var(--gold); flex-shrink: 0; }
#mob .pci-badge { flex-shrink: 0; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }

/* Mobile Certificates */
#mob .cert-list-m { padding: 0 16px; display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
#mob .cert-item-m {
  background: var(--white); border-radius: 16px; border: 1px solid var(--gray-100);
  overflow: hidden; cursor: pointer; transition: all 0.2s;
}
#mob .cert-item-m:active { transform: scale(0.98); }
#mob .cim-thumb { height: 80px; background: var(--solid-dark); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#mob .cim-thumb-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 30%, rgba(201,160,101,0.2) 0%, transparent 70%); }
#mob .cim-thumb-icon { font-size: 32px; position: relative; z-index: 1; }
#mob .cim-badge { position: absolute; top: 8px; right: 8px; background: var(--gold); color: var(--black); font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px; z-index: 2; }
#mob .cim-body   { padding: 14px 16px; }
#mob .cim-id     { font-size: 10px; color: var(--gray-400); font-family: monospace; margin-bottom: 4px; }
#mob .cim-course { font-family: Georgia, serif; font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 6px; }
#mob .cim-meta   { font-size: 12px; color: var(--gray-500); line-height: 1.6; }
#mob .cim-score  { font-size: 13px; font-weight: 700; color: var(--gold); margin-top: 6px; }

/* ══════════════════════════════════════════════════
   23. RESPONSIVE — 900–1200px
══════════════════════════════════════════════════ */
@media (min-width: 900px) and (max-width: 1200px) {
  #desk .stats-grid-1  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #desk .stats-grid-2  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #desk .dash-grid     { grid-template-columns: 1fr; }
  #desk .courses-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #desk .certs-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #desk .progress-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #desk .btn-tbl { padding: 0 8px; font-size: 11.5px; }
  #desk .btn-tbl svg { display: none; }
}

/* ══════════════════════════════════════════════════
   24. SHARED — AI CARD (HoD + Admin + Observer)
══════════════════════════════════════════════════ */
.ai-card {
  background: linear-gradient(135deg, #0A0A0A 0%, #1A1208 100%);
  border-radius: 16px; padding: 20px 24px; margin-bottom: 24px;
  border: 1px solid rgba(201,160,101,0.25);
  position: relative; overflow: hidden;
}
.ai-card::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(201,160,101,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.ai-card-header  { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ai-card-icon    { width: 32px; height: 32px; border-radius: 8px; background: rgba(201,160,101,0.15); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.ai-card-label   { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.ai-card-badge   { margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: rgba(201,160,101,0.15); color: var(--gold); padding: 3px 8px; border-radius: 20px; border: 1px solid rgba(201,160,101,0.3); }
/* ── Kepala kartu AI — v2.104 ── */
.ai-fresh { margin-left: auto; font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
            color: rgba(255,255,255,0.45); white-space: nowrap; flex-shrink: 0; }
.ai-fresh.stale { color: #F5B451; }
.ai-open { background: rgba(201,160,101,0.15); border: 1px solid rgba(201,160,101,0.35);
           color: var(--gold); font-family: inherit; font-size: 10.5px; font-weight: 700;
           letter-spacing: .04em; padding: 4px 10px; border-radius: 20px; cursor: pointer;
           flex-shrink: 0; transition: background .15s; white-space: nowrap; }
.ai-open:hover { background: rgba(201,160,101,0.3); }
.ai-tgl { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
          color: rgba(255,255,255,0.75); width: 26px; height: 26px; border-radius: 7px;
          cursor: pointer; font-size: 13px; line-height: 1; flex-shrink: 0;
          display: flex; align-items: center; justify-content: center; padding: 0;
          font-family: inherit; transition: background .15s; }
.ai-tgl:hover { background: rgba(201,160,101,0.3); color: #fff; }
/* Baris ringkas yang tetap terlihat saat kartu ditutup */
.ai-peek { font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.55;
           display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
           overflow: hidden; }
/* Tampil-tidaknya .ai-peek diatur JavaScript — selektor sibling tidak
   bisa dipakai karena .ai-peek berada SEBELUM badan kartu di DOM. */

.ai-summary      { font-size: 13.5px; color: rgba(255,255,255,0.85); line-height: 1.6; margin-bottom: 14px; }
.ai-insights     { display: flex; flex-direction: column; gap: 8px; }
.ai-insight-row  { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.04); }
.ai-insight-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.ai-insight-dot.red   { background: #EF4444; }
.ai-insight-dot.amber { background: #F59E0B; }
.ai-insight-dot.green { background: #10B981; }
.ai-insight-text      { font-size: 12.5px; color: rgba(255,255,255,0.75); line-height: 1.5; }
.ai-insight-text strong { color: #fff; font-weight: 600; }
.ai-row       { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; font-size: 13px; color: rgba(255,255,255,0.8); line-height: 1.5; }
.ai-dot       { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.ai-dot.red   { background: #EF4444; }
.ai-dot.amber { background: #F59E0B; }
.ai-dot.green { background: #22C55E; }
.ai-rec       { margin-top: 12px; padding: 10px 14px; background: rgba(201,160,101,0.08); border-radius: 10px; border-left: 3px solid var(--gold); }
.ai-rec-label { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.ai-rec-text  { font-size: 12.5px; color: rgba(255,255,255,0.8); line-height: 1.5; }

/* ── AI Report: Filter bar ── */
.air-filter-bar { background: var(--white); border-radius: 14px; border: 1px solid var(--gray-100); padding: 18px 22px; margin-bottom: 20px; }
.air-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.air-filter-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-400); margin-right: 4px; }
.air-filter-input { height: 36px; border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 0 10px; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--black); background: var(--gray-50); outline: none; }
.air-filter-input:focus { border-color: var(--gold); }
.air-apply-btn { height: 36px; padding: 0 16px; border-radius: 8px; background: var(--solid-dark); color: #fff; border: none; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; }
.air-apply-btn:hover { background: var(--charcoal); }
.air-quick-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.air-quick-btn { height: 32px; padding: 0 14px; border-radius: 20px; border: 1.5px solid var(--gray-200); background: var(--white); font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: var(--gray-500); cursor: pointer; transition: all 0.15s; }
.air-quick-btn:hover  { border-color: var(--gold); color: var(--gold); }
.air-quick-btn.active { background: var(--solid-dark); border-color: var(--solid-dark); color: #fff; }

/* ── AI Report: List view ── */
.air-list-header { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 10px; }
.air-list { display: flex; flex-direction: column; gap: 8px; }
.air-list-item { background: var(--white); border: 1px solid var(--gray-100); border-radius: 14px; padding: 16px 20px; display: flex; align-items: center; gap: 16px; cursor: pointer; transition: all 0.15s; }
.air-list-item:hover { border-color: var(--gold); box-shadow: 0 2px 12px rgba(201,160,101,0.1); }
.air-list-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--solid-dark); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.air-list-body { flex: 1; min-width: 0; }
.air-list-title { font-size: 14px; font-weight: 700; color: var(--black); margin-bottom: 3px; }
.air-list-sub   { font-size: 12px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.air-list-badge { padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.air-badge-critical { background: rgba(220,38,38,0.1); color: #DC2626; }
.air-badge-clear    { background: rgba(16,185,129,0.1); color: #059669; }
.air-list-chevron { color: var(--gray-300); font-size: 16px; flex-shrink: 0; }

/* ── AI Report: Detail back button ── */
.air-back-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.air-back-btn { height: 34px; padding: 0 14px; border-radius: 8px; border: 1.5px solid var(--gray-200); background: var(--white); font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--gray-600); cursor: pointer; display: flex; align-items: center; gap: 6px; }
.air-back-btn:hover { border-color: var(--gold); color: var(--gold); }
.air-detail-title { font-family: Georgia, serif; font-size: 20px; font-weight: 700; color: var(--black); }

/* ── AI Report: Detail sections ── */
.air-section { border-radius: 16px; padding: 22px 26px; margin-bottom: 16px; border: 1px solid rgba(201,160,101,0.2); background: linear-gradient(135deg, #0A0A0A 0%, #1A1208 100%); position: relative; overflow: hidden; }
.air-section::before { content:''; position:absolute; top:-40px; right:-40px; width:160px; height:160px; background:radial-gradient(circle,rgba(201,160,101,0.1) 0%,transparent 70%); pointer-events:none; }
.air-section.fraud { background: linear-gradient(135deg, #1a0505 0%, #2d0808 100%); border-color: rgba(220,38,38,0.25); }
.air-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.air-section-icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(201,160,101,0.15); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.air-section-label { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.air-section.fraud .air-section-label { color: #F87171; }
.air-section-badge { margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: rgba(201,160,101,0.15); color: var(--gold); padding: 3px 8px; border-radius: 20px; border: 1px solid rgba(201,160,101,0.3); }

/* Executive summary items */
.air-exec-summary { font-size: 13.5px; color: rgba(255,255,255,0.85); line-height: 1.65; margin-bottom: 16px; }
.air-exec-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.air-exec-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.air-exec-dot.green { background: #22C55E; }
.air-exec-dot.red   { background: #EF4444; }
.air-exec-dot.amber { background: #F59E0B; }
.air-exec-text { font-size: 13px; color: rgba(255,255,255,0.8); line-height: 1.55; }
.air-exec-text strong { color: #fff; font-weight: 700; }

/* Department analysis grid */
.air-dept-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.air-dept-cell { background: rgba(255,255,255,0.04); border-radius: 10px; padding: 12px 14px; border: 1px solid rgba(255,255,255,0.06); }
.air-dept-name { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 4px; display: flex; align-items: center; gap: 7px; }
.air-dept-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.air-dept-dot.critical { background: #EF4444; }
.air-dept-dot.review   { background: #F59E0B; }
.air-dept-dot.ontrack  { background: #22C55E; }
.air-dept-detail { font-size: 12px; color: rgba(255,255,255,0.6); line-height: 1.5; }

/* Course audit, fraud, employee rows */
.air-item-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.air-item-row:last-child { border-bottom: none; }
.air-item-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.air-item-dot.good     { background: #22C55E; }
.air-item-dot.warning  { background: #F59E0B; }
.air-item-dot.critical { background: #EF4444; }
.air-item-dot.blue     { background: #60A5FA; }
.air-item-text { font-size: 13px; color: rgba(255,255,255,0.8); line-height: 1.55; }
.air-item-text strong { color: #fff; font-weight: 700; }

/* Top 3 actions box */
.air-actions-box { margin-top: 16px; padding: 12px 16px; background: rgba(201,160,101,0.08); border-radius: 10px; border-left: 3px solid var(--gold); }
.air-actions-label { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.air-actions-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.air-actions-list li { font-size: 12.5px; color: rgba(255,255,255,0.85); line-height: 1.5; counter-increment: action-counter; display: flex; gap: 8px; }
.air-actions-list li::before { content: counter(action-counter) '.'; font-weight: 700; color: var(--gold); flex-shrink: 0; }
.air-actions-list { counter-reset: action-counter; }

/* ══════════════════════════════════════════════════
   25. DESKTOP — HOD / MANAGEMENT SHARED CSS
══════════════════════════════════════════════════ */
#desk .stat-mini-row  { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 24px; }
#desk .stat-mini      { background: var(--white); border-radius: 12px; border: 1px solid var(--gray-100); padding: 18px 20px; display: flex; align-items: center; gap: 14px; }
#desk .stat-mini-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
#desk .stat-mini-num  { font-family: Georgia, serif; font-size: 28px; font-weight: 700; color: var(--black); line-height: 1; }
#desk .stat-mini-lbl  { font-size: 11px; color: var(--gray-500); margin-top: 2px; }
#desk .mgmt-toolbar   { background: var(--white); border-radius: 12px; border: 1px solid var(--gray-100); padding: 14px 20px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#desk .mgmt-search    { flex: 1; max-width: 280px; height: 38px; border: 1.5px solid var(--gray-200); border-radius: 8px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--gray-50); }
#desk .mgmt-search input { border: none; outline: none; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--black); background: transparent; flex: 1; }
#desk .mgmt-search input::placeholder { color: var(--gray-400); }
#desk .mgmt-filter-pill { height: 34px; padding: 0 14px; border-radius: 7px; border: 1.5px solid var(--gray-200); background: var(--white); font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--gray-500); cursor: pointer; transition: all 0.18s; }
#desk .mgmt-filter-pill:hover  { border-color: var(--gold); color: var(--gold); }
#desk .mgmt-filter-pill.active { background: var(--solid-dark); border-color: var(--solid-dark); color: #fff; }
#desk .btn-add { height: 38px; padding: 0 16px; border-radius: 8px; background: var(--solid-dark); color: #fff; border: none; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 7px; transition: all 0.18s; margin-left: auto; }
#desk .btn-add:hover { background: var(--charcoal); }
#desk .user-cell { display: flex; align-items: center; gap: 10px; }
#desk .user-av   { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--black); flex-shrink: 0; }
#desk .uav1 { background: linear-gradient(135deg, #C9A065, #A07840); }
#desk .uav2 { background: linear-gradient(135deg, #6EE7B7, #059669); color: #065F46; }
#desk .uav3 { background: linear-gradient(135deg, #93C5FD, #3B82F6); color: #1E3A8A; }
#desk .uav4 { background: linear-gradient(135deg, #FCA5A5, #EF4444); color: #7F1D1D; }
#desk .uav5 { background: linear-gradient(135deg, #C4B5FD, #7C3AED); color: #3B0764; }
#desk .uav6 { background: var(--gray-100); color: var(--gray-500); }
#desk .u-name  { font-size: 13px; font-weight: 600; color: var(--black); }
#desk .u-email { font-size: 11px; color: var(--gray-500); margin-top: 1px; }
#desk .role-chip { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 6px; letter-spacing: 0.05em; }
#desk .rc-it    { background: var(--solid-dark); color: #fff; }
#desk .rc-hrm   { background: rgba(201,160,101,0.15); color: #8B6914; }
#desk .rc-hod   { background: rgba(16,185,129,0.1); color: #065F46; }
#desk .rc-staff { background: var(--gray-100); color: var(--gray-700); }
#desk .prog-mini    { display: flex; align-items: center; gap: 8px; }
#desk .prog-bar-d   { width: 70px; height: 4px; background: var(--gray-100); border-radius: 999px; }
#desk .prog-fill-d  { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 999px; }
#desk .prog-pct-d   { font-size: 11.5px; font-weight: 600; color: var(--gold); }
#desk .action-btns  { display: flex; gap: 6px; }
#desk .pagination   { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--gray-100); }
#desk .pagination-info { font-size: 13px; color: var(--gray-500); }
#desk .pagination-btns { display: flex; gap: 4px; }
#desk .pg-btn { width: 32px; height: 32px; border-radius: 7px; border: 1.5px solid var(--gray-200); background: var(--white); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--black); cursor: pointer; transition: all 0.18s; display: flex; align-items: center; justify-content: center; }
#desk .pg-btn:hover  { border-color: var(--gold); }
#desk .pg-btn.active { background: var(--solid-dark); color: #fff; border-color: var(--solid-dark); }
#desk .log-flag      { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
#desk .flag-normal   { background: #E8F7EF; color: #1A8A4A; }
#desk .flag-warning  { background: #FFF8E6; color: #A06800; }
#desk .flag-critical { background: #FEE9E8; color: var(--red); }
#desk .report-summary-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; margin-bottom: 24px; }
#desk .rep-sum-card  { background: var(--white); border-radius: 12px; border: 1px solid var(--gray-100); padding: 16px; text-align: center; }
#desk .rep-sum-num   { font-family: Georgia, serif; font-size: 28px; font-weight: 700; color: var(--black); }
#desk .rep-sum-label { font-size: 11px; color: var(--gray-500); margin-top: 3px; }
#desk .ss-input  { height: 38px; border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 0 12px; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--black); background: var(--gray-50); outline: none; transition: all 0.2s; }
#desk .ss-input:focus  { border-color: var(--gold); background: #fff; }
#desk .ss-select { height: 38px; border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 0 10px; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--black); background: var(--gray-50); outline: none; cursor: pointer; }
#desk .ss-select:focus { border-color: var(--gold); }

/* ══════════════════════════════════════════════════
   26. MOBILE — HOD PAGES
══════════════════════════════════════════════════ */
#mob .stat-mini-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 14px 16px; -webkit-overflow-scrolling: touch; flex-shrink: 0; }
#mob .stat-mini-scroll::-webkit-scrollbar { display: none; }
#mob .stat-chip-m     { background: var(--white); border-radius: 12px; border: 1px solid var(--gray-100); padding: 12px 14px; flex-shrink: 0; min-width: 90px; }
#mob .scm-icon  { font-size: 20px; margin-bottom: 4px; }
#mob .scm-num   { font-family: Georgia, serif; font-size: 22px; font-weight: 700; color: var(--black); line-height: 1; }
#mob .scm-label { font-size: 10px; color: var(--gray-500); margin-top: 2px; }
#mob .team-item-m { background: var(--white); border-radius: 14px; border: 1px solid var(--gray-100); padding: 14px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: all 0.15s; }
#mob .team-item-m:active { transform: scale(0.98); }
#mob .tm-av   { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--black); flex-shrink: 0; }
#mob .tm-info { flex: 1; min-width: 0; }
#mob .tm-name { font-size: 13px; font-weight: 600; color: var(--black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mob .tm-meta { font-size: 11px; color: var(--gray-500); margin-top: 2px; }
#mob .tm-bar-wrap { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
#mob .tm-bar-bg   { flex: 1; height: 4px; background: var(--gray-100); border-radius: 999px; }
#mob .tm-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 999px; }
#mob .tm-pct   { font-size: 11px; font-weight: 700; color: var(--gold); flex-shrink: 0; }
#mob .tm-badge { flex-shrink: 0; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 12px; }
#mob .tmb-ok   { background: #E8F7EF; color: #1A8A4A; }
#mob .tmb-warn { background: #FFF8E6; color: #A06800; }
#mob .tmb-bad  { background: #FEE9E8; color: var(--red); }
#mob .mob-form-card { background: var(--white); border-radius: 16px; border: 1px solid var(--gray-100); padding: 20px; margin: 0 16px 16px; }
#mob .mob-form-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--black); margin-bottom: 8px; display: block; }
#mob .mob-form-select { width: 100%; height: 48px; border: 1.5px solid var(--gray-200); border-radius: 12px; padding: 0 14px; font-family: 'Inter', sans-serif; font-size: 14px; color: var(--black); background: var(--gray-50); outline: none; -webkit-appearance: none; }
#mob .mob-form-select:focus { border-color: var(--gold); background: #fff; }
#mob .mob-form-input { width: 100%; height: 48px; border: 1.5px solid var(--gray-200); border-radius: 12px; padding: 0 14px; font-family: 'Inter', sans-serif; font-size: 14px; color: var(--black); background: var(--gray-50); outline: none; }
#mob .mob-form-input:focus { border-color: var(--gold); background: #fff; }
#mob .btn-full { width: calc(100% - 32px); height: 52px; margin: 0 16px 16px; border-radius: 14px; border: none; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
#mob .btn-full-black { background: var(--solid-dark); color: #fff; }
#mob .btn-full-gold  { background: var(--gold); color: var(--black); }

/* ══════════════════════════════════════════════════
   27. SHARED — AI DEPT GRID + STATS-GRID-2
══════════════════════════════════════════════════ */
.ai-dept-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.ai-dept-card  { background: rgba(255,255,255,0.04); border-radius: 10px; padding: 12px 14px; border: 1px solid rgba(255,255,255,0.06); }
.ai-dept-name  { font-size: 11px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.ai-dept-status{ font-size: 11px; color: rgba(255,255,255,0.6); line-height: 1.4; }
#desk .stats-grid-2 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-bottom: 28px; }
#desk .view-only-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(201,160,101,0.1); border: 1px solid rgba(201,160,101,0.25);
  border-radius: 20px; padding: 5px 14px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold);
}

/* ══════════════════════════════════════════════════
   28. DESKTOP — ADMIN PAGES
══════════════════════════════════════════════════ */

/* --- Activity List (Dashboard) --- */
#desk .activity-list   { display: flex; flex-direction: column; }
#desk .activity-item   { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--gray-50); }
#desk .activity-item:last-child { border-bottom: none; }
#desk .activity-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; flex-shrink: 0; }
#desk .av-gold  { background: linear-gradient(135deg,var(--gold),#A07840); color: var(--black); }
#desk .av-gray  { background: var(--gray-100); color: var(--gray-600); }
#desk .av-red   { background: rgba(239,68,68,0.12); color: var(--red); }
#desk .activity-info   { flex: 1; min-width: 0; }
#desk .activity-name   { font-size: 13px; font-weight: 600; color: var(--black); }
#desk .activity-desc   { font-size: 12px; color: var(--gray-500); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#desk .activity-badge  { font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px; flex-shrink: 0; }
#desk .badge-complete  { background: #E8F7EF; color: #1A8A4A; }
#desk .badge-progress  { background: rgba(201,160,101,0.12); color: #8B6914; }
#desk .badge-fail      { background: #FEE9E8; color: var(--red); }
#desk .badge-flag      { background: #FFF8E6; color: #A06800; }
#desk .activity-time   { font-size: 11px; color: var(--gray-400); flex-shrink: 0; }

/* --- Dept Progress (Dashboard) --- */
#desk .dept-progress-list { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; }
#desk .dept-row            { display: flex; flex-direction: column; gap: 6px; }
#desk .dept-row-top        { display: flex; justify-content: space-between; align-items: center; }
#desk .dept-name           { font-size: 13px; font-weight: 600; color: var(--black); }
#desk .dept-pct            { font-size: 12.5px; font-weight: 700; color: var(--gold); }
#desk .dept-bar-bg         { height: 5px; background: var(--gray-100); border-radius: 999px; overflow: hidden; }
#desk .dept-bar-fill       { height: 100%; background: linear-gradient(90deg, var(--gold), #E8C97A); border-radius: 999px; transition: width 0.4s ease; }
/* v2.117 — mobile TIDAK PERNAH punya CSS untuk 5 class ini (dept-progress-list
   dipakai di loadAdminDashboard mobile), padahal HTML-nya dipakai. Tanpa
   CSS ini nama+persen nempel jadi satu baris tanpa jarak/warna/progress bar
   ("IT0%"). Disalin persis dari desktop, ukuran font sedikit lebih kecil
   mengikuti gaya mobile lain di file ini. */
#mob .dept-progress-list { display: flex; flex-direction: column; gap: 12px; }
#mob .dept-row            { display: flex; flex-direction: column; gap: 6px; }
#mob .dept-row-top        { display: flex; justify-content: space-between; align-items: center; }
#mob .dept-name           { font-size: 13px; font-weight: 600; color: var(--black); }
#mob .dept-pct            { font-size: 12px; font-weight: 700; color: var(--gold); }
#mob .dept-bar-bg         { height: 5px; background: var(--gray-100); border-radius: 999px; overflow: hidden; }
#mob .dept-bar-fill       { height: 100%; background: linear-gradient(90deg, var(--gold), #E8C97A); border-radius: 999px; transition: width 0.4s ease; }

/* --- Quick Actions (Dashboard) --- */
#desk .quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 20px; }
#desk .qa-btn { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--gray-200); background: var(--gray-50); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--black); cursor: pointer; transition: all 0.18s; }
#desk .qa-btn:hover { border-color: var(--gold); background: rgba(201,160,101,0.06); }
#desk .qa-btn span { font-size: 16px; }

/* --- Lock Indicator (Users table) --- */
#desk .lock-indicator { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
#desk .lock-dot       { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
#desk .ld-active      { background: #10B981; }
#desk .ld-locked      { background: var(--red); }
#desk .ld-inactive    { background: var(--gray-300); }

/* --- stat-mini-row 5-col variant --- */
#desk .stat-mini-row-5 { grid-template-columns: repeat(5,1fr); }

/* --- Course Mgmt Grid --- */
#desk .course-mgmt-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
#desk .course-mgmt-card { border-radius: 14px; border: 1px solid var(--gray-100); background: var(--white); overflow: hidden; transition: box-shadow 0.18s; }
#desk .course-mgmt-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
#desk .cmg-thumb     { position: relative; height: 110px; background: var(--solid-dark); display: flex; align-items: center; justify-content: center; overflow: hidden; }
#desk .cmg-thumb-bg  { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(201,160,101,0.18) 0%, transparent 65%); }
#desk .cmg-thumb-icon{ font-size: 40px; position: relative; z-index: 1; }
#desk .cmg-status    { position: absolute; top: 10px; right: 10px; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; z-index: 1; }
#desk .s-published   { background: rgba(16,185,129,0.2); color: #10B981; }
#desk .s-draft       { background: rgba(245,158,11,0.2); color: #F59E0B; }
#desk .s-archived    { background: rgba(120,116,112,0.2); color: var(--gray-500); }
#desk .cmg-progress-bar  { height: 3px; background: var(--gray-100); }
#desk .cmg-progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold), #E8C97A); }
#desk .cmg-body      { padding: 14px 16px; }
#desk .cmg-dept      { font-size: 10.5px; font-weight: 700; color: var(--gray-500); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
#desk .cmg-title     { font-size: 13.5px; font-weight: 700; color: var(--black); line-height: 1.35; margin-bottom: 8px; }
/* v2.118 E4 -- course_id kecil, mono-font, abu-abu, di bawah judul.
   var(--gray-500) dipakai (bukan var(--black)) supaya konsisten
   "abu-abu" di light maupun dark mode -- var(--gray-500) sudah
   didefinisikan ulang otomatis oleh body.dark-mode. */
#desk .cmg-course-id { font-family: 'SF Mono', Consolas, monospace; font-size: 10.5px; color: var(--gray-500); margin-bottom: 8px; margin-top: -4px; }
#desk .cmg-stats     { display: flex; gap: 10px; font-size: 11.5px; color: var(--gray-500); margin-bottom: 12px; flex-wrap: wrap; }
#desk .cmg-stat      { display: flex; align-items: center; gap: 4px; }
#desk .cmg-footer    { display: flex; gap: 6px; }
#desk .add-course-cta{ border-radius: 14px; border: 2px dashed var(--gray-200); background: var(--gray-50); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px; cursor: pointer; transition: all 0.18s; min-height: 196px; }
#desk .add-course-cta:hover { border-color: var(--gold); background: rgba(201,160,101,0.04); }
#desk .add-course-cta .icon{ font-size: 28px; margin-bottom: 8px; }
#desk .add-course-cta .lbl { font-size: 14px; font-weight: 700; color: var(--black); }
#desk .add-course-cta .sub { font-size: 12px; color: var(--gray-400); margin-top: 3px; }

/* --- Modal Overlay (Add User / Edit User) --- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.show { display: flex; }
.modal { background: var(--white); border-radius: 18px; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 80px rgba(0,0,0,0.2); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 0; }
.modal-title  { font-family: Georgia, serif; font-size: 20px; font-weight: 700; color: var(--black); }
.modal-close  { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--gray-200); background: var(--white); display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; color: var(--gray-500); transition: all 0.15s; }
.modal-close:hover { background: var(--gray-50); }
.modal-body   { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.modal-footer { padding: 0 24px 20px; display: flex; justify-content: flex-end; gap: 10px; }
.m-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.m-field{ display: flex; flex-direction: column; gap: 6px; }
.m-label{ font-size: 11px; font-weight: 700; color: var(--gray-600); text-transform: uppercase; letter-spacing: .08em; }
.m-input { height: 40px; border: 1.5px solid var(--gray-200); border-radius: 9px; padding: 0 12px; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--black); background: var(--gray-50); outline: none; transition: border-color 0.18s; }
.m-input:focus  { border-color: var(--gold); background: #fff; }
.m-select { height: 40px; border: 1.5px solid var(--gray-200); border-radius: 9px; padding: 0 12px; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--black); background: var(--gray-50); outline: none; cursor: pointer; }
.m-select:focus { border-color: var(--gold); }

/* --- Mobile Admin pages --- */
#mob .admin-stat-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 14px 16px; -webkit-overflow-scrolling: touch; }
#mob .admin-stat-scroll::-webkit-scrollbar { display: none; }
#mob .course-card-adm { background: var(--white); border-radius: 14px; border: 1px solid var(--gray-100); overflow: hidden; }
#mob .cca-thumb  { height: 72px; background: var(--solid-dark); position: relative; display: flex; align-items: center; justify-content: center; }
#mob .cca-icon   { font-size: 28px; position: relative; z-index: 1; }
#mob .cca-status { position: absolute; top: 8px; right: 8px; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; }
#mob .cca-body   { padding: 12px 14px; }
#mob .cca-title  { font-size: 13px; font-weight: 600; color: var(--black); margin-bottom: 4px; }
/* v2.118 E4 -- paritas dengan #desk .cmg-course-id */
#mob .cca-course-id { font-family: 'SF Mono', Consolas, monospace; font-size: 10px; color: var(--gray-500); margin-bottom: 4px; }
#mob .cca-meta   { font-size: 11px; color: var(--gray-500); }

/* ══════════════════════════════════════════════════
   30. DESKTOP + MOBILE — ATTENDANCE PAGE
══════════════════════════════════════════════════ */

/* Desktop */
#desk .attendance-layout   { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
#desk .event-list-wrap     { background: var(--white); border-radius: 14px; border: 1px solid var(--gray-100); overflow: hidden; }
#desk .event-item          { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--gray-50); cursor: pointer; transition: background 0.15s; }
#desk .event-item:last-child { border-bottom: none; }
#desk .event-item:hover    { background: var(--gray-50); }
#desk .event-icon-wrap     { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
#desk .ei-training { background: rgba(37,99,235,0.1); }
#desk .ei-party    { background: rgba(201,160,101,0.12); }
#desk .ei-csr      { background: rgba(16,185,129,0.1); }
#desk .ei-general  { background: rgba(124,58,237,0.1); }
#desk .ei-iv       { background: rgba(220,38,38,0.08); }
#desk .event-info  { flex: 1; min-width: 0; }
#desk .event-name  { font-size: 13.5px; font-weight: 600; color: var(--black); }
#desk .event-meta  { font-size: 12px; color: var(--gray-500); margin-top: 3px; }
#desk .event-count { text-align: right; flex-shrink: 0; }
#desk .event-count-num   { font-family: Georgia,serif; font-size: 24px; font-weight: 700; color: var(--black); }
#desk .event-count-label { font-size: 11px; color: var(--gray-500); }
#desk .event-type-chip   { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 2px 8px; border-radius: 5px; margin-top: 6px; }
#desk .etc-training { background: rgba(37,99,235,0.1);   color: var(--blue); }
#desk .etc-party    { background: rgba(201,160,101,0.12); color: #8B6914; }
#desk .etc-csr      { background: rgba(16,185,129,0.1);   color: #065F46; }
#desk .etc-general  { background: rgba(124,58,237,0.1);   color: #7C3AED; }
#desk .etc-iv       { background: rgba(220,38,38,0.08);   color: var(--red); }
#desk .att-side-card  { background: var(--white); border-radius: 14px; border: 1px solid var(--gray-100); padding: 20px; margin-bottom: 16px; }
#desk .att-side-title { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 14px; }
#desk .detail-info-list { display: flex; flex-direction: column; gap: 10px; }
#desk .detail-info-row  { display: flex; justify-content: space-between; align-items: center; }
#desk .detail-info-key  { font-size: 12px; color: var(--gray-500); }
#desk .detail-info-val  { font-size: 12.5px; font-weight: 600; color: var(--black); }

/* Mobile */
#mob .att-stats-m         { display: flex; gap: 10px; overflow-x: auto; padding: 14px 16px; -webkit-overflow-scrolling: touch; flex-shrink: 0; }
#mob .att-stats-m::-webkit-scrollbar { display: none; }
#mob .att-stat-chip       { background: var(--white); border-radius: 12px; border: 1px solid var(--gray-100); padding: 12px 14px; flex-shrink: 0; min-width: 80px; text-align: center; }
#mob .asc-icon  { font-size: 20px; margin-bottom: 4px; }
#mob .asc-num   { font-family: Georgia,serif; font-size: 22px; font-weight: 700; color: var(--black); }
#mob .asc-label { font-size: 10px; color: var(--gray-500); }
#mob .att-event-list      { padding: 0 16px; display: flex; flex-direction: column; gap: 12px; }
#mob .att-event-card      { background: var(--white); border-radius: 16px; border: 1px solid var(--gray-100); padding: 16px; cursor: pointer; transition: all 0.2s; }
#mob .att-event-card:active { transform: scale(0.98); }
#mob .aec-top   { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
#mob .aec-icon  { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
#mob .aec-info  { flex: 1; min-width: 0; }
#mob .aec-name  { font-size: 14px; font-weight: 700; color: var(--black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mob .aec-date  { font-size: 12px; color: var(--gray-500); margin-top: 2px; }
#mob .aec-stats { display: flex; gap: 12px; padding-top: 10px; border-top: 1px solid var(--gray-50); }
#mob .aec-stat  { flex: 1; text-align: center; }
#mob .aec-stat-num   { font-size: 20px; font-weight: 700; color: var(--black); font-family: Georgia,serif; }
#mob .aec-stat-label { font-size: 10px; color: var(--gray-500); }

/* ══════════════════════════════════════════════════
   29. DESKTOP — BATCH 6 (Reports, ActLog, Settings, Profile)
══════════════════════════════════════════════════ */

/* --- Activity Log --- */
#desk .log-stats-row   { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; margin-bottom: 20px; }
#desk .log-stat-card   { background: var(--white); border: 1px solid var(--gray-100); border-radius: 12px; padding: 16px 18px; text-align: center; }
#desk .log-stat-num    { font-family: Georgia,serif; font-size: 26px; font-weight: 700; color: var(--black); }
#desk .log-stat-label  { font-size: 11px; color: var(--gray-500); margin-top: 3px; }
#desk .immutable-banner{ display: flex; align-items: center; gap: 10px; background: rgba(201,160,101,0.08); border: 1px solid rgba(201,160,101,0.2); border-radius: 10px; padding: 10px 16px; margin-bottom: 16px; font-size: 12.5px; color: var(--gray-600); }
#desk .log-filter-bar  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
#desk .log-id          { font-family: monospace; font-size: 11.5px; color: var(--gray-500); }
#desk .log-timestamp   { font-size: 12px; color: var(--gray-400); white-space: nowrap; }
#desk .log-event-type  { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
#desk .let-auth        { background: rgba(59,130,246,0.1);  color: #2563EB; }
#desk .let-training    { background: rgba(201,160,101,0.12); color: #8B6914; }
#desk .let-quiz        { background: rgba(139,92,246,0.1);  color: #7C3AED; }
#desk .let-admin       { background: rgba(16,185,129,0.1);  color: #065F46; }
#desk .let-system      { background: var(--gray-100);        color: var(--gray-600); }

/* --- Profile --- */
#desk .profile-layout       { display: grid; grid-template-columns: 280px 1fr; gap: 20px; }
#desk .profile-card         { background: var(--white); border: 1px solid var(--gray-100); border-radius: 16px; overflow: hidden; }
#desk .profile-cover        { height: 80px; position: relative; background: var(--solid-dark); }
#desk .profile-cover-bg     { position: absolute; inset: 0; background: radial-gradient(ellipse at 60% 50%, rgba(201,160,101,0.25) 0%, transparent 65%); }
#desk .profile-avatar-wrap  { display: flex; justify-content: center; margin-top: -30px; position: relative; z-index: 1; }
#desk .profile-avatar       { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg,var(--gold),#A07840); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: var(--black); border: 3px solid var(--white); }
#desk .profile-info         { padding: 10px 20px 20px; }
#desk .profile-name         { font-family: Georgia,serif; font-size: 17px; font-weight: 700; color: var(--black); text-align: center; margin-bottom: 4px; }
#desk .profile-role-chip    { text-align: center; font-size: 11px; font-weight: 700; color: var(--gray-500); margin-bottom: 16px; }
#desk .profile-detail-list  { display: flex; flex-direction: column; gap: 12px; }
#desk .profile-detail-row   { display: flex; align-items: flex-start; gap: 10px; }
#desk .profile-detail-icon  { flex-shrink: 0; margin-top: 2px; color: var(--gray-400); }
#desk .profile-detail-lbl   { font-size: 10.5px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: .08em; }
#desk .profile-detail-text  { font-size: 13px; color: var(--black); margin-top: 1px; }
#desk .profile-stats-grid   { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-top: 16px; }
#desk .profile-stat-box     { background: var(--gray-50); border-radius: 10px; padding: 10px; text-align: center; }
#desk .profile-stat-num     { font-family: Georgia,serif; font-size: 20px; font-weight: 700; color: var(--black); }
#desk .profile-stat-label   { font-size: 10px; color: var(--gray-500); margin-top: 1px; }
#desk .profile-right-col    { display: flex; flex-direction: column; gap: 16px; }
#desk .profile-section      { background: var(--white); border: 1px solid var(--gray-100); border-radius: 14px; }
#desk .profile-section-hdr  { padding: 14px 20px; border-bottom: 1px solid var(--gray-50); }
#desk .profile-section-title{ font-size: 13.5px; font-weight: 700; color: var(--black); }
#desk .profile-section-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }

/* --- Settings --- */
#desk .settings-layout   { display: grid; grid-template-columns: 200px 1fr; gap: 20px; }
#desk .settings-nav-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: 14px; padding: 10px; height: fit-content; position: sticky; top: 20px; }
#desk .sn-item           { padding: 10px 14px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--gray-600); cursor: pointer; transition: all 0.15s; margin-bottom: 2px; }
#desk .sn-item:hover     { background: var(--gray-50); color: var(--black); }
#desk .sn-item.active    { background: var(--solid-dark); color: #fff; font-weight: 600; }
#desk .settings-section  { background: var(--white); border: 1px solid var(--gray-100); border-radius: 14px; margin-bottom: 16px; overflow: hidden; }
#desk .ss-header         { padding: 14px 20px; border-bottom: 1px solid var(--gray-50); background: var(--gray-50); }
#desk .ss-title          { font-size: 13.5px; font-weight: 700; color: var(--black); }
#desk .ss-body           { display: flex; flex-direction: column; }
#desk .ss-row            { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--gray-50); gap: 16px; }
#desk .ss-row:last-child { border-bottom: none; }
#desk .ss-key            { font-size: 13px; font-weight: 600; color: var(--black); }
#desk .ss-desc           { font-size: 11.5px; color: var(--gray-500); margin-top: 2px; }
#desk .toggle            { width: 44px; height: 24px; border-radius: 12px; background: var(--gray-200); position: relative; cursor: pointer; flex-shrink: 0; transition: background 0.2s; }
#desk .toggle.on         { background: var(--solid-dark); }
#desk .toggle-knob       { width: 18px; height: 18px; border-radius: 50%; background: #fff; position: absolute; top: 3px; left: 3px; transition: left 0.2s; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
#desk .toggle.on .toggle-knob { left: 23px; }

/* --- Mobile Batch 6 --- */
#mob .log-item-m   { background: var(--white); border-radius: 14px; border: 1px solid var(--gray-100); padding: 14px 16px; }
#mob .lc-top       { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
#mob .lc-av        { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
#mob .lc-name      { font-size: 13px; font-weight: 600; color: var(--black); }
#mob .lc-type      { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
#mob .lc-desc      { font-size: 12px; color: var(--gray-600); line-height: 1.5; margin-bottom: 8px; }
#mob .lc-bottom    { display: flex; align-items: center; justify-content: space-between; }
#mob .lc-device    { font-size: 10.5px; color: var(--gray-400); }
#mob .log-flag-m   { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 12px; }
#mob .lf-normal    { background: #E8F7EF; color: #1A8A4A; }
#mob .lf-warning   { background: #FFF8E6; color: #A06800; }
#mob .lf-critical  { background: #FEE9E8; color: var(--red); }
#mob .profile-hero-m  { position: relative; overflow: hidden; padding: 28px 20px 20px; background: var(--solid-dark); }
#mob .ph-bg           { position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 30%, rgba(201,160,101,0.2) 0%, transparent 65%); pointer-events: none; }
#mob .ph-top          { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; position: relative; z-index: 1; }
#mob .ph-avatar       { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg,var(--gold),#A07840); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: var(--black); border: 2px solid rgba(255,255,255,0.2); }
#mob .ph-edit         { height: 32px; padding: 0 14px; border-radius: 20px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; font-family: Inter,sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; }
#mob .ph-name         { font-family: Georgia,serif; font-size: 20px; font-weight: 700; color: #fff; position: relative; z-index: 1; }
#mob .ph-role         { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 2px; position: relative; z-index: 1; }
#mob .ph-stats        { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-top: 16px; position: relative; z-index: 1; }
#mob .ph-stat         { background: rgba(255,255,255,0.07); border-radius: 10px; padding: 10px 8px; text-align: center; }
#mob .ph-stat-num     { font-family: Georgia,serif; font-size: 18px; font-weight: 700; color: #fff; }
#mob .ph-stat-label   { font-size: 9px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }
#mob .settings-item-m { background: var(--white); border-radius: 14px; border: 1px solid var(--gray-100); overflow: hidden; margin-bottom: 12px; }
#mob .sim-header      { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--gray-50); background: var(--gray-50); }
#mob .sim-title       { font-size: 13px; font-weight: 700; color: var(--black); }
#mob .sim-row         { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--gray-50); gap: 12px; }
#mob .sim-row:last-child { border-bottom: none; }
#mob .sim-key         { font-size: 13px; font-weight: 600; color: var(--black); }
#mob .sim-desc        { font-size: 11px; color: var(--gray-500); margin-top: 1px; }
#mob .sim-input       { width: 70px; height: 36px; border: 1.5px solid var(--gray-200); border-radius: 8px; text-align: center; font-family: Inter,sans-serif; font-size: 13px; color: var(--black); background: var(--gray-50); outline: none; }
#mob .sim-toggle      { width: 40px; height: 22px; border-radius: 11px; background: var(--gray-200); position: relative; cursor: pointer; flex-shrink: 0; transition: background 0.2s; }
#mob .sim-toggle.on   { background: var(--solid-dark); }
#mob .sim-toggle-knob { width: 16px; height: 16px; border-radius: 50%; background: #fff; position: absolute; top: 3px; left: 3px; transition: left 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
#mob .sim-toggle.on .sim-toggle-knob { left: 21px; }

/* ══════════════════════════════════════════════════
   31. COURSE DETAIL · VIDEO · PDF · QUIZ
══════════════════════════════════════════════════ */

/* ── Course Detail Layout ── */
#desk .course-detail-layout { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
#desk .course-detail-header { background: var(--solid-dark); border-radius: 16px; padding: 28px 28px 24px; margin-bottom: 20px; position: relative; overflow: hidden; }
#desk .cdh-bg  { position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 20%, rgba(201,160,101,0.18) 0%, transparent 65%); pointer-events: none; }
#desk .cdh-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; position: relative; z-index: 1; }
#desk .cdh-title   { font-family: Georgia,serif; font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 6px; position: relative; z-index: 1; }
#desk .cdh-desc    { font-size: 13.5px; color: rgba(255,255,255,0.5); line-height: 1.6; margin-bottom: 16px; position: relative; z-index: 1; }
#desk .cdh-meta    { display: flex; align-items: center; gap: 20px; position: relative; z-index: 1; }
#desk .cdh-meta-item { font-size: 12px; color: rgba(255,255,255,0.45); display: flex; align-items: center; gap: 5px; }
#desk .cdh-progress-wrap { margin-top: 16px; position: relative; z-index: 1; }
#desk .cdh-progress-label { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,0.4); margin-bottom: 6px; }
#desk .cdh-progress-bar   { height: 5px; background: rgba(255,255,255,0.1); border-radius: 999px; }
#desk .cdh-progress-fill  { height: 100%; background: linear-gradient(90deg, var(--gold), #E8C97A); border-radius: 999px; transition: width 0.4s; }

/* ── Module List ── */
#desk .module-list  { background: var(--white); border-radius: 14px; border: 1px solid var(--gray-100); overflow: hidden; }
#desk .module-item  { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--gray-50); cursor: pointer; transition: background 0.15s; position: relative; }
#desk .module-item:last-child  { border-bottom: none; }
#desk .module-item:hover       { background: var(--gray-50); }
#desk .module-item.locked      { opacity: 0.5; cursor: not-allowed; }
#desk .module-item.locked:hover{ background: transparent; }
#desk .module-item.completed   { background: rgba(16,185,129,0.03); }
#desk .mod-num  { width: 28px; height: 28px; border-radius: 50%; background: var(--gray-100); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--gray-500); flex-shrink: 0; }
#desk .module-item.completed .mod-num { background: var(--green); color: #fff; }
#desk .mod-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
#desk .mod-video { background: rgba(59,130,246,0.1); }
#desk .mod-pdf   { background: rgba(239,68,68,0.08); }
#desk .mod-quiz  { background: rgba(201,160,101,0.12); }
#desk .mod-info  { flex: 1; min-width: 0; }
#desk .mod-title { font-size: 13.5px; font-weight: 600; color: var(--black); margin-bottom: 3px; }
#desk .mod-meta  { font-size: 12px; color: var(--gray-500); }
#desk .mod-status{ flex-shrink: 0; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
#desk .ms-done   { background: #E8F7EF; color: #1A8A4A; }
#desk .ms-active { background: rgba(201,160,101,0.12); color: #8B6914; }
#desk .ms-locked { background: var(--gray-100); color: var(--gray-400); }
#desk .mod-lock  { position: absolute; right: 20px; color: var(--gray-300); font-size: 14px; }

/* ── Course Detail Sidebar ── */
#desk .cd-side-card  { background: var(--white); border-radius: 14px; border: 1px solid var(--gray-100); padding: 20px; margin-bottom: 16px; }
#desk .cd-side-title { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 14px; }
#desk .cd-side-row   { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--gray-50); font-size: 13px; }
#desk .cd-side-row:last-child { border-bottom: none; }
#desk .cd-side-key   { color: var(--gray-500); }
#desk .cd-side-val   { font-weight: 600; color: var(--black); }
#desk .btn-start-course { width: 100%; height: 48px; border-radius: 12px; border: none; background: var(--solid-dark); color: #fff; font-family: 'Inter',sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
#desk .btn-start-course:hover { background: var(--charcoal); }

/* ── VIDEO PAGE ── */
#desk .video-page-layout { display: grid; grid-template-columns: 1fr 280px; gap: 20px; align-items: start; }
#desk .video-main { background: var(--white); border-radius: 16px; border: 1px solid var(--gray-100); overflow: hidden; }
#desk .video-header { background: var(--solid-dark); padding: 16px 20px; display: flex; align-items: center; gap: 12px; }
#desk .video-back-btn { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.5); font-size: 12.5px; cursor: pointer; transition: color 0.15s; }
#desk .video-back-btn:hover { color: #fff; }
#desk .video-mod-title { font-size: 14px; font-weight: 700; color: #fff; flex: 1; }
#desk .video-container { position: relative; background: #000; aspect-ratio: 16/9; width: 100%; }
#desk .video-iframe    { width: 100%; height: 100%; border: none; display: block; }
#desk .video-overlay   { position: absolute; inset: 0; z-index: 5; cursor: not-allowed; background: transparent; pointer-events: none; }
#desk .video-controls  { padding: 16px 20px; border-top: 1px solid var(--gray-100); }
#desk .video-prog-bar  { height: 6px; background: var(--gray-100); border-radius: 999px; margin-bottom: 10px; overflow: hidden; }
#desk .video-prog-fill { height: 100%; background: linear-gradient(90deg,var(--gold),#E8C97A); border-radius: 999px; transition: width 0.5s; }
#desk .video-ctrl-row  { display: flex; align-items: center; justify-content: space-between; }
#desk .video-pct       { font-size: 13px; font-weight: 700; color: var(--gold); }
#desk .video-warn      { font-size: 12px; color: var(--gray-400); }
#desk .video-side      { display: flex; flex-direction: column; gap: 14px; }
#desk .video-info-card { background: var(--white); border-radius: 14px; border: 1px solid var(--gray-100); padding: 18px; }
#desk .vi-label { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 10px; }
#desk .vi-title { font-size: 14px; font-weight: 700; color: var(--black); margin-bottom: 6px; }
#desk .vi-desc  { font-size: 12.5px; color: var(--gray-500); line-height: 1.6; }
#desk .video-next-btn  { width: 100%; height: 44px; border-radius: 11px; border: none; background: var(--green); color: #fff; font-family: 'Inter',sans-serif; font-size: 13.5px; font-weight: 700; cursor: pointer; display: none; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s; }
#desk .video-next-btn.show { display: flex; }
#desk .tab-warn-banner { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); border-radius: 10px; padding: 10px 14px; font-size: 12.5px; color: var(--red); display: none; margin-bottom: 10px; }
#desk .tab-warn-banner.show { display: block; }

/* ── PDF PAGE ── */
#desk .pdf-page-layout  { display: grid; grid-template-columns: 1fr 280px; gap: 20px; align-items: start; }
#desk .pdf-main         { background: var(--white); border-radius: 16px; border: 1px solid var(--gray-100); overflow: hidden; }
#desk .pdf-header       { background: var(--solid-dark); padding: 14px 20px; display: flex; align-items: center; gap: 12px; }
#desk .pdf-back-btn     { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.5); font-size: 12.5px; cursor: pointer; transition: color 0.15s; }
#desk .pdf-back-btn:hover { color: #fff; }
#desk .pdf-mod-title    { font-size: 14px; font-weight: 700; color: #fff; flex: 1; }
#desk .pdf-container    { width: 100%; height: 840px; min-height: 640px; background: #F1F3F5; position: relative; }
#desk .pdf-iframe       { width: 100%; height: 100%; border: none; display: block; }
#desk .pdf-controls     { padding: 14px 20px; border-top: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#desk .pdf-page-indicator { font-size: 13px; font-weight: 600; color: var(--black); }
#desk .pdf-progress-bar-bg   { flex: 1; height: 5px; background: var(--gray-100); border-radius: 999px; }
#desk .pdf-progress-bar-fill { height: 100%; background: linear-gradient(90deg,var(--gold),#E8C97A); border-radius: 999px; transition: width 0.3s; }
#desk .pdf-progress-pct      { font-size: 12px; font-weight: 700; color: var(--gold); }
#desk .pdf-next-btn     { height: 38px; padding: 0 20px; border-radius: 9px; border: none; background: var(--green); color: #fff; font-family: 'Inter',sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; display: none; transition: all 0.2s; }
#desk .pdf-next-btn.show { display: block; }

/* ── QUIZ PAGE ── */
#desk .quiz-layout { display:grid; grid-template-columns:1fr 280px; gap:24px; align-items:start; }
#desk .quiz-header-card { background:var(--solid-dark); border-radius:16px; padding:24px 28px; margin-bottom:20px; display:flex; align-items:center; justify-content:space-between; position:relative; overflow:hidden; }
#desk .quiz-header-bg { position:absolute; inset:0; background:radial-gradient(ellipse at 80% 50%, rgba(201,160,101,0.15) 0%, transparent 65%); pointer-events:none; }
#desk .quiz-header-left { position:relative; z-index:1; }
#desk .quiz-course-label { font-size:10px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
#desk .quiz-title-text { font-family:Georgia,serif; font-size:26px; font-weight:700; color:#fff; }
#desk .quiz-attempt-info { font-size:13px; color:rgba(255,255,255,0.45); margin-top:4px; }
#desk .quiz-header-right { position:relative; z-index:1; text-align:center; }
#desk .quiz-timer-label { font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:4px; }
#desk .quiz-timer { font-family:Georgia,serif; font-size:48px; font-weight:700; color:#fff; line-height:1; }
#desk .quiz-timer.warning { color:#F59E0B; }
#desk .quiz-timer.danger  { color:#EF4444; animation:timerPulse 0.5s ease-in-out infinite alternate; }
#desk .q-progress-row { display:flex; gap:6px; margin-bottom:20px; flex-wrap:wrap; }
#desk .q-dot { width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; cursor:pointer; transition:all 0.18s; }
#desk .q-dot.answered   { background:var(--solid-dark); color:#fff; }
#desk .q-dot.current    { background:var(--gold); color:var(--black); }
#desk .q-dot.unanswered { background:var(--gray-100); color:var(--gray-500); }
#desk .question-card { background:var(--white); border-radius:16px; border:1px solid var(--gray-100); padding:32px; margin-bottom:20px; }
#desk .q-number { font-size:11px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
#desk .q-text   { font-family:Georgia,serif; font-size:22px; font-weight:600; color:var(--black); line-height:1.4; margin-bottom:28px; }
#desk .q-options{ display:flex; flex-direction:column; gap:12px; }
#desk .q-option { display:flex; align-items:center; gap:16px; padding:16px 20px; border-radius:12px; border:1.5px solid var(--gray-200); background:var(--white); cursor:pointer; transition:all 0.2s; user-select:none; }
#desk .q-option:hover { border-color:var(--gold); background:rgba(201,160,101,0.04); }
#desk .q-option.selected { border-color:var(--solid-dark); background:var(--solid-dark); }
#desk .q-option.selected .q-opt-letter { background:var(--gold); color:var(--black); border-color:var(--gold); }
#desk .q-option.selected .q-opt-text { color:#fff; }
#desk .q-opt-letter { width:32px; height:32px; border-radius:8px; flex-shrink:0; border:1.5px solid var(--gray-300); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--gray-500); transition:all 0.2s; }
#desk .q-opt-text { font-size:14.5px; color:var(--black); transition:color 0.2s; }
#desk .quiz-nav { display:flex; align-items:center; justify-content:space-between; }
#desk .btn-quiz-nav { height:44px; padding:0 24px; border-radius:10px; font-family:'Inter',sans-serif; font-size:13.5px; font-weight:700; cursor:pointer; transition:all 0.18s; border:none; }
#desk .btn-quiz-prev { background:var(--white); color:var(--black); border:1.5px solid var(--gray-200); }
#desk .btn-quiz-prev:hover { border-color:var(--gold); }
#desk .btn-quiz-next { background:var(--solid-dark); color:#fff; }
#desk .btn-quiz-next:hover { background:#1a1a1a; }
#desk .btn-quiz-submit { background:var(--gold); color:var(--black); }
@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
#desk .q-nav-info { font-size:13px; color:var(--gray-500); }
#desk .quiz-side-card { background:var(--white); border-radius:14px; border:1px solid var(--gray-100); padding:20px; margin-bottom:16px; }
#desk .quiz-side-title { font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--gray-500); margin-bottom:14px; }
#desk .quiz-side-stat { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
#desk .quiz-side-key { font-size:13px; color:var(--gray-500); }
#desk .quiz-side-val { font-size:13px; font-weight:700; color:var(--black); }
#desk .speed-warning-box { background:#FFF8E6; border:1px solid #F5C842; border-radius:8px; padding:10px 12px; font-size:12px; color:#7A5C00; font-weight:600; display:flex; gap:8px; align-items:flex-start; margin-top:14px; }
#desk .quiz-back-btn { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--gray-500); cursor:pointer; transition:color 0.15s; }
#desk .quiz-back-btn:hover { color:var(--black); }
@keyframes timerPulse { from { opacity:1; } to { opacity:0.5; } }

/* ── QUIZ RESULT ── */
#desk .quiz-result   { text-align: center; padding: 40px 28px; }
#desk .qr-icon       { font-size: 64px; margin-bottom: 16px; }
#desk .qr-status     { font-family: Georgia,serif; font-size: 28px; font-weight: 700; margin-bottom: 6px; }
#desk .qr-status.pass { color: var(--green); }
#desk .qr-status.fail { color: var(--red); }
#desk .qr-score      { font-size: 16px; color: var(--gray-500); margin-bottom: 24px; }
#desk .qr-score span { font-size: 20px; font-weight: 700; color: var(--black); }
#desk .qr-stats      { display: flex; justify-content: center; gap: 32px; margin-bottom: 28px; }
#desk .qr-stat       { text-align: center; }
#desk .qr-stat-num   { font-family: Georgia,serif; font-size: 26px; font-weight: 700; color: var(--black); }
#desk .qr-stat-label { font-size: 11px; color: var(--gray-500); margin-top: 2px; }
#desk .qr-btns       { display: flex; justify-content: center; gap: 12px; }
#desk .btn-get-cert  { height: 48px; padding: 0 28px; border-radius: 12px; border: none; background: var(--gold); color: var(--black); font-family: 'Inter',sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
#desk .btn-retry-quiz{ height: 48px; padding: 0 24px; border-radius: 12px; border: 1.5px solid var(--gray-200); background: var(--white); color: var(--black); font-family: 'Inter',sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
#desk .btn-retry-quiz:hover { border-color: var(--gold); }

/* ── SPEED WARNING CARD ── */
#desk .speed-warn-card { background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.2); border-radius: 12px; padding: 16px 20px; margin-top: 16px; display: flex; align-items: flex-start; gap: 12px; font-size: 13px; color: #991B1B; line-height: 1.6; }

/* ── MOBILE — Course Detail / Video / PDF / Quiz ── */
#mob .mod-item-m   { background: var(--white); border-radius: 14px; border: 1px solid var(--gray-100); padding: 14px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: all 0.15s; }
#mob .mod-item-m:active { transform: scale(0.98); }
#mob .mod-item-m.locked { opacity: 0.45; cursor: not-allowed; }
#mob .mim-num  { width: 26px; height: 26px; border-radius: 50%; background: var(--gray-100); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--gray-500); flex-shrink: 0; }
#mob .mod-item-m.completed .mim-num { background: var(--green); color: #fff; }
#mob .mim-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
#mob .mim-info { flex: 1; min-width: 0; }
#mob .mim-title { font-size: 13px; font-weight: 600; color: var(--black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mob .mim-meta  { font-size: 11px; color: var(--gray-500); margin-top: 2px; }
#mob .mim-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 12px; flex-shrink: 0; }
#mob .mb-done   { background: #E8F7EF; color: #1A8A4A; }
#mob .mb-active { background: rgba(201,160,101,0.12); color: #8B6914; }
#mob .mb-locked { background: var(--gray-100); color: var(--gray-400); }
#mob .m-video-container { background: #000; aspect-ratio: 16/9; width: 100%; position: relative; }
#mob .m-video-iframe    { width: 100%; height: 100%; border: none; display: block; }
#mob .m-video-overlay   { position: absolute; inset: 0; z-index: 10; cursor: not-allowed; background: transparent; }
#mob .m-video-controls  { background: var(--white); padding: 12px 16px; border-top: 1px solid var(--gray-100); }
#mob .m-video-prog      { height: 5px; background: var(--gray-100); border-radius: 999px; margin-bottom: 8px; }
#mob .m-video-prog-fill { height: 100%; background: linear-gradient(90deg,var(--gold),#E8C97A); border-radius: 999px; }
#mob .m-pdf-container   { background: #F1F3F5; aspect-ratio: 3/4; width: 100%; }
#mob .m-pdf-iframe      { width: 100%; height: 100%; border: none; display: block; }
#mob .m-quiz-option     { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 2px solid var(--gray-200); background: var(--white); margin-bottom: 10px; cursor: pointer; font-size: 14px; color: var(--black); transition: all 0.18s; }
#mob .m-quiz-option.selected { border-color: var(--black); background: rgba(10,10,10,0.04); }
#mob .m-quiz-option.correct  { border-color: var(--green); background: rgba(16,185,129,0.06); }
#mob .m-quiz-option.wrong    { border-color: var(--red); background: rgba(239,68,68,0.06); }
#mob .m-quiz-opt-key { width: 26px; height: 26px; border-radius: 50%; background: var(--gray-100); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
#mob .m-quiz-option.selected .m-quiz-opt-key { background: var(--solid-dark); color: #fff; }
#mob .m-quiz-result { text-align: center; padding: 32px 20px; }

@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.6; } }</style>
<!-- v2.116 — plyr.min.css TIDAK dimuat di sini lagi. Dimuat lazy
     bersama plyr.min.js hanya saat halaman video dibuka pertama kali
     (lihat _loadPlyrLibs_). Sebelumnya di-download SEMUA staff di
     SETIAP halaman walau tidak pernah membuka modul video. -->
<style>
/* ══════════════════════════════════════════════════
   PLYR VIDEO PLAYER — v2.93
   Gold accent + anti-keyboard overlay
══════════════════════════════════════════════════ */
.plyr {
  --plyr-color-main: #C9A05A;
  --plyr-video-background: #000;
  --plyr-range-thumb-background: #C9A05A;
  --plyr-control-radius: 6px;
  font-family: 'Inter', sans-serif;
  width: 100%;
}
/* min-height pada wrapper (bukan cuma .plyr) — mencegah layout ambles
   di sepersekian detik antara innerHTML dirender dan Plyr selesai memasang diri */
.lms-plyr-wrap { position: relative; background: #000; width: 100%; min-height: 220px; }
.lms-plyr-wrap .plyr { min-height: 220px; }

/* Transparent shield above the YouTube iframe.
   z-index 1 = above iframe, below Plyr big play button (2) and controls (3). */
.lms-plyr-shield {
  position: absolute; inset: 0;
  z-index: 1;
  background: transparent;
  cursor: default;
}

/* Extra safety: never allow the embedded iframe to take pointer focus */
.lms-plyr-wrap .plyr__video-embed iframe,
.lms-plyr-wrap .plyr__video-wrapper iframe { pointer-events: none !important; }

@media (max-width: 899px) {
  .lms-plyr-wrap { min-height: 200px; }
  .lms-plyr-wrap .plyr { min-height: 200px; }
}
</style>
<style>
/* ══════════════════════════════════════════════════
   PDF FLIPBOOK — v2.96
   CSS StPageFlip WAJIB ditanam manual: paket dist-nya
   TIDAK menyertakan file CSS (hanya ada di src/).
   Tanpa blok .stf__* di bawah, halaman tidak terposisi.
   Sumber: page-flip@2.0.7 src/Style/stPageFlip.css (MIT)

   v2.112 — touch-action ditambah "pinch-zoom" di samping "pan-y"
   bawaan library. Sebelumnya cuma "pan-y" (swipe vertikal untuk
   StPageFlip) — efek sampingnya, browser TIDAK PERNAH menerima
   gesture pinch dua-jari di area ini untuk memicu native zoom.
   Itu sebabnya di HP, pinch macet total di satu tampilan (desktop
   normal karena mouse wheel/tombol zoom tidak lewat touch-action).
   "pan-y pinch-zoom" mengizinkan keduanya sekaligus — swipe halaman
   tetap jalan, pinch-zoom juga diteruskan ke browser.
══════════════════════════════════════════════════ */
.stf__parent { position: relative; display: block; box-sizing: border-box;
  transform: translateZ(0); -ms-touch-action: pan-y pinch-zoom; touch-action: pan-y pinch-zoom; }
.sft__wrapper { position: relative; width: 100%; box-sizing: border-box; }
.stf__parent canvas { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.stf__block { position: absolute; width: 100%; height: 100%; box-sizing: border-box; perspective: 2000px; }
.stf__item { display: none; position: absolute; transform-style: preserve-3d; }
.stf__outerShadow,
.stf__innerShadow,
.stf__hardShadow,
.stf__hardInnerShadow { position: absolute; left: 0; top: 0; }

/* ── Panggung buku ── */
/* v2.111 — FIX: sebelumnya .pdf-stage tidak punya max-height, jadi
   saat buku membesar karena zoom, TINGGI STAGE ITU SENDIRI ikut
   membesar (flex-column mendorong parent) — toolbar yang berada
   SETELAH book-mount di kolom yang sama ikut terdorong sampai keluar
   layar. Di HP pada zoom 150%, tombol zoom-out jadi tidak terjangkau
   dan tidak bisa di-scroll balik karena stage sendiri yang kepanjangan,
   bukan konten di dalamnya yang seharusnya di-scroll.
   Fix: stage dikunci max-height mengikuti viewport, overflow terjadi
   DI DALAM book-mount (buku boleh membesar & digeser di sana), toolbar
   flex-shrink:0 supaya TIDAK PERNAH ikut terdorong berapa pun zoom-nya. */
.pdf-stage { position: relative; background: #2B2B2B; display: flex;
  flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 18px 12px 10px; min-height: 420px; max-height: 78vh; overflow: hidden; }
/* v2.103 — host tetap. Anak di dalamnya yang diserahkan ke StPageFlip
   dan boleh dihapus destroy(). Host sendiri tidak pernah hilang.
   v2.111 — max-height + overflow:auto SUNGGUHAN di sini (sebelumnya
   overflow:auto ada tapi tidak berguna karena tidak ada batas tinggi
   untuk di-overflow-kan). Ini elemen yang staff geser/scroll saat
   buku lebih besar dari area yang tersedia — BUKAN stage/toolbar. */
.pdf-book-mount { width: 100%; flex: 1 1 auto; display: flex; justify-content: center;
                  align-items: flex-start; overflow: auto; -webkit-overflow-scrolling: touch;
                  min-height: 0; }
.pdf-book-mount > div { margin: auto; flex: 0 0 auto; }
.pdf-book-mount .stf__parent { margin: 0 auto; }

/* Pemisah & tombol mode di toolbar */
.pdf-tool-sep { width: 1px; height: 20px; background: rgba(255,255,255,0.18); margin: 0 4px; }

/* ═══ READ-ALOUD — v2.105 ═══ */
/* Tombol Audio sengaja dibuat mencolok, sesuai permintaan HRM —
   supaya menonjol sendiri di antara tombol navigasi yang abu-abu. */
.pdf-tool-audio { width: auto !important; padding: 0 14px !important;
  font-size: 12px !important; font-weight: 700; letter-spacing: .02em;
  background: #C0392B !important; border-color: #C0392B !important; color: #fff !important; }
.pdf-tool-audio:hover:not(:disabled) { background: #D64535 !important; }
.pdf-tool-audio.on { background: #1E8449 !important; border-color: #1E8449 !important; }

.aud-bar { background: #1E1E20; border-top: 1px solid rgba(255,255,255,0.1);
           padding: 12px 14px 14px; }
/* v2.106 — di HP tombol-tombol ini membungkus tidak beraturan.
   Sekarang dua baris tetap: kendali di atas, pemilih suara di bawah. */
.aud-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 8px; }
.aud-row .aud-btn { flex: 0 0 auto; }
.aud-btn { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  color: #fff; font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 8px 13px; border-radius: 8px; cursor: pointer; flex-shrink: 0;
  transition: background .15s; }
.aud-btn:hover { background: rgba(201,160,101,0.35); }
.aud-btn.primary { background: var(--gold); border-color: var(--gold); color: #0B0B0C; min-width: 92px; }
.aud-btn.primary:hover { background: #E0BE7E; }
.aud-btn.sm { padding: 6px 11px; font-size: 11.5px; }
/* v2.109 — baris nama-suara ringkas: menggantikan tampilan Voice Lab
   50-baris untuk pemakaian staff sehari-hari. Tabel penuhnya tetap
   ada di mockup terpisah. */
.aud-voicerow { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px;
  font-size: 12px; color: rgba(255,255,255,0.85); }
.aud-voicename { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-weight: 600; }
.aud-voice { flex: 1; min-width: 150px; background: #2B2B2E;
  border: 1px solid rgba(255,255,255,0.16); color: #fff; border-radius: 8px;
  padding: 8px 9px; font-family: inherit; font-size: 12px; margin-bottom: 10px; }

/* v2.110 — toggle bahasa SOP. Tersembunyi kecuali PDF lolos deteksi
   bilingual (lihat _audUpdateLangToggle). Label "Bilingual SOP"
   dobel fungsi sebagai alat diagnosa trial. */
.aud-langtoggle { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
.aud-lang-label { font-size: 11px; color: rgba(255,255,255,0.55); font-weight: 600;
  margin-right: auto; }
.aud-lang-btn { min-width: 40px; }
.aud-lang-btn.on { background: var(--gold); border-color: var(--gold); color: #0B0B0C; }
.aud-lang-btn[disabled] { opacity: .35; cursor: not-allowed; background: rgba(255,255,255,0.04); }
.aud-prog { height: 4px; border-radius: 4px; background: rgba(255,255,255,0.1);
            overflow: hidden; margin-bottom: 6px; }
.aud-fill { height: 100%; width: 0; background: var(--gold); transition: width .2s; }
.aud-status { font-size: 11.5px; color: rgba(255,255,255,0.5);
              font-variant-numeric: tabular-nums; }

.aud-script { max-height: 300px; overflow-y: auto; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.1); }
.aud-sent { padding: 7px 10px; border-radius: 7px; margin-bottom: 3px;
  font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.72);
  cursor: pointer; border-left: 2.5px solid transparent; transition: .12s; }
.aud-sent:hover { background: rgba(255,255,255,0.06); color: #fff; }
.aud-sent.now { background: rgba(201,160,101,0.16); color: #fff;
                border-left-color: var(--gold); font-weight: 600; }
/* Kalimat yang belum pernah dilewati tidak bisa diloncati */
.aud-sent.locked { opacity: .4; cursor: not-allowed; }
.aud-pg { font-size: 10px; color: rgba(255,255,255,0.35); font-weight: 600;
          margin-right: 7px; font-variant-numeric: tabular-nums; }
.aud-empty { padding: 20px; text-align: center; font-size: 12.5px;
             color: rgba(255,255,255,0.4); }

/* v2.110 — transkrip SOP bilingual: EN dan ID berdampingan, tidak
   ikut toggle bahasa aktif (kesepakatan: staff bisa baca dua-duanya
   sekaligus di transkrip walau audio cuma baca satu bahasa). */
.aud-sent-bi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aud-sent-col { min-width: 0; }
.aud-lang-tag { display: inline-block; font-size: 9.5px; font-weight: 700;
  color: var(--gold); margin-right: 6px; letter-spacing: .04em; }
@media (max-width: 600px) {
  .aud-sent-bi { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 600px) {
  /* Baris 1: Play mengisi sisa ruang, tiga tombol lain rapat dan sama tinggi.
     Baris 2: pemilih suara melebar penuh — nama suara sering panjang. */
  .aud-row { gap: 6px; }
  .aud-row .aud-btn        { padding: 9px 10px; font-size: 12px; }
  .aud-row .aud-btn.primary{ flex: 1 1 auto; min-width: 0; }
  .aud-voice { flex: 1 0 100%; min-width: 0; order: 10; margin-top: 2px; }
  .aud-script { max-height: 220px; }
}
/* Lebar dipatok supaya "1 page" dan "2 pages" tidak menggeser
   tombol lain saat berganti. */
.pdf-tool-mode { width: 74px !important; padding: 0 !important;
                 font-size: 12px !important; font-weight: 600; }

/* Buku membuka saat memuat — murni CSS */
.pdf-bookload { width: 74px; height: 54px; position: relative; perspective: 700px; margin-bottom: 14px; }
.pdf-bookload .cv { position: absolute; top: 0; bottom: 0; width: 50%; box-sizing: border-box;
  background: linear-gradient(180deg,#3A3A42,#2C2C33); border: 1.5px solid var(--gold); }
.pdf-bookload .cv.l { left: 0;  border-radius: 5px 2px 2px 5px; border-right: none; }
.pdf-bookload .cv.r { right: 0; border-radius: 2px 5px 5px 2px; border-left: none; }
.pdf-bookload .sp { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  background: var(--gold); opacity: .55; transform: translateX(-1px); z-index: 3; }
.pdf-bookload .pg { position: absolute; top: 4px; bottom: 4px; left: 50%; width: calc(50% - 5px);
  background: linear-gradient(180deg,#EDEDF2,#C9C9D2); border-radius: 0 3px 3px 0;
  transform-origin: left center; backface-visibility: hidden; z-index: 2;
  animation: pdfBkFlip 1.9s cubic-bezier(.45,0,.35,1) infinite; }
.pdf-bookload .pg:nth-of-type(1) { animation-delay: 0s; }
.pdf-bookload .pg:nth-of-type(2) { animation-delay: .32s; }
.pdf-bookload .pg:nth-of-type(3) { animation-delay: .64s; }
@keyframes pdfBkFlip {
  0%,8%    { transform: rotateY(0deg);    opacity: 1; }
  42%      { opacity: 1; }
  50%,100% { transform: rotateY(-174deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pdf-bookload .pg { animation: none; transform: rotateY(0deg); opacity: 1; }
}

/* ── Toolbar ── */
.pdf-tools { display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 12px; flex-wrap: wrap; flex-shrink: 0; }
.pdf-tool-btn { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  color: #fff; width: 34px; height: 32px; border-radius: 7px; cursor: pointer;
  font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background .15s; font-family: 'Inter', sans-serif; }
.pdf-tool-btn:hover:not(:disabled) { background: rgba(201,160,101,0.35); }
.pdf-tool-btn:disabled { opacity: .3; cursor: default; }
.pdf-page-ind { color: #fff; font-size: 12.5px; font-weight: 600; font-family: 'Inter', sans-serif;
  min-width: 78px; text-align: center; background: rgba(0,0,0,0.35);
  border-radius: 7px; padding: 7px 10px; }
.pdf-tool-done { background: var(--green); border-color: var(--green); width: auto;
  padding: 0 14px; font-weight: 700; font-size: 12.5px; gap: 6px; }
.pdf-tool-done:hover:not(:disabled) { background: #0f9d63; }

/* ── Loading bertahap ── */
.pdf-loading { position: absolute; inset: 0; background: #2B2B2B; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 5; }
.pdf-loading-txt { color: rgba(255,255,255,0.85); font-size: 13px; font-family: 'Inter', sans-serif; }
.pdf-loading-bar { width: 190px; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.15); overflow: hidden; }
.pdf-loading-fill { height: 100%; width: 0%; background: var(--gold); transition: width .25s ease; }

/* ── Focus mode: cadangan kalau Fullscreen API ditolak sandbox ── */
.pdf-stage.pdf-focus { position: fixed; inset: 0; z-index: 9999; min-height: 100vh;
  max-height: 100vh; padding: 20px 16px 14px; background: #1C1C1C; }
.pdf-stage:fullscreen { min-height: 100vh; max-height: 100vh; padding: 20px 16px 14px; background: #1C1C1C; }
.pdf-stage:-webkit-full-screen { min-height: 100vh; max-height: 100vh; background: #1C1C1C; }

@media (max-width: 899px) {
  .pdf-stage { min-height: 360px; max-height: 68vh; padding: 12px 8px 8px; }
  .pdf-page-ind { min-width: 66px; font-size: 12px; }
}
</style>
<!-- v2.116 — html2pdf.bundle.min.js (±800 KB) TIDAK dimuat di sini lagi.
     Hanya dipakai downloadCertPDF() saat staff klik Download Certificate —
     dimuat lazy di sana dengan pola sama seperti pdf.js (_pdfLoadScript_).
     Sebelumnya di-download SEMUA staff di SETIAP halaman walau tidak
     pernah menyentuh sertifikat, dan sebagai tag script tanpa defer
     memblokir parser HTML sampai selesai download. -->
<!-- v2.116 — plyr.min.js TIDAK dimuat di sini lagi (lihat catatan di
     link stylesheet Plyr di atas — CSS & JS dimuat bersama, lazy). -->
<!-- v2.107 — pdf.js dan StPageFlip TIDAK dimuat di sini lagi.
     Diukur langsung: keduanya ± 1,4 MB, dan hanya berguna kalau
     staff membuka modul PDF. Video dan quiz sebelumnya membayar
     ongkos unduh itu tanpa pernah memakainya.
     Sekarang dimuat lazy oleh _pdfLoadLibraries_() di
     _pdfStartFlipbook(), hanya sekali per sesi halaman — bukan
     ditulis ulang tiap kali modul PDF dibuka. -->
</head>
<body>

<!-- ══════════════════════════════════════════
     LOADING OVERLAY
══════════════════════════════════════════ -->
<div id="lms-loading">
  <div class="load-inner">
    <div class="load-logo">Miss Fish Bali</div>
    <div class="load-sub">Learning Management System</div>
    <div class="load-spinner"></div>
    <div class="load-msg" id="load-msg">Initializing...</div>
  </div>
</div>

<!-- ══════════════════════════════════════════
     MODAL — FORCE CHANGE PASSWORD
══════════════════════════════════════════ -->
<div id="modal-changepw">
  <div class="mpw-box">
    <div class="mpw-badge">🔐 Action Required</div>
    <div class="mpw-title">Set New Password</div>
    <p class="mpw-sub">
      Your account requires a password change before accessing the system.
      Please set a new secure password to continue.
    </p>
    <div class="mpw-fields">
      <div>
        <label class="mpw-label" for="mpw-old">Current Password</label>
        <div class="mpw-wrap">
          <input class="mpw-input" id="mpw-old" type="password" placeholder="Your current password" autocomplete="current-password">
          <span class="mpw-eye" onclick="togglePwd('mpw-old','mpw-eye1')">
            <svg id="mpw-eye1" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
              <circle cx="12" cy="12" r="3"/>
            </svg>
          </span>
        </div>
      </div>
      <div>
        <label class="mpw-label" for="mpw-new">New Password</label>
        <div class="mpw-wrap">
          <input class="mpw-input" id="mpw-new" type="password" placeholder="Min. 6 characters" autocomplete="new-password">
          <span class="mpw-eye" onclick="togglePwd('mpw-new','mpw-eye2')">
            <svg id="mpw-eye2" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
              <circle cx="12" cy="12" r="3"/>
            </svg>
          </span>
        </div>
      </div>
      <div>
        <label class="mpw-label" for="mpw-confirm">Confirm New Password</label>
        <div class="mpw-wrap">
          <input class="mpw-input" id="mpw-confirm" type="password" placeholder="Re-enter new password" autocomplete="new-password">
        </div>
      </div>
      <div class="mpw-error" id="mpw-error">
        <span id="mpw-error-msg">Passwords do not match.</span>
      </div>
      <button class="mpw-btn" id="mpw-btn" onclick="submitChangePassword()">Update Password</button>
    </div>
  </div>
</div>

<!-- ══════════════════════════════════════════
     TOAST
══════════════════════════════════════════ -->
<div id="lms-toast"></div>

<!-- ══════════════════════════════════════════
     DESKTOP LAYOUT
══════════════════════════════════════════ -->
<!-- version: MissFishLMS v1.1 | Batch 2: Employee pages -->
<div id="desk">

  <!-- ─── LOGIN PAGE ─── -->
  <div id="d-login" class="d-page">
    <div class="login-left">
      <div class="login-left-bg"></div>
      <div class="login-left-grain"></div>
      <div class="deco-vlines">
        <div class="deco-vline"></div>
        <div class="deco-vline"></div>
      </div>
      <div class="deco-circle"></div>
      <div class="login-logo-row">
        <div class="mf-logo-dark">
          <img src="/missfish-logo.webp" alt="Miss Fish Bali">
        </div>
        <div class="login-logo-text">
          <div class="brand">Miss Fish Bali</div>
          <div class="sub">Learning Management System</div>
        </div>
      </div>
      <div class="login-hero">
        <div class="login-eyebrow">
          <div class="login-eyebrow-line"></div>
          <span class="login-eyebrow-text">Staff Training Portal</span>
        </div>
        <h1 class="login-h1">Grow.<br>Learn.<br><em>Excel.</em></h1>
        <p class="login-desc">Empower every team member with structured training, measurable progress, and certified excellence — all in one place.</p>
        <div class="login-stats">
          <div class="login-stat">
            <span class="login-stat-n">110+</span>
            <span class="login-stat-l">Staff Members</span>
          </div>
          <div class="login-stat-div"></div>
          <div class="login-stat">
            <span class="login-stat-n">8</span>
            <span class="login-stat-l">Departments</span>
          </div>
          <div class="login-stat-div"></div>
          <div class="login-stat">
            <span class="login-stat-n">100%</span>
            <span class="login-stat-l">Cloud Based</span>
          </div>
        </div>
      </div>
      <div class="login-left-footer">
        <span>© 2026 Miss Fish Group. All rights reserved.</span>
        <div class="pulse-dot"></div>
      </div>
    </div><!-- /.login-left -->

    <div class="login-right">
      <div class="login-form-header">
        <div class="login-form-eyebrow">Welcome Back</div>
        <h2 class="login-form-title">Sign in to<br>your account</h2>
        <p class="login-form-sub">Enter your credentials to access the LMS portal</p>
      </div>
      <div class="login-form">
        <div>
          <label class="f-label" for="d-username">Employee ID</label>
          <div class="f-wrap">
            <input class="f-input" id="d-username" type="text"
                   placeholder="e.g. MF0042" autocomplete="username" style="text-transform:uppercase">
            <span class="f-icon">
              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                <circle cx="12" cy="7" r="4"/>
              </svg>
            </span>
          </div>
        </div>
        <div>
          <label class="f-label" for="d-pwd">Password</label>
          <div class="f-wrap">
            <input class="f-input" id="d-pwd" type="password"
                   placeholder="Enter your password" autocomplete="current-password">
            <span class="f-icon" onclick="togglePwd('d-pwd','d-eye')">
              <svg id="d-eye" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                <circle cx="12" cy="12" r="3"/>
              </svg>
            </span>
          </div>
        </div>
        <div class="attempt-box" id="d-attempt-box">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#E8C042" stroke-width="2" style="flex-shrink:0;margin-top:1px">
            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
            <line x1="12" y1="9" x2="12" y2="13"/>
            <line x1="12" y1="17" x2="12.01" y2="17"/>
          </svg>
          <span id="d-attempt-msg">Please enter your Employee ID and password.</span>
        </div>
        <button class="btn-signin" id="d-signin-btn" onclick="dLogin()">Sign In</button>
        <div class="login-divider">
          <div class="login-divider-line"></div>
          <span class="login-divider-text">Need help?</span>
          <div class="login-divider-line"></div>
        </div>
        <div class="login-forgot">
          Forgot password or account locked?<br>
          Contact <strong>IT Support (MF0001)</strong> or <strong>HRM</strong> to reset access.
        </div>
      </div><!-- /.login-form -->
      <div class="login-right-footer">
        <span>🔒 Secure — SHA-256 encrypted</span>
        <span style="color:var(--gray-300);font-size:11px">Powered by Miss Fish IT Dept.</span>
      </div>
    </div><!-- /.login-right -->
  </div><!-- /#d-login -->


  <!-- ─── SHELL PAGES (Sidebar + Topbar — diisi Batch berikutnya) ─── -->

  <!-- DASHBOARD -->
  <div id="d-dashboard" class="d-page">
    <div class="shell">
      <aside class="sidebar" id="sidebar-dashboard">
        <div class="sidebar-bg"></div>
        <div class="sidebar-logo">
          <img src="/missfish-logo.webp"
               alt="Miss Fish" style="width:80%;height:auto;display:block;">
          <div class="sb-sub">LMS Portal</div>
        </div>
        <nav class="sidebar-nav" id="d-sidebar-nav"></nav>
        <div class="sidebar-footer">
          <div class="sidebar-user" onclick="goTo('profile')">
            <div class="sb-avatar" id="sb-avatar-d">AW</div>
            <div>
              <div class="sb-name" id="sb-name-d">Loading...</div>
              <div class="sb-role" id="sb-role-d">—</div>
            </div>
          </div>
        </div>
      </aside>
      <div class="main-area">
        <div class="topbar">
          <div class="topbar-left">
            <div class="topbar-breadcrumb">Miss Fish Bali LMS</div>
            <div class="topbar-title" id="d-topbar-title">Dashboard</div>
          </div>
          <div class="topbar-right">
            <div class="topbar-icon-btn">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
              <div class="notif-dot"></div>
            </div>
            <button class="dm-toggle" id="dm-toggle-btn" onclick="toggleDarkMode()" title="Toggle Dark Mode">🌙</button>
            <div class="topbar-avatar" id="topbar-avatar-d" onclick="goTo('profile')" title="My Profile">AW</div>
          </div>
        </div>
        <div class="content" id="d-dashboard-content">
          <div class="page-placeholder">
            <div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div>
            <div class="ph-title">Loading dashboard...</div>
          </div>
        </div>
      </div>
    </div>
  </div><!-- /#d-dashboard -->

  <!-- ─── MY COURSES ─── -->
  <div id="d-courses" class="d-page">
    <div class="shell">
      <aside class="sidebar">
        <div class="sidebar-bg"></div>
        <div class="sidebar-logo">
          <img src="/missfish-logo.webp" alt="Miss Fish" style="width:80%;height:auto;display:block;">
          <div class="sb-sub">LMS Portal</div>
        </div>
        <nav class="sidebar-nav" id="d-sidebar-nav-courses"></nav>
        <div class="sidebar-footer">
          <div class="sidebar-user" onclick="goTo('profile')">
            <div class="sb-avatar" id="sb-avatar-courses">AW</div>
            <div>
              <div class="sb-name" id="sb-name-courses">—</div>
              <div class="sb-role" id="sb-role-courses">—</div>
            </div>
          </div>
        </div>
      </aside>
      <div class="main-area">
        <div class="topbar">
          <div class="topbar-left">
            <div class="topbar-breadcrumb" style="cursor:pointer;display:flex;align-items:center;gap:6px" onclick="goTo('dashboard')">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
              Miss Fish Bali LMS
            </div>
            <div class="topbar-title">My Courses</div>
          </div>
          <div class="topbar-right">
            <div class="topbar-icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><div class="notif-dot"></div></div>
            <button class="dm-toggle" onclick="toggleDarkMode()" title="Toggle Dark Mode">🌙</button>
            <div class="topbar-avatar" id="topbar-avatar-courses" onclick="goTo('profile')" title="My Profile">AW</div>
          </div>
        </div>
        <div class="content">
          <div class="courses-filters">
            <div class="search-bar">
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
              <input type="text" id="d-courses-search" placeholder="Search courses..." oninput="filterCourses()">
            </div>
            <button class="filter-pill active" onclick="setCourseFilter(this,'all')">All</button>
            <button class="filter-pill" onclick="setCourseFilter(this,'in-progress')">In Progress</button>
            <button class="filter-pill" onclick="setCourseFilter(this,'not-started')">Not Started</button>
            <button class="filter-pill" onclick="setCourseFilter(this,'completed')">Completed</button>
          </div>
          <div class="courses-grid" id="d-courses-grid">
            <div class="page-placeholder" style="grid-column:1/-1">
              <div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div>
              <div class="ph-title">Loading courses...</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div><!-- /#d-courses -->


  <!-- ─── MY PROGRESS ─── -->
  <div id="d-progress" class="d-page">
    <div class="shell">
      <aside class="sidebar">
        <div class="sidebar-bg"></div>
        <div class="sidebar-logo">
          <img src="/missfish-logo.webp" alt="Miss Fish" style="width:80%;height:auto;display:block;">
          <div class="sb-sub">LMS Portal</div>
        </div>
        <nav class="sidebar-nav" id="d-sidebar-nav-progress"></nav>
        <div class="sidebar-footer">
          <div class="sidebar-user" onclick="goTo('profile')">
            <div class="sb-avatar" id="sb-avatar-progress">AW</div>
            <div>
              <div class="sb-name" id="sb-name-progress">—</div>
              <div class="sb-role" id="sb-role-progress">—</div>
            </div>
          </div>
        </div>
      </aside>
      <div class="main-area">
        <div class="topbar">
          <div class="topbar-left">
            <div class="topbar-breadcrumb" style="cursor:pointer;display:flex;align-items:center;gap:6px" onclick="goTo('dashboard')">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
              Miss Fish Bali LMS
            </div>
            <div class="topbar-title">My Progress</div>
          </div>
          <div class="topbar-right">
            <div class="topbar-icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><div class="notif-dot"></div></div>
            <button class="dm-toggle" onclick="toggleDarkMode()" title="Toggle Dark Mode">🌙</button>
            <div class="topbar-avatar" id="topbar-avatar-progress" onclick="goTo('profile')" title="My Profile">AW</div>
          </div>
        </div>
        <div class="content" id="d-progress-content">
          <div class="page-placeholder">
            <div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div>
            <div class="ph-title">Loading progress...</div>
          </div>
        </div>
      </div>
    </div>
  </div><!-- /#d-progress -->


  <!-- ─── CERTIFICATES ─── -->
  <div id="d-certs" class="d-page">
    <div class="shell">
      <aside class="sidebar">
        <div class="sidebar-bg"></div>
        <div class="sidebar-logo">
          <img src="/missfish-logo.webp" alt="Miss Fish" style="width:80%;height:auto;display:block;">
          <div class="sb-sub">LMS Portal</div>
        </div>
        <nav class="sidebar-nav" id="d-sidebar-nav-certs"></nav>
        <div class="sidebar-footer">
          <div class="sidebar-user" onclick="goTo('profile')">
            <div class="sb-avatar" id="sb-avatar-certs">AW</div>
            <div>
              <div class="sb-name" id="sb-name-certs">—</div>
              <div class="sb-role" id="sb-role-certs">—</div>
            </div>
          </div>
        </div>
      </aside>
      <div class="main-area">
        <div class="topbar">
          <div class="topbar-left">
            <div class="topbar-breadcrumb" style="cursor:pointer;display:flex;align-items:center;gap:6px" onclick="goTo('dashboard')">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
              Miss Fish Bali LMS
            </div>
            <div class="topbar-title">Certificates</div>
          </div>
          <div class="topbar-right">
            <div class="topbar-icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><div class="notif-dot"></div></div>
            <button class="dm-toggle" onclick="toggleDarkMode()" title="Toggle Dark Mode">🌙</button>
            <div class="topbar-avatar" id="topbar-avatar-certs" onclick="goTo('profile')" title="My Profile">AW</div>
          </div>
        </div>
        <div class="content">
          <div class="certs-grid" id="d-certs-grid">
            <div class="page-placeholder" style="grid-column:1/-1">
              <div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div>
              <div class="ph-title">Loading certificates...</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div><!-- /#d-certs -->


  <!-- ─── HOD DASHBOARD ─── -->
  <div id="d-hod-dashboard" class="d-page">
    <div class="shell">
      <aside class="sidebar">
        <div class="sidebar-bg"></div>
        <div class="sidebar-logo">
          <img src="/missfish-logo.webp" alt="Miss Fish" style="width:80%;height:auto;display:block;">
          <div class="sb-sub">LMS Portal</div>
        </div>
        <nav class="sidebar-nav" id="d-sidebar-nav-hod-dashboard"></nav>
        <div class="sidebar-footer">
          <div class="sidebar-user" onclick="goTo('profile')">
            <div class="sb-avatar" id="sb-avatar-hod-dashboard">RK</div>
            <div>
              <div class="sb-name"  id="sb-name-hod-dashboard">—</div>
              <div class="sb-role"  id="sb-role-hod-dashboard">—</div>
            </div>
          </div>
        </div>
      </aside>
      <div class="main-area">
        <div class="topbar">
          <div class="topbar-left">
            <div class="topbar-breadcrumb">Miss Fish Bali LMS</div>
            <div class="topbar-title">Dashboard</div>
          </div>
          <div class="topbar-right">
            <div class="topbar-icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><div class="notif-dot"></div></div>
            <button class="dm-toggle" onclick="toggleDarkMode()" title="Toggle Dark Mode">🌙</button>
            <div class="topbar-avatar" id="topbar-avatar-hod-dashboard" onclick="goTo('profile')" title="My Profile">RK</div>
          </div>
        </div>
        <div class="content" id="d-hod-dashboard-content">
          <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>
        </div>
      </div>
    </div>
  </div><!-- /#d-hod-dashboard -->


  <!-- ─── HOD MY TEAM ─── -->
  <div id="d-hod-staff" class="d-page">
    <div class="shell">
      <aside class="sidebar">
        <div class="sidebar-bg"></div>
        <div class="sidebar-logo">
          <img src="/missfish-logo.webp" alt="Miss Fish" style="width:80%;height:auto;display:block;">
          <div class="sb-sub">LMS Portal</div>
        </div>
        <nav class="sidebar-nav" id="d-sidebar-nav-hod-staff"></nav>
        <div class="sidebar-footer">
          <div class="sidebar-user" onclick="goTo('profile')">
            <div class="sb-avatar" id="sb-avatar-hod-staff">RK</div>
            <div>
              <div class="sb-name"  id="sb-name-hod-staff">—</div>
              <div class="sb-role"  id="sb-role-hod-staff">—</div>
            </div>
          </div>
        </div>
      </aside>
      <div class="main-area">
        <div class="topbar">
          <div class="topbar-left">
            <div class="topbar-breadcrumb" style="cursor:pointer;display:flex;align-items:center;gap:6px" onclick="goTo('hod-dashboard')">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>Dashboard
            </div>
            <div class="topbar-title" id="d-hod-staff-title">My Team</div>
          </div>
          <div class="topbar-right">
            <div class="topbar-icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><div class="notif-dot"></div></div>
            <button class="dm-toggle" onclick="toggleDarkMode()" title="Toggle Dark Mode">🌙</button>
            <div class="topbar-avatar" id="topbar-avatar-hod-staff" onclick="goTo('profile')" title="My Profile">RK</div>
          </div>
        </div>
        <div class="content" id="d-hod-staff-content">
          <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading team...</div></div>
        </div>
      </div>
    </div>
  </div><!-- /#d-hod-staff -->


  <!-- ─── HOD ASSIGN COURSE ─── -->
  <div id="d-hod-assign" class="d-page">
    <div class="shell">
      <aside class="sidebar">
        <div class="sidebar-bg"></div>
        <div class="sidebar-logo">
          <img src="/missfish-logo.webp" alt="Miss Fish" style="width:80%;height:auto;display:block;">
          <div class="sb-sub">LMS Portal</div>
        </div>
        <nav class="sidebar-nav" id="d-sidebar-nav-hod-assign"></nav>
        <div class="sidebar-footer">
          <div class="sidebar-user" onclick="goTo('profile')">
            <div class="sb-avatar" id="sb-avatar-hod-assign">RK</div>
            <div>
              <div class="sb-name"  id="sb-name-hod-assign">—</div>
              <div class="sb-role"  id="sb-role-hod-assign">—</div>
            </div>
          </div>
        </div>
      </aside>
      <div class="main-area">
        <div class="topbar">
          <div class="topbar-left">
            <div class="topbar-breadcrumb" style="cursor:pointer;display:flex;align-items:center;gap:6px" onclick="goTo('hod-dashboard')">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>Dashboard
            </div>
            <div class="topbar-title">Assign Course</div>
          </div>
          <div class="topbar-right">
            <div class="topbar-icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><div class="notif-dot"></div></div>
            <button class="dm-toggle" onclick="toggleDarkMode()" title="Toggle Dark Mode">🌙</button>
            <div class="topbar-avatar" id="topbar-avatar-hod-assign" onclick="goTo('profile')" title="My Profile">RK</div>
          </div>
        </div>
        <div class="content" id="d-hod-assign-content">
          <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>
        </div>
      </div>
    </div>
  </div><!-- /#d-hod-assign -->


  <!-- ─── HOD DEPT REPORTS ─── -->
  <div id="d-hod-reports" class="d-page">
    <div class="shell">
      <aside class="sidebar">
        <div class="sidebar-bg"></div>
        <div class="sidebar-logo">
          <img src="/missfish-logo.webp" alt="Miss Fish" style="width:80%;height:auto;display:block;">
          <div class="sb-sub">LMS Portal</div>
        </div>
        <nav class="sidebar-nav" id="d-sidebar-nav-hod-reports"></nav>
        <div class="sidebar-footer">
          <div class="sidebar-user" onclick="goTo('profile')">
            <div class="sb-avatar" id="sb-avatar-hod-reports">RK</div>
            <div>
              <div class="sb-name"  id="sb-name-hod-reports">—</div>
              <div class="sb-role"  id="sb-role-hod-reports">—</div>
            </div>
          </div>
        </div>
      </aside>
      <div class="main-area">
        <div class="topbar">
          <div class="topbar-left">
            <div class="topbar-breadcrumb" style="cursor:pointer;display:flex;align-items:center;gap:6px" onclick="goTo('hod-dashboard')">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>Dashboard
            </div>
            <div class="topbar-title" id="d-hod-reports-title">Dept Reports</div>
          </div>
          <div class="topbar-right">
            <div class="topbar-icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><div class="notif-dot"></div></div>
            <button class="dm-toggle" onclick="toggleDarkMode()" title="Toggle Dark Mode">🌙</button>
            <div class="topbar-avatar" id="topbar-avatar-hod-reports" onclick="goTo('profile')" title="My Profile">RK</div>
          </div>
        </div>
        <div class="content" id="d-hod-reports-content">
          <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading reports...</div></div>
        </div>
      </div>
    </div>
  </div><!-- /#d-hod-reports -->


  <!-- ─── OBSERVER DASHBOARD ─── -->
  <div id="d-observe-dashboard" class="d-page">
    <div class="shell">
      <aside class="sidebar">
        <div class="sidebar-bg"></div>
        <div class="sidebar-logo">
          <img src="/missfish-logo.webp" alt="Miss Fish" style="width:80%;height:auto;display:block;">
          <div class="sb-sub">LMS Portal</div>
        </div>
        <nav class="sidebar-nav" id="d-sidebar-nav-observe-dashboard"></nav>
        <div class="sidebar-footer">
          <div class="sidebar-user" onclick="goTo('profile')">
            <div class="sb-avatar" id="sb-avatar-observe-dashboard">IW</div>
            <div>
              <div class="sb-name" id="sb-name-observe-dashboard">—</div>
              <div class="sb-role" id="sb-role-observe-dashboard">—</div>
            </div>
          </div>
        </div>
      </aside>
      <div class="main-area">
        <div class="topbar">
          <div class="topbar-left">
            <div class="topbar-breadcrumb">Miss Fish Bali LMS</div>
            <div class="topbar-title">Dashboard <span class="view-only-badge" style="font-size:10px;margin-left:8px">View Only</span></div>
          </div>
          <div class="topbar-right">
            <div class="topbar-icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><div class="notif-dot"></div></div>
            <button class="dm-toggle" onclick="toggleDarkMode()" title="Toggle Dark Mode">🌙</button>
            <div class="topbar-avatar" id="topbar-avatar-observe-dashboard" onclick="goTo('profile')" title="My Profile">IW</div>
          </div>
        </div>
        <div class="content" id="d-observe-dashboard-content">
          <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>
        </div>
      </div>
    </div>
  </div><!-- /#d-observe-dashboard -->


  <!-- ─── OBSERVER REPORTS ─── -->
  <div id="d-observe-reports" class="d-page">
    <div class="shell">
      <aside class="sidebar">
        <div class="sidebar-bg"></div>
        <div class="sidebar-logo">
          <img src="/missfish-logo.webp" alt="Miss Fish" style="width:80%;height:auto;display:block;">
          <div class="sb-sub">LMS Portal</div>
        </div>
        <nav class="sidebar-nav" id="d-sidebar-nav-observe-reports"></nav>
        <div class="sidebar-footer">
          <div class="sidebar-user" onclick="goTo('profile')">
            <div class="sb-avatar" id="sb-avatar-observe-reports">IW</div>
            <div>
              <div class="sb-name" id="sb-name-observe-reports">—</div>
              <div class="sb-role" id="sb-role-observe-reports">—</div>
            </div>
          </div>
        </div>
      </aside>
      <div class="main-area">
        <div class="topbar">
          <div class="topbar-left">
            <div class="topbar-breadcrumb" style="cursor:pointer;display:flex;align-items:center;gap:6px" onclick="goTo('observe-dashboard')">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>Dashboard
            </div>
            <div class="topbar-title">Reports — View Only</div>
          </div>
          <div class="topbar-right">
            <div class="topbar-icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><div class="notif-dot"></div></div>
            <button class="dm-toggle" onclick="toggleDarkMode()" title="Toggle Dark Mode">🌙</button>
            <div class="topbar-avatar" id="topbar-avatar-observe-reports" onclick="goTo('profile')" title="My Profile">IW</div>
          </div>
        </div>
        <div class="content" id="d-observe-reports-content">
          <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading reports...</div></div>
        </div>
      </div>
    </div>
  </div><!-- /#d-observe-reports -->


  <!-- ─── AI REPORT (shared: admin + observer) ─── -->
  <div id="d-aireport" class="d-page">
    <div class="shell">
      <aside class="sidebar">
        <div class="sidebar-bg"></div>
        <div class="sidebar-logo">
          <img src="/missfish-logo.webp" alt="Miss Fish" style="width:80%;height:auto;display:block;">
          <div class="sb-sub">LMS Portal</div>
        </div>
        <nav class="sidebar-nav" id="d-sidebar-nav-aireport"></nav>
        <div class="sidebar-footer">
          <div class="sidebar-user" onclick="goTo('profile')">
            <div class="sb-avatar" id="sb-avatar-aireport">AW</div>
            <div>
              <div class="sb-name" id="sb-name-aireport">—</div>
              <div class="sb-role" id="sb-role-aireport">—</div>
            </div>
          </div>
        </div>
      </aside>
      <div class="main-area">
        <div class="topbar">
          <div class="topbar-left">
            <div class="topbar-breadcrumb" style="cursor:pointer;display:flex;align-items:center;gap:6px" onclick="goTo('dashboard')">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>Dashboard
            </div>
            <div class="topbar-title">AI Intelligence Report</div>
          </div>
          <div class="topbar-right">
            <div class="topbar-icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><div class="notif-dot"></div></div>
            <button class="dm-toggle" onclick="toggleDarkMode()" title="Toggle Dark Mode">🌙</button>
            <div class="topbar-avatar" id="topbar-avatar-aireport" onclick="goTo('profile')" title="My Profile">AW</div>
          </div>
        </div>
        <div class="content" id="d-aireport-content">
          <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading AI Report...</div></div>
        </div>
      </div>
    </div>
  </div><!-- /#d-aireport -->


  <!-- ─── ADMIN DASHBOARD ─── -->
  <!-- NOTE: Admin dashboard reuse id="d-dashboard" yang sudah ada -->
  <!-- Konten di-render via loadAdminDashboard() kalau role = admin -->


  <!-- ─── MANAGE USERS ─── -->
  <div id="d-users" class="d-page">
    <div class="shell">
      <aside class="sidebar">
        <div class="sidebar-bg"></div>
        <div class="sidebar-logo">
          <img src="/missfish-logo.webp" alt="Miss Fish" style="width:80%;height:auto;display:block;">
          <div class="sb-sub">LMS Portal</div>
        </div>
        <nav class="sidebar-nav" id="d-sidebar-nav-users"></nav>
        <div class="sidebar-footer">
          <div class="sidebar-user" onclick="goTo('profile')">
            <div class="sb-avatar" id="sb-avatar-users">AW</div>
            <div>
              <div class="sb-name" id="sb-name-users">—</div>
              <div class="sb-role" id="sb-role-users">—</div>
            </div>
          </div>
        </div>
      </aside>
      <div class="main-area">
        <div class="topbar">
          <div class="topbar-left">
            <div class="topbar-breadcrumb" style="cursor:pointer;display:flex;align-items:center;gap:6px" onclick="goTo('dashboard')">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>Dashboard
            </div>
            <div class="topbar-title">User Management</div>
          </div>
          <div class="topbar-right">
            <div class="topbar-icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><div class="notif-dot"></div></div>
            <button class="dm-toggle" onclick="toggleDarkMode()" title="Toggle Dark Mode">🌙</button>
            <div class="topbar-avatar" id="topbar-avatar-users" onclick="goTo('profile')" title="My Profile">AW</div>
          </div>
        </div>
        <div class="content" id="d-users-content">
          <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading users...</div></div>
        </div>
      </div>
    </div>
  </div><!-- /#d-users -->

  <!-- Add / Edit User Modal -->
  <div class="modal-overlay" id="d-userModal">
    <div class="modal">
      <div class="modal-header">
        <div class="modal-title" id="d-userModal-title">Add New User</div>
        <div class="modal-close" onclick="closeUserModal()">✕</div>
      </div>
      <div class="modal-body">
        <input type="hidden" id="d-userModal-userId">
        <div class="m-row">
          <div class="m-field"><label class="m-label">Full Name</label><input class="m-input" id="d-userModal-name" placeholder="e.g. Wayan Santika"></div>
          <div class="m-field"><label class="m-label">Employee ID</label><input class="m-input" id="d-userModal-empId" placeholder="e.g. MF0113 / BYUS013"><div id="d-userModal-empId-hint" style="display:none;margin-top:6px;font-size:12px;line-height:1.5;color:var(--gray-600,#5C5C56)">🔒 Employee ID tidak bisa diubah. ID ini dipakai sebagai penghubung ke data training, quiz, dan sertifikat orang tersebut. Untuk memindahkan ID ke orang lain, ganti nama &amp; email-nya di sini, lalu tekan 🔑 Reset.</div></div>
        </div>
        <div class="m-field"><label class="m-label">Username</label><input class="m-input" id="d-userModal-username" placeholder="e.g. wayan.santika"></div>
        <div class="m-field"><label class="m-label">Email</label><input class="m-input" id="d-userModal-email" placeholder="e.g. wayan@missfish.id" type="email"></div>
        <div class="m-row">
          <div class="m-field">
            <label class="m-label">Department</label>
            <!-- v2.128 — opsi diisi JavaScript dari _DEPTS
                 (lihat _fillDeptSelect). Jangan di-hardcode lagi:
                 daftar lamanya terbukti berbeda dari sheet Departments. -->
            <select class="m-select" id="d-userModal-dept">
              <option value="">— Select —</option>
            </select>
          </div>
          <div class="m-field">
            <label class="m-label">Role</label>
            <select class="m-select" id="d-userModal-role">
              <option value="">— Select —</option>
              <option value="STAFF">Staff</option>
              <option value="HOD">Head of Dept</option>
              <option value="TRAINEE">Trainee</option>
              <option value="HRM">HRM</option>
              <option value="HR_TALENT">HR Talent</option>
              <option value="TM">Training Manager</option>
              <option value="GM">General Manager</option>
              <option value="IT_ADMIN">IT Super Admin</option>
            </select>
          </div>
        </div>
        <div style="background:var(--gray-50);border-radius:8px;padding:12px 14px;font-size:12.5px;color:var(--gray-700)">
          🔑 Password sementara akan di-generate otomatis. Staff harus ganti saat login pertama.
        </div>
        <div id="d-userModal-msg" style="font-size:13px;color:var(--red);display:none"></div>
      </div>
      <div class="modal-footer">
        <button onclick="closeUserModal()" style="height:44px;padding:0 20px;border-radius:9px;border:1.5px solid var(--gray-200);background:var(--white);font-family:Inter,sans-serif;font-size:13px;font-weight:600;cursor:pointer;color:var(--black)">Cancel</button>
        <button onclick="submitUserModal()" style="height:44px;padding:0 24px;border-radius:9px;border:none;background:var(--solid-dark);color:#fff;font-family:Inter,sans-serif;font-size:13px;font-weight:700;cursor:pointer" id="d-userModal-submitBtn">➕ Add User</button>
      </div>
    </div>
  </div>


  <!-- Add Course Modal -->
  <div class="modal-overlay" id="d-courseModal">
    <div class="modal">
      <div class="modal-header">
        <div class="modal-title" id="d-courseModal-modalTitle">Create New Course</div>
        <div class="modal-close" onclick="closeCourseModal()">✕</div>
      </div>
      <div class="modal-body">
        <input type="hidden" id="d-courseModal-courseId">
        <div class="m-field"><label class="m-label">Course Title *</label><input class="m-input" id="d-courseModal-title" placeholder="e.g. Food Safety Basics"></div>
        <div class="m-field"><label class="m-label">Description</label><textarea class="m-input" id="d-courseModal-desc" placeholder="Course description..." style="height:72px;padding:10px 12px;resize:none"></textarea></div>
        <div class="m-row">
          <div class="m-field">
            <label class="m-label">Department</label>
            <!-- v2.128 — opsi diisi JavaScript dari _DEPTS. -->
            <select class="m-select" id="d-courseModal-dept">
              <option value="General">★ General — SEMUA DEPARTEMEN</option>
            </select>
          </div>
          <div class="m-field">
            <label class="m-label">Passing Score (%)</label>
            <input class="m-input" type="number" id="d-courseModal-passing" min="1" max="100" value="75" placeholder="75">
          </div>
        </div>
        <div class="m-row">
          <div class="m-field">
            <label class="m-label">Cert Valid (Months)</label>
            <input class="m-input" type="number" id="d-courseModal-certMonths" min="1" value="12" placeholder="12">
          </div>
          <div class="m-field">
            <label class="m-label">Deadline (Days)</label>
            <input class="m-input" type="number" id="d-courseModal-deadline" min="1" value="30" placeholder="30">
          </div>
        </div>
        <div class="m-row">
          <div class="m-field">
            <label class="m-label">Max Attempts</label>
            <input class="m-input" type="number" id="d-courseModal-maxAttempts" min="1" placeholder="Unlimited">
          </div>
          <div class="m-field">
            <label class="m-label">Has Certificate</label>
            <label style="display:flex;align-items:center;gap:8px;height:40px;cursor:pointer">
              <input type="checkbox" id="d-courseModal-hasCert" checked style="width:16px;height:16px;accent-color:var(--gold)">
              <span style="font-size:13px;color:var(--gray-700)">Issue on completion</span>
            </label>
          </div>
        </div>
        <div id="d-courseModal-draftNotice" style="background:var(--gray-50);border-radius:8px;padding:12px 14px;font-size:12.5px;color:var(--gray-700)">
          📋 Course will be saved as <strong>Draft</strong>. Add modules after creation, then publish.
        </div>
        <div id="d-courseModal-msg" style="font-size:13px;color:var(--red);display:none"></div>

        <!-- Module section dipindah ke d-modulesModal (tombol 📦 Modules di card) -->
        <div id="d-courseModal-moduleSection" style="display:none"></div>

      </div>
      <div class="modal-footer">
        <button onclick="closeCourseModal()" style="height:44px;padding:0 20px;border-radius:9px;border:1.5px solid var(--gray-200);background:var(--white);font-family:Inter,sans-serif;font-size:13px;font-weight:600;cursor:pointer;color:var(--black)">Cancel</button>
        <button id="d-courseModal-submitBtn" onclick="submitCourseModal()" style="height:44px;padding:0 24px;border-radius:9px;border:none;background:var(--solid-dark);color:#fff;font-family:Inter,sans-serif;font-size:13px;font-weight:700;cursor:pointer">➕ Create Course</button>
      </div>
    </div>
  </div>

  <!-- Assign Course Modal -->
  <div class="modal-overlay" id="d-assignModal">
    <div class="modal" style="max-width:480px">
      <div class="modal-header">
        <div class="modal-title">👥 Assign Course</div>
        <div class="modal-close" onclick="closeAssignModal()">✕</div>
      </div>
      <div class="modal-body">
        <input type="hidden" id="d-assignModal-courseId">
        <div class="m-field">
          <label class="m-label">Course</label>
          <div id="d-assignModal-courseTitle" style="font-size:13.5px;font-weight:700;color:var(--black);padding:8px 12px;background:var(--gray-50);border-radius:9px;border:1.5px solid var(--gray-100)">—</div>
        </div>
        <div class="m-field">
          <label class="m-label">Assign Type *</label>
          <select class="m-select" id="d-assignModal-type" onchange="_populateAssignTarget()">
            <option value="DEPT">By Department</option>
            <option value="USER">Individual Staff</option>
          </select>
        </div>
        <div class="m-field">
          <label class="m-label" id="d-assignModal-targetLabel">Department *</label>
          <select class="m-select" id="d-assignModal-target">
            <option value="">— Select —</option>
          </select>
        </div>
        <div class="m-field">
          <label class="m-label">Deadline (optional)</label>
          <input type="date" class="m-input" id="d-assignModal-deadline" style="width:100%">
        </div>
        <div id="d-assignModal-msg" style="font-size:13px;color:var(--red);display:none"></div>
      </div>
      <div class="modal-footer">
        <button onclick="closeAssignModal()" style="height:44px;padding:0 20px;border-radius:9px;border:1.5px solid var(--gray-200);background:var(--white);font-family:Inter,sans-serif;font-size:13px;font-weight:600;cursor:pointer;color:var(--black)">Cancel</button>
        <button id="d-assignModal-submitBtn" onclick="submitAssignCourse()" style="height:44px;padding:0 24px;border-radius:9px;border:none;background:var(--gold);color:var(--black);font-family:Inter,sans-serif;font-size:13px;font-weight:700;cursor:pointer">Assign Course</button>
      </div>
    </div>
  </div>

  <!-- Modules Management Modal -->
  <div class="modal-overlay" id="d-modulesModal">
    <div class="modal" style="max-width:600px">
      <div class="modal-header">
        <div class="modal-title">📦 Manage Modules</div>
        <div class="modal-close" onclick="closeModulesModal()">✕</div>
      </div>
      <div class="modal-body">
        <div id="d-modulesModal-courseTitle" style="font-size:13px;font-weight:700;color:var(--black);margin-bottom:14px;padding:8px 12px;background:var(--gray-50);border-radius:8px;border:1.5px solid var(--gray-100)">—</div>
        <!-- Module list -->
        <div id="d-moduleList" style="margin-bottom:8px">
          <div style="text-align:center;padding:20px;color:var(--gray-400);font-size:12.5px">Loading modules...</div>
        </div>
        <div id="d-moduleSortRow" style="display:none;margin-bottom:12px;align-items:center;gap:8px">
          <button onclick="sortModules()" style="height:32px;padding:0 16px;border-radius:7px;border:1.5px solid var(--gray-200);background:var(--white);font-family:Inter,sans-serif;font-size:12px;font-weight:600;cursor:pointer;color:var(--black)">⇕ Sort</button>
          <span style="font-size:11.5px;color:var(--gray-500)">Edit No. above, then click Sort</span>
        </div>
        <!-- Add Module Form -->
        <div id="d-addModuleForm" style="display:none;background:var(--gray-50);border-radius:10px;padding:14px;border:1.5px solid var(--gray-100)">
          <div style="font-size:12.5px;font-weight:700;color:var(--black);margin-bottom:10px">➕ New Module</div>
          <div class="m-field" style="margin-bottom:10px">
            <label class="m-label">Module Title *</label>
            <input class="m-input" id="d-mod-title" placeholder="e.g. Introduction Video">
          </div>
          <div class="m-row" style="margin-bottom:10px">
            <div class="m-field">
              <label class="m-label">Type *</label>
              <select class="m-select" id="d-mod-type" onchange="onModuleTypeChange()">
                <option value="VIDEO">🎬 Video</option>
                <option value="PDF">📄 PDF</option>
                <option value="QUIZ">📝 Quiz</option>
              </select>
            </div>
            <div class="m-field" id="d-mod-duration-field">
              <label class="m-label">Duration (min)</label>
              <input class="m-input" type="number" id="d-mod-duration" min="1" placeholder="e.g. 10">
            </div>
          </div>
          <div class="m-field" id="d-mod-source-field" style="margin-bottom:10px">
            <label class="m-label">Source Type *</label>
            <select class="m-select" id="d-mod-source-type" onchange="onModuleSourceChange()">
              <option value="GDRIVE">Google Drive</option>
              <option value="YOUTUBE">YouTube</option>
            </select>
          </div>
          <div class="m-field" id="d-mod-url-field" style="margin-bottom:10px">
            <label class="m-label" id="d-mod-url-label">Google Drive Share URL</label>
            <input class="m-input" id="d-mod-url" placeholder="Paste Drive share link here...">
          </div>
          <div class="m-field" id="d-mod-watch-field" style="margin-bottom:10px">
            <label class="m-label">Min Watch % (Video)</label>
            <input class="m-input" type="number" id="d-mod-watch" min="1" max="100" value="95" placeholder="95">
          </div>
          <div class="m-field" id="d-mod-numq-field" style="margin-bottom:10px;display:none">
            <label class="m-label">Number of Questions (Quiz)</label>
            <input class="m-input" type="number" id="d-mod-numq" min="1" max="200" value="20" placeholder="e.g. 20 (0 = all questions)">
            <div style="font-size:11px;color:var(--gray-400);margin-top:4px">Random questions drawn from bank. Set 0 to use all available questions.</div>
          </div>
          <div id="d-mod-msg" style="font-size:12px;color:var(--red);display:none;margin-bottom:8px"></div>
          <div style="display:flex;gap:8px">
            <button onclick="toggleAddModuleForm()" style="height:36px;padding:0 16px;border-radius:7px;border:1.5px solid var(--gray-200);background:var(--white);font-family:Inter,sans-serif;font-size:12px;font-weight:600;cursor:pointer;color:var(--black)">Cancel</button>
            <button id="d-mod-submitBtn" onclick="submitAddModule()" style="height:36px;padding:0 18px;border-radius:7px;border:none;background:var(--solid-dark);color:#fff;font-family:Inter,sans-serif;font-size:12px;font-weight:700;cursor:pointer">Save Module</button>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button onclick="toggleAddModuleForm()" style="height:44px;padding:0 20px;border-radius:9px;border:1.5px solid var(--gold);background:transparent;font-family:Inter,sans-serif;font-size:13px;font-weight:600;cursor:pointer;color:var(--black)">➕ Add Module</button>
        <button onclick="closeModulesModal()" style="height:44px;padding:0 20px;border-radius:9px;border:1.5px solid var(--gray-200);background:var(--white);font-family:Inter,sans-serif;font-size:13px;font-weight:600;cursor:pointer;color:var(--black)">Done</button>
      </div>
    </div>
  </div>

  <!-- v2.120 Phase A2 — Generic Confirm Modal, menggantikan confirm()
       browser native di 7 titik (course quiz-warning, lockUser,
       publish, archive, delete question, cross-dept assign, delete
       module). confirm() native TIDAK BISA di-style CSS (overlay
       hitam solid, bukan semi-transparan seperti modal LMS lain) dan
       merupakan dialog blocking yang berpotensi ghost-click ke
       elemen di belakangnya saat ditutup -- terkonfirmasi kejadian
       nyata: admin klik OK pada dialog quiz-warning, langsung
       ter-navigasi ke My Courses. Satu modal generic dipakai ulang
       untuk semua 7 titik lewat showConfirmModal(), label tombol &
       warna disesuaikan per konteks lewat parameter (bukan hardcode
       "OK"/"Cancel" generik). -->
  <div class="modal-overlay" id="d-confirmModal">
    <div class="modal" style="max-width:420px">
      <div class="modal-header">
        <div class="modal-title" id="d-confirmModal-title">Confirm</div>
      </div>
      <div class="modal-body">
        <div id="d-confirmModal-message" style="font-size:14px;line-height:1.6;color:var(--black);white-space:pre-line"></div>
      </div>
      <div class="modal-footer">
        <button id="d-confirmModal-cancelBtn" onclick="_closeConfirmModal()" style="height:44px;padding:0 20px;border-radius:9px;border:1.5px solid var(--gray-200);background:var(--white);font-family:Inter,sans-serif;font-size:13px;font-weight:600;cursor:pointer;color:var(--black)">Cancel</button>
        <button id="d-confirmModal-okBtn" style="height:44px;padding:0 24px;border-radius:9px;border:none;background:var(--gold);color:var(--black);font-family:Inter,sans-serif;font-size:13px;font-weight:700;cursor:pointer">OK</button>
      </div>
    </div>
  </div>

  <!-- Quiz Questions Modal -->
  <div class="modal-overlay" id="d-quizQuestionsModal">
    <div class="modal" style="max-width:660px">
      <div class="modal-header">
        <div class="modal-title">📝 Quiz Questions</div>
        <div class="modal-close" onclick="closeQuizQuestionsModal()">✕</div>
      </div>
      <div class="modal-body">
        <div id="d-qqModal-courseTitle" style="font-size:13px;font-weight:700;color:var(--black);margin-bottom:14px;padding:8px 12px;background:var(--gray-50);border-radius:8px;border:1.5px solid var(--gray-100)">—</div>
        <!-- Question list -->
        <div id="d-qqModal-list" style="max-height:320px;overflow-y:auto;margin-bottom:12px">
          <div style="text-align:center;padding:20px;color:var(--gray-400);font-size:12.5px">Loading...</div>
        </div>
        <!-- Add / Edit Question Form -->
        <div id="d-qqModal-form" style="display:none;background:var(--gray-50);border-radius:10px;padding:14px;border:1.5px solid var(--gray-100)">
          <input type="hidden" id="d-qq-edit-id">
          <div style="font-size:12.5px;font-weight:700;color:var(--black);margin-bottom:10px" id="d-qqModal-form-title">➕ Add Question</div>
          <div class="m-field" style="margin-bottom:10px">
            <label class="m-label">Question *</label>
            <textarea class="m-input" id="d-qq-question" rows="3" placeholder="e.g. What is the safe temperature for cold storage?" style="resize:vertical;padding:10px"></textarea>
          </div>
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px">
            <div class="m-field">
              <label class="m-label">Option A *</label>
              <input class="m-input" id="d-qq-opt-a" placeholder="Option A">
            </div>
            <div class="m-field">
              <label class="m-label">Option B *</label>
              <input class="m-input" id="d-qq-opt-b" placeholder="Option B">
            </div>
            <div class="m-field">
              <label class="m-label">Option C *</label>
              <input class="m-input" id="d-qq-opt-c" placeholder="Option C">
            </div>
            <div class="m-field">
              <label class="m-label">Option D *</label>
              <input class="m-input" id="d-qq-opt-d" placeholder="Option D">
            </div>
          </div>
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px">
            <div class="m-field">
              <label class="m-label">Correct Answer *</label>
              <select class="m-select" id="d-qq-correct">
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
                <option value="D">D</option>
              </select>
            </div>
            <div class="m-field">
              <label class="m-label">Difficulty</label>
              <select class="m-select" id="d-qq-difficulty">
                <option value="EASY">Easy</option>
                <option value="MEDIUM" selected>Medium</option>
                <option value="HARD">Hard</option>
              </select>
            </div>
          </div>
          <div class="m-field" style="margin-bottom:10px">
            <label class="m-label">Explanation (optional)</label>
            <input class="m-input" id="d-qq-explanation" placeholder="Shown to staff after quiz submission">
          </div>
          <div id="d-qqModal-form-msg" style="font-size:12px;color:var(--red);display:none;margin-bottom:8px"></div>
          <div style="display:flex;gap:8px">
            <button onclick="_cancelQQForm()" style="height:36px;padding:0 16px;border-radius:7px;border:1.5px solid var(--gray-200);background:var(--white);font-family:Inter,sans-serif;font-size:12px;font-weight:600;cursor:pointer;color:var(--black)">Cancel</button>
            <button id="d-qq-submitBtn" onclick="submitQQForm()" style="height:36px;padding:0 18px;border-radius:7px;border:none;background:var(--solid-dark);color:#fff;font-family:Inter,sans-serif;font-size:12px;font-weight:700;cursor:pointer">Save Question</button>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button onclick="openQuizImportModal()" style="height:44px;padding:0 20px;border-radius:9px;border:1.5px solid var(--gray-200);background:var(--white);font-family:Inter,sans-serif;font-size:13px;font-weight:600;cursor:pointer;color:var(--black)">📥 Import</button>
        <button onclick="_openAddQQForm()" style="height:44px;padding:0 20px;border-radius:9px;border:1.5px solid var(--gold);background:transparent;font-family:Inter,sans-serif;font-size:13px;font-weight:600;cursor:pointer;color:var(--black)">➕ Add Question</button>
        <button onclick="closeQuizQuestionsModal()" style="height:44px;padding:0 20px;border-radius:9px;border:1.5px solid var(--gray-200);background:var(--white);font-family:Inter,sans-serif;font-size:13px;font-weight:600;cursor:pointer;color:var(--black)">Done</button>
      </div>
    </div>
  </div>

  <!-- v2.124 Phase D -- Quiz Import Modal. Terpisah dari Quiz
       Questions Modal supaya alur preview -> confirm punya ruang
       sendiri, tidak berdesakan dengan list soal existing. -->
  <!-- ═══ IMPORT USER MASSAL — v2.141 (Phase M) ═══ -->
  <div class="modal-overlay" id="d-userImportModal">
    <div class="modal" style="max-width:560px">
      <div class="modal-header">
        <div class="modal-title">📥 Import User Massal</div>
        <div class="modal-close" onclick="closeUserImportModal()">✕</div>
      </div>
      <div class="modal-body">

        <!-- STEP 1 -->
        <div id="d-uiModal-step1">
          <div class="m-field" style="margin-bottom:12px">
            <label class="m-label">Google Sheet Link *</label>
            <input class="m-input" id="d-ui-sheetUrl" placeholder="https://docs.google.com/spreadsheets/d/...">
            <div style="font-size:11px;color:var(--gray-400);margin-top:6px;line-height:1.6">
              Baris 1 harus berisi header dengan urutan PERSIS:<br>
              <span style="font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--gray-600)">user_id · username · email · full_name · role · department</span><br>
              Kolom <strong>username boleh dikosongkan</strong> — otomatis diisi dari Employee ID.
            </div>
          </div>
          <div style="font-size:11.5px;line-height:1.6;color:var(--gray-600);background:var(--gray-50);border:1px solid var(--gray-100);border-radius:8px;padding:10px 12px;margin-bottom:12px">
            🔑 Semua user baru mendapat password sementara dan <strong>wajib menggantinya saat login pertama</strong>. Baris yang bermasalah akan di-skip — sisanya tetap masuk.
          </div>
          <div id="d-uiModal-msg" style="display:none;font-size:12.5px;color:#C0392B;background:#FDECEA;border:1px solid #F5C6C2;border-radius:8px;padding:10px 12px;margin-bottom:10px"></div>
          <button id="d-ui-previewBtn" onclick="previewUserImportUI()" style="width:100%;height:44px;border-radius:9px;border:none;background:var(--solid-dark);color:#fff;font-family:Inter,sans-serif;font-size:13px;font-weight:700;cursor:pointer">Preview Import</button>
        </div>

        <!-- STEP 2 -->
        <div id="d-uiModal-step2" style="display:none">
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px">
            <div style="background:var(--gray-50);border-radius:10px;padding:12px;text-align:center">
              <div style="font-family:Georgia,serif;font-size:22px;font-weight:700;color:#1E8449" id="d-ui-preview-import">0</div>
              <div style="font-size:11px;color:var(--gray-400);text-transform:uppercase;letter-spacing:.05em">Akan Masuk</div>
            </div>
            <div style="background:var(--gray-50);border-radius:10px;padding:12px;text-align:center">
              <div style="font-family:Georgia,serif;font-size:22px;font-weight:700;color:#C0392B" id="d-ui-preview-skip">0</div>
              <div style="font-size:11px;color:var(--gray-400);text-transform:uppercase;letter-spacing:.05em">Akan Di-skip</div>
            </div>
          </div>
          <div id="d-ui-preview-contoh" style="margin-bottom:12px"></div>
          <div id="d-ui-preview-errors" style="margin-bottom:14px"></div>
          <div style="display:flex;gap:10px">
            <button onclick="_uiBackToStep1()" style="flex:1;height:44px;border-radius:9px;border:1.5px solid var(--gray-300);background:#fff;color:var(--black);font-family:Inter,sans-serif;font-size:13px;font-weight:700;cursor:pointer">← Kembali</button>
            <button id="d-ui-confirmBtn" onclick="confirmUserImportUI()" style="flex:1.6;height:44px;border-radius:9px;border:none;background:var(--solid-dark);color:#fff;font-family:Inter,sans-serif;font-size:13px;font-weight:700;cursor:pointer">✓ Import Sekarang</button>
          </div>
        </div>

      </div>
    </div>
  </div>

  <div class="modal-overlay" id="d-quizImportModal">
    <div class="modal" style="max-width:560px">
      <div class="modal-header">
        <div class="modal-title">📥 Import Quiz Questions</div>
        <div class="modal-close" onclick="closeQuizImportModal()">✕</div>
      </div>
      <div class="modal-body">
        <div id="d-qiModal-courseTitle" style="font-size:13px;font-weight:700;color:var(--black);margin-bottom:14px;padding:8px 12px;background:var(--gray-50);border-radius:8px;border:1.5px solid var(--gray-100)">—</div>

        <!-- STEP 1: input link + mode -->
        <div id="d-qiModal-step1">
          <div class="m-field" style="margin-bottom:12px">
            <label class="m-label">Google Sheet Link *</label>
            <input class="m-input" id="d-qi-sheetUrl" placeholder="https://docs.google.com/spreadsheets/d/...">
            <div style="font-size:11px;color:var(--gray-400);margin-top:4px">Sheet harus punya 12 kolom sesuai format standar (question_id, course_id, order_num, question_text, option_a-d, correct_option, explanation, difficulty, is_active).</div>
          </div>
          <div class="m-field" style="margin-bottom:12px">
            <label class="m-label">Mode</label>
            <select class="m-input" id="d-qi-mode">
              <option value="APPEND">Append — tambah ke bank soal existing</option>
              <option value="REPLACE">Replace — nonaktifkan soal lama, ganti semua</option>
            </select>
          </div>
          <div id="d-qiModal-msg" style="display:none;font-size:12.5px;color:#C0392B;background:#FDECEA;border:1px solid #F5C6C2;border-radius:8px;padding:10px 12px;margin-bottom:10px"></div>
          <button id="d-qi-previewBtn" onclick="previewQuizImportUI()" style="width:100%;height:44px;border-radius:9px;border:none;background:var(--solid-dark);color:#fff;font-family:Inter,sans-serif;font-size:13px;font-weight:700;cursor:pointer">Preview Import</button>
        </div>

        <!-- STEP 2: hasil preview + konfirmasi -->
        <div id="d-qiModal-step2" style="display:none">
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px">
            <div style="background:var(--gray-50);border-radius:10px;padding:12px;text-align:center">
              <div style="font-family:Georgia,serif;font-size:22px;font-weight:700;color:#1E8449" id="d-qi-preview-import">0</div>
              <div style="font-size:11px;color:var(--gray-400);text-transform:uppercase;letter-spacing:.05em">Akan Diimpor</div>
            </div>
            <div style="background:var(--gray-50);border-radius:10px;padding:12px;text-align:center">
              <div style="font-family:Georgia,serif;font-size:22px;font-weight:700;color:#C0392B" id="d-qi-preview-skip">0</div>
              <div style="font-size:11px;color:var(--gray-400);text-transform:uppercase;letter-spacing:.05em">Akan Di-skip</div>
            </div>
          </div>
          <div id="d-qiModal-skipList" style="max-height:180px;overflow-y:auto;margin-bottom:14px;font-size:12px;color:var(--gray-500)"></div>
          <div id="d-qiModal-replaceWarn" style="display:none;font-size:12.5px;color:#8A6D00;background:#FFF8E1;border:1px solid #FFE7A0;border-radius:8px;padding:10px 12px;margin-bottom:12px">⚠️ Mode Replace: semua soal aktif lama course ini akan dinonaktifkan (tidak dihapus permanen) dan digantikan yang baru.</div>
          <div style="display:flex;gap:10px">
            <button onclick="_qiBackToStep1()" style="flex:1;height:44px;border-radius:9px;border:1.5px solid var(--gray-200);background:var(--white);font-family:Inter,sans-serif;font-size:13px;font-weight:600;cursor:pointer;color:var(--black)">Kembali</button>
            <button id="d-qi-confirmBtn" onclick="confirmQuizImportUI()" style="flex:1;height:44px;border-radius:9px;border:none;background:var(--gold);color:var(--black);font-family:Inter,sans-serif;font-size:13px;font-weight:700;cursor:pointer">Import Sekarang</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ─── MANAGE COURSES ─── -->
  <div id="d-courses-mgmt" class="d-page">
    <div class="shell">
      <aside class="sidebar">
        <div class="sidebar-bg"></div>
        <div class="sidebar-logo">
          <img src="/missfish-logo.webp" alt="Miss Fish" style="width:80%;height:auto;display:block;">
          <div class="sb-sub">LMS Portal</div>
        </div>
        <nav class="sidebar-nav" id="d-sidebar-nav-courses-mgmt"></nav>
        <div class="sidebar-footer">
          <div class="sidebar-user" onclick="goTo('profile')">
            <div class="sb-avatar" id="sb-avatar-courses-mgmt">AW</div>
            <div>
              <div class="sb-name" id="sb-name-courses-mgmt">—</div>
              <div class="sb-role" id="sb-role-courses-mgmt">—</div>
            </div>
          </div>
        </div>
      </aside>
      <div class="main-area">
        <div class="topbar">
          <div class="topbar-left">
            <div class="topbar-breadcrumb" style="cursor:pointer;display:flex;align-items:center;gap:6px" onclick="goTo('dashboard')">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>Dashboard
            </div>
            <div class="topbar-title">Manage Courses</div>
          </div>
          <div class="topbar-right">
            <div class="topbar-icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><div class="notif-dot"></div></div>
            <button class="dm-toggle" onclick="toggleDarkMode()" title="Toggle Dark Mode">🌙</button>
            <div class="topbar-avatar" id="topbar-avatar-courses-mgmt" onclick="goTo('profile')" title="My Profile">AW</div>
          </div>
        </div>
        <div class="content" id="d-courses-mgmt-content">
          <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading courses...</div></div>
        </div>
      </div>
    </div>
  </div><!-- /#d-courses-mgmt -->


  <!-- ─── ATTENDANCE ─── -->
  <div id="d-attendance" class="d-page">
    <div class="shell">
      <aside class="sidebar">
        <div class="sidebar-bg"></div>
        <div class="sidebar-logo">
          <img src="/missfish-logo.webp" alt="Miss Fish" style="width:80%;height:auto;display:block;">
          <div class="sb-sub">LMS Portal</div>
        </div>
        <nav class="sidebar-nav" id="d-sidebar-nav-attendance"></nav>
        <div class="sidebar-footer">
          <div class="sidebar-user" onclick="goTo('profile')">
            <div class="sb-avatar" id="sb-avatar-attendance">AW</div>
            <div>
              <div class="sb-name" id="sb-name-attendance">—</div>
              <div class="sb-role" id="sb-role-attendance">—</div>
            </div>
          </div>
        </div>
      </aside>
      <div class="main-area">
        <div class="topbar">
          <div class="topbar-left">
            <div class="topbar-breadcrumb" style="cursor:pointer;display:flex;align-items:center;gap:6px" onclick="goTo('dashboard')">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>Dashboard
            </div>
            <div class="topbar-title">Attendance</div>
          </div>
          <div class="topbar-right">
            <div class="topbar-icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><div class="notif-dot"></div></div>
            <button class="dm-toggle" onclick="toggleDarkMode()" title="Toggle Dark Mode">🌙</button>
            <div class="topbar-avatar" id="topbar-avatar-attendance" onclick="goTo('profile')">AW</div>
          </div>
        </div>
        <div class="content" id="d-attendance-content">
          <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading attendance...</div></div>
        </div>
      </div>
    </div>
  </div><!-- /#d-attendance -->


  <!-- ─── COURSE DETAIL ─── -->
  <div id="d-course-detail" class="d-page">
    <div class="shell">
      <aside class="sidebar">
        <div class="sidebar-bg"></div>
        <div class="sidebar-logo"><img src="/missfish-logo.webp" alt="Miss Fish" style="width:80%;height:auto;display:block;"><div class="sb-sub">LMS Portal</div></div>
        <nav class="sidebar-nav" id="d-sidebar-nav-course-detail"></nav>
        <div class="sidebar-footer"><div class="sidebar-user" onclick="goTo('profile')"><div class="sb-avatar" id="sb-avatar-course-detail">AW</div><div><div class="sb-name" id="sb-name-course-detail">—</div><div class="sb-role" id="sb-role-course-detail">—</div></div></div></div>
      </aside>
      <div class="main-area">
        <div class="topbar">
          <div class="topbar-left">
            <div class="topbar-breadcrumb" style="cursor:pointer;display:flex;align-items:center;gap:6px" onclick="goTo('courses')">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>My Courses
            </div>
            <div class="topbar-title" id="d-course-detail-title">Course Detail</div>
          </div>
          <div class="topbar-right">
            <div class="topbar-avatar" id="topbar-avatar-course-detail" onclick="goTo('profile')">AW</div>
          </div>
        </div>
        <div class="content" id="d-course-detail-content">
          <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading course...</div></div>
        </div>
      </div>
    </div>
  </div><!-- /#d-course-detail -->


  <!-- ─── VIDEO PLAYER ─── -->
  <div id="d-video" class="d-page">
    <div class="shell">
      <aside class="sidebar">
        <div class="sidebar-bg"></div>
        <div class="sidebar-logo"><img src="/missfish-logo.webp" alt="Miss Fish" style="width:80%;height:auto;display:block;"><div class="sb-sub">LMS Portal</div></div>
        <nav class="sidebar-nav" id="d-sidebar-nav-video"></nav>
        <div class="sidebar-footer"><div class="sidebar-user" onclick="goTo('profile')"><div class="sb-avatar" id="sb-avatar-video">AW</div><div><div class="sb-name" id="sb-name-video">—</div><div class="sb-role" id="sb-role-video">—</div></div></div></div>
      </aside>
      <div class="main-area">
        <div class="topbar">
          <div class="topbar-left">
            <div class="topbar-breadcrumb" style="cursor:pointer;display:flex;align-items:center;gap:6px" onclick="backToCourseDetail()">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg><span id="d-video-course-name">Course</span>
            </div>
            <div class="topbar-title" id="d-video-title" style="margin-top:2px;padding-top:2px">Video Module</div>
          </div>
          <div class="topbar-right">
            <div class="topbar-avatar" id="topbar-avatar-video" onclick="goTo('profile')">AW</div>
          </div>
        </div>
        <div class="content" id="d-video-content">
          <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading video...</div></div>
        </div>
      </div>
    </div>
  </div><!-- /#d-video -->


  <!-- ─── PDF VIEWER ─── -->
  <div id="d-pdf" class="d-page">
    <div class="shell">
      <aside class="sidebar">
        <div class="sidebar-bg"></div>
        <div class="sidebar-logo"><img src="/missfish-logo.webp" alt="Miss Fish" style="width:80%;height:auto;display:block;"><div class="sb-sub">LMS Portal</div></div>
        <nav class="sidebar-nav" id="d-sidebar-nav-pdf"></nav>
        <div class="sidebar-footer"><div class="sidebar-user" onclick="goTo('profile')"><div class="sb-avatar" id="sb-avatar-pdf">AW</div><div><div class="sb-name" id="sb-name-pdf">—</div><div class="sb-role" id="sb-role-pdf">—</div></div></div></div>
      </aside>
      <div class="main-area">
        <div class="topbar">
          <div class="topbar-left">
            <div class="topbar-breadcrumb" style="cursor:pointer;display:flex;align-items:center;gap:6px" onclick="backToCourseDetail()">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg><span id="d-pdf-course-name">Course</span>
            </div>
            <div class="topbar-title" id="d-pdf-title">PDF Module</div>
          </div>
          <div class="topbar-right">
            <div class="topbar-avatar" id="topbar-avatar-pdf" onclick="goTo('profile')">AW</div>
          </div>
        </div>
        <div class="content" id="d-pdf-content">
          <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading PDF...</div></div>
        </div>
      </div>
    </div>
  </div><!-- /#d-pdf -->


  <!-- ─── CERTIFICATE VIEW — v2.112, halaman biasa (bukan modal) ───
       Diganti dari modal karena modal memaksa lebar terbatas (~920px)
       sementara sertifikat perlu 1060px tetap untuk rasio A4 landscape
       yang benar — hasilnya dulu selalu perlu di-scroll horizontal
       atau terpotong. Sebagai halaman biasa, struktur wrapper
       #cert-pdf-target mengikuti pola MissFishLMS_Certificate_v1.9.html
       (referensi resmi): width:1060px + max-width:100% — MENYUSUT
       PROPORSIONAL di layar sempit, tidak pernah scroll, tidak pernah
       terpotong. Elemen ini jugalah yang dikirim ke html2pdf/print,
       jadi preview dan hasil cetak dijamin identik rasionya. -->
  <div id="d-cert-view" class="d-page">
    <div class="shell">
      <aside class="sidebar">
        <div class="sidebar-bg"></div>
        <div class="sidebar-logo"><img src="/missfish-logo.webp" alt="Miss Fish" style="width:80%;height:auto;display:block;"><div class="sb-sub">LMS Portal</div></div>
        <nav class="sidebar-nav" id="d-sidebar-nav-cert-view"></nav>
        <div class="sidebar-footer"><div class="sidebar-user" onclick="goTo('profile')"><div class="sb-avatar" id="sb-avatar-cert-view">AW</div><div><div class="sb-name" id="sb-name-cert-view">—</div><div class="sb-role" id="sb-role-cert-view">—</div></div></div></div>
      </aside>
      <div class="main-area">
        <div class="topbar">
          <div class="topbar-left">
            <div class="topbar-breadcrumb" style="cursor:pointer;display:flex;align-items:center;gap:6px" onclick="goTo('certs')">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg><span>Certificates</span>
            </div>
            <div class="topbar-title">Certificate</div>
          </div>
          <div class="topbar-right">
            <button class="btn-start-course" style="height:38px;padding:0 18px;font-size:13px" onclick="downloadCertPDF()">⬇ Download PDF</button>
          </div>
        </div>
        <div class="content" id="d-cert-view-content" style="background:#f0ede8;padding:32px">
          <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading certificate...</div></div>
        </div>
      </div>
    </div>
  </div><!-- /#d-cert-view -->


  <!-- ─── RELEASE LOG — v2.114, halaman biasa (dipindah dari
       dalam Settings) ─── -->
  <div id="d-release-log" class="d-page">
    <div class="shell">
      <aside class="sidebar">
        <div class="sidebar-bg"></div>
        <div class="sidebar-logo"><img src="/missfish-logo.webp" alt="Miss Fish" style="width:80%;height:auto;display:block;"><div class="sb-sub">LMS Portal</div></div>
        <nav class="sidebar-nav" id="d-sidebar-nav-release-log"></nav>
        <div class="sidebar-footer"><div class="sidebar-user" onclick="goTo('profile')"><div class="sb-avatar" id="sb-avatar-release-log">AW</div><div><div class="sb-name" id="sb-name-release-log">—</div><div class="sb-role" id="sb-role-release-log">—</div></div></div></div>
      </aside>
      <div class="main-area">
        <div class="topbar">
          <div class="topbar-left">
            <div class="topbar-breadcrumb" style="cursor:pointer;display:flex;align-items:center;gap:6px" onclick="goTo('settings')">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg><span>Settings</span>
            </div>
            <div class="topbar-title">Release Log</div>
          </div>
          <div class="topbar-right">
            <div style="font-size:12px;color:var(--gray-500)" id="d-release-current">Running: —</div>
          </div>
        </div>
        <div class="content" id="d-release-log-content" style="padding:32px">
          <div class="settings-section"><div class="ss-body" id="d-release-body">
            <div style="padding:20px;text-align:center;color:var(--gray-400);font-size:13px">Loading release history…</div>
          </div></div>
        </div>
      </div>
    </div>
  </div><!-- /#d-release-log -->


  <!-- ─── QUIZ ─── -->
  <div id="d-quiz" class="d-page">
    <div class="shell">
      <aside class="sidebar">
        <div class="sidebar-bg"></div>
        <div class="sidebar-logo"><img src="/missfish-logo.webp" alt="Miss Fish" style="width:80%;height:auto;display:block;"><div class="sb-sub">LMS Portal</div></div>
        <nav class="sidebar-nav" id="d-sidebar-nav-quiz"></nav>
        <div class="sidebar-footer"><div class="sidebar-user" onclick="goTo('profile')"><div class="sb-avatar" id="sb-avatar-quiz">AW</div><div><div class="sb-name" id="sb-name-quiz">—</div><div class="sb-role" id="sb-role-quiz">—</div></div></div></div>
      </aside>
      <div class="main-area">
        <div class="topbar">
          <div class="topbar-left">
            <div class="topbar-breadcrumb" style="cursor:pointer;display:flex;align-items:center;gap:6px" onclick="backToCourseDetail()">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg><span id="d-quiz-course-name">Course</span>
            </div>
            <div class="topbar-title" id="d-quiz-title">Quiz</div>
          </div>
          <div class="topbar-right">
            <div class="topbar-avatar" id="topbar-avatar-quiz" onclick="goTo('profile')">AW</div>
          </div>
        </div>
        <div class="content" id="d-quiz-content">
          <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading quiz...</div></div>
        </div>
      </div>
    </div>
  </div><!-- /#d-quiz -->


  <!-- ─── REPORTS ─── -->
  <div id="d-reports" class="d-page">
    <div class="shell">
      <aside class="sidebar">
        <div class="sidebar-bg"></div>
        <div class="sidebar-logo"><img src="/missfish-logo.webp" alt="Miss Fish" style="width:80%;height:auto;display:block;"><div class="sb-sub">LMS Portal</div></div>
        <nav class="sidebar-nav" id="d-sidebar-nav-reports"></nav>
        <div class="sidebar-footer"><div class="sidebar-user" onclick="goTo('profile')"><div class="sb-avatar" id="sb-avatar-reports">AW</div><div><div class="sb-name" id="sb-name-reports">—</div><div class="sb-role" id="sb-role-reports">—</div></div></div></div>
      </aside>
      <div class="main-area">
        <div class="topbar">
          <div class="topbar-left">
            <div class="topbar-breadcrumb" style="cursor:pointer;display:flex;align-items:center;gap:6px" onclick="goTo('dashboard')"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>Dashboard</div>
            <div class="topbar-title">Reports</div>
          </div>
          <div class="topbar-right">
            <div class="topbar-icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><div class="notif-dot"></div></div>
            <button class="dm-toggle" onclick="toggleDarkMode()" title="Toggle Dark Mode">🌙</button>
            <div class="topbar-avatar" id="topbar-avatar-reports" onclick="goTo('profile')">AW</div>
          </div>
        </div>
        <div class="content" id="d-reports-content">
          <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading reports...</div></div>
        </div>
      </div>
    </div>
  </div><!-- /#d-reports -->


  <!-- ─── ACTIVITY LOG ─── -->
  <div id="d-actlog" class="d-page">
    <div class="shell">
      <aside class="sidebar">
        <div class="sidebar-bg"></div>
        <div class="sidebar-logo"><img src="/missfish-logo.webp" alt="Miss Fish" style="width:80%;height:auto;display:block;"><div class="sb-sub">LMS Portal</div></div>
        <nav class="sidebar-nav" id="d-sidebar-nav-actlog"></nav>
        <div class="sidebar-footer"><div class="sidebar-user" onclick="goTo('profile')"><div class="sb-avatar" id="sb-avatar-actlog">AW</div><div><div class="sb-name" id="sb-name-actlog">—</div><div class="sb-role" id="sb-role-actlog">—</div></div></div></div>
      </aside>
      <div class="main-area">
        <div class="topbar">
          <div class="topbar-left">
            <div class="topbar-breadcrumb" style="cursor:pointer;display:flex;align-items:center;gap:6px" onclick="goTo('dashboard')"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>Dashboard</div>
            <div class="topbar-title">Activity Log</div>
          </div>
          <div class="topbar-right">
            <div class="topbar-icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><div class="notif-dot"></div></div>
            <button class="dm-toggle" onclick="toggleDarkMode()" title="Toggle Dark Mode">🌙</button>
            <div class="topbar-avatar" id="topbar-avatar-actlog" onclick="goTo('profile')">AW</div>
          </div>
        </div>
        <div class="content" id="d-actlog-content">
          <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading activity log...</div></div>
        </div>
      </div>
    </div>
  </div><!-- /#d-actlog -->


  <!-- ─── SETTINGS ─── -->
  <div id="d-settings" class="d-page">
    <div class="shell">
      <aside class="sidebar">
        <div class="sidebar-bg"></div>
        <div class="sidebar-logo"><img src="/missfish-logo.webp" alt="Miss Fish" style="width:80%;height:auto;display:block;"><div class="sb-sub">LMS Portal</div></div>
        <nav class="sidebar-nav" id="d-sidebar-nav-settings"></nav>
        <div class="sidebar-footer"><div class="sidebar-user" onclick="goTo('profile')"><div class="sb-avatar" id="sb-avatar-settings">AW</div><div><div class="sb-name" id="sb-name-settings">—</div><div class="sb-role" id="sb-role-settings">—</div></div></div></div>
      </aside>
      <div class="main-area">
        <div class="topbar">
          <div class="topbar-left">
            <div class="topbar-breadcrumb" style="cursor:pointer;display:flex;align-items:center;gap:6px" onclick="goTo('dashboard')"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>Dashboard</div>
            <div class="topbar-title">Settings</div>
          </div>
          <div class="topbar-right">
            <div class="topbar-icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><div class="notif-dot"></div></div>
            <button class="dm-toggle" onclick="toggleDarkMode()" title="Toggle Dark Mode">🌙</button>
            <div class="topbar-avatar" id="topbar-avatar-settings" onclick="goTo('profile')">AW</div>
          </div>
        </div>
        <div class="content" id="d-settings-content">
          <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading settings...</div></div>
        </div>
      </div>
    </div>
  </div><!-- /#d-settings -->


  <!-- ─── MY PROFILE ─── -->
  <div id="d-profile" class="d-page">
    <div class="shell">
      <aside class="sidebar">
        <div class="sidebar-bg"></div>
        <div class="sidebar-logo"><img src="/missfish-logo.webp" alt="Miss Fish" style="width:80%;height:auto;display:block;"><div class="sb-sub">LMS Portal</div></div>
        <nav class="sidebar-nav" id="d-sidebar-nav-profile"></nav>
        <div class="sidebar-footer"><div class="sidebar-user" onclick="goTo('profile')"><div class="sb-avatar" id="sb-avatar-profile">AW</div><div><div class="sb-name" id="sb-name-profile">—</div><div class="sb-role" id="sb-role-profile">—</div></div></div></div>
      </aside>
      <div class="main-area">
        <div class="topbar">
          <div class="topbar-left">
            <div class="topbar-breadcrumb" style="cursor:pointer;display:flex;align-items:center;gap:6px" onclick="goTo('dashboard')"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>Dashboard</div>
            <div class="topbar-title">My Profile</div>
          </div>
          <div class="topbar-right">
            <div class="topbar-icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><div class="notif-dot"></div></div>
            <button class="dm-toggle" onclick="toggleDarkMode()" title="Toggle Dark Mode">🌙</button>
            <div class="topbar-avatar" id="topbar-avatar-profile" onclick="goTo('profile')">AW</div>
          </div>
        </div>
        <div class="content" id="d-profile-content">
          <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading profile...</div></div>
        </div>
      </div>
    </div>
  </div><!-- /#d-profile -->


</div><!-- /#desk -->


<!-- ══════════════════════════════════════════
     MOBILE LAYOUT
══════════════════════════════════════════ -->
<div id="mob">

  <!-- ─── MOBILE LOGIN ─── -->
  <div id="m-login" class="m-page">
    <div class="mob-login-bg"></div>

    <div class="mob-login-top">
      <img src="/missfish-logo.webp"
           alt="Miss Fish Bali"
           style="width:200px;height:auto;display:block;margin:0 auto;object-fit:contain;">
      <div class="mob-login-brand">Miss Fish Bali</div>
      <div class="mob-login-sub">Learning Management System</div>
      <div class="mob-login-tagline">Your training portal.<br>Learn, grow, and earn your certificate.</div>
    </div>

    <div class="mob-login-card">
      <div class="mob-login-card-eyebrow">Welcome Back</div>
      <div class="mob-login-card-title">Sign In</div>
      <div class="mob-login-card-sub">Enter your credentials to continue</div>

      <div class="lf-group">
        <label class="lf-label" for="m-username">Employee ID</label>
        <div class="lf-wrap">
          <input class="lf-input" id="m-username" type="text"
                 placeholder="E.G. MF0042" autocomplete="username" style="text-transform:uppercase">
          <span class="lf-icon">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
              <circle cx="12" cy="7" r="4"/>
            </svg>
          </span>
        </div>
      </div>

      <div class="lf-group">
        <label class="lf-label" for="m-pwd">Password</label>
        <div class="lf-wrap">
          <input class="lf-input" id="m-pwd" type="password"
                 placeholder="Enter your password" autocomplete="current-password">
          <span class="lf-icon" onclick="togglePwd('m-pwd','m-eye')">
            <svg id="m-eye" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
              <circle cx="12" cy="12" r="3"/>
            </svg>
          </span>
        </div>
      </div>

      <div class="mob-attempt-box" id="m-attempt-box"></div>
      <button class="btn-login-m" id="m-signin-btn" onclick="mLogin()">Sign In</button>

      <div class="mob-login-forgot">
        Forgot password or account locked?<br>
        Contact <strong>IT Support</strong> or <strong>HRM</strong>.
      </div>
      <div style="text-align:center;font-size:10px;color:var(--gray-400);margin-top:16px;padding-top:14px;border-top:1px solid var(--gray-100)">Powered by Miss Fish IT Dept.</div>
    </div>
  </div><!-- /#m-login -->

  <!-- ─── MOBILE DASHBOARD (shell, content diisi batch berikutnya) ─── -->
  <div id="m-dashboard" class="m-page">
    <div class="inner-topbar dark">
      <div class="it-left"><div class="it-brand" aria-label="Miss Fish Bali"><img src="/missfish-logo.webp" alt="Miss Fish Bali"></div></div>
      <div class="it-center-block">
        <div class="it-eyebrow">Miss Fish LMS</div>
        <div class="it-title" id="m-topbar-title">Dashboard</div>
      </div>
      <div class="it-right">
        <div class="it-avatar mtb-avatar" onclick="goTo('profile')">--</div>
      </div>
    </div>
    <div class="scroll-content" id="m-dashboard-content">
      <div class="page-placeholder">
        <div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div>
        <div class="ph-title">Loading dashboard...</div>
      </div>
    </div>
    <div class="bottom-nav" id="m-bottom-nav"></div>
  </div><!-- /#m-dashboard -->


  <!-- ─── MOBILE MY COURSES ─── -->
  <div id="m-courses" class="m-page">
    <div class="inner-topbar dark">
      <div class="it-left"><div class="it-brand" aria-label="Miss Fish Bali"><img src="/missfish-logo.webp" alt="Miss Fish Bali"></div></div>
      <div class="it-center-block">
        <div class="it-eyebrow">Miss Fish LMS</div>
        <div class="it-title white">My Courses</div>
      </div>
      <div class="it-right">
        <div class="it-avatar mtb-avatar" onclick="goTo('profile')">--</div>
      </div>
    </div>
    <div class="scroll-content">
      <div class="filter-pills-m" id="m-course-filters">
        <button class="pill-m active" onclick="setMCourseFilter(this,'all')">All</button>
        <button class="pill-m" onclick="setMCourseFilter(this,'in-progress')">In Progress</button>
        <button class="pill-m" onclick="setMCourseFilter(this,'not-started')">Not Started</button>
        <button class="pill-m" onclick="setMCourseFilter(this,'completed')">Completed</button>
      </div>
      <div class="courses-list-m" id="m-courses-list">
        <div class="page-placeholder">
          <div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div>
          <div class="ph-title">Loading courses...</div>
        </div>
      </div>
      <div style="height:16px"></div>
    </div>
    <div class="bottom-nav" id="m-bottom-nav-courses"></div>
  </div><!-- /#m-courses -->


  <!-- ─── MOBILE MY PROGRESS ─── -->
  <div id="m-progress" class="m-page">
    <div class="inner-topbar dark">
      <div class="it-left"><div class="it-brand" aria-label="Miss Fish Bali"><img src="/missfish-logo.webp" alt="Miss Fish Bali"></div></div>
      <div class="it-center-block">
        <div class="it-eyebrow">Miss Fish LMS</div>
        <div class="it-title white">My Progress</div>
      </div>
      <div class="it-right">
        <div class="it-avatar mtb-avatar" onclick="goTo('profile')">--</div>
      </div>
    </div>
    <div class="scroll-content" id="m-progress-content">
      <div class="page-placeholder">
        <div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div>
        <div class="ph-title">Loading progress...</div>
      </div>
    </div>
    <div class="bottom-nav" id="m-bottom-nav-progress"></div>
  </div><!-- /#m-progress -->


  <!-- ─── MOBILE CERTIFICATES ─── -->
  <div id="m-certs" class="m-page">
    <div class="inner-topbar dark">
      <div class="it-left"><div class="it-brand" aria-label="Miss Fish Bali"><img src="/missfish-logo.webp" alt="Miss Fish Bali"></div></div>
      <div class="it-center-block">
        <div class="it-eyebrow">Miss Fish LMS</div>
        <div class="it-title white">My Certificates</div>
      </div>
      <div class="it-right">
        <div class="it-avatar mtb-avatar" onclick="goTo('profile')">--</div>
      </div>
    </div>
    <div class="scroll-content">
      <div class="cert-list-m" id="m-certs-list" style="padding-top:16px">
        <div class="page-placeholder">
          <div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div>
          <div class="ph-title">Loading certificates...</div>
        </div>
      </div>
      <div style="height:16px"></div>
    </div>
    <div class="bottom-nav" id="m-bottom-nav-certs"></div>
  </div><!-- /#m-certs -->


  <!-- ─── MOBILE HOD DASHBOARD ─── -->
  <div id="m-hod-dashboard" class="m-page">
    <div class="inner-topbar dark">
      <div class="it-left"><div class="it-brand" aria-label="Miss Fish Bali"><img src="/missfish-logo.webp" alt="Miss Fish Bali"></div></div>
      <div class="it-center-block">
        <div class="it-eyebrow">Miss Fish LMS</div>
        <div class="it-title white">Dashboard</div>
      </div>
      <div class="it-right">
        <div class="it-avatar mtb-avatar" onclick="goTo('profile')">--</div>
      </div>
    </div>
    <div class="scroll-content" id="m-hod-dashboard-content">
      <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>
    </div>
    <div class="bottom-nav" id="m-bottom-nav-hod-dashboard"></div>
  </div><!-- /#m-hod-dashboard -->


  <!-- ─── MOBILE HOD MY TEAM ─── -->
  <div id="m-hod-staff" class="m-page">
    <div class="inner-topbar dark">
      <div class="it-left"><div class="it-brand" aria-label="Miss Fish Bali"><img src="/missfish-logo.webp" alt="Miss Fish Bali"></div></div>
      <div class="it-center-block">
        <div class="it-eyebrow">Miss Fish LMS</div>
        <div class="it-title" id="m-hod-staff-title">My Team</div>
      </div>
      <div class="it-right">
        <div class="it-avatar mtb-avatar" onclick="goTo('profile')">--</div>
      </div>
    </div>
    <div class="scroll-content" id="m-hod-staff-content">
      <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading team...</div></div>
    </div>
    <div class="bottom-nav" id="m-bottom-nav-hod-staff"></div>
  </div><!-- /#m-hod-staff -->


  <!-- ─── MOBILE HOD ASSIGN COURSE ─── -->
  <div id="m-hod-assign" class="m-page">
    <div class="inner-topbar dark">
      <div class="it-left"><div class="it-brand" aria-label="Miss Fish Bali"><img src="/missfish-logo.webp" alt="Miss Fish Bali"></div></div>
      <div class="it-center-block">
        <div class="it-eyebrow">Miss Fish LMS</div>
        <div class="it-title white">Assign Course</div>
      </div>
      <div class="it-right">
        <div class="it-avatar mtb-avatar" onclick="goTo('profile')">--</div>
      </div>
    </div>
    <div class="scroll-content" id="m-hod-assign-content">
      <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>
    </div>
    <div class="bottom-nav" id="m-bottom-nav-hod-assign"></div>
  </div><!-- /#m-hod-assign -->


  <!-- ─── MOBILE HOD DEPT REPORTS ─── -->
  <div id="m-hod-reports" class="m-page">
    <div class="inner-topbar dark">
      <div class="it-left"><div class="it-brand" aria-label="Miss Fish Bali"><img src="/missfish-logo.webp" alt="Miss Fish Bali"></div></div>
      <div class="it-center-block">
        <div class="it-eyebrow">Miss Fish LMS</div>
        <div class="it-title" id="m-hod-reports-title">Dept Reports</div>
      </div>
      <div class="it-right">
        <div class="it-avatar mtb-avatar" onclick="goTo('profile')">--</div>
      </div>
    </div>
    <div class="scroll-content" id="m-hod-reports-content">
      <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading reports...</div></div>
    </div>
    <div class="bottom-nav" id="m-bottom-nav-hod-reports"></div>
  </div><!-- /#m-hod-reports -->


  <!-- ─── MOBILE OBSERVER DASHBOARD ─── -->
  <div id="m-observe-dashboard" class="m-page">
    <div class="inner-topbar dark">
      <div class="it-left"><div class="it-brand" aria-label="Miss Fish Bali"><img src="/missfish-logo.webp" alt="Miss Fish Bali"></div></div>
      <div class="it-center-block">
        <div class="it-eyebrow">View Only</div>
        <div class="it-title white">Dashboard</div>
      </div>
      <div class="it-right">
        <div class="it-avatar mtb-avatar" onclick="goTo('profile')">--</div>
      </div>
    </div>
    <div class="scroll-content" id="m-observe-dashboard-content">
      <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>
    </div>
    <div class="bottom-nav" id="m-bottom-nav-observe-dashboard"></div>
  </div><!-- /#m-observe-dashboard -->


  <!-- ─── MOBILE OBSERVER REPORTS ─── -->
  <div id="m-observe-reports" class="m-page">
    <div class="inner-topbar dark">
      <div class="it-left"><div class="it-brand" aria-label="Miss Fish Bali"><img src="/missfish-logo.webp" alt="Miss Fish Bali"></div></div>
      <div class="it-center-block">
        <div class="it-eyebrow">View Only</div>
        <div class="it-title white">Reports</div>
      </div>
      <div class="it-right">
        <div class="it-avatar mtb-avatar" onclick="goTo('profile')">--</div>
      </div>
    </div>
    <div class="scroll-content" id="m-observe-reports-content">
      <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>
    </div>
    <div class="bottom-nav" id="m-bottom-nav-observe-reports"></div>
  </div><!-- /#m-observe-reports -->


  <!-- ─── MOBILE AI REPORT ─── -->
  <div id="m-aireport" class="m-page">
    <div class="inner-topbar dark">
      <div class="it-left"><div class="it-brand" aria-label="Miss Fish Bali"><img src="/missfish-logo.webp" alt="Miss Fish Bali"></div></div>
      <div class="it-center-block">
        <div class="it-eyebrow">Gemini 3.5 Flash Lite</div>
        <div class="it-title white">AI Report</div>
      </div>
      <div class="it-right">
        <div class="it-avatar mtb-avatar" onclick="goTo('profile')">--</div>
      </div>
    </div>
    <div class="scroll-content" id="m-aireport-content">
      <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading AI Report...</div></div>
    </div>
    <div class="bottom-nav" id="m-bottom-nav-aireport"></div>
  </div><!-- /#m-aireport -->


  <!-- ─── MOBILE ATTENDANCE ─── -->
  <div id="m-attendance" class="m-page">
    <div class="inner-topbar dark">
      <div class="it-left"><div class="it-brand" aria-label="Miss Fish Bali"><img src="/missfish-logo.webp" alt="Miss Fish Bali"></div></div>
      <div class="it-center-block">
        <div class="it-eyebrow">Management</div>
        <div class="it-title white">Attendance</div>
      </div>
      <div class="it-right">
        <div class="it-avatar mtb-avatar" onclick="goTo('profile')">--</div>
      </div>
    </div>
    <div class="scroll-content" id="m-attendance-content">
      <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>
    </div>
    <div class="bottom-nav" id="m-bottom-nav-attendance"></div>
  </div><!-- /#m-attendance -->


  <!-- ─── MOBILE COURSE DETAIL ─── -->
  <div id="m-course-detail" class="m-page">
    <div class="inner-topbar dark">
      <div class="it-left"><div class="it-brand" aria-label="Miss Fish Bali"><img src="/missfish-logo.webp" alt="Miss Fish Bali"></div></div>
      <div class="it-center-block">
        <div class="it-eyebrow" id="m-course-detail-eyebrow">Course</div>
        <div class="it-title white" id="m-course-detail-title">Course Detail</div>
      </div>
      <div class="it-right">
        <div style="cursor:pointer;color:rgba(255,255,255,0.6);font-size:12px;display:flex;align-items:center;gap:4px" onclick="goTo('courses')">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>Back
        </div>
      </div>
    </div>
    <div class="scroll-content" id="m-course-detail-content">
      <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>
    </div>
    <div class="bottom-nav" id="m-bottom-nav-course-detail"></div>
  </div><!-- /#m-course-detail -->


  <!-- ─── MOBILE VIDEO ─── -->
  <div id="m-video" class="m-page">
    <div class="inner-topbar dark">
      <div class="it-left"><div class="it-brand" aria-label="Miss Fish Bali"><img src="/missfish-logo.webp" alt="Miss Fish Bali"></div></div>
      <div class="it-center-block">
        <div class="it-eyebrow" id="m-video-eyebrow">Video Module</div>
        <div class="it-title white" id="m-video-title">—</div>
      </div>
      <div class="it-right">
        <div style="cursor:pointer;color:rgba(255,255,255,0.6);font-size:12px;display:flex;align-items:center;gap:4px" onclick="backToCourseDetail()">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>Back
        </div>
      </div>
    </div>
    <div class="scroll-content" id="m-video-content" style="padding:0">
      <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading video...</div></div>
    </div>
    <div class="bottom-nav" id="m-bottom-nav-video"></div>
  </div><!-- /#m-video -->


  <!-- ─── MOBILE PDF ─── -->
  <div id="m-pdf" class="m-page">
    <div class="inner-topbar dark">
      <div class="it-left"><div class="it-brand" aria-label="Miss Fish Bali"><img src="/missfish-logo.webp" alt="Miss Fish Bali"></div></div>
      <div class="it-center-block">
        <div class="it-eyebrow" id="m-pdf-eyebrow">PDF Module</div>
        <div class="it-title white" id="m-pdf-title">—</div>
      </div>
      <div class="it-right">
        <div style="cursor:pointer;color:rgba(255,255,255,0.6);font-size:12px;display:flex;align-items:center;gap:4px" onclick="backToCourseDetail()">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>Back
        </div>
      </div>
    </div>
    <div class="scroll-content" id="m-pdf-content" style="padding:0">
      <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading PDF...</div></div>
    </div>
    <div class="bottom-nav" id="m-bottom-nav-pdf"></div>
  </div><!-- /#m-pdf -->


  <!-- ─── MOBILE CERTIFICATE VIEW — v2.112 ─── -->
  <div id="m-cert-view" class="m-page">
    <div class="inner-topbar dark">
      <div class="it-left"><div class="it-brand" aria-label="Miss Fish Bali"><img src="/missfish-logo.webp" alt="Miss Fish Bali"></div></div>
      <div class="it-center-block">
        <div class="it-eyebrow">Certificates</div>
        <div class="it-title white">Certificate</div>
      </div>
      <div class="it-right">
        <div style="cursor:pointer;color:rgba(255,255,255,0.6);font-size:12px;display:flex;align-items:center;gap:4px" onclick="goTo('certs')">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>Back
        </div>
      </div>
    </div>
    <div class="scroll-content" id="m-cert-view-content" style="padding:16px;background:#f0ede8">
      <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading certificate...</div></div>
    </div>
    <div style="padding:12px 16px 20px;background:#f0ede8">
      <button class="btn-start-course" style="width:100%;height:46px" onclick="downloadCertPDF()">⬇ Download PDF</button>
    </div>
    <div class="bottom-nav" id="m-bottom-nav-cert-view"></div>
  </div><!-- /#m-cert-view -->


  <!-- ─── MOBILE RELEASE LOG — v2.114 ─── -->
  <div id="m-release-log" class="m-page">
    <div class="inner-topbar dark">
      <div class="it-left"><div class="it-brand" aria-label="Miss Fish Bali"><img src="/missfish-logo.webp" alt="Miss Fish Bali"></div></div>
      <div class="it-center-block">
        <div class="it-eyebrow">Settings</div>
        <div class="it-title white">Release Log</div>
      </div>
      <div class="it-right">
        <div style="cursor:pointer;color:rgba(255,255,255,0.6);font-size:12px;display:flex;align-items:center;gap:4px" onclick="goTo('settings')">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>Back
        </div>
      </div>
    </div>
    <div class="scroll-content" id="m-release-log-content" style="padding:16px">
      <div style="font-size:11.5px;color:var(--gray-500);margin-bottom:10px" id="m-release-current">Running: —</div>
      <div class="settings-item-m"><div class="ss-body" id="m-release-body">
        <div style="padding:20px;text-align:center;color:var(--gray-400);font-size:13px">Loading release history…</div>
      </div></div>
    </div>
    <div class="bottom-nav" id="m-bottom-nav-release-log"></div>
  </div><!-- /#m-release-log -->


  <!-- ─── MOBILE QUIZ ─── -->
  <div id="m-quiz" class="m-page">
    <div class="inner-topbar dark">
      <div class="it-left"><div class="it-brand" aria-label="Miss Fish Bali"><img src="/missfish-logo.webp" alt="Miss Fish Bali"></div></div>
      <div class="it-center-block">
        <div class="it-eyebrow" id="m-quiz-eyebrow">Quiz</div>
        <div class="it-title white" id="m-quiz-title">—</div>
      </div>
      <div class="it-right">
        <div class="quiz-timer" id="m-quiz-timer" style="font-size:13px;padding:4px 10px;border-radius:12px;background:rgba(201,160,101,0.2);color:var(--gold);font-weight:700;font-family:monospace">--:--</div>
      </div>
    </div>
    <div class="scroll-content" id="m-quiz-content">
      <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading quiz...</div></div>
    </div>
    <div class="bottom-nav" id="m-bottom-nav-quiz"></div>
  </div><!-- /#m-quiz -->


  <!-- ─── MOBILE ADMIN PAGES ─── -->
  <div id="m-users" class="m-page">
    <div class="inner-topbar dark">
      <div class="it-left"><div class="it-brand" aria-label="Miss Fish Bali"><img src="/missfish-logo.webp" alt="Miss Fish Bali"></div></div>
      <div class="it-center-block">
        <div class="it-eyebrow">Management</div>
        <div class="it-title white">Manage Users</div>
      </div>
      <div class="it-right">
        <button id="m-users-add-btn" style="height:34px;padding:0 12px;border-radius:10px;background:var(--solid-dark);color:#fff;border:none;font-family:Inter,sans-serif;font-size:12px;font-weight:700;cursor:pointer" onclick="openUserModal()">+ Add</button>
        <div class="it-avatar mtb-avatar" onclick="goTo('profile')">--</div>
      </div>
    </div>
    <div class="scroll-content" id="m-users-content">
      <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>
    </div>
    <div class="bottom-nav" id="m-bottom-nav-users"></div>
  </div><!-- /#m-users -->

  <div id="m-courses-mgmt" class="m-page">
    <div class="inner-topbar dark">
      <div class="it-left"><div class="it-brand" aria-label="Miss Fish Bali"><img src="/missfish-logo.webp" alt="Miss Fish Bali"></div></div>
      <div class="it-center-block">
        <div class="it-eyebrow">Management</div>
        <div class="it-title white">Manage Courses</div>
      </div>
      <div class="it-right">
        <div class="it-avatar mtb-avatar" onclick="goTo('profile')">--</div>
      </div>
    </div>
    <div class="scroll-content" id="m-courses-mgmt-content">
      <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>
    </div>
    <div class="bottom-nav" id="m-bottom-nav-courses-mgmt"></div>
  </div><!-- /#m-courses-mgmt -->

  <!-- ─── MOBILE REPORTS ─── -->
  <div id="m-reports" class="m-page">
    <div class="inner-topbar dark">
      <div class="it-left"><div class="it-brand" aria-label="Miss Fish Bali"><img src="/missfish-logo.webp" alt="Miss Fish Bali"></div></div>
      <div class="it-center-block"><div class="it-eyebrow">Miss Fish LMS</div><div class="it-title white">Reports</div></div>
      <div class="it-right"><div class="it-avatar mtb-avatar" onclick="goTo('profile')">--</div></div>
    </div>
    <div class="scroll-content" id="m-reports-content">
      <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>
    </div>
    <div class="bottom-nav" id="m-bottom-nav-reports"></div>
  </div><!-- /#m-reports -->

  <!-- ─── MOBILE ACTIVITY LOG ─── -->
  <div id="m-actlog" class="m-page">
    <div class="inner-topbar dark">
      <div class="it-left"><div class="it-brand" aria-label="Miss Fish Bali"><img src="/missfish-logo.webp" alt="Miss Fish Bali"></div></div>
      <div class="it-center-block"><div class="it-eyebrow">Miss Fish LMS</div><div class="it-title white">Activity Log</div></div>
      <div class="it-right"><div class="it-avatar mtb-avatar" onclick="goTo('profile')">--</div></div>
    </div>
    <div class="scroll-content" id="m-actlog-content">
      <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>
    </div>
    <div class="bottom-nav" id="m-bottom-nav-actlog"></div>
  </div><!-- /#m-actlog -->

  <!-- ─── MOBILE SETTINGS ─── -->
  <div id="m-settings" class="m-page">
    <div class="inner-topbar dark">
      <div class="it-left"><div class="it-brand" aria-label="Miss Fish Bali"><img src="/missfish-logo.webp" alt="Miss Fish Bali"></div></div>
      <div class="it-center-block"><div class="it-eyebrow">Miss Fish LMS</div><div class="it-title white">Settings</div></div>
      <div class="it-right"><div class="it-avatar mtb-avatar" onclick="goTo('profile')">--</div></div>
    </div>
    <div class="scroll-content" id="m-settings-content">
      <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>
    </div>
    <div class="bottom-nav" id="m-bottom-nav-settings"></div>
  </div><!-- /#m-settings -->

  <!-- ─── MOBILE MY PROFILE ─── -->
  <div id="m-profile" class="m-page">
    <div class="inner-topbar dark">
      <div class="it-left"><div class="it-brand" aria-label="Miss Fish Bali"><img src="/missfish-logo.webp" alt="Miss Fish Bali"></div></div>
      <div class="it-center-block"><div class="it-eyebrow">Account</div><div class="it-title white">My Profile</div></div>
      <div class="it-right"><div class="it-avatar mtb-avatar" onclick="goTo('profile')">--</div></div>
    </div>
    <div class="scroll-content" id="m-profile-content">
      <div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>
    </div>
    <div class="bottom-nav" id="m-bottom-nav-profile"></div>
  </div><!-- /#m-profile -->

</div><!-- /#mob -->


<!-- ================================================================
     MFB-IT — Miss Fish Bali LMS
     File        : index.html   (Deploy/worker/public/)

     Header di paling atas berkas ini masih menyebut
     MissFishLMS_v2.144.html, dan itu DISENGAJA: berkas ini salinan
     baseline apa adanya. Menyunting header aslinya akan merusak
     jaminan "identik byte-per-byte" — justru jaminan itulah yang
     membuat tampilannya tidak mungkin meleset dari LMS lama.

     SATU-SATUNYA perbedaan berkas ini dari MissFishLMS_v2.144.html.
     Memasang google.script.run tiruan yang memanggil Cloudflare
     Worker, sehingga seluruh CSS, HTML, dan JavaScript di bawah ini
     berjalan APA ADANYA — tidak ada satu baris pun yang diubah.

     WAJIB dimuat SEBELUM blok skrip utama di bawah: baris pertama
     skrip itu sudah mengandalkan google.script.run.

     (Nama tag skrip sengaja TIDAK ditulis utuh di dalam komentar
     ini. Perkakas yang memindai blok skrip akan mengiranya kode
     sungguhan lalu melaporkan syntax error palsu.)
     ================================================================ -->
<script src="gas-shim.js"></script>
<script>
/* ══════════════════════════════════════════════════════════════
   Miss Fish LMS — v1.0 | Batch 1: Foundation + Login + Session
   Author: IT Dept — Agus Wibawa (MF0001)
   July 2026
══════════════════════════════════════════════════════════════ */

'use strict';

/* ─────────────────────────────────────────────────────────────
   GLOBAL STATE
   _lmsUser: object user yang sedang login (dari GAS)
   {
     user_id, full_name, role, navType, dept,
     force_pw_change, initials
   }
───────────────────────────────────────────────────────────── */
var _lmsUser = null;

/* ─────────────────────────────────────────────────────────────
   CONSTANTS — nav items per navType
   Setiap item: { page, label, icon_svg, section }
───────────────────────────────────────────────────────────── */
var NAV_CONFIG = {
  admin: [
    { section: 'Main' },
    { page:'dashboard',   label:'Dashboard',      icon:'<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>' },
    { page:'courses',     label:'My Courses',     icon:'<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>' },
    { page:'progress',     label:'My Progress',    icon:'<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>' },
    { page:'certs',        label:'Certificates',   icon:'<circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/>' },
    { section: 'Management' },
    { page:'users',       label:'Manage Users',   icon:'<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>' },
    { page:'courses-mgmt',label:'Manage Courses', icon:'<path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>' },
    { page:'attendance',  label:'Attendance',     icon:'<rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>' },
    { page:'reports',     label:'Reports',        icon:'<line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>' },
    { page:'actlog',      label:'Activity Log',   icon:'<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>' },
    { section: 'Intelligence' },
    { page:'aireport',    label:'AI Report',      icon:'', emoji:'🤖' },
    { section: 'Account' },
    { page:'settings',    label:'Settings',       icon:'<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>' },
    { page:'profile',     label:'My Profile',     icon:'<circle cx="12" cy="8" r="4"/><path d="M20 21a8 8 0 1 0-16 0"/>' },
    { page:null,          label:'Sign Out',       icon:'<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>', action:'signOut' }
  ],
  employee: [
    { section: 'Main' },
    { page:'dashboard', label:'Dashboard',    icon:'<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>' },
    { page:'courses',   label:'My Courses',   icon:'<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>' },
    { page:'progress',  label:'My Progress',  icon:'<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>' },
    { page:'certs',     label:'Certificates', icon:'<circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/>' },
    { section: 'Account' },
    { page:'profile',   label:'My Profile',   icon:'<circle cx="12" cy="8" r="4"/><path d="M20 21a8 8 0 1 0-16 0"/>' },
    { page:null,        label:'Sign Out',      icon:'<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>', action:'signOut' }
  ],
  hod: [
    { section: 'Main' },
    { page:'hod-dashboard', label:'Dashboard',    icon:'<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>' },
    { page:'hod-staff',     label:'My Team',      icon:'<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>' },
    { page:'hod-assign',    label:'Assign Course', icon:'<path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>' },
    { page:'hod-reports',   label:'Dept Reports', icon:'<line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>' },
    { section: 'Account' },
    { page:'profile', label:'My Profile', icon:'<circle cx="12" cy="8" r="4"/><path d="M20 21a8 8 0 1 0-16 0"/>' },
    { page:null,      label:'Sign Out',   icon:'<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>', action:'signOut' }
  ],
  observer: [
    { section: 'Main' },
    { page:'observe-dashboard', label:'Dashboard', icon:'<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>' },
    { page:'observe-reports',   label:'Reports',   icon:'<line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>' },
    { page:'aireport',          label:'AI Report', icon:'', emoji:'🤖' },
    { section: 'Account' },
    { page:'profile', label:'My Profile', icon:'<circle cx="12" cy="8" r="4"/><path d="M20 21a8 8 0 1 0-16 0"/>' },
    { page:null,      label:'Sign Out',   icon:'<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>', action:'signOut' }
  ]
};

/* ─────────────────────────────────────────────────────────────
   MOBILE BOTTOM NAV CONFIG per navType
───────────────────────────────────────────────────────────── */
var BNAV_CONFIG = {
  admin:    [
    { page:'dashboard',  label:'Home',     icon:'🏠' },
    { page:'courses',    label:'Courses',  icon:'📚' },
    { page:'reports',    label:'Reports',  icon:'📊' },
    { page:'users',      label:'Users',    icon:'👥' },
    { page:'profile',    label:'Profile',  icon:'👤' }
  ],
  employee: [
    { page:'dashboard', label:'Home',     icon:'🏠' },
    { page:'courses',   label:'Courses',  icon:'📚' },
    { page:'progress',  label:'Progress', icon:'📊' },
    { page:'certs',     label:'Certs',    icon:'🏆' },
    { page:'profile',   label:'Profile',  icon:'👤' }
  ],
  hod: [
    { page:'hod-dashboard', label:'Home',    icon:'🏠' },
    { page:'hod-staff',     label:'Team',    icon:'👥' },
    { page:'hod-assign',    label:'Assign',  icon:'📋' },
    { page:'hod-reports',   label:'Reports', icon:'📊' },
    { page:'profile',       label:'Profile', icon:'👤' }
  ],
  observer: [
    { page:'observe-dashboard', label:'Home',    icon:'🏠' },
    { page:'observe-reports',   label:'Reports', icon:'📊' },
    { page:'aireport',          label:'AI',      icon:'🤖' },
    { page:'profile',           label:'Profile', icon:'👤' }
  ]
};

/* ─────────────────────────────────────────────────────────────
   HELPERS — initials dari full_name
───────────────────────────────────────────────────────────── */
function getInitials(name) {
  if (!name) return '?';
  var parts = name.trim().split(' ').filter(function(p){ return p.length > 0; });
  if (parts.length === 1) return parts[0].charAt(0).toUpperCase();
  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
}

/* ─────────────────────────────────────────────────────────────
   LOADING OVERLAY
───────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   v1.7 — PENCATAT WAKTU LOADING HALAMAN (client-side)

   Beda dengan perfMark_/perfLogIfSlow_ di Code.gs (itu mengukur
   waktu EKSEKUSI FUNGSI di server) — ini mengukur waktu yang
   BENAR-BENAR dirasakan staff: sejak klik Sign In sampai dashboard
   pertama tampil di layar (network + render, bukan cuma server).

   Dikirim SEKALI per-load, fire-and-forget (withFailureHandler
   kosong sengaja) — supaya pengiriman datanya sendiri TIDAK PERNAH
   memperlambat tampilan yang justru sedang diukur, dan tidak pernah
   membuat staff melihat error kalau pencatatannya gagal.

   Data masuk ke sheet PageLoadLog (server, lihat logPageLoad di
   Code.gs) — bukan tampil di Dashboard. Ini murni data diagnostik
   IT untuk tahu PERSIS bagian mana yang lambat, sebelum optimasi
   dilakukan berdasar tebakan.
═══════════════════════════════════════════════════════════ */
var _pageLoadStartMs = null;

function _pageLoadTimerStart() {
  _pageLoadStartMs = Date.now();
}

/* v2.115 Item 11 — dua kolom baru di PageLoadLog (server_ms, asset_ms)
   sudah ditambahkan manual oleh Wibawa di sheet, tujuannya memisahkan
   TIGA kemungkinan penyebab lambat sebelum Fase 2 optimasi dikerjakan
   berdasar tebakan: server lambat, jaringan lambat, atau HP lambat. */

/* server_ms — lama round-trip login() SAJA, diukur terpisah dari
   elapsed (loadMs) yang sudah ada. elapsed mengukur start sampai
   goTo()+_pageLoadTimerStop() (yaitu sampai render dashboard MULAI,
   bukan sampai data dashboard selesai tampil) — server_ms murni waktu
   Apps Script memproses login(), tanpa render apa pun. */
var _pageLoadServerStartMs = null;
var _pageLoadServerMsResult = 0;   // v2.115 — disimpan di sini karena stop() dipanggil
                                     // di titik berbeda (onLoginSuccess, SEBELUM render
                                     // dashboard mulai) dari _pageLoadTimerStop (SETELAH
                                     // render) — supaya server_ms murni waktu login(),
                                     // tidak ikut mencakup waktu render.

function _pageLoadServerTimerStart() {
  _pageLoadServerStartMs = Date.now();
}

function _pageLoadServerTimerStop() {
  if (_pageLoadServerStartMs === null) return;
  _pageLoadServerMsResult = Date.now() - _pageLoadServerStartMs;
  _pageLoadServerStartMs = null;
}

/* asset_ms — lama browser mengambil dokumen + aset (HTML awal, CDN
   Plyr/html2pdf/font), dari Performance API. Kalau browser tidak
   mendukung (sangat jarang), kembalikan 0 — bukan error. */
function _pageLoadAssetMs_() {
  try {
    if (window.performance && performance.getEntriesByType) {
      var nav = performance.getEntriesByType('navigation')[0];
      if (nav && nav.loadEventEnd > 0) {
        return Math.round(nav.loadEventEnd);
      }
    }
    if (window.performance && performance.timing) {
      var t = performance.timing;
      if (t.loadEventEnd > 0 && t.navigationStart > 0) {
        return t.loadEventEnd - t.navigationStart;
      }
    }
  } catch (e) {}
  return 0;
}

function _pageLoadTimerStop() {
  if (_pageLoadStartMs === null) return;
  var elapsed = Date.now() - _pageLoadStartMs;
  _pageLoadStartMs = null;   // sekali kirim per login — cegah kirim dobel kalau goTo dipanggil lagi
  try {
    var userId   = _lmsUser ? _lmsUser.user_id : '';
    var device   = (window.innerWidth <= 899) ? 'mobile' : 'desktop';
    var serverMs = _pageLoadServerMsResult;   // v2.115 — sudah diukur & disimpan onLoginSuccess
    var assetMs  = _pageLoadAssetMs_();       // v2.115
    _pageLoadServerMsResult = 0;              // reset — jangan terbawa ke login berikutnya
    google.script.run
      .withSuccessHandler(function() {})
      .withFailureHandler(function() {})   // sengaja diam — pencatat performa tidak boleh pernah mengganggu staff
      .logPageLoad(userId, device, elapsed, serverMs, assetMs);
  } catch (e) { /* abaikan — sama sekali tidak kritis */ }
}

function showLoading(msg, overlayMode) {
  var el = document.getElementById('lms-loading');
  var msgEl = document.getElementById('load-msg');
  if (el) {
    el.style.display = 'flex';
    el.classList.remove('hide');
    if (overlayMode) el.classList.add('overlay-mode');
    else el.classList.remove('overlay-mode');
  }
  if (msgEl) msgEl.textContent = msg || 'Loading...';
}
function hideLoading() {
  var el = document.getElementById('lms-loading');
  if (!el) return;
  el.classList.add('hide');
  setTimeout(function(){ el.style.display = 'none'; el.classList.remove('overlay-mode'); }, 450);
}

/* ─────────────────────────────────────────────────────────────
   TOAST
───────────────────────────────────────────────────────────── */
function showToast(msg, duration) {
  var el = document.getElementById('lms-toast');
  if (!el) return;
  el.textContent = msg;
  el.classList.add('show');
  setTimeout(function(){ el.classList.remove('show'); }, duration || 3000);
}

/* ─────────────────────────────────────────────────────────────
   showConfirmModal — v2.120 Phase A2
   Modal HTML pengganti confirm() browser native, dipakai ulang
   di 7 titik. confirm() TIDAK BISA di-style (overlay hitam solid
   bukan semi-transparan) dan blocking -- berpotensi ghost-click
   ke elemen di belakangnya saat ditutup (terkonfirmasi kejadian
   nyata: klik OK pada dialog quiz-warning ter-navigasi ke My
   Courses). Modal HTML tidak blocking secara teknis, sehingga
   ghost-click semacam itu tidak mungkin terjadi -- klik yang
   diterima hanya klik pada tombol modal itu sendiri.

   Parameter opts {object}:
     message       {string}  wajib -- isi pesan, \n untuk baris baru
     title         {string}  opsional, default 'Confirm'
     confirmLabel  {string}  opsional, default 'OK'
     cancelLabel   {string}  opsional, default 'Cancel'
     danger        {boolean} opsional -- true = tombol confirm merah
                              (dipakai untuk aksi destruktif: delete)
     onConfirm     {function} wajib -- dipanggil kalau user klik confirm
   Tidak ada onCancel -- menutup modal (klik Cancel atau ✕) selalu
   berarti "batal", tidak perlu callback terpisah (sama seperti
   pola if(!confirm(...)) return; yang digantikannya).
───────────────────────────────────────────────────────────── */
function showConfirmModal(opts) {
  var overlay = document.getElementById('d-confirmModal');
  var titleEl = document.getElementById('d-confirmModal-title');
  var msgEl   = document.getElementById('d-confirmModal-message');
  var okBtn   = document.getElementById('d-confirmModal-okBtn');
  if (!overlay || !titleEl || !msgEl || !okBtn) {
    // Fallback -- kalau markup modal entah kenapa tidak ada, jangan
    // sampai aksi admin macet total. confirm() native tetap lebih
    // baik daripada tombol yang diklik tidak melakukan apa-apa.
    if (confirm(opts.message)) { if (opts.onConfirm) opts.onConfirm(); }
    return;
  }

  titleEl.textContent = opts.title || 'Confirm';
  msgEl.textContent   = opts.message || '';
  okBtn.textContent   = opts.confirmLabel || 'OK';
  okBtn.style.background = opts.danger ? 'var(--red)' : 'var(--gold)';
  okBtn.style.color      = opts.danger ? '#fff' : 'var(--black)';

  var cancelBtn = document.getElementById('d-confirmModal-cancelBtn');
  if (cancelBtn) cancelBtn.textContent = opts.cancelLabel || 'Cancel';

  // Ganti onclick tiap kali dipanggil -- opts.onConfirm beda per
  // pemanggilan (course/lock/publish/dst), tidak bisa di-hardcode
  // sekali di HTML seperti modal lain yang aksinya tetap.
  okBtn.onclick = function() {
    _closeConfirmModal();
    if (opts.onConfirm) opts.onConfirm();
  };

  overlay.classList.add('show');
}

function _closeConfirmModal() {
  var overlay = document.getElementById('d-confirmModal');
  if (overlay) overlay.classList.remove('show');
}

/* ─────────────────────────────────────────────────────────────
   TOGGLE PASSWORD VISIBILITY
───────────────────────────────────────────────────────────── */
function togglePwd(inputId, iconId) {
  var el  = document.getElementById(inputId);
  var ico = document.getElementById(iconId);
  if (!el || !ico) return;
  if (el.type === 'password') {
    el.type = 'text';
    ico.innerHTML =
      '<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/>' +
      '<path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/>' +
      '<line x1="1" y1="1" x2="23" y2="23"/>';
  } else {
    el.type = 'password';
    ico.innerHTML =
      '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>' +
      '<circle cx="12" cy="12" r="3"/>';
  }
}

/* ─────────────────────────────────────────────────────────────
   CLOCK + DATE + GREETING
───────────────────────────────────────────────────────────── */
var DAYS   = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
var MONTHS = ['January','February','March','April','May','June',
              'July','August','September','October','November','December'];

function updateClock() {
  var now = new Date();
  var h   = now.getHours();
  var hh  = String(h).padStart(2, '0');
  var mm  = String(now.getMinutes()).padStart(2, '0');
  var timeStr   = hh + ':' + mm;
  var dateStr   = DAYS[now.getDay()] + ', ' + now.getDate() + ' ' + MONTHS[now.getMonth()] + ' ' + now.getFullYear();
  var greeting  = h < 12 ? 'Good Morning' : h < 17 ? 'Good Afternoon' : 'Good Evening';
  var setTxt = function(id, val) {
    var el = document.getElementById(id);
    if (el) el.textContent = val;
  };
  // v2.120 Phase A2 — d-date/d-clock/m-clock/m-date sebelumnya id
  // (bukan unik: 4 fungsi render dashboard berbeda tergantung role
  // -- staff/HoD/Observer/dst -- masing-masing membangun welcome-bar
  // dengan id yang sama). getElementById() hanya menemukan render
  // PERTAMA di urutan DOM, bukan render yang sedang aktif ditampilkan
  // -- berisiko jam/tanggal di dashboard yang sedang dilihat user
  // tidak pernah ter-update kalau render lain kebetulan lebih dulu
  // di DOM. Sekarang jadi class + querySelectorAll (pola sama
  // seperti sinkronisasi dark mode .dm-toggle yang sudah terbukti
  // aman terhadap banyak elemen sekaligus).
  var setTxtAll = function(cls, val) {
    document.querySelectorAll('.' + cls).forEach(function(el) { el.textContent = val; });
  };
  setTxtAll('d-clock',   timeStr);
  setTxtAll('d-date',    dateStr);
  setTxt('d-greeting', greeting);
  setTxtAll('m-clock',   timeStr);
  setTxtAll('m-date',    dateStr);
  setTxt('m-greeting', greeting);
}
updateClock();
setInterval(updateClock, 10000);

/* ─────────────────────────────────────────────────────────────
   BUILD SIDEBAR NAV (desktop)
   Dipanggil setelah login sukses dengan navType dari GAS
───────────────────────────────────────────────────────────── */
function buildSidebarNav(navType) {
  var items   = NAV_CONFIG[navType] || NAV_CONFIG['employee'];
  var navEl   = document.getElementById('d-sidebar-nav');
  if (!navEl) return;
  navEl.innerHTML = '';
  items.forEach(function(item) {
    if (item.section) {
      var label = document.createElement('div');
      label.className = 'nav-section-label';
      label.textContent = item.section;
      navEl.appendChild(label);
      return;
    }
    var div = document.createElement('div');
    div.className = 'nav-item';
    div.setAttribute('data-page', item.page || '');
    var iconHtml = '';
    if (item.emoji) {
      iconHtml = '<span style="font-size:15px;flex-shrink:0">' + item.emoji + '</span>';
    } else if (item.icon) {
      iconHtml = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">' + item.icon + '</svg>';
    }
    div.innerHTML = iconHtml + '<span>' + item.label + '</span>';
    if (item.action === 'signOut') {
      div.addEventListener('click', signOut);
    } else if (item.page) {
      div.addEventListener('click', function(){ goTo(item.page); });
    }
    navEl.appendChild(div);
  });
}

/* ─────────────────────────────────────────────────────────────
   BUILD BOTTOM NAV (mobile)
───────────────────────────────────────────────────────────── */
function buildBottomNav(navType) {
  var items = BNAV_CONFIG[navType] || BNAV_CONFIG['employee'];
  var navEl = document.getElementById('m-bottom-nav');
  if (!navEl) return;
  navEl.innerHTML = '';
  items.forEach(function(item) {
    var div = document.createElement('div');
    div.className = 'bnav-item';
    div.setAttribute('data-page', item.page);
    div.innerHTML =
      '<div class="bnav-icon">' + item.icon + '</div>' +
      '<div class="bnav-label">' + item.label + '</div>';
    div.addEventListener('click', function(){ goTo(item.page); });
    navEl.appendChild(div);
  });
}

/* ─────────────────────────────────────────────────────────────
   UPDATE UI SETELAH LOGIN
   Set nama, role, avatar, sidebar, bottom nav
───────────────────────────────────────────────────────────── */
function applyUserToUI(user) {
  // Apply dark mode preference
  applyDarkModePreference();
  var initials = getInitials(user.full_name);
  var roleLabel = {
    IT_ADMIN  : 'IT Super Admin',
    HRM       : 'HRM',
    HR_TALENT : 'HR Talent',
    TM        : 'Training Manager',
    GM        : 'General Manager',
    OWNER     : 'Owner / Director',
    HOD       : 'Head of Department',
    STAFF     : 'Staff',
    TRAINEE   : 'Trainee'
  }[user.role] || user.role;

  // Desktop sidebar user info
  var setTxt = function(id, val) {
    var el = document.getElementById(id);
    if (el) el.textContent = val;
  };
  setTxt('sb-avatar-d',    initials);
  setTxt('sb-name-d',      user.full_name);
  setTxt('sb-role-d',      user.dept ? user.dept + ' · ' + roleLabel : roleLabel);
  setTxt('topbar-avatar-d', initials);
  // v2.119 — avatar di 18 topbar mobile (class, bukan id tunggal —
  // avatar sekarang muncul di banyak halaman sekaligus)
  document.querySelectorAll('.mtb-avatar').forEach(function(el) {
    el.textContent = initials;
  });

  // Build nav based on navType
  buildSidebarNav(user.navType);
  buildBottomNav(user.navType);

  // Apply ke semua shell pages (courses, progress, certs, dll)
  applyUserToShellPages(user);

  // Apply ke HoD pages jika role HOD
  if (user.navType === 'hod')      applyUserToHoDPages(user);
  // Apply ke Observer pages jika role observer
  if (user.navType === 'observer') applyUserToObserverPages(user);
  // Admin juga bisa akses aireport — apply sidebar aireport
  if (user.navType === 'admin')    { applyUserToObserverPages(user); applyUserToAdminPages(user); }
  // Batch 6 pages — semua role
  applyUserToBatch6Pages(user);
  // Learning pages — semua role
  applyUserToLearningPages(user);
}

/* ─────────────────────────────────────────────────────────────
   goTo(page)
   Navigate antar halaman — show/hide d-page dan m-page
   Update active state sidebar + bottom nav
───────────────────────────────────────────────────────────── */
/* ─── Navigation history stack for browser back button ─── */
var _navStack = [];

/* v2.95 — stack paralel: modul yang sedang aktif saat tiap halaman dibuka.
   Selalu di-push/pop bersamaan dengan _navStack supaya index-nya sejajar.
   Tujuan: saat Back, modul ikut dipulihkan — bukan cuma nama halaman.
   Aturan yang dijaga: modul tersorot di panel kanan = isi panel kiri. */
var _navModStack = [];

function _stopVideoCleanup() {
  ['d-vid-player', 'm-vid-player'].forEach(function(id) {
    var el = document.getElementById(id);
    if (el && el.tagName === 'IFRAME') { try { el.src = ''; } catch(e) {} }
  });
  if (_videoWatchInterval) { clearInterval(_videoWatchInterval); _videoWatchInterval = null; }
  try { document.removeEventListener('visibilitychange', _onVideoTabSwitch); } catch(e) {}
  // v2.93 — matikan instance Plyr saat keluar dari halaman video
  if (typeof _plyrDestroy === 'function') { _plyrDestroy(); }
  // v2.96 — buang flipbook: hentikan render, lepas memori gambar, keluar focus mode
  if (typeof _pdfDestroy === 'function') { _pdfLoadToken++; _pdfDestroy(); }
}

function goTo(page) {
  // Stop video if navigating away from video/pdf pages
  var currentPage = _navStack.length > 0 ? _navStack[_navStack.length - 1] : '';
  if (currentPage === 'video' || currentPage === 'pdf') { _stopVideoCleanup(); }
  // Push browser history state
  history.pushState({ lmsPage: page }, '', '');
  _navStack.push(page);
  _navModStack.push(window._currentModule || null);   // v2.95 — rekam modul aktif
  // Simpan halaman terakhir ke localStorage untuk restore setelah refresh
  var _safePages = ['dashboard','courses','progress','certs','users','courses-mgmt',
    'reports','actlog','settings','profile','attendance','hod-dashboard','hod-staff',
    'hod-assign','hod-reports','observe-dashboard','observe-reports','aireport'];
  if (_safePages.indexOf(page) !== -1) {
    localStorage.setItem('lms_last_page', page);
  }
  _navigateTo(page);
}

function _navigateTo(page) {
  // Desktop
  document.querySelectorAll('#desk .d-page').forEach(function(p) {
    p.classList.remove('active');
  });
  var dp = document.getElementById('d-' + page);
  if (dp) dp.classList.add('active');

  // Mobile
  document.querySelectorAll('#mob .m-page').forEach(function(p) {
    p.classList.remove('active');
  });
  var mp = document.getElementById('m-' + page);
  if (mp) mp.classList.add('active');

  // Desktop sidebar active
  /* v2.133 — aria-current ditambahkan berdampingan dengan kelas
     .active. Kelas itu hanya mengubah warna: yang bisa membacanya cuma
     mata. Screen reader tidak punya cara tahu halaman mana yang sedang
     terbuka tanpa atribut ini. Di-toggle lewat JS di tempat yang sama
     dengan .active supaya tidak mungkin ketinggalan sinkron -- ini bug
     senyap yang tidak terdeteksi Lighthouse (SOP kategori 8). */
  document.querySelectorAll('#desk .nav-item').forEach(function(el) {
    el.classList.remove('active');
    el.removeAttribute('aria-current');
  });
  var dNav = document.querySelector('#desk .nav-item[data-page="' + page + '"]');
  if (dNav) { dNav.classList.add('active'); dNav.setAttribute('aria-current', 'page'); }

  // Mobile bottom nav active
  document.querySelectorAll('#mob .bnav-item').forEach(function(el) {
    el.classList.remove('active');
    el.removeAttribute('aria-current');
  });
  var mNav = document.querySelector('#mob .bnav-item[data-page="' + page + '"]');
  if (mNav) { mNav.classList.add('active'); mNav.setAttribute('aria-current', 'page'); }

  window.scrollTo(0, 0);

  // Load data saat masuk halaman
  if (page === 'dashboard') {
    if (_lmsUser && _lmsUser.navType === 'admin') { loadAdminDashboard(); }
    else { loadEmployeeDashboard(); }
  }
  else if (page === 'courses')           {
    /* v2.140 — data yang baru diambil <60 detik lalu digambar ulang
       dari memori. renderCourseGrid tetap dipanggil supaya filter dan
       kotak pencarian ikut tergambar seperti biasa. */
    if (_cacheMasihSegar('courses') && _coursesCache.length) {
      renderCourseGrid(_dCourseFilter, '');
      renderCoursesListM(_mCourseFilter);
    } else { loadMyCourses(); }
  }
  else if (page === 'progress')          { loadMyProgress(); }
  else if (page === 'certs')             {
    if (_cacheMasihSegar('certs') && _certsCache.length) {
      renderCertsGrid();
      renderCertsListM();
    } else { loadMyCerts(); }
  }
  // HoD pages
  else if (page === 'hod-dashboard')     { loadHoDDashboard(); }
  else if (page === 'hod-staff')         { loadHoDTeam(); }
  else if (page === 'hod-assign')        { loadHoDAssign(); }
  else if (page === 'hod-reports')       { loadHoDReports(); }
  // Observer pages
  else if (page === 'observe-dashboard') { loadObserverDashboard(); }
  else if (page === 'observe-reports')   { loadObserverReports(); }
  else if (page === 'aireport')          { loadAIReport(); }
  // Admin pages
  else if (page === 'users')             { loadUsers(); }
  else if (page === 'courses-mgmt')      { loadCoursesMgmt(); }
  // Batch 6 — semua role bisa akses profile; reports/actlog/settings role-dependent
  else if (page === 'reports')           { loadReports(); }
  else if (page === 'actlog')            { loadActLog(); }
  else if (page === 'settings')          { loadSettings(); }
  else if (page === 'release-log')       { _loadReleaseLog_(); }
  else if (page === 'profile')           { loadProfile(); }
  // Attendance
  else if (page === 'attendance')        { loadAttendance(); }
  // Learning pages
  else if (page === 'course-detail')     { loadCourseDetail(window._currentCourse ? window._currentCourse.course_id : null); }
  else if (page === 'video')             { loadVideo(); }
  else if (page === 'pdf')               { loadPdf(); }
  else if (page === 'quiz')              { loadQuiz(); }
}

/* ─── Konfirmasi refresh browser ─── */
window.addEventListener('beforeunload', function(e) {
  // Hanya tampilkan konfirmasi jika user sudah login
  if (_lmsUser) {
    e.preventDefault();
    e.returnValue = ''; // Required by modern browsers
  }
});

/* ─── Browser back button handler ─── */
window.addEventListener('popstate', function(e) {
  // Stop video/pdf if playing
  _stopVideoCleanup();
  // Remove current page from stack — v2.95: modul ikut di-pop biar sejajar
  if (_navStack.length > 0)    _navStack.pop();
  if (_navModStack.length > 0) _navModStack.pop();
  // Navigate to previous page
  var prevPage = _navStack.length    > 0 ? _navStack[_navStack.length - 1]       : 'dashboard';
  var prevMod  = _navModStack.length > 0 ? _navModStack[_navModStack.length - 1] : null;
  // Push state again so back button always has somewhere to go
  history.pushState({ lmsPage: prevPage }, '', '');
  _navStack.push(prevPage);
  _navModStack.push(prevMod);
  /* v2.95 — pulihkan modul SEBELUM _navigateTo(), karena _navigateTo langsung
     memanggil loadVideo/loadPdf/loadQuiz yang membaca window._currentModule.
     Kalau prevMod null (halaman non-belajar), _currentModule dibiarkan apa adanya
     — halaman seperti dashboard/courses tidak memakainya. */
  if (prevMod) window._currentModule = prevMod;
  _navigateTo(prevPage);
});

/* ─────────────────────────────────────────────────────────────
   onLoginSuccess
   Dipanggil setelah GAS login() berhasil.
   Simpan sessionId + user ke sessionStorage dan _lmsUser.
   Cek force_pw_change sebelum redirect ke dashboard.
───────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────
   PHASE F — data dashboard yang ikut dikirim login()          v2.125

   login(u, p, true) mengembalikan field .dashboard berisi
   { page, source, payload }. Simpan di sini, lalu loader dashboard
   memakainya alih-alih memanggil server LAGI.

   Dipakai SEKALI PAKAI: begitu diambil, penampung dikosongkan.
   Supaya kalau user pindah halaman lalu balik ke dashboard, data
   yang ditampilkan tetap segar dari server, bukan sisa saat login.

   Kalau kosong / sumbernya tidak cocok / payload gagal -> null,
   dan loader jatuh kembali ke pola lama. Jadi HTML ini tetap jalan
   normal walau Auth.gs di Apps Script masih v1.4.
───────────────────────────────────────────────────────────── */
var _prefetchedDash = null;

function _takePrefetchedDash(source) {
  var d = _prefetchedDash;
  _prefetchedDash = null;                       // sekali pakai
  if (!d || d.source !== source) return null;
  if (!d.payload || d.payload.success !== true) return null;
  return d.payload;
}

function onLoginSuccess(result) {
  _pageLoadServerTimerStop();  // v2.115 Item 11 -- hentikan SEBELUM render apa pun,
                                 // supaya server_ms murni waktu login() di Apps Script
  // v2.125 Phase F — simpan data dashboard yang ikut dikirim login().
  // Kalau Auth.gs masih v1.4, field ini tidak ada -> null -> alur lama.
  _prefetchedDash = (result && result.dashboard) ? result.dashboard : null;

  // Simpan ke sessionStorage
  sessionStorage.setItem('lms_session_id', result.sessionId);
  sessionStorage.setItem('lms_user', JSON.stringify(result.user));

  // Set global state
  _lmsUser = result.user;

  // Apply UI
  applyUserToUI(_lmsUser);

  // Cek force_pw_change
  if (_lmsUser.force_pw_change === true) {
    hideLoading();
    _pageLoadStartMs = null;   // v1.7 -- alur ganti password paksa, bukan pengukuran load dashboard yang valid; reset supaya tidak menggantung ke sesi berikutnya
    showChangePwModal();
    return;
  }

  // Redirect ke dashboard berdasarkan navType
  var firstPage = {
    admin    : 'dashboard',
    employee : 'dashboard',
    hod      : 'hod-dashboard',
    observer : 'observe-dashboard'
  }[_lmsUser.navType] || 'dashboard';

  hideLoading();
  goTo(firstPage);
  _pageLoadTimerStop();   // v1.7 — dashboard baru saja mulai dirender, hentikan & kirim waktu tempuhnya
}

/* ─────────────────────────────────────────────────────────────
   DESKTOP LOGIN
───────────────────────────────────────────────────────────── */
function dLogin() {
  var username = (document.getElementById('d-username').value || '').trim().toUpperCase();
  var password = (document.getElementById('d-pwd').value || '').trim();
  var box      = document.getElementById('d-attempt-box');
  var msg      = document.getElementById('d-attempt-msg');
  var btn      = document.getElementById('d-signin-btn');

  // Validasi client-side
  if (!username || !password) {
    box.style.display = 'flex';
    msg.textContent = !username && !password
      ? 'Please enter your Employee ID and password.'
      : !username ? 'Please enter your Employee ID.'
      : 'Please enter your password.';
    return;
  }

  box.style.display = 'none';
  btn.disabled = true;
  btn.textContent = 'Signing in...';
  _pageLoadTimerStart();  // v1.7 -- mulai hitung sejak staff klik Sign In
  _pageLoadServerTimerStart();  // v2.115 Item 11 -- ukur khusus round-trip login()
  showLoading('Verifying credentials...');

  // Panggil GAS backend
  google.script.run
    .withSuccessHandler(function(result) {
      btn.disabled = false;
      btn.textContent = 'Sign In';
      if (!result.success) {
        hideLoading();
        box.style.display = 'flex';
        msg.textContent = result.message || 'Login failed.';
        // Kosongkan password field setelah gagal
        document.getElementById('d-pwd').value = '';
        return;
      }
      onLoginSuccess(result);
    })
    .withFailureHandler(function(err) {
      btn.disabled = false;
      btn.textContent = 'Sign In';
      hideLoading();
      box.style.display = 'flex';
      msg.textContent = 'Connection error. Please try again.';
      console.error('login error:', err);
    })
    .login(username, password, true);   // v2.125 Phase F — true = kirim sekalian data dashboard
}

/* ─────────────────────────────────────────────────────────────
   MOBILE LOGIN
───────────────────────────────────────────────────────────── */
function mLogin() {
  var username = (document.getElementById('m-username').value || '').trim().toUpperCase();
  var password = (document.getElementById('m-pwd').value || '').trim();
  var box      = document.getElementById('m-attempt-box');
  var btn      = document.getElementById('m-signin-btn');

  if (!username || !password) {
    box.style.display = 'block';
    box.textContent = '⚠ ' + (!username && !password
      ? 'Please enter your Employee ID and password.'
      : !username ? 'Please enter your Employee ID.'
      : 'Please enter your password.');
    return;
  }

  box.style.display = 'none';
  btn.disabled = true;
  btn.textContent = 'Signing in...';
  _pageLoadTimerStart();  // v1.7 -- mulai hitung sejak staff klik Sign In
  _pageLoadServerTimerStart();  // v2.115 Item 11 -- ukur khusus round-trip login()
  showLoading('Verifying credentials...');

  google.script.run
    .withSuccessHandler(function(result) {
      btn.disabled = false;
      btn.textContent = 'Sign In';
      if (!result.success) {
        hideLoading();
        box.style.display = 'block';
        box.textContent = '⚠ ' + (result.message || 'Login failed.');
        document.getElementById('m-pwd').value = '';
        return;
      }
      onLoginSuccess(result);
    })
    .withFailureHandler(function(err) {
      btn.disabled = false;
      btn.textContent = 'Sign In';
      hideLoading();
      box.style.display = 'block';
      box.textContent = '⚠ Connection error. Please try again.';
    })
    .login(username, password, true);   // v2.125 Phase F — true = kirim sekalian data dashboard
}

/* ─────────────────────────────────────────────────────────────
   FORCE CHANGE PASSWORD MODAL
───────────────────────────────────────────────────────────── */
function showChangePwModal() {
  var modal = document.getElementById('modal-changepw');
  if (modal) modal.classList.add('show');
}

function hideChangePwModal() {
  var modal = document.getElementById('modal-changepw');
  if (modal) modal.classList.remove('show');
}

function submitChangePassword() {
  var oldPw  = (document.getElementById('mpw-old').value || '').trim();
  var newPw  = (document.getElementById('mpw-new').value || '').trim();
  var confPw = (document.getElementById('mpw-confirm').value || '').trim();
  var errBox = document.getElementById('mpw-error');
  var errMsg = document.getElementById('mpw-error-msg');
  var btn    = document.getElementById('mpw-btn');

  // Reset error
  errBox.style.display = 'none';

  // Validasi
  if (!oldPw || !newPw || !confPw) {
    errBox.style.display = 'flex';
    errMsg.textContent = 'All fields are required.';
    return;
  }
  if (newPw.length < 6) {
    errBox.style.display = 'flex';
    errMsg.textContent = 'Password baru minimal 6 karakter.';
    return;
  }
  if (newPw !== confPw) {
    errBox.style.display = 'flex';
    errMsg.textContent = 'Konfirmasi password tidak cocok.';
    return;
  }

  var sessionId = sessionStorage.getItem('lms_session_id');
  if (!sessionId) {
    errBox.style.display = 'flex';
    errMsg.textContent = 'Session invalid. Please log in again.';
    return;
  }

  btn.disabled = true;
  btn.textContent = 'Updating...';
  showLoading('Updating password...', true);

  google.script.run
    .withSuccessHandler(function(result) {
      btn.disabled = false;
      btn.textContent = 'Update Password';
      hideLoading();
      if (!result.success) {
        errBox.style.display = 'flex';
        errMsg.textContent = result.message || 'Failed to update password.';
        return;
      }
      // Update local user state — clear force_pw_change
      if (_lmsUser) _lmsUser.force_pw_change = false;
      var stored = sessionStorage.getItem('lms_user');
      if (stored) {
        try {
          var u = JSON.parse(stored);
          u.force_pw_change = false;
          sessionStorage.setItem('lms_user', JSON.stringify(u));
        } catch(e) {}
      }
      hideChangePwModal();
      // Bersihkan field modal
      document.getElementById('mpw-old').value = '';
      document.getElementById('mpw-new').value = '';
      document.getElementById('mpw-confirm').value = '';
      showToast('Password updated. Welcome!');
      // Redirect ke dashboard
      var firstPage = {
        admin    : 'dashboard',
        employee : 'dashboard',
        hod      : 'hod-dashboard',
        observer : 'observe-dashboard'
      }[_lmsUser ? _lmsUser.navType : 'employee'] || 'dashboard';
      goTo(firstPage);
    })
    .withFailureHandler(function(err) {
      btn.disabled = false;
      btn.textContent = 'Update Password';
      hideLoading();
      errBox.style.display = 'flex';
      errMsg.textContent = 'Connection error. Please try again.';
    })
    .changePassword(sessionId, oldPw, newPw);
}

/* ─────────────────────────────────────────────────────────────
   SIGN OUT
───────────────────────────────────────────────────────────── */
function signOut() {
  var sessionId = sessionStorage.getItem('lms_session_id');

  // Clear global state
  _lmsUser = null;
  sessionStorage.clear();
  localStorage.removeItem('lms_last_page');

  /* v2.142 — cache MEMORI wajib ikut dibuang di sini. Sign out tidak
     me-reload halaman (SPA), jadi tanpa baris ini isi cache milik
     user sebelumnya tetap hidup: user berikutnya yang login di
     perangkat yang sama dalam 60 detik akan melihat daftar course
     DAN progres milik orang tadi. */
  _coursesCache = [];
  _certsCache   = [];
  _cacheBatal();

  // Deactivate semua pages dulu
  document.querySelectorAll('#desk .d-page').forEach(function(p) { p.classList.remove('active'); });
  document.querySelectorAll('#mob .m-page').forEach(function(p)  { p.classList.remove('active'); });

  // Reset login form
  var du = document.getElementById('d-username');
  var dp = document.getElementById('d-pwd');
  var mu = document.getElementById('m-username');
  var mp = document.getElementById('m-pwd');
  if (du) du.value = '';
  if (dp) dp.value = '';
  if (mu) mu.value = '';
  if (mp) mp.value = '';
  var box  = document.getElementById('d-attempt-box');
  if (box)  box.style.display  = 'none';
  var mbox = document.getElementById('m-attempt-box');
  if (mbox) mbox.style.display = 'none';

  // Tampilkan login page
  var dl = document.getElementById('d-login');
  var ml = document.getElementById('m-login');
  if (dl) dl.classList.add('active');
  if (ml) ml.classList.add('active');

  window.scrollTo(0, 0);

  // GAS logout di background — tidak blocking
  if (sessionId) {
    google.script.run.logout(sessionId);
  }
}

/* ─────────────────────────────────────────────────────────────
   SESSION RESTORE — cek sessionStorage saat halaman dimuat
   Panggil validateSession ke GAS untuk verifikasi
───────────────────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════
   SKELETON LOADING HELPERS
   Dipanggil oleh load functions sebagai loading state
   sebelum data dari GAS tiba.
══════════════════════════════════════════════════════ */

/* v2.115 — _loader(): brand loader seragam (logo "Miss Fish Bali" +
   spinner gold via .ph-dots), dipakai SEMUA halaman untuk loading state.
   Sebelumnya ada 2 sistem loading berbeda dipakai bercampur: skeleton
   shimmer (_sk*, di bawah — dibiarkan tetap ada, tidak dihapus, supaya
   reversibel) dan brand loader statis. Keduanya juga sempat rusak di
   beberapa titik: (a) .sk-shimmer memakai warna putih hard-coded
   (#f8f8f8) yang tidak ikut dark mode — menyala terang di atas latar
   gelap; (b) beberapa halaman memakai markup .ph-icon yang di CSS
   di-set display:none, sehingga loading tampil sebagai teks
   menggantung tanpa spinner sama sekali (cth. halaman Certificates).
   _loader() menggantikan semuanya dengan SATU bentuk konsisten. */
function _loader(text) {
  /* v2.117 — grid-column:1/-1 ditambah permanen di sini supaya loader
     selalu membentang penuh saat container-nya CSS grid (mis. My
     Courses & Certificates desktop, 3 kolom — sebelumnya loader
     nempel ke kolom pertama/kiri). Properti ini diabaikan total oleh
     browser kalau container-nya bukan grid (block/flex), jadi 18
     pemakaian _loader() lain di halaman non-grid tidak berubah sama
     sekali. */
  return '<div class="page-placeholder" style="grid-column:1/-1">' +
           '<div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div>' +
           '<div class="ph-title">' + escHtml(text || 'Loading...') + '</div>' +
         '</div>';
}

function _sk(style) {
  return '<div class="sk-shimmer" style="' + style + '"></div>';
}

function _skStatCard() {
  return '<div style="background:var(--white);border-radius:14px;padding:22px 24px;border:1px solid var(--gray-100)">' +
    _sk('width:38px;height:38px;border-radius:50%;margin-bottom:14px') +
    _sk('width:45%;height:22px;margin-bottom:8px') +
    _sk('width:65%;height:12px') +
    '</div>';
}

function _skCourseCard() {
  return '<div style="background:var(--white);border-radius:14px;overflow:hidden;border:1px solid var(--gray-100)">' +
    _sk('width:100%;height:140px;border-radius:0') +
    '<div style="padding:16px">' +
    _sk('width:38%;height:11px;margin-bottom:10px') +
    _sk('width:78%;height:16px;margin-bottom:8px') +
    _sk('width:50%;height:11px;margin-bottom:16px') +
    _sk('width:100%;height:36px;border-radius:8px') +
    '</div>' +
    '</div>';
}

function _skUserRow() {
  return '<div style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--gray-100)">' +
    _sk('width:40px;height:40px;border-radius:50%;flex-shrink:0') +
    '<div style="flex:1">' +
    _sk('width:42%;height:14px;margin-bottom:6px') +
    _sk('width:28%;height:11px') +
    '</div>' +
    _sk('width:68px;height:24px;border-radius:6px') +
    '</div>';
}

function _skLogRow() {
  return '<div style="display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--gray-100)">' +
    _sk('width:36px;height:36px;border-radius:50%;flex-shrink:0') +
    '<div style="flex:1">' +
    _sk('width:52%;height:13px;margin-bottom:5px') +
    _sk('width:32%;height:10px') +
    '</div>' +
    _sk('width:54px;height:20px;border-radius:6px') +
    '</div>';
}

function _skProgressCard() {
  return '<div style="background:var(--white);border-radius:14px;padding:20px 24px;border:1px solid var(--gray-100);margin-bottom:12px">' +
    '<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">' +
    _sk('width:44px;height:44px;border-radius:50%;flex-shrink:0') +
    '<div style="flex:1">' +
    _sk('width:52%;height:15px;margin-bottom:6px') +
    _sk('width:33%;height:11px') +
    '</div>' +
    _sk('width:48px;height:22px;border-radius:6px') +
    '</div>' +
    _sk('width:100%;height:8px;border-radius:999px') +
    '</div>';
}

function _skDashboard() {
  return _sk('height:120px;border-radius:16px;margin-bottom:24px') +
    '<div style="display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:16px">' +
    _skStatCard() + _skStatCard() + _skStatCard() + _skStatCard() +
    '</div>' +
    '<div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px">' +
    _skStatCard() + _skStatCard() + _skStatCard() +
    '</div>';
}

function _skCoursesGrid(n) {
  var html = '<div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px">';
  for (var i = 0; i < (n || 3); i++) html += _skCourseCard();
  return html + '</div>';
}

function _skUsersList(n) {
  var html = '<div style="background:var(--white);border-radius:14px;border:1px solid var(--gray-100);overflow:hidden">';
  for (var i = 0; i < (n || 5); i++) html += _skUserRow();
  return html + '</div>';
}

function _skLogList(n) {
  var html = '<div style="background:var(--white);border-radius:14px;border:1px solid var(--gray-100);overflow:hidden">';
  for (var i = 0; i < (n || 6); i++) html += _skLogRow();
  return html + '</div>';
}

function _skProgressList(n) {
  var html = '';
  for (var i = 0; i < (n || 4); i++) html += _skProgressCard();
  return html;
}

/* ─── Skeleton AI Report ─── */
function _skAIReportItem() {
  return '<div style="background:var(--white);border:1px solid var(--gray-100);border-radius:14px;' +
    'padding:16px 20px;display:flex;align-items:center;gap:16px;margin-bottom:8px">' +
    _sk('width:40px;height:40px;border-radius:10px;flex-shrink:0') +
    '<div style="flex:1">' +
    _sk('width:52%;height:15px;margin-bottom:7px') +
    _sk('width:78%;height:11px') +
    '</div>' +
    _sk('width:72px;height:24px;border-radius:20px') +
    '</div>';
}

function _skAIReportList(n) {
  // Filter bar skeleton
  var filterBar = '<div style="background:var(--white);border-radius:14px;border:1px solid var(--gray-100);' +
    'padding:18px 22px;margin-bottom:20px">' +
    _sk('width:100%;height:36px;border-radius:8px;margin-bottom:12px') +
    '<div style="display:flex;gap:8px">' +
    _sk('width:90px;height:32px;border-radius:20px') +
    _sk('width:90px;height:32px;border-radius:20px') +
    _sk('width:90px;height:32px;border-radius:20px') +
    _sk('width:90px;height:32px;border-radius:20px') +
    '</div></div>';
  // Header skeleton
  var header = '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px">' +
    '<div>' +
    _sk('width:220px;height:28px;margin-bottom:8px') +
    _sk('width:300px;height:13px') +
    '</div>' +
    _sk('width:130px;height:32px;border-radius:20px') +
    '</div>';
  // List items
  var items = '';
  for (var i = 0; i < (n || 4); i++) items += _skAIReportItem();
  return header + filterBar +
    '<div style="font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;' +
    'color:var(--gray-300);margin-bottom:10px">RECENT REPORTS</div>' + items;
}

function _skAIReportDetail() {
  // Dark section skeleton — simulasi ai-section
  function skSection(h) {
    return '<div style="background:linear-gradient(135deg,#0A0A0A,#1A1208);border-radius:16px;' +
      'padding:22px 26px;margin-bottom:16px;border:1px solid rgba(201,160,101,0.15)">' +
      '<div style="display:flex;align-items:center;gap:10px;margin-bottom:18px">' +
      _sk('width:32px;height:32px;border-radius:8px;background:rgba(201,160,101,0.15)') +
      _sk('width:140px;height:11px;background:rgba(201,160,101,0.2)') +
      '</div>' +
      _sk('width:90%;height:13px;background:rgba(255,255,255,0.07);margin-bottom:8px') +
      _sk('width:' + (h || '75') + '%;height:13px;background:rgba(255,255,255,0.07);margin-bottom:8px') +
      _sk('width:82%;height:13px;background:rgba(255,255,255,0.07)') +
      '</div>';
  }
  var backRow = '<div style="display:flex;align-items:center;gap:12px;margin-bottom:20px">' +
    _sk('width:130px;height:34px;border-radius:8px') +
    _sk('width:240px;height:22px') +
    '</div>';
  return backRow + skSection('90') + skSection('70') + skSection('80') + skSection('60');
}

function restoreSession() {
  var sessionId  = sessionStorage.getItem('lms_session_id');
  var userStr    = sessionStorage.getItem('lms_user');

  /* v2.143 — apakah prefetch dashboard layak diminta?

     Prefetch cuma berguna kalau halaman yang dituju MEMANG dashboard.
     restoreSession() bisa mendarat di halaman lain lewat
     lms_last_page (courses, profile, reports, ...). Kalau prefetch
     tetap diminta di kasus itu, server menghitung dashboard 2-3 detik
     yang HASILNYA DIBUANG -- restore justru jadi LEBIH LAMBAT, bukan
     lebih cepat. Ini pelajaran yang sama dengan alasan Phase F tidak
     mem-prefetch role HoD/Observer.

     Peran user dibaca dari salinan di sessionStorage (bukan dari
     server -- belum dijawab saat baris ini jalan). Kalau salinan itu
     rusak/tidak terbaca, jawabannya false: rugi paling banter cuma
     kehilangan penghematan, tidak pernah merusak apa pun.

     Catatan: yang dibaca di sini HANYA untuk memutuskan prefetch.
     Data user yang DIPAKAI tetap yang dikirim server di bawah. */
  var _mintaDash = false;
  try {
    if (sessionId && userStr) {
      var _u   = JSON.parse(userStr);
      var _nav = _u && _u.navType;
      // Hanya role yang dashboard-nya punya satu fungsi server tunggal.
      if (_nav === 'admin' || _nav === 'employee') {
        var _last = localStorage.getItem('lms_last_page');
        // Mendarat di dashboard = tidak ada lms_last_page, ATAU
        // lms_last_page memang 'dashboard'.
        _mintaDash = (!_last || _last === 'dashboard');
      }
    }
  } catch (e) {
    _mintaDash = false;   // salinan user rusak -> jangan prefetch
  }

  if (!sessionId || !userStr) {
    // Tidak ada session — tampilkan login
    hideLoading();
    goTo('login');
    return;
  }

  showLoading('Restoring session...', true);

  google.script.run
    .withSuccessHandler(function(result) {
      if (!result) return;
      if (!result.valid) {
        // Session invalid / expired
        sessionStorage.clear();
        hideLoading();
        goTo('login');
        showToast(result.reason || 'Session expired. Please login again.');
        return;
      }
      // Session valid — restore user
      _lmsUser = result.user;
      sessionStorage.setItem('lms_user', JSON.stringify(result.user));
      applyUserToUI(_lmsUser);

      /* v2.143 — tampung data dashboard yang ikut dikirim
         validateSession(). Dipakai oleh goTo() di bawah lewat
         _takePrefetchedDash(), mekanisme yang SUDAH ADA sejak Phase F
         dan sudah terbukti di jalur login.
         Kalau Auth.gs di Apps Script masih v1.6, field ini tidak ada
         -> null -> loader jatuh ke pola lama (dua round-trip). */
      _prefetchedDash = (result && result.dashboard) ? result.dashboard : null;

      // Cek force_pw_change
      if (_lmsUser.force_pw_change === true) {
        hideLoading();
        showChangePwModal();
        return;
      }

      var firstPage = {
        admin    : 'dashboard',
        employee : 'dashboard',
        hod      : 'hod-dashboard',
        observer : 'observe-dashboard'
      }[_lmsUser.navType] || 'dashboard';

      // Restore halaman terakhir sebelum refresh (jika ada)
      var lastPage   = localStorage.getItem('lms_last_page');
      var safePages  = ['dashboard','courses','progress','certs','users','courses-mgmt',
        'reports','actlog','settings','profile','attendance','hod-dashboard','hod-staff',
        'hod-assign','hod-reports','observe-dashboard','observe-reports','aireport'];
      var targetPage = (lastPage && safePages.indexOf(lastPage) !== -1) ? lastPage : firstPage;

      hideLoading();
      goTo(targetPage);
    })
    .withFailureHandler(function(err) {
      // Gagal cek session — fallback ke login
      sessionStorage.clear();
      hideLoading();
      goTo('login');
    })
    /* v2.143 — argumen ke-2 MEMINTA data dashboard ikut dikirim di
       round-trip yang sama. Nilainya dihitung di atas (_mintaDash):
       hanya true kalau halaman tujuannya memang dashboard DAN
       role-nya admin/employee. Ini satu-satunya tempat di seluruh
       berkas yang memanggil validateSession dengan dua argumen. */
    .validateSession(sessionId, _mintaDash);
}

/* ══════════════════════════════════════════════════════════════
   BATCH 2 — Employee Pages JS
   loadEmployeeDashboard, loadMyCourses, loadMyProgress,
   loadMyCerts, render helpers, filter functions
══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   _coursesCache — simpan data courses dari GAS agar tidak
   perlu fetch ulang saat filter/search
───────────────────────────────────────────────────────────── */
var _coursesCache = [];
var _certsCache   = [];

/* ─────────────────────────────────────────────────────────────
   Cache halaman — v2.140 (Phase K)

   Kenapa MEMORI, bukan sessionStorage: aplikasi ini SPA. showPage()
   cuma menukar kelas .active, halaman tidak pernah di-reload, jadi
   variabel di bawah ini hidup selama staff memakai aplikasi. Memori
   juga tidak bisa basi antar-tab dan tidak tertinggal setelah logout
   — dua masalah yang justru DIBAWA oleh sessionStorage.

   60 detik dipilih supaya klik-klik antar menu terasa instan, tapi
   data tidak akan pernah basi lebih lama dari itu. Aksi yang MENGUBAH
   data memanggil _cacheBatal() sehingga perubahannya langsung terlihat
   tanpa menunggu waktu habis.
   ───────────────────────────────────────────────────────────── */
var _CACHE_TTL_MS = 60000;
var _cacheWaktu   = {};   // { namaHalaman: timestamp ms }

function _cacheMasihSegar(nama) {
  var t = _cacheWaktu[nama];
  return !!t && (Date.now() - t) < _CACHE_TTL_MS;
}
function _cacheTandai(nama) { _cacheWaktu[nama] = Date.now(); }
function _cacheBatal(nama) {
  if (nama) { delete _cacheWaktu[nama]; return; }
  _cacheWaktu = {};   // tanpa argumen = batalkan semua (mis. saat logout)
}
var _dCourseFilter = 'all';
var _mCourseFilter = 'all';

/* ─────────────────────────────────────────────────────────────
   applyUserToShellPages
   Setelah login, apply user info ke semua shell pages
   (sidebar user info + topbar avatar) agar tidak perlu
   re-call tiap pindah halaman
───────────────────────────────────────────────────────────── */
function applyUserToShellPages(user) {
  if (!user) return;
  var initials  = getInitials(user.full_name);
  var roleLabel = {
    IT_ADMIN:'IT Super Admin', HRM:'HRM', HR_TALENT:'HR Talent',
    TM:'Training Manager', GM:'General Manager', OWNER:'Owner / Director',
    HOD:'Head of Department', STAFF:'Staff', TRAINEE:'Trainee'
  }[user.role] || user.role;
  var subLabel = user.dept
    ? user.dept + ' · ' + roleLabel
    : roleLabel;

  // Helper set text
  var s = function(id, val) {
    var el = document.getElementById(id);
    if (el) el.textContent = val;
  };

  // Sidebar nav untuk setiap shell page
  // v2.114 — cert-view dan release-log ditambahkan (Fase A membuat
  // halaman cert-view tapi lupa mendaftarkannya di sini -- sidebar
  // nav dan info user-nya tidak pernah terisi. Sekaligus diperbaiki
  // bersama saat release-log ditambahkan).
  var navIds = ['d-sidebar-nav-courses','d-sidebar-nav-progress','d-sidebar-nav-certs','d-sidebar-nav-cert-view','d-sidebar-nav-release-log'];
  navIds.forEach(function(id) {
    var el = document.getElementById(id);
    if (!el) return;
    // Clone dari d-sidebar-nav yang sudah di-build
    var src = document.getElementById('d-sidebar-nav');
    if (src) el.innerHTML = src.innerHTML;
    // Re-attach event listeners setelah clone
    el.querySelectorAll('.nav-item[data-page]').forEach(function(item) {
      var pg = item.getAttribute('data-page');
      if (pg) {
        item.onclick = function() { goTo(pg); };
      }
    });
    el.querySelectorAll('.nav-item[data-page=""]').forEach(function(item) {
      if (item.textContent.indexOf('Sign Out') >= 0) {
        item.onclick = signOut;
      }
    });
  });

  // Sidebar user info
  var pages = ['courses','progress','certs','cert-view','release-log'];
  pages.forEach(function(p) {
    s('sb-avatar-' + p, initials);
    s('sb-name-'   + p, user.full_name);
    s('sb-role-'   + p, subLabel);
    s('topbar-avatar-' + p, initials);
  });

  // Build bottom nav untuk m-courses, m-progress, m-certs
  var mNavIds = {
    'courses' : 'm-bottom-nav-courses',
    'progress': 'm-bottom-nav-progress',
    'certs'   : 'm-bottom-nav-certs'
  };
  Object.keys(mNavIds).forEach(function(page) {
    var items = BNAV_CONFIG[user.navType] || BNAV_CONFIG['employee'];
    var navEl = document.getElementById(mNavIds[page]);
    if (!navEl) return;
    navEl.innerHTML = '';
    items.forEach(function(item) {
      var div = document.createElement('div');
      div.className = 'bnav-item' + (item.page === page ? ' active' : '');
      div.setAttribute('data-page', item.page);
      div.innerHTML =
        '<div class="bnav-icon">' + item.icon + '</div>' +
        '<div class="bnav-label">' + item.label + '</div>';
      div.addEventListener('click', function() { goTo(item.page); });
      navEl.appendChild(div);
    });
  });
}

/* ─────────────────────────────────────────────────────────────
   loadEmployeeDashboard
   Panggil GAS getDashboardStats() + getCourses()
   Render welcome bar, stat cards, active courses, deadlines
───────────────────────────────────────────────────────────── */
function loadEmployeeDashboard() {
  if (!_lmsUser) return;
  var sessionId = sessionStorage.getItem('lms_session_id');
  if (!sessionId) return;

  // v2.125 Phase F — kalau login sudah membawa datanya, render langsung.
  // Tidak ada loading kedua, tidak ada round-trip kedua.
  var _pre = _takePrefetchedDash('getMyDashboard');
  if (_pre) { renderEmployeeDashboard(_pre.data); return; }

  var contentD = document.getElementById('d-dashboard-content');
  var contentM = document.getElementById('m-dashboard-content');

  if (contentD) contentD.innerHTML = _loader('Loading dashboard...');
  if (contentM) contentM.innerHTML = _loader('Loading dashboard...');

  google.script.run
    .withSuccessHandler(function(result) {
      if (!result) return;
      if (!result.success) {
        showToast(result.message || 'Failed to load dashboard.');
        return;
      }
      renderEmployeeDashboard(result.data);
    })
    .withFailureHandler(function(err) {
      showToast('Connection error loading dashboard.');
      console.error('loadEmployeeDashboard error:', err);
    })
    .getMyDashboard(sessionId);
}

/* ─────────────────────────────────────────────────────────────
   renderEmployeeDashboard
   Render semua komponen dashboard dari data GAS
   data: { stats, activeCourses, deadlines, recentActivity }
───────────────────────────────────────────────────────────── */
function renderEmployeeDashboard(data) {
  if (!data) return;
  var user  = _lmsUser;
  var stats = data.stats || {};
  var now   = new Date();
  var h     = now.getHours();
  var greeting = h < 12 ? 'Good Morning' : h < 17 ? 'Good Afternoon' : 'Good Evening';

  // ── DESKTOP ──────────────────────────────────────────────
  var contentD = document.getElementById('d-dashboard-content');
  if (contentD) {
    var deptLabel = user.dept || 'Miss Fish';
    var roleLabel = {
      IT_ADMIN:'IT Super Admin', HRM:'HRM', HR_TALENT:'HR Talent',
      TM:'Training Manager', GM:'General Manager', OWNER:'Owner / Director',
      HOD:'Head of Department', STAFF:'Staff', TRAINEE:'Trainee'
    }[user.role] || user.role;

    var activeCourses = data.activeCourses || [];
    var deadlines     = data.deadlines     || [];
    var recentAct     = data.recentActivity || [];

    // Welcome bar
    var welcomeHtml =
      '<div class="welcome-bar" style="margin-bottom:28px">' +
        '<div class="welcome-bar-bg"></div>' +
        '<div class="welcome-bar-left">' +
          '<div class="welcome-greeting" id="d-greeting">' + greeting + '</div>' +
          '<div class="welcome-name">' + escHtml(user.full_name) + '</div>' +
          '<div class="welcome-sub">' + escHtml(deptLabel) + ' &nbsp;·&nbsp; ' + escHtml(roleLabel) + '</div>' +
        '</div>' +
        '<div class="welcome-bar-right">' +
          '<div class="welcome-date d-date">—</div>' +
          '<div class="welcome-time d-clock">—</div>' +
        '</div>' +
      '</div>';

    // Stat cards
    var totalCourses  = stats.totalCourses  || 0;
    var completed     = stats.completed     || 0;
    var totalCerts    = stats.totalCerts    || 0;
    var avgScore      = stats.avgScore      || 0;
    var overdueCnt    = stats.overdue       || 0;

    var statsHtml =
      '<div class="stats-grid-1" style="margin-bottom:28px">' +
        _statCard('📚', 'ic-gold',  totalCourses, 'My Courses',       completed + ' completed', '') +
        _statCard('✅', 'ic-green', completed,    'Completed',         'this training period',   'trend-up') +
        _statCard('🏆', 'ic-gold',  totalCerts,   'My Certificates',   overdueCnt > 0 ? overdueCnt + ' expiring soon' : 'all valid', overdueCnt > 0 ? 'trend-warn' : 'trend-up') +
        _statCard('📊', 'ic-blue',  avgScore + '%','Avg Quiz Score',   'based on your attempts', 'trend-up') +
      '</div>';

    // Active courses list
    var activeHtml = '';
    if (activeCourses.length === 0) {
      activeHtml = '<div style="padding:32px 24px;text-align:center;color:var(--gray-400)">No active courses.</div>';
    } else {
      activeCourses.forEach(function(c) {
        var pct   = c.progress_pct || 0;
        var label = pct === 0 ? 'Start' : 'Resume';
        var btnCls = pct === 0 ? '' : 'resume';
        activeHtml +=
          '<div style="display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--gray-50)">' +
            '<div style="width:40px;height:40px;border-radius:10px;background:var(--solid-dark);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0">' + (c.icon || '📚') + '</div>' +
            '<div style="flex:1">' +
              '<div style="font-size:13.5px;font-weight:700;margin-bottom:4px">' + escHtml(c.title) + '</div>' +
              '<div style="display:flex;align-items:center;gap:8px">' +
                '<div style="flex:1;height:5px;background:var(--gray-100);border-radius:999px"><div style="width:' + pct + '%;height:100%;background:linear-gradient(90deg,var(--gold),#E8C97A);border-radius:999px"></div></div>' +
                '<span style="font-size:12px;font-weight:700;color:var(--gold)">' + pct + '%</span>' +
              '</div>' +
              '<div style="font-size:11px;color:var(--gray-400);margin-top:2px">' + escHtml(c.dept || '') + (c.modules_left ? ' · ' + c.modules_left + ' modules left' : '') + '</div>' +
            '</div>' +
            '<button class="btn-course ' + btnCls + '" onclick="goTo(\'courses\')">' + label + '</button>' +
          '</div>';
      });
    }

    var activeCoursesCard =
      '<div class="card">' +
        '<div class="card-header"><span class="card-title">My Active Courses</span><span class="card-action" onclick="goTo(\'courses\')">View All →</span></div>' +
        activeHtml +
      '</div>';

    // Deadlines card
    var dlHtml = '';
    if (deadlines.length === 0) {
      dlHtml = '<div style="padding:20px 24px;text-align:center;color:var(--gray-400);font-size:13px">No upcoming deadlines. 🎉</div>';
    } else {
      deadlines.slice(0, 5).forEach(function(d) {
        var days    = d.days_left;
        var dotCls  = days <= 7  ? 'dd-urgent' : days <= 14 ? 'dd-soon' : 'dd-ok';
        var daysCls = days <= 7  ? 'days-urgent' : days <= 14 ? 'days-soon' : 'days-ok';
        var daysLbl = days <= 0  ? 'Overdue!' : days + ' days';
        dlHtml +=
          '<div class="deadline-item">' +
            '<div class="deadline-dot ' + dotCls + '"></div>' +
            '<div class="deadline-info">' +
              '<div class="deadline-course">' + escHtml(d.title) + '</div>' +
              '<div class="deadline-dept">' + escHtml(d.dept || '') + '</div>' +
            '</div>' +
            '<div class="deadline-days ' + daysCls + '">' + daysLbl + '</div>' +
          '</div>';
      });
    }
    var deadlineCard =
      '<div class="card">' +
        '<div class="card-header"><span class="card-title">Upcoming Deadlines</span></div>' +
        '<div class="deadline-list">' + dlHtml + '</div>' +
      '</div>';

    // Recent activity card
    var actHtml = '';
    if (recentAct.length === 0) {
      actHtml = '<div style="padding:20px 24px;text-align:center;color:var(--gray-400);font-size:13px">No recent activity yet.</div>';
    } else {
      recentAct.slice(0, 4).forEach(function(a) {
        actHtml +=
          '<div style="padding:12px 20px;border-bottom:1px solid var(--gray-50)">' +
            '<div style="font-size:12.5px;font-weight:600;color:var(--black)">' + escHtml(a.label) + '</div>' +
            '<div style="font-size:11px;color:var(--gray-500);margin-top:2px">' + escHtml(a.time || '') + '</div>' +
          '</div>';
      });
    }
    var recentCard =
      '<div class="card" style="margin-top:16px">' +
        '<div class="card-header"><span class="card-title">My Recent Activity</span></div>' +
        actHtml +
      '</div>';

    // Dash grid
    var dashGrid =
      '<div class="dash-grid">' +
        activeCoursesCard +
        '<div style="display:flex;flex-direction:column;gap:16px">' +
          deadlineCard +
          recentCard +
        '</div>' +
      '</div>';

    contentD.innerHTML = welcomeHtml + statsHtml + _deadlineBanner(deadlines) + dashGrid;
    updateClock(); // refresh clock display
  }

  // ── MOBILE ────────────────────────────────────────────────
  var contentM = document.getElementById('m-dashboard-content');
  if (contentM) {
    var activeCourses = data.activeCourses || [];
    var deadlines     = data.deadlines     || [];
    var stats         = data.stats || {};

    var heroHtml =
      '<div class="dash-hero">' +
        '<div class="dash-hero-bg"></div>' +
        '<div class="dash-hero-top" style="position:relative;z-index:1">' +
          '<div>' +
            '<div class="dash-greeting" id="m-greeting">' + greeting + '</div>' +
            '<div class="dash-name">' + escHtml(user.full_name) + '</div>' +
            '<div class="dash-role-tag">' + escHtml(user.dept || '') + ' · ' + escHtml(user.role || '') + '</div>' +
          '</div>' +
          '<div>' +
            '<div class="dash-time m-clock">—</div>' +
            '<div class="dash-date m-date">—</div>' +
          '</div>' +
        '</div>' +
      '</div>';

    var statsScrollHtml =
      '<div class="stats-scroll">' +
        _statChip('📚', stats.totalCourses || 0,  'Courses',  '') +
        _statChip('✅', stats.completed    || 0,  'Completed','mob-trend-up') +
        _statChip('🏆', stats.totalCerts   || 0,  'Certs',    'mob-trend-up') +
        _statChip('📊', (stats.avgScore || 0) + '%','Avg Score','mob-trend-up') +
      '</div>';

    var mActiveHtml = '';
    if (activeCourses.length > 0) {
      activeCourses.slice(0, 3).forEach(function(c) {
        var pct = c.progress_pct || 0;
        var btn = pct === 0 ? '<button class="btn-cc btn-cc-start">Start →</button>' : '<button class="btn-cc btn-cc-resume">Resume →</button>';
        mActiveHtml +=
          '<div style="background:var(--white);border-radius:14px;border:1px solid var(--gray-100);padding:14px 16px;display:flex;align-items:center;gap:12px;cursor:pointer" onclick="goTo(\'courses\')">' +
            '<div style="width:40px;height:40px;border-radius:10px;background:var(--solid-dark);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0">' + (c.icon || '📚') + '</div>' +
            '<div style="flex:1;min-width:0">' +
              '<div style="font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">' + escHtml(c.title) + '</div>' +
              '<div style="display:flex;align-items:center;gap:6px;margin-top:5px">' +
                '<div style="flex:1;height:4px;background:var(--gray-100);border-radius:999px"><div style="width:' + pct + '%;height:100%;background:linear-gradient(90deg,var(--gold),#E8C97A);border-radius:999px"></div></div>' +
                '<span style="font-size:11px;font-weight:700;color:var(--gold)">' + pct + '%</span>' +
              '</div>' +
            '</div>' +
            btn +
          '</div>';
      });
    } else {
      mActiveHtml = '<div style="text-align:center;padding:20px;color:var(--gray-400);font-size:13px">No active courses yet.</div>';
    }

    var mDeadlineHtml = '';
    if (deadlines.length > 0) {
      deadlines.slice(0, 3).forEach(function(d) {
        var days    = d.days_left;
        var clr     = days <= 7 ? 'var(--red)' : days <= 14 ? 'var(--amber)' : 'var(--green)';
        var daysLbl = days <= 0 ? 'Overdue!' : days + ' days';
        mDeadlineHtml +=
          '<div style="display:flex;justify-content:space-between;align-items:center;padding:11px 16px;border-bottom:1px solid var(--gray-50)">' +
            '<div><div style="font-size:13px;font-weight:600">' + escHtml(d.title) + '</div><div style="font-size:11px;color:var(--gray-500)">' + escHtml(d.dept || '') + '</div></div>' +
            '<span style="font-size:12px;font-weight:700;color:' + clr + '">' + daysLbl + '</span>' +
          '</div>';
      });
    } else {
      mDeadlineHtml = '<div style="padding:16px;text-align:center;font-size:13px;color:var(--gray-400)">No deadlines 🎉</div>';
    }

    var mActiveSec =
      '<div class="section-header"><span class="section-title">Active Courses</span><span class="section-action" onclick="goTo(\'courses\')">All →</span></div>' +
      '<div style="padding:0 16px;display:flex;flex-direction:column;gap:10px">' + mActiveHtml + '</div>';

    var mDeadlineSec =
      '<div class="section-header" style="margin-top:8px"><span class="section-title">Upcoming Deadlines</span></div>' +
      '<div style="background:var(--white);border-radius:14px;border:1px solid var(--gray-100);margin:0 16px;overflow:hidden">' + mDeadlineHtml + '</div>';

    contentM.innerHTML = heroHtml + statsScrollHtml + _deadlineBanner(deadlines) + mActiveSec + mDeadlineSec + '<div style="height:20px"></div>';
    updateClock();
  }
}

/* ─────────────────────────────────────────────────────────────
   loadMyCourses — fetch dari GAS getCourses()
───────────────────────────────────────────────────────────── */
function loadMyCourses() {
  if (!_lmsUser) return;
  var sessionId = sessionStorage.getItem('lms_session_id');
  if (!sessionId) return;

  var gridD  = document.getElementById('d-courses-grid');
  var listM  = document.getElementById('m-courses-list');
  if (gridD) gridD.innerHTML = _loader('Loading courses...');
  if (listM) listM.innerHTML = _loader('Loading courses...');

  google.script.run
    .withSuccessHandler(function(result) {
      if (!result) return;
      if (!result.success) {
        showToast(result.message || 'Failed to load courses.');
        return;
      }
      _coursesCache = result.data || [];
      _cacheTandai('courses');   // v2.140
      renderCourseGrid(_dCourseFilter, '');
      renderCoursesListM(_mCourseFilter);
    })
    .withFailureHandler(function(err) {
      showToast('Connection error loading courses.');
      console.error('loadMyCourses error:', err);
    })
    .getCourses(sessionId, _lmsUser.user_id, _lmsUser.role, _lmsUser.dept || '');
}

/* ─────────────────────────────────────────────────────────────
   renderCourseGrid — desktop, dengan filter + search
───────────────────────────────────────────────────────────── */
function renderCourseGrid(filter, searchTerm) {
  var gridEl = document.getElementById('d-courses-grid');
  if (!gridEl) return;

  var filtered = _coursesCache.filter(function(c) {
    var pct    = c.progress_pct || 0;
    var status = pct >= 100 ? 'completed' : pct > 0 ? 'in-progress' : 'not-started';
    if (filter && filter !== 'all' && status !== filter) return false;
    if (searchTerm) {
      var term = searchTerm.toLowerCase();
      return (c.title || '').toLowerCase().indexOf(term) >= 0 ||
             (c.department || '').toLowerCase().indexOf(term) >= 0;
    }
    return true;
  });

  if (filtered.length === 0) {
    gridEl.innerHTML = '<div class="page-placeholder" style="grid-column:1/-1"><div class="ph-icon">🔍</div><div class="ph-title">No courses found</div><div class="ph-sub">Try a different filter or search term</div></div>';
    return;
  }

  var html = '';
  filtered.forEach(function(c) {
    html += _courseCardDesktop(c);
  });
  gridEl.innerHTML = html;
}

/* ─────────────────────────────────────────────────────────────
   renderCoursesListM — mobile course list
───────────────────────────────────────────────────────────── */
function renderCoursesListM(filter) {
  var listEl = document.getElementById('m-courses-list');
  if (!listEl) return;

  var filtered = _coursesCache.filter(function(c) {
    var pct    = c.progress_pct || 0;
    var status = pct >= 100 ? 'completed' : pct > 0 ? 'in-progress' : 'not-started';
    return !filter || filter === 'all' || status === filter;
  });

  if (filtered.length === 0) {
    listEl.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">No courses found</div></div>';
    return;
  }

  var html = '';
  filtered.forEach(function(c) {
    html += _courseCardMobile(c);
  });
  listEl.innerHTML = html;
}

/* ─────────────────────────────────────────────────────────────
   loadMyProgress — fetch dari GAS getProgress()
───────────────────────────────────────────────────────────── */
function loadMyProgress() {
  if (!_lmsUser) return;
  var sessionId = sessionStorage.getItem('lms_session_id');
  if (!sessionId) return;

  var contentD = document.getElementById('d-progress-content');
  var contentM = document.getElementById('m-progress-content');
  if (contentD) contentD.innerHTML = _loader('Loading progress...');
  if (contentM) contentM.innerHTML = _loader('Loading progress...');

  google.script.run
    .withSuccessHandler(function(result) {
      if (!result) return;
      if (!result.success) {
        showToast(result.message || 'Failed to load progress.');
        var cD = document.getElementById('d-progress-content');
        var cM = document.getElementById('m-progress-content');
        var empty = '<div class="page-placeholder"><div class="ph-title">No courses assigned yet.</div></div>';
        if (cD) cD.innerHTML = empty;
        if (cM) cM.innerHTML = empty;
        return;
      }
      // GAS getProgress return array of course progress items
      // Transform ke object yang renderProgressPage pahami
      var items = Array.isArray(result.data) ? result.data : [];
      var completed = 0;
      var totalPct  = 0;
      /* v2.112 — avg_score dan total_certs sekarang DIHITUNG dari
         field best_score/has_certificate yang dikirim getProgress
         (Courses.gs v1.4). Sebelumnya ditulis 0 secara manual karena
         datanya memang belum pernah dikirim GAS. */
      var scoreSum   = 0;
      var scoreCount = 0;
      var certCount  = 0;
      items.forEach(function(c) {
        if ((c.progress_pct || 0) >= 100) completed++;
        totalPct += (c.progress_pct || 0);
        if (c.best_score !== null && c.best_score !== undefined) {
          scoreSum += c.best_score;
          scoreCount++;
        }
        if (c.has_certificate === true) certCount++;
      });
      var overallPct = items.length > 0
        ? Math.round(totalPct / items.length) : 0;
      var avgScore = scoreCount > 0 ? Math.round(scoreSum / scoreCount) : 0;
      renderProgressPage({
        overall_pct : overallPct,
        completed   : completed,
        total       : items.length,
        avg_score   : avgScore,
        total_certs : certCount,
        courses     : items
      });
    })
    .withFailureHandler(function(err) {
      showToast('Connection error loading progress.');
      console.error('loadMyProgress error:', err);
    })
    .getProgress(sessionId, _lmsUser ? _lmsUser.user_id : null);
}

/* ─────────────────────────────────────────────────────────────
   renderProgressPage — render desktop + mobile progress
   data: { overall_pct, completed, total, avg_score,
           total_certs, courses[] }
───────────────────────────────────────────────────────────── */
function renderProgressPage(data) {
  if (!data) return;
  var pct       = data.overall_pct  || 0;
  var completed = data.completed    || 0;
  var total     = data.total        || 0;
  var avgScore  = data.avg_score    || 0;
  var totCerts  = data.total_certs  || 0;
  var courses   = data.courses      || [];

  // SVG ring circumference (r=44, c = 2π*44 ≈ 276.5)
  var C      = 276.5;
  var offset = C - (pct / 100) * C;

  // ── DESKTOP ──
  var contentD = document.getElementById('d-progress-content');
  if (contentD) {
    var heroHtml =
      '<div class="prog-hero-card">' +
        '<div class="prog-hero-bg"></div>' +
        '<div class="prog-hero-left">' +
          '<div style="font-size:10px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px">Overall Training Progress</div>' +
          '<div style="font-family:Georgia,serif;font-size:36px;font-weight:700;color:#fff;margin-bottom:4px">' + pct + '% Complete</div>' +
          '<div style="font-size:14px;color:rgba(255,255,255,0.4)">' + completed + ' of ' + total + ' courses completed</div>' +
        '</div>' +
        '<div class="prog-hero-right">' +
          '<div class="prog-ring-d">' +
            '<svg width="100" height="100" viewBox="0 0 100 100">' +
              '<circle cx="50" cy="50" r="44" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="8"/>' +
              '<circle cx="50" cy="50" r="44" fill="none" stroke="#C9A065" stroke-width="8" stroke-dasharray="' + C.toFixed(1) + '" stroke-dashoffset="' + offset.toFixed(1) + '" stroke-linecap="round"/>' +
            '</svg>' +
            '<div class="prog-ring-pct-d">' + pct + '%</div>' +
          '</div>' +
          '<div class="prog-hero-stats">' +
            '<div class="phs-item"><div class="phs-dot" style="background:var(--green)"></div><div class="phs-text">Completed</div><div class="phs-val">' + completed + '</div></div>' +
            '<div class="phs-item"><div class="phs-dot" style="background:var(--gold)"></div><div class="phs-text">Certificates</div><div class="phs-val">' + totCerts + '</div></div>' +
            '<div class="phs-item"><div class="phs-dot" style="background:var(--blue)"></div><div class="phs-text">Avg Score</div><div class="phs-val">' + avgScore + '%</div></div>' +
          '</div>' +
        '</div>' +
      '</div>';

    // Course progress table
    var tableHtml = '';
    if (courses.length === 0) {
      tableHtml = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">No courses assigned yet.</div></div>';
    } else {
      var rows = '';
      courses.forEach(function(c) {
        var cpct    = c.progress_pct || 0;
        var sbCls   = cpct >= 100 ? 'sb-done' : cpct > 0 ? 'sb-prog' : 'sb-new';
        var sbLabel = cpct >= 100 ? '✓ Done' : cpct > 0 ? 'In Progress' : 'Not Started';
        rows +=
          '<tr class="mp-row" style="cursor:pointer" onclick="_openCourseFromProgress(' + escHtml(JSON.stringify(c.course_id || '')) + ')">' +
            '<td style="font-weight:600">' + escHtml(c.title) + '</td>' +
            '<td>' + escHtml(c.department || '—') + '</td>' +
            '<td>' +
              '<div class="course-prog-bar-d">' +
                '<div class="cpb-bg"><div class="cpb-fill" style="width:' + cpct + '%"></div></div>' +
                '<div class="cpb-pct">' + cpct + '%</div>' +
              '</div>' +
            '</td>' +
            '<td><span class="status-badge ' + sbCls + '">' + sbLabel + '</span></td>' +
            '<td style="font-size:12px;color:var(--gray-500)">' + (c.deadline ? c.deadline : '—') + '</td>' +
          '</tr>';
      });
      tableHtml =
        '<div class="table-card">' +
          '<div class="card-header"><span class="card-title">Course Progress Detail</span></div>' +
          '<div class="table-wrap">' +
            '<table class="mgmt-table">' +
              '<thead><tr><th>Course</th><th>Dept</th><th>Progress</th><th>Status</th><th>Deadline</th></tr></thead>' +
              '<tbody>' + rows + '</tbody>' +
            '</table>' +
          '</div>' +
        '</div>';
    }

    contentD.innerHTML = heroHtml + tableHtml;
  }

  // ── MOBILE ──
  var contentM = document.getElementById('m-progress-content');
  if (contentM) {
    var C2      = 207.3; // r=33
    var offset2 = C2 - (pct / 100) * C2;

    var mHeroHtml =
      '<div class="prog-hero-m">' +
        '<div class="prh-bg"></div>' +
        '<div class="prh-content">' +
          '<div class="prh-ring">' +
            '<svg width="80" height="80" viewBox="0 0 80 80">' +
              '<circle cx="40" cy="40" r="33" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="7"/>' +
              '<circle cx="40" cy="40" r="33" fill="none" stroke="#C9A065" stroke-width="7" stroke-dasharray="' + C2.toFixed(1) + '" stroke-dashoffset="' + offset2.toFixed(1) + '" stroke-linecap="round"/>' +
            '</svg>' +
            '<div class="prh-ring-pct">' + pct + '%</div>' +
          '</div>' +
          '<div class="prh-info">' +
            '<div class="prh-label">Overall Progress</div>' +
            '<div class="prh-title">' + pct + '% Complete</div>' +
            '<div class="prh-sub">' + completed + ' of ' + total + ' courses done</div>' +
          '</div>' +
        '</div>' +
        '<div class="prog-stats-m">' +
          '<div class="psm-item"><div class="psm-num">' + total + '</div><div class="psm-label">Courses</div></div>' +
          '<div class="psm-item"><div class="psm-num" style="color:#6EE7B7">' + completed + '</div><div class="psm-label">Done</div></div>' +
          '<div class="psm-item"><div class="psm-num" style="color:var(--gold)">' + totCerts + '</div><div class="psm-label">Certs</div></div>' +
          '<div class="psm-item"><div class="psm-num" style="color:var(--gold)">' + avgScore + '</div><div class="psm-label">Avg%</div></div>' +
        '</div>' +
      '</div>';

    var mCourseItems = '';
    courses.forEach(function(c) {
      var cpct   = c.progress_pct || 0;
      var sbCls  = cpct >= 100 ? 'sb-done' : cpct > 0 ? 'sb-prog' : 'sb-new';
      var sbLbl  = cpct >= 100 ? '✓' : cpct > 0 ? 'Prog' : 'New';
      mCourseItems +=
        '<div class="prog-course-item" onclick="_openCourseFromProgress(' + escHtml(JSON.stringify(c.course_id || '')) + ')">' +
          '<div class="pci-icon">' + (c.icon || '📚') + '</div>' +
          '<div class="pci-info">' +
            '<div class="pci-title">' + escHtml(c.title) + '</div>' +
            '<div class="pci-bar-wrap">' +
              '<div class="pci-bar-bg"><div class="pci-bar-fill" style="width:' + cpct + '%"></div></div>' +
              '<span class="pci-pct">' + cpct + '%</span>' +
            '</div>' +
          '</div>' +
          '<span class="pci-badge ' + sbCls + '">' + sbLbl + '</span>' +
        '</div>';
    });

    var mCourseSec = courses.length === 0
      ? '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">No courses yet.</div></div>'
      : '<div class="section-header"><span class="section-title">Course Progress</span><span class="section-action" onclick="goTo(\'courses\')">All →</span></div>' +
        '<div style="padding:0 16px;display:flex;flex-direction:column;gap:10px">' + mCourseItems + '</div>';

    contentM.innerHTML = mHeroHtml + mCourseSec + '<div style="height:20px"></div>';
  }
}

/* ─────────────────────────────────────────────────────────────
   loadMyCerts — fetch dari GAS getCertificates()
───────────────────────────────────────────────────────────── */
function loadMyCerts() {
  if (!_lmsUser) return;
  var sessionId = sessionStorage.getItem('lms_session_id');
  if (!sessionId) return;

  var gridD = document.getElementById('d-certs-grid');
  var listM = document.getElementById('m-certs-list');
  if (gridD) gridD.innerHTML = _loader('Loading certificates...');
  if (listM) listM.innerHTML = _loader('Loading certificates...');

  google.script.run
    .withSuccessHandler(function(result) {
      if (!result) return;
      if (!result.success) {
        showToast(result.message || 'Failed to load certificates.');
        return;
      }
      _certsCache = result.data || [];
      _cacheTandai('certs');   // v2.140
      renderCertsGrid();
      renderCertsListM();
    })
    .withFailureHandler(function(err) {
      showToast('Connection error loading certificates.');
      console.error('loadMyCerts error:', err);
    })
    .getCertificates(sessionId, _lmsUser ? _lmsUser.user_id : null);
}

/* ─────────────────────────────────────────────────────────────
   renderCertsGrid — desktop
───────────────────────────────────────────────────────────── */
function renderCertsGrid() {
  var gridEl = document.getElementById('d-certs-grid');
  if (!gridEl) return;

  if (_certsCache.length === 0) {
    gridEl.innerHTML =
      '<div class="cert-empty">' +
        '<div class="ce-icon">🏆</div>' +
        '<div class="ce-title">No Certificates Yet</div>' +
        '<div class="ce-sub">Complete a course with a quiz to earn your first certificate.</div>' +
      '</div>';
    return;
  }

  var html = '';
  _certsCache.forEach(function(c) {
    var badgeLabel = c.valid_until
      ? (new Date(c.valid_until) < new Date() ? 'Expired' : '✓ Valid')
      : '✓ Issued';
    html +=
      '<div class="cert-card-list" onclick="openCertView(\'' + escHtml(c.cert_id || '') + '\')">'+
        '<div class="cert-card-thumb">' +
          '<div class="cert-card-thumb-bg"></div>' +
          '<div style="font-size:36px;position:relative;z-index:1">' + (c.icon || '🏆') + '</div>' +
          '<div class="cert-card-badge">' + badgeLabel + '</div>' +
        '</div>' +
        '<div class="cert-card-body">' +
          '<div class="cert-card-id">' + escHtml(c.cert_id || '—') + '</div>' +
          '<div class="cert-card-course">' + escHtml(c.course_title || '—') + '</div>' +
          '<div class="cert-card-meta">' +
            escHtml(c.dept || '') + (c.issued_at ? ' · ' + escHtml(c.issued_at) : '') +
            (c.valid_until ? '<br>Valid until: ' + escHtml(_fmtTanggalPanjang(c.valid_until)) : '') +
          '</div>' +
          (c.score ? '<div class="cert-card-score">🏆 ' + c.score + '%</div>' : '') +
        '</div>' +
      '</div>';
  });
  gridEl.innerHTML = html;
}

/* ─────────────────────────────────────────────────────────────
   renderCertsListM — mobile
───────────────────────────────────────────────────────────── */
function renderCertsListM() {
  var listEl = document.getElementById('m-certs-list');
  if (!listEl) return;

  if (_certsCache.length === 0) {
    listEl.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">No certificates yet.</div><div class="ph-sub">Complete a course to earn one!</div></div>';
    return;
  }

  var html = '';
  _certsCache.forEach(function(c) {
    var expired = c.valid_until && new Date(c.valid_until) < new Date();
    var badgeLbl = expired ? 'Expired' : '✓ Valid';
    var badgeStyle = expired ? 'style="background:var(--gray-200);color:var(--gray-500)"' : '';
    html +=
      '<div class="cert-item-m" onclick="openCertView(\'' + escHtml(c.cert_id || '') + '\')">'+  
        '<div class="cim-thumb">' +
          '<div class="cim-thumb-bg"></div>' +
          '<div class="cim-thumb-icon">' + (c.icon || '🏆') + '</div>' +
          '<div class="cim-badge" ' + badgeStyle + '>' + badgeLbl + '</div>' +
        '</div>' +
        '<div class="cim-body">' +
          '<div class="cim-id">' + escHtml(c.cert_id || '—') + '</div>' +
          '<div class="cim-course">' + escHtml(c.course_title || '—') + '</div>' +
          '<div class="cim-meta">' +
            escHtml(c.dept || '') + (c.issued_at ? ' · ' + escHtml(c.issued_at) : '') +
          '</div>' +
          (c.score ? '<div class="cim-score">🏆 ' + c.score + '%</div>' : '') +
        '</div>' +
      '</div>';
  });
  listEl.innerHTML = html;
}

/* ─────────────────────────────────────────────────────────────
   FILTER FUNCTIONS
───────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────
   CERTIFICATE VIEW MODAL FUNCTIONS
───────────────────────────────────────────────────────────── */
function openCertView(certId) {
  if (!certId) return;
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) { showToast('Session expired. Please login again.'); return; }
  /* v2.112 — halaman biasa (goTo), BUKAN modal. Modal memaksa lebar
     terbatas (~920px) padahal sertifikat perlu 1060px tetap untuk
     rasio A4 landscape yang benar -- itu sebabnya sebelumnya harus
     scroll horizontal atau terpotong. Render ke KEDUA container
     (desktop + mobile) sekaligus karena keduanya sekarang halaman
     terpisah dalam DOM, bukan satu modal shared. */
  goTo('cert-view');
  var contentD = document.getElementById('d-cert-view-content');
  var contentM = document.getElementById('m-cert-view-content');
  var loadingHtml = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading certificate...</div></div>';
  if (contentD) contentD.innerHTML = loadingHtml;
  if (contentM) contentM.innerHTML = loadingHtml;
  window._currentCertId = certId;   // v2.112 -- dipakai downloadCertPDF kalau perlu re-fetch konteks
  google.script.run
    .withSuccessHandler(function(r) {
      var errorHtml = '<div style="text-align:center;padding:40px 0;color:#EF4444">Failed to load certificate.</div>';
      if (!r || !r.success || !r.data) {
        if (contentD) contentD.innerHTML = errorHtml;
        if (contentM) contentM.innerHTML = errorHtml;
        return;
      }
      var d = r.data;
      var score   = d.score || 0;
      var isDistinction = score >= 90;
      var passed  = score >= 75;
      var dept    = d.dept || 'Miss Fish Bali';
      var issuedStr = d.issued_at || '';
      var validStr  = d.valid_until || '';
      var certHtml =
        '<div style="width:1060px;max-width:100%;margin:0 auto">' +
        '<div style="background:#f0ede8;border-radius:16px;padding:24px">' +
        '<div id="cert-pdf-target" style="background:#fff;width:100%;border-radius:4px;border:1.5px solid #e8e4dc;position:relative;overflow:visible;padding:32px 32px 48px;box-shadow:0 8px 40px rgba(0,0,0,0.12)">' +
          // Corner ornaments
          '<div style="position:absolute;top:20px;left:20px;width:32px;height:32px;border-top:2px solid #C9A05A;border-left:2px solid #C9A05A"></div>' +
          '<div style="position:absolute;top:20px;right:20px;width:32px;height:32px;border-top:2px solid #C9A05A;border-right:2px solid #C9A05A"></div>' +
          '<div style="position:absolute;bottom:20px;left:20px;width:32px;height:32px;border-bottom:2px solid #C9A05A;border-left:2px solid #C9A05A"></div>' +
          '<div style="position:absolute;bottom:20px;right:20px;width:32px;height:32px;border-bottom:2px solid #C9A05A;border-right:2px solid #C9A05A"></div>' +
          // Watermark
          '<div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0.04;overflow:hidden"><img src=&quot;/missfish-logo.webp&quot; alt=&quot;&quot; style=&quot;width:55%;height:auto&quot;></div>' +
          // Header
          '<div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:4px;position:relative">' +
            '<div><div style="font-family:Georgia,serif;font-size:16px;font-weight:700;color:#0A0A0A">Miss Fish Bali</div>' +
            '<div style="font-size:8px;font-weight:700;letter-spacing:.18em;color:#C9A05A;text-transform:uppercase;margin-top:2px">Learning Management System</div></div>' +
            '<div style="text-align:right;font-size:10.5px;color:#888;line-height:1.8">' +
            'Certificate No: <strong style="color:#0A0A0A">' + escHtml(d.cert_id) + '</strong><br>' +
            'Issue Date: <strong style="color:#0A0A0A">' + escHtml(issuedStr) + '</strong><br>' +
            'Valid For: <strong style="color:#0A0A0A">1 Year</strong></div>' +
          '</div>' +
          // Center logo
          '<div style="text-align:center;margin-top:-24px;margin-bottom:2px;position:relative">' +
          '<img src="data:image/webp;base64,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" alt="Miss Fish Bali" style="height:136px;width:auto">' +
          '</div>' +
          // Certificate of Completion line
          '<div style="display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px;position:relative">' +
          '<div style="flex:1;height:1px;background:linear-gradient(to right,transparent,#C9A05A)"></div>' +
          '<div style="font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#C9A05A;white-space:nowrap">CERTIFICATE OF COMPLETION</div>' +
          '<div style="flex:1;height:1px;background:linear-gradient(to left,transparent,#C9A05A)"></div>' +
          '</div>' +
          // Body
          '<div style="text-align:center;position:relative">' +
          '<div style="font-family:Georgia,serif;font-size:22px;color:#0A0A0A;margin-bottom:2px">This is to certify that</div>' +
          (isDistinction ? '<div style="font-family:Georgia,serif;font-size:19px;font-style:italic;color:#C9A05A;margin-bottom:10px">with distinction</div>' : '<div style="margin-bottom:10px"></div>') +
          '<div style="font-size:11px;color:#888;margin-bottom:4px">has successfully completed</div>' +
          '<div style="font-family:Georgia,serif;font-size:34px;font-weight:700;color:#0A0A0A;margin-bottom:6px;border-bottom:2px solid #0A0A0A;display:inline-block;padding-bottom:3px">' + escHtml(d.full_name) + '</div>' +
          '<div style="font-size:12px;color:#888;margin:6px 0 10px">' + escHtml(dept) + ' · Miss Fish Bali</div>' +
          '<div style="font-size:12px;color:#666;margin-bottom:5px">has successfully completed the course</div>' +
          '<div style="font-family:Georgia,serif;font-size:18px;font-weight:700;color:#0A0A0A;margin-bottom:4px">' + escHtml(d.course_title) + '</div>' +
          (d.course_dept ? '<div style="font-size:10.5px;color:#999;margin-bottom:12px">' + escHtml(d.course_dept) + '</div>' : '<div style="margin-bottom:12px"></div>') +
          '<div style="display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border:1.5px solid #C9A05A;border-radius:999px;margin-bottom:20px">' +
          '🏆 <span style="font-size:12px;font-weight:700;color:#C9A05A">Final Score: ' + score + '% · ' + (isDistinction ? 'Passed with Distinction' : 'Passed') + '</span></div>' +
          // Signatures
          '<div style="display:flex;align-items:flex-end;justify-content:space-between;padding-top:16px;border-top:1px solid #f0ede8">' +
            // Bayu Pramesti
            '<div style="text-align:center;flex:1">' +
            '<svg width="140" height="44" viewBox="0 0 140 44" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:block;margin:0 auto 4px"><path d="M8 36 C20 10, 30 38, 42 24 C50 14, 52 34, 62 28 C70 22, 72 38, 84 30 C92 24, 96 36, 108 32 C116 28, 118 36, 130 34" stroke="#1a1a1a" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 38 C32 34, 40 40, 50 36" stroke="#1a1a1a" stroke-width="1.2" fill="none" stroke-linecap="round"/></svg>' +
            '<div style="height:1px;background:#0A0A0A;margin:0 20px 6px"></div>' +
            '<div style="font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0A0A0A">BAYU PRAMESTI</div>' +
            '<div style="font-size:10px;color:#888">Training Manager</div></div>' +
            // Emblem
            '<div style="flex:0 0 auto;padding:0 20px"><div style="width:80px;height:80px;border-radius:50%;border:2px solid #C9A05A;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:#fff">' +
            '🏅<div style="font-size:6.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#C9A05A;text-align:center;line-height:1.3">MISS FISH<br>CERTIFIED</div></div></div>' +
            // Agung Satria
            '<div style="text-align:center;flex:1">' +
            '<svg width="140" height="44" viewBox="0 0 140 44" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:block;margin:0 auto 4px"><path d="M6 30 C16 8, 28 36, 40 20 C48 8, 54 32, 68 26 C78 20, 82 34, 96 28 C106 22, 112 32, 126 30 C132 28, 134 32, 136 30" stroke="#1a1a1a" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 36 C28 30, 38 38, 52 34 C58 32, 62 36, 70 34" stroke="#1a1a1a" stroke-width="1.2" fill="none" stroke-linecap="round"/></svg>' +
            '<div style="height:1px;background:#0A0A0A;margin:0 20px 6px"></div>' +
            '<div style="font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0A0A0A">AGUNG SATRIA</div>' +
            '<div style="font-size:10px;color:#888">General Manager</div></div>' +
          '</div>' +
          // Footer
          '<div style="margin-top:14px;padding-top:10px;border-top:1px solid #f0ede8;font-size:9.5px;color:#aaa;text-align:center">' +
          'This certificate is digitally generated by Miss Fish Bali LMS · Certificate ID: ' + escHtml(d.cert_id) + '</div>' +
          '</div>' +
        '</div>' +
        '</div>';
      if (contentD) contentD.innerHTML = certHtml;
      if (contentM) contentM.innerHTML = certHtml;
    })
    .withFailureHandler(function(err) {
      var connErrHtml = '<div style="text-align:center;padding:40px;color:#EF4444">Connection error. Please try again.</div>';
      if (contentD) contentD.innerHTML = connErrHtml;
      if (contentM) contentM.innerHTML = connErrHtml;
    })
    .getCertificateDetail(sid, certId);
}

function downloadCertPDF() {
  var el = document.getElementById('cert-pdf-target');
  if (!el) { showToast('Certificate not loaded.'); return; }

  showToast('Preparing PDF download...');

  /* v2.116 — html2pdf sekarang lazy-loaded, hanya saat tombol ini
     diklik (sebelumnya dimuat blocking di SETIAP halaman untuk semua
     staff, ±800 KB, walau tidak pernah dipakai). Pola sama persis
     dengan _pdfLoadScript_ yang sudah dipakai pdf.js/StPageFlip. */
  _loadHtml2pdf_()
    .then(function() { _runDownloadCertPDF_(el); })
    .catch(function() {
      showToast('Failed to load PDF tool. Please check your connection.');
    });
}

var _html2pdfPromise = null;   // v2.116 — cegah klik dobel memuat 2x

function _loadHtml2pdf_() {
  if (typeof html2pdf !== 'undefined') return Promise.resolve();
  if (_html2pdfPromise) return _html2pdfPromise;   // sedang dimuat, jangan dobel

  _html2pdfPromise = _pdfLoadScript_('/vendor/html2pdf/html2pdf.bundle.min.js')
    .catch(function(err) {
      _html2pdfPromise = null;   // biarkan percobaan berikutnya mencoba lagi
      throw err;
    });
  return _html2pdfPromise;
}

function _runDownloadCertPDF_(el) {
  /* v2.111 — windowWidth dikunci ke lebar fisik sertifikat (1060px,
     sama dengan #cert-pdf-target) supaya html2canvas SELALU merender
     pada lebar yang sama persis berapa pun lebar layar staff —
     inilah yang membuat hasil cetak sebelumnya berbeda-beda rasionya
     tergantung device. backgroundColor putih eksplisit mencegah area
     transparan/pinggiran jadi hitam saat dikonversi ke JPEG.
     pagebreak avoid-all mencegah sertifikat terpotong jadi 2 halaman.
     Logo watermark & tengah sudah ditanam sebagai base64 langsung di
     HTML (lihat openCertView) — tidak ada lagi request gambar
     lintas-domain yang bisa gagal karena CORS saat convert ke PDF. */
  /* v2.126 — PERBAIKAN hasil PDF tergeser & tepi kiri terpotong.
     Sebelumnya opsi windowWidth:1060 memaksa html2canvas menata
     ulang SELURUH halaman pada lebar 1060px. Di lebar itu kerangka
     aplikasi (sidebar, topbar, wadah berpadding) masih ikut dan
     menggeser posisi sertifikat, sehingga hasil tangkapan ikut
     bergeser — tanda tangan Training Manager di kiri sampai hilang.

     Sekarang sertifikat DISALIN ke panggung bersih di luar layout
     aplikasi: lebar dipatok tepat 1060px, tanpa induk berpadding,
     tanpa bayangan/border/sudut membulat yang bukan bagian
     sertifikat. Panggung itu yang ditangkap, jadi hasilnya tidak
     lagi bergantung lebar layar atau posisi elemen di halaman.
     windowWidth sudah tidak diperlukan dan dihapus.

     Panggung ditaruh jauh di kiri layar (bukan opacity:0 atau
     display:none) karena html2canvas TIDAK bisa merender elemen
     yang tersembunyi — hasilnya akan kosong. */
  var stage = document.createElement('div');
  stage.setAttribute('aria-hidden', 'true');
  stage.style.cssText = 'position:absolute;left:-10000px;top:0;width:1060px;background:#ffffff;padding:0;margin:0';

  var clone = el.cloneNode(true);
  clone.style.width        = '1060px';
  clone.style.maxWidth     = '1060px';
  /* v2.129 — minHeight:'750px' dari v2.127 DIHAPUS. Itu menebak
     tinggi isi supaya mendekati rasio A4, dan tebakannya meleset:
     masih tersisa ruang kosong di bawah halaman. Sekarang tinggi
     dibiarkan mengikuti isi, lalu ukuran halaman PDF yang
     menyesuaikan (lihat perhitungan di bawah). */
  clone.style.margin       = '0';
  clone.style.boxShadow    = 'none';
  clone.style.border       = 'none';
  clone.style.borderRadius = '0';

  stage.appendChild(clone);
  document.body.appendChild(stage);

  /* v2.130 — isi sertifikat dibuat mengisi halaman A4 landscape.
     Tinggi isi DIUKUR di sini (offsetHeight baru punya nilai setelah
     stage masuk ke document), lalu kekurangannya menuju rasio A4
     dibagi rata jadi padding atas & bawah -- isi jadi di tengah
     halaman, bukan menempel ke atas dengan sisa ruang di bawah.
     32 dan 48 adalah padding asli #cert-pdf-target (32px 32px 48px).
     Kalau isi ternyata LEBIH TINGGI dari target, tidak diapa-apakan --
     biar html2pdf yang menyesuaikan, jangan sampai terpotong. */
  var _TARGET_H  = Math.round(1060 / 1.414214);   // 750px = rasio A4 landscape
  var _tinggiIsi = clone.offsetHeight;
  if (_tinggiIsi > 0 && _tinggiIsi < _TARGET_H) {
    var _sisa = _TARGET_H - _tinggiIsi;
    var _atas = Math.floor(_sisa / 2);
    clone.style.paddingTop    = (32 + _atas) + 'px';
    clone.style.paddingBottom = (48 + (_sisa - _atas)) + 'px';
  }

  function _bersihkanPanggung() {
    if (stage && stage.parentNode) stage.parentNode.removeChild(stage);
  }

  /* v2.130 — kembali ke A4 landscape. Kak Wi mengonfirmasi sertifikat
     sering dicetak, jadi halaman non-standar (v2.129) justru merepotkan:
     printer akan menskalakannya. Ruang kosong sudah ditangani lewat
     perataan tengah di atas, bukan lewat mengubah ukuran halaman. */
  var opt = {
    margin      : 0,
    filename    : 'MissFish-Certificate.pdf',
    image       : { type: 'jpeg', quality: 0.98 },
    html2canvas : { scale: 2, useCORS: true, backgroundColor: '#ffffff' },
    jsPDF       : { unit: 'mm', format: 'a4', orientation: 'landscape' },
    pagebreak   : { mode: 'avoid-all' }
  };

  /* Panggung WAJIB dibersihkan baik saat berhasil maupun gagal —
     kalau tertinggal, tiap klik menumpuk satu salinan sertifikat
     di dalam body. */
  html2pdf().set(opt).from(clone).save()
    .then(_bersihkanPanggung)
    .catch(function(err) {
      _bersihkanPanggung();
      console.error('downloadCertPDF gagal:', err);
      showToast('Failed to build the PDF. Please try again.');
    });
}


/* ─────────────────────────────────────────────────────────────
   _openCourseFromProgress — dari My Progress ke course detail
───────────────────────────────────────────────────────────── */
function _openCourseFromProgress(courseId) {
  if (!courseId) return;
  /* v2.115 FIX — sebelumnya loadCourseDetail() dipanggil SEBELUM goTo(),
     sehingga konten ditulis ke halaman yang belum aktif (elemen .d-page /
     .m-page tanpa class 'active') — klik terlihat seperti tidak terjadi
     apa-apa sama sekali. Ditukar urutannya supaya sama dengan
     openCourseDetail() di My Courses yang sudah terbukti benar: pindah
     halaman dulu, baru muat datanya. */
  goTo('course-detail');
  loadCourseDetail(courseId);
}

function setCourseFilter(btn, filter) {
  _dCourseFilter = filter;
  document.querySelectorAll('#d-courses .filter-pill').forEach(function(b) {
    b.classList.remove('active');
  });
  btn.classList.add('active');
  var search = document.getElementById('d-courses-search');
  renderCourseGrid(filter, search ? search.value : '');
}

function filterCourses() {
  var search = document.getElementById('d-courses-search');
  renderCourseGrid(_dCourseFilter, search ? search.value : '');
}

function setMCourseFilter(btn, filter) {
  _mCourseFilter = filter;
  document.querySelectorAll('#m-course-filters .pill-m').forEach(function(b) {
    b.classList.remove('active');
  });
  btn.classList.add('active');
  renderCoursesListM(filter);
}

/* ─────────────────────────────────────────────────────────────
   RENDER HELPERS — kecil, reusable
───────────────────────────────────────────────────────────── */

// HTML escape
function escHtml(str) {
  if (str == null) return '';
  return String(str)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');
}

// Desktop stat card
function _statCard(icon, iconCls, num, label, sub, trendCls) {
  // v2.119 — 'trend-up' SEBELUMNYA selalu hardcode di 10 pemanggilan
  // (tidak pernah dihitung dari periode sebelumnya) -> panah hijau
  // "naik" tampil bahkan saat completion 0%, menyesatkan dashboard.
  // 'trend-warn' TETAP ditampilkan — itu genuinely dihitung dari
  // overdue>0 di tiap pemanggil, bukan hardcode.
  var trendHtml = (trendCls === 'trend-warn')
    ? '<span class="stat-card-trend ' + trendCls + '">!</span>'
    : '';
  return (
    '<div class="stat-card">' +
      '<div class="stat-card-top">' +
        '<div class="stat-card-icon ' + iconCls + '">' + icon + '</div>' +
        trendHtml +
      '</div>' +
      '<div class="stat-card-num">' + escHtml(String(num)) + '</div>' +
      '<div class="stat-card-label">' + escHtml(label) + '</div>' +
      '<div class="stat-card-sub">' + escHtml(sub) + '</div>' +
    '</div>'
  );
}

// Mobile stat chip
function _statChip(icon, num, label, trendCls) {
  // v2.119 — sama seperti _statCard: hanya trend-warn (Overdue,
  // data asli) yang tampil. Sebelumnya '↑' hardcode bahkan untuk
  // trend-warn, jadi Overdue mobile pernah tampil panah NAIK.
  var trendHtml = (trendCls === 'trend-warn' || trendCls === 'mob-trend-warn')
    ? '<div class="stat-chip-trend trend-warn">!</div>'
    : '';
  return (
    '<div class="stat-chip">' +
      '<div class="stat-chip-icon">' + icon + '</div>' +
      '<div class="stat-chip-num">' + escHtml(String(num)) + '</div>' +
      '<div class="stat-chip-label">' + escHtml(label) + '</div>' +
      trendHtml +
    '</div>'
  );
}

// Desktop course card
function _courseCardDesktop(c) {
  var pct     = c.progress_pct || 0;
  var pctW    = pct + '%';
  var btnLbl  = pct >= 100 ? 'Review' : pct > 0 ? 'Resume →' : 'Start →';
  var btnCls  = pct > 0 && pct < 100 ? 'resume' : '';
  var pctTxt  = pct >= 100 ? 'Completed ✓' : pct + '% complete';
  var pctTxtCls = pct >= 100 ? 'style="color:var(--green)"' : '';
  var isGeneral = c.is_general || (c.department || '').toLowerCase() === 'general';
  var badgeCls  = isGeneral ? 'tb-general' : 'tb-required';
  var badgeLbl  = isGeneral ? 'General' : 'Required';
  var courseId  = escHtml(c.course_id || '');
  return (
    '<div class="course-card" onclick="openCourseDetail(\'' + courseId + '\')" style="cursor:pointer">' +
      '<div class="course-thumb">' +
        '<div class="course-thumb-bg"></div>' +
        '<div class="course-thumb-icon">' + (c.icon || '📚') + '</div>' +
        '<div class="course-thumb-badge ' + badgeCls + '">' + badgeLbl + '</div>' +
      '</div>' +
      '<div class="course-progress-bar"><div class="course-progress-fill" style="width:' + pctW + '"></div></div>' +
      '<div class="course-body">' +
        '<div class="course-dept-tag">' + escHtml(c.dept_label || c.department || '—') + '</div>' +
        '<div class="course-title">' + escHtml(c.title) + '</div>' +
        '<div class="course-desc">' + escHtml(c.description || '') + '</div>' +
        '<div class="course-footer">' +
          '<div><div class="course-progress-text">Progress</div><div class="course-progress-pct" ' + pctTxtCls + '>' + pctTxt + '</div></div>' +
          '<button class="btn-course ' + btnCls + '" onclick="goTo(\'courses\')">' + btnLbl + '</button>' +
        '</div>' +
      '</div>' +
    '</div>'
  );
}

// Mobile course card
function _courseCardMobile(c) {
  var pct     = c.progress_pct || 0;
  var pctLbl  = pct >= 100 ? 'Completed ✓' : pct > 0 ? pct + '% complete' : 'Not started';
  var pctCls  = pct >= 100 ? 'cc-pct-done' : '';
  /* v2.98 — kartu mobile sebelumnya tidak punya onclick sama sekali, dan
     tombolnya memanggil goTo('courses') yaitu halaman yang sedang dibuka —
     jadi di HP tidak ada satupun cara masuk ke course. Sekarang disamakan
     dengan desktop: kartu dan tombol sama-sama membuka openCourseDetail(). */
  var cid     = String(c.course_id || '');
  var cidArg  = JSON.stringify(cid);
  var btnHtml = pct >= 100
    ? '<button class="btn-cc btn-cc-done" onclick="event.stopPropagation();openCourseDetail(' + escHtml(cidArg) + ')">View Course</button>'
    : pct > 0
    ? '<button class="btn-cc btn-cc-resume" onclick="event.stopPropagation();openCourseDetail(' + escHtml(cidArg) + ')">Resume →</button>'
    : '<button class="btn-cc btn-cc-start" onclick="event.stopPropagation();openCourseDetail(' + escHtml(cidArg) + ')">Start →</button>';
  var isGeneral = c.is_general || (c.department || '').toLowerCase() === 'general';
  var badgeCls  = isGeneral ? 'cb-general' : 'cb-required';
  var badgeLbl  = isGeneral ? 'General' : 'Required';
  return (
    '<div class="course-card-m" style="cursor:pointer" onclick="openCourseDetail(' + escHtml(cidArg) + ')">' +
      '<div class="cc-thumb">' +
        '<div class="cc-thumb-bg"></div>' +
        '<div class="cc-thumb-icon">' + (c.icon || '📚') + '</div>' +
        '<div class="cc-badge ' + badgeCls + '">' + badgeLbl + '</div>' +
      '</div>' +
      '<div class="cc-prog-bar"><div class="cc-prog-fill" style="width:' + pct + '%"></div></div>' +
      '<div class="cc-body">' +
        '<div class="cc-dept">' + escHtml(c.dept_label || c.department || '—') + '</div>' +
        '<div class="cc-title">' + escHtml(c.title) + '</div>' +
        '<div class="cc-footer">' +
          '<span class="cc-pct ' + pctCls + '">' + pctLbl + '</span>' +
          btnHtml +
        '</div>' +
      '</div>' +
    '</div>'
  );
}

/* ─── openCourseDetail — buka halaman detail course ─── */
function openCourseDetail(courseId) {
  if (!courseId) return;
  var cached = (_coursesCache || []).find(function(c) { return c.course_id === courseId; });
  window._currentCourse = cached || { course_id: courseId };
  goTo('course-detail');
}

/* ══════════════════════════════════════════════════════════════
   BATCH 3 — HoD Pages JS
══════════════════════════════════════════════════════════════ */

function applyUserToHoDPages(user) {
  if (!user) return;
  var initials = getInitials(user.full_name);
  var subLabel = (user.dept || '') + ' · Head of Department';
  var hodPages = ['hod-dashboard','hod-staff','hod-assign','hod-reports'];
  hodPages.forEach(function(p) {
    var s = function(id, val) { var el = document.getElementById(id); if (el) el.textContent = val; };
    s('sb-avatar-'    + p, initials);
    s('sb-name-'      + p, user.full_name);
    s('sb-role-'      + p, subLabel);
    s('topbar-avatar-'+ p, initials);
    var src = document.getElementById('d-sidebar-nav');
    var dst = document.getElementById('d-sidebar-nav-' + p);
    if (src && dst) {
      dst.innerHTML = src.innerHTML;
      dst.querySelectorAll('.nav-item[data-page]').forEach(function(item) {
        var pg = item.getAttribute('data-page');
        if (pg) item.onclick = function() { goTo(pg); };
      });
      dst.querySelectorAll('.nav-item[data-page=""]').forEach(function(item) {
        item.onclick = signOut;
      });
    }
    var bnav = document.getElementById('m-bottom-nav-' + p);
    if (bnav) {
      var items = BNAV_CONFIG['hod'] || [];
      bnav.innerHTML = '';
      items.forEach(function(it) {
        var div = document.createElement('div');
        div.className = 'bnav-item' + (it.page === p ? ' active' : '');
        div.setAttribute('data-page', it.page);
        div.innerHTML = '<div class="bnav-icon">' + it.icon + '</div><div class="bnav-label">' + it.label + '</div>';
        div.addEventListener('click', function() { goTo(it.page); });
        bnav.appendChild(div);
      });
    }
  });
  var dept = user.dept || 'Dept';
  var setTxt = function(id, val) { var el = document.getElementById(id); if (el) el.textContent = val; };
  setTxt('d-hod-staff-title',   'My Team — ' + dept);
  setTxt('d-hod-reports-title', 'Dept Reports — ' + dept);
  setTxt('m-hod-staff-title',   'My Team — ' + dept);
  setTxt('m-hod-reports-title', 'Dept Reports — ' + dept);
}

function loadHoDDashboard() {
  if (!_lmsUser) return;
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) return;
  var cD = document.getElementById('d-hod-dashboard-content');
  var cM = document.getElementById('m-hod-dashboard-content');
  if (cD) cD.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>';
  if (cM) cM.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>';
  google.script.run
    .withSuccessHandler(function(r) {
      if (!r) return;
      if (!r.success) { showToast(r.message || 'Error'); return; }
      // Transform GAS getHoDReport data ke format renderHoDDashboard
      // GAS: { dept, total_staff, staff_list, completion_rate, generated_at }
      var d         = r.data || {};
      var staffList = d.staff_list || [];
      var certsTotal = 0;
      staffList.forEach(function(u) { certsTotal += (u.total_certs || 0); });
      var overdueCount = staffList.filter(function(u) { return (u.completed_courses || 0) === 0; }).length;
      // teamPreview: ambil max 5, pakai completed_courses sebagai indikator
      var teamPreview = staffList.slice(0, 5).map(function(u) {
        return {
          user_id       : u.user_id,
          full_name     : u.full_name,
          completion_pct: u.completed_courses > 0 ? 100 : 0,
          avg_score     : null
        };
      });
      renderHoDDashboard({
        dept       : d.dept || '',
        stats      : {
          totalStaff   : d.total_staff || staffList.length,
          completionPct: d.completion_rate || 0,
          certsIssued  : certsTotal,
          overdue      : overdueCount
        },
        teamPreview: teamPreview,
        deadlines  : []
      });
    })
    .withFailureHandler(function(e) { showToast('Connection error.'); console.error(e); })
    .getHoDReport(sid, _lmsUser.user_id);
}

function renderHoDDashboard(data) {
  if (!data) return;
  var dept    = data.dept    || (_lmsUser && _lmsUser.dept) || 'Dept';
  var stats   = data.stats   || {};
  var team    = data.teamPreview || [];
  var deadlines = data.deadlines || [];
  var h       = new Date().getHours();
  var greeting = h < 12 ? 'Good Morning' : h < 17 ? 'Good Afternoon' : 'Good Evening';

  var cD = document.getElementById('d-hod-dashboard-content');
  if (cD) {
    var welcomeHtml =
      '<div class="welcome-bar" style="margin-bottom:24px"><div class="welcome-bar-bg"></div>' +
      '<div class="welcome-bar-left"><div class="welcome-greeting">' + greeting + '</div>' +
      '<div class="welcome-name">' + escHtml(_lmsUser ? _lmsUser.full_name : '') + '</div>' +
      '<div class="welcome-sub">' + escHtml(dept) + ' &nbsp;·&nbsp; Head of Department</div></div>' +
      '<div class="welcome-bar-right"><div class="welcome-date d-date">—</div><div class="welcome-time d-clock">—</div></div></div>';

    var aiHtml = data.aiSummary
      ? '<div class="ai-card"><div class="ai-card-header"><div class="ai-card-icon">🤖</div><div class="ai-card-label">AI Intelligence — ' + escHtml(dept) + '</div><div class="ai-card-badge">Gemini</div></div><div class="ai-summary">' + escHtml(data.aiSummary) + '</div></div>'
      : '';

    var statsHtml =
      '<div class="stats-grid-1" style="margin-bottom:28px">' +
      _statCard('👥','ic-gold',  stats.totalStaff    || 0, 'My Team',        escHtml(dept), '') +
      _statCard('✅','ic-green', (stats.completionPct || 0) + '%', 'Completion Rate', 'company-wide', 'trend-up') +
      _statCard('🏆','ic-gold',  stats.certsIssued   || 0, 'Certs Issued',   'this year', 'trend-up') +
      _statCard('⚠️','ic-red',   stats.overdue       || 0, 'Overdue',        'require follow-up', stats.overdue > 0 ? 'trend-warn' : '') +
      '</div>';

    var teamRows = '';
    team.slice(0, 5).forEach(function(s) {
      var pct = s.completion_pct || 0;
      var flgCls = pct >= 80 ? 'flag-normal' : pct >= 40 ? 'flag-warning' : 'flag-critical';
      var flgTxt = pct >= 80 ? '✓ On Track'  : pct >= 40 ? '⚠ At Risk'   : '🚨 Overdue';
      teamRows += '<tr><td><div class="user-cell"><div class="user-av ' + _avtCls(s.user_id) + '">' + escHtml(getInitials(s.full_name)) + '</div><div><div class="u-name">' + escHtml(s.full_name) + '</div></div></div></td>' +
        '<td><div class="prog-mini"><div class="prog-bar-d"><div class="prog-fill-d" style="width:' + pct + '%"></div></div><span class="prog-pct-d">' + pct + '%</span></div></td>' +
        '<td style="color:var(--gold);font-weight:700">' + (s.avg_score != null ? s.avg_score + '%' : '—') + '</td>' +
        '<td><span class="log-flag ' + flgCls + '">' + flgTxt + '</span></td></tr>';
    });
    if (!teamRows) teamRows = '<tr><td colspan="4" style="text-align:center;padding:24px;color:var(--gray-400)">No team data yet.</td></tr>';

    var teamCard = '<div class="card" style="margin-bottom:16px"><div class="card-header"><span class="card-title">My Team Progress</span><span class="card-action" onclick="goTo(\'hod-staff\')">View All →</span></div>' +
      '<div class="table-wrap"><table class="mgmt-table"><thead><tr><th>Staff</th><th>Completion</th><th>Avg Score</th><th>Status</th></tr></thead><tbody>' + teamRows + '</tbody></table></div></div>';

    var dlRows = deadlines.length === 0
      ? '<div style="padding:20px 24px;text-align:center;color:var(--gray-400);font-size:13px">No upcoming deadlines 🎉</div>'
      : deadlines.slice(0, 4).map(function(d) {
          var clr = d.days_left <= 7 ? 'var(--red)' : d.days_left <= 14 ? 'var(--amber)' : 'var(--green)';
          var lbl = d.days_left <= 0 ? 'Overdue!' : d.days_left + ' days';
          return '<div style="display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid var(--gray-50)"><div><div style="font-size:13.5px;font-weight:600">' + escHtml(d.title) + '</div><div style="font-size:12px;color:var(--gray-400)">' + escHtml(d.note || '') + '</div></div><span style="font-size:12px;font-weight:700;color:' + clr + '">' + lbl + '</span></div>';
        }).join('');
    var dlCard = '<div class="card"><div class="card-header"><span class="card-title">Upcoming Deadlines</span></div>' + dlRows + '</div>';

    cD.innerHTML = welcomeHtml + aiHtml + statsHtml + '<div class="dash-grid">' + teamCard + dlCard + '</div>';
    updateClock();
  }

  var cM = document.getElementById('m-hod-dashboard-content');
  if (cM) {
    var heroHtml = '<div class="dash-hero"><div class="dash-hero-bg"></div><div class="dash-hero-top" style="position:relative;z-index:1"><div>' +
      '<div class="dash-greeting">' + greeting + '</div><div class="dash-name">' + escHtml(_lmsUser ? _lmsUser.full_name : '') + '</div><div class="dash-role-tag">' + escHtml(dept) + ' · HoD</div></div>' +
      '<div><div class="dash-time m-clock">—</div><div class="dash-date m-date">—</div></div></div></div>';
    var mStats = '<div class="stats-scroll">' +
      _statChip('👥', stats.totalStaff || 0, 'Team', '') +
      _statChip('✅', (stats.completionPct || 0) + '%', 'Done', 'mob-trend-up') +
      _statChip('🏆', stats.certsIssued || 0, 'Certs', 'mob-trend-up') +
      _statChip('⚠️', stats.overdue || 0, 'Overdue', stats.overdue > 0 ? 'mob-trend-warn' : '') +
      '</div>';
    var mTeam = team.slice(0, 4).map(function(s) {
      var pct = s.completion_pct || 0;
      var bc = pct >= 80 ? 'tmb-ok' : pct >= 40 ? 'tmb-warn' : 'tmb-bad';
      var bl = pct >= 80 ? 'OK' : pct >= 40 ? 'Risk' : 'Late';
      return '<div class="team-item-m" onclick="goTo(\'hod-staff\')"><div class="tm-av ' + _avtCls(s.user_id) + '">' + escHtml(getInitials(s.full_name)) + '</div>' +
        '<div class="tm-info"><div class="tm-name">' + escHtml(s.full_name) + '</div><div class="tm-bar-wrap"><div class="tm-bar-bg"><div class="tm-bar-fill" style="width:' + pct + '%"></div></div><span class="tm-pct">' + pct + '%</span></div></div>' +
        '<span class="tm-badge ' + bc + '">' + bl + '</span></div>';
    }).join('') || '<div style="padding:20px;text-align:center;color:var(--gray-400)">No data.</div>';

    cM.innerHTML = heroHtml + mStats +
      '<div class="section-header"><span class="section-title">Team Progress</span><span class="section-action" onclick="goTo(\'hod-staff\')">All →</span></div>' +
      '<div style="padding:0 16px;display:flex;flex-direction:column;gap:10px">' + mTeam + '</div><div style="height:20px"></div>';
    updateClock();
  }
  injectAICard('d-hod-dashboard-content', 'hod', (_lmsUser && _lmsUser.dept) || 'Department');
}

function loadHoDTeam() {
  if (!_lmsUser) return;
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) return;
  var cD = document.getElementById('d-hod-staff-content');
  var cM = document.getElementById('m-hod-staff-content');
  if (cD) cD.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading team...</div></div>';
  if (cM) cM.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>';
  google.script.run
    .withSuccessHandler(function(r) {
      if (!r) return;
      if (!r.success) { showToast(r.message || 'Error'); return; }
      // GAS getHoDTeam return array langsung
      // Transform ke { dept, staff, stats } yang renderHoDTeam butuhkan
      var rawArr = Array.isArray(r.data) ? r.data : [];
      var staff  = rawArr.map(function(u) {
        var prog   = u.course_progress || [];
        var avgPct = prog.length > 0
          ? Math.round(prog.reduce(function(s, c) { return s + (c.progress_pct || 0); }, 0) / prog.length)
          : 0;
        return {
          user_id       : u.user_id,
          full_name     : u.full_name,
          role          : u.role,
          status        : u.status,
          completion_pct: avgPct,
          avg_score     : null,
          overdue_count : avgPct === 0 ? 1 : 0
        };
      });
      var onTrack = staff.filter(function(s) { return s.completion_pct >= 80; }).length;
      var overdue = staff.filter(function(s) { return s.completion_pct < 40; }).length;
      var trainee = staff.filter(function(s) { return s.role === 'TRAINEE'; }).length;
      renderHoDTeam({
        dept : _lmsUser ? (_lmsUser.dept || '') : '',
        staff: staff,
        stats: { total: staff.length, onTrack: onTrack, overdue: overdue, trainee: trainee }
      });
    })
    .withFailureHandler(function(e) { showToast('Connection error.'); console.error(e); })
    .getHoDTeam(sid, _lmsUser.user_id);
}

function renderHoDTeam(data) {
  if (!data) return;
  var dept  = data.dept  || '';
  var staff = data.staff || [];
  var stats = data.stats || {};
  window._hodStaffCache = staff;

  var cD = document.getElementById('d-hod-staff-content');
  if (cD) {
    var miniRow = '<div class="stat-mini-row">' +
      '<div class="stat-mini"><div class="stat-mini-icon ic-gold">👥</div><div><div class="stat-mini-num">' + (stats.total||0) + '</div><div class="stat-mini-lbl">Total Staff</div></div></div>' +
      '<div class="stat-mini"><div class="stat-mini-icon ic-green">✅</div><div><div class="stat-mini-num" style="color:var(--green)">' + (stats.onTrack||0) + '</div><div class="stat-mini-lbl">On Track</div></div></div>' +
      '<div class="stat-mini"><div class="stat-mini-icon ic-red">⚠️</div><div><div class="stat-mini-num" style="color:var(--red)">' + (stats.overdue||0) + '</div><div class="stat-mini-lbl">Overdue</div></div></div>' +
      '<div class="stat-mini"><div class="stat-mini-icon ic-blue">🎓</div><div><div class="stat-mini-num" style="color:var(--blue)">' + (stats.trainee||0) + '</div><div class="stat-mini-lbl">Trainee</div></div></div>' +
      '</div>';
    var toolbar = '<div class="mgmt-toolbar"><div class="mgmt-search"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg><input id="d-hod-staff-search" placeholder="Search staff..." oninput="filterHoDStaff()"></div>' +
      '<button class="mgmt-filter-pill active" onclick="setHoDStaffFilter(this,\'all\')">All</button>' +
      '<button class="mgmt-filter-pill" onclick="setHoDStaffFilter(this,\'on-track\')">On Track</button>' +
      '<button class="mgmt-filter-pill" onclick="setHoDStaffFilter(this,\'overdue\')">Overdue</button></div>';
    var rows = _buildHoDStaffRows(staff);
    var tableCard = '<div class="table-card"><div class="table-wrap"><table class="mgmt-table"><thead><tr><th>Staff</th><th>ID</th><th>Completion</th><th>Avg Score</th><th>Overdue</th><th>Status</th><th>Actions</th></tr></thead><tbody id="d-hod-staff-tbody">' + rows + '</tbody></table></div>' +
      '<div class="pagination"><div class="pagination-info">Showing ' + staff.length + ' staff</div></div></div>';
    cD.innerHTML = miniRow + toolbar + tableCard;
  }

  var cM = document.getElementById('m-hod-staff-content');
  if (cM) {
    var mStats = '<div class="stat-mini-scroll">' +
      '<div class="stat-chip-m"><div class="scm-icon">👥</div><div class="scm-num">' + (stats.total||0) + '</div><div class="scm-label">Total</div></div>' +
      '<div class="stat-chip-m"><div class="scm-icon">✅</div><div class="scm-num" style="color:var(--green)">' + (stats.onTrack||0) + '</div><div class="scm-label">On Track</div></div>' +
      '<div class="stat-chip-m"><div class="scm-icon">⚠️</div><div class="scm-num" style="color:var(--red)">' + (stats.overdue||0) + '</div><div class="scm-label">Overdue</div></div>' +
      '</div>';
    var mItems = staff.map(function(s) {
      var pct = s.completion_pct || 0;
      var bc = pct >= 80 ? 'tmb-ok' : pct >= 40 ? 'tmb-warn' : 'tmb-bad';
      var bl = pct >= 80 ? 'OK' : pct >= 40 ? 'Risk' : 'Late';
      return '<div class="team-item-m"><div class="tm-av ' + _avtCls(s.user_id) + '">' + escHtml(getInitials(s.full_name)) + '</div>' +
        '<div class="tm-info"><div class="tm-name">' + escHtml(s.full_name) + '</div><div class="tm-meta">' + escHtml(s.user_id||'') + '</div>' +
        '<div class="tm-bar-wrap"><div class="tm-bar-bg"><div class="tm-bar-fill" style="width:' + pct + '%"></div></div><span class="tm-pct">' + pct + '%</span></div></div>' +
        '<span class="tm-badge ' + bc + '">' + bl + '</span></div>';
    }).join('') || '<div style="text-align:center;padding:24px;color:var(--gray-400)">No staff.</div>';
    cM.innerHTML = mStats +
      '<div class="section-header"><span class="section-title">Team Members</span><span class="section-action">' + staff.length + ' staff</span></div>' +
      '<div style="padding:0 16px;display:flex;flex-direction:column;gap:10px">' + mItems + '</div><div style="height:20px"></div>';
  }
}

function _buildHoDStaffRows(staff) {
  if (!staff || staff.length === 0) return '<tr><td colspan="7" style="text-align:center;padding:24px;color:var(--gray-400)">No staff found.</td></tr>';
  return staff.map(function(s) {
    var pct = s.completion_pct || 0;
    var flgCls = pct >= 80 ? 'flag-normal' : pct >= 40 ? 'flag-warning' : 'flag-critical';
    var flgTxt = pct >= 80 ? '✓ On Track'  : pct >= 40 ? '⚠ At Risk'   : '🚨 Overdue';
    return '<tr><td><div class="user-cell"><div class="user-av ' + _avtCls(s.user_id) + '">' + escHtml(getInitials(s.full_name)) + '</div><div><div class="u-name">' + escHtml(s.full_name) + '</div></div></div></td>' +
      '<td style="font-family:monospace;font-size:12px">' + escHtml(s.user_id||'') + '</td>' +
      '<td><div class="prog-mini"><div class="prog-bar-d"><div class="prog-fill-d" style="width:' + pct + '%"></div></div><span class="prog-pct-d">' + pct + '%</span></div></td>' +
      '<td style="color:var(--gold);font-weight:700">' + (s.avg_score != null ? s.avg_score + '%' : '—') + '</td>' +
      '<td style="color:' + (s.overdue_count > 0 ? 'var(--red)' : 'var(--green)') + ';font-weight:700">' + (s.overdue_count||0) + '</td>' +
      '<td><span class="log-flag ' + flgCls + '">' + flgTxt + '</span></td>' +
      '<td><div class="action-btns"><button class="btn-tbl" onclick="goTo(\'hod-assign\')">📚 Assign</button></div></td></tr>';
  }).join('');
}

function setHoDStaffFilter(btn, filter) {
  document.querySelectorAll('#d-hod-staff .mgmt-filter-pill').forEach(function(b) { b.classList.remove('active'); });
  btn.classList.add('active');
  var staff = window._hodStaffCache || [];
  var rows = _buildHoDStaffRows(staff.filter(function(s) {
    if (filter === 'all') return true;
    var pct = s.completion_pct || 0;
    return filter === 'on-track' ? pct >= 80 : pct < 80;
  }));
  var tbody = document.getElementById('d-hod-staff-tbody');
  if (tbody) tbody.innerHTML = rows;
}

function filterHoDStaff() {
  var search = document.getElementById('d-hod-staff-search');
  var term   = search ? search.value.toLowerCase() : '';
  var staff  = window._hodStaffCache || [];
  var rows   = _buildHoDStaffRows(staff.filter(function(s) {
    return !term || (s.full_name || '').toLowerCase().indexOf(term) >= 0 || (s.user_id || '').toLowerCase().indexOf(term) >= 0;
  }));
  var tbody = document.getElementById('d-hod-staff-tbody');
  if (tbody) tbody.innerHTML = rows;
}

function loadHoDAssign() {
  if (!_lmsUser) return;
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) return;
  var cD = document.getElementById('d-hod-assign-content');
  var cM = document.getElementById('m-hod-assign-content');
  if (cD) cD.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>';
  if (cM) cM.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>';
  google.script.run
    .withSuccessHandler(function(r) { if (!r) return; if (!r.success) { showToast(r.message || 'Error'); return; } renderHoDAssign(r.data); })
    .withFailureHandler(function(e) { showToast('Connection error.'); console.error(e); })
    .getCourses(sid, _lmsUser.user_id, _lmsUser.role, _lmsUser.dept || '');
}

function renderHoDAssign(courses) {
  var dept = (_lmsUser && _lmsUser.dept) || 'My Dept';
  var opts = '<option value="">— Select Course —</option>';
  if (Array.isArray(courses)) {
    courses.forEach(function(c) { opts += '<option value="' + escHtml(c.course_id||'') + '">' + escHtml(c.title) + '</option>'; });
  }
  var cD = document.getElementById('d-hod-assign-content');
  if (cD) {
    cD.innerHTML =
      '<div class="card" style="margin-bottom:20px"><div class="card-header"><span class="card-title">Assign Course to ' + escHtml(dept) + ' Staff</span></div>' +
      '<div style="padding:20px 24px;display:grid;grid-template-columns:1fr 1fr;gap:16px">' +
        '<div><div style="font-size:11px;font-weight:700;color:var(--gray-500);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px">Select Course</div><select class="ss-select" id="d-assign-course" style="width:100%">' + opts + '</select></div>' +
        '<div><div style="font-size:11px;font-weight:700;color:var(--gray-500);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px">Deadline (optional)</div><input type="date" id="d-assign-deadline" class="ss-input" style="width:100%;height:38px;padding:0 12px"></div>' +
        '<div><div style="font-size:11px;font-weight:700;color:var(--gray-500);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px">Assign To</div>' +
          '<select class="ss-select" id="d-assign-target" style="width:100%"><option value="DEPARTMENT">All ' + escHtml(dept) + ' Staff</option></select></div>' +
        '<div style="display:flex;align-items:flex-end"><div style="display:flex;gap:10px">' +
          '<button style="height:40px;padding:0 24px;border-radius:10px;background:var(--gold);color:var(--black);border:none;font-family:Inter,sans-serif;font-size:13px;font-weight:700;cursor:pointer" onclick="submitHoDAssign()">Assign Course</button>' +
        '</div></div>' +
      '</div>' +
      '<div id="d-assign-msg" style="padding:0 24px 16px;font-size:13px;color:var(--green);display:none"></div></div>' +
      '<div class="card"><div class="card-header"><span class="card-title">About Assign Course</span></div>' +
      '<div style="padding:20px 24px;font-size:13.5px;color:var(--gray-500);line-height:1.7">• Hanya bisa assign ke staff departemen <strong>' + escHtml(dept) + '</strong>.<br>• Course General otomatis tersedia ke semua staff.<br>• Staff akan melihat course baru di My Courses mereka.</div></div>';
  }
  var cM = document.getElementById('m-hod-assign-content');
  if (cM) {
    cM.innerHTML =
      '<div class="mob-form-card">' +
        '<div style="font-family:Georgia,serif;font-size:18px;font-weight:700;color:var(--black);margin-bottom:4px">Assign Course</div>' +
        '<div style="font-size:12.5px;color:var(--gray-500);margin-bottom:20px">Assign to ' + escHtml(dept) + ' staff</div>' +
        '<label class="mob-form-label">Select Course</label><select class="mob-form-select" id="m-assign-course" style="margin-bottom:16px">' + opts + '</select>' +
        '<label class="mob-form-label">Deadline (optional)</label><input type="date" class="mob-form-input" id="m-assign-deadline" style="margin-bottom:20px">' +
        '<div id="m-assign-msg" style="font-size:13px;color:var(--green);margin-bottom:12px;display:none"></div>' +
      '</div>' +
      '<button class="btn-full btn-full-gold" onclick="submitHoDAssign()">✓ Assign Course</button>' +
      '<div style="height:16px"></div>';
  }
}

function submitHoDAssign() {
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) return;
  var isMob    = window.innerWidth < 900;
  var courseId = document.getElementById(isMob ? 'm-assign-course'   : 'd-assign-course').value;
  var deadline = document.getElementById(isMob ? 'm-assign-deadline' : 'd-assign-deadline').value;
  var msgEl    = document.getElementById(isMob ? 'm-assign-msg'      : 'd-assign-msg');
  if (!courseId) { showToast('Please select a course first.'); return; }
  var dept = (_lmsUser && _lmsUser.dept) || '';
  showLoading('Assigning course...', true);
  google.script.run
    .withSuccessHandler(function(r) {
      hideLoading();
      if (!r.success) { showToast(r.message || 'Failed to assign.'); return; }
      if (msgEl) { msgEl.textContent = '✓ Course successfully assigned to ' + dept + ' staff.'; msgEl.style.display = 'block'; }
      showToast('Course assigned successfully!');
    })
    .withFailureHandler(function(e) { hideLoading(); showToast('Connection error.'); console.error(e); })
    .assignCourse(sid, { course_id: courseId, assign_type: 'DEPT', assign_target: dept, deadline: deadline || '', notes: '' });
}

function loadHoDReports() {
  if (!_lmsUser) return;
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) return;
  var cD = document.getElementById('d-hod-reports-content');
  var cM = document.getElementById('m-hod-reports-content');
  if (cD) cD.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>';
  if (cM) cM.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>';
  google.script.run
    .withSuccessHandler(function(r) {
      if (!r) return;
      if (!r.success) { showToast(r.message || 'Error'); return; }
      // Transform GAS getDeptReport data ke format renderHoDReports
      // GAS: { dept, total_staff, staff_list, completion_rate, generated_at }
      var d         = r.data || {};
      var staffList = d.staff_list || [];
      var certsTotal = 0;
      staffList.forEach(function(u) { certsTotal += (u.total_certs || 0); });
      var overdueCount = staffList.filter(function(u) { return (u.completed_courses || 0) === 0; }).length;
      renderHoDReports({
        dept   : d.dept || '',
        summary: {
          completionPct: d.completion_rate  || 0,
          certsIssued  : certsTotal,
          avgScore     : 0,
          overdue      : overdueCount,
          totalStaff   : d.total_staff || staffList.length
        },
        courses: []
      });
    })
    .withFailureHandler(function(e) { showToast('Connection error.'); console.error(e); })
    .getDeptReport(sid, _lmsUser ? _lmsUser.dept : '');
}

function renderHoDReports(data) {
  if (!data) return;
  var dept    = data.dept    || '';
  var summary = data.summary || {};
  var courses = data.courses || [];

  var cD = document.getElementById('d-hod-reports-content');
  if (cD) {
    var aiHtml = data.aiAnalysis
      ? '<div class="ai-card"><div class="ai-card-header"><div class="ai-card-icon">🤖</div><div class="ai-card-label">AI Intelligence — ' + escHtml(dept) + '</div><div class="ai-card-badge">Gemini</div></div><div class="ai-summary">' + escHtml(data.aiAnalysis) + '</div></div>'
      : '';
    var sumHtml = '<div class="report-summary-grid" style="margin-bottom:24px">' +
      '<div class="rep-sum-card"><div class="rep-sum-num">' + (summary.completionPct||0) + '%</div><div class="rep-sum-label">Avg Completion</div></div>' +
      '<div class="rep-sum-card"><div class="rep-sum-num">' + (summary.certsIssued||0) + '</div><div class="rep-sum-label">Certs Issued</div></div>' +
      '<div class="rep-sum-card"><div class="rep-sum-num" style="color:var(--gold)">' + (summary.avgScore||0) + '%</div><div class="rep-sum-label">Avg Quiz Score</div></div>' +
      '<div class="rep-sum-card"><div class="rep-sum-num" style="color:var(--red)">' + (summary.overdue||0) + '</div><div class="rep-sum-label">Overdue</div></div>' +
      '<div class="rep-sum-card"><div class="rep-sum-num">' + (summary.totalStaff||0) + '</div><div class="rep-sum-label">Total Staff</div></div>' +
      '</div>';
    var rows = courses.length === 0
      ? '<tr><td colspan="6" style="text-align:center;padding:24px;color:var(--gray-400)">No data.</td></tr>'
      : courses.map(function(c) {
          var pct = c.completion_pct || 0;
          var flgCls = pct >= 80 ? 'flag-normal' : pct >= 50 ? 'flag-warning' : 'flag-critical';
          var flgTxt = pct >= 80 ? '✓ On Track'  : pct >= 50 ? '⚠ Review'    : '🚨 Critical';
          return '<tr><td style="font-weight:600">' + escHtml(c.title) + '</td><td>' + escHtml(c.dept||dept) + '</td>' +
            '<td><div class="prog-mini"><div class="prog-bar-d"><div class="prog-fill-d" style="width:' + pct + '%"></div></div><span class="prog-pct-d">' + pct + '%</span></div></td>' +
            '<td style="color:var(--gold);font-weight:700">' + (c.avg_score != null ? c.avg_score + '%' : '—') + '</td>' +
            '<td style="color:' + (c.overdue > 0 ? 'var(--red)' : 'var(--green)') + ';font-weight:700">' + (c.overdue||0) + '</td>' +
            '<td><span class="log-flag ' + flgCls + '">' + flgTxt + '</span></td></tr>';
        }).join('');
    cD.innerHTML = aiHtml + sumHtml +
      '<div class="card"><div class="card-header"><span class="card-title">Course Performance — ' + escHtml(dept) + '</span></div>' +
      '<div class="table-wrap"><table class="mgmt-table"><thead><tr><th>Course</th><th>Dept</th><th>Completion</th><th>Avg Score</th><th>Overdue</th><th>Status</th></tr></thead><tbody>' + rows + '</tbody></table></div></div>' +
      '<div id="d-hod-reports-ai-slot"></div>';
    // Inject AI card ke slot (non-blocking)
    setTimeout(function() { injectAICard('d-hod-reports-ai-slot', 'hod', dept); }, 100);
  }

  var cM = document.getElementById('m-hod-reports-content');
  if (cM) {
    var mStat = '<div class="stat-mini-scroll">' +
      '<div class="stat-chip-m"><div class="scm-icon">📊</div><div class="scm-num">' + (summary.completionPct||0) + '%</div><div class="scm-label">Completion</div></div>' +
      '<div class="stat-chip-m"><div class="scm-icon">🏆</div><div class="scm-num">' + (summary.certsIssued||0) + '</div><div class="scm-label">Certs</div></div>' +
      '<div class="stat-chip-m"><div class="scm-icon">⚠️</div><div class="scm-num" style="color:var(--red)">' + (summary.overdue||0) + '</div><div class="scm-label">Overdue</div></div>' +
      '</div>';
    var mItems = courses.map(function(c) {
      var pct = c.completion_pct || 0;
      var bc = pct >= 80 ? 'tmb-ok' : pct >= 50 ? 'tmb-warn' : 'tmb-bad';
      var bl = pct >= 80 ? 'Good' : pct >= 50 ? 'Review' : 'Critical';
      return '<div style="background:var(--white);border-radius:14px;border:1px solid var(--gray-100);padding:14px 16px">' +
        '<div style="font-size:13px;font-weight:600;margin-bottom:6px">' + escHtml(c.title) + '</div>' +
        '<div style="display:flex;align-items:center;gap:8px"><div style="flex:1;height:5px;background:var(--gray-100);border-radius:999px"><div style="width:' + pct + '%;height:100%;background:linear-gradient(90deg,var(--gold),#E8C97A);border-radius:999px"></div></div>' +
        '<span style="font-size:11px;font-weight:700;color:var(--gold)">' + pct + '%</span><span class="tm-badge ' + bc + '">' + bl + '</span></div></div>';
    }).join('') || '<div style="padding:20px;text-align:center;color:var(--gray-400)">No data.</div>';
    cM.innerHTML = mStat +
      '<div class="section-header"><span class="section-title">Course Performance</span></div>' +
      '<div style="padding:0 16px;display:flex;flex-direction:column;gap:10px">' + mItems + '</div><div style="height:20px"></div>';
  }
}

function _avtCls(userId) {
  if (!userId) return 'uav6';
  var n = 0;
  for (var i = 0; i < userId.length; i++) n += userId.charCodeAt(i);
  return 'uav' + ((n % 5) + 1);
}

/* ══════════════════════════════════════════════════════════════
   BATCH 4 — Observer Pages JS
   loadObserverDashboard, loadObserverReports,
   loadAIReport + render helpers
══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   applyUserToObserverPages — apply user info ke Observer shells
───────────────────────────────────────────────────────────── */
function applyUserToObserverPages(user) {
  if (!user) return;
  var initials = getInitials(user.full_name);
  var roleLabel = { GM:'General Manager', OWNER:'Owner / Director' }[user.role] || user.role;
  var obPages = ['observe-dashboard','observe-reports','aireport'];

  obPages.forEach(function(p) {
    var s = function(id, val) { var el = document.getElementById(id); if (el) el.textContent = val; };
    s('sb-avatar-'    + p, initials);
    s('sb-name-'      + p, user.full_name);
    s('sb-role-'      + p, roleLabel + ' · View Only');
    s('topbar-avatar-'+ p, initials);

    // Clone sidebar nav
    var src = document.getElementById('d-sidebar-nav');
    var dst = document.getElementById('d-sidebar-nav-' + p);
    if (src && dst) {
      dst.innerHTML = src.innerHTML;
      dst.querySelectorAll('.nav-item[data-page]').forEach(function(item) {
        var pg = item.getAttribute('data-page');
        if (pg) item.onclick = function() { goTo(pg); };
      });
      dst.querySelectorAll('.nav-item[data-page=""]').forEach(function(item) {
        item.onclick = signOut;
      });
    }

    // Build mobile bottom nav
    var bnav = document.getElementById('m-bottom-nav-' + p);
    if (bnav) {
      var items = BNAV_CONFIG['observer'] || [];
      bnav.innerHTML = '';
      items.forEach(function(it) {
        var div = document.createElement('div');
        div.className = 'bnav-item' + (it.page === p ? ' active' : '');
        div.setAttribute('data-page', it.page);
        div.innerHTML = '<div class="bnav-icon">' + it.icon + '</div><div class="bnav-label">' + it.label + '</div>';
        div.addEventListener('click', function() { goTo(it.page); });
        bnav.appendChild(div);
      });
    }
  });
}

/* ─────────────────────────────────────────────────────────────
   loadObserverDashboard — panggil getObserverDashboard()
───────────────────────────────────────────────────────────── */
function loadObserverDashboard() {
  if (!_lmsUser) return;
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) return;
  var cD = document.getElementById('d-observe-dashboard-content');
  var cM = document.getElementById('m-observe-dashboard-content');
  if (cD) cD.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>';
  if (cM) cM.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>';
  google.script.run
    .withSuccessHandler(function(r) {
      if (!r) return;
      if (!r.success) { showToast(r.message || 'Error'); return; }
      // Transform GAS getObserverDashboard ke format renderObserverDashboard
      var d    = r.data || {};
      var sc   = d.stats || {};
      var dbs  = d.dept_breakdown || [];
      // Map dept_breakdown ke format depts yang render butuhkan
      var depts = dbs.map(function(db) {
        return {
          dept          : db.dept,
          staff_count   : db.total_staff,
          completion_pct: db.avg_progress_pct || 0,
          certs_issued  : 0,
          pass_rate     : 0,
          overdue       : 0
        };
      });
      renderObserverDashboard({
        stats: {
          totalEmployees : sc.active_users       || 0,
          totalCourses   : sc.total_courses      || 0,
          publishedCourses: sc.published_courses || 0,
          completionPct  : sc.overall_completion || 0,
          totalCerts     : sc.total_certs        || 0,
          totalDepts     : depts.length
        },
        depts     : depts,
        highlights: {},
        recent_certs: d.recent_certs || []
      });
    })
    .withFailureHandler(function(e) { showToast('Connection error.'); console.error(e); })
    .getObserverDashboard(sid);
}

/* ─────────────────────────────────────────────────────────────
   renderObserverDashboard
   data: { stats{}, depts[], highlights{}, aiSummary }
   View-only — semua action button dihidden
───────────────────────────────────────────────────────────── */
function renderObserverDashboard(data) {
  if (!data) return;
  var stats  = data.stats  || {};
  var depts  = data.depts  || [];
  var hl     = data.highlights || {};
  var h      = new Date().getHours();
  var greeting = h < 12 ? 'Good Morning' : h < 17 ? 'Good Afternoon' : 'Good Evening';
  var roleLabel = _lmsUser ? ({ GM:'General Manager', OWNER:'Owner / Director' }[_lmsUser.role] || _lmsUser.role) : '';

  // ── DESKTOP ──
  var cD = document.getElementById('d-observe-dashboard-content');
  if (cD) {
    var welcomeHtml =
      '<div class="welcome-bar" style="margin-bottom:24px"><div class="welcome-bar-bg"></div>' +
      '<div class="welcome-bar-left"><div class="welcome-greeting">' + greeting + '</div>' +
      '<div class="welcome-name">' + escHtml(_lmsUser ? _lmsUser.full_name : '') + '</div>' +
      '<div class="welcome-sub">' + escHtml(roleLabel) + ' &nbsp;·&nbsp; Miss Fish Bali &nbsp;·&nbsp; <span style="color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase">View Only</span></div></div>' +
      '<div class="welcome-bar-right"><div class="welcome-date d-date">—</div><div class="welcome-time d-clock">—</div></div></div>';

    // AI card
    var aiHtml = data.aiSummary
      ? '<div class="ai-card"><div class="ai-card-header"><div class="ai-card-icon">🤖</div><div class="ai-card-label">AI Intelligence — Weekly Summary</div><div class="ai-card-badge">Gemini 3.5 Flash Lite</div></div><div class="ai-summary">' + escHtml(data.aiSummary) + '</div></div>'
      : '';

    // Stat cards row 1 (4 cards)
    var stats1 =
      '<div class="stats-grid-1" style="margin-bottom:16px">' +
      _statCard('👥','ic-gold',  stats.totalEmployees || 0, 'Total Employees',   (stats.totalDepts || 0) + ' departments', '') +
      _statCard('📚','ic-black', stats.totalCourses   || 0, 'Total Courses',     (stats.publishedCourses || 0) + ' published', '') +
      _statCard('✅','ic-green', (stats.completionPct || 0) + '%', 'Completion Rate', 'company-wide', 'trend-up') +
      _statCard('🏆','ic-gold',  stats.certsIssued    || 0, 'Certificates Issued', 'this year', 'trend-up') +
      '</div>';

    // Stat cards row 2 (3 cards)
    var stats2 =
      '<div class="stats-grid-2" style="margin-bottom:28px">' +
      _statCard('🎬','ic-blue',  stats.videoHours || 0, 'Video Hours Watched', 'this month', '') +
      _statCard('⚠️','ic-red',   stats.overdue    || 0, 'Overdue Trainings',   'require action', stats.overdue > 0 ? 'trend-warn' : '') +
      _statCard('🎓','ic-blue',  stats.trainees   || 0, 'Active Trainees',      'from partner schools', '') +
      '</div>';

    // Dept overview table — no action buttons
    var deptRows = depts.length === 0
      ? '<tr><td colspan="5" style="text-align:center;padding:24px;color:var(--gray-400)">No department data.</td></tr>'
      : depts.map(function(d) {
          var pct    = d.completion_pct || 0;
          var flgCls = pct >= 80 ? 'flag-normal' : pct >= 50 ? 'flag-warning' : 'flag-critical';
          var flgTxt = pct >= 80 ? '✓ On Track'  : pct >= 50 ? '⚠ Review'    : '🚨 Critical';
          return '<tr><td style="font-weight:600">' + escHtml(d.dept) + '</td><td>' + (d.staff_count || 0) + '</td>' +
            '<td><div class="prog-mini"><div class="prog-bar-d"><div class="prog-fill-d" style="width:' + pct + '%"></div></div><span class="prog-pct-d">' + pct + '%</span></div></td>' +
            '<td style="color:' + (d.overdue > 0 ? 'var(--red)' : 'var(--green)') + ';font-weight:700">' + (d.overdue || 0) + '</td>' +
            '<td><span class="log-flag ' + flgCls + '">' + flgTxt + '</span></td></tr>';
        }).join('');

    var deptCard =
      '<div class="card" style="margin-bottom:16px"><div class="card-header"><span class="card-title">Department Overview</span></div>' +
      '<div class="table-wrap"><table class="mgmt-table"><thead><tr><th>Department</th><th>Staff</th><th>Completion</th><th>Overdue</th><th>Status</th></tr></thead><tbody>' + deptRows + '</tbody></table></div></div>';

    // Highlights card
    var hlHtml =
      '<div class="card"><div class="card-header"><span class="card-title">Training Highlights</span></div>' +
      '<div style="padding:0 20px 16px">' +
        '<div style="padding:12px 0;border-bottom:1px solid var(--gray-50)"><div style="font-size:12px;color:var(--gray-400);margin-bottom:4px">Top Performing Dept</div><div style="font-size:14px;font-weight:700;color:var(--black)">🟢 ' + escHtml(hl.topDept || '—') + '</div></div>' +
        '<div style="padding:12px 0;border-bottom:1px solid var(--gray-50)"><div style="font-size:12px;color:var(--gray-400);margin-bottom:4px">Needs Attention</div><div style="font-size:14px;font-weight:700;color:var(--red)">🔴 ' + escHtml(hl.attentionDept || '—') + '</div></div>' +
        '<div style="padding:12px 0"><div style="font-size:12px;color:var(--gray-400);margin-bottom:4px">Certificates This Month</div><div style="font-size:14px;font-weight:700;color:var(--black)">' + (hl.certsThisMonth || 0) + ' certificates issued</div></div>' +
      '</div></div>';

    cD.innerHTML = welcomeHtml + aiHtml + stats1 + stats2 +
      '<div class="dash-grid">' + deptCard + hlHtml + '</div>';
    updateClock();
  }

  // ── MOBILE ──
  var cM = document.getElementById('m-observe-dashboard-content');
  if (cM) {
    var heroHtml = '<div class="dash-hero"><div class="dash-hero-bg"></div><div class="dash-hero-top" style="position:relative;z-index:1"><div>' +
      '<div class="dash-greeting">' + greeting + '</div><div class="dash-name">' + escHtml(_lmsUser ? _lmsUser.full_name : '') + '</div>' +
      '<div class="dash-role-tag">' + escHtml(roleLabel) + ' · View Only</div></div>' +
      '<div><div class="dash-time m-clock">—</div><div class="dash-date m-date">—</div></div></div></div>';

    var mStats = '<div class="stats-scroll">' +
      _statChip('👥', stats.totalEmployees || 0,       'Staff',      '') +
      _statChip('✅', (stats.completionPct || 0) + '%','Completion', 'mob-trend-up') +
      _statChip('🏆', stats.certsIssued || 0,          'Certs',      'mob-trend-up') +
      _statChip('⚠️', stats.overdue || 0,              'Overdue',    stats.overdue > 0 ? 'mob-trend-warn' : '') +
      '</div>';

    var mDepts = depts.map(function(d) {
      var pct = d.completion_pct || 0;
      var bc  = pct >= 80 ? 'tmb-ok' : pct >= 50 ? 'tmb-warn' : 'tmb-bad';
      var bl  = pct >= 80 ? 'Good' : pct >= 50 ? 'Review' : 'Critical';
      return '<div style="background:var(--white);border-radius:14px;border:1px solid var(--gray-100);padding:14px 16px">' +
        '<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px">' +
          '<div style="font-size:13px;font-weight:600">' + escHtml(d.dept) + '</div>' +
          '<span class="tm-badge ' + bc + '">' + bl + '</span>' +
        '</div>' +
        '<div style="display:flex;align-items:center;gap:8px"><div style="flex:1;height:5px;background:var(--gray-100);border-radius:999px">' +
          '<div style="width:' + pct + '%;height:100%;background:linear-gradient(90deg,var(--gold),#E8C97A);border-radius:999px"></div></div>' +
          '<span style="font-size:11px;font-weight:700;color:var(--gold)">' + pct + '%</span>' +
        '</div>' +
      '</div>';
    }).join('') || '<div style="padding:20px;text-align:center;color:var(--gray-400)">No data.</div>';

    cM.innerHTML = heroHtml + mStats +
      '<div class="section-header"><span class="section-title">Department Overview</span><span class="section-action" onclick="goTo(\'observe-reports\')">Full Report →</span></div>' +
      '<div style="padding:0 16px;display:flex;flex-direction:column;gap:10px">' + mDepts + '</div>' +
      '<div style="height:20px"></div>';
    updateClock();
  }
}

/* ─────────────────────────────────────────────────────────────
   loadObserverReports — panggil getReportSummary()
───────────────────────────────────────────────────────────── */
function loadObserverReports() {
  if (!_lmsUser) return;
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) return;
  var cD = document.getElementById('d-observe-reports-content');
  var cM = document.getElementById('m-observe-reports-content');
  if (cD) cD.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>';
  if (cM) cM.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>';
  google.script.run
    .withSuccessHandler(function(r) {
      if (!r) return;
      if (!r.success) { showToast(r.message || 'Error'); return; }
      // Transform GAS getReportSummary ke format renderObserverReports
      var d   = r.data || {};
      var dbs = d.dept_breakdown || [];
      // Hitung overall completion dari dept_breakdown
      var totalPct = 0;
      dbs.forEach(function(db) { totalPct += (db.avg_progress_pct || 0); });
      var overallPct = dbs.length > 0 ? Math.round(totalPct / dbs.length) : 0;
      // Map dept_breakdown ke format depts yang render butuhkan
      var depts = dbs.map(function(db) {
        return {
          dept          : db.dept,
          staff_count   : db.total_staff,
          completion_pct: db.avg_progress_pct || 0,
          certs_issued  : 0,
          pass_rate     : 0,
          overdue       : 0,
          video_hours   : 0
        };
      });
      renderObserverReports({
        summary: {
          completionPct: overallPct,
          certsIssued  : d.total_certs_issued   || 0,
          passRate     : 0,
          overdue      : d.overdue_assignments   || 0,
          videoHours   : 0
        },
        depts: depts
      });
    })
    .withFailureHandler(function(e) { showToast('Connection error.'); console.error(e); })
    .getReportSummary(sid);
}

/* ─────────────────────────────────────────────────────────────
   renderObserverReports
   data: { summary{}, depts[], aiAnalysis }
   View-only — no Export button
───────────────────────────────────────────────────────────── */
function renderObserverReports(data) {
  if (!data) return;
  var summary = data.summary || {};
  var depts   = data.depts   || [];

  // ── DESKTOP ──
  var cD = document.getElementById('d-observe-reports-content');
  if (cD) {
    var aiHtml = data.aiAnalysis
      ? '<div class="ai-card"><div class="ai-card-header"><div class="ai-card-icon">🤖</div><div class="ai-card-label">AI Intelligence — Department Analysis</div><div class="ai-card-badge">Gemini 3.5 Flash Lite</div></div><div class="ai-summary">' + escHtml(data.aiAnalysis) + '</div></div>'
      : '';

    var sumHtml = '<div class="report-summary-grid" style="margin-bottom:24px">' +
      '<div class="rep-sum-card"><div class="rep-sum-num">' + (summary.completionPct || 0) + '%</div><div class="rep-sum-label">Avg Completion</div></div>' +
      '<div class="rep-sum-card"><div class="rep-sum-num">' + (summary.certsIssued || 0) + '</div><div class="rep-sum-label">Certs Issued</div></div>' +
      '<div class="rep-sum-card"><div class="rep-sum-num" style="color:var(--green)">' + (summary.passRate || 0) + '%</div><div class="rep-sum-label">Pass Rate</div></div>' +
      '<div class="rep-sum-card"><div class="rep-sum-num" style="color:var(--red)">' + (summary.overdue || 0) + '</div><div class="rep-sum-label">Overdue</div></div>' +
      '<div class="rep-sum-card"><div class="rep-sum-num">' + (summary.videoHours || 0) + 'h</div><div class="rep-sum-label">Video Watched</div></div>' +
      '</div>';

    var rows = depts.length === 0
      ? '<tr><td colspan="7" style="text-align:center;padding:24px;color:var(--gray-400)">No data.</td></tr>'
      : depts.map(function(d) {
          var pct    = d.completion_pct || 0;
          var flgCls = pct >= 80 ? 'flag-normal' : pct >= 50 ? 'flag-warning' : 'flag-critical';
          var flgTxt = pct >= 80 ? '✓ On Track'  : pct >= 50 ? '⚠ Review'    : '🚨 Critical';
          return '<tr><td style="font-weight:600">' + escHtml(d.dept) + '</td><td>' + (d.staff_count || 0) + '</td>' +
            '<td><div class="course-prog-bar-d"><div class="cpb-bg"><div class="cpb-fill" style="width:' + pct + '%"></div></div><span class="cpb-pct">' + pct + '%</span></div></td>' +
            '<td style="color:var(--gold);font-weight:700">' + (d.avg_score != null ? d.avg_score + '%' : '—') + '</td>' +
            '<td>' + (d.certs_issued || 0) + '</td>' +
            '<td style="color:' + (d.overdue > 0 ? 'var(--red)' : 'var(--green)') + ';font-weight:700">' + (d.overdue || 0) + '</td>' +
            '<td><span class="log-flag ' + flgCls + '">' + flgTxt + '</span></td></tr>';
        }).join('');

    // No Export button — view only
    var tableCard = '<div class="card"><div class="card-header"><span class="card-title">Department Summary</span></div>' +
      '<div class="table-wrap"><table class="mgmt-table"><thead><tr><th>Department</th><th>Staff</th><th>Completion</th><th>Avg Score</th><th>Certs</th><th>Overdue</th><th>Status</th></tr></thead>' +
      '<tbody>' + rows + '</tbody></table></div></div>';

    cD.innerHTML = aiHtml + sumHtml + tableCard;
  }

  // ── MOBILE ──
  var cM = document.getElementById('m-observe-reports-content');
  if (cM) {
    var mStat = '<div class="stat-mini-scroll">' +
      '<div class="stat-chip-m"><div class="scm-icon">📊</div><div class="scm-num">' + (summary.completionPct || 0) + '%</div><div class="scm-label">Completion</div></div>' +
      '<div class="stat-chip-m"><div class="scm-icon">🏆</div><div class="scm-num">' + (summary.certsIssued || 0) + '</div><div class="scm-label">Certs</div></div>' +
      '<div class="stat-chip-m"><div class="scm-icon">✅</div><div class="scm-num" style="color:var(--green)">' + (summary.passRate || 0) + '%</div><div class="scm-label">Pass Rate</div></div>' +
      '<div class="stat-chip-m"><div class="scm-icon">⚠️</div><div class="scm-num" style="color:var(--red)">' + (summary.overdue || 0) + '</div><div class="scm-label">Overdue</div></div>' +
      '</div>';
    var mItems = depts.map(function(d) {
      var pct = d.completion_pct || 0;
      var bc  = pct >= 80 ? 'tmb-ok' : pct >= 50 ? 'tmb-warn' : 'tmb-bad';
      var bl  = pct >= 80 ? 'Good' : pct >= 50 ? 'Review' : 'Critical';
      return '<div style="background:var(--white);border-radius:14px;border:1px solid var(--gray-100);padding:14px 16px">' +
        '<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px"><div style="font-size:13px;font-weight:600">' + escHtml(d.dept) + '</div><span class="tm-badge ' + bc + '">' + bl + '</span></div>' +
        '<div style="display:flex;align-items:center;gap:8px"><div style="flex:1;height:5px;background:var(--gray-100);border-radius:999px"><div style="width:' + pct + '%;height:100%;background:linear-gradient(90deg,var(--gold),#E8C97A);border-radius:999px"></div></div>' +
        '<span style="font-size:11px;font-weight:700;color:var(--gold)">' + pct + '%</span></div>' +
        '<div style="font-size:11px;color:var(--gray-500);margin-top:6px">' + (d.staff_count || 0) + ' staff · ' + (d.certs_issued || 0) + ' certs · ' + (d.overdue || 0) + ' overdue</div></div>';
    }).join('') || '<div style="padding:20px;text-align:center;color:var(--gray-400)">No data.</div>';
    cM.innerHTML = mStat +
      '<div class="section-header"><span class="section-title">Department Summary</span></div>' +
      '<div style="padding:0 16px;display:flex;flex-direction:column;gap:10px">' + mItems + '</div>' +
      '<div style="height:20px"></div>';
  }
}

/* ─────────────────────────────────────────────────────────────
   loadAIReport — entry point halaman AI Report
   v2.60: tampilkan list view dulu, klik item → detail view
   Shared antara Observer dan Admin
───────────────────────────────────────────────────────────── */

// State: tanggal filter yang aktif di list view
var _airDateFrom = null;
var _airDateTo   = null;

function loadAIReport() {
  if (!_lmsUser) return;
  // Setiap masuk ke halaman AI Report, reset ke list view
  _airDateFrom = null;
  _airDateTo   = null;
  _loadAIReportList(null, null);
}

/* ─── _loadAIReportList — fetch dan render list view ─── */
function _loadAIReportList(dateFrom, dateTo) {
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) return;
  var cD = document.getElementById('d-aireport-content');
  var cM = document.getElementById('m-aireport-content');
  if (cD) cD.innerHTML = _loader('Loading AI reports...');
  if (cM) cM.innerHTML = _loader('Loading AI reports...');

  google.script.run
    .withSuccessHandler(function(r) {
      if (!r || !r.success) { _renderAIReportListEmpty(); return; }
      _renderAIReportList(r.data || [], dateFrom, dateTo);
    })
    .withFailureHandler(function(e) { _renderAIReportListEmpty(); console.error(e); })
    .getAIReportList(sid, dateFrom || null, dateTo || null);
}

/* ─── _renderAIReportListEmpty ─── */
function _renderAIReportListEmpty() {
  var empty = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">No AI Reports Yet</div><div class="ph-sub">Reports are generated automatically every morning at 06:00 WITA.</div></div>';
  var cD = document.getElementById('d-aireport-content'); if (cD) cD.innerHTML = _airPageHeader() + empty;
  var cM = document.getElementById('m-aireport-content'); if (cM) cM.innerHTML = empty;
}

/* ─── _airPageHeader — header + filter bar HTML ─── */
function _airPageHeader() {
  var fromVal = _airDateFrom || '';
  var toVal   = _airDateTo   || '';
  return (
    '<div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px">' +
      '<div>' +
        '<div style="font-family:Georgia,serif;font-size:26px;font-weight:700;color:var(--black)">AI Intelligence Report</div>' +
        '<div style="font-size:13px;color:var(--gray-500);margin-top:4px">Auto-generated daily · Powered by Gemini 3.5 · Miss Fish Bali LMS</div>' +
      '</div>' +
      '<div style="background:rgba(201,160,101,0.1);border:1px solid rgba(201,160,101,0.3);border-radius:20px;padding:6px 14px;font-size:12px;font-weight:600;color:var(--gold)">🤖 Gemini 3.5</div>' +
    '</div>' +
    '<div class="air-filter-bar">' +
      '<div class="air-filter-row">' +
        '<span class="air-filter-label">Filter Period</span>' +
        '<span style="font-size:13px;color:var(--gray-500)">From</span>' +
        '<input type="date" class="air-filter-input" id="air-date-from" value="' + escHtml(fromVal) + '">' +
        '<span style="font-size:13px;color:var(--gray-500)">To</span>' +
        '<input type="date" class="air-filter-input" id="air-date-to" value="' + escHtml(toVal) + '">' +
        '<button class="air-apply-btn" onclick="_airApplyFilter()">Apply</button>' +
      '</div>' +
      '<div class="air-quick-btns">' +
        '<button class="air-quick-btn' + (!_airDateFrom ? ' active' : '') + '" onclick="_airQuickFilter(\'week\')">This Week</button>' +
        '<button class="air-quick-btn" onclick="_airQuickFilter(\'month\')">This Month</button>' +
        '<button class="air-quick-btn" onclick="_airQuickFilter(\'quarter\')">This Quarter</button>' +
        '<button class="air-quick-btn" onclick="_airQuickFilter(\'year\')">This Year</button>' +
      '</div>' +
    '</div>'
  );
}

/* ─── _airApplyFilter — ambil nilai date picker lalu reload list ─── */
function _airApplyFilter() {
  var f = document.getElementById('air-date-from');
  var t = document.getElementById('air-date-to');
  _airDateFrom = f ? f.value : null;
  _airDateTo   = t ? t.value : null;
  _loadAIReportList(_airDateFrom, _airDateTo);
}

/* ─── _airQuickFilter — set date range dari preset button ─── */
function _airQuickFilter(preset) {
  var now   = new Date();
  var to    = _fmtDate(now);
  var from  = to;
  if (preset === 'week') {
    var d = new Date(now); d.setDate(d.getDate() - d.getDay());
    from = _fmtDate(d);
  } else if (preset === 'month') {
    from = _fmtDate(new Date(now.getFullYear(), now.getMonth(), 1));
  } else if (preset === 'quarter') {
    var q = Math.floor(now.getMonth() / 3);
    from = _fmtDate(new Date(now.getFullYear(), q * 3, 1));
  } else if (preset === 'year') {
    from = _fmtDate(new Date(now.getFullYear(), 0, 1));
  }
  _airDateFrom = from;
  _airDateTo   = to;
  _loadAIReportList(from, to);
}

/* ─── _fmtDate — format Date ke yyyy-MM-dd ─── */
/* v2.129 — kartu Certificates menampilkan nilai Date MENTAH
   ("Sat Aug 14 2027 00:00:00 GMT+0800 (Waktu Indonesia Tengah)").
   Fungsi ini mengubahnya jadi "14 August 2027", seragam dengan
   tanggal terbit di sebelahnya. Mengikuti Standar Coding Miss Fish:
   nama bulan Inggris ditulis penuh, tanggal 1 digit tanpa nol depan.
   Kalau nilainya tidak bisa dibaca sebagai tanggal, dikembalikan apa
   adanya — jangan sampai malah menampilkan "Invalid Date". */
var _BULAN_EN = ['January','February','March','April','May','June',
                 'July','August','September','October','November','December'];

function _fmtTanggalPanjang(v) {
  if (!v) return '';
  var d = (v instanceof Date) ? v : new Date(v);
  if (!d || isNaN(d.getTime())) return String(v);
  return d.getDate() + ' ' + _BULAN_EN[d.getMonth()] + ' ' + d.getFullYear();
}

function _fmtDate(d) {
  var y = d.getFullYear();
  var m = String(d.getMonth() + 1).padStart(2, '0');
  var dd = String(d.getDate()).padStart(2, '0');
  return y + '-' + m + '-' + dd;
}

/* ─── _renderAIReportList — render list view ─── */
function _renderAIReportList(items, dateFrom, dateTo) {
  // ── DESKTOP ──
  var cD = document.getElementById('d-aireport-content');
  if (cD) {
    var listHtml = '';
    if (items.length === 0) {
      listHtml = '<div style="padding:40px 20px;text-align:center;color:var(--gray-400);font-size:13px">No reports found for the selected period.</div>';
    } else {
      listHtml = '<div class="air-list-header">Recent Reports</div><div class="air-list">';
      items.forEach(function(item) {
        var dateLabel = _airFmtDateLabel(item.report_date);
        var critCount = item.critical_count || 0;
        var badgeHtml = critCount > 0
          ? '<span class="air-list-badge air-badge-critical">' + critCount + ' Critical</span>'
          : '<span class="air-list-badge air-badge-clear">All Clear</span>';
        listHtml +=
          '<div class="air-list-item" onclick="_loadAIReportDetail(\'' + escHtml(item.report_date) + '\')">' +
            '<div class="air-list-icon">🤖</div>' +
            '<div class="air-list-body">' +
              '<div class="air-list-title">Daily Report — ' + escHtml(dateLabel) + '</div>' +
              '<div class="air-list-sub">' + escHtml(item.summary || '—') + ' · Generated ' + escHtml((item.generated_at || '').substring(0, 10)) + '</div>' +
            '</div>' +
            badgeHtml +
            '<div class="air-list-chevron">›</div>' +
          '</div>';
      });
      listHtml += '</div>';
    }
    cD.innerHTML = _airPageHeader() + listHtml;
  }

  // ── MOBILE ──
  var cM = document.getElementById('m-aireport-content');
  if (cM) {
    var mList = '';
    if (items.length === 0) {
      mList = '<div style="padding:32px 16px;text-align:center;color:var(--gray-400);font-size:13px">No reports found.</div>';
    } else {
      items.forEach(function(item) {
        var dateLabel = _airFmtDateLabel(item.report_date);
        var critCount = item.critical_count || 0;
        var badgeTxt  = critCount > 0 ? critCount + ' Critical' : 'All Clear';
        var badgeCls  = critCount > 0 ? 'air-badge-critical' : 'air-badge-clear';
        mList +=
          '<div style="margin:0 16px 10px;background:var(--white);border-radius:14px;border:1px solid var(--gray-100);padding:14px 16px;display:flex;align-items:center;gap:12px;cursor:pointer" onclick="_loadAIReportDetail(\'' + escHtml(item.report_date) + '\')">' +
            '<div style="width:36px;height:36px;border-radius:9px;background:var(--solid-dark);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0">🤖</div>' +
            '<div style="flex:1;min-width:0">' +
              '<div style="font-size:13.5px;font-weight:700;color:var(--black);margin-bottom:2px">Daily Report — ' + escHtml(dateLabel) + '</div>' +
              '<div style="font-size:11.5px;color:var(--gray-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">' + escHtml(item.summary || '—') + '</div>' +
            '</div>' +
            '<span class="air-list-badge ' + badgeCls + '">' + badgeTxt + '</span>' +
          '</div>';
      });
    }
    cM.innerHTML = '<div style="height:16px"></div>' + mList + '<div style="height:20px"></div>';
  }
}

/* ─── _airFmtDateLabel — format date → 'Mon, 3 July 2026'
   Handle dua format dari GAS:
   1. 'yyyy-MM-dd'
   2. Full Date string: 'Tue Jul 14 2026 00:00:00 GMT+0800 ...'
─── */
function _airFmtDateLabel(dateStr) {
  if (!dateStr) return '—';
  var s = String(dateStr).trim();
  var days   = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
  var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
  var d;

  // Format 1: yyyy-MM-dd — parse manual supaya tidak kena timezone shift
  var isoMatch = s.match(/^(\d{4})-(\d{2})-(\d{2})/);
  if (isoMatch) {
    d = new Date(parseInt(isoMatch[1]), parseInt(isoMatch[2]) - 1, parseInt(isoMatch[3]));
    return days[d.getDay()] + ', ' + d.getDate() + ' ' + months[d.getMonth()] + ' ' + d.getFullYear();
  }

  // Format 2: Full Date string dari GAS misal 'Tue Jul 14 2026 00:00:00 GMT+0800'
  var gasMatch = s.match(/(\w{3})\s+(\w{3})\s+(\d{1,2})\s+(\d{4})/);
  if (gasMatch) {
    var mShort = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    var mIdx   = mShort.indexOf(gasMatch[2]);
    if (mIdx !== -1) {
      d = new Date(parseInt(gasMatch[4]), mIdx, parseInt(gasMatch[3]));
      return days[d.getDay()] + ', ' + d.getDate() + ' ' + months[d.getMonth()] + ' ' + d.getFullYear();
    }
  }

  // Fallback: parse langsung
  d = new Date(s);
  if (!isNaN(d.getTime())) {
    return days[d.getDay()] + ', ' + d.getDate() + ' ' + months[d.getMonth()] + ' ' + d.getFullYear();
  }
  return s;
}

/* ─── _loadAIReportDetail — klik item list → buka detail ─── */
function _loadAIReportDetail(reportDate) {
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) return;
  var cD = document.getElementById('d-aireport-content');
  var cM = document.getElementById('m-aireport-content');
  if (cD) cD.innerHTML = _loader('Loading AI report...');
  if (cM) cM.innerHTML = _loader('Loading AI report...');

  google.script.run
    .withSuccessHandler(function(r) {
      if (!r || !r.success || !r.data) { renderAIReport(null); return; }
      renderAIReport(r.data);
    })
    .withFailureHandler(function(e) { renderAIReport(null); console.error(e); })
    .getAIReport(sid, reportDate);
}

/* ─────────────────────────────────────────────────────────────
   renderAIReport
   data: { report_id, report_date, period_type,
           content, date_from, date_to, generated_at }
   v2.60: parse JSON structured, render 5 sections kaya
───────────────────────────────────────────────────────────── */
function renderAIReport(data) {
  if (!data) {
    var empty = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">No AI Report Yet</div><div class="ph-sub">Report will be generated automatically every morning at 06:00 WITA.</div></div>';
    var cD2 = document.getElementById('d-aireport-content'); if (cD2) cD2.innerHTML = empty;
    var cM2 = document.getElementById('m-aireport-content'); if (cM2) cM2.innerHTML = empty;
    return;
  }

  var content    = data.content || '';
  var reportDate = data.report_date || '';
  var periodType = data.period_type || 'daily';

  // Coba parse JSON structured (format v1.3)
  var parsed = _parseAIJSON(content);

  // Back button row
  var backRow =
    '<div class="air-back-row">' +
      '<button class="air-back-btn" onclick="_loadAIReportList(_airDateFrom, _airDateTo)">← Back to Reports</button>' +
      '<div class="air-detail-title">Daily Report — ' + escHtml(_airFmtDateLabel(reportDate)) + '</div>' +
    '</div>';

  // Filter bar (supaya user bisa ganti filter dari detail juga)
  var filterBar = _airPageHeader();

  // ── DESKTOP ──
  var cD = document.getElementById('d-aireport-content');
  if (cD) {
    var sectionsHtml = '';

    if (parsed) {
      // ── FORMAT v1.3: JSON structured ──
      var exec    = parsed.executive_summary   || {};
      var depts   = parsed.department_analysis || [];
      var courses = parsed.course_audit        || [];
      var frauds  = parsed.fraud_detection     || [];
      var emp     = parsed.employee_insights   || {};
      var actions = parsed.top_3_actions       || [];

      // 1. Executive Summary
      var execRows = '';
      if (exec.positive) execRows += '<div class="air-exec-row"><div class="air-exec-dot green"></div><div class="air-exec-text"><strong>Positive:</strong> ' + escHtml(exec.positive) + '</div></div>';
      if (exec.critical) execRows += '<div class="air-exec-row"><div class="air-exec-dot red"></div><div class="air-exec-text"><strong>Critical:</strong> ' + escHtml(exec.critical) + '</div></div>';
      if (exec.watch)    execRows += '<div class="air-exec-row"><div class="air-exec-dot amber"></div><div class="air-exec-text"><strong>Watch:</strong> ' + escHtml(exec.watch) + '</div></div>';

      sectionsHtml +=
        '<div class="air-section">' +
          '<div class="air-section-header"><div class="air-section-icon">📊</div><div class="air-section-label">Executive Summary</div><div class="air-section-badge">Gemini 3.5</div></div>' +
          '<div class="air-exec-summary">' + escHtml(exec.summary || '') + '</div>' +
          execRows +
        '</div>';

      // 2. Department Analysis — grid 2 kolom
      var deptCells = depts.map(function(d) {
        var dotCls = d.status === 'Critical' ? 'critical' : d.status === 'Review' ? 'review' : 'ontrack';
        var statusLabel = d.status === 'On Track' ? 'On Track' : d.status;
        return '<div class="air-dept-cell">' +
          '<div class="air-dept-name"><div class="air-dept-dot ' + dotCls + '"></div>' + escHtml(d.dept) + ' — ' + escHtml(statusLabel) + '</div>' +
          '<div class="air-dept-detail">' + escHtml(d.detail || '') + '</div>' +
        '</div>';
      }).join('');

      sectionsHtml +=
        '<div class="air-section">' +
          '<div class="air-section-header"><div class="air-section-icon">🏢</div><div class="air-section-label">Department Analysis</div><div class="air-section-badge">Gemini 3.5</div></div>' +
          '<div class="air-dept-grid">' + (deptCells || '<div style="color:rgba(255,255,255,0.5);font-size:13px">No department data.</div>') + '</div>' +
        '</div>';

      // 3. Course Quality Audit
      var courseRows = courses.map(function(c) {
        var dotCls = c.status === 'Critical' ? 'critical' : c.status === 'Warning' ? 'warning' : 'good';
        return '<div class="air-item-row"><div class="air-item-dot ' + dotCls + '"></div>' +
          '<div class="air-item-text"><strong>' + escHtml(c.course) + ':</strong> ' + escHtml(c.detail || '') + '</div></div>';
      }).join('');

      sectionsHtml +=
        '<div class="air-section">' +
          '<div class="air-section-header"><div class="air-section-icon">📚</div><div class="air-section-label">Course Quality Audit</div><div class="air-section-badge">Gemini 3.5</div></div>' +
          (courseRows || '<div class="air-item-text" style="color:rgba(255,255,255,0.5)">No course audit data.</div>') +
        '</div>';

      // 4. Integrity & Fraud Detection
      var fraudRows = frauds.map(function(f) {
        return '<div class="air-item-row"><div class="air-item-dot critical"></div>' +
          '<div class="air-item-text">' + escHtml(f.detail || '') + '</div></div>';
      }).join('');

      sectionsHtml +=
        '<div class="air-section fraud">' +
          '<div class="air-section-header"><div class="air-section-icon">⚠️</div><div class="air-section-label">Integrity &amp; Fraud Detection</div><div class="air-section-badge">Gemini 3.5</div></div>' +
          (fraudRows || '<div class="air-item-text" style="color:rgba(255,255,255,0.5)">No integrity issues detected.</div>') +
        '</div>';

      // 5. Employee Insights + Top 3 Actions
      var empRows = '';
      if (emp.top_performers) empRows += '<div class="air-item-row"><div class="air-item-dot good"></div><div class="air-item-text"><strong>Top Performers:</strong> ' + escHtml(emp.top_performers) + '</div></div>';
      if (emp.need_support)   empRows += '<div class="air-item-row"><div class="air-item-dot amber"></div><div class="air-item-text"><strong>Need Support:</strong> ' + escHtml(emp.need_support) + '</div></div>';
      if (emp.pattern)        empRows += '<div class="air-item-row"><div class="air-item-dot blue"></div><div class="air-item-text"><strong>Pattern:</strong> ' + escHtml(emp.pattern) + '</div></div>';

      var actionsBox = '';
      if (actions.length > 0) {
        var liItems = actions.map(function(a) { return '<li>' + escHtml(a) + '</li>'; }).join('');
        actionsBox =
          '<div class="air-actions-box">' +
            '<div class="air-actions-label">📋 Top 3 Actions Today</div>' +
            '<ol class="air-actions-list">' + liItems + '</ol>' +
          '</div>';
      }

      sectionsHtml +=
        '<div class="air-section">' +
          '<div class="air-section-header"><div class="air-section-icon">👤</div><div class="air-section-label">Employee Insights</div><div class="air-section-badge">Gemini 3.5</div></div>' +
          (empRows || '<div class="air-item-text" style="color:rgba(255,255,255,0.5)">No employee insights available.</div>') +
          actionsBox +
        '</div>';

    } else {
      // ── FALLBACK: plain text ──
      var sections = _parseAISections(content);
      var sIcons   = { '1':'📊', '2':'🏢', '3':'📚', '4':'⚠️', '5':'👤' };
      if (sections.length === 0) {
        sectionsHtml = '<div class="air-section"><div class="air-section-header"><div class="air-section-icon">🤖</div><div class="air-section-label">AI Report</div><div class="air-section-badge">Gemini 3.5</div></div><div class="air-exec-summary" style="white-space:pre-wrap">' + escHtml(content) + '</div></div>';
      } else {
        sections.forEach(function(sec) {
          var icon    = sIcons[sec.num] || '📄';
          var isFraud = sec.num === '4';
          var rows    = sec.body.split('\n').filter(function(l) { return l.trim(); }).map(function(line) {
            return '<div class="air-item-row"><div class="air-item-dot warning"></div><div class="air-item-text">' +
              escHtml(line.replace(/^[-•]\s*/, '')).replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') +
            '</div></div>';
          }).join('');
          sectionsHtml +=
            '<div class="air-section' + (isFraud ? ' fraud' : '') + '">' +
              '<div class="air-section-header"><div class="air-section-icon">' + icon + '</div><div class="air-section-label">' + escHtml(sec.title) + '</div><div class="air-section-badge">Gemini 3.5</div></div>' +
              (rows || '<div class="air-exec-summary">' + escHtml(sec.body) + '</div>') +
            '</div>';
        });
      }
    }

    cD.innerHTML = filterBar + backRow + sectionsHtml;
  }

  // ── MOBILE ──
  var cM = document.getElementById('m-aireport-content');
  if (cM) {
    var mBack =
      '<div style="padding:12px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--gray-100)">' +
        '<button class="air-back-btn" onclick="_loadAIReportList(_airDateFrom, _airDateTo)">← Back</button>' +
        '<div style="font-size:14px;font-weight:700;color:var(--black)">Daily Report — ' + escHtml(_airFmtDateLabel(reportDate)) + '</div>' +
      '</div>';

    var mSections = '';
    if (parsed) {
      var exec2    = parsed.executive_summary   || {};
      var depts2   = parsed.department_analysis || [];
      var courses2 = parsed.course_audit        || [];
      var frauds2  = parsed.fraud_detection     || [];
      var emp2     = parsed.employee_insights   || {};
      var actions2 = parsed.top_3_actions       || [];

      // Helper: render section block for mobile
      var mSecBlock = function(icon, label, bodyHtml, isFraud) {
        var bg = isFraud ? 'background:linear-gradient(135deg,#1a0505,#2d0808);border-color:rgba(220,38,38,0.25)' : 'background:linear-gradient(135deg,#0A0A0A,#1A1208)';
        return '<div style="margin:0 16px 12px;border-radius:14px;border:1px solid rgba(201,160,101,0.2);padding:16px;' + bg + '">' +
          '<div style="display:flex;align-items:center;gap:8px;margin-bottom:12px">' +
            '<div style="font-size:15px">' + icon + '</div>' +
            '<div style="font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:' + (isFraud ? '#F87171' : 'var(--gold)') + '">' + label + '</div>' +
          '</div>' +
          bodyHtml +
        '</div>';
      }

      // 1. Executive Summary
      var mExec = '<div style="font-size:13px;color:rgba(255,255,255,0.85);line-height:1.6;margin-bottom:10px">' + escHtml(exec2.summary || '') + '</div>';
      if (exec2.positive) mExec += '<div style="display:flex;gap:8px;margin-bottom:6px"><div style="width:8px;height:8px;border-radius:50%;background:#22C55E;flex-shrink:0;margin-top:4px"></div><div style="font-size:12px;color:rgba(255,255,255,0.8)"><strong style="color:#fff">Positive:</strong> ' + escHtml(exec2.positive) + '</div></div>';
      if (exec2.critical) mExec += '<div style="display:flex;gap:8px;margin-bottom:6px"><div style="width:8px;height:8px;border-radius:50%;background:#EF4444;flex-shrink:0;margin-top:4px"></div><div style="font-size:12px;color:rgba(255,255,255,0.8)"><strong style="color:#fff">Critical:</strong> ' + escHtml(exec2.critical) + '</div></div>';
      if (exec2.watch)    mExec += '<div style="display:flex;gap:8px;margin-bottom:6px"><div style="width:8px;height:8px;border-radius:50%;background:#F59E0B;flex-shrink:0;margin-top:4px"></div><div style="font-size:12px;color:rgba(255,255,255,0.8)"><strong style="color:#fff">Watch:</strong> ' + escHtml(exec2.watch) + '</div></div>';
      mSections += mSecBlock('📊', 'Executive Summary', mExec, false);

      // 2. Dept
      var mDept = depts2.map(function(d) {
        var dc = d.status === 'Critical' ? '#EF4444' : d.status === 'Review' ? '#F59E0B' : '#22C55E';
        return '<div style="display:flex;gap:8px;margin-bottom:8px"><div style="width:8px;height:8px;border-radius:50%;background:' + dc + ';flex-shrink:0;margin-top:4px"></div><div style="font-size:12px;color:rgba(255,255,255,0.8)"><strong style="color:#fff">' + escHtml(d.dept) + ':</strong> ' + escHtml(d.detail || '') + '</div></div>';
      }).join('');
      mSections += mSecBlock('🏢', 'Department Analysis', mDept || '<div style="font-size:12px;color:rgba(255,255,255,0.4)">No data.</div>', false);

      // 3. Course Audit
      var mCourse = courses2.map(function(c) {
        var dc = c.status === 'Critical' ? '#EF4444' : c.status === 'Warning' ? '#F59E0B' : '#22C55E';
        return '<div style="display:flex;gap:8px;margin-bottom:8px"><div style="width:8px;height:8px;border-radius:50%;background:' + dc + ';flex-shrink:0;margin-top:4px"></div><div style="font-size:12px;color:rgba(255,255,255,0.8)"><strong style="color:#fff">' + escHtml(c.course) + ':</strong> ' + escHtml(c.detail || '') + '</div></div>';
      }).join('');
      mSections += mSecBlock('📚', 'Course Quality Audit', mCourse || '<div style="font-size:12px;color:rgba(255,255,255,0.4)">No data.</div>', false);

      // 4. Fraud
      var mFraud = frauds2.map(function(f) {
        return '<div style="display:flex;gap:8px;margin-bottom:8px"><div style="width:8px;height:8px;border-radius:50%;background:#EF4444;flex-shrink:0;margin-top:4px"></div><div style="font-size:12px;color:rgba(255,255,255,0.8)">' + escHtml(f.detail || '') + '</div></div>';
      }).join('');
      mSections += mSecBlock('⚠️', 'Integrity & Fraud Detection', mFraud || '<div style="font-size:12px;color:rgba(255,255,255,0.4)">No issues detected.</div>', true);

      // 5. Employee Insights
      var mEmp = '';
      if (emp2.top_performers) mEmp += '<div style="display:flex;gap:8px;margin-bottom:8px"><div style="width:8px;height:8px;border-radius:50%;background:#22C55E;flex-shrink:0;margin-top:4px"></div><div style="font-size:12px;color:rgba(255,255,255,0.8)"><strong style="color:#fff">Top Performers:</strong> ' + escHtml(emp2.top_performers) + '</div></div>';
      if (emp2.need_support)   mEmp += '<div style="display:flex;gap:8px;margin-bottom:8px"><div style="width:8px;height:8px;border-radius:50%;background:#F59E0B;flex-shrink:0;margin-top:4px"></div><div style="font-size:12px;color:rgba(255,255,255,0.8)"><strong style="color:#fff">Need Support:</strong> ' + escHtml(emp2.need_support) + '</div></div>';
      if (emp2.pattern)        mEmp += '<div style="display:flex;gap:8px;margin-bottom:8px"><div style="width:8px;height:8px;border-radius:50%;background:#60A5FA;flex-shrink:0;margin-top:4px"></div><div style="font-size:12px;color:rgba(255,255,255,0.8)"><strong style="color:#fff">Pattern:</strong> ' + escHtml(emp2.pattern) + '</div></div>';
      if (actions2.length > 0) {
        mEmp += '<div style="margin-top:10px;padding:10px 12px;background:rgba(201,160,101,0.08);border-radius:8px;border-left:3px solid var(--gold)">' +
          '<div style="font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:6px">📋 Top 3 Actions Today</div>' +
          actions2.map(function(a, i) { return '<div style="font-size:12px;color:rgba(255,255,255,0.85);margin-bottom:4px">' + (i + 1) + '. ' + escHtml(a) + '</div>'; }).join('') +
        '</div>';
      }
      mSections += mSecBlock('👤', 'Employee Insights', mEmp || '<div style="font-size:12px;color:rgba(255,255,255,0.4)">No data.</div>', false);

    } else {
      // Fallback plain text mobile
      mSections = '<div style="margin:16px;background:var(--white);border-radius:14px;border:1px solid var(--gray-100);padding:16px"><div style="font-size:13px;line-height:1.7;white-space:pre-wrap">' + escHtml(content) + '</div></div>';
    }

    cM.innerHTML = mBack + '<div style="height:12px"></div>' + mSections + '<div style="height:24px"></div>';
  }
}

/* ─────────────────────────────────────────────────────────────
   _parseAISections — fallback parser untuk format lama
   Parse content Gemini (format ## N. Title\nbody)
   Return: [{ num, title, body }]
───────────────────────────────────────────────────────────── */
function _parseAISections(content) {
  if (!content) return [];
  var sections = [];
  var parts = content.split(/\n(?=##\s*\d)/);
  parts.forEach(function(part) {
    var match = part.match(/^##\s*(\d+)[.\s]+(.+?)[\n\r]([\s\S]*)/);
    if (match) {
      sections.push({ num: match[1].trim(), title: match[2].trim(), body: match[3].trim() });
    }
  });
  return sections;
}

/* ══════════════════════════════════════════════════════════════
   BATCH 5 — Admin Pages JS
   applyUserToAdminPages, loadAdminDashboard,
   loadUsers, loadCoursesMgmt + helpers
══════════════════════════════════════════════════════════════ */

/* ─── applyUserToAdminPages ─── */
function applyUserToAdminPages(user) {
  if (!user) return;
  var initials = getInitials(user.full_name);
  var roleMap  = { IT_ADMIN:'IT Super Admin', HRM:'HRM', HR_TALENT:'HR Talent', TM:'Training Manager' };
  var subLabel = (user.dept || 'Miss Fish') + ' · ' + (roleMap[user.role] || user.role);
  var adminPages = ['users','courses-mgmt'];

  adminPages.forEach(function(p) {
    var s = function(id, v) { var el = document.getElementById(id); if (el) el.textContent = v; };
    s('sb-avatar-'    + p, initials);
    s('sb-name-'      + p, user.full_name);
    s('sb-role-'      + p, subLabel);
    s('topbar-avatar-'+ p, initials);

    var src = document.getElementById('d-sidebar-nav');
    var dst = document.getElementById('d-sidebar-nav-' + p);
    if (src && dst) {
      dst.innerHTML = src.innerHTML;
      dst.querySelectorAll('.nav-item[data-page]').forEach(function(item) {
        var pg = item.getAttribute('data-page');
        if (pg) item.onclick = function() { goTo(pg); };
      });
      dst.querySelectorAll('.nav-item[data-page=""]').forEach(function(item) {
        item.onclick = signOut;
      });
    }

    var bnav = document.getElementById('m-bottom-nav-' + p);
    if (bnav) {
      var items = BNAV_CONFIG['admin'] || [];
      bnav.innerHTML = '';
      items.forEach(function(it) {
        var div = document.createElement('div');
        div.className = 'bnav-item' + (it.page === p ? ' active' : '');
        div.setAttribute('data-page', it.page);
        div.innerHTML = '<div class="bnav-icon">' + it.icon + '</div><div class="bnav-label">' + it.label + '</div>';
        div.addEventListener('click', function() { goTo(it.page); });
        bnav.appendChild(div);
      });
    }
  });

  // aireport sidebar juga dipakai admin
  var s2 = function(id, v) { var el = document.getElementById(id); if (el) el.textContent = v; };
  s2('sb-avatar-aireport', initials);
  s2('sb-name-aireport',   user.full_name);
  s2('sb-role-aireport',   subLabel);
  s2('topbar-avatar-aireport', initials);
}

/* ─── loadAdminDashboard ─── */
/* Admin reuse d-dashboard page — dipanggil sama seperti employee
   tapi render berbeda. getDashboardStats() return extra admin fields. */
function loadAdminDashboard() {
  if (!_lmsUser) return;
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) return;

  // v2.125 Phase F — kalau login sudah membawa datanya, render langsung.
  var _pre = _takePrefetchedDash('getDashboardStats');
  if (_pre) { renderAdminDashboard(_pre.data); return; }

  var cD = document.getElementById('d-dashboard-content');
  var cM = document.getElementById('m-dashboard-content');
  if (cD) cD.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading dashboard...</div></div>';
  if (cM) cM.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>';

  google.script.run
    .withSuccessHandler(function(r) {
      if (!r) return;
      if (!r.success) { showToast(r.message || 'Error'); return; }
      renderAdminDashboard(r.data);
    })
    .withFailureHandler(function(e) { showToast('Connection error.'); console.error(e); })
    .getDashboardStats(sid);
}

/* ─── renderAdminDashboard ─── */
function renderAdminDashboard(data) {
  if (!data) return;
  // GAS getDashboardStats return data.stat_cards — petakan ke field yg dipakai frontend
  var rawStats = data.stat_cards || data.stats || {};
  var stats = {
    totalEmployees : rawStats.active_users        || 0,
    totalDepts     : rawStats.total_depts         || 0,
    totalCourses   : rawStats.total_courses       || rawStats.published_courses || 0,
    publishedCourses: rawStats.published_courses  || 0,
    completionPct  : rawStats.overall_completion  || 0,
    certsIssued    : rawStats.total_certs         || 0,
    videoHours     : rawStats.video_hours         || 0,
    overdue        : rawStats.overdue_assignments || 0,
    trainees       : rawStats.active_trainees     || 0
  };
  var recent  = data.recentActivity || data.recent_activity || [];
  var depts   = data.depts || data.dept_breakdown || [];
  var deadlines = data.deadlines || [];
  var h       = new Date().getHours();
  var greeting = h < 12 ? 'Good Morning' : h < 17 ? 'Good Afternoon' : 'Good Evening';
  var roleMap  = { IT_ADMIN:'IT Super Admin', HRM:'HRM', TM:'Training Manager', GM:'General Manager' };
  var roleLabel = roleMap[_lmsUser.role] || _lmsUser.role;

  // ── DESKTOP ──
  var cD = document.getElementById('d-dashboard-content');
  if (cD) {
    var welcomeHtml =
      '<div class="welcome-bar" style="margin-bottom:24px"><div class="welcome-bar-bg"></div>' +
      '<div class="welcome-bar-left"><div class="welcome-greeting">' + greeting + '</div>' +
      '<div class="welcome-name">' + escHtml(_lmsUser.full_name) + '</div>' +
      '<div class="welcome-sub">' + escHtml(_lmsUser.dept || 'Miss Fish') + ' &nbsp;·&nbsp; ' + escHtml(roleLabel) + '</div></div>' +
      '<div class="welcome-bar-right"><div class="welcome-date d-date">—</div><div class="welcome-time d-clock">—</div></div></div>';

    // AI card — injected async setelah render selesai via injectAICard()
    var aiHtml = '<div id="d-dashboard-ai-slot"></div>';

    // Stats row 1 — 4 cards
    var s1 =
      '<div class="stats-grid-1" style="margin-bottom:16px">' +
      _statCard('👥','ic-gold',  stats.totalEmployees || 0, 'Total Employees', (stats.totalDepts || 0) + ' departments', '') +
      _statCard('📚','ic-black', stats.totalCourses   || 0, 'Total Courses',   (stats.publishedCourses || 0) + ' published', '') +
      _statCard('✅','ic-green', (stats.completionPct || 0) + '%', 'Completion Rate', 'company-wide', 'trend-up') +
      _statCard('🏆','ic-gold',  stats.certsIssued    || 0, 'Certificates Issued', 'this year', 'trend-up') +
      '</div>';

    // Stats row 2 — 3 cards
    var s2 =
      '<div class="stats-grid-2" style="margin-bottom:28px">' +
      _statCard('🎬','ic-blue', stats.videoHours || 0,     'Video Hours Watched', 'this month', '') +
      _statCard('⚠️','ic-red',  stats.overdue    || 0,     'Overdue Trainings',   'require action', stats.overdue > 0 ? 'trend-warn' : '') +
      _statCard('🎓','ic-blue', stats.trainees   || 0,     'Active Trainees',     'from partner schools', '') +
      '</div>';

    // Activity list
    var actRows = recent.length === 0
      ? '<div style="padding:20px 24px;text-align:center;color:var(--gray-400);font-size:13px">No recent activity.</div>'
      : recent.slice(0, 5).map(function(a) {
          var badgeCls = a.flag === 'NORMAL' ? 'badge-complete' : a.flag === 'WARNING' ? 'badge-flag' : a.flag === 'CRITICAL' ? 'badge-fail' : 'badge-progress';
          var badgeTxt = a.flag === 'NORMAL' ? '✓ Done' : a.flag === 'WARNING' ? '⚠ Flag' : a.flag === 'CRITICAL' ? '✗ Critical' : 'Info';
          return '<div class="activity-item">' +
            '<div class="activity-avatar ' + _avtCls(a.user_id) + '">' + escHtml(getInitials(a.user_name || '')) + '</div>' +
            '<div class="activity-info"><div class="activity-name">' + escHtml(a.user_name || '—') + '</div>' +
            '<div class="activity-desc">' + escHtml(a.description || '') + '</div></div>' +
            '<div class="activity-badge ' + badgeCls + '">' + badgeTxt + '</div>' +
            '<div class="activity-time">' + escHtml(a.time_short || '') + '</div></div>';
        }).join('');

    var actCard =
      '<div class="card" style="margin-bottom:16px">' +
      '<div class="card-header"><span class="card-title">Recent Activity</span>' +
      '<span class="card-action" onclick="goTo(\'actlog\')">View All Log →</span></div>' +
      '<div class="activity-list">' + actRows + '</div></div>';

    // Dept progress bars
    var deptRows = depts.length === 0
      ? '<div style="padding:20px 24px;text-align:center;color:var(--gray-400);font-size:13px">No data.</div>'
      : depts.map(function(d) {
          var pct = d.completion_pct || 0;
          return '<div class="dept-row"><div class="dept-row-top"><span class="dept-name">' + escHtml(d.dept) + '</span>' +
            '<span class="dept-pct">' + pct + '%</span></div>' +
            '<div class="dept-bar-bg"><div class="dept-bar-fill" style="width:' + pct + '%"></div></div></div>';
        }).join('');

    var deptCard =
      '<div class="card">' +
      '<div class="card-header"><span class="card-title">Department Completion Rate</span>' +
      '<span class="card-action" onclick="goTo(\'reports\')">Full Report →</span></div>' +
      '<div class="dept-progress-list">' + deptRows + '</div></div>';

    // Deadlines card
    var dlRows = deadlines.length === 0
      ? '<div style="padding:20px 24px;text-align:center;color:var(--gray-400);font-size:13px">No deadlines 🎉</div>'
      : deadlines.slice(0, 4).map(function(d) {
          var days   = d.days_left;
          var dotCls = days <= 3 ? 'dd-urgent' : days <= 7 ? 'dd-soon' : 'dd-ok';
          var dayCls = days <= 3 ? 'days-urgent' : days <= 7 ? 'days-soon' : 'days-ok';
          var dayLbl = days <= 0 ? 'Overdue!' : days + ' days';
          return '<div class="deadline-item">' +
            '<div class="deadline-dot ' + dotCls + '"></div>' +
            '<div class="deadline-info"><div class="deadline-course">' + escHtml(d.title) + '</div>' +
            '<div class="deadline-dept">' + escHtml(d.note || '') + '</div></div>' +
            '<div class="deadline-days ' + dayCls + '">' + dayLbl + '</div></div>';
        }).join('');

    var dlCard =
      '<div class="card" style="margin-bottom:16px">' +
      '<div class="card-header"><span class="card-title">Upcoming Deadlines</span></div>' +
      '<div class="deadline-list">' + dlRows + '</div></div>';

    // Quick actions
    var qaCard =
      '<div class="card">' +
      '<div class="card-header"><span class="card-title">Quick Actions</span></div>' +
      '<div style="padding:4px 20px 16px;display:flex;flex-direction:column;gap:8px">' +
      '<button class="qa-btn" style="justify-content:flex-start" onclick="goTo(\'courses-mgmt\')"><span>➕</span> Add New Course</button>' +
      '<button class="qa-btn" style="justify-content:flex-start" onclick="openUserModal()"><span>👤</span> Add Employee</button>' +
      '<button class="qa-btn" style="justify-content:flex-start" onclick="goTo(\'reports\')"><span>📊</span> Export Report</button>' +
      '<button class="qa-btn" style="justify-content:flex-start" onclick="goTo(\'actlog\')"><span>🔍</span> View Activity Log</button>' +
      '</div></div>';

    cD.innerHTML = welcomeHtml + aiHtml + s1 + s2 +
      '<div class="dash-grid">' +
        '<div>' + actCard + deptCard + '</div>' +
        '<div>' + dlCard + qaCard + '</div>' +
      '</div>';
    updateClock();
    // Inject AI card ke slot setelah render selesai (non-blocking)
    setTimeout(function() { injectAICard('d-dashboard-ai-slot', 'weekly'); }, 100);
  }

  // ── MOBILE ──
  var cM = document.getElementById('m-dashboard-content');
  if (cM) {
    var heroHtml =
      '<div class="dash-hero"><div class="dash-hero-bg"></div>' +
      '<div class="dash-hero-top" style="position:relative;z-index:1"><div>' +
      '<div class="dash-greeting">' + greeting + '</div>' +
      '<div class="dash-name">' + escHtml(_lmsUser.full_name) + '</div>' +
      '<div class="dash-role-tag">' + escHtml(_lmsUser.dept || 'Miss Fish') + ' · ' + escHtml(roleLabel) + '</div></div>' +
      '<div><div class="dash-time m-clock">—</div><div class="dash-date m-date">—</div></div></div></div>';

    var mStats = '<div class="stats-scroll">' +
      _statChip('👥', stats.totalEmployees || 0, 'Staff', '') +
      _statChip('✅', (stats.completionPct || 0) + '%', 'Completion', 'mob-trend-up') +
      _statChip('🏆', stats.certsIssued || 0, 'Certs', 'mob-trend-up') +
      _statChip('⚠️', stats.overdue || 0, 'Overdue', stats.overdue > 0 ? 'mob-trend-warn' : '') +
      '</div>';

    var mDepts = depts.slice(0, 5).map(function(d) {
      var pct = d.completion_pct || 0;
      return '<div class="dept-row"><div class="dept-row-top"><span class="dept-name" style="font-size:13px">' + escHtml(d.dept) + '</span>' +
        '<span class="dept-pct">' + pct + '%</span></div>' +
        '<div class="dept-bar-bg"><div class="dept-bar-fill" style="width:' + pct + '%"></div></div></div>';
    }).join('');

    var mQuickAct =
      '<div class="section-header" style="margin-top:8px"><span class="section-title">Quick Actions</span></div>' +
      '<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px 16px">' +
      '<button style="height:44px;border-radius:12px;border:1.5px solid var(--gray-200);background:var(--white);color:var(--black);font-family:Inter,sans-serif;font-size:12.5px;font-weight:600;cursor:pointer" onclick="goTo(\'users\')">👥 Users</button>' +
      '<button style="height:44px;border-radius:12px;border:1.5px solid var(--gray-200);background:var(--white);color:var(--black);font-family:Inter,sans-serif;font-size:12.5px;font-weight:600;cursor:pointer" onclick="goTo(\'courses-mgmt\')">📚 Courses</button>' +
      '<button style="height:44px;border-radius:12px;border:1.5px solid var(--gray-200);background:var(--white);color:var(--black);font-family:Inter,sans-serif;font-size:12.5px;font-weight:600;cursor:pointer" onclick="goTo(\'reports\')">📊 Reports</button>' +
      '<button style="height:44px;border-radius:12px;border:1.5px solid var(--gray-200);background:var(--white);color:var(--black);font-family:Inter,sans-serif;font-size:12.5px;font-weight:600;cursor:pointer" onclick="goTo(\'actlog\')">📋 Log</button>' +
      '</div>';

    cM.innerHTML = heroHtml + mStats +
      '<div class="section-header"><span class="section-title">Dept Completion</span><span class="section-action" onclick="goTo(\'reports\')">Full →</span></div>' +
      '<div class="dept-progress-list" style="margin:0 16px">' + mDepts + '</div>' +
      mQuickAct + '<div style="height:20px"></div>';
    updateClock();
  }
}

/* ─── loadUsers ─── */
function loadUsers() {
  if (!_lmsUser) return;
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) return;
  var cD = document.getElementById('d-users-content');
  var cM = document.getElementById('m-users-content');
  if (cD) cD.innerHTML = _loader('Loading users...');
  if (cM) cM.innerHTML = _loader('Loading users...');
  google.script.run
    .withSuccessHandler(function(r) {
      if (!r) return;
      if (!r.success) { showToast(r.message || 'Error'); return; }
      window._usersCache = r.data || [];
      renderUsers(window._usersCache);
    })
    .withFailureHandler(function(e) { showToast('Connection error.'); console.error(e); })
    .getUsers(sid);
}

/* ─── renderUsers ─── */
function renderUsers(users) {
  var stats = {
    total   : users.length,
    active  : users.filter(function(u) { return u.status === 'ACTIVE'; }).length,
    locked  : users.filter(function(u) { return u.status === 'LOCKED'; }).length,
    trainee : users.filter(function(u) { return u.role  === 'TRAINEE'; }).length,
    inactive: users.filter(function(u) { return u.status === 'INACTIVE'; }).length
  };

  // ── DESKTOP ──
  var cD = document.getElementById('d-users-content');
  if (cD) {
    var miniRow =
      '<div class="stat-mini-row stat-mini-row-5">' +
      '<div class="stat-mini"><div class="stat-mini-icon ic-gold">👥</div><div><div class="stat-mini-num">' + stats.total + '</div><div class="stat-mini-lbl">Total Users</div></div></div>' +
      '<div class="stat-mini"><div class="stat-mini-icon ic-green">✅</div><div><div class="stat-mini-num" style="color:var(--green)">' + stats.active + '</div><div class="stat-mini-lbl">Active</div></div></div>' +
      '<div class="stat-mini"><div class="stat-mini-icon ic-red">🔒</div><div><div class="stat-mini-num" style="color:var(--red)">' + stats.locked + '</div><div class="stat-mini-lbl">Locked</div></div></div>' +
      '<div class="stat-mini"><div class="stat-mini-icon ic-blue">🎓</div><div><div class="stat-mini-num" style="color:var(--blue)">' + stats.trainee + '</div><div class="stat-mini-lbl">Trainee</div></div></div>' +
      '<div class="stat-mini"><div class="stat-mini-icon" style="background:var(--gray-100)">💤</div><div><div class="stat-mini-num" style="color:var(--gray-400)">' + stats.inactive + '</div><div class="stat-mini-lbl">Inactive</div></div></div>' +
      '</div>';

    var toolbar =
      '<div class="mgmt-toolbar">' +
      '<div class="mgmt-search"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>' +
      '<input id="d-users-search" placeholder="Search name, ID, email..." oninput="filterUsers()"></div>' +
      '<button class="mgmt-filter-pill active" onclick="setUserFilter(this,\'all\')">All</button>' +
      '<button class="mgmt-filter-pill" onclick="setUserFilter(this,\'active\')">Active</button>' +
      '<button class="mgmt-filter-pill" onclick="setUserFilter(this,\'locked\')">Locked</button>' +
      '<button class="mgmt-filter-pill" onclick="setUserFilter(this,\'trainee\')">Trainee</button>' +
      '<button class="btn-add" style="background:var(--gray-100);color:var(--black);border:1.5px solid var(--gray-300)" onclick="openUserImportModal()">📥 Import</button>' +
      '<button class="btn-add" onclick="openUserModal()">➕ Add User</button>' +
      '</div>';

    var rows = _buildUserRows(users);
    var tableCard =
      '<div class="table-card">' +
      '<div class="table-wrap"><table class="mgmt-table">' +
      '<thead><tr><th>User</th><th>Dept / Role</th><th>Employee ID</th><th>Status</th><th>Last Login</th><th>Actions</th></tr></thead>' +
      '<tbody id="d-users-tbody">' + rows + '</tbody></table></div>' +
      '<div class="pagination"><div class="pagination-info">Showing ' + users.length + ' users</div></div></div>';

    cD.innerHTML = miniRow + toolbar + tableCard;
  }

  // ── MOBILE ──
  var cM = document.getElementById('m-users-content');
  if (cM) {
    var mStats = '<div class="admin-stat-scroll">' +
      '<div class="stat-chip-m"><div class="scm-icon">👥</div><div class="scm-num">' + stats.total + '</div><div class="scm-label">Total</div></div>' +
      '<div class="stat-chip-m"><div class="scm-icon">✅</div><div class="scm-num" style="color:var(--green)">' + stats.active + '</div><div class="scm-label">Active</div></div>' +
      '<div class="stat-chip-m"><div class="scm-icon">🔒</div><div class="scm-num" style="color:var(--red)">' + stats.locked + '</div><div class="scm-label">Locked</div></div>' +
      '<div class="stat-chip-m"><div class="scm-icon">🎓</div><div class="scm-num" style="color:var(--blue)">' + stats.trainee + '</div><div class="scm-label">Trainee</div></div>' +
      '</div>';

    var mItems = users.map(function(u) {
      /* v2.117 — progress bar dibuang dari Manage Users (completion_pct
         tidak pernah dikirim getUsers(), selalu tampil 0%; data ini
         sudah punya tempatnya sendiri di halaman Reports & My Progress). */
      var stColor   = u.status === 'ACTIVE' ? 'var(--green)' : u.status === 'LOCKED' ? 'var(--red)' : 'var(--gray-400)';
      var stLabel   = u.status || 'Unknown';
      var canUnlock = u.status === 'LOCKED';
      /* v2.117 — tombol aksi ditambah di mobile (SEBELUMNYA cuma ada di
         desktop, mobile tidak punya cara sama sekali untuk edit/lock/
         unlock user — pelanggaran paritas). Fungsi editUser()/lockUser()/
         unlockUser() sudah ada & sudah dipakai desktop, tinggal dipanggil
         di sini. event.stopPropagation() supaya klik tombol tidak ikut
         memicu handler klik kartu (kalau ada). */
      var mActions = canUnlock
        ? '<button onclick="event.stopPropagation();unlockUser(\'' + escHtml(u.user_id) + '\')" style="height:30px;padding:0 12px;border-radius:8px;border:1.5px solid var(--gold);background:var(--gold);color:var(--black);font-family:Inter,sans-serif;font-size:11.5px;font-weight:600;cursor:pointer">🔓 Unlock</button>' +
          '<button onclick="event.stopPropagation();editUser(\'' + escHtml(u.user_id) + '\')" style="height:30px;padding:0 12px;border-radius:8px;border:1.5px solid var(--gray-200);background:var(--white);color:var(--black);font-family:Inter,sans-serif;font-size:11.5px;font-weight:600;cursor:pointer">✏ Edit</button>'
        : '<button onclick="event.stopPropagation();editUser(\'' + escHtml(u.user_id) + '\')" style="height:30px;padding:0 12px;border-radius:8px;border:1.5px solid var(--gray-200);background:var(--white);color:var(--black);font-family:Inter,sans-serif;font-size:11.5px;font-weight:600;cursor:pointer">✏ Edit</button>' +
          '<button onclick="event.stopPropagation();lockUser(\'' + escHtml(u.user_id) + '\')" style="height:30px;padding:0 12px;border-radius:8px;border:1.5px solid var(--gray-200);background:var(--white);color:var(--black);font-family:Inter,sans-serif;font-size:11.5px;font-weight:600;cursor:pointer">🔒 Lock</button>';
      /* v2.137 — sama seperti desktop: menambah, bukan merombak. */
      mActions += _tombolStatusUser(u, true);
      mActions += _tombolResetPw(u, true);      // v2.138

      return '<div class="team-item-m" style="flex-wrap:wrap">' +
        '<div class="tm-av ' + _avtCls(u.user_id) + '">' + escHtml(getInitials(u.full_name)) + '</div>' +
        '<div class="tm-info">' +
          '<div class="tm-name">' + escHtml(u.full_name) + '</div>' +
          '<div class="tm-meta">' + escHtml(u.user_id || '') + ' · ' + escHtml(u.department || '') + '</div>' +
        '</div>' +
        '<span style="font-size:10.5px;font-weight:700;color:' + stColor + '">' + stLabel + '</span>' +
        '<div style="width:100%;display:flex;gap:8px;margin-top:10px">' + mActions + '</div>' +
        '</div>';
    }).join('') || '<div style="padding:24px;text-align:center;color:var(--gray-400)">No users.</div>';

    cM.innerHTML = mStats +
      '<div class="section-header"><span class="section-title">All Users</span><span class="section-action">' + users.length + ' users</span></div>' +
      '<div style="padding:0 16px;display:flex;flex-direction:column;gap:10px">' + mItems + '</div>' +
      '<div style="height:20px"></div>';
  }
}

/* ─── _buildUserRows ─── */
function _buildUserRows(users) {
  /* v2.117 — kolom Completion dibuang: getUsers() tidak pernah mengirim
     completion_pct, jadi kolom ini selalu tampil 0% palsu untuk semua
     user. Data completion sudah ada di halaman Reports (per dept) dan
     My Progress (per orang) — tidak hilang, cuma tidak diduplikasi di
     sini. colspan turun dari 7 ke 6 mengikuti jumlah kolom header baru. */
  if (!users || users.length === 0) return '<tr><td colspan="6" style="text-align:center;padding:32px;color:var(--gray-400)">No users found.</td></tr>';
  var roleLabels = { IT_ADMIN:'IT Admin', HRM:'HRM', HR_TALENT:'HR Talent', TM:'Training Mgr', GM:'Gen Manager', HOD:'HOD', STAFF:'Staff', TRAINEE:'Trainee' };
  var roleChips  = { IT_ADMIN:'rc-it', HRM:'rc-hrm', HOD:'rc-hod', STAFF:'rc-staff', TRAINEE:'rc-staff' };
  return users.map(function(u) {
    var stColor  = u.status === 'ACTIVE' ? 'ld-active' : u.status === 'LOCKED' ? 'ld-locked' : 'ld-inactive';
    var stLabel  = u.status === 'LOCKED' ? '<span style="color:var(--red);font-weight:600">Locked</span>' : u.status || 'Active';
    var rChip    = roleChips[u.role] || 'rc-staff';
    var rLabel   = roleLabels[u.role] || u.role;
    var canUnlock = u.status === 'LOCKED';
    var actions  = canUnlock
      ? '<button class="btn-tbl gold-btn" onclick="unlockUser(\'' + escHtml(u.user_id) + '\')">🔓 Unlock</button><button class="btn-tbl" onclick="editUser(\'' + escHtml(u.user_id) + '\')">✏ Edit</button>'
      : '<button class="btn-tbl" onclick="editUser(\'' + escHtml(u.user_id) + '\')">✏ Edit</button><button class="btn-tbl" onclick="lockUser(\'' + escHtml(u.user_id) + '\')">🔒 Lock</button>';
    /* v2.137 — di-append ke rangkaian tombol yang SUDAH jadi, bukan
       dengan menulis ulang ternary di atas. Murni menambah. */
    actions += _tombolStatusUser(u, false);
    actions += _tombolResetPw(u, false);        // v2.138

    return '<tr>' +
      '<td><div class="user-cell"><div class="user-av ' + _avtCls(u.user_id) + '">' + escHtml(getInitials(u.full_name)) + '</div>' +
      '<div><div class="u-name">' + escHtml(u.full_name) + '</div><div class="u-email">' + escHtml(u.email || '') + '</div></div></div></td>' +
      '<td>' + escHtml(u.department || '—') + ' · <span class="role-chip ' + rChip + '">' + escHtml(rLabel) + '</span></td>' +
      '<td style="font-family:monospace;font-size:12px">' + escHtml(u.user_id || '') + '</td>' +
      '<td><div class="lock-indicator"><div class="lock-dot ' + stColor + '"></div>' + stLabel + '</div></td>' +
      '<td style="font-size:12px;color:var(--gray-400)">' + escHtml(u.last_login || '—') + '</td>' +
      '<td><div class="action-btns">' + actions + '</div></td></tr>';
  }).join('');
}

/* ─── User filter/search ─── */
var _userFilterStatus = 'all';
function setUserFilter(btn, filter) {
  _userFilterStatus = filter;
  document.querySelectorAll('#d-users .mgmt-filter-pill').forEach(function(b) { b.classList.remove('active'); });
  btn.classList.add('active');
  _applyUserFilter();
}
function filterUsers() { _applyUserFilter(); }
function _applyUserFilter() {
  var term   = (document.getElementById('d-users-search') || {}).value || '';
  var users  = window._usersCache || [];
  var filtered = users.filter(function(u) {
    if (_userFilterStatus === 'active'  && u.status !== 'ACTIVE')  return false;
    if (_userFilterStatus === 'locked'  && u.status !== 'LOCKED')  return false;
    if (_userFilterStatus === 'trainee' && u.role   !== 'TRAINEE') return false;
    if (term) {
      var t = term.toLowerCase();
      return (u.full_name || '').toLowerCase().indexOf(t) >= 0 ||
             (u.user_id   || '').toLowerCase().indexOf(t) >= 0 ||
             (u.email     || '').toLowerCase().indexOf(t) >= 0;
    }
    return true;
  });
  var tbody = document.getElementById('d-users-tbody');
  if (tbody) tbody.innerHTML = _buildUserRows(filtered);
}

/* ─── Modal helpers ─── */
function openUserModal(userId) {
  var modal = document.getElementById('d-userModal');
  if (!modal) return;
  document.getElementById('d-userModal-userId').value    = userId || '';
  document.getElementById('d-userModal-title').textContent = userId ? 'Edit User' : 'Add New User';
  document.getElementById('d-userModal-submitBtn').textContent = userId ? '✓ Save Changes' : '➕ Add User';
  /* v2.128 — diisi di SINI (sebelum nilai untuk mode Edit di-set di
     bawah) supaya .value = dept milik user tetap menemukan opsinya. */
  _fillDeptSelect(document.getElementById('d-userModal-dept'), 'user');
  _refreshDepts();
  document.getElementById('d-userModal-name').value     = '';
  /* v2.140 — dikembalikan ke keadaan normal dulu. Modal ini dipakai
     ulang untuk Add dan Edit; tanpa baris ini, kunci dari sesi Edit
     sebelumnya akan terbawa ke Add User berikutnya. */
  var empIdEl = document.getElementById('d-userModal-empId');
  empIdEl.value = '';
  empIdEl.readOnly = false;
  empIdEl.style.background = '';
  empIdEl.style.color = '';
  empIdEl.style.cursor = '';
  empIdEl.removeAttribute('aria-describedby');
  var empHintEl = document.getElementById('d-userModal-empId-hint');
  if (empHintEl) empHintEl.style.display = 'none';
  document.getElementById('d-userModal-username').value = '';
  document.getElementById('d-userModal-email').value    = '';
  document.getElementById('d-userModal-dept').value     = '';
  document.getElementById('d-userModal-role').value     = '';
  document.getElementById('d-userModal-msg').style.display = 'none';

  // If edit — prefill dari cache
  if (userId) {
    var u = (window._usersCache || []).find(function(x) { return x.user_id === userId; });
    if (u) {
      document.getElementById('d-userModal-name').value     = u.full_name || '';
      empIdEl.value = u.user_id || '';
      /* v2.140 — server MENGABAIKAN field ini saat edit (user_id adalah
         kunci pencarian barisnya). Membiarkannya tampak bisa diketik
         berarti menjanjikan sesuatu yang tidak akan terjadi. */
      empIdEl.readOnly = true;
      empIdEl.style.background = 'var(--gray-100, #EFEFEC)';
      empIdEl.style.color = 'var(--gray-600, #5C5C56)';
      empIdEl.style.cursor = 'not-allowed';
      empIdEl.setAttribute('aria-describedby', 'd-userModal-empId-hint');
      if (empHintEl) empHintEl.style.display = 'block';
      document.getElementById('d-userModal-username').value = u.username  || '';
      document.getElementById('d-userModal-email').value    = u.email     || '';
      document.getElementById('d-userModal-dept').value     = u.department || '';
      document.getElementById('d-userModal-role').value     = u.role      || '';
    }
  }
  modal.classList.add('show');
}
/* ─────────────────────────────────────────────────────────────
   Esc menutup modal                                    BARU v2.133

   Sebelum ini, Esc HANYA menutup mode fokus PDF. Ketujuh modal
   desktop (d-userModal, d-courseModal, d-assignModal, d-modulesModal,
   d-confirmModal, d-quizQuestionsModal, d-quizImportModal) tidak bisa
   ditutup dengan keyboard sama sekali -- harus klik tombol X.

   Dibuat SATU handler global, bukan menambah kode ke 7 fungsi close:
   semua modal memakai pola yang sama (.modal-overlay.show), jadi satu
   tempat cukup dan modal baru yang ditambahkan nanti otomatis ikut.

   Pemilih SENGAJA dipersempit ke .modal-overlay. Ada elemen lain di
   file ini yang juga memakai kelas .show (toast, overlay PDF, panel);
   kalau pemilihnya cuma '.show', Esc akan menutup benda-benda itu
   juga -- efek samping yang tidak diminta.

   Yang ditutup adalah modal TERAKHIR di DOM -- itu yang tampil paling
   atas kalau kebetulan ada dua terbuka bersamaan.

   Prioritas mengikuti SOP kategori 14: kalau mode fokus PDF sedang
   aktif, handler lama (baris ~14170) yang menangani Esc, dan handler
   ini mundur -- supaya Esc tidak menutup dua hal sekaligus.
   ───────────────────────────────────────────────────────────── */
document.addEventListener('keydown', function(e) {
  if (e.key !== 'Escape') return;
  if (typeof _pdfFocusMode !== 'undefined' && _pdfFocusMode) return;

  var terbuka = document.querySelectorAll('.modal-overlay.show');
  if (!terbuka.length) return;
  terbuka[terbuka.length - 1].classList.remove('show');
});

function closeUserModal() {
  var modal = document.getElementById('d-userModal');
  if (modal) modal.classList.remove('show');
}
function editUser(userId) { openUserModal(userId); }

function submitUserModal() {
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) return;
  var userId   = document.getElementById('d-userModal-userId').value;
  var fullName = document.getElementById('d-userModal-name').value.trim();
  var empId    = document.getElementById('d-userModal-empId').value.trim();
  var username = document.getElementById('d-userModal-username').value.trim();
  var email    = document.getElementById('d-userModal-email').value.trim();
  var dept     = document.getElementById('d-userModal-dept').value;
  var role     = document.getElementById('d-userModal-role').value;
  var msgEl    = document.getElementById('d-userModal-msg');

  if (!fullName || !empId || !dept || !role) {
    msgEl.textContent = 'Full Name, Employee ID, Dept, and Role are required.';
    msgEl.style.display = 'block';
    return;
  }
  msgEl.style.display = 'none';
  showLoading(userId ? 'Saving changes...' : 'Adding user...', true);

  var payload = { full_name: fullName, user_id: empId, username: username, email: email, dept: dept, role: role };

  var run = google.script.run
    .withSuccessHandler(function(r) {
      hideLoading();
      if (!r || !r.success) { msgEl.textContent = (r && r.message) || 'Failed.'; msgEl.style.display = 'block'; return; }
      closeUserModal();
      showToast(userId ? 'User updated successfully.' : 'User added successfully.', 5000);
      loadUsers();
    })
    .withFailureHandler(function(e) {
      hideLoading();
      msgEl.textContent = 'Connection error.';
      msgEl.style.display = 'block';
      console.error(e);
    });

  if (userId) {
    run.editUser(sid, userId, payload);
  } else {
    run.addUser(sid, payload);
  }
}

/* ─── Course Modal ─── */
function openCourseModal(courseId) {
  var modal = document.getElementById('d-courseModal');
  if (!modal) return;
  var isEdit = !!courseId;
  /* v2.128 — lihat catatan di openUserModal. */
  _fillDeptSelect(document.getElementById('d-courseModal-dept'), 'course');
  _refreshDepts();
  document.getElementById('d-courseModal-courseId').value    = courseId || '';
  document.getElementById('d-courseModal-title').value       = '';
  document.getElementById('d-courseModal-desc').value        = '';
  document.getElementById('d-courseModal-dept').value        = 'General';
  document.getElementById('d-courseModal-passing').value     = '75';
  document.getElementById('d-courseModal-certMonths').value  = '12';
  document.getElementById('d-courseModal-deadline').value    = '30';
  document.getElementById('d-courseModal-maxAttempts').value = '5';
  document.getElementById('d-courseModal-hasCert').checked   = true;
  document.getElementById('d-courseModal-msg').style.display = 'none';
  document.getElementById('d-courseModal-modalTitle').textContent = isEdit ? 'Edit Course' : 'Create New Course';
  var submitBtn = document.getElementById('d-courseModal-submitBtn');
  if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = isEdit ? '✓ Save Changes' : '➕ Create Course'; }
  var notice = document.getElementById('d-courseModal-draftNotice');
  if (notice) notice.style.display = isEdit ? 'none' : '';

  /* v2.113 — HOD: dropdown department dikunci ke dept-nya sendiri,
     TIDAK bisa dipilih ("otomatis department dia sendiri", bukan
     dropdown dibatasi satu opsi yang tetap bisa diklik). Ini
     defense-in-depth di sisi tampilan — penjagaan SEBENARNYA sudah
     ada di server (addCourse/editCourse CourseManager.gs v1.9),
     jadi walau UI ini entah bagaimana ter-bypass, server tetap
     menolak/memaksa department yang benar. */
  var deptSelect = document.getElementById('d-courseModal-dept');
  if (deptSelect) {
    if (_lmsUser && _lmsUser.role === 'HOD') {
      deptSelect.value = _lmsUser.dept || 'General';
      deptSelect.disabled = true;
    } else {
      deptSelect.disabled = false;
    }
  }

  if (isEdit) {
    var cache = window._coursesMgmtCache || [];
    var course = null;
    for (var i = 0; i < cache.length; i++) {
      if (cache[i].course_id === courseId) { course = cache[i]; break; }
    }
    if (course) {
      document.getElementById('d-courseModal-title').value       = course.title              || '';
      document.getElementById('d-courseModal-desc').value        = course.description        || '';
      document.getElementById('d-courseModal-dept').value        = course.dept               || 'General';
      document.getElementById('d-courseModal-passing').value     = course.passing_score      || '85';
      document.getElementById('d-courseModal-certMonths').value  = course.cert_valid_months  || '12';
      document.getElementById('d-courseModal-deadline').value    = course.deadline_days      || '30';
      document.getElementById('d-courseModal-maxAttempts').value = course.max_attempts       || '';
      var hasCertVal = course.has_certificate;
      document.getElementById('d-courseModal-hasCert').checked   = hasCertVal !== false && hasCertVal !== 'FALSE' && hasCertVal !== 0;
    }
  }
  // Show/hide module section
  var modSection = document.getElementById('d-courseModal-moduleSection');
  if (modSection) modSection.style.display = isEdit ? '' : 'none';
  if (isEdit) {
    // Reset add module form to hidden
    var addForm = document.getElementById('d-addModuleForm');
    if (addForm) addForm.style.display = 'none';
    _loadModules(courseId);
  }
  modal.classList.add('show');
}

function closeCourseModal() {
  var modal = document.getElementById('d-courseModal');
  if (modal) modal.classList.remove('show');
  var submitBtn = document.getElementById('d-courseModal-submitBtn');
  if (submitBtn) { submitBtn.disabled = false; }
}

function submitCourseModal() {
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) return;
  var courseId    = document.getElementById('d-courseModal-courseId').value;
  var isEdit      = !!courseId;
  var title       = document.getElementById('d-courseModal-title').value.trim();
  var desc        = document.getElementById('d-courseModal-desc').value.trim();
  var dept        = document.getElementById('d-courseModal-dept').value;
  var passing     = parseInt(document.getElementById('d-courseModal-passing').value) || 75;
  var certMonths  = parseInt(document.getElementById('d-courseModal-certMonths').value) || 12;
  var deadline    = parseInt(document.getElementById('d-courseModal-deadline').value) || 30;
  var maxAttempts = parseInt(document.getElementById('d-courseModal-maxAttempts').value) || null;
  var hasCert     = document.getElementById('d-courseModal-hasCert').checked;
  var msgEl       = document.getElementById('d-courseModal-msg');
  var submitBtn   = document.getElementById('d-courseModal-submitBtn');

  if (!title) {
    msgEl.textContent = 'Course Title is required.';
    msgEl.style.display = 'block';
    return;
  }
  /* v2.99 — passing score punya ambang minimum perusahaan.
     Server memeriksa hal yang sama; ini supaya admin tahu lebih cepat. */
  if ((parseInt(passing) || 0) < RULE_MIN_PASSING_SCORE) {
    msgEl.textContent = 'Passing score must be at least ' + RULE_MIN_PASSING_SCORE + '%.';
    msgEl.style.display = 'block';
    return;
  }
  msgEl.style.display = 'none';

  var payload = {
    title            : title,
    description      : desc,
    department       : dept,
    passing_score    : passing,
    cert_valid_months: certMonths,
    deadline_days    : deadline,
    max_attempts     : maxAttempts,
    has_certificate  : hasCert
  };

  /* v2.115 Item 10 — peringatan Yes/No kalau course EDIT dicentang
     "Has Certificate" tapi belum punya soal quiz sama sekali. Staff
     akan menyelesaikan semua modul dan tidak mendapat apa pun tanpa
     peringatan ini (sertifikat hanya terbit lewat submitQuiz()).
     Course BARU tidak dicek — courseId belum ada, quiz mustahil ada.
     Pola confirm() sama seperti _assignCrossDept yang sudah ada. */
  if (isEdit && hasCert) {
    google.script.run
      .withSuccessHandler(function(qr) {
        var hasQuiz = qr && qr.success && Array.isArray(qr.data) && qr.data.length > 0;
        if (!hasQuiz) {
          showConfirmModal({
            title: 'No Quiz Yet',
            message: 'This course issues a certificate but has no quiz yet.\n\n' +
              'Staff will not receive a certificate until a quiz is added and passed.\n\n' +
              'Do you want to save it anyway?',
            confirmLabel: 'Save Anyway',
            onConfirm: function() {
              _proceedSubmitCourseModal(sid, courseId, isEdit, title, payload, msgEl, submitBtn);
            }
          });
          return;
        }
        _proceedSubmitCourseModal(sid, courseId, isEdit, title, payload, msgEl, submitBtn);
      })
      .withFailureHandler(function(e) {
        console.error(e);
        // Gagal cek quiz — jangan halangi admin menyimpan, lanjut seperti biasa
        _proceedSubmitCourseModal(sid, courseId, isEdit, title, payload, msgEl, submitBtn);
      })
      .getQuizQuestionsAdmin(sid, courseId);
    return;
  }

  _proceedSubmitCourseModal(sid, courseId, isEdit, title, payload, msgEl, submitBtn);
}

/* v2.115 — bagian submit sesungguhnya dari submitCourseModal, dipisah
   supaya bisa dipanggil langsung ATAU setelah pengecekan quiz Item 10
   di atas selesai (perlu jeda 1 round-trip async ke server). */
function _proceedSubmitCourseModal(sid, courseId, isEdit, title, payload, msgEl, submitBtn) {
  // Double-click protection
  if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = 'Saving...'; }
  showLoading(isEdit ? 'Saving changes...' : 'Creating course...', true);

  function _onCourseSuccess(r) {
    if (!r) {
      hideLoading();
      if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = isEdit ? '✓ Save Changes' : '➕ Create Course'; }
      return;
    }
    hideLoading();
    if (!r.success) {
      msgEl.textContent = r.message || 'Failed.';
      msgEl.style.display = 'block';
      if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = isEdit ? '✓ Save Changes' : '➕ Create Course'; }
      return;
    }
    closeCourseModal();
    showToast(isEdit ? 'Course updated successfully.' : 'Course "' + title + '" created as Draft. Add modules to publish.');
    loadCoursesMgmt();
  }

  function _onCourseError(e) {
    hideLoading();
    msgEl.textContent = 'Connection error.';
    msgEl.style.display = 'block';
    if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = isEdit ? '✓ Save Changes' : '➕ Create Course'; }
    console.error(e);
  }

  if (isEdit) {
    google.script.run
      .withSuccessHandler(_onCourseSuccess)
      .withFailureHandler(_onCourseError)
      .editCourse(sid, courseId, payload);
  } else {
    google.script.run
      .withSuccessHandler(_onCourseSuccess)
      .withFailureHandler(_onCourseError)
      .addCourse(sid, payload);
  }
}

/* ─── lockUser / unlockUser ─── */
/* ─────────────────────────────────────────────────────────────
   Nonaktifkan / Aktifkan user                        BARU v2.137

   Pengganti "hapus user". Keputusan kak Wi 28 Aug: riwayat orang
   harus tetap ada, jadi tidak ada penghapusan permanen sama sekali.

   Tidak ada fungsi baru di server -- editUser() sudah menerima
   data.status ('ACTIVE' / 'INACTIVE') dan sudah dijaga
   PERM.MANAGE_USERS.
   ───────────────────────────────────────────────────────────── */

function _tombolStatusUser(u, mobile) {
  var st = String(u.status || '').toUpperCase();

  /* JANGAN PERNAH untuk diri sendiri. Menonaktifkan akun sendiri
     berarti terkunci total: login ditolak (Auth ~126) DAN sesi yang
     sedang berjalan ikut mati (Auth ~446). Pemulihannya cuma lewat
     mengedit sheet Users kolom H secara manual. */
  if (_lmsUser && String(_lmsUser.user_id) === String(u.user_id)) return '';

  /* User LOCKED dilewati -- buka kuncinya dulu. LOCKED (terkunci
     sementara) dan INACTIVE (sudah tidak dipakai) dua hal berbeda,
     jangan ditumpuk. */
  if (st === 'LOCKED') return '';

  var mauNonaktif = (st !== 'INACTIVE');
  var label = mauNonaktif ? '🚫 Nonaktifkan' : '✅ Aktifkan';
  var fn    = mauNonaktif ? 'deactivateUser' : 'reactivateUser';
  var stop  = mobile ? 'event.stopPropagation();' : '';
  var atr   = mobile
    ? ' style="height:30px;padding:0 12px;border-radius:8px;border:1.5px solid var(--gray-200);background:var(--white);font-size:12px;font-weight:600;cursor:pointer"'
    : ' class="btn-tbl"';

  return '<button' + atr + ' onclick="' + stop + fn + '(\'' + escHtml(u.user_id) + '\')">' + label + '</button>';
}

/* ─────────────────────────────────────────────────────────────
   Reset Password oleh Admin                          BARU v2.138

   resetPassword() sudah ada di Auth.gs (baris 553) sejak lama, tapi
   tidak pernah dipanggil dari HTML. Rilis ini cuma menambah tombolnya.

   Server yang mengurus semuanya: izin (IT Admin & HRM), larangan HRM
   mereset IT_ADMIN, pembangkitan password default, dan penyetelan
   force_pw_change = TRUE. Di sini tidak ada logika keamanan sendiri.
   ───────────────────────────────────────────────────────────── */

function _tombolResetPw(u, mobile) {
  /* User INACTIVE dilewati -- dia memang tidak bisa login sama sekali,
     jadi mereset passwordnya tidak ada gunanya.
     Untuk DIRI SENDIRI sengaja tetap ditampilkan: mereset password
     sendiri itu sah dan bisa dipulihkan (rumus defaultnya diketahui,
     dan tetap diminta ganti saat login). Beda dengan Nonaktifkan yang
     bisa mengunci diri sendiri secara permanen. */
  if (String(u.status || '').toUpperCase() === 'INACTIVE') return '';

  var stop = mobile ? 'event.stopPropagation();' : '';
  var atr  = mobile
    ? ' style="height:30px;padding:0 12px;border-radius:8px;border:1.5px solid var(--gray-200);background:var(--white);font-size:12px;font-weight:600;cursor:pointer"'
    : ' class="btn-tbl"';

  return '<button' + atr + ' onclick="' + stop + 'resetUserPassword(\'' + escHtml(u.user_id) + '\')">🔑 Reset</button>';
}

function resetUserPassword(userId) {
  showConfirmModal({
    title        : 'Reset Password',
    message      : 'Reset password ' + userId + '? Password-nya kembali ke default, ' +
                   'dan dia WAJIB menggantinya saat login berikutnya. Password lamanya ' +
                   'langsung tidak berlaku.',
    confirmLabel : 'Reset Password',
    danger       : true,
    onConfirm    : function() {
      var sid = sessionStorage.getItem('lms_session_id');
      showLoading('Mereset password...', true);
      google.script.run
        .withSuccessHandler(function(r) {
          hideLoading();
          if (!r || !r.success) { showToast((r && r.message) || 'Gagal.'); return; }

          /* Ditampilkan di MODAL, bukan toast -- toast hilang beberapa
             detik, padahal password ini perlu dibaca dan disampaikan.
             Ditulis mengalir satu paragraf karena modal memakai
             textContent (baris baru tidak jadi pindah baris). */
          showConfirmModal({
            title        : 'Password Direset',
            message      : 'Password ' + userId + ' sekarang: ' +
                           (r.tempPassword || '(lihat rumus default)') +
                           '  —  sampaikan ke yang bersangkutan. Dia wajib ' +
                           'menggantinya saat login berikutnya.',
            confirmLabel : 'Selesai',
            cancelLabel  : 'Tutup',
            danger       : false,
            onConfirm    : function() {}
          });
          loadUsers();
        })
        .withFailureHandler(function(e) { hideLoading(); showToast('Error.'); console.error(e); })
        .resetPassword(sid, userId);
    }
  });
}

function _ubahStatusUser(userId, status, kata) {
  var sid = sessionStorage.getItem('lms_session_id');
  showLoading('Menyimpan...', true);
  google.script.run
    .withSuccessHandler(function(r) {
      hideLoading();
      if (!r || !r.success) { showToast((r && r.message) || 'Gagal.'); return; }
      showToast('Akun ' + userId + ' ' + kata + '.');
      loadUsers();
    })
    .withFailureHandler(function(e) { hideLoading(); showToast('Error.'); console.error(e); })
    .editUser(sid, userId, { status: status });
}

function deactivateUser(userId) {
  showConfirmModal({
    title        : 'Nonaktifkan Akun',
    message      : 'Nonaktifkan ' + userId + '? Dia tidak bisa login lagi. ' +
                   'Seluruh riwayat training, nilai quiz, dan sertifikatnya TETAP tersimpan, ' +
                   'dan akunnya bisa diaktifkan kembali kapan saja.',
    confirmLabel : 'Nonaktifkan',
    danger       : true,
    onConfirm    : function() { _ubahStatusUser(userId, 'INACTIVE', 'dinonaktifkan'); }
  });
}

function reactivateUser(userId) {
  showConfirmModal({
    title        : 'Aktifkan Kembali',
    message      : 'Aktifkan kembali ' + userId + '? Dia bisa login lagi seperti biasa.',
    confirmLabel : 'Aktifkan',
    danger       : false,
    onConfirm    : function() { _ubahStatusUser(userId, 'ACTIVE', 'diaktifkan'); }
  });
}

function lockUser(userId) {
  showConfirmModal({
    title: 'Lock Account',
    message: 'Lock account ' + userId + '?',
    confirmLabel: 'Lock Account',
    danger: true,
    onConfirm: function() {
      var sid = sessionStorage.getItem('lms_session_id');
      showLoading('Locking account...', true);
      google.script.run
        .withSuccessHandler(function(r) {
          hideLoading();
          if (!r.success) { showToast(r.message || 'Failed.'); return; }
          showToast('Account ' + userId + ' locked.');
          loadUsers();
        })
        .withFailureHandler(function(e) { hideLoading(); showToast('Error.'); console.error(e); })
        .lockUser(sid, userId);
    }
  });
}
function unlockUser(userId) {
  var sid = sessionStorage.getItem('lms_session_id');
  showLoading('Unlocking account...', true);
  google.script.run
    .withSuccessHandler(function(r) {
      hideLoading();
      if (!r.success) { showToast(r.message || 'Failed.'); return; }
      showToast('Account ' + userId + ' unlocked.');
      loadUsers();
    })
    .withFailureHandler(function(e) { hideLoading(); showToast('Error.'); console.error(e); })
    .unlockUser(sid, userId);
}

/* ─── loadCoursesMgmt ─── */
function loadCoursesMgmt() {
  if (!_lmsUser) return;
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) return;
  var cD = document.getElementById('d-courses-mgmt-content');
  var cM = document.getElementById('m-courses-mgmt-content');
  if (cD) cD.innerHTML = _loader('Loading courses...');
  if (cM) cM.innerHTML = _loader('Loading courses...');
  google.script.run
    .withSuccessHandler(function(r) {
      if (!r) return;
      if (!r.success) { showToast(r.message || 'Error'); return; }
      window._coursesMgmtCache = r.data || [];
      renderCoursesMgmt(window._coursesMgmtCache);
    })
    .withFailureHandler(function(e) { showToast('Connection error.'); console.error(e); })
    .getCoursesMgmt(sid);
}

/* ─── renderCoursesMgmt ─── */
function renderCoursesMgmt(courses) {
  var stats = {
    total    : courses.length,
    published: courses.filter(function(c) { return String(c.status).toUpperCase() === 'PUBLISHED'; }).length,
    draft    : courses.filter(function(c) { return String(c.status).toUpperCase() === 'DRAFT'; }).length,
    avgComp  : courses.length === 0 ? 0 : Math.round(courses.reduce(function(s, c) { return s + (c.completion_pct || 0); }, 0) / courses.length)
  };

  // ── DESKTOP ──
  var cD = document.getElementById('d-courses-mgmt-content');
  if (cD) {
    var miniRow =
      '<div class="stat-mini-row">' +
      '<div class="stat-mini"><div class="stat-mini-icon ic-gold">📚</div><div><div class="stat-mini-num">' + stats.total + '</div><div class="stat-mini-lbl">Total Courses</div></div></div>' +
      '<div class="stat-mini"><div class="stat-mini-icon ic-green">✅</div><div><div class="stat-mini-num" style="color:var(--green)">' + stats.published + '</div><div class="stat-mini-lbl">Published</div></div></div>' +
      '<div class="stat-mini"><div class="stat-mini-icon" style="background:rgba(245,158,11,0.1)">📝</div><div><div class="stat-mini-num" style="color:var(--amber)">' + stats.draft + '</div><div class="stat-mini-lbl">Draft</div></div></div>' +
      '<div class="stat-mini"><div class="stat-mini-icon ic-gold">📊</div><div><div class="stat-mini-num">' + stats.avgComp + '%</div><div class="stat-mini-lbl">Avg Completion</div></div></div>' +
      '</div>';

    var toolbar =
      '<div class="mgmt-toolbar">' +
      '<div class="mgmt-search"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>' +
      '<input id="d-cmgmt-search" placeholder="Search courses..." oninput="filterCoursesMgmt()"></div>' +
      '<button class="mgmt-filter-pill active" onclick="setCoursesMgmtFilter(this,\'all\')">All</button>' +
      '<button class="mgmt-filter-pill" onclick="setCoursesMgmtFilter(this,\'published\')">Published</button>' +
      '<button class="mgmt-filter-pill" onclick="setCoursesMgmtFilter(this,\'draft\')">Draft</button>' +
      '</div>';

    var cards = _buildCourseMgmtCards(courses);
    cD.innerHTML = miniRow + toolbar + '<div class="course-mgmt-grid" id="d-cmgmt-grid">' + cards + '</div>';
  }

  // ── MOBILE ──
  var cM = document.getElementById('m-courses-mgmt-content');
  if (cM) {
    var mStats = '<div class="admin-stat-scroll">' +
      '<div class="stat-chip-m"><div class="scm-icon">📚</div><div class="scm-num">' + stats.total + '</div><div class="scm-label">Total</div></div>' +
      '<div class="stat-chip-m"><div class="scm-icon">✅</div><div class="scm-num" style="color:var(--green)">' + stats.published + '</div><div class="scm-label">Published</div></div>' +
      '<div class="stat-chip-m"><div class="scm-icon">📝</div><div class="scm-num" style="color:var(--amber)">' + stats.draft + '</div><div class="scm-label">Draft</div></div>' +
      '</div>';

    var mItems = courses.map(function(c) {
      var pct     = c.completion_pct || 0;
      var stCls   = String(c.status).toUpperCase() === 'PUBLISHED' ? 's-published' : 's-draft';
      var stLabel = String(c.status).toUpperCase() === 'PUBLISHED' ? 'Published' : 'Draft';
      return '<div class="course-card-adm">' +
        '<div class="cca-thumb"><div class="cca-icon">' + (c.icon || '📚') + '</div>' +
        '<div class="cca-status ' + stCls + '">' + stLabel + '</div></div>' +
        '<div style="height:3px;background:var(--gray-100)"><div style="width:' + pct + '%;height:100%;background:linear-gradient(90deg,var(--gold),#E8C97A)"></div></div>' +
        '<div class="cca-body"><div class="cca-title">' + escHtml(c.title) + '</div>' +
        '<div class="cca-course-id">' + escHtml(c.course_id || '') + '</div>' +
        '<div class="cca-meta">' + escHtml(c.dept || 'General') + ' · ' + (c.enrolled || 0) + ' enrolled · ' + pct + '% done</div></div></div>';
    }).join('') || '<div style="padding:24px;text-align:center;color:var(--gray-400)">No courses.</div>';

    var mAddBtn =
      '<div style="margin:0 16px 16px;border:2px dashed var(--gray-200);border-radius:14px;padding:20px;text-align:center;cursor:pointer" onclick="openCourseModal()">' +
      '<div style="font-size:24px;margin-bottom:6px">➕</div><div style="font-size:13px;font-weight:600;color:var(--black)">Create New Course</div>' +
      '<div style="font-size:11.5px;color:var(--gray-500);margin-top:2px">Add videos, PDFs &amp; quiz</div></div>';

    cM.innerHTML = mStats +
      '<div class="section-header"><span class="section-title">All Courses</span><span class="section-action">' + courses.length + ' courses</span></div>' +
      '<div style="padding:0 16px;display:flex;flex-direction:column;gap:10px">' + mItems + '</div>' +
      mAddBtn + '<div style="height:20px"></div>';
  }
}

/* ─── _buildCourseMgmtCards ─── */
function _buildCourseMgmtCards(courses) {
  var cards = courses.map(function(c) {
    var pct     = c.completion_pct || 0;
    var stCls   = String(c.status).toUpperCase() === 'PUBLISHED' ? 's-published' : 's-draft';
    var stLabel = String(c.status).toUpperCase() === 'PUBLISHED' ? 'Published' : 'Draft';
    var isPublished = String(c.status).toUpperCase() === 'PUBLISHED';
    var footer = isPublished
      ? '<button class="btn-tbl" onclick="openCourseModal(\'' + escHtml(c.course_id || '') + '\')">✏ Edit</button>' +
        '<button class="btn-tbl" onclick="openModulesModal(\'' + escHtml(c.course_id || '') + '\', \'' + escHtml(c.title || '') + '\', \'' + escHtml(c.status || '') + '\')">📦 Modules</button>' +
        '<button class="btn-tbl gold-btn" onclick="openAssignModal(\'' + escHtml(c.course_id || '') + '\', \'' + escHtml(c.title || '') + '\')">👥 Assign</button>' +
        '<button class="btn-tbl danger" onclick="archiveCourse(\'' + escHtml(c.course_id || '') + '\')">🗑</button>'
      : '<button class="btn-tbl" onclick="openCourseModal(\'' + escHtml(c.course_id || '') + '\')">✏ Edit</button>' +
        '<button class="btn-tbl" onclick="openModulesModal(\'' + escHtml(c.course_id || '') + '\', \'' + escHtml(c.title || '') + '\', \'' + escHtml(c.status || '') + '\')">📦 Modules</button>' +
        '<button class="btn-tbl gold-btn" onclick="publishCourse(\'' + escHtml(c.course_id || '') + '\')">▶ Publish</button>' +
        '<button class="btn-tbl danger" onclick="archiveCourse(\'' + escHtml(c.course_id || '') + '\')">🗑</button>';
    return '<div class="course-mgmt-card">' +
      '<div class="cmg-thumb"><div class="cmg-thumb-bg"></div>' +
      '<div class="cmg-thumb-icon">' + (c.icon || '📚') + '</div>' +
      '<div class="cmg-status ' + stCls + '">' + stLabel + '</div></div>' +
      '<div class="cmg-progress-bar"><div class="cmg-progress-fill" style="width:' + pct + '%"></div></div>' +
      '<div class="cmg-body">' +
      '<div class="cmg-dept">' + escHtml(c.dept || 'General') + '</div>' +
      '<div class="cmg-title">' + escHtml(c.title) + '</div>' +
      '<div class="cmg-course-id">' + escHtml(c.course_id || '') + '</div>' +
      '<div class="cmg-stats">' +
        '<div class="cmg-stat">👥 ' + (c.enrolled || 0) + ' enrolled</div>' +
        (c.duration_min ? '<div class="cmg-stat">⏱ ' + c.duration_min + 'm</div>' : '') +
        '<div class="cmg-stat" style="color:' + (pct >= 80 ? 'var(--green)' : 'var(--gold)') + '">' + pct + '% done</div>' +
      '</div>' +
      '<div class="cmg-footer">' + footer + '</div>' +
      '</div></div>';
  }).join('');

  // Add-course CTA card
  cards += '<div class="add-course-cta" onclick="openCourseModal()">' +
    '<div class="icon">➕</div><div class="lbl">Create New Course</div><div class="sub">Add videos, PDFs &amp; quiz</div></div>';

  return cards;
}

/* ─── Course mgmt filter ─── */
var _cmgmtFilter = 'all';
function setCoursesMgmtFilter(btn, filter) {
  _cmgmtFilter = filter;
  document.querySelectorAll('#d-courses-mgmt .mgmt-filter-pill').forEach(function(b) { b.classList.remove('active'); });
  btn.classList.add('active');
  _applyCoursesMgmtFilter();
}
function filterCoursesMgmt() { _applyCoursesMgmtFilter(); }
function _applyCoursesMgmtFilter() {
  var term    = (document.getElementById('d-cmgmt-search') || {}).value || '';
  var courses = window._coursesMgmtCache || [];
  var filtered = courses.filter(function(c) {
    if (_cmgmtFilter === 'published' && String(c.status).toUpperCase() !== 'PUBLISHED') return false;
    if (_cmgmtFilter === 'draft'     && String(c.status).toUpperCase() !== 'DRAFT')     return false;
    if (term) return (c.title || '').toLowerCase().indexOf(term.toLowerCase()) >= 0;
    return true;
  });
  var grid = document.getElementById('d-cmgmt-grid');
  if (grid) grid.innerHTML = _buildCourseMgmtCards(filtered);
}

/* ─── publishCourse ─── */
function publishCourse(courseId) {
  showConfirmModal({
    title: 'Publish Course',
    message: 'Publish course ' + courseId + '?',
    confirmLabel: 'Publish',
    onConfirm: function() {
      var sid = sessionStorage.getItem('lms_session_id');
      showLoading('Publishing...', true);
      google.script.run
        .withSuccessHandler(function(r) {
          hideLoading();
          if (r && !r.success) {
            showToast(r.message || 'Failed to publish.', 5000);
          } else {
            showToast('Course published successfully!', 5000);
          }
          loadCoursesMgmt();
        })
        .withFailureHandler(function(e) {
          hideLoading();
          showToast('Connection error. Please refresh.', 5000);
          loadCoursesMgmt();
          console.error(e);
        })
        .publishCourse(sid, courseId);
    }
  });
}

/* ─── archiveCourse ─── */
function archiveCourse(courseId) {
  showConfirmModal({
    title: 'Archive Course',
    message: 'Archive course ' + courseId + '? It will be hidden from staff.',
    confirmLabel: 'Archive',
    danger: true,
    onConfirm: function() {
      var sid = sessionStorage.getItem('lms_session_id');
      if (!sid) return;
      showLoading('Archiving course...', true);
      google.script.run
        .withSuccessHandler(function(r) {
          if (!r) return;
          hideLoading();
          if (!r.success) { showToast(r.message || 'Failed to archive.'); return; }
          showToast('Course archived.');
          loadCoursesMgmt();
        })
        .withFailureHandler(function(e) { hideLoading(); showToast('Connection error.'); console.error(e); })
        .archiveCourse(sid, courseId);
    }
  });
}
/* ─── Assign Course Modal ─── */

/* Daftar dept — konsisten dengan d-courseModal-dept */
/* Daftar CADANGAN — disalin dari sheet Departments per 28 Agustus 2026.
   Dipakai HANYA sepersekian detik sebelum getDepartments() menjawab,
   dan sebagai penyelamat kalau pengambilan gagal. Sumber kebenaran
   yang sesungguhnya tetap sheet Departments.
   v2.135 — 14 nama, disalin dari sheet Departments per 28 Agustus:
   "General & Admin" diringkas jadi "GA" (DEPT13) dan "General"
   dikembalikan sebagai departemen tersendiri (DEPT14).
   Tujuh nama lama (Pastry, Stewarding, Front Office, Housekeeping,
   Purchasing, HR, Marketing) sudah TIDAK ADA lagi di sheet; user yang
   kolom departemennya masih berisi nama-nama itu perlu diperbaiki
   manual -- kak Wi menyatakan menanganinya sendiri (5 user). */
var _DEPTS = ['Kitchen','Service','Bar','BOD','Engineering','Guest Relation',
              'Public Attendant','Accounting','Security','HRD',
              'Creative & Marketing','IT','GA','General'];

/* v2.144 — departemen PAYUNG: wadah training, bukan tempat orang
   bekerja. Tidak boleh dipilih sebagai departemen seseorang di
   Add/Edit User, tapi TETAP boleh jadi target course.

   Kembarannya di server ada di Utils.gs (DEPT_PAYUNG) — di sanalah
   ditentukan siapa saja anggotanya (F&B -> Kitchen, Bar, Service).
   Yang di sini HANYA soal tampilan dropdown; kalau keduanya sempat
   berbeda, akibatnya cuma satu nama tampil/tidak tampil di menu,
   BUKAN salah hitung. Pembagian itu disengaja: keputusan siapa
   menerima course apa tidak boleh ditentukan dari sisi browser. */
var _DEPT_PAYUNG_UI = ['Food & Beverage'];

var _deptsDiambil = false;   // sekali per sesi

/* Isi sebuah <select> departemen dari _DEPTS.

   mode 'course' → opsi pertama adalah "★ SEMUA DEPARTEMEN" dengan nilai
   'General'. Nilai itu BUKAN sekadar nama departemen: kata 'General'
   ditanam sebagai teks mati di logika penugasan (Courses.gs 94 & 155,
   CourseManager.gs 136 & 1003) dan artinya "course ini milik semua
   orang". JANGAN ubah nilainya tanpa mengubah keempat baris itu juga.

   v2.135 — labelnya menyebut nama "General" lagi. Jebakan di v2.134
   (dua baris mirip: "General (All Dept)" vs "General & Admin") sudah
   hilang karena kak Wi meringkas yang kedua jadi "GA". Sekarang kata
   General muncul sekali saja dan nilainya memang nilai sihir itu.
   v2.136 — syarat mode pada baris di bawah DIHAPUS: 'General' kini
   disembunyikan dari KEDUA menu, bukan hanya menu Course. */
function _fillDeptSelect(el, mode) {
  if (!el) return;
  var terpilih = el.value;                       // pertahankan pilihan saat Edit
  var html = (mode === 'course')
    ? '<option value="General">★ General — SEMUA DEPARTEMEN</option>'
    : '<option value="">— Select —</option>';
  _DEPTS.forEach(function(d) {
    /* v2.136 — dulu: (mode === 'course' && d === 'General'). Syarat mode
       DIHAPUS supaya 'General' hilang dari KEDUA menu.
       - menu Course : sudah diwakili opsi sihir di baris pertama, jadi
         melewatinya di sini justru mencegah duplikat. Nol perubahan
         perilaku.
       - menu User   : inilah perbaikannya. 'General' adalah cakupan
         course, bukan tempat orang bekerja -- tidak boleh jadi
         departemen seseorang. (Permintaan kak Wi 28 Aug.) */
    if (d === 'General') return;
    /* v2.144 — 'Food & Beverage' disembunyikan HANYA di menu User.
       Bedanya dengan 'General' (yang hilang dari kedua menu):
       F&B justru HARUS bisa dipilih saat membuat course — itulah
       gunanya, satu training untuk Kitchen + Bar + Service
       sekaligus. Yang tidak boleh adalah menjadikannya departemen
       SESEORANG: tidak ada staff yang bekerja di "Food & Beverage",
       mereka bekerja di Kitchen, di Bar, atau di Service.
       (Permintaan kak Wi 2 September 2026.)

       Daftarnya dibaca dari DEPT_PAYUNG_UI di bawah supaya kalau
       nanti ada payung baru, cukup satu tempat yang diubah — bukan
       menambah `if` baru di sini. */
    if (mode !== 'course' && _DEPT_PAYUNG_UI.indexOf(d) !== -1) return;
    html += '<option value="' + escHtml(d) + '">' + escHtml(d) + '</option>';
  });
  el.innerHTML = html;
  if (terpilih) el.value = terpilih;
}

/* Ambil daftar departemen dari sheet. TIDAK memblokir apa pun —
   select sudah terisi dari _DEPTS sebelum ini dipanggil. Hasilnya
   dipakai saat modal dibuka berikutnya. */
function _refreshDepts() {
  if (_deptsDiambil) return;
  _deptsDiambil = true;
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) { _deptsDiambil = false; return; }

  google.script.run
    .withSuccessHandler(function(r) {
      if (!r || !r.success || !r.data || !r.data.length) return;
      _DEPTS = r.data;

      /* v2.134 — INI yang hilang di v2.128, dan itu membuat seluruh
         fitur "departemen dari sheet" tidak pernah benar-benar jalan.
         Dulu daftar terbaru cuma disimpan ke _DEPTS; dropdown yang
         sudah terlanjur terbuka tidak pernah diisi ulang, jadi yang
         dilihat selamanya daftar cadangan.
         _fillDeptSelect() aman dipanggil untuk modal yang tidak sedang
         terbuka -- fungsinya langsung keluar kalau elemennya tidak ada.
         Nilai terpilih dipertahankan; kalau departemen lama user sudah
         tidak ada di daftar baru, pilihan itu gugur dengan sendirinya
         -- memang begitu yang benar. */
      _fillDeptSelect(document.getElementById('d-userModal-dept'),   'user');
      _fillDeptSelect(document.getElementById('d-courseModal-dept'), 'course');
    })
    .withFailureHandler(function() { _deptsDiambil = false; })   // boleh dicoba lagi
    .getDepartments(sid);
}

/* ─── openModulesModal — buka modal Modules Management dari card ─── */
function openModulesModal(courseId, courseTitle, courseStatus) {
  var el = document.getElementById('d-modulesModal');
  if (!el) return;
  // Set hidden courseId di courseModal supaya _loadModules + submitAddModule tetap berfungsi
  var hiddenId = document.getElementById('d-courseModal-courseId');
  if (hiddenId) hiddenId.value = courseId || '';
  // Set title info di modal
  var titleEl = document.getElementById('d-modulesModal-courseTitle');
  if (titleEl) titleEl.textContent = (courseTitle || courseId || '—') + ' · ' + (courseStatus || '');
  // Reset add form
  var addForm = document.getElementById('d-addModuleForm');
  if (addForm) addForm.style.display = 'none';
  // Load modules
  _loadModules(courseId);
  el.classList.add('show');
}

/* ══════════════════════════════════════════════════════════════
   QUIZ QUESTION MANAGER
   openQuizQuestionsModal, _loadQuizQuestionsAdmin,
   _renderQuizQuestionsList, _openAddQQForm, _cancelQQForm,
   _openEditQuestion, submitQQForm, deleteQuestion,
   closeQuizQuestionsModal
══════════════════════════════════════════════════════════════ */

/* State untuk edit mode */
var _qqEditMode  = false;
var _qqCourseId  = '';

/* Helper dipanggil dari tombol 📝 di module list — ambil courseTitle dari modal */
function _openQQFromModule(courseId) {
  var titleEl = document.getElementById('d-modulesModal-courseTitle');
  var title   = titleEl ? titleEl.textContent.split(' ·')[0].trim() : '';
  openQuizQuestionsModal(courseId, title);
}

function openQuizQuestionsModal(courseId, courseTitle) {
  var el = document.getElementById('d-quizQuestionsModal');
  if (!el) return;
  _qqCourseId = courseId || '';
  var titleEl = document.getElementById('d-qqModal-courseTitle');
  if (titleEl) titleEl.textContent = courseTitle || courseId || '—';
  // Reset form
  _cancelQQForm();
  // Load questions
  _loadQuizQuestionsAdmin(courseId);
  el.classList.add('show');
}

function closeQuizQuestionsModal() {
  var el = document.getElementById('d-quizQuestionsModal');
  if (el) el.classList.remove('show');
  _qqCourseId = '';
  _qqEditMode = false;
}

/* ─────────────────────────────────────────────────────────────
   QUIZ IMPORT — v2.124 Phase D
   Alur 2 langkah: previewQuizImportUI() panggil previewQuizImport()
   (server, read-only) -> tampil ringkasan -> confirmQuizImportUI()
   panggil confirmQuizImport() (server, commit). Server MEMBACA
   ULANG sheet sumber saat confirm (bukan pakai hasil preview yang
   di-cache client) -- lihat catatan lengkap di QuizImport.gs kenapa
   ini disengaja, bukan boros.
───────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
   IMPORT USER MASSAL — v2.141 (Phase M)

   Dua langkah, meniru Import Quiz: previewUserImportUI() memanggil
   previewUserImport() (server, KERING) -> tampil ringkasan ->
   confirmUserImportUI() memanggil importUsersFromUrl() (commit).

   Server MEMBACA ULANG sheet saat konfirmasi, bukan memakai hasil
   preview yang tersimpan di browser. Sheet bisa berubah di antara
   dua langkah itu; yang menentukan isi database harus sheet saat
   commit, bukan salinan lama di client.
   ───────────────────────────────────────────────────────────── */

function openUserImportModal() {
  var el = document.getElementById('d-userImportModal');
  if (!el) return;
  document.getElementById('d-uiModal-step1').style.display = 'block';
  document.getElementById('d-uiModal-step2').style.display = 'none';
  document.getElementById('d-ui-sheetUrl').value = '';
  var msgEl = document.getElementById('d-uiModal-msg');
  if (msgEl) { msgEl.style.display = 'none'; msgEl.textContent = ''; }
  el.classList.add('show');
}

function closeUserImportModal() {
  var el = document.getElementById('d-userImportModal');
  if (el) el.classList.remove('show');
}

function _uiBackToStep1() {
  document.getElementById('d-uiModal-step1').style.display = 'block';
  document.getElementById('d-uiModal-step2').style.display = 'none';
}

function _uiPesan(teks) {
  var el = document.getElementById('d-uiModal-msg');
  if (el) { el.textContent = teks; el.style.display = 'block'; }
}

function previewUserImportUI() {
  var sheetUrl = (document.getElementById('d-ui-sheetUrl').value || '').trim();
  if (!sheetUrl) { _uiPesan('Link Google Sheet wajib diisi.'); return; }

  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) { _uiPesan('Sesi tidak ditemukan. Silakan login ulang.'); return; }

  var btn = document.getElementById('d-ui-previewBtn');
  btn.disabled = true; btn.textContent = 'Membaca sheet...'; btn.style.opacity = '.6';
  document.getElementById('d-uiModal-msg').style.display = 'none';

  function selesai() {
    btn.disabled = false; btn.textContent = 'Preview Import'; btn.style.opacity = '1';
  }

  google.script.run
    .withSuccessHandler(function(r) {
      selesai();
      if (!r || !r.success) { _uiPesan((r && r.message) || 'Gagal membaca sheet.'); return; }
      var d = r.data || {};

      document.getElementById('d-ui-preview-import').textContent = d.akanMasuk || 0;
      document.getElementById('d-ui-preview-skip').textContent   = d.akanSkip  || 0;

      /* Contoh baris — supaya admin bisa melihat KOLOMNYA TIDAK
         TERTUKAR sebelum 110 baris masuk. Angka saja tidak cukup:
         "110 akan masuk" tetap terlihat benar walau nama dan email
         tertukar posisinya. */
      var contoh = d.contoh || [];
      var cEl = document.getElementById('d-ui-preview-contoh');
      if (contoh.length) {
        var baris = contoh.map(function(u) {
          return '<div style="display:flex;gap:8px;padding:6px 0;border-bottom:1px solid var(--gray-100);font-size:12px">' +
                 '<div style="flex:0 0 78px;font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--gray-600)">' + escHtml(u.user_id) + '</div>' +
                 '<div style="flex:1;font-weight:600;color:var(--black)">' + escHtml(u.full_name) + '</div>' +
                 '<div style="flex:0 0 92px;text-align:right;color:var(--gray-400)">' + escHtml(u.role) + '</div>' +
                 '</div>';
        }).join('');
        cEl.innerHTML =
          '<div style="font-size:11px;color:var(--gray-400);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px">Contoh baris pertama — pastikan kolomnya tidak tertukar</div>' +
          '<div style="background:var(--gray-50);border-radius:8px;padding:4px 12px">' + baris + '</div>';
      } else { cEl.innerHTML = ''; }

      var errs = d.errors || [];
      var eEl = document.getElementById('d-ui-preview-errors');
      if (errs.length) {
        var tampil = errs.slice(0, 12).map(function(x) {
          return '<div style="padding:3px 0">• ' + escHtml(x) + '</div>';
        }).join('');
        var sisa = errs.length > 12 ? '<div style="padding:4px 0;font-style:italic">…dan ' + (errs.length - 12) + ' lagi</div>' : '';
        eEl.innerHTML =
          '<div style="font-size:12px;color:#8A4B00;background:#FFF4E5;border:1px solid #FFD9A0;border-radius:8px;padding:10px 12px;line-height:1.5">' +
          '<div style="font-weight:700;margin-bottom:4px">Baris yang akan di-skip</div>' + tampil + sisa + '</div>';
      } else { eEl.innerHTML = ''; }

      var cBtn = document.getElementById('d-ui-confirmBtn');
      if ((d.akanMasuk || 0) === 0) {
        cBtn.disabled = true; cBtn.style.opacity = '.5'; cBtn.style.cursor = 'not-allowed';
        cBtn.textContent = 'Tidak ada yang bisa diimpor';
      } else {
        cBtn.disabled = false; cBtn.style.opacity = '1'; cBtn.style.cursor = 'pointer';
        cBtn.textContent = '✓ Import ' + d.akanMasuk + ' User';
      }

      document.getElementById('d-uiModal-step1').style.display = 'none';
      document.getElementById('d-uiModal-step2').style.display = 'block';
    })
    .withFailureHandler(function(e) {
      selesai();
      _uiPesan('Koneksi gagal saat membaca sheet.');
      console.error('previewUserImportUI:', e);
    })
    .previewUserImport(sid, sheetUrl);
}

function confirmUserImportUI() {
  var sheetUrl = (document.getElementById('d-ui-sheetUrl').value || '').trim();
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid || !sheetUrl) return;

  var btn = document.getElementById('d-ui-confirmBtn');
  btn.disabled = true; btn.textContent = 'Mengimpor...'; btn.style.opacity = '.6';

  google.script.run
    .withSuccessHandler(function(r) {
      btn.disabled = false; btn.style.opacity = '1';
      if (!r || !r.success) {
        btn.textContent = '✓ Import Sekarang';
        _uiBackToStep1();
        _uiPesan((r && r.message) || 'Import gagal.');
        return;
      }
      var d = r.data || {};
      closeUserImportModal();
      showToast('Import selesai — ' + (d.imported || 0) + ' user masuk, ' + (d.skipped || 0) + ' di-skip.', 5000);
      loadUsers();   // daftar user harus langsung mencerminkan hasilnya
    })
    .withFailureHandler(function(e) {
      btn.disabled = false; btn.style.opacity = '1';
      btn.textContent = '✓ Import Sekarang';
      _uiPesan('Koneksi gagal saat mengimpor. Cek daftar user — sebagian mungkin sudah masuk.');
      console.error('confirmUserImportUI:', e);
    })
    .importUsersFromUrl(sid, sheetUrl);
}

function openQuizImportModal() {
  var el = document.getElementById('d-quizImportModal');
  if (!el) return;
  var titleEl = document.getElementById('d-qiModal-courseTitle');
  var courseTitleEl = document.getElementById('d-qqModal-courseTitle');
  if (titleEl) titleEl.textContent = (courseTitleEl ? courseTitleEl.textContent : _qqCourseId) || '—';
  // Reset ke step 1
  document.getElementById('d-qiModal-step1').style.display = 'block';
  document.getElementById('d-qiModal-step2').style.display = 'none';
  document.getElementById('d-qi-sheetUrl').value = '';
  document.getElementById('d-qi-mode').value = 'APPEND';
  var msgEl = document.getElementById('d-qiModal-msg');
  if (msgEl) { msgEl.style.display = 'none'; msgEl.textContent = ''; }
  el.classList.add('show');
}

function closeQuizImportModal() {
  var el = document.getElementById('d-quizImportModal');
  if (el) el.classList.remove('show');
}

function _qiBackToStep1() {
  document.getElementById('d-qiModal-step1').style.display = 'block';
  document.getElementById('d-qiModal-step2').style.display = 'none';
}

function previewQuizImportUI() {
  var sheetUrl = (document.getElementById('d-qi-sheetUrl').value || '').trim();
  var mode = document.getElementById('d-qi-mode').value;
  var msgEl = document.getElementById('d-qiModal-msg');

  if (!sheetUrl) {
    if (msgEl) { msgEl.textContent = 'Link Google Sheet wajib diisi.'; msgEl.style.display = 'block'; }
    return;
  }
  if (msgEl) msgEl.style.display = 'none';

  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid || !_qqCourseId) return;

  var btn = document.getElementById('d-qi-previewBtn');
  if (btn) { btn.disabled = true; btn.textContent = 'Membaca sheet...'; }

  google.script.run
    .withSuccessHandler(function(r) {
      if (btn) { btn.disabled = false; btn.textContent = 'Preview Import'; }
      if (!r || !r.success) {
        if (msgEl) { msgEl.textContent = (r && r.message) || 'Gagal membaca sheet.'; msgEl.style.display = 'block'; }
        return;
      }
      _qiRenderPreview(r.data, mode);
    })
    .withFailureHandler(function(e) {
      if (btn) { btn.disabled = false; btn.textContent = 'Preview Import'; }
      if (msgEl) { msgEl.textContent = 'Connection error. Silakan coba lagi.'; msgEl.style.display = 'block'; }
      console.error(e);
    })
    .previewQuizImport(sid, _qqCourseId, sheetUrl, mode);
}

function _qiRenderPreview(data, mode) {
  document.getElementById('d-qi-preview-import').textContent = data.toImport;
  document.getElementById('d-qi-preview-skip').textContent = data.toSkip;

  var skipListEl = document.getElementById('d-qiModal-skipList');
  if (data.skipReasons && data.skipReasons.length > 0) {
    skipListEl.innerHTML = data.skipReasons.map(function(s) {
      return '<div style="padding:6px 0;border-bottom:1px solid var(--gray-100)">Row ' + s.row + ': ' + escHtml(s.reason) + '</div>';
    }).join('');
  } else {
    skipListEl.innerHTML = '<div style="color:var(--gray-300);text-align:center;padding:8px">Tidak ada yang di-skip.</div>';
  }

  var warnEl = document.getElementById('d-qiModal-replaceWarn');
  if (warnEl) warnEl.style.display = (mode === 'REPLACE') ? 'block' : 'none';

  var confirmBtn = document.getElementById('d-qi-confirmBtn');
  if (confirmBtn) confirmBtn.disabled = (data.toImport === 0);

  document.getElementById('d-qiModal-step1').style.display = 'none';
  document.getElementById('d-qiModal-step2').style.display = 'block';
}

function confirmQuizImportUI() {
  var sheetUrl = (document.getElementById('d-qi-sheetUrl').value || '').trim();
  var mode = document.getElementById('d-qi-mode').value;
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid || !_qqCourseId || !sheetUrl) return;

  var btn = document.getElementById('d-qi-confirmBtn');
  if (btn) { btn.disabled = true; btn.textContent = 'Mengimpor...'; }
  showLoading('Importing questions...', true);

  google.script.run
    .withSuccessHandler(function(r) {
      hideLoading();
      if (btn) { btn.disabled = false; btn.textContent = 'Import Sekarang'; }
      if (!r || !r.success) {
        showToast((r && r.message) || 'Import gagal.', 5000);
        return;
      }
      showToast(r.message, 5000);
      closeQuizImportModal();
      // Refresh list soal di modal Quiz Questions yang masih terbuka
      _loadQuizQuestionsAdmin(_qqCourseId);
    })
    .withFailureHandler(function(e) {
      hideLoading();
      if (btn) { btn.disabled = false; btn.textContent = 'Import Sekarang'; }
      showToast('Connection error. Silakan coba lagi.', 5000);
      console.error(e);
    })
    .confirmQuizImport(sid, _qqCourseId, sheetUrl, mode);
}

function _loadQuizQuestionsAdmin(courseId) {
  var sid   = sessionStorage.getItem('lms_session_id');
  var listEl = document.getElementById('d-qqModal-list');
  if (!sid || !courseId) return;
  if (listEl) listEl.innerHTML = '<div style="text-align:center;padding:20px;color:var(--gray-400);font-size:12.5px">Loading questions...</div>';
  google.script.run
    .withSuccessHandler(function(r) {
      if (!r) return;
      if (!r.success) {
        if (listEl) listEl.innerHTML = '<div style="text-align:center;padding:20px;color:var(--red);font-size:12.5px">' + escHtml(r.message || 'Error') + '</div>';
        return;
      }
      _renderQuizQuestionsList(r.data || []);
    })
    .withFailureHandler(function(e) {
      if (listEl) listEl.innerHTML = '<div style="text-align:center;padding:20px;color:var(--red);font-size:12.5px">Connection error.</div>';
      console.error(e);
    })
    .getQuizQuestionsAdmin(sid, courseId);
}

function _renderQuizQuestionsList(questions) {
  var listEl = document.getElementById('d-qqModal-list');
  if (!listEl) return;
  if (questions.length === 0) {
    listEl.innerHTML = '<div style="text-align:center;padding:24px;color:var(--gray-400);font-size:12.5px;border:1.5px dashed var(--gray-200);border-radius:8px">No questions yet. Click "+ Add Question" to add the first one.</div>';
    return;
  }
  var diffLabel = { EASY: '🟢 Easy', MEDIUM: '🟡 Medium', HARD: '🔴 Hard' };
  var html = questions.map(function(q, idx) {
    var inactive = !q.is_active ? ' style="opacity:0.45"' : '';
    return '<div' + inactive + ' style="padding:10px 12px;border-radius:8px;border:1px solid var(--gray-100);margin-bottom:8px;background:var(--white)">' +
      '<div style="display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:6px">' +
        '<div style="font-size:12.5px;font-weight:600;color:var(--black);flex:1">' +
          '<span style="font-size:11px;font-weight:700;color:var(--gold);margin-right:6px">Q' + (idx+1) + '</span>' +
          escHtml(q.question_text) +
          (!q.is_active ? ' <span style="font-size:10px;color:var(--gray-400);font-weight:400">(inactive)</span>' : '') +
        '</div>' +
        '<div style="display:flex;gap:4px;flex-shrink:0">' +
          '<button onclick="_openEditQuestion(' + escHtml(JSON.stringify(q)) + ')" ' +
          'style="height:26px;padding:0 10px;border-radius:6px;border:1.5px solid var(--gray-200);background:var(--white);font-size:11px;font-weight:600;cursor:pointer;color:var(--black)">✏ Edit</button>' +
          '<button onclick="deleteQuestion(\'' + escHtml(q.question_id) + '\')" ' +
          'style="height:26px;padding:0 8px;border-radius:6px;border:none;background:rgba(239,68,68,0.1);font-size:11px;font-weight:600;cursor:pointer;color:#DC2626">🗑</button>' +
        '</div>' +
      '</div>' +
      '<div style="display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;font-size:11.5px;color:var(--gray-600);margin-bottom:4px">' +
        '<span>' + (q.correct_option === 'A' ? '<strong style="color:var(--green)">✓ A: ' : 'A: ') + escHtml(q.option_a || '') + '</span>' +
        '<span>' + (q.correct_option === 'B' ? '<strong style="color:var(--green)">✓ B: ' : 'B: ') + escHtml(q.option_b || '') + (q.correct_option === 'A'||q.correct_option === 'B' ? '</strong>' : '') + '</span>' +
        '<span>' + (q.correct_option === 'C' ? '<strong style="color:var(--green)">✓ C: ' : 'C: ') + escHtml(q.option_c || '') + '</span>' +
        '<span>' + (q.correct_option === 'D' ? '<strong style="color:var(--green)">✓ D: ' : 'D: ') + escHtml(q.option_d || '') + (q.correct_option === 'C'||q.correct_option === 'D' ? '</strong>' : '') + '</span>' +
      '</div>' +
      '<div style="font-size:11px;color:var(--gray-400)">' + (diffLabel[q.difficulty] || q.difficulty) +
        (q.explanation ? ' · <em>' + escHtml(q.explanation.substring(0,60)) + (q.explanation.length>60?'…':'') + '</em>' : '') +
      '</div>' +
    '</div>';
  }).join('');
  listEl.innerHTML = html;
}

function _openAddQQForm() {
  _qqEditMode = false;
  var idEl   = document.getElementById('d-qq-edit-id');
  var title  = document.getElementById('d-qqModal-form-title');
  var formEl = document.getElementById('d-qqModal-form');
  var msgEl  = document.getElementById('d-qqModal-form-msg');
  var btn    = document.getElementById('d-qq-submitBtn');
  if (idEl)   idEl.value   = '';
  if (title)  title.textContent = '➕ Add Question';
  if (btn)    { btn.textContent = 'Save Question'; btn.disabled = false; }
  if (msgEl)  msgEl.style.display = 'none';
  // Reset semua field
  ['d-qq-question','d-qq-opt-a','d-qq-opt-b','d-qq-opt-c','d-qq-opt-d','d-qq-explanation'].forEach(function(id) {
    var el = document.getElementById(id); if (el) el.value = '';
  });
  var corEl  = document.getElementById('d-qq-correct');
  var diffEl = document.getElementById('d-qq-difficulty');
  if (corEl)  corEl.value  = 'A';
  if (diffEl) diffEl.value = 'MEDIUM';
  if (formEl) formEl.style.display = '';
  // Scroll form ke view
  if (formEl) formEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

function _cancelQQForm() {
  var formEl = document.getElementById('d-qqModal-form');
  if (formEl) formEl.style.display = 'none';
  _qqEditMode = false;
}

function _openEditQuestion(q) {
  _qqEditMode = true;
  var idEl   = document.getElementById('d-qq-edit-id');
  var title  = document.getElementById('d-qqModal-form-title');
  var formEl = document.getElementById('d-qqModal-form');
  var msgEl  = document.getElementById('d-qqModal-form-msg');
  var btn    = document.getElementById('d-qq-submitBtn');
  if (idEl)   idEl.value = q.question_id || '';
  if (title)  title.textContent = '✏ Edit Question';
  if (btn)    { btn.textContent = 'Update Question'; btn.disabled = false; }
  if (msgEl)  msgEl.style.display = 'none';
  // Populate form fields
  var setVal = function(id, val) { var el = document.getElementById(id); if (el) el.value = val || ''; };
  setVal('d-qq-question',    q.question_text || '');
  setVal('d-qq-opt-a',       q.option_a      || '');
  setVal('d-qq-opt-b',       q.option_b      || '');
  setVal('d-qq-opt-c',       q.option_c      || '');
  setVal('d-qq-opt-d',       q.option_d      || '');
  setVal('d-qq-correct',     q.correct_option || 'A');
  setVal('d-qq-difficulty',  q.difficulty    || 'MEDIUM');
  setVal('d-qq-explanation', q.explanation   || '');
  if (formEl) formEl.style.display = '';
  if (formEl) formEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

function submitQQForm() {
  var sid    = sessionStorage.getItem('lms_session_id');
  var msgEl  = document.getElementById('d-qqModal-form-msg');
  var btn    = document.getElementById('d-qq-submitBtn');

  var getVal = function(id) { var el = document.getElementById(id); return el ? el.value.trim() : ''; };
  var question   = getVal('d-qq-question');
  var optA       = getVal('d-qq-opt-a');
  var optB       = getVal('d-qq-opt-b');
  var optC       = getVal('d-qq-opt-c');
  var optD       = getVal('d-qq-opt-d');
  var correct    = getVal('d-qq-correct');
  var difficulty = getVal('d-qq-difficulty');
  var explanation= getVal('d-qq-explanation');

  // Validasi
  if (!question) { msgEl.textContent = 'Question text is required.'; msgEl.style.display='block'; return; }
  if (!optA || !optB || !optC || !optD) { msgEl.textContent = 'All 4 options are required.'; msgEl.style.display='block'; return; }

  msgEl.style.display = 'none';
  if (btn) { btn.disabled = true; btn.textContent = 'Saving...'; }

  var payload = {
    question_text : question,
    option_a      : optA,
    option_b      : optB,
    option_c      : optC,
    option_d      : optD,
    correct_option: correct,
    difficulty    : difficulty,
    explanation   : explanation
  };

  if (_qqEditMode) {
    // Edit existing
    var questionId = getVal('d-qq-edit-id');
    if (!questionId) return;
    google.script.run
      .withSuccessHandler(function(r) {
        if (btn) { btn.disabled = false; btn.textContent = 'Update Question'; }
        if (!r || !r.success) {
          msgEl.textContent = (r && r.message) || 'Failed to update.';
          msgEl.style.display = 'block';
          return;
        }
        _cancelQQForm();
        showToast('Question updated successfully.');
        _loadQuizQuestionsAdmin(_qqCourseId);
      })
      .withFailureHandler(function(e) {
        if (btn) { btn.disabled = false; btn.textContent = 'Update Question'; }
        showToast('Connection error.'); console.error(e);
      })
      .editQuizQuestion(sid, questionId, payload);
  } else {
    // Add new
    payload.course_id = _qqCourseId;
    google.script.run
      .withSuccessHandler(function(r) {
        if (btn) { btn.disabled = false; btn.textContent = 'Save Question'; }
        if (!r || !r.success) {
          msgEl.textContent = (r && r.message) || 'Failed to add question.';
          msgEl.style.display = 'block';
          return;
        }
        _cancelQQForm();
        showToast('Question added successfully.');
        _loadQuizQuestionsAdmin(_qqCourseId);
      })
      .withFailureHandler(function(e) {
        if (btn) { btn.disabled = false; btn.textContent = 'Save Question'; }
        showToast('Connection error.'); console.error(e);
      })
      .addQuizQuestion(sid, payload);
  }
}

function deleteQuestion(questionId) {
  showConfirmModal({
    title: 'Delete Question',
    message: 'Delete this question? If the course has existing attempts, it will be deactivated instead.',
    confirmLabel: 'Delete',
    danger: true,
    onConfirm: function() {
      var sid = sessionStorage.getItem('lms_session_id');
      if (!sid || !questionId) return;
      google.script.run
        .withSuccessHandler(function(r) {
          if (!r || !r.success) { showToast(r && r.message || 'Failed to delete.'); return; }
          showToast(r.message || 'Question deleted.');
          _loadQuizQuestionsAdmin(_qqCourseId);
        })
        .withFailureHandler(function(e) { showToast('Connection error.'); console.error(e); })
        .deleteQuizQuestion(sid, questionId);
    }
  });
}

function closeModulesModal() {
  var el = document.getElementById('d-modulesModal');
  if (el) el.classList.remove('show');
}

function openAssignModal(courseId, courseTitle) {
  var el = document.getElementById('d-assignModal');
  if (!el) return;
  // Reset state
  document.getElementById('d-assignModal-courseId').value    = courseId    || '';
  document.getElementById('d-assignModal-courseTitle').textContent = courseTitle || courseId || '—';
  document.getElementById('d-assignModal-type').value        = 'DEPT';
  document.getElementById('d-assignModal-deadline').value    = '';
  var msg = document.getElementById('d-assignModal-msg');
  if (msg) { msg.style.display = 'none'; msg.textContent = ''; }
  var btn = document.getElementById('d-assignModal-submitBtn');
  if (btn) btn.disabled = false;
  _populateAssignTarget();
  el.classList.add('show');
}

function closeAssignModal() {
  var el = document.getElementById('d-assignModal');
  if (el) el.classList.remove('show');
}

/* Populate dropdown target sesuai assign type */
function _populateAssignTarget() {
  var type      = (document.getElementById('d-assignModal-type') || {}).value || 'DEPT';
  var targetEl  = document.getElementById('d-assignModal-target');
  var labelEl   = document.getElementById('d-assignModal-targetLabel');
  if (!targetEl) return;

  targetEl.innerHTML = '<option value="">— Select —</option>';

  if (type === 'DEPT') {
    if (labelEl) labelEl.textContent = 'Department *';
    _DEPTS.forEach(function(d) {
      var opt = document.createElement('option');
      opt.value       = d;
      opt.textContent = d;
      targetEl.appendChild(opt);
    });
  } else {
    // USER — populate dari _usersCache, filter is_trainable=TRUE & ACTIVE (semua role)
    if (labelEl) labelEl.textContent = 'Staff *';
    var users = (window._usersCache || []).filter(function(u) {
      return u.status === 'ACTIVE' && u.is_trainable !== false && u.is_trainable !== 'FALSE';
    });
    if (users.length === 0) {
      // Belum ada cache — fetch dulu
      var sid = sessionStorage.getItem('lms_session_id');
      if (sid) {
        google.script.run
          .withSuccessHandler(function(r) {
            if (r && r.success) {
              window._usersCache = r.data || [];
              _populateAssignTarget();
            }
          })
          .getUsers(sid);
      }
      return;
    }
    users.forEach(function(u) {
      var opt = document.createElement('option');
      opt.value       = u.user_id;
      opt.textContent = u.full_name + ' (' + (u.dept || '—') + ')';
      targetEl.appendChild(opt);
    });
  }
}

/* ═══════════════════════════════════════════════════════
   KONFIRMASI ASSIGN LINTAS DEPARTEMEN — v2.102
   Membandingkan departemen COURSE dengan departemen SASARAN.
   Course 'General' berlaku untuk semua, jadi tidak pernah dianggap
   lintas departemen. Ini konfirmasi, bukan larangan — admin tetap
   boleh melanjutkan, dan kejadiannya tercatat di Activity Log.
   Sisi server (CourseManager v1.8) menandainya di kolom detail.
═══════════════════════════════════════════════════════ */
function _assignCrossDept(courseId, type, target) {
  var out = { cross: false, courseDept: '', targetDept: '' };
  try {
    var courses = window._coursesMgmtCache || [];
    var cDept = '';
    for (var i = 0; i < courses.length; i++) {
      if (courses[i].course_id === courseId) {
        cDept = String(courses[i].dept || courses[i].department || '').trim();
        break;
      }
    }
    out.courseDept = cDept;
    if (!cDept || cDept === 'General') return out;

    var tDept = '';
    if (type === 'DEPT') {
      tDept = String(target || '').trim();
    } else if (type === 'USER') {
      var users = window._usersCache || [];
      for (var j = 0; j < users.length; j++) {
        if (users[j].user_id === target) { tDept = String(users[j].dept || '').trim(); break; }
      }
    } else {
      return out;   /* ROLE — tidak ada dept untuk dibandingkan */
    }

    out.targetDept = tDept;
    if (tDept && tDept !== cDept) out.cross = true;
    return out;
  } catch (e) {
    console.error(e);
    return out;      /* ragu-ragu = jangan menghalangi admin */
  }
}

function submitAssignCourse() {
  var courseId = (document.getElementById('d-assignModal-courseId') || {}).value || '';
  var type     = (document.getElementById('d-assignModal-type')     || {}).value || '';
  var target   = (document.getElementById('d-assignModal-target')   || {}).value || '';
  var deadline = (document.getElementById('d-assignModal-deadline') || {}).value || '';
  var msg      = document.getElementById('d-assignModal-msg');
  var btn      = document.getElementById('d-assignModal-submitBtn');

  // Validasi
  if (!courseId || !type || !target) {
    if (msg) { msg.textContent = 'Please select a target.'; msg.style.display = 'block'; }
    return;
  }
  /* v2.102 — konfirmasi kalau departemennya berbeda */
  var xd = _assignCrossDept(courseId, type, target);

  function _doAssign() {
    if (msg) msg.style.display = 'none';
    if (btn) btn.disabled = true;

    var sid = sessionStorage.getItem('lms_session_id');
    if (!sid) return;

    showLoading('Assigning course...', true);
    google.script.run
      .withSuccessHandler(function(r) {
        hideLoading();
        if (btn) btn.disabled = false;
        if (!r || !r.success) {
          if (msg) { msg.textContent = (r && r.message) || 'Failed to assign.'; msg.style.display = 'block'; }
          return;
        }
        closeAssignModal();
        showToast('Course assigned successfully!', 4000);
        loadCoursesMgmt();
      })
      .withFailureHandler(function(e) {
        hideLoading();
        if (btn) btn.disabled = false;
        if (msg) { msg.textContent = 'Connection error. Please try again.'; msg.style.display = 'block'; }
        console.error(e);
      })
      .assignCourse(sid, {
        course_id    : courseId,
        assign_type  : type,
        assign_target: target,
        deadline     : deadline,
        notes        : ''
      });
  }

  if (xd.cross) {
    var who = (type === 'DEPT') ? ('the ' + xd.targetDept + ' department') : ('this staff member (' + xd.targetDept + ')');
    showConfirmModal({
      title: 'Different Department',
      message: 'This course belongs to ' + xd.courseDept + ', but you are assigning it to ' + who + '.\n\nAssign anyway?',
      confirmLabel: 'Assign Anyway',
      onConfirm: _doAssign
    });
    return;
  }

  _doAssign();
}

/* ─── Module Management Functions ─── */

function extractDriveFileId(url) {
  if (!url) return '';
  var m = url.match(/\/file\/d\/([a-zA-Z0-9_-]+)/);
  if (m) return m[1];
  var m2 = url.match(/[?&]id=([a-zA-Z0-9_-]+)/);
  if (m2) return m2[1];
  // If already looks like a file ID (20+ alphanumeric chars)
  if (/^[a-zA-Z0-9_-]{20,}$/.test(url.trim())) return url.trim();
  return '';
}

function onModuleTypeChange() {
  var type        = document.getElementById('d-mod-type').value;
  var sourceField = document.getElementById('d-mod-source-field');
  var urlField    = document.getElementById('d-mod-url-field');
  var durField    = document.getElementById('d-mod-duration-field');
  var watchField  = document.getElementById('d-mod-watch-field');
  if (!urlField || !durField || !watchField) return;
  if (type === 'VIDEO') {
    if (sourceField) sourceField.style.display = '';
    urlField.style.display   = '';
    durField.style.display   = '';
    watchField.style.display = 'none'; // Removed — always 100%
    onModuleSourceChange();
  } else if (type === 'PDF') {
    // PDF hanya GDrive
    if (sourceField) sourceField.style.display = 'none';
    var srcSel = document.getElementById('d-mod-source-type');
    if (srcSel) srcSel.value = 'GDRIVE';
    var numQEl = document.getElementById('d-mod-numq');
    if (numQEl) numQEl.value = '20';
    urlField.style.display   = '';
    durField.style.display   = 'none';
    watchField.style.display = 'none';
    onModuleSourceChange();
  } else {
    // QUIZ
    if (sourceField) sourceField.style.display = 'none';
    urlField.style.display   = 'none';
    durField.style.display   = 'none';
    watchField.style.display = 'none';
    var numQField = document.getElementById('d-mod-numq-field');
    if (numQField) numQField.style.display = '';
  }
  // Sembunyikan num_questions field kalau bukan QUIZ
  if (type !== 'QUIZ') {
    var numQField2 = document.getElementById('d-mod-numq-field');
    if (numQField2) numQField2.style.display = 'none';
  }
}

/* Update label dan placeholder URL input sesuai source type */
function onModuleSourceChange() {
  var srcType = (document.getElementById('d-mod-source-type') || {}).value || 'GDRIVE';
  var label   = document.getElementById('d-mod-url-label');
  var input   = document.getElementById('d-mod-url');
  if (srcType === 'YOUTUBE') {
    if (label) label.textContent = 'YouTube URL or Video ID';
    if (input) input.placeholder = 'e.g. https://youtu.be/dQw4w9WgXcQ';
  } else {
    if (label) label.textContent = 'Google Drive Share URL';
    if (input) input.placeholder = 'Paste Drive share link here...';
  }
}

/* ═══════════════════════════════════════════════
   ATURAN MUTU — v2.99
   Harus sama dengan RULE_* di CourseManager_v1.6.gs.
   Ini hanya untuk kenyamanan; server tetap penjaga akhir.
═══════════════════════════════════════════════ */
var RULE_MIN_QUIZ_SERVED   = 15;
var RULE_MIN_PASSING_SCORE = 85;

/* module_id yang sedang diedit; kosong berarti mode tambah */
var _editingModuleId = '';

/* Buka form dalam mode EDIT, terisi data modul yang dipilih */
function editModuleById(moduleId, courseId) {
  var cache = window._modulesCache || [];
  var m = null;
  for (var i = 0; i < cache.length; i++) {
    if (String(cache[i].module_id) === String(moduleId)) { m = cache[i]; break; }
  }
  if (!m) { showToast('Module not found.'); return; }

  _editingModuleId = String(moduleId);

  var form = document.getElementById('d-addModuleForm');
  if (form) form.style.display = '';

  var setv = function(id, v) { var el = document.getElementById(id); if (el) el.value = v; };
  setv('d-mod-title',       m.title || '');
  setv('d-mod-type',        m.type || 'VIDEO');
  setv('d-mod-source-type', m.source_type || 'GDRIVE');
  setv('d-mod-url',         m.drive_file_id || '');
  setv('d-mod-duration',    m.duration_min || '');
  setv('d-mod-watch',       m.min_watch_pct || 95);
  setv('d-mod-numq',        m.num_questions || '');

  var msg = document.getElementById('d-mod-msg');
  if (msg) msg.style.display = 'none';
  var btn = document.getElementById('d-mod-submitBtn');
  if (btn) { btn.disabled = false; btn.textContent = 'Update Module'; }

  onModuleTypeChange();
  onModuleSourceChange();
  if (form && form.scrollIntoView) form.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

function toggleAddModuleForm() {
  var form = document.getElementById('d-addModuleForm');
  if (!form) return;
  var isHidden = form.style.display === 'none';
  form.style.display = isHidden ? '' : 'none';
  if (isHidden) {
    _editingModuleId = '';   // v2.99 — kembali ke mode tambah
    // Reset form fields when opening
    document.getElementById('d-mod-title').value           = '';
    document.getElementById('d-mod-type').value            = 'VIDEO';
    document.getElementById('d-mod-url').value             = '';
    document.getElementById('d-mod-duration').value        = '';
    document.getElementById('d-mod-watch').value           = '95';
    document.getElementById('d-mod-msg').style.display     = 'none';
    var srcSel = document.getElementById('d-mod-source-type');
    if (srcSel) srcSel.value = 'GDRIVE';
    var submitBtn = document.getElementById('d-mod-submitBtn');
    if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Save Module'; }
    onModuleTypeChange();
  }
}

function _loadModules(courseId) {
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid || !courseId) return;
  var listEl  = document.getElementById('d-moduleList');
  var sortRow = document.getElementById('d-moduleSortRow');
  if (listEl) listEl.innerHTML = '<div style="text-align:center;padding:20px;color:var(--gray-400);font-size:12.5px">Loading modules...</div>';
  if (sortRow) sortRow.style.display = 'none';
  google.script.run
    .withSuccessHandler(function(r) {
      if (!r) return;
      if (!r.success) {
        if (listEl) listEl.innerHTML = '<div style="color:var(--red);font-size:12.5px;padding:8px">' + escHtml(r.message || 'Failed to load modules.') + '</div>';
        return;
      }
      window._modulesCache = r.data || [];
      _renderModuleList(window._modulesCache, courseId);
    })
    .withFailureHandler(function(e) {
      if (listEl) listEl.innerHTML = '<div style="color:var(--red);font-size:12.5px;padding:8px">Connection error.</div>';
      console.error(e);
    })
    .getModules(sid, courseId);
}

function _renderModuleList(modules, courseId) {
  var listEl  = document.getElementById('d-moduleList');
  var sortRow = document.getElementById('d-moduleSortRow');
  if (!listEl) return;

  if (modules.length === 0) {
    listEl.innerHTML = '<div style="text-align:center;padding:16px;color:var(--gray-400);font-size:12.5px;border:1.5px dashed var(--gray-200);border-radius:8px">No modules yet. Click "+ Add Module" to get started.</div>';
    if (sortRow) sortRow.style.display = 'none';
    return;
  }

  // Determine if course is Draft (only Draft allows delete)
  var cache   = window._coursesMgmtCache || [];
  var isDraft = false;
  for (var i = 0; i < cache.length; i++) {
    if (cache[i].course_id === courseId) {
      isDraft = String(cache[i].status).toUpperCase() === 'DRAFT';
      break;
    }
  }

  var typeIcon = { VIDEO: '🎬', PDF: '📄', QUIZ: '📝' };

  var rows = modules.map(function(m) {
    var icon      = typeIcon[m.type] || '📦';
    var dur       = m.duration_min ? m.duration_min + ' min' : '—';
    var quizBtn = m.type === 'QUIZ'
      ? '<button onclick="_openQQFromModule(\'' + escHtml(courseId) + '\')" '
        + 'style="height:28px;padding:0 10px;border-radius:6px;border:none;background:rgba(201,160,101,0.12);color:var(--black);font-size:11.5px;font-weight:600;cursor:pointer;flex-shrink:0">📝 Questions</button>'
      : '';
    /* v2.99 — Edit tersedia untuk Draft maupun Published.
       Justru di course Published-lah admin perlu memperbaiki isi modul
       (mis. num_questions) tanpa harus meng-unpublish dulu. */
    var editBtn =
      '<button onclick="editModuleById(\'' + escHtml(m.module_id) + '\',\'' + escHtml(courseId) + '\')" ' +
      'title="Edit module" ' +
      'style="height:28px;padding:0 10px;border-radius:6px;border:none;background:rgba(59,130,246,0.12);color:#1D4ED8;font-size:11.5px;font-weight:600;cursor:pointer;flex-shrink:0">✏ Edit</button>';

    /* Delete tetap khusus Draft — menghapus modul dari course Published
       akan meninggalkan baris Progress & Certificate yang menggantung. */
    var deleteBtn = isDraft
      ? '<button onclick="deleteModuleById(\'' + escHtml(m.module_id) + '\',\'' + escHtml(courseId) + '\')" ' +
        'title="Delete module" ' +
        'style="height:28px;padding:0 10px;border-radius:6px;border:none;background:rgba(239,68,68,0.1);color:#DC2626;font-size:11.5px;font-weight:600;cursor:pointer;flex-shrink:0">🗑</button>'
      : '<span title="Delete is only available while the course is in Draft" style="font-size:11px;color:var(--gray-400);flex-shrink:0">Published</span>';
    return '<div style="display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;border:1px solid var(--gray-100);margin-bottom:6px;background:var(--white)">' +
      '<input type="number" value="' + m.order_num + '" ' +
      'data-module-id="' + escHtml(m.module_id) + '" data-original="' + m.order_num + '" ' +
      'min="1" style="width:44px;height:28px;border:1.5px solid var(--gray-200);border-radius:6px;text-align:center;font-size:12px;padding:0 4px;flex-shrink:0">' +
      '<span style="font-size:14px">' + icon + '</span>' +
      '<div style="flex:1;min-width:0">' +
      '<div style="font-size:12.5px;font-weight:600;color:var(--black);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">' + escHtml(m.title) + '</div>' +
      '<div style="font-size:11px;color:var(--gray-500)">' + m.type +
      (m.type === 'QUIZ' ? '' : (m.source_type === 'YOUTUBE' ? ' · <span style="color:#FF0000;font-weight:600">YT</span>' : ' · GDrive')) +
      ' · ' + dur + '</div>' +
      '</div>' +
      quizBtn +
      editBtn +
      deleteBtn +
      '</div>';
  }).join('');

  listEl.innerHTML = rows;
  if (sortRow) sortRow.style.display = modules.length > 1 ? 'flex' : 'none';
}

function sortModules() {
  var sid      = sessionStorage.getItem('lms_session_id');
  var courseId = document.getElementById('d-courseModal-courseId').value;
  if (!sid || !courseId) return;
  var inputs  = document.querySelectorAll('#d-moduleList input[data-module-id]');
  var changes = [];
  inputs.forEach(function(inp) {
    var moduleId = inp.getAttribute('data-module-id');
    var original = parseInt(inp.getAttribute('data-original'));
    var newOrder = parseInt(inp.value) || 1;
    if (newOrder !== original) changes.push({ moduleId: moduleId, order_num: newOrder });
  });
  if (changes.length === 0) { showToast('No order changes detected.'); return; }

  var done = 0;
  var failed = 0;
  changes.forEach(function(ch) {
    google.script.run
      .withSuccessHandler(function(r) {
        if (!r) { done++; return; }
        done++;
        if (!r.success) failed++;
        if (done === changes.length) {
          showToast(failed === 0 ? 'Module order updated.' : 'Some updates failed.');
          _loadModules(courseId);
        }
      })
      .withFailureHandler(function(e) {
        done++; failed++;
        if (done === changes.length) {
          showToast('Connection error during sort.');
          _loadModules(courseId);
        }
        console.error(e);
      })
      .editModule(sid, ch.moduleId, { order_num: ch.order_num });
  });
}

function submitAddModule() {
  var sid      = sessionStorage.getItem('lms_session_id');
  var courseId = document.getElementById('d-courseModal-courseId').value;
  if (!sid || !courseId) return;

  var title     = document.getElementById('d-mod-title').value.trim();
  var type      = document.getElementById('d-mod-type').value;
  var urlRaw    = document.getElementById('d-mod-url').value.trim();
  var duration  = parseInt(document.getElementById('d-mod-duration').value) || 0;
  var watchPct  = 100; // Always 100% — Min Watch % field removed
  var msgEl     = document.getElementById('d-mod-msg');
  var submitBtn = document.getElementById('d-mod-submitBtn');

  if (!title) {
    msgEl.textContent = 'Module title is required.';
    msgEl.style.display = 'block';
    return;
  }

  var sourceType  = (document.getElementById('d-mod-source-type') || {}).value || 'GDRIVE';
  var driveFileId = '';

  if (type !== 'QUIZ') {
    if (sourceType === 'YOUTUBE') {
      // Kirim raw URL/ID ke GAS — GAS yang extract video ID
      if (!urlRaw) {
        msgEl.textContent = 'Please enter a YouTube URL or video ID.';
        msgEl.style.display = 'block';
        return;
      }
      driveFileId = urlRaw;
    } else {
      // GDRIVE — cek dulu kalau user salah paste YouTube URL
      if (urlRaw && (urlRaw.indexOf('youtube.com') >= 0 || urlRaw.indexOf('youtu.be') >= 0)) {
        msgEl.textContent = 'This looks like a YouTube URL. Please change Source Type to "YouTube".';
        msgEl.style.display = 'block';
        return;
      }
      driveFileId = extractDriveFileId(urlRaw);
      if (!driveFileId) {
        msgEl.textContent = 'Please enter a valid Google Drive share URL.';
        msgEl.style.display = 'block';
        return;
      }
    }
  }

  msgEl.style.display = 'none';
  if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = 'Saving...'; }

  var numQuestions = type === 'QUIZ' ? (parseInt((document.getElementById('d-mod-numq') || {}).value) || 0) : 0;

  /* v2.99 — cegat lebih awal supaya tidak perlu bolak-balik ke server.
     Server tetap memeriksa hal yang sama; ini sekadar kenyamanan. */
  if (type === 'QUIZ' && numQuestions < RULE_MIN_QUIZ_SERVED) {
    msgEl.textContent = 'A quiz module must serve at least ' + RULE_MIN_QUIZ_SERVED +
                        ' questions. Current value: ' + numQuestions + '.';
    msgEl.style.display = 'block';
    if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = _editingModuleId ? 'Update Module' : 'Save Module'; }
    return;
  }

  var payload = {
    course_id    : courseId,
    title        : title,
    type         : type,
    source_type  : sourceType,
    drive_file_id: driveFileId,
    duration_min : type === 'VIDEO' ? duration : 0,
    min_watch_pct: type === 'VIDEO' ? watchPct : 95,
    num_questions: numQuestions
  };

  var runner = google.script.run
    .withSuccessHandler(function(r) {
      if (!r) {
        if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = _editingModuleId ? 'Update Module' : 'Save Module'; }
        return;
      }
      if (!r.success) {
        msgEl.textContent = r.message || 'Failed to save module.';
        msgEl.style.display = 'block';
        if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = _editingModuleId ? 'Update Module' : 'Save Module'; }
        return;
      }
      var wasEdit = !!_editingModuleId;
      _editingModuleId = '';
      toggleAddModuleForm();
      showToast('Module "' + title + '" ' + (wasEdit ? 'updated' : 'added') + ' successfully.');
      _loadModules(courseId);
    })
    .withFailureHandler(function(e) {
      msgEl.textContent = 'Connection error.';
      msgEl.style.display = 'block';
      if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = _editingModuleId ? 'Update Module' : 'Save Module'; }
      console.error(e);
    });

  /* v2.99 — satu form, dua tujuan. editModule tidak menerima course_id,
     jadi field itu dibuang dari payload saat mode edit. */
  if (_editingModuleId) {
    var editPayload = {
      title        : payload.title,
      type         : payload.type,
      source_type  : payload.source_type,
      drive_file_id: payload.drive_file_id,
      duration_min : payload.duration_min,
      min_watch_pct: payload.min_watch_pct,
      num_questions: payload.num_questions
    };
    runner.editModule(sid, _editingModuleId, editPayload);
  } else {
    runner.addModule(sid, payload);
  }
}

function deleteModuleById(moduleId, courseId) {
  /* v2.99 — sebut nama modulnya supaya admin tidak salah hapus */
  var nm = '';
  var cache = window._modulesCache || [];
  for (var i = 0; i < cache.length; i++) {
    if (String(cache[i].module_id) === String(moduleId)) { nm = cache[i].title || ''; break; }
  }
  var ask = nm
    ? 'Delete module "' + nm + '"? This cannot be undone.'
    : 'Delete this module? This cannot be undone.';
  showConfirmModal({
    title: 'Delete Module',
    message: ask,
    confirmLabel: 'Delete',
    danger: true,
    onConfirm: function() {
      var sid = sessionStorage.getItem('lms_session_id');
      if (!sid) return;
      google.script.run
        .withSuccessHandler(function(r) {
          if (!r) return;
          if (!r.success) { showToast(r.message || 'Failed to delete module.'); return; }
          showToast('Module deleted.');
          _loadModules(courseId);
        })
        .withFailureHandler(function(e) { showToast('Connection error.'); console.error(e); })
        .deleteModule(sid, moduleId);
    }
  });
}

document.addEventListener('keydown', function(e) {
  if (e.key !== 'Enter') return;
  var dLoginPage = document.getElementById('d-login');
  var mLoginPage = document.getElementById('m-login');
  if (window.innerWidth >= 900 && dLoginPage && dLoginPage.classList.contains('active')) {
    dLogin();
  }
  if (window.innerWidth < 900 && mLoginPage && mLoginPage.classList.contains('active')) {
    mLogin();
  }
});

/* ══════════════════════════════════════════════════════════════
   BATCH 6 — Reports, Activity Log, Settings, Profile
══════════════════════════════════════════════════════════════ */

/* ─── applyUserToBatch6Pages ─── */
function applyUserToBatch6Pages(user) {
  if (!user) return;
  var initials  = getInitials(user.full_name);
  var roleMap   = { IT_ADMIN:'IT Super Admin', HRM:'HRM', HR_TALENT:'HR Talent', TM:'Training Manager', GM:'General Manager', OWNER:'Owner / Director', HOD:'Head of Department', STAFF:'Staff', TRAINEE:'Trainee' };
  var subLabel  = (user.dept || 'Miss Fish') + ' · ' + (roleMap[user.role] || user.role);
  var b6Pages   = ['reports','actlog','settings','profile','attendance'];

  b6Pages.forEach(function(p) {
    var s = function(id, v) { var el = document.getElementById(id); if (el) el.textContent = v; };
    s('sb-avatar-'    + p, initials);
    s('sb-name-'      + p, user.full_name);
    s('sb-role-'      + p, subLabel);
    s('topbar-avatar-'+ p, initials);

    var src = document.getElementById('d-sidebar-nav');
    var dst = document.getElementById('d-sidebar-nav-' + p);
    if (src && dst) {
      dst.innerHTML = src.innerHTML;
      dst.querySelectorAll('.nav-item[data-page]').forEach(function(item) {
        var pg = item.getAttribute('data-page');
        if (pg) item.onclick = function() { goTo(pg); };
      });
      dst.querySelectorAll('.nav-item[data-page=""]').forEach(function(item) {
        item.onclick = signOut;
      });
    }

    var bnav  = document.getElementById('m-bottom-nav-' + p);
    if (bnav) {
      var items = BNAV_CONFIG[user.navType] || BNAV_CONFIG['employee'];
      bnav.innerHTML = '';
      items.forEach(function(it) {
        var div = document.createElement('div');
        div.className = 'bnav-item' + (it.page === p ? ' active' : '');
        div.setAttribute('data-page', it.page);
        div.innerHTML = '<div class="bnav-icon">' + it.icon + '</div><div class="bnav-label">' + it.label + '</div>';
        div.addEventListener('click', function() { goTo(it.page); });
        bnav.appendChild(div);
      });
    }
  });
}

/* ─── loadReports ─── */
function loadReports() {
  if (!_lmsUser) return;
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) return;
  var cD = document.getElementById('d-reports-content');
  var cM = document.getElementById('m-reports-content');
  if (cD) cD.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>';
  if (cM) cM.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>';
  google.script.run
    .withSuccessHandler(function(r) { if (!r) return; if (!r.success) { showToast(r.message || 'Error'); return; } renderReports(r.data); })
    .withFailureHandler(function(e) { showToast('Connection error.'); console.error(e); })
    .getReportSummary(sid);
}

/* ─── renderReports ─── */
function renderReports(data) {
  if (!data) return;
  var summary = data.summary || {};
  var depts   = data.depts   || [];

  // ── DESKTOP ──
  var cD = document.getElementById('d-reports-content');
  if (cD) {
    var aiHtml = data.aiAnalysis
      ? '<div class="ai-card" style="margin-bottom:24px"><div class="ai-card-header"><div class="ai-card-icon">🤖</div><div class="ai-card-label">AI Intelligence — Department Analysis</div><div class="ai-card-badge">Gemini 3.5 Flash Lite</div></div>' +
        '<div class="ai-summary">' + escHtml(data.aiAnalysis) + '</div>' +
        (data.aiDeptCards && data.aiDeptCards.length > 0
          ? '<div class="ai-dept-grid">' + data.aiDeptCards.map(function(c) {
              return '<div class="ai-dept-card"><div class="ai-dept-name">' + escHtml(c.name) + '</div><div class="ai-dept-status">' + escHtml(c.status) + '</div></div>';
            }).join('') + '</div>'
          : '') +
        '</div>'
      : '';

    var sumHtml = '<div class="report-summary-grid" style="margin-bottom:24px">' +
      '<div class="rep-sum-card"><div class="rep-sum-num">' + (summary.completionPct||0) + '%</div><div class="rep-sum-label">Avg Completion</div></div>' +
      '<div class="rep-sum-card"><div class="rep-sum-num">' + (summary.certsIssued||0)   + '</div><div class="rep-sum-label">Certs Issued</div></div>' +
      '<div class="rep-sum-card"><div class="rep-sum-num" style="color:var(--green)">' + (summary.passRate||0) + '%</div><div class="rep-sum-label">Pass Rate</div></div>' +
      '<div class="rep-sum-card"><div class="rep-sum-num" style="color:var(--red)">'   + (summary.overdue||0)  + '</div><div class="rep-sum-label">Overdue</div></div>' +
      '<div class="rep-sum-card"><div class="rep-sum-num">' + (summary.videoHours||0)   + 'h</div><div class="rep-sum-label">Video Watched</div></div>' +
      '</div>';

    var toolbar = '<div class="mgmt-toolbar" style="margin-bottom:16px">' +
      '<button class="mgmt-filter-pill active" onclick="setReportFilter(this,\'all\')">All Depts</button>' +
      '<button class="btn-add" onclick="showToast(\'Export feature coming soon.\')" style="margin-left:auto">' +
      '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>Export CSV</button></div>';

    var rows = depts.length === 0
      ? '<tr><td colspan="7" style="text-align:center;padding:24px;color:var(--gray-400)">No data.</td></tr>'
      : depts.map(function(d) {
          var pct    = d.completion_pct || 0;
          var flgCls = pct >= 80 ? 'flag-normal' : pct >= 50 ? 'flag-warning' : 'flag-critical';
          var flgTxt = pct >= 80 ? '✓ On Track'  : pct >= 50 ? '⚠ Review'    : '🚨 Critical';
          return '<tr><td style="font-weight:600">' + escHtml(d.dept) + '</td><td>' + (d.staff_count||0) + '</td>' +
            '<td><div class="prog-mini"><div class="prog-bar-d"><div class="prog-fill-d" style="width:' + pct + '%"></div></div><span class="prog-pct-d">' + pct + '%</span></div></td>' +
            '<td style="color:var(--gold);font-weight:700">' + (d.avg_score!=null?d.avg_score+'%':'—') + '</td>' +
            '<td>' + (d.certs_issued||0) + '</td>' +
            '<td style="color:' + (d.overdue>0?'var(--red)':'var(--green)') + ';font-weight:700">' + (d.overdue||0) + '</td>' +
            '<td><span class="log-flag ' + flgCls + '">' + flgTxt + '</span></td></tr>';
        }).join('');

    var tableCard = '<div class="card"><div class="card-header"><span class="card-title">Department Summary</span></div>' +
      '<div class="table-wrap"><table class="mgmt-table"><thead><tr><th>Department</th><th>Staff</th><th>Completion</th><th>Avg Score</th><th>Certs</th><th>Overdue</th><th>Status</th></tr></thead>' +
      '<tbody id="d-reports-tbody">' + rows + '</tbody></table></div></div>';

    cD.innerHTML = aiHtml + sumHtml + toolbar + tableCard;
    window._reportsCache = depts;
  }

  // ── MOBILE ──
  var cM = document.getElementById('m-reports-content');
  if (cM) {
    var mStat = '<div class="admin-stat-scroll">' +
      '<div class="stat-chip-m"><div class="scm-icon">📊</div><div class="scm-num">' + (summary.completionPct||0) + '%</div><div class="scm-label">Avg</div></div>' +
      '<div class="stat-chip-m"><div class="scm-icon">🏆</div><div class="scm-num">' + (summary.certsIssued||0) + '</div><div class="scm-label">Certs</div></div>' +
      '<div class="stat-chip-m"><div class="scm-icon">✅</div><div class="scm-num" style="color:var(--green)">' + (summary.passRate||0) + '%</div><div class="scm-label">Pass</div></div>' +
      '<div class="stat-chip-m"><div class="scm-icon">⚠️</div><div class="scm-num" style="color:var(--red)">' + (summary.overdue||0) + '</div><div class="scm-label">Overdue</div></div>' +
      '</div>';
    var mItems = depts.map(function(d) {
      var pct = d.completion_pct || 0;
      var bc  = pct >= 80 ? 'tmb-ok' : pct >= 50 ? 'tmb-warn' : 'tmb-bad';
      var bl  = pct >= 80 ? 'Good' : pct >= 50 ? 'Review' : 'Critical';
      return '<div style="background:var(--white);border-radius:14px;border:1px solid var(--gray-100);padding:14px 16px">' +
        '<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px"><div style="font-size:13px;font-weight:600">' + escHtml(d.dept) + '</div><span class="tm-badge ' + bc + '">' + bl + '</span></div>' +
        '<div style="display:flex;align-items:center;gap:8px"><div style="flex:1;height:5px;background:var(--gray-100);border-radius:999px"><div style="width:' + pct + '%;height:100%;background:linear-gradient(90deg,var(--gold),#E8C97A);border-radius:999px"></div></div><span style="font-size:11px;font-weight:700;color:var(--gold)">' + pct + '%</span></div>' +
        '<div style="font-size:11px;color:var(--gray-500);margin-top:6px">' + (d.staff_count||0) + ' staff · ' + (d.certs_issued||0) + ' certs · ' + (d.overdue||0) + ' overdue</div></div>';
    }).join('') || '<div style="padding:20px;text-align:center;color:var(--gray-400)">No data.</div>';
    cM.innerHTML = mStat +
      '<div class="section-header"><span class="section-title">Department Summary</span></div>' +
      '<div style="padding:0 16px;display:flex;flex-direction:column;gap:10px">' + mItems + '</div>' +
      '<div style="height:20px"></div>';
  }
  injectAICard('d-reports-content', 'dept');
}
function setReportFilter(btn, filter) {
  document.querySelectorAll('#d-reports .mgmt-filter-pill').forEach(function(b) { b.classList.remove('active'); });
  btn.classList.add('active');
}

/* ─── loadActLog ─── */
function loadActLog() {
  if (!_lmsUser) return;
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) return;
  var cD = document.getElementById('d-actlog-content');
  var cM = document.getElementById('m-actlog-content');
  if (cD) cD.innerHTML = _loader('Loading activity log...');
  if (cM) cM.innerHTML = _loader('Loading activity log...');
  google.script.run
    .withSuccessHandler(function(r) {
      if (!r) return;
      if (!r.success) {
        var cD2 = document.getElementById('d-actlog-content');
        var cM2 = document.getElementById('m-actlog-content');
        var errHtml = '<div style="padding:32px;text-align:center;color:var(--red)">' + (r.message || 'Failed to load activity log.') + '</div>';
        if (cD2) cD2.innerHTML = errHtml;
        if (cM2) cM2.innerHTML = errHtml;
        return;
      }
      renderActLog(r.data);
    })
    .withFailureHandler(function(e) {
      var cD2 = document.getElementById('d-actlog-content');
      var cM2 = document.getElementById('m-actlog-content');
      var errHtml = '<div style="padding:32px;text-align:center;color:var(--red)">Connection error. Coba lagi.</div>';
      if (cD2) cD2.innerHTML = errHtml;
      if (cM2) cM2.innerHTML = errHtml;
      console.error('getLogs error:', e);
    })
    .getLogs(_lmsUser.user_id, { limit: 50 });
}

/* ─── renderActLog ─── */
/* v2.98 — Log admin lama hanya mengisi kolom T ADMIN_USER, sementara
   kolom C USER_ID dibiarkan kosong. Tampilan membaca USER_ID, jadi
   pelakunya muncul sebagai "?". Sheet TIDAK diedit — immutability log
   dijaga — cukup tampilannya yang jatuh ke ADMIN_USER saat USER_ID kosong.
   CourseManager v1.5 sudah diperbaiki, jadi ini hanya menolong baris lama. */
function _logActor(l) {
  var name = l.full_name || '';
  var id   = l.employee_id || '';
  if (!name && !id && l.admin_user) {
    id   = l.admin_user;
    name = l.admin_user;          // nama asli tidak tersimpan di baris lama
  }
  return { id: id, name: name || '—' };
}

function renderActLog(data) {
  if (!data) return;
  var logs  = data.logs  || [];
  var stats = data.stats || {};

  // ── DESKTOP ──
  var cD = document.getElementById('d-actlog-content');
  if (cD) {
    var aiHtml = data.aiAudit
      ? '<div class="ai-card" style="margin-bottom:20px"><div class="ai-card-header"><div class="ai-card-icon">🤖</div><div class="ai-card-label">AI Intelligence — Course Quality Audit</div><div class="ai-card-badge">Gemini 3.5 Flash Lite</div></div>' +
        '<div class="ai-summary">' + escHtml(data.aiAudit) + '</div></div>'
      : '';

    var statsRow = '<div class="log-stats-row">' +
      '<div class="log-stat-card"><div class="log-stat-num">' + (stats.total||0) + '</div><div class="log-stat-label">Events Today</div></div>' +
      '<div class="log-stat-card"><div class="log-stat-num" style="color:var(--blue)">' + (stats.auth||0) + '</div><div class="log-stat-label">AUTH Events</div></div>' +
      '<div class="log-stat-card"><div class="log-stat-num" style="color:var(--green)">' + (stats.training||0) + '</div><div class="log-stat-label">Training Events</div></div>' +
      '<div class="log-stat-card"><div class="log-stat-num" style="color:var(--amber)">' + (stats.warnings||0) + '</div><div class="log-stat-label">⚠ Warnings</div></div>' +
      '<div class="log-stat-card"><div class="log-stat-num" style="color:var(--red)">'  + (stats.critical||0) + '</div><div class="log-stat-label">🚨 Critical</div></div>' +
      '</div>';

    var banner = '<div class="immutable-banner"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>' +
      '<span><strong>Immutable Log</strong> — Cannot be edited or deleted. Accessible by IT Admin, HRM, and GM only.</span></div>';

    var filterBar = '<div class="log-filter-bar">' +
      '<button class="mgmt-filter-pill active" onclick="setLogFilter(this,\'all\')">All</button>' +
      '<button class="mgmt-filter-pill" onclick="setLogFilter(this,\'critical\')">🚨 Critical</button>' +
      '<button class="mgmt-filter-pill" onclick="setLogFilter(this,\'warning\')">⚠ Warning</button>' +
      '<button class="mgmt-filter-pill" onclick="setLogFilter(this,\'auth\')">AUTH</button>' +
      '<button class="mgmt-filter-pill" onclick="setLogFilter(this,\'training\')">TRAINING</button>' +
      '<button class="mgmt-filter-pill" onclick="setLogFilter(this,\'quiz\')">QUIZ</button>' +
      '<button class="mgmt-filter-pill" onclick="setLogFilter(this,\'admin\')">ADMIN</button>' +
      '<button class="btn-add" style="margin-left:auto" onclick="exportLogs()">' +
      '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>Export CSV</button></div>';

    var eventTypeMap = { AUTH:'let-auth', TRAINING:'let-training', QUIZ:'let-quiz', ADMIN:'let-admin', SYSTEM:'let-system', CERTIFICATE:'let-system' };
    var rows = _buildLogRows(logs);
    window._logsCache = logs;

    var tableCard = '<div class="table-card"><div class="table-wrap">' +
      '<table class="mgmt-table"><thead><tr><th>Log ID</th><th>Timestamp</th><th>User</th><th>Event</th><th>Detail</th><th>IP · Device</th><th>Flag</th></tr></thead>' +
      '<tbody id="d-actlog-tbody">' + rows + '</tbody></table></div>' +
      '<div class="pagination"><div class="pagination-info">Showing ' + logs.length + ' events</div></div></div>';

    cD.innerHTML = aiHtml + statsRow + banner + filterBar + tableCard;
  }

  // ── MOBILE ──
  var cM = document.getElementById('m-actlog-content');
  if (cM) {
    var mStat = '<div class="admin-stat-scroll">' +
      '<div class="stat-chip-m"><div class="scm-icon">📋</div><div class="scm-num">' + (stats.total||0) + '</div><div class="scm-label">Total</div></div>' +
      '<div class="stat-chip-m"><div class="scm-icon">⚠️</div><div class="scm-num" style="color:var(--amber)">' + (stats.warnings||0) + '</div><div class="scm-label">Warning</div></div>' +
      '<div class="stat-chip-m"><div class="scm-icon">🚨</div><div class="scm-num" style="color:var(--red)">'   + (stats.critical||0) + '</div><div class="scm-label">Critical</div></div>' +
      '</div>';
    var mItems = logs.slice(0, 30).map(function(l) {
      var flagCls = l.flag === 'CRITICAL' ? 'lf-critical' : l.flag === 'WARNING' ? 'lf-warning' : 'lf-normal';
      var flagLbl = l.flag === 'CRITICAL' ? '🚨 CRITICAL' : l.flag === 'WARNING' ? '⚠ WARNING' : '✅ NORMAL';
      var evtCls  = { AUTH:'let-auth', TRAINING:'let-training', QUIZ:'let-quiz', ADMIN:'let-admin' }[l.event_category] || 'let-system';
      return '<div class="log-item-m">' +
        '<div class="lc-top"><div class="lc-av ' + _avtCls(_logActor(l).id) + '">' + escHtml(getInitials(_logActor(l).name)) + '</div>' +
        '<div><div class="lc-name">' + escHtml(_logActor(l).name) + '</div>' +
        '<span class="lc-type ' + evtCls + '">' + escHtml(l.event_category||'') + '</span></div></div>' +
        '<div class="lc-desc">' + escHtml(l.event_description||'') + '</div>' +
        '<div class="lc-bottom"><div class="lc-device">' + escHtml((l.ip_address||'') + ' · ' + (l.device_type||'')) + '</div>' +
        '<span class="log-flag-m ' + flagCls + '">' + flagLbl + '</span></div></div>';
    }).join('') || '<div style="padding:24px;text-align:center;color:var(--gray-400)">No log entries.</div>';
    cM.innerHTML = mStat +
      '<div class="section-header"><span class="section-title">Recent Events</span></div>' +
      '<div style="padding:0 16px;display:flex;flex-direction:column;gap:10px">' + mItems + '</div>' +
      '<div style="height:20px"></div>';
  }
  injectAICard('d-actlog-content', 'audit');
}

function _buildLogRows(logs) {
  if (!logs || logs.length === 0) return '<tr><td colspan="7" style="text-align:center;padding:32px;color:var(--gray-400)">No log entries.</td></tr>';
  var evtMap = { AUTH:'let-auth', TRAINING:'let-training', QUIZ:'let-quiz', ADMIN:'let-admin', SYSTEM:'let-system', CERTIFICATE:'let-system' };
  return logs.map(function(l) {
    var flagCls = l.flag === 'CRITICAL' ? 'flag-critical' : l.flag === 'WARNING' ? 'flag-warning' : 'flag-normal';
    var flagLbl = l.flag === 'CRITICAL' ? '🚨 CRITICAL'  : l.flag === 'WARNING' ? '⚠ WARNING'   : '✅ NORMAL';
    var evtCls  = evtMap[l.event_category] || 'let-system';
    var rowStyle = l.flag === 'CRITICAL' ? ' style="background:rgba(220,38,38,0.025)"' : l.flag === 'WARNING' ? ' style="background:rgba(245,158,11,0.015)"' : '';
    return '<tr' + rowStyle + '>' +
      '<td class="log-id">' + escHtml(l.log_id||'—') + '</td>' +
      '<td class="log-timestamp">' + escHtml(l.time||'') + '</td>' +
      '<td><div class="user-cell"><div class="user-av ' + _avtCls(_logActor(l).id) + '">' + escHtml(getInitials(_logActor(l).name)) + '</div><div class="u-name">' + escHtml(_logActor(l).name) + '</div></div></td>' +
      '<td><span class="log-event-type ' + evtCls + '">' + escHtml(l.event_category||'') + '</span></td>' +
      '<td style="font-size:12.5px;color:var(--gray-700);max-width:280px">' + escHtml(l.event_description||'') + '</td>' +
      '<td class="log-timestamp">' + escHtml((l.ip_address||'') + ' · ' + (l.device_type||'')) + '</td>' +
      '<td><span class="log-flag ' + flagCls + '">' + flagLbl + '</span></td></tr>';
  }).join('');
}

function setLogFilter(btn, filter) {
  document.querySelectorAll('#d-actlog .mgmt-filter-pill').forEach(function(b) { b.classList.remove('active'); });
  btn.classList.add('active');
  var logs = window._logsCache || [];
  var filtered = logs.filter(function(l) {
    if (filter === 'all')      return true;
    if (filter === 'critical') return l.flag === 'CRITICAL';
    if (filter === 'warning')  return l.flag === 'WARNING';
    return (l.event_category || '').toLowerCase() === filter;
  });
  var tbody = document.getElementById('d-actlog-tbody');
  if (tbody) tbody.innerHTML = _buildLogRows(filtered);
}

function exportLogs() {
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) return;
  showLoading('Exporting logs...', true);
  google.script.run
    .withSuccessHandler(function(r) {
      hideLoading();
      if (!r.success) { showToast(r.message || 'Export failed.'); return; }
      showToast('Log exported! Check your Google Drive.');
    })
    .withFailureHandler(function(e) { hideLoading(); showToast('Error.'); console.error(e); })
    .exportLogs(sid, {});
}

/* ─── loadSettings ─── */
/* ═══════════════════════════════════════════════════════════
   RELEASE LOG — v2.107
   Terpisah dari getSettings() dengan sengaja: kalau sheet
   Release_Log kosong atau bermasalah, panel Settings lain tetap
   tampil normal — bagian ini gagal sendiri, tidak menyeret yang
   lain. 20 baris terakhir saja, sesuai keputusan.
═══════════════════════════════════════════════════════════ */
function _loadReleaseLog_() {
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) return;
  google.script.run
    .withSuccessHandler(_renderReleaseLog_)
    .withFailureHandler(function(e) {
      console.error(e);
      var errHtml = '<div style="padding:20px;text-align:center;color:var(--gray-400);font-size:13px">Could not load release history.</div>';
      var elD = document.getElementById('d-release-body');
      var elM = document.getElementById('m-release-body');
      if (elD) elD.innerHTML = errHtml;
      if (elM) elM.innerHTML = errHtml;
    })
    .getReleaseLog(sid, 20);
}

function _renderReleaseLog_(r) {
  /* v2.114 — Release Log dipindah dari panel dalam Settings ke
     halaman sendiri (d-release-log/m-release-log). Render ke KEDUA
     container (desktop + mobile) sekaligus. */
  var bodyD = document.getElementById('d-release-body');
  var bodyM = document.getElementById('m-release-body');
  var curD  = document.getElementById('d-release-current');
  var curM  = document.getElementById('m-release-current');
  if (!bodyD && !bodyM) return;

  var emptyHtml = '<div style="padding:20px;text-align:center;color:var(--gray-400);font-size:13px">No release history yet.</div>';
  if (!r || !r.success || !r.data || !r.data.length) {
    if (bodyD) bodyD.innerHTML = emptyHtml;
    if (bodyM) bodyM.innerHTML = emptyHtml;
    return;
  }

  var rows = r.data;   // sudah terurut terbaru dulu dari GAS
  /* v2.108 — skema per-berkas berarti rows[0] belum tentu HTML utama,
     bisa saja baris Code.gs atau Database.gs dari rilis yang sama.
     Cari eksplisit baris ber-file MissFishLMS untuk indikator ini. */
  var mainRow = null;
  for (var mi = 0; mi < rows.length; mi++) {
    if (String(rows[mi].file || '').indexOf('MissFishLMS') === 0) { mainRow = rows[mi]; break; }
  }
  var curText = mainRow ? ('Running: ' + escHtml(mainRow.file) + ' v' + escHtml(mainRow.version)) : 'Running: —';
  if (curD) curD.textContent = curText;
  if (curM) curM.textContent = curText;

  var typeColor = { Fix: 'var(--gray-500)', Feat: 'var(--gold)', Perf: '#2563EB' };

  var rowsHtml = rows.map(function(row) {
    var chipColor = typeColor[row.type] || 'var(--gray-500)';
    var testedBadge = row.tested
      ? '<span style="color:#16A34A;font-weight:600">✓ Tested</span>'
      : '<span style="color:var(--gray-400)">Not tested</span>';
    return '<div class="ss-row" style="align-items:flex-start">' +
      '<div style="flex:1;min-width:0">' +
        '<div style="display:flex;align-items:center;gap:8px;margin-bottom:3px;flex-wrap:wrap">' +
          '<span style="font-weight:700;font-size:13px">' + escHtml(row.file || '') + ' <span style="color:var(--gray-400);font-weight:600">v' + escHtml(row.version || '') + '</span></span>' +
          '<span style="font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:' + chipColor + '">' + escHtml(row.type || '') + '</span>' +
          '<span style="font-size:11.5px;color:var(--gray-400)">' + escHtml(row.date || '') + '</span>' +
        '</div>' +
        '<div style="font-size:13px;color:var(--gray-600)">' + escHtml(row.summary || '') + '</div>' +
      '</div>' +
      '<div style="font-size:12px;flex-shrink:0;padding-top:2px">' + testedBadge + '</div>' +
    '</div>';
  }).join('');

  if (bodyD) bodyD.innerHTML = rowsHtml;
  if (bodyM) bodyM.innerHTML = rowsHtml;
}

function loadSettings() {
  if (!_lmsUser) return;
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) return;
  var cD = document.getElementById('d-settings-content');
  var cM = document.getElementById('m-settings-content');
  if (cD) cD.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading settings...</div></div>';
  if (cM) cM.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>';
  google.script.run
    .withSuccessHandler(function(r) { if (!r) return; if (!r.success) { showToast(r.message || 'Error'); return; } renderSettings(r.data); })
    .withFailureHandler(function(e) { showToast('Connection error.'); console.error(e); })
    .getSettings(sid);
}

/* ─── renderSettings ─── */
function renderSettings(settings) {
  var s = settings || {};

  // ── DESKTOP ──
  var cD = document.getElementById('d-settings-content');
  if (cD) {
    var makeToggle = function(key, val) {
      return '<div class="toggle' + (val ? ' on' : '') + '" onclick="toggleSetting(this,\'' + key + '\')" data-key="' + key + '"><div class="toggle-knob"></div></div>';
    };
    var makeInput = function(key, val, type, width) {
      type  = type  || 'text';
      width = width || '80px';
      return '<input class="ss-input" type="' + type + '" value="' + escHtml(String(val||'')) + '" style="width:' + width + ';text-align:' + (type==='number'?'center':'left') + ';padding:0 12px" onchange="updateSetting(\'' + key + '\',this.value)">';
    };

    var html =
      '<div class="settings-layout">' +
        '<div class="settings-nav-card">' +
          '<div class="sn-item active" onclick="scrollToSection(\'ss-quiz\')">⚙ Quiz & Assessment</div>' +
          '<div class="sn-item" onclick="scrollToSection(\'ss-ai\')">🤖 AI Intelligence</div>' +
          '<div class="sn-item" onclick="scrollToSection(\'ss-notif\')">🔔 Notifications</div>' +
          '<div class="sn-item" onclick="scrollToSection(\'ss-brand\')">🎨 Branding</div>' +
          '<div class="sn-item" onclick="scrollToSection(\'ss-sec\')">🔐 Security</div>' +
          '<div class="sn-item" onclick="goTo(\'release-log\')">📋 Release Log</div>' +
        '</div>' +
        '<div>' +
          '<div class="settings-section" id="ss-quiz"><div class="ss-header"><div class="ss-title">⚙ Quiz & Assessment</div></div><div class="ss-body">' +
            '<div class="ss-row"><div><div class="ss-key">Speed Flag Threshold</div><div class="ss-desc">Flag if answered under X sec/question</div></div><div style="display:flex;align-items:center;gap:6px">' + makeInput('QUIZ_SPEED_THRESHOLD', s.QUIZ_SPEED_THRESHOLD||30,'number') + '<span style="font-size:13px;color:var(--gray-500)">sec</span></div></div>' +
            '<div class="ss-row"><div><div class="ss-key">Randomize Questions</div><div class="ss-desc">Shuffle order each attempt</div></div>' + makeToggle('QUIZ_RANDOMIZE', s.QUIZ_RANDOMIZE!==false) + '</div>' +
            '<div class="ss-row"><div><div class="ss-key">Show Answers After Quiz</div><div class="ss-desc">Staff review answers post-submission</div></div>' + makeToggle('QUIZ_SHOW_ANSWERS', s.QUIZ_SHOW_ANSWERS!==false) + '</div>' +
          '</div></div>' +
          '<div class="settings-section" id="ss-ai"><div class="ss-header"><div class="ss-title">🤖 AI Intelligence</div></div><div class="ss-body">' +
            '<div class="ss-row"><div><div class="ss-key">Daily AI Report Email</div><div class="ss-desc">Auto-send daily report at 06:00 WITA</div></div>' + makeToggle('AI_DAILY_EMAIL', s.AI_DAILY_EMAIL!==false) + '</div>' +
            '<div class="ss-row"><div><div class="ss-key">Report Recipients</div><div class="ss-desc">Comma-separated email addresses</div></div>' + makeInput('AI_EMAIL_RECIPIENTS', s.AI_EMAIL_RECIPIENTS||'','text','260px') + '</div>' +
            '<div class="ss-row"><div><div class="ss-key">Monthly Report Email</div><div class="ss-desc">Auto-send on 1st of each month</div></div>' + makeToggle('AI_MONTHLY_EMAIL', s.AI_MONTHLY_EMAIL!==false) + '</div>' +
          '</div></div>' +
          '<div class="settings-section" id="ss-notif"><div class="ss-header"><div class="ss-title">🔔 Notifications</div></div><div class="ss-body">' +
            '<div class="ss-row"><div><div class="ss-key">Email on Quiz Pass</div></div>' + makeToggle('NOTIF_QUIZ_PASS', s.NOTIF_QUIZ_PASS!==false) + '</div>' +
            '<div class="ss-row"><div><div class="ss-key">Email on Certificate</div><div class="ss-desc">Send cert link via email</div></div>' + makeToggle('NOTIF_CERT', s.NOTIF_CERT!==false) + '</div>' +
            '<div class="ss-row"><div><div class="ss-key">Deadline Reminder</div><div class="ss-desc">Days before to remind</div></div><div style="display:flex;align-items:center;gap:6px">' + makeInput('NOTIF_DEADLINE_DAYS', s.NOTIF_DEADLINE_DAYS||7,'number') + '<span style="font-size:13px;color:var(--gray-500)">days</span></div></div>' +
            '<div class="ss-row"><div><div class="ss-key">Flag Alert to Admin</div><div class="ss-desc">Notify IT/HRM on suspicious activity</div></div>' + makeToggle('NOTIF_FLAG_ALERT', s.NOTIF_FLAG_ALERT!==false) + '</div>' +
          '</div></div>' +
          '<div class="settings-section" id="ss-brand"><div class="ss-header"><div class="ss-title">🎨 Branding</div></div><div class="ss-body">' +
            '<div class="ss-row"><div><div class="ss-key">System Name</div></div>' + makeInput('SYSTEM_NAME', s.SYSTEM_NAME||'Miss Fish LMS','text','200px') + '</div>' +
          '</div></div>' +
          '<div class="settings-section" id="ss-sec"><div class="ss-header"><div class="ss-title">🔐 Security</div></div><div class="ss-body">' +
            '<div class="ss-row"><div><div class="ss-key">Account Lock After</div><div class="ss-desc">Failed login attempts</div></div><div style="display:flex;align-items:center;gap:6px">' + makeInput('SEC_MAX_LOGIN_ATTEMPTS', s.SEC_MAX_LOGIN_ATTEMPTS||5,'number') + '<span style="font-size:13px;color:var(--gray-500)">tries</span></div></div>' +
            '<div class="ss-row"><div><div class="ss-key">Session Timeout</div><div class="ss-desc">Auto-logout after inactivity</div></div>' +
            '<select class="ss-select" onchange="updateSetting(\'SEC_SESSION_TIMEOUT\',this.value)">' +
            ['1','8','24'].map(function(h) { return '<option value="' + h + '"' + (String(s.SEC_SESSION_TIMEOUT||8)===h?' selected':'') + '>' + h + ' hour' + (h!=='1'?'s':'') + '</option>'; }).join('') +
            '</select></div>' +
          '</div></div>' +
          '<div style="padding:16px 0;text-align:right" id="d-settings-save-msg"></div>' +
        '</div>' +
      '</div>';
    cD.innerHTML = html;
  }

  // ── MOBILE ──
  var cM = document.getElementById('m-settings-content');
  if (cM) {
    var mToggle = function(key, val, label, desc) {
      return '<div class="sim-row"><div><div class="sim-key">' + label + '</div>' + (desc ? '<div class="sim-desc">' + desc + '</div>' : '') + '</div>' +
        '<div class="sim-toggle' + (val ? ' on' : '') + '" onclick="this.classList.toggle(\'on\');updateSetting(\'' + key + '\',this.classList.contains(\'on\'))"><div class="sim-toggle-knob"></div></div></div>';
    };
    var html =
      '<div style="height:8px"></div>' +
      '<div class="settings-item-m"><div class="sim-header"><div class="sim-title">⚙ Quiz & Assessment</div></div>' +
        mToggle('QUIZ_RANDOMIZE',    s.QUIZ_RANDOMIZE!==false,    'Randomize Questions', 'Shuffle order each attempt') +
        mToggle('QUIZ_SHOW_ANSWERS', s.QUIZ_SHOW_ANSWERS!==false, 'Show Answers After Quiz', '') +
      '</div>' +
      '<div class="settings-item-m"><div class="sim-header"><div class="sim-title">🤖 AI Intelligence</div></div>' +
        mToggle('AI_DAILY_EMAIL',   s.AI_DAILY_EMAIL!==false,   'Daily AI Report Email', 'Auto-send at 06:00 WITA') +
        mToggle('AI_MONTHLY_EMAIL', s.AI_MONTHLY_EMAIL!==false, 'Monthly Report Email', '') +
      '</div>' +
      '<div class="settings-item-m"><div class="sim-header"><div class="sim-title">🔔 Notifications</div></div>' +
        mToggle('NOTIF_QUIZ_PASS',  s.NOTIF_QUIZ_PASS!==false,  'Email on Quiz Pass', '') +
        mToggle('NOTIF_CERT',       s.NOTIF_CERT!==false,       'Email on Certificate', '') +
        mToggle('NOTIF_FLAG_ALERT', s.NOTIF_FLAG_ALERT!==false, 'Flag Alert to Admin', '') +
      '</div>' +
      '<div style="height:20px"></div>';
    cM.innerHTML = html;
  }
}

function toggleSetting(el, key) {
  el.classList.toggle('on');
  updateSetting(key, el.classList.contains('on'));
}
function scrollToSection(id) {
  var el = document.getElementById(id);
  if (el) el.scrollIntoView({ behavior:'smooth', block:'start' });
}
function updateSetting(key, value) {
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) return;
  google.script.run
    .withSuccessHandler(function(r) {
      if (!r) return;
      if (!r.success) { showToast('Failed to save: ' + key); return; }
      var msgEl = document.getElementById('d-settings-save-msg');
      if (msgEl) { msgEl.textContent = '✓ Saved'; msgEl.style.color = 'var(--green)'; setTimeout(function() { msgEl.textContent = ''; }, 2000); }
    })
    .withFailureHandler(function(e) { showToast('Error saving setting.'); console.error(e); })
    .updateSetting(sid, key, String(value));
}

/* ─── loadProfile ─── */
function loadProfile() {
  if (!_lmsUser) return;
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) return;
  var cD = document.getElementById('d-profile-content');
  var cM = document.getElementById('m-profile-content');
  if (cD) cD.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading profile...</div></div>';
  if (cM) cM.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>';
  /* v2.131 — BUG FIX (dilaporkan kak Wi 27 Aug): Dashboard menampilkan
     3 Courses, My Profile menampilkan 1, untuk user dan waktu yang SAMA.

     Penyebabnya definisi ketiga. getProgress() hanya berisi course yang
     SUDAH DIBUKA (punya baris di sheet Progress), sedangkan Dashboard
     sudah memakai definisi "course yang DITUGASKAN" sejak Reports v1.8.
     Ini bug yang sama persis, cuma di tempat yang belum tersentuh.

     Sekarang Profile memanggil getMyDashboard() — sumber yang SAMA
     dengan Dashboard — jadi angkanya dijamin identik selamanya, bukan
     kebetulan cocok. Sekaligus: dari DUA panggilan server
     (getProgress + getCertificates) jadi SATU. Di HP satu round-trip
     bernilai beberapa detik, jadi ini juga mempercepat buka Profile.

     completedPct dihitung dari completed/totalCourses karena
     getMyDashboard mengirim jumlah (completed), bukan persentase. */
  var st = { totalCourses: 0, totalCerts: 0, avgScore: 0, completedPct: 0 };

  var tampilkan = function() {
    var merged = {};
    for (var k in _lmsUser) { if (_lmsUser.hasOwnProperty(k)) merged[k] = _lmsUser[k]; }
    merged.stats = st;
    _lmsUser.stats = st;          // dashboard lain ikut dapat angka terbaru
    renderProfile(merged);
  };

  google.script.run
    .withSuccessHandler(function(r) {
      var sv = (r && r.success && r.data && r.data.stats) ? r.data.stats : null;
      if (sv) {
        st.totalCourses = sv.totalCourses || 0;
        st.totalCerts   = sv.totalCerts   || 0;
        st.avgScore     = sv.avgScore     || 0;
        st.completedPct = st.totalCourses > 0
          ? Math.round(((sv.completed || 0) / st.totalCourses) * 100)
          : 0;
      }
      tampilkan();
    })
    .withFailureHandler(function(e) { console.error(e); tampilkan(); })
    .getMyDashboard(sid);
}

/* ─── renderProfile ─── */
function renderProfile(user) {
  if (!user) return;
  var initials  = getInitials(user.full_name);
  var roleMap   = { IT_ADMIN:'IT Super Admin', HRM:'HRM', HR_TALENT:'HR Talent', TM:'Training Manager', GM:'General Manager', OWNER:'Owner / Director', HOD:'Head of Department', STAFF:'Staff', TRAINEE:'Trainee' };
  var roleLabel = roleMap[user.role] || user.role;
  var stats     = user.stats || {};

  // ── DESKTOP ──
  var cD = document.getElementById('d-profile-content');
  if (cD) {
    var profileCard =
      '<div class="profile-card">' +
        '<div class="profile-cover"><div class="profile-cover-bg"></div></div>' +
        '<div class="profile-avatar-wrap"><div class="profile-avatar">' + escHtml(initials) + '</div></div>' +
        '<div class="profile-info">' +
          '<div class="profile-name">' + escHtml(user.full_name) + '</div>' +
          '<div class="profile-role-chip">' + escHtml(user.dept||'') + ' — ' + escHtml(roleLabel) + '</div>' +
          '<div class="profile-detail-list">' +
            '<div class="profile-detail-row"><svg class="profile-detail-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg><div><div class="profile-detail-lbl">Email</div><div class="profile-detail-text">' + escHtml(user.email||'—') + '</div></div></div>' +
            '<div class="profile-detail-row"><svg class="profile-detail-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg><div><div class="profile-detail-lbl">Department</div><div class="profile-detail-text">' + escHtml(user.dept||'—') + '</div></div></div>' +
            '<div class="profile-detail-row"><svg class="profile-detail-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><rect x="3" y="16" width="18" height="6" rx="2"/></svg><div><div class="profile-detail-lbl">Employee ID</div><div class="profile-detail-text" style="font-family:monospace">' + escHtml(user.user_id||'—') + '</div></div></div>' +
            '<div class="profile-detail-row"><svg class="profile-detail-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg><div><div class="profile-detail-lbl">Last Login</div><div class="profile-detail-text">' + escHtml(user.last_login||'—') + '</div></div></div>' +
          '</div>' +
          '<div class="profile-stats-grid">' +
            '<div class="profile-stat-box"><div class="profile-stat-num">' + (stats.totalCourses||0) + '</div><div class="profile-stat-label">Courses</div></div>' +
            '<div class="profile-stat-box"><div class="profile-stat-num">' + (stats.totalCerts||0)   + '</div><div class="profile-stat-label">Certs</div></div>' +
            '<div class="profile-stat-box"><div class="profile-stat-num">' + (stats.completedPct||0) + '%</div><div class="profile-stat-label">Done</div></div>' +
            '<div class="profile-stat-box"><div class="profile-stat-num">' + (stats.avgScore||0)     + '%</div><div class="profile-stat-label">Avg Score</div></div>' +
          '</div>' +
        '</div>' +
      '</div>';

    var rightCol =
      '<div class="profile-right-col">' +
        '<div class="profile-section">' +
          '<div class="profile-section-hdr"><div class="profile-section-title">🔐 Change Password</div></div>' +
          '<div class="profile-section-body">' +
            '<div class="m-field"><label class="m-label">Current Password</label><input class="m-input" type="password" id="prof-cur-pw" placeholder="Enter current password"></div>' +
            '<div class="m-row">' +
              '<div class="m-field"><label class="m-label">New Password</label><input class="m-input" type="password" id="prof-new-pw" placeholder="New password"></div>' +
              '<div class="m-field"><label class="m-label">Confirm New Password</label><input class="m-input" type="password" id="prof-confirm-pw" placeholder="Confirm new password"></div>' +
            '</div>' +
            '<div id="prof-pw-msg" style="font-size:13px;display:none"></div>' +
            '<div><button style="height:40px;padding:0 24px;border-radius:9px;background:var(--solid-dark);color:#fff;border:none;font-family:Inter,sans-serif;font-size:13px;font-weight:700;cursor:pointer" onclick="submitChangePasswordProfile()">Update Password</button></div>' +
          '</div>' +
        '</div>' +
        '<div class="profile-section">' +
          '<div class="profile-section-hdr"><div class="profile-section-title">👤 Account Info</div></div>' +
          '<div class="profile-section-body">' +
            '<div style="display:flex;justify-content:space-between;padding:4px 0"><span style="font-size:13px;color:var(--gray-500)">Username</span><span style="font-size:13px;font-weight:600">' + escHtml(user.username||'—') + '</span></div>' +
            '<div style="display:flex;justify-content:space-between;padding:4px 0"><span style="font-size:13px;color:var(--gray-500)">Role</span><span style="font-size:13px;font-weight:600">' + escHtml(roleLabel) + '</span></div>' +
            '<div style="display:flex;justify-content:space-between;padding:4px 0"><span style="font-size:13px;color:var(--gray-500)">Status</span><span style="font-size:13px;font-weight:600;color:var(--green)">Active</span></div>' +
          '</div>' +
        '</div>' +
      '</div>';

    cD.innerHTML = '<div class="profile-layout">' + profileCard + rightCol + '</div>';
  }

  // ── MOBILE ──
  var cM = document.getElementById('m-profile-content');
  if (cM) {
    var heroHtml =
      '<div class="profile-hero-m">' +
        '<div class="ph-bg"></div>' +
        '<div class="ph-top"><div class="ph-avatar">' + escHtml(initials) + '</div></div>' +
        '<div class="ph-name">' + escHtml(user.full_name) + '</div>' +
        '<div class="ph-role">' + escHtml(user.dept||'') + ' — ' + escHtml(roleLabel) + '</div>' +
        '<div class="ph-stats">' +
          '<div class="ph-stat"><div class="ph-stat-num">' + (stats.totalCourses||0) + '</div><div class="ph-stat-label">Courses</div></div>' +
          '<div class="ph-stat"><div class="ph-stat-num">' + (stats.totalCerts||0)   + '</div><div class="ph-stat-label">Certs</div></div>' +
          '<div class="ph-stat"><div class="ph-stat-num">' + (stats.completedPct||0) + '%</div><div class="ph-stat-label">Done</div></div>' +
          '<div class="ph-stat"><div class="ph-stat-num" style="color:var(--gold)">' + (stats.avgScore||0) + '</div><div class="ph-stat-label">Avg%</div></div>' +
        '</div>' +
      '</div>';

    var mInfo =
      '<div style="background:var(--white);margin:16px;border-radius:14px;border:1px solid var(--gray-100);overflow:hidden">' +
        [['Employee ID', user.user_id||'—', 'monospace'], ['Email', user.email||'—', ''], ['Department', user.dept||'—', ''], ['Role', roleLabel, ''], ['Last Login', user.last_login||'—', '']].map(function(row) {
          // v2.125 — class ditambahkan (style inline TIDAK diubah) supaya
          // body.dark-mode bisa menimpanya. Di light mode tampilan sama persis.
          return '<div class="prof-info-row" style="display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:1px solid var(--gray-50)">' +
            '<span class="prof-info-label" style="font-size:12.5px;color:var(--gray-500)">' + row[0] + '</span>' +
            '<span class="prof-info-value" style="font-size:13px;font-weight:600;' + (row[2]==='monospace'?'font-family:monospace':'') + '">' + escHtml(row[1]) + '</span></div>';
        }).join('') +
      '</div>';

    var mChangePw =
      '<div class="mob-form-card" style="margin:0 16px 16px">' +
        '<div class="prof-section-title" style="font-size:14px;font-weight:700;margin-bottom:16px">🔐 Change Password</div>' +
        '<label class="mob-form-label">Current Password</label><input class="mob-form-input" type="password" id="m-prof-cur-pw" placeholder="Current password" style="margin-bottom:12px">' +
        '<label class="mob-form-label">New Password</label><input class="mob-form-input" type="password" id="m-prof-new-pw" placeholder="New password" style="margin-bottom:12px">' +
        '<label class="mob-form-label">Confirm New Password</label><input class="mob-form-input" type="password" id="m-prof-confirm-pw" placeholder="Confirm new password" style="margin-bottom:16px">' +
        '<div id="m-prof-pw-msg" style="font-size:13px;display:none;margin-bottom:10px"></div>' +
      '</div>' +
      '<button class="btn-full btn-full-black" onclick="submitChangePasswordProfile()">Update Password</button>';

    var mDarkToggle =
      '<div style="background:var(--white);margin:16px;border-radius:14px;border:1px solid var(--gray-100);overflow:hidden">' +
        '<div class="dm-toggle-row">' +
          '<span class="dm-toggle-row-label">🌙 Dark Mode</span>' +
          '<label class="dm-switch">' +
            '<input type="checkbox" id="m-dm-switch" onchange="toggleDarkMode()" ' + (document.body.classList.contains('dark-mode') ? 'checked' : '') + '>' +
            '<span class="dm-slider"></span>' +
          '</label>' +
        '</div>' +
      '</div>';

    var mSignOut = '<div style="padding:16px"><button onclick="signOut()" style="width:100%;height:48px;border-radius:12px;border:none;background:#1A1A1A;color:#EF4444;font-family:Inter,sans-serif;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg> Sign Out</button></div>';
    var mVersionLabel = '<div style="text-align:center;font-size:11px;color:var(--gray-400);padding:0 16px 24px">Miss Fish Bali LMS · v2.144</div>';
    cM.innerHTML = heroHtml + mInfo + mDarkToggle + mChangePw + mSignOut + mVersionLabel;
  }
}

/* ─── submitChangePasswordProfile ─── */
function submitChangePasswordProfile() {
  var isMob  = window.innerWidth < 900;
  var curPw  = document.getElementById(isMob ? 'm-prof-cur-pw'      : 'prof-cur-pw').value;
  var newPw  = document.getElementById(isMob ? 'm-prof-new-pw'      : 'prof-new-pw').value;
  var confPw = document.getElementById(isMob ? 'm-prof-confirm-pw'  : 'prof-confirm-pw').value;
  var msgEl  = document.getElementById(isMob ? 'm-prof-pw-msg'      : 'prof-pw-msg');

  var showMsg = function(txt, color) { if (msgEl) { msgEl.textContent = txt; msgEl.style.color = color; msgEl.style.display = 'block'; } };
  if (!curPw || !newPw || !confPw) { showMsg('All fields required.', 'var(--red)'); return; }
  if (newPw !== confPw) { showMsg('New password & confirm do not match.', 'var(--red)'); return; }
  if (newPw.length < 8) { showMsg('Password must be at least 8 characters.', 'var(--red)'); return; }

  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) return;
  showLoading('Updating password...', true);
  google.script.run
    .withSuccessHandler(function(r) {
      hideLoading();
      if (!r.success) { showMsg(r.message || 'Failed to update password.', 'var(--red)'); return; }
      showMsg('✓ Password successfully updated!', 'var(--green)');
      document.getElementById(isMob ? 'm-prof-cur-pw'     : 'prof-cur-pw').value    = '';
      document.getElementById(isMob ? 'm-prof-new-pw'     : 'prof-new-pw').value    = '';
      document.getElementById(isMob ? 'm-prof-confirm-pw' : 'prof-confirm-pw').value = '';
    })
    .withFailureHandler(function(e) { hideLoading(); showMsg('Connection error.', 'var(--red)'); console.error(e); })
    .changePassword(sid, curPw, newPw);
}

/* ══════════════════════════════════════════════════════════════
   ATTENDANCE PAGE JS
   loadAttendance, renderAttendance, filter helpers
══════════════════════════════════════════════════════════════ */

/* ─── loadAttendance ─── */
function loadAttendance() {
  if (!_lmsUser) return;
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) return;
  var cD = document.getElementById('d-attendance-content');
  var cM = document.getElementById('m-attendance-content');
  if (cD) cD.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading attendance...</div></div>';
  if (cM) cM.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>';
  google.script.run
    .withSuccessHandler(function(r) {
      if (!r) return;
      if (!r.success) { showToast(r.message || 'Failed to load attendance.'); return; }
      window._attendanceCache = r.data || [];
      renderAttendance(window._attendanceCache);
    })
    .withFailureHandler(function(e) { showToast('Connection error.'); console.error(e); })
    .getAttendanceEvents(sid, {});
}

/* ─── renderAttendance ─── */
function renderAttendance(events) {
  var stats = { Training:0, Party:0, CSR:0, General:0, IV:0 };
  events.forEach(function(e) { if (stats[e.event_type] !== undefined) stats[e.event_type]++; });

  // icon + css class map per event type
  var typeMap = {
    Training : { icon:'🎓', eiCls:'ei-training', etcCls:'etc-training' },
    Party    : { icon:'🎉', eiCls:'ei-party',    etcCls:'etc-party'    },
    CSR      : { icon:'🌱', eiCls:'ei-csr',      etcCls:'etc-csr'      },
    General  : { icon:'📅', eiCls:'ei-general',  etcCls:'etc-general'  },
    IV       : { icon:'💉', eiCls:'ei-iv',        etcCls:'etc-iv'       }
  };

  // ── DESKTOP ──
  var cD = document.getElementById('d-attendance-content');
  if (cD) {
    // Stat mini row
    var miniRow =
      '<div class="stat-mini-row stat-mini-row-5">' +
      '<div class="stat-mini"><div class="stat-mini-icon ic-blue">🎓</div><div><div class="stat-mini-num">' + stats.Training + '</div><div class="stat-mini-lbl">Training</div></div></div>' +
      '<div class="stat-mini"><div class="stat-mini-icon ic-gold">🎉</div><div><div class="stat-mini-num">' + stats.Party    + '</div><div class="stat-mini-lbl">Staff Party</div></div></div>' +
      '<div class="stat-mini"><div class="stat-mini-icon ic-green">🌱</div><div><div class="stat-mini-num">' + stats.CSR     + '</div><div class="stat-mini-lbl">CSR Events</div></div></div>' +
      '<div class="stat-mini"><div class="stat-mini-icon" style="background:rgba(124,58,237,0.1)">📅</div><div><div class="stat-mini-num">' + stats.General + '</div><div class="stat-mini-lbl">General</div></div></div>' +
      '<div class="stat-mini"><div class="stat-mini-icon ic-red">💉</div><div><div class="stat-mini-num">' + stats.IV      + '</div><div class="stat-mini-lbl">IV Events</div></div></div>' +
      '</div>';

    // Toolbar
    var toolbar =
      '<div class="mgmt-toolbar" style="margin-bottom:20px">' +
      '<div class="mgmt-search"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>' +
      '<input id="d-att-search" placeholder="Search events..." oninput="filterAttendance()"></div>' +
      '<button class="mgmt-filter-pill active" onclick="setAttFilter(this,\'all\')">All</button>' +
      '<button class="mgmt-filter-pill" onclick="setAttFilter(this,\'Training\')">Training</button>' +
      '<button class="mgmt-filter-pill" onclick="setAttFilter(this,\'Party\')">Party</button>' +
      '<button class="mgmt-filter-pill" onclick="setAttFilter(this,\'CSR\')">CSR</button>' +
      '<button class="mgmt-filter-pill" onclick="setAttFilter(this,\'IV\')">IV</button>' +
      '</div>';

    // Event list
    var eventList = _buildAttEventList(events, typeMap);

    // Right sidebar
    var totalAttendees = events.reduce(function(s, e) { return s + (e.attendee_count || 0); }, 0);
    var avgAttendees   = events.length > 0 ? Math.round(totalAttendees / events.length) : 0;

    var sideCard =
      '<div class="att-side-card">' +
        '<div class="att-side-title">This Period Summary</div>' +
        '<div class="detail-info-list">' +
          '<div class="detail-info-row"><span class="detail-info-key">Total Events</span><span class="detail-info-val">' + events.length + '</span></div>' +
          '<div class="detail-info-row"><span class="detail-info-key">Total Attendees</span><span class="detail-info-val">' + totalAttendees + '</span></div>' +
          '<div class="detail-info-row"><span class="detail-info-key">Avg / Event</span><span class="detail-info-val">' + avgAttendees + ' staff</span></div>' +
          '<div class="detail-info-row"><span class="detail-info-key">Data Source</span><span class="detail-info-val">Phase 1 Sheets</span></div>' +
        '</div>' +
      '</div>' +
      '<div class="att-side-card">' +
        '<div class="att-side-title">Info</div>' +
        '<div style="font-size:13px;color:var(--gray-500);line-height:1.7">' +
          '📋 Data attendance dibaca dari system Phase 1.<br>' +
          '🔒 Read-only — perubahan hanya via Phase 1.' +
        '</div>' +
      '</div>';

    cD.innerHTML = miniRow + toolbar +
      '<div class="attendance-layout">' +
        '<div class="event-list-wrap" id="d-att-event-list">' + eventList + '</div>' +
        '<div>' + sideCard + '</div>' +
      '</div>';
  }

  // ── MOBILE ──
  var cM = document.getElementById('m-attendance-content');
  if (cM) {
    var mStatChips =
      '<div class="att-stats-m">' +
      '<div class="att-stat-chip"><div class="asc-icon">🎓</div><div class="asc-num">' + stats.Training + '</div><div class="asc-label">Training</div></div>' +
      '<div class="att-stat-chip"><div class="asc-icon">🎉</div><div class="asc-num">' + stats.Party    + '</div><div class="asc-label">Party</div></div>' +
      '<div class="att-stat-chip"><div class="asc-icon">🌱</div><div class="asc-num">' + stats.CSR     + '</div><div class="asc-label">CSR</div></div>' +
      '<div class="att-stat-chip"><div class="asc-icon">📅</div><div class="asc-num">' + stats.General + '</div><div class="asc-label">General</div></div>' +
      '<div class="att-stat-chip"><div class="asc-icon">💉</div><div class="asc-num">' + stats.IV      + '</div><div class="asc-label">IV</div></div>' +
      '</div>';

    var mInfoBanner =
      '<div style="background:#EFF6FF;border:1px solid rgba(37,99,235,0.15);border-radius:12px;padding:12px 16px;margin:0 16px 14px;font-size:12.5px;color:#1E3A8A">' +
      '🔒 Data read-only dari system Phase 1.</div>';

    var mCards = events.length === 0
      ? '<div style="padding:32px;text-align:center;color:var(--gray-400)">No events found.</div>'
      : events.map(function(ev) {
          var t       = typeMap[ev.event_type] || { icon:'📅', eiCls:'ei-general', etcCls:'etc-general' };
          var cnt     = ev.attendee_count || 0;
          var exp     = ev.expected_count || 0;
          var rate    = exp > 0 ? Math.round(cnt / exp * 100) + '%' : '—';
          var rateClr = exp > 0 && cnt/exp >= 0.8 ? 'var(--green)' : 'var(--gold)';
          return '<div class="att-event-card">' +
            '<div class="aec-top">' +
              '<div class="aec-icon ' + t.eiCls + '">' + t.icon + '</div>' +
              '<div class="aec-info">' +
                '<div class="aec-name">' + escHtml(ev.event_name || ev.title || '—') + '</div>' +
                '<div class="aec-date">' + escHtml(ev.event_date || '') + (ev.dept ? ' · ' + escHtml(ev.dept) : '') + '</div>' +
              '</div>' +
              '<span class="event-type-chip ' + t.etcCls + '">' + escHtml(ev.event_type) + '</span>' +
            '</div>' +
            '<div class="aec-stats">' +
              '<div class="aec-stat"><div class="aec-stat-num">' + cnt + '</div><div class="aec-stat-label">Attended</div></div>' +
              '<div class="aec-stat"><div class="aec-stat-num" style="color:' + rateClr + '">' + rate + '</div><div class="aec-stat-label">Rate</div></div>' +
              '<div class="aec-stat"><div class="aec-stat-num">' + (exp || '—') + '</div><div class="aec-stat-label">Expected</div></div>' +
            '</div>' +
          '</div>';
        }).join('');

    cM.innerHTML = mStatChips + mInfoBanner +
      '<div class="section-header"><span class="section-title">Recent Events</span>' +
      '<span class="section-action">' + events.length + ' events</span></div>' +
      '<div class="att-event-list">' + mCards + '</div>' +
      '<div style="height:20px"></div>';
  }
}

/* ─── _buildAttEventList — desktop event list rows ─── */
function _buildAttEventList(events, typeMap) {
  if (!events || events.length === 0) {
    return '<div style="padding:32px;text-align:center;color:var(--gray-400)">No events found.</div>';
  }
  return events.map(function(ev) {
    var t   = typeMap[ev.event_type] || { icon:'📅', eiCls:'ei-general', etcCls:'etc-general' };
    var cnt = ev.attendee_count || 0;
    return '<div class="event-item">' +
      '<div class="event-icon-wrap ' + t.eiCls + '">' + t.icon + '</div>' +
      '<div class="event-info">' +
        '<div class="event-name">' + escHtml(ev.event_name || ev.title || '—') + '</div>' +
        '<div class="event-meta">' + escHtml(ev.dept || 'All Departments') + ' · ' + escHtml(ev.event_date || '') + (ev.time_range ? ' · ' + escHtml(ev.time_range) : '') + '</div>' +
        '<span class="event-type-chip ' + t.etcCls + '">' + escHtml(ev.event_type) + '</span>' +
      '</div>' +
      '<div class="event-count">' +
        '<div class="event-count-num">' + cnt + '</div>' +
        '<div class="event-count-label">attendees</div>' +
      '</div>' +
    '</div>';
  }).join('');
}

/* ─── Filter & Search ─── */
var _attFilter = 'all';
function setAttFilter(btn, filter) {
  _attFilter = filter;
  document.querySelectorAll('#d-attendance .mgmt-filter-pill').forEach(function(b) { b.classList.remove('active'); });
  btn.classList.add('active');
  _applyAttFilter();
}
function filterAttendance() { _applyAttFilter(); }
function _applyAttFilter() {
  var term   = (document.getElementById('d-att-search') || {}).value || '';
  var events = window._attendanceCache || [];
  var typeMap = {
    Training : { icon:'🎓', eiCls:'ei-training', etcCls:'etc-training' },
    Party    : { icon:'🎉', eiCls:'ei-party',    etcCls:'etc-party'    },
    CSR      : { icon:'🌱', eiCls:'ei-csr',      etcCls:'etc-csr'      },
    General  : { icon:'📅', eiCls:'ei-general',  etcCls:'etc-general'  },
    IV       : { icon:'💉', eiCls:'ei-iv',        etcCls:'etc-iv'       }
  };
  var filtered = events.filter(function(ev) {
    if (_attFilter !== 'all' && ev.event_type !== _attFilter) return false;
    if (term) {
      var t = term.toLowerCase();
      return (ev.event_name || ev.title || '').toLowerCase().indexOf(t) >= 0 ||
             (ev.dept || '').toLowerCase().indexOf(t) >= 0;
    }
    return true;
  });
  var listEl = document.getElementById('d-att-event-list');
  if (listEl) listEl.innerHTML = _buildAttEventList(filtered, typeMap);
}

/* ══════════════════════════════════════════════════════════════
   COURSE DETAIL · VIDEO · PDF · QUIZ
   State global:
   window._currentCourse  — object course yang sedang dibuka
   window._currentModule  — object modul yang sedang dibuka
   window._currentModules — array modul dalam course
══════════════════════════════════════════════════════════════ */

/* ─── applyUserToLearningPages — apply sidebar ke 4 learning pages ─── */
function applyUserToLearningPages(user) {
  if (!user) return;
  var initials = getInitials(user.full_name);
  var lPages   = ['course-detail','video','pdf','quiz'];
  lPages.forEach(function(p) {
    var s = function(id, v) { var el = document.getElementById(id); if (el) el.textContent = v; };
    s('sb-avatar-'    + p, initials);
    s('sb-name-'      + p, user.full_name);
    s('topbar-avatar-'+ p, initials);
    var src = document.getElementById('d-sidebar-nav');
    var dst = document.getElementById('d-sidebar-nav-' + p);
    if (src && dst) {
      dst.innerHTML = src.innerHTML;
      dst.querySelectorAll('.nav-item[data-page]').forEach(function(item) {
        var pg = item.getAttribute('data-page');
        if (pg) item.onclick = function() { goTo(pg); };
      });
      dst.querySelectorAll('.nav-item[data-page=""]').forEach(function(item) {
        item.onclick = signOut;
      });
    }
    var bnav = document.getElementById('m-bottom-nav-' + p);
    if (bnav) {
      var items = BNAV_CONFIG[user.navType] || BNAV_CONFIG['employee'];
      bnav.innerHTML = '';
      items.forEach(function(it) {
        var div = document.createElement('div');
        div.className = 'bnav-item';
        div.innerHTML = '<div class="bnav-icon">' + it.icon + '</div><div class="bnav-label">' + it.label + '</div>';
        div.addEventListener('click', function() { goTo(it.page); });
        bnav.appendChild(div);
      });
    }
  });
}

/* ─── backToCourseDetail — kembali ke course detail dari video/pdf/quiz ─── */
function backToCourseDetail() {
  // Stop video/audio before navigating away
  _stopVideoCleanup();
  if (window._currentCourse) {
    goTo('course-detail');
  } else {
    goTo('courses');
  }
}

/* ══════════════════════════════════════
   COURSE DETAIL
══════════════════════════════════════ */

function loadCourseDetail(courseId) {
  if (!_lmsUser) return;
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) return;
  var cD = document.getElementById('d-course-detail-content');
  var cM = document.getElementById('m-course-detail-content');
  if (cD) cD.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading course...</div></div>';
  if (cM) cM.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>';
  google.script.run
    .withSuccessHandler(function(r) {
      if (!r) return;
      if (!r.success) { showToast(r.message || 'Failed to load course.'); return; }
      window._currentCourse  = r.data.course;
      window._currentModules = r.data.modules || [];
      renderCourseDetail(r.data);
    })
    .withFailureHandler(function(e) { showToast('Connection error.'); console.error(e); })
    .getCourseDetail(sid, courseId);
}

function _normalizeModule(raw) {
  if (!raw) return null;
  return {
    module_id    : raw.module_id     || '',
    course_id    : raw.course_id     || '',
    module_type  : (raw.type || raw.module_type || '').toUpperCase(),
    title        : raw.title         || '',
    content_url  : raw.drive_file_id || raw.content_url || '',
    source_type  : raw.source_type   || 'GDRIVE',
    drive_file_id: raw.drive_file_id || '',
    drive_url    : raw.drive_url     || '',
    num_questions: raw.num_questions || 0,
    duration_min : raw.duration_min  || 0,
    min_watch_pct: raw.min_watch_pct || 95,
    order_num    : raw.order_num     || 1,
    is_locked    : raw.is_locked     || false,
    is_completed : raw.is_completed  || false,
    watch_pct    : raw.watch_pct     || 0
  };
}

function renderCourseDetail(data) {
  var course  = data.course  || {};
  var modules = data.modules || [];
  var pct     = course.progress_pct || 0;
  var dept    = course.dept || 'General';

  // Update topbar title
  var t = function(id, v) { var el = document.getElementById(id); if (el) el.textContent = v; };
  t('d-course-detail-title', course.title || 'Course Detail');

  // ── DESKTOP ──
  var cD = document.getElementById('d-course-detail-content');
  if (cD) {
    var header =
      '<div class="course-detail-header">' +
        '<div class="cdh-bg"></div>' +
        '<div class="cdh-eyebrow">' + escHtml(dept) + ' Department</div>' +
        '<div class="cdh-title">' + escHtml(course.title || '—') + '</div>' +
        '<div class="cdh-desc">' + escHtml(course.description || '') + '</div>' +
        '<div class="cdh-meta">' +
          '<div class="cdh-meta-item"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>' + (course.deadline || 'No deadline') + '</div>' +
          '<div class="cdh-meta-item">📚 ' + modules.length + ' modules</div>' +
          '<div class="cdh-meta-item">🏆 Pass: ' + (course.passing_score || 70) + '%</div>' +
        '</div>' +
        '<div class="cdh-progress-wrap">' +
          '<div class="cdh-progress-label"><span>Your Progress</span><span>' + pct + '%</span></div>' +
          '<div class="cdh-progress-bar"><div class="cdh-progress-fill" style="width:' + pct + '%"></div></div>' +
        '</div>' +
      '</div>';

    var modRows = modules.length === 0
      ? '<div style="padding:32px;text-align:center;color:var(--gray-400)">No modules yet.</div>'
      : modules.map(function(mod, idx) {
          // Normalize field names: GAS returns 'type' & 'drive_file_id',
          // but openModule/loadVideo expect 'module_type' & 'content_url'
          var m = {
            module_id    : mod.module_id    || '',
            course_id    : mod.course_id    || '',
            module_type  : (mod.type || mod.module_type || '').toUpperCase(),
            title        : mod.title        || '',
            content_url  : mod.drive_file_id || mod.content_url || '',
            source_type  : mod.source_type  || 'GDRIVE',
            drive_file_id: mod.drive_file_id || '',
            drive_url    : mod.drive_url    || '',
            num_questions: mod.num_questions || 0,
            duration_min : mod.duration_min  || 0,
            min_watch_pct: mod.min_watch_pct || 95,
            order_num    : mod.order_num     || (idx + 1),
            is_locked    : mod.is_locked     || false,
            is_completed : mod.is_completed  || false,
            watch_pct    : mod.watch_pct     || 0
          };
          var isLocked   = m.is_locked;
          var isDone     = m.is_completed;
          var typeIcon   = { VIDEO:'🎬', PDF:'📄', QUIZ:'📝' }[m.module_type] || '📄';
          var typeCls    = { VIDEO:'mod-video', PDF:'mod-pdf', QUIZ:'mod-quiz' }[m.module_type] || 'mod-pdf';
          var statusCls  = isDone ? 'ms-done' : isLocked ? 'ms-locked' : 'ms-active';
          var statusLbl  = isDone ? '✓ Done' : isLocked ? '🔒 Locked' : 'Start →';
          var itemCls    = isDone ? 'completed' : isLocked ? 'locked' : '';
          var clickFn    = isLocked ? '' : 'onclick="openModuleByIndex(' + idx + ')"';
          var lockIcon   = isLocked ? '<div class="mod-lock">🔒</div>' : '';
          return '<div class="module-item ' + itemCls + '" ' + clickFn + '>' +
            '<div class="mod-num" style="' + (isDone ? 'background:#10B981;color:#fff;border-color:#10B981' : '') + '">' + (isDone ? '\u2713' : (idx + 1)) + '</div>' +
            '<div class="mod-icon ' + typeCls + '">' + typeIcon + '</div>' +
            '<div class="mod-info">' +
              '<div class="mod-title">' + escHtml(m.title) + '</div>' +
              '<div class="mod-meta">' + escHtml(m.module_type) + (m.duration_min ? ' · ' + m.duration_min + ' min' : '') + '</div>' +
            '</div>' +
            '<div class="mod-status ' + statusCls + '">' + statusLbl + '</div>' +
            lockIcon +
          '</div>';
        }).join('');

    var modList = '<div class="module-list">' + modRows + '</div>';

    // Sidebar
    var nextModIdx = modules.findIndex(function(m) { return !m.is_completed && !m.is_locked; });
    var nextMod = nextModIdx >= 0 ? _normalizeModule(modules[nextModIdx]) : null;
    var sideCard =
      '<div class="cd-side-card">' +
        '<div class="cd-side-title">Course Info</div>' +
        '<div class="cd-side-row"><span class="cd-side-key">Department</span><span class="cd-side-val">' + escHtml(dept) + '</span></div>' +
        '<div class="cd-side-row"><span class="cd-side-key">Modules</span><span class="cd-side-val">' + modules.length + '</span></div>' +
        '<div class="cd-side-row"><span class="cd-side-key">Passing Score</span><span class="cd-side-val">' + (course.passing_score || 70) + '%</span></div>' +
        '<div class="cd-side-row"><span class="cd-side-key">Deadline</span><span class="cd-side-val">' + escHtml(course.deadline || '—') + '</span></div>' +
        '<div class="cd-side-row"><span class="cd-side-key">Progress</span><span class="cd-side-val" style="color:var(--gold)">' + pct + '%</span></div>' +
      '</div>' +
      (nextMod
        ? '<button class="btn-start-course" onclick="openModuleByIndex(' + nextModIdx + ')">' +
          (pct > 0 ? '▶ Continue' : '▶ Start Course') + '</button>'
        : pct >= 100
        ? '<button class="btn-start-course" style="background:var(--green)" onclick="goTo(\'certs\')">🏆 View Certificate</button>'
        : '');

    cD.innerHTML = header +
      '<div class="course-detail-layout">' +
        '<div>' + modList + '</div>' +
        '<div>' + sideCard + '</div>' +
      '</div>';
  }

  // ── MOBILE ──
  var cM = document.getElementById('m-course-detail-content');
  if (cM) {
    t('m-course-detail-eyebrow', dept);
    t('m-course-detail-title', course.title || 'Course Detail');

    var mHero =
      '<div style="background:var(--solid-dark);padding:20px 16px 16px;position:relative;overflow:hidden">' +
        '<div style="position:absolute;inset:0;background:radial-gradient(ellipse at 80% 30%,rgba(201,160,101,0.15) 0%,transparent 65%);pointer-events:none"></div>' +
        '<div style="position:relative;z-index:1;font-size:12px;color:rgba(255,255,255,0.45);margin-bottom:6px">' + escHtml(dept) + '</div>' +
        '<div style="position:relative;z-index:1;font-family:Georgia,serif;font-size:19px;font-weight:700;color:#fff;margin-bottom:8px">' + escHtml(course.title || '—') + '</div>' +
        '<div style="position:relative;z-index:1;display:flex;align-items:center;gap:6px;margin-bottom:12px">' +
          '<div style="flex:1;height:5px;background:rgba(255,255,255,0.1);border-radius:999px">' +
            '<div style="width:' + pct + '%;height:100%;background:linear-gradient(90deg,var(--gold),#E8C97A);border-radius:999px"></div>' +
          '</div>' +
          '<span style="font-size:12px;font-weight:700;color:var(--gold)">' + pct + '%</span>' +
        '</div>' +
      '</div>';

    var mModules = modules.length === 0
      ? '<div style="padding:24px;text-align:center;color:var(--gray-400)">No modules yet.</div>'
      : modules.map(function(rawMod, idx) {
          /* v2.117 — sebelumnya baca rawMod.module_type langsung, padahal
             server mengirim field bernama "type" (lihat Courses.gs).
             Akibatnya module_type selalu undefined -> semua modul jatuh
             ke fallback ikon 📄, meta text "VIDEO"/"QUIZ" hilang (image 8
             kakak: cuma tampil "· 2m", tanpa kata "VIDEO"). Desktop sudah
             benar karena memanggil _normalizeModule() lebih dulu;
             mobile dulu tidak. Dipanggil di sini supaya perilakunya
             sama persis dengan desktop, tidak menebak nama field baru. */
          var mod      = _normalizeModule(rawMod);
          var isLocked = mod.is_locked || false;
          var isDone   = mod.is_completed || false;
          var typeIcon = { VIDEO:'🎬', PDF:'📄', QUIZ:'📝' }[mod.module_type] || '📄';
          var typeCls  = { VIDEO:'mod-video', PDF:'mod-pdf', QUIZ:'mod-quiz' }[mod.module_type] || 'mod-pdf';
          var badgeCls = isDone ? 'mb-done' : isLocked ? 'mb-locked' : 'mb-active';
          var badgeLbl = isDone ? '✓ Done' : isLocked ? '🔒' : 'Start';
          var itemCls  = isDone ? 'completed' : isLocked ? 'locked' : '';
          var clickFn  = isLocked ? '' : 'onclick="openModuleByIndex(' + idx + ')"';
          return '<div class="mod-item-m ' + itemCls + '" ' + clickFn + '>' +
            '<div class="mim-num">' + (isDone ? '✓' : (idx + 1)) + '</div>' +
            '<div class="mim-icon ' + typeCls + '">' + typeIcon + '</div>' +
            '<div class="mim-info">' +
              '<div class="mim-title">' + escHtml(mod.title) + '</div>' +
              '<div class="mim-meta">' + escHtml(mod.module_type) + (mod.duration_min ? ' · ' + mod.duration_min + 'm' : '') + '</div>' +
            '</div>' +
            '<div class="mim-badge ' + badgeCls + '">' + badgeLbl + '</div>' +
          '</div>';
        }).join('');

    var nextMod2Idx = modules.findIndex(function(m) { return !m.is_completed && !m.is_locked; });
    var nextMod2 = nextMod2Idx >= 0 ? _normalizeModule(modules[nextMod2Idx]) : null;
    var mBtn = nextMod2
      ? '<button class="btn-full btn-full-black" style="margin:16px" onclick="openModuleByIndex(' + nextMod2Idx + ')">' +
        (pct > 0 ? '▶ Continue Learning' : '▶ Start Course') + '</button>'
      : '';

    cM.innerHTML = mHero +
      '<div class="section-header" style="margin-top:0"><span class="section-title">Modules</span><span class="section-action">' + modules.length + ' total</span></div>' +
      '<div style="padding:0 16px;display:flex;flex-direction:column;gap:10px">' + mModules + '</div>' +
      mBtn + '<div style="height:20px"></div>';
  }
}

/* ─── openModule — routing berdasarkan module_type ─── */
function openModule(mod) {
  if (!mod) return;
  window._currentModule = mod;
  var type = (mod.module_type || '').toUpperCase();
  if      (type === 'VIDEO') goTo('video');
  else if (type === 'PDF')   goTo('pdf');
  else if (type === 'QUIZ')  goTo('quiz');
  else    showToast('Unknown module type: ' + type);
}

/* ─── openModuleByIndex — ambil modul dari _currentModules by index (aman, tanpa inline JSON) ─── */
function openModuleByIndex(idx) {
  var mods = window._currentModules || [];
  var m = mods[idx];
  if (!m) { showToast('Module tidak ditemukan.'); return; }
  openModule(_normalizeModule(m));
}

/* ══════════════════════════════════════
   VIDEO PLAYER
══════════════════════════════════════ */

var _videoWatchInterval = null;
var _videoTimerPaused   = false;
var _videoWatchPct      = 0;
var _videoTabSwitches   = 0;

/* ══════════════════════════════════════
   PLYR ENGINE (YouTube only) — v2.93
   GDrive video tetap pakai jalur lama.
══════════════════════════════════════ */

/* Set ke false kalau saat test di iOS native YouTube player mengambil alih layar.
   Efek: tombol fullscreen tidak dirender di mobile. */
var PLYR_MOBILE_FULLSCREEN = true;

/* true  = boleh seek sampai posisi yang sudah pernah ditonton di sesi sebelumnya
   false = strict, tiap buka modul harus mulai dari 0 lagi */
var PLYR_ALLOW_RESUME_SEEK = true;

var PLYR_SEEK_TOLERANCE = 0.75; // detik — toleransi lompatan maju sebelum dianggap skip.
                                 // v2.115: diperkecil dari 2. TIDAK dibuat 0 karena
                                 // event timeupdate YouTube punya jitter ±0.3s dan
                                 // buffering di 4G bisa melompat sendiri — toleransi 0
                                 // akan memicu toast palsu terus-menerus dan berisiko
                                 // membuat video tersangkut tidak bisa maju sama sekali.
                                 // Guard sebenarnya sekarang di pagar wall-clock di bawah.
var PLYR_BREAKPOINT     = 900;  // px — harus sama dengan media query app

var _plyrPlayer      = null;   // instance Plyr aktif — hanya SATU
var _plyrIsMobile    = null;   // viewport instance aktif
var _plyrMaxWatched  = 0;      // titik terjauh yang benar-benar ditonton (detik)
var _plyrSeekLock    = false;  // cegah loop saat koreksi seek
var _plyrSpeedGuard  = null;   // interval watchdog speed
var _plyrLastLogTs   = 0;      // timestamp log terakhir ke GAS
var _plyrToastTs     = 0;      // throttle toast "skip ditolak"
var _plyrResizeBound = false;  // listener breakpoint sudah dipasang?
var _plyrResizeTimer = null;
var _plyrEnded       = false;  // cegah videoCompleted() dobel
var _plyrSeeded      = false;  // _plyrMaxWatched sudah di-seed dari watch_pct?
var _plyrLastRealMs   = 0;     // v2.115 — Date.now() pada tick sah terakhir
var _plyrLastMediaSec = 0;     // v2.115 — currentTime pada tick sah terakhir

function _plyrViewportIsMobile() {
  return window.innerWidth < PLYR_BREAKPOINT;
}

function _plyrHostId(isMob)   { return isMob ? 'm-plyr-host'  : 'd-plyr-host'; }
function _plyrTargetId(isMob) { return isMob ? 'm-vid-player' : 'd-vid-player'; }

function _plyrDestroy() {
  if (_plyrSpeedGuard) { clearInterval(_plyrSpeedGuard); _plyrSpeedGuard = null; }
  if (_plyrPlayer) {
    try { _plyrPlayer.destroy(); } catch(e) {}
    _plyrPlayer = null;
  }
  _plyrIsMobile = null;
  _plyrSeekLock = false;
}

function _plyrShowCompleteBtns() {
  ['d-vid-next','d-vid-next2'].forEach(function(id) {
    var el = document.getElementById(id);
    if (el) { el.classList.add('show'); el.style.display = 'flex'; }
  });
  var btnM = document.getElementById('m-vid-next');
  if (btnM) btnM.style.display = 'flex';
}

/* v2.116 — lazy-load Plyr CSS+JS (±150 KB total), hanya saat halaman
   video dibuka pertama kali. Sebelumnya dimuat blocking di SETIAP
   halaman untuk semua staff. CSS WAJIB ikut dimuat — kalau hanya JS,
   player akan tampil tanpa styling sama sekali (rusak parah secara
   visual). Pola cache promise sama seperti _pdfLoadLibraries_. */
function _loadStylesheet_(href) {
  return new Promise(function(resolve, reject) {
    var existing = document.querySelector('link[href="' + href + '"]');
    if (existing) { resolve(); return; }
    var el = document.createElement('link');
    el.rel  = 'stylesheet';
    el.href = href;
    el.onload  = function() { resolve(); };
    el.onerror = function() { reject(new Error('Failed to load stylesheet: ' + href)); };
    document.head.appendChild(el);
  });
}

var _plyrLibPromise = null;   // cegah panggilan berulang memuat dobel

function _loadPlyrLibs_() {
  if (typeof Plyr !== 'undefined') return Promise.resolve();
  if (_plyrLibPromise) return _plyrLibPromise;   // sedang dimuat, jangan dobel

  _plyrLibPromise = Promise.all([
    _loadStylesheet_('/vendor/plyr/plyr.min.css'),
    _pdfLoadScript_('/vendor/plyr/plyr.min.js')
  ]).catch(function(err) {
    _plyrLibPromise = null;   // biarkan percobaan berikutnya mencoba lagi
    throw err;
  });
  return _plyrLibPromise;
}

/* Init satu instance Plyr di container yang benar-benar terlihat.
   startAt dipakai saat re-init karena breakpoint berubah.
   v2.116 — TIDAK lagi mengasumsikan Plyr sudah termuat. Kalau belum,
   muat dulu (lazy) baru lanjutkan inisialisasi. Untuk re-init (resize/
   breakpoint, lihat pemanggil di _plyrBindBreakpoint) Plyr PASTI sudah
   termuat karena player sudah pernah jalan — cabang ini selesai
   sinkron seperti sebelumnya, tidak ada jeda tambahan. */
function _plyrInit(videoId, isMob, startAt) {
  if (typeof Plyr === 'undefined') {
    _loadPlyrLibs_()
      .then(function() { _plyrInit(videoId, isMob, startAt); })
      .catch(function() {
        showToast('Video player failed to load. Please check your connection.');
      });
    return;
  }
  if (!videoId) { showToast('Video ID not found for this module.'); return; }

  var host = document.getElementById(_plyrHostId(isMob));
  if (!host) return;

  _plyrDestroy();
  _plyrIsMobile = isMob;
  _plyrEnded    = false;

  var targetId = _plyrTargetId(isMob);
  host.innerHTML = '<div id="' + targetId + '" data-plyr-provider="youtube" ' +
                   'data-plyr-embed-id="' + videoId + '"></div>';

  var allowFs = isMob ? PLYR_MOBILE_FULLSCREEN : true;
  var ctrls   = ['restart','rewind','play','progress','current-time','duration','mute','volume'];
  if (allowFs) ctrls.push('fullscreen');
  /* CATATAN: 'settings' & 'fast-forward' sengaja TIDAK dirender.
     Menu kecepatan ada di dalam 'settings' — tanpa itu, speed tidak bisa diubah dari UI. */

  try {
    _plyrPlayer = new Plyr('#' + targetId, {
      controls   : ctrls,
      settings   : [],
      speed      : { selected: 1, options: [1] },
      keyboard   : { focused: false, global: false },
      tooltips   : { controls: false, seek: true },
      ratio      : '16:9', iconUrl: '/vendor/plyr/plyr.svg',
      seekTime   : 10,
      invertTime : false,
      resetOnEnd : false,
      clickToPlay: true,
      fullscreen : { enabled: allowFs, fallback: true, iosNative: false },
      youtube    : {
        controls       : 0,
        disablekb      : 1,
        rel            : 0,
        showinfo       : 0,
        iv_load_policy : 3,
        modestbranding : 1,
        playsinline    : 1
      }
    });
  } catch(e) {
    console.error('Plyr init failed', e);
    showToast('Video player failed to start.');
    return;
  }

  _plyrPlayer.on('ready',       function() { _plyrOnReady(host, startAt); });
  _plyrPlayer.on('timeupdate',  _plyrOnTimeUpdate);
  _plyrPlayer.on('seeking',     _plyrOnTimeUpdate);
  _plyrPlayer.on('seeked',      _plyrOnTimeUpdate);
  _plyrPlayer.on('ended',       _plyrOnEnded);
  _plyrPlayer.on('ratechange',  _plyrForceNormalSpeed);

  /* Lapis 3 — watchdog kecepatan */
  if (_plyrSpeedGuard) clearInterval(_plyrSpeedGuard);
  _plyrSpeedGuard = setInterval(_plyrForceNormalSpeed, 500);

  _plyrBindBreakpoint();
}

/* v3.00 — detik menjadi m:ss untuk pesan resume */
function _fmtClock(sec) {
  var t = Math.max(0, Math.floor(sec || 0));
  var m = Math.floor(t / 60);
  var r = t % 60;
  return m + ':' + (r < 10 ? '0' : '') + r;
}

function _plyrForceNormalSpeed() {
  if (!_plyrPlayer) return;
  try {
    if (_plyrPlayer.speed !== 1) _plyrPlayer.speed = 1;
  } catch(e) {}
}

function _plyrOnReady(host, startAt) {
  /* Lapis 1 — perisai transparan di atas iframe, di bawah control bar Plyr */
  var wrap = host.querySelector('.plyr__video-wrapper') || host.querySelector('.plyr');
  if (wrap && !wrap.querySelector('.lms-plyr-shield')) {
    var shield = document.createElement('div');
    shield.className = 'lms-plyr-shield';
    wrap.appendChild(shield);
  }

  /* Lapis 2 — iframe tidak boleh dapat fokus keyboard */
  var ifr = host.querySelector('iframe');
  if (ifr) {
    ifr.setAttribute('tabindex', '-1');
    try { ifr.blur(); } catch(e) {}
  }

  _plyrForceNormalSpeed();

  /* v2.115 — reset pagar wall-clock setiap kali player siap (termasuk
     re-init breakpoint di bawah), supaya jam mulai dihitung dari titik
     yang benar dan tidak membawa sisa hitungan dari modul sebelumnya. */
  _plyrLastRealMs   = Date.now();
  _plyrLastMediaSec = _plyrMaxWatched;

  /* Seed titik terjauh dari progress tersimpan (sekali saja per modul) */
  if (!_plyrSeeded) {
    _plyrSeeded = true;
    if (PLYR_ALLOW_RESUME_SEEK && _videoWatchPct > 0) {
      var d = 0;
      try { d = _plyrPlayer.duration || 0; } catch(e) {}
      if (d > 0) {
        _plyrMaxWatched = Math.min(d, (_videoWatchPct / 100) * d);

        /* v3.00 — AUTO-RESUME.
           Sebelumnya video selalu mulai dari 0 dan staff harus menggeser
           seekbar sendiri ke posisi terakhir. Untuk video 15 menit yang
           tertutup di menit 14, itu menyiksa. Sekarang langsung dilompatkan.
           Sisakan 3 detik mundur sebagai jembatan konteks, dan jangan
           resume kalau tinggal sedikit lagi tamat. */
        if (_videoWatchPct >= 3 && _videoWatchPct < 98) {
          var resumeAt = Math.max(0, _plyrMaxWatched - 3);
          try { _plyrPlayer.currentTime = resumeAt; } catch(e) {}
          _plyrLastMediaSec = resumeAt;   // v2.115 — sinkronkan pagar wall-clock
          showToast('Resumed from ' + _fmtClock(resumeAt) + '.');
        }
      }
    }
  }

  /* Re-init karena ganti breakpoint — kembalikan posisi tontonan */
  if (startAt && startAt > 0) {
    try { _plyrPlayer.currentTime = startAt; } catch(e) {}
  }
}

function _plyrOnTimeUpdate() {
  if (!_plyrPlayer) return;

  var dur = 0, t = 0;
  try { dur = _plyrPlayer.duration    || 0; } catch(e) { return; }
  try { t   = _plyrPlayer.currentTime || 0; } catch(e) { return; }
  if (dur <= 0) return;

  /* Seed menyusul kalau duration baru tersedia setelah 'ready' */
  if (_plyrSeeded && PLYR_ALLOW_RESUME_SEEK && _plyrMaxWatched === 0 && _videoWatchPct > 0) {
    _plyrMaxWatched = Math.min(dur, (_videoWatchPct / 100) * dur);
  }

  /* ── SEEK GUARD — maju ditolak, mundur bebas ── */
  if (t > _plyrMaxWatched + PLYR_SEEK_TOLERANCE) {
    if (!_plyrSeekLock) {
      _plyrSeekLock = true;
      try { _plyrPlayer.currentTime = _plyrMaxWatched; } catch(e) {}
      setTimeout(function() { _plyrSeekLock = false; }, 500);
      var now = Date.now();
      if (now - _plyrToastTs > 3000) {
        _plyrToastTs = now;
        showToast('Skipping ahead is not allowed.');
      }
    }
    return;
  }
  if (t > _plyrMaxWatched) {
    /* v2.115 — PAGAR WALL-CLOCK. PLYR_SEEK_TOLERANCE saja tidak cukup:
       di mobile, tap presisi di seekbar bisa melompat <0.75s berkali-kali
       berturut-turut sehingga _plyrMaxWatched naik terus tanpa benar-benar
       menonton (celah yang dilaporkan HRM — "majuin dikit-dikit bisa").
       Di sini kenaikan dibatasi seberapa banyak detik yang BENAR-BENAR
       berlalu di jam dinding sejak tick sah terakhir, dengan kelonggaran
       1.25x + 0.75s untuk jitter timeupdate & buffering — bukan toleransi 0
       yang berisiko memicu toast palsu terus-menerus. */
    var realElapsedSec = (Date.now() - _plyrLastRealMs) / 1000;
    var maxAllowedGain  = realElapsedSec * 1.25 + PLYR_SEEK_TOLERANCE;
    var proposedGain    = t - _plyrLastMediaSec;

    if (proposedGain > maxAllowedGain) {
      if (!_plyrSeekLock) {
        _plyrSeekLock = true;
        try { _plyrPlayer.currentTime = _plyrMaxWatched; } catch(e) {}
        setTimeout(function() { _plyrSeekLock = false; }, 500);
        var nowWc = Date.now();
        if (nowWc - _plyrToastTs > 3000) {
          _plyrToastTs = nowWc;
          showToast('Skipping ahead is not allowed.');
        }
      }
      return;
    }
    _plyrMaxWatched = t;
  }
  _plyrLastRealMs   = Date.now();
  _plyrLastMediaSec = _plyrMaxWatched;

  /* ── Progress berbasis waktu tonton nyata ── */
  var pct = Math.round((_plyrMaxWatched / dur) * 100);
  if (pct > 100) pct = 100;
  if (pct > _videoWatchPct) {
    _videoWatchPct = pct;
    _updateVideoProgress(pct);
  }

  if (_videoWatchPct >= 100) _plyrShowCompleteBtns();

  /* Log ke GAS tiap 10 detik */
  var ts = Date.now();
  if (ts - _plyrLastLogTs >= 10000) {
    _plyrLastLogTs = ts;
    _logVideoProgress(_videoWatchPct);
  }
}

var _videoSkipModalShowing = false;   // v2.116 — cegah popup dobel muncul

/* v2.116 Item 2A-5 — popup custom untuk kasus paling sengaja (lompat
   langsung ke ujung tanpa menonton). Dibuat dinamis via JS, bukan lewat
   markup .modal-overlay statis yang sudah ada (dipakai modal User/Course
   dll) — video bisa dalam mode fullscreen, jadi popup harus mandiri dan
   z-index tinggi supaya selalu terlihat di atas player. */
function _showVideoSkipModal_() {
  if (_videoSkipModalShowing) return;
  _videoSkipModalShowing = true;

  /* v2.117 — popup ini dibuat via element.style.cssText (bukan class),
     jadi CSS body.dark-mode tidak bisa menimpanya. Sebelumnya selalu
     putih menyala walau dark mode aktif. Dicek manual di sini supaya
     dua palet warna disiapkan, tombol OK tetap gelap+kontras di
     keduanya. */
  var _isDark  = document.body.classList.contains('dark-mode');
  var boxBg    = _isDark ? '#1E1E1E' : '#fff';
  var boxTitle = _isDark ? '#F0F0F0' : '#0A0A0A';
  var boxBody  = _isDark ? '#CCCCCC' : '#555';

  var overlay = document.createElement('div');
  overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.6);' +
    'z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;';

  var box = document.createElement('div');
  box.style.cssText = 'background:' + boxBg + ';border-radius:16px;padding:28px 24px;' +
    'max-width:360px;width:100%;text-align:center;font-family:Inter,sans-serif;';
  box.innerHTML =
    '<div style="font-size:17px;font-weight:700;color:' + boxTitle + ';margin-bottom:10px">Video not completed</div>' +
    '<div style="font-size:13.5px;color:' + boxBody + ';line-height:1.5;margin-bottom:20px">' +
      'You skipped to the end without watching. Your progress has been restored to where you left off.' +
      '<br><br>Please watch the full video to complete this module.' +
    '</div>' +
    '<button id="video-skip-modal-ok" style="width:100%;height:44px;border-radius:10px;' +
      'border:none;background:#0A0A0A;color:#fff;font-family:Inter,sans-serif;' +
      'font-size:14px;font-weight:700;cursor:pointer">OK</button>';

  overlay.appendChild(box);
  document.body.appendChild(overlay);

  var closeIt = function() {
    try { document.body.removeChild(overlay); } catch(e) {}
    _videoSkipModalShowing = false;
  };
  box.querySelector('#video-skip-modal-ok').onclick = closeIt;
  overlay.onclick = function(e) { if (e.target === overlay) closeIt(); };
}

function _plyrOnEnded() {
  if (_plyrEnded) return;

  /* v2.115 — PENJAGA PALING PENTING di seluruh seek guard.
     Event 'ended' YouTube terpicu begitu currentTime menyentuh akhir video
     — termasuk saat staff menarik seekbar langsung ke ujung tanpa menonton
     apa pun. Sebelumnya baris di bawah langsung menyetel
     _plyrMaxWatched = duration tanpa verifikasi, sehingga MELEWATI seluruh
     guard timeupdate & pagar wall-clock di atas — inilah sebab pasti video
     bisa "diselesaikan" hanya dengan menarik seekbar ke ujung (dilaporkan
     HRM: lompat ke 100% bisa, ke 40/50/70% tidak).
     Sekarang: kalau _plyrMaxWatched (bukti tontonan nyata yang sudah lolos
     guard) belum mencapai ~98% durasi, tolak — video dianggap BELUM selesai
     dan diposisikan kembali ke titik terjauh yang sah. */
  var durChk = 0;
  try { durChk = _plyrPlayer ? (_plyrPlayer.duration || 0) : 0; } catch(e) {}

  if (durChk > 0 && _plyrMaxWatched < durChk * 0.98) {
    try { _plyrPlayer.currentTime = _plyrMaxWatched; } catch(e) {}
    /* v2.116 Item 2A-5 — popup custom untuk kasus PALING sengaja (lompat
       langsung ke ujung), menggantikan toast biasa yang dipakai lapis
       ke-2 (maju sedikit, di _plyrOnTimeUpdate — TIDAK diubah, toast
       tetap tepat untuk kejadian yang lebih sering & kurang disengaja
       itu). Popup custom, bukan alert()/confirm() native, supaya tidak
       memaksa keluar fullscreen di iOS Safari. */
    _showVideoSkipModal_();
    return;   // TIDAK menandai selesai, TIDAK memanggil videoCompleted()
  }

  _plyrEnded = true;
  try {
    if (_plyrPlayer && _plyrPlayer.duration) _plyrMaxWatched = _plyrPlayer.duration;
  } catch(e) {}
  _videoWatchPct = 100;
  _updateVideoProgress(100);
  _plyrShowCompleteBtns();
  _logVideoProgress(100);
  setTimeout(function() { videoCompleted(); }, 800);
}

/* Re-init saat browser di-resize melewati breakpoint 900px.
   Posisi tontonan & _plyrMaxWatched dipertahankan. */
function _plyrBindBreakpoint() {
  if (_plyrResizeBound) return;
  _plyrResizeBound = true;
  window.addEventListener('resize', _plyrOnResize);
}

function _plyrOnResize() {
  if (_plyrResizeTimer) clearTimeout(_plyrResizeTimer);
  _plyrResizeTimer = setTimeout(function() {
    if (!_plyrPlayer) return;
    var nowMob = _plyrViewportIsMobile();
    if (nowMob === _plyrIsMobile) return;

    var mod = window._currentModule;
    if (!mod) return;
    var vid = mod.drive_file_id || '';
    var at  = 0;
    try { at = _plyrPlayer.currentTime || 0; } catch(e) {}

    _plyrInit(vid, nowMob, at);
  }, 250);
}

/* Native <video> event handlers */
function _onVideoPlay() {
  var sid = sessionStorage.getItem('lms_session_id');
  var mod = window._currentModule;
  if (!sid || !mod) return;
  if (_videoWatchInterval) clearInterval(_videoWatchInterval);
  _videoWatchInterval = setInterval(function() {
    var vid = document.getElementById('d-vid-player') || document.getElementById('m-vid-player');
    if (!vid || vid.paused || vid.ended) return;
    var pct = vid.duration > 0 ? Math.round((vid.currentTime / vid.duration) * 100) : 0;
    _videoWatchPct = pct;
    // Update progress bar UI
    ['d-vpf','m-vpf'].forEach(function(id) {
      var el = document.getElementById(id);
      if (el) el.style.width = pct + '%';
    });
    ['d-vpct','m-vpct'].forEach(function(id) {
      var el = document.getElementById(id);
      if (el) el.textContent = pct + '% watched';
    });
    // Show complete button at 100%
    if (pct >= 100) {
      ['d-vid-next','d-vid-next2'].forEach(function(id) {
        var el = document.getElementById(id);
        if (el) { el.classList.add('show'); el.style.display = 'flex'; }
      });
    }
    // Report to GAS every 10s
    google.script.run.markVideoProgress(sid, mod.module_id, pct);
  }, 10000);
}

function _onVideoTimeUpdate(vid) {
  if (!vid || vid.duration <= 0) return;
  var pct = Math.round((vid.currentTime / vid.duration) * 100);
  _videoWatchPct = pct;
  ['d-vpf','m-vpf'].forEach(function(id) {
    var el = document.getElementById(id);
    if (el) el.style.width = pct + '%';
  });
  ['d-vpct','m-vpct'].forEach(function(id) {
    var el = document.getElementById(id);
    if (el) el.textContent = pct + '% watched';
  });
  if (pct >= 100) {
    ['d-vid-next','d-vid-next2'].forEach(function(id) {
      var el = document.getElementById(id);
      if (el) { el.classList.add('show'); el.style.display = 'flex'; }
    });
  }
}

function _onVideoEnded() {
  _videoWatchPct = 100;
  if (_videoWatchInterval) { clearInterval(_videoWatchInterval); _videoWatchInterval = null; }
  ['d-vid-next','d-vid-next2'].forEach(function(id) {
    var el = document.getElementById(id);
    if (el) { el.classList.add('show'); el.style.display = 'flex'; }
  });
  ['d-vpf','m-vpf'].forEach(function(id) {
    var el = document.getElementById(id);
    if (el) el.style.width = '100%';
  });
  ['d-vpct','m-vpct'].forEach(function(id) {
    var el = document.getElementById(id);
    if (el) el.textContent = '100% watched';
  });
  setTimeout(function() { videoCompleted(); }, 800);
}

/* ══════════════════════════════════════
   GUARD MODUL ↔ HALAMAN — v2.95
   Aturan: modul tersorot di panel kanan HARUS cocok dengan isi panel kiri.
   Dipakai sebagai jaring pengaman di loadVideo/loadPdf/loadQuiz untuk
   menutup jalur selain Back — refresh browser, deep link, desync tak terduga.
══════════════════════════════════════ */
function _routeModuleToPage(mod) {
  var t = ((mod && mod.module_type) || '').toUpperCase();
  var target = t === 'VIDEO' ? 'video'
             : t === 'PDF'   ? 'pdf'
             : t === 'QUIZ'  ? 'quiz'
             : '';
  if (!target) { goTo('course-detail'); return; }
  /* Pakai _navigateTo (bukan goTo) supaya tidak menambah entry history —
     ini koreksi, bukan navigasi baru. Puncak stack dirapikan manual
     agar _navStack & _navModStack tetap mencerminkan layar sebenarnya. */
  if (_navStack.length > 0)    _navStack[_navStack.length - 1]       = target;
  if (_navModStack.length > 0) _navModStack[_navModStack.length - 1] = mod || null;
  _navigateTo(target);
}

/* ═══════════════════════════════════════════════════════════
   DAFTAR MODUL — v3.01
   Sebelumnya 25 baris ini digandakan persis di halaman video dan
   PDF, sehingga tiap perubahan harus dikerjakan dua kali dan mudah
   menyimpang. Sekarang satu sumber, dipakai desktop maupun mobile.

   compact = tampilan mobile: lebih rapat, tanpa batas tinggi,
   karena di HP letaknya di bawah modul, bukan di panel samping.
═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
   BANNER PENGINGAT TENGGAT — v3.01
   Memakai data deadlines yang SUDAH dikirim getDashboardStats
   (title, dept, days_left). Tidak ada perubahan backend.
   Yang lewat tenggat didahulukan; kalau tidak ada, baru yang
   mendekati. Banner tidak muncul kalau semuanya aman.
═══════════════════════════════════════════════════════ */
var DEADLINE_SOON_DAYS = 7;

function _deadlineBanner(deadlines) {
  var list = deadlines || [];
  if (!list.length) return '';

  var overdue = [], soon = [];
  for (var i = 0; i < list.length; i++) {
    var d = list[i];
    var n = parseInt(d.days_left);
    if (isNaN(n)) continue;
    if (n <= 0) overdue.push(d);
    else if (n <= DEADLINE_SOON_DAYS) soon.push(d);
  }
  if (!overdue.length && !soon.length) return '';

  var crit  = overdue.length > 0;
  var items = crit ? overdue : soon;

  var names = items.slice(0, 3).map(function(d) {
    return '<b>' + escHtml(d.title || '') + '</b>';
  }).join(', ');
  var more = items.length > 3 ? ' and ' + (items.length - 3) + ' more' : '';

  var title, detail;
  if (crit) {
    title  = items.length === 1 ? '1 course is past its deadline'
                                : items.length + ' courses are past their deadline';
    detail = names + more + ' — please complete as soon as you can.';
  } else {
    var soonest = items[0].days_left;
    for (var k = 1; k < items.length; k++) {
      if (parseInt(items[k].days_left) < parseInt(soonest)) soonest = items[k].days_left;
    }
    title  = items.length === 1 ? '1 course is due soon'
                                : items.length + ' courses are due soon';
    detail = names + more + ' — ' + soonest + ' day' + (soonest == 1 ? '' : 's') + ' left.';
  }

  return '<div class="dl-banner ' + (crit ? 'crit' : 'warn') + '">' +
      '<div class="dlb-ic">' + (crit ? '\u26A0\uFE0F' : '\u23F0') + '</div>' +
      '<div class="dlb-body">' +
        '<div class="dlb-title">' + title + '</div>' +
        '<div class="dlb-list">' + detail + '</div>' +
      '</div>' +
      '<button class="dlb-go" onclick="goTo(\'courses\')">View courses</button>' +
    '</div>';
}

function _courseModuleList(activeModuleId, compact) {
  var allMods = window._currentModules || [];
  if (!allMods.length) return '';

  var pad  = compact ? '9px 11px' : '10px 12px';
  var ttl  = compact ? '13px'     : '12.5px';
  var gap  = compact ? '5px'      : '6px';
  var maxH = compact ? 'none'     : '420px';
  var ovf  = compact ? 'visible'  : 'auto';

  var modItems = allMods.map(function(m, idx) {
    var mType    = (m.type || m.module_type || '').toUpperCase();
    var typeIcon = { VIDEO:'🎬', PDF:'📄', QUIZ:'📝' }[mType] || '📄';
    var isActive = m.module_id === activeModuleId;
    var isDone   = m.is_completed || false;
    var statusEl = isDone
      ? '<span style="color:#10B981;font-size:14px;font-weight:700">✅</span>'
      : (isActive
        ? '<span style="width:10px;height:10px;border-radius:50%;background:var(--gold);display:inline-block"></span>'
        : '<span style="width:10px;height:10px;border-radius:50%;border:1.5px solid var(--gray-300);display:inline-block"></span>');
    var dur       = m.duration_min ? m.duration_min + ' min' : '';
    var activeBg  = isActive ? 'background:rgba(201,160,101,0.08);border-color:var(--gold);' : '';
    var clickAttr = isActive ? '' : 'onclick="openModuleByIndex(' + idx + ')"';
    var hoverAttr = isActive ? '' : ' onmouseover="this.style.borderColor=\'var(--gold)\'" onmouseout="this.style.borderColor=\'var(--gray-100)\'"';
    return '<div ' + clickAttr + hoverAttr + ' style="display:flex;align-items:center;gap:10px;padding:' + pad + ';border-radius:10px;border:1.5px solid var(--gray-100);' + activeBg + (isActive?'':'cursor:pointer;') + 'transition:all 0.18s">' +
      '<div style="flex-shrink:0;width:16px;text-align:center">' + statusEl + '</div>' +
      '<div style="font-size:15px;flex-shrink:0">' + typeIcon + '</div>' +
      '<div style="flex:1;min-width:0">' +
        '<div style="font-size:' + ttl + ';font-weight:' + (isActive?'700':'500') + ';color:var(--black);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">' + escHtml(m.title || '') + '</div>' +
        (dur ? '<div style="font-size:11px;color:var(--gray-400)">' + dur + '</div>' : '') +
      '</div>' +
    '</div>';
  }).join('');

  var doneCount = allMods.filter(function(m){ return m.is_completed; }).length;

  return '<div class="video-info-card" style="padding:14px 16px">' +
      '<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px">' +
        '<div class="vi-label" style="margin-bottom:0">Course Modules</div>' +
        '<span style="font-size:12px;color:var(--gray-500)">' + doneCount + '/' + allMods.length + ' done</span>' +
      '</div>' +
      '<div style="display:flex;flex-direction:column;gap:' + gap + ';max-height:' + maxH + ';overflow-y:' + ovf + '">' + modItems + '</div>' +
    '</div>';
}

function loadVideo() {
  var mod    = window._currentModule;
  var course = window._currentCourse;
  if (!mod || !course) { goTo('courses'); return; }

  /* v2.95 — guard: halaman video hanya untuk modul VIDEO */
  if ((mod.module_type || '').toUpperCase() !== 'VIDEO') { _routeModuleToPage(mod); return; }

  // Update labels
  var t = function(id, v) { var el = document.getElementById(id); if (el) el.textContent = v; };
  t('d-video-title',       mod.title || 'Video');
  t('d-video-course-name', course.title || 'Course');
  t('m-video-eyebrow', course.title || 'Course');
  t('m-video-title',   mod.title || 'Video');

  // Detect source type — GAS v1.2+ return source_type field
  var sourceType   = mod.source_type || 'GDRIVE';
  var driveFileId  = mod.drive_url || mod.content_url || '';
  // Fallback: detect dari content_url jika source_type belum ada
  if (!mod.source_type && typeof driveFileId === 'string' &&
      driveFileId.indexOf('youtube.com') >= 0) {
    sourceType = 'YOUTUBE';
  }

  // GDrive: extract raw file ID untuk open link
  var rawId        = mod.drive_file_id || '';
  if (!rawId && sourceType === 'GDRIVE') {
    var idMatch = driveFileId.match(/\/file\/d\/([a-zA-Z0-9_-]+)/);
    if (idMatch) rawId = idMatch[1];
  }
  var openDriveUrl = rawId ? 'https://drive.google.com/file/d/' + rawId + '/view' : '';

  // YouTube: video ID
  var youtubeVideoId = mod.drive_file_id || '';

  // Reset state
  _videoWatchPct    = mod.watch_pct || 0;
  _videoTabSwitches = 0;
  if (_videoWatchInterval) { clearInterval(_videoWatchInterval); _videoWatchInterval = null; }

  /* v3.00 — akhir dari demo mode. Tombol Complete hanya muncul kalau
     modul memang sudah pernah selesai, atau progress sudah 100%.
     Selama menonton, _plyrOnTimeUpdate yang akan memunculkannya. */
  var vidDoneStyle = (mod.is_completed || (parseInt(mod.watch_pct) || 0) >= 100)
    ? 'display:flex' : 'display:none';

  // Reset state Plyr — instance lama dibuang supaya tidak ada dua player hidup
  _plyrDestroy();
  _plyrMaxWatched = 0;
  _plyrLastLogTs  = 0;
  _plyrToastTs    = 0;
  _plyrEnded      = false;
  _plyrSeeded     = false;

  var renderVideoPage = function(contentId, isMob) {
    var el = document.getElementById(contentId);
    if (!el) return;

    var warnBanner = '<div class="tab-warn-banner' + (isMob ? '' : '') + '" id="' + (isMob ? 'm' : 'd') + '-tab-warn">⚠️ Tab switch terdeteksi! Kembali ke video segera.</div>';
    var progBar = isMob
      ? '<div class="m-video-controls">' +
          '<div class="m-video-prog"><div class="m-video-prog-fill" id="m-vpf" style="width:' + _videoWatchPct + '%"></div></div>' +
          '<div style="display:flex;justify-content:space-between;font-size:12px;padding:0 2px">' +
            '<span style="color:var(--gray-500)">Watch progress</span>' +
            '<span style="color:var(--gold);font-weight:700" id="m-vpct">' + _videoWatchPct + '%</span>' +
          '</div>' +
          '<button class="btn-full btn-full-black" id="m-vid-next" style="' + vidDoneStyle + ';margin:12px 0 0" onclick="videoCompleted()">Next Module →</button>' +
        '</div>'
      : '<div class="video-controls">' +
          '<div class="tab-warn-banner" id="d-tab-warn">⚠️ Tab switch terdeteksi! Video di-pause.</div>' +
          '<button class="video-next-btn" id="d-vid-next" onclick="videoCompleted()" style="' + vidDoneStyle + ';margin-top:4px">✓ Module Complete — Next →</button>' +
        '</div>';

    // Fallback link
    var openDriveBtn = '<div style="text-align:right;padding:6px 0 2px">' +
      '<a href="' + openDriveUrl + '" target="_blank" rel="noopener" ' +
      'style="font-size:12px;color:var(--gray-500);text-decoration:none;display:inline-flex;align-items:center;gap:4px;' +
      'border:1px solid var(--gray-200);border-radius:6px;padding:4px 10px;background:var(--white)">' +
      '&#x2197; Open in Drive</a></div>';

    var vidId     = isMob ? 'm-vid-player' : 'd-vid-player';
    var overlayId = isMob ? 'm-vid-start-overlay' : 'd-vid-start-overlay';

    // Build embed URL sesuai source type
    var embedUrl = sourceType === 'YOUTUBE'
      ? 'https://www.youtube.com/embed/' + youtubeVideoId +
        '?enablejsapi=1&rel=0&modestbranding=1&origin=' + encodeURIComponent(window.location.origin)
      : 'https://drive.google.com/file/d/' + rawId + '/preview';

    // Overlay hint text sesuai source
    var overlayHint = sourceType === 'YOUTUBE'
      ? 'Click here to start — YouTube will auto-detect pause'
      : 'Click here, then click Play in the video';

    // Open external link (GDrive only)
    var openDriveBtn = sourceType === 'GDRIVE' && openDriveUrl
      ? '<div style="text-align:right;padding:6px 0 2px">' +
        '<a href="' + openDriveUrl + '" target="_blank" rel="noopener" ' +
        'style="font-size:12px;color:var(--gray-500);text-decoration:none;display:inline-flex;align-items:center;gap:4px;' +
        'border:1px solid var(--gray-200);border-radius:6px;padding:4px 10px;background:var(--white)">' +
        '&#x2197; Open in Drive</a></div>'
      : '';

    /* YOUTUBE → host kosong, diisi oleh Plyr setelah render.
       Tidak ada overlay "Start Watching" — tombol play Plyr yang dipakai. */
    var videoTag = sourceType === 'YOUTUBE'
      ? '<div class="lms-plyr-wrap" id="' + (isMob ? 'm-plyr-host' : 'd-plyr-host') + '"></div>' +
        /* v2.116 Item 2A-5 — notice permanen, lapis PERTAMA & preventif
           dari 3 lapis seek-guard. Muncul SEBELUM staff mencoba skip,
           bukan reaktif sesudahnya — jauh lebih efektif mencegah
           kebingungan/keluhan dibanding toast/popup semata. */
        '<div style="text-align:center;font-size:11.5px;color:var(--gray-500);' +
        'padding:8px 4px 0;font-family:Inter,sans-serif">' +
        '&#9888; Skipping is disabled. Watch the full video to unlock Complete.</div>'
      /* GDRIVE → jalur lama, tidak diubah */
      : '<div class="video-container" style="background:#000;position:relative">' +
        '<iframe id="' + vidId + '" src="' + embedUrl + '" ' +
          'style="width:100%;height:100%;border:none;min-height:480px" ' +
          'allow="autoplay; fullscreen; encrypted-media; picture-in-picture" ' +
          'sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation" ' +
          'allowfullscreen>' +
        '</iframe>' +
        '<div id="' + overlayId + '" ' +
          'style="position:absolute;inset:0;background:rgba(0,0,0,0.55);display:flex;flex-direction:column;' +
          'align-items:center;justify-content:center;z-index:20;cursor:pointer" ' +
          'onclick="startWatchingVideo(this)">' +
          '<div style="width:72px;height:72px;border-radius:50%;background:var(--gold);display:flex;' +
          'align-items:center;justify-content:center;margin-bottom:12px">' +
            '<svg width="28" height="28" viewBox="0 0 24 24" fill="#000"><polygon points="5,3 19,12 5,21"/></svg>' +
          '</div>' +
          '<div style="color:#fff;font-size:14px;font-weight:700;font-family:Inter,sans-serif">\u25b6 Start Watching</div>' +
          '<div style="color:rgba(255,255,255,0.6);font-size:12px;margin-top:4px;font-family:Inter,sans-serif">' + overlayHint + '</div>' +
        '</div>' +
      '</div>';

    var iframeSection = isMob
      ? videoTag + openDriveBtn + progBar
      : videoTag + openDriveBtn + progBar;

    if (isMob) {
      el.innerHTML = iframeSection +
        '<div style="padding:16px">' +
          '<div style="font-size:13px;font-weight:600;margin-bottom:4px">' + escHtml(mod.title) + '</div>' +
          '<div style="font-size:12px;color:var(--gray-500)">' + escHtml(mod.description || '') + '</div>' +
        '</div>' +
        /* v3.01 — di HP tidak ada panel samping, jadi daftar modul
           diletakkan di bawah supaya staff tetap tahu posisinya. */
        '<div style="padding:0 16px">' + _courseModuleList(mod.module_id, true) + '</div>' +
        '<div style="height:20px"></div>';
    } else {
      var sideInfo =
        _courseModuleList(mod.module_id, false) +
        '<button class="video-next-btn" id="d-vid-next2" onclick="videoCompleted()" style="' + vidDoneStyle + '">✓ Complete — Next →</button>';

      el.innerHTML =
        '<div class="video-page-layout">' +
          '<div class="video-main">' +
            '<div class="video-header">' +
              '<div class="video-back-btn" onclick="backToCourseDetail()">← ' + escHtml(course.title || 'Course') + '</div>' +
              '<div class="video-mod-title">' + escHtml(mod.title) + '</div>' +
            '</div>' +
            iframeSection +
          '</div>' +
          '<div class="video-side">' + sideInfo + '</div>' +
        '</div>';
    }
  };

  renderVideoPage('d-video-content', false);
  renderVideoPage('m-video-content', true);

  // YOUTUBE → init SATU instance Plyr di viewport yang sedang terlihat.
  // GDRIVE  → timer lama, mulai saat user klik overlay ▶ Start Watching.
  if (sourceType === 'YOUTUBE') {
    _plyrInit(youtubeVideoId, _plyrViewportIsMobile(), 0);
  }

  // Tab-switch detection — remove dulu supaya tidak dobel saat auto-advance
  document.removeEventListener('visibilitychange', _onVideoTabSwitch);
  document.addEventListener('visibilitychange', _onVideoTabSwitch);
}

function startWatchingVideo(overlayEl) {
  /* v2.93 — hanya dipakai oleh video GDRIVE.
     Video YOUTUBE sekarang ditangani Plyr (tanpa overlay ini). */
  if (overlayEl) overlayEl.style.display = 'none';
  _videoTimerPaused = false;

  var isMob  = overlayEl && overlayEl.id === 'm-vid-start-overlay';
  var vidId  = isMob ? 'm-vid-player' : 'd-vid-player';
  var iframe = document.getElementById(vidId);

  if (iframe && iframe.src) {
    var src = iframe.src.split('?')[0];
    iframe.src = src + '?autoplay=1';
  }

  _startVideoTimer();
}


function _startVideoTimer() {
  if (_videoWatchInterval) clearInterval(_videoWatchInterval);
  var logInterval = 0;
  _videoWatchInterval = setInterval(function() {
    // Skip increment kalau timer di-pause oleh user
    if (_videoTimerPaused) return;
    // Increment 1% setiap 3 detik (simulasi — real impl perlu postMessage dari iframe)
    if (_videoWatchPct < 100) {
      _videoWatchPct = Math.min(100, _videoWatchPct + 1);
      _updateVideoProgress(_videoWatchPct);
    }
    logInterval++;
    // Log ke GAS setiap 10 detik (logInterval × 3s = 10s = 3-4 ticks)
    if (logInterval >= 4) {
      logInterval = 0;
      _logVideoProgress(_videoWatchPct);
    }
    if (_videoWatchPct >= 100) {
      // Tampilkan tombol Complete saat 100%
      var btnD  = document.getElementById('d-vid-next');
      var btnD2 = document.getElementById('d-vid-next2');
      var btnM  = document.getElementById('m-vid-next');
      if (btnD)  { btnD.classList.add('show'); }
      if (btnD2) { btnD2.style.display = 'flex'; }
      if (btnM)  { btnM.style.display = 'block'; }
    }
    if (_videoWatchPct >= 100) {
      clearInterval(_videoWatchInterval);
      _videoWatchInterval = null;
    }
  }, 3000);
}


function _updateVideoProgress(pct) {
  // Mobile progress bar masih ada
  var setPct = function(id) { var el = document.getElementById(id); if (el) el.style.width = pct + '%'; };
  var setTxt = function(id, txt) { var el = document.getElementById(id); if (el) el.textContent = txt; };
  setPct('m-vpf');
  setTxt('m-vpct', pct + '%');
}

function _logVideoProgress(pct) {
  var sid = sessionStorage.getItem('lms_session_id');
  var mod = window._currentModule;
  if (!sid || !mod) return;
  google.script.run
    .markVideoProgress(sid, mod.module_id, pct);
}

/* v3.00 — kirim progress terakhir ke GAS segera, tanpa menunggu interval.
   Dipanggil saat tab disembunyikan dan saat halaman ditutup. */
function _flushVideoProgress() {
  try {
    var mod = window._currentModule;
    if (!mod || !_plyrPlayer) return;
    var pct = parseInt(_videoWatchPct) || 0;
    if (pct <= 0) return;
    var sid = sessionStorage.getItem('lms_session_id');
    if (!sid) return;
    google.script.run.markVideoProgress(sid, mod.module_id, pct);
    _plyrLastLogTs = Date.now();
  } catch (e) {}
}

/* Tab ditutup / browser di-refresh */
window.addEventListener('pagehide', _flushVideoProgress);

function _onVideoTabSwitch() {
  if (document.hidden) {
    // Tab tidak aktif — pause timer + pause VIDEO otomatis
    _videoTabSwitches++;
    _videoTimerPaused = true;
    var warnD = document.getElementById('d-tab-warn');
    var warnM = document.getElementById('m-tab-warn');
    if (warnD) warnD.classList.add('show');
    if (warnM) warnM.classList.add('show');
    /* v3.00 — selamatkan progress sebelum tab benar-benar ditutup.
       Interval normal menyimpan tiap 10 detik; tanpa ini, detik-detik
       terakhir sebelum tab hilang ikut lenyap. */
    _flushVideoProgress();

    // Auto-pause video — v2.93: Plyr untuk YouTube, fallback lama untuk GDrive
    if (_plyrPlayer) {
      try { _plyrPlayer.pause(); } catch(e) {}
    } else {
      var vidEl = document.getElementById('d-vid-player') || document.getElementById('m-vid-player');
      if (vidEl && typeof vidEl.pause === 'function') {
        try { vidEl.pause(); } catch(e) {}
      }
    }
    // Log ke GAS
    var sid = sessionStorage.getItem('lms_session_id');
    var mod = window._currentModule;
    if (sid && mod) {
      google.script.run.markVideoProgress(sid, mod.module_id, _videoWatchPct);
    }
  } else {
    // User kembali ke tab — resume timer otomatis
    _videoTimerPaused = false;
    setTimeout(function() {
      var warnD = document.getElementById('d-tab-warn');
      var warnM = document.getElementById('m-tab-warn');
      if (warnD) warnD.classList.remove('show');
      if (warnM) warnM.classList.remove('show');
    }, 3000);
  }
}

/* v3.00 — persentase tontonan yang benar-benar terjadi.
   Sebelumnya videoCompleted() selalu mengirim angka 100, sehingga penjaga
   min_watch_pct di Courses_v1.3.gs baris 312 tidak pernah menggigit —
   siapa pun bisa klik Complete di detik ke-0 dan diterima server.
   Untuk modul non-YouTube (GDrive) perilaku lama dipertahankan. */
function _videoCompletionPct() {
  var mod = window._currentModule || {};
  if (String(mod.source_type || '').toUpperCase() !== 'YOUTUBE') return 100;
  var pct = parseInt(_videoWatchPct) || 0;
  if (pct > 100) pct = 100;
  return pct;
}

function videoCompleted() {
  document.removeEventListener('visibilitychange', _onVideoTabSwitch);
  if (_videoWatchInterval) { clearInterval(_videoWatchInterval); _videoWatchInterval = null; }
  /* v2.97 — PAUSE, bukan destroy.
     Sebelumnya di sini _plyrDestroy(), padahal penggantinya baru dirender
     setelah server menjawab (1-2 detik) — akibatnya area video kosong dan
     layout ambles selama menunggu. Pembuangan instance tetap terjadi di
     jalur navigasi: loadVideo() untuk modul VIDEO, goTo() -> _stopVideoCleanup()
     untuk PDF/QUIZ. Jadi tidak ada player yang nyangkut. */
  if (_plyrPlayer) { try { _plyrPlayer.pause(); } catch(e) {} }
  var sid = sessionStorage.getItem('lms_session_id');
  var mod = window._currentModule;
  var userId = _lmsUser ? _lmsUser.user_id : '';
  if (!sid || !mod || !userId) return;
  showLoading('Marking complete...', true);
  google.script.run
    .withSuccessHandler(function(r) {
      hideLoading();
      if (!r.success) { showToast(r.message || 'Error.'); return; }
      showToast('Module completed! 🎉');
      // Tandai module ini completed di _currentModules
      var mods = window._currentModules || [];
      var curIdx = -1;
      for (var i = 0; i < mods.length; i++) {
        if (mods[i].module_id === mod.module_id) { mods[i].is_completed = true; curIdx = i; break; }
      }
      // Auto-pindah ke module berikutnya (VIDEO/PDF/QUIZ), tetap di halaman
      var nextIdx = curIdx + 1;
      if (nextIdx < mods.length) {
        var nextM = _normalizeModule(mods[nextIdx]);
        var nextType = (nextM.module_type || '').toUpperCase();
        if (nextType === 'VIDEO') {
          window._currentModule = nextM;
          loadVideo();          // tetap di halaman video — cukup re-render
        } else if (nextType === 'PDF') {
          window._currentModule = nextM;
          goTo('pdf');          // v2.94 FIX: lintas halaman — tukar container dulu
        } else if (nextType === 'QUIZ') {
          window._currentModule = nextM;
          goTo('quiz');
        } else {
          loadVideo();
        }
      } else {
        // Sudah module terakhir — re-render biar centang muncul
        loadVideo();
      }
    })
    .withFailureHandler(function(e) { hideLoading(); showToast('Error.'); console.error(e); })
    .markModuleComplete(sid, userId, mod.module_id, _videoCompletionPct());
  _cacheBatal('courses');   // v2.140 — progres berubah
}

/* ══════════════════════════════════════
   PDF VIEWER
══════════════════════════════════════ */

var _pdfCurrentPage = 1;
var _pdfTotalPages  = 1;

/* ══════════════════════════════════════
   PDF FLIPBOOK ENGINE — v2.96
   Alur: GAS baca Drive -> base64 -> PDF.js render canvas
         -> JPEG dataURL -> StPageFlip loadFromImages
   Kalau ada satu saja tahap gagal, otomatis jatuh ke
   iframe Drive (perilaku lama) supaya modul tetap terbaca.
══════════════════════════════════════ */

var PDF_MAX_PAGES     = 25;    // di atas ini pakai iframe — StPageFlip taruh semua halaman di DOM
var PDF_RENDER_W_DESK = 1000;  // lebar render per halaman (px) desktop
var PDF_RENDER_W_MOB  = 760;   // lebar render per halaman (px) mobile
var PDF_JPEG_QUALITY  = 0.88;

var _pdfFlip        = null;   // instance StPageFlip — hanya SATU
var _pdfDoc         = null;   // dokumen PDF.js
var _pdfIsMobile    = null;   // viewport instance aktif
var _pdfMaxPageSeen = 1;      // halaman terjauh yang sudah dibuka
var _pdfImages      = [];     // dataURL tiap halaman
var _pdfUsingIframe = false;  // sedang memakai fallback?
var _pdfFocusMode   = false;  // sedang mode layar lega?
var _pdfNativeFs    = false;  // layar lega dicapai lewat Fullscreen API?
var _pdfLoadToken   = 0;      // penanda anti balapan saat ganti modul cepat
var _pdfZoom        = 1;      // 1 = ukuran pas; maksimum 3

/* ═══ READ-ALOUD — v2.105 ═══
   Teks diambil sekalian saat halaman dirender, jadi tidak ada
   pembacaan PDF kedua kali. */
var _audSentences  = [];     // { text, page } — mode biasa (v2.109, satu bahasa)
var _audIdx        = -1;     // kalimat/section yang sedang dibaca
var _audMaxIdx     = 0;      // kalimat/section terjauh — penjaga anti-lompat
var _audPlaying    = false;
var _audPaused     = false;
var _audStopping   = false;  // menahan onend saat sengaja dihentikan
var _audVoices     = [];
var _audVoiceInit  = false;
var _audWakeLock   = null;
var _audWatch      = null;   // penjaga suara bisu
var AUD_SENT_MAX   = 180;    // utterance panjang sering terpotong di Chrome
var AUD_RATE       = 1;      // DIKUNCI — aturan LMS, tidak bisa dipercepat

/* ═══ SOP BILINGUAL — v2.110 ═══
   Rem darurat: set ke false untuk mematikan deteksi SOP dua-kolom
   sepenuhnya dan kembali ke perilaku v2.109 pada SEMUA PDF, tanpa
   perlu menyentuh logic di bawah. */
var AUD_SOP_DETECT   = true;

var _pdfPageItems    = [];   // v2.110 — {str,x,y} per item, per halaman (index 0 = hal.1)
var _audIsSop        = false;   // hasil 3 gerbang deteksi, halaman ini
var _audLang         = 'EN';    // bahasa aktif: 'EN' atau 'ID'
var _audSentEN       = [];      // { text, page } — mode SOP, kolom EN per-section
var _audSentID       = [];      // { text, page } — mode SOP, kolom ID per-section, index sejajar dgn _audSentEN
var _audSopHeader    = null;    // { title, dept } dibaca sekali sebelum section 1
var _audEnAvail      = true;    // device punya voice en-* ?
var _audIdAvail      = true;    // device punya voice id-ID ?
var _audHeaderRead   = false;   // header SOP sudah dibaca di sesi dengar modul ini?
var _pdfTwoUp       = false;  // desktop: dua halaman sejajar?
var _pdfZoomTimer   = null;
var _pdfResizeTimer = null;
var PDF_ZOOM_MAX    = 3;
var PDF_ZOOM_STEP   = 0.25;

function _pdfStageId(isMob) { return isMob ? 'm-pdf-stage' : 'd-pdf-stage'; }
function _pdfMountId(isMob) { return isMob ? 'm-pdf-mount' : 'd-pdf-mount'; }

/* ═══════════════════════════════════════════════════════════
   v2.103 — HOST TETAP + ANAK SEKALI PAKAI

   StPageFlip.destroy() berbunyi:  this.ui.destroy(); this.block.remove();
   'block' adalah elemen yang KITA berikan ke constructor, dan .remove()
   mengeluarkannya dari halaman.

   Selama ini tidak terasa karena loadPdf() menulis ulang seluruh HTML
   panggung tiap kali modul dibuka, jadi mount selalu lahir kembali.
   Tapi zoom membangun ulang buku TANPA menulis ulang HTML — begitu
   zoom masuk, mount lenyap dan panggung jadi kosong.

   Jalan keluarnya: host tidak pernah diserahkan ke StPageFlip.
   Tiap instance mendapat anak baru yang boleh dihapus.
   destroy() tetap dipanggil karena melepas 5 pendengar acara di
   tingkat window (mousemove, mouseup, resize, touchend, touchmove).
═══════════════════════════════════════════════════════════ */
function _pdfMountHost(isMob) {
  return document.getElementById(_pdfMountId(isMob));
}

function _pdfFreshMount(isMob) {
  var host = _pdfMountHost(isMob);
  if (!host) return null;
  host.innerHTML = '';
  var el = document.createElement('div');
  host.appendChild(el);
  return el;
}

/* ── Bersihkan semua sumber daya flipbook ── */
function _pdfDestroy() {
  if (_pdfFlip) {
    try { _pdfFlip.destroy(); } catch (e) {}
    _pdfFlip = null;
  }
  if (_pdfDoc) {
    try { _pdfDoc.destroy(); } catch (e) {}
    _pdfDoc = null;
  }
  _pdfImages   = [];
  _pdfIsMobile = null;
  _pdfZoom     = 1;      /* dokumen berikutnya mulai dari ukuran pas */
  _pdfExitFocus(true);
}

/* ── Indikator loading bertahap ── */
function _pdfSetLoading(isMob, text, pct) {
  var box = document.getElementById((isMob ? 'm' : 'd') + '-pdf-loading');
  if (!box) return;
  box.style.display = 'flex';
  var t = document.getElementById((isMob ? 'm' : 'd') + '-pdf-loading-txt');
  var f = document.getElementById((isMob ? 'm' : 'd') + '-pdf-loading-fill');
  if (t) t.textContent = text;
  if (f) f.style.width = Math.max(0, Math.min(100, pct)) + '%';
}
function _pdfHideLoading(isMob) {
  var box = document.getElementById((isMob ? 'm' : 'd') + '-pdf-loading');
  if (box) box.style.display = 'none';
}

/* ── Fallback: kembali ke iframe Drive seperti versi lama ── */
function _pdfFallbackToIframe(isMob, previewUrl, reason) {
  console.warn('PDF flipbook fallback → iframe. Alasan: ' + reason);
  _pdfUsingIframe = true;
  if (_pdfFlip) { try { _pdfFlip.destroy(); } catch (e) {} _pdfFlip = null; }

  var stage = document.getElementById(_pdfStageId(isMob));
  if (!stage) return;
  stage.style.padding    = '0';
  stage.style.minHeight  = '0';
  stage.style.background = '#F1F3F5';
  stage.innerHTML = '<iframe src="' + previewUrl + '" ' +
    'style="width:100%;height:' + (isMob ? '70vh' : '840px') + ';border:none;display:block" ' +
    'sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation"></iframe>';

  /* Iframe tidak bisa melaporkan posisi halaman, jadi syarat
     "selesai setelah halaman terakhir" tidak mungkin ditegakkan.
     Tombol Done dibuka supaya modul tidak jadi buntu. */
  _pdfShowDoneButtons();
}

/* ═══════════════════════════════════════════════════════════
   LAZY-LOAD PDF LIBRARIES — v2.107

   pdf.js + pdf.worker.js + StPageFlip ≈ 1,4 MB total, dan
   sebelumnya diunduh SETIAP kali LMS dibuka — termasuk oleh staff
   yang cuma menonton video atau mengikuti quiz. Sekarang baru
   diunduh saat modul PDF pertama dibuka.

   Konsekuensi yang disadari: pembukaan PDF PERTAMA di satu sesi
   terasa sedikit lebih lambat karena unduhan terjadi saat itu.
   Setelahnya, browser sudah menyimpannya, jadi modul PDF berikutnya
   tidak mengunduh ulang.

   _pdfLibPromise memastikan panggilan berulang (dua modul PDF
   dibuka cepat berurutan) tidak memicu unduhan dobel — permintaan
   kedua menunggu promise yang sama dengan yang pertama.
═══════════════════════════════════════════════════════════ */
var _pdfLibPromise = null;

function _pdfLoadScript_(src) {
  return new Promise(function(resolve, reject) {
    var el = document.createElement('script');
    el.src = src;
    el.onload  = function() { resolve(); };
    el.onerror = function() { reject(new Error('Failed to load: ' + src)); };
    document.head.appendChild(el);
  });
}

function _pdfLoadLibraries_() {
  if (typeof pdfjsLib !== 'undefined' && typeof St !== 'undefined' && St.PageFlip) {
    return Promise.resolve();   // sudah termuat dari pembukaan PDF sebelumnya
  }
  if (_pdfLibPromise) return _pdfLibPromise;   // sedang dimuat, jangan dobel

  _pdfLibPromise = Promise.all([
    _pdfLoadScript_('/vendor/pdfjs/pdf.min.js'),
    _pdfLoadScript_('/vendor/page-flip/page-flip.browser.js')
  ]).catch(function(err) {
    _pdfLibPromise = null;   // biarkan percobaan berikutnya mencoba lagi, jangan terkubur permanen
    throw err;
  });
  return _pdfLibPromise;
}

/* ── Titik masuk: muat dokumen dari GAS ── */
function _pdfStartFlipbook(mod, isMob, previewUrl) {
  var token = ++_pdfLoadToken;
  _pdfUsingIframe = false;
  _pdfIsMobile    = isMob;

  /* v2.107 — library dimuat lazy. Loading ditampilkan SEBELUM
     unduhan mulai, supaya staff yang membuka PDF pertama kalinya
     tidak melihat panggung kosong tanpa penjelasan. */
  _pdfSetLoading(isMob, 'Preparing reader…', 3);

  _pdfLoadLibraries_().then(function() {
    if (token !== _pdfLoadToken) return;   // modul sudah diganti selagi menunggu

    if (typeof pdfjsLib === 'undefined' || typeof St === 'undefined' || !St.PageFlip) {
      _pdfFallbackToIframe(isMob, previewUrl, 'library PDF.js / StPageFlip tidak termuat');
      return;
    }
    try {
      pdfjsLib.GlobalWorkerOptions.workerSrc =
        '/vendor/pdfjs/pdf.worker.min.js';
    } catch (e) {}

    _pdfContinueStart_(mod, isMob, previewUrl, token);
  }).catch(function(err) {
    console.error(err);
    if (token !== _pdfLoadToken) return;
    _pdfFallbackToIframe(isMob, previewUrl, 'failed to load PDF library — check your internet connection');
  });
}

/* Badan asli _pdfStartFlipbook, dijalankan setelah library terjamin ada. */
function _pdfContinueStart_(mod, isMob, previewUrl, token) {
  _pdfSetLoading(isMob, 'Downloading document…', 8);

  var sid = sessionStorage.getItem('lms_session_id');
  google.script.run
    .withSuccessHandler(function(r) {
      if (token !== _pdfLoadToken) return;                     // modul sudah berganti
      if (!r || !r.success) {
        _pdfFallbackToIframe(isMob, previewUrl, (r && r.code) || 'GAS request failed');
        return;
      }
      _pdfSetLoading(isMob, 'Opening document…', 28);
      _pdfParseAndRender(r.data.base64, isMob, previewUrl, token);
    })
    .withFailureHandler(function(e) {
      if (token !== _pdfLoadToken) return;
      console.error(e);
      _pdfFallbackToIframe(isMob, previewUrl, 'connection to GAS failed');
    })
    .getPdfBase64(sid, mod.module_id);
}

/* ── base64 -> PDF.js -> gambar tiap halaman ── */
function _pdfParseAndRender(b64, isMob, previewUrl, token) {
  var bytes;
  try {
    var bin = atob(b64);
    bytes = new Uint8Array(bin.length);
    for (var i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
  } catch (e) {
    _pdfFallbackToIframe(isMob, previewUrl, 'base64 rusak');
    return;
  }

  pdfjsLib.getDocument({ data: bytes }).promise.then(function(doc) {
    if (token !== _pdfLoadToken) { try { doc.destroy(); } catch (e) {} return; }

    _pdfDoc        = doc;
    _pdfTotalPages = doc.numPages;

    if (_pdfTotalPages > PDF_MAX_PAGES) {
      _pdfFallbackToIframe(isMob, previewUrl,
        'jumlah halaman ' + _pdfTotalPages + ' melebihi batas ' + PDF_MAX_PAGES);
      return;
    }

    _pdfImages = [];
    _pdfRenderPage(1, isMob, previewUrl, token);
  }).catch(function(err) {
    console.error(err);
    _pdfFallbackToIframe(isMob, previewUrl, 'PDF.js failed to open document');
  });
}

/* ── Render halaman satu per satu (berurutan, hemat memori) ── */
function _pdfRenderPage(pageNum, isMob, previewUrl, token) {
  if (token !== _pdfLoadToken) return;

  if (pageNum > _pdfTotalPages) {
    _pdfSetLoading(isMob, 'Preparing book…', 96);
    _pdfBuildBook(isMob, previewUrl, token);
    return;
  }

  var pctBase = 30 + Math.round((pageNum - 1) / _pdfTotalPages * 62);
  _pdfSetLoading(isMob, 'Rendering page ' + pageNum + ' of ' + _pdfTotalPages + '…', pctBase);

  _pdfDoc.getPage(pageNum).then(function(page) {
    if (token !== _pdfLoadToken) return;

    var targetW  = isMob ? PDF_RENDER_W_MOB : PDF_RENDER_W_DESK;
    var base     = page.getViewport({ scale: 1 });
    var scale    = targetW / base.width;
    var viewport = page.getViewport({ scale: scale });

    var canvas = document.createElement('canvas');
    canvas.width  = Math.floor(viewport.width);
    canvas.height = Math.floor(viewport.height);
    var ctx = canvas.getContext('2d');

    /* Latar putih — PDF transparan kalau tidak diisi, hasil JPEG jadi hitam */
    ctx.fillStyle = '#FFFFFF';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    return page.render({ canvasContext: ctx, viewport: viewport }).promise.then(function() {
      if (token !== _pdfLoadToken) return;
      _pdfImages.push(canvas.toDataURL('image/jpeg', PDF_JPEG_QUALITY));
      canvas.width = 0; canvas.height = 0;   // lepas memori canvas

      /* v2.105 — teks diambil di sini, sementara halamannya masih terbuka.
         Membaca ulang dokumen nanti hanya membuang waktu dan memori.
         v2.110 — simpan juga koordinat (x,y) tiap item, bukan cuma
         teksnya. Deteksi kolom SOP butuh koordinat; kalau langsung
         di-join jadi string di sini, informasi posisinya hilang
         duluan sebelum sempat dianalisis. */
      return page.getTextContent();
    }).then(function(tc) {
      if (token !== _pdfLoadToken) return;
      var items = [];
      if (tc && tc.items) {
        items = tc.items.map(function(it) {
          return {
            str: it.str,
            x  : it.transform ? it.transform[4] : 0,
            y  : it.transform ? it.transform[5] : 0
          };
        });
        var raw = items.map(function(it) { return it.str; }).join(' ');
        _audSplitSentences(raw).forEach(function(sen) {
          _audSentences.push({ text: sen, page: pageNum });
        });
      }
      _pdfPageItems[pageNum] = items;
      _pdfRenderPage(pageNum + 1, isMob, previewUrl, token);
    });
  }).catch(function(err) {
    console.error(err);
    _pdfFallbackToIframe(isMob, previewUrl, 'failed to render page ' + pageNum);
  });
}

/* ── Bangun StPageFlip ── */
/* Berapa halaman sejajar. HP selalu satu. */
/* ═══════════════════════════════════════════════════════════
   READ-ALOUD — v2.105

   Membacakan teks SOP dengan suara bawaan perangkat (Web Speech).
   Tidak ada terjemahan: teks dibaca apa adanya.

   Aturan LMS yang membedakannya dari mockup:
     · kecepatan DIKUNCI 1,00x — tidak bisa dipercepat
     · tidak bisa melompat ke kalimat yang belum pernah dilewati
     · berhenti sendiri saat pindah tab atau layar terkunci
     · Wake Lock menahan layar selama membaca

   Penyelesaian modul TIDAK diubah — tetap dari halaman yang dibuka.
   Audio ikut membalik halaman, jadi yang mendengarkan sampai habis
   tetap sampai ke ujung dengan sendirinya.
═══════════════════════════════════════════════════════════ */

function _audResetAll() {
  _audStopSpeak(true);
  _audSentences = [];
  _audIdx       = -1;
  _audMaxIdx    = 0;
  /* v2.110 */
  _pdfPageItems = [];
  _audIsSop     = false;
  _audLang      = 'EN';
  _audSentEN    = [];
  _audSentID    = [];
  _audSopHeader = null;
  _audHeaderRead = false;
}

/* ═══════════════════════════════════════════════════════════
   SOP BILINGUAL — v2.110

   PDF SOP Miss Fish memakai template seragam: dua kolom sejajar,
   EN di kiri dan ID di kanan, dengan penomoran section yang sama
   (1., 2., 3.1, dst) di kedua sisi. PDF lain (materi training,
   dsb) TIDAK memakai format ini.

   Supaya PDF lama/lain tidak pernah ikut terseret logic dua-kolom,
   deteksi harus lolos SEMUA dari 3 gerbang berikut. Ragu di gerbang
   mana pun -> _audIsSop tetap false -> jalur v2.109 (satu bahasa,
   _audSentences) dipakai apa adanya, tidak ada yang berubah.

   Gerbang 1 — pola header SOP di halaman 1
   Gerbang 2 — ada celah kolom yang konsisten di halaman isi
   Gerbang 3 — penomoran section cocok kiri/kanan DAN kedua sisi
               terbukti berbahasa berbeda (uji kata penanda)
═══════════════════════════════════════════════════════════ */

var AUD_EN_MARKERS = ['the','of','and','shall','must','department','review','policy','procedure','shall'];
var AUD_ID_MARKERS = ['yang','dan','untuk','wajib','departemen','ditinjau','kebijakan','prosedur','harus'];

function _audMarkerScore(text, markers) {
  var t = String(text || '').toLowerCase();
  var n = 0;
  for (var i = 0; i < markers.length; i++) {
    var re = new RegExp('\\b' + markers[i] + '\\b', 'g');
    var m  = t.match(re);
    if (m) n += m.length;
  }
  return n;
}

/* Gerbang 1 — cari blok header SOP di halaman 1. Return {title, dept}
   kalau ketemu, null kalau tidak. Dipakai juga untuk tahu di mana
   section pertama mulai (supaya header block dilewati saat baca). */
function _audFindSopHeader(page1Items) {
  if (!page1Items || !page1Items.length) return null;
  var text = page1Items.map(function(it){ return it.str; }).join(' ');
  var hasTitleWord = /STANDARD\s+OPERATING\s+PROCEDURES/i.test(text);
  if (!hasTitleWord) return null;

  var markers = ['POLICY NO', 'EFFECTIVE DATE', 'REVISION NO', 'LAST REVISION DATE'];
  var hits = 0;
  for (var i = 0; i < markers.length; i++) {
    if (text.toUpperCase().indexOf(markers[i]) > -1) hits++;
  }
  if (hits < 2) return null;

  /* TITLE dan DEPARTMENT dibaca dari isi tabel — value-nya diambil
     apa adanya, tidak diterjemahkan (nama SOP & nama departemen
     memang sama di kedua bahasa). */
  var titleM = text.match(/TITLE\s+([A-Z0-9 ,.\-\/]+?)(?=\s+DEPARTMENT|\s+POLICY NO)/i);
  var deptM  = text.match(/DEPARTMENT\s+([A-Z0-9 ,.\-\/]+?)(?=\s+POLICY NO|\s+EFFECTIVE DATE)/i);

  return {
    title: titleM ? titleM[1].trim() : '',
    dept : deptM  ? deptM[1].trim()  : ''
  };
}

/* Gerbang 2 — cari celah kolom di satu halaman isi. Return posisi x
   celah (tengah dokumen area) kalau ketemu, atau -1 kalau tidak.

   Diuji terhadap PDF SOP asli (pdfplumber, item per-kata): celah
   antar-kolom sesungguhnya berkisar 21-25pt sementara celah biasa
   antar-kata dalam satu kolom mediannya di bawah 0.5pt — bedanya
   puluhan kali lipat. Karena itu ambang dipakai RELATIF terhadap
   celah median di halaman itu sendiri, bukan persentase lebar
   dokumen (persentase lebar terbukti meleset -- lihat catatan
   pengujian v2.110). */
function _audFindColumnGap(items) {
  if (!items || items.length < 20) return -1;   // terlalu sedikit teks, jangan dipaksa
  var xs = items.map(function(it){ return it.x; }).sort(function(a,b){ return a-b; });
  var minX = xs[0], maxX = xs[xs.length - 1];
  var width = maxX - minX;
  if (width < 200) return -1;                    // dokumen terlalu sempit, tidak masuk akal 2 kolom

  var gaps = [];
  for (var i = 1; i < xs.length; i++) gaps.push(xs[i] - xs[i - 1]);
  var sortedGaps = gaps.slice().sort(function(a,b){ return a-b; });
  var medianGap  = sortedGaps[Math.floor(sortedGaps.length / 2)] || 0.1;

  /* Cari celah terbesar di antara 25%-75% lebar area teks —
     kalau dua kolom memang ada, celahnya harus ada di tengah,
     bukan di pinggir (pinggir cuma margin biasa). */
  var loBound = minX + width * 0.25;
  var hiBound = minX + width * 0.75;
  var bestGap = 0, bestPos = -1;
  for (i = 1; i < xs.length; i++) {
    if (xs[i] < loBound || xs[i] > hiBound) continue;
    var gap = xs[i] - xs[i - 1];
    if (gap > bestGap) { bestGap = gap; bestPos = (xs[i] + xs[i-1]) / 2; }
  }
  if (bestPos === -1) return -1;
  if (bestGap < Math.max(medianGap * 15, 8)) return -1;   // harus jauh lebih besar dari celah antar-kata biasa

  /* Kedua sisi harus sama-sama berisi teks banyak — bukan satu
     kolom penuh + satu angka halaman nyasar di pinggir. */
  var leftCount = 0, rightCount = 0;
  for (i = 0; i < items.length; i++) {
    if (items[i].x < bestPos) leftCount++; else rightCount++;
  }
  var minSide = Math.min(leftCount, rightCount);
  if (minSide < items.length * 0.25) return -1;

  return bestPos;
}

/* Gerbang 3 — kolom kanan benar terjemahan kolom kiri?
   Uji dua hal: penomoran section cocok, dan bahasa terbukti beda. */
function _audVerifyBilingual(leftText, rightText) {
  var secPat = /\b\d\.\d?\b/g;
  var leftSecs  = (leftText.match(secPat)  || []).slice(0, 12).join(',');
  var rightSecs = (rightText.match(secPat) || []).slice(0, 12).join(',');
  if (!leftSecs || leftSecs !== rightSecs) return false;   // penomoran harus cocok persis

  var lEn = _audMarkerScore(leftText,  AUD_EN_MARKERS);
  var lId = _audMarkerScore(leftText,  AUD_ID_MARKERS);
  var rEn = _audMarkerScore(rightText, AUD_EN_MARKERS);
  var rId = _audMarkerScore(rightText, AUD_ID_MARKERS);

  /* Kiri harus dominan EN, kanan harus dominan ID (atau sebaliknya) —
     dan harus ada kontras yang jelas, bukan cuma sedikit beda. */
  var leftIsEn  = lEn > lId * 2 && lEn >= 5;
  var rightIsId = rId > rEn * 2 && rId >= 5;
  var leftIsId  = lId > lEn * 2 && lId >= 5;
  var rightIsEn = rEn > rId * 2 && rEn >= 5;

  return (leftIsEn && rightIsId) || (leftIsId && rightIsEn);
}

/* Pecah satu halaman jadi { left:[items], right:[items] } berdasar
   posisi x relatif terhadap celah kolom yang ditemukan. */
function _audSplitByGap(items, gapX) {
  var left = [], right = [];
  for (var i = 0; i < items.length; i++) {
    (items[i].x < gapX ? left : right).push(items[i]);
  }
  return { left: left, right: right };
}

/* Urutkan item dalam satu kolom menurut posisi baca alami:
   atas ke bawah (y turun di koordinat PDF), lalu kiri ke kanan. */
function _audSortReadingOrder(items) {
  return items.slice().sort(function(a, b) {
    if (Math.abs(a.y - b.y) > 3) return b.y - a.y;   // y besar = lebih atas di PDF
    return a.x - b.x;
  });
}

/* Pecah teks satu kolom jadi section berdasar pola "4." / "4.1" di
   awal HEADING section. Section adalah unit tracking terkecil —
   BUKAN per-kalimat kecil seperti mode biasa.

   Diuji terhadap PDF SOP asli: heading section SELALU FULL CAPS
   ("4. POLICY", "4.1 IDENTIFICATION OF POSITION NEEDS"). Numbered
   list item DI DALAM section ("4. Working conditions.", "1. Main
   duties and responsibilities.") berpola sama (angka-titik-huruf
   besar) tapi Title Case biasa, BUKAN full caps — kalau tidak
   dibedakan, list item ikut terhitung sebagai section baru dan
   jumlah section EN/ID jadi tidak sejajar. Syarat full-caps minimal
   3 huruf inilah yang membedakan keduanya. */
function _audSplitIntoSections(text) {
  var t = String(text || '').replace(/\s+/g, ' ').trim();
  var secPat = /(\d\.\d?\s+[A-Z][A-Z \/]{2,})/g;
  var parts = t.split(secPat);
  var out = [];
  var current = '';
  for (var i = 0; i < parts.length; i++) {
    var p = parts[i];
    if (!p) continue;
    if (/^\d\.\d?\s+[A-Z][A-Z \/]{2,}$/.test(p)) {
      if (current.trim()) out.push(current.trim());
      current = p;
    } else {
      current += ' ' + p;
    }
  }
  if (current.trim()) out.push(current.trim());
  if (!out.length && t) out.push(t);   // tidak ada section sama sekali -> satu blok saja

  /* Koreksi: singkatan full-caps pendek yang jadi angka penomoran
     list terakhir dalam satu list (contoh nomor urut "8. KPI" pada
     list 1-8) kadang ikut lolos syarat full-caps karena singkatan
     itu sendiri sudah 3+ huruf kapital. Section asli SELALU disusul
     isi (bullet/paragraf) yang panjang; section "nyasar" seperti
     ini pendek dan berdiri sendiri tanpa isi apa-apa sesudahnya —
     digabung balik ke section sebelumnya supaya tidak dianggap
     section terpisah. */
  var merged = [];
  for (var j = 0; j < out.length; j++) {
    if (j > 0 && out[j].length < 20 && merged.length) {
      merged[merged.length - 1] += ' ' + out[j];
    } else {
      merged.push(out[j]);
    }
  }
  return merged;
}

/* Dipanggil sekali setelah semua halaman selesai dirender.
   Menjalankan 3 gerbang; kalau lolos semua, isi _audSentEN /
   _audSentID / _audSopHeader. Kalau gagal di mana pun, biarkan
   _audIsSop = false — jalur v2.109 tetap jalan tanpa perubahan. */
function _audDetectSop() {
  _audIsSop     = false;
  _audSentEN    = [];
  _audSentID    = [];
  _audSopHeader = null;

  if (!AUD_SOP_DETECT) return;   // rem darurat
  if (!_pdfPageItems || !_pdfPageItems.length) return;

  // Gerbang 1
  var header = _audFindSopHeader(_pdfPageItems[1]);
  if (!header) return;

  // Gerbang 2 + 3 — cek di halaman ISI (bukan halaman 1), pakai
  // halaman pertama yang punya cukup teks sebagai acuan celah.
  var gapX = -1, refPage = -1;
  for (var p = 2; p <= _pdfTotalPages; p++) {
    var items = _pdfPageItems[p];
    if (!items || items.length < 20) continue;
    var g = _audFindColumnGap(items);
    if (g > -1) { gapX = g; refPage = p; break; }
  }
  if (gapX === -1) return;

  var split = _audSplitByGap(_pdfPageItems[refPage], gapX);
  var leftOrdered  = _audSortReadingOrder(split.left);
  var rightOrdered = _audSortReadingOrder(split.right);
  var leftText  = leftOrdered.map(function(it){ return it.str; }).join(' ');
  var rightText = rightOrdered.map(function(it){ return it.str; }).join(' ');

  if (!_audVerifyBilingual(leftText, rightText)) return;

  // Lolos 3 gerbang. Bangun section EN/ID untuk SEMUA halaman isi
  // (halaman 1 dilewati — sudah tercakup di _audSopHeader).
  var enSecs = [], idSecs = [];
  for (p = 2; p <= _pdfTotalPages; p++) {
    items = _pdfPageItems[p];
    if (!items || !items.length) continue;
    var sp = _audSplitByGap(items, gapX);
    var lt = _audSortReadingOrder(sp.left).map(function(it){ return it.str; }).join(' ');
    var rt = _audSortReadingOrder(sp.right).map(function(it){ return it.str; }).join(' ');
    _audSplitIntoSections(lt).forEach(function(s) { enSecs.push({ text: s, page: p }); });
    _audSplitIntoSections(rt).forEach(function(s) { idSecs.push({ text: s, page: p }); });
  }

  /* Section EN dan ID harus jumlahnya sama supaya index sejajar —
     ini yang membuat "ganti bahasa, lanjut dari section yang sama"
     bisa dilakukan cukup dengan _audIdx yang sama di kedua array.
     Kalau jumlahnya beda, deteksi dianggap gagal — lebih aman
     mundur ke mode biasa daripada memaksa section yang tidak
     benar-benar sejajar. */
  if (!enSecs.length || enSecs.length !== idSecs.length) return;

  _audSopHeader = header;
  _audSentEN    = enSecs;
  _audSentID    = idSecs;
  _audIsSop     = true;
}

/* Pemecah kalimat tanpa lookbehind — Safari lama tidak mendukungnya.
   Kalimat yang terlalu panjang dipotong, karena utterance panjang
   sering terputus di tengah pada Chrome. */
function _audSplitSentences(text) {
  var t = String(text || '').replace(/\s+/g, ' ').trim();
  var out = [], buf = '';
  function push(str) {
    str = str.trim();
    if (str.length < 2) return;
    while (str.length > AUD_SENT_MAX) {
      var cut = str.lastIndexOf(' ', AUD_SENT_MAX);
      if (cut < 60) cut = AUD_SENT_MAX;
      out.push(str.slice(0, cut).trim());
      str = str.slice(cut).trim();
    }
    if (str.length > 1) out.push(str);
  }
  for (var i = 0; i < t.length; i++) {
    buf += t.charAt(i);
    if ('.!?'.indexOf(t.charAt(i)) > -1 && (i + 1 >= t.length || t.charAt(i + 1) === ' ')) {
      push(buf); buf = '';
    }
  }
  push(buf);
  return out;
}

/* ── Pemilihan suara ──
   Daftar suara TIDAK boleh diambil urutan pertama: Android mengurutkan
   menurut kode bahasa, sehingga yang teratas sering 'as_IN' (Assamese)
   yang terdaftar tapi datanya tidak terpasang — hasilnya bisu tanpa
   pesan galat. Karena itu dipilih lewat skor. */
function _audNormLang(v) {
  return String((v && v.lang) || '').toLowerCase().replace(/_/g, '-');
}

function _audVoiceScore(v) {
  var sc = 0, lang = _audNormLang(v);
  if (v.localService) sc += 50;   // terpasang di perangkat, jalan tanpa internet
  if (v['default'])   sc += 30;   // sudah divalidasi sistem
  var nav = String(navigator.language || '').toLowerCase().replace(/_/g, '-');
  if (nav && lang === nav) sc += 20;
  if (lang.indexOf('en-au') === 0) sc += 12;
  if (lang.indexOf('en-us') === 0) sc += 8;
  if (lang.indexOf('en-gb') === 0) sc += 6;
  return sc;
}

function _audBestVoice(list) {
  var best = null, bs = -1;
  for (var i = 0; i < list.length; i++) {
    var sc = _audVoiceScore(list[i]);
    if (sc > bs) { bs = sc; best = list[i]; }
  }
  return best;
}

function _audLoadVoices() {
  _audVoices = window.speechSynthesis ? (speechSynthesis.getVoices() || []) : [];
  if (!_audVoices.length) return;
  _audRefreshVoiceAvail();   // v2.110 — perbarui status EN/ID tiap kali daftar suara berubah
  if (!_audVoiceInit) { _audVoiceInit = true; _audFillVoiceSelect(true); }
  else                { _audFillVoiceSelect(false); }
  if (_audIsSop) _audUpdateLangToggle();   // v2.110
}

function _audEnglish() {
  return _audVoices.filter(function(v) { return _audNormLang(v).indexOf('en') === 0; });
}

/* v2.110 — sejajar dengan _audEnglish(), untuk voice-matrix SOP bilingual. */
function _audIndonesian() {
  return _audVoices.filter(function(v) { return _audNormLang(v).indexOf('id') === 0; });
}

/* ═══ VOICE-MATRIX SOP — v2.110 ═══
   Ganti bahasa = ganti TEKS dan VOICE sekaligus, tidak pernah
   campur (baca teks ID dengan voice EN, atau sebaliknya).

   Aturan:
     ada id-ID & ada en-*  -> toggle bebas, staff pilih sendiri
     tidak ada id-ID       -> toggle ID mati, paksa EN (teks+voice)
     tidak ada en-*        -> toggle EN mati, paksa ID (teks+voice)
     tidak ada keduanya    -> paksa EN (fallback akhir)

   Dipanggil sekali setiap kali daftar voice termuat/berubah, supaya
   _audEnAvail / _audIdAvail selalu mencerminkan kondisi device saat
   itu — bukan ditebak sekali di awal. */
function _audRefreshVoiceAvail() {
  _audEnAvail = _audEnglish().length > 0;
  _audIdAvail = _audIndonesian().length > 0;

  if (!_audIsSop) return;   // toggle cuma relevan untuk mode SOP

  if (_audEnAvail && _audIdAvail) {
    // bebas — biarkan _audLang apa adanya (default EN dari awal modul dibuka)
  } else if (!_audIdAvail) {
    _audLang = 'EN';
  } else if (!_audEnAvail) {
    _audLang = 'ID';
  } else {
    _audLang = 'EN';   // tidak ada keduanya — fallback akhir
  }
}

/* Voice terbaik untuk bahasa aktif saat ini. */
function _audVoiceForLang(lang) {
  var pool = (lang === 'ID') ? _audIndonesian() : _audEnglish();
  if (!pool.length) pool = _audVoices;   // benar2 tidak ada apa-apa — jangan buntu
  return _audBestVoice(pool);
}

/* Array section aktif sesuai bahasa yang sedang dipilih. Di luar
   mode SOP, ini tidak dipakai — _audSentences (mode biasa) yang
   jalan seperti v2.109. */
function _audActiveSentences() {
  if (!_audIsSop) return _audSentences;
  return (_audLang === 'ID') ? _audSentID : _audSentEN;
}

/* forcePick = pilih ulang yang terbaik; selain itu pertahankan pilihan manual */
function _audFillVoiceSelect(forcePick) {
  var sel = document.getElementById(_pdfIsMobile ? 'm-aud-voice' : 'd-aud-voice');
  if (!sel) return;

  /* Bahasa Inggris didahulukan — SOP Miss Fish memang berbahasa Inggris.
     Kalau perangkat tidak punya English sama sekali, pakai semua yang ada
     supaya tidak buntu. */
  /* v2.106 — SELURUH suara ditampilkan, termasuk Bahasa Indonesia.
     Sebelumnya daftar disaring ke English saja, sehingga suara
     Indonesia tidak pernah muncul padahal terpasang di perangkat.
     English tetap yang TERPILIH otomatis lewat skor di bawah. */
  var list = _audVoices;
  if (!list.length) {
    sel.innerHTML = '<option value="">No speech voice on this device</option>';
    return;
  }

  var keep = sel.value;
  sel.innerHTML = list.map(function(v) {
    return '<option value="' + escHtml(v.name) + '">' + escHtml(v.name) + ' — ' + escHtml(v.lang) + '</option>';
  }).join('');

  var kept = false;
  if (!forcePick && keep) {
    for (var i = 0; i < list.length; i++) {
      if (list[i].name === keep) { sel.value = keep; kept = true; break; }
    }
  }
  if (!kept) {
    /* Pilihan otomatis diambil dari suara English dulu — SOP Miss Fish
       memang berbahasa Inggris. Kalau perangkat tidak punya English
       sama sekali, baru pilih terbaik dari seluruh daftar. */
    var pool = _audEnglish();
    if (!pool.length) pool = list;
    var b = _audBestVoice(pool);
    if (b) sel.value = b.name;
  }

  _audUpdateVoiceLabel();   // v2.109 — samakan label satu-baris dengan <select>
}

/* v2.109 — label ringkas yang tampil bawaan, menggantikan tampilan
   daftar 50 baris ala mockup. Isi <select> tetap sumber kebenaran —
   fungsi ini cuma menampilkan nama suara yang sedang terpilih. */
function _audUpdateVoiceLabel() {
  var p    = _pdfIsMobile ? 'm' : 'd';
  var sel  = document.getElementById(p + '-aud-voice');
  var name = document.getElementById(p + '-aud-voicename');
  if (!name) return;
  if (!sel || !sel.value) { name.textContent = 'No voice available'; return; }
  var opt = sel.options[sel.selectedIndex];
  name.textContent = opt ? opt.textContent : sel.value;
}

/* Tombol Change — buka/tutup daftar penuh. Bawaannya tertutup. */
function audToggleVoicePicker() {
  var p   = _pdfIsMobile ? 'm' : 'd';
  var sel = document.getElementById(p + '-aud-voice');
  var btn = document.getElementById(p + '-aud-change-tgl');
  if (!sel) return;
  var opening = (sel.style.display === 'none');
  sel.style.display = opening ? '' : 'none';
  if (btn) btn.textContent = opening ? 'Close' : 'Change';
}

/* Dipanggil saat staff memilih suara lain dari <select>.
   Menutup dropdown lagi supaya bilah kembali ringkas, dan
   memperbarui label satu-baris. */
function audOnVoicePicked() {
  _audUpdateVoiceLabel();
  audToggleVoicePicker();   // tutup lagi setelah dipilih
  audTestVoice();           // beri kepastian langsung dengan bunyi contoh
}

function _audVoiceByName(n) {
  for (var i = 0; i < _audVoices.length; i++) if (_audVoices[i].name === n) return _audVoices[i];
  return null;
}

if (window.speechSynthesis) {
  try {
    speechSynthesis.onvoiceschanged = _audLoadVoices;
    setTimeout(_audLoadVoices, 400);
    setTimeout(_audLoadVoices, 1600);   // Android kadang lambat mengisi daftar
  } catch (e) {}
}

/* ── Wake Lock ──
   Menahan layar tetap menyala selama narasi. Ini MENYAMAKAN audio
   dengan video, yang memang menahan layar secara bawaan — bukan
   melonggarkan aturan. Kunci manual dan pindah tab tetap menjeda. */
function _audRequestWake() {
  try {
    if (navigator.wakeLock && navigator.wakeLock.request && !_audWakeLock) {
      navigator.wakeLock.request('screen').then(function(l) {
        _audWakeLock = l;
        l.addEventListener('release', function() { _audWakeLock = null; });
      }).catch(function() {});
    }
  } catch (e) {}
}
function _audReleaseWake() {
  try { if (_audWakeLock) { _audWakeLock.release(); _audWakeLock = null; } } catch (e) {}
}

/* Penjaga suara bisu — sebagian suara terdaftar di perangkat tetapi
   datanya tidak terpasang: speak() dipanggil, tidak ada bunyi, dan
   tidak ada galat sama sekali. Tanpa ini, kegagalannya sunyi. */
function _audClearWatch() { if (_audWatch) { clearTimeout(_audWatch); _audWatch = null; } }
function _audArmWatch(voiceName) {
  _audClearWatch();
  var fired = false;
  _audWatch = setTimeout(function() {
    if (!fired && _audPlaying && !_audPaused) {
      _audSetStatus('No sound from "' + voiceName + '" — try another voice.');
    }
  }, 3500);
  return function() { fired = true; _audClearWatch(); };
}

function _audSetStatus(msg) {
  ['d-aud-status', 'm-aud-status'].forEach(function(id) {
    var el = document.getElementById(id);
    if (el) el.textContent = msg;
  });
}

function _audUpdateUI() {
  var list = _audActiveSentences();   // v2.110 — mode SOP: array bahasa aktif; mode biasa: _audSentences
  var n = list.length;
  var at = Math.max(0, _audIdx);
  var pct = n ? Math.round((at / n) * 100) : 0;

  ['d-aud-fill', 'm-aud-fill'].forEach(function(id) {
    var el = document.getElementById(id);
    if (el) el.style.width = pct + '%';
  });
  ['d-aud-play', 'm-aud-play'].forEach(function(id) {
    var el = document.getElementById(id);
    if (el) el.innerHTML = (_audPlaying && !_audPaused) ? '&#10073;&#10073; Pause' : '&#9654; Play';
  });

  if (!n) { _audSetStatus('No readable text in this document.'); return; }
  _audSetStatus(_audPlaying
    ? ('Section ' + (at + 1) + ' of ' + n + '  ·  page ' + (list[at] ? list[at].page : 1))
    : (n + ' sections ready'));
}

/* Transkrip — dibangun sekali, saat panel pertama dibuka.
   v2.110 — mode SOP: EN dan ID ditampilkan BERDAMPINGAN sekaligus,
   tidak ikut toggle bahasa aktif (kesepakatan: staff bisa baca
   dua-duanya di transkrip walau audio cuma baca satu bahasa). */
function _audBuildTranscript() {
  var box = document.getElementById(_pdfIsMobile ? 'm-aud-script' : 'd-aud-script');
  if (!box || box.getAttribute('data-built') === '1') return;

  if (_audIsSop) {
    if (!_audSentEN.length) {
      box.innerHTML = '<div class="aud-empty">No selectable text — this PDF may be a scan.</div>';
      return;
    }
    var hs = '';
    for (var i = 0; i < _audSentEN.length; i++) {
      hs += '<div class="aud-sent aud-sent-bi" data-i="' + i + '" onclick="audJumpTo(' + i + ')">' +
              '<div class="aud-sent-col"><span class="aud-pg">p' + _audSentEN[i].page + '</span>' +
                '<span class="aud-lang-tag">EN</span>' + escHtml(_audSentEN[i].text) + '</div>' +
              '<div class="aud-sent-col"><span class="aud-lang-tag">ID</span>' +
                escHtml(_audSentID[i] ? _audSentID[i].text : '') + '</div>' +
            '</div>';
    }
    box.innerHTML = hs;
    box.setAttribute('data-built', '1');
    _audPaintLocks();
    return;
  }

  if (!_audSentences.length) {
    box.innerHTML = '<div class="aud-empty">No selectable text — this PDF may be a scan.</div>';
    return;
  }
  var h = '';
  for (var j = 0; j < _audSentences.length; j++) {
    h += '<div class="aud-sent" data-i="' + j + '" onclick="audJumpTo(' + j + ')">' +
           '<span class="aud-pg">p' + _audSentences[j].page + '</span>' +
           escHtml(_audSentences[j].text) +
         '</div>';
  }
  box.innerHTML = h;
  box.setAttribute('data-built', '1');
  _audPaintLocks();
}

/* Aturan LMS: mundur boleh, melompat ke depan tidak. */
function _audPaintLocks() {
  var els = document.querySelectorAll('.aud-sent');
  for (var i = 0; i < els.length; i++) {
    var idx = parseInt(els[i].getAttribute('data-i'), 10);
    els[i].classList.toggle('locked', idx > _audMaxIdx);
  }
}

function audJumpTo(i) {
  if (i > _audMaxIdx) {
    _audSetStatus('Jumping ahead is not allowed.');
    setTimeout(_audUpdateUI, 1800);
    return;
  }
  _audSpeakFrom(i);
}

function _audHighlight() {
  var els = document.querySelectorAll('.aud-sent.now');
  for (var i = 0; i < els.length; i++) els[i].classList.remove('now');
  var cur = document.querySelector('.aud-sent[data-i="' + _audIdx + '"]');
  if (cur) {
    cur.classList.add('now');
    try { cur.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); } catch (e) {}
  }

  /* Halaman ikut berbalik mengikuti narasi. Karena penyelesaian modul
     dihitung dari halaman terjauh yang dibuka, mendengarkan sampai
     habis otomatis membawa staff sampai ke ujung dokumen. */
  var list = _audActiveSentences();
  if (_pdfFlip && list[_audIdx]) {
    var want = list[_audIdx].page - 1;
    if (Math.abs(_pdfSafeIndex() - want) > 1) {
      try { _pdfFlip.turnToPage(want); _pdfOnFlip(want); } catch (e) {}
    }
  }
  _audPaintLocks();
  _audUpdateUI();
}

function _audSpeakFrom(i) {
  if (!window.speechSynthesis) { _audSetStatus('This browser has no speech support.'); return; }
  _audStopping = true;
  try { speechSynthesis.cancel(); } catch (e) {}
  _audStopping = false;

  _audIdx = i; _audPlaying = true; _audPaused = false;
  if (i > _audMaxIdx) _audMaxIdx = i;
  _audRequestWake();

  /* v2.110 — header SOP (STANDARD OPERATING PROCEDURES / TITLE /
     DEPARTMENT) dibaca SEKALI di awal sesi dengar, sebelum masuk
     ke section 1. Tidak ikut toggle bahasa — dibaca apa adanya
     dengan voice bahasa yang aktif saat itu (nama SOP & departemen
     sama di kedua bahasa, tidak perlu diterjemahkan). Tidak dibaca
     ulang kalau staff pause/resume atau mundur ke section 0 lagi
     dalam sesi yang sama. */
  if (_audIsSop && !_audHeaderRead && _audSopHeader && i === 0) {
    _audHeaderRead = true;
    var v = _audVoiceForLang(_audLang);
    var headerText = 'Standard Operating Procedures. ' +
      'Title: ' + _audSopHeader.title + '. ' +
      'Department: ' + _audSopHeader.dept + '.';
    var uh = new SpeechSynthesisUtterance(headerText);
    if (v) { uh.voice = v; uh.lang = v.lang; }
    uh.rate = AUD_RATE;
    var headerHeard = _audArmWatch(v ? v.name : 'this voice');
    uh.onstart = function() { headerHeard(); };
    uh.onend   = function() { headerHeard(); if (!_audStopping && _audPlaying) _audNext(); };
    uh.onerror = function() { headerHeard(); if (!_audStopping && _audPlaying) _audNext(); };
    try { speechSynthesis.speak(uh); return; }
    catch (e) { console.error(e); }   // gagal bicara header -> lanjut biasa ke section 1
  }

  _audNext();
}

function _audNext() {
  var list = _audActiveSentences();   // v2.110 — mode SOP: array bahasa aktif; mode biasa: _audSentences
  if (!_audPlaying || _audIdx < 0 || _audIdx >= list.length) { _audStopSpeak(); return; }

  var sen = list[_audIdx];
  var u   = new SpeechSynthesisUtterance(sen.text);
  var v;
  if (_audIsSop) {
    /* v2.110 — voice-matrix: teks dan voice HARUS bahasa yang sama.
       Tidak pernah pakai <select> manual di mode SOP — voice dipilih
       otomatis sesuai _audLang, supaya tidak mungkin campur
       (misal teks ID terbaca pakai voice EN). */
    v = _audVoiceForLang(_audLang);
  } else {
    var sel = document.getElementById(_pdfIsMobile ? 'm-aud-voice' : 'd-aud-voice');
    v = sel ? _audVoiceByName(sel.value) : null;
  }
  if (v) { u.voice = v; u.lang = v.lang; }
  u.rate = AUD_RATE;                    // dikunci 1,00x

  var heard = _audArmWatch(v ? v.name : 'this voice');
  var advance = function() {
    heard();
    if (_audStopping || !_audPlaying) return;
    _audIdx++;
    if (_audIdx > _audMaxIdx) _audMaxIdx = _audIdx;
    _audHighlight();
    _audNext();
  };
  u.onstart = function() { heard(); };
  u.onend   = advance;
  u.onerror = advance;

  _audHighlight();
  try { speechSynthesis.speak(u); }
  catch (e) { console.error(e); _audClearWatch(); _audStopSpeak(); }
}

function _audStopSpeak(silent) {
  _audStopping = true;
  _audClearWatch();
  try { if (window.speechSynthesis) speechSynthesis.cancel(); } catch (e) {}
  _audPlaying = false; _audPaused = false; _audStopping = false;
  _audReleaseWake();
  if (!silent) {
    var els = document.querySelectorAll('.aud-sent.now');
    for (var i = 0; i < els.length; i++) els[i].classList.remove('now');
    _audUpdateUI();
  }
}

/* ── Tombol ── */
function audPlayPause() {
  if (!_audActiveSentences().length) return;
  if (_audPlaying && !_audPaused) {
    try { speechSynthesis.pause(); } catch (e) {}
    _audPaused = true; _audReleaseWake(); _audUpdateUI(); return;
  }
  if (_audPlaying && _audPaused) {
    try { speechSynthesis.resume(); } catch (e) {}
    _audPaused = false; _audRequestWake(); _audUpdateUI(); return;
  }
  _audSpeakFrom(_audIdx >= 0 ? _audIdx : 0);
}

function audStop() { _audStopSpeak(); _audIdx = -1; _audUpdateUI(); }

/* ═══ TOGGLE BAHASA — v2.110 ═══
   Dipanggil saat staff menekan EN atau ID di audio bar. Karena
   _audSentEN dan _audSentID dijamin sejajar per-index oleh gerbang
   deteksi (lihat _audDetectSop), "lanjut dari section yang sama"
   cukup dilakukan dengan mempertahankan _audIdx apa adanya —
   tidak perlu pemetaan section tambahan. */
function audSwitchLang(lang) {
  if (!_audIsSop) return;
  if (lang === 'EN' && !_audEnAvail) return;   // toggle terkunci, device tidak punya voice-nya
  if (lang === 'ID' && !_audIdAvail) return;
  if (_audLang === lang) return;

  var wasPlaying = _audPlaying && !_audPaused;
  _audLang = lang;

  if (wasPlaying) {
    /* Pindah bahasa sambil jalan -> hentikan utterance lama (bahasa
       lama), lanjutkan dari section yang sama dengan bahasa baru.
       Tidak restart dari section 1. */
    _audSpeakFrom(Math.max(0, _audIdx));
  } else {
    _audHighlight();   // perbarui tampilan transkrip/status tanpa memutar
  }
  _audUpdateLangToggle();
  _audBuildTranscript();   // tidak menulis ulang isi (data-built sudah '1'); aman dipanggil lagi
}

/* Render ulang tampilan tombol toggle EN/ID sesuai ketersediaan
   voice di device dan bahasa yang sedang aktif. */
function _audUpdateLangToggle() {
  var p    = _pdfIsMobile ? 'm' : 'd';
  var wrap = document.getElementById(p + '-aud-langtoggle');
  if (!wrap) return;

  if (!_audIsSop) { wrap.style.display = 'none'; return; }
  wrap.style.display = '';

  var btnEn = document.getElementById(p + '-aud-lang-en');
  var btnId = document.getElementById(p + '-aud-lang-id');
  if (btnEn) {
    btnEn.classList.toggle('on', _audLang === 'EN');
    btnEn.disabled = !_audEnAvail;
    btnEn.title = _audEnAvail ? 'Read in English' : 'English voice not installed on this device';
  }
  if (btnId) {
    btnId.classList.toggle('on', _audLang === 'ID');
    btnId.disabled = !_audIdAvail;
    btnId.title = _audIdAvail ? 'Read in Indonesian' : 'Indonesian voice not installed on this device';
  }
}

function audTestVoice() {
  var sel = document.getElementById(_pdfIsMobile ? 'm-aud-voice' : 'd-aud-voice');
  var v   = sel ? _audVoiceByName(sel.value) : null;
  if (!v) { _audSetStatus('No voice selected.'); return; }
  if (_audPlaying) _audStopSpeak();
  try { speechSynthesis.cancel(); } catch (e) {}
  var u = new SpeechSynthesisUtterance('This is a sample voice for reading Miss Fish Bali procedures.');
  u.voice = v; u.lang = v.lang; u.rate = AUD_RATE;
  var ok = false;
  u.onstart = function() { ok = true; _audSetStatus('Playing sample — ' + v.name); };
  u.onend   = function() { setTimeout(_audUpdateUI, 500); };
  try { speechSynthesis.speak(u); } catch (e) {}
  setTimeout(function() {
    if (!ok) _audSetStatus('No sound from "' + v.name + '" — try another voice.');
  }, 3000);
}

/* Pindah tab atau layar terkunci -> jeda. Sama seperti video. */
document.addEventListener('visibilitychange', function() {
  if (document.hidden) {
    if (_audPlaying && !_audPaused) {
      try { speechSynthesis.pause(); } catch (e) {}
      _audPaused = true; _audUpdateUI();
    }
    _audReleaseWake();
  } else if (_audPlaying && !_audPaused) {
    _audRequestWake();
  }
});

window.addEventListener('beforeunload', function() {
  try { if (window.speechSynthesis) speechSynthesis.cancel(); } catch (e) {}
  _audReleaseWake();
});

/* Tombol Audio: memunculkan bilah pemutar. Ditekan lagi -> disembunyikan
   dan narasi dihentikan, supaya tidak ada suara yang berjalan tanpa
   kendali yang terlihat. */
function pdfToggleAudio() {
  var p   = _pdfIsMobile ? 'm' : 'd';
  var bar = document.getElementById(p + '-aud-bar');
  var btn = document.getElementById(p + '-pdf-audio');
  if (!bar) return;

  var opening = (bar.style.display === 'none');
  bar.style.display = opening ? '' : 'none';
  if (btn) btn.classList.toggle('on', opening);

  if (opening) {
    _audLoadVoices();
    _audUpdateUI();
  } else {
    _audStopSpeak();
  }
}

function audToggleScript() {
  var p   = _pdfIsMobile ? 'm' : 'd';
  var box = document.getElementById(p + '-aud-script');
  var btn = document.getElementById(p + '-aud-script-tgl');
  if (!box) return;
  var opening = (box.style.display === 'none');
  if (opening) _audBuildTranscript();
  box.style.display = opening ? '' : 'none';
  if (btn) {
    btn.innerHTML = opening ? '&#x2303; Text' : '&#x2304; Text';
    btn.title     = opening ? 'Hide the transcript' : 'Show the transcript';
  }
}

/* Tombol Audio hanya muncul kalau dokumennya memang punya teks.
   PDF hasil pindaian tidak punya teks sama sekali — lebih baik
   tombolnya tidak ada daripada ada tapi diam saat ditekan. */
function _audRevealButton() {
  var p   = _pdfIsMobile ? 'm' : 'd';
  var btn = document.getElementById(p + '-pdf-audio');
  if (btn) btn.style.display = _audSentences.length ? '' : 'none';
}

function _pdfCols(isMob) {
  if (isMob || _pdfTotalPages <= 1) return 1;
  return _pdfTwoUp ? 2 : 1;
}

/* Ukuran satu halaman, sudah dikalikan zoom.
   Zoom membesarkan ukuran FISIK halaman, bukan meregangkan gambar —
   dengan begitu teks digambar ulang pada resolusi penuh dan tetap tajam. */
function _pdfBookSize(isMob) {
  var stage  = document.getElementById(_pdfStageId(isMob));
  var avail  = (stage ? stage.clientWidth : 900) - 24;
  var availH = _pdfFocusMode ? (window.innerHeight - 110) : (isMob ? 460 : 720);

  var cols    = _pdfCols(isMob);
  var ratio   = 1.414;                      // A4 tinggi : lebar
  var perPage = avail / cols;
  var pageH   = perPage * ratio;
  if (pageH > availH) { pageH = availH; perPage = pageH / ratio; }

  perPage = Math.max(120, Math.floor(perPage * _pdfZoom));
  pageH   = Math.max(170, Math.floor(pageH   * _pdfZoom));
  return { per: perPage, h: pageH, cols: cols };
}

/* Membuat instance StPageFlip. Dipakai saat pertama kali maupun saat
   dibangun ulang karena zoom / ganti mode halaman / ubah ukuran. */
function _pdfMakeFlip(isMob, atIndex) {
  var el = _pdfFreshMount(isMob);
  if (!el) return false;

  var sz = _pdfBookSize(isMob);
  el.style.width  = (sz.per * sz.cols) + 'px';
  el.style.height = sz.h + 'px';

  /* Orientasi TIDAK diserahkan pada tebakan StPageFlip.
     Aturannya di pustaka:
        lebarElemen < 2*setting.width && usePortrait  ->  portrait
     Lebar elemen diukur tepat setelah disisipkan, sebelum browser
     menata letak, jadi hasilnya bisa berubah-ubah. Dengan
     usePortrait=false cabang portrait tidak pernah dijalankan. */
  try {
    _pdfFlip = new St.PageFlip(el, {
      width  : sz.per,
      height : sz.h,
      size   : 'fixed',
      showCover          : true,
      usePortrait        : (sz.cols === 1),
      /* v2.106 — WAJIB false. Bawaannya true, dan di dalam StPageFlip:
             i.autoSize && (t.style.width = "100%", ...)
         artinya lebar yang kita pasang DITIMPA 100%. Elemennya jadi
         selebar panggung, syarat portrait tidak pernah terpenuhi, dan
         tombol 1 page tidak pernah berpengaruh. */
      autoSize           : false,
      maxShadowOpacity   : 0.5,
      mobileScrollSupport: false,
      drawShadow         : true,
      flippingTime       : 700,
      useMouseEvents     : true,
      showPageCorners    : true
    });
    _pdfFlip.loadFromImages(_pdfImages);
  } catch (err) {
    console.error(err);
    return false;
  }

  _pdfFlip.on('flip', function(e) { _pdfOnFlip(e.data); });
  _pdfFlip.on('changeOrientation', function() { _pdfOnFlip(_pdfSafeIndex()); });

  if (atIndex > 0) { try { _pdfFlip.turnToPage(atIndex); } catch (e) {} }
  _pdfOnFlip(atIndex || 0);
  return true;
}

/* Bangun ulang sambil mempertahankan halaman yang sedang dibaca. */
function _pdfRebuild(isMob) {
  if (!_pdfFlip || !_pdfImages.length) return;
  var at = _pdfSafeIndex();
  if (_pdfFlip) { try { _pdfFlip.destroy(); } catch (e) {} _pdfFlip = null; }
  _pdfMakeFlip(isMob, at);
  _pdfUpdateToolbar(isMob);
}

function _pdfBuildBook(isMob, previewUrl, token) {
  if (token !== _pdfLoadToken) return;

  if (!_pdfMountHost(isMob) || _pdfImages.length === 0) {
    _pdfFallbackToIframe(isMob, previewUrl, 'mount atau hasil render kosong');
    return;
  }

  _pdfZoom = 1;                     // tiap dokumen baru mulai dari ukuran pas
  if (!_pdfMakeFlip(isMob, 0)) {
    _pdfFallbackToIframe(isMob, previewUrl, 'StPageFlip failed to initialize');
    return;
  }

  _pdfHideLoading(isMob);
  _pdfUpdateToolbar(isMob);
  _audDetectSop();          // v2.110 — jalan sekali, sebelum tombol Audio muncul
  _audRevealButton();
  _audLoadVoices();
}

/* ── Index halaman aktif, aman dari error ── */
function _pdfSafeIndex() {
  try { return _pdfFlip ? (_pdfFlip.getCurrentPageIndex() || 0) : 0; } catch (e) { return 0; }
}

/* ── Dipanggil tiap halaman berganti ── */
function _pdfOnFlip(idx) {
  if (!_pdfFlip) return;
  idx = idx || 0;

  var portrait = true;
  try { portrait = _pdfFlip.getOrientation() === 'portrait'; } catch (e) {}

  /* Halaman terakhir yang benar-benar terlihat.
     Sampul (index 0) selalu tampil sendirian karena showCover:true. */
  var lastVisible = (portrait || idx === 0) ? (idx + 1) : (idx + 2);
  if (lastVisible > _pdfTotalPages) lastVisible = _pdfTotalPages;

  _pdfCurrentPage = idx + 1;
  if (lastVisible > _pdfMaxPageSeen) _pdfMaxPageSeen = lastVisible;

  /* Indikator: "2-3 / 10" saat sepasang, "1 / 10" saat tunggal */
  var label = (lastVisible > _pdfCurrentPage)
    ? (_pdfCurrentPage + '-' + lastVisible + ' / ' + _pdfTotalPages)
    : (_pdfCurrentPage + ' / ' + _pdfTotalPages);

  ['d-pdf-page-ind', 'm-pdf-page-ind'].forEach(function(id) {
    var el = document.getElementById(id);
    if (el) el.textContent = label;
  });

  var pct = Math.round((_pdfMaxPageSeen / _pdfTotalPages) * 100);
  ['d-pdf-prog', 'm-pdf-prog'].forEach(function(id) {
    var el = document.getElementById(id);
    if (el) el.style.width = pct + '%';
  });

  var atStart = _pdfCurrentPage <= 1;
  var atEnd   = lastVisible >= _pdfTotalPages;
  /* v2.115 — tombol Last page (⏭) sebelumnya hanya disabled saat sudah
     berada di halaman terakhir (atEnd), sehingga dari halaman pertama pun
     bisa langsung diklik untuk melompat ke akhir dan membuka tombol Done —
     membypass seluruh isi audio book/SOP. Sekarang tetap disabled selama
     belum semua halaman pernah dilihat berurutan (_pdfMaxPageSeen belum
     mencapai _pdfTotalPages), terlepas dari posisi 'atEnd'. */
  var lastDisabled = (_pdfMaxPageSeen < _pdfTotalPages) || atEnd;
  [['d-pdf-first', atStart], ['d-pdf-prev', atStart],
   ['d-pdf-next', atEnd],    ['d-pdf-last', lastDisabled],
   ['m-pdf-first', atStart], ['m-pdf-prev', atStart],
   ['m-pdf-next', atEnd],    ['m-pdf-last', lastDisabled]].forEach(function(p) {
    var el = document.getElementById(p[0]);
    if (el) el.disabled = p[1];
  });

  if (_pdfMaxPageSeen >= _pdfTotalPages) _pdfShowDoneButtons();
}

/* ── Buka tombol Done (panel kanan, bar bawah, mobile, toolbar) ── */
function _pdfShowDoneButtons() {
  ['d-pdf-done', 'd-pdf-done2', 'm-pdf-done'].forEach(function(id) {
    var el = document.getElementById(id);
    if (el) { el.classList.add('show'); el.style.display = 'flex'; }
  });
  ['d-pdf-done-tool', 'm-pdf-done-tool'].forEach(function(id) {
    var el = document.getElementById(id);
    if (el) el.style.display = 'flex';
  });
}

/* ── Navigasi toolbar ── */
function pdfFlipPrev()  { if (_pdfFlip) { try { _pdfFlip.flipPrev(); } catch (e) {} } }
function pdfFlipNext()  { if (_pdfFlip) { try { _pdfFlip.flipNext(); } catch (e) {} } }
function pdfFlipFirst() { if (_pdfFlip) { try { _pdfFlip.turnToPage(0); _pdfOnFlip(0); } catch (e) {} } }
function pdfFlipLast()  {
  if (!_pdfFlip) return;
  /* v2.115 — penjaga kedua: mencegah bypass lewat console/devtools yang
     memanggil pdfFlipLast() langsung tanpa lewat atribut disabled di DOM. */
  if (_pdfMaxPageSeen < _pdfTotalPages) return;
  try {
    var last = _pdfTotalPages - 1;
    _pdfFlip.turnToPage(last);
    _pdfOnFlip(last);
  } catch (e) {}
}

/* ── Mode layar lega: coba Fullscreen API dulu, jatuh ke CSS kalau ditolak ── */
function pdfToggleFocus() {
  if (_pdfFocusMode) { _pdfExitFocus(false); return; }

  var stage = document.getElementById(_pdfStageId(_pdfIsMobile));
  if (!stage) return;

  var canNative = document.fullscreenEnabled &&
                  typeof stage.requestFullscreen === 'function';
  if (canNative) {
    var p;
    try { p = stage.requestFullscreen(); } catch (e) { p = null; }
    if (p && p.then) {
      p.then(function() {
        _pdfNativeFs  = true;
        _pdfFocusMode = true;
        _pdfResizeBook();
      }).catch(function() {
        _pdfEnterCssFocus(stage);   // sandbox menolak — pakai cadangan
      });
      return;
    }
  }
  _pdfEnterCssFocus(stage);
}

function _pdfEnterCssFocus(stage) {
  if (!stage) return;
  stage.classList.add('pdf-focus');
  _pdfNativeFs  = false;
  _pdfFocusMode = true;
  _pdfResizeBook();
}

function _pdfExitFocus(silent) {
  if (!_pdfFocusMode) return;
  var stage = document.getElementById(_pdfStageId(_pdfIsMobile));
  if (stage) stage.classList.remove('pdf-focus');
  if (_pdfNativeFs && document.fullscreenElement) {
    try { document.exitFullscreen(); } catch (e) {}
  }
  _pdfNativeFs  = false;
  _pdfFocusMode = false;
  if (!silent) _pdfResizeBook();
}

/* Sinkronkan state saat user keluar fullscreen lewat Esc atau tombol browser */
document.addEventListener('fullscreenchange', function() {
  if (!document.fullscreenElement && _pdfNativeFs) {
    _pdfNativeFs  = false;
    _pdfFocusMode = false;
    _pdfResizeBook();
  }
});
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape' && _pdfFocusMode && !_pdfNativeFs) _pdfExitFocus(false);
});

/* Hitung ulang ukuran buku setelah ukuran panggung berubah */
/* ── Ubah ukuran jendela: bangun ulang, bukan update().
      update() tidak mengubah lebar/tinggi pada size:'fixed', jadi
      bukunya harus dibuat ulang supaya ikut menyesuaikan. ── */
function _pdfResizeBook() {
  if (!_pdfFlip || _pdfUsingIframe) return;
  if (_pdfResizeTimer) clearTimeout(_pdfResizeTimer);
  _pdfResizeTimer = setTimeout(function() {
    _pdfRebuild(_pdfIsMobile);
  }, 240);
}

/* ═══════════════════════════════════════════════════════════
   ZOOM & MODE HALAMAN — v2.103
═══════════════════════════════════════════════════════════ */
function _pdfUpdateToolbar(isMob) {
  var p  = isMob ? 'm' : 'd';
  var g  = function(id) { return document.getElementById(p + id); };
  var zi = g('-pdf-zoom-ind');
  if (zi) zi.textContent = Math.round(_pdfZoom * 100) + '%';

  var bOut = g('-pdf-zoom-out'), bIn = g('-pdf-zoom-in'), bRst = g('-pdf-zoom-reset');
  if (bOut) bOut.disabled = (_pdfZoom <= 1.001) || !_pdfFlip;
  if (bIn)  bIn.disabled  = (_pdfZoom >= PDF_ZOOM_MAX - 0.001) || !_pdfFlip;
  if (bRst) bRst.disabled = (_pdfZoom <= 1.001) || !_pdfFlip;

  /* Tombol mode halaman hanya relevan di desktop dengan >1 halaman */
  var bMode = g('-pdf-mode');
  if (bMode) {
    var forced = isMob || _pdfTotalPages <= 1;
    bMode.textContent = (_pdfCols(isMob) === 2) ? '2 pages' : '1 page';
    bMode.disabled    = !_pdfFlip || forced;
    bMode.title       = forced
      ? (_pdfTotalPages <= 1 ? 'This document has a single page' : 'Phones always show one page')
      : (_pdfCols(isMob) === 2 ? 'Switch to one page' : 'Switch to a two-page spread');
  }
}

function _pdfSetZoom(z) {
  var nz = Math.min(PDF_ZOOM_MAX, Math.max(1, z));
  if (Math.abs(nz - _pdfZoom) < 0.005) return;
  _pdfZoom = nz;
  _pdfUpdateToolbar(_pdfIsMobile);
  if (_pdfZoomTimer) clearTimeout(_pdfZoomTimer);
  _pdfZoomTimer = setTimeout(function() {
    _pdfRebuild(_pdfIsMobile);        /* bangun ulang = tetap tajam */
  }, 150);
}

function pdfZoomIn()    { _pdfSetZoom(_pdfZoom + PDF_ZOOM_STEP); }
function pdfZoomOut()   { _pdfSetZoom(_pdfZoom - PDF_ZOOM_STEP); }
function pdfZoomReset() { _pdfSetZoom(1); }

function pdfTogglePageMode() {
  if (_pdfIsMobile || _pdfTotalPages <= 1) return;
  _pdfTwoUp = !_pdfTwoUp;
  _pdfRebuild(_pdfIsMobile);
}

function loadPdf() {
  var mod    = window._currentModule;
  var course = window._currentCourse;
  if (!mod || !course) { goTo('courses'); return; }

  /* v2.95 — guard: halaman PDF hanya untuk modul PDF.
     Ini yang dulu bikin quiz ter-render sebagai PDF → error Google Drive. */
  if ((mod.module_type || '').toUpperCase() !== 'PDF') { _routeModuleToPage(mod); return; }

  var t = function(id, v) { var el = document.getElementById(id); if (el) el.textContent = v; };
  t('d-pdf-title',       mod.title || 'PDF');
  t('d-pdf-course-name', course.title || 'Course');
  t('m-pdf-eyebrow', course.title || 'Course');
  t('m-pdf-title',   mod.title || 'PDF');

  /* v2.96 — reset state flipbook, buang instance lama */
  _pdfDestroy();
  _pdfCurrentPage = 1;
  _pdfTotalPages  = 1;
  _pdfMaxPageSeen = 1;
  _audResetAll();
  _pdfUsingIframe = false;

  /* Modul yang sudah pernah selesai → Done langsung terbuka,
     tidak perlu membaca ulang sampai halaman terakhir. */
  var alreadyDone = !!mod.is_completed;
  var doneStyle   = alreadyDone ? 'display:flex' : 'display:none';

  var driveFileId = mod.content_url || '';
  var previewUrl  = driveFileId.indexOf('drive.google.com') >= 0
    ? driveFileId.replace('/view', '/preview').replace('/edit', '/preview')
    : 'https://drive.google.com/file/d/' + driveFileId + '/preview';

  /* Panggung buku + toolbar + lapisan loading */
  var buildStage = function(isMob) {
    var p = isMob ? 'm' : 'd';
    return '<div class="pdf-stage" id="' + p + '-pdf-stage">' +
      '<div class="pdf-book-mount" id="' + p + '-pdf-mount"></div>' +
      '<div class="pdf-tools">' +
        '<button class="pdf-tool-btn" id="' + p + '-pdf-first" onclick="pdfFlipFirst()" title="First page" disabled>&#x23EE;</button>' +
        '<button class="pdf-tool-btn" id="' + p + '-pdf-prev"  onclick="pdfFlipPrev()"  title="Previous"   disabled>&#x25C0;</button>' +
        '<span class="pdf-page-ind" id="' + p + '-pdf-page-ind">1 / 1</span>' +
        '<button class="pdf-tool-btn" id="' + p + '-pdf-next"  onclick="pdfFlipNext()"  title="Next">&#x25B6;</button>' +
        '<button class="pdf-tool-btn" id="' + p + '-pdf-last"  onclick="pdfFlipLast()"  title="Last page" disabled>&#x23ED;</button>' +
        '<span class="pdf-tool-sep"></span>' +
        '<button class="pdf-tool-btn pdf-tool-mode" id="' + p + '-pdf-mode" onclick="pdfTogglePageMode()" title="Switch between one page and a two-page spread" disabled>1 page</button>' +
        '<span class="pdf-tool-sep"></span>' +
        '<button class="pdf-tool-btn" id="' + p + '-pdf-zoom-out" onclick="pdfZoomOut()" title="Zoom out" disabled>&minus;</button>' +
        '<span class="pdf-page-ind" id="' + p + '-pdf-zoom-ind" style="min-width:56px">100%</span>' +
        '<button class="pdf-tool-btn" id="' + p + '-pdf-zoom-in"  onclick="pdfZoomIn()"  title="Zoom in">+</button>' +
        '<button class="pdf-tool-btn" id="' + p + '-pdf-zoom-reset" onclick="pdfZoomReset()" title="Reset zoom" disabled>&#x21BA;</button>' +
        '<span class="pdf-tool-sep"></span>' +
        /* v2.105 — permintaan HRM: tombol Audio menonjol, sekali klik
           langsung berbunyi. Disembunyikan sampai teks terbukti ada. */
        '<button class="pdf-tool-btn pdf-tool-audio" id="' + p + '-pdf-audio" ' +
          'onclick="pdfToggleAudio()" title="Listen to this document" style="display:none">' +
          '&#128266; Audio</button>' +
        '<span class="pdf-tool-sep"></span>' +
        '<button class="pdf-tool-btn" onclick="pdfToggleFocus()" title="Focus mode">&#x26F6;</button>' +
        '<button class="pdf-tool-btn pdf-tool-done" id="' + p + '-pdf-done-tool" onclick="pdfCompleted()" style="' + doneStyle + '">&#x2713; Done</button>' +
      '</div>' +
      '<div class="pdf-loading" id="' + p + '-pdf-loading">' +
        '<div class="pdf-bookload" aria-hidden="true">' +
          '<span class="cv l"></span><span class="cv r"></span><span class="sp"></span>' +
          '<span class="pg"></span><span class="pg"></span><span class="pg"></span>' +
        '</div>' +
        '<div class="pdf-loading-txt" id="' + p + '-pdf-loading-txt">Preparing document…</div>' +
        '<div class="pdf-loading-bar"><div class="pdf-loading-fill" id="' + p + '-pdf-loading-fill"></div></div>' +
      '</div>' +
      /* ── Bilah audio — tersembunyi sampai tombol Audio ditekan ──
         v2.109 — pemilih suara diperas jadi satu baris untuk staff.
         <select> penuh masih ada di DOM (audTestVoice/_audFillVoiceSelect
         tidak disentuh), tapi tersembunyi sampai tombol Change ditekan.
         Voice Lab 50-baris tetap hidup di mockup — ini bukan
         penggantinya, cuma versi ringkas untuk pemakaian sehari-hari. */
      '<div class="aud-bar" id="' + p + '-aud-bar" style="display:none">' +
        '<div class="aud-row">' +
          '<button class="aud-btn primary" id="' + p + '-aud-play" onclick="audPlayPause()">&#9654; Play</button>' +
          '<button class="aud-btn" onclick="audStop()" title="Stop">&#9632;</button>' +
          '<button class="aud-btn" id="' + p + '-aud-script-tgl" onclick="audToggleScript()" ' +
            'title="Show the transcript">&#x2304; Text</button>' +
        '</div>' +
        /* ── Toggle bahasa SOP — v2.110 ──
           Tersembunyi lewat display:none secara bawaan; dimunculkan
           oleh _audUpdateLangToggle() HANYA kalau PDF ini lolos 3
           gerbang deteksi SOP bilingual. Label "Bilingual SOP" jadi
           alat diagnosa selama trial: kalau labelnya tidak muncul
           pada SOP yang seharusnya terdeteksi, itu tandanya deteksi
           meleset — tanpa perlu buka DevTools. */
        '<div class="aud-langtoggle" id="' + p + '-aud-langtoggle" style="display:none">' +
          '<span class="aud-lang-label">&#127760; Bilingual SOP</span>' +
          '<button class="aud-btn sm aud-lang-btn" id="' + p + '-aud-lang-en" onclick="audSwitchLang(\'EN\')">EN</button>' +
          '<button class="aud-btn sm aud-lang-btn" id="' + p + '-aud-lang-id" onclick="audSwitchLang(\'ID\')">ID</button>' +
        '</div>' +
        '<div class="aud-voicerow">' +
          '<span class="aud-voicename" id="' + p + '-aud-voicename">Loading voice…</span>' +
          '<button class="aud-btn sm" onclick="audTestVoice()" title="Play a short sample">Test</button>' +
          '<button class="aud-btn sm" id="' + p + '-aud-change-tgl" onclick="audToggleVoicePicker()">Change</button>' +
        '</div>' +
        '<select class="aud-voice" id="' + p + '-aud-voice" onchange="audOnVoicePicked()" style="display:none">' +
          '<option>Loading voices…</option></select>' +
        '<div class="aud-prog"><div class="aud-fill" id="' + p + '-aud-fill"></div></div>' +
        '<div class="aud-status" id="' + p + '-aud-status">Ready</div>' +
        /* Transkrip — tertutup secara bawaan, sesuai pilihan B */
        '<div class="aud-script" id="' + p + '-aud-script" style="display:none"></div>' +
      '</div>' +
    '</div>';
  };

  var buildPdfPage = function(contentId, isMob) {
    var el = document.getElementById(contentId);
    if (!el) return;
    if (isMob) {
      el.innerHTML =
        buildStage(true) +
        '<div style="padding:12px 16px">' +
          '<div style="font-size:13px;font-weight:600;color:var(--black);margin-bottom:4px">' + escHtml(mod.title) + '</div>' +
          '<div style="font-size:12px;color:var(--gray-500);margin-bottom:10px">' + escHtml(mod.description || '') + '</div>' +
          '<div class="m-video-prog" style="margin-bottom:12px"><div class="m-video-prog-fill" id="m-pdf-prog" style="width:0%"></div></div>' +
          '<button class="btn-full btn-full-black" id="m-pdf-done" onclick="pdfCompleted()" style="' + doneStyle + ';align-items:center;justify-content:center;background:var(--green)">✓ Done — Next Module</button>' +
        '</div>' +
        /* v3.01 — daftar modul di bawah, sama seperti halaman video */
        '<div style="padding:0 16px">' + _courseModuleList(mod.module_id, true) + '</div>' +
        '<div style="height:20px"></div>';
    } else {
      // Module list panel kanan (sama seperti video page)
      var sidePanel =
        _courseModuleList(mod.module_id, false) +
        '<button class="pdf-next-btn" id="d-pdf-done" onclick="pdfCompleted()" style="' + doneStyle + ';align-items:center;justify-content:center;background:var(--green);margin-top:4px">✓ Done — Next Module</button>';

      el.innerHTML =
        '<div class="pdf-page-layout">' +
          '<div class="pdf-main">' +
            '<div class="pdf-header">' +
              '<div class="pdf-back-btn" onclick="backToCourseDetail()">← ' + escHtml(course.title || 'Course') + '</div>' +
              '<div class="pdf-mod-title">' + escHtml(mod.title) + '</div>' +
            '</div>' +
            buildStage(false) +
            '<div class="pdf-controls">' +
              '<span class="pdf-page-indicator">Reading</span>' +
              '<div class="pdf-progress-bar-bg"><div class="pdf-progress-bar-fill" id="d-pdf-prog" style="width:0%"></div></div>' +
              '<button class="pdf-next-btn" id="d-pdf-done2" onclick="pdfCompleted()" style="' + doneStyle + ';align-items:center;justify-content:center;background:var(--green)">\u2713 Done — Next Module</button>' +
            '</div>' +
          '</div>' +
          '<div class="video-side">' + sidePanel + '</div>' +
        '</div>';
    }
  };

  buildPdfPage('d-pdf-content', false);
  buildPdfPage('m-pdf-content', true);

  /* v2.96 — hanya SATU flipbook, di viewport yang sedang terlihat.
     Pola sama dengan Plyr: hindari dua instance hidup bersamaan. */
  _pdfStartFlipbook(mod, _plyrViewportIsMobile(), previewUrl);
}

/* v2.96 — _pdfNextPage() DIHAPUS.
   Kode mati sejak lama: 0 pemanggil, dan 8 ID yang diutak-atiknya
   (d-pdf-prog lama, d-pdf-page-lbl, d-pdf-next, dst) tidak pernah dirender.
   Dia juga menyetel display:'block' pada tombol Done — menimpa display:flex
   dan membatalkan perbaikan teks rata tengah dari v2.92.
   Navigasi halaman sekarang ditangani pdfFlipPrev/Next/First/Last. */
function pdfCompleted() {
  /* v2.97 — token dinaikkan supaya render yang masih berjalan berhenti sia-sia,
     TAPI buku tidak dibongkar di sini. Kalau _pdfDestroy() dipanggil sekarang,
     buku lenyap selama menunggu jawaban server. Pembuangan tetap terjadi di
     jalur navigasi: loadPdf() untuk modul PDF, goTo() -> _stopVideoCleanup()
     untuk VIDEO/QUIZ. */
  _pdfLoadToken++;
  var sid = sessionStorage.getItem('lms_session_id');
  var mod = window._currentModule;
  var userId = _lmsUser ? _lmsUser.user_id : '';
  if (!sid || !mod || !userId) return;
  showLoading('Marking complete...', true);
  google.script.run
    .withSuccessHandler(function(r) {
      hideLoading();
      if (!r.success) { showToast(r.message || 'Error.'); return; }
      showToast('PDF module completed! 📄');
      // Tandai module ini completed di _currentModules
      var mods = window._currentModules || [];
      var curIdx = -1;
      for (var i = 0; i < mods.length; i++) {
        if (mods[i].module_id === mod.module_id) { mods[i].is_completed = true; curIdx = i; break; }
      }
      // Auto-pindah ke module berikutnya (VIDEO/PDF/QUIZ), tetap di halaman
      var nextIdx = curIdx + 1;
      if (nextIdx < mods.length) {
        var nextM = _normalizeModule(mods[nextIdx]);
        var nextType = (nextM.module_type || '').toUpperCase();
        if (nextType === 'VIDEO') {
          window._currentModule = nextM;
          goTo('video');        // v2.94 FIX: lintas halaman — tukar container dulu
        } else if (nextType === 'PDF') {
          window._currentModule = nextM;
          loadPdf();            // tetap di halaman PDF — cukup re-render
        } else if (nextType === 'QUIZ') {
          window._currentModule = nextM;
          goTo('quiz');
        } else {
          loadPdf();
        }
      } else {
        loadPdf();
      }
    })
    .withFailureHandler(function(e) { hideLoading(); showToast('Error.'); console.error(e); })
    .markModuleComplete(sid, userId, mod.module_id, 100);
  _cacheBatal('courses');   // v2.140 — progres berubah
}

/* ══════════════════════════════════════
   QUIZ
══════════════════════════════════════ */

/* Helper render row di Quiz Info panel */
function _quizInfoRow(label, val) {
  return '<div style="display:flex;justify-content:space-between;align-items:center;font-size:12.5px">' +
    '<span style="color:var(--gray-500)">' + label + '</span>' +
    '<span style="font-weight:600;color:var(--black)">' + val + '</span>' +
  '</div>';
}

/* Jump ke soal tertentu dari dots navigator */
function quizJumpTo(idx) {
  if (idx < 0 || idx >= _quizQuestions.length) return;
  _quizCurrentIdx = idx;
  renderQuizQuestion();
  _quizSaveProgress();
}

var _quizQuestions   = [];
var _quizCurrentIdx  = 0;
var _quizAnswers     = {};
var _quizStartTime   = null;
var _quizTimerInterval = null;
var _quizSubmitting    = false;
var _quizTimeLimitSec  = 0;
var _quizQuestionStartTime = null;
var _quizMeta = null;   // v2.111 — { passing_score, max_attempts, attempt_num, attempts_left } dari server, satu sumber untuk semua tampilan attempt
var _quizRestorePending = false;   // v2.111 — cegah renderQuizIntro menimpa balik soal yang baru dipulihkan

function loadQuiz() {
  var mod    = window._currentModule;
  var course = window._currentCourse;
  if (!mod || !course) { goTo('courses'); return; }

  /* v2.95 — guard: halaman quiz hanya untuk modul QUIZ */
  if ((mod.module_type || '').toUpperCase() !== 'QUIZ') { _routeModuleToPage(mod); return; }

  var t = function(id, v) { var el = document.getElementById(id); if (el) el.textContent = v; };
  t('d-quiz-title',       'Quiz — ' + (course.title || ''));
  t('d-quiz-course-name', course.title || 'Course');
  t('m-quiz-eyebrow', course.title || 'Course');
  t('m-quiz-title',   'Quiz');

  var cD = document.getElementById('d-quiz-content');
  var cM = document.getElementById('m-quiz-content');
  if (cD) cD.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading questions...</div></div>';
  if (cM) cM.innerHTML = '<div class="page-placeholder"><div class="ph-dots"><span></span><span></span><span></span><span></span><span></span></div><div class="ph-title">Loading...</div></div>';

  var sid = sessionStorage.getItem('lms_session_id');
  google.script.run
    .withSuccessHandler(function(r) {
      if (!r) return;
      if (!r.success) { showToast(r.message || 'Failed to load quiz.'); return; }
      _quizQuestions    = r.data.questions || [];
      _quizCurrentIdx   = 0;
      _quizAnswers      = {};
      _quizTimeLimitSec = (_quizQuestions.length * 90);
      /* v2.111 — meta attempt dari server, bukan hardcode di HTML */
      _quizMeta = {
        passing_score : r.data.passing_score || 75,
        max_attempts  : r.data.max_attempts  || 3,
        attempt_num   : r.data.attempt_num   || 1,
        attempts_left : r.data.attempts_left || 0
      };
      _quizRestoreProgress();   // v2.111 — pulihkan jawaban tersimpan (kalau ada) sebelum render
      renderQuizIntro();
    })
    .withFailureHandler(function(e) { showToast('Connection error.'); console.error(e); })
    .getQuizQuestions(sid, course.course_id, mod.num_questions || 0);
}

function renderQuizIntro() {
  /* v2.111 — kalau progress baru saja dipulihkan (_quizRestoreProgress
     sudah memanggil renderQuizQuestion() sendiri), JANGAN timpa balik
     dengan layar intro. Reset penanda supaya load quiz berikutnya
     (attempt baru) tetap normal lewat intro. */
  if (_quizRestorePending) { _quizRestorePending = false; return; }

  var mod    = window._currentModule;
  var course = window._currentCourse;
  if (!mod || !course) return;
  var total         = _quizQuestions.length;
  var totalMinutes  = Math.ceil(_quizTimeLimitSec / 60);
  var passingScore  = (_quizMeta && _quizMeta.passing_score) || course.passing_score || 75;
  var passingNeeded = Math.ceil(total * passingScore / 100);
  var dept          = (course.department || 'General').toUpperCase();
  var cD = document.getElementById('d-quiz-content');
  var cM = document.getElementById('m-quiz-content');
  var introHtml =
    '<div style="padding:24px 0">' +
      '<div style="background:var(--solid-dark);border-radius:20px;padding:40px;position:relative;overflow:hidden;margin-bottom:24px">' +
        '<div style="position:absolute;inset:0;background:radial-gradient(ellipse at 80% 50%,rgba(201,160,101,0.15) 0%,transparent 65%);pointer-events:none"></div>' +
        '<div style="position:relative;z-index:1">' +
          '<div style="font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:8px">' + dept + ' — QUIZ</div>' +
          '<div style="font-family:Georgia,serif;font-size:28px;font-weight:700;color:#fff;margin-bottom:6px">' + escHtml(course.title || 'Quiz') + '</div>' +
          '<div style="font-size:14px;color:rgba(255,255,255,0.45)">Attempt ' + (_quizMeta ? _quizMeta.attempt_num : 1) + ' of ' + (_quizMeta ? _quizMeta.max_attempts : 5) + '</div>' +
        '</div>' +
      '</div>' +
      '<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px">' +
        _quizIntroCard('⏱', 'Duration', totalMinutes + ' min') +
        _quizIntroCard('📝', 'Questions', total + ' qs') +
        _quizIntroCard('🏆', 'Pass Marks', passingNeeded + '/' + total) +
        _quizIntroCard('🔄', 'Attempts', '1 of 5') +
      '</div>' +
      '<div style="background:var(--white);border:1.5px solid var(--gray-100);border-radius:14px;padding:24px;margin-bottom:28px">' +
        '<div style="font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-500);margin-bottom:14px">QUIZ DETAILS</div>' +
        '<div style="display:flex;flex-direction:column;gap:8px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--gray-100)">' +
          '<div style="display:flex;justify-content:space-between;font-size:13.5px"><span style="color:var(--gray-500)">Question Type</span><span style="font-weight:600">Multiple Choice</span></div>' +
          '<div style="display:flex;justify-content:space-between;font-size:13.5px"><span style="color:var(--gray-500)">Total Questions</span><span style="font-weight:600">' + total + '</span></div>' +
          '<div style="display:flex;justify-content:space-between;font-size:13.5px"><span style="color:var(--gray-500)">Pass Marks</span><span style="font-weight:600">' + passingNeeded + ' of ' + total + ' correct</span></div>' +
          '<div style="display:flex;justify-content:space-between;font-size:13.5px"><span style="color:var(--gray-500)">Duration</span><span style="font-weight:600">' + totalMinutes + ' minutes</span></div>' +
          '<div style="display:flex;justify-content:space-between;font-size:13.5px"><span style="color:var(--gray-500)">Max Attempts</span><span style="font-weight:600">5 attempts</span></div>' +
        '</div>' +
        '<div style="font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-500);margin-bottom:14px">INSTRUCTIONS</div>' +
        '<ul style="margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px">' +
          '<li style="font-size:14px;color:var(--black);line-height:1.5">The timer starts once you click <strong>Start Quiz</strong>.</li>' +
          '<li style="font-size:14px;color:var(--black);line-height:1.5">Use the number buttons above to navigate between questions.</li>' +
          '<li style="font-size:14px;color:var(--black);line-height:1.5">Make sure every question is answered before submitting.</li>' +
          '<li style="font-size:14px;color:var(--black);line-height:1.5">Answering too fast (&lt;30 sec/question) triggers a speed flag.</li>' +
          '<li style="font-size:14px;color:var(--black);line-height:1.5">The quiz auto-submits when time runs out.</li>' +
        '</ul>' +
      '</div>' +
      '<div style="text-align:center">' +
        '<button onclick="startQuizFromIntro()" ' +
          'style="height:56px;padding:0 48px;border-radius:14px;border:none;background:var(--solid-dark);color:#fff;' +
          'font-family:Inter,sans-serif;font-size:16px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:10px">' +
          '▶ Start Quiz' +
        '</button>' +
        '<div style="font-size:12px;color:var(--gray-400);margin-top:10px">Timer dimulai setelah kamu klik Start Quiz</div>' +
      '</div>' +
    '</div>';
  if (cD) cD.innerHTML = introHtml;
  if (cM) cM.innerHTML =
    '<div style="padding:20px">' +
      '<div style="background:var(--solid-dark);border-radius:14px;padding:24px;margin-bottom:16px;position:relative;overflow:hidden">' +
        '<div style="position:absolute;inset:0;background:radial-gradient(ellipse at 80% 50%,rgba(201,160,101,0.15) 0%,transparent 65%);pointer-events:none"></div>' +
        '<div style="position:relative;z-index:1">' +
          '<div style="font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:6px">' + dept + ' — QUIZ</div>' +
          '<div style="font-family:Georgia,serif;font-size:20px;font-weight:700;color:#fff;margin-bottom:4px">' + escHtml(course.title || 'Quiz') + '</div>' +
          '<div style="font-size:12px;color:rgba(255,255,255,0.45)">Attempt ' + (_quizMeta ? _quizMeta.attempt_num : 1) + ' of ' + (_quizMeta ? _quizMeta.max_attempts : 5) + '</div>' +
        '</div>' +
      '</div>' +
      '<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px">' +
        _quizIntroCard('⏱', 'Duration', totalMinutes + ' min') +
        _quizIntroCard('📝', 'Questions', total + '') +
        _quizIntroCard('🏆', 'Passing', passingScore + '%') +
        _quizIntroCard('🔄', 'Attempts', '1 of 5') +
      '</div>' +
      '<button onclick="startQuizFromIntro()" ' +
        'style="width:100%;height:52px;border-radius:12px;border:none;background:var(--solid-dark);color:#fff;' +
        'font-family:Inter,sans-serif;font-size:15px;font-weight:700;cursor:pointer">▶ Start Quiz</button>' +
      '<div style="font-size:11.5px;color:var(--gray-400);text-align:center;margin-top:8px">The timer starts once you click Start Quiz</div>' +
    '</div>';
}

function _quizIntroCard(icon, label, val) {
  return '<div style="background:var(--white);border:1.5px solid var(--gray-100);border-radius:12px;padding:16px;text-align:center">' +
    '<div style="font-size:22px;margin-bottom:4px">' + icon + '</div>' +
    '<div style="font-size:18px;font-weight:700;font-family:Georgia,serif;color:var(--black)">' + val + '</div>' +
    '<div style="font-size:11px;color:var(--gray-500);margin-top:2px">' + label + '</div>' +
  '</div>';
}

function startQuizFromIntro() {
  _quizStartTime         = new Date();
  _quizQuestionStartTime = new Date();
  _startQuizTimer();
  renderQuizQuestion();
  _quizSaveProgress();   // v2.111 — simpan titik mulai, jaga-jaga tab tertutup sebelum soal pertama dijawab
}

/* ═══════════════════════════════════════════════════════════
   v2.111 — AUTO-SAVE JAWABAN QUIZ

   Latar: jawaban & timer sebelumnya HANYA hidup di memori
   JavaScript (_quizAnswers, _quizStartTime). Kalau tab tertutup
   tidak sengaja atau baterai HP habis di tengah quiz, semua hilang
   — walau attempt sendiri TIDAK berkurang (attempt baru tercatat
   di submitQuiz, bukan saat Start). Staff harus mengulang dari nol
   tanpa kehilangan attempt, tapi kehilangan waktu & jawaban.

   Solusi: simpan progress ke sessionStorage (bukan localStorage —
   sessionStorage otomatis hilang begitu tab benar-benar ditutup,
   yang justru pas: tab masih ada = bisa dipulihkan; tab ditutup
   sungguhan/browser lain = memang harus mulai ulang, sesuai aturan
   attempt yang berlaku sekarang).

   PENTING — anti-curang: timer TIDAK di-reset saat dipulihkan.
   _quizStartTime tersimpan dan dipulihkan APA ADANYA, sehingga sisa
   waktu dihitung dari waktu mulai yang SEBENARNYA, bukan dari saat
   halaman dibuka ulang. Staff tidak bisa memperpanjang waktu dengan
   sengaja menutup dan membuka lagi.
═══════════════════════════════════════════════════════════ */
function _quizProgressKey(courseId) {
  return 'lms_quiz_progress_' + courseId;
}

function _quizSaveProgress() {
  try {
    var course = window._currentCourse;
    if (!course || !course.course_id) return;
    var payload = {
      course_id  : course.course_id,
      answers    : _quizAnswers,
      start_ms   : _quizStartTime ? _quizStartTime.getTime() : new Date().getTime(),
      time_limit : _quizTimeLimitSec,
      current_idx: _quizCurrentIdx,
      questions  : _quizQuestions,   // disimpan supaya urutan soal acak yang sama tidak berubah saat dipulihkan
      meta       : _quizMeta
    };
    sessionStorage.setItem(_quizProgressKey(course.course_id), JSON.stringify(payload));
  } catch (e) { /* storage penuh/diblokir — auto-save opsional, jangan sampai mengganggu quiz */ }
}

/* Dipanggil setelah getQuizQuestions sukses. Kalau ada progress
   tersimpan UNTUK COURSE YANG SAMA dan waktu belum habis, pulihkan
   dan langsung lanjut ke soal (skip layar intro). Kalau tidak ada,
   atau sudah lain course, atau waktu sudah habis — biarkan alur
   normal (layar intro, klik Start) berjalan apa adanya. */
function _quizRestoreProgress() {
  try {
    var course = window._currentCourse;
    if (!course || !course.course_id) return;
    var raw = sessionStorage.getItem(_quizProgressKey(course.course_id));
    if (!raw) return;
    var saved = JSON.parse(raw);
    if (!saved || saved.course_id !== course.course_id) return;

    var elapsedSec = Math.round((new Date().getTime() - saved.start_ms) / 1000);
    if (elapsedSec >= saved.time_limit) {
      // Waktu sudah habis selagi tab tertutup — jangan pulihkan,
      // biarkan submitQuiz's own timeout/logic normal yang menangani
      // begitu staff mulai lagi dari intro (attempt baru).
      sessionStorage.removeItem(_quizProgressKey(course.course_id));
      return;
    }

    _quizQuestions    = saved.questions   || _quizQuestions;
    _quizAnswers      = saved.answers     || {};
    _quizCurrentIdx   = saved.current_idx || 0;
    _quizTimeLimitSec = saved.time_limit  || _quizTimeLimitSec;
    _quizMeta         = saved.meta        || _quizMeta;
    _quizStartTime         = new Date(saved.start_ms);
    _quizQuestionStartTime = new Date();

    showToast('Your previous progress was restored.');
    _startQuizTimer();
    renderQuizQuestion();
    _quizRestorePending = true;   // tanda ke renderQuizIntro agar tidak menimpa balik dengan layar intro
  } catch (e) { /* data korup — abaikan, biarkan mulai dari intro seperti biasa */ }
}

function _quizClearProgress() {
  try {
    var course = window._currentCourse;
    if (course && course.course_id) {
      sessionStorage.removeItem(_quizProgressKey(course.course_id));
    }
  } catch (e) {}
}

function _startQuizTimer() {
  if (_quizTimerInterval) clearInterval(_quizTimerInterval);
  var remaining = _quizTimeLimitSec;
  var updateTimer = function() {
    remaining--;
    if (remaining <= 0) {
      clearInterval(_quizTimerInterval);
      showToast('Time\'s up! Quiz auto-submitted.');
      submitQuiz();
      return;
    }
    var m   = Math.floor(remaining / 60);
    var s   = remaining % 60;
    var str = (m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s;
    var timerD = document.getElementById('d-quiz-timer-txt');
    var timerM = document.getElementById('m-quiz-timer');
    if (timerD) timerD.textContent = str;
    if (timerM) timerM.textContent = str;
    // Warn: kuning <5 menit, merah <1 menit + danger animation
    var tEl = document.getElementById('d-quiz-timer-txt');
    if (tEl) {
      tEl.className = 'quiz-timer' +
        (remaining <= 60 ? ' danger' : remaining <= 300 ? ' warning' : '');
    }
  };
  _quizTimerInterval = setInterval(updateTimer, 1000);
}

function renderQuizQuestion() {
  if (_quizQuestions.length === 0) {
    showToast('No questions found.');
    return;
  }
  var q      = _quizQuestions[_quizCurrentIdx];
  var total  = _quizQuestions.length;
  var idx    = _quizCurrentIdx;
  var pct    = Math.round((idx / total) * 100);
  var course = window._currentCourse || {};
  var opts   = q.options || [];
  var keys   = ['A','B','C','D'];
  var timeLbl = (function() {
    var rem = _quizTimeLimitSec - Math.round((new Date() - _quizStartTime) / 1000);
    rem = Math.max(0, rem);
    return (Math.floor(rem/60) < 10 ? '0' : '') + Math.floor(rem/60) + ':' + (rem%60 < 10 ? '0' : '') + rem%60;
  })();

  _quizQuestionStartTime = new Date();

  // ── DESKTOP ──
  var cD = document.getElementById('d-quiz-content');
  if (cD) {
    var optsHtml = opts.map(function(opt, i) {
      var key = keys[i] || String(i+1);
      var sel = _quizAnswers[idx] === i ? ' selected' : '';
      return '<div class="q-option' + sel + '" onclick="selectAnswer(' + i + ')" data-opt="' + i + '">' +
        '<div class="q-opt-letter">' + key + '</div>' +
        '<div class="q-opt-text">' + escHtml(opt) + '</div>' +
      '</div>';
    }).join('');
    var isPrev = idx > 0;
    var isLast = idx === total - 1;
    // Dots navigator
    var dotsHtml = '';
    for (var di = 0; di < total; di++) {
      var dotCls = di === idx ? 'q-dot current' : (_quizAnswers[di] !== undefined ? 'q-dot answered' : 'q-dot unanswered');
      dotsHtml += '<div class="' + dotCls + '" onclick="quizJumpTo(' + di + ')">' + (di+1) + '</div>';
    }
    var answeredCount  = Object.keys(_quizAnswers).length;
    var elapsedSec     = Math.round((new Date() - _quizStartTime) / 1000);
    var avgTimeSoFar   = answeredCount > 0 ? Math.round(elapsedSec / answeredCount) : 0;
    var avgTimeStr     = avgTimeSoFar >= 60
      ? Math.floor(avgTimeSoFar/60) + 'm ' + (avgTimeSoFar%60) + 's'
      : (avgTimeSoFar > 0 ? avgTimeSoFar + 's' : '—');
    var speedStatus    = answeredCount > 0 && avgTimeSoFar < 5
      ? '<span style="color:#EF4444;font-weight:700">⚠ Suspicious</span>'
      : '<span style="color:#10B981;font-weight:700">✓ Normal</span>';
    var passingScore   = (course && course.passing_score) || 75;
    var passingNeeded  = Math.ceil(total * passingScore / 100);

    cD.innerHTML =
      '<div class="quiz-layout">' +
        // ── Kolom kiri: hero + dots + soal + nav
        '<div>' +
          // Hero header dark
          '<div class="quiz-header-card">' +
            '<div class="quiz-header-bg"></div>' +
            '<div class="quiz-header-left">' +
              '<div class="quiz-course-label">' + escHtml((course.department || 'General').toUpperCase()) + ' — QUIZ</div>' +
              '<div class="quiz-title-text">' + escHtml(course.title || 'Quiz') + '</div>' +
              '<div class="quiz-attempt-info">Attempt ' + (_quizMeta ? _quizMeta.attempt_num : 1) + ' of ' + (_quizMeta ? _quizMeta.max_attempts : 3) + ' · Passing score: ' + passingScore + '% · ' + total + ' questions</div>' +
            '</div>' +
            '<div class="quiz-header-right">' +
              '<div class="quiz-timer-label">TIME REMAINING</div>' +
              '<div class="quiz-timer" id="d-quiz-timer-txt">' + timeLbl + '</div>' +
            '</div>' +
          '</div>' +
          // Dots navigator
          '<div class="q-progress-row">' + dotsHtml + '</div>' +
          // Question card
          '<div class="question-card">' +
            '<div class="q-number">Question ' + (idx+1) + ' of ' + total + '</div>' +
            '<div class="q-text">' + escHtml(q.question_text || '') + '</div>' +
            '<div class="q-options" id="d-quiz-opts">' + optsHtml + '</div>' +
          '</div>' +
          // Nav row
          '<div class="quiz-nav">' +
            (isPrev ? '<button class="btn-quiz-nav btn-quiz-prev" onclick="quizPrev()">← Previous</button>' : '<span></span>') +
            '<span class="q-nav-info" id="d-quiz-counter">' + answeredCount + ' answered · ' + (total - answeredCount) + ' remaining</span>' +
            (isLast
              ? '<button class="btn-quiz-nav btn-quiz-submit" id="d-btn-submit" onclick="submitQuiz()">Submit Quiz ✓</button>'
              : '<button class="btn-quiz-nav btn-quiz-next" onclick="quizNext()">Next →</button>'
            ) +
          '</div>' +
        '</div>' +
        // ── Kolom kanan: QUIZ INFO + SPEED MONITOR
        '<div>' +
          '<div class="quiz-side-card">' +
            '<div class="quiz-side-title">QUIZ INFO</div>' +
            '<div class="quiz-side-stat"><span class="quiz-side-key">Total Questions</span><span class="quiz-side-val">' + total + '</span></div>' +
            '<div class="quiz-side-stat"><span class="quiz-side-key">Answered</span><span class="quiz-side-val" id="d-quiz-answered" style="color:#10B981">' + answeredCount + ' ✓</span></div>' +
            '<div class="quiz-side-stat"><span class="quiz-side-key">Remaining</span><span class="quiz-side-val" id="d-quiz-remaining">' + (total - answeredCount) + '</span></div>' +
            '<div class="quiz-side-stat"><span class="quiz-side-key">Passing Score</span><span class="quiz-side-val">' + passingScore + '% (' + passingNeeded + '/' + total + ')</span></div>' +
            '<div class="quiz-side-stat"><span class="quiz-side-key">Attempt</span><span class="quiz-side-val">' + (_quizMeta ? _quizMeta.attempt_num : 1) + ' of ' + (_quizMeta ? _quizMeta.max_attempts : 3) + '</span></div>' +
          '</div>' +
          '<div class="quiz-side-card">' +
            '<div class="quiz-side-title">SPEED MONITOR</div>' +
            '<div class="quiz-side-stat"><span class="quiz-side-key">Avg time/question</span><span class="quiz-side-val" id="d-quiz-avgtime">' + avgTimeStr + '</span></div>' +
            '<div class="quiz-side-stat"><span class="quiz-side-key">Status</span><span class="quiz-side-val" id="d-quiz-speedstatus">' + speedStatus + '</span></div>' +
            '<div class="speed-warning-box"><span>⚠</span><span>Answering under 30s/question triggers a speed warning flag</span></div>' +
          '</div>' +
        '</div>' +
      '</div>';
  }

  // ── MOBILE ──
  var cM = document.getElementById('m-quiz-content');
  if (cM) {
    var mOptsHtml = opts.map(function(opt, i) {
      var key = keys[i] || String(i+1);
      var sel = _quizAnswers[idx] === i ? ' selected' : '';
      return '<div class="m-quiz-option' + sel + '" onclick="selectAnswer(' + i + ')" data-opt="' + i + '">' +
        '<div class="m-quiz-opt-key">' + key + '</div>' +
        '<div style="font-size:14px">' + escHtml(opt) + '</div>' +
      '</div>';
    }).join('');
    var mTimer = document.getElementById('m-quiz-timer');
    if (mTimer) mTimer.textContent = timeLbl;
    cM.innerHTML =
      '<div style="padding:14px 16px">' +
        '<div style="display:flex;align-items:center;gap:8px;margin-bottom:14px">' +
          '<div style="flex:1;height:4px;background:var(--gray-100);border-radius:999px">' +
            '<div style="width:' + pct + '%;height:100%;background:linear-gradient(90deg,var(--gold),#E8C97A);border-radius:999px"></div>' +
          '</div>' +
          '<span style="font-size:11px;color:var(--gray-500)">' + (idx+1) + '/' + total + '</span>' +
        '</div>' +
        '<div style="font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:8px">Question ' + (idx+1) + '</div>' +
        '<div style="font-size:16px;font-weight:700;color:var(--black);line-height:1.5;margin-bottom:18px;font-family:Georgia,serif">' + escHtml(q.question_text || '') + '</div>' +
        '<div id="m-quiz-opts">' + mOptsHtml + '</div>' +
        '<div style="display:flex;gap:10px;margin-top:16px">' +
          (isPrev ? '<button class="btn-full btn-full-black" style="flex:1;height:48px;margin:0" onclick="quizPrev()">← Prev</button>' : '') +
          (isLast
            ? '<button class="btn-full" id="m-btn-submit" style="flex:2;height:48px;margin:0;border-radius:12px;border:none;background:var(--gold);color:var(--black);font-family:Inter,sans-serif;font-size:14px;font-weight:700;cursor:pointer" onclick="submitQuiz()">Submit ✓</button>'
            : '<button class="btn-full btn-full-black" style="flex:2;height:48px;margin:0" onclick="quizNext()">Next →</button>'
          ) +
        '</div>' +
      '</div>' +
      '<div style="height:20px"></div>';
  }
}

function selectAnswer(optIdx) {
  _quizAnswers[_quizCurrentIdx] = optIdx;
  // Highlight selected option
  document.querySelectorAll('#d-quiz-opts .q-option, #d-quiz-opts .quiz-option, #m-quiz-opts .m-quiz-option').forEach(function(el) {
    el.classList.remove('selected');
    if (parseInt(el.getAttribute('data-opt')) === optIdx) el.classList.add('selected');
  });
  // Update dot untuk soal ini jadi answered
  var dots = document.querySelectorAll('.q-progress-row .q-dot');
  if (dots[_quizCurrentIdx]) {
    if (!dots[_quizCurrentIdx].classList.contains('current')) {
      dots[_quizCurrentIdx].classList.remove('unanswered');
      dots[_quizCurrentIdx].classList.add('answered');
    }
  }
  _quizRefreshDerived();   // v2.111 — satu sumber untuk SEMUA angka turunan
  _quizSaveProgress();     // v2.111 — auto-save, lihat blok di bawah renderQuizQuestion
}

/* ═══════════════════════════════════════════════════════════
   v2.111 — SATU fungsi yang menghitung ulang SEMUA tampilan
   yang berasal dari _quizAnswers: bar navigasi, sidebar Answered/
   Remaining, dan Speed Monitor (Avg time/Status).

   INI PENGGANTI dari update manual per-elemen yang sebelumnya
   tersebar dan menyebabkan bug "Answered 14/15 padahal sudah 15"
   muncul dua kali di riwayat project ini — sekali di counter bar,
   sekali lagi di panel sidebar yang ditambahkan belakangan.

   ATURAN WAJIB untuk perubahan berikutnya: kalau ada tampilan BARU
   yang menunjukkan jumlah terjawab/sisa/rata-rata waktu, tambahkan
   DI SINI — jangan pernah membuat jalur update manual baru lagi.
   Dipanggil dari selectAnswer(); renderQuizQuestion() sendiri sudah
   otomatis benar tiap kali dipanggil penuh (quizNext/quizPrev/
   quizJumpTo semua memanggil renderQuizQuestion()).
═══════════════════════════════════════════════════════════ */
function _quizRefreshDerived() {
  var total         = _quizQuestions.length;
  var answeredCount = Object.keys(_quizAnswers).length;
  var remaining     = total - answeredCount;

  // Bar navigasi (desktop)
  var counter = document.getElementById('d-quiz-counter');
  if (counter) counter.textContent = answeredCount + ' answered · ' + remaining + ' remaining';

  // Sidebar QUIZ INFO (desktop only — mobile tidak punya panel ini)
  var elAns = document.getElementById('d-quiz-answered');
  if (elAns) elAns.innerHTML = answeredCount + ' ✓';
  var elRem = document.getElementById('d-quiz-remaining');
  if (elRem) elRem.textContent = remaining;

  // Sidebar SPEED MONITOR (desktop only)
  var elAvg = document.getElementById('d-quiz-avgtime');
  var elSpd = document.getElementById('d-quiz-speedstatus');
  if (elAvg || elSpd) {
    var elapsedSec   = Math.round((new Date() - _quizStartTime) / 1000);
    var avgTimeSoFar = answeredCount > 0 ? Math.round(elapsedSec / answeredCount) : 0;
    var avgTimeStr   = avgTimeSoFar >= 60
      ? Math.floor(avgTimeSoFar/60) + 'm ' + (avgTimeSoFar%60) + 's'
      : (avgTimeSoFar > 0 ? avgTimeSoFar + 's' : '—');
    var speedStatus  = answeredCount > 0 && avgTimeSoFar < 5
      ? '<span style="color:#EF4444;font-weight:700">⚠ Suspicious</span>'
      : '<span style="color:#10B981;font-weight:700">✓ Normal</span>';
    if (elAvg) elAvg.textContent = avgTimeStr;
    if (elSpd) elSpd.innerHTML  = speedStatus;
  }
}

function quizNext() {
  if (_quizAnswers[_quizCurrentIdx] === undefined) {
    showToast('Please select an answer before continuing.');
    return;
  }
  if (_quizCurrentIdx < _quizQuestions.length - 1) {
    _quizCurrentIdx++;
    renderQuizQuestion();
    _quizSaveProgress();
  }
}

function quizPrev() {
  if (_quizCurrentIdx > 0) {
    _quizCurrentIdx--;
    renderQuizQuestion();
    _quizSaveProgress();
  }
}

function submitQuiz() {
  if (_quizSubmitting) return;
  // Cek semua terjawab
  var unanswered = [];
  for (var i = 0; i < _quizQuestions.length; i++) {
    if (_quizAnswers[i] === undefined) unanswered.push(i + 1);
  }
  if (unanswered.length > 0) {
    showToast('Question(s) ' + unanswered.join(', ') + ' not yet answered.');
    return;
  }

  if (_quizTimerInterval) { clearInterval(_quizTimerInterval); _quizTimerInterval = null; }

  // Hitung durasi dan avg time per soal
  var totalSec    = Math.round((new Date() - _quizStartTime) / 1000);
  var avgSecPerQ  = Math.round(totalSec / _quizQuestions.length);
  var sid         = sessionStorage.getItem('lms_session_id');
  var mod         = window._currentModule;
  var course      = window._currentCourse;
  if (!sid || !mod) return;

  // Format answers ke object { question_id: 'A'/'B'/'C'/'D' }
  // GAS submitQuiz expect: (sessionId, userId, courseId, answers{}, timeTaken)
  var keys       = ['A', 'B', 'C', 'D'];
  var answersObj = {};
  _quizQuestions.forEach(function(q, i) {
    var selectedIdx = _quizAnswers[i];
    answersObj[q.question_id] = keys[selectedIdx] !== undefined ? keys[selectedIdx] : String(selectedIdx);
  });

  var userId   = _lmsUser ? _lmsUser.user_id : '';
  var courseId = course ? (course.course_id || '') : '';

  _quizSubmitting = true;
  /* v2.111 — timeout diturunkan 30s -> 20s, pesan English. Overlay
     PAKAI mode transparan (overlayMode=true) — sebelumnya dipanggil
     tanpa parameter kedua sehingga jatuh ke gaya login (full hitam),
     menutupi seluruh halaman dan membuat pesan error dari server
     ikut tak terlihat. */
  var _submitTimeout = setTimeout(function() {
    if (!_quizSubmitting) return;
    _quizSubmitting = false;
    hideLoading();
    ['d-btn-submit','m-btn-submit'].forEach(function(id) {
      var btn = document.getElementById(id);
      if (btn) { btn.innerHTML = 'Submit Quiz ✓'; btn.disabled = false; btn.style.opacity = '1'; }
    });
    _quizShowSubmitError('Connection timeout. Please check your internet and try submitting again — your answers are still saved.');
  }, 20000);
  showLoading('Calculating your score...', true);
  // Spinner on submit buttons
  var spinnerHtml = '<span style="display:inline-flex;align-items:center;gap:8px">' +
    '<svg style="animation:spin 1s linear infinite;width:16px;height:16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">' +
    '<path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>' +
    'Calculating your score...</span>';
  ['d-btn-submit','m-btn-submit'].forEach(function(id) {
    var btn = document.getElementById(id);
    if (btn) { btn.innerHTML = spinnerHtml; btn.disabled = true; btn.style.opacity = '0.75'; }
  });
  google.script.run
    .withSuccessHandler(function(r) {
      clearTimeout(_submitTimeout);
      _quizSubmitting = false;
      hideLoading();
      ['d-btn-submit','m-btn-submit'].forEach(function(id) {
        var btn = document.getElementById(id);
        if (btn) { btn.innerHTML = 'Submit Quiz ✓'; btn.disabled = false; btn.style.opacity = '1'; }
      });
      if (!r.success) {
        /* v2.111 — pesan server ditampilkan di PANEL DIAM, bukan toast
           yang hilang sendiri dalam 3 detik. Skenario nyata: "Batas
           maksimum percobaan sudah tercapai" atau "Kamu sudah lulus
           quiz ini sebelumnya" — staff harus sempat membacanya. */
        _quizShowSubmitError(r.message || 'Could not submit your quiz. Please try again.');
        return;
      }
      _quizClearProgress();   // v2.111 — auto-save dihapus setelah submit sukses
      renderQuizResult(r.data, avgSecPerQ, course);
    })
    .withFailureHandler(function(e) {
      clearTimeout(_submitTimeout);
      _quizSubmitting = false;
      hideLoading();
      ['d-btn-submit','m-btn-submit'].forEach(function(id) {
        var btn = document.getElementById(id);
        if (btn) { btn.innerHTML = 'Submit Quiz ✓'; btn.disabled = false; btn.style.opacity = '1'; }
      });
      _quizShowSubmitError('Failed to send your answers. Your answers are still saved — please try submitting again.');
      console.error(e);
    })
    .submitQuiz(sid, userId, courseId, answersObj, totalSec);
  _cacheBatal();   // v2.140 — nilai + progres + sertifikat bisa berubah
}

/* v2.111 — panel error DIAM untuk hasil submit gagal (server
   success:false, atau timeout, atau koneksi gagal). Sebelumnya lewat
   showToast() yang hilang sendiri 3 detik — pesan penting seperti
   "Batas maksimum percobaan sudah tercapai" bisa terlewat begitu
   saja. Panel ini tetap tampil sampai staff menutupnya sendiri. */
function _quizShowSubmitError(message) {
  var existing = document.getElementById('quiz-submit-error-modal');
  if (existing) existing.remove();
  var html =
    '<div id="quiz-submit-error-modal" style="position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:8000;display:flex;align-items:center;justify-content:center;padding:20px">' +
      '<div style="background:var(--white);border-radius:20px;padding:32px 28px;max-width:400px;width:100%;box-shadow:0 24px 64px rgba(0,0,0,0.18);text-align:center">' +
        '<div style="font-size:44px;margin-bottom:10px">⚠️</div>' +
        '<div style="font-family:Georgia,serif;font-size:20px;font-weight:700;color:var(--black);margin-bottom:10px">Could not submit</div>' +
        '<div style="font-size:14px;color:var(--gray-600);line-height:1.5;margin-bottom:22px">' + escHtml(message) + '</div>' +
        '<button onclick="document.getElementById(\'quiz-submit-error-modal\').remove()" style="width:100%;height:44px;border-radius:10px;border:none;background:var(--solid-dark);color:#fff;font-family:Inter,sans-serif;font-size:14px;font-weight:700;cursor:pointer">OK</button>' +
      '</div>' +
    '</div>';
  document.body.insertAdjacentHTML('beforeend', html);
}

function renderQuizResult(result, avgSec, course) {
  var score        = result.score || 0;
  var passed       = result.passed || false;
  var correct      = result.correct || 0;
  var total        = result.total   || _quizQuestions.length;
  var attemptsLeft = result.attempts_left || 0;
  var certId       = result.cert_id    || '';
  var certError    = result.cert_error || '';
  var isSpeedFlag  = avgSec < 5;
  var passingScore = (course && course.passing_score) || 70;
  var resultIcon   = passed ? '🏆' : '📝';
  var resultStatus = passed ? 'Quiz Passed!' : 'Not Passed';

  // Konfeti saat lulus
  if (passed) setTimeout(showKonfeti, 400);

  // Speed warning text
  var speedHtml = isSpeedFlag
    ? '<div style="background:#FEF3C7;border:1px solid #F59E0B;border-radius:10px;padding:12px 16px;font-size:13px;color:#92400E;margin-top:16px;text-align:left">' +
      '⚠️ Your answers were unusually fast (avg ' + avgSec + 's/question). This result has been reported to IT Admin & HRM.</div>'
    : '';

  /* v2.111 — pesan cert diam-diam gagal sebelumnya tidak pernah
     terlihat: staff lulus, tekan "View Certificate", dibawa ke
     halaman Certificates yang KOSONG tanpa penjelasan apa pun.
     Sekarang dibedakan tegas berdasarkan cert_id/cert_error yang
     nyata dari server, bukan diasumsikan otomatis ada begitu passed. */
  var certNoticeHtml = (passed && certError)
    ? '<div style="background:#FEE2E2;border:1px solid #F87171;border-radius:10px;padding:12px 16px;font-size:13px;color:#991B1B;margin-top:16px;text-align:left">' +
      '⚠️ Your quiz was recorded as passed, but the certificate could not be generated automatically. Please contact IT Support so it can be issued manually.</div>'
    : '';

  // Tombol aksi
  var btnsHtml = (passed && certId)
    ? '<button onclick="closeQuizModal();goTo(\'certs\')" style="flex:1;height:44px;border-radius:10px;border:none;background:var(--gold);color:var(--black);font-family:Inter,sans-serif;font-size:14px;font-weight:700;cursor:pointer">🏆 View Certificate</button>' +
      '<button onclick="closeQuizModal()" style="flex:1;height:44px;border-radius:10px;border:1.5px solid var(--gray-200);background:var(--white);color:var(--black);font-family:Inter,sans-serif;font-size:14px;font-weight:600;cursor:pointer">Close</button>'
    : (passed && certError)
    ? '<button onclick="closeQuizModal();backToCourseDetail()" style="width:100%;height:44px;border-radius:10px;border:none;background:var(--solid-dark);color:#fff;font-family:Inter,sans-serif;font-size:14px;font-weight:700;cursor:pointer">← Back to Course</button>'
    : (attemptsLeft > 0
      ? '<button onclick="closeQuizModal();loadQuiz()" style="flex:1;height:44px;border-radius:10px;border:none;background:var(--solid-dark);color:#fff;font-family:Inter,sans-serif;font-size:14px;font-weight:700;cursor:pointer">↺ Retry (' + attemptsLeft + ' left)</button>' +
        '<button onclick="closeQuizModal();backToCourseDetail()" style="flex:1;height:44px;border-radius:10px;border:1.5px solid var(--gray-200);background:var(--white);color:var(--black);font-family:Inter,sans-serif;font-size:14px;font-weight:600;cursor:pointer">Back to Course</button>'
      : '<button onclick="closeQuizModal();backToCourseDetail()" style="width:100%;height:44px;border-radius:10px;border:none;background:var(--solid-dark);color:#fff;font-family:Inter,sans-serif;font-size:14px;font-weight:700;cursor:pointer">← Back to Course</button>');

  // Modal HTML
  var modalHtml =
    '<div id="quiz-result-modal" style="position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:8000;display:flex;align-items:center;justify-content:center;padding:20px">' +
      '<div style="background:var(--white);border-radius:20px;padding:36px 32px;max-width:420px;width:100%;box-shadow:0 24px 64px rgba(0,0,0,0.18);text-align:center">' +
        '<div style="font-size:56px;margin-bottom:12px">' + resultIcon + '</div>' +
        '<div style="font-family:Georgia,serif;font-size:26px;font-weight:700;color:' + (passed ? '#10B981' : '#EF4444') + ';margin-bottom:8px">' + resultStatus + '</div>' +
        '<div style="font-size:14px;color:var(--gray-500);margin-bottom:20px">Passing score: ' + passingScore + '%</div>' +
        '<div style="font-size:48px;font-weight:700;color:var(--black);line-height:1;margin-bottom:4px">' + score + '%</div>' +
        '<div style="font-size:13px;color:var(--gray-500);margin-bottom:20px">Your score</div>' +
        '<div style="display:flex;justify-content:center;gap:32px;margin-bottom:20px;padding:16px;background:var(--gray-50);border-radius:12px">' +
          '<div><div style="font-size:28px;font-weight:700;color:#10B981">' + correct + '</div><div style="font-size:11px;color:var(--gray-500);margin-top:2px">Correct</div></div>' +
          '<div><div style="font-size:28px;font-weight:700;color:#EF4444">' + (total - correct) + '</div><div style="font-size:11px;color:var(--gray-500);margin-top:2px">Wrong</div></div>' +
          '<div><div style="font-size:28px;font-weight:700;color:var(--black)">' + total + '</div><div style="font-size:11px;color:var(--gray-500);margin-top:2px">Total</div></div>' +
        '</div>' +
        speedHtml +
        certNoticeHtml +
        '<div style="display:flex;gap:10px;margin-top:20px">' + btnsHtml + '</div>' +
      '</div>' +
    '</div>';

  // Inject modal ke body
  var existing = document.getElementById('quiz-result-modal');
  if (existing) existing.remove();
  document.body.insertAdjacentHTML('beforeend', modalHtml);
}

function closeQuizModal() {
  var m = document.getElementById('quiz-result-modal');
  if (m) m.remove();
}

/* ══════════════════════════════════════════════════════════════
   DARK MODE
══════════════════════════════════════════════════════════════ */

function toggleDarkMode() {
  var isDark = document.body.classList.toggle('dark-mode');
  localStorage.setItem('lms_dark_mode', isDark ? '1' : '0');
  _syncDarkModeButtons(isDark);
}

function _syncDarkModeButtons(isDark) {
  // Sync semua tombol toggle di semua topbar
  document.querySelectorAll('.dm-toggle, #dm-toggle-btn, #dm-tb').forEach(function(btn) {
    btn.textContent = isDark ? '☀️' : '🌙';
  });
  var sw = document.getElementById('m-dm-switch');
  if (sw) sw.checked = isDark;
}

function applyDarkModePreference() {
  var saved = localStorage.getItem('lms_dark_mode');
  var isDark = saved === '1';
  if (isDark) document.body.classList.add('dark-mode');
  _syncDarkModeButtons(isDark);
}

/* ══════════════════════════════════════════════════════════════
   KONFETI — C4
══════════════════════════════════════════════════════════════ */

function showKonfeti() {
  var overlay = document.getElementById('confetti-overlay');
  if (!overlay) return;
  overlay.innerHTML = '';
  overlay.classList.add('show');

  var colors = ['#C9A065','#F5D78E','#fff','#E8C97A','#FFD700','#FFA500'];
  var count  = 80;

  for (var i = 0; i < count; i++) {
    (function(i) {
      var piece = document.createElement('div');
      piece.className = 'confetti-piece';
      piece.style.left     = Math.random() * 100 + 'vw';
      piece.style.top      = '-10px';
      piece.style.background = colors[Math.floor(Math.random() * colors.length)];
      piece.style.width    = (Math.random() * 8 + 6) + 'px';
      piece.style.height   = (Math.random() * 8 + 6) + 'px';
      piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '2px';
      piece.style.animationDuration  = (Math.random() * 2 + 1.5) + 's';
      piece.style.animationDelay     = (Math.random() * 0.8) + 's';
      overlay.appendChild(piece);
    })(i);
  }

  setTimeout(function() {
    overlay.classList.remove('show');
    overlay.innerHTML = '';
  }, 3500);
}

/* ══════════════════════════════════════════════════════════════
   AI INTELLIGENCE CARD — inject ke Dashboard, Reports, ActLog, HoD
   Fetch report terbaru dari getAIReport lalu build card HTML
   Dipanggil setelah render halaman selesai — non-blocking
   v2.60: parse JSON structured dari Gemini (format v1.3)
══════════════════════════════════════════════════════════════ */

// Cache report supaya tidak fetch berkali-kali dalam satu sesi
var _aiReportCache = null;
var _aiReportFetching = false;

/* v2.104 — dua perbaikan pada pengambilan laporan:

   1. Dulu callback TIDAK pernah dipanggil kalau laporan kosong atau
      permintaan gagal, sehingga kartunya hilang begitu saja tanpa
      penjelasan. Sekarang callback(null) tetap dipanggil supaya
      kartu pengganti bisa tampil.

   2. Dulu `if (_aiReportFetching) return;` membuang pemanggil kedua
      sepenuhnya — kalau dua kartu diminta hampir bersamaan, yang
      kedua tidak pernah terisi. Sekarang antrean disimpan. */
var _aiPending = [];

function _fetchAIReport(callback) {
  if (_aiReportCache) { callback(_aiReportCache); return; }
  if (_aiReportFetching) { _aiPending.push(callback); return; }

  _aiReportFetching = true;
  var sid = sessionStorage.getItem('lms_session_id');
  if (!sid) { _aiReportFetching = false; callback(null); return; }

  var finish = function(data) {
    _aiReportFetching = false;
    if (data) _aiReportCache = data;
    try { callback(data); } catch (e) { console.error(e); }
    var q = _aiPending; _aiPending = [];
    q.forEach(function(cb) { try { cb(data); } catch (e) { console.error(e); } });
  };

  google.script.run
    .withSuccessHandler(function(r) {
      finish(r && r.success && r.data ? r.data : null);
    })
    .withFailureHandler(function() { finish(null); })
    .getAIReport(sid, null);
}

/* Parse JSON structured dari content string Gemini v1.3
   Return parsed object atau null jika gagal / format lama */
function _parseAIJSON(content) {
  if (!content) return null;
  // Strip markdown code fences jika ada
  var s = content.replace(/^```json\s*/i, '').replace(/\s*```$/, '').trim();
  try {
    var obj = JSON.parse(s);
    // Validasi field wajib ada
    if (obj && obj.executive_summary && obj.department_analysis) return obj;
    return null;
  } catch (e) {
    return null;
  }
}

/* Build HTML AI card — type: 'weekly'|'dept'|'audit'|'hod'
   Mendukung JSON structured (v1.3) dan plain text (fallback) */
/* ═══════════════════════════════════════════════════════════
   CANGKANG KARTU AI — v2.104

   Sebelumnya kepala kartu (ikon + judul + badge) ditulis dua kali di
   _buildAICard: sekali untuk format JSON, sekali untuk format lama.
   Menambah collapse dan penanda kesegaran berarti mengerjakannya dua
   kali. Sekarang satu cangkang.
═══════════════════════════════════════════════════════════ */

var AI_STALE_HOURS = 48;   /* lewat ini, kesegaran ditandai peringatan */
var _aiCardSeq = 0;

/* Selisih waktu jadi kalimat pendek: "6 hours ago", "3 days ago". */
function _aiAgeLabel(generatedAt) {
  if (!generatedAt) return { text: '', stale: false, unknown: true };
  var t = null;
  try {
    var norm = String(generatedAt).trim().replace(' ', 'T');
    t = new Date(norm);
    if (isNaN(t.getTime())) t = new Date(String(generatedAt));
  } catch (e) { t = null; }
  if (!t || isNaN(t.getTime())) return { text: '', stale: false, unknown: true };

  var mins = Math.floor((Date.now() - t.getTime()) / 60000);
  if (mins < 0)  mins = 0;                    /* jam perangkat meleset */
  var stale = mins > AI_STALE_HOURS * 60;

  var txt;
  if (mins < 2)         txt = 'just now';
  else if (mins < 60)   txt = mins + ' minutes ago';
  else if (mins < 120)  txt = 'an hour ago';
  else if (mins < 1440) txt = Math.floor(mins / 60) + ' hours ago';
  else {
    var d = Math.floor(mins / 1440);
    txt = (d === 1) ? 'yesterday' : d + ' days ago';
  }
  return { text: txt, stale: stale, unknown: false };
}

/* Halaman AI Report hanya ada di menu admin dan observer.
   HoD tidak punya, jadi kartunya tidak boleh dibuat seolah bisa diklik. */
function _aiCanOpenReport() {
  try {
    var role = (_lmsUser && _lmsUser.role) || '';
    var key  = (role === 'IT_ADMIN' || role === 'ADMIN') ? 'admin'
             : (role === 'OBSERVER' || role === 'OWNER' || role === 'DIRECTOR') ? 'observer'
             : (role === 'HOD') ? 'hod' : 'employee';
    var items = NAV_CONFIG[key] || [];
    for (var i = 0; i < items.length; i++) {
      if (items[i] && items[i].page === 'aireport') return true;
    }
    return false;
  } catch (e) { return false; }
}

/* v2.120 Phase A2 — default diubah jadi TERTUTUP. Sebelumnya
   default terbuka dengan alasan "ruang desktop cukup" -- tapi di
   layar laptop kecil / window tidak full-screen, card ini memakan
   ruang vertikal besar sebelum 6 stat card sempat terlihat, padahal
   angka operasional itu yang dicari duluan (speed of operation >
   decoration). User masih bisa expand manual, dan pilihannya tetap
   diingat lewat sessionStorage seperti sebelumnya -- hanya nilai
   AWAL (belum pernah diset) yang berubah dari terbuka ke tertutup. */
function _aiCollapsed() {
  try {
    var v = sessionStorage.getItem('lms_ai_collapsed');
    return v === null ? true : v === '1';
  }
  catch (e) { return true; }
}

function toggleAICard(id) {
  var body = document.getElementById(id + '-body');
  if (!body) return;
  var collapse = body.style.display !== 'none';   /* keadaan SESUDAH ditekan */

  /* Semua kartu AI di halaman ini ikut, supaya tidak campur aduk */
  var bodies = document.querySelectorAll('.ai-card-body');
  for (var i = 0; i < bodies.length; i++) bodies[i].style.display = collapse ? 'none' : '';

  var peeks = document.querySelectorAll('.ai-peek');
  for (var j = 0; j < peeks.length; j++) peeks[j].style.display = collapse ? '' : 'none';

  var tgls = document.querySelectorAll('.ai-tgl');
  for (var k = 0; k < tgls.length; k++) {
    tgls[k].innerHTML = collapse ? '&#x2304;' : '&#x2303;';
    tgls[k].title     = collapse ? 'Expand' : 'Collapse';
  }

  try { sessionStorage.setItem('lms_ai_collapsed', collapse ? '1' : '0'); } catch (e) {}
}

/* Rakit kartu: kepala (judul + kesegaran + collapse) lalu badan. */
function _aiCardShell(label, report, bodyHtml, peekHtml) {
  var id  = 'aicard-' + (++_aiCardSeq);
  var age = _aiAgeLabel(report && report.generated_at);
  var col = _aiCollapsed();

  var freshHtml = '';
  if (age.unknown) {
    freshHtml = '<span class="ai-fresh">—</span>';
  } else if (age.stale) {
    freshHtml = '<span class="ai-fresh stale" title="This report has not refreshed for a while. Check the daily trigger.">&#9888;&#65039; ' + age.text + '</span>';
  } else {
    freshHtml = '<span class="ai-fresh">Generated ' + age.text + '</span>';
  }

  var openable = _aiCanOpenReport();
  var openHtml = openable
    ? '<button class="ai-open" onclick="event.stopPropagation();goTo(\'aireport\')" title="Open the full AI Report">Full report &#8594;</button>'
    : '';

  return '<div class="ai-card" style="margin-bottom:24px">' +
      '<div class="ai-card-header">' +
        '<div class="ai-card-icon">&#129302;</div>' +
        '<div class="ai-card-label">' + label + '</div>' +
        freshHtml +
        openHtml +
        '<button class="ai-tgl" id="' + id + '-tgl" onclick="toggleAICard(\'' + id + '\')" ' +
          'title="' + (col ? 'Expand' : 'Collapse') + '">' + (col ? '&#x2304;' : '&#x2303;') + '</button>' +
      '</div>' +
      /* Saat tertutup, satu baris ringkasan tetap terlihat */
      (peekHtml ? '<div class="ai-peek" id="' + id + '-peek"' +
                  (col ? '' : ' style="display:none"') + '>' + peekHtml + '</div>' : '') +
      '<div class="ai-card-body" id="' + id + '-body"' + (col ? ' style="display:none"' : '') + '>' +
        bodyHtml +
      '</div>' +
    '</div>';
}

function _buildAICard(report, type, deptFilter) {
  var label = '';
  if      (type === 'weekly') label = 'AI Intelligence — Weekly Summary';
  else if (type === 'dept')   label = 'AI Intelligence — Department Analysis';
  else if (type === 'audit')  label = 'AI Intelligence — Course Quality Audit';
  else if (type === 'hod')    label = 'AI Intelligence — ' + (deptFilter || 'Department') + ' Summary';

  var rawContent = report ? (report.content || report.summary || '') : '';

  /* v2.104 — kartu TETAP tampil walau laporan belum ada.
     Sebelumnya mengembalikan '' sehingga kartunya lenyap tanpa jejak,
     dan tidak ada cara membedakan "belum dibuat" dari "gagal dimuat". */
  if (!rawContent) {
    var emptyBody =
      '<div class="ai-summary">No AI report available yet.</div>' +
      '<div class="ai-row"><div class="ai-dot amber"></div><div>' +
        'Reports are generated automatically every morning. If this stays empty, ' +
        'check that the daily trigger is installed and the Gemini key is set.' +
      '</div></div>';
    return _aiCardShell(label, report, emptyBody, 'No report yet — waiting for the next run.');
  }

  var parsed = _parseAIJSON(rawContent);

  // ── FORMAT v1.3: JSON structured ──
  if (parsed) {
    var exec   = parsed.executive_summary || {};
    var depts  = parsed.department_analysis || [];
    var actions = parsed.top_3_actions || [];

    // Summary text
    var summaryHtml = '<div class="ai-summary">' + escHtml(exec.summary || '') + '</div>';

    // 3 dot rows: positive (green), critical (red), watch (amber)
    var dotsHtml = '';
    if (exec.positive) dotsHtml += '<div class="ai-row"><div class="ai-dot green"></div><div><strong style="color:rgba(255,255,255,0.95)">Positive:</strong> ' + escHtml(exec.positive) + '</div></div>';
    if (exec.critical) dotsHtml += '<div class="ai-row"><div class="ai-dot red"></div><div><strong style="color:rgba(255,255,255,0.95)">Critical:</strong> ' + escHtml(exec.critical) + '</div></div>';
    if (exec.watch)    dotsHtml += '<div class="ai-row"><div class="ai-dot amber"></div><div><strong style="color:rgba(255,255,255,0.95)">Watch:</strong> ' + escHtml(exec.watch) + '</div></div>';

    // Dept breakdown — max 3 ditampilkan di dashboard card
    var deptHtml = '';
    depts.slice(0, 3).forEach(function(d) {
      var dotCls = d.status === 'Critical' ? 'red' : d.status === 'Review' ? 'amber' : 'green';
      deptHtml += '<div class="ai-row"><div class="ai-dot ' + dotCls + '"></div>' +
        '<div><strong style="color:rgba(255,255,255,0.95)">' + escHtml(d.dept) + ':</strong> ' + escHtml(d.detail || '') + '</div></div>';
    });

    // Recommended actions
    var recHtml = '';
    if (actions.length > 0) {
      recHtml = '<div class="ai-rec"><div class="ai-rec-label">📋 Recommended Actions This Week</div>' +
        '<div class="ai-rec-text">' +
        actions.map(function(a, i) { return (i + 1) + '. ' + escHtml(a); }).join('&nbsp;&nbsp;') +
        '</div></div>';
    }

    return _aiCardShell(
      label, report,
      summaryHtml + dotsHtml +
        (deptHtml ? '<div style="margin-top:4px">' + deptHtml + '</div>' : '') +
        recHtml,
      escHtml(exec.summary || '')          /* baris yang tetap terlihat saat tertutup */
    );
  }

  // ── FALLBACK: plain text (format lama) ──
  var lines = rawContent.split('\n').filter(function(l) { return l.trim(); });
  var mainText = '';
  var insights = [];
  var recText  = '';

  lines.forEach(function(line) {
    var t = line.trim();
    if (t.match(/^(rekomendasi|prioritas|action|langkah)/i)) {
      recText = t;
    } else if (t.match(/^[\*\-•]\s*\*\*(.*?)\*\*/)) {
      var m = t.match(/^[\*\-•]\s*\*\*(.*?)\*\*:?\s*(.*)/);
      if (m) {
        var dotCls = 'green';
        if (t.toLowerCase().indexOf('tidak ada') >= 0 || t.toLowerCase().indexOf('rendah') >= 0) dotCls = 'red';
        else if (t.toLowerCase().indexOf('perlu') >= 0 || t.toLowerCase().indexOf('mencurigakan') >= 0) dotCls = 'amber';
        insights.push({ cls: dotCls, title: m[1], desc: m[2] });
      }
    } else if (!mainText && t.length > 20) {
      mainText = t.replace(/\*\*/g, '');
    }
  });
  if (!mainText) mainText = lines.slice(0, 2).join(' ').replace(/\*\*/g, '').substring(0, 200);

  var insightHtml = insights.slice(0, 3).map(function(ins) {
    return '<div class="ai-row"><div class="ai-dot ' + ins.cls + '"></div>' +
      '<div><strong style="color:rgba(255,255,255,0.95)">' + escHtml(ins.title) + ':</strong> ' + escHtml(ins.desc) + '</div></div>';
  }).join('');

  var fallbackRecHtml = recText
    ? '<div class="ai-rec"><div class="ai-rec-label">📋 Recommended Actions</div><div class="ai-rec-text">' + escHtml(recText) + '</div></div>'
    : '';

  return _aiCardShell(
    label, report,
    '<div class="ai-summary">' + escHtml(mainText) + '</div>' + insightHtml + fallbackRecHtml,
    escHtml(mainText)
  );
}

/* Inject AI card ke element.
   - Jika id mengandung '-slot' → overwrite innerHTML (div slot kosong)
   - Jika tidak → prepend setelah firstChild (tidak overwrite konten) */
function injectAICard(contentId, type, deptFilter) {
  _fetchAIReport(function(report) {
    var el = document.getElementById(contentId);
    if (!el) return;
    var cardHtml = _buildAICard(report, type, deptFilter);
    if (!cardHtml) return;   /* hanya kalau tipe tidak dikenal */
    if (contentId.indexOf('-slot') !== -1) {
      el.innerHTML = cardHtml;
    } else {
      var wrapper = document.createElement('div');
      wrapper.innerHTML = cardHtml;
      var firstChild = el.firstElementChild;
      if (firstChild) {
        el.insertBefore(wrapper.firstElementChild, firstChild.nextElementSibling || firstChild);
      } else {
        el.appendChild(wrapper.firstElementChild);
      }
    }
  });
}

/* ─────────────────────────────────────────────────────────────
   INIT — panggil saat halaman selesai load
───────────────────────────────────────────────────────────── */
window.addEventListener('load', function() {
  restoreSession();
});

</script>
  <!-- Konfeti overlay -->
  <div class="confetti-overlay" id="confetti-overlay"></div>


<!-- ================================================================
     MFB-IT — lapisan perbaikan UI/UX.

     Sengaja di luar berkas ini supaya baseline v2.144 tetap utuh:
     keutuhan itulah yang menjamin tampilan tidak meleset, dan yang
     membuat rilis GAS berikutnya bisa ditarik hanya dengan menyalin
     ulang berkasnya.

     Cinzel = huruf judul "DOOR PRIZE SYSTEMS" di navbar Spin
     Roulette, diminta IT Manager untuk judul "LEARNING MANAGEMENT
     SYSTEM". Sejak v2.186 hurufnya di-host sendiri dan dimuat
     bersama Inter lewat /fonts.css di head, jadi sudah siap
     sebelum lapisan ini dibaca.

     Membatalkan SELURUH perubahan tampilan = hapus baris-baris di
     bawah ini. Tidak ada jejak lain yang tertinggal.
     ================================================================ -->
<link rel="stylesheet" href="mfb-ui.css">
<script src="mfb-ui.js"></script>
</body>
</html>