/* tims-ds.css — ระบบออกแบบของ TIMS
   🔴 ไฟล์นี้ถูก "สร้างขึ้น" จาก design/Prototype_TIMS.html ห้ามแก้ตรงนี้
   แก้ที่บล็อกระบบออกแบบในโปรโตไทป์ แล้วรัน  node design/extract_ds.js  ใหม่
   ปลายทางในระบบจริง: tims-php/public/css/tims-ds.css */
/* ═══ เริ่มระบบออกแบบ (tims-ds) — โทเคนทั้งหมดของระบบอยู่ในช่วงนี้ช่วงเดียว ═══
   ⭐ ลำดับ 18 (UI-01 · UI-02 · UI-07 · 18 ก.ย. 69)
   เจตนา: Laravel ยกช่วงนี้ไปเป็น `public/css/tims-ds.css` ได้ทั้งก้อนโดยไม่ต้องไล่เก็บ
   ⇒ ดึงออกเป็นไฟล์จริงด้วย `node design/extract_ds.js` (สร้าง design/tims-ds.css)
   🔴 ค่าสีทุกค่าของระบบต้องอยู่ในช่วงนี้ — ตัวตรวจข้อ 19 ห้ามมีเลขสีนอกช่วงนี้
      (ยกเว้น rgba() ที่ใช้ทำเงาและฉากหลังโปร่งแสง ซึ่งไม่ใช่ "สีของระบบ") */
