/* theme.css — DESIGN SYSTEM เดียวของ nui-oh (NO-UI1)
   ★ ฟอนต์ self-host ทั้งหมดใน /static/fonts/ — ไม่มี CDN ภายนอกสักเส้น
   ★ ห้ามแตะ id/class ที่ JS เกาะ — ไฟล์นี้เปลี่ยนแค่ "หน้าตา" ไม่เปลี่ยนโครง
   NO-UI2: ฟอนต์เดียว = IBM Plex Sans Thai (body/UI/หัวเรื่อง) · IBM Plex Mono (รหัส/SKU/บาร์โค้ด/เลข)
   — เลิกใช้ Trirong แล้ว (ตัด @font-face + woff2 ออก ลด payload · CDN=0 เหมือนเดิม) */

@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-thai-400-thai.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-thai-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-thai-500-thai.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-thai-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-thai-600-thai.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-thai-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS — แหล่งความจริงเดียวของสี/ฟอนต์/ระยะ ทุกหน้าอ้างจากตรงนี้
   โทน: minimal-luxe อริสโตแครต · พื้นสว่าง (งาช้าง)
   หลักคิด: ความหรูมาจาก whitespace + เส้น hairline + จังหวะตัวอักษร — ไม่ใช่เงา
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* พื้น / ผิว / เส้น */
  --bg:#FAF7F2;            /* งาช้าง */
  --surface:#FFFDF8;
  --surface-2:#F5F1E9;     /* หัวตาราง · แถบยกเล็กน้อย */
  --line:#E7E2D8;          /* hairline 1px = โครงสร้างหลักของงานนี้ */
  --line-soft:#F0ECE4;     /* เส้นคั่นแถวในตาราง (บางกว่า) */

  /* ตัวอักษร */
  --ink:#1F2421;
  --ink-muted:#6B7069;
  --ink-faint:#959B92;     /* ชั้นที่ 3 — hint / empty state */

  /* เขียว */
  --green-900:#0E2E23;     /* แถบหัว (topbar) */
  --green-800:#16382B;     /* hover บนพื้นเข้ม */
  --green-700:#1C4A38;     /* ปุ่ม primary */
  --green-600:#245B45;     /* hover ของ primary */
  --green-100:#E8F0EB;     /* tint — hover แถวตาราง */

  /* ทองเหลือง — accent ใช้น้อย ๆ: แถบ active, focus ring */
  --brass:#A98C5B;
  --brass-soft:#F2EADB;

  /* functional — ความหมายเดิมทุกตัว */
  --danger:#B3402F;  --danger-soft:#F7E8E4;   /* margin ติดลบ */
  --warn:#B7791F;    --warn-soft:#FAF1DD;
  --ok:#2F6B4F;      --ok-soft:#E5EFE9;

  /* ระยะ — สเกล 8px */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:48px;
  --radius:10px; --radius-sm:8px;

  /* เงา — แทบไม่ใช้ (สงวนไว้ให้ modal/การ์ดลอยเท่านั้น) */
  --shadow-sm:0 1px 2px rgba(31,36,33,.03);
  --shadow:0 1px 2px rgba(31,36,33,.04), 0 18px 40px -30px rgba(31,36,33,.30);

  /* ฟอนต์ (self-host ทั้งหมด — ไม่มี CDN ภายนอก) */
  /* NO-UI2: ฟอนต์เดียวทั้งเว็บ — หัวเรื่องเดิม (serif Trirong) เปลี่ยนมาใช้ sans ตัวเดียวกับ body
     (แก้ token เดียว → ทุกที่ที่อ้าง var(--font-serif) กลายเป็น IBM Plex Sans Thai) · หนักด้วย weight */
  --font-serif:var(--font-sans);
  --font-sans:'IBM Plex Sans Thai',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* ── alias ของชื่อเดิม ────────────────────────────────────────────────────
     style.css + inline <style> ของหน้าเก่าอ้างชื่อพวกนี้อยู่เต็มไปหมด
     แม็พไว้ที่นี่ที่เดียว → ทุกกฎเดิมเปลี่ยนโทนตามทันที โดยไม่ต้องไล่แก้ทีละบรรทัด */
  --brand:var(--green-700);
  --brand-2:var(--green-600);
  --muted:var(--ink-muted);
  --line-2:var(--line-soft);
  --danger-bg:var(--danger-soft);
  --mono:var(--font-mono);      /* app.html อ้าง var(--mono) อยู่ */
}

/* ═══════════════ BASE ═══════════════ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:16px;          /* base 15–16px */
  line-height:1.65;        /* ไทยต้องโปร่ง */
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* หัวเรื่อง = ฟอนต์เดียวกับ body (IBM Plex Sans Thai) แต่หนากว่า → ลำดับชั้นด้วย weight+size (NO-UI2) */
h1,h2,h3{
  font-family:var(--font-serif);
  font-weight:600;
  color:var(--ink);
  line-height:1.35;
  margin:0 0 var(--s1);
}
h1{font-size:1.6rem}
h2{font-size:1.25rem}
h3{font-size:1.05rem}

/* ตัวเลขต้องเรียงตรงคอลัมน์เสมอ (tnum) — ทั้งในตารางและช่องกรอกตัวเลข */
table th,table td,.num,.mono,input[type=number],
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.mono{font-family:var(--font-mono)}

/* SKU / รหัส / บาร์โค้ด = mono */
.sku-code,.barcode-cell,.map-sku-code,.map-mono{font-family:var(--font-mono)}

/* โฟกัส = วงแหวนทองเหลือง — accent เดียวที่โผล่ทั่วทั้งระบบ */
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
::selection{background:var(--green-100);color:var(--ink)}

::placeholder{color:var(--ink-faint);opacity:1}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}