/* ฟอนต์ Kanit + Share Tech Mono ถูกโหลดด้วย <link> ใน <head> ของทุกหน้า
   ไม่ใช้ @import ที่นี่ — @import ต้องรอให้ไฟล์นี้ดาวน์โหลดเสร็จก่อน
   ถึงจะเริ่มโหลดฟอนต์ กลายเป็นรอต่อกันเป็นทอด ๆ อีก 2 รอบ
   บนเครือข่ายราชการที่ช้าจะเห็นตัวหนังสือเปลี่ยนฟอนต์กลางคัน
   ถ้าจะเปลี่ยนฟอนต์ ต้องแก้ทั้ง <link> ทุกหน้า และโทเคน --wl-font ด้านล่าง */

/* ============================================================================
   WAR ROOM P4 — LIGHT COMMAND  (ธีมขาว–น้ำเงิน)
   ชั้นตกแต่งรวมของทั้งระบบ (โหลดเป็นไฟล์สุดท้ายเสมอ จึงทับธีมเดิมได้ทุกหน้า)
   ----------------------------------------------------------------------------
   ไฟล์นี้มาแทน css/warroom-cyber.css (ธีมมืด) แบบตัวต่อตัว —
   วางไว้ตำแหน่งเดิมใน <head> ของทุกหน้า ไม่ต้องแก้ HTML อย่างอื่นเลย
   ไฟล์เดิมยังอยู่ในโฟลเดอร์ ถ้าจะย้อนกลับให้สลับชื่อใน <link> กลับไปเท่านั้น

   แนวคิด: "ศูนย์ปฏิบัติการกลางวัน" — อ่านง่ายก่อน แล้วค่อยสวย
     · พื้นขาว/เทาฟ้าอ่อน + น้ำเงินเป็นสีนำ  กรมท่า (#24336e) ดูดมาจากตราสัญลักษณ์
       ของระบบ (ดู :root ใน css/warroom-theme.css) จึงดึงกลับมาเป็นแกนหลัก
     · แถบซ้าย (sidebar) ยังเป็นกรมท่าเข้ม — เป็น "ก้อนสีน้ำเงิน" ของหน้า
       และตรงกับที่ warroom-theme.css ออกแบบไว้แต่แรก (ตัวหนังสือขาวโปร่ง)
       ส่วน topbar กับพื้นที่เนื้อหาเป็นสีขาว = ตัวหนังสือเข้มบนพื้นสว่างทั้งหมด
     · ตัดของที่ดูดีเฉพาะบนพื้นมืดทิ้ง — เส้นสแกน CRT, ตารางกริดเรืองแสง,
       เงาฟุ้ง (glow) รอบทุกอย่าง  บนพื้นขาวสิ่งเหล่านี้กลายเป็นคราบสกปรก
       สิ่งที่เก็บไว้คือ "โครง" ที่ทำให้ระบบดูทันสมัย — กรอบมุม HUD, ปุ่มตัดมุม,
       ตัวเลขฟอนต์กว้างเท่ากัน, แถบสีบอกความหมายบนการ์ด KPI
     · ไม่แตะโครงหน้า (topbar 64px / sidebar 220px คงเดิม) — เปลี่ยนแค่ "ผิว"
       เพื่อไม่ให้ layout ของ 24 หน้าที่มีอยู่เดิมพัง

   ทำไมตัวเลือกยังเขียนว่า body.wr-dark:
     js/theme-toggle.js เป็นคนใส่คลาสนี้ให้ <body> ทุกหน้า (และใส่ .tactical
     ให้หน้าที่มี data-luxury="1") ชื่อคลาสจึงกลายเป็น "จุดยึดของธีม" ไปแล้ว
     ไม่ใช่คำบอกว่ามืดหรือสว่าง การเปลี่ยนชื่อคลาสต้องไล่แก้ทั้ง js และ css
     อีก 4 ไฟล์ที่เขียนกฎ body.wr-dark ไว้ — เสี่ยงเกินกว่าประโยชน์ที่ได้

   หมายเหตุการดูแล:
     - ปรับ "สีทั้งระบบ" ให้แก้ที่บล็อก TOKENS ด้านล่างที่เดียว ทุกหน้าเปลี่ยนตาม
     - กฎในไฟล์นี้ใช้ !important เพราะต้องทับ inline <style> ของแต่ละหน้า
       ที่ประกาศไว้หลัง <link> (ดูโครง <head> ของหน้าต่าง ๆ)
     - ค่าคอนทราสต์ที่กำกับไว้คิดเทียบกับพื้นขาว #fff ตามเกณฑ์ WCAG 2.1
       ตัวหนังสือปกติต้องผ่าน 4.5:1 — อย่าทำให้สีไหนต่ำกว่านี้
     - เอฟเฟกต์ทุกตัวปิดอัตโนมัติเมื่อผู้ใช้ตั้ง prefers-reduced-motion
       และตอนสั่งพิมพ์ (ท้ายไฟล์)
   ============================================================================ */

/* ═══════════════════════════════════════════════════════════════════════════
   1) TOKENS — แหล่งความจริงเดียวของโทนสีทั้งระบบ
   ═══════════════════════════════════════════════════════════════════════════ */
:root,
body,
body.wr-dark,
body.tactical {
  /* ── พื้นหลัง 5 ระดับความลึก (สว่าง → ยกสูงขึ้นคือขาวขึ้น) ── */
  --wl-canvas:    #eef2f9;   /* ชั้นล่างสุดของหน้า */
  --wl-canvas-2:  #f6f9fd;
  --wl-surface:   #ffffff;   /* พื้นการ์ด/แผงทึบ */
  --wl-raise:     #f4f8fd;   /* hover / แถวสลับสี */
  --wl-lift:      #ffffff;   /* modal / dropdown / ชั้นลอยสุด */

  /* ── พื้นผิวโปร่ง ── */
  --wl-glass:     rgba(255, 255, 255, .88);
  --wl-glass-2:   rgba(255, 255, 255, .95);
  --wl-well:      #f7f9fd;   /* ช่องกรอกข้อมูล — จมลงไปจากพื้นการ์ดนิดเดียว */

  /* ── เส้นขอบ ── */
  --wl-line:      #e2e9f3;
  --wl-line-2:    #c9d9ee;
  --wl-line-hot:  #7aa7e6;

  /* ── สีนำ: น้ำเงิน ──
     แยกเป็น 2 ค่าเสมอ — ค่าสำหรับ "พื้น/ไอคอน" กับค่าสำหรับ "ตัวหนังสือ"
     เพราะน้ำเงินที่สวยพอจะเป็นพื้นปุ่มมักจะอ่อนเกินไปเมื่อเอามาเป็นตัวอักษร */
  --wl-blue:      #2563eb;   /* พื้นปุ่มหลัก / ไอคอน      5.17:1 */
  --wl-blue-ink:  #1d4ed8;   /* ลิงก์ / ตัวหนังสือสีน้ำเงิน 6.70:1 */
  --wl-blue-deep: #1e40af;   /* สถานะ hover ที่ต้องเข้มขึ้น 8.72:1 */
  --wl-blue-soft: #93c5fd;   /* ใช้บน "พื้นกรมท่า" เท่านั้น (sidebar) */
  --wl-blue-a06:  rgba(37, 99, 235, .06);
  --wl-blue-a10:  rgba(37, 99, 235, .10);
  --wl-blue-a16:  rgba(37, 99, 235, .16);
  --wl-on-blue:   #ffffff;   /* ตัวหนังสือบนพื้นน้ำเงินทึบ */

  /* ── กรมท่า: สีแบรนด์ของระบบ (หัวเรื่อง / sidebar / หัวตาราง) ── */
  /* ค่านี้ดูดมาจากวงกลมกลางตราสัญลักษณ์ images/logo.png โดยตรง
     (#24336e ครอบคลุม 37% ของพิกเซลน้ำเงินเข้มในไฟล์ จุดสุ่มกลางวงได้ค่าเดียวกัน)
     ทั้งไล่ระดับด้านล่างคำนวณจากค่านี้ค่าเดียว — คงเฉดสี (H 228°) และความอิ่มสี
     (S 51%) ไว้เท่าเดิม เปลี่ยนแค่ความสว่าง แถบซ้าย/แบนเนอร์/หัวตารางจึงเป็น
     "สีเดียวกับโลโก้" ทั้งระบบ ไม่ใช่น้ำเงินคนละเฉดวางข้างกัน
     ถ้าวันหลังเปลี่ยนโลโก้ ให้ดูดสีใหม่มาใส่ที่ --wl-navy ที่เดียว

     ── ปรับความเข้ม ──
   ทั้งชุดวางอยู่บนเฉดเดียวกันหมด (H 228° / S 51%) ต่างกันแค่ค่าความสว่าง L
   ถ้าจะให้เข้มขึ้นหรืออ่อนลงอีก ให้ขยับ L ของทั้ง 4 ค่าไปพร้อมกันทีละ ~4%
     สีโลโก้ตรง ๆ  L 28.6% → #24336e  (ขาว 11.8:1)
     เข้มเล็กน้อย  L 24.5% → #1f2c5e  (ขาว 13.3:1)
     ★ ใช้อยู่      L 20.5% → #1a254f  (ขาว 14.8:1)
     เข้มมาก       L 16.5% → #151d3f  (ขาว 16.4:1)
   ยิ่งเข้มยิ่งคอนทราสต์ดีขึ้น แต่จะห่างจากสีโลโก้จริงมากขึ้นเรื่อย ๆ */
  --wl-navy-deep: #131b3a;   /* เข้มสุด — ใช้ไล่ให้ปลายแถบซ้ายมีน้ำหนัก        16.9:1 */
  --wl-navy:      #1a254f;   /* ★ กรมท่าหลัก (เฉดโลโก้ ลดความสว่างลง)         14.8:1 */
  --wl-navy-2:    #212e64;   /* สว่างขึ้นหนึ่งขั้น                            12.8:1 */
  --wl-navy-3:    #28397b;   /* สว่างสุด — ปลายไล่สีของแบนเนอร์หัวเรื่อง      10.7:1 */

  /* ── ทองตำรวจ: ตราสัญลักษณ์ / ยศ / ค่าสรุปรวม ──
     ทองสด #f5c842 บนพื้นขาวได้แค่ 1.6:1 = อ่านไม่ออก ใช้ได้เฉพาะบนพื้นกรมท่า
     บนพื้นขาวต้องลดความสว่างลงเป็นสีทองเข้ม (ochre) */
  --wl-gold:      #a16207;   /* 4.92:1 บนพื้นขาว */
  --wl-gold-ink:  #854d0e;   /* 6.85:1 */
  --wl-gold-lt:   #f5c842;   /* *** บนพื้นกรมท่าเท่านั้น *** */
  --wl-gold-a:    rgba(202, 138, 4, .12);

  /* ── สีความหมาย ──
     ทุกสีมี 3 ค่า: base = พื้น/ไอคอน, ink = ตัวหนังสือ (ผ่าน 4.5:1),
     tint = พื้นอ่อนของป้าย/ชิป  เลือกใช้ให้ถูกหน้าที่ ไม่งั้นคอนทราสต์ตก */
  --wl-red:        #dc2626;  --wl-red-ink:    #b91c1c;  --wl-red-tint:    rgba(220, 38, 38, .10);   --wl-red-line:    rgba(220, 38, 38, .32);
  --wl-orange:     #ea7317;  --wl-orange-ink: #c2410c;  --wl-orange-tint: rgba(234, 115, 23, .12);  --wl-orange-line: rgba(234, 115, 23, .34);
  --wl-green:      #059669;  --wl-green-ink:  #047857;  --wl-green-tint:  rgba(5, 150, 105, .11);   --wl-green-line:  rgba(5, 150, 105, .32);
  --wl-amber:      #ca8a04;  --wl-amber-ink:  #854d0e;  --wl-amber-tint:  rgba(202, 138, 4, .13);   --wl-amber-line:  rgba(202, 138, 4, .34);
  --wl-violet:     #7c3aed;  --wl-violet-ink: #6d28d9;  --wl-violet-tint: rgba(124, 58, 237, .10);  --wl-violet-line: rgba(124, 58, 237, .30);

  /* ── ตัวอักษร (คอนทราสต์เทียบพื้นขาว) ── */
  --wl-text:      #0f1f3d;   /* หลัก      16.4:1 */
  --wl-dim:       #41567a;   /* รอง        7.4:1 */
  --wl-muted:     #586b88;   /* ลำดับสาม   5.4:1 */

  /* ── เงา — ย้อมกรมท่าเล็กน้อย เงาเทาล้วนบนพื้นฟ้าอ่อนจะดูขุ่น ── */
  --wl-shadow:    0 1px 2px rgba(15, 31, 61, .05), 0 2px 8px rgba(15, 31, 61, .06);
  --wl-shadow-md: 0 2px 4px rgba(15, 31, 61, .05), 0 8px 20px rgba(15, 31, 61, .09);
  --wl-shadow-lg: 0 4px 8px rgba(15, 31, 61, .06), 0 18px 44px rgba(15, 31, 61, .16);
  /* แทนที่ "เงาฟุ้งนีออน" ของธีมมืด — บนพื้นขาวใช้วงแหวนสีแทน */
  --wl-ring:      0 0 0 3px rgba(37, 99, 235, .13);
  --wl-ring-hot:  0 0 0 4px rgba(37, 99, 235, .20);

  /* ── รูปทรง ── */
  --wl-r:         12px;   /* รัศมีมุมมาตรฐาน */
  --wl-r-sm:      8px;
  --wl-notch:     10px;   /* ระยะตัดมุมของปุ่ม/แผงแบบ HUD */

  /* ── สเกลขนาดตัวอักษร ──
     เดิมทั้งระบบมีขนาดตัวอักษรต่างกัน 74 ค่า (rem 62 + px 12) ซึ่งหลายค่าห่างกัน
     ไม่ถึงครึ่งพิกเซล เช่นช่วง .78 / .8 / .8125 / .82 / .83 / .84 / .85 / .86 /
     .875 / .88 — สิบค่าในระยะ 0.1rem ตาแยกไม่ออกแต่ทำให้ทุกหน้าดู "ประกอบขึ้นมา"
     แทนที่จะ "ออกแบบมา"

     ยุบเหลือ 15 ขั้น โดยเลือกขั้นให้ตรงกับค่าที่ใช้บ่อยที่สุดอยู่แล้ว
     ผลคือ 77% ของจุดที่ใช้งานขยับไม่เกินครึ่งพิกเซล เฉลี่ยทั้งระบบ 0.31px
     ขั้นล่างถี่กว่าขั้นบน เพราะระบบนี้เป็นงานตารางที่ข้อความเล็กเยอะ

     ค่าที่เขียนไว้ในไฟล์ต่าง ๆ ถูกปรับให้ตรงสเกลแล้วทั้งหมด (1,044 จุด)
     โทเคนชุดนี้มีไว้ให้โค้ดที่เขียนใหม่อ้างถึง จะได้ไม่แตกสเกลอีก */
  --wl-fs-4xs:   .65rem;    /* 10.4px — ป้ายจิ๋ว ตัวห้อยในตาราง */
  --wl-fs-3xs:   .7rem;     /* 11.2px */
  --wl-fs-2xs:   .75rem;    /* 12px   — คำอธิบายประกอบ */
  --wl-fs-xs:    .8rem;     /* 12.8px */
  --wl-fs-sm:    .85rem;    /* 13.6px — ขนาดที่ใช้มากที่สุดในระบบ */
  --wl-fs-base:  .9375rem;  /* 15px   — เนื้อความปกติ */
  --wl-fs-md:    1.05rem;   /* 16.8px */
  --wl-fs-lg:    1.25rem;   /* 20px   — หัวข้อการ์ด */
  --wl-fs-xl:    1.5rem;    /* 24px   — หัวข้อส่วน */
  --wl-fs-2xl:   1.75rem;   /* 28px   — หัวเรื่องหน้า */
  --wl-fs-3xl:   2rem;      /* 32px */
  --wl-fs-4xl:   2.5rem;    /* 40px   — ตัวเลข KPI */
  --wl-fs-5xl:   3rem;      /* 48px */
  --wl-fs-6xl:   3.5rem;    /* 56px */
  --wl-fs-7xl:   4rem;      /* 64px   — ตัวเลขจอใหญ่ */

  /* ── ฟอนต์ ──
     Kanit (Cadson Demak) เป็นฟอนต์หลักของทั้งระบบ — มีอักขระไทยครบทุกน้ำหนัก
     Share Tech Mono มีเฉพาะละติน+ตัวเลข — ใช้เฉพาะจอเลข/นาฬิกาแบบเทอร์มินัล
     ห้ามเอาไปใส่ข้อความไทย ไม่งั้นจะตกไปใช้ฟอนต์ระบบแล้วหน้าตาไม่เข้าชุดกัน */
  --wl-font:      'Kanit', 'Sarabun', -apple-system, sans-serif;
  --wl-mono:      'Share Tech Mono', 'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  /* ═════ สะพานเชื่อมโทเคนของธีมเดิม ═════
     component เก่าที่อ้าง var(--wr-* / --wr-d-* / --tc-* / --wrt-*) จะเปลี่ยนสี
     ตามไปด้วยโดยไม่ต้องไล่แก้ทีละไฟล์ — นี่คือกลไกที่ทำให้ไฟล์เดียวพลิกทั้งระบบได้
     (ตัวเลือก body.wr-dark / body.tactical ในรายการข้างบนมีน้ำหนักเท่ากับที่
      dark-mode.css และ warroom-tactical.css ประกาศไว้ และไฟล์นี้โหลดทีหลัง จึงชนะ) */

  /* ชั้นฐาน — css/warroom-theme.css */
  --wr-bg:        var(--wl-canvas);
  --wr-card-bg:   var(--wl-surface);
  --wr-border:    var(--wl-line);
  --wr-text:      var(--wl-text);
  --wr-muted:     var(--wl-muted);
  --wr-navy:      var(--wl-navy);
  --wr-navy-mid:  var(--wl-navy-3);
  --wr-gold:      var(--wl-gold);
  --wr-gold-lt:   var(--wl-gold-lt);
  --wr-red:       var(--wl-red);
  /* --wr-blue / --wr-blue-lt ถูกใช้ใน warroom-theme.css กับปุ่มค้นหา/ปุ่มบันทึก
     (#search-btn, #save-new-btn) แบบ !important ระดับ id ซึ่งกฎของชั้นนี้
     เอาชนะไม่ได้ — จึงเปลี่ยนที่ "ต้นทางของสี" แทน
     (ปุ่มกลุ่มนี้มีกฎบังคับตัวอักษรให้เป็นสีขาวอยู่ท้ายไฟล์ ส่วนที่ 18) */
  --wr-blue:      var(--wl-blue);
  --wr-blue-lt:   var(--wl-blue-deep);
  --wr-font:      var(--wl-font);
  --wr-radius:    var(--wl-r);
  --wr-shadow:    var(--wl-shadow);
  --wr-shadow-lg: var(--wl-shadow-lg);

  /* ชั้นธีมมืดเดิม — css/dark-mode.css */
  --wr-d-bg:        var(--wl-canvas);
  --wr-d-surface:   var(--wl-surface);
  --wr-d-surface-2: var(--wl-raise);
  --wr-d-surface-3: var(--wl-lift);
  --wr-d-surface-4: #eaf1fb;
  --wr-d-border:    var(--wl-line);
  --wr-d-border-2:  var(--wl-line-2);
  --wr-d-text:      var(--wl-text);
  --wr-d-text-dim:  var(--wl-dim);
  --wr-d-text-muted:var(--wl-muted);
  --wr-d-blue:      var(--wl-blue-ink);
  --wr-d-blue-hover:var(--wl-blue-deep);
  --wr-d-blue-glow: var(--wl-blue-a10);
  --wr-d-gold:      var(--wl-gold);
  --wr-d-gold-soft: var(--wl-gold-ink);
  --wr-d-gold-glow: var(--wl-gold-a);
  --wr-d-success:   var(--wl-green-ink);
  --wr-d-danger:    var(--wl-red-ink);
  --wr-d-warning:   var(--wl-amber-ink);
  --wr-d-info:      var(--wl-blue-ink);

  /* ชั้น luxury — css/warroom-tactical.css */
  --tc-bg-0:       var(--wl-canvas);
  --tc-bg-1:       var(--wl-canvas-2);
  --tc-bg-2:       var(--wl-surface);
  --tc-surface:    var(--wl-surface);
  --tc-panel:      var(--wl-glass);
  --tc-panel-2:    var(--wl-glass-2);
  --tc-border:     var(--wl-line);
  --tc-border-str: var(--wl-line-2);
  --tc-cyan:       var(--wl-blue-ink);
  --tc-cyan-soft:  var(--wl-blue-a10);
  --tc-gold:       var(--wl-gold);
  --tc-red:        var(--wl-red-ink);
  --tc-crit:       var(--wl-red-ink);
  --tc-green:      var(--wl-green-ink);
  --tc-good:       var(--wl-green-ink);
  --tc-orange:     var(--wl-orange-ink);
  --tc-warn:       var(--wl-amber-ink);
  --tc-purple:     var(--wl-violet-ink);
  --tc-pink:       #be185d;
  --tc-text:       var(--wl-text);
  --tc-ink:        var(--wl-text);
  --tc-muted:      var(--wl-muted);
  --tc-font:       var(--wl-font);

  /* ตารางรายงาน — css/warroom-table.css ประกาศสีทั้งหมดผ่าน --wrt-*
     ชี้โทเคนชุดนี้มาที่จานสีใหม่ทีเดียว แถบเครื่องมือ/เมนูคอลัมน์/ตัวแบ่งหน้า
     ของทุกตารางในระบบจะเปลี่ยนตามโดยไม่ต้องไล่เขียนกฎทีละตัว */
  --wrt-bg:       var(--wl-surface);
  --wrt-head-bg:  #e8eff9;
  --wrt-head-fg:  var(--wl-navy);
  --wrt-line:     #e6ecf5;
  --wrt-line-str: var(--wl-line-2);
  --wrt-hover:    rgba(37, 99, 235, .06);
  --wrt-selected: rgba(37, 99, 235, .11);
  --wrt-accent:   var(--wl-blue-ink);
  --wrt-ink:      var(--wl-text);
  --wrt-ink-soft: var(--wl-dim);
  --wrt-ink-dim:  var(--wl-muted);
  --wrt-navy:     var(--wl-navy);

  /* ชื่อโทเคนกลาง ๆ ที่หลายหน้าประกาศเองใน <style>:root ของหน้า
     (incident-report.html, profile.html ฯลฯ) — dark-mode.css เคยทับไว้ให้เข้าโหมดมืด
     ต้องทับต่อที่นี่ ไม่งั้นหน้าพวกนั้นจะกลับไปใช้สีเดิมของตัวเองแบบสุ่ม ๆ */
  --primary:         var(--wl-blue);
  --primary-light:   var(--wl-blue-soft);
  --primary-lighter: #dbe7fb;
  --accent:          var(--wl-blue);
  --text:            var(--wl-text);
  --text-muted:      var(--wl-muted);
  --bg:              var(--wl-canvas);
  --card-bg:         var(--wl-surface);
  --border:          var(--wl-line);
  --shadow:          var(--wl-shadow);
  --shadow-lg:       var(--wl-shadow-lg);
  --success:         var(--wl-green-ink);
  --success-bg:      var(--wl-green-tint);
  --warning:         var(--wl-amber-ink);
  --warning-bg:      var(--wl-amber-tint);
  --danger:          var(--wl-red-ink);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2) พื้นหลังของหน้า
   ---------------------------------------------------------------------------
   ธีมมืดเดิมมีตารางกริดเรืองแสง + เส้นสแกน CRT ทับอยู่บนพื้น
   บนพื้นขาวลายพวกนี้อ่านออกมาเป็น "รอยเปื้อน" ไม่ใช่บรรยากาศ จึงถอดทิ้งทั้งคู่
   ความลึกได้จากไล่แสงฟ้าจาง ๆ สองจุดแทน — ยังไม่แบน แต่ไม่รบกวนการอ่าน
   ═══════════════════════════════════════════════════════════════════════════ */
html { background: var(--wl-canvas); }

/* กันจอกะพริบ: dark-mode.css ทาพื้นดำไว้ตั้งแต่ก่อน <body> ถูกสร้าง
   (html.wr-dark-loading — js/theme-toggle.js ถอดคลาสนี้ออกตอน DOMContentLoaded)
   ต้องทับด้วยตัวเลือกชุดเดียวกันเป๊ะ ไม่งั้นจะเห็นจอดำแวบหนึ่งทุกครั้งที่เปิดหน้า */
html.wr-dark-loading { background: var(--wl-canvas); }
html.wr-dark-loading body {
  background: var(--wl-canvas) !important;
  color: var(--wl-text) !important;
}

/* ต้องเขียนเป็น body.wr-dark ไม่ใช่ body เฉย ๆ — dark-mode.css มีกฎ
   body.wr-dark { background: ... !important } ซึ่ง specificity สูงกว่า
   ถ้าใช้แค่ body พื้นหลังไล่แสงชุดนี้จะถูกทับด้วยสีพื้นเรียบของธีมเดิม */
body.wr-dark,
body.tactical {
  background:
    radial-gradient(1200px 660px at 10% -12%, rgba(37, 99, 235, .07) 0%, transparent 62%),
    radial-gradient(1000px 620px at 94% 2%,  rgba(36, 51, 110, .05) 0%, transparent 60%),
    linear-gradient(180deg, var(--wl-canvas-2) 0%, var(--wl-canvas) 46%, var(--wl-canvas) 100%) !important;
  background-attachment: fixed !important;
  color: var(--wl-text) !important;
  font-family: var(--wl-font) !important;
  min-height: 100vh;
}

/* บังคับฟอนต์กับ element ที่มีข้อความ —
   หลายหน้าประกาศ font-family: 'Sarabun' ไว้เองใน <style> ของหน้า
   การตั้งที่ body อย่างเดียวจึงไม่พอ ต้องไล่ทับที่ตัว element

   *** ห้ามใช้ตัวเลือกแบบ * (universal) ***
   Font Awesome ใส่ font-family ไว้ที่ตัว <i> เอง (ไม่ใช่ ::before แบบ
   bootstrap-icons) ถ้าเหวี่ยงแหทับหมด ไอคอนในหน้า auth / reset-password /
   user-management จะกลายเป็นตัวอักษรมั่ว — รายการนี้จึงจงใจไม่มี i กับ svg */
body.wr-dark h1, body.wr-dark h2, body.wr-dark h3,
body.wr-dark h4, body.wr-dark h5, body.wr-dark h6,
body.wr-dark p, body.wr-dark span, body.wr-dark div,
body.wr-dark a, body.wr-dark li, body.wr-dark td, body.wr-dark th,
body.wr-dark label, body.wr-dark button, body.wr-dark input,
body.wr-dark select, body.wr-dark option, body.wr-dark textarea,
body.wr-dark small, body.wr-dark strong, body.wr-dark b, body.wr-dark em,
body.wr-dark legend, body.wr-dark caption, body.wr-dark summary,
body.wr-dark dt, body.wr-dark dd, body.wr-dark figcaption, body.wr-dark blockquote {
  font-family: var(--wl-font) !important;
}

/* ปิดชั้นบรรยากาศของธีมเดิมทั้งสองชั้น (ตารางกริด + เส้นสแกน)
   ทั้ง warroom-cyber.css เดิมและ warroom-tactical.css วาดไว้ที่ ::before/::after ของ body */
