/* ════════════════════════════════════════════════════════════════════════
 * SESAMA — assets/css/sesama.css
 * Diekstrak dari fungsi css() di koneksi.php (Batch 0 — fondasi CSS/aset).
 * File sungguhan, bukan lagi inline <style> — supaya di-cache browser satu
 * kali dan tidak dikirim ulang di setiap laman. Semua nama class SENGAJA
 * dipertahankan sama seperti sebelumnya (backward compatible) supaya laman
 * yang belum dibangun ulang di batch berikutnya tetap tampil benar.
 * ════════════════════════════════════════════════════════════════════════ */
:root{
  --ink:#0e1216;--ink-2:#2c3641;--ink-3:#4d5966;
  /* "Cerah": latar jadi putih ber-tint biru sangat tipis (dulu abu-hijau muted) */
  --paper:#f6fafc;--panel:#fff;--panel-2:#f4f8fb;--rule:#cbd5e1;--rule-2:#e2e8f0;
  /* Palet identik dengan Pertamina / Pertamina Foundation: biru–hijau–merah */
  --prim:#0067ac;--prim-d:#00507f;--prim-bg:#e0edf7;
  --ok:#00954a;--ok-bg:#dcf3e6;
  --signal:#e2231a;--signal-bg:#fbe2e0;
  --warn:#b7750c;--warn-bg:#fef3dc;
  --accent-grn:#8dc63f;--accent-grn-bg:#eef7e0;
  --f-body:'IBM Plex Sans',-apple-system,sans-serif;
  --f-data:'IBM Plex Mono',ui-monospace,monospace;
  --rad:8px;--rad-lg:12px;
  --sidebar-w:266px;
  --shadow-sm:0 1px 2px rgba(14,18,22,.05),0 1px 3px rgba(14,18,22,.04);
  --shadow-md:0 6px 20px rgba(14,18,22,.07);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);background:var(--paper);color:var(--ink);font-size:15px;line-height:1.5}
:focus-visible{outline:2px solid var(--prim);outline-offset:2px}

/* ── SIDEBAR (.s-nav) — overlay/melayang di SEMUA lebar layar (baru), bukan cuma
   di mobile. Dulu di atas 880px sidebar selalu tampil PERMANEN & mendorong konten
   (.wrap{margin-left:var(--sidebar-w)}) — sekarang sidebar SELALU disembunyikan
   default (transform:translateX(-100%)) & muncul di ATAS konten (position:fixed,
   TIDAK mendorong .wrap) lewat tombol ☰, tertutup otomatis begitu klik di luar
   sidebar (lewat .s-nav-veil, lihat aturannya di bawah — sekarang berlaku di semua
   lebar layar, tidak cuma dalam @media seperti dulu). Halaman jadi selalu full-lebar. */
.s-nav{background:linear-gradient(180deg,#0c1119 0%,#0f1620 100%);color:#fff;
  position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);z-index:2500;
  display:flex;flex-direction:column;box-shadow:4px 0 25px rgba(0,0,0,.35);
  transform:translateX(-100%);transition:transform .25s cubic-bezier(0.4,0,0.2,1)}
body.side-open .s-nav{transform:translateX(0)}
.s-nav::before{content:'';display:block;height:4px;flex:none;
  background:linear-gradient(90deg,var(--prim) 0 34%,var(--accent-grn) 34% 67%,var(--signal) 67% 100%)}
.s-nav-brand{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);min-width:0}
.s-nav-brand-link{display:flex;align-items:center;text-decoration:none;min-width:0;flex:1}
.s-nav-brand-logo{max-height:36px;max-width:180px;width:auto;height:auto;object-fit:contain;display:block}
.s-nav-close{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#cbd5e1;
  width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:1.1rem;line-height:1;transition:all .15s ease;flex-shrink:0}
