:root{
  --brand:#0d6b64; --brand-deep:#0a534e; --brand-soft:#e3f0ee; --brand-line:#bcd8d4;
  --bg:#f4f7f6; --surface:#ffffff; --surface-2:#eef3f2; --ink:#182422; --muted:#5b6f6c; --line:#dbe5e3;
  --good:#1c7a4c; --good-soft:#e2f2e9; --warn:#a36a00; --warn-soft:#fdf3df; --bad:#b23a2f; --bad-soft:#fbe9e6;
  --shadow:0 1px 2px rgba(24,36,34,.06),0 4px 14px rgba(24,36,34,.07);
}
*{box-sizing:border-box}
html{font-size:15px}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 "Segoe UI",system-ui,-apple-system,sans-serif}
button{font:inherit;cursor:pointer}
a{color:var(--brand)}
/* topbar */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:9px 16px;
  background:var(--surface);border-bottom:1px solid var(--line);flex-wrap:wrap}
.mark{width:32px;height:32px;border-radius:9px;background:var(--brand);color:#fff;display:grid;
  place-items:center;font-weight:700;font-size:.78rem}
.top h1{font-size:1rem;margin:0}
.top .ver{color:var(--muted);font-size:.7rem;font-weight:600}
.switch{display:flex;gap:3px;background:var(--surface-2);border-radius:99px;padding:3px}
.switch button{border:0;background:none;padding:5px 13px;border-radius:99px;font-size:.75rem;font-weight:700;color:var(--muted)}
.switch button.on{background:var(--brand);color:#fff}
.userbox{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted)}
.userbox b{color:var(--ink)}
/* shell */
.shell{display:flex;min-height:calc(100vh - 51px)}
nav.side{width:218px;flex:0 0 auto;padding:12px 9px;border-right:1px solid var(--line);background:var(--surface)}
nav.side .grp{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:13px 8px 5px}
nav.side .grp:first-child{margin-top:2px}
nav.side button{display:flex;width:100%;align-items:center;gap:9px;padding:8px 10px;margin:1px 0;border:0;
  background:none;border-radius:8px;color:var(--ink);text-align:left;font-size:.85rem}
nav.side button:hover{background:var(--surface-2)}
nav.side button.on{background:var(--brand-soft);color:var(--brand);font-weight:700}
nav.side .ic{width:20px;text-align:center;flex:0 0 auto}
main{flex:1;min-width:0;padding:18px 20px 70px;max-width:1720px}
h2{margin:0 0 4px;font-size:1.25rem}
.sub{color:var(--muted);margin:0 0 16px;font-size:.84rem;max-width:80ch}
.crumb{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 2px}
/* components */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:11px;margin-bottom:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.card .k{font-size:.7rem;font-weight:600;color:var(--muted)}
.card .v{font-size:1.45rem;font-weight:700;font-variant-numeric:tabular-nums;margin:2px 0 1px}
.card .d{font-size:.7rem;color:var(--muted)}
.card .d.warnc{color:var(--warn)} .card .d.badc{color:var(--bad)} .card .d.goodc{color:var(--good)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  padding:14px 16px;margin-bottom:14px}
.panel h3{margin:0 0 10px;font-size:.93rem}
.panel h3 .hint{font-weight:400;color:var(--muted);font-size:.75rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:950px){.two{grid-template-columns:1fr}}
.tablewrap{overflow-x:auto}
/* 23 Agu 2026 (owner, layar 100% tanpa scroll samping): tabel dipadatkan — font
   mengecil proporsional, jarak kolom rapat, SEMUA sel teks boleh membungkus;
   angka & tanggal tetap satu baris (td.num / nowrap eksplisit). */
table{border-collapse:collapse;width:100%;font-size:.75rem}
th{font-size:.61rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:left;
  padding:5px 6px;border-bottom:1.5px solid var(--line);white-space:nowrap}
td{padding:5px 6px;border-bottom:1px solid var(--line);white-space:normal;
  overflow-wrap:break-word;font-variant-numeric:tabular-nums;vertical-align:top}
td.num{white-space:nowrap}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right}
/* v1.23.0 (Laporan HO revisi B): header matriks 2 baris — baris atas nama jenis pekerjaan
   (rentang 2 kolom, rata tengah), baris bawah pasangan Qty|WO; baris Total ditebalkan. */
