/* ============================================================================
   AllBox99 — ธีมหน้าจอ
   ============================================================================
   ธีมถูกเลือกโดย admin (แท็บ ตั้งค่า → ธีมหน้าจอ) เก็บใน admin_config คีย์ system_theme
   เซิร์ฟเวอร์ใส่ค่าลง <html data-theme="..."> ตั้งแต่ตอน render
   → ไม่มีจอกระพริบสีเก่าก่อนเปลี่ยน และ JS ของหน้าไม่ต้องรู้จักธีมเลยแม้แต่บรรทัดเดียว

   ⚠️ ต้องโหลด "หลัง" app.css เสมอ เพราะทับค่า --brand-* ที่ app.css ตั้งไว้
   ⚠️ ชื่อธีมต้องตรงกับ AVAILABLE_THEMES ใน main.py เป๊ะ

   ── สามกฎที่ห้ามพัง ──────────────────────────────────────────────────────
   1) ธีมแตะ "กรอบ" ไม่แตะ "ตาราง"
      แถบหัวจอ / ปุ่ม / พื้นหลัง เปลี่ยนได้เต็มที่
      แต่พื้นที่ตารางคีย์ข้อมูลต้องเป็นขาว-เทากลางเสมอ ไม่งั้นจะกลายเป็นของเล่น
      และตัวเลขจะอ่านยากขึ้นทันที
   2) สีสถานะ (--status-*) เป็นค่าคงที่ ห้ามธีมใดแตะ
      เหลือง = มีความเคลื่อนไหว / เขียว = ตรวจแล้ว / แดง = บันทึกไม่สำเร็จ
      ถ้าสีพวกนี้ขยับตามธีม พนักงานจะอ่านสถานะผิด = ข้อมูลหายโดยไม่รู้ตัว
   3) สีเน้นของธีมห้ามเป็นโทน "เหลืองอำพัน" เพราะชนกับสีสถานะโดยตรง
      ส่วนโทนแดง (ธีมตรุษจีน) อนุญาตเป็นกรณีพิเศษ แต่ต้องเข้มกว่าสีสถานะมาก
      และต้องเปลี่ยนช่อง "บันทึกไม่สำเร็จ" เป็นแดงทึบตัวอักษรขาว (ดูท้ายไฟล์)
   ============================================================================ */


/* ----------------------------------------------------------------------------
   สะพานเชื่อมเข้ากับ Tailwind — ประกาศครั้งเดียวที่นี่
   ----------------------------------------------------------------------------
   เทมเพลตใช้คลาส indigo อยู่ 147 จุด (indigo-50/100/400/600/700/800)
   Tailwind v4 สร้าง utility เป็น var() เช่น .bg-indigo-600 { background: var(--color-indigo-600) }
   การชี้ตัวแปรพวกนี้มาที่ --brand-* ทำให้ "เปลี่ยนธีม = เปลี่ยน --brand-* เท่านั้น"
   ไม่ต้องแก้คลาสใน HTML แม้แต่คลาสเดียว และไม่ต้องเขียนซ้ำในทุกบล็อกธีม
   ---------------------------------------------------------------------------- */
:root {
    --color-indigo-50:  var(--brand-50);
    --color-indigo-100: var(--brand-100);
    --color-indigo-400: var(--brand-400);
    --color-indigo-600: var(--brand-600);
    --color-indigo-700: var(--brand-700);
    --color-indigo-800: var(--brand-800);

    /* ค่าตั้งต้นของสิ่งที่ app.css ไม่ได้กำหนดไว้ (ธีมแต่ละตัวทับทีหลัง) */
    --brand-400:      #818cf8;
    --brand-800:      #3730a3;
    --app-canvas:     #f8fafc;
    --bar-bg:         #ffffff;
    --bar-line:       #e4e7ec;
    /* แถบไล่สีบางบนแถบหัวจอ — ทุกธีมมีของตัวเอง (เปลี่ยนจาก "เฉพาะเทศกาล" 2026-08-26)
       ⚠️ ค่านี้ประกาศไว้ที่ :root แต่ข้างในอ้าง --brand-* ซึ่งธีมทับทีหลังบน element เดียวกัน
          (data-theme อยู่ที่ <html> = ตัวเดียวกับ :root) ค่าจึงถูกแทนที่ตอนคำนวณ
          และได้สีของธีมที่ใช้อยู่เสมอโดยไม่ต้องเขียนซ้ำ 14 รอบ
       ธีมเทศกาลทับด้วยแถบหลายสีของตัวเองด้านล่าง */
    --bar-band: linear-gradient(90deg, var(--brand-300), var(--brand-600) 50%, var(--brand-400));
}

