/* ============================================================================
   PTCARGO · shared/css/utilities.css   (Design System · Layer 4 of 4)
   ----------------------------------------------------------------------------
   Single-purpose helper classes, keyed to the spacing tokens. Loaded LAST so
   a utility can nudge any component. No new colors are introduced here.
   Phase 1 does NOT touch any .html — utilities wait for batch migration.
   ========================================================================== */

/* ---- margin-top ---------------------------------------------------------- */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

/* ---- margin-bottom ------------------------------------------------------- */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

/* ---- padding ------------------------------------------------------------- */
.p-0 { padding: 0; }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.px-4 { padding-inline: var(--space-4); }
.py-4 { padding-block: var(--space-4); }

/* ---- gap ----------------------------------------------------------------- */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* ---- flexbox helpers ----------------------------------------------------- */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

/* ---- text ---------------------------------------------------------------- */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-muted  { color: var(--color-muted); }
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-danger  { color: var(--color-danger); }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.text-sm { font-size: var(--font-sm); }
.text-lg { font-size: var(--font-lg); }

/* ---- sizing -------------------------------------------------------------- */
.w-full { width: 100%; }
.h-full { height: 100%; }

/* ---- radius -------------------------------------------------------------- */
.rounded    { border-radius: var(--radius-md); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-pill { border-radius: var(--radius-pill); }

/* ---- horizontal scroll (เลื่อนซ้ายขวา · ซ่อน scrollbar) ------------------- */
.scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                 /* Firefox */
}
.scroll-x::-webkit-scrollbar { display: none; }   /* WebKit/Chrome */

/* ---- visibility ---------------------------------------------------------- */
.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   PHASE 2 — เติมของที่ "ขาดจริง" ตามคำสั่งเจ้าของ (2026-09-05)
   ----------------------------------------------------------------------------
   วัดก่อนเติม: inline style 1,549 จุดทั้งระบบ · ที่ซ้ำบ่อยสุดคือ
     color 618 · font-size 435 · margin-top 280 · display 229 · padding 211
   ของที่มีอยู่แล้วครอบได้เกินครึ่ง (.hidden .text-center .flex .w-full .flex-1
   .text-muted .mt-* .mb-*) จึงเติมเฉพาะสามกลุ่มที่ยังไม่มีจริง ๆ
   ★ ไม่ประกาศสีใหม่แม้แต่สีเดียว — ทุกค่าอ้าง token เดิม ตามเกณฑ์ข้อ 6 ของเจ้าของ
   ========================================================================== */

/* ---- type scale ----------------------------------------------------------
   ขนาดที่ถูกเขียน inline จริงในระบบ (นับจากไฟล์): 12px×68 · 10.5px×59 ·
   11.5px×49 · 11px×47 · 12.5px×45 · 13px×37 — ตั้งชื่อตามตัวเลขจริงเพื่อให้
   ย้ายจาก inline มาได้แบบตรงตัว ไม่ต้องตีความว่า "sm" ของหน้าไหนคือกี่ px */
.fs-10  { font-size: 10px; }
.fs-105 { font-size: 10.5px; }
.fs-11  { font-size: 11px; }
.fs-115 { font-size: 11.5px; }
.fs-12  { font-size: 12px; }
.fs-125 { font-size: 12.5px; }
.fs-13  { font-size: 13px; }
.fs-14  { font-size: 14px; }
.fs-16  { font-size: 16px; }
.fs-18  { font-size: 18px; }

/* ---- น้ำหนักตัวอักษร (มี .fw-600/.fw-700 อยู่แล้ว เติมที่ขาด) ------------- */
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }

/* ---- สีข้อความ -----------------------------------------------------------
   --sun-deep ถูกเขียน inline 99 ครั้ง · --ink-2 อีก 46 ครั้ง */
.text-ink       { color: var(--ink); }
.text-ink-2     { color: var(--ink-2); }
.text-sun       { color: var(--sun); }
.text-sun-deep  { color: var(--sun-deep); }
.text-cta       { color: var(--cta); }
.text-warning   { color: var(--gold); }
.text-inherit   { color: inherit; }

/* ---- กล่องไอคอนมีสี ------------------------------------------------------
   ★ ตอบเกณฑ์ข้อ 3 ของเจ้าของ ("ไอคอนดูจืด") ด้วยรูปแบบที่ระบบใช้อยู่แล้ว
     198 จุดทั่วระบบทำแบบนี้: พื้นหลังอ่อน + ไอคอนสีเข้ม แต่ทุกที่เขียนเอง
     inline คนละชุด ⇒ ยกมาเป็นคลาสเดียว
   ★ ไอคอนใช้งาน (ลูกศร/ติ๊กถูก/นาฬิกา) ไม่ต้องใส่คลาสนี้ — ใส่แล้วรกกว่าเดิม
     ใช้กับไอคอนที่ "สื่อความหมาย" เท่านั้น: หัวข้อการ์ด · ไทล์เมนู · ป้ายสถานะ */
.pt-ic {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  flex: none;
}
.pt-ic > svg { width: 19px; height: 19px; }
.pt-ic-sm { width: 30px; height: 30px; border-radius: 9px; }
.pt-ic-sm > svg { width: 16px; height: 16px; }
.pt-ic-lg { width: 46px; height: 46px; border-radius: 14px; }
.pt-ic-lg > svg { width: 23px; height: 23px; }

