/*
 * wtn คลัง — ระบบสี ตัวหนังสือ และปุ่ม
 * TASK-19: โครงโปรเจกต์เว็บ
 *
 * ข้อกำหนดที่มาจากหน้างานจริง ไม่ใช่ความสวยงาม:
 * 1. พนักงานใช้มือถือส่วนตัว ถือมือเดียว อีกมือถือของ — ปุ่มต้องสูงพอกดด้วยนิ้วโป้ง
 * 2. ในคลังแสงน้อย — ตัวหนังสือต้องคอนทราสต์สูง ห้ามใช้เทาอ่อนบนขาว
 * 3. ต้องอ่านออกตอนไม่มีเน็ต — ไม่โหลดฟอนต์จากอินเทอร์เน็ต ใช้ฟอนต์ไทยที่มีในเครื่อง
 */

:root {
  /* พื้นเหล็กชุบสังกะสี — เทาอมเขียว ไม่ใช่เทากลาง */
  --ground: #EEF1F0;
  --surface: #FFFFFF;
  --surface-2: #F6F8F7;
  --line: #D5DDDA;
  --line-strong: #A9B8B3;

  /* ตัวหนังสือ — คอนทราสต์กับพื้นขาวเกิน 12:1 ทุกตัว */
  --ink: #14201D;
  --ink-2: #33443F;
  --muted: #5C6C67;

  --accent: #0B6E4F;
  --accent-ink: #FFFFFF;
  --accent-soft: #E2F0EA;

  --warn: #9A4708;
  --warn-soft: #FBEEDF;
  --danger: #96181F;
  --danger-soft: #FAE6E6;
  --info: #17527C;
  --info-soft: #E3EDF4;

  /* ขนาดที่นิ้วโป้งกดติด — เกณฑ์ขั้นต่ำ 44px เราใช้ 52px ขึ้นไป */
  --tap: 52px;
  --tap-lg: 62px;

  --radius: 13px;
  --gap: 12px;
  --shadow: 0 1px 2px rgba(20, 32, 29, .07), 0 6px 18px rgba(20, 32, 29, .07);

  --font: -apple-system, BlinkMacSystemFont, "Noto Sans Thai", "Sarabun",
          "Leelawadee UI", "Thonburi", "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", "IBM Plex Mono", "Roboto Mono", ui-monospace,
               "Courier New", monospace;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0D1413;
    --surface: #161F1D;
    --surface-2: #1D2725;
    --line: #2A3634;
    --line-strong: #46564F;

    --ink: #EDF2F0;
    --ink-2: #C3CFCB;
    --muted: #93A19D;

    --accent: #46B489;
    --accent-ink: #042016;
    --accent-soft: #16332A;

    --warn: #E0A055;
    --warn-soft: #33250F;
    --danger: #EC7A80;
    --danger-soft: #3A1A1C;
    --info: #7BB2D8;
    --info-soft: #142833;

    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .45);
  }
}

:root[data-theme="dark"] {
  --ground: #0D1413;
  --surface: #161F1D;
  --surface-2: #1D2725;
  --line: #2A3634;
  --line-strong: #46564F;
  --ink: #EDF2F0;
  --ink-2: #C3CFCB;
  --muted: #93A19D;
  --accent: #46B489;
  --accent-ink: #042016;
  --accent-soft: #16332A;
  --warn: #E0A055;
  --warn-soft: #33250F;
  --danger: #EC7A80;
  --danger-soft: #3A1A1C;
  --info: #7BB2D8;
  --info-soft: #142833;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  margin: 0;
  overscroll-behavior-y: none;
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* กันซูมโดยไม่ตั้งใจตอนกดรัว ๆ ด้วยนิ้วเปียก */
  touch-action: manipulation;
}

/* ---------- โครงแอป ---------- */

.app {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 560px;
  margin: 0 auto;
  background: var(--surface);
}

/* แถบคิว — เห็นได้ทุกหน้า ไม่มีวันหาย */
.queuebar {
  flex: none;
  padding: calc(var(--safe-top) + 8px) 16px 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}
