:root{
  --brand:#0057E2; --brand-d:#0046b8; --brand-l:#E8F0FD; --brand-m:#2F80ED;
  --ok:#15803d; --ok-l:#dcfce7;
  --teal:#0b7f9c; --orange:#ee6a22; --orange-l:#fdeee4; --red:#e0393e; --red-l:#fde8e8;
  --nav:#0057E2; --nav-d:#0046b8;
  --accent:#FFC224; --accent-d:#F0A800; --accent-l:#FFF3CF; --accent-t:#9A6700; --blue-l:#E8F0FD;
  --yellow:#f5a623; --yellow-l:#fff3dc;
  --bg:#f3f4f3; --card:#fff; --ink:#1c1f1c; --muted:#5f665f; --line:#ebedeb;
  --bounce:cubic-bezier(.34,1.56,.64,1); --r:30px; --shadow:0 8px 24px rgba(20,40,20,.07);
  --font-round:"Nunito","Varela Round","Segoe UI",system-ui,sans-serif;
  --font-head:"Inter","Segoe UI",system-ui,sans-serif;
  font-family:var(--font-round);
}
h1,h3,.stat b{font-family:var(--font-head)}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
.app{display:grid;grid-template-columns:minmax(0,1fr);min-height:100vh;gap:20px;padding:20px}

/* animasi ikon unik per menu — jalan saat hover & saat menu jadi aktif */

