/* ============================================================
   景区售票管理后台 - 全局样式
   ============================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body,
#app {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  font-size: 14px;
  color: #303133;
  background: #f0f2f5;
}

/* ---------- 登录页 ---------- */
.login-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f5d42 0%, #1a7f5a 45%, #2aa876 100%);
  position: relative;
  overflow: hidden;
}

.login-wrap::before,
.login-wrap::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}

.login-wrap::before {
  width: 620px;
  height: 620px;
  top: -240px;
  right: -160px;
}

.login-wrap::after {
  width: 460px;
  height: 460px;
  bottom: -200px;
  left: -120px;
}

.login-card {
  position: relative;
  z-index: 2;
  width: 430px;
  background: #fff;
  border-radius: 16px;
  padding: 46px 44px 38px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.login-brand {
  text-align: center;
  margin-bottom: 32px;
}

.login-brand h1 {
  font-size: 25px;
  font-weight: 700;
  color: #1a7f5a;
  letter-spacing: 1px;
}

.login-brand p {
  font-size: 13px;
  color: #909399;
  margin-top: 10px;
}

.login-tip {
  margin-top: 18px;
  font-size: 12px;
  color: #a8abb2;
  text-align: center;
  line-height: 1.8;
}

/* 登录页的前端版本号（2026-10-20）：部署后不看 F12 也能确认前端换了没 */
.login-ver {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #ebeef5;
  font-size: 12px;
  color: #c0c4cc;
  text-align: center;
  letter-spacing: 0.4px;
  user-select: text;   /* 方便复制了发给技术看 */
}

/* ---------- 布局 ---------- */
.layout {
  display: flex;
  height: 100%;
}

.sidebar {
  width: 220px;
  background: #1f2d3d;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: width 0.2s;
}

.sidebar.collapsed {
  width: 64px;
}

.sidebar-logo {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-logo .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2aa876;
  margin-right: 12px;
  flex-shrink: 0;
}

.sidebar-menu {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}

.sidebar-menu::-webkit-scrollbar {
  width: 4px;
}

.sidebar-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

/* 侧边栏底部的前端版本号（2026-10-20）：常驻可见，确认"这台机器跑的是哪一版" */
.sidebar-ver {
  flex-shrink: 0;
  padding: 10px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  user-select: text;
  cursor: default;
}

.sidebar-ver:hover {
  color: rgba(255, 255, 255, 0.6);
}

/**
 * ★ 构建批号（2026-10-21 补丁 x）
 *   侧边栏是 `white-space: nowrap; overflow: hidden`，v20261021x 与 build 20261021x
 *   拼一行在 220px 宽里会被截掉尾巴 —— 而截掉的正好是"这批是第几批"，等于白加。
 *   所以让它**单独占一行**、字号再小一号。
 */
.sidebar-ver .sb-build {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.22);
  letter-spacing: 0.3px;
}

.menu-group-title {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  padding: 16px 22px 8px;
  letter-spacing: 1px;
}

.sidebar.collapsed .menu-group-title {
  display: none;
}

.menu-item {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s;
  white-space: nowrap;
  overflow: hidden;
}

.menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.menu-item.active {
  background: #1a7f5a;
  color: #fff;
  font-weight: 500;
}

.menu-item .icon {
  width: 18px;
  text-align: center;
  margin-right: 14px;
  flex-shrink: 0;
  font-size: 15px;
}

.sidebar.collapsed .menu-item {
  padding: 0;
  justify-content: center;
}

.sidebar.collapsed .menu-item .icon {
  margin-right: 0;
}

.sidebar.collapsed .menu-item .label {
  display: none;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.header {
  height: 60px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.06);
  flex-shrink: 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.collapse-btn {
  cursor: pointer;
  font-size: 18px;
  color: #606266;
  user-select: none;
}

.page-title {
  font-size: 17px;
  font-weight: 600;
  color: #1f2d3d;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.scenic-switch {
  width: 190px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #606266;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1a7f5a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* ---------- 通用卡片 ---------- */
.page-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.05);
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.toolbar-right {
  margin-left: auto;
  display: flex;
  gap: 10px;
}

/* ---------- 统计卡片 ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.stat-card {
  background: #fff;
  border-radius: 8px;
  padding: 22px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.05);
  display: flex;
  align-items: center;
  gap: 18px;
}

.stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  flex-shrink: 0;
}

.stat-icon.green { background: linear-gradient(135deg, #1a7f5a, #2aa876); }
.stat-icon.blue { background: linear-gradient(135deg, #1677ff, #40a9ff); }
.stat-icon.orange { background: linear-gradient(135deg, #fa8c16, #ffb84d); }
.stat-icon.purple { background: linear-gradient(135deg, #722ed1, #9254de); }

.stat-meta {
  min-width: 0;
}

.stat-value {
  font-size: 26px;
  font-weight: 700;
  color: #1f2d3d;
  line-height: 1.3;
}

.stat-label {
  font-size: 13px;
  color: #909399;
  margin-top: 4px;
}

.stat-sub {
  font-size: 12px;
  color: #c0c4cc;
  margin-top: 2px;
}

/* ---------- 图表 ---------- */
.chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 1100px) {
  .chart-grid {
    grid-template-columns: 1fr;
  }
}

.chart-box {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.05);
}

.chart-title {
  font-size: 15px;
  font-weight: 600;
  color: #1f2d3d;
  margin-bottom: 16px;
}

