/* SPC App — มาตรฐานดีไซน์ที่พี่หนึ่งอนุมัติ (TASKS-claude-code-jobboard.md)
   พื้นขาว · ส้ม #E75C1D เป็นจุดเน้นเท่านั้น · Prompt (หัว 500 เนื้อ 300) · มุม 4px */
:root {
  /* menu-1/dark: --card = พื้นการ์ด/ตาราง · --bg = พื้นหน้า — โหมดมืด override ท้ายไฟล์ */
  --card: #fff;
  --bg: #fff;
  /* ui-4: สีเชิงความหมาย — โหมดมืดลดส้มเหลือ accent (หัวข้อ/หัวตาราง/ตัวเลข → ครีม) */
  --head: var(--o-dark);
  --num: var(--o-dark);
  --thbg: var(--tint);
  --topbar-bg: linear-gradient(135deg, #E75C1D, #B54312);
  --topbar-bd: 0 solid transparent;
  --brandtx: #fff;
  --o: #E75C1D;
  --o-dark: #B54312;
  --tint: #FFDFCE;
  --ink: #141414;
  /* a11y-1: เดิม #8B8179 บนพื้นขาววัดได้ 3.81 — ต่ำกว่าเกณฑ์อ่านออก (4.5)
     ข้อความจาง ๆ พวกนี้คือป้ายในตาราง/คำอธิบายใต้ชื่อ = ของที่คนสายตายาวอ่านยากสุด
     เข้มขึ้นเป็น #6F675F (5.55) ยังดูเป็นสีเทาโทนอุ่นเหมือนเดิม ไม่ดำทึบ */
  --grey: #6F675F;
  --grey2: #6b6259;
  --line: #E9E7E4;
  --cream: #FAFAFA;
  --warn: #C0392B;
  --green: #0EA04A;
  --gold: #B8860B;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Prompt', system-ui, sans-serif;
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
}

a { color: var(--o-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
b, strong { font-weight: 500; }

main { max-width: 1240px; margin: 0 auto; padding: 16px 18px 70px; }

h1 { font-size: 1.4rem; font-weight: 500; margin: 8px 0 4px; }
h2 { font-size: 1.05rem; font-weight: 500; margin: 24px 0 10px; color: var(--head); }

/* ---------- หัวเว็บ: ขาว + เส้นส้ม 3px + โลโก้จริง ---------- */
.topbar { background: var(--card); border-bottom: 3px solid var(--o); position: sticky; top: 0; z-index: 20; }
.topbar-inner {
  margin: 0; padding: 10px 18px 0 12px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 20px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; }
.brand img { height: 32px; display: block; }
.brand:hover { text-decoration: none; }
.topbar nav { display: flex; gap: 0; overflow-x: auto; }
.topbar nav a {
  color: var(--grey); padding: 10px 2px 8px; margin-right: 18px;
  border-bottom: 3px solid transparent; margin-bottom: -3px;
  font-weight: 400; font-size: .95rem; white-space: nowrap;
}
.topbar nav a:hover { color: var(--ink); text-decoration: none; }
.topbar nav a.active { color: var(--ink); border-bottom-color: var(--o); font-weight: 500; }
.userchip {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  color: var(--grey2); font-size: .85rem; padding-bottom: 8px;
}
.userchip a {
  color: var(--o-dark); border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 12px; font-size: .82rem;
}

/* ---------- การ์ดสรุปยอด ---------- */
.cards {
  display: grid; gap: 10px; margin: 14px 0 18px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 4px;
  padding: 11px 14px;
}
.card-main { border-left: 3px solid var(--o); }
.card-main .card-value { color: var(--num); }
.card-label { font-size: .8rem; color: var(--grey); }
.card-value { font-size: 1.2rem; font-weight: 500; white-space: nowrap; }

/* ---------- ฟอร์มกรอง / ปุ่ม ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.filters input[type=search] { flex: 1 1 220px; }
input[type=search], input[type=text], input[type=password], select, .bigsearch input {
  font: inherit; font-weight: 300; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--card); color: var(--ink);
}
input:focus, select:focus { outline: 2px solid var(--o); border-color: var(--o); }

/*  🌙 `intake-legacy-1` ③ — ช่องกรอกบนธีมมืดต้อง **เห็นขอบชัด** ไม่ใช่เดาว่ามีช่องอยู่ตรงไหน
    (พื้นช่อง `--card #12151A` กับพื้นหน้า `--bg #0A0C0F` ต่างกันแค่นิดเดียว + ขอบ `--line` จมไปกับพื้น)
    ⇒ ยกพื้นช่องให้สว่างกว่าการ์ดหนึ่งขั้น + ขอบเทาอ่อนที่มองเห็นจริงบน iPad
    🔙 ทางถอย: ลบบล็อกนี้ทิ้งทั้งก้อน (ธีมสว่างไม่ได้แตะเลย) */
:root[data-theme="dark"] input[type=search], :root[data-theme="dark"] input[type=text],
:root[data-theme="dark"] input[type=tel], :root[data-theme="dark"] input[type=number],
:root[data-theme="dark"] input[type=password], :root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: #1B2029; border-color: #3B434E;
}
/* 🎫 `plain-ui-supply-plan-1` (ไอ้อ้วน 🐷 10 ก.ย. 69 · ใบจ่า 22:5x · ต่อจากที่ 🥚 กวาดเจอ)
   🔴 อาการ: แถบคำสั่งหมู่ท้ายหน้า `/supply/plan` (`#bulkbar`) **โผล่ตลอดเวลา**
      ทั้งที่จาวาสคริปต์สั่งซ่อนไว้ (`bar.hidden = n === 0` = ไม่ได้ติ๊กอะไรเลยต้องไม่เห็น)
   · ต้นเหตุวัดจากหน้าจริงแล้ว ไม่ใช่เดา: แท็กนั้นเขียน `display:flex` ไว้ใน `style=` ของตัวเอง
     ⇒ **สไตล์ในแท็กชนะทั้งกฎ `[hidden]` ของเบราว์เซอร์และทุกกฎในไฟล์นี้**
     (ต่างจากเคส `.stock-table` ข้างล่างที่แพ้ให้กฎในไฟล์ — อันนั้นเป็นกฎธรรมดาชนกัน)
   · ของจริงที่คนเจอ: แถบสูง **237 px** ค้างท้ายจอมือถือ 390 พร้อมข้อความ "เปลี่ยนสถานะ…"
     ทั้งที่ยังไม่ได้เลือกสักรายการ
   · `!important` จำเป็นตรงนี้ — เป็นทางเดียวที่กฎในไฟล์จะชนะสไตล์ในแท็กได้ ⛔ ไม่ได้ใส่ตามใจ
   · ⛔ ไม่แตะเทมเพลต ไม่แตะจาวาสคริปต์ ⇒ ตอนกดติ๊กแล้วแถบโผล่ ทรงเหมือนเดิมทุกพิกเซล
   ↩️ ถอย: ลบ 1 บรรทัดล่างนี้ทิ้ง */
#bulkbar[hidden] { display: none !important; }

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] input[type=search], :root[data-theme="auto"] input[type=text],
  :root[data-theme="auto"] input[type=tel], :root[data-theme="auto"] input[type=number],
  :root[data-theme="auto"] input[type=password], :root[data-theme="auto"] select,
  :root[data-theme="auto"] textarea {
    background: #1B2029; border-color: #3B434E;
  }
}
button {
  font: inherit; font-weight: 500; color: #fff; background: var(--o);
  border: 0; border-radius: 6px; padding: 8px 18px; cursor: pointer;
}
button:hover { background: var(--o-dark); }
.chk { display: flex; align-items: center; gap: 6px; font-size: .9rem; }
.chk input { width: 18px; height: 18px; accent-color: var(--o); }

.count { color: var(--grey2); font-size: .85rem; margin: 6px 0; }
.count.ok { color: var(--green); font-weight: 500; }

/* ---------- ตาราง: หัว tint ส้ม ---------- */
.table-wrap { overflow-x: auto; }
table {
  width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
}
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); }
th { background: var(--thbg); color: var(--head); font-weight: 500; font-size: .85rem; white-space: nowrap; letter-spacing: .3px; }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.total { font-weight: 500; }
tr.zero td { color: var(--grey); }
tr.zero td a { color: var(--grey); }
.sub { font-size: .78rem; color: var(--grey2); margin-top: 2px; font-weight: 300; }
.sub.matched { color: var(--green); }
.sub.red { color: var(--warn); }   /* หมายเหตุย่อยที่ต้องสะดุดตา เช่น "แผนยาวผิดปกติ" */

/* ---------- a11y-1 (พี่หนึ่งขอ 6 ส.ค.): "ปรับให้คนแก่อ่านออกและทำงานได้" ----------
   หลักที่ใช้: ① ตัวหนังสือใหญ่ขึ้นทั้งหน้าบนมือถือ ② ช่องกรอก/ปุ่มสูงอย่างน้อย 48px
   ③ ช่องกรอกอย่างน้อย 16px (ต่ำกว่านี้ iOS จะซูมหน้าเองเวลาแตะ = หน้าเด้ง)
   ④ ตัวเลขเงินตัวโตอ่านชัด ⑤ ฟอร์มบนมือถือเรียงเป็นบรรทัด ไม่บีบให้กดพลาด */
@media (max-width: 719px) {
  body { font-size: 17px; line-height: 1.55; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.2rem; }
  h3 { font-size: 1.06rem; }
  .sub { font-size: .92rem; }
  .hint { font-size: .95rem; }
  /* ช่องกรอก/ปุ่ม: นิ้วโป้งกดง่าย + ไม่ทำให้ iOS ซูม */
  input, select, textarea, button, .btnlike, .btn {
    font-size: 16px !important; min-height: 48px;
  }
  input[type=checkbox], input[type=radio] { min-height: 0; width: 24px; height: 24px; }
  button.small, .small { min-height: 48px; }
  /* ฟอร์มบนมือถือ: ช่องละบรรทัด เต็มความกว้าง ไม่ต้องเล็งกด */
  .filters { gap: 10px; }
  .filters > input, .filters > select, .filters > button, .filters > .btnlike {
    flex: 1 1 100%; width: 100%;
  }
  .filters > .sub { flex: 1 1 100%; }
  /* ตัวเลขเงินในตาราง: โตกว่าข้อความปกติ อ่านเร็ว */
  .stock-table td.num { font-size: 1.05rem; font-weight: 500; }
  /* การ์ดงานในตารางงาน: ชื่อลูกค้าและรายละเอียดอ่านง่ายขึ้น */
  .jcard .t { font-size: 1.12rem; }
  .jcard .meta span { font-size: .95rem; }
  .dayh { font-size: 1.1rem; }
  /* แถบเมนูล่าง: ตัวหนังสือใหญ่ขึ้นนิด + พื้นที่กดสูงขึ้น */
  .bottomnav a, .bottomnav button { font-size: .78rem; padding: 8px 0 6px; }
  .bottomnav .ic { font-size: 1.35rem; }
  /* ป้ายสถานะ/ชิป: เดิมเล็กมากบนมือถือ */
  .hintb, .typechip, .teamb { font-size: .85rem; }
  /* ข้อมูลงาน (ขนาดระบบ/เฟส/ทีม): ค่าตัวโต ป้ายชื่อสีจาง */
  .info-grid > div { font-size: 1.05rem; }
  .info-grid span { font-size: .9rem; }
  .stock-table thead { display: none; }
  .stock-table, .stock-table tbody, .stock-table tr, .stock-table td { display: block; width: 100%; }
  .stock-table tr { border-bottom: 5px solid var(--cream); padding: 5px 0; }
  /* 🔴 `plain-ui-income-1` (ไข่เต่า 🥚 10 ก.ย. 22:0x · วัดจากหน้าจริง)
     บรรทัดบนสั่ง `.stock-table tr{display:block}` ซึ่ง **ชนะกฎ `[hidden]` ของเบราว์เซอร์**
     ⇒ แถวที่เทมเพลตสั่งซ่อนไว้ **โผล่หมดบนมือถือ**
     · วัดของจริงบน `/income`: ของที่สั่ง hidden 200 ชิ้น — **โผล่ให้เห็น 198 ชิ้น**
       (ฟอร์ม "บันทึกรับเงิน" ของทุกงาน ที่ควรขึ้นเมื่อกด ➕ เท่านั้น)
     · ฉีดกฎนี้ในเบราว์เซอร์แล้ววัดซ้ำ: หน้า **159,348 → 76,115 px (สั้นลง 52%)**
     · เทมเพลตที่ได้ผลด้วย (ใช้ `.stock-table` + มีแถว hidden): income_collect · allowance ·
       leave · supply_plan · supply_receive_new
     ↩️ ถอย: ลบบล็อกนี้ทิ้ง (ไม่มีอะไรอื่นพึ่งมัน) */
  .stock-table tr[hidden], .stock-table td[hidden], .stock-table tbody[hidden] { display: none !important; }
  .stock-table td { border: 0; padding: 3px 14px; text-align: left; }
  .stock-table td.num { display: flex; justify-content: space-between; text-align: right; }
  .stock-table td.num::before { content: attr(data-label); color: var(--grey2); font-size: .95rem;
    font-weight: 300; text-align: left; }
  /* ตารางสรุป 2 คอลัมน์ (ชื่อ + ยอด) ไม่ต้องมีป้ายซ้ำชื่อแถว */
  .stock-table.sumtable td.num::before { content: none; }
  .stock-table.sumtable td.num { justify-content: flex-end; font-size: 1.15rem; }
  .stock-table td.col-name { padding-top: 8px; font-weight: 400; }
  .stock-table td.num.nil { display: none; }
}

