/* ════════════════════════════════════════════════════════════════════════
   ชุดสีและฟอนต์ร่วมของทุกหน้าหลังล็อกอิน — "คำศัพท์" ไม่ใช่ "หน้าตา"
   ════════════════════════════════════════════════════════════════════════

   🔴 ทำไมต้องมีไฟล์นี้

   ก่อนหน้านี้ระบบเดียวกันมีสองหน้าตา — /dashboard เป็นธีมสว่างโทนน้ำเงิน
   ชุดเดียวกับ smart.thaimaxwell.com ส่วน /devices กับหน้าผู้ดูแลทั้งสองหน้า
   เป็นธีมมืดโทนเทา เพราะสร้างคนละรอบแล้วต่างคนต่างเขียน :root ของตัวเอง

   ผลคือคนที่กดจากหน้าลูกค้าไปหน้าทะเบียน รู้สึกเหมือนหลุดออกไปอีกระบบหนึ่ง
   ซึ่งบั่นทอนความเชื่อถือมากกว่าที่ดูเหมือน — หน้าจอที่ดูเป็นคนละระบบ
   ทำให้คนไม่แน่ใจว่าข้อมูลที่เห็นอยู่มาจากที่เดียวกันหรือเปล่า

   ⚠️ ห้ามเขียนบล็อก :root ทับในหน้าใด ๆ อีก · ถ้าต้องการสีใหม่ให้เพิ่มที่นี่
   หน้าที่ประกาศสีของตัวเองคือหน้าที่จะไม่เปลี่ยนตามในวันที่ธีมกลางเปลี่ยน
   แล้วไม่มีใครรู้จนกว่าจะเปิดดู · มีเทสใน theme_test.go กันไว้แล้ว

   ── 🔴 แยกจาก components.css ด้วยเหตุผลอะไร ───────────────────────────────

   ไฟล์นี้มีแต่ "คำศัพท์" — สี ฟอนต์ และรูปแบบพื้นฐานของ body
   ใส่เข้าไปในหน้าไหนก็ไม่เปลี่ยนหน้าตาของหน้านั้น มีแต่ทำให้เรียกสีได้

   ส่วน components.css มี "หน้าตา" — .card .banner .pill ปุ่ม ตาราง ช่องกรอก
   ซึ่งชื่อคลาสพวกนี้หน้า /dashboard ใช้อยู่แล้วในความหมายคนละอย่าง
   (.card ของหน้านั้นคือการ์ดลูกค้าที่มีรูปย่อและ flex ไม่ใช่กล่องเปล่า)

   ถ้ารวมเป็นไฟล์เดียวแล้วให้ /dashboard เรียก หน้าลูกค้าจะเพี้ยนทันที
   แยกสองไฟล์จึงไม่ใช่การจัดระเบียบให้สวย แต่เป็นเงื่อนไขที่ทำให้ /dashboard
   เลิกประกาศสีของตัวเองได้โดยไม่ต้องรื้อ CSS ทั้งหน้า

   ค่าสีทั้งหมดคือชุดของ /dashboard ซึ่งดึงมาจาก assets/css/global.css
   ของระบบเดิมจริง ๆ ไม่ใช่ค่าที่กะเอาให้ใกล้เคียง */

/* ── ฟอนต์ Prompt · self-host ฝังในไบนารี ไม่ดึงจาก Google ──────────────
   หน้านี้ต้องทำงานได้แม้เครื่องออกอินเทอร์เน็ตไม่ได้ ด้วยเหตุผลเดียวกับ
   ที่ Chart.js ถูก vendor ไว้ตั้งแต่แรก · Prompt เป็น SIL Open Font License */
@font-face{font-family:Prompt;font-weight:400;font-display:swap;
  src:url('/api/assets/fonts/Prompt-400-thai.woff2') format('woff2');
  unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Prompt;font-weight:400;font-display:swap;
  src:url('/api/assets/fonts/Prompt-400-latin.woff2') format('woff2')}
@font-face{font-family:Prompt;font-weight:500;font-display:swap;
  src:url('/api/assets/fonts/Prompt-500-thai.woff2') format('woff2');
  unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Prompt;font-weight:500;font-display:swap;
  src:url('/api/assets/fonts/Prompt-500-latin.woff2') format('woff2')}
@font-face{font-family:Prompt;font-weight:600;font-display:swap;
  src:url('/api/assets/fonts/Prompt-600-thai.woff2') format('woff2');
  unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Prompt;font-weight:600;font-display:swap;
  src:url('/api/assets/fonts/Prompt-600-latin.woff2') format('woff2')}

