/* ระบบ Manual Production Record - ทุก selector ขึ้นต้นด้วย .man- */

/* ข้อความตอนที่ยังตั้งค่า master ไม่ครบ - ไม่ใช่ error แต่เป็นขั้นตอนที่ต้องทำก่อน
   เกิดจริงในวันแรกที่เปิดใช้ ไม่ใช่เคสสมมติ */
.man-needsetup {
  margin: 14px 16px;
  padding: 18px 20px;
  background: #fffaf2;
  border: 1px solid #f0d7ad;
  border-radius: var(--oee-radius);
  font-size: 14px;
  line-height: 1.7;
}
.man-needsetup b { color: var(--oee-text); }
.man-needsetup .oee-btn { margin-top: 10px; }

/* แถวเพิ่มรายการหยุดในหน้าคีย์ยอดผลิต
   (หน้าตั้งค่าเคยใช้ class นี้ด้วย แต่เปลี่ยนไปใช้ .oee-md + OEE.form() แล้ว
    เหลือที่ใช้จริงที่เดียวคือปุ่มเพิ่มรายการใต้ตารางเวลาหยุด) */
.man-newrow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}

/* ==================== หน้าคีย์ข้อมูลประจำกะ ==================== */

/* สองการ์ดหลักของหน้า - ยอดผลิตแล้วตามด้วยเวลาหยุด
   เรียงบนลงล่างไม่ใช่สองคอลัมน์ เพราะการ์ดรายการหยุดมี textarea
   ที่ต้องการความกว้างเต็ม (เดิมเป็นสองคอลัมน์ตอนที่ยอดเป็นตารางหลายจุด) */
.man-qty { margin-bottom: 14px; }
.man-stops { margin-bottom: 14px; }

/* ช่องยอดไม่ต้องกว้างเท่าความกว้างเต็ม - เลขสี่ห้าหลักใช้ที่ไม่เยอะ
   และการจำกัดความกว้างทำให้สามช่องเรียงกันอ่านเทียบกันได้ */
.man-qty-grid { max-width: 680px; }

