/* EZREZOLV — jobs3.css : หน้างานแบบผสม 3 เฟส (งาน JV · คู่กับ jobs3.js)
   แบบอ้างอิง .ref/jv-mockup.html — ระยะ/ข้อความตามแบบ · สีและฟอนต์ใช้ตัวแปรของแอป (theme.js · โหมดมืด html.ez-dark ของ wk.js)
   ทุกตัวเลือกขึ้นต้น .jv- (ไม่มีตัวเลือกแบบเหวี่ยงแห) · บล็อกพื้นฐานมาก่อน @media
   JV5 ตัวอักษรในตาราง + การ์ดวันนี้ต้องทำ: ฟอนต์สืบจาก body ("Kanit","IBM Plex Sans Thai" · theme.js:18) ไม่ใช้ monospace แล้ว
   2 ขนาดเท่านั้น — บรรทัดหลัก 14px (ขนาดแถวเดิมของ .jv-row) · บรรทัดรอง 13px สีเทา (.jv-sub) · ตัวเลข tabular-nums
   หนาเฉพาะชื่อลูกค้า + วันค้าง (600) · หัวการ์ดหนา 600 ขนาดบรรทัดหลัก
   JV6 ตาราง: หัวกับข้อมูลใช้กฎเดียวกันทุกคอลัมน์ (กลาง: # ดูแล ขั้นต่อไป · ขวา: ค้าง ค้างจ่าย · ซ้าย: ลูกค้า งาน รับงาน)
   ช่อง: # 32 · ค้าง 76 · ลูกค้า 1.2fr · งาน 1fr · ค้างจ่าย 96 · รับงาน 80 · ดูแล 40 · ขั้นต่อไป 124 · ห่าง 14
   ค้าง→ลูกค้า = 14 + เว้นขวา 10 = 24px · ค้างจ่าย→รับงาน = 14 + เว้นซ้าย 10 = 24px */

