/* ============================================================
   ชุดสีกลางของระบบ (รอบ BR) — ทุกหน้าดึงสีจากที่นี่ที่เดียว
   เปลี่ยนโหมด/โทน = เปลี่ยนค่าในไฟล์นี้ ไม่ต้องแก้หน้าไหนเลย

   วิธีคิด: สีถูกแยกเป็น "บทบาท" ไม่ใช่ "ชื่อสี"
     พื้น    bg (พื้นหน้า) · card (การ์ด) · card2 (พื้นรอง เช่นหัวตาราง)
     เส้น    line (เส้นหลัก) · line2 (เส้นเข้มกว่า)
     ตัวอักษร tx (หลัก) · tx2 (รอง) · tx3 (จาง)
     สีหลัก  ac (ปุ่ม/ลิงก์) · ac-d (เข้มขึ้น) · ac-tx (ตัวหนังสือสีหลัก)
             ac-soft (พื้นป้ายอ่อน) · ac-line (เส้นป้าย) · brand (แถบบนสุด)
     สถานะ   ok เขียว · warn ส้ม · bad แดง · info ฟ้าอมเขียว (แต่ละสีมี -tx -soft -line)

   โหมดมืดกลับด้านเฉพาะ "พื้น" กับ "ตัวอักษร" ส่วนสีสถานะใช้เฉดสว่างขึ้น
   เพื่อให้อ่านออกบนพื้นเข้ม (ตามหลัก contrast ไม่ต่ำกว่า 4.5:1 สำหรับตัวอักษร)
   ============================================================ */

/* ---------- โหมดสว่าง (ค่าตั้งต้น) ---------- */
:root{
  --bg:#f4f6fb;   --card:#ffffff; --card2:#f2f5fa;
  --line:#e3e8ef; --line2:#cfd8e6;
  --tx:#1c2b3a;   --tx2:#5f6c7d;  --tx3:#8a94a3;

  /* สีหลัก — ค่าเหล่านี้ถูกทับด้วยชุดโทนด้านล่าง */
  --brand:#0b2545;
  --ac:#1a73e8;   --ac-d:#1557b0; --ac-tx:#1a56b8;
  --ac-soft:#e8effd; --ac-line:#c9dcfa;

  --ok:#1e8e3e;   --ok-tx:#186b3d; --ok-soft:#e6f4ea; --ok-line:#bfe3c8;
  --warn:#e37400; --warn-tx:#8a5a00; --warn-soft:#fff3d6; --warn-line:#f0c98a;
  --bad:#d93025;  --bad-tx:#c53030; --bad-soft:#fdeaea; --bad-line:#f3c9c5;
  --info:#0e7490; --info-tx:#0b5a70; --info-soft:#e0f4f8; --info-line:#c8e8ef;

  --shadow:0 2px 10px rgba(11,37,69,.08);
  --shadow-lg:0 10px 30px rgba(11,37,69,.18);

  /* ชื่อเดิมที่หน้าเก่ายังเรียกใช้ — ชี้มาที่บทบาทใหม่ ไม่ต้องไล่แก้ทุกหน้า
     --navy เดิมถูกใช้เป็น "สีหัวข้อ" 83 จุด (h1/h3) แต่เป็นพื้นหลังแค่ 13 จุด
     จึงชี้ไปที่ตัวอักษรหลัก · 13 จุดที่เป็นพื้นถูกแก้เป็น --brand/--ac ไปแล้ว
     ถ้าชี้ --navy ไปที่ --brand หัวข้อทุกหน้าจะกลายเป็นเข้มบนเข้มในโหมดมืด */
  --navy:var(--tx); --blue:var(--ac); --blue-d:var(--ac-d);
  --grey:var(--tx2); --soft:var(--ac-soft);
  /* alias รุ่นเก่าที่ยังอยู่ในหน้าบางส่วน — ต้องชี้กลับ token ตามบทบาท
     ไม่ปล่อยให้ var() ตกไปใช้ fallback สีสว่างขณะเปิดโหมดมืด */
  --text:var(--tx); --muted:var(--tx2); --accent:var(--ac-d); --blue-soft:var(--ac-soft);
  --green:var(--ok); --amber:var(--warn); --red:var(--bad);

  color-scheme:light;
}

