/* Shared three-segment stepper. The centre is flush with the outer border, not an inset pill. */
:root {
  --gp-stepper-side: #f2f2f7;
  --gp-stepper-value: #fff;
  --gp-stepper-border: #e5e5eb;
  --gp-stepper-text: #27272a;
  --gp-stepper-control: #5b5b61;
  --gp-stepper-muted: #aaaab3;
}
:root.dark {
  --gp-stepper-side: #2c2c32;
  --gp-stepper-value: #202024;
  --gp-stepper-border: #484850;
  --gp-stepper-text: #f4f4f5;
  --gp-stepper-control: #dedee4;
  --gp-stepper-muted: #777781;
}
/* Specificity deliberately exceeds page-level input styles and the old UI radius layer. */
html body .el-input-number,
html body .gp-stepper {
  --gp-stepper-height: 36px;
  --gp-stepper-size: 16px;
  --gp-stepper-control-size: 20px;
  /* #254：两侧按钮与文字区留白改用**固定轨道宽**，不再用 29%。
     百分比在窄步进器上会反噬：136px 的控件里数字只剩 42% ≈ 57px，
     "2050.00" 七个字形要 ≈59px → 两头一起被 overflow:hidden 切掉，屏幕上读作 "2050.0"。
     固定 30px 轨道下，136px 控件的数字区有 76px，150px 有 90px，长金额不再被裁。 */
  --gp-stepper-rail: 30px;
  position: relative;
  display: inline-flex;
  align-items: stretch;
  width: 160px;
  /* 2026-09-15：原 min-width:120px。在窄格子（如 other-order 的规格矩阵、物料行的
     三列网格，容器只有 70~110px）里 CSS 规定 min-width 优先于 max-width → 控件被强行
     撑到 120px 溢出容器，父级 overflow:hidden 直接把数字/按钮切掉（表现为「步进器数值
     设置缺失」）。改为 min-width:0，让它老实跟着容器收缩。 */
  min-width: 0;
  max-width: 100%;
  height: var(--gp-stepper-height);
  padding: 0;
  gap: 0;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--gp-stepper-border);
  border-radius: 999px;
  background: var(--gp-stepper-side);
  color: var(--gp-stepper-text);
  line-height: normal;
  vertical-align: middle;
  box-shadow: none;
  isolation: isolate;
}
html body .el-input-number--small,
html body .gp-stepper--small {
  --gp-stepper-height: 32px;
  --gp-stepper-size: 14px;
  --gp-stepper-control-size: 18px;
  --gp-stepper-rail: 26px;
  width: 150px;
  min-width: 0;   /* 同上：窄容器不再溢出 */
}
html body .el-input-number--large,
html body .gp-stepper--large {
  --gp-stepper-height: 44px;
  --gp-stepper-size: 18px;
  --gp-stepper-control-size: 22px;
  width: 184px;
}
html body .el-input-number:focus-within,
html body .gp-stepper:focus-within {
  border-color: var(--pc, #007aff);
  outline: 2px solid color-mix(in srgb, var(--pc, #007aff) 22%, transparent);
  outline-offset: 2px;
}
html body .el-input-number > .el-input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  margin: 0;
  --el-input-height: var(--gp-stepper-height);
  --el-input-text-color: var(--gp-stepper-text);
  --el-input-bg-color: transparent;
}
html body .el-input-number .el-input .el-input__wrapper {
  height: 100%;
  min-height: 0;
  padding: 0 var(--gp-stepper-rail);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
  box-sizing: border-box;
}
html body .el-input-number .el-input .el-input__inner,
html body .gp-stepper__value {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 100%;
  line-height: calc(var(--gp-stepper-height) - 2px);
  padding: 0 2px;
  margin: 0;
  border: 0 !important;
  border-radius: 0;
  box-sizing: border-box;
  background: var(--gp-stepper-value) !important;
  color: var(--gp-stepper-text) !important;
  -webkit-text-fill-color: var(--gp-stepper-text);
  text-align: center;
  font-family: inherit;
  font-size: var(--gp-stepper-size);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  outline: none;
  box-shadow: none !important;
  appearance: textfield;
  -moz-appearance: textfield;
}
html body .el-input-number .el-input__inner::-webkit-inner-spin-button,
html body .el-input-number .el-input__inner::-webkit-outer-spin-button,
html body .gp-stepper__value::-webkit-inner-spin-button,
html body .gp-stepper__value::-webkit-outer-spin-button { appearance: none; margin: 0; }
html body .el-input-number .el-input-number__decrease,
html body .el-input-number .el-input-number__increase,
html body .gp-stepper__button {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--gp-stepper-rail);
  min-width: 0;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0 !important;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gp-stepper-side) !important;
  color: var(--gp-stepper-control) !important;
  font-family: inherit;
  font-size: var(--gp-stepper-control-size);
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  box-shadow: none;
  z-index: 1;
}
html body .el-input-number .el-input-number__decrease,
html body .gp-stepper__button--minus { left: 0; right: auto; }
html body .el-input-number .el-input-number__increase,
html body .gp-stepper__button--plus { right: 0; left: auto; }
html body .el-input-number .el-input-number__decrease::after,
html body .el-input-number .el-input-number__increase::after { content: none; }
html body .el-input-number .el-input-number__decrease:hover,
html body .el-input-number .el-input-number__increase:hover,
html body .gp-stepper__button:hover { color: var(--gp-stepper-text) !important; }
html body .el-input-number .el-input-number__decrease:focus-visible,
html body .el-input-number .el-input-number__increase:focus-visible,
html body .gp-stepper__button:focus-visible { outline: 2px solid var(--pc, #007aff); outline-offset: -3px; }
html body .el-input-number .is-disabled,
html body .el-input-number.is-disabled .el-input-number__decrease,
html body .el-input-number.is-disabled .el-input-number__increase,
html body .gp-stepper__button:disabled {
  color: var(--gp-stepper-muted) !important;
  cursor: not-allowed;
}
html body .el-input-number.is-disabled,
html body .gp-stepper[aria-disabled="true"] { opacity: .65; }
html body .el-input-number.is-disabled .el-input__inner { cursor: not-allowed; }
/* Native print/time steppers use the same 29 / 42 / 29 proportions. */
html body .gp-stepper { padding: 0; }
html body .gp-stepper__value { position: absolute; left: 29%; top: 0; width: 42%; height: 100%; }
/* Read-only numeric displays are not given fake, non-working buttons. */
html body .el-input-number.is-without-controls .el-input__wrapper { padding: 0; }
/* Keep digit areas usable in specification grids and translated forms. Scroll the grid, never the page. */
.spec-matrix-wrap { min-width: 0; }
.spec-cell__row { min-width: 170px; }
.spec-cell__lbl { white-space: normal; overflow-wrap: anywhere; flex: 0 0 40px; }
.spec-cell__row .el-input-number { flex: 1 0 116px; }
html body .spec-matrix .el-input-number { min-width: 116px; }
html body .pc-modal__copies { flex-wrap: wrap; gap: 10px; }
html body .pc-modal__copies .gp-stepper { flex: 0 0 160px; }
@media (pointer: coarse) {
  html body .el-input-number,
  html body .gp-stepper { --gp-stepper-height: 40px; }
  html body .el-input-number--small,
  html body .gp-stepper--small { --gp-stepper-height: 36px; }
  html body .el-input-number--large { --gp-stepper-height: 44px; }
}

/* #254 上下箭头式（controls-position="right"，合并发货每行的数量框）：
   两个按钮竖排在右侧，只占一份轨道宽。通用规则把 decrease 钉在左边缘（那是「左右按钮」式），
   这里按回右边缘并各占一半高度；轨道宽沿用 --gp-stepper-rail，数字区因此只让出一次宽度。 */
html body .el-input-number.is-controls-right .el-input .el-input__wrapper {
  padding-left: 8px;
  padding-right: var(--gp-stepper-rail);
}
html body .el-input-number.is-controls-right .el-input-number__increase {
  top: 0;
  bottom: auto;
  left: auto;
  right: 0;
  height: 50%;
  width: var(--gp-stepper-rail);
}
html body .el-input-number.is-controls-right .el-input-number__decrease {
  top: 50%;
  bottom: 0;
  left: auto;
  right: 0;
  height: 50%;
  width: var(--gp-stepper-rail);
}

/* #251 「多客户分开收银」那一行：支付方式定宽，把宽度让给金额框。 */
.pos-mp__method { flex: 0 1 120px; min-width: 0; }

/* §76 的 44px 触摸下限在「上下叠箭头」形态上不可能达标：控件总高 42px，两键各占一半 ≈21px。
   触摸端（pointer: coarse）把 is-controls-right 退回左右全高按钮并抬高到 44px；
   桌面（fine pointer）继续用叠 arrow 省宽度。写在文件末尾，特异度与上方 #254 规则相同，靠顺序覆盖。 */
@media (pointer: coarse) {
  /* 46 而不是 44：控件有上下各 1px 边框，绝对定位的按钮只占 padding box，
     44 高的控件里按钮实测 42px，仍低于 §76 的 44px 下限。 */
  html body .el-input-number.is-controls-right { --gp-stepper-height: 46px; }
  html body .el-input-number.is-controls-right .el-input .el-input__wrapper {
    padding: 0 var(--gp-stepper-rail);
  }
  html body .el-input-number.is-controls-right .el-input-number__increase {
    top: 0; bottom: 0; left: auto; right: 0; height: 100%;
  }
  html body .el-input-number.is-controls-right .el-input-number__decrease {
    top: 0; bottom: 0; left: 0; right: auto; height: 100%;
  }
}