:root{
  --bg:#F4F3F8; --card:#FFFFFF; --ink:#241E33; --muted:#8B8499; --muted2:#5B5468;
  --line:#E9E6F0; --line2:#E0D9EC; --soft:#FAF9FC;
  --primary:#3F2A68; --primary-d:#2E1E4F; --primary-bg:#F1EDF7;
  --gold:#C9A227; --gold-bg:#FBF3DC; --gold-ink:#8A6A16; --cream:#F3E9C8;
  --green:#256D42; --green-bg:#E3F1E7; --red:#A33B2E; --red-bg:#FAE7E4;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
a{color:var(--primary);text-decoration:none;} a:hover{text-decoration:underline;}
input,select,textarea,button{font-family:inherit;}
::placeholder{color:#ABA4B8;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:1px;}
button{cursor:pointer;}
.mono{font-family:var(--mono);}
.hidden{display:none !important;}

/* layout */
.layout{display:flex;min-height:100vh;}
aside.sidebar{width:236px;flex-shrink:0;background:#fff;border-right:1px solid var(--line);
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:20px 14px 16px;}
.brand{display:flex;align-items:center;gap:11px;padding:2px 8px 18px;border-bottom:1px solid #EEECF3;margin-bottom:12px;}
.brand .logo{width:40px;height:40px;border-radius:11px;background:linear-gradient(150deg,#4B3080,#2E1E4F);
  display:flex;align-items:center;justify-content:center;color:var(--cream);font-size:20px;font-weight:800;
  box-shadow:0 3px 8px rgba(46,30,79,.3);}
.brand .t1{font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--primary-d);line-height:1.1;}
.brand .t2{font-size:8.5px;font-weight:700;letter-spacing:.13em;color:#9A8FB3;margin-top:2px;}
.nav-group{font-size:10px;font-weight:700;letter-spacing:.12em;color:#ABA4B8;padding:12px 12px 6px;}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;font-size:13.5px;
  font-weight:600;color:var(--muted2);cursor:pointer;margin-bottom:2px;}
.nav-item:hover{background:var(--soft);color:var(--ink);}
.nav-item.active{background:var(--primary-bg);color:var(--primary);font-weight:700;}
.nav-item svg{flex-shrink:0;}
.side-user{margin-top:auto;border-top:1px solid #EEECF3;padding-top:12px;display:flex;align-items:center;gap:10px;padding-left:6px;}
.avatar{width:34px;height:34px;border-radius:9999px;background:var(--primary);color:var(--cream);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;}

.main-wrap{flex:1;min-width:0;display:flex;flex-direction:column;}
header.topbar{height:60px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:0 28px;position:sticky;top:0;z-index:20;}
.crumb{font-size:13px;font-weight:600;color:var(--muted);}
.crumb b{color:var(--ink);font-weight:700;}
.unit-pick{display:flex;align-items:center;gap:7px;background:var(--primary-bg);border:1px solid var(--line2);
  border-radius:9px;padding:6px 10px;}
.unit-pick select{border:none;background:transparent;font-size:13px;font-weight:700;color:var(--primary);cursor:pointer;}
main{padding:26px 28px 72px;width:100%;max-width:1240px;}

/* headings */
h1.page{margin:0;font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--ink);}
.subtle{font-size:13.5px;font-weight:500;color:var(--muted);margin-top:4px;}
.row-between{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;}

/* cards & tables */
.card{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 3px rgba(43,31,74,.05);}
.card.pad{padding:20px 22px;}
.tbl-wrap{overflow-x:auto;}
table.tbl{width:100%;border-collapse:collapse;min-width:640px;}
table.tbl th{font-size:10.5px;font-weight:700;letter-spacing:.07em;color:var(--muted);text-align:left;
  padding:11px 14px;background:var(--soft);border-bottom:1px solid var(--line);white-space:nowrap;}
table.tbl td{padding:11px 14px;border-bottom:1px solid #F0EEF4;font-size:12.5px;font-weight:600;color:var(--ink);vertical-align:middle;}
table.tbl tbody tr:hover{background:var(--soft);}
table.tbl tr.clickable{cursor:pointer;}
.r{text-align:right;} .c{text-align:center;}
.tfoot td{background:#F6F3EA;font-weight:800;border-top:1px solid var(--line);}

/* buttons */
.btn{padding:10px 16px;border-radius:9px;border:1px solid var(--line2);background:#fff;font-size:13px;font-weight:700;color:var(--muted2);}
.btn:hover{background:var(--soft);}
.btn.primary{border:none;background:var(--primary);color:#fff;box-shadow:0 3px 8px rgba(63,42,104,.25);}
.btn.primary:hover{background:#352258;}
.btn.outline{border:1px solid var(--primary);color:var(--primary);background:#fff;}
.btn.green{border:none;background:var(--green);color:#fff;}
.btn.gold{border:1px solid var(--gold);background:var(--gold-bg);color:var(--gold-ink);}
.btn.danger{color:var(--red);}
.btn.sm{padding:7px 12px;font-size:12px;border-radius:7px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* form fields */
.field label{display:block;font-size:11px;font-weight:700;color:var(--muted2);margin-bottom:6px;}
.field .req{color:var(--red);}
.inp,select.inp,textarea.inp{width:100%;padding:9px 11px;border:1px solid var(--line2);border-radius:8px;
  font-size:13px;font-weight:600;color:var(--ink);background:#fff;}
.inp.mono{font-family:var(--mono);}
.grid{display:grid;gap:14px;}

/* badges */
.badge{display:inline-block;padding:3px 9px;border-radius:9999px;font-size:10.5px;font-weight:800;letter-spacing:.02em;}
.badge.draft{background:#F0EEF4;color:#5B5468;}
.badge.pending{background:var(--gold-bg);color:var(--gold-ink);}
.badge.posted{background:var(--green-bg);color:var(--green);}
.badge.reversed{background:#EDE9F6;color:var(--primary);}
.badge.rejected{background:var(--red-bg);color:var(--red);}
.badge.open{background:var(--green-bg);color:var(--green);}
.badge.closed{background:var(--red-bg);color:var(--red);}

/* stat cards */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:18px;}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:0 1px 3px rgba(43,31,74,.05);}
.stat .label{font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.02em;}
.stat .value{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--ink);margin-top:9px;white-space:nowrap;}
.stat .sub{font-size:11.5px;font-weight:600;margin-top:5px;}

/* misc */
.pill{font-size:11px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 12px;}
.back{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--primary);cursor:pointer;margin-bottom:12px;}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 8px;}
.tab{padding:8px 14px;border-radius:8px;border:1px solid var(--line2);background:#fff;font-size:12.5px;font-weight:700;color:var(--muted2);cursor:pointer;}
.tab.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.note{font-size:11.5px;font-weight:600;color:var(--muted);}
.toast{position:fixed;bottom:22px;right:22px;z-index:100;display:flex;flex-direction:column;gap:8px;}
.toast .msg{background:var(--ink);color:#fff;padding:11px 16px;border-radius:10px;font-size:13px;font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:360px;animation:slidein .2s ease;}
.toast .msg.err{background:#5b1e19;}
.toast .msg.ok{background:#1c4d30;}
@keyframes slidein{from{transform:translateY(8px);opacity:0;}to{transform:none;opacity:1;}}
.tree-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid #F4F2F8;font-size:13px;}
.tree-row .kode{font-family:var(--mono);font-weight:700;color:var(--primary);min-width:52px;}
.tree-row.header{background:var(--soft);font-weight:800;}
.warn-box{background:var(--gold-bg);border:1px solid #EAD9A0;border-radius:10px;padding:12px 14px;font-size:12.5px;font-weight:600;color:var(--gold-ink);}
.ok-box{background:var(--green-bg);border:1px solid #BFE0CB;border-radius:10px;padding:12px 14px;font-size:12.5px;font-weight:600;color:var(--green);}
.err-box{background:var(--red-bg);border:1px solid #EEC4BD;border-radius:10px;padding:12px 14px;font-size:12.5px;font-weight:600;color:var(--red);}

/* Dokumen laporan keuangan */
.print-doc{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 16px rgba(43,31,74,.08);margin-top:18px;padding:40px 48px;}
.fs-grid{display:grid;gap:12px;align-items:center;}
.fs-head{border-bottom:1.5px solid var(--primary);padding:9px 4px;}
.fs-head .h{font-size:10.5px;font-weight:800;letter-spacing:.05em;color:var(--primary);}
.fs-row{padding:7px 4px;}
.fs-row .lbl{font-size:12.5px;color:var(--ink);}
.fs-row .val{font-family:var(--mono);font-size:11.5px;color:var(--ink);text-align:right;white-space:nowrap;}
.fs-row.rule{border-top:1.5px solid var(--primary);}
.fs-sec{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--primary);padding:12px 4px 4px;}
.fs-cell{padding:7px 6px;font-size:12.5px;color:var(--ink);}
.fs-cell.val{font-family:var(--mono);font-size:11.5px;text-align:right;white-space:nowrap;}
.fs-cell.head{font-size:10.5px;font-weight:800;letter-spacing:.05em;color:var(--primary);border-bottom:1.5px solid var(--primary);padding-bottom:9px;}
.print-only { display:none; }
@media print {
  aside.sidebar, header.topbar, .no-print, .toast { display:none !important; }
  body { background:#fff; }
  .layout, .main-wrap { display:block; }
  main { padding:0; max-width:none; }
  .print-doc { box-shadow:none !important; border:none !important; margin:0; padding:0; }
  .print-only { display:block !important; }
}