body.wr-dark::before,
body.wr-dark::after,
body.tactical::before,
body.tactical::after { content: none !important; display: none !important; }

/* เนื้อหาต้องลอยเหนือชั้นพื้นหลังเสมอ
   *** ห้ามใส่ .wr-topbar / .wr-sidebar ในกฎนี้เด็ดขาด ***
   ทั้งสองตัวเป็น position:fixed อยู่แล้ว (warroom-theme.css) ถ้าถูกทับเป็น
   relative จะกลับเข้ามาอยู่ในสายการไหลของเอกสาร แล้วดันเนื้อหาทั้งหน้าตกลงไป
   ใต้จอจนดูเหมือนหน้าว่างเปล่า — และทั้งคู่มี z-index 1030/1040 อยู่แล้ว

   หมายเหตุ: z-index:1 ตรงนี้สร้าง stacking context ใหม่ ซึ่งเป็นสาเหตุที่
   js/theme-toggle.js ต้องย้าย modal ออกไปเป็นลูกของ <body> ก่อนเปิด
   (อ่านคำอธิบายเต็มในไฟล์นั้น) — ถ้าจะถอด z-index ออก ต้องไปแก้ที่นั่นด้วย */
body.wr-dark .wr-main-content,
body.wr-dark .dash-main,
body.wr-dark main {
  position: relative;
  z-index: 1;
}
body.wr-dark .wr-main-content,
body.wr-dark .dash-main { background: transparent !important; }

/* แถบเลื่อน — ผอม เทาฟ้า ไม่มีเรืองแสง */
* { scrollbar-width: thin; scrollbar-color: #c2cfe2 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: #c2cfe2;
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: #9fb4d0; background-clip: padding-box; }

/* ตัวเลือกข้อความ — ไม่บังคับสีตัวอักษร ปล่อยให้เป็นสีเดิมของข้อความนั้น
   จะได้ไม่มีกรณีข้อความสีอ่อนบนแถบเลือกสีอ่อน */
body.wr-dark ::selection { background: rgba(37, 99, 235, .20); }

/* วงแหวนโฟกัสมาตรฐาน — เข้าถึงได้ด้วยคีย์บอร์ดทุกที่ */
body.wr-dark :focus-visible {
  outline: 2px solid var(--wl-blue) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3) TOPBAR — แถบบัญชาการ (กรมท่าสีตราสัญลักษณ์ ตัวหนังสือขาว)
   ---------------------------------------------------------------------------
   topbar กับ sidebar เป็น "โครมของแอป" ชุดเดียวกัน จึงใช้สีเดียวกันทั้งคู่
   เนื้อหาตรงกลางยังเป็นพื้นขาว — ได้กรอบกรมท่าล้อมพื้นที่อ่านสีขาว

   สีพื้นเป็น --wl-navy ตัวเดียวกับ sidebar แบบเรียบ ไม่ไล่สี
   เพราะ sidebar เริ่มที่ใต้ topbar พอดี (top:64px) ถ้าสองแถบคนละเฉด
   จะเห็นเป็นรอยต่อพาดขวางจอตรงมุมซ้ายบน
   ═══════════════════════════════════════════════════════════════════════════ */
body.wr-dark .wr-topbar {
  background: var(--wl-navy) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0 !important;
  box-shadow: 0 2px 10px rgba(15, 31, 61, .18) !important;
  z-index: 1040 !important;
}

/* เส้นทองใต้ topbar — สีเดียวกับแฉกดาวในตราสัญลักษณ์ ทำหน้าที่ขีดเส้นแบ่ง
   แถบบนออกจากพื้นที่เนื้อหา (ธีมเดิมของ warroom-theme.css ก็ใช้ขอบทอง)
   บนพื้นกรมท่า ทองสดอ่านออกชัด ต่างจากบนพื้นขาวที่ได้แค่ 1.7:1 */
body.wr-dark .wr-topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--wl-gold-lt) 0%, rgba(245, 200, 66, .45) 42%, rgba(245, 200, 66, .18) 100%);
  opacity: 1;
  pointer-events: none;
  animation: none;
}

/* ตราสัญลักษณ์ — วงแหวนทองบาง ๆ ไม่ต้องมีพื้นขาวรองแล้ว
   เพราะพื้น topbar เป็นสีเดียวกับวงกลมกลางโลโก้ ตัวตราจึงกลืนไปกับแถบพอดี */
body.wr-dark .wr-topbar-brand img {
  border-radius: 50% !important;
  border: 1px solid rgba(245, 200, 66, .40);
  box-shadow: none;
  background: transparent;
}

body.wr-dark .wr-topbar-title {
  font-family: var(--wl-font) !important;
  letter-spacing: .06em !important;
  color: #ffffff !important;                       /* 11.8:1 */
  text-shadow: none !important;
}
/* คำเน้นในชื่อระบบ ("P4") — ต้องใช้ทองสด ไม่ใช่ --wl-gold ที่เป็นทองเข้ม
   สำหรับพื้นขาว (ทองเข้มบนกรมท่าได้แค่ 2.4:1) */
body.wr-dark .wr-topbar-title span { color: var(--wl-gold-lt) !important; text-shadow: none !important; }   /* 7.5:1 */

body.wr-dark .wr-topbar-subtitle {
  font-family: var(--wl-mono) !important;
  font-size: .65rem !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72) !important;      /* 7.0:1 */
}

/* ปุ่มกลม / ปุ่มโปรไฟล์ บน topbar — ฟิล์มขาวโปร่งบนกรมท่า */
body.wr-dark .wr-topbar .profile-btn,
body.wr-dark .wr-notify-btn,
body.wr-dark .wr-sidebar-toggle {
  background: rgba(255, 255, 255, .10) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  color: #ffffff !important;                       /* 9.4:1 บนฟิล์ม */
  transition: background .18s, box-shadow .18s, color .18s, border-color .18s;
}
body.wr-dark .wr-topbar .profile-btn:hover,
body.wr-dark .wr-notify-btn:hover,
body.wr-dark .wr-sidebar-toggle:hover {
  background: rgba(255, 255, 255, .20) !important;
  border-color: rgba(245, 200, 66, .55) !important;
  color: var(--wl-gold-lt) !important;
  box-shadow: none;
}
body.wr-dark .wr-topbar .profile-btn span,
body.wr-dark .wr-topbar .profile-btn small { color: inherit !important; }
body.wr-dark .wr-notify-badge {
  background: var(--wl-red) !important;
  color: #fff !important;
  border-color: var(--wl-navy) !important;
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4) SIDEBAR — แผงนำทาง (กรมท่าเข้ม = "ก้อนสีน้ำเงิน" ของหน้า)
   ---------------------------------------------------------------------------
   จงใจไม่ทำเป็นสีขาว: warroom-theme.css เขียนสีตัวหนังสือของเมนูไว้เป็น
   rgba(255,255,255,.6) ทั้งชุด การพลิกเป็นพื้นขาวต้องไล่ทับทุกสถานะของทุกเมนู
   (ปกติ/hover/active/danger/หัวหมวด/ผู้ใช้/ปุ่มออก) เสี่ยงตกหล่นสูงมาก
   และแถบกรมท่าคือสีแบรนด์เดิมของระบบอยู่แล้ว — ได้ทั้งความปลอดภัยและเอกลักษณ์
   ตัวหนังสือขาวบนกรมท่า #24336e = 11.8:1 อ่านง่ายกว่าธีมเดิมด้วยซ้ำ
   ═══════════════════════════════════════════════════════════════════════════ */
body.wr-dark .wr-sidebar {
  /* เริ่มที่สีตราสัญลักษณ์ตรง ๆ ตรงหัวแถบ (จุดที่สายตาไปถึงก่อนและอยู่ติดกับโลโก้
     บน topbar พอดี) แล้วค่อยไล่เข้มลงเล็กน้อยตอนท้าย ให้แถบมีน้ำหนักไม่แบนทื่อ */
  background: linear-gradient(180deg, var(--wl-navy) 0%, var(--wl-navy) 42%, var(--wl-navy-deep) 100%) !important;
  border-right: 1px solid rgba(27, 38, 81, .16) !important;
  box-shadow: 2px 0 16px rgba(15, 31, 61, .10) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* หัวข้อหมวด — ป้ายตัวเล็กพร้อมขีดฟ้านำหน้า (ข้อความไทย จึงใช้ฟอนต์หลัก ไม่ใช่ฟอนต์โมโน) */
body.wr-dark .wr-sidebar-section-label {
  font-family: var(--wl-font) !important;
  font-size: .7rem !important;
  letter-spacing: .14em !important;
  color: rgba(206, 222, 246, .82) !important;   /* 8.9:1 บนพื้นกรมท่า */
  display: flex;
  align-items: center;
  gap: .45rem;
}
body.wr-dark .wr-sidebar-section-label::before {
  content: "";
  width: 10px;
  height: 1px;
  background: var(--wl-blue-soft);
  flex-shrink: 0;
}
body.wr-dark .wr-sidebar-section-label.wr-collapsible:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .07) !important;
}

/* รายการเมนู */
body.wr-dark .wr-sidebar-item {
  position: relative;
  color: rgba(210, 224, 246, .80) !important;   /* 8.6:1 บนพื้นกรมท่า */
  border-left: 2px solid transparent !important;
  overflow: hidden;
  transition: color .18s, background .18s, border-color .18s, padding-left .18s;
}

/* แสงกวาดจากซ้ายไปขวาตอนชี้เมาส์ */
body.wr-dark .wr-sidebar-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(147, 197, 253, .18), transparent 62%);
  opacity: 0;
  transform: translateX(-100%);
  transition: transform .38s ease, opacity .38s ease;
  pointer-events: none;
}
body.wr-dark .wr-sidebar-item:hover::before { opacity: 1; transform: translateX(0); }

body.wr-dark .wr-sidebar-item:hover {
  color: #fff !important;
  background: transparent !important;
  border-left-color: var(--wl-blue-soft) !important;
  padding-left: 1.15rem;
}
body.wr-dark .wr-sidebar-item i { transition: color .18s; }
body.wr-dark .wr-sidebar-item:hover i { color: var(--wl-blue-soft) !important; }