/* ---------- หน้า detail สินค้า ---------- */
.back { display: inline-block; margin-bottom: 4px; font-size: .9rem; }
.itemcode { color: var(--grey); font-size: .9rem; margin-bottom: 8px; }
.info-grid {
  display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  background: var(--card); border: 1px solid var(--line); border-radius: 4px;
  padding: 14px; margin: 12px 0;
}
.info-grid span { display: block; font-size: .76rem; color: var(--grey); }
.info-grid .wide { grid-column: 1 / -1; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  background: var(--tint); color: var(--o-dark);
  border-radius: 999px; padding: 3px 11px; font-size: .82rem; font-weight: 400;
}
.hint { color: var(--grey2); font-size: .88rem; margin: 8px 0; }
.empty { color: var(--grey); padding: 32px 0; text-align: center; }
.empty.ok { color: var(--green); font-size: 1.05rem; }

details { margin: 12px 0; }
summary { cursor: pointer; font-weight: 500; padding: 9px 0; }

/* ---------- ค้นรหัสเก่า ---------- */
.bigsearch { display: flex; gap: 8px; margin: 14px 0 18px; }
.bigsearch input { flex: 1; font-size: 1.05rem; padding: 12px 14px; }
.result-list { display: flex; flex-direction: column; gap: 9px; }
.result { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 12px 15px; }
.result:hover { border-color: var(--o); text-decoration: none; }
.result-name { font-weight: 500; font-size: 1rem; color: var(--ink); }

