/* ============================================================================
 * desktop-fix-v7.css — LAPISAN ADITIF, dimuat PALING AKHIR (setelah
 * responsive-fix-v6.css). 10 September 2026.
 * ============================================================================
 * Sasaran: aplikasi desktop Bebas Mengajar (BebasMengajar-Portable.exe dan
 * BebasMengajar-Setup.exe — keduanya wrapper Electron yang memuat
 * https://bebasmendalam.com), plus browser desktop mana pun.
 *
 * KENAPA DESKTOP BUTUH LAPISAN SENDIRI
 * ------------------------------------
 * Semua breakpoint yang ada (1024 / 768 / 520 / 480 / 400 px) dibuat dengan
 * asumsi "layar HP" — yaitu LEBAR yang berubah-ubah, tapi TINGGI yang selalu
 * lega relatif terhadap lebarnya. Di aplikasi desktop asumsi itu tidak berlaku:
 *
 *   1. Guru bisa mengubah ukuran jendela ke bentuk apa pun, termasuk jendela
 *      PENDEK (mis. setengah layar atas/bawah, atau laptop sekolah 1366x768
 *      yang tinggi efektifnya tinggal ~600 px setelah taskbar). Tidak ada satu
 *      pun aturan @media (max-height: ...) di seluruh CSS aplikasi — jadi
 *      modal yang isinya panjang (Buku Induk, Tambah Murid, Pengaturan) bisa
 *      terpotong di atas DAN bawah sekaligus, tanpa bisa digulir sama sekali.
 *      Ini penyebab paling masuk akal dari laporan "tombol Simpan tidak
 *      kelihatan" di aplikasi desktop.
 *
 *   2. Ada "zona canggung" 769-1024 px: sidebar masih permanen selebar 240 px,
 *      tapi sisa ruang isi tinggal ~560 px. Ini persis lebar jendela Electron
 *      yang di-snap setengah layar di monitor 1366-1600 px — pemakaian yang
 *      sangat umum (aplikasi di kiri, Dapodik/WhatsApp Web di kanan).
 *
 * Semua aturan di sini hanya menambah di dalam @media yang BELUM tercakup
 * CSS mana pun. Tidak ada selektor lama yang diubah, tidak ada kelas baru
 * yang wajib dipasang di HTML.
 * ========================================================================= */

/* --- 1. Kompensasi zoom desktop ------------------------------------------ */
/* Dipasang oleh desktop-fix-v7.js saat guru menekan Ctrl + / Ctrl - .
   PENTING: properti CSS `zoom` TIDAK ikut menskalakan satuan viewport (vh/dvh).
   Tanpa pembagian di bawah, `height:100dvh` pada #app/.sidebar/#main-content
   akan jadi 125% tinggi layar saat zoom 125% — shell-nya meluber dan muncul
   scrollbar ganda. Ini kompensasinya. */
html[data-gp-zoom] #app,
html[data-gp-zoom] .sidebar,
html[data-gp-zoom] #main-content {
  height: calc(100dvh / var(--gp-zoom, 1));
}

/* --- 2. Jendela PENDEK --------------------------------------------------- */
/* Jaring pengaman utama: apa pun isinya, modal tidak boleh lebih tinggi dari
   jendela dan harus selalu bisa digulir sampai tombol aksinya. */
@media (max-height: 760px) {
  .modal-container {
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .modal-box { padding: 20px; }
  .modal-actions { margin-top: 14px; }
  .app-content { padding-top: 14px; padding-bottom: 14px; }
  /* Panel chat AI ikut dibatasi supaya tidak menembus tepi atas jendela. */
  .ai-chat-panel { max-height: calc(100dvh - 108px); }
}

@media (max-height: 560px) {
  /* Jendela sangat pendek (mis. di-snap seperempat layar). Ruang vertikal
     diprioritaskan untuk isi, bukan jarak antar elemen. */
  .modal-box { padding: 16px; }
  .app-content { padding-top: 10px; padding-bottom: 10px; }
  .stats-grid { gap: 10px; margin-bottom: 14px; }
  .quick-actions { margin-bottom: 14px; }
  .card { margin-bottom: 14px; }
}

/* --- 3. Zona canggung 769-1024 px (jendela setengah layar) ---------------- */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Kartu statistik minmax bawaan 180px: pada ruang isi ~560px hanya muat 2
     kolom dengan sisa ruang terbuang. 150px membuatnya muat 3 kolom rapi. */
  .stats-grid   { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .quick-actions{ grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .card         { padding: 16px; }
  .stat-card    { padding: 14px 16px; }
}

/* --- 4. Penghalusan khas perangkat berpenunjuk presisi (mouse) ------------ */
/* Sengaja dibatasi ke pointer:fine supaya tidak menyentuh tampilan di HP.
   Scrollbar bawaan Chromium di Windows lebarnya 17px dan terasa kasar di
   panel sempit seperti sidebar dan daftar murid. */
@media (pointer: fine) {
  #main-content, .sidebar-nav, .modal-container,
  .ai-chat-messages, .rw6-table-wrap {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .6) transparent;
  }
  #main-content::-webkit-scrollbar,
  .sidebar-nav::-webkit-scrollbar,
  .modal-container::-webkit-scrollbar,
  .ai-chat-messages::-webkit-scrollbar,
  .rw6-table-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
  #main-content::-webkit-scrollbar-thumb,
  .sidebar-nav::-webkit-scrollbar-thumb,
  .modal-container::-webkit-scrollbar-thumb,
  .ai-chat-messages::-webkit-scrollbar-thumb,
  .rw6-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .55);
    border-radius: 8px;
  }
  #main-content::-webkit-scrollbar-track,
  .sidebar-nav::-webkit-scrollbar-track,
  .modal-container::-webkit-scrollbar-track,
  .ai-chat-messages::-webkit-scrollbar-track,
  .rw6-table-wrap::-webkit-scrollbar-track { background: transparent; }
}

/* --- 5. Penanda platform desktop ----------------------------------------- */
/* desktop-fix-v7.js memasang data-platform="desktop" di <html> saat aplikasi
   dibuka lewat EXE. Disediakan sebagai kait untuk penyesuaian selanjutnya —
   saat ini hanya menyembunyikan ajakan pasang PWA, yang tidak ada artinya di
   aplikasi yang memang sudah terpasang. */
html[data-platform="desktop"] .pwa-banner { display: none !important; }