/* =============================================================================
   app.css — สไตล์กลางของทุกระบบ (U1 · 17 ส.ค. 2026)

   ทำไมถึงมีไฟล์นี้:
   สำรวจรอบ 17 ส.ค. พบว่า 4 ระบบมี CSS ก้อนเดียวกันคนละชุด — `:root` เหมือนกัน
   "เป๊ะทุกตัวอักษร" ทั้ง 4 ไฟล์ · `/stock/` กับ `/pay/` ตรงกัน 27 จาก 38 บรรทัด
   ⇒ แก้สไตล์ 1 อย่างต้องไล่แก้ 4 ที่ และรอบ 3 กำลังจะเพิ่มอีก ~6 แท็บ

   🔑 สิ่งเดียวที่แต่ละระบบต่างกันจริงคือ **สีแรกของ gradient** ⇒ ทำเป็น `--accent`
      หน้าไหนตั้ง `--accent` ของตัวเองใน <style> ท้าย <head> เท่านั้นพอ
        /hr/ #4b3a67 (ม่วง) · /pay/ #14507a (ฟ้าเข้ม) · /stock/ #0e6b5e (เขียว)
        /jobs/ #12447f (น้ำเงิน) · หน้าโฮม #1f5aa8

   🔴 ห้ามใส่สไตล์เฉพาะหน้าลงไฟล์นี้ — ของที่ใช้หน้าเดียว (.cal ของ /jobs/,
      .catgrid ของ /pay/, .t-* ของ /stock/) อยู่ใน <style> ของหน้านั้นเหมือนเดิม
      ไฟล์นี้โตขึ้นเมื่อไหร่ = กลับไปเป็นปัญหาเดิมในรูปแบบใหม่

   📱 เรื่องมือถือ — ดู §MOBILE ท้ายไฟล์ · ขอบเขตที่ตกลงกับผู้ใช้อยู่ใน docs/12 §3.2
============================================================================= */

/* ── สีและตัวแปร ── */
:root{
  --navy:#0D2B5C;--orange:#F7931E;--teal:#0e8a7d;--red:#c0392b;
  --amber:#c47f17;--green:#1e8449;--purple:#7b5ea7;
  --bg:#eef1f6;--card:#fff;--line:#e2e8f0;--ink:#1a2733;--muted:#5b6b7b;
  /* สีประจำระบบ — หน้าที่ไม่ตั้งค่าจะได้สีน้ำเงินกลาง ไม่ใช่พื้นโปร่ง */
  --accent:#12447f;
}

*{box-sizing:border-box}
body{margin:0;font-family:"Sarabun","Segoe UI",Tahoma,sans-serif;background:var(--bg);color:var(--ink)}

/* =============================================================================
   แถบนำทางข้ามระบบ — วาดโดย web/js/nav.js (ดูเหตุผลการไม่ซ่อนเมนูในไฟล์นั้น)
============================================================================= */
.navbar{background:var(--navy);color:#fff;display:flex;align-items:center;gap:4px;
        padding:0 14px;flex-wrap:wrap;font-size:13px;border-bottom:1px solid rgba(255,255,255,.12)}
.navbar .home{font-weight:800;color:#fff;text-decoration:none;padding:9px 10px 9px 0;
              letter-spacing:.3px;white-space:nowrap}
.navbar a.nv{color:#fff;text-decoration:none;padding:9px 11px;border-radius:8px;
             opacity:.82;white-space:nowrap;font-weight:600}
.navbar a.nv:hover{opacity:1;background:rgba(255,255,255,.12)}
/* ระบบที่กำลังเปิดอยู่ต้องแยกออกจากพี่น้องให้ชัด — ไม่งั้นคนหลงว่าอยู่หน้าไหน */
.navbar a.nv.on{opacity:1;background:var(--accent);box-shadow:inset 0 -3px 0 var(--orange)}
.navbar .sp{flex:1}
.navbar .me{font-size:12px;opacity:.85;padding:9px 0;white-space:nowrap}

