/* โครงหน้าเว็บ + sidebar — ใช้ร่วมทุกหน้า */
:root{
  /* หมึก/เส้น/พื้น อมน้ำเงินอ่อน ๆ ตามสีแบรนด์ (ไม่ใช่เทากลางสำเร็จรูป)
     ink3 = ค่าที่เบาที่สุดที่ยังได้ 4.5:1 บนพื้นการ์ดและพื้นหน้า */
  --ink:#1B2430; --ink2:#414F5F; --ink3:#616C79;
  --bg:#F4F6F8; --card:#fff; --rule:#DCE1E7; --rule2:#EDF0F3;
  /* น้ำเงินหมึก ไม่ใช่ Material blue — เข้มพอให้ตัวหนังสือขาวบนปุ่มได้ 7:1 */
  --acc:#1A4E8A; --acc-bg:#E7EEF7;
  /* short/over เข้มพอให้ได้ 4.5:1 ตอนนั่งบนพื้นสีของตัวเอง ไม่ใช่แค่บนขาว */
  --short:#B32B2B; --short-bg:#FBECEC;
  --over:#12704F; --over-bg:#E8F5EF;
  /* โซนผลิต — ใช้ชุดเดียวกับหน้าผังกระบวนการ (อำพัน = Unclean · น้ำเงินหมึก = Clean) */
  --unclean:#A8560A; --unclean-bg:#FBF0E1;
  --clean:#1A4E8A;   --clean-bg:#E7EEF7;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Anuphan","IBM Plex Sans Thai",-apple-system,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  display:flex;align-items:flex-start}

/* ---------- sidebar ---------- */
#side{flex:0 0 208px;width:208px;height:100vh;position:sticky;top:0;
  border-right:1px solid var(--rule);padding:22px 14px;display:flex;flex-direction:column;gap:4px;background:#fff}
#side h1{margin:0 0 18px;padding:0 10px;font-size:20px;font-weight:700;letter-spacing:-.02em}
#side h1 small{display:block;font-weight:600;font-size:11.5px;color:var(--ink3);line-height:1.2;margin-top:2px}
#side a{font-size:14px;font-weight:600;text-decoration:none;color:var(--ink2);
  padding:10px 12px;border-radius:10px;white-space:nowrap;transition:background .15s,color .15s}
#side a:hover{background:#F5F5F5;color:var(--ink)}
#side a.on{background:var(--acc);color:#fff}

main{flex:1;min-width:0;padding-bottom:28px}
main>.wrap{max-width:1080px;margin:0 auto;padding:0 28px}

@media (max-width:860px){
  body{display:block}
  #side{width:auto;height:auto;position:sticky;top:0;z-index:30;flex-direction:row;align-items:center;
    gap:6px;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--rule);padding:12px 16px}
  #side h1{margin:0 12px 0 0}
  main>.wrap{padding:0 16px}
}
@media print{ #side{display:none} }

/* ปุ่มดาวน์โหลดในไซด์บาร์ */
#side .dl{margin-top:14px;font:inherit;font-size:13.5px;font-weight:700;text-align:left;
  padding:10px 12px;border-radius:10px;border:1.5px solid var(--rule);background:#fff;color:var(--ink2);cursor:pointer}
#side .dl:hover{border-color:var(--acc);color:var(--acc)}
@media (max-width:860px){ #side .dl{margin-top:0} }
/* แถบบันทึกค่า — **ล่างสุดของเมนูซ้าย** แยกสีจากเมนู (ผู้ใช้สั่ง 24 ก.ย. "เอาลงมาล่างสุดเลย ทำสีให้ต่างหน่อยเดี๋ยวงง")
   เมนูที่เลือกอยู่เป็นน้ำเงิน (--acc) ปุ่มนี้จึงใช้เขียว (--over) ไม่ให้สับสน */
#svbar{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule)}
#side .dl.save{margin-top:0;width:100%;text-align:center;border-color:var(--over);background:var(--over);color:#fff}
#side .dl.save:hover{filter:brightness(1.12);border-color:var(--over);color:#fff}
#svbar .svst{margin-top:7px;font-size:11.5px;font-weight:700;line-height:1.45;color:var(--over)}
#svbar .svst.dirty,#svbar .svst.bad{color:var(--short)}
@media (max-width:860px){ #svbar{margin-top:0;padding-top:0;border-top:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  #svbar .dl.save{width:auto} #svbar .svst{margin-top:0} }