/* ธีม Packman แบบ ก แถบหัวน้ำเงิน (Mai เคาะ 28 ต.ค. 69 · DECISIONS ทุกหน้า · ตัวอย่างดู theme-demo.html)
   หน้าใหม่ทุกหน้าโหลดไฟล์นี้ แล้วใช้คลาส pm-* + ตัวแปร --pm-* เท่านั้น ห้ามใส่สีเอง (ด่าน test_pm_theme.py)
   หน้าเก่ายังใช้ style.css เดิม — ไฟล์นี้ใช้ชื่อขึ้นต้น pm- ทั้งหมด จึงไม่ชนของเดิม */
:root {
  --pm-blue: #1d4ed8; --pm-blue-h: #1e40af; --pm-blue-soft: #e8effc; --pm-blue-ink: #1e3a8a; --pm-blue-pale: #dbeafe;
  --pm-ok: #047857; --pm-ok-soft: #dcf5e8;
  --pm-bad: #be123c; --pm-bad-soft: #ffe4e6;
  --pm-warn: #b45309; --pm-warn-soft: #fdf0d8;
  --pm-bg: #f4f5f7; --pm-card: #ffffff; --pm-line: #e5e7eb; --pm-line2: #d1d5db; --pm-hover: #eef0f3; --pm-th: #f9fafb;
  --pm-seg: #dfe3dc;
  /* สีประจำคลัง (DECISIONS 28 ต.ค. 69 หน้ารายการเบิก) · A = ปลายทางส่งของ */
  --pm-wh-B: #1d4ed8; --pm-wh-M: #047857; --pm-wh-P: #c2410c; --pm-wh-T: #7e22ce; --pm-wh-A: #475569;
  --pm-t1: #111827; --pm-t2: #4b5563; --pm-t3: #6b7280; --pm-on: #ffffff;
  /* ตัวหนังสือ: ตั้งต้น 18 · หน้าแน่นใส่ class pm-dense ที่ body = 16 */
  --pm-fs-xs: 13px; --pm-fs-sm: 16px; --pm-fs: 18px; --pm-fs-h: 22px; --pm-fs-n: 28px;
  --pm-h: 40px;            /* ปุ่ม/ช่อง PC */
  --pm-h-m: 48px;          /* ปุ่ม/ช่อง มือถือ */
  --pm-r: 8px; --pm-r-card: 12px;
  --pm-font: "Noto Sans Thai", "IBM Plex Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.pm-body { margin: 0; background: var(--pm-bg); color: var(--pm-t1); font-family: var(--pm-font); font-size: var(--pm-fs); }
.pm-body.pm-dense { --pm-fs: 16px; --pm-fs-sm: 15px; }
.pm-body * { box-sizing: border-box; }

/* แถบหัวน้ำเงิน PC: โลโก้ · เมนู · ขวาสุดสถานะ/คน */
.pm-top { background: var(--pm-blue); color: var(--pm-on); height: 56px; display: flex; align-items: center; gap: 16px; padding: 0 24px; }
.pm-top .pm-logo { font-weight: 800; font-size: var(--pm-fs-h); }
.pm-top nav { display: flex; gap: 4px; }
.pm-top nav a { color: var(--pm-blue-pale); padding: 8px 12px; border-radius: var(--pm-r); font-size: var(--pm-fs-sm); text-decoration: none; }
.pm-top nav a:hover { background: rgba(255,255,255,.12); }
.pm-top nav a.on { background: rgba(255,255,255,.18); color: var(--pm-on); font-weight: 700; }
.pm-top .pm-right { margin-left: auto; display: flex; gap: 8px; align-items: center; font-size: var(--pm-fs-sm); }

/* แถวหัวหน้า: ซ้ายชื่อหน้า → กลางตัวกรอง → ขวาปุ่ม */
.pm-bar { display: flex; align-items: center; gap: 16px; padding: 16px 24px; }
.pm-bar h1 { margin: 0; font-size: var(--pm-fs-h); }
.pm-bar .pm-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.pm-main { padding: 0 24px 24px; display: flex; flex-direction: column; gap: 16px; }

/* ปุ่ม */
.pm-btn { height: var(--pm-h); padding: 0 16px; border-radius: var(--pm-r); border: 1px solid var(--pm-line2); background: var(--pm-card); color: var(--pm-t1);
  font: inherit; font-size: var(--pm-fs-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.pm-btn:hover { background: var(--pm-hover); }
.pm-btn:disabled { opacity: .45; cursor: not-allowed; }
.pm-btn.pri { background: var(--pm-blue); border-color: var(--pm-blue); color: var(--pm-on); font-weight: 700; }
.pm-btn.pri:hover { background: var(--pm-blue-h); }
.pm-btn.ok { background: var(--pm-ok); border-color: var(--pm-ok); color: var(--pm-on); font-weight: 700; }
.pm-btn.bad { background: var(--pm-bad); border-color: var(--pm-bad); color: var(--pm-on); font-weight: 700; }
.pm-inp { height: var(--pm-h); border: 1px solid var(--pm-line2); border-radius: var(--pm-r); padding: 0 12px; font: inherit; font-size: var(--pm-fs-sm); background: var(--pm-card); color: var(--pm-t1); }
.pm-inp:focus { outline: 2px solid var(--pm-blue); outline-offset: 0; border-color: var(--pm-blue); }

/* ชิปสถานะ (สีเดียวต่อความหมาย) */
.pm-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px; border-radius: var(--pm-r); font-size: var(--pm-fs-xs); font-weight: 700; white-space: nowrap;
  background: var(--pm-hover); color: var(--pm-t2); }
.pm-chip.ok { background: var(--pm-ok-soft); color: var(--pm-ok); }
.pm-chip.bad { background: var(--pm-bad-soft); color: var(--pm-bad); }
.pm-chip.warn { background: var(--pm-warn-soft); color: var(--pm-warn); }
.pm-chip.blue { background: var(--pm-blue-soft); color: var(--pm-blue-ink); }
.pm-chip.red { background: var(--pm-bad); color: var(--pm-on); }

/* กล่องสลับ/ตัวกรอง (PATTERN §5.3) */
.pm-seg { display: inline-flex; background: var(--pm-seg); border-radius: 10px; padding: 4px; gap: 4px; }
.pm-seg button { border: 0; background: none; border-radius: var(--pm-r); padding: 6px 16px; font: inherit; font-size: var(--pm-fs-sm); color: var(--pm-t2); cursor: pointer; white-space: nowrap; }
.pm-seg button.on { background: var(--pm-blue); color: var(--pm-on); font-weight: 700; }
.pm-seg .n { font-size: var(--pm-fs-xs); font-weight: 700; color: var(--pm-t3); margin-left: 4px; }
.pm-seg button.on .n { color: var(--pm-blue-pale); }

/* การ์ด + หัวการ์ดฟ้าอ่อน */
.pm-card { background: var(--pm-card); border: 1px solid var(--pm-line); border-radius: var(--pm-r-card); overflow: hidden; }
.pm-card > .pm-hd { background: var(--pm-blue-soft); color: var(--pm-blue-ink); font-weight: 700; padding: 12px 16px; display: flex; gap: 12px; align-items: center; font-size: var(--pm-fs-sm); }
.pm-card > .pm-hd .pm-right { margin-left: auto; display: flex; gap: 8px; }

/* ตัวเลขเด่น */
.pm-kpi { display: flex; gap: 16px; }
.pm-kpi > div { flex: 1; background: var(--pm-card); border: 1px solid var(--pm-line); border-radius: var(--pm-r-card); padding: 12px 16px; }
.pm-kpi small { display: block; font-size: var(--pm-fs-xs); color: var(--pm-t3); }
.pm-kpi b { font-size: var(--pm-fs-n); font-variant-numeric: tabular-nums; }

/* ตาราง 1 บรรทัดต่อรายการ · ตัวเลขชิดขวา · แถวเลือก = น้ำเงินเข้มตัวขาว */
.pm-table { width: 100%; border-collapse: collapse; font-size: var(--pm-fs-sm); }
.pm-table th { text-align: left; font-size: var(--pm-fs-xs); font-weight: 700; padding: 8px 12px; white-space: nowrap; background: var(--pm-th); color: var(--pm-t2); }
.pm-table td { padding: 8px 12px; border-top: 1px solid var(--pm-line); white-space: nowrap; }
.pm-table .n { text-align: right; font-variant-numeric: tabular-nums; }
.pm-table tr:hover td { background: var(--pm-hover); }
.pm-table tr.sel td { background: var(--pm-blue); color: var(--pm-on); }

/* ป้ายคลัง "คลัง X" สีประจำคลัง */
.pm-wh { display: inline-flex; align-items: center; height: 28px; padding: 0 8px; border-radius: var(--pm-r); color: var(--pm-on); font-weight: 700; font-size: var(--pm-fs-xs); white-space: nowrap; background: var(--pm-wh-A); }
.pm-wh.B { background: var(--pm-wh-B); } .pm-wh.M { background: var(--pm-wh-M); } .pm-wh.P { background: var(--pm-wh-P); } .pm-wh.T { background: var(--pm-wh-T); }

/* ⓘ คำอธิบาย */
.pm-i { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--pm-t3); font-size: var(--pm-fs-xs); color: var(--pm-t3); cursor: help; }

/* แถบแจ้งผล (กำลังบันทึก/สำเร็จ/พลาด) */
.pm-toast { position: fixed; right: 24px; bottom: 24px; background: var(--pm-t1); color: var(--pm-on); border-radius: var(--pm-r-card); padding: 12px 16px; font-size: var(--pm-fs-sm); font-weight: 700; display: flex; gap: 8px; }
.pm-toast.ok { background: var(--pm-ok); } .pm-toast.bad { background: var(--pm-bad); }

/* ===== มือถือ: หน้าแยก *-m.html ใส่ class pm-m ที่ body ===== */
.pm-m { min-height: 100vh; display: flex; flex-direction: column; }
.pm-m .pm-mtop { position: sticky; top: 0; z-index: 5; background: var(--pm-blue); color: var(--pm-on); height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 12px; }
.pm-m .pm-mtop .pm-back { width: 40px; height: 40px; border-radius: var(--pm-r); background: rgba(255,255,255,.18); color: var(--pm-on); border: 0; font-size: var(--pm-fs-h); display: grid; place-items: center; }
.pm-m .pm-mtop b { flex: 1; font-size: var(--pm-fs); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-m .pm-mbody { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.pm-m .pm-mcard { background: var(--pm-card); border: 1px solid var(--pm-line); border-radius: var(--pm-r-card); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.pm-m .pm-mrow { display: flex; align-items: center; gap: 8px; font-size: var(--pm-fs-sm); }
.pm-m .pm-mrow .pm-num { margin-left: auto; font-weight: 700; font-size: var(--pm-fs-h); font-variant-numeric: tabular-nums; }
.pm-m .pm-scan { height: var(--pm-h-m); border: 2px solid var(--pm-blue); border-radius: var(--pm-r-card); padding: 0 12px; font: inherit; font-size: var(--pm-fs-sm); background: var(--pm-card); width: 100%; }
.pm-m .pm-seg { display: flex; } .pm-m .pm-seg button { flex: 1; padding: 8px 0; }
.pm-m .pm-btn, .pm-m .pm-inp { height: var(--pm-h-m); font-size: var(--pm-fs); }
.pm-m .pm-mfoot { position: sticky; bottom: 0; padding: 12px; background: var(--pm-card); border-top: 1px solid var(--pm-line); display: flex; gap: 8px; }
.pm-m .pm-mfoot .pri { flex: 1; }
.pm-m .pm-toast { left: 12px; right: 12px; bottom: 84px; }