/* รอบ 35: ใบสั่งซื้อ (/purchase-orders + Components/PoEditor.razor + PoReceive.razor + PoPrint.razor)
   - โครง .fit ของ fit.css + ชิปช่วงเวลา/ตัวกรอง/ช่องจ่ายจากของ expenses.css (.exp-periods, .exp-chip, .exp-toast, .exp-pfseg) + .pl-branch
   - ใช้ชิ้นส่วนกลางของ quotes.css ซ้ำ (.qt-ed-* โครงฟอร์ม, .qt-in, .qt-ico-btn, .qt-presults, .qt-d-*, .qt-st-btn, .qt-confirm, .qt-sum-row)
   - สีสถานะมาจากตัวแปร --ps (ตั้งด้วยคลาส .ps-<status>) ใช้ตัวแปรธีม จึงใช้กับโหมดมืดได้ (override ท้ายไฟล์)
   - เอกสารพิมพ์ใช้กระดาษ .dbt-paper ของ credit.css (ขาวเสมอ) + ส่วนเสริม .po-p* ที่นี่
   - พิมพ์: html[data-print="po"] → พิมพ์เฉพาะ .po-print บนกระดาษ A4 (ผูกด้วย :has() จึงไม่กระทบการพิมพ์หน้าอื่น) */