th.grp2{text-align:center;border-bottom:1px solid var(--line)}
tr.total td{font-weight:700;border-top:2px solid var(--line);background:var(--surface-2)}
.pill{display:inline-block;padding:2px 8px;border-radius:99px;font-size:.63rem;font-weight:700}
.p-good{background:var(--good-soft);color:var(--good)} .p-warn{background:var(--warn-soft);color:var(--warn)}
.p-bad{background:var(--bad-soft);color:var(--bad)} .p-mut{background:var(--surface-2);color:var(--muted)}
.p-brand{background:var(--brand-soft);color:var(--brand)}
.plus{color:var(--good);font-weight:700}.minus{color:var(--bad);font-weight:700}
.btn{background:var(--brand);border:1px solid var(--brand);color:#fff;padding:8px 15px;border-radius:9px;
  font-weight:700;font-size:.8rem}
.btn:hover{background:var(--brand-deep)}
.btn.ghost{background:none;color:var(--brand);border:1px solid var(--brand-line)}
.btn.ghost:hover{background:var(--brand-soft)}
.btn.sm{padding:4px 10px;font-size:.73rem;border-radius:7px}
.btn.bad{background:var(--bad);border-color:var(--bad)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:12px}
.toolbar .sp{flex:1}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:4px 12px;
  font-size:.74rem;font-weight:600;color:var(--muted)}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
select.inp,input.inp,textarea.inp{background:var(--surface);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:7px 10px;font:inherit;font-size:.79rem}
input.inp::placeholder{color:var(--muted)}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:9px}
.field label{font-size:.7rem;font-weight:700;color:var(--muted)}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:8px 12px}
.note{border-left:3px solid var(--brand);background:var(--brand-soft);border-radius:0 9px 9px 0;
  padding:8px 12px;font-size:.77rem;margin:10px 0 0}
.note b{color:var(--brand)}
.err{border-left:3px solid var(--bad);background:var(--bad-soft);border-radius:0 9px 9px 0;
  padding:8px 12px;font-size:.77rem;margin:8px 0;color:var(--bad)}
.bars{display:flex;flex-direction:column;gap:8px}
.bar{display:grid;grid-template-columns:170px 1fr 76px;align-items:center;gap:9px;font-size:.76rem}
.bar .tr{background:var(--surface-2);border-radius:6px;height:15px;overflow:hidden}
.bar .fl{height:100%;border-radius:6px;background:var(--brand)}
.bar .qn{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.flow{display:flex;align-items:center;gap:5px;font-size:.68rem;font-weight:700;flex-wrap:wrap;margin:6px 0}
.flow .st{padding:3px 9px;border-radius:99px;background:var(--surface-2);color:var(--muted)}
.flow .st.done{background:var(--good-soft);color:var(--good)}
.flow .st.now{background:var(--brand);color:#fff}
.ship{border:1px solid var(--line);border-radius:11px;padding:12px 14px;margin-bottom:9px;background:var(--surface)}
.ship .hd{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:5px}
.ship .meta{color:var(--muted);font-size:.73rem}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:10px;font-size:.76rem;color:var(--muted)}
/* login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.login{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  padding:28px 26px;width:100%;max-width:360px}
.login .mark{width:46px;height:46px;margin:0 auto 10px;font-size:1rem}
.login h1{text-align:center;font-size:1.15rem;margin:0 0 2px}
.login p{text-align:center;color:var(--muted);font-size:.78rem;margin:0 0 16px}
.login .btn{width:100%;padding:11px;margin-top:6px}
/* overlay/modal */
.overlay{position:fixed;inset:0;background:rgba(10,20,18,.5);display:none;place-items:center;z-index:80;padding:14px}
.overlay.on{display:grid}
.modal{background:var(--surface);border-radius:14px;max-width:640px;width:100%;max-height:90vh;
  overflow-y:auto;padding:18px 17px}
.modal h3{margin:0 0 4px;font-size:1rem}
.modal .subm{color:var(--muted);font-size:.78rem;margin:0 0 12px}
.modal .acts{display:flex;gap:9px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
/* toast */
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);
  padding:9px 18px;border-radius:99px;font-size:.8rem;opacity:0;transition:.25s;z-index:99;pointer-events:none;max-width:90vw}