/* =============================================================================
   หัวเรื่อง / แท็บ / โครงหน้า
============================================================================= */
.top{background:linear-gradient(135deg,var(--accent),var(--navy));color:#fff;padding:12px 20px;
     border-bottom:4px solid var(--orange);display:flex;justify-content:space-between;
     align-items:center;flex-wrap:wrap;gap:8px}
.top h1{margin:0;font-size:18px}
.top .u{font-size:12px;opacity:.85}

.tabs{display:flex;gap:6px;background:var(--navy);padding:0 20px;flex-wrap:wrap}
.tab{background:rgba(255,255,255,.12);color:#fff;border:none;padding:9px 14px;
     border-radius:8px 8px 0 0;font-size:13px;font-weight:700;cursor:pointer;
     font-family:inherit;margin-top:6px}
.tab.on{background:var(--bg);color:var(--navy)}

.wrap{max-width:1200px;margin:0 auto;padding:14px 16px 70px}

/* ── การ์ดสรุปตัวเลข ── */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:10px 0}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.kpi .v{font-size:22px;font-weight:800;color:var(--navy)}
.kpi .l{font-size:11.5px;color:var(--muted);margin-top:2px}
.kpi.g .v{color:var(--green)}.kpi.a .v{color:var(--amber)}.kpi.r .v{color:var(--red)}
.kpi.o .v{color:var(--orange)}.kpi.p .v{color:var(--purple)}

.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin:12px 0}
.card h3{margin:0 0 10px;font-size:15px;color:var(--navy);border-left:4px solid var(--orange);padding-left:9px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* =============================================================================
   ปุ่มและแถบเครื่องมือ
============================================================================= */
.actionbar{display:flex;gap:10px;align-items:center;margin:6px 0 12px;flex-wrap:wrap}
.addbtn{background:var(--orange);color:#3a2200;border:none;border-radius:10px;padding:10px 16px;
        font-size:13px;font-weight:800;cursor:pointer;font-family:inherit}

/* 📱 `flex-wrap:wrap` + `min-width` บน .grow ยกมาจาก /jobs/ ซึ่งเป็นหน้าเดียวที่มี
      หน้าอื่นไม่มี ⇒ พอจอแคบกว่าผลรวมของช่องกรอง แถบจะดันจนล้นขอบจอ
      (อาการเดียวกับที่ /jobs/ เคยเจอแล้วแก้ไปแล้ว) ⇒ ยกขึ้นเป็นค่าตั้งต้นของทุกหน้า */
.bar{flex:1;display:flex;gap:8px;flex-wrap:wrap}
.bar input,.bar select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;
                       font-size:13px;font-family:inherit}
.bar .grow{flex:1;min-width:160px}

.btn{background:var(--navy);color:#fff;border:none;border-radius:8px;padding:8px 13px;
     font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit}
