tab-testingroom.css

/* Testing Room — sub-tab ของหน้า QA test
   ใช้ --cyan เป็นสีประจำเหมือนปุ่ม 🧪 ในแท็บ Redmine ที่เป็นต้นทางของใบเทส */

/* sub-tab ใช้ .seg เดิมจาก navrow แต่เล็กลงหน่อย เพราะอยู่ในเนื้อหน้า ไม่ใช่บนแถบ */
.subseg{margin:2px 0 4px}
.subseg button{font-family:inherit;font-size:11px;font-weight:600;color:var(--muted);background:transparent;
  border:1px solid var(--line);border-radius:8px;padding:5px 13px;cursor:pointer;transition:.15s}
.subseg button:hover{color:var(--ink);border-color:var(--cyan)}
.subseg button.on{background:var(--cyan);color:var(--on-accent);border-color:var(--cyan)}

.tr-dir{font-size:9px;color:var(--dim);text-transform:none;letter-spacing:0;font-weight:500}

/* ---- ลิสต์ใบเทส ---- */
.tr-row{-webkit-app-region:no-drag;display:flex;align-items:center;gap:8px;padding:8px 11px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line-soft);border-radius:9px;margin-bottom:5px;transition:.12s}
.tr-row:hover{border-color:var(--cyan)}
.tr-row.sel{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 10%,var(--panel))}
/* รอบเก่าของ issue เดียวกัน — เยื้องเข้าและจางลง ให้เห็นว่าเป็นงานเดียวกันที่เทสมาหลายรอบ */
.tr-row.older{margin-left:18px;opacity:.62}
.tr-id{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;color:var(--amber);flex-shrink:0}
.tr-subj{font-size:12.5px;color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-prog,.tr-done,.tr-fail,.tr-round{font-size:10px;font-weight:600;flex-shrink:0;white-space:nowrap}
.tr-prog{font-family:'JetBrains Mono',monospace;color:var(--muted)}
.tr-done{color:var(--green)}
.tr-fail{color:var(--rose)}
.tr-round{color:var(--dim)}

/* ---- หัวใบ ---- */
.tr-head{background:var(--panel);border:1px solid var(--line-soft);border-left:3px solid var(--cyan);
  border-radius:0 10px 10px 0;padding:11px 13px;margin-bottom:12px}
.tr-head-top{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.tr-meta{font-size:10px;color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-save{font-size:10px;font-weight:600;color:var(--dim);flex-shrink:0}
.tr-save.err{color:var(--rose)}
.tr-subject{font-size:13.5px;line-height:1.5;color:var(--ink)}
.tr-sub{font-size:10px;color:var(--dim);margin-top:4px;word-break:break-all}
.tr-doneat{color:var(--green);font-weight:700}
.tr-tally{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;
  font-size:10.5px;font-weight:600;color:var(--muted)}
.tr-counts{display:flex;gap:10px}
.tr-tally .ok{color:var(--green)}
.tr-tally .no{color:var(--rose)}
.tr-tally .sk{color:var(--dim)}
.tr-tally .sc{color:var(--violet)}
.tr-tally .uj{color:var(--amber)}

/* ---- การ์ดต่อข้อ ---- */
.tr-item{background:var(--panel);border:1px solid var(--line-soft);border-left:2px solid var(--line);
  border-radius:0 9px 9px 0;padding:9px 11px;margin-bottom:7px;transition:.12s}
.tr-item.pass{border-left-color:var(--green)}
.tr-item.fail{border-left-color:var(--rose)}
.tr-item.skip{opacity:.5}
.tr-item-top{display:flex;align-items:center;gap:8px}
.tr-n{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--dim);flex-shrink:0;min-width:12px}
/* ช่องหัวข้อไม่มีกรอบจนกว่าจะโฟกัส — ใบเทสส่วนใหญ่ถูกอ่านมากกว่าถูกแก้ กรอบทุกช่องทำให้อ่านยาก */
.tr-title{flex:1;min-width:0;font-family:inherit;font-size:12.5px;line-height:1.5;color:var(--ink);
  background:transparent;border:1px solid transparent;border-radius:6px;padding:3px 6px;outline:none}
.tr-title:hover{border-color:var(--line-soft)}
.tr-title:focus{border-color:var(--cyan);background:var(--bg)}
.tr-item.skip .tr-title{text-decoration:line-through}
.tr-del{-webkit-app-region:no-drag;flex-shrink:0;width:20px;height:20px;border-radius:6px;border:1px solid transparent;
  background:transparent;color:var(--dim);cursor:pointer;font-size:10px;transition:.12s}
.tr-del:hover{color:var(--rose);border-color:var(--rose)}
.tr-item-actions{display:flex;align-items:center;gap:5px;margin:7px 0 0 20px;flex-wrap:wrap}
.tr-act{-webkit-app-region:no-drag;font-family:inherit;font-size:10.5px;font-weight:600;color:var(--muted);
  background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:4px 13px;cursor:pointer;transition:.12s}
.tr-act:hover{color:var(--ink)}
.tr-act.pass:hover{border-color:var(--green)}
.tr-act.fail:hover{border-color:var(--rose)}
.tr-act.pass.on{background:var(--green);color:var(--on-accent);border-color:var(--green)}
.tr-act.fail.on{background:var(--rose);color:var(--on-accent);border-color:var(--rose)}
.tr-act.skip.on{background:var(--dim);color:var(--on-accent);border-color:var(--dim)}
.tr-by{-webkit-app-region:no-drag;margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;
  font-weight:700;color:var(--cyan);background:transparent;border:1px solid color-mix(in srgb,var(--cyan) 45%,transparent);
  border-radius:6px;padding:3px 9px;cursor:pointer;transition:.12s}
.tr-by:hover{border-color:var(--cyan)}
.tr-run{-webkit-app-region:no-drag;font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--dim);
  background:transparent;border:1px solid var(--line-soft);border-radius:6px;padding:3px 7px;cursor:pointer;transition:.12s}
.tr-run:hover{color:var(--cyan);border-color:var(--cyan)}
/* วันที่ที่ข้อนั้นได้ผล — ไม่มีกรอบ ต่างจาก tr-run ที่เป็นเลขอ้างอิงไปหาที่อื่น */
.tr-date{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--muted);padding:3px 2px}
.tr-note{width:calc(100% - 20px);margin:6px 0 0 20px;font-family:inherit;font-size:11.5px;color:var(--muted);
  background:transparent;border:1px solid transparent;border-radius:6px;padding:3px 6px;outline:none}
