/* 流程卡标签：38.0mm × 100.6mm，热敏标签纸一张一页。
   打印方向反了就调换 --label-w / --label-h，并同步改下面 @page 的 size。 */
:root {
  --label-w: 38mm;
  --label-h: 100.6mm;
  --label-pad: 2.5mm;
  --qr-size: 26mm;
  /* 整体左右微调：印出来固定偏左/偏右时改这里（可负值） */
  --label-shift-x: 0mm;
}

.label {
  width: var(--label-w);
  /* 比页面矮 0.2mm：标签高度正好等于纸高时，浏览器取整会把最后一张挤到下一页（多出空白页） */
  height: calc(var(--label-h) - 0.2mm);
  box-sizing: border-box;
  padding: var(--label-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 字段少，整体居中，别顶在上半截 */
  overflow: hidden;
  background: #fff;
  color: #000;
  text-align: center;
  font-family: "Microsoft YaHei", "SimHei", sans-serif;
}
.label img { width: var(--qr-size); height: var(--qr-size); display: block; }
.label-field { width: 100%; margin-top: 2mm; }
.label-cap { font-size: 7pt; letter-spacing: .8pt; }
.label-val { font-size: 10.5pt; font-weight: 600; line-height: 1.3; word-break: break-all; }
.label-serial .label-val { font-size: 13pt; letter-spacing: .4pt; }
.label-tip { font-size: 7.5pt; }

/* 屏幕上按真实尺寸画一份，打之前先核对内容 */
@media screen {
  .label-grid { display: flex; flex-wrap: wrap; gap: 4mm; padding: 4mm; }
  .label { box-shadow: 0 0 0 1px #ccc; }
  /* 打印专用容器，只在打印那一刻有内容（见 LabelGrid.js 的 printLabels） */
  #print-root { display: none; }
}

@page { size: 38mm 100.6mm; margin: 0; }

/* 打印时把整个应用 display:none 拿掉，只留 #print-root 里的标签。
   不能用 visibility:hidden——它照样占布局，后台页那些看不见的表格会把文档撑成
   好几页，标签后面就多出一串空白页。 */
@media print {
  html, body { margin: 0; padding: 0; background: #fff; }
  #app { display: none !important; }
  #print-root { display: block; }
  .no-print { display: none !important; }

  .label-grid { display: block; padding: 0; }
  .label {
    box-shadow: none;
    page-break-inside: avoid;
    break-inside: avoid;
    /* 页面比标签宽时居中，别贴着左边；仍有固定偏移就改顶部 --label-shift-x */
    margin-left: calc((100% - var(--label-w)) / 2 + var(--label-shift-x));
  }
  .label + .label { page-break-before: always; break-before: page; }
}