/* พื้นหลังของหน้า — เจาะจงที่ body เพื่อไม่ให้ไปแตะ bg-slate-50 ที่ใช้ในเซลล์ตาราง */
body {
    background-color: var(--app-canvas);
}

/* แถบหัวหน้าจอ + แถบเทศกาลบาง ๆ ด้านบน */
.app-bar {
    background: var(--bar-bg);
    border-color: var(--bar-line);
    position: relative;
    overflow: hidden;
}
.app-bar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--bar-band);
}


/* ══════════════════════════════════════════════════════════════════════════
   ธีมที่ใช้ได้ตลอดปี
   ══════════════════════════════════════════════════════════════════════════ */

/* คราม — ค่าเริ่มต้นของระบบ */
[data-theme="indigo"] {
    --brand-50: #eef0ff; --brand-100: #dee1ff; --brand-300: #a9a7fc; --brand-400: #8683fa;
    --brand-600: #5145f0; --brand-700: #4234d6; --brand-800: #3527ad;
    --app-canvas: #f3f4ff;
    --bar-bg: #ffffff;
    --bar-line: #dcdffb;
}

/* หินชนวน — เรียบที่สุด เหมาะกับร้านที่อยากให้จอเงียบที่สุด */
[data-theme="slate"] {
    --brand-50: #eef2f7; --brand-100: #dde4ee; --brand-300: #a9b6c7; --brand-400: #7d8da3;
    --brand-600: #4b5c72; --brand-700: #3b4a5c; --brand-800: #2c3846;
    --app-canvas: #f1f4f8;
    --bar-bg: #ffffff;
    --bar-line: #dbe2ea;
}

/* ฟ้าคราม — สว่าง สะอาด */
[data-theme="blue"] {
    --brand-50: #e8f2ff; --brand-100: #d1e5ff; --brand-300: #84b8fb; --brand-400: #4d97f7;
    --brand-600: #1570ef; --brand-700: #175cd3; --brand-800: #1849a9;
    --app-canvas: #eef6ff;
    --bar-bg: #ffffff;
    --bar-line: #cfe2fb;
}

/* ม่วงองุ่น — อบอุ่นขึ้นมาหน่อย */
[data-theme="violet"] {
    --brand-50: #f6ecfe; --brand-100: #ecd8fd; --brand-300: #cfa2f7; --brand-400: #b271f2;
    --brand-600: #8b2fe8; --brand-700: #7523c9; --brand-800: #5f1ba3;
    --app-canvas: #faf1ff;
    --bar-bg: #ffffff;
    --bar-line: #e8d5fa;
}


/* ── ชุดสีสว่าง ─────────────────────────────────────────────────────────────
   ⚠️ "สว่าง" ในที่นี้ทำที่ --app-canvas กับ --brand-50/100 เท่านั้น
      สีเน้น (--brand-600/700/800) สว่างขึ้นไม่ได้ เพราะถูกใช้เป็นพื้นปุ่มตัวอักษรขาว
      พร้อมกับเป็นตัวอักษรบนพื้นขาว ต้องได้คอนทราสต์ 4.5:1 ทั้งสองทาง (test_T9)
   ------------------------------------------------------------------------- */

