/* ==========================================================================
   Lemari Arsip Virtual TTC BSD — custom CSS pelengkap Tailwind
   ========================================================================== */

/* PENTING: kelas utilitas Tailwind (mis. "flex") ikut disuntik sebagai
   stylesheet ber-spesifisitas sama dengan atribut [hidden] bawaan browser,
   dan karena Tailwind dimuat belakangan, ia menang dan modal jadi selalu
   kelihatan. Baris ini mengembalikan perilaku [hidden] yang benar. */
.modal-overlay[hidden]{display:none !important;}

/* 3 Okt 2026: sebelumnya overlay modal (.modal-overlay, flex + items-center di
   HTML lewat class Tailwind) TIDAK bisa di-scroll -- kalau isi form di dalamnya
   lebih tinggi dari layar (mis. modal Upload pas lagi ada file Excel multi-
   sheet + panel "ambil dari Google Drive" sama-sama terbuka), bagian atas
   DAN bawah form jadi ketutup di luar layar, termasuk tombol "Simpan ke
   Lemari" di paling bawah -- tidak ada cara buat menjangkaunya, mentok.
   overflow-y:auto di sini bikin overlay-nya sendiri yang discroll (bukan body
   di belakangnya), jadi bagian form yang ketutup di atas/bawah tetap bisa
   dicapai dengan scroll, tanpa perlu ubah tampilan modal yang sudah pas kalau
   isinya muat di layar. Berlaku ke SEMUA modal di app ini (Upload, Rutinitas,
   Tambah/Ubah Rak & Laci, detail dokumen, dst) karena semua pakai struktur
   .modal-overlay yang sama. */
