/* 在 Bootstrap 之后加载。只写 Bootstrap 没有的东西，
   以及仓库现场必须改的两处默认值（触控高度、表格密度）。
   Bootstrap 自带的 card/btn/badge/alert/table 一律不重写，
   重写一遍等于把它 230KB 的好处扔掉。 */

:root{
  --navh:56px;              /* 顶栏实际高度，粘性表头要用 */
  /* 用户要求不留左右空白：内容区按视口宽度铺满，不再用固定 1680px 居中限制。 */
  --app-max:100%;
  /* Bootstrap 默认字体栈里 Segoe UI 没有中文字形，Windows 上会逐字回落，
     中英混排时行高跳。显式插一个中文字体。 */
  --bs-font-sans-serif:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",
    "PingFang SC","Noto Sans CJK SC",sans-serif;

  /* 主色对浅色/暗色都使用 Element Plus 的蓝色。 */
  --bs-primary:#409eff;
  --bs-primary-rgb:64,158,255;
  --bs-link-color:#409eff;
  --bs-link-hover-color:#337ecc;
  --bs-border-radius:.25rem;
  --bs-border-radius-sm:.2rem;
  --bs-border-radius-lg:.3rem;
}

/* 浅色模式用 Element Plus 浅色外观；暗色模式不覆盖这些变量，
   交给 Bootstrap 自己的 data-bs-theme=dark 配色，否则暗色会失效。 */
:root[data-bs-theme="light"]{
  --bs-body-color:#303133;
  --bs-secondary-color:#606266;
  --bs-border-color:#dcdfe6;
  --bs-body-bg:#f5f7fa;
  --bs-tertiary-bg:#f5f7fa;
}

/* 用户反馈：去掉页面级滚动条，并禁止整个页面滚动。
   内容过长时由 .app-main 作为唯一的滚动容器，
   但它的滚动条也隐藏——保留滚轮/触摸可用，不出现右边那条碍事的长条。 */
html,body{
  height:100%;
  overflow:hidden;
}
html{
  scrollbar-width:none;
}
html::-webkit-scrollbar{
  display:none;
}

/* 用户反馈：Bootstrap focus 蓝圈/高亮太显眼，去掉输入框的强高亮。
   保留边框颜色不变，避免每个输入框都像“被选中”。 */
.form-control:focus,
.form-select:focus,
.form-check-input:focus{
  border-color:var(--bs-border-color);
  box-shadow:none;
}

/* ---------- 布局 ---------- */
.app-main{
  max-width:var(--app-max);
  margin:0 auto;
  padding:16px 16px 64px;
  height:calc(100vh - var(--navh));
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
}
.app-main::-webkit-scrollbar{
  display:none;
}
@media (max-width:640px){.app-main{padding:10px 10px 64px}}

/* 两栏：左表格右标签预览。用 grid 而不是 Bootstrap 的 col-*，
   因为右栏要定宽（标签预览宽度由 mm 决定，跟着百分比缩放会变形）。 */
.split{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) 400px;
  align-items:start}
.split>*{min-width:0}                       /* 不加这条，长表格会把左栏顶宽 */
/* 右栏跟着滚：勾选框在左边，勾一条要能立刻在右边看到标签变化。 */
.split-side{position:sticky;top:16px}
@media (max-width:1100px){
  .split{grid-template-columns:minmax(0,1fr)}
  .split-side{position:static}
}

/* ---------- 触控 ---------- */
/* PDA 是戴手套点的，Bootstrap 默认 38px 太小，按 48px 走。 */
.btn,.form-control,.form-select{min-height:44px}
@media (max-width:820px){
  .btn,.form-control,.form-select{min-height:48px}
  .form-check-input{width:1.4em;height:1.4em;margin-top:.15em}
}
.btn-sm{min-height:34px}                    /* 表格行内按钮豁免 */

/* ---------- 表格 ---------- */
.scroll{overflow:auto;max-height:70vh;border:1px solid var(--bs-border-color);
  border-radius:.5rem}
