/* ============================================================================
   jd-ds.css — JD Purchase Design System (เฟส 0)
   ที่มา: design_handoff_jd_purchase/README.md + designs/*.dc.html
   ห้ามใส่สีดิบในหน้าเว็บ — ใช้ token จากไฟล์นี้เท่านั้น
   หมายเหตุ: ไฟล์นี้ "ไม่แทนที่" jd.css เดิม หน้าเก่ายังใช้ jd.css ได้ตามปกติ
             หน้าที่ย้ายมาธีมใหม่แล้วให้โหลดเฉพาะ jd-ds.css (ไม่ต้องโหลด Bootstrap)
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* --- Forest green --- */
  --green-900:#0f3d24;  --green-800:#14402a;  --green-700:#276b4a;
  --green-600:#2c5f45;  --green-500:#4f8f6d;  --green-400:#74a892;
  --green-300:#9cc2ae;  --green-200:#b9d4c3;
  --green-100:#dfeae3;  --green-100b:#e7f0ea;
  --green-50:#eef5ef;   --green-50b:#f2f8f4;

  /* --- Neutrals --- */
  --bg-page:#e9ece8;    --bg-body:#f4f6f3;    --bg-card:#ffffff;
  --bg-subtle:#fbfcfb;  --bg-thead:#f1f4f2;   --bg-head-soft:#f7faf8;
  --border:#dbe3dd;     --border-strong:#c2cec6; --border-row:#eef1ef;
  --border-col:#b7c6bc; --border-pin:#d3ddd6;  --border-line:#e8ede9;
  --text:#1c2620;       --text-2:#35443c;     --text-3:#4a564f;
  --text-muted:#5b6660; --text-dim:#7b877f;   --text-faint:#8a9690;
  --text-faint2:#98a49d;--text-off:#a3aca7;   --text-off2:#c3cbd4;

  /* --- Semantic: แดง = ปัญหา/ด่วน --- */
  --r-bg:#fdeeec; --r-bd:#eec9c4; --r-fg:#9e2318; --r-fg-dark:#8f1f16; --r-fg-strong:#b3261e;
  /* --- ทอง = เตือน/จับตา --- */
  --a-bg:#fcf6e6; --a-bd:#e6d3a3; --a-fg:#7a5c10; --a-icon:#c98b1f; --a-accent:#e0b64a;
  /* --- ฟ้า = ข้อมูลภายนอก / Odoo --- */
  --b-bg:#eef4fa; --b-bd:#c9d8e8; --b-fg:#1c4b78; --b-icon:#2b6cb0;
  /* --- เทา = ปิดใช้งาน / ไม่มีข้อมูล --- */
  --n-bg:#f2f4f2; --n-bd:#dbe3dd; --n-fg:#5b6660;
  /* --- ม่วง = เมนูคู่ค้า / ผู้บริหาร --- */
  --v-bg:#efe6f4; --v-bd:#ddc9e8; --v-fg:#5b3c73; --v-accent:#8a6bb8;
  --v-thead:#eeeaf1; --v-thead-fg:#473c50; --v-thead-line:#ddd6e2;
  /* --- ครีม = แถบแบ่งกลุ่มเกรด --- */
  --c-bg:#f0ece0; --c-bd:#ddd2b6; --c-fg:#6b5320;
  /* --- ตารางข้อมูลภายนอก (P16) --- */
  --x-thead:#e8edf4; --x-thead-fg:#33475e; --x-thead-line:#d3dce8;

  /* --- ลักษณะสินค้า — ใช้ตรงกันทุกหน้า (user เลือกเอง 30/08/2026 แทนชุดใน design) --- */
  --ws-bg:#eef4fa; --ws-fg:#1c4b78; --ws-bd:#c9d8e8;   /* ก้าน (WS) = น้ำเงิน */
  --sl-bg:#fcf4de; --sl-fg:#7a5c10; --sl-bd:#e6d3a3;   /* เด็ด (Stemless) = เหลือง */
  --sc-bg:#fdeeec; --sc-fg:#9e2318; --sc-bd:#eec9c4;   /* ตัด (Stemcut) = แดง */
  --sp-bg:#efe6f4; --sp-fg:#5b3c73; --sp-bd:#ddc9e8;   /* พิเศษ (New crop/ปลอดสาร) = ม่วง */

  /* ช่วงอายุสต็อก 4 ขั้น (P10) — เขียว → ทอง → ส้ม → แดง อ่านความเร่งได้จากสีอย่างเดียว */
  --g1-bg:#e9f2ec; --g1-fg:#1f6b45; --g1-bd:#c6ddcf; --g1-bar:#3f8a5f;
  --g2-bg:#fcf6e6; --g2-fg:#7a5c10; --g2-bd:#e6d3a3; --g2-bar:#d9ac3a;
  --g3-bg:#fdefe1; --g3-fg:#8a4b12; --g3-bd:#f0cfa9; --g3-bar:#e08a35;
  --g4-bg:#fdeeec; --g4-fg:#9e2318; --g4-bd:#eec9c4; --g4-bar:#c0392b;

  /* --- ช่วงอายุสต็อก --- */
  --age-0:#4f8f6d; --age-91:#e0b64a; --age-181:#cf7c33; --age-271:#b3261e;

  /* --- Typography ---
     สเกลที่ใช้จริง (ขยับขึ้นจาก design 1–1.5px ตามที่ user ขอ 29/08/2026 — ไทยไม่มีหัว อ่านยากเมื่อเล็ก):
       11.5px  eyebrow / ป้ายหัวคอลัมน์ตัวพิมพ์ใหญ่เท่านั้น (ไม่ใช่เนื้อหา)
       13px    ป้าย tag · หัวตาราง · คำอธิบายรอง
       13.5px  คำเตือน/คำอธิบายใต้ช่อง · label ฟอร์ม
       14px    เนื้อหาหลัก · ช่องตาราง · ปุ่ม · input · ค่าเริ่มต้นของ body
       14.5px  ช่องตารางกรอกราคา · ปุ่มหลัก
       15–17px หัวการ์ด · เมนูบน · ชื่อผู้ขาย
       20–22px ตัวเลข KPI · หัวหน้า
     ปรับทั้งระบบ = แก้ที่ไฟล์นี้ไฟล์เดียว หน้าอื่นห้ามใส่ font-size เอง */
  --ff:Sarabun,"Leelawadee UI",system-ui,sans-serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,monospace;

  /* --- Radius --- */
  --r-1:2px; --r-2:3px; --r-3:4px; --r-4:5px; --r-5:6px;

  /* --- Shadow --- */
  --sh-card:0 1px 2px rgba(15,61,36,.05);
  --sh-btn:0 1px 2px rgba(15,61,36,.22);
  --sh-modal:0 18px 44px rgba(12,32,21,.34);
  --sh-screen:0 3px 14px rgba(15,61,36,.1);
  --ovr-bg:rgba(12,32,21,.5);

  /* --- Layout --- */
  --h-nav:48px; --h-sub:37px;
  --pad-hdr:13px 20px; --pad-body:16px 20px;
  --gap-in:11px; --gap-out:13px;
}