/* ---------- โหมดมืด ---------- */
[data-theme="dark"]{
  --bg:#0e1319;   --card:#171d26; --card2:#1e2530;
  --line:#2b3441; --line2:#3a4553;
  --tx:#e7edf4;   --tx2:#a3b0c0;  --tx3:#7c8797;

  --brand:#111926;
  /* สีที่ใช้ "ถมปุ่ม" ต้องเข้มพอให้ตัวหนังสือขาวอ่านออก (อัตราส่วนอย่างน้อย 4.5:1)
     เพราะทั้งระบบเขียน color:#fff ไว้ตายตัวบนปุ่มสีอยู่แล้ว ~100 จุด
     ส่วนสีที่ใช้ "เขียนตัวหนังสือ" (-tx) ใช้เฉดสว่างได้เต็มที่ เพราะอยู่บนพื้นมืด */
  --ac:#2f6fd0;   --ac-d:#4d88e0; --ac-tx:#8ab8ff;
  --ac-soft:#1b2c45; --ac-line:#2c4770;

  --ok:#1c7f3f;   --ok-tx:#6fd396; --ok-soft:#152a1e; --ok-line:#27492f;
  --warn:#9a6512; --warn-tx:#f0bd6b; --warn-soft:#2e2617; --warn-line:#4d3d1e;
  --bad:#c8362c;  --bad-tx:#ff9089; --bad-soft:#2e1a1a; --bad-line:#552b28;
  --info:#0f718f; --info-tx:#6fcde2; --info-soft:#132a31; --info-line:#255260;

  --shadow:0 2px 10px rgba(0,0,0,.45);
  --shadow-lg:0 10px 30px rgba(0,0,0,.55);

  color-scheme:dark;
}

/* ---------- โทนสี 5 ชุด (เปลี่ยนเฉพาะสีหลัก ไม่ยุ่งกับสีสถานะ) ---------- */
/* กรมท่า-น้ำเงิน = ค่าตั้งต้น ไม่ต้องประกาศซ้ำ */
[data-tone="green"]{
  --brand:#0d3b2e; --ac:#0e8f6e; --ac-d:#0a6b52; --ac-tx:#0a6b52;
  --ac-soft:#e2f5ef; --ac-line:#b9e3d6;
}
[data-theme="dark"][data-tone="green"]{
  --brand:#0f2019; --ac:#127a5e; --ac-d:#199a76; --ac-tx:#6fdcbb;
  --ac-soft:#132b24; --ac-line:#245043;
}
[data-tone="purple"]{
  --brand:#2c1a4d; --ac:#7040c8; --ac-d:#57309e; --ac-tx:#57309e;
  --ac-soft:#f0eafc; --ac-line:#d7c6f4;
}
[data-theme="dark"][data-tone="purple"]{
  --brand:#191330; --ac:#6b3fc4; --ac-d:#8258db; --ac-tx:#c3a8f8;
  --ac-soft:#231a3d; --ac-line:#3f2f66;
}
[data-tone="orange"]{
  --brand:#4a2410; --ac:#d4610f; --ac-d:#a8480a; --ac-tx:#a8480a;
  --ac-soft:#fdeee1; --ac-line:#f5cba8;
}
[data-theme="dark"][data-tone="orange"]{
  --brand:#241610; --ac:#b34e12; --ac-d:#d1651f; --ac-tx:#f8ae83;
  --ac-soft:#2f1e14; --ac-line:#573323;
}
[data-tone="graphite"]{
  --brand:#22282f; --ac:#4b5a6b; --ac-d:#374553; --ac-tx:#374553;
  --ac-soft:#eceff3; --ac-line:#ccd4dd;
}
[data-theme="dark"][data-tone="graphite"]{
  --brand:#15191e; --ac:#4a5b6d; --ac-d:#5d7086; --ac-tx:#b0bfcf;
  --ac-soft:#212832; --ac-line:#3a4552;
}

/* ---------- ปรับส่วนที่สีตายตัวยังเหลืออยู่ ให้เข้ากับโหมดมืด ---------- */
[data-theme="dark"]{
  /* ช่องกรอกที่ยังเขียน background:#fff ไว้ตรง ๆ ในบางหน้า */
  input,select,textarea{background:var(--card2);color:var(--tx);border-color:var(--line)}
  input::placeholder,textarea::placeholder{color:var(--tx3)}
  /* ปุ่มพื้นขาวแบบ ghost */
  button.ghost,.btn.ghost{background:var(--card2);color:var(--tx);border-color:var(--line)}
  button.danger{background:var(--bad-soft);color:var(--bad-tx);border-color:var(--bad-line)}
  /* รูปภาพ/โลโก้บนพื้นมืดให้นวลลงเล็กน้อย ไม่ให้ขาวจ้า */
  img[src$=".png"]{filter:brightness(.94)}
}
/* ตารางแถวสลับ/hover ที่หลายหน้าเขียนเป็นสีขาวนวล */
[data-theme="dark"] tr:hover td{background:var(--card2)}

/* ---------- กระดาษ A4 ต้องขาวเสมอ (ใบเสนอราคา ใบส่งของ สัญญา ฯลฯ) ---------- */
/* หน้าเอกสารไม่ได้ถูกแปลงเป็นตัวแปร จึงขาวอยู่แล้ว — กันไว้เผื่อฝังในหน้าอื่น */
[data-theme="dark"] .paper,[data-theme="dark"] .page{
  background:#fff;color:#111;
}
@media print{
  :root,[data-theme="dark"]{
    --bg:#fff; --card:#fff; --card2:#fff; --line:#666; --line2:#444;
    --tx:#000; --tx2:#333; --tx3:#555; color-scheme:light;
  }
  [data-theme="dark"] *{box-shadow:none!important}
}

