/* Lớp phủ xem trước & in tem QR (js/label.js).
   Dùng chung cho cả 2 giao diện nên chỉ xài các biến CSS mà app.css và
   admin-panel.css đều có (--surface, --bg, --border, --text*, --radius);
   riêng màu nhấn thì dò --primary rồi --accent vì mỗi bên đặt một tên. */

.label-overlay {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(15, 23, 42, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}

.label-box {
  background: var(--surface, #fff);
  border-radius: var(--radius, 8px);
  width: 100%; max-width: 520px;
  max-height: 92vh; overflow: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}

.label-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--border, #e2e8f0);
}
.label-title { font-size: 16px; font-weight: 700; color: var(--text, #1a202c); }
.label-sub   { font-size: 12px; color: var(--text-3, #718096); margin-top: 2px; }
.label-x {
  background: none; border: 0; cursor: pointer; line-height: 1;
  font-size: 26px; color: var(--text-3, #718096); padding: 0 4px;
}

/* Nền kẻ caro để thấy rõ mép tem trắng nằm ở đâu trong tờ giấy */
.label-preview {
  padding: 16px; overflow: auto;
  background:
    linear-gradient(45deg, #e8edf3 25%, transparent 25%, transparent 75%, #e8edf3 75%),
    linear-gradient(45deg, #e8edf3 25%, transparent 25%, transparent 75%, #e8edf3 75%) 8px 8px,
    var(--bg, #f0f4f8);
  background-size: 16px 16px;
}

/* Tem thật chỉ 22mm cao, phóng 2.4× cho nhìn được trên màn hình.
   transform-origin top left + width bù lại để không bị tràn/thừa chỗ. */
.label-scale {
  transform: scale(2.4); transform-origin: top left;
  width: calc(100% / 2.4);
}
.label-scale .lb-page {
  outline: 1px dashed #94a3b8;
  margin-bottom: 3mm;
}
/* Vạch chia giữa 2 con tem die-cut. KHÔNG phải 50%: theo file PDF của Sapo, tem 1 nằm
   ở 0,5–35,5mm và tem 2 ở 35,5–70,5mm trên tờ 75mm, phần thừa ~4,5mm dồn hết sang phải. */
.label-scale .lb-page::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 35.5mm;
  border-left: 1px dashed #cbd5e1;
}
/* Tô xám dải mép phải không có tem để khỏi tưởng đang in lệch */
.label-scale .lb-page::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 70.5mm; right: 0;
  background: repeating-linear-gradient(45deg, #e2e8f0 0 3px, transparent 3px 6px);
}

/* Cảnh báo chất lượng tem (thiếu tên cước / ô QR quá nhỏ) — xem Label._checkQuality */
.label-warn {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 16px; font-size: 12px; line-height: 1.45;
  color: #92400e; background: #fef3c7;
  border-top: 1px solid var(--border, #e2e8f0);
}
.label-warn b { font-weight: 700; }

.label-tools {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  padding: 12px 16px; border-top: 1px solid var(--border, #e2e8f0);
}
.label-tools label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--text-2, #4a5568);
}
.label-tools input {
  width: 92px; padding: 6px 8px; font-size: 14px;
  border: 1px solid var(--border, #e2e8f0); border-radius: 6px;
  background: var(--surface, #fff); color: var(--text, #1a202c);
}
.label-hint { flex: 1 1 180px; font-size: 11px; color: var(--text-3, #718096); line-height: 1.4; }

.label-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--border, #e2e8f0);
}
.label-actions button { padding: 9px 16px; font-size: 14px; border-radius: 6px; cursor: pointer; }
.label-actions .btn-primary {
  border: 0; color: #fff;
  background: var(--primary, var(--accent, #006db7));
}
.label-actions .btn-secondary {
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #fff); color: var(--text-2, #4a5568);
}

@media (max-width: 520px) {
  .label-scale { transform: scale(1.7); width: calc(100% / 1.7); }
}

/* ─── Quét tem QR bằng camera (js/scan.js) ────────────────────────────────── */
/* Để chung file này vì label.css là stylesheet DUY NHẤT cả index.html lẫn
   admin.html cùng nạp — tách file riêng thì phải sửa 2 chỗ <link> + sw.js. */

.scan-overlay {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(15, 23, 42, .72);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.scan-box {
  width: 100%; max-width: 420px;
  background: var(--surface, #fff); border-radius: var(--radius, 12px);
  overflow: hidden; box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
  font-family: "Segoe UI", Arial, sans-serif;
}
.scan-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border, #e2e8f0);
}
.scan-title { font-size: 15px; font-weight: 700; color: var(--text, #1a202c); }
.scan-x {
  border: 0; background: none; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--text-3, #718096); padding: 0 4px;
}

/* Khung camera giữ tỉ lệ vuông: QR nằm giữa khung nên vuông là hợp lý nhất,
   và không bị nhảy layout lúc video chưa có kích thước. */
.scan-view {
  position: relative; aspect-ratio: 1 / 1; background: #0f172a;
  display: none;   /* chỉ hiện khi camera đã chạy — xem .scan-live */
}
.scan-overlay.scan-live .scan-view { display: block; }
.scan-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Ô ngắm: viền trắng mờ + 4 góc đậm, giúp thợ biết đưa tem vào đâu */
.scan-frame {
  position: absolute; inset: 18%;
  border: 2px solid rgba(255, 255, 255, .85); border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, .35);
}

.scan-msg {
  padding: 11px 16px; font-size: 13px; line-height: 1.45;
  color: var(--text-2, #4a5568);
}
.scan-msg-warn {
  background: #fff8e6; color: #92400e;
  border-top: 1px solid #fde68a; border-bottom: 1px solid #fde68a;
}

.scan-manual { padding: 12px 16px 16px; }
.scan-manual label {
  display: block; margin-bottom: 5px;
  font-size: 12px; font-weight: 600; color: var(--text-2, #4a5568);
}
.scan-manual-row { display: flex; gap: 8px; }
.scan-manual-row input {
  flex: 1; min-width: 0; padding: 9px 11px;
  border: 1px solid var(--border, #e2e8f0); border-radius: 8px;
  font-family: monospace; font-size: 15px; letter-spacing: 1px;
  color: var(--text, #1a202c); background: var(--bg, #fff);
}
.scan-go {
  padding: 9px 16px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--primary, var(--accent, #006db7)); color: #fff;
  font-size: 14px; font-weight: 700; white-space: nowrap;
}

/* Nút mở màn quét, dùng chung cho cả 2 giao diện */
.btn-scan {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #fff); color: var(--text, #1a202c);
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
.btn-scan:active { transform: scale(.98); }