.chart-canvas {
  width: 100%;
  height: 300px;
}

/* ---------- 表格 ---------- */
.el-table {
  font-size: 13px;
}

.table-actions .el-button + .el-button {
  margin-left: 6px;
}

.mono {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-size: 12px;
}

.pagination-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

/* ---------- 状态标签 ---------- */
.status-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 18px;
}

.status-pending { background: #fff7e6; color: #d46b08; }
.status-rejected { background: #fff1f0; color: #cf1322; }
.status-paid { background: #e8f5ef; color: #1a7f5a; }
.status-used { background: #f0f1f3; color: #606266; }
.status-cancelled { background: #f0f1f3; color: #909399; }
.status-refunding { background: #fff7e6; color: #d46b08; }
.status-partial_refunded { background: #fff7e6; color: #d46b08; }
.status-refunded { background: #fff1f0; color: #cf1322; }
.status-success { background: #e8f5ef; color: #1a7f5a; }
.status-fail { background: #fff1f0; color: #cf1322; }

/* ---------- 其他 ---------- */
.text-muted { color: #909399; }
/* 二销页面（2026-10-08 批次①）：表格里的次要说明 / 空列表提示
   与 .text-muted 同色，只是把「12px 小字」和「居中留白」固定成类，免得各页各写一遍 */
.sub-tip { color: #909399; font-size: 12px; line-height: 1.5; }
.empty-tip { color: #909399; font-size: 13px; padding: 18px 0 8px; text-align: center; }
.text-danger { color: #f56c6c; }
.text-success { color: #1a7f5a; }

.empty-block {
  text-align: center;
  padding: 60px 0;
  color: #909399;
}

.detail-section {
  margin-bottom: 22px;
}

.detail-section-title {
  font-size: 15px;
  font-weight: 600;
  color: #1f2d3d;
  margin-bottom: 14px;
  padding-left: 10px;
  border-left: 3px solid #1a7f5a;
}

.qr-thumb {
  width: 100px;
  height: 100px;
}

.credential-box {
  background: #f0f9f5;
  border: 1px dashed #a8d5c2;
  border-radius: 6px;
  padding: 16px;
  margin-top: 10px;
}

.credential-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 14px;
}

.credential-row:last-child {
  margin-bottom: 0;
}

.credential-label {
  color: #606266;
  width: 70px;
  flex-shrink: 0;
}

.credential-value {
  font-family: monospace;
  font-size: 15px;
  font-weight: 600;
  color: #1a7f5a;
  letter-spacing: 0.5px;
}

/* ---------- 图片上传（景区 Logo / 首页照片） ---------- */
.img-field {
  display: flex;
  align-items: center;
  gap: 12px;
}

.img-preview-sm {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid #e4e7ed;
  background: #f5f7fa;
}

/* 票种图片预览（比 Logo 大一些，看得出是什么票） */
.img-preview-md {
  width: 84px;
  height: 62px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid #e4e7ed;
  background: #f5f7fa;
}

.img-preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a8abb2;
  font-size: 18px;
}

.img-field-ops {
  display: flex;
  align-items: center;
  gap: 4px;
}

.banner-field {
  width: 100%;
}

.banner-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.banner-item {
  position: relative;
  width: 132px;
  height: 84px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e4e7ed;
}

.banner-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.banner-badge {
  position: absolute;
  left: 0;
  top: 0;
  padding: 1px 6px;
  font-size: 11px;
  color: #fff;
  background: rgba(26, 127, 90, 0.85);
  border-bottom-right-radius: 6px;
}

.banner-ops {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  gap: 2px;
  padding: 2px 4px;
  background: rgba(0, 0, 0, 0.45);
  border-bottom-left-radius: 6px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}

.banner-ops span {
  padding: 0 2px;
}

.banner-ops span:hover {
  color: #ffd666;
}

.banner-add {
  width: 132px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #c0c4cc;
  border-radius: 6px;
  color: #909399;
  font-size: 13px;
  background: #fafafa;
  cursor: pointer;
}

.banner-add:hover {
  border-color: #1a7f5a;
  color: #1a7f5a;
}

/* ---------- 订单：票级核销可视化 ---------- */
/* 列表「核销情况」标签：一眼看出这单还有没有没用完的票 */
.status-check-none { background: #f0f1f3; color: #909399; }
.status-check-partial { background: #fff7e6; color: #d46b08; }
.status-check-done { background: #e8f5ef; color: #1a7f5a; }
.status-check-void { background: #f0f1f3; color: #a8abb2; }
.status-check-unknown { background: #f5f7fa; color: #c0c4cc; }

/* 单张票「待使用」标签 */
.status-unused { background: #fff2e8; color: #d4380d; }

/* 展开行：逐票平铺 */
.expand-box { padding: 6px 12px 10px 46px; background: #fbfcfd; }

.ticket-list {
  border: 1px solid #ebeef5;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.tk-row {
  padding: 8px 12px;
  font-size: 13px;
  color: #303133;
  border-bottom: 1px solid #f2f3f5;
}

/* 每张票的信息行（编号 / 票名 / 游客 / 状态 / 票码 / 操作） */
.tk-line {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tk-row:last-child { border-bottom: none; }
.tk-row.tk-unused { background: #fffdf7; }
.tk-row.tk-used { color: #909399; }
.tk-row.tk-refunded { color: #c0c4cc; }

.tk-no { width: 34px; color: #a8abb2; font-size: 12px; flex-shrink: 0; }
/* ② 票名不再截断：给足宽度、允许换行、鼠标悬停看全名（原来固定 120px + 省略号，长票名看不到） */
.tk-name {
  width: 210px;
  min-width: 210px;
  font-weight: 600;
  flex-shrink: 0;
  white-space: normal;
  word-break: break-all;
  line-height: 1.45;
}
/* 按门票视图的票种列同样加粗显示 */
.tk-name-inline { font-weight: 600; }
.tk-user { width: 180px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-user em { font-style: normal; font-size: 11px; margin-left: 6px; }
.tk-status { width: 96px; flex-shrink: 0; }
.tk-time { width: 150px; flex-shrink: 0; font-size: 12px; }
.tk-time em { font-style: normal; margin-left: 6px; }
.tk-code { flex: 1; min-width: 120px; color: #606266; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-op { width: 84px; flex-shrink: 0; text-align: right; }

/* ⑤ 套票核销流水：第几次 / 什么时候 / 在哪个检票点 / 谁检的
   （扯皮时靠这几行还原「这张票在哪儿检过、检了几次」） */
.tk-flow { margin: 5px 0 0 34px; }
.tk-flow-item {
  position: relative;
  padding: 2px 0 2px 14px;
  font-size: 12px;
  color: #606266;
  line-height: 1.8;
}
.tk-flow-item::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #52c41a;
}
.tk-flow-item.none { color: #c0c4cc; }
.tk-flow-item.none::before { background: #dcdfe6; }
.flow-seq { color: #303133; font-weight: 600; }
.flow-place { color: #1677ff; font-weight: 600; }

/* 详情抽屉里的核销记录列 */
.detail-flow-item {
  font-size: 12px;
  color: #606266;
  line-height: 1.8;
  white-space: nowrap;
}
.detail-flow-item .flow-seq { margin-right: 4px; }

/* 订单列表：含套票时补显示「次数」维度 */
.check-times { margin-top: 3px; font-size: 12px; color: #909399; }
.check-times b { color: #d46b08; }

/* ④ 合计条：当前筛选条件下的全部结果 */
.sum-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 12px;
  padding: 10px 14px;
  background: #f5f9ff;
  border: 1px dashed #a0cfff;
  border-radius: 6px;
  font-size: 13px;
  color: #303133;
}
.sum-bar .sum-title { color: #606266; }
.sum-bar b { font-size: 15px; color: #d4380d; }
.sum-bar .sum-amount { color: #cf1322; }

/* ③ 按票种汇总（今天哪种票卖了多少） */
.group-panel {
  margin-top: 12px;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  overflow: hidden;
}
.gp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: #fafafa;
  font-size: 13px;
  font-weight: 600;
  color: #303133;
  cursor: pointer;
  user-select: none;
}
.gp-head .text-muted { font-weight: 400; font-size: 12px; }
.gp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gp-table th,
.gp-table td {
  padding: 8px 14px;
  border-top: 1px solid #ebeef5;
  text-align: left;
}
.gp-table th { background: #fcfcfd; color: #606266; font-weight: 600; }
.gp-table .gp-total { font-weight: 700; background: #fafafa; }

/* 核销记录：第几次标签 */
.tag-seq {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 3px;
  background: #e6f4ff;
  color: #0958d9;
  font-size: 12px;
  line-height: 20px;
}


/* 详情抽屉：票级汇总条 */
.ticket-summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: #f7f9f8;
  border-radius: 6px;
  font-size: 13px;
  color: #606266;
}

.ticket-summary b { font-size: 15px; }
.ts-unused b { color: #d4380d; }
.ts-used b { color: #1a7f5a; }
.ts-refunded b { color: #cf1322; }
.ts-toggle { margin-left: auto; }

/* 详情明细行高亮：未使用醒目、已核销置灰 */
.el-table .row-unused td { background: #fffdf7 !important; }
.el-table .row-used td { color: #909399; }

/* ---------- 投诉建议 ---------- */
/* 处理状态标签（待处理沿用 .status-pending） */
.status-processing { background: #e6f4ff; color: #0958d9; }
.status-done { background: #e8f5ef; color: #1a7f5a; }

/* 列表里的内容与回复：限制行数，避免一条长文把表格撑爆 */
.fb-content {
  color: #303133;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-all;
}

.fb-reply {
  color: #1a7f5a;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-all;
}

/* 图片缩略图（列表小图 / 弹窗大图） */
.fb-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.fb-thumb {
  width: 56px;
  height: 56px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  cursor: zoom-in;
}

.fb-thumb-lg {
  width: 96px;
  height: 96px;
  border-radius: 6px;
  border: 1px solid #ebeef5;
  cursor: zoom-in;
}

/* 处理弹窗里的详情块 */
.fb-detail-row {
  font-size: 13px;
  color: #303133;
  margin-bottom: 6px;
}

.fb-detail-content {
  margin-top: 10px;
  padding: 12px 14px;
  background: #f8f9fb;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.7;
  color: #303133;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow-y: auto;
}

/* ============================================================
   小程序首页装修（景区配置弹窗内）
   ============================================================ */

/* 主题配色色卡 */
.theme-picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.theme-swatch {
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  border: 2px solid transparent; box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; font-weight: 700; line-height: 1;
  transition: transform .12s;
}
.theme-swatch:hover { transform: translateY(-1px); }
.theme-swatch.on { border-color: #1a1d24; }
.theme-name { font-size: 12.5px; color: #5c6470; margin-left: 2px; }

/* 首页模块列表 */
.mod-list {
  border: 1px solid #eef0f3; border-radius: 8px; padding: 6px; background: #fafbfc;
}
.mod-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-radius: 7px; background: #fff; margin-bottom: 6px;
}
.mod-row:last-child { margin-bottom: 0; }
.mod-row.off { opacity: .5; }
.mod-row .mod-name { flex: 1; font-size: 13px; }
.mod-row .mod-name em { font-style: normal; color: #8a8f99; font-size: 12px; }
.mod-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* 景点介绍列表 */
.spot-list {
  border: 1px solid #eef0f3; border-radius: 8px; padding: 8px; background: #fafbfc;
}
.spot-row {
  display: flex; align-items: center; gap: 10px; padding: 8px;
  border-radius: 7px; background: #fff; margin-bottom: 8px;
}
.spot-row:last-child { margin-bottom: 0; }
.spot-thumb {
  width: 54px; height: 40px; border-radius: 6px; overflow: hidden; flex: none;
  background: #f2f3f5; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #b0b5bf;
}
.spot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spot-fields { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.spot-ops { display: flex; align-items: center; gap: 2px; flex: none; }

/* ---------- 小程序配置（AppID / AppSecret / 商户证书） ---------- */

/* AppSecret 默认只显示「已设置/未设置」，点「重新设置」才展开输入框 */
.secret-field,
.cert-field {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* 状态小标签：已设置/已就位 = 绿，未设置/未就位 = 灰中带暖 */
.state-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}
.state-tag.on { background: #e8f5ef; color: #1a7f5a; border: 1px solid #b7dfcd; }
.state-tag.off { background: #fdf0e6; color: #b26314; border: 1px solid #f0d3b4; }

/* 状态小标签：临期告警 = 琥珀色（与 on/off 并列使用） */
.state-tag.warn { background: #fdf6e3; color: #b8860b; border: 1px solid #f0dfa8; }

/* 敏感配置锁条（小程序 / 支付 / 租期字段默认只读） */
.lock-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 14px;
  background: #f7f8fa;
  border: 1px dashed #dcdfe6;
  border-radius: 6px;
}
.lock-bar-right { margin-left: auto; }
.lock-tip { color: #909399; font-size: 12px; line-height: 1.6; }
.pwd-error { color: #f56c6c; font-size: 12px; margin-top: 6px; }

/* 支付配置完备性清单（切「正式收款」前的逐项校验） */
.pay-check {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 8px;
  padding: 8px 10px;
  background: #fafafa;
  border-radius: 6px;
  border: 1px solid #ebeef5;
}
.check-item { font-size: 12px; line-height: 18px; }
.check-item.ok { color: #1a7f5a; }
.check-item.bad { color: #c45656; }
.check-hint { color: #909399; font-style: normal; margin-left: 4px; }

/* 服务到期提醒横幅（临期 / 已过期） */
.expire-banner {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.6;
}
.expire-banner.warning { background: #fdf6e3; color: #b8860b; border: 1px solid #f0dfa8; }
.expire-banner.danger { background: #fef0f0; color: #c45656; border: 1px solid #fbc4c4; }

/* 模拟支付标记：列表内联小标签（订单展开行 / 票码列） */
.mock-chip {
  display: inline-block;
  margin-right: 5px;
  padding: 0 5px;
  height: 17px;
  line-height: 17px;
  font-size: 11px;
  font-family: inherit;
  color: #fff;
  background: #d9534f;
  border-radius: 3px;
  vertical-align: middle;
  white-space: nowrap;
}

/* 统计卡片里「其中模拟 N 笔」这类补充说明：比常规 stat-sub 更轻、带警示色 */
.stat-sub.mock-sub { color: #c45656; font-weight: 600; }

/* ============================================================
   批次 15② 前端权限化：操作日志页 / 角色管理页 / 无权限兜底页
   ============================================================ */

/* 顶栏身份标签（平台超管 / 景区管理员 …） */
.role-tag { margin-right: 10px; }

/* 说明条（操作日志、角色管理页顶部） */
.alert-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
  padding: 9px 12px;
  background: #f4f8ff;
  border: 1px solid #d6e4ff;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.7;
  color: #4a5a75;
}
.alert-tip .tip-icon { font-size: 15px; line-height: 1.4; }
.alert-tip b { color: #2f5aa8; }

/* 操作日志：模块小标签 / 内容摘要 */
.tag-module {
  display: inline-block;
  padding: 1px 7px;
  font-size: 12px;
  color: #2f5aa8;
  background: #eaf1ff;
  border: 1px solid #d6e4ff;
  border-radius: 3px;
  white-space: nowrap;
}
.log-content { font-size: 12px; color: #606266; word-break: break-all; }

/* 无权限兜底页 */
.no-perm {
  margin: 60px auto 0;
  max-width: 460px;
  padding: 36px 28px;
  text-align: center;
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 10px;
}
.no-perm-icon { font-size: 42px; line-height: 1; margin-bottom: 14px; }
.no-perm-title { font-size: 18px; font-weight: 600; color: #303133; margin-bottom: 10px; }
.no-perm-desc { font-size: 13px; color: #909399; line-height: 1.8; margin-bottom: 20px; }

/* 角色管理：角色概览卡片 */
.role-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.role-card {
  flex: 1 1 210px;
  min-width: 200px;
  padding: 12px 14px;
  background: #fafbfc;
  border: 1px solid #ebeef5;
  border-radius: 8px;
}
.role-card.mine { background: #f0f9eb; border-color: #c2e7b0; }
.role-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.role-name { font-size: 15px; font-weight: 600; color: #303133; }
.role-code { font-size: 11px; color: #a8abb2; margin-bottom: 6px; }
.role-desc { font-size: 12px; color: #7a8290; line-height: 1.6; min-height: 34px; }
.role-count { margin-top: 8px; font-size: 12px; color: #606266; }
.role-count b { color: #d4380d; font-size: 14px; }
.role-count .all-perm { color: #c45656; font-weight: 600; }

/* 角色管理：权限矩阵表 */
.matrix-wrap { overflow-x: auto; }
.matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.matrix-table th,
.matrix-table td {
  border: 1px solid #ebeef5;
  padding: 7px 10px;
  text-align: center;
  white-space: nowrap;
}
.matrix-table thead th {
  background: #f5f7fa;
  color: #303133;
  font-weight: 600;
}
.matrix-table th.col-mine,
.matrix-table td.col-mine { background: #f0f9eb; }
.matrix-table .group-row td {
  background: #f7f9fc;
  text-align: left;
  font-weight: 600;
  color: #2f5aa8;
  letter-spacing: 0.5px;
}
.matrix-table td.col-perm { text-align: left; white-space: normal; min-width: 190px; }
.matrix-table .perm-label { color: #303133; }
.matrix-table .perm-code { display: block; font-size: 11px; color: #b0b6bf; }
.matrix-table .mark-yes { color: #52a03c; font-weight: 700; font-size: 14px; }
.matrix-table .mark-no { color: #d5d9de; }

/* ------------------------------------------------------------
   协查查询页（admin/js/pages/assist.js）
   只在本页使用，类名统一 as- 前缀，避免与其它页撞车。
------------------------------------------------------------ */
.form-hint {
  font-size: 12px;
  color: #8a8f99;
  line-height: 1.7;
  margin-top: 4px;
}
.form-hint b { color: #d4380d; }

.unlock-state {
  margin-left: 12px;
  font-size: 12px;
  color: #52a03c;
}

.as-summary {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 12px;
  font-size: 13px;
  color: #606266;
}
.as-sum-item b.as-num { color: #2f5aa8; font-size: 16px; }
.as-sum-item b.as-num-warn { color: #e6a23c; font-size: 15px; }
.as-sum-item em { font-style: normal; color: #8a8f99; }
.as-sum-right { margin-left: auto; }

.as-order {
  border: 1px solid #ebeef5;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: #fcfdff;
}
.as-order-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
}
.as-order-no { font-weight: 600; color: #303133; font-family: monospace; }
.as-order-scenic { color: #2f5aa8; }
.as-order-date { color: #606266; }
.as-order-status { color: #8a8f99; font-size: 12px; }
.as-order-right { margin-left: auto; }
.as-order-meta {
  margin-top: 4px;
  font-size: 12px;
  color: #8a8f99;
  line-height: 1.7;
}
/* 完整证件号：本页的"主角"，加粗变色，方便与对方提供的号码逐位核对 */
.as-id { color: #d4380d; font-weight: 600; letter-spacing: 0.5px; }

.as-mock {
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px dashed #e6a23c;
  border-radius: 6px;
  background: #fdf6ec;
}
.as-mock-head {
  font-size: 12px;
  color: #b88230;
  line-height: 1.7;
  margin-bottom: 10px;
}
.as-mock-head b { color: #d4380d; }

/* ============================================================
   打印输出（分销③c，2026-10-12）：对账单 / 应收台账 总账
   ------------------------------------------------------------
   做法：页面里放一个 `.print-layer`，用 Vue 的 `teleport to="body"`
   把它挂到 body 顶层（与后台框架平级）；屏幕上 `display:none`，
   打印时**只留它**。

   为什么不用「把 .layout 藏掉」：页面组件深埋在
   `.layout > .main > .content` 里，藏掉外层会把打印区一起藏掉，
   所以必须把打印区"搬"出后台框架 —— teleport 干的就这一件事。

   好处：
     1) 不改 DOM、不拼 HTML 字符串 → 没有转义 / XSS 风险；
     2) 打印层里的绑定还是同一份数据 → 屏幕上换了筛选，打印跟着变；
     3) 打印层在正常文档流里 → 长流水自动分页，不会被裁。
   想导出 PDF：浏览器打印对话框里选「另存为 PDF」即可，零依赖。
   ============================================================ */

.print-layer { display: none; }

@media print {
  /* 1) body 下除打印层以外的直接子节点（含整个 #app 后台框架、body 级弹窗）全部不输出 */
  body > *:not(.print-layer) { display: none !important; }
  body > .print-layer { display: block !important; }

  /* 2) A4 纵向 + 页边距（浏览器自带的页眉页脚请在打印对话框里取消勾选） */
  @page { size: A4 portrait; margin: 14mm 12mm; }

  html, body { height: auto !important; background: #fff !important; }
  body { color: #000; }

  .print-layer {
    font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
    font-size: 12px;
    line-height: 1.55;
    color: #000;
  }

  /* 抬头 */
  .pr-head {
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 2px solid #000;
    margin-bottom: 10px;
  }
  .pr-title { font-size: 20px; font-weight: 700; letter-spacing: 2px; }
  .pr-sub { font-size: 13px; margin-top: 4px; }

  /* 元信息行（客户 / 期间 / 打印时间 / 口径） */
  .pr-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    font-size: 12px;
    margin-bottom: 8px;
  }

  /* 明细表 */
  .pr-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 8px;
  }
  .pr-table th,
  .pr-table td {
    border: 1px solid #000;
    padding: 4px 6px;
    font-size: 11.5px;
    word-break: break-all;
  }
  .pr-table th { background: #f0f0f0; font-weight: 600; text-align: center; }
  .pr-table td { text-align: right; }
  .pr-table td.pr-l { text-align: left; }
  .pr-table td.pr-c { text-align: center; }
  .pr-table tfoot td { font-weight: 700; background: #f7f7f7; }
  /* 表格跨页：表头每页重复，单行不被劈开 */
  .pr-table thead { display: table-header-group; }
  .pr-table tr { page-break-inside: avoid; }

  /* 五个合计数（对账单用）：两行三列的小格子 */
  .pr-kv {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
  }
  .pr-kv th,
  .pr-kv td {
    border: 1px solid #000;
    padding: 5px 8px;
    font-size: 12px;
  }
  .pr-kv th {
    background: #f0f0f0;
    font-weight: 600;
    text-align: left;
    width: 11%;
    white-space: nowrap;
  }
  .pr-kv td { text-align: right; font-weight: 600; }

  /* 脚注：口径说明 */
  .pr-tip { font-size: 11.5px; color: #000; margin: 6px 0 14px; }

  /* 签字栏：甲乙双方 + 日期 */
  .pr-sign {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 26px;
    font-size: 13px;
  }
  .pr-sign-item { flex: 1; white-space: nowrap; }
}

/* ============================================================
   打印 · 纸型与针式专用（2026-10-19 谢总：窗口售票 + 后单打印）
   ------------------------------------------------------------
   ★ 本节**只补新东西**：抬头/表格/签字栏等通用版式沿用上面的「打印输出」块。
   ★ @page 尺寸不写在这里 —— 它必须随"用户选的纸型"变化，
     由页面在打印前动态注入一个 style 标签（见 distOrders.js 的 applyPageStyle）。
     这里的规则只在 @media print 生效，屏幕上不受影响。
   ============================================================ */
@media print {
  /* 单据纸（A4：默认 14mm/12mm 页边距下，内容区约 186mm） */
  .print-layer .pr-sheet.pr-paper-a4 {
    width: 186mm;
  }

  /* ★★ 241mm 针式连续纸（80 列）
     纸宽 241mm，两边各有约 12mm 的**孔边打不到** → 内容区约 217mm
     上下留白：顶部 4mm（别贴边）、底部 8mm（给撕纸口，否则字会被撕掉） */
  .print-layer .pr-sheet.pr-paper-dot241 {
    width: 241mm;
    padding: 4mm 12mm 8mm;
    font-size: 11.5px;
    line-height: 1.35;
  }
  .pr-paper-dot241 .pr-head {
    padding-bottom: 4px;
    border-bottom: 1px solid #000;
    margin-bottom: 4px;
  }
  .pr-paper-dot241 .pr-title { font-size: 15px; letter-spacing: 1px; }
  .pr-paper-dot241 .pr-comp { font-size: 12px; }
  .pr-paper-dot241 .pr-meta {
    gap: 2px 16px;
    font-size: 11px;
    margin-bottom: 4px;
  }
  .pr-paper-dot241 .pr-table { font-size: 11px; }
  .pr-paper-dot241 .pr-table th,
  .pr-paper-dot241 .pr-table td { padding: 2px 3px; }
  .pr-paper-dot241 .pr-footer { font-size: 11px; margin-top: 6px; }

  /* 新增的几个小部件 */
  .pr-comp {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
  }
  .pr-remark { font-size: 11.5px; margin-top: 4px; }
  .pr-footer { font-size: 12px; margin-top: 10px; }
  .pr-time { font-size: 10.5px; margin-top: 4px; color: #333; }

  /* ★ 补打 / 作废标记：必须显眼（防重复打印套单、防作废单流出） */
  .pr-mark-reprint {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
  }
  .pr-mark-void {
    margin-left: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
  }
}

/* ============================================================
 * 打印机档案 · 实时预览（2026-10-20 批次⑥-1）
 *   纸面按**真实毫米**画（宽高由组件按 mm 计算后写成 inline style），
 *   这里只管"像纸"的样子：白底、细边框、轻微投影、等宽字。
 *   ★ 不用百分比布局 —— 预览必须能看出"40×30 的标签到底多小"。
 * ============================================================ */
.pv-wrap {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pv-paper {
  background: #fff;
  border: 1px solid #d1d5db;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
  border-radius: 2px;
  padding: 8px 6px;
  box-sizing: border-box;
  overflow: hidden;
  word-break: break-all;
}
.pv-qr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #9ca3af;
  background: repeating-linear-gradient(
    45deg, #f9fafb, #f9fafb 3px, #eef0f3 3px, #eef0f3 6px
  );
  border-radius: 2px;
  vertical-align: top;
}

/* ============================================================
 * 打印机档案弹窗（2026-10-19 修复"点新增后一片空白"）
 *   ① 内容区可滚动：表单十几项，小屏上不滚就"看不见下面"，
 *      用户会当成"什么都没有"（谢总就是这么报的）
 *   ② 渲染错误条：真出错时把原因显示出来，而不是留一块空白让人猜
 * ============================================================ */
.printer-dlg .el-dialog__body {
  max-height: 68vh;
  overflow-y: auto;
  padding-top: 8px;
}
.printer-err {
  flex: 0 0 100%;
  margin-bottom: 10px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.7;
  color: #b42318;
  background: #fff4f2;
  border: 1px solid #ffd6d0;
  border-radius: 6px;
}

/* ============================================================
 * 打印机 · 版式/排版页（2026-10-19 批次⑥-2）
 *   谢总：「打印要能排版，比如二维码放左边，右边放文字；
 *          标签纸可以设置打印在上边/中间/下边。」
 *   这里只负责"好看好点"：元素列表、属性条、预览里的行/分隔线。
 * ============================================================ */
.lay-list {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  max-height: 42vh;
  overflow-y: auto;
  background: #fff;
}
.lay-el {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid #f3f4f6;
  font-size: 13px;
  cursor: pointer;
}
.lay-el:last-child { border-bottom: 0; }
.lay-el:hover { background: #f9fafb; }
.lay-el.on { background: #eef6ff; box-shadow: inset 3px 0 0 #409eff; }
/* 隐藏的元素变灰 —— 一眼看出"这个不打" */
.lay-el.off .nm { color: #b0b5bd; text-decoration: line-through; }
.lay-el .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lay-el .pos { flex: 0 0 auto; font-size: 12px; color: #6b7280; }
.lay-el .ops { flex: 0 0 auto; display: flex; gap: 4px; }
.lay-el .ops button {
  min-width: 34px; height: 24px; padding: 0 6px; font-size: 12px;
  border: 1px solid #dcdfe6; border-radius: 4px; background: #fff;
  color: #606266; cursor: pointer; font-family: inherit;
}
.lay-el .ops button:hover { border-color: #409eff; color: #409eff; }
.lay-el .ops button.del { color: #e05050; border-color: #f3c8c8; }
.lay-el .ops button.del:hover { background: #fff1f1; border-color: #e05050; }

.lay-prop {
  margin-top: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.lay-prop .ttl { font-size: 13px; font-weight: 700; margin-bottom: 8px; }

/* 预览：整块垂直位置 + 行分布 */
.pv-block { box-sizing: border-box; }
.pv-row { box-sizing: border-box; }
.pv-hr {
  flex: 1 1 auto;
  border-top: 1px dashed #b9bdc4;
  margin: 2px 0;
}

/* 版式页：预览区给足空间（纸面最宽 325px + 边框），padding 收紧 */
.printer-dlg .pv-wrap { padding: 10px; }
/* 版式页元素列表里的单元格：两栏时左中右分开 */
.pv-cell { display: inline-flex; align-items: center; }

/* ============================================================
 * 打印机 · 纸面画布（自由拖动，2026-10-19 批次⑥-3）
 * ------------------------------------------------------------
 * 谢总：「改成可以自由拖动？文本类内容就是一个文本框，可以调节文本框的大小，
 *        任意拖动。二维码也可以自由拖动。」
 * 尺寸/位置全部由 JS 按毫米换算出像素（.cv 的内联 style），这里只管长相。
 * ============================================================ */
.cv-outer {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  /* ★★ 2026-10-19（⑥-4b 放大按钮）：原来是 justify-content:center —— 放大后画布比容器宽，
     flex 居中会把**左边界裁到滚不到**，左边那几个元素永远看不见。
     改成 flex-start + 子项 margin:auto：不溢出时仍居中，溢出时左边界可滚到。 */
  justify-content: flex-start;
  align-items: flex-start;
  overflow: auto;
  max-height: 72vh;
}
.cv {
  /* ★ 与 .cv-outer 配套：不溢出时居中、溢出时贴左且可滚 */
  margin: auto;
  flex: 0 0 auto;
  position: relative;
  background-color: #fff;
  border: 1px solid #d1d5db;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
  box-sizing: border-box;
  overflow: hidden;
  /* 5mm 网格（尺寸由 JS 按 zoom 换算后写进 background-size） */
  background-image:
    linear-gradient(to right, #eef0f3 1px, transparent 1px),
    linear-gradient(to bottom, #eef0f3 1px, transparent 1px);
  background-position: -1px -1px;
  cursor: default;
  user-select: none;
}
.cv-el {
  position: absolute;
  box-sizing: border-box;
  border: 1px dashed transparent;
  border-radius: 1px;
  overflow: hidden;
  cursor: move;
}
.cv-el:hover { border-color: #a8c7fa; }
.cv-el.on { border-color: #409eff; box-shadow: 0 0 0 1px #409eff inset; }
.cv-txt {
  width: 100%;
  height: 100%;
  color: #000;
  word-break: break-all;
  overflow: hidden;
}
.cv-qr {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  background: repeating-linear-gradient(45deg, #000, #000 2px, #fff 2px, #fff 5px);
  position: relative;
}
.cv-qr .sz {
  position: absolute;
  right: 1px;
  bottom: 0;
  font-size: 10px;
  font-weight: 400;
  color: #374151;
  background: rgba(255, 255, 255, .85);
  padding: 0 2px;
}
.cv-line {
  width: 100%;
  border-top: 1px dashed #000;
  margin-top: 2px;
}
.cv-hz {
  position: absolute;
  /* ★ 必须放在框**里面**：.cv-el 是 overflow:hidden（文字要裁），
     放到框外（right:-6px）会被裁掉 → 手柄看不见也点不到，"拖大小"直接废掉。 */
  right: 0;
  bottom: 0;
  width: 11px;
  height: 11px;
  background: #409eff;
  border: 1px solid #fff;
  border-radius: 2px 0 0 0;
  cursor: nwse-resize;
  z-index: 3;
}

/* ============================================================
 * 打印机 · 画布里的明细表格（2026-10-19 批次⑥-4）
 * ------------------------------------------------------------
 * 谢总：「让后台那些出库单啊什么的也调用这里，这里可以自由编辑比较方便。」
 * 出库单有明细表，行数不固定 → 画布上画 3 行样例，真出票时按实际行数算高度。
 * 尺寸（宽高/行高）全部由 JS 按毫米换算后写在内联 style 上，这里只管长相。
 * ============================================================ */
.cv-table {
  width: 100%;
  height: 100%;
  border: 1px solid #9ca3af;
  background: #fff;
  font-size: 10px;
  color: #111;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cv-tr {
  display: flex;
  border-bottom: 1px solid #d1d5db;
  min-height: 0;
}
.cv-tr:last-child { border-bottom: 0; }
.cv-tr > span {
  padding: 1px 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-right: 1px solid #e5e7eb;
  box-sizing: border-box;
}
.cv-tr > span:last-child { border-right: 0; }
.cv-th {
  background: #f3f4f6;
  font-weight: 700;
}
.cv-tr:not(.cv-th):not(.cv-tf) { flex: 1; }
.cv-tf {
  background: #fafafa;
  font-weight: 700;
}

/* ============================================================
 * 打印中心 · 坐标版式出纸（2026-10-19 批次⑥-4）
 * ------------------------------------------------------------
 * 谢总：「让后台那些出库单啊什么的也调用这里，这里可以自由编辑比较方便。」
 * 元素位置全部由后端算好的毫米坐标写在内联 style 上（left/top/width），
 * 这里只管"纸上该长什么样"：表格线、字号、分页。
 * ★ 前缀用 .pc-*（print center），不和老「对账单」那套 .pr-* 冲突。
 * ============================================================ */
/*
 * ★★ 定位与表格基础样式**放在全局**，不塞进 @media print。
 *   原因：绝对定位是这套版式的命根子。如果只在 @media print 里定义，
 *   一旦某个环境没走到 print 媒体（预览、导出 PDF 工具、某些内核），
 *   所有元素会退化成"文档流一行一行排"—— 纸面看着还在，位置全错，
 *   而且**不报错**，最难查。放全局则屏幕和打印同一套定位。
 *   屏幕上 .print-layer 是 display:none，所以这些样式平时看不见。
 */
.pc-sheet {
  position: relative;
  background: #fff;
  color: #000;
  font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
  box-sizing: border-box;
  overflow: hidden;
}
.pc-el {
  position: absolute;
  box-sizing: border-box;
}
.pc-txt {
  width: 100%;
  height: 100%;
  color: #000;
  word-break: break-all;
}
.pc-hr {
  width: 100%;
  border-top: 1px solid #000;
}
.pc-tbl {
  border-collapse: collapse;
  table-layout: fixed;
}
.pc-tbl th,
.pc-tbl td {
  border: 1px solid #000;
  padding: 0 1.2mm;
  overflow: hidden;
  word-break: break-all;
  vertical-align: middle;
}
.pc-tbl th {
  font-weight: 700;
  background: #f2f2f2;
  text-align: center;
}
.pc-tbl tfoot td { font-weight: 700; background: #f7f7f7; }

@media print {
  /* 分页：一张单占一页 */
  .pc-sheet { page-break-after: always; }
  .pc-sheet:last-child { page-break-after: auto; }
  /* 跨页：表头每页重复，单行不被劈开 */
  .pc-tbl thead { display: table-header-group; }
  .pc-tbl tr { page-break-inside: avoid; }
}


/* ============================================================
 * 打印机 · 画布工具栏（缩放，2026-10-19 批次⑥-4b）
 * ------------------------------------------------------------
 * 谢总：「预览区能不能做一个放大按钮？这样好精细的调整位置。」
 * 放大只改显示比例，版式里的毫米数值一个都不动。
 * ============================================================ */
.cv-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.cv-zb {
  width: 22px;
  height: 22px;
  padding: 0;
  line-height: 20px;
  text-align: center;
  font-size: 14px;
  color: #303133;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
}
.cv-zb:hover:not(:disabled) { border-color: #409eff; color: #409eff; }
.cv-zb:disabled { opacity: .4; cursor: not-allowed; }
.cv-zb-fit { width: auto; padding: 0 7px; font-size: 12px; }
.cv-zp {
  min-width: 42px;
  text-align: center;
  font-size: 11px;
  color: #606266;
  font-variant-numeric: tabular-nums;
}

/* 画布下方：内容超出纸高的警告（标签纸固定高度，超出部分打不出来） */
.cv-over {
  margin-top: 6px;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.7;
  color: #b45309;
  background: #fff8e6;
  border: 1px solid #f5dab1;
  border-radius: 4px;
}