/* Lash Bounty ERP v1.1.0 — style aplikasi */
html,body{margin:0}
/* Layout: petty-cash ledger app. Branch staff see a one-form phone app; admin sees summary tiles, branch table, then the journal. */
:root{
  --bg:#F3F6F4; --surface:#FFFFFF; --sunk:#EBF0ED; --ink:#14201B; --muted:#5B6A62; --line:#D9E1DC;
  --accent:#0D6654; --accent-ink:#FFFFFF; --accent-soft:#DFEFEA;
  --good:#1D7744; --good-soft:#E2F3E8; --warn:#9A5B00; --warn-soft:#FFF1D9; --crit:#B42318; --crit-soft:#FCE9E7;
  --f-ui:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-num:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r:10px;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4; --s6:#008300; --s7:#6250d6; --s8:#e34948;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E1412; --surface:#151D1A; --sunk:#1B2521; --ink:#E6EEEA; --muted:#93A39B; --line:#283430;
  --accent:#4FC2A5; --accent-ink:#06231C; --accent-soft:#16352D;
  --good:#5FCB8C; --good-soft:#163024; --warn:#F0B44C; --warn-soft:#352812; --crit:#FF8B7F; --crit-soft:#3A1D1A; --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#0E1412; --surface:#151D1A; --sunk:#1B2521; --ink:#E6EEEA; --muted:#93A39B; --line:#283430;
  --accent:#4FC2A5; --accent-ink:#06231C; --accent-soft:#16352D;
  --good:#5FCB8C; --good-soft:#163024; --warn:#F0B44C; --warn-soft:#352812; --crit:#FF8B7F; --crit-soft:#3A1D1A; --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767; color-scheme:dark }

*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:15px;line-height:1.5;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));padding-block:0 48px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:10;background:var(--bg)}
.wrap{max-width:1080px;margin:0 auto}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
h1,h2,h3{margin:0;text-wrap:balance}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top, 0px);z-index:5;background:var(--bg);padding-block:16px 12px;border-bottom:1px solid var(--line);margin-bottom:20px}
.top-row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.brand{display:flex;flex-direction:column;gap:2px;min-width:0}
.brand h1{font-size:19px;font-weight:800;letter-spacing:-.02em}
.brand small{color:var(--muted);font-size:12.5px}
.month{display:flex;align-items:center;gap:8px}
.month label{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
select,input[type=text],input[type=date],input[type=password],input[type=time]{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 11px;min-width:0;width:100%;font-size:16px}
.month select{width:auto;font-weight:700}
.tabs{display:flex;gap:4px;margin-top:14px;background:var(--sunk);padding:4px;border-radius:999px;width:max-content;max-width:100%;overflow-x:auto}
.tabs button{border:0;background:transparent;padding:7px 13px;border-radius:999px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.tabs button[aria-selected=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* generic */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.stack{display:flex;flex-direction:column;gap:16px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sec-h h2{font-size:16px;font-weight:700}
.sec-h .hint{color:var(--muted);font-size:13px}
.btn{border:1px solid var(--line);background:var(--surface);padding:9px 14px;border-radius:8px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted);padding:6px 8px}
.btn.danger{color:var(--crit)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.empty{color:var(--muted);text-align:center;padding:28px 12px;font-size:14px}
.note{font-size:13px;color:var(--muted)}
.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:999px}
.tag.contoh{background:var(--sunk);color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--good-soft);color:var(--good)}
.pill.no{background:var(--crit-soft);color:var(--crit)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom, 0px));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;font-weight:600;font-size:14px;z-index:20;max-width:calc(100% - 32px)}

/* input: single column, form only */
#view-input{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
form .fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
form .full{grid-column:1/-1}
@media (max-width:460px){form .fields{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label{font-size:12.5px;font-weight:600;color:var(--muted)}
.rp{position:relative}
.rp span{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:600;font-size:14px;pointer-events:none}
.rp input{padding-left:36px;font-family:var(--f-num)}
.scan{border:1px dashed var(--accent);background:var(--accent-soft);border-radius:var(--r);padding:12px 14px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}
.scan p{margin:0;font-size:13.5px}
.scan strong{display:block;font-size:14px}
.scan.off label.btn{opacity:.5;pointer-events:none}
.scan .scan-off{display:block;margin-top:4px;color:var(--warn);font-size:12.5px}
.form-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.ok-box{display:flex;gap:12px;align-items:center;background:var(--good-soft);color:var(--good);border-radius:var(--r);padding:12px 14px}
.ok-box b{display:block;color:var(--ink);font-size:15px}
.ok-box span:not(.ok-ic){font-size:13px;color:var(--muted)}
.ok-ic{width:30px;height:30px;border-radius:50%;background:var(--good);color:var(--surface);display:grid;place-items:center;font-weight:800;flex:none}

/* jurnal */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:760px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.kpi .l{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.kpi .v{font-size:22px;font-weight:800;letter-spacing:-.02em;overflow-wrap:anywhere}
.kpi .s{font-size:12.5px;color:var(--muted)}
.up{color:var(--crit)} .down{color:var(--good)}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:14px}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
td.r,th.r{text-align:right}
tr.total td{font-weight:800;border-bottom:0;border-top:2px solid var(--ink)}
.bar{height:8px;border-radius:4px;background:var(--sunk);overflow:hidden;min-width:70px}
.bar i{display:block;height:100%;background:var(--accent);border-radius:4px}
.share{display:flex;align-items:center;gap:8px}
.share .num{font-size:12.5px;min-width:44px;text-align:right}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.ai-out{white-space:pre-wrap;font-size:14.5px;line-height:1.6;margin:0;background:var(--sunk);border-radius:8px;padding:14px 16px}
.flag{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--line);align-items:flex-start;flex-wrap:wrap}
.flag:first-child{border-top:0}
.flag .w{flex:1;min-width:160px}
.flag .w b{display:block;font-size:14px;overflow-wrap:anywhere}
.flag .w span{font-size:12.5px;color:var(--muted)}
.jr-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;padding-bottom:12px;margin-bottom:4px;border-bottom:2px solid var(--ink)}
.jr-head .eyebrow{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.jr-head h2{font-size:18px;font-weight:800;letter-spacing:-.01em}
.jr-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.jr td{font-size:13.5px}
.jr td.k{max-width:300px;overflow-wrap:anywhere}
.jr td.no{color:var(--muted);font-size:12.5px}
.jr td.akun{white-space:nowrap}
.jr td.akun small{display:block;color:var(--muted);font-size:11.5px}
.jr tr.day td{background:var(--sunk);font-size:12px;font-weight:700;color:var(--muted);padding:6px 10px;text-transform:uppercase;letter-spacing:.05em}

/* pengaturan */
.cfg-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;margin-bottom:8px}
.links-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.links-row:first-child{border-top:0}
.links-row b{font-size:14px}
.links-row code{grid-column:1;font-family:var(--f-num);font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.links-row .btn{grid-row:1/span 2;grid-column:2}

/* staff mode (link khusus cabang): phone-width app, form only */
.staff-head{display:none}
body.staff .top{display:none}
body.staff .wrap{max-width:480px}
body.staff .staff-head{display:flex;flex-direction:column;gap:2px;position:sticky;top:env(safe-area-inset-top, 0px);z-index:5;background:var(--accent);color:var(--accent-ink);
  margin:0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))) 16px;padding-block:18px 16px;padding-left:max(20px, env(safe-area-inset-left, 0px));padding-right:max(20px, env(safe-area-inset-right, 0px))}