.btn.g{background:var(--green)}
.btn.gh{background:#fff;color:var(--navy);border:1px solid var(--line)}
.btn.o{background:var(--orange);color:#3a2200}
.btn.r{background:var(--red)}
.btn.sm{padding:5px 9px;font-size:11.5px}
button:disabled{opacity:.55;cursor:default}

/* ── แถบแบ่งหน้า (.pager) — ย้ายมาจาก /stock/ ตอน F154 เพราะ /sales/ ใช้ด้วย ──
   ตัดฝั่งเบราว์เซอร์ล้วน ไม่มีค่าอ่านเพิ่ม (R5e) · HTML ของแคตตาลอก 2 หน้ามาจาก js/pager.js
   ปุ่มเลขหน้า (.pg-n) เลขตัวเดียวไม่ต้องกว้าง 96px เท่าปุ่ม ก่อนหน้า/ถัดไป */
.pager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;
       font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.pager b{color:var(--navy)}
.pager button{min-width:96px}
.pager .pg-n{min-width:34px}
.pager:empty{display:none}

/* =============================================================================
   ตาราง
============================================================================= */
table{width:100%;border-collapse:collapse;font-size:13px;background:var(--card);
      border:1px solid var(--line);border-radius:11px;overflow:hidden}
th,td{border-bottom:1px solid var(--line);padding:8px 11px;text-align:left}
th{background:#eef2f8;color:var(--navy)}
td.r,th.r{text-align:right}
tr.clk{cursor:pointer}
tr.clk:hover td{background:#f6f9ff}

/* ห่อตารางด้วย .tbl-wrap เมื่อเขียนหน้าใหม่ — ให้ตารางเลื่อนเองแทนดันทั้งหน้าให้กว้าง
   (ของเดิม 19 ตารางยังไม่ได้ห่อ · มีตาข่ายกันไว้ใน §MOBILE ข้างล่างแล้ว) */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:11px}

/* ── ป้ายสถานะ ── */
/* `white-space:nowrap` + `inline-block` ยกมาจาก /jobs/+/stock/ — กันป้ายฉีกกลางคำ
   ตอนจอแคบ ซึ่งอ่านแล้วเข้าใจผิดว่าเป็นสองสถานะ */
.pill{font-size:11px;padding:2px 9px;border-radius:20px;font-weight:700;
      white-space:nowrap;display:inline-block}
.p-ok{background:#ddf3e6;color:#15703f}
.p-work{background:#ddf3e6;color:#15703f}
.p-warn{background:#fdf3d7;color:#9a6c00}
.p-wait{background:#fdf3d7;color:#9a6c00}
.p-no{background:#fbe0dd;color:#96271a}
.p-gray{background:#eef1f5;color:#5a6879}
.p-role{background:#eef1f5;color:#5a6879}
.p-blue{background:#e5eefb;color:#1c4e93}
.p-pur{background:#efe7fa;color:#5b3d92}

/* =============================================================================
   กล่องซ้อน (modal) และฟอร์ม
============================================================================= */
.ov{position:fixed;inset:0;background:rgba(13,43,92,.45);display:none;align-items:center;
    justify-content:center;z-index:50;padding:16px}
.ov.show{display:flex}
/* max-height + overflow เป็นค่าตั้งต้น — ไม่งั้นฟอร์มยาวบนจอเตี้ยจะดันปุ่มบันทึกตกขอบจอ
   โดยไม่มีทางเลื่อนถึง (เดิม /hr/ ไม่มีสองบรรทัดนี้) */
.modal{background:#fff;border-radius:14px;max-width:520px;width:100%;max-height:92vh;overflow:auto}
.modal.wide{max-width:860px}
/* 🧩 กว้างพิเศษ — ตาราง BOM ของแพ็กเกจมี 9 คอลัมน์ (ผู้ใช้ขอ 11 ก.ย. 2026: "เล็กไป")
   ไม่ใส่ min-width: จอแคบยังยุบลงมาได้ตามปกติ ตารางมี overflow ของตัวเองอยู่แล้ว */
.modal.xwide{max-width:1180px}
/* หัวการ์ดค้างไว้ตอนเลื่อน (18 ส.ค. 2026 · ผู้ใช้ขอ)
   การ์ดงานยาวหลายจอ ⇒ เลื่อนลงไปแล้วไม่รู้ว่ากำลังดูงานใบไหน
   และปุ่มปิด (×) อยู่ไกลจนต้องเลื่อนกลับขึ้นสุดทุกครั้งที่จะปิด
   🔑 ตัวที่เลื่อนคือ .modal (overflow:auto) ⇒ sticky ยึดกับมันโดยตรง ใช้ได้ทุก overlay */
.modal .mh{background:var(--navy);color:#fff;padding:12px 16px;font-weight:700;
           display:flex;justify-content:space-between;align-items:center;
           position:sticky;top:0;z-index:3;gap:8px}
.modal .mb{padding:16px}
.modal .mf{padding:12px 16px;border-top:1px solid var(--line);display:flex;
           justify-content:flex-end;gap:8px;flex-wrap:wrap}
.x{background:none;border:none;color:#fff;font-size:20px;cursor:pointer}

.fg{margin-bottom:10px}
.fg label{display:block;font-size:12px;color:var(--muted);margin-bottom:3px;font-weight:700}
.fg input,.fg select,.fg textarea{width:100%;padding:8px 10px;border:1px solid var(--line);
                                  border-radius:8px;font-size:13px;font-family:inherit}

/* ปุ่ม 👁 แสดง/ซ่อนรหัสผ่าน — โครง <span class="pwwrap"> + <button class="pweye">
   ถูกสร้างตอน**รันไทม์**โดย `web/js/pwtoggle.js` ไม่ใช่ HTML นิ่ง ⇒ grep หา 2 class นี้
   ในไฟล์หน้าเว็บจะไม่เจอ · ใช้ร่วมกันทั้ง 5 หน้า (login 5 ช่อง + เปลี่ยนรหัสผ่าน 3 ช่อง) */
.pwwrap{position:relative;display:block}
.pwwrap input{padding-right:42px}                      /* กันตัวอักษรลอดใต้ปุ่ม */
.pweye{position:absolute;top:0;right:0;width:40px;height:100%;
       display:flex;align-items:center;justify-content:center;
       background:none;border:0;padding:0;cursor:pointer;color:var(--muted)}
.pweye:hover{color:var(--navy)}
.pweye:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:8px}
.pweye svg{width:18px;height:18px;display:block}
.drow{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:5px 0;
      border-bottom:1px dashed var(--line)}
.drow .k{color:var(--muted)}
.drow .v{font-weight:700;text-align:right}

/* =============================================================================
   หน้าล็อกอิน / แจ้งเตือน / สถานะว่าง
============================================================================= */
.login{position:fixed;inset:0;background:linear-gradient(135deg,var(--accent),var(--navy));
       display:flex;align-items:center;justify-content:center;z-index:90;padding:16px}
.login .box{background:#fff;border-radius:16px;padding:28px;width:320px;max-width:100%}
.login h2{margin:0 0 4px;color:var(--navy)}
.login p{margin:0 0 16px;font-size:12px;color:var(--muted)}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--navy);
       color:#fff;padding:10px 18px;border-radius:10px;font-size:13px;opacity:0;transition:.3s;
       pointer-events:none;z-index:100;max-width:90vw;text-align:center}
.toast.show{opacity:1}
.loading{position:fixed;inset:0;background:rgba(255,255,255,.6);display:none;align-items:center;
         justify-content:center;z-index:95;font-weight:700;color:var(--navy)}
.loading.show{display:flex}

.note{font-size:11px;color:var(--muted);margin-top:8px}
.empty{padding:14px;text-align:center;color:var(--muted);font-size:12px}
.warn{background:#fff8e6;border:1px solid #f0d089;color:#7a5a00;border-radius:10px;
      padding:10px 12px;font-size:12.5px;margin:10px 0}

/* =============================================================================
   §MOBILE — จุดตัดกลาง 2 ค่า ใช้ร่วมกันทุกหน้า
   ⚠️ ห้ามหน้าไหนตั้งจุดตัดของตัวเอง (เดิมกระจาย 820 บ้าง 900 บ้าง = เดาไม่ได้ว่าจะยุบเมื่อไหร่)
      หน้าที่ต้องการพฤติกรรมเพิ่มให้เขียน @media ที่ "จุดตัดเดียวกัน" ในไฟล์ของตัวเอง

   ขอบเขตที่ผู้ใช้ตกลง (docs/12 §3.2): รอบนี้โทรศัพท์ต้องใช้ได้จริงเฉพาะ
   "เช็คลิสต์หน้างาน + กดออก PDF" ของรอบ 3 · หน้าอื่นขอแค่ **ไม่พัง**
============================================================================= */

/* ── ≤820px : แท็บเล็ตและจอแคบ — เป้าหมายคือ "ไม่พัง" ── */
@media(max-width:820px){
  .kpis{grid-template-columns:1fr 1fr}
  .grid2{grid-template-columns:1fr}

  /* 🛟 ตาข่ายกันตารางล้นจอ — ของเดิม 19 ตารางยังไม่ได้ห่อ .tbl-wrap ทีละตัว
     `display:block` ทำให้ตารางเลื่อนแนวนอนได้เอง แทนที่จะดันหน้าทั้งหน้าให้กว้างเกินจอ
     ⚠️ ต้องเขียน overflow-x/y ทับ เพราะกฎ table ข้างบนตั้ง `overflow:hidden`
        ไว้ให้มุมมนทำงาน — ถ้าไม่ทับ ตารางจะถูกตัดแทนที่จะเลื่อน */
  table{display:block;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
}

/* ── ≤480px : โทรศัพท์ ── */
@media(max-width:480px){
  .kpis{grid-template-columns:1fr 1fr;gap:8px}
  .wrap{padding:10px 10px 70px}
  .top{padding:10px 12px}
  .top h1{font-size:16px}
  .tabs{padding:0 8px;gap:4px}
  .navbar{padding:0 8px;gap:2px}
  .navbar a.nv{padding:8px 9px}

  /* ปุ่มขนาดนิ้วโป้ง — เกณฑ์พื้นที่แตะขั้นต่ำ 44px
     ช่างสวมถุงมือกดที่หน้างาน ปุ่ม 8px×12.5px ของเดิมพลาดบ่อยจนกดผิดปุ่มข้าง ๆ */
  .btn,.addbtn{min-height:44px;padding:11px 14px;font-size:13.5px}
  .btn.sm{min-height:38px;padding:8px 11px;font-size:12.5px}
  /* ช่องกรอกต้องไม่เล็กกว่า 16px ไม่งั้น iOS Safari ซูมหน้าเข้าเองตอนแตะช่อง
     แล้วผู้ใช้ต้องซูมออกเองทุกครั้ง — เป็นสาเหตุอันดับหนึ่งที่คนบ่นว่า "ฟอร์มใช้ยากบนมือถือ" */
  .fg input,.fg select,.fg textarea,.bar input,.bar select{font-size:16px;padding:10px 12px}
  /* 🔴 บรรทัดบนใช้ `padding` แบบย่อ ⇒ มันล้าง `padding-right` ของ .pwwrap ทิ้งไปด้วย
     ปุ่ม 👁 จะไปทับตัวอักษรเฉพาะบนมือถือ ⇒ ต้องประกาศซ้ำในบล็อกนี้ ห้ามลบ */
  .pwwrap input{padding-right:46px}
  .pweye{width:44px}
  .bar .grow{min-width:100%}
  .modal .mf{justify-content:stretch}
  .modal .mf .btn{flex:1}
}

/* ── .stack-sm : ตาราง → การ์ดเรียงลง (ของรอบ 3) ──
   ใช้กับตารางที่ "ต้องอ่านรู้เรื่องบนโทรศัพท์จริง ๆ" ไม่ใช่แค่เลื่อนดูได้
   วิธีใช้: <table class="stack-sm"> แล้วใส่ data-l="ชื่อหัวข้อ" ที่ <td> ทุกตัว
   ⚠️ ต้องมี data-l ครบทุก td ไม่งั้นพอยุบเป็นการ์ดแล้วจะไม่รู้ว่าตัวเลขไหนคืออะไร */
@media(max-width:480px){
  table.stack-sm{display:block;overflow:visible;border:none;background:none}
  table.stack-sm thead{display:none}
  table.stack-sm tbody,table.stack-sm tr,table.stack-sm td{display:block;width:100%}
  table.stack-sm tr{background:var(--card);border:1px solid var(--line);border-radius:11px;
                    padding:8px 10px;margin-bottom:8px}
  table.stack-sm td{border:none;border-bottom:1px dashed var(--line);padding:6px 0;
                    display:flex;justify-content:space-between;gap:10px;text-align:right}
  table.stack-sm td:last-child{border-bottom:none}
  table.stack-sm td::before{content:attr(data-l);color:var(--muted);font-weight:700;
                            text-align:left;flex:0 0 40%}
}