:root {
  --label-w: 50mm;
  --label-h: 25mm;
  --qr-size: 15mm;   /* ขนาดคงที่ */
  --pad: 2mm;
  --border: 0.2mm;
  --font-main: "Sarabun", "Noto Sans Thai", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --preview-scale: 2.5; /* ซูมพรีวิวเริ่มต้น = 250% (ไม่มีผลตอนพิมพ์/Export) */
}

html, body { height: 100%; }
/* ให้ทุกองค์ประกอบคำนวณความกว้างแบบรวม padding/border ป้องกันล้นพาแนล */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; padding: 0; background: #0f172a; color: #0b1020; font-family: var(--font-main);
}
.app {
  display: grid; grid-template-columns: 360px 1fr; gap: 16px; min-height: 100%;
}
.panel { background: #ffffff; border-radius: 14px; box-shadow: 0 10px 30px rgba(2,6,23,.2); margin: 16px; padding: 16px; }
.panel h2 { margin: 0 0 10px; font-size: 18px; }
.brand { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.brand img { height: 80px; width: auto; display: block; object-fit: contain; }
.brand h2 { margin: 0; }
.grid { display: grid; gap: 10px; }
label { font-size: 12px; color: #334155; }
input:not([type="checkbox"]):not([type="radio"]), textarea, select {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #e2e8f0; background: #f8fafc; outline: none;
  font: 14px/1.3 var(--font-main);
}
/* รีเซ็ตสไตล์ของ checkbox/radio ไม่ให้ยืดเต็มความกว้าง */
input[type="checkbox"], input[type="radio"] {
  width: auto; height: auto; padding: 0; border: none; background: transparent; margin: 0;
  vertical-align: middle; display: inline-block; accent-color: #0ea5e9;
}
input[type="range"] { margin: 0; }
input:focus, textarea:focus { border-color: #94a3b8; background: #fff; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* สัดส่วนเฉพาะแถว */
.row-qr { grid-template-columns: 3fr 1fr; align-items: center; }
.row-guides { grid-template-columns: 1fr; align-items: start; }
.btn {
  appearance: none; border: 0; border-radius: 12px; padding: 10px 14px; background: #0ea5e9; color: #fff; font-weight: 600; cursor: pointer;
}
.btn.secondary { background: #475569; }
.muted { color: #64748b; font-size: 12px; }

/* พรีวิวฉลาก */
.preview-wrap { 
  display: grid; 
  place-items: center; 
  min-height: calc(100vh - 32px);
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

/* Canvas สำหรับ network animation */
#networkCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* ให้ฉลากอยู่เหนือพื้นหลัง */
.preview-wrap .label {
  z-index: 10;
  position: relative;
}
.label {
  width: var(--label-w); height: var(--label-h); background: #fff; position: relative; color: #0b1020;
  box-shadow: 0 0 0 1px #cbd5e1 inset, 0 20px 60px rgba(0,0,0,.25);
  overflow: hidden; border-radius: 2mm;
}
/* ซูมเฉพาะพรีวิวบนจอ */
.preview-wrap .label { transform: scale(var(--preview-scale)); transform-origin: center; }
.label-inner { position: absolute; inset: var(--pad); display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr; gap: 2mm; }
.left { display: grid; grid-template-rows: auto 1fr auto; gap: 1mm; min-width: 0; }
.web {
  font-size: 2.5mm; line-height: 1.1; letter-spacing: .1mm; color: #0b1020; text-transform: none;
  /* ไม่ให้ขึ้นบรรทัดใหม่ และตัดด้วย … เมื่อยาวเกินกรอบ */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.code { font: 700 2.5mm/1 var(--mono); letter-spacing: .12mm; color: #0b1020; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.name { 
  overflow: visible; 
  white-space: normal; 
  text-overflow: clip; 
  overflow-wrap: anywhere; 
  word-break: break-word; 
}
.name { font-size: 3mm; line-height: 1.25; font-weight: 700; padding-top: 0.2mm; }

/* แสดงแผนก/หน่วยงาน ใต้ชื่อ เมื่อเป็นฉลากทรัพย์สิน */
.name-wrap { display: flex; flex-direction: column; gap: 0.3mm; min-width: 0; }
.dept { font-size: 2.2mm; line-height: 1.2; color: #374151; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }

.qr-wrap { width: var(--qr-size); height: var(--qr-size); display: grid; place-items: center; border: none; border-radius: 2mm; 
  /* จัด QR ให้อยู่กลางชิดขวา */
  justify-self: end; /* ชิดขวาในคอลัมน์ขวา */
  align-self: center; /* กึ่งกลางแนวตั้งของฉลาก */
}
.qr-wrap img, .qr-wrap canvas { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; }
/* คอนเทนเนอร์สำหรับ QRCode.js */
#qrSlot { width: 100%; height: 100%; display: none; }
#qrSlot canvas, #qrSlot img { width: 100%; height: 100%; object-fit: contain; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }

/* เส้นไกด์ตัด (toggle ได้) */
.cut-guides::before, .cut-guides::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; }
.cut-guides::before { background: repeating-linear-gradient(90deg, transparent 0 4mm, rgba(2,6,23,.06) 4mm 4.3mm),
                                  repeating-linear-gradient(0deg,  transparent 0 4mm, rgba(2,6,23,.06) 4mm 4.3mm); }
.cut-guides::after { box-shadow: inset 0 0 0 .4mm rgba(2,6,23,.2); border-radius: 2mm; }

/* ปุ่มพิมพ์ติดขอบขวา */
.printbar { position: fixed; right: 18px; bottom: 18px; display: flex; gap: 8px; z-index: 20; }

/* ข้อความลิขสิทธิ์ล่างหน้าจอ (ซ่อนตอนพิมพ์) */
.app-footer {
  position: fixed; left: 0; right: 0; bottom: 10px;
  text-align: center; font-size: 12px;
  z-index: 50; pointer-events: none;
}
.app-footer .pill {
  display: inline-block; padding: 6px 10px; border-radius: 999px;
  background: rgba(2,6,23,.75); color: #e5e7eb;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  line-height: 1; backdrop-filter: saturate(120%) blur(2px);
}

/* โหมดพิมพ์ */
@media print {
  html, body { background: #fff; margin: 0; padding: 0; width: var(--label-w); height: var(--label-h); }
  /* ซ่อนเฉพาะแผงตั้งค่า (aside) และแถบปุ่มพิมพ์ */
  aside.panel, .printbar, .app-footer { display: none !important; }
  /* ลดผลของเลย์เอาต์หลัก */
  .app { display: block !important; min-height: 0 !important; }
  .panel { box-shadow: none !important; background: transparent !important; margin: 0 !important; padding: 0 !important; }
  .preview-wrap { min-height: 0 !important; }
  main.preview-wrap { display: block !important; }
  /* พิมพ์เฉพาะฉลาก */
  body * { visibility: hidden !important; }
  .label, .label * { visibility: visible !important; }
  /* ยกเลิกเงาและการซูมทุกกรณี และตรึงตำแหน่งให้ตรงมุมซ้ายบนของหน้า */
  .label { box-shadow: none !important; transform: none !important; position: fixed !important; top: 0; left: 0; width: var(--label-w) !important; height: var(--label-h) !important; }
  .preview-wrap .label { transform: none !important; }
  @page { size: var(--label-w) var(--label-h); margin: 0; }
}