:root{
  --navy:#364d9d;          /* สีหลัก ปุ่ม เมนู ต้นแถบไล่สี */
  --navy-2:#2071c2;        /* ปลายแถบไล่สี */
  --navy-soft:#647bb8;
  --ink:#333;
  /* 🔴 เข้มขึ้นจากค่าของระบบเดิม (#717171 · #8b8b8b) เมื่อ 28 ก.ย. 2569 (ใบ 7dcec963)
     #8b8b8b บนพื้นขาวได้ contrast 3.5:1 ต่ำกว่าเกณฑ์ 4.5:1 · หัวตารางทุกหน้าใช้สีนี้
     ที่ตัวอักษร 13px ซึ่งคนยืนอ่านจอโรงงานห่างจากเครื่องอ่านไม่ออก
     #717171 ผ่านบนพื้นขาวแต่ตกบนพื้นเทา #f6f6f6 ของหน้า · ยังเป็นเทาเหมือนเดิม แค่อ่านออก */
  --ink-2:#666;
  --ink-3:#6f6f6f;
  --line:#dedede;
  --line-2:#e9e9e9;
  /* ⚠️ ขอบของช่องกรอกในระบบเดิมเข้มกว่าขอบการ์ดเล็กน้อย (#d9d9d9 ไม่ใช่ #dedede)
     ต่างกันนิดเดียวแต่ทำให้ช่องกรอกดู "กดได้" ขึ้นจริงเวลาวางข้างการ์ด */
  --line-input:#d9d9d9;
  --bg:#f6f6f6;
  --card:#fff;

  /* ── สีสถานะแบบ "จุด" · ใช้กับวงกลมและเส้นขอบเท่านั้น ──────────────────
     สดเกินกว่าจะเอาไปทำสีตัวอักษรบนพื้นขาว (#00cc00 อ่านแทบไม่ออก)
     เวลาทำตัวหนังสือให้ใช้ --ok / --warn / --danger ข้างล่างแทน */
  --green:#00cc00;         /* ปกติ */
  --yellow:#ffd400;        /* เฝ้าระวัง — เข้มกว่า #ffff00 เดิมให้อ่านออกบนพื้นขาว */
  --red:#ff0000;           /* วิกฤต */
  --purple:#8f6edb;        /* ฝั่งเราขัดข้อง — สถานะที่ระบบเดิมไม่มี */

  /* ── "ค่าค้าง" ของการส่งข้อมูล · ไม่ใช่เหลือง (ใบ 7dcec963) ─────────────
     🔴 เดิมใช้เหลืองชุดเดียวกับ "เฝ้าระวัง" ของ alarm · หน้าลูกค้าเหลือง = ค่าค้าง
     แต่หน้าภาพรวมเหลือง = เฝ้าระวัง คนที่สลับไปมาสองหน้าอ่านผิดทั้งสองทาง
     สองคำถามนี้ต่างกัน — "ข้อมูลเข้าไหม" กับ "เครื่องเป็นยังไง" — จึงต้องต่างกันที่หน้าตา
     การส่งข้อมูลใช้วงแหวน (d-stale d-silent d-nodata) ความรุนแรงใช้จุดทึบ */
  --stale:#46587e;
  --stale-bg:#edf0f6;
  --stale-line:#8e9bb8;

  /* ── สีตัวอักษรบอกสถานะ · ผ่านเกณฑ์ contrast บนพื้นขาว ───────────────── */
  --ok:#0a7a0a;
  --warn:#8a6a00;
  --danger:#c40000;
  --accent:var(--navy);
  --dim:var(--ink-2);

  /* พื้นอ่อนของป้ายสถานะ */
  --ok-bg:#e8f8e8;
  --warn-bg:#fff8dd;
  --danger-bg:#ffecec;
  --gray-bg:#f0f0f0;
  --purple-bg:#f4f1ff;
}

*{box-sizing:border-box}
/* 🔴 ขนาดตัวอักษรทั้งระบบตั้งที่นี่ที่เดียว (30 ก.ย. 2569)
   ตี๋เล็กดูหน้าจริงแล้วบอกว่าตัวอักษรใหญ่เกินไปทุกหน้า · เดิมทุกหน้าเขียน font-size เป็น px
   ตายตัวรวมราว 190 จุด การลดจึงต้องไล่แก้ทีละไฟล์ · แปลงเป็น rem ทั้งหมดแล้ว
   ⇒ ปรับขนาดทุกหน้าได้ด้วยตัวเลขบรรทัดล่างตัวเดียว (16px = ขนาดเดิม · 14px = เล็กลง 12.5%)
   ⚠️ หน้าใหม่ให้เขียนเป็น rem เสมอ ถ้าเขียน px จะไม่เล็กตามหน้าอื่น · theme_test.go ฟ้อง */
html{font-size:14px}
/* ⚠️ เดิม 16px / บรรทัด 26px ตามระบบเดิม · ตอนนี้เป็น 1rem ซึ่งอิง html{font-size} ข้างบน
   🔴 ประวัติ: 16px / บรรทัด 26px คือค่าจริงของระบบเดิม ไม่ใช่ 14px
   วัดจาก admin-clients.php เมื่อ 12 ก.ย. 2569
   ตัวอักษรเล็กกว่านี้ทำให้หน้าจอแน่นกว่าที่ลูกค้าคุ้น และคนอ่านบนจอโรงงาน
   ที่อยู่ห่างจากตัวเครื่องจะอ่านไม่ออก

   ⚠️ สีตัวอักษรฐานเป็น --ink-2 ไม่ใช่ --ink · ระบบเดิมใช้เทาเป็นสีเนื้อความ
   แล้วเก็บสีเข้มไว้ให้หัวเรื่องและตัวเลขที่ต้องเด่น */
body{margin:0;background:var(--bg);color:var(--ink-2);
  font-family:Prompt,-apple-system,"Segoe UI",sans-serif;font-size:1rem;line-height:1.625;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
/* ชื่อเครื่องที่กดเข้าหน้ารายละเอียดได้ (ใบ c614eb2a) · สีเดิมไว้ ขีดเส้นใต้ตอนชี้
   ถ้าเปลี่ยนเป็นสีลิงก์ การ์ดที่ขอบแดงจะมีชื่อสีน้ำเงินแย่งสายตาจากสถานะ */
a.devlink:hover{text-decoration:underline;color:var(--navy)}