.tr-note:hover{border-color:var(--line-soft)}
.tr-note:focus{border-color:var(--cyan);background:var(--bg);color:var(--ink)}
.tr-note::placeholder{color:var(--dim);font-style:italic}

/* ---- ผูกกับชุดเทสอัตโนมัติ ---- */
.tr-tally .tr-pull-all{-webkit-app-region:no-drag;margin-left:auto;font-family:inherit;font-size:10px;font-weight:600;
  color:var(--cyan);background:transparent;border:1px solid color-mix(in srgb,var(--cyan) 45%,transparent);
  border-radius:6px;padding:3px 10px;cursor:pointer;transition:.12s}
.tr-tally .tr-pull-all:hover{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 12%,transparent)}
/* ---- ชุดเทสระบบ ---- */
.tr-kind{font-size:9.5px;font-weight:700;letter-spacing:.06em;color:var(--violet);flex:none;
  border:1px solid color-mix(in srgb,var(--violet) 45%,transparent);border-radius:5px;padding:2px 7px}
.tr-row.sys{border-left-color:var(--violet)}
.tr-tally .tr-tosys{-webkit-app-region:no-drag;font-family:inherit;font-size:10px;font-weight:600;
  background:transparent;color:var(--violet);border-radius:6px;padding:3px 10px;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--violet) 45%,transparent);transition:.12s}
.tr-tally .tr-tosys:hover{border-color:var(--violet);background:color-mix(in srgb,var(--violet) 12%,transparent)}
.tr-newsys{-webkit-app-region:no-drag;width:100%;margin-top:10px;font-family:inherit;font-size:11px;font-weight:600;
  background:transparent;color:var(--violet);border-radius:8px;padding:7px;cursor:pointer;
  border:1px dashed color-mix(in srgb,var(--violet) 45%,transparent);transition:.12s}
.tr-newsys:hover{border-style:solid;background:color-mix(in srgb,var(--violet) 10%,transparent)}
.tr-newsys-form{margin-top:10px;border:1px solid color-mix(in srgb,var(--violet) 45%,transparent);
  border-radius:8px;padding:10px;background:var(--panel-2)}
