<!--
================================================================
MFB-IT — Miss Fish IT Daily Activity System
HTML · CSS · JavaScript · Supabase Edge Function
IT Department · Miss Fish Bali
Version   : 2.25
Generated : 24 September 2026, 23:15:00 WITA
================================================================

PERUBAHAN DARI v2.24 — ROUTINE QUICK-FILL, SYNC BADGE, SHIFT HANDOVER & TELEGRAM DIGEST
================================================================

Fitur baru operasional restoran & kelancaran tugas harian IT Miss Fish Bali:
  1. OPSI A — TELEGRAM DIGEST OTOMATIS:
     Penjadwal pg_cron di Supabase (MFB-IT_v1.7.sql) mengirim rekap:
       - Harian (04:00 WITA): ringkasan pekerjaan kemarin
       - Ops Meeting (Selasa 04:00 WITA): rekap mingguan Rabu..Selasa
       - Bulanan (tgl 2 04:30 WITA): evaluasi bulan lalu
     Divalidasi aman terhadap zona waktu WITA (UTC+8).
  2. OPSI B — ROUTINE CHECKLIST CHIPS:
     Bar horizontal 1-tap quick fill untuk tugas rutin harian IT:
       - POS & Kitchen Printers (Hardware, Priority High, Status Done)
       - Sound & DJ Booth (Entertainment, Priority Med, Status Done)
       - Guest & Staff WiFi (Network, Priority Med, Status Done)
       - CCTV & NVR Storage (CCTV, Priority Med, Status Done)
       - EDC & QRIS Settlement (POS, Priority High, Status Done)
  3. OPSI D — RESTAURANT IT ENHANCEMENTS:
     - Visual Network Status & Sync Queue Pill di Header (Online/Offline)
       dengan auto-sync queue saat koneksi internet kembali.
     - Switch "Shift Handover / Urgent Note" di form Task untuk menandai
       pekerjaan penting pergantian shift tanpa mengubah skema database.
================================================================

Dilaporkan pengguna 8 Sep 2026 dari desktop:
  1. "ketika milih vendor ga bisa dipilih tanggalnya"
  2. "pas buka awal di desktop masi error gitu"

Yang BEDA di rilis ini dari semua rilis sebelumnya: ketiga bug
diverifikasi di Chrome sungguhan lewat Playwright — computed style
dan geometri layout diukur, bukan disimpulkan dari membaca kode.
Itu ternyata menentukan, karena satu di antaranya adalah bug yang
LOLOS TIGA RILIS dengan tes yang LULUS setiap kali.

BUG 1 — perbaikan bottom nav desktop v2.21 TIDAK PERNAH BERJALAN

  Ini temuan yang paling perlu diakui terus terang. v2.21 mengaku
  memperbaiki bottom nav desktop. Terukur di browser: TIDAK.

  Penyebabnya cascade:
      @media (min-width: 620px) {  <- baris ~1088
        .nav { position: absolute; ... }
      }
      ...
      .nav { position: fixed; ... }  <- baris ~1953

  Media query TIDAK menambah spesifisitas. Keduanya bernilai satu
  class, jadi yang menang hanya yang ditulis BELAKANGAN — aturan
  dasar. Computed position tetap "fixed" walau media query aktif.

  Yang membuatnya sulit terlihat: border-radius di blok yang sama
  TETAP berlaku, karena aturan dasar tidak menyebut properti itu.
  Cascade bekerja PER-PROPERTI, jadi perbaikannya tampak setengah
  jalan — sudutnya bulat, tapi posisinya salah.

  Terukur, sebelum diperbaiki (viewport 929x861):
      kartu : 272..657   (lebar 386)
      nav   : 205..725   (lebar 520)  -> menonjol 134px

  Perbaikan: selektornya jadi #app .nav — spesifisitas (1 id +
  1 class) mengalahkan .nav (1 class) TANPA bergantung urutan.
  Dipilih daripada memindahkan blok media query 40 baris ke bawah,
  karena memindahkan CSS berisiko mengubah perilaku aturan lain di
  dalamnya; mengubah satu selektor tidak.

  Diverifikasi .nav MEMANG keturunan #app dan #app sudah
  position:relative, jadi absolute benar berpatokan ke kartu.

BUG 2 — kartu desktop menyusut jadi 386px, bukan 520px

  Ini akar visual yang sebenarnya di screenshot pengguna. Nav-nya
  tidak salah lebar; KARTUNYA yang terlalu sempit.

  Sebabnya: body jadi display:flex di desktop, sehingga #app
  berubah jadi FLEX ITEM. Flex item dengan flex-basis:auto dan
  tanpa width diukur dari ISINYA — jadi max-width:520px cuma jadi
  batas atas yang tidak pernah tercapai. Terukur: width 385,75px.

  Akibatnya .nav, .sheet, dan .toast (semuanya 520px, di-center ke
  viewport) jadi lebih lebar dari kartunya.

  Perbaikan: width:100% pada #app di media query desktop, dijepit
  max-width jadi tepat 520px.

BUG 3 — tanggal tidak bisa dipilih di desktop

  Yang diukur lebih dulu, sebelum menyimpulkan apa pun:
    - klik MEMANG jatuh ke <input type="date"> di SEMUA titik baris
      (tengah baris, tengah ikon, tepi kanan) -> hit-testing DOM
      tidak salah, bukan soal z-index
    - markup & CSS "Follow up on" IDENTIK dengan field "Date"
    - showPicker() tersedia di peramban ini

  Jadi sebabnya perilaku native, bukan kode kita: di Chrome
  DESKTOP, mengklik badan input date TIDAK membuka kalender. Yang
  membukanya HANYA tombol ::-webkit-calendar-picker-indicator di
  tepi kanan input. Karena .date-row menyembunyikan input dengan
  opacity:0, tombol itu ikut tak terlihat — dan ikon SVG yang
  dilihat pengguna berada 17px dari tepi kanan baris (terukur),
  hampir tidak menimpa tombol aslinya.

  Di Android, mengetuk input date membuka picker dari mana saja —
  itu sebabnya bug ini tidak pernah muncul selama app dipakai di
  HP, dan baru terasa begitu dibuka di desktop.

  Kenapa field "Date" terasa berfungsi padahal kodenya sama:
  nilainya SUDAH diisi otomatis saat init (dan bisa diisi AI
  parse), jadi pengguna praktis tidak pernah perlu mengkliknya.

  Perbaikan: showPicker() lewat listener DELEGASI di document.
  Delegasi dipilih karena satu date-row DIBUAT ULANG dinamis di
  sheet edit Riwayat (#rwEditDate) — listener per elemen akan
  hilang setiap sheet dibuat ulang. Satu perbaikan menutup KELIMA
  date-row: taskDate, vendorFollowup, reportStart, reportEnd,
  rwEditDate. Dua yang di tab Laporan bahkan tidak punya ikon
  kalender sama sekali, jadi di desktop lebih tidak mungkin lagi
  diklik — ikut terperbaiki.

KOREKSI KESALAHAN v2.21 YANG DITEMUKAN SEKALIAN

  v2.21 juga membuat .sheet, .sheet-backdrop, .toast, dan
  .update-banner jadi position:absolute, dengan komentar bahwa
  keempatnya "ikut kartu". Itu SALAH: diverifikasi di browser,
  keempatnya SAUDARA #app, bukan keturunannya (app.contains ==
  false, tidak punya satu pun induk berposisi). Absolute membuatnya
  berpatokan ke DOKUMEN — tergeser dan ikut ter-scroll.

  Aturan itu selamat HANYA karena kalah cascade seperti .nav. Bug
  cascade itu kebetulan melindungi app dari kesalahan ini — dan
  begitu cascade nav diperbaiki, aturan itu akan aktif dan merusak.
  Karena itu DIHAPUS sekarang, bukan dibiarkan. Keempatnya tetap
  position:fixed, yang memang benar untuk elemen di luar kartu.

  Sisa yang TIDAK diperbaiki, dicatat apa adanya: pada layar lebih
  TINGGI dari 880px, sheet/toast tetap menempel dasar viewport
  sementara kartu berhenti di 880px. Memperbaikinya butuh
  memindahkan elemen itu KE DALAM #app — perubahan struktur yang
  menyentuh z-index dan perilaku scroll sheet. Risikonya lebih
  besar daripada masalahnya, dan tidak ada laporan pengguna. Nav —
  satu-satunya yang benar-benar dilaporkan — sudah beres karena ia
  memang anak #app.

  Dua aturan lagi dihapus karena KODE MATI (ditemukan cekcascade.js
  pada perbaikan v2.24 yang baru ditulis, bukan pada kode lama):
    .sheet border-radius       nilainya sama persis dengan aturan
                               dasar, jadi tidak pernah berpengaruh
    .update-banner padding-top aturan dasar memakai max(var(--sp-3),
                               env(safe-area-inset-top)); di desktop
                               env()-nya 0, hasilnya sudah sama
  Diverifikasi di browser: penghapusan keduanya memberi NOL
  perubahan nilai computed.

TEMUAN KE-4 — dari sapuan audit browser seluruh app (10 Sep 2026)

  Setelah tiga bug di atas beres, seluruh app disapu di browser di
  3 ukuran layar x 2 mode, karena pelajaran rilis ini adalah bahwa
  alat statis memberi rasa aman yang salah. Hasilnya:

    Layout      BERSIH. Nol scroll horizontal, nol elemen meluap
                keluar kartu, di 390 / 929 / 1400, light & dark.
    Target      Nol di bawah 24px (standar AA proyek ini). Yang
    sentuh      terkecil #themeToggle 28px. 43 target diperiksa.
    Error JS    NOL saat app dibuka.
    Kontras     Hanya 11 tempat --muted yang SENGAJA dibiarkan
                (keputusan Opsi C user), plus satu temuan nyata:

  .picker-chevron = 2,78:1 di light mode — GAGAL bahkan untuk
  ambang ikon 3:1. Ini mengoreksi klaim saya sendiri: saat
  mengajukan opsi kontras saya menyatakan 4 pemakaian --muted
  "adalah ikon/dekoratif yang ambangnya 3:1, jadi lolos". Chevron
  ini salah satunya, dan ternyata tidak lolos. Diperbaiki ke
  --meta-text (light 4,78 / dark 5,12). Lihat catatan di aturan
  .picker-chevron.

  DUA FALSE POSITIVE dari alat audit saya sendiri, keduanya
  tertangkap karena diuji ulang dan TIDAK dilaporkan sebagai bug:

    .sr-only kontras 1,08  -> teks screen-reader, pola
                              visually-hidden (terender 0x0,
                              clip rect(0,0,0,0)). Memang tidak
                              dimaksudkan terlihat.
    BUTTON.nb meluap 15px  -> artefak audit SAYA: membuka kelima
                              view sekaligus membuat dokumen bisa
                              di-scroll, scrollbar menyusutkan #app
                              jadi 375 sementara nav yang fixed
                              tetap 390. Dengan muat ulang BERSIH:
                              #app 390 = viewport = nav. Nol bug.

  Dicatat karena pola kegagalannya sama dengan "84 id hilang" pada
  checkids.js: daftar temuan yang panjang dan berisi nama nyata
  terasa seperti temuan sungguhan. Yang membedakan hanya satu
  kebiasaan — uji ulang sebelum melaporkan.

ALAT BARU — cekcascade.js

  Dibuat karena bug 1. sim21.js LULUS tiga rilis padahal nav tetap
  fixed, sebab ia memeriksa bahwa TEKS "position: absolute;" ADA di
  dalam blok media query. Teksnya memang ada. Pencocokan teks
  memeriksa KEBERADAAN, bukan EFEK.

  cekcascade.js memeriksa EFEK secara statis: untuk setiap properti
  yang dideklarasikan di dalam @media, apakah ada aturan lain
  dengan selektor sama, spesifisitas >=, dan posisi LEBIH BAWAH
  yang mendeklarasikan properti yang sama.

  Uji sensitivitas: dijalankan ke MFB-IT_v2.23.html menemukan 7
  override mati — sama persis dengan yang diukur browser. Di v2.24
  hasilnya bersih.

  sim21.js juga diperketat: asersi nav sekarang MEWAJIBKAN selektor
  #app .nav, dan asersi sheet/toast DIBALIK (dulu menguji perilaku
  yang salah). Diuji: LULUS di v2.24, GAGAL 5 temuan di v2.23.

  Seluruh alat verifikasi DIPINDAH ke folder verifikasi/ di project.
  Sebelumnya tinggal di direktori temp sistem dan berulang kali
  hilang dibersihkan antar sesi — sim.js, sim13, sim14, sim17,
  sim19, checkids.js, x.js semuanya pernah hilang. Lihat
  verifikasi/CARA-PAKAI.md.

VALIDASI (SOP 8.5)
  node --check                JS LULUS
  cekcascade.js               CASCADE SEHAT (v2.23: 7 override mati)
  checkids.js                 152 id, nol yang dirujuk tapi hilang
  audit.js                    nol class mati, nol fungsi mati
  cekwarna.js                 WARNA INLINE AMAN
  sim20/21/23/23b             LULUS
  Chrome sungguhan (Playwright), 3 ukuran viewport:
    929x861   kartu 520 · nav absolute & sejajar persis · sheet
              tetap fixed · showPicker terpanggil tanpa error pada
              KLIK NYATA
    1400x1050 nav menempel dasar KARTU (965), 85px di atas dasar
              viewport — kasus yang perbaikan v2.21 seharusnya
              tangani dan tidak pernah bisa
    390x844   MOBILE nol regresi: nav kembali fixed selebar layar,
              kartu selebar layar, picker tetap jalan
  Nol error JavaScript saat app dibuka. Dua error console yang
  muncul saat uji lokal adalah CORS dari 127.0.0.1 — itu BENAR,
  Edge Function memang hanya mengizinkan https://anabhidev.com.

NOL PERUBAHAN SERVER. Ketiga bug murni di sisi HTML.
================================================================

NAMA FILE DI PROJECT CLOUDFLARE : index.html

PASANGAN WAJIB
  Edge Function v1.18 (MFB-IT_v1.18.ts) — BELUM di-deploy.
  DEPLOY FUNCTION DULU, baru file ini. Urutan tidak boleh dibalik.

  SQL: MFB-IT_v1.7.sql (penjadwal digest Telegram) dijalankan
  SETELAH function v1.18 naik. Bukan prasyarat file ini — tanpa SQL
  itu, app tetap jalan penuh; hanya digest terjadwal yang belum
  aktif.

CATATAN VERSI
  Yang LIVE per 8 Sep 2026: v1.15 + v2.16. Versi 2.17-2.23 tidak
  pernah di-deploy; seluruh isinya termasuk di file ini.

  Karena itulah bug bottom nav desktop yang dilaporkan 8 Sep 2026
  masih terlihat: v2.21 (yang mengaku memperbaikinya) belum pernah
  naik. TAPI itu bukan satu-satunya sebab — terukur di browser,
  perbaikan v2.21 itu memang TIDAK BERFUNGSI karena kalah cascade.
  Jadi meng-upload v2.21 pun tidak akan menyelesaikannya. Baru
  v2.24 ini yang benar-benar memperbaikinya. Lihat BUG 1 di atas.

  Kalau file ini ter-upload lebih dulu sementara function masih
  versi lama, tab "AI Report" DISEMBUNYIKAN sendiri (gerbang
  serverAtLeast(1, 17)) — tidak ada tombol yang pasti error. Pola
  degradasi yang sama dipakai pencarian riwayat sejak v1.13.

PERUBAHAN DARI v2.22 — AI INTELLIGENCE REPORT (UI)
================================================================

  Seluruhnya ADITIF. Nol fungsi lama yang diubah perilakunya, nol
  handler lama yang dihapus. Yang disentuh dari kode lama hanya
  empat titik, semuanya berupa CABANG TAMBAHAN:

    setReportMode()          + cabang 'ai'
    currentReportRange()     + cabang 'ai'
    applyServerCapabilities() + gerbang serverAtLeast(1, 17)
    .report-filter (CSS)     + flex-wrap

  1. Mode ke-4 di tab Report: "AI Report".

     Empat pilihan periode: This week / Last week / This month /
     Last month. MINGGUAN SENIN–MINGGU.

     Ini SENGAJA berbeda dari rekap Ops Meeting yang Rabu–Selasa.
     Keduanya hidup berdampingan sebagai dua mode terpisah karena
     menjawab dua pertanyaan berbeda: yang satu periode kalender,
     yang satu menutup satu siklus meeting. Menyatukan keduanya
     akan membuat salah satunya salah. opsWeekRange() TIDAK
     disentuh sama sekali.

  2. Toggle bahasa EN/ID, default EN. Pilihannya disimpan di
     localStorage supaya tidak perlu diatur ulang tiap kali.

     Yang berpindah bahasa adalah ISI LAPORAN dan JUDUL BAGIANNYA,
     bukan antarmuka. Kalau judul bagian tetap Inggris sementara
     isinya Indonesia, hasil salinan ke WhatsApp jadi campur dua
     bahasa dalam satu pesan.

  3. Bentuk berbagian, sesuai permintaan ("berbagian aja kak"):
     headline, Summary, Highlights, Needs attention, Vs previous
     period, Recommendations.

  4. Angka mentah dari server ditampilkan DI BAWAH narasi.

     Ini bukan hiasan. Seluruh angka dihitung server; AI hanya
     merangkai kalimat dan prompt-nya melarang menghitung. Dengan
     angka aslinya ada di layar yang sama, kekeliruan AI menyebut
     sesuatu bisa langsung terlihat — bukan cuma dipercaya.

  5. Perbandingan dengan periode sebelumnya selalu dikirim, dan
     panjangnya selalu sama dengan periode sekarang (pekan vs
     pekan, bulan penuh vs bulan penuh). Kalau periode pembanding
     kosong, server mengirim null dan AI dilarang mengklaim tren.

  6. "Copy report for WhatsApp" — teks polos, tanpa markdown yang
     tidak dikenali WhatsApp. Tombolnya BARU MUNCUL setelah ada
     laporan yang benar-benar tampil, jadi tidak pernah ada tombol
     salin tanpa isi.

  7. "Saved reports" — membaca kembali laporan yang sudah pernah
     dibuat dari activity_log. Membaca laporan pekan lalu tidak
     perlu membakar kuota Gemini lagi.

  8. Memilih tab AI TIDAK langsung memanggil AI (beda dari mode Ops
     week yang langsung memuat). Alasannya biaya: satu panggilan
     Gemini per klik tab akan terbakar hanya karena pengguna
     melihat-lihat. AI dipanggil hanya oleh tombol Generate.

  9. Show / Download Excel / Official Report / Copy for Google
     Sheets otomatis ikut memakai periode AI yang dipilih, karena
     currentReportRange() sudah jadi satu-satunya sumber rentang
     sejak v2.19. Nol tombol yang perlu diubah.

 10. Tab mode Report jadi 2x2 (flex-wrap + basis 50%).

     Alasannya bukan selera: dengan empat tab dalam satu baris, di
     layar 360px setiap tab hanya kebagian ~76px sementara label
     "Date range" butuh ~84px — setiap label pecah jadi dua baris
     dengan tinggi tidak seragam. Ini perubahan tampilan yang
     DISENGAJA pada mode yang sudah ada, bukan efek samping.

 11. Warna: .air-note dan .air-saved-meta memakai var(--mid), BUKAN
     var(--muted) yang biasa untuk teks sekunder.

     var(--muted) masih 3,01:1 di light dan 3,91:1 di dark — gagal
     WCAG AA, dan keputusan soal token itu masih menunggu jawaban.
     Fitur baru sengaja TIDAK menambah kombinasi yang gagal.
     Seluruh warna baru di v2.23 sudah dihitung dan lolos AA di
     KEDUA mode; yang terendah 4,82:1 (--mid di atas --bg).

 12. Seluruh isi dari AI melewati escapeHtml sebelum masuk
     innerHTML — termasuk headline, tiap butir daftar, judul
     bagian, chip angka, dan pesan error dari server. Keluaran
     model adalah masukan tak terpercaya seperti masukan pengguna.

DUA KEPUTUSAN USER 2 SEP 2026 — dikerjakan di rilis yang sama
================================================================

 13. KONTRAS --muted: dipilih OPSI C dari tiga opsi yang diajukan.

     Masalahnya (temuan audit, bukan laporan pengguna): var(--muted)
     hanya 3,01:1 di light dan 3,91:1 di dark — gagal WCAG AA 4,5:1
     di 14 tempat yang berisi teks konten.

     Menggelapkan --muted itu sendiri (opsi A) memang patuh AA di
     semuanya, TAPI nilainya harus jadi #636E7C yang nyaris sama
     dengan --mid #5C6B7A (5,18 vs 5,47). Beda "muted vs mid"
     praktis hilang dan seluruh app terasa lebih berat. Itu
     keputusan desain, bukan perbaikan yang jelas benar — jadi
     ditawarkan ke user lebih dulu (SOP 8.11), bukan diputuskan
     sendiri.

     Yang dikerjakan: token BARU --meta-text dengan nilai per mode,
     dipakai HANYA di tiga tempat yang benar-benar dibaca untuk
     mengambil keputusan:

       .summary-label   label di bawah angka Dashboard. Inilah yang
                        memberi ARTI pada angkanya — angka tanpa
                        label yang terbaca sama dengan angka tanpa
                        arti.
       .ws-col-date     kolom Date di History, kolom yang paling
                        sering dibaca di tabel itu.
       .ws-col-id       kolom Task ID, dipakai saat merujuk satu
                        task ke orang lain.

     Nilainya berlawanan arah per mode karena latarnya berlawanan:
       light #636E7C : card 5,18 · bg 4,57 · field 4,78
       dark  #8A96A3 : card 5,68 · bg 6,42 · field 5,12
     Lolos AA di keenam kombinasi, dan hierarkinya tetap terjaga —
     masih jelas lebih terang dari --mid di light, lebih gelap di
     dark.

     --muted SENGAJA dibiarkan apa adanya. Sebelas tempat lain
     (jam di Log, hint form, pesan kosong, dst) masih di bawah AA:
     itu keputusan user yang sadar, bukan kelalaian.

 14. TOMBOL MIKROFON DIHAPUS.

     Bukan karena ada bug yang belum diperbaiki — perbaikan dari
     sisi kode memang sudah habis:

       v2.13  menambah permintaan izin eksplisit sebelum mulai.
       v2.15  menemukan akar masalah yang sebenarnya: `await
              navigator.permissions.query()` dipanggil SEBELUM
              getUserMedia, dan await itu menghabiskan "transient
              user activation" dari ketukan tombol — sehingga
              Chrome Android menolak dengan NotAllowedError TANPA
              PERNAH memunculkan dialog izin. Diperbaiki:
              getUserMedia dipindah ke paling depan. Pesan error
              juga dibedakan per sebab.

     Dua screenshot dari user membuktikan situsnya BUKAN diblokir —
     ia belum pernah DITANYA: halaman Permissions anabhidev.com
     hanya memuat Notifications & Local network, dan Site settings
     > Microphone tidak punya daftar per-situs sama sekali.

     Sisanya di luar kendali kode ini: Web Speech API di Chrome
     Android bergantung layanan Google dan izin tingkat OS. Tidak
     ada tweak yang bisa MENJAMIN — itu disampaikan apa adanya ke
     user, bukan dijanjikan bisa.

     Tombol yang ditekan lalu gagal terasa seperti app-nya rusak.
     Untuk app yang dipakai tiap hari, itu lebih merugikan
     daripada tidak ada tombol.

     Dihapus di 4 lapis, diverifikasi nol rujukan tersisa sebelum
     dihapus (SOP 8.7): tombol #micBtn di markup · 5 aturan CSS
     .mic-btn + @keyframes micPulse · 195 baris JS (recog/recogOn,
     ensureMicPermission, bukaPanduanMikrofon, setupVoiceInput) ·
     pemanggilnya di init.

     TIDAK ikut terhapus: kotak Free write dan "Parse with AI"
     (doAiParse + action 'parse-task') utuh. Itu jalur utamanya
     sejak awal; mikrofon hanya salah satu cara mengisi kotak yang
     sama. Nol perubahan server — Web Speech berjalan di peramban
     dan tidak pernah menyentuh Edge Function.

     Kalau suatu saat mau dihidupkan lagi: kodenya utuh di
     arsip/MFB-IT_v2.22.html, cari "FITUR: INPUT SUARA".

VALIDASI YANG DIJALANKAN (SOP 8.5)
  node --check                     JS LULUS
  node --experimental-strip-types  TS LULUS (brace 434:434)
  CSS brace seimbang, komentar HTML 25:25
  checkids.js   nol id dirujuk yang tidak ada
  audit.js      nol class mati, nol fungsi mati
  ceksql.js     LULUS
  cekai.js      LULUS — 6 nama bagian laporan sama PERSIS di tiga
                tempat: bentuk yang diminta prompt, yang
                dinormalkan server, dan yang dirender client.
  cekwarna.js   nol kombinasi gagal BARU
  sim23.js      113 cek (Senin–Minggu untuk ketujuh hari acuan,
                batas bulan, batas tahun, kabisat 2028/2000/1900,
                pemisahan dari Ops week)
  sim23b.js      64 cek (kontras --meta-text di 6 kombinasi,
                tepat 3 tempat yang dipindah, mikrofon terhapus
                tuntas di 4 lapis, Free write tetap utuh)
  regresi       sim(45) sim13(36) sim14(61) sim17(34) sim19(58)
                sim20(58) sim21(40) — semuanya LULUS

  TOTAL 530 cek LULUS, 0 gagal.

  ENAM ALAT DIPERKUAT di rilis ini, masing-masing menutup celah
  yang nyata (bukan celah hipotetis):

    ceksql.js    dulu hanya memeriksa kolom di .select(). Kolom di
                 .eq/.gte/.lte/.order tidak pernah diperiksa,
                 padahal .eq("kolom") yang tidak ada menghasilkan
                 error 400 yang sama dengan bug "Failed to load
                 activity log". Sekarang 33 kolom penyaring ikut
                 diperiksa.

    cekwarna.js  dulu hanya membaca isi blok CSS. Bug v2.20 memakai
                 style="color:var(--navy)" sebagai ATRIBUT, jadi
                 tidak pernah masuk pemeriksaan — lolos berkali-kali
                 bukan karena hitungannya salah, tapi karena
                 tempatnya tidak pernah dilihat. Dibuktikan: alat
                 yang sudah diperkuat menemukan bug v2.20 yang ASLI
                 saat dijalankan ke arsip/MFB-IT_v2.19.html
                 (--navy 1,13:1 dan --red 2,83:1 di dark mode).
                 Di v2.23 hasilnya AMAN.

    sim23b.js    cara membuang komentar HTML dengan satu regex lazy
                 ternyata bisa MENELAN markup yang terselip antara dua
                 komentar berdempetan. Percobaan pertama melaporkan tab
                 AI Report "hilang" padahal ada. Sekarang dibuang per
                 pasangan dari kiri.

    komentar.js  MODUL BARU, dipakai bersama oleh audit.js,
                 cekwarna.js, sim20, sim21, sim23, sim23b.

                 Sebelumnya keenam alat masing-masing punya SALINAN
                 kode pembuang komentar dan pengambil blok CSS. Karena
                 disalin, kesalahannya juga tersalin — dan diperbaiki
                 di satu alat tidak memperbaiki yang lima lainnya.

                 Dua celah nyata yang ditutup:

                 (a) Blok CSS diambil dengan indexOf mentah mencari
                     tag pembuka style. Kata itu bisa muncul DI DALAM
                     komentar header, dan indexOf menemukan yang di
                     komentar LEBIH DULU — blok CSS terambil dari
                     titik yang salah, isinya ratusan baris prosa,
                     dan alat melaporkan kelas yang sudah dihapus
                     "masih dipakai". Sekarang komentar dibuang lebih
                     dulu, dan fungsinya MELEMPAR kalau hasilnya
                     mencurigakan (< 50 aturan) — bukan diam-diam
                     salah.

                 (b) Blok media query dipotong dengan menebak pola
                     baris kosong. Begitu isi blok berubah, tebakan
                     meleset dan tes melaporkan .nav absolute
                     "hilang" padahal masih ada. Sekarang batasnya
                     DIHITUNG dengan mencocokkan kurung kurawal.

                 Dibuktikan dengan uji kekebalan: kata pemicu
                 disisipkan sengaja ke dalam komentar file uji.
                 Cara lama membaca .mic-btn sebagai kelas hidup;
                 cara baru tidak, dan kelas nyata tetap terbaca.

  CATATAN PENTING untuk siapa pun yang menyunting header ini:
  JANGAN menuliskan penanda struktural secara literal di dalam
  header — penutup komentar HTML, maupun tag pembuka style.

  Ini bukan aturan hipotetis. Percobaan pertama menulis keduanya
  apa adanya, dan akibatnya: penutup komentar MENUTUP header ini
  lebih awal di baris 240, sehingga 250 baris sisanya dibaca
  sebagai KODE — tiga simulasi lalu melaporkan .mic-btn dan
  editStatus "masih ada" padahal keduanya hanya DIKUTIP di
  penjelasan.

  Butuh tiga langkah salah arah untuk menemukannya: disangka
  urutan pembuangan komentar, lalu disangka pasangan komentar
  berdempetan, ternyata header ini sendiri yang rusak. Dicatat
  supaya tidak ada yang mengulangi jalur itu.

  Tulis "tag pembuka style" atau "blok CSS" sebagai kata, jangan
  sebagai penandanya.

BELUM DIUJI DI PERANGKAT NYATA
  Jalur Gemini dan Telegram tidak bisa diuji dari sini: keduanya
  butuh kunci yang hanya ada di environment Supabase. Yang sudah
  dibuktikan adalah aritmatika tanggal, bentuk permintaan, gerbang
  versi, dan escaping. Panggilan AI-nya sendiri baru terbukti
  setelah dicoba di HP.

================================================================
CATATAN v2.22 - v2.17 (belum pernah di-deploy) — TETAP BERLAKU
================================================================

PERUBAHAN DARI v2.21
================================================================

  1. rwDraft dibersihkan saat layar PIN muncul (logout / sesi habis).

     Ditemukan saat audit menyeluruh, bukan dari laporan pengguna.
     Draft edit hidup di modul-level supaya tahan saat sheet dibuka
     ulang — tapi itu juga berarti ia BERTAHAN melewati logout.

     Gejalanya kalau dibiarkan: sesi habis saat sheet edit terbuka,
     pengguna login ulang, membuka task yang sama, dan perubahan lama
     muncul lagi. Terasa seperti sudah tersimpan padahal tidak pernah
     terkirim ke server. Jenis kesalahan yang paling berbahaya:
     data terlihat benar tapi sebenarnya tidak ada di database.

     Sekarang draft dibuang di 4 jalan keluar: setelah simpan, setelah
     hapus, saat sheet ditutup lewat backdrop, dan saat layar PIN
     muncul.

NOL PERUBAHAN SERVER.
================================================================

================================================================
CATATAN v2.21 - v2.17 (belum pernah di-deploy) — TETAP BERLAKU
================================================================

NAMA FILE DI PROJECT CLOUDFLARE : index.html

PASANGAN WAJIB
  Edge Function v1.16 (MFB-IT_v1.16.ts) — BELUM di-deploy.
  Deploy FUNCTION DULU, baru file ini.

CATATAN VERSI
  Yang LIVE per 2 Sep 2026: v1.15 + v2.16. Versi 2.17-2.20 tidak
  pernah di-deploy; seluruh isinya termasuk di file ini.

PERUBAHAN DARI v2.20 — 2 BUG DARI UJI DI HP & DESKTOP
================================================================

BUG 1 — ubah Status di Riwayat lalu Save: yang tersimpan nilai LAMA

  Dilaporkan pengguna: status Done diubah ke On Progress, ditekan
  Save, tapi yang tersimpan tetap Done.

  Ini BUKAN bug yang sama dengan v2.20. v2.20 memperbaiki sheet yang
  menutup sendiri. Yang ini lebih dalam: closure.

  Akar masalahnya:
    1. openRiwayatDetail() menyimpan nilai edit di variabel LOKAL
       (editStatus, editActivity, editWorkType, editAssetId).
    2. Empat picker memanggil openRiwayatDetail(idx) di dalam onPick
       supaya nilai barunya terlihat di layar.
    3. Memanggil fungsi itu lagi MEMBUAT CLOSURE BARU — variabelnya
       dibuat ulang dari `it`, yaitu data LAMA dari server.
    4. Tombol Save yang aktif setelah itu milik closure BARU.
       Pilihan pengguna tertinggal di closure lama yang sudah mati.

  Petunjuk yang mengungkapnya: Priority BISA diedit. Handler-nya
  adalah satu-satunya yang TIDAK memanggil openRiwayatDetail — ia
  hanya menyetel variabel dan menukar kelas CSS. Perbedaan itulah
  yang menunjukkan bahwa masalahnya bukan pada "simpan", melainkan
  pada pemanggilan ulang.

  Perbaikan: seluruh nilai edit dipindah ke rwDraft — objek yang
  hidup DI LUAR openRiwayatDetail. Draft hanya diisi ulang kalau task
  yang dibuka BERBEDA dari draft tersimpan, jadi membuka ulang sheet
  untuk task yang sama tidak pernah menimpa pilihan yang berjalan.

  Ini menghapus seluruh KELAS bug tersebut, bukan menambal satu
  picker: Status, Day type, Work type, dan Asset semuanya terkena
  masalah yang sama.

  Ikut diamankan: teks Description & Remark dan input Date sekarang
  juga tersimpan ke draft saat diketik. Sebelumnya mengetik lalu
  membuka picker akan mengembalikan teksnya ke versi server —
  ketikan pengguna hilang tanpa peringatan apa pun.

  Draft dibuang setelah simpan, setelah hapus, dan saat sheet
  ditutup lewat backdrop. Kalau tidak, perubahan yang TIDAK disimpan
  akan muncul lagi saat task itu dibuka berikutnya — dan itu terasa
  seperti data sudah tersimpan padahal belum.

BUG 2 — bottom nav rusak di desktop

  Di layar >= 620px, #app berubah jadi KARTU setinggi maks 880px yang
  di-center. Tapi .nav memakai position:fixed; bottom:0 — patokannya
  VIEWPORT, bukan kartu. Jadi nav melayang terlepas dari app-nya, dan
  latar #DCE2E8 terlihat di antara keduanya.

  Perbaikan: di dalam media query desktop, .nav jadi position:absolute
  relatif ke #app (yang sudah position:relative), menempel ke dasar
  kartu. Sudut bawah dibulatkan mengikuti border-radius kartu, dan
  safe-area-inset dinolkan karena desktop tidak punya gesture bar.

  Elemen fixed lain ikut diperbaiki dengan alasan yang sama: .sheet,
  .sheet-backdrop, .toast, dan .update-banner. Tanpa itu, toast akan
  muncul di dasar layar sementara app-nya di tengah.

  left:50% + translateX(-50%) pada .sheet dan .toast TIDAK perlu
  diubah — setelah jadi absolute, patokannya #app yang lebarnya sama
  dengan --app-w, jadi hasilnya tetap benar.

  NOL perubahan untuk mobile: semua aturan ini hanya hidup di dalam
  @media (min-width: 620px).

NOL PERUBAHAN SERVER. Kedua bug murni di sisi HTML.
================================================================

================================================================
CATATAN v2.20 - v2.17 (belum pernah di-deploy) — TETAP BERLAKU
================================================================

NAMA FILE DI PROJECT CLOUDFLARE : index.html

PASANGAN WAJIB
  Edge Function v1.16 (MFB-IT_v1.16.ts) — BELUM di-deploy.
  Deploy FUNCTION DULU, baru file ini.

CATATAN VERSI
  Yang LIVE per 1 Sep 2026: v1.15 + v2.16. Versi 2.17, 2.18, dan 2.19
  tidak pernah di-deploy — seluruh isinya sudah termasuk di file ini.
  Rekap Ops Meeting (v2.19) sudah dikonfirmasi berfungsi oleh pengguna.

PERUBAHAN DARI v2.19 — 3 BUG DARI UJI DI HP
================================================================

BUG 1 — tombol "Save changes" tidak terbaca di dark mode

  Penyebab: tombolnya memaksa warna lewat style inline
  style="color:var(--navy)". Token --navy SENGAJA tidak ikut berubah
  di dark mode karena dipakai sebagai LATAR solid (header & nav).
  Saat dipakai sebagai TEKS di dark mode, hasilnya gelap di atas
  gelap: kontras 1,13:1. Praktis tidak terlihat sama sekali.

  Perbaikan: dua token baru dengan nilai BERBEDA PER MODE —
  --action-text dan --danger-text. Ini bukan pilihan gaya: sudah
  diuji bahwa TIDAK ADA satu warna hex yang lolos AA di kedua mode,
  karena latarnya berlawanan (light #F4F6F8 vs dark #1E2530).
    --action-text  light 16,01:1  ·  dark 12,99:1
    --danger-text  light  5,02:1  ·  dark  5,36:1

  Warna tombol kini datang dari KELAS (.btn-primary-action), bukan
  style inline — supaya tidak bisa lagi lolos dari audit kontras.

BUG 1b — 8 pemakaian var(--red) lain yang juga gagal, belum dilaporkan

  Audit menyeluruh SETIAP token teks terhadap SETIAP permukaan di
  kedua mode menemukan var(--red) gagal AA di dark mode di mana pun
  ia dipakai sebagai teks: field 2,83:1 · card 3,14:1 · bg 3,56:1 ·
  di atas tint merah 2,86:1.

  Tombol "Delete this task" masih samar-samar terbaca, jadi
  kegagalannya tidak pernah dilaporkan — tapi tetap gagal. Ikut
  diperbaiki: .btn-logout, .ws-chip.critical, .log-badge.danger,
  .summary-card.alert, .ops-late, .photo-clear, .tpl-chip-del,
  .mic-btn.rec, dan hint vendor-overdue di sheet.
  Sekarang NOL pemakaian var(--red) sebagai warna teks/ikon.

  #E8776F dipilih setelah diuji di SELURUH latar gelap yang benar-
  benar dipakai — field 5,36 · card 5,94 · bg 6,72 · tint 5,40 —
  bukan hanya di satu tempat lalu diasumsikan aman di tempat lain.

BUG 2 — pilih Status di Riwayat: sheet langsung menutup sendiri

  Ini bukan "gagal simpan". Sheet-nya DITUTUP OLEH KODENYA SENDIRI.

  Penyebab: app hanya punya SATU elemen sheet yang dipakai bersama,
  dan openOptionSheet SELALU memanggil closeSheet() setelah onPick.
  Di sheet Riwayat, onPick memanggil openRiwayatDetail() supaya nilai
  status yang baru terlihat. Urutannya jadi:
      onPick     -> sheet dibuka ulang berisi detail task
      closeSheet -> MENUTUP sheet yang baru saja dibuka itu
  Pengguna memilih status, sheet berkedip, lalu hilang — belum sempat
  menekan "Save changes".

  Perbaikan: nomor urut sheet (sheetGen) dinaikkan setiap openSheet.
  openOptionSheet mencatat nomornya SEBELUM onPick; kalau setelah
  onPick nomornya berubah, berarti onPick sudah membuka sheet baru —
  jangan ditutup. Kalau tidak berubah (picker di form Input), tutup
  seperti biasa. Perilaku lama dipertahankan penuh untuk kasus itu.
  Diuji 4 skenario termasuk picker bersarang 2 tingkat.

BUG 3 — di Riwayat hanya bisa edit 3 field

  Sebelumnya hanya Description, Priority, dan Status. Padahal
  update-task di server SUDAH menerima taskDate, activityType,
  workType, dan remark sejak lama — yang belum ada hanya UI-nya.

  Ditambahkan 4 field: Date, Day type, Work type, Remark.
  Salah tanggal adalah kesalahan input paling umum (lupa ganti
  tanggal saat mencatat kerjaan kemarin), dan sebelumnya satu-satunya
  jalan memperbaikinya adalah hapus lalu input ulang dari nol.
  Salah Day type juga langsung mempengaruhi angka "Work tasks" dan
  "% Done" di Dashboard serta rekap Ops.

  Tanggal hanya dikirim kalau bentuknya sah (YYYY-MM-DD): input date
  yang dikosongkan mengembalikan string kosong, dan kolom bertipe
  date di Postgres menolak itu.

  Foto TETAP tidak bisa diganti dari edit — keputusan desain v1.14:
  mengganti lampiran bukti setelah tersimpan mengaburkan jejak.

NOL PERUBAHAN SERVER. Ketiga bug murni di sisi HTML.

CATATAN PROSES
  Bug 1 lolos berkali-kali karena kontras selalu dihitung untuk warna
  BARU yang ditambahkan, tapi tidak pernah untuk kombinasi LAMA yang
  sudah ada di file. Sekarang ada alat yang memeriksa setiap token
  teks x setiap permukaan x kedua mode sekaligus — itulah yang
  menemukan bug 1b yang belum pernah dilaporkan siapa pun.
================================================================

================================================================
CATATAN v2.19 - v2.17 (belum pernah di-deploy) — TETAP BERLAKU
================================================================

NAMA FILE DI PROJECT CLOUDFLARE : index.html

PASANGAN WAJIB
  Edge Function v1.16 (MFB-IT_v1.16.ts) — BELUM di-deploy.
  Deploy FUNCTION DULU, baru file ini.

CATATAN VERSI
  v2.17 dan v2.18 TIDAK PERNAH di-deploy. Seluruh isinya termasuk di
  file ini. Yang live per 1 Sep 2026 masih v2.16.

  ⚠️ Termasuk perubahan angka "% Done" dari 15% ke 33%. Baca catatan
  v2.17 di bawah sebelum deploy kalau angka lama pernah dilaporkan.

PERUBAHAN DARI v2.18 — FITUR BARU: REKAP OPS MEETING
================================================================

Operation Weekly Meeting berlangsung setiap SELASA. Rekap ini menutup
rentang RABU s/d SELASA — 7 hari, tanpa tumpang tindih antar minggu.

A. KENAPA RABU, BUKAN SELASA-KE-SELASA
  Kalau Selasa lalu ikut dihitung, rentangnya jadi 8 hari dan
  aktivitas hari Selasa itu MUNCUL DUA KALI — di rekap minggu lalu
  dan di rekap minggu ini. Yang terjadi pada hari meeting sebelumnya
  sudah dibahas saat meeting itu berlangsung.
  Dipilih bersama pengguna; diuji: rentang minggu lalu selalu
  berakhir tepat SEBELUM rentang minggu ini dimulai.

B. PATOKANNYA SELASA BERIKUTNYA, BUKAN SELASA TERAKHIR
  Termasuk hari ini kalau hari ini Selasa. Alasannya praktis: rekap
  disiapkan SEBELUM meeting — Senin malam atau Selasa pagi. Kalau
  memakai Selasa terakhir yang sudah lewat, membukanya hari Senin
  akan menampilkan periode yang rekapnya sudah dipakai minggu lalu.
  Diuji dari ketujuh hari dalam seminggu: rentangnya selalu 7 hari
  dan selalu mulai hari Rabu.

C. DI MANA
  Tab Report, mode ke-3 di sebelah "By month" dan "Date range":
  "Ops week". Sengaja BUKAN tab baru di bottom nav — SOP kategori 16
  membatasi bottom nav maksimal 5 tab, dan tab ke-6 membuat target
  sentuh terlalu sempit. Rekap ini juga dipakai sekali seminggu,
  sementara Input dipakai tiap hari; memberinya ruang navigasi
  permanen tidak sepadan.

  Rentangnya DIHITUNG OTOMATIS — tidak ada tanggal yang perlu diisi.
  Ada tombol < > untuk melihat minggu-minggu sebelumnya. Tombol ">"
  mati saat sudah di minggu terdekat: datanya belum ada.

D. ISINYA — HANYA TASK
  Sesuai permintaan pengguna, DIBUANG dari rekap:
    - baris hari libur (status kosong: Day Off / Leave / Holiday)
    - task berstatus Cancelled

  Tiga kelompok, dan sengaja TIDAK saling tumpang tindih:
    DONE            status Done
    IN PROGRESS     status On Progress + Pending
    WAITING VENDOR  status Waiting Vendor

  "Waiting Vendor" dipisah dari "in progress" meskipun sama-sama
  belum selesai. Alasannya untuk ruang meeting: yang satu "sedang
  saya kerjakan", yang satu "nunggu orang lain" — dan yang kedua itu
  yang perlu DITAGIH, bukan dijelaskan.

  Bagian WAITING VENDOR menampilkan nama vendor, tanggal janji, dan
  penanda "LATE Nd" untuk follow-up yang sudah lewat tanggal. Ini
  memakai kolom vendor_overdue yang sudah dihitung database sejak
  MFB-IT_v1.6.sql tapi belum pernah dipakai untuk apa pun.
  Di akhir rekap ada satu baris peringatan jumlah yang telat.

E. DUA CARA PAKAI
  1. Dibaca langsung di layar — rekapnya dirender berkelompok di tab
     Report, jadi bisa dibacakan saat meeting tanpa disalin dulu.
  2. Tombol "Copy recap for WhatsApp" — teks polos siap tempel ke
     grup ops. Tanpa markdown/tabel: WhatsApp tidak merender tabel,
     dan tanda bintang untuk tebal justru berisik di tempat yang
     tidak mendukungnya.

  Tombol Download Excel, Official Report, dan Copy for Google Sheets
  yang sudah ada OTOMATIS ikut memakai rentang minggu ini saat mode
  Ops week aktif — nol perubahan pada ketiganya, karena semuanya
  membaca currentReportRange() yang sama.

F. PERIODE YANG BELUM TUNTAS DINYATAKAN
  Kalau rekap dibuka di tengah periode (mis. hari Kamis, meeting
  Selasa depan), rekapnya menyebut "period still in progress" beserta
  tanggal batas datanya. Supaya angkanya tidak dibaca sebagai hasil
  akhir minggu.

G. NOL PERUBAHAN SERVER
  Seluruh fitur ini memakai action get-report yang sudah ada dengan
  rentang tanggal bebas. MFB-IT_v1.16.ts tidak disentuh.
================================================================

================================================================
CATATAN v2.18 & v2.17 (belum pernah di-deploy) — TETAP BERLAKU
================================================================

NAMA FILE DI PROJECT CLOUDFLARE : index.html

PASANGAN WAJIB
  Edge Function v1.16 (MFB-IT_v1.16.ts) — BELUM di-deploy.
  Deploy FUNCTION DULU, baru file ini.

CATATAN VERSI
  v2.17 TIDAK PERNAH di-deploy. Seluruh isinya termasuk di file ini,
  jadi tidak ada yang hilang. v2.18 = v2.17 + bersih-bersih kode mati.

  ⚠️ SELURUH catatan v2.17 di bawah tetap berlaku — termasuk
  perubahan angka "% Done" dari 15% ke 33%. Baca bagian itu sebelum
  deploy kalau angka lama pernah dilaporkan ke manajemen.

PERUBAHAN DARI v2.17 — BERSIH-BERSIH, NOL PERUBAHAN PERILAKU
================================================================

Semua yang dihapus di bawah ini sudah diverifikasi otomatis TIDAK
pernah dipakai: nol di markup, nol di string JS, nol di querySelector.
Bukti sebelum/sesudah dijalankan dengan alat yang sama:
  SEBELUM : 8 kelas CSS mati, 2 fungsi JS mati
  SESUDAH : 0 kelas mati, 0 fungsi mati

A. KELAS CSS YANG DIHAPUS (8)
  Seluruhnya sisa tampilan History versi lama yang berbentuk daftar
  kartu. Sejak digantikan renderWorksheetTable (kelas .ws-*), tidak
  satu pun pernah dipasang lagi.
    .riwayat-item   (didefinisikan DUA KALI — duplikat ikut dibersihkan)
    .riwayat-top    .riwayat-id     .riwayat-date
    .riwayat-task   .riwayat-meta   .riwayat-chip (+ 3 pengubah warna)
    .ai-badge       .scroll-inner.centered

  .riwayat-head dan .riwayat-empty TETAP dipakai, jadi tidak disentuh.

  Catatan soal .ai-badge: warnanya var(--amber) yang hanya 3,64:1 di
  atas putih — gagal AA untuk teks 10px. Jadi kelas itu memang tidak
  layak dihidupkan, bukan sekadar kebetulan tidak terpakai.

B. FUNGSI JS YANG DIHAPUS (2)
    chipClassForPriority()   chipClassForStatus()
  Keduanya mengembalikan kelas .riwayat-chip yang sudah tidak ada, dan
  tidak pernah dipanggil dari mana pun. Penggantinya wsChipClassPriority
  dan wsChipClassStatus yang memang dipakai tabel worksheet.

C. YANG SENGAJA TIDAK DIHAPUS
  id="pinLogo" pada logo layar PIN. Memang tidak dirujuk kode mana pun,
  tapi menghapus atribut dari markup tidak memberi keuntungan apa pun
  sementara tetap ada risikonya. Dibiarkan, dan dicatat di sini supaya
  audit berikutnya tahu ini sudah ditinjau, bukan terlewat.

D. KENAPA KODE MATI PERLU DIBERESKAN
  Bukan soal ukuran file — 168 karakter tidak berarti apa-apa. Yang
  berbahaya adalah kode mati yang MASIH TERLIHAT BENAR: fungsi
  chipClassForStatus mengembalikan nama kelas yang sudah tidak ada,
  jadi siapa pun yang memakainya di kemudian hari akan mendapat chip
  tanpa gaya sama sekali — tanpa error, tanpa peringatan.
================================================================

================================================================
CATATAN v2.17 (belum pernah di-deploy) — TETAP BERLAKU
================================================================

NAMA FILE DI PROJECT CLOUDFLARE : index.html

PASANGAN WAJIB
  Edge Function v1.16 (MFB-IT_v1.16.ts). Deploy FUNCTION DULU.
  MFB-IT_v1.6.sql sudah dijalankan 28 Aug 2026 — tidak perlu diulang.

CATATAN VERSI
  v2.16 di-deploy 28 Aug 2026 dan berjalan baik (tab Log & History
  sudah benar). v2.17 melanjutkan dari sana.

PERUBAHAN DARI v2.16
================================================================

⚠️ ANGKA "% Done" BERUBAH — INI DISENGAJA, BUKAN BUG

  Nilai lama SALAH dan selalu meremehkan capaian. Pembaginya adalah
  JUMLAH SELURUH BARIS, termasuk Day Off / Public Holiday / Leave
  yang status-nya kosong. Hari libur ikut menekan persentase.

  Data nyata pengguna, Agustus 2026:
    13 baris · 2 Done · 4 Open · 7 baris hari libur
    LAMA : 2 / 13 = 15%
    BARU : 2 /  6 = 33%   <- terhadap task yang benar-benar ada

  Selisihnya lebih dari dua kali lipat, dan arahnya SELALU merugikan:
  makin sering libur tercatat, makin rendah angkanya terlihat. Kalau
  angka lama pernah dilaporkan ke manajemen, angka baru akan tampak
  "melonjak" — padahal yang berubah cuma cara hitungnya, bukan
  kinerjanya. SOP 8.11: perubahan ini dikomunikasikan lebih dulu dan
  disetujui pengguna sebelum dikerjakan.

A. ANGKA YANG DIPERBAIKI
  1. Kartu "Total task" -> "Work tasks" (hanya baris yang punya
     status). Hari libur pindah ke kartu tersendiri "Off days" di
     bagian Show more.
  2. Kartu Done kini menampilkan PECAHAN: "2/6" dengan label
     "Done · 33%". Pembagi yang terlihat tidak bisa menyesatkan —
     kalau suatu saat salah lagi, langsung ketahuan tanpa membongkar
     kode.
  3. Ringkasan tab Report ikut diperbaiki dengan cara yang sama.
     Di sana tidak ada tanda persen, tapi "Total task" bersebelahan
     dengan "Done" — pembaca tetap membagi keduanya di kepala.
     Ditambah baris keterangan "+ N off days (not counted as tasks)"
     supaya selisih dengan jumlah baris tabel punya penjelasan.

B. ANGKA YANG BISA DITINDAKLANJUTI
  4. Kartu "Oldest open" kini MENYEBUT NAMA TASK-nya, bukan cuma
     "10d". Angka umur saja memunculkan pertanyaan "task yang mana?"
     dan memaksa pengguna mencari sendiri di History.
  5. Kartu "Open" dan "Oldest open" BISA DIKETUK -> membuka History
     dalam mode "open tasks": semua task yang masih terbuka, TANPA
     batas 7 hari, urut paling tua dulu. Batas 7 hari dilepas karena
     justru task tertua yang paling perlu ditindaklanjuti — dengan
     batas lama, task 10 hari malah tidak akan muncul.
     Ada penanda mode + tombol "Back to last 7 days".
     Keduanya diberi chevron supaya terlihat bisa ditekan; fitur yang
     bisa diketuk diam-diam tidak akan pernah ditemukan.

C. DATA YANG SUDAH ADA TAPI BELUM DIPAKAI
  6. Kartu "Vendor overdue" — memakai kolom vendor_overdue yang sudah
     dihitung database sejak MFB-IT_v1.6.sql tapi belum pernah
     ditampilkan. Kartunya HANYA muncul kalau memang ada yang telat;
     kartu peringatan yang selalu menampilkan 0 lama-lama diabaikan.

D. BATASAN YANG DILEPAS
  7. Dashboard tidak lagi terkunci ke bulan berjalan. Ada tombol
     bulan sebelumnya / berikutnya. Tombol "next" mati saat sudah di
     bulan berjalan. Sebelumnya, setiap tanggal 1 Dashboard kosong
     melompong tanpa cara melihat bulan yang baru saja selesai —
     justru saat rekap bulanan paling dibutuhkan.
     Pergeseran bulan menetapkan tanggal ke 1 lebih dulu, supaya
     mundur dari tanggal 31 tidak melompati satu bulan penuh.

E. CHART HARIAN JADI JUJUR
  8. Batang dipisah dua tumpukan: Work (navy) dan Off (brass).
     Sebelumnya hari libur digambar setinggi 1 — persis sama dengan
     hari kerja yang menyelesaikan satu task. Secara visual, libur
     terlihat seperti produktivitas. Legend dinyalakan karena begitu
     ada dua warna, tanpa keterangan warnanya cuma jadi tebakan.

F. DEGRADASI AMAN (SOP 8.8)
  Perbaikan angka TIDAK menunggu server: kalau Edge Function masih
  < v1.16, workTotal dihitung ulang di HP dari items — hasilnya sama.
  Yang butuh v1.16 hanya mode "open tasks"; kalau server lama,
  ketukan kartu tetap membuka History, hanya isinya belum tersaring.
  Tab Report memakai label lama saat server belum mengirim workTotal —
  lebih baik istilah lama daripada memberi nama baru pada angka yang
  belum berubah artinya.
================================================================
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="theme-color" content="#08090C">
<title>Miss Fish — IT Daily Activity</title>
<meta name="description" content="Internal daily activity log, task management, and automated operational intelligence for the IT Department of Miss Fish Bali.">
<!-- App internal ber-PIN: sengaja TIDAK diindeks mesin pencari. -->
<meta name="robots" content="noindex, nofollow">
<link rel="canonical" href="https://missfish-itm-daily-task.pages.dev/">

<!-- ── GEO Location (Badung, Bali) ────────────────────────── -->
<meta name="geo.region" content="ID-BA">
<meta name="geo.placename" content="Badung, Bali">
<meta name="geo.position" content="-8.670458;115.160139">
<meta name="ICBM" content="-8.670458, 115.160139">

<!-- ── PWA & Favicon (Dark Obsidian #08090C) ──────────────── -->
<link rel="manifest" href="manifest.json">
<link rel="icon" href="favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="icons/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16.png">
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon-180.png">
<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="IT Daily">

<!-- ── Open Graph / WhatsApp Link Preview (Dark Obsidian #08090C) ── -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="Miss Fish Bali">
<meta property="og:title" content="Miss Fish — IT Daily Activity System">
<meta property="og:description" content="Internal daily activity log, task management, and automated operational intelligence for the IT Department of Miss Fish Bali.">
<meta property="og:url" content="https://missfish-itm-daily-task.pages.dev/">
<meta property="og:image" content="https://missfish-itm-daily-task.pages.dev/icons/og-images.jpg">
<meta property="og:image:secure_url" content="https://missfish-itm-daily-task.pages.dev/icons/og-images.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 — IT Daily Activity System">
<meta property="og:locale" content="en_ID">

<!-- ── Twitter Card ───────────────────────────────────────── -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Miss Fish — IT Daily Activity System">
<meta name="twitter:description" content="Internal daily activity log, task management, and automated operational intelligence for the IT Department of Miss Fish Bali.">
<meta name="twitter:image" content="https://missfish-itm-daily-task.pages.dev/icons/og-images.jpg">

<!-- ── Technical SEO & GEO 2026: Schema.org JSON-LD (@graph) ─ -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "WebSite",
      "@id": "https://missfish-itm-daily-task.pages.dev/#website",
      "url": "https://missfish-itm-daily-task.pages.dev/",
      "name": "Miss Fish — IT Daily Activity System",
      "description": "Internal daily activity log, task management, and automated operational intelligence for the IT Department of Miss Fish Bali.",
      "inLanguage": "en-US",
      "publisher": {
        "@id": "https://missfish-itm-daily-task.pages.dev/#organization"
      }
    },
    {
      "@type": "Organization",
      "@id": "https://missfish-itm-daily-task.pages.dev/#organization",
      "name": "Miss Fish Bali",
      "url": "https://anabhidev.com/MFB/",
      "logo": "https://missfish-itm-daily-task.pages.dev/icons/icon-any-512.png",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "Jl. Raya Semat No.88, Tibubeneng",
        "addressLocality": "Kuta Utara, Badung",
        "addressRegion": "Bali",
        "postalCode": "80361",
        "addressCountry": "ID"
      },
      "contactPoint": {
        "@type": "ContactPoint",
        "email": "itm@missfishbali.com",
        "contactType": "IT Support"
      }
    },
    {
      "@type": "WebApplication",
      "@id": "https://missfish-itm-daily-task.pages.dev/#webapp",
      "url": "https://missfish-itm-daily-task.pages.dev/",
      "name": "MFB-IT Daily Activity System",
      "softwareVersion": "2.25",
      "applicationCategory": "BusinessApplication",
      "operatingSystem": "All",
      "browserRequirements": "Requires JavaScript. Requires HTML5.",
      "offers": {
        "@type": "Offer",
        "price": "0",
        "priceCurrency": "USD"
      }
    }
  ]
}
</script>

<style>
:root {
  --navy:    #0B1B2E;
  --navy2:   #14273D;
  --brass:   #C9A84C;
  --bg:      #EEF1F4;
  --card:    #FFFFFF;
  --ink:     #12181F;
  --mid:     #5C6B7A;
  --muted:   #8A96A3;
  --line:    #E6E9ED;
  --field:   #F4F6F8;
  --red:     #C0392B;
  --amber:   #B7791F;

  /* v2.20 — DUA TOKEN BARU, satu nilai per mode.

     Kenapa perlu token, bukan satu warna hex: tidak ADA satu warna
     yang lolos AA di kedua mode sekaligus, karena latarnya berlawanan
     (light #F4F6F8 vs dark #1E2530). Sudah diuji: #C0392B dapat
     5,02:1 di light tapi cuma 2,83:1 di dark; #E8776F sebaliknya.
     Jadi satu-satunya jalan yang benar adalah nilai per mode.

     --action-text : teks tombol aksi utama di atas permukaan card/field.
       Sebelumnya tombol "Save changes" memaksa var(--navy) lewat style
       inline. --navy SENGAJA tidak ikut dark mode (dipakai sebagai
       LATAR solid header & nav), jadi saat dipakai sebagai TEKS di
       dark mode hasilnya gelap-di-atas-gelap: 1,13:1. Praktis tidak
       terlihat sama sekali.
       light 16,01:1  ·  dark 12,99:1

     --danger-text : teks aksi merusak (hapus). --red #C0392B lolos di
       light (5,02:1) tapi GAGAL di dark (2,83:1) — tombol "Delete this
       task" masih samar-samar terbaca sehingga kegagalannya tidak
       pernah dilaporkan, tapi tetap gagal.
       light 5,02:1  ·  dark 5,36:1
       #E8776F diuji di SELURUH latar dark yang benar-benar dipakai:
       field 5,36 · card 5,94 · bg 6,72 · tint merah 14% 5,40 —
       lolos semuanya, bukan hanya di satu tempat. */
  --action-text: #0B1B2E;
  --danger-text: #C0392B;

  /* v2.23 — TOKEN KETIGA dengan nilai per mode: --meta-text.
     Keputusan user 2 Sep 2026 = Opsi C dari tiga opsi yang diajukan.

     Masalahnya: var(--muted) gagal AA di 14 tempat (light 3,01:1 di
     card, dark 3,91:1). Menggelapkan --muted itu sendiri akan patuh
     AA di semuanya, TAPI nilainya jadi #636E7C yang nyaris sama
     dengan --mid #5C6B7A (5,18 vs 5,47) — beda "muted vs mid"
     praktis hilang dan seluruh app terasa lebih berat.

     Jadi --muted DIBIARKAN apa adanya, dan token baru ini dipakai
     HANYA di tiga tempat yang benar-benar dibaca untuk mengambil
     keputusan:
       .summary-label  label di bawah angka Dashboard — inilah yang
                       memberi ARTI pada angkanya ("Work tasks",
                       "Done", "Open"). Angka tanpa label yang
                       terbaca sama saja dengan angka tanpa arti.
       .ws-col-date    kolom Date di History — kolom yang paling
                       sering dibaca di tabel itu.
       .ws-col-id      kolom Task ID — dipakai saat merujuk satu
                       task ke orang lain.

     Sebelas tempat lain (jam di Log, hint form, pesan kosong, dst)
     SENGAJA tidak disentuh: masih terbaca, dan mengubah semuanya
     berarti mengubah nuansa seluruh app untuk teks yang tidak
     dipakai mengambil keputusan.

     Nilainya BERBEDA arah di tiap mode karena latarnya berlawanan:
     light harus lebih GELAP dari --muted, dark harus lebih TERANG.
       light #636E7C : card 5,18 · bg 4,57 · field 4,78
       dark  #8A96A3 : card 5,68 · bg 6,42 · field 5,12
     Lolos AA di keenam kombinasi, bukan hanya di satu tempat. */
  --meta-text: #636E7C;

  --heading: #0B1B2E;
  --nav-h:   64px;
  --app-w:   520px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px;

  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text',
             'Inter', 'Segoe UI', Roboto, sans-serif;
  --font-pin: Georgia, 'Times New Roman', serif;
}

/* ── DARK MODE ──────────────────────────────────────────────
   Kebalikan skema warna (opsi 1). Warna brand (--navy, --navy2,
   --brass, --red, --amber) SENGAJA TIDAK diubah — itu identitas
   brand, tetap sama di kedua mode. Yang berubah hanya latar,
   permukaan card/field, dan warna teks — supaya semua komponen
   yang sudah pakai var(--ink)/var(--card)/dst otomatis ikut
   berubah tanpa perlu menyentuh CSS rule lain satu per satu. */
body.dark-mode {
  --bg:      #0A0E14;
  --card:    #161C26;
  --ink:     #E8ECF1;
  --mid:     #A9B4C0;
  --muted:   #6E7A88;
  --line:    #2A3340;
  --field:   #1E2530;
  /* v2.23 — lihat catatan --meta-text di :root. Di dark mode arahnya
     TERBALIK: harus lebih TERANG dari --muted #6E7A88, bukan lebih
     gelap. Kebetulan nilainya sama dengan --muted versi light —
     bukan kemalasan, memang itu yang lolos: card 5,68 · bg 6,42 ·
     field 5,12, dan tetap jelas berbeda dari --mid #A9B4C0 (8,12). */
  --meta-text: #8A96A3;
  /* --heading BEDA dari --navy: --navy tetap gelap (dipakai untuk
     background/border elemen brand solid seperti header & tombol
     primer, itu benar tetap sama). --heading dipakai KHUSUS untuk
     teks judul di atas permukaan card/field yang IKUT berubah warna
     di dark mode -- kalau teks itu tetap pakai --navy (gelap), teks
     jadi nyaris tak terbaca di atas card yang sudah ikut gelap juga. */
  --heading: #E8ECF1;
  /* v2.10 — teks di atas .ai-btn & .ai-summary (dua-duanya berlatar
     rgba(201,168,76,.10)) tidak ikut daftar var(--heading) karena
     latarnya bukan --card polos, melainkan tint brass transparan.
     Warna lama #8A6D1E (dipakai tetap di light mode) kalau dipaksa
     jalan di dark mode cuma dapat kontras 2.95:1 — gagal AA 4.5:1.
     #E6C878 dipilih khusus untuk dark mode: masih dalam keluarga
     brass/gold (bukan warna asing), diukur kontras 8.87:1 terhadap
     latar gelap tersebut. */
  --ai-accent-text: #E6C878;
  --ai-accent-text-soft: #DDBE72;

  /* v2.20 — lihat penjelasan di :root. Nilai dark dipilih supaya
     lolos AA di SEMUA permukaan gelap yang benar-benar dipakai,
     bukan hanya di satu. */
  --action-text: #E8ECF1;
  --danger-text: #E8776F;
}
/* Transisi halus saat toggle, biar tidak "kedip" mendadak */
body, .header, .nav, .toast { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }

*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html, body {
  height: 100%; overflow-x: hidden;
  font-family: var(--font-ui);
  background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'tnum' 1;
}
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ══════════════════════════════════════════════
   v2.12 — KEPATUHAN STANDAR (blok baru, murni menambah)
   Semua aturan di bawah ini tidak menimpa selector lama
   mana pun; ini penambahan sesuai SOP 8.7.
   ══════════════════════════════════════════════ */

/* SOP kategori 8 — teks khusus screen reader. Dipakai skip link
   dan label tersembunyi lain. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* SOP kategori 8/14 — skip link: tersembunyi sampai mendapat fokus
   keyboard, lalu muncul di kiri atas. Tanpa ini pengguna keyboard
   harus melewati seluruh header sebelum mencapai isi halaman. */
.skip-link {
  position: absolute; left: var(--sp-3); top: -60px; z-index: 9999;
  padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600;
  background: var(--navy); color: #FFFFFF; text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: var(--sp-3); }

/* SOP kategori 13 (MANDATORY) — scrollbar custom tipis untuk setiap
   area scrollable yang terlihat. Tanpa ini tampilan sepenuhnya
   bergantung scrollbar default peramban (tebal & abu-abu di
   Windows/Linux) begitu isinya cukup panjang untuk memicu scroll. */
.scroll, .sheet, #pinScreen, .ws-wrap {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.scroll::-webkit-scrollbar,
.sheet::-webkit-scrollbar,
#pinScreen::-webkit-scrollbar,
.ws-wrap::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll::-webkit-scrollbar-track,
.sheet::-webkit-scrollbar-track,
#pinScreen::-webkit-scrollbar-track,
.ws-wrap::-webkit-scrollbar-track { background: transparent; }
.scroll::-webkit-scrollbar-thumb,
.sheet::-webkit-scrollbar-thumb,
#pinScreen::-webkit-scrollbar-thumb,
.ws-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
/* Di dark mode --line terlalu gelap untuk terlihat; pakai abu netral. */
body.dark-mode .scroll::-webkit-scrollbar-thumb,
body.dark-mode .sheet::-webkit-scrollbar-thumb,
body.dark-mode .ws-wrap::-webkit-scrollbar-thumb { background: #46536A; }
body.dark-mode .scroll,
body.dark-mode .sheet,
body.dark-mode .ws-wrap { scrollbar-color: #46536A transparent; }

/* SOP kategori 1 — anak grid/flex default-nya min-width:auto, artinya
   menolak mengecil di bawah lebar konten intrinsiknya. Satu kata
   panjang tanpa spasi (nama file, ID task) cukup untuk melebarkan
   seluruh grid dan memicu scroll horizontal. Pencegahan, bukan
   perbaikan bug yang sudah terjadi. */
.summary-grid > *, .prio > *, .tags > *, .report-filter > *,
.report-range-row > *, .report-btn-row > *, .riwayat-head > *,
.switch-row > *, .session-row > * { min-width: 0; }
/* Tabel worksheet sudah punya pembungkus scroll sendiri; dipastikan
   di sini supaya tidak pernah melebarkan induknya. */
.ws-wrap { max-width: 100%; }
img, svg, canvas { max-width: 100%; }

/* v2.10 — redistribusi jarak, BUKAN geser semua ke bawah. Sebelumnya
   padding-top clamp(20,6vh,54) terlalu kecil dibanding sisa ruang
   kosong di bawah keypad (dari screenshot: ~75px kosong di atas
   logo, ~370px kosong di bawah keypad, dari total 1400px tinggi
   layar). Sengaja TIDAK dipakai justify-content:center (diminta
   eksplisit) — jarak antar-blok (logo/brand/judul/dots) dilebarkan
   sedikit supaya konten "menyebar" turun secara alami, bukan
   nge-block rata di tengah. */
#pinScreen {
  position: fixed; inset: 0; z-index: 9000;
  background: var(--navy);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: calc(env(safe-area-inset-top) + clamp(14px, 4vh, 40px)) 24px max(20px, env(safe-area-inset-bottom));
  overflow-y: auto; transition: opacity .4s ease;
}
#pinScreen.hide { opacity: 0; pointer-events: none; }

.pin-wrap { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; }
/* v2.10 — margin-bawah dilebarkan 16→28px, bagian dari redistribusi
   jarak PIN screen (lihat catatan #pinScreen). */
.pin-logo { width: clamp(140px, 60vw, 200px); height: auto; object-fit: contain; margin-bottom: 28px; }
.pin-logo-fb { font-family: var(--font-pin); font-weight: bold; font-size: 44px; color: var(--brass); margin-bottom: var(--sp-4); display: none; }
.pin-brand { font-size: 11px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--brass); margin-bottom: 28px; text-align: center; }
.pin-title { font-family: var(--font-pin); font-size: clamp(30px, 9vw, 40px); font-weight: bold; color: #fff; margin-bottom: var(--sp-1); text-align: center; line-height: 1.1; }
.pin-sub { font-size: 13px; color: rgba(255,255,255,.55); margin-bottom: 44px; text-align: center; }

.pin-dots { display: flex; gap: 14px; margin-bottom: var(--sp-7); }
.pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); transition: all .18s; }
.pin-dot.fill { background: #fff; border-color: #fff; transform: scale(1.2); }
.pin-dot.err  { background: #EF4444; border-color: #EF4444; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-10px)} 40%,80%{transform:translateX(10px)} }
.pin-dots.shake { animation: shake .4s ease; }

.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; width: min(270px, 78vw); }
.pin-key {
  height: clamp(52px, 14vw, 64px); background: #16304A; border: 1.5px solid #23486E;
  border-radius: 14px; color: #fff; font-size: clamp(18px, 5vw, 22px); font-weight: 600;
  cursor: pointer; transition: all .12s;
  display: flex; align-items: center; justify-content: center; user-select: none;
}
.pin-key:active { background: #24507A; transform: scale(.93); }
.pin-key:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.pin-key.ghost { font-size: clamp(10px, 2.8vw, 12px); font-weight: 700; letter-spacing: 1px; color: rgba(255,255,255,.4); background: transparent; border-color: transparent; }
.pin-msg { margin-top: var(--sp-5); min-height: 20px; font-size: 13px; text-align: center; color: rgba(255,255,255,.5); line-height: 1.5; max-width: 300px; }
.pin-msg.err  { color: #EF4444; }
.pin-msg.busy { color: var(--brass); }

#app {
  display: none; flex-direction: column; height: 100dvh;
  max-width: var(--app-w); margin: 0 auto; background: var(--bg); position: relative;
}
#app.on { display: flex; }
@media (min-width: 620px) {
  /* v2.12 — SOP kategori 1: 100dvh mengikuti tinggi viewport yang benar-benar
     terlihat. 100vh dibiarkan sebagai baris pertama = fallback peramban lama. */
  body { background: #DCE2E8; display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; }
  /* v2.24 — BUG FIX: width WAJIB ada di sini.
     Diukur di Chrome sungguhan: tanpa width, kartu ini hanya 386px,
     bukan 520px seperti yang dimaksud.
     Sebabnya: body di atas jadi display:flex, sehingga #app berubah
     jadi FLEX ITEM. Flex item dengan flex-basis:auto dan tanpa width
     diukur dari ISINYA, bukan dari max-width — jadi max-width:520px
     cuma jadi batas atas yang tidak pernah tercapai.
     Akibatnya .nav, .sheet, dan .toast (yang semuanya 520px dan
     di-center ke viewport) jadi LEBIH LEBAR dari kartunya. Itulah
     yang terlihat sebagai "nav melebar keluar kartu" di screenshot
     pengguna 8 Sep 2026 — akar masalahnya kartunya yang menyusut,
     bukan nav-nya yang salah lebar.
     width:100% diukur terhadap body (929px saat diuji) lalu dijepit
     max-width jadi tepat 520px. */
  #app { width: 100%; box-shadow: 0 0 0 1px rgba(11,27,46,.07), 0 24px 64px rgba(11,27,46,.16); border-radius: 20px; overflow: hidden; height: min(100dvh, 880px); }

  /* v2.21 — BUG FIX: bottom nav di desktop.

     Di desktop, #app berubah jadi KARTU setinggi maks 880px yang
     di-center di layar. Tapi .nav memakai position:fixed; bottom:0 —
     yang menempel ke bawah VIEWPORT, bukan ke bawah kartu.

     Akibatnya nav melayang terlepas dari app-nya: di layar tinggi ia
     jauh di bawah kartu, dan latar #DCE2E8 terlihat di antaranya.
     Persis yang terlihat di screenshot pengguna.

     Perbaikannya: di desktop nav jadi position:absolute relatif ke
     #app (yang sudah position:relative), sehingga menempel ke dasar
     KARTU. Sudut bawahnya ikut dibulatkan supaya menyatu dengan
     border-radius kartu, dan safe-area-inset dinolkan karena di
     desktop tidak ada notch/gesture bar.

     Nol perubahan untuk mobile: seluruh aturan ini hanya hidup di
     dalam media query ini. */
  /* v2.24 — SELEKTORNYA #app .nav, BUKAN .nav. Ini perbaikan bug,
     bukan gaya penulisan.

     Yang terjadi di v2.21-v2.23: aturan ini ditulis `.nav` di dalam
     media query ini (baris ~1088), sementara aturan DASAR `.nav`
     ada di baris ~1953 — 865 baris LEBIH BAWAH.

     Media query TIDAK menambah spesifisitas. Jadi keduanya bernilai
     sama (satu class), dan yang menang cuma yang ditulis BELAKANGAN
     — yaitu aturan dasar. position:absolute di sini kalah, dan nav
     tetap position:fixed. Diukur di Chrome: computed position tetap
     "fixed" padahal media query aktif.

     Yang menipu: border-radius di bawah TETAP berlaku, karena
     aturan dasar tidak menyebut properti itu. Cascade bekerja
     PER-PROPERTI, bukan per-blok — jadi perbaikannya tampak
     setengah jalan dan lolos dari pemeriksaan.

     #app .nav bernilai (1 id + 1 class), mengalahkan .nav (1 class)
     TANPA bergantung urutan. Dipilih daripada memindahkan seluruh
     blok media query ini ke bawah, karena memindahkan 40 baris CSS
     berisiko mengubah perilaku aturan lain di dalamnya; mengubah
     satu selektor tidak.

     Diverifikasi: .nav MEMANG keturunan #app, dan #app sudah
     position:relative — jadi absolute di sini benar berpatokan ke
     kartu, bukan ke viewport. */
  #app .nav {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    transform: none;
    max-width: none;
    padding: var(--sp-2) var(--sp-1);
    border-radius: 0 0 20px 20px;
  }

  /* v2.24 — KOREKSI: aturan position:absolute untuk .sheet,
     .sheet-backdrop, .toast, dan .update-banner DIHAPUS.

     Komentar v2.21 di sini menyatakan keempatnya "ikut kartu kalau
     dibuat absolute". Itu SALAH, dan sekarang sudah diverifikasi di
     browser: keempat elemen itu SAUDARA #app, bukan keturunannya
     (app.contains(el) === false, dan tidak punya satu pun induk
     berposisi). Membuatnya absolute berarti berpatokan ke DOKUMEN,
     bukan ke kartu — mereka akan tergeser dan ikut ter-scroll.

     Jadi aturan itu bukan cuma tidak berguna, tapi merusak. Ia
     selamat selama ini HANYA karena kalah cascade seperti .nav di
     atas. Bug cascade itu kebetulan melindungi app dari kesalahan
     ini — dan begitu cascade-nya diperbaiki (seperti yang dilakukan
     v2.24 untuk nav), aturan ini akan aktif dan merusak. Karena itu
     dihapus sekarang, bukan dibiarkan.

     Keempatnya TETAP position:fixed. Itu memang benar untuk elemen
     yang berada di luar kartu, dan sejak #app diberi width di atas,
     ketiga yang di-center (sheet, toast, update-banner) sudah
     sejajar horizontal dengan kartu — karena keduanya sama-sama
     520px dan di-center ke viewport.

     Sisa yang TIDAK diperbaiki di sini, dicatat apa adanya: pada
     layar lebih TINGGI dari 880px, kartu berhenti di 880px lalu
     di-center, sementara sheet/toast tetap menempel dasar viewport
     — jadi ada selisih vertikal. Memperbaikinya butuh memindahkan
     elemen-elemen itu KE DALAM #app, dan itu perubahan struktur
     yang menyentuh penumpukan (z-index) serta perilaku scroll
     sheet. Risikonya lebih besar daripada masalahnya, dan tidak
     ada laporan pengguna soal ini. Nav — satu-satunya yang benar-
     benar dilaporkan — sudah beres karena ia memang anak #app.

     Soal border-radius, dua aturan DIHAPUS dan satu DIPERTAHANKAN —
     dan ini hasil koreksi, bukan tebakan.

     Percobaan pertama v2.24 mempertahankan ketiganya dengan alasan
     "sudah diverifikasi berlaku, computed border-radius sheet =
     20px 20px 0 0". Itu kesimpulan yang SALAH: nilainya benar,
     tapi datangnya dari aturan DASAR .sheet yang sudah memuat
     border-radius: 20px 20px 0 0 — bukan dari aturan di sini.
     Aturan di sini kalah cascade, sama seperti .nav. Saya melihat
     nilai yang benar lalu menyimpulkan aturan sayalah penyebabnya.

     Yang menemukannya: cekcascade.js, alat baru yang dibuat justru
     karena bug .nav ini. Ia menandai .sheet border-radius dan
     .update-banner padding-top sebagai override yang dikalahkan.

     Jadi:
       .sheet border-radius        -> DIHAPUS. Aturan dasar sudah
                                      memuat nilai yang SAMA PERSIS,
                                      jadi ini murni kode mati yang
                                      terlihat seolah bekerja.
       .update-banner padding-top  -> DIHAPUS. Aturan dasar memakai
                                      max(var(--sp-3), env(safe-area
                                      -inset-top)); di desktop
                                      env()-nya 0, jadi hasilnya
                                      sudah sama dengan var(--sp-3).
                                      Nol perbedaan, nol gunanya.
       .sheet-backdrop border-radius   -> DIPERTAHANKAN, dan
       .update-banner border-radius       keduanya diverifikasi
                                          BENAR-BENAR berlaku:
                                          aturan dasar masing-masing
                                          tidak menyebut border-radius,
                                          jadi tidak ada yang
                                          mengalahkannya. */
  .sheet-backdrop { border-radius: 20px; }
  .update-banner { border-radius: 20px 20px 0 0; }
}

.header {
  background: var(--navy);
  padding: max(12px, env(safe-area-inset-top)) var(--sp-4) var(--sp-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  border-bottom: 2px solid var(--brass);
  position: relative; z-index: 50; flex-shrink: 0;
  transition: box-shadow .25s ease;
}
.header.lifted { box-shadow: 0 6px 22px rgba(11,27,46,.28); }

/* v2.10 — tinggi dinaikkan 34→44px. Tinggi header TIDAK berubah:
   .hd-meta (jam kanan) sudah min-height:44px, jadi logo cuma
   dinaikkan sampai batas yang sudah ditentukan elemen lain. */
.hd-logo { flex: 0 0 28%; max-width: 130px; height: 44px; display: flex; align-items: center; }
.hd-logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.hd-logo-fb { font-family: var(--font-pin); font-weight: bold; color: var(--brass); font-size: 16px; }

/* Kolom kanan diberi lebar tetap yang SAMA dengan estimasi kolom kiri
   sehingga judul di tengah benar-benar berada di titik tengah header,
   bukan sekadar di tengah sisa ruang yang kebetulan tidak simetris. */
.hd-side { flex: 0 0 28%; max-width: 130px; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 4px; }

.theme-toggle {
  border: none; background: none; cursor: pointer; padding: 4px;
  min-width: 28px; min-height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; color: rgba(255,255,255,.65); transition: background .15s, color .15s; flex-shrink: 0;
}
.theme-toggle:active { background: rgba(255,255,255,.08); }
.theme-icon-moon { display: none; }
body.dark-mode .theme-icon-sun { display: none; }
body.dark-mode .theme-icon-moon { display: block; }
.theme-toggle:hover { color: #fff; }

.hd-title {
  flex: 1 1 auto; text-align: center; line-height: 1.25;
  font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.85);
}
.hd-title span { display: block; }

.hd-meta {
  cursor: pointer; padding: 4px 2px; border-radius: 8px; transition: background .15s;
  min-width: 44px; min-height: 44px; display: flex; flex-direction: column;
  align-items: flex-end; justify-content: center;
}
.hd-meta:active { background: rgba(255,255,255,.08); }
.hd-time { display: flex; align-items: baseline; gap: 5px; justify-content: flex-end; }
.hd-dot { width: 7px; height: 7px; border-radius: 50%; background: #3FBF7F; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(63,191,127,.18); align-self: center; }
.hd-dot.warn  { background: #E0A84E; box-shadow: 0 0 0 3px rgba(224,168,78,.18); }
.hd-dot.stale { background: #E05A4E; box-shadow: 0 0 0 3px rgba(224,90,78,.18); }
.hd-clock-main { font-size: 14px; color: #fff; font-weight: 600; }
.hd-clock-sec { font-size: 10px; color: rgba(255,255,255,.45); }
.hd-date { font-size: 10.5px; color: rgba(255,255,255,.5); margin-top: 3px; }

.sheet-backdrop {
  position: fixed; inset: 0; z-index: 8000; background: rgba(11,27,46,.42);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.sheet-backdrop.on { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed; left: 50%; bottom: 0; z-index: 8100;
  width: 100%; max-width: var(--app-w);
  background: var(--card); border-radius: 20px 20px 0 0;
  padding: var(--sp-2) 0 max(var(--sp-6), env(safe-area-inset-bottom));
  transform: translate(-50%, 100%); transition: transform .28s cubic-bezier(.22,1,.36,1);
  max-height: 78vh; overflow-y: auto;
}
.sheet.on { transform: translate(-50%, 0); }
.sheet-handle { width: 36px; height: 4px; border-radius: 3px; background: var(--line); margin: var(--sp-2) auto var(--sp-4); }
.sheet-title { font-size: 15px; font-weight: 600; padding: 0 var(--sp-5) var(--sp-4); color: var(--ink); }

.session-info { padding: 0 var(--sp-5) var(--sp-5); }
.session-row { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.session-row:last-of-type { border-bottom: none; }
.session-label { color: var(--mid); }
.session-value { color: var(--ink); font-weight: 500; }
.btn-logout {
  width: 100%; margin-top: var(--sp-4); padding: var(--sp-4);
  background: var(--field); border: 1px solid var(--line); border-radius: 12px;
  color: var(--danger-text); font-size: 15px; font-weight: 600; text-align: center; cursor: pointer;
}
.btn-logout:active { background: #EFE3E1; }
/* v2.10 fix — #EFE3E1 (merah muda pucat) kedip putih di atas latar
   gelap. var(--field) dark mode = #1E2530 (gelap, senada tema). */
body.dark-mode .btn-logout:active { background: var(--field); }
/* v2.20 — varian .btn-logout untuk aksi POSITIF (simpan), bukan
   merusak. Dibuat sebagai kelas, bukan style inline, supaya
   warnanya ikut token dan tidak bisa lagi lolos dari audit. */
.btn-logout.btn-primary-action { color: var(--action-text); margin-bottom: 10px; }

.option-list { padding: 0 var(--sp-3) var(--sp-3); }
.option-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-3); border-radius: 12px; cursor: pointer;
  min-height: 44px; font-size: 15px; color: var(--ink);
}
.option-item:active { background: var(--field); }
.option-item.selected { color: var(--heading); font-weight: 600; }
.option-check { color: var(--heading); font-weight: 700; opacity: 0; }
.option-item.selected .option-check { opacity: 1; }

/* v2.10 — padding-top 16→12px, berlaku ke semua tab */
/* v2.11 — padding-bottom ditambah (sp-7=32px → sp-8 setara 40px lewat
   calc manual, lihat --sp-7 di :root) supaya total jarak konten
   terakhir ke bottom nav lebih lega, khususnya saat konten pendek
   (mode Libur non-kerja). */
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px var(--sp-4) calc(var(--nav-h) + 40px); }
.scroll-inner { min-height: 100%; display: flex; flex-direction: column; }
/* Penengahan HANYA aktif bila konten muat penuh tanpa perlu scroll —
   dicek lewat JS (lihat centerIfFits), bukan lewat media query, karena
   tinggi konten berubah-ubah tergantung mode Hari Kerja / Libur. */
/* v2.18 — .centered dihapus: nol pemakaian. Semua tab memakai
   .scroll-inner biasa; tidak ada layar yang isinya ditengahkan. */

/* v2.10 — strip "Hari ini". Navy senada header, bukan kartu putih
   besar (disengaja tipis, ±30px). Warna brand solid (var(--navy))
   sengaja TIDAK ikut dark-mode-aware sesuai pola elemen header lain
   di app ini (lihat catatan --heading vs --navy di :root). */
.today-strip {
  background: var(--navy); border-radius: 12px;
  padding: 8px 14px; margin-bottom: var(--sp-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  font-size: 12.5px;
}
.today-strip-label { color: rgba(255,255,255,.65); }
.today-strip-value { color: #fff; font-weight: 600; }
.today-strip-value.empty { color: var(--brass); }

/* ══════════════════════════════════════════════
   v2.12 — CSS fitur baru
   ══════════════════════════════════════════════ */

/* Bar antrean offline. Bentuknya MENIRU .today-strip (navy solid +
   teks putih) karena pasangan warna itu sudah terukur: putih di atas
   navy = 17,35:1 dan brass di atas navy = 7,59:1 — dua-duanya lolos
   AA jauh, dan tidak berubah di dark mode karena --navy memang tidak
   ikut berubah. Nol warna baru yang perlu diukur ulang. */
.queue-bar {
  background: var(--navy); border-radius: 12px;
  padding: 8px 14px; margin-bottom: var(--sp-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  font-size: 12.5px;
}
.queue-bar-text { color: rgba(255,255,255,.80); }
.queue-bar-btn {
  color: var(--brass); font-weight: 700; cursor: pointer;
  background: transparent; border: 0; padding: 6px 4px;
  font-size: 12.5px; min-height: 32px;
}
.queue-bar-btn:active { opacity: .6; }
.queue-bar-btn[disabled] { opacity: .45; cursor: default; }

/* v2.23 — .mic-btn, .mic-btn:active, .mic-btn:focus-visible,
   .mic-btn.rec dan @keyframes micPulse DIHAPUS bersama tombolnya.
   Diverifikasi nol rujukan tersisa di markup maupun JS sebelum
   dihapus (SOP 8.7). Lihat alasannya di markup kartu Free write. */

/* Chip template. Memakai ukuran & radius yang sama dengan .tag-add
   supaya terasa satu keluarga, tapi garis penuh (bukan dashed) untuk
   membedakan "template siap pakai" dari "tambah tag baru". */
.tpl-chip {
  font-size: 13px; padding: var(--sp-2) var(--sp-3); border-radius: 10px;
  background: var(--field); border: 1px solid var(--line); color: var(--ink);
  cursor: pointer; min-height: 36px; display: flex; align-items: center; gap: 8px;
}
.tpl-chip:active { opacity: .7; }
.tpl-chip:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.tpl-chip-name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Tombol hapus di dalam chip. Diberi area sentuh sendiri supaya tidak
   tertekan tanpa sengaja saat maksudnya memakai template. */
.tpl-chip-del {
  color: var(--muted); font-weight: 700; line-height: 1;
  padding: 4px 2px 4px 4px; margin: -4px -2px -4px 0;
}
.tpl-chip-del:active { color: var(--danger-text); }

/* Kotak pencarian riwayat. Memakai kelas .input yang sudah ada untuk
   tampilannya; hanya butuh jarak bawah. */
.riwayat-search { margin-bottom: var(--sp-3); }

/* ══════════════════════════════════════════════
   v2.14 — TAB LOG
   ══════════════════════════════════════════════ */

/* Baris filter jenis event. Memakai pola .report-mode-tab yang sudah
   ada supaya terasa satu keluarga dengan filter di tab Report, tapi
   bisa di-scroll ke samping karena jenis event-nya ada 8. */
.log-filter {
  display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 2px;
}
.log-filter::-webkit-scrollbar { display: none; }
.log-chip {
  flex: 0 0 auto; font-size: 12px; font-weight: 600;
  padding: 7px var(--sp-3); border-radius: 9px;
  background: var(--field); border: 1px solid var(--line);
  color: var(--mid); cursor: pointer; min-height: 34px;
  display: flex; align-items: center; white-space: nowrap;
}
.log-chip.on { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
.log-chip:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* Satu baris log. Bukan tabel: isi log panjang & tidak seragam,
   jadi kartu bertumpuk lebih terbaca di layar HP daripada tabel
   yang harus di-scroll ke samping. */
.log-row {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.log-row-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); margin-bottom: 5px;
}
.log-row-top > * { min-width: 0; }
.log-time { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.log-desc { font-size: 13px; color: var(--ink); line-height: 1.45; }
.log-meta {
  font-size: 11px; color: var(--muted); margin-top: 5px;
  display: flex; flex-wrap: wrap; gap: 4px 10px;
}

/* Badge jenis event. Warna dipilih dari token yang SUDAH terukur di
   file ini, bukan warna baru: hijau .done (2E7D5B), merah --red,
   brass, dan netral --mid. Semuanya sudah dipakai untuk teks kecil
   di tempat lain dengan latar tint yang sama pekat. */
.log-badge {
  flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .3px;
  padding: 3px 7px; border-radius: 6px; text-transform: uppercase;
  background: var(--field); color: var(--mid); white-space: nowrap;
}
.log-badge.submit { background: rgba(46,125,91,.14);  color: #2E7D5B; }
/* v2.20 — --red diganti --danger-text. Di dark mode --red hanya
   dapat 2,86:1 di atas tint merah ini; --danger-text dapat 5,40:1. */
.log-badge.danger { background: rgba(192,57,43,.14);  color: var(--danger-text); }
.log-badge.edit   { background: rgba(201,168,76,.18); color: #7E6319; }
body.dark-mode .log-badge.edit { color: var(--ai-accent-text); }
.log-empty { text-align: center; color: var(--muted); font-size: 13px; padding: var(--sp-7) var(--sp-4); line-height: 1.6; }

/* ══════════════════════════════════════════════
   v2.14 — ASET, VENDOR, FOTO BUKTI
   ══════════════════════════════════════════════ */

/* Kotak vendor. Latar brass tipis supaya jelas ini muncul BERSYARAT
   (hanya saat status Waiting Vendor), bukan field tetap yang
   kebetulan sedang kosong. */
.vendor-box {
  background: rgba(201,168,76,.10); border: 1px solid rgba(201,168,76,.35);
  border-radius: 12px; padding: var(--sp-3); margin-top: var(--sp-3);
}
.vendor-box .field:last-child { margin-bottom: 0; }

/* Chip kode aset di tabel Riwayat. Netral, bukan brass — brass sudah
   dipakai chip jenis hari, dan dua warna sama di satu baris membuat
   keduanya kehilangan makna. */
.ws-chip.asset { background: rgba(11,27,46,.07); color: var(--navy); }
body.dark-mode .ws-chip.asset { background: rgba(255,255,255,.10); color: var(--ink); }

/* Baris tombol foto. Tombol dan pratinjau sejajar supaya jelas
   pratinjau itu milik tombol di sebelahnya. */
.photo-row { display: flex; align-items: center; gap: var(--sp-3); }
.photo-row > * { min-width: 0; }
.photo-btn {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; padding: var(--sp-2) var(--sp-3);
  border-radius: 10px; background: var(--field);
  border: 1px solid var(--line); color: var(--ink);
  cursor: pointer; min-height: 40px;
}
.photo-btn:active { opacity: .7; }
.photo-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.photo-thumb {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 9px;
  object-fit: cover; border: 1px solid var(--line); display: block;
}
.photo-info { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.photo-clear {
  flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--danger-text);
  cursor: pointer; padding: var(--sp-2); min-height: 40px;
  display: flex; align-items: center; background: none; border: 0;
}
/* Foto di sheet detail Riwayat. Lebar penuh, tinggi dibatasi supaya
   sheet tidak jadi sangat panjang untuk foto potret. */
.photo-view { width: 100%; max-height: 320px; object-fit: contain; border-radius: 12px; border: 1px solid var(--line); display: block; background: var(--field); }

/* v2.14 — tombol "salin untuk Sheets". Memakai gaya .report-load-btn
   yang sudah ada, tapi outline supaya jelas ini aksi sekunder di
   sebelah tombol export utama. */
.copy-btn {
  flex: 1 1 auto; min-height: 44px; border-radius: 11px;
  background: transparent; border: 1px solid var(--line);
  color: var(--ink); font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.copy-btn:active { background: var(--field); }
.copy-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* ══════════════════════════════════════════════
   v2.17 — DASHBOARD: kartu bisa ditindaklanjuti
   ══════════════════════════════════════════════ */

/* Kartu yang bisa diketuk diberi penanda VISUAL, bukan hanya bisa
   diketuk diam-diam. Tanpa penanda, pengguna tidak akan pernah tahu
   ada yang bisa ditekan — fiturnya ada tapi tidak pernah ditemukan. */
.summary-card.tappable {
  cursor: pointer; position: relative;
  border: 1px solid var(--line);
}
.summary-card.tappable:active { background: var(--field); }
.summary-card.tappable:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
/* Chevron kecil di pojok — isyarat "ada lanjutannya" yang sudah
   dipakai .picker-row di form, jadi maknanya sudah dikenal. */
.summary-card.tappable::after {
  content: '\203A'; position: absolute; top: 8px; right: 11px;
  font-size: 17px; line-height: 1; color: var(--muted); opacity: .75;
}

/* Baris keterangan di bawah angka. Dipakai untuk menyebut NAMA task
   pada kartu "Oldest open" — angka "10d" saja tidak memberi tahu
   task mana yang nyangkut. */
.summary-sub {
  font-size: 11px; color: var(--mid); margin-top: 3px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Kartu peringatan vendor telat. Merah dipakai hanya di sini di
   Dashboard, jadi kemunculannya benar-benar berarti sesuatu. */
.summary-card.alert { border-color: rgba(192,57,43,.45); background: rgba(192,57,43,.06); }
.summary-card.alert .summary-num { color: var(--danger-text); }

/* Navigasi bulan Dashboard. */
.dash-month-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); margin-bottom: var(--sp-3);
}
.dash-month-nav > * { min-width: 0; }
.dash-month-btn {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-size: 17px; line-height: 1; cursor: pointer;
}
.dash-month-btn:active { background: var(--field); }
.dash-month-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.dash-month-btn[disabled] { opacity: .35; cursor: default; }
.dash-month-title { flex: 1 1 auto; text-align: center; font-size: 15px; font-weight: 600; color: var(--heading); }

/* Penanda mode di tab History saat sedang menampilkan daftar */
/* "open tasks" dan bukan 7 hari terakhir.                     */
.riwayat-mode {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); background: rgba(201,168,76,.12);
  border: 1px solid rgba(201,168,76,.35); border-radius: 10px;
  padding: 8px 12px; margin-bottom: var(--sp-3); font-size: 12.5px;
}
.riwayat-mode > * { min-width: 0; }
.riwayat-mode-text { color: var(--ink); font-weight: 600; }
.riwayat-mode-btn {
  flex: 0 0 auto; background: transparent; border: 0; cursor: pointer;
  color: #7E6319; font-weight: 700; font-size: 12.5px;
  padding: 6px 2px; min-height: 32px;
}
body.dark-mode .riwayat-mode-btn { color: var(--ai-accent-text); }

/* ══════════════════════════════════════════════
   v2.19 — REKAP OPS MEETING
   ══════════════════════════════════════════════ */

/* Baris rentang minggu + navigasi. Pola sama dengan navigasi bulan
   di Dashboard supaya cara pakainya sudah dikenal. */
.ops-week-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); margin-bottom: var(--sp-3);
}
.ops-week-nav > * { min-width: 0; }
.ops-week-label {
  flex: 1 1 auto; text-align: center; font-size: 13px; font-weight: 600;
  color: var(--heading); line-height: 1.35;
}
.ops-week-sub { display: block; font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 2px; }

/* Satu blok kelompok dalam rekap (Done / In progress / Waiting vendor). */
.ops-group { margin-bottom: var(--sp-4); }
.ops-group-head {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 12px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; margin-bottom: var(--sp-2);
}
.ops-group-count {
  font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px;
  background: var(--field); color: var(--mid);
}
/* Warna kepala kelompok memakai token yang SUDAH terukur di file ini,
   bukan warna baru: hijau #2E7D5B (dipakai .ws-chip.done & toast good),
   navy --heading, dan brass-gelap #7E6319 (dihitung 4,96:1 di v2.13). */
.ops-group.done .ops-group-head   { color: #2E7D5B; }
.ops-group.open .ops-group-head   { color: var(--heading); }
.ops-group.vendor .ops-group-head { color: #7E6319; }
body.dark-mode .ops-group.vendor .ops-group-head { color: var(--ai-accent-text); }

/* Satu baris task di rekap. */
.ops-item {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 11px; padding: 10px 12px; margin-bottom: 6px;
}
.ops-item-task { font-size: 13.5px; color: var(--ink); line-height: 1.45; }
.ops-item-meta {
  font-size: 11px; color: var(--muted); margin-top: 4px;
  display: flex; flex-wrap: wrap; gap: 3px 9px;
}
/* Penanda follow-up vendor yang sudah lewat tanggal. Merah dipakai
   HANYA di sini dalam rekap, jadi kemunculannya benar-benar berarti. */
.ops-late { color: var(--danger-text); font-weight: 700; }
.ops-item.late { border-color: rgba(192,57,43,.45); background: rgba(192,57,43,.05); }

.ops-empty { font-size: 12.5px; color: var(--muted); padding: 2px 0 var(--sp-2); }
.ops-note {
  font-size: 11.5px; color: var(--muted); line-height: 1.6;
  border-top: 1px solid var(--line); padding-top: var(--sp-3); margin-top: var(--sp-2);
}

.ai {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--brass);
  border-radius: 16px; padding: var(--sp-4); margin-bottom: var(--sp-3);
  box-shadow: 0 1px 2px rgba(11,27,46,.03);
}
.ai-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.ai-title { font-size: 13px; font-weight: 600; color: var(--mid); display: flex; align-items: center; gap: 6px; }
/* v2.18 — .ai-badge dihapus: tidak pernah dipasang di markup mana pun.
   Ringkasan hasil AI memakai .ai-summary, bukan badge terpisah.
   Catatan: warnanya var(--amber) yang hanya 3,64:1 di atas putih —
   gagal AA untuk teks 10px, jadi memang tidak layak dihidupkan. */
.ai-box {
  width: 100%; background: var(--field); border: 1px solid var(--line); border-radius: 12px;
  padding: var(--sp-3) var(--sp-4); font-size: 15px; line-height: 1.55; color: var(--ink);
  /* v2.10 — 92→68px. Dipangkas supaya mode "Hari Libur" muat penuh
     tanpa scroll. 3 baris teks (line-height 1.55, font 15px) masih
     lega di tinggi ini. Berlaku di semua tab (Input/Riwayat/dst)
     yang memakai class ini — sengaja, bukan efek samping. */
  resize: none; height: 68px; outline: none; transition: border-color .18s;
}
.ai-box::placeholder { color: #A9B4BF; }
.ai-box:focus { border-color: var(--brass); }
.ai-btn {
  width: 100%; margin-top: var(--sp-3); border: 1px solid rgba(201,168,76,.4);
  background: rgba(201,168,76,.10); color: #8A6D1E;
  border-radius: 12px; padding: var(--sp-3); min-height: 44px;
  font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .1s, opacity .15s;
  position: relative; overflow: hidden;
}
/* v2.10 fix — lihat catatan --ai-accent-text di :root */
body.dark-mode .ai-btn { color: var(--ai-accent-text); }
.ai-btn:active { transform: scale(.985); opacity: .85; }
.ai-btn .ai-btn-txt, .ai-btn .ai-btn-load { transition: opacity .2s; }
.ai-btn .ai-btn-load {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; opacity: 0;
}
.ai-btn.busy .ai-btn-txt { opacity: 0; }
.ai-btn.busy .ai-btn-load { opacity: 1; }
.ai-btn.busy .dot3 { background: #8A6D1E; }

.ai-summary {
  margin-top: var(--sp-3); padding: var(--sp-3);
  background: rgba(201,168,76,.08); border-radius: 10px;
  font-size: 12.5px; color: #7A5F1A; line-height: 1.6;
  display: none;
}
/* v2.10 fix — lihat catatan --ai-accent-text di :root */
body.dark-mode .ai-summary { color: var(--ai-accent-text-soft); }
.ai-summary.show { display: block; }
.ai-summary b { font-weight: 600; }

/* ── RIWAYAT — item bisa diketuk ── */
/* v2.18 — .riwayat-item dihapus: sisa daftar-kartu History lama. */

/* ── LAPORAN ── */
/* v2.23 — flex-wrap + basis 50%: sejak mode ke-4 (AI Report) ada,
   empat tab dalam SATU baris hanya kebagian ~76px per tab di layar
   360px, sehingga setiap labelnya pecah jadi dua baris dengan tinggi
   tidak seragam. Basis 50% membuatnya selalu 2x2 di semua lebar.
   Perubahan tampilan yang disengaja, bukan efek samping. */
.report-filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.report-mode-tab {
  flex: 1 1 calc(50% - 4px); text-align: center; padding: var(--sp-2) var(--sp-2); border-radius: 10px;
  background: var(--field); border: 1px solid var(--line); font-size: 13px; color: var(--mid);
  cursor: pointer; min-height: 40px; display: flex; align-items: center; justify-content: center;
}
.report-mode-tab.on { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.report-range-row { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.report-range-row .date-row { flex: 1; }
.report-month-row { margin-bottom: var(--sp-3); }
.report-btn-row { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.report-load-btn, .report-export-btn {
  flex: 1; padding: var(--sp-3); border-radius: 12px; text-align: center; font-size: 14px;
  font-weight: 600; cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: center;
}
.report-load-btn { background: var(--navy); color: #fff; border: none; }
.report-export-btn { background: var(--field); color: var(--heading); border: 1px solid var(--line); }
.report-official-btn {
  margin-bottom: var(--sp-4); padding: var(--sp-2) var(--sp-3); border-radius: 10px; text-align: center;
  font-size: 12.5px; color: var(--mid); cursor: pointer; min-height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px dashed var(--line);
}
.report-official-btn:active { background: var(--field); }

/* ══════════════════════════════════════════════
   v2.23 — AI INTELLIGENCE REPORT
   ══════════════════════════════════════════════ */

/* Pemilih periode. Sengaja 2x2, BUKAN satu baris: empat label
   ("This week" … "Last month") pada layar 360px hanya kebagian
   ~76px per tab, sementara teksnya butuh ~84px. Dengan basis
   50% hasilnya selalu 2x2 di semua lebar — rapi dan bisa
   diperkirakan, tanpa baris yatim 3+1. */
.ai-period-row {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3);
}
.ai-period-tab {
  flex: 1 1 calc(50% - 4px); min-width: 0; text-align: center;
  padding: var(--sp-2); border-radius: 10px;
  background: var(--field); border: 1px solid var(--line);
  font-size: 13px; color: var(--mid); cursor: pointer; min-height: 40px;
  display: flex; align-items: center; justify-content: center;
}
.ai-period-tab.on { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }

.ai-opt-row {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.ai-range-label { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--mid); line-height: 1.4; }
.ai-lang { display: flex; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.ai-lang-btn {
  border: 0; background: var(--field); color: var(--mid); cursor: pointer;
  font-size: 12px; font-weight: 600; padding: 0 11px; min-height: 34px;
}
.ai-lang-btn.on { background: var(--navy); color: #fff; }
.ai-lang-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }

/* Tombol Generate dinonaktifkan selagi laporan dibuat. Tanpa penanda
   visual, teksnya berubah jadi "Generating…" tapi tombolnya tetap
   terlihat bisa ditekan — pengguna akan menekan berulang. Aditif:
   tidak ada kode lama yang menonaktifkan kedua kelas ini. */
.report-load-btn:disabled, .copy-btn:disabled { opacity: .6; cursor: default; }

/* Kartu hasil. Satu bagian = satu blok, sesuai permintaan
   "berbagian aja" — bukan satu paragraf mengalir. */
.air-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: var(--sp-4); margin-bottom: var(--sp-3);
}
.air-headline {
  background: rgba(201,168,76,.10); border-radius: 12px;
  padding: var(--sp-3); margin-bottom: var(--sp-4);
  font-size: 15px; font-weight: 700; color: var(--heading); line-height: 1.4;
}
.air-sec { margin-bottom: var(--sp-4); }
.air-sec:last-child { margin-bottom: 0; }
.air-sec-title {
  font-size: 11.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: #8A6D1E; margin-bottom: var(--sp-2);
}
/* v2.10 fix — lihat catatan --ai-accent-text di :root */
body.dark-mode .air-sec-title { color: var(--ai-accent-text); }
.air-body { font-size: 13.5px; color: var(--ink); line-height: 1.6; }
.air-list { list-style: none; margin: 0; padding: 0; }
.air-list li {
  font-size: 13.5px; color: var(--ink); line-height: 1.55;
  padding: 0 0 0 15px; margin-bottom: 7px; position: relative;
}
.air-list li:last-child { margin-bottom: 0; }
.air-list li::before {
  content: '·'; position: absolute; left: 3px; top: -1px;
  font-weight: 700; color: var(--mid);
}
/* Merah HANYA di bagian Concerns, jadi kemunculannya berarti —
   alasan yang sama dengan .ops-late di rekap Ops. */
.air-sec.concern .air-list li { background: rgba(192,57,43,.06); border-radius: 9px; padding: 7px 10px 7px 15px; }
.air-sec.concern .air-list li::before { color: var(--danger-text); left: 5px; top: 6px; }

/* Angka mentah dari server, ditaruh di bawah narasi supaya bisa
   dicek: kalau AI salah menyebut angka, pembanding aslinya ada. */
.air-stat-row {
  display: flex; flex-wrap: wrap; gap: 3px 10px;
  border-top: 1px solid var(--line); padding-top: var(--sp-3); margin-top: var(--sp-2);
  font-size: 11px; color: var(--mid);
}
/* var(--mid), BUKAN var(--muted) yang biasa dipakai untuk teks
   sekunder. --muted masih 3,01:1 di light dan 3,91:1 di dark —
   gagal AA, dan keputusan soal token itu belum diambil. Fitur baru
   sengaja TIDAK menambah kombinasi yang gagal: --mid lolos di kedua
   mode (5,47 / 8,12) dan hierarkinya tetap terbaca karena isi utama
   memakai --ink (17,85 / 14,41). */
.air-note { font-size: 11.5px; color: var(--mid); line-height: 1.6; margin-top: var(--sp-3); }

/* Daftar laporan tersimpan (dibaca dari activity_log). */
.air-saved-item {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 6px; cursor: pointer;
}
.air-saved-item:active { background: var(--field); }
.air-saved-top { font-size: 13px; color: var(--ink); line-height: 1.45; }
.air-saved-meta { font-size: 11px; color: var(--mid); margin-top: 3px; } /* lihat catatan .air-note */

/* ── BACKUP (Phase 2A) ── */
.backup-section { margin-top: var(--sp-6); }
.backup-divider { height: 1px; background: var(--line); margin-bottom: var(--sp-4); }
.backup-title { font-size: 13px; font-weight: 700; color: var(--heading); margin-bottom: var(--sp-1); }
.backup-desc { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: var(--sp-3); }
.backup-btn {
  padding: var(--sp-3); border-radius: 12px; text-align: center; font-size: 14px;
  font-weight: 600; cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: center;
  background: var(--card); color: var(--heading); border: 1.5px solid var(--brass);
}
.backup-btn:active { background: var(--field); }
.backup-btn.busy { opacity: .6; pointer-events: none; }

.summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-4); }
.summary-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: var(--sp-4) var(--sp-3); text-align: center;
}
.summary-num { font-size: 24px; font-weight: 700; color: var(--heading); line-height: 1; margin-bottom: 4px; }
/* v2.23 — var(--meta-text), bukan var(--muted). Lihat catatan token
   di :root: label inilah yang memberi ARTI pada angka di atasnya. */
.summary-label { font-size: 11px; color: var(--meta-text); }
.summary-full { grid-column: 1 / -1; }
.summary-full .summary-num { font-size: 20px; }

/* v2.11 — tombol collapse/expand 4 stat card tambahan di Dashboard.
   var(--brass) polos gagal AA di light mode (2.29:1 di atas kartu
   putih — sama kasusnya dengan .ai-btn yang diperbaiki di v2.10).
   Pakai warna yang sama persis dengan .ai-btn/.ai-summary supaya
   konsisten, dan sudah lolos kontras di kedua mode (lihat catatan
   --ai-accent-text di :root). */
.dash-kpi-toggle {
  text-align: center; font-size: 12.5px; font-weight: 600; color: #8A6D1E;
  padding: var(--sp-2); margin-bottom: var(--sp-2); cursor: pointer; user-select: none;
}
.dash-kpi-toggle:active { opacity: .7; }
body.dark-mode .dash-kpi-toggle { color: var(--ai-accent-text); }

/* ── DASBOR ── */
.dash-chart-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: var(--sp-4); margin-bottom: var(--sp-3);
}
.dash-chart-title { font-size: 13px; font-weight: 700; color: var(--heading); margin-bottom: var(--sp-3); }
.dash-chart-wrap { position: relative; height: 220px; }
/* v2.11 — chart "Daily Activity" punya sampai 31 batang (1 per hari),
   butuh tinggi lebih pendek dari chart 5-kategori biar tidak terlihat
   gepeng/lebar berlebihan di layar sempit HP. */
.dash-chart-wrap.dash-chart-wide { height: 160px; }

/* ── RIWAYAT ── */
.riwayat-head { margin-bottom: var(--sp-3); }
.riwayat-empty { text-align: center; color: var(--muted); font-size: 14px; padding: var(--sp-7) 0; }
/* v2.18 — 7 kelas dihapus: .riwayat-item, .riwayat-top, .riwayat-id,
   .riwayat-date, .riwayat-task, .riwayat-meta, .riwayat-chip.

   Semuanya sisa tampilan History versi lama yang berbentuk daftar
   kartu. Sejak digantikan renderWorksheetTable (kelas .ws-*), tidak
   satu pun dari kelas ini pernah dipasang lagi — nol di markup, nol
   di string JS, nol di querySelector. .riwayat-head dan
   .riwayat-empty di atas TETAP dipakai, jadi tidak ikut dihapus. */

/* ── TAMPILAN WORKSHEET (tabel) — dipakai Riwayat & Laporan ──
   Kartu (di atas) diganti tabel supaya banyak baris lebih gampang
   dipindai matanya, mirip Excel/Sheets. Wrapper di-scroll horizontal
   karena kolomnya lebih banyak dari lebar layar HP; kolom Tanggal
   & Task tetap kelihatan duluan tanpa geser, kolom lain di sebelah
   kanan (ID, Work Type, Status) digeser kalau perlu. */
.ws-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
}
.ws-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 12.5px; }
.ws-table thead th {
  position: sticky; top: 0; background: var(--field); color: var(--mid);
  font-weight: 700; text-align: left; padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.ws-table tbody td {
  padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line);
  color: var(--ink); vertical-align: top;
}
.ws-table tbody tr:last-child td { border-bottom: none; }
.ws-table tbody tr.ws-row-clickable { cursor: pointer; transition: background .12s; }
.ws-table tbody tr.ws-row-clickable:active { background: var(--field); }
/* v2.23 — var(--meta-text): kolom Date paling sering dibaca di tabel
   ini, dan Task ID dipakai saat merujuk satu task ke orang lain. */
.ws-col-date  { white-space: nowrap; color: var(--meta-text); }
.ws-col-id    { white-space: nowrap; color: var(--meta-text); font-size: 11.5px; }
.ws-col-task  { min-width: 200px; max-width: 280px; line-height: 1.4; }
.ws-col-chip  { white-space: nowrap; }
.ws-chip {
  display: inline-block; font-size: 10.5px; font-weight: 600; padding: 2px 7px;
  border-radius: 6px; background: var(--field); color: var(--mid); white-space: nowrap;
}
.ws-chip.critical { background: rgba(192,57,43,.14); color: var(--danger-text); }
.ws-chip.high     { background: rgba(183,121,31,.14); color: var(--amber); }
.ws-chip.done     { background: rgba(46,125,91,.14); color: #2E7D5B; }
/* v2.13 — chip jenis hari (Day Off, Public Holiday, dst) di kolom Task.
   Warna brass supaya jelas beda dari chip Work type yang abu netral.
   Kontras dihitung dengan formula WCAG (SOP kategori 11), bukan dikira:
     light : #7E6319 di atas latar hasil blend #F5EFDF = 4,96:1  (AA lolos)
     dark  : #E6C878 di atas latar hasil blend #36352D = 7,57:1  (AA lolos)
   Catatan: #8A6D1E — warna brass-gelap yang dipakai .ai-btn — dicoba
   lebih dulu dan hanya dapat 4,27:1 di atas latar ini, jadi DITOLAK. */
.ws-chip.dayoff   { background: rgba(201,168,76,.18); color: #7E6319; }
body.dark-mode .ws-chip.dayoff { color: var(--ai-accent-text); }
.ws-hint { font-size: 11px; color: var(--muted); text-align: center; padding: var(--sp-2) 0 0; }
/* v2.23 — penanda "tidak ada teks task". Dulu ini satu-satunya sisa
   style="color:var(--muted)" INLINE di seluruh file, dan style inline
   itulah pola yang menyembunyikan bug kontras v2.20 dari audit selama
   berbulan-bulan: alat audit membaca blok CSS, bukan atribut style.
   Dipindah ke kelas supaya ikut terperiksa, sekalian dinaikkan ke
   --mid (5,47:1 / 8,12:1 — lolos AA di kedua mode). */
.ws-dash { color: var(--mid); }
/* v2.18 — 3 pengubah .riwayat-chip dihapus bersama kelas induknya.
   Penggantinya .ws-chip.critical / .high / .done di blok worksheet. */

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  /* v2.10 — padding vertikal 20→16px, berlaku ke semua .card di
     seluruh app (Input/Riwayat/Laporan/Dasbor). */
  padding: 16px var(--sp-4); margin-bottom: var(--sp-3);
  box-shadow: 0 1px 2px rgba(11,27,46,.03);
}
.card-title { font-size: 13px; font-weight: 600; color: var(--mid); margin-bottom: var(--sp-4); }
/* v2.10 — 16→12px, berlaku ke semua .field di seluruh app */
.field { margin-bottom: 12px; }
.field:last-child { margin-bottom: 0; }
.label { font-size: 13px; color: var(--mid); margin-bottom: var(--sp-2); display: block; }

.input, .textarea {
  width: 100%; background: var(--field); border: 1px solid var(--line); border-radius: 12px;
  padding: var(--sp-3) var(--sp-4); font-size: 16px; color: var(--ink);
  outline: none; transition: border-color .18s; -webkit-appearance: none; appearance: none;
}
.input:focus, .textarea:focus { border-color: var(--navy); }
.textarea { resize: none; height: 92px; line-height: 1.55; }

.date-row {
  position: relative; background: var(--field); border: 1px solid var(--line); border-radius: 12px;
  padding: var(--sp-3) var(--sp-4); display: flex; align-items: center; justify-content: space-between; min-height: 44px;
}
.date-text { font-size: 16px; color: var(--ink); }
.date-row input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; border: none; background: transparent; cursor: pointer; }

.picker-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--field); border: 1px solid var(--line); border-radius: 12px;
  padding: var(--sp-3) var(--sp-4); min-height: 44px; cursor: pointer;
}
.picker-row:active { background: #EAEDF1; }
/* v2.10 fix — sama kasusnya dengan .btn-logout:active */
body.dark-mode .picker-row:active { background: var(--line); }
.picker-value { font-size: 16px; color: var(--ink); }
/* v2.24 — var(--meta-text), bukan var(--muted). Ini KOREKSI klaim
   saya sendiri, bukan temuan baru dari kode.

   Saat mengajukan tiga opsi kontras --muted (2 Sep 2026), saya
   menyatakan bahwa dari 20 pemakaian --muted, "4 adalah ikon/
   dekoratif yang ambangnya 3:1, jadi lolos". Chevron ini salah
   satunya. Diukur di Chrome sungguhan 10 Sep 2026 pada elemen yang
   BENAR-BENAR terender, dengan latar efektif hasil komposit:

       --muted di atas --field  =  2,78:1 (light)

   Ambang ikon 3:1 pun TIDAK terlewati. Klaim saya salah — dan
   salahnya karena saya menggolongkannya "dekoratif" tanpa
   mengukurnya.

   Ini BUKAN membuka ulang keputusan Opsi C. Opsi C soal teks yang
   dibaca untuk mengambil keputusan, dan 11 tempat --muted lain
   sengaja dibiarkan sesuai keputusan itu. Yang ini beda: elemen
   yang saya laporkan LOLOS padahal gagal.

   --meta-text dipilih, bukan --mid: keduanya lolos, tapi
   --meta-text tetap lebih halus dari --mid di KEDUA mode, jadi
   chevron tidak berebut perhatian dengan teks nilai di baris yang
   sama.
       --meta-text  light 4,78  ·  dark 5,12   (lolos ambang TEKS)
       --mid        light 5,05  ·  dark 7,32   (terlalu tegas)

   Berlaku untuk 8 tempat: 4 picker statis di form Input, dan 4
   yang dibangun dinamis di sheet edit Riwayat. */
.picker-chevron { color: var(--meta-text); font-size: 15px; }

.tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.tag {
  font-size: 13px; padding: var(--sp-2) var(--sp-3); border-radius: 10px;
  background: var(--field); border: 1px solid var(--line); color: var(--mid);
  cursor: pointer; transition: all .16s; user-select: none; min-height: 36px; display: flex; align-items: center;
}
.tag:active { transform: scale(.96); }
.tag.on { background: var(--brass); border-color: var(--brass); color: #fff; font-weight: 600; }
.tag-add { font-size: 13px; padding: var(--sp-2) var(--sp-3); border-radius: 10px; background: transparent; border: 1px dashed var(--line); color: var(--muted); cursor: pointer; min-height: 36px; display: flex; align-items: center; }

.prio { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.pb {
  padding: var(--sp-3) 4px; border-radius: 12px; text-align: center;
  background: var(--field); border: 1px solid var(--line); font-size: 13px; color: var(--mid);
  cursor: pointer; transition: all .16s; user-select: none; min-height: 44px;
  display: flex; align-items: center; justify-content: center; white-space: nowrap;
}
.pb:active { transform: scale(.97); }
.pb.on { color: #fff; font-weight: 600; border-color: transparent; }
.pb[data-p="Low"].on      { background: #64748A; }
.pb[data-p="Medium"].on   { background: var(--navy); }
.pb[data-p="High"].on     { background: var(--amber); }
.pb[data-p="Critical"].on { background: var(--red); }

.switch-row { display: flex; align-items: center; justify-content: space-between; background: var(--field); border: 1px solid var(--line); border-radius: 12px; padding: var(--sp-3) var(--sp-4); cursor: pointer; min-height: 44px; }
.switch-label { font-size: 15px; color: var(--ink); }
.switch { width: 46px; height: 27px; border-radius: 100px; background: #CDD5DD; position: relative; flex-shrink: 0; transition: background .2s; }
.switch.on { background: var(--navy); }
body.dark-mode .switch { background: #3A4454; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch.on::after { transform: translateX(19px); }

.hint { font-size: 12.5px; color: var(--muted); margin-top: var(--sp-2); line-height: 1.5; }

/* v2.11 — margin-top ditambah supaya ada jarak jelas dari kartu
   di atasnya, DAN dari bottom nav di bawahnya (keluhan: tombol
   terlalu mepet ke nav khususnya di mode Libur). Padding-bottom
   .scroll sudah calc(nav-h + sp-7 [32px]) tapi dirasa masih mepet
   secara visual karena tombol langsung menempel kartu di atasnya
   tanpa jarak sendiri. */
.submit {
  width: 100%; border: none; background: var(--navy); color: #fff;
  border-radius: 14px; padding: var(--sp-4); min-height: 52px;
  font-size: 16px; font-weight: 600; cursor: pointer;
  margin-top: var(--sp-2);
  box-shadow: 0 4px 14px rgba(11,27,46,.20); transition: transform .1s, opacity .15s;
  position: relative; overflow: hidden;
}
.submit:active { transform: scale(.99); }
.submit:disabled { opacity: .55; }
.submit .lbl-txt, .submit .lbl-ok { transition: opacity .2s; }
.submit .lbl-load, .submit .lbl-ok {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; opacity: 0; transition: opacity .2s;
}
.submit.busy .lbl-txt { opacity: 0; }
.submit.busy .lbl-load { opacity: 1; }
.submit.done .lbl-txt { opacity: 0; }
.submit.done .lbl-ok { opacity: 1; }
.dot3 { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: bounce 1.3s infinite ease-in-out; }
.dot3:nth-child(2) { animation-delay: .16s; }
.dot3:nth-child(3) { animation-delay: .32s; }
@keyframes bounce { 0%,80%,100%{transform:translateY(0);opacity:.4} 40%{transform:translateY(-5px);opacity:1} }

/* v2.14 — NAV DIBUAT OPAQUE.

   Alasan 1 (aksesibilitas, terukur). Latar nav lama
   rgba(11,27,46,.06) di atas --bg menghasilkan warna efektif #E0E4E8.
   Label non-aktif memakai --muted #8A96A3 -> kontras hanya 2,36:1,
   GAGAL jauh dari AA 4,5:1 untuk teks 10,5px. Ini penjelasan terukur
   dari keluhan "label nav tidak kelihatan jelas".

   Alasan 2 (tampilan). backdrop-filter membuat penampilan nav berubah
   mengikuti apa pun yang lewat di belakangnya — termasuk toast yang
   muncul tepat di atasnya. Akibatnya nav kadang terlihat pudar dan
   seolah "menggantung". Latar solid menghilangkan seluruh variasi itu.

   Yang berubah: latar jadi var(--card) (ikut light/dark), backdrop-filter
   dihapus, warna label non-aktif --muted -> --mid, opacity ikon .72 -> .85.
   Kontras baru (formula WCAG, SOP kategori 11):
     label non-aktif : light 5,47:1   dark 8,12:1   (AA lolos)
     label aktif     : light 17,35:1  dark 17,10:1
     ikon non-aktif  : light 3,98:1   dark 6,22:1   (AA elemen UI 3:1 lolos)
   Posisi, ukuran, dan tinggi nav TIDAK diubah sama sekali. */
.nav {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 60;
  width: 100%; max-width: var(--app-w);
  background: var(--card);
  border-top: 1px solid var(--line);
  padding: var(--sp-2) var(--sp-1) calc(var(--sp-2) + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(5, 1fr);
}
.nb { border: none; background: none; text-align: center; font-size: 10.5px; font-weight: 600; color: var(--mid); cursor: pointer; padding: 6px 1px; min-height: 44px; transition: color .16s; }
.nb svg { display: block; margin: 0 auto 3px; opacity: .85; width: 23px; height: 23px; stroke-width: 2.1; }
/* v2.11 — warna nav aktif dipertegas. Sebelumnya var(--navy) untuk
   kedua mode: di light mode terasa kurang tegas di atas latar
   translucent-nya .nav (image: tab "Report" aktif tapi tidak
   kelihatan bold-nya). Di dark mode, var(--navy) yang gelap nyaris
   tak terbaca sama sekali di atas nav gelap (keluhan langsung).
   Sengaja pakai hex literal (bukan var(--ink), yang nilainya
   berbeda per mode) supaya aturan ini eksplisit dan tidak
   bergantung urutan cascade var(--ink) di :root vs body.dark-mode. */
.nb.on { color: #12181F; font-weight: 700; }
.nb.on svg { opacity: 1; stroke-width: 2.3; }
body.dark-mode .nb.on { color: #FFFFFF; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + var(--sp-6)); transform: translate(-50%, 18px); z-index: 9500;
  background: var(--navy); color: #fff; padding: var(--sp-3) var(--sp-5); border-radius: 13px;
  font-size: 13.5px; max-width: min(88vw, 420px); text-align: center;
  box-shadow: 0 10px 30px rgba(11,27,46,.32); opacity: 0; pointer-events: none; transition: all .3s ease;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.err  { background: var(--red); }
.toast.good { background: #2E7D5B; }

/* ── PWA: banner "versi baru tersedia" ──
   Beda dari toast biasa: TIDAK auto-hilang, punya tombol aksi,
   muncul dari ATAS (di bawah header) supaya tidak tumpang tindih
   dengan toast/bottom nav yang sudah pakai posisi bawah. */
.update-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9600;
  background: var(--brass); color: #fff; padding: var(--sp-3) var(--sp-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  transform: translateY(-100%); transition: transform .3s ease;
  padding-top: max(var(--sp-3), env(safe-area-inset-top));
}
.update-banner.on { transform: translateY(0); }
.update-banner-text { font-size: 13px; font-weight: 600; flex: 1; }
.update-banner-btn {
  background: #fff; color: var(--navy); font-size: 12.5px; font-weight: 700;
  padding: 6px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
/* v2.25 — Daily Routine Quick-Fill */
.routine-card { padding: 12px var(--sp-4); margin-bottom: var(--sp-3); }
.routine-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.routine-title { font-size: 13px; font-weight: 700; color: var(--heading); display: flex; align-items: center; gap: 6px; }
.routine-sub { font-size: 11px; color: var(--mid); font-weight: 500; }
.routine-chips { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px 2px 6px; scrollbar-width: none; }
.routine-chips::-webkit-scrollbar { display: none; }
.routine-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--field); border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 12px; font-size: 12.5px; font-weight: 600; color: var(--ink);
  cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: all .16s ease;
}
.routine-chip:active { transform: scale(.97); background: var(--line); }
.routine-chip-icon { font-size: 14px; line-height: 1; }
.routine-chip-txt { line-height: 1; }

/* v2.25 — Network Status Pill */
.net-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; padding: 2px 7px;
  border-radius: 6px; background: rgba(183,121,31,.16); color: #8A6D1E; margin-top: 2px;
}
body.dark-mode .net-badge { color: var(--ai-accent-text); }
.net-badge.offline { background: rgba(192,57,43,.14); color: var(--danger-text); }

.hidden { display: none !important; }
</style>
</head>
<body>

<!-- v2.12 — SOP kategori 8/14: skip link WAJIB jadi elemen pertama di body.
     Tidak terlihat sampai mendapat fokus keyboard (Tab pertama). Tanpa ini,
     pengguna keyboard/screen reader harus melewati seluruh header setiap
     kali sebelum mencapai isi halaman. -->
<a class="skip-link" href="#scroll">Skip to main content</a>

<div class="update-banner" id="updateBanner">
  <span class="update-banner-text">New version available</span>
  <span class="update-banner-btn" id="updateBannerBtn">Reload</span>
</div>

<div id="pinScreen">
  <div class="pin-wrap">
    <img class="pin-logo" id="pinLogo"
         src="https://anabhidev.com/MFB/missfish-logo.webp" alt="Miss Fish"
         onerror="this.style.display='none';document.getElementById('pinLogoFb').style.display='block'">
    <div class="pin-logo-fb" id="pinLogoFb">Miss Fish</div>

    <div class="pin-brand">MFB-IT · Daily Activity</div>
    <div class="pin-title">Welcome</div>
    <div class="pin-sub">Enter your PIN to continue.</div>

    <div class="pin-dots" id="pinDots">
      <div class="pin-dot"></div><div class="pin-dot"></div>
      <div class="pin-dot"></div><div class="pin-dot"></div>
    </div>

    <div class="pin-pad" id="pinPad">
      <button class="pin-key" data-k="1">1</button>
      <button class="pin-key" data-k="2">2</button>
      <button class="pin-key" data-k="3">3</button>
      <button class="pin-key" data-k="4">4</button>
      <button class="pin-key" data-k="5">5</button>
      <button class="pin-key" data-k="6">6</button>
      <button class="pin-key" data-k="7">7</button>
      <button class="pin-key" data-k="8">8</button>
      <button class="pin-key" data-k="9">9</button>
      <button class="pin-key ghost" data-k="clear">Clear</button>
      <button class="pin-key" data-k="0">0</button>
      <button class="pin-key ghost" data-k="del">&#9003;</button>
    </div>

    <div class="pin-msg" id="pinMsg"></div>
  </div>
</div>


<div id="app">

  <div class="header" id="header">
    <div class="hd-logo">
      <img src="https://anabhidev.com/MFB/missfish-logo.webp" alt="Miss Fish"
           onerror="this.style.display='none';document.getElementById('hdLogoFb').style.display='block'">
      <span class="hd-logo-fb hidden" id="hdLogoFb">Miss Fish</span>
    </div>

    <div class="hd-title"><span>IT Daily</span><span>Activity</span></div>

    <div class="hd-side">
      <button class="theme-toggle" id="themeToggle" aria-label="Toggle dark/light mode" type="button">
        <svg class="theme-icon-sun" width="17" height="17" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="2"/><path d="M12 2.5v2.5M12 19v2.5M4.2 4.2l1.8 1.8M18 18l1.8 1.8M2.5 12H5M19 12h2.5M4.2 19.8l1.8-1.8M18 6l1.8-1.8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
        <svg class="theme-icon-moon" width="17" height="17" viewBox="0 0 24 24" fill="none"><path d="M20 14.5A8.5 8.5 0 1 1 9.5 4a7 7 0 0 0 10.5 10.5Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>
      </button>
      <div class="hd-meta" id="sesTrigger">
        <div class="hd-time">
          <span class="hd-dot" id="sesDot"></span>
          <span class="hd-clock-main" id="clockMain">--:--</span><span class="hd-clock-sec" id="clockSec">--</span>
        </div>
        <div class="hd-date" id="hdDate">—</div>
        <div class="net-badge hidden" id="netBadge">Offline</div>
      </div>
    </div>
  </div>

  <!-- v2.12 — tabindex="-1" supaya skip link benar-benar MEMINDAHKAN fokus
       ke sini. Tanpa itu, sebagian peramban hanya menggeser tampilan
       sementara fokus keyboard tetap tertinggal di header. -->
  <div class="scroll" id="scroll" tabindex="-1">
    <div class="scroll-inner" id="viewInput">

      <!-- v2.10 — strip "Hari ini", 1 baris tipis di atas kartu
           "Tulis bebas". Diisi via JS (renderTodayStrip) dari
           state.taskToday yang sudah dikirim server saat login,
           jadi tidak butuh request tambahan. -->
      <div class="today-strip" id="todayStrip"></div>

      <!-- v2.12 — bar antrean offline. Disembunyikan selama antrean kosong,
           jadi pada pemakaian normal tidak menambah apa pun ke layar.
           role="status" supaya screen reader mengumumkan perubahannya
           tanpa memindahkan fokus pengguna. -->
      <div class="queue-bar hidden" id="queueBar" role="status" aria-live="polite">
        <span class="queue-bar-text" id="queueBarText"></span>
        <button class="queue-bar-btn" id="queueBarBtn" type="button">Send now</button>
      </div>

      <!-- v2.25 — Routine Checklist Chips (1-tap quick fill untuk tugas rutin harian IT restoran) -->
      <div class="card routine-card" id="routineCard">
        <div class="routine-head">
          <span class="routine-title">&#9889; Daily Routine Quick-Fill</span>
          <span class="routine-sub">1-tap auto fill</span>
        </div>
        <div class="routine-chips" id="routineChips" role="group" aria-label="Daily Routine Presets">
          <button class="routine-chip" type="button" data-routine="pos">
            <span class="routine-chip-icon">&#128438;&#65039;</span>
            <span class="routine-chip-txt">POS &amp; Printers</span>
          </button>
          <button class="routine-chip" type="button" data-routine="sound">
            <span class="routine-chip-icon">&#127911;</span>
            <span class="routine-chip-txt">Sound &amp; DJ Booth</span>
          </button>
          <button class="routine-chip" type="button" data-routine="wifi">
            <span class="routine-chip-icon">&#128246;</span>
            <span class="routine-chip-txt">Guest &amp; Staff WiFi</span>
          </button>
          <button class="routine-chip" type="button" data-routine="cctv">
            <span class="routine-chip-icon">&#128249;</span>
            <span class="routine-chip-txt">CCTV &amp; NVR</span>
          </button>
          <button class="routine-chip" type="button" data-routine="edc">
            <span class="routine-chip-icon">&#128179;</span>
            <span class="routine-chip-txt">EDC &amp; QRIS</span>
          </button>
        </div>
      </div>

      <div class="ai">
        <div class="ai-head">
          <div class="ai-title">&#10022; Free write</div>
          <!-- v2.23 — TOMBOL MIKROFON DIHAPUS. Keputusan user 2 Sep 2026.

               Alasannya bukan bug yang belum diperbaiki. Seluruh yang
               bisa dikerjakan dari sisi kode SUDAH dikerjakan: v2.15
               memindahkan getUserMedia ke paling depan (sebelumnya
               `await` di depannya menghabiskan transient user
               activation, sehingga dialog izin tidak pernah muncul),
               dan pesan errornya dibedakan per sebab.

               Yang tersisa di luar kendali kode: Web Speech API di
               Chrome Android bergantung layanan Google. Screenshot
               user membuktikan situsnya tidak pernah diblokir — ia
               belum pernah DITANYA. Tidak ada tweak yang bisa
               MENJAMIN fiturnya jalan.

               Tombol yang ditekan lalu gagal terasa seperti app-nya
               rusak. Itu lebih merugikan daripada tidak ada tombol.

               Input teks + "Parse with AI" TIDAK berubah sama sekali;
               itu jalur utamanya sejak awal, dan mikrofon hanya
               pengisi kotak yang sama. Nol fitur lain terpengaruh. -->
        </div>
        <textarea class="ai-box" id="aiInput"
          placeholder="Describe your work as-is. Example: replaced printer LAN cable, urgent."></textarea>
        <button class="ai-btn" id="aiBtn">
          <span class="ai-btn-txt">Parse with AI</span>
          <span class="ai-btn-load"><span class="dot3"></span><span class="dot3"></span><span class="dot3"></span></span>
        </button>
        <div class="ai-summary" id="aiSummary"></div>
      </div>

      <div class="card">
        <div class="card-title">When &amp; what</div>

        <div class="field">
          <label class="label" for="taskDate">Date</label>
          <div class="date-row">
            <span class="date-text" id="dateText">—</span>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style="opacity:.4;flex-shrink:0"><rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" stroke-width="2"/><path d="M3 9h18M8 3v4M16 3v4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
            <input type="date" id="taskDate">
          </div>
        </div>

        <div class="field">
          <label class="label">Day type</label>
          <div class="picker-row" id="rowActivity">
            <span class="picker-value" id="valActivity">Working Day</span>
            <span class="picker-chevron">&#8250;</span>
          </div>
        </div>

        <div class="field hidden" id="offBox">
          <div class="switch-row" id="offToggle">
            <span class="switch-label">Still working today?</span>
            <span class="switch" id="offSwitch"></span>
          </div>
          <!-- v2.10 — dipersingkat dari kalimat lebih panjang supaya
               muat 1 baris di lebar app standar (~488px konten, font
               12.5px). v2.11 — diterjemahkan ke Inggris. -->
          <div class="hint">Turn on if you're still working today.</div>
        </div>

        <div class="field" id="workTypeBox">
          <label class="label">Work type</label>
          <div class="picker-row" id="rowWorkType">
            <span class="picker-value" id="valWorkType">Task</span>
            <span class="picker-chevron">&#8250;</span>
          </div>
        </div>
      </div>

      <div class="card" id="workCard">
        <div class="card-title">Work</div>

        <div class="field">
          <label class="label" for="taskDesc">What did you work on</label>
          <textarea class="textarea" id="taskDesc" placeholder="Write it clearly, so it's easy to read again later."></textarea>
        </div>

        <!-- v2.14 — perangkat yang dikerjakan. Baris ini DISEMBUNYIKAN JS
             kalau server belum v1.14 atau kalau tabel asset masih kosong,
             supaya tidak ada picker yang dibuka lalu isinya nihil. -->
        <div class="field hidden" id="assetBox">
          <label class="label">Device / asset</label>
          <div class="picker-row" id="rowAsset">
            <span class="picker-value" id="valAsset">— none —</span>
            <span class="picker-chevron">&#8250;</span>
          </div>
        </div>

        <!-- v2.14 — foto bukti. capture="environment" membuat HP langsung
             membuka kamera belakang; pengguna tetap bisa memilih dari
             galeri. Input file-nya disembunyikan, yang ditekan adalah
             tombol di bawahnya. -->
        <div class="field hidden" id="photoBox">
          <label class="label">Photo evidence <span style="opacity:.6">— optional</span></label>
          <input type="file" id="photoInput" accept="image/*" capture="environment" class="sr-only">
          <div class="photo-row">
            <button class="photo-btn" id="photoBtn" type="button">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 8h3l1.5-2h7L17 8h3v11H4V8Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><circle cx="12" cy="13" r="3.2" stroke="currentColor" stroke-width="2"/></svg>
              <span id="photoBtnLabel">Add photo</span>
            </button>
            <img class="photo-thumb hidden" id="photoThumb" alt="Photo preview">
            <span class="photo-info" id="photoInfo"></span>
            <button class="photo-clear hidden" id="photoClear" type="button" aria-label="Remove photo">Remove</button>
          </div>
        </div>

        <!-- v2.12 — template task berulang. Seluruh isian disimpan lokal
             (localStorage), tidak pernah dikirim ke server. Baris ini
             disembunyikan JS selama belum ada template tersimpan. -->
        <div class="field hidden" id="tplBox">
          <label class="label">Templates</label>
          <div class="tags" id="tplGrid"></div>
        </div>

        <div class="field">
          <label class="label">Tags</label>
          <div class="tags" id="tagGrid">
            <span class="tag-add" style="opacity:.6">Loading tags…</span>
          </div>
        </div>

        <!-- Tombol simpan template diletakkan PALING BAWAH kartu Work,
             karena baru masuk akal ditekan setelah isian di atasnya
             selesai diisi. -->
        <div class="field" style="margin-bottom:0">
          <div class="tags">
            <span class="tag-add" id="tplSaveBtn" role="button" tabindex="0">&#43; save as template</span>
          </div>
        </div>
      </div>

      <div class="card" id="metaCard">
        <div class="card-title">Priority &amp; status</div>

        <div class="field">
          <label class="label">Priority</label>
          <div class="prio" id="prioGrid">
            <div class="pb" data-p="Low">Low</div>
            <div class="pb" data-p="Medium">Med</div>
            <div class="pb" data-p="High">High</div>
            <div class="pb" data-p="Critical">Ctrl</div>
          </div>
        </div>

        <div class="field">
          <label class="label">Status</label>
          <div class="picker-row" id="rowStatus">
            <span class="picker-value" id="valStatus">On Progress</span>
            <span class="picker-chevron">&#8250;</span>
          </div>
        </div>

        <!-- v2.14 — follow-up vendor. Muncul HANYA saat status
             "Waiting Vendor" — di status lain field ini cuma menambah
             panjang form tanpa gunanya. Tujuannya supaya task yang
             nyangkut di vendor punya tanggal tagih yang jelas, bukan
             terlupa karena tidak ada yang mengingatkan. -->
        <div class="vendor-box hidden" id="vendorBox">
          <div class="field">
            <label class="label" for="vendorName">Vendor name</label>
            <input class="input" id="vendorName" placeholder="E.g.: PT Sinar Komputer">
          </div>
          <div class="field">
            <label class="label" for="vendorFollowup">Follow up on</label>
            <div class="date-row">
              <span class="date-text" id="vendorFollowupText">—</span>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style="opacity:.4;flex-shrink:0"><rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" stroke-width="2"/><path d="M3 9h18M8 3v4M16 3v4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
              <input type="date" id="vendorFollowup">
            </div>
            <div class="hint">Leave empty if there is no promised date yet.</div>
          </div>
        </div>

        <div class="field">
          <label class="label" for="remarkInput">Remark <span style="opacity:.6">— optional</span></label>
          <input class="input" id="remarkInput" placeholder="E.g.: waiting for spare parts from vendor">
        </div>

        <!-- v2.25 — Shift Handover / Attention toggle -->
        <div class="field" style="margin-bottom:0">
          <div class="switch-row" id="rowHandover">
            <span class="switch-label">Shift Handover / Urgent Note</span>
            <span class="switch" id="switchHandover"></span>
          </div>
          <div class="hint">Flag this task for morning shift handover &amp; daily ops digest.</div>
        </div>
      </div>

      <button class="submit" id="submitBtn">
        <span class="lbl-txt">Save activity</span>
        <span class="lbl-load"><span class="dot3"></span><span class="dot3"></span><span class="dot3"></span></span>
        <span class="lbl-ok">&#10003; Saved</span>
      </button>
    </div>

    <div class="scroll-inner hidden" id="viewRiwayat">
      <div class="riwayat-head">
        <div class="card-title" style="margin-bottom:0" id="riwayatTitle">History — last 7 days</div>
      </div>

      <!-- v2.17 — penanda saat History sedang menampilkan "open tasks"
           hasil ketukan kartu Dashboard, bukan 7 hari terakhir. Tanpa
           penanda ini pengguna bisa mengira riwayatnya berubah sendiri. -->
      <div class="riwayat-mode hidden" id="riwayatModeBar" role="status">
        <span class="riwayat-mode-text" id="riwayatModeText"></span>
        <button class="riwayat-mode-btn" id="riwayatModeReset" type="button">Back to last 7 days</button>
      </div>

      <!-- v2.12 — pencarian seluruh riwayat (butuh Edge Function v1.13).
           Kotak kosong = perilaku lama, yaitu 7 hari terakhir. Kotak ini
           disembunyikan JS bila server masih versi lama, supaya tidak
           ada fitur yang tampak tersedia tapi tidak berfungsi. -->
      <div class="riwayat-search hidden" id="riwayatSearchBox">
        <label class="sr-only" for="riwayatSearch">Search all history</label>
        <input class="input" id="riwayatSearch" type="search" enterkeyhint="search"
               placeholder="Search all history — task, tag, remark">
      </div>
      <div id="riwayatList">
        <div class="riwayat-empty">Loading history…</div>
      </div>
    </div>

    <div class="scroll-inner hidden" id="viewLaporan">
      <div class="card-title">Report</div>

      <div class="report-filter">
        <div class="report-mode-tab on" data-mode="month" id="modeMonth">By month</div>
        <div class="report-mode-tab" data-mode="range" id="modeRange">Date range</div>
        <!-- v2.19 — mode ke-3: rekap untuk Operation Weekly Meeting
             tiap Selasa. Rentangnya DIHITUNG OTOMATIS (Rabu s/d Selasa)
             supaya tidak perlu memilih tanggal manual tiap minggu. -->
        <div class="report-mode-tab" data-mode="ops" id="modeOps">Ops week</div>
        <!-- v2.23 — mode ke-4: AI Intelligence Report. Narasi berbagian
             dari angka yang SUDAH dihitung server; Gemini hanya
             merangkai kalimatnya, tidak menghitung apa pun. -->
        <div class="report-mode-tab" data-mode="ai" id="modeAi">AI Report</div>
      </div>

      <!-- v2.23 — panel AI Report. Seluruhnya disembunyikan di mode lain. -->
      <div class="hidden" id="aiRow">
        <div class="ai-period-row">
          <div class="ai-period-tab on" data-p="this-week" id="aiPThisWeek">This week</div>
          <div class="ai-period-tab" data-p="last-week" id="aiPLastWeek">Last week</div>
          <div class="ai-period-tab" data-p="this-month" id="aiPThisMonth">This month</div>
          <div class="ai-period-tab" data-p="last-month" id="aiPLastMonth">Last month</div>
        </div>

        <div class="ai-opt-row">
          <div class="ai-range-label" id="aiRangeLabel">—</div>
          <!-- Toggle bahasa. Default EN sesuai permintaan; pilihan
               disimpan lokal supaya tidak perlu diatur ulang tiap kali. -->
          <div class="ai-lang" role="group" aria-label="Report language">
            <button class="ai-lang-btn on" id="aiLangEn" type="button">EN</button>
            <button class="ai-lang-btn" id="aiLangId" type="button">ID</button>
          </div>
        </div>

        <div class="report-btn-row" style="margin-top:var(--sp-2)">
          <button class="report-load-btn" id="aiGenBtn" type="button">Generate report</button>
          <button class="copy-btn" id="aiSavedBtn" type="button">Saved reports</button>
        </div>
        <div class="report-btn-row hidden" id="aiCopyRow" style="margin-top:var(--sp-2)">
          <button class="copy-btn" id="aiCopyBtn" type="button">Copy report for WhatsApp</button>
        </div>
      </div>

      <div class="ops-week-nav hidden" id="opsWeekRow">
        <button class="dash-month-btn" id="opsPrevWeek" type="button" aria-label="Previous week">&#8249;</button>
        <div class="ops-week-label" id="opsWeekLabel">—</div>
        <button class="dash-month-btn" id="opsNextWeek" type="button" aria-label="Next week">&#8250;</button>
      </div>

      <div class="report-month-row" id="reportMonthRow">
        <input type="month" class="input" id="reportMonth">
      </div>

      <div class="report-range-row hidden" id="reportRangeRow">
        <div class="date-row">
          <span class="date-text" id="reportStartText">Start</span>
          <input type="date" id="reportStart">
        </div>
        <div class="date-row">
          <span class="date-text" id="reportEndText">End</span>
          <input type="date" id="reportEnd">
        </div>
      </div>

      <div class="report-btn-row">
        <div class="report-load-btn" id="reportLoadBtn">Show</div>
        <div class="report-export-btn" id="reportExportBtn">Download Excel</div>
      </div>
      <div class="report-official-btn" id="reportOfficialBtn">Download Official Report (Day / Date / Task / Remark)</div>

      <!-- v2.14 — salin ke papan klip dalam format TSV, siap ditempel
           langsung ke Google Sheets / Excel Online. Ini JALAN TENGAH
           yang sadar: integrasi Google Sheets API sesungguhnya butuh
           OAuth + kredensial Google Cloud yang harus disiapkan manual
           dan dijaga masa berlakunya. Tempel-TSV memberi hasil akhir
           yang sama (data masuk ke Sheets) tanpa kredensial apa pun. -->
      <div class="report-btn-row" style="margin-top:var(--sp-2)">
        <button class="copy-btn" id="reportCopyBtn" type="button">Copy for Google Sheets</button>
      </div>

      <!-- v2.19 — hanya muncul di mode Ops week. Teks polos siap tempel
           ke grup WhatsApp; itu jalur tercepat di HP, jauh lebih mungkin
           dibaca orang daripada lampiran file. -->
      <div class="report-btn-row hidden" id="opsCopyRow" style="margin-top:var(--sp-2)">
        <button class="copy-btn" id="opsCopyBtn" type="button">Copy recap for WhatsApp</button>
      </div>

      <div id="reportSummary"></div>
      <div id="reportList"></div>

      <div class="backup-section">
        <div class="backup-divider"></div>
        <div class="backup-title">Backup Data</div>
        <div class="backup-desc">Download all data (including deleted items) as JSON and Excel — to keep in your own Google Drive.</div>
        <div class="backup-btn" id="backupBtn">Download All Data</div>
      </div>
    </div>

    <div class="scroll-inner hidden" id="viewDash">
      <!-- v2.17 — Dashboard sebelumnya TERKUNCI ke bulan berjalan
           (currentMonthRange memakai new Date() tanpa pilihan apa pun).
           Akibatnya setiap tanggal 1, Dashboard kosong melompong dan
           tidak ada cara melihat bulan yang baru saja selesai — justru
           saat rekap bulanan paling dibutuhkan. -->
      <div class="dash-month-nav">
        <button class="dash-month-btn" id="dashPrevMonth" type="button" aria-label="Previous month">&#8249;</button>
        <div class="dash-month-title">Dashboard — <span id="dashMonthLabel">this month</span></div>
        <button class="dash-month-btn" id="dashNextMonth" type="button" aria-label="Next month">&#8250;</button>
      </div>

      <!-- v2.11 — dashKpi sekarang wrapper polos (bukan .summary-grid
           langsung); JS renderDashboard() yang membangun grid + toggle
           di dalamnya, supaya bisa punya 2 grid terpisah (selalu
           tampil vs collapsible). -->
      <div id="dashKpi">
        <div class="summary-grid">
          <div class="summary-card"><div class="summary-num">—</div><div class="summary-label">Total task</div></div>
          <div class="summary-card"><div class="summary-num">—</div><div class="summary-label">Done</div></div>
        </div>
      </div>

      <div id="dashEmpty" class="riwayat-empty hidden">No activity this month yet.</div>

      <div id="dashCharts" class="hidden">
        <div class="dash-chart-card">
          <div class="dash-chart-title">Daily Activity</div>
          <div class="dash-chart-wrap dash-chart-wide"><canvas id="dashDailyChart"></canvas></div>
        </div>

        <div class="dash-chart-card">
          <div class="dash-chart-title">Task Status</div>
          <div class="dash-chart-wrap"><canvas id="dashStatusChart"></canvas></div>
        </div>

        <div class="dash-chart-card">
          <div class="dash-chart-title">Top 5 Tags</div>
          <div class="dash-chart-wrap"><canvas id="dashTagChart"></canvas></div>
        </div>

        <div class="dash-chart-card">
          <div class="dash-chart-title">Priority Distribution</div>
          <div class="dash-chart-wrap"><canvas id="dashPriorityChart"></canvas></div>
        </div>

        <div class="dash-chart-card">
          <div class="dash-chart-title">Work Type</div>
          <div class="dash-chart-wrap"><canvas id="dashWorkTypeChart"></canvas></div>
        </div>
      </div>
    </div>

    <!-- v2.14 — TAB LOG. Sebelumnya tab ini tidak punya markup sama
         sekali; menekannya hanya memunculkan toast "coming soon",
         padahal tabel activity_log sudah terisi sejak versi pertama.
         Butuh Edge Function v1.14 (action get-activity-log); kalau
         server masih lebih tua, tab ini menampilkan penjelasan,
         bukan error. -->
    <div class="scroll-inner hidden" id="viewLog">
      <div class="card-title">Activity log</div>
      <div class="log-filter" id="logFilter"></div>
      <div id="logList">
        <div class="log-empty">Loading activity log…</div>
      </div>
    </div>
  </div>

  <nav class="nav">
    <button class="nb on" data-tab="input">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M12 20h9" stroke="currentColor" stroke-linecap="round"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5Z" stroke="currentColor" stroke-linejoin="round"/></svg>
      Input
    </button>
    <button class="nb" data-tab="report">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect x="4" y="4" width="16" height="16" rx="2" stroke="currentColor"/><path d="M8 9h8M8 13h8M8 17h5" stroke="currentColor" stroke-linecap="round"/></svg>
      Report
    </button>
    <button class="nb" data-tab="dash">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect x="4" y="13" width="4" height="7" rx="1" stroke="currentColor"/><rect x="10" y="9" width="4" height="11" rx="1" stroke="currentColor"/><rect x="16" y="5" width="4" height="15" rx="1" stroke="currentColor"/></svg>
      Dashboard
    </button>
    <button class="nb" data-tab="log">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M4 6h16M4 12h16M4 18h10" stroke="currentColor" stroke-linecap="round"/></svg>
      Log
    </button>
    <button class="nb" data-tab="riwayat">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M12 8v4l3 3" stroke="currentColor" stroke-linecap="round"/><circle cx="12" cy="12" r="9" stroke="currentColor"/></svg>
      History
    </button>
  </nav>
</div>

<div class="toast" id="toast"></div>

<div class="sheet-backdrop" id="sheetBackdrop"></div>
<div class="sheet" id="sheet">
  <div class="sheet-handle"></div>
  <div class="sheet-title" id="sheetTitle">Judul</div>
  <div id="sheetBody"></div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js" data-cfasync="false"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.5.1/chart.umd.min.js" data-cfasync="false"></script>
<script data-cfasync="false">
const CONFIG = {
  SUPABASE_URL:      'https://hiwtsreqeizvmjcrxjxd.supabase.co',
  SUPABASE_ANON_KEY: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Imhpd3RzcmVxZWl6dm1qY3J4anhkIiwicm9sZSI6ImFub24iLCJpYXQiOjE3ODYyNTY4NjYsImV4cCI6MjEwMTgzMjg2Nn0.8v25vSSg0o5cw5qEadZ0WACycvId3rYEXQsNbxAarD0',
  FUNCTION_NAME:     'submit-task',
  GEMINI_MODEL:      'gemini-3.5-flash-lite',
  APP_TITLE:         'Miss Fish IT Daily Activity',
  APP_VERSION:       '2.25', // WAJIB sama dengan header file (SC bagian 5)
  PIN_LENGTH:        4,
  TIMEZONE:          'Asia/Makassar',
  SESSION_DAYS:      3,
};
const ENDPOINT = CONFIG.SUPABASE_URL + '/functions/v1/' + CONFIG.FUNCTION_NAME;

const Store = (() => {
  let memory = {}, usable = true;
  try { localStorage.setItem('__t','1'); localStorage.removeItem('__t'); } catch(e){ usable=false; }
  return {
    get(k)    { try { return usable ? localStorage.getItem(k) : memory[k] ?? null; } catch(e){ return memory[k] ?? null; } },
    set(k, v) { try { usable ? localStorage.setItem(k, v) : memory[k]=v; } catch(e){ memory[k]=v; } },
    del(k)    { try { usable ? localStorage.removeItem(k) : delete memory[k]; } catch(e){ delete memory[k]; } }
  };
})();
const KEY_TOKEN = 'mfbit_session';
const KEY_LOGIN_AT = 'mfbit_login_at';
const KEY_THEME = 'mfbit_theme';
// v2.12 — kunci baru. Semuanya HANYA lokal di HP masing-masing;
// tidak ada satu pun yang dikirim ke server.
const KEY_QUEUE  = 'mfbit_queue';      // antrean submit saat offline
const KEY_TPL    = 'mfbit_templates';  // template task berulang
const KEY_RECENT = 'mfbit_recent';     // jejak submit, untuk deteksi duplikat

// Terapkan tema SESEGERA MUNGKIN (sebelum konten lain dieksekusi) supaya
// tidak ada "kedipan" sesaat warna terang sebelum dark mode diterapkan.
//
// v2.12 — SOP kategori 13: urutan penentuan tema sekarang
//   1. pilihan manual pengguna (localStorage) — SELALU menang, dan
//   2. kalau belum pernah memilih, ikuti tema sistem operasi.
// Sebelumnya langkah 2 tidak ada, jadi pengguna yang HP-nya dark mode
// tetap disambut layar terang sampai menekan tombol tema sendiri.
//
// Kelas .dark-mode DIPERTAHANKAN sebagai penggerak seluruh CSS lama
// (15 selector). Atribut data-theme di <html> ditambahkan agar selaras
// SOP, sekaligus jadi pegangan kalau nanti CSS dipindah ke token
// [data-theme] — perubahan menambah, bukan mengganti (SOP 8.7).
function prefersDarkOS() {
  try { return window.matchMedia('(prefers-color-scheme: dark)').matches; }
  catch (e) { return false; } // peramban tanpa matchMedia — anggap terang
}

function applyTheme(isDark) {
  document.body.classList.toggle('dark-mode', isDark);
  document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
}

(function applyInitialTheme() {
  const saved = Store.get(KEY_THEME);
  const isDark = saved ? (saved === 'dark') : prefersDarkOS();
  applyTheme(isDark);
})();

// Kalau pengguna BELUM pernah memilih manual, ikuti perubahan tema OS
// secara langsung (mis. jadwal otomatis gelap saat malam di HP).
// Begitu ia memilih manual, listener ini tidak berpengaruh lagi karena
// nilai tersimpan diprioritaskan.
try {
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
    if (!Store.get(KEY_THEME)) applyTheme(e.matches);
  });
} catch (e) { /* peramban lama: abaikan, tema awal sudah benar */ }

function toggleTheme() {
  const isDark = !document.body.classList.contains('dark-mode');
  applyTheme(isDark);
  Store.set(KEY_THEME, isDark ? 'dark' : 'light');
}

const ACTIVITY_TYPES = [
  { db:'Working Day',    id:'Working Day'    },
  { db:'Day Off',        id:'Day Off'        },
  { db:'Public Holiday', id:'Public Holiday' },
  { db:'Annual Leave',   id:'Annual Leave'   },
  { db:'Sick Leave',     id:'Sick Leave'     },
  { db:'Extra Off (EO)', id:'Extra Off'      },
  { db:'PDO',            id:'PDO'            },
];
const WORK_TYPES = ['Task','Meeting Online','Meeting Offline','Training','Trainer','WFH','Remote Working','Event/Seminar'];
const STATUS_TYPES = [
  { db:'On Progress',    id:'On Progress'    },
  { db:'Done',           id:'Done'           },
  { db:'Pending',        id:'Pending'        },
  { db:'Waiting Vendor', id:'Waiting Vendor' },
  { db:'Cancelled',      id:'Cancelled'      },
];

// v2.25 — Preset Rutin Harian IT Miss Fish Bali (Option B)
const ROUTINE_PRESETS = {
  pos: {
    name: 'POS & Kitchen Printers',
    task: 'Daily routine health check on POS terminals, kitchen thermal printers, cash drawer test, and receipt feed.',
    tag: 'Hardware',
    priority: 'High',
    status: 'Done',
  },
  sound: {
    name: 'Sound & DJ Booth',
    task: 'Pre-service audio level and master limiter check, DJ booth mixer connections, and lounge sound distribution.',
    tag: 'Entertainment',
    priority: 'Medium',
    status: 'Done',
  },
  wifi: {
    name: 'Guest & Staff WiFi',
    task: 'Wireless APs signal verification, guest captive portal check, and peak-hour bandwidth speedtest.',
    tag: 'Network',
    priority: 'Medium',
    status: 'Done',
  },
  cctv: {
    name: 'CCTV & NVR Storage',
    task: 'Surveillance cameras angle verification, NVR disk recording status, and storage retention check.',
    tag: 'CCTV',
    priority: 'Medium',
    status: 'Done',
  },
  edc: {
    name: 'EDC & QRIS Settlement',
    task: 'EDC bank terminals (BCA, Mandiri) connection check, paper roll readiness, and QRIS dynamic display test.',
    tag: 'POS',
    priority: 'High',
    status: 'Done',
  },
};

const BULAN3 = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

const state = {
  token: null, loginAt: null,
  activityType: 'Working Day', workType: 'Task', priority: 'Medium',
  status: 'On Progress', offWorking: false,
  tags: [], selected: new Set(),
  tagsExpanded: false, // v2.10 — tag collapsible, default ringkas
  editCount: 0, openedAt: Date.now(), submitCount: 0, taskToday: 0,
  currentView: 'input',
  // v2.14 — aset, vendor, foto. assetId null = tidak ditautkan ke
  // perangkat mana pun (itu kondisi normal untuk task umum).
  assets: [], assetId: null,
  photoDataUrl: '',
  // v2.25 — penanda serah terima shift / catatan penting
  isHandover: false,
};

function switchView(view) {
  state.currentView = view;
  $('viewInput').classList.toggle('hidden', view !== 'input');
  $('viewRiwayat').classList.toggle('hidden', view !== 'riwayat');
  $('viewLaporan').classList.toggle('hidden', view !== 'laporan');
  $('viewDash').classList.toggle('hidden', view !== 'dash');
  $('viewLog').classList.toggle('hidden', view !== 'log'); // v2.14
  // v2.12 — BUG FIX: data-tab tombol memakai 'report', sedangkan nama view
  // internal adalah 'laporan'. Membandingkan keduanya mentah membuat tab
  // Report TIDAK PERNAH mendapat kelas .on. Dipetakan dulu di sini.
  const tabKey = view === 'laporan' ? 'report' : view;
  document.querySelectorAll('.nb').forEach(b => {
    const isOn = b.dataset.tab === tabKey;
    b.classList.toggle('on', isOn);
    // SOP kategori 16 — status aktif harus terbaca screen reader,
    // bukan hanya terlihat lewat warna.
    if (isOn) b.setAttribute('aria-current', 'page');
    else b.removeAttribute('aria-current');
  });
  $('scroll').scrollTop = 0;
  // v2.12 — kalau kotak pencarian sedang berisi, jangan timpa hasilnya
  // dengan daftar 7 hari setiap kali pengguna pindah tab lalu kembali.
  // v2.17 — mode "open" menang atas pencarian: mode itu baru saja
  // dipilih pengguna lewat ketukan kartu, jadi itu niat terbarunya.
  if (view === 'riwayat') {
    const sq = $('riwayatSearch') ? $('riwayatSearch').value.trim() : '';
    if (riwayatMode === 'open') loadRiwayat();
    else if (sq.length >= 2) runRiwayatSearch(sq);
    else loadRiwayat();
  }
  if (view === 'laporan') initReportDefaults();
  if (view === 'dash') loadDashboard();
  if (view === 'log') loadActivityLog(); // v2.14
}

// Form dianggap "kotor" bila ada isian yang belum disimpan —
// dipakai untuk peringatan sebelum menutup tab (bukan pencegahan mutlak,
// browser tidak mengizinkan itu; ini hanya jeda konfirmasi).
function formIsDirty() {
  return $('taskDesc') && ($('taskDesc').value.trim() !== '' || $('remarkInput').value.trim() !== '');
}
window.addEventListener('beforeunload', (e) => {
  if (formIsDirty()) { e.preventDefault(); e.returnValue = ''; }
});

function $(id) { return document.getElementById(id); }

function toast(msg, kind) {
  const t = $('toast');
  t.textContent = msg; t.className = 'toast on' + (kind ? ' ' + kind : '');
  clearTimeout(toast._t);
  toast._t = setTimeout(() => { t.className = 'toast'; }, 2800);
}

function todayISO() { return new Date().toLocaleDateString('en-CA', { timeZone: CONFIG.TIMEZONE }); }
function formatTanggalPendek(iso) {
  const [y,m,d] = iso.split('-').map(Number);
  return String(d).padStart(2,'0') + ' ' + BULAN3[m-1] + ' ' + y;
}
// v2.11 — formatTanggalPanjang sekarang memakai nama hari/bulan
// Inggris (dayNameEN/dateLongEN, sudah ada sebelumnya khusus untuk
// export Laporan resmi). Fungsi dipertahankan namanya (dipakai di
// banyak tempat) supaya tidak perlu ubah semua pemanggilnya.
function formatTanggalPanjang(iso) {
  return dayNameEN(iso) + ', ' + dateLongEN(iso);
}

const DAY_NAME_EN = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
const MONTH_NAME_EN = ['January','February','March','April','May','June','July','August','September','October','November','December'];
function dayNameEN(iso) {
  const [y,m,d] = iso.split('-').map(Number);
  return DAY_NAME_EN[new Date(y, m-1, d).getDay()];
}
function dateLongEN(iso) {
  const [y,m,d] = iso.split('-').map(Number);
  return d + ' ' + MONTH_NAME_EN[m-1] + ' ' + y;
}

function trackEdit() { state.editCount++; }

function openSheet(title, bodyHtml) {
  sheetGen++; // v2.20 — penanda "sheet berganti", lihat openOptionSheet
  $('sheetTitle').textContent = title;
  $('sheetBody').innerHTML = bodyHtml;
  $('sheetBackdrop').classList.add('on');
  $('sheet').classList.add('on');
  // Sheet di-scroll ke atas setiap kali dibuka. Tanpa ini, membuka
  // ulang detail task setelah memilih status akan tetap berada di
  // posisi scroll sebelumnya — terasa seperti isinya berubah sendiri.
  $('sheet').scrollTop = 0;
}
function closeSheet() {
  $('sheetBackdrop').classList.remove('on');
  $('sheet').classList.remove('on');
}
// v2.21 — menutup sheet lewat backdrop berarti membatalkan. Draft
// dibuang supaya perubahan yang tidak disimpan tidak muncul lagi
// saat task itu dibuka berikutnya — itu akan terasa seperti data
// tersimpan padahal tidak.
$('sheetBackdrop').addEventListener('click', () => {
  rwDraft = { id: null };
  closeSheet();
});

// Nomor urut sheet. Dinaikkan setiap kali openSheet dipanggil, jadi
// bisa dipakai untuk tahu apakah sheet yang ada di layar SEKARANG
// masih sheet yang sama dengan yang tadi.
let sheetGen = 0;

function openOptionSheet(title, options, currentDb, onPick) {
  const html = '<div class="option-list">' + options.map(o => {
    const sel = o.db === currentDb;
    return '<div class="option-item' + (sel ? ' selected' : '') + '" data-db="' + o.db + '">'
         + '<span>' + o.id + '</span><span class="option-check">&#10003;</span></div>';
  }).join('') + '</div>';

  openSheet(title, html);
  $('sheetBody').querySelectorAll('.option-item').forEach(el => {
    el.addEventListener('click', () => {
      // v2.20 — BUG FIX PENTING.
      //
      // Sebelumnya baris ini SELALU closeSheet() setelah onPick.
      // Masalahnya: app ini hanya punya SATU elemen sheet yang
      // dipakai bersama. Kalau onPick membuka sheet lain (misalnya
      // openRiwayatDetail, supaya nilai status yang baru terlihat),
      // urutannya jadi:
      //     onPick   -> sheet dibuka ulang dengan detail task
      //     closeSheet -> MENUTUP sheet yang baru saja dibuka itu
      //
      // Akibatnya pengguna memilih status, sheet berkedip, lalu
      // tertutup — belum sempat menekan "Save changes". Bukan
      // "gagal simpan": sheet-nya ditutup oleh kodenya sendiri.
      //
      // Perbaikannya: catat nomor sheet SEBELUM onPick. Kalau setelah
      // onPick nomornya berubah, berarti onPick sudah membuka sheet
      // baru — jangan ditutup. Kalau tidak berubah (pemakaian normal
      // di form Input), tutup seperti biasa.
      const genSebelum = sheetGen;
      onPick(el.dataset.db);
      if (sheetGen === genSebelum) closeSheet();
    });
  });
}

function sisaWaktuSesi() {
  if (!state.loginAt) return null;
  const berakhir = state.loginAt + CONFIG.SESSION_DAYS * 24 * 60 * 60 * 1000;
  return berakhir - Date.now();
}

function updateSessionDot() {
  const sisa = sisaWaktuSesi();
  const dot = $('sesDot');
  if (sisa === null) { dot.className = 'hd-dot'; return; }
  if (sisa < 0)                    dot.className = 'hd-dot stale';
  else if (sisa < 24*60*60*1000)   dot.className = 'hd-dot warn';
  else                              dot.className = 'hd-dot';
}

function formatSisaWaktu(ms) {
  if (ms <= 0) return 'Already ended';
  const jam = Math.floor(ms / (60*60*1000));
  const hari = Math.floor(jam / 24);
  const sisaJam = jam % 24;
  if (hari > 0) return hari + ' day' + (hari > 1 ? 's' : '') + ' ' + sisaJam + ' hr left';
  return sisaJam + ' hr left';
}

function openSessionSheet() {
  const sisa = sisaWaktuSesi();
  const queueLen = readQueue().length;
  const netStatusText = navigator.onLine
    ? (queueLen > 0 ? 'Online · ' + queueLen + ' queued' : 'Online · Cloud Connected')
    : 'Offline · ' + queueLen + ' queued';
  const html = '<div class="session-info">'
    + '<div class="session-row"><span class="session-label">Session status</span>'
    + '<span class="session-value">' + (sisa > 0 ? 'Active' : 'Ended') + '</span></div>'
    + '<div class="session-row"><span class="session-label">Valid until</span>'
    + '<span class="session-value">' + (sisa !== null ? formatSisaWaktu(sisa) : '—') + '</span></div>'
    + '<div class="session-row"><span class="session-label">Connection</span>'
    + '<span class="session-value">' + netStatusText + '</span></div>'
    + '</div>'
    + '<div style="padding:0 20px"><button class="btn-logout" id="btnLogoutInline">Log out</button></div>';

  openSheet('Session', html);
  $('btnLogoutInline').addEventListener('click', doLogout);
}

function doLogout() {
  closeSheet();
  Store.del(KEY_TOKEN);
  Store.del(KEY_LOGIN_AT);
  state.token = null;
  showPin('');
}

async function callApi(payload) {
  let res;
  try {
    res = await fetch(ENDPOINT, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + CONFIG.SUPABASE_ANON_KEY },
      body: JSON.stringify(payload),
    });
  } catch (e) {
    console.error('[MFB-IT] fetch gagal:', e);
    const err = new Error('Could not reach the server. The connection may be down, or the request was blocked by the site security policy (CORS/CSP). Open the browser Console for details.');
    err.network = true;
    throw err;
  }

  let data;
  try { data = await res.json(); }
  catch (e) {
    console.error('[MFB-IT] jawaban bukan JSON. Status:', res.status);
    throw new Error('Server replied ' + res.status + ', but the content could not be read.');
  }

  if (res.status === 401 && payload.action !== 'login') {
    Store.del(KEY_TOKEN); Store.del(KEY_LOGIN_AT);
    state.token = null;
    showPin('Session ended. Please enter PIN again.');
    throw new Error(data.error || 'Session ended.');
  }
  return data;
}

function clientMeta() {
  const ua = navigator.userAgent;
  let browser='Other';
  if (/Edg\//.test(ua)) browser='Edge';
  else if (/OPR\//.test(ua)) browser='Opera';
  else if (/Chrome\//.test(ua)) browser='Chrome';
  else if (/Firefox\//.test(ua)) browser='Firefox';
  else if (/Safari\//.test(ua)) browser='Safari';

  let os='Other';
  if (/Android/.test(ua)) os='Android';
  else if (/iPhone|iPad|iPod/.test(ua)) os='iOS';
  else if (/Windows/.test(ua)) os='Windows';
  else if (/Mac OS X/.test(ua)) os='macOS';
  else if (/Linux/.test(ua)) os='Linux';

  const device = /Mobi|Android|iPhone/.test(ua) ? 'Mobile' : /iPad|Tablet/.test(ua) ? 'Tablet' : 'Desktop';

  let load = 0;
  try { const nav = performance.getEntriesByType('navigation')[0]; if (nav) load = Math.round(nav.duration); } catch(e){}

  let sid = Store.get('mfbit_sid');
  if (!sid) { sid = 'S' + Date.now().toString(36) + Math.random().toString(36).slice(2,7); Store.set('mfbit_sid', sid); }

  return {
    formEditCount: state.editCount,
    timeToSubmitSec: Math.round((Date.now() - state.openedAt) / 1000),
    tasksInSession: state.submitCount + 1,
    browser, os, deviceType: device,
    screenResolution: screen.width + 'x' + screen.height,
    connectionType: (navigator.connection && navigator.connection.effectiveType) || '',
    pageLoadTimeMs: load,
    language: navigator.language || '',
    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone || '',
    referrer: document.referrer || '',
    userAgentRaw: ua,
    sessionId: sid,
  };
}

let pinBuffer = '', pinBusy = false;

function showPin(message) {
  // v2.22 — draft edit dibuang saat layar PIN muncul (logout atau sesi
  // habis). Kalau tidak, draft yang belum tersimpan bertahan; setelah
  // login ulang dan membuka task yang sama, perubahan lama muncul lagi
  // dan terasa seperti sudah tersimpan padahal tidak pernah terkirim.
  rwDraft = { id: null };
  pinBuffer = ''; paintDots();
  $('pinMsg').textContent = message || '';
  $('pinMsg').className = 'pin-msg' + (message ? ' err' : '');
  $('pinScreen').style.display = 'flex';
  $('pinScreen').classList.remove('hide');
  $('app').classList.remove('on');
}
function hidePin() {
  $('pinScreen').classList.add('hide');
  setTimeout(() => { $('pinScreen').style.display = 'none'; }, 420);
  $('app').classList.add('on');
}
function paintDots(errored) {
  const dots = $('pinDots').children;
  for (let i=0;i<dots.length;i++) dots[i].className = 'pin-dot' + (errored ? ' err' : (i<pinBuffer.length ? ' fill' : ''));
}
function pinPress(k) {
  if (pinBusy) return;
  if (k==='clear') { pinBuffer=''; paintDots(); return; }
  if (k==='del')   { pinBuffer=pinBuffer.slice(0,-1); paintDots(); return; }
  if (pinBuffer.length >= CONFIG.PIN_LENGTH) return;
  pinBuffer += k; paintDots();
  if (pinBuffer.length === CONFIG.PIN_LENGTH) submitPin();
}
async function submitPin() {
  pinBusy = true;
  $('pinMsg').textContent = 'Checking…'; $('pinMsg').className = 'pin-msg busy';
  try {
    const r = await callApi({ action:'login', pin: pinBuffer });
    if (!r.ok) {
      paintDots(true);
      $('pinDots').classList.add('shake');
      setTimeout(()=>$('pinDots').classList.remove('shake'), 420);
      $('pinMsg').textContent = r.error || 'Incorrect PIN.';
      $('pinMsg').className = 'pin-msg err';
      // Saat terkunci, jeda lebih panjang agar pesan sempat terbaca —
      // dan tombol PIN tetap non-aktif sedikit lebih lama.
      const jeda = r.locked ? 1600 : 700;
      setTimeout(()=>{ pinBuffer=''; paintDots(); pinBusy=false; }, jeda);
      return;
    }
    state.token = r.sessionToken;
    state.loginAt = Date.now();
    Store.set(KEY_TOKEN, r.sessionToken);
    Store.set(KEY_LOGIN_AT, String(state.loginAt));
    $('pinMsg').textContent = ''; pinBusy = false;
    hidePin();
    // login v1.9 sudah membawa tags + taskToday sekaligus —
    // startApp menerimanya langsung, tidak perlu panggilan kedua.
    // v2.12 — r.serverVersion baru ada di Edge Function v1.13+. Kalau
    // server masih lama nilainya undefined, dan fitur yang bergantung
    // padanya cukup disembunyikan (SOP 8.8).
    applyServerCapabilities(r.serverVersion);
    startApp({ tags: r.tags, taskToday: r.taskToday });
  } catch (e) {
    $('pinMsg').textContent = e.message || 'Could not reach the server.';
    $('pinMsg').className = 'pin-msg err';
    setTimeout(()=>{ pinBuffer=''; paintDots(); pinBusy=false; }, 1200);
  }
}

// v2.25 — Routine Checklist Quick-Fill (Option B)
function applyRoutinePreset(key) {
  const p = ROUTINE_PRESETS[key];
  if (!p) return;
  state.activityType = 'Working Day';
  const foundAct = ACTIVITY_TYPES.find(a => a.db === 'Working Day');
  if (foundAct) $('valActivity').textContent = foundAct.id;
  applyActivityMode();

  state.workType = 'Task';
  $('valWorkType').textContent = 'Task';

  $('taskDesc').value = p.task;

  const targetTag = p.tag;
  if (!state.tags.some(t => t.toLowerCase() === targetTag.toLowerCase())) {
    state.tags.push(targetTag);
  }
  const actualTag = state.tags.find(t => t.toLowerCase() === targetTag.toLowerCase()) || targetTag;
  state.selected.add(actualTag);
  buildTags();

  state.priority = p.priority;
  buildPriority();

  state.status = p.status;
  const foundSt = STATUS_TYPES.find(s => s.db === p.status);
  if (foundSt) $('valStatus').textContent = foundSt.id;
  applyVendorBox();

  trackEdit();
  toast('Routine loaded: ' + p.name, 'good');
}

function setupRoutineChips() {
  document.querySelectorAll('.routine-chip').forEach(btn => {
    btn.addEventListener('click', () => {
      const key = btn.dataset.routine;
      applyRoutinePreset(key);
    });
  });
}

// v2.25 — Shift Handover / Attention toggle (Option D)
function setupHandoverToggle() {
  $('rowHandover').addEventListener('click', () => {
    state.isHandover = !state.isHandover;
    $('switchHandover').classList.toggle('on', state.isHandover);
    if (state.isHandover) {
      const hTag = 'Handover';
      if (!state.tags.some(t => t.toLowerCase() === hTag.toLowerCase())) {
        state.tags.push(hTag);
      }
      const actualTag = state.tags.find(t => t.toLowerCase() === hTag.toLowerCase()) || hTag;
      state.selected.add(actualTag);
      buildTags();
      toast('Flagged for Shift Handover', 'good');
    }
    trackEdit();
  });
}

// v2.25 — Network Status & Sync Queue Indicator (Option D)
function setupNetworkListeners() {
  window.addEventListener('online', () => {
    renderQueueBar();
    toast('Back online — syncing entries…', 'good');
    flushQueue(false);
  });
  window.addEventListener('offline', () => {
    renderQueueBar();
    toast('Offline mode — entries will be queued locally', 'err');
  });
  renderQueueBar();
}

function setupActivityPicker() {
  $('rowActivity').addEventListener('click', () => {
    openOptionSheet('Day type', ACTIVITY_TYPES, state.activityType, (db) => {
      state.activityType = db;
      const found = ACTIVITY_TYPES.find(a => a.db === db);
      $('valActivity').textContent = found.id;
      trackEdit();
      applyActivityMode();
    });
  });
}
function setupWorkTypePicker() {
  $('rowWorkType').addEventListener('click', () => {
    const opts = WORK_TYPES.map(w => ({ db: w, id: w }));
    openOptionSheet('Work type', opts, state.workType, (db) => {
      state.workType = db; $('valWorkType').textContent = db; trackEdit();
    });
  });
}
function setupStatusPicker() {
  $('rowStatus').addEventListener('click', () => {
    openOptionSheet('Status', STATUS_TYPES, state.status, (db) => {
      state.status = db;
      const found = STATUS_TYPES.find(s => s.db === db);
      $('valStatus').textContent = found.id; trackEdit();
      applyVendorBox(); // v2.14 — kotak vendor ikut status
    });
  });
}

function applyActivityMode() {
  const isWorking = state.activityType === 'Working Day';
  $('offBox').classList.toggle('hidden', isWorking);
  const showWork = isWorking || state.offWorking;
  $('workTypeBox').classList.toggle('hidden', !showWork);
  $('workCard').classList.toggle('hidden', !showWork);
  $('metaCard').classList.toggle('hidden', !showWork);
}

// v2.10 — tag collapsible. Default: tampilkan HANYA tag yang sudah
// terpilih + tombol "+ tag baru" + tombol "Semua tag (N)" untuk buka
// grid lengkap. Sekali di-expand, tetap terbuka sampai form direset
// (tagsExpanded tidak di-reset di sini, sengaja — supaya tidak
// menutup sendiri tiap kali user pilih/batal tag).
function buildTags() {
  const box = $('tagGrid'); box.innerHTML = '';
  const total = state.tags.length;
  const showAll = state.tagsExpanded || total === 0;

  const renderChip = (t) => {
    const el = document.createElement('div');
    el.className = 'tag' + (state.selected.has(t) ? ' on' : '');
    el.textContent = t;
    el.onclick = () => { state.selected.has(t) ? state.selected.delete(t) : state.selected.add(t); trackEdit(); buildTags(); };
    box.appendChild(el);
  };

  if (showAll) {
    state.tags.forEach(renderChip);
  } else {
    // Hanya tag yang sudah dipilih user
    state.tags.filter(t => state.selected.has(t)).forEach(renderChip);
  }

  const add = document.createElement('div');
  add.className = 'tag-add'; add.textContent = '+ new tag';
  add.onclick = () => {
    const v = prompt('New tag name:');
    if (!v) return;
    const clean = v.trim(); if (!clean) return;
    if (!state.tags.some(t => t.toLowerCase() === clean.toLowerCase())) state.tags.push(clean);
    state.selected.add(clean); trackEdit(); buildTags();
  };
  box.appendChild(add);

  // v2.12 — SOP 8/14: kedua toggle di bawah kini mengumumkan status
  // buka/tutup daftar tag, dan bisa dicapai/ditekan lewat keyboard.
  const wireToggle = (el, expanded, onFlip) => {
    el.setAttribute('role', 'button');
    el.setAttribute('tabindex', '0');
    el.setAttribute('aria-expanded', expanded ? 'true' : 'false');
    el.setAttribute('aria-controls', 'tagGrid');
    el.onclick = onFlip;
    el.onkeydown = (e) => {
      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onFlip(); }
    };
  };

  if (!showAll && total > 0) {
    const toggle = document.createElement('div');
    toggle.className = 'tag-add';
    toggle.textContent = 'All tags (' + total + ') \u25BE';
    wireToggle(toggle, false, () => { state.tagsExpanded = true; buildTags(); });
    box.appendChild(toggle);
  } else if (showAll && total > 0 && state.tagsExpanded) {
    const toggle = document.createElement('div');
    toggle.className = 'tag-add';
    toggle.textContent = 'Collapse \u25B4';
    wireToggle(toggle, true, () => { state.tagsExpanded = false; buildTags(); });
    box.appendChild(toggle);
  }
}
function buildPriority() {
  document.querySelectorAll('#prioGrid .pb').forEach(el => {
    el.classList.toggle('on', el.dataset.p === state.priority);
    el.onclick = () => { state.priority = el.dataset.p; trackEdit(); buildPriority(); };
  });
}

function tickClock() {
  const now = new Date();
  // v2.12 — BUG FIX: locale 'id-ID' memakai TITIK sebagai pemisah jam-menit
  // ("19.38"), sementara baris di bawah menambahkan ':' untuk detik —
  // hasilnya terbaca "19.38:37". 'en-GB' menghasilkan titik dua.
  const jamMenit = now.toLocaleTimeString('en-GB', { timeZone: CONFIG.TIMEZONE, hour:'2-digit', minute:'2-digit', hour12:false });
  const detik = now.toLocaleTimeString('en-GB', { timeZone: CONFIG.TIMEZONE, second:'2-digit' }).padStart(2,'0');
  $('clockMain').textContent = jamMenit;
  $('clockSec').textContent = ':' + detik;

  const iso = todayISO();
  $('hdDate').textContent = formatTanggalPendek(iso);
  updateSessionDot();
}

async function doSubmit() {
  const btn = $('submitBtn');
  if (btn.classList.contains('busy')) return;

  const isWorking = state.activityType === 'Working Day';
  const needWork = isWorking || state.offWorking;
  const task = $('taskDesc').value.trim();

  if (needWork && !task) {
    toast('Fill in the work first.', 'err');
    $('taskDesc').focus();
    return;
  }

  const taskDate = $('taskDate').value || todayISO();

  // v2.12 — PERINGATAN DUPLIKAT. Bukan penolakan: kadang memang ada dua
  // pekerjaan mirip di hari yang sama. Ini hanya jeda konfirmasi supaya
  // entri kembar karena tombol tertekan dua kali tidak lolos tanpa sadar.
  if (needWork && task && isProbableDuplicate(taskDate, task)) {
    const lanjut = confirm('A very similar task is already recorded on this date.' + String.fromCharCode(10) + String.fromCharCode(10) + 'Save it anyway?');
    if (!lanjut) return;
  }

  // v2.13 — cek terpisah untuk hari libur. Dijalankan untuk SETIAP entri
  // jenis-hari (termasuk libur yang tetap ada pekerjaan), karena yang
  // diperiksa adalah "tanggal ini sudah ditandai libur atau belum",
  // bukan isi pekerjaannya.
  if (isNonWorkingType(state.activityType)) {
    const sudah = findDayEntryOnDate(taskDate);
    if (sudah) {
      const brk = String.fromCharCode(10);
      const lanjut = confirm('This date is already recorded as "' + sudah + '".' + brk + brk + 'Save another entry for the same date?');
      if (!lanjut) return;
    }
  }

  let finalRemark = $('remarkInput').value.trim();
  if (state.isHandover && !finalRemark.includes('[HANDOVER]')) {
    finalRemark = finalRemark ? ('[HANDOVER] ' + finalRemark) : '[HANDOVER] Priority shift handover';
  }

  // Payload dipisah ke variabel supaya bisa DIPAKAI ULANG oleh antrean
  // offline di blok catch — sebelumnya dibangun inline di dalam callApi,
  // jadi isinya hilang begitu panggilan gagal.
  const payload = {
    action: 'submit', sessionToken: state.token,
    taskDate: taskDate,
    activityType: state.activityType,
    workType: needWork ? state.workType : '',
    task: needWork ? task : '',
    tags: needWork ? Array.from(state.selected) : [],
    priority: needWork ? state.priority : '',
    status: needWork ? state.status : '',
    remark: finalRemark,
    // v2.14 — aset, vendor, foto. Vendor hanya dikirim saat statusnya
    // memang Waiting Vendor; applyVendorBox sudah mengosongkan isinya
    // di status lain, tapi dicek lagi di sini supaya tidak bergantung
    // pada urutan pemanggilan.
    assetId: state.assetId,
    vendorName: state.status === 'Waiting Vendor' ? $('vendorName').value.trim() : '',
    vendorFollowupDate: state.status === 'Waiting Vendor' ? $('vendorFollowup').value : '',
    photoDataUrl: needWork ? state.photoDataUrl : '',
    meta: clientMeta(),
  };

  btn.classList.add('busy'); btn.disabled = true;

  try {
    const r = await callApi(payload);

    if (!r.ok) {
      toast(r.error || 'Not submitted yet. Your entry is still saved, try again.', 'err');
      btn.classList.remove('busy'); btn.disabled = false;
      return;
    }

    state.submitCount++;
    if (typeof r.taskToday === 'number') state.taskToday = r.taskToday;
    renderTodayStrip(); // v2.10 — strip "Hari ini" ikut update tanpa reload
    rememberSubmitted(taskDate, task); // v2.12 — bahan deteksi duplikat
    rememberDayEntry(taskDate, state.activityType); // v2.13 — jejak hari libur

    btn.classList.remove('busy'); btn.classList.add('done');
    setTimeout(() => { btn.classList.remove('done'); btn.disabled = false; }, 1100);

    toast('Saved · ' + r.taskIdFormatted, 'good');
    resetForm();
    $('scroll').scrollTo({ top: 0, behavior: 'smooth' });

  } catch (e) {
    // v2.12 — ANTREAN OFFLINE. Hanya kegagalan JARINGAN yang diantrekan
    // (e.network di-set callApi). Kegagalan lain — sesi kedaluwarsa,
    // data ditolak server — TIDAK diantrekan, karena mengirim ulang
    // hal yang sama pasti gagal lagi dan cuma menumpuk sampah.
    if (e && e.network) {
      enqueueSubmit(payload);
      rememberSubmitted(taskDate, task);
      rememberDayEntry(taskDate, state.activityType); // v2.13
      toast('No connection — saved on this phone, will send automatically.', 'good');
      resetForm();
      $('scroll').scrollTo({ top: 0, behavior: 'smooth' });
    } else if (state.token) {
      toast(e.message || 'Not submitted yet. Your entry is still saved, try again.', 'err');
    }
    btn.classList.remove('busy'); btn.disabled = false;
  }
}

function resetForm() {
  $('taskDesc').value = ''; $('remarkInput').value = ''; $('aiInput').value = '';
  state.selected.clear();
  state.tagsExpanded = false; // v2.10 — kembali ringkas tiap entry baru
  state.priority = 'Medium'; state.status = 'On Progress';
  state.editCount = 0; state.openedAt = Date.now();
  $('valStatus').textContent = 'On Progress';
  // v2.14 — aset, vendor, dan foto ikut dibersihkan. Kalau tidak,
  // entri berikutnya diam-diam mewarisi perangkat & foto entri
  // sebelumnya — kesalahan data yang sangat sulit disadari.
  state.assetId = null;
  renderAssetValue();
  applyVendorBox();
  clearPhoto();
  // v2.25 — reset switch handover
  state.isHandover = false;
  const swH = $('switchHandover');
  if (swH) swH.classList.remove('on');
  buildTags(); buildPriority();
}

async function startApp(preloaded) {
  const iso = todayISO();
  $('taskDate').value = iso;
  $('dateText').textContent = formatTanggalPanjang(iso);

  // v2.12 — begitu ada sesi yang sah, coba kirim antrean yang tertunda.
  // Sengaja TIDAK di-await: kegagalannya tidak boleh menahan tampilnya
  // form, dan kalau masih offline antreannya tetap utuh.
  renderQueueBar();
  flushQueue(false);

  applyActivityMode();
  buildPriority();
  tickClock();

  // v2.14 — dijalankan SETELAH login, karena keduanya bergantung pada
  // serverVersion yang baru diketahui dari respons login/get-tags.
  setupPhoto();
  loadAssets();

  // Bila login (v1.9) sudah membawa tags & taskToday, langsung pakai —
  // ini jalur normal, tanpa panggilan tambahan ke server.
  // Bila kosong (mis. sesi dipulihkan dari localStorage setelah refresh,
  // tanpa lewat proses login), baru ambil lewat get-tags sebagai cadangan.
  if (preloaded && Array.isArray(preloaded.tags)) {
    state.tags = preloaded.tags;
    if (typeof preloaded.taskToday === 'number') state.taskToday = preloaded.taskToday;
    cacheTags(state.tags); // v2.10 — simpan cadangan lokal
    buildTags();
    renderTodayStrip();
    return;
  }

  await loadTagsWithFallback(); // v2.10 — dulu inline di sini, lihat catatan di fungsinya
  renderTodayStrip();
}

// v2.10 — dipisah dari startApp supaya bisa dipanggil ulang saat retry.
// Fix bug: sebelumnya kalau get-tags gagal, state.tags langsung di-set
// [] tanpa retry dan tanpa fallback, jadi grid tag mendadak kosong
// tanpa penjelasan (ini yang bikin tampilan mirip screenshot "tag
// disembunyikan" — padahal itu kegagalan diam-diam, bukan fitur).
// Sekarang: retry sekali, lalu fallback ke cache localStorage kalau
// masih gagal, dan toast HANYA muncul kalau benar-benar tidak ada
// data sama sekali (bukan tiap kegagalan jaringan sekali gagal).
async function loadTagsWithFallback() {
  let r = await callApi({ action:'get-tags', sessionToken: state.token }).catch(() => null);
  if (!r || !r.ok) {
    // retry sekali setelah jeda singkat — banyak kegagalan get-tags
    // di lapangan bersifat sesaat (sinyal HP baru buka dari sleep)
    await new Promise(res => setTimeout(res, 700));
    r = await callApi({ action:'get-tags', sessionToken: state.token }).catch(() => null);
  }

  if (r && r.ok) {
    state.tags = r.tags || [];
    if (typeof r.taskToday === 'number') state.taskToday = r.taskToday;
    // v2.12 — jalur ini dipakai saat sesi dipulihkan setelah refresh,
    // jadi kemampuan server juga perlu dibaca di sini, bukan hanya
    // di jalur login.
    applyServerCapabilities(r.serverVersion);
    cacheTags(state.tags);
  } else {
    const cached = readCachedTags();
    if (cached.length > 0) {
      state.tags = cached;
      toast('Tags from local cache — connection failed briefly.', 'err');
    } else {
      state.tags = [];
      toast('Failed to load tags. Try reopening the app.', 'err');
    }
  }
  buildTags();
}

function cacheTags(tags) {
  try { localStorage.setItem('mfbit_tags_cache', JSON.stringify(tags)); } catch (e) {}
}
function readCachedTags() {
  try {
    const raw = localStorage.getItem('mfbit_tags_cache');
    const parsed = raw ? JSON.parse(raw) : [];
    return Array.isArray(parsed) ? parsed : [];
  } catch (e) { return []; }
}

// v2.10 — strip "Hari ini" di atas kartu Tulis bebas.
function renderTodayStrip() {
  const el = $('todayStrip');
  if (!el) return;
  const n = state.taskToday || 0;
  // v2.12 — ketiga teks di bawah masih Bahasa Indonesia di v2.11 dan
  // TAMPIL langsung di tab Input. Lolos dari scan translasi sebelumnya
  // karena berada di dalam innerHTML, bukan sebagai teks statis di markup.
  if (n > 0) {
    el.innerHTML = '<span class="today-strip-label">Today</span>'
      + '<span class="today-strip-value">' + n + (n === 1 ? ' activity logged' : ' activities logged') + '</span>';
  } else {
    el.innerHTML = '<span class="today-strip-label">Today</span>'
      + '<span class="today-strip-value empty">Nothing logged yet &#9997;&#65039;</span>';
  }
}

/* ══════════════════════════════════════════════
   AI PARSE — Tulis bebas diuraikan Gemini lewat Edge Function
══════════════════════════════════════════════ */
async function doAiParse() {
  const btn = $('aiBtn');
  if (btn.classList.contains('busy')) return;

  const text = $('aiInput').value.trim();
  if (!text) {
    toast('Write your note first before it can be parsed.', 'err');
    $('aiInput').focus();
    return;
  }

  btn.classList.add('busy'); btn.disabled = true;
  $('aiSummary').classList.remove('show');

  try {
    const r = await callApi({ action: 'parse-task', sessionToken: state.token, text });

    if (!r.ok) {
      toast(r.error || 'AI could not process this. Please fill the form manually.', 'err');
      return;
    }

    applyParseResult(r.result);
    toast('Form filled from AI result', 'good');

  } catch (e) {
    if (state.token) toast(e.message || 'AI could not process this. Please fill the form manually.', 'err');
  } finally {
    btn.classList.remove('busy'); btn.disabled = false;
  }
}

function renderAiSummary(result) {
  const box = $('aiSummary');
  const parts = [];
  // v2.11 — tampilkan tanggal terdeteksi di ringkasan, supaya user
  // sadar kalau tanggal form berubah otomatis (bukan diam-diam).
  if (result.taskDate && /^\d{4}-\d{2}-\d{2}$/.test(result.taskDate)) {
    parts.push('<b>' + formatTanggalPanjang(result.taskDate) + '</b>');
  }
  if (result.activityType === 'Day Off') parts.push('<b>Day Off</b>');
  // workType hanya relevan kalau bukan Day Off (server set "Task" sebagai
  // default harmless untuk Day Off, tapi itu tidak perlu ditampilkan).
  if (result.workType && result.activityType !== 'Day Off') parts.push('<b>' + result.workType + '</b>');
  if (Array.isArray(result.tags) && result.tags.length) parts.push(result.tags.join(', '));
  if (result.priority) parts.push('<b>' + result.priority + '</b>');
  if (result.status) parts.push(result.status);

  if (parts.length === 0) { box.classList.remove('show'); return; }
  box.innerHTML = parts.join(' &middot; ');
  box.classList.add('show');
}

function applyParseResult(result) {
  // v2.11 — auto-parse tanggal & jenis hari dari teks bebas.
  // Urutan penting: taskDate & activityType diproses SEBELUM
  // applyActivityMode() dipanggil, supaya UI (offBox, workTypeBox,
  // dst) langsung konsisten dengan hasil deteksi AI dalam satu kali
  // render, bukan render dua kali dengan state antara yang salah.
  if (result.taskDate) {
    // Server sudah validasi format YYYY-MM-DD sebelum sampai sini,
    // tapi tetap dicek ulang di client — pertahanan berlapis, bukan
    // percaya penuh ke satu sisi saja.
    const isValidIso = /^\d{4}-\d{2}-\d{2}$/.test(result.taskDate);
    if (isValidIso) {
      $('taskDate').value = result.taskDate;
      $('dateText').textContent = formatTanggalPanjang(result.taskDate);
      trackEdit();
    }
  }

  if (result.activityType) {
    state.activityType = result.activityType;
    const found = ACTIVITY_TYPES.find(a => a.db === result.activityType);
    if (found) $('valActivity').textContent = found.id;
  }

  if (typeof result.offWorking === 'boolean') {
    state.offWorking = result.offWorking;
    $('offSwitch').classList.toggle('on', state.offWorking);
  }

  applyActivityMode(); // dipanggil sekali, setelah activityType & offWorking siap

  if (result.workType && WORK_TYPES.includes(result.workType)) {
    state.workType = result.workType;
    $('valWorkType').textContent = result.workType;
  }

  if (result.task) { $('taskDesc').value = result.task; trackEdit(); }

  if (Array.isArray(result.tags)) {
    state.selected.clear();
    result.tags.forEach(t => {
      const clean = String(t).trim();
      if (!clean) return;
      if (!state.tags.some(x => x.toLowerCase() === clean.toLowerCase())) state.tags.push(clean);
      state.selected.add(clean);
    });
    buildTags();
  }

  if (result.priority && ['Low','Medium','High','Critical'].includes(result.priority)) {
    state.priority = result.priority; buildPriority();
  }

  const statusValid = STATUS_TYPES.find(s => s.db === result.status);
  if (statusValid) { state.status = statusValid.db; $('valStatus').textContent = statusValid.id; }
  applyVendorBox(); // v2.14 — status dari AI juga memunculkan kotak vendor

  if (result.remark) $('remarkInput').value = result.remark;

  renderAiSummary(result);
  $('scroll').scrollTo({ top: 0, behavior: 'smooth' });
}

/* ══════════════════════════════════════════════
   RIWAYAT
══════════════════════════════════════════════ */
const RIWAYAT_ACTIVITY_LABEL = Object.fromEntries(ACTIVITY_TYPES.map(a => [a.db, a.id]));
const RIWAYAT_STATUS_LABEL = Object.fromEntries(STATUS_TYPES.map(s => [s.db, s.id]));

// Label singkat untuk tombol priority (form input & panel Ubah di Riwayat)
// supaya 4 pilihan muat dalam 1 baris di layar HP. Value yang DISIMPAN
// ke database tetap nama penuh (Low/Medium/High/Critical) — ini HANYA
// teks yang ditampilkan ke mata, lihat data-p di HTML untuk nilai asli.
const PRIORITY_SHORT_LABEL = { Low: 'Low', Medium: 'Med', High: 'High', Critical: 'Ctrl' };

// v2.18 — chipClassForPriority & chipClassForStatus dihapus.
// Keduanya mengembalikan kelas .riwayat-chip yang sudah tidak ada,
// dan tidak pernah dipanggil dari mana pun sejak History berpindah
// ke tabel worksheet. Penggantinya wsChipClassPriority dan
// wsChipClassStatus tepat di bawah ini.

// ── TAMPILAN WORKSHEET (tabel), dipakai bersama oleh Riwayat & Laporan ──
function wsChipClassPriority(p) {
  if (p === 'Critical') return 'ws-chip critical';
  if (p === 'High') return 'ws-chip high';
  return 'ws-chip';
}
function wsChipClassStatus(s) {
  if (s === 'Done') return 'ws-chip done';
  return 'ws-chip';
}

// escapeHtml — task ditulis bebas oleh user/AI, bisa berisi karakter
// yang berarti khusus di HTML (< > &). Tanpa ini, task berisi tanda
// seperti "kabel < 5m" bisa merusak tampilan tabel.
function escapeHtml(str) {
  return String(str)
    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

// Render tabel worksheet dari array item. `onRowClick(idx)` opsional —
// kalau diisi, tiap baris bisa diketuk (dipakai Riwayat); kalau
// dikosongkan, baris tidak bisa diklik (dipakai Laporan, karena
// item Laporan hanya untuk dilihat/diekspor, bukan untuk diedit).
function renderWorksheetTable(containerEl, items, onRowClick) {
  if (!items || items.length === 0) {
    containerEl.innerHTML = '';
    return;
  }

  const rows = items.map((it, idx) => {
    const tanggal = formatTanggalPendek(it.task_date);
    const statLabel = RIWAYAT_STATUS_LABEL[it.status] || it.status || '';
    // v2.13 — jenis hari selain "Working Day" ditampilkan sebagai chip di
    // kolom Task. Tanpa ini, entri libur tampil sebagai baris nyaris kosong
    // ("—" tanpa priority/status/type) dan tidak terbaca sebagai libur.
    // Kalau hari libur TAPI tetap ada pekerjaan, chip dan teks task
    // ditampilkan berdua — bukan salah satu.
    const isDayOff = it.activity_type && it.activity_type !== 'Working Day';
    const dayLabel = RIWAYAT_ACTIVITY_LABEL[it.activity_type] || it.activity_type || '';
    const dayChip = isDayOff
      ? '<span class="ws-chip dayoff">' + escapeHtml(dayLabel) + '</span>'
      : '';
    // v2.14 — kode aset ikut tampil supaya sekali lihat sudah tahu
    // perangkat mana yang dikerjakan, tanpa harus membuka detail.
    // asset_code baru ada setelah MFB-IT_v1.6.sql dijalankan; sebelum
    // itu nilainya undefined dan chip-nya tidak muncul.
    const assetChip = it.asset_code
      ? '<span class="ws-chip asset">' + escapeHtml(it.asset_code) + '</span>'
      : '';
    let taskText;
    if (it.task && isDayOff) taskText = dayChip + ' ' + escapeHtml(it.task);
    else if (it.task)        taskText = escapeHtml(it.task);
    else if (isDayOff)       taskText = dayChip;
    else                     taskText = '<span class="ws-dash">—</span>';
    // Chip aset ditaruh di DEPAN teks, dan chip foto di belakang —
    // urutannya konsisten supaya mata tidak perlu mencari.
    if (assetChip) taskText = assetChip + ' ' + taskText;
    if (it.has_photo) taskText = taskText + ' <span class="ws-chip">&#128247;</span>';
    const clickable = typeof onRowClick === 'function';
    return '<tr' + (clickable ? ' class="ws-row-clickable" data-idx="' + idx + '"' : '') + '>'
      + '<td class="ws-col-date">' + tanggal + '</td>'
      + '<td class="ws-col-task">' + taskText + '</td>'
      + '<td class="ws-col-chip">' + (it.priority ? '<span class="' + wsChipClassPriority(it.priority) + '">' + (PRIORITY_SHORT_LABEL[it.priority] || it.priority) + '</span>' : '') + '</td>'
      + '<td class="ws-col-chip">' + (statLabel ? '<span class="' + wsChipClassStatus(it.status) + '">' + escapeHtml(statLabel) + '</span>' : '') + '</td>'
      + '<td class="ws-col-chip">' + (it.work_type ? '<span class="ws-chip">' + escapeHtml(it.work_type) + '</span>' : '') + '</td>'
      + '<td class="ws-col-id">' + escapeHtml(it.task_id || '') + '</td>'
      + '</tr>';
  }).join('');

  containerEl.innerHTML =
    '<div class="ws-wrap"><table class="ws-table">'
    + '<thead><tr><th>Date</th><th>Task</th><th>Priority</th><th>Status</th><th>Type</th><th>ID</th></tr></thead>'
    + '<tbody>' + rows + '</tbody>'
    + '</table></div>'
    + (typeof onRowClick === 'function' ? '<div class="ws-hint">Tap a row to edit / delete. Swipe the table to see more columns.</div>' : '<div class="ws-hint">Swipe the table sideways to see more columns.</div>');

  if (typeof onRowClick === 'function') {
    containerEl.querySelectorAll('.ws-row-clickable').forEach(tr => {
      tr.addEventListener('click', () => onRowClick(Number(tr.dataset.idx)));
    });
  }
}

let riwayatCache = [];

// v2.17 — mode tampilan History. '' = 7 hari terakhir (perilaku lama),
// 'open' = semua task yang masih terbuka tanpa batas tanggal. Mode
// "open" dinyalakan dengan mengetuk kartu Open / Oldest open di
// Dashboard.
let riwayatMode = '';

function renderRiwayatModeBar(jumlah) {
  const bar = $('riwayatModeBar');
  if (!bar) return;
  const aktif = riwayatMode === 'open';
  bar.classList.toggle('hidden', !aktif);
  if (aktif) {
    $('riwayatModeText').textContent = jumlah + (jumlah === 1 ? ' open task' : ' open tasks') + ' · oldest first';
  }
}

async function loadRiwayat() {
  const box = $('riwayatList');
  const modeOpen = riwayatMode === 'open';
  box.innerHTML = '<div class="riwayat-empty">Loading history…</div>';

  try {
    const r = await callApi({
      action: 'get-history',
      sessionToken: state.token,
      // Field ini diabaikan Edge Function < v1.16, yang selalu
      // mengembalikan 7 hari terakhir. Jadi kalau server masih lama,
      // ketukan kartu tetap membuka History — hanya isinya belum
      // tersaring. Tidak error, hanya belum membaik (SOP 8.8).
      mode: modeOpen ? 'open' : 'recent',
    });
    if (!r.ok) {
      box.innerHTML = '<div class="riwayat-empty">' + (r.error || 'Failed to load history.') + '</div>';
      return;
    }

    const items = r.items || [];
    riwayatCache = items;

    // Server v1.16 menjawab mode yang benar-benar dipakainya. Kalau
    // server lama tidak mengirim field itu, penanda mode tidak
    // ditampilkan supaya tidak menjanjikan penyaringan yang tidak terjadi.
    const modeDilayani = r.mode === 'open';
    if (modeOpen && !modeDilayani) riwayatMode = '';
    renderRiwayatModeBar(items.length);

    const judul = $('riwayatTitle');
    if (judul) {
      judul.textContent = (riwayatMode === 'open')
        ? 'History — open tasks'
        : 'History — last 7 days';
    }

    if (items.length === 0) {
      box.innerHTML = (riwayatMode === 'open')
        ? '<div class="riwayat-empty">Nothing is open. All caught up.</div>'
        : '<div class="riwayat-empty">No activity in the last 7 days.</div>';
      return;
    }

    renderWorksheetTable(box, items, (idx) => openRiwayatDetail(idx));

  } catch (e) {
    box.innerHTML = '<div class="riwayat-empty">' + (e.message || 'Failed to load history.') + '</div>';
  }
}

// ── SHEET: DETAIL / UBAH / HAPUS SATU TASK DI RIWAYAT ────────

// v2.21 — draft edit yang HIDUP DI LUAR openRiwayatDetail.
//
// Wajib di luar, karena fungsi itu dipanggil ulang setiap kali sebuah
// picker selesai memilih (supaya nilai barunya terlihat). Kalau draft
// ada di dalam, setiap pemanggilan ulang akan menimpanya dengan data
// lama dari server — dan pilihan pengguna hilang tanpa jejak.
//
// id dipakai sebagai penanda pemilik: draft hanya diisi ulang kalau
// task yang dibuka BERBEDA dari draft yang tersimpan.
let rwDraft = { id: null };

// Ambil nilai untuk ditampilkan: dari draft kalau sudah pernah diubah,
// kalau belum dari data server. null/undefined di draft berarti
// "belum disentuh" — itu sebabnya dibedakan dari string kosong, yang
// merupakan pilihan sah (mis. remark sengaja dikosongkan).
function rwNilai(it, kunci, bawaan) {
  if (rwDraft.id === it.id && rwDraft[kunci] !== null && rwDraft[kunci] !== undefined) {
    return rwDraft[kunci];
  }
  return bawaan === null || bawaan === undefined ? '' : bawaan;
}

function openRiwayatDetail(idx) {
  const it = riwayatCache[idx];
  if (!it) return;

  // v2.14 — BUG LAMA: it.task dimasukkan ke dalam <textarea> tanpa
  // di-escape. Task yang memuat "</textarea>" akan menutup elemen lebih
  // awal dan sisa teksnya jadi markup halaman. escapeHtml sudah ada di
  // file ini dan dipakai di tabel — di sini terlewat.
  const html = '<div style="padding:0 20px">'

    // v2.20 — TANGGAL bisa diedit. Server sudah menerima taskDate
    // untuk update-task sejak lama; yang belum ada cuma UI-nya.
    // Salah tanggal adalah kesalahan input paling umum (mis. lupa
    // ganti tanggal saat mencatat kerjaan kemarin), dan sebelumnya
    // satu-satunya jalan memperbaikinya adalah hapus lalu input ulang.
    + '<div class="field"><label class="label" for="rwEditDate">Date</label>'
    +   '<div class="date-row">'
    +     '<span class="date-text" id="rwEditDateText">' + escapeHtml(formatTanggalPanjang(it.task_date)) + '</span>'
    +     '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" style="opacity:.4;flex-shrink:0"><rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" stroke-width="2"/><path d="M3 9h18M8 3v4M16 3v4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>'
    // v2.21 — nilai diambil dari DRAFT bila ada, jatuh ke `it` bila
    // belum pernah disentuh. Tanpa ini, tanggal/teks yang sudah diubah
    // akan kembali ke nilai server setiap kali picker dipakai.
    +     '<input type="date" id="rwEditDate" value="' + escapeHtml(rwNilai(it, 'date', it.task_date)) + '">'
    +   '</div></div>'

    // v2.20 — JENIS HARI bisa diedit (kakak menyebutnya "tingkat").
    // Berguna saat entri salah ditandai Working Day padahal libur,
    // atau sebaliknya — dan itu langsung mempengaruhi angka
    // "Work tasks" & "% Done" di Dashboard maupun rekap Ops.
    + '<div class="field"><label class="label">Day type</label>'
    +   '<div class="picker-row" id="rwActivityRow"><span class="picker-value" id="rwActivityVal">'
    +   escapeHtml((() => {
          const v = rwNilai(it, 'activity', it.activity_type || 'Working Day');
          return RIWAYAT_ACTIVITY_LABEL[v] || v;
        })())
    +   '</span><span class="picker-chevron">&#8250;</span></div></div>'

    + '<div class="field"><label class="label">Description</label>'
    + '<textarea class="textarea" id="rwEditTask" style="height:76px">' + escapeHtml(rwNilai(it, 'task', it.task)) + '</textarea></div>'

    // v2.14 — aset. Baris ini hanya muncul kalau daftar aset memang
    // tersedia; kalau MFB-IT_v1.6.sql belum jalan, bagian ini tidak ada.
    + (state.assets.length ? ('<div class="field"><label class="label">Device / asset</label>'
      + '<div class="picker-row" id="rwAssetRow"><span class="picker-value" id="rwAssetVal">'
      + escapeHtml(assetLabel(state.assets.find(a => a.id === rwNilai(it, 'assetId', it.asset_id))))
      + '</span><span class="picker-chevron">&#8250;</span></div></div>') : '')

    + '<div class="field"><label class="label">Priority</label>'
    + '<div class="prio" id="rwEditPrio">'
    + ['Low','Medium','High','Critical'].map(p =>
        '<div class="pb' + (p === rwNilai(it, 'priority', it.priority) ? ' on' : '') + '" data-p="' + p + '">' + PRIORITY_SHORT_LABEL[p] + '</div>').join('')
    + '</div></div>'
    + '<div class="field"><label class="label">Status</label>'
    + '<div class="picker-row" id="rwEditStatusRow"><span class="picker-value" id="rwEditStatusVal">'
    + escapeHtml((() => {
        const v = rwNilai(it, 'status', it.status);
        return RIWAYAT_STATUS_LABEL[v] || v || '';
      })()) + '</span><span class="picker-chevron">&#8250;</span></div></div>'

    // v2.14 — follow-up vendor. Ditampilkan kalau statusnya Waiting
    // Vendor ATAU kalau datanya sudah pernah diisi — supaya data lama
    // tetap bisa dilihat & dikoreksi meski statusnya sudah berpindah.
    + ((it.status === 'Waiting Vendor' || it.vendor_name || it.vendor_followup_date)
        ? ('<div class="vendor-box">'
          + '<div class="field"><label class="label">Vendor name</label>'
          + '<input class="input" id="rwVendorName" value="' + escapeHtml(it.vendor_name || '') + '"></div>'
          + '<div class="field" style="margin-bottom:0"><label class="label">Follow up on</label>'
          + '<input type="date" class="input" id="rwVendorFollowup" value="' + escapeHtml(it.vendor_followup_date || '') + '">'
          + (it.vendor_overdue ? '<div class="hint" style="color:var(--danger-text)">Follow-up date has passed.</div>' : '')
          + '</div></div>') : '')

    // v2.14 — foto bukti. Gambarnya TIDAK langsung dimuat: bucket-nya
    // privat, jadi butuh signed URL dari server. Tombol dulu, gambar
    // menyusul setelah ditekan — sekaligus menghemat kuota kalau foto
    // tidak perlu dilihat.
    + (it.photo_path ? ('<div class="field"><label class="label">Photo evidence</label>'
      + '<button class="photo-btn" id="rwPhotoBtn" type="button">Show photo</button>'
      + '<div class="photo-info" id="rwPhotoInfo"></div>'
      + '<img class="photo-view hidden" id="rwPhotoImg" alt="Photo evidence">'
      + '</div>') : '')

    // v2.20 — dulu di sini ada style="color:var(--navy)". --navy tidak
    // ikut berubah di dark mode, jadi tombolnya gelap di atas gelap
    // (1,13:1 — tidak terlihat). Sekarang memakai token --action-text
    // yang punya nilai berbeda per mode.

    // v2.20 — WORK TYPE & REMARK. Keduanya sudah diterima server
    // sejak awal tapi tidak pernah bisa dikoreksi dari Riwayat.
    + '<div class="field"><label class="label">Work type</label>'
    +   '<div class="picker-row" id="rwWorkTypeRow"><span class="picker-value" id="rwWorkTypeVal">'
    +   escapeHtml(rwNilai(it, 'workType', it.work_type || 'Task'))
    +   '</span><span class="picker-chevron">&#8250;</span></div></div>'

    + '<div class="field"><label class="label" for="rwEditRemark">Remark <span style="opacity:.6">— optional</span></label>'
    + '<input class="input" id="rwEditRemark" value="' + escapeHtml(rwNilai(it, 'remark', it.remark)) + '"></div>'

    + '<button class="btn-logout btn-primary-action" id="rwSaveBtn">Save changes</button>'
    + '<button class="btn-logout" id="rwDeleteBtn">Delete this task</button>'
    + '</div>';

  openSheet(it.task_id, html);

  // v2.21 — BUG FIX BESAR: nilai edit dipindah KELUAR dari fungsi ini.
  //
  // Sebelumnya editStatus/editActivity/editWorkType/editAssetId adalah
  // variabel LOKAL. Empat picker (Status, Day type, Work type, Asset)
  // memanggil openRiwayatDetail(idx) di dalam onPick supaya nilai baru
  // terlihat di layar. Tapi memanggil fungsi ini lagi berarti:
  //
  //   1. variabel lokal dibuat ULANG dari `it` (data lama dari server)
  //   2. tombol Save yang aktif sekarang milik closure BARU
  //   3. pilihan pengguna tertinggal di closure lama yang sudah mati
  //
  // Hasilnya: mengubah Status dari Done ke On Progress lalu menekan
  // Save akan menyimpan "Done" lagi. Perubahan SELALU hilang.
  //
  // Priority tidak terkena karena handler-nya TIDAK memanggil
  // openRiwayatDetail — ia hanya menyetel variabel dan menukar kelas
  // CSS. Itu justru petunjuk yang mengungkap akar masalahnya.
  //
  // Perbaikannya: draft disimpan di rwDraft (modul-level, di luar
  // fungsi ini) dan hanya diisi dari `it` saat draft memang milik task
  // LAIN. Jadi membuka ulang sheet untuk task yang sama TIDAK pernah
  // menimpa pilihan yang sedang berjalan. Ini menghapus seluruh KELAS
  // bug ini sekaligus — bukan menambal satu picker.
  if (rwDraft.id !== it.id) {
    rwDraft = {
      id: it.id,
      priority: it.priority,
      status: it.status,
      activity: it.activity_type || 'Working Day',
      workType: it.work_type || 'Task',
      assetId: (typeof it.asset_id === 'number') ? it.asset_id : null,
      // Teks juga disimpan: kalau pengguna sudah mengetik lalu membuka
      // picker, ketikannya tidak boleh hilang saat sheet dibuka ulang.
      task: null, remark: null, date: null,
    };
  }

  // Label tanggal ikut berubah saat tanggalnya diganti, supaya yang
  // terbaca bukan tanggal lama sementara input-nya sudah baru.
  const elDate = $('rwEditDate');
  if (elDate) {
    elDate.addEventListener('change', (e) => {
      const v = e.target.value;
      rwDraft.date = v; // v2.21 — supaya tidak hilang saat picker dipakai
      if (v) $('rwEditDateText').textContent = formatTanggalPanjang(v);
    });
  }

  // v2.21 — teks yang sedang diketik juga disimpan ke draft. Tanpa ini,
  // mengetik deskripsi lalu membuka picker Status akan mengembalikan
  // teksnya ke versi server — ketikan pengguna hilang tanpa peringatan.
  const elTask = $('rwEditTask');
  if (elTask) elTask.addEventListener('input', (e) => { rwDraft.task = e.target.value; });
  const elRmk = $('rwEditRemark');
  if (elRmk) elRmk.addEventListener('input', (e) => { rwDraft.remark = e.target.value; });

  // Kedua picker di bawah memakai openOptionSheet, dan sejak v2.20
  // openOptionSheet TIDAK lagi menutup sheet kalau onPick membuka
  // sheet baru — jadi detail task tetap terbuka setelah memilih.
  const rwActivityRow = $('rwActivityRow');
  if (rwActivityRow) {
    rwActivityRow.addEventListener('click', () => {
      openOptionSheet('Day type', ACTIVITY_TYPES, rwDraft.activity, (db) => {
        rwDraft.activity = db;
        openRiwayatDetail(idx);
      });
    });
  }

  const rwWorkTypeRow = $('rwWorkTypeRow');
  if (rwWorkTypeRow) {
    rwWorkTypeRow.addEventListener('click', () => {
      const opsi = WORK_TYPES.map(w => ({ db: w, id: w }));
      openOptionSheet('Work type', opsi, rwDraft.workType, (db) => {
        rwDraft.workType = db;
        openRiwayatDetail(idx);
      });
    });
  }
  // v2.21 — nilai aset kini disimpan di rwDraft, bukan variabel lokal.
  const rwAssetRow = $('rwAssetRow');
  if (rwAssetRow) {
    rwAssetRow.addEventListener('click', () => {
      const opsi = [{ db: '', id: '— none —' }].concat(
        state.assets.map(a => ({ db: String(a.id), id: assetLabel(a) }))
      );
      const kini = rwDraft.assetId === null || rwDraft.assetId === undefined
        ? '' : String(rwDraft.assetId);
      openOptionSheet('Device / asset', opsi, kini, (db) => {
        rwDraft.assetId = db ? Number(db) : null;
        // Sheet dibuka ulang supaya nilai barunya terlihat. Aman
        // sekarang: draft ada di luar, jadi tidak tertimpa.
        openRiwayatDetail(idx);
      });
    });
  }

  const rwPhotoBtn = $('rwPhotoBtn');
  if (rwPhotoBtn) {
    rwPhotoBtn.addEventListener('click', () => {
      rwPhotoBtn.disabled = true;
      $('rwPhotoInfo').textContent = 'Opening photo…';
      bukaFotoTersimpan(it.photo_path, $('rwPhotoImg'), $('rwPhotoInfo'))
        .finally(() => { rwPhotoBtn.disabled = false; });
    });
  }

  // v2.21 — priority ikut pindah ke draft. Sebelumnya ia SATU-SATUNYA
  // yang berfungsi (karena tidak memanggil openRiwayatDetail), tapi
  // kalau tetap pakai variabel lokal, pilihannya akan hilang begitu
  // picker LAIN dipakai setelahnya — bug yang sama, hanya lebih halus.
  $('sheetBody').querySelectorAll('#rwEditPrio .pb').forEach(el => {
    el.addEventListener('click', () => {
      rwDraft.priority = el.dataset.p;
      $('sheetBody').querySelectorAll('#rwEditPrio .pb').forEach(x => x.classList.toggle('on', x.dataset.p === rwDraft.priority));
    });
  });

  // v2.21 — INI BUG YANG DILAPORKAN: ubah Status dari Done ke
  // On Progress lalu Save, yang tersimpan tetap Done.
  //
  // Sebelumnya `editStatus = db` menulis ke variabel LOKAL, lalu
  // openRiwayatDetail(idx) membuat closure BARU yang membaca ulang
  // editStatus dari it.status (data lama server). Tombol Save yang
  // aktif setelah itu milik closure baru — jadi selalu mengirim nilai
  // lama. Nilai pilihan pengguna tertinggal di closure yang sudah mati.
  //
  // Sekarang menulis ke rwDraft yang hidup di luar fungsi ini.
  $('rwEditStatusRow').addEventListener('click', () => {
    openOptionSheet('Status', STATUS_TYPES, rwDraft.status, (db) => {
      rwDraft.status = db;
      openRiwayatDetail(idx);
    });
  });

  $('rwSaveBtn').addEventListener('click', async () => {
    const newTask = $('rwEditTask').value.trim();
    try {
      // v2.14 — aset & vendor ikut dikirim. Elemen vendor bisa tidak ada
      // (kalau statusnya bukan Waiting Vendor dan datanya kosong), jadi
      // dibaca dengan penjagaan, bukan diasumsikan ada.
      const vn = $('rwVendorName');
      const vf = $('rwVendorFollowup');
      // v2.20 — tanggal, jenis hari, jenis pekerjaan, dan remark ikut
      // dikirim. Server (update-task) sudah menerima keempatnya sejak
      // lama — yang belum ada hanya UI-nya, jadi NOL perubahan server.
      const elTgl = $('rwEditDate');
      const elRemark = $('rwEditRemark');
      // v2.21 — seluruh nilai dibaca dari rwDraft (dengan cadangan ke
      // data server kalau field itu belum pernah disentuh). Sebelumnya
      // dibaca dari variabel lokal yang bisa sudah tertimpa.
      const kiriman = {
        action: 'update-task', sessionToken: state.token, id: it.id,
        task: newTask,
        priority: rwNilai(it, 'priority', it.priority),
        status: rwNilai(it, 'status', it.status),
        activityType: rwNilai(it, 'activity', it.activity_type || 'Working Day'),
        workType: rwNilai(it, 'workType', it.work_type || 'Task'),
      };
      // Tanggal hanya dikirim kalau bentuknya sah. Input date yang
      // dikosongkan mengembalikan string kosong, dan kolom bertipe
      // date di Postgres menolak itu.
      if (elTgl && /^\d{4}-\d{2}-\d{2}$/.test(elTgl.value)) {
        kiriman.taskDate = elTgl.value;
      }
      if (elRemark) kiriman.remark = elRemark.value.trim();
      if (state.assets.length) {
        // null di sini SAH artinya: melepas tautan aset. Jadi dibedakan
        // dari undefined (= belum pernah disentuh).
        kiriman.assetId = (rwDraft.id === it.id && rwDraft.assetId !== undefined)
          ? rwDraft.assetId
          : ((typeof it.asset_id === 'number') ? it.asset_id : null);
      }
      if (vn) kiriman.vendorName = vn.value.trim();
      if (vf) kiriman.vendorFollowupDate = vf.value;
      const r = await callApi(kiriman);
      if (!r.ok) { toast(r.error || 'Failed to save changes.', 'err'); return; }
      toast('Changes saved', 'good');
      // v2.21 — draft dibuang setelah tersimpan. Kalau dibiarkan,
      // membuka task yang SAMA lagi akan menampilkan draft lama
      // padahal server sudah punya nilai baru.
      rwDraft = { id: null };
      closeSheet();
      loadRiwayat();
    } catch (e) { toast(e.message || 'Failed to save changes.', 'err'); }
  });

  $('rwDeleteBtn').addEventListener('click', async () => {
    if (!confirm('Delete this task? It will no longer appear in History or Report.')) return;
    try {
      const r = await callApi({ action: 'delete-task', sessionToken: state.token, id: it.id });
      if (!r.ok) { toast(r.error || 'Failed to delete.', 'err'); return; }
      toast('Task deleted', 'good');
      rwDraft = { id: null }; // v2.21
      closeSheet();
      loadRiwayat();
    } catch (e) { toast(e.message || 'Failed to delete.', 'err'); }
  });
}

/* ══════════════════════════════════════════════
   LAPORAN
══════════════════════════════════════════════ */
let reportMode = 'month'; // 'month' | 'range' | 'ops'

/* ══════════════════════════════════════════════
   v2.19 — REKAP OPS MEETING

   Operation Weekly Meeting selalu hari SELASA. Rekapnya menutup
   rentang RABU s/d SELASA — 7 hari, tanpa tumpang tindih.

   Kenapa Rabu, bukan Selasa-ke-Selasa (8 hari): kalau Selasa lalu
   ikut, aktivitas hari itu akan muncul DUA KALI — di rekap minggu
   lalu dan di rekap minggu ini. Yang terjadi pada hari meeting lalu
   sudah dibahas saat meeting itu.
   ══════════════════════════════════════════════ */

// Selasa = 2 pada getDay() (0 = Minggu).
const OPS_MEETING_DOW = 2;

// 0 = periode yang sedang berjalan / meeting terdekat, -1 = minggu lalu.
let opsWeekOffset = 0;

function isoDari(d) {
  return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0')
       + '-' + String(d.getDate()).padStart(2, '0');
}

// Rentang Rabu..Selasa untuk meeting TERDEKAT.
//
// Patokannya SELASA BERIKUTNYA, termasuk hari ini kalau hari ini Selasa.
// Bukan Selasa terakhir yang sudah lewat — karena rekap ini disiapkan
// SEBELUM meeting (Senin malam atau Selasa pagi). Kalau memakai Selasa
// terakhir, membukanya pada hari Senin akan menampilkan periode yang
// rekapnya sudah dipakai minggu sebelumnya.
function opsWeekRange(offset) {
  const hariIni = new Date(todayISO() + 'T00:00:00');
  const maju = (OPS_MEETING_DOW - hariIni.getDay() + 7) % 7; // 0 kalau hari ini Selasa

  const end = new Date(hariIni);
  end.setDate(end.getDate() + maju + (offset || 0) * 7);

  const start = new Date(end);
  start.setDate(start.getDate() - 6); // Rabu = Selasa - 6 hari

  return { start: isoDari(start), end: isoDari(end) };
}

// Task yang MASUK rekap. Sesuai permintaan: hanya task, tanpa hari
// libur dan tanpa yang dibatalkan.
//   - baris tanpa status = entri hari libur -> DIBUANG
//   - status 'Cancelled'                     -> DIBUANG
function opsFilterTasks(items) {
  return (items || []).filter(it => it.status && it.status !== 'Cancelled');
}

// Tiga kelompok, dan sengaja TIDAK saling tumpang tindih.
//
// 'Waiting Vendor' dipisah dari 'in progress' meskipun secara status
// keduanya sama-sama belum selesai. Alasannya untuk ruang meeting:
// yang satu "sedang saya kerjakan", yang satu "nunggu orang lain" —
// dan yang kedua itu yang perlu ditagih, bukan dijelaskan.
function opsGroupTasks(items) {
  const dipakai = opsFilterTasks(items);
  const urut = (a, b) => String(a.task_date).localeCompare(String(b.task_date));
  return {
    done:   dipakai.filter(it => it.status === 'Done').sort(urut),
    open:   dipakai.filter(it => it.status === 'On Progress' || it.status === 'Pending').sort(urut),
    vendor: dipakai.filter(it => it.status === 'Waiting Vendor').sort(urut),
    total:  dipakai.length,
  };
}

// Tanggal ringkas untuk baris meta, mis. "Wed 26 Aug".
function opsTanggalPendek(iso) {
  if (!iso) return '';
  return dayNameEN(iso).slice(0, 3) + ' ' + formatTanggalPendek(iso).replace(/ \d{4}$/, '');
}

// Umur task dalam hari sampai hari ini. Dipakai untuk menunjukkan
// mana yang sudah lama menggantung.
function opsUmurHari(iso) {
  const d1 = new Date(iso + 'T00:00:00');
  const d2 = new Date(todayISO() + 'T00:00:00');
  return Math.round((d2 - d1) / 86400000);
}

// Baris meta vendor: nama + tanggal janji + penanda terlambat.
// vendor_overdue dihitung database (v1.6): tanggal follow-up sudah
// lewat DAN status belum Done/Cancelled.
function opsMetaVendor(it) {
  const bagian = [];
  if (it.vendor_name) bagian.push('Vendor: ' + it.vendor_name);
  if (it.vendor_followup_date) {
    const tgl = 'Follow up ' + opsTanggalPendek(it.vendor_followup_date);
    if (it.vendor_overdue) {
      const telat = opsUmurHari(it.vendor_followup_date);
      bagian.push(tgl + ' — LATE ' + telat + 'd');
    } else {
      bagian.push(tgl);
    }
  } else if (it.vendor_name) {
    bagian.push('no follow-up date yet');
  }
  return bagian;
}

/* ── Teks polos untuk WhatsApp ─────────────────────────────
   Sengaja TANPA markdown/tabel: WhatsApp tidak merender tabel, dan
   tanda bintang untuk tebal justru berisik kalau dibaca di tempat
   yang tidak mendukungnya. Cukup baris, indentasi, dan angka. */
function opsRecapText(range, items) {
  const g = opsGroupTasks(items);
  const L = [];
  const NL2 = String.fromCharCode(10);

  L.push('OPS MEETING RECAP');
  L.push(dayNameEN(range.start) + ', ' + dateLongEN(range.start)
        + '  ->  ' + dayNameEN(range.end) + ', ' + dateLongEN(range.end));
  // Kalau periodenya belum tuntas, katakan — supaya angkanya tidak
  // dibaca sebagai hasil akhir.
  if (range.end > todayISO()) {
    L.push('(period still in progress — up to ' + dateLongEN(todayISO()) + ')');
  }
  L.push('');
  L.push('Tasks: ' + g.total + '  |  Done: ' + g.done.length
        + '  |  In progress: ' + g.open.length
        + '  |  Waiting vendor: ' + g.vendor.length);

  const blok = (judul, daftar, denganVendor) => {
    L.push('');
    L.push(judul + ' (' + daftar.length + ')');
    if (daftar.length === 0) {
      L.push('  -');
      return;
    }
    daftar.forEach(it => {
      L.push('  - ' + (it.task || '(no description)'));
      const meta = [opsTanggalPendek(it.task_date)];
      if (it.asset_code) meta.push(it.asset_code);
      if (it.priority) meta.push(it.priority);
      if (denganVendor) opsMetaVendor(it).forEach(m => meta.push(m));
      else if (it.status === 'Pending') meta.push('Pending');
      L.push('      ' + meta.join(' · '));
    });
  };

  blok('DONE', g.done, false);
  blok('IN PROGRESS', g.open, false);
  blok('WAITING VENDOR', g.vendor, true);

  const telat = g.vendor.filter(it => it.vendor_overdue).length;
  if (telat > 0) {
    L.push('');
    L.push('!! ' + telat + ' vendor follow-up' + (telat !== 1 ? 's' : '') + ' past due — needs chasing.');
  }

  return L.join(NL2);
}

/* ── Tampilan di layar ─────────────────────────────────────
   Dibuat terbaca langsung saat meeting, supaya tidak harus disalin
   dulu ke tempat lain hanya untuk dibaca. */
function renderOpsRecap(range, items) {
  const g = opsGroupTasks(items);

  const blok = (kelas, judul, daftar, denganVendor) => {
    let h = '<div class="ops-group ' + kelas + '">'
          + '<div class="ops-group-head">' + judul
          + '<span class="ops-group-count">' + daftar.length + '</span></div>';
    if (daftar.length === 0) {
      return h + '<div class="ops-empty">Nothing in this group.</div></div>';
    }
    daftar.forEach(it => {
      const meta = [opsTanggalPendek(it.task_date)];
      if (it.asset_code) meta.push(escapeHtml(it.asset_code));
      if (it.priority) meta.push(escapeHtml(it.priority));
      if (denganVendor) opsMetaVendor(it).forEach(m => meta.push(escapeHtml(m)));
      else if (it.status === 'Pending') meta.push('Pending');

      const telat = denganVendor && it.vendor_overdue;
      h += '<div class="ops-item' + (telat ? ' late' : '') + '">'
         + '<div class="ops-item-task">' + escapeHtml(it.task || '(no description)') + '</div>'
         + '<div class="ops-item-meta">'
         +   meta.map(m => '<span' + (telat && /LATE/.test(m) ? ' class="ops-late"' : '') + '>' + m + '</span>').join('')
         + '</div></div>';
    });
    return h + '</div>';
  };

  let html = '';
  html += blok('done', 'Done', g.done, false);
  html += blok('open', 'In progress', g.open, false);
  html += blok('vendor', 'Waiting vendor', g.vendor, true);

  // Catatan penutup: menjelaskan apa yang SENGAJA tidak masuk, supaya
  // selisih dengan jumlah baris di tab lain tidak bikin curiga ada
  // data hilang.
  html += '<div class="ops-note">Only tasks are included. Off days and cancelled tasks are left out on purpose.'
        + (range.end > todayISO() ? '<br>This period is still in progress — it closes on ' + dateLongEN(range.end) + '.' : '')
        + '</div>';

  $('reportList').innerHTML = html;
}

// Label baris navigasi minggu.
function renderOpsWeekLabel() {
  const r = opsWeekRange(opsWeekOffset);
  const el = $('opsWeekLabel');
  if (!el) return;
  el.innerHTML = escapeHtml(opsTanggalPendek(r.start) + '  →  ' + opsTanggalPendek(r.end))
    + '<span class="ops-week-sub">' + escapeHtml(dateLongEN(r.start) + ' – ' + dateLongEN(r.end))
    + (r.end > todayISO() ? ' · in progress' : '') + '</span>';
  // Tidak pernah maju melewati meeting terdekat: datanya belum ada.
  $('opsNextWeek').disabled = opsWeekOffset >= 0;
}

async function copyOpsRecap() {
  if (!reportCache || !reportCache.items) {
    toast('Show the recap first before copying.', 'err');
    return;
  }
  const teks = opsRecapText(opsWeekRange(opsWeekOffset), reportCache.items);
  try {
    if (navigator.clipboard && navigator.clipboard.writeText) {
      await navigator.clipboard.writeText(teks);
    } else {
      // Jalur cadangan untuk peramban tanpa navigator.clipboard,
      // pola yang sama dipakai copyReportForSheets.
      const ta = document.createElement('textarea');
      ta.value = teks;
      ta.setAttribute('readonly', '');
      ta.style.position = 'fixed';
      ta.style.left = '-9999px';
      document.body.appendChild(ta);
      ta.select();
      const ok = document.execCommand('copy');
      document.body.removeChild(ta);
      if (!ok) throw new Error('Copy was blocked by the browser.');
    }
    toast('Recap copied — paste it into WhatsApp', 'good');
  } catch (e) {
    toast(e.message || 'Could not copy the recap.', 'err');
  }
}
let reportCache = null;

function initReportDefaults() {
  if ($('reportMonth').value) return; // sudah pernah diisi, jangan timpa
  const now = new Date();
  const y = now.getFullYear();
  const m = String(now.getMonth() + 1).padStart(2, '0');
  $('reportMonth').value = y + '-' + m;

  const iso = todayISO();
  $('reportEnd').value = iso;
  $('reportEndText').textContent = formatTanggalPendek(iso);
  const d = new Date(iso);
  d.setDate(1);
  const startIso = d.toISOString().slice(0, 10);
  $('reportStart').value = startIso;
  $('reportStartText').textContent = formatTanggalPendek(startIso);
}

function setReportMode(mode) {
  reportMode = mode;
  $('modeMonth').classList.toggle('on', mode === 'month');
  $('modeRange').classList.toggle('on', mode === 'range');
  $('modeOps').classList.toggle('on', mode === 'ops');   // v2.19
  $('modeAi').classList.toggle('on', mode === 'ai');     // v2.23
  $('reportMonthRow').classList.toggle('hidden', mode !== 'month');
  $('reportRangeRow').classList.toggle('hidden', mode !== 'range');

  // v2.19 — baris minggu & tombol salin rekap hanya di mode ops.
  const ops = mode === 'ops';
  $('opsWeekRow').classList.toggle('hidden', !ops);
  $('opsCopyRow').classList.toggle('hidden', !ops);
  if (ops) renderOpsWeekLabel();

  // v2.23 — panel AI hanya di mode ai. Tombol Copy TETAP tersembunyi
  // di sini: ia baru muncul kalau ada laporan yang benar-benar tampil,
  // supaya tidak pernah ada tombol salin tanpa isi.
  const ai = mode === 'ai';
  $('aiRow').classList.toggle('hidden', !ai);
  if (!ai) $('aiCopyRow').classList.add('hidden');
  if (ai) renderAiRangeLabel();
}

function currentReportRange() {
  // v2.19 — rentang mode ops DIHITUNG, tidak diambil dari input.
  // Karena itu tombol Show, Download Excel, Official Report, dan
  // Copy for Google Sheets otomatis ikut memakai rentang minggu ini
  // tanpa perlu diubah satu pun.
  if (reportMode === 'ops') return opsWeekRange(opsWeekOffset);

  // v2.23 — mode ai memakai alasan yang sama: rentangnya sudah
  // ditentukan oleh pilihan periode, jadi Show / Download Excel /
  // Official Report / Copy for Google Sheets otomatis bekerja pada
  // periode yang sama dengan laporan AI-nya, tanpa satu pun diubah.
  if (reportMode === 'ai') {
    const p = aiPeriodInfo(aiPeriod);
    return { start: p.start, end: p.end };
  }

  if (reportMode === 'month') {
    const val = $('reportMonth').value; // "YYYY-MM"
    if (!val) return null;
    const [y, m] = val.split('-').map(Number);
    const start = y + '-' + String(m).padStart(2, '0') + '-01';
    const lastDay = new Date(y, m, 0).getDate();
    const end = y + '-' + String(m).padStart(2, '0') + '-' + String(lastDay).padStart(2, '0');
    return { start, end };
  }
  const start = $('reportStart').value;
  const end = $('reportEnd').value;
  if (!start || !end) return null;
  return { start, end };
}

/* ══════════════════════════════════════════════
   v2.23 — AI INTELLIGENCE REPORT

   Mingguan SENIN–MINGGU. Sengaja BEDA dari rekap Ops Meeting
   (Rabu–Selasa): yang ini laporan periode kalender, yang itu
   menutup satu siklus meeting. Menyatukan keduanya akan membuat
   salah satunya salah.

   Seluruh ANGKA dihitung server dari v_daily_activity. Gemini
   hanya merangkai kalimat dari angka yang sudah jadi — prompt-nya
   melarang menghitung atau menaksir. Karena itu angka mentahnya
   ikut ditampilkan di bawah narasi: kalau AI keliru menyebut
   sesuatu, pembandingnya ada di layar yang sama.
   ══════════════════════════════════════════════ */

let aiPeriod = 'this-week';  // 'this-week' | 'last-week' | 'this-month' | 'last-month'
let aiLang = 'en';           // default EN sesuai permintaan
let aiBusy = false;
let aiLast = null;           // laporan yang sedang tampil (untuk tombol Copy)
let aiSavedCache = [];

// Senin sebagai hari pertama. getDay() memberi 0 untuk Minggu, jadi
// (dow + 6) % 7 menghasilkan 0 untuk Senin dan 6 untuk Minggu.
function aiWeekRange(offsetPekan) {
  const hariIni = new Date(todayISO() + 'T00:00:00');
  const kebelakang = (hariIni.getDay() + 6) % 7;
  const start = new Date(hariIni);
  start.setDate(start.getDate() - kebelakang + (offsetPekan || 0) * 7);
  const end = new Date(start);
  end.setDate(end.getDate() + 6);
  return { start: isoDari(start), end: isoDari(end) };
}

// new Date(y, m, 1) menormalkan bulan di luar 0..11 dengan sendirinya,
// jadi offset -1 dari Januari benar jatuh ke Desember tahun sebelumnya.
// new Date(y, m + 1, 0) = hari terakhir bulan m, termasuk Februari
// tahun kabisat — tanpa tabel jumlah hari yang harus dijaga sendiri.
function aiMonthRange(offsetBulan) {
  const hariIni = new Date(todayISO() + 'T00:00:00');
  const y = hariIni.getFullYear();
  const m = hariIni.getMonth() + (offsetBulan || 0);
  return { start: isoDari(new Date(y, m, 1)), end: isoDari(new Date(y, m + 1, 0)) };
}

// Satu tempat yang menentukan rentang SEKARANG dan rentang PEMBANDING.
// Pembandingnya selalu satu periode tepat sebelumnya dan sama
// panjangnya, supaya perbandingannya jujur.
function aiPeriodInfo(p) {
  if (p === 'this-month' || p === 'last-month') {
    const off = p === 'this-month' ? 0 : -1;
    const kini = aiMonthRange(off);
    const lalu = aiMonthRange(off - 1);
    const [y, m] = kini.start.split('-').map(Number);
    return {
      periodType: 'month', start: kini.start, end: kini.end,
      prevStart: lalu.start, prevEnd: lalu.end,
      label: MONTH_NAME_EN[m - 1] + ' ' + y,
    };
  }
  const off = p === 'last-week' ? -1 : 0;
  const kini = aiWeekRange(off);
  const lalu = aiWeekRange(off - 1);
  return {
    periodType: 'week', start: kini.start, end: kini.end,
    prevStart: lalu.start, prevEnd: lalu.end,
    label: dateLongEN(kini.start) + ' – ' + dateLongEN(kini.end),
  };
}

function renderAiRangeLabel() {
  const el = $('aiRangeLabel');
  if (!el) return;
  const p = aiPeriodInfo(aiPeriod);
  // textContent, bukan innerHTML: tidak ada markup di sini, jadi tidak
  // ada jalan masuk yang perlu di-escape.
  el.textContent = formatTanggalPendek(p.start) + '  →  ' + formatTanggalPendek(p.end)
    + '   ·   vs ' + formatTanggalPendek(p.prevStart) + ' → ' + formatTanggalPendek(p.prevEnd);
}

function setAiPeriod(p) {
  aiPeriod = p;
  ['this-week', 'last-week', 'this-month', 'last-month'].forEach(k => {
    const el = $('aiP' + k.split('-').map(s => s[0].toUpperCase() + s.slice(1)).join(''));
    if (el) el.classList.toggle('on', k === p);
  });
  renderAiRangeLabel();
}

function setAiLang(l) {
  aiLang = l === 'id' ? 'id' : 'en';
  $('aiLangEn').classList.toggle('on', aiLang === 'en');
  $('aiLangId').classList.toggle('on', aiLang === 'id');
  // Disimpan lokal supaya tidak perlu diatur ulang tiap kali dibuka.
  // Gagal menyimpan (mode privat) tidak boleh menghentikan apa pun.
  try { localStorage.setItem('mfbit_ai_lang', aiLang); } catch (e) {}
}

// Judul bagian mengikuti BAHASA LAPORAN, bukan bahasa antarmuka.
// Kalau laporannya ID tapi judulnya EN, hasil salinan ke WhatsApp jadi
// campur dua bahasa dalam satu pesan.
const AIR_LABEL = {
  en: { summary: 'Summary', highlights: 'Highlights', concerns: 'Needs attention',
        comparison: 'Vs previous period', recommendations: 'Recommendations',
        numbers: 'Source numbers',
        note: 'The numbers above are counted from the database, not by the AI. The AI only writes the wording.' },
  id: { summary: 'Ringkasan', highlights: 'Yang menonjol', concerns: 'Perlu perhatian',
        comparison: 'Dibanding periode sebelumnya', recommendations: 'Rekomendasi',
        numbers: 'Angka sumber',
        note: 'Angka di atas dihitung dari database, bukan oleh AI. AI hanya menyusun kalimatnya.' },
};

// 'en-GB' dipilih SENGAJA. Locale 'id-ID' memakai TITIK sebagai pemisah
// jam-menit, yang di v2.16 menghasilkan jam terbaca "19.38:37".
function aiWaktuSingkat(ts) {
  if (!ts) return '';
  const d = new Date(ts);
  if (isNaN(d.getTime())) return String(ts).slice(0, 16);
  return d.toLocaleString('en-GB', {
    timeZone: CONFIG.TIMEZONE, day: '2-digit', month: 'short', year: 'numeric',
    hour: '2-digit', minute: '2-digit', hour12: false,
  });
}

function aiStatChips(s) {
  if (!s) return [];
  const n = (v) => typeof v === 'number' ? v : 0;
  const chips = [
    n(s.workTotal) + ' tasks',
    n(s.done) + ' done',
    n(s.open) + ' open',
    n(s.critical) + ' critical',
    n(s.waitingVendor) + ' waiting vendor',
    n(s.daysWithEntry) + ' days logged',
  ];
  if (n(s.offDays) > 0) chips.push(n(s.offDays) + ' off days');
  if (n(s.vendorOverdue) > 0) chips.push(n(s.vendorOverdue) + ' vendor overdue');
  if (n(s.cancelled) > 0) chips.push(n(s.cancelled) + ' cancelled');
  return chips;
}

function renderAiReport(d, gagalSimpan) {
  const wadah = $('reportList');
  if (!wadah) return;
  const L = AIR_LABEL[d.lang === 'id' ? 'id' : 'en'];
  const r = d.report || {};

  const bagian = (judul, isiHtml, kelas) => isiHtml
    ? '<div class="air-sec' + (kelas ? ' ' + kelas : '') + '">'
      + '<div class="air-sec-title">' + escapeHtml(judul) + '</div>' + isiHtml + '</div>'
    : '';
  const daftar = (arr) => (Array.isArray(arr) && arr.length)
    ? '<ul class="air-list">' + arr.map(x => '<li>' + escapeHtml(String(x)) + '</li>').join('') + '</ul>'
    : '';
  const teks = (v) => v ? '<div class="air-body">' + escapeHtml(String(v)) + '</div>' : '';

  const chips = aiStatChips(d.stats);

  wadah.innerHTML = '<div class="air-card">'
    + (r.headline ? '<div class="air-headline">' + escapeHtml(String(r.headline)) + '</div>' : '')
    + bagian(L.summary, teks(r.summary))
    + bagian(L.highlights, daftar(r.highlights))
    + bagian(L.concerns, daftar(r.concerns), 'concern')
    + bagian(L.comparison, teks(r.comparison))
    + bagian(L.recommendations, daftar(r.recommendations))
    + (chips.length
        ? '<div class="air-stat-row">' + chips.map(c => '<span>' + escapeHtml(c) + '</span>').join('') + '</div>'
        : '')
    + '<div class="air-note">' + escapeHtml(L.note)
    + (gagalSimpan ? ' ' + escapeHtml('This report could not be saved to the log — copy it if you need to keep it.') : '')
    + '</div>'
    + '</div>';
}

// Teks polos untuk WhatsApp. Bentuknya mengikuti opsRecapText: satu
// baris judul, lalu bagian-bagian bertanda, tanpa markdown yang tidak
// dikenali WhatsApp.
function aiReportText(d) {
  const L = AIR_LABEL[d.lang === 'id' ? 'id' : 'en'];
  const r = d.report || {};
  const baris = [];
  baris.push('*AI REPORT — ' + String(d.label || '') + '*');
  if (r.headline) baris.push(String(r.headline));
  const seksiTeks = (judul, isi) => {
    if (!isi) return;
    baris.push('');
    baris.push(judul.toUpperCase());
    baris.push(String(isi));
  };
  const seksiDaftar = (judul, arr) => {
    if (!Array.isArray(arr) || !arr.length) return;
    baris.push('');
    baris.push(judul.toUpperCase());
    arr.forEach(x => baris.push('- ' + String(x)));
  };
  seksiTeks(L.summary, r.summary);
  seksiDaftar(L.highlights, r.highlights);
  seksiDaftar(L.concerns, r.concerns);
  seksiTeks(L.comparison, r.comparison);
  seksiDaftar(L.recommendations, r.recommendations);
  const chips = aiStatChips(d.stats);
  if (chips.length) {
    baris.push('');
    baris.push(L.numbers.toUpperCase() + ': ' + chips.join(' · '));
  }
  baris.push('');
  baris.push(L.note);
  return baris.join('\n');
}

// Penyalin bersama untuk fitur baru. copyOpsRecap & copyReportForSheets
// DIBIARKAN apa adanya — keduanya sudah terbukti jalan di HP pengguna,
// dan menyatukannya sekarang berarti menyentuh kode yang tidak perlu
// disentuh.
async function salinKePapanKlip(teks) {
  if (navigator.clipboard && navigator.clipboard.writeText) {
    await navigator.clipboard.writeText(teks);
    return;
  }
  const ta = document.createElement('textarea');
  ta.value = teks;
  ta.setAttribute('readonly', '');
  ta.style.position = 'fixed';
  ta.style.left = '-9999px';
  document.body.appendChild(ta);
  ta.select();
  const ok = document.execCommand('copy');
  document.body.removeChild(ta);
  if (!ok) throw new Error('Copy was blocked by the browser.');
}

async function copyAiReport() {
  if (!aiLast || !aiLast.report) {
    toast('Generate the report first before copying.', 'err');
    return;
  }
  try {
    await salinKePapanKlip(aiReportText(aiLast));
    toast('Report copied — paste it into WhatsApp', 'good');
  } catch (e) {
    toast(e.message || 'Could not copy the report.', 'err');
  }
}

async function generateAiReport() {
  if (aiBusy) return;
  const p = aiPeriodInfo(aiPeriod);
  const btn = $('aiGenBtn');
  aiBusy = true;
  btn.disabled = true;
  btn.textContent = 'Generating…';
  $('reportSummary').innerHTML = '<div class="riwayat-empty">Writing the report… this can take up to a minute.</div>';
  $('reportList').innerHTML = '';
  $('aiCopyRow').classList.add('hidden');

  try {
    const r = await callApi({
      action: 'ai-report', sessionToken: state.token,
      periodType: p.periodType, startDate: p.start, endDate: p.end,
      prevStartDate: p.prevStart, prevEndDate: p.prevEnd,
      lang: aiLang, label: p.label,
    });

    if (!r.ok) {
      $('reportSummary').innerHTML = '<div class="riwayat-empty">'
        + escapeHtml(r.error || 'Failed to generate the report.') + '</div>';
      return;
    }
    // Periode tanpa catatan: server sengaja TIDAK memanggil AI. Yang
    // tampil adalah keterangan apa adanya, bukan narasi karangan.
    if (r.empty) {
      aiLast = null;
      $('reportSummary').innerHTML = '<div class="riwayat-empty">No activity recorded for '
        + escapeHtml(p.label) + ' — nothing to report yet.</div>';
      return;
    }

    aiLast = {
      report: r.report, stats: r.stats, prevStats: r.prevStats,
      label: r.label || p.label, lang: r.lang || aiLang,
      from: p.start, to: p.end,
    };
    $('reportSummary').innerHTML = '';
    renderAiReport(aiLast, r.saved === false);
    $('aiCopyRow').classList.remove('hidden');

  } catch (e) {
    $('reportSummary').innerHTML = '<div class="riwayat-empty">'
      + escapeHtml(e.message || 'Failed to generate the report.') + '</div>';
  } finally {
    aiBusy = false;
    btn.disabled = false;
    btn.textContent = 'Generate report';
  }
}

// Laporan yang sudah pernah dibuat dibaca ulang dari activity_log —
// membaca laporan minggu lalu tidak perlu membakar kuota Gemini lagi.
async function loadSavedAiReports() {
  openSheet('Saved AI reports', '<div class="riwayat-empty">Loading…</div>');
  try {
    const r = await callApi({ action: 'get-ai-reports', sessionToken: state.token });
    if (!r.ok) {
      $('sheetBody').innerHTML = '<div class="riwayat-empty">'
        + escapeHtml(r.error || 'Failed to load saved reports.') + '</div>';
      return;
    }
    // Baris yang isinya gagal di-parse di server datang dengan report
    // null. Dibuang di sini supaya tidak ada kartu kosong yang diketuk
    // lalu tidak melakukan apa-apa.
    aiSavedCache = (r.items || []).filter(x => x && x.report);
    if (!aiSavedCache.length) {
      $('sheetBody').innerHTML = '<div class="riwayat-empty">No saved reports yet. Generate one first.</div>';
      return;
    }
    $('sheetBody').innerHTML = aiSavedCache.map((x, i) =>
      '<div class="air-saved-item" data-i="' + i + '">'
      + '<div class="air-saved-top">' + escapeHtml(String(x.label || '')) + '</div>'
      + '<div class="air-saved-meta">'
      + escapeHtml(String(x.period_type || '') + ' · ' + String(x.lang || 'en').toUpperCase()
                   + ' · ' + aiWaktuSingkat(x.created_at))
      + '</div></div>').join('');

    $('sheetBody').querySelectorAll('.air-saved-item').forEach(el => {
      el.addEventListener('click', () => {
        const x = aiSavedCache[Number(el.dataset.i)];
        if (!x) return;
        aiLast = {
          report: x.report, stats: x.stats, prevStats: x.prev_stats,
          label: x.label, lang: x.lang || 'en',
          from: x.date_from, to: x.date_to,
        };
        closeSheet();
        if (reportMode !== 'ai') setReportMode('ai');
        $('reportSummary').innerHTML = '';
        renderAiReport(aiLast, false);
        $('aiCopyRow').classList.remove('hidden');
      });
    });
  } catch (e) {
    $('sheetBody').innerHTML = '<div class="riwayat-empty">'
      + escapeHtml(e.message || 'Failed to load saved reports.') + '</div>';
  }
}

// ── DASBOR ────────────────────────────────────────────────────
// Reuse action 'get-report' yang sudah ada (bukan action baru) --
// server sudah menghitung byStatus/byPriority/tagFrequency untuk
// rentang tanggal manapun; Dasbor cukup memanggilnya dengan rentang
// "bulan berjalan" dan menyusun ulang jadi grafik di sisi HP.
//
// Instance Chart.js disimpan di variabel berikut supaya bisa
// di-destroy() sebelum re-render -- Chart.js TIDAK otomatis
// membersihkan canvas lama; kalau dibiarkan, tiap kali Dasbor
// dibuka ulang grafik lama menumpuk di memori dan bisa tampil
// dobel/rusak.
let dashCharts = { status: null, tag: null, priority: null, daily: null, workType: null };

// v2.17 — offset bulan Dashboard. 0 = bulan berjalan, -1 = bulan lalu.
// Tidak pernah positif: melihat bulan yang belum terjadi tidak ada
// gunanya, dan tombol "next" dinonaktifkan saat offset sudah 0.
let dashMonthOffset = 0;

// Rentang satu bulan penuh. Argumen offset ditambahkan di v2.17;
// dipanggil tanpa argumen hasilnya PERSIS sama seperti sebelumnya,
// jadi pemanggil lama tidak berubah perilakunya.
function currentMonthRange(offset) {
  const now = new Date();
  // Tanggal di-set ke 1 dulu sebelum menggeser bulan. Tanpa itu,
  // menggeser dari tanggal 31 bisa melompati satu bulan penuh
  // (31 Maret dikurangi 1 bulan = 3 Maret, bukan Februari).
  const dasar = new Date(now.getFullYear(), now.getMonth() + (offset || 0), 1);
  const y = dasar.getFullYear();
  const m = dasar.getMonth() + 1;
  const start = y + '-' + String(m).padStart(2, '0') + '-01';
  const lastDay = new Date(y, m, 0).getDate();
  const end = y + '-' + String(m).padStart(2, '0') + '-' + String(lastDay).padStart(2, '0');
  return { start, end, y, m };
}

async function loadDashboard() {
  const range = currentMonthRange(dashMonthOffset);
  // Tombol "bulan berikutnya" mati saat sudah di bulan berjalan.
  $('dashNextMonth').disabled = dashMonthOffset >= 0;
  // v2.11 — MONTH_NAME_ID (Indonesia) diganti pakai MONTH_NAME_EN yang
  // sudah didefinisikan global (lihat formatTanggalPanjang). Sebelumnya
  // dashMonthLabel tetap menampilkan nama bulan Indonesia meskipun label
  // statis di sekitarnya sudah diterjemahkan — inkonsistensi yang lolos
  // scan pertama karena variabel lokal ini bernama beda dari yang dicari.
  $('dashMonthLabel').textContent = MONTH_NAME_EN[range.m - 1] + ' ' + range.y;

  $('dashKpi').innerHTML = '<div class="summary-card"><div class="summary-num">—</div><div class="summary-label">Loading…</div></div>';
  $('dashEmpty').classList.add('hidden');
  $('dashCharts').classList.add('hidden');

  try {
    const r = await callApi({
      action: 'get-report', sessionToken: state.token,
      startDate: range.start, endDate: range.end,
    });

    if (!r.ok) {
      $('dashKpi').innerHTML = '<div class="riwayat-empty">' + (r.error || 'Failed to load dashboard.') + '</div>';
      return;
    }

    renderDashboard(r.summary, r.items || [], range);

  } catch (e) {
    $('dashKpi').innerHTML = '<div class="riwayat-empty">' + (e.message || 'Failed to load dashboard.') + '</div>';
  }
}

// v2.11 — 4 metrik baru dihitung 100% di client dari "items" yang
// SUDAH dikembalikan action get-report (task_date, status per baris).
// TIDAK perlu endpoint/perubahan Edge Function baru untuk ini.
function computeExtraStats(items, range) {
  const OPEN_STATUSES = ['On Progress', 'Pending', 'Waiting Vendor'];
  const today = todayISO();

  // 1) Belum selesai — hitung status yang masih terbuka
  const openItems = items.filter(it => OPEN_STATUSES.includes(it.status));
  const openCount = openItems.length;

  // 2) Task tertua belum selesai — task_date paling lama dari openItems
  //    v2.17 — barisnya ikut disimpan, bukan cuma selisih harinya.
  //    "10d" saja tidak memberi tahu task MANA yang nyangkut; itu
  //    memunculkan pertanyaan, bukan jawaban.
  let oldestDays = null;
  let oldestItem = null;
  if (openItems.length > 0) {
    oldestItem = openItems.reduce((min, it) =>
      it.task_date < min.task_date ? it : min, openItems[0]);
    const d1 = new Date(oldestItem.task_date + 'T00:00:00');
    const d2 = new Date(today + 'T00:00:00');
    oldestDays = Math.round((d2 - d1) / 86400000);
  }

  // 2b) v2.17 — hari libur & follow-up vendor yang sudah lewat.
  //     Baris tanpa status = entri hari libur (Day Off / Public
  //     Holiday / Leave). Dipisah karena baris itu TIDAK boleh ikut
  //     jadi pembagi persentase penyelesaian — lihat renderDashboard.
  const offDays = items.filter(it => !it.status).length;
  const workTotal = items.length - offDays;
  // vendor_overdue dihitung database (v1.6). Kalau server masih lama,
  // nilainya undefined dan hasilnya 0 — kartunya tidak muncul.
  const vendorOverdue = items.filter(it => it.vendor_overdue === true).length;

  // 3) Hari terisi — hari unik yang punya entry, dibagi hari yang SUDAH
  //    berlalu sejak awal bulan sampai HARI INI (bukan sampai akhir
  //    bulan — supaya hari yang belum terjadi tidak dihitung sebagai
  //    "bolong").
  const uniqueDates = new Set(items.map(it => it.task_date));
  const isCurrentMonth = today >= range.start && today <= range.end;
  const lastRelevantDay = isCurrentMonth ? today : range.end;
  const d1 = new Date(range.start + 'T00:00:00');
  const d2 = new Date(lastRelevantDay + 'T00:00:00');
  const daysPassed = Math.round((d2 - d1) / 86400000) + 1;
  const filledDays = uniqueDates.size;

  // 4) Streak — hari berturut-turut ada entry, dihitung mundur dari
  //    HARI INI. Kalau hari ini belum diisi, mulai hitung dari kemarin
  //    (supaya belum sempat isi hari ini tidak langsung memutus streak
  //    yang sedang berjalan).
  let streak = 0;
  let cursor = new Date(today + 'T00:00:00');
  if (!uniqueDates.has(today)) {
    cursor.setDate(cursor.getDate() - 1);
  }
  while (true) {
    const iso = cursor.toLocaleDateString('en-CA');
    if (uniqueDates.has(iso)) {
      streak++;
      cursor.setDate(cursor.getDate() - 1);
    } else {
      break;
    }
  }

  return {
    openCount, oldestDays, filledDays, daysPassed, streak,
    // v2.17
    oldestItem, offDays, workTotal, vendorOverdue,
  };
}

function renderDashboard(s, items, range) {
  if (!s || s.total === 0) {
    $('dashKpi').innerHTML = '';
    $('dashEmpty').classList.remove('hidden');
    $('dashCharts').classList.add('hidden');
    return;
  }

  $('dashEmpty').classList.add('hidden');
  $('dashCharts').classList.remove('hidden');

  const doneCount = s.byStatus['Done'] || 0;
  const extra = computeExtraStats(items, range);

  // v2.17 — PEMBAGI PERSENTASE DIPERBAIKI.
  //
  // Sebelumnya: donePct = doneCount / s.total, dan s.total adalah
  // JUMLAH SELURUH BARIS termasuk Day Off / Public Holiday / Leave
  // yang status-nya kosong. Hari libur ikut menekan angka "% Done".
  // Contoh nyata dari data pengguna: 13 baris, 2 Done, 4 Open ->
  // tampil 15%. Terhadap task yang benar-benar punya status hasilnya
  // 2/6 = 33%. Selisihnya lebih dari dua kali lipat, dan arahnya
  // selalu merugikan: capaian terlihat lebih rendah dari sebenarnya.
  //
  // s.workTotal dikirim Edge Function v1.16+. Kalau server masih lama,
  // dipakai hitungan lokal dari items — hasilnya sama, hanya dihitung
  // di HP. Jadi perbaikan ini TIDAK menunggu deploy server.
  const workTotal = (typeof s.workTotal === 'number') ? s.workTotal : extra.workTotal;
  const offDays = (typeof s.offDays === 'number') ? s.offDays : extra.offDays;
  const donePct = workTotal > 0 ? Math.round((doneCount / workTotal) * 100) : 0;

  // v2.11 — 6 stat card, 2 kolom x 3 baris (simetris). Default hanya 2
  // baris pertama (4 card) yang tampil; sisanya di balik tombol
  // "Show more" supaya Dashboard tidak langsung panjang saat dibuka.
  const filledPct = extra.daysPassed > 0 ? Math.round((extra.filledDays / extra.daysPassed) * 100) : 0;
  const oldestLabel = extra.oldestDays === null ? '—' : (extra.oldestDays === 0 ? 'Today' : extra.oldestDays + 'd');

  // v2.17 — angka Done ditulis sebagai PECAHAN, bukan persen telanjang.
  // "2/6" tidak bisa menyesatkan: pembaginya terlihat, jadi kalau suatu
  // saat salah lagi, kesalahannya langsung kelihatan tanpa perlu
  // membongkar kode.
  const doneLabel = 'Done · ' + donePct + '%';

  // Nama task tertua. Dipotong supaya kartu tidak melar.
  const oldestTaskName = extra.oldestItem ? String(extra.oldestItem.task || '').trim() : '';
  const oldestSub = oldestTaskName
    ? '<div class="summary-sub">' + escapeHtml(oldestTaskName) + '</div>'
    : '';

  const cardsAlwaysVisible =
      '<div class="summary-card"><div class="summary-num">' + workTotal + '</div><div class="summary-label">Work tasks</div></div>'
    + '<div class="summary-card"><div class="summary-num">' + doneCount + '/' + workTotal + '</div><div class="summary-label">' + doneLabel + '</div></div>'
    // v2.17 — dua kartu berikut BISA DIKETUK: keduanya memunculkan
    // pertanyaan ("yang mana?"), jadi harus bisa menjawabnya sendiri.
    + '<div class="summary-card tappable" id="dashCardOpen" role="button" tabindex="0">'
    +   '<div class="summary-num">' + extra.openCount + '</div><div class="summary-label">Open</div></div>'
    + '<div class="summary-card tappable" id="dashCardOldest" role="button" tabindex="0">'
    +   '<div class="summary-num">' + oldestLabel + '</div><div class="summary-label">Oldest open</div>' + oldestSub + '</div>';

  // Kartu vendor telat hanya muncul kalau memang ADA yang telat.
  // Kartu peringatan yang selalu menampilkan 0 lama-lama diabaikan,
  // dan saat benar-benar berisi pun ikut tidak terlihat.
  const kartuVendor = extra.vendorOverdue > 0
    ? '<div class="summary-card alert"><div class="summary-num">' + extra.vendorOverdue + '</div><div class="summary-label">Vendor overdue</div></div>'
    : '';

  const cardsCollapsible =
      '<div class="summary-card"><div class="summary-num">' + extra.filledDays + '/' + extra.daysPassed + '</div><div class="summary-label">Days filled (' + filledPct + '%)</div></div>'
    + '<div class="summary-card"><div class="summary-num">' + extra.streak + '</div><div class="summary-label">Day' + (extra.streak !== 1 ? 's' : '') + ' streak</div></div>'
    // v2.17 — hari libur ditampilkan sebagai angka tersendiri, bukan
    // dilebur ke "Total task" seperti dulu.
    + '<div class="summary-card"><div class="summary-num">' + offDays + '</div><div class="summary-label">Off days</div></div>'
    + kartuVendor;

  $('dashKpi').innerHTML =
    '<div class="summary-grid">' + cardsAlwaysVisible + '</div>'
    + '<div class="summary-grid hidden" id="dashKpiMore">' + cardsCollapsible + '</div>'
    // v2.12 — SOP 8/14: toggle ini harus mengumumkan status buka/tutup ke
    // screen reader. role=button + tabindex supaya juga bisa dicapai keyboard
    // (elemennya div, bukan <button>, mengikuti gaya elemen lain di file ini).
    + '<div class="dash-kpi-toggle" id="dashKpiToggle" role="button" tabindex="0"'
    + ' aria-expanded="false" aria-controls="dashKpiMore">Show more &#9662;</div>';

  const kpiToggle = $('dashKpiToggle');
  const flipKpi = () => {
    const more = $('dashKpiMore');
    const isHidden = more.classList.contains('hidden');
    more.classList.toggle('hidden', !isHidden);
    kpiToggle.innerHTML = isHidden ? 'Show less &#9652;' : 'Show more &#9662;';
    // isHidden = kondisi SEBELUM dibalik, jadi setelah dibalik status
    // terbuka = isHidden. Ditulis eksplisit supaya tidak salah baca.
    kpiToggle.setAttribute('aria-expanded', isHidden ? 'true' : 'false');
  };
  // v2.17 — kartu Open & Oldest open membuka History dalam mode
  // "open tasks". Keduanya membuka daftar yang SAMA: yang tertua
  // otomatis berada di baris pertama karena server mengurutkan dari
  // yang paling lama. Jadi tidak perlu dua alur berbeda.
  const bukaOpenTasks = () => {
    riwayatMode = 'open';
    const cari = $('riwayatSearch');
    if (cari) cari.value = ''; // pencarian lama tidak boleh ikut terbawa
    switchView('riwayat');
  };
  ['dashCardOpen', 'dashCardOldest'].forEach(id => {
    const el = $(id);
    if (!el) return;
    el.addEventListener('click', bukaOpenTasks);
    el.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); bukaOpenTasks(); }
    });
  });

  kpiToggle.addEventListener('click', flipKpi);
  kpiToggle.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); flipKpi(); }
  });

  renderDashStatusChart(s.byStatus);
  renderDashTagChart(s.tagFrequency);
  renderDashPriorityChart(s.byPriority);
  renderDashDailyChart(items, range);
  renderDashWorkTypeChart(s.byWorkType);
}

// Palet warna konsisten dengan chip yang sudah dipakai di Riwayat/
// Laporan/Worksheet (--red untuk Critical, --amber untuk High, dst)
// supaya bahasa visualnya senada di seluruh app, bukan warna baru
// yang tidak ada hubungannya.
const DASH_STATUS_COLORS = {
  'Done': '#2E7D5B', 'On Progress': '#C9A84C', 'Pending': '#8A96A3',
  'Waiting Vendor': '#5C6B7A', 'Cancelled': '#C0392B',
};
const DASH_PRIORITY_COLORS = { 'Low': '#64748A', 'Medium': '#0B1B2E', 'High': '#B7791F', 'Critical': '#C0392B' };
const DASH_PRIORITY_ORDER = ['Low', 'Medium', 'High', 'Critical'];

function renderDashStatusChart(byStatus) {
  const labels = Object.keys(byStatus);
  const data = labels.map(l => byStatus[l]);
  const colors = labels.map(l => DASH_STATUS_COLORS[l] || '#8A96A3');

  if (dashCharts.status) dashCharts.status.destroy();
  if (typeof Chart === 'undefined') return;

  dashCharts.status = new Chart($('dashStatusChart'), {
    type: 'doughnut',
    data: { labels, datasets: [{ data, backgroundColor: colors, borderWidth: 0 }] },
    options: {
      responsive: true, maintainAspectRatio: false,
      plugins: { legend: { position: 'bottom', labels: { boxWidth: 12, font: { size: 11 } } } },
    },
  });
}

function renderDashTagChart(tagFrequency) {
  const sorted = Object.entries(tagFrequency || {}).sort((a, b) => b[1] - a[1]).slice(0, 5);
  const labels = sorted.map(e => e[0]);
  const data = sorted.map(e => e[1]);

  if (dashCharts.tag) dashCharts.tag.destroy();
  if (typeof Chart === 'undefined') return;

  dashCharts.tag = new Chart($('dashTagChart'), {
    type: 'bar',
    data: { labels, datasets: [{ data, backgroundColor: '#C9A84C', borderRadius: 6 }] },
    options: {
      responsive: true, maintainAspectRatio: false,
      plugins: { legend: { display: false } },
      scales: { y: { ticks: { precision: 0 } } },
    },
  });
}

function renderDashPriorityChart(byPriority) {
  const labels = DASH_PRIORITY_ORDER.filter(p => byPriority[p]);
  const data = labels.map(l => byPriority[l]);
  const colors = labels.map(l => DASH_PRIORITY_COLORS[l]);

  if (dashCharts.priority) dashCharts.priority.destroy();
  if (typeof Chart === 'undefined') return;

  dashCharts.priority = new Chart($('dashPriorityChart'), {
    type: 'bar',
    data: { labels: labels.map(l => PRIORITY_SHORT_LABEL[l] || l), datasets: [{ data, backgroundColor: colors, borderRadius: 6 }] },
    options: {
      responsive: true, maintainAspectRatio: false,
      plugins: { legend: { display: false } },
      scales: { y: { ticks: { precision: 0 } } },
    },
  });
}

// v2.11 — chart baru: Aktivitas per hari. Dihitung dari "items" mentah
// (bukan dari summary yang sudah teragregasi server), karena summary
// tidak punya breakdown per tanggal. Sumbu-X mencakup SETIAP tanggal
// dalam rentang (termasuk yang 0 entry), supaya hari yang bolong
// terlihat jelas sebagai jarak kosong, bukan cuma hilang dari chart.
// v2.17 — batang dipisah jadi dua tumpukan: kerja dan libur.
//
// Sebelumnya semua entri dihitung sama, sehingga hari libur digambar
// sebagai batang setinggi 1 — persis sama dengan hari kerja yang
// menyelesaikan satu task. Secara visual, libur terlihat seperti
// produktivitas. Sekarang keduanya masih tampil (supaya terlihat
// bahwa hari itu tercatat, bukan bolong), tapi warnanya beda dan
// tingginya menumpuk, bukan tercampur.
function renderDashDailyChart(items, range) {
  const kerja = {};
  const libur = {};
  items.forEach(it => {
    // Status kosong = entri hari libur. Pembeda yang sama dipakai di
    // computeExtraStats — sengaja konsisten supaya angka kartu dan
    // tinggi batang tidak pernah bercerita hal yang berbeda.
    const ember = it.status ? kerja : libur;
    ember[it.task_date] = (ember[it.task_date] || 0) + 1;
  });

  const labels = [];
  const dataKerja = [];
  const dataLibur = [];
  const cursor = new Date(range.start + 'T00:00:00');
  const end = new Date(range.end + 'T00:00:00');
  while (cursor <= end) {
    const iso = cursor.toLocaleDateString('en-CA');
    labels.push(String(cursor.getDate())); // cukup tanggalnya saja (1-31), bulan sudah di judul kartu
    dataKerja.push(kerja[iso] || 0);
    dataLibur.push(libur[iso] || 0);
    cursor.setDate(cursor.getDate() + 1);
  }

  if (dashCharts.daily) dashCharts.daily.destroy();
  if (typeof Chart === 'undefined') return;

  dashCharts.daily = new Chart($('dashDailyChart'), {
    type: 'bar',
    data: {
      labels,
      datasets: [
        { label: 'Work', data: dataKerja, backgroundColor: '#0B1B2E', borderRadius: 3 },
        { label: 'Off',  data: dataLibur, backgroundColor: '#C9A84C', borderRadius: 3 },
      ],
    },
    options: {
      responsive: true, maintainAspectRatio: false,
      // Legend DINYALAKAN di sini — begitu ada dua warna, tanpa
      // keterangan warnanya cuma jadi tebakan.
      plugins: { legend: { display: true, position: 'bottom', labels: { boxWidth: 12, font: { size: 11 } } } },
      scales: {
        y: { stacked: true, ticks: { precision: 0 } },
        x: { stacked: true, ticks: { maxRotation: 0, autoSkip: true, maxTicksLimit: 10 } },
      },
    },
  });
}

// v2.11 — chart baru: Jenis Pekerjaan. Memakai s.byWorkType yang
// SUDAH dihitung server sejak awal tapi belum pernah dipakai di UI
// mana pun sampai sekarang.
function renderDashWorkTypeChart(byWorkType) {
  const sorted = Object.entries(byWorkType || {}).sort((a, b) => b[1] - a[1]);
  const labels = sorted.map(e => e[0]);
  const data = sorted.map(e => e[1]);

  if (dashCharts.workType) dashCharts.workType.destroy();
  if (typeof Chart === 'undefined') return;

  dashCharts.workType = new Chart($('dashWorkTypeChart'), {
    type: 'bar',
    data: { labels, datasets: [{ data, backgroundColor: '#5B7A9D', borderRadius: 6 }] },
    options: {
      responsive: true, maintainAspectRatio: false, indexAxis: 'y',
      plugins: { legend: { display: false } },
      scales: { x: { ticks: { precision: 0 } } },
    },
  });
}

async function loadReport() {
  const range = currentReportRange();
  if (!range) { toast('Pick a date range first.', 'err'); return; }

  $('reportSummary').innerHTML = '<div class="riwayat-empty">Loading report…</div>';
  $('reportList').innerHTML = '';

  try {
    const r = await callApi({
      action: 'get-report', sessionToken: state.token,
      startDate: range.start, endDate: range.end,
    });

    if (!r.ok) {
      $('reportSummary').innerHTML = '<div class="riwayat-empty">' + (r.error || 'Failed to load report.') + '</div>';
      return;
    }

    reportCache = r;
    renderReportSummary(r.summary);
    // v2.19 — di mode ops, daftar mentah diganti rekap berkelompok.
    if (reportMode === 'ops') renderOpsRecap(range, r.items);
    else renderReportList(r.items);

  } catch (e) {
    $('reportSummary').innerHTML = '<div class="riwayat-empty">' + (e.message || 'Failed to load report.') + '</div>';
  }
}

function renderReportSummary(s) {
  const doneCount = s.byStatus['Done'] || 0;
  const criticalCount = s.byPriority['Critical'] || 0;

  // v2.17 — mengikuti perbaikan yang sama seperti di Dashboard.
  // Di sini tidak ada persentase, tapi "Total task" bersebelahan
  // dengan "Done" — pembaca otomatis membagi keduanya di kepala.
  // Kalau pembilangnya task dan pembaginya termasuk hari libur,
  // kesan yang terbentuk tetap salah meski tidak ada tanda persen.
  // Laporan inilah yang paling mungkin sampai ke manajemen.
  //
  // s.workTotal baru ada di Edge Function v1.16+. Kalau server masih
  // lama, label lama dipakai apa adanya — lebih baik menampilkan
  // istilah lama daripada memberi nama baru pada angka yang belum
  // berubah artinya.
  const punyaWorkTotal = typeof s.workTotal === 'number';
  const totalNum = punyaWorkTotal ? s.workTotal : s.total;
  const totalLabel = punyaWorkTotal ? 'Work tasks' : 'Total task';
  const donePct = totalNum > 0 ? Math.round((doneCount / totalNum) * 100) : 0;
  const doneLabel = punyaWorkTotal ? ('Done · ' + donePct + '%') : 'Done';
  const doneNum = punyaWorkTotal ? (doneCount + '/' + totalNum) : String(doneCount);

  let html = '<div class="summary-grid">'
    + '<div class="summary-card"><div class="summary-num">' + totalNum + '</div><div class="summary-label">' + totalLabel + '</div></div>'
    + '<div class="summary-card"><div class="summary-num">' + doneNum + '</div><div class="summary-label">' + doneLabel + '</div></div>'
    + '<div class="summary-card"><div class="summary-num">' + criticalCount + '</div><div class="summary-label">Critical</div></div>'
    + '<div class="summary-card"><div class="summary-num">' + (s.topTag ? s.topTag.count : 0) + '</div><div class="summary-label">' + (s.topTag ? s.topTag.tag : 'Top tag') + '</div></div>';

  // Pesan "kosong" tetap memakai s.total: kalau rentangnya hanya
  // berisi hari libur, laporannya memang TIDAK kosong — ada isinya,
  // hanya bukan task. Memakai workTotal di sini akan menyembunyikan
  // baris libur yang sebenarnya ada.
  if (s.total === 0) {
    html += '<div class="summary-card summary-full"><div class="summary-label">No activity in this range</div></div>';
  } else if (punyaWorkTotal && s.offDays > 0) {
    // v2.17 — hari libur disebut terpisah supaya selisih antara jumlah
    // baris di tabel dan angka "Work tasks" punya penjelasan yang
    // terlihat, bukan bikin pembaca curiga ada data hilang.
    html += '<div class="summary-card summary-full"><div class="summary-label">+ ' + s.offDays + ' off day' + (s.offDays !== 1 ? 's' : '') + ' in this range (not counted as tasks)</div></div>';
  }
  html += '</div>';
  $('reportSummary').innerHTML = html;
}

function renderReportList(items) {
  renderWorksheetTable($('reportList'), items, null);
}

// ── v2.14 — SALIN UNTUK GOOGLE SHEETS ───────────────────────
// Menyalin isi laporan sebagai TSV (dipisah TAB). Google Sheets dan
// Excel Online mengenali TAB sebagai pemisah kolom, jadi sekali
// tempel langsung terbagi rapi ke sel-selnya — tanpa dialog import,
// tanpa file perantara, tanpa kredensial.
//
// TSV dipilih, bukan CSV: isi task sering memuat koma, dan CSV harus
// dikutip/di-escape untuk itu. TAB nyaris tidak pernah muncul di teks
// yang diketik pengguna, jadi jauh lebih sedikit yang bisa salah.
function tsvCell(v) {
  // TAB dan baris baru diganti spasi karena keduanya adalah pemisah
  // dalam format ini — kalau lolos, satu sel bisa pecah jadi banyak.
  return String(v === null || v === undefined ? '' : v).replace(/[\t\r\n]+/g, ' ').trim();
}

async function copyReportForSheets() {
  if (!reportCache || !reportCache.items || reportCache.items.length === 0) {
    toast('Show the report first before copying.', 'err');
    return;
  }

  // Kolom dibuat SAMA dengan export Excel, ditambah field v1.6 supaya
  // hasil tempel dan hasil unduh tidak pernah berbeda isinya.
  const header = [
    'Task ID', 'Date', 'Activity Type', 'Work Type', 'Task', 'Tags',
    'Priority', 'Status', 'Remark', 'Asset', 'Vendor', 'Follow Up',
  ];

  const baris = reportCache.items.map(it => [
    it.task_id, it.task_date, it.activity_type, it.work_type,
    it.task, it.tags_raw, it.priority, it.status, it.remark || '',
    it.asset_code || '', it.vendor_name || '', it.vendor_followup_date || '',
  ].map(tsvCell).join(String.fromCharCode(9)));

  const tsv = [header.join(String.fromCharCode(9))].concat(baris).join(String.fromCharCode(10));

  // navigator.clipboard butuh HTTPS dan tidak ada di peramban lama.
  // Kalau tidak tersedia, jatuh ke cara lama (textarea + execCommand)
  // supaya fitur ini tidak mati total di perangkat tertentu.
  try {
    if (navigator.clipboard && navigator.clipboard.writeText) {
      await navigator.clipboard.writeText(tsv);
    } else {
      const ta = document.createElement('textarea');
      ta.value = tsv;
      ta.setAttribute('readonly', '');
      ta.style.position = 'fixed';
      ta.style.left = '-9999px';
      document.body.appendChild(ta);
      ta.select();
      const ok = document.execCommand('copy');
      document.body.removeChild(ta);
      if (!ok) throw new Error('Copy was blocked by the browser.');
    }
    toast(reportCache.items.length + ' rows copied — paste into Google Sheets', 'good');
  } catch (e) {
    toast(e.message || 'Could not copy. Use Download Excel instead.', 'err');
  }
}

function exportReportToExcel() {
  if (!reportCache || !reportCache.items || reportCache.items.length === 0) {
    toast('Show the report first before downloading.', 'err');
    return;
  }
  if (typeof XLSX === 'undefined') {
    toast('Excel module not loaded yet. Check your connection and try again.', 'err');
    return;
  }

  const rows = reportCache.items.map(it => ({
    'Task ID': it.task_id,
    'Date': it.task_date,
    'Activity Type': it.activity_type,
    'Work Type': it.work_type,
    'Task': it.task,
    'Tags': it.tags_raw,
    'Priority': it.priority,
    'Status': it.status,
    'Remark': it.remark || '',
    // v2.14 — 3 kolom baru dari MFB-IT_v1.6.sql. Sebelum SQL itu
    // dijalankan nilainya undefined, dan kolomnya jadi kosong —
    // bukan error, jadi export tetap aman dipakai.
    'Asset': it.asset_code || '',
    'Vendor': it.vendor_name || '',
    'Follow Up': it.vendor_followup_date || '',
  }));

  const ws = XLSX.utils.json_to_sheet(rows);
  ws['!cols'] = [
    { wch: 12 }, { wch: 12 }, { wch: 14 }, { wch: 16 },
    { wch: 40 }, { wch: 24 }, { wch: 10 }, { wch: 14 }, { wch: 30 },
    { wch: 14 }, { wch: 20 }, { wch: 12 },
  ];
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, 'MFB-IT Report');

  const range = currentReportRange();
  const filename = 'MFB-IT_Report_' + (range ? range.start + '_to_' + range.end : todayISO()) + '.xlsx';
  XLSX.writeFile(wb, filename);
  toast('Excel downloaded', 'good');
}

// ── EXPORT LAPORAN — FORMAT RESMI (grouping per tanggal) ──────
// Berbeda dari exportReportToExcel di atas (yang detail, 9 kolom,
// 1 baris = 1 task): export ini meniru format laporan bulanan lama
// (Day / Date / Task / Remark) — SATU tanggal bisa mencakup BEBERAPA
// baris task, dan kolom Day+Date HANYA diisi di baris PERTAMA dari
// tanggal itu; baris-baris task berikutnya untuk tanggal yang sama
// dikosongkan di kolom Day & Date (persis contoh referensi).
//
// TIDAK ADA border/warna sel — library Excel yang dipakai (versi
// gratis) tidak mendukung itu. Logo & garis kotak sengaja dilewati
// sesuai keputusan: user akan menambahkannya sendiri secara manual
// di Excel/Sheets setelah file diunduh.
function exportReportOfficial() {
  if (!reportCache || !reportCache.items || reportCache.items.length === 0) {
    toast('Show the report first before downloading.', 'err');
    return;
  }
  if (typeof XLSX === 'undefined') {
    toast('Excel module not loaded yet. Check your connection and try again.', 'err');
    return;
  }

  // Urutkan berdasarkan tanggal ASC dulu — data dari server tidak
  // dijamin sudah terurut, dan grouping ini WAJIB berbasis tanggal
  // berurutan supaya baris kosong benar-benar mengelompok, bukan
  // tersebar (kalau tidak diurutkan, tanggal yang sama tapi terpisah
  // baris lain akan dianggap grup terpisah, sehingga Day/Date
  // muncul berulang untuk tanggal yang sama — salah).
  const items = [...reportCache.items].sort((a, b) => a.task_date.localeCompare(b.task_date));

  const rows = [];
  let lastDate = null;
  for (const it of items) {
    const isNewDate = it.task_date !== lastDate;
    rows.push({
      'Day':    isNewDate ? dayNameEN(it.task_date)  : '',
      'Date':   isNewDate ? dateLongEN(it.task_date) : '',
      'Task':   it.task || '',
      'Remark': it.remark || '',
    });
    lastDate = it.task_date;
  }

  const ws = XLSX.utils.json_to_sheet(rows);
  ws['!cols'] = [
    { wch: 12 }, { wch: 20 }, { wch: 55 }, { wch: 30 },
  ];
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, 'IT Monthly Report');

  const range = currentReportRange();
  const filename = 'MFB-IT_MonthlyReport_' + (range ? range.start + '_to_' + range.end : todayISO()) + '.xlsx';
  XLSX.writeFile(wb, filename);
  toast('Official report downloaded — add logo & border manually in Excel', 'good');
}

// ── BACKUP SEMUA DATA (Phase 2A) ──────────────────────────────
// Mengunduh JSON (untuk restore/arsip mesin) + Excel (untuk dibaca
// manusia), sekaligus, dari SATU panggilan ke action "export-all".
// Berbeda dari exportReportToExcel: ini mengambil SEMUA baris di
// 4 tabel, termasuk yang sudah soft-delete, tanpa filter tanggal.
function downloadBlob(content, mime, filename) {
  const blob = new Blob([content], { type: mime });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url; a.download = filename;
  document.body.appendChild(a); a.click(); document.body.removeChild(a);
  setTimeout(() => URL.revokeObjectURL(url), 1000);
}

async function exportAllData() {
  const btn = $('backupBtn');
  const labelAsal = btn.textContent;
  btn.classList.add('busy');
  btn.textContent = 'Preparing…';

  try {
    const r = await callApi({ action: 'export-all', sessionToken: state.token });
    if (!r.ok) {
      toast(r.error || 'Failed to fetch backup data.', 'err');
      return;
    }

    const stamp = todayISO();
    const meta = r.meta;
    const tables = r.tables;

    // 1) JSON — utuh, untuk restore/arsip
    const jsonContent = JSON.stringify({ meta, tables }, null, 2);
    downloadBlob(jsonContent, 'application/json', 'MFB-IT_backup_' + stamp + '.json');

    // 2) Excel — 4 sheet terpisah, untuk dibaca manusia
    if (typeof XLSX === 'undefined') {
      toast('JSON downloaded successfully. Excel module not loaded yet, try again for the Excel file.', 'err');
      return;
    }

    const wb = XLSX.utils.book_new();
    const sheetOrder = [
      ['daily_activity', 'Daily Activity'],
      ['activity_log',   'Activity Log'],
      ['master_tag',     'Master Tag'],
      ['app_config',     'App Config'],
    ];
    for (const [key, sheetName] of sheetOrder) {
      const rows = tables[key] || [];
      const ws = rows.length
        ? XLSX.utils.json_to_sheet(rows)
        : XLSX.utils.aoa_to_sheet([['(no data)']]);
      XLSX.utils.book_append_sheet(wb, ws, sheetName);
    }
    XLSX.writeFile(wb, 'MFB-IT_backup_' + stamp + '.xlsx');

    toast('Backup downloaded: JSON + Excel (' + meta.rowCounts.daily_activity + ' tasks)', 'good');
  } catch (e) {
    toast(e.message || 'Failed to download backup.', 'err');
  } finally {
    btn.classList.remove('busy');
    btn.textContent = labelAsal;
  }
}

/* ══════════════════════════════════════════════
   v2.14 — ASET, VENDOR, FOTO BUKTI
   Semua butuh MFB-IT_v1.6.sql + Edge Function v1.14.
   Kalau salah satu belum ada, fiturnya DISEMBUNYIKAN — bukan
   error (SOP 8.8).
   ══════════════════════════════════════════════ */

// ── REGISTRY ASET ───────────────────────────────────────────
async function loadAssets() {
  // Server lama tidak punya action ini: lewati diam-diam, picker tetap
  // tersembunyi. Tidak perlu memberi tahu pengguna soal versi server.
  if (!serverAtLeast(1, 14)) return;

  const r = await callApi({ action: 'get-assets', sessionToken: state.token }).catch(() => null);
  if (!r || !r.ok) {
    // Kemungkinan terbesar: MFB-IT_v1.6.sql belum dijalankan sehingga
    // tabel asset belum ada. Dicatat di console saja — pengguna tidak
    // bisa berbuat apa-apa soal itu dari HP.
    console.warn('[MFB-IT] daftar aset tidak tersedia:', r && r.error);
    return;
  }

  state.assets = Array.isArray(r.items) ? r.items : [];
  // Tabel aset kosong = belum diisi inventaris. Picker tetap
  // disembunyikan, karena membuka picker kosong lebih membingungkan
  // daripada tidak ada picker sama sekali.
  $('assetBox').classList.toggle('hidden', state.assets.length === 0);
  renderAssetValue();
}

// Label yang ditampilkan di picker: kode + nama, karena kode saja
// ("PRN-FO-01") belum tentu langsung dikenali.
function assetLabel(a) {
  if (!a) return '— none —';
  const lokasi = a.location ? ' · ' + a.location : '';
  return a.code + ' — ' + a.name + lokasi;
}

function renderAssetValue() {
  const el = $('valAsset');
  if (!el) return;
  const a = state.assets.find(x => x.id === state.assetId);
  el.textContent = assetLabel(a);
}

function setupAssetPicker() {
  $('rowAsset').addEventListener('click', () => {
    // Opsi "none" selalu ada di paling atas supaya tautan aset bisa
    // dilepas kembali, bukan hanya diganti.
    const opsi = [{ db: '', id: '— none —' }].concat(
      state.assets.map(a => ({ db: String(a.id), id: assetLabel(a) }))
    );
    const sekarang = state.assetId === null ? '' : String(state.assetId);
    openOptionSheet('Device / asset', opsi, sekarang, (db) => {
      state.assetId = db ? Number(db) : null;
      renderAssetValue();
      trackEdit();
    });
  });
}

// ── FOLLOW-UP VENDOR ────────────────────────────────────────
// Kotak vendor mengikuti status. Dipanggil dari setupStatusPicker dan
// dari applyParseResult/applyTemplate, supaya status yang di-set AI
// atau template juga langsung memunculkan kotaknya.
function applyVendorBox() {
  const box = $('vendorBox');
  if (!box) return;
  const perlu = state.status === 'Waiting Vendor';
  box.classList.toggle('hidden', !perlu);
  // Saat status berpindah menjauh dari Waiting Vendor, isian vendor
  // DIKOSONGKAN. Kalau dibiarkan, nilainya tetap terkirim ke server
  // padahal kotaknya sudah tidak terlihat — pengguna tidak akan tahu
  // data itu masih ikut tersimpan.
  if (!perlu) {
    $('vendorName').value = '';
    $('vendorFollowup').value = '';
    $('vendorFollowupText').textContent = '—';
  }
}

// ── FOTO BUKTI ──────────────────────────────────────────────
// Foto dikompres di HP SEBELUM dikirim. Tanpa ini, foto kamera 12 MP
// (3-5 MB) dikirim sebagai base64 yang membengkak ~33% lagi — di
// sinyal lemah itu praktis tidak akan pernah selesai.
const PHOTO_MAX_SIDE = 1600;
const PHOTO_QUALITY = 0.72;
const PHOTO_WARN_BYTES = 1800000; // ~1,8 MB base64: masih terkirim, tapi lambat

function bacaFileSebagaiDataUrl(file) {
  return new Promise((resolve, reject) => {
    const fr = new FileReader();
    fr.onload = () => resolve(fr.result);
    fr.onerror = () => reject(new Error('Could not read the file.'));
    fr.readAsDataURL(file);
  });
}

function muatGambar(dataUrl) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = () => reject(new Error('Could not read the image.'));
    img.src = dataUrl;
  });
}

// Selalu menghasilkan JPEG, termasuk untuk PNG masukan: screenshot PNG
// dari HP bisa jauh lebih besar daripada JPEG dengan mutu setara.
async function kompresFoto(file) {
  const asli = await bacaFileSebagaiDataUrl(file);
  const img = await muatGambar(asli);

  let w = img.naturalWidth || img.width;
  let h = img.naturalHeight || img.height;
  if (!w || !h) throw new Error('Image size could not be read.');

  const sisiTerpanjang = Math.max(w, h);
  if (sisiTerpanjang > PHOTO_MAX_SIDE) {
    const skala = PHOTO_MAX_SIDE / sisiTerpanjang;
    w = Math.round(w * skala);
    h = Math.round(h * skala);
  }

  const cv = document.createElement('canvas');
  cv.width = w; cv.height = h;
  const ctx = cv.getContext('2d');
  if (!ctx) throw new Error('Canvas is not available.');
  ctx.drawImage(img, 0, 0, w, h);
  return cv.toDataURL('image/jpeg', PHOTO_QUALITY);
}

function renderPhotoState() {
  const ada = !!state.photoDataUrl;
  $('photoThumb').classList.toggle('hidden', !ada);
  $('photoClear').classList.toggle('hidden', !ada);
  $('photoBtnLabel').textContent = ada ? 'Change photo' : 'Add photo';
  if (ada) {
    $('photoThumb').src = state.photoDataUrl;
    // Ukuran kiriman diperkirakan dari panjang base64 (4 karakter = 3 byte).
    const kb = Math.round(state.photoDataUrl.length * 0.75 / 1024);
    $('photoInfo').textContent = '~' + kb + ' KB';
  } else {
    $('photoThumb').removeAttribute('src');
    $('photoInfo').textContent = '';
  }
}

function clearPhoto() {
  state.photoDataUrl = '';
  $('photoInput').value = '';
  renderPhotoState();
}

function setupPhoto() {
  const box = $('photoBox');
  if (!box) return;

  // Foto disimpan di Supabase Storage lewat Edge Function v1.14.
  // Kalau server masih lama, tombolnya tidak ditampilkan sama sekali.
  if (!serverAtLeast(1, 14)) return;
  box.classList.remove('hidden');

  $('photoBtn').addEventListener('click', () => $('photoInput').click());
  $('photoClear').addEventListener('click', clearPhoto);

  $('photoInput').addEventListener('change', async (e) => {
    const file = e.target.files && e.target.files[0];
    if (!file) return;
    try {
      state.photoDataUrl = await kompresFoto(file);
      if (state.photoDataUrl.length > PHOTO_WARN_BYTES) {
        toast('Photo is still large — saving may take a while on weak signal.', '');
      }
      renderPhotoState();
      trackEdit();
    } catch (err) {
      toast(err.message || 'Photo could not be processed.', 'err');
      clearPhoto();
    }
  });
}

// Membuka foto tersimpan. Bucket-nya privat, jadi path harus ditukar
// dulu menjadi signed URL berjangka pendek di server.
async function bukaFotoTersimpan(path, imgEl, statusEl) {
  try {
    const r = await callApi({ action: 'get-photo-url', sessionToken: state.token, path: path });
    if (!r.ok || !r.url) {
      if (statusEl) statusEl.textContent = r.error || 'Photo could not be opened.';
      return;
    }
    imgEl.src = r.url;
    imgEl.classList.remove('hidden');
    if (statusEl) statusEl.textContent = '';
  } catch (e) {
    if (statusEl) statusEl.textContent = e.message || 'Photo could not be opened.';
  }
}

/* ══════════════════════════════════════════════
   v2.14 — TAB LOG
   ══════════════════════════════════════════════ */

// Label yang dibaca manusia untuk tiap event_type yang ditulis server.
// Kalau suatu saat server menulis jenis baru yang belum ada di sini,
// nama mentahnya yang dipakai — bukan kosong.
const LOG_EVENT_LABEL = {
  LOGIN_SUCCESS: 'Login',
  LOGIN_FAILED:  'Login failed',
  AI_PARSE:      'AI parse',
  SUBMIT_TASK:   'Saved',
  UPDATE_TASK:   'Edited',
  DELETE_TASK:   'Deleted',
  EXPORT_ALL:    'Backup',
};

// Kelas warna badge. Hanya 3 kelompok — bukan satu warna per event —
// supaya deretan log tidak jadi pelangi yang malah sulit dibaca.
function logBadgeClass(ev) {
  if (ev === 'SUBMIT_TASK') return 'log-badge submit';
  if (ev === 'DELETE_TASK' || ev === 'LOGIN_FAILED') return 'log-badge danger';
  if (ev === 'UPDATE_TASK' || ev === 'AI_PARSE') return 'log-badge edit';
  return 'log-badge';
}

let logFilterAktif = ''; // '' = semua jenis event

function renderLogFilter(jenisTersedia) {
  const box = $('logFilter');
  if (!box) return;
  box.innerHTML = '';

  const daftar = [{ id: '', label: 'All' }].concat(
    (jenisTersedia || []).map(ev => ({ id: ev, label: LOG_EVENT_LABEL[ev] || ev }))
  );

  daftar.forEach(item => {
    const chip = document.createElement('div');
    chip.className = 'log-chip' + (logFilterAktif === item.id ? ' on' : '');
    chip.textContent = item.label;
    chip.setAttribute('role', 'button');
    chip.setAttribute('tabindex', '0');
    chip.setAttribute('aria-pressed', logFilterAktif === item.id ? 'true' : 'false');
    const pilih = () => {
      if (logFilterAktif === item.id) return;
      logFilterAktif = item.id;
      loadActivityLog();
    };
    chip.onclick = pilih;
    chip.onkeydown = (e) => {
      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); pilih(); }
    };
    box.appendChild(chip);
  });
}

function renderActivityLog(items) {
  const box = $('logList');
  if (!items || items.length === 0) {
    box.innerHTML = '<div class="log-empty">No log entries yet.</div>';
    return;
  }

  box.innerHTML = items.map(it => {
    const ev = it.event_type || '';
    const label = LOG_EVENT_LABEL[ev] || ev;

    // Kalimat utama: pakai event_description dari server bila ada,
    // kalau tidak jatuh ke teks task, kalau tidak juga baru pakai
    // label event. Jadi baris log tidak pernah kosong.
    const utama = it.event_description || it.task || label;

    // Baris meta hanya menampilkan yang benar-benar terisi — deretan
    // label kosong lebih mengganggu daripada informasi yang hilang.
    const meta = [];
    if (it.task_id)  meta.push(escapeHtml(it.task_id));
    if (it.priority) meta.push(escapeHtml(it.priority));
    if (it.status)   meta.push(escapeHtml(it.status));
    if (it.tags_raw) meta.push(escapeHtml(it.tags_raw));
    const perangkat = [it.browser, it.os, it.device_type].filter(Boolean).join(" · ");
    if (perangkat) meta.push(escapeHtml(perangkat));
    if (it.app_version) meta.push(escapeHtml("v" + it.app_version));

    return '<div class="log-row">'
      + '<div class="log-row-top">'
      +   '<span class="' + logBadgeClass(ev) + '">' + escapeHtml(label) + '</span>'
      +   '<span class="log-time">' + escapeHtml(it.timestamp_wita || '') + '</span>'
      + '</div>'
      + '<div class="log-desc">' + escapeHtml(utama) + '</div>'
      + (meta.length ? '<div class="log-meta">' + meta.map(m => '<span>' + m + '</span>').join('') + '</div>' : '')
      + '</div>';
  }).join('');
}

async function loadActivityLog() {
  const box = $('logList');

  // Server lama tidak punya action ini. Daripada memunculkan error yang
  // membingungkan, jelaskan apa yang perlu dilakukan (SOP 8.8).
  if (!serverAtLeast(1, 14)) {
    box.innerHTML = '<div class="log-empty">Activity log needs Edge Function v1.14 or newer.<br>Deploy it, then reopen this tab.</div>';
    $('logFilter').innerHTML = '';
    return;
  }

  box.innerHTML = '<div class="log-empty">Loading activity log…</div>';
  try {
    const r = await callApi({
      action: 'get-activity-log',
      sessionToken: state.token,
      eventType: logFilterAktif || undefined,
    });
    if (!r.ok) {
      box.innerHTML = '<div class="log-empty">' + (r.error || 'Failed to load activity log.') + '</div>';
      return;
    }
    renderLogFilter(r.eventTypes);
    renderActivityLog(r.items || []);
  } catch (e) {
    box.innerHTML = '<div class="log-empty">' + (e.message || 'Failed to load activity log.') + '</div>';
  }
}

/* ══════════════════════════════════════════════
   v2.12 — FITUR BARU
   Semua fungsi di bawah ini penambahan; tidak ada fungsi lama
   yang diubah namanya atau dihapus (SOP 8.7).
   ══════════════════════════════════════════════ */

// ── Kemampuan server ────────────────────────────────────────
// Diisi dari respons login / get-tags (Edge Function v1.13+).
// Kalau server masih versi lama, nilainya tetap kosong dan fitur
// yang bergantung padanya cukup DISEMBUNYIKAN — tidak error.
let serverVersion = '';

// Membandingkan versi bergaya "MAYOR.MINOR" dengan MINOR sebagai
// BILANGAN BULAT (jadi 1.13 lebih baru dari 1.9 — bukan dibaca
// sebagai desimal). Ini mengikuti Standar Coding bagian 5.
function serverAtLeast(major, minor) {
  const m = String(serverVersion || '').match(/^(\d+)\.(\d+)$/);
  if (!m) return false; // format tak dikenali -> anggap belum didukung
  const vMajor = Number(m[1]), vMinor = Number(m[2]);
  if (vMajor !== major) return vMajor > major;
  return vMinor >= minor;
}

function applyServerCapabilities(version) {
  serverVersion = version || '';
  // Pencarian seluruh riwayat butuh action "search-tasks" (v1.13).
  const canSearch = serverAtLeast(1, 13);
  const box = $('riwayatSearchBox');
  if (box) box.classList.toggle('hidden', !canSearch);

  // v2.23 — AI Report butuh action "ai-report" & "get-ai-reports" (v1.17).
  // Kalau HTML sudah di-upload tapi Edge Function masih versi lama,
  // tabnya DISEMBUNYIKAN — bukan menampilkan tombol yang pasti error.
  // Pola degradasi yang sama dipakai pencarian riwayat di atas.
  const canAi = serverAtLeast(1, 17);
  const tabAi = $('modeAi');
  if (tabAi) tabAi.classList.toggle('hidden', !canAi);
  // Kalau mode AI sedang aktif lalu server ternyata belum mendukung,
  // pengguna dikembalikan ke mode bulan supaya tidak terjebak di
  // panel yang tabnya sudah hilang.
  if (!canAi && reportMode === 'ai') setReportMode('month');
}

// ── FITUR: ANTREAN OFFLINE ──────────────────────────────────
// Server room, area belakang, dan basement sinyalnya lemah. Sebelum
// ini, submit yang gagal karena jaringan hanya memunculkan toast dan
// isian tetap di form — kalau app tertutup, catatan itu hilang.
let queueBusy = false; // cegah dua proses pengiriman berjalan bersamaan

function readQueue() {
  try {
    const raw = Store.get(KEY_QUEUE);
    const arr = raw ? JSON.parse(raw) : [];
    return Array.isArray(arr) ? arr : [];
  } catch (e) { return []; }
}

function writeQueue(list) {
  // Dibatasi 50 entri: jauh di atas pemakaian normal, tapi mencegah
  // localStorage membengkak kalau ada masalah jaringan panjang.
  try { Store.set(KEY_QUEUE, JSON.stringify(list.slice(0, 50))); } catch (e) {}
}

function enqueueSubmit(payload) {
  const list = readQueue();
  // sessionToken TIDAK disimpan — token bisa kedaluwarsa sebelum
  // antrean terkirim, jadi diisi ulang dengan token yang berlaku
  // saat pengiriman. Menyimpannya juga berarti menyimpan kredensial
  // di localStorage lebih lama dari yang perlu.
  const clean = Object.assign({}, payload);
  delete clean.sessionToken;
  list.push({ payload: clean, savedAt: Date.now() });
  writeQueue(list);
  renderQueueBar();
}

function renderQueueBar() {
  const bar = $('queueBar');
  const n = readQueue().length;
  if (bar) {
    bar.classList.toggle('hidden', n === 0);
    if (n > 0) {
      $('queueBarText').textContent = n === 1
        ? '1 entry waiting to be sent'
        : n + ' entries waiting to be sent';
    }
  }
  const badge = $('netBadge');
  if (badge) {
    if (!navigator.onLine) {
      badge.className = 'net-badge offline';
      badge.textContent = n > 0 ? ('Offline (' + n + ')') : 'Offline';
      badge.classList.remove('hidden');
    } else if (n > 0) {
      badge.className = 'net-badge';
      badge.textContent = n + ' queued';
      badge.classList.remove('hidden');
    } else {
      badge.classList.add('hidden');
    }
  }
}

// manual = true bila dipicu tombol "Send now"; hanya mempengaruhi
// apakah hasilnya diberitahukan lewat toast atau diam-diam saja.
async function flushQueue(manual) {
  if (queueBusy) return;
  let list = readQueue();
  if (list.length === 0) { renderQueueBar(); return; }
  if (!state.token) return; // belum login — coba lagi nanti

  queueBusy = true;
  const btn = $('queueBarBtn');
  if (btn) { btn.disabled = true; btn.textContent = 'Sending…'; }

  let sent = 0, dropped = 0;
  try {
    while (list.length > 0) {
      const first = list[0];
      const payload = Object.assign({}, first.payload, { sessionToken: state.token });
      let r;
      try {
        r = await callApi(payload);
      } catch (e) {
        // Masih tidak ada jaringan (atau sesi habis). Berhenti dan
        // simpan sisanya apa adanya — jangan buang data pengguna.
        break;
      }
      if (r && r.ok) {
        sent++;
        if (typeof r.taskToday === 'number') state.taskToday = r.taskToday;
      } else {
        // Server menjawab tapi menolak entri ini (mis. data tidak
        // valid). Mengirim ulang isi yang sama pasti ditolak lagi,
        // jadi entri dibuang supaya antrean tidak macet selamanya.
        dropped++;
      }
      list.shift();
      writeQueue(list);
    }
  } finally {
    queueBusy = false;
    if (btn) { btn.disabled = false; btn.textContent = 'Send now'; }
    renderQueueBar();
    renderTodayStrip();
  }

  if (sent > 0) toast(sent + (sent === 1 ? ' queued entry sent' : ' queued entries sent'), 'good');
  if (dropped > 0) toast(dropped + ' queued entry could not be sent and was discarded.', 'err');
  if (manual && sent === 0 && dropped === 0) toast('Still no connection. Will keep trying.', 'err');
}

// ── FITUR: DETEKSI DUPLIKAT ─────────────────────────────────
// Membandingkan teks yang sudah dinormalkan (huruf kecil, tanda baca
// dibuang) pada TANGGAL YANG SAMA. Sengaja tidak memakai kemiripan
// sebagian: ambang seperti itu gampang salah tuduh untuk task pendek
// seperti "cek CCTV".
function normalizeTaskText(s) {
  return String(s || '').toLowerCase().replace(/[^a-z0-9]+/g, ' ').trim();
}

function readRecent() {
  try {
    const raw = Store.get(KEY_RECENT);
    const arr = raw ? JSON.parse(raw) : [];
    return Array.isArray(arr) ? arr : [];
  } catch (e) { return []; }
}

function rememberSubmitted(date, task) {
  const norm = normalizeTaskText(task);
  if (!norm) return;
  const list = readRecent();
  list.unshift({ d: date, t: norm });
  try { Store.set(KEY_RECENT, JSON.stringify(list.slice(0, 60))); } catch (e) {}
}

// v2.13 — DETEKSI DUPLIKAT UNTUK HARI LIBUR.
// isProbableDuplicate() membandingkan teks pekerjaan, jadi entri libur
// tanpa teks (Day Off / Public Holiday / Annual Leave / Sick Leave /
// Extra Off / PDO) sama sekali tidak terjaring. Padahal justru di situ
// duplikat paling mudah terjadi: libur dicatat dua kali karena tidak
// kelihatan sudah pernah dicatat.
//
// Yang diperiksa: apakah tanggal ini SUDAH punya entri jenis-hari apa pun
// selain Working Day — bukan hanya jenis yang sama. Mencatat 'Day Off'
// lalu 'Public Holiday' di tanggal yang sama juga hampir pasti keliru,
// dan pesannya menyebutkan jenis apa yang sudah ada.
function isNonWorkingType(t) {
  return !!t && t !== 'Working Day';
}

function rememberDayEntry(date, activityType) {
  if (!isNonWorkingType(activityType)) return;
  const list = readRecent();
  // Disimpan dengan field 'a' (bukan 't') supaya tidak pernah tertukar
  // dengan jejak pekerjaan biasa. Entri lama yang hanya punya 't' tetap
  // terbaca benar oleh isProbableDuplicate.
  list.unshift({ d: date, a: activityType });
  try { Store.set(KEY_RECENT, JSON.stringify(list.slice(0, 60))); } catch (e) {}
}

// Mengembalikan nama jenis hari yang sudah tercatat di tanggal itu,
// atau string kosong kalau belum ada.
function findDayEntryOnDate(date) {
  const hit = readRecent().find(r => r && r.d === date && isNonWorkingType(r.a));
  if (hit) return hit.a;

  // Sumber kedua: riwayat yang sudah dimuat di tab History pada sesi ini.
  try {
    const row = riwayatCache.find(it =>
      it && it.task_date === date && isNonWorkingType(it.activity_type));
    if (row) return row.activity_type;
  } catch (e) { /* riwayatCache belum terisi — abaikan */ }

  return '';
}

function isProbableDuplicate(date, task) {
  const norm = normalizeTaskText(task);
  if (!norm) return false;

  // Sumber 1 — jejak submit dari HP ini sendiri (termasuk yang masih
  // dalam antrean offline, karena rememberSubmitted juga dipanggil di
  // jalur antrean).
  if (readRecent().some(r => r.d === date && r.t === norm)) return true;

  // Sumber 2 — riwayat yang sudah pernah dimuat di tab History pada
  // sesi ini. Kalau belum pernah dibuka, riwayatCache kosong dan
  // pemeriksaan ini dilewati begitu saja.
  try {
    if (Array.isArray(riwayatCache) && riwayatCache.some(it =>
        it && it.task_date === date && normalizeTaskText(it.task) === norm)) return true;
  } catch (e) { /* riwayatCache belum terisi — abaikan */ }

  return false;
}

// ── FITUR: TEMPLATE TASK BERULANG ───────────────────────────
// Pekerjaan rutin ("cek backup harian", "cek CCTV") sebelumnya harus
// diketik ulang setiap hari. Template disimpan LOKAL saja.
const TPL_MAX = 8;

function readTemplates() {
  try {
    const raw = Store.get(KEY_TPL);
    const arr = raw ? JSON.parse(raw) : [];
    return Array.isArray(arr) ? arr : [];
  } catch (e) { return []; }
}

function writeTemplates(list) {
  try { Store.set(KEY_TPL, JSON.stringify(list.slice(0, TPL_MAX))); } catch (e) {}
}

function saveCurrentAsTemplate() {
  const task = $('taskDesc').value.trim();
  if (!task) {
    toast('Fill in the work first, then save it as a template.', 'err');
    $('taskDesc').focus();
    return;
  }
  const list = readTemplates();
  if (list.length >= TPL_MAX) {
    toast('Template limit reached (' + TPL_MAX + '). Delete one first.', 'err');
    return;
  }
  // Nama default diambil dari awal teks pekerjaan supaya pengguna
  // cukup menekan OK tanpa mengarang nama baru.
  const suggested = task.length > 28 ? task.slice(0, 28) : task;
  const name = prompt('Template name:', suggested);
  if (name === null) return;
  const clean = name.trim();
  if (!clean) return;

  list.push({
    name: clean,
    activityType: state.activityType,
    offWorking: state.offWorking,
    workType: state.workType,
    task: task,
    tags: Array.from(state.selected),
    priority: state.priority,
    status: state.status,
    remark: $('remarkInput').value.trim(),
  });
  writeTemplates(list);
  renderTemplates();
  toast('Template saved', 'good');
}

function applyTemplate(i) {
  const t = readTemplates()[i];
  if (!t) return;

  // Urutan sama seperti applyParseResult: jenis hari & toggle libur
  // ditetapkan LEBIH DULU, lalu applyActivityMode() dipanggil sekali,
  // supaya tidak ada render perantara dengan tampilan yang salah.
  if (t.activityType) state.activityType = t.activityType;
  const found = ACTIVITY_TYPES.find(a => a.db === state.activityType);
  if (found) $('valActivity').textContent = found.id;
  if (typeof t.offWorking === 'boolean') {
    state.offWorking = t.offWorking;
    $('offSwitch').classList.toggle('on', state.offWorking);
  }
  applyActivityMode();

  if (t.workType && WORK_TYPES.includes(t.workType)) {
    state.workType = t.workType;
    $('valWorkType').textContent = t.workType;
  }
  $('taskDesc').value = t.task || '';
  $('remarkInput').value = t.remark || '';

  if (Array.isArray(t.tags)) {
    state.selected.clear();
    t.tags.forEach(tag => {
      const c = String(tag).trim();
      if (!c) return;
      if (!state.tags.some(x => x.toLowerCase() === c.toLowerCase())) state.tags.push(c);
      state.selected.add(c);
    });
    buildTags();
  }

  if (t.priority && ['Low','Medium','High','Critical'].includes(t.priority)) {
    state.priority = t.priority; buildPriority();
  }
  const st = STATUS_TYPES.find(s => s.db === t.status);
  if (st) { state.status = st.db; $('valStatus').textContent = st.id; }
  applyVendorBox(); // v2.14

  trackEdit();
  toast('Template applied · ' + t.name, 'good');
}

function deleteTemplate(i) {
  const list = readTemplates();
  const t = list[i];
  if (!t) return;
  if (!confirm('Delete template "' + t.name + '"?')) return;
  list.splice(i, 1);
  writeTemplates(list);
  renderTemplates();
}

function renderTemplates() {
  const box = $('tplGrid');
  const wrap = $('tplBox');
  if (!box || !wrap) return;
  const list = readTemplates();
  wrap.classList.toggle('hidden', list.length === 0);
  box.innerHTML = '';

  list.forEach((t, i) => {
    const chip = document.createElement('div');
    chip.className = 'tpl-chip';
    chip.setAttribute('role', 'button');
    chip.setAttribute('tabindex', '0');

    const label = document.createElement('span');
    label.className = 'tpl-chip-name';
    label.textContent = t.name;
    chip.appendChild(label);

    const del = document.createElement('span');
    del.className = 'tpl-chip-del';
    del.textContent = '\u00D7';
    del.setAttribute('role', 'button');
    del.setAttribute('tabindex', '0');
    del.setAttribute('aria-label', 'Delete template ' + t.name);
    // stopPropagation supaya menekan tanda silang tidak sekaligus
    // menerapkan template-nya.
    del.onclick = (e) => { e.stopPropagation(); deleteTemplate(i); };
    del.onkeydown = (e) => {
      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); deleteTemplate(i); }
    };
    chip.appendChild(del);

    chip.onclick = () => applyTemplate(i);
    chip.onkeydown = (e) => {
      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); applyTemplate(i); }
    };
    box.appendChild(chip);
  });
}

// ── FITUR: INPUT SUARA — DIHAPUS di v2.23 ───────────────────
//
// Keputusan user 2 Sep 2026 setelah tiga versi mencoba memperbaikinya.
//
// Yang dihapus: `recog`/`recogOn`, ensureMicPermission(),
// bukaPanduanMikrofon(), setupVoiceInput(), pemanggilannya di init,
// tombol #micBtn di markup, dan 5 aturan CSS .mic-btn + @keyframes
// micPulse. Diverifikasi nol rujukan tersisa sebelum dihapus (SOP 8.7).
//
// KENAPA DIHAPUS, bukan diperbaiki lagi:
//
//   Perbaikan dari sisi kode sudah habis. v2.13 menambahkan permintaan
//   izin eksplisit. v2.15 menemukan akar masalah yang sebenarnya —
//   `await navigator.permissions.query()` dipanggil SEBELUM
//   getUserMedia, dan await itu menghabiskan "transient user
//   activation" dari ketukan tombol, sehingga Chrome Android menolak
//   dengan NotAllowedError TANPA PERNAH memunculkan dialog izin.
//   Itu diperbaiki: getUserMedia dipindah ke paling depan tanpa satu
//   pun await di depannya. v2.15 juga membedakan pesan error per sebab
//   (nomic / busy / denied / unsupported).
//
//   Dua screenshot Chrome Android dari user membuktikan situsnya
//   BUKAN diblokir — ia belum pernah DITANYA: halaman Permissions
//   anabhidev.com hanya memuat Notifications & Local network (tidak
//   ada baris Microphone), dan Settings > Site settings > Microphone
//   tidak punya daftar per-situs sama sekali.
//
//   Sisanya di luar kendali kode ini: Web Speech API di Chrome Android
//   bergantung pada layanan Google dan izin di tingkat OS. Tidak ada
//   tweak yang bisa MENJAMIN fiturnya jalan — dan itu sudah disampaikan
//   apa adanya ke user, bukan dijanjikan bisa.
//
//   Tombol yang ditekan lalu gagal terasa seperti app-nya rusak. Untuk
//   app yang dipakai setiap hari, itu lebih merugikan daripada tidak
//   ada tombol sama sekali.
//
// YANG TIDAK BERUBAH: kotak Free write dan "Parse with AI" utuh.
// Itu jalur utamanya sejak awal; mikrofon hanya salah satu cara
// mengisi kotak yang sama. Nol fitur lain terpengaruh, nol perubahan
// server (Web Speech berjalan di peramban, tidak pernah menyentuh
// Edge Function).
//
// KALAU SUATU SAAT MAU DIHIDUPKAN LAGI: kodenya utuh di
// arsip/MFB-IT_v2.22.html — cari "FITUR: INPUT SUARA".


// ── FITUR: CARI DI SELURUH RIWAYAT ──────────────────────────
// get-history hanya 7 hari. Pencarian ini menembus seluruh data lewat
// action "search-tasks" (Edge Function v1.13+).
let riwayatSearchTimer = null;

async function runRiwayatSearch(q) {
  const box = $('riwayatList');
  const title = $('riwayatTitle');

  // v2.17 — mengetik di kotak cari berarti pengguna sudah beralih dari
  // daftar "open tasks". Modenya dimatikan supaya penanda kuning tidak
  // tertinggal di atas hasil pencarian yang isinya sudah lain.
  if (riwayatMode === 'open') {
    riwayatMode = '';
    renderRiwayatModeBar(0);
  }

  const query = String(q || '').trim();
  if (query.length < 2) {
    // Kotak dikosongkan -> kembali ke perilaku lama (7 hari terakhir).
    if (title) title.textContent = 'History — last 7 days';
    loadRiwayat();
    return;
  }

  box.innerHTML = '<div class="riwayat-empty">Searching…</div>';
  try {
    const r = await callApi({ action: 'search-tasks', sessionToken: state.token, query: query });
    if (!r.ok) {
      box.innerHTML = '<div class="riwayat-empty">' + (r.error || 'Search failed.') + '</div>';
      return;
    }
    const items = r.items || [];
    // Dipakai bersama tab riwayat biasa: sheet detail/ubah/hapus membaca
    // riwayatCache lewat indeks, jadi cache HARUS ikut diganti di sini.
    riwayatCache = items;

    if (title) title.textContent = 'History — ' + items.length + (items.length === 1 ? ' result' : ' results');
    if (items.length === 0) {
      box.innerHTML = '<div class="riwayat-empty">Nothing found for \u201C' + query + '\u201D.</div>';
      return;
    }
    renderWorksheetTable(box, items, (idx) => openRiwayatDetail(idx));
  } catch (e) {
    box.innerHTML = '<div class="riwayat-empty">' + (e.message || 'Search failed.') + '</div>';
  }
}

function wireEvents() {
  $('pinPad').addEventListener('click', e => { const b=e.target.closest('.pin-key'); if (b) pinPress(b.dataset.k); });
  document.addEventListener('keydown', e => {
    if ($('pinScreen').classList.contains('hide') || $('pinScreen').style.display === 'none') return;
    if (/^[0-9]$/.test(e.key)) pinPress(e.key);
    else if (e.key === 'Backspace') pinPress('del');
    else if (e.key === 'Escape') pinPress('clear');
  });

  // ── v2.24 — BUG FIX: tanggal tidak bisa dipilih di desktop ──
  //
  // Dilaporkan pengguna 8 Sep 2026: di kotak vendor, "Follow up on"
  // tidak bisa dipilih tanggalnya.
  //
  // Diverifikasi di Chrome sungguhan lewat Playwright, BUKAN dari
  // pembacaan kode. Yang terukur:
  //   - klik MEMANG jatuh ke <input type="date"> di SEMUA titik
  //     baris (tengah baris, tengah ikon, tepi kanan) — jadi
  //     hit-testing DOM tidak salah, dan bukan soal z-index
  //   - markup & CSS "Follow up on" IDENTIK dengan field "Date"
  //     yang dianggap berfungsi
  //   - showPicker() tersedia di peramban ini
  //
  // Jadi sebabnya perilaku native, bukan kode kita: di Chrome
  // DESKTOP, mengklik badan input date TIDAK membuka kalender. Yang
  // membukanya HANYA tombol ::-webkit-calendar-picker-indicator di
  // tepi kanan input. Karena .date-row menyembunyikan input dengan
  // opacity:0, tombol itu ikut tak terlihat — dan ikon SVG yang
  // dilihat pengguna berada 17px dari tepi kanan baris (terukur),
  // hampir tidak menimpa tombol aslinya. Praktisnya pengguna harus
  // menebak pita beberapa piksel.
  //
  // Di Android, mengetuk input date membuka picker dari mana saja —
  // itu sebabnya bug ini tidak pernah muncul selama app dipakai di
  // HP, dan baru terasa begitu dibuka di desktop.
  //
  // Kenapa field "Date" terasa berfungsi padahal sama saja: nilainya
  // SUDAH diisi otomatis saat init (dan bisa diisi AI parse), jadi
  // pengguna praktis tidak pernah perlu mengkliknya.
  //
  // Perbaikannya showPicker() (Chrome/Edge 99+, Firefox 101+,
  // Safari 16+): seluruh baris jadi bisa diklik, bukan pita 5px.
  //
  // DELEGASI di document, bukan listener per input. Alasannya: satu
  // date-row DIBUAT ULANG secara dinamis setiap sheet edit Riwayat
  // dibuka (#rwEditDate), jadi listener yang dipasang sekali per
  // elemen akan hilang. Delegasi menangkap KELIMA date-row sekaligus
  // — taskDate, vendorFollowup, reportStart, reportEnd, rwEditDate —
  // termasuk yang belum ada saat listener ini dipasang.
  //
  // Catatan: reportStart & reportEnd bahkan tidak punya ikon
  // kalender sama sekali, jadi di desktop keduanya lebih tidak
  // mungkin lagi diklik. Ikut terperbaiki di sini.
  document.addEventListener('click', (e) => {
    const row = e.target.closest && e.target.closest('.date-row');
    if (!row) return;
    const inp = row.querySelector('input[type="date"]');
    if (!inp || inp.disabled || inp.readOnly) return;
    // Peramban lama tanpa showPicker: dibiarkan memakai perilaku
    // native apa adanya. Lebih baik seperti sebelumnya daripada error.
    if (typeof inp.showPicker !== 'function') return;
    try {
      inp.showPicker();
    } catch (err) {
      // showPicker() melempar bila picker-nya SUDAH terbuka — misalnya
      // di Android, klik native sudah membukanya lebih dulu — atau
      // bila dipanggil tanpa aktivasi pengguna. Keduanya bukan
      // kegagalan yang perlu diberitahukan: pickernya tetap terbuka.
      // Sengaja TIDAK memakai toast di sini.
    }
  });

  $('taskDate').addEventListener('change', e => { const v=e.target.value; if (v) $('dateText').textContent = formatTanggalPanjang(v); trackEdit(); });
  $('offToggle').addEventListener('click', () => { state.offWorking = !state.offWorking; $('offSwitch').classList.toggle('on', state.offWorking); trackEdit(); applyActivityMode(); });
  ['taskDesc','remarkInput'].forEach(id => $(id).addEventListener('input', trackEdit));

  $('submitBtn').addEventListener('click', doSubmit);
  $('aiBtn').addEventListener('click', doAiParse);

  document.querySelectorAll('.nb').forEach(b => b.addEventListener('click', () => {
    // v2.14 — tab "log" masuk daftar. Daftar putih ini dipertahankan
    // (bukan diganti "izinkan semua") supaya kalau nanti ada tab baru
    // yang belum jadi, perilakunya tetap jelas: beri tahu, bukan
    // menampilkan halaman kosong.
    const TAB_SIAP = ['input', 'riwayat', 'report', 'dash', 'log'];
    if (TAB_SIAP.includes(b.dataset.tab)) {
      switchView(b.dataset.tab === 'report' ? 'laporan' : b.dataset.tab);
      return;
    }
    toast('This page is coming soon.', '');
  }));

  $('scroll').addEventListener('scroll', e => { $('header').classList.toggle('lifted', e.target.scrollTop > 4); }, { passive: true });

  $('sesTrigger').addEventListener('click', openSessionSheet);
  $('themeToggle').addEventListener('click', toggleTheme);

  // ── v2.12 — fitur baru ──────────────────────────────────

  // Antrean offline: tombol kirim manual + pemicu otomatis saat
  // koneksi kembali. Event "online" tidak selalu akurat di semua
  // peramban, jadi tombol manual tetap disediakan sebagai jalan
  // keluar, bukan sekadar pelengkap.
  $('queueBarBtn').addEventListener('click', () => flushQueue(true));

  // ── v2.25 — Routine Checklist Chips, Shift Handover & Network Sync ──
  setupRoutineChips();
  setupHandoverToggle();
  setupNetworkListeners();

  // Template task berulang.
  $('tplSaveBtn').addEventListener('click', saveCurrentAsTemplate);
  $('tplSaveBtn').addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); saveCurrentAsTemplate(); }
  });

  // v2.23 — setupVoiceInput() dihapus bersama fitur input suara.
  // Lihat alasannya di blok "FITUR: INPUT SUARA — DIHAPUS di v2.23".

  // Pencarian riwayat. Diberi jeda 450 ms supaya tidak mengirim
  // satu permintaan per ketukan huruf.
  $('riwayatSearch').addEventListener('input', (e) => {
    const q = e.target.value;
    if (riwayatSearchTimer) clearTimeout(riwayatSearchTimer);
    riwayatSearchTimer = setTimeout(() => runRiwayatSearch(q), 450);
  });
  // Enter langsung mencari tanpa menunggu jeda.
  $('riwayatSearch').addEventListener('keydown', (e) => {
    if (e.key !== 'Enter') return;
    if (riwayatSearchTimer) clearTimeout(riwayatSearchTimer);
    runRiwayatSearch(e.target.value);
  });

  setupActivityPicker(); setupWorkTypePicker(); setupStatusPicker();

  // v2.14 — aset, vendor, foto.
  setupAssetPicker();
  $('vendorFollowup').addEventListener('change', e => {
    const v = e.target.value;
    $('vendorFollowupText').textContent = v ? formatTanggalPanjang(v) : '—';
    trackEdit();
  });
  $('vendorName').addEventListener('input', trackEdit);

  // Laporan
  $('modeMonth').addEventListener('click', () => setReportMode('month'));
  $('modeRange').addEventListener('click', () => setReportMode('range'));
  // v2.19 — mode Ops week: langsung dimuat begitu dipilih, karena
  // rentangnya sudah pasti (tidak ada yang perlu diisi pengguna).
  $('modeOps').addEventListener('click', () => {
    setReportMode('ops');
    loadReport();
  });
  $('opsPrevWeek').addEventListener('click', () => {
    opsWeekOffset--;
    renderOpsWeekLabel();
    loadReport();
  });
  $('opsNextWeek').addEventListener('click', () => {
    if (opsWeekOffset >= 0) return;
    opsWeekOffset++;
    renderOpsWeekLabel();
    loadReport();
  });
  $('opsCopyBtn').addEventListener('click', copyOpsRecap);

  // ── v2.23 — AI Intelligence Report ────────────────────
  // Memilih mode AI TIDAK langsung memanggil AI (beda dari mode Ops
  // yang langsung memuat). Alasannya biaya: satu panggilan Gemini
  // per klik tab akan terbakar hanya karena pengguna melihat-lihat.
  $('modeAi').addEventListener('click', () => setReportMode('ai'));
  $('aiPThisWeek').addEventListener('click', () => setAiPeriod('this-week'));
  $('aiPLastWeek').addEventListener('click', () => setAiPeriod('last-week'));
  $('aiPThisMonth').addEventListener('click', () => setAiPeriod('this-month'));
  $('aiPLastMonth').addEventListener('click', () => setAiPeriod('last-month'));
  $('aiLangEn').addEventListener('click', () => setAiLang('en'));
  $('aiLangId').addEventListener('click', () => setAiLang('id'));
  $('aiGenBtn').addEventListener('click', generateAiReport);
  $('aiSavedBtn').addEventListener('click', loadSavedAiReports);
  $('aiCopyBtn').addEventListener('click', copyAiReport);
  // Bahasa pilihan terakhir dipulihkan. Kalau localStorage tidak bisa
  // dibaca, default EN tetap berlaku — tidak ada yang gagal.
  try {
    const simpanan = localStorage.getItem('mfbit_ai_lang');
    if (simpanan === 'id' || simpanan === 'en') setAiLang(simpanan);
  } catch (e) {}

  $('reportStart').addEventListener('change', e => { if (e.target.value) $('reportStartText').textContent = formatTanggalPendek(e.target.value); });
  $('reportEnd').addEventListener('change', e => { if (e.target.value) $('reportEndText').textContent = formatTanggalPendek(e.target.value); });
  $('reportLoadBtn').addEventListener('click', loadReport);
  $('reportExportBtn').addEventListener('click', exportReportToExcel);
  $('reportOfficialBtn').addEventListener('click', exportReportOfficial);
  $('reportCopyBtn').addEventListener('click', copyReportForSheets); // v2.14

  // ── v2.17 ──────────────────────────────────────────────
  // Navigasi bulan Dashboard.
  $('dashPrevMonth').addEventListener('click', () => {
    dashMonthOffset--;
    loadDashboard();
  });
  $('dashNextMonth').addEventListener('click', () => {
    if (dashMonthOffset >= 0) return; // tidak pernah ke masa depan
    dashMonthOffset++;
    loadDashboard();
  });

  // Kembali dari daftar "open tasks" ke 7 hari terakhir.
  $('riwayatModeReset').addEventListener('click', () => {
    riwayatMode = '';
    loadRiwayat();
  });
  $('backupBtn').addEventListener('click', exportAllData);
}

// "Bangunkan" Edge Function begitu halaman dibuka — dikirim diam-diam
// sambil pengguna masih mengetik PIN, sehingga saat PIN selesai
// diketik, server (yang bisa saja masih "tidur" pada kunjungan
// pertama setelah lama tidak dipakai) sudah lebih siap merespons.
// Kegagalan di sini diabaikan sepenuhnya — ini hanya percepatan,
// bukan bagian dari alur yang wajib berhasil.
function wakeUpServer() {
  fetch(ENDPOINT, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + CONFIG.SUPABASE_ANON_KEY },
    body: JSON.stringify({ action: '__warmup__' }),
  }).catch(() => {});
}

// ── PWA: registrasi Service Worker + deteksi update ──────────
// Kalau browser tidak mendukung Service Worker (browser sangat
// lama), fungsi ini diam saja -- app tetap jalan normal sebagai
// website biasa, cuma tidak bisa di-"Add to Home Screen" dengan
// mode offline/ikon penuh.
function registerServiceWorker() {
  if (!('serviceWorker' in navigator)) return;

  navigator.serviceWorker.register('sw.js').then((reg) => {
    // Kasus 1: ada SW baru yang SEDANG menunggu (misal user buka
    // app lagi setelah sebelumnya sempat menutup tanpa reload).
    if (reg.waiting) {
      showUpdateBanner(reg);
    }

    // Kasus 2: SW baru baru saja terdeteksi & mulai diinstal.
    reg.addEventListener('updatefound', () => {
      const newWorker = reg.installing;
      if (!newWorker) return;
      newWorker.addEventListener('statechange', () => {
        if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
          // 'installed' + ada controller aktif = ini update (bukan
          // instalasi pertama kali), jadi tampilkan banner.
          showUpdateBanner(reg);
        }
      });
    });
  }).catch((e) => {
    console.error('[MFB-IT] Service Worker gagal didaftarkan:', e);
  });

  // Setelah SW baru mengambil alih (activate), muat ulang halaman
  // SEKALI saja supaya konten yang ditampilkan benar-benar dari SW baru.
  let reloaded = false;
  navigator.serviceWorker.addEventListener('controllerchange', () => {
    if (reloaded) return;
    reloaded = true;
    window.location.reload();
  });
}

function showUpdateBanner(reg) {
  $('updateBanner').classList.add('on');
  $('updateBannerBtn').onclick = () => {
    if (reg.waiting) {
      reg.waiting.postMessage('SKIP_WAITING');
    }
    $('updateBanner').classList.remove('on');
  };
}

function init() {
  wireEvents();
  setInterval(tickClock, 1000);
  wakeUpServer();
  registerServiceWorker();

  // v2.12 — tampilkan kondisi awal fitur lokal. Keduanya membaca
  // localStorage saja, jadi aman dipanggil sebelum login: kalau
  // kosong, tidak ada apa pun yang muncul di layar.
  renderQueueBar();
  renderTemplates();

  const saved = Store.get(KEY_TOKEN);
  const savedLoginAt = Store.get(KEY_LOGIN_AT);
  if (saved) {
    state.token = saved;
    state.loginAt = savedLoginAt ? Number(savedLoginAt) : Date.now();
    hidePin();
    startApp();
  } else {
    $('pinScreen').style.display = 'flex';
  }
}

init();
</script>
</body>
</html>