/* มินต์ — เขียวอมฟ้า สดชื่นที่สุดในชุด */
[data-theme="mint"] {
    --brand-50: #e0fbf7; --brand-100: #bdf4ee; --brand-300: #48d2c6; --brand-400: #12b5a8;
    --brand-600: #0a7d76; --brand-700: #08635e; --brand-800: #064e4a;
    --app-canvas: #eafdfa;
    --bar-bg: #ffffff;
    --bar-line: #c3ebe6;
}

/* มรกต — สุภาพ ร่มรื่น สบายตา */
[data-theme="emerald"] {
    --brand-50: #ecfdf5; --brand-100: #d1fae5; --brand-300: #6ee7b7; --brand-400: #34d399;
    --brand-600: #047857; --brand-700: #065f46; --brand-800: #064e3b;
    --app-canvas: #f0fdf4;
    --bar-bg: #ffffff;
    --bar-line: #c7f4de;
}

/* เทล — ฟ้าอมเขียว มินิมอล สะอาด */
[data-theme="teal"] {
    --brand-50: #f0fdfa; --brand-100: #ccfbf1; --brand-300: #5eead4; --brand-400: #2dd4bf;
    --brand-600: #0f766e; --brand-700: #115e59; --brand-800: #134e4a;
    --app-canvas: #f2fcf9;
    --bar-bg: #ffffff;
    --bar-line: #c3f6ec;
}

/* ฟ้าใส — โปร่งและสว่างที่สุด เหมาะกับห้องที่แสงน้อย */
[data-theme="sky"] {
    --brand-50: #e3f6ff; --brand-100: #c2ebff; --brand-300: #63c9f5; --brand-400: #1fa8e6;
    --brand-600: #0673a3; --brand-700: #055c85; --brand-800: #044768;
    --app-canvas: #eaf9ff;
    --bar-bg: #ffffff;
    --bar-line: #c8e8f7;
}

/* เขียวมะนาว — สดใสแบบอบอุ่น เป็นตัวเดียวในชุดที่ไม่ใช่สีเย็น
   ⚠️ ปุ่มจะออกเขียวมะกอกเข้ม ไม่ใช่เขียวมะนาวสด เพราะติดเพดานคอนทราสต์
      ความสดอยู่ที่พื้นหลังกับสีอ่อน */
[data-theme="lime"] {
    --brand-50: #f2fbdd; --brand-100: #e3f7bb; --brand-300: #a8d95c; --brand-400: #7fb926;
    --brand-600: #4d7314; --brand-700: #3e5d10; --brand-800: #31490c;
    --app-canvas: #f6fce8;
    --bar-bg: #ffffff;
    --bar-line: #dcefb4;
}

/* กุหลาบ — ชมพูสด
   ⚠️ เป็นโทนแดง (hue 334 ห่างจากสีแดง "บันทึกไม่สำเร็จ" แค่ 26°)
      จึงต้องใช้มาตรการพิเศษท้ายไฟล์ร่วมกับธีมตรุษจีน (test_T10 คุมไว้) */
[data-theme="rose"] {
    --brand-50: #ffecf4; --brand-100: #ffd6e7; --brand-300: #f99cc2; --brand-400: #f56ba4;
    --brand-600: #d61f6d; --brand-700: #b41659; --brand-800: #911147;
    --app-canvas: #fff0f6;
    --bar-bg: #ffffff;
    --bar-line: #fad3e2;
}