/* ---------- ปุ่มสลับโหมด/โทน บนแถบเมนู ---------- */
.thmBtn{
  background:rgba(255,255,255,.16);color:#fff;border:1px solid transparent;
  border-radius:8px;padding:7px 10px;font-size:14px;cursor:pointer;line-height:1;
}
.thmBtn:hover{background:rgba(255,255,255,.28);filter:none}
.thmPop{
  position:absolute;right:14px;top:56px;z-index:60;background:var(--card);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);
  padding:12px 14px;min-width:214px;display:none;
}
.thmPop.show{display:block}
.thmPop h4{font-size:12px;color:var(--tx2);font-weight:600;margin:0 0 6px}
.thmPop .row{display:flex;gap:6px;margin-bottom:12px}
.thmPop .row:last-child{margin-bottom:0}
.thmPop .opt{
  flex:1;border:1px solid var(--line);background:var(--card);color:var(--tx);
  border-radius:9px;padding:7px 4px;font-size:12px;cursor:pointer;font-family:inherit;
}
.thmPop .opt.on{background:var(--ac);color:#fff;border-color:var(--ac)}
.thmPop .tone{
  width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;
  padding:0;flex:none;
}
.thmPop .tone.on{border-color:var(--tx);box-shadow:0 0 0 2px var(--card) inset}

/* ============================================================
   ตารางรายการยาว — เลื่อนในกรอบ หัวคอลัมน์ไม่หาย  (รอบ CD)

   ปัญหาเดิม: ตารางรายการ (ลูกค้า 23 ราย · วัสดุ 400 รายการ) ยาวกว่าหน้าจอ
   เลื่อนลงไปดูแถวล่าง ๆ แล้วหัวคอลัมน์หลุดออกไปด้านบน — อ่านไม่ออกว่าตัวเลขช่องไหนคืออะไร
   ต้องเลื่อนกลับขึ้นไปดูหัวใหม่ทุกครั้ง

   วิธีแก้: ให้ "กรอบตาราง" เป็นตัวเลื่อน ไม่ใช่ทั้งหน้า แล้วตรึงแถวหัวไว้กับกรอบ
   ความสูงของกรอบคิดสด ๆ จาก theme.js (สูงเท่าที่จอเหลือ) เพราะแต่ละหน้ามีการ์ดสรุป/
   ตัวกรองสูงไม่เท่ากัน — ตั้งเป็นตัวเลขตายตัวใน CSS จะพอดีแค่หน้าเดียว

   ⚠️ หัวตารางต้องทึบแสง (background) เสมอ — sticky ที่โปร่งใสจะเห็นแถวข้อมูลวิ่งทะลุหัว
   ⚠️ ใช้ box-shadow แทน border-bottom เพราะ border-collapse:collapse ทำให้เส้นล่างของ
      แถวหัวไม่ติดไปกับตัว sticky (เส้นค้างอยู่ที่เดิมแล้วข้อมูลวิ่งผ่าน)
   ============================================================ */
.card.tbl,.tblFill{overflow:auto;-webkit-overflow-scrolling:touch}
.card.tbl thead th,.tblFill thead th,
.card.tbl>table>tr:first-child>th,.tblFill>table>tr:first-child>th,
.card.tbl>table>tbody>tr:first-child>th,.tblFill>table>tbody>tr:first-child>th{
  position:sticky;top:0;z-index:3;
  background:var(--card2);
  box-shadow:inset 0 -1px 0 var(--line);
}
/* หัวสองชั้น (แถวกลุ่มคอลัมน์อยู่บน แถวชื่อคอลัมน์อยู่ล่าง) — ชั้นล่างต้องเกาะใต้ชั้นบน
   ตั้ง --th2 = ความสูงแถวบน ที่หน้านั้น ๆ ถ้าไม่ตั้งก็เกาะที่ 0 เหมือนหัวชั้นเดียว */
.card.tbl thead tr:nth-child(2) th,.tblFill thead tr:nth-child(2) th{top:var(--th2,0px)}
@media print{.card.tbl,.tblFill{overflow:visible!important;max-height:none!important}}

:root{--commercial-yellow-tx:#705300;--commercial-yellow-soft:#fff4bf;--commercial-orange-tx:#984300;--commercial-orange-soft:#ffead5}
[data-theme="dark"]{--commercial-yellow-tx:#f6d96b;--commercial-yellow-soft:#362e12;--commercial-orange-tx:#ffb779;--commercial-orange-soft:#382719}