/* ===== STOCK ===== */
.stk{display:flex;flex-direction:column;gap:16px}
.stk .panel{margin:0}
.stk-top{display:flex;align-items:center;gap:12px}
.stk-demo{flex:1;background:#FEF3C7;color:#78350F;border:1px solid #FCD34D;border-radius:10px;padding:8px 12px;font-size:12.5px}
.stk-add2{margin-left:auto;height:40px;padding:0 14px;border-radius:10px;font-weight:700;white-space:nowrap}
.stk-add{height:40px;padding:0 18px;border-radius:10px;font-weight:800;white-space:nowrap}
.stk-red{color:#B91C1C}

/* KPI */
.stk-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.stk-k{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:14px 16px;font-family:inherit;color:var(--text)}
button.stk-k{cursor:pointer;transition:transform .12s,box-shadow .12s}
button.stk-k:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(15,23,42,.10)}
.stk-k .l{font-size:11.5px;font-weight:700;color:var(--muted)}
.stk-k b{font-family:var(--mono);font-size:26px;font-weight:800;line-height:1.2;letter-spacing:-.5px}
.stk-k small{font-size:11px;color:var(--muted)}
.stk-k.warn{background:var(--warn-bg);border-color:#F3D9AE}.stk-k.warn b{color:#9A5A00}
.stk-k.stop{background:var(--stop-bg);border-color:#F3CACA}.stk-k.stop b{color:#B91C1C}
.stk-k.wait{background:#F3EEFE;border-color:#DDD0FB}.stk-k.wait b{color:#6D28D9}
.stk-k.on{outline:2px solid var(--color-accent);outline-offset:1px}
/* Product ID กดคัดลอก */
.stk-copy{display:inline-flex;align-items:center;gap:4px;padding:1px 5px;margin-left:-5px;border:0;border-radius:5px;background:transparent;font:inherit;font-family:var(--mono);color:inherit;cursor:copy;transition:background .12s,color .12s}
.stk-copy .ci{font-size:11px;opacity:0;transition:opacity .12s}
.stk-copy:hover{background:#E8EFFD;color:#1D4ED8}
.stk-copy:hover .ci{opacity:1}
.stk-copy.stk-copied{background:#CFF1E4;color:#0F766E}
.stk-copy.stk-copied .ci{opacity:1}
/* แถวที่เพิ่งคัดลอก Product ID: ไฮไลต์ทั้งแถวแล้วค่อยจางลง (ทับสีไฮไลต์สินค้าชั่วคราว) */
@keyframes stkCopied{0%,55%{background-color:#DDF5EC;box-shadow:inset 3px 0 0 #10B981}100%{background-color:transparent;box-shadow:inset 3px 0 0 transparent}}
.stk-table tr.stk-copied td,.stk-ro.stk-copied,.stk-dhd.stk-copied{animation:stkCopied 1.6s ease-out}
.stk-table tr.stk-copied td:not(:first-child){box-shadow:none!important}
@media(prefers-reduced-motion:reduce){.stk-table tr.stk-copied td,.stk-ro.stk-copied,.stk-dhd.stk-copied{animation:none;background-color:#DDF5EC}}
.stk-dhd .stk-copy{font-size:12px;color:var(--muted)}
.stk-ro .stk-copy:not(.is-copied):not(:hover) .ci{display:none}
/* แถวที่คัดลอกล่าสุด: Product ID เป็นป้ายเขียว ✓ + แถบเขียวซ้าย + พื้นเขียวจาง ค้างไว้จนกว่าจะคัดลอกตัวอื่น */
.stk-copy.is-copied,.stk-dhd .stk-copy.is-copied{background:#10B981;color:#fff;font-weight:700;padding:2px 8px;border-radius:999px;margin-left:-3px;box-shadow:0 2px 6px -2px rgba(16,185,129,.6)}
.stk-copy.is-copied .ci{opacity:1;font-size:11px;font-weight:900}
.stk-copy.is-copied:hover{background:#0E9F6E;color:#fff}
.stk-table tr.stk-cprow td{background-image:linear-gradient(rgba(16,185,129,.09),rgba(16,185,129,.09))}
.stk-table tr.stk-cprow td:first-child{box-shadow:inset 4px 0 0 #10B981}
.stk-ro.stk-cprow{background-image:linear-gradient(rgba(16,185,129,.09),rgba(16,185,129,.09));box-shadow:inset 4px 0 0 #10B981}
.stk-dhd.stk-cprow{box-shadow:inset 4px 0 0 #10B981}
.stk-col{display:flex;flex-direction:column;gap:16px;min-width:0}
/* ความเคลื่อนไหวล่าสุด (ทุกสินค้า) */
.stk-feed{padding:4px 10px 8px!important}
.stk-fd{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid var(--border);cursor:pointer;border-radius:8px}
.stk-fd:last-child{border-bottom:0}
.stk-fd:hover{background:#F7F8FA}
.stk-fd .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:13px;font-weight:800}
.stk-fd.in .ic{background:#E6F6F2;color:#0F766E}
.stk-fd.out .ic{background:#E8EFFD;color:#2F5BC4}
.stk-fd.adj .ic{background:#F3EEFE;color:#6D28D9}
.stk-fd .nm{display:flex;flex-direction:column;min-width:0}
.stk-fd .nm b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stk-fd .nm small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stk-fd .q{font-family:var(--mono);font-weight:800;font-size:13px;text-align:right;white-space:nowrap}
.stk-fd .q small{font-weight:600;color:var(--muted);font-size:10.5px}
.stk-fd.in .q{color:#0F766E}.stk-fd.adj .q{color:#6D28D9}
.stk-fsum{display:flex;gap:6px;flex-wrap:wrap;padding:10px 16px 0}
.stk-fsum span{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:#F1F3F5;color:#475569}

/* แผงหลัก */
.stk-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}

/* ต้องสั่งซื้อ */
.stk-ro-list{padding:6px 10px 10px!important}
.stk-ro{display:grid;grid-template-columns:10px minmax(0,1fr) 110px 92px 120px;align-items:center;gap:12px;padding:10px 8px;border-bottom:1px solid var(--border);cursor:pointer;border-radius:8px}
.stk-ro:last-of-type{border-bottom:0}
.stk-ro:hover{background:#F7F8FA}
.stk-ro .dot{width:10px;height:10px;border-radius:50%}
.stk-ro .nm{display:flex;flex-direction:column;min-width:0}
.stk-ro .nm b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stk-ro .nm small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stk-ro small{font-size:11px;color:var(--muted)}
.stk-ro .q{display:flex;flex-direction:column;align-items:flex-end}
.stk-ro .q b{font-family:var(--mono);font-size:16px}
.stk-ro .cv{font-size:12px;color:var(--muted);text-align:right}
.stk-ro .cv b{color:var(--text)}
.stk-ro .act{text-align:right}
.stk-order{font-size:12px;font-weight:800;color:#9A5A00;white-space:nowrap}
.stk-haspr{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;background:var(--done-bg);color:#1D4ED8;font-size:11.5px;font-weight:700;white-space:nowrap}
.stk-wait{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:999px;background:#F3EEFE;color:#6D28D9;font-size:11.5px;font-weight:700;white-space:nowrap}
.stk-more{margin:8px auto 0;display:flex}
.stk-allgood{padding:22px;text-align:center;color:#0F7A36;font-weight:700}

/* สถานะ */
.stk-bar{display:flex;gap:2px;height:16px;border-radius:6px;overflow:hidden}
.stk-seg{cursor:pointer;min-width:4px;transition:filter .12s}
.stk-seg:hover{filter:brightness(1.1)}
.stk-legs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}
.stk-leg{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);border-radius:9px;background:#fff;font-family:inherit;font-size:12.5px;color:var(--text);cursor:pointer;text-align:left}
.stk-leg:hover{border-color:var(--border-2);background:#F7F8FA}
.stk-leg i{width:10px;height:10px;border-radius:3px;flex:none}
.stk-leg span{flex:1}
.stk-leg b{font-family:var(--mono);font-size:15px}
.stk-svg{display:block;max-width:100%}

/* ตาราง */
.stk .fpanel{margin:0}
.stk-table td{vertical-align:middle}
.stk-table .r{text-align:right}
.stk-table tbody tr{transition:filter .12s}
.stk-table tbody tr:hover{filter:brightness(.97)}
.stk-table tbody tr.stk-sel{box-shadow:inset 3px 0 0 var(--color-accent)}
.stk-pid{color:var(--muted);font-size:12px;white-space:nowrap}
.stk-name{min-width:220px}
.stk-name b{font-weight:700}
.stk-note{margin-left:6px;font-size:12px;cursor:help}
.stk-sup{font-size:12px;color:#374151;min-width:150px}
.stk-q{font-family:var(--mono);font-size:13.5px}
.stk-q small{font-size:11px;color:var(--muted);font-weight:600}
.stk-mm{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
.stk-nodata{color:var(--muted);font-size:12.5px}
.stk-oq{color:#9A5A00;font-family:var(--mono)}
.stk-upd{font-size:12px;color:#374151;white-space:nowrap}
.stk-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
.stk-gauge{position:relative;height:6px;background:#E5E7EB;border-radius:3px;min-width:110px;margin-top:4px}
.stk-gauge .f{position:absolute;left:0;top:0;bottom:0;border-radius:3px}
.stk-gauge .mk{position:absolute;top:-3px;bottom:-3px;width:2px;background:#1A1A1A;border-radius:1px;margin-left:-1px}
.stk-stale{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:#EEF0F3;color:#475569;font-size:10.5px;font-weight:700}

/* แผงด้านขวา */
.stk-dov{position:fixed;inset:0;z-index:85;background:rgba(15,23,42,.38);opacity:0;pointer-events:none;transition:opacity .2s}
.stk-dov.show{opacity:1;pointer-events:auto}
.stk-drawer{position:absolute;top:0;right:0;bottom:0;width:min(560px,100vw);background:#F4F5F8;box-shadow:-12px 0 40px rgba(15,23,42,.18);overflow-y:auto;transform:translateX(100%);transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.stk-dov.show .stk-drawer{transform:none}
@media(prefers-reduced-motion:reduce){.stk-dov,.stk-drawer{transition:none}}
.stk-dhd{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;gap:12px;padding:18px 22px 14px;background:#fff;border-bottom:1px solid var(--border)}
.stk-dhd h2{margin:0 0 4px;font-size:17px;line-height:1.35}
.stk-dhd .mono{font-size:12px;color:var(--muted)}
.stk-dhd .muted{font-size:12px}
.stk-dhd .x{margin-left:auto;border:0;background:#F0EEEE;width:32px;height:32px;border-radius:8px;font-size:18px;color:var(--muted);cursor:pointer;flex:none}
.stk-dhd .x:hover{background:#E5E2E2;color:var(--text)}
.stk-dbody{padding:14px 16px 28px;display:flex;flex-direction:column;gap:12px}
.stk-dsec{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.stk-dsec h3{margin:0;font-size:13.5px;font-weight:800}
.stk-dst{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stk-chk{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border:1px dashed #C4B5FD;border-radius:10px;background:#FAF7FF;font-size:12.5px;cursor:pointer}
.stk-chk.on{border-style:solid;background:#F3EEFE}
.stk-chk input{width:16px;height:16px;margin-top:1px;accent-color:#7C3AED}
.stk-dk{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stk-dk>div{background:#F7F8FA;border:1px solid var(--border);border-radius:10px;padding:9px 11px;display:flex;flex-direction:column;gap:2px;min-width:0}
.stk-dk span{font-size:10.5px;color:var(--muted);font-weight:700}
.stk-dk b{font-family:var(--mono);font-size:16px}
.stk-dk small{font-size:11px;color:var(--muted)}
.stk-upd2{font-size:12px;color:var(--muted)}
.stk-upd2 b{color:var(--text)}
.stk-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.stk-f>span{font-size:12px;font-weight:700}
.stk-f input,.stk-f select,.stk-f textarea{width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid var(--border-2);border-radius:8px;font-family:inherit;font-size:13px;background:#fff;color:var(--text)}
.stk-f textarea{resize:vertical}
.stk-f input:focus,.stk-f select:focus,.stk-f textarea:focus{outline:2px solid var(--color-accent-a26,rgba(0,0,0,.15));border-color:var(--color-accent)}
.stk-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stk-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stk-row{display:flex;align-items:flex-end;gap:10px}
.stk-row .stk-f{flex:1}
.stk-row .btn{height:38px}
.stk-act{display:flex;gap:8px}
.stk-calc{background:#F7F8FA;border:1px solid var(--border);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px}
.stk-calc-h{font-size:12.5px;font-weight:800}
.stk-calc-h small{font-weight:500;color:var(--muted);margin-left:4px}
.stk-calc-out{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
.stk-calc-out small{flex-basis:100%;font-size:11px;color:var(--muted)}
.stk-hi{display:flex;flex-wrap:wrap;gap:9px}
.stk-hi button{width:28px;height:28px;border-radius:50%;border:0;background:var(--hc);cursor:pointer;color:#6B7280;font-size:13px;box-shadow:0 0 0 2px #fff,0 0 0 3px transparent;transition:transform .1s}
.stk-hi button:hover{transform:scale(1.1)}
.stk-hi button.on{box-shadow:0 0 0 2px #fff,0 0 0 4px #1A1A1A}
.stk-mv{max-height:260px;overflow:auto;border:1px solid var(--border);border-radius:10px}
.stk-mv .r{display:grid;grid-template-columns:86px 60px minmax(0,1fr) 56px;gap:8px;padding:7px 12px;border-bottom:1px solid var(--border);font-size:12.5px;align-items:center}
.stk-mv .r:last-child{border-bottom:0}
.stk-mv .d{font-family:var(--mono);color:var(--muted)}
.stk-mv .t{font-weight:700}
.stk-mv .r.in .t,.stk-mv .r.in b{color:#0F766E}
.stk-mv .r.adj .t,.stk-mv .r.adj b{color:#6D28D9}
.stk-mv .ref{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stk-mv b{font-family:var(--mono);text-align:right}

@media(max-width:1100px){.stk-kpis{grid-template-columns:repeat(3,1fr)}.stk-grid{grid-template-columns:1fr}}
@media(max-width:720px){
  .stk-top{flex-wrap:wrap}.stk-add{width:100%;justify-content:center}
  .stk-kpis{grid-template-columns:1fr 1fr}
  .stk-ro{grid-template-columns:10px minmax(0,1fr) auto;row-gap:6px}
  .stk-ro .cv{grid-column:2;text-align:left}.stk-ro .act{grid-column:3}
  .stk-dk{grid-template-columns:1fr 1fr}
  .stk-3{grid-template-columns:1fr 1fr}
}

/* วางความเคลื่อนไหว */
.stk-sh{display:flex;align-items:center;gap:8px}
.stk-sh .btn{margin-left:auto}
.stk-pdef{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;margin-bottom:12px;padding:10px 12px;background:#FAF7F7;border-radius:8px;border:1px dashed var(--border-2)}
.stk-padj{display:flex;align-items:center;gap:6px;font-size:12.5px;cursor:pointer;padding-bottom:8px}
.stk-padj input{width:15px;height:15px}
@media(max-width:720px){.stk-add2{width:100%;justify-content:center;margin-left:0}}
/* สลับโหมดวาง: ความเคลื่อนไหว / รายการสินค้า */
.stk-pmodes{display:flex;gap:2px;padding:3px;border-radius:10px;background:#EEF0F3;width:max-content;max-width:100%;margin-bottom:12px}
.stk-pmodes:empty{display:none}
.stk-pmodes button{border:0;background:none;padding:7px 14px;border-radius:8px;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer}
.stk-pmodes button.on{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(15,23,42,.14)}