/* vnix_excel_kit.css — ผิว Excel ของกลาง ใช้ร่วมกันระหว่าง Helpdesk กับ HR
 *
 * ถอดมาจาก static/acc_workspace.css ซึ่งใช้งานจริงอยู่แล้วบน 44 template
 * (Acc, Report, Stock Ops และหน้าเคลมของ Helpdesk เอง) ไม่ได้ออกแบบใหม่
 *
 * ต่างจากต้นฉบับข้อเดียวแต่สำคัญ: acc_workspace.css ประกาศ token ไว้บน
 * .acc-workspace ไม่ใช่ :root  เอา class acc-* ไปใช้นอกกล่องนั้น var() จึงคืนค่าว่าง
 * เส้นขอบและแถบสลับสีหายหมด  ไฟล์นี้ประกาศบน :root จึงใช้ได้ทุกที่
 *
 * สัญญา markup (ดูของจริงที่ templates/helpdesk_claim_workspace.html:204-218):
 *   <section data-vnix-region="primary" data-vnix-min-rows="10" data-vnix-row-height="34">
 *     <div class="vx-grid-shell" data-vnix-scroll style="--vx-freeze-1:132px; --vx-freeze-2:300px;">
 *       <table class="vx-grid">
 *         <thead>
 *           <tr class="vx-letter-row" aria-hidden="true"><th class="vx-frozen-1">A</th>…</tr>
 *           <tr class="vx-heading-row"><th class="vx-frozen-1" scope="col">เลขที่งาน</th>…</tr>
 *     <div data-vnix-region-foot>  <nav class="vx-sheet-tabs">…</nav>  <pager>  </div>
 *
 * --vx-freeze-1 คือ "ความกว้างคอลัมน์ 1" และถูกใช้เป็น left ของคอลัมน์ 2 ด้วย
 *
 * ห้ามใส่คอมเมนต์ CSS ไว้ในตัว rule — parser ของ contract test จับ body ด้วย
 * regex ที่หยุดที่วงเล็บปีกกาปิดตัวแรก เจอคอมเมนต์แล้วตัด body ผิด
 * (tests/test_list_viewport_contract.py, test_helpdesk_ticket_list_zoom_contract.py:10)
 * คอมเมนต์ระหว่าง rule ทำได้ตามปกติ  และห้ามยกตัว regex นั้นมาเขียนในไฟล์นี้ตรง ๆ
 * เพราะตัวมันเองมีวงเล็บปีกกาไม่สมดุล ทำให้เครื่องมือที่นับปีกกาอ่านไฟล์นี้ผิด
 */

:root {
  --vx-border: #d7e1eb;
  --vx-border-strong: #b8c6d6;
  --vx-text: #172033;
  --vx-muted: #64748b;
  --vx-head: #f1f5f9;
  --vx-head-2: #e2e8f0;
  --vx-zebra: #fbfdff;
  --vx-hover: #eff6ff;
  --vx-blue: #2563eb;
  --vx-blue-soft: #eff6ff;
  --vx-green: #059669;
  --vx-amber: #d97706;
  --vx-red: #dc2626;
  --vx-red-soft: #fef2f2;
  --vx-cell-pad: 6px 8px;
  --vx-font: .75rem;
  --vx-freeze-1: 96px;
  --vx-freeze-2: 150px;
}

/* ---------- ตาราง ---------- */

.vx-grid-shell {
  max-width: 100%;
  min-height: 160px;
  overflow: auto;
  overscroll-behavior-x: contain;
  position: relative;
}
.vx-grid-shell-tall { max-height: 64vh; }
.vx-grid-shell-mid { max-height: 56vh; }

.vx-grid {
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  width: 100%;
}
.vx-grid th,
.vx-grid td {
  background: #fff;
  border-bottom: 1px solid var(--vx-border);
  border-right: 1px solid var(--vx-border);
  color: var(--vx-text);
  font-size: var(--vx-font);
  padding: var(--vx-cell-pad);
  vertical-align: middle;
}
.vx-grid th:first-child,
.vx-grid td:first-child { border-left: 1px solid var(--vx-border); }
.vx-grid thead th {
  color: #334155;
  font-weight: 800;
  white-space: nowrap;
}

/* แถวตัวอักษร A B C — aria-hidden เพราะไม่ใช่หัวคอลัมน์จริง
   หัวจริงอยู่แถวถัดไปและเป็น <th scope="col"> */
.vx-grid thead .vx-letter-row th {
  background: var(--vx-head-2);
  color: #475569;
  font-size: .62rem;
  font-weight: 700;
  height: 22px;
  padding: 2px 8px;
  position: sticky;
  text-align: center;
  top: 0;
  z-index: 7;
}
.vx-grid thead .vx-heading-row th {
  background: var(--vx-head);
  height: 34px;
  position: sticky;
  top: 22px;
  z-index: 6;
}

.vx-grid tbody tr:nth-child(even) > td { background: var(--vx-zebra); }
.vx-grid tbody tr:hover > td { background: var(--vx-hover); }

/* ตรึงคอลัมน์ซ้าย — คอลัมน์ 2 วางชิดขวาของคอลัมน์ 1 พอดี */
.vx-grid .vx-frozen-1 {
  left: 0;
  min-width: var(--vx-freeze-1);
  position: sticky;
  width: var(--vx-freeze-1);
  z-index: 3;
}
.vx-grid .vx-frozen-2 {
  box-shadow: 1px 0 var(--vx-border-strong);
  left: var(--vx-freeze-1);
  min-width: var(--vx-freeze-2);
  position: sticky;
  width: var(--vx-freeze-2);
  z-index: 3;
}
.vx-grid thead .vx-letter-row th.vx-frozen-1,
.vx-grid thead .vx-letter-row th.vx-frozen-2,
.vx-grid thead .vx-heading-row th.vx-frozen-1,
.vx-grid thead .vx-heading-row th.vx-frozen-2 { z-index: 9; }
.vx-grid tbody tr:hover > td.vx-frozen-1,
.vx-grid tbody tr:hover > td.vx-frozen-2 { background: var(--vx-hover); }
.vx-grid tbody tr:nth-child(even) > td.vx-frozen-1,
.vx-grid tbody tr:nth-child(even) > td.vx-frozen-2 { background: var(--vx-zebra); }

.vx-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.vx-center { text-align: center; }
.vx-wrap { white-space: normal; }
.vx-neg { color: var(--vx-red); }
.vx-zero { color: var(--vx-muted); }

/* แถว "ไม่มีข้อมูล" ต้องมี class acc-empty ติดไปด้วยเสมอ
   vnix_list_viewport.js:119 ใช้มันเป็นตัวชี้ว่าอย่านับแถวนี้เป็นแถวข้อมูล
   ถ้าไม่มี การรับประกัน "เห็นกี่แถวต่อจอ" จะนับผิดโดยไม่มีใครรู้ */
.vx-grid td.vx-empty {
  color: var(--vx-muted);
  padding: 22px 12px;
  text-align: center;
}