#toast.on{opacity:1}
.hide{display:none!important}
/* HP */
@media(max-width:760px){
  html{font-size:14.5px}
  nav.side{position:fixed;bottom:0;left:0;right:0;top:auto;width:auto;display:flex;overflow-x:auto;
    padding:5px;border-top:1px solid var(--line);border-right:0;z-index:40;gap:2px;background:var(--surface)}
  nav.side .grp{display:none}
  nav.side button{flex:0 0 auto;flex-direction:column;gap:3px;font-size:.6rem;padding:6px 8px;text-align:center}
  main{padding:12px 10px 92px}
  .userbox{width:100%;order:9;margin-left:0;border-top:1px solid var(--line);padding-top:6px}
  .bar{grid-template-columns:120px 1fr 64px}
}

/* ---- kartu dokumen kiriman: kepala jelas, tabel item rapi ---- */
.ship{padding:0;overflow:hidden}
.ship .hd{padding:11px 14px 8px;margin:0;gap:8px;border-bottom:0}
.ship .meta{padding:0 14px}
.ship .flow{padding:0 14px;margin:8px 0 10px}
.ship .tablewrap{border-top:1px solid var(--line);background:var(--surface-2)}
.ship table{background:var(--surface)}
.ship th{background:var(--surface-2);position:sticky;top:0}
.ship td{padding:8px 12px}
.ship th{padding:8px 12px}

/* ---- layar kosong yang MENJELASKAN sebabnya (temuan owner 5 Agu 2026) ----
   Dulu layar kosong hanya menulis "tidak ada data" sehingga staf mengira aplikasi rusak.
   Kotak ini menyebut filter penyebabnya dan menawarkan lompatan ke data yang ADA. */
.kosong{display:flex;gap:12px;align-items:flex-start;padding:18px 16px;white-space:normal;
  background:var(--surface-2);border-radius:11px;margin:4px 0}
.kosong .ik{font-size:1.5rem;line-height:1.2;flex:0 0 auto}
.kosong .isi{flex:1;min-width:0}
.kosong .jd{font-size:.9rem;font-weight:700;margin:0 0 3px;color:var(--ink)}
.kosong p{margin:0 0 9px;font-size:.8rem;color:var(--muted);line-height:1.55}
.kosong p b{color:var(--ink)}
.kosong .lbl{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:11px 0 5px}
.kosong .aksi{display:flex;flex-wrap:wrap;gap:6px}
.kosong .aksi .chip{background:var(--surface);cursor:pointer}
.kosong .aksi .chip[disabled]{cursor:default;opacity:.85}
.kosong .aksi .chip b{color:var(--ink)}
.kosong .aksi .chip.go{border-color:var(--brand-line);color:var(--brand)}
.kosong .aksi .chip.go:hover{background:var(--brand-soft)}
td .kosong{margin:0}

/* kartu angka yang bisa diklik ke daftarnya */
.card.kartu-taut{cursor:pointer;transition:border-color .15s, box-shadow .15s, transform .05s}
.card.kartu-taut:hover{border-color:var(--brand-line);box-shadow:0 2px 6px rgba(24,36,34,.10)}
.card.kartu-taut:active{transform:translateY(1px)}
.card.kartu-taut .tanda{color:var(--brand);font-weight:700}

/* ---- HP: tabel di dalam dialog jadi kartu bertumpuk ----
   Di layar kecil tabel memaksa geser ke samping sehingga kolom Qty/SN sering tak terlihat
   saat mengisi. Judul kolom disalin ke data-l oleh labeliTabel() di app.js. */
