/* KiranaMart — tema hijau/merah/kuning, layout padat */
:root{
  --g:#0b7a35; --g2:#13923f; --gd:#064e22; --gl:#e4f4ea; --gx:#f1faf4;
  --r:#e1262c; --rd:#b81a20; --rl:#fde8e9;
  --y:#ffc400; --yd:#e0a800; --yl:#fff6d6;
  --b:#1d6fe0; --bl:#e5effd;
  --bg:#f1f4f2; --card:#fff; --tx:#1b2a21; --mut:#6b7c72; --line:#dfe6e1; --line2:#eef2ef;
  --sbw:196px; --sbm:50px; --top:42px; --fs:13px;
  --sh:0 1px 2px rgba(10,40,20,.06),0 2px 8px rgba(10,40,20,.05);
  --rad:8px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:var(--fs)/1.38 'Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;color:var(--tx);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--g);text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 6px;line-height:1.2} h2{font-size:16px} h3{font-size:14px}
.muted{color:var(--mut)} .small{font-size:11.5px} .right{text-align:right} .center{text-align:center} .nowrap{white-space:nowrap}
.bold{font-weight:700} .mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.ic{vertical-align:-3px;flex:none}
[hidden]{display:none!important}

/* ---------- layout ---------- */
#sb{position:fixed;inset:0 auto 0 0;width:var(--sbw);background:linear-gradient(180deg,#07552a 0%,#0b7a35 55%,#0a6a2f 100%);color:#d9efe0;display:flex;flex-direction:column;z-index:50;transition:width .18s ease;overflow:hidden;box-shadow:2px 0 10px rgba(0,0,0,.12)}
.sb-logo{display:block;background:#fff;padding:5px 8px;height:var(--top);border-bottom:3px solid var(--y);position:relative;flex:none}
.sb-logo img{height:100%;width:100%;object-fit:contain;display:block}
.sb-logo-min{display:none;position:absolute;inset:0;background:#fff;color:var(--g);align-items:center;justify-content:center}
#sb nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:4px 6px 8px;scrollbar-width:thin;scrollbar-color:#2c9a56 transparent}
.sb-grp{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:#8fcba5;padding:9px 8px 3px;white-space:nowrap}
.sb-it{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:6px;color:#e4f6ea;white-space:nowrap;position:relative;font-size:12.5px}
.sb-it:hover{background:rgba(255,255,255,.1);text-decoration:none}
.sb-it.on{background:#fff;color:var(--gd);font-weight:700;box-shadow:inset 3px 0 0 var(--y)}
.sb-it.hot{background:linear-gradient(90deg,var(--r),#f2474d);color:#fff;font-weight:700;margin:2px 0}
.sb-it.hot.on{background:#fff;color:var(--r)}
.sb-it .bdg{margin-left:auto}
.sb-toggle{border:0;border-top:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.14);color:#cdeed8;padding:8px;cursor:pointer;display:flex;gap:8px;align-items:center;font:inherit;font-size:12px;flex:none}
.sb-toggle:hover{background:rgba(0,0,0,.28)}
.sb-toggle .ic{transition:transform .2s}
#main{margin-left:var(--sbw);min-height:calc(var(--vh,1vh)*100);display:flex;flex-direction:column;transition:margin .18s ease}
body.sb-min #sb{width:var(--sbm)} body.sb-min #main{margin-left:var(--sbm)}
body.sb-min .lbl,body.sb-min .sb-grp{display:none} body.sb-min .sb-logo img{display:none} body.sb-min .sb-logo-min{display:flex}
body.sb-min .sb-it{justify-content:center;padding:8px 0} body.sb-min .sb-it .bdg{position:absolute;top:1px;right:3px;margin:0;font-size:9px;min-width:14px;height:14px;line-height:14px}
body.sb-min .sb-toggle{justify-content:center} body.sb-min .sb-toggle .ic{transform:rotate(180deg)}
#top{position:sticky;top:0;z-index:40;height:var(--top);background:#fff;display:flex;align-items:center;gap:6px;padding:0 10px;border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(0,0,0,.02);background-image:linear-gradient(90deg,var(--g) 0 33%,var(--y) 33% 66%,var(--r) 66%);background-size:100% 3px;background-repeat:no-repeat;background-position:0 100%}
.tb-title{font-weight:700;font-size:14px;color:var(--gd)} .tb-sp{flex:1}
.tb-btn{border:0;background:transparent;border-radius:6px;height:30px;min-width:30px;padding:0 6px;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--tx);cursor:pointer;position:relative;font:inherit}
.tb-btn:hover{background:var(--gl)}
.tb-btn.usr{padding:0 8px 0 3px}
.av{width:24px;height:24px;border-radius:50%;background:var(--g);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}
.un{display:flex;flex-direction:column;line-height:1.05;text-align:left} .un small{font-size:10px;color:var(--mut)}
.tb-clock{font-variant-numeric:tabular-nums;color:var(--mut);font-size:12px;padding:0 6px}
.tb-shift{display:flex;align-items:center;gap:5px;font-size:11.5px;padding:3px 9px;border-radius:99px;background:#f0f0f0;color:#777;cursor:pointer}
.tb-shift.on{background:var(--gl);color:var(--gd);font-weight:600}
.tb-bell,.tb-user{position:relative}
.bdg{background:var(--r);color:#fff;border-radius:99px;font-size:10px;min-width:16px;height:16px;line-height:16px;text-align:center;font-weight:700;padding:0 4px;display:inline-block}
.tb-bell .bdg{position:absolute;top:0;right:0}
.tb-bell .bdg.ring{animation:ring 1.4s ease-in-out 3}
@keyframes ring{0%,100%{transform:scale(1)}20%{transform:scale(1.35) rotate(12deg)}40%{transform:scale(1.2) rotate(-12deg)}60%{transform:scale(1.3)}}
.pop{position:absolute;right:0;top:36px;width:360px;max-width:92vw;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18);z-index:80;overflow:hidden;animation:pin .14s ease}
.pop-sm{width:170px;padding:4px} .pop-sm a{display:flex;gap:8px;align-items:center;padding:7px 9px;border-radius:6px;color:var(--tx)} .pop-sm a:hover{background:var(--gl);text-decoration:none}
@keyframes pin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pop-h{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:var(--gx);border-bottom:1px solid var(--line);font-weight:700}
.pop-b{max-height:calc(var(--vh,1vh)*60);overflow:auto}
.nt{display:flex;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line2);cursor:pointer;position:relative}
.nt:hover{background:var(--gx)} .nt.unread{background:#f7fcf9} .nt.unread:before{content:'';position:absolute;left:3px;top:14px;width:5px;height:5px;border-radius:50%;background:var(--r)}
.nt .ni{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none}
.nt.danger .ni{background:var(--rl);color:var(--r)} .nt.warning .ni{background:var(--yl);color:#a67c00} .nt.info .ni{background:var(--bl);color:var(--b)} .nt.success .ni{background:var(--gl);color:var(--g)}
.nt b{display:block;font-size:12.5px} .nt span{font-size:11.5px;color:var(--mut)}
#content{padding:10px;flex:1;min-width:0}
body.fs-kasir #content{padding:6px}

/* ---------- komponen ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);box-shadow:var(--sh);margin-bottom:10px}
.card-h{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--line2);font-weight:700;flex-wrap:wrap}
.card-h .sp{flex:1}
.card-b{padding:10px} .card-b.tight{padding:0}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .row.nw{flex-wrap:nowrap}
.sp{flex:1}
.grid{display:grid;gap:10px} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} .g5{grid-template-columns:repeat(5,minmax(0,1fr))} .g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.g-21{grid-template-columns:2fr 1fr} .g-12{grid-template-columns:1fr 2fr} .g-32{grid-template-columns:3fr 2fr}
@media(max-width:1100px){.g4,.g5,.g6{grid-template-columns:repeat(2,minmax(0,1fr))}.g3,.g-21,.g-12,.g-32{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.g2,.g3,.g-21,.g-12,.g-32{grid-template-columns:1fr}}
.kpi{padding:9px 11px;border-radius:var(--rad);background:#fff;border:1px solid var(--line);box-shadow:var(--sh);position:relative;overflow:hidden}
.kpi:before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--g)}
.kpi.red:before{background:var(--r)} .kpi.yel:before{background:var(--y)} .kpi.blue:before{background:var(--b)}
.kpi .l{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;display:flex;gap:5px;align-items:center}
.kpi .v{font-size:19px;font-weight:800;margin-top:1px;font-variant-numeric:tabular-nums} .kpi .s{font-size:11.5px;color:var(--mut)}
.kpi .up{color:var(--g)} .kpi .dn{color:var(--r)}
.empty{text-align:center;padding:30px 10px;color:var(--mut)}
.alert{padding:8px 10px;border-radius:6px;margin-bottom:8px;font-size:12.5px}
.alert.danger{background:var(--rl);color:var(--rd)} .alert.warn{background:var(--yl);color:#7a5c00} .alert.info{background:var(--bl);color:#134a9c} .alert.ok{background:var(--gl);color:var(--gd)}

/* tabel padat */
.tbl-wrap{overflow:auto;max-width:100%}
table.tbl{width:100%;border-collapse:collapse;font-size:12.3px}
.tbl th{position:sticky;top:0;background:#f4f8f5;color:#37523f;text-align:left;font-weight:700;padding:5px 8px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;z-index:1}
.tbl td{padding:4px 8px;border-bottom:1px solid var(--line2);vertical-align:middle}
.tbl tbody tr:hover{background:var(--gx)}
.tbl tr.sel{background:var(--yl)}
.tbl td.r,.tbl th.r{text-align:right} .tbl td.c,.tbl th.c{text-align:center}
.tbl tfoot td{font-weight:700;background:#f4f8f5;border-top:2px solid var(--line)}
.tbl .act{white-space:nowrap;text-align:right}
.link,[data-qv]{color:var(--g);cursor:pointer;border-bottom:1px dotted #7fc298} .link:hover,[data-qv]:hover{color:var(--r);text-decoration:none;border-bottom-color:var(--r)}
.b{display:inline-block;padding:1px 7px;border-radius:99px;font-size:11px;font-weight:700;line-height:1.5}
.b-g{background:var(--gl);color:var(--gd)} .b-r{background:var(--rl);color:var(--rd)} .b-y{background:var(--yl);color:#7a5c00} .b-b{background:var(--bl);color:#134a9c} .b-x{background:#eceff1;color:#555}

/* form */
input,select,textarea,button{font:inherit}
input[type=text],input[type=number],input[type=date],input[type=time],input[type=password],input[type=search],input[type=tel],input[type=email],input[type=datetime-local],select,textarea{height:28px;padding:2px 8px;border:1px solid #cbd6cf;border-radius:6px;background:#fff;color:var(--tx);min-width:0;max-width:100%}
textarea{height:auto;padding:5px 8px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid #9bd7b0;border-color:var(--g)}
input[type=checkbox]{width:15px;height:15px;accent-color:var(--g)}
.fld{display:flex;flex-direction:column;gap:2px;font-size:11.5px;color:var(--mut);font-weight:600} .fld input,.fld select,.fld textarea{font-weight:400;color:var(--tx);width:100%}
.fld .req{color:var(--r)}
.form-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.form-g .full{grid-column:1/-1}
@media(max-width:600px){.form-g{grid-template-columns:1fr}}
.btn{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border-radius:6px;border:1px solid #c4d1c9;background:#fff;color:var(--tx);cursor:pointer;font-weight:600;font-size:12.5px;white-space:nowrap;transition:.12s}
.btn:hover{background:var(--gl);border-color:var(--g);text-decoration:none}
.btn.pri{background:var(--g);border-color:var(--g);color:#fff} .btn.pri:hover{background:var(--gd)}
.btn.red{background:var(--r);border-color:var(--r);color:#fff} .btn.red:hover{background:var(--rd)}
.btn.yel{background:var(--y);border-color:var(--y);color:#3d2f00} .btn.yel:hover{background:var(--yd)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--mut)} .btn.ghost:hover{background:var(--gl);color:var(--g)}
.btn.xs{height:22px;padding:0 7px;font-size:11.5px} .btn.sm{height:25px;padding:0 9px} .btn.lg{height:36px;font-size:14px;padding:0 16px}
.btn.icon{padding:0;width:26px;justify-content:center} .btn.xs.icon{width:22px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.seg{display:inline-flex;border:1px solid #c4d1c9;border-radius:6px;overflow:hidden} .seg button{border:0;background:#fff;padding:0 10px;height:26px;cursor:pointer;font-weight:600;color:var(--mut)} .seg button.on{background:var(--g);color:#fff}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:8px;flex-wrap:wrap}
.tabs a,.tabs button{border:0;background:transparent;padding:6px 12px;border-radius:6px 6px 0 0;cursor:pointer;color:var(--mut);font-weight:600;font-size:12.5px;border-bottom:2px solid transparent;text-decoration:none}
.tabs a:hover,.tabs button:hover{color:var(--g);background:var(--gx)} .tabs .on{color:var(--g);border-bottom-color:var(--g);background:var(--gx)}
.toolbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.toolbar .search{position:relative} .toolbar .search input{padding-left:26px;width:230px} .toolbar .search .ic{position:absolute;left:7px;top:6px;color:var(--mut)}
.pager{display:flex;gap:4px;align-items:center;justify-content:flex-end;padding:6px 8px;font-size:12px;color:var(--mut);flex-wrap:wrap}
.pager button{min-width:26px;height:24px;border:1px solid var(--line);background:#fff;border-radius:5px;cursor:pointer} .pager button.on{background:var(--g);color:#fff;border-color:var(--g)} .pager button:disabled{opacity:.4}

/* modal */
#modalRoot .mb{position:fixed;inset:0;background:rgba(10,30,18,.5);display:flex;align-items:flex-start;justify-content:center;padding:calc(var(--vh,1vh)*4) 10px;z-index:200;overflow:auto;animation:fade .15s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border-radius:12px;width:520px;max-width:100%;box-shadow:0 20px 60px rgba(0,0,0,.35);animation:pop .18s ease;overflow:hidden}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal.w-sm{width:380px} .modal.w-lg{width:820px} .modal.w-xl{width:1100px}
.mh{display:flex;align-items:center;gap:8px;padding:9px 12px;background:linear-gradient(90deg,var(--gd),var(--g));color:#fff;font-weight:700;font-size:14px}
.mh .sp{flex:1} .mh button{background:rgba(255,255,255,.18);border:0;color:#fff;border-radius:6px;width:24px;height:24px;cursor:pointer}
.mbd{padding:12px;max-height:calc(var(--vh,1vh)*74);overflow:auto} .mf{padding:8px 12px;border-top:1px solid var(--line);display:flex;gap:6px;justify-content:flex-end;background:#f7faf8}
/* toast */
#toasts{position:fixed;top:12px;right:12px;z-index:400;display:flex;flex-direction:column;gap:8px;width:330px;max-width:calc(100vw - 24px)}
.toast{background:#fff;border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.22);padding:9px 12px 9px 10px;display:flex;gap:9px;border-left:5px solid var(--g);animation:tin .25s cubic-bezier(.2,.9,.3,1.2);position:relative;overflow:hidden;cursor:pointer}
.toast.out{animation:tout .22s forwards}
@keyframes tin{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}} @keyframes tout{to{opacity:0;transform:translateX(60px)}}
.toast .ti{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--gl);color:var(--g)}
.toast.err{border-color:var(--r)} .toast.err .ti{background:var(--rl);color:var(--r)} .toast.warn{border-color:var(--y)} .toast.warn .ti{background:var(--yl);color:#a67c00} .toast.info{border-color:var(--b)} .toast.info .ti{background:var(--bl);color:var(--b)}
.toast b{display:block;font-size:12.8px} .toast span{font-size:12px;color:#555}
.toast i{position:absolute;left:0;bottom:0;height:3px;background:currentColor;opacity:.35;animation:tbar linear forwards;color:var(--g)} .toast.err i{color:var(--r)} .toast.warn i{color:var(--y)}
@keyframes tbar{from{width:100%}to{width:0}}
/* drawer */
.drawer{position:fixed;inset:0;z-index:150} .dr-back{position:absolute;inset:0;background:rgba(10,30,18,.35);animation:fade .15s}
.dr-panel{position:absolute;right:0;top:0;bottom:0;width:560px;max-width:100vw;background:#fff;box-shadow:-8px 0 30px rgba(0,0,0,.25);display:flex;flex-direction:column;animation:dslide .2s ease}
@keyframes dslide{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}
.dr-head{display:flex;align-items:center;gap:8px;padding:8px 10px;background:linear-gradient(90deg,var(--gd),var(--g));color:#fff} .dr-head b{flex:1;font-size:14px} .dr-head .btn{background:rgba(255,255,255,.16);color:#fff;border-color:transparent}
.dr-body{padding:10px;overflow:auto;flex:1}
.kv{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:12.5px} .kv dt{color:var(--mut)} .kv dd{margin:0;font-weight:600;text-align:right}
.stat-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px} .stat{flex:1;min-width:90px;background:var(--gx);border:1px solid var(--line);border-radius:8px;padding:6px 9px} .stat small{display:block;color:var(--mut);font-size:10.5px;text-transform:uppercase} .stat b{font-size:15px}
.chartbox{position:relative;height:230px} .chartbox.sm{height:180px}
.autocomplete{position:absolute;z-index:60;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 26px rgba(0,0,0,.2);max-height:340px;overflow:auto;min-width:380px}
.ac-it{display:flex;gap:8px;padding:5px 9px;cursor:pointer;border-bottom:1px solid var(--line2);align-items:center} .ac-it.on,.ac-it:hover{background:var(--gl)} .ac-it .n{flex:1;font-weight:600} .ac-it small{color:var(--mut)}
mark{background:var(--yl);padding:0 1px;border-radius:2px}
.loading{padding:20px;text-align:center;color:var(--mut)} .spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--g);border-radius:50%;animation:rot .7s linear infinite;vertical-align:-2px} @keyframes rot{to{transform:rotate(360deg)}}

/* ---------- kasir ---------- */
.pos{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:8px;height:calc(calc(var(--vh,1vh)*100) - var(--top) - 14px);min-height:520px}
.pos-l{display:flex;flex-direction:column;min-height:0;gap:6px} .pos-r{display:flex;flex-direction:column;gap:6px;min-height:0;overflow:auto}
.pos-search{position:relative;display:flex;gap:6px}
.pos-search input{flex:1;height:38px;font-size:15px;border:2px solid var(--g);border-radius:8px;padding-left:12px}
.pos-cart{flex:1;min-height:0;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:8px}
.pos-cart table{width:100%;border-collapse:collapse;font-size:13px}
.pos-cart th{position:sticky;top:0;background:#f4f8f5;padding:5px 6px;text-align:left;font-size:11px;text-transform:uppercase;color:#37523f;z-index:1}
.pos-cart td{padding:3px 6px;border-bottom:1px solid var(--line2)}
.pos-cart input.q{width:62px;text-align:center;font-weight:700} .pos-cart input.hg{width:84px;text-align:right}
.pos-cart tr.flash{animation:flash .6s} @keyframes flash{from{background:var(--yl)}to{background:transparent}}
.pos-tot{background:linear-gradient(135deg,var(--gd),var(--g));color:#fff;border-radius:10px;padding:10px 12px}
.pos-tot .gt{font-size:30px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums;line-height:1.1}
.pos-tot .rw{display:flex;justify-content:space-between;font-size:12.5px;opacity:.92}
.pos-pay{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px}
.pos-pay input.big{height:38px;font-size:19px;font-weight:700;text-align:right;width:100%}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:4px} .quick button{height:26px;border:1px solid var(--line);background:var(--gx);border-radius:6px;cursor:pointer;font-weight:600;font-size:12px} .quick button:hover{background:var(--yl)}
.kembali{font-size:20px;font-weight:800;text-align:right;color:var(--g)} .kembali.neg{color:var(--r)}
.fkeys{display:flex;gap:4px;flex-wrap:wrap;font-size:11px;color:var(--mut)} .fkeys kbd{background:#fff;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 5px;font-size:10.5px}
@media(max-width:900px){.pos{grid-template-columns:minmax(0,1fr);height:auto}.pos-cart{max-height:calc(var(--vh,1vh)*50)}}

/* ---------- login ---------- */
.login-body{background:radial-gradient(circle at 15% 20%,#e0f5e8,transparent 40%),radial-gradient(circle at 85% 80%,#fff2c4,transparent 40%),var(--bg);min-height:calc(var(--vh,1vh)*100);display:grid;place-items:center}
.login-wrap{width:100%;padding:16px;display:grid;place-items:center}
.login-card{display:grid;grid-template-columns:1.05fr 1fr;width:880px;max-width:100%;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 20px 60px rgba(8,60,28,.22)}
.login-hero{background:linear-gradient(160deg,#fff 0%,#f3fbf6 55%,#e5f6ec 100%);padding:28px 24px;display:flex;flex-direction:column;justify-content:center;gap:12px;border-right:4px solid var(--y)}
.login-hero img{width:100%;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.12)} .login-hero p{margin:0;color:#35563f;font-size:14px} .login-hero ul{margin:0;padding-left:18px;color:#35563f;line-height:1.8}
.login-form{padding:34px 30px;display:flex;flex-direction:column;gap:12px;justify-content:center} .login-form h1{font-size:26px;color:var(--gd);margin:0}
.login-form label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:12.5px;color:var(--mut)}
.login-form input{height:40px;font-size:15px;border-radius:8px} .login-form .pw{display:flex;gap:4px} .login-form .pw input{flex:1} .login-form .pw button{border:1px solid #cbd6cf;background:#fff;border-radius:8px;width:40px;cursor:pointer}
.login-form .btn.lg{justify-content:center;height:42px}
@media(max-width:720px){.login-card{grid-template-columns:1fr}.login-hero{border-right:0;border-bottom:4px solid var(--y)}.login-hero ul{display:none}}

/* ---------- absensi HP ---------- */
.ab-body{background:linear-gradient(180deg,#e4f4ea,#f1f4f2 40%);min-height:calc(var(--vh,1vh)*100)}
.ab{max-width:480px;margin:0 auto;padding:10px 12px 40px}
.ab img.lg{width:100%;border-radius:10px;margin-bottom:8px;box-shadow:var(--sh)}
.ab .cam{position:relative;background:#111;border-radius:12px;overflow:hidden;aspect-ratio:4/5;max-height:calc(var(--vh,1vh)*58);display:grid;place-items:center}
.ab .cam video,.ab .cam img,.ab .cam canvas{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)} .ab .cam img{transform:none}
.ab .names{max-height:210px;overflow:auto;border:1px solid var(--line);border-radius:10px;background:#fff}
.ab .nm{padding:9px 12px;border-bottom:1px solid var(--line2);display:flex;gap:8px;align-items:center;cursor:pointer;font-size:14px}
.ab .nm.on{background:var(--gl);font-weight:700;box-shadow:inset 4px 0 0 var(--g)} .ab .nm.auto:after{content:'perangkat dikenali';margin-left:auto;font-size:10.5px;color:var(--g);background:#fff;border:1px solid var(--g);border-radius:99px;padding:0 6px}
.ab .st{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0} .ab .st span{font-size:12px;padding:3px 9px;border-radius:99px;background:#fff;border:1px solid var(--line)}
.ab .st .ok{background:var(--gl);border-color:var(--g);color:var(--gd)} .ab .st .no{background:var(--rl);border-color:var(--r);color:var(--rd)}

/* ---------- mobile ---------- */
.only-m{display:none}
@media(max-width:860px){
  #sb{transform:translateX(-100%);width:var(--sbw)!important} body.sb-open #sb{transform:none}
  #main,body.sb-min #main{margin-left:0} .only-m{display:flex} .tb-clock,.un{display:none} .tb-shift span{display:none}
  body.sb-min .lbl,body.sb-min .sb-grp{display:initial}
}
@media print{#sb,#top,#toasts,.noprint,.toolbar,.pager{display:none!important} #main{margin:0} #content{padding:0} body{background:#fff}.card{box-shadow:none;border-color:#999}}
.tbl tr.tot td{font-weight:800;background:var(--gx);position:sticky;bottom:0}.tbl .dn{color:var(--r)}.tbl .up{color:var(--g)}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chips button{border:1px solid var(--line);background:#fff;border-radius:99px;padding:6px 12px;font-size:13px;cursor:pointer}.chips button.on{background:var(--g);color:#fff;border-color:var(--g)}
/* ikon mata password */
.pw-wrap{position:relative;display:block;width:100%} .pw-wrap input{width:100%;padding-right:34px!important}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--mut);cursor:pointer;padding:4px 6px;border-radius:6px;display:grid;place-items:center} .pw-eye:hover{color:var(--g);background:var(--gx)}
.lock-banner{display:flex;gap:8px;align-items:center;background:var(--rl);border:1px solid var(--r);color:var(--rd);padding:6px 12px;border-radius:8px;margin-bottom:8px;font-weight:600}

.go{cursor:pointer}.kpi.go{transition:transform .12s,box-shadow .12s}.kpi.go:hover,.kpi.go:focus-visible{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.12);outline:0}
.card-h.go:hover{color:var(--g);text-decoration:underline}.alert.go:hover{filter:brightness(.97)}
.chips .chip{border:1px solid var(--line);background:#fff;border-radius:99px;padding:6px 12px;font-size:13px;cursor:pointer;color:inherit;margin-bottom:8px}.chips .chip:hover{background:#f1f5f9;text-decoration:none}


/* ================= v5: tampilan responsif (komputer / tablet / HP) & ukuran layout ================= */
.only-d{display:inline-flex}
.tb-zoom{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:7px;overflow:hidden;margin:0 2px}
.tb-zoom .tb-btn{height:26px;min-width:30px;border-radius:0;padding:0 6px;font-weight:700;font-size:13px;gap:0;align-items:baseline;line-height:1} .tb-zoom .tb-btn small{font-size:12px;margin-left:1px;line-height:1}
.tb-zoom .tb-btn+.tb-btn{border-left:1px solid var(--line)}
.zrow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;font-size:12px;color:var(--mut);border-bottom:1px solid var(--line2);margin-bottom:2px}
.zctl{display:inline-flex;align-items:center;gap:4px} .zctl button{border:1px solid var(--line);background:#fff;border-radius:6px;min-width:32px;height:28px;font-weight:700;cursor:pointer;color:var(--tx)} .zctl button:hover{background:var(--gl)} .zctl b{min-width:42px;text-align:center;color:var(--tx);cursor:pointer}
.pop-sm{width:210px}
#exitBar{position:fixed;left:0;right:0;bottom:0;z-index:300;background:var(--r);color:#fff;padding:8px 14px;text-align:center;font-size:13px;box-shadow:0 -4px 14px rgba(0,0,0,.25)}
#exitBar[hidden]{display:none}
.tbl-wrap{-webkit-overflow-scrolling:touch}
.card-b.row{flex-wrap:wrap}
img,canvas,video{max-width:100%}

/* layar lebar: isi tidak terlalu melebar */
@media(min-width:1700px){#content{max-width:1900px}}

/* tablet (861-1100px): menu samping ringkas, grid 2 kolom */
@media(min-width:861px) and (max-width:1100px){
  .toolbar .search input{width:190px}
  .lap-wrap{grid-template-columns:150px 1fr}
}
/* tablet & HP: layar sentuh */
@media(max-width:1100px) and (pointer:coarse),(max-width:860px){
  :root{--top:48px}
  .btn{height:34px;padding:0 13px;font-size:13px} .btn.sm{height:32px} .btn.xs{height:30px;padding:0 10px;font-size:12.5px} .btn.icon{width:34px} .btn.xs.icon{width:30px} .btn.lg{height:44px}
  input[type=text],input[type=number],input[type=date],input[type=time],input[type=password],input[type=search],input[type=tel],input[type=email],input[type=datetime-local],select{height:36px;font-size:15px}
  input[type=checkbox]{width:19px;height:19px}
  .tb-btn{height:36px;min-width:36px}
  .sb-it{padding:9px 10px;font-size:14px}
  .tbl td{padding:7px 8px} .tabs a,.tabs button{padding:9px 14px;font-size:13.5px}
  .pager button{min-width:32px;height:32px}
  .pos-search input{height:44px;font-size:16px} .pos-pay input.big{height:46px;font-size:20px}
  .quick button{height:34px}
}
/* HP */
@media(max-width:860px){
  #content{padding:8px}
  .tb-title{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
  .only-d{display:none!important}
  .pop{position:fixed;left:8px;right:8px;top:52px;width:auto;max-width:none}
  .pop-sm{left:auto;width:230px}
  .toolbar{gap:6px} .toolbar .dt-f{display:flex;flex-wrap:wrap;gap:6px;width:100%} .toolbar .dt-f select,.toolbar .dt-f input{flex:1 1 140px;min-width:0} .toolbar .search,.toolbar .search input{width:100%!important} .toolbar .dt-f .search{flex:1 1 100%}
  .toolbar .sp{display:none} .dt-sum{width:100%;font-size:12px}
  .card-h{flex-wrap:wrap}
  .stat-row{flex-wrap:wrap}
  .kv{grid-template-columns:minmax(90px,38%) 1fr}
  /* modal layar penuh di HP */
  #modalRoot .mb{padding:0;align-items:stretch}
  .modal,.modal.w-sm,.modal.w-lg,.modal.w-xl{width:100%!important;max-width:100%;border-radius:0;min-height:100%;display:flex;flex-direction:column}
  .mbd{max-height:none;flex:1;padding:10px}
  .mf{position:sticky;bottom:0;flex-wrap:wrap} .mf .btn{flex:1 1 auto;justify-content:center}
  .dr-panel{width:100%!important;max-width:100%}
  /* kasir */
  .pos{height:auto;min-height:0;gap:8px;grid-template-columns:minmax(0,1fr)} .pos-l,.pos-r{min-width:0}
  .pos-search{flex-wrap:wrap} .pos-search input{flex:1 1 100%} .pos-search .btn,.pos-search select{flex:1 1 auto}
  .pos-cart{max-height:none;min-height:180px;overflow:auto} .pos-cart table{min-width:430px} .pos-cart th:nth-child(1),.pos-cart td:nth-child(1),.pos-cart th:nth-child(4),.pos-cart td:nth-child(4){display:none}
  .pos-r{overflow:visible} .pos-pay .row{flex-wrap:wrap}
  .fkeys{display:none}
  .pos-tot .gt{font-size:34px}
  .lap-wrap{display:block} .lap-side{margin-bottom:8px} .lap-side a{display:inline-block;padding:6px 10px}
  .tabs{overflow-x:auto;flex-wrap:nowrap;white-space:nowrap} .tabs a,.tabs button{flex:none}
  /* tabel data -> kartu */
  .tbl-card{display:block} .tbl-card thead{display:none} .tbl-card tbody,.tbl-card tfoot{display:block}
  .tbl-card tr{display:block;margin:0 0 8px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:4px 0;box-shadow:var(--sh)}
  .tbl-card td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border:0;padding:4px 12px;text-align:right!important;word-break:break-word}
  .tbl-card td[data-l]::before{content:attr(data-l);flex:none;color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.03em;text-align:left;max-width:42%}
  .tbl-card td.act,.tbl-card td:not([data-l]){justify-content:flex-end}
  .tbl-card td.loading,.tbl-card td.empty{display:block;text-align:center!important}
  .tbl-card tbody tr:hover{background:#fff}
  .tbl-wrap:has(.tbl-card){overflow:visible;max-height:none!important;background:transparent;border:0}
  .card:has(.tbl-card){background:transparent;box-shadow:none;border:0}
  .tbl-card tr.sel{background:var(--yl)}
}
@media print{.tb-zoom,#exitBar{display:none!important}}
@media(max-width:860px){.tbl-card td:empty{display:none}}
@media(max-width:860px){.tbl-card td.nm{display:block;text-align:left!important;font-weight:600;padding-top:8px}.tbl-card td.no{display:none}}