@font-face{
  font-family: "ReceiptHei";
  src: url("./fonts/SourceHanSansSC-Medium.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "ReceiptHei";
  src: url("./fonts/SourceHanSansSC-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --primary:#2563eb;
  --primary-weak:#eff6ff;

  /* 有效打印宽度 */
  --receipt-width-mm: 48mm;

  /* 小票字体控制变量（可通过 JS 快捷接口修改） */
  --ticket-font-family: "ReceiptHei", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  --ticket-font-size: 11px; /* 基准字号，其他字号以 em 为单位相对该值 */
  --ticket-font-weight: 600; /* 基准字体粗细，其他权重以此为基础调整（如标题加粗可以设置为 700） */
  /* 打印偏移（正值向右，负值向左，单位 mm） */
  --ticket-offset-mm: 0mm;
}

*{ box-sizing:border-box; }
html, body { height:100%; }
body{
  margin:0;
  font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}

.container{
  max-width:1100px;
  margin:0 auto;
  padding:16px;
}

.header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.header h1{
  font-size:18px;
  margin:0;
}
.header p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px;
}

.layout{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:16px;
  align-items:start;
}

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

.card{
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  padding:12px;
}

.card-title{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:2px 0 12px;
}

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media (max-width: 520px){
  .grid{ grid-template-columns: 1fr; }
}

.field{ display:flex; flex-direction:column; gap:6px; }
.field span{ font-size:12px; color:var(--muted); }
input{
  width:100%;
  padding:10px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  outline:none;
}
input:focus{
  border-color: rgba(37,99,235,.6);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.row-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.btn{
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
}
.btn.primary{
  border-color: rgba(37,99,235,.35);
  background: var(--primary);
  color:#fff;
}
.btn.ghost{
  background: var(--primary-weak);
  border-color: rgba(37,99,235,.25);
  color: var(--primary);
}
.btn:active{ transform: translateY(1px); }

.messages{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.msg{
  font-size:12px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fafafa;
}
.msg.error{ border-color: #fecaca; background:#fff1f2; color:#9f1239; }
.msg.warn{ border-color: #fde68a; background:#fffbeb; color:#92400e; }
.msg.ok{ border-color: #bbf7d0; background:#f0fdf4; color:#166534; }

.interval-list{ display:flex; flex-direction:column; gap:8px; }
.interval-row{
  display:grid;
  grid-template-columns: 1fr 140px;
  gap:10px;
  align-items:center;
}
.interval-row label{ color:var(--muted); font-size:12px; }

.preview-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}
.round-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px;
  margin-bottom:8px;
}
.round-card .meta{
  font-size:12px;
  color:var(--muted);
}
.round-card .actions{
  display:flex;
  gap:8px;
  flex-shrink:0;
}
.btn.small{ padding:8px 10px; border-radius:10px; font-size:12px; }

.preview-wrap{
  border:1px dashed var(--border);
  border-radius:12px;
  padding:10px;
  background:#fafafa;
  overflow:auto;
}

.preview{
  width: min(100%, 420px);
}

/* ====== 小票样式（屏幕预览 + 打印一致）====== */
.receipt{
  width: var(--receipt-width-mm);
  background:#fff;
  color:#000;
  padding:8px 8px 10px;
  border-radius:8px;
  border:1px solid #e5e7eb;
  font-family: var(--ticket-font-family);
  font-size: var(--ticket-font-size);
  font-weight: var(--ticket-font-weight);
  transform: translateX(var(--ticket-offset-mm));
}

.receipt .title{
  text-align:center;
  font-weight:700;
  font-size:1.78em; /* 相对于基准字号 */
  margin:2px 0 6px;
}
.receipt .meta{
  font-size:1em;
  line-height:1.3;
  margin:2px 0;
}

.hr{
  border:0;
  border-top:1px dashed #000;
  margin:6px 0;
}

.thead, .row{
  display:flex;
  justify-content:space-between;
  gap:4px; /* 缩小间隙，便于放大字体时一行显示 */
}
.thead{
  font-size:1em;
  font-weight:700;
}
.row{
  font-size:1em;
  line-height:1.25;
  margin:2px 0;
}
.col-temp{
  flex: 0 0 12mm; /* 缩小温度列宽，让时间列有更多空间 */
}
.col-time{
  flex: 1 1 auto;
  text-align:right;
  white-space: nowrap; /* 防止温度/时间换行 */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 统计分割线：左右填充，中间文字 */
.divider{
  display:flex;
  align-items:center;
  gap:6px;
  margin:8px 0 6px;
  font-size:1.11em;
  font-weight:700;
}
.divider::before,
.divider::after{
  content:"";
  flex:1 1 auto;
  border-top:1px dashed #000; /* 改为虚线 */
  transform: translateY(0.5px);
}
.stat{
  font-size:0.89em;
  line-height:1.3;
  margin:2px 0;
}
.stat strong{ font-size:1em; font-weight:700; }

/* 签名：配送人、接收人换行并空两行 */
.sign{
  margin-top:10px;
  font-size:1em;
  line-height:1.3;
}
.sign .gap{ height: 2.6em; } /* 约等于空两行 */

/* ====== 关键：打印容器不能 display:none，否则可能打印空白 ====== */
.print-area{
  position: fixed;
  left: -99999px;
  top: 0;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

/* 打印设置 */
@media print{
  body{ background:#fff; }
  .container{ padding:0; }

  /* 打印时隐藏 UI，只显示 print-area */
  .no-print{ display:none !important; }

  .print-area{
    position: static;
    left:auto;
    opacity: 1;
    pointer-events: auto;
    z-index: auto;
  }

  @page{
    /* 这里用 48mm 作为页面宽度（有效宽度），最稳 */
    size: var(--receipt-width-mm) auto;
    margin: 0;
  }

  .receipt{
    border:0;
    border-radius:0;
    padding: 4mm 2mm 4mm;
    width: var(--receipt-width-mm);
    page-break-after: always;
    break-after: page;
  }
}