/* 粘性表头只在 .scroll 里生效。sticky 是相对最近的滚动容器解算的，
   不是相对视口 —— 之前给它写 top:52px 想避开顶栏，结果表头被钉在滚动框
   内部往下 52px，上面露出一行数据。滚动容器里正确值只能是 0。 */
.scroll thead th{position:sticky;top:0;z-index:2;
  background:var(--bs-body-bg);box-shadow:inset 0 -1px 0 var(--bs-border-color)}
.table>:not(caption)>*>*{padding:.45rem .55rem}   /* 比 table-sm 再紧一点 */
.nowrap{white-space:nowrap}
.pre{white-space:pre-line}

/* ---------- KPI 小卡 ---------- */
/* 用 auto-fit 而不是 Bootstrap 的 row/col：指标数量各页不同（4~9 个），
   auto-fit 不用为每页算 col-md-3 还是 col-md-2。 */
.kpigrid{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.kpi{background:var(--bs-tertiary-bg);border-radius:.5rem;padding:10px 12px}
.kpi b{display:block;font-size:22px;line-height:1.2}
.kpi span{font-size:12px;color:var(--bs-secondary-color)}

/* ---------- 条码标签 ---------- */
/* 尺寸走 CSS 变量，由 JS 从设置里灌。--lw/--lh 单位是 mm。 */
.label{width:var(--lw,60mm);height:var(--lh,40mm);background:#fff;color:#000;
  border:1px solid var(--bs-border-color);border-radius:4px;
  padding:1mm 1.5mm;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.4mm;overflow:hidden}
/* 条码必须优先完整显示：不允许被文字内容挤压缩小或裁掉。 */
.label svg{flex:0 0 auto;display:block;max-width:100%}
.label .lcode{flex:0 0 auto;font-family:ui-monospace,Consolas,monospace;
  font-weight:700;letter-spacing:.4px;line-height:1.1;overflow:hidden}
/* 文字区最多显示两行，避免把条码挤出标签；多余内容在标签上截断。 */
.label .lname{flex:0 1 auto;font-weight:600;text-align:center;line-height:1.15;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.label .lmeta,.label .lsrc{flex:0 1 auto;line-height:1.15;text-align:center;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.label .lsrc{color:#666}
.sheetgrid{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- 打印 ---------- */
/* @page 的 size 不认 var() —— Chromium 里 @page 读不到 :root 的自定义属性，
   写了会被整条忽略然后回落成 A4，一张标签打三页。所以 @page 由 JS 写死
   字面值注入（见 index.html 的 applySize / #pagesize）。 */
@media print{
  /* 打印时必须解除“单屏滚动容器”的限制：
     否则 .app-main 被当成可视区域，只打印第一屏，选 4 张只出 1 页。 */
  html,body{background:#fff!important;height:auto!important;overflow:visible!important}
  /* .split-side 不能整块藏 —— 标签预览就在里面。藏的是它的卡片外壳
     （.no-print），标签本体要留下。 */
  .navbar,.no-print{display:none!important}
  .app-main{max-width:none!important;padding:0!important;margin:0!important;
    height:auto!important;overflow:visible!important}
  .split{display:block}
  .split-side{position:static!important;max-width:none!important}
  .card,.card-body{border:0!important;padding:0!important;margin:0!important;
    background:#fff!important;overflow:visible!important;max-height:none!important}
  .sheetgrid{gap:0;display:block;max-height:none!important;overflow:visible!important}
  .label{border:0;border-radius:0;page-break-after:always;break-after:page;
    overflow:visible!important}
  .label:last-child{page-break-after:auto;break-after:auto}
  /* 打印时不要截断文字：标签上的编码、产品名、规格都要完整印出来。 */
  .label .lcode,.label .lname,.label .lmeta{
    overflow:visible!important;
    display:block!important;
    -webkit-line-clamp:unset!important;
  }
  .label .lsrc{display:none}
}