/* ============================================================================
   ChaaChaa — design tokens
   ----------------------------------------------------------------------------
   ทุกกฎ layout ในแอปกินค่าจากไฟล์นี้. เหตุผลที่ไฟล์นี้มีอยู่:

   ปัญหาเดิมไม่ใช่ "หน้าตาไม่สวย" แต่คือ **ไม่มีบันไดตัวเลขร่วมกัน** แต่ละหน้าจึงตั้งเลขเอง
   แล้ววัดออกมาได้ว่าพังจริง (ทุกบรรทัดข้างล่างนี้วัดด้วย DOM จริง ไม่ได้กะเอา):

     · <select> สาขาตั้งกว้าง 130px แต่ข้อความยาวสุดวัดได้ 154.6px  -> ล้น 29px
     · แถวเดียวมีคอนโทรลสูง 40 / 42 / 44 / 52 ปนกัน                 -> อาการ "เบี้ยว"
     · ช่องเลขที่ใบกำกับเหลือกว้าง 26px บนมือถือ
     · .btn-sm สูง 27px ทั้งที่เขียน override มือถือไว้แล้ว
     · เลย์เอาต์ 2 คอลัมน์ที่ ≤480px ไม่เคยถูกใช้เลยสักครั้ง

   สามอาการหลังคือ **บั๊กตัวเดียวกัน ที่ถูกเจอ 5 ครั้ง**:
     สองครั้งแพ้ specificity (`.one-doc .sitem-row` 2 คลาส ชนะ `@media .sitem-row` 1 คลาส
     — media query ไม่เพิ่ม specificity เลย) และหนึ่งครั้งแพ้ลำดับในไฟล์.

   ⇒ กฎเหล็ก 3 ข้อของโค้ด CSS ชุดนี้:
      1) กฎ layout ทุกข้อเขียนด้วย "คลาสเดียว"
         ถ้าจำเป็นต้องใช้ 2 คลาสจริง ๆ กฎมือถือต้องเขียน 2 คลาสซ้ำให้ครบ
      2) ไม่มีตัวเลข px ดิบในกฎ layout — ระยะ/ขนาด/มุมโค้ง มาจาก token เท่านั้น
         ที่ไหนต้องมีเลขดิบจริง ๆ ต้องมีคอมเมนต์บอกว่าทำไม
      3) การปรับข้ามขนาดจอ ทำที่ "ค่า token ใน :root" เป็นหลัก
         ซึ่งไม่แข่ง selector กับใคร จึงไม่มีสงคราม specificity ตั้งแต่ต้น
   ========================================================================== */

