/* ══════════════════════════════════════════════════════════
   พิมพ์ / บันทึกเป็น PDF ตามฟอร์มกระดาษต้นฉบับ (step 3.9)

   ⚠️ ไฟล์นี้เป็นข้อยกเว้นเดียวของกติกา "ห้าม hardcode สี"
      ฟอร์มต้องออกมา "ดำบนขาว" เสมอ แม้ธีมบนจอเป็นสีเข้ม
      ถ้าใช้ var(--text) ที่เป็นสีอ่อน พิมพ์ออกมาจะจางจนอ่านไม่ออก
      → ตรงนี้จึงเขียน #000 / #fff ตรง ๆ โดยตั้งใจ ไม่ใช่ความพลาด

   โครงไฟล์ (v0.32.0 — เพิ่มพรีวิวในแอป):
   ①  base           = เค้าโครงฟอร์ม (.pf-*) ใช้ร่วมทั้ง "พรีวิวบนจอ" และ "ตอนพิมพ์"
                        #printRoot ถูกซ่อนบนจอโดยปริยาย → กฎพวกนี้ไม่กระทบแอปจนกว่าจะเปิดพรีวิว
   ②  @media screen  = เปลือกพรีวิวในแอป (แถบเครื่องมือ + หน้ากระดาษ A4 + ย่อพอดีจอ)
                        ⭐ จำเป็นบนมือถือ (เช่น S24) ที่ window.print() ไม่โชว์ตัวอย่างให้เห็นเลย
   ③  @media print   = ซ่อนแอปเหลือแต่ฟอร์ม + @page + ตัดหน้า
   ══════════════════════════════════════════════════════════ */

/* ① ─────────── base: เค้าโครงฟอร์ม (จอ + พิมพ์ ใช้ร่วมกัน) ───────────
   ⚠️ ต้องระบุ font-family เองตรงนี้ (ผ่าน var --font) ห้ามปล่อยให้ inherit เฉย ๆ —
   ตอนพิมพ์ ถ้าไม่ระบุ เบราว์เซอร์ตกไปใช้ฟอนต์ serif เริ่มต้น ตัวอังกฤษออกมาเป็นตัวมีเชิง
   ใช้ var(--font) = ฟอนต์ที่เลือกในธีม (ค่าจริงใน app.css :root/[data-font]) เพื่อให้พิมพ์เหมือนที่เห็นบนจอ
   · ท้าย var ใส่ fallback สแตกไว้เสมอ (ปิดท้าย sans-serif) กันตัวอังกฤษกลายเป็น serif ถ้า --font ไม่ resolve */
#printRoot {
  display: none;
  color: #000;
  font-family: var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Noto Sans Thai", "Sarabun", Roboto, Arial, sans-serif);
  font-size: 10pt;
  line-height: 1.5;
}

.pf-page {
  padding: 12mm 10mm;
  position: relative;
  box-sizing: border-box;
}
/* หน้า Potential (Book 3 สี) — ระยะขอบตามสเปกฟอร์ม + เป็นกรอบให้มุม/รูปวางแบบ absolute */
.pf-page-potential { padding: 14mm 13mm; }