.tr-newsys-hint{font-size:10.5px;color:var(--dim);line-height:1.6;margin-bottom:7px}
.tr-newsys-act{display:flex;gap:8px;margin-top:8px}
.tr-newsys-act button{-webkit-app-region:no-drag;font-family:inherit;font-size:11px;font-weight:600;
  border-radius:7px;padding:6px 14px;cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--muted)}
.tr-newsys-act button.ok{background:var(--violet);border-color:var(--violet);color:var(--on-accent)}
.tr-newsys-err{font-size:10.5px;color:var(--rose);margin-top:6px}
.tr-newsys-err:empty{display:none}
/* ---- ระบบที่ใช้รัน + สาเหตุที่ fail ---- */
.tr-sys{font-size:9.5px;font-weight:700;letter-spacing:.04em;color:var(--violet);
  border:1px solid color-mix(in srgb,var(--violet) 40%,transparent);border-radius:5px;padding:2px 7px}
.tr-cause{display:flex;align-items:center;gap:6px;margin:6px 0 0 20px;flex-wrap:wrap}
.tr-cause-q{font-size:10px;color:var(--dim)}
.tr-cause-todo{font-size:10px;color:var(--amber)}
.tr-cz{-webkit-app-region:no-drag;font-family:inherit;font-size:10px;font-weight:600;background:transparent;
  border:1px solid var(--line);color:var(--muted);border-radius:5px;padding:2px 9px;cursor:pointer;transition:.12s}
.tr-cz.app:hover,.tr-cz.app.on{color:var(--rose);border-color:var(--rose)}
.tr-cz.script:hover,.tr-cz.script.on{color:var(--violet);border-color:var(--violet)}
.tr-cz.on{background:color-mix(in srgb,currentColor 14%,transparent)}
/* ข้อที่ตรวจแล้วว่าสคริปพัง ไม่ใช่ความผิดของระบบ แถบซ้ายจึงไม่ควรแดงเหมือน fail จริง */
.tr-item.fail.script{border-left-color:var(--violet)}
/* ---- ลำดับการรัน ---- */
.tr-tally .tr-runall{-webkit-app-region:no-drag;font-family:inherit;font-size:10px;font-weight:600;
  margin-left:auto;background:transparent;color:var(--violet);border-radius:6px;padding:3px 10px;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--violet) 45%,transparent);transition:.12s}
.tr-tally .tr-runall:hover{border-color:var(--violet);background:color-mix(in srgb,var(--violet) 12%,transparent)}
/* ปุ่ม ⤓ เคยเป็นตัวแรกของกลุ่มขวา พอ ▶ Run all มาอยู่หน้ามันแล้ว margin-left ต้องย้ายตาม
   ไม่งั้นจะมีสองตัวที่ดัน auto แล้วกลุ่มขวาแตกออกจากกัน */
.tr-tally .tr-pull-all{margin-left:0}
.tr-link .tr-run1{-webkit-app-region:no-drag;font-family:inherit;font-size:10px;font-weight:600;
  background:transparent;color:var(--violet);border-radius:5px;padding:2px 9px;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--violet) 40%,transparent);transition:.12s}
.tr-link .tr-run1:hover{border-color:var(--violet);background:color-mix(in srgb,var(--violet) 12%,transparent)}
#trRun:not(:empty){margin:10px 0 4px}
.rp-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.rp-step{background:var(--panel);border:1px solid var(--line-soft);border-radius:7px;padding:7px 10px}
.rp-line{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;font-size:11.5px}
.rp-n{color:var(--dim)}
.rp-sys{color:var(--violet);font-size:10px;letter-spacing:.03em}
.rp-test{color:var(--ink);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px}
.rp-last{margin-left:auto;font-size:10px}
.rp-last.ok{color:var(--green)}
.rp-last.no{color:var(--rose)}
.rp-last.warn{color:var(--amber)}
.rp-last.none{color:var(--dim)}
.rp-cmd{display:flex;align-items:baseline;gap:8px;margin-top:5px;flex-wrap:wrap}
.rp-cmd code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;color:var(--cyan);
  background:var(--panel-2);border-radius:4px;padding:2px 7px}
