@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');
:root{--pri:#3699ff;--pri-d:#187de4;--dark:#1e1e2d;--dark2:#2a2a3c;--side-t:#a2a3b7;--bg:#e9ecf3;--card:#fff;--line:#ebedf3;--txt:#3f4254;--mut:#7e8299;--ok:#1bc5bd;--bad:#f64e60;--warn:#ffa800;--r:6px}
*{box-sizing:border-box}
html,body{margin:0}
body{font:14px/1.5 "Open Sans",-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--txt);background:var(--bg)}
a{color:var(--pri);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:20px;margin:0}h3{font-size:15px;margin:0}h4{margin:14px 0 8px}
input,select,textarea,button{font:inherit;color:inherit}
input:not([type=checkbox]):not([type=radio]),select,textarea{width:100%;padding:7px 10px;border:1px solid #e4e6ef;border-radius:var(--r);background:#fff;min-height:36px}
input:focus,select:focus,textarea:focus{outline:2px solid #c9e2ff;border-color:var(--pri)}
input[readonly],input.ro,input:disabled,select:disabled{background:#f3f6f9;color:var(--mut)}
input.num{text-align:right}
.sel-search{margin-bottom:4px;min-height:30px!important;padding:3px 8px!important;font-size:13px}
[hidden]{display:none!important}
.btn{display:inline-flex;align-items:center;gap:4px;padding:7px 14px;border:1px solid #e4e6ef;border-radius:var(--r);background:#fff;cursor:pointer;white-space:nowrap;color:var(--txt);text-decoration:none!important;min-height:36px}
.btn:hover{background:#f3f6f9}.btn.primary{background:var(--pri);border-color:var(--pri);color:#fff}.btn.primary:hover{background:var(--pri-d)}
.btn.info{background:#8950fc;border-color:#8950fc;color:#fff}.btn.danger{color:var(--bad);border-color:#ffe2e5}.btn.danger:hover{background:#ffe2e5}
.btn.sm{padding:3px 9px;min-height:28px;font-size:13px}.btn.big{padding:12px 22px;font-size:16px}.btn.block{width:100%;justify-content:center}
.btn.link{border:0;background:none;padding:0 4px;min-height:0;color:var(--pri)}.btn.link.danger{color:var(--bad)}
.btn:disabled{opacity:.5;cursor:not-allowed}
form.inline{display:inline}
.grow{flex:1}.muted{color:var(--mut)}.center{text-align:center}.r{text-align:right}.nowrap{white-space:nowrap}.neg{color:var(--bad);font-weight:600}
.badge{display:inline-block;padding:1px 8px;border-radius:10px;background:#eef0f8;font-size:12px}.badge.ok{background:#c9f7f5;color:#0bb7af}.badge.danger{background:#ffe2e5;color:var(--bad)}
.flash{padding:10px 14px;border-radius:var(--r);margin:0 0 14px;background:#c9f7f5;color:#0a8a83}.flash.error{background:#ffe2e5;color:#c4243b}
.err{color:var(--bad);font-size:13px;margin-top:4px}.req{color:var(--bad);margin-left:2px}.info{color:var(--mut);cursor:help}
/* ---------- back-office layout ---------- */
.top{position:sticky;top:0;z-index:20;height:74px;display:flex;align-items:center;gap:14px;padding:0 30px;background:#3b3f51;color:#fff}
.logo{font-size:25px;font-weight:300;color:#fff!important;width:196px;text-decoration:none!important}.logo b{color:#3598dc;font-weight:700;margin-right:2px}
.bell{position:relative;display:flex;align-items:center;gap:6px;color:#a9aec2!important;text-decoration:none!important;margin-right:6px}.bell .icon-bell{font-size:16px;background:none;width:auto;font-weight:300;line-height:1}.bell i:last-child{background:#36c6d3;color:#fff;border-radius:50%;font:600 11px/24px "Open Sans",sans-serif;width:24px;text-align:center}
.usermenu{position:relative}.usermenu summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;font-weight:600;color:#b7bdd6}
.av{width:39px;height:39px;border-radius:50%;background:#fff;color:#ec4a8c;display:flex;align-items:center;justify-content:center;font-weight:700}
.usermenu>div{position:absolute;right:0;top:52px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:6px 4px;box-shadow:0 4px 20px #0001;white-space:nowrap;display:flex;flex-direction:column}.usermenu>div a{padding:6px 16px}
.burger{border:0;background:none;color:#b7bdd6;cursor:pointer;padding:4px}
.wrap{display:flex;align-items:flex-start;gap:20px;padding:21px 20px;min-height:calc(100vh - 74px - 50px)}
.side{width:235px;flex:none;background:#fff;border-radius:4px;padding:0;position:sticky;top:95px;max-height:calc(100vh - 115px);overflow-y:auto}
body.side-open .side{display:none}
.side .nav,.side .grp summary{display:flex;align-items:center;gap:10px;padding:0 15px;height:44px;color:#678098;text-decoration:none!important;cursor:pointer;list-style:none;font-size:14px}
.side .nav:hover,.side .nav.on,.side .grp summary:hover{color:#3598dc;background:#f2f6f9}.side .nav.on .ic,.side .grp[open] .ic{color:#3598dc}
.side .ic{width:22px;font-size:18px;font-weight:300;text-align:center;flex:none;color:#b7c9d6;font-style:normal}
.side .grp summary::after{content:"‹";margin-left:auto;font-size:20px;line-height:1;color:#b7c9d6;transition:transform .15s}.side .grp[open] summary::after{transform:rotate(-90deg)}
.side .grp[open] summary{color:#3598dc}
.side .nav.sub{padding-left:45px;height:38px;font-size:13px}
.foot{padding:12px 20px 18px;color:#678098;font-size:13px}
.stats{display:flex;flex-wrap:wrap;gap:0 30px}.stat{position:relative;width:235px;height:95px;border-radius:4px;margin-bottom:25px;padding:25px 12px 0;color:#fff;text-align:right;overflow:hidden}
.stat.blue{background:#3598dc}.stat.red{background:#e7505a}.stat.teal{background:#36c6d3}
.stat b{display:block;font-size:34px;font-weight:300;line-height:1.25;white-space:nowrap}.stat span{display:block;font-size:15px;font-weight:300;line-height:1.3}
.page-title{font-size:24px;font-weight:300;margin:20px 0 10px}
.lazy .btn{background:#337ab7;border-color:#2e6da4;color:#fff;min-height:34px;margin-bottom:8px}
main{flex:1;min-width:0}
.ph{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 16px}.ph .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.portlet{background:var(--card);border-radius:4px;box-shadow:0 0 20px #523f690d;margin-bottom:18px}
.ptitle{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--line)}
.pbody{padding:18px 20px}
.form-actions{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap}
.fr{display:grid;grid-template-columns:230px 1fr;gap:6px 18px;padding:7px 0;align-items:start}.fr>label{padding-top:8px;font-weight:500}
.fr.has-err input,.fr.has-err select{border-color:var(--bad)}.help{color:var(--mut);display:block;margin-top:3px}
.chk{display:inline-flex;align-items:center;gap:6px;margin-right:16px;padding:6px 0;cursor:pointer}.radios{display:flex;flex-wrap:wrap}
.sec{border-bottom:1px dashed var(--line);padding-bottom:6px;color:var(--pri);margin:18px 0 6px}
.thumb{max-width:140px;max-height:100px;border-radius:4px;border:1px solid var(--line)}.thumb.sm{max-width:56px;max-height:42px}
.tw{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse}.tbl th{text-align:left;font-size:12px;text-transform:uppercase;color:var(--mut);letter-spacing:.3px;padding:10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}.tbl tfoot td{background:#fafbfc}.tbl td.empty{text-align:center;color:var(--mut);padding:24px}
.tbl th a{color:inherit}.acts{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
.dd{position:relative;display:inline-block}.dd summary{list-style:none}.dd>div{position:absolute;right:0;z-index:5;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 4px 20px #0002;padding:8px 12px;display:flex;flex-direction:column;gap:6px;min-width:110px}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.tools input,.tools select{width:auto}
.pager{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap;color:var(--mut)}.pager input{width:70px!important}
.rows .tbl td{padding:5px}.rows .tbl input,.rows .tbl select{min-width:90px}.rows .search{margin-bottom:8px;max-width:300px}
.sku{display:flex;gap:4px;margin-top:4px}.sku input{min-height:30px!important;padding:3px 8px!important}
.rte{border:1px solid #e4e6ef;border-radius:var(--r);overflow:hidden}.rte-bar{display:flex;gap:2px;padding:4px;background:#f3f6f9;border-bottom:1px solid #e4e6ef}
.rte-bar button{border:0;background:none;padding:4px 9px;cursor:pointer;border-radius:4px}.rte-bar button:hover{background:#e4e6ef}.rte-body{min-height:110px;padding:10px;outline:0}
dl.view{display:grid;grid-template-columns:230px 1fr;gap:8px 18px;margin:0 0 12px}dl.view dt{color:var(--mut)}dl.view dd{margin:0}
.filters .grid4{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;align-items:end}.filters label{display:block;font-weight:500}
.filters .types{grid-column:1/-1}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:#fff;border-radius:8px;padding:14px 16px;box-shadow:0 0 20px #523f690d;border-left:4px solid var(--pri)}.kpi small{color:var(--mut);display:block}.kpi b{font-size:19px}.kpi span{display:block;color:var(--mut);font-size:12px}
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}.grp-title{color:var(--mut);font-size:13px;text-transform:uppercase;margin:10px 0 8px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.bars .bar{display:grid;grid-template-columns:110px 1fr 120px;gap:8px;align-items:center;margin:4px 0;font-size:13px}.bars i{display:block;height:12px;background:var(--pri);border-radius:6px;min-width:2px}.bars b{text-align:right}
.cards4{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.choice{background:#fff;border-radius:8px;padding:26px;text-align:center;box-shadow:0 0 20px #523f690d}.choice h3{color:var(--pri);margin-bottom:6px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}.st{padding:14px 20px;color:var(--mut);border-bottom:3px solid transparent}.st small{display:block}
.st.on{color:var(--pri);border-color:var(--pri)}.st.done{color:var(--ok)}
.tabs{display:flex;gap:4px;margin-bottom:14px}.tabs a{padding:8px 16px;border-radius:var(--r) var(--r) 0 0;background:#e4e6ef;color:var(--txt)}.tabs a.on{background:#fff;color:var(--pri);font-weight:600}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}.links{margin:0;padding-left:18px;line-height:2}
.empty-state{text-align:center;padding:40px;color:var(--mut)}
.mobile-warn{display:none;background:var(--warn);color:#fff;padding:6px 12px;text-align:center;font-size:13px}
/* ---------- auth ---------- */
body.auth{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#1e1e2d,#3699ff);padding:20px 0}
.auth-box{background:#fff;padding:34px;border-radius:10px;width:min(400px,92vw);box-shadow:0 10px 40px #0003}.auth-box label{display:block;margin:12px 0;font-weight:500}
.auth-logo{font-size:20px;text-align:center;margin-bottom:14px}.auth-logo b{background:var(--pri);color:#fff;padding:2px 7px;border-radius:4px}.auth-box h2{text-align:center;margin:0 0 10px;font-weight:600}
.auth-box .btn{margin-top:8px}.links{text-align:center}.auth-foot{color:#fff;text-align:center;margin-top:18px;font-size:12px;opacity:.85}
.auth-badge{display:block;margin:16px auto 0;height:44px}.auth-badge img{height:44px}
/* ---------- print / laporan ---------- */
body.print{background:#fff;padding:20px}body.print .tbl{font-size:12px}.meta td{padding:2px 12px 2px 0}
@media print{.noprint,.top,.side,.ctop,.drawer,.tools,.cfoot,.form-actions{display:none!important}main,.cmain{padding:0!important}.portlet{box-shadow:none}body{background:#fff}}
/* ---------- kasir ---------- */
body.cashier{background:#f0f1f5;font-family:Inter,"Segoe UI",-apple-system,Roboto,sans-serif;font-size:14px}
body.cashier .btn{background:#fff;border-radius:3px}body.cashier .btn.primary{background:#1e90ff;border-color:#1e90ff}body.cashier .btn.primary:hover{background:#1a7fe0}
body.cashier .btn.danger{background:#ff4d4f;border-color:#ff4d4f;color:#fff}body.cashier .btn.danger:hover{background:#e63e40}
body.cashier .portlet{border-radius:0;box-shadow:none;margin:0}body.cashier .ptitle{padding:0 24px;height:56px;border-bottom:1px solid #e8e8ee}body.cashier .ptitle h3{font-size:16px;font-weight:600;color:#222}body.cashier .pbody{padding:24px}
.ctop{position:sticky;top:0;z-index:20;height:64px;display:flex;align-items:center;gap:12px;padding:0 30px;background:#fff;color:#222;font-weight:500}
.ctop .outlet{display:none;order:0}.ctop .grow{order:1}.ctop .role{order:0;font-weight:500}.ctop .burger{order:2;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid #d9d9d9;border-radius:2px;background:#fff;color:#000000a6;padding:0;cursor:pointer}
.drawer{position:fixed;inset:0;z-index:30;background:#00000073;display:none}.drawer>div{width:286px;height:100%;background:#fff;overflow:auto;padding:0}
.dlogo{height:66px;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:300;color:#7a8a99;border-bottom:1px solid #eee;padding:15px 0}.dlogo b{color:#29abe2;font-weight:600;margin-right:6px}
body.drawer-open .drawer{display:block}
.drawer a,.drawer summary{display:flex;align-items:center;gap:10px;height:40px;margin:4px 0;padding:0 16px 0 24px;color:#000000a6;cursor:pointer;list-style:none;text-decoration:none!important;font-size:14px}
.drawer a:hover,.drawer summary:hover{color:#1890ff}.drawer a.on{background:#e6f7ff;color:#1890ff;border-right:3px solid #1890ff}
.drawer summary .ai:last-child{margin-left:auto;width:10px;height:10px;transition:transform .2s}.drawer details[open]>summary .ai:last-child{transform:rotate(180deg)}
.drawer details[open]>summary{color:#1890ff}.drawer details a{padding-left:48px}
.cmain{padding:15px;max-width:none;margin:0;min-height:calc(100vh - 64px - 69px)}.cfoot{padding:24px 30px;color:#00000073;font-size:14px}.cfoot a{color:#1890ff}
body.cashier.bare .cmain{padding:0;min-height:0}
.ctitle{font-size:20px;font-weight:600;color:#222;margin:20px 5px 18px}
.cpage .ptitle h3{display:flex;align-items:center;gap:12px;font-size:16px}.cpage .pbody{padding:24px}
@media (min-width:1201px){
  .ctop .outlet{display:block;order:0}.ctop .role{order:2}.ctop .burger{display:none}
  .drawer{display:block;background:none;inset:0 auto 0 0;width:300px;border-right:1px solid #eee;z-index:25;background:#fff}.drawer>div{width:299px}
  body.cashier:not(.bare) .ctop,body.cashier:not(.bare) .cmain,body.cashier:not(.bare) .cfoot{margin-left:300px}
}
@media (max-width:1200px){.cfoot{padding:24px 16px}.ctop{padding:0 16px}}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}@media (max-width:720px){.cgrid{grid-template-columns:1fr}}.cgrid .portlet{margin:0}
.seg{display:inline-flex;margin:0 0 16px}.seg .chk{margin:0;padding:6px 16px;border:1px solid #d9d9e0;background:#fff;cursor:pointer;min-height:32px}.seg .chk:first-child{border-radius:3px 0 0 3px}.seg .chk:last-child{border-radius:0 3px 3px 0;border-left:0}
.seg input{display:none}.seg .chk:has(input:checked){background:#1e90ff;border-color:#1e90ff;color:#fff}
.pbody p{margin:0 0 12px}.pbody .btn{margin:0 3px 4px 0}.big3 p{font-size:14px;color:#555}.big3 b{font-size:32px;font-weight:400;color:#444;margin-right:4px}
.cashmv{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}.cashmv>*{flex:1;min-width:110px}
.form.narrow{max-width:620px;margin:0 auto 18px}.form label{display:block;margin:10px 0;font-weight:500}
.bigbtns{display:flex;gap:16px;justify-content:center;margin:12px 0 22px;flex-wrap:wrap}
.bigbtn{display:flex;flex-direction:column;align-items:center;gap:8px;background:#fff;border-radius:12px;padding:26px 40px;font-size:40px;box-shadow:0 0 20px #523f6914;color:var(--txt)!important;text-decoration:none!important;min-width:220px}
.bigbtn span{font-size:16px;font-weight:600}.bigbtn:hover{outline:2px solid var(--pri)}
.tcard{display:grid;grid-template-columns:2fr 1fr auto;gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:8px;margin:8px 0;background:#fff;color:var(--txt)!important;text-decoration:none!important}
.tlist .tcard{grid-template-columns:2fr 1fr 1fr}
.prefix-wrap{display:flex}.prefix{padding:8px 10px;background:#f3f6f9;border:1px solid #e4e6ef;border-right:0;border-radius:var(--r) 0 0 var(--r)}
/* ---------- layar POS (meniru GD Cashier) ---------- */
body.cashier.bare{background:#fff}
.poshd{height:40px;background:#40b9eb;color:#fff;display:flex;align-items:center;gap:4px;padding:0 15px;position:relative;font-size:14px}
.poshd a,.poshd button{color:#fff!important;background:none;border:0;cursor:pointer;text-decoration:none!important;display:flex;align-items:center;gap:4px;font-size:14px;padding:0;position:relative;z-index:1}
.poshd .pt{position:absolute;left:0;right:0;text-align:center;font-weight:600;pointer-events:none}.poshd .grow{flex:1}.poshd .hbtn{margin-left:18px}
.pos0{display:grid;grid-template-columns:25% 37.5% 37.5%;height:calc(100vh - 40px);overflow:hidden}
.pos0>section{border-right:1px solid #e8e8e8;overflow:auto;min-width:0}.pos0>section:last-child{border-right:0}
.ptt{height:66px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #e8e8e8;position:relative}.ptt h2{margin:0;font-size:20px;font-weight:500;color:#262626;letter-spacing:.2px}
.pttb .pill{position:absolute;right:10px;top:17px;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 16px;border-radius:16px;background:#1890ff;color:#fff;font-size:13px}
.pnewrow a{display:flex;align-items:center;justify-content:center;gap:16px;height:105px;border-bottom:1px solid #e8e8e8;color:#262626!important;font-size:24px;text-decoration:none!important}.pnewrow a:hover{background:#fafafa}
.psearch{position:relative;padding:8px 10px;border-bottom:1px solid #e8e8e8}.psearch input{width:100%;height:32px;min-height:32px;border:1px solid #d9d9d9;border-radius:2px;padding:4px 28px 4px 10px;font-size:13px}.psearch svg{position:absolute;right:20px;top:17px;color:#8c8c8c}
.pempty{text-align:center;padding:50px 0;color:#262626;font-size:12px}.pempty p{margin:6px 0 0}
.pcard{display:flex;gap:12px;align-items:flex-start;padding:12px 10px 12px 14px;border-bottom:1px solid #e8e8e8}.pav{flex:none;width:33px;height:33px;border-radius:50%;background:#c4c4c4;display:flex;align-items:center;justify-content:center;margin-top:12px}
.pbd{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.pbd small{font-size:11px;color:#262626;line-height:1.5}.pbd b{font-size:14px;font-weight:600;color:#262626}.pact{display:flex;gap:8px}
.pbtn{width:26px;height:26px;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;color:#fff!important;cursor:pointer;padding:0}.pbtn.blue{background:#1890ff}.pbtn.red{background:#ff4d4f}
@media (max-width:1200px){
  .pos0{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;height:auto;min-height:calc(100vh - 40px);overflow:visible}.pos0>.pnew{grid-column:1/-1;border-right:0;border-bottom:1px solid #e8e8e8}
  .pnew .ptt{height:72px}.pnewrow{display:flex;justify-content:center;gap:12px;padding:16px 0 24px}.pnewrow a{height:44px;padding:0 20px;border:0;border-radius:2px;box-shadow:0 2px 8px #00000026;font-size:20px;gap:12px}
}
#pos{height:100vh;display:flex;flex-direction:column;color:#262626}
.pmain{flex:1;display:flex;min-height:0}.pcatalog{flex:1;overflow:auto;padding:5px;min-width:0}.pside{width:34%;min-width:360px;max-width:540px;border-left:1px solid #e8e8e8;display:flex;flex-direction:column;min-height:0}
.sbox{position:relative}.sbox input{width:100%;height:32px;min-height:32px;border:1px solid #d9d9d9;border-radius:2px;padding:4px 30px 4px 10px;font-size:13px}.sbox svg{position:absolute;right:10px;top:9px;color:#8c8c8c}
.pgrp{font-size:30px;font-weight:600;margin:22px 7px 4px;text-transform:uppercase}.pcat{font-size:24px;font-weight:600;margin:20px 7px 14px;text-transform:uppercase}.pgrp+.pcat{font-size:18px;margin:12px 7px 14px}
.ptiles{display:flex;flex-wrap:wrap;gap:20px 16px;padding:0 7px;align-items:flex-start}.ptile{width:123px;border:0;background:none;padding:0;cursor:pointer;font:inherit;color:inherit;text-align:center}
.pimg{height:103px;display:flex;align-items:center;justify-content:center;overflow:hidden}.pimg img{max-width:100%;max-height:100%;object-fit:contain}.pimg.ph{background:#32b1e4;color:#fff;font-size:72px;font-weight:200;letter-spacing:-2px}
.plbl{border:1px solid #d9d9d9;font-size:13px;padding:4px 6px;min-height:28px;line-height:1.3;display:flex;align-items:center;justify-content:center}.ptile:hover .plbl{border-color:#1890ff;color:#1890ff}
.pside .sbox{padding:5px 6px 0}.pside .sbox input{border-radius:2px}.pside .sbox.lbl{padding:5px 6px}
.pcust{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid #e8e8e8;cursor:pointer}.pcust .pav{margin:0;width:33px;height:33px}.pcust .nm{flex:1;line-height:1.35}.pcust .nm b{display:block;font-size:14px;font-weight:500}.pcust .nm small{font-size:11px;color:#262626}.pcust .ed{color:#262626}
.plines{flex:1;overflow:auto;padding:14px 14px 0;font-size:13px}.pempty2{font-size:13px}
.pline{display:grid;grid-template-columns:1fr 40px 94px 22px;gap:0 4px;padding-bottom:12px;cursor:pointer}.pline .qty{text-align:center}.pline .amt{text-align:right}.pline .x{color:#ff4d4f;cursor:pointer;background:none;border:0;padding:0;display:flex;align-items:flex-start}
.pline small{grid-column:1/-1;color:#8c8c8c;font-size:11px;line-height:1.5}.pline .bd{display:inline-block;background:#52c41a;color:#fff;border-radius:2px;padding:0 5px;font-size:10px;margin-left:4px}
.ptotal{display:grid;grid-template-columns:1fr 94px 22px;gap:0 4px;border-top:1px solid #e8e8e8;padding:10px 0;font-size:12px;margin-top:2px}.ptotal.sub{border:0;padding:2px 0;font-size:12px;color:#595959}.ptotal b{font-weight:600}.ptotal span:nth-child(2){text-align:right}
.perr{color:#ff4d4f;padding:0 14px 8px;font-size:12px}
.pbar{display:flex;justify-content:center;gap:14px;padding:12px 8px 8px;border-top:1px solid #e8e8e8}.cbtn{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;cursor:pointer;font-size:13px;color:#595959;font:inherit;font-size:13px;padding:0;min-width:52px}
.cbtn i{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:#3db4e6}.cbtn.green i{background:#3aaa35}.cbtn.orange i{background:#f0653c}.cbtn:hover i{filter:brightness(1.07)}
/* layar pembayaran */
.ppay{flex:1;display:grid;grid-template-columns:34% 1fr;min-height:0}.ppay>.pl{border-right:1px solid #e8e8e8;overflow:auto;display:flex;flex-direction:column}.ppay>.pr{display:flex;flex-direction:column;min-height:0}
.ppay .pcust{border-bottom:1px solid #e8e8e8}.ppay .plines{flex:0 0 auto;padding-bottom:6px}.pnotes{padding:10px 14px;font-size:13px}.pnotes small{display:block;color:#595959;margin-top:4px}
.prbody{flex:1;overflow:auto;display:grid;grid-template-columns:1fr minmax(380px,490px);gap:0 24px;padding:20px 20px 0 20px;align-content:start}
.sisa h5{margin:0 0 6px;font-size:13px;font-weight:600}.sisa .big{font-size:32px;font-weight:700;color:#e8734b;margin:0 0 14px;display:flex;align-items:center;gap:8px}.sisa .big.ok{color:#52c41a}
.paylist{display:grid;gap:8px;margin-top:6px}.paycard{display:flex;align-items:center;gap:20px;padding:12px 20px;border:1px solid #e8e8e8;border-radius:2px}.paycard svg{color:#52c41a}.paycard .pn{flex:1}.paycard .pn b{display:block;font-size:14px;font-weight:600}.paycard .pn span{font-size:16px;font-weight:700;color:#8c8c8c}.paycard .rm{color:#e8734b;background:none;border:0;cursor:pointer}
.addpay{border:1px solid #e8e8e8;padding:12px 12px 16px;align-self:start}.addpay h3{margin:0 0 6px;font-size:20px;font-weight:500}.addpay h5{margin:0 0 6px;font-size:13px;font-weight:600}
.mseg{display:flex;flex-wrap:wrap;margin-bottom:12px}.mseg button{height:32px;padding:0 12px;border:1px solid #d9d9d9;margin:0 -1px -1px 0;background:#fff;cursor:pointer;font:inherit;font-size:13px;color:#595959}.mseg button.on{background:#1890ff;border-color:#1890ff;color:#fff}
.addpay .igp{display:flex;margin:0 0 12px}.addpay .igp span{display:flex;align-items:center;padding:0 11px;background:#fafafa;border:1px solid #d9d9d9;border-right:0;color:#595959;font-size:13px}.addpay .igp input{flex:1;height:32px;min-height:32px;border-radius:0 2px 2px 0;border:1px solid #d9d9d9;padding:4px 11px}.addpay input.ref{width:100%;height:32px;min-height:32px;margin-bottom:12px}
.abtn{height:32px;padding:0 15px;border:1px solid #d9d9d9;background:#fff;border-radius:2px;cursor:pointer;font:inherit;font-size:14px;color:#262626}.abtn.primary{background:#1890ff;border-color:#1890ff;color:#fff}.abtn:disabled{background:#f5f5f5;color:#00000040;cursor:not-allowed;border-color:#d9d9d9}
.disc{grid-column:1/-1;margin:14px 0 0;font-size:13px}.disc summary{cursor:pointer;color:#1890ff}.disc .row{display:flex;gap:12px;margin-top:8px}.disc input{height:32px;min-height:32px;width:140px}
/* modal ala Ant */
dialog{border:0;border-radius:2px;padding:0;width:min(520px,96vw);max-height:92vh;box-shadow:0 3px 6px -4px #0000001f,0 6px 16px #00000014,0 9px 28px 8px #0000000d;color:#262626}dialog::backdrop{background:#00000073}
dialog.wide{width:min(720px,96vw)}
.mh{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid #f0f0f0;font-size:16px;font-weight:500}.mh button{border:0;background:none;font-size:22px;line-height:1;color:#00000073;cursor:pointer}
.mb{padding:24px;max-height:68vh;overflow:auto;font-size:14px}.mf{display:flex;justify-content:flex-end;gap:8px;padding:10px 16px;border-top:1px solid #f0f0f0}
.mb h5{margin:0 0 8px;font-size:14px;font-weight:600}.mb .err{color:#ff4d4f;font-size:13px;margin-top:8px}.mb textarea,.mb input.t,.mb select.t{width:100%;border:1px solid #d9d9d9;border-radius:2px;padding:4px 11px;font:inherit;min-height:32px}.mb textarea{resize:vertical}
.stepper{display:flex;align-items:center;justify-content:center;gap:56px;padding-bottom:20px;border-bottom:1px solid #f0f0f0;margin-bottom:20px}.stepper button{border:0;background:none;color:#40b9eb;cursor:pointer;padding:0;display:flex}.stepper input{width:100px;height:40px;text-align:center;border:1px solid #d9d9d9;border-radius:2px;font-size:16px}
.mb .fl{margin-bottom:16px}.mb .fl>b{display:block;margin-bottom:6px}.mb .muted{color:#595959}
.wlist{margin:0 0 8px;color:#262626}.wlist .hp{color:#ff4d4f;font-size:11px;cursor:pointer;margin-left:6px;border:0;background:none}
.mlist{display:grid;gap:6px;max-height:300px;overflow:auto}.mitem{text-align:left;padding:10px 12px;border:1px solid #e8e8e8;border-radius:2px;background:#fff;cursor:pointer;font:inherit}.mitem:hover{border-color:#1890ff}.mitem:disabled{opacity:.5;cursor:not-allowed}
.sg{display:flex;margin-bottom:12px;flex-wrap:wrap}.sg label{border:1px solid #d9d9d9;margin-right:-1px;padding:0 14px;height:32px;display:flex;align-items:center;cursor:pointer;font-size:14px;color:#595959}.sg input{display:none}.sg label:has(input:checked){background:#1890ff;border-color:#1890ff;color:#fff}
.cdata{border-top:1px solid #f0f0f0;margin-top:16px;padding-top:14px}.cdata h5{margin-bottom:6px}.cdata .muted{color:#595959}
.igrp{display:flex}.igrp span{display:flex;align-items:center;padding:0 11px;background:#fafafa;border:1px solid #d9d9d9;border-right:0;color:#595959}.igrp input{flex:1;height:32px;min-height:32px;border:1px solid #d9d9d9;padding:4px 11px;border-radius:0}.igrp button{border-radius:0 2px 2px 0}
.rframe{width:100%;height:340px;border:1px solid #e8e8e8}
body.tablet .ptile{width:150px}body.tablet .pimg{height:125px}
/* struk thermal */
.receipt-body{background:#fff;margin:0}.receipt{width:300px;margin:0 auto;font:12px/1.35 ui-monospace,Consolas,'Courier New',monospace;padding:12px;color:#000}.receipt .rtitle{font-size:20px;font-weight:700;text-align:center;margin-bottom:4px}.receipt .ri{display:flex;gap:4px;margin-top:6px}.receipt .rn{flex:1}.receipt .rq{width:34px;text-align:right}.receipt .ra{width:92px;text-align:right}.receipt .rs{font-size:10.5px}.receipt hr{border:0;border-top:1px dashed #000}
.receipt .rl{padding:0}.compact .receipt{width:58mm;font-size:10.5px}@media print{.receipt{width:auto}@page{margin:2mm}}
/* ---------- form ala Ant (kasir) ---------- */
.aform .arow{display:grid;grid-template-columns:33.333% 66.667%;align-items:center;margin-bottom:24px}.aform .arow>label,.arow>label{text-align:right;padding-right:8px;font-weight:400;color:#000000d9;margin:0}
.arow2{display:grid;grid-template-columns:1fr 1fr;gap:24px}.arow2 .aform{padding-right:12px}.adiv{border:0;border-top:1px solid #e8e8e8;margin:12px 0 24px}
.acust h4{margin:8px 0 12px;font-weight:600}.acust p{margin:0;color:#000000a6}
.igroup{display:flex;width:100%}.igroup input{flex:1;min-width:0;height:40px;border-radius:0 2px 2px 0}.iaddon{display:flex;align-items:center;padding:0 11px;background:#fafafa;border:1px solid #d9d9d9;border-right:0;border-radius:2px 0 0 2px;color:#000000a6}
.igroup .btn{height:40px;border-radius:0 2px 2px 0;font-size:16px;padding:0 15px}.igroup input:first-child{border-radius:2px}
.btn.lg{height:40px;font-size:16px;padding:0 15px}.btn.lg.block{width:100%;justify-content:center}
body.cashier .aform .radios .chk{margin-right:24px}
@media (max-width:900px){.arow2{grid-template-columns:1fr}.arow2 .aform{padding:0}}
/* ---------- riwayat transaksi & struk ---------- */
.trx2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}.trxl{max-width:604px}.trxr{position:sticky;top:80px;max-height:calc(100vh - 100px);overflow:auto;padding:0 12px}
.tfilter{display:grid;gap:16px;margin-bottom:16px}.sinput{position:relative;display:block}.sinput input{width:100%;height:32px;min-height:32px;padding:4px 30px 4px 11px;border:1px solid #d9d9d9;border-radius:2px}.sbtn{position:absolute;right:8px;top:4px;border:0;background:none;color:#00000040;font-size:15px;cursor:pointer}
.tcard2{display:flex;flex-direction:column;gap:5px;padding:20px;margin-bottom:8px;border:1px solid #e8e8e8;background:#fff;color:#000000a6;text-decoration:none!important;border-radius:2px}.tcard2 b{color:#000000d9;font-weight:600}.tcard2:hover,.tcard2.on{background:#e5e5e5}
.vtag{color:#fff;background:#ff4d4f;border-radius:2px;font-size:11px;padding:0 5px;font-weight:400}.nodata{text-align:center;color:#00000040;padding:60px 0}
.rframe2{display:block;width:330px;height:480px;margin:0 auto 12px;border:1px solid #e8e8e8;background:#fff}.share{width:355px;margin:24px auto 0;display:grid;gap:12px}.share .igroup input{height:32px;border-radius:2px 0 0 2px}.share .igroup .btn{height:32px;font-size:14px;border-radius:0 2px 2px 0}
.voidf{width:355px;margin:24px auto;display:grid;gap:8px}.voidf h4{margin:0}
@media (max-width:1200px){.trx2{grid-template-columns:1fr}.trxl{max-width:none}.trxr{position:static;max-height:none}}
/* ---------- laporan / tabel / bantuan (kasir) ---------- */
.albl{font-weight:600;margin:0 0 12px;color:#000000d9}.cpage form>p:not(.albl){margin:24px 0 0}.vradios{display:grid;gap:8px;margin:0 0 24px}.vradios label{display:flex;align-items:center;gap:8px;cursor:pointer}
.range{display:inline-flex;align-items:center;height:32px;border:1px solid #d9d9d9;border-radius:2px;padding:0 8px;margin-bottom:24px;background:#fff}.range input{border:0!important;outline:0;width:130px;min-height:0;padding:0 4px;text-align:center;background:none}.range>span{color:#00000040}
.antbl th{background:#fafafa;font-weight:500;font-size:14px;color:#000000d9;text-transform:none;letter-spacing:0;padding:16px;border-bottom:1px solid #e8e8e8}.antbl td{padding:16px;border-bottom:1px solid #e8e8e8;vertical-align:middle}.antbl tbody tr:hover td{background:#e6f7ff}
.antbl .th{display:inline-flex;align-items:center;gap:6px}.antbl .srt,.antbl .fs{font-style:normal;color:#bfbfbf;font-size:12px;cursor:pointer}.antbl .fs{font-size:14px;margin-left:8px}.antbl .fin{display:block;margin-top:6px;font-size:13px;min-height:28px;font-weight:400}
.ahelp details{border-bottom:1px solid #d9d9d9;background:#fafafa}.ahelp summary{padding:12px 16px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;color:#000000d9}.ahelp summary i{font-style:normal;transition:transform .2s;font-size:16px}.ahelp details[open] summary i{transform:rotate(90deg)}
.ahelp details>div{padding:16px 40px;background:#fff;border-top:1px solid #d9d9d9;color:#000000a6}
.cashmv2{display:flex;gap:8px;flex-wrap:wrap;max-width:720px}.cashmv2 input,.cashmv2 select{width:auto;flex:1;min-width:140px;height:32px;min-height:32px}
.cpage .kpis{margin-bottom:16px}
/* ---------- responsif ---------- */
@media (max-width:900px){
  .side{position:fixed;left:-260px;top:74px;z-index:40;transition:left .2s;max-height:calc(100vh - 74px)}body.side-open .side{display:block;left:0}.wrap{padding:14px}.logo{width:auto}.stat{width:100%}.fr,dl.view{grid-template-columns:1fr}.fr>label{padding-top:0}.cols2{grid-template-columns:1fr}
  .mobile-warn{display:block}.pos-body{grid-template-columns:1fr;grid-template-rows:1fr auto}.cart{max-height:55vh}
  .steps{grid-template-columns:repeat(2,1fr)}.tcard,.tlist .tcard{grid-template-columns:1fr}
}
.toast{position:fixed;top:56px;left:50%;transform:translateX(-50%);background:#fff;padding:10px 16px;border-radius:2px;box-shadow:0 3px 6px -4px #0000001f,0 6px 16px #00000014;z-index:100;font-size:14px;color:#262626}
.bd{display:inline-block;background:#52c41a;color:#fff;border-radius:2px;padding:0 5px;font-size:10px;margin-left:4px}
/* input group: kotak menyatu (addon + input + tombol) */
body.cashier .igroup{align-items:stretch}
body.cashier .igroup input{border:1px solid #d9d9d9;border-radius:0;height:40px;min-height:40px;margin:0;width:auto;flex:1}
body.cashier .igroup .iaddon+input{border-radius:0}
body.cashier .igroup>input:first-child{border-radius:2px 0 0 2px}
body.cashier .igroup>input:last-child{border-radius:0 2px 2px 0}
body.cashier .igroup .btn{margin:0!important;height:40px;border-radius:0 2px 2px 0}
body.cashier .share .igroup input,body.cashier .share .igroup .btn{height:32px;min-height:32px}
body.cashier .igroup input:focus{outline:0;border-color:#1890ff;position:relative;z-index:1}

/* rentang tanggal: satu kotak, teks tanggal + ikon kalender di kanan */
body.cashier .range{display:inline-flex;align-items:center;gap:0;height:32px;width:294px;padding:0 11px;border:1px solid #d9d9d9;border-radius:2px;background:#fff;position:relative;margin-bottom:24px}
.range .rd{position:relative;flex:1;text-align:center;height:100%;display:flex;align-items:center;justify-content:center;color:#000000a6;cursor:pointer}
.range .rd b{font-weight:400;pointer-events:none}.range .rd input{position:absolute;inset:0;width:100%!important;height:100%;min-height:0!important;opacity:0;border:0;padding:0;cursor:pointer}
.range .rs{color:#00000040;padding:0 4px}.range .rc{color:#00000040;margin-left:6px;flex:none}
.range:hover{border-color:#40a9ff}
@media (min-width:1201px){.aform.half{width:50%}}