:root{
  /* ⭐ สเกลตัวอักษร 9 ขั้น (UI-02 · 15 ก.ย. 69) — ห้ามใส่ตัวเลขขนาดตรง ๆ ที่ไหนอีก
     เดิมมี 74 ขนาดต่างกันใน 403 ประกาศ ห่างกันไม่ถึง 1.6px หลายคู่ (.85/.86/.87/.88rem)
     ตาคนแยกไม่ออก แต่ทำให้ลำดับความสำคัญบนหน้าจอพร่าไปหมด
     🔴 ขั้นที่ 1 = 12px คือ "พื้นล่างสุด" — ไทยที่ 11px อ่านยากจริงสำหรับคนสายตาไม่ดี
     ขั้น 7–9 เป็นขนาดสำหรับหน้าสาธารณะ/ตัวเลขเด่น ไม่ใช่ข้อความอ่าน */
  --fs-1:12px; --fs-2:13px; --fs-3:15px; --fs-4:17px; --fs-5:21px;
  --fs-6:27px; --fs-7:34px; --fs-8:44px; --fs-9:60px;

  /* ── 70% พื้นผิว: ขาวนวลอมฟ้า (ไม่ใช่ #fff) ── */
  /* CR-21 (13 ก.ย. 69): เดิมจำกัดความกว้างพื้นที่หน้างานไว้คงที่ (--page-w) ทุกหน้า —
     ตรงกับที่ต้นแบบ IT-CIL ทำ (it-cil-ds.css .page/.page-wide) แต่เจ้าของงานเห็นว่าจอกว้าง ๆ
     เหลือพื้นที่ว่างสองข้างเยอะเกินไป จึงเคาะให้ "ไม่จำกัดเลย" (ต่างจากต้นแบบโดยตั้งใจ) —
     .page/.ctxbar-in จึงเลิกใช้ max-width นี้ เต็มความกว้างจอเสมอไม่ว่าจอจะกว้างแค่ไหน */
  --paper:#eef1f8; --paper-2:#e1e6f1;
  --surface:#fbfcff; --surface-2:#f3f6fc;
  --line:#dce1ee; --line-2:#eaeef7;
  /* ── หมึก: น้ำเงินเข้ม 4 ระดับ ── */
  /* 🔴 UI-01 (15 ก.ย. 69): --ink-3 เดิมเป็น #7e869f ซึ่งได้ความคมชัดเพียง 3.53:1 บนพื้นการ์ด
     · 3.35:1 บนพื้นรอง · 3.20:1 บนพื้นหน้า — ต่ำกว่าเกณฑ์ AA ของข้อความขนาดปกติ (4.5:1) ทุกพื้น
     และ --ink-3 คือสีของ "ข้อมูลกำกับ" แทบทั้งระบบ (รหัสนักศึกษา · วันกำหนดส่ง · หัวคอลัมน์ตาราง)
     ตรวจจริงในเบราว์เซอร์พบข้อความตกเกณฑ์ 1,676 จุด และ **ทุกจุดมาจากสีตัวนี้ตัวเดียว**
     #5b6480 ให้ 5.72 / 5.42 / 5.19 และ 4.69 บนพื้นป้าย .badge.draft (พื้นเข้มสุดที่ใช้จริง)
     ⚠️ เลือกค่านี้แทน #5f6780 เพราะตัวนั้นได้ 4.49 บนพื้นป้าย — ต่ำกว่าเกณฑ์อยู่นิดเดียว
     ⚠️ ผลข้างเคียงที่ยอมรับ: ระยะห่างทางสายตาระหว่าง --ink-2 กับ --ink-3 แคบลง
        (ลำดับชั้นข้อความรองสองระดับต่างกันน้อยลง) — แลกกับการอ่านออกจริงของทุกคน
     --ink-4 ใช้ได้เฉพาะเส้นคั่น จุดสัญลักษณ์ และพื้นหลัง **ห้ามใช้กับข้อความ** (1.91–2.11:1) */
  --ink:#1f2433; --ink-2:#454d66; --ink-3:#5b6480; --ink-4:#aab0c4;
  /* ── 20% น้ำเงินหลัก ── */
  --pine:#3a4a77; --pine-dark:#2b3759; --pine-deep:#1f2747; --pine-soft:#e7eaf2;
  /* ── 10% ส้ม accent ── */
  /* UI-01: --terra-dark ทำหน้าที่สองอย่าง — เป็น "สีหมึก" ของป้าย/ชิปบนพื้น --terra-soft
     และเป็นพื้นตอนชี้เมาส์ของปุ่มส้ม · ค่าเดิม #c8431a ได้เพียง 4.04:1 บนพื้นป้าย
     #b03a15 ได้ 4.98:1 บนพื้นป้าย และ 5.91:1 บนพื้นการ์ด — ผ่านทั้งสองหน้าที่โดยไม่ต้องแยกตัวแปร */
  --terra:#eb5a26; --terra-dark:#b03a15; --terra-soft:#fce4da; --terra-deep:#93300f;
  /* ── น้ำเงินรอง / น้ำเงินเข้ม ── */
  --amber:#5b6aa0; --amber-dark:#3a4a77; --amber-soft:#e7eaf2;
  --plum:#2b3759; --plum-soft:#e2e6f0;
  /* ── สถานะ ── */
  /* ค-1 (15 ก.ย. 69): --ok / --terra สว่างเกินกว่าจะรองรับตัวอักษรสีขาว
     (ขาวบน --ok = 4.02:1 · ขาวบน --terra = 3.49:1 · เกณฑ์ AA 4.5:1)
     ⇒ เพิ่มเฉดเข้มไว้ใช้เป็น "พื้นปุ่มที่มีตัวอักษรขาว" โดยเฉพาะ
        ไม่แตะ --ok / --terra เดิม เพราะยังใช้เป็นสีจุด/เส้น/ไอคอนอีกหลายสิบจุด */
  --ok:#2f8f63;   --ok-soft:#def0e7;   --ok-ink:#1f6647;   --ok-deep:#2a7f58;
  --warn:#d98324; --warn-soft:#faecd6; --warn-ink:#8a5410;
  --bad:#cf4434;  --bad-soft:#fae0dc;  --bad-ink:#8f291d;
  /* ── สีประจำบทบาทของ TIMS (map เข้าชุดสีของ IT-CIL) ── */
  --r-student:var(--pine);    --r-student-soft:var(--pine-soft);
  --r-supervisor:var(--terra);--r-supervisor-soft:var(--terra-soft);
  --r-committee:var(--amber); --r-committee-soft:var(--amber-soft);
  --r-admin:var(--plum);      --r-admin-soft:var(--plum-soft);
  /* ── รูปทรง ── */
  --r1:8px; --r2:12px; --r3:16px; --r4:22px; --pill:999px;
  --sh-1:0 1px 2px rgba(31,36,51,.06), 0 1px 3px rgba(31,36,51,.05);
  --sh-2:0 2px 6px rgba(31,36,51,.06), 0 6px 18px rgba(31,36,51,.08);
  --sh-3:0 4px 12px rgba(31,36,51,.08), 0 14px 36px rgba(31,36,51,.12);
  /* ── เลย์เอาต์ + ฟอนต์ ── */
  --rail:268px; --rail-icon:72px;   /* ADD-19 · แถบเมนูแบบไอคอนช่วงแท็บเล็ต */
  --accent:var(--pine); --accent-dark:var(--pine-dark); --accent-soft:var(--pine-soft);
  /* ค-1 (15 ก.ย. 69): พื้นปุ่มหลักต้องแยกจากสีประจำบทบาท
     บทบาทอาจารย์นิเทศก์ใช้สีส้ม (--terra) เป็น --accent ซึ่งขาวบนพื้นนี้ได้แค่ 3.49:1
     ⇒ ปุ่มอ่านไม่ออกทั้งหน้าจอของบทบาทนั้น แต่สีบทบาทยังต้องเป็นส้มตามเดิม (เส้น/ไอคอน/ชิป)
     ค่าตั้งต้นเท่ากับสีบทบาท — มีแค่บทบาทเดียวที่ต้องทับ (ดู .theme-supervisor) */
  --accent-btn:var(--accent); --accent-btn-h:var(--accent-dark);
  --serif:'Trirong', Georgia, serif;
  --sans:'IBM Plex Sans Thai','IBM Plex Sans', system-ui, sans-serif;

  /* ⭐ ลำดับ 18 (UI-01 · 18 ก.ย. 69) — สีที่เหลือกระจายอยู่ในกฎต่าง ๆ ยกมาเป็นโทเคนให้ครบ
     เจตนาคือ "ค่าสีทุกค่าอยู่ในบล็อกนี้บล็อกเดียว" เพื่อให้ Laravel ยกไปทั้งก้อนได้ (tims-ds.css) */
  --on-accent:#fff;          /* ตัวอักษร/ไอคอนบนพื้นสีเข้ม — ไม่ใช่ "สีขาว" ลอย ๆ แต่คือคู่ตรงข้ามของ accent */
  --surface-plain:#fff;      /* กระดาษขาวจริง เช่น หนังสือส่งตัวที่ต้องพิมพ์ */
  --bad-deep:#8f291d;        /* ปลายไล่ระดับของสีแจ้งเตือนอันตราย */
  --warn-stripe:#fff6e6;     /* แถบลายทางของป้าย "รอดำเนินการ" */
  --video-bg:#000;           /* กรอบดำของวิดีโอฝัง (อัตราส่วน 16:9) */

  /* 🔴 สีของปฏิทิน — เป็น "ชุดสีสำหรับแยกประเภทกิจกรรม" ไม่ใช่สีประจำแบรนด์
     จึงไม่ผูกกับ --accent (ซึ่งเปลี่ยนตามบทบาท) ไม่งั้นสีกิจกรรมจะเพี้ยนตามคนที่เปิดดู */
  --cal-blue:#4f8bd6; --cal-blue-soft:#e3edfb; --cal-blue-ink:#1c5aa8;
  --cal-purple:#9b6ee0; --cal-purple-soft:#ece6fb; --cal-purple-ink:#6836c2;

  /* 🔴 สีของแบรนด์ภายนอก — ห้ามเปลี่ยนตามธีมของเรา
     ปุ่ม Google ต้องตรงตามข้อกำหนดแบรนด์ของ Google และตัวอย่างผลค้นหาต้องเหมือนของจริง
     ไม่งั้นสิ่งที่ผู้ดูแลเห็นในหน้าตั้งค่าจะไม่ตรงกับสิ่งที่ผู้ใช้เห็นจริงบน Google */
  --g-line:#dadce0; --g-line-h:#c4c8cc; --g-ink:#3c4043; --g-hover:#f8f9fa;
  --seo-link:#1a5cff;
}