@media(max-width:760px){
  .modal .tablewrap{overflow-x:visible}
  .modal table{display:block;width:100%}
  .modal table tbody{display:block}
  .modal table tr.baris-judul{display:none}
  .modal table tr{display:block;border:1px solid var(--line);border-radius:10px;
    padding:7px 10px;margin:0 0 8px;background:var(--surface)}
  .modal table td{display:flex;align-items:center;justify-content:space-between;gap:10px;
    border:0;padding:5px 0;white-space:normal;text-align:left}
  .modal table td + td{border-top:1px dashed var(--line)}
  .modal table td::before{content:attr(data-l);flex:0 0 40%;font-size:.65rem;font-weight:700;
    letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
  .modal table td:not([data-l])::before{content:""}
  .modal table td .inp{width:100%!important;max-width:none}
  .modal table td.num{justify-content:space-between}
}

/* ---- baris kepala kelompok pada layar Stok (mode "Kelompokkan per jenis") ----
   Subtotalnya dihitung server; baris ini hanya menampilkannya. Diklik untuk melipat. */
tr.grup{background:var(--brand-soft);cursor:pointer}
tr.grup:hover{background:#d6e8e5}
tr.grup td{border-bottom:1px solid var(--brand-line)}
tr.grup .car{display:inline-block;width:14px;color:var(--brand);font-size:.7rem}
tr.grup.lain{background:var(--surface-2)}
tr.grup.lain:hover{background:#e4ebea}
tr.grup.lain b,tr.grup.lain .car{color:var(--muted)}
/* satu-satunya kolom yang boleh turun baris: deskripsi panjang jangan menggeser
   seluruh tabel ke kanan */
/* 22 Agu 2026 (owner: "wrap text tidak manis — cek semua modul"): kolom pertama boleh
   membungkus TAPI wajib punya lebar minimum, supaya tidak kolaps jadi satu kata per baris
   saat tabelnya sesak. Tabel berkolom-pertama pendek (Waktu/Tanggal/dst.) diberi class
   `sempit` di app.js agar tidak ikut menggembung. */
.tablewrap table td:first-child{white-space:normal;max-width:46ch;min-width:24ch;overflow-wrap:break-word}
.tablewrap table th:first-child{white-space:normal}
.tablewrap table.sempit td:first-child{min-width:0;max-width:none;white-space:nowrap}
.tablewrap table.sempit th:first-child{white-space:nowrap}

/* ---- layar Kelompok Material ---- */
.baris-kelompok{display:flex;width:100%;gap:10px;align-items:baseline;border:0;
  border-bottom:1px solid var(--line);background:none;padding:8px 11px;text-align:left;
  font:inherit;font-size:.82rem;color:var(--ink);cursor:pointer}
.baris-kelompok:hover{background:var(--surface-2)}
.baris-kelompok.on{background:var(--brand-soft);color:var(--brand);font-weight:700}
.baris-kelompok .n{margin-left:auto;font-size:.72rem;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.baris-kelompok.on .n{color:var(--brand)}
.bar-kelompok{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:9px 11px;
  margin-bottom:10px;background:var(--brand-soft);border:1px solid var(--brand-line);
  border-radius:10px;font-size:.79rem}
.bar-kelompok b{color:var(--brand)}

/* Keterangan "sedang dilihat" di layar Stok — subtotal berkelompok boleh lintas cabang,
   jadi angkanya tidak boleh pernah tampil tanpa konteks saringannya. */
.konteks-stok{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-8px 0 14px;
  padding:8px 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  font-size:.82rem;color:var(--ink)}
.konteks-stok .lbl{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}

/* ── kotak bernomor (standar owner 22 Agu 2026, pola QN CashFlow) ── */
.sec{border:1px solid var(--line);border-radius:12px;padding:12px 14px 14px;margin:0 0 12px;
  background:var(--surface);max-width:1100px}
.sec>h3{margin:0 0 2px;font-size:.93rem}
.sec>h3 .no{color:var(--brand)}
.sec>h3 .hint{font-weight:400;color:var(--muted);font-size:.74rem;margin-left:6px}
.sec .desc{font-size:.75rem;color:var(--muted);margin:0 0 10px}
.sec .tablewrap{overflow-x:auto}
/* layar HO rekap butuh lebar penuh */
#main .sec.full, #main>.sec{max-width:none}
.statx{display:inline-flex;flex-direction:column;gap:1px;border:1px solid var(--line);
  border-radius:10px;padding:8px 14px;min-width:118px;background:var(--surface);
  font:inherit;text-align:left;cursor:pointer}
.statx:hover{border-color:var(--brand-line)}
.statx.on{border-color:var(--brand);background:var(--brand-soft)}
.statx .k{font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.statx .v{font-size:1.1rem;font-weight:700;font-variant-numeric:tabular-nums}
.statx .d{font-size:.66rem;color:var(--muted)}
.chip-bad{border-color:var(--bad);color:var(--bad);background:var(--bad-soft)}
/* kartu pilihan sumber barang (form masuk cabang) */
.sumberx{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;max-width:1000px}
.skartu{border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;cursor:pointer;
  background:var(--surface);text-align:left;font:inherit;display:block}
.skartu .t{font-weight:700;font-size:.86rem;display:block}
.skartu .d{font-size:.72rem;color:var(--muted);margin-top:3px;display:block}
.skartu .radio{float:right;width:15px;height:15px;border:2px solid var(--line);border-radius:99px}
.skartu.on{border-color:var(--brand);background:var(--brand-soft)}
.skartu.on .radio{border-color:var(--brand);background:radial-gradient(circle,var(--brand) 45%,transparent 50%)}
/* lampiran bukti */
.lampiran{border:1.5px dashed var(--brand-line);border-radius:12px;padding:12px;background:var(--surface-2)}
.ltile{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);
  border-radius:9px;padding:5px 9px;font-size:.74rem;max-width:100%}
.ltile .lnm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px;color:var(--muted)}
/* jangkar dokumen pada kartu kiriman (22 Agu 2026, owner: "keterangan dll harus
   sebaris dengan material — capai bacanya") — pola kolom beku ala rincian L3 CashFlow */
.jangkar-dok{background:var(--surface-2);border-right:2px solid var(--line);vertical-align:top;
  white-space:normal !important;min-width:30ch;max-width:40ch;overflow-wrap:break-word}
.jangkar-dok .flow{margin:6px 0 0;font-size:.68rem}
/* satu-baris-per-dokumen (varian B, keputusan owner 22 Agu malam) */
td.dok{background:var(--surface-2);vertical-align:top;white-space:normal}
td.dok.aksi{vertical-align:middle;border-left:1px solid var(--line)}
td.dok .mono-dok{font-family:Consolas,Menlo,monospace;font-size:.72rem}
.ket-dok{font-size:.7rem;color:var(--muted);white-space:normal;margin-top:2px;max-width:32ch}
/* hasil pencarian material sebagai tabel sejajar (22 Agu malam, owner) */
#cm-hasil{max-height:360px;overflow:auto;margin-top:6px}
#cm-hasil:has(.hasil-cari){border:1px solid var(--line);border-radius:9px}
.hasil-cari{width:100%;border-collapse:collapse;font-size:.79rem}
.hasil-cari th{position:sticky;top:0;background:var(--surface-2);font-size:.64rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:left;
  padding:6px 9px;border-bottom:1.5px solid var(--line);white-space:nowrap;z-index:1}
.hasil-cari th.num{text-align:right}
.hasil-cari td{padding:5px 9px;border-bottom:1px solid var(--line);white-space:nowrap}
.hasil-cari td.kd{font-family:Consolas,Menlo,monospace;font-size:.74rem;font-weight:700}
.hasil-cari td.nm{white-space:normal;min-width:26ch;max-width:60ch}
.hasil-cari td.num{text-align:right;font-variant-numeric:tabular-nums}
.hasil-cari tr:hover td{background:var(--brand-soft);cursor:pointer}
.hasil-cari tr:last-child td{border-bottom:0}
/* angka dokumen menempel di tombol status (mockup Permintaan Tanpa Pop-up, 22 Agu 2026) */
.chip .n{background:var(--surface-2);color:var(--muted);border-radius:99px;padding:0 7px;
  font-size:.68rem;font-weight:700;margin-left:4px}
.chip.on .n{background:rgba(255,255,255,.22);color:#fff}
/* chip 0-dokumen tetap redup, TAPI saat aktif (on) teksnya wajib putih —
   dulu .nol menimpa .on karena ditulis belakangan (temuan owner 22 Agu malam) */
.chip.nol:not(.on){color:var(--muted)}
/* kartu klien di Catat Pemakaian (mockup per-klien, 23 Agu 2026) */
.kk{border:1.5px solid var(--line);background:var(--surface);border-radius:10px;
  padding:7px 13px;font-weight:700;font-size:.8rem;cursor:pointer;text-align:left;font:inherit}
.kk .d{display:block;font-weight:400;font-size:.66rem;color:var(--muted)}
.kk.redup{opacity:.5}
.kk.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand);opacity:1}
/* baris kegunaan modul di tiap landing page (perintah owner 23 Agu 2026: tebal + warna) */
.guna{margin:2px 0 10px;font-size:.87rem;font-weight:700;color:var(--brand);max-width:110ch}
/* kartu paket tim di Material in Progress (mockup Paket per Tim, 23 Agu 2026) */
.paket-tim{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.paket-tim .pk{border:1.5px solid var(--line);border-radius:12px;padding:9px 13px;background:var(--surface)}
.paket-tim .pk.on{border-color:var(--brand);background:var(--brand-soft)}
.paket-tim .pk>b{font-size:.85rem}
.mono-wo{font-family:Consolas,Menlo,monospace;font-size:.74rem;font-weight:700}

/* mode PADAT utk daftar berkolom banyak (23 Agu 2026, owner: muat tanpa scroll di 100%) */
.tablewrap table.padat{font-size:.71rem}
.tablewrap table.padat th{padding:4px 4px;font-size:.57rem;letter-spacing:.02em}
.tablewrap table.padat td{padding:4px 4px}
.tablewrap table.padat td:first-child{min-width:0;max-width:none}
.tablewrap table.padat .pill{font-size:.6rem;padding:2px 6px}
.tablewrap table.padat .btn.sm{padding:2px 7px;font-size:.66rem}
.tablewrap table.padat .ket-dok{max-width:22ch}

/* ---- Pengguna & Peran + Hak Akses (28 Sep 2026, mockup v4 disetujui owner) ---- */
.btn.ghost.hapus{color:var(--bad);border-color:#e8c3be}
.btn.ghost.hapus:hover,.btn.ghost.hapus.aktif{background:var(--bad-soft)}
.aksi-sel{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.ket-kunci{font-size:.68rem;color:var(--muted)}
tr.ditandai td{background:#fdf1ef}
tr.konfirm td{background:#fdf1ef;padding:0 6px 8px}
.konfirm-isi{border-left:3px solid var(--bad);background:var(--surface);border-radius:0 9px 9px 0;
  padding:9px 12px;font-size:.78rem;display:flex;flex-direction:column;gap:7px;max-width:80ch}
.konfirm-isi b{color:var(--bad)}
.konfirm-aksi{display:flex;gap:7px;flex-wrap:wrap}
tr.diubah td{background:var(--brand-soft)}
tr.ubah td{background:var(--brand-soft);padding:0 6px 8px}
.ubah-isi{border-left:3px solid var(--brand);background:var(--surface);border-radius:0 9px 9px 0;
  padding:9px 12px;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end}
.ubah-isi .field{margin:0;min-width:170px}
.ubah-isi .ket{flex-basis:100%;font-size:.72rem;color:var(--muted);margin:0}
.ubah-isi .ket-err{flex-basis:100%}
table.hak th,table.hak td{text-align:center;vertical-align:middle}
table.hak td:first-child,table.hak th:first-child{text-align:left}
table.hak th.saya,table.hak td.saya{background:var(--brand-soft)}
table.hak th .jml{display:block;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted);font-size:.6rem}
table.hak tr.kel td{background:var(--surface-2);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left}
table.hak tr.tetap td{background:#fbf6f5}
.sel-hak{border:1px solid transparent;background:none;border-radius:7px;padding:3px 6px;min-width:44px;font:inherit;font-size:.72rem;cursor:pointer}
.sel-hak:hover{border-color:var(--brand-line);background:var(--surface)}
.sel-hak[disabled]{cursor:default}
.sel-hak[disabled]:hover{border-color:transparent;background:none}
.sel-hak.diubah{border-color:var(--warn);background:var(--warn-soft)}
.hak-y{color:var(--good);font-weight:700}.hak-n{color:#aab8b5}
.hak-s{font-size:.66rem;color:var(--ink);white-space:normal}
table.jenis td{vertical-align:top}
table.jenis td.hakteks{white-space:normal;min-width:36ch;font-size:.72rem;line-height:1.5}
table.jenis td.hakteks b{color:var(--brand)}
table.jenis tr.saya td{background:var(--brand-soft)}
.lihat-saja{margin:0 0 12px}