/* ==========================================================================
   Halaman Laporan (laporan-saya.php, laporan-monitoring.php).
   Hanya tambahan di atas css/form.css, css/form-panel.css, css/form-kelola.css
   (fm-*, rk-*, ka-*, kl-*, ed-*). Kelas lp-* hanya untuk yang belum ada di sana.
   Status selalu memakai teks atau ikon, bukan hanya warna. Tanpa garis aksen kiri.
   ========================================================================== */

/* ---------- Scrollbar tipis, sama dengan .rk-tabel-wrap, untuk semua area gulir ---------- */
.kl-tab, .kl-dlg, .kl-modal, .kl-tabel-wrap, .lp-pop-daftar, .lp-scroll, textarea, .kl-menu {
  scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent;
}
.kl-tab::-webkit-scrollbar, .kl-dlg::-webkit-scrollbar, .kl-modal::-webkit-scrollbar, .kl-tabel-wrap::-webkit-scrollbar,
.lp-pop-daftar::-webkit-scrollbar, .lp-scroll::-webkit-scrollbar, textarea::-webkit-scrollbar, .kl-menu::-webkit-scrollbar { width: 10px; height: 10px; }
.kl-tab::-webkit-scrollbar-track, .kl-dlg::-webkit-scrollbar-track, .kl-modal::-webkit-scrollbar-track, .kl-tabel-wrap::-webkit-scrollbar-track,
.lp-pop-daftar::-webkit-scrollbar-track, .lp-scroll::-webkit-scrollbar-track, textarea::-webkit-scrollbar-track, .kl-menu::-webkit-scrollbar-track { background: transparent; }
.kl-tab::-webkit-scrollbar-thumb, .kl-dlg::-webkit-scrollbar-thumb, .kl-modal::-webkit-scrollbar-thumb, .kl-tabel-wrap::-webkit-scrollbar-thumb,
.lp-pop-daftar::-webkit-scrollbar-thumb, .lp-scroll::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb, .kl-menu::-webkit-scrollbar-thumb {
  background: #cbd5e1; background-clip: padding-box; border-radius: 9999px; border: 3px solid transparent;
}
.kl-tab::-webkit-scrollbar-thumb:hover, .kl-dlg::-webkit-scrollbar-thumb:hover, .kl-modal::-webkit-scrollbar-thumb:hover, .kl-tabel-wrap::-webkit-scrollbar-thumb:hover,
.lp-pop-daftar::-webkit-scrollbar-thumb:hover, .lp-scroll::-webkit-scrollbar-thumb:hover, textarea::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; }
.kl-tab::-webkit-scrollbar-corner, .kl-dlg::-webkit-scrollbar-corner, .lp-scroll::-webkit-scrollbar-corner, textarea::-webkit-scrollbar-corner { background: transparent; }
.kl-tab::-webkit-scrollbar { height: 8px; }
/* Wadah bergulir jadi acuan .lp-sr; tanpa ini teks absolut lolos dan melebarkan halaman di HP */
.rk-tabel-wrap, .kl-tabel-wrap { position: relative; }
.lp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lp-asli { position: absolute !important; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none; }

