*{box-sizing:border-box}
:root{--navy:#1f3a5f;--bg:#f4f5f7;--line:#e3e6eb;--ink:#1d2330;--muted:#667085}
body{margin:0;font-family:system-ui,"Sarabun","Noto Sans Thai",sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5}
h2{font-size:18px;margin:0 0 12px}
h3{font-size:16px;margin:0 0 10px}
.muted{color:var(--muted);font-size:13px}
.center{text-align:center;padding:40px 16px}

header{background:var(--navy);color:#fff;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
header .who{font-size:13px;display:flex;align-items:center;gap:10px}
header button{background:rgba(255,255,255,.15);color:#fff;border:none;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:13px}
nav{display:flex;gap:4px;padding:8px 12px;background:#fff;border-bottom:1px solid var(--line);overflow-x:auto;position:sticky;top:0;z-index:5}
nav button{border:none;background:none;padding:9px 13px;border-radius:6px;cursor:pointer;white-space:nowrap;font-size:14px;color:#445;font-family:inherit}
nav button.on{background:var(--navy);color:#fff}
main{padding:16px;max-width:1100px;margin:auto}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.card{background:#fff;border-radius:10px;padding:14px;border:1px solid var(--line)}
.card .n{font-size:26px;font-weight:600}
.card .l{color:var(--muted);font-size:13px}
.panel{background:#fff;border-radius:10px;padding:16px;border:1px solid var(--line);margin-bottom:16px}

.scroll{overflow-x:auto;background:#fff;border-radius:10px;border:1px solid var(--line);margin-bottom:16px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:9px 10px;border-bottom:1px solid #eef0f3;text-align:left;white-space:nowrap}
th{background:#f0f3f7;font-weight:600}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:none}

.tag{padding:2px 9px;border-radius:10px;font-size:12px;background:#e8ecf2;color:#34495e;white-space:nowrap}
.tag.ok{background:#e0f5e9;color:#17703a}
.tag.wait{background:#fff3d6;color:#8a5a00}
.tag.low{background:#fde3e3;color:#a11c1c}
.tag.run{background:#e1ecfb;color:#1d4f91}

label{display:block;font-size:13px;color:#445;margin-bottom:4px}
input,select,textarea{width:100%;padding:9px 10px;border:1px solid #cdd3dc;border-radius:7px;font-size:15px;font-family:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid #9bb8dd;border-color:#6f97c9}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:12px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.row > *{flex:1;min-width:140px}
.row > button{flex:0 0 auto;min-width:0}

button.act{background:var(--navy);color:#fff;border:none;padding:9px 16px;border-radius:7px;cursor:pointer;font-size:14px;font-family:inherit}
button.act.sm{padding:6px 11px;font-size:13px}
button.act.ghost{background:#fff;color:var(--navy);border:1px solid var(--navy)}
button.act:disabled{background:#b8c0cc;border-color:#b8c0cc;color:#fff;cursor:not-allowed}

.login{max-width:360px;margin:8vh auto;padding:0 16px}
.login h1{font-size:22px;text-align:center;margin-bottom:4px}
.login .panel > div{margin-bottom:12px}
.err{background:#fde3e3;color:#a11c1c;padding:9px 12px;border-radius:7px;font-size:14px;margin-bottom:12px}

.job{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px}
.job .top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;margin-bottom:6px}
.job .code{font-weight:600}
.job .meta{color:var(--muted);font-size:13px;margin-bottom:10px}
.job .qty{font-size:22px;font-weight:600}
.job button{width:100%;padding:12px;font-size:15px}

#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#1d2330;color:#fff;padding:10px 16px;border-radius:8px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw;z-index:20}
#toast.show{opacity:1}
#toast.bad{background:#a11c1c}

@media (max-width:640px){
  main{padding:12px}
  th,td{padding:8px 8px;font-size:13px}
}

details.po{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:12px;overflow:hidden}
details.po > summary{padding:12px 14px;cursor:pointer;list-style:none}
details.po > summary::-webkit-details-marker{display:none}
details.po[open] > summary{border-bottom:1px solid var(--line);background:#f8fafc}
.po-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:flex-start}
.po-head b{font-size:16px}
.po-tags{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.po-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
details.po .scroll{border:none;border-radius:0;margin:0}

/* ---------- แดชบอร์ดสถานะโรงงาน ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:12px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.kpi-l{font-size:13px;color:var(--muted)}
.kpi-n{font-size:32px;font-weight:650;line-height:1.2;margin:2px 0}
.kpi-s{font-size:12px;color:var(--muted)}
.dash-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.dash-head h3{margin:0}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.sw{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}
/* ขั้นการผลิต: น้ำเงินเฉดเดียว อ่อนไปเข้มตามความคืบหน้า (ผ่านการตรวจ ordinal ramp) */
.s0{background:#86b6ef}.s1{background:#5598e7}.s2{background:#2a78d6}.s3{background:#184f95}.s4{background:#0d366b}
.seg{display:flex;gap:2px;height:14px;border-radius:5px;overflow:hidden;background:#fff}
.seg span{min-width:4px;border-radius:2px}
.seg span:first-child{border-radius:5px 2px 2px 5px}
.seg span:last-child{border-radius:2px 5px 5px 2px}
.seg span:only-child{border-radius:5px}
.seg span:hover{filter:brightness(1.12)}
.seg.empty{background:#eef0f3}
.rooms{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:20px}
.roomcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
.room-n{font-size:28px;font-weight:650;line-height:1.2;margin-bottom:10px}
.room-n span{font-size:13px;font-weight:400;color:var(--muted)}
.stages{margin:12px 0 10px;font-size:14px}
.stages div{display:flex;align-items:center;gap:8px;padding:3px 0}
.stages span{flex:1}
.stages b{font-variant-numeric:tabular-nums;font-weight:600}
.stages .zero{color:#98a2b3}
.stages .zero b{font-weight:400}
.stages .zero .sw{opacity:.35}
.room-po{font-size:13px;border-top:1px solid #eef0f3;padding-top:10px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}

.modal{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.modal-box{background:#fff;border-radius:12px;padding:20px;max-width:420px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.modal-box p{margin:0 0 16px;line-height:1.6}
.modal-acts{display:flex;justify-content:flex-end;gap:8px}

/* ---------- รูปถ่ายตอนแพ็คเสร็จ ---------- */
.photos{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 14px;border-bottom:1px solid #eef0f3}
.photos img{width:76px;height:76px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.photo-add{display:inline-flex;align-items:center;cursor:pointer;height:36px;margin:0;padding:0 14px;border:1px solid var(--navy);border-radius:7px;background:#fff;color:var(--navy);font-size:14px}
.photo-add:hover{background:#f0f4f9}
.photo-add.busy{opacity:.5;pointer-events:none}

/* ---------- ลบรูป ---------- */
.photo{position:relative}
.photo-del{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;border:2px solid #fff;background:#a11c1c;color:#fff;font-size:15px;line-height:1;cursor:pointer;padding:0}
.photo-del:disabled{opacity:.5}

/* ---------- ขั้นตอนของออเดอร์ ---------- */
.stepper{display:flex;margin-top:12px;gap:0}
.stepper div{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:#98a2b3;position:relative;text-align:center;min-width:0}
.stepper div::before{content:"";position:absolute;top:11px;left:-50%;width:100%;height:2px;background:#dfe3ea}
.stepper div:first-child::before{display:none}
.stepper i{position:relative;z-index:1;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid #cdd3dc;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;font-weight:600;color:#98a2b3}
.stepper .done{color:#445}
.stepper .done i{background:#256abf;border-color:#256abf;color:#fff}
.stepper .done::before,.stepper .cur::before{background:#256abf}
.stepper .cur{color:var(--ink);font-weight:600}
.stepper .cur i{border-color:#256abf;color:#256abf;box-shadow:0 0 0 4px #dbe9fb}
.step-note{margin-top:8px}
.step-note b{color:var(--ink)}
@media (max-width:480px){.stepper span{font-size:11px}}

/* ---------- แดชบอร์ดคลัง ---------- */
.notice{border-left:4px solid #b7791f;background:#fffaf0}
.needs{padding:4px 16px}
.need{display:grid;grid-template-columns:minmax(180px,1.2fr) minmax(200px,2fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #eef0f3}
.need:last-child{border-bottom:none}
.need-name{display:flex;flex-direction:column;min-width:0}
.need-name b{font-weight:600}
.need-bar{display:flex;flex-direction:column;gap:5px;font-size:13px}
.need-bar b{color:var(--ink)}
.meter{height:8px;border-radius:4px;background:#eef0f3;overflow:hidden}
.meter span{display:block;height:100%;border-radius:4px;min-width:0}
.meter.low span{background:#b7791f}
.meter.out{background:#f6d5d5}
@media (max-width:640px){.need{grid-template-columns:1fr auto}.need-bar{grid-column:1 / -1;grid-row:2}}

/* ---------- สแกนรับเข้า / ป้าย QR / ตรวจของตามออเดอร์ ---------- */
.scan-hit{margin-top:12px;padding:10px 12px;border-radius:8px;background:#eef6ee;border:1px solid #cfe6cf}
.labels{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.label{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid #cdd3dc;border-radius:8px;padding:10px;break-inside:avoid}
.label .qr{width:84px;height:84px;flex:none}
.label .qr svg{width:100%;height:100%;display:block}
.label-t{display:flex;flex-direction:column;min-width:0;font-size:12px;line-height:1.35}
.label-t b{font-size:13px;word-break:break-all}
.need-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding:14px;border-bottom:1px solid #eef0f3}
.need-sum h3{font-size:14px;margin-bottom:6px}
.need-sum td{padding:5px 0;white-space:normal}
@media print{
  header,nav,.no-print,#toast{display:none !important}
  body{background:#fff}
  main{max-width:none;padding:0}
  .labels{grid-template-columns:repeat(3,1fr);gap:4mm}
  .label{border:1px solid #999;border-radius:0;padding:3mm}
}

/* =====================================================================
   ธีม Lemongrass House: เขียว #a3b03a, เหลือง #f8f290, น้ำตาล #644f3e
   (ค่าสีอ่านจากแผ่นโลโก้ของแบรนด์) วางท้ายไฟล์เพื่อทับสไตล์เดิม
   ===================================================================== */
:root{
  --green:#a3b03a;--green-d:#707c14;--green-soft:#eef1d6;
  --yellow:#f8f290;--yellow-soft:#fdfbdc;
  --brown:#644f3e;--brown-d:#4a3a2c;
  --navy:var(--brown);            /* ปุ่มหลักและแท็บที่เลือกใช้น้ำตาล (ตัวอักษรขาวอ่านชัด) */
  --bg:#f7f5ec;--line:#e4dfd0;--ink:#33291f;--muted:#6f6557;
}
body{font-family:"IBM Plex Sans Thai",system-ui,"Sarabun","Noto Sans Thai",sans-serif;background:var(--bg);color:var(--ink)}
h2{font-size:19px;font-weight:600;color:var(--brown-d)}
h3{color:var(--brown-d)}
a{color:var(--green-d)}
input:focus,select:focus,textarea:focus{outline:2px solid #c9d37a;border-color:var(--green-d)}
input,select,textarea{border-color:#d6d0c0;min-height:42px}
input[type=checkbox]{min-height:0}

/* ส่วนหัว: พื้นเขียวแบรนด์ โลโก้ตัดจากแผ่นโลโก้ */
header{background:var(--green);color:var(--brown-d);padding:8px 16px}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{width:42px;height:42px;flex:none;border-radius:50%;
  background:var(--green)}
.brand b{display:block;font-size:15px;letter-spacing:.06em;line-height:1.1}
.brand span{font-size:12.5px;opacity:.9}
header .who{color:var(--brown-d);font-size:13px}
header button{background:var(--brown);color:#fff;min-height:36px;padding:6px 14px;border-radius:8px}
header button:hover{background:var(--brown-d)}

/* เมนูหลัก (กลุ่ม) และเมนูรอง (หน้าในกลุ่ม) */
#nav{display:flex;gap:4px;padding:6px 12px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:6;overflow:visible}
#nav button{display:flex;align-items:center;gap:8px;border:none;background:none;padding:9px 14px;border-radius:10px;cursor:pointer;
  font-family:inherit;font-size:15px;color:var(--muted);min-height:44px;white-space:nowrap}
#nav button:hover{background:var(--green-soft);color:var(--brown-d)}
#nav button.on{background:var(--brown);color:#fff}
.subnav{display:flex;gap:6px;padding:8px 12px;background:var(--yellow-soft);border-bottom:1px solid var(--line);overflow-x:auto}
.subnav[hidden]{display:none}
.subnav button{border:1px solid transparent;background:none;padding:7px 14px;border-radius:999px;cursor:pointer;font-family:inherit;font-size:14px;
  color:var(--brown);white-space:nowrap;min-height:38px}
.subnav button:hover{background:#fff}
.subnav button.on{background:#fff;border-color:var(--green-d);color:var(--brown-d);font-weight:600}

/* ปุ่ม */
button.act{background:var(--brown);border-radius:8px;min-height:42px;font-weight:500}
button.act:hover:not(:disabled){background:var(--brown-d)}
button.act.sm{min-height:36px;padding:6px 12px}
button.act.ghost{background:#fff;color:var(--brown);border:1px solid var(--brown)}
button.act.ghost:hover:not(:disabled){background:var(--green-soft)}
button.act:disabled{background:#c9c2b3;border-color:#c9c2b3}
.photo-add{border-color:var(--brown);color:var(--brown)}

/* การ์ดและตาราง */
.panel,.card,.kpi,.roomcard,details.po,.scroll{border-color:var(--line);border-radius:12px}
.kpi-n{color:var(--brown-d)}
th{background:#f1eee1;color:var(--brown-d)}
td,th{border-bottom-color:#eeeadc}
details.po[open] > summary{background:var(--yellow-soft)}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.page-head h2{margin:0}
.page-acts{display:flex;gap:8px;flex-wrap:wrap}
.todo{padding:4px 16px}
.todo-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #eeeadc}
.todo-row:last-child{border-bottom:none}
.todo-row > div{display:flex;flex-direction:column;min-width:0}
.todo-row b{font-weight:600}

/* ป้ายสถานะ: เทา = รอ, เหลือง = กำลังทำ, เขียว = เสร็จ/ปกติ, ส้ม = เตือน, แดง = มีปัญหา */
.tag{background:#ece8dc;color:#5b5145}
.tag.run{background:var(--yellow);color:var(--brown-d)}
.tag.ok{background:#e3e9b8;color:#4a5408}
.tag.wait{background:#fde9c8;color:#8a5a00}
.tag.low{background:#fde3e3;color:#a11c1c}

/* แผนภูมิและขั้นตอน: เขียวเฉดเดียว อ่อนไปเข้ม (ผ่านการตรวจ ordinal ramp) */
.s0{background:#aab73c}.s1{background:#8d9a26}.s2{background:#707c14}.s3{background:#525c0a}.s4{background:#343b05}
.stepper .done i{background:var(--green-d);border-color:var(--green-d)}
.stepper .done::before,.stepper .cur::before{background:var(--green-d)}
.stepper .cur i{border-color:var(--brown);color:var(--brown);box-shadow:0 0 0 4px var(--yellow)}
.scan-hit{background:var(--green-soft);border-color:#d5dba6}
.notice{border-left-color:var(--green-d);background:var(--yellow-soft)}
.login h1{color:var(--brown-d)}

@media print{.subnav{display:none !important}}

/* ---------- มือถือ ---------- */
@media (max-width:640px){
  header{padding:8px 12px}
  header .who > span{display:none}
  /* เมนูหลักเป็นแถบล่าง กดถึงด้วยนิ้วโป้ง */
  #nav{position:fixed;left:0;right:0;bottom:0;top:auto;justify-content:space-around;gap:0;padding:4px 4px calc(4px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);border-bottom:none;box-shadow:0 -4px 16px rgba(60,45,30,.08);z-index:10}
  #nav button{flex:1;flex-direction:column;gap:2px;padding:6px 2px;font-size:11.5px;min-height:54px;border-radius:10px;justify-content:center}
  #nav button.on{background:var(--green-soft);color:var(--brown-d);font-weight:600}
  .subnav{position:sticky;top:0;z-index:6}
  main{padding:12px 12px 92px}
  #toast{bottom:78px}
  button.act,button.act.sm{min-height:44px}
  .filters > *{min-width:calc(50% - 4px)}

  /* ตารางเป็นการ์ด: หนึ่งรายการต่อหนึ่งบล็อก ชื่อคอลัมน์อยู่ซ้าย ค่าอยู่ขวา */
  table.rt,table.rt tbody{display:block}
  table.rt tr:has(th){display:none}
  table.rt tr{display:block;padding:12px 14px;border-bottom:1px solid #eeeadc}
  table.rt tr:last-child{border-bottom:none}
  table.rt td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:4px 0;border:none;white-space:normal;text-align:right}
  table.rt td::before{content:attr(data-label);color:var(--muted);font-size:13px;text-align:left;flex:none}
  table.rt td:first-child{display:block;text-align:left;font-weight:600;padding-bottom:6px}
  table.rt td:first-child::before,table.rt td.acts::before{content:none}
  table.rt td.acts{justify-content:flex-end;gap:8px;padding-top:8px}
  table.rt td.acts:empty{display:none}
  table.rt td input{width:120px !important}
}

/* ---------- โลโก้ใหม่ (logo.png): ตัวอักษรเขียวและน้ำตาล จึงใช้ส่วนหัวพื้นขาว มีเส้นเขียวแบรนด์ด้านล่าง ---------- */
header{background:#fff;border-bottom:3px solid var(--green);padding:8px 16px}
.brand{gap:12px}
.logo-img{height:44px;width:auto;display:block}
.app-name{font-size:13px;color:var(--muted);padding-left:12px;border-left:1px solid var(--line);white-space:nowrap}
.login-logo{display:block;width:100%;max-width:300px;height:auto;margin:0 auto 12px}
.login h1{font-size:18px}
@media (max-width:640px){
  .logo-img{height:34px}
  .app-name{display:none}
}

.todo-row button{white-space:nowrap;flex:none}

.steps-list{margin:0 0 12px;padding-left:20px;color:var(--muted);font-size:14px;line-height:1.7}
.steps-list b{color:var(--ink)}