/* Neraca — tema UI meniru tata letak & palet Accurate Online (ditulis sendiri; bukan salinan CSS Accurate).
   Ukuran diukur dari bukti evidence/ui/*.png (PNG 1568 px = viewport logis 1920 px → 1 px PNG ≈ 1,2245 px CSS): bar atas 36 px PNG,
   bar tab 28, baris sub-tab 35, baris daftar ±33,5, header grid 26–27, input form 26, panel total 63. Logo, ikon sidebar, dan gradasi
   bar atas tetap milik Neraca (perbedaan merek disengaja). */
:root {
  --navy: #1b2b4b; --navy-2: #223760; --navy-3: #2c4878;
  --primary: #2d6bd0; --primary-dark: #1f4fa3; --primary-light: #e3edfb; --primary-50: #f3f7fd;
  --pink: #e5396a; --pink-dark: #c4245a;
  --slate: #5c6e88; --slate-light: #eef1f6;
  --bg: #f0f0f0; --card: #ffffff; --border: #d6d6d6; --border-light: #e6e6e6; --text: #262626; --muted: #6e7480;
  --success: #3cb371; --success-light: #c5ebd0; --warning: #ff9f43; --danger: #e04b4b; --danger-light: #f7c2c4; --info: #00a9c7;
  --radius: 4px; --shadow: 0 1px 3px rgba(31,45,61,.08), 0 1px 2px rgba(31,45,61,.06);
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --topbar-h: 44px; --tabbar-h: 34px; --sidebar-w: 55px; --subtab-h: 43px;
  --live-blue: #2876cc;          /* judul seksi biru form (Info lainnya, Informasi Barang & Jasa) */
  --field-h: 32px;               /* tinggi input form (26 px PNG) */
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body { font-family: var(--font); font-size: 13px; color: var(--text); background: var(--bg); }
a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: 600; } h1 { font-size: 1.3rem; } h2 { font-size: 1.1rem; } h3 { font-size: .95rem; }
[x-cloak] { display: none !important; }
[hidden] { display: none !important; }
button { font: inherit; }

