/* ANISSOFEA Fashion — gaya Seller Centre (backoffice)
   Susun atur backoffice, jadual, carta, laci, cetakan waybill/invois (A6 & A4).
*/
#toast{z-index:400}
#bo{position:fixed;inset:0;z-index:200;background:#f3f4f6;display:none;grid-template-columns:236px 1fr;font-size:13.5px;color:#1d1d1f}
#bo.on{display:grid}
.ui button{background:#111;color:#fff;border-radius:7px;padding:.55em 1em;font-size:.82rem;font-weight:600;border:1px solid #111;white-space:nowrap}
.ui button:hover{background:var(--r);border-color:var(--r);color:#fff}
.ui button.l{background:#fff;color:#111;border-color:#d6d6db}
.ui button.l:hover{border-color:#111;background:#fff;color:#111}
.ui button.r{background:var(--r);border-color:var(--r)}
.ui button.g{background:#1a7a3e;border-color:#1a7a3e}
.ui button.sm{padding:.35em .75em;font-size:.76rem}
.ui button:disabled{opacity:.4;cursor:not-allowed}
.ui .x{background:#eee;color:#111;border-color:#eee}
.ui input,.ui select,.ui textarea{margin:3px 0 8px;padding:.5em .7em;border:1px solid #d6d6db;border-radius:7px;background:#fff;font-size:.84rem}
.ui input[type=checkbox],.ui input[type=radio]{width:auto;margin:0;accent-color:#111}
.ui h2{font-size:1.3rem}
.bs{background:#121418;color:#b9bdc7;overflow:auto;display:flex;flex-direction:column;padding-bottom:10px}
.bs .lg{padding:18px 18px 14px;font:800 1.02rem Inter,sans-serif;letter-spacing:.08em;color:#fff;border-bottom:1px solid #ffffff12}
.bs .lg img{display:block;width:100%;max-width:190px;height:auto}.bs .lg small{display:block;color:#ff5a6e;text-align:center;font-size:.58rem;letter-spacing:.32em;margin-top:3px}
.bs .gp{padding:14px 18px 4px;font-size:.64rem;letter-spacing:.14em;color:#6b707c;text-transform:uppercase;font-weight:700}
.bs a{display:flex;align-items:center;gap:10px;padding:7px 18px;cursor:pointer;color:#b9bdc7;border-left:3px solid transparent;font-size:.84rem}
.bs a span{width:18px;text-align:center}
.bs a:hover{background:#ffffff0b;color:#fff}
.bs a.on{background:#ffffff12;color:#fff;border-left-color:var(--r);font-weight:600}
.bs a em{margin-left:auto;font-style:normal;background:var(--r);color:#fff;border-radius:99px;font-size:.64rem;padding:1px 7px;font-weight:700}
.bsf{margin-top:auto;padding:14px 18px;font-size:.72rem;color:#6b707c;border-top:1px solid #ffffff12}
.bm{display:flex;flex-direction:column;overflow:hidden;min-width:0}
.bt{display:flex;align-items:center;gap:10px;padding:10px 22px;background:#fff;border-bottom:1px solid #e5e5ea}
.bt h1{font-size:1.12rem;margin-right:auto}
.ui .bt input{width:250px;margin:0}
.who{display:flex;flex-direction:column;line-height:1.2;font-size:.8rem;padding:0 6px}.who small{color:#888}
.bc{flex:1;overflow:auto;padding:20px 22px 60px}
.cd{background:#fff;border:1px solid #e7e7ec;border-radius:12px;padding:16px 18px;margin-bottom:16px;min-width:0}
.cd h3{font-size:.92rem;margin:0 0 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.g2{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.g2e{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.kp{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;margin-bottom:16px}
.kp>div{background:#fff;border:1px solid #e7e7ec;border-radius:12px;padding:14px 16px}
.kp small{color:#777;font-size:.74rem;display:block}
.kp b{display:block;font-size:1.4rem;font-weight:700;margin:2px 0;font-variant-numeric:tabular-nums}
.kp i{font-style:normal;font-size:.72rem;color:#888}
.up{color:#1a7a3e!important}.dn{color:#c8102e!important}.mu{color:#888}.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem}
.lk{color:#0b5cad;cursor:pointer;font-weight:600;text-decoration:none}.lk:hover{text-decoration:underline}
.tw{overflow:auto;border:1px solid #e7e7ec;border-radius:12px;max-height:64vh;background:#fff}
.ui table{width:100%;border-collapse:collapse;font-size:.8rem;background:#fff}
.ui th{background:#f7f7f9;color:#555;font-weight:600;white-space:nowrap;position:sticky;top:0;z-index:1;text-align:left}
.ui td,.ui th{padding:8px 10px;border-bottom:1px solid #f0f0f3;vertical-align:middle}
.ui tr:hover td{background:#fbfbfc}
.ui td input{margin:0}
.pl{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.7rem;font-weight:700;white-space:nowrap}
.st{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid #e5e5ea;margin-bottom:14px}
.ui .st button{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;color:#666;padding:.7em 1em;font-weight:600}
.ui .st button.on{border-bottom-color:var(--r);color:#111}
.st em{font-style:normal;color:#999;margin-left:5px;font-weight:500}
.ac{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.ui .ac input,.ui .ac select{width:auto;margin:0}
.ui .ac input.w{min-width:240px}
.bk{display:flex;gap:6px;flex-wrap:wrap;align-items:center;background:#111;color:#fff;padding:8px 12px;border-radius:10px;margin-bottom:12px;position:sticky;top:-20px;z-index:3}
.ui .bk button{background:#fff;color:#111;border-color:#fff}.ui .bk button:hover{background:var(--r);color:#fff;border-color:var(--r)}.ui .bk button.r{background:var(--r);color:#fff;border-color:var(--r)}
.hb>div{display:grid;grid-template-columns:118px 1fr 92px;gap:10px;align-items:center;margin:7px 0;font-size:.8rem}
.hb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hb em{background:#f1f1f4;border-radius:99px;height:10px;overflow:hidden}.hb i{display:block;height:100%;background:#111;border-radius:99px}.hb b{text-align:right;font-variant-numeric:tabular-nums}
.vb{display:flex;align-items:stretch;gap:3px;height:190px}
.vb>div{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0}
.vb em{flex:1;width:100%;display:flex;align-items:flex-end}
.vb i{display:block;width:100%;background:#111;border-radius:4px 4px 0 0;min-height:2px;transition:background .2s}
.vb>div:hover i{background:var(--r)}
.vb span{font-size:.6rem;color:#999;margin-top:4px;white-space:nowrap}
.todo{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.todo div{border:1px solid #ececf0;border-radius:10px;padding:12px;cursor:pointer;text-align:center}.todo div:hover{border-color:#111}
.todo b{display:block;font-size:1.5rem}.todo small{color:#777;font-size:.72rem}.todo .hot b{color:var(--r)}
.rw{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid #f3f3f5;font-size:.8rem}.rw span{flex:1;min-width:0}
.pbar{height:10px;background:#f1f1f4;border-radius:99px;overflow:hidden;margin:10px 0 6px}.pbar i{display:block;height:100%;background:linear-gradient(90deg,#111,var(--r))}
.fm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 14px}
.fm label{font-size:.74rem;color:#555;font-weight:600;display:block}
.fm .full{grid-column:1/-1}
#bdo{position:fixed;inset:0;background:#0006;z-index:210;display:none}#bdo.on{display:block}
#bd{position:fixed;top:0;right:0;bottom:0;width:min(620px,100%);background:#f7f7f9;z-index:211;box-shadow:-10px 0 40px #0003;transform:translateX(105%);transition:transform .3s;overflow:auto;padding:22px;font-size:13.5px}
#bd.on{transform:none}
#bd .cd{margin-top:14px;margin-bottom:0}
.tl>div{border-left:2px solid #e0e0e6;padding:0 0 12px 14px;position:relative}.tl>div:before{content:'';position:absolute;left:-6px;top:3px;width:10px;height:10px;border-radius:50%;background:#111}.tl>div:first-child:before{background:var(--r)}.tl b{display:block;font-weight:600;font-size:.82rem}.tl small{color:#888}
.th{width:40px;height:52px;object-fit:cover;border-radius:6px;display:block}
.nt{background:#fffbe8;border:1px solid #f3e6a6;border-radius:8px;padding:8px 10px;margin:0 0 8px}.nt small{display:block;color:#888;font-size:.7rem}
.tg{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #f0f0f3;cursor:pointer;font-weight:600}.tg small{display:block;font-weight:400;color:#888}
.tg input{display:none}.tg>span{width:38px;height:22px;border-radius:99px;background:#ccc;position:relative;flex:0 0 38px;transition:.2s}.tg>span:after{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}.tg input:checked+span{background:#1a7a3e}.tg input:checked+span:after{left:19px}
.lvh{display:flex;align-items:center;gap:8px;margin-bottom:14px;color:#555;font-size:.8rem}.lvd{width:9px;height:9px;border-radius:50%;background:#1a7a3e;animation:pu 1.6s infinite}@keyframes pu{0%{box-shadow:0 0 0 0 #1a7a3e88}70%{box-shadow:0 0 0 9px #1a7a3e00}100%{box-shadow:0 0 0 0 #1a7a3e00}}
.pipe{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.pipe div{background:#f7f7f9;border-radius:10px;padding:12px;text-align:center;cursor:pointer}.pipe div:hover{background:#efeff3}.pipe b{display:block;font-size:1.6rem}.pipe small{color:#777;font-size:.72rem}
.al{max-height:320px;overflow:auto}.al div{display:flex;gap:8px;padding:7px 0;border-bottom:1px solid #f3f3f5;font-size:.8rem;cursor:pointer}.al div:hover{color:var(--r)}
.pk{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ui input.scan{font-size:1.05rem;padding:.8em 1em;border:2px solid #111;width:100%}
.pki{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid #eee;border-radius:10px;margin-bottom:8px;background:#fff}.pki.ok{border-color:#1a7a3e;background:#effaf3}.pki span{flex:1}
.crs{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.crd{border:1px solid #e7e7ec;border-radius:12px;padding:14px;background:#fff}.crd h4{font-size:.95rem;margin-bottom:4px}
.ctr{text-align:center;margin-top:14px}
.wbpw{width:62mm;height:93mm;overflow:hidden;margin:auto;box-shadow:0 4px 18px #0002}.wbpw>.wb{transform:scale(.62);transform-origin:top left}
.chip{display:inline-block;padding:3px 10px;border:1px solid #ddd;border-radius:99px;margin:0 4px 4px 0;cursor:pointer;font-size:.76rem;background:#fff}.chip.on{background:#111;color:#fff;border-color:#111}
.perm td,.perm th{text-align:center}.perm td:first-child,.perm th:first-child{text-align:left}
/* ===== print ===== */
#prt{display:none;position:fixed;inset:0;z-index:300;background:#525659;overflow:auto}
#prt.on{display:block}
.ptb{position:sticky;top:0;display:flex;gap:8px;align-items:center;background:#2b2d31;color:#fff;padding:10px 18px;z-index:2}
.ptb b{margin-right:auto}.ptb button{background:#fff;color:#111;border-radius:6px;padding:.5em 1em;font-weight:600}.ptb button.r{background:#e4002b;color:#fff}
#prtc{padding:20px 10px}
#prtc>div{margin:0 auto 16px;box-shadow:0 4px 20px #0007}
.wb{width:100mm;height:150mm;padding:3mm;background:#fff;color:#000;font:8.5pt/1.3 Arial,Helvetica,sans-serif;display:flex;flex-direction:column;gap:1.6mm;overflow:hidden;page-break-after:always;break-after:page;box-sizing:border-box}
.wb *{box-sizing:border-box}
.wh{display:flex;justify-content:space-between;align-items:center;border-bottom:.6mm solid #000;padding-bottom:1.5mm}
.wh b{font-size:13pt;letter-spacing:.3pt;display:block}.wh small{font-size:6.5pt}
.rc{font:700 15pt Arial;border:.6mm solid #000;padding:.5mm 2mm;text-align:center;line-height:1.1}.rc small{display:block;font-size:6pt;font-weight:400}
.wbc{text-align:center}
.an{font:700 11pt 'Courier New',monospace;letter-spacing:1pt;text-align:center}
.wx{display:grid;grid-template-columns:13mm 1fr;border:.3mm solid #000}
.wk{background:#000;color:#fff;font-weight:700;font-size:6.5pt;display:flex;align-items:center;justify-content:center;text-align:center}
.wx>div:last-child{padding:1.4mm 2mm;font-size:8pt}.wx b{font-size:9.5pt}
.wg{display:grid;grid-template-columns:repeat(4,1fr);border:.3mm solid #000}.wg div{padding:1mm 1.4mm;border-right:.3mm solid #000}.wg div:last-child{border:0}.wg small{display:block;font-size:5.8pt}.wg b{font-size:8.5pt}
.wcod{border:.6mm solid #000;text-align:center;font:700 12pt Arial;padding:1mm}
.wo{display:grid;grid-template-columns:38mm 1fr;gap:2mm;flex:1;min-height:0;border:.3mm solid #000;padding:1.5mm}
.wl2{font-size:6.8pt;overflow:hidden;line-height:1.35}
.wf{font-size:6pt;border-top:.3mm dashed #000;padding-top:1mm;display:flex;justify-content:space-between}
.a4p{width:210mm;height:297mm;padding:4mm;display:grid;grid-template-columns:100mm 100mm;grid-auto-rows:143mm;gap:3mm;justify-content:center;align-content:start;page-break-after:always;break-after:page;background:#fff;box-sizing:border-box}
.a4p .wb{height:143mm;page-break-after:auto;break-after:auto;border:.2mm dashed #999}
.a4{width:210mm;min-height:297mm;padding:14mm;background:#fff;color:#000;font:9.5pt/1.4 Arial,Helvetica,sans-serif;page-break-after:always;break-after:page;box-sizing:border-box}
.a4 h2{font:700 15pt Arial;margin:0 0 2mm}
.dhd{display:flex;justify-content:space-between;gap:10mm;border-bottom:.6mm solid #000;padding-bottom:4mm;margin-bottom:5mm}
.g2d{display:grid;grid-template-columns:1fr 1fr;gap:8mm;margin-bottom:5mm}.g2d small{color:#555;font-size:7.5pt;letter-spacing:.5pt}
.dt{width:100%;border-collapse:collapse;font-size:9pt;margin-bottom:5mm}.dt th{background:#eee;text-align:left;padding:2mm;border:.2mm solid #999}.dt td{padding:2mm;border:.2mm solid #bbb}
.tot{margin-left:auto;width:75mm;border-collapse:collapse;font-size:9.5pt}.tot td,.tot th{padding:1.4mm 2mm;text-align:right}.tot th{border-top:.5mm solid #000;font-size:11pt}
.sig{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10mm;margin-top:16mm;font-size:8.5pt}.sig div{border-top:.3mm solid #000;padding-top:2mm}
@media print{body>*{display:none!important}#prt,#prt.on{display:block!important;position:static;background:none;overflow:visible}.ptb{display:none!important}#prtc{padding:0}#prtc>div{margin:0!important;box-shadow:none!important}.a4p .wb{border:0}}
@media(max-width:900px){#bo{grid-template-columns:1fr;grid-template-rows:auto 1fr}.bs{flex-direction:row;overflow-x:auto;padding:0}.bs .gp,.bs .lg,.bsf{display:none}.bs a{white-space:nowrap;border-left:0;border-bottom:3px solid transparent;padding:10px 12px}.bs a.on{border-bottom-color:var(--r)}.g2,.g3,.g2e,.pk,.fm{grid-template-columns:1fr}.bt{flex-wrap:wrap;padding:10px 14px}.ui .bt input,.who{display:none}.bc{padding:14px 14px 60px}.pipe{grid-template-columns:repeat(2,1fr)}.hb>div{grid-template-columns:90px 1fr 80px}}