.modal-overlay{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
.modal-overlay > div{ margin-top:auto; margin-bottom:auto; }

/* Transisi dasar buat SEMUA elemen interaktif (tombol, link, select, input) --
   biar hover/focus di seluruh halaman (index, Kelola Rak, Kelola Laci) terasa
   halus & konsisten, bukan cuma yang kebetulan dikasih class transition manual.
   Class lebih spesifik (.binder-spine, .drawer-front, dst) tetap menang untuk
   properti yang mereka override sendiri. */
button, a, select, input, textarea {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .1s ease, filter .15s ease, opacity .15s ease;
}

/* Animasi modal muncul (fade + pop halus) -- berlaku otomatis buat SEMUA modal
   di app ini (Rutinitas, Upload, detail dokumen, Tambah/Edit Rak, Tambah/Edit
   Laci) karena semua modal pakai struktur .modal-overlay > div yang sama. */
@keyframes modalOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPanelIn {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-overlay:not([hidden]) { animation: modalOverlayIn .18s ease; }
.modal-overlay:not([hidden]) > div { animation: modalPanelIn .22s cubic-bezier(.16,1,.3,1); }

/* Notifikasi flash (sukses/error) meluncur turun + fade in, biar kelihatan
   jelas kalau ada pesan baru, bukan cuma nongol tiba-tiba di atas konten. */
@keyframes flashIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.flash-banner { animation: flashIn .25s ease; }

/* Toast notifikasi (sukses/error) -- versi mengambang pojok kanan atas,
   auto-hilang sendiri (lihat script.js), atau bisa ditutup manual. */
@keyframes toastIn { from { opacity: 0; transform: translateY(-12px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-8px) scale(.97); } }
.toast-banner { animation: toastIn .25s cubic-bezier(.16,1,.3,1); backdrop-filter: blur(6px); }
.toast-wrap.toast-hiding .toast-banner { animation: toastOut .2s ease forwards; }

/* Scrollbar halus untuk baris binder yang bisa discroll horizontal */
.custom-scrollbar::-webkit-scrollbar{height:7px;}
.custom-scrollbar::-webkit-scrollbar-track{background:rgba(15,23,42,.6);border-radius:4px;}
.custom-scrollbar::-webkit-scrollbar-thumb{background:rgba(245,158,11,.4);border-radius:4px;}
.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:rgba(245,158,11,.7);}
.custom-scrollbar{scrollbar-width:thin;}

/* Papan Catatan Tim -- kartu sticky note dimiringkan tipis gantian per index,
   biar kesannya ditempel tangan (bukan grid kaku), tapi balik lurus & sedikit
   membesar saat hover supaya tetap gampang dibaca. */
.sticky-card{ transform:rotate(-1.4deg); transition:transform .18s ease, box-shadow .18s ease; }
.sticky-card:nth-child(even){ transform:rotate(1.2deg); }
.sticky-card:nth-child(3n){ transform:rotate(-0.6deg); }
.sticky-card:hover{ transform:rotate(0deg) scale(1.03); box-shadow:0 6px 14px rgba(0,0,0,.35); z-index:1; position:relative; }

/* ================= Referensi Umum (Laci) -- strip kartu warna-warni gaya
   mockup rak berkas bertingkat digital yang diminta, TANPA sistem "Tingkat"
   seperti rak besi rutinitas. Nama kelas diberi prefix "ref-" biar tidak
   bentrok sama style rak/laci besi yang lain. ================= */
.ref-folder-bg-blue{ background:linear-gradient(135deg,#1d4ed8 0%,#2563eb 60%,#3b82f6 100%); border-color:#1e40af; }
.ref-folder-bg-green{ background:linear-gradient(135deg,#15803d 0%,#16a34a 60%,#22c55e 100%); border-color:#166534; }
.ref-folder-bg-yellow{ background:linear-gradient(135deg,#ca8a04 0%,#eab308 60%,#facc15 100%); border-color:#a16207; }
.ref-folder-bg-orange{ background:linear-gradient(135deg,#c2410c 0%,#ea580c 60%,#f97316 100%); border-color:#9a3412; }
.ref-folder-bg-red{ background:linear-gradient(135deg,#b91c1c 0%,#dc2626 60%,#ef4444 100%); border-color:#991b1b; }
.ref-folder-bg-purple{ background:linear-gradient(135deg,#5b21b6 0%,#7c3aed 60%,#a78bfa 100%); border-color:#4c1d95; }
.ref-folder-bg-teal{ background:linear-gradient(135deg,#115e59 0%,#0d9488 60%,#2dd4bf 100%); border-color:#134e4a; }
.ref-folder-bg-pink{ background:linear-gradient(135deg,#9d174d 0%,#db2777 60%,#f472b6 100%); border-color:#831843; }
.ref-spine-sticker{ background:#fff; border:1px solid #cbd5e1; box-shadow:inset 0 0 3px rgba(0,0,0,.15); }
.ref-notebook-spine{ background:repeating-linear-gradient(to right,#64748b,#64748b 4px,#0f172a 4px,#0f172a 10px); }
.ref-sticky-stack-yellow{ background:#fef08a; }
.ref-sticky-stack-pink{ background:#fbcfe8; }
.ref-sticky-stack-blue{ background:#bae6fd; }
.ref-sticky-stack-green{ background:#bbf7d0; }
.ref-laci-card{ box-shadow:0 4px 10px rgba(0,0,0,.3); }
/* Badan kabinet baja gelap -- senada .rak-stack/.locker-cabinet di rak besi
   rutinitas di atasnya, biar strip laci ini kelihatan masih nyambung/masih
   di dalam lemari besi yang sama, bukan kartu putih yang lepas sendiri. */
.ref-rack-material{ background:linear-gradient(180deg,#1e293b 0%,#0f172a 55%,#020617 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 18px 36px rgba(0,0,0,.5); }
.ref-rack-shelf{ background:linear-gradient(180deg,#334155 0%,#1e293b 70%,#0f172a 100%); border-bottom:3px solid #0f172a; box-shadow:inset 0 -2px 4px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.25); }
.ref-vent-slot{ width:14px; height:4px; background:#cbd5e1; border-radius:2px; box-shadow:inset 1px 1px 2px rgba(0,0,0,.2); display:block; }
/* Efek "menonjol keluar" persis mockup: hover naik sedikit. Klik beneran
   (.is-opening, ditambah lewat JS) narik laci keluar lebih jauh + bayangan
   di sisi kiri seolah lacinya beneran tergeser keluar dari badan kabinet,
   ditahan sebentar sebelum modal daftar filenya kebuka. */
.ref-folder-item{ transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; }
.ref-folder-item:hover{ transform:translateY(-3px) scale(1.01); box-shadow:0 10px 20px rgba(0,0,0,.25); }
.ref-folder-item:active{ transform:translateX(-10px) scale(1.02); box-shadow:0 12px 24px rgba(0,0,0,.35), 0 0 0 3px #3b82f6; }
.ref-folder-item.is-opening{
  transform:translateX(-26px) scale(1.05);
  box-shadow:0 20px 32px rgba(0,0,0,.5), 0 0 0 3px #3b82f6, -16px 4px 20px -6px rgba(0,0,0,.45);
  transition:transform .24s cubic-bezier(.22,.9,.38,1.1), box-shadow .24s ease;
}

/* Tooltip info dokumen -- muncul pas kursor lewat/hover di atas laci,
   biar nama lengkap kategori (yang di kartunya kepotong/truncate) tetap
   kebaca jelas tanpa perlu diklik dulu. Custom bubble (bukan tooltip
   bawaan browser) biar lebih jelas & seragam sama tema gudang arsipnya. */
[data-tooltip]{ position:relative; }
[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  transform:translateX(-50%) translateY(4px) scale(.96);
  background:#0f172a;
  color:#f8fafc;
  font-size:11px;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.4;
  white-space:normal;
  width:max-content;
  max-width:220px;
  text-align:center;
  padding:7px 10px;
  border-radius:9px;
  box-shadow:0 12px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:60;
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
}
[data-tooltip]::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(100% + 4px);
  transform:translateX(-50%) translateY(4px);
  border:6px solid transparent;
  border-top-color:#0f172a;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:60;
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
}
[data-tooltip]:hover::after,
[data-tooltip]:hover::before{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0) scale(1);
}
[data-tooltip]:hover::before{ transform:translateX(-50%) translateY(0); }
.ref-tray-item{ transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, border-color .2s ease; }
.ref-tray-item:hover{ transform:scale(1.02); border-color:#3b82f6; box-shadow:0 10px 20px rgba(0,0,0,.2); }
.ref-tray-item:active{ transform:translateY(-4px) scale(1.03); box-shadow:0 12px 22px rgba(0,0,0,.3), 0 0 0 3px #3b82f6; }

/* Binder spine — animasi "ditarik keluar" saat hover/fokus.
   position+z-index eksplisit supaya SELALU tampil di depan tiang besi
   dekoratif di tengah rak (shelf-post), bukan kepotong olehnya. */
.binder-spine{
  position:relative;
  z-index:2;
  transition:transform .28s cubic-bezier(.175,.885,.32,1.275), box-shadow .28s ease, filter .28s ease;
  transform-origin:bottom center;
}
.binder-spine:hover,.binder-spine:focus-visible{
  transform:translateY(-14px) scale(1.045) rotate(-1deg);
  box-shadow:0 20px 25px -5px rgba(0,0,0,.7), 0 10px 10px -5px rgba(0,0,0,.4);
  filter:brightness(1.08);
  z-index:30;
  outline:none;
}
.binder-spine:focus-visible{box-shadow:0 20px 25px -5px rgba(0,0,0,.7), 0 0 0 2px #f59e0b;}

/* Tekstur besi untuk tiang rak & balok penyangga (shelf plank) */
.shelf-post{background:linear-gradient(90deg,#1e293b 0%,#475569 35%,#64748b 50%,#334155 75%,#0f172a 100%);}
.shelf-plank{
  background:linear-gradient(180deg,#94a3b8 0%,#475569 20%,#334155 70%,#1e293b 100%);
  box-shadow:0 12px 20px -4px rgba(0,0,0,.8);
}

/* Lubang cincin besi (finger hole) pada binder */
.finger-hole{
  background:radial-gradient(circle at 35% 35%,#cbd5e1,#334155 60%,#020617 100%);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.9), 0 1px 2px rgba(255,255,255,.2);
}

/* ================= Overlay loading/buffering GLOBAL (index.php,
   #globalLoadingOverlay) -- ditampilkan pas navigasi halaman biasa/unduh
   ZIP/backup yang bisa makan waktu, biar kelihatan "lagi diproses" bukan
   "macet". Lihat tampilkanLoadingHalaman()/sembunyikanLoadingHalaman() di
   script.js. ================= */
.global-loading-overlay{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(2,6,23,.72);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  animation:global-loading-fade-in .15s ease;
}
/* PENTING: atribut HTML "hidden" biasanya dikalahkan otomatis oleh browser
   lewat aturan bawaannya sendiri ([hidden]{display:none}) yang levelnya
   USER-AGENT stylesheet -- tapi aturan .global-loading-overlay{display:flex}
   di atas ini levelnya AUTHOR stylesheet (punya kita), dan AUTHOR SELALU
   menang lawan USER-AGENT kalau spesifisitasnya sama, TIDAK PEDULI urutan
   filenya. Akibatnya overlay ini KETAHUAN NEMPEL TERUS di layar SETIAP kali
   halaman dibuka, walau atribut hidden-nya sudah benar dipasang -- inilah
   penyebab sebenarnya laporan "loading muter terus" / "aplikasi kelihatan
   macet", BUKAN soal performa/database. Baris di bawah ini kasih aturan
   KHUSUS buat kondisi ada atribut hidden (spesifisitasnya lebih tinggi dari
   .global-loading-overlay biasa), jadi overlay ini beneran hilang lagi
   begitu hidden dipasang balik oleh sembunyikanLoadingHalaman(). */
.global-loading-overlay[hidden]{
  display:none;
}
@keyframes global-loading-fade-in{from{opacity:0;}to{opacity:1;}}
.global-loading-card{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  background:#0f172a;
  border:1px solid rgba(245,158,11,.25);
  border-radius:20px;
  padding:28px 36px;
  box-shadow:0 20px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.global-loading-spinner{
  width:38px; height:38px; flex:0 0 auto;
  border-radius:50%;
  border:3.5px solid rgba(245,158,11,.18);
  border-top-color:#f59e0b;
  border-right-color:#fbbf24;
  animation:global-loading-spin .75s cubic-bezier(.5,.05,.5,.95) infinite;
}
@keyframes global-loading-spin{to{transform:rotate(360deg);}}
.global-loading-text{
  font-size:12.5px; font-weight:700; letter-spacing:.01em;
  color:#e2e8f0; text-align:center; max-width:220px;
}

/* Pratinjau Excel (.xlsx/.xls) inline pakai SheetJS -- tabel ala spreadsheet asli */
.xlsx-spinner{
  width:13px;height:13px;flex:0 0 auto;
  border:2px solid rgba(148,163,184,.35);
  border-top-color:#f59e0b;
  border-radius:50%;
  animation:xlsx-spin .7s linear infinite;
  display:inline-block;
}
@keyframes xlsx-spin{to{transform:rotate(360deg);}}

.xlsx-preview-body table{
  border-collapse:collapse;
  font-size:11.5px;
  color:#1e293b;
  width:max-content;
  min-width:100%;
}
.xlsx-preview-body table td{
  border:1px solid #d8dee8;
  padding:3px 7px;
  white-space:nowrap;
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.xlsx-preview-body table tr:first-child td{
  background:#f1f5f9;
  font-weight:700;
}
.xlsx-preview-body table tr:nth-child(even) td{background:#f8fafc;}

/* Pratinjau PowerPoint (.ppt/.pptx) inline pakai pptx-preview -- render slide
   jadi HTML persis di dalam kartu, skalakan biar pas dengan lebar kartunya
   sendiri (pustakanya merender dengan ukuran piksel tetap 960x540). */
.pptx-preview-canvas{
  transform-origin: top center;
  max-width:100%;
}
.pptx-preview-canvas > div{
  box-shadow:0 1px 6px rgba(0,0,0,.15);
}

/* Pratinjau PDF inline pakai PDF.js -- dirender jadi <canvas> per halaman
   (lihat loadPdfPreview() di script.js), ditumpuk vertikal & bisa discroll
   persis kayak buka PDF asli, jalan sama di HP maupun desktop. */
.pdf-preview-body{
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.pdf-preview-page{
  max-width:100%; height:auto; display:block;
  box-shadow:0 1px 6px rgba(0,0,0,.15);
  border:1px solid #e2e8f0;
}

/* Pratinjau Word (.docx) inline pakai mammoth.js -- library-nya cuma ngembaliin
   HTML polos tanpa style (p, h1-h6, ul/ol, table, strong/em apa adanya), dan
   base reset Tailwind menghapus margin bawaan heading/paragraf/list, jadi kalau
   dibiarkan hasilnya numpuk rapat semua tanpa jarak. Kelas di bawah cuma dipakai
   di dalam .docx-preview-content, tidak ganggu style Tailwind di tempat lain. */
.docx-preview-content{ font-size:13px; line-height:1.65; color:#1e293b; }
.docx-preview-content h1,
.docx-preview-content h2,
.docx-preview-content h3,
.docx-preview-content h4,
.docx-preview-content h5,
.docx-preview-content h6{ font-weight:700; margin:1.1em 0 .5em; color:#0f172a; }
.docx-preview-content h1{ font-size:1.5em; }
.docx-preview-content h2{ font-size:1.3em; }
.docx-preview-content h3{ font-size:1.15em; }
.docx-preview-content p{ margin:0 0 .85em; }
.docx-preview-content ul,
.docx-preview-content ol{ margin:0 0 .85em; padding-left:1.5em; }
.docx-preview-content ul{ list-style:disc; }
.docx-preview-content ol{ list-style:decimal; }
.docx-preview-content li{ margin:0 0 .25em; }
.docx-preview-content strong{ font-weight:700; }
.docx-preview-content em{ font-style:italic; }
.docx-preview-content table{ border-collapse:collapse; margin:0 0 .85em; font-size:.95em; }
.docx-preview-content table td,
.docx-preview-content table th{ border:1px solid #d8dee8; padding:4px 8px; }
.docx-preview-content img{ max-width:100%; height:auto; }
.docx-preview-content a{ color:#2563eb; text-decoration:underline; }

/* ==========================================================================
   Skala tampilan buat layar yang jauh lebih besar/kecil dari laptop biasa
   ========================================================================== */

/* Layar sangat lebar (monitor lebar, TV 42"+ yang dipakai sebagai monitor/
   dashboard). Tailwind pakai satuan rem, jadi menaikkan font-size root bikin
   semua spacing & teks ikut membesar proporsional tanpa harus ubah tiap kelas. */
@media (min-width: 1920px) {
  html { font-size: 17px; }
}
@media (min-width: 2560px) {
  html { font-size: 19px; }
}
@media (min-width: 3840px) {
  html { font-size: 23px; }
}

/* HP layar kecil (<=360px, mis. layar lama/kecil) -- rapatkan dikit biar nggak
   ada elemen yang kepotong/nabrak */
@media (max-width: 360px) {
  html { font-size: 14.5px; }
}



/* Supaya link "Buka Rak" (dari modal Rutinitas & Pengingat maupun filter lain)
   nggak mendaratkan judul rak tepat di belakang navbar yang sekarang freeze/sticky */
.tier {
  scroll-margin-top: 200px; /* header versi HP (3 baris, ketinggian ~191px) + jarak napas */
}
@media (min-width: 768px) {
  .tier {
    scroll-margin-top: 104px; /* header versi desktop (1 baris, ketinggian ~89px) + jarak napas */
  }
}

/* ==========================================================================
   Rak Arsip -- Tingkat (2 kategori berpasangan) / Slot (1 kategori) / Binder
   (12 binder tetap per slot, 1 per bulan Jan-Des tahun berjalan). Binder yang
   belum ada dokumennya tetap tampil (kosong, garis putus-putus) supaya rak
   kelihatan penuh & bisa langsung diklik buat upload ke bulan itu.
   ========================================================================== */
/* Seluruh rak dibungkus jadi SATU kabinet besi utuh -- bukan kotak-kotak
   terpisah per Tingkat kayak sebelumnya. .rak-stack jadi badan lemarinya
   (frame metal + overflow:hidden biar sudut atas/bawah ke-crop rapi),
   tiap .rak-tingkat cuma jadi "rak" di dalam badan itu (tanpa border/
   radius/background sendiri lagi), dipisahin plank metal beneran
   (.rak-tingkat-plank) antar tingkat -- bukan cuma gap kosong. */
.rak-stack{
  position:relative;
  background:linear-gradient(180deg, #1e293b 0%, #0b1220 100%);
  border:2px solid #334155; border-radius:16px 16px 8px 8px;
  box-shadow:0 18px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
}
.rak-stack::before{
  content:''; display:block; flex:none; height:10px;
  background:linear-gradient(180deg,#64748b 0%,#334155 55%,#1e293b 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 2px 4px rgba(0,0,0,.4);
}

.rak-tingkat{
  padding:14px 18px 16px;
}
.rak-tingkat:nth-child(odd){ background:rgba(255,255,255,.015); }
.rak-tingkat:nth-child(even){ background:rgba(0,0,0,.14); }

/* Plank/sekat horizontal antar Tingkat -- bilah metal beneran (bukan garis
   tipis atau gap), lengkap sama 2 "baut" di ujung kiri-kanan biar berasa
   besi asli. Ukuran margin dibikin pas negatif padding .rak-tingkat di
   atas biar plank-nya nempel rata tanpa celah dari kiri sampai kanan. */
.rak-tingkat-plank{
  position:relative;
  height:9px; margin:14px -18px -16px;
  background:linear-gradient(180deg,#64748b 0%,#334155 55%,#1e293b 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15), inset 0 -1px 0 rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.35);
}
.rak-tingkat-plank::before, .rak-tingkat-plank::after{
  content:''; position:absolute; top:50%; width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #cbd5e1, #475569 70%);
  box-shadow:0 1px 1px rgba(0,0,0,.6); transform:translateY(-50%);
}
.rak-tingkat-plank::before{ left:16px; }
.rak-tingkat-plank::after{ right:16px; }

.rak-tingkat-head{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.rak-tingkat-num{
  width:22px; height:22px; border-radius:6px; flex:none;
  background:linear-gradient(145deg,#475569,#1e293b); border:1px solid #64748b;
  display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:800;
  color:#f59e0b; box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 1px 2px rgba(0,0,0,.4);
}
.rak-tingkat-label{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#94a3b8; }
.rak-tingkat-line{ flex:1; height:1px; background:rgba(148,163,184,.18); }

.rak-tingkat-body{ display:flex; align-items:stretch; gap:0; }
/* flex-basis:0 + flex-grow:1 = ruang selalu dibagi rata sesuai JUMLAH slot yang
   benar-benar ada di baris itu -- 2 slot jadi 50/50, 1 slot (kategori ganjil,
   tanpa pasangan) otomatis melebar penuh 100%. Tidak perlu class .single lagi. */
.rak-slot{ flex:1 1 0%; min-width:0; padding:0 16px; }
.rak-slot:first-child{ padding-left:0; }
.rak-slot:last-child{ padding-right:0; }
/* 3 Okt 2026: AKAR masalah "rak naik-turun" yang sebenarnya -- BUKAN tinggi
   kotak binder (itu sudah disamakan di .rak-binder di atas), tapi tinggi
   HEADER di atas kotak rak (baris Slot 01/02 + nama kategori + badge status
   + tombol Unduh/Upload) beda-beda tingginya: kalau nama kategori panjang
   atau badge status-nya (mis. "Sudah Tahunan (NARU & RAPI) Ini") kepanjangan
   & tidak muat 1 baris, baris itu kebungkus jadi 2 baris (tinggi header jadi
   ~73px) -- sedangkan kategori sebelah dengan nama/badge pendek tetap 1
   baris (header ~36px). Karena SLOT 01 & SLOT 02 jalan sendiri-sendiri
   (bukan grid yang nyamain posisi per baris), kotak rak di bawah header yang
   2-baris jadi mulai lebih turun drpd kotak rak di sebelahnya yang headernya
   cuma 1 baris -- inilah yang kelihatan "naik-turun" pas dibandingkan
   kiri-kanan (align-items:stretch di .rak-tingkat-body cuma nyamain TINGGI
   TOTAL kolom, bukan posisi mulai kotak rak di dalamnya). Dikasih tinggi
   minimum yang cukup utk 2 baris supaya SEMUA header (mau isinya 1 baris
   atau 2 baris) selalu mulai+berakhir di tinggi yang sama, jadi kotak rak
   di bawahnya otomatis sejajar jg. */
.rak-slot > div:first-child{ min-height:73px; }
/* Skat vertikal tengah -- dibikin lebih tebal & bergradasi terang di
   tengahnya (kayak seng/besi kena cahaya) supaya antar Tingkat yang sudah
   rapat (tanpa gap) nyambung jadi satu garis skat yang kelihatan menerus
   dari atas ke bawah kabinet. */
.rak-slot-divider{
  width:2px; align-self:stretch; flex:none; margin:0 1px;
  background:linear-gradient(90deg, rgba(0,0,0,.5), rgba(148,163,184,.4) 40%, rgba(226,232,240,.3) 50%, rgba(148,163,184,.4) 60%, rgba(0,0,0,.5));
}
@media (max-width: 760px){
  .rak-tingkat-body{ flex-direction:column; gap:16px; }
  .rak-slot{ padding:0; }
  .rak-slot-divider{ display:none; }
}

.rak-slot-label{ font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.rak-code-chip{
  font-size:9px; font-weight:800; letter-spacing:.04em; padding:2px 6px; border-radius:6px;
  color:#fff; flex:none;
}
.rak-slot-name{ font-size:12px; font-weight:700; color:#f1f5f9; }
.rak-count-badge{ font-size:10px; font-weight:800; padding:3px 8px; border-radius:999px; color:#fff; flex:none; white-space:nowrap; }

/* Tombol "Unduh" (ZIP semua dokumen 1 kategori) di header tiap Slot rak --
   sengaja dikasih warna solid sendiri, BUKAN cuma andalkan bg-slate-800
   dari Tailwind, karena warna itu nyaris IDENTIK sama background kartu
   rak-nya sendiri (.rak-stack/.rak-tingkat, sama-sama sekitar #1e293b) --
   akibatnya tombolnya nge-blend & nyaris tak kelihatan kayak teks polos
   tanpa tombol sama sekali. Dikasih isian & garis yang jelas kontras di
   sini biar kelihatan seperti tombol beneran (tetap "kalem"/sekunder
   dibanding tombol Upload yang oranye solid). */
.rak-aksi-pill{
  /* Tailwind statis (assets/tailwind.min.css) hasil compile LAMA -- belum
     kebagian class pr-2.5 yang dipakai di tombol Unduh/Upload ini (kelas
     itu tidak dipakai di tempat lain yang sudah ke-compile), jadi padding
     kanannya kepotong jadi 0 walau HTML-nya sudah benar pl-2 pr-2.5 py-1.5.
     Akibatnya ikon+tulisan nempel ke pinggir kanan pil, kelihatan kurang
     center. Dikunci manual di sini (menang karena file ini di-load SETELAH
     tailwind.min.css) supaya paddingnya simetris tanpa perlu rebuild
     Tailwind. */
  padding:6px 10px 6px 8px;
}
.rak-aksi-unduh{
  background:#334155;
  border-color:#64748b;
  color:#e2e8f0;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.rak-aksi-unduh:hover{
  background:#475569;
  border-color:#94a3b8;
  color:#f8fafc;
}

.rak-shelf-box{
  background:#1e293b; border:1px solid #334155; border-radius:10px;
  padding:10px 8px 6px; box-shadow:inset 0 2px 6px rgba(0,0,0,.4); margin-top:4px;
}

/* Placeholder Slot 02 buat Tingkat yang jumlah kategorinya ganjil (belum ada
   pasangannya) -- biar tiap Tingkat tetap kelihatan 2 skat, sekaligus jadi
   ajakan buat nambah kategori rak baru lewat halaman Kelola Rak. */
.rak-slot-placeholder .rak-shelf-box-empty{
  min-height:130px; text-decoration:none; border:1.5px dashed #334155; cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
}
.rak-slot-placeholder .rak-shelf-box-empty:hover{
  border-color:#f59e0b; background:rgba(245,158,11,.06);
}
.rak-slot-placeholder .rak-shelf-box-empty:hover i{ color:#f59e0b; }
.rak-slot-placeholder .rak-shelf-box-empty:hover span{ color:#cbd5e1; }
.rak-binder-row{ display:flex; align-items:flex-end; gap:4px; min-height:128px; overflow-x:auto; padding-bottom:4px; }
.rak-binder{
  flex:none; width:27px; height:126px; border-radius:4px 4px 2px 2px; border:none;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  /* 3 Okt 2026: tinggi SEMUA jenis binder (kosong/.empty, belum
     terisi/.template, sudah terisi/.rak-binder-flip, DAN di-luar-tahun-
     aktif/.rak-binder-luar-tahun) disamakan ke 126px -- angka yang
     sebelumnya cuma dipakai khusus utk .rak-binder-luar-tahun (karena
     label-nya bisa sampai 3 baris: kode + bulan + "'th", lihat komentar
     di bawah). Dua percobaan sebelumnya (samakan ke 110px, lalu samakan
     padding-bottom) masih nyisain baris binder kelihatan naik-turun
     SETIAP KALI ada binder luar-tahun ikut nongol di baris yang sama
     (itu masih 16px lebih tinggi dari yang lain) -- jadi ini angka PALING
     TINGGI yang dibutuhkan SALAH SATU jenis binder, dipakai utk SEMUA
     biar baris apapun isinya (campur terisi/kosong/luar-tahun sekalipun)
     selalu rata sejajar dari atas, bukan cuma "hampir rata". */
  padding:5px 3px 9px; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow:1px 0 2px rgba(0,0,0,.35), inset -1px 0 2px rgba(255,255,255,.15);
}
.rak-binder:hover, .rak-binder:focus-visible{
  transform:translateY(-8px); box-shadow:0 10px 16px rgba(0,0,0,.45); filter:brightness(1.08); z-index:2; outline:none;
}
.rak-binder-sticker{
  background:#fff; width:100%; border-radius:2px; padding:2px 2px 3px; box-shadow:inset 0 0 2px rgba(0,0,0,.25); display:block;
  /* label panjang boleh kepotong, tapi tidak boleh menutupi/mendorong lubang status di bawahnya */
  flex:0 1 auto; min-height:0; overflow:hidden;
}
.rak-binder-hole{ position:relative; z-index:1; }
.rak-binder-sticker .bar{ height:5px; background:#b45309; border-radius:1px; margin-bottom:3px; display:flex; align-items:center; justify-content:center; }
.rak-binder-sticker .idx{
  font-size:6.8px; font-weight:900; color:#1e293b; text-align:center; line-height:1.3;
  border-top:1px solid #cbd5e1; padding-top:3px; letter-spacing:.01em;
}
.rak-binder-hole{
  width:11px; height:11px; border-radius:50%; margin-top:4px; flex:none;
  background:radial-gradient(circle, #09090b 45%, #71717a 75%, #d4d4d8 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.6), inset 0 1px 1px rgba(0,0,0,.8);
  border:1px solid #a1a1aa; display:flex; align-items:center; justify-content:center; color:#fff;
}
.rak-binder-hole i{ width:8px; height:8px; }
.rak-binder-hole .dot{ width:6px; height:6px; border-radius:50%; }
.rak-binder-hole .dot.rapi{ background:#34d399; box-shadow:0 0 4px #34d399; }
.rak-binder-hole .dot.pending{ background:#fbbf24; }
.rak-binder-hole .count{ font-size:7.5px; font-weight:900; color:#fff; }

/* Binder file bebas/campur2 (rak Campuran) bisa diseret bebas arah buat
   diatur urutannya sendiri, pakai kursor mouse ATAU jari di HP (lihat
   Pointer Events JS di script.js, fungsi simpanUrutanBebas) -- kursor
   grab/grabbing biar kelihatan bisa digeser, efek "terangkat" (agak besar
   & mengambang di atas binder lain) pas lagi ditahan/digeser.
   touch-action:none WAJIB ada -- tanpa ini, geser pakai jari di HP malah
   bikin HALAMANNYA yang ikut ke-scroll (perilaku bawaan touchmove di
   browser), bukan binder-nya yang pindah. */
.rak-binder-drag{ cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }
.rak-binder-drag:active{ cursor:grabbing; }
.rak-binder-drag.dragging{
  opacity:.92; box-shadow:0 10px 24px rgba(0,0,0,.45); cursor:grabbing;
  transition:none;
  /* SENGAJA TIDAK pakai pointer-events:none di sini (versi sebelumnya
     pakai) -- elemen ini sedang pegang pointer capture (lihat
     setPointerCapture() di script.js), jadi event pointer berikutnya
     SEHARUSNYA tetap terus terkirim ke elemen ini biarpun pointer-events
     dimatikan (itu aturan spec-nya). Tapi di beberapa versi Chrome Android
     yang lebih lama, kombinasi "pointer capture aktif" + "pointer-events:
     none" pada elemen yang sama bikin pengiriman event pointermove
     berikutnya BERHENTI DI TENGAH JALAN (macet begitu baru mulai diangkat,
     tidak lanjut ngikutin jari) -- ini kemungkinan besar penyebab laporan
     "geser binder belum bisa" di HP. Cukup buang pointer-events:none di
     sini (tidak ada fungsinya yang dipakai kode ini -- reorder-nya pakai
     perhitungan jarak/posisi, bukan lewat elemen di bawah kursor) buat
     hindari bug kompatibilitas itu sama sekali, tanpa kehilangan apa-apa. */
}
.rak-binder-drag.drop-target{ outline:2px dashed #f59e0b; outline-offset:2px; }

.rak-binder.empty{
  --rk: #64748b; --rk-bg: rgba(100,116,139,.16); --rk-bg2: rgba(100,116,139,.05);
  background:repeating-linear-gradient(135deg, var(--rk-bg) 0 6px, var(--rk-bg2) 6px 12px);
  border:1.5px dashed var(--rk);
}
.rak-binder.empty .rak-binder-sticker{ background:rgba(255,255,255,.9); }
.rak-binder.empty .rak-binder-sticker .bar{ background:var(--rk); opacity:.6; }
.rak-binder.empty .rak-binder-sticker .idx{ color:var(--rk); border-top-color:rgba(148,163,184,.4); font-weight:900; }
.rak-binder.empty .rak-binder-hole{
  background:transparent; box-shadow:none; border:1.5px dashed var(--rk); color:var(--rk);
}
.rak-binder.empty:hover{ border-color:#f59e0b; filter:brightness(1.15); }
.rak-binder.empty:hover .rak-binder-sticker .idx{ color:#f59e0b; }
.rak-binder.empty:hover .rak-binder-hole{ border-color:#f59e0b; color:#f59e0b; }

.rak-binder.template{
  background:repeating-linear-gradient(135deg, rgba(56,189,248,.16) 0 6px, rgba(56,189,248,.05) 6px 12px);
  border:1.5px dashed rgba(56,189,248,.6);
}
.rak-binder.template .rak-binder-sticker{ background:#e0f2fe; }
.rak-binder.template .rak-binder-sticker .idx{ color:#075985; border-top-color:#7dd3fc; }
.rak-binder.template .rak-binder-hole{ background:transparent; box-shadow:none; border:1.5px dashed #38bdf8; color:#38bdf8; }

/* Binder utk dokumen di LUAR tahun aktif kategori ini (mis. laporan lama
   yang baru diupload belakangan, ketutup krn kategori sudah py dokumen
   tahun lebih baru) -- dikasih garis putus-putus amber biar kelihatan beda
   dari binder bulan/kuartal biasa, bukan berarti rusak/error. */
.rak-binder.rak-binder-luar-tahun{ outline:1.5px dashed rgba(251,191,36,.85); outline-offset:1px; }
/* Binder luar-tahun label-nya 3 baris (kode + bulan + "'th", mis. "Sep '25")
   -- baris "'th"-nya suka kebungkus turun jadi baris sendiri krn kepotong
   lebar 27px, beda dari binder biasa yang cuma 2 baris (kode + bulan).
   Tanpa tambahan tinggi ini, baris ekstra itu bikin isi sticker+lubang jadi
   lebih dari muat di tinggi binder biasa (110px) -- lubang/bulatan status-nya
   jadi nongol/kepotong di bawah kotak binder (padahal .rak-binder-row rata
   bawah, jadi ini SATU-SATUNYA binder yg keluar batas bawahnya). Ditambah
   dikit di sini biar lubangnya balik masuk & sejajar sama binder lain. */
.rak-binder.rak-binder-luar-tahun.rak-binder-flip{ height:126px; padding-bottom:9px; } /* sudah sama dgn base di atas, dibiarkan biar jelas angka ini sengaja utk binder luar-tahun */

/* Binder yang sudah terisi dokumen (single atau grup) dikasih sedikit lebih
   tinggi supaya muat ikon tipe file kecil di bagian atas sticker-nya.
   (3 Okt 2026: tinggi dasar .rak-binder di atas sudah disamakan jadi 110px
   juga, supaya binder "Format" kosong/template yang belum terisi TIDAK lagi
   4px lebih pendek dari binder yang sudah terisi -- sebelumnya ini bikin
   baris binder kelihatan naik-turun/tidak rata kalau isi 1 rak campur
   terisi & belum terisi. Baris di bawah jadi redundan tapi sengaja
   dibiarkan biar jelas tinggi binder terisi itu segaris sama binder lain.) */
.rak-binder.rak-binder-flip{ height:126px; padding-bottom:9px; }

/* Binder bebas/campur2 (mis. PIA, Incident Report, Lain-lain) dibikin lebih
   LEBAR dari binder bulanan biasa (27px) -- soalnya isinya nama file asli
   yang jauh lebih panjang dari kode 3-4 huruf macam "RECT"/"Jan", jadi kalau
   dipaksa di lebar 27px tulisannya kepotong & bertumpuk tidak terbaca. */
.rak-binder-drag, .rak-binder-bebas-add{ width:52px; }
.rak-binder-drag .rak-binder-sticker .idx, .rak-binder-bebas-add .rak-binder-sticker .idx{
  font-size:8px; line-height:1.35; word-break:break-word;
}
/* 3 Okt 2026: dulu bar warna di sticker binder yang SUDAH TERISI dibikin
   lebih tebal (11px) drpd binder kosong/.empty/.template (5px) biar beda
   keliatan ada isinya -- tapi ini bikin tinggi kotak sticker-nya beda2,
   jadi garis atas tiap binder kelihatan naik-turun kalau 1 baris campur
   terisi & kosong (meskipun lubang status di bawahnya tetap rata krn
   justify-content:space-between). Disamakan ke tinggi bar normal (5px,
   lihat .rak-binder-sticker .bar di atas) biar SELURUH badan binder --
   bukan cuma lubang di bawahnya -- rata sejajar, bedanya cukup dari warna
   & ikon saja. */
.rak-binder.rak-binder-flip .rak-binder-sticker .bar{ height:5px; }

/* Tooltip custom buat SEMUA binder rak (dikontrol dari script.js, bukan
   tooltip bawaan browser pas hover attribut "title") -- alasannya dipasang
   position:fixed nempel ke <body> (bukan absolute ke tombol binder-nya)
   soalnya baris binder rak bisa discroll ke samping (overflow-x:auto di
   .rak-binder-row), yang otomatis bikin browser "memotong" apa pun yang
   nongol di luar baris itu kalau posisinya absolute -- termasuk tooltip.
   Posisi kiri/atas & arah panahnya dihitung dinamis lewat JS (getBoundingClientRect),
   biar selalu utuh kelihatan & pas nempel ke binder yang di-hover, di rak mana pun. */
#appTooltip{
  position:fixed; z-index:200; max-width:230px;
  background:#0f172a; color:#f8fafc; font-size:11px; font-weight:700;
  letter-spacing:.01em; line-height:1.45; text-align:center;
  padding:7px 10px; border-radius:9px;
  box-shadow:0 12px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(4px) scale(.96);
  transition:opacity .12s ease, transform .12s ease, visibility .12s;
}
#appTooltip.show{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
#appTooltip::after{
  content:""; position:absolute; left:50%; border:6px solid transparent;
  transform:translateX(-50%);
}
#appTooltip.arrow-top::after{ top:-12px; border-bottom-color:#0f172a; }
#appTooltip.arrow-bottom::after{ bottom:-12px; border-top-color:#0f172a; }

/* Zona drag & drop di modal upload -- bungkus input file biasa, kasih efek
   visual pas file di-drag di atasnya (dragover), supaya lebih jelas ada
   tempat buat "taruh" file selain klik tombol pilih file. */
.upload-drop-zone{
  border:1.5px dashed rgba(100,116,139,.5); border-radius:12px; padding:6px;
  transition:border-color .15s ease, background-color .15s ease;
}
.upload-drop-zone.drag-over{
  border-color:#f59e0b; background:rgba(245,158,11,.08);
}
.upload-drop-zone .upload-drop-hint{
  font-size:10px; color:#64748b; text-align:center; margin-top:6px; text-transform:none; font-weight:400; letter-spacing:normal;
}
.upload-drop-zone.drag-over .upload-drop-hint{ color:#f59e0b; font-weight:700; }

/* Progress bar upload (dikontrol via XHR di script.js, lihat #uploadForm) */
.upload-progress-wrap{ margin-top:2px; }
.upload-progress-track{ width:100%; height:8px; border-radius:999px; background:#1e293b; overflow:hidden; }
.upload-progress-bar{ height:100%; background:linear-gradient(90deg,#f59e0b,#fbbf24); border-radius:999px; transition:width .15s ease; }
.upload-progress-label{ font-size:10.5px; color:#94a3b8; margin-top:4px; text-align:center; }


/* Kalender tanggal (flatpickr) -- override warnanya biar senada sama palet
   amber/slate aplikasi, bukan tema default flatpickr. */
.flatpickr-calendar{ background:#0f172a !important; border:1px solid #1e293b !important; box-shadow:0 12px 28px rgba(0,0,0,.55) !important; border-radius:12px !important; }
.flatpickr-calendar.arrowTop:before{ border-bottom-color:#1e293b !important; }
.flatpickr-calendar.arrowTop:after{ border-bottom-color:#0f172a !important; }
.flatpickr-months, .flatpickr-weekdays{ background:#0f172a !important; }
.flatpickr-current-month{ color:#e2e8f0 !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months{ background:#0f172a !important; color:#e2e8f0 !important; }
.flatpickr-current-month input.cur-year{ color:#e2e8f0 !important; }
.flatpickr-months .flatpickr-month{ color:#e2e8f0 !important; fill:#e2e8f0 !important; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month{ color:#94a3b8 !important; fill:#94a3b8 !important; }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg{ fill:#f59e0b !important; }
.flatpickr-weekday{ background:#0f172a !important; color:#64748b !important; font-weight:700 !important; }
.flatpickr-day{ color:#cbd5e1 !important; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay{ color:#334155 !important; }
.flatpickr-day.today{ border-color:#f59e0b !important; }
.flatpickr-day:hover{ background:#1e293b !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus{ background:#f59e0b !important; border-color:#f59e0b !important; color:#0f172a !important; font-weight:800 !important; }
input[data-input]{ cursor:pointer; }

/* Navigasi paginasi Tingkat -- biar tidak perlu scroll panjang buat lihat
   semua tingkat, bisa lompat langsung per tingkat atau tampilkan semua. */
.rak-pagination{
  display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap;
}
.rak-page-nav{
  width:30px; height:30px; border-radius:8px; background:#0f172a; border:1px solid #1e293b;
  color:#94a3b8; display:flex; align-items:center; justify-content:center; flex:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.rak-page-nav:hover{ background:#1e293b; color:#f1f5f9; border-color:#334155; }
.rak-page-nav:disabled{ opacity:.35; cursor:not-allowed; }
.rak-page-nav:disabled:hover{ background:#0f172a; color:#94a3b8; border-color:#1e293b; }
.rak-page-chips{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.rak-page-chip{
  min-width:28px; height:28px; padding:0 8px; border-radius:7px; background:#0f172a;
  border:1px solid #1e293b; color:#94a3b8; font-size:11px; font-weight:800; flex:none;
}
.rak-page-chip:hover{ background:#1e293b; color:#f1f5f9; }
.rak-page-chip.is-active{ background:#f59e0b; border-color:#f59e0b; color:#1e293b; }
.rak-page-showall{
  margin-left:auto; font-size:14px; font-weight:800; color:#cbd5e1; text-decoration:underline;
  text-underline-offset:3px; padding:6px 4px;
}
.rak-page-showall:hover{ color:#f59e0b; }
.rak-page-showall.is-active{ color:#f59e0b; }
@media (max-width:640px){
  .rak-page-showall{ margin-left:0; flex-basis:100%; text-align:center; }
}

.rak-shelf-plank{
  height:8px; border-radius:3px; margin-top:6px;
  background:linear-gradient(180deg,#475569 0%,#1e293b 100%);
}

/* ==========================================================================
   Laci Dokumen & Informasi -- loker/kabinet arsip terpisah dari rak besi.
   Isinya map/folder dokumen (bukan binder spine berdiri), buat file yang
   sifatnya informasi umum/referensi (Dapot, SOP, kontak, dll), bukan arsip
   rutinitas mingguan/bulanan.
   ========================================================================== */

/* Badan loker/kabinet -- tekstur metal senada rak besi, tapi bingkai hangat
   (amber) biar kebedaan sama rak rutinitas dari kejauhan */
.locker-cabinet{
  background:linear-gradient(180deg,#0f172a 0%,#020617 100%);
}

/* Muka laci (drawer front) -- palang horizontal gelap ala kabinet baja,
   aksen emas cuma di kode/gembok/link biar kebedaan sama rak rutinitas
   dari kejauhan tapi nggak norak kayak versi lama yang full amber. */
.drawer-front{
  background:linear-gradient(180deg,#1e293b 0%,#0f172a 55%,#020617 100%);
  box-shadow:0 10px 18px -6px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08);
}
/* Bar dokumen laci -- warna cerah beda-beda sesuai tipe file (PDF merah,
   Excel hijau, Word biru, dst -- lihat gaya_tipe_file() di functions.php),
   ditata sebagai bar horizontal (bukan map berdiri lagi) biar gampang
   dibaca & rapi kayak label spidol warna-warni di rak dokumen fisik.
   Hover/fokus: geser dikit ke kanan + terang, meniru binder ditarik. */
.folder-card{
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.folder-card:hover,.folder-card:focus-visible{
  transform:translateX(5px);
  box-shadow:0 6px 16px -4px rgba(0,0,0,.5);
  filter:brightness(1.06);
  z-index:5;
  outline:none;
}
.folder-card:focus-visible{box-shadow:0 6px 16px -4px rgba(0,0,0,.5), 0 0 0 2px #f59e0b;}

/* Laci yang bisa dibuka/ditutup (klik muka laci) -- animasi geser + chevron
   berputar, meniru laci arsip beneran yang ditarik keluar/didorong masuk. */
.drawer-front{
  cursor:pointer;
  transition:filter .2s ease;
}
.drawer-front:hover{ filter:brightness(1.08); }
.drawer-front:active{ transform:translateY(1px); }

.drawer-chevron{
  transition:transform .35s cubic-bezier(.16,1,.3,1);
  transform:rotate(-90deg); /* tertutup: nunjuk ke kanan */
}
.drawer-container.is-open .drawer-chevron{
  transform:rotate(0deg); /* terbuka: nunjuk ke bawah */
}

/* Badge chevron dibikin keliatan kayak tombol beneran (bukan cuma ikon
   polos nyempil di antara ikon dekoratif lain) -- biar jelas ini yang
   diklik buat buka/tutup laci, bukan gembok/kunci/handle di sebelahnya. */
.drawer-toggle-badge{
  background:#1e293b;
  border:1px solid #38bdf8;
  box-shadow:0 0 0 3px rgba(56,189,248,.12);
  transition:background .2s ease, box-shadow .2s ease;
}
.drawer-front:hover .drawer-toggle-badge{
  background:#334155;
  box-shadow:0 0 0 4px rgba(56,189,248,.2);
}
.drawer-toggle-label::after{
  content:"Buka";
}
.drawer-container.is-open .drawer-toggle-label::after{
  content:"Tutup";
}

.drawer-container{
  perspective:1400px;
}
.drawer-tray{
  max-height:0;
  opacity:0;
  overflow:hidden;
  transform-origin:top center;
  transform:rotateX(-35deg) translateY(-6px) scaleY(.85);
  transition:max-height .5s cubic-bezier(.22,1,.36,1), opacity .4s ease, padding .4s ease,
             transform .5s cubic-bezier(.22,1,.36,1);
  padding-top:0; padding-bottom:0;
  /* dinding samping laci -- kesan dalam/rongga, bukan kotak datar */
  background-image:linear-gradient(90deg, rgba(0,0,0,.35) 0%, transparent 4%, transparent 96%, rgba(0,0,0,.35) 100%);
}
.drawer-container.is-open .drawer-tray{
  max-height:600px;
  opacity:1;
  transform:rotateX(0deg) translateY(0) scaleY(1);
}

.drawer-container:not(.is-open) .drawer-front{
  border-radius:0.75rem; /* laci tertutup: sudut bawah ikut membulat */
}

/* ==========================================================================
   Toggle susunan dokumen laci: horizontal (baris, scroll samping -- default)
   vs vertikal (bertumpuk ke bawah, model daftar/list biar gampang dibaca
   kalau dokumennya banyak).
   ========================================================================== */
.laci-layout-btn{ transition:background-color .15s ease, color .15s ease; }
.laci-layout-btn:hover:not(.is-active){ color:#7dd3fc; }

.laci-doc-grid{
  /* mode default ("horizontal"): bar boleh sejejer 2-3 kolom lalu wrap */
}
.laci-doc-grid:not(.laci-grid-mode) .folder-card{
  flex:1 1 260px;
}
.laci-doc-grid.laci-grid-mode{
  flex-direction:column;
  align-items:stretch;
  overflow-y:auto;
  max-height:420px;
}
.laci-doc-grid.laci-grid-mode .folder-card{
  flex:1 1 100%;
}

/* ==========================================================================
   Binder rak lebih "hidup" & interaktif -- kilau plastik, sandaran natural
   antar binder, dan feedback "ditekan" ala menarik binder beneran dari rak.
   Sengaja di-scope :not(.folder-card) supaya cuma kena binder rak (Tingkat),
   bukan kartu map dokumen laci yang sudah punya gaya sendiri.
   ========================================================================== */
.binder-spine:not(.folder-card)::before{
  content:"";
  position:absolute;
  top:3px; bottom:3px; left:14%;
  width:18%;
  background:linear-gradient(90deg, rgba(255,255,255,.45), rgba(255,255,255,0) 80%);
  border-radius:3px;
  opacity:.55;
  pointer-events:none;
  transition:opacity .25s ease;
}
.binder-spine:not(.folder-card):hover::before{ opacity:.9; }

.binder-spine:not(.folder-card)::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.4) 50%, transparent 58%);
  background-size:260% 260%;
  background-position:-160% -160%;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease, background-position .7s cubic-bezier(.22,1,.36,1);
}
.binder-spine:not(.folder-card):hover::after{
  opacity:1;
  background-position:160% 160%;
}

.binder-spine:not(.folder-card):nth-child(4n+1){ transform:rotate(-.6deg); }
.binder-spine:not(.folder-card):nth-child(4n+2){ transform:rotate(.4deg); }
.binder-spine:not(.folder-card):nth-child(4n+3){ transform:rotate(-.3deg); }
.binder-spine:not(.folder-card):nth-child(4n){ transform:rotate(.5deg); }

/* Spesifisitas rotasi sandaran statis di atas sengaja dibikin setara +
   ditulis lebih dulu dari blok ini, supaya hover/tekan di bawah ini PASTI
   menang dan binder beneran ke-lift (bukan cuma shadow/warnanya doang yang
   berubah, transform-nya juga harus ikut). */
.binder-spine:not(.folder-card):hover,
.binder-spine:not(.folder-card):focus-visible{
  transform:translateY(-14px) scale(1.045) rotate(-1deg);
}
.binder-spine:not(.folder-card):active{
  transform:translateY(-8px) scale(.99) rotate(0deg);
  filter:brightness(1.03);
  transition-duration:.08s;
}

.binder-spine.cursor-pointer{ cursor:grab; }
.binder-spine.cursor-pointer:active{ cursor:grabbing; }

/* Feedback "ditekan" versi bar dokumen laci juga (folder-card ikut kelas
   binder-spine), dispesifikkan biar menang dibanding hover geser yang
   sudah ada. */
.folder-card.binder-spine:active{
  transform:translateX(5px) scale(.99);
  transition-duration:.08s;
}

/* ================= BINDER 3D (mode lihat dokumen: buka binder, balik
   halaman satu-satu kayak buku beneran) =================
   Struktur: #modalBinderFlip > .binder-flip-wrap (kartu) berisi topbar info,
   .binder-open-cover (panggung 3D: sampul kiri + engsel ring + tumpukan
   halaman kanan), lalu nav Sebelumnya/Selanjutnya. Tiap dokumen jadi satu
   .flip-page; klik Selanjutnya membalik halaman paling atas (rotateY -180deg)
   dari kanan ke kiri, persis buku/binder fisik yang dibuka. */

@keyframes binderFlipOpen{
  0%{ opacity:0; transform:perspective(1800px) rotateX(8deg) scale(.92); }
  100%{ opacity:1; transform:perspective(1800px) rotateX(0deg) scale(1); }
}

.binder-flip-wrap{
  position:relative;
  /* Diperbesar (1 Okt 2026) biar di PC layar lebar flip book lebih lega: dulu mentok 1320px lebar
     & 900px tinggi. Di HP tetap menyesuaikan (lihat @media max-width:640px di bawah). */
  width:100%; max-width:min(97vw, 1900px);
  /* Kartu ini dulu tingginya cuma ngikutin isi (topbar + panggung 3D + nav)
     tanpa batas atas -- buat dokumen yang banyak sheet/baris (mis. Report
     Battery, 71 halaman), tinggi totalnya gampang lebih dari tinggi layar,
     dan karena modal-overlay-nya nge-center pakai flex, kelebihannya
     kepotong rata di atas & bawah -- korbannya nav Sebelumnya/Selanjutnya
     di paling bawah, jadi ketutup/ke luar layar padahal isinya baik-baik
     saja. Dikunci max-height + jadi flex column, biar panggung 3D-nya
     (.binder-open-cover) yang fleksibel menciut duluan, sementara topbar &
     nav di atas/bawahnya SELALU kelihatan penuh berapa pun banyak halaman
     dokumennya. */
  /* Tinggi kartu dikunci EKSPLISIT (bukan cuma dibatasi max-height) supaya
     panggung 3D-nya (.binder-open-cover, flex:1 di bawah) selalu dapat
     jatah ruang besar buat mengisi -- kalau cuma max-height doang, kartu
     ini ikut menciut sekecil isinya (dokumen pendek jadi kelihatan kecil
     banget, ruang kosong di sekelilingnya kebuang percuma). Tetap dibatasi
     ke tinggi layar (min(...)) biar topbar & nav Sebelumnya/Selanjutnya di
     atas/bawahnya tidak pernah kepotong keluar layar walau dokumennya
     panjang (mis. Report Battery, 71 halaman).
  */
  height:min(95vh, 1300px);
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#0f172a 0%,#0b1220 100%);
  border:1px solid #1e293b; border-radius:20px;
  padding:14px 14px 16px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  animation:binderFlipOpen .45s cubic-bezier(.22,1,.36,1);
}

.binder-flip-close{
  position:absolute; top:10px; right:10px; z-index:20;
  width:30px; height:30px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:#1e293b; border:1px solid #334155; color:#94a3b8;
  transition:color .15s ease, background .15s ease, border-color .15s ease;
}
.binder-flip-close:hover{ color:#fff; background:#334155; border-color:#475569; }

.binder-flip-topbar{
  flex:none;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:2px 34px 12px 2px;
  border-bottom:1px solid #1e293b; margin-bottom:12px;
}
.binder-flip-info{ display:flex; align-items:center; gap:10px; min-width:0; }
.binder-flip-code{
  flex:none; font-size:10.5px; font-weight:800; letter-spacing:.04em;
  padding:5px 9px; border-radius:8px; color:#fff; background:#334155;
}
.binder-flip-info-text h3{ font-size:13px; font-weight:800; color:#fff; margin:0; }
.binder-flip-info-text p{ font-size:11px; color:#94a3b8; margin:1px 0 0; }
.binder-flip-sound{
  flex:none; width:32px; height:32px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:#1e293b; border:1px solid #334155; color:#94a3b8;
  transition:color .15s ease, background .15s ease;
}
.binder-flip-sound:hover{ color:#fbbf24; }
.binder-flip-sound.is-muted{ color:#64748b; }

/* ---- panggung 3D: sampul kiri (tertutup) + engsel ring + tumpukan
   halaman kanan (belum dibaca) ---- */
.binder-open-cover{
  position:relative;
  display:flex; align-items:stretch;
  /* flex:1 + min-height:0 -- otomatis MENGISI PENUH sisa ruang di dalam
     .binder-flip-wrap (yang tingginya sudah dikunci di atas) setelah
     topbar & nav dapat jatah tempatnya duluan. min-height:0 penting di
     sini (bukan default 'auto' bawaan flex item) supaya panggung ini boleh
     menciut lebih kecil dari konten flip-page di dalamnya kalau perlu --
     tanpa ini flexbox akan maksa induknya melar mengikuti isi, balik lagi
     ke masalah semula (nav kepotong keluar layar). */
  flex:1 1 auto; min-height:0;
  perspective:1800px;
  border-radius:12px;
  /* Dulu overflow:visible -- tapi begitu flip-book-container dilebarkan
     penuh (sampul kiri dihapus), sisi belakang halaman yang lagi kebalik
     (rotateY 180deg, transform-origin di kiri) jadi "nyeruak" keluar ke
     kiri modal, melayang di luar jalurnya sendiri. Dikunci hidden supaya
     animasi baliknya tetap jalan tapi nggak lagi bocor keluar kotak. */
  overflow:hidden;
}

.binder-cover-left{
  /* Sampul dekoratif dimatikan -- kontennya sekarang langsung pakai lebar
     penuh modal (bukan cuma setengah), sesuai permintaan biar nggak ada
     ruang yang kebuang percuma buat tabel/pratinjau yang lebar. */
  display:none;
}
.binder-cover-left-inner{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:rgba(255,255,255,.85); text-align:center; padding:0 14px;
}
.binder-cover-left-inner span{
  font-size:11px; font-weight:800; letter-spacing:.03em;
  max-width:180px; line-height:1.35;
}

.ring-mechanism{
  /* Ring engsel cuma relevan kalau ada sampul di sebelahnya -- ikut
     disembunyikan bareng .binder-cover-left di atas. */
  display:none;
}
.ring-loop{
  width:16px; height:22px; border-radius:8px;
  background:linear-gradient(135deg,#e2e8f0 0%,#94a3b8 45%,#475569 100%);
  border:1px solid #cbd5e1;
  box-shadow:0 2px 4px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.6);
}

.flip-book-container{
  flex:1 1 100%; min-width:0; position:relative;
  transform-style:preserve-3d;
  border-radius:10px;
  box-shadow:0 14px 30px -8px rgba(0,0,0,.45);
}

.flip-page{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transform-origin:left center;
  transition:transform .75s cubic-bezier(.645,.045,.355,1);
  will-change:transform;
}
.flip-page.flipped{ transform:rotateY(-180deg); }
.flip-page.is-active{ z-index:900 !important; }

.page-front, .page-back{
  position:absolute; inset:0;
  backface-visibility:hidden;
  border-radius:10px;
  background:#f8fafc;
  display:flex; flex-direction:column;
  padding:14px 14px 12px;
  overflow:hidden;
}
.page-back{
  transform:rotateY(180deg);
  background:
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(15,23,42,.05) 27px 28px),
    #f1f5f9;
  display:flex; align-items:center; justify-content:center;
}
.page-back::before{
  content:'';
  width:70%; height:70%; border-radius:8px;
  border:1.5px dashed rgba(15,23,42,.12);
}
/* Kartu "Selesai" di sisi belakang halaman PALING TERAKHIR (diisi lewat JS,
   lihat mountFlipPages di script.js) -- ::before di atas (kotak putus-putus
   polos) otomatis ketutup/tidak kelihatan begitu kartu ini ada isinya,
   karena konten di dalam page-back ini berada di atasnya (document order). */
.page-back-selesai{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
  gap:6px; text-align:center; padding:0 16px;
}
.page-back-selesai-icon{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--flip-color,#475569); color:#fff;
  box-shadow:0 6px 14px -4px rgba(0,0,0,.35);
}
.page-back-selesai-judul{ font-size:15px; font-weight:800; color:#0f172a; margin:2px 0 0; }
.page-back-selesai-sub{ font-size:11.5px; color:#64748b; margin:0; line-height:1.5; }
.page-back-selesai-ulang{
  margin-top:8px; display:flex; align-items:center; gap:5px; font-size:11px; font-weight:800;
  color:#334155; background:#fff; border:1.5px solid rgba(15,23,42,.15); border-radius:999px;
  padding:6px 12px; cursor:pointer; transition:transform .1s, box-shadow .15s, filter .15s;
}
.page-back-selesai-ulang:hover{ filter:brightness(0.97); box-shadow:0 0 0 3px rgba(0,0,0,.05); }
.page-back-selesai-ulang:active{ transform:scale(0.96); }

.page-front{ border-top:5px solid var(--flip-color,#475569); }
/* Halaman virtual penutup "Selesai" di akhir binder (ditambahkan lewat JS,
   lihat mountFlipPages di script.js) -- isinya cuma 1 kartu di tengah,
   beda dari halaman dokumen biasa yang isinya rata atas & banyak baris. */
.page-front-penutup{ align-items:center; justify-content:center; }
.page-front-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.page-badge{
  font-size:10.5px; font-weight:800; letter-spacing:.05em; color:#fff;
  padding:3.5px 9px; border-radius:999px; background:var(--flip-color,#475569);
}
.page-status{
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  padding:3px 8px; border-radius:999px;
}
.page-status.rapi{ background:#d1fae5; color:#059669; }
.page-status.pending{ background:#fef3c7; color:#b45309; }
/* Badge status di halaman flip yang bisa DIKLIK LANGSUNG (lihat
   statusBadgeHtml di script.js) -- cuma dirender begini kalau sudah login;
   tamu tetap dapat <span> polos (tidak match .page-status-btn, tidak
   interaktif). Kasih afordansi jelas (cursor, hover, active) + state
   disabled sesaat pas requestnya lagi jalan biar tidak diklik dobel. */
.page-status-btn{
  cursor:pointer; border:1.5px solid transparent; transition:transform .1s,box-shadow .15s,filter .15s;
}
.page-status-btn:hover{ filter:brightness(0.95); box-shadow:0 0 0 3px rgba(0,0,0,.06); }
.page-status-btn:active{ transform:scale(0.96); }
.page-status-btn:disabled{ cursor:wait; opacity:.65; }
.page-status-btn.rapi{ border-color:rgba(5,150,105,.35); }
.page-status-btn.pending{ border-color:rgba(180,83,9,.35); }
/* Badge status buat TAMU (belum login) -- tetap kelihatan status rapi/
   belumnya (warna sama), tapi ditandai jelas TIDAK bisa diklik/diubah
   (ikon gembok + cursor not-allowed + sedikit pudar) supaya tidak
   dikira ngadat pas disentuh/diklik tidak ada reaksi. */
.page-status-locked{ cursor:not-allowed; opacity:.85; }

.page-title{
  font-size:14px; font-weight:800; color:#0f172a; margin:10px 0 3px;
  line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.page-meta{ font-size:11px; color:#64748b; font-family:monospace; margin:0 0 8px; }
.page-note{
  font-size:12px; color:#334155; line-height:1.55; margin:0 0 8px;
  flex:1; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
}
.page-empty-note{ font-size:11px; color:#94a3b8; font-style:italic; margin:0 0 8px; }

/* Tombol besar "Tandai Rapi & Lanjut" -- target sentuh yang gampang
   dikenai jempol di HP (dibanding badge kecil di pojok atas), biar alur
   cek-rapi-satu-satu lebih cepat & tidak sering meleset diketuk. */
.page-foot-wrap{ margin-top:auto; display:flex; flex-direction:column; gap:8px; padding-top:2px; }
.page-actions{ }
.page-toggle-status-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:13px; font-weight:800; padding:12px 16px; border-radius:12px;
  border:1.5px solid transparent; cursor:pointer;
  transition:filter .15s ease, transform .1s ease, box-shadow .15s ease;
}
.page-toggle-status-btn.is-pending{ background:#059669; color:#fff; box-shadow:0 4px 14px rgba(5,150,105,.35); }
.page-toggle-status-btn.is-pending:hover{ filter:brightness(1.08); }
.page-toggle-status-btn.is-rapi{ background:#f1f5f9; color:#475569; border-color:#cbd5e1; }
.page-toggle-status-btn.is-rapi:hover{ background:#e2e8f0; }
.page-toggle-status-btn:active{ transform:scale(.97); }
.page-toggle-status-btn:disabled{ opacity:.6; cursor:wait; }

.page-foot{
  padding-top:8px; border-top:1px dashed #e2e8f0;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.page-num{ font-size:9.5px; color:#94a3b8; font-family:monospace; flex:none; }
.page-open-btn{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:800; color:#fff;
  background:var(--flip-color,#475569); padding:8px 14px; border-radius:9px;
  box-shadow:0 4px 12px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.15) inset;
  transition:filter .15s ease, transform .1s ease, box-shadow .15s ease;
  animation:pageOpenBtnBreathe 2.4s ease-in-out infinite;
}
.page-open-btn:hover{ filter:brightness(1.15); box-shadow:0 6px 16px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.25) inset; animation:none; transform:scale(1.04); }
.page-open-btn:active{ transform:scale(.96); }
@keyframes pageOpenBtnBreathe{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.045); }
}

.binder-flip-nav{
  flex:none;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:14px;
}
.binder-flip-navbtn{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:800; color:#e2e8f0;
  background:#1e293b; border:1px solid #334155; border-radius:10px;
  padding:8px 14px;
  transition:background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}
.binder-flip-navbtn:hover:not(:disabled){ background:#334155; border-color:#475569; }
.binder-flip-navbtn:disabled{ opacity:.35; cursor:default; }
.binder-flip-counter{ font-size:11px; font-family:monospace; color:#94a3b8; flex:none; }

@media (max-width:640px){
  .binder-flip-wrap{ max-width:100%; }
  .binder-open-cover{ min-height:220px; max-height:60vh; }
  .binder-cover-left-inner span{ display:none; }
  .ring-loop{ width:12px; height:16px; }
  .page-title{ font-size:11.5px; }
  .page-note{ -webkit-line-clamp:3; }
  .binder-flip-navbtn span{ display:none; }
}

/* ---- Binder 3D: dokumen Excel (.xlsx/.xls) dipecah otomatis jadi 1 halaman
   flip per SHEET di dalam filenya (mis. "Pengukuran UPS.xlsx" yang isinya
   banyak sheet bulanan jadi banyak halaman, bukan cuma 1 halaman per file
   yang diupload). Selagi sheet-nya dibaca (SheetJS, di browser), tampilkan
   status loading dulu di tempat tumpukan halaman. ---- */
.flip-loading{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  gap:8px; font-size:11px; color:#64748b; font-style:italic;
  background:#f8fafc; border-radius:3px 10px 10px 3px;
}

.page-title-sm{ font-size:13px; margin:7px 0 7px; -webkit-line-clamp:1; }

.page-front-sheet{ padding-bottom:10px; }
.page-sheet-table{
  flex:1; min-height:0; overflow:auto;
  border:1px solid #e2e8f0; border-radius:6px; margin-bottom:8px; background:#fff;
}
.page-sheet-table table{
  border-collapse:collapse; font-size:10.5px; width:max-content; min-width:100%; color:#1e293b;
}
.page-sheet-table td{
  border:1px solid #e2e8f0; padding:4px 7px; white-space:nowrap;
  max-width:160px; overflow:hidden; text-overflow:ellipsis;
}
.page-sheet-table tr:first-child td{ background:#f1f5f9; font-weight:800; }
.page-sheet-table tr:nth-child(even) td{ background:#f8fafc; }

/* ---- Binder 3D: dokumen PDF / gambar / PowerPoint ditampilkan visual asli
   (bukan cuma kartu info kayak sebelumnya) -- biar denah/layout kelihatan
   isinya langsung di halaman binder, sama kayak sheet Excel di atas. ---- */
.page-front-media{ padding-bottom:10px; }
.page-media-wrap{
  flex:1; min-height:0; overflow:auto;
  border:1px solid #e2e8f0; border-radius:6px; margin-bottom:8px;
  background:#fff; display:flex; align-items:center; justify-content:center;
}
.page-media-wrap iframe{ width:100%; height:100%; border:0; display:block; }
.page-media-wrap img{ max-width:100%; max-height:100%; object-fit:contain; display:block; margin:auto; }
.page-media-wrap .pptx-preview{ width:100%; padding:6px; }
.page-media-wrap .pptx-preview-body{ width:100%; display:flex; align-items:flex-start; justify-content:center; }
.page-media-wrap .pdf-preview{ width:100%; padding:6px; height:100%; overflow:auto; }
.page-media-wrap .pdf-preview-body{ width:100%; }

/* ---- drag & drop urutan kategori (kategori.php & kategori_laci.php) ---- */
.kategori-item{ transition: opacity .12s ease; }
.kategori-item.dragging{ opacity:.35; }
.drag-handle{ cursor:grab; }
.drag-handle:active{ cursor:grabbing; }

/* ============================================================
 * KABINET LACI FISIK -- "Referensi Umum (Laci)" di index.php.
 * Satu kabinet (.laci-cabinet-shell / .ref-rack-material) berisi beberapa
 * laci (.ref-kabinet.laci-drawer-slot) ditumpuk ke bawah, tiap laci bisa
 * ditarik keluar/ditutup sendiri (toggle class .is-open, lihat JS di
 * index.php). Isi tiap laci = Map (.ref-folder-item, TIDAK berubah fungsi
 * lihat/unduh dokumennya sama sekali), dibungkus .hanging-map-card supaya
 * kelihatan seperti folder gantung di rel laci.
 * ============================================================ */

.laci-cabinet-shell{ overflow:hidden; }

.laci-drawer-slot{
  position:relative;
  background:#020617;
  border-radius:14px;
  border:2px solid #1e293b;
  box-shadow:inset 0 6px 16px rgba(0,0,0,.9);
}

.laci-side-rail{
  position:absolute; top:44px; width:8px; height:0; border-radius:4px;
  background:linear-gradient(90deg,#475569,#cbd5e1,#94a3b8,#334155);
  box-shadow:inset 0 0 5px rgba(0,0,0,.8), 0 4px 8px rgba(0,0,0,.5);
  opacity:0; transition:height .45s ease .05s, opacity .3s ease; z-index:5; pointer-events:none;
}
.laci-drawer-slot.is-open .laci-rail-left{ left:-6px; height:calc(100% - 70px); opacity:1; }
.laci-drawer-slot.is-open .laci-rail-right{ right:-6px; height:calc(100% - 70px); opacity:1; }

.laci-drawer-tray{
  position:relative; transition:transform .5s cubic-bezier(.16,1,.3,1); transform:translateZ(0); z-index:10;
}
.laci-drawer-slot.is-open .laci-drawer-tray{ transform:translateY(3px); }

.laci-drawer-front{
  display:flex; align-items:center; justify-content:space-between; gap:6px 12px;
  flex-wrap:wrap;
  background:linear-gradient(180deg,#1e293b 0%,#0f172a 100%);
  border:2px solid #334155; border-radius:12px; padding:12px 14px;
  cursor:pointer; user-select:none;
  box-shadow:0 8px 18px rgba(0,0,0,.45), inset 0 1px 2px rgba(255,255,255,.12);
  transition:border-color .2s ease, background .2s ease;
}
/* Kalau kartu Kabinet sempit (banyak Kabinet sebaris), badge status +
   chevron turun ke baris sendiri di bawah nama Laci -- BUKAN nge-gencet
   nama Laci sampai lebarnya 0 & tulisannya hilang. Badge tetap rata kanan
   lewat margin-left:auto walau sendirian di barisnya. */
.laci-drawer-front > div:first-child{ flex:1 1 130px; min-width:0; }
.laci-drawer-front > div:last-child{ flex:0 0 auto; margin-left:auto; }
.laci-drawer-front:hover{ border-color:#3b82f6; background:linear-gradient(180deg,#26354a 0%,#131d31 100%); }
.laci-drawer-front:focus-visible{ outline:2px solid #3b82f6; outline-offset:2px; }

.laci-drawer-handle{
  flex:none; width:52px; height:14px; border-radius:6px;
  background:linear-gradient(180deg,#94a3b8 0%,#334155 50%,#0f172a 100%);
  border:1px solid #cbd5e1;
  box-shadow:inset 0 1px 3px rgba(255,255,255,.7), 0 3px 6px rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
}
.laci-drawer-handle-inner{ width:32px; height:3px; background:#020617; border-radius:2px; box-shadow:inset 0 1px 2px rgba(0,0,0,.8); }

.laci-drawer-name{ font-size:.8rem; font-weight:800; color:#f1f5f9; }
.laci-drawer-front:hover .laci-drawer-name{ color:#7dd3fc; }
.laci-drawer-desc{ font-size:.66rem; color:#94a3b8; margin-top:1px; }

.laci-status-badge{
  display:flex; align-items:center; gap:6px; font-size:.62rem; font-weight:700;
  padding:4px 9px; border-radius:7px; background:#1e293b; color:#94a3b8; border:1px solid #334155;
}
.laci-status-dot{ width:7px; height:7px; border-radius:999px; background:#64748b; }
.laci-drawer-slot.is-open .laci-status-badge{ background:rgba(6,78,59,.5); color:#34d399; border-color:rgba(16,185,129,.4); }
.laci-drawer-slot.is-open .laci-status-dot{ background:#34d399; box-shadow:0 0 6px #34d399; }

.laci-drawer-arrow{ color:#94a3b8; transition:transform .3s ease; }
.laci-drawer-slot.is-open .laci-drawer-arrow{ transform:rotate(180deg); color:#7dd3fc; }

.laci-drawer-interior{
  /* grid-template-rows 0fr -> 1fr dipakai GANTI max-height -- jauh lebih
     ringan buat browser (tidak perlu paksa hitung layout sepanjang angka
     sembarangan seperti 2400px tiap frame animasi), terutama pas Laci-nya
     berisi banyak Map sekaligus. */
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .5s cubic-bezier(.16,1,.3,1), opacity .3s ease, margin .35s ease;
  background:radial-gradient(circle at center,#0a1120,#020617);
  border-radius:0 0 12px 12px; border:1px solid rgba(255,255,255,.05); border-top:none;
}
.laci-drawer-slot.is-open .laci-drawer-interior{ grid-template-rows:1fr; opacity:1; margin-top:6px; }
.laci-drawer-interior-inner{ overflow:hidden; min-height:0; }

.laci-drawer-interior-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px 8px; font-size:.62rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:#94a3b8; border-bottom:1px solid rgba(148,163,184,.15);
}
.laci-drawer-interior-head i{ color:#60a5fa; margin-right:4px; vertical-align:-2px; }

.hanging-folders-container{ display:flex; flex-direction:column; gap:10px; padding:10px 10px 4px; }

/* Kartu map "digantung" -- efek rel/steel bar di atas tiap ref-folder-item
   lewat ::before, TANPA menambah markup baru (biar data-open/data-search/
   tooltip di elemen aslinya tidak perlu diutak-atik). */
.hanging-map-card{ position:relative; opacity:0; transform:translateY(-10px) scale(.97); transition:opacity .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1); }
.laci-drawer-slot.is-open .hanging-map-card{ opacity:1; transform:translateY(0) scale(1); }
.hanging-map-card::before{
  content:''; display:block; position:absolute; left:0; right:0; top:-5px; height:6px; z-index:1;
  background:linear-gradient(90deg,#64748b,#f1f5f9 20%,#cbd5e1 50%,#f1f5f9 80%,#64748b);
  border-radius:3px; box-shadow:0 2px 5px rgba(0,0,0,.6);
}
.hanging-map-card .ref-folder-item{ margin-top:2px; border-radius:4px 4px 10px 10px; }

.laci-tambah-map-link{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:4px 10px 10px; padding:8px; border-radius:10px;
  border:1px dashed rgba(56,189,248,.35); color:#7dd3fc; font-size:.68rem; font-weight:700;
  background:rgba(14,165,233,.06); transition:background .2s ease, border-color .2s ease;
}
.laci-tambah-map-link:hover{ background:rgba(14,165,233,.14); border-color:rgba(56,189,248,.6); }

.laci-cabinet-wheel{
  position:absolute; bottom:-11px; z-index:1;
  width:26px; height:8px; display:block;
  background:#0f172a; border:1px solid #334155;
  border-radius:0 0 8px 8px;
  box-shadow:0 4px 6px rgba(0,0,0,.4);
}
.laci-cabinet-wheel-left{ left:16px; }
.laci-cabinet-wheel-right{ right:16px; }

/* Grup "Belum Dikelompokkan" (map yang belum ditaruh di laci manapun) --
   dikasih aksen amber tipis biar beda dari laci sungguhan, dorong admin
   buat segera dikelompokkan lewat Kelola Map. */
.laci-drawer-slot-lain{ border-color:#78350f; }
.laci-drawer-slot-lain .laci-drawer-front{ border-color:#92400e; }
.laci-drawer-slot-lain .laci-drawer-name{ color:#fbbf24; }

/* ============================================================
 * KABINET BESI (tingkat teratas) -- membungkus beberapa Laci
 * (.ref-kabinet.laci-drawer-slot) ditumpuk ke bawah di dalam satu bodi
 * lemari besi berdiri sendiri (frame + roda sendiri, lihat
 * .laci-cabinet-wheel). Beberapa Kabinet disusun berjajar lewat CSS GRID
 * (bukan flexbox) -- auto-fit + minmax menghitung sendiri berapa kolom
 * yang muat pas di lebar layar, lalu SEMUA kolom yang lagi kelihatan
 * (lihat paginasi Kabinet di index.php/script.js, max 5 per halaman)
 * melebar rata otomatis mengisi penuh baris, TANPA nyisain rongga kosong
 * di kanan -- baik pas persis 5, atau cuma 2-3 kabinet, tetap rata penuh.
 * Perkecualian: kalau di seluruh sistem cuma ADA 1 kabinet TOTAL
 * (:only-child, bukan cuma 1 yang kelihatan di halaman ini), jangan
 * dipaksa selebar 1 baris penuh -- kolomnya dibatasi lebar wajar saja.
 * ============================================================ */

.laci-cabinet-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(215px, 1fr));
  align-items:start;
  gap:14px;
}
.laci-cabinet-row:has(> .ref-kabinet-besi:only-child){
  grid-template-columns:minmax(230px, 360px);
}

/* Sama seperti kasus :only-child di atas, tapi buat paginasi Kabinet:
   waktu cuma 1 kartu yang lagi ditampilkan di halaman ini (sisanya
   disembunyikan display:none lewat JS di renderKbPagination()), grid
   auto-fit+1fr bakal salah hitung cuma ada 1 kolom lalu memaksanya
   melebar satu baris penuh. Class ini ditoggle dari script.js. */
.laci-cabinet-row.is-single-visible{
  grid-template-columns:minmax(230px, 360px);
}

/* Waktu pencarian/filter aktif, sebagian besar Kabinet disembunyikan
   (display:none) lewat JS -- kalau kolom grid masih pakai auto-fit+1fr,
   Kabinet yang tersisa (kadang cuma 1) jadi melebar maksa mengisi seluruh
   baris (auto-fit menghitung ulang kolom dari elemen yang KELIHATAN saja).
   Makanya pas hasil pencarian cuma 1 Kabinet, kartunya jadi raksasa. Fix:
   begitu ada pencarian aktif, ganti ke auto-fill+lebar tetap (bukan 1fr)
   supaya Kabinet yang match tetap ukuran normal, rata kiri, sisa baris
   dibiarkan kosong -- lihat toggle class 'is-cari-aktif' di script.js. */
.laci-cabinet-row.is-cari-aktif{
  grid-template-columns:repeat(auto-fill, minmax(150px, 260px));
  justify-content:start;
}

.ref-kabinet-besi{
  min-width:0;
  display:flex; flex-direction:column; gap:10px;
}

.ref-kabinet-besi-head{
  display:flex; align-items:center; gap:6px;
  font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:#7dd3fc; padding:2px 4px 0;
}
.ref-kabinet-besi-head i{ color:#38bdf8; flex:none; }

.ref-kabinet-besi-body{
  display:flex; flex-direction:column; gap:12px;
}

/* Kabinet semu "Belum Dikelompokkan" (laci yang belum ditaruh ke kabinet
   manapun) -- aksen amber tipis, sama pola dengan .laci-drawer-slot-lain. */
.ref-kabinet-besi-lain{ border-color:#78350f !important; }
.ref-kabinet-besi-lain .ref-kabinet-besi-head{ color:#fbbf24; }
.ref-kabinet-besi-lain .ref-kabinet-besi-head i{ color:#f59e0b; }

/* Navigasi paginasi Kabinet (Referensi Umum) -- pola & tampilan sama
   persis dengan .rak-pagination di atas, sengaja dikasih nama class
   sendiri (kb-*) supaya skrip pagination-nya independen dari punya rak. */
.kb-pagination{
  display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap;
}
.kb-page-nav{
  width:30px; height:30px; border-radius:8px; background:#0f172a; border:1px solid #1e293b;
  color:#94a3b8; display:flex; align-items:center; justify-content:center; flex:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.kb-page-nav:hover{ background:#1e293b; color:#f1f5f9; border-color:#334155; }
.kb-page-nav:disabled{ opacity:.35; cursor:not-allowed; }
.kb-page-nav:disabled:hover{ background:#0f172a; color:#94a3b8; border-color:#1e293b; }
.kb-page-chips{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.kb-page-chip{
  min-width:28px; height:28px; padding:0 8px; border-radius:7px; background:#0f172a;
  border:1px solid #1e293b; color:#94a3b8; font-size:11px; font-weight:800; flex:none;
}
.kb-page-chip:hover{ background:#1e293b; color:#f1f5f9; }
.kb-page-chip.is-active{ background:#38bdf8; border-color:#38bdf8; color:#0f172a; }
.kb-page-showall{
  margin-left:auto; font-size:11px; font-weight:700; color:#94a3b8; text-decoration:underline;
  text-underline-offset:2px; padding:4px 2px;
}
.kb-page-showall:hover{ color:#38bdf8; }
.kb-page-showall.is-active{ color:#38bdf8; }

/* ---- Popup jalur cepat pencarian (Rak & Kabinet) -- lihat renderSearchHasil()
   di script.js. Popup nempel di bawah kotak cari, isinya daftar lokasi persis
   (Tingkat/Slot untuk Rak, Kabinet/Laci/Map untuk lemari referensi) supaya
   orang tidak perlu buka laci satu-satu buat nebak isinya. ---- */
.search-box-wrap{ position:relative; }
.search-hasil-popup{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:40;
  background:#0b1220; border:1px solid #334155; border-radius:12px;
  box-shadow:0 14px 32px rgba(0,0,0,.55);
  max-height:300px; overflow-y:auto;
  animation:searchPopupIn .15s ease-out;
}
@keyframes searchPopupIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
.search-hasil-popup-head{
  display:flex; align-items:center; gap:6px; padding:8px 10px;
  font-size:10.5px; font-weight:800; color:#7dd3fc;
  border-bottom:1px solid #1e293b; position:sticky; top:0; background:#0b1220;
  border-radius:12px 12px 0 0;
}
.search-hasil-popup-head span{ flex:1; }
.search-hasil-popup-close{ color:#64748b; padding:2px; border-radius:6px; flex:none; line-height:0; }
.search-hasil-popup-close:hover{ color:#e2e8f0; background:#1e293b; }
.search-hasil-popup-list{ padding:6px; display:flex; flex-direction:column; gap:4px; }
.search-hasil-row{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  padding:7px 9px; border-radius:8px; background:#111c30; border:1px solid #1e293b;
  color:#e2e8f0; font-size:11px; font-weight:700; cursor:pointer;
  transition:background .15s,border-color .15s;
}
.search-hasil-row:hover, .search-hasil-row:focus-visible{ background:#16233b; border-color:#38bdf8; color:#7dd3fc; outline:none; }
.search-hasil-badge{
  flex:none; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  padding:2px 6px; border-radius:999px; border:1px solid transparent;
}
.search-hasil-row.is-rak .search-hasil-badge{ background:rgba(245,158,11,.15); color:#f59e0b; border-color:rgba(245,158,11,.3); }
.search-hasil-row.is-kabinet .search-hasil-badge{ background:rgba(56,189,248,.15); color:#38bdf8; border-color:rgba(56,189,248,.3); }
.search-hasil-text{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-hasil-more{ padding:6px 9px; text-align:center; font-size:10.5px; color:#64748b; font-style:italic; }
.search-hasil-empty{ padding:16px 10px; text-align:center; font-size:11px; color:#64748b; font-style:italic; }

@keyframes searchHitFlash{
  0%{ box-shadow:0 0 0 0 rgba(56,189,248,.85); }
  100%{ box-shadow:0 0 0 18px rgba(56,189,248,0); }
}
.search-hit-flash{ animation:searchHitFlash .9s ease-out 2; border-radius:10px; }

@media (max-width:640px){
  .kb-page-showall{ margin-left:0; flex-basis:100%; text-align:center; }
}

/* Section "Referensi Umum (Laci)" TIDAK dilebarkan melebihi lebar kolom
   Rak di atasnya (dulu sempat dibikin full-bleed selebar layar, tapi jadi
   "over"/melebihi batas kanan Rak -- dibatalkan). Sekarang sengaja
   dibiarkan ikut lebar max-w-4xl bawaan <main>, persis sejajar kiri-kanan
   dengan section Rak. Supaya 5 kabinet tetap muat sejajar rata TANPA
   melebarkan section-nya, lebar minimum tiap kolom kabinet (lihat
   .laci-cabinet-row) sengaja dikecilkan secukupnya. */

/* ============ Toolbar filter (rak/tahun/bulan/status) + tombol aksi
   (Kelola Rak/Riwayat/Sampah/Backup) di index.php -- SEBELUMNYA cuma 1
   <div flex flex-wrap> gede isi 4 <select> + garis pemisah + 4 tombol
   aksi jadi satu. Di layar HP (sempit) hasil "wrap"-nya tidak terduga --
   kadang 1 select sendirian di baris pertama (karena teksnya lebih
   panjang), baris berikutnya isi 2 select, baris terakhir malah numpuk
   sama tombol aksi -- kelihatan berantakan/tidak center pas pertama kali
   dibuka lewat HP. Sekarang dipisah 2 grup rapi sendiri-sendiri: grid rata
   2 kolom utk 4 select filter, grid rata 4 kolom utk tombol aksi -- di
   layar desktop (>=768px, sama dengan breakpoint md: yang dipakai wrapper
   toolbar-nya) balik jadi 1 baris flex biasa berdampingan, persis kayak
   tampilan semula. Dipakai class custom (bukan utility Tailwind grid-
   cols-4/md:flex) supaya tidak tergantung proses build ulang Tailwind. */
.tb-filter-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:100%;
}
.tb-filter-grid > *{ width:100%; }
.tb-action-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; width:100%;
}
@media (min-width:768px){
  .tb-filter-grid, .tb-action-grid{ display:flex; flex-wrap:wrap; width:auto; }
  .tb-filter-grid > *{ width:auto; }
}

/* Label teks tombol aksi (Kelola Rak/Riwayat/Sampah/Backup) sengaja baru
   muncul mulai >=768px (barengan .tb-action-grid pindah dari grid 4 kolom
   ke flex baris biasa di atas) -- kalau dibiarkan muncul dari 640px
   (perilaku default "sm:inline" bawaan Tailwind di elemennya) teksnya bisa
   kepenuhan/wrap jelek karena selebar itu tombolnya masih di grid 4 kolom
   sempit (belum ikut lebar konten kayak flex baris). */
@media (min-width:640px) and (max-width:767px){
  .tb-action-grid span.hidden{ display:none; }
}

/* =====================================================================
   MASKOT "PENJAGA ARSIP" -- 3 Okt 2026
   Avatar petugas arsip kartun yang mengambang di pojok kanan-bawah layar
   (fixed, muncul di semua tampilan rak). Digambar langsung pakai SVG
   inline (lihat markup-nya di index.php, sebelum tag </body>) -- bukan
   file gambar terpisah -- supaya ringan & gampang dites/diubah tanpa
   perlu asset tambahan. Animasinya 3 lapis, jalan terus-menerus (idle):
     1) seluruh badan mengambang naik-turun pelan (penjagaMengambang)
     2) mata berkedip sesekali, bukan tiap detik (penjagaKedip)
     3) satu tangan melambai pelan ke arah pengguna (penjagaLambai)
   Bisa disembunyikan lewat tombol "x" kecil di pojok avatar -- status
   sembunyi/tampil disimpan di localStorage browser (per-perangkat, bukan
   per-akun), lihat wireMaskotPenjagaArsip() di script.js. ===================== */
.penjaga-arsip{
  position:fixed; right:16px; bottom:16px; z-index:60;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  animation:penjagaMengambang 3.4s ease-in-out infinite;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.45));
  cursor:pointer; /* 3 Okt 2026 (v2): seluruh badan sekarang jadi "jalan pintas" --
     diklik langsung meluncur ke Papan Temuan Penting, lihat wireMaskotPenjagaArsip() */
  touch-action:none; /* 4 Okt 2026: supaya geser (drag) di HP tidak ikut scroll halaman */
}
.penjaga-arsip.disembunyikan{ display:none; }
/* 4 Okt 2026: dipasang SELAMA avatar sedang digeser (lihat wireMaskotPenjagaArsip) --
   kursor jadi "grabbing" & animasi mengambang dihentikan sebentar biar geraknya
   mengikuti jari/mouse persis, tidak "berebut" sama animasi naik-turun. */
.penjaga-arsip.sedang-digeser{ cursor:grabbing; animation-play-state:paused; }
/* v4 (3 Okt 2026): balik ke <svg> gambar-tangan (bukan <img> foto lagi)
   -- supaya kedip mata & lambai tangan aktif lagi, lihat index.php. */
.penjaga-arsip-svg{ width:72px; height:84px; }
.penjaga-arsip-label{
  pointer-events:none; font-size:9.5px; font-weight:800; color:#94a3b8;
  background:rgba(15,23,42,.85); border:1px solid rgba(148,163,184,.25);
  padding:2px 8px; border-radius:9999px; white-space:nowrap; letter-spacing:.02em;
  opacity:0; transform:translateY(4px); transition:opacity .2s ease, transform .2s ease, color .3s ease;
  max-width:200px; overflow:hidden; text-overflow:ellipsis;
}
.penjaga-arsip:hover .penjaga-arsip-label{ opacity:1; transform:translateY(0); }
/* 4 Okt 2026: sapaan sesuai jam (poin tambahan) -- label DIPAKSA kelihatan
   3.2 detik pertama begitu halaman dibuka, walau belum di-hover. */
.penjaga-arsip.sapaan-aktif .penjaga-arsip-label{ opacity:1; transform:translateY(0); color:#e2e8f0; }
/* 3 Okt 2026 (v2): dulu .penjaga-arsip-svg pointer-events:none & label
   pointer-events:auto -- supaya SELURUH badan avatar bisa jadi jalan
   pintas klik (bukan cuma label-nya), pointer-events dibalik: badan (svg)
   SEKARANG auto (ikut cursor:pointer di container), label JADI none
   (dia cuma teks penumpang di atas badan, klik tetap tembus ke container
   di bawahnya) -- supaya "x" tutup tetap bisa diklik sendiri, elemen itu
   tetap pointer-events:auto + stopPropagation() di JS biar tidak ikut
   kepencet jalan pintas pas niatnya cuma mau menyembunyikan. */
.penjaga-arsip-tutup{
  pointer-events:auto; position:absolute; top:-6px; right:-6px; width:18px; height:18px;
  border-radius:50%; background:#1e293b; border:1px solid rgba(148,163,184,.35); color:#94a3b8;
  font-size:12px; line-height:1; display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; transition:opacity .15s ease, background .15s ease, color .15s ease;
}
.penjaga-arsip:hover .penjaga-arsip-tutup{ opacity:1; }
.penjaga-arsip-tutup:hover{ background:#f59e0b; color:#1e293b; }
.penjaga-arsip-buka{
  position:fixed; right:16px; bottom:16px; z-index:60; display:none;
  width:34px; height:34px; border-radius:50%; background:#1e293b; border:1px solid rgba(148,163,184,.3);
  color:#94a3b8; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,.4);
}
.penjaga-arsip-buka.tampil{ display:flex; }
.penjaga-arsip-buka:hover{ color:#f59e0b; border-color:#f59e0b; }
@keyframes penjagaMengambang{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-7px); }
}
.penjaga-arsip .mata-kiri, .penjaga-arsip .mata-kanan{
  transform-box:fill-box; transform-origin:center; animation:penjagaKedip 4.6s ease-in-out infinite;
}
.penjaga-arsip .mata-kanan{ animation-delay:.05s; }
@keyframes penjagaKedip{
  0%, 92%, 100%{ transform:scaleY(1); }
  95%{ transform:scaleY(.12); }
}
.penjaga-arsip .tangan-lambai{
  transform-box:fill-box; transform-origin:bottom center; animation:penjagaLambai 2.6s ease-in-out infinite;
}
@keyframes penjagaLambai{
  0%, 100%{ transform:rotate(0deg); }
  25%{ transform:rotate(-16deg); }
  50%{ transform:rotate(4deg); }
  75%{ transform:rotate(-10deg); }
}
@media (max-width:640px){
  .penjaga-arsip-svg{ width:56px; height:66px; }
  .penjaga-arsip, .penjaga-arsip-buka{ right:10px; bottom:10px; }
}

/* ---- v2 (3 Okt 2026): warna seragam ikut STATUS rak/temuan -----------
   .pa-primer & .pa-gelap dipasang di bagian2 seragam/topi di SVG (lihat
   index.php) -- defaultnya warna biru dongker (netral, belum tentu ada
   masalah). JS (wireMaskotPenjagaArsip, baca window.__penjagaArsipData)
   nambah SATU class mood di container (.mood-kritis / .mood-perhatian /
   .mood-aman) sesuai data server: ada temuan KRITIS > seragam jadi merah
   (paling mendesak); kalau tidak ada kritis tapi ada temuan WASPADA atau
   dokumen belum rapi > kuning/amber; kalau bersih semua > hijau. Dikasih
   transition supaya pas pindah mood warnanya luntur halus, bukan kedip
   tiba-tiba. ---------------------------------------------------------- */
.penjaga-arsip .pa-primer{ fill:#1e3a8a; transition:fill .5s ease; }
.penjaga-arsip .pa-gelap{ fill:#0f172a; transition:fill .5s ease; }
.penjaga-arsip.mood-kritis .pa-primer{ fill:#b91c1c; }
.penjaga-arsip.mood-kritis .pa-gelap{ fill:#450a0a; }
.penjaga-arsip.mood-perhatian .pa-primer{ fill:#b45309; }
.penjaga-arsip.mood-perhatian .pa-gelap{ fill:#451a03; }
.penjaga-arsip.mood-aman .pa-primer{ fill:#15803d; }
.penjaga-arsip.mood-aman .pa-gelap{ fill:#052e14; }

/* ---- v2: badge bulat kecil di bahu avatar, isinya jumlah temuan KRITIS
   yang belum ditangani -- cuma nongol kalau jumlahnya > 0 (JS yang
   toggle atribut [hidden]-nya), supaya kelihatan dari jauh TANPA perlu
   scroll ke Papan Temuan dulu (ini bagian "notifikasi ringkas"-nya). Ikut
   berdenyut pelan (bukan kedip cepat norak) biar jelas ada yang perlu
   diperhatikan tapi tidak mengganggu mata. ---------------------------- */
.penjaga-arsip-notif{
  position:absolute; top:-2px; left:-4px; min-width:17px; height:17px; padding:0 4px;
  border-radius:9999px; background:#dc2626; border:2px solid #0f172a; color:#fff;
  font-size:9.5px; font-weight:900; line-height:13px; text-align:center;
  box-shadow:0 2px 6px rgba(220,38,38,.6); animation:penjagaNotifDenyut 1.8s ease-in-out infinite;
}
.penjaga-arsip-notif[hidden]{ display:none; }
@keyframes penjagaNotifDenyut{
  0%,100%{ transform:scale(1); } 50%{ transform:scale(1.18); }
}

/* ---- v2: reaksi singkat pas ada aksi berhasil (saat ini dipasang di
   upload dokumen, lihat sessionStorage "penjagaArsipReaksi" di
   script.js) -- lompat kecil + sedikit miring kanan-kiri, SELAIN animasi
   mengambang yang sudah jalan terus (makanya override animation-nya,
   bukan ditambah, biar tidak tabrakan/bentrok sama penjagaMengambang). ---- */
.penjaga-arsip.reaksi-senang{ animation:penjagaReaksiSenang .9s ease-in-out 2; }
@keyframes penjagaReaksiSenang{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  25%{ transform:translateY(-16px) rotate(-6deg); }
  50%{ transform:translateY(0) rotate(5deg); }
  75%{ transform:translateY(-8px) rotate(-3deg); }
}
.penjaga-arsip.reaksi-senang .penjaga-arsip-label{ opacity:1; transform:translateY(0); color:#34d399; }

/* ---- BARU (4 Okt 2026): rayakan kalau rak 100% rapi -- dipasang SEKALI
   tiap buka halaman (kalau mood "aman", lihat wireMaskotPenjagaArsip),
   pakai animasi lompat yang sama (penjagaReaksiSenang) + taburan confetti
   kecil (::before/::after, trik box-shadow banyak titik sekaligus) yang
   meletup lalu memudar ke atas. ---- */
.penjaga-arsip.rayakan-sempurna{ animation:penjagaReaksiSenang .9s ease-in-out 2; }
.penjaga-arsip.rayakan-sempurna::before,
.penjaga-arsip.rayakan-sempurna::after{
  content:''; position:absolute; top:6px; left:50%; width:5px; height:5px; border-radius:50%;
  background:#fbbf24;
  box-shadow:
    -20px -4px 0 -1px #34d399, 20px -8px 0 -1px #60a5fa, 0 -22px 0 -1px #f472b6,
    -10px -24px 0 -1px #facc15, 12px -20px 0 -1px #a78bfa, -26px -16px 0 -1px #fb923c;
  animation:penjagaConfetti 1.1s ease-out forwards;
  pointer-events:none;
}
.penjaga-arsip.rayakan-sempurna::after{ animation-delay:.85s; }
@keyframes penjagaConfetti{
  0%{ opacity:1; transform:translate(-50%,0) scale(.6); }
  100%{ opacity:0; transform:translate(-50%,-30px) scale(1.2); }
}

/* ---- BARU (5 Okt 2026): PANEL Penjaga Arsip (pengingat + cari dokumen cepat),
   lihat wireMaskotPenjagaArsip() di script.js. Diposisikan oleh JS (di atas/bawah avatar). ---- */
.pa-panel{
  position:fixed; z-index:61; display:flex; flex-direction:column; overflow:hidden;
  background:#0f172a; color:#e2e8f0; border:1px solid rgba(148,163,184,.3); border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.55); font-size:12px;
}
.pa-panel[hidden]{ display:none; }
.pa-panel-kepala{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px 6px; font-size:13px; }
.pa-panel-x{ background:none; border:0; color:#94a3b8; font-size:20px; line-height:1; cursor:pointer; }
.pa-panel-x:hover{ color:#f59e0b; }
.pa-panel-cari{ padding:0 12px 8px; }
.pa-panel-cari input{
  width:100%; background:#1e293b; border:1px solid #334155; color:#e2e8f0; border-radius:9px;
  padding:7px 10px; font-size:12px; outline:none;
}
.pa-panel-cari input:focus{ border-color:#f59e0b; }
.pa-panel-isi{ overflow-y:auto; padding:0 12px 8px; flex:1 1 auto; }
.pa-judul{ font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#94a3b8; margin:8px 0 4px; }
.pa-kosong,.pa-sub{ color:#94a3b8; font-size:11px; }
.pa-lain{ margin-top:4px; }
.pa-baris{
  display:flex; align-items:flex-start; justify-content:space-between; gap:8px; width:100%;
  padding:6px 8px; margin-bottom:4px; background:#1e293b; border:1px solid #334155; border-radius:9px;
  color:inherit; text-align:left; text-decoration:none;
}
.pa-link{ cursor:pointer; }
.pa-link:hover{ border-color:#f59e0b; }
.pa-baris-teks{ min-width:0; flex:1 1 auto; }
.pa-nama{ font-weight:700; word-break:break-word; }
.pa-chip{ display:inline-block; font-size:9px; font-weight:800; padding:1px 6px; border-radius:9999px; color:#0f172a; margin-right:4px; }
.pa-kritis{ background:#f87171; } .pa-waspada{ background:#fbbf24; } .pa-info{ background:#38bdf8; }
.pa-aksi{ display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-end; flex:0 0 auto; }
.pa-aksi button{
  font-size:10px; font-weight:800; padding:3px 7px; border-radius:7px; cursor:pointer;
  background:#334155; color:#e2e8f0; border:1px solid #475569;
}
.pa-aksi button:hover{ border-color:#f59e0b; }
.pa-aksi .pa-selesai{ background:#f59e0b; color:#1e293b; border-color:#f59e0b; }
.pa-panel-kaki{ padding:8px 12px 10px; border-top:1px solid #1e293b; }
.pa-panel-kaki button{
  width:100%; padding:7px; font-size:12px; font-weight:800; border-radius:9px; cursor:pointer;
  background:#f59e0b; color:#1e293b; border:0;
}
@media (max-width:480px){ .pa-panel{ font-size:13px; } }

.pa-panel,.pa-panel *{ box-sizing:border-box; }
.pa-link{ justify-content:flex-start; align-items:center; font:inherit; }
.pa-panel-cari input{ max-width:100%; }

/* ---- 5 Okt 2026 (Cowork): FIX tombol Sebelumnya/Selanjutnya di modal binder
   tidak kelihatan. Penyebab: tinggi kartu = min(95vh,...) PLUS padding overlay
   (p-6 = 3rem total) melebihi tinggi layar, lalu .modal-overlay punya
   overflow-y:auto -> nav di dasar kartu terdorong ke luar layar. Sekarang
   tinggi kartu = tinggi layar dikurangi padding overlay (pakai dvh supaya
   akurat di HP/browser dgn toolbar), overlay binder tidak scroll, dan nav
   dibuat lebih kontras + tidak boleh menciut. ---- */
#modalBinderFlip{ overflow:hidden; }
#modalBinderFlip .binder-flip-wrap{
  height:min(calc(100vh - 3rem), 1300px);
  height:min(calc(100dvh - 3rem), 1300px);
  margin-top:0; margin-bottom:0;
}
#modalBinderFlip .binder-flip-nav{
  flex:none; position:relative; z-index:30; min-height:38px;
}
#modalBinderFlip .binder-flip-navbtn{
  background:#334155; border-color:#64748b; color:#fff;
}
#modalBinderFlip .binder-flip-navbtn:hover:not(:disabled){ background:#475569; }
#modalBinderFlip .binder-flip-navbtn:disabled{ opacity:.5; }
#modalBinderFlip .binder-flip-counter{ color:#e2e8f0; font-size:12px; font-weight:700; }
@media (max-width:640px){
  #modalBinderFlip .binder-flip-wrap{
    height:calc(100vh - 1rem);
    height:calc(100dvh - 1rem);
    max-height:none;
  }
}


/* ---- 5 Okt 2026 (Cowork) UX #1: teks terlalu kecil (8-11px) dinaikkan supaya terbaca di PC layar lebar.
   Kelas Tailwind arbitrary text-[Npx] yang dipakai index.php dinaikkan lewat override; punggung binder
   (custom CSS sendiri) tidak ikut berubah. ---- */
.text-\[8px\]{font-size:10.5px!important}
.text-\[9px\]{font-size:11px!important}
.text-\[10px\]{font-size:12px!important}
.text-\[11px\]{font-size:12.5px!important}


/* ---- UX #3 (5 Okt 2026): toolbar atas -- filter 1 baris + "Menu Admin" dropdown ---- */
.tb-admin{ position:relative; flex:none; }
.tb-admin > summary{ list-style:none; }
.tb-admin > summary::-webkit-details-marker{ display:none; }
.tb-admin-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer;
  padding:8px 14px; border-radius:12px; background:#1e293b; border:1px solid #334155;
  color:#e2e8f0; font-size:12.5px; font-weight:700; width:100%; position:relative;
  transition:background .15s ease, border-color .15s ease;
}
.tb-admin-btn:hover{ background:#334155; border-color:#475569; }
.tb-admin-btn:focus-visible{ outline:2px solid #f59e0b; outline-offset:2px; }
.tb-admin[open] > .tb-admin-btn{ background:#334155; border-color:#f59e0b; }
.tb-admin-caret{ transition:transform .15s ease; }
.tb-admin[open] .tb-admin-caret{ transform:rotate(180deg); }
.tb-admin-badge{
  min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#f59e0b; color:#020617;
  font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center;
}
.tb-admin-panel{
  position:absolute; right:0; top:calc(100% + 8px); z-index:60;
  display:grid !important; grid-template-columns:1fr !important; gap:6px; width:230px !important;
  padding:8px; background:#0f172a; border:1px solid #334155; border-radius:14px;
  box-shadow:0 20px 40px -10px rgba(0,0,0,.6);
}
.tb-admin-panel > a{ justify-content:flex-start !important; }
.tb-admin-panel > a span.hidden{ display:inline !important; }
@media (min-width:768px){
  .tb-admin-btn{ width:auto; }
}
@media (min-width:1024px){
  .tb-filter-grid{ flex-wrap:nowrap; }
}


/* ---- UX #7 (5 Okt 2026): paginasi rak diberi judul "Tingkat rak" + pemisah supaya tidak dikira paginasi papan temuan ---- */
.rak-pagination{ margin-top:18px; padding-top:14px; border-top:1px dashed #1e293b; align-items:center; }
.rak-page-judul{
  display:inline-flex; align-items:center; gap:6px; flex:none; margin-right:4px;
  font-size:12px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.04em;
}
.rak-page-chip, .rak-page-nav, .rak-page-showall{ min-height:30px; }
.rak-page-chip{ min-width:30px; font-size:12.5px; }
.rak-page-showall{ font-size:12.5px; }

/* ---- UX #8 (5 Okt 2026): punggung binder lebih besar & terbaca; maskot lebih kecil dan tidak menutupi konten ---- */
.rak-binder{ width:32px; height:136px; }
.rak-binder.rak-binder-flip,
.rak-binder.rak-binder-luar-tahun.rak-binder-flip,
.rak-binder.rak-binder-luar-tahun{ height:136px; }
.rak-binder-row{ min-height:140px; }
.rak-binder-sticker .idx{ font-size:8.5px; line-height:1.3; }
.rak-binder-drag, .rak-binder-bebas-add{ width:58px; }
.rak-binder-drag .rak-binder-sticker .idx, .rak-binder-bebas-add .rak-binder-sticker .idx{ font-size:9.5px; }
.rak-binder:focus-visible{ outline:2px solid #f59e0b; outline-offset:2px; }
.penjaga-arsip-svg{ width:58px; height:68px; }
.penjaga-arsip{ opacity:.82; transition:opacity .2s ease; }
.penjaga-arsip:hover, .penjaga-arsip.sapaan-aktif, .penjaga-arsip.sedang-digeser{ opacity:1; }
@media (max-width:640px){ .penjaga-arsip-svg{ width:48px; height:56px; } }

/* Gelembung inisiatif Penjaga Arsip (6 Okt 2026) */
.pa-inisiatif{ position:fixed; z-index:9998; box-sizing:border-box; background:#0f172a; color:#e2e8f0; border:1px solid #f59e0b; border-radius:14px; padding:10px 12px; font-size:12px; line-height:1.45; box-shadow:0 10px 30px rgba(0,0,0,.5); animation:paIniMasuk .35s ease-out; }
.pa-inisiatif::after{ content:""; position:absolute; bottom:-7px; right:28px; width:12px; height:12px; background:#0f172a; border-right:1px solid #f59e0b; border-bottom:1px solid #f59e0b; transform:rotate(45deg); }
.pa-ini-aksi{ display:flex; gap:6px; margin-top:8px; }
.pa-ini-aksi button{ background:#1e293b; color:#e2e8f0; border:1px solid #334155; border-radius:8px; padding:4px 10px; font-size:11px; font-weight:700; cursor:pointer; }
.pa-ini-aksi button[data-ini="buka"]{ background:#f59e0b; border-color:#f59e0b; color:#0f172a; }
@keyframes paIniMasuk{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* Saran Penjaga Arsip di form Upload (6 Okt 2026) */
.pa-saran{ margin-top:6px; background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.35); border-radius:12px; padding:8px 10px; font-size:11px; line-height:1.5; color:#e2e8f0; text-transform:none; font-weight:400; letter-spacing:0; }
.pa-saran-judul{ font-weight:800; color:#fbbf24; margin-bottom:4px; }
.pa-saran-baris{ margin:3px 0; }
.pa-saran-baris button{ background:#f59e0b; color:#0f172a; border:0; border-radius:7px; padding:2px 8px; font-size:10.5px; font-weight:800; cursor:pointer; margin-left:4px; }

/* Kotak perintah Penjaga Arsip (6 Okt 2026) */
.pa-perintah{ border-top:1px solid #1e293b; padding:8px 10px; }
.pa-perintah-form{ display:flex; gap:6px; }
.pa-perintah-form input{ flex:1 1 auto; min-width:0; box-sizing:border-box; background:#020617; color:#e2e8f0; border:1px solid #334155; border-radius:8px; padding:6px 8px; font-size:12px; }
.pa-perintah-form button{ background:#f59e0b; color:#0f172a; border:0; border-radius:8px; padding:6px 12px; font-size:12px; font-weight:800; cursor:pointer; }
.pa-perintah-hasil{ background:#0b1220; border:1px solid #334155; border-radius:10px; padding:8px 10px; margin-bottom:8px; font-size:11.5px; line-height:1.45; max-height:180px; overflow:auto; }
.pa-perintah-hasil ul{ margin:4px 0 6px 16px; padding:0; }
.pa-p-judul{ font-weight:800; color:#fbbf24; }
.pa-p-galat{ color:#fca5a5; }
.pa-p-aksi{ display:flex; gap:6px; margin-top:6px; }
.pa-p-aksi button{ background:#1e293b; color:#e2e8f0; border:1px solid #334155; border-radius:8px; padding:4px 12px; font-size:11px; font-weight:700; cursor:pointer; }
.pa-p-aksi button[data-pp="jalan"]{ background:#16a34a; border-color:#16a34a; color:#fff; }

/* 8 Okt 2026: Penjaga Arsip (z-index 60) sebelumnya menimpa tombol "Selanjutnya"
   di pojok kanan-bawah modal pratinjau/binder (z-index 50), jadi tombolnya
   tertutup & sulit diklik. Selama ada modal terbuka, avatar diturunkan ke
   bawah overlay modal (otomatis tertutup & tidak bisa diklik); begitu modal
   ditutup, avatar muncul lagi seperti biasa. Panel Penjaga (.pa-panel, z 61)
   tidak diubah. */
body:has(.modal-overlay:not([hidden])) .penjaga-arsip,
body:has(.modal-overlay:not([hidden])) .penjaga-arsip-buka{
  z-index:40;
  pointer-events:none;
}


/* ---- 13 Okt 2026 (Cowork): tombol Sebelumnya/Selanjutnya modal binder SELALU kelihatan, tetap di BAWAH.
   Nav dipaku (position:absolute) ke dasar kartu + kartu diberi padding-bawah khusus, jadi posisinya
   tidak bergantung pada sisa tinggi flex di antara topbar & panggung 3D (penyebab nav sebelumnya
   terdorong/terpotong di layar/zoom tertentu). ---- */
#modalBinderFlip .binder-flip-wrap{ padding-bottom:64px; }
#modalBinderFlip .binder-flip-nav{
  position:absolute; left:14px; right:14px; bottom:12px;
  margin:0; z-index:40; min-height:40px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}

/* ---- 13 Okt 2026 (Cowork): nav kadang hilang setelah klik "Selanjutnya". overflow:hidden masih bisa
   digeser lewat kode (fokus/scrollIntoView dari isi halaman), sehingga kartu ikut bergeser & nav
   keluar layar. overflow:clip melarang pergeseran itu sama sekali. ---- */
#modalBinderFlip{ overflow:clip; overflow-y:clip; }
#modalBinderFlip .binder-open-cover{ overflow:clip; }
#modalBinderFlip .flip-book-container{ overflow:clip; }
#modalBinderFlip .page-front, #modalBinderFlip .page-back{ overflow:clip; }

/* ---- 13 Okt 2026 (Cowork): tombol "Selanjutnya" (pojok kanan bawah modal binder) kadang "hilang" --
   ternyata tertutup maskot Penjaga Arsip (position:fixed, pojok kanan bawah juga, ikut melayang &
   muncul bubble sapaan). Selama modal binder terbuka, maskot & tombol bukanya disembunyikan. ---- */
body:has(#modalBinderFlip:not([hidden])) .penjaga-arsip,
body:has(#modalBinderFlip:not([hidden])) .penjaga-arsip-buka,
body:has(#modalBinderFlip:not([hidden])) .penjaga-arsip-notif{
  display:none !important;
}

/* ---- 13 Okt 2026 (Cowork): jaring pengaman render. Lapisan 3D halaman flip (perspective + preserve-3d +
   will-change) di Chrome kadang menggambar ulang & menimpa elemen di atasnya saat kursor bergerak/hover,
   sehingga tombol nav tampak "hilang". Nav dijadikan lapisan GPU sendiri (translateZ) dengan z-index
   tinggi, dan panggung 3D dipaksa tetap di bawahnya. ---- */
#modalBinderFlip .binder-open-cover{ position:relative; z-index:0; isolation:isolate; }
#modalBinderFlip .binder-flip-nav{
  z-index:1000; isolation:isolate;
  background:linear-gradient(180deg,#0f172a 0%,#0b1220 100%);
  border-radius:12px; padding:0 2px;
}
#modalBinderFlip .binder-flip-navbtn,
#modalBinderFlip .binder-flip-navbtn:hover,
#modalBinderFlip .binder-flip-navbtn:focus,
#modalBinderFlip .binder-flip-navbtn:active{ opacity:1 !important; visibility:visible !important; }
#modalBinderFlip .binder-flip-navbtn:disabled{ opacity:.5 !important; }

/* 13 Okt 2026: will-change:transform di tiap halaman = 1 layer GPU per halaman (50+ layer) -> render blank.
   Dimatikan; transisi flip tetap jalan (transform tetap dianimasikan, hanya tidak dipromosikan permanen). */
#modalBinderFlip .flip-page{ will-change:auto; }
#modalBinderFlip .page-front, #modalBinderFlip .page-back{ backface-visibility:hidden; }

/* ---- 23 Okt 2026: badge merah & tombol tutup maskot menempel ke AVATAR, bukan ke kotak pembungkus.
   Pembungkus .penjaga-arsip melebar mengikuti label sapaan (max 200px, opacity 0 tapi tetap makan tempat),
   sehingga left:-4px / right:-6px membuat badge "melayang" jauh di kiri maskot. Sekarang diposisikan
   relatif ke tengah pembungkus (avatar selalu di tengah, lebar svg 58px / 48px di HP). ---- */
.penjaga-arsip-notif{ left:calc(50% - 38px); top:-4px; z-index:2; }
.penjaga-arsip-tutup{ right:calc(50% - 38px); top:-8px; z-index:2; }
@media (max-width:640px){
  .penjaga-arsip-notif{ left:calc(50% - 32px); }
  .penjaga-arsip-tutup{ right:calc(50% - 32px); }
}

/* ---- 23 Okt 2026 (UX #8): border dropdown filter header lebih terlihat di latar gelap ---- */
.tb-filter-grid select{ border-color:#475569; }
.tb-filter-grid select:hover{ border-color:#64748b; }
.tb-filter-grid select:focus{ border-color:#f59e0b; }

/* ---- 23 Okt 2026 (UX #6): navigasi cepat kiri-bawah (ke atas & ke Papan Temuan), muncul setelah menggulir ---- */
.nav-cepat{ position:fixed; left:16px; bottom:16px; z-index:55; display:flex; gap:8px; }
.nav-cepat[hidden]{ display:none; }
.nav-cepat button{
  font-family:inherit; font-size:12px; font-weight:800; min-height:40px; min-width:40px; padding:0 14px;
  border-radius:9999px; background:#0f172a; color:#e2e8f0; border:1px solid #475569; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.45);
}
.nav-cepat button:hover{ border-color:#f59e0b; color:#fcd34d; }
.nav-cepat button:focus-visible{ outline:2px solid #f59e0b; outline-offset:2px; }
body:has(.modal-overlay:not([hidden])) .nav-cepat{ display:none; }
@media (max-width:640px){ .nav-cepat{ left:10px; bottom:10px; } .nav-cepat button{ min-height:44px; min-width:44px; } }


/* Kotak cari halaman di dalam binder flip (28 Okt 2026) */
.binder-flip-cari{ position:relative; flex:1 1 auto; max-width:340px; margin:0 10px; }
.binder-flip-cari input{ width:100%; background:#0f172a; border:1px solid #475569; color:#e2e8f0; border-radius:8px; padding:6px 10px; font-size:12px; outline:none; }
.binder-flip-cari input:focus{ border-color:#f97316; }
.binder-flip-cari-hasil{ position:absolute; left:0; right:0; top:100%; margin-top:4px; max-height:320px; overflow:auto; background:#0f172a; border:1px solid #475569; border-radius:8px; z-index:1000; box-shadow:0 10px 30px rgba(0,0,0,.5); min-width:280px; }
.binder-flip-cari-item{ display:flex; gap:8px; align-items:center; width:100%; text-align:left; padding:7px 10px; font-size:11px; color:#e2e8f0; border-bottom:1px solid #1e293b; cursor:pointer; background:transparent; }
.binder-flip-cari-item:hover{ background:#1e293b; }
.binder-flip-cari-item .n{ flex:none; font-family:monospace; color:#f97316; }
.binder-flip-cari-item .t{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.binder-flip-cari-item .s{ flex:none; color:#94a3b8; }
.binder-flip-cari-kosong{ padding:8px 10px; font-size:11px; color:#94a3b8; }
@media (max-width:640px){ .binder-flip-cari{ max-width:none; margin:0 6px; } }