/**
 * TeachSYS Plus - 標籤版面與列印樣式
 * ---------------------------------------------------------------------------
 * 【核心原則】標籤位置全部以 mm 絕對定位，且列印時必須取消瀏覽器頁邊距，
 * 否則整體會位移，貼紙全部印歪。
 */

/* ── A4 紙張 ────────────────────────────────────────────────────────── */

.sheet {
  position: relative;
  width: 210mm;
  height: 297mm;
  background: #fff;
  overflow: hidden;
}

/* ── 單張標籤 ───────────────────────────────────────────────────────── */

.label {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 2mm;
  padding: 1.5mm 2mm;
  overflow: hidden;
  /* box-sizing 必須為 border-box，否則 padding 會把標籤撐出裁切線 */
  box-sizing: border-box;
}

.label__art {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  aspect-ratio: 1 / 1;
}

.label__art .qr {
  width: 100%;
  height: 100%;
  display: block;
}

/* 一維條碼不是正方形，需放寬容器 */
.label__art:has(.barcode) { aspect-ratio: auto; width: 55%; }
.label__art .barcode { width: 100%; height: 100%; display: block; }

.label__text {
  min-width: 0;
  flex: 1;
}

.label__title {
  font-size: 3.6mm;
  font-weight: 800;
  line-height: 1.2;
  /* 姓名過長時截斷，避免推擠 QR 導致比例失真 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── OMR 劃卡成績紀錄卡 ──────────────────────────────────────────────── */

.omr-card {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0.3mm solid #0f172a;
  border-radius: 2.5mm;
  padding: 1.5mm 2mm;
  background: #ffffff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  font-family: var(--ff-sans, system-ui, sans-serif);
  color: #0f172a;
}

.omr-card__header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.omr-card__qr {
  position: absolute;
  left: 0;
  top: 0;
  width: 7mm;
  height: 7mm;
}

.omr-card__title {
  font-size: 3.8mm;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-align: center;
}

.omr-card__pill100 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.5mm;
  padding: 0.5mm 3.5mm;
  border: 0.3mm solid #0f172a;
  border-radius: 999px;
  font-weight: 800;
  font-size: 3.5mm;
}

.omr-card__columns {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 1mm;
}

.omr-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6mm;
}

.omr-col__title {
  font-size: 2.8mm;
  font-weight: 700;
  margin-bottom: 0.5mm;
}

.omr-col__list {
  display: flex;
  flex-direction: column;
  gap: 0.5mm;
}

.omr-row {
  display: flex;
  align-items: center;
  gap: 1.2mm;
  font-size: 2.5mm;
  font-weight: 600;
}

.omr-row__num {
  width: 2.5mm;
  text-align: right;
}

.omr-circle {
  display: inline-block;
  width: 2.8mm;
  height: 2.8mm;
  border: 0.3mm solid #0f172a;
  border-radius: 50%;
  box-sizing: border-box;
}

.omr-circle--pill {
  width: 3mm;
  height: 3mm;
}

.omr-card__markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.omr-marker {
  position: absolute;
  width: 1.5mm;
  height: 1.5mm;
  background: #0f172a;
}
.omr-marker--tl { top: 0.8mm; left: 0.8mm; }
.omr-marker--tr { top: 0.8mm; right: 0.8mm; }
.omr-marker--bl { bottom: 0.8mm; left: 0.8mm; }
.omr-marker--br { bottom: 0.8mm; right: 0.8mm; }

.label__slot {
  position: absolute;
  inset-inline-end: 1mm;
  inset-block-end: 1mm;
  font-size: 3mm;
  color: #94a3b8;
}

/* ── 校正測試頁：只顯示外框 ─────────────────────────────────────────── */

.sheet--calibrate .label {
  border: 0.2mm dashed #64748b;
}

/* ── 螢幕上的預覽 ───────────────────────────────────────────────────── */

.sheet-wrap {
  margin-bottom: var(--sp-5);
  /* transform: scale() 不影響版面配置，需手動壓縮外層高度，
     否則預覽的頁與頁之間會出現一大片空白 */
  height: calc(297mm * 0.62 + 30px);
  overflow: hidden;
}

.sheet-wrap__no {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-2);
}

/* 預覽時等比例縮小，讓整張 A4 能塞進畫面 */
.sheet-wrap .sheet {
  transform: scale(0.62);
  transform-origin: top left;
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-2);
}

/* 預覽時畫出標籤格線，方便確認排列是否符合預期 */
.sheet-wrap .label {
  outline: 0.5px dashed #cbd5e1;
  outline-offset: -0.5px;
}

@media (max-width: 900px) {
  .sheet-wrap .sheet { transform: scale(0.42); }
  .sheet-wrap { height: calc(297mm * 0.42 + 30px); }
}

/* ── 設定表單的 mm 欄位排列 ─────────────────────────────────────────── */

.label-geom {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
}

.label-geom .field { margin-bottom: 0; }

/* 可勾選的晶片 */
.chip--check {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  user-select: none;
}

.chip--check input { width: 20px; height: 20px; accent-color: var(--c-brand); }

/* ── 列印 ───────────────────────────────────────────────────────────── */

#print-root { display: none; }

@media print {
  /* 取消瀏覽器頁邊距，否則 mm 絕對定位會整體位移 */
  @page {
    size: A4 portrait;
    margin: 0;
  }

  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  /* 列印時只留 print-root，其餘 App 介面一律隱藏 */
  body.is-printing > *:not(#print-root) { display: none !important; }

  body.is-printing #print-root { display: block !important; }

  .sheet {
    /* 列印時不可套用預覽的縮放 */
    transform: none !important;
    border: none !important;
    box-shadow: none !important;
    page-break-after: always;
    break-after: page;
  }

  .sheet:last-child {
    page-break-after: auto;
    break-after: auto;
  }

  /* 預覽用的格線不可印出來 */
  .label { outline: none !important; }

  /* 確保條碼為純黑，避免印表機省墨模式把它印淡而掃不到 */
  .qr path, .barcode rect, .barcode path {
    fill: #000 !important;
  }

  /* 強制列印背景色與圖形，否則部分瀏覽器會省略 */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}