:root{
  /* ---- brand (คงเดิมทุกค่า ห้ามแก้) ------------------------------------ */
  --orange:#FF5A1F;  --orange-dark:#E2470F;  --orange-soft:#FFEDE3;
  --yellow:#FFC21E;  --yellow-soft:#FFF6DD;
  --ink:#22262e;
  --line:#ececef;    --bg:#fafafa;           --card:#fff;

  /* --muted เดิม #8a90a0 วัดคอนทราสต์บนพื้นขาวได้ 3.20:1 = ต่ำกว่าเกณฑ์ WCAG AA (4.5:1)
     และมันคือสีของ "ตัวหนังสือเล็กเกือบทั้งแอป" (วันที่ · เลขที่ใบ · ป้ายกำกับ)
     ⇒ เป็นสาเหตุตรง ๆ ของ "อ่านยาก" ที่เจ้าของบอกหลังเปิดบนมือถือจริง
     ค่าใหม่วัดได้ 5.79:1 บนพื้นขาว และ 5.09:1 บนพื้นส้มอ่อน (--orange-soft)
     ⚠️ ต้องผ่านเกณฑ์บน "พื้นส้มอ่อน" ด้วย ไม่ใช่แค่พื้นขาว: ป้ายเล็กจำนวนมากวางบนพื้นนั้น
        (#6b7280 ผ่านบนขาว 4.84 แต่ตกบนส้มอ่อนเหลือ 4.26 — เจอตอนวัดจริง ไม่ใช่ตอนคิด)
     สีแบรนด์ (ส้ม/เหลือง/ink) ไม่ถูกแตะเลย */
  --muted:#5f6672;
  --muted-strong:#4a505c;      /* ป้ายฟอร์ม — เข้มกว่า muted อีกขั้น */

  --ok:#1f9d55;      --ok-soft:#e6f6ec;
  --warn:#b8860b;    --warn-soft:#fff7e0;
  --danger:#d23b2e;  --danger-soft:#fdecea;
  --info:#2a5bd0;    --info-soft:#eaf1ff;

  /* ---- ระยะ (ฐาน 4px — ไม่มีค่าอื่นนอกบันไดนี้) ------------------------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:48px;

  /* ---- ขนาดตัวอักษร ----------------------------------------------------
     ค่าบนจอใหญ่. จอเล็กถูกยกพื้นขึ้นทั้งบันไดที่ท้ายไฟล์ (ดู "พื้นการอ่าน") */
  --fs-xxs:11.5px;
  --fs-xs:12.5px;
  --fs-sm:13.5px;
  --fs-md:15px;      /* base */
  --fs-lg:17px;
  --fs-xl:20px;
  --fs-2xl:26px;
  --fs-3xl:32px;

  /* ภาษาไทยมีสระบน/ล่างซ้อนกันได้ 2 ชั้น — line-height 1.2 แบบที่ใช้กับภาษาอังกฤษ
     ทำให้สระชนกันระหว่างบรรทัด = อีกครึ่งหนึ่งของอาการ "อ่านยาก"
     1.6 คือค่าที่สระบน (ไม้โท+สระอี) กับสระล่าง (สระอุ) ไม่ชนกันแล้ว */
  --lh-body:1.6;
  /* 1.35 ไม่ใช่ 1.2: หัวเรื่องที่ตัดบรรทัดบนจอแคบก็เจอปัญหาสระชนกันเหมือนกัน
     แค่เห็นชัดน้อยกว่าเพราะตัวใหญ่ — วัดจริงที่ 375px แล้วหัวเรื่องไทยตัด 2 บรรทัดจริง */
  --lh-tight:1.35;
  --fw-reg:400; --fw-med:600; --fw-bold:700; --fw-black:800;

  /* ---- ความสูงคอนโทรล: ค่าเดียว ทุกที่ ---------------------------------
     เดิมในแถวเดียวมี 40/42/44/52 = "ความเบี้ยว" ที่เจ้าของเห็น
     44px = ขนาดเป้านิ้วขั้นต่ำ (staff กรอกด้วยมือเดียวยืนที่เคาน์เตอร์) */
  --ctl-h:44px;
  --row-h:var(--ctl-h);        /* ชื่อเดิมที่โค้ดเก่าอ้างถึง — คงไว้เป็น alias */
  --tap-min:44px;

  /* ---- มุมโค้ง ---------------------------------------------------------- */
  --r-sm:7px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-pill:999px;

  /* ---- เงา -------------------------------------------------------------- */
  --sh-1:0 1px 2px rgba(20,25,35,.05);
  --sh-2:0 6px 18px rgba(20,25,35,.07);
  --sh-3:0 12px 34px rgba(20,25,35,.12);
  --sh-focus:0 0 0 3px rgba(255,90,31,.22);

  /* ---- ชั้นความลึก ------------------------------------------------------
     🔴 บันไดนี้เกิดขึ้นเพราะบั๊กจริง: .topbar (z=50) กับ .tabs (z=9) เคยถูกปัก
        top:0 ทั้งคู่ ⇒ พอเลื่อนหน้าจอ แถบแท็บของกระดานคิวงานมุดหายไปใต้หัวเรื่อง
        นั่นคือ "เหลื่อม" ที่เจ้าของเห็นบนมือถือจริง
        ทางแก้ไม่ใช่ไล่เพิ่ม z-index แต่คือ "แถบล่างต้องปักใต้แถบบน" ด้วย --topbar-h */
  --z-bar:50;        /* หัวเรื่องหลัก — สูงสุดเสมอ */
  --z-subbar:40;     /* แถบแท็บ/แถบเครื่องมือที่ปักใต้หัวเรื่อง */
  --z-actionbar:30;  /* แถบปุ่มส่งที่ลอยติดขอบล่าง */
  --z-pop:100;       /* dropdown ผลค้นหา */

  /* ความสูงหัวเรื่อง = ระยะที่แถบอื่นต้องปักต่อจากมัน. ถูกบังคับด้วย height จริง
     ใน app.css (ไม่ปล่อยให้เนื้อหาดันสูงเอง) เพื่อให้ค่านี้ "จริง" เสมอ */
  --topbar-h:64px;

  /* ---- layout ----------------------------------------------------------- */
  --wrap-max:980px;      /* หน้าฟอร์ม/รายละเอียด — กว้างกว่านี้อ่านยาก */
  /* กระดานคิวงาน — ยิ่งกว้างยิ่งเห็นหลายกองพร้อมกัน
     🔴 1400px ทำให้การ์ดกว้าง **238px** บนเดสก์ท็อป ซึ่งวัดแล้วอึดอัดจริง:
        1400 − 40 (padding .wrap ซ้ายขวา) − 48 (gap 4 ช่อง) = 1312 ÷ 5 คอลัมน์ = 262.4
        − 26 (padding+เส้นขอบของ .col) = 236 ⇒ ชื่อผู้รับเงินไทยตัดสองสามบรรทัดทุกใบ
        1760px ให้ 308px ต่อการ์ด (+30%) โดยยังไม่กว้างจนสายตากวาดข้ามคอลัมน์ไม่ทัน
     ⚠️ นี่คือ "เพดาน" ไม่ใช่ความกว้างจริง — จอที่แคบกว่านี้ยังบีบตามเดิมทุกประการ
        (ที่ 1440px การ์ดได้ 241px คือแทบไม่ขยับ — ตัวคุมที่นั่นคือขนาดจอ ไม่ใช่ token นี้)
     🔴 ห้ามแก้ด้วยการลดจำนวนคอลัมน์: 5 กองบนกระดานเป็นคำศัพท์ที่เจ้าของอ่านทุกวัน
     ⚠️ บล็อกมือถือท้ายไฟล์ตั้งค่านี้เป็น 100% อยู่แล้ว ⇒ ค่านี้ไม่แตะเลย์เอาต์แท็บบนมือถือ */
  --board-max:1760px;
  /* ความกว้างต่ำสุดของตารางข้อมูล (6 คอลัมน์ × ความกว้างที่ยังอ่านออก)
     ตารางต้อง "กว้างกว่ากรอบ" เพื่อให้ .table-wrap ได้เลื่อน — ถ้าปล่อยให้ width:100%
     พอดีกรอบ คอลัมน์จะถูกบีบจนชื่อแตกเป็นเสาผอมแทนที่จะเลื่อนดู
     (วัดจริงที่ 375px: ช่องชื่อซัพพลายเออร์เหลือ 44px ตัดบรรทัด 5 บรรทัด) */
  --table-min:600px;

  --font:"Segoe UI","Leelawadee UI",Tahoma,sans-serif;
  --font-num:"Segoe UI",Consolas,monospace;
}