/* ── ธีมตามบทบาท: ใช้ "คลาส" ไม่ใช่แอตทริบิวต์กำหนดสไตล์อินไลน์ ──
   เหตุผล: CSP ของระบบจริงไม่มี 'unsafe-inline' ⇒ แอตทริบิวต์นั้นจะถูกบล็อก
   (IT-CIL ยังใช้ inline style อยู่ จึงต้องเปิด unsafe-inline — เราไม่เอาแบบนั้น) · B-1 (12 ก.ย. 69)
   ไล่ถอดออกทั้งระบบแล้วจริง (ดู check_prototype.js ข้อ 5ข ที่กันงอกกลับ) */
.theme-student{--accent:var(--pine);--accent-dark:var(--pine-dark);--accent-soft:var(--pine-soft);}
.theme-supervisor{--accent:var(--terra);--accent-dark:var(--terra-dark);--accent-soft:var(--terra-soft);
  --accent-btn:var(--terra-dark);--accent-btn-h:var(--terra-deep);}
.theme-committee{--accent:var(--amber);--accent-dark:var(--amber-dark);--accent-soft:var(--amber-soft);}
.theme-admin{--accent:var(--plum);--accent-dark:var(--pine-deep);--accent-soft:var(--plum-soft);}

/* ⭐ จุดเปลี่ยนขนาดจอ — ใช้ได้เฉพาะ 3 ค่านี้เท่านั้น (UI-07 · ลำดับ 18 · 18 ก.ย. 69)
   560px  โทรศัพท์ · 700px  โทรศัพท์ใหญ่/แท็บเล็ตแนวตั้ง · 900px  แท็บเล็ต/โน้ตบุ๊กเล็ก
   แต่ละขั้นมี "ด้านตรงข้าม" ได้หนึ่งตัวคือ ขั้น+1 (min-width:561 / 701 / 901)
   ใช้ตอนต้องการกฎที่ทำงานเฉพาะเหนือขั้นนั้นขึ้นไป เช่นแถบเมนูแบบไอคอนช่วง 701–900 (ADD-19)
   🔴 เดิมมี 10 ค่ากระจัดกระจาย (430/560/600/640/700/820/860/900/920/921) ซึ่งไม่ได้ตั้งใจออกแบบ
      แต่เกิดจากการเติมทีละจุดจนไม่มีใครรู้ว่าหน้าจอขนาดไหนจะเปลี่ยนอะไรบ้าง
   ⚠️ รวบโดย "ปัดขึ้น" เสมอ — กฎเกือบทั้งหมดเป็นกฎยุบคอลัมน์/ซ่อนของ
      ปัดขึ้นทำให้เริ่มยุบเร็วขึ้นเล็กน้อย (ปลอดภัย) · ปัดลงจะเกิดช่วงที่ของล้นโดยไม่มีอะไรฟ้อง
   ตัวตรวจข้อ 20 บังคับไว้แล้ว — เพิ่มค่าใหม่ต้องแก้ทั้งสเกลและตัวตรวจพร้อมกัน
   ═══ จบระบบออกแบบ (tims-ds) ═══ */