/* ---------- Hero ---------- */
.lp-hero-aksi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.lp-hero-aksi .fm-btn-garis { border-color: #fff; }
.lp-hero-aksi .fm-btn-garis:hover { background: #eff6ff; }
.lp-hero-aksi:empty { display: none; }

/* ---------- Bar, tab, filter ---------- */
.kl-tab a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 8px; background: transparent; color: #475569;
  font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none;
}
.kl-tab a:hover { color: #003366; }
.kl-tab a[aria-current="page"] { background: #fff; color: #003366; box-shadow: 0 1px 3px rgba(15,23,42,.15); }
.kl-tab a:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,85,164,.3); }
.kl-tab a svg { width: 15px; height: 15px; flex: none; }
.lp-tab2 { padding: 12px 16px 0; }
.lp-tab2 .kl-tab { background: #f1f5f9; }
.lp-tab2 .kl-tab button { min-height: 32px; font-size: 13px; padding: 0 12px; }
.lp-tabbar .kl-tab button { display: inline-flex; align-items: center; gap: 6px; }
.lp-tabbar .kl-tab button svg { width: 15px; height: 15px; flex: none; }
.lp-filter { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; padding: 14px 16px; border-bottom: 1px solid #e2e8f0; }
.lp-filter > div { min-width: 0; }
.lp-filter .rk-lbl { margin-bottom: 4px; }
.lp-filter .lp-pilih-w { min-width: 160px; }
.lp-filter .rk-cari { flex: 1 1 220px; max-width: 360px; }
.lp-filter-kanan { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.lp-sec-head { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; padding: 16px 16px 14px; border-bottom: 1px solid #e2e8f0; }
.lp-sec-head > div:first-child { min-width: 0; flex: 1 1 280px; }
.lp-sec-aksi { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.lp-sec + .lp-sec { border-top: 8px solid #f3f6fa; }
.lp-dl { display: flex; flex-wrap: wrap; gap: 6px 24px; padding: 12px 16px; font-size: 14px; color: #334155; border-bottom: 1px solid #e2e8f0; background: #fff; }
.lp-dl-item { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.lp-dl-item svg { width: 16px; height: 16px; flex: none; color: #64748b; }
.lp-dl-item b { color: #0f172a; }
.lp-sisa { display: inline-block; padding: 1px 9px; border-radius: 9999px; background: #e0ecf8; color: #003366; font-size: 12px; font-weight: 700; }
.lp-sisa.is-lewat { background: #fee2e2; color: #b91c1c; }

/* ---------- Kartu hitungan (mengikuti .rk-tile), bisa diklik untuk menyaring ---------- */
.lp-hitung { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; border-bottom: 1px solid #e2e8f0; }
.lp-hit { position: relative; display: block; width: 100%; min-width: 0; padding: 14px 16px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.lp-hit:hover { border-color: #94a3b8; }
.lp-hit:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #0055a4; }
.lp-hit .rk-tile-l { padding-right: 30px; }
.lp-hit-ik { position: absolute; right: 14px; top: 13px; width: 22px; height: 22px; }
.lp-hit-ik svg { width: 22px; height: 22px; }
.lp-hit.k-belum .lp-hit-ik, .lp-hit.k-belum .rk-tile-v { color: #b91c1c; }
.lp-hit.k-menunggu .lp-hit-ik, .lp-hit.k-menunggu .rk-tile-v { color: #b45309; }
.lp-hit.k-disetujui .lp-hit-ik, .lp-hit.k-disetujui .rk-tile-v { color: #15803d; }
.lp-hit[aria-pressed="true"].k-belum { border-color: #dc2626; background: #fef2f2; box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
.lp-hit[aria-pressed="true"].k-menunggu { border-color: #f59e0b; background: #fffbeb; box-shadow: 0 0 0 3px rgba(245,158,11,.16); }
.lp-hit[aria-pressed="true"].k-disetujui { border-color: #16a34a; background: #f0fdf4; box-shadow: 0 0 0 3px rgba(22,163,74,.14); }
.lp-hit[aria-pressed="true"] .rk-tile-s { font-weight: 700; color: #334155; }

/* ---------- Tabel ---------- */
.lp-tabel th { z-index: 2; }
.lp-tabel { min-width: 760px; }
.lp-tabel .kl-c-judul { min-width: 240px; }
.lp-tabel td { vertical-align: middle; }
.lp-tabel tbody tr.lp-klik { cursor: pointer; }
.lp-tabel tbody tr.lp-grup td, .lp-tabel tbody tr.lp-grup:hover td { padding: 8px 14px; background: #eef3f9; color: #334155; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid #e2e8f0; }
.lp-tabel tbody tr.lp-grup td small { margin-left: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #64748b; }
.lp-tabel .lp-nonaktif td { opacity: .62; }
.lp-sub { display: block; margin-top: 2px; font-size: 12.5px; color: #64748b; line-height: 1.4; overflow-wrap: anywhere; }
.lp-kosong-teks { font-size: 13px; color: #94a3b8; }
.lp-tw { text-align: center !important; width: 64px; min-width: 64px; }
.lp-tabel td.lp-tw { padding-left: 6px; padding-right: 6px; }
.lp-tabel th.lp-tw-aktif, .lp-tabel td.lp-tw-aktif { background-color: #f0f7ff; }
.lp-tabel tbody tr:hover td.lp-tw-aktif { background-color: #e6f1fd; }
.lp-tabel td.lp-tw-klik { cursor: pointer; }
.lp-ik { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.lp-ik svg { width: 22px; height: 22px; }
.lp-ik.i-disetujui { color: #16a34a; }
.lp-ik.i-menunggu { color: #d97706; }
.lp-ik.i-belum { color: #dc2626; }
.lp-ik.i-tidak { color: #94a3b8; }
.lp-tw-telat { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 800; line-height: 1; color: #c2410c; }
.lp-pj-kosong { font-size: 13px; color: #94a3b8; font-style: italic; }
.lp-telat { background: #ffedd5; color: #9a3412; }
.lp-chip-jalur { display: inline-block; padding: 2px 10px; border-radius: 9999px; background: #e0ecf8; color: #003366; font-size: 12px; font-weight: 700; }
.lp-chip-jalur.is-rad { background: #e8f5e9; color: #1b5e20; }
.lp-tw-mini { display: inline-flex; gap: 4px; }
.lp-tw-mini span { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 24px; padding: 0 6px; border-radius: 8px; background: #e0ecf8; color: #003366; font-size: 11.5px; font-weight: 800; }
.lp-tw-mini span.is-mati { background: #f1f5f9; color: #cbd5e1; }
.lp-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-top: 6px; color: #475569; }
.lp-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.lp-legenda .lp-ik { width: 18px; height: 18px; }
.lp-legenda .lp-ik svg { width: 18px; height: 18px; }
.lp-foot { padding: 10px 16px; border-top: 1px solid #e2e8f0; font-size: 12.5px; color: #64748b; background: #f8fafc; border-radius: 0 0 16px 16px; }
.lp-mono { font-weight: 700; color: #0f172a; }

/* Bar PJ massal */
.lp-massal { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; padding: 12px 16px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.lp-massal > div { min-width: 0; }
.lp-massal .lp-pilih-w { min-width: 220px; }

/* Catatan penting (username harus sama) */
.lp-catatan-pj { display: flex; gap: 10px; align-items: flex-start; margin: 14px 16px 0; }
.lp-catatan-pj svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }

/* ---------- Centang, chip TW, tombol ---------- */
input.lp-cek { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; flex: none; margin: 0; border: 1.5px solid #94a3b8; border-radius: 6px; background: #fff; cursor: pointer; transition: background-color .15s, border-color .15s; vertical-align: middle; }
input.lp-cek:hover { border-color: #003366; }
input.lp-cek:checked { background-color: #003366; border-color: #003366; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-size: 14px; background-position: center; background-repeat: no-repeat; }
input.lp-cek:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #0055a4; }
input.lp-cek:disabled { opacity: .45; cursor: not-allowed; }
.lp-twc-baris { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lp-twc { min-height: 40px; padding: 0 8px; border: 1.5px solid #e2e8f0; border-radius: 8px; background: #fff; color: #475569; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.lp-twc:hover { border-color: #94a3b8; }
.lp-twc[aria-pressed="true"] { border-color: #003366; background: #eff6ff; color: #003366; }
.lp-twc:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(0,85,164,.2); }
.lp-aksi-sel { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

/* ---------- Dropdown kustom ---------- */
.lp-pilih-w { position: relative; min-width: 0; }
.lp-pilih { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 8px 12px; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; }
.lp-pilih:hover:not(:disabled) { border-color: #94a3b8; }
.lp-pilih:disabled { opacity: .6; cursor: not-allowed; background: #f8fafc; }
.lp-pilih[aria-expanded="true"] { border-color: #0055a4; box-shadow: 0 0 0 4px rgba(0,85,164,.14); }
.lp-pilih-t { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-pilih svg { width: 16px; height: 16px; flex: none; color: #64748b; transition: transform .15s; }
.lp-pilih[aria-expanded="true"] svg { transform: rotate(180deg); }
.lp-pilih-w.is-muted .lp-pilih-t { color: #94a3b8; }
.ed-field .lp-pilih { padding: 10px 12px; font-size: 15px; min-height: 44px; }
.lp-pop {
  position: fixed; z-index: 400; display: flex; flex-direction: column; overflow: hidden; background: #fff;
  border: 1px solid #cbd5e1; border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(15,23,42,.35);
}
.lp-pop-daftar { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px; outline: none; }
.lp-pop-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #1e293b; cursor: pointer; }
.lp-pop-item.is-aktif { background: #eff6ff; }
.lp-pop-item[aria-selected="true"] { color: #003366; font-weight: 700; }
.lp-pop-item[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.lp-pop-item svg { width: 16px; height: 16px; flex: none; color: #003366; }
.lp-pop-t { min-width: 0; overflow-wrap: anywhere; }
.lp-pop-info { padding: 14px 12px; font-size: 13px; color: #64748b; text-align: center; }
.lp-pop-cari { position: relative; flex: none; padding: 8px 8px 4px; }
.lp-pop-cari svg { position: absolute; left: 20px; top: 50%; margin-top: 2px; width: 16px; height: 16px; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.lp-pop-cari input { width: 100%; min-height: 40px; padding: 8px 12px 8px 34px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; font-size: 14px; color: #0f172a; }
.lp-pop-cari input:focus { outline: none; background: #fff; border-color: #0055a4; box-shadow: 0 0 0 3px rgba(0,85,164,.14); }
.lp-pop-latar { position: fixed; inset: 0; z-index: 399; background: rgba(15,23,42,.35); }
.lp-pop.is-sheet { left: 12px; right: 12px; bottom: 12px; top: auto; width: auto; border-radius: 16px; }
.lp-pop.is-sheet .lp-pop-item { min-height: 48px; font-size: 15px; }

/* ---------- Dialog ---------- */
.lp-dlg-xl { max-width: min(1200px, 94vw); }
.kl-dlg .ed-field:first-of-type { margin-top: 16px; }
.lp-dlg-stat { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-top: 14px; font-size: 13.5px; color: #475569; }
.lp-catatan { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: #f8fafc; border: 1px solid #e2e8f0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; color: #1e293b; }
.lp-catatan b { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #64748b; }
.lp-catatan.is-kembali { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.lp-catatan.is-kembali b { color: #b91c1c; }
.lp-kembali { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.lp-berkas-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.lp-berkas { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border: 1.5px solid #e2e8f0; border-radius: 8px; background: #fff; }
.lp-berkas-ik { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: #eff6ff; color: #003366; }
.lp-berkas-ik svg { width: 18px; height: 18px; }
.lp-berkas-ik.is-pdf { background: #fee2e2; color: #b91c1c; }
.lp-berkas-info { flex: 1; min-width: 0; }
.lp-berkas-nama { display: block; font-size: 14px; font-weight: 600; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-berkas-meta { display: block; margin-top: 1px; font-size: 12.5px; color: #64748b; }
.lp-pratinjau { display: block; width: 100%; height: 55vh; min-height: 260px; margin-top: 12px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; }
.lp-pratinjau.hidden { display: none; }
.lp-dlg-sec { margin-top: 16px; }
.lp-dlg-sec > h3 { font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #64748b; }
.lp-dlg-foot-split { justify-content: space-between; }

/* ---------- Gunakan laporan lain ---------- */
.lp-pakai-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-top: 6px; padding: 3px 10px 3px 8px; border-radius: 9999px; background: #eff6ff; color: #003366; font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.lp-pakai-chip svg { width: 14px; height: 14px; flex: none; }
.lp-pakai-chip span { min-width: 0; overflow-wrap: anywhere; }
.lp-pakai-kotak { margin-top: 12px; padding: 12px 14px; border: 1.5px dashed #bfd3ea; border-radius: 10px; background: #f8fbff; }
.lp-pakai-kotak .lp-pakai-chip { margin-top: 0; }
.lp-pakai-ket { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: #475569; }
.lp-pakai-kotak .lp-pakai-chip + .lp-pakai-ket { margin-top: 8px; }
.lp-pakai-area { margin-top: 12px; display: grid; gap: 10px; }
.lp-pakai-kosong { margin: 0; padding: 10px 12px; border-radius: 8px; background: #f1f5f9; font-size: 13.5px; color: #475569; }
.lp-pakai-area .fm-btn { justify-self: start; }

/* ---------- Form unggah ---------- */
.lp-form-card { margin-top: 16px; }
.lp-form-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-start; justify-content: space-between; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid #e2e8f0; }
.lp-form-head > div { min-width: 0; flex: 1 1 260px; }
.lp-templat { margin-top: 10px; }
.lp-zona { position: relative; margin-top: 10px; }
.lp-zona-file { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; font-size: 0; }
.lp-zona.ada-berkas .lp-zona-file, .lp-zona.is-kunci .lp-zona-file { pointer-events: none; }
.lp-zona-kosong { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; border: 2px dashed #cbd5e1; border-radius: 12px; background: #f8fafc; text-align: center; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.lp-zona-kosong.hidden, .lp-zona-isi.hidden { display: none; }
.lp-zona:hover .lp-zona-kosong, .lp-zona.is-tarik .lp-zona-kosong { border-color: #003366; background: #eff6ff; }
.lp-zona:focus-within .lp-zona-kosong { border-color: #0055a4; box-shadow: 0 0 0 4px rgba(0,85,164,.14); }
.lp-zona-ico { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 9999px; background: #e0ecf8; color: #003366; }
.lp-zona-ico svg { width: 22px; height: 22px; }
.lp-zona-t { font-size: 14.5px; font-weight: 600; color: #1e293b; }
.lp-zona-t u { color: #003366; font-weight: 700; text-underline-offset: 3px; }
.lp-zona-s { font-size: 12.5px; color: #64748b; }
.lp-zona-isi { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border: 1.5px solid #e2e8f0; border-radius: 8px; background: #fff; }
.lp-zona-isi .lp-berkas-ik { flex: none; }
.lp-zona-aksi { display: flex; flex: none; gap: 6px; }
.fm-soal.is-galat .lp-zona-kosong { border-color: #fca5a5; }
.fm-soal.is-galat .lp-zona-isi { border-color: #fecaca; background: #fef2f2; }
.lp-prog { height: 6px; margin-top: 10px; border-radius: 9999px; background: #e2e8f0; overflow: hidden; }
.lp-prog.hidden { display: none; }
.lp-prog i { display: block; width: 0; height: 100%; border-radius: 9999px; background: #003366; transition: width .2s; }
.lp-prog.is-ok i { background: #16a34a; }
.lp-prog.is-galat i { background: #dc2626; }
.lp-pros { margin-top: 4px; min-height: 18px; font-size: 12.5px; color: #64748b; }
.lp-baris-aksi { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 18px; }

/* ---------- Deadline per triwulan ---------- */
.lp-dl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px; }
.lp-dl-kartu { padding: 16px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; }
.lp-dl-kartu h3 { font-size: 15px; font-weight: 800; color: #0f172a; }
.lp-dl-kolom { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 12px; }
.lp-dl-kolom > div { min-width: 0; }
.lp-dl-kolom .lp-dl-lbl { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.lp-dl-kolom .lp-dl-lbl span:first-child { font-size: 13px; font-weight: 700; color: #334155; }
.lp-dl-kolom .fm-btn { width: 100%; margin-top: 8px; }
.lp-dl-kolom input[type="date"].fm-input { max-width: none; min-height: 44px; font-size: 15px; }

/* ---------- Header: pengguna sesi PJ ---------- */
.lp-hdr-keluar { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 9999px; background: #f1f5f9; color: #475569; font-size: 11.5px; font-weight: 700; }
.lp-hdr-keluar svg { width: 12px; height: 12px; }

/* ---------- HP ---------- */
@media (max-width: 819px) {
  .lp-tabel-desktop { display: none; }
  .lp-kartu-hp { display: block; }
}
@media (min-width: 820px) { .lp-kartu-hp { display: none; } }
@media (max-width: 719px) {
  .lp-dl-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .lp-hitung { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; }
  .lp-hit { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 12px 14px; }
  .lp-hit .rk-tile-l { grid-column: 1; padding-right: 0; }
  .lp-hit .rk-tile-v { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; font-size: 26px; }
  .lp-hit .rk-tile-s { grid-column: 1; }
  .lp-hit-ik { display: none; }
  .lp-filter > div, .lp-filter .lp-pilih-w, .lp-filter .rk-cari { width: 100%; max-width: none; flex-basis: 100%; }
  .lp-filter-kanan { margin-left: 0; width: 100%; }
  .lp-filter-kanan .fm-btn, .lp-sec-aksi .fm-btn, .lp-massal .fm-btn { flex: 1 1 100%; min-height: 44px; }
  .lp-massal > div, .lp-massal .lp-pilih-w { width: 100%; }
  .lp-sec-aksi { width: 100%; }
  .lp-sec-aksi > div { width: 100%; }
  .lp-baris-aksi .fm-btn { flex: 1 1 100%; min-height: 44px; }
  .lp-hero-aksi .fm-btn { flex: 1 1 auto; }
  .lp-zona-isi { flex-wrap: wrap; }
  .lp-zona-aksi { width: 100%; }
  .lp-zona-aksi .fm-btn { flex: 1 1 0; min-height: 44px; }
  .kl-dlg .kl-dlg-foot .fm-btn { flex: 1 1 100%; min-height: 44px; }
  .lp-tabbar .kl-tab { width: 100%; }
  .lp-tabbar .kl-tab a { padding: 0 11px; font-size: 13.5px; flex: 1 0 auto; justify-content: center; }
  .lp-tabbar .kl-tab a svg { display: none; }
  .lp-tabbar .kl-tab button { padding: 0 11px; font-size: 13.5px; flex: 1 0 auto; justify-content: center; }
  .lp-tabbar .kl-tab button svg { display: none; }
  .lp-twc-baris { gap: 6px; }
}

/* Baris jalur + deadline di Monitoring */
.lp-jalur { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 14px 16px; border-bottom: 1px solid #e2e8f0; }
.lp-dl-inline { display: flex; flex-wrap: wrap; gap: 6px 20px; min-width: 0; font-size: 14px; color: #334155; }
.lp-tabel th.lp-sr-col { width: 44px; }
.lp-hit > span.rk-tile-l, .lp-hit > span.rk-tile-v, .lp-hit > span.rk-tile-s { display: block; }

/* ==========================================================================
   Warna status senada palet CAN (hijau BPS, oranye CAN, merah tua) dan gerak.
   Hanya transform/opacity yang dianimasikan; semua dimatikan oleh reduced-motion.
   ========================================================================== */
.kl-chip.is-buka { background: #e3f1e4; color: #1f6a24; }
.kl-chip.is-jadwal { background: #fff0dc; color: #a85200; }
.kl-chip.is-tutup { background: #fde8e8; color: #b71c1c; }
.lp-ik.i-disetujui { color: #2e7d32; }
.lp-ik.i-menunggu { color: #f57c00; }
.lp-ik.i-belum { color: #c62828; }
.lp-hit.k-belum .lp-hit-ik, .lp-hit.k-belum .rk-tile-v { color: #c62828; }
.lp-hit.k-menunggu .lp-hit-ik, .lp-hit.k-menunggu .rk-tile-v { color: #d96a00; }
.lp-hit.k-disetujui .lp-hit-ik, .lp-hit.k-disetujui .rk-tile-v { color: #2e7d32; }
.lp-hit[aria-pressed="true"].k-belum { border-color: #c62828; background: #fdf1f1; box-shadow: 0 0 0 3px rgba(198,40,40,.12); }
.lp-hit[aria-pressed="true"].k-menunggu { border-color: #f57c00; background: #fff6ea; box-shadow: 0 0 0 3px rgba(245,124,0,.16); }
.lp-hit[aria-pressed="true"].k-disetujui { border-color: #2e7d32; background: #f0f8f1; box-shadow: 0 0 0 3px rgba(46,125,50,.14); }
.lp-hit { transition: border-color .15s, background-color .15s, box-shadow .15s, transform .18s ease-out; }
.lp-hit:hover { transform: translateY(-2px); }
.lp-hit:active { transform: translateY(0); }

/* Hero panel dengan cincin progres */
.lp-hero-flex { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; }
.lp-hero-flex > div:first-child { min-width: 0; flex: 1 1 340px; }
.lp-ring { display: flex; align-items: center; gap: 16px; padding: 14px 20px 14px 14px; border-radius: 20px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); }
.lp-ring.hidden { display: none; }
.lp-ring-box { position: relative; width: 96px; height: 96px; flex: none; }
.lp-ring-svg { width: 100%; height: 100%; display: block; }
.lp-ring-trek { stroke: rgba(255,255,255,.2); }
.lp-ring-busur { stroke: #7ccf85; transition: stroke-dashoffset .6s cubic-bezier(.2,.7,.2,1); }
.lp-ring-tengah { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.lp-ring-v { font-size: 23px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.lp-ring-ket { min-width: 0; color: #fff; }
.lp-ring-ket b { display: block; font-size: 15px; font-weight: 800; }
.lp-ring-ket span { display: block; margin-top: 2px; font-size: 12.5px; color: #d6e4f3; }
@media (max-width: 479px) { .lp-ring { width: 100%; } }

/* Kartu hitung mundur deadline */
.lp-cd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; padding: 14px 16px; border-bottom: 1px solid #e2e8f0; }
.lp-cd-inline { flex: 1 1 260px; min-width: 0; display: flex; }
.lp-cd-inline .lp-cd { flex: 1; }
.lp-cd { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 16px; border-radius: 14px; border: 1px solid #dbe6f2; background: #f3f8fd; color: #003366; transition: transform .18s ease-out; animation: lp-naik .22s ease-out both; }
.lp-cd:hover { transform: translateY(-2px); }
.lp-cd-ik { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: #fff; }
.lp-cd-ik svg { width: 20px; height: 20px; }
.lp-cd-isi { min-width: 0; }
.lp-cd-l { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.lp-cd-v { display: block; margin-top: 1px; font-size: 22px; font-weight: 800; line-height: 1.15; }
.lp-cd-s { display: block; margin-top: 1px; font-size: 12.5px; color: #475569; }
.lp-cd.is-dekat { background: #fff6ea; border-color: #f8d9ae; color: #a85200; }
.lp-cd.is-mendesak { background: #fff0dc; border-color: #f5b668; color: #b34700; }
.lp-cd.is-lewat { background: #fdf1f1; border-color: #f3c3c3; color: #b71c1c; }
.lp-cd.is-kosong { background: #f8fafc; border-color: #e2e8f0; color: #64748b; }
.lp-cd.is-kosong .lp-cd-v { font-size: 17px; }

/* Indikator tab yang meluncur */
.kl-tab.lp-geser { position: relative; }
.lp-ind { position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.15); transition: transform .22s ease-out, width .22s ease-out, opacity .15s; pointer-events: none; }
.kl-tab.lp-geser > a, .kl-tab.lp-geser > button { position: relative; z-index: 1; transition: color .15s; }
.kl-tab.lp-geser > a[aria-current="page"], .kl-tab.lp-geser > button[aria-selected="true"] { background: transparent; box-shadow: none; }
.lp-fade { animation: lp-fade .18s ease-out both; }

/* Satker: baris judul bisa dilipat + bilah progres */
.lp-tabel tbody tr.lp-grup td { padding: 0; }
.lp-grup-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 14px; border: 0; background: transparent; font: inherit; text-align: left; color: inherit; cursor: pointer; }
.lp-grup-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 3px rgba(0,85,164,.35); }
.lp-grup-btn > svg { width: 16px; height: 16px; flex: none; color: #64748b; transition: transform .2s ease-out; }
.lp-grup.is-tutup .lp-grup-btn > svg { transform: rotate(-90deg); }
.lp-grup-nama { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #334155; }
.lp-grup-n { font-size: 12px; font-weight: 600; color: #64748b; }
.lp-grup-prog { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12px; font-weight: 700; color: #1f6a24; white-space: nowrap; }
.lp-grup-bar { position: relative; width: 84px; height: 6px; border-radius: 9999px; background: #d5e0ec; overflow: hidden; }
.lp-grup-bar i { position: absolute; inset: 0; border-radius: 9999px; background: #2e7d32; transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.lp-tabel tbody tr.lp-sembunyi { display: none; }

/* Gerak baris, dialog, dropdown */
.lp-masuk { animation: lp-naik .2s ease-out both; }
.lp-tabel tbody tr:not(.lp-grup) td { transition: background-color .15s; }
@keyframes lp-naik { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes lp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lp-skala { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.kl-modal { animation: lp-fade .15s ease-out both; }
.kl-dlg { animation: lp-skala .2s ease-out both; }
.lp-pop { transform-origin: top center; animation: lp-skala .14s ease-out both; }
.lp-pop.is-sheet { transform-origin: bottom center; }
main .fm-btn { transition: background-color .15s, opacity .15s, box-shadow .15s, transform .15s ease-out; }
main .fm-btn:hover:not(:disabled) { transform: translateY(-1px); }
main .fm-btn:active:not(:disabled) { transform: scale(.98); }

/* Chip menunggu berdenyut halus */
.kl-chip.lp-denyut::before { animation: lp-denyut 2s ease-in-out infinite; }
@keyframes lp-denyut { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .45; } }

/* Skeleton */
.lp-skel { padding: 6px 0; }
.lp-skel-baris { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-bottom: 1px solid #f1f5f9; }
.lp-skel-b { position: relative; display: block; height: 14px; border-radius: 8px; background: #e8eef5; overflow: hidden; }
.lp-skel-b::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); transform: translateX(-100%); animation: lp-kilau 1.2s ease-in-out infinite; }
@keyframes lp-kilau { to { transform: translateX(100%); } }
.lp-skel.is-kartu .lp-skel-baris { flex-direction: column; align-items: stretch; gap: 10px; }
.lp-skel.is-kartu .lp-skel-b { width: 100% !important; }

/* Langkah status (Laporan Saya) */
.lp-langkah { display: inline-flex; align-items: flex-start; min-width: 210px; }
.lp-lgk { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 1 0; min-width: 0; }
.lp-lgk:not(:first-child)::before { content: ""; position: absolute; top: 6px; right: 50%; width: 100%; height: 2px; background: #d5e0ec; }
.lp-lgk-t { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 9999px; background: #fff; border: 2px solid #cbd5e1; transition: transform .2s ease-out, background-color .2s, border-color .2s; }
.lp-lgk-l { font-size: 11px; font-weight: 600; color: #94a3b8; white-space: nowrap; }
.lp-langkah.st-belum { --c: #c62828; }
.lp-langkah.st-menunggu { --c: #f57c00; }
.lp-langkah.st-disetujui { --c: #2e7d32; }
.lp-lgk.is-lalu .lp-lgk-t, .lp-lgk.is-kini .lp-lgk-t { background: var(--c); border-color: var(--c); }
.lp-lgk.is-kini .lp-lgk-t { box-shadow: 0 0 0 4px rgba(0,51,102,.1); animation: lp-muncul .3s ease-out both; }
.lp-lgk.is-kini .lp-lgk-l { color: var(--c); font-weight: 800; }
.lp-lgk.is-lalu:not(:first-child)::before, .lp-lgk.is-kini:not(:first-child)::before { background: var(--c); }
@keyframes lp-muncul { from { transform: scale(.5); } to { transform: scale(1); } }

/* Unggah: respons saat diseret, progres, centang sukses */
.lp-zona.is-tarik .lp-zona-kosong { transform: scale(1.015); border-style: solid; }
.lp-zona.is-tarik .lp-zona-ico { animation: lp-loncat .6s ease-in-out infinite; }
@keyframes lp-loncat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.lp-zona-isi { animation: lp-naik .2s ease-out both; }
.lp-prog i { transition: width .25s ease-out; }
.lp-prog:not(.is-ok):not(.is-galat) i { position: relative; overflow: hidden; }
.lp-prog:not(.is-ok):not(.is-galat) i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); transform: translateX(-100%); animation: lp-kilau 1s ease-in-out infinite; }
.lp-prog.is-ok i { background: #2e7d32; }
.lp-ok-ik { display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; color: #2e7d32; }
.lp-ok-ik path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: lp-gambar .35s ease-out .05s forwards; }
@keyframes lp-gambar { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .lp-ok-ik path { stroke-dashoffset: 0; }
}

/* Tautan panah di kaki kartu (gaya "Buka" pada kartu laporan) */
.lp-kaki { padding: 12px 16px; border-top: 1px solid #e2e8f0; background: #fff; border-radius: 0 0 16px 16px; }
.lp-kaki.hidden { display: none; }
.lp-tautan-panah { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #003366; transition: color .2s; }
.lp-tautan-panah svg { width: 16px; height: 16px; flex: none; transition: transform .2s ease-out; }
.lp-tautan-panah:hover { color: #0055a4; }
.lp-tautan-panah:hover svg { transform: translateX(4px); }
.lp-tautan-panah:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #0055a4; }

/* Tombol tidak aktif yang jelas + alasan terlihat (Penagihan) */
.fm-btn.lp-btn-mati:disabled { background: #f1f5f9; color: #94a3b8; border: 1px dashed #cbd5e1; box-shadow: none; opacity: 1; cursor: not-allowed; }
.lp-alasan { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: #a85200; }
.lp-sec-aksi-kol { flex-direction: column; align-items: flex-end; gap: 0; }
.lp-sec-aksi-kol .lp-alasan { margin-top: 6px; color: #64748b; font-weight: 500; }
.kl-tabel td.kl-c-aksi .lp-alasan { text-align: right; }

/* Area unggah galat: getar singkat (transform) */
.fm-soal.is-galat .lp-zona-ico { background: #fde8e8; color: #b71c1c; transition: background-color .15s, color .15s; }
.fm-soal.lp-getar .lp-zona { animation: lp-getar .32s ease-out; }
@keyframes lp-getar { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.fm-unggah-pesan.is-tampil { animation: lp-naik .2s ease-out both; }

/* Tombol navigasi antar halaman (di atas kartu kerja, tepi bawah hero; pola form-rekap) */
.lp-navrow { margin-bottom: 12px; justify-content: flex-start; }
.lp-navrow.hidden { display: none; }
.lp-navrow .fm-btn-garis { border-color: #003366; box-shadow: 0 4px 10px -4px rgba(0,0,0,.25); }

/* Deadline: satu tombol simpan, penanda perubahan */
.lp-dl-chips { display: inline-flex; align-items: center; gap: 6px; }
.lp-dl-sel { padding: 8px; margin: -8px; border-radius: 12px; transition: background-color .2s; }
.lp-dl-sel.is-ubah { background: #fff6ea; }
.lp-belum-simpan { margin-left: 0; background: #ffedd5; color: #9a3412; animation: lp-naik .2s ease-out both; }
.lp-belum-simpan.hidden { display: none; }
.lp-dl-kaki { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgba(255,255,255,.97); border-top: 1px solid #e2e8f0; box-shadow: 0 -8px 20px -14px rgba(15,23,42,.35); border-radius: 0 0 16px 16px; }
.lp-dl-kaki-isi { min-width: 0; flex: 1 1 240px; }
.lp-dl-ket { font-size: 13.5px; font-weight: 600; color: #64748b; }
.lp-dl-ket.is-ubah { color: #a85200; }
.lp-dl-kaki .fm-alert { margin-top: 8px; }
@media (max-width: 639px) {
  .lp-dl-kaki .fm-btn { flex: 1 1 100%; min-height: 48px; }
  .lp-navrow .fm-btn { flex: 1 1 auto; }
}
.lp-navrow .fm-btn-garis:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #0055a4; }

/* ==========================================================================
   Hero Laporan: latar gelap diperpanjang ke belakang kartu kerja + motif lembar
   laporan (SVG dekoratif). Hanya untuk dua halaman Laporan; form*.css tidak diubah.
   ========================================================================== */
.lp-hero {
  padding-bottom: calc(84px + 150px);
  background:
    radial-gradient(640px 380px at 90% 70%, rgba(46, 125, 50, .5), transparent 70%),
    radial-gradient(520px 300px at 6% 58%, rgba(245, 124, 0, .12), transparent 70%),
    linear-gradient(160deg, #0a4a8a 0%, #003366 52%, #00264d 100%);
}
@media (min-width: 768px) { .lp-hero { padding-bottom: calc(104px + 260px); } }
.lp-hero + .fm-wrap { margin-top: calc(-56px - 150px); }
@media (min-width: 768px) { .lp-hero + .fm-wrap { margin-top: calc(-56px - 260px); } }
.lp-motif { display: none; position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; animation: lp-motif .25s ease-out both; }
/* Motif hanya di margin kiri/kanan di luar kartu kerja (lebar kartu 1120 px); disembunyikan bila margin terlalu sempit */
@media (min-width: 1240px) { .lp-motif { display: block; } }
.lp-motif-sisi { position: absolute; top: 150px; }
.lp-motif-sisi svg { display: block; width: 100%; max-width: 150px; height: auto; }
.lp-motif-kiri { left: 8px; right: calc(100% - ((100% - 1120px) / 2 + 16px - 16px)); }
.lp-motif-kiri svg { margin-left: auto; }
.lp-motif-kanan { right: 8px; left: calc(100% - ((100% - 1120px) / 2 + 16px - 16px)); }
.lp-motif-kanan svg { margin-right: auto; }
@keyframes lp-motif { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
/* Kartu cincin progres: latar navy semi-opak + blur agar tetap terbaca */
.lp-ring { background: rgba(0, 38, 77, .72); border-color: rgba(255,255,255,.24); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ---------- Salinan Drive ---------- */
.lp-berkas { flex-wrap: wrap; }
.lp-berkas-info { flex: 1 1 160px; }
.lp-berkas-aksi { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.lp-berkas-drive { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; }
.lp-berkas-alasan { font-size: 12.5px; color: #b71c1c; overflow-wrap: anywhere; }
.lp-drive { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e2e8f0; }
.lp-drive-teks { font-size: 13px; font-weight: 600; color: #334155; }
.lp-berkas-alasan { min-width: 0; max-width: 100%; }
@media (max-width: 480px) {
  .lp-berkas { padding-right: 8px; }
  .lp-berkas-aksi { flex: 1 1 100%; margin-left: 0; }
  .lp-berkas-aksi .fm-btn { flex: 1 1 0; min-width: 0; justify-content: center; }
}
.lp-berkas { min-width: 0; }

/* ---------- Dialog rincian: lebar, berkas berdampingan, pratinjau PDF memenuhi sisa tinggi ---------- */
.lp-dlg-xl { display: flex; flex-direction: column; }
.lp-dlg-xl > * { flex: none; }
.lp-dlg-xl .lp-dlg-stat { margin-top: 10px; }
.lp-dlg-xl .lp-dlg-sec { margin-top: 12px; }
.lp-dlg-xl .lp-berkas-list { margin-top: 8px; }
.lp-dlg-xl .lp-catatan { margin-top: 8px; padding: 8px 12px; }
.lp-dlg-xl .ed-field { margin-top: 10px; }
.lp-dlg-xl .kl-dlg-foot { margin-top: 12px; }
.lp-dlg-xl .lp-berkas-drive { margin-top: 2px; }
.lp-prat-wadah { display: flex; flex-direction: column; margin-top: 12px; background: #fff; }
.lp-prat-kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.lp-prat-kepala h3 { font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #64748b; }
.lp-prat-wadah .lp-pratinjau { flex: 1 1 auto; width: 100%; height: auto; min-height: 60vh; margin-top: 0; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; transition: opacity .2s ease-out; }
.lp-prat-wadah.is-muat .lp-pratinjau { opacity: 0; }
.lp-prat-wadah:fullscreen { padding: 12px 16px; margin: 0; }
.lp-prat-wadah:fullscreen .lp-pratinjau { min-height: 0; }
.lp-prat-wadah:-webkit-full-screen { padding: 12px 16px; margin: 0; }
.lp-prat-wadah:-webkit-full-screen .lp-pratinjau { min-height: 0; }
@media (min-width: 768px) {
  .lp-dlg-xl .lp-berkas-list { grid-template-columns: 1fr 1fr; }
  .lp-dlg-xl .lp-berkas { flex-wrap: nowrap; min-width: 0; }
  .lp-dlg-xl .lp-berkas-info { flex: 1 1 0; }
  .lp-dlg-xl .lp-berkas-aksi { flex-wrap: nowrap; flex: none; margin-left: 0; }
  .lp-dlg-xl .lp-berkas-aksi .fm-btn { white-space: nowrap; }
  .lp-dlg-xl.lp-dlg-tinggi { height: 92vh; height: 92dvh; max-height: calc(100vh - 32px); overflow-y: auto; }
  .lp-dlg-xl.lp-dlg-tinggi .lp-prat-wadah { flex: 1 1 0; min-height: 280px; }
  .lp-dlg-xl.lp-dlg-tinggi .lp-prat-wadah .lp-pratinjau { min-height: 0; }
}
@media (max-width: 767px) {
  .lp-dlg-xl .lp-prat-wadah { flex: none; }
}
.lp-dlg-xl textarea.fm-input { min-height: 52px; height: 52px; }

/* Dialog rincian dua kolom: kiri informasi dan aksi, kanan pratinjau PDF tegak */
.lp-rc-dua, .lp-rc-kiri { display: contents; }
.lp-dlg-dua .lp-prat-wadah { order: 1; }
.lp-dlg-dua .lp-rc-akhir { order: 2; }
@media (min-width: 1024px) {
  .lp-dlg-xl.lp-dlg-dua { max-width: min(1440px, 96vw); overflow: hidden; }
  .lp-dlg-xl.lp-dlg-dua.lp-dlg-tinggi { height: 94vh; height: 94dvh; max-height: calc(100vh - 24px); overflow: hidden; }
  .lp-dlg-dua .lp-rc-dua { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; flex: 1 1 0; min-height: 0; }
  .lp-dlg-dua .lp-rc-kiri { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; scrollbar-width: thin;
    /* ruang agar cincin fokus tombol tidak terpotong oleh area gulir */
    padding: 6px 8px 6px 6px; margin: -6px -8px -6px -6px; }
  .lp-dlg-dua .lp-rc-kiri > * { flex: none; }
  .lp-dlg-dua .lp-rc-kiri > h2 { margin-top: 0; }
  .lp-dlg-dua .lp-rc-kiri .kl-dlg-foot { margin-top: auto; padding-top: 14px; flex-wrap: wrap; }
  .lp-dlg-dua .lp-rc-kiri .kl-dlg-foot .fm-btn { flex: 1 1 auto; justify-content: center; }
  .lp-dlg-dua .lp-rc-kiri .ed-field { margin-top: 14px; }
  .lp-dlg-dua .lp-rc-kiri textarea.fm-input { min-height: 84px; height: 84px; }
  .lp-dlg-xl.lp-dlg-dua .lp-berkas-list { grid-template-columns: 1fr; }
  .lp-dlg-dua .lp-prat-wadah { margin-top: 0; min-height: 0; height: 100%; }
  .lp-dlg-dua .lp-prat-wadah .lp-pratinjau { flex: 1 1 0; min-height: 0; }
}

/* Saklar "tampil di katalog publik" (dialog rincian) dan penanda sel tersembunyi */
.lp-pub { margin-top: 12px; padding: 10px 14px; border: 1.5px solid #e2e8f0; border-radius: 12px; background: #f8fafc; }
.lp-pub-kepala { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lp-pub-judul { font-size: 14px; font-weight: 800; color: #0f172a; min-width: 0; }
.lp-pub-ket { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: #64748b; overflow-wrap: anywhere; }
.lp-pub.is-mati .lp-pub-judul { color: #64748b; }
.lp-pub .ka-switch:disabled { cursor: not-allowed; }
.lp-tabel td.lp-tw, .lp-tw { position: relative; }
.lp-sembunyi { position: absolute; top: 3px; right: 3px; display: inline-flex; width: 14px; height: 14px; color: #64748b; }
.lp-sembunyi svg { width: 14px; height: 14px; }

/* Surat pernyataan: saklar nonaktif tampil abu-abu (bukan hijau) walau nilai aslinya aktif; tombol bahaya garis; chip kecil di berkas */
.ka-switch.is-mati, .ka-switch.is-mati:disabled { opacity: 1; cursor: not-allowed; color: #94a3b8; }
.ka-switch.is-mati .ka-switch-trek, .ka-switch.is-mati[aria-checked="true"] .ka-switch-trek { background: #e2e8f0; }
.ka-switch.is-mati .ka-switch-trek::after { transform: translateX(0); background: #f8fafc; box-shadow: 0 0 0 1px #cbd5e1; }
.fm-btn.lp-btn-bahaya { color: #b91c1c; border-color: #fca5a5; }
.fm-btn.lp-btn-bahaya:hover:not(:disabled) { background: #fef2f2; border-color: #f87171; }
.lp-chip-sp { margin-left: 8px; padding: 1px 8px; font-size: 11px; }
.lp-sp-unggah { margin-top: 10px; }

/* ---------- Penampil PDF pdf.js (js/pdf-tampil.js): pengganti iframe di Android / iOS ---------- */
.lp-pratinjau.pdf-tampil { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #e2e8f0; padding: 0; }
.pdf-tampil .pdf-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; background: #fff; border-bottom: 1px solid #cbd5e1; font-size: 12.5px; font-weight: 700; color: #334155; }
.pdf-tampil .pdf-bar.is-mati { visibility: hidden; }
.pdf-tampil .pdf-grup { display: inline-flex; align-items: center; gap: 6px; }
.pdf-tampil .pdf-zoom { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; color: #64748b; }
.pdf-tampil .pdf-tb { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #cbd5e1; border-radius: 10px; background: #f8fafc; color: #0f172a; font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; transition: background .15s, color .15s, transform .1s; }
.pdf-tampil .pdf-tb:hover:not(:disabled) { background: #003366; border-color: #003366; color: #fff; }
.pdf-tampil .pdf-tb:active:not(:disabled) { transform: scale(.94); }
.pdf-tampil .pdf-tb:disabled { opacity: .4; cursor: default; }
.pdf-tampil .pdf-tb:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #0055a4; }
.pdf-tampil .pdf-gulung { flex: 1 1 0; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; overscroll-behavior: contain; }
.pdf-tampil .pdf-isi { display: flex; flex-direction: column; align-items: flex-start; width: max-content; min-width: 100%; padding: 8px; gap: 8px; box-sizing: border-box; }
.pdf-tampil .pdf-hal { position: relative; flex: none; margin: 0 auto; background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .18); }
.pdf-tampil .pdf-hal canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.pdf-tampil .pdf-no { position: absolute; z-index: 1; right: 6px; bottom: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(15, 23, 42, .6); color: #fff; font-size: 11px; font-weight: 700; pointer-events: none; }
.pdf-tampil .pdf-muat { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: #64748b; font-size: 13px; font-weight: 600; }
.pdf-tampil .pdf-spin { width: 20px; height: 20px; border-radius: 50%; border: 3px solid #cbd5e1; border-top-color: #0055a4; animation: pdf-putar .8s linear infinite; }
@keyframes pdf-putar { to { transform: rotate(360deg); } }
.pdf-tampil .pdf-galat, .pdf-tampil.is-galat .pdf-galat { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; color: #475569; font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) { .pdf-tampil .pdf-gulung { scroll-behavior: auto; } .pdf-tampil .pdf-spin { animation-duration: 2s; } }