.rp-manual{font-size:10.5px;color:var(--amber)}
.rp-cwd{font-size:9.5px;color:var(--dim)}
.rp-warn{margin-top:5px;font-size:10.5px;color:var(--rose)}
/* ---- หน้ากำลังรัน ---- */
.rr-bars{display:flex;gap:4px;margin:8px 0 9px}
.rr-bar{flex:1;height:4px;border-radius:2px;background:var(--line)}
.rr-bar.go{background:var(--violet)}
.rr-bar.ok{background:var(--green)}
.rr-bar.no{background:var(--rose)}
.rr-bar.err{background:var(--amber)}
.rr-now{font-size:11.5px;color:var(--muted);margin-bottom:8px}
.rr-now code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--ink)}
.rr-now b{color:var(--violet);font-size:10px}
.rr-next{color:var(--dim);font-size:10px}
.rr-stopafter{color:var(--amber);font-size:10px}
/* log สูงคงที่และเลื่อนเอง — เนื้อหาโตเรื่อย ๆ ปล่อยให้ยืดจะดันปุ่มยกเลิกตกจอตอนที่ต้องใช้ */
.rr-log{background:var(--panel);border:1px solid var(--line-soft);border-radius:7px;padding:8px 10px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;line-height:1.75;color:var(--muted);
  white-space:pre-wrap;word-break:break-word;height:210px;overflow-y:auto}
/* ---- จบงาน: สรุปผลกลับ Redmine ---- */
/* ทรงเดียวกับ ⤓ ดึงผล แต่ margin-left:auto อยู่ที่ตัวแรกตัวเดียว สามปุ่มจึงเกาะกลุ่มกันชิดขวา */
.tr-tally .tr-finish{-webkit-app-region:no-drag;font-family:inherit;font-size:10px;font-weight:600;
  background:transparent;border-radius:6px;padding:3px 10px;cursor:pointer;transition:.12s}
.tr-tally .tr-finish.ok{color:var(--green);border:1px solid color-mix(in srgb,var(--green) 45%,transparent)}
.tr-tally .tr-finish.ok:hover{border-color:var(--green);background:color-mix(in srgb,var(--green) 12%,transparent)}
.tr-tally .tr-finish.no{color:var(--rose);border:1px solid color-mix(in srgb,var(--rose) 45%,transparent)}
.tr-tally .tr-finish.no:hover{border-color:var(--rose);background:color-mix(in srgb,var(--rose) 12%,transparent)}
#trFinish:not(:empty){margin:10px 0 4px}
.tr-automsg{font-size:10px;color:var(--muted);margin-top:6px;line-height:1.5}
.tr-automsg:empty{display:none}
.tr-link{display:flex;align-items:center;gap:6px;margin:6px 0 0 20px;flex-wrap:wrap}
/* ปุ่มผูกไฟล์กว้างได้เต็มที่แต่ต้องไม่ดันการ์ด — ชื่อไฟล์เทสยาวได้ถึง 40 ตัวอักษร */
.tr-pick{-webkit-app-region:no-drag;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--dim);background:transparent;
  border:1px dashed var(--line);border-radius:6px;padding:3px 8px;cursor:pointer;transition:.12s}
.tr-pick:hover{color:var(--cyan);border-color:var(--cyan)}
.tr-pick.on{color:var(--cyan);border-style:solid;border-color:color-mix(in srgb,var(--cyan) 45%,transparent)}
.tr-pull{-webkit-app-region:no-drag;font-family:inherit;font-size:9.5px;font-weight:600;color:var(--muted);
  background:transparent;border:1px solid var(--line-soft);border-radius:6px;padding:3px 8px;cursor:pointer;transition:.12s}
.tr-pull:hover{color:var(--cyan);border-color:var(--cyan)}
/* เมนูเลือกไฟล์เทส — anchor คือ .tr-link ที่ตั้ง position:relative ไว้ ไม่ใช่ทั้งการ์ด
   เพื่อให้เมนูเกาะปุ่มที่กด ไม่ใช่ลอยไปมุมการ์ด */