/* ------------------------------------------------------------- 2. BASE */
*,*::before,*::after{box-sizing:border-box}
body.jd{margin:0;background:var(--bg-body);font-family:var(--ff);color:var(--text);
  -webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5}
body.jd a{color:var(--green-700);text-decoration:none;font-weight:500}
body.jd a:hover{color:var(--green-900)}
.mono{font-family:var(--ff-mono)}
.up{color:var(--r-fg);font-weight:600}            /* ▲ ขึ้น = แดง */
.dn2{color:var(--green-700);font-weight:600}      /* ▼ ลง = เขียว */
.eyebrow{font:600 11.5px var(--ff-mono);letter-spacing:1.2px;color:var(--text-faint);text-transform:uppercase}
.crumb{font-size:14px;font-weight:500;color:var(--text-dim)}
.hint{font:500 13.5px/1.6 var(--ff);color:var(--text-muted);margin-top:5px}
.lbl{font:600 13.5px var(--ff);color:var(--text-3);display:block;margin-bottom:4px}
.muted{color:var(--text-muted)}
.none{color:var(--text-off2)}                     /* "—" ไม่มีข้อมูล ห้ามใส่ 0 */
.jd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --------------------------------------------------------- 3. SHELL (โครง) */
/* แถบเมนูบน */
.nb{background:var(--green-900);color:#bdd4c5;display:flex;align-items:center;gap:1px;
  padding:0 16px;height:var(--h-nav);font-size:15px;position:sticky;top:0;z-index:60}