@media screen {
  /* ---------- สีสถานะ ---------- */
  .ps-draft { --ps: var(--muted); }
  .ps-ordered { --ps: #2F6FB3; }
  .ps-partial { --ps: #B7791F; }
  .ps-received { --ps: var(--ok); }
  .ps-closed { --ps: #0F766E; }
  .ps-cancelled { --ps: #8A817A; }
  .ps-open { --ps: var(--brand); }
  .ps-late { --ps: var(--danger); }
  .ps-all { --ps: var(--ink); }

  .po-st {
    display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px; border-radius: 999px; white-space: nowrap;
    font-size: .78rem; font-weight: 700; color: var(--ps); background: color-mix(in srgb, var(--ps) 13%, transparent);
  }
  .po-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ps); }
  .po-st.ps-cancelled { text-decoration: line-through; text-decoration-thickness: 1.5px; }
  .po-dot { flex: none; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ps, var(--muted)); }
  .po-late {
    display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; white-space: nowrap;
    background: var(--danger-soft); color: var(--danger); font-size: .72rem; font-weight: 700;
  }

  /* ---------- หัว + แถบช่วงเวลา ---------- */
  .po-tools { gap: 8px; }
  .po-search { width: 250px; }
  .po-add-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; }
  .po-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
  .po-bar-note { margin-left: auto; font-size: .8rem; }
  .po-sup-filter {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; max-width: 100%;
    border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted);
  }
  .po-sup-filter:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
  .po-sup-filter select { min-width: 0; max-width: 220px; padding: 6px 2px; border: 0; outline: 0; background: none; color: var(--ink); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; }

  /* ---------- ตัวเลขสรุป ---------- */
  .po-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .po-stats .fit-stat small { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .po-stat-open { background: var(--brand); color: var(--brand-ink); }
  .po-stat-open.fit-stat.hl strong { color: var(--brand-ink); }
  .po-stat-open > span, .po-stat-open > small { color: var(--brand-ink); opacity: .85; }
  .po-stat-late.bad { box-shadow: var(--shadow), inset 3px 0 0 var(--danger); }
  .po-stat-late.bad strong { color: var(--danger); }
  .po-stat-recv { box-shadow: var(--shadow), inset 3px 0 0 var(--ok); }

  /* ---------- รายการ ---------- */
  .panel.po-main { padding: 12px 14px 6px; }
  .po-chip { --cat: var(--ps, var(--ink)); }
  .po-chip.on { border-color: var(--ps, var(--ink)); background: color-mix(in srgb, var(--ps, var(--ink)) 12%, var(--surface)); }
  .po-scroll.table-wrap { border: 0; border-radius: 0; background: transparent; }
  .po-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  .po-table th { padding: 9px 12px; white-space: nowrap; }
  .po-table tr:last-child td { border-bottom: 0; }
  .po-row { cursor: pointer; }
  .po-row:hover td { background: var(--brand-tint); }
  .po-row.open td { background: var(--brand-soft); }
  .po-c-no { white-space: nowrap; }
  .po-c-no strong { font-weight: 700; font-size: .9rem; }
  .po-c-date { white-space: nowrap; color: var(--muted); font-size: .86rem; }
  .po-c-sup { max-width: 320px; }
  .po-sup-name { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .po-c-sup small { display: block; font-size: .78rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .po-br-inline { display: none !important; }
  .po-c-branch { white-space: nowrap; font-size: .88rem; }
  .po-c-exp { white-space: nowrap; font-size: .86rem; }
  .po-c-exp .po-late { margin-left: 6px; }
  .po-exp-label { display: none; }
  .po-row.late .po-c-exp > span:nth-child(2) { color: var(--danger); font-weight: 700; }
  .po-c-items { color: var(--muted); width: 70px; }
  .po-c-total { white-space: nowrap; }
  .po-c-total strong { font-weight: 700; }
  .po-c-prog { width: 130px; white-space: nowrap; }
  .po-c-prog small { margin-left: 8px; font-size: .78rem; color: var(--muted); }
  .po-prog {
    display: inline-block; vertical-align: middle; width: 70px; height: 7px; border-radius: 999px; overflow: hidden;
    background: var(--chip); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 60%, transparent);
  }
  .po-prog > i { display: block; height: 100%; border-radius: inherit; background: var(--ps, var(--ok)); min-width: 0; }
  .po-prog.big { display: block; width: 100%; height: 10px; }
  .po-c-status { white-space: nowrap; }
  .po-c-act { width: 52px; padding-left: 0 !important; text-align: center; }
  .po-row.ps-cancelled td { color: var(--muted); }
  .po-row.ps-cancelled .po-c-total strong { text-decoration: line-through; }
  .qt-ico-btn.po-recv-ico { color: var(--ok); background: var(--ok-soft); }
  .qt-ico-btn.po-recv-ico:hover { background: color-mix(in srgb, var(--ok) 20%, var(--surface)); }
  .po-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; border: 0; margin: auto 0; }
  .po-empty p { margin: 0; }
  .po-empty-ico { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 20px; background: var(--brand-soft); color: var(--brand-strong, var(--brand)); }
  .po-mbar { display: none; }

  /* ---------- ลิ้นชักรายละเอียด ---------- */
  .drw-sub .po-st, .drw-sub .po-late { margin-right: 2px; }
  .po-d-prog { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-radius: 14px; background: var(--chip); }
  .po-d-prog-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: .84rem; }
  .po-d-prog-top span { color: var(--muted); }
  .po-d-prog-top strong { font-size: .88rem; text-align: right; }
  .po-d-prog .po-prog { background: var(--surface); }
  .qt-st-btn.po-st-ordered { --qs: #2F6FB3; border-color: #2F6FB3; background: color-mix(in srgb, #2F6FB3 10%, var(--surface)); color: #2F6FB3; }
  .qt-st-btn.po-st-draft { --qs: var(--muted); }
  .qt-st-btn.po-st-closed { --qs: #0F766E; }
  .po-st-ordered .po-dot { background: #2F6FB3; }
  .po-st-draft .po-dot { background: var(--muted); }
  .po-st-closed .po-dot { background: #0F766E; }
  .po-d-lines li.done .qt-d-line-main strong { color: var(--muted); }
  .po-qtys { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
  .po-q { display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap; background: var(--chip); color: var(--muted); font-variant-numeric: tabular-nums; }
  .po-q.rcv { background: var(--ok-soft); color: var(--ok); }
  .po-q.rem { background: var(--warn-soft); color: var(--warn-text, #7a5300); }
  .po-q.full { background: var(--ok-soft); color: var(--ok); }
  .po-rcpts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .po-rcpts li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; }
  .po-rcpt-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--ok-soft); color: var(--ok); }
  .po-rcpt-main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
  .po-rcpt-main strong { font-size: .9rem; }
  .po-rcpt-main small { font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .po-rcpt-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; line-height: 1.3; }
  .po-rcpt-side strong { font-size: .9rem; }
  .po-rcpt-side small { font-size: .74rem; }
  .po-bill-tag { display: inline-flex; padding: 0 8px; border-radius: 999px; background: color-mix(in srgb, #2F6FB3 12%, var(--surface)); color: #2F6FB3; font-size: .72rem; font-weight: 700; }
  .drw-foot .po-foot-recv { display: inline-flex; align-items: center; gap: 6px; }

  /* ---------- ฟอร์มสร้าง/แก้ไข (ต่อยอด .qt-ed-* ของ quotes.css) ---------- */
  .po-ed .qt-ed-tools .btn { min-height: 42px; }
  .po-save-order { min-width: 150px; }
  .po-suggest-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 42px; white-space: nowrap; }
  .po-lines-wrap.table-wrap { border: 0; border-radius: 0; background: transparent; }
  .po-lines th { padding: 8px 6px; font-size: .8rem; white-space: nowrap; }
  .po-lines td { padding: 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
  .po-lines tr:last-child td { border-bottom: 0; }
  .po-lines .po-l-no { width: 30px; text-align: center; color: var(--muted); padding-top: 14px; font-size: .84rem; }
  .po-lines .po-l-prod { min-width: 200px; padding-top: 9px; }
  .po-l-name { display: block; font-weight: 600; font-size: .92rem; line-height: 1.3; overflow-wrap: anywhere; }
  .po-l-prod small { display: block; font-size: .74rem; line-height: 1.35; }
  .po-lines .po-l-unit { width: 110px; }
  .po-lines .po-l-qty { width: 92px; }
  .po-lines .po-l-cost { width: 130px; }
  .po-lines .po-l-amt { width: 130px; padding-top: 14px; white-space: nowrap; font-size: .92rem; }
  .po-lines .po-l-act { width: 72px; }
  .po-lines select.qt-in { padding-right: 4px; }
  .po-sup-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--brand-tint); border: 1px solid var(--brand-soft); }
  .po-sup-ava { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-weight: 700; }
  .po-sup-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
  .po-sup-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .po-sup-text small { font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .po-credit { flex: none; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, #2F6FB3 12%, var(--surface)); color: #2F6FB3; font-size: .74rem; font-weight: 700; white-space: nowrap; }
  .po-credit.cash { background: var(--chip); color: var(--muted); }
  .po-ed-mbar { display: none; }

  /* ---------- ป๊อปอัปสินค้าใกล้หมด ---------- */
  .po-sg { display: flex; flex-direction: column; gap: 10px; }
  .po-sg-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
  .po-check { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; cursor: pointer; }
  .po-check input { width: 18px; height: 18px; accent-color: var(--brand); margin: 0; }
  .po-sg-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 12px; background: var(--chip); font-size: .86rem; }
  .po-sg-wrap.table-wrap { max-height: min(52vh, 520px); overflow: auto; }
  .po-sg-table th { padding: 8px 10px; font-size: .8rem; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
  .po-sg-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  .po-sg-c-chk { width: 36px; text-align: center; }
  .po-sg-c-chk input { width: 18px; height: 18px; accent-color: var(--brand); margin: 0; }
  .po-sg-c-prod strong { display: block; font-weight: 600; font-size: .9rem; line-height: 1.3; }
  .po-sg-c-prod small { display: block; font-size: .74rem; }
  .po-sg-c-qty { width: 150px; }
  .po-sg-qty { display: inline-flex; align-items: center; gap: 6px; }
  .po-sg-qty .qt-in { width: 90px; min-height: 34px; }
  .po-sg-qty small { min-width: 32px; text-align: left; font-size: .76rem; }
  .po-sg-row.on td { background: var(--brand-tint); }
  .po-sg-row.in td { opacity: .55; }
  .po-sg-empty { padding: 28px 12px; }

  /* ---------- ป๊อปอัปรับของ ---------- */
  .mdl-body > .po-rc { margin-bottom: 0; }
  .po-rc { display: flex; flex-direction: column; gap: 12px; }
  .po-rc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
  .po-rc-sup { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
  .po-rc-sup strong { font-size: 1rem; }
  .po-rc-sup small { font-size: .8rem; }
  .po-rc-quick { display: flex; gap: 6px; }
  .po-rc-quick .chip { cursor: pointer; font: inherit; font-size: .84rem; padding: 5px 14px; }
  .po-rc-wrap.table-wrap { max-height: min(40vh, 420px); overflow: auto; }
  .po-rc-table th { padding: 8px; font-size: .8rem; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
  .po-rc-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
  .po-rc-c-prod { min-width: 180px; padding-top: 9px !important; }
  .po-rc-c-prod strong { display: block; font-weight: 600; font-size: .9rem; line-height: 1.3; }
  .po-rc-c-prod small { display: block; font-size: .74rem; line-height: 1.35; }
  .po-rc-c-rem { width: 110px; padding-top: 9px !important; }
  .po-rc-rem-btn { padding: 2px 8px; border: 1px dashed var(--line); border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: .84rem; white-space: nowrap; cursor: pointer; }
  .po-rc-rem-btn:hover { border-color: var(--brand); background: var(--brand-tint); }
  .po-rc-c-qty { width: 100px; }
  .po-rc-c-cost { width: 130px; }
  .po-rc-c-zone { width: 96px; }
  .po-rc-c-amt { width: 120px; padding-top: 12px !important; white-space: nowrap; }
  .po-rc-over, .po-rc-diff { display: block; margin-top: 3px; font-size: .72rem; text-align: right; }
  .po-rc-over { color: var(--warn-text, #7a5300); white-space: nowrap; }
  .po-rc-diff { color: var(--muted); }
  .po-rc-row.skip td { opacity: .5; }
  .po-rc-row.skip td.po-rc-c-qty { opacity: 1; }
  .po-rc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
  .po-rc-sec { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; }
  .po-rc-sec h3 { margin: 0; font-size: .95rem; }
  .po-rc-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; align-items: start; }
  .po-rc-bill.on { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); background: var(--brand-tint); }
  .po-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; }
  .po-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .po-switch-ui { flex: none; position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--line); transition: background .15s; }
  .po-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
  .po-switch input:checked + .po-switch-ui { background: var(--brand); }
  .po-switch input:checked + .po-switch-ui::after { transform: translateX(18px); }
  .po-switch input:focus-visible + .po-switch-ui { box-shadow: 0 0 0 3px var(--brand-soft); }
  .po-switch-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
  .po-switch-text strong { font-size: .95rem; }
  .po-switch-text small { font-size: .78rem; }
  .po-rc-reset { margin-left: 6px; font-weight: 600; }
  .po-rc-paynow { padding-top: 6px; border-top: 1px dashed var(--line); }
  .po-pfseg button { min-height: 62px; }
  .po-rc-foot {
    position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
    margin: 0 -22px; padding: 12px 22px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line);
  }
  .po-rc-foot .actions { position: static; margin: 0; padding: 0; border: 0; background: none; display: flex; gap: 8px; }
  .po-rc-sum { display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .po-rc-sum > span { display: flex; flex-direction: column; line-height: 1.25; }
  .po-rc-sum small { color: var(--muted); font-size: .74rem; }
  .po-rc-sum strong { font-size: .98rem; }
  .po-rc-sum .hl strong { font-size: 1.2rem; color: var(--brand-strong, var(--brand)); }
}

/* ---------- จอคอม ---------- */
@media screen and (min-width: 1025px) {
  .po-fit .fit-body > .po-main { flex: 1 1 auto; min-height: 0; overflow: hidden; }
}
@media screen and (min-width: 1025px) and (max-width: 1360px) {
  .po-search { width: 190px; }
  .po-c-sup { max-width: 200px; }
  .po-table td, .po-table th { padding-left: 8px; padding-right: 8px; }
  .po-c-items { display: none; }
  .po-c-prog { width: 110px; }
  .po-prog { width: 54px; }
  .po-bar-note { display: none; }
  .po-lines .po-l-no { display: none; }
  .po-lines th, .po-lines td { padding-left: 4px; padding-right: 4px; }
  .po-lines .po-l-prod { min-width: 150px; }
  .po-lines .po-l-unit { width: 108px; }
  .po-lines .po-l-qty { width: 70px; }
  .po-lines .po-l-cost { width: 100px; }
  .po-lines .po-l-amt { width: 110px; font-size: .86rem; }
  .po-ed .qt-ed-tools .btn { padding-left: 12px; padding-right: 12px; }
  .po-save-order { min-width: 0; }
}
@media screen and (min-width: 1500px) {
  .po-c-sup { max-width: 440px; }
  .po-prog { width: 90px; }
  .po-c-prog { width: 150px; }
}
@media screen and (min-width: 761px) and (max-width: 1024px) {
  .po-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .po-bar-note { display: none; }
}

/* ---------- มือถือ ---------- */
@media screen and (max-width: 760px) {
  .po-tools { flex-wrap: wrap; }
  .po-tools .po-branch { flex: 1 1 100%; }
  .po-branch select { max-width: none; flex: 1 1 auto; }
  .po-tools .po-add-btn { display: none; }
  .po-search { width: auto; }
  .po-bar { gap: 8px; }
  .po-periods { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; padding-bottom: 2px; }
  .po-periods::-webkit-scrollbar { display: none; }
  .po-periods .chip { flex: none; }
  .po-bar .exp-range { flex: 1 1 auto; }
  .po-sup-filter { flex: 0 1 auto; min-width: 0; }
  .po-sup-filter select { max-width: 150px; }
  .po-bar-note { display: none; }
  .po-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .po-stats .fit-stat { padding: 10px 12px; }

  .panel.po-main { padding: 0; background: none; border: 0; box-shadow: none; }
  .po-chips { margin: 0 -16px; padding: 2px 16px 8px; scrollbar-width: none; }
  .po-chips::-webkit-scrollbar { display: none; }
  .po-table thead { display: none; }
  .po-table, .po-table tbody { display: block; width: 100%; }
  .po-table tr.po-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "sup sup total" "no date status" "exp prog act";
    align-items: center; gap: 5px 10px; margin-bottom: 8px; padding: 11px 14px;
    border: 1px solid var(--line); border-left: 4px solid var(--ps, var(--line)); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow);
  }
  .po-table tr.po-row td { display: block; padding: 0 !important; border: 0; background: none !important; max-width: none; width: auto; min-width: 0; }
  .po-table .po-c-sup { grid-area: sup; }
  .po-table .po-c-total { grid-area: total; font-size: 1.04rem; text-align: right; }
  .po-table .po-c-no { grid-area: no; font-size: .8rem; }
  .po-table .po-c-no strong { font-size: .8rem; font-weight: 600; color: var(--muted); }
  .po-table .po-c-date { grid-area: date; font-size: .78rem; }
  .po-table .po-c-status { grid-area: status; justify-self: end; }
  .po-table .po-c-exp { grid-area: exp; font-size: .78rem; color: var(--muted); white-space: nowrap; }
  .po-table .po-c-prog { grid-area: prog; justify-self: end; width: auto; }
  .po-table .po-c-act { grid-area: act; width: auto; }
  .po-table .po-c-act:empty { display: none; }
  .po-table tr.po-row:has(.po-c-act:empty) { grid-template-areas: "sup sup total" "no date status" "exp exp prog"; }
  .po-table .po-c-items, .po-table .po-c-branch { display: none !important; }
  .po-br-inline { display: block !important; }
  .po-exp-label { display: inline; margin-right: 4px; }
  .po-prog { width: 56px; }
  .po-mbar {
    display: block; position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 15;
    margin: 0 -16px; padding: 8px 16px; background: linear-gradient(to top, var(--bg) 70%, transparent);
  }
  .po-mbar .btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; font-size: 1rem; box-shadow: var(--shadow-lg); }
  .po-toast { bottom: calc(146px + env(safe-area-inset-bottom)); }

  .po-d-prog-top { flex-direction: column; align-items: flex-start; gap: 2px; }
  .po-d-prog-top strong { text-align: left; }
  .drw-foot .po-foot-btn { flex: 1 1 0; padding-left: 6px; padding-right: 6px; font-size: .86rem; min-width: 0; }
  .drw-foot .po-foot-recv { flex: 1 1 100%; order: -1; justify-content: center; }

  /* ฟอร์ม */
  .po-ed-main .qt-ed-add { flex-wrap: wrap; }
  .po-suggest-btn { flex: 1 1 100%; justify-content: center; }
  .po-lines thead { display: none; }
  .po-lines, .po-lines tbody { display: block; width: 100%; }
  .po-lines tr.po-line {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; padding: 10px 12px 12px;
    border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow);
  }
  .po-lines tr.po-line td { display: block; width: auto !important; min-width: 0 !important; padding: 0 !important; border: 0; }
  .po-lines .po-l-no { display: none !important; }
  .po-lines .po-l-prod { grid-column: 1 / -1; }
  .po-lines .po-l-unit { grid-column: 1 / 2; grid-row: 2; }
  .po-lines .po-l-qty { grid-column: 2 / 3; grid-row: 2; }
  .po-lines .po-l-cost { grid-column: 3 / 4; grid-row: 2; }
  .po-lines .po-l-amt { grid-column: 1 / 3; grid-row: 3; align-self: center; text-align: left; font-size: 1rem; }
  .po-lines .po-l-act { grid-column: 3 / 4; grid-row: 3; align-self: end; text-align: right; }
  .po-lines td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--muted); font-size: .72rem; }
  .po-lines .po-l-unit .qt-unit-fixed { min-height: 38px; padding: 0 2px; }
  .po-ed .qt-l-btns { display: inline-flex; gap: 4px; }
  .po-ed .qt-l-btns .qt-ico-btn, .po-ed .qt-l-btns .qt-ico-btn.danger { width: 32px; height: 32px; border-radius: 9px; }
  .po-ed-mbar {
    display: flex; align-items: center; gap: 8px; position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 15;
    margin: 0 -16px; padding: 10px 16px; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(0,0,0,.08);
  }
  .po-ed-mbar { flex-wrap: wrap; row-gap: 6px; padding-top: 8px; }
  .po-ed-mbar .qt-ed-total { flex: 1 1 100%; flex-direction: row; align-items: baseline; justify-content: space-between; padding: 0; min-width: 0; }
  .po-ed-mbar .qt-ed-total strong { font-size: 1.15rem; }
  .po-ed-mbar .btn { flex: 1 1 0; min-height: 46px; padding-left: 10px; padding-right: 10px; font-size: .9rem; }

  /* ป๊อปอัปสินค้าใกล้หมด: แถวเป็นการ์ด */
  .po-sg-wrap.table-wrap { max-height: none; overflow: visible; border: 0; background: none; }
  .po-sg-table thead { display: none; }
  .po-sg-table, .po-sg-table tbody { display: block; width: 100%; }
  .po-sg-table tr.po-sg-row {
    display: grid; grid-template-columns: 30px repeat(3, minmax(0, 1fr)); gap: 4px 8px; margin-bottom: 8px; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  }
  .po-sg-table tr.po-sg-row td { display: block; padding: 0; border: 0; width: auto; text-align: left; }
  .po-sg-table .po-sg-c-chk { grid-column: 1; grid-row: 1 / span 3; align-self: center; }
  .po-sg-table .po-sg-c-prod { grid-column: 2 / -1; }
  .po-sg-table td[data-label] { font-size: .84rem; }
  .po-sg-table td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: .7rem; }
  .po-sg-table .po-sg-c-qty { grid-column: 2 / 4; }
  .po-sg-table tr.po-sg-row.on { background: var(--brand-tint); border-color: var(--brand-soft); }
  .po-sg-table tr.po-sg-row.on td { background: none; }
  .po-sg-qty .qt-in { width: 100px; font-size: 16px; }

  /* ป๊อปอัปรับของ */
  .po-rc-wrap.table-wrap { max-height: none; overflow: visible; border: 0; background: none; }
  .po-rc-table thead { display: none; }
  .po-rc-table, .po-rc-table tbody { display: block; width: 100%; }
  .po-rc-table tr.po-rc-row {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; margin-bottom: 8px; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  }
  .po-rc-table tr.po-rc-row td { display: block; width: auto; min-width: 0; padding: 0 !important; border: 0; text-align: left; }
  .po-rc-table .po-rc-c-prod { grid-column: 1 / -1; }
  .po-rc-table .po-rc-c-rem { grid-column: 1 / 2; grid-row: 2; }
  .po-rc-table .po-rc-c-qty { grid-column: 2 / 3; grid-row: 2; }
  .po-rc-table .po-rc-c-cost { grid-column: 3 / 4; grid-row: 2; }
  .po-rc-table .po-rc-c-zone { grid-column: 1 / 3; grid-row: 3; }
  .po-rc-table .po-rc-c-amt { grid-column: 3 / 4; grid-row: 3; align-self: end; text-align: right; padding-bottom: 8px !important; }
  .po-rc-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--muted); font-size: .7rem; }
  .po-rc-rem-btn { min-height: 38px; }
  .po-rc-over, .po-rc-diff { text-align: left; }
  .po-rc .qt-in { font-size: 16px; }
  .po-rc-grid { grid-template-columns: minmax(0, 1fr); }
  .po-rc-fgrid { grid-template-columns: minmax(0, 1fr); }
  .po-rc-foot { margin: 0 -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .po-rc-foot .actions { flex: 1 1 100%; }
  .po-rc-foot { gap: 8px; }
  .po-rc-sum { flex: 1 1 100%; }
  .po-rc-sum:has(.hl) > span:not(.hl) { display: none; }
  .po-rc-sum > span { flex: 1 1 100%; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; }
  .po-rc-foot .actions .btn { flex: 1 1 0; min-height: 48px; }
}