.top-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.user-slot{position:relative;width:46px;height:46px;flex:none;z-index:10}
.user{position:absolute;right:0;top:0;height:46px;display:flex;align-items:center;gap:0;background:#fff;border-radius:999px;padding:5px;box-shadow:var(--shadow);cursor:default;outline:none}
.user>div:not(.avatar){max-width:0;opacity:0;white-space:nowrap;overflow:hidden;padding-left:0;padding-right:0;transition:max-width .4s var(--bounce),opacity .2s,padding .4s var(--bounce)}
.user:hover>div:not(.avatar),.user:focus-visible>div:not(.avatar){max-width:170px;opacity:1;padding-left:10px;padding-right:12px}
.user b{font-size:13px;line-height:1.2;display:block}.user small{font-size:11px;opacity:.75}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--ink);display:grid;place-items:center;font-weight:700;overflow:hidden;text-decoration:none;flex:none}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
/* pengaturan akun: foto dan pratinjau */
.ak-photo{display:flex;align-items:center;gap:18px;margin-bottom:6px;flex-wrap:wrap}
.ak-av{width:88px;height:88px;border-radius:50%;background:var(--accent);color:var(--ink);display:grid;place-items:center;font-size:34px;font-weight:700;overflow:hidden;flex:none}
.ak-av img{width:100%;height:100%;object-fit:cover;display:block}
.ak-photo-btns{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.ak-photo-btns label.btn{cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.ak-photo-btns label.btn svg{width:16px;height:16px}
/* pengaturan perusahaan: pratinjau kop dokumen (warna dan susunan mengikuti kop PDF) */
.pr-kop{display:flex;align-items:center;gap:12px}
.pr-kop>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.pr-kop small{line-height:1.4}
.pr-mark{width:40px;height:40px;border-radius:10px;background:#0057E2;color:#fff;display:grid;place-items:center;font-weight:800;font-size:20px;flex:none}

/* teks memudar & menyempit, ikon tetap di tempat (tanpa lompat) */

/* pil aktif yang meluncur */

/* topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.topbar h1{font-size:26px;letter-spacing:-.02em}

/* generic */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:24px}
.card h3{font-size:16px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}
.card h3 a{font-size:13px;color:var(--accent-t);text-decoration:none;font-weight:600}
.grid{display:grid;gap:20px}
.g12{grid-template-columns:repeat(12,1fr)}
.s5{grid-column:span 5}.s7{grid-column:span 7}.s4{grid-column:span 4}.s8{grid-column:span 8}
.grid.col{align-content:start;grid-template-columns:minmax(0,1fr)}.grid.top{align-content:start}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:var(--ink);border-radius:999px;padding:11px 20px;font-weight:700;transition:.15s}
.btn:hover{background:var(--accent-d)}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{background:#f6f6f6}
.btn.block{width:100%}
.btn svg{width:18px;height:18px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:8px 16px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-weight:600;color:var(--ink)}
.chip.on{background:var(--accent);color:var(--ink);box-shadow:none}
.tag{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.tag.ok{background:var(--ok-l);color:var(--ok)}
.tag.low{background:var(--yellow-l);color:#8a5300}
.tag.zero{background:var(--red-l);color:#b42318}
.tag.in{background:var(--ok-l);color:var(--ok)}
.tag.outt{background:var(--orange-l);color:#b4480f}
.muted{color:var(--muted)}

/* stat tiles */
.stat{display:flex;flex-direction:column;gap:10px}
.ico{width:48px;height:48px;border-radius:18px;display:grid;place-items:center}
.ico svg{width:22px;height:22px}
.ico.g{background:var(--brand-l);color:var(--brand)}.ico.o{background:var(--orange-l);color:var(--orange)}.ico.y{background:var(--yellow-l);color:#b46f00}.ico.r{background:var(--red-l);color:var(--red)}
.stat b{font-size:26px;letter-spacing:-.02em}
.stat span{color:var(--muted);font-weight:500}

/* chart */
.legend{display:flex;gap:16px;font-size:12px;font-weight:600;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.chart text{font-size:11px;fill:var(--muted)}

/* alert list */
.alert{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line)}
.alert:last-child{border:0}
.emoji{width:44px;height:44px;border-radius:18px;background:var(--bg);display:grid;place-items:center;font-size:22px;flex:none}
.alert .t{flex:1;min-width:0}.alert .t b{display:block}.alert .t small{color:var(--muted)}
.empty{text-align:center;color:var(--muted);padding:28px 0}

/* table */
.tools{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}
.search{flex-direction:row;font-weight:400;display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:0 16px;box-shadow:inset 0 0 0 1px var(--line);min-width:260px}
.search input{border:0;outline:0;padding:11px 0;width:100%;background:none}
.search:focus-within{box-shadow:inset 0 0 0 2px var(--accent)}
.search svg{width:18px;height:18px;color:var(--muted)}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:12px;color:#000;font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border:0}
tbody tr:hover{background:#fafbfa}
.num{text-align:right;font-variant-numeric:tabular-nums}
.item{display:flex;align-items:center;gap:12px}.item b{display:block}.item small{color:var(--muted)}
/* level stok: hijau aman, kuning mendekati minimum, merah di/bawah minimum */
.bar{position:relative;height:10px;border-radius:99px;background:var(--line);min-width:90px}
.bar i{display:block;height:100%;border-radius:99px;background:var(--brand-m);transition:width .3s var(--bounce),background .2s}
.bar.low i{background:var(--yellow)}.bar.zero i{background:var(--red)}.bar.zero{background:#fbd9d9}
/* level stok di tabel: tag status di atas bar */
.lvl-cell{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:120px}
.lvl-cell .bar{align-self:stretch}
.lvl-cell .tag{font-size:10px;padding:2px 8px}
.tbl-wrap{overflow-x:auto}
/* judul kolom yang bisa diurutkan: klik -> naik (▲), klik lagi -> turun (▼), klik lagi -> urutan awal */
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{color:var(--ink)}
th.sortable::after{content:'↕';margin-left:4px;font-size:1em;font-weight:400;vertical-align:baseline;opacity:.35}
th.sorted-asc::after{content:'▲';margin-left:4px;font-size:1em;font-weight:400;vertical-align:baseline;opacity:.9}
th.sorted-desc::after{content:'▼';margin-left:4px;font-size:1em;font-weight:400;vertical-align:baseline;opacity:.9}
.plus{color:var(--ok);font-weight:700}.minus{color:#c2410c;font-weight:700}

/* form */
.form{display:flex;flex-direction:column;gap:14px}
label,.field-l{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:13px}
input,select,textarea{border:0;background:var(--bg);border-radius:20px;padding:12px 14px;outline:2px solid transparent;transition:.15s;width:100%}
input:focus,select:focus,textarea:focus{outline-color:var(--accent);background:#fff}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stockhint{background:var(--blue-l);color:var(--nav);border-radius:18px;padding:10px 14px;font-weight:600;font-size:13px}
.err{color:var(--red);font-weight:600;font-size:13px;min-height:16px}

.back{display:inline-block;color:var(--accent-t);font-weight:700;text-decoration:none;margin-bottom:6px}
.back:hover{text-decoration:underline}
a.btn{text-decoration:none}
#itemform .card{padding:24px}
#itemform .form{gap:18px}
#itemform input,#itemform select{padding:14px 16px}

/* custom dropdown */
.dd{position:relative}
.dd-native{position:absolute;opacity:0;pointer-events:none;height:0;width:0;padding:0}
.dd-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:var(--bg);border-radius:20px;padding:12px 14px;font-weight:600;text-align:left;outline:2px solid transparent;transition:background .15s,outline-color .15s}
#itemform .dd-btn{padding:14px 16px}
.dd-btn:hover{background:#eceeec}
.dd-btn .ph,.dd-menu .ph{color:var(--muted);font-weight:500}
.dd-btn svg{width:18px;height:18px;flex:none;color:var(--accent-t);transition:transform .3s var(--bounce)}
.dd.open .dd-btn,.dd-btn:focus-visible{background:#fff;outline-color:var(--accent)}
.dd.open .dd-btn svg{transform:rotate(180deg)}
.dd-menu{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;list-style:none;padding:6px;background:#fff;border-radius:28px;box-shadow:0 14px 36px rgba(20,40,20,.18),0 0 0 1px var(--line);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.94);transform-origin:top center;transition:opacity .15s,transform .28s var(--bounce),visibility 0s .28s}
.dd.open .dd-menu{opacity:1;visibility:visible;transform:none;transition:opacity .15s,transform .28s var(--bounce),visibility 0s}
.dd-menu li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:18px;font-weight:600;cursor:pointer;transition:background .12s,padding .2s var(--bounce)}
.dd-menu li:hover{background:var(--accent-l);padding-left:18px}
.dd-menu li svg{width:16px;height:16px;color:var(--ink);opacity:0;transform:scale(.4);transition:transform .3s var(--bounce),opacity .15s}
.dd-menu li.on{background:var(--accent);color:var(--ink)}
.dd-menu li.on svg{opacity:1;transform:none}
.dd-menu li.on:hover{background:var(--accent-d)}

/* modal / toast */
.modal-bg{position:fixed;inset:0;background:rgba(10,20,10,.45);display:grid;place-items:center;padding:20px;z-index:50}
.modal-bg[hidden],.toast[hidden]{display:none}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 22px;border-radius:999px;font-weight:600;z-index:60;box-shadow:var(--shadow)}

@media (max-width:1100px){.s5,.s7,.s4,.s8{grid-column:span 12}}
@media (max-width:820px){.app{grid-template-columns:1fr;padding:12px}.row2{grid-template-columns:1fr}}

/* tanggal di tabel: kecil & rounded */
td.date{font-family:var(--font-round);font-size:12px;font-weight:700;color:#000;white-space:nowrap;letter-spacing:.01em}

.dd-list{list-style:none;padding:0;max-height:240px;overflow:hidden auto;scrollbar-width:thin;scrollbar-color:#c9d0c9 transparent}
.dd-add{display:flex;gap:6px;margin-top:6px;padding:6px 0 0;border-top:1px dashed var(--line)}
.dd-add input{flex:1;min-width:0;border-radius:999px;padding:9px 14px;font-size:13px}
.dd-add button{background:var(--accent);color:var(--ink);border-radius:999px;padding:0 14px;font-weight:700;font-size:13px;white-space:nowrap;transition:background .15s,transform .2s var(--bounce)}
.dd-add button:hover{background:var(--accent-d);transform:scale(1.05)}
.dd-add button:active{transform:scale(.94)}

/* tag jenis barang */
.tag.t-bb{background:var(--brand-l);color:var(--brand)}
.tag.t-bj{background:var(--orange-l);color:var(--orange)}
.tag.t-km{background:#e0f1f6;color:#086074}
.tag-pick{display:flex;gap:8px;flex-wrap:wrap}
.tag-pick button{padding:12px 16px;border-radius:999px;font-weight:700;font-size:13px;box-shadow:inset 0 0 0 2px transparent;opacity:.55;transition:opacity .15s,box-shadow .15s,transform .25s var(--bounce)}
.tag-pick button.t-bb{background:var(--brand-l);color:var(--brand)}
.tag-pick button.t-bj{background:var(--orange-l);color:var(--orange)}
.tag-pick button.t-km{background:#e0f1f6;color:var(--teal)}
.tag-pick button:hover{opacity:.85}
.tag-pick button.on{opacity:1;box-shadow:inset 0 0 0 2px currentColor;transform:scale(1.04)}

/* dropdown: tanpa scrollbar horizontal, scrollbar vertikal tipis */
.dd-list::-webkit-scrollbar{width:6px;height:0}
.dd-list::-webkit-scrollbar-thumb{background:#c9d0c9;border-radius:99px}
.dd-list::-webkit-scrollbar-button{display:none}

.icon-btn{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:transparent;color:var(--ink);transition:background .15s,color .15s,transform .25s var(--bounce)}
.icon-btn svg{width:16px;height:16px}
.icon-btn:hover{background:var(--accent-l);color:var(--accent-t);transform:scale(1.12) rotate(-8deg)}
.icon-btn:active{transform:scale(.92)}
input:disabled{opacity:.7;cursor:not-allowed}

/* pemilih kolom tabel */
.col-pop-wrap{position:relative}
.col-pop{position:fixed;right:0;top:0;z-index:60;width:250px;max-height:calc(100vh - 150px);overflow:hidden;display:flex;flex-direction:column;background:#fff;border-radius:28px;padding:10px;box-shadow:0 14px 36px rgba(20,40,20,.18),0 0 0 1px var(--line);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.94);transform-origin:top right;transition:opacity .15s,transform .28s var(--bounce),visibility 0s .28s}
.col-pop-wrap.open .col-pop{opacity:1;visibility:visible;transform:none;transition:opacity .15s,transform .28s var(--bounce),visibility 0s}
.col-pop-wrap.open>.icon-btn{background:var(--accent-l);color:var(--accent-t)}
.col-pop-t{font-size:12px;font-weight:700;color:var(--muted);padding:6px 10px 8px}
.ck{flex-direction:row;align-items:center;gap:12px;padding:9px 10px;border-radius:18px;cursor:pointer;font-weight:600;font-size:14px;transition:background .12s}
.ck:hover{background:var(--accent-l)}
.ck input{position:absolute;opacity:0;width:0;height:0}
.ck i{width:20px;height:20px;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 2px #cfd5cf;display:grid;place-items:center;flex:none;transition:background .15s,box-shadow .15s,transform .25s var(--bounce)}
.ck i::after{content:"";width:9px;height:5px;border-left:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(-45deg) scale(0);margin-top:-2px;transition:transform .25s var(--bounce)}
.ck input:checked+i{background:var(--accent);box-shadow:none;transform:scale(1.05)}
.ck input:checked+i::after{transform:rotate(-45deg) scale(1)}
.ck input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}
.ck.locked{opacity:.55;cursor:not-allowed}
.col-reset{display:block;width:100%;margin-top:6px;padding:10px;border-top:1px dashed var(--line);color:var(--accent-t);font-weight:700;font-size:13px;border-radius:0 0 14px 14px}
.col-reset:hover{text-decoration:underline}

.th-act{width:1%;padding-top:4px;padding-bottom:4px}

/* baris produk bisa diklik -> buka pengaturan produk */
tr.row-link{cursor:pointer;outline:none;transition:background .15s}
tr.row-link:hover,tr.row-link:focus-visible{background:var(--accent-l)}
tr.row-link:active{background:#ffe9a6}
td.go{width:1%;color:var(--accent-t);text-align:center}
td.go svg{width:18px;height:18px;opacity:0;transform:translateX(-6px);transition:opacity .15s,transform .3s var(--bounce)}
tr.row-link:hover td.go svg,tr.row-link:focus-visible td.go svg{opacity:1;transform:none}

/* stok opname */
.op-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px;padding:16px 20px}
.op-stats{display:flex;gap:10px;flex-wrap:wrap}
.op-stat{display:flex;flex-direction:column;min-width:96px;padding:10px 16px;border-radius:20px;background:var(--bg)}
.op-stat b{font-size:20px;font-family:var(--font-head);letter-spacing:-.02em}
.op-stat span{font-size:12px;color:var(--muted);font-weight:600}
.op-stat.ok{background:var(--brand-l)}.op-stat.ok b{color:var(--brand)}
.op-stat.pos{background:var(--yellow-l)}.op-stat.pos b{color:#b46f00}
.op-stat.neg{background:var(--red-l)}.op-stat.neg b{color:var(--red)}
.op-btns{display:flex;gap:10px;flex-wrap:wrap}
.op-date{flex-direction:row;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:0 14px;box-shadow:inset 0 0 0 1px var(--line);font-weight:600}
.op-date svg{width:18px;height:18px;color:var(--muted);flex:none}
.op-date input{background:none;padding:10px 0;border-radius:0;width:auto;outline:none}
.btn.sm{padding:7px 14px;font-size:13px}
.cnt{width:130px;text-align:right;padding:10px 14px;border-radius:999px;font-weight:700;font-variant-numeric:tabular-nums;background:var(--bg)}
.op-row.changed td{background:#fffbf1}
.op-row.has-count .cnt{background:#fff;outline-color:var(--line)}
.op-row.changed .cnt{outline-color:var(--yellow)}
.diff{display:inline-block;padding:5px 12px;border-radius:999px;font-weight:700;font-size:13px;white-space:nowrap}
.diff.ok{background:var(--brand-l);color:var(--brand)}
.diff.pos{background:var(--yellow-l);color:#b46f00}
.diff.neg{background:var(--red-l);color:var(--red)}
.op-act{white-space:nowrap;text-align:right;width:1%}
.op-act>*{opacity:0;pointer-events:none;transform:scale(.85);transition:opacity .15s,transform .3s var(--bounce)}
.op-row.has-count .op-act>*{opacity:1;pointer-events:auto;transform:none}
.x-btn{width:30px;height:30px;border-radius:50%;color:var(--muted);margin-left:6px;font-size:13px}
.x-btn:hover{background:var(--red-l);color:var(--red)}
.op-table td{padding-top:10px;padding-bottom:10px}

/* penerimaan barang */
.info-note{display:flex;gap:12px;align-items:flex-start;background:var(--blue-l);color:#0b2d6b;border-radius:20px;padding:14px 18px;margin-bottom:16px;font-size:13px;line-height:1.5}
.info-note svg{width:20px;height:20px;flex:none;color:var(--nav);margin-top:1px}
.rcv-head{display:flex;gap:28px;flex-wrap:wrap}
.rcv-head>div{display:flex;flex-direction:column;gap:4px}
.rcv-head b{font-size:16px;font-family:var(--font-head)}
td.date b{font-weight:700}

/* widget barang incoming */
.in-title{display:flex;align-items:center;gap:10px}
.in-title .count{font-style:normal;background:var(--orange);color:#fff;font-size:12px;font-weight:800;border-radius:999px;padding:2px 9px}
.pulse{width:10px;height:10px;border-radius:50%;background:#c8cec8;flex:none}
.pulse.on{background:var(--orange);box-shadow:0 0 0 0 rgba(238,106,34,.5);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(238,106,34,.5)}70%{box-shadow:0 0 0 9px rgba(238,106,34,0)}100%{box-shadow:0 0 0 0 rgba(238,106,34,0)}}
a.alert.link{text-decoration:none;color:inherit;border-radius:18px;padding:10px;margin:0 -10px;transition:background .15s}
a.alert.link:hover{background:var(--orange-l)}
.more-link{display:block;text-align:center;color:var(--accent-t);font-weight:700;font-size:13px;text-decoration:none;padding-top:10px}
.more-link:hover{text-decoration:underline}
.in-title .count.red{background:var(--red)}
.pulse.on.red{background:var(--red);animation:pulse-red 1.8s infinite}
@keyframes pulse-red{0%{box-shadow:0 0 0 0 rgba(224,57,62,.5)}70%{box-shadow:0 0 0 9px rgba(224,57,62,0)}100%{box-shadow:0 0 0 0 rgba(224,57,62,0)}}

/* pagination */
.pager{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px dashed var(--line)}
.pg-nav{display:flex;align-items:center;gap:6px}
.pg{min-width:38px;height:38px;padding:0 10px;border-radius:999px;background:var(--bg);font-weight:700;transition:background .15s,color .15s,transform .25s var(--bounce)}
.pg:hover:not(:disabled):not(.on){background:var(--accent-l);color:var(--accent-t);transform:scale(1.1)}
.pg:active:not(:disabled){transform:scale(.92)}
.pg.on{background:var(--accent);color:var(--ink);transform:scale(1.05)}
.pg:disabled{opacity:.35;cursor:not-allowed}
.pg-gap{color:var(--muted);padding:0 2px}

/* ===== modul purchase ===== */

.tag.gray{background:#eceeec;color:#5c635c}
/* progres selesai: gradasi hijau */
.tag.g-done{background:linear-gradient(135deg,#15803d 0%,#14532d 100%);color:#fff;box-shadow:0 2px 8px rgba(21,128,61,.25)}
.tag.blue{background:#e0f1f6;color:#086074}
.nowrap{white-space:nowrap}
.due{display:inline-block;font-size:12px;font-weight:700;color:var(--muted)}
.due.late{color:var(--red)}.due.soon{color:#b46f00}
.due-row{margin-top:8px}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.vinfo{display:flex;gap:18px;flex-wrap:wrap;background:var(--bg);border-radius:18px;padding:12px 16px;font-size:13px;font-weight:600}
.vnew{background:var(--accent-l);border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:12px}
.vnew input{background:#fff}
.po-lines{display:flex;flex-direction:column;gap:10px}
.po-line{display:grid;grid-template-columns:minmax(0,3fr) 120px minmax(0,1.4fr) minmax(0,1.2fr) 34px;gap:10px;align-items:start}
.po-line.hd{font-size:12px;font-weight:700;color:var(--muted);padding:0 4px}
.po-line.hd .r,.pl-sub{text-align:right}
.pl-sub{font-weight:700;padding-top:12px;font-variant-numeric:tabular-nums}
.pl-qty small{display:block;margin:3px 0 0 6px;font-size:11px}
.po-line .x-btn{margin:5px 0 0}
.po-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px dashed var(--line)}
.sum-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13px;align-items:center}
.sum-row.col{flex-direction:column;align-items:flex-start;gap:4px}
.sum-row b{text-align:right}.sum-row.col b{text-align:left}
.sum-total{display:flex;justify-content:space-between;align-items:center;padding-top:14px}
.sum-total b{font-size:20px;font-family:var(--font-head)}
textarea{resize:vertical}
/* upload */
.dropzone{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:22px 16px;border-radius:24px;border:2px dashed #cfd5cf;background:#fafbfa;cursor:pointer;font-weight:600;transition:background .15s,border-color .15s,transform .25s var(--bounce)}
.dropzone:hover,.dropzone.drag{border-color:var(--accent);background:var(--accent-l);transform:scale(1.01)}
.dropzone input{display:none}
.dropzone>span{display:flex;align-items:center;gap:8px}
.dropzone svg{width:20px;height:20px;color:var(--accent-t)}
.dropzone u{color:var(--accent-t)}
.dropzone small{font-weight:500;color:var(--muted)}
.files{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.files:empty{display:none}
.file{display:flex;align-items:center;gap:8px;background:var(--bg);border-radius:20px;padding:6px 8px 6px 6px}
.file-open{display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-align:left;border-radius:16px;padding:2px;transition:transform .2s var(--bounce)}
.file-open:hover{transform:translateX(3px)}
.file-open img,.file-open .pdf{width:44px;height:44px;border-radius:14px;object-fit:cover;flex:none}
.file-open .pdf{background:var(--red-l);color:var(--red);display:grid;place-items:center;font-size:11px;font-weight:800}
.fn{display:flex;flex-direction:column;min-width:0}.fn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.fn small{color:var(--muted)}
.empty-sm{color:var(--muted);font-size:13px;padding:6px 0 12px}
.add-proof{display:inline-flex;flex-direction:row;margin-top:10px;padding:7px 14px;border-radius:999px;background:var(--accent-l);color:var(--accent-t);font-weight:700;font-size:12px;cursor:pointer;transition:transform .25s var(--bounce)}
.add-proof:hover{transform:scale(1.05)}.add-proof input{display:none}
/* lightbox */
.lightbox{background:#fff;border-radius:32px;width:min(920px,96vw);max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.lb-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.lb-body{overflow:auto;background:#f6f7f6;display:grid;place-items:center;min-height:200px}
.lb-body img{max-width:100%;max-height:78vh;display:block}
.lb-body iframe{width:100%;height:78vh;border:0}
/* detail */
.po-head{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.po-no{display:block;font-size:26px;font-family:var(--font-head);letter-spacing:-.02em;margin:2px 0 8px}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.po-head-r{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.po-grand{text-align:right}.po-grand b{display:block;font-size:24px;font-family:var(--font-head)}
.btn.danger{color:var(--red)}
.vcard{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.lnk{color:var(--accent-t);text-decoration:none;font-weight:700}.lnk:hover{text-decoration:underline}
.inl{padding:8px 0;border-bottom:1px dashed var(--line)}
.inl input{padding:9px 14px;border-radius:16px}
.rcv-card{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--bg);border-radius:20px;padding:14px 16px;text-decoration:none;color:inherit;transition:background .15s,transform .25s var(--bounce)}
.rcv-card small{display:block}
.rcv-card:hover{background:var(--accent-l);transform:translateX(3px)}
.progress-box{margin-bottom:14px}
.progress-box-t{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:13px;flex-wrap:wrap}
.pay{background:var(--bg);border-radius:22px;padding:14px 16px;margin-bottom:12px}
.pay-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.pay-act{display:flex;align-items:center;gap:8px}
.pay .file{background:#fff}
.pay-form{margin-top:18px;padding-top:18px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:14px}
.pay-form h4{font-family:var(--font-head);font-size:15px}
@media (max-width:1100px){.po-line{grid-template-columns:1fr 1fr}.po-line.hd{display:none}.po-line .pl-first{grid-column:1/-1}.row3{grid-template-columns:1fr}.po-stats{grid-template-columns:1fr}}
.main{min-width:0}

/* kartu ringkasan yang bisa diklik + biaya kirim */
button.stat-btn{font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer;transition:transform .25s var(--bounce),box-shadow .2s,outline-color .2s;outline:2px solid transparent}
button.stat-btn:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 14px 30px rgba(20,40,20,.12)}
button.stat-btn:active{transform:scale(.98)}
button.stat-btn.on{outline-color:var(--accent)}
.po-sums{min-width:min(100%,320px);display:flex;flex-direction:column;margin-left:auto}
.sum-row.ship{gap:16px}
.sum-row.ship label{flex-direction:row;align-items:baseline;gap:6px;white-space:nowrap}
.sum-row.ship input{width:160px;text-align:right;padding:8px 14px;border-radius:999px}

/* ekspor */
a.chip{text-decoration:none;display:inline-block}
.exp-wrap{position:relative}
.exp-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:290px;background:#fff;border-radius:28px;padding:10px;box-shadow:0 14px 36px rgba(20,40,20,.18),0 0 0 1px var(--line);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.94);transform-origin:top right;transition:opacity .15s,transform .28s var(--bounce),visibility 0s .28s}
.exp-wrap.open .exp-pop{opacity:1;visibility:visible;transform:none;transition:opacity .15s,transform .28s var(--bounce),visibility 0s}
.exp-pop button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:11px 14px;border-radius:18px;transition:background .12s,padding .2s var(--bounce)}
.exp-pop button:hover{background:var(--accent-l);padding-left:20px}
.exp-pop b{font-size:14px}.exp-pop small{color:var(--muted);font-size:12px;font-weight:500}

/* ekspor: ikon kecil di pojok kartu, bukan tombol utama */
.card-bar{display:flex;justify-content:space-between;align-items:center;margin:-6px 0 10px;font-size:13px;font-weight:600}
.card h3 .exp-wrap{font-weight:400}
.exp-btn{width:32px;height:32px;color:var(--muted)}
.exp-btn svg{width:17px;height:17px}
.exp-btn:hover,.exp-wrap.open>.exp-btn{background:var(--accent-l);color:var(--accent-t)}

/* dashboard purchase & notifikasi stok menipis */
.po-dash-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.alert-banner{display:flex;align-items:center;gap:12px;background:var(--red-l);color:#7f1d1d;border-radius:24px;padding:14px 20px;margin-bottom:20px;text-decoration:none;font-size:13px;line-height:1.4;transition:transform .25s var(--bounce),box-shadow .2s}
.alert-banner:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(224,57,62,.15)}
.alert-banner span:nth-child(2){flex:1}
.alert-banner em{font-style:normal;font-weight:800;white-space:nowrap;color:var(--red)}
.info-note.warn{background:var(--yellow-l);color:#7a4b00}
.info-note.warn svg{color:#b46f00}
.rs-act{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.vtop{margin-bottom:14px}.vtop:last-child{margin-bottom:0}
.vtop-t{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px;font-size:13px}
@media (max-width:1100px){.po-dash-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* tabel dengan pengaturan kolom: area tabel menggulir sendiri, header (termasuk ikon pengaturan) selalu terlihat */
.tbl-scroll{max-height:calc(100vh - 210px);min-height:240px;overflow:auto}
.tbl-scroll thead th{position:sticky;top:0;z-index:3;background:#fff;box-shadow:inset 0 -1px 0 var(--line);border-bottom:0}
/* kolom pengaturan menempel di sisi kanan saat tabel digulir ke samping */
.tbl-scroll thead th.th-act{right:0;z-index:5;box-shadow:inset 0 -1px 0 var(--line),-10px 0 12px -10px rgba(20,40,20,.18)}
.tbl-scroll td.go{position:sticky;right:0;z-index:2;background:#fff;box-shadow:-10px 0 12px -10px rgba(20,40,20,.18)}
.tbl-scroll tr.row-link:hover td.go,.tbl-scroll tr.row-link:focus-visible td.go{background:var(--accent-l)}

.tb-left{display:flex;align-items:center;gap:12px;min-width:0}
@media (max-width:820px){

  .topbar h1{font-size:22px}

}

.pdf-prev{margin-top:20px;padding:12px}.pdf-prev iframe{display:block;width:100%;height:calc(100vh - 260px);min-height:480px;border:0;border-radius:20px;background:#f3f5f3}

.ck{position:relative}.ck-x{margin-left:auto;border:0;background:none;color:var(--muted,#8a948a);font-size:12px;cursor:pointer;padding:2px 6px;border-radius:50%}.ck-x:hover{color:#d33;background:#fdecec}
.ct-add{display:flex;gap:8px;margin:8px 0 4px}.ct-add input{flex:1;min-width:0;padding:9px 14px;border-radius:16px;font-size:13px}.ct-add button{flex:none;width:38px;height:38px;border-radius:50%;border:0;background:var(--accent);color:var(--ink);display:grid;place-items:center;cursor:pointer}.ct-add svg{width:18px;height:18px}
.ct-n{min-width:210px}
.ct-ava{font-size:18px;font-weight:800;color:var(--accent);border-radius:50%}
/* pelanggan di tabel Sales: foto kecil bulat di samping nama */
.cust-cell{display:flex;align-items:center;gap:10px}
.cust-ava{width:32px;height:32px;border-radius:50%;background:var(--bg);color:var(--accent);display:grid;place-items:center;font-size:13px;font-weight:800;overflow:hidden;flex:none}
.cust-ava img{width:100%;height:100%;object-fit:cover;display:block}
.col-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;margin-right:-4px;scrollbar-width:thin;scrollbar-color:#cfd8cf transparent}
.col-pop-t,.col-reset,.ct-add{flex:none}
.bom-q{display:flex;align-items:center;gap:8px}.bom-q input{flex:1;min-width:0}.bom-q span{min-width:34px;font-size:13px;font-weight:700;color:var(--muted)}
.btn[disabled]{opacity:.45;pointer-events:none}

.mt{margin-top:20px}.b6{font-weight:600}.sub{margin:-8px 0 8px;font-size:12px}
.tool-r{display:flex;gap:10px;flex-wrap:wrap}.tool-r.c{align-items:center}
.lnk-card{text-decoration:none;color:inherit}.sub-t{margin:18px 0 8px;font-family:var(--font-head);font-weight:700;font-size:14px}
.chip-n{display:inline-block;min-width:22px;margin-left:8px;padding:0 7px;border-radius:99px;background:var(--bg);color:var(--muted);font-size:12px;font-weight:700;line-height:20px;text-align:center}.chip.on .chip-n{background:rgba(255,255,255,.25);color:#fff}.so-no{width:44px}.po-head-l .po-no{margin-bottom:4px}
.so-flow{padding:14px 22px;border-radius:24px}.so-flow .info-note{margin:0;padding:8px 14px;border-radius:14px;font-size:12px}.so-flow .info-note svg{width:16px;height:16px;margin-top:0}

.step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1px;position:relative;min-width:0;padding:0 4px}
.step::before{content:"";position:absolute;top:10px;right:50%;width:100%;height:2px;background:var(--line)}
.step:first-child::before{display:none}
.step.done::before{background:var(--brand)}.step.on::before{background:var(--accent)}
.step b{font-size:12px;margin-top:3px}.step.off b{color:var(--muted)}.step small{color:var(--muted);font-size:11px;line-height:1.3}.step.on small{color:var(--accent-t);font-weight:700}
.card.act{box-shadow:var(--shadow),inset 0 0 0 2px var(--accent)}.dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:800}
.so-tot{justify-content:flex-end}
.so-cancel{align-self:center;color:var(--red);font-weight:700;font-size:13px;padding:10px 16px;border-radius:999px;transition:background .15s}.so-cancel:hover{background:var(--red-l)}
@media (max-width:700px){.step{flex:0 0 33%}.step::before{display:none}}
.hide{display:none!important}
.cost-row{display:flex;gap:10px;align-items:center}.cost-row input{flex:1;min-width:0}.cost-row .btn{flex:none;white-space:nowrap}
.margin-box{display:flex;gap:12px;border-radius:20px;padding:12px 16px;background:var(--bg);font-size:13px;color:var(--muted)}.margin-box>div{flex:1;display:flex;flex-direction:column;gap:2px}.margin-box b{font-size:18px;font-family:var(--font-head);letter-spacing:-.01em}.margin-box small{font-weight:600;opacity:.85}
.margin-box.good{background:var(--brand-l);color:var(--brand)}.margin-box.bad{background:var(--red-l);color:var(--red)}
/* animasi ikon menu: jalan saat hover & saat menu terpilih (satu gerakan khas per ikon) */

.stat-btn[data-poff=unpaid],.stat-btn[data-pogo=unpaid]{background:var(--yellow-l)}.stat-btn[data-poff=unpaid] .ico,.stat-btn[data-pogo=unpaid] .ico{background:#ffe2a8}.stat-btn[data-poff=unpaid] span,.stat-btn[data-pogo=unpaid] span{color:#8a5a00}

/* jarak antar box/kontainer: seragam 20px (--gap), diatur dari induknya, bukan margin tiap elemen */
:root{--gap:20px}
#view{display:flex;flex-direction:column;gap:var(--gap)}
#view>*{margin-top:0!important;margin-bottom:0!important}
.grid,.grid.col,.grid.top{gap:var(--gap)}
.card>.card,.card>.grid,.card>.info-note{margin-top:0}
.grid>*{margin-top:0!important;margin-bottom:0!important}
.dd-find{display:none;position:absolute;left:0;top:0;bottom:0;width:calc(100% - 44px);background:transparent;border:0;border-radius:20px 0 0 20px;padding:0 0 0 14px;font:inherit;font-weight:600;color:var(--ink);outline:0;box-shadow:none}
#itemform .dd-find{padding-left:16px}
.dd.open .dd-find{display:block}
.dd.open .dd-btn>span{visibility:hidden}
.dd-find::placeholder{color:var(--muted);font-weight:500}
.dd-menu li.hl:not(.on){background:var(--accent-l)}
.dd-menu li[hidden]{display:none}
.dd-none{padding:10px 14px;color:var(--muted);font-size:13px;cursor:default}
.var-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) 36px;gap:10px;align-items:center;padding:5px 0}
.var-row.hd{font-size:12px;font-weight:700;color:var(--muted);padding-bottom:2px}
#g-var .btn{margin-top:8px}#g-var small{display:block;margin-top:10px}
@media (max-width:700px){.var-row{grid-template-columns:1fr 1fr 36px}.var-row.hd{display:none}.var-row>:first-child{grid-column:1/-1}}
.so-pick{display:grid;width:100%;margin-bottom:6px}
.emoji{overflow:hidden}.emoji img{width:100%;height:100%;object-fit:cover;display:block}
.img-up{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.img-up .emoji{width:64px;height:64px;border-radius:20px;font-size:30px}
.img-btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.img-btns small{flex-basis:100%}
.img-btns label.btn{display:inline-flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer}
.dlg{background:#fff;border-radius:28px;padding:26px;max-width:440px;width:100%;box-shadow:0 20px 60px rgba(10,20,40,.3)}
.dlg h3{font-size:18px;margin-bottom:10px}.dlg p{line-height:1.55;font-size:14px;color:var(--ink)}
.dlg-ul{margin:8px 0 10px 18px;padding:0}.dlg .op-btns{margin-top:18px;justify-content:flex-end}
.btn.danger-fill{background:var(--red);color:#fff}.btn.danger-fill:hover{background:#c0392b}
.emoji svg{width:22px;height:22px;color:var(--muted)}
/* halaman dua kolom: kolom tengah mengisi sisa lebar, kolom kanan lebar wajar (tidak gepeng) */
.g12:has(>.s8):has(>.s4){grid-template-columns:minmax(0,1fr) clamp(300px,26%,340px)}
.g12:has(>.s8):has(>.s4)>.s8,.g12:has(>.s8):has(>.s4)>.s4{grid-column:auto}
@media (max-width:1100px){.g12:has(>.s8):has(>.s4){grid-template-columns:minmax(0,1fr)}}
/* Produk & BoM: kolom "Coba hitung" dilebarkan ke kiri, kolom isian mengecil */
.g12.sim-wide:has(>.s8):has(>.s4){grid-template-columns:minmax(0,1fr) clamp(380px,42%,540px)}
@media (max-width:1100px){.g12.sim-wide:has(>.s8):has(>.s4){grid-template-columns:minmax(0,1fr)}}
tr.sel{background:var(--accent-l)}
.dash-tiles{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.dash-mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gap)}
.dash-mod h3{margin-bottom:8px}
.dm-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);text-decoration:none;color:inherit;font-size:14px;transition:padding .2s var(--bounce)}
.dm-row:last-child{border-bottom:0}.dm-row:hover{padding-left:6px}.dm-row b{text-align:right}
.dash-wide .dw-wide{grid-column:span 2}
@media (max-width:760px){.dash-wide .dw-wide{grid-column:auto}}
.dw{position:relative;display:grid}.dw>.card{height:100%}
.dw.editing>.card{outline:2px dashed var(--accent);outline-offset:-2px}.dw.editing a{pointer-events:none}
.w-x{position:absolute;top:10px;right:10px;z-index:3;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--red);box-shadow:0 2px 8px rgba(0,0,0,.18);font-size:13px;font-weight:700}
.w-x:hover{background:var(--red-l)}
.w-list{display:grid;gap:8px;margin-top:12px}.w-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:18px;background:var(--bg);font-weight:600;text-align:left;transition:background .15s}
.w-item:hover{background:var(--accent-l)}.w-item svg{width:16px;height:16px;color:var(--accent-t)}
/* mode atur widget: kartu bergoyang seperti ikon iPhone */
@keyframes wiggle{0%{transform:rotate(-1deg)}50%{transform:rotate(1deg) translateY(-.4px)}100%{transform:rotate(-1deg)}}
@keyframes wiggle2{0%{transform:rotate(1deg)}50%{transform:rotate(-1deg) translateY(-.4px)}100%{transform:rotate(1deg)}}
.dw.editing{cursor:grab;animation:wiggle .22s ease-in-out infinite;transform-origin:50% 55%}
.dw.editing:nth-child(2n){animation-name:wiggle2;animation-duration:.25s}
.dw.editing:nth-child(3n){animation-duration:.2s;animation-delay:-.07s}
.dw.editing:active{cursor:grabbing}
.dw.dragging{opacity:.45;animation:none}
@media (prefers-reduced-motion:reduce){.dw.editing{animation:none}}
/* widget dashboard modul (core/widgets.js): gaya sama dengan widget dashboard utama */
.wg{position:relative;display:grid;min-width:0}.wg>.card{height:100%;min-width:0}
.wg.wg-edit>.card{outline:2px dashed var(--accent);outline-offset:-2px}.wg.wg-edit a{pointer-events:none}
.wg-x{position:absolute;top:10px;right:10px;z-index:3;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--red);box-shadow:0 2px 8px rgba(0,0,0,.18);font-size:13px;font-weight:700}
.wg-x:hover{background:var(--red-l)}
.wg.wg-edit{cursor:grab;animation:wiggle .22s ease-in-out infinite;transform-origin:50% 55%}
.wg.wg-edit:nth-child(2n){animation-name:wiggle2;animation-duration:.25s}
.wg.wg-edit:nth-child(3n){animation-duration:.2s;animation-delay:-.07s}
.wg.wg-edit:active{cursor:grabbing}
.wg.dragging{opacity:.45;animation:none}
@media (prefers-reduced-motion:reduce){.wg.wg-edit{animation:none}}
.po-foot.nb{border-top:0;padding-top:0;margin-top:6px}
.tag.t-fn{background:#ede7fb;color:#6b46c1}.tag-pick button.t-fn{background:#ede7fb;color:#6b46c1}
/* pilihan untuk customer (grup pilihan di resep) */
.opt-grp{border:1px solid var(--line);border-radius:20px;padding:14px 16px;margin-bottom:14px}
.opt-gh{display:flex;align-items:flex-end;gap:10px;margin-bottom:6px}.opt-gh label{flex:1;min-width:0}
.opt-grp>.btn{margin-top:4px}
/* Stok Barang: tombol tampilan tabel/kartu + grid kartu */
.view-sw{display:inline-flex;background:#fff;border-radius:999px;box-shadow:inset 0 0 0 .5px #727972;padding:3px;gap:2px;align-self:center}
.view-sw button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--muted);transition:background .15s,color .15s}
.view-sw button svg{width:18px;height:18px}.view-sw button:hover{color:var(--ink)}.view-sw button.on{background:var(--accent);color:var(--ink)}
.tool-r>.col-pop-wrap{align-self:center;display:flex}.tool-r>.col-pop-wrap .icon-btn{box-shadow:inset 0 0 0 .5px #727972;background:#fff}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.pcard{position:relative;background:#fff;border-radius:24px;overflow:hidden;cursor:pointer;outline:none;display:flex;flex-direction:column;transition:transform .2s var(--bounce),box-shadow .2s}
.pcard::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 .5px #727972;pointer-events:none}
.pcard:hover,.pcard:focus-visible{transform:translateY(-3px);box-shadow:0 12px 28px rgba(20,40,20,.12)}
.pc-img{position:relative;aspect-ratio:1/1;background:var(--bg);display:grid;place-items:center;color:var(--muted)}
.pc-img>img{width:100%;height:100%;object-fit:cover;display:block}.pc-img>svg{width:44px;height:44px}
.pc-badges{position:absolute;inset:10px 10px auto 10px;display:flex;justify-content:space-between;align-items:flex-start;gap:6px;flex-wrap:wrap}
.pc-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.pc-name{font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.pc-row{display:flex;justify-content:space-between;gap:10px;font-size:13px}.pc-row>span:first-child{color:var(--muted)}.pc-row>span:last-child{text-align:right;font-weight:600}
.pc-body .bar{min-width:0}
@media (max-width:700px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.pc-body{padding:12px}}
.tools-one{padding:12px 16px;border-radius:999px}.tools-one .chips{margin:0}
.tools-one .search{min-width:0;width:150px}
@media (max-width:900px){.tools-one{border-radius:28px}}
/* Buat SO di kiri, pencarian di pojok kanan */
.so-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.so-bar .search,.so-bar-btn{height:44px;box-sizing:border-box;margin:0}
.so-bar .search{width:min(260px,100%);min-width:0;margin-left:auto}
.so-bar-btn{justify-content:center;padding-inline:20px}
.po-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
/* tombol salin nomor dokumen */
.copy-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-left:6px;border-radius:9px;color:var(--muted);vertical-align:middle;flex:none;transition:background .15s,color .15s,transform .2s var(--bounce)}
.copy-btn svg{width:15px;height:15px}
.copy-btn:hover{background:var(--line);color:var(--ink)}
.copy-btn:active{transform:scale(.88)}
.copy-btn.ok{background:var(--brand-l);color:var(--brand)}
.po-no .copy-btn{width:34px;height:34px;margin-left:8px;border-radius:11px}.po-no .copy-btn svg{width:18px;height:18px}

/* ---------- Produk & BoM, Data Produksi, Perintah kerja ---------- */
.info-card{padding:14px 16px}.info-card .info-note{margin:0;align-items:center}.info-card .info-note span{flex:1}.info-card .info-note .btn{flex:none}
.foot-note{font-size:12px;margin-top:12px}.small-note{font-size:12px;margin-top:10px;line-height:1.5}
small.pick{display:block;margin-top:4px;line-height:1.4}
.sticky-col{align-self:start;position:sticky;top:14px}
@media (max-width:1100px){.sticky-col{position:static}}
.sim h3 span{display:flex;align-items:center;gap:8px}.sim h3 svg{width:18px;height:18px;color:var(--nav)}
.sim-in{gap:10px;margin-bottom:14px}.sim-in label{font-size:12px}
.kpis{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.kpis>div{flex:1;min-width:70px;background:var(--bg);border-radius:16px;padding:8px 12px}
.kpis small{display:block;font-size:11px;color:var(--muted);font-weight:700}.kpis b{font-family:var(--font-head);font-size:17px}.kpis b.sm{font-size:12px;word-break:break-all}
.kpis.sm{margin:0}.kpis.sm>div{padding:6px 10px}.kpis.sm b{font-size:15px}
table.tbl-sm td,table.tbl-sm th{padding:8px 6px;font-size:13px}table.tbl-sm td small{font-size:11px}
ol.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:13px}ol.steps li small{display:block;color:var(--ink);opacity:.8;margin-top:2px}ol.steps .tag{font-size:10px;padding:2px 7px}
.prod-head{display:flex;align-items:center;gap:16px;padding:18px 22px}.prod-head b{font-size:18px;display:block}.prod-head .pills{margin-top:8px}
.emoji.big{width:72px;height:72px;border-radius:22px}
.opt-gh .w-code{flex:0 0 150px}.opt-gh .w-type{flex:0 0 190px}
.val-row{display:grid;grid-template-columns:minmax(0,1.3fr) 110px minmax(0,1.5fr) 74px 104px 54px 64px 32px;gap:8px;align-items:center;padding:5px 0}
.val-row.hd{font-size:11px;font-weight:700;color:var(--muted);padding-top:8px}.val-row input,.val-row select{padding:9px 11px;font-size:13px}.val-row .ck{padding:4px;justify-content:center}
.val-row input[readonly]{opacity:.65}.val-reason{grid-column:1/-2;font-size:12px!important}
@media (max-width:900px){.val-row{grid-template-columns:1fr 1fr 32px}.val-row.hd{display:none}.val-row>:nth-child(3){grid-column:1/-1}}
.tiers{display:flex;flex-direction:column;gap:8px}.tier-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 32px;gap:10px;align-items:center}
.tier-row .bom-q span{min-width:auto}
.pm{display:flex;gap:8px}.pm .dd{flex:1;min-width:0}.pm input{flex:0 0 110px}
.when{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}.when>.dd{min-width:170px}
.chk-chips{display:flex;flex-wrap:wrap;gap:6px}
.cchip{flex-direction:row;align-items:center;padding:6px 12px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:12px;cursor:pointer;gap:0}
.cchip input{position:absolute;opacity:0;width:0;height:0}.cchip.on{background:var(--accent-l);box-shadow:inset 0 0 0 1.5px var(--accent-d)}
.cchip:has(input:focus-visible){outline:2px solid var(--accent)}
.bls{display:flex;flex-direction:column;gap:10px}
.bl{border:1px solid var(--line);border-radius:20px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.bl-1{display:grid;grid-template-columns:64px 110px minmax(0,1.6fr) minmax(0,1fr) 32px;gap:8px;align-items:center}
.bl.op .bl-1{grid-template-columns:64px minmax(0,1.2fr) minmax(0,1fr) 32px}
.bl input,.bl select{padding:9px 12px;font-size:13px}.bl .seq{text-align:center;padding:9px 6px}
.bl-2{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.bl-2>.bom-q{flex:0 0 96px}.bl-2>.dd{min-width:180px;flex:0 1 230px}.bl-2 .uom{flex:0 0 90px}
.bl-res{margin-left:auto;font-size:13px}.bl-note{font-size:12px!important;background:transparent!important;padding:4px 6px!important}.bl-note:focus{background:#fff!important}
.bl-prev{padding:0 6px}.sent{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;font-weight:600;color:var(--muted)}
@media (max-width:760px){.bl-1,.bl.op .bl-1{grid-template-columns:64px 1fr 32px}.bl-1>:nth-child(n+3):not(.x-btn){grid-column:1/-1}.bl-1>.x-btn{grid-row:1;grid-column:3}}
ol.mo-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
ol.mo-steps li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 0;border-top:1px dashed var(--line)}ol.mo-steps li:first-child{border-top:0;padding-top:2px}
.st-ck{width:30px;height:30px;border-radius:50%;background:var(--bg);display:grid;place-items:center;font-weight:800;font-size:12px;color:var(--muted)}.st-ck svg{width:16px;height:16px}
li.done .st-ck{background:var(--brand-l);color:var(--brand)}li.done .st-body>div>b{text-decoration:line-through;opacity:.6}
.st-body small{display:block;margin-top:3px;line-height:1.45}.st-vr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.lnk.blk{display:block;margin:4px 0}
.dlg-f{margin-top:4px}.dlg-f select{margin-top:6px}
details summary{cursor:pointer;font-size:13px;margin-bottom:8px}
@media (max-width:760px){.opt-gh{flex-wrap:wrap}.opt-gh label,.opt-gh .w-code,.opt-gh .w-type{flex:1 1 100%}.opt-gh .x-btn{margin-left:auto}.tier-row{grid-template-columns:1fr 32px}.tier-row>:nth-child(2){grid-column:1}.pm{flex-wrap:wrap}.pm input{flex:1 1 100%}}
.dw{min-width:0}.dw>.card{min-width:0}

/* ---------- Daftar Sales Order: kartu ringkasan & kartu "Buat SO" ---------- */

/* ---------- Form Buat Sales Order ---------- */
.so-pick{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px 16px;margin:0 0 14px}
.so-pick .dd-btn,.so-pick input{background:#fff;font-size:14px;text-transform:none;letter-spacing:0}
.so-pick label{letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:700;font-size:0;gap:0}
.so-pick label .dd-btn,.so-pick label input,.so-pick label .dd-menu{font-size:14px}
.sof{--gap:24px}
.sof-sec{padding:30px 32px}
.sof-t{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px}
.sof-t h3{margin:0;font-size:17px;display:block}
.sof-t p{margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.sof-n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent-l);color:var(--accent-t);display:grid;place-items:center;font:800 13px var(--font-head);margin-top:-2px}
.sof .form{gap:18px}
.sof-contact{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted);padding:0 4px}
.sols{display:flex;flex-direction:column;gap:16px}
.sol-sub{text-align:right;padding-bottom:10px}
.sol-sub small{display:block;font-size:12px;color:var(--muted);font-weight:600}
.sol-sub b{font:700 18px var(--font-head)}
.sol .so-pick{margin:0;gap:12px}
.sof-add svg{width:16px;height:16px}
.sof-sum{padding:28px}
.sof-who{display:flex;flex-direction:column;gap:4px;margin:10px 0 18px}
.sof-who b{font-size:16px}
.sof-who span{font-size:13px}
.sof-lis{display:flex;flex-direction:column;gap:12px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sof-li{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.sof-li span{min-width:0}
.sof-li small{display:block;color:var(--muted);margin-top:2px}
.sof-li b{white-space:nowrap}
.sof-total{display:flex;justify-content:space-between;align-items:baseline;padding:18px 0 6px}
.sof-total span{font-weight:700;color:var(--muted)}
.sof-total b{font:800 24px var(--font-head)}
.sof-acts{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.sof-cancel{text-align:center;color:var(--muted);font-weight:700;font-size:13px;text-decoration:none;padding:6px}
.sof-cancel:hover{color:var(--ink)}
.sof input,.sof textarea,.sof .dd-btn{background:#fff !important;outline:0;box-shadow:inset 0 0 0 .5px #727972}
.sof input:focus,.sof textarea:focus,.sof .dd.open .dd-btn{box-shadow:inset 0 0 0 .5px #727972,0 0 0 3px var(--accent-l)}
.sof-add{margin-top:16px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:20px;color:var(--muted);font-weight:700;transition:.15s;border:0;background:var(--bg)}
.sof-add,.sof-add:hover{background:transparent;border:0}
.sof-add:hover{border-color:var(--accent-d);background:var(--accent-l);color:var(--ink)}
.sol-price{text-align:left}
tr.so-part td{padding-top:4px;padding-bottom:4px;border-bottom:0;font-size:12.5px;color:var(--muted)}
tr:has(+tr.so-part) td{border-bottom:0}
tr.so-part:not(:has(+tr.so-part)) td{border-bottom:1px solid var(--line);padding-bottom:12px}
.addon-t{padding:0;gap:10px;font-size:13px}
.addon-t i{width:18px;height:18px}
.addon{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;grid-column:1/-1;padding:4px 0;background:none;border-radius:0;box-shadow:none}
.addon-s{font-size:12px;flex:0 0 200px;margin:0}
.addon-s select{font-size:14px;width:100%}
.so-pick .addon+.addon{margin-top:-4px}
.so-pick label.addon-t{font-size:14px;color:var(--ink);font-weight:700;letter-spacing:0;text-transform:none;gap:10px}
.addon:not(.on) .addon-t{color:var(--muted)}
.sof input[type=number]{-moz-appearance:textfield;appearance:textfield}
.sof input[type=number]::-webkit-inner-spin-button,.sof input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.qty-box:focus-within{box-shadow:inset 0 0 0 .5px #727972,0 0 0 3px var(--accent-l)}
.sol-price small{display:block;font-size:12px;color:var(--muted);font-weight:600}
.sol-price b{font-size:16px;font:700 16px var(--font-head)}
.sof .qty-box input{padding:8px 0;font-size:14px}
.qty-box{flex-direction:row;align-items:center;gap:12px;background:#fff;border-radius:20px;box-shadow:inset 0 0 0 .5px #727972;font-size:14px;font-weight:600;color:var(--muted);max-width:96px;padding:0 14px}
.sol-img img{width:100%;height:100%;object-fit:cover;display:block}
.sol-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.sol-top{display:flex;align-items:center;gap:10px}
.sol-top .dd{flex:1;min-width:0}
.sol-top .x-btn{margin:0;flex:none}
.sol-qp{flex-wrap:wrap;display:flex;align-items:center;gap:22px}
.sol-main .so-pick{margin:0}
.sol-main>.sol-sub{align-self:flex-end}
.sof .sol .dd-btn,.sof .qty-box{min-height:48px;box-sizing:border-box}
.sof .qty-box input,.sof .qty-box input:focus{box-shadow:none !important;background:transparent !important;color:var(--ink);font-weight:700;text-align:left;font-size:16px;padding:0}
.sof .ck i{box-shadow:inset 0 0 0 .5px #727972;border-radius:7px}
.sof .ck input:checked+i{box-shadow:inset 0 0 0 .5px #727972}
.sof .sol .dd-btn,.sof .qty-box,.sof .sof-add,.sof .addon-s select,.sof .form input,.sof .form select{border-radius:999px}
.sof .sol .dd-btn,.sof .form input,.sof .form select{padding-left:20px;padding-right:20px}
.sof .qty-box{align-items:center;padding:0 20px}
.sof textarea{min-height:90px;border-radius:24px}
.sol{border:1px solid var(--line);border-radius:24px;display:grid;grid-template-columns:1fr;gap:0;padding:18px;overflow:visible;position:relative}
.sol:has(.dd.open){z-index:20}
.sol-img{flex:none;width:96px;height:96px;border-radius:20px;overflow:hidden;background:var(--bg);display:grid;place-items:center;min-height:120px}
.sol-img svg{color:var(--muted);width:34px;height:34px}
.sol .sol-img img{width:100%;height:100%;object-fit:cover;object-position:center}
.sol-main .addon-s select{padding-top:8px;padding-bottom:8px;font-size:13px;min-height:38px}
.sol-main .addon-s{margin-right:64px;flex:0 1 auto;margin:0}
.sof .sol-main .addon-s select:focus,.sof .sol-main .addon-s select:focus-visible,.sof .sol-main .addon-s select:hover{outline:0 !important;box-shadow:none !important;border:0 !important;background:none !important}
.sol.has-img{grid-template-columns:180px minmax(0,1fr);gap:28px}
.sol .sol-img{align-self:start;min-height:0;aspect-ratio:1/1;width:180px;height:180px;border-radius:24px}
.sol-main .addon{padding:0;justify-content:flex-start;gap:18px}
.sof .sol-main .addon-s select{width:auto;max-width:100%;min-height:0;border-radius:8px;box-shadow:none;outline:0;appearance:none;-webkit-appearance:none;color:var(--muted);cursor:pointer;padding:2px 24px 2px 4px;font-weight:500;font-size:15px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a5a00' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 2px center/16px !important}
.sof .sol-main .addon-s select:hover,.sof .sol-main .addon-s select:focus{color:var(--ink);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a5a00' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 2px center/16px !important}
.sof .addon-s .dd-btn:hover,.sof .addon-s .dd.open .dd-btn,.sof .addon-s .dd-btn:focus-visible{color:var(--ink);background:none !important;outline:0 !important}
.sof .addon-s .dd{width:auto}
.sof .addon-s{flex:0 1 auto}
.sol-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-top:14px;margin-top:2px;border-top:1px solid var(--line)}
.sol-foot .sol-price,.sol-foot .sol-sub{display:flex;flex-direction:column;gap:2px;padding:0}
.sol-foot .sol-price{text-align:left}
.sol-foot .sol-sub{text-align:right}
.sol-foot small{font-size:12px;color:var(--muted);font-weight:600}
.sol-foot .sol-price b{font-size:16px}
.sol-foot .sol-sub b{font-size:18px}
.sol-main>.sol-foot{align-self:stretch}
.g12.sof:has(>.s8):has(>.s4){grid-template-columns:minmax(0,1fr) clamp(360px,36%,500px)}
.sof .sol{border:0;border-radius:0;padding:0}
.sof .sols{gap:0}
.sof .sol+.sol{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.sof .sof-add{margin-top:24px}

.sof .dd-find,.sof .dd-find:focus{box-shadow:none !important;background:transparent !important;border-radius:999px 0 0 999px}
.sof .sol-foot{border-top:0;padding-top:4px;justify-content:flex-end;flex-direction:column;align-items:flex-end;gap:6px}
.sof .sol-foot .sol-price{flex-direction:row;align-items:baseline;gap:8px;text-align:right}
.sof .sol-foot .sol-price small{font-size:12px}
.sof .sol-foot .sol-price b{font-size:13px;font-weight:600;color:var(--muted)}
.sof .addon-s .dd-btn{background:none !important;box-shadow:none !important;outline:0 !important;border:0 !important;border-radius:8px;min-height:0;padding:2px 4px;width:auto;gap:8px;font-weight:500;color:var(--muted);font-size:13px !important}
.sof .addon-s .dd-btn svg{width:14px;height:14px}

/* ---------- Detail Sales Order ---------- */
.sd-b>b{font-size:15px}
.sd-row{display:flex;justify-content:space-between;gap:12px}
.sd-row span{color:var(--muted)}
.sd-row b{font-weight:600}
.sd{display:flex;flex-wrap:wrap;gap:0;padding:6px 8px}
.sd-b{display:flex;flex-direction:column;gap:6px;font-size:14px;flex:1 1 200px;padding:14px 20px}
.sd-b+.sd-b{border-top:0;border-left:1px solid var(--line)}
.s4 .sd{display:flex;flex-direction:column;padding:6px 22px}
.s4 .sd-b{flex:none;padding:14px 0}
.s4 .sd-b+.sd-b{border-left:0;border-top:1px solid var(--line)}
.more{position:relative}
.more summary{list-style:none;cursor:pointer;font-size:20px;line-height:1;width:40px;height:40px;box-shadow:inset 0 0 0 .5px #727972;border-radius:999px;display:grid;place-items:center}
.more summary::-webkit-details-marker{display:none}
.more-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:190px;background:#fff;border-radius:20px;padding:8px;box-shadow:0 14px 36px rgba(20,40,20,.18),0 0 0 1px var(--line);display:flex;flex-direction:column;gap:2px}
/* menu ⋯ di toolbar SO berada di tepi kiri: menu dibuka ke kanan agar tidak terpotong */
.so-bar .more-pop{left:0;right:auto}
.more-pop .btn,.more-pop .so-cancel{justify-content:flex-start;background:none;box-shadow:none;border-radius:12px;padding:10px 14px;text-align:left;font-weight:600;color:var(--ink);width:100%;display:flex}
.more-pop .so-cancel{color:var(--red)}
.more-pop .btn:hover{background:var(--bg)}
.more-pop .so-cancel:hover{background:var(--red-l)}
.so-wrap{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px;align-items:start;max-width:1440px}
.so-doc{padding:22px 26px;min-width:0;border-radius:6px}
.so-doc .card{margin:0}
/* Sales Order: kolom utama + Riwayat di kanan; toolbar aksi kiri, tahap kanan; judul, tautan, tab */
.so-main{display:flex;flex-direction:column;gap:18px;min-width:0}
.so-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.so-aside{position:sticky;top:20px}
@media (max-width:900px){.so-wrap{grid-template-columns:minmax(0,1fr)}.so-aside{position:static}}
.so-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.so-pipe{display:flex;flex-wrap:wrap;margin-left:auto}
.so-pipe span{padding:8px 18px 8px 26px;font-size:12px;font-weight:600;color:var(--muted);background:#fff;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%,12px 50%);margin-left:-6px;white-space:nowrap}
.so-pipe span:first-child{margin-left:0;padding-left:18px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%)}
.so-pipe span.done{background:var(--accent-l);color:var(--accent-t)}
.so-pipe span.on{background:var(--accent);color:var(--ink);font-weight:700}
.so-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding:0 0 18px}
.so-hl{display:flex;flex-direction:column;gap:4px}
.so-hl .po-no{display:flex;align-items:center;font-size:28px;margin:0}
.so-cust{font-size:15px}
.so-hr{display:flex;gap:28px;flex-wrap:wrap}
.so-hr>div{display:flex;flex-direction:column;gap:3px;min-width:120px}
.so-hr small{color:var(--muted);font-size:12px;font-weight:600}
.so-hr b{font-size:15px}
.so-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.so-tabs button{background:none;border:0;padding:10px 16px;font-size:14px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer}
.so-tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.so-lines{padding:0}
.so-foot{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;padding-top:14px}
.so-note{display:flex;flex-direction:column;gap:4px;max-width:420px;font-size:14px}
.so-sums{display:flex;flex-direction:column;gap:6px;min-width:260px;text-align:right}
.so-sums>div{display:flex;justify-content:space-between;gap:20px}
.so-sums span{color:var(--muted)}
.so-sums .so-grand b{font:800 20px var(--font-head)}
.so-log{padding:0}
.so-ed{display:flex;flex-direction:column;gap:14px}
.so-ed textarea{width:100%;box-sizing:border-box}
.so-ed-acts{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap}
.so-ed-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.so-ed .so-tabs{margin-top:28px}
.so-ed-cust{display:flex;flex-direction:column;gap:6px}
.so-ed-cust label{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--muted);font-weight:600}
.so-cust-pick{position:relative;display:flex;flex-direction:column}
.so-cust-pick input[data-cpick]{font-size:15px;color:var(--ink);border:0;border-bottom:1px solid var(--line);border-radius:0;padding:6px 0;background:transparent;width:100%;box-sizing:border-box}
.so-cust-list{display:none;position:absolute;top:100%;left:0;right:0;z-index:20;margin:4px 0 0;padding:6px;list-style:none;background:#fff;border-radius:12px;box-shadow:var(--shadow);max-height:260px;overflow:auto}
.so-cust-pick:focus-within .so-cust-list{display:block}
.so-cust-list li{padding:8px 10px;border-radius:8px;cursor:pointer;font-size:14px}
.so-cust-list li:hover{background:var(--accent-l)}
.so-cust-list li.so-cust-new{color:var(--accent-t);font-weight:600}
.so-ed-cust select{font-size:15px;color:var(--ink);border:0;border-bottom:1px solid var(--line);border-radius:0;padding:6px 0;background:transparent;width:100%}
.so-ed-dates{display:flex;flex-direction:column;gap:10px}
.so-ed-dates>div{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:12px;font-size:14px}
.so-ed-dates span{color:var(--muted);font-weight:600}
.so-ed-dates input{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:6px 0;background:transparent;font-size:14px}
.so-ed-table{display:flex;flex-direction:column}
.so-ed-th,.so-ed-row{display:grid;grid-template-columns:minmax(0,1fr) 90px 70px 120px 120px 32px;gap:10px;align-items:center}
.so-ed-th{font-size:12px;font-weight:700;color:var(--muted);padding:10px 0;border-bottom:1px solid var(--line)}
.so-ed-th span:nth-child(2),.so-ed-th span:nth-child(4),.so-ed-th span:nth-child(5){text-align:right}
.so-ed-qty input{text-align:right;height:auto;min-height:0;padding:4px 0;border:0;border-bottom:1px solid transparent;border-radius:0;background:transparent;box-shadow:none;font-size:14px;color:var(--ink)}
.so-ed-qty input:focus{border-bottom-color:var(--accent);outline:none}
.so-ed-row{padding:10px 0;border-bottom:1px solid var(--line)}
.so-ed-row select,.so-ed-row input{width:100%;box-sizing:border-box}
.so-ed-prod{max-width:480px;min-width:0}
.so-ed-main{display:flex;align-items:center;gap:10px;min-width:0}
.so-ed-main select,.so-ed-main .dd{flex:1;min-width:0}
.so-ed-prod .dd-btn{background:transparent;border-radius:0;border-bottom:1px solid var(--line);padding:4px 0;font-size:14px;font-weight:600}
.so-ed-prod .dd-btn:hover{background:transparent;border-bottom-color:var(--accent)}
.so-ed-thumb{width:44px;height:44px;border-radius:10px;background:var(--bg);display:grid;place-items:center;overflow:hidden;flex:none}
.so-ed-thumb img{width:100%;height:100%;object-fit:cover}
.so-ed-thumb svg{width:20px;height:20px}
.ord-line{display:flex;align-items:center;gap:10px}.ord-line + .ord-line{margin-top:8px}
.ord-thumb{width:40px;height:40px;border-radius:10px;background:var(--bg);display:grid;place-items:center;overflow:hidden;flex:none}
.ord-thumb img{width:100%;height:100%;object-fit:cover}.ord-thumb svg{width:18px;height:18px;color:var(--muted)}
.so-ed-prod .so-pick{max-width:480px}
.so-ed-price,.so-ed-sub{text-align:right;font-size:14px}
.so-ed-unit{font-size:14px}
.so-ed-add{padding:10px 0}
.so-ed-link{background:none;border:0;padding:4px 0;color:var(--accent-t);font-weight:600;cursor:pointer;font-size:14px}
.so-ed-link svg{width:16px;height:16px;vertical-align:-3px;margin-right:4px}
.so-ed-foot{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;padding-top:16px}
.so-ed-foot .so-note{flex:1 1 320px;max-width:none}
.so-ed-foot textarea{width:100%;box-sizing:border-box;height:auto;min-height:0;padding:8px 12px;font-size:14px;resize:vertical}
@media (max-width:700px){.so-ed-cols{grid-template-columns:minmax(0,1fr)}.so-ed-th{display:none}.so-ed-row{grid-template-columns:minmax(0,1fr) 90px 32px}.so-ed-unit,.so-ed-price{display:none}}
.so-log h4{margin:0 0 12px;font-size:15px}
.so-log ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.so-log li{display:flex;flex-direction:column;gap:2px;font-size:14px}

/* ---------- Konfirmasi pembayaran ---------- */

/* ---------- Responsif (HP) ---------- */
@media (max-width:760px){
  .sof-sec{padding:22px 18px}
  .sol{padding:16px}
  .sol-sub{grid-column:1/-1;text-align:left;padding:0}
}
@media (max-width:1100px){
  .g12.sof:has(>.s8):has(>.s4){grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .sol.has-img{grid-template-columns:1fr}
  .sol .sol-img{width:100%;height:auto;aspect-ratio:16/9}
  .sd-b+.sd-b{border-left:0;border-top:1px solid var(--line)}
}
/* laporan penjualan: ringkasan satu kartu & filter tanggal */
.lap-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:20px 24px}
.lap-sum>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.lap-sum small{color:var(--muted);font-weight:600;font-size:12px}
.lap-sum b{font:800 22px var(--font-head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lap-sum span{font-size:12px;color:var(--muted)}
.lap-date{flex-direction:row;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted)}
.lap-date input{width:auto;padding:8px 12px;border-radius:999px}
@media (max-width:700px){.lap-sum{grid-template-columns:1fr}}

/* grafik laporan penjualan */
.lap-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;font-weight:600;color:var(--muted);margin:-4px 0 8px}
.lap-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.lap-chart{display:block;height:auto;max-height:300px}

/* login */
.app[hidden]{display:none}
.auth{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--bg)}
.auth-card{background:#fff;border-radius:28px;box-shadow:var(--shadow);padding:32px;width:min(420px,100%);display:flex;flex-direction:column;gap:14px}
.auth-card h2{margin:0;font-size:20px}.auth-card p{margin:4px 0 0;font-size:13px;line-height:1.5}

.auth-logo{width:46px;height:46px;border-radius:16px;background:var(--accent);display:grid;place-items:center;font:800 16px var(--font-head);flex:none}
.auth-card label{font-size:13px}

.u-edit td{background:var(--bg)}.u-ed{display:flex;flex-direction:column;gap:12px;padding:6px 0}

/* ---------- halaman login ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:#fff}
.auth-side{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:48px;color:#fff;overflow:hidden;background:linear-gradient(160deg,#0057E2 0%,#0a48cc 50%,#0b2b8c 100%)}
.auth-side::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-160px;top:-120px;background:radial-gradient(circle,rgba(255,194,36,.35),rgba(255,194,36,0) 70%);pointer-events:none}
.auth-side::after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;left:-120px;bottom:-100px;background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,0) 70%);pointer-events:none}
.auth-brand{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.auth-brand b{display:block;font:800 17px var(--font-head)}.auth-brand small{display:block;font-size:12px;opacity:.8;margin-top:2px}
.auth-logo{width:48px;height:48px;border-radius:18px;background:var(--accent);color:var(--ink);display:grid;place-items:center;font:800 16px var(--font-head);flex:none;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.auth-hero{position:relative;z-index:1;max-width:460px}
.auth-hero h1{margin:0;font:800 34px/1.2 var(--font-head);letter-spacing:-.01em}
.auth-hero p{margin:14px 0 0;font-size:15px;line-height:1.6;opacity:.85}
.auth-main{display:flex;align-items:center;justify-content:center;padding:40px 24px;background:#f4f6f4}
.auth-card{width:min(400px,100%);background:#fff;border-radius:32px;padding:36px 34px;box-shadow:0 20px 60px rgba(20,40,20,.10),0 0 0 1px var(--line);display:flex;flex-direction:column;gap:22px}

.auth-head h2{margin:12px 0 0;font:800 24px/1.25 var(--font-head);color:var(--ink)}
.auth-head p{margin:8px 0 0;font-size:14px;color:var(--muted);line-height:1.55}
.auth-fields{display:flex;flex-direction:column;gap:16px}
.auth-f{display:flex;flex-direction:column;gap:6px}
.auth-f>span:first-child{font-size:13px;font-weight:700;color:var(--ink)}
.auth-f small{font-size:12px;color:var(--muted)}
.auth-in{position:relative;display:flex;align-items:center}
.auth-in input{width:100%;background:var(--bg);border-radius:18px;padding:14px 18px;font-size:15px;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .15s,background .15s}
.auth-in input:focus{background:#fff;box-shadow:inset 0 0 0 2px var(--accent)}
.auth-in input[type=password]{padding-right:52px}
.auth-eye{position:absolute;right:8px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--muted);background:transparent;transition:background .15s,color .15s}
.auth-eye:hover{background:var(--line);color:var(--ink)}.auth-eye.on{color:var(--accent-t)}
.auth-eye svg{width:18px;height:18px}
.auth-err{margin:0;background:var(--red-l);color:#8a1c1f;border-radius:16px;padding:12px 16px;font-size:13px;font-weight:600}
.auth-err[hidden]{display:none}
.auth-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--accent);color:var(--ink);border-radius:999px;padding:15px 20px;font:800 15px var(--font-head);box-shadow:0 10px 24px rgba(255,194,36,.35);transition:background .15s,transform .15s,box-shadow .15s}
.auth-btn:hover:not(:disabled){background:var(--accent-d);transform:translateY(-1px)}
.auth-btn:disabled{opacity:.75;cursor:default}
.auth-btn.busy span::after{content:"";display:inline-block;width:14px;height:14px;margin-left:10px;border-radius:50%;border:2px solid rgba(26,26,26,.25);border-top-color:var(--ink);vertical-align:-2px;animation:auth-spin .7s linear infinite}
@keyframes auth-spin{to{transform:rotate(360deg)}}
@media (max-width:860px){
  .auth{grid-template-columns:1fr}
  .auth-side{padding:28px 24px;gap:20px}
  .auth-hero h1{font-size:22px}.auth-hero p{display:none}
  .auth-main{padding:28px 16px}
  .auth-card{padding:28px 22px;border-radius:28px}
}
.auth[hidden]{display:none}
.auth{place-items:stretch;padding:0;width:100%;box-sizing:border-box;margin:0;align-items:stretch}
/* pengguna login (kanan atas): tombol Keluar muncul saat kursor di atas pill */
.user{max-width:none}
.user-out{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;padding:0;margin-left:0;border-radius:999px;background:var(--red-l);color:#8a1c1f;font-weight:700;font-size:12px;transition:max-width .35s var(--bounce),opacity .2s,padding .35s var(--bounce),margin .35s var(--bounce)}
.user:hover .user-out,.user:focus-visible .user-out,.user:focus-within .user-out{max-width:90px;opacity:1;padding:7px 12px;margin-left:10px}
.user-out:hover{background:#fbd0d0}

/* beranda: ikon modul seperti layar utama HP */
.home{display:flex;flex-direction:column;gap:28px;padding:8px 0 32px}

.home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:34px 18px;justify-items:center;max-width:760px}
.home-app{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:var(--ink);width:100%}
.home-ic{width:80px;height:80px;border-radius:24px;display:grid;place-items:center;transition:transform .2s var(--bounce),filter .2s}
.home-ic svg{width:36px;height:36px;color:#fff}
.home-app:hover .home-ic,.home-app:focus-visible .home-ic{transform:translateY(-3px) scale(1.04);filter:brightness(1.05)}
.home-app:active .home-ic{transform:scale(.96)}
.home-lb{font-size:13px;font-weight:600;text-align:center;line-height:1.3}

/* beranda: ikon dan sapaan rata tengah di layar */
.home{min-height:72vh;justify-content:center;align-items:center;text-align:center}
.home-grid{margin:0 auto;width:100%}
.home-app{align-items:center}
/* tombol Beranda dan tab modul di topbar */
.tb-home{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:var(--shadow);color:var(--ink);flex:none;margin-right:14px}
.tb-home svg{width:20px;height:20px}
.tb-home:hover{background:var(--accent-l)}
.tb-ic,.tb-back{display:inline-flex;align-items:center;justify-content:center}
.tb-home .tb-back{display:none}
.tb-home:hover .tb-back{display:inline-flex}
.tb-home:hover .tb-ic{display:none}
.mod-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.mod-tabs .chip.on{background:var(--accent);box-shadow:none}

.tb-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.tb-row .mod-tabs{margin-top:0}
/* sub menu modul: teks biasa, halaman aktif diberi garis kuning di bawahnya */
.tb-row .mod-tabs{gap:18px;align-items:center}
.tb-row .mod-tabs .chip{background:none;box-shadow:none;border-radius:0;padding:4px 0;font-size:14px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent}
.tb-row .mod-tabs .chip:hover{color:var(--ink)}
.tb-row .mod-tabs .chip.on{background:none;box-shadow:none;color:var(--ink);border-bottom-color:var(--accent)}
/* nama modul di topbar: tautan ke halaman awal modul (dashboard bila ada), garis bawah saat aktif */
.tb-row h1 a{color:inherit;text-decoration:none;display:inline-block;border-bottom:3px solid transparent;line-height:1.2}
.tb-row h1 a.on{border-bottom-color:var(--accent)}
/* nama modul: lebih kecil, tetap tebal, sejajar dengan tombol ikon */
.tb-row h1{font-size:18px;font-weight:800;line-height:1.2;margin:0}
.tb-left>div{display:flex;flex-direction:column;justify-content:center}
.tb-left{gap:0}
.tb-left .tb-home{margin-right:6px}
/* pager tabel: minimalis, teks saja */
.tb-pager{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin:0 0 10px;padding:0;background:none;border:0;box-shadow:none;font-size:12px;color:var(--muted)}
.tb-range{font-weight:600}
.tb-nav{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--ink)}
.tb-nav button{background:none;border:0;padding:2px 6px;font-size:16px;line-height:1;color:var(--muted);border-radius:6px}
.tb-nav button:hover:not(:disabled){color:var(--ink);background:var(--bg)}
.tb-nav button:disabled{opacity:.3;cursor:default}
/* semua tabel: tinggi dibatasi, header menempel saat digulir */
.tbl-wrap.tbl-all{max-height:calc(100vh - 230px);overflow:auto}
.tbl-wrap.tbl-all thead th{position:sticky;top:0;z-index:2;background:#fff}
/* bar di atas tabel: pager + tombol "Atur kolom" */
.tb-bar{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px;margin:0 0 10px}
.tb-bar .tb-pager{margin:0}
.tb-bar .col-pop-wrap{position:relative}
.tb-bar .col-pop-wrap .icon-btn{width:36px;height:36px;padding:0;border-radius:999px;box-shadow:none;background:none;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink)}
.tb-bar .col-pop-wrap .icon-btn svg{width:16px;height:16px}
.tb-bar .col-pop-wrap .icon-btn:hover{background:var(--bg)}
.tb-bar .search{min-width:0;width:260px;margin-right:auto;box-sizing:border-box}
/* kartu tabel tanpa judul: bar informasi tabel atau tabel itu sendiri naik mendekati tepi atas kartu */
.card:has(>.tb-bar:first-child),.card:has(>.tbl-wrap:first-child){padding-top:12px}
/* pengaturan kolom di kepala tabel: ikon kecil di ujung kanan header, sejajar dengan judul kolom */
thead .th-act .col-pop-wrap{display:flex;justify-content:flex-end}
thead .th-act .icon-btn{width:30px;height:30px;padding:0;border-radius:999px;background:none;box-shadow:none;display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
thead .th-act .icon-btn svg{width:16px;height:16px}
thead .th-act .icon-btn:hover{background:var(--bg)}
/* kartu tabel daftar diisi sampai bawah layar: tabel mengisi sisa tinggi kartu, header tabel tetap terlihat saat digulir */
.card.fill-card{display:flex;flex-direction:column;min-height:0}
.card.fill-card>.tbl-wrap.tbl-all{flex:1 1 auto;min-height:0;max-height:none}
/* Pergerakan Barang: tab teks Barang masuk / Barang keluar */

/* sub menu Pergerakan Barang: muncul saat kursor di atasnya */
.tab-drop{position:relative;display:inline-flex}
.tab-menu{position:absolute;top:100%;left:0;min-width:180px;background:#fff;border-radius:16px;box-shadow:0 14px 36px rgba(20,40,20,.18),0 0 0 1px var(--line);padding:6px;margin-top:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .15s,transform .25s var(--bounce),visibility 0s .25s;z-index:30}
.tab-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.tab-drop:hover .tab-menu,.tab-drop:focus-within .tab-menu{opacity:1;visibility:visible;transform:none;transition:opacity .15s,transform .25s var(--bounce),visibility 0s}
.tab-menu a{display:block;padding:9px 12px;border-radius:12px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;background:none}
.tab-menu a:hover{background:var(--bg)}
.tab-menu a.on{background:var(--accent-l)}
.pg-title{margin:0 0 14px;font-size:18px;font-weight:500;color:var(--ink)}

/* menu tab yang melebar ke kiri/kanan tidak boleh membuat halaman bisa digeser ke samping di layar kecil */
@media (max-width:820px){.tab-menu{left:auto;right:0}}
/* area sentuh minimal 44 px di layar sentuh */
@media (pointer:coarse){.chip{min-height:44px;display:inline-flex;align-items:center}.icon-btn,.copy-btn,.x-btn{min-width:44px;min-height:44px}}
/* gerak dikurangi untuk pengguna yang memintanya di sistem operasi */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* teks khusus pembaca layar: tidak terlihat tetapi tetap dibaca */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}