/* รายการที่กำลังใช้งาน — แถบฟ้าสว่าง + พื้นโปร่งขาว */
body.wr-dark .wr-sidebar-item.active {
  color: #fff !important;
  font-weight: 700 !important;
  border-left-color: #7fb4ff !important;
  background: linear-gradient(90deg, rgba(147, 197, 253, .24) 0%, rgba(147, 197, 253, .05) 72%, transparent 100%) !important;
  box-shadow: none;
}
body.wr-dark .wr-sidebar-item.active i { color: #a9cfff !important; }
/* จุดสถานะท้ายรายการที่กำลังใช้งาน */
body.wr-dark .wr-sidebar-item.active::after {
  content: "";
  position: absolute;
  right: .7rem; top: 50%;
  width: 5px; height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: #7fb4ff;
  animation: wl-blink 2s ease-in-out infinite;
}

/* เมนูเฝ้าระวังสูงสุด (MOST WANTED) — โทนแดงเตือนภัย (บนพื้นกรมท่า ใช้แดงอ่อน) */
body.wr-dark .wr-sidebar-item--danger { color: #fca5a5 !important; }
body.wr-dark .wr-sidebar-item--danger::before { background: linear-gradient(90deg, rgba(248, 113, 113, .20), transparent 62%) !important; }
body.wr-dark .wr-sidebar-item--danger:hover {
  border-left-color: #f87171 !important;
  color: #fecaca !important;
}
body.wr-dark .wr-sidebar-item--danger:hover i { color: #fca5a5 !important; }
body.wr-dark .wr-sidebar-item--danger.active {
  border-left-color: #f87171 !important;
  background: linear-gradient(90deg, rgba(248, 113, 113, .22) 0%, rgba(248, 113, 113, .04) 72%, transparent 100%) !important;
}
body.wr-dark .wr-sidebar-item--danger.active::after { background: #fca5a5; }

body.wr-dark .wr-sidebar-item-sub { font-family: var(--wl-font); letter-spacing: .02em; }

/* ท้าย sidebar — ผู้ใช้ + ออกจากระบบ */
body.wr-dark .wr-sidebar-footer {
  border-top: 1px solid rgba(255, 255, 255, .10) !important;
  background: rgba(0, 0, 0, .14);
}
body.wr-dark .wr-sidebar-user:hover { background: rgba(255, 255, 255, .08) !important; }
body.wr-dark .wr-sidebar-user-name { color: #fff !important; }
body.wr-dark .wr-sidebar-user-avatar,
body.wr-dark .wr-sidebar-user-fallback {
  border-color: rgba(147, 197, 253, .55) !important;
  box-shadow: none;
}
body.wr-dark .wr-sidebar-user-fallback { background: rgba(147, 197, 253, .18) !important; color: #cfe3ff !important; }
body.wr-dark .wr-sidebar-user-role {
  font-family: var(--wl-font) !important;
  letter-spacing: .04em;
  color: rgba(198, 214, 240, .78) !important;
}
body.wr-dark .wr-sidebar-logout-btn {
  font-family: var(--wl-font) !important;
  letter-spacing: .08em;
  background: rgba(248, 113, 113, .14) !important;
  border: 1px solid rgba(248, 113, 113, .38) !important;
  color: #fecaca !important;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition: background .2s, color .2s;
}
body.wr-dark .wr-sidebar-logout-btn:hover {
  background: rgba(248, 113, 113, .28) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5) กรอบมุม HUD — ถอดออกแล้ว
   ---------------------------------------------------------------------------
   ธีมมืดชุดเก่าวาดเส้นหักมุมสี่มุมของการ์ดทุกใบให้ดูเหมือนจอเรดาร์
   บนพื้นขาวมันไม่ได้อ่านออกมาเป็นกรอบเรดาร์ แต่เป็น "ขีดเล็ก ๆ ค้างอยู่ที่มุมกล่อง"
   จึงถอดออกทั้งหมด — ตัวสร้าง element ถูกปิดที่ js/cyber-ui.js หมวด 2 แล้ว
   ที่นี่เหลือกฎซ่อนไว้เป็นตาข่ายกันพลาด เผื่อมีหน้าไหนเขียน .cy-corner ไว้ใน HTML เอง
   ═══════════════════════════════════════════════════════════════════════════ */
body.wr-dark .cy-corner { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   6) การ์ด / แผง — กระดาษขาว ขอบบาง เงานุ่ม
   ═══════════════════════════════════════════════════════════════════════════ */
body.wr-dark .card,
body.wr-dark .glass-panel,
body.wr-dark .chart-card,
body.wr-dark .filter-panel,
body.wr-dark .page-header,
body.wr-dark .pm-card,
body.wr-dark .pm-panel,
body.wr-dark .rff-card,
body.wr-dark .form-section,
body.wr-dark .search-card,
body.wr-dark #search-view .search-card,
body.wr-dark .summary-card {
  background: var(--wl-surface) !important;
  border: 1px solid var(--wl-line) !important;
  border-radius: var(--wl-r) !important;
  box-shadow: var(--wl-shadow) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--wl-text);
  position: relative;
}

/* แผงซ้าย/ขวาของหน้า GIS — เอาเฉพาะโทนสี ห้ามตั้ง position หรือ border-radius
   เพราะทั้งสองแผงเป็นกล่องเลื่อน (overflow-y:auto) ในเลย์เอาต์ flex เต็มความสูง
   ถ้าใส่ position:relative กรอบมุม HUD จะเลื่อนหายไปกับเนื้อหาข้างใน */
body.wr-dark .gis-left-panel,
body.wr-dark .gis-right-panel {
  background: var(--wl-surface) !important;
  border-color: var(--wl-line) !important;
  color: var(--wl-text);
}

body.wr-dark .card,
body.wr-dark .glass-panel,
body.wr-dark .chart-card,
body.wr-dark .pm-card,
body.wr-dark .rff-card,
body.wr-dark .form-section,
body.wr-dark .summary-card {
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
body.wr-dark .card:hover,
body.wr-dark .glass-panel:hover,
body.wr-dark .chart-card:hover,
body.wr-dark .pm-card:hover,
body.wr-dark .rff-card:hover,
body.wr-dark .summary-card:hover {
  border-color: var(--wl-line-2) !important;
  box-shadow: var(--wl-shadow-md) !important;
}

body.wr-dark .card-header {
  background: linear-gradient(90deg, var(--wl-blue-a06), transparent 70%) !important;
  border-bottom: 1px solid var(--wl-line) !important;
  color: var(--wl-navy) !important;
  font-family: var(--wl-font);
  font-weight: 600;
  letter-spacing: .02em;
}
body.wr-dark .card-body { color: var(--wl-text); }

/* ── หัวเรื่องหน้า — แบนเนอร์กรมท่า (ดูส่วนที่ 29 ประกอบ) ──
   นอกจาก .page-header ที่ใช้ร่วมกันหลายหน้า ยังมีหน้าที่ทำแถบหัวเรื่องของตัวเอง
   ด้วยชื่อคลาสคนละแบบและสีคนละโทน (น้ำเงินกรมท่า / คราม / ขาว) รวมมาไว้ที่นี่
   ทั้งหมด เพื่อให้ทุกหน้าเปิดมาเจอหัวเรื่องหน้าตาเดียวกัน

   เดิมระบบมีหัวเรื่องสองแบบปนกัน — การ์ดขาวขีดน้ำเงิน 11 หน้า กับแบนเนอร์
   กรมท่าอีก 3 หน้า ตอนนี้รวมเป็นแบนเนอร์กรมท่าแบบเดียวทั้งระบบ
   (.form-page-header / .dm-page-header ก็ใช้ไล่สีชุดเดียวกันนี้อยู่แล้ว
    จึงเข้ากันพอดีโดยไม่ต้องแก้อะไรเพิ่ม) */
body.wr-dark .page-header,
body.wr-dark .rf-page-header,
body.wr-dark .il-header-card,
body.wr-dark .rp-header-card,
body.wr-dark .summary-header-card,
body.wr-dark .rff-header {
  background: linear-gradient(135deg, var(--wl-navy) 0%, var(--wl-navy-3) 100%) !important;
  border: none !important;
  border-radius: var(--wl-r) !important;
  box-shadow: var(--wl-shadow-md) !important;
  color: #ffffff !important;
  /* *** ต้องมี padding เสมอ ***
     คลาสพวกนี้ในหน้าต้นทางส่วนใหญ่เป็นแค่ "แถว flex" ที่ไม่มีพื้นและไม่มี padding
     (เช่น .page-header ใน css/psych-dashboard.css มีแค่ display:flex + margin-bottom)
     พอชั้นนี้ใส่พื้นกับขอบให้กลายเป็นการ์ด ข้อความจึงไปชนขอบการ์ดพอดี
     คำบรรยายใต้หัวข้อถูกเบียดจนดูเหมือนโดนตัด — เห็นเหมือนกันทั้ง 11 หน้าที่ใช้คลาสนี้ */
  padding: 1.15rem 1.4rem !important;
  min-height: 0;
}
/* ระยะห่างระหว่างหัวข้อกับคำบรรยาย — หน้าเดิมตั้งไว้แค่ .15rem ซึ่งชิดเกินไป
   เมื่ออยู่ในการ์ดที่มีพื้นหลัง */
body.wr-dark .page-header .subtitle,
body.wr-dark .rf-page-header .subtitle,
body.wr-dark .il-header-card .subtitle,
body.wr-dark .rff-header .subtitle { margin-top: .3rem !important; line-height: 1.5; }

/* จอแคบ: ลด padding ลงไม่ให้หัวเรื่องกินพื้นที่เกินไป */
@media (max-width: 640px) {
  body.wr-dark .page-header,
  body.wr-dark .rf-page-header,
  body.wr-dark .il-header-card,
  body.wr-dark .rp-header-card,
  body.wr-dark .summary-header-card,
  body.wr-dark .rff-header { padding: .9rem 1rem !important; }
}
body.wr-dark .page-header h1,
body.wr-dark .rf-page-header h1,
body.wr-dark .il-header-card h1,
body.wr-dark .rp-header-card h1,
body.wr-dark .summary-header-card h1,
body.wr-dark .rff-header h1 {
  font-family: var(--wl-font) !important;
  color: #ffffff !important;                 /* 10.7-14.8:1 บนไล่สีกรมท่า */
  letter-spacing: .01em;
  text-shadow: none !important;
}
body.wr-dark .page-header .subtitle,
body.wr-dark .rf-page-header .subtitle,
body.wr-dark .subtitle {
  color: var(--wl-muted) !important;
  font-size: .8rem;
  letter-spacing: .03em;
}

/* กล่องไอคอนหัวเรื่อง — สี่เหลี่ยมมนพื้นฟ้าอ่อน
   วงแหวนประหมุนของธีมเดิมถูกถอดออก (ดู .icon-box::after ด้านล่าง)
   บนพื้นขาวมันอ่านเป็น "เส้นประเปื้อน" รอบไอคอน ไม่ใช่ลูกเล่น */
body.wr-dark .icon-box {
  background: var(--wl-blue-a10) !important;
  color: var(--wl-blue-ink) !important;
  border: 1px solid rgba(37, 99, 235, .22) !important;
  border-radius: var(--wl-r-sm) !important;
  box-shadow: none !important;
  position: relative;
}
body.wr-dark .icon-box::after { content: none !important; display: none !important; }

/* ── หัวข้อแผง / หัวข้อส่วน ── */
body.wr-dark .panel-title,
body.wr-dark .filter-col-title,
body.wr-dark .chart-title,
body.wr-dark .rff-card-head,
body.wr-dark .gis-panel-title,
body.wr-dark .gis-section-title,
body.wr-dark .pm-head {
  font-family: var(--wl-font) !important;
  color: var(--wl-navy) !important;
  font-weight: 600;
  letter-spacing: .01em;
}
body.wr-dark .panel-title i,
body.wr-dark .chart-title i,
body.wr-dark .filter-col-title i,
body.wr-dark .rff-card-head i,
body.wr-dark .pm-head i {
  color: var(--wl-blue) !important;
  filter: none !important;
}
body.wr-dark .chart-subtitle,
body.wr-dark .chart-note,
body.wr-dark .card-sub,
body.wr-dark .pm-hint { color: var(--wl-muted) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   7) การ์ดตัวเลขสรุป (KPI)
   ---------------------------------------------------------------------------
   เดิมเป็นกระจกย้อมสีเรืองแสง บนพื้นขาวเปลี่ยนเป็น "การ์ดขาวมีแถบสีบนหัว"
   สีจึงยังบอกความหมายได้เท่าเดิม แต่ตัวเลขอยู่บนพื้นขาวล้วน = อ่านชัดที่สุด
   ═══════════════════════════════════════════════════════════════════════════ */
body.wr-dark .summary-card {
  overflow: hidden;
  background: var(--wl-surface) !important;
}
/* แถบสีบนหัวการ์ด — เต็มความกว้าง หนา 3px */
body.wr-dark .summary-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--wl-blue);
  opacity: 1;
  box-shadow: none;
}
body.wr-dark .summary-card:hover { transform: translateY(-2px); }

body.wr-dark .summary-card .sc-icon,
body.wr-dark .pm-stat-head i {
  background: var(--wl-blue-a10) !important;
  color: var(--wl-blue-ink) !important;
  border: 1px solid rgba(37, 99, 235, .20);
  box-shadow: none;
}

/* ป้ายกำกับ — ส่วนใหญ่เป็นข้อความไทย จึงใช้ฟอนต์หลัก (ไม่ใช่ฟอนต์โมโน)
   และไม่ใส่ text-transform เพราะภาษาไทยไม่มีตัวพิมพ์ใหญ่-เล็ก */
body.wr-dark .summary-card .card-label,
body.wr-dark .card-label,
body.wr-dark .pm-stat .pm-hint,
body.wr-dark .st-label,
body.wr-dark .filter-group > label,
body.wr-dark .form-label {
  font-family: var(--wl-font) !important;
  font-size: .75rem !important;
  letter-spacing: .02em !important;
  color: var(--wl-muted) !important;
}

/* ตัวเลข — Kanit น้ำหนักหนา + ล็อกความกว้างตัวเลข (tabular-nums)
   ให้หลักหน่วย/สิบ/ร้อยเรียงตรงกันเป็นคอลัมน์เวลาค่าเปลี่ยน ไม่กระตุกไปมา */
body.wr-dark .summary-card .card-value,
body.wr-dark .card-value,
body.wr-dark .fv,
body.wr-dark .st-value,
body.wr-dark .layer-count,
body.wr-dark .filter-count,
body.wr-dark .pm-stat strong,
body.wr-dark .metric-value {
  font-family: var(--wl-font) !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
  color: var(--wl-navy) !important;
  text-shadow: none !important;
}
/* ค่ารวมทั้งหมด — ใช้สีทองเข้มเพื่อไล่ลำดับความสำคัญ */
body.wr-dark .summary-card--total .card-value,
body.wr-dark .st-total .st-value {
  color: var(--wl-gold-ink) !important;
  text-shadow: none !important;
}

/* ── การ์ด KPI ที่ประกาศพื้นทึบไว้เอง (.sc--blue/green/red/amber ในหน้า
      Dashboard ผู้ค้า|ผู้เสพ และ .summary-card--* ใน psych-dashboard.css) ──
   ทั้งหมดถูกดึงกลับมาเป็นการ์ดขาวเหมือนกันหมด ต่างกันแค่แถบสีบนหัว
   ไอคอน และสีของตัวเลข — แถว KPI จึงมีน้ำหนักเท่ากันทั้งแถว */
body.wr-dark .summary-card.sc--blue,
body.wr-dark .summary-card.sc--green,
body.wr-dark .summary-card.sc--red,
body.wr-dark .summary-card.sc--amber,
body.wr-dark .summary-card--total,
body.wr-dark .summary-card--drug,
body.wr-dark .summary-card--blue,
body.wr-dark .summary-card--green,
body.wr-dark .summary-card--warning {
  background: var(--wl-surface) !important;
  color: var(--wl-text) !important;
  border: 1px solid var(--wl-line) !important;
  box-shadow: var(--wl-shadow) !important;
}

/* ไอคอนและตัวเลขรับสีความหมายของการ์ดไป — สีจึงยังบอกความหมายได้เหมือนเดิม */
body.wr-dark .sc--blue  .sc-icon { background: var(--wl-blue-a10) !important;   color: var(--wl-blue-ink) !important;   border-color: rgba(37, 99, 235, .20) !important; }
body.wr-dark .sc--green .sc-icon { background: var(--wl-green-tint) !important; color: var(--wl-green-ink) !important;  border-color: var(--wl-green-line) !important; }
body.wr-dark .sc--red   .sc-icon { background: var(--wl-red-tint) !important;   color: var(--wl-red-ink) !important;    border-color: var(--wl-red-line) !important; }
body.wr-dark .sc--amber .sc-icon { background: var(--wl-amber-tint) !important; color: var(--wl-amber-ink) !important;  border-color: var(--wl-amber-line) !important; }
body.wr-dark .sc--green .card-value { color: var(--wl-green-ink) !important; text-shadow: none !important; }
body.wr-dark .sc--red   .card-value { color: var(--wl-red-ink) !important;   text-shadow: none !important; }
body.wr-dark .sc--amber .card-value { color: var(--wl-amber-ink) !important; text-shadow: none !important; }
body.wr-dark .summary-card .card-sub { color: var(--wl-muted) !important; }

/* แถบสีตามความหมายของการ์ด KPI */
body.wr-dark .sc--blue::before  { background: var(--wl-blue) !important; }
body.wr-dark .sc--green::before { background: var(--wl-green) !important; }
body.wr-dark .sc--red::before   { background: var(--wl-red) !important; }
body.wr-dark .sc--amber::before { background: var(--wl-amber) !important; }
body.wr-dark .summary-card--drug::before,
body.wr-dark .summary-card--danger::before { background: var(--wl-red) !important; }
body.wr-dark .summary-card--green::before { background: var(--wl-green) !important; }
body.wr-dark .summary-card--warning::before { background: var(--wl-orange) !important; }
body.wr-dark .summary-card--total::before { background: var(--wl-amber) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   8) ปุ่ม — ทรงตัดมุมแบบ HUD (เก็บไว้เป็นเอกลักษณ์) แต่สีเรียบขึ้น
   ═══════════════════════════════════════════════════════════════════════════ */
body.wr-dark .btn,
body.wr-dark .rf-btn,
body.wr-dark .gis-btn,
body.wr-dark .wr-btn {
  font-family: var(--wl-font) !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  border-radius: var(--wl-r-sm) !important;
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
body.wr-dark .btn:active { transform: translateY(1px); }

/* แสงกวาด — เก็บไว้เฉพาะปุ่มพื้นทึบสีน้ำเงิน
   บนปุ่มพื้นขาว แสงขาวกวาดผ่านจะมองไม่เห็นอะไรเลย ได้แค่เปลืองการวาดจอ */
body.wr-dark .btn-primary::after,
body.wr-dark .rf-btn-primary::after,
body.wr-dark .gis-btn--primary::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .30), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
  pointer-events: none;
}
body.wr-dark .btn-primary:hover::after,
body.wr-dark .rf-btn-primary:hover::after,
body.wr-dark .gis-btn--primary:hover::after { left: 120%; }

/* ปุ่มหลัก — น้ำเงินทึบ ตัวหนังสือขาว (5.2:1) */
body.wr-dark .btn-primary,
body.wr-dark .rf-btn-primary,
body.wr-dark .gis-btn--primary,
body.wr-dark .filter-toggle-btn.active {
  background: linear-gradient(135deg, var(--wl-blue) 0%, var(--wl-blue-ink) 100%) !important;
  border: 1px solid var(--wl-blue-ink) !important;
  color: var(--wl-on-blue) !important;
  box-shadow: 0 1px 2px rgba(29, 78, 216, .20), 0 4px 12px rgba(29, 78, 216, .22) !important;
  clip-path: polygon(var(--wl-notch) 0, 100% 0, 100% calc(100% - var(--wl-notch)), calc(100% - var(--wl-notch)) 100%, 0 100%, 0 var(--wl-notch));
}
body.wr-dark .btn-primary:hover,
body.wr-dark .rf-btn-primary:hover,
body.wr-dark .gis-btn--primary:hover {
  background: linear-gradient(135deg, var(--wl-blue-ink) 0%, var(--wl-blue-deep) 100%) !important;
  box-shadow: 0 2px 4px rgba(29, 78, 216, .22), 0 8px 20px rgba(29, 78, 216, .28) !important;
  color: var(--wl-on-blue) !important;
}

/* ปุ่มรอง / โครงร่าง — พื้นขาว ขอบน้ำเงินอ่อน ตัวหนังสือน้ำเงินเข้ม */
body.wr-dark .btn-secondary,
body.wr-dark .btn-outline-secondary,
body.wr-dark .btn-light,
body.wr-dark .btn-outline-primary,
body.wr-dark .rf-btn-ghost,
body.wr-dark .gis-btn--outline {
  background: var(--wl-surface) !important;
  border: 1px solid var(--wl-line-2) !important;
  color: var(--wl-blue-ink) !important;
  clip-path: polygon(var(--wl-notch) 0, 100% 0, 100% calc(100% - var(--wl-notch)), calc(100% - var(--wl-notch)) 100%, 0 100%, 0 var(--wl-notch));
}
body.wr-dark .btn-secondary:hover,
body.wr-dark .btn-outline-secondary:hover,
body.wr-dark .btn-light:hover,
body.wr-dark .btn-outline-primary:hover,
body.wr-dark .rf-btn-ghost:hover,
body.wr-dark .gis-btn--outline:hover {
  background: var(--wl-blue-a06) !important;
  border-color: var(--wl-line-hot) !important;
  color: var(--wl-blue-deep) !important;
  box-shadow: var(--wl-ring) !important;
}

/* ปุ่มความหมาย — พื้นอ่อน ขอบสี ตัวอักษรสีเข้ม ผ่านเกณฑ์คอนทราสต์ทุกตัว */
body.wr-dark .btn-success {
  background: var(--wl-green-tint) !important;
  border: 1px solid var(--wl-green-line) !important;
  color: var(--wl-green-ink) !important;
  box-shadow: none !important;
}
body.wr-dark .btn-success:hover { background: var(--wl-green) !important; border-color: var(--wl-green) !important; color: #fff !important; }

body.wr-dark .btn-danger {
  background: var(--wl-red-tint) !important;
  border: 1px solid var(--wl-red-line) !important;
  color: var(--wl-red-ink) !important;
  box-shadow: none !important;
}
body.wr-dark .btn-danger:hover { background: var(--wl-red) !important; border-color: var(--wl-red) !important; color: #fff !important; }

body.wr-dark .btn-warning {
  background: var(--wl-amber-tint) !important;
  border: 1px solid var(--wl-amber-line) !important;
  color: var(--wl-amber-ink) !important;
  box-shadow: none !important;
}
body.wr-dark .btn-warning:hover { background: var(--wl-amber) !important; border-color: var(--wl-amber) !important; color: #fff !important; }

body.wr-dark .btn-info {
  background: var(--wl-blue-a10) !important;
  border: 1px solid rgba(37, 99, 235, .30) !important;
  color: var(--wl-blue-ink) !important;
}
body.wr-dark .btn-info:hover { background: var(--wl-blue) !important; border-color: var(--wl-blue) !important; color: #fff !important; }

body.wr-dark .btn-link { color: var(--wl-blue-ink) !important; text-decoration-color: rgba(29, 78, 216, .4); }
body.wr-dark .btn-link:hover { color: var(--wl-blue-deep) !important; }

/* ปุ่มเล็กไม่ควรตัดมุมแรง — ลดระยะลง */
body.wr-dark .btn-sm { --wl-notch: 7px; }

/* วงแหวนโฟกัสของปุ่ม — ต้องเป็นเส้น "ด้านใน" เท่านั้น
   ปุ่มหลัก/ปุ่มรองใช้ clip-path ตัดมุมแบบ HUD ซึ่งตัดทุกอย่างที่ล้นออกนอกรูปทรง
   ทั้ง outline และ box-shadow ด้านนอก ถ้าใช้วงแหวนแบบปกติ ผู้ใช้ที่กด Tab
   จะมองไม่เห็นว่าโฟกัสอยู่ที่ปุ่มไหนเลย */
body.wr-dark .btn:focus-visible,
body.wr-dark .rf-btn:focus-visible,
body.wr-dark .gis-btn:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 2px #ffffff, inset 0 0 0 4px var(--wl-blue-deep) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9) ช่องกรอกข้อมูล — พื้นขาวนวล ขอบชัด โฟกัสเป็นวงแหวนน้ำเงิน
   ═══════════════════════════════════════════════════════════════════════════ */
body.wr-dark .form-control,
body.wr-dark .form-select,
body.wr-dark input[type="text"],
body.wr-dark input[type="search"],
body.wr-dark input[type="email"],
body.wr-dark input[type="password"],
body.wr-dark input[type="number"],
body.wr-dark input[type="date"],
body.wr-dark input[type="tel"],
body.wr-dark select,
body.wr-dark textarea,
body.wr-dark .case-input,
body.wr-dark .rff-fld input,
body.wr-dark .rff-fld select,
body.wr-dark .rff-fld textarea,
body.wr-dark .gis-date-input,
body.wr-dark .gis-search-input,
body.wr-dark .gps-input,
body.wr-dark .filter-select {
  background: var(--wl-well) !important;
  border: 1px solid #d5dfec !important;
  border-radius: var(--wl-r-sm) !important;
  color: var(--wl-text) !important;
  box-shadow: none !important;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
body.wr-dark .form-control::placeholder,
body.wr-dark input::placeholder,
body.wr-dark textarea::placeholder { color: #8fa0b8 !important; }

body.wr-dark .form-control:focus,
body.wr-dark .form-select:focus,
body.wr-dark input:focus,
body.wr-dark select:focus,
body.wr-dark textarea:focus,
body.wr-dark .case-input:focus,
body.wr-dark .gis-date-input:focus,
body.wr-dark .gis-search-input:focus,
body.wr-dark .gps-input:focus {
  background: var(--wl-surface) !important;
  border-color: var(--wl-blue) !important;
  box-shadow: var(--wl-ring) !important;
  outline: none !important;
}

/* รายการใน <select> — คืนค่าเป็นพื้นขาวหมึกเข้มตามระบบปฏิบัติการ */
body.wr-dark select option,
body.wr-dark .form-select option { background: #ffffff !important; color: var(--wl-text) !important; }

/* ปุ่ม "Choose File" ของช่องอัปโหลด — เบราว์เซอร์วาดเป็นปุ่มเทาเรียบ
   ตกแต่งให้เข้าชุดกับปุ่มรองของระบบ */
body.wr-dark input[type="file"]::file-selector-button,
body.wr-dark input[type="file"]::-webkit-file-upload-button {
  background: var(--wl-blue-a10) !important;
  border: 1px solid rgba(37, 99, 235, .28) !important;
  border-radius: 6px !important;
  color: var(--wl-blue-ink) !important;
  font-family: var(--wl-font) !important;
  font-weight: 600;
  padding: .35rem .8rem !important;
  margin-right: .7rem;
  cursor: pointer;
  transition: background .18s, box-shadow .18s;
}
body.wr-dark input[type="file"]::file-selector-button:hover,
body.wr-dark input[type="file"]::-webkit-file-upload-button:hover {
  background: var(--wl-blue-a16) !important;
  box-shadow: var(--wl-ring) !important;
}

/* ไอคอนปฏิทินของ input[type=date] —
   ธีมมืดเดิมต้อง invert ให้สว่าง บนพื้นขาวต้องคืนค่าเป็นสีเดิมของเบราว์เซอร์
   ไม่งั้นจะได้ไอคอนสีฟ้าสว่างมองไม่เห็นบนช่องกรอกสีขาว */
body.wr-dark input[type="date"]::-webkit-calendar-picker-indicator,
body.wr-dark input[type="time"]::-webkit-calendar-picker-indicator,
body.wr-dark input[type="month"]::-webkit-calendar-picker-indicator {
  filter: none !important;
  opacity: .65;
  cursor: pointer;
}
body.wr-dark input[type="date"]::-webkit-calendar-picker-indicator:hover,
body.wr-dark input[type="time"]::-webkit-calendar-picker-indicator:hover,
body.wr-dark input[type="month"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* ช่องติ๊ก / วงกลมเลือก */
body.wr-dark .form-check-input {
  background-color: #ffffff !important;
  border: 1px solid #b9c8dd !important;
}
body.wr-dark .form-check-input:checked {
  background-color: var(--wl-blue) !important;
  border-color: var(--wl-blue) !important;
  box-shadow: none;
}
body.wr-dark .form-check-input:focus { box-shadow: var(--wl-ring) !important; border-color: var(--wl-blue) !important; }
body.wr-dark .form-check-label { color: var(--wl-dim) !important; }

/* สวิตช์เปิด/ปิด (ชั้นข้อมูลบนแผนที่ ฯลฯ) */
body.wr-dark .form-switch .form-check-input:checked { background-color: var(--wl-blue) !important; }

/* แถบตัวกรอง */
body.wr-dark .filter-panel,
body.wr-dark .filter-body,
body.wr-dark .filter-grid,
body.wr-dark .filter-row { color: var(--wl-text); }
body.wr-dark .filter-panel-header {
  background: linear-gradient(90deg, var(--wl-blue-a06), transparent 72%) !important;
  border-bottom: 1px solid var(--wl-line) !important;
}
body.wr-dark .filter-count {
  background: var(--wl-blue-a10) !important;
  color: var(--wl-blue-ink) !important;
  border: 1px solid rgba(37, 99, 235, .26) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10) ตาราง — กระดาษขาว เส้นบาง หัวตารางฟ้าอ่อน
   ═══════════════════════════════════════════════════════════════════════════ */
body.wr-dark .table,
body.wr-dark table.wrt,
body.wr-dark .wrt {
  color: var(--wl-text) !important;
  border-color: var(--wl-line) !important;
  --bs-table-bg: transparent;
  --bs-table-color: var(--wl-text);
  --bs-table-border-color: #e6ecf5;
  --bs-table-striped-bg: #f8fafd;
  --bs-table-striped-color: var(--wl-text);
  --bs-table-hover-bg: rgba(37, 99, 235, .06);
  --bs-table-hover-color: var(--wl-text);
}

/* หัวตาราง — ต้องทึบแสง 100%
   หัวตารางรายงานเป็น position:sticky ตรึงไว้ใต้ topbar เวลาเลื่อนหน้า
   แถวข้อมูลจึงวิ่งลอดอยู่ข้างหลัง ถ้าพื้นหัวตารางโปร่งแม้แต่นิดเดียว
   ตัวเลขของแถวที่ลอดผ่านจะทะลุขึ้นมาซ้อนกับชื่อคอลัมน์จนอ่านผิด

   ตัวเลือกต้องมี specificity อย่างน้อยเท่ากับ body.tactical .wrt thead th
   (0,2,3) ใน warroom-tactical.css ไม่งั้นกฎนี้จะไม่มีผล */
body.wr-dark .table thead th,
body.wr-dark .table > thead > tr > th,
body.wr-dark .wrt thead th,
body.wr-dark table.wrt thead th,
body.wr-dark table th {
  background: linear-gradient(180deg, #eef4fc 0%, #e5edf8 100%) !important;
  color: var(--wl-navy) !important;
  border-bottom: 1px solid var(--wl-line-2) !important;
  border-color: #dde6f2 !important;
  font-family: var(--wl-font) !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  text-transform: none;
  /* *** ห้ามใส่ position ให้ th เด็ดขาด ***
     ตารางรายงาน (table.wrt.wrt-sticky-page) ใช้ position:sticky ตรึงหัวตาราง
     ไว้ใต้ topbar โดย js/warroom-table.js คำนวณค่า top ให้แต่ละแถวเอง
     ถ้าทับเป็น relative หัวตารางจะหลุดไปซ้อนทับแถวข้อมูลตอนเลื่อนหน้า */
}
/* ขีดน้ำเงินใต้หัวตาราง */
body.wr-dark .table thead tr:last-child th,
body.wr-dark .wrt thead tr:last-child th {
  box-shadow: inset 0 -2px 0 -1px var(--wl-blue);
}

body.wr-dark .table td,
body.wr-dark .wrt td,
body.wr-dark table td {
  border-color: #e9eef6 !important;
  background: transparent !important;
  color: var(--wl-text) !important;
}
body.wr-dark .table tbody tr,
body.wr-dark .wrt tbody tr { transition: background .15s ease, box-shadow .15s ease; }
body.wr-dark .table tbody tr:hover,
body.wr-dark .wrt tbody tr:hover {
  background: rgba(37, 99, 235, .06) !important;
  box-shadow: inset 3px 0 0 var(--wl-blue);
}
body.wr-dark .table-striped > tbody > tr:nth-of-type(odd) > * { background: #f8fafd !important; color: var(--wl-text) !important; }

/* ตัวเลขในตารางให้เรียงตรงกันเป็นคอลัมน์ */
body.wr-dark .table td,
body.wr-dark .wrt td { font-variant-numeric: tabular-nums; }

/* หัวตารางที่เรียงลำดับได้ */
body.wr-dark th.sortable { cursor: pointer; }
body.wr-dark th.sortable:hover { color: var(--wl-blue-deep) !important; background: #e3ecfa !important; }
body.wr-dark .sort-arrow { color: var(--wl-blue) !important; }

/* แบ่งหน้า */
body.wr-dark .page-link {
  background: var(--wl-surface) !important;
  border: 1px solid var(--wl-line-2) !important;
  color: var(--wl-dim) !important;
}
body.wr-dark .page-link:hover { background: var(--wl-blue-a06) !important; color: var(--wl-blue-deep) !important; border-color: var(--wl-line-hot) !important; }
body.wr-dark .page-item.active .page-link {
  background: var(--wl-blue) !important;
  border-color: var(--wl-blue-ink) !important;
  color: #fff !important;
  box-shadow: none;
}
body.wr-dark .page-item.disabled .page-link { background: var(--wl-raise) !important; color: #9aa9bf !important; opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   11) ป้าย / ชิป / สถานะ
   ═══════════════════════════════════════════════════════════════════════════ */
body.wr-dark .badge,
body.wr-dark .wr-pill,
body.wr-dark .tag,
body.wr-dark .pm-tab {
  font-family: var(--wl-font) !important;
  letter-spacing: .02em;
  border-radius: 999px !important;
}
body.wr-dark .wr-pill {
  background: var(--wl-blue-a06) !important;
  border: 1px solid var(--wl-line-2) !important;
  color: var(--wl-dim) !important;
  transition: background .18s, color .18s, box-shadow .18s, border-color .18s;
}
body.wr-dark .wr-pill:hover,
body.wr-dark .wr-pill.active {
  background: var(--wl-blue) !important;
  border-color: var(--wl-blue-ink) !important;
  color: #fff !important;
  box-shadow: none;
}
body.wr-dark .badge.bg-primary,
body.wr-dark .badge.text-bg-primary { background: var(--wl-blue-a10) !important; color: var(--wl-blue-ink) !important; border: 1px solid rgba(37, 99, 235, .28); }
body.wr-dark .badge.bg-success,
body.wr-dark .badge.text-bg-success { background: var(--wl-green-tint) !important; color: var(--wl-green-ink) !important; border: 1px solid var(--wl-green-line); }
body.wr-dark .badge.bg-danger,
body.wr-dark .badge.text-bg-danger { background: var(--wl-red-tint) !important; color: var(--wl-red-ink) !important; border: 1px solid var(--wl-red-line); }
body.wr-dark .badge.bg-warning,
body.wr-dark .badge.text-bg-warning { background: var(--wl-amber-tint) !important; color: var(--wl-amber-ink) !important; border: 1px solid var(--wl-amber-line); }
body.wr-dark .badge.bg-secondary,
body.wr-dark .badge.text-bg-secondary { background: #eef2f8 !important; color: var(--wl-dim) !important; border: 1px solid var(--wl-line); }
body.wr-dark .badge.bg-info,
body.wr-dark .badge.text-bg-info { background: var(--wl-blue-a10) !important; color: var(--wl-blue-ink) !important; border: 1px solid rgba(37, 99, 235, .28); }
body.wr-dark .badge.bg-light,
body.wr-dark .badge.text-bg-light { background: #eef2f8 !important; color: var(--wl-dim) !important; border: 1px solid var(--wl-line); }
body.wr-dark .badge.bg-dark,
body.wr-dark .badge.text-bg-dark { background: var(--wl-navy) !important; color: #fff !important; }

/* ป้ายสถานะ HUD ที่ js ใส่ให้ (SYSTEM ONLINE + นาฬิกา) */
body.wr-dark .tc-status,
body.wr-dark .cy-status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--wl-mono) !important;
  font-size: .7rem !important;
  letter-spacing: .16em !important;
  color: var(--wl-blue-ink) !important;
  padding: .32rem .7rem !important;
  border-radius: var(--wl-r-sm) !important;
  background: var(--wl-blue-a06) !important;
  border: 1px solid rgba(37, 99, 235, .24) !important;
  box-shadow: none;
}
body.wr-dark .tc-status .tc-dot,
body.wr-dark .cy-status .cy-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--wl-green);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, .16);
  animation: wl-blink 1.8s ease-in-out infinite;
}
body.wr-dark .tc-status .tc-clock,
body.wr-dark .cy-status .cy-clock { color: var(--wl-navy) !important; font-variant-numeric: tabular-nums; }

/* ข้อความในป้ายสถานะเป็น <span> ทั้งหมด จึงโดนกฎบังคับฟอนต์ Kanit ด้านบนดักไว้
   ต้องคืนฟอนต์โมโนให้ลูกทุกตัว ไม่งั้นในป้ายเดียวจะมีสองฟอนต์ปนกัน */
body.wr-dark .tc-status *,
body.wr-dark .cy-status * { font-family: var(--wl-mono) !important; }

/* ป้ายสถานะบน topbar — js/cyber-ui.js เป็นคนใส่ */
/* ชิปสถานะบน topbar — พื้นเป็นกรมท่าแล้ว ต้องพลิกเป็นฟิล์มขาวโปร่ง
   *** ทับเฉพาะตัวที่อยู่บน topbar เท่านั้น *** กฎ .cy-status ด้านบนยังต้องเป็น
   ชุดสีพื้นสว่างไว้ใช้กับ .tc-status--float ที่ลอยอยู่บนแผนที่ GIS (พื้นขาว) */
body.wr-dark .cy-status--topbar {
  flex-shrink: 0;
  white-space: nowrap;
  background: rgba(255, 255, 255, .09) !important;
  border-color: rgba(255, 255, 255, .20) !important;
  color: #cbd5e1 !important;                                  /* 8.0:1 */
}
body.wr-dark .cy-status--topbar .cy-clock { color: #ffffff !important; }        /* 11.8:1 */
body.wr-dark .cy-status--topbar .cy-sep { color: rgba(255, 255, 255, .45) !important; }
body.wr-dark .cy-status--topbar .cy-dot {
  background: #22d984 !important;                             /* 6.4:1 บนกรมท่า */
  box-shadow: 0 0 0 3px rgba(34, 217, 132, .18) !important;
}
body.wr-dark .cy-status .cy-sep { color: #a8b7cc; }
/* จอแคบ: เหลือแค่ไฟสถานะกับนาฬิกา ไม่ให้ดันชื่อระบบตกบรรทัด */
@media (max-width: 860px) {
  body.wr-dark .cy-status--topbar .cy-status-label,
  body.wr-dark .cy-status--topbar .cy-sep { display: none; }
}
@media (max-width: 560px) {
  body.wr-dark .cy-status--topbar { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   12) โมดัล / เมนูลอย / กล่องแจ้งเตือน
   ═══════════════════════════════════════════════════════════════════════════ */
body.wr-dark .modal-content,
body.wr-dark .dropdown-menu,
body.wr-dark .swal2-popup,
body.wr-dark .gis-search-results,
body.wr-dark .pm-panel {
  background: var(--wl-lift) !important;
  border: 1px solid var(--wl-line) !important;
  border-radius: var(--wl-r) !important;
  color: var(--wl-text) !important;
  box-shadow: var(--wl-shadow-lg) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.wr-dark .modal-header,
body.wr-dark .swal2-title {
  border-bottom: 1px solid var(--wl-line) !important;
  background: linear-gradient(90deg, var(--wl-blue-a06), transparent 72%) !important;
  color: var(--wl-navy) !important;
  font-family: var(--wl-font) !important;
  letter-spacing: .01em;
}
body.wr-dark .modal-body { color: var(--wl-text) !important; }
body.wr-dark .modal-footer { border-top: 1px solid var(--wl-line) !important; background: var(--wl-canvas-2); }
body.wr-dark .modal-backdrop.show { background: rgba(15, 31, 61, .42) !important; opacity: 1 !important; backdrop-filter: blur(2px); }
/* ปุ่มกากบาทของ Bootstrap เป็น svg สีดำอยู่แล้ว — ธีมมืดเดิม invert ไว้ ต้องคืนค่า */
body.wr-dark .btn-close { filter: none !important; opacity: .55; }
body.wr-dark .btn-close:hover { opacity: 1; }

body.wr-dark .dropdown-item { color: var(--wl-dim) !important; border-radius: 6px; transition: background .15s, color .15s; }
body.wr-dark .dropdown-item:hover,
body.wr-dark .dropdown-item:focus {
  background: var(--wl-blue-a06) !important;
  color: var(--wl-blue-deep) !important;
}
body.wr-dark .dropdown-divider { border-color: var(--wl-line) !important; }

body.wr-dark .swal2-html-container,
body.wr-dark .swal2-content { color: var(--wl-dim) !important; }

/* กล่องข้อความแจ้งเตือน */
body.wr-dark .alert { border-radius: var(--wl-r-sm) !important; border-width: 1px !important; backdrop-filter: none; }
body.wr-dark .alert-info,
body.wr-dark .alert-primary { background: var(--wl-blue-a06) !important; border-color: rgba(37, 99, 235, .26) !important; color: var(--wl-blue-ink) !important; }
body.wr-dark .alert-success { background: var(--wl-green-tint) !important; border-color: var(--wl-green-line) !important; color: var(--wl-green-ink) !important; }
body.wr-dark .alert-warning { background: var(--wl-amber-tint) !important; border-color: var(--wl-amber-line) !important; color: var(--wl-amber-ink) !important; }
body.wr-dark .alert-danger { background: var(--wl-red-tint) !important; border-color: var(--wl-red-line) !important; color: var(--wl-red-ink) !important; }
body.wr-dark .alert-secondary,
body.wr-dark .alert-light { background: var(--wl-canvas-2) !important; border-color: var(--wl-line) !important; color: var(--wl-dim) !important; }

/* คำใบ้ (tooltip) ของ Bootstrap — พื้นกรมท่า ตัวหนังสือขาว */
body.wr-dark .tooltip-inner { background: var(--wl-navy) !important; color: #fff !important; }
body.wr-dark .tooltip .tooltip-arrow::before { border-top-color: var(--wl-navy) !important; border-bottom-color: var(--wl-navy) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   13) แท็บ / ปุ่มสลับโหมด
   ═══════════════════════════════════════════════════════════════════════════ */
body.wr-dark .nav-tabs { border-bottom: 1px solid var(--wl-line) !important; }
body.wr-dark .nav-tabs .nav-link {
  color: var(--wl-muted) !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  font-family: var(--wl-font);
  letter-spacing: .02em;
  background: transparent !important;
  transition: color .18s, border-color .18s;
}
body.wr-dark .nav-tabs .nav-link:hover { color: var(--wl-blue-ink) !important; border-bottom-color: var(--wl-line-2) !important; }
body.wr-dark .nav-tabs .nav-link.active {
  color: var(--wl-blue-deep) !important;
  border-bottom-color: var(--wl-blue) !important;
  background: transparent !important;
  text-shadow: none !important;
  font-weight: 600;
}

body.wr-dark .mode-toggle {
  background: var(--wl-canvas) !important;
  border: 1px solid var(--wl-line) !important;
  border-radius: var(--wl-r-sm) !important;
}
body.wr-dark .mode-toggle button {
  color: var(--wl-muted) !important;
  background: transparent !important;
  font-family: var(--wl-font) !important;
  letter-spacing: .03em;
  transition: all .18s;
}
body.wr-dark .mode-toggle button:hover { color: var(--wl-blue-ink) !important; }
body.wr-dark .mode-toggle button.active {
  color: #fff !important;
  background: var(--wl-blue) !important;
  box-shadow: 0 1px 3px rgba(29, 78, 216, .28);
}

/* ═══════════════════════════════════════════════════════════════════════════
   14) ตัวโหลด / สถานะรอ
   ═══════════════════════════════════════════════════════════════════════════ */
body.wr-dark .spinner-border { color: var(--wl-blue) !important; filter: none !important; }
body.wr-dark .full-page-loader,
body.wr-dark .loading-overlay {
  background: rgba(238, 242, 249, .78) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  color: var(--wl-text) !important;
}
body.wr-dark .loader-bar-fill {
  background: linear-gradient(90deg, var(--wl-blue), var(--wl-blue-deep), var(--wl-blue)) !important;
  box-shadow: none;
}

/* แถบแสงบอกสถานะกำลังโหลด — js/cyber-ui.js เป็นคนเปิด/ปิด */
body.wr-dark .cy-beam {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 2000;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--wl-blue), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  box-shadow: none;
  animation: wl-sweep 1.1s linear infinite;
  opacity: 0;
  transition: opacity .3s ease;
}
body.wr-dark .cy-beam.cy-on { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   15) หน้าเข้าสู่ระบบ (auth.html / reset-password.html)
   ---------------------------------------------------------------------------
   สองหน้านี้ไม่ได้ประกาศ data-luxury จึงได้แค่โทนพื้นฐาน ไม่ได้ชั้นตกแต่ง
   และ css/auth.css มีจานสีของตัวเอง (พื้นกรมท่าเข้ม + การ์ดขาว + ทอง)
   เป็นหน้าแรกที่ผู้ใช้เห็นทุกวัน จึงต้องเป็นหน้าตาเดียวกับระบบตั้งแต่วินาทีแรก

   auth.css ทาพื้น <body> เป็นกรมท่าไล่สีไว้ตรง ๆ ที่ตัวเลือก body (0,0,1)
   กฎ body.wr-dark ด้านบนจึงทับได้อยู่แล้ว — ที่เหลือคือปรับ "การ์ด" ให้เข้าชุด
   ═══════════════════════════════════════════════════════════════════════════ */
body.wr-dark .auth-container,
body.wr-dark .auth-card,
body.wr-dark .login-card,
body.wr-dark .reset-card {
  background: var(--wl-surface) !important;
  border: 1px solid var(--wl-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--wl-shadow-lg) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--wl-text) !important;
}

/* แถบบนสุดของการ์ด — เดิมเป็นทอง เปลี่ยนเป็นแถบน้ำเงินนิ่ง */
body.wr-dark .auth-container::before {
  background: linear-gradient(90deg, var(--wl-blue) 0%, var(--wl-navy-3) 100%) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none;
  animation: none !important;
}
body.wr-dark .auth-container::after {
  background: linear-gradient(160deg, var(--wl-blue-a06) 0%, transparent 60%) !important;
}

body.wr-dark .auth-container h1 {
  color: var(--wl-navy) !important;
  font-family: var(--wl-font) !important;
  letter-spacing: .04em;
  text-shadow: none !important;
}
body.wr-dark .auth-container .subtitle { color: var(--wl-muted) !important; }
body.wr-dark .auth-container label { color: var(--wl-dim) !important; }

/* แท็บ เข้าสู่ระบบ / สมัครใช้งาน */
body.wr-dark .auth-container .tabs {
  background: var(--wl-canvas) !important;
  border: 1px solid var(--wl-line) !important;
}
body.wr-dark .auth-container .tab { color: var(--wl-muted) !important; font-family: var(--wl-font) !important; }
body.wr-dark .auth-container .tab:hover { color: var(--wl-blue-ink) !important; }
body.wr-dark .auth-container .tab.active {
  background: var(--wl-blue) !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(29, 78, 216, .28) !important;
}

/* ปุ่มยืนยัน — ทรงเดียวกับปุ่มหลักทั้งระบบ */
body.wr-dark .auth-container button[type="submit"],
body.wr-dark .auth-container .btn-primary {
  background: linear-gradient(135deg, var(--wl-blue) 0%, var(--wl-blue-ink) 100%) !important;
  color: #fff !important;
  border: 1px solid var(--wl-blue-ink) !important;
  font-family: var(--wl-font) !important;
  letter-spacing: .04em;
  box-shadow: 0 2px 10px rgba(29, 78, 216, .25) !important;
  clip-path: polygon(var(--wl-notch) 0, 100% 0, 100% calc(100% - var(--wl-notch)), calc(100% - var(--wl-notch)) 100%, 0 100%, 0 var(--wl-notch));
}
body.wr-dark .auth-container button[type="submit"]:hover {
  background: linear-gradient(135deg, var(--wl-blue-ink) 0%, var(--wl-blue-deep) 100%) !important;
  box-shadow: 0 4px 16px rgba(29, 78, 216, .32) !important;
}
body.wr-dark .auth-container button[type="submit"]::after { background: none !important; }
/* ปุ่มนี้ใช้ clip-path เช่นกัน วงแหวนโฟกัสจึงต้องเป็นเส้นด้านใน */
body.wr-dark .auth-container button[type="submit"]:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--wl-blue-deep) !important;
}

body.wr-dark .auth-container input {
  background: var(--wl-well) !important;
  border: 1px solid #d5dfec !important;
  color: var(--wl-text) !important;
}
body.wr-dark .auth-container input:focus {
  background: #fff !important;
  border-color: var(--wl-blue) !important;
  box-shadow: var(--wl-ring) !important;
}

body.wr-dark .auth-container a,
body.wr-dark .auth-container .link-row a,
body.wr-dark .auth-container .forgot-link-row a { color: var(--wl-blue-ink) !important; }
body.wr-dark .auth-container a:hover { color: var(--wl-blue-deep) !important; }

/* ปุ่มลิงก์เต็มความกว้าง (reset-password.html) — เป็น <a> ไม่ใช่ <button>
   จึงไม่โดนกฎปุ่มด้านบน ต้องเขียนแยก */
body.wr-dark .auth-container .link-button {
  background: linear-gradient(135deg, var(--wl-blue) 0%, var(--wl-blue-ink) 100%) !important;
  color: #fff !important;
  border: 1px solid var(--wl-blue-ink) !important;
  font-family: var(--wl-font) !important;
  box-shadow: 0 2px 10px rgba(29, 78, 216, .25) !important;
}
body.wr-dark .auth-container .link-button:hover {
  background: linear-gradient(135deg, var(--wl-blue-ink) 0%, var(--wl-blue-deep) 100%) !important;
  color: #fff !important;
}
body.wr-dark .auth-container .modal-card { border-top-color: var(--wl-blue) !important; }

/* บรรทัด "POLICE 4" ใต้ชื่อระบบ — เดิมตั้งสีแดงไว้ที่ style ตรง ๆ ใน auth.html
   บนธีมนี้สีแดงคือ "สถานะผิดพลาด/เตือนภัย" ป้ายหน่วยงานจึงไม่ควรใช้สีเดียวกัน
   ย้ายไปใช้ทองตำรวจซึ่งเป็นสีของตราสัญลักษณ์/ยศตามระบบสีของธีม */
body.wr-dark .auth-container p[style*="#dc3545"] {
  color: var(--wl-gold-ink) !important;
  font-family: var(--wl-font) !important;
  letter-spacing: .22em;
  text-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   16) แผนที่ GIS — โทนเดียวกับส่วนอื่นของระบบ
   ═══════════════════════════════════════════════════════════════════════════ */
body.wr-dark .leaflet-container { background: #e6ecf4 !important; }
/* ธีมมืดบางหน้าใส่ filter ให้ tile เพื่อกลับสีแผนที่เป็นโทนมืด — ต้องคืนค่า */
body.wr-dark .leaflet-tile-pane { filter: none !important; }
body.wr-dark .leaflet-control-zoom a {
  background: #fff !important;
  color: var(--wl-blue-ink) !important;
  border-color: var(--wl-line) !important;
}
body.wr-dark .leaflet-control-zoom a:hover { background: var(--wl-blue-a06) !important; color: var(--wl-blue-deep) !important; }
body.wr-dark .leaflet-popup-content-wrapper,
body.wr-dark .leaflet-popup-tip {
  background: #fff !important;
  color: var(--wl-text) !important;
  border: 1px solid var(--wl-line);
  box-shadow: var(--wl-shadow-lg);
}
body.wr-dark .leaflet-bar a { color: var(--wl-blue-ink) !important; background: #fff !important; }
body.wr-dark .basemap-btn.active,
body.wr-dark .basemap-btn:hover { background: var(--wl-blue-a10) !important; color: var(--wl-blue-deep) !important; }
body.wr-dark .gis-panel-toggle {
  background: #fff !important;
  color: var(--wl-blue-ink) !important;
  border-color: var(--wl-line-2) !important;
  box-shadow: var(--wl-shadow) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   17) เบ็ดเตล็ด — ข้อความ เส้นคั่น ลิงก์
   ═══════════════════════════════════════════════════════════════════════════ */
body.wr-dark a { color: var(--wl-blue-ink); }
body.wr-dark a:hover { color: var(--wl-blue-deep); }
body.wr-dark hr { border-color: var(--wl-line) !important; opacity: 1; }
body.wr-dark code,
body.wr-dark kbd,
body.wr-dark samp,
body.wr-dark pre { font-family: var(--wl-mono) !important; color: var(--wl-blue-deep); }
body.wr-dark pre,
body.wr-dark code { background: var(--wl-canvas) !important; }

body.wr-dark .text-muted,
body.wr-dark .text-secondary { color: var(--wl-muted) !important; }
body.wr-dark .text-primary { color: var(--wl-blue-ink) !important; }
body.wr-dark .text-success { color: var(--wl-green-ink) !important; }
body.wr-dark .text-danger { color: var(--wl-red-ink) !important; }
body.wr-dark .text-warning { color: var(--wl-amber-ink) !important; }
body.wr-dark .text-info { color: var(--wl-blue-ink) !important; }
body.wr-dark .text-dark,
body.wr-dark .text-black { color: var(--wl-text) !important; }
/* .text-white / .text-light บนพื้นขาว = หายไปทั้งบรรทัด
   ยกเว้นที่อยู่บน sidebar หรือบนพื้นทึบสีเข้ม จึงยกเว้นให้สองบริบทนั้น */
body.wr-dark .text-white:not(.wr-sidebar *):not(.badge):not(.btn):not(.wr-sidebar-item),
body.wr-dark .text-light:not(.wr-sidebar *):not(.badge):not(.btn):not(.wr-sidebar-item) { color: var(--wl-text) !important; }

body.wr-dark .bg-white,
body.wr-dark .bg-light { background: var(--wl-surface) !important; color: var(--wl-text) !important; }
body.wr-dark .bg-dark { background: var(--wl-navy) !important; color: #fff !important; }
body.wr-dark .border,
body.wr-dark .border-top,
body.wr-dark .border-bottom,
body.wr-dark .border-start,
body.wr-dark .border-end { border-color: var(--wl-line) !important; }
body.wr-dark .shadow-sm { box-shadow: var(--wl-shadow) !important; }

body.wr-dark .pm-sel,
body.wr-dark .layer-label,
body.wr-dark .tool-label { color: var(--wl-text) !important; }

/* ── "กระดาษ" ของเอกสารที่ต้องพิมพ์ (report-print.html → .pf-doc) ──
   ธีมนี้สว่างอยู่แล้ว แต่ยังต้องล้างเงา/เอฟเฟกต์ออกให้เอกสารเป็นกระดาษล้วน
   (ทำงานคู่กับกฎเดิมใน report-print.html) */
body.wr-dark .pf-doc,
body.wr-dark .pf-doc * { text-shadow: none !important; }
body.wr-dark .pf-doc { background: #fff !important; color: #0f172a !important; box-shadow: var(--wl-shadow-lg) !important; }
body.wr-dark .pf-doc table th {
  background: #eef2f7 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
  box-shadow: none !important;
}
body.wr-dark .pf-doc table td,
body.wr-dark .pf-doc table {
  background: transparent !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
body.wr-dark .pf-doc table tbody tr:hover { background: transparent !important; box-shadow: none !important; }
body.wr-dark .pf-doc .card,
body.wr-dark .pf-doc .badge {
  background: transparent !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   18) ปรับโมดูลรายหน้าให้เข้าโทนเดียวกัน
   ---------------------------------------------------------------------------
   หลายหน้ามีตระกูลปุ่ม/ชิปของตัวเองที่ประกาศสีไว้ตายตัว (ฟ้า #2563eb, เขียว
   #10B981 ฯลฯ) ทำให้หน้าเดียวกันมีสีเน้นได้ 3-4 สี ส่วนนี้ดึงทุกตระกูลกลับมา
   ที่จานสีเดียว โดย "แตะเฉพาะสี" ไม่แตะขนาด/ระยะห่าง/การจัดวาง
   เพื่อไม่ให้เลย์เอาต์ของหน้าที่มีอยู่เดิมเคลื่อน

   *** ลำดับสำคัญ: ต้องเขียนคลาสฐาน (.rf-btn) ก่อนคลาสขยาย (.rf-btn-primary)
   เสมอ เพราะปุ่มจริงใส่ทั้งสองคลาสพร้อมกัน เช่น class="rf-btn rf-btn-primary"
   ทั้งคู่ specificity เท่ากัน ตัวที่เขียนทีหลังจึงเป็นตัวที่ชนะ ***
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ชั้นที่ 1: คลาสฐาน — ปุ่มรอง/ปุ่มโปร่ง/ชิป ── */
body.wr-dark .btn-back,
body.wr-dark .rf-btn,
body.wr-dark .rf-mini-btn,
body.wr-dark .rf-chip,
body.wr-dark .pv-btn,
body.wr-dark .nw-btn,
body.wr-dark .rp-btn,
body.wr-dark .log-filter-btn,
body.wr-dark .buffer-radius-btn,
body.wr-dark .refresh-btn,
body.wr-dark .status-pill,
body.wr-dark .pm-tab {
  background: var(--wl-surface) !important;
  border: 1px solid var(--wl-line-2) !important;
  color: var(--wl-dim) !important;
  transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
}
body.wr-dark .btn-back:hover,
body.wr-dark .rf-btn:hover,
body.wr-dark .rf-mini-btn:hover,
body.wr-dark .rf-chip:hover,
body.wr-dark .pv-btn:hover,
body.wr-dark .nw-btn:hover,
body.wr-dark .rp-btn:hover,
body.wr-dark .log-filter-btn:hover,
body.wr-dark .buffer-radius-btn:hover,
body.wr-dark .refresh-btn:hover,
body.wr-dark .pm-tab:hover {
  background: var(--wl-blue-a06) !important;
  border-color: var(--wl-line-hot) !important;
  color: var(--wl-blue-deep) !important;
  box-shadow: var(--wl-ring) !important;
}
/* ไอคอนในปุ่มรอง — ให้เป็นสีนำ จะได้อ่านลำดับความสำคัญได้ทันที */
body.wr-dark .btn-back i,
body.wr-dark .status-pill i,
body.wr-dark .refresh-btn i,
body.wr-dark .rf-btn i,
body.wr-dark .nw-btn i,
body.wr-dark .pm-tab i { color: var(--wl-blue) !important; }

/* ── ชั้นที่ 2: ปุ่มหลัก ── */
body.wr-dark .rf-btn-primary,
body.wr-dark .pv-btn--primary,
body.wr-dark .nw-btn--primary,
body.wr-dark .rp-btn--primary,
body.wr-dark .log-filter-btn.active,
body.wr-dark .buffer-radius-btn.active,
body.wr-dark .pm-tab.active {
  background: linear-gradient(135deg, var(--wl-blue) 0%, var(--wl-blue-ink) 100%) !important;
  border: 1px solid var(--wl-blue-ink) !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(29, 78, 216, .24) !important;
}
body.wr-dark .rf-btn-primary:hover,
body.wr-dark .pv-btn--primary:hover,
body.wr-dark .nw-btn--primary:hover,
body.wr-dark .rp-btn--primary:hover {
  background: linear-gradient(135deg, var(--wl-blue-ink) 0%, var(--wl-blue-deep) 100%) !important;
  box-shadow: 0 3px 12px rgba(29, 78, 216, .30) !important;
  color: #fff !important;
}
body.wr-dark .rf-btn-primary i,
body.wr-dark .pv-btn--primary i,
body.wr-dark .nw-btn--primary i,
body.wr-dark .pm-tab.active i { color: inherit !important; }

/* ── ชั้นที่ 3: ปุ่มความหมายเฉพาะ ── */
body.wr-dark .rf-btn-danger {
  background: var(--wl-red-tint) !important;
  border-color: var(--wl-red-line) !important;
  color: var(--wl-red-ink) !important;
}
body.wr-dark .rf-btn-danger:hover { background: var(--wl-red) !important; border-color: var(--wl-red) !important; color: #fff !important; }
body.wr-dark .rf-btn-danger:hover i { color: #fff !important; }
body.wr-dark .rf-btn-danger i { color: var(--wl-red) !important; }

/* ── ชิปสถานะที่ไม่ใช่ปุ่ม — ไม่ต้องเปลี่ยนสีตอนชี้เมาส์ ── */
body.wr-dark div.status-pill:hover {
  background: var(--wl-surface) !important;
  border-color: var(--wl-line-2) !important;
  color: var(--wl-dim) !important;
  box-shadow: none !important;
}
body.wr-dark .status-pill.pending-pill  { background: var(--wl-orange-tint) !important; border-color: var(--wl-orange-line) !important; color: var(--wl-orange-ink) !important; }
body.wr-dark .status-pill.pending-pill i { color: var(--wl-orange-ink) !important; }
body.wr-dark .status-pill.approved-pill { background: var(--wl-green-tint) !important; border-color: var(--wl-green-line) !important; color: var(--wl-green-ink) !important; }
body.wr-dark .status-pill.approved-pill i { color: var(--wl-green-ink) !important; }

body.wr-dark .severity-pill { border: 1px solid currentColor !important; }

/* ── ป้ายสีของชุด wr-pill — พื้นอ่อนขอบสี ── */
body.wr-dark .wr-pill--red    { background: var(--wl-red-tint) !important;    border-color: var(--wl-red-line) !important;    color: var(--wl-red-ink) !important; }
body.wr-dark .wr-pill--amber  { background: var(--wl-amber-tint) !important;  border-color: var(--wl-amber-line) !important;  color: var(--wl-amber-ink) !important; }
body.wr-dark .wr-pill--green  { background: var(--wl-green-tint) !important;  border-color: var(--wl-green-line) !important;  color: var(--wl-green-ink) !important; }
body.wr-dark .wr-pill--blue   { background: var(--wl-blue-a10) !important;    border-color: rgba(37, 99, 235, .28) !important; color: var(--wl-blue-ink) !important; }
body.wr-dark .wr-pill--slate  { background: #eef2f8 !important;               border-color: var(--wl-line) !important;        color: var(--wl-dim) !important; }
body.wr-dark .wr-pill-note    { color: var(--wl-muted) !important; }

/* ── รายการขั้นตอนด้านข้าง (referral-form) ── */
body.wr-dark .rff-step.is-active,
body.wr-dark .rff-step.active {
  background: var(--wl-blue-a10) !important;
  border-color: var(--wl-blue) !important;
  color: var(--wl-blue-deep) !important;
}
body.wr-dark .rff-step.is-done { border-color: var(--wl-green-line) !important; }

/* ── แถบขั้นตอนแบบวงกลม (incident-report) ──
   สีเดิมมาจาก :root ของหน้านั้นเอง (--primary น้ำเงิน #1e3a7b) จึงไม่เข้าโทน
   ปรับที่ตัวคอมโพเนนต์โดยตรง ไม่ไปแก้ค่า --primary เพราะโทเคนชื่อนี้ถูกใช้
   อีกหลายที่ในหน้าเดียวกัน การเปลี่ยนที่ต้นทางจะกระทบเกินความจำเป็น */
body.wr-dark .step-circle {
  background: var(--wl-surface) !important;
  border: 2px solid var(--wl-line-2) !important;
  color: var(--wl-muted) !important;
  font-family: var(--wl-mono);
}
body.wr-dark .wizard-step.active .step-circle {
  background: var(--wl-blue) !important;
  border-color: var(--wl-blue-ink) !important;
  color: #fff !important;
  box-shadow: var(--wl-ring) !important;
}
body.wr-dark .wizard-step.active .step-label { color: var(--wl-blue-deep) !important; font-weight: 600; }
body.wr-dark .wizard-step.completed .step-circle {
  background: var(--wl-green-tint) !important;
  border-color: var(--wl-green) !important;
  color: var(--wl-green-ink) !important;
}
body.wr-dark .wizard-step.completed .step-label { color: var(--wl-green-ink) !important; }
body.wr-dark .wizard-step.locked .step-circle {
  background: var(--wl-canvas) !important;
  border-color: var(--wl-line) !important;
  color: #9aa9bf !important;
}
body.wr-dark .step-label,
body.wr-dark .step-sublabel { color: var(--wl-muted) !important; }
body.wr-dark .step-line { background: var(--wl-line-2) !important; }
body.wr-dark .step-line.done {
  background: var(--wl-green) !important;
  box-shadow: none;
}

/* ── ไอคอนหัวข้อของแต่ละส่วนในฟอร์มแจ้งเหตุ ──
   เดิมเป็นบล็อกสีทึบ 6 สี ปรับเป็นพื้นอ่อนย้อมสี ยังแยกส่วนได้แต่ไม่แย่งสายตา */
body.wr-dark .section-icon {
  border: 1px solid var(--wl-line) !important;
  box-shadow: none !important;
}
body.wr-dark .section-icon.s1 { background: var(--wl-blue-a10) !important;   color: var(--wl-blue-ink) !important;   border-color: rgba(37, 99, 235, .22) !important; }
body.wr-dark .section-icon.s2 { background: var(--wl-violet-tint) !important; color: var(--wl-violet-ink) !important; border-color: var(--wl-violet-line) !important; }
body.wr-dark .section-icon.s3 { background: var(--wl-amber-tint) !important;  color: var(--wl-amber-ink) !important;  border-color: var(--wl-amber-line) !important; }
body.wr-dark .section-icon.s4 { background: var(--wl-green-tint) !important;  color: var(--wl-green-ink) !important;  border-color: var(--wl-green-line) !important; }
body.wr-dark .section-icon.s5 { background: var(--wl-red-tint) !important;    color: var(--wl-red-ink) !important;    border-color: var(--wl-red-line) !important; }
body.wr-dark .section-icon.s6 { background: var(--wl-blue-a10) !important;   color: var(--wl-navy) !important;       border-color: rgba(37, 99, 235, .22) !important; }

/* ── หน้าค้นหาหลัก (warroom.html) ──
   กฎของหน้านี้อยู่ระดับ id + !important ใน warroom-theme.css จึงต้องเขียน
   ตัวเลือกระดับ id เหมือนกันเพื่อให้มีน้ำหนักพอจะทับได้ */
body.wr-dark #search-btn,
body.wr-dark #save-new-btn,
body.wr-dark #back-to-search-btn-from-summary {
  color: #ffffff !important;
  border: 1px solid var(--wl-blue-ink) !important;
  box-shadow: 0 1px 3px rgba(29, 78, 216, .24) !important;
}
body.wr-dark #back-to-search-btn-from-summary {
  /* ปุ่มนี้ไล่สีม่วงไว้ที่ style ตรง ๆ ใน HTML — ต้องทับทั้งพื้นและตัวอักษร */
  background: linear-gradient(135deg, var(--wl-blue), var(--wl-blue-ink)) !important;
}
body.wr-dark #search-btn i,
body.wr-dark #save-new-btn i,
body.wr-dark #back-to-search-btn-from-summary i { color: inherit !important; }

/* ชิปตัวกรองด่วน "ค้นหาตามกลุ่ม" */
body.wr-dark #search-view .search-quick-filters .qf-chip {
  background: var(--wl-surface) !important;
  border-color: var(--wl-line-2) !important;
  color: var(--wl-dim) !important;
}
body.wr-dark #search-view .search-quick-filters .qf-chip:hover {
  background: var(--wl-blue-a06) !important;
  border-color: var(--wl-line-hot) !important;
  color: var(--wl-blue-deep) !important;
}
body.wr-dark #search-view .search-quick-filters .qf-chip.active {
  background: var(--wl-blue) !important;
  border-color: var(--wl-blue-ink) !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(29, 78, 216, .24) !important;
}
body.wr-dark #search-view .search-quick-filters .qf-label { color: var(--wl-muted) !important; }

/* ── พื้นเข้ม/พื้นสีจัดที่ยังตกค้างจากสไตล์ inline ของบางหน้า ──
   เขียนเป็น attribute selector ตามแนวทางเดิมใน dark-mode.css */
body.wr-dark [style*="background: #10B981"]:not(.badge),
body.wr-dark [style*="background:#10B981"]:not(.badge),
body.wr-dark [style*="background: #10b981"]:not(.badge),
body.wr-dark [style*="background:#10b981"]:not(.badge) {
  background: var(--wl-green-tint) !important;
  border-color: var(--wl-green-line) !important;
  color: var(--wl-green-ink) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   19) ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes wl-sweep {
  0%   { background-position: -50% 0; }
  100% { background-position: 150% 0; }
}
@keyframes wl-blink {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .35; transform: scale(.75); }
}
@keyframes wl-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
/* ชื่อ keyframes ชุดเดิมของธีมมืด — js/cyber-ui.js และ warroom-tactical.css
   ยังอ้างถึงอยู่ในบางจุด ประกาศไว้เป็นชื่อพ้องกันไม่ให้ animation หาย */
@keyframes cy-sweep { 0% { background-position: -50% 0; } 100% { background-position: 150% 0; } }
@keyframes cy-blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
@keyframes cy-rise  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* การ์ดไล่กันโผล่ขึ้นตอนเปิดหน้า — js/cyber-ui.js เป็นคนใส่คลาสและหน่วงเวลา */
body.wr-dark .cy-rise { animation: wl-rise .5s cubic-bezier(.22, .9, .3, 1) both; }

/* ═══════════════════════════════════════════════════════════════════════════
   20) จอเล็ก
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
}

/* ═══════════════════════════════════════════════════════════════════════════
   21) ลดการเคลื่อนไหว — ปิดเอฟเฟกต์ทั้งหมดตามที่ผู้ใช้ตั้งค่าไว้ในระบบ
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   22) การพิมพ์ — กระดาษขาวหมึกดำเสมอ
   ---------------------------------------------------------------------------
   ธีมบนจอสว่างอยู่แล้ว แต่ยังต้องมีบล็อกนี้ เพราะ:
     · เงา/เบลอ/พื้นไล่สี กินหมึกโดยไม่ได้ข้อมูลเพิ่ม
     · sidebar เป็นกรมท่าทึบ ถ้าไม่ล้างจะเป็นแถบดำยาวคาดทุกหน้ากระดาษ
     · ตัวหนังสือสีเทา (--wl-muted) จางเกินไปบนกระดาษ
     · ไฟล์ธีมเดิมอีก 3 ชั้นยังโหลดอยู่และยังมีสีเข้มของตัวเองอยู่

   *** ทำไมต้องเขียน body.wr-dark.wr-dark.wr-dark ***
   การอยู่ท้ายไฟล์ไม่พอที่จะชนะ เพราะ specificity มาก่อนลำดับเสมอ —
   กฎบนจอในไฟล์นี้อย่าง body.wr-dark .table td มี 2 คลาส ส่วนกฎพิมพ์
   body.wr-dark table td มีคลาสเดียว กฎบนจอจึงชนะแม้จะอยู่ก่อน
   การเขียนคลาสเดิมซ้ำสี่ชั้นชี้ element เดียวกันเป๊ะ แต่ได้น้ำหนัก 4 คลาส
   จึงชนะทุกกฎบนจอโดยไม่ต้องไล่แก้ทีละตัว
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  /* ── ขั้นที่ 1: เปลี่ยนค่าโทเคนทั้งระบบเป็นค่ากระดาษ ──
     กฎจำนวนมากทั้งในไฟล์นี้และไฟล์ธีมเดิมอ้างสีผ่าน var(--wl-* / --tc-* /
     --wr-d-* / --wrt-*) การเปลี่ยนที่ต้นทางจึงได้ผลกับทุกกฎพร้อมกัน */
  body.wr-dark {
    --wl-text: #000; --wl-dim: #333; --wl-muted: #555;
    --wl-glass: transparent; --wl-glass-2: transparent; --wl-well: transparent;
    --wl-canvas: #fff; --wl-canvas-2: #fff; --wl-surface: #fff;
    --wl-raise: #f6f8fb; --wl-lift: #fff;
    --wl-line: #b9c2d0; --wl-line-2: #98a4b6; --wl-line-hot: #6b7a90;
    --wl-navy: #000; --wl-navy-2: #000; --wl-navy-3: #000;
    --wl-shadow: none; --wl-shadow-md: none; --wl-shadow-lg: none;
    --wl-ring: none; --wl-ring-hot: none;

    --tc-text: #000; --tc-muted: #444; --tc-ink: #000;
    --tc-panel: transparent; --tc-panel-2: transparent;
    --tc-bg-0: #fff; --tc-bg-1: #fff; --tc-bg-2: #fff; --tc-surface: #fff;
    --tc-border: #b9c2d0; --tc-border-str: #98a4b6;

    --wr-text: #000; --wr-muted: #555; --wr-bg: #fff; --wr-card-bg: #fff; --wr-border: #b9c2d0;
    --wr-navy: #000; --wr-navy-mid: #000;
    --wr-d-text: #000; --wr-d-text-dim: #333; --wr-d-text-muted: #555;
    --wr-d-bg: #fff; --wr-d-surface: #fff; --wr-d-surface-2: #f6f8fb;
    --wr-d-surface-3: #fff; --wr-d-surface-4: #fff;
    --wr-d-border: #b9c2d0; --wr-d-border-2: #98a4b6;

    --wrt-bg: transparent; --wrt-head-bg: #e8eef7; --wrt-head-fg: #24336e;
    --wrt-ink: #000; --wrt-ink-soft: #333; --wrt-ink-dim: #555;
    --wrt-line: #cbd3de; --wrt-line-str: #b9c2d0;
    --wrt-hover: transparent; --wrt-selected: transparent;

    --text: #000; --text-muted: #555; --bg: #fff; --card-bg: #fff; --border: #b9c2d0;
    --shadow: none; --shadow-lg: none;
  }

  /* ── ขั้นที่ 2: ล้างสิ่งที่ประกาศเป็นสีตายตัว (ไม่ได้ผ่าน var) ── */
  /* ปิดเอฟเฟกต์ทุกชนิด — เงา/เบลอ/เคลื่อนไหว ไม่มีความหมายบนกระดาษ */
  body.wr-dark.wr-dark.wr-dark.wr-dark *,
  body.wr-dark.wr-dark.wr-dark.wr-dark *::before,
  body.wr-dark.wr-dark.wr-dark.wr-dark *::after {
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }

  /* ของประดับ — ซ่อนทิ้ง */
  body.wr-dark.wr-dark.wr-dark.wr-dark::before,
  body.wr-dark.wr-dark.wr-dark.wr-dark::after,
  body.wr-dark.wr-dark.wr-dark.wr-dark .cy-beam,
  body.wr-dark.wr-dark.wr-dark.wr-dark .cy-status,
  body.wr-dark.wr-dark.wr-dark.wr-dark .tc-status,
  body.wr-dark.wr-dark.wr-dark.wr-dark .icon-box::after,
  body.wr-dark.wr-dark.wr-dark.wr-dark .wr-topbar::after,
  body.wr-dark.wr-dark.wr-dark.wr-dark .summary-card::before { display: none !important; }

  html,
  body.wr-dark.wr-dark.wr-dark.wr-dark {
    background: #fff !important;
    background-image: none !important;
    color: #000 !important;
  }

  /* กล่องทุกชนิด — โปร่งใสให้เห็นกระดาษขาว ขอบเป็นเส้นเทาบาง
     ใช้ตัวเลือกแบบ [class*="..."] เพราะแต่ละหน้าตั้งชื่อคลาสกล่องของตัวเอง
     ไม่เหมือนกัน (.table-card, .filter-card, .rp-filter-card ฯลฯ)
     การไล่ระบุทีละชื่อจะตกหล่นเสมอ */
  body.wr-dark.wr-dark.wr-dark.wr-dark [class*="card"]:not(.badge):not([class*="pill"]),
  body.wr-dark.wr-dark.wr-dark.wr-dark [class*="panel"]:not([class*="pill"]),
  body.wr-dark.wr-dark.wr-dark.wr-dark [class*="-header"]:not(.wr-topbar),
  body.wr-dark.wr-dark.wr-dark.wr-dark [class*="glass"],
  body.wr-dark.wr-dark.wr-dark.wr-dark .form-section,
  body.wr-dark.wr-dark.wr-dark.wr-dark .modal-content,
  body.wr-dark.wr-dark.wr-dark.wr-dark section,
  body.wr-dark.wr-dark.wr-dark.wr-dark main,
  body.wr-dark.wr-dark.wr-dark.wr-dark .wr-main-content,
  body.wr-dark.wr-dark.wr-dark.wr-dark .container,
  body.wr-dark.wr-dark.wr-dark.wr-dark .container-fluid {
    background: transparent !important;
    background-image: none !important;
    color: #000 !important;
    border-color: #b9c2d0 !important;
  }

  /* แถบบน + แถบข้าง — พิมพ์เป็นขาว-ดำ ไม่งั้นกินหมึกทั้งแถบโดยไม่ได้ข้อมูลเพิ่ม */
  body.wr-dark.wr-dark.wr-dark.wr-dark .wr-topbar,
  body.wr-dark.wr-dark.wr-dark.wr-dark .wr-topbar *,
  body.wr-dark.wr-dark.wr-dark.wr-dark .wr-sidebar,
  body.wr-dark.wr-dark.wr-dark.wr-dark .wr-sidebar * {
    background: transparent !important;
    background-image: none !important;
    color: #000 !important;
    border-color: #b9c2d0 !important;
  }

  /* ตาราง — หัวตารางพื้นเทาอ่อน เนื้อตารางหมึกดำ
     ต้องล้างทั้ง thead/tbody/tfoot/tr/td ไม่ใช่แค่ th กับ td
     เพราะหลายหน้าใส่สีพื้นไว้ที่แถว (tr) หรือที่ thead แทนที่จะเป็นเซลล์ */
  body.wr-dark.wr-dark.wr-dark.wr-dark table,
  body.wr-dark.wr-dark.wr-dark.wr-dark .table,
  body.wr-dark.wr-dark.wr-dark.wr-dark .wrt,
  body.wr-dark.wr-dark.wr-dark.wr-dark table tbody,
  body.wr-dark.wr-dark.wr-dark.wr-dark table tfoot,
  body.wr-dark.wr-dark.wr-dark.wr-dark table tr,
  body.wr-dark.wr-dark.wr-dark.wr-dark table td {
    background: transparent !important;
    background-image: none !important;
    color: #000 !important;
    border-color: #cbd3de !important;
  }
  body.wr-dark.wr-dark.wr-dark.wr-dark table thead,
  body.wr-dark.wr-dark.wr-dark.wr-dark table thead tr,
  body.wr-dark.wr-dark.wr-dark.wr-dark table th,
  body.wr-dark.wr-dark.wr-dark.wr-dark .table > thead > tr > th,
  body.wr-dark.wr-dark.wr-dark.wr-dark .wrt thead th,
  body.wr-dark.wr-dark.wr-dark.wr-dark table.wrt thead th {
    background: #e8eef7 !important;
    background-image: none !important;
    color: #24336e !important;
    border-color: #b9c2d0 !important;
  }
  /* ข้อความที่ซ้อนอยู่ในเซลล์ — ยกเว้นป้ายที่ "สีคือความหมาย" */
  body.wr-dark.wr-dark.wr-dark.wr-dark table td *:not(.badge):not([class*="pill"]):not([class*="chip"]),
  body.wr-dark.wr-dark.wr-dark.wr-dark table th *:not(.badge):not([class*="pill"]):not([class*="chip"]) {
    color: inherit !important;
    background-image: none !important;
  }
  body.wr-dark.wr-dark.wr-dark.wr-dark .table-striped > tbody > tr:nth-of-type(odd) > * { background: #f6f8fb !important; }

  /* หัวเรื่อง ป้ายกำกับ และปุ่ม — บังคับเป็นหมึกดำ
     หลายหน้ากำหนดสีอ่อนไว้ตรง ๆ (ไม่ผ่าน var) จึงยังจางอยู่หลังแปลงโทเคน */
  body.wr-dark.wr-dark.wr-dark.wr-dark h1,
  body.wr-dark.wr-dark.wr-dark.wr-dark h2,
  body.wr-dark.wr-dark.wr-dark.wr-dark h3,
  body.wr-dark.wr-dark.wr-dark.wr-dark h4,
  body.wr-dark.wr-dark.wr-dark.wr-dark h5,
  body.wr-dark.wr-dark.wr-dark.wr-dark h6,
  body.wr-dark.wr-dark.wr-dark.wr-dark label,
  body.wr-dark.wr-dark.wr-dark.wr-dark .form-label,
  body.wr-dark.wr-dark.wr-dark.wr-dark .subtitle,
  body.wr-dark.wr-dark.wr-dark.wr-dark .card-label,
  body.wr-dark.wr-dark.wr-dark.wr-dark .text-muted,
  body.wr-dark.wr-dark.wr-dark.wr-dark .st-label,
  body.wr-dark.wr-dark.wr-dark.wr-dark .panel-title,
  body.wr-dark.wr-dark.wr-dark.wr-dark .chart-title,
  body.wr-dark.wr-dark.wr-dark.wr-dark .card-value,
  body.wr-dark.wr-dark.wr-dark.wr-dark .fv,
  body.wr-dark.wr-dark.wr-dark.wr-dark .st-value,
  body.wr-dark.wr-dark.wr-dark.wr-dark .btn,
  body.wr-dark.wr-dark.wr-dark.wr-dark .btn *,
  body.wr-dark.wr-dark.wr-dark.wr-dark [class*="-header"]:not(.wr-topbar),
  body.wr-dark.wr-dark.wr-dark.wr-dark [class*="-header"]:not(.wr-topbar) *,
  body.wr-dark.wr-dark.wr-dark.wr-dark [class*="title"],
  body.wr-dark.wr-dark.wr-dark.wr-dark a {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
  }

  /* ป้ายที่สีคือความหมาย — ให้เป็นกรอบสีบนพื้นขาว จะได้ไม่เปลืองหมึกแต่ยังแยกออก */
  body.wr-dark.wr-dark.wr-dark.wr-dark .badge,
  body.wr-dark.wr-dark.wr-dark.wr-dark .wr-pill,
  body.wr-dark.wr-dark.wr-dark.wr-dark [class*="pill"] {
    background: transparent !important;
    border: 1px solid currentColor !important;
  }

  /* "กระดาษ" ของ report-print ต้องขาวเสมอ ไม่ว่ากฎข้างบนจะทำอะไร */
  body.wr-dark.wr-dark.wr-dark.wr-dark .pf-doc { background: #fff !important; color: #0f172a !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   23) กฎที่ย้ายมาจาก css/dark-mode.css และ css/warroom-tactical.css
   ---------------------------------------------------------------------------
   สองไฟล์นั้นถูกถอดออกจาก <head> ทุกหน้าแล้ว (เป็นชั้นสีมืดล้วน ~3,300 บรรทัด
   ที่มีกฎระดับ #id ซึ่งชั้นผิวอย่างไฟล์นี้ทับไม่ได้ เช่น #mw-summary-table thead th
   ที่ specificity (1,1,2) — เก็บไว้เท่ากับต้องเขียนกฎแก้ต่างอีกร้อยกว่าข้อ)

   แต่ทั้งสองไฟล์มี "กฎที่ไม่เกี่ยวกับสี" ปนอยู่ไม่กี่ข้อ ซึ่งหน้าเว็บพึ่งพาอยู่จริง
   ย้ายมาไว้ที่นี่ทั้งหมด — ถ้าไม่ย้าย ความกว้างของทุกหน้าจะหดกลับไปเป็น
   กล่องกลางจอ และป้าย .wr-pill จะกลายเป็นข้อความเปล่า ๆ ไม่มีกรอบ
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 23.1 เต็มความกว้างจอ (ยกมาจาก dark-mode.css หมวด 34) ──
   เดิมแต่ละหน้าตัน max-width ไว้คนละค่า (960 / 1400 / 1500 / 1600 / 1680px)
   เนื้อหาจึงลอยอยู่กลางจอบนมอนิเตอร์กว้าง — ยึดตามมุมมอง ColC ที่กว้างเต็มพื้นที่
   ระยะขอบซ้าย/ขวายังมาจาก .wr-main-content (2rem) หรือ padding ของ wrapper เดิม
   ใช้ !important เพราะกฎต้นทางอยู่ใน <style> ของหน้าและ CSS เฉพาะหน้า
   *** ไม่มี body.wr-dark นำหน้าโดยตั้งใจ — เป็นกฎเลย์เอาต์ ไม่ใช่กฎธีม ***
   (ไม่แตะหน้า login/reset-password ที่เป็นการ์ดกลางจอโดยตั้งใจ) */
.wr-main-content > .container,
.wr-main-content > .container-sm,
.wr-main-content > .container-md,
.wr-main-content > .container-lg,
.wr-main-content > .container-xl,
.wr-main-content > .container-xxl,
.wr-main-content .container.view,
#form-view,
#colc-view,
#province-summary-view,
#search-view,
#summary-view,
#most-wanted-view {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.dash-main,
.rf-main,
.pm-wrap,
.import-container,
.form-page-header .header-content,
header .header-content { max-width: none !important; }
body[data-luxury] > .container,
body[data-luxury] > .container-lg,
body[data-luxury] > .container-xl { max-width: none !important; }
.wizard-container,
.progress-bar-container,
.form-card { max-width: none !important; }
.profile-card { max-width: none !important; }

/* ── 23.2 ป้ายสถานะ .wr-pill (ยกมาจาก dark-mode.css หมวด 33) ──
   ใช้อยู่ 30 กว่าจุดในหลายหน้า และ "รูปทรง" ของมันถูกประกาศไว้ที่นั่นที่เดียว
   ถ้าไม่ย้ายมา ป้ายทั้งหมดจะกลายเป็นข้อความลอย ๆ ไม่มีพื้นไม่มีกรอบ
   *** สีมีความหมายตามรหัสราชการ (แดง/ส้ม/เหลือง/เขียว) ห้ามสลับเฉด ***
   ชุดสีด้านล่างเป็นเวอร์ชันพื้นสว่าง — ทุกคู่ผ่านเกณฑ์ contrast >= 4.5:1 บนพื้นขาว */
.wr-pill {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
}
.wr-pill--sm { padding: .1rem .4rem; border-radius: 12px; font-size: .7rem; }

body.wr-dark .wr-pill--orange { background: var(--wl-orange-tint) !important; border-color: var(--wl-orange-line) !important; color: var(--wl-orange-ink) !important; }
body.wr-dark .wr-pill--violet { background: var(--wl-violet-tint) !important; border-color: var(--wl-violet-line) !important; color: var(--wl-violet-ink) !important; }
body.wr-dark .wr-pill-link { color: var(--wl-blue-ink) !important; font-weight: 600; text-decoration: none; }
body.wr-dark .wr-pill-link:hover { color: var(--wl-blue-deep) !important; text-decoration: underline; }

/* ── 23.3 ชิปสถานะลอยบนแผนที่ (ยกมาจาก warroom-tactical.css:385) ──
   js/tactical-ui.js เป็นคนสร้าง element นี้ ถ้าไม่มีกฎวางตำแหน่ง
   ชิปจะไหลลงมาอยู่ในสายเอกสารแทนที่จะลอยมุมขวาบนของแผนที่ */
body.wr-dark .tc-status--float {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 700;
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid var(--wl-line-2) !important;
  box-shadow: var(--wl-shadow-md);
}

/* ── 23.4 ขีดน้ำเงินใต้หัวข้อแผง (ยกมาจาก warroom-tactical.css:206, 297) ──
   เก็บไว้เพราะเป็นรายละเอียดที่ทำให้หัวข้อดูเป็นระบบ ไม่ใช่แค่ข้อความหนา */
body.wr-dark .panel-title,
body.wr-dark .gis-section-title { position: relative; padding-bottom: .45rem; }
body.wr-dark .panel-title::after,
body.wr-dark .gis-section-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 44px;
  background: linear-gradient(90deg, var(--wl-blue), transparent);
  border-radius: 2px;
}

/* ── 23.5 หัวตารางใน modal ต้องทึบ (ยกมาจาก dark-mode.css:2185) ──
   หัวตารางเป็น sticky ในกล่องที่เลื่อนได้ ถ้าโปร่งแถวข้อมูลจะทะลุขึ้นมาซ้อน */
body.wr-dark #detailModal thead,
body.wr-dark #detailModal thead th { background: #eef4fc !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   24) เก็บตกจากไฟล์ที่ยังโหลดอยู่
   ---------------------------------------------------------------------------
   css/warroom-theme.css เป็นชั้นฐาน (จานสีสว่างอยู่แล้ว) แต่ส่วน "โครมของแอป"
   ถูกเขียนไว้สำหรับพื้นกรมท่า — ตัวหนังสือขาวหลายจุดผูก !important ไว้
   sidebar ของธีมนี้ยังเป็นกรมท่า สีขาวตรงนั้นจึงถูกต้องอยู่แล้ว
   ที่ต้องแก้คือของที่ย้ายไปอยู่บนพื้นขาว: topbar, หัวการ์ดฟอร์ม, ป้าย, ตัวโหลด
   ═══════════════════════════════════════════════════════════════════════════ */

/* แบนเนอร์หัวเรื่องแบบกรมท่า (.form-page-header / .form-title-card)
   พื้นยังเป็นกรมท่าตามที่ warroom-theme.css และตัว HTML ของหน้าตั้งไว้
   จึงต้องบังคับตัวหนังสือ "ทั้งก้อน" ให้เป็นสีอ่อน — เขียนเป็น descendant
   แบบครอบทั้งหมด เพราะแต่ละหน้าใช้แท็กไม่เหมือนกัน (.title บ้าง h1 บ้าง div เปล่า ๆ บ้าง)
   ถ้าไล่ระบุทีละแท็กจะตกหล่นแล้วเหลือตัวหนังสือเข้มบนพื้นกรมท่า
   ยกเว้น element ที่มีพื้นของตัวเอง (ปุ่มเม็ดยาสีขาว) — ดูเหตุผลในส่วนที่ 25.11 */
body.wr-dark .form-page-header,
body.wr-dark .form-title-card { color: #fff !important; }
body.wr-dark .form-page-header .title,
body.wr-dark .form-title-card .title,
body.wr-dark .form-page-header h1,
body.wr-dark .form-title-card h1 { color: #fff !important; }              /* 16.5:1 บนกรมท่า */
body.wr-dark .form-page-header .subtitle,
body.wr-dark .form-title-card .subtitle,
body.wr-dark .form-page-header > div > div > div:not([style*="background" i]),
body.wr-dark .form-title-card .subtitle { color: rgba(255, 255, 255, .82) !important; }   /* 11.9:1 */
body.wr-dark .form-page-header .title i,
body.wr-dark .form-title-card .title i { color: var(--wl-gold-lt) !important; }

/* อักษรย่อบนปุ่มโปรไฟล์ topbar — พื้น topbar เป็นกรมท่า จึงกลับไปใช้ขาวโปร่ง */
body.wr-dark .wr-topbar .profile-avatar-placeholder {
  background: rgba(255, 255, 255, .18) !important;
  color: #ffffff !important;
}
body.wr-dark .wr-topbar .profile-avatar,
body.wr-dark .wr-topbar .profile-btn img { border-color: rgba(255, 255, 255, .35) !important; }

/* ปุ่มแก้ไข — warroom-theme.css:586 ตั้งส้มสดไว้ที่ระดับ #id + !important
   ต้องเขียนตัวเลือกระดับ id เหมือนกันถึงจะทับได้ ปรับให้เป็นเหลืองอำพันของธีม */
body.wr-dark #update-btn {
  background: linear-gradient(135deg, var(--wl-amber), #b45309) !important;
  border: 1px solid #b45309 !important;
  color: #fff !important;
}

/* ม่านตัวโหลดเต็มจอ — warroom-theme.css:660 (#id) และ css/psych-dashboard.css
   ทั้งคู่เป็นกรมท่าทึบ บนธีมสว่างต้องเป็นม่านขาวโปร่ง */
body.wr-dark #loader-overlay,
body.wr-dark .full-page-loader,
body.wr-dark .loading-overlay {
  background: rgba(238, 242, 249, .82) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}
body.wr-dark .loader-text { color: var(--wl-navy) !important; }
body.wr-dark .loader-subtext { color: var(--wl-muted) !important; }
body.wr-dark .loader-bar-track { background: #dbe3ef !important; }

/* หน้าเข้าสู่ระบบ: กล่อง "ลืมรหัสผ่าน" อยู่นอก .auth-container (auth.html:133)
   กฎในส่วนที่ 15 จึงไปไม่ถึง ต้องเขียนแยก และปุ่มยืนยันเป็นระดับ #id */
body.wr-dark .modal-card {
  background: var(--wl-surface) !important;
  border: 1px solid var(--wl-line) !important;
  border-top: 3px solid var(--wl-blue) !important;
  color: var(--wl-text) !important;
  box-shadow: var(--wl-shadow-lg) !important;
}
body.wr-dark .modal-card h2,
body.wr-dark .modal-card h3 { color: var(--wl-navy) !important; }
body.wr-dark .modal-card label { color: var(--wl-dim) !important; }
body.wr-dark .modal-card input {
  background: var(--wl-well) !important;
  border: 1px solid #d5dfec !important;
  color: var(--wl-text) !important;
}
body.wr-dark #forgotRequestBtn {
  background: linear-gradient(135deg, var(--wl-blue) 0%, var(--wl-blue-ink) 100%) !important;
  border: 1px solid var(--wl-blue-ink) !important;
  color: #fff !important;
}

/* ตารางรายงาน (css/warroom-table.css) — ปุ่มหลักและเลขหน้าปัจจุบันใช้
   background: var(--wrt-navy) คู่กับ color:#fff ที่เขียนตายตัว
   --wrt-navy จึงต้องเป็นกรมท่าเข้มเสมอ (ตั้งไว้แล้วในบล็อก TOKENS)
   ตรงนี้แค่จัดหัวตารางให้เฉดเดียวกับกฎในส่วนที่ 10 ไม่ให้มีสองเฉดปนกัน */
body.wr-dark .wrt-btn--primary:hover { background: var(--wl-navy-3) !important; color: #fff !important; }

/* บล็อกโค้ดตัวอย่าง (csv-to-sql-history) ยังเป็นพื้นเข้มโดยตั้งใจ —
   โค้ดพื้นเข้มบนหน้าสว่างเป็นแบบแผนปกติ แค่ปรับขอบให้เข้าชุด */
body.wr-dark .code-block { border: 1px solid var(--wl-line-2) !important; border-radius: var(--wl-r-sm) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   25) แก้คอนทราสต์ที่เหลือ — ตรวจด้วยเบราว์เซอร์จริง
   ---------------------------------------------------------------------------
   ส่วนนี้มาจากการวัดคอนทราสต์ทุก element ในทุกหน้าด้วย Chrome (คำนวณสีพื้น
   ที่ "เห็นจริง" โดยไล่ขึ้นไปตามบรรพบุรุษและเฉลี่ยสีของ gradient) แล้วเก็บเฉพาะ
   คู่สีที่ต่ำกว่าเกณฑ์ WCAG AA — ไม่ใช่การเดาจากการอ่านโค้ด

   ต้นเหตุมี 2 แบบเท่านั้น:
     ก) ข้อความสีอ่อนที่เขียนไว้สำหรับพื้นมืด (#cbd5e1 / #94a3b8 / rgba ขาว)
        พอพื้นเป็นขาวก็จางจนอ่านไม่ออก → ทำให้เข้มขึ้น
     ข) พื้นสีสดที่คู่กับตัวหนังสือขาว (#f59e0b / #10b981 / #3b82f6 …)
        สีพวกนี้สว่างเกินกว่าจะรองรับตัวหนังสือขาว → ทำให้เข้มขึ้นจนผ่าน 4.5:1
        (ธีมมืดเดิมก็ทำแบบเดียวกันด้วยเหตุผลเดียวกัน — ดู dark-mode.css หมวด 32)
   ตัวเลขในวงเล็บคือคอนทราสต์หลังแก้ เทียบขาวหรือเทียบพื้นขาวแล้วแต่กรณี
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 25.1 ข้อความสีอ่อนที่ประกาศไว้ใน style="" ของหน้า ──
   ป้ายบอกตำแหน่งบน topbar ของหน้าจัดการต่าง ๆ ใช้ rgba(255,255,255,.5)
   ซึ่งเขียนไว้ตอน topbar ยังเป็นกรมท่า ตอนนี้ topbar เป็นสีขาวแล้ว (1.01:1) */
body.wr-dark [style*="rgba(255,255,255,.5)"],
body.wr-dark [style*="rgba(255,255,255,0.5)"],
body.wr-dark [style*="rgba(255, 255, 255, .5)"],
body.wr-dark [style*="rgba(255, 255, 255, 0.5)"],
body.wr-dark [style*="rgba(255,255,255,.6)"],
body.wr-dark [style*="rgba(255,255,255,.65)"],
body.wr-dark [style*="rgba(255,255,255,.7)"] { color: var(--wl-muted) !important; }   /* 5.4:1 */

/* เทาอ่อนชุดที่เขียนไว้สำหรับพื้นมืด */
body.wr-dark [style*="color:#cbd5e1" i],
body.wr-dark [style*="color: #cbd5e1" i],
body.wr-dark [style*="color:#94a3b8" i],
body.wr-dark [style*="color: #94a3b8" i],
body.wr-dark [style*="color:#a5b4cd" i],
body.wr-dark [style*="color: #a5b4cd" i] { color: var(--wl-muted) !important; }        /* 5.4:1 */
/* แดงอ่อน/ฟ้าอ่อนสำหรับพื้นมืด (ข้อความแจ้งข้อผิดพลาดที่ js สร้าง) */
body.wr-dark [style*="color:#ff8b98" i],
body.wr-dark [style*="color: #ff8b98" i],
body.wr-dark [style*="color:#fca5a5" i],
body.wr-dark [style*="color: #fca5a5" i] { color: var(--wl-red-ink) !important; }      /* 6.5:1 */
body.wr-dark [style*="color:#60a5fa" i],
body.wr-dark [style*="color: #60a5fa" i],
body.wr-dark [style*="color:#93c5fd" i],
body.wr-dark [style*="color: #93c5fd" i] { color: var(--wl-blue-ink) !important; }     /* 6.7:1 */

/* ชิปโปร่งขาวบนแถบสี — ออกแบบไว้ทับพื้นกรมท่า พอแถบเป็นน้ำเงินสดก็เหลือ 4.0:1
   เปลี่ยนเป็นฟิล์มดำโปร่งแทน ตัวหนังสือขาวจึงกลับมาผ่านเกณฑ์ (6.0-7.5:1) */
body.wr-dark [style*="background:rgba(255,255,255,.12)"],
body.wr-dark [style*="background:rgba(255,255,255,.15)"],
body.wr-dark [style*="background:rgba(255,255,255,.2)"],
body.wr-dark [style*="background: rgba(255,255,255,.12)"],
body.wr-dark [style*="background: rgba(255,255,255,.2)"] { background: rgba(0, 0, 0, .22) !important; }

/* ── 25.2 พื้นสีสดที่คู่กับตัวหนังสือขาว ──
   ใช้ตัวเลือกแบบ [style*=...] เพราะสีเหล่านี้เขียนไว้ที่ style="" ของแต่ละแถว
   (เช่น .station-type-header ใน drug-dealer-dashboard.html 10 จุด)
   ธง i ท้ายตัวเลือกทำให้ไม่ต้องเขียนซ้ำทั้งตัวพิมพ์เล็กและใหญ่ */
body.wr-dark [style*="background:#f59e0b" i], body.wr-dark [style*="background: #f59e0b" i],
body.wr-dark [style*="background:#eab308" i], body.wr-dark [style*="background: #eab308" i],
body.wr-dark [style*="background:#fbbf24" i], body.wr-dark [style*="background: #fbbf24" i] { background: var(--wl-gold) !important; color: #fff !important; }        /* 4.9:1 */
body.wr-dark [style*="background:#d97706" i], body.wr-dark [style*="background: #d97706" i],
body.wr-dark [style*="background:#f97316" i], body.wr-dark [style*="background: #f97316" i] { background: #b45309 !important; color: #fff !important; }                 /* 5.0:1 */
body.wr-dark [style*="background:#10b981" i], body.wr-dark [style*="background: #10b981" i],
body.wr-dark [style*="background:#22c55e" i], body.wr-dark [style*="background: #22c55e" i] { background: var(--wl-green-ink) !important; color: #fff !important; }    /* 5.5:1 */
body.wr-dark [style*="background:#3b82f6" i], body.wr-dark [style*="background: #3b82f6" i],
body.wr-dark [style*="background:#60a5fa" i], body.wr-dark [style*="background: #60a5fa" i] { background: var(--wl-blue-ink) !important; color: #fff !important; }     /* 6.7:1 */
body.wr-dark [style*="background:#8b5cf6" i], body.wr-dark [style*="background: #8b5cf6" i] { background: var(--wl-violet-ink) !important; color: #fff !important; }   /* 7.1:1 */
body.wr-dark [style*="background:#ef4444" i], body.wr-dark [style*="background: #ef4444" i] { background: #c81e1e !important; color: #fff !important; }                /* 5.7:1 */
body.wr-dark [style*="background:#06b6d4" i], body.wr-dark [style*="background: #06b6d4" i] { background: #0e7490 !important; color: #fff !important; }                /* 5.4:1 */
body.wr-dark [style*="background:#ec4899" i], body.wr-dark [style*="background: #ec4899" i] { background: #be185d !important; color: #fff !important; }                /* 6.0:1 */

/* ── 25.3 ผังเส้นทางการดำเนินการ (drug-dealer-dashboard) ──
   ปลายสว่างของแต่ละไล่สีอ่อนเกินกว่าจะรองรับตัวหนังสือขาว (2.5-4.2:1)
   ปรับให้ไล่จาก "เข้ม → เข้มกลาง" แทน สีประจำหมวดยังแยกออกจากกันครบ */
body.wr-dark .fn--blue   { background: linear-gradient(135deg, #1e3a8a, var(--wl-blue-ink)) !important; }
body.wr-dark .fn--green  { background: linear-gradient(135deg, #064e3b, var(--wl-green-ink)) !important; }
body.wr-dark .fn--red    { background: linear-gradient(135deg, #7f1d1d, #c81e1e) !important; }
body.wr-dark .fn--orange { background: linear-gradient(135deg, #7c2d12, #b45309) !important; }
body.wr-dark .fn--purple { background: linear-gradient(135deg, #4c1d95, var(--wl-violet-ink)) !important; }
body.wr-dark .fn--cyan   { background: linear-gradient(135deg, #164e63, #0e7490) !important; }
body.wr-dark .fn--pink   { background: linear-gradient(135deg, #831843, #be185d) !important; }
body.wr-dark .fn--grad1  { background: linear-gradient(135deg, #7c2d12, #c2410c) !important; }

/* ── 25.4 แถบหัวข้อบนแบนเนอร์กรมท่า ──
   .dm-page-header (data-management) ยังเป็นแบนเนอร์กรมท่าโดยตั้งใจ
   กฎ .subtitle รวมในส่วนที่ 6 ทำให้ตัวหนังสือเป็นเทาเข้มบนกรมท่า (2.5:1)
   คืนค่าให้เป็นสีอ่อนเฉพาะในบริบทนี้ */
body.wr-dark .dm-page-header .title { color: #fff !important; }
body.wr-dark .dm-page-header .subtitle { color: rgba(255, 255, 255, .82) !important; }  /* 11.9:1 */
body.wr-dark .dm-page-header .title i { color: var(--wl-gold-lt) !important; }

/* ── 25.5 แถบสลับชั้นแผนที่ (gis-dashboard) ──
   ปุ่มเลือกแผนที่ฐานลอยอยู่บนแผนที่ เดิมพึ่งพื้นมืดของธีมเก่า
   หน้านี้มีชุดสีสว่างของตัวเองอยู่แล้ว (.gis-light ใน gis-dashboard.html)
   แต่คลาสนั้นไม่ได้ถูกใส่ — ยกค่าชุดสว่างมาใช้เป็นค่าปกติแทน */
body.wr-dark .basemap-switcher { background: rgba(255, 255, 255, .95) !important; border-color: var(--wl-line-2) !important; }
body.wr-dark .basemap-btn { color: var(--wl-dim) !important; background: transparent !important; }
body.wr-dark .basemap-btn.active,
body.wr-dark .basemap-btn:hover { background: var(--wl-blue-a10) !important; color: var(--wl-blue-deep) !important; }

/* ── 25.6 แท็บเลือกมุมมองแผนที่ (incident-situation-dashboard) ── */
body.wr-dark .map-tab { color: var(--wl-dim) !important; }                                 /* 7.4:1 */
body.wr-dark .map-tab:hover { color: var(--wl-blue-deep) !important; background: var(--wl-blue-a06) !important; }
body.wr-dark .map-tab.is-active { background: var(--wl-blue) !important; color: #fff !important; }

/* ── 25.7 ท้ายหน้า / ข้อความประกอบ — #64748b บนพื้นเทาฟ้าได้ 4.15:1 ยังไม่ผ่าน ── */
body.wr-dark .dash-footer,
body.wr-dark .rf-footer,
body.wr-dark .rff-hint-line,
body.wr-dark .rf-result-count { color: var(--wl-muted) !important; }                       /* 4.8:1 */

/* ── 25.8 ปุ่มของ SweetAlert2 — ธีมเดิมจัดแค่กล่อง ไม่ได้จัดปุ่ม ──
   กล่องเป็นสีขาวแล้ว ปุ่มจึงต้องเข้าชุดกับปุ่มอื่นของระบบ */
body.wr-dark .swal2-styled.swal2-confirm {
  background: linear-gradient(135deg, var(--wl-blue) 0%, var(--wl-blue-ink) 100%) !important;
  border: 1px solid var(--wl-blue-ink) !important;
  color: #fff !important;
  box-shadow: none !important;
}
body.wr-dark .swal2-icon.swal2-error ~ .swal2-actions .swal2-styled.swal2-confirm,
body.wr-dark .swal2-styled.swal2-deny {
  background: #c81e1e !important;                                                          /* 5.7:1 */
  border-color: #c81e1e !important;
  color: #fff !important;
}
body.wr-dark .swal2-styled.swal2-cancel {
  background: var(--wl-surface) !important;
  border: 1px solid var(--wl-line-2) !important;
  color: var(--wl-dim) !important;
}
body.wr-dark .swal2-styled:focus { box-shadow: var(--wl-ring) !important; }

/* ── 25.9 ตระกูลปุ่มเฉพาะหน้าที่ยังหลุดจานสี ──
   .filter-toggle-btn (กรมท่า) กับ .btn-refresh (เขียว 3.07:1) ใน psych-dashboard
   และ .btn-export-excel (เขียว) — ดึงกลับมาเป็นน้ำเงินหลัก + ขาวรอง
   เหตุผลเดียวกับส่วนที่ 18: หนึ่งหน้าไม่ควรมีสีเน้น 3-4 สีแข่งกัน */
body.wr-dark .filter-toggle-btn {
  background: linear-gradient(135deg, var(--wl-blue) 0%, var(--wl-blue-ink) 100%) !important;
  border: 1px solid var(--wl-blue-ink) !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(29, 78, 216, .24) !important;
}
body.wr-dark .btn-refresh,
body.wr-dark .btn-export-excel,
body.wr-dark .btn-show-data {
  background: var(--wl-surface) !important;
  border: 1px solid var(--wl-line-2) !important;
  color: var(--wl-blue-ink) !important;
  box-shadow: none !important;
}
body.wr-dark .btn-refresh:hover,
body.wr-dark .btn-export-excel:hover,
body.wr-dark .btn-show-data:hover {
  background: var(--wl-blue-a06) !important;
  border-color: var(--wl-line-hot) !important;
  color: var(--wl-blue-deep) !important;
}

/* ── 25.10 ปุ่มที่ไล่สีไว้ใน style="" ตรง ๆ ──
   กฎ 25.2 จับไม่ได้เพราะสีอยู่ข้างใน linear-gradient() ไม่ได้ตามหลัง background: ทันที
   (ปุ่มค้นหาช่วงวันที่ใน drug-dealer-dashboard — ขาวบนไล่สีได้ 4.36:1) */
body.wr-dark [style*="linear-gradient(135deg,#3b82f6" i],
body.wr-dark [style*="linear-gradient(135deg, #3b82f6" i] {
  background: linear-gradient(135deg, var(--wl-blue), var(--wl-blue-ink)) !important;   /* 5.2-6.7:1 */
  color: #fff !important;
}

/* ── 25.11 ยกเว้นให้แบนเนอร์กรมท่าที่เขียนไล่สีไว้ใน style="" ──
   กฎ 25.1 ทำให้เทาอ่อนทุกจุดเข้มขึ้น ซึ่งถูกต้องเมื่ออยู่บนพื้นขาว
   แต่หัวเรื่องบางหน้า (incident-report) เป็นแถบกรมท่าที่เขียนสีไว้ตรง ๆ ใน HTML
   ข้อความข้างในต้องกลับไปเป็นสีอ่อนเหมือนเดิม ไม่งั้นเทาเข้มบนกรมท่าเหลือ 2.5:1
   *** ต้องอยู่หลัง 25.1 เสมอ — specificity เท่ากันบางคู่ ตัวหลังจึงเป็นตัวชนะ ***

   *** :not([style*="background"]) สำคัญมาก — ในแถบเดียวกันมีปุ่ม "กลับหน้าค้นหา"
   ที่เป็นเม็ดยาพื้นขาวตัวหนังสือกรมท่า ถ้าเหวี่ยงแหทับสีขาวให้ทุก element
   ที่มี color: ปุ่มนั้นจะกลายเป็นขาวบนขาว */
body.wr-dark [style*="linear-gradient(135deg,#0d1b4b" i] [style*="color:" i]:not([style*="background" i]),
body.wr-dark [style*="linear-gradient(135deg, #0d1b4b" i] [style*="color:" i]:not([style*="background" i]),
body.wr-dark [style*="linear-gradient(135deg,#0d1b4b" i] .subtitle,
body.wr-dark [style*="linear-gradient(135deg, #0d1b4b" i] .subtitle {
  color: rgba(255, 255, 255, .82) !important;    /* 11.9:1 บนกรมท่า */
}
body.wr-dark [style*="linear-gradient(135deg,#0d1b4b" i] h1,
body.wr-dark [style*="linear-gradient(135deg, #0d1b4b" i] h1 { color: #fff !important; }

/* ── 25.12 เก็บตกชุดสุดท้าย ── */
/* ป้ายบอกตำแหน่งโปร่งขาวอีกระดับที่ 25.1 ยังไม่ได้ครอบ */
body.wr-dark [style*="rgba(255,255,255,.55)"],
body.wr-dark [style*="rgba(255,255,255,0.55)"],
body.wr-dark [style*="rgba(255, 255, 255, 0.55)"] { color: var(--wl-muted) !important; }   /* 5.4:1 */

/* เส้นทางนำทางของฟอร์มส่งต่อ — #64748b บนพื้นเทาฟ้าได้ 4.15:1 */
body.wr-dark .rff-breadcrumb,
body.wr-dark .rff-breadcrumb span { color: var(--wl-muted) !important; }                   /* 4.8:1 */

/* ปุ่มโครงร่างสีความหมาย — bootstrap ตั้ง #dc3545 ไว้ซึ่งได้แค่ 4.45:1 บนพื้นขาว */
body.wr-dark .btn-outline-danger  { border: 1px solid var(--wl-red-line) !important; color: var(--wl-red-ink) !important; background: var(--wl-surface) !important; }
body.wr-dark .btn-outline-danger:hover  { background: var(--wl-red) !important; border-color: var(--wl-red) !important; color: #fff !important; }
body.wr-dark .btn-outline-success { border: 1px solid var(--wl-green-line) !important; color: var(--wl-green-ink) !important; background: var(--wl-surface) !important; }
body.wr-dark .btn-outline-success:hover { background: var(--wl-green) !important; border-color: var(--wl-green) !important; color: #fff !important; }
body.wr-dark .btn-outline-warning { border: 1px solid var(--wl-amber-line) !important; color: var(--wl-amber-ink) !important; background: var(--wl-surface) !important; }
body.wr-dark .btn-outline-warning:hover { background: var(--wl-amber) !important; border-color: var(--wl-amber) !important; color: #fff !important; }

/* ── 25.13 ตัวแสดงผังเครือข่าย (referral-network) — จอมืดโดยตั้งใจ ──
   หน้านี้วาดกราฟความสัมพันธ์ลงบนผืนมืด ซึ่งเป็นแบบแผนปกติของงาน network graph
   (เส้นเชื่อมและโหนดสีสดอ่านง่ายกว่าบนพื้นเข้ม) จึงคง "จอ" ไว้เป็นสีเข้ม
   แต่ตัวหนังสือกำกับของหน้าใช้เทาเข้ม #64748b/#475569 ซึ่งบนพื้นมืดเหลือ 2.4-4.1:1
   ยกให้สว่างขึ้นทั้งชุด — ยกเว้นเมื่อผู้ใช้สลับเป็นโหมดสว่างของหน้าเอง (body.nw-light) */
body.wr-dark:not(.nw-light) .nw-ctl label,
body.wr-dark:not(.nw-light) .nw-panel-sub,
body.wr-dark:not(.nw-light) .nw-metric-label,
body.wr-dark:not(.nw-light) .nw-fields dt,
body.wr-dark:not(.nw-light) .nw-li-tag,
body.wr-dark:not(.nw-light) .nw-field-label,
body.wr-dark:not(.nw-light) .nw-legend,
body.wr-dark:not(.nw-light) .nw-stat-label,
body.wr-dark:not(.nw-light) .nw-overlay-sub { color: #94a3b8 !important; }   /* 7.0-7.7:1 */
body.wr-dark:not(.nw-light) .nw-node-meta,
body.wr-dark:not(.nw-light) .nw-cnode-sub { fill: #94a3b8 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   26) กรมท่าเดิม (#0d1b4b) → สีตราสัญลักษณ์ (--wl-navy)
   ---------------------------------------------------------------------------
   ตอนที่ยังไม่ได้ดูดสีจากโลโก้ ระบบใช้กรมท่า #0d1b4b เป็นสีแบรนด์ และค่านี้
   ถูกเขียนกระจายไว้ตรง ๆ ทั้งใน style="" ของหน้า (แบนเนอร์หัวเรื่อง หัวตาราง
   ป้ายต่าง ๆ รวมกว่า 40 จุด) และในไฟล์ CSS เฉพาะหน้า
   ถ้าเปลี่ยนแค่แถบซ้าย จะกลายเป็นน้ำเงินสองเฉดวางติดกัน — เห็นชัดว่าเพี้ยน
   ส่วนนี้จึงกวาดทุกจุดที่เคยเป็น #0d1b4b ให้มาเป็นสีเดียวกับโลโก้

   *** แยกกฎ "พื้น" กับ "ตัวหนังสือ" ออกจากกันเด็ดขาด ***
   ในหน้าเดียวกันมีทั้ง background:#0d1b4b (แบนเนอร์) และ color:#0d1b4b
   (หัวข้อบนการ์ดขาว รวม 23 จุด) ถ้าใช้ตัวเลือกกว้าง ๆ แบบ [style*="#0d1b4b"]
   แล้วสั่ง background หัวข้อที่เป็นแค่ "ตัวหนังสือสีกรมท่า" จะกลายเป็นบล็อกทึบ
   ═══════════════════════════════════════════════════════════════════════════ */

/* พื้นทึบ */
body.wr-dark [style*="background:#0d1b4b" i],
body.wr-dark [style*="background: #0d1b4b" i] { background: var(--wl-navy) !important; }

/* พื้นไล่สี — จับที่ "มี linear-gradient และมี #0d1b4b" จึงครอบทุกรูปแบบที่หน้าเขียนไว้
   (#0d1b4b→#1a3a7a, →#1a2f6b, →#1e3a6e ทั้งแบบมีและไม่มีเว้นวรรค/หน่วย %) */
body.wr-dark [style*="linear-gradient" i][style*="#0d1b4b" i] {
  background: linear-gradient(135deg, var(--wl-navy) 0%, var(--wl-navy-3) 100%) !important;
}

/* ตัวหนังสือ */
body.wr-dark [style*="color:#0d1b4b" i],
body.wr-dark [style*="color: #0d1b4b" i] { color: var(--wl-navy) !important; }   /* 11.8:1 บนพื้นขาว */

/* แถบหัวของกล่องส่งต่อ (css/referral-embed.css:54) — ไล่สีกรมท่าเก่าในไฟล์ CSS
   ตัวเลือก [style*=...] ไปไม่ถึงเพราะไม่ได้เขียนไว้ใน style="" ต้องระบุคลาสตรง ๆ */
body.wr-dark .rfe-bar {
  background: linear-gradient(135deg, var(--wl-navy) 0%, var(--wl-navy-3) 100%) !important;
  box-shadow: 0 2px 10px rgba(27, 38, 81, .20) !important;
}

/* ── 25.14 ข้อความเวลา/ช่วงวันที่ท้ายการ์ด ──
   หลายหน้าใช้ #64748b (slate-500) ซึ่งบนพื้นเทาฟ้าอ่อนของการ์ดได้ 4.14-4.45:1
   ยังไม่ถึง 4.5 — ขยับมาใช้โทเคนเทาของธีมที่คุมค่าไว้แล้ว */
body.wr-dark .timestamp,
body.wr-dark #rangeLabel,
body.wr-dark #lastUpdated,
body.wr-dark #timestampLabel { color: var(--wl-muted) !important; }   /* 4.8-5.4:1 */

/* ── 25.15 ข้อความบน topbar ที่หมวด 25.1 ทำให้เข้มเกินไป ──
   หมวด 25.1 เปลี่ยนขาวโปร่งทุกจุดให้เป็นเทาเข้ม ซึ่งถูกต้องตอน topbar เป็นสีขาว
   ตอนนี้ topbar กลับมาเป็นกรมท่าแล้ว ป้ายบอกตำแหน่งที่หน้าเขียนไว้ใน style=""
   (activity-logs / permission-management / user-management) ต้องกลับไปเป็นสีอ่อน
   *** ต้องอยู่หลัง 25.1 และมี .wr-topbar นำหน้าเพื่อให้ชนะทั้งลำดับและ specificity *** */
body.wr-dark .wr-topbar [style*="rgba(255,255,255,.5)"],
body.wr-dark .wr-topbar [style*="rgba(255,255,255,0.5)"],
body.wr-dark .wr-topbar [style*="rgba(255,255,255,.55)"],
body.wr-dark .wr-topbar [style*="rgba(255, 255, 255, 0.5)"],
body.wr-dark .wr-topbar [style*="rgba(255,255,255,.6)"],
body.wr-dark .wr-topbar [style*="rgba(255,255,255,.65)"],
body.wr-dark .wr-topbar [style*="rgba(255,255,255,.7)"] { color: rgba(255, 255, 255, .78) !important; }   /* 7.9:1 */

/* ลิงก์/ตัวหนังสือทั่วไปที่ตกค้างบน topbar — กันกรณีหน้าไหนใส่สีเข้มไว้เอง */
body.wr-dark .wr-topbar a:not(.btn):not(.profile-btn) { color: rgba(255, 255, 255, .88) !important; }
body.wr-dark .wr-topbar a:not(.btn):not(.profile-btn):hover { color: var(--wl-gold-lt) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   27) มุมมองที่ซ่อนอยู่ (view ที่สลับด้วย JS)
   ---------------------------------------------------------------------------
   warroom.html มี 6 มุมมองในหน้าเดียว (search / form / summary / colc /
   province-summary / most-wanted) สลับกันด้วย JS ไม่ใช่คนละ URL
   การตรวจธีมรอบก่อนเห็นแค่มุมมองแรกที่เปิดมา ของในมุมมองอื่นจึงหลุดไป
   ส่วนนี้เก็บที่เหลือทั้งหมดหลังจากเปิดทุกมุมมองออกมาวัดจริง
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 27.1 แถบหัวเรื่องของมุมมองสรุป ──
   .summary-header-card เขียนไล่สีม่วง #667EEA→#764BA2 ไว้ใน style="" คู่กับ
   ตัวหนังสือขาว ส่วนที่ 6 ดึงมาเป็นการ์ดขาวจึงเหลือขาวบนขาว
   ดึงเป็นแบนเนอร์กรมท่าชุดเดียวกับ .form-page-header แทน — ได้ทั้งอ่านออก
   และเลิกมีสีม่วงหลุดจานสีอยู่หน้าเดียว */
body.wr-dark .summary-header-card {
  background: linear-gradient(135deg, var(--wl-navy) 0%, var(--wl-navy-3) 100%) !important;
  border: none !important;
  box-shadow: var(--wl-shadow-md) !important;
}
body.wr-dark .summary-header-card h1,
body.wr-dark .summary-header-card h2,
body.wr-dark .summary-header-card [style*="color: #fff" i],
body.wr-dark .summary-header-card [style*="color:#fff" i] { color: #ffffff !important; }      /* 14.8:1 */
body.wr-dark .summary-header-card p,
body.wr-dark .summary-header-card [style*="rgba(255,255,255,0.9)"] { color: rgba(255, 255, 255, .88) !important; }
body.wr-dark .summary-header-card .badge { background: rgba(255, 255, 255, .22) !important; color: #fff !important; border-color: rgba(255, 255, 255, .40) !important; }

/* ── 27.2 หัวตารางที่เขียนสีขาวไว้ที่ <th> โดยตรง ──
   js/warroom-table.js:106 ใส่คลาส .wrt-keep-head ให้ตารางที่ <th> มีสีพื้นของตัวเอง
   เพื่อยกเว้นจากธีมกลาง แต่กฎหัวตารางในส่วนที่ 10 ของไฟล์นี้ specificity สูงกว่า
   จึงทาพื้นเป็นสีอ่อนไปแล้ว เหลือแต่ color:#fff ที่เขียนไว้ใน style= ของ <th>
   บังคับให้เป็นกรมท่าตามหัวตารางปกติ (ทั้งระบบจะได้มีหัวตารางแบบเดียว) */
body.wr-dark table th[style*="color:#fff" i],
body.wr-dark table th[style*="color: #fff" i],
body.wr-dark table th[style*="color:#ffffff" i],
body.wr-dark table th[style*="color: #ffffff" i] { color: var(--wl-navy) !important; }        /* 14.8:1 */

/* ── 27.3 พื้นสีสดที่เขียนเป็น background-color (ส่วนที่ 25.2 จับเฉพาะ background) ── */
body.wr-dark [style*="background-color:#0d9488" i], body.wr-dark [style*="background-color: #0d9488" i],
body.wr-dark [style*="background-color:#14b8a6" i], body.wr-dark [style*="background-color: #14b8a6" i] { background-color: #0f766e !important; border-color: #0f766e !important; color: #fff !important; }   /* 5.5:1 */
body.wr-dark [style*="background-color:#10b981" i], body.wr-dark [style*="background-color: #10b981" i] { background-color: var(--wl-green-ink) !important; border-color: var(--wl-green-ink) !important; color: #fff !important; }
body.wr-dark [style*="background-color:#f59e0b" i], body.wr-dark [style*="background-color: #f59e0b" i] { background-color: var(--wl-gold) !important; border-color: var(--wl-gold) !important; color: #fff !important; }
body.wr-dark [style*="background-color:#3b82f6" i], body.wr-dark [style*="background-color: #3b82f6" i] { background-color: var(--wl-blue-ink) !important; border-color: var(--wl-blue-ink) !important; color: #fff !important; }

/* ── 27.4 ตัวหนังสือสถานะสีสด — สดเกินไปสำหรับพื้นขาว (2.1-2.5:1) ── */
body.wr-dark .imp-current.imp-conflict { color: var(--wl-gold) !important; }                  /* 4.9:1 */
body.wr-dark [style*="color:#f59e0b" i], body.wr-dark [style*="color: #f59e0b" i],
body.wr-dark [style*="color:#fbbf24" i], body.wr-dark [style*="color: #fbbf24" i] { color: var(--wl-gold) !important; }
body.wr-dark [style*="color:#10b981" i], body.wr-dark [style*="color: #10b981" i],
body.wr-dark [style*="color:#22c55e" i], body.wr-dark [style*="color: #22c55e" i] { color: var(--wl-green-ink) !important; }

/* ── 27.5 ปุ่มสลับโหมดตาราง (มุมมอง ColC / สรุปรายจังหวัด) ──
   เขียนไว้เป็นฟิล์มขาวโปร่ง + ตัวหนังสือขาว สำหรับวางบนแถบสีเข้ม
   บนพื้นสว่างต้องเป็นปุ่มขาวขอบเทา + ตัวหนังสือเข้ม */
body.wr-dark .colc-mode-btn.inactive {
  background: var(--wl-surface) !important;
  color: var(--wl-dim) !important;                                                            /* 7.4:1 */
  border-color: var(--wl-line-2) !important;
  backdrop-filter: none !important;
}
body.wr-dark .colc-mode-btn.inactive:hover {
  background: var(--wl-blue-a06) !important;
  color: var(--wl-blue-deep) !important;
  border-color: var(--wl-line-hot) !important;
}
body.wr-dark .colc-mode-btn.active {
  background: var(--wl-blue) !important;
  color: #fff !important;
  border-color: var(--wl-blue-ink) !important;
}

/* ── 27.6 สองกฎสุดท้ายที่ชนะด้วย specificity ไม่ใช่ลำดับ ──
   ทั้งคู่อยู่ใน <style> ของ warroom.html ซึ่งมาหลัง <link> อยู่แล้ว
   จึงต้องเขียนตัวเลือกให้ "หนัก" กว่าจริง ๆ ไม่ใช่แค่วางทีหลัง

   ก) .summary-table thead th[rowspan="2"] = (0,2,3) เท่ากับกฎหัวตารางในส่วนที่ 10
      พอดี ตัวที่มาทีหลัง (ของหน้า) จึงชนะ → เติม [rowspan] เข้าไปให้เป็น (0,3,3)
   ข) #colc-view .colc-mode-btn.inactive = (1,2,0) มี id นำหน้า
      กฎ body.wr-dark .colc-mode-btn.inactive (0,3,0) สู้ไม่ได้ → ต้องใส่ id เหมือนกัน */
body.wr-dark .summary-table thead th,
body.wr-dark .summary-table thead th[rowspan],
body.wr-dark .summary-table thead th[colspan] {
  background: linear-gradient(180deg, #eef4fc 0%, #e5edf8 100%) !important;
  color: var(--wl-navy) !important;                      /* 14.8:1 */
  border-color: #dde6f2 !important;
}
body.wr-dark .summary-table tfoot td,
body.wr-dark .summary-table tfoot th {
  background: #eef2f9 !important;
  color: var(--wl-navy) !important;
}

body.wr-dark #colc-view .colc-mode-btn.inactive,
body.wr-dark #province-summary-view .colc-mode-btn.inactive {
  background: var(--wl-surface) !important;
  color: var(--wl-dim) !important;                       /* 7.4:1 */
  border-color: var(--wl-line-2) !important;
}
body.wr-dark #colc-view .colc-mode-btn.active,
body.wr-dark #province-summary-view .colc-mode-btn.active {
  background: var(--wl-blue) !important;
  color: #fff !important;
  border-color: var(--wl-blue-ink) !important;
}

/* ── 27.7 หัวตารางที่บังคับสีขาวไว้ระดับ id ──
   warroom.html มีกฎแบบ  #colc-table-detailed thead th { color:#fff !important }
   ซึ่ง specificity (1,0,2) ชนะกฎหัวตารางกลางในส่วนที่ 10 (0,2,3) เสมอ
   ต้องเขียนด้วย id เหมือนกันถึงจะทับได้ → (1,1,2)

   *** ทำเฉพาะ "หัวตาราง" เท่านั้น ***
   ในไฟล์เดียวกันยังมีกฎ id ที่สั่ง color:#fff อีก 8 จุด (ปุ่มบันทึก ปุ่มลบ
   วงกลมขั้นตอน ไอคอนหัวข้อ ชิปตัวกรอง) — พวกนั้นอยู่บนพื้นสีทึบซึ่งยังเป็นสีอยู่
   ตัวหนังสือขาวจึงถูกต้องแล้ว ห้ามเหวี่ยงแหทับ */
body.wr-dark #summary-view thead th,
body.wr-dark #colc-view thead th,
body.wr-dark #colc-table-detailed thead th,
body.wr-dark #colc-table-compact thead th,
body.wr-dark #colc-table-combined thead th,
body.wr-dark #mw-summary-table thead th,
body.wr-dark #province-summary-table thead th {
  background: linear-gradient(180deg, #eef4fc 0%, #e5edf8 100%) !important;
  color: var(--wl-navy) !important;                    /* 14.8:1 */
  border-color: #dde6f2 !important;
}

/* ── 27.8 เก็บตกสองจุดสุดท้าย ── */
body.wr-dark #paginationInfo { color: var(--wl-muted) !important; }          /* 4.8:1 */
/* การ์ดพรีวิวโปรไฟล์เป็นพื้นกรมท่า — อีเมลจางไปหน่อย (4.27:1) */
body.wr-dark #profilePreviewEmail { color: rgba(255, 255, 255, .80) !important; }   /* 7.0:1 */

/* ═══════════════════════════════════════════════════════════════════════════
   28) สถานะกำลังโหลด (skeleton) และสถานะว่างเปล่า
   ---------------------------------------------------------------------------
   เดิมทั้งระบบบอกว่ากำลังโหลดด้วยข้อความ "กำลังโหลด..." (73 จุด) กับวงกลมหมุน
   (36 จุด) ทั้งสองแบบบอกแค่ "รอ" แต่ไม่บอกว่ากำลังจะได้อะไร ผู้ใช้จึงเห็นจอว่าง
   จนกว่าข้อมูลจะมา ซึ่งบนเครือข่ายราชการที่ API ช้าคือหลายวินาที

   skeleton แก้ตรงนี้ด้วยการวาด "โครงร่างของผลลัพธ์" ไว้ก่อน — ผู้ใช้เห็นทันที
   ว่ากำลังจะได้ตาราง 10 แถว หรือการ์ด 4 ใบ ความรู้สึกว่าเร็วขึ้นมาจากตรงนี้
   ไม่ใช่จากความเร็วจริง (เวลาโหลดเท่าเดิมทุกประการ)

   ใช้ได้ 2 ทาง
     1. อัตโนมัติ — js/wr-ux.js เฝ้าดูแถวตารางที่เขียนว่า "กำลังโหลด"
        แล้วเปลี่ยนให้เอง ไม่ต้องแก้โค้ดของหน้า
     2. เรียกเอง — WRUX.skeleton(el, 'lines'|'table'|'cards')
                   WRUX.empty(el, { icon, title, hint, action })
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── แท่ง skeleton พื้นฐาน ──
   ไล่แสงวิ่งจากซ้ายไปขวา สีอ่อนกว่าพื้นการ์ดนิดเดียว ไม่ให้แย่งสายตา */
.wl-skel {
  background: linear-gradient(90deg, #e9eff7 25%, #f4f8fc 50%, #e9eff7 75%);
  background-size: 200% 100%;
  animation: wl-shimmer 1.15s linear infinite;
  border-radius: 5px;
  height: .7rem;
  display: block;
}
@keyframes wl-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ความกว้างหลายระดับ — แถวที่ยาวไม่เท่ากันทำให้ดูเหมือนข้อความจริง
   ถ้าทุกแท่งยาวเท่ากันหมดจะดูเป็นตารางสีเทา ไม่เหมือนเนื้อหา */
.wl-skel--90 { width: 90%; } .wl-skel--75 { width: 75%; }
.wl-skel--60 { width: 60%; } .wl-skel--45 { width: 45%; }
.wl-skel--30 { width: 30%; }

/* ── โครงร่างแบบแถวตาราง (ใช้แทนข้อความ "กำลังโหลด" ในเซลล์ colspan) ── */
.wl-skel-rows { display: flex; flex-direction: column; gap: .8rem; padding: .5rem .15rem; }
.wl-skel-row  { display: flex; align-items: center; gap: 1.1rem; }
.wl-skel-row > .wl-skel { flex: 1 1 0; }
/* คอลัมน์แรกมักเป็นลำดับ/รูป จึงแคบกว่าเพื่อน */
.wl-skel-row > .wl-skel:first-child { flex: 0 0 2.2rem; }

/* ── โครงร่างแบบย่อหน้า / การ์ด ── */
.wl-skel-lines { display: flex; flex-direction: column; gap: .7rem; padding: .3rem 0; }
.wl-skel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.wl-skel-card {
  border: 1px solid var(--wl-line);
  border-radius: var(--wl-r);
  padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: .7rem;
  background: var(--wl-surface);
}
.wl-skel-card .wl-skel:nth-child(2) { height: 1.6rem; }   /* ช่องตัวเลข KPI */

/* ── สถานะว่างเปล่า ──
   เดิมเป็นข้อความเปล่า "ไม่พบข้อมูล" ~20 จุด ซึ่งบอกแค่ว่า "ไม่มี"
   แต่ไม่บอกว่าทำไมและต้องทำอะไรต่อ */
.wl-empty { text-align: center; padding: 2.6rem 1rem; }
.wl-empty-icon {
  width: 52px; height: 52px;
  margin: 0 auto .85rem;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--wl-blue-a10);
  border: 1px solid rgba(37, 99, 235, .20);
  color: var(--wl-blue-ink);
  font-size: var(--wl-fs-lg);
}
.wl-empty-title {
  font-size: var(--wl-fs-base);
  font-weight: 600;
  color: var(--wl-navy);
  margin-bottom: .25rem;
}
.wl-empty-hint {
  font-size: var(--wl-fs-2xs);
  color: var(--wl-muted);
  max-width: 32rem;
  margin: 0 auto;
  line-height: 1.6;
}
.wl-empty-action { margin-top: 1rem; }
/* ชนิดของสถานะว่าง — สีไอคอนบอกว่าเป็น "ยังไม่ได้ค้น" หรือ "ค้นแล้วไม่เจอ" */
.wl-empty--search .wl-empty-icon { background: var(--wl-amber-tint); border-color: var(--wl-amber-line); color: var(--wl-amber-ink); }
.wl-empty--error  .wl-empty-icon { background: var(--wl-red-tint);   border-color: var(--wl-red-line);   color: var(--wl-red-ink); }

/* สถานะว่างของตารางรายงาน (css/warroom-table.css) ให้หน้าตาเดียวกัน */
body.wr-dark .wrt-empty { padding: 2.6rem 1rem !important; color: var(--wl-muted) !important; }
body.wr-dark .wrt-empty i { color: var(--wl-line-2) !important; opacity: 1 !important; }

/* ── เคารพการตั้งค่าลดการเคลื่อนไหว ──
   ไล่แสงวิ่งเป็นอนิเมชันวนไม่รู้จบ ซึ่งเป็นสิ่งที่ผู้ตั้งค่านี้ไม่ต้องการที่สุด
   ปิดการวิ่งแต่ยังคงรูปทรงไว้ ผู้ใช้จึงยังเห็นโครงร่างของผลลัพธ์เหมือนเดิม */
@media (prefers-reduced-motion: reduce) {
  .wl-skel { animation: none; background: #e9eff7; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   29) หัวเรื่องหน้า — รวมเป็นแบนเนอร์กรมท่าแบบเดียวทั้งระบบ
   ---------------------------------------------------------------------------
   .pm-head (จัดการสิทธิ์) และ .header-gradient (รายละเอียดผู้ป่วยจิตเวช) ถูกผูก
   เข้ามาทีหลัง — ตัวแรกเป็นแถว flex เปล่าไม่มีพื้น ตัวหลังเป็นไล่สีม่วงมุมโค้ง 24px
   ทั้งคู่ถูกเพิ่มเข้าไปใน "ทุกรายการตัวเลือก" ของหมวดนี้ ไม่ได้คัดลอกกฎซ้ำ
   แก้ค่าที่นี่ที่เดียวจึงเปลี่ยนตามกันหมด

   เดิมมีสองแบบปนกัน: การ์ดขาวขีดน้ำเงิน (.page-header / .rf-page-header /
   .il-header-card / .rp-header-card / .rff-header — 11 หน้า) กับแบนเนอร์กรมท่า
   (.form-page-header / .dm-page-header / .summary-header-card — 3 หน้า)
   ตอนนี้ใช้แบนเนอร์กรมท่าทั้งหมด เข้าชุดกับ topbar และ sidebar

   *** พลิกพื้นเป็นสีเข้มแล้ว ของ "ทุกอย่างข้างใน" ต้องพลิกตาม ***
   นี่คือจุดที่พลาดได้ง่ายที่สุด — ในหัวเรื่องพวกนี้มีทั้งหัวข้อ คำบรรยาย
   กล่องไอคอน ปุ่ม ลิงก์ และกรอบมุม HUD ซึ่งทุกตัวถูกตั้งสีไว้สำหรับพื้นขาว
   ถ้าเปลี่ยนแต่พื้น จะได้แบนเนอร์กรมท่าที่ข้างในอ่านไม่ออกทั้งแถบ
   ═══════════════════════════════════════════════════════════════════════════ */

/* รายการคลาสหัวเรื่องทั้งหมดของระบบ — เขียนรวมไว้ที่เดียว */
body.wr-dark .page-header,
body.wr-dark .pm-head,
body.wr-dark .header-gradient,
body.wr-dark .rf-page-header,
body.wr-dark .il-header-card,
body.wr-dark .rp-header-card,
body.wr-dark .rff-header,
body.wr-dark .summary-header-card,
body.wr-dark .form-page-header,
body.wr-dark .dm-page-header {
  background: linear-gradient(135deg, var(--wl-navy) 0%, var(--wl-navy-3) 100%) !important;
  border: none !important;
  border-radius: var(--wl-r) !important;
  box-shadow: var(--wl-shadow-md) !important;
  color: #ffffff !important;
  padding: 1.15rem 1.4rem !important;
}

/* ── ตัวหนังสือ ──
   ตัวเลือกไล่ลูกหลานทั้งหมด เพราะแต่ละหน้าใช้แท็กไม่เหมือนกัน (h1 บ้าง h2 บ้าง
   div เปล่า ๆ บ้าง) ถ้าไล่ระบุทีละแท็กจะตกหล่นแล้วเหลือตัวเข้มบนพื้นเข้ม
   ยกเว้น element ที่มีพื้นของตัวเอง (ปุ่ม/ชิป/เม็ดยา) ซึ่งจัดการแยกด้านล่าง */
body.wr-dark .page-header h1,
body.wr-dark .pm-head h1,
body.wr-dark .header-gradient h1, body.wr-dark .page-header h2,
body.wr-dark .pm-head h2,
body.wr-dark .header-gradient h2, body.wr-dark .page-header h3,
body.wr-dark .pm-head h3,
body.wr-dark .header-gradient h3,
body.wr-dark .rf-page-header h1, body.wr-dark .il-header-card h1, body.wr-dark .rp-header-card h1,
body.wr-dark .rff-header h1, body.wr-dark .summary-header-card h1, body.wr-dark .summary-header-card h2,
body.wr-dark .form-page-header h1, body.wr-dark .dm-page-header .title,
body.wr-dark .page-header .title,
body.wr-dark .pm-head .title,
body.wr-dark .header-gradient .title, body.wr-dark .rp-header-card .title {
  color: #ffffff !important;
  text-shadow: none !important;
}
body.wr-dark .page-header .subtitle,
body.wr-dark .pm-head .subtitle,
body.wr-dark .header-gradient .subtitle,
body.wr-dark .rf-page-header .subtitle,
body.wr-dark .il-header-card .subtitle,
body.wr-dark .rp-header-card .subtitle,
body.wr-dark .rff-header .subtitle,
body.wr-dark .summary-header-card .subtitle,
body.wr-dark .form-page-header .subtitle,
body.wr-dark .dm-page-header .subtitle,
body.wr-dark .page-header p,
body.wr-dark .pm-head p,
body.wr-dark .header-gradient p, body.wr-dark .summary-header-card p {
  color: rgba(255, 255, 255, .82) !important;      /* 7.8-10.4:1 */
  margin-top: .3rem !important;
  line-height: 1.5;
}
/* ไอคอนเล็กที่แทรกอยู่ในหัวข้อ/คำบรรยาย (bi-*) — ให้เป็นทองตราสัญลักษณ์
   จะได้แยกออกจากตัวหนังสือขาวและผูกกับแบรนด์ */
body.wr-dark .page-header > div > h1 > i,
body.wr-dark .pm-head > div > h1 > i,
body.wr-dark .header-gradient > div > h1 > i,
body.wr-dark .page-header .subtitle > i,
body.wr-dark .pm-head .subtitle > i,
body.wr-dark .header-gradient .subtitle > i,
body.wr-dark .rf-page-header .subtitle > i,
body.wr-dark .form-page-header .title i,
body.wr-dark .dm-page-header .title i { color: var(--wl-gold-lt) !important; }   /* 6.7-9.3:1 */

/* ── กล่องไอคอนหัวเรื่อง ──
   ส่วนที่ 6 ตั้งไว้เป็นฟ้าอ่อนสำหรับพื้นขาว บนกรมท่าต้องเป็นฟิล์มขาวโปร่ง
   (หลายหน้าตั้งไล่สีม่วง/คราม/เขียวไว้เองด้วย จึงต้องทับพื้นให้หมด) */
body.wr-dark .page-header .icon-box,
body.wr-dark .pm-head .icon-box,
body.wr-dark .header-gradient .icon-box,
body.wr-dark .rf-page-header .icon-box,
body.wr-dark .il-header-card .icon-box,
body.wr-dark .rp-header-card .icon-box,
body.wr-dark .rff-header .icon-box,
body.wr-dark .summary-header-card .icon-box,
body.wr-dark .form-page-header .icon-box {
  background: rgba(255, 255, 255, .14) !important;
  border: 1px solid rgba(255, 255, 255, .24) !important;
  color: #ffffff !important;                       /* 9.5:1 บนฟิล์ม */
  box-shadow: none !important;
}

/* ── ปุ่มในหัวเรื่อง ──
   ปุ่มน้ำเงินหลัก (#2563eb) บนแบนเนอร์กรมท่าแยกจากพื้นได้แค่ 2.07:1
   คือแทบมองไม่เห็นว่าเป็นปุ่ม จึงใช้ภาษาเดียวกับ topbar ซึ่งเป็นกรมท่าเหมือนกัน
     ปุ่มหลัก = เม็ดยาขาวทึบ ตัวหนังสือกรมท่า (14.8:1) เด่นที่สุดบนพื้นเข้ม
     ปุ่มรอง = ฟิล์มขาวโปร่ง ตัวหนังสือขาว (8.0-10.9:1) */
body.wr-dark .page-header .btn-primary,
body.wr-dark .pm-head .btn-primary,
body.wr-dark .header-gradient .btn-primary,
body.wr-dark .page-header .rf-btn-primary,
body.wr-dark .pm-head .rf-btn-primary,
body.wr-dark .header-gradient .rf-btn-primary,
body.wr-dark .rf-page-header .rf-btn-primary,
body.wr-dark .il-header-card .btn-primary,
body.wr-dark .rff-header .rf-btn-primary,
body.wr-dark .form-page-header .btn-primary,
body.wr-dark .page-header .filter-toggle-btn,
body.wr-dark .pm-head .filter-toggle-btn,
body.wr-dark .header-gradient .filter-toggle-btn,
body.wr-dark .page-header .btn-warning,
body.wr-dark .pm-head .btn-warning,
body.wr-dark .header-gradient .btn-warning,
body.wr-dark .page-header .btn-success ,
body.wr-dark .pm-head .btn-success ,
body.wr-dark .header-gradient .btn-success {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #ffffff !important;
  color: var(--wl-navy) !important;                /* 14.8:1 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18) !important;
}
body.wr-dark .page-header .btn-primary:hover,
body.wr-dark .pm-head .btn-primary:hover,
body.wr-dark .header-gradient .btn-primary:hover,
body.wr-dark .page-header .filter-toggle-btn:hover,
body.wr-dark .pm-head .filter-toggle-btn:hover,
body.wr-dark .header-gradient .filter-toggle-btn:hover,
body.wr-dark .page-header .btn-warning:hover,
body.wr-dark .pm-head .btn-warning:hover,
body.wr-dark .header-gradient .btn-warning:hover,
body.wr-dark .page-header .btn-success:hover,
body.wr-dark .pm-head .btn-success:hover,
body.wr-dark .header-gradient .btn-success:hover,
body.wr-dark .rf-page-header .rf-btn-primary:hover,
body.wr-dark .form-page-header .btn-primary:hover {
  background: var(--wl-gold-lt) !important;
  border-color: var(--wl-gold-lt) !important;
  color: var(--wl-navy) !important;
}
body.wr-dark .page-header .btn-primary i,
body.wr-dark .pm-head .btn-primary i,
body.wr-dark .header-gradient .btn-primary i,
body.wr-dark .page-header .filter-toggle-btn i,
body.wr-dark .pm-head .filter-toggle-btn i,
body.wr-dark .header-gradient .filter-toggle-btn i,
body.wr-dark .page-header .btn-warning i,
body.wr-dark .pm-head .btn-warning i,
body.wr-dark .header-gradient .btn-warning i,
body.wr-dark .page-header .btn-success i ,
body.wr-dark .pm-head .btn-success i ,
body.wr-dark .header-gradient .btn-success i { color: inherit !important; }

/* ปุ่มรอง / ปุ่มโปร่ง / ปุ่มรีเฟรช ทุกตระกูลที่โผล่ในหัวเรื่อง */
body.wr-dark .page-header .btn,
body.wr-dark .pm-head .btn,
body.wr-dark .header-gradient .btn,
body.wr-dark .page-header .rf-btn,
body.wr-dark .pm-head .rf-btn,
body.wr-dark .header-gradient .rf-btn,
body.wr-dark .page-header .btn-refresh,
body.wr-dark .pm-head .btn-refresh,
body.wr-dark .header-gradient .btn-refresh,
body.wr-dark .page-header .refresh-btn,
body.wr-dark .pm-head .refresh-btn,
body.wr-dark .header-gradient .refresh-btn,
body.wr-dark .page-header .btn-back,
body.wr-dark .pm-head .btn-back,
body.wr-dark .header-gradient .btn-back,
body.wr-dark .rf-page-header .rf-btn,
body.wr-dark .il-header-card .btn,
body.wr-dark .rp-header-card .btn,
body.wr-dark .rff-header .rf-btn,
body.wr-dark .summary-header-card .btn,
body.wr-dark .form-page-header .btn:not([style*="background" i]),
body.wr-dark .dm-page-header .btn:not([style*="background" i]) {
  background: rgba(255, 255, 255, .12) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, .26) !important;
  color: #ffffff !important;                       /* 8.0-10.9:1 */
  box-shadow: none !important;
}
body.wr-dark .page-header .btn:hover,
body.wr-dark .pm-head .btn:hover,
body.wr-dark .header-gradient .btn:hover,
body.wr-dark .page-header .rf-btn:hover,
body.wr-dark .pm-head .rf-btn:hover,
body.wr-dark .header-gradient .rf-btn:hover,
body.wr-dark .page-header .btn-refresh:hover,
body.wr-dark .pm-head .btn-refresh:hover,
body.wr-dark .header-gradient .btn-refresh:hover,
body.wr-dark .page-header .refresh-btn:hover,
body.wr-dark .pm-head .refresh-btn:hover,
body.wr-dark .header-gradient .refresh-btn:hover,
body.wr-dark .rf-page-header .rf-btn:hover,
body.wr-dark .il-header-card .btn:hover,
body.wr-dark .rff-header .rf-btn:hover,
body.wr-dark .summary-header-card .btn:hover,
body.wr-dark .form-page-header .btn:hover,
body.wr-dark .dm-page-header .btn:hover {
  background: rgba(255, 255, 255, .22) !important;
  border-color: var(--wl-gold-lt) !important;
  color: var(--wl-gold-lt) !important;
}
body.wr-dark .page-header .btn i,
body.wr-dark .pm-head .btn i,
body.wr-dark .header-gradient .btn i,
body.wr-dark .page-header .rf-btn i,
body.wr-dark .pm-head .rf-btn i,
body.wr-dark .header-gradient .rf-btn i,
body.wr-dark .page-header .refresh-btn i,
body.wr-dark .pm-head .refresh-btn i,
body.wr-dark .header-gradient .refresh-btn i,
body.wr-dark .rf-page-header .rf-btn i,
body.wr-dark .form-page-header .btn i { color: inherit !important; }

/* ลิงก์ในหัวเรื่อง
   *** :not([style*="background"]) จำเป็น ***
   บางหน้าทำปุ่มด้วย <a> ที่มีพื้นขาวเป็นของตัวเอง ถ้าเหวี่ยงแหทับเป็นสีขาว
   ให้ทุกลิงก์ ปุ่มพวกนั้นจะกลายเป็นเม็ดยาขาวเปล่า ๆ ตัวหนังสือหายไปเลย
   พื้นมาได้สองทางจึงต้องกันสองแบบ
     1. เขียนใน style= ตรง ๆ  → กันด้วย :not([style*="background"])
        (เช่น "กลับหน้าค้นหา" ใน incident-dashboard / incident-report)
     2. มาจากคลาสใน CSS      → attribute selector มองไม่เห็น ต้องกันด้วยชื่อคลาส
        (เช่น a.detail-toggle ใน incident-situation-dashboard ที่ตั้ง background:#fff)
   รายการคลาสด้านล่างได้จากการไล่สแกนทุกหน้าในเบราว์เซอร์จริง หา element ที่มี
   พื้นทึบสว่างอยู่ในหัวเรื่อง แล้วดูว่าใช้ชื่อคลาสแนวไหนบ้าง ไม่ได้เดาเอา */
body.wr-dark .page-header a:not([style*="background" i]):not([class*="btn"]):not([class*="toggle"]):not([class*="chip"]):not([class*="pill"]):not([class*="badge"]):not([class*="tag"]),
body.wr-dark .pm-head a:not([style*="background" i]):not([class*="btn"]):not([class*="toggle"]):not([class*="chip"]):not([class*="pill"]):not([class*="badge"]):not([class*="tag"]),
body.wr-dark .header-gradient a:not([style*="background" i]):not([class*="btn"]):not([class*="toggle"]):not([class*="chip"]):not([class*="pill"]):not([class*="badge"]):not([class*="tag"]),
body.wr-dark .rf-page-header a:not([style*="background" i]):not([class*="btn"]):not([class*="toggle"]):not([class*="chip"]):not([class*="pill"]):not([class*="badge"]):not([class*="tag"]),
body.wr-dark .il-header-card a:not([style*="background" i]):not([class*="btn"]):not([class*="toggle"]):not([class*="chip"]):not([class*="pill"]):not([class*="badge"]):not([class*="tag"]),
body.wr-dark .rp-header-card a:not([style*="background" i]):not([class*="btn"]):not([class*="toggle"]):not([class*="chip"]):not([class*="pill"]):not([class*="badge"]):not([class*="tag"]),
body.wr-dark .rff-header a:not([style*="background" i]):not([class*="btn"]):not([class*="toggle"]):not([class*="chip"]):not([class*="pill"]):not([class*="badge"]):not([class*="tag"]),
body.wr-dark .summary-header-card a:not([style*="background" i]):not([class*="btn"]):not([class*="toggle"]):not([class*="chip"]):not([class*="pill"]):not([class*="badge"]):not([class*="tag"]),
body.wr-dark .form-page-header a:not([style*="background" i]):not([class*="btn"]):not([class*="toggle"]):not([class*="chip"]):not([class*="pill"]):not([class*="badge"]):not([class*="tag"]),
body.wr-dark .dm-page-header a:not([style*="background" i]):not([class*="btn"]):not([class*="toggle"]):not([class*="chip"]):not([class*="pill"]):not([class*="badge"]):not([class*="tag"]) { color: rgba(255, 255, 255, .90) !important; }

/* ป้าย/ชิปในหัวเรื่อง (เช่น "WAR ROOM • P4", จำนวนรายการ) */
body.wr-dark .page-header .badge,
body.wr-dark .pm-head .badge,
body.wr-dark .header-gradient .badge,
body.wr-dark .rf-page-header .badge,
body.wr-dark .il-header-card .badge,
body.wr-dark .summary-header-card .badge,
body.wr-dark .form-page-header .badge,
body.wr-dark .war-room-badge {
  background: rgba(255, 255, 255, .18) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .32) !important;
}

/* ช่องกรอก/ดรอปดาวน์ที่บางหน้าวางไว้ในหัวเรื่อง — คงพื้นขาวตัวหนังสือเข้มไว้
   อ่านง่ายอยู่แล้วบนพื้นกรมท่า แค่ทำขอบให้เห็นชัดขึ้น */
body.wr-dark .page-header .form-control,
body.wr-dark .pm-head .form-control,
body.wr-dark .header-gradient .form-control,
body.wr-dark .page-header .form-select,
body.wr-dark .pm-head .form-select,
body.wr-dark .header-gradient .form-select,
body.wr-dark .form-page-header .form-control,
body.wr-dark .form-page-header .form-select { border-color: rgba(255, 255, 255, .35) !important; }
body.wr-dark .page-header .form-label,
body.wr-dark .pm-head .form-label,
body.wr-dark .header-gradient .form-label,
body.wr-dark .form-page-header .form-label { color: rgba(255, 255, 255, .82) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   30) การ์ด — ผิวเดียวกันและขนาดเท่ากันทุกหน้า
   ---------------------------------------------------------------------------
   วัดจากเบราว์เซอร์จริงก่อนแก้ พบว่า
     · มุมโค้ง 5 ค่า      12px / 11.2px / 13.6px / 10px / 20px
     · padding 8 ค่า      12·16 / 16·20 / 10.4·14.4 / 20 / 9.6·13.6 / 12 / 0 / 24
     · เงา 5 แบบ          รวมทั้งการ์ดที่ไม่มีเงาเลย 21 ใบ
     · การ์ดตัวเลข KPI สูงไม่เท่ากันเลยสักหน้า — 67px (psych) ถึง 126px (data-management)
       ต่างกันเกือบเท่าตัว วางเรียงกันแล้วเห็นชัดว่าคนละชุด

   ส่วนนี้จึงทำสองเรื่องแยกกัน
     A. "ผิว"  — มุมโค้ง/ขอบ/เงา ให้เหมือนกันทุกใบ (ไม่แตะ padding เพราะการ์ด
        ที่มีตารางอยู่ข้างในต้องชิดขอบ ถ้ายัด padding จะเกิดกรอบซ้อนกรอบ)
     B. "ขนาด" — เฉพาะตระกูลการ์ดตัวเลข ให้ padding และความสูงขั้นต่ำเท่ากัน

   *** เขียนชื่อคลาสตรง ๆ ไม่ใช้ [class*=...] ***
   ตอนสำรวจใช้ regex จับคำว่า stat แล้วมันไปโดน .status-pill ซึ่งเป็นชิปเล็ก ๆ
   ไม่ใช่การ์ด ถ้าเผลอเอาไปใส่ในกฎ ชิปสถานะทุกอันจะกลายเป็นกล่องสูง 96px
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A. ผิวการ์ด — มุมโค้ง ขอบ เงา ให้เหมือนกันหมด ── */
body.wr-dark .card,
body.wr-dark .chart-card,
body.wr-dark .table-card,
body.wr-dark .dm-table-card,
body.wr-dark .glass-panel,
body.wr-dark .filter-panel,
body.wr-dark .rf-filter-panel,
body.wr-dark .form-section,
body.wr-dark .search-card,
body.wr-dark .pm-card,
body.wr-dark .pm-panel,
body.wr-dark .rff-card,
body.wr-dark .cat-section,
body.wr-dark .trend-card,
body.wr-dark .sit-mini-card,
body.wr-dark .wrt-boxed,
body.wr-dark .wrt-scrollbox,
body.wr-dark .summary-card,
body.wr-dark .stat-card,
body.wr-dark .dm-stat-card,
body.wr-dark .rf-card,
body.wr-dark .mw-stat,
body.wr-dark .pm-stat {
  border-radius: var(--wl-r) !important;          /* 12px เท่ากันหมด */
  border: 1px solid var(--wl-line) !important;
  box-shadow: var(--wl-shadow) !important;
}

/* ── B. การ์ดตัวเลข — ขนาดเท่ากันทุกหน้า ──
   ความสูงขั้นต่ำ 96px คือค่าที่ทดลองแล้วการ์ดส่วนใหญ่ "พอดี" โดยไม่ต้องยืด
   ใบที่เนื้อหาน้อย (แค่ป้าย+ตัวเลข) จะถูกดันขึ้นมาเท่าเพื่อน
   ใบที่เนื้อหาเยอะจะไม่ถูกบีบ เพราะเป็น min-height ไม่ใช่ height
   จัดกลางแนวตั้งด้วย flex เพื่อให้ใบที่ถูกดันไม่มีที่ว่างกองอยู่ด้านล่างใบเดียว */
body.wr-dark .summary-card,
body.wr-dark .stat-card,
body.wr-dark .dm-stat-card,
body.wr-dark .rf-card,
body.wr-dark .mw-stat,
body.wr-dark .pm-stat {
  padding: 1rem 1.25rem !important;   /* 16px 20px — ค่าเดียวกับการ์ดเนื้อหาส่วนใหญ่ */
  min-height: 104px;
  box-sizing: border-box;
}

/* ── ป้ายกำกับการ์ดตัวเลข: จำกัด 2 บรรทัด ──
   สาเหตุที่การ์ดในหน้าจัดการข้อมูลสูง 124px ขณะที่หน้าอื่น 96px ไม่ใช่เรื่องสไตล์
   แต่เพราะมีป้ายเดียวยาวเกิน ("ผู้ป่วยจิตเวช (นับรวมทุกกลุ่ม...)") ตัดเป็น 3 บรรทัด
   แล้ว grid ดันการ์ดทั้งแถวสูงตามใบที่สูงสุด — ใบอื่นที่ป้ายบรรทัดเดียวก็โดนยืดไปด้วย

   จำกัด 2 บรรทัดแล้วใส่จุดไข่ปลา ข้อความเต็มยังอ่านได้จากการชี้เมาส์
   (js/wr-ux.js เติม title= ให้อัตโนมัติเฉพาะป้ายที่ถูกตัดจริง) */
body.wr-dark .summary-card .card-label,
body.wr-dark .stat-card .stat-label,
body.wr-dark .dm-stat-card .dm-stat-label,
body.wr-dark .rf-card .rf-card-label,
body.wr-dark .mw-stat .mw-stat-label,
body.wr-dark .pm-stat .pm-hint {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* จัดกลางแนวตั้งเฉพาะใบที่วางเนื้อหาเป็นแถวเดียว (ไอคอน + ข้อความ)
   ใบที่จัดเป็นคอลัมน์อยู่แล้วปล่อยตามเดิม ไม่งั้นระยะข้างในจะเพี้ยน */
body.wr-dark .summary-card,
body.wr-dark .rf-card,
body.wr-dark .dm-stat-card { display: flex; align-items: center; }

/* หัวการ์ดของ Bootstrap — ให้มุมบนโค้งตามการ์ดเสมอ
   หลายหน้าตั้ง border-radius ที่ตัวการ์ดแต่ลืมหัว ทำให้เห็นมุมเหลี่ยมโผล่ */
body.wr-dark .card > .card-header:first-child {
  border-top-left-radius: calc(var(--wl-r) - 1px) !important;
  border-top-right-radius: calc(var(--wl-r) - 1px) !important;
}
body.wr-dark .card > .card-footer:last-child {
  border-bottom-left-radius: calc(var(--wl-r) - 1px) !important;
  border-bottom-right-radius: calc(var(--wl-r) - 1px) !important;
}

/* การ์ดที่มีตารางเต็มใบ — ตารางต้องชิดขอบ ไม่งั้นเกิดกรอบซ้อนกรอบ */
body.wr-dark .table-card > .table-card-body,
body.wr-dark .dm-table-card > .wrt-scrollbox,
body.wr-dark .card > .wrt-scrollbox { padding: 0 !important; }

/* ── C. การ์ดตัวเลขที่ยังเป็น "บล็อกสีทึบ" — ดึงมาใช้ทรีตเมนต์เดียวกับที่เหลือ ──
   ส่วนที่ 7 แปลง .summary-card ทุกสีให้เป็น "การ์ดขาว + แถบสีบนหัว" ไปแล้ว
   แต่ referral-report ใช้ตระกูล .rf-card ซึ่งเป็นไล่สีทึบเต็มใบ ตัวหนังสือขาว
   วางเรียงกับหน้าอื่นแล้วเห็นชัดว่าคนละชุด ทั้งที่โครงข้างในเหมือนกันเป๊ะ
   (icon / label / value / sub) จึงย้ายมาใช้กฎเดียวกันได้ตรง ๆ
   สีประจำหมวดยังอยู่ครบ แค่ย้ายจาก "พื้นทั้งใบ" ไปเป็น "แถบบนหัว + ไอคอน + ตัวเลข" */
body.wr-dark .rf-card {
  background: var(--wl-surface) !important;
  background-image: none !important;
  color: var(--wl-text) !important;
  position: relative;
  overflow: hidden;
}
body.wr-dark .rf-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--wl-blue);
}
body.wr-dark .rf-card--red::before    { background: var(--wl-red); }
body.wr-dark .rf-card--blue::before   { background: var(--wl-blue); }
body.wr-dark .rf-card--green::before  { background: var(--wl-green); }
body.wr-dark .rf-card--purple::before { background: var(--wl-violet); }

body.wr-dark .rf-card .rf-card-icon { background: var(--wl-blue-a10) !important; color: var(--wl-blue-ink) !important; border: 1px solid rgba(37, 99, 235, .20); }
body.wr-dark .rf-card--red    .rf-card-icon { background: var(--wl-red-tint) !important;    color: var(--wl-red-ink) !important;    border-color: var(--wl-red-line); }
body.wr-dark .rf-card--green  .rf-card-icon { background: var(--wl-green-tint) !important;  color: var(--wl-green-ink) !important;  border-color: var(--wl-green-line); }
body.wr-dark .rf-card--purple .rf-card-icon { background: var(--wl-violet-tint) !important; color: var(--wl-violet-ink) !important; border-color: var(--wl-violet-line); }

body.wr-dark .rf-card .rf-card-label { color: var(--wl-muted) !important; opacity: 1 !important; }
body.wr-dark .rf-card .rf-card-sub   { color: var(--wl-muted) !important; opacity: 1 !important; }
body.wr-dark .rf-card .rf-card-value        { color: var(--wl-navy) !important; }
body.wr-dark .rf-card--red    .rf-card-value { color: var(--wl-red-ink) !important; }
body.wr-dark .rf-card--blue   .rf-card-value { color: var(--wl-blue-ink) !important; }
body.wr-dark .rf-card--green  .rf-card-value { color: var(--wl-green-ink) !important; }
body.wr-dark .rf-card--purple .rf-card-value { color: var(--wl-violet-ink) !important; }

/* สถานะ "เลือกอยู่" ของการ์ดกรองในหน้าจัดการข้อมูล — เดิมเป็นครีมอมทอง (#fffdf5)
   ซึ่งเป็นสีเดียวในระบบที่ใช้แบบนี้ เปลี่ยนเป็นฟ้าอ่อนให้ตรงกับสีเลือกที่อื่น */
body.wr-dark .dm-stat-card.active {
  background: var(--wl-blue-a06) !important;
  border-color: rgba(37, 99, 235, .30) !important;
  box-shadow: var(--wl-ring) !important;
}
/* พื้นฟ้าอ่อนของการ์ดที่เลือกอยู่ทำให้ป้ายสีเทา (--wl-muted) เหลือ 4.31:1
   เข้มขึ้นหนึ่งขั้นเฉพาะใบที่เลือก */
body.wr-dark .dm-stat-card.active .dm-stat-label { color: var(--wl-dim) !important; }   /* 5.9:1 */

/* ═══════════════════════════════════════════════════════════════════════════
   31) หน้าฟอร์ม — แถบขั้นตอนและหัวข้อส่วน ให้เหมือนกันทุกหน้า
   ---------------------------------------------------------------------------
   ระบบมีตัวช่วยกรอกแบบหลายขั้นตอนอยู่ 3 ชุด เขียนแยกกันคนละที่
     A. incident-report.html   .wizard-step / .step-circle / .step-line   (รางแนวนอน)
     B. warroom.html #form-view .ph-wstep / .ph-circle / .ph-line          (รางแนวนอน)
     C. referral-form.html     .rff-step / .rff-steps                      (รายการแนวตั้งในแถบข้าง)

   *** C ไม่ได้ถูกดัดให้เป็นรางแนวนอน *** มันคือ <aside> ในเลย์เอาต์ grid 320px + 1fr
   ที่ sticky อยู่ข้างซ้าย การเปลี่ยนเป็นรางแนวนอนคือการรื้อโครงหน้า ไม่ใช่การจัดสี
   จึงทำแค่ให้ "ภาษาสีและตัวอักษร" ชุดเดียวกัน ส่วนรูปแบบการวางคงไว้ตามเดิม

   วัดของจริงในเบราว์เซอร์แล้วพบว่า A กับ B ใช้ค่าสีต้นทางเดียวกันเป๊ะ
   (#1e3a7b / #2d52a8 / #4f8cff / #22c55e — ก๊อปกันมา) ที่เห็นต่างกันเพราะ
   ชั้นธีมบริดจ์ --primary/--success ของ A ไปแล้ว แต่ --ph-* ของ B ประกาศไว้ใน
   #form-view ซึ่ง specificity (1,0,0) บริดจ์ที่ :root เอาไม่อยู่
   แก้ที่ต้นทางคือบริดจ์ --ph-* ตัวเดียว สีทั้งรางก็ตรงกันทันที
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 31.1 บริดจ์โทเคนของ #form-view ── (1,1,1) ชนะ #form-view (1,0,0) */
body.wr-dark #form-view {
  --ph-primary:       var(--wl-blue);
  --ph-primary-light: var(--wl-blue-deep);
  --ph-accent:        var(--wl-blue-ink);
  --ph-success:       var(--wl-green);
  --ph-border:        var(--wl-line);
  --ph-muted:         var(--wl-muted);
}

/* ── 31.2 เรขาคณิตของวงกลมขั้นตอน — ค่าที่เหลือซึ่งเขียนตายตัว ไม่ผ่านโทเคน ──
   ขนาดวงตรงกันอยู่แล้ว (ปกติ 48px / ที่กำลังทำ 52px) ต่างกันแค่
   ความหนาขอบ (A 2px / B 3px) และพื้นวงที่ยังไม่ถึง (A เทาพื้นหน้า / B ขาว)
   เลือกขาว + ขอบ 2px เป็นค่ากลาง — วงขาวอ่านออกชัดกว่าบนพื้นเทาฟ้าของหน้า */
body.wr-dark .step-circle,
body.wr-dark #form-view .ph-circle {
  background: var(--wl-surface) !important;
  border: 2px solid var(--wl-line-2) !important;
  color: var(--wl-muted) !important;
  font-family: var(--wl-font) !important;
  font-weight: 700;
  box-shadow: none !important;
}
body.wr-dark .wizard-step.active .step-circle,
body.wr-dark #form-view .ph-wstep.active .ph-circle {
  background: var(--wl-blue) !important;
  border: 2px solid var(--wl-blue-ink) !important;
  color: #ffffff !important;                                  /* 5.2:1 */
  box-shadow: var(--wl-ring) !important;
}
body.wr-dark .wizard-step.completed .step-circle,
body.wr-dark #form-view .ph-wstep.completed .ph-circle {
  background: var(--wl-green-tint) !important;
  border: 2px solid var(--wl-green) !important;
  color: var(--wl-green-ink) !important;                      /* 5.5:1 */
}
/* ขั้นที่ยังล็อกอยู่ (incident-report ล็อกขั้นถัดไปจนกว่าจะกรอกขั้นก่อนหน้าเสร็จ
   ส่วน warroom ไม่ล็อก) เดิมพื้นเป็นเทาทึบ ทำให้สองหน้าดูคนละแบบทั้งที่เป็น
   ขั้น "ยังไม่ถึง" เหมือนกัน — ใช้พื้นขาวขอบเดียวกับขั้นปกติ แล้วบอกสถานะล็อก
   ด้วยตัวเลขที่จางลงกับเคอร์เซอร์แทน ยังแยกออกแต่ไม่ใช่คนละดีไซน์ */
body.wr-dark .wizard-step.locked .step-circle {
  background: var(--wl-surface) !important;
  border: 2px solid var(--wl-line-2) !important;
  color: #9aa9bf !important;
  cursor: not-allowed;
}

/* ป้ายใต้วงกลม */
body.wr-dark .step-label,
body.wr-dark #form-view .ph-slabel { color: var(--wl-muted) !important; font-weight: 600; }
body.wr-dark .wizard-step.active .step-label,
body.wr-dark #form-view .ph-wstep.active .ph-slabel { color: var(--wl-blue-deep) !important; font-weight: 700; }
body.wr-dark .wizard-step.completed .step-label,
body.wr-dark #form-view .ph-wstep.completed .ph-slabel { color: var(--wl-green-ink) !important; }
body.wr-dark .step-sublabel,
body.wr-dark #form-view .ph-ssub { color: var(--wl-muted) !important; }

/* เส้นเชื่อมระหว่างขั้น */
body.wr-dark .step-line,
body.wr-dark #form-view .ph-line {
  background: var(--wl-line-2) !important;
  height: 3px !important;
  border-radius: 2px !important;
}
body.wr-dark .step-line.done,
body.wr-dark #form-view .ph-line.done { background: var(--wl-green) !important; }

/* ── 31.3 กล่องไอคอนหัวข้อส่วน ──
   A ใช้พื้นอ่อนย้อมสี + ไอคอนสีเข้ม (ส่วนที่ 18 จัดไว้แล้ว)
   B ยังเป็นบล็อกไล่สีทึบ + ไอคอนขาว — ดึงมาเป็นแบบเดียวกับ A
   ตัวเลือกต้นทางคือ #form-view #ph-panels > .section-N > .card-header h3 > i:first-child
   = (2,1,4) จึงต้องนำหน้าด้วย body.wr-dark ให้เป็น (2,2,5) ถึงจะทับได้ */
body.wr-dark #form-view #ph-panels > .form-section-card > .card-header h3 > i:first-child {
  background: var(--wl-blue-a10) !important;
  background-image: none !important;
  border: 1px solid rgba(37, 99, 235, .22) !important;
  border-radius: 10px !important;
  color: var(--wl-blue-ink) !important;
  box-shadow: none !important;
}
body.wr-dark #form-view #ph-panels > .section-2 > .card-header h3 > i:first-child { background: var(--wl-violet-tint) !important; border-color: var(--wl-violet-line) !important; color: var(--wl-violet-ink) !important; }
body.wr-dark #form-view #ph-panels > .section-3 > .card-header h3 > i:first-child { background: var(--wl-amber-tint) !important;  border-color: var(--wl-amber-line) !important;  color: var(--wl-amber-ink) !important; }
body.wr-dark #form-view #ph-panels > .section-4 > .card-header h3 > i:first-child,
body.wr-dark #form-view #ph-panels > .section-6 > .card-header h3 > i:first-child { background: var(--wl-green-tint) !important; border-color: var(--wl-green-line) !important; color: var(--wl-green-ink) !important; }
body.wr-dark #form-view #ph-panels > .section-5 > .card-header h3 > i:first-child { background: var(--wl-red-tint) !important;    border-color: var(--wl-red-line) !important;    color: var(--wl-red-ink) !important; }

/* ข้อความหัวข้อส่วน — ใช้กรมท่าเหมือนหัวข้อแผงอื่นทั้งระบบ (ส่วนที่ 6)
   สีประจำหมวดสื่อผ่านกล่องไอคอนอยู่แล้ว ไม่ต้องย้อมตัวหนังสือซ้ำ */
body.wr-dark .section-title,
body.wr-dark #form-view #ph-panels > .form-section-card > .card-header h3 {
  color: var(--wl-navy) !important;                           /* 14.8:1 */
  font-size: var(--wl-fs-lg) !important;
  font-weight: 700 !important;
}

/* ── 31.4 รางแนวตั้งของ referral-form — จัดภาษาสีให้ตรงชุด (ไม่แตะเลย์เอาต์) ── */
body.wr-dark .rff-step.active { background: var(--wl-blue-a06) !important; border-color: rgba(37, 99, 235, .28) !important; color: var(--wl-blue-deep) !important; }
body.wr-dark .rff-step.active .rff-step-icon { background: var(--wl-blue) !important; background-image: none !important; color: #fff !important; }
body.wr-dark .rff-step.done .rff-step-icon,
body.wr-dark .rff-step.is-done .rff-step-icon { background: var(--wl-green-tint) !important; color: var(--wl-green-ink) !important; }
body.wr-dark .rff-step-icon { border-radius: var(--wl-r-sm) !important; }

/* ── 31.5 แบนเนอร์หัวเรื่องที่ไม่มีคลาส ──
   incident-report.html เขียนหัวเรื่องเป็น <header> ที่ใส่สไตล์ inline ล้วน ไม่มีคลาสเลย
   กฎในส่วนที่ 29 จึงไปไม่ถึง ทำให้มุมโค้ง 16px และ padding 16·24 ต่างจากหน้าอื่น (12px / 16·20)
   จับด้วยตัวเลือกตามสไตล์ที่มันเขียนไว้ — ขอบเขตแค่ <header> เท่านั้น กันไปโดนปุ่มที่ใช้ไล่สีเดียวกัน */
body.wr-dark header[style*="linear-gradient(135deg,#0d1b4b" i],
body.wr-dark header[style*="linear-gradient(135deg, #0d1b4b" i] {
  border-radius: var(--wl-r) !important;
  padding: 1.15rem 1.4rem !important;
  box-shadow: var(--wl-shadow-md) !important;
}

/* ── 31.6 ความจางของขั้นที่ล็อก ──
   incident-report ตั้ง .wizard-step.locked { opacity:.45 } ไว้ในหน้า ซึ่งชั้นธีมไม่เคยแตะ
   ทำให้ขั้น 2-6 ของหน้านั้นซีดกว่าขั้นเดียวกันใน warroom (opacity 1) อย่างเห็นได้ชัด
   ทั้งที่ผู้ใช้มองว่าเป็น "ขั้นที่ยังไม่ถึง" เหมือนกัน
   ยกขึ้นเป็น .8 — ยังหรี่กว่าขั้นที่กดได้พอให้รู้ว่าล็อก แต่ไม่ใช่คนละดีไซน์
   (pointer-events:none ของหน้ายังอยู่ครบ การกดข้ามขั้นยังทำไม่ได้เหมือนเดิม) */
body.wr-dark .wizard-step.locked { opacity: .8 !important; }

/* ── 31.7 แถบความคืบหน้าใต้ราง ──
   ทั้งสองหน้าเขียนโครงเดียวกัน (track 4px + fill ไล่สี 90deg) แต่ปลายทางคนละโทเคน
   ของ incident-report ไล่จาก --primary ไป --accent ซึ่งชั้นธีมบริดจ์ให้เป็นสีเดียวกันทั้งคู่
   กลายเป็นไล่สีที่ไม่ไล่ ส่วนของ warroom ไล่จริง — กำหนดให้ตรงกันทั้งคู่ */
body.wr-dark .step-progress,
body.wr-dark #form-view .ph-progress-track {
  background: var(--wl-line) !important;
  height: 4px !important;
  border-radius: 4px !important;
}
body.wr-dark .step-progress-fill,
body.wr-dark #form-view .ph-progress-fill {
  background: linear-gradient(90deg, var(--wl-blue), var(--wl-blue-deep)) !important;
  border-radius: 4px !important;
}
body.wr-dark .step-progress-text,
body.wr-dark #form-view .ph-progress-text { color: var(--wl-muted) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   32) หน้าจัดการสิทธิ์ และการเลื่อนซ้อนของพื้นที่เนื้อหา
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 32.1 พื้นที่เนื้อหาถูกเลื่อนสองชั้น ──
   css/warroom-theme.css ตั้งระยะเว้น sidebar ไว้ "สองทาง" เผื่อหน้าที่ไม่มี wrapper
     body            { padding-left: 220px }   ← เผื่อหน้าที่ไม่มี .wr-main-content
     .wr-main-content{ margin-left: 220px }
   หน้าที่มี wrapper จึงโดนเลื่อนซ้ำเป็น 440px — เนื้อหาหดและเบียดไปทางขวา
   หน้าอื่น 9 หน้าเขียน body{padding-left:0} แก้ไว้เองใน <style> ของหน้า
   แต่ permission-management ไม่ได้เขียน จึงเป็นหน้าเดียวที่ยังเพี้ยน
   (วัดได้ x=440 w=1050 ขณะที่หน้าอื่น x=220 w=1270)

   แก้ที่ต้นทางแทนการไปเขียนในหน้า — ถ้ามี wrapper อยู่แล้วก็ไม่ต้องมีระยะเว้นที่ body
   ใช้ :has() ซึ่งโปรเจกต์นี้ใช้อยู่แล้วในหน้า warroom (form-check:has(:checked))
   หน้าที่ไม่มี wrapper (import-users / psych_detail ฯลฯ) ยังได้ระยะเว้นเดิมครบ */
body.wr-dark:has(.wr-main-content) { padding-left: 0 !important; }

/* ── 32.2 ปุ่มบันทึกสีทอง ──
   หน้านี้ใช้ .btn-gold (#c8960c) เป็นปุ่มบันทึก ซึ่งเป็นสีเดียวในระบบที่ใช้แบบนี้
   ที่อื่นปุ่มบันทึกเป็นน้ำเงินหลักทั้งหมด (#save-new-btn ฯลฯ) — ดึงกลับมาให้ตรงกัน
   ทองในธีมนี้สงวนไว้ให้ตราสัญลักษณ์กับเส้นคาดใต้ topbar เท่านั้น */
body.wr-dark .btn-gold {
  background: linear-gradient(135deg, var(--wl-blue) 0%, var(--wl-blue-ink) 100%) !important;
  border: 1px solid var(--wl-blue-ink) !important;
  color: #ffffff !important;                       /* 5.2:1 */
}
body.wr-dark .btn-gold:hover {
  background: linear-gradient(135deg, var(--wl-blue-ink) 0%, var(--wl-blue-deep) 100%) !important;
  color: #ffffff !important;
}
body.wr-dark .btn-gold:disabled,
body.wr-dark .btn-gold.disabled {
  background: var(--wl-raise) !important;
  border-color: var(--wl-line) !important;
  color: #9aa9bf !important;
}

/* ── 32.3 ป้ายระดับสิทธิ์บน topbar ──
   js/permissions.js สร้าง .wr-perm-badge โดยฝังสีระดับลงใน style= ตรง ๆ
   สีชุดนั้นถูกปรับให้อ่านออกบน "ชิปพื้นอ่อน" (api/permissions.php) แต่ป้ายตัวนี้
   ไปอยู่บน topbar ซึ่งเป็นกรมท่า จึงเหลือ 2.2:1
   บน topbar ใช้ภาษาเดียวกับชิปอื่นที่นั่น (ฟิล์มขาวโปร่ง ตัวหนังสือขาว)
   ระดับยังอ่านได้จากตัวอักษร "L4 พญาแช่ · S4" และแถบข้างยังมีสีประจำระดับกำกับอยู่ */
body.wr-dark .wr-topbar .wr-perm-badge,
body.wr-dark .wr-topbar .wr-perm-badge strong {
  background: rgba(255, 255, 255, .16) !important;
  color: #ffffff !important;                       /* 8.7:1 บนฟิล์ม */
  border-color: rgba(255, 255, 255, .30) !important;
}

/* ── 32.4 ข้อความ "ยังไม่ระบุ" ในตาราง — #cbd5e1 บนพื้นขาวได้ 1.5:1 ── */
body.wr-dark .pm-none,
body.wr-dark .pm-empty-cell { color: var(--wl-muted) !important; }   /* 5.4:1 */

/* ── 32.5 ปุ่มบันทึกตอนยังไม่มีอะไรให้บันทึก — ตัวหนังสือจางไป 2.2:1 ── */
body.wr-dark .btn-gold:disabled,
body.wr-dark .btn-gold.disabled,
body.wr-dark .btn:disabled { color: var(--wl-muted) !important; }    /* 5.1:1 */
