/* =====================================================================
   ppcform.css — ความสูงมาตรฐานของช่องกรอกทั้งเว็บ
   เขียน 20 ก.ย. 2569 ตามที่พีทสั่ง : "ควรตั้งค่ามาตรฐานความสูงทุกหน้า
   จะได้ไม่เป็นแบบนี้อีก"

   ปัญหาที่ทำให้ต้องมีไฟล์นี้
   ---------------------------------------------------------------------
   1. ดรอปดาวน์กับช่องข้อความ "สูงไม่เท่ากัน" ทั้งที่เขียน CSS ชุดเดียวกัน
      ต้นเหตุคือ select ของ Safari เป็น -webkit-appearance: menulist
      ซึ่งคิดความสูงจากฟอนต์ของตัวเอง + padding ในตัว และ **ไม่สนใจ line-height**
      ส่วน input คิดจาก line-height ตามที่เราตั้ง สองตัวจึงไม่มีทางลงเอยเท่ากัน
      ถ้าเราบอกแต่ min-height

      วิธีแก้ที่นิ่งที่สุดคือ **บอก height ตายตัวเท่ากันทั้งคู่** คู่กับ
      box-sizing: border-box แล้วปล่อยให้เบราว์เซอร์จัดข้อความกึ่งกลางเอง
      (ข้อความบรรทัดเดียวใน input และ select ถูกจัดกึ่งกลางแนวตั้งอัตโนมัติ
      เมื่อกล่องมีความสูงตายตัว)

   2. ตัวอักษรไทย "ขาดครึ่ง" ในดรอปดาวน์
      คำที่มีทั้งวรรณยุกต์ข้างบนและสระข้างล่างในตัวเดียวกัน (เช่น "ทั้งหมด")
      กินความสูงมากกว่าอักษรละตินมาก กล่องเตี้ยจะตัดหางทิ้งข้างใดข้างหนึ่ง
      และเห็นเฉพาะบางคำ จึงหลุดการตรวจได้ง่าย

   กติกาประจำโปรเจกต์ (ดู code/ui_conventions.md)
   ---------------------------------------------------------------------
   ★ ช่องกรอก/ดรอปดาวน์ที่มีข้อความไทย ขั้นต่ำ 32px
   ★ ฟอนต์ไม่ต่ำกว่า 16px ในหน้าที่ใช้บนมือถือ — iOS Safari ซูมหน้าเข้าเอง
     ทุกครั้งที่จิ้มช่องที่ตัวอักษรเล็กกว่า 16px
   ★ ห้ามใช้ font shorthand โดยไม่ระบุ line-height (`font: 14px Tahoma`)
     มันรีเซ็ต line-height เป็น normal ให้เอง ซึ่งขึ้นกับฟอนต์ของเครื่อง

   วิธีใช้
   ---------------------------------------------------------------------
   1. อ้างไฟล์นี้ **ก่อน** <style> ของหน้า
        <link href="/css/ppcform.css" rel="stylesheet" type="text/css" />
      (Site.Master อ้างให้แล้ว หน้าที่ใช้ master จึงได้อัตโนมัติ)
   2. ใส่คลาส ppc-form ที่ body หรือกล่องหลักของหน้า
   3. อยากเปลี่ยนความสูงเฉพาะหน้า ให้เขียนทับ "ตัวแปร" ไม่ใช่กฎ
        .my-page { --ppc-field-h: 44px; }

   ★★★ ทุกกฎในไฟล์นี้ห่อด้วย :where() โดยตั้งใจ
   ---------------------------------------------------------------------
   :where() มี specificity เป็น 0 ทั้งชุด กฎเหล่านี้จึงมีน้ำหนักเท่ากับ .ppc-form
   เพียงคลาสเดียว (0,1,0) เท่านั้น

   ผลคือ **หน้าเก่าที่ตั้งความสูงของตัวเองไว้แล้วยังชนะเสมอ** ไม่ว่าจะเขียนด้วย
   คลาสของหน้า (.poBar .ctl) หรือ element+attribute (.sale-page input[type=text])
   มาตรฐานนี้จึงมีผลเฉพาะกับช่องที่ "ไม่มีใครกำหนดความสูงไว้เลย" ซึ่งเป็นกลุ่มที่พัง
   หน้าที่ปรับความสูงมาแล้วอย่างตั้งใจ (เช่นแถบตัวกรองหน้าใบสั่งผลิตที่ล็อกไว้ 32px)
   จะไม่ถูกดันให้สูงขึ้นโดยไม่รู้ตัว

   ถ้าวันหลังอยากให้มาตรฐานชนะหน้าใดหน้าหนึ่งจริง ๆ ให้ไปลบกฎของหน้านั้นออก
   อย่าถอด :where() ออกจากไฟล์นี้ - มันจะกลายเป็นการดันความสูงทั้งเว็บพร้อมกัน
   ===================================================================== */