body.staff::before{background:var(--accent)}
.staff-head .eyebrow{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.8}
.staff-head h1{font-size:22px;font-weight:800;letter-spacing:-.02em}
body.staff #view-input .panel > .sec-h h2{display:none}
body.staff #saveBtn{width:100%;justify-content:center;padding:13px}
@media (min-width:520px){body.staff .staff-head{margin-inline:0;border-radius:0 0 var(--r) var(--r)}}

/* phone: tabs become a bottom bar */
@media (max-width:640px){
  .top{padding-block:12px 10px;margin-bottom:14px}
  .brand h1{font-size:17px}
  .tabs{position:fixed;left:0;right:0;bottom:0;margin:0;width:auto;max-width:none;border-radius:0;gap:0;background:var(--surface);border-top:1px solid var(--line);z-index:6;
    padding:6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px))}
  .tabs button{flex:1 0 auto;border-radius:8px;padding:10px 10px;font-size:12.5px}
  .tabs button[aria-selected=true]{background:var(--accent-soft);color:var(--accent);box-shadow:none}
  body:not(.staff){padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px))}
  body:not(.staff) .toast{bottom:calc(80px + env(safe-area-inset-bottom, 0px))}
  .panel{padding:16px}
  #saveBtn{width:100%;justify-content:center;padding:13px}
}
/* stock opname */
.seg{display:flex;gap:4px;background:var(--accent-soft);padding:3px;border-radius:999px;margin-top:12px;width:max-content;max-width:100%}
.seg button{border:0;background:transparent;color:var(--accent);padding:6px 14px;border-radius:999px;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
.seg button[aria-pressed=true]{background:var(--surface);color:var(--ink)}
.op-wrap{max-width:560px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:14px}
.op-top{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:6px}
@media (max-width:460px){.op-top{grid-template-columns:1fr}}
.op-row{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.op-row:first-of-type{border-top:0}
.op-row b{display:block;font-size:14.5px;overflow-wrap:anywhere}
.op-row small{color:var(--muted);font-size:12px}
.op-row .qty{display:flex;align-items:center;gap:6px}
.op-row .qty input{text-align:right;font-family:var(--f-num)}
.op-row .qty span{font-size:12px;color:var(--muted);min-width:34px}
.op-row.two{grid-template-columns:minmax(0,1fr) 76px 76px}
.op-head{display:grid;grid-template-columns:minmax(0,1fr) 76px 76px;gap:10px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:2px 0 6px}
.op-head span{text-align:right}
.op-row.miss input{border-color:var(--crit);background:var(--crit-soft)}
.op-prog{font-size:12.5px;color:var(--muted)}
textarea{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 11px;width:100%;font-size:16px;resize:vertical;min-height:64px}
#opSave{width:100%;justify-content:center;padding:13px}
.stk th.c{text-align:right}
.stk th.c small{display:block;font-weight:500;text-transform:none;letter-spacing:0;font-size:11px}
.stk td.q{font-family:var(--f-num);text-align:right;white-space:nowrap}
.stk td.q small{display:block;font-size:11.5px;color:var(--muted)}
.stk td.q.low b{color:var(--crit)}
.stk td.q.na{color:var(--muted)}
.drop{display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;border:1.5px dashed var(--line);border-radius:var(--r);padding:20px 14px;text-align:center;cursor:pointer;margin:6px 0 12px}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop span{font-size:12.5px;color:var(--muted)}
.zprev{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:6px}
.zprev table td,.zprev table th{padding:7px 10px;font-size:13px}
.zcheck{font-size:12.5px;padding:8px 10px;background:var(--sunk)}
.zcheck.okc{color:var(--good)} .zcheck.bad{color:var(--warn)}
.top-row-i{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:8px 0;border-top:1px solid var(--line)}
.top-row-i:first-child{border-top:0}
.top-row-i b{font-size:14px;overflow-wrap:anywhere}
.top-row-i .num{font-size:13px}
.top-row-i .bar{grid-column:1/-1;height:6px}
.pr td{padding:6px}
.pr th{padding:8px 6px}
.pr input,.pr select{padding:7px 8px;font-size:14px;width:auto}
.pr input.n{text-align:right;font-family:var(--f-num);width:112px}
.pr input.t{width:150px}
.pr td.thp{font-family:var(--f-num);text-align:right;font-weight:700;white-space:nowrap}
.chk{display:flex!important;flex-direction:row!important;gap:10px;align-items:center;font-size:14px!important;color:var(--ink)!important;font-weight:600;cursor:pointer;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.chk input{width:18px;height:18px;accent-color:var(--accent);margin:0}
.rin-head,.rin-row{display:grid;grid-template-columns:minmax(0,1fr) 54px 118px 34px;gap:6px;align-items:center}
.rin-head{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.rin-row{margin-bottom:6px}
.rin-row input{padding:8px 9px}
.rin-row .rp input{padding-left:32px}
.rin-row .btn{padding:6px}
.jr td.k small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.daily{display:block;min-width:560px;width:100%;height:auto}
.daily text{fill:var(--muted);font-size:10.5px;font-family:var(--f-num)}
.daily .grid{stroke:var(--line);stroke-width:1}
.daily rect:hover{opacity:.8}
.stack100{display:flex;height:22px;border-radius:6px;overflow:hidden;gap:2px;margin:8px 0 12px}
.stack100 span{display:block;height:100%}
.exp-row{display:grid;grid-template-columns:12px minmax(0,1fr) auto 52px;gap:10px;align-items:center;padding:7px 0;font-size:14px;border-top:1px solid var(--line)}
.exp-row i{width:10px;height:10px;border-radius:3px;display:inline-block}
.exp-row .note{text-align:right}
.alert{display:flex;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.alert:first-child{border-top:0}
body.staff .admin-only{display:none!important}
body:not(.staff) .staff-only{display:none!important}
/* jurnal pengeluaran per cabang */
tr.sub td{background:var(--sunk);font-weight:700;font-size:13px}
form .fields.fields-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){form .fields.fields-3{grid-template-columns:1fr 1fr}}
@media (max-width:460px){form .fields.fields-3{grid-template-columns:1fr}}
.kat{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--sunk);color:var(--ink);white-space:nowrap}
.kat.pc{background:var(--accent-soft);color:var(--accent)}
.kat.pr{background:var(--warn-soft);color:var(--warn)}
/* dashboard omzet per tanggal */
.dt td,.dt th{padding:7px 9px}
.dt th.gh{text-align:center;border-bottom:1px solid var(--line)}
.dt th.gh i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:0}
.dt .sg{background:var(--sunk);font-weight:700}
.dt tr.nodata td{color:var(--muted)}
.dt td small{font-size:11px}
/* payroll */
.pr input.d{text-align:right;font-family:var(--f-num);width:52px}
.pr input.t.s{width:120px}
.slip-wrap{overflow-x:auto;padding:4px}
.slip{--sl-ink:#14201B;--sl-mut:#5B6A62;--sl-line:#D9E1DC;--sl-acc:#0D6654;background:#FFFFFF;color:var(--sl-ink);width:420px;max-width:100%;margin:0 auto;border:1px solid var(--sl-line);border-radius:12px;padding:20px 22px;font-size:14px;line-height:1.45}
.slip .num{font-family:var(--f-num)}
.sl-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding-bottom:12px;border-bottom:2px solid var(--sl-acc)}
.sl-head b{display:block;font-size:17px;font-weight:800;color:var(--sl-acc)}
.sl-head span{font-size:12.5px;color:var(--sl-mut)}
.sl-per{font-size:12px!important;text-align:right;white-space:nowrap}
.sl-id{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px 0;border-bottom:1px solid var(--sl-line)}
.sl-id span,.sl-abs span{display:block;font-size:11px;color:var(--sl-mut);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.sl-id b{font-size:13.5px;overflow-wrap:anywhere}
.sl-abs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:10px 0;border-bottom:1px solid var(--sl-line);text-align:center}
.sl-abs b{font-family:var(--f-num);font-size:15px}
.sl-sec{padding:10px 0;border-bottom:1px solid var(--sl-line)}
.sl-sec h4{margin:0 0 6px;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--sl-mut)}
.sl-row{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:13.5px}
.sl-total{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#DFEFEA;color:var(--sl-acc);border-radius:8px;padding:10px 12px;margin:12px 0 2px;font-weight:700}
.sl-total b{font-size:18px;color:var(--sl-ink)}
.sl-com{background:#F3F6F4;border-radius:8px;padding:8px 10px;margin-top:6px}
.sl-com b{font-size:12.5px;color:var(--sl-acc)}
.sl-com p{margin:2px 0 0;font-size:13.5px;white-space:pre-wrap}
.sl-foot{font-size:11px;color:var(--sl-mut);padding-top:10px;text-align:center}
/* KPI */
.kpi-t td,.kpi-t th{padding:7px 8px;font-size:13.5px}
.kpi-t th.c,.kpi-t td.c{text-align:center}
.kpi-t td.c input{width:20px;height:20px;accent-color:var(--accent);margin:0;cursor:pointer}
.kpi-t td.kf{background:var(--sunk);vertical-align:top;min-width:120px}
.kpi-t input.kt{min-width:160px;padding:6px 8px;font-size:13.5px}
.kpi-t input.kn{max-width:160px;padding:6px 8px;font-family:var(--f-num)}
.kpi-t small.warn-t{display:block;color:var(--warn);font-size:11.5px}
.kpi-sum{background:var(--sunk);border-radius:var(--r);padding:12px 14px}
.ks-row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:14px}
.ks-row.total{border-top:2px solid var(--ink);margin-top:6px;padding-top:8px;font-size:15px}
.kk-row{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:6px;margin-bottom:6px}
.kk-row select,.kk-row input{padding:7px 9px;font-size:14px}
.kpi-com{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
@media (max-width:860px){.kpi-com{grid-template-columns:1fr}}
.kpi-com input.kpi-nm{padding:7px 9px;font-size:14px}
.cfg-row.g{grid-template-columns:minmax(0,1fr) 150px auto}
/* v12: periode, tab, HRD, absensi, aset, import, tutup buku, compare */
.month{flex-wrap:wrap}
.month select#spanSel{width:auto;font-weight:600}
.per-note{margin:8px 0 0;color:var(--warn)}
.btn.wa{background:#1f9d55;border-color:#1f9d55;color:#fff;text-decoration:none}
.btn.wa:hover{filter:brightness(1.05)}
.seg-h,.seg-p{flex-wrap:wrap;border-radius:12px}
.seg-h button,.seg-p button{border-radius:9px}
.ok-box{flex-wrap:wrap}
td.c,th.c{text-align:center}
table.ab{width:max-content;min-width:100%}
.ab td,.ab th{padding:4px 2px;text-align:center}
.ab td.r,.ab th.r{padding:4px 7px;text-align:right}
.ab th small{display:block;font-weight:500;font-size:10px;letter-spacing:0}
.ab th.sun{color:var(--crit)}
.ab .ab-n{text-align:left;padding:6px 10px 6px 0;white-space:nowrap;position:sticky;left:0;background:var(--surface);z-index:1}
.ab .ab-n small{display:block;color:var(--muted);font-size:11.5px}
.abc{width:26px;height:26px;border-radius:6px;border:1px solid transparent;font:700 12px/1 var(--f-num);cursor:pointer;background:var(--sunk);color:var(--muted);padding:0}
.abc:hover{border-color:var(--accent)}
.abc.sel{outline:2px solid var(--accent);outline-offset:1px}
.abc.kor{box-shadow:inset 0 -3px 0 var(--s7)}
.ab-H{background:var(--good-soft)!important;color:var(--good)!important}
.ab-T{background:var(--warn-soft)!important;color:var(--warn)!important}
.ab-I,.ab-C{background:var(--accent-soft)!important;color:var(--accent)!important}
.ab-S{background:#e7e4fb!important;color:#5143b8!important}
.ab-A{background:var(--crit-soft)!important;color:var(--crit)!important}
.ab-L{background:var(--sunk)!important;color:var(--muted)!important}
.ab-0{background:transparent!important;border:1px dashed var(--line)!important}
.ab-f{background:transparent!important;cursor:default}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ab-S{background:#272150!important;color:#b3aaf2!important}}
:root[data-theme="dark"] .ab-S{background:#272150!important;color:#b3aaf2!important}
.ab-row{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line)}
.ab-row:first-child{border-top:0}
.ab-row b{display:block;font-size:15.5px}
.ab-row small{color:var(--muted);font-size:12.5px}
.ab-row .btn{min-width:96px;justify-content:center;padding:11px 14px}
.ab-clock{font-size:20px;font-weight:700}
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:flex-end;justify-content:center;z-index:30;padding:16px}
.sheet[hidden]{display:none!important}
.sheet-in{background:var(--surface);border-radius:14px;padding:18px;width:100%;max-width:440px;display:flex;flex-direction:column;gap:4px;margin-bottom:env(safe-area-inset-bottom,0px)}
.sheet-in b{font-size:18px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-weight:600;font-size:13px;cursor:pointer;color:var(--muted)}
.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.dt tr.minor td{font-size:12.5px;color:var(--muted)}
.ind{padding-left:14px;display:inline-block}
.pl td{padding:7px 10px}
.steps{margin:0 0 14px;padding-left:20px;font-size:14px;display:flex;flex-direction:column;gap:4px}
.im-g td,.im-g th{padding:6px 10px;font-size:13px}
.im-g{margin-bottom:12px}
tr.im-bad td{background:var(--crit-soft)}
.cfg-f input,.cfg-f select{font-size:15px}
.fields.cfg-f{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:760px){.fields.cfg-f{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.fields.cfg-f{grid-template-columns:1fr}}
@media (max-width:640px){.tabs button{flex:0 0 auto}}
/* v13: navigasi 3 tingkat */
.month{max-width:100%}.month select#monthSel{max-width:100%;min-width:0}
.nav2,.nav3{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.nav2[hidden],.nav3[hidden]{display:none}
.nav2 button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 14px;font-weight:700;font-size:13.5px;color:var(--muted);cursor:pointer;white-space:nowrap}
.nav2 button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.nav3{margin-top:-4px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:16px}
.nav3 button{border:0;background:transparent;border-bottom:2px solid transparent;padding:6px 4px;margin-right:12px;font-weight:600;font-size:13.5px;color:var(--muted);cursor:pointer;white-space:nowrap}
.nav3 button[aria-pressed=true]{color:var(--accent);border-bottom-color:var(--accent)}
.nbadge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--crit);color:#fff;font-size:11px;font-weight:800;margin-left:4px;vertical-align:1px}
body.staff .nav2,body.staff .nav3,body.staff #userChip{display:none!important}
@media (max-width:640px){.nav2{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}.nav3{flex-wrap:nowrap;overflow-x:auto}}
/* user chip & login */
.userchip{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 12px 4px 4px;cursor:pointer;margin-left:auto}
.userchip img{width:28px;height:28px;border-radius:50%;background:var(--sunk)}
.userchip span{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.userchip b{font-size:13px}.userchip small{font-size:11px;color:var(--muted)}
.login{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:16px}
.login[hidden]{display:none!important}
body.locked{overflow:hidden}
.login-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:14px;box-shadow:0 10px 40px rgba(0,0,0,.08)}
.login-brand{display:flex;gap:12px;align-items:center}
.login-brand .logo{width:44px;height:44px;border-radius:12px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:800;letter-spacing:.02em}
.login-brand b{display:block;font-size:19px}.login-brand small{color:var(--muted);font-size:13px}
.login-me{display:flex;gap:10px;align-items:center;background:var(--sunk);border-radius:10px;padding:10px}
.login-me img{width:36px;height:36px;border-radius:50%}
.login-me b{display:block;font-size:14px}.login-me small{color:var(--muted);font-size:12.5px}
#lgGo{justify-content:center;padding:13px}
/* mode lihat saja */
body.ro form :is(input,select,textarea,button),body.ro .btn.danger,body.ro #prTable input,body.ro #prTable select,body.ro .pr-act{pointer-events:none;opacity:.55}
body.ro main-ro-note{display:block}
/* role matrix */
.rl-m td,.rl-m th{padding:6px 8px}
.rl-m select{width:auto;padding:5px 8px;font-size:13px;font-weight:600}
.rl-m select.lv0{color:var(--muted)}.rl-m select.lv1{color:var(--warn)}.rl-m select.lv2{color:var(--good)}
/* klasifikasi HPP */
.seg2{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg2 button{border:0;background:var(--surface);padding:5px 10px;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer}
.seg2 button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}
/* kertas laporan (selalu putih, siap PDF) */
.paper-wrap{overflow-x:auto;padding:4px 0}
.paper{width:794px;margin:0 auto;background:#fff;color:#14201B;border:1px solid #D9E1DC;border-radius:6px;padding:40px 44px;font-size:12.5px;line-height:1.45;font-family:var(--f-ui)}
.paper .note{color:#5B6A62}
.rp-h{text-align:center;margin-bottom:16px}
.rp-h b{display:block;font-size:18px;font-weight:800}
.rp-h span{display:block;font-size:13px;font-weight:600}
.rp-h small{color:#5B6A62;font-size:11.5px}
.rp-h2{font-size:13.5px;font-weight:800;margin:22px 0 8px;padding-bottom:4px;border-bottom:2px solid #0D6654;color:#0D6654}
.rp-t{width:100%;border-collapse:collapse;font-size:12.5px}
.rp-t td,.rp-t th{padding:4px 8px;border-bottom:1px solid #EEF2EF;color:#14201B}
.rp-t th{font-size:10.5px;color:#5B6A62;border-bottom:1px solid #D9E1DC}
.rp-t th small{display:block;font-weight:500;text-transform:none;letter-spacing:0}
.rp-t td.r,.rp-t th.r{text-align:right;font-family:var(--f-num);white-space:nowrap}
.rp-t td.n{color:#5B6A62;font-size:11.5px;width:120px}
.rp-t .ind{padding-left:16px;display:inline-block}
.rp-t tr.rp-sec td{background:#0D6654;color:#fff;font-weight:800;padding:6px 8px}
.rp-t tr.rp-sub td{font-weight:800;padding-top:10px;border-bottom:1px solid #D9E1DC}
.rp-t tr.rp-tot td{font-weight:700;background:#F3F6F4}
.rp-t tr.rp-tot2 td{font-weight:800;border-top:1.5px solid #14201B;background:#F3F6F4}
.rp-t tr.rp-big td{font-weight:800;background:#DFEFEA}
.rp-t tr.rp-net td{font-weight:800;font-size:14px;border-top:2px solid #14201B;border-bottom:3px double #14201B;background:#DFEFEA}
.rp-t tr.rp-net.neg td{background:#FCE9E7;color:#B42318}
.rp-t tr.rp-gap td{border:0;height:8px}
.rp-g td.r{width:120px}
.rp-x td.r{width:110px}
.rp-foot{margin-top:22px;padding-top:8px;border-top:1px solid #D9E1DC;font-size:10.5px;color:#5B6A62;text-align:center}
.rp-cover{border:1px solid #D9E1DC;border-radius:8px;padding:22px;margin-bottom:6px;background:#F3F6F4}
.rp-cover .rp-k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#0D6654;font-weight:800}
.rp-cover b{display:block;font-size:24px;font-weight:800;margin:2px 0}
.rp-cover>span{display:block;color:#5B6A62}
.rp-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.rp-meta div{background:#fff;border:1px solid #D9E1DC;border-radius:6px;padding:8px 10px}
.rp-meta small{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#5B6A62}
.rp-meta b{font-size:13px;margin:0}.rp-meta span{font-size:10.5px;color:#5B6A62}
.rp-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rp-kpis div{border:1px solid #D9E1DC;border-radius:6px;padding:10px}
.rp-kpis small{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#5B6A62}
.rp-kpis b{display:block;font-size:16px;font-family:var(--f-num)}
.rp-kpis span{font-size:10.5px;color:#5B6A62}
.rp-ul{margin:10px 0 0;padding-left:18px}.rp-ul li{margin:3px 0}
.up-g{color:#1D7744}.dn-r{color:#B42318}
.rp-note{margin:8px 0}.rp-note b{font-size:12.5px}.rp-note p{margin:2px 0 0;color:#2c3a33}
.rp-sign{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.rp-sign div{text-align:center}.rp-sign small{display:block;color:#5B6A62;font-size:11px}
.rp-sign span{display:block;height:56px;border-bottom:1px solid #14201B;margin:6px 10px}
.rp-sign b{font-size:12px}
/* Ask Me */
.ask-wrap{max-width:760px;margin:0 auto;width:100%}
.ask-log{display:flex;flex-direction:column;gap:10px;min-height:240px;max-height:58vh;overflow-y:auto;padding:4px 2px}
.ask-empty{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;text-align:center;padding:50px 10px;color:var(--muted)}
.ask-empty b{color:var(--ink);font-size:16px}
.msg{display:flex}.msg.user{justify-content:flex-end}
.bub{max-width:85%;padding:10px 13px;border-radius:14px;white-space:pre-wrap;font-size:14.5px;line-height:1.55;overflow-wrap:anywhere}
.msg.user .bub{background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:4px}
.msg.assistant .bub{background:var(--sunk);border-bottom-left-radius:4px}
.ask-form{display:flex;gap:8px;margin-top:12px;align-items:flex-end}
.ask-form textarea{flex:1;min-height:46px}
/* v14: login, tutup buku bertahap, stempel */
.staff-user{align-self:flex-start;margin-top:6px;border:1px solid rgba(255,255,255,.35);background:transparent;color:inherit;border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:600;cursor:pointer}
.tb-steps{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;counter-reset:st}
.tb-steps li{border:1px solid var(--line);border-radius:10px;padding:10px 12px;counter-increment:st;position:relative;padding-left:44px;color:var(--muted)}
.tb-steps li::before{content:counter(st);position:absolute;left:12px;top:11px;width:22px;height:22px;border-radius:50%;background:var(--sunk);display:grid;place-items:center;font-weight:800;font-size:12px;color:var(--muted)}
.tb-steps li b{display:block;color:var(--ink);font-size:14px}.tb-steps li span{font-size:12px}
.tb-steps li.done{border-color:var(--good);background:var(--good-soft)}.tb-steps li.done::before{content:"✓";background:var(--good);color:#fff}
.tb-steps li.now{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.tb-steps li.now::before{background:var(--accent);color:var(--accent-ink)}
@media (max-width:640px){.tb-steps{grid-template-columns:1fr}}
.tb-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:8px}
.tb-sum div{background:var(--sunk);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.tb-sum small{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.tb-sum b{font-size:18px}.tb-sum span{font-size:12px;color:var(--muted)}
@media (max-width:640px){.tb-sum{grid-template-columns:1fr}}
.tb-prev{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.warn-t{color:var(--warn);font-size:13px}
.paper{position:relative}
.rp-stamp{position:absolute;top:18px;right:22px;border:2px solid #9A5B00;color:#9A5B00;font-weight:800;letter-spacing:.12em;font-size:12px;padding:3px 10px;border-radius:6px;transform:rotate(4deg);background:#FFF8EC}
.login-card form .chk{font-size:13.5px!important}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
/* v15: tutup buku detail, revisi, banking, ask boss, customer */
h3{font-size:15px;margin:0}
.tb-todo{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.todo{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:8px;background:var(--surface)}
.todo-h{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.todo-h b{flex:1;min-width:180px;font-size:14px}
.todo ul{margin:6px 0 0;padding-left:20px;font-size:13.5px;color:var(--muted)}.todo li{margin:2px 0;overflow-wrap:anywhere}
.tb-tot{padding:9px 0;font-weight:800;font-size:16px}
.rp-place{margin-top:26px;font-size:12.5px}
.rp-sign2{display:flex;gap:48px;flex-wrap:wrap;margin-top:10px}.rp-sign2 div{min-width:170px}.rp-sign2 small{display:block;color:#5B6A62;font-size:11px}
.rp-sign2 span{display:block;height:56px;border-bottom:1px solid #14201B;margin:6px 0}.rp-sign2 b{font-size:12px}
.bk-bad td{background:var(--crit-soft)}
.chk.sm{padding:6px 10px!important;font-size:13px!important}
.rk-card{border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:10px}
.rk-cabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.by-grid td,.by-grid th{white-space:nowrap}
.by-grid input.by-in{width:112px;text-align:right;padding:6px 8px}
.by-grid input.saved{border-color:var(--good);background:var(--good-soft)}
tr.muted td{opacity:.45}
.ab-t{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;background:var(--surface)}.ab-t.done{opacity:.75}
.ab-h{display:flex;gap:10px;justify-content:space-between;align-items:flex-start}.ab-h small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.ab-prev{margin:8px 0;color:var(--muted);font-size:14px;overflow-wrap:anywhere}
.ab-msgs{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.ab-msgs .bub small{display:block;font-size:11px;opacity:.75;margin-bottom:2px}
.msg.flip.user{justify-content:flex-start}.msg.flip.assistant{justify-content:flex-end}
.msg.flip.user .bub{background:var(--sunk);color:var(--ink);border-radius:14px;border-bottom-left-radius:4px}
.msg.flip.assistant .bub{background:var(--accent);color:var(--accent-ink);border-radius:14px;border-bottom-right-radius:4px}
.ab-reply{display:flex;gap:8px;align-items:flex-end}.ab-reply textarea{flex:1;min-height:46px}
.ab-act{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.cu-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0}.cu-tools input{flex:1;min-width:200px}.cu-tools select{width:auto}
.cu-row{cursor:pointer}.cu-row:hover td{background:var(--sunk)}
.cu-tag{background:var(--accent-soft);color:var(--accent)}.cu-tag.warnt{background:var(--warn-soft);color:var(--warn)}
.stars{color:#B7791F;letter-spacing:1px;white-space:nowrap}
.rate{display:flex;gap:2px}.rate button{border:0;background:none;font-size:26px;line-height:1;color:var(--line);cursor:pointer;padding:2px}.rate button[aria-pressed=true]{color:#D69E2E}
.sheet-card{background:var(--surface);border-radius:14px;padding:18px;width:100%;max-width:760px;max-height:88vh;overflow:auto;align-self:center}
@media (max-width:640px){.ab-reply{flex-direction:column;align-items:stretch}.by-grid input.by-in{width:96px}}
#bkSum td small,#bkTable td small,#muList td small,#bsTable td small,#dBank td small,#kcList td small,#byGrid td small,#ctList td small{display:block;font-size:11.5px;color:var(--muted);font-family:var(--f-ui)}
.cu-row a{color:var(--accent);text-decoration:none;font-weight:600;white-space:nowrap}
.by-imp{margin:0 0 12px;border:1px solid var(--line);border-radius:10px;padding:10px 12px}.by-imp summary{cursor:pointer;font-weight:700;font-size:14px}


/* ===================== v1.1 ===================== */
.brand h1{display:flex;align-items:center;gap:9px}
.brand-logo{width:30px;height:30px;border-radius:8px;object-fit:contain;flex:none}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;flex:none}
.iconbtn:hover{border-color:var(--accent)}
.iconbtn svg{width:18px;height:18px}
#themeBtn .i-sun,#themeBtn .i-moon,#themeBtn .i-auto{display:none}
#themeBtn[data-t=light] .i-sun,#themeBtn[data-t=dark] .i-moon,#themeBtn[data-t=auto] .i-auto,#themeBtn:not([data-t]) .i-auto{display:block}
.top-row .userchip{margin-left:0}
.top-row .brand{margin-right:auto}
/* tabel v1.1: keterangan kecil di bawah isi sel */
#aiProp td small,#rfList td small,#rwTable td small,#teOps td small,#mtList td small,#msList td small,#tsList td small,#kbTable td small,#kbHist td small,#igTg td small,#igLog td small,#tsMatrix td small,#asKasbon td small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.warn-t{color:var(--warn)}
.file-pills{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 6px}
.file-pill{background:var(--sunk);color:var(--ink);font-weight:600}
.file-pill::before{display:none}
.file-pill button{border:0;background:none;color:var(--muted);cursor:pointer;font-size:12px;padding:0 0 0 4px}
.ai-log,.te-log{min-height:200px;max-height:46vh;border:1px solid var(--line);border-radius:var(--r);padding:10px;background:var(--bg)}
.te-log{min-height:160px;max-height:36vh}
.bub{white-space:pre-wrap}
.tb-lock{background:var(--warn-soft);color:var(--warn);padding:10px 12px;border-radius:8px;margin:10px 0 0}
.te-t input{min-width:90px}
.te-t .te-v{text-align:right;width:120px}
.rw-act{white-space:nowrap}
.rw-act .btn{padding:5px 9px}
.rwp-list{display:flex;flex-direction:column;gap:6px;margin:8px 0}
/* tanda tangan & logo di laporan */
.rp-logo{text-align:center;margin:-10px 0 8px}
.rp-logo img{height:46px;max-width:220px;object-fit:contain}
.rp-ttd{justify-content:space-between;gap:24px}
.rp-ttd>div{flex:1;min-width:150px;max-width:240px;text-align:center;display:flex;flex-direction:column;align-items:center}
.rp-ttd .ttd-img{display:flex!important;align-items:flex-end;justify-content:center;height:70px!important;width:100%;border-bottom:1px solid #14201B;margin:6px 0}
.rp-ttd .ttd-img img{max-height:66px;max-width:100%;object-fit:contain}
.rp-ttd em{font-style:normal;font-size:11px;color:#5B6A62}
.rp-ttd i{font-style:normal;font-size:10.5px;color:#5B6A62}
.rp-ttd small{font-size:11.5px;color:#5B6A62}
.ba-3>div{max-width:200px}
.ba-p{margin:12px 0;text-align:justify}
.ba-kv td:first-child{width:170px;color:#5B6A62}
.pdf-host{position:fixed;left:-10000px;top:0;width:820px;pointer-events:none}
#rpTtd{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
/* permintaan barang */
.mt-rows{display:flex;flex-direction:column;gap:6px}
.mt-row{display:grid;grid-template-columns:minmax(0,1fr) 96px auto auto;gap:8px;align-items:center}
.mt-row .note{font-size:12px;min-width:40px}
#mpItems .mt-row{grid-template-columns:minmax(0,1fr) 96px}
/* grafik pemakaian: batang horizontal */
.hbars{display:flex;flex-direction:column;gap:4px}
.hbar{display:grid;grid-template-columns:minmax(90px,38%) 1fr auto;gap:10px;align-items:center;border:0;background:none;padding:5px 6px;border-radius:8px;cursor:pointer;text-align:left;color:var(--ink);font:inherit;font-size:13px}
.hbar:hover,.hbar.on{background:var(--sunk)}
.hb-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-t{height:10px;background:transparent;border-radius:4px;overflow:hidden}
.hb-t i{display:block;height:100%;background:var(--s1);border-radius:0 4px 4px 0;min-width:2px}
.hbar b{font-size:12.5px;font-weight:600;min-width:60px;text-align:right}
.hbar b small{color:var(--muted);font-weight:400}
/* tabungan sewa */
.ts-quick{display:flex;gap:10px;flex-wrap:wrap}
.ts-q{flex:1;min-width:240px;display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.ts-q small{display:block;color:var(--muted);font-size:12px}
.ts-cfgs{display:flex;flex-direction:column;gap:8px}
.ts-cfg{display:grid;grid-template-columns:auto 1fr 150px;gap:8px;align-items:center;font-size:13.5px}
.ts-cfg input[type=text]{text-align:right}
/* dashboard mobile */
.mb-two{align-items:start}
.mb-panel{display:flex;flex-direction:column;align-items:center}
.mb-panel .sec-h{width:100%}
.mb-frame{position:relative;width:340px;max-width:100%;height:690px;border-radius:46px;border:11px solid #121614;background:var(--bg);box-shadow:0 16px 40px rgba(0,0,0,.18);overflow:hidden}
.mb-frame[data-dev=android]{border-radius:30px;border-width:9px}
.mb-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:96px;height:26px;border-radius:20px;background:#121614;z-index:2}
.mb-frame[data-dev=android] .mb-notch{width:12px;height:12px;top:10px}
.mb-screen{height:100%;overflow-y:auto;padding:44px 14px 14px;display:flex;flex-direction:column;gap:10px;font-size:13px}
.mb-top{display:flex;align-items:center;gap:9px}
.mb-top>div{flex:1;min-width:0}
.mb-top b{display:block;font-size:15px}
.mb-top small{color:var(--muted);font-size:11.5px}
.mb-top .brand-logo{width:32px;height:32px}
.mb-ava{width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}
.mb-hero{background:var(--accent);color:var(--accent-ink);border-radius:16px;padding:14px}
.mb-hero small{opacity:.85;font-size:11.5px}
.mb-hero b{display:block;font-size:22px;margin:2px 0}
.mb-hero span{font-size:11.5px;opacity:.85}
.mb-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mb-kpis>div,.mb-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.mb-kpis small{color:var(--muted);font-size:11px;display:block}
.mb-kpis b{font-size:15px}
.mb-h{font-weight:800;font-size:12.5px;margin-bottom:6px}
.mb-bar{display:grid;grid-template-columns:62px 1fr auto;gap:8px;align-items:center;font-size:12px;margin:5px 0}
.mb-bar i{height:8px;border-radius:4px;background:var(--sunk);overflow:hidden}
.mb-bar em{display:block;height:100%;border-radius:4px}
.mb-bar b{font-size:11.5px;font-weight:600}
.mb-al{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;padding:7px 0;border-bottom:1px solid var(--line);text-align:left;font:inherit;font-size:12.5px;color:var(--ink);cursor:pointer}
.mb-al:last-child{border-bottom:0}
.mb-al .pill{font-size:10.5px;padding:2px 7px}
.mb-al i{margin-left:auto;font-style:normal;color:var(--muted)}
.mb-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:auto;position:sticky;bottom:0;background:var(--bg);padding-top:6px}
.mb-nav button{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 2px;font:inherit;font-size:11px;font-weight:700;color:var(--ink);cursor:pointer}
.mb-steps{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.mb-steps ol{margin:6px 0 0;padding-left:18px;font-size:13px;color:var(--muted)}
.mb-steps li{margin:3px 0}
@media (max-width:640px){.mb-frame{border:0;border-radius:0;box-shadow:none;height:auto;width:100%}.mb-notch{display:none}.mb-screen{padding:0}.mb-steps{grid-template-columns:1fr}}
/* integrasi */
.ig-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:12px}
.ig-card{border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:6px}
.ig-card small{font-size:11.5px}
.ig-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ig-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.ig-ev{display:flex;flex-direction:column;gap:6px}
.ig-bk{margin:0;padding-left:18px;font-size:12.5px}
.ig-brand{display:flex;gap:14px;align-items:flex-start}
.ig-brand img{width:84px;height:84px;object-fit:contain;border:1px solid var(--line);border-radius:12px;background:#fff;padding:6px;flex:none}
/* kirim / QR / akun / pengumuman */
.sd-card{max-width:620px}
.sd-tabs{margin:10px 0 12px}
.sd-att{margin:10px 0 6px}
.sheet textarea,.sd-card textarea{width:100%}
.qr-card{max-width:420px;text-align:center}
.qr-box{width:280px;max-width:100%;margin:10px auto;background:#fff;border-radius:12px;padding:6px}
.qr-box svg{width:100%;height:auto;display:block}
.qr-link{display:block;font-size:12px;word-break:break-all;color:var(--muted)}
.ak-pad{display:block;width:100%;height:170px;border:1.5px dashed var(--line);border-radius:var(--r);background:#fff;touch-action:none;cursor:crosshair}
.ak-now{min-height:30px;margin-bottom:8px}
.ak-now img{max-height:80px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px}
.um-pick{display:flex;flex-wrap:wrap;gap:6px 14px;max-height:180px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:8px;margin-top:8px}
.um-ch{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}
.um-item{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.um-item small{display:block;color:var(--muted);font-size:12px}
.um-wa{display:flex;flex-wrap:wrap;gap:6px}
.um-wa a.done{opacity:.55}
.ba-card{max-width:900px}
@media (max-width:640px){.mt-row{grid-template-columns:minmax(0,1fr) 80px auto}.mt-row .note{display:none}.ts-cfg{grid-template-columns:auto 1fr 110px}.hbar{grid-template-columns:minmax(80px,40%) 1fr auto}}
@media print{.iconbtn{display:none}}