.vx-sort {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.vx-sort:hover { color: var(--vx-blue); text-decoration: underline; }
.vx-sort-mark { color: var(--vx-blue); font-size: .62rem; margin-left: 2px; }

/* ---------- ปลดกฎเดิมที่ผูกความกว้างไว้กับ "ตำแหน่ง" คอลัมน์ ----------
 *
 * helpdesk/_style.html ตั้งความกว้างเป็น % ด้วย nth-child ให้ตารางรุ่นเก่า
 * .hd-customer-table th/td:nth-child(1)..(6)        = 15/20/20/16/13/13%
 * .hd-customer-table-focus th/td:nth-child(1)..(4)  = 42/26/22/10%
 * .hd-table-compact th/td:nth-child(1)..(4)         = 40/30/20/10%
 * และ .hd-customer-table-focus ยังตั้ง table-layout: fixed; width: 100%
 *
 * ตารางพวกนั้นมี 4 คอลัมน์ พอแตกเป็น 18 คอลัมน์ตามกฎหนึ่งช่องหนึ่งข้อมูล
 * ความกว้างจะไปตกผิดคอลัมน์ทั้งใบ และ table-layout: fixed จะบีบทุกคอลัมน์
 * ให้พอดีจอจนเลื่อนแนวนอนไม่ได้
 *
 * แก้ที่นี่ไม่ใช่ที่ _style.html เพราะไฟล์นั้นถูกฝังลงในทุกหน้า (264 KB)
 * การเติมบรรทัดที่นั่นจะทำให้ CSS ฝังในหน้าโตขึ้น ซึ่ง
 * tests/test_page_weight_budget.py ห้ามไว้ (เพดานลดได้ ขึ้นไม่ได้)
 *
 * specificity เท่ากัน (0-2-1) แต่ไฟล์นี้โหลดทีหลัง จึงชนะ
 */

.vx-grid.hd-table-compact,
.vx-grid.hd-customer-table,
.vx-grid.hd-customer-table-focus {
  min-width: 0;
  table-layout: auto;
  width: 100%;
}
.vx-grid.hd-table-compact th,
.vx-grid.hd-table-compact td,
.vx-grid.hd-customer-table th,
.vx-grid.hd-customer-table td,
.vx-grid.hd-customer-table-focus th,
.vx-grid.hd-customer-table-focus td {
  width: auto;
}

/* v14 คุมความสูงกล่องตารางเองอยู่แล้ว ไม่ให้ max-height ของชุดกลางไปทับ
 * (ชุดกลางตั้ง max-height เฉพาะตอนมี modifier -tall/-mid ซึ่ง v14 ไม่ได้ใช้
 *  บล็อกนี้จึงกันเฉพาะกรณีที่มีคนเผลอเติม modifier เข้าไปภายหลัง)
 */
.vx-grid-shell.hd-v14-table-wrap {
  max-height: none;
}

/* ---------- แท็บชีต — อยู่ "ล่าง" ตาราง แบบ Excel ---------- */

.vx-sheet-tabs {
  align-items: flex-start;
  border-bottom: 1px solid var(--vx-border-strong);
  border-radius: 0 0 10px 10px;
  border-top: 3px solid #173a69;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 0 0 8px;
  overflow-x: auto;
  padding: 0 6px 4px;
}
.vx-sheet-tab {
  align-items: center;
  background: #eef2f7;
  border: 1px solid #aebdce;
  border-radius: 0 0 8px 8px;
  border-top: 0;
  color: #24384f;
  display: inline-flex;
  font-size: .72rem;
  font-weight: 700;
  gap: 5px;
  padding: 5px 10px 6px;
  text-decoration: none;
  white-space: nowrap;
}
.vx-sheet-tab:hover {
  background: #e2e9f2;
  color: #12263d;
  text-decoration: none;
}
.vx-sheet-tab:focus-visible {
  outline: 2px solid var(--vx-blue);
  outline-offset: -2px;
}
.vx-sheet-tab.is-active {
  background: #fff;
  box-shadow: inset 0 -3px #4ea1ff;
  color: #0b2b4a;
}
.vx-sheet-count {
  background: #fff;
  border: 1px solid #c4d1e0;
  border-radius: 999px;
  font-size: .66rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  min-width: 20px;
  padding: 0 5px;
  text-align: center;
}
.vx-sheet-tab.is-active .vx-sheet-count {
  background: var(--vx-blue-soft);
  border-color: var(--vx-blue);
  color: #1d4ed8;
}
.vx-sheet-count.is-danger { background: var(--vx-red-soft); border-color: var(--vx-red); color: var(--vx-red); }
.vx-sheet-count.is-warning { border-color: var(--vx-amber); color: var(--vx-amber); }
.vx-sheet-count.is-success { border-color: var(--vx-green); color: var(--vx-green); }

/* .is-top คืนรูปทรงแบบแท็บบน ไว้ให้ที่ที่ยังต้องการของเดิม */
.vx-sheet-tabs.is-top {
  align-items: flex-end;
  border-bottom: 3px solid #173a69;
  border-radius: 10px 10px 0 0;
  border-top: 1px solid var(--vx-border-strong);
  margin: 0 0 0;
  padding: 4px 6px 0;
}
.vx-sheet-tabs.is-top .vx-sheet-tab {
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  border-top: 1px solid #aebdce;
}
.vx-sheet-tabs.is-top .vx-sheet-tab.is-active { box-shadow: inset 0 3px #4ea1ff; }

/* ---------- แถบตัวเลขงาน ---------- */

.vx-kpi-band {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  margin: 0;
  padding: 0;
}
.vx-kpi {
  background: #fff;
  border: 1px solid var(--vx-border);
  border-left: 4px solid var(--vx-border-strong);
  border-radius: 7px;
  color: inherit;
  display: block;
  min-width: 0;
  padding: 8px 10px;
  text-decoration: none;
  transition: box-shadow .12s ease, transform .12s ease;
}
a.vx-kpi:hover {
  box-shadow: 0 3px 10px rgba(15, 23, 42, .12);
  color: inherit;
  text-decoration: none;
  transform: translateY(-1px);
}
a.vx-kpi:focus-visible { outline: 2px solid var(--vx-blue); outline-offset: 2px; }
.vx-kpi small {
  color: var(--vx-muted);
  display: block;
  font-size: .66rem;
  font-weight: 700;
  line-height: 1.25;
}
.vx-kpi strong {
  display: block;
  font-size: 1.08rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1.3;
  margin-top: 1px;
}
.vx-kpi span {
  color: var(--vx-muted);
  display: block;
  font-size: .63rem;
  line-height: 1.25;
}
.vx-kpi.is-static { cursor: default; }
.vx-kpi.is-primary { border-left-color: var(--vx-blue); }
.vx-kpi.is-success { border-left-color: var(--vx-green); }
.vx-kpi.is-warning { border-left-color: var(--vx-amber); }
.vx-kpi.is-danger { background: var(--vx-red-soft); border-left-color: var(--vx-red); }
.vx-kpi.is-danger strong { color: var(--vx-red); }
.vx-kpi.is-active {
  background: var(--vx-blue-soft);
  border-color: var(--vx-blue);
  box-shadow: inset 0 0 0 1px var(--vx-blue);
}

/* ---------- กราฟ SVG ฝั่ง server ---------- */

.vx-chart { margin: 0; }
.vx-chart-head {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 4px;
}
.vx-chart-title { color: #334155; font-size: .72rem; font-weight: 800; }
.vx-chart svg { display: block; height: auto; max-width: 100%; width: 100%; }
.vx-grid-line { stroke: var(--vx-border); stroke-width: 1; }
.vx-zero-line { stroke: var(--vx-border-strong); stroke-width: 1; }
.vx-axis-text { fill: var(--vx-muted); font-size: 9px; }
.vx-bar { fill: var(--vx-blue); }
.vx-line { fill: none; stroke: var(--vx-blue); stroke-width: 2; }
.vx-point { fill: var(--vx-blue); }
.vx-legend { color: var(--vx-muted); font-size: .64rem; }
.vx-chart-empty {
  border: 1px dashed var(--vx-border-strong);
  border-radius: 7px;
  color: var(--vx-muted);
  font-size: .7rem;
  padding: 18px 12px;
  text-align: center;
}

/* ---------- มือถือ ---------- */

@media (max-width: 767.98px) {
  .vx-grid-shell,
  .vx-grid-shell-tall,
  .vx-grid-shell-mid { max-height: none; }
  .vx-sheet-tabs { flex-wrap: nowrap; }
  .vx-kpi-band { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
}

/* ---------- พิมพ์ ---------- */

@media print {
  .vx-sheet-tabs,
  .vx-kpi-band { display: none !important; }
  .vx-grid-shell,
  .vx-grid-shell-tall,
  .vx-grid-shell-mid {
    max-height: none !important;
    overflow: visible !important;
  }
  /* vnix_list_viewport.js เขียน inline min-width ลงบนตารางเพื่อให้คอลัมน์ที่ตรึงไว้
     คงความกว้างตอนเลื่อนแนวนอนบนจอ  inline style ชนะ stylesheet ธรรมดา
     ถ้าไม่ใส่ !important ตารางจะพกความกว้างนั้นไปบนกระดาษแล้วคอลัมน์ท้ายขาด */
  .vx-grid { min-width: 0 !important; width: 100% !important; }
  .vx-grid th,
  .vx-grid td {
    border-color: #999 !important;
    font-size: 9pt;
    padding: 2px 4px;
  }
  .vx-grid thead th {
    background: #eee !important;
    position: static !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .vx-grid .vx-frozen-1,
  .vx-grid .vx-frozen-2 { position: static !important; }
  .vx-grid thead { display: table-header-group; }
  .vx-grid tr { break-inside: avoid; page-break-inside: avoid; }
}

/* ======================================================================
 * ชั้นงาน (Task layer) — หน้า Helpdesk/HR ที่ยกเครื่องแล้วเท่านั้น
 *
 * เปิดด้วย attribute บนรากของหน้า: <div class="vx-task" data-vx-task="hd.customer">
 * (static/vx_task_kit.js คัดลอกค่าไปไว้ที่ <html data-vx-task> ด้วย เพื่อให้ dialog/ทัวร์
 *  ที่ต่อท้าย <body> ได้สีเดียวกัน) หน้าที่ยังไม่มี attribute นี้หน้าตาไม่เปลี่ยน
 *
 * ขนาดตัวอักษรเท่าหน้า Data/Sell (static/data_task_ui.css --dt-*): เซลล์ 24 · ปุ่ม/ช่องกรอก 22 ·
 * ตัวรอง 20 · หัวหน้า 32 · ตัวเลขการ์ด 30 — tests/test_vx_task_kit_contract.py เทียบค่าให้
 * สีเข้มใช้เฉพาะ ปุ่มหลัก · การ์ดด่วน · ปุ่มทำงานต่อ · แท็บที่เลือก นอกนั้นขาว/เทาอ่อน
 * ====================================================================== */

[data-vx-task] {
  --vx-task-text: 24px;
  --vx-task-control: 22px;
  --vx-task-small: 20px;
  --vx-task-heading: 32px;
  --vx-task-number: 30px;
  --vx-task-ink: #1e2b3a;
  --vx-task-muted: #566575;
  --vx-task-line: #d6dfe8;
  --vx-task-zebra: #f7f9fb;
  --vx-task-hover: #eef4fa;
  --vx-task-accent: #1d4ed8;
  --vx-task-accent-ink: #ffffff;
  --vx-task-soft: #eef3ff;
  --vx-task-bright: #93c5fd;
  --vx-task-accent-line: #bfd3fb;
  --vx-task-danger: #c2410c;
  --vx-task-danger-soft: #fff4ed;
  --vx-task-ok: #15803d;
  --vx-task-ok-soft: #effaf2;
  --vx-task-warn: #a16207;
  --vx-task-warn-soft: #fefbea;
}

/* สีประจำหน้า — ออกแบบตามชนิดงาน (ข้อ 10) */
[data-vx-task="hd.hub"] { --vx-task-accent: #1e3a8a; --vx-task-soft: #eef2fb; --vx-task-bright: #a5b8ec; --vx-task-accent-line: #c3cfee; }
[data-vx-task="hd.customer"] { --vx-task-accent: #1d4ed8; --vx-task-soft: #eef3ff; --vx-task-bright: #93c5fd; --vx-task-accent-line: #bfd3fb; }
[data-vx-task="hd.internal"] { --vx-task-accent: #0f766e; --vx-task-soft: #edf9f7; --vx-task-bright: #7ee0cf; --vx-task-accent-line: #b8e4dc; }
[data-vx-task="hd.tickets"] { --vx-task-accent: #475569; --vx-task-soft: #f1f4f8; --vx-task-bright: #c3cedb; --vx-task-accent-line: #d5dde7; }
[data-vx-task="hd.claims"] { --vx-task-accent: #c2410c; --vx-task-soft: #fff4ed; --vx-task-bright: #fdba8c; --vx-task-accent-line: #f6d2bd; }
[data-vx-task="hd.vendor"] { --vx-task-accent: #b45309; --vx-task-soft: #fff7ec; --vx-task-bright: #fcc97e; --vx-task-accent-line: #f3d6ad; }
[data-vx-task="hd.money"] { --vx-task-accent: #15803d; --vx-task-soft: #eefaf1; --vx-task-bright: #8fdcaa; --vx-task-accent-line: #c2e8cf; }
[data-vx-task="hd.intake"] { --vx-task-accent: #2563eb; --vx-task-soft: #eef4ff; --vx-task-bright: #a3c2fb; --vx-task-accent-line: #c6d8fb; }
[data-vx-task="hd.intake-internal"] { --vx-task-accent: #0f766e; --vx-task-soft: #edf9f7; --vx-task-bright: #7ee0cf; --vx-task-accent-line: #b8e4dc; }
[data-vx-task="hd.testdata"] { --vx-task-accent: #374151; --vx-task-soft: #f3f4f6; --vx-task-bright: #cbd2dc; --vx-task-accent-line: #d9dee6; }
[data-vx-task="hd.import"] { --vx-task-accent: #6d28d9; --vx-task-soft: #f4f0fd; --vx-task-bright: #c4b0f5; --vx-task-accent-line: #dccff8; }
[data-vx-task="hd.reports"] { --vx-task-accent: #334155; --vx-task-soft: #f1f4f8; --vx-task-bright: #c3cedb; --vx-task-accent-line: #d5dde7; }
[data-vx-task="hd.settings"] { --vx-task-accent: #374151; --vx-task-soft: #f3f4f6; --vx-task-bright: #cbd2dc; --vx-task-accent-line: #d9dee6; }

/* ---------- โครงหน้า ---------- */
.vx-task {
  color: var(--vx-task-ink);
  font-size: var(--vx-task-small);
  line-height: 1.35;
  margin: 0 auto;
  max-width: 100%;
  padding: 6px 10px 14px;
}
.vx-task :is(input, select, textarea, button, .btn) { font-size: var(--vx-task-control); }
.vx-task a { color: inherit; }
.vx-task .visually-hidden { position: absolute !important; }

.vx-task-head {
  align-items: center;
  border-bottom: 2px solid var(--vx-task-accent-line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: space-between;
  margin: 0 0 8px;
  padding: 2px 0 8px;
}
.vx-task-titlebox { align-items: baseline; display: flex; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.vx-task-title {
  color: var(--vx-task-accent);
  font-size: var(--vx-task-heading);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
}
.vx-task-count {
  background: var(--vx-task-soft);
  border-radius: 999px;
  color: var(--vx-task-muted);
  font-size: var(--vx-task-small);
  font-weight: 600;
  padding: 2px 12px;
  white-space: nowrap;
}
.vx-task-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.vx-btn {
  align-items: center;
  background: #fff;
  border: 1px solid var(--vx-task-line);
  border-radius: 8px;
  color: var(--vx-task-ink);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--vx-task-control);
  font-weight: 600;
  gap: 6px;
  line-height: 1.2;
  min-height: 42px;
  padding: 4px 14px;
  text-decoration: none;
  white-space: nowrap;
}
.vx-btn:hover { background: var(--vx-task-hover); color: var(--vx-task-ink); text-decoration: none; }
.vx-btn:focus-visible { outline: 3px solid var(--vx-task-accent); outline-offset: 2px; }
.vx-btn-primary {
  background: var(--vx-task-accent);
  border-color: var(--vx-task-accent);
  box-shadow: 0 2px 6px rgba(15, 23, 42, .14);
  color: var(--vx-task-accent-ink);
  font-weight: 700;
}
.vx-btn-primary:hover { background: var(--vx-task-accent); color: var(--vx-task-accent-ink); filter: brightness(1.08); }
.vx-btn-tour { border-color: var(--vx-task-accent-line); color: var(--vx-task-accent); }
.vx-btn[aria-disabled="true"], .vx-btn:disabled { cursor: not-allowed; filter: grayscale(.5); opacity: .6; }
.vx-menu { position: relative; }
.vx-menu > summary { list-style: none; }
.vx-menu > summary::-webkit-details-marker { display: none; }
.vx-menu-panel {
  background: #fff;
  border: 1px solid var(--vx-task-line);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
  display: grid;
  gap: 2px;
  min-width: 260px;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 60;
}
.vx-menu-panel a, .vx-menu-panel button, .vx-menu-panel label {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--vx-task-ink);
  cursor: pointer;
  display: flex;
  font-size: var(--vx-task-small);
  gap: 8px;
  padding: 6px 10px;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}
.vx-menu-panel a:hover, .vx-menu-panel button:hover, .vx-menu-panel label:hover { background: var(--vx-task-hover); }
.vx-menu-panel input[type=checkbox] { height: 20px; width: 20px; }

/* ---------- การ์ดตัวเลขงาน ---------- */
.vx-task-cards { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 0 0 8px; }
.vx-task-card {
  background: #fff;
  border: 1px solid var(--vx-task-line);
  border-left: 5px solid var(--vx-task-line);
  border-radius: 10px;
  color: var(--vx-task-muted);
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: center;
  min-height: 70px;
  min-width: 0;
  padding: 6px 14px;
  text-decoration: none;
}
a.vx-task-card:hover { border-color: var(--vx-task-accent); color: var(--vx-task-muted); text-decoration: none; }
a.vx-task-card:focus-visible { outline: 3px solid var(--vx-task-accent); outline-offset: 2px; }
.vx-task-card > span { font-size: var(--vx-task-small); font-weight: 600; line-height: 1.25; }
.vx-task-card strong {
  color: var(--vx-task-ink);
  font-size: var(--vx-task-number);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.15;
}
.vx-task-card strong small { color: var(--vx-task-muted); font-size: var(--vx-task-small); font-weight: 500; margin-left: 4px; }
.vx-task-card.is-urgent { background: var(--vx-task-soft); border-color: var(--vx-task-accent); border-left-color: var(--vx-task-accent); }
.vx-task-card.is-urgent strong { color: var(--vx-task-accent); }
.vx-task-card.is-danger { background: var(--vx-task-danger-soft); border-left-color: var(--vx-task-danger); }
.vx-task-card.is-danger strong { color: var(--vx-task-danger); }
.vx-task-card.is-ok { border-left-color: var(--vx-task-ok); }
.vx-task-card.is-ok strong { color: var(--vx-task-ok); }
.vx-task-card.is-warn { border-left-color: var(--vx-task-warn); }
.vx-task-card.is-warn strong { color: var(--vx-task-warn); }
.vx-task-card.is-active { outline: 3px solid var(--vx-task-accent); outline-offset: -1px; }

/* ---------- กราฟแถบสัดส่วน (แต่ละใบนับครั้งเดียว) คลิกแล้วกรอง ---------- */
.vx-stack-wrap { margin: 0 0 8px; }
.vx-stack { background: var(--vx-task-zebra); border: 1px solid var(--vx-task-line); border-radius: 8px; display: flex; height: 16px; overflow: hidden; }
.vx-stack-part { background: var(--tone, var(--vx-task-accent)); display: block; flex: 0 0 var(--part); min-width: 4px; }
.vx-stack-part:hover { filter: brightness(1.12); }
.vx-stack-legend { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 4px; }
.vx-stack-legend a { color: var(--vx-task-muted); font-size: var(--vx-task-small); text-decoration: none; white-space: nowrap; }
.vx-stack-legend a:hover { color: var(--vx-task-accent); }
.vx-stack-legend i { background: var(--tone, var(--vx-task-accent)); border-radius: 3px; display: inline-block; height: 13px; margin-right: 6px; vertical-align: -1px; width: 13px; }
.vx-stack-legend b { color: var(--vx-task-ink); font-variant-numeric: tabular-nums; }
.vx-chart-panel { background: #fff; border: 1px solid var(--vx-task-line); border-radius: 10px; margin: 0 0 8px; padding: 8px 12px; }
.vx-chart-panel .vx-chart-title { font-size: var(--vx-task-small); }
.vx-chart-panel .vx-axis-text { font-size: 12px; }
.vx-chart-panel[hidden] { display: none !important; }
.vx-bars { display: grid; gap: 6px; }
.vx-bars a { align-items: center; color: var(--vx-task-ink); display: grid; font-size: var(--vx-task-small); gap: 10px; grid-template-columns: minmax(120px, 260px) 1fr auto; text-decoration: none; }
.vx-bars a:hover { color: var(--vx-task-accent); }
.vx-bars .vx-bar-track { background: var(--vx-task-zebra); border-radius: 6px; height: 16px; overflow: hidden; }
.vx-bars .vx-bar-fill { background: var(--tone, var(--vx-task-accent)); display: block; height: 100%; width: var(--part); }
.vx-bars b { font-variant-numeric: tabular-nums; }

/* ---------- ผัง flow ของศูนย์รวม ---------- */
.vx-flowmap { background: #fff; border: 1px solid var(--vx-task-line); border-radius: 12px; display: grid; gap: 6px; margin: 0 0 8px; padding: 8px 12px; }
.vx-flowmap-lane { align-items: center; display: grid; gap: 8px; grid-template-columns: minmax(150px, 190px) 1fr; }
.vx-flowmap-title { align-items: baseline; color: var(--vx-task-accent); display: flex; font-size: var(--vx-task-control); font-weight: 700; gap: 10px; justify-content: space-between; text-decoration: none; }
.vx-flowmap-title b { background: var(--vx-task-accent); border-radius: 8px; color: var(--vx-task-accent-ink); font-size: var(--vx-task-small); padding: 0 10px; }
.vx-flowmap-title:hover { color: var(--vx-task-accent); text-decoration: underline; }
.vx-flowmap-steps { align-items: center; display: flex; flex-wrap: wrap; gap: 2px; list-style: none; margin: 0; padding: 0; }
.vx-flowmap-steps li { align-items: center; display: inline-flex; }
.vx-flowmap-steps li + li::before { color: var(--vx-task-muted); content: "›"; font-size: 18px; margin: 0 2px 0 0; }
.vx-flowmap-step { align-items: center; background: var(--vx-task-zebra); border: 1px solid var(--vx-task-line); border-radius: 10px; color: var(--vx-task-muted); display: inline-flex; font-size: var(--vx-task-small); font-weight: 600; gap: 5px; min-height: 40px; padding: 2px 8px; text-decoration: none; white-space: nowrap; }
.vx-flowmap-step b { color: var(--vx-task-ink); font-variant-numeric: tabular-nums; }
.vx-flowmap-step.has-work { background: var(--vx-task-soft); border-color: var(--vx-task-accent-line); color: var(--vx-task-ink); }
.vx-flowmap-step.has-work b { color: var(--vx-task-accent); }
.vx-flowmap-step.is-done { color: var(--vx-task-ok); }
.vx-flowmap-step.is-done b { color: var(--vx-task-ok); }
.vx-flowmap-step.is-money.has-work { background: var(--vx-task-warn-soft); border-color: #eacb85; }
.vx-flowmap-step:hover { border-color: var(--vx-task-accent); color: var(--vx-task-ink); text-decoration: none; }

/* ---------- แท็บ flow — อยู่เหนือตาราง (ข้อ 1) ---------- */
.vx-flow-tabs {
  align-items: stretch;
  border-bottom: 3px solid var(--vx-task-accent);
  display: flex;
  gap: 2px;
  margin: 4px 0 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.vx-flow-tail { align-items: stretch; display: inline-flex; gap: 2px; margin-left: auto; }
@media (min-width: 768px) {
  .vx-flow-tabs, .vx-flow-group, .vx-flow-tail { flex-wrap: wrap; overflow-x: visible; row-gap: 4px; }
}
.vx-flow-tab {
  align-items: center;
  background: #fff;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  color: var(--vx-task-ink);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--vx-task-control);
  font-weight: 650;
  gap: 4px;
  min-height: 46px;
  padding: 0 8px;
  text-decoration: none;
  white-space: nowrap;
}
.vx-flow-tab:hover { background: var(--vx-task-hover); color: var(--vx-task-ink); text-decoration: none; }
.vx-flow-tab:focus-visible { outline: 3px solid var(--vx-task-accent); outline-offset: -3px; }
.vx-flow-tab[aria-current="page"] { background: var(--vx-task-accent); border-color: var(--vx-task-accent); color: var(--vx-task-accent-ink); }
.vx-flow-no { color: var(--vx-task-accent); font-size: 24px; line-height: 1; }
.vx-flow-tab[aria-current="page"] .vx-flow-no { color: var(--vx-task-accent-ink); }
.vx-flow-count {
  background: var(--vx-task-zebra);
  border-radius: 6px;
  color: var(--vx-task-ink);
  font-size: var(--vx-task-small);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  padding: 1px 6px;
}
.vx-flow-tab[aria-current="page"] .vx-flow-count { background: var(--vx-task-accent-ink); color: var(--vx-task-accent); }
.vx-flow-tab[data-empty] .vx-flow-count { opacity: .55; }
.vx-flow-tab.is-terminal .vx-flow-label::before { color: var(--vx-task-ok); content: "✓ "; }
.vx-flow-tab.is-terminal[aria-current="page"] .vx-flow-label::before { color: inherit; }
.vx-flow-group { align-items: stretch; background: var(--vx-task-zebra); border-radius: 8px 8px 0 0; display: inline-flex; margin: 0 4px; padding: 0 2px; }
.vx-flow-group .vx-flow-tab { background: transparent; padding: 0 6px; }
.vx-flow-group .vx-flow-tab[aria-current="page"] { background: var(--vx-task-accent); }
.vx-flow-arrow { align-self: center; color: var(--vx-task-muted); font-size: 18px; margin: 0 -1px; padding: 0; }
.vx-flow-sep { align-self: center; background: var(--vx-task-line); height: 28px; margin: 0 4px; width: 2px; }

/* ---------- แถบค้นหา + ชิปตัวกรอง ---------- */
.vx-task-filterbar { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; }
.vx-task-search { flex: 1 1 360px; position: relative; }
.vx-task-search input {
  border: 1px solid var(--vx-task-line);
  border-radius: 8px;
  font-size: var(--vx-task-control);
  min-height: 44px;
  padding: 4px 12px 4px 40px;
  width: 100%;
}
.vx-task-search i { color: var(--vx-task-muted); left: 12px; position: absolute; top: 50%; transform: translateY(-50%); }
.vx-chips { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
.vx-chip {
  align-items: center;
  background: var(--vx-task-soft);
  border: 1px solid var(--vx-task-accent-line);
  border-radius: 18px;
  color: var(--vx-task-ink);
  display: inline-flex;
  font-size: var(--vx-task-small);
  gap: 6px;
  min-height: 36px;
  padding: 2px 12px;
  text-decoration: none;
}
.vx-chip:hover { border-color: var(--vx-task-accent); color: var(--vx-task-ink); text-decoration: none; }
.vx-chip b { font-weight: 700; }
.vx-chip.is-clear { background: #fff; border-color: var(--vx-task-line); color: var(--vx-task-muted); }

/* ---------- ตาราง (ตัวอักษรใหญ่เท่า Data/Sell) ---------- */
[data-vx-task] .vx-grid th,
[data-vx-task] .vx-grid td {
  font-size: var(--vx-task-text);
  line-height: 1.35;
  max-width: 320px;
  overflow: hidden;
  padding: 3px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-vx-task] .vx-grid td { height: 40px; }
[data-vx-task] .vx-grid thead .vx-heading-row th {
  background: var(--vx-task-soft);
  color: var(--vx-task-ink);
  font-size: var(--vx-task-control);
  font-weight: 700;
  height: 44px;
  padding-right: 40px;
  position: sticky;
  top: 24px;
}
[data-vx-task] .vx-grid thead .vx-heading-row th:not([data-vx-col]) { padding-right: 14px; }
[data-vx-task] .vx-grid thead .vx-letter-row th { font-size: 15px; height: 24px; }
[data-vx-task] .vx-grid tbody tr:nth-child(even) > td { background: var(--vx-task-zebra); }
[data-vx-task] .vx-grid tbody tr:hover > td { background: var(--vx-task-hover); }
[data-vx-task] .vx-grid .hd-main-link, [data-vx-task] .vx-grid .vx-main-link { color: var(--vx-task-accent); font-weight: 700; text-decoration: none; }
[data-vx-task] .vx-grid .hd-main-link:hover, [data-vx-task] .vx-grid .vx-main-link:hover { text-decoration: underline; }
[data-vx-task] .vx-grid .vx-col-hidden { display: none; }
[data-vx-task] .vx-grid .vx-overdue { color: var(--vx-task-danger); font-weight: 700; }
[data-vx-task] .vx-grid .vx-soon { color: var(--vx-task-warn); font-weight: 700; }
[data-vx-task] .vx-grid .vx-muted-cell { color: var(--vx-task-muted); }
[data-vx-task] .vx-grid .vx-select-col { text-align: center; width: 52px; }
[data-vx-task] .vx-grid .vx-select-col input { height: 22px; width: 22px; }
[data-vx-task] .vx-grid td.vx-empty { font-size: var(--vx-task-small); padding: 26px 12px; white-space: normal; }
[data-vx-task] .vx-status-pill {
  border: 1px solid var(--vx-task-line);
  border-radius: 14px;
  display: inline-block;
  font-size: var(--vx-task-small);
  font-weight: 600;
  line-height: 1.3;
  padding: 1px 10px;
}
[data-vx-task] .vx-grid-shell { border: 1px solid var(--vx-task-line); border-top: 0; border-radius: 0 0 10px 10px; }

.vx-hf {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--vx-task-muted, #566575);
  cursor: pointer;
  display: inline-flex;
  font-size: 16px;
  height: 28px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  z-index: 3;
}
.vx-hf:hover { background: #fff; border-color: var(--vx-task-line, #d6dfe8); color: var(--vx-task-accent, #1d4ed8); }
.vx-hf[aria-pressed="true"] { background: var(--vx-task-accent, #1d4ed8); border-color: var(--vx-task-accent, #1d4ed8); color: #fff; }
[data-vx-task] .vx-grid thead .vx-heading-row th { position: sticky; }

/* ---------- ทำงานต่อ: คอลัมน์สุดท้าย ติดขวา (ข้อ 9) ---------- */
[data-vx-task] .vx-grid :is(th, td).vx-next-col {
  background: #fff;
  box-shadow: -1px 0 var(--vx-task-line);
  max-width: none;
  min-width: 230px;
  overflow: visible;
  position: sticky;
  right: 0;
  text-align: left;
  z-index: 4;
}
[data-vx-task] .vx-grid thead .vx-heading-row th.vx-next-col { background: var(--vx-task-soft); z-index: 12; }
[data-vx-task] .vx-grid thead .vx-letter-row th.vx-next-col { position: sticky; right: 0; z-index: 12; }
[data-vx-task] .vx-grid tbody tr:nth-child(even) > td.vx-next-col { background: var(--vx-task-zebra); }
[data-vx-task] .vx-grid tbody tr:hover > td.vx-next-col { background: var(--vx-task-hover); }
.vx-next-step {
  align-items: center;
  background: var(--vx-task-bright, #93c5fd);
  border: 2px solid var(--vx-task-accent, #1d4ed8);
  border-radius: 8px;
  color: #102030;
  cursor: pointer;
  display: inline-flex;
  font-size: var(--vx-task-control, 22px);
  font-weight: 700;
  gap: 6px;
  line-height: 1.2;
  min-height: 34px;
  padding: 2px 12px;
  text-decoration: none;
  white-space: nowrap;
}
.vx-next-step { max-width: 100%; }
.vx-next-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vx-next-step:hover { box-shadow: 0 0 0 3px var(--vx-task-soft, #eef3ff); color: #102030; filter: brightness(1.05); text-decoration: none; }
.vx-next-step:focus-visible { outline: 3px solid var(--vx-task-accent, #1d4ed8); outline-offset: 2px; }
.vx-next-no {
  align-items: center;
  background: #fff;
  border-radius: 13px;
  color: var(--vx-task-accent, #1d4ed8);
  display: inline-flex;
  font-size: 17px;
  font-weight: 800;
  height: 26px;
  justify-content: center;
  min-width: 26px;
  padding: 0 4px;
}
.vx-next-step:disabled, .vx-next-step[aria-disabled="true"] { background: #eef1f4; border-color: #c6ced6; color: #57636f; cursor: not-allowed; }
.vx-next-reason {
  color: var(--vx-task-muted, #566575);
  display: inline-block;
  font-size: var(--vx-task-small, 20px);
  margin-left: 6px;
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.vx-done {
  align-items: center;
  background: var(--vx-task-ok-soft, #effaf2);
  border: 1px solid #b7dfc0;
  border-radius: 16px;
  color: var(--vx-task-ok, #15803d);
  display: inline-flex;
  font-size: var(--vx-task-small, 20px);
  font-weight: 700;
  gap: 6px;
  padding: 1px 10px;
  white-space: nowrap;
}
.vx-done::before { content: "✓"; }
.vx-done[data-state="cancelled"] { background: #eef1f4; border-color: #d0d7de; color: #57636f; }
.vx-done[data-state="cancelled"]::before { content: "–"; }
.vx-view-link { color: var(--vx-task-muted, #566575); font-size: var(--vx-task-small, 20px); margin-left: 8px; }

/* ---------- แถบทำงานกับหลายแถว ---------- */
.vx-batch-bar {
  align-items: center;
  background: var(--vx-task-soft);
  border: 1px solid var(--vx-task-accent-line);
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0;
  padding: 6px 10px;
}
.vx-batch-bar[hidden] { display: none !important; }
.vx-batch-bar b { font-size: var(--vx-task-small); }

/* ---------- เลขหน้า ---------- */
.vx-pager { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: flex-start; padding: 8px 2px 0; }
.vx-pager-info { color: var(--vx-task-muted); font-size: var(--vx-task-small); }
.vx-pager-links { align-items: center; display: flex; flex-wrap: wrap; gap: 4px; }
.vx-pager-links a, .vx-pager-links span {
  border: 1px solid var(--vx-task-line);
  border-radius: 8px;
  color: var(--vx-task-ink);
  font-size: var(--vx-task-small);
  min-width: 42px;
  padding: 4px 10px;
  text-align: center;
  text-decoration: none;
}
.vx-pager-links span[aria-current="page"] { background: var(--vx-task-accent); border-color: var(--vx-task-accent); color: var(--vx-task-accent-ink); font-weight: 700; }
.vx-pager select { border: 1px solid var(--vx-task-line); border-radius: 8px; font-size: var(--vx-task-small); min-height: 38px; }

/* ---------- ยืด/หดคอลัมน์ (vx_task_kit.js · ด้ามอยู่ "ใน" หัวคอลัมน์ทั้งอัน เพราะ th ตัดส่วนที่ล้นออก) ---------- */
[data-vx-task] .workspace-resizable-column { position: relative; }
[data-vx-task] .workspace-column-handle {
  bottom: 0;
  cursor: col-resize;
  position: absolute;
  right: 0;
  top: 0;
  touch-action: none;
  width: 10px;
  z-index: 5;
}
[data-vx-task] .workspace-column-handle:hover, [data-vx-task] .workspace-column-handle:focus-visible { background: var(--vx-task-accent-line); outline: none; }
[data-vx-task] .workspace-column-handle.is-dragging { background: var(--vx-task-accent); }

/* ---------- ตารางความกว้างคงที่ (.vx-grid-fixed) — ความกว้างมาจาก <col> ตาม GRID_COLUMNS ----------
   ยังไม่เคยปรับ: เต็มกล่องพอดี ส่วนเกินเฉลี่ยตามสัดส่วน · ผู้ใช้ปรับแล้ว: vx_task_kit.js ตั้ง width = ผลรวมจริง */
[data-vx-task] .vx-grid.vx-grid-fixed { table-layout: fixed; width: 100%; }
[data-vx-task] .vx-grid.vx-grid-fixed :is(th, td) { max-width: none; }

/* ---------- ฟอร์มหน้าเดียวเรียงเป็นขั้น (รับเรื่อง/แจ้งงาน) ---------- */
.vx-form { align-items: start; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 600px), 1fr)); }
.vx-form > .vx-savebar, .vx-form > input[type=hidden] { grid-column: 1 / -1; }
.vx-form-step { background: #fff; border: 1px solid var(--vx-task-line); border-radius: 12px; padding: 10px 14px 14px; }
.vx-form-step > h2 { align-items: center; color: var(--vx-task-accent); display: flex; font-size: var(--vx-task-control); font-weight: 700; gap: 8px; margin: 0 0 8px; }
.vx-form-grid { display: grid; gap: 8px 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
[data-vx-task] .vx-grid td.vx-latest-col small { color: var(--vx-task-muted); font-size: var(--vx-task-small); }
[data-vx-task] .vx-grid td.vx-latest-col b { font-weight: 650; }
/* ---------- ย้ายข้อมูลทดสอบออก (helpdesk/test_data.html) ---------- */
.vx-rule-picker { background: #fff; border: 1px solid var(--vx-task-line); border-radius: 12px; display: grid; gap: 6px; margin: 8px 0; padding: 10px 14px; }
.vx-rule-picker .vx-rule-title { color: var(--vx-task-accent); font-size: var(--vx-task-control); font-weight: 700; margin: 0 0 4px; }
.vx-rule-picker label.vx-inline { align-items: center; display: flex; font-size: var(--vx-task-small); gap: 10px; }
.vx-rule-picker label.vx-inline input { height: 22px; width: 22px; }
.vx-rule-picker label.vx-inline b { background: var(--vx-task-zebra); border-radius: 6px; padding: 0 8px; }
.vx-rule-picker > .vx-btn { justify-self: start; }
.vx-btn.vx-btn-danger { background: var(--vx-task-danger, #b42318); border-color: var(--vx-task-danger, #b42318); color: #fff; }
.vx-btn.vx-btn-danger:hover { filter: brightness(1.08); }
.vx-confirm-panel { border-color: var(--vx-task-danger, #b42318); margin-top: 10px; }
.vx-confirm-steps { font-size: var(--vx-task-small); line-height: 1.5; margin: 0 0 10px; padding-left: 22px; }
.vx-status-pill[data-tone="danger"] { background: var(--vx-task-danger-soft, #fef3f2); border-color: var(--vx-task-danger, #b42318); color: var(--vx-task-danger, #b42318); }
.vx-status-pill[data-tone="warning"] { background: var(--vx-task-warn-soft, #fffaeb); border-color: #eacb85; color: #7a4d00; }
/* วันที่+ชั่วโมง+นาที (helpdesk/_datetime_24h.html) ในฟอร์มแบบ task: ห่อบรรทัดได้ ไม่ล้นกรอบของขั้น */
[data-vx-task] .vx-form .hd-datetime24 { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
[data-vx-task] .vx-form .hd-datetime24 > * { flex: 1 1 88px; min-width: 0; }
[data-vx-task] .vx-form .hd-datetime24 .hd-datetime24-date { flex: 2 1 170px; }
/* ---------- หัวหน้ารายละเอียดงาน (helpdesk/ticket_detail.html) — ไม่มีแถบซ้าย ปุ่มทำงานต่อ + แถบขั้นของใบ ---------- */
.hd-workspace.hd-workspace-solo { grid-template-columns: minmax(0, 1fr); }
.hd-workspace.hd-workspace-solo .hd-detail-grid > * { min-width: 0; }
.hd-workspace.hd-workspace-solo .hd-detail-grid > .hd-filter-stack { grid-template-columns: minmax(0, 1fr); }
.hd-workspace.hd-workspace-solo .hd-detail-grid > .hd-filter-stack > * { min-width: 0; }
.vx-detail-head { margin: 0 0 10px; }
.vx-detail-head .vx-task-titlebox { flex-wrap: wrap; gap: 8px 12px; }
.vx-detail-head .vx-detail-next { background: transparent; box-shadow: none; display: inline-flex; min-width: 0; padding: 0; position: static; }
.vx-detail-head .vx-detail-next .vx-next-step { font-size: var(--vx-task-control); min-height: 44px; }
.vx-detail-flow { align-items: stretch; display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 6px 0 0; padding: 0; }
.vx-detail-flow li { align-items: center; background: #fff; border: 1px solid var(--vx-task-line); border-radius: 8px; color: var(--vx-task-muted); display: inline-flex; font-size: var(--vx-task-small); gap: 6px; min-height: 40px; padding: 2px 12px; }
.vx-detail-flow li .vx-flow-no { color: inherit; font-size: 22px; }
.vx-detail-flow li.is-done { background: var(--vx-task-ok-soft, #ecfdf3); border-color: #b9e6c9; color: var(--vx-task-ok, #15803d); }
.vx-detail-flow li.is-current { background: var(--vx-task-accent); border-color: var(--vx-task-accent); color: var(--vx-task-accent-ink, #fff); font-weight: 700; }
.vx-detail-flow li.is-skipped, .vx-detail-flow li.is-cancelled { background: #f3f4f6; color: #6b7280; text-decoration: line-through; }
.vx-detail-flow li.is-cancelled { text-decoration: none; font-weight: 700; }
.vx-field-hint { color: var(--vx-task-muted); display: block; font-size: var(--vx-task-small); font-weight: 400; line-height: 1.35; margin-top: 2px; }
.vx-field { align-content: start; display: grid; font-size: var(--vx-task-small); gap: 4px; margin: 0; min-width: 0; }
.vx-field > span { color: var(--vx-task-ink); font-weight: 600; }
.vx-field.is-wide { grid-column: 1 / -1; }
.vx-field :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select, textarea) {
  background: #fff;
  border: 1px solid var(--vx-task-line);
  border-radius: 8px;
  color: var(--vx-task-ink);
  font-size: var(--vx-task-control);
  min-height: 46px;
  padding: 4px 10px;
  width: 100%;
}
.vx-field :is(input, select, textarea):focus { border-color: var(--vx-task-accent); box-shadow: 0 0 0 3px var(--vx-task-soft); outline: none; }
.vx-field .vx-required::after, .vx-required::after { color: var(--vx-task-danger); content: " *"; }
.vx-field .vx-hint { color: var(--vx-task-muted); font-size: 18px; }
.vx-field .hd-datetime24 { display: grid; gap: 6px; grid-template-columns: 1fr 88px 88px; }
.vx-field .hd-datetime24 :is(input, select) { min-height: 46px; }
.vx-savebar {
  align-items: center;
  background: #fff;
  border-top: 2px solid var(--vx-task-accent-line);
  bottom: 0;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 10px 2px;
  position: sticky;
  z-index: 20;
}
.vx-savebar .vx-btn-primary { font-size: var(--vx-task-control); min-height: 50px; padding: 4px 22px; }

/* ---------- dialog: ตัวกรองหัวคอลัมน์ · ทำงานต่อ · toast ---------- */
.vx-dialog {
  border: 1px solid var(--vx-task-line, #d6dfe8);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .22);
  color: var(--vx-task-ink, #1e2b3a);
  font-size: 22px;
  max-height: 88dvh;
  overflow: auto;
  padding: 18px 20px;
  width: min(560px, 96vw);
}
.vx-dialog::backdrop { background: rgba(15, 23, 42, .35); }
.vx-dialog.is-floating { height: fit-content; inset: 0; margin: auto; position: fixed; z-index: 2100; }
.vx-scrim { background: rgba(15, 23, 42, .35); inset: 0; position: fixed; z-index: 2090; }
.vx-dialog h2 { color: var(--vx-task-accent, #1d4ed8); font-size: 26px; margin: 0 0 6px; }
.vx-dialog .vx-dialog-lead { color: var(--vx-task-muted, #566575); font-size: 20px; margin: 0 0 10px; }
.vx-dialog .vx-dialog-next { color: var(--vx-task-muted, #566575); font-size: 20px; margin: -4px 0 8px; }
.vx-dialog .vx-dialog-next b { color: var(--vx-task-ink, #102030); }
.vx-dialog .vx-dialog-note { background: var(--vx-task-soft, #eef3ff); border-radius: 8px; font-size: 20px; line-height: 1.4; margin: 6px 0 8px; padding: 8px 10px; }
.vx-dialog .vx-dialog-note a { font-weight: 700; }
.vx-dialog label { display: grid; font-size: 20px; gap: 4px; margin: 8px 0; }
.vx-dialog label.vx-inline { align-items: center; display: flex; gap: 10px; }
.vx-dialog input[type=checkbox], .vx-dialog input[type=radio] { height: 22px; width: 22px; }
.vx-dialog :is(input[type=text], input[type=search], input[type=number], input[type=date], input[type=datetime-local], select, textarea) {
  border: 1px solid var(--vx-task-line, #d6dfe8);
  border-radius: 8px;
  font-size: 22px;
  min-height: 44px;
  padding: 4px 10px;
  width: 100%;
}
.vx-dialog textarea { min-height: 88px; }
.vx-dialog .vx-required::after { color: var(--vx-task-danger, #c2410c); content: " *"; }
.vx-dialog .vx-dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.vx-dialog .vx-dialog-error { background: var(--vx-task-danger-soft, #fff4ed); border: 1px solid #f2c7ad; border-radius: 8px; color: var(--vx-task-danger, #c2410c); font-size: 20px; margin: 8px 0; padding: 6px 10px; }
.vx-dialog .vx-dialog-error[hidden] { display: none; }
.vx-dialog .vx-sort { display: flex; gap: 8px; margin-bottom: 10px; }
.vx-dialog .vx-sort a, .vx-dialog .vx-sort button { flex: 1; justify-content: center; }
.vx-dialog .vx-range { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.vx-options { border: 1px solid var(--vx-task-line, #d6dfe8); border-radius: 8px; margin: 6px 0; max-height: 320px; overflow: auto; padding: 4px 8px; }
.vx-options label { align-items: center; cursor: pointer; display: flex; font-size: 21px; gap: 10px; margin: 0; padding: 4px 2px; }
.vx-options label input { flex: 0 0 auto; height: 22px; width: 22px; }
.vx-options label b { color: var(--vx-task-muted, #566575); font-variant-numeric: tabular-nums; font-weight: 600; margin-left: auto; }
.vx-options .vx-options-all { border-bottom: 1px solid var(--vx-task-line, #d6dfe8); }
.vx-dialog .vx-more { color: var(--vx-task-muted, #566575); font-size: 18px; }
.vx-toast {
  background: #10263f;
  border-radius: 10px;
  bottom: 24px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .3);
  color: #fff;
  font-size: 21px;
  left: 50%;
  max-width: min(640px, 92vw);
  padding: 10px 16px;
  position: fixed;
  transform: translateX(-50%);
  z-index: 3000;
}
.vx-toast a { color: #bfdbfe; font-weight: 700; margin-left: 10px; }

/* ---------- ระบบสอน: กล่องเลือกหัวข้อของ page_tour.js + ขั้น "ลงมือทำ" คลิกทะลุได้ ---------- */
html[data-vx-task] .dt-tour-topics {
  border: 1px solid var(--vx-task-line);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .22);
  color: var(--vx-task-ink);
  font-size: 22px;
  max-height: 88dvh;
  overflow: auto;
  padding: 18px 20px;
  width: min(620px, 96vw);
}
html[data-vx-task] .dt-tour-topics::backdrop { background: rgba(15, 23, 42, .35); }
html[data-vx-task] .dt-tour-topics h2 { color: var(--vx-task-accent); font-size: 28px; margin: 0 0 4px; }
html[data-vx-task] .dt-tour-topics p { color: var(--vx-task-muted); font-size: 20px; margin: 0 0 12px; }
html[data-vx-task] .dt-tour-topics .dt-tour-list { display: grid; gap: 8px; }
html[data-vx-task] .dt-tour-topics button {
  align-items: center;
  background: #fff;
  border: 1px solid var(--vx-task-line);
  border-radius: 10px;
  color: var(--vx-task-ink);
  cursor: pointer;
  display: flex;
  font-size: 22px;
  font-weight: 600;
  gap: 10px;
  justify-content: space-between;
  min-height: 50px;
  padding: 6px 14px;
  text-align: left;
  width: 100%;
}
html[data-vx-task] .dt-tour-topics button:hover { background: var(--vx-task-soft); border-color: var(--vx-task-accent-line); }
html[data-vx-task] .dt-tour-topics button small { color: var(--vx-task-muted); font-size: 18px; font-weight: 500; }
html[data-vx-task] .dt-tour-topics .dt-tour-all { background: var(--vx-task-accent); border-color: var(--vx-task-accent); color: #fff; margin-bottom: 10px; }
html[data-vx-task] .dt-tour-topics .dt-tour-close { margin-left: auto; margin-top: 12px; min-height: 42px; width: auto; }
html[data-vx-task] .vnix-page-tour-root[data-dt-waiting] .vnix-page-tour-backdrop { pointer-events: none; }
html[data-vx-task] .vnix-page-tour-root[data-dt-waiting] .vnix-page-tour-spotlight { box-shadow: 0 0 0 4px var(--vx-task-accent), 0 0 0 9999px rgba(15, 23, 42, .38); }
html[data-vx-task] .vnix-page-tour-dialog { font-size: 21px; }
html[data-vx-task] .vnix-page-tour-title { font-size: 26px; }
html[data-vx-task] .vnix-page-tour-body { font-size: 21px; }
html[data-vx-task] .vnix-page-tour-button { font-size: 20px; min-height: 42px; }
html[data-vx-task] .vnix-page-tour-do {
  background: var(--vx-task-soft);
  border-radius: 8px;
  color: var(--vx-task-accent);
  display: block;
  font-size: 20px;
  font-weight: 700;
  margin-top: 8px;
  padding: 6px 10px;
}
html[data-vx-task] .vnix-page-tour-do[hidden] { display: none; }

/* ---------- ฟอร์มลูกค้าแจ้งเอง + หน้าติดตามสถานะ (helpdesk/public_new.html · public_status.html) — มือถือเป็นหลัก ---------- */
[data-vx-task="hd.public"] { --vx-task-accent: #1d4ed8; --vx-task-soft: #eef3ff; --vx-task-bright: #93c5fd; --vx-task-accent-line: #bfd3fb; }
.vx-public-card { margin: 0 auto; max-width: 960px; }
.vx-public-intro { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; margin: 6px 0 10px; }
.vx-public-title { color: var(--vx-task-accent); font-size: var(--vx-task-heading); font-weight: 700; line-height: 1.2; margin: 0; }
.vx-public-lead { color: var(--vx-task-muted); font-size: var(--vx-task-small); line-height: 1.45; margin: 4px 0 0; }
.vx-form.vx-public-form { grid-template-columns: minmax(0, 1fr); }
.vx-public-form .vx-form-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.vx-public .vx-field > label { color: var(--vx-task-ink); font-weight: 600; margin: 0; }
[data-vx-task="hd.public"] .vx-field :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), textarea) { scroll-margin-top: 96px; }
[data-vx-task="hd.public"] .vx-field :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), textarea).is-invalid { border-color: var(--vx-task-danger); box-shadow: 0 0 0 3px var(--vx-task-danger-soft); }
[data-vx-task="hd.public"] .vx-field .invalid-feedback { color: var(--vx-task-danger); font-size: var(--vx-task-small); font-weight: 600; margin: 0; }
[data-vx-task="hd.public"] .vx-field input[type=file] { align-items: center; display: flex; padding: 5px 8px; }
[data-vx-task="hd.public"] .vx-field input[type=file]::file-selector-button { background: var(--vx-task-soft); border: 1px solid var(--vx-task-accent-line); border-radius: 6px; color: var(--vx-task-accent); cursor: pointer; font: inherit; font-weight: 600; margin-right: 10px; padding: 2px 12px; }
.vx-public-send { display: grid; gap: 10px; }
.vx-public-send .vx-public-lead { margin: 0; }
.vx-public-send .vx-btn-primary { justify-content: center; justify-self: start; min-height: 54px; min-width: 260px; }
.vx-public-link { display: inline-flex; margin: 0; min-width: 0; }
.vx-public-link input { background: var(--vx-task-soft); border: 1px solid var(--vx-task-accent-line); border-radius: 8px; color: var(--vx-task-ink); font-size: var(--vx-task-small); min-height: 42px; padding: 2px 10px; width: min(520px, 42vw); }
.vx-public-kicker { color: var(--vx-task-muted); font-size: var(--vx-task-small); font-weight: 600; margin: 0; }
.vx-public-card > .vx-form-step { margin-top: 10px; }
.vx-public-card .vx-public-title .vx-status-pill { font-size: var(--vx-task-small); margin-left: 6px; vertical-align: middle; }
[data-vx-task] .vx-status-pill[data-tone="ok"] { background: var(--vx-task-ok-soft); border-color: #b9e6c9; color: var(--vx-task-ok); }
[data-vx-task] .vx-status-pill[data-tone="current"] { background: var(--vx-task-soft); border-color: var(--vx-task-accent-line); color: var(--vx-task-accent); }
.vx-public-now { border-color: var(--vx-task-accent-line); }
.vx-public-now .vx-public-lead { margin: 0 0 8px; }
.vx-public-flow li { flex: 1 1 120px; justify-content: center; }
.vx-public-facts { display: grid; gap: 4px 16px; grid-template-columns: minmax(120px, max-content) 1fr; margin: 0; }
.vx-public-facts dt { color: var(--vx-task-muted); font-weight: 600; }
.vx-public-facts dd { margin: 0; overflow-wrap: anywhere; }
.vx-public-timeline { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.vx-public-timeline li { border-left: 3px solid var(--vx-task-accent-line); display: grid; gap: 2px; padding: 4px 0 10px 14px; position: relative; }
.vx-public-timeline li::before { background: var(--vx-task-accent); border-radius: 50%; content: ""; height: 11px; left: -7px; position: absolute; top: 12px; width: 11px; }
.vx-public-timeline li:not(:first-child)::before { background: #fff; border: 2px solid var(--vx-task-accent-line); }
.vx-public-timeline small { color: var(--vx-task-muted); font-size: var(--vx-task-small); }
.vx-public-timeline p { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .vx-public-send .vx-btn-primary { justify-self: stretch; min-width: 0; width: 100%; }
  .vx-public-link, .vx-public-link input { width: 100%; }
  .vx-public-flow li { flex: 1 1 calc(50% - 4px); justify-content: flex-start; }
  .vx-public-facts { grid-template-columns: 1fr; }
  .vx-public-facts dd { margin-bottom: 6px; }
}

/* ---------- เลือกหลายใบ → มอบหมาย/ตั้งกำหนดส่งทีเดียว (helpdesk/task_list.html) ---------- */
[data-vx-task] .vx-grid .vx-pick { accent-color: var(--vx-task-accent); cursor: pointer; flex: none; height: 20px; margin: 0 8px 0 0; vertical-align: -3px; width: 20px; }
[data-vx-task] .vx-grid tbody tr.is-picked > td,
[data-vx-task] .vx-grid tbody tr.is-picked > td.vx-next-col { background: var(--vx-task-soft); }
.vx-batch-bar {
  align-items: center;
  background: var(--vx-task-soft);
  border: 2px solid var(--vx-task-accent);
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 1px 6px;
}
.vx-batch-bar .vx-btn { min-height: 38px; }
.vx-batch-bar[hidden] { display: none; }
.vx-batch-count { color: var(--vx-task-ink); font-size: var(--vx-task-control); font-weight: 650; margin-right: 4px; }
.vx-batch-count b { color: var(--vx-task-accent); font-variant-numeric: tabular-nums; }

/* จำนวนแถวต่อหน้า (ต่อท้ายแถบเลขหน้า) */
.vx-pager-size { align-items: center; color: var(--vx-task-muted); display: inline-flex; flex-wrap: wrap; font-size: var(--vx-task-small); gap: 2px 6px; margin-left: 8px; }
.vx-pager-size a, .vx-pager-size span[aria-current] { border: 1px solid var(--vx-task-line); border-radius: 6px; min-width: 40px; padding: 0 6px; text-align: center; text-decoration: none; }
.vx-pager-size span[aria-current] { background: var(--vx-task-accent); border-color: var(--vx-task-accent); color: var(--vx-task-accent-ink); font-weight: 700; }

/* ---------- จอเล็ก ---------- */
@media (max-width: 760px) {
  .vx-flowmap-lane { grid-template-columns: 1fr; }
  [data-vx-task] { --vx-task-text: 20px; --vx-task-control: 19px; --vx-task-small: 17px; --vx-task-heading: 26px; --vx-task-number: 24px; }
  .vx-task { padding: 4px 6px 12px; }
  .vx-task-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vx-task-head, .vx-task-head > * { box-sizing: border-box; max-width: 100%; min-width: 0; }
  .vx-task-count { white-space: normal; }
  .vx-task-actions { justify-content: flex-start; }
  .vx-bars a { grid-template-columns: minmax(90px, 140px) 1fr auto; }
}

@media print {
  .vx-task-head .vx-task-actions, .vx-task-cards, .vx-stack-wrap, .vx-flow-tabs, .vx-task-filterbar, .vx-pager, .vx-next-col { display: none !important; }
}