.man-status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.man-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  padding: 2px 10px;
  border: 1px solid var(--oee-line);
}
.man-badge-saved { background: #eaf6ee; color: #14603a; border-color: #bfe0cb; }
.man-badge-new { background: #fff5e6; color: #8a5000; border-color: #f0d7ad; }

/* ---------- รายการหยุด: การ์ดต่อหนึ่งรายการ ----------
   เดิมเป็นแถวตาราง แต่ช่อง "สาเหตุ" กลายเป็น textarea หลายบรรทัดแล้ว
   ยัดลงเซลล์ไม่ได้ และคอลัมน์ "จุด" หายไป (เอกสารมีจุดเดียว)
   เหลือ 6 ช่องต่อรายการ ซึ่งเป็นขนาดของการ์ดพอดี */
.man-stopcard {
  border: 1px solid var(--oee-line);
  border-radius: var(--oee-radius);
  background: var(--oee-bg);
  padding: var(--oee-s3) var(--oee-s4) var(--oee-s4);
  margin-bottom: var(--oee-s3);
  display: grid;
  gap: var(--oee-s3);
}
.man-stopcard-head {
  display: flex;
  align-items: center;
  gap: var(--oee-s2);
  padding-bottom: var(--oee-s2);
  border-bottom: 1px solid var(--oee-line);
  font-size: 13px;
  color: var(--oee-muted);
}
.man-stopcard-head .oee-spacer { flex: 1; }

/* ช่องสาเหตุต้องกว้างเต็มการ์ด - มันคือเนื้อความ ไม่ใช่ค่าสั้น ๆ */
.man-detail { width: 100%; }

/* ---------- dropdown สาเหตุ (021) ----------
   อยู่บนสุดของการ์ดและกว้างเต็ม เพราะมันเป็นช่องที่เติมช่องอื่นให้
   ไม่ใช่ช่องหนึ่งในกริดที่เท่ากันหมด - ลำดับสายตาต้องบอกว่า "เริ่มที่นี่" */
.man-reason-field { max-width: 560px; }
.man-reason-field .oee-in { width: 100%; }

/* ---------- ช่องเวลา ----------
   เป็น input text ไม่ใช่ type="time" (เหตุผลอยู่ที่ parseTime ใน mod-man-entry.js)
   ตั้งความกว้างตามเนื้อหา "08:30" ไม่ต้องยืดเต็มช่อง จะได้ไม่หลอกว่ากรอกได้ยาว ๆ */
.man-time {
  width: 7.5em;
  font-family: var(--oee-font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

/* ป้ายวันของเวลาที่คาบเที่ยงคืน - กะดึกกรอก 02:00 ต้องเห็นว่าระบบลงเป็นวันถัดไป
   อยู่บนบรรทัดเดียวกับ label เพราะมันคือส่วนขยายของชื่อช่อง ไม่ใช่ค่าแยก */
.man-day {
  margin-left: 7px;
  font-size: 11px;
  font-weight: 600;
  color: #8a5000;
  background: #fff5e6;
  border: 1px solid #f0d7ad;
  border-radius: 20px;
  padding: 1px 8px;
  white-space: nowrap;
}
.man-day:empty { display: none; }            /* ไม่มีวันคาบ = ไม่ต้องมีที่ว่างค้าง */

/* ---------- ปุ่มนาทีลัด ----------
   คนจำ "หยุดไป 15 นาที" ได้แม่นกว่าเวลาที่เครื่องกลับมาเดิน
   กดแล้วระบบเติมเวลาจบให้ - ยังเก็บเวลาเริ่ม+จบครบเหมือนเดิม */
.man-quick {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.man-quick-lbl { font-size: 12px; color: var(--oee-muted); margin-right: 2px; }
.man-chip {
  font-family: inherit;
  font-size: 12px;
  padding: 4px 11px;
  border: 1px solid var(--oee-line);
  background: #fff;
  border-radius: 20px;
  cursor: pointer;
  color: var(--oee-muted);
}
.man-chip:hover { border-color: var(--oee-accent); color: var(--oee-accent); }
.man-chip:focus-visible { outline: none; box-shadow: var(--oee-ring); }

/* ข้อความผิดของเวลาโดยเฉพาะ - ติดอยู่กับการ์ดที่ผิด ไม่ใช่ไปรออ่านที่แถบล่าง
   ซึ่งอยู่คนละที่กับสายตาตอนกำลังกรอกรายการที่เจ็ด */
.man-terr { font-size: 12px; color: var(--oee-danger); margin-left: 4px; }
.man-terr:empty { display: none; }

/* ---------- ปุ่มสลับประเภท ----------
   ไม่มีค่าเริ่มต้นให้เดา (ไม่มีรายการสาเหตุมาบอก default_kind แล้ว)
   ทั้งสองปุ่มจึงต้อง "ยังไม่ถูกเลือก" จนกว่าคนจะกด - ใช้ปุ่มแทน dropdown
   เพราะมีสองตัวเลือกและทั้งคู่ต้องเห็นพร้อมกัน ไม่ใช่ซ่อนไว้ใน list */
.man-kind { display: flex; gap: var(--oee-s2); flex-wrap: wrap; }
.man-kind-btn {
  font-family: inherit;
  font-size: 13px;
  padding: 0 14px;
  min-height: var(--oee-ctl-h);
  border: 1px solid var(--oee-line);
  border-radius: var(--oee-radius);
  background: #fff;
  color: var(--oee-muted);
  cursor: pointer;
}
.man-kind-btn:hover { background: var(--oee-bg); }
.man-kind-btn:focus-visible { outline: none; box-shadow: var(--oee-ring); }
.man-kind-on {
  background: var(--oee-accent);
  border-color: var(--oee-accent);
  color: #fff;
  font-weight: 600;
}
.man-kind-on:hover { background: var(--oee-accent-dark); }

/* ยอดที่แปลงเป็นน้ำหนักแล้ว - ตัวที่ใช้ตรวจว่ากรอกผิดหลักไหม */
.man-ton { font-family: var(--oee-font-num); white-space: nowrap; }

/* ---------- checklist รายจุด (ล็อกกะก่อน แล้วไล่จุด) ----------
   ล็อก ไลน์/วัน/กะ แล้วเห็นทุกจุดของไลน์พร้อมสถานะ กดเลือกจุดเพื่อกาง/ย่อฟอร์ม
   ไม่ต้องเปลี่ยน dropdown จุดทีละครั้งแล้วเดาเองว่าเหลือกี่จุด */
.man-ck { margin-bottom: 14px; }
.man-ck-head { font-size: 13px; color: var(--oee-muted); margin-bottom: 8px; }
.man-ck-head b { color: var(--oee-text); font-family: var(--oee-font-num); }
.man-ck-list { display: flex; gap: 8px; flex-wrap: wrap; }
.man-ck-item {
  font-family: inherit;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  min-height: var(--oee-ctl-h);
  border: 1px solid var(--oee-line);
  border-radius: var(--oee-radius);
  background: #fff;
  color: var(--oee-text);
  cursor: pointer;
}
.man-ck-item:hover { border-color: var(--oee-accent); }
.man-ck-item:focus-visible { outline: none; box-shadow: var(--oee-ring); }
/* จุดที่เลือกอยู่ = ฟอร์มกำลังกางของจุดนี้ */
.man-ck-item[aria-current="true"] {
  border-color: var(--oee-accent);
  background: var(--oee-sel);
  font-weight: 600;
}
.man-ck-name { white-space: nowrap; }
.man-ck-mark {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
}
/* คีย์แล้ว = วงเขียวมีติ๊ก · ยังไม่คีย์ = วงกลวง · ไม่ได้เดิน = ขีด จาง ๆ */
.man-ck-done .man-ck-mark { background: #1a7f4b; color: #fff; }
.man-ck-todo .man-ck-mark { border: 2px solid #f0c98a; background: #fffaf2; }
.man-ck-todo { border-color: #f0d7ad; background: #fffaf2; }
.man-ck-idle { opacity: .6; }
.man-ck-idle .man-ck-mark { color: var(--oee-muted); }
.man-ck-note { font-size: 12px; color: var(--oee-muted); margin-top: 7px; }

/* กะที่ยังไม่ได้คีย์ - ทางเข้าข้ามวัน ย่อไว้ใน <details> เพราะมีได้ถึง 90 กะ
   รกเกินจนบังงานหลัก กดเปิดเมื่อจะกระโดดไปวันเก่า */
.man-jump { margin-bottom: 14px; }
.man-jump > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--oee-muted);
  padding: 8px 0;
  list-style: none;
}
.man-jump > summary::-webkit-details-marker { display: none; }
.man-jump > summary::before { content: '▸ '; color: var(--oee-accent); }
.man-jump[open] > summary::before { content: '▾ '; }
.man-jump > summary b { color: var(--oee-warn); font-family: var(--oee-font-num); }
.man-jump-body { padding-top: 6px; }

.man-missing { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.man-miss {
  font-family: inherit;
  font-size: 13px;
  padding: 7px 12px;
  border: 1px solid #f0d7ad;
  background: #fffaf2;
  border-radius: 20px;
  cursor: pointer;
  color: var(--oee-text);
}
.man-miss:hover { border-color: var(--oee-accent); }

/* แถบสรุปติดล่างจอ - ต้องเห็นตลอดขณะกรอก เพราะมันคือผลของสิ่งที่กำลังพิมพ์ */
.man-bar {
  position: sticky;
  bottom: 0;
  margin: 14px 16px 0;
  padding: 12px 16px;
  background: var(--oee-surface);
  border: 1px solid var(--oee-line);
  border-radius: 10px;
  box-shadow: 0 -4px 16px rgba(20, 30, 40, .06);
  z-index: 5;
}
/* โชว์ "ที่มา" ไม่ใช่แค่ผลลัพธ์ - หัวหน้ากะจะเห็นว่าเลขที่กรอกทำอะไรกับ A
   และจับเลขที่กรอกผิดได้เองก่อนบันทึก */
.man-bar-calc { font-size: 12px; color: var(--oee-muted); margin-bottom: 7px; }
.man-bar-kpi { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.man-kpi {
  font-size: 14px;
  color: var(--oee-muted);
  background: var(--oee-bg);
  border: 1px solid var(--oee-line);
  border-radius: 20px;
  padding: 4px 13px;
}
.man-kpi b {
  color: var(--oee-text);
  font-family: var(--oee-font-num);
  font-variant-numeric: tabular-nums;
}
/* ตัวที่ต่ำสุดใน A/P/Q คือคอขวด - OEE เป็นผลคูณ ตัวต่ำสุดฉุดแรงที่สุด */
.man-kpi-low { background: #fffaf2; border-color: #f0c98a; }
.man-kpi-low b { color: #8a5000; }
.man-kpi-oee { background: var(--oee-sel); border-color: #bcd6f2; }
.man-kpi-oee b { color: var(--oee-accent); font-size: 16px; }

.man-bar-err {
  margin-top: 8px;
  font-size: 13px;
  color: var(--oee-danger);
  background: #fdecec;
  border: 1px solid #f6cccc;
  border-radius: var(--oee-radius);
  padding: 7px 11px;
}
.man-bar-act { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.man-dirty { font-size: 12px; color: var(--oee-warn); }
.man-dirty-on { font-weight: 600; }

/* ==================== มือถือ ====================

   หน้านี้คือเหตุผลที่ทำ responsive ทั้งหมด - หัวหน้ากะคีย์จากมือถือที่หน้างานจริง
   ใบหนึ่งมีรายการหยุด 10-20 รายการ แต่ละรายการมี 7 ช่อง ⇒ ทุก px ที่ประหยัดได้
   คือการเลื่อนที่น้อยลงจริง ๆ ไม่ใช่เรื่องความสวย */

@media (max-width: 560px) {
  /* ---------- แถบสรุปติดล่างจอ ----------
     ⚠️ ต้องเผื่อ safe-area เสมอ - บน iPhone แถบล่างของ Safari (และแถบ home
     indicator) ทับพื้นที่ 34px ล่างสุดอยู่ ปุ่มบันทึกจะกดไม่โดนทั้งที่มองเห็น
     tools/check_responsive.py ล็อกกฎนี้ไว้ */
  .man-bar {
    margin: 10px 0 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-radius: 10px 10px 0 0;
  }
  /* แถวที่มาของตัวเลข ("แผน 720 − หยุดตามแผน 60 = ...") เป็นข้อมูลตรวจสอบ
     ไม่ใช่สิ่งที่ต้องอ่านทุกวินาที - ย่อให้เหลือบรรทัดเดียวแล้วปัดดูได้ */
  .man-bar-calc {
    font-size: 11px;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 6px;
  }
  .man-bar-calc::-webkit-scrollbar { display: none; }
  .man-bar-kpi { gap: 6px; }
  .man-kpi { font-size: 13px; padding: 3px 10px; }
  .man-kpi-oee b { font-size: 15px; }
  /* ปุ่มบันทึกคือปุ่มเดียวที่ต้องกดจริงในหน้านี้ ให้กินเต็มความกว้าง
     ส่วนปุ่มลบอันตราย จึงไม่ยืดให้กดง่ายตาม */
  .man-bar-act { flex-wrap: wrap; margin-top: 8px; }
  .man-bar-act .oee-btn-primary { flex: 1 1 100%; justify-content: center; }
  .man-dirty { flex: 1 1 100%; }

  /* ---------- การ์ดรายการหยุด ---------- */
  .man-stopcard { padding: 10px 12px 12px; gap: var(--oee-s2); }
  /* บังคับคอลัมน์เดียว - auto-fit minmax(190px) ยัดได้ 2 ช่องบนจอ 390px
     ซึ่งแคบเกินกว่าจะอ่าน label ไทยจบ */
  .man-stopcard .oee-form-grid { grid-template-columns: minmax(0, 1fr); }
  .man-reason-field { max-width: none; }
  /* ช่องเวลาเต็มความกว้าง - 7.5em บนจอแคบดูเหมือนช่องที่กรอกไม่ได้ */
  .man-time { width: 100%; }

  /* ปุ่มนาทีลัดกับปุ่มประเภทคือเป้าที่กดบ่อยสุดในหน้า ต้องกดด้วยนิ้วโป้งไม่พลาด */
  .man-quick { gap: 8px; }
  .man-quick-lbl { flex: 1 1 100%; margin: 0; }
  .man-chip {
    min-height: var(--oee-ctl-h-sm);
    min-width: 72px;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
  }
  .man-kind { gap: var(--oee-s2); }
  .man-kind-btn { flex: 1 1 auto; justify-content: center; display: inline-flex; }

  /* ---------- ยอดผลิต ---------- */
  .man-qty-grid { grid-template-columns: minmax(0, 1fr); max-width: none; }

  /* ---------- ปุ่มวันที่ที่ยังไม่ได้คีย์ ----------
     เป็นทางเข้าหลักของหน้านี้ กดจากมือถือต้องไม่พลาด */
  .man-miss { min-height: var(--oee-ctl-h-sm); padding: 7px 14px; font-size: 14px; }
  .man-missing { gap: 8px; }

  /* ป้ายวันถัดไปของกะดึก - อยู่ท้าย label ซึ่งบนจอแคบมักถูกดันตก
     ให้ขึ้นบรรทัดใหม่ได้แทนที่จะดัน label จนล้น
     ⚠️ ต้องมี :not(:empty) - กฎ .man-day:empty{display:none} ด้านบนเป็น selector
     ที่เฉพาะเจาะจงน้อยกว่า ถ้าสั่ง display ทับตรงนี้เฉย ๆ ป้ายของช่องที่ไม่ได้
     คาบวันจะโผล่มาเป็นขีดสีส้มเล็ก ๆ ท้าย label ทุกช่อง (เห็นมาแล้วตอนถ่ายภาพ) */
  .man-day { margin-left: 0; }
  .oee-field-lbl .man-day:not(:empty) { display: inline-block; margin-top: 2px; }
}