/* ══════════════════════════════════════════════════════════════════════════
   ธีมสีประจำวัน — สีมงคลประจำวันของไทยครบทั้ง 7 วัน
   ══════════════════════════════════════════════════════════════════════════
   อาทิตย์ แดง · จันทร์ เหลือง · อังคาร ชมพู · พุธ เขียว
   พฤหัสบดี ส้ม(แสด) · ศุกร์ ฟ้า · เสาร์ ม่วง

   ใช้ได้สองทาง: admin กดเลือกเองใบใดก็ได้ หรือเปิดโหมด "ตามวันในสัปดาห์"
   แล้วระบบสลับให้เองทุกเที่ยงคืนเวลาไทย (ดู WEEKDAY_THEMES ใน main.py)

   ⚠️⚠️ สองวันที่สีเน้น "ไม่ใช่สีของวันตรง ๆ" และห้ามแก้ให้ตรงโดยไม่อ่านตรงนี้ก่อน
        จันทร์ (เหลือง) และ พฤหัสบดี (ส้ม) — สองสีนี้อยู่ในโทนเดียวกับเหลืองอำพัน
        ซึ่งเป็นสี "แถวมีความเคลื่อนไหว" ในตารางคีย์ข้อมูล (กฎข้อ 3 ด้านบน)
        ถ้าเอาสีจริงมาใส่ --brand-600 พนักงานจะแยกไม่ออกว่าเหลืองที่เห็นคือสถานะ
        หรือแค่สีของธีม → สีเน้นจึงถูกดันออกจากโทนนั้น:
            จันทร์  → ทองมะกอกเข้ม (hue 66) ห่างเหลืองอำพัน 28°
            พฤหัสฯ → ส้มอิฐ/แสด (hue 10)   ห่างเหลืองอำพัน 28°
        ความเป็น "เหลือง" และ "ส้ม" ไปแสดงที่พื้นหลัง (--app-canvas / --brand-50/100)
        และแถบไล่สีบนแถบหัวจอแทน ซึ่งเป็นที่ที่ทำได้เต็มที่โดยไม่ชนกับสีสถานะ
        test_T11 คำนวณมุมสีให้เอง ถ้าดันกลับเข้าโทนอำพันเมื่อไรจะ fail ทันที
   ══════════════════════════════════════════════════════════════════════════ */