.s-nav-close:hover{background:var(--signal);color:#fff;border-color:var(--signal)}
.logo-icon{width:32px;height:32px;background:var(--prim);color:#fff;font-weight:700;
  font-size:1rem;display:flex;align-items:center;justify-content:center;border-radius:8px;flex:0 0 auto}
.s-nav-logo-text{font-family:var(--f-data);font-weight:700;font-size:1.3rem;letter-spacing:.01em;
  line-height:1;background:linear-gradient(90deg,#1a6fc4 0%,#6a4fa8 30%,#a83f9a 55%,#c92d5e 75%,#e2231a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;flex:0 0 auto}
.logo-text{font-weight:700;font-size:1.05rem;letter-spacing:.02em;color:#fff}
.logo-sub{font-size:.62rem;color:#8593a3;line-height:1;margin-top:2px}
/* Padding & gap sengaja dipadatkan (dulu lebih longgar) supaya SEMUA ~22 baris menu
   (7 kelompok + 15 tautan) muat tanpa scrollbar internal di tinggi layar wajar —
   permintaan eksplisit: sidebar tidak boleh pakai scrollbar sendiri, kesannya
   tidak profesional. overflow-y:auto TETAP dipertahankan cuma sebagai jaring
   pengaman di layar yang SANGAT pendek, bukan perilaku normal yang diharapkan. */
/* overflow-x:hidden WAJIB di sini — tanpa ini, label menu yang panjang (mis.
   "Penanganan Ketidaksesuaian (NCR)") pernah memaksa scrollbar HORIZONTAL
   muncul & memotong sisi kiri kelompok menu (bug nyata yang sempat ketahuan).
   overflow-y:auto TETAP jaring pengaman kalau layar sangat pendek, tapi dibuat
   setipis/setak-terlihat mungkin (lihat ::-webkit-scrollbar) — bukan perilaku
   yang diharapkan normal, cuma supaya menu TIDAK PERNAH terpotong sama sekali. */
.s-nav-links{flex:1;padding:8px 10px 10px;display:flex;flex-direction:column;gap:1px;
  overflow-y:auto;overflow-x:hidden;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.s-nav-links::-webkit-scrollbar{width:5px}
.s-nav-links::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
.s-nav-links::-webkit-scrollbar-track{background:transparent}
.s-nav-grp{font-family:var(--f-data);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;
  color:#5c6b7e;padding:10px 12px 3px;font-weight:600}
.s-nav-grp:first-child{padding-top:4px}
/* white-space TIDAK LAGI nowrap — label panjang sekarang boleh jadi 2 baris
   (line-height dirapatkan) daripada memaksa sidebar melebar/scroll horizontal. */
.s-nav-link{display:flex;align-items:center;gap:11px;color:#98a6b8;text-decoration:none;
  padding:6px 12px;border-radius:7px;font-size:.8rem;font-weight:500;line-height:1.25;transition:all .15s}
.s-nav-link .ico{width:18px;height:18px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;margin-top:1px}
.s-nav-link .txt{align-self:center}
.s-nav-link .ico svg{width:100%;height:100%}
.s-nav-link:hover{color:#fff;background:rgba(255,255,255,.06)}
.s-nav-link.on{color:#fff;font-weight:700;background:var(--prim);box-shadow:0 2px 10px rgba(0,103,172,.45)}
.s-nav-notif-wrap{position:relative;padding:0 10px;border-top:1px solid rgba(255,255,255,.08)}
.s-nav-notif-btn{width:100%;text-align:left;background:none;border:none;color:#98a6b8;font-size:.8rem;
  font-weight:600;padding:12px 8px;cursor:pointer;display:flex;align-items:center;gap:6px;font-family:var(--f-body)}
.s-nav-notif-btn:hover{color:#fff}
.s-nav-notif-badge{background:var(--signal);color:#fff;font-size:.64rem;font-weight:700;
  padding:1px 6px;border-radius:10px;margin-left:auto}
.s-nav-notif-panel{display:none;position:absolute;left:10px;bottom:100%;margin-bottom:6px;width:270px;
  background:#fff;border-radius:10px;box-shadow:var(--shadow-md);overflow:hidden;z-index:400}
.s-nav-notif-panel.on{display:block}
.s-nav-notif-item{display:block;padding:10px 12px;font-size:.78rem;color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid var(--rule-2);line-height:1.4}
.s-nav-notif-item:last-child{border-bottom:none}
.s-nav-notif-item:hover{background:var(--paper)}
.s-nav-notif-item.sig{border-left:3px solid var(--signal)}
.s-nav-notif-item.warn{border-left:3px solid var(--warn)}
.s-nav-notif-empty{padding:14px 12px;font-size:.78rem;color:var(--ink-3);text-align:center;font-style:italic}
.s-nav-user{display:flex;align-items:center;gap:10px;padding:14px 16px;border-top:1px solid rgba(255,255,255,.08);min-width:0}
.s-nav-user-avt{width:32px;height:32px;border-radius:50%;background:var(--accent-grn);color:#0c1119;
  font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.s-nav-user-info{flex:1;min-width:0}
.s-nav-user-name{color:#e4e9ee;font-size:.78rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-nav-user-role{color:#7c8ba0;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;margin-top:1px}
.s-nav-logout{color:#98a6b8;text-decoration:none;font-size:1rem;line-height:1;
  border:1px solid rgba(255,255,255,.14);width:30px;height:30px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:all .15s}
.s-nav-logout:hover{color:#fff;background:var(--signal);border-color:var(--signal)}
/* Tombol ☰ & veil (baru: SELALU aktif di semua lebar layar, dulu cuma di bawah
   880px) — sidebar sekarang overlay penuh, bukan kolom permanen yang mendorong
   konten, jadi tombol pembuka & lapisan penutup-otomatis-saat-klik-di-luar ini
   harus selalu ada, bukan cuma di mobile. */
.s-nav-toggle{display:flex;align-items:center;justify-content:center;position:fixed;top:14px;left:14px;z-index:2000;width:40px;height:40px;
  border-radius:8px;background:var(--ink);color:#fff;border:none;font-size:1.05rem;cursor:pointer;box-shadow:var(--shadow-md);
  transition:all .2s ease}
.s-nav-toggle:hover{background:var(--prim)}
body.side-open .s-nav-toggle{opacity:0;pointer-events:none;transform:translateX(-16px)}
.s-nav-veil{display:none}
body.side-open .s-nav-veil{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:2400;cursor:pointer}

/* ── PETA (LEAFLET) Z-INDEX LAYER FIX ── */
.leaflet-container{z-index:1!important}
.leaflet-pane{z-index:10!important}
.leaflet-top,.leaflet-bottom{z-index:20!important}
#map,#peta-cakupan,.map-wrap{position:relative;z-index:1}

/* ── LAYOUT ── */
/* .wrap berpusat di tengah layar secara simetris (max-width 1380px, margin: 0 auto)
   sehingga tidak mepet ke kiri di monitor/laptop lebar dan ada margin seimbang di kanan-kiri.
   padding-top 82px memberi ruang aman agar tombol menu ☰ melayang bebas tanpa menabrak judul. */
.wrap{margin:0 auto;max-width:1400px;padding:82px 32px 60px;min-height:100vh;box-sizing:border-box}
.wrap-narrow{max-width:880px;margin-left:auto;margin-right:auto}
.card-center{max-width:880px;margin-left:auto;margin-right:auto}
.page-title{font-size:1.55rem;font-weight:700;margin-bottom:6px;text-wrap:balance}
.page-sub{font-size:.83rem;color:var(--ink-3);margin-bottom:22px}
.sub-tabs{display:flex;gap:6px;background:var(--panel);border:1px solid var(--rule);
  padding:6px;border-radius:var(--rad);margin-bottom:18px;flex-wrap:wrap;box-shadow:var(--shadow-sm)}
/* .sub-tab dipakai baik pada <button> maupun <a> (mis. resources/views/retur/index.blade.php).
   text-decoration & display DITAMBAHKAN 22 Agu 2026 — tanpa ini, versi <a>
   menampilkan garis bawah + warna link bawaan browser alih-alih gaya tab. */
.sub-tab{padding:7px 14px;font-size:.82rem;font-weight:600;border:none;background:none;
  cursor:pointer;border-radius:6px;color:var(--ink-3);transition:all .15s;
  text-decoration:none;display:inline-block}
.sub-tab.on{background:var(--prim);color:#fff}
.sub-tab:hover:not(.on){background:var(--panel-2);color:var(--ink)}
.sub-tab:visited{color:inherit}
.tab-panel{display:none}.tab-panel.on{display:block}

/* ── CARD ── */
.card{background:var(--panel);border:1px solid var(--rule);border-radius:var(--rad-lg);
  padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow-sm);min-width:0}
.card h2{font-size:1.05rem;font-weight:700;margin-bottom:12px;padding-bottom:8px;
  border-bottom:1px solid var(--rule-2)}
.card h3{font-size:.95rem;font-weight:700;margin-bottom:10px}
.card-row{display:flex;gap:16px;flex-wrap:wrap}
.card-row .card{flex:1;min-width:280px}

/* ── STACK ROW (baru) — form/aksi di ATAS, tabel di BAWAH, keduanya lebar penuh.
   Dulu banyak laman pakai .card-row (berdampingan) untuk pasangan form+tabel —
   tabelnya jadi sempit berbagi tempat dengan form, isinya kepaksa scroll horizontal
   di frame kecil. .stack-row TIDAK mengubah .card-row (masih dipakai apa adanya utk
   susunan kartu analitik/KPI yang memang cocok berdampingan, mis. dashboard.php). */
.stack-row{display:flex;flex-direction:column;gap:16px}
.stack-row .card{width:100%}

/* ── STATISTIK BOX ── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:18px}
.stat-box{background:var(--panel);border:1px solid var(--rule);border-radius:var(--rad-lg);
  padding:14px 12px;text-align:center;box-shadow:var(--shadow-sm);transition:box-shadow .15s,transform .15s;min-width:0;
  display:flex;flex-direction:column;justify-content:center;align-items:center}
.stat-box:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.stat-box .val{font-size:1.65rem;font-weight:700;font-family:var(--f-data);color:var(--prim);
  line-height:1.2;margin-bottom:4px;font-variant-numeric:tabular-nums;white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis}
.stat-box .val-sm, .stat-box .val-money{font-size:1.2rem!important}
.stat-box .lbl{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-3);line-height:1.25}
.stat-box .sub{font-size:.7rem;color:var(--ink-2);margin-top:3px;line-height:1.2}
.stat-box.ok .val{color:var(--ok)}
.stat-box.warn .val{color:var(--warn)}
.stat-box.sig .val{color:var(--signal)}
.stat-box.accent .val{color:var(--accent-grn)}

/* Sidebar overlay + tombol ☰ + veil sekarang berlaku universal (lihat aturan di
   atas, sudah tidak dibungkus @media lagi) — media query ini TINGGAL menyempitkan
   padding kiri/kanan .wrap di layar sempit supaya konten tidak terlalu mepet tepi. */
@media(max-width:880px){
  .wrap{padding:66px 16px 40px}
}
@media print{ .s-nav-toggle,.s-nav-veil{display:none!important} }

/* ── FORM ── */
label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-2);display:block;margin-bottom:3px;margin-top:10px}
/* ── FORM CONTROL & TOMBOL UNIFORM SIZING ── */
input[type=text],input[type=date],input[type=number],input[type=email],
input[type=password],select,textarea{width:100%;border:1px solid var(--rule);padding:8px 12px;
  font-family:var(--f-body);font-size:.85rem;color:var(--ink);background:#fff;
  border-radius:6px;box-sizing:border-box}
input[type=text],input[type=date],input[type=number],input[type=email],
input[type=password],select{height:38px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--prim);outline-offset:1px}

.pw-eye-wrap{position:relative}
.pw-eye-wrap input[type=password],.pw-eye-wrap input[type=text]{padding-right:38px}
.pw-eye-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;padding:6px;color:var(--ink-3);
  display:flex;align-items:center;border-radius:5px}
.pw-eye-btn:hover{color:var(--ink);background:var(--paper)}
.pw-eye-btn svg{width:16px;height:16px}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.g4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}

.form-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.form-row .f1{flex:1;min-width:120px}
.chk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 10px;
  border:1px solid var(--rule);border-radius:6px;padding:10px;margin-top:4px}
.chk-grid label{display:flex;align-items:center;gap:6px;font-size:.83rem;color:var(--ink);
  margin:0;font-weight:400;cursor:pointer}
.chk-grid input[type=checkbox]{width:auto;accent-color:var(--prim)}
.chk-grid .chk-all{grid-column:1/-1;border-bottom:1px solid var(--rule);padding-bottom:6px;margin-bottom:2px;font-weight:600}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--f-body);
  font-size:.85rem;font-weight:700;height:38px;padding:0 16px;border:1.5px solid var(--prim);
  background:var(--prim);color:#fff;border-radius:7px;cursor:pointer;
  text-decoration:none;transition:all .12s;line-height:1;box-sizing:border-box;white-space:nowrap}
.btn .btn-ic{width:15px;height:15px;flex:none}
.btn:hover{background:var(--prim-d);border-color:var(--prim-d)}
.btn.ghost{background:none;color:var(--prim)}
.btn.ghost:hover{background:var(--prim-bg)}
.btn.ok{background:var(--ok);border-color:var(--ok)}
.btn.ok:hover{background:#155a38}
.btn.danger{background:var(--signal-bg);color:var(--signal);border-color:var(--signal-bg)}
.btn.danger:hover{background:var(--signal);color:#fff;border-color:var(--signal)}

/* .sm dipakai khusus untuk tombol padat di dalam tabel / badge */
.btn.sm{font-size:.78rem;height:32px;padding:0 10px;gap:4px}
.btn.sm .btn-ic{width:13px;height:13px}

/* Memastikan tombol bersebelahan dalam baris filter/form memiliki tinggi 100% seragam */
.btn-row, .btn-group{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filter-bar .btn, .filter-bar .btn.sm, .card .btn-group .btn{height:38px;font-size:.85rem}

/* ── TABLE ── */
.tbl-wrap{overflow-x:auto;border-radius:var(--rad);border:1px solid var(--rule)}
table{width:100%;border-collapse:collapse;font-size:.82rem}
th{background:var(--ink);color:#fff;padding:9px 12px;text-align:left;font-weight:600;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;
  position:sticky;top:0;z-index:1}
td{padding:9px 12px;border-bottom:1px solid var(--rule-2);vertical-align:middle}
.num,td.mono{font-variant-numeric:tabular-nums}
tr:hover td{background:var(--panel-2)}
.num{text-align:right}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:.65rem;font-weight:700;padding:2px 9px;
  border-radius:99px}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.badge-ok{background:var(--ok-bg);color:var(--ok)}
.badge-warn{background:var(--warn-bg);color:var(--warn)}
.badge-sig{background:var(--signal-bg);color:var(--signal)}
.badge-blue{background:var(--prim-bg);color:var(--prim)}

/* ── AUTOSAVE STATUS ── */
.autosave-status{font-size:.72rem;font-weight:600;color:var(--ink-3);transition:color .2s}
.autosave-status.ok{color:var(--ok)}
.autosave-status.err{color:var(--signal)}

/* ── NOTIFIKASI ── */
.msg{padding:12px 16px;border-radius:var(--rad);margin-bottom:16px;font-size:.88rem;font-weight:600;
  border-left:4px solid}
.msg.ok{background:var(--ok-bg);color:var(--ok);border-left-color:var(--ok)}
.msg.err{background:var(--signal-bg);color:var(--signal);border-left-color:var(--signal)}
.msg.warn{background:var(--warn-bg);color:var(--warn);border-left-color:var(--warn)}
.toast-wrap{position:fixed;bottom:20px;right:20px;z-index:999;display:flex;flex-direction:column;gap:6px}
.toast{background:var(--ink);color:#fff;padding:10px 14px;border-radius:7px;
  font-size:.82rem;font-weight:600;border-left:4px solid #fff;animation:tin .2s ease;
  display:flex;align-items:center;gap:8px;max-width:320px;box-shadow:var(--shadow-md)}
.toast.ok{border-left-color:#2dc98c}.toast.err{border-left-color:var(--signal);background:#7d1e05}
.toast.warn{border-left-color:var(--warn)}
@keyframes tin{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* ── FILTER BAR ── */
.filter-bar{background:var(--panel);border:1px solid var(--rule);padding:12px 14px;
  margin-bottom:14px;border-radius:var(--rad);display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.filter-bar .fg{display:flex;flex-direction:column;gap:3px;min-width:140px;flex:1}
.filter-bar label{margin:0}

/* ── PROGRESS ── */
.prog{height:6px;background:var(--rule);border-radius:3px;overflow:hidden}
.prog-bar{height:100%;background:var(--prim);border-radius:3px;transition:width .3s ease}
.prog-bar.ok{background:var(--ok)}.prog-bar.warn{background:var(--warn)}.prog-bar.sig{background:var(--signal)}

/* ── CETAK DOKUMEN ── */
.cetak-logo{display:flex;justify-content:space-between;align-items:center;
  border-bottom:3.5pt double #000;padding-bottom:10pt;margin-bottom:14pt}
.cetak-logo-l,.cetak-logo-r{width:28%;min-width:0;font-weight:700;font-size:9pt;display:flex;align-items:center}
.cetak-logo-l img{max-height:44pt;max-width:100%;width:auto;object-fit:contain;vertical-align:middle}
.cetak-logo-r{text-align:right;justify-content:flex-end}
.cetak-logo-r img{max-height:44pt;max-width:100%;width:auto;object-fit:contain;vertical-align:middle;margin-left:auto}
.cetak-logo-c{width:44%;min-width:0;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cetak-logo-c .sys-name{font-size:7.5pt;color:#444;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.cetak-logo-c .sys-title{font-size:15pt;font-weight:700;color:#000;font-family:var(--f-data);letter-spacing:.05em}
.cetak-logo-c img{max-height:40pt;max-width:100%;width:auto;object-fit:contain;vertical-align:middle}
.cetak-logo-sesama{max-height:38pt;max-width:100%;width:auto;object-fit:contain;vertical-align:middle}
.cetak-logo-up{max-height:56pt!important;max-width:100%;width:auto;object-fit:contain;vertical-align:middle}
.cetak-logo-nama{font-size:13pt;font-weight:700;color:#1a5fb4;letter-spacing:.02em}
.cetak-logo-sub{font-size:8pt;color:#555}
.cetak-judul{text-align:center;margin-bottom:12pt}
.cetak-judul h2{font-size:14pt;font-weight:700;text-transform:uppercase;margin-bottom:2pt;letter-spacing:.02em}
.cetak-judul p{font-size:9pt;color:#444}
.cetak-meta{width:100%;border-collapse:collapse;font-size:9pt;margin-bottom:10pt}
.cetak-meta td{padding:3pt 6pt;vertical-align:top}
.cetak-meta td:first-child{width:160pt;font-weight:600;white-space:nowrap}
.cetak-table{width:100%;border-collapse:collapse;font-size:8.8pt;margin-top:6pt;margin-bottom:10pt}
.cetak-table th,.cetak-table td{border:0.8pt solid #222;padding:5pt 7pt;text-align:left;vertical-align:middle}
.cetak-table th{background:#f1f5f9;color:#000;font-weight:700;font-size:8.3pt;text-transform:uppercase;letter-spacing:.03em;border-bottom:1.5pt solid #000}
.cetak-table tfoot td{font-weight:700;background:#f8fafc;border-top:1.5pt solid #000}
.cetak-ttd{display:flex;justify-content:space-around;margin-top:30pt;text-align:center;page-break-inside:avoid}
.cetak-ttd div{min-width:140pt;font-size:9pt}
.cetak-ttd .nama{border-top:1pt solid #000;margin-top:55pt;padding-top:4pt;font-weight:700}

@page{
  size:A4 portrait;
  margin:4mm 5mm 4mm 5mm;
}
@media print{
  *{
    color:#000000!important;
    background-image:none!important;
    text-shadow:none!important;
    filter:none!important;
    -ms-filter:none!important;
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
    opacity:1!important;
  }
  html,body{background:#fff!important;color:#000000!important;font-size:9.5pt;line-height:1.4}
  th{background:#e2e8f0!important;color:#000000!important;border:0.8pt solid #000000!important;font-weight:bold!important}
  td{color:#000000!important;border-color:#000000!important}
  p,div,span,b,strong,small,h1,h2,h3,h4,h5,h6,label,a{color:#000000!important}
  .s-nav,.sub-tabs,.btn-row,.filter-bar,.card:not(.printme),.wrap>div:not(#printOut),.anchor-nav,#toast-wrap,.pratinjau-bar{display:none!important}
  #printOut{display:block!important;width:100%!important;margin:0!important;padding:0!important}
  .wrap{padding:0!important;max-width:none!important;margin:0!important}
  .page-break{page-break-before:always;break-before:page}
  .print-section{display:none!important}
  .print-section.print-active{display:block!important}
  .cetak-table,table{page-break-inside:auto}
  tr{page-break-inside:avoid;page-break-after:auto}
  .cetak-ttd,.status-flow,.stat-grid,.cetak-logo{page-break-inside:avoid}
}

/* ── MISC ── */
.empty{text-align:center;padding:36px;color:var(--ink-3);font-style:italic}
.hint{font-size:.78rem;color:var(--ink-3);line-height:1.5}
.chip{display:inline-block;font-size:.65rem;font-weight:700;padding:2px 8px;border-radius:10px;
  border:1px solid var(--rule);margin:1px}
.chip.sd{border-color:var(--prim);color:var(--prim);background:var(--prim-bg)}
.chip.smp{border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}

/* ── ANCHOR NAVIGATION BAR — lompat cepat ke komponen di halaman panjang ──
   Sticky di bawah tombol ☰ (top:56px), tidak menggeser layout, hanya
   tambahan navigasi in-page. scroll-margin-top di tiap section target
   supaya tidak tertutup sticky bar saat di-scroll-to. */
.anchor-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  padding:9px 0 12px;margin-bottom:16px;
  border-bottom:1px solid var(--rule-2);
  position:sticky;top:56px;background:var(--paper);z-index:90}
.anchor-nav-lbl{font-size:.62rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-3);white-space:nowrap;margin-right:2px;
  flex-shrink:0}
.anchor-btn{display:inline-flex;align-items:center;gap:5px;
  font-size:.74rem;font-weight:600;padding:5px 13px;border-radius:99px;
  background:var(--prim-bg);color:var(--prim);text-decoration:none;
  border:1.5px solid transparent;white-space:nowrap;
  transition:background .13s,color .13s,border-color .13s;line-height:1.2}
.anchor-btn:hover{background:var(--prim);color:#fff}
.anchor-btn:focus-visible{outline:2px solid var(--prim);outline-offset:2px}
.anchor-btn.anc-ok{background:var(--ok-bg);color:var(--ok)}
.anchor-btn.anc-ok:hover{background:var(--ok);color:#fff}
.anchor-btn.anc-ext{background:var(--accent-grn-bg);color:#3a6e00;
  border-color:var(--accent-grn-bg)}
.anchor-btn.anc-ext:hover{background:var(--accent-grn);color:#fff}
.anchor-sep{width:1px;height:16px;background:var(--rule);margin:0 2px;align-self:center;flex-shrink:0}
/* target section: pastikan tidak tertutup sticky bar + sticky nav saat di-scroll */
.sec-anchor{scroll-margin-top:74px}


/* ── CHECKLIST CARD 4-IN-1 GRID RULES ── */
.checklist-halaman {
  width: 194mm; height: 280mm;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 3.5mm !important;
  page-break-after: always !important;
  break-after: page !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
}
.checklist-halaman:last-child { page-break-after: auto !important; break-after: auto !important; }
.checklist-kartu {
  border: 1pt solid #000 !important;
  display: flex !important; flex-direction: column !important;
  overflow: hidden !important; box-sizing: border-box !important;
  font-size: 7.2pt !important; line-height: 1.2 !important; background: #fff !important;
}
.checklist-kartu-kosong { border: 1pt dashed #ccc !important; }
.checklist-hd { padding: 2mm 3mm 1.5mm !important; flex-shrink: 0 !important; border-bottom: 1.2pt solid #000 !important; }
.checklist-nama { font-size: 10pt !important; font-weight: 700 !important; line-height: 1.15 !important; color: #000 !important; }
.checklist-meta { font-size: 6.8pt !important; color: #000 !important; margin-top: .8mm !important; line-height: 1.2 !important; }
.checklist-bd {
  padding: 2mm 3mm !important;
  display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 2.5mm !important;
  flex: 1 !important; min-height: 0 !important; overflow: hidden !important;
}
.checklist-bd-1kol { grid-template-columns: 1fr !important; }
.checklist-bagian {
  font-size: 6.5pt !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .03em !important;
  border-bottom: .8pt solid #000 !important; padding-bottom: 1pt !important; margin-bottom: 1mm !important; color: #000 !important;
}
.chk-baris { display: flex !important; align-items: flex-start !important; gap: 1.5mm !important; padding: .4mm 0 !important; font-size: 6.6pt !important; line-height: 1.2 !important; color: #000 !important; }
.chk-box { width: 6.5pt !important; height: 6.5pt !important; border: .8pt solid #000 !important; flex-shrink: 0 !important; margin-top: .5pt !important; display: inline-block !important; }
.chk-list-2kol { column-count: 2 !important; column-gap: 4pt !important; }
.chk-list-2kol .chk-baris { break-inside: avoid !important; }
.checklist-lain { padding: 1.5mm 3mm !important; flex-shrink: 0 !important; border-top: 1.2pt solid #000 !important; }
.checklist-qc-box { padding: 1.5mm 3mm !important; flex-shrink: 0 !important; border-top: 1.2pt solid #000 !important; background: #fafafa !important; }
.checklist-qc-hd { font-weight: 700 !important; font-size: 6.5pt !important; display: flex !important; justify-content: space-between !important; align-items: center !important; }
.checklist-qc-opts { display: flex !important; gap: 6pt !important; }
.checklist-qc-opt { display: flex !important; align-items: center !important; gap: 2pt !important; font-size: 6.5pt !important; font-weight: 700 !important; }
.checklist-qc-chk { width: 6pt !important; height: 6pt !important; border: .8pt solid #000 !important; display: inline-block !important; }
.checklist-qc-cat { font-size: 6.2pt !important; margin-top: 1.5mm !important; color: #000 !important; }
.checklist-paraf { padding: 1mm 3mm 1.5mm !important; flex-shrink: 0 !important; border-top: .8pt solid #000 !important; font-size: 6.2pt !important; display: flex !important; justify-content: space-between !important; }

/* ══ MODAL PRATINJAU CETAK IN-PAGE (PREMIUM PDF VIEWER STYLE) ══ */
#modal-pratinjau-cetak {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  background-color: #1e293b;
  flex-direction: column;
  overflow: hidden;
  font-family: 'IBM Plex Sans', Arial, sans-serif;
}

#modal-pratinjau-toolbar {
  height: 52px;
  background: #0f172a;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  flex-shrink: 0;
  border-bottom: 1px solid #334155;
}

#modal-pratinjau-toolbar .pv-title {
  font-weight: 700;
  font-size: 1rem;
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 10px;
}

#modal-pratinjau-toolbar .pv-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

#modal-pratinjau-toolbar .pv-zoom-group {
  display: flex;
  align-items: center;
  background: #1e293b;
  border-radius: 6px;
  padding: 2px 8px;
  gap: 8px;
  border: 1px solid #475569;
  color: #cbd5e1;
  font-size: 0.82rem;
  font-weight: 600;
}

#modal-pratinjau-toolbar .pv-zoom-btn {
  background: transparent;
  border: none;
  color: #f8fafc;
  cursor: pointer;
  padding: 2px 6px;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 4px;
}
#modal-pratinjau-toolbar .pv-zoom-btn:hover {
  background: #334155;
}

#modal-pratinjau-toolbar .pv-btn-print {
  background: #10b981;
  color: #ffffff;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(16,185,129,0.3);
  transition: all 0.2s;
}
#modal-pratinjau-toolbar .pv-btn-print:hover {
  background: #059669;
}

#modal-pratinjau-toolbar .pv-btn-close {
  background: #475569;
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}
#modal-pratinjau-toolbar .pv-btn-close:hover {
  background: #64748b;
}

#modal-pratinjau-body {
  flex: 1;
  overflow-y: auto;
  padding: 30px 20px 60px 20px;
  background: #334155;
  display: flex;
  flex-direction: column;
  align-items: center;
  scroll-behavior: smooth;
}

#modal-pratinjau-content {
  transform-origin: top center;
  transition: transform 0.2s ease;
  width: 100%;
  max-width: 215mm;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#modal-pratinjau-content .print-section,
#modal-pratinjau-content .checklist-halaman,
#modal-pratinjau-content .single-page-sheet {
  background: #ffffff !important;
  color: #000000 !important;
  width: 210mm !important;
  min-height: 297mm !important;
  padding: 15mm 15mm !important;
  margin: 0 auto 28px auto !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.45) !important;
  box-sizing: border-box !important;
  position: relative !important;
  border-radius: 3px !important;
}

#modal-pratinjau-content .checklist-halaman {
  height: 297mm !important;
  max-height: 297mm !important;
  padding: 10mm 12mm !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 130mm 130mm !important;
  gap: 4mm !important;
}

/* @media print for In-Page Modal */
@media print {
  body > *:not(#modal-pratinjau-cetak) {
    display: none !important;
  }
  #modal-pratinjau-cetak {
    display: block !important;
    position: static !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }
  #modal-pratinjau-toolbar {
    display: none !important;
  }
  #modal-pratinjau-body {
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    overflow: visible !important;
  }
  #modal-pratinjau-content {
    transform: none !important;
    max-width: none !important;
    width: 100% !important;
  }
  #modal-pratinjau-content .print-section,
  #modal-pratinjau-content .checklist-halaman,
  #modal-pratinjau-content .single-page-sheet {
    background: #ffffff !important;
    color: #000000 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    page-break-after: always !important;
    break-after: page !important;
  }
  #modal-pratinjau-content .print-section:last-child,
  #modal-pratinjau-content .checklist-halaman:last-child,
  #modal-pratinjau-content .single-page-sheet:last-child {
    page-break-after: auto !important;
    break-after: auto !important;
  }
}