/* ==========================================================================
   Katalog Laporan Kegiatan dan Monitoring Pengumpulan (bagian publik laporan.php).
   Dipakai bersama css/form.css, form-panel.css, form-kelola.css, laporan.css (fm-*, kl-*, rk-*, lp-*).
   Hanya kelas pb-* yang baru. Tanpa garis aksen kiri, tanpa kontrol bawaan peramban.
   ========================================================================== */

/* ---------- Muncul saat digulir ---------- */
.pb-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.pb-reveal.is-tampil { opacity: 1; transform: none; }

.pb-sec { scroll-margin-top: 96px; }
.pb-sec .fm-input:focus-visible, .pb-cari input:focus-visible { outline: none; }
.pb-sec button:focus-visible, .pb-sec a:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #0055a4; }

/* ---------- Panel ---------- */
.pb-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; box-shadow: 0 10px 30px -18px rgba(15,23,42,.25); overflow: hidden; }
.pb-bar { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end; padding: 16px; border-bottom: 1px solid #e2e8f0; background: #fbfcfe; }
.pb-f { min-width: 0; }
.pb-f-cari { flex: 1 1 260px; max-width: 440px; }
.pb-f .lp-pilih-w { min-width: 200px; }
.pb-f .kl-tab { display: flex; }
.pb-f .kl-tab button { min-height: 34px; }
.pb-cari { position: relative; }
.pb-cari svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.pb-cari input { display: block; width: 100%; box-sizing: border-box; min-height: 40px; padding: 8px 12px 8px 36px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; background: #fff; color: #0f172a; -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s; }
.pb-cari input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.pb-cari input:focus { outline: none; border-color: #0055a4; box-shadow: 0 0 0 3px rgba(0,85,164,.14); }

.pb-hitung { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 14px 16px 0; font-size: 14px; color: #475569; }
.pb-hitung b { color: #0f172a; font-variant-numeric: tabular-nums; }
.pb-hitung small { font-size: 12.5px; color: #64748b; }

/* ---------- Kartu laporan ---------- */
.pb-isi { padding: 16px; }
.pb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
@media (min-width: 640px) { .pb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) { .pb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }

/* Satu kartu = satu bingkai (sampul + judul + satker) agar keterangan jelas milik sampul di atasnya */
.pb-kartu {
  position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%; height: 100%; min-width: 0; padding: 8px 8px 12px; text-align: left; font: inherit; color: inherit;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 6px 16px -12px rgba(15,23,42,.35);
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .22s, box-shadow .22s;
}
.pb-kartu-w:hover .pb-kartu { border-color: #b9cde4; box-shadow: 0 18px 28px -18px rgba(0,51,102,.45); }
.pb-kartu-w { position: relative; min-width: 0; transition: transform .22s cubic-bezier(.2,.7,.2,1); }
.pb-kartu-w .pb-salin { right: 16px; top: 16px; }
.pb-kartu .pb-sampul { box-shadow: none; }
.pb-kartu-w:hover { transform: translateY(-5px); }
.pb-kartu-w:active { transform: translateY(-1px) scale(.99); }
.pb-sampul {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1.414; overflow: hidden; border-radius: 12px; background: #eef2f7;
  border: 1px solid #e2e8f0; box-shadow: 0 6px 16px -10px rgba(15,23,42,.35); transition: box-shadow .22s, border-color .22s;
}
.pb-kartu-w:hover .pb-sampul { border-color: #b9cde4; box-shadow: 0 22px 30px -16px rgba(0,51,102,.5); }
.pb-sampul-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity .35s ease-out, transform .5s cubic-bezier(.2,.7,.2,1); }
.pb-sampul.is-siap .pb-sampul-img { opacity: 1; }
.pb-kartu:hover .pb-sampul-img { transform: scale(1.03); }
.pb-sampul-skel { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 0; }
.pb-sampul.is-siap .pb-sampul-skel { display: none; }
.pb-fb {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 16px 14px; color: #fff; overflow: hidden;
  background: linear-gradient(155deg, #003366 0%, #0055a4 48%, #f57c00 130%);
}
.pb-fb::before { content: ""; position: absolute; right: -30%; top: -12%; width: 85%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.1); }
.pb-fb::after { content: ""; position: absolute; left: 14px; top: 46px; width: 38px; height: 4px; border-radius: 4px; background: #f57c00; }
.pb-fb-tw { position: relative; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #ffd9a8; }
.pb-fb-nama { position: relative; font-size: 16px; font-weight: 800; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pb-fb-satker { position: relative; font-size: 11.5px; font-weight: 600; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Lencana di bawah sampul agar kop/logo di bagian atas laporan tidak tertutup */
.pb-lencana {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 5px; padding: 28px 8px 8px; pointer-events: none;
  background: linear-gradient(to top, rgba(15,23,42,.45), rgba(15,23,42,0));
}
.pb-fb { padding-bottom: 44px; }
.pb-lencana .pb-chip { box-shadow: 0 2px 6px rgba(15,23,42,.25); background: rgba(255,255,255,.96); }
.pb-lencana .pb-chip.is-tw { background: #003366; color: #fff; }
.pb-lencana .pb-chip.is-pin { background: #fff; color: #003366; }
.pb-lencana .pb-chip.is-rad { background: #fff; color: #1b5e20; }
.pb-lencana .pb-chip.is-wil { background: #f57c00; color: #fff; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-salin, .pb-ikon {
  display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; border: 1px solid #e2e8f0; color: #334155; background: rgba(255,255,255,.96);
  cursor: pointer; font: inherit; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, color .15s, border-color .15s, opacity .18s, transform .15s;
}
.pb-salin svg, .pb-ikon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pb-salin { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 2px 8px rgba(15,23,42,.25); opacity: 0; }
.pb-kartu-w:hover .pb-salin, .pb-salin:focus-visible, .pb-salin.is-ok { opacity: 1; }
@media (hover: none) { .pb-salin { opacity: 1; width: 40px; height: 40px; } }
.pb-salin:hover, .pb-ikon:hover { background: #003366; border-color: #003366; color: #fff; }
.pb-salin.is-ok, .pb-ikon.is-ok { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.pb-ikon { position: relative; width: 40px; height: 40px; border-radius: 12px; background: #f8fafc; }
.pb-ikon:active, .pb-salin:active { transform: scale(.94); }
.pb-sec .pb-salin:focus-visible, .pb-dlg .pb-ikon:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #0055a4; }
.pb-dlg-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; }
.pb-dlg-info { flex: 1 1 auto; min-width: 0; }
.pb-dlg-kepala h2 { margin: 0; font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pb-dlg-kepala h2 { padding-top: 7px; }
.pb-dlg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; font-size: 12.5px; color: #64748b; }
.pb-dlg-meta .pb-chip { font-size: 11px; padding-top: 1px; padding-bottom: 1px; }
.pb-dlg-teks { min-width: 0; overflow-wrap: anywhere; }
.pb-dlg-aksi { display: flex; flex: none; align-items: center; gap: 6px; }
.pb-dlg-aksi .pb-ikon { width: 38px; height: 38px; border-radius: 10px; }
.pb-dlg-unduh { position: relative; height: 38px; white-space: nowrap; }
.pb-dlg .pb-dlg-unduh:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #0055a4; }
.pb-k-info { display: block; min-width: 0; padding: 0 4px; }
.pb-k-nama { display: -webkit-box; font-size: 14.5px; font-weight: 700; line-height: 1.35; color: #0f172a; min-height: 2.7em; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; transition: color .2s; }
.pb-kartu:hover .pb-k-nama { color: #003366; }
.pb-k-satker { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #003366; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-k-tgl { display: block; margin-top: 2px; font-size: 12px; color: #64748b; }
.pb-chip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 9999px; background: #eef3f9; color: #334155; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pb-chip.is-pin { background: #e0ecf8; color: #003366; }
.pb-chip.is-rad { background: #e8f5e9; color: #1b5e20; }
.pb-chip.is-kat { background: #fff4e5; color: #9a4a00; }
.pb-masuk { animation: pb-naik .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes pb-naik { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.pb-skel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pb-skel .lp-skel-b { height: 12px; }
.pb-skel .pb-skel-sampul { width: 100%; height: auto; aspect-ratio: 1 / 1.414; border-radius: 12px; }

.pb-more { display: flex; justify-content: center; padding: 6px 16px 22px; }
.pb-more .fm-btn { min-width: 220px; }
/* Paginasi katalog */
.pb-hal { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: nowrap; max-width: 100%; }
.pb-hal-nomor { display: flex; align-items: center; gap: 6px; }
.pb-hal-b {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 12px;
  border: 1px solid #e2e8f0; background: #fff; color: #334155; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.pb-hal-b svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pb-hal-b:hover:not(:disabled):not(.is-aktif) { border-color: #b9cde4; color: #003366; background: #f1f6fc; }
.pb-hal-b:active:not(:disabled) { transform: scale(.94); }
.pb-hal-b:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #0055a4; }
.pb-hal-b.is-aktif { background: #003366; border-color: #003366; color: #fff; box-shadow: 0 6px 14px -8px rgba(0,51,102,.7); cursor: default; }
.pb-hal-b:disabled { opacity: .4; cursor: not-allowed; }
.pb-hal-elip { min-width: 20px; text-align: center; color: #94a3b8; font-weight: 700; }
.pb-hal-hp { display: none; font-size: 13.5px; font-weight: 600; color: #475569; padding: 0 6px; white-space: nowrap; }
@media (max-width: 479px) {
  .pb-hal-nomor { display: none; }
  .pb-hal-hp { display: inline; }
  .pb-hal { gap: 12px; }
}

/* ---------- Monitoring ---------- */
.pb-bar2 { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end; padding: 16px; border-bottom: 1px solid #e2e8f0; background: #fbfcfe; }
.pb-stat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 16px; }
@media (max-width: 899px) { .pb-stat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pb-sk { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 14px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s, border-color .2s; }
.pb-sk:hover { transform: translateY(-3px); box-shadow: 0 14px 24px -18px rgba(15,23,42,.45); border-color: #cbd5e1; }
.pb-sk-ik { flex: none; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; }
.pb-sk-ik svg { width: 22px; height: 22px; }
.pb-sk-b { min-width: 0; }
.pb-sk-v { display: block; margin-top: 2px; font-size: 28px; font-weight: 800; line-height: 1.1; color: #0f172a; font-variant-numeric: tabular-nums; }
.pb-sk-s { display: block; margin-top: 2px; font-size: 12px; color: #64748b; }
.pb-sk.k-wajib .pb-sk-ik { background: #e0ecf8; color: #003366; }
.pb-sk.k-ok .pb-sk-ik { background: #e3f1e4; color: #1f6a24; }
.pb-sk.k-ok .pb-sk-v { color: #1f6a24; }
.pb-sk.k-tunggu .pb-sk-ik { background: #fff0dc; color: #a85200; }
.pb-sk.k-tunggu .pb-sk-v { color: #a85200; }
.pb-sk.k-persen .pb-sk-ik { background: #fff4e5; color: #f57c00; }
.pb-sk-bar { display: block; height: 6px; margin-top: 8px; border-radius: 9999px; background: #e2e8f0; overflow: hidden; }
.pb-sk-bar i { display: block; height: 100%; border-radius: 9999px; background: linear-gradient(90deg, #f57c00, #2e7d32); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform .7s cubic-bezier(.2,.7,.2,1); }

.pb-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 0 16px 12px; font-size: 12.5px; color: #475569; }
.pb-legenda span { display: inline-flex; align-items: center; gap: 6px; }

.pb-tabel-wrap { position: relative; overflow: auto; max-height: 640px; overscroll-behavior: contain; border-top: 1px solid #e2e8f0; }
.pb-tabel { width: 100%; min-width: 0; }
.pb-tabel th { white-space: nowrap; }
.pb-tabel th.pb-c-tw, .pb-tabel td.pb-c-tw { text-align: center; padding-left: 6px; padding-right: 6px; width: 128px; }
.pb-tabel .pb-c-nama { min-width: 220px; max-width: none; }
.pb-tabel td.pb-c-nama { padding-top: 10px; padding-bottom: 10px; }
.pb-tabel th:first-child, .pb-tabel td:first-child { position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 0 #eef2f6; }
.pb-tabel th:first-child { z-index: 3; }
.pb-tabel tr.lp-grup td:first-child { position: static; box-shadow: none; }
.pb-nama { display: block; font-weight: 600; color: #0f172a; line-height: 1.35; overflow-wrap: anywhere; }
.pb-nama-s { display: block; margin-top: 2px; font-size: 12px; color: #64748b; }
.pb-st { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 6px; border-radius: 9999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pb-st svg { width: 16px; height: 16px; flex: none; }
.pb-st.is-ok { background: #e3f1e4; color: #1f6a24; }
.pb-st.is-tunggu { background: #fff0dc; color: #a85200; }
.pb-st.is-belum { background: #fde8e8; color: #b71c1c; }
.pb-st.is-tidak { color: #b6c0cc; padding: 3px 8px; }
.pb-tabel td.pb-tw-aktif, .pb-tabel th.pb-tw-aktif { background-color: #f0f7ff; }
.pb-tabel tbody tr:hover td.pb-tw-aktif { background-color: #e6f1fd; }
.pb-tabel tbody tr.lp-grup:hover td { background: #eef3f9; }
.pb-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; padding: 12px 16px; border-top: 1px solid #e2e8f0; background: #f8fafc; font-size: 12.5px; color: #64748b; line-height: 1.5; }
.pb-foot b { color: #334155; }
.pb-geser { display: none; margin: 0; padding: 8px 16px 0; font-size: 12px; color: #64748b; }

@media (max-width: 639px) {
  .pb-f, .pb-f-cari { flex: 1 1 100%; max-width: none; }
  .pb-f .lp-pilih-w { min-width: 0; }
  .pb-f .kl-tab { width: 100%; }
  .pb-f .kl-tab button { flex: 1 1 0; justify-content: center; }
  .pb-tabel .pb-c-nama { min-width: 0; width: 46%; }
  .pb-tabel th.pb-c-tw, .pb-tabel td.pb-c-tw { width: 13%; padding-left: 2px; padding-right: 2px; }
  .pb-tabel th, .pb-tabel td { padding-left: 8px; padding-right: 8px; }
  .pb-tabel th.pb-c-tw { font-size: 10.5px; letter-spacing: 0; }
  .pb-st { padding: 3px; }
  .pb-st .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pb-st.is-tidak { padding: 3px; }
  .pb-isi { padding: 12px; }
  .pb-stat { padding: 12px; gap: 10px; }
  /* HP: ikon di atas teks agar label panjang (mis. "Persentase terkumpul") tidak terpotong */
  .pb-sk { flex-direction: column; align-items: flex-start; padding: 12px; gap: 8px; }
  .pb-sk-ik { width: 34px; height: 34px; border-radius: 10px; }
  .pb-sk-ik svg { width: 18px; height: 18px; }
  .pb-sk-b { width: 100%; }
  .pb-sk .rk-tile-l { display: block; font-size: 10.5px; letter-spacing: .04em; line-height: 1.3; overflow-wrap: anywhere; }
  .pb-sk-v { font-size: 24px; }
  .pb-sk-s { font-size: 11.5px; line-height: 1.35; }
  .pb-more .fm-btn { width: 100%; }
}
.pb-tabel-wrap { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }

/* ---------- Dialog pratinjau ---------- */
.pb-dlg.kl-dlg { padding: 16px 18px; }
.pb-dlg .ka-galat { margin-top: 8px; }
.pb-dlg .lp-prat-wadah { margin-top: 12px; }
.pb-dlg .lp-pratinjau { background: #f1f5f9; }
.pb-dlg .pb-catatan-hp { display: none; margin-top: 6px; font-size: 12px; color: #64748b; }
@media (min-width: 768px) {
  .pb-dlg.lp-dlg-xl.lp-dlg-tinggi { height: 96vh; height: 96dvh; max-height: calc(100vh - 16px); }
}
@media (max-width: 767px) {
  .pb-dlg .pb-catatan-hp { display: block; }
  .pb-dlg .lp-prat-wadah .lp-pratinjau { min-height: 62vh; }
}
/* HP: tombol unduh jadi ikon agar judul tetap lega */
@media (max-width: 559px) {
  .pb-dlg-unduh { width: 38px; padding: 0; justify-content: center; }
  .pb-dlg-unduh span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pb-dlg-kepala h2 { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .pb-reveal { opacity: 1; transform: none; transition: none; }
  .pb-masuk { animation: none; }
  .pb-kartu-w, .pb-kartu-w:hover, .pb-sk, .pb-sk:hover { transform: none; transition: none; }
  .pb-kartu:hover .pb-sampul-img { transform: none; }
}

@media (max-width: 639px) {
  .pb-tabel .lp-grup-btn { gap: 6px; padding: 8px 10px; }
  .pb-tabel .lp-grup-nama { flex: 1 1 auto; min-width: 0; white-space: normal; letter-spacing: .03em; }
  .pb-tabel .lp-grup-n, .pb-tabel .lp-grup-bar { display: none; }
  .pb-tabel .lp-grup-prog { flex: none; font-size: 11px; }
  .pb-tabel .pb-c-nama { width: auto; }
  .pb-tabel th.pb-c-tw, .pb-tabel td.pb-c-tw { width: 44px; }
  .pb-tabel th:first-child, .pb-tabel td:first-child { box-shadow: none; }
}