/* ============================================================
   plan-ui.css — สไตล์ฟีเจอร์ (ไฟล์ดาวน์โหลด / พรีวิว / แถบ% / SweetAlert2)
   แยกจาก app.css เพื่อกันหาย เวลาผู้ใช้แก้ app.css เองแล้ว save ทับ
   โหลดต่อจาก app.css (head.php) จึง override ได้ตามต้องการ
   ============================================================ */

/* ---------- ไฟล์ดาวน์โหลด (Step 5) ---------- */
.grid-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:640px){ .grid-tiles{ grid-template-columns:1fr; } }
.file-tile{ display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); text-decoration:none; transition:.15s; }
.file-tile:hover{ border-color:var(--brand2); box-shadow:0 6px 16px rgba(46,134,193,.15); transform:translateY(-1px); }
.file-tile .fi{ width:42px; height:42px; border-radius:9px; background:linear-gradient(135deg,#2b579a,#1e3d6b); color:#fff; display:grid; place-items:center; font-weight:700; font-size:1.1rem; flex:0 0 auto; }
.file-tile .fi.zip{ background:linear-gradient(135deg,#b45309,#92400e); font-size:0.8rem; }
.file-tile .fi.pdf{ background:linear-gradient(135deg,#c0392b,#922b21); font-size:0.8rem; }
.file-tile.zip-tile{ border-color:var(--brand2); background:var(--infobg); }

/* ---------- แถบความคืบหน้าตอนสร้างเอกสาร ---------- */
.genp-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:1.05rem; color:var(--ink); }
.genp-head b{ margin-left:auto; color:var(--brand2); font-variant-numeric:tabular-nums; }
.genp-bar{ height:12px; background:var(--line); border-radius:8px; overflow:hidden; position:relative; }
.genp-fill{ height:100%; width:0; border-radius:8px; background:linear-gradient(90deg,var(--brand),var(--brand2)); transition:width .5s ease; background-size:200% 100%; animation:genp-shim 1.4s linear infinite; }
@keyframes genp-shim{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

/* ---------- พรีวิว modal (แนวทาง B) ---------- */
.pv-modal{ position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; padding:20px; }
.pv-modal[hidden]{ display:none; }   /* ให้ hidden ชนะ display:flex (กันกล่องเด้งเอง/ปิดไม่ได้) */
.pv-box{ background:var(--surface); border-radius:14px; width:min(920px,96vw); height:min(88vh,900px); display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.pv-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line); }
.pv-close{ background:none; border:none; font-size:20px; cursor:pointer; color:var(--ink); }
.pv-box iframe{ flex:1; width:100%; border:none; background:#525659; }
.tpqi-basis{margin-bottom:5px;}
/* ---------- ช่องกรอกงานหลัก: ชื่องาน / อังกฤษย่อ / อาชีพ-ตำแหน่ง / แผนก (stack เต็มความกว้าง อ่านง่าย) ---------- */
#job-table tr.mainrow .jt-title.main,
#job-table tr.mainrow .jt-en,
#job-table tr.mainrow .jt-occ,
#job-table tr.mainrow .jt-dept,
#job-table tr.mainrow .jt-deliv{ display:block; width:100%; box-sizing:border-box; margin:3px 0; font-family: inherit; }
#job-table tr.mainrow .jt-title.main{ font-weight:700; }
#job-table tr.mainrow .jt-en,
#job-table tr.mainrow .jt-occ,
#job-table tr.mainrow .jt-dept,
#job-table tr.mainrow .jt-deliv{ font-size:.95rem; color:var(--ink); }

/* ⭐ 19 ส.ค. 2569 — ช่อง "ชิ้นงาน/ผลการปฏิบัติงาน" (.jt-deliv) ครูทักว่าใช้ฟอนต์คนละแบบกับช่องอื่น
   สาเหตุ: ช่องนี้เพิ่มเข้ามาทีหลัง (15 ส.ค.) แต่ไม่เคยมี CSS เลยสักบรรทัดทั้งใน app.css และไฟล์นี้
           เบราว์เซอร์เลยใช้สไตล์เริ่มต้นของตัวเอง — วัดจริงได้ Arial 13.3px ขอบ inset เทา มุมเหลี่ยม กว้าง 170px
           ขณะที่ช่องอื่นในแถวเดียวกันเป็น PKMaehongson 15.2px ขอบประจาง มุมมน 8px กว้าง 440px
   แก้ให้เหมือน .jt-dept ทุกประการ (ทั้งคู่เป็นช่องเสริม ไม่บังคับกรอก) */
#job-table tr.mainrow .jt-deliv{ padding:5px 10px; border:1px dashed var(--line); border-radius:8px; }

/* พื้นหลังช่องเสริมทั้งชุด — เดิม app.css ฝัง #fff ไว้ตรง ๆ ทำให้ธีมมืดได้พื้นขาว+ตัวอักษรสีอ่อน อ่านแทบไม่ออก
   (เจอตอนไล่หาสาเหตุเรื่องฟอนต์ · ช่อง "ชื่องานหลัก" ไม่เป็น เพราะใช้ var(--surface) อยู่แล้ว) */
#job-table tr.mainrow .jt-en,
#job-table tr.mainrow .jt-occ,
#job-table tr.mainrow .jt-dept,
#job-table tr.mainrow .jt-deliv{ background:var(--surface); }

/* ---------- ปุ่มแก้ไข/ลบ สถานประกอบการ (ต่อจากปุ่มเพิ่มใหม่) ---------- */
.chip-btn.wp-edit,
.chip-btn.wp-del{ transition:.15s; }
.chip-btn.wp-del{ color:var(--err,#c0392b); border-color:var(--err,#c0392b); }
.chip-btn.wp-del:hover:not(:disabled){ background:var(--errbg,#fdecea); }
.chip-btn.wp-edit:hover:not(:disabled){ background:var(--infobg,#eef5fb); }
.chip-btn.wp-edit:disabled,
.chip-btn.wp-del:disabled{ opacity:.45; cursor:not-allowed; }

/* ---------- SweetAlert2 (เข้าธีม + ขนาดพอดี + ช่องกรอกกว้างขึ้น) ---------- */
.swal2-popup{ font-family:var(--font) !important; border-radius:16px; background:var(--surface); color:var(--ink); }
.swal2-title{ font-family:var(--font-head) !important; color:var(--ink); font-size:1.4rem !important; line-height:1.3; }
.swal2-html-container{ color:var(--ink); font-size:1.1rem !important; }
/* ช่องกรอกกว้างขึ้น: ลดขอบข้าง (default v11 = margin 2em ข้างละ) */
.swal2-input, .swal2-textarea, .swal2-select{
  font-family:var(--font) !important; font-size:1.1rem !important; border:1px solid var(--line); border-radius:9px;
  background:var(--surface2); color:var(--ink); box-shadow:none; box-sizing:border-box;
  width:calc(100% - 2em) !important; margin-left:1em !important; margin-right:1em !important;
}
.swal2-input::placeholder, .swal2-textarea::placeholder{ color:var(--muted); }
.swal2-input:focus, .swal2-textarea:focus, .swal2-select:focus{ border-color:var(--brand2); box-shadow:0 0 0 3px rgba(46,134,193,.15); }
.swal2-validation-message{ font-family:var(--font) !important; background:var(--errbg); color:var(--err); border-radius:8px; }
.swal2-actions{ gap:8px; }
.swal2-confirm.swal2-styled{ font-family:var(--font) !important; font-weight:600; font-size:1.1rem !important; border-radius:10px; padding:10px 22px; background:linear-gradient(135deg,var(--brand),var(--brand2)) !important; color:#fff !important; box-shadow:0 6px 16px rgba(46,134,193,.28); }
.swal2-cancel.swal2-styled{ font-family:var(--font) !important; font-weight:600; font-size:1.1rem !important; border-radius:10px; padding:10px 22px; background:var(--surface) !important; border:1px solid var(--line) !important; color:var(--ink) !important; }
.swal2-styled:focus{ box-shadow:0 0 0 3px rgba(46,134,193,.25) !important; }
.swal2-toast{ font-family:var(--font) !important; border-radius:12px; }

/* ===== ซ่อนปุ่ม "ลบ" สถานประกอบการชั่วคราว (ผู้ใช้ขอ 19 ก.ค. 69) =====
   วิธีเปิดใช้ปุ่มลบอีกครั้ง: ลบ (หรือคอมเมนต์) กฎ .chip-btn.wp-del ด้านล่างนี้
   ในไฟล์  public/assets/css/plan-ui.css  แล้วรีเฟรชหน้า */
.chip-btn.wp-del{ display:none !important; }

/* ===== ย่อขนาดตัวอักษร/ไอคอนของ toast แจ้งเตือน (ผู้ใช้ขอ 19 ก.ค. 69) ===== */
.swal2-toast{ padding:12px 15px !important; }
.swal2-toast .swal2-title{ font-size:1rem !important; font-weight:600 !important; margin:0 !important; line-height:1.35; }
.swal2-toast .swal2-icon{ width:1.7em !important; height:1.7em !important; min-width:1.7em !important; margin:0 10px 0 0 !important; }
.swal2-toast .swal2-icon .swal2-icon-content{ font-size:1em !important; }

/* ============================================================
   ตารางงานฝึก (Step 4) — responsive v3 (ผู้ใช้ขอ 23 ก.ค. 69)
   • เดสก์ท็อป + ไอแพด = ตารางเต็ม (จอไม่พอ → เลื่อนสกอร์แนวนอนในตาราง คอลัมน์ไม่ถูกบีบ)
   • มือถือ (<=560px) = การ์ด (ช่องชื่องานย่อยเต็มความกว้าง อ่านชัด)
   • แถวงานหลัก 2 คอลัมน์ทุกจอ (บรรทัด1 ชื่องานหลัก · บรรทัด2 อังกฤษ|อาชีพ · บรรทัด3 แผนก|รหัส)
   • K/S/A/Ap: ตารางบรรทัดเดียว · การ์ดบรรทัดละ 2
   • ใช้ @media ธรรมดา — รองรับทุกเบราว์เซอร์ · CSS ล้วน ไม่แตะ id/name/class/JS/PHP
   วิธีย้อนกลับ: ลบทั้งบล็อกนี้ (หรือกู้จาก storage/backups/plan-ui.css.*.bak)
   ============================================================ */

/* ตารางกว้างขั้นต่ำ — จอไม่พอ (.table-wrap overflow-x:auto ใน app.css) จะเลื่อนแนวนอนแทนการบีบคอลัมน์ */
#job-table{ min-width:1080px; }

/* แถวงานหลัก: 2 คอลัมน์ทุกจอ — จัดที่ "ตัว input ข้างใน" ไม่แตะ display ของ <td> เพื่อคง colspan="3" */
#job-table tr.mainrow td[colspan="3"] .jt-title.main{ display:block; width:100%; margin:0 0 6px; }
#job-table tr.mainrow td[colspan="3"] .jt-en,
#job-table tr.mainrow td[colspan="3"] .jt-occ,
#job-table tr.mainrow td[colspan="3"] .jt-dept,
#job-table tr.mainrow td[colspan="3"] .jt-deliv{ display:inline-block; width:calc(50% - 8px); vertical-align:middle; margin:0 0 6px; }
#job-table tr.mainrow td[colspan="3"] .jt-en,
#job-table tr.mainrow td[colspan="3"] .jt-dept{ margin-right:12px; }
#job-table tr.mainrow td[colspan="3"] .aibadge{ display:inline-block; vertical-align:middle; }

/* K/S/A/Ap: จอปกติบรรทัดเดียว 4 อัน (ห้ามชิปหด/ห้ามตัดคำ "Ap" เป็น A/p) */
#job-table tr.subrow .ksa{ flex-wrap:nowrap; }
#job-table tr.subrow .ksa .kc{ flex:0 0 auto; white-space:nowrap; }

/* จอมือถือ (<=560px): reflow เป็นการ์ด — ช่องชื่องานย่อยเต็มความกว้าง อ่านชัด (ไอแพดใช้ตาราง+เลื่อนแนวนอน) */
@media (max-width:560px){
  #job-table{ min-width:0; }
  #job-table thead{ display:none; }
  #job-table, #job-table tbody, #job-table tr, #job-table td{ display:block; width:100%; }
  #job-table td{ border:none; padding:7px 12px; }

  /* การ์ดงานหลัก (คง 2 คอลัมน์: อังกฤษ|อาชีพ / แผนก|รหัส) */
  #job-table tr.mainrow{ background:var(--surface2); border:1px solid var(--line); border-top:3px solid var(--brand2); border-radius:11px; margin:16px 0 0; padding:6px 4px 12px; }
  #job-table tr.mainrow td:first-child{ padding-bottom:0; }
  #job-table tr.mainrow td.jt-subtotal::before{ content:"รวมชั่วโมงงานหลัก : "; color:var(--muted); font-weight:400; }

  /* การ์ดงานย่อย */
  #job-table tr.subrow{ background:var(--surface); border:1px solid var(--line); border-radius:11px; margin:10px 0 0; padding:8px 4px 10px; box-shadow:0 2px 8px rgba(31,95,139,.05); }
  #job-table tr.subrow td{ border-bottom:1px dashed var(--line); padding:9px 12px; }
  #job-table tr.subrow td:last-child{ border-bottom:none; }
  /* ป้ายกำกับแต่ละช่อง (เฉพาะแถวงานย่อย ลำดับ td คงที่ 6 ช่อง) */
  #job-table tr.subrow td:nth-child(2)::before{ content:"ชื่องานย่อย"; }
  #job-table tr.subrow td:nth-child(3)::before{ content:"ระดับ K / S / A / Ap"; }
  #job-table tr.subrow td:nth-child(4)::before{ content:"วิธีสอน (Active Learning)"; }
  #job-table tr.subrow td:nth-child(5)::before{ content:"ชั่วโมงฝึก"; }
  #job-table tr.subrow td:nth-child(n+2)::before{ display:block; font-size:.72rem; font-weight:700; color:var(--muted); margin-bottom:5px; letter-spacing:.2px; }
  #job-table tr.subrow td:first-child{ border-bottom:none; padding-bottom:2px; }
  #job-table tr.subrow .subcode{ display:inline-block; background:var(--infobg); color:var(--brand); border:1px solid var(--line); border-radius:20px; padding:2px 12px; font-size:.85rem; }
  #job-table tr.subrow .jt-title{ width:100%; font-size:1.05rem; }
  #job-table tr.subrow .jt-hours{ width:90px; }
  /* K/S/A/Ap บรรทัดเดียว 4 อันเรียงกัน */
  #job-table tr.subrow .ksa{ display:inline-flex; flex-wrap:nowrap; gap:6px; }
}

/* ===== อ้างอิงมาตรฐานฝีมือแรงงานแห่งชาติ (มฐฝ.) — การ์ด opt-in (เพิ่มใหม่) ===== */
.dsd-card{ margin-top:12px; border:1px solid var(--line,#e2e8f0); border-radius:12px; padding:10px 10px; background:#eaebec; font-size: 1.1rem;color: #001a53; }
.dsd-card .dsd-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-weight:600; }
.dsd-card .dsd-status{ margin-top:10px; font-size:.9rem; color:#350073; }
.dsd-card .dsd-result{ margin-top:10px; }
.dsd-card .dsd-row{ margin-bottom:8px; }
.dsd-card .dsd-row2{ display:flex; gap:10px; flex-wrap:wrap; }
.dsd-card .dsd-row2 > div{ flex:1; min-width:140px; }
.dsd-card .dsd-why{ margin-top:8px; font-size:.88rem; background:#faf5ff; border-left:3px solid #7c3aed; border-radius:6px; padding:8px 12px; white-space:pre-wrap; word-break:break-word; }
.dsd-card .dsd-search{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.dsd-card .dsd-search input{ flex:1; min-width:160px; }
.dsd-card .dsd-note{ margin-top:8px; font-size:.78rem; color:var(--mut,#64748b); }
/* ⭐⭐ 7 ก.ย. 2569 — ปุ่ม AI 5 ตัวข้างล่างนี้ "ย้ายไปคุมจากบัญชีกลาง" แล้ว
   บัญชีกลางอยู่ที่ app.css บล็อก 10 "ระบบปุ่ม AI ชุดเดียวทั้งระบบ"
   ────────────────────────────────────────────────────────────────
   เหตุผล: ระบบเคยมีปุ่ม AI 16 แบบที่หน้าตาไม่เหมือนกันสักแบบ
     5 ตัวในไฟล์นี้ก็เป็นส่วนหนึ่ง — ม่วง 25px · เขียวหัวเป็ด 25px · น้ำเงินเหล็ก
     ครูสั่งให้ทำเป็นทางเดียวกันทั้งระบบ และให้ "ไล่เฉดไหล" เหลือเฉพาะปุ่ม AI ตัวหลักของหน้า
     เพราะหน้าแผนฝึกอาชีพมีปุ่ม AI 25 ปุ่ม ถ้าไหลหมดจะลายตา
   ⚠️ กฎเดิมถูก "ปิดไว้" ไม่ได้ลบ — ถ้าจะคืนค่าเดิม เอาคอมเมนต์ออกได้เลย
   ⛔ ห้ามเปิดคืนโดยไม่ถอดปุ่มเหล่านี้ออกจากบัญชีกลางใน app.css ก่อน ไม่งั้นจะชนกันอีก
      (กฎที่นี่เป็น ID + !important จึงชนะ app.css เสมอ เพราะไฟล์นี้โหลดทีหลัง)
   ────────────────────────────────────────────────────────────────
.dsd-card .dsd-btn{ background:linear-gradient(90deg,#6d28d9,#7c3aed,#a855f7,#c084fc,#7c3aed,#6d28d9); background-size:300% 100%; color:#fff; border:none; border-radius:25px; padding:5px 10px; font-weight:600; font-size:1rem; cursor:pointer; font-family:inherit; }
.dsd-card .dsd-btn:disabled{ opacity:.6; cursor:default; }
.tpqi-btn{border:0;cursor:pointer;color:#fff;font-weight:600;border-radius:25px;padding:5px 15px;font-size:1rem;background:linear-gradient(90deg,#0f766e,#0d9488,#0ea5a4,#2dd4bf,#0d9488,#0f766e);background-size:300% 100%;box-shadow:0 2px 8px rgba(13,148,136,.35)}
.tpqi-btn:disabled{opacity:.6;cursor:default}
#btn-moral-ai{ background-image:linear-gradient(90deg,#33007f,#7c3aed,#ae10ed,#7c3aed,#33007f) !important; background-size:300% 100% !important; }
#btn-tpqi-measure, #btn-gapfill{ background-image:linear-gradient(90deg,#184366,#3f6591,#9198c1,#3f6591,#184366) !important; background-size:300% 100% !important; }
   ──────────────────────────────────────────────────────────── */

/* ===== การ์ดเทียบคุณวุฒิวิชาชีพ (TPQI) ===== */
.tpqi-card{margin-top:12px}
/* คีย์เฟรมนี้ยังต้องเก็บไว้ — ไฟล์อื่นอาจอ้างถึง และไม่กินทรัพยากรถ้าไม่มีใครใช้ */
@keyframes aicmp-flow{ to{ background-position:300% 0; } }
.tpqi-occ{font-size:15px;margin:2px 0 10px}
.tpqi-cov-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.tpqi-pct{font-size:30px;font-weight:800;color:#0d9488;line-height:1}
.tpqi-band{font-weight:700;color:#0f766e;background:#e6fbf7;border-radius:999px;padding:2px 12px;font-size:14px}
.tpqi-band[data-band="below"]{color:#b91c1c;background:#fdecec}
.tpqi-frac{color:#6b7280;font-size:13.5px}
.tpqi-bar{position:relative;height:14px;border-radius:7px;background:#eef1f6;overflow:hidden;margin-bottom:10px}
.tpqi-bar-fill{height:100%;background:linear-gradient(90deg,#0ea5a4,#0d9488);border-radius:7px;transition:width .4s}
.tpqi-bar-fill[data-band="below"]{background:linear-gradient(90deg,#f87171,#dc2626)}
.tpqi-units{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:8px}
.tpqi-uchip{font-size:0.83rem;font-weight:600;border-radius:5px;padding:2px 9px;background:#fff3e0;color:#b45309;border:1px solid #f3d9b5}
.tpqi-uchip[data-full="1"]{background:#e8f7ee;color:#16a34a;border-color:#bfe6cc}
.tpqi-why{font-size:13.5px;color:#410101;margin:4px 5px 10px;line-height:1.3}
.tpqi-gaps{background:#fdecec;border:1px dashed #dc2626;border-radius:10px;padding:8px 12px;font-size:13px}
.tpqi-gap-h{font-weight:700;color:#b91c1c;margin-bottom:3px}
.tpqi-gap-i{color:#7a1f1f;line-height:1.5}

/* ===== ช่อง "จำนวนงานหลัก" (Step 4 แผนฝึก) — พิลล์ม่วงเข้าชุดปุ่ม AI (แนวเดียวกับช่องจำนวนหน่วยหน้าแผนสอน) ===== */
.jobcount{ display:inline-flex; align-items:center; gap:8px; padding:6px 6px 6px 13px; border-radius:11px;
  border:1px dashed #c4b5fd; background:#faf5ff; color:#6d28d9; font-weight:600; font-size:1.05rem; white-space:nowrap; user-select:none; }
.jobcount i{ color:#7c3aed; }
.jobcount input{ width:96px; text-align:center; border:1px solid #ddd6fe; border-radius:8px; padding:7px 8px;
  font:inherit; font-weight:700; color:#5b21b6; background:#fff; -moz-appearance:textfield; }
.jobcount input::-webkit-outer-spin-button, .jobcount input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.jobcount input::placeholder{ color:#a78bda; font-weight:400; font-size:.9rem; }
.jobcount input:focus{ outline:none; border-color:#a855f7; box-shadow:0 0 0 3px rgba(168,85,247,.18); }
:root[data-theme="dark"] .jobcount{ background:#241a3a; border-color:#6d28d9; color:#c4b5fd; }
:root[data-theme="dark"] .jobcount input{ background:#0f0b1c; border-color:#5b21b6; color:#ddd6fe; }
@media (max-width:560px){ .jobcount{ font-size:1rem; } .jobcount input{ width:84px; } }

/* --- polish (เข้าชุด motion app.css) 10 ส.ค. 69 · additive · ไม่แตะ layout ตาราง --- */
#job-table tbody tr.subrow{ transition:background .15s ease; }
#job-table tbody tr.subrow:hover{ background:var(--surface2); }
.ksa .kc{ transition:transform .12s ease, background .15s ease, border-color .15s ease; }
.ksa .kc:hover{ transform:translateY(-1px); }
.jt-addsub, .chip-btn{ transition:filter .15s ease, transform .12s ease, background .15s ease; }
.jt-addsub:hover, .chip-btn:hover:not(:disabled){ transform:translateY(-1px); }
@media (prefers-reduced-motion:reduce){ .ksa .kc:hover, .jt-addsub:hover, .chip-btn:hover{ transform:none !important; } }

/* ===== ปุ่มเลื่อนลำดับงานหลัก ↑/↓ (ขั้น 4 แผนฝึก) — เพิ่ม 19 ส.ค. 2569 ตามที่ครูขอ
   ทำให้ใช้เหมือนขั้น 4 หน้าแผนการสอน (.lsn-mv) แต่ใช้โทนน้ำเงินของตารางแผนฝึก
   ทุกกฎ scope อยู่ใต้ #job-table — ปุ่มอื่นในระบบไม่ได้รับผลกระทบ ===== */
#job-table .mainrow .jt-acts{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:5px; }
#job-table .mainrow .jt-acts .jt-addsub{ margin:0; }   /* ระยะห่างใช้ gap แทน margin เดิม จะได้ตรงกลางพอดี */
/* ถังขยะของ "งานหลัก" ปรับให้เป็นกล่องขนาดเดียวกับปุ่ม ↑↓ → สูงเท่ากัน และแคบพอให้อยู่บรรทัดเดียวกันครบ 3 ปุ่ม
   (scope แค่ .mainrow .jt-acts — ถังขยะของงานย่อยยังเหมือนเดิมทุกประการ) */
#job-table .mainrow .jt-acts .jt-del{ width:34px; height:32px; padding:0; display:grid; place-items:center; }
#job-table .jt-mvwrap{ display:inline-flex; }
#job-table .jt-mv{ border:1px solid var(--line); background:var(--surface); color:var(--brand);
  border-radius:8px; width:30px; height:32px; padding:0; cursor:pointer; display:grid; place-items:center;
  font:inherit; font-size:0.8rem;
  transition:background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease, transform .1s ease; }
#job-table .jt-mv:hover:not(:disabled){ background:var(--infobg); border-color:#bdd6e5; }
#job-table .jt-mv:active:not(:disabled){ transform:translateY(1px); }
#job-table .jt-mvup{ border-top-right-radius:3px; border-bottom-right-radius:3px; }
#job-table .jt-mvdn{ border-top-left-radius:3px; border-bottom-left-radius:3px; margin-left:-1px; }
#job-table .jt-mv:disabled{ opacity:.35; cursor:default; color:var(--muted); }
@media (prefers-reduced-motion:reduce){ #job-table .jt-mv:active:not(:disabled){ transform:none !important; } }

/* ===== เส้น timeline ขั้นตอน (.steps) — ปิดของเดิมทิ้งเมื่อ 24 ส.ค. 2569
   ⛔ เดิมตรงนี้มี 2 กฎที่เพิ่มไว้เมื่อ 19 ส.ค. ตามที่ครูขอ
        1) เส้นเชื่อมช่วงที่ทำเสร็จเป็นสีเขียว  → ย้ายไปอยู่ใน app.css แล้ว (ใช้ background ไม่ใช่ border)
        2) คลื่นกระจายวงที่ 2 รอบวงขั้นปัจจุบัน → ครูเปลี่ยนใจเป็น "วงโดนัทหมุนช้า ๆ" แทน
           (ส่งภาพตัวอย่างมาให้ดู 24 ส.ค. · ยืนยันเลือกวงโดนัท ไม่เอาคลื่นกระจายแล้ว)
   ⚠️ ห้ามเอากลับมาเฉย ๆ — กฎเดิมใช้ .st.on .b::before ซึ่งดีไซน์ใหม่ใช้วาดเครื่องหมายถูก
      ของขั้นที่ทำเสร็จแล้ว ถ้าเอากลับมาจะมีวงคลื่นซ้อนอยู่กลางวงเขียว
   ทั้งหมดของแถบขั้นตอนตอนนี้อยู่ที่ app.css ที่เดียว (หมวด Stepper) ===== */