.queuebar[data-state="pending"] { background: var(--warn-soft); color: var(--warn); }
.queuebar[data-state="offline"] { background: var(--danger-soft); color: var(--danger); }
.queuebar .count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.appbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.appbar h1 {
  flex: 1;
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.screen {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 14px calc(var(--safe-bottom) + 26px);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/*
 * 🔴 ห้ามลบบรรทัดนี้
 * .screen เป็น flex column ลูกทุกตัวจึงถูกบีบให้เตี้ยลงได้เมื่อเนื้อหาล้นจอ
 * และตัวที่ตั้ง overflow ไว้จะถูกบีบจนเหลือ 0 เพราะขนาดขั้นต่ำอัตโนมัติกลายเป็นศูนย์
 * เคยทำให้ปุ่มสูง 62px หายไปทั้งปุ่มมาแล้ว
 */
.screen > * { flex: none; }

/* ---------- ปุ่ม ---------- */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: var(--tap);
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.btn:active { transform: scale(.985); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:disabled {
  background: var(--line);
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}

.btn-lg { min-height: var(--tap-lg); font-size: 17px; }

/* ปุ่มเลือกคน/เมนู — จัดชิดซ้ายเพราะอ่านง่ายกว่าตอนไล่สายตาลงมา */
.btn-row { justify-content: flex-start; text-align: left; }

.btn-icon {
  width: var(--tap);
  min-width: var(--tap);
  height: var(--tap);
  min-height: var(--tap);
  padding: 0;
  font-size: 20px;
}

/* ---------- ชิ้นส่วนพื้นฐาน ---------- */

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.note {
  border-left: 4px solid var(--info);
  background: var(--info-soft);
  color: var(--ink-2);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14.5px;
  line-height: 1.55;
}
.note.warn { border-left-color: var(--warn); background: var(--warn-soft); }
.note.bad { border-left-color: var(--danger); background: var(--danger-soft); }
.note.good { border-left-color: var(--accent); background: var(--accent-soft); }

.kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 15px;
}
.kv dt { color: var(--muted); margin: 0; }
.kv dd {
  margin: 0;
  font-weight: 600;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.muted { color: var(--muted); font-size: 14px; }

.label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: .01em;
}

.input {
  width: 100%;
  min-height: var(--tap);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  /* 16px ขั้นต่ำ ไม่งั้น iOS จะซูมเข้าเองตอนโฟกัส */
  font-size: 16px;
  padding: 12px 14px;
}
.input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

.field { display: flex; flex-direction: column; gap: 7px; }

/* ---------- ธง ---------- */

.flag {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.flag-order { background: var(--danger-soft); color: var(--danger); }
.flag-soon { background: var(--warn-soft); color: var(--warn); }
.flag-neg { background: var(--danger); color: #fff; }
.flag-nopar { background: var(--info-soft); color: var(--info); }
.flag-ok { background: var(--accent-soft); color: var(--accent); }

/* ---------- สถานะระบบ (หน้าตรวจเครื่อง) ---------- */

.check {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.check:last-child { border-bottom: 0; }
.check .mark { font-size: 18px; text-align: center; }
.check .mark.pass { color: var(--accent); }
.check .mark.fail { color: var(--danger); }
.check .mark.wait { color: var(--muted); }
.check .what { font-size: 15px; }
.check .what small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.check .val {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* ไม้บรรทัดวัดขนาดปุ่ม — ใช้ตรวจว่านิ้วโป้งกดติดจริง */
.ruler {
  position: relative;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
}
.ruler .mark44 {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 44px;
  border-bottom: 2px dashed var(--danger);
  pointer-events: none;
}
.ruler .mark44::after {
  content: "44px";
  position: absolute;
  right: 6px;
  top: 46px;
  font-size: 11px;
  color: var(--danger);
  font-weight: 700;
  background: var(--surface);
  padding: 0 4px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .btn:active { transform: none; }
}

/* ---------- แถบแจ้งว่ามีเวอร์ชันใหม่ ---------- */

.updatebar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--info-soft);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  font-weight: 600;
}
.updatebar .grow { flex: 1; }
.updatebar button {
  flex: none;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.updatebar[hidden] { display: none; }

/* ---------- หน้าล็อกอิน (TASK-24) ---------- */

/* ป้ายบอกว่าตอนนี้เป็นใคร — ใช้ทั้งหน้าใส่ PIN และหน้าหลัก */
.whoami {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--accent-soft);
  padding: 14px 16px;
  text-align: center;
}
.whoami-name { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.whoami-role { font-size: 14px; color: var(--accent); font-weight: 600; margin-top: 2px; }

/* ปุ่มเลือกชื่อ — ชื่อตัวใหญ่ บทบาทตัวเล็กใต้ชื่อ กดด้วยนิ้วโป้งได้ทั้งปุ่ม */
.btn-user { flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; }
.btn-user-name { font-size: 18px; font-weight: 700; }
.btn-user-role { font-size: 13.5px; font-weight: 600; color: var(--muted); }

.center { text-align: center; }

/* จุดบอกจำนวนหลักที่กดไปแล้ว — ไม่โชว์ตัวเลขจริง */
.pindots {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 6px 0 2px;
}
.pindots .dot {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: transparent;
}
.pindots .dot.on { background: var(--accent); border-color: var(--accent); }

/* แป้น PIN — ปุ่มใหญ่กว่าปุ่มทั่วไป เพราะกดเร็วด้วยนิ้วโป้งข้างเดียว */
.pinpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pinpad.off { opacity: .45; pointer-events: none; }

.pinpad .key {
  min-height: 58px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.pinpad .key:active { transform: scale(.97); background: var(--surface-2); }
.pinpad .key:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pinpad .key-soft { background: var(--surface-2); font-size: 22px; }
.pinpad .key-ok {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-size: 18px;
  font-weight: 700;
}
/* ยังกดไม่ครบ 4 หลัก — ให้เห็นว่ายังกดไม่ได้ แต่ยังอยู่ที่เดิม ไม่ขยับตำแหน่งนิ้ว */
.pinpad .key-ok:disabled {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}

/* ---------- เมนูหน้าหลัก (TASK-25) ---------- */

/*
 * 2 ช่องต่อแถว — งานประจำวัน 6 อย่างจึงพอดีจอเดียว ไม่ต้องเลื่อนหา
 * ช่องกว้างราว 180px สูง 78px ยังเป็นเป้าที่นิ้วโป้งกดติดสบาย
 */
.menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.menu .tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: 78px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.menu .tile:active { transform: scale(.985); background: var(--surface-2); }
.menu .tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.tile-label { font-size: 17px; font-weight: 700; line-height: 1.25; }
.tile-hint { font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.3; }

/* จอแคบมาก (เครื่องเล็กหรือย่อหน้าต่าง) — เหลือแถวละช่อง ตัวหนังสือจะได้ไม่ตัดคำ */
@media (max-width: 340px) {
  .menu { grid-template-columns: 1fr; }
}

/* ---------- เลือกของ · หน่วย · รูป (TASK-26) ---------- */

.itemlist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.itemrow {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--tap);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.itemrow:active { transform: scale(.99); background: var(--surface-2); }
.itemrow:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.itemrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.itemrow-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.itemrow-sub { font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* หน่วยติดมากับทุกแถว พนักงานเห็นตั้งแต่ก่อนเลือกว่ารายการนี้นับเป็นอะไร */
.itemrow-unit {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 4px 11px;
  white-space: nowrap;
}

/* ---------- การ์ดของที่เลือกแล้ว ---------- */

.itemhead {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 13px 15px;
}
.itemhead-name { font-size: 20px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.itemhead-sub { font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.itemhead-unit { font-size: 14px; color: var(--ink-2); margin-top: 8px; }

.unitchip {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 2px 12px;
}

/* ---------- รูปของ ---------- */

.itemphoto {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  overflow: hidden;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.itemphoto img { display: block; width: 100%; max-height: 240px; object-fit: contain; }
.itemphoto.empty {
  flex-direction: column;
  gap: 3px;
  border-style: dashed;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  padding: 16px;
}
.itemphoto.empty small { font-size: 12px; }

/* ---------- ช่องกรอกจำนวน + หน่วย ---------- */

/*
 * 🔴 ตัวเลขกับหน่วยอยู่ในกรอบเดียวกัน ตาเห็นพร้อมกันเสมอ
 * ป้ายหน่วยเป็นข้อความตาย ไม่ใช่ช่องกรอก — แก้ปัญหา "หน่วยไม่ตรงกับที่กรอก" ของเจ้าของ
 */
.qtyrow {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.qtyrow:focus-within { outline: 3px solid var(--accent); outline-offset: 1px; }

.qtyinput {
  flex: 1;
  min-width: 0;
  min-height: var(--tap-lg);
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: 8px 12px;
}
.qtyinput:focus-visible { outline: none; }
/* ซ่อนลูกศรขึ้นลง — กดพลาดง่ายและกินที่ */
.qtyinput::-webkit-outer-spin-button,
.qtyinput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qtyinput { -moz-appearance: textfield; appearance: textfield; }

.qtyunit {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: var(--accent-soft);
  border-left: 1px solid var(--line);
  color: var(--accent);
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- สูตรสินค้า (TASK-41) ---------- */

/* ปุ่มสลับตัวกรอง — เห็นทั้งสองทางเลือกพร้อมกัน ไม่ต้องเดาว่ากดแล้วจะเป็นอะไร */
.segbar {
  display: flex;
  gap: 8px;
}
.segbar .seg {
  flex: 1;
  min-height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}
.segbar .seg.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* สูตรที่มีอยู่แล้ว — อ่านอย่างเดียว */
.linelist { display: flex; flex-direction: column; gap: 6px; }
.lineitem {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 15px;
}
.lineitem-name { font-weight: 600; overflow-wrap: anywhere; }
.lineitem-qty {
  flex: none;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--accent);
}

/* กล่องข้อเสนอที่รออนุมัติ — ใช้สีเตือน ไม่ใช่สีปกติ จะได้ไม่กลืนกับสูตรที่ใช้อยู่ */
.card.pendingcard { border-left: 4px solid var(--warn); background: var(--warn-soft); }

/* แถวแก้สูตร — ชื่อของเต็มบรรทัด จำนวนกับปุ่มลบอยู่บรรทัดล่าง */
.recipeline {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "item item" "qty del";
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.recipeline .recipe-item { grid-area: item; }
.recipeline .recipe-qty { grid-area: qty; }
.recipeline .recipe-del {
  grid-area: del;
  width: auto;
  min-width: 74px;
  color: var(--danger);
  border-color: var(--line-strong);
}
.recipeline .qtyinput { min-height: var(--tap); font-size: 20px; }

/* ---------- เบิกของ (TASK-27) ---------- */

/* ยอดคงเหลือตัวใหญ่ — ต้องเห็นก่อนพิมพ์จำนวน ไม่ใช่ต้องเพ่งหา */
.bigqty {
  font-size: 34px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.1;
}
.bigqty span { font-size: 17px; font-weight: 600; color: var(--muted); }

/* ปุ่มเลือกเหตุผล — ใช้ .tile เดิม เพิ่มสถานะ "เลือกแล้ว" ให้เห็นชัด */
.menu .tile.on {
  background: var(--accent);
  border-color: var(--accent);
  border-left-color: var(--accent);
  color: var(--accent-ink);
}
.menu .tile.on .tile-hint { color: var(--accent-ink); opacity: .85; }

/* ---------- ค้นหาของ (TASK-29) ---------- */

/* ป้ายตำแหน่งในผลค้นหา — เห็นตั้งแต่ยังไม่ต้องกดเข้าไป */
.placechip {
  flex: none;
  max-width: 45%;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 5px 11px;
  text-align: center;
  line-height: 1.3;
}
.placechip.none { color: var(--muted); background: var(--surface-2); font-weight: 600; }

/*
 * 🔴 กล่องตำแหน่ง — พระเอกของหน้านี้
 * พนักงานยืนกลางคลัง ถือมือถือมือเดียว ต้องเหลือบดูแล้วรู้เลยว่าเดินไปไหน
 */
.placebox {
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  padding: 14px 16px;
  text-align: center;
}
.placebox .label { color: var(--accent); }
.placebig {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.placebox.none {
  border-color: var(--line-strong);
  border-style: dashed;
  background: var(--surface-2);
}
.placebox.none .label { color: var(--muted); }
.placebox.none .placebig { font-size: 21px; color: var(--muted); }
.placebox .muted { margin-top: 6px; }

/* ---------- นับสต็อก (TASK-31) ---------- */

.countlist { display: flex; flex-direction: column; gap: 8px; }

/*
 * แถวนับ — ชื่อของอยู่บน ช่องกรอกอยู่ล่าง เต็มความกว้าง
 * พนักงานยืนนับ ถือมือถือมือเดียว ช่องต้องใหญ่พอกดด้วยนิ้วโป้งโดยไม่ต้องเล็ง
 * 🔴 ในแถวนี้ไม่มีที่ไหนแสดงยอดที่ระบบคิดไว้เลย โดยตั้งใจ
 */
.countrow {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.countrow-main { min-width: 0; }
.countrow-name { font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.countrow-sub { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 1px; }
.countrow-qty .qtyinput { min-height: var(--tap); font-size: 22px; }

/* การ์ดรายการที่นับไม่ตรง */
.card.diffcard { border-left: 4px solid var(--warn); background: var(--warn-soft); }

/* ปุ่มเลือกเหตุผล — 4 ปุ่มเรียงกัน แตะครั้งเดียวจบ */
.reasonbar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.reasonbar .seg {
  min-height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.reasonbar .seg.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* ---------- TASK-32 หน้าอนุมัติปรับยอด ---------- */

/*
 * การ์ดส่วนต่าง — สีบอกทันทีว่าของหายหรือของเกิน
 * ผู้จัดการเลื่อนผ่านสิบกว่าใบ ต้องแยกออกโดยไม่ต้องอ่านตัวเลข
 */
.card.apvcard { border-left: 4px solid var(--line-strong); }
.card.apvcard.loss { border-left-color: var(--danger); background: var(--danger-soft); }
.card.apvcard.gain { border-left-color: var(--warn); background: var(--warn-soft); }
.card.apvcard.picked { outline: 2px solid var(--accent); outline-offset: 1px; }

/* แตะได้ทั้งแถบชื่อ ไม่ใช่แค่ช่องติ๊กเล็ก ๆ — นิ้วโป้งในคลังกดไม่แม่น */
.apvpick {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
}
.apvbox {
  flex: none;
  width: 30px;
  height: 30px;
  border: 2px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}
.card.apvcard.picked .apvbox { border-color: var(--accent); background: var(--accent-soft); }
.apvname { font-size: 17px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.apvsub { font-size: 13px; color: var(--muted); margin-top: -4px; overflow-wrap: anywhere; }

/* ส่วนต่างคือเลขที่ต้องตัดสินใจ จึงใหญ่กว่าบรรทัดอื่น */
.kv.apvdiff dt { font-weight: 700; color: var(--ink-2); }
.kv.apvdiff dd { font-size: 21px; }

/* ปุ่มตัดสินอยู่ท้ายรายการ ไม่ลอยทับเนื้อหา — จอเล็กพื้นที่มีจำกัด */
.stickyact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

/* ---------- TASK-17b หน้าแจ้งเตือน ---------- */

/* จุดแดง + ตัวเลขบนปุ่มหน้าหลัก */
.menu .tile.hasdot { border-left-color: var(--danger); }
.tile-label { display: flex; align-items: center; gap: 8px; }
.tiledot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 12px;
  background: var(--danger);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/*
 * ระดับความสำคัญบอกด้วยสีขอบ ไม่ใช่แค่ตัวหนังสือ
 * ผู้จัดการเลื่อนดูเร็ว ๆ ต้องเห็นว่าใบไหนด่วนโดยไม่ต้องอ่าน
 */
.card.alertcard { border-left: 4px solid var(--info); }
.card.alertcard.important { border-left-color: var(--warn); background: var(--warn-soft); }
.card.alertcard.urgent { border-left-color: var(--danger); background: var(--danger-soft); }
/* อ่านแล้วให้จางลง แต่ยังอ่านออก — ไม่ใช่ซ่อน เพราะยังต้องย้อนดูได้ */
.card.alertcard.read { background: var(--surface-2); opacity: .72; }
.card.alertcard.read.important,
.card.alertcard.read.urgent { border-left-color: var(--line-strong); }

.alerthead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.alertlevel {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--info-soft);
  color: var(--info);
  font-size: 12.5px;
  font-weight: 800;
}
.alertlevel.important { background: var(--warn-soft); color: var(--warn); }
.alertlevel.urgent { background: var(--danger-soft); color: var(--danger); }
.alerttime { font-size: 12.5px; color: var(--muted); font-weight: 600; }

.alertsubject { font-size: 17px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.alertbody {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}