/* ===========================================================================
   พื้นการอ่านบนจอเล็ก — ยกทั้งบันได ไม่ใช่แก้ทีละที่
   ---------------------------------------------------------------------------
   วัดจากของจริงที่ 375px ก่อนแก้: ป้ายแท็บกระดานคิวงาน 10px · เลขที่ใบ/ยอดรวม
   คอลัมน์/ป้ายชนิดใบ 11.5px และทั้งหน้าเป็น line-height:normal
   ⇒ "มันเหลื่อมๆ ดูยากอ่านยากครับ" — คำว่าอ่านยากชี้มาที่บล็อกนี้ตรง ๆ

   16px ที่ --fs-md ไม่ได้เลือกเพราะสวย แต่เพราะ **iOS Safari ซูมหน้าจอเข้าเอง
   เมื่อโฟกัสช่องกรอกที่เล็กกว่า 16px** แล้วผู้ใช้ต้องถ่างนิ้วซูมกลับเองทุกครั้ง
   =========================================================================== */
@media (max-width:720px){
  :root{
    --fs-xxs:13px;     /* พื้นแข็ง: ไม่มีตัวหนังสือไหนในแอปเล็กกว่านี้บนมือถือ */
    --fs-xs:13px;
    --fs-sm:14px;
    --fs-md:16px;
    --fs-lg:17px;
    --fs-xl:19px;
    --fs-2xl:22px;
    --fs-3xl:26px;

    --sp-5:16px; --sp-6:20px; --sp-7:24px; --sp-8:32px;

    --topbar-h:56px;
    --wrap-max:100%;
    --board-max:100%;
  }
}