:root{--jv-p3:#b7791f;--jv-p3bg:#fdf6e3;--jv-due:#92400e;--jv-card:#fff;--jv-soft:#f7f8f9;--jv-longline:#f3c4c4;--jv-alert:#fdecec;--jv-alerttx:#7f1d1d}
html.ez-dark{--jv-p3:#d9a441;--jv-p3bg:#2e2818;--jv-due:#f1b97a;--jv-card:#1b232c;--jv-soft:#222b35;--jv-longline:#6b2a24;--jv-alert:#3a1d1b;--jv-alerttx:#ffc9c4}

/* แถบบน: ปุ่มสลับ */
.jv-sw{height:34px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--jv-card);color:var(--ink);font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap}
.jv-sw:hover{border-color:var(--brass)}
.jv-sw.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* หน้าทั้งหน้า */
.page.board-page.jv-page{overflow-x:hidden}
.jv-root{display:flex;gap:20px;align-items:flex-start;min-width:0}
.jv-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.jv-aside{width:300px;flex-shrink:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.jv-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.jv-h2{margin:0;font-size:17px;font-weight:600;color:var(--ink)}
.jv-hint{font-size:14px;color:var(--slate)}
.jv-sub{font-size:13px;font-weight:400;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* วันนี้ต้องทำ */
.jv-today{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.jv-tc{background:var(--jv-card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;min-width:0;cursor:pointer;font-size:14px;font-variant-numeric:tabular-nums}
.jv-tc.jv-tg{cursor:default}
.jv-tc.long{border-color:var(--jv-longline)}
.jv-tag{font-size:13px;color:var(--slate)}
.jv-tc.long .jv-tag{color:var(--seal)}
.jv-task{font-weight:600;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.jv-who{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* การ์ดรวม: แถวละงาน — บรรทัด 1 ชื่อ | วันค้าง · บรรทัด 2 เลขงาน | ปุ่มของงานนั้น */
.jv-trs{display:flex;flex-direction:column}
.jv-tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name days" "sub go";gap:2px 8px;align-items:center;padding:7px 0;border-top:1px solid var(--line);cursor:pointer}
.jv-tr-name{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.jv-tr .jv-tr-name{grid-area:name}
.jv-tr-days{grid-area:days;font-weight:600;color:var(--ink);white-space:nowrap;text-align:right}
.jv-tr-days.long{color:var(--seal)}
.jv-tr .jv-sub{grid-area:sub}
.jv-tr .jv-go{grid-area:go}
.jv-more{align-self:flex-start;border:0;background:none;padding:2px 0;color:var(--brass-deep);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer}
.jv-tc .jv-go{margin-top:auto}
.jv-none{background:var(--jv-card);border:1px dashed var(--line);border-radius:14px;padding:14px 16px;font-size:14px;color:var(--slate)}

/* ปุ่มขั้นต่อไป */
/* JV3: ปุ่มขั้นต่อไป = แดงเดียวกับ "+ รับงานใหม่" (.btn-primary: var(--brass) · ชี้/กด var(--brass-deep) · ตัวอักษร #fff)
   โหมดมืด wk.js เปลี่ยน --brass เป็นทอง (#d2a164) → ตรึงแดงของธีม theme.js:15 (#E31E24 / #C1141A) ให้ยังเป็นแดง */
.jv-go{height:36px;padding:0 12px;border:0;border-radius:10px;background:var(--brass);color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.jv-go:hover,.jv-go:active{background:var(--brass-deep)}
html.ez-dark .jv-go{background:#E31E24}
html.ez-dark .jv-go:hover,html.ez-dark .jv-go:active{background:#C1141A}
.jv-go:disabled{opacity:.5;cursor:default}
.jv-go.jv-go-s{height:30px;padding:0 10px;border-radius:8px}

/* ตาราง */
.jv-table{background:var(--jv-card);border:1px solid var(--line);border-radius:14px;overflow:hidden;min-width:0}
.jv-row{display:grid;grid-template-columns:32px 76px minmax(0,1.2fr) minmax(0,1fr) 96px 80px 40px 124px;gap:14px;padding:0 16px;min-height:54px;align-items:center;border-top:1px solid var(--line);font-size:14px;color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums}
.jv-row:hover{background:var(--jv-soft)}
.jv-row.jv-head{min-height:0;padding:10px 16px;background:var(--jv-soft);font-size:13px;font-weight:600;color:var(--slate);border-top:0;cursor:default}
.jv-no{color:var(--slate);text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
.jv-days{font-weight:600;white-space:nowrap;text-align:right;padding-right:10px}
.jv-days small{font-size:inherit;font-weight:400;color:var(--slate)}
.jv-row.jv-head .jv-days-h{text-align:right;padding-right:10px}
.jv-money,.jv-row.jv-head .jv-money-h{text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.jv-row.jv-head .jv-date-h{padding-left:10px}
.jv-row.jv-head .jv-staff-h,.jv-row.jv-head .jv-go-h{text-align:center}
.jv-days.long{color:var(--seal)}
.jv-cust{display:flex;flex-direction:column;min-width:0}
.jv-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jv-type{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jv-ok{color:var(--moss)}
.jv-due{color:var(--jv-due)}
.jv-dim{color:var(--slate)}
.jv-date{white-space:nowrap;padding-left:10px}
.jv-staff{width:28px;height:28px;border-radius:14px;background:var(--paper-dim);display:flex;align-items:center;justify-content:center;justify-self:center;font-size:13px;color:var(--brass-deep)}
.jv-cell-go{display:flex;min-width:0}
.jv-cell-go .jv-go{flex:1;min-width:0}
.jv-lbl{display:none}

/* หัวกลุ่มเฟส */
.jv-gh{display:flex;align-items:center;gap:10px;padding:9px 16px;border-top:1px solid var(--line);flex-wrap:wrap;color:var(--ink)}
.jv-gh.p1{background:var(--brass-pale)}
.jv-gh.p2{background:var(--paper-dim)}
.jv-gh.p3{background:var(--jv-p3bg)}
.jv-gh.p0{background:var(--jv-soft)}
.jv-pill{font-size:12px;font-weight:700;color:#fff;border-radius:10px;padding:1px 8px}
.jv-pill.p1{background:var(--brass)}
.jv-pill.p2{background:var(--slate)}
.jv-pill.p3{background:var(--jv-p3)}
.jv-pill.p0{background:var(--moss)}
html.ez-dark .jv-pill{color:#121820}
.jv-gh-hint{font-size:13px;color:var(--ink-soft)}
.jv-fold{margin-left:auto;height:30px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--jv-card);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.jv-filter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px 8px 16px;border:1px solid var(--line);border-radius:14px;background:var(--jv-soft);font-size:14px;color:var(--ink)}
.jv-filter-t{flex:1;min-width:0;overflow-wrap:anywhere}
.jv-filter-x{height:30px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--jv-card);color:var(--ink);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.jv-empty{padding:12px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--slate)}

/* ด้านขวา */
.jv-box{background:var(--jv-card);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:8px;color:var(--ink)}
.jv-box-t{font-size:15px;font-weight:600}
.jv-sum{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border:1px solid transparent;border-radius:10px;background:var(--jv-soft);color:var(--ink);font:inherit;font-size:14px;text-align:left;width:100%}
button.jv-sum{cursor:pointer}
button.jv-sum:hover{border-color:var(--line)}
.jv-sum.on{border-color:var(--ink)}
.jv-sum-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jv-dot{width:10px;height:10px;border-radius:5px;display:inline-block;flex-shrink:0}
.jv-dot.p1{background:var(--brass)}
.jv-dot.p2{background:var(--slate)}
.jv-dot.p3{background:var(--jv-p3)}
.jv-dot.p0{background:var(--moss)}
.jv-alert{background:var(--jv-alert);border-radius:14px;padding:14px 16px;font-size:14px;color:var(--jv-alerttx);display:flex;flex-direction:column;gap:4px}
.jv-alert-i{cursor:pointer;overflow-wrap:anywhere}
.jv-note{font-size:13px;color:var(--slate)}

/* จอกลาง: แถบขวาลงไปอยู่ใต้ตาราง */
@media(max-width:1180px){
  .jv-root{flex-direction:column;align-items:stretch}
  .jv-aside{width:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start}
}
@media(max-width:1000px){
  .jv-today{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* มือถือ: การ์ดวันนี้เรียงแนวตั้ง · แถวตารางเป็นการ์ด */
@media(max-width:760px){
  .jv-today{grid-template-columns:minmax(0,1fr)}
  .jv-aside{display:flex}
  .jv-row.jv-head{display:none}
  .jv-row{grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"no days cust staff" "type type type type" "money money money date" "go go go go";gap:6px 10px;padding:12px 14px;min-height:0}
  .jv-row .jv-no{grid-area:no;text-align:left}
  .jv-row .jv-days{grid-area:days;text-align:left;padding-right:0}
  .jv-row .jv-cust{grid-area:cust}
  .jv-row .jv-staff{grid-area:staff}
  .jv-row .jv-type{grid-area:type;white-space:normal;color:var(--slate)}
  .jv-row .jv-money{grid-area:money;text-align:left}
  .jv-row .jv-date{grid-area:date;text-align:right;color:var(--slate);padding-left:0}
  .jv-row .jv-cell-go{grid-area:go}
  .jv-row .jv-cell-go .jv-go{width:100%;height:42px}
  .jv-lbl{display:inline;color:var(--slate)}
  .jv-fold{margin-left:0}
}