/* Production and Inventory (public/production-view.js). Values from the Ops v3 design
   (ops-v3.css and the Production / Inventory / Generated documents canvases). */

/* ---------- shared pieces ---------- */
.k3 { grid-template-columns: repeat(3, 1fr) !important; }
.g12c { display: flex; flex-direction: column; gap: 12px; }
.im { display: block; flex: none; background: #F8F7F5 center / cover no-repeat; object-fit: cover; }
.ph { display: block; flex: none; background: repeating-linear-gradient(135deg, #F8F7F5 0 6px, #EFEDE9 6px 8px); }
.t28 { width: 28px; height: 42px; } .t36 { width: 36px; height: 54px; } .t48 { width: 48px; height: 72px; } .t64 { width: 64px; height: 96px; }
.stl { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.stage { display: inline-flex; gap: 3px; vertical-align: middle; }
.stage i { width: 14px; height: 4px; background: #E6E6E6; display: block; }
.stage i.d { background: #000; } .stage i.c { background: #000; outline: 1px solid #000; outline-offset: 1px; } .stage i.r { background: var(--accent); outline: 1px solid var(--accent); outline-offset: 1px; }
.meter { height: 4px; background: #E6E6E6; position: relative; display: block; }
.meter i { position: absolute; left: 0; top: 0; bottom: 0; background: #000; display: block; } .meter i.r { background: var(--accent); }
.sz { display: inline-grid; grid-auto-flow: column; grid-template-rows: auto auto; gap: 0 6px; text-align: center; justify-self: start; }
.sz i { font-style: normal; color: var(--mute); min-width: 26px; } .sz em { font-style: normal; min-width: 26px; font-variant-numeric: tabular-nums; }
.sz em.z { color: var(--accent); } .sz em.lo { font-weight: 700; }
.kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.kv > span:first-child { color: var(--mute); }
.hist { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.hist > span:first-child { color: var(--mute); white-space: nowrap; }
.pdoc { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.pdoc .pg { width: 30px; height: 38px; border: 1px solid var(--rule); background: #fff; position: relative; display: block; }
.pdoc .pg::after { content: ""; position: absolute; left: 5px; right: 5px; top: 7px; height: 13px; background: repeating-linear-gradient(#E6E6E6 0 1px, transparent 1px 4px); }
.pdoc .pg.faint { opacity: .4; }
.pdoc a { text-decoration: none; } .pdoc a:hover b { text-decoration: underline; }
.pside { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pside > .col, .pcol { display: flex; flex-direction: column; min-width: 0; }
.pside .h, .pcol > .h { margin-bottom: 2px; align-items: baseline; justify-content: flex-start; gap: 8px; }
.pside .h .mute, .pcol > .h .mute, .pside .h .ml, .pcol > .h .ml { font-weight: 400; } .pside .h .ml, .pcol > .h .ml { margin-left: auto; }
.prod-page .h { justify-content: flex-start; align-items: baseline; gap: 8px; } .prod-page .h .mute, .prod-page .h .ml { font-weight: 400; } .prod-page .h .ml { margin-left: auto; }
.pnote { background: #F8F7F5; padding: 10px 12px; }
.pwell { background: #F8F7F5; padding: 12px 16px; display: flex; gap: 12px; align-items: center; }
.pwell .btn { margin-left: auto; }
.pwell.red { color: var(--accent); }
.scope-note { background: #F8F7F5; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; border-left: 2px solid var(--accent); }
.scope-note b.red { color: var(--accent); }
.tr .ink, .tr.mute .ink { color: #000; }
.tr.on { background: #F8F7F5; box-shadow: -8px 0 0 #F8F7F5, 8px 0 0 #F8F7F5; }
.tr.sk-row { cursor: default; }
.tr[data-prow], .mrow[data-prow] { cursor: pointer; -webkit-touch-callout: none; }
.tr[data-prow]:hover { background: #F8F7F5; }
.tr[data-prow]:focus-visible, .mrow[data-prow]:focus-visible { outline: 1px solid #000; outline-offset: -1px; }
.fchips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fchip { position: relative; border: 1px solid var(--rule); padding: 4px 8px; white-space: nowrap; display: inline-flex; gap: 4px; align-items: baseline; background: #fff; }
.fchip.on { border-color: #000; }
.fchip b::after { content: " ▾"; font-weight: 400; }
.fchip.on.x b::after { content: ""; }
.fchip .fl { position: relative; display: inline-flex; gap: 4px; align-items: baseline; cursor: pointer; }
.fchip select { position: absolute; inset: -4px -8px; opacity: 0; cursor: pointer; font: inherit; }
.fchip .clear { background: none; border: 0; padding: 0 0 0 4px; cursor: pointer; position: relative; z-index: 1; }
.tfoot { display: flex; justify-content: space-between; padding: 10px 0; color: var(--mute); gap: 16px; flex-wrap: wrap; }
.pempty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 72px 24px; border-top: 1px solid #000; }
.pempty .row { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
.check { display: inline-block; width: 12px; height: 12px; border: 1px solid #000; vertical-align: -2px; flex: none; }
.check.on { background: #000; box-shadow: inset 0 0 0 2px #fff; }
.cchip { border: 1px solid var(--rule); padding: 4px 8px; white-space: nowrap; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; background: #fff; }
.cchip.on { border-color: #000; }
.seg2 { display: inline-flex; border: 1px solid #000; white-space: nowrap; justify-self: start; }
.seg2 button { font-weight: 400; padding: 2px 8px; cursor: pointer; background: #fff; border: 0; }
.seg2 button.on { background: #000; color: #fff; }
.cell-in { border: 0; border-bottom: 1px solid #000; width: 46px; text-align: center; padding: 2px 0; outline: none; background: #fff; font-variant-numeric: tabular-nums; }
.cell-in:focus { background: var(--hi); }
.cnt { border: 1px solid #000; width: 88px; text-align: center; padding: 6px 0; outline: none; background: #fff; font-variant-numeric: tabular-nums; }
.cnt.diff { border-color: var(--accent); color: var(--accent); }
.cnt:focus { background: var(--hi); }
.pin2 { border: 0; border-bottom: 1px solid #000; padding: 4px 0; outline: none; background: #fff; width: 100%; min-width: 0; }
.pin2:focus { background: var(--hi); }
select.pin2 { -webkit-appearance: none; appearance: none; border-radius: 0; cursor: pointer; padding-right: 16px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z'/%3E%3C/svg%3E") no-repeat right 2px center; }
textarea.pin2 { resize: vertical; min-height: 44px; }
.pform { display: grid; gap: 12px; }
.pform.two { grid-template-columns: 1fr 1fr; column-gap: 32px; }
.pform > label { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: start; }
.pform > label > .mute { padding-top: 5px; }
.pform > label.wide { grid-column: 1 / -1; }
.pform .fx { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pform .sub { color: var(--mute); }
.pdet { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; padding: 24px 32px 40px; align-items: start; }
.pdet.w360 { grid-template-columns: minmax(0, 1fr) 360px; } .pdet.w400 { grid-template-columns: minmax(0, 1fr) 400px; }
.pmain { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.pmain.g24 { gap: 24px; }
.stepper { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.stepper button { padding: 6px 0 7px; border: 0; border-bottom: 2px solid #E6E6E6; color: var(--mute); background: none; text-align: left; cursor: pointer; line-height: 16px; }
.stepper button + button { padding-left: 8px; }
.stepper button em { display: block; font-style: normal; color: var(--mute); }
.stepper .d { border-bottom-color: #000; color: #000; } .stepper .c { border-bottom-color: #000; color: #000; font-weight: 700; } .stepper .c em { font-weight: 700; }
.stepper .r { border-bottom-color: var(--accent); color: var(--accent); font-weight: 700; } .stepper .r em { color: var(--accent); }
.stepper button:hover em { text-decoration: underline; }
.pcard { border: 1px solid #000; padding: 16px; display: flex; flex-direction: column; }
.pcard .h { margin-bottom: 2px; }
.pcard .kv { grid-template-columns: 90px minmax(0, 1fr); }
.kv .row2 { display: flex; gap: 12px; } .kv .row2 .ml { margin-left: auto; }
.kv.tot { font-weight: 700; border-bottom: 1px solid #000; } .kv.tot > span:first-child { color: #000; }
.more-btn2 { background: none; border: 0; padding: 0 8px; font-weight: 700; cursor: pointer; }
.btn.dis, .btn.dis:disabled { background: #ECEBE8; border-color: #ECEBE8; color: var(--mute); }
.acts .link.mute { color: var(--mute); text-decoration: none; padding: 0 8px; }
.qtyedit .cell-in { width: 40px; }
.addl { display: flex; gap: 12px; align-items: center; padding-top: 10px; flex-wrap: wrap; }
.ptitle2 { display: flex; gap: 12px; align-items: baseline; }

/* ---------- tables, columns from the design ---------- */
.rn .th, .rn .tr { grid-template-columns: 28px minmax(0, 1.6fr) minmax(0, 1.2fr) 50px 150px minmax(0, 1.5fr) 84px 112px; }
.qty .th, .qty .tr { grid-template-columns: 28px minmax(0, 1.2fr) repeat(var(--nz, 4), 50px) 70px minmax(0, 1.6fr); }
.cost .th, .cost .tr { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) minmax(0, 1fr) 90px 90px; }
.cost .tr.tot { border-bottom: 1px solid #000; border-top: 1px solid #000; font-weight: 700; }
.cost .tr[data-cost] { cursor: pointer; } .cost .tr[data-cost]:hover { background: #F8F7F5; }
.sq .th, .sq .tr { grid-template-columns: minmax(0, 1.2fr) repeat(var(--nz, 4), 60px) 70px; }
.po .th, .po .tr { grid-template-columns: 96px minmax(0, 1.3fr) 90px minmax(0, 1.6fr) 160px 90px 96px 112px; }
.poln .th, .poln .tr { grid-template-columns: 28px minmax(0, 1.4fr) repeat(var(--nz, 4), 44px) 56px 70px 84px 20px; }
.poln .tr.plain { grid-template-columns: 28px minmax(0, 1.4fr) calc(var(--nz, 4) * 44px + (var(--nz, 4) - 1) * 12px) 56px 70px 84px 20px; }
.poln input { border: 0; border-bottom: 1px solid transparent; outline: none; background: none; width: 100%; padding: 2px 0; min-width: 0; }
.poln input.num { text-align: right; }
.poln input:focus { border-bottom-color: #000; background: var(--hi); }
.poln .rmx { background: none; border: 0; color: var(--mute); cursor: pointer; padding: 0; visibility: hidden; }
.poln .tr:hover .rmx, .poln .rmx:focus { visibility: visible; }
.fac .th, .fac .tr { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) 80px 90px minmax(0, 1fr) 40px; }
.fab .th, .fab .tr { grid-template-columns: 28px minmax(0, 1.5fr) minmax(0, 1.1fr) 60px 60px 130px 58px 80px minmax(0, 1fr) 72px; }
.trim .th, .trim .tr { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) 70px 80px 70px 70px minmax(0, 1.4fr) 96px; }
.stk .th, .stk .tr { grid-template-columns: 36px minmax(0, 1.2fr) 230px 56px 70px 80px 150px 60px; }
.stk .tr { padding: 8px 0; }
.rc .th, .rc .tr { grid-template-columns: 70px 80px 110px minmax(0, 1fr) 90px 90px; }
.adj .th, .adj .tr { grid-template-columns: 96px minmax(0, 1.2fr) 70px 90px minmax(0, 1.3fr) 64px 150px; }
.ro .th, .ro .tr { grid-template-columns: 14px 36px minmax(0, 1.2fr) 140px 60px 64px 76px 100px 116px 116px; }
.ro2 .tr { grid-template-columns: 36px minmax(0, 1fr) 120px 120px; }
.sa .th, .sa .tr { grid-template-columns: 36px minmax(0, 1.2fr) 110px 80px minmax(0, 1.3fr) 90px 80px 120px; }
.rway .th, .rway .tr { grid-template-columns: 28px minmax(0, 1.4fr) minmax(0, 1fr) 70px minmax(0, 1fr) 120px; }
.recent .tr { grid-template-columns: 140px minmax(0, 1fr); }
.ro .tr input[type=checkbox] { accent-color: #000; margin: 0; }
.ronum { display: inline-flex; gap: 4px; align-items: baseline; }
.plan-box { border: 1px solid #000; padding: 20px 24px; display: flex; gap: 24px; align-items: center; }
.plan-box > div:first-child { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.plan-box .acts { flex-wrap: wrap; }

/* receiving */
.rblk { display: flex; flex-direction: column; }
.rhd { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #000; }
.rhd .tag { margin-left: auto; }
.cnt-ctl { display: inline-flex; gap: 8px; align-items: center; }
.pm { display: none; width: 44px; height: 44px; border: 1px solid #000; background: #fff; cursor: pointer; font-size: 16px; }
.dnote { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.rc .tr .red { color: var(--accent); }
.rbar { display: none; }

/* supplier PO sheet: Letter, 816 × 1056 at 96 dpi */
.posheet { font: 400 11px/14px "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 40px 48px 32px; width: 816px; min-height: 1056px; display: flex; flex-direction: column; gap: 16px; background: #fff; color: #000; }
.posheet .fine { font-size: 10px; line-height: 13px; }
.posheet .hd { display: flex; justify-content: space-between; align-items: flex-start; }
.posheet .plogo { width: 112px; height: auto; display: block; }
.posheet .dt { letter-spacing: .08em; font-weight: 700; text-align: right; }
.posheet .hd .col { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.posheet .kvr { display: grid; grid-template-columns: auto auto; gap: 0 14px; justify-content: end; text-align: right; }
.posheet .kvr span:nth-child(odd) { color: var(--mute); }
.posheet .pparties { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; white-space: pre-line; }
.posheet .pmeta { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #000; border-bottom: 1px solid var(--rule); }
.posheet .pmeta > div { padding: 6px 10px 6px 0; }
.posheet .pmeta > div:nth-child(n+5) { border-top: 1px solid var(--rule); }
.posheet .table .th, .posheet .table .tr { padding: 6px 0; gap: 8px; align-items: start; }
.posheet .lt .th, .posheet .lt .tr { grid-template-columns: 36px minmax(0, 1.5fr) minmax(0, 1.6fr) 44px 72px 84px; }
.posheet .lt .tr.plain { grid-template-columns: 36px minmax(0, 3.1fr) 44px 72px 84px; }
.posheet .sz i, .posheet .sz em { min-width: 22px; }
.posheet .two { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; border-top: 1px solid #000; padding-top: 10px; }
.posheet .h2 { font-weight: 700; margin-bottom: 4px; }
.posheet .kl { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--rule); white-space: pre-line; }
.posheet .kl > span:first-child { color: var(--mute); }
.posheet .ul { display: flex; flex-direction: column; gap: 3px; }
.posheet .tot { margin-left: auto; width: 290px; display: flex; flex-direction: column; }
.posheet .tot > div { display: flex; justify-content: space-between; padding: 4px 0; gap: 12px; }
.posheet .tot .due { border-top: 1px solid #000; font-weight: 700; padding-top: 6px; }
.posheet .pterms { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; border-top: 1px solid #000; padding-top: 10px; }
.posheet .sg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
.posheet .sg > div { border-bottom: 1px solid #000; height: 30px; display: flex; align-items: flex-end; padding-bottom: 3px; color: var(--mute); }
.posheet .pfoot { margin-top: auto; display: flex; justify-content: space-between; color: var(--mute); }
.pomini { width: 400px; height: 518px; overflow: hidden; border: 1px solid var(--rule); position: relative; background: #fff; cursor: zoom-in; }
.pomini .posheet { position: absolute; left: 0; top: 0; transform: scale(.49); transform-origin: 0 0; pointer-events: none; }
.pofull { position: fixed; inset: 0; z-index: 46; background: rgba(236,235,232,.96); overflow: auto; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pofull .bar { width: 816px; max-width: 100%; display: flex; gap: 8px; justify-content: flex-end; }
.pofull .posheet { box-shadow: 0 0 0 1px var(--rule); }
#printSheet { display: none; }

/* phone */
@media (max-width: 760px) {
  .rn.table, .po.table, .fac.table, .fab.table, .trim.table, .stk.table, .adj.table, .ro.table, .sa.table, .rway.table { display: none; }
  .k3 { grid-template-columns: 1fr !important; }
  .k3 > div, .k3 > div:nth-child(n+3) { display: flex !important; padding-left: 0 !important; border-right: 0 !important; }
  .k3 > div + div { border-top: 1px solid var(--rule); padding-top: 12px; }
  .pdet, .pdet.w360, .pdet.w400 { grid-template-columns: 1fr; padding: 16px; gap: 24px; }
  .pform.two { grid-template-columns: 1fr; }
  .pform > label { grid-template-columns: 1fr; gap: 4px; }
  .stepper { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr 1fr 1fr; row-gap: 8px; }
  .stepper button + button { padding-left: 0; }
  .qty .th, .qty .tr, .cost .th, .cost .tr, .sq .th, .sq .tr, .poln .th, .poln .tr, .rc .th, .rc .tr { min-width: 0; }
  .qty .th, .qty .tr { grid-template-columns: minmax(0, 1fr) repeat(var(--nz, 4), 30px) 40px; gap: 6px; }
  .qty .th > :first-child, .qty .tr > :first-child, .qty .th > :last-child, .qty .tr > :last-child { display: none; }
  .cost .th, .cost .tr { grid-template-columns: minmax(0, 1fr) 84px 64px; gap: 8px; }
  .cost .th > :nth-child(2), .cost .tr > :nth-child(2), .cost .th > :nth-child(3), .cost .tr > :nth-child(3) { display: none; }
  .sq .th, .sq .tr { grid-template-columns: minmax(0, 1fr) repeat(var(--nz, 4), 40px) 40px; gap: 6px; }
  .sq .cell-in { width: 36px; }
  .poln .th, .poln .tr, .poln .tr.plain { grid-template-columns: minmax(0, 1fr) 50px 76px 18px; gap: 6px; }
  .poln .th > :first-child, .poln .tr > :first-child { display: none; }
  .poln .tr > .zc, .poln .th > .zc, .poln .tr > .zplain { display: none; }
  .poln .tr > :nth-last-child(3), .poln .th > :nth-last-child(3) { display: none; }
  .pomini { width: 100%; height: auto; aspect-ratio: 816 / 1056; }
  .pomini .posheet { transform: scale(var(--sc, .45)); }
  .pofull { padding: 8px; }
  .pofull .posheet { transform-origin: 0 0; }
  .plan-box { flex-direction: column; align-items: stretch; padding: 16px; }
  .rhd { flex-wrap: wrap; }
  /* Counting on a phone: big − and + around each count, the close button pinned below. */
  .rc .th { display: none; }
  .rc .tr { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; padding: 12px 0; }
  .rc .tr > .c-diff, .rc .tr > .c-now, .rc .tr > .c-after { display: none; }
  .rc .tr > .c-exp { grid-column: 2; grid-row: 1; }
  .rc .tr > .c-cnt { grid-column: 3; grid-row: 1 / span 2; }
  .rc .tr > .c-pdiff { display: block; grid-column: 2; grid-row: 2; color: var(--accent); }
  .pm { display: inline-flex; align-items: center; justify-content: center; }
  .cnt { width: 64px; border: 0; border-bottom: 1px solid #000; height: 44px; font-weight: 700; font-size: 14px; }
  .cnt.diff { border-bottom-color: var(--accent); }
  .rbar { display: flex; flex-direction: column; gap: 8px; position: sticky; bottom: 0; background: #fff; border-top: 1px solid #000; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); margin: 0 -16px; padding-left: 16px; padding-right: 16px; z-index: 3; }
  .rbar .btn { width: 100%; min-height: 44px; }
  .recv-acts { display: none !important; }
  .recv-side { display: none; }
  .actions .acts .btn { padding: 8px 12px; }
  .fchips { gap: 6px; }
}
.rc .tr > .c-pdiff { display: none; }
.rc .c-exp .mute { display: none; }
@media (max-width: 760px) { .rc .c-exp .mute { display: inline; } .rc .c-exp { text-align: left; } }

@media print {
  html.printing .app, html.printing .gate, html.printing dialog, html.printing .toast, html.printing .newmenu, html.printing .palette, html.printing .palette-scrim, html.printing .pofull, html.printing .cmenu { display: none !important; }
  html.printing #printSheet { display: block !important; }
  html.printing #printSheet .posheet { width: auto; min-height: 0; height: 9.9in; padding: 0; box-shadow: none; }
  html.printing body { background: #fff; }
}
.mrow .sz { align-self: flex-start; }
/* The printed PO keeps its own layout at every screen width. */
.posheet .table { overflow: visible !important; }
.posheet .th, .posheet .tr { min-width: 0 !important; }
/* The action bar keeps its buttons on one line; the crumbs wrap instead. */
@media (min-width: 761px) { .actions .crumbs { flex: 1 1 auto; } .actions .acts { flex: none; flex-wrap: nowrap; } }