.tr-link{position:relative}
.tr-picker{position:absolute;top:26px;left:0;z-index:40;min-width:240px;max-height:260px;overflow-y:auto;padding:4px;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.tr-picker .tp-src{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  font-weight:700;padding:6px 8px 3px}
.tr-picker button{display:block;width:100%;text-align:left;font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--ink);background:transparent;border:0;border-radius:5px;padding:5px 8px;cursor:pointer;white-space:nowrap}
.tr-picker button:hover{background:var(--line-soft)}
.tr-picker .tp-clear{font-family:inherit;color:var(--dim);margin-top:2px;border-top:1px solid var(--line-soft);border-radius:0}

.tr-add{-webkit-app-region:no-drag;width:100%;font-family:inherit;font-size:11.5px;font-weight:600;color:var(--muted);
  background:transparent;border:1px dashed var(--line);border-radius:9px;padding:9px;cursor:pointer;transition:.12s}
.tr-add:hover{color:var(--cyan);border-color:var(--cyan)}
.tr-notes{width:100%;min-height:70px;resize:vertical;font-family:inherit;font-size:12px;line-height:1.6;
  color:var(--ink);background:var(--panel);border:1px solid var(--line-soft);border-radius:9px;
  padding:8px 10px;outline:none}
.tr-notes:focus{border-color:var(--cyan)}
.tr-notes::placeholder{color:var(--dim);font-style:italic}

/* ---- ตารางเวลารันอัตโนมัติ (trschedule.js) ---- */
.tr-sched{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px;
  padding:7px 9px;border:1px solid var(--line);border-radius:8px}
.tr-sched.on{border-color:var(--violet)}
.tr-sched-label{font-size:12px;color:var(--dim);white-space:nowrap}
.tr-sched.on .tr-sched-label{color:var(--violet)}
/* .search ใน widget.html ตั้ง width:100% ไว้ (เหมาะกับช่องค้นหาเต็มแถวในหน้าอื่น) — ที่นี่
   ต้อง override ไม่งั้นสองช่องยืดเต็มบรรทัดคนละแถว กลายเป็นแถวสูงสี่บรรทัดแทนที่จะเป็นแถวเดียว */
.tr-sched select,.tr-sched input[type=time]{width:auto;min-width:0;flex:0 0 auto;padding:3px 6px;font-size:12px}
.tr-sched select:disabled{opacity:.45}
/* ข้อความยาวกว่าที่ว่าง ต้องยุบเองไม่ใช่ดันแถวให้ล้นออกนอกการ์ด */
.tr-sched-hint{font-size:11px;color:var(--dim);flex:1;min-width:0}
.tr-sched-note{display:flex;align-items:flex-start;gap:8px;margin:9px 0;padding:8px 10px;
  border-radius:8px;font-size:12px;line-height:1.5;border:1px solid var(--line)}
.tr-sched-note.go{border-color:var(--green);color:var(--green)}
.tr-sched-note.warn{border-color:var(--amber);color:var(--amber)}
.tr-sched-note.err{border-color:var(--rose);color:var(--rose)}
.tr-sched-note span:nth-child(2){flex:1;min-width:0}
.tr-sched-x{background:none;border:0;color:inherit;opacity:.6;cursor:pointer;padding:0 2px;font-size:12px}
.tr-sched-x:hover{opacity:1}

/* ป้ายบอกว่าใบนี้ตั้งเวลารันเองไว้ — .tr-subj กิน flex:1 อยู่แล้ว ป้ายจึงต้อง flex:0 0 auto
   ไม่งั้นมันจะไปแย่งพื้นที่ชื่อใบซึ่งเป็นสิ่งที่คนกวาดตาหาก่อน */
.tr-sched-tag{flex:0 0 auto;font-size:10.5px;line-height:1;white-space:nowrap;
  padding:3px 6px;border-radius:5px;color:var(--violet);border:1px solid var(--violet)}
.tr-sched-tag{background:none;cursor:pointer;font-family:inherit}
.tr-sched-tag:hover{background:color-mix(in srgb,var(--violet) 15%,transparent)}
/* หยุดไว้ = ยังเห็นว่าตั้งอะไรไว้ แต่ต้องดูออกทันทีว่าไม่ทำงาน */
.tr-sched-tag.off{color:var(--dim);border-color:var(--line);text-decoration:line-through}
.tr-sched-tag.off:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.tr-sched.paused{border-color:var(--line)}
.tr-sched.paused .tr-sched-label{color:var(--dim)}