/* ---------- โหมดมืด ---------- */
@media screen {
  html[data-theme="dark"] .ps-ordered { --ps: #8CC4F2; }
  html[data-theme="dark"] .ps-partial { --ps: #F0B44C; }
  html[data-theme="dark"] .ps-closed { --ps: #5EC7B8; }
  html[data-theme="dark"] .ps-cancelled { --ps: #8F877F; }
  html[data-theme="dark"] .po-stat-open { background: color-mix(in srgb, var(--brand) 70%, #1F1D1B); }
  html[data-theme="dark"] .qt-st-btn.po-st-ordered { border-color: #8CC4F2; color: #8CC4F2; background: color-mix(in srgb, #8CC4F2 12%, var(--surface)); }
  html[data-theme="dark"] .po-st-ordered .po-dot { background: #8CC4F2; }
  html[data-theme="dark"] .po-st-closed .po-dot { background: #5EC7B8; }
  html[data-theme="dark"] .po-bill-tag, html[data-theme="dark"] .po-credit:not(.cash) { color: #8CC4F2; background: color-mix(in srgb, #8CC4F2 14%, var(--surface)); }
  html[data-theme="dark"] .po-toast { background: #ECE7E1; color: #1F1D1B; }
  html[data-theme="dark"] .po-switch-ui::after { background: #ECE7E1; }
  html[data-theme="dark"] .po-ed-mbar { box-shadow: 0 -6px 18px rgba(0,0,0,.4); }
}

/* ---------- ส่วนเสริมของกระดาษใบสั่งซื้อ (บนจอและตอนพิมพ์) ---------- */
.po-plines .po-pdesc { overflow-wrap: anywhere; }
.po-plines .po-psku { color: #444; font-size: .92em; }
@media screen and (max-width: 760px) {
  .po-plines .po-psku { display: none; }
}

/* =========================== พิมพ์ (A4) =========================== */
@page po-a4 { size: A4; margin: 12mm; }
@media print {
  html[data-print="po"]:has(.po-print), html[data-print="po"]:has(.po-print) body {
    margin: 0 !important; padding: 0 !important; height: auto !important; overflow: visible !important;
    background: #fff !important; color: #111 !important; page: po-a4;
  }
  html[data-print="po"]:has(.po-print) body *:not(:has(.po-print)):not(.po-print):not(.po-print *) { display: none !important; }
  html[data-print="po"]:has(.po-print) body *:has(.po-print) {
    display: block !important; position: static !important; inset: auto !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    width: auto !important; max-width: none !important; min-width: 0 !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    overflow: visible !important; background: none !important; box-shadow: none !important; transform: none !important;
    animation: none !important; zoom: 1 !important;
  }
  html[data-print="po"] .po-print, html[data-print="po"] .po-print * { visibility: visible !important; }
  html[data-print="po"] .po-print { display: block !important; position: static !important; }
  html[data-print="po"] .po-paper {
    max-width: none !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; border-radius: 0 !important;
    font-size: 10.5pt; gap: 4.5mm;
  }
}

/* =====================================================================
   รอบ 36: ใบรับสินค้า (GRN) — แท็บใบรับสินค้า, ลิ้นชัก GRN, ของที่ไม่รับในป๊อปอัปรับของ, ตรวจรับ 2 ขั้น, กระดาษ GRN
   สีสถานะ GRN ใช้ตัวแปร --ps เดียวกับใบสั่งซื้อ (.gs-<status>)
   ===================================================================== */
@media screen {
  .gs-pending { --ps: #B7791F; }
  .gs-posted { --ps: var(--ok); }
  .gs-rejected { --ps: var(--danger); }
  .gs-all { --ps: var(--ink); }

  /* สลับมุมมอง (.po-views — รอบ 105: หน้าใบสั่งซื้อย้ายไปแถบแท็บจัดซื้อแล้ว, หน้าโอนสินค้ายังใช้) */
  .po-head-main { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 18px; min-width: 0; }
  .po-views { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--chip); margin-bottom: 2px; }
  .po-view {
    display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px;
    background: none; color: var(--muted); font: inherit; font-size: .86rem; font-weight: 700; white-space: nowrap; cursor: pointer;
  }
  .po-view:hover { color: var(--ink); }
  .po-view.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
  .po-view.on svg { color: var(--brand); }
  .po-views-badge {
    display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: #B7791F; color: #fff; font-size: .72rem; font-weight: 800; line-height: 1;
  }

  /* ตัวเลขสรุป */
  .po-stats.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  button.fit-stat { border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
  a.fit-stat.grn-stat-pend { color: inherit; text-decoration: none; } /* รอบ 105: ลิงก์ไปแท็บรับสินค้า */
  button.fit-stat:hover { box-shadow: var(--shadow), inset 0 0 0 1px color-mix(in srgb, #B7791F 40%, transparent); }
  .grn-stat-pend { box-shadow: var(--shadow), inset 3px 0 0 var(--line); }
  .grn-stat-pend.warn { background: color-mix(in srgb, #B7791F 11%, var(--surface)); box-shadow: var(--shadow), inset 3px 0 0 #B7791F; }
  .grn-stat-pend.warn strong { color: #8A5A10; }
  .grn-stat-pend small { font-size: .78rem; color: var(--muted); }
  .grn-stat-rej.bad { box-shadow: var(--shadow), inset 3px 0 0 var(--danger); }
  .grn-stat-rej.bad strong { color: var(--danger); }

  /* ตารางใบรับสินค้า */
  .grn-c-no { white-space: nowrap; }
  .grn-c-no strong { font-weight: 700; font-size: .9rem; }
  .grn-c-date { white-space: nowrap; color: var(--muted); font-size: .84rem; }
  .grn-c-po { white-space: nowrap; font-size: .86rem; color: var(--muted); }
  .grn-c-sup { max-width: 320px; }
  .grn-sub { display: block; font-size: .76rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .grn-c-val { white-space: nowrap; }
  .grn-c-val strong { font-weight: 700; }
  .grn-c-rej, .grn-c-status, .grn-c-by { white-space: nowrap; }
  .grn-c-by { font-size: .86rem; color: var(--muted); max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
  .grn-rej {
    display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; white-space: nowrap;
    background: var(--danger-soft); color: var(--danger); font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .grn-row.gs-rejected td { color: var(--muted); }
  .grn-row.gs-rejected .grn-c-val strong { text-decoration: line-through; }
  .grn-row.gs-pending td:first-child { box-shadow: inset 3px 0 0 #B7791F; }

  /* ประวัติรับของในลิ้นชักใบสั่งซื้อ */
  .po-rcpt.gs-pending { border-color: color-mix(in srgb, #B7791F 45%, var(--line)); background: color-mix(in srgb, #B7791F 6%, var(--surface)); }
  .po-rcpt.gs-pending .po-rcpt-ico { background: color-mix(in srgb, #B7791F 16%, var(--surface)); color: #8A5A10; }
  .po-rcpt.gs-rejected .po-rcpt-ico { background: var(--danger-soft); color: var(--danger); }
  .po-rcpt.gs-rejected .po-rcpt-side > strong { text-decoration: line-through; color: var(--muted); }
  .po-rcpt-grn {
    align-self: flex-start; padding: 0; border: 0; background: none; color: var(--brand-strong, var(--brand));
    font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; text-align: left;
  }
  .po-rcpt-grn:hover { text-decoration: underline; }
  .po-rcpt-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 2px 0 1px; }
  .po-rcpt-tags .po-st { font-size: .7rem; padding: 0 8px; }
  .po-rcpt-doc { font-size: .74rem; font-weight: 600; color: var(--muted); }
  .po-rcpts .po-rcpt-print { flex: none; width: 32px; height: 32px; border-radius: 9px; }

  /* ลิ้นชักใบรับสินค้า */
  .grn-d-wait {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 14px;
    background: color-mix(in srgb, #B7791F 11%, var(--surface)); border: 1px solid color-mix(in srgb, #B7791F 35%, transparent); color: #7A4F0C;
  }
  .grn-d-wait > span:last-child { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
  .grn-d-wait strong { font-size: .92rem; }
  .grn-d-wait small { font-size: .8rem; opacity: .9; }
  .grn-d-wait-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, #B7791F 20%, var(--surface)); }
  .grn-d-rejected { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--danger-soft); color: var(--danger); font-size: .88rem; }
  .drw-foot .btn.ghost.danger-text { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
  .grn-reject-box .field { margin: 0 0 8px; }
  .grn-reject-box textarea { width: 100%; resize: vertical; }
  .grn-d-lines li.rej { box-shadow: inset 3px 0 0 var(--danger); padding-left: 10px; }
  .po-q.bad { background: var(--danger-soft); color: var(--danger); }
  .grn-reason { display: block; margin-top: 3px; font-size: .76rem; color: var(--danger); }
  .grn-reason::before { content: "⚠ "; }

  /* แถบแจ้งเตือน: ปุ่มพิมพ์/เปิดใบรับสินค้า */
  .po-toast-acts { display: inline-flex; gap: 6px; flex: none; }
  .po-toast-act {
    min-height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(127,127,127,.22); color: inherit;
    font: inherit; font-size: .82rem; font-weight: 700; white-space: nowrap; cursor: pointer;
  }
  .po-toast-act:hover { background: rgba(127,127,127,.34); }

  /* ป๊อปอัปรับของ: ตรวจรับ 2 ขั้น + ของที่ไม่รับ */
  .po-rc-2step {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px;
    background: color-mix(in srgb, #B7791F 11%, var(--surface)); border: 1px solid color-mix(in srgb, #B7791F 35%, transparent); color: #7A4F0C;
  }
  .po-rc-2step-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: color-mix(in srgb, #B7791F 20%, var(--surface)); }
  .po-rc-2step-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
  .po-rc-2step-text strong { font-size: .94rem; }
  .po-rc-2step-text small { font-size: .8rem; opacity: .9; }
  .po-rc-pend-note { margin: -4px 0 0; padding: 6px 10px; border-radius: 10px; background: var(--chip); color: var(--muted); font-size: .8rem; }
  .po-rc-pend { display: block; margin-top: 3px; font-size: .7rem; color: #8A5A10; white-space: nowrap; }
  .po-rc-prob-btn {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; padding: 2px 9px; border: 1px dashed var(--line); border-radius: 999px;
    background: none; color: var(--muted); font: inherit; font-size: .74rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  }
  .po-rc-prob-btn:hover, .po-rc-prob-btn.open { border-color: var(--danger); color: var(--danger); }
  .po-rc-prob-btn.on { border-style: solid; border-color: transparent; background: var(--danger-soft); color: var(--danger); }
  .po-rc-row.has-prob td { border-bottom-color: transparent; }
  .po-rc-row.rejecting td.po-rc-c-prod { box-shadow: inset 3px 0 0 var(--danger); }
  .po-rc-prob td { padding: 0 8px 10px !important; }
  .po-rc-prob-box {
    display: grid; grid-template-columns: 120px minmax(160px, 220px) minmax(0, 1fr); align-items: end; gap: 8px 12px;
    padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--danger) 6%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent);
  }
  .po-rc-prob-box .field { margin: 0; font-size: .78rem; }
  .po-rc-prob-box .qt-in { width: 100%; }
  .po-rc-prob-other { grid-column: 3; }
  .po-rc-prob-sum { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; font-size: .82rem; }
  .po-rc-prob-sum .num { font-weight: 700; }
  .po-rc-prob-sum small { font-size: .74rem; }
  .po-rc-prob-box:has(.po-rc-prob-other) .po-rc-prob-sum { grid-column: 1 / -1; }
  .po-rc-subh { padding-top: 8px; border-top: 1px dashed var(--line); }
  .po-rc-sum .bad strong { color: var(--danger); }

  /* หน้าตั้งค่า: ลำดับขั้นตอนรับของ */
  .grn-set-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .grn-set-flow li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--chip); font-size: .86rem; line-height: 1.4; }
  .grn-set-flow b { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); color: var(--muted); font-size: .76rem; }
  .grn-set-flow.on li { background: color-mix(in srgb, #B7791F 9%, var(--surface)); }
  .grn-set-flow.on b { background: #B7791F; color: #fff; }
}

@media screen and (min-width: 1025px) and (max-width: 1360px) {
  .po-stats.five .fit-stat { padding-left: 12px; padding-right: 12px; }
  .grn-c-po { display: none; }
  .grn-c-sup { max-width: 220px; }
  .grn-table td, .grn-table th { padding-left: 8px; padding-right: 8px; }
}
@media screen and (min-width: 761px) and (max-width: 1024px) {
  .po-stats.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grn-c-po, .grn-c-by { display: none; }
}

@media screen and (max-width: 760px) {
  .po-head-main { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
  .po-views { display: flex; width: 100%; }
  .po-view { flex: 1 1 0; justify-content: center; min-height: 38px; padding: 0 10px; }
  .po-stats.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .po-stats.five .grn-stat-pend { grid-column: 1 / -1; }

  .grn-table tr.grn-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "sup sup val" "no date status" "po by rej";
    border-left-color: var(--ps, var(--line));
  }
  .grn-table tr.grn-row td { display: block; padding: 0 !important; border: 0; background: none !important; max-width: none; width: auto; min-width: 0; box-shadow: none !important; }
  .grn-table .grn-c-sup { grid-area: sup; }
  .grn-table .grn-c-val { grid-area: val; font-size: 1.04rem; text-align: right; }
  .grn-table .grn-c-no { grid-area: no; }
  .grn-table .grn-c-no strong { font-size: .8rem; font-weight: 600; color: var(--muted); }
  .grn-table .grn-c-date { grid-area: date; font-size: .76rem; }
  .grn-table .grn-c-status { grid-area: status; justify-self: end; }
  .grn-table .grn-c-po { grid-area: po; font-size: .76rem; }
  .grn-table .grn-c-by { grid-area: by; font-size: .76rem; }
  .grn-table .grn-c-rej { grid-area: rej; justify-self: end; }
  .grn-table .grn-rej-none { display: none; }
  .grn-table .po-c-branch { display: none !important; }

  .po-toast { flex-wrap: wrap; }
  .po-toast > span:first-child { flex: 1 1 calc(100% - 44px); }
  .po-toast-acts { order: 3; flex: 1 1 100%; }
  .po-toast-act { flex: 1 1 0; }

  .po-rc-2step { padding: 10px 12px; }
  .po-rc-table tr.po-rc-row.rejecting td.po-rc-c-prod { box-shadow: none; }
  .po-rc-table tr.po-rc-row.rejecting, .po-rc-table tr.po-rc-row.rejecting + .po-rc-prob .po-rc-prob-box { border-left: 4px solid var(--danger); }
  .po-rc-table tr.po-rc-row.has-prob { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-style: dashed; }
  .po-rc-table tr.po-rc-prob { display: block; margin-bottom: 8px; }
  .po-rc-table tr.po-rc-prob td { display: block; padding: 0 !important; }
  .po-rc-prob-box { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }
  .po-rc-prob-other { grid-column: 1 / -1; }
  .po-rc-sum:has(.hl) > span.bad { display: flex; }
}

@media screen {
  html[data-theme="dark"] .gs-pending { --ps: #F0B44C; }
  html[data-theme="dark"] .po-views-badge, html[data-theme="dark"] .grn-set-flow.on b { background: #F0B44C; color: #1F1D1B; }
  html[data-theme="dark"] .grn-stat-pend.warn strong { color: #F0B44C; }
  html[data-theme="dark"] .grn-stat-pend.warn { background: color-mix(in srgb, #F0B44C 12%, var(--surface)); box-shadow: var(--shadow), inset 3px 0 0 #F0B44C; }
  html[data-theme="dark"] .grn-d-wait, html[data-theme="dark"] .po-rc-2step { background: color-mix(in srgb, #F0B44C 12%, var(--surface)); border-color: color-mix(in srgb, #F0B44C 35%, transparent); color: #F5CC80; }
  html[data-theme="dark"] .grn-d-wait-ico, html[data-theme="dark"] .po-rc-2step-ico { background: color-mix(in srgb, #F0B44C 20%, var(--surface)); }
  html[data-theme="dark"] .po-rc-pend { color: #F0B44C; }
  html[data-theme="dark"] .po-rcpt.gs-pending { border-color: color-mix(in srgb, #F0B44C 40%, var(--line)); background: color-mix(in srgb, #F0B44C 7%, var(--surface)); }
  html[data-theme="dark"] .po-rcpt.gs-pending .po-rcpt-ico { color: #F0B44C; background: color-mix(in srgb, #F0B44C 16%, var(--surface)); }
  html[data-theme="dark"] .grn-row.gs-pending td:first-child { box-shadow: inset 3px 0 0 #F0B44C; }
}

/* ---------- กระดาษใบรับสินค้า (บนจอและตอนพิมพ์) ---------- */
.grn-stamp { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.grn-stamp small { font-size: .5em; letter-spacing: .14em; }
.grn-stamp.pending { border-color: #A86A00; color: #A86A00; }
.grn-plines { font-size: .88em; }
.grn-plines th { white-space: normal !important; vertical-align: bottom; line-height: 1.25; }
.grn-plines th, .grn-plines td { padding-left: 5px; padding-right: 5px; }
.grn-plines .grn-pdesc { overflow-wrap: anywhere; }
.grn-plines .grn-psku { color: #444; font-size: .92em; }
.grn-plines .grn-preason { display: block; margin-top: 2px; color: #B3261E; font-size: .88em; }
.grn-plines .grn-prej { color: #B3261E; font-weight: 700; }
.grn-pfoot { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; break-inside: avoid; }
.grn-prefs { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.grn-prefs > div { display: flex; gap: 10px; }
.grn-prefs > div span { color: #555; min-width: 120px; }
.grn-prefs > div.bad strong { color: #B3261E; }
.grn-pnote { margin: 4px 0 0; color: #555; font-size: .88em; }
.grn-psum { flex: none; }
.grn-psum-rej span { color: #B3261E; }
.grn-sign { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grn-sign em { min-height: 1.3em; font-style: normal; font-weight: 600; color: #333; text-align: center; }
.grn-sign span { height: 22px; }
@media screen and (max-width: 760px) {
  .grn-plines .grn-psku { display: none; }
  .grn-pfoot { flex-direction: column; align-items: stretch; }
  .grn-sign { gap: 10px; }
  .grn-paper .dbt-lines { font-size: .8em; }
  .grn-plines th, .grn-plines td { padding-left: 3px; padding-right: 3px; }
}

/* =========================== พิมพ์ใบรับสินค้า (A4) =========================== */
@page grn-a4 { size: A4; margin: 12mm; }
@media print {
  html[data-print="grn"]:has(.grn-print), html[data-print="grn"]:has(.grn-print) body {
    margin: 0 !important; padding: 0 !important; height: auto !important; overflow: visible !important;
    background: #fff !important; color: #111 !important; page: grn-a4;
  }
  html[data-print="grn"]:has(.grn-print) body *:not(:has(.grn-print)):not(.grn-print):not(.grn-print *) { display: none !important; }
  html[data-print="grn"]:has(.grn-print) body *:has(.grn-print) {
    display: block !important; position: static !important; inset: auto !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    width: auto !important; max-width: none !important; min-width: 0 !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    overflow: visible !important; background: none !important; box-shadow: none !important; transform: none !important;
    animation: none !important; zoom: 1 !important;
  }
  html[data-print="grn"] .grn-print, html[data-print="grn"] .grn-print * { visibility: visible !important; }
  html[data-print="grn"] .grn-print { display: block !important; position: static !important; }
  html[data-print="grn"] .grn-paper {
    max-width: none !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; border-radius: 0 !important;
    font-size: 10pt; gap: 4mm;
  }
  html[data-print="grn"] .grn-plines { font-size: 8.6pt; }
}

/* รอบ 79: ใบรับรอตรวจที่ต้นทุน/ยอดบิลต่างจากใบสั่งซื้อ */
.alert.grn-cost-warn { background: var(--warn-soft); color: var(--warn-text, #7a5300); }
.grn-cost-diff { display: block; color: var(--warn-text, #7a5300); font-weight: 600; }