.nb .brand,.nb a.brand:hover{color:#fff;font-weight:700;font-size:16px;letter-spacing:.4px;margin-right:22px;
  display:flex;align-items:center;gap:8px;white-space:nowrap;transition:none}
.nb .brand i.tr{color:var(--a-accent);font-size:19px}
.nb .brand img.lg{height:24px;width:auto;display:block}
.nb .brand i.hm{font-size:14px;color:#7fae95}
.nb .mi{padding:15px 12px 13px;display:flex;align-items:center;gap:6px;white-space:nowrap;
  border-bottom:3px solid transparent;cursor:pointer;color:#cfe0d6;font-weight:500;font-size:15px;
  background:none;border-top:0;border-left:0;border-right:0;text-decoration:none}
.nb .mi:hover{color:#fff;background:rgba(255,255,255,.05)}
.nb .mi.on{color:#fff;font-weight:600;border-bottom-color:var(--a-accent);background:rgba(255,255,255,.07)}
.nb .rt{margin-left:auto;display:flex;align-items:center;gap:14px;color:#a7c4b3;font-size:17px}
.nb .rt i{cursor:pointer}
.nb .sr{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-3);
  padding:6px 11px;color:#9fbcac;font-size:14px;display:flex;align-items:center;gap:8px;width:230px;cursor:pointer}
.nb .bell{position:relative;display:inline-flex}
.nb .bell b{position:absolute;top:-5px;right:-7px;background:var(--r-fg-strong);color:#fff;
  font:700 9px var(--ff);border-radius:8px;padding:1px 4px}
.nb .who{display:flex;align-items:center;gap:8px;padding-left:14px;border-left:1px solid rgba(255,255,255,.14)}
.nb .av{width:28px;height:28px;border-radius:50%;background:var(--a-accent);color:#3a2c05;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.nb .who .n1{color:#fff;font-size:14.5px;font-weight:600;line-height:1.2}
.nb .who .n2{color:#9dc4ae;font-size:13px;font-weight:500}
.nb .mi.soon{opacity:.5;cursor:default}
.nb .burger{display:none;font-size:21px;color:#fff;background:none;border:0;padding:0 8px;cursor:pointer}
.nb .menu{display:flex;align-items:center;gap:1px}

/* แถบแท็บย่อย */
.sub2{background:#fff;border-bottom:1px solid var(--border);display:flex;gap:4px;padding:0 16px;
  height:var(--h-sub);align-items:center;overflow:auto;position:sticky;top:var(--h-nav);z-index:55}
.sub2 a,.sub2 span{font-size:14.5px;color:var(--text-muted);padding:9px 12px;
  border-bottom:2px solid transparent;white-space:nowrap;text-decoration:none;font-weight:500}
.sub2 a:hover{color:var(--green-900)}
.sub2 .on{color:var(--green-900);font-weight:600;border-bottom-color:var(--green-700);background:var(--green-50b)}
.sub2 .soon{color:var(--text-off);cursor:default}
.sub2 .soon:hover{color:var(--text-off)}

/* หัวหน้า */
.hdr{background:#fff;border-bottom:1px solid var(--border);padding:var(--pad-hdr);
  display:flex;align-items:center;gap:var(--gap-out);flex-wrap:wrap}
.hdr h2{margin:2px 0 0;font-size:22px;font-weight:700;color:var(--green-900);letter-spacing:-.3px}
.hdr .sp{margin-left:auto;display:flex;align-items:center;gap:12px}
.hdr .grp{display:flex;align-items:center;gap:8px;border-left:1px solid #e3e9e5;padding-left:14px}

/* พื้นที่เนื้อหา */
.bd{background:var(--bg-body);padding:var(--pad-body);display:flex;flex-direction:column;gap:var(--gap-out);
  min-height:calc(100vh - var(--h-nav) - var(--h-sub))}
.bd.split{display:grid;grid-template-columns:1fr 348px;gap:18px;align-items:start}

/* --------------------------------------------------------- 4. CARD (.bx) */
.bx{border:1px solid var(--border);border-radius:var(--r-4);background:var(--bg-card);box-shadow:var(--sh-card)}
.bx>.h{padding:11px 14px;border-bottom:1px solid var(--border-line);background:var(--bg-head-soft);
  font-size:15px;font-weight:600;color:var(--green-900);display:flex;align-items:center;gap:8px;
  border-radius:var(--r-4) var(--r-4) 0 0}
.bx>.h.dk{background:var(--green-900);color:#fff;border-bottom:0}
.bx>.h.dk .crumb{color:#a7c4b3}
.bx>.h .sp{margin-left:auto;display:flex;align-items:center;gap:8px}
.bx>.c{padding:14px}
.bx>.c.flush{padding:0}

/* --------------------------------------------------------- 5. BUTTON */
.b,.bp,.bl2,.bsm{font:600 14.5px var(--ff);border:1px solid var(--border-strong);border-radius:var(--r-3);
  padding:7px 12px;background:#fff;color:var(--text-2);white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:background .12s,border-color .12s}
.b:hover{background:var(--green-50);border-color:var(--green-400)}
.bp{background:var(--green-700);border-color:var(--green-700);color:#fff;box-shadow:var(--sh-btn)}
.bp:hover{background:var(--green-900);border-color:var(--green-900)}
.bl2{border:0;padding:6px 4px;color:var(--green-700);background:none}
.bl2:hover{color:var(--green-900);text-decoration:underline}
.bsm{font-size:13.5px;border-radius:var(--r-2);padding:4px 9px;gap:5px}
/* <a> ที่แต่งเป็นปุ่ม ต้องใช้สีปุ่ม ไม่ใช่สีลิงก์ (body.jd a ชนะ class ปุ่มเพราะ specificity สูงกว่า) */
body.jd a.b,body.jd a.b:hover,body.jd a.bsm,body.jd a.bsm:hover{color:var(--text-2);font-weight:600}
body.jd a.bp,body.jd a.bp:hover{color:#fff;font-weight:600}
.b[disabled],.bp[disabled],.bsm[disabled]{opacity:.5;cursor:not-allowed}
.b.danger,.bsm.danger{color:var(--r-fg);border-color:var(--r-bd);background:var(--r-bg)}
.b.danger:hover,.bsm.danger:hover{background:#fbe0dc;border-color:var(--r-fg)}

/* Segmented control */
.seg{display:flex;border:1px solid var(--border-strong);border-radius:var(--r-3);overflow:hidden}
.seg span,.seg button{font:600 14px var(--ff);padding:6px 12px;color:var(--text-3);background:#fff;
  border:0;border-right:1px solid #e3e9e5;white-space:nowrap;cursor:pointer}
.seg :last-child{border-right:0}
.seg .on{background:var(--green-700);color:#fff}

/* Tabs (ในการ์ด) */
.tabs{display:flex;gap:2px}
.tabs span,.tabs button{font:600 14.5px var(--ff);color:var(--text-muted);padding:5px 12px;border-radius:var(--r-3);
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;background:none;border:0;cursor:pointer}
.tabs small{font:500 13px var(--ff-mono);color:var(--text-faint2)}
.tabs .on{background:var(--green-900);color:#fff}
.tabs .on small{color:#9dc4ae}

/* --------------------------------------------------------- 6. TAG */
.tag{font:600 13px var(--ff);background:var(--green-50);color:var(--green-900);border:1px solid #cfe0d4;
  border-radius:var(--r-2);padding:3px 8px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.tag.sm{font-size:13px;padding:2px 6px}
.tag.on{background:var(--green-700);color:#fff;border-color:var(--green-700)}
.tag.r{background:var(--r-bg);color:var(--r-fg);border-color:var(--r-bd)}
.tag.a{background:var(--a-bg);color:var(--a-fg);border-color:var(--a-bd)}
.tag.b{background:var(--b-bg);color:var(--b-fg);border-color:var(--b-bd)}
.tag.n{background:var(--n-bg);color:var(--n-fg);border-color:var(--n-bd)}
.tag.v{background:var(--v-bg);color:var(--v-fg);border-color:var(--v-bd)}
.tag.ws{background:var(--ws-bg);color:var(--ws-fg);border-color:var(--ws-bd)}
.tag.sl{background:var(--sl-bg);color:var(--sl-fg);border-color:var(--sl-bd)}
.tag.sc{background:var(--sc-bg);color:var(--sc-fg);border-color:var(--sc-bd)}
.tag.sp2{background:var(--sp-bg);color:var(--sp-fg);border-color:var(--sp-bd)}   /* พิเศษ */
/* ช่วงอายุ — ต้องขึ้นต้น age ห้ามใช้ .g1-.g4 เพราะ .g2/.g3/.g4 เป็น grid utility (ชิพจะกลายเป็น grid) */
.tag.age1{background:var(--g1-bg);color:var(--g1-fg);border-color:var(--g1-bd)}
.tag.age2{background:var(--g2-bg);color:var(--g2-fg);border-color:var(--g2-bd)}
.tag.age3{background:var(--g3-bg);color:var(--g3-fg);border-color:var(--g3-bd)}
.tag.age4{background:var(--g4-bg);color:var(--g4-fg);border-color:var(--g4-bd)}

/* --------------------------------------------------------- 7. INPUT */
.in{border:1px solid var(--border-strong);border-radius:var(--r-3);background:#fff;color:var(--text);
  font:14px var(--ff);padding:6px 10px;display:flex;align-items:center;gap:7px}
.in::placeholder{color:#8b968f}
.in.v{color:var(--text);font-weight:500}
.in:focus,.in.fc{outline:0;border-color:var(--green-700);box-shadow:0 0 0 3px rgba(39,107,74,.15);
  color:var(--text);font-weight:600}
select.in,input.in,textarea.in{width:100%;display:block}
.sw{display:inline-flex;align-items:center;gap:6px;font:500 14px var(--ff);color:var(--text-3);
  white-space:nowrap;cursor:pointer}
.sw i{font-size:17px;color:var(--green-700)}
.sw.off i{color:var(--text-off)}
.sw.off{color:var(--text-muted)}

/* แถบตัวกรอง */
.fbar{display:flex;align-items:stretch;border:1px solid #c8d3cc;border-radius:var(--r-4);
  background:#fff;overflow:hidden;flex-wrap:wrap}
.fbar .fg{display:flex;align-items:center;gap:8px;padding:8px 13px;border-right:1px solid #e3e9e5}
.fbar .fg:last-child{border-right:0}
.fbar .fg.sp{margin-left:auto}
.fbar .fl{font:600 11.5px var(--ff-mono);letter-spacing:.9px;color:var(--text-faint2);text-transform:uppercase}
.fsel{font:600 15px var(--ff);color:var(--green-900);display:inline-flex;align-items:center;gap:8px;
  background:none;border:0;cursor:pointer}

/* Inline edit — บันทึกทันทีเมื่อออกจากช่อง ไม่มีปุ่ม Save */
.cell{border:1px solid #d7e0da;border-radius:var(--r-2);background:var(--bg-subtle);padding:3px 7px;
  display:inline-flex;align-items:center;gap:5px;min-width:64px;font:500 13.5px var(--ff-mono);
  color:var(--text);text-align:right}
.cell:focus{outline:0;border-color:var(--green-700);box-shadow:0 0 0 2px rgba(39,107,74,.15);background:#fff}
.cell.n{background:var(--n-bg);color:var(--text-off);border-style:dashed}
.cell.w{border-color:var(--a-bd);background:var(--a-bg)}
.cell.saving{border-color:var(--green-400)}
.cell.saved{animation:jd-saved .9s ease}
@keyframes jd-saved{0%{background:var(--green-100b)}100%{background:var(--bg-subtle)}}

/* Chip picker */
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chips .tag{cursor:pointer;user-select:none}

/* --------------------------------------------------------- 8. TABLE */
.t{width:100%;border-collapse:collapse;font-size:14px}
.t th{background:var(--bg-thead);border-bottom:1px solid #dde5e0;padding:8px 11px;text-align:left;
  color:var(--text-3);font-weight:600;font-size:13px;white-space:nowrap}
.t td{border-bottom:1px solid var(--border-row);padding:8px 11px;color:var(--text-2);
  white-space:nowrap;font-weight:500}
.t tbody tr:hover td{background:#f7faf8}
.t td.num,.t th.num{text-align:right}
.t td.num{font-family:var(--ff-mono);font-weight:500}
.t td.ctr,.t th.ctr{text-align:center}
.t td.ed{background:var(--bg-subtle);color:#96a19a}
.t td.mrg{padding:0}
/* คอลัมน์ตรึงซ้าย */
.t td.pin,.t th.pin{position:sticky;left:0;background:#fff;border-right:2px solid var(--border-pin);z-index:2}
.t th.pin{background:var(--bg-thead);z-index:3}
/* เส้นคู่แนวดิ่งคั่นกลุ่มคอลัมน์ */
.divl{border-left:2px solid var(--border-col) !important}
/* หัวกลุ่ม (collapsible) */
.t tr.grp td{background:var(--green-100b);color:var(--green-900);font-weight:700;font-size:13px;cursor:pointer}
.t tr.grp td.pin{background:var(--green-100b)}
.t tr.grp .cr{transition:transform .15s;display:inline-block}
.t tr.grp.cl .cr{transform:rotate(-90deg)}
/* แถบแบ่งกลุ่มเกรด (ครีม) */
.t tr.sep td{background:var(--c-bg);color:var(--c-fg);font-weight:700;font-size:13px;letter-spacing:.3px;
  padding:5px 9px;border-top:1px solid var(--c-bd);border-bottom:1px solid var(--c-bd)}
.t tr.sep td.pin{background:var(--c-bg)}
/* แถวรวม */
.t tr.sum td{background:#eef2ef;color:var(--green-900);font-weight:700;border-bottom:2px solid #dbe3dd}
.t tr.sum td.pin{background:#eef2ef}
.t tr.hi td{background:#fdf7f6}
.t tr.off td{opacity:.55}
.t tr.best td{background:var(--green-50b)}
/* ตารางข้อมูลภายนอก / เมนูคู่ค้า */
.t.ext th{background:var(--x-thead);color:var(--x-thead-fg);border-bottom-color:var(--x-thead-line)}
.t.ext th.pin{background:var(--x-thead)}
.t.par th{background:var(--v-thead);color:var(--v-thead-fg);border-bottom-color:var(--v-thead-line)}
.t.par th.pin{background:var(--v-thead)}
/* หัวตารางที่เรียงได้ */
.t th[data-sort]{user-select:none}
.t th[data-sort]:hover{background:var(--green-100b)}
.t th .sortic{margin-left:5px;font-size:10px;color:var(--text-off)}
.t th.sorted{color:var(--green-900)}
.t th.sorted .sortic{color:var(--green-700)}

/* ตารางกว้าง */
.tw{overflow-x:auto}
/* Bulk select */
.t input[type=checkbox]{width:15px;height:15px;accent-color:var(--green-700);cursor:pointer}
.bulkbar{background:var(--green-900);color:#fff;border-radius:var(--r-3);padding:8px 13px;
  display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600}
.bulkbar .b,.bulkbar .bsm{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}
.bulkbar .b:hover,.bulkbar .bsm:hover{background:rgba(255,255,255,.22)}
.bulkbar .sp{margin-left:auto}

/* --------------------------------------------------------- 9. KPI / BAND */
.kpi{border:1px solid var(--border);border-top:3px solid var(--green-700);border-radius:var(--r-3);
  background:#fff;padding:10px 12px}
.kpi .l{font-size:13px;color:var(--text-muted);font-weight:600}
.kpi .n{font:600 22px/1.15 var(--ff-mono);color:var(--green-900);margin:3px 0 1px}
.kpi .d{font-size:13px;font-weight:500;color:var(--text-muted)}
.kpi.a{border-top-color:var(--a-accent)} .kpi.a .n{color:var(--a-fg)}
.kpi.r{border-top-color:var(--r-fg-strong)} .kpi.r .n{color:var(--r-fg)}
.kpi.bl{border-top-color:var(--b-icon)} .kpi.bl .n{color:var(--b-fg)}
.kpi.v{border-top-color:var(--v-accent)} .kpi.v .n{color:var(--v-fg)}

.band{display:flex;border:1px solid var(--border);border-radius:var(--r-4);overflow:hidden;background:#fff}
.band .bcell{flex:1;padding:11px 13px;border-right:1px solid var(--border-line)}
.band .bcell:last-child{border-right:0}
.band .bl{font:600 13px var(--ff);color:var(--text-muted);display:flex;align-items:center;gap:6px}
.band .bn{font:600 20px/1.2 var(--ff-mono);margin-top:3px;color:var(--green-900)}
.band .bd2{font-size:13px;font-weight:500;color:var(--text-muted)}

/* --------------------------------------------------------- 10. ANNOTATION */
.an{font:500 13.5px/1.65 var(--ff);color:var(--text-3);background:var(--green-50b);
  border-left:3px solid var(--green-400);padding:8px 11px;border-radius:0 var(--r-2) var(--r-2) 0}
.an.a{background:var(--a-bg);border-left-color:var(--a-icon);color:var(--a-fg)}
.an.r{background:var(--r-bg);border-left-color:var(--r-fg-strong);color:var(--r-fg-dark)}
.an.b{background:var(--b-bg);border-left-color:var(--b-icon);color:var(--b-fg)}
/* ป้ายที่มาข้อมูล */
.src{font:500 13px var(--ff-mono);color:var(--text-faint);letter-spacing:.2px}
/* placeholder */
.ph{border:1px dashed var(--border-strong);border-radius:var(--r-3);
  background:repeating-linear-gradient(135deg,#f7f9f7,#f7f9f7 8px,#f0f3f0 8px,#f0f3f0 16px);
  display:flex;align-items:center;justify-content:center;font:13px var(--ff-mono);
  color:var(--text-dim);padding:6px;text-align:center}
/* แถบ progress */
.pbar{height:8px;border-radius:5px;background:#e3e9e5;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--green-500)}
.bar{height:8px;border-radius:5px;background:#eef1ef;overflow:hidden}
.bar i{display:block;height:100%;background:var(--r-fg-strong)}

/* --------------------------------------------------------- 11. GRID */
/* .g2-.g6 = grid utility — ห้ามเอาชื่อนี้ไปใช้เป็น class สีหรืออย่างอื่น */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-in)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-in)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-in)}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap-in)}
.g6{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap-in)}
.g2>*,.g3>*,.g4>*,.g5>*,.g6>*{min-width:0}
/* .row = utility แถวแนวนอนแบบ flex — ห้ามใช้กับ <tr> เด็ดขาด (tr จะกลายเป็น flex แล้วตารางพัง) */
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* กันพลาดซ้ำ: utility พวกนี้เป็น flex/grid ถ้าเผลอใส่กับ tr/td แถวจะพัง ให้คืนค่าเดิม */
tr.row,tr.col,tr.band,tr.chips,tr.g2,tr.g3,tr.g4,tr.g5,tr.g6{display:table-row}
tr.row>td,tr.col>td,tr.band>td,tr.chips>td{display:table-cell}
.col{display:flex;flex-direction:column;gap:var(--gap-in)}
.sp{margin-left:auto}

/* --------------------------------------------------------- 12. MODAL */
/* modal ต้องอยู่เหนือแผงขวา (rp = 210) เสมอ เพราะเปิดจากในแผงแล้วต้องคลิกเลือกได้ */
.ovr{position:fixed;inset:0;background:var(--ovr-bg);padding:22px;display:flex;justify-content:center;
  align-items:flex-start;z-index:260;overflow:auto}
.ovr[hidden]{display:none}
.md{background:#fff;border-radius:var(--r-5);box-shadow:var(--sh-modal);overflow:hidden;
  width:100%;max-width:640px;margin:auto}
.md .mh{background:var(--green-900);color:#fff;padding:12px 15px;font-size:16px;font-weight:600;
  display:flex;align-items:center;gap:8px}
.md .mh i.x{margin-left:auto;color:#a7c4b3;cursor:pointer}
.md .mb{padding:14px 15px;display:flex;flex-direction:column;gap:12px}
.md .mf{border-top:1px solid var(--border-line);padding:11px 15px;display:flex;gap:9px;align-items:center;
  background:var(--bg-head-soft)}
.md .mf .sp{margin-left:auto}
.md .bx .t td{white-space:normal}

/* --------------------------------------------------------- 13. RIGHT PANEL */
.rp{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:92vw;background:#fff;z-index:210;
  box-shadow:-14px 0 40px rgba(12,32,21,.24);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .2s ease}
.rp.open{transform:none}
.rp .mh{background:var(--green-900);color:#fff;padding:12px 15px;font-size:16px;font-weight:600;
  display:flex;align-items:center;gap:8px;flex:0 0 auto}
.rp .mh i.x{margin-left:auto;color:#a7c4b3;cursor:pointer}
.rp .mb{padding:14px 15px;display:flex;flex-direction:column;gap:12px;overflow:auto;flex:1 1 auto}
/* ในแผงขวา ตารางต้องพอดีความกว้างแผง ไม่ดันให้เลื่อนแนวนอน */
.rp .t{table-layout:fixed;width:100%}
.rp .t td,.rp .t th{white-space:normal;word-break:break-word}
.rp .t input.cell,.rp .t select.sel2{width:100%;min-width:0}
.rp .mf{border-top:1px solid var(--border-line);padding:11px 15px;display:flex;gap:9px;align-items:center;
  background:var(--bg-head-soft);flex:0 0 auto}
.rp-scrim{position:fixed;inset:0;background:rgba(12,32,21,.28);z-index:205}
.rp-scrim[hidden]{display:none}

/* ------------------------------------------------- 14. UNDO TOAST (8 วินาที) */
.toasts{position:fixed;right:18px;bottom:18px;z-index:300;display:flex;flex-direction:column;gap:8px}
.toast{position:relative;background:var(--green-900);color:#fff;border-radius:var(--r-4);padding:11px 14px;
  box-shadow:0 8px 24px rgba(12,32,21,.34);display:flex;align-items:center;gap:14px;
  font-size:14.5px;min-width:280px;animation:jd-toast-in .18s ease;overflow:hidden}
.toast .msg{font-weight:600}
.toast .undo{color:var(--a-accent);font-weight:700;cursor:pointer;white-space:nowrap;
  background:none;border:0;font-size:14.5px;font-family:var(--ff)}
.toast .x{margin-left:auto;color:#8fb5a0;cursor:pointer}
.toast .life{position:absolute;left:0;bottom:0;height:2px;background:var(--a-accent);width:100%}
.toast.r{background:var(--r-fg-dark)}
@keyframes jd-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------- 15. RESPONSIVE */
@media (max-width:1024px){
  .bd.split{grid-template-columns:1fr}
  .g3,.g4,.g5,.g6{grid-template-columns:1fr 1fr}
  .band{flex-wrap:wrap}.band .bcell{flex:1 1 45%}
  .nb .sr{display:none}
  .nb{position:relative}
  .nb .menu{display:none;position:absolute;top:var(--h-nav);left:0;right:0;background:var(--green-900);
    flex-direction:column;align-items:stretch;padding:6px 0;z-index:70}
  .nb .menu.open{display:flex}
  .nb .burger{display:inline-flex}
  .nb .mi{border-bottom:0;padding:12px 16px}
  .nb .mi.on{border-left:3px solid var(--a-accent)}
}
@media (max-width:640px){
  .g2,.g3,.g4,.g5,.g6{grid-template-columns:1fr}
  .b,.bp,.bsm{min-height:44px}          /* ปุ่มบนมือถือไม่เล็กกว่า 44px */
  .hdr h2{font-size:19px}
  .nb .who .nmr{display:none}
}