/* สามเหลี่ยมมุมขวาบน = ระดับความสัมพันธ์ (ด้านละ ~20% ของ A4 = 42mm) */
.pf-corner {
  position: absolute; top: 0; right: 0;
  width: 42mm; height: 42mm; pointer-events: none;
}
.pf-corner svg { display: block; width: 100%; height: 100%; }
.pf-corner-green  polygon { fill: #1f9d55; }
.pf-corner-yellow polygon { fill: #e3b000; }
.pf-corner-red    polygon { fill: #e23b3b; }

/* ช่องติดรูปวางแบบ absolute ให้อยู่ใต้สามเหลี่ยม ไม่ทับกัน */
.pf-photo-abs {
  position: absolute; top: 34mm; right: 13mm;
  width: 34mm; height: 40mm; border: 1px solid #000;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pf-photo-abs img { width: 100%; height: 100%; object-fit: cover; }

.pf-pot-head { text-align: center; margin-bottom: 2mm; }
.pf-pot-head h1 { font-size: 20pt; font-weight: normal; margin-bottom: 4px; }
.pf-pot-head .pf-l { min-width: auto; }
.pf-pot-head .pf-v { flex: 0 0 45mm; }
/* เนื้อหาเลื่อนลงพ้นสามเหลี่ยม + ช่องรูป */
.pf-frm { margin-top: 46mm; }

/* ── บรรทัดฟอร์ม: ป้ายซ้าย + ค่าบนเส้นใต้ ── */
.pf-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: 7px;
  min-height: 16pt;
}
/* ป้ายกำกับกว้างคงที่ ให้เส้นใต้ของทุกบรรทัดเริ่มตรงกัน เหมือนฟอร์มพิมพ์ */
.pf-l {
  flex: 0 0 auto;
  min-width: 34mm;
  font-size: 9pt;
  letter-spacing: .2px;
  white-space: nowrap;
}
.pf-n { flex: 0 0 auto; font-size: 9pt; }
.pf-sp { flex: 1 1 auto; }

/* ผลงาน (RESULT) — ช่องติ๊ก Success / Miss */
.pf-chk { flex: 0 0 auto; font-size: 9pt; margin-right: 6mm; white-space: nowrap; }
.pf-box {
  display: inline-block; width: 3.4mm; height: 3.4mm; line-height: 3.4mm;
  text-align: center; border: 0.4pt solid #000; margin-right: 1mm;
  font-size: 8pt; vertical-align: middle;
}

/* ⚠️ min-width:0 จำเป็น ไม่งั้นข้อความยาวดันบรรทัดทะลุขอบกระดาษ
   (บทเรียนเดียวกับ .topbar-left บนหน้าจอ — flex item ไม่ยอมหดถ้าไม่ใส่) */
.pf-v {
  flex: 1 1 auto;
  min-width: 0;
  border-bottom: 1px solid #000;
  padding: 0 3px 1px;
  word-break: break-word;
  /* ค่าที่ user กรอก = สีน้ำเงิน แยกออกจากป้าย/เส้นฟอร์มที่เป็นสีดำ (เจ้าของขอ 27 ก.ค. 2569) */
  color: #1b53c0;
}
/* ข้อความมีรูปแบบ (rich text) ที่ user จัด — สี/ไฮไลต์ที่ผู้ใช้เลือก override สีน้ำเงินได้ */
.pf-v mark { padding: 0 1px; }
.pf-v b, .pf-v strong { font-weight: 700; }

/* หัวฟอร์ม Pending: ชื่อโครงการช่องกว้าง · NO.(Sale code count) ชิดขวา ไม่ตกบรรทัด */
.pf-head-top { flex-wrap: nowrap; align-items: flex-end; }
.pf-head-top .pf-v-title { flex: 1 1 auto; }        /* ชื่อโครงการ = กินพื้นที่ที่เหลือ */
.pf-head-top .pf-l-no { min-width: auto; }           /* ป้าย No. ยุบชิดขวา */
.pf-head-top .pf-v-no { flex: 0 0 30mm; }            /* ช่องเลข No. คงที่ */

.pf-center { justify-content: center; }
.pf-hdr-r  { text-align: right; display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 10px; }
.pf-hdr-c  { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; }
.pf-hdr-r .pf-v, .pf-hdr-c .pf-v { flex: 0 0 40mm; }

/* หัวหน้า 2 เป็นต้นไป: ชื่อ-สกุล/หน่วยงาน + เลขหน้า (เจ้าของขอ 27 ก.ค. 2569) */
.pf-hdr-name {
  display: flex; align-items: flex-end; gap: 6px;
  margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1.5px solid #000;
}
.pf-hdr-name .pf-l { min-width: auto; }
.pf-hdr-name .pf-l-no { margin-left: auto; }
.pf-hdr-name .pf-v-no, .pf-hdr-name .pf-l-no + .pf-v { flex: 0 0 16mm; }

/* ── ตาราง ── */
.pf-tbl {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 14px;
  font-size: 9pt;
}
.pf-tbl th, .pf-tbl td {
  border: 1px solid #000;
  padding: 3px 4px;
  vertical-align: top;
}
.pf-tbl th {
  text-align: center;
  font-weight: normal;
  font-size: 8.5pt;
  color: #000;                 /* หัวตารางคงดำ (เป็นส่วนของฟอร์ม ไม่ใช่ข้อมูลที่กรอก) */
}
.pf-tbl td { color: #1b53c0; } /* ข้อมูลในตาราง (สินค้า/บันทึก) = user data สีน้ำเงิน */
.pf-c { text-align: center; }
.pf-r { text-align: right; font-variant-numeric: tabular-nums; }

/* ตารางสินค้า — สัดส่วนคอลัมน์ตามต้นฉบับ */
.pf-prod td { height: 17pt; }
.pf-prod th:nth-child(1), .pf-prod td:nth-child(1) { width: 26%; }
.pf-prod th:nth-child(2), .pf-prod td:nth-child(2) { width: 8%; }
.pf-prod th:nth-child(3), .pf-prod td:nth-child(3) { width: 12%; }
.pf-prod th:nth-child(4), .pf-prod td:nth-child(4) { width: 12%; }
.pf-prod th:nth-child(5), .pf-prod td:nth-child(5) { width: 12%; }
.pf-prod th:nth-child(6), .pf-prod td:nth-child(6) { width: 12%; }
.pf-prod th:nth-child(7), .pf-prod td:nth-child(7) { width: 18%; }

/* ช่องยอดรวมของต้นฉบับลอยอยู่ใต้คอลัมน์ NET ไม่มีกรอบรอบด้าน */
.pf-noborder { border: none !important; }
.pf-sum-l { border: none !important; font-size: 8.5pt; color: #000; }  /* ป้าย "รวม" = ฟอร์ม คงดำ */
.pf-sum   { font-weight: 600; }                                        /* ยอดรวม = ข้อมูล (สืบสีน้ำเงินจาก td) */

/* คอมเมนต์ของหัวหน้าผู้เซ็น (แถวเซ็นรับทราบ) — เน้นสีเขียวให้เด่นจากบันทึกทั่วไป
   (เจ้าของสั่ง 28 ก.ค. 2569: หัวหน้าเซ็นรับทราบ = ตัวอักษรสีเขียว · ใช้ทั้ง Book 3 สี + Pending)
   ข้อยกเว้น hardcode สี ตามที่ตกลง — สีต้องคงที่แม้ธีมจอเปลี่ยน */
.pf-signoff-row td { color: #1f7a44 !important; }

/* ตารางบันทึกติดตาม */
.pf-log td { height: 15pt; }
.pf-log th:nth-child(1), .pf-log td:nth-child(1) { width: 16%; }
.pf-log th:nth-child(2), .pf-log td:nth-child(2) { width: 14%; }
.pf-log th:nth-child(4), .pf-log td:nth-child(4) { width: 22%; }
.pf-wide { width: 48%; }

/* ── ลายเซ็นหัวหน้าในคอลัมน์ NEXT DOING ของแถวเซ็นรับทราบ (phase 3.18) ──
   ขนาด 2 เท่าจากเดิม (เจ้าของสั่ง 200% · 31 ก.ค. 2569 · เดิม 26pt/92pt) + เอียง 15° ให้เหมือนลายเซ็นจริง
   · transform ไม่กระทบ layout ของตาราง → ฟอร์มไม่เพี้ยน (รูปแค่ "วางทับ" ในเซลล์)
   · ต้องมาหลัง ".pf-log td" จึงชนะความสูง 15pt (specificity เท่ากัน = ลำดับหลังชนะ)
   · ปรับมุมได้ที่ --sign-rot · ปรับขนาดที่ height/max-width */
.pf-signoff-row td { height: calc(60pt * var(--sign-scale, 1)); vertical-align: middle; }
.pf-sign-cell { overflow: visible; text-align: center; padding: 1pt 2pt; }
.pf-sign-img {
  display: inline-block;
  height: calc(52pt * var(--sign-scale, 1)); width: auto;
  max-width: calc(184pt * var(--sign-scale, 1));
  transform: rotate(var(--sign-rot, -15deg)); transform-origin: center center;
}

/* ข้อความ placeholder ในช่องติดรูป (ตอนไม่มีรูป) */
.pf-photo-x { font-size: 8pt; color: #888; }

/* ล็อกไม่ให้พื้นหลังเลื่อนตอนเปิดพรีวิว/พิมพ์ */
html.is-printing { overflow: hidden; }


/* ② ─────────── @media screen: พรีวิวในแอป ───────────
   ⭐ มือถือหลายเครื่อง (S24) กด window.print() แล้ว "ไม่โชว์ตัวอย่างเลย"
      จึงต้องมีพรีวิวในแอปให้เห็นฟอร์มจริง + ปุ่มสั่งพิมพ์/บันทึก PDF เอง */
@media screen {
  /* เปลือกเต็มจอ ครอบทับ modal (z-index modal = 100) */
  #printRoot.pfp-show {
    display: block;
    position: fixed; inset: 0; z-index: 300;
    background: #2a2c34;                       /* scrim เข้ม ให้เห็นขอบหน้ากระดาษขาว */
    overflow: auto; -webkit-overflow-scrolling: touch;
  }

  .pfp-bar {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: #14151b; color: #fff;
    box-shadow: 0 2px 8px #0006;
  }
  .pfp-title {
    flex: 1; min-width: 0; font-size: 13px; color: #cfd2d9;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pfp-btn {
    flex: 0 0 auto; min-height: 40px;
    border: 1px solid #4b4e5a; background: #23252f; color: #fff;
    border-radius: 8px; padding: 8px 14px; font: inherit; font-size: 13px; cursor: pointer;
  }
  .pfp-btn-go { background: #6c5ce7; border-color: #6c5ce7; font-weight: 600; }
  .pfp-btn:active { opacity: .85; }
  .pfp-hint { color: #b9bccb; font-size: 11px; padding: 8px 14px 0; text-align: center; }

  /* ย่อ A4 พอดีจอมือถือ (zoom คำนวณใน formprint.js → --pfp-zoom) */
  .pfp-pages {
    padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 16px;
    zoom: var(--pfp-zoom, 1);
  }
  #printRoot.pfp-show .pf-page {
    width: 210mm; min-height: 297mm;
    background: #fff; color: #000;
    box-shadow: 0 6px 24px #0009;
    /* padding / เค้าโครงภายใน มาจาก base (.pf-page ฯลฯ) แล้ว */
  }
}


/* ③ ─────────── @media print: ซ่อนแอป เหลือแต่ฟอร์ม ───────────
   margin:0 เพื่อให้สามเหลี่ยมมุม (Book 3 สี) ชิดขอบกระดาษจริงได้
   ⚠️ ตอนสั่งพิมพ์ให้ตั้ง Margins = None + เปิด Background graphics มุมสีถึงจะชิดขอบ/ไม่หาย */
@media print {
  /* ซ่อนแอป + แถบเครื่องมือพรีวิว เหลือแต่ฟอร์ม */
  #app, #login, #pwaBar, .pfp-bar, .pfp-hint { display: none !important; }
  #printRoot { display: block !important; }

  /* การย่อพรีวิวบนจอ ต้องไม่ติดไปตอนพิมพ์ (ไม่งั้นฟอร์มออกมาเล็ก) */
  .pfp-pages { zoom: 1 !important; padding: 0 !important; display: block !important; }

  @page { size: A4 portrait; margin: 0; }

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

  /* 1 section = 1 หน้ากระดาษ */
  .pf-page { page-break-after: always; break-after: page; }
  .pf-page:last-child { page-break-after: auto; break-after: auto; }

  /* หน้ากระดาษพรีวิวมี box-shadow/พื้นขาว — ตอนพิมพ์ไม่ต้องเงา */
  .pf-page { box-shadow: none !important; }

  /* กันเบราว์เซอร์ตัดสีพื้น/ขอบทิ้งตอนพิมพ์ */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}