/* ★★ ต้องใช้ชุด --color-* เท่านั้น ห้ามใช้ --sun / --gold ตรงนี้ ★★
     เพราะ token สองตัวนั้น "ชื่อเดียวกันแต่คนละสี" ระหว่างสองระบบ:
       --sun  = #ff7a1a (ส้ม) ที่ tokens.css  แต่ = #1D4ED8 (น้ำเงิน) ที่ admin-base.css
       --gold = #ffb23e (เหลือง) ที่ tokens.css แต่ = #2563EB (น้ำเงิน) ที่ admin-base.css
     ⇒ ถ้าคลาสกลางอ้าง token พวกนั้น กล่องสีเดียวกันจะออกคนละสีคนละหน้าทันที
     ชุด --color-* ประกาศที่ tokens.css ที่เดียว ไม่มีใคร override และทุกหน้าโหลดอยู่แล้ว */
.pt-ic-orange { background: var(--color-primary-soft, #FFECE0); color: var(--color-primary, #EF5F06); }
.pt-ic-blue   { background: var(--sky-soft, #EAF2FF);           color: #2E6FD1; }
.pt-ic-green  { background: var(--color-success-soft, #E6F6EE); color: var(--color-success, #1E9E6A); }
.pt-ic-gold   { background: var(--color-warning-soft, #FCF1DC); color: #B7791F; }
.pt-ic-red    { background: var(--color-danger-soft, #FDECEA);  color: var(--color-danger, #E5544B); }
.pt-ic-violet { background: #F3EFFA;                            color: #6B4EA0; }

/* ============================================================================
   สีหลัก "ตามธีมของหน้า" — --pt-accent
   ----------------------------------------------------------------------------
   ★ ปัญหาที่มันแก้: คอมโพเนนต์กลางตัวเดียวต้องใช้ได้ทั้งสามระบบที่สีคนละสี
     ที่ผ่านมาใครเขียนของกลางแล้วอ้าง --sun จะได้สีสลับกันเงียบ ๆ เพราะ
       --sun = #ff7a1a (ส้ม)   ที่ shared/css/tokens.css
             = #1D4ED8 (น้ำเงิน) ที่ modules/admin/assets/css/admin-base.css
     ⇒ ประกาศตัวใหม่ที่ "รู้ว่าตัวเองอยู่หน้าไหน" แทนการเดา

   ★ ค่ามาจากสีที่แต่ละระบบใช้จริงอยู่แล้ว ไม่ได้ตั้งใหม่:
       member/ทั่วไป = --color-primary  #ef5f06 ส้ม   (tokens.css)
       admin        = #1D4ED8 น้ำเงิน               (admin-base.css --sun)
       โกดังจีน/ไทย  = --color-success #1e9e6a เขียว (สีปุ่มหลักที่ wcn ใช้จริง)

   ★ ผูกกับคลาสที่เปลือกกลางใส่ให้ body เอง (adminshell/wcnshell/wthshell)
     จึงไม่ต้องแก้หน้าไหนเลย และหน้าที่ไม่มีเปลือกก็ได้ค่าเริ่มต้นที่ถูกต้อง
   ========================================================================== */
:root {
  --pt-accent:      var(--color-primary, #EF5F06);
  --pt-accent-soft: var(--color-primary-soft, #FFECE0);
  --pt-accent-on:   #fff;
}
/* ★ คลาสธีมล้วน (pt-theme-*) สำหรับหน้าที่ "ไม่โหลดเปลือก" โดยตั้งใจ
     หน้า login ทั้งสี่ฝั่งไม่มีเมนู/แถบบน จึงไม่มี body class ของเปลือก
     ⇒ เดิมได้ค่าเริ่มต้นเป็นส้ม ทั้งที่เป็นหน้าล็อกอินของโกดัง (เขียว) หรือแอดมิน (น้ำเงิน)
     ★ แยกคลาสธีมออกจากคลาสเปลือกโดยเจตนา — ถ้าใส่ .wcnshell ให้หน้า login ตรง ๆ
       จะลาก CSS เลย์เอาต์ของเปลือกมาด้วย (padding-top:56px · ซ่อน .top · กรอบมือถือ)
       ซึ่งทำให้หน้าล็อกอินพัง คลาสนี้จึงตั้งค่า "สี" อย่างเดียว ไม่แตะเลย์เอาต์เลย */
body.adminshell,
body.pt-theme-admin { --pt-accent: #1D4ED8; --pt-accent-soft: #EAF2FF; }
body.wcnshell,
body.wthshell,
body.pt-theme-wh    { --pt-accent: var(--color-success, #1E9E6A); --pt-accent-soft: var(--color-success-soft, #E6F6EE); }

/* ปุ่ม/ป้ายที่อยากได้ "สีหลักของหน้านั้น" โดยไม่ต้องรู้ว่าอยู่ระบบไหน */
.pt-accent      { color: var(--pt-accent); }
.pt-accent-bg   { background: var(--pt-accent); color: var(--pt-accent-on); }
.pt-accent-soft { background: var(--pt-accent-soft); color: var(--pt-accent); }
.pt-ic-accent   { background: var(--pt-accent-soft); color: var(--pt-accent); }