/* อาทิตย์ — แดง (⚠️ โทนแดง ต้องมีมาตรการช่องบันทึกไม่สำเร็จท้ายไฟล์) */
[data-theme="sunday"] {
    --brand-50: #ffeeec; --brand-100: #ffd9d5; --brand-300: #fba79f; --brand-400: #f7776c;
    --brand-600: #d22b1e; --brand-700: #b02318; --brand-800: #8d1b12;
    --app-canvas: #fff3f1;
    --bar-bg: #ffffff;
    --bar-line: #f9d8d2;
    --bar-band: linear-gradient(90deg,#ef4444,#dc2626,#f87171);
}

/* จันทร์ — เหลือง (สีเน้นเป็นทองมะกอกเข้ม ดูเหตุผลในหัวข้อด้านบน) */
[data-theme="monday"] {
    --brand-50: #fdfbe6; --brand-100: #f9f4c6; --brand-300: #dcd868; --brand-400: #bdb92f;
    --brand-600: #66700a; --brand-700: #525a07; --brand-800: #404606;
    --app-canvas: #fefce8;
    --bar-bg: #ffffff;
    --bar-line: #eae6b8;
    --bar-band: linear-gradient(90deg,#fde047,#eab308,#facc15);
}

/* อังคาร — ชมพู (⚠️ โทนชมพู ต้องมีมาตรการช่องบันทึกไม่สำเร็จท้ายไฟล์) */
[data-theme="tuesday"] {
    --brand-50: #ffedf6; --brand-100: #ffd6ea; --brand-300: #f9a2ca; --brand-400: #f26fae;
    --brand-600: #c02a7a; --brand-700: #a12265; --brand-800: #821b51;
    --app-canvas: #fff1f8;
    --bar-bg: #ffffff;
    --bar-line: #f8d4e6;
    --bar-band: linear-gradient(90deg,#f9a8d4,#ec4899,#f472b6);
}

/* พุธ — เขียว */
[data-theme="wednesday"] {
    --brand-50: #e9f9ee; --brand-100: #cff2da; --brand-300: #7cd79a; --brand-400: #3ec06b;
    --brand-600: #15803d; --brand-700: #116832; --brand-800: #0d5227;
    --app-canvas: #f0fbf3;
    --bar-bg: #ffffff;
    --bar-line: #cdebd7;
    --bar-band: linear-gradient(90deg,#4ade80,#16a34a,#86efac);
}

/* พฤหัสบดี — ส้ม/แสด (⚠️ โทนแดง-ส้ม ต้องมีมาตรการช่องบันทึกไม่สำเร็จท้ายไฟล์) */
[data-theme="thursday"] {
    --brand-50: #fff0e9; --brand-100: #ffdccd; --brand-300: #fdae86; --brand-400: #f9814d;
    --brand-600: #c43518; --brand-700: #a52c14; --brand-800: #852310;
    --app-canvas: #fff4ee;
    --bar-bg: #ffffff;
    --bar-line: #fadbc9;
    --bar-band: linear-gradient(90deg,#fdba74,#f97316,#fb923c);
}

/* ศุกร์ — ฟ้า */
[data-theme="friday"] {
    --brand-50: #e9f4ff; --brand-100: #d0e7ff; --brand-300: #84bef8; --brand-400: #4b9df4;
    --brand-600: #0d6ebd; --brand-700: #0b5b9d; --brand-800: #08487d;
    --app-canvas: #f0f7ff;
    --bar-bg: #ffffff;
    --bar-line: #cfe3f7;
    --bar-band: linear-gradient(90deg,#7dd3fc,#0ea5e9,#38bdf8);
}

/* เสาร์ — ม่วง */
[data-theme="saturday"] {
    --brand-50: #f3edff; --brand-100: #e6dcff; --brand-300: #bda6f7; --brand-400: #9a78f2;
    --brand-600: #6d28d9; --brand-700: #5b21b6; --brand-800: #4a1b93;
    --app-canvas: #f6f1ff;
    --bar-bg: #ffffff;
    --bar-line: #e0d5f8;
    --bar-band: linear-gradient(90deg,#c4b5fd,#7c3aed,#a78bfa);
}


/* ══════════════════════════════════════════════════════════════════════════
   ธีมเทศกาล — ต่างจากธีมประจำตรงที่มี "แถบเทศกาล" บนแถบหัวจอ
   admin เลือกเองเมื่อถึงเทศกาล (ระบบไม่สลับให้อัตโนมัติ)
   ══════════════════════════════════════════════════════════════════════════ */

/* สงกรานต์ — ฟ้าน้ำ + ทรายอุ่น */
[data-theme="songkran"] {
    --brand-50: #e3fbff; --brand-100: #c3f5fd; --brand-300: #6ee0f2; --brand-400: #2ec7e0;
    --brand-600: #0b7d91; --brand-700: #0a6b7d; --brand-800: #085665;
    --app-canvas: #ebfbff;
    --bar-bg: #ffffff;
    --bar-line: #c7ecf4;
    --bar-band: linear-gradient(90deg,#22d3ee,#7dd3fc,#fbbf24,#fb7185);
}

/* ลอยกระทง — ม่วงคืนเดือนหงาย + แสงเทียน */
[data-theme="loykrathong"] {
    --brand-50: #f9ebff; --brand-100: #f2d6ff; --brand-300: #dda0fa; --brand-400: #c974f5;
    --brand-600: #a428d6; --brand-700: #8a1eb8; --brand-800: #6f1795;
    --app-canvas: #fbf0ff;
    --bar-bg: #ffffff;
    --bar-line: #ecd3fa;
    --bar-band: linear-gradient(90deg,#7c3aed,#d946ef,#fbbf24);
}

/* ปีใหม่ — น้ำเงินกลางคืน + ประกายทอง */
[data-theme="newyear"] {
    --brand-50: #eaf1ff; --brand-100: #d5e3ff; --brand-300: #8fb4fb; --brand-400: #5c8ef8;
    --brand-600: #2563f0; --brand-700: #1d4fd0; --brand-800: #193fa8;
    --app-canvas: #f0f5ff;
    --bar-bg: #ffffff;
    --bar-line: #d3e0fc;
    --bar-band: linear-gradient(90deg,#1d4fd0,#60a5fa,#fcd34d,#fb923c);
}

/* ตรุษจีน — แดงชาด + ทอง
   ⚠️ ธีมเดียวที่สีเน้นเป็นโทนแดง จึงต้องมีมาตรการพิเศษด้านล่างสุดของไฟล์ */
[data-theme="cny"] {
    --brand-50: #ffecec; --brand-100: #ffd6d6; --brand-300: #fa9c9c; --brand-400: #f56c6c;
    --brand-600: #c81e1e; --brand-700: #a81616; --brand-800: #871111;
    --app-canvas: #fff1ee;
    --bar-bg: #ffffff;
    --bar-line: #f8d5d0;
    --bar-band: linear-gradient(90deg,#dc2626,#fbbf24,#dc2626);
}


/* ----------------------------------------------------------------------------
   มาตรการพิเศษของธีมโทนแดง
   ----------------------------------------------------------------------------
   ⚠️ ห้ามลบบล็อกนี้ตราบใดที่ยังมีธีม cny หรือ rose อยู่
   ⚠️ เพิ่มธีมโทนแดง/ชมพูใหม่เมื่อไร ต้องเพิ่มชื่อในลิสต์ selector ข้างล่างด้วยทุกครั้ง

   ปกติ "ช่องบันทึกไม่สำเร็จ" เป็นพื้นแดงอ่อน (#fecaca) ซึ่งเด่นมากบนจอโทนคราม
   แต่บนธีมที่ทั้งหน้าจอออกโทนแดงอยู่แล้ว มันจะกลืนไปกับพื้น
   → พนักงานจะไม่รู้ว่าของที่เพิ่งคีย์ยังไม่ถูกบันทึก ซึ่งคือความเสียหายจริง

   จึงเปลี่ยนเป็นแดงทึบตัวอักษรขาวแทน — ความหมายเดิม แต่สะดุดตาบนพื้นแดงได้
   specificity สูงกว่ากฎใน app.css อยู่แล้ว (มี [data-theme] เพิ่มมา) จึงชนะแน่นอน
   ---------------------------------------------------------------------------- */
[data-theme="cny"] .save-failed,
[data-theme="cny"] tr td.save-failed,
[data-theme="cny"] tr.row-highlighted td.save-failed,
[data-theme="cny"] tr.row-checked td.save-failed,
[data-theme="cny"] tr td.ship-check-failed,
[data-theme="cny"] tr.ship-row-checked td.ship-check-failed,
[data-theme="sunday"] .save-failed,
[data-theme="sunday"] tr td.save-failed,
[data-theme="sunday"] tr.row-highlighted td.save-failed,
[data-theme="sunday"] tr.row-checked td.save-failed,
[data-theme="sunday"] tr td.ship-check-failed,
[data-theme="sunday"] tr.ship-row-checked td.ship-check-failed,
[data-theme="thursday"] .save-failed,
[data-theme="thursday"] tr td.save-failed,
[data-theme="thursday"] tr.row-highlighted td.save-failed,
[data-theme="thursday"] tr.row-checked td.save-failed,
[data-theme="thursday"] tr td.ship-check-failed,
[data-theme="thursday"] tr.ship-row-checked td.ship-check-failed,
[data-theme="tuesday"] .save-failed,
[data-theme="tuesday"] tr td.save-failed,
[data-theme="tuesday"] tr.row-highlighted td.save-failed,
[data-theme="tuesday"] tr.row-checked td.save-failed,
[data-theme="tuesday"] tr td.ship-check-failed,
[data-theme="tuesday"] tr.ship-row-checked td.ship-check-failed,
[data-theme="rose"] .save-failed,
[data-theme="rose"] tr td.save-failed,
[data-theme="rose"] tr.row-highlighted td.save-failed,
[data-theme="rose"] tr.row-checked td.save-failed,
[data-theme="rose"] tr td.ship-check-failed,
[data-theme="rose"] tr.ship-row-checked td.ship-check-failed {
    background-color: #b91c1c !important;
    color: #ffffff !important;
    font-weight: 700;
}