/* ===== kerangka layar ===== */
.shell { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.topbar { height: var(--topbar-h); flex: 0 0 var(--topbar-h); background: linear-gradient(90deg, var(--navy) 0%, var(--navy-2) 55%, #3b2f6e 100%); color: #fff; display: flex; align-items: center; padding: 0 .6rem 0 .5rem; gap: .5rem; }
.brand-wrap { display: flex; align-items: center; gap: .45rem; color: #fff; }
.brand-wrap:hover { text-decoration: none; }
.brand-wrap .logo { width: 26px; height: 26px; border-radius: 6px; background: #fff; color: var(--navy); display: grid; place-items: center; font-weight: 800; font-size: 1rem; }
.brand-text { display: flex; flex-direction: column; line-height: 1; } .brand-text b { font-size: 1.1rem; letter-spacing: .01em; } .brand-text small { font-size: .64rem; opacity: .8; margin-top: 2px; }
/* mode pratinjau (NERACA_DEMO_AUTOLOGIN=1): pita kecil di bar atas, bukan elemen Accurate */
.demo-ribbon { margin-left: .6rem; padding: 2px 9px; border-radius: 10px; background: #f5b400; color: #2a2100; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; cursor: help; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 13px; position: relative; }   /* jarak ikon ±41 px PNG (bukti 03) */
.top-icon { position: relative; background: none; border: none; color: #e8edf5; width: 36px; height: 36px; border-radius: 6px; display: inline-grid; place-items: center; cursor: pointer; }
.top-icon:hover { background: rgba(255,255,255,.12); text-decoration: none; } .top-icon svg { width: 21px; height: 21px; }
.top-icon .dot-new { position: absolute; top: 1px; right: -2px; font-size: .5rem; background: var(--pink); color: #fff; border-radius: 6px; padding: 0 3px; line-height: 1.3; font-weight: 700; }
.db-user { position: relative; margin-left: .5rem; }
.db-user-btn { background: none; border: none; color: #fff; display: flex; align-items: center; gap: .5rem; cursor: pointer; padding: .15rem .3rem; border-radius: 6px; }
.db-user-btn:hover { background: rgba(255,255,255,.12); }
/* bukti 03: nama database tebal (±16 px PNG) DI ATAS nama pengguna (±12 px PNG), rata kanan di samping avatar */
.db-user-txt { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 1px; }
.db-user-btn .db-name { font-weight: 700; font-size: 17px; line-height: 1.1; white-space: nowrap; } .db-user-btn .user-name { font-size: 12.5px; line-height: 1.15; opacity: .85; display: block; white-space: nowrap; }
.db-user-btn .avatar { width: 30px; height: 30px; border-radius: 50%; background: #cfd8e6; color: var(--navy); display: inline-grid; place-items: center; } .db-user-btn .avatar svg { width: 18px; height: 18px; }
.db-user-btn .chev svg { width: 14px; height: 14px; opacity: .8; }
.db-user-btn { flex-wrap: nowrap; }
.dropdown { position: absolute; top: calc(100% + 4px); background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.18); min-width: 200px; z-index: 60; padding: .25rem 0; }
.dropdown.right { right: 0; } .top-wrap { position: relative; display: inline-flex; } .dropdown.notif { right: 0; top: calc(100% + 4px); }
.dd-head { padding: .4rem .8rem; font-size: .72rem; text-transform: uppercase; color: var(--muted); letter-spacing: .04em; }
.dd-item { display: block; width: 100%; text-align: left; padding: .5rem .9rem; background: none; border: none; color: var(--text); cursor: pointer; font-size: 15px; }
.dd-item:hover { background: var(--primary-50); text-decoration: none; } .dd-item.on { font-weight: 700; color: var(--primary); }
.dd-item.disabled { color: var(--muted); cursor: default; } .dd-item.disabled:hover { background: none; }
.dd-sep { border-top: 1px solid var(--border-light); margin: .25rem 0; } .dd-empty { padding: .6rem .8rem; color: var(--muted); font-style: italic; }
.gsearch { position: absolute; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: .4rem; box-shadow: 0 8px 24px rgba(0,0,0,.18); z-index: 60; }
.gsearch input { width: 360px; border: 1px solid var(--border); border-radius: 4px; padding: .4rem .6rem; font: inherit; }

.shell-body { flex: 1; display: flex; min-height: 0; position: relative; }
/* sidebar: jarak ikon ±38 px PNG (46 px CSS); modul aktif TIDAK disorot (bukti tanpa sorotan) — hanya hover/panel terbuka */
.vertical-menu { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--navy); display: flex; flex-direction: column; align-items: center; padding-top: 25px; gap: 4px; z-index: 40; }
.main-menu-button { width: 46px; height: 42px; border-radius: 6px; display: grid; place-items: center; color: #c9d4e6; }
.main-menu-button:hover, .main-menu-button.open { background: rgba(255,255,255,.14); color: #fff; text-decoration: none; }
.main-menu-icon svg { width: 25px; height: 25px; }
.sub-menu { position: absolute; left: var(--sidebar-w); top: 0; bottom: 0; width: 330px; background: #f7f8fb; border-right: 1px solid var(--border); box-shadow: 8px 0 24px rgba(0,0,0,.12); z-index: 39; padding: .9rem 1rem; overflow-y: auto; }
.sub-menu h3 { font-size: 1.15rem; font-weight: 600; color: var(--navy); margin-bottom: .8rem; }
.sub-menu .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.tile.main-menu-tile { display: flex; align-items: center; min-height: 54px; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: .5rem .7rem; color: var(--text); font-size: .86rem; line-height: 1.25; box-shadow: var(--shadow); }
.tile.main-menu-tile:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.tile.main-menu-tile.unavailable { color: var(--muted); background: #fbfbfd; }

.workspace { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
/* bar tab utama: tab non-aktif abu-abu dengan × tebal, aktif merah muda; garis merah muda tipis di bawah (bukti 03) */
.tabbar { height: var(--tabbar-h); flex: 0 0 var(--tabbar-h); background: #eef0f0; border-bottom: 1px solid var(--pink); display: flex; align-items: flex-end; }
.tabs-scroll { display: flex; align-items: flex-end; gap: 6px; padding: 0 5px; overflow-x: auto; flex: 1; scrollbar-width: none; } .tabs-scroll::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: 1.1rem; height: 31px; padding: 0 12px; background: #cfcfcf; color: #4a4a4a; border-radius: 4px 4px 0 0; font-size: 15.5px; white-space: nowrap; border: none; }
.tab:hover { text-decoration: none; background: #c4c4c4; } .tab.active { background: var(--pink); color: #fff; }
.tab .x, .tab-close { font-weight: 800; font-size: 19px; color: #3a3a3a; opacity: .85; cursor: pointer; } .tab .x:hover, .tab-close:hover { opacity: 1; }
.tab.active .x { color: #fff; }
.tab-group { display: inline-flex; align-items: center; position: relative; }
.tab-group .tab { padding-right: 36px; }
.tab-group .tab-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); line-height: 1; }
.tab-group.active .tab-close { color: #fff; }
.tab-count { position: relative; padding: 0 10px; font-size: 15px; color: #444; background: #dcdcdc; height: 31px; display: flex; align-items: center; gap: 4px; cursor: pointer; align-self: flex-end; }
.tab-count svg { width: 13px; height: 13px; } .tab-count:hover, .tab-count.open { background: #cfcfcf; }
.tab-count .tab-list { top: calc(100% + 2px); min-width: 240px; max-height: 70vh; overflow-y: auto; }
.panes { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.pane { position: absolute; inset: 0; overflow: auto; display: flex; flex-direction: column; }
.pane-content { flex: 1; display: flex; flex-direction: column; min-height: 100%; }
.pane-content > .content, .page { padding: .9rem 1rem 3rem; }
.pane-loading { padding: 2rem; color: var(--muted); font-style: italic; }
.toast { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; padding: .55rem 1rem; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.25); z-index: 100; font-size: .9rem; }

/* ===== sub-tab modul dokumen & master ===== */
.doc-module { display: flex; flex-direction: column; flex: 1; min-height: 100%; }
.subtabbar { display: flex; align-items: flex-end; gap: 4px; padding: 0 18px 0 2px; background: #fbfbfb; border-bottom: 1px solid #b9b9b9; height: var(--subtab-h); flex: 0 0 var(--subtab-h); }
/* ikon daftar: saat DAFTAR aktif tab terang (±#f5f5f5→#efefef) berbingkai tanpa garis bawah sehingga menyambung ke panel daftar (bukti 02);
   saat form aktif hijau (bukti 03). Tab non-aktif ("Data Baru" saat daftar/dokumen lain aktif) abu-abu lebih gelap ±#cecece (bukti 02, 18a). */
.list-toggle { width: 56px; height: 39px; border: 1px solid #c3c3c3; border-bottom: none; background: linear-gradient(#f6f6f6, #f0f0f0); color: #444;
               border-radius: 4px 4px 0 0; display: grid; place-items: center; cursor: pointer; margin-right: 0; margin-bottom: -1px; position: relative; z-index: 1; }
.list-toggle.form-on { background: #64b72f; border-color: #5aa52a; color: #fff; height: 38px; margin-bottom: 0; }
.list-toggle svg { width: 22px; height: 22px; }
.subtab { display: inline-flex; align-items: center; gap: .9rem; height: 38px; padding: 0 12px; background: #cecece; border: 1px solid #c0c0c0; border-bottom: none; border-radius: 4px 4px 0 0; color: #333; cursor: pointer; font-size: 17px; white-space: nowrap; }
.subtab.on { background: #fbfbfb; border-top: 2px solid var(--pink); margin-bottom: -1px; height: 39px; } .subtab .x { font-weight: 800; font-size: 18px; opacity: .85; } .subtab .x:hover { opacity: 1; }
.subtabbar .grow { flex: 1; }
.icon-btn { width: 40px; height: 33px; border: 1px solid #2f6db5; background: #fff; border-radius: 4px; display: inline-grid; place-items: center; color: #1d5aa6; cursor: pointer; margin-bottom: 5px; }
.icon-btn svg { width: 17px; height: 17px; } .icon-btn.hint { background: #f7a600; border-color: #e39a00; color: #fff; font-weight: 700; font-size: 16px; }
/* tombol oranye "Petunjuk Penggunaan" = ikon BOHLAM putih (bukti tahap 2 acc-icon-bulb-idea, mis. A41/A42/A47/A49 & A20 pojok kanan
   atas), bukan teks "?": teks tombol disembunyikan (nama aksesibel tetap dari title), bohlam digambar sendiri sebagai latar */
.icon-btn.hint { font-size: 0; color: transparent; background-repeat: no-repeat; background-position: center; background-size: 18px 18px;
  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='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2V16h5v-.1c0-.8.4-1.5 1-2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
.icon-btn:hover, .icon-btn.on { background: var(--primary-50); } .icon-btn.hint:hover { background: #ec9d00; }
/* menu gear pengaturan form (pojok kanan sub-tab): pengalih kolom tambahan rincian */
.gear-wrap { position: relative; display: inline-flex; align-self: flex-end; }
.gear-menu { top: calc(100% - 3px); min-width: 250px; }
.dd-item.check-item { display: flex; align-items: center; gap: 8px; } .dd-item.check-item .ck { font-size: 16px; width: 16px; }
.subpanes { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.subpane { flex: 1 0 auto; display: flex; flex-direction: column; }
.subdocs { display: contents; }   /* sub-tab dokumen/hasil laporan ikut menjadi anak flex .subpanes (mengisi tinggi pane) */

/* ===== daftar (grid) — bukti 02/04e/05b/06/08/09/10/11/12/17 ===== */
.list-view { padding: 11px 10px 12px 9px; display: flex; flex-direction: column; gap: 11px; }
/* chip filter: bukti 02 Tanggal 56–156, Pelanggan 165–278, Status 286–380, Sudah dicetak 388–518, corong 527 (px PNG) */
.chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-left: 4px; }
.chip { display: inline-flex; align-items: center; gap: 4px; height: 33px; border: 1px solid #c4c4c4; background: #fff; border-radius: 3px; padding: 0 5px 0 6px; font-size: 12.5px; color: #333; cursor: pointer; position: relative; }
.chip:hover { border-color: var(--primary); } .chip .chev svg { width: 12px; height: 12px; } .chip.on { border-color: var(--primary); color: var(--primary); font-weight: 600; }
.chip .chip-pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; background: #fff; border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: .6rem; min-width: 220px; font-weight: 400; color: var(--text); display: flex; flex-direction: column; gap: .4rem; cursor: default; }
.chip .chip-pop input, .chip .chip-pop select { border: 1px solid var(--border); border-radius: 4px; padding: .35rem .5rem; font: inherit; width: 100%; }
.chip-filter { border: 1px solid #6aa7e6; color: #1d5aa6; background: #c9e3fb; border-radius: 3px; width: 48px; height: 33px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; cursor: pointer; font-size: .78rem; }
.chip-filter svg { width: 15px; height: 15px; }
/* bukti 08/09/17 (daftar 136–160 baris, posisi sama): kotak cari 1205–1467, kotak jumlah record 1474–1557 px PNG → ujung kanan
   toolbar 3,5 px CSS di kiri tepi grid, jarak cari–jumlah 9 px CSS, kotak jumlah 102 px CSS (dulu 1212–1473 / 1478–1560) */
.list-toolbar { display: flex; align-items: center; gap: 6px; padding-left: 5px; padding-right: 3.5px; }
.btn-add { background: #1d5fb0; color: #fff; border: 1px solid #174f95; width: 59px; height: 33px; border-radius: 3px; display: inline-grid; place-items: center; cursor: pointer; }
.btn-add svg { width: 21px; height: 21px; stroke-width: 2.6; } .btn-add:hover { background: #174f95; }
.btn-icon { background: #fff; border: 1px solid #2f6db5; color: #1d5aa6; height: 33px; min-width: 37px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; gap: .2rem; cursor: pointer; padding: 0 .45rem; }
.list-toolbar .grow ~ .btn-icon { background: #d6e2ef; border-color: #7ea6d4; min-width: 48px; }
.btn-icon svg { width: 16px; height: 16px; } .btn-icon:hover { background: var(--primary-50); text-decoration: none; }
.btn-icon .chev svg { width: 11px; height: 11px; }
/* toolbar kanan daftar PER MODUL (_alat_daftar.html, uimeta.LIST_TOOLBAR). Bukti 02/08/09/10/12/17 (px PNG): tombol putih bergaris
   abu-biru (inti garis #919fad–#9fb0be dengan halo biru muda), ikon abu-biru tua; tombol ber-▾ 40 px (ikon di +16, ▾ di +30 dari tepi kiri), tanpa ▾ 33 px, jarak antartombol
   3–4 px, tombol terakhir berakhir x 1173 → 49 / 40,4 / 3,65 px CSS. Menu ▾ = .dropdown biasa di bawah tombol, rata kanan. */
.list-tools { display: inline-flex; align-items: center; gap: 3.65px; }
.list-tools .lt { position: relative; display: inline-flex; }
.list-tools .btn-icon { width: 49px; min-width: 0; padding: 0 0 0 10.6px; justify-content: flex-start; gap: 1.45px; background: #fff; border-color: #93a7ba;
  color: #2c4a68; box-shadow: inset 0 0 0 1px #d8e6f2, 0 0 1.5px .5px #cfe0f2; }
.list-tools .btn-icon.polos { width: 40.4px; padding: 0; justify-content: center; }
.list-tools .btn-icon:hover, .list-tools .btn-icon[aria-expanded="true"] { background: var(--primary-50); }
.list-tools .btn-icon svg { stroke-width: 1.9; }
.list-tools .btn-icon .chev { display: inline-flex; } .list-tools .btn-icon .chev svg { width: 14.7px; height: 14.7px; stroke-width: 2.6; }
.list-tools .lt-menu { top: calc(100% + 2px); min-width: 210px; border-radius: 3px; }
.list-tools .lt-menu .dd-item.check-item .ck { color: #1d5aa6; }
.list-toolbar .grow { flex: 1; }
.search-box { position: relative; margin-left: 32px; margin-right: 3px; } .search-box input { width: 320px; height: 33px; border: 1px solid #c4c4c4; border-radius: 3px; padding: 0 2rem 0 .6rem; font: inherit; font-size: 15px; }
.search-box svg { position: absolute; right: .55rem; top: 8px; width: 17px; height: 17px; color: #222; }
.rec-count { border: 1px solid #c4c4c4; border-radius: 3px; height: 33px; min-width: 102px; display: inline-flex; align-items: center; justify-content: flex-end; padding: 0 .7rem; font-size: 15px; background: #f6f6f6; color: #555; }
.grid-wrap { overflow: auto; background: #fff; border: 1px solid #d0d0d0; border-radius: 2px; }
/* C33: daftar yang lebih panjang dari layar — chip filter, toolbar, dan header grid tetap; hanya badan grid yang bergulir.
   Tinggi daftar dibatasi tinggi pane (layar − bar atas − bar tab − sub-tab, sama seperti .doc-form), kotak grid (.grid-box) mengecil
   dan .grid-wrap menggulir isinya sendiri; th sudah sticky (top 0) terhadap .grid-wrap. Daftar pendek tetap setinggi isinya.
   Bukti 08/17 (141 & 136 baris): tidak ada bilah gulir pane dan kotak cari/kolom sama posisinya dengan daftar pendek, jadi bilah gulir
   tegak bawaan grid disembunyikan (lebar 0: tidak memakan lebar kolom) dan diganti penanda tipis melayang (.gs-bar, komponen
   gridScroll di shell.js) yang tampil saat grid disorot/digulir dan bisa diseret. Bilah gulir mendatar (layar sempit) tetap ada. */
/* C36: tanpa pita halaman grid memanjang sampai dasar pane; sisa 2 px di bawah = bukti 08/17/05b (garis bawah grid y 734 dari 737 px PNG) */
.doc-module .list-view { max-height: calc(100vh - var(--topbar-h) - var(--tabbar-h) - var(--subtab-h)); padding-bottom: 2px; }
.list-view > .chips, .list-view > .list-toolbar, .list-view > .pager { flex: 0 0 auto; }
.list-view > .grid-box { position: relative; flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
.grid-box > .grid-wrap { flex: 0 1 auto; min-height: 0; overscroll-behavior: contain; }
.grid-box > .grid-wrap::-webkit-scrollbar { width: 0; height: 12px; }
.grid-box > .grid-wrap::-webkit-scrollbar-track { background: #f1f1f1; }
.grid-box > .grid-wrap::-webkit-scrollbar-thumb { background: #c1c1c1; border: 3px solid #f1f1f1; border-radius: 6px; }
.grid-box > .grid-wrap::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
/* penanda 7 px di tepi kanan dalam grid (kanan 1 px): tidak menutupi angka rata kanan (padding sel 9 px) */
.gs-bar { position: absolute; right: 2px; width: 7px; opacity: 0; transition: opacity .25s; z-index: 2; display: none; }
.grid-box.gs-on > .gs-bar { display: block; }
.grid-box.gs-on:hover > .gs-bar, .grid-box.gs-scroll > .gs-bar, .grid-box.gs-drag > .gs-bar { opacity: 1; }
.gs-thumb { position: absolute; left: 1px; right: 1px; top: 0; border-radius: 3px; background: rgba(0, 0, 0, .32); }
.gs-bar:hover .gs-thumb, .grid-box.gs-drag .gs-thumb { left: 0; right: 0; background: rgba(0, 0, 0, .45); }
table.grid { display: table; width: 100%; border-collapse: collapse; font-size: 15px; }
.grid th { background: var(--slate); color: #fff; font-weight: 400; font-size: 14.5px; text-align: center; height: 32px; padding: 0 9px 0 22px; white-space: nowrap; border-right: 1px solid rgba(255,255,255,.22); position: sticky; top: 0; overflow: hidden; text-overflow: ellipsis; }
.grid th.num { text-align: center; } .grid td.num { text-align: right; }
/* ikon urut (segitiga atas/bawah) di kiri sel header, hanya kolom yang di live berikon urut */
.grid th .sort-ico { position: absolute; left: 9px; top: 50%; width: 7px; height: 11px; transform: translateY(-50%); opacity: .75; }
.grid th .sort-ico::before, .grid th .sort-ico::after { content: ""; position: absolute; left: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; }
.grid th .sort-ico::before { top: 0; border-bottom: 4px solid #fff; } .grid th .sort-ico::after { bottom: 0; border-top: 4px solid #fff; }
.grid th .sort-ico.on { opacity: 1; } .grid th[data-sort] { cursor: pointer; } .grid th[data-sort]:hover { background: #50617a; }
.grid td { height: 41px; padding: 0 9px; border-bottom: 1px solid #ececec; border-right: 1px solid #ececec; vertical-align: middle; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; color: #222; }
.grid td:last-child { border-right: none; }
.grid tbody tr:nth-child(even) { background: #f8f8f8; } .grid tbody tr:hover { background: var(--primary-light); cursor: pointer; }
/* nomor dokumen & nama master = teks hitam (klik baris membuka dokumen, bukti 02/08); <a> tetap ada untuk tanpa-JS */
.list-grid { table-layout: fixed; } .list-grid td { max-width: none; }
.list-grid td a, .list-view .grid td a { color: inherit; } .list-grid td a:hover { text-decoration: none; }
.grid tr.lvl-1 td:first-child { padding-left: 1.6rem; } .grid tr.lvl-2 td:first-child { padding-left: 2.6rem; } .grid tr.lvl-3 td:first-child { padding-left: 3.6rem; }
.grid tr.lvl-1 td.name { padding-left: 1.6rem; } .grid tr.lvl-2 td.name { padding-left: 2.6rem; } .grid tr.lvl-3 td.name { padding-left: 3.6rem; }
.grid td.empty { text-align: center; color: var(--muted); padding: 1.5rem; white-space: normal; height: auto; }
.neg { color: var(--danger); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.pager { display: flex; gap: .4rem; align-items: center; padding: .4rem 0; color: var(--muted); font-size: .82rem; }
.pager a, .pager button { padding: .2rem .55rem; border: 1px solid var(--border); border-radius: 4px; background: #fff; cursor: pointer; color: var(--primary); }
/* C36: di shell daftar panjang dimuat bertahap saat badan grid digulir (listMore, shell.js) seperti bukti 08 (141 barang tanpa pita
   halaman; grid memanjang sampai dasar pane). Pager tetap dirender untuk tanpa JS, disembunyikan bila pemuatan bertahap aktif.
   Saat halaman berikut diambil tampil label kecil "Memuat…" di dasar grid; gagal → pesan, gulir lagi untuk mencoba. */
.list-view.lm-on > .pager { display: none; }
.grid-box.lm-busy::after, .grid-box.lm-error::after { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 3; pointer-events: none; padding: 3px 12px; border: 1px solid #d0d0d0; border-radius: 3px; background: rgba(255, 255, 255, .96); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); font-size: 12.5px; color: #555; white-space: nowrap; }
.grid-box.lm-busy::after { content: "Memuat…"; }
.grid-box.lm-error::after { content: "Gagal memuat baris berikutnya. Gulir lagi untuk mencoba."; color: var(--danger); }
/* sisa C36: grid yang memanjang sampai dasar pane (badan grid bergulir, .gs-on) bergaris bawah 2 baris piksel seperti bukti 08/17/05b
   (y 734 abu 208, y 735 abu 223; dulu 1 baris y 735 abu 237). Digambar di atas pengguling: garis bawah .grid-wrap tertutup isi grid. */
.doc-module .list-view > .grid-box.gs-on::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; z-index: 3; pointer-events: none;
  background: linear-gradient(#cfcfcf 50%, #dfdfdf 50%); }
@media print { .doc-module .list-view > .grid-box.gs-on::before { display: none; } }
/* Tahap 2 — daftar BERSAMA (dulu hanya lokal di .sl-eb-daftar m3). Bukti evidence/ui2/*-daftar.png (A01–B14; mis. A01 PNG 1568 putih
   s/d y 770 dari 782, B01/A18/A26 PNG 1176 putih s/d y 544 dari 553): kotak grid putih memanjang sampai dasar pane walau isinya pendek
   atau kosong, garis bawahnya ±13 px CSS di atas dasar layar (padding bawah 12 + garis 1). Daftar panjang yang badan gridnya bergulir
   tetap berakhir 2 px di atas dasar (C36, bukti tahap 1 08/17): kelas .lv-panjang dipasang gridScroll (shell.js) dari tinggi tabel
   terhadap ruang badan grid saat pendek, sehingga tidak berayun di antara dua keadaan. Kepala grid daftar 33,5 px (bukti 182–209 PNG
   1568 = 28 baris, tahap 1 & 2; dulu 32 px = 26 baris 181–206). Baris kosong "Belum ada data" setinggi baris biasa (41 px; bukti B01
   157–182 PNG 1176), teks hitam 15 px. */
.doc-module .list-view { height: calc(100vh - var(--topbar-h) - var(--tabbar-h) - var(--subtab-h)); padding-bottom: 12px; }
.doc-module .list-view.lv-panjang { padding-bottom: 2px; }
.doc-module .list-view > .grid-box, .doc-module .list-view > .grid-box > .grid-wrap { flex-grow: 1; }
.list-view .grid thead th { height: 33.5px; }
.list-view .grid td.empty { height: 41px; padding: 0 9px; color: #222; font-size: 15px; }
@media print { .doc-module .list-view { height: auto; padding-bottom: 0; } }
/* catatan pengembang "asumsi" (tanpa bukti live): hanya ikon ⓘ kecil bertooltip (title), teksnya tidak tampil ke pengguna */
.asumsi-note { font-size: 0; color: var(--muted); font-style: normal; cursor: help; display: inline-flex; align-items: center; vertical-align: middle; }
.asumsi-note::before { content: "ⓘ"; font-size: 13px; line-height: 1; }
.df-head .lbl-hint { font-size: 14px; line-height: 1; color: #333; cursor: help; margin-left: 1px; } /* FORM_META "label_hints": ⓘ bertooltip di label header (bukti A35) */

/* ===== form dokumen — bukti 03/05/07/11b/12b/09b/10b/18a =====
   Tinggi form = tinggi pane (layar − bar atas − bar tab − sub-tab): kartu grid memanjang sampai bawah, panel total menempel kanan bawah;
   isi kartu yang lebih panjang (Info lainnya) digulir di dalam kartu. */
.doc-form { display: grid; grid-template-columns: minmax(0, 1fr) 116px; grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: 32px; row-gap: 0;
            padding: 6px 18px 15px 7px; height: calc(100vh - var(--topbar-h) - var(--tabbar-h) - var(--subtab-h)); min-height: 540px; position: relative; flex: 0 0 auto; }
.doc-form > .field-errors { grid-column: 1 / -1; grid-row: 1; margin-bottom: 8px; }
.df-head { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: start; margin-bottom: 11px; font-size: 16px; }
.df-head .lhs { display: grid; grid-template-columns: var(--lbl-w, 191px) minmax(0, auto); row-gap: 12px; align-items: center; margin-left: min(var(--lbl-x, 95px), 4.95vw); justify-content: start; min-width: 0; }
.df-head .rhs { display: grid; grid-template-columns: auto minmax(355px, max-content); column-gap: 10px; row-gap: 12px; align-items: center; justify-items: end; }
.df-head label { text-align: left; font-size: 16px; color: #262626; white-space: nowrap; } .df-head .rhs > label { text-align: right; }
.df-head label .req, .req { color: var(--danger); }
.df-head .ctl { display: flex; align-items: center; gap: 0; min-width: 0; }
.df-head .rhs .ctl { justify-self: start; }
.df-head input, .df-head select, .df-head textarea { height: var(--field-h); border: 1px solid #c8c8c8; border-radius: 3px; padding: 0 .55rem; font: inherit; font-size: 15px; background: #fff; color: #222; }
.df-head .lookup { position: relative; width: 545px; flex: 0 1 545px; min-width: 180px; } .df-head .lookup input { width: 100%; }
.df-head .ctl-bank .lookup, .df-head .ctl-fromBank .lookup, .df-head .ctl-toBank .lookup { width: 545px; }
/* bukti 05: Bank SR 361–693 px PNG (407 px CSS); flex-basis ikut diatur karena .lookup di .ctl (flex) memakai flex-basis 545 */
.df-head.code-SR .ctl-bank .lookup, .df-head.code-PP .ctl-bank .lookup { width: 407px; flex-basis: 407px; }
/* bukti 05: dua tombol ikon di kanan Nilai Pembayaran (594–626 & 630–662 px PNG: 24 px CSS dari input, 39 × 32, jarak 5) */
.df-head .ctl-tool { width: 39px; height: var(--field-h); flex: 0 0 39px; border: 1px solid #3d7cc9; background: #fff; color: #1d5aa6; border-radius: 3px;
                     display: inline-grid; place-items: center; cursor: pointer; padding: 0; margin-left: 5px; }
.df-head .ctl-tool:first-of-type { margin-left: 24px; } .df-head .ctl-tool svg { width: 15px; height: 15px; } .df-head .ctl-tool:hover { background: var(--primary-50); }
.df-head .ctl-transDate .date-wrap { width: 220px; } .df-head.code-JV .ctl-transDate .date-wrap { width: 227px; } .df-head.code-JO .ctl-transDate .date-wrap { width: 310px; }
.df-head.code-IA .ctl-transDate .date-wrap { width: 263px; }
/* 12b JV: Tipe Transaksi = input baca-saja abu-abu (x 321–642 PNG), bukan select */
.df-head .ctl-transactionType select, .df-head .ctl-transactionType .ro-input { width: 392px; background: #f6f6f6; }
.df-head .ctl-transactionType .ro-input { color: #8a8a8a; border-color: #dcdcdc; cursor: default; }
.df-head .num-input { width: 261px; text-align: right; }
.df-head .cur-box { margin-left: min(24px, 1.25vw); width: 165px; flex: 0 1 165px; min-width: 52px; height: var(--field-h); border: 1px solid #dcdcdc; background: #f6f6f6; color: #8a8a8a; border-radius: 3px; display: inline-flex; align-items: center; padding: 0 .6rem; font-size: 15px; }
/* combobox skema nomor: lebar bawaan 294 px CSS; per jenis lewat --sel-w/--sel-gap (C25: JO 326/31, IA 336/33, JV 375/39 — bukti 09b/10b/12b) */
.df-head .number-ctl { display: flex; align-items: center; gap: var(--sel-gap, 24px); justify-content: flex-end; width: max(355px, calc(var(--sel-w, 294px) + var(--sel-gap, 24px) + 37px)); }
.df-head .number-ctl select, .df-head .number-ctl > input { width: var(--sel-w, 294px); font-size: 14px; }
.df-head .num-saved { position: relative; width: 355px; } .df-head .num-saved input { width: 100%; font-size: 14px; padding-right: 1.8rem; }
.df-head .num-saved .x { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); font-weight: 800; cursor: pointer; color: #222; }
.df-head .rhs .date-wrap { width: 218px; }
.df-ops { display: flex; gap: 5px; justify-content: flex-end; grid-column: 1 / -1; justify-self: end; }
.op-wrap { position: relative; display: inline-flex; }
.btn-op { border: 1px solid #3d7cc9; color: #1d5aa6; background: #fff; border-radius: 3px; height: 32px; padding: 0 .55rem; font-size: 14.5px; cursor: pointer; display: inline-flex; align-items: center; gap: .2rem; position: relative; }
.btn-op svg { width: 11px; height: 11px; } .btn-op:hover { background: var(--primary-50); } .btn-op[disabled] { opacity: .5; cursor: not-allowed; }
/* Ambil ▾ / Proses ▾ kanan atas form dokumen: bukti ui-capture-2 B01/B04/A12 Ambil x 1605, Proses x 1678 logis (dulu 1596/1673:
   padding 8,8 px membuat tiap tombol ±5,6 px lebih lebar) */
.df-ops .btn-op { padding: 0 6px; }
/* C3: menu Ambil ▾ / Proses ▾ rata kanan dengan tombolnya (bukti 18c), tidak melebar menutupi kolom tombol kanan */
.dropdown.op-menu { right: 0; left: auto; top: calc(100% + 2px); min-width: 218px; border-radius: 3px; }
.dropdown.op-menu.left { left: 0; right: auto; }   /* tombol di kiri kartu (Rincian ▾ IA) membuka ke kanan */
.dd-note { padding: .35rem .9rem .5rem; font-size: 12.5px; color: var(--muted); font-style: italic; }
/* 10b IA: "Rincian ▾" 543–608 px PNG, 24 px CSS di kanan kotak cari */
.df-pane-head .grid-tool { margin-left: 27px; } .df-pane-head .grid-tool .btn-op { height: var(--field-h); }
.switch { width: 31px; height: 16px; border-radius: 10px; background: #cfd6e0; position: relative; cursor: pointer; border: none; flex: 0 0 31px; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left .15s; }
.switch.on { background: #2a5c9b; } .switch.on::after { left: 17px; } .switch[disabled] { cursor: not-allowed; opacity: .8; }
/* input tanggal + tombol kalender di dalam kotak */
.date-wrap { position: relative; display: inline-flex; align-items: center; }
.date-wrap input.date { width: 100%; padding-right: 2rem; }
.date-wrap .cal { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: none; background: none; color: #444; width: 24px; height: 24px; display: grid; place-items: center; cursor: pointer; padding: 0; }
.date-wrap .cal svg { width: 16px; height: 16px; } .date-wrap .cal:hover { color: var(--primary); }
.date-wrap .date-native { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: none; padding: 0; }
/* lookup: kaca pembesar SELALU di dalam kotak (C4 — dulu jatuh ke bawah input di tab Info lainnya) */
.lookup > .ico { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: #222; pointer-events: none; display: grid; place-items: center; }
.lookup > .ico svg { width: 15px; height: 15px; }
.lookup > input { padding-right: 1.9rem; }
.lookup.off input { background: #f6f6f6; color: #999; cursor: not-allowed; }
/* pihak terpilih sebagai chip "[C.00137] Nama ×" di dalam kotak (bukti 03/18a/18) */
.lookup.chip-mode { display: flex; align-items: center; gap: 4px; border: 1px solid #c8c8c8; border-radius: 3px; background: #fff; height: var(--field-h); padding-left: 4px; }
.lookup.chip-mode > input { border: none !important; height: 100% !important; flex: 1; min-width: 40px; background: transparent; padding-left: .3rem; outline: none; box-shadow: none !important; }
.lookup.chip-mode:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(45,107,208,.15); }
.lk-chip { display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 44px); height: 22px; padding: 0 6px; background: #eaeeff; border: 1px solid #b9c7ee; border-radius: 3px; font-size: 13px; color: #333; white-space: nowrap; }
.lk-chip .t { overflow: hidden; text-overflow: ellipsis; } .lk-chip .x { color: #f0a020; font-weight: 800; font-size: 15px; cursor: pointer; line-height: 1; }
.lk-chip .x:hover { color: #d9822b; }
.i-ico { display: inline-flex; vertical-align: -2px; color: #333; cursor: help; } .i-ico svg { width: 14px; height: 14px; }

.df-body { grid-column: 1; grid-row: 3; display: flex; min-height: 0; }
.side-tabs { display: flex; flex-direction: column; gap: 2px; padding-top: 5px; flex: 0 0 34px; }
.side-tab { width: 34px; height: 40px; border: 1px solid #c9c9c9; border-right: none; background: #d2d2d2; color: #4a4a4a; border-radius: 4px 0 0 4px; display: grid; place-items: center; cursor: pointer; padding: 0; }
.side-tab svg { width: 18px; height: 18px; } .side-tab.on { background: #fff; color: var(--pink); border-color: #dcdcdc; box-shadow: inset 2px 0 0 var(--pink); }
.df-pane { flex: 1; min-width: 0; min-height: 0; background: #fff; border: 1px solid #dcdcdc; border-radius: 0 3px 3px 3px; padding: 10px 8px 10px; position: relative; display: flex; flex-direction: column; overflow: auto; }
.tab-body { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 0; }
.df-pane-head { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; }
.df-pane-head .search-detail { position: relative; width: 520px; } .df-pane-head .search-detail input { width: 100%; height: var(--field-h); border: 1px solid #c8c8c8; border-radius: 3px; padding: 0 2rem 0 .55rem; font: inherit; font-size: 15px; }
.df-pane-head .search-detail .ico { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; display: grid; place-items: center; } .df-pane-head .search-detail .ico svg { width: 15px; height: 15px; }
.df-pane-head .grow { flex: 1; }
.df-pane-head .title { font-size: 23px; font-weight: 400; color: #222; white-space: nowrap; } .df-pane-head .title .req { color: var(--danger); }
.df-pane-head .find { border: 1px solid #c8c8c8; color: #1d5aa6; background: #fff; border-radius: 3px; width: 32px; height: 32px; display: inline-grid; place-items: center; cursor: pointer; }
.df-pane-head .find svg { width: 16px; height: 16px; }
.df-pane .grid-wrap { flex: 1 0 auto; border: none; border-radius: 0; overflow: visible; }
.df-pane .grid { table-layout: fixed; font-size: 15px; }
.df-pane .grid th { height: 33px; padding: 0 6px; }
.df-pane .grid th.drag-h { width: 38px; }
.df-pane .grid th.c-code { width: 115px; } .df-pane .grid th.c-qty { width: 80px; } .df-pane .grid th.c-unit { width: 65px; } .df-pane .grid th.c-price { width: 115px; }
.df-pane .grid th.c-disc { width: 75px; } .df-pane .grid th.c-total { width: 126px; } .df-pane .grid th.c-amount { width: 150px; } .df-pane .grid th.c-date { width: 99px; }
.df-pane .grid th.c-type { width: 130px; }
.df-pane .preset-account th.c-code { width: 130px; } .df-pane .preset-journal th.c-code { width: 150px; } .df-pane .preset-journal th.c-amount { width: 140px; }
.df-pane .preset-item_cost th.c-price { width: 125px; } .df-pane .preset-item_adjust th.c-code { width: 130px; } .df-pane .preset-item_adjust th.c-qty { width: 100px; }
.df-pane .preset-item_adjust th.c-unit { width: 81px; } .df-pane .preset-invoice th.c-total { width: 150px; } .df-pane .preset-invoice th.c-disc { width: 120px; }
.df-pane .preset-expense th.c-code { width: 130px; }   /* 04c Biaya Lainnya: Kode # 1195–1301 px PNG */
/* bukti 03/18a: ikon urut hanya di header Nama Barang (rincian barang berharga) */
.df-pane .preset-item_price th.c-main { position: sticky; }
.df-pane .preset-item_price th.c-main::before, .df-pane .preset-item_price th.c-main::after { content: ""; position: absolute; left: 11px; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; opacity: .75; }
.df-pane .preset-item_price th.c-main::before { top: calc(50% - 6px); border-bottom: 4px solid #fff; } .df-pane .preset-item_price th.c-main::after { top: calc(50% + 2px); border-top: 4px solid #fff; }
.df-pane .grid td { height: 40px; max-width: none; white-space: nowrap; padding: 0 6px; border-right: none; }
.df-pane .grid td.drag { border-right: 1px solid #ececec; }
.df-pane .grid input, .df-pane .grid select { border: 1px solid transparent; border-radius: 3px; padding: .25rem .35rem; font: inherit; width: 100%; background: transparent; color: #222;
                                              text-overflow: ellipsis; }   /* C21: teks terpotong berakhiran "…" (bukti 18a "KUBAH-SS...") */
.df-pane .grid input:focus, .df-pane .grid select:focus { border-color: var(--primary); background: #fff; outline: none; }
.df-pane .grid td.num input { text-align: right; } .df-pane .grid td.ro { color: #222; }
.df-pane .grid .drag { color: #9a9a9a; cursor: grab; text-align: center; padding: 0; }
.df-pane .grid .lookup .ico { display: none; } .df-pane .grid .lookup { min-width: 0; } .df-pane .grid .lookup > input { padding-right: .35rem; }
.df-pane .grid .rm { color: var(--danger); cursor: pointer; font-weight: 800; font-size: 17px; display: none; }
.df-pane .grid tbody tr:hover td.drag .grip { display: none; } .df-pane .grid tbody tr:hover td.drag .rm { display: inline; }
.df-pane .grid tr.empty-row:hover td.drag .grip { display: inline; }
/* SR/PP: "+" tambah potongan di kolom pegangan (muncul saat baris disorot, seperti ×) — tidak ada kolom tombol di ujung grid (C22) */
.df-pane .grid .add-child { display: none; color: #1d5aa6; cursor: pointer; font-weight: 800; font-size: 17px; margin-left: 6px; }
.df-pane .grid tbody tr:hover td.drag .add-child { display: inline; }
.df-pane .grid tr.child-row { background: #fbfcfe; } .df-pane .grid tr.child-row td.drag .rm { display: inline; }
.df-pane .grid td.child-cell { padding: 3px 6px; }
.df-pane .grid .child-line { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.df-pane .grid .child-lbl { color: var(--muted); font-size: 13px; white-space: nowrap; margin-right: 4px; }
.df-pane .grid .child-f { flex: 0 1 150px; min-width: 90px; } .df-pane .grid .child-f.cf-lookup { flex: 0 1 230px; }
.df-pane .grid .child-f input { border-color: #d8d8d8; background: #fff; }
/* grid tanpa kolom pegangan (09b JO, 10b IA): × hapus baris muncul di sel pertama saat baris disorot */
.df-pane .grid.no-handle td.c-main { position: relative; }
.df-pane .grid .rm.rm-float { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); line-height: 1; z-index: 1; }
.df-pane .grid.no-handle tbody tr:hover .rm.rm-float { display: inline; }
.df-pane .grid.no-handle tbody tr:hover td.c-main > input { padding-left: 1.2rem; }
.df-pane .grid tbody tr:nth-child(even) { background: transparent; }
.df-pane .grid tbody tr:hover { cursor: default; background: var(--primary-50); }
.df-pane .grid tr.empty-row td.empty { text-align: center; color: #222; padding: 0; font-size: 15.5px; }
.df-pane .grid tr.empty-row:hover { background: transparent; }
/* stempel status bulat ala cap karet (C10): satu stempel di tengah kartu, tampil di semua tab dokumen tersimpan (bukti 18a, 18, 18d).
   Isi form TIDAK memudar: stempel dicampur "multiply" (bukan opacity + pita putih) sehingga teks/judul di bawahnya tetap tajam dan
   justru sedikit lebih gelap di area tinta, seperti bukti 18 ("Info Tambahan" di atas stempel tetap gelap). pointer-events none →
   input di bawahnya tetap bisa diklik. Bentuk digambar sendiri dengan ukuran diukur dari bukti 18a/18d (PNG 1568 px, bingkai stempel
   diputar balik 14°): lingkaran luar Ø104–105 px PNG (128 CSS); cincin luar 4 px PNG + celah 1,5 + cincin dalam 2,5 (5/2/3 CSS);
   cakram tengah r 28,5 px PNG dan pita teks 117,5 × 42 px PNG (144 × 51 CSS) yang keduanya berpusat ±4 px PNG di bawah pusat
   lingkaran; pita bergaris tepi terang 1,5 px PNG di sisi dalam; titik bintang terang di cincin atas sedikit kiri dari puncak (sudut
   ±100°); tinta abu muda (bukti 205–215 di latar putih). Huruf = celah tinta (putih). Pusat lingkaran x 823,5 / y 372 PNG (18a, 18d). */
.stamp-wrap { position: absolute; left: calc(55% + 1px); top: calc(41% + 3px); transform: translate(-50%, -50%) rotate(-14deg); width: 128px; height: 128px; border-radius: 50%;
              border: 5px solid var(--ink); --ink: #cfcfcf; pointer-events: none; mix-blend-mode: multiply; z-index: 3; }
.stamp-wrap::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; border: 3px solid var(--ink); }
.stamp-wrap::after { content: ""; position: absolute; left: 50%; top: calc(50% + 5px); width: 70px; height: 70px; transform: translate(-50%, -50%);
                     border-radius: 50%; background: var(--ink); }
.stamp-wrap .stamp { position: absolute; z-index: 1; left: 50%; top: calc(50% + 5px); transform: translate(-50%, -50%); width: 144px; height: 51px;
                     display: grid; place-items: center; background: var(--ink); box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 5px #fff; color: #fff;
                     font-weight: 800; text-transform: uppercase; text-align: center; font-size: 15px; line-height: 1.05; letter-spacing: .06em;
                     padding: 0 8px; }
/* titik bintang = ::before pita (di atas cincin): pusat cincin pada sudut ±100° → relatif ke pojok kiri-atas pita (pita berpusat 5 px di
   bawah pusat lingkaran, 144 × 51) */
.stamp-wrap .stamp::before { content: ""; position: absolute; left: 57px; top: -42.5px; width: 9px; height: 9px; background: #fff;
                             clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.stamp-wrap.tone-red { --ink: #e9b4b2; }
/* kolom tombol kanan (bukti 03: 116 × 53 px CSS; Simpan biru tua + bagian panah lebih gelap; Cetak/Lampiran biru muda; Lain-lain hijau; Hapus merah muda) */
.df-buttons { grid-column: 2; grid-row: 2 / span 2; display: flex; flex-direction: column; gap: 12px; padding-top: 0; }
.btn-side { position: relative; width: 116px; height: 53px; border-radius: 4px; border: 1px solid transparent; display: flex; align-items: center; justify-content: center; gap: .3rem; cursor: pointer; box-shadow: 0 2px 3px rgba(0,0,0,.18); }
.btn-side > svg { width: 28px; height: 28px; stroke-width: 1.6; } .btn-side .chev { position: absolute; right: 0; top: 0; bottom: 0; width: 34px; display: grid; place-items: center; border-radius: 0 4px 4px 0; }
.btn-side .chev svg { width: 14px; height: 14px; stroke-width: 2.4; }
.btn-side > svg:first-child { margin-right: 26px; }
.btn-side.delete > svg:first-child, .master-form .btn-side.save > svg:first-child { margin-right: 0; }
.btn-side.save { background: #1364b4; color: #fff; border-color: #0d559b; margin-bottom: 15px; } .btn-side.save .chev { background: #06559b; } .btn-side.save:hover { background: #0f58a0; }
/* abu-abu "belum ada perubahan" (18a dokumen tersimpan, 12b JV Data Baru): bagian panah ▾ tidak tampil dan ikon di tengah tombol */
.btn-side.save.idle { background: #dddddd; border-color: #cfcfcf; color: #9a9a9a; } .btn-side.save.idle .chev { display: none; }
.btn-side.save.idle > svg:first-child { margin-right: 0; }
.btn-side.print, .btn-side.attach { background: #a2ccf8; color: #1a56a8; border-color: #86b6eb; } .btn-side.print:hover, .btn-side.attach:hover { background: #93c1f3; }
.btn-side.more { background: #99e29f; color: #1f6e2a; border-color: #7fcf86; } .btn-side.more:hover { background: #8bd892; }
.btn-side.delete { background: #ffb7bc; color: #e0405a; border-color: #f39aa1; margin-top: 15px; } .btn-side.delete:hover { background: #ffa5ab; }
.btn-side .dropdown { right: 0; top: calc(100% + 2px); min-width: 190px; text-align: left; }
/* bukti 18b: menu Lain-lain menjorok ±30 px PNG ke kiri dari tepi kanan tombol, item berikon */
.btn-side.more .dropdown { right: 36px; min-width: 240px; }
.dd-item.ico-item { display: flex; align-items: center; gap: 10px; padding-top: 10px; padding-bottom: 10px; } .dd-item.ico-item svg { width: 17px; height: 17px; color: #1d5aa6; flex: 0 0 17px; }
.df-pane-head .search-detail input[disabled] { background: #f6f6f6; cursor: not-allowed; }
/* panel total: kanan bawah, tinggi 77 px; lebar per jenis (bukti 03 tiga kotak 809 px, 05/12b dua kotak 528 px, 11b/10b satu kotak 244 px) */
.df-totals { grid-column: 1; grid-row: 4; display: flex; justify-content: flex-end; margin-top: 13px; }
.totals-panel { display: grid; grid-template-columns: repeat(3, 1fr); width: 809px; height: 77px; border: 1px solid #d4d4d4; background: #fafafa; border-radius: 3px; padding: 6px 0; }
.totals-panel.three { width: 809px; } .totals-panel.two { grid-template-columns: repeat(2, 1fr); width: 528px; } .totals-panel.one { grid-template-columns: 1fr; width: 244px; }
/* totals_kind "boxes" (FORM_META totals_boxes): lebar per jumlah kotak, diukur dari bukti A12 (1 kotak 200 px PNG), A13 (2: 430),
   A17 (3: 661), A24 (5: 1122) × 1920/1568 */
.totals-panel.boxes.n1 { width: 244px; } .totals-panel.boxes.n2 { width: 528px; } .totals-panel.boxes.n3 { width: 809px; }
.totals-panel.boxes.n4 { width: 1090px; } .totals-panel.boxes.n5 { width: 1374px; }
/* FORM_META save_plain / print_plain: tombol tanpa bagian ▾, ikon di tengah (bukti A15/A16/A23–A25) */
.btn-side.save.plain > svg:first-child, .btn-side.print.plain > svg:first-child { margin-right: 0; }
/* angka Sub Total/Total/Nilai sejajar tengah input Diskon (bukti 03: baris angka y 698–707 px PNG; dulu 7 px lebih rendah) */
.totals-panel .box { padding: 4px 15px 2px; border-right: 1px solid #d8d8d8; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.totals-panel .box:last-child { border-right: none; }
.totals-panel .box .lbl { font-size: 16px; display: flex; align-items: center; gap: .4rem; color: #262626; white-space: nowrap; } .totals-panel .box .val { text-align: right; font-size: 16px; color: #222; margin-bottom: 8px; }
.totals-panel .box .val.big { font-size: 16px; }
.totals-panel .ppn-line { margin-left: auto; font-size: 12px; color: var(--muted); }
.totals-panel .bal { margin-left: auto; font-size: 12px; color: #1b8a4c; } .totals-panel .bal.off { color: var(--danger); }
.totals-panel .disc { display: flex; align-items: center; gap: .3rem; border: 1px solid #c8c8c8; border-radius: 3px; padding: 0 .3rem 0 .45rem; height: 34px; background: #fff; width: 235px; }
.totals-panel .disc input { border: none; flex: 1; text-align: right; font: inherit; font-size: 15px; width: 100%; min-width: 0; outline: none; } .totals-panel .disc small { color: #9a9a9a; font-size: 12px; }
.totals-panel .disc .calc { color: #333; display: grid; place-items: center; } .totals-panel .disc .calc svg { width: 17px; height: 17px; }
.pct-toggle { border: 1px solid #3d7cc9; color: #1d5aa6; border-radius: 3px; font-size: 11px; padding: 0 .3rem; line-height: 15px; cursor: pointer; background: #fff; }
.pct-toggle.on { background: #2a5c9b; color: #fff; }
.doc-form.no-totals { grid-template-rows: auto auto minmax(0, 1fr) 0; }
/* tab Info lainnya: dua kolom berjudul seksi biru berikon (bukti 18) + seksi Lainnya (Neraca) di bawah */
.info-pane { padding: 2px 4px 8px; }
.info-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 37px; align-items: start; }
.info-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.info-sec { min-width: 0; }
.info-h { display: flex; align-items: center; gap: 7px; font-size: 20px; font-weight: 400; color: var(--live-blue); border-bottom: 1px solid #dcdcdc; padding-bottom: 6px; margin: 4px 0 10px; }
.info-h .ih-ico { display: grid; place-items: center; color: var(--live-blue); } .info-h .ih-ico svg { width: 18px; height: 18px; }
.info-note { margin: -4px 0 10px 18px; font-size: 12.5px; color: var(--muted); font-style: italic; }
.info-rows { display: grid; grid-template-columns: 253px minmax(0, 1fr); row-gap: 11px; align-items: center; padding-left: 18px; font-size: 16px; }
.info-rows.two { grid-template-columns: 253px minmax(0, 1fr) 253px minmax(0, 1fr); column-gap: 0; }
.info-rows.two > .ic { margin-right: 37px; }
.info-rows > label.il { text-align: left; color: #262626; display: flex; align-items: center; gap: 6px; padding-right: 10px; }
.info-rows > label.il.top { align-self: start; padding-top: 6px; }
.info-rows .addr-pick { margin-left: auto; border: 1px solid #3d7cc9; background: #fff; color: #1d5aa6; height: 30px; border-radius: 3px; display: inline-flex; align-items: center; gap: 2px; padding: 0 5px; cursor: not-allowed; opacity: .9; }
.info-rows .addr-pick svg { width: 14px; height: 14px; }
.info-rows .ic { min-width: 0; } .info-rows .ic.ro { color: #444; font-size: 15px; }
.info-rows input, .info-rows select, .info-rows textarea { width: 100%; height: var(--field-h); border: 1px solid #c8c8c8; border-radius: 3px; padding: 0 .55rem; font: inherit; font-size: 15px; background: #fff; color: #222; }
.info-rows textarea { height: auto; min-height: 56px; padding: .35rem .55rem; resize: vertical; line-height: 1.35; }
.info-rows textarea[name="toAddress"] { min-height: 83px; } .info-rows textarea[name="description"] { min-height: 67px; }
.info-rows input[type=checkbox] { width: 16px; height: 16px; margin: 0; }
.info-rows .lookup { position: relative; } .info-rows .lookup.chip-mode input { height: 100%; }
.info-rows .date-wrap { width: 100%; max-width: 254px; }
.info-rows .num-input { text-align: right; max-width: 254px; }
/* Info Pajak: baris setinggi baris input (±38 px PNG, bukti 18) dan checkbox kedua 185 px PNG (226 px CSS) setelah yang pertama */
.info-rows .check { display: inline-flex; align-items: center; gap: 7px; } .info-rows .checks { display: flex; gap: 0; min-height: var(--field-h); align-items: center; }
.info-rows .checks .check { width: 226px; flex: 0 0 auto; }
.info-col + .info-col .info-h { margin-top: 8px; }   /* kolom kanan (Info Pajak/Pengiriman/Tambahan) ±3 px PNG lebih rendah (bukti 18) */
.info-col + .info-col .info-sec + .info-sec .info-h { margin-top: 6px; }
/* Lainnya (Neraca): <details> tertutup bawaan; grid dua kolom sama dengan .info-cols di atas sehingga label/input sejajar */
.info-extra { margin-top: 18px; }
.info-extra > summary { list-style: none; cursor: pointer; color: #555; font-size: 17px; user-select: none; }
.info-extra > summary::-webkit-details-marker { display: none; }
.info-sum .sum-chev { display: inline-grid; margin-left: 4px; transform: rotate(-90deg); transition: transform .15s; } .info-sum .sum-chev svg { width: 14px; height: 14px; }
details[open] > .info-sum .sum-chev { transform: none; }
.info-xcols { margin-top: 4px; } .info-xcols.sys { margin-top: 11px; }
.info-xcol { min-width: 0; }
.order-info { display: grid; grid-template-columns: 1fr auto; gap: 0; width: 800px; max-width: 100%; font-size: 16px; border: 1px solid #d4d4d4; border-radius: 3px; margin: -6px 0 0; padding: 4px 12px 2px; }
.order-info dt { color: #262626; padding: 0; height: 37px; display: flex; align-items: center; border-bottom: 1px solid #e3e3e3; }
.order-info dd { margin: 0; height: 37px; display: flex; align-items: center; justify-content: flex-end; border-bottom: 1px solid #e3e3e3; }
.order-info dt:nth-last-of-type(1), .order-info dd:last-child { border-bottom: none; }
.order-info .badge { font-size: 15px; font-weight: 400; border-radius: 2px; padding: .15rem .6rem; border: 1px solid #f6d3a4; }
.field-errors { background: #fde8e8; color: #9f2f2f; border: 1px solid #f5c2c2; border-radius: 4px; padding: .5rem .8rem; grid-column: 1 / -1; }
.journal-box { margin: .5rem .8rem 1rem; }

/* ===== form master — bukti 08b (Barang & Jasa) & 17b (Akun Perkiraan) ===== */
.master-form { grid-template-rows: auto auto minmax(0, 1fr); }
/* tab master (bukti 08b: Umum 56–112, Penjualan / Pembelian 122–278, Stok 283–329 … px PNG; jarak 5 px PNG, 10 px sesudah tab aktif) */
.master-form > .mf-tabs { grid-column: 1; grid-row: 2; display: flex; gap: 4px; margin-top: -1px; padding-left: 5px; }
.mf-tabs button { height: 31px; padding: 0 12px; border: 1px solid #bdbdbd; border-bottom: none; background: #cdcdcd; color: #444; border-radius: 3px 3px 0 0; font-size: 15.5px; cursor: pointer; }
.mf-tabs button.on { background: #fafafa; color: #222; border-color: #d0d0d0; box-shadow: inset 0 2px 0 var(--pink); margin-right: 8px; }
.master-form .df-buttons { grid-row: 3; }
.master-form .btn-side.save { margin-bottom: 0; }
.mf-body { grid-row: 3; }
.mf-pane { border-radius: 0 3px 3px 3px; background: #fafafa; padding: 20px 10px 14px; }
.mf-cols { display: grid; grid-template-columns: 817px minmax(0, 1fr); column-gap: 36px; align-items: start; }
.mf-sec { min-width: 0; }
.mf-sec .info-h { margin-top: 0; }
.mf-rows { display: grid; grid-template-columns: 258px minmax(0, 1fr); row-gap: 9px; align-items: center; padding-left: 20px; font-size: 16px; }
.mf-rows.single { max-width: 1100px; }
.mf-rows.two { grid-template-columns: 258px minmax(0, 1fr) 258px minmax(0, 1fr); }
.mf-rows.two > .mf-c { margin-right: 36px; }
.mf-rows > label { text-align: left; color: #262626; display: flex; align-items: center; gap: 6px; padding-right: 10px; }
.mf-rows > label.top { align-self: start; padding-top: 6px; }
.mf-rows .mf-check { gap: 7px; } .mf-rows .mf-check input { width: 16px; height: 16px; margin: 0; }
.mf-c { min-width: 0; }
.mf-c .mf-sfx-wrap { display: inline-flex; align-items: center; gap: 14px; max-width: 100%; }   /* spec "suffix" (A44: [  ] Tahun) */
.mf-c .mf-calc { display: inline-block; text-align: right; }                                   /* spec "calc" (A44: Tarif 0 %) */
.mf-c input, .mf-c select, .mf-c textarea { width: 100%; height: 34px; border: 1px solid #c8c8c8; border-radius: 3px; padding: 0 .55rem; font: inherit; font-size: 15px; background: #fff; color: #222; }
.mf-c textarea { height: auto; min-height: 70px; padding: .35rem .55rem; resize: vertical; }
.mf-c input[type=checkbox] { width: 16px; height: 16px; }
.mf-c .lookup { position: relative; } .mf-c .lookup.chip-mode { height: 34px; } .mf-c .lookup.chip-mode input { height: 100%; }
.mf-c .check { display: inline-flex; align-items: center; gap: 7px; }
.mf-hint { font-size: 14px; color: #777; font-style: italic; margin-top: 4px; }
.mf-c .auto-no { display: flex; align-items: center; gap: 0; position: relative; }
.mf-c .auto-no .switch { position: absolute; left: -61px; }   /* bukti 08b: toggle Kode Barang x≈237 px PNG */
.mf-switch-l { font-size: 16px; color: #262626; } .mf-switch-l .small { font-size: 12px; }
.mf-check .switch { margin: 0; }
/* lebar kontrol persis bukti (px CSS): Barang — Nama/Kategori 539, Jenis/Kode/UPC 399, Satuan 310; Akun — semua 469; seksi kanan 469–493 */
.mf-sec .mf-c { max-width: 539px; }
.mf-cols .mf-sec + .mf-sec .mf-c { max-width: 493px; }
.mod-item .mf-rows .mf-itemType, .mod-item .mf-rows .mf-no, .mod-item .mf-rows .mf-upcNo { max-width: 399px; }
.mod-item .mf-rows .mf-unit1Id { max-width: 310px; }
.mod-item .mf-cols { column-gap: 107px; } .mod-item .mf-cols .mf-sec + .mf-sec .mf-rows { grid-template-columns: 234px minmax(0, 1fr); }
.mod-glaccount .mf-cols .mf-rows .mf-c { max-width: 469px; }
.mf-rows > .mf-span { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; min-height: 34px; color: #262626; }
.mf-rows > .mf-span .switch { margin-right: 24px; }
.mf-rows > .mf-check { min-height: 34px; }
/* Lainnya (Neraca) form master: tertutup bawaan; dua kolom = grid .mf-cols di atas (label/input sejajar) */
.mf-extra { margin-top: 18px; }
.mf-details > summary { list-style: none; cursor: pointer; color: #555; font-size: 17px; user-select: none; }
.mf-details > summary::-webkit-details-marker { display: none; }
.mf-xcols { margin-top: 4px; }
@media (max-width: 1400px) { .mf-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ===== kartu, tombol, form umum (dipakai halaman lain & plugin) ===== */
.content { padding: .9rem 1rem 3rem; }
.page-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .8rem; flex-wrap: wrap; }
.page-head .title h1 { margin: 0; } .page-head .title .crumb { color: var(--muted); font-size: .82rem; }
.page-head .actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card .card-head { padding: .55rem .9rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .9rem; }
.card .card-head .right { margin-left: auto; font-weight: 400; color: var(--muted); font-size: .8rem; }
.card .card-body { padding: .9rem; }
.grid-cards, div.grid { display: grid; gap: .8rem; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: 1fr 1fr; }
  .doc-form { grid-template-columns: 1fr; height: auto; } .df-buttons { grid-column: 1; grid-row: auto; flex-direction: row; } .btn-side { width: 90px; }
  .df-head { grid-template-columns: 1fr; } .df-head .lhs { margin-left: 0; } .df-head .lookup { width: 100%; } .info-cols, .mf-cols { grid-template-columns: 1fr; }
  .info-rows.two, .mf-rows.two { grid-template-columns: 200px minmax(0, 1fr); } .df-totals { grid-row: auto; } }
@media (max-width: 760px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .sub-menu { width: calc(100vw - var(--sidebar-w)); } .df-head .rhs { min-width: 0; } .totals-panel { width: 100% !important; height: auto; grid-template-columns: repeat(2, 1fr); } .info-rows, .mf-rows, .info-rows.two, .mf-rows.two { grid-template-columns: 1fr; } }
.stat { padding: .8rem; } .stat .label { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }
.stat .value { font-size: 1.35rem; font-weight: 700; margin-top: .2rem; } .stat .sub { color: var(--muted); font-size: .78rem; margin-top: .2rem; }
.stat.blue { border-left: 4px solid var(--primary); } .stat.green { border-left: 4px solid var(--success); } .stat.orange { border-left: 4px solid var(--warning); } .stat.red { border-left: 4px solid var(--danger); }
.btn { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--border); background: #fff; color: var(--text); padding: .4rem .8rem; border-radius: var(--radius); font: inherit; font-weight: 500; cursor: pointer; line-height: 1.2; }
.btn:hover { background: var(--bg); text-decoration: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-dark); }
.btn-danger { color: var(--danger); } .btn-danger:hover { background: #fdeaea; }
.btn-sm { padding: .25rem .55rem; font-size: .82rem; } .btn-link { border: none; background: none; color: var(--primary); padding: .2rem .4rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem .9rem; }
@media (max-width: 1100px) { .form-grid { grid-template-columns: repeat(2, 1fr); } }
.field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; } .field.span-2 { grid-column: span 2; } .field.span-4 { grid-column: 1 / -1; }
.field label { font-size: .78rem; color: var(--muted); font-weight: 500; } .field label .req { color: var(--danger); }
.input, .field input, .field select, .field textarea { border: 1px solid #cfd8e3; border-radius: var(--radius); padding: .4rem .6rem; font: inherit; background: #fff; width: 100%; min-width: 0; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus, .df-head input:focus, .info-rows input:focus, .mf-c input:focus,
.mf-c select:focus, .mf-c textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(45,107,208,.15); }
.field input[type=checkbox] { width: auto; }
.field .check { display: flex; align-items: center; gap: .5rem; padding-top: .4rem; }
.lookup { position: relative; min-width: 0; } .lookup input { width: 100%; }
.tbl .lookup { min-width: 150px; } .tbl td .lookup input { min-width: 150px; }
.lookup .menu { position: absolute; z-index: 50; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0,0,0,.12); max-height: 260px; overflow-y: auto; min-width: 280px; }
.lookup .menu div { padding: .4rem .6rem; cursor: pointer; display: flex; gap: .5rem; } .lookup .menu div:hover, .lookup .menu div.hl { background: var(--primary-light); }
.lookup .menu .no { color: var(--muted); font-size: .8rem; min-width: 70px; }
.lookup .menu .empty { color: var(--muted); font-style: italic; }
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tbl th, .tbl td { padding: .45rem .6rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.tbl th { background: #f4f6f9; color: var(--muted); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.tbl tbody tr:hover { background: var(--primary-50); }
.tbl .num { text-align: right; white-space: nowrap; }
.tbl .muted { color: var(--muted); } .tbl tfoot td { font-weight: 700; background: #f4f6f9; }
.tbl.lines td { padding: .25rem .3rem; } .tbl.lines input, .tbl.lines select { padding: .3rem .4rem; font-size: .85rem; }
.tbl.lines td.num input { width: 100px; } .tbl.lines input[type=checkbox] { width: auto; }
.tbl.lines .rm { color: var(--danger); cursor: pointer; font-weight: 700; }
.tbl tr.lvl-0 td { font-weight: 700; } .tbl tr.lvl-1 td:first-child { padding-left: 1.4rem; } .tbl tr.lvl-2 td:first-child { padding-left: 2.4rem; } .tbl tr.lvl-3 td:first-child { padding-left: 3.4rem; }
.tbl tr.parent td { font-weight: 600; background: #fafbfc; }
.badge { display: inline-block; padding: .12rem .5rem; border-radius: 10px; font-size: .74rem; font-weight: 600; background: #e9edf2; color: var(--text); white-space: nowrap; }
.badge.ok, .badge.Lunas, .badge.Terproses, .badge.Selesai, .badge.Dikirim, .badge.Difaktur { background: #e5f8ee; color: #1b8a4c; }
.badge.warn, .badge.Belum, .badge.Menunggu { background: #fff3e3; color: #b86a08; }
.badge.danger, .badge.Jatuh { background: #fde8e8; color: #b23c3c; }
.badge.info, .badge.Diposting, .badge.Dalam, .badge.Sedang { background: var(--primary-light); color: var(--primary-dark); }
.badge.closed, .badge.Ditutup { background: #e9edf2; color: var(--muted); }
.badge.um { background: #fff3e3; color: #b86a08; border: 1px solid #f0d3ad; font-size: .66rem; padding: 0 .35rem; vertical-align: middle; cursor: help; }
.toolbar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; padding: .6rem .9rem; border-bottom: 1px solid var(--border); }
.toolbar input, .toolbar select { border: 1px solid #cfd8e3; border-radius: var(--radius); padding: .35rem .6rem; font: inherit; }
.toolbar .grow { flex: 1; }
.totals { margin-left: auto; width: 380px; max-width: 100%; }
.totals .row { display: flex; justify-content: space-between; padding: .3rem 0; border-bottom: 1px dashed var(--border); }
.totals .row.grand { font-weight: 700; font-size: 1.05rem; border-bottom: none; border-top: 2px solid var(--text); margin-top: .3rem; padding-top: .5rem; }
.alert { padding: .6rem .9rem; border-radius: var(--radius); margin-bottom: .8rem; border: 1px solid transparent; }
.alert-danger { background: #fde8e8; color: #9f2f2f; border-color: #f5c2c2; } .alert-success { background: #e5f8ee; color: #1b6b3f; border-color: #bfe9d1; }
.alert-info { background: var(--primary-light); color: var(--primary-dark); }
.tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--border); margin-bottom: .8rem; }
.tabs button, .tabs a { border: none; background: none; padding: .5rem .9rem; font: inherit; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; font-weight: 500; }
.tabs button.on, .tabs a.on { color: var(--primary); border-bottom-color: var(--primary); } .tabs a:hover { text-decoration: none; }
.tabs button .badge { margin-left: .3rem; background: var(--primary-light); color: var(--primary-dark); }
.tabs-box { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: .8rem; }
.tabs-box a, .tabs-box button { border: 1px solid var(--border); border-bottom: none; background: #e6eaf1; padding: .4rem .9rem; border-radius: 4px 4px 0 0; color: var(--text); font: inherit; cursor: pointer; }
.tabs-box a.on, .tabs-box button.on { background: #fff; font-weight: 600; margin-bottom: -1px; } .tabs-box a:hover { text-decoration: none; }
.filter-bar .lookup input, .filter-bar select, .filter-bar input { border: 1px solid #cfd8e3; border-radius: var(--radius); padding: .4rem .6rem; font: inherit; background: #fff; }
pre.mono { white-space: pre-wrap; word-break: break-word; font-size: .8rem; line-height: 1.45; }
.footer-actions { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--border); padding: .6rem .9rem; display: flex; gap: .5rem; align-items: center; z-index: 5; }
.footer-actions .right { margin-left: auto; display: flex; gap: .5rem; }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: .25rem .75rem; font-size: .88rem; } .kv dt { color: var(--muted); } .kv dd { margin: 0; }
.filter-bar { display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; margin-bottom: 1rem; }
.filter-bar .field { min-width: 140px; }
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 60%, #3b2f6e 100%); }
.login-card { width: 400px; max-width: 92vw; background: #fff; border-radius: 10px; padding: 2rem; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.login-card .brand { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.2rem; font-size: 1.3rem; font-weight: 800; color: var(--navy); }
.login-card .brand .logo { width: 36px; height: 36px; border-radius: 8px; background: var(--navy); color: #fff; display: grid; place-items: center; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
.text-muted { color: var(--muted); } .text-right { text-align: right; } .text-danger { color: var(--danger); } .text-success { color: #1b8a4c; }
.mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mt-2 { margin-top: 1rem; } .small { font-size: .8rem; }
.chart { display: flex; align-items: flex-end; gap: 10px; height: 160px; padding: .5rem 0; }
.chart .bar-group { flex: 1; display: flex; align-items: flex-end; gap: 3px; height: 100%; position: relative; }
.chart .bar { flex: 1; background: var(--primary); border-radius: 3px 3px 0 0; min-height: 2px; } .chart .bar.alt { background: #90caf9; }
.chart .lbl { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: .72rem; color: var(--muted); }

/* ===== dashboard ===== */
.dash { padding: .7rem .9rem 2rem; }
.dash-top { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.btn-widget { border: 1px solid var(--primary); background: #dbe8fb; color: var(--primary); border-radius: 4px; padding: .35rem 2.2rem; font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.btn-widget svg { width: 16px; height: 16px; }
.dash-top select { margin-left: auto; border: 1px solid var(--border); border-radius: 4px; padding: .3rem .6rem; font: inherit; min-width: 320px; background: #fff; }
.widgets { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
@media (max-width: 1200px) { .widgets { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .widgets { grid-template-columns: 1fr; } }
.widget { background: #fff; border: 1px solid var(--border); border-radius: 4px; min-height: 230px; display: flex; flex-direction: column; }
.widget .w-head { display: flex; align-items: center; padding: .4rem .7rem; border-bottom: 1px solid var(--border-light); font-size: .88rem; font-weight: 500; }
.widget .w-head .w-tools { margin-left: auto; display: flex; gap: .4rem; color: var(--primary); } .widget .w-head .w-tools svg { width: 14px; height: 14px; cursor: pointer; }
.widget .w-body { padding: .6rem .8rem; flex: 1; font-size: .86rem; }
.widget .w-sub { font-size: .7rem; color: var(--muted); text-align: right; } .widget .w-sub b { color: var(--primary); font-weight: 500; }
.act-row { display: grid; grid-template-columns: 60px 1fr; gap: .3rem .6rem; align-items: start; margin-bottom: .5rem; }
.act-day { text-align: center; } .act-day .d { font-size: 1.5rem; font-weight: 300; line-height: 1; } .act-day small { display: block; font-size: .7rem; color: var(--muted); }
.act-item { display: grid; grid-template-columns: 14px 48px 1fr; gap: .4rem; align-items: center; padding: .2rem 0; }
.act-item .dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--primary); } .act-item .dot.ok { border-color: var(--success); background: var(--success); }
.act-item .t { color: var(--muted); font-size: .8rem; } .act-item a { color: var(--text); }
.donut-row { display: grid; grid-template-columns: 110px 1fr; gap: .6rem; align-items: center; }
/* teks tengah donut dalam satuan viewBox (42): 8 ≈ 19 px pada donut 100 px; dulu .9rem dibaca sebagai 14,4 satuan → meluber ke cincin */
.donut { width: 100px; height: 100px; } .donut .center { font-size: 8px; font-weight: 600; fill: var(--success); } .donut .center.long { font-size: 6px; }
.legend { list-style: none; margin: 0; padding: 0; } .legend li { display: flex; align-items: center; gap: .4rem; padding: .15rem 0; }
.legend .sw { width: 9px; height: 9px; border-radius: 50%; } .legend .v { margin-left: auto; font-variant-numeric: tabular-nums; } .legend .v small { color: var(--muted); font-size: .68rem; margin-right: .2rem; }
.pct { font-size: .66rem; border-radius: 10px; padding: 0 .4rem; border: 1px solid; margin-left: .3rem; } .pct.up { color: #1b8a4c; border-color: #9fdcb0; background: #e5f8ee; } .pct.down { color: #b4232a; border-color: #ee9fa3; background: #fde8e8; }
.big-num { display: flex; align-items: baseline; justify-content: space-between; font-size: 1.3rem; } .big-num small { font-size: .7rem; color: var(--muted); margin-right: .2rem; }
/* grafik dashboard: skala seragam mengikuti viewBox 560×184 (neraca/web/charts.py), teks sumbu dalam satuan viewBox */
.svg-chart { display: block; width: 100%; height: auto; aspect-ratio: 560 / 184; } .svg-chart .ax { font-size: 11px; fill: #6e7b8a; }
.kpi2 { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1rem; } .kpi2 .k { font-size: .95rem; } .kpi2 .k b { float: right; }
.kpi2 .sub { font-size: .72rem; color: var(--muted); display: flex; justify-content: space-between; } .kpi2 .sub b { font-weight: 500; }

/* ===== daftar laporan ===== */
.report-index { display: grid; grid-template-columns: 350px 1fr; gap: .8rem; padding: .7rem .9rem; min-height: 100%; }
.report-cats { background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: .5rem; align-self: start; }
.report-cat { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem; border-radius: 4px; color: var(--text); cursor: pointer; font-size: .95rem; }
.report-cat:hover { background: var(--primary-50); text-decoration: none; } .report-cat.on { background: var(--pink); color: #fff; }
.report-cat svg { width: 16px; height: 16px; }
.report-tiles-wrap { background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: .8rem 1rem; }
.report-tiles-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .6rem; } .report-tiles-head h2 { font-size: 1.4rem; font-weight: 400; margin: 0; }
.report-tiles-head input { margin-left: auto; width: 440px; border: 1px solid var(--border); border-radius: 4px; padding: .4rem .6rem; font: inherit; }
.report-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem 1.5rem; }
.report-tile { display: grid; grid-template-columns: 44px 1fr; gap: .6rem; align-items: center; padding: .5rem .3rem; border-radius: 4px; color: var(--text); cursor: pointer; }
.report-tile:hover { background: var(--primary-50); text-decoration: none; } .report-tile.unavailable { opacity: .75; }
.report-tile .ico { width: 40px; height: 40px; border: 2px solid var(--primary); border-radius: 4px; display: grid; place-items: center; color: var(--primary); } .report-tile .ico svg { width: 22px; height: 22px; }
.report-tile .lbl { font-size: 1rem; } .report-tile .desc { font-size: .72rem; color: var(--muted); }
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 80; display: grid; place-items: center; }
.modal { width: 470px; max-width: 94vw; background: #fff; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: hidden; }
.modal .m-head { background: var(--navy-2); color: #fff; padding: .45rem .8rem; font-size: .9rem; display: flex; align-items: center; } .modal .m-head .x { margin-left: auto; cursor: pointer; font-weight: 700; }
.modal .m-body { padding: .6rem 1rem 1rem; } .modal .m-body h4 { font-size: 1.1rem; font-weight: 400; margin: .5rem 0 .4rem; border-bottom: 1px solid var(--border-light); padding-bottom: .3rem; }
.modal .m-tabs { display: flex; gap: 1rem; border-bottom: 1px solid var(--border); margin-bottom: .4rem; } .modal .m-tabs span { padding: .4rem 0; cursor: pointer; color: var(--muted); } .modal .m-tabs span.on { color: var(--pink); border-bottom: 2px solid var(--pink); }
.modal .prow { display: grid; grid-template-columns: 1fr 220px; gap: .4rem; align-items: center; margin: .3rem 0; } .modal .prow label .req { color: var(--danger); }
.modal .prow input, .modal .prow select { border: 1px solid var(--border); border-radius: 4px; padding: .35rem .6rem; font: inherit; width: 100%; }
.modal .pcheck { display: flex; align-items: center; gap: .5rem; margin: .3rem 0; }
.modal .m-foot { display: flex; justify-content: flex-end; padding: .7rem 1rem; border-top: 1px solid var(--border-light); }
.report-view { display: flex; flex-direction: column; min-height: 100%; background: #7d8795; }
.report-toolbar { display: flex; justify-content: center; gap: .5rem; padding: .5rem; background: var(--bg); border-bottom: 1px solid var(--border); }
.report-toolbar a, .report-toolbar button { background: none; border: none; color: var(--text); cursor: pointer; width: 30px; height: 26px; display: inline-grid; place-items: center; border-radius: 4px; }
.report-toolbar a:hover, .report-toolbar button:hover { background: #fff; } .report-toolbar svg { width: 16px; height: 16px; }
.report-sheet { background: #fff; width: 760px; max-width: 96%; margin: 1rem auto 2rem; padding: 1.4rem 2.2rem 2rem; box-shadow: 0 2px 12px rgba(0,0,0,.3); font-family: "Helvetica Neue", Arial, sans-serif; font-size: .78rem; color: #222; }
.report-sheet .co { text-align: center; font-family: "Courier New", monospace; font-size: .8rem; } .report-sheet .ttl { text-align: center; color: #a81d4a; font-size: 1.25rem; font-weight: 700; margin: .1rem 0; }
.report-sheet .per { text-align: center; font-family: "Courier New", monospace; font-size: .8rem; } .report-sheet .cur { text-align: right; font-size: .62rem; font-style: italic; margin: .6rem 0 1rem; }
.report-sheet table { width: 100%; border-collapse: collapse; } .report-sheet th { text-align: left; font-size: .72rem; border-bottom: 1.5px solid #333; padding: .2rem .3rem; } .report-sheet th.num { text-align: right; }
.report-sheet td { padding: .12rem .3rem; vertical-align: top; } .report-sheet td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; width: 160px; }
.report-sheet tr.g0 td { font-weight: 700; text-transform: uppercase; padding-top: .5rem; } .report-sheet tr.g1 td { font-weight: 700; padding-left: .8rem; } .report-sheet tr.g2 td { font-weight: 700; padding-left: 1.5rem; }
.report-sheet tr.lv0 td:first-child { padding-left: 2.2rem; font-weight: 700; } .report-sheet tr.lv1 td:first-child { padding-left: 3rem; } .report-sheet tr.lv2 td:first-child { padding-left: 3.8rem; } .report-sheet tr.lv3 td:first-child { padding-left: 4.6rem; }
.report-sheet tr.sum td { font-weight: 700; } .report-sheet tr.sum td:first-child { padding-left: 1.5rem; } .report-sheet tr.sum td.num { border-top: 1px solid #333; }
.report-sheet tr.sum0 td { font-weight: 700; } .report-sheet tr.sum0 td:first-child { padding-left: .8rem; } .report-sheet tr.sum0 td.num { border-top: 1px solid #333; }
.report-sheet tr.grand td { font-weight: 700; text-transform: uppercase; } .report-sheet tr.grand td.num { border-top: 1px solid #333; border-bottom: 3px double #333; }
.report-sheet tr.gap td { height: .6rem; }
.report-sheet .note { margin-top: 1rem; font-size: .7rem; color: #555; }
.report-sheet .tbl th { background: none; color: #222; text-transform: none; } .report-sheet .tbl td { border-bottom: 1px solid #eee; }
.report-head { text-align: center; margin-bottom: 1rem; } .report-head .co { font-size: 1.15rem; font-weight: 700; } .report-head .per { color: var(--muted); }

/* ===== preferensi ===== */
.pref { display: grid; grid-template-columns: 140px 1fr; gap: 0; min-height: 100%; }
.pref-sections { display: flex; flex-direction: column; gap: 2px; padding: .4rem 0 0 .2rem; }
.pref-sec { display: block; text-align: right; padding: .45rem .8rem; background: #d9dfe8; color: var(--text); border-radius: 4px 0 0 4px; border: 1px solid var(--border); border-right: none; font-size: .95rem; }
.pref-sec:hover { background: #e9edf3; text-decoration: none; } .pref-sec.on { background: #fff; color: var(--pink); font-weight: 600; }
.pref-body { background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: .7rem 1rem 4rem; position: relative; min-height: 600px; }
.pref-body h2 { font-size: 1.15rem; font-weight: 500; color: var(--primary); display: flex; align-items: center; gap: .4rem; border-bottom: 1px solid var(--border-light); padding-bottom: .3rem; margin-bottom: .8rem; }
.pref-grid { display: grid; grid-template-columns: 260px 450px; gap: .55rem 1rem; align-items: center; } .pref-grid label { font-size: .95rem; }
.pref-grid input, .pref-grid select, .pref-grid textarea, .pref-grid .lookup input { width: 100%; border: 1px solid var(--border); border-radius: 4px; padding: .4rem .6rem; font: inherit; }
.pref-grid .acc { display: flex; flex-direction: column; gap: .3rem; border: 1px solid var(--border); border-radius: 4px; padding: .4rem .5rem; }
.pref-grid .acc .pill { align-self: flex-start; background: #dbe8fb; border: 1px solid #b5cdf0; border-radius: 3px; padding: .05rem .4rem; font-size: .78rem; color: var(--text); }
.pref-grid .acc .lookup input { border: none; padding: .2rem .3rem; }
.pref-save { position: absolute; right: 1rem; bottom: 1rem; display: flex; gap: .5rem; }
.pref-save .btn-primary { padding: .5rem 1.4rem; font-weight: 600; }
.unavail { max-width: 720px; margin: 3rem auto; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 2rem; text-align: center; }
.unavail h1 { color: var(--navy); } .unavail code { background: var(--bg); padding: .1rem .4rem; border-radius: 3px; }
.pane-note { padding: .5rem .8rem; color: var(--muted); font-size: .8rem; }

@media print {
  .topbar, .vertical-menu, .sub-menu, .tabbar, .subtabbar, .toolbar, .footer-actions, .no-print, .pager, .report-toolbar, .df-buttons, .chips, .list-toolbar { display: none !important; }
  .shell, .shell-body, .workspace, .panes, .pane { position: static; overflow: visible; height: auto; display: block; }
  .doc-form { height: auto; min-height: 0; } .df-pane { overflow: visible; } .stamp-wrap { position: absolute; }
  .doc-module .list-view { max-height: none; } .grid-box > .grid-wrap { overflow: visible; } .gs-bar { display: none !important; }
  .grid-box.lm-busy::after, .grid-box.lm-error::after { display: none; }
  .content { padding: 0; } .card { border: none; box-shadow: none; } body { background: #fff; font-size: 12px; }
  .report-view { background: #fff; } .report-sheet { box-shadow: none; width: 100%; margin: 0; }
}