/* ==========================================================================
   Dokumen — arsip berkas penting perusahaan, dibuat seperti File Explorer
   Windows: bilah lokasi (remah roti), toolbar, lalu isi folder sebagai
   ubin (ikon besar) atau daftar (tabel). Berkas diseret/ditempel langsung
   dari PC.

   Memakai kerangka yang sudah ada (css/main.css + css/laporan-impor.css
   untuk .section, .confirm-overlay, .confirm-modal-btn, .impor-empty,
   .view-icon-btn); yang di sini hanya bagian yang khas Dokumen.
   ========================================================================== */

.demo-banner {
  position: sticky; top: 0; z-index: 60;
  background: #FEF3C7; color: #92400E;
  border-bottom: 1px solid #FCD34D;
  padding: 10px 16px; font-size: 0.82rem; line-height: 1.4;
}
.demo-banner code { background: #FDE68A; padding: 1px 5px; border-radius: 4px; font-size: 0.78rem; }

/* ---- bilah lokasi (remah roti) ------------------------------------------ */
.dok-lokasi {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  min-height: 40px;
  padding: 4px 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}

.dok-lokasi-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dok-lokasi-item svg { width: 15px; height: 15px; flex-shrink: 0; }
.dok-lokasi-item:hover { background: var(--bg); color: var(--ink); }
.dok-lokasi-item.aktif { color: var(--ink); cursor: default; }
.dok-lokasi-item.dok-jatuh-target { background: #E0F2FE; color: #0369A1; outline: 2px dashed #0284C7; }
.dok-lokasi-pisah { color: var(--muted); font-size: 0.8rem; user-select: none; }

/* ---- toolbar ------------------------------------------------------------ */
.dok-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.dok-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.dok-btn svg { width: 16px; height: 16px; }
.dok-btn:hover { background: var(--bg); }
.dok-btn:disabled { opacity: .45; cursor: default; }
.dok-btn--utama { background: var(--red); border-color: var(--red); color: #fff; }
.dok-btn--utama:hover { background: var(--red-dark); }
.dok-btn--bahaya { color: var(--red); }

/* Label panjang di layar lebar, pendek di HP ("Google Drive" -> "Drive",
   "Simpan ke Dokumen" -> "Simpan"). */
.dok-btn-sempit { display: none; }
.dok-btn--drive svg { width: 17px; height: 15px; }

.dok-toolbar-pisah { width: 1px; height: 24px; background: var(--border); margin: 0 2px; }
.dok-toolbar-kanan { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* Aksi untuk item terpilih - muncul menggantikan tombol biasa saat ada
   yang dipilih (di HP tidak ada klik kanan, jadi inilah jalan utamanya). */
/* display:contents - pembungkusnya cuma untuk disembunyikan sekaligus;
   tombol-tombolnya tetap ikut flex toolbar seolah tanpa pembungkus. */
.dok-toolbar-biasa { display: contents; }
.dok-toolbar-pilih { display: none; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; }
.dok-toolbar.ada-pilihan .dok-toolbar-biasa { display: none; }
.dok-toolbar.ada-pilihan .dok-toolbar-pilih { display: flex; }
.dok-pilih-hitung { font-size: 0.82rem; font-weight: 800; color: var(--ink); margin-right: 4px; }

/* ---- area isi (sekaligus sasaran seret & lepas) -------------------------- */
.dok-area {
  position: relative;
  min-height: 320px;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  outline: 2px dashed transparent;
  outline-offset: -6px;
  transition: outline-color .12s ease, background .12s ease;
  /* Seret-pilih & klik di area kosong tidak boleh memilih teks ubin. */
  user-select: none;
  -webkit-user-select: none;
}
.dok-area.dok-seret-masuk { outline-color: var(--red); background: #FFF5F5; }

.dok-area-petunjuk {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--red);
  background: rgba(255, 245, 245, .85);
  border-radius: var(--radius-lg);
  z-index: 3;
}
.dok-area.dok-seret-masuk .dok-area-petunjuk { display: flex; }

.dok-kosong {
  padding: 60px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.7;
}
.dok-kosong strong { color: var(--ink-soft); }
.dok-kosong svg { width: 48px; height: 48px; margin-bottom: 8px; color: #D4D4DB; }

/* ---- tampilan ubin ------------------------------------------------------ */
.dok-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 6px;
}

.dok-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.dok-item:hover { background: var(--bg); border-color: var(--border); }
.dok-item.terpilih { background: #E8F1FE; border-color: #B7D4FB; }
.dok-item.dok-jatuh-target { background: #E0F2FE; border-color: #0284C7; }
.dok-item.dok-menyeret { opacity: .4; }

/* Ikon/gambar mengisi lebar ubin (persegi), bukan kotak 64px tetap -
   di HP dua ubin per baris berarti gambar ~140px, cukup untuk mengenali
   logo mana yang mana tanpa membukanya. */
.dok-ikon {
  width: 100%;
  max-width: 132px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
.dok-ikon svg { width: 82%; height: 82%; }
.dok-ikon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
}

.dok-nama {
  width: 100%;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  line-height: 1.3;
  /* Nama panjang dipotong di baris ke-2 seperti Windows; nama lengkapnya
     ada di title dan di tampilan daftar. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.dok-item.terpilih .dok-nama { color: #0B3D91; }
.dok-meta { font-size: 0.66rem; color: var(--muted); font-weight: 600; }

/* Tekan-tahan di layar sentuh membuka menu (js/dokumen.js); callout
   bawaan iOS untuk tekan-tahan dimatikan supaya tidak berebut. */
[data-kunci] { -webkit-touch-callout: none; }

/* PC: SEPULUH ubin per baris - ikon setinggi ~80px cukup di layar lebar,
   dan satu layar memuat jauh lebih banyak item. */
@media (min-width: 861px) {
  .dok-grid { grid-template-columns: repeat(10, 1fr); gap: 4px; }
  .dok-item { padding: 10px 4px 8px; gap: 5px; }
  .dok-ikon { max-width: 80px; }
  .dok-nama { font-size: 0.7rem; }
}

/* ---- tampilan daftar ---------------------------------------------------- */
.dok-baris--kepala,
.dok-baris--kepala:hover {
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  cursor: default;
}
.dok-baris--kepala .dok-nama,
.dok-baris--kepala .dok-kolom {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.dok-baris {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: default;
}
.dok-baris:hover { background: var(--bg); }
.dok-baris.terpilih { background: #E8F1FE; }
.dok-baris.dok-jatuh-target { background: #E0F2FE; outline: 1px solid #0284C7; }
.dok-baris .dok-ikon { width: 28px; height: 28px; border-radius: 6px; }
.dok-baris .dok-ikon svg { width: 24px; height: 24px; }
.dok-baris .dok-ikon img { width: 28px; height: 28px; border-radius: 5px; }
/* flex-basis 0 + min-width 0: nama mengambil SELURUH sisa lebar baris,
   bukan lebar "minimum isi"-nya sendiri yang membuatnya terpotong padahal
   di kanannya masih lapang. */
.dok-baris .dok-nama { flex: 1 1 0; min-width: 0; width: auto; text-align: left; font-size: 0.82rem; -webkit-line-clamp: 1; word-break: normal; overflow-wrap: anywhere; }
.dok-baris .dok-kolom { width: 110px; font-size: 0.74rem; color: var(--ink-soft); font-weight: 600; text-align: right; white-space: nowrap; }
.dok-baris .dok-kolom--tanggal { width: 130px; }
.dok-tabel-bungkus { overflow-x: auto; }
.dok-tabel-bungkus .dok-baris { min-width: 420px; }

@media (max-width: 560px) {
  .dok-baris .dok-kolom--tanggal { display: none; }
  .dok-baris .dok-kolom { width: 56px; font-size: 0.68rem; }
  .dok-baris { gap: 8px; padding: 7px 4px; }
  /* Nama panjang boleh turun ke baris kedua di layar sempit - lebih baik
     dua baris terbaca utuh daripada satu baris berakhiran "…". */
  .dok-baris .dok-nama { -webkit-line-clamp: 2; font-size: 0.78rem; line-height: 1.25; }
  .dok-tabel-bungkus .dok-baris { min-width: 0; }

  /* Toolbar: tiga tombol unggah/folder muat dalam SATU baris (ukurannya
     dipadatkan); tombol Drive (label pendek) turun ke baris kedua bersama
     keterangan jumlah & tombol tampilan yang rata kanan. */
  .dok-btn { padding: 8px 9px; font-size: 0.72rem; gap: 5px; }
  .dok-btn svg { width: 14px; height: 14px; }
  .dok-btn-lebar { display: none; }
  .dok-btn-sempit { display: inline; }
  .dok-toolbar { gap: 6px; }
  .dok-toolbar-kanan { flex: 1 1 auto; min-width: 0; margin-left: 0; justify-content: flex-end; }
  .dok-lokasi { min-height: 34px; padding: 3px 6px; margin-bottom: 8px; }
  .dok-lokasi-item { font-size: 0.72rem; padding: 4px 5px; gap: 4px; max-width: 150px; }
  .dok-lokasi-item svg { width: 13px; height: 13px; }
  .dok-lokasi-pisah { font-size: 0.7rem; }

  /* Ubin: EMPAT per baris. Ikon folder/berkas mengecil mengikuti ubinnya;
     gambar tetap mengisi seluruh lebar ubin, jadi yang tampak besar hanya
     gambar - bukan ikon folder. */
  .dok-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .dok-item { padding: 8px 3px 6px; gap: 4px; }
  .dok-ikon { border-radius: 8px; }
  .dok-ikon svg { width: 74%; height: 74%; }
  .dok-ikon img { border-radius: 8px; }
  .dok-nama { font-size: 0.64rem; line-height: 1.2; }
  .dok-meta { font-size: 0.6rem; }
}

/* ---- menu konteks (klik kanan / titik-tiga) ------------------------------ */
.dok-menu {
  position: fixed;
  z-index: 1100;
  min-width: 190px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(20, 20, 30, .18);
}
.dok-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.dok-menu-item svg { width: 16px; height: 16px; color: var(--ink-soft); }
.dok-menu-item:hover { background: var(--bg); }
.dok-menu-item--bahaya { color: var(--red); }
.dok-menu-item--bahaya svg { color: var(--red); }
.dok-menu-pisah { height: 1px; background: var(--border); margin: 4px 2px; }

/* ---- dialog: folder baru / ganti nama / pindahkan ----------------------- */
.dok-dialog-judul { font-size: 0.98rem; font-weight: 800; color: var(--ink); margin: 0 0 12px; }
.dok-dialog-teks { font-size: 0.84rem; color: var(--ink-soft); line-height: 1.5; margin: 0 0 12px; }
.dok-input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  outline: none;
  margin-bottom: 16px;
}
.dok-input:focus { border-color: var(--red); background: #fff; box-shadow: 0 0 0 3px rgba(228, 33, 43, .12); }

/* Pohon folder di dialog Pindahkan */
.dok-pohon {
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px;
  margin-bottom: 16px;
}
.dok-pohon-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.dok-pohon-item svg { width: 16px; height: 16px; color: #F59E0B; flex-shrink: 0; }
.dok-pohon-item:hover { background: var(--bg); }
.dok-pohon-item.terpilih { background: #E8F1FE; color: #0B3D91; }
.dok-pohon-item:disabled { opacity: .4; cursor: default; }

/* ---- dialog: Kirim ke Laporan Impor (menu Dokumen) -----------------------
   Sama seperti .dok-pohon (dialog Pindahkan), tapi tiap baris menampilkan
   info order (supplier, bulan, index/resi) dan lebih lebar - 340px bawaan
   .confirm-modal terlalu sempit untuk itu. */
.dok-impor-dialog { max-width: min(440px, 92vw); }
.impor-order-item { justify-content: space-between; gap: 10px; }
.impor-order-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; }
.impor-order-info strong { font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.impor-order-info small { font-size: 0.72rem; color: var(--ink-soft); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.impor-order-ada {
  flex-shrink: 0;
  font-size: 0.66rem;
  font-weight: 700;
  color: #B45309;
  background: #FEF3C7;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.impor-order-kosong { margin: 10px 6px; }
.impor-order-baru {
  color: var(--red);
  font-weight: 700;
  border: 1px dashed var(--border);
  margin-bottom: 8px;
}
.impor-order-baru svg { color: var(--red); }
.impor-order-baru:hover { background: #FFF5F5; }
.impor-order-baru:disabled { opacity: .5; cursor: default; }

/* ---- dialog: Terkirim ke Laporan Impor (sukses) --------------------------
   Sama seperti .stok-restock-sukses di css/laporan-stok.css, yang tidak
   dimuat di halaman Dokumen. */
.dok-kirim-sukses { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin-bottom: 4px; }
.dok-kirim-sukses svg { width: 44px; height: 44px; color: #16A34A; }
.dok-kirim-sukses .dok-dialog-judul { margin: 0; }


/* ---- panel unggahan (kanan bawah) -------------------------------------- */
.dok-unggah {
  position: fixed;
  right: 16px;
  bottom: calc(84px + var(--safe-bottom));
  z-index: 900;
  width: min(360px, calc(100vw - 32px));
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 40px rgba(20, 20, 30, .2);
  overflow: hidden;
  display: none;
}
.dok-unggah.tampil { display: block; }
.dok-unggah-kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--ink);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}
.dok-unggah-kepala-aksi { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dok-unggah-tutup { border: 0; background: transparent; color: #fff; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; }
/* Muncul cuma kalau ada berkas yang gagal sesudah percobaan otomatisnya
   habis (lihat DOK_MAX_COBA di js/dokumen.js) - menyatukan kembali semua
   baris yang gagal ke antrian tanpa perlu memilihnya satu-satu. */
.dok-unggah-ulang {
  border: 1px solid rgba(255, 255, 255, .35);
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.dok-unggah-ulang:hover { background: rgba(255, 255, 255, .12); }
.dok-unggah-daftar { max-height: 200px; overflow-y: auto; }
.dok-unggah-baris { padding: 8px 12px; border-top: 1px solid var(--border); }
.dok-unggah-nama { display: flex; justify-content: space-between; gap: 8px; font-size: 0.74rem; font-weight: 600; color: var(--ink); }
.dok-unggah-nama span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dok-unggah-status { flex-shrink: 0; color: var(--muted); }
.dok-unggah-status.ok { color: #059669; }
.dok-unggah-status.gagal { color: var(--red); }
.dok-unggah-bar { height: 4px; margin-top: 6px; border-radius: 2px; background: var(--border); overflow: hidden; }
.dok-unggah-bar i { display: block; height: 100%; width: 0; background: var(--red); transition: width .15s ease; }
/* Alasan gagal yang bisa ditindaklanjuti - sengaja boleh membungkus beberapa
   baris (bukan dipotong ellipsis seperti nama berkasnya): justru isi pesan
   inilah yang memberi tahu apa yang harus diperbaiki. */
.dok-unggah-ket {
  margin-top: 6px;
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--muted);
  white-space: normal;
}

@media (min-width: 860px) {
  .dok-unggah { bottom: 20px; }
}
/* Saat penampil terbuka ("Simpan ke Dokumen" dari berkas Drive/dibagikan),
   panel unggahannya harus tampak di atas penampil. */
body.dok-viewer-terbuka .dok-unggah { z-index: 1350; }

/* ---- toast --------------------------------------------------------------- */
.dok-toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translate(-50%, 12px);
  z-index: 1400; /* di atas penampil (1300) juga */
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .92);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.dok-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- penampil dalam aplikasi (PDF / Word / Excel / teks) -------------- */
.dok-viewer {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  background: #2B2F3A;
}
body.dok-viewer-terbuka { overflow: hidden; }
.dok-viewer-kepala {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(8px + var(--safe-top)) 10px 8px 14px;
  background: var(--surface-dark);
  color: #fff;
}
.dok-viewer-nama { flex: 1; min-width: 0; font-size: 0.84rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dok-viewer-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dok-viewer-btn svg { width: 17px; height: 17px; }
.dok-viewer-btn:hover { background: rgba(255, 255, 255, .22); }
.dok-viewer-btn[hidden] { display: none; }
/* "Simpan ke Dokumen" - hanya untuk berkas dari luar arsip (Google Drive /
   dibagikan): tombol berlabel, merah supaya terlihat sebagai tindakan utama;
   sesudah tersimpan jadi tanda hijau yang tidak bisa ditekan lagi. */
.dok-viewer-btn--simpan {
  width: auto;
  padding: 0 12px 0 10px;
  border-radius: 18px;
  gap: 6px;
  background: var(--red);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}
.dok-viewer-btn--simpan:hover { background: var(--red-dark); }
.dok-viewer-btn--simpan.sudah, .dok-viewer-btn--simpan.sudah:hover { background: rgba(255, 255, 255, .12); color: #6EE7B7; cursor: default; }
/* Lapisan di DALAM penampil (panel pilih folder): di atas isi & kepala
   penampil, Back/Escape menutup panelnya dulu (lihat overlayBuka). */
.dok-viewer-lapis {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 15, 20, .55);
}
.dok-viewer-kartu {
  width: 100%;
  max-width: 360px;
  max-height: calc(100% - 40px);
  overflow-y: auto;
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 20px 50px -12px rgba(20, 20, 26, .4);
}
.dok-viewer-isi {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
  /* Satu jari menggulir; cubit dua jari ditangani skrip (zoom). */
  touch-action: pan-x pan-y;
  overscroll-behavior: contain;
  /* flex (bukan block): supaya .dok-viewer-zoom bisa dipusatkan VERTIKAL
     juga lewat margin:auto miliknya sendiri - dokumen pendek (satu
     halaman PDF, surat singkat) jadinya duduk di TENGAH layar, bukan
     menempel di atas dengan ruang kosong di bawah yang tanggung. Dokumen
     panjang tetap rata atas & bisa digulir seperti biasa - auto-margin
     cuma memusatkan kalau ada RUANG LEBIH; begitu isinya lebih tinggi
     dari layar, auto-margin-nya jatuh ke 0 dengan sendirinya. */
  display: flex;
  flex-direction: column;
}
/* KOTAK PENGUKUR. Yang diskalakan adalah .dok-viewer-zoom di dalamnya lewat
   transform (murah, tidak menata ulang isi) - tapi transform TIDAK mengubah
   ukuran tata letak, jadi bidang gulir & pemusatan tidak akan tahu isinya
   membesar/mengecil. Maka kotak ini diberi ukuran terskala dari skrip
   (ukuran asli x skala, lihat aturZoom di js/dokumen.js); dialah yang
   menentukan seberapa jauh bisa digulir dan di mana isinya dipusatkan.

   margin:auto di KEDUA sumbu (bukan cuma "0 auto") karena .dok-viewer-isi
   sendiri sudah flex column - horizontal memusatkan kalau lebih sempit dari
   induknya & rata kiri kalau lebih lebar (supaya posisi gulir Word yang
   dihitung dari origin kiri-atas=0 tetap bisa diandalkan); vertikal
   memusatkan kalau lebih pendek dari layar, rata atas & bisa digulir kalau
   lebih tinggi. Auto-margin dipilih, BUKAN align-items:center: yang
   terakhir tetap memusatkan sekalipun isinya LEBIH BESAR dari induknya
   (kelebihan dibagi ke dua sisi, origin bergeser) dan itu merusak posisi
   gulir. flex-shrink:0 - flex-item tidak boleh disusutkan begitu
   overflow:auto pada induknya harus mengambil alih. */
.dok-viewer-ukur {
  margin: auto;
  flex-shrink: 0;
}
/* Pembungkus yang diskalakan. width:max-content - menyusut ke ukuran ISINYA
   sendiri (halaman Word selebar kertas, PDF selebar lebarLayar, gambar
   seukuran aslinya). transform-origin kiri-atas supaya ukuran terskala
   persis mengisi kotak pengukur di atas, dan titik (0,0) tetap (0,0). */
.dok-viewer-zoom {
  width: max-content;
  transform-origin: 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;   /* memusatkan antar-halaman kalau lebarnya beda-beda (PDF campuran potret & lanskap) */
  gap: 8px;
}
.dok-viewer-gambar { display: block; max-width: none; border-radius: 6px; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.dok-viewer-zoombar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 10px calc(6px + var(--safe-bottom));
  background: var(--surface-dark);
}
.dok-viewer-zoombar .dok-viewer-btn { font-size: 1.3rem; font-weight: 700; }
.dok-viewer-zoomteks {
  min-width: 64px;
  height: 36px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}
.dok-viewer-memuat, .dok-viewer-gagal { color: #CBD5E1; font-size: 0.86rem; font-weight: 600; padding: 40px 16px; text-align: center; }
/* Indikator memuat melayang di atas isi yang masih disembunyikan - tidak
   mengambil tempat, jadi tidak ada yang bergeser saat isinya muncul. */
.dok-viewer-memuat { position: absolute; left: 0; right: 0; top: 40%; }
.dok-viewer-isi { position: relative; }
.dok-viewer-gagal p { margin: 0 0 14px; }
.dok-viewer-halaman { display: block; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
/* Lebar mengikuti halaman aslinya (max-content); yang menyesuaikan ke
   layar adalah zoom/scale dari skrip, bukan lebar halamannya. */
.dok-viewer-docx { width: max-content; max-width: none; }
.dok-viewer-docx .docx-wrapper { background: transparent; padding: 0; }
.dok-viewer-docx .docx { box-shadow: 0 2px 12px rgba(0, 0, 0, .35); margin-bottom: 8px; }
/* Tabel Word berlebar tetap (tblLayout fixed / gridCol) harus dihormati:
   docx-preview memberi tiap kolom lebarnya, tapi membiarkan table-layout
   auto, sehingga gambar/teks panjang di satu sel melebarkan kolomnya dan
   menyempitkan yang lain - kop surat dua kolom jadi bergeser. Gambar di
   dalam sel menyusut mengikuti selnya, seperti Word memotongnya. */
.dok-viewer-docx .docx table { table-layout: fixed !important; }
/* Gambar di dalam sel: pembungkus inline-block-nya (tanpa kelas) yang
   diberi lebar tetap oleh docx-preview - keduanya dibatasi ke lebar sel;
   tinggi mengikuti supaya rasionya tetap. Word memotong gambar yang
   melebihi selnya; menyusutkannya adalah versi yang lebih ramah. */
.dok-viewer-docx .docx td div[style*="inline-block"] { max-width: 100% !important; height: auto !important; }
.dok-viewer-docx .docx td img { max-width: 100% !important; height: auto !important; }
/* PowerPoint (pptx-preview): pustakanya menaruh semua slide di satu kotak
   960x540 yang digulir di dalam - dibuka jadi bertumpuk ke bawah seperti
   halaman PDF, latar hitamnya dibuang, tiap slide diberi bayangan. Font
   dasar Calibri (font tema Office), bukan font halaman ERP. */
.dok-viewer-pptx { width: 960px; font-family: Calibri, Arial, sans-serif; }
.dok-viewer-pptx .pptx-preview-wrapper { height: auto !important; overflow: visible !important; background: transparent !important; }
.dok-viewer-pptx .pptx-preview-slide-wrapper { margin: 0 0 8px !important; box-shadow: 0 2px 12px rgba(0, 0, 0, .35); overflow: hidden; }
/* Lembar kerja (js/dokumen-lembar.js): meniru Excel - Calibri 11, sel
   berukuran persis, kisi tipis; gaya per sel datang inline dari skrip. */
.dok-viewer-lembar { background: #fff; padding: 12px; box-shadow: 0 2px 12px rgba(0, 0, 0, .35); font-family: Calibri, Carlito, Arial, sans-serif; font-size: 14.67px; color: #000; }
.dok-lembar-tabel { border-collapse: collapse; table-layout: fixed; }
/* Gambar lembar: lapisan absolut di atas tabel, koordinatnya dihitung dari
   tabel yang sudah tergambar (js/dokumen-lembar.js, letakkanGambar). */
.dok-lembar-isi { position: relative; width: max-content; }
.dok-lembar-gambar { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.dok-lembar-gambar img { object-fit: fill; }
.dok-lembar-tabel td { padding: 1px 3px; height: 20px; line-height: 1.25; box-sizing: border-box; }
.dok-lembar-sembunyi { display: none; }
.dok-lembar-catatan { margin-top: 8px; font-size: 12px; color: #92400E; background: #FEF3C7; padding: 6px 10px; border-radius: 6px; }
/* Bilah tab lembar Excel: bagian dari kerangka penampil, TETAP tepat di
   atas bilah zoom - selalu terlihat berapa pun lembar digulir (dulu
   diletakkan di bawah tabel, jadi lenyap ke bawah pada lembar tinggi).
   Sebilah strip terang seperti kaki jendela Excel; tab-nya digulir mendatar
   kalau banyak. */
.dok-viewer-lembar-tab {
  flex-shrink: 0;
  display: flex;
  gap: 2px;
  align-items: flex-end;
  padding: 5px 10px 0;
  background: #F3F3F3;
  border-top: 1px solid #D0D0D0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.dok-lembar-tab-btn {
  flex-shrink: 0;
  max-width: 200px;
  border: 1px solid #D9D9D9;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: #E8E8E8;
  padding: 6px 14px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #555;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dok-lembar-tab-btn:hover { background: #F0F0F0; }
.dok-lembar-tab-btn.aktif { background: #fff; color: #217346; border-bottom: 2px solid #217346; padding-bottom: 5px; }
.dok-viewer-teks { width: 100%; max-width: 900px; background: #fff; border-radius: 8px; padding: 14px; font-size: 0.8rem; white-space: pre-wrap; word-break: break-word; margin: 0; }

/* Tautan di dalam PDF, ditumpangkan di atas canvas halaman (pasangTautanPdf).
   Tembus pandang - gambar halamannya sendiri sudah memperlihatkan teks
   tautannya; sorotan tipis muncul saat kursor di atasnya supaya terlihat
   bahwa itu bisa diklik. */
.dok-viewer-pdf-halaman { position: relative; }
.dok-pdf-tautan {
  position: absolute;
  display: block;
  border-radius: 2px;
  cursor: pointer;
}
.dok-pdf-tautan:hover, .dok-pdf-tautan:focus-visible {
  background: rgba(37, 99, 235, .12);
  outline: 1.5px solid rgba(37, 99, 235, .55);
}

/* ---- Akses Cepat (folder yang disematkan) ----
   Submenu di sidebar memakai gaya .sidebar-nav-subitem yang sudah ada
   (css/main.css); di sini hanya ikon folder kecil di depan namanya, karena
   sub-item lain di aplikasi ini semuanya teks polos. */
/* Belum ada yang disematkan: benar-benar tidak ada, bukan kotak kosong
   setinggi paddingnya. Perlu !important karena .sidebar-nav-sub.open di
   css/main.css memaksa display:flex - js/sidebar-nav.js memasang .open itu
   saat halaman diurai, sebelum daftar sematan sempat dimuat. */
.sidebar-nav-sub[hidden] { display: none !important; }

.sidebar-nav-subitem.dok-pin-item {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}
.dok-pin-item svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .8; }
.dok-pin-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Penanda pin di folder yang sudah disematkan - kecil saja, cuma untuk
   mengenali mana yang sudah ada di Akses Cepat tanpa membuka menunya. */
.dok-ikon { position: relative; }
.dok-pin-tanda {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--red);
  box-shadow: 0 1px 4px rgba(20, 20, 26, .18);
}
.dok-pin-tanda svg { width: 12px; height: 12px; }
/* Di tampilan daftar penandanya ikut baris teks, bukan menempel di ikon. */
.dok-pin-tanda--baris {
  position: static;
  width: 16px;
  height: 16px;
  border: 0;
  box-shadow: none;
  background: transparent;
  vertical-align: -3px;
}
.dok-pin-tanda--baris svg { width: 13px; height: 13px; }

/* Baris Akses Cepat di halaman - HANYA di layar sempit. Di >= 860px
   sidebar-nya sudah menampilkan daftar yang sama, jadi di sana barisnya
   disembunyikan supaya tidak dobel. */
.dok-cepat {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: -4px 0 12px;
}
.dok-cepat-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 2px;
}
.dok-cepat-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 190px;
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
}
.dok-cepat-item svg { width: 13px; height: 13px; flex-shrink: 0; }
.dok-cepat-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dok-cepat-item.aktif { border-color: var(--red); color: var(--red); background: #FFF5F5; }
.dok-cepat-item.dok-jatuh-target { background: #E0F2FE; color: #0369A1; outline: 2px dashed #0284C7; }
@media (min-width: 860px) { .dok-cepat { display: none; } }