/* ---------- สุขภาพข้อมูล ---------- */
.sev { display: inline-block; border-radius: 999px; padding: 2px 11px; font-size: .78rem; font-weight: 500; color: #fff; margin-right: 6px; }
.sev-error { background: var(--warn); }
.sev-warn { background: var(--gold); }
.sev-info { background: var(--grey); }
.health-list { margin: 6px 0 6px 22px; }
.health-list li { padding: 4px 0; border-bottom: 1px dashed var(--line); font-size: .92rem; }

/* ---------- login ---------- */
.login-box {
  max-width: 380px; margin: 8vh auto 0; background: var(--card);
  border: 1px solid var(--line); border-top: 3px solid var(--o); border-radius: 4px;
  padding: 26px 24px; text-align: center;
}
.login-box img { height: 42px; margin-bottom: 6px; }

/*  🎨 `login-dark-logo-1` (จ่า 8 ก.ย. 10:15) — โลโก้บนหน้า `/login` ต้อง **อ่านออกทั้ง 2 โหมด**
    ไฟล์ที่ใช้ตอนนี้ = `img/brand/spc-logo-h84-v1.png` (โปร่งจริง) แต่เป็น **หมึกดำ**
    ⇒ โหมดสว่าง (การ์ด #fff) อ่านออกอยู่แล้ว — **บล็อกนี้จึงไม่แตะโหมดสว่างเลย**
    ⇒ โหมดมืด (การ์ด #12151A) ตัวหนังสือจมพื้น ⇒ วางบน **แผ่นขาวมุมมน** ทรงเดียวกับ
       `.hdr img` ของ `mea_status.html` (ต้นทาง `.logoplate` ของ `etax.html`) — ท่าที่บ้านนี้ใช้อยู่แล้ว
    ⛔ ห้ามแก้ด้วย `filter: invert()/brightness()` — โรคที่เพิ่งถอดออกจาก `/mea/status` 7 ก.ย. 69
    📌 ประกาศ 2 ที่เหมือนบล็อกช่องกรอกข้างบน: เลือก "มืด" เอง + "อัตโนมัติ" ตามเครื่อง
    🔙 ทางถอย: ลบบล็อกนี้ทิ้งทั้งก้อน */
:root[data-theme="dark"] .login-box img {
  background: #fff; padding: 6px 10px; border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
  /* ⛔ ทั้งเว็บเป็น border-box (บรรทัด 30) — ถ้าไม่พลิกตรงนี้ padding จะกินความสูง 42px
     ⇒ โลโก้โหมดมืดหดเหลือ 30px เล็กกว่าโหมดสว่างให้เห็นด้วยตา (วัดแล้ว 124px vs 146px) */
  box-sizing: content-box;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .login-box img {
    background: #fff; padding: 6px 10px; border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
  }
}
.login-form { display: flex; flex-direction: column; gap: 13px; margin: 16px 0 10px; text-align: left; }
.login-form label { font-size: .85rem; color: var(--grey2); display: flex; flex-direction: column; gap: 5px; }
.login-form input { font-size: 1rem; padding: 11px 13px; }
.login-form button { padding: 12px; font-size: 1rem; }
.login-error { color: var(--warn); font-weight: 500; }

footer { text-align: center; color: var(--grey); font-size: .8rem; padding: 24px 14px 40px; }

/* ============ หน้าตารางงาน (ตาม mockup ที่อนุมัติ) ============ */
.jtabs { display: flex; margin-bottom: 14px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.jtab {
  background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -1px;
  padding: 9px 3px 7px; margin-right: 18px; cursor: pointer; font-family: inherit;
  font-size: .95rem; font-weight: 400; white-space: nowrap; color: var(--grey);
}
.jtab:hover { color: var(--ink); background: none; }
.jtab.on { color: var(--ink); border-bottom-color: var(--o); font-weight: 500; }
/* เลเจนด์แบบจุดสี (มติ 3 ส.ค.) — แถวเดียวเลื่อนข้างได้ อยู่ล่างสุดของหน้า */
.lgblock { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 10px; }
.lgtitle { font-size: .72rem; color: #B8B0A8; margin-bottom: 4px; }
.legend {
  display: flex; gap: 14px; align-items: center; overflow-x: auto;
  white-space: nowrap; scrollbar-width: none; padding: 4px 0; max-width: 100%;
}
.legend::-webkit-scrollbar { display: none; }
.lgi { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--grey2); flex: 0 0 auto; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.lgsep { color: #D8D3CD; flex: 0 0 auto; }
.view { display: none; }
.view.on { display: block; }

/* ปฏิทิน */
.calnav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.calnav b { font-size: 1.05rem; font-weight: 500; }
.calnav button { background: var(--card); color: var(--ink); border: 1px solid var(--line); padding: 5px 14px; font-size: 1rem; }
.calnav button:hover { border-color: var(--o); color: var(--o-dark); background: var(--card); }
.cal { background: var(--card); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.calhead { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--thbg); border-bottom: 1px solid var(--line); }
.calhead div { padding: 8px; text-align: center; font-size: .8rem; font-weight: 500; color: var(--head); letter-spacing: .4px; }
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); }
/* min-width:0 สำคัญ: ไม่งั้นชื่องานยาว (nowrap) ดันช่องจนปฏิทินล้นขอบขวาบนจอแคบ — วันศุกร์/เสาร์หายทั้งคอลัมน์ */
.cell { min-width: 0; min-height: 100px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 5px; background: var(--card); }
.cell.out { background: var(--cream); }   /* ui-3 ①: โหมดมืดได้โทนมืดตาม --cream */
.cell .dnum { font-size: .76rem; color: var(--grey); margin-bottom: 3px; }
.cell.today .dnum {
  background: var(--o); color: #fff; border-radius: 50%; width: 21px; height: 21px;
  display: flex; align-items: center; justify-content: center;
}
.ev {
  position: relative;
  font-size: 13px; font-weight: 500; line-height: 1.35;
  padding: 4.5px 8px; border-radius: 4px; color: #fff; margin-bottom: 4px;
  cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* การ์ดแยกสถานะ (kanban) — มือถือเลื่อนแนวนอน */
.kb { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.kcol { background: var(--cream); border: 1px solid var(--line); border-radius: 4px; padding: 10px; }
.kcol h4 { margin: 0 0 8px; font-size: .92rem; font-weight: 500; display: flex; justify-content: space-between; align-items: center; }
.kcol h4 em { font-style: normal; color: var(--grey2); font-size: .8rem; background: var(--card); border: 1px solid var(--line); padding: 1px 9px; border-radius: 999px; }
.kcard {
  border: 1px solid var(--line); border-left: 3px solid var(--o); border-radius: 4px;
  padding: 9px 11px; margin-bottom: 8px; cursor: pointer; background: var(--card);
}
.kcard:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.kcard b { display: block; font-weight: 500; font-size: .9rem; margin-bottom: 2px; }
.kcard small { color: var(--grey2); font-size: .78rem; display: block; font-weight: 300; }
@media (max-width: 719px) {
  .kb { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 8px; }
  .kcol { flex: 0 0 78vw; }
}

/* รายการเรียงตามวัน */
.day { margin-bottom: 18px; }
.dayh { font-weight: 500; font-size: .98rem; margin: 0 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; }
.dayh em { font-style: normal; font-weight: 300; font-size: .82rem; color: var(--grey2); }
.jcard {
  background: var(--card); border: 1px solid var(--line); border-radius: 4px;
  padding: 12px 14px; margin-bottom: 8px; display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
}
.jcard:hover { border-color: var(--o); }
.jcard .kbar { width: 5px; align-self: stretch; border-radius: 3px; flex: 0 0 5px; }
.jcard .body { flex: 1; min-width: 0; }
.jcard .t { font-weight: 500; font-size: .98rem; margin-bottom: 2px; }
.jcard .meta { font-size: .82rem; color: var(--grey2); display: flex; gap: 12px; flex-wrap: wrap; font-weight: 300; }
/* joblist-dateless-1 ②: แถวลูกค้าในผลค้นหา — ไม่ใช่การ์ดงาน กดทั้งใบไม่ได้ ต้องกดที่ชื่อ */
.custrow { cursor: default; }
.custrow .kbar { background: var(--o); }
.custrow .t a { color: var(--o-dark); text-decoration: underline; }
.warnb { background: #FDEAEA; color: #9c2222; font-size: .74rem; padding: 2px 8px; border-radius: 999px; }
.teamb { background: var(--tint); color: #9c3a08; font-size: .74rem; padding: 2px 8px; border-radius: 999px; }
.typechip { font-size: .72rem; padding: 2px 9px; border-radius: 999px; color: #fff; font-weight: 400; white-space: nowrap; }

/* แผนที่ */
#mapbox { height: 62vh; min-height: 340px; border: 1px solid var(--line); border-radius: 4px; }
.note {
  background: var(--cream); border: 1px solid var(--line); border-left: 4px solid var(--o);
  padding: 12px 15px; border-radius: 4px; margin-bottom: 14px; font-size: .88rem;
}
.note.red { border-left-color: var(--warn); }

/*  ⚠️ `studio-web-1` (28 ส.ค. 69) — **กล่องเตือน/ทางตันต้องมีป้าย**
    🔴 คลาสนี้ถูกใช้อยู่แล้วใน 5 หน้า (คลังคำตอบ · สิทธิ์ SpecPack · คำท้ายใบ · สเปกบุลเลต · โรงคอนเทนต์)
       แต่ **ไม่เคยถูกนิยามในไฟล์กลาง** — มีนิยามอยู่ที่เดียวคือในบล็อก <style> ของ quote_new.html
       ⇒ อีก 4 หน้าที่เหลือ กล่องเตือนออกมาเป็น **ตัวหนังสือเปล่า ๆ ไม่มีกรอบ ไม่มีสี**
          = ป้ายเตือนที่ตั้งใจให้สะดุดตา กลับกลมกลืนไปกับข้อความรอบ ๆ
    ⇒ นิยามไว้ตรงนี้ที่เดียว (หน้าที่มีนิยามของตัวเองยังชนะเหมือนเดิม ไม่กระทบ) */
.warnbox {
  border: 1px solid var(--warn); border-left: 4px solid var(--warn); border-radius: 4px;
  padding: 12px 15px; margin-bottom: 14px; font-size: .88rem; background: var(--cream);
}
.warnbox b { font-weight: 600; }
/* ช่องกรอกเบอร์เร็วบนธงเหลือง — กรอกจากหน้างานได้เลยไม่ต้องเข้าหน้าแก้ลูกค้า */
.quickphone { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.quickphone input { flex: 1 1 200px; min-width: 0; padding: 8px 10px; font-size: .9rem;
  border: 1px solid var(--line); border-radius: 4px; }
.quickphone button { padding: 8px 14px; font-size: .88rem; white-space: nowrap; }
.note b { font-weight: 500; }

/* modal รายละเอียดงาน */
.mask { position: fixed; inset: 0; background: rgba(20,20,20,.55); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
.mask.on { display: flex; }
.modal { background: var(--card); border-radius: 6px; max-width: 560px; width: 100%; max-height: 88vh; overflow: auto; }
.mh { padding: 15px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mh h3 { margin: 0; font-size: 1.1rem; font-weight: 500; }
.x { cursor: pointer; font-size: 1.5rem; color: var(--grey); line-height: 1; background: none; border: 0; padding: 0 4px; }
.x:hover { background: none; color: var(--ink); }
.mb { padding: 15px 20px; }
.kv { display: grid; grid-template-columns: 116px 1fr; gap: 7px 12px; font-size: .92rem; }
.kv dt { color: var(--grey2); font-weight: 300; }
.kv dd { margin: 0; font-weight: 400; overflow-wrap: anywhere; }
.sec { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.sec h5 { margin: 0 0 7px; font-size: .85rem; font-weight: 500; color: var(--o); }
.actbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: stretch; }
.actbtns a {
  flex: 1 1 calc(50% - 8px); min-width: 130px; white-space: nowrap;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  text-align: center; padding: 11px 10px; border-radius: 6px; font-weight: 500;
  font-size: .95rem; color: #fff; background: var(--o);
}
.actbtns a.alt { background: var(--card); color: var(--o-dark); border: 1px solid var(--o); }
.actbtns a:hover { text-decoration: none; }

/* ---------- แกลเลอรีรูปหน้ารายละเอียดงาน ---------- */
.phgrid { display: none; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.phgrid.on { display: grid; }
.phitem {
  aspect-ratio: 1; border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: var(--cream);
}
.phitem img { width: 100%; height: 100%; object-fit: cover; }
.phold { flex-direction: column; gap: 2px; color: #b9b0a8; font-size: 1.3rem; }
.phold small { font-size: .68rem; }
.phalbum { flex-direction: column; gap: 2px; color: var(--o-dark); font-size: 1.3rem; background: var(--tint); }
.phalbum small { font-size: .68rem; }
.phalbum:hover { text-decoration: none; border-color: var(--o); }
@media (max-width: 640px) { .phgrid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- ปรับให้อ่าน/กดง่ายบนมือถือ (docs/review-mobile-0208.md) ---------- */
.ts { display: none; }          /* ชื่อแท็บแบบสั้น โผล่เฉพาะจอเล็ก */

@media (max-width: 640px) {
  /* ทีมส่วนใหญ่อายุมาก — ตัวหนังสือในปฏิทินห้ามต่ำกว่า 13px */
  .cell { min-height: 92px; }
  .ev { font-size: 13px; padding: 4px 5px; font-weight: 500; line-height: 1.3; }
  .kv { grid-template-columns: 96px 1fr; }
  .brand img { height: 26px; }

  .tl { display: none; }
  .ts { display: inline; }

  /* ที่ว่างท้ายหน้า ให้เลื่อนพ้นปุ่ม "+ เพิ่มงาน" ที่ลอยอยู่มุมขวาล่าง */
  main { padding-bottom: 96px; }

  /* พื้นที่กดขนาดนิ้วโป้ง (เกณฑ์ 48px — a11y-2) */
  .chk { min-height: 48px; padding: 0 4px; }
  .chk input { width: 22px; height: 22px; }
  .userchip a { padding: 9px 14px; }
  .calnav button { padding: 10px 16px; }

  /* การ์ดแยกสถานะ: ให้คอลัมน์ถัดไปโผล่มากขึ้น + เลื่อนแล้วหยุดเข้าที่ */
  .kb { scroll-snap-type: x proximity; }
  .kcol { flex: 0 0 82vw; scroll-snap-align: start; }
}

/* ============ ฟอร์มเพิ่ม/แก้งาน (docs/spec-job-form.md) ============ */
.jform { max-width: 620px; }
.fl { display: block; font-size: .82rem; color: var(--grey2); margin: 14px 0 5px; }
.req { color: var(--warn); }
/* job-time-css-1: ⛔ เพิ่มชนิดช่องใหม่ในฟอร์ม **ต้องเติมในรายการนี้ด้วยเสมอ**
   ไม่งั้นช่องนั้นไม่ได้สไตล์เลย → บนมือถือกลายเป็นวงรีขาวจิ๋วพื้นขาวบนธีมมืด
   (เคสจริง 7 ส.ค.: `input[type=time]` ตกไป พี่หนึ่งเปิดใช้แล้วเจอทันที) */
.jform input[type=text], .jform input[type=url], .jform input[type=date],
.jform input[type=time], .jform input[type=number], .jform input[type=search],
.jform select, .jform textarea {
  width: 100%; font: inherit; font-weight: 300; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink);
}
/* a11y ของบ้านนี้: ช่องที่ต้องแตะบนมือถือสูงอย่างน้อย 48px — ช่องเวลาของ iOS เตี้ยกว่านั้น */
.jform input[type=time], .jform input[type=date] { min-height: 48px; }
.jform textarea { resize: vertical; }
.frow { display: flex; gap: 12px; flex-wrap: wrap; }
.frow > div { flex: 1 1 150px; }

/* ปุ่มเลือกแบบแถบสี — แตะง่ายกว่า dropdown บนมือถือ */
.pickrow { display: flex; flex-wrap: wrap; gap: 7px; }
/*  🔴 `intake-legacy-1` ③ — เดิมบรรทัดนี้เขียนว่า `.pick input` เฉย ๆ
    ⇒ **ช่องพิมพ์ทุกช่องที่บังเอิญอยู่ในกล่อง .pick หายไปทั้งช่อง** (opacity:0)
    เคสจริง: พี่หนึ่งเปิด /solar/match บน iPad — กล่อง "➕ สร้างลูกค้าใหม่"
    เห็นแต่ปุ่ม ไม่เห็นช่องชื่อ/เบอร์ กดสร้างเปล่า ๆ (หน้านั้นโดน 2 กล่อง: ช่องพิมพ์ชื่อเอง + กล่องสร้างลูกค้าใหม่)
    ⇒ ซ่อนเฉพาะปุ่มกลม/ติ๊กถูกที่ตั้งใจให้ซ่อนอยู่แล้ว (ตัวที่มี `+ span` เป็นหน้ากาก)
    🔙 ทางถอย: เอาบรรทัดเดียวข้างล่างกลับเป็น `.pick input { ... }` */
.pick input[type=radio], .pick input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.pick span {
  display: inline-block; padding: 7px 13px; border-radius: 6px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--card); font-size: .9rem; color: var(--grey2);
  border-left: 4px solid var(--c, var(--line));
}
.pick input:checked + span { background: var(--c); color: #fff; border-color: var(--c); font-weight: 500; }
.pick input:focus-visible + span { outline: 2px solid var(--o); }

.stepper { display: flex; align-items: stretch; gap: 0; }
.stepper button {
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  padding: 0 16px; font-size: 1.2rem; border-radius: 6px 0 0 6px;
}
.stepper button:last-child { border-radius: 0 6px 6px 0; }
.stepper input { border-radius: 0 !important; text-align: center; border-left: 0 !important; border-right: 0 !important; }

.picked { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--cream); }
.linkbtn { background: none; color: var(--o-dark); border: 0; padding: 4px 0; font-size: .85rem; text-decoration: underline; cursor: pointer; }
.linkbtn:hover { background: none; color: var(--o); }
.acbox { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 260px; overflow-y: auto; }
.acitem { display: block; width: 100%; text-align: left; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 9px 12px; font-weight: 300; }
.acitem:hover { background: var(--cream); border-color: var(--o); color: var(--ink); }
.subform { border: 1px dashed var(--line); border-radius: 6px; padding: 4px 12px 12px; margin-top: 8px; background: var(--cream); }
.hide { display: none !important; }
.formactions { margin: 22px 0 40px; }
.formactions button { width: 100%; padding: 14px; font-size: 1.05rem; }

/* hr-2: คนที่ลาวันนั้น — ตัวเลือกเป็นเทาชัด ๆ (ยังกดได้ ระบบถามยืนยันก่อน ตามกติกา assign-3) */
.pick.onleave { opacity: .55; text-decoration: line-through solid var(--grey2) 1px; }
.pick.onleave .hintb { text-decoration: none; opacity: 1; }

/* ปุ่มลอย "เพิ่มงาน" */
.fab {
  position: fixed; right: 18px; bottom: 22px; z-index: 30;
  background: var(--o); color: #fff; border-radius: 999px; padding: 13px 20px;
  font-weight: 500; box-shadow: 0 3px 12px rgba(231,92,29,.4); font-size: 1rem;
}
.fab:hover { background: var(--o-dark); text-decoration: none; color: #fff; }

/* ============ หน้ารวมลูกค้าซ้ำ ============ */
.mgroup { border: 1px solid var(--line); border-radius: 4px; margin-bottom: 14px; overflow: hidden; }
.mghead { background: var(--tint); color: var(--o-dark); font-weight: 500; padding: 8px 14px; font-size: .92rem; }
.mghead em { font-style: normal; font-weight: 300; color: var(--grey2); font-size: .82rem; }
.mgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); padding: 12px 14px; }
.mcard { border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; background: var(--card); }
.mpick input { position: absolute; opacity: 0; }
.mpick span {
  display: inline-block; padding: 3px 12px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--line); font-size: .78rem; color: var(--grey2);
}
.mpick input:checked + span { background: var(--o); border-color: var(--o); color: #fff; font-weight: 500; }
.mchk { display: block; font-size: .8rem; color: var(--grey2); margin: 7px 0 4px; }
.mname { font-weight: 500; font-size: .98rem; }
.mmeta { font-size: .82rem; color: var(--grey2); margin-top: 5px; }
.mgact { display: flex; gap: 8px; padding: 0 14px 12px; flex-wrap: wrap; }
button.ghost { background: var(--card); color: var(--grey2); border: 1px solid var(--line); }
button.ghost:hover { background: var(--cream); color: var(--ink); }

/* ปุ่มเปลี่ยนสถานะเร็ว (ช่างกดบนมือถือหน้างาน) */
.quickst { display: flex; gap: 8px; flex-wrap: wrap; }
.quickst button { padding: 12px 18px; font-size: .95rem; }
@media (max-width: 640px) { .quickst form { flex: 1 1 46%; } .quickst button { width: 100%; } }

/* ป้ายบอกใบ้กลุ่มลูกค้าซ้ำ (คำแนะนำ ไม่ใช่คำตัดสิน) */
.hintb { font-size: .72rem; padding: 2px 9px; border-radius: 999px; font-weight: 400; margin-left: 6px; }
.hintb.dup { background: var(--tint); color: var(--o-dark); }
.hintb.diff { background: #F0EEEC; color: var(--grey2); }
.hintb.new { background: #EDF2EA; color: #46613D; }

/* price-link-1: แถวที่ถูกเจาะมาจากป้ายรอราคาในหน้างาน */
.focusrow > td { background: var(--tint); box-shadow: inset 3px 0 0 var(--o-dark); }

/* fm-1: ฟอร์ม FM-01 บนเว็บ — แถวช่องกรอกแบบมือถือเป็นหลัก */
.fmrow { display: flex; align-items: center; justify-content: space-between; gap: 8px;
         flex-wrap: wrap; min-height: 48px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.fmlabel { flex: 1 1 40%; }
.fmpair { display: flex; align-items: center; gap: 6px; }
.fmpair input { width: 92px; }
.fmchips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.chipbtn { font: inherit; font-size: 15px; padding: 8px 14px; min-height: 48px; border-radius: 999px;
           border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.chipbtn.on { background: var(--o); border-color: var(--o); color: #fff; }
#others .free input.xitem { flex: 1 1 100%; }
@media (max-width: 719px) {
  .fmlabel { flex: 1 1 100%; }
  .fmpair, .fmchips { flex: 1 1 100%; justify-content: flex-start; }
  .fmpair input.fqty, .fmpair input.fspec { width: 40%; }
}

/* sw-1 ③: แถบวิ่งบนสุดตอนกำลังเปลี่ยนหน้า — ขึ้นทันทีที่กด (ก่อนเน็ตตอบ) */
.navloading::before { content: ""; position: fixed; top: 0; left: 0; height: 3px; z-index: 9999;
  background: var(--o, #E75C1D); animation: navbar-run 1.2s ease-out forwards; }
@keyframes navbar-run { 0% { width: 0; } 60% { width: 70%; } 100% { width: 92%; } }

/* price-link-2: บล็อกกรอกราคาในช่อง "เป็นเงิน"
   cost-ui-1 (พี่หนึ่งชี้เอง): ปุ่ม "แก้ราคา" เคยกินบรรทัดของตัวเอง → ทุกแถวสูงขึ้น
   มองภาพรวมอุปกรณ์ในจอเดียวไม่ได้ · ตอนนี้ **ตัวเลข + ปุ่ม อยู่บรรทัดเดียวกัน**
   ฟอร์มกรอกค่อยกางลงมาตอนกดเปิดเท่านั้น */
.pricefix { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center;
            justify-content: flex-end; vertical-align: middle; margin-left: 6px; }
.pricefix .hintb { display: inline-block; margin: 0; }
.pricefix .pricedit { display: inline-block; }
.pricefix .pricedit[open] { flex: 1 1 100%; }        /* กางแล้วค่อยกินเต็มความกว้าง */
.pricefix .pricedit > summary { padding: 2px 8px; line-height: 1.5; }
.stock-table tbody td.num .pricefix .sub { text-align: right; }
@media (max-width: 719px) {
  /* td.num เป็น flex บนจอแคบ — บล็อกนี้ต้องกินเต็มแถวใหม่ ไม่ให้ chip/ฟอร์ม/ลิงก์โดนบีบเป็น flex children */
  .stock-table td.num { flex-wrap: wrap; }
  .stock-table td.num .pricefix { flex: 1 1 100%; text-align: left; }
  .pricefix .hintb { align-self: flex-start; margin-left: 0; }
  .pricefix form.filters { flex-direction: column; align-items: stretch; margin-top: 8px; }
  .pricefix form.filters input, .pricefix form.filters button { width: 100%; min-height: 48px; }
  /* price-follow-1: ยกเว้นช่องติ๊ก — ต้องอยู่หลังกฎข้างบน (จำเพาะเท่ากัน ตัวหลังชนะ) */
  .pricefix form.filters input[type=checkbox] { width: 22px; min-height: 0; }
  .pricefix .sub { white-space: normal; overflow-wrap: anywhere; margin-top: 6px; }
  .pricefix .sub a { display: inline-block; padding: 8px 0; }  /* เป้าแตะลิงก์สูงพอ */
}

/* cost-inline-add-1: ชื่อช่องที่ยังไม่ได้กรอก = ปุ่มเล็ก กดแล้วช่องกรอกโผล่ตรงนั้น */
.missingrow { line-height: 2.2; }
.addfield { display: inline-block; margin: 0 4px 4px 0; vertical-align: middle; }
.addfield > summary { display: inline-block; list-style: none; cursor: pointer;
  font-size: .82rem; padding: 4px 10px; min-height: 32px; line-height: 24px; }
.addfield > summary::-webkit-details-marker { display: none; }
.addfield[open] > summary { background: var(--o); border-color: var(--o); color: #fff; }
@media (max-width: 719px) { .addfield > summary { min-height: 48px; line-height: 38px; font-size: .9rem; } }

/* cost-group-1: หัวกลุ่มในตารางวัสดุ (เรียงตามใบกระดาษ) */
.matgrouphead td { background: var(--cream); border-top: 1px solid var(--line); padding-top: 10px; }
@media (max-width: 719px) { .matgrouphead td { padding: 10px 14px; } }

/* cost-wp-1: ตัวเลข ฿/W เป็นตัวรองในบรรทัดเดียวกัน (ตัวหลักยังเด่นเหมือนเดิม) */
.wpcell { display: block; font-weight: 400; opacity: .78; font-size: .85rem; }

/* cost-9: แก้จำนวนวัสดุตรงแถว — ช่องเล็กกลืนกับตาราง กดแล้วพิมพ์ทับได้เลย */
.qtyedit { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.qtyedit input { width: 72px; text-align: right; padding: 4px 6px; }
@media (max-width: 719px) { .qtyedit input { min-height: 48px; } }

/* cost-8: กล่องแก้ราคาอุปกรณ์ (พับไว้ กดค่อยเปิด) */
.pricedit > summary { display: inline-block; min-height: 48px; line-height: 30px; cursor: pointer;
                      list-style: none; }
.pricedit > summary::-webkit-details-marker { display: none; }
.pricedit label { text-align: left; }
.pricedit input[type=radio] { width: 22px; height: 22px; vertical-align: middle; }
/* price-follow-1: ติ๊ก "ราคาพิเศษเฉพาะงานนี้" — ช่องติ๊กต้องเล็กและอยู่บรรทัดเดียวกับข้อความ
   ⛔ ของเดิมมีแต่กฎของ radio ⇒ checkbox ตกไปโดนกฎกว้าง กลายเป็นกล่องใหญ่ลอยกลางกล่องแก้ราคา */
.pricedit input[type=checkbox] { width: 22px; height: 22px; flex: 0 0 auto; min-height: 0;
                                 vertical-align: middle; accent-color: var(--o); }
.pricedit label.keepcat { display: flex; align-items: center; gap: 6px; white-space: normal;
                          text-align: left; line-height: 1.35; }

/* cost-5: แถวสรุปใบเบิกที่ผูกไว้ — แตะขยายรายใบ (เป้าแตะ ≥48px ตามเกณฑ์ a11y) */
.allocgrp summary { min-height: 48px; display: flex; align-items: center; flex-wrap: wrap;
                    gap: 2px; cursor: pointer; }
/* cost-7: แถวสรุปวัสดุหน้างาน (ยุบ/ขยายทั้งตาราง) — ให้เด่นกว่าแถวสรุปในตาราง */
.matgrp > summary { font-weight: 500; padding: 6px 0; border-bottom: 1px solid var(--line); }
.hintb.split { background: #FFF3CD; color: #7a5b00; }

/* ปุ่มตาดูรหัสผ่าน (ช่างพิมพ์บนมือถือผิดบ่อย) */
.pwwrap { display: flex; align-items: stretch; gap: 0; }
.pwwrap input { flex: 1; border-radius: 6px 0 0 6px; }
.eye {
  background: var(--card); color: var(--grey2); border: 1px solid var(--line); border-left: 0;
  border-radius: 0 6px 6px 0; padding: 0 14px; font-size: 1.1rem; cursor: pointer;
}
.eye:hover { background: var(--cream); }

/* รายการเรียงตามวัน: งานย้อนหลังพับไว้ ไม่ให้ดันงานวันนี้ตกจอ */
.lspast { margin: 0 0 14px; }
.lspast > summary {
  font-weight: 400; font-size: .9rem; color: var(--grey2); padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}
.lspast[open] > summary { color: var(--ink); margin-bottom: 10px; }

/* ============ หน้ามอบหมายงานรายวัน ============ */
.btnlike {
  display: inline-block; border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 14px; color: var(--ink); background: var(--card); font-size: .92rem;
}
.btnlike:hover { border-color: var(--o); text-decoration: none; }
.btnlike.on { background: var(--tint); color: var(--o-dark); border-color: var(--o); font-weight: 500; }

/* .btn = ชื่อเดียวกันแบบสั้น — ใช้อยู่ใน expense_detail / mr / mr_detail มานานแล้ว
   แต่ไม่เคยมีนิยาม (ปุ่มพวกนั้นเลยเรนเดอร์เป็นลิงก์เปล่า) · buy-0 ประกาศให้ครั้งเดียวจบ */
.btn {
  display: inline-block; border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 14px; color: var(--ink); background: var(--card); font-size: .92rem;
}
.btn:hover { border-color: var(--o); text-decoration: none; }
.btn.on { background: var(--tint); color: var(--o-dark); border-color: var(--o); font-weight: 500; }

.agroup { border: 1px solid var(--line); border-radius: 4px; margin-bottom: 12px; overflow: hidden; }
.aghead { background: var(--cream); padding: 10px 14px; }
.aghead .sub { margin-top: 3px; }
.agroup > details > summary { padding: 9px 14px; font-size: .92rem; color: var(--o-dark); font-weight: 400; }

.alist { padding: 4px 14px 8px; }
.arow {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: .92rem;
}
.arow:last-child { border-bottom: 0; }
.arow .who { font-weight: 500; }
.arow .duty { color: var(--grey2); font-size: .85rem; }
button.small { padding: 4px 12px; font-size: .82rem; }
button.ghost { background: var(--card); color: var(--grey2); border: 1px solid var(--line); }
button.ghost:hover { background: var(--cream); color: var(--warn); }

.aform { padding: 4px 14px 16px; }
.aform .fl { display: block; font-size: .8rem; color: var(--grey2); margin: 10px 0 4px; }
.aform textarea, .aform input[type=text], .aform select {
  width: 100%; font: inherit; font-weight: 300; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink);
}
.pickgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pick {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 13px; font-size: .88rem; cursor: pointer; background: var(--card);
}
/*  🔴 `intake-legacy-1` ③ (จุดที่สอง) — ไฟล์นี้มี `.pick` **สองความหมาย** ปนกัน:
    ปุ่มแถบสี (บรรทัด ~440) กับป้ายกลมแบบติ๊กถูก (บรรทัดนี้)
    กฎเดิม `.pick input` บีบ **ช่องพิมพ์** ที่บังเอิญอยู่ในกล่องเดียวกันเหลือ 18×18px
    ⇒ หน้า /solar/match ช่องชื่อ/เบอร์เลยกลายเป็นจุดจิ๋ว มองไม่เห็นว่าเป็นช่องกรอก
    ⇒ ล็อกให้จับเฉพาะปุ่มกลม/ติ๊กถูกตามเจตนาเดิม
    🔙 ทางถอย: กลับเป็น `.pick input { ... }` บรรทัดเดียว */
.pick input[type=radio], .pick input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--o); }
.pick:has(input:checked) { background: var(--tint); border-color: var(--o); color: var(--o-dark); font-weight: 400; }

/* ใครไปงานนี้ (หน้ารายละเอียดงาน) */
.crewday { border: 1px solid var(--line); border-radius: 4px; padding: 11px 14px; margin-bottom: 10px; }
.crewhead { font-weight: 500; color: var(--o-dark); font-size: .92rem; margin-bottom: 7px; }
.crewwho { display: flex; flex-wrap: wrap; gap: 7px; }
.crewnote { margin-top: 9px; font-size: .9rem; color: var(--grey2); line-height: 1.5; }
.crewnote b { color: var(--ink); font-size: .84rem; }

/* หน้า "งานของฉัน" — หน้าที่ช่างเปิดจากลิงก์ในไลน์ */
.mycard { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; margin-bottom: 10px; }
.mycard .t { font-weight: 500; font-size: 1.02rem; margin-bottom: 4px; }
.mycard .meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: .85rem; color: var(--grey2); }
.mycard .addr { font-size: .9rem; color: var(--grey2); margin-top: 5px; }
.mycard .actbtns { margin-top: 10px; }

/* เมนูบนหัวเว็บบนมือถือ: ยาวเกินจอ ต้องมีอะไรบอกว่าเลื่อนได้ ไม่งั้นเมนูท้าย ๆ หายไปเฉย ๆ
   (เคสจริง 2 ส.ค. — พี่หนึ่งหา "งานของฉัน" ไม่เจอบนมือถือ ทั้งที่อยู่อันที่ 2) */
@media (max-width: 640px) {
  .topbar-inner { padding-top: 8px; }
  .topbar nav {
    order: 3; flex: 1 0 100%;      /* ให้เมนูได้บรรทัดเต็มของตัวเอง */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
  .topbar nav a { margin-right: 15px; }
  .userchip { padding-bottom: 4px; }
}

/* บนมือถือ เมนูเป็นปุ่มเม็ดยาให้เด่นและกดง่ายด้วยนิ้วโป้ง (พี่หนึ่งขอ 2 ส.ค.)
   บนคอมยังเป็นแท็บขีดเส้นใต้เหมือนเดิม */
@media (max-width: 640px) {
  .topbar nav { gap: 8px; padding: 2px 0 10px; align-items: center; }
  .topbar nav a {
    margin: 0; padding: 0 16px; min-height: 48px;
    display: inline-flex; align-items: center;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--card); color: var(--ink); font-weight: 400; font-size: 1rem;
  }
  .topbar nav a.active {
    background: var(--o); border-color: var(--o); color: #fff; font-weight: 500;
  }
}

/* ช่องอุปกรณ์หลักในฟอร์มงาน — ช่องชื่อรุ่น + ช่องจำนวนอยู่บรรทัดเดียวกัน */
.eqrow { display: flex; gap: 8px; margin-bottom: 4px; }
.eqrow input[type=text] { flex: 1; min-width: 0; }
.eqrow .eqqty { width: 110px; flex: 0 0 110px; }
@media (max-width: 640px) { .eqrow .eqqty { width: 88px; flex: 0 0 88px; } }

/* ค่าที่ระบบเลือกให้ตามกฎอุปกรณ์พ่วง — ต้องดูออกทันทีว่าอันไหนระบบเติม อันไหนคนเลือกเอง
   (พี่หนึ่งสั่ง: "แอดมินเปลี่ยนได้ กรณีระบบเลือกผิดหรือต้องใช้ตัวอื่น") */
.eqrow { flex-wrap: wrap; }
.eqrow input.autofilled { background: #F3FAF5; border-color: var(--green); }
.autotag {
  flex: 0 0 100%; font-size: 12px; color: var(--grey2);
  display: flex; gap: 8px; align-items: center; margin: -2px 0 6px;
}
.autotag b { color: var(--green); font-weight: 600; }
.autotag .lnk {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--o); text-decoration: underline; cursor: pointer;
}

/* หน้าจับคู่รุ่นอุปกรณ์ — ช่องเลือก + ปุ่มผูก อยู่บรรทัดเดียว */
.matchform { display: flex; gap: 6px; align-items: center; margin: 0; }
.matchform select { max-width: 320px; }
@media (max-width: 719px) { .matchform { flex-wrap: wrap; } .matchform select { max-width: 100%; } }
.guessy { font-size: .76rem; color: var(--gold); white-space: nowrap; }

/* ============ มือถือ: ปุ่มต้องกดโดนจริง (a11y-2: เกณฑ์ 48px ทั้งเว็บ) ============
   เดิม button.small สูงราว 24px · ปุ่มปกติราว 34px — นิ้วโป้งกดพลาดง่ายมาก
   โดยเฉพาะปุ่มที่อยู่ติดกันในแถวเดียว (ตัดรายการออก / เพิ่ม / ยกเลิกใบ)
   ⛔ ไม่แตะจอใหญ่เลย — อยู่ใน media query ล้วน ๆ
   ⛔ เว้นปุ่มที่มีขนาดของตัวเองอยู่แล้วหรือเป็นลิงก์ในบรรทัดข้อความ
      (.stepper=ปุ่ม +/- ที่ยืดเต็มความสูงช่องอยู่แล้ว · .linkbtn/.lnk=ลิงก์ใต้บรรทัด · .jtab=แท็บ)
   ⚠️ เขียนแบบ "ตั้งทั้งหมดแล้วยกเว้นทีหลัง" ตั้งใจ — ไม่ใช้ :not() ซ้อนตัวเลือกซับซ้อน
      เพราะ Safari บนไอโฟนรุ่นก่อน 16.4 จะ **ทิ้งทั้งกฎ** แล้วปุ่มไม่โตเลยแบบเงียบ ๆ */
@media (max-width: 719px) {
  button, .btn, .btnlike {
    min-height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  button.small { padding: 4px 14px; font-size: .88rem; }
  /* ยกเว้น: ปุ่มที่มีขนาดของตัวเองอยู่แล้ว หรือเป็นลิงก์ในบรรทัดข้อความ */
  .stepper button { min-height: 0; }
  .linkbtn, .lnk { min-height: 0; display: inline; }
  .jtab { min-height: 0; display: inline-block; }
  /* ปุ่มในตารางที่พับเป็นการ์ด: กว้างเต็มแถว กดง่ายกว่าปุ่มจิ๋วชิดขวา */
  .stock-table td > button.small { width: 100%; }
}

/* ═══════════════ menu-1 (4 ส.ค. 2569) — เมนูใหม่แบบ A + โหมดมืด ═══════════════
   บล็อกเดียวถอยได้ทั้งก้อน (แพทเทิร์นรอบ #35) · เงื่อนไขสิทธิ์อยู่ใน base.html ไม่เกี่ยวไฟล์นี้ */

/* ── หัวเว็บโทนแบรนด์ (mockup แบบ A) ── */
.topbar { background: var(--topbar-bg); border-bottom: var(--topbar-bd); }
/* ui-2: แถบสูงขึ้นนิด + โลโก้ขาวพื้นโปร่งวางตรง ๆ ไม่มีกล่อง (พี่หนึ่งเคาะจากภาพจริง) */
.topbar-inner { min-height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 34px; }
.brandname { color: var(--brandtx); font-weight: 500; font-size: 1.02rem; letter-spacing: .2px; }
@media (max-width: 899px) {
  .topbar-inner { min-height: 54px; }
  .brand img { height: 29px; }
  .brandname { font-size: .95rem; }
}
.topbar .userchip, .topbar .userchip a { color: #fff; }
.topbar nav { display: none; }              /* ลิงก์เรียงแบบเก่าเลิกใช้ — ย้ายเข้าแถบข้าง/แถบล่าง */

/* ── แถบข้าง (จอคอม ≥900px) ── */
.sidenav {
  position: fixed; left: 0; top: 0; bottom: 0; width: 230px; z-index: 19;
  background: var(--card); border-right: 1px solid var(--line);
  padding: 64px 0 12px; overflow-y: auto; display: none;
}
.sidenav .grp {
  font-size: .68rem; color: var(--grey); padding: 14px 16px 4px;
  text-transform: uppercase; letter-spacing: .5px;
}
.sidenav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 16px;
  font-size: .88rem; color: var(--ink); text-decoration: none;
  border-left: 3px solid transparent; min-height: 40px;
}
.sidenav a:hover { background: var(--cream); text-decoration: none; }
.sidenav a.on { background: var(--tint); border-left-color: var(--o); color: var(--o-dark); font-weight: 500; }
.sidenav .ic { width: 22px; text-align: center; flex-shrink: 0; }
.sidenav .navfoot { margin-top: 18px; padding: 10px 16px; border-top: 1px solid var(--line); }
.side-collapse {
  font: inherit; font-size: .78rem; color: var(--grey2); background: none;
  border: 1px solid var(--line); border-radius: 4px; padding: 5px 10px; cursor: pointer; width: 100%;
}
html.side-min .sidenav { width: 64px; }
html.side-min .sidenav a { justify-content: center; padding: 9px 4px; }
html.side-min .sidenav .lbl, html.side-min .sidenav .grp,
html.side-min .sidenav .themebox b { display: none; }
@media (min-width: 900px) {
  .sidenav { display: block; }
  main, footer { margin-left: 230px; }
  html.side-min main, html.side-min footer { margin-left: 64px; }
  .bottomnav, .allsheet, .navscrim { display: none !important; }
}

/* ── แถบล่าง (มือถือ <900px) ── */
.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; display: flex;
  min-height: 56px; padding-bottom: env(safe-area-inset-bottom);
  background: var(--card); border-top: 1px solid var(--line);
}
.bottomnav a, .bottomnav button {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; font-family: inherit; font-size: .66rem;
  color: var(--grey2); text-decoration: none; background: none; border: 0; cursor: pointer;
  padding: 6px 0 4px;
}
.bottomnav .ic { font-size: 1.2rem; line-height: 1; }
.bottomnav .on { color: var(--o); font-weight: 500; }
.bottomnav .on::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 34px; height: 3px; background: var(--o); border-radius: 0 0 3px 3px;
}
@media (max-width: 899px) {
  /* a11y-1: จอกลาง (แท็บเล็ต/มือถือแนวนอน) ก็อ่านง่ายขึ้นด้วย ไม่ใช่แค่จอเล็ก */
  body { font-size: 16.5px; }
  /* a11y-2 (6 ส.ค.): บล็อกนี้อยู่ท้ายไฟล์ = ทับกฎ 48px ของบล็อกมือถือด้านบน
     เคยตั้ง 46px แล้วทั้งเว็บกลายเป็น 46 เงียบ ๆ — ต้องเท่ากับเกณฑ์ 48px เสมอ */
  input, select, textarea, button, .btnlike, .btn { font-size: 16px !important; min-height: 48px; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  /* แถบปุ่มหมู่หน้าแผน (sticky bottom) ต้องลอยเหนือแถบเมนู */
  #bulkbar { bottom: calc(58px + env(safe-area-inset-bottom)) !important; }
  /* ui-5 (พี่หนึ่งเจอเอง 4 ส.ค. จอจริง): ปุ่มลอย "+ เพิ่มงาน" ทับแถบเมนูล่าง
     → ยกขึ้นเหนือแถบ (56px) + safe-area ของ iPhone + ระยะห่างอีก 12px
     และเว้นท้ายหน้าให้เลื่อนพ้นปุ่ม ไม่ให้บังรายการสุดท้าย */
  /* ui-5 รอบสอง (6 ส.ค. พี่หนึ่งเจอเอง): ปุ่มลอย "ทับ" การ์ดที่เลื่อนผ่านใต้มัน
     → แตะการ์ดตรงมุมขวาล่างแล้วโดนปุ่มแทน = "กดเข้าบางรายการไม่ได้"
     แก้: ย่อปุ่มลง + จางลงตอนเลื่อน + กลับมาเต็มตัวเมื่อหยุดเลื่อน (ยังกดเพิ่มงานได้ตลอด) */
  .fab { bottom: calc(56px + env(safe-area-inset-bottom) + 12px); right: 12px;
         padding: 11px 16px; font-size: .95rem;
         transition: opacity .18s ease, transform .18s ease; }
  .fab.scrolling { opacity: .25; transform: scale(.9); pointer-events: none; }
  main { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
}

/* ── แผ่น "ทั้งหมด" (bottom sheet) ── */
.navscrim {
  position: fixed; inset: 0; background: rgba(20, 20, 20, .4); z-index: 22;
}
.allsheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 23;
  background: var(--card); border-radius: 14px 14px 0 0; max-height: 78vh; overflow-y: auto;
  padding: 8px 0 calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(20, 20, 20, .2);
}
.allsheet .grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 6px auto 4px; }
.allsheet .grp {
  font-size: .68rem; color: var(--grey); padding: 12px 18px 4px;
  text-transform: uppercase; letter-spacing: .5px;
}
.allsheet a {
  display: flex; align-items: center; gap: 12px; padding: 11px 18px;
  font-size: .92rem; color: var(--ink); text-decoration: none; min-height: 48px;
}
.allsheet a.on { background: var(--tint); color: var(--o-dark); font-weight: 500; }
.allsheet .navfoot { padding: 12px 18px 0; border-top: 1px solid var(--line); margin-top: 10px; }

/* ── ปุ่มธีม 3 ค่า ── */
.themebox { margin-top: 10px; }
.themebox b { display: block; font-size: .72rem; color: var(--grey); font-weight: 400; margin-bottom: 5px; }
.themebox .seg { display: flex; gap: 4px; }
.themebox button {
  flex: 1; font-family: inherit; font-size: .74rem; padding: 5px 4px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--grey2); border-radius: 4px;
}
.themebox button.on { background: var(--tint); color: var(--o-dark); border-color: var(--o); font-weight: 500; }

/* ── โหมดมืด — โทนอุ่นอิงแบรนด์ (พี่หนึ่งขอ 4 ส.ค.) ──
   ตัวเลข contrast บนพื้น #191715: #F2EFEA=13.9:1 · #A99F94=6.2:1 · #F07640=5.4:1 (ผ่าน ≥4.5)
   ประกาศ 2 ที่: เลือก "มืด" เอง + "อัตโนมัติ" ตามเครื่อง (Safari เก่ารองรับ — ไม่มี :not ซ้อน) */
:root[data-theme="dark"] {
  --card: #12151A; --bg: #0A0C0F;
  --ink: #F2EDE8; --grey: #8A9099; --grey2: #A2A8B0;
  --line: #232830; --cream: #161A20; --tint: #2A1A10;
  --o-dark: #FF8A45; --warn: #FF6B6B; --green: #37D67A; --gold: #FFB020;
    /* ui-4 ①: ส้มเหลือ accent — หัวข้อ/หัวตาราง/ตัวเลขเป็นลำดับขั้นครีม */
    --head: #F2EDE8; --num: #F2EDE8; --thbg: #161A20;
    /* ui-4 ②: แถบหัวโทนเข้ม + เส้นส้มบาง (โหมดสว่างคงแถบส้มเดิม) */
    --topbar-bg: #12151A; --topbar-bd: 2px solid #FF6B1A; --brandtx: #F2EDE8;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --card: #12151A; --bg: #0A0C0F;
    --ink: #F2EDE8; --grey: #8A9099; --grey2: #A2A8B0;
    --line: #232830; --cream: #161A20; --tint: #2A1A10;
    --o-dark: #FF8A45; --warn: #FF6B6B; --green: #37D67A; --gold: #FFB020;
    /* ui-4 ①: ส้มเหลือ accent — หัวข้อ/หัวตาราง/ตัวเลขเป็นลำดับขั้นครีม */
    --head: #F2EDE8; --num: #F2EDE8; --thbg: #161A20;
    /* ui-4 ②: แถบหัวโทนเข้ม + เส้นส้มบาง (โหมดสว่างคงแถบส้มเดิม) */
    --topbar-bg: #12151A; --topbar-bd: 2px solid #FF6B1A; --brandtx: #F2EDE8;
  }
}
/* กันข้อความจมในกล่องที่ยังพื้นขาว inline (เอกสาร A4 ดูบนจอ) — คงตัวอักษรเข้มไว้ */
[data-theme] .docwhite, [data-theme] .docwhite * { color: #141414; }

/* ── จุดตาย: เอกสารพิมพ์ต้องขาวเสมอ ไม่ว่าธีมไหน ── */
@media print {
  :root, :root[data-theme="dark"], :root[data-theme="auto"] {
    --card: #fff; --bg: #fff; --ink: #141414; --grey: #8B8179; --grey2: #6b6259;
    --line: #E9E7E4; --cream: #FAFAFA; --tint: #FFDFCE; --o-dark: #B54312;
    --warn: #C0392B; --green: #0EA04A; --gold: #B8860B;
    --head: #B54312; --num: #B54312; --thbg: #FFDFCE;
    --topbar-bg: #fff; --topbar-bd: 0 solid transparent; --brandtx: #B54312;
  }
  body { background: #fff !important; }
  .sidenav, .bottomnav, .allsheet, .navscrim { display: none !important; }
  main, footer { margin-left: 0 !important; }
}
/* ═══════════════ จบบล็อก menu-1 ═══════════════ */

/* ═══════════════ exp-split-fix-2 (6 ส.ค. 69) — ช่องติ๊กเลือกงานในหน้าใบเบิก ═══════════════
   พี่หนึ่งสั่งเอง: "มีช่องให้ติ๊กสี่เหลี่ยมเล็ก ๆ แล้วกดผูกงาน ง่ายสุด"
   ⛔ ไม่ทำ <button> แล้ว toggle class เอง — ต้องเป็น <input type=checkbox> ของจริง
   บล็อกนี้ต่อท้ายไฟล์ ไม่แก้ของเดิม → ถอยได้ด้วยการลบทั้งบล็อก */
.pickrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.pickbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
           padding: 6px 14px; }                    /* พื้นที่กดทั้งแถบ (chipbtn ให้ min-height 48px แล้ว) */
.pickbox input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto;
                                  accent-color: var(--o); margin: 0; }
.pickbox .sub { color: inherit; opacity: .75; }    /* ติ๊กแล้วพื้นส้ม ตัวเทาจะจมหาย */
.nojobbox { border-style: dashed; }
.splitbar, .setbar { display: block; }             /* บนมือถือห้ามลอยไปต่อท้ายแถวจนมองไม่เห็น */
.savebtn, .setok { min-height: 48px; }

/* ============ allowance-edit-1: แก้เบี้ยเลี้ยงด้วยมือ (หน้า /allowance) ============ */
/* ⛔ ชนิดช่องที่ใช้ในฟอร์มนี้ต้องมีครบในรายการนี้ — ลืมชนิดไหน = ช่องนั้นเป็นวงรีขาวจิ๋วบนธีมมืด
   (บทเรียนเดียวกับ input[type=time] ที่ตกไปเมื่อ 7 ส.ค. · เทสต์ด่านนี้ไล่จากเทมเพลตจริง) */
.adjform input[type=text], .adjform input[type=number], .adjform input[type=date],
.adjform input:not([type]), .adjform select {
  width: 100%; font: inherit; font-weight: 300; padding: 10px 12px; min-height: 48px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink);
}
.adjform label { display: block; font-size: .82rem; color: var(--grey2); margin-bottom: 4px; }
.adjgrid { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.adjgrid > label { flex: 1 1 150px; }
.adjgrid > label.wide { flex: 1 1 100%; }
.adjform .savebtn { width: 100%; margin-top: 4px; }
.adjform .savebtn.danger { border-color: var(--warn); color: var(--warn); }
.adjtabs { display: flex; flex-direction: column; gap: 14px; }
.adjtabs > .adjform { border-top: 1px dashed var(--line); padding-top: 10px; }
.adjtabs > .adjform:first-child { border-top: 0; padding-top: 0; }
.addbox { margin: 12px 0; }
.addsum { display: inline-block; cursor: pointer; list-style: none; }
.addbox[open] .addsum { background: var(--tint); border-color: var(--o); color: var(--o-dark); }
.addbox > form { max-width: 620px; margin-top: 10px; }
/* แถวที่คนแก้เอง ต้องแยกออกจากของอัตโนมัติ **ด้วยตาเปล่า** (ใบสั่งงานบังคับ) */
/* ⛔ ใช้ตัวแปรสีของธีมเท่านั้น — ฝังสีตรง ๆ = โหมดมืดอ่านไม่ออก (ธีมบ้านนี้สลับด้วย data-theme
   ไม่ใช่ prefers-color-scheme อย่างเดียว การเขียน media query เองจึงเพี้ยนตอนคนบังคับโหมด) */
.manrow > td, .manwhy > td { background: var(--tint); }
.manb { display: inline-block; font-size: .72rem; margin-left: 6px; padding: 2px 9px;
        border-radius: 999px; background: var(--card); color: var(--o-dark);
        border: 1px solid var(--o-dark); }
.manwhy > td { border-top: 0; font-size: .8rem; }
.inlineform { display: inline-block; margin-left: 8px; }

/* assign-gap-1: เลือกทีมของงานจากหน้ามอบหมาย — ช่องเลือกต้องแตะได้จริงบนมือถือ */
.teamset { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.teamset select { font: inherit; min-height: 48px; padding: 6px 10px; border-radius: 6px;
                  border: 1px solid var(--line); background: var(--card); color: var(--ink); }

/* income-collect-1: แถวไทล์ตัวเลขหัวจอ (กดได้ทุกใบ ⛔ ห้ามเป็นตัวเลขลอย) */
.tilerow { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.tile { flex: 1 1 150px; min-height: 48px; padding: 12px 14px; border-radius: 10px;
        border: 1px solid var(--line); background: var(--card); color: var(--ink);
        display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
.tile b { font-size: 1.6rem; line-height: 1.1; color: var(--num); }
.tile span { font-size: .82rem; color: var(--grey2); }
.tile:hover { border-color: var(--o); text-decoration: none; }
.tile.on { border-color: var(--o); background: var(--tint); }
.tile.warn b { color: var(--warn); }
.tile.grey b { color: var(--grey2); }
/* income-collect-1: แถวรายการรับเงินที่ลงสมุดแล้ว (ใต้แถวงาน) */
.paidrow > td { background: var(--cream); border-top: 0; font-size: .82rem; }

/* view-as-1 ③: แถบเตือน "กำลังดูมุมของคนอื่น" — ค้างบนจอตลอด ⛔ ห้ามให้ลืมว่าสวมอยู่
   สีต่างจากทุกอย่างในเว็บโดยตั้งใจ (ม่วงเข้ม) — เห็นปุ๊บรู้ทันทีว่าไม่ใช่หน้าจอปกติ */
.viewasbar{position:sticky;top:0;z-index:60;display:flex;gap:10px;align-items:center;
  justify-content:space-between;flex-wrap:wrap;background:#4A2C6B;color:#fff;
  padding:8px 14px;font-size:.88rem;line-height:1.35;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.viewasbar b{color:#FFD9A0}
.viewasbar form{margin:0}
.viewasbar button{background:#fff;color:#4A2C6B;border:0;border-radius:999px;
  padding:6px 14px;min-height:48px;font-weight:600;cursor:pointer;white-space:nowrap}
@media (max-width:640px){.viewasbar{font-size:.8rem;padding:7px 10px}}

/* ═ doc-white-1 (8 ส.ค. 69 · พี่หนึ่งเคาะ): ตัวใบบนจอ = "กระดาษจริง" พื้นขาวตัวดำเสมอ
   แม้ธีมมืด (เคสจริง: ใบเบิก MR-INV2026000246 โทนมืดอ่านยาก)
   ปักที่กรอบใบจุดเดียว: รีเซ็ตตัวแปรธีมภายใน .docsheet/.docwhite เป็นพาเลตกระดาษ
   → var(--line)/var(--tint)/var(--o-dark) ในเนื้อใบคืนค่าโหมดสว่างเอง ไม่ต้องไล่แก้ทีละไฟล์
   ปุ่ม/แถบเครื่องมือรอบนอกกรอบใบตามธีมเดิม · print ขาวเต็มแผ่นด้วยบล็อก print เดิมอยู่แล้ว ═ */
.docsheet, .docwhite {
  background: #fff; color: #141414;
  --card: #fff; --bg: #fff; --ink: #141414; --grey: #6F675F; --grey2: #6b6259;
  --line: #E9E7E4; --cream: #FAFAFA; --tint: #FFDFCE; --o-dark: #B54312;
  --head: #B54312; --num: #B54312; --thbg: #FFDFCE;
}

/* ═ doc-scroll-1 (8 ส.ค. 69): เอกสาร A4 บนมือถือ — ตารางกว้างเลื่อนในกรอบเอกสารเอง
   ไม่ดันทั้งหน้าให้เลื่อนข้าง (เจอจาก UI proof 390px: หน้าใบเลื่อนข้าง ~29px ทั้งหน้า)
   ⛔ print ไม่แตะ — กระดาษขาวเต็มแผ่นเหมือนเดิม ═ */
@media screen {
  .docsheet { overflow-x: auto; }
}
@media print {
  .docsheet { overflow: visible !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   ops-theme-1 / ui-redesign-1 ก. — **ชุดโทน SPC OPS (war room) ของกลางทั้งบ้าน**

   🗣 พี่หนึ่งเคาะ 17 ส.ค.: *"โทนสี warroom · ทำช่องให้แตกต่างกันหน่อย · เน้น dark mode"*
   🔴 ปัญหาเดิม: ชุดนี้ **ถูกขังอยู่ใน `warroom.html` หน้าเดียว** แล้วหน้าอื่น (e-Tax · แบบ SLD ·
      ปัญหาโซลาร์ · พรีวิว) **ก๊อปตัวแปรไปวางซ้ำกันคนละชุด** ⇒ แก้สีทีต้องไล่แก้ทุกไฟล์
   ⇒ ยกมาไว้ที่เดียว **ชื่อตัวแปรเดิมทุกตัว ค่าตรงเดิมทุกค่า** ⛔ ไม่เปลี่ยนชื่อ ไม่เปลี่ยนค่า
      หน้าที่ประกาศ `.wr{...}` เองอยู่แล้วยังใช้ได้เหมือนเดิม (ของตัวเองชนะ) — ค่อย ๆ ถอดทีหลังได้

   ⛔ ห้ามใส่สีตรง ๆ ในหน้าใหม่ — ใช้ตัวแปรพวกนี้ ไม่งั้นสลับธีมแล้วมีก้อนสีหลุด
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --ops-bg: #0A0C0F;        /* พื้นหลังนอกสุด */
  --ops-panel: #12151A;     /* กล่องหลัก (การ์ด/แผง) */
  --ops-panel2: #161A20;    /* กล่องซ้อนในกล่อง — ใช้แยกชั้นให้ "ช่องต่างกัน" ตามที่พี่หนึ่งขอ */
  --ops-line: rgba(255, 255, 255, .09);
  --ops-o: #FF6B1A;         /* ส้มหลัก */
  --ops-o2: #FF9245;        /* ส้มอ่อน — หัวข้อ/ป้าย */
  --ops-ink: #F2EDE8;       /* ตัวอักษรหลัก */
  --ops-mute: #8A9099;      /* ตัวอักษรรอง */
  --ops-dim: #6B7280;       /* ตัวอักษรจาง */
  --ops-red: #FF4D4D;
  --ops-amb: #FFB020;
  --ops-blu: #4DA3FF;
  --ops-grn: #37D67A;
  --ops-o-deep: #C24608;    /* ปลายเข้มของแถบส้มไล่สี (ปุ่มหลัก/ชิปที่เลือกอยู่) */
  --ops-alt: #131720;       /* พื้นแถวสลับ — ใช้คู่ --ops-panel2 ให้แถวของแยกจากกัน */
}

/*  ใช้กับบล็อกไหนก็ได้: <div class="ops"> — ตั้งตัวแปรชื่อสั้นให้ลูกหลานใช้ต่อ
    (ชื่อ `--bg` `--panel` … เหมือนที่หน้าเดิมใช้อยู่ ⇒ ยก markup เดิมมาวางได้เลยไม่ต้องแก้) */
.ops {
  --bg: var(--ops-bg); --panel: var(--ops-panel); --panel2: var(--ops-panel2);
  --line: var(--ops-line); --o: var(--ops-o); --o2: var(--ops-o2);
  --ink: var(--ops-ink); --mute: var(--ops-mute); --dim: var(--ops-dim);
  --red: var(--ops-red); --amb: var(--ops-amb); --blu: var(--ops-blu); --grn: var(--ops-grn);
  background: var(--bg); color: var(--ink);
}
.ops * { box-sizing: border-box; }

/* ═══════════════════════════════════════════════════════════════════
   ui-redesign-1 ② — หัวหน้าแผนสั่งซื้อ ตาม mockup `docs/mockups/supply-plan-v2.html`
   (พี่หนึ่งเคาะแล้ว · ข้อ ข "ทำช่องให้แตกต่างกันหน่อย" · ข้อ ค "เน้น dark mode")

   ⛔ ห้ามใส่สีตรง ๆ ในบล็อกนี้ — ใช้ตัวแปร --ops-* ข้างบนเท่านั้น
   ⛔ ตัวเลขทุกตัวมาจากชุดที่กรองแล้ว (ตรงกับตารางข้างล่าง) — ห้ามนับคนละชุดกับที่ตาเห็น
   ═══════════════════════════════════════════════════════════════════ */
.ops-plan { border-radius: 14px; padding: 13px 13px 14px; margin: 0 0 14px; }

/* กล่องด่วน — เลขใหญ่ตัวเดียวที่ต้องเห็นก่อนอย่างอื่น */
.ops-plan .alert {
  background: linear-gradient(135deg, rgba(255,107,26,.16), rgba(255,77,77,.05));
  border: 1px solid rgba(255,107,26,.4); border-radius: 14px; padding: 13px 14px;
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit;
}
.ops-plan .alert .big { font-size: 42px; font-weight: 700; line-height: 1; color: var(--o); flex: none; }
.ops-plan .alert .lb  { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--o2); }
.ops-plan .alert .d   { font-size: 11.5px; color: var(--mute); line-height: 1.5; margin-top: 3px; }

/* 3-4 ช่องตัวเลข — ขอบซ้ายคนละสี ตัวเลขคนละสี (⛔ ไม่ใช่ส้มหมดเหมือนของเดิม) */
.ops-plan .mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 9px; margin-top: 11px; }
.ops-plan .m {
  background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--c);
  border-radius: 11px; padding: 10px 11px; text-decoration: none; display: block;
}
.ops-plan .m .v { font-size: 25px; font-weight: 700; line-height: 1; color: var(--c); }
.ops-plan .m .v.sm { font-size: 17px; }   /* ยอดเงินยาว — เลขใหญ่เท่าเดิมจะล้นช่องบนมือถือ */
.ops-plan .m .l { font-size: 11px; color: var(--mute); margin-top: 5px; line-height: 1.35; }
.ops-plan .m.on { background: var(--alt, var(--ops-alt)); border-color: var(--c); }

/* ชิปกรองสถานะ — แตะเลือกได้จากมือถือ (ของเดิมเป็น dropdown อย่างเดียว) */
.ops-plan .chips { display: flex; flex-wrap: nowrap; gap: 7px; margin-top: 12px;
                   overflow-x: auto; padding-bottom: 3px; }   /* ⛔ nowrap ต้องมี — .chips กลางตั้ง wrap ไว้ */
.ops-plan .chip {
  white-space: nowrap; font-size: 12px; border-radius: 18px; padding: 5px 12px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--mute); text-decoration: none;
}
.ops-plan .chip.on {
  background: linear-gradient(135deg, var(--ops-o), var(--ops-o-deep));
  border-color: transparent; color: #fff; font-weight: 600;
}

/* sld-page-bug-2 — ข้อความ "บันทึกไม่สำเร็จ" ที่ขึ้น **ในหน้า** ตรงจุดที่กด
   ⛔ ห้ามใช้ alert() แทน — เว็บวิวไลน์บล็อก แล้วกลายเป็นเงียบสนิทเหมือนเดิม */
.savefail {
  margin-top: 6px; font-size: .86rem; line-height: 1.45;
  color: var(--warn); background: rgba(192, 57, 43, .08);
  border: 1px solid rgba(192, 57, 43, .3); border-radius: 8px; padding: 7px 10px;
}

/* ui-redesign-1 ② — การ์ดรายบ้านในหน้าแผนสั่งซื้อ (mockup `supply-plan-v2.html`)
   ขอบซ้ายสีตามความเร่ง · ป้ายสถานะเป็น "ขอบสี" ไม่ใช่พื้นทึบ · แถวของสลับเฉดให้ช่องต่างกัน
   ⛔ สีมาจาก --ops-* เท่านั้น (ตัวแปร --c ตั้งจากฝั่งเซิร์ฟเวอร์ต่อการ์ด) */
.jobcard { border-left: 3px solid var(--c, var(--ops-o)); border-radius: 12px; overflow: hidden; }
.jobcard .jtag {
  float: right; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  border: 1px solid currentColor; white-space: nowrap; margin-left: 8px;
}
/* "ทำช่องให้แตกต่างกันหน่อย" — แถวคู่/คี่คนละเฉด อ่านตามบรรทัดง่ายขึ้นบนมือถือ */
.jobcard .stock-table tbody tr:nth-child(even) { background: rgba(127, 127, 127, .055); }

/* sld-ready-badge-1 — ป้าย "พร้อมส่ง / ยังขาด" ข้างปุ่มส่งขอ SLD
   🔴 ที่มา: พี่หนึ่งถามว่า "ให้สิทธิ์พี่กดเองได้ไหมถ้าของครบ" — สิทธิ์เขามีอยู่แล้ว
      **ปัญหาคือจอไม่กล้าบอกว่าพร้อม** เขาเลยต้องถามคนทุกครั้ง = บั๊กของหน้าจอ
   ⛔ ห้ามสื่อด้วยสีอย่างเดียว — ต้องมีข้อความเสมอ */
.readyb { font-size: .82rem; line-height: 1.5; border-radius: 8px; padding: 6px 9px;
          margin-bottom: 6px; max-width: 340px; }
.readyb.ok  { background: rgba(14, 160, 74, .10); border: 1px solid rgba(14, 160, 74, .45); color: #0B7A39; }
.readyb.bad { background: rgba(192, 57, 43, .07); border: 1px solid rgba(192, 57, 43, .32); color: var(--warn); }
.readyb .sub { display: block; color: inherit; opacity: .85; }

/* ═══ menu-search-1 (21 ส.ค. 69) — ช่องค้นหาเมนู ═══════════════════════════
   พี่หนึ่งสั่ง 21 ส.ค.: "เว็บใหญ่ขึ้นเรื่อย ๆ ต้องหาเมนูเจอเร็ว"
   ⛔ ถอยทั้งฟีเจอร์ = ลบบล็อกนี้ + บล็อก <script> menu-search-1 ใน base.html
   ⛔ ไม่แตะกฎเดิมสักบรรทัด — ของใหม่ทั้งหมดอยู่ใต้เส้นนี้ */
.navfind { padding: 8px 10px 4px; }
.navfind input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: .9rem;
  padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--line, #d9d9d9); background: var(--card, #fff); color: inherit;
}
.navfind input:focus { outline: 2px solid var(--o, #E75C1D); outline-offset: -1px; }
.navfind .hint { display: none; font-size: .8rem; padding: 6px 2px 0; opacity: .75; }
.navfind.none .hint { display: block; }
/* ย่อแถบข้างเหลือไอคอน = ซ่อนช่องค้นหา (ไม่มีที่พิมพ์) */
html.side-min .sidenav .navfind { display: none; }
/* ═══ จบ menu-search-1 ═══ */

/* ═══ menu-1 ③ (22 ส.ค. 69) — "ใช้บ่อย" หัวแถบข้าง (จอคอม) ═══════════════
   จ่าสั่ง: เอาแนวคิด 4 ช่องแรกของแถบล่างมือถือ ขึ้นหัวแถบข้าง ตามลำดับใบเดิม
   📌 ใช้คลาสเดิมของแถบข้าง (.grp / a / .ic / .lbl) ⇒ หน้าตา + โหมดมืด + ย่อแถบ
      ได้เหมือนเมนูปกติเองทั้งหมด ที่เพิ่มมีแค่เส้นคั่นใต้บล็อก
   ⛔ ถอยทั้งฟีเจอร์ = ลบบล็อกนี้ + บล็อก .navquick ใน base.html
   ⛔ ไม่แตะกฎเดิมสักบรรทัด */
.sidenav .navquick { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.sidenav .navquick .grp { padding-top: 4px; }
/* ═══ จบ menu-1 ③ ═══ */

/* ═══ map-silent-1 ② (24 ส.ค. 69) — กล่องเตือน "งานนี้ไม่รู้ว่าจะไปไหน" ═══════════
   🔴 ที่มา: พี่หนึ่งเปิดหน้าจริงแล้ว **อ่านหัวข้อในกล่องแดงไม่ออก**
      ต้นเหตุ: กล่องเดิมฝัง `background:#FDECEA` (ชมพูอ่อน) ไว้ตรง ๆ ในหน้า
      ⇒ **โหมดมืด**: ตัวหนังสือครีม `--ink:#F2EDE8` บนพื้นชมพูอ่อน = จมหายสนิท
      ⇒ ผิดกฎที่เขียนคาไว้ในไฟล์นี้เองว่า **"ฝังสีตรง ๆ = โหมดมืดอ่านไม่ออก"**
   ✅ วิธี: พื้นโปร่งแสง + สีจากตัวแปรธีม ⇒ ถูกต้องทั้งสว่างและมืดโดยไม่ต้องเขียน media query
      (แพทเทิร์นเดียวกับ `.readyb.bad` ที่พิสูจน์แล้ว)
   ⛔ เตือนแล้วอ่านไม่ออก = เท่ากับเงียบ — หัวข้อจึงต้อง **ใหญ่กว่าและหนากว่า** ตัวเนื้อ
   ⛔ ถอยทั้งบล็อก = ลบตั้งแต่บรรทัดนี้ถึง "จบ map-silent-1 ②" */
.note.alarm {
  background: rgba(192, 57, 43, .07);
  border: 1px solid rgba(192, 57, 43, .34);
  border-left: 4px solid var(--warn);
  color: var(--ink);
}
.note.alarm > b:first-child,
.note.alarm .alarmhead {
  display: block; margin-bottom: 4px;
  font-size: 1.02rem; font-weight: 700; line-height: 1.45;
  color: var(--warn);
}
/* ข้อความรองในกล่อง — จางได้ แต่ห้ามจางจนหาย (ใช้ตัวแปรธีม ไม่ฝังเทา) */
.note.alarm .sub { color: var(--grey2); }
/* ✅ บรรทัด "เติมลิงก์ให้แล้ว — กดบันทึกด้วย" หลังกดปุ่มดึงลิงก์งานเดิม
   ⛔ ซ่อนไว้ก่อน จอต้องนิ่งจนกว่าคนจะกดจริง */
.note.alarm .didfill { display: none; margin-top: 6px; font-weight: 500; color: var(--green); }
.note.alarm.filled .didfill { display: block; }
/* ปุ่มบันทึกต้องสะดุดตาหลังเติมลิงก์ให้ — ตาคนจะได้ไปหยุดที่ขั้นถัดไปเอง */
@keyframes spcNudge { 0%, 100% { transform: none; } 30% { transform: translateY(-3px); } 60% { transform: translateY(-1px); } }
.note.alarm.filled button[type="submit"] {
  animation: spcNudge .5s ease 2;
  box-shadow: 0 0 0 3px rgba(14, 160, 74, .35);
}
@media (prefers-reduced-motion: reduce) {
  .note.alarm.filled button[type="submit"] { animation: none; }
}
/* ═══ จบ map-silent-1 ② ═══ */

/* ============================================================================
   ✍️ `studio-darkmode-fix-1` — **ช่องกรอกอ่านไม่ออกในธีมมืด** (พี่เปิดไอแพดเจอเอง 29 ส.ค. 13:5x)

   🔎 ต้นเหตุจริง (ไล่แล้ว ไม่ใช่เดา):
   ① `textarea` **ไม่มีกฎสีตัวอักษรเลยทั้งไฟล์** — บล็อกธีมมืดข้างบนเปลี่ยนให้แค่ **พื้น** (`#1B2029`)
      ส่วนสีตัวอักษรตกไปเป็นค่าตั้งต้นของเบราว์เซอร์ = **ดำ** ⇒ ดำบนเข้ม = อ่านไม่ออก
   ② `<input>` ที่ **ไม่ได้ใส่ `type=`** (มี 148 ช่องทั้งเว็บ) ตัวเลือก `input[type=text]` **ไม่จับ**
      ⇒ ช่องพวกนี้เป็นกล่องขาวตัวหนังสือดำโดดอยู่บนหน้ามืด
   📌 ไม่ใช่โรคของหน้า /studio หน้าเดียว — **textarea อยู่ 15 หน้า** (ใบวัสดุ · ใบเสนอ · ลูกค้า · โซลาร์ ฯลฯ)
      ⇒ แก้ที่ต้นเหตุจุดเดียว ⛔ ไม่ไล่แปะรายหน้า

   🛡 ทำไมปลอดภัยกับของเดิม: กฎนี้ specificity ต่ำสุด (0,0,1)
      ⇒ `.jform`/`.aform` (0,1,1) ที่ตั้งค่าเองไว้แล้ว **ยังชนะเหมือนเดิมทุกที่**
      ⛔ ไม่แตะ checkbox/radio/file/button (คนละตัวเลือก)
   🔙 ทางถอย: ลบบล็อกนี้ทั้งก้อน (ท้ายไฟล์) — ของเดิมไม่ได้ถูกแก้สักบรรทัด
   ============================================================================ */
textarea,
input:not([type]),
input[type=email], input[type=url], input[type=date],
input[type=time], input[type=datetime-local], input[type=month] {
  font: inherit; font-weight: 300; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); color: var(--ink);
}
/*  สีตัวอักษรของทุกช่องกรอก — ประกาศตรง ๆ ⛔ ไม่พึ่งค่าตั้งต้นของเบราว์เซอร์
    (ค่าตั้งต้นเป็นดำเสมอ ไม่ว่าธีมไหน = ต้นเหตุข้อ ① ข้างบน) */
input, select, textarea { color: var(--ink); }
textarea:focus { outline: 2px solid var(--o); border-color: var(--o); }
/*  ข้อความจาง (placeholder) — เดิมไม่เคยประกาศ ⇒ บนพื้นเข้มบางเครื่องจางจนหาย */
input::placeholder, textarea::placeholder { color: var(--grey); opacity: 1; }

/* ============================================================================
   🔎 `payvoucher-utilfee-1` ส่วน B (31 ส.ค. 69) — ผลค้นจาก **ทะเบียนปลายทางทั้งบ้าน**

   🗣 พี่หนึ่ง: *"เมนูย่อยพวกนี้หายากมาก UI เราจะต้องง่ายสำหรับทีมงาน"*
   📌 ใช้คลาสเดิมของแถบข้างทั้งหมด (a / .ic / .lbl / .grp) ⇒ หน้าตา + โหมดมืด + ย่อแถบ
      ได้เหมือนเมนูจริงเองโดยไม่ต้องเขียนสีใหม่สักตัว — ที่เพิ่มมีแค่เส้นคั่นกับกรอบเน้น
   ⛔ ไม่แตะกฎเดิมสักบรรทัด · 🔙 ถอย = ลบบล็อกนี้ + บล็อก navfind ใน base.html
   ============================================================================ */
.navextra:not(:empty) { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
/*  🎯 ปลายทางที่เป็นหัวข้อข้างในหน้าอื่น — กดแล้วต้อง "เห็นว่าอยู่ตรงไหน" ไม่ใช่แค่เลื่อนไป */
.navhit {
  outline: 2px solid var(--o); outline-offset: 4px; border-radius: 6px;
  transition: outline-color .4s ease;
}
@media (prefers-reduced-motion: reduce) { .navhit { transition: none; } }

/* ============================================================================
   🧭 menu-redesign-1 (1 ก.ย. 69) — เมนูข้างแบบใหม่ ตามแบบร่างที่พี่หนึ่งเคาะ
   ต้นแบบ: docs/mockups/menu-redesign-v1.html
   🗣 พี่หนึ่ง: "เลือก ก. บนคอม ข. บนมือถือและไอแพด มีให้ค้นหาได้เหมือนเดิม
                 เมนูใช้บ่อยเอาไว้เหมือนเดิม หักหมุดได้"

   📌 โครงหน้าตา (.ghead / .items / .car / ราง 2 ชั้น) **ยกมาจากบล็อก <style> ของแบบร่าง**
      แต่ค่าสีเปลี่ยนเป็นตัวแปรของเว็บจริง (--card/--line/--ink/--o/--tint …)
      เพราะแบบร่างเป็นหน้ามืดเดี่ยว ๆ ถ้าลอกสีดิบมาทั้งชุด **ธีมสว่างจะพัง**
   ⛔ ไม่แตะกฎเดิมสักบรรทัด — ทุกอย่างในบล็อกนี้เป็นกฎใหม่ที่ต่อท้าย
   🔙 ถอย = ตั้ง `menu.redesign`=off ในฐาน (เมนูกลับแบน กฎพวกนี้ไม่มีอะไรมาเกาะ)
   ============================================================================ */
.mnav { padding-bottom: 4px; }
.mgrp { border: 0; }
.mgrp > summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 16px; font-size: .86rem; font-weight: 600; color: var(--ink);
  list-style: none; user-select: none; min-height: 42px;
}
.mgrp > summary::-webkit-details-marker { display: none; }
.mgrp > summary:hover { background: var(--cream); }
.mgrp > summary .n {
  margin-left: auto; font-size: .7rem; font-weight: 400; color: var(--grey);
  border: 1px solid var(--line); border-radius: 10px; padding: 0 7px; line-height: 1.5;
}
.mgrp > summary .car { font-size: .62rem; color: var(--grey); transition: transform .18s; }
.mgrp[open] > summary .car { transform: rotate(90deg); color: var(--o); }
/*  หมวดของหน้าที่เปิดอยู่ — ให้เห็นว่า "อยู่ตรงนี้" แม้ตอนพับหมวดอื่น */
.mgrp.here > summary .gname { color: var(--o-dark); }
.mgrp > .items { border-left: 2px solid var(--line); margin-left: 26px; padding-bottom: 4px; }
.sidenav .mgrp > .items > a { padding-left: 10px; }
.allsheet .mgrp > .items > a { padding-left: 12px; }
@media (prefers-reduced-motion: reduce) { .mgrp > summary .car { transition: none; } }
/* menu-redesign-2a (ปลาเผา 5 ก.ย.): หมวดย่อยพับใต้หมวดแม่ ("ดูสภาพโรง" · "หน้าย่อยเดิม") + หลังบ้านปุ่มเดียว */
.mgrp.sub > summary { padding-left: 26px; font-size: .92em; opacity: .88; }
.mgrp.sub > summary .ic { opacity: .45; width: 1em; }
.mgrp.sub > summary .gname { font-weight: 500; }
.mgrp.sub > .items { margin-left: 40px; }
.mgrp.toplink { padding: 4px 8px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.mgrp.toplink > a { font-weight: 700; }
/*  🔴 ลิงก์บนสุดเป็น <div> ไม่ใช่ <details> ⇒ **ไม่มีวันมี [open]**
    แต่โหมดรางบนมือถือ/ไอแพดซ่อนด้วย `.allsheet .mrail .mgrp:not([open]) { display:none }` (บรรทัดล่าง)
    ไม่ยกเว้นไว้ = "วันนี้ต้องทำ" หายจากแผ่น "ทั้งหมด" ทั้งใบ (จอคอมยังเห็น เลยมองไม่เห็นตอนเทสต์)
    ⛔ อย่าลบกฎนี้ตอนแต่งหน้าตา — ปลาเผา 12:3x ใบ today-page-2 ③ */
.allsheet .mrail .mgrp.toplink { display: block; }
.mgrp.sysbtn { padding: 6px 8px 2px; }
.mgrp.sysbtn > a { border: 1px dashed var(--line); border-radius: 10px; }


/*  ⭐ ปักหมุด — ปุ่มดาวโผล่ตอนชี้/โฟกัส (มือถือขึ้นจาง ๆ ตลอด กดได้) */
.mnav .pin, .navquick .pin {
  margin-left: auto; border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: .95rem; line-height: 1; color: var(--grey); opacity: .28; padding: 4px 2px;
  min-height: 0;
}
.mnav a:hover .pin, .navquick a:hover .pin, .pin:focus, .pin.on { opacity: 1; }
.pin.on { color: var(--o); }
html.side-min .pin { display: none; }

/*  ── ย่อแถบ (64px): พับหมวดไม่ได้แล้ว — โชว์ไอคอนลิงก์ล้วน ── */
html.side-min .sidenav .mgrp > summary { display: none; }
html.side-min .sidenav .mgrp > .items { border-left: 0; margin-left: 0; }
html.side-min .sidenav .mgrp > .items > a { padding-left: 4px; }

/*  ── แบบ ข: ราง 2 ชั้น บนแผ่น "ทั้งหมด" (มือถือ/ไอแพด) ── */
.allsheet .mrail { display: flex; align-items: stretch; min-height: 320px; }
.allsheet .mrail .lv1 {
  flex: 0 0 72px; border-right: 1px solid var(--line); background: var(--cream);
  display: flex; flex-direction: column; align-items: center; padding: 6px 0; gap: 2px;
}
.allsheet .mrail .lv1 button {
  width: 62px; border: 0; background: none; color: var(--grey2); font-family: inherit;
  border-radius: 9px; padding: 7px 0 5px; cursor: pointer; font-size: .62rem;
  line-height: 1.2; min-height: 52px;
}
.allsheet .mrail .lv1 button .em { display: block; font-size: 1.25rem; margin-bottom: 2px; }
.allsheet .mrail .lv1 button.on { background: var(--tint); color: var(--o-dark); font-weight: 600; }
.allsheet .mrail .lv2 { flex: 1 1 auto; min-width: 0; padding: 4px 0 8px; }
/*  ในโหมดราง หัวหมวดย้ายไปอยู่บนราง ⇒ ซ่อนหัวเดิม + โชว์เฉพาะหมวดที่เลือก */
.allsheet .mrail .mgrp > summary { display: none; }
.allsheet .mrail .mgrp:not([open]) { display: none; }
.allsheet .mrail .mgrp > .items { border-left: 0; margin-left: 0; }
.allsheet .mrail .railcap { font-weight: 600; padding: 8px 18px 2px; font-size: .95rem; }
.allsheet .mrail .railcap small { color: var(--grey); font-weight: 400; margin-left: 6px; }

/* 💬 tai-feedback-1: ปุ่มลอย "บอกจ่า" + กล่องเล็ก · ปุ่ม ≥44px ตัวหนังสือ ≥14px
   fbfab-not-visible-1 (19 ก.ย. 69 · พี่หนึ่งหาไม่เจอบนคอม): เดิมอยู่มุมล่างซ้าย = ทับเมนูข้าง (.sidenav) และเป็นสีพื้นการ์ดกลืนกับธีมมืด
   ⇒ สีส้มแบรนด์เหมือน .fab ทุกจอ · คอม (≥900px) ย้ายไปมุมล่างขวา (หน้าที่มี .fab เพิ่มงาน = ยกขึ้นเหนือ) · มือถือยังอยู่ซ้ายล่างเหนือแถบเมนู
   (สไตล์ชุดเดียวกันฝัง inline ใน base.html ด้วย — ปุ่มต้องเห็นแม้ไฟล์นี้แคชเก่า) */
.fbbox { position: fixed; left: 12px; bottom: 22px; z-index: 31; }
.fbbox > summary { list-style: none; }
.fbbox > summary::-webkit-details-marker { display: none; }
.fbfab { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px;
         background: var(--o, #E75C1D); color: #fff; border: 0;
         box-shadow: 0 3px 12px rgba(231,92,29,.4); font-size: 14px; font-weight: 600; cursor: pointer; }
.fbbox[open] .fbfab { display: none; }
.fbform { position: fixed; left: 12px; right: 12px; bottom: 22px; max-width: 460px; background: var(--card, #fff); color: var(--ink, #141414);
          border: 1px solid var(--line, #E3E6EA); border-radius: 14px; padding: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.45); z-index: 32; }
.fbhd { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.fbhd span { font-weight: 400; color: var(--grey2, #4A515B); font-size: 14px; }
.fbform textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 10px; border-radius: 10px;
                   border: 1px solid var(--line, #D6DAE0); background: var(--card, #fff); color: var(--ink, #141414); resize: vertical; }
.fbfile { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; margin-top: 6px; flex-wrap: wrap; }
.fbfile input { font-size: 14px; }
.fbacts { display: flex; gap: 8px; margin-top: 8px; }
.fbacts button { flex: 1 1 auto; min-height: 44px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
                 border: 1px solid var(--line, #D6DAE0); background: var(--card, #fff); color: var(--ink, #141414); }
.fbacts .fbsend { background: var(--o); color: #fff; border-color: transparent; }
.fbtoast { position: fixed; left: 12px; right: 12px; bottom: 76px; z-index: 33; background: #1e8e4e; color: #fff; border-radius: 10px;
           padding: 12px 14px; font-size: 14px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.fbtoast.err { background: #c62828; }
@media (max-width: 767px) {
  .fbbox { bottom: calc(56px + env(safe-area-inset-bottom) + 12px); }
  .fbform { bottom: calc(56px + env(safe-area-inset-bottom) + 12px); }
  .fbtoast { bottom: calc(56px + env(safe-area-inset-bottom) + 66px); }
}
@media (min-width: 900px) {
  .fbbox { left: auto; right: 18px; bottom: 22px; }
  .fbform { left: auto; right: 18px; }
  .fbtoast { left: auto; right: 18px; max-width: 460px; }
  body:has(.fab) .fbbox { bottom: 84px; }       /* หน้าที่มีปุ่ม "+ เพิ่มงาน" มุมขวาล่าง = ซ้อนขึ้นไป */
  body:has(.fab) .fbtoast { bottom: 138px; }
}