:root {
    /* ช่องกรอกปกติในฟอร์ม */
    --ppc-field-h: 40px;
    /* ช่องกรอกในตาราง (แถวที่กำลังแก้ไข) - เตี้ยกว่าเพื่อไม่ให้แถวบาน
       แต่ห้ามต่ำกว่า 32px ตามกติกาเรื่องตัวอักษรไทย */
    --ppc-field-h-sm: 32px;

    --ppc-field-fs: 16px;
    --ppc-field-fs-sm: 14px;
    --ppc-field-lh: 1.5;

    --ppc-field-pad-x: 10px;
    /* ที่ว่างด้านขวาของ select ไว้ให้ลูกศรของระบบ */
    --ppc-field-pad-caret: 34px;
    --ppc-field-radius: 7px;
}

/* ---------------------------------------------------------------------
   กฎกลาง — ผูกกับคลาส .ppc-form เพื่อให้หน้าเลือกเปิดใช้เอง
   (ไม่เขียนแบบ global เพราะหน้าเก่าหลายหน้ามี layout ที่อิงความสูงเดิมอยู่)
   --------------------------------------------------------------------- */

.ppc-form :where(
    input[type=text],
    input[type=password],
    input[type=email],
    input[type=number],
    input[type=search],
    input[type=tel],
    input[type=date],
    select) {
    box-sizing: border-box;
    height: var(--ppc-field-h);
    min-height: 0;
    max-width: 100%;
    min-width: 0;
    padding: 0 var(--ppc-field-pad-x);
    font-size: var(--ppc-field-fs);
    line-height: var(--ppc-field-lh);
    border-radius: var(--ppc-field-radius);
    vertical-align: middle;
}

/* ★ select ต้องเว้นที่ขวาให้ลูกศร ไม่งั้นข้อความยาว ๆ วิ่งไปชนลูกศร
   และ **ห้ามใส่ padding บน-ล่างให้ select** Safari จะเอาไปบวกกับความสูงในตัว
   แล้วกล่องสูงไม่เท่า input อีก */
.ppc-form :where(select) {
    padding-right: var(--ppc-field-pad-caret);
}

/* ช่องหลายบรรทัด - ความสูงตายตัวใช้ไม่ได้ ใช้ min-height แทน */
.ppc-form :where(textarea) {
    box-sizing: border-box;
    min-height: calc(var(--ppc-field-h) * 2);
    max-width: 100%;
    padding: 8px var(--ppc-field-pad-x);
    font-size: var(--ppc-field-fs);
    line-height: var(--ppc-field-lh);
    border-radius: var(--ppc-field-radius);
}

/* ปุ่มที่ยืนข้างช่องกรอกในแถบตัวกรอง ต้องสูงเท่ากัน ไม่งั้นแถวดูเอียง */
.ppc-form :where(.ppc-field-btn) {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--ppc-field-h);
    padding: 0 16px;
    font-size: var(--ppc-field-fs);
    line-height: var(--ppc-field-lh);
    border-radius: var(--ppc-field-radius);
}

/* ---------------------------------------------------------------------
   ช่องค้นหาของ ppcpicker (dropdown ที่พิมพ์ค้นหาได้)
   ตัว select จริงถูกซ่อนไว้ แล้ว ppcpicker วาด input ครอบทับ
   ถ้าไม่บังคับความสูงตรงนี้ด้วย ช่องจะเตี้ยกว่าช่องอื่นในแถวเดียวกัน
   --------------------------------------------------------------------- */
.ppc-form :where(.ppc-pick-input) {
    box-sizing: border-box;
    height: var(--ppc-field-h);
    font-size: var(--ppc-field-fs);
    line-height: var(--ppc-field-lh);
}