/* QA Board — ระบบภาพตามแบบที่อนุมัติ (QA Board v2)
   ระยะขอบ 28px · ช่องไฟ 20px · ตัวเลขหลัก 52px · โทนฟ้าหลัก #17538f
   ค่าทั้งหมดวัดจากไฟล์แบบโดยตรง ไม่ได้กะเอา */

:root {
  color-scheme: light dark;

  --bg: #f7f9fc;
  --surface: #ffffff;
  --rail: #ffffff;
  --border: #e2e8f0;
  --border-soft: #eef2f7;
  --text: #1a1d22;
  --muted: #666e7a;
  --dim: #8b93a0;
  --faint: #a6aeba;

  --accent: #17538f;
  --accent-hover: #0f3c6b;
  --accent-soft: #eaf1f9;

  --pass: #2f6b3c;
  --pass-bg: #e8f2e9;
  --fail: #9b2c22;
  --fail-line: #b3352b;
  --fail-bg: #fbeae8;
  --fail-tint: #fdf4f2;
  --block: #8a5510;
  --block-line: #c98a1e;
  --block-bg: #fbf1e0;
  --block-tint: #fdfaf4;
  --idle: #e7ebf1;

  --gap: 20px;
  --pad: 28px;
  --radius: 14px;
  --radius-sm: 9px;
  --font: "IBM Plex Sans Thai", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171b;
    --surface: #1c2026;
    --rail: #1a1e24;
    --border: #2c333c;
    --border-soft: #252b33;
    --text: #e8eaed;
    --muted: #9aa4b0;
    --dim: #7b8590;
    --faint: #6b7580;
    --accent: #6aa5e8;
    --accent-hover: #8bbcf0;
    --accent-soft: #182535;
    --pass: #6bbd7c;
    --pass-bg: #1a2a1f;
    --fail: #f08a7e;
    --fail-line: #e0685a;
    --fail-bg: #2a1917;
    --fail-tint: #241715;
    --block: #e0b25f;
    --block-line: #d9a34a;
    --block-bg: #2a2214;
    --block-tint: #241f14;
    --idle: #333a43;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }

/* ต้องมาก่อนกฎ display อื่น ไม่งั้น element ที่ซ่อนไว้ยังกินพื้นที่ */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 13.5px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
button { font: inherit; }

/* ---------- โครงหน้า ---------- */

.app { display: grid; grid-template-columns: 215px 1fr; min-height: 100vh; }

.rail {
  background: var(--rail);
  border-right: 1px solid var(--border);
  padding: 22px 12px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 14px;
  width: 100%; background: none; border: 0; border-radius: var(--radius-sm);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.brand:hover { background: var(--bg); }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.brand .logo { flex-shrink: 0; }
.brandtext { display: flex; flex-direction: column; line-height: 1.25; }
.brandtext b { font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.brandtext span { font-size: 10.5px; color: var(--dim); }

.navgroup { margin-bottom: 16px; }
.navgroup > .glabel {
  font-size: 10.5px; font-weight: 500; color: var(--faint);
  letter-spacing: 1.05px; padding: 0 10px 7px;
}

.navitem {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 10px; border: 0; border-radius: 8px; background: none;
  color: var(--muted); font-size: 13px; text-align: left; cursor: pointer;
}
.navitem:hover { background: var(--bg); }
.navitem[aria-current="true"] {
  background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 13.5px;
}
.navitem .cnt { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--accent); }
.navitem .cnt:empty { display: none; }

.railfoot {
  margin-top: auto; padding: 14px 10px 0; border-top: 1px solid var(--border);
  color: var(--dim); font-size: 11.5px; line-height: 1.6;
}
.railfoot .stamp { font-family: var(--mono); color: var(--muted); }

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  min-height: 62px; background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; padding: 10px var(--pad);
  flex-wrap: wrap; position: sticky; top: 0; z-index: 20;
}
h1.title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.2px; }
.sub { color: var(--muted); font-size: 12.5px; }
.spacer { flex-grow: 1; }
.topactions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.page { padding: var(--pad); display: flex; flex-direction: column; gap: var(--gap); }

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

.btn, button.action {
  height: 36px; padding: 0 17px; border: 0; border-radius: var(--radius-sm);
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap;
}
.btn:hover, button.action:hover { background: var(--accent-hover); }
.btn:disabled, button.action:disabled { opacity: .5; cursor: default; }
.btn.ghost, button.action.ghost {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
}
.btn.ghost:hover, button.action.ghost:hover { background: var(--bg); }
.btn.sm { height: 30px; padding: 0 13px; font-size: 12.5px; }

/* ปุ่มของการกระทำที่ย้อนกลับไม่ได้
   หน้าตาเป็นปุ่มโปร่งเหมือนปุ่มรองอื่น ๆ ไม่ใช่ลิงก์ขีดเส้นใต้ที่ดูหลุดจากของรอบตัว
   สีแดงเต็มเฉพาะตอนเอาเมาส์ไปวาง ปกติเป็นตัวหนังสือสีแดงบนพื้นขาว
   จะได้ไม่แย่งสายตาไปจากปุ่มบันทึกซึ่งเป็นสิ่งที่ผู้ใช้ต้องกดบ่อยกว่า */
/* ปุ่มยืนยันของการกระทำที่ย้อนกลับไม่ได้ — เป็นปุ่มทึบสีแดงในกล่องยืนยัน */
.btn.danger-solid { background: var(--fail-line); }
.btn.danger-solid:hover { background: var(--fail); }

/* รายละเอียดในกล่องยืนยัน บรรทัดละข้อ */
.confirm-lines { margin: 0 0 18px; font-size: 13px; line-height: 1.9; color: var(--muted); }
.confirm-lines > div:first-child { color: var(--text); font-weight: 600; }
.confirm-lines > div:last-child { color: var(--fail); }

.btn.ghost.danger, button.action.ghost.danger {
  color: var(--fail); border-color: var(--border);
}
.btn.ghost.danger:hover, button.action.ghost.danger:hover {
  background: var(--fail-bg); border-color: var(--fail-line); color: var(--fail);
}

.linkbtn {
  background: none; border: 0; color: var(--accent); cursor: pointer;
  padding: 0 2px; text-decoration: underline; font-size: 12.5px;
}

/* ปุ่มที่ลบของถาวร ต้องดูต่างจากปุ่มทั่วไปตั้งแต่ก่อนกด */
.linkbtn.danger { color: var(--fail-line); }
.linkbtn.danger:hover { color: var(--fail); }

select, input[type="text"], input[type="url"], input[type="email"],
input[type="date"], input[type="number"] {
  height: 36px; padding: 0 13px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px;
}
select.compact { height: 32px; font-size: 12.5px; }
input[type="file"] { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }

/* ---------- การ์ด ---------- */

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
/* ใช้ตัวเลือกแบบลูกหลาน ไม่ใช่ลูกตรง
   บางการ์ดมี div ครอบไว้อีกชั้นเพื่อให้ JS แทนที่เนื้อในทีหลัง เช่น #prevCommitments
   ถ้าใช้ลูกตรง กล่องพวกนั้นจะไม่ได้ระยะขอบ แล้วข้อความไปชิดขอบการ์ด */
.card .cardbody { padding: 22px 24px; }

.cardhead {
  display: flex; align-items: baseline; gap: 12px;
  padding: 18px 24px 0; flex-wrap: wrap;
}
.cardhead + .cardbody,
.cardhead + * > .cardbody:first-child { padding-top: 14px; }
.cardhead h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.1px; }
.cardhead .sub { font-size: 12.5px; }
.cardhead.bordered { padding: 14px 24px; border-bottom: 1px solid var(--border-soft); align-items: center; }

.section-title { font-size: 16px; font-weight: 600; margin: 4px 0 0; letter-spacing: -.1px; }

/* ---------- การ์ดตัวเลขหลัก ---------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--gap); }
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 24px; display: flex; flex-direction: column; gap: 6px;
}
.stat .k { color: var(--muted); font-size: 12.5px; }
.stat .v {
  font-size: 52px; font-weight: 600; letter-spacing: -.035em; line-height: 1.05;
  font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 1px;
}
.stat .v .unit { font-size: 22px; font-weight: 600; letter-spacing: 0; }
.stat .n { color: var(--dim); font-size: 12.5px; line-height: 1.45; }
.stat.alert .v { color: var(--fail); }
.stat.watch .v { color: var(--block); }
.stat.accent .v { color: var(--accent); }

/* ---------- ป้ายสถานะ ---------- */

.pill {
  display: inline-flex; align-items: center; height: 21px; padding: 0 9px;
  border-radius: 999px; font-size: 11.5px; font-weight: 500; white-space: nowrap;
}
.p-pass, .status-passed { background: var(--pass-bg); color: var(--pass); }
.p-fail, .status-failed { background: var(--fail-bg); color: var(--fail); }
.p-block, .status-blocked { background: var(--block-bg); color: var(--block); }
.p-idle, .status-not_executed { background: var(--idle); color: var(--muted); }
.p-info, .status-unverified { background: var(--accent-soft); color: var(--accent); }
.status-pill { display: inline-flex; align-items: center; height: 21px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }

.phase {
  display: inline-flex; align-items: center; height: 21px; padding: 0 10px;
  border-radius: 999px; font-size: 11.5px; background: var(--idle); color: var(--muted); white-space: nowrap;
}
.phase[data-phase="execution"], .phase[data-phase="regression"] { background: var(--accent-soft); color: var(--accent); }
.phase[data-phase="closed"] { background: var(--pass-bg); color: var(--pass); }
.phase[data-phase="on_hold"] { background: var(--block-bg); color: var(--block); }

/* ---------- รายการงาน ---------- */

.rows { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 24px; border-top: 1px solid var(--border-soft);
}
.row:first-child { border-top: 0; }
.row.danger { box-shadow: inset 3px 0 0 var(--fail-line); background: var(--fail-tint); }
.row.warn { box-shadow: inset 3px 0 0 var(--block-line); background: var(--block-tint); }
.row.calm { box-shadow: inset 3px 0 0 var(--border); }
.row .body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex-grow: 1; }
.row .t { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row .d { color: var(--muted); font-size: 12.5px; }
.todo { font-size: 12.5px; }
.todo b { color: var(--accent); font-weight: 600; }

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

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th {
  text-align: left; font-weight: 500; color: var(--muted); font-size: 11.5px;
  padding: 11px 18px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
td { padding: 12px 18px; border-top: 1px solid var(--border-soft); vertical-align: top; }
tbody tr:first-child td { border-top: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--bg); }

/* ---------- แถบความคืบหน้า ---------- */

.bar { height: 8px; border-radius: 4px; background: var(--idle); overflow: hidden; display: flex; margin: 10px 0 8px; }
.bar span { display: block; }
.bar .s-passed { background: var(--accent); }
.bar .s-failed { background: var(--fail-line); }
.bar .s-blocked { background: var(--block-line); }
.bar .s-unverified { background: var(--dim); }

.legend { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }

/* ---------- ตัวเลขย่อย ---------- */

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: 14px; }
.kv .k { color: var(--muted); font-size: 12px; }
.kv .v { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kv .v small { font-size: 12.5px; font-weight: 400; color: var(--dim); }
.up, .delta-good { color: var(--pass); }
.down, .delta-bad { color: var(--fail); }

/* ตัวเลขเรียงเป็นกริด ใช้ในรายงานรายสัปดาห์และหัวโครงการ */
.pair, .weekly-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  gap: 16px;
}
.pair > div .k, .weekly-grid > div .k { color: var(--muted); font-size: 12px; }
.pair > div .v, .weekly-grid > div .v {
  font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.pair > div .v small, .weekly-grid > div .v small { font-size: 12.5px; font-weight: 400; color: var(--dim); }
.pair > div .v, .weekly-grid > div .v { margin-top: 4px; }

/* แต่ละหัวข้อย่อยในการ์ดโครงการของรายงานรายสัปดาห์
   คั่นด้วยเส้นบาง ๆ ให้อ่านเป็นชั้น ๆ แทนที่จะกองรวมกันเป็นพืด */
.weekly-block { padding: 18px 24px; }
.weekly-block + .weekly-block { border-top: 1px solid var(--border-soft); }
.weekly-block > .section-title { font-size: 14px; margin: 0 0 14px; }
.weekly-block > .warnbox, .weekly-block .warnbox:first-child { margin: 0; }

/* ---------- กริด ---------- */

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--gap); }
.grid-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--gap); }
.cards-wide { display: flex; flex-direction: column; gap: var(--gap); }
@media (max-width: 1100px) { .grid-main { grid-template-columns: 1fr; } }

/* ---------- สถานะรายโครงการ (แผงขวา) ---------- */

.projstat { padding: 20px 24px; border-top: 1px solid var(--border-soft); }
.projstat:first-of-type { border-top: 0; }
.projstat .head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.projstat .name { font-size: 14px; font-weight: 600; }
.projstat .due { margin-left: auto; font-size: 12px; color: var(--muted); }
.projstat .due.late { color: var(--fail); font-weight: 600; }
.projstat .big {
  font-size: 34px; font-weight: 600; color: var(--accent);
  letter-spacing: -.03em; line-height: 1.1; display: flex; align-items: baseline; gap: 8px;
}
.projstat .big small { font-size: 12.5px; font-weight: 400; color: var(--dim); letter-spacing: 0; }
.projstat .split { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }

/* ---------- กล่องเตือน ---------- */

.warnbox {
  background: var(--block-tint); border: 1px solid var(--block-bg); border-radius: var(--radius-sm);
  padding: 12px 15px; color: var(--block); font-size: 12.5px;
}
.flag { font-size: 12.5px; padding: 6px 11px; border-radius: var(--radius-sm); display: inline-block; }
.flag.danger { background: var(--fail-bg); color: var(--fail); font-weight: 600; }
.flag.warn { background: var(--block-bg); color: var(--block); }
.flag.info { background: var(--accent-soft); color: var(--accent); }
.flags { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* ---------- ทั่วไป ---------- */

.muted { color: var(--muted); }
.dim { color: var(--dim); }
.mono { font-family: var(--mono); font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.empty { padding: 48px; text-align: center; color: var(--muted); }
a.link { color: var(--accent); }
.filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  /* เว้นระยะจากหัวข้อด้านบนและจากตารางด้านล่าง ไม่ให้แถบกรองติดหัวตาราง
     row-gap มากกว่า column-gap เพราะเวลาแถบตกบรรทัดจะได้ไม่ดูติดกัน */
  row-gap: 12px;
  margin: 6px 0 16px;
}
.card-numbers { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; font-size: 13px; }
.card-numbers .sep { color: var(--border); margin: 0 4px; }
.card-numbers .text-block { color: var(--block); }

/* ---------- แถบบันทึกหมู่ ---------- */

.bulkbar {
  position: sticky; bottom: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 20px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-top: 14px; box-shadow: 0 -2px 14px rgba(20, 35, 60, .06);
}

/* ---------- แจ้งเตือน ---------- */

.notice-stack {
  position: fixed; right: 20px; bottom: 20px;
  display: flex; flex-direction: column; gap: 10px; z-index: 100;
  max-width: min(460px, calc(100vw - 40px));
}
.notice {
  background: var(--surface); border: 1px solid var(--border); border-left-width: 3px;
  border-radius: var(--radius-sm); padding: 12px 14px;
  display: flex; gap: 10px; align-items: flex-start;
  box-shadow: 0 6px 20px rgba(20, 35, 60, .12); font-size: 13px;
}
.notice.info { border-left-color: var(--accent); }
.notice.warn { border-left-color: var(--block-line); background: var(--block-tint); color: var(--block); }
.notice.danger { border-left-color: var(--fail-line); background: var(--fail-tint); color: var(--fail); }
.notice-x { background: none; border: 0; color: inherit; cursor: pointer; font-size: 17px; line-height: 1; padding: 0 2px; opacity: .6; }
.notice-x:hover { opacity: 1; }

/* ---------- module ---------- */

.who-line { display: flex; align-items: center; gap: 8px; margin: 2px 0; font-size: 12px; }
.who-name { min-width: 74px; }
.who-bar { flex: 1; min-width: 46px; height: 6px; background: var(--idle); border-radius: 999px; overflow: hidden; }
.who-bar span { display: block; height: 100%; background: var(--accent); }
.mod-assign { font-size: 12px; margin-top: 5px; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
select.mod-status { height: 30px; font-size: 12px; }
select.mod-status.s-ready { border-color: var(--pass); color: var(--pass); font-weight: 600; }
select.mod-status.s-testing { border-color: var(--accent); color: var(--accent); }
select.mod-status.s-blocked { border-color: var(--fail); color: var(--fail); font-weight: 600; }
select.mod-status.s-done { border-color: var(--border); color: var(--muted); }

/* ---------- ข้อตกลงจากที่ประชุม ---------- */

.commit-list { display: flex; flex-direction: column; }
.commit-row {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 0; border-top: 1px solid var(--border-soft);
}
.commit-row:first-child { border-top: 0; padding-top: 0; }
.commit-row:last-child { padding-bottom: 0; }
.commit-row.overdue {
  background: var(--fail-tint); margin: 0 -12px; padding: 12px;
  border-radius: var(--radius-sm); border-top-color: transparent;
}
/* ชื่อคนกว้างพอดีตัว ไม่ต้องกันคอลัมน์กว้างจนเนื้อหาถูกผลักไปไกล */
.commit-who { flex: 0 0 auto; max-width: 130px; font-weight: 600; }
.commit-what { flex: 1; min-width: 0; font-size: 13px; }
.commit-what > .muted { margin-top: 2px; font-size: 12px; }
.commit-row select { flex: 0 0 auto; max-width: 150px; }
.commit-row .btn { flex: 0 0 auto; }

.meeting-notes { font-size: 13px; white-space: pre-wrap; }
.meeting-notes > .k { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.card > .meeting-notes + .cardbody { padding-top: 0; }
.plaintext {
  width: 100%; font: 12.5px/1.6 var(--mono);
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; resize: vertical;
}

/* ---------- โหลดงาน ---------- */

.person-list { display: flex; flex-direction: column; }
.person-row { display: flex; gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border-soft); }
.person-row:first-child { border-top: 0; }
.person-name { min-width: 120px; font-weight: 600; }
.person-row > div:nth-child(2) { flex: 1; min-width: 0; font-size: 12.5px; }

/* ---------- กราฟ ---------- */

.chart { width: 100%; height: auto; display: block; }
.chart-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--gap); }

/* ---------- ฟอร์ม ---------- */

.form-dialog {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  padding: 24px 26px; min-width: min(460px, calc(100vw - 40px));
  max-height: 85vh; overflow-y: auto;
}
.form-dialog::backdrop { background: rgba(15, 25, 40, .45); }
.form-dialog h3 { margin: 0 0 16px; font-size: 16px; font-weight: 600; }
.form-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.form-row > span { font-size: 12.5px; color: var(--muted); }
.form-row .req { color: var(--fail); }
.form-error { background: var(--fail-bg); color: var(--fail); padding: 10px 13px; border-radius: var(--radius-sm); font-size: 12.5px; margin-bottom: 12px; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 10px; }
.import-preview { background: var(--bg); border-radius: var(--radius-sm); padding: 14px; margin: 14px 0; font-size: 12.5px; }

/* ---------- ผู้ใช้และการแจ้งเตือนบนแถบบน ---------- */

.whoami { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.whoami .avatar { width: 22px; height: 22px; border-radius: 50%; }

.bell {
  position: relative; width: 38px; height: 38px; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.bell:hover { background: var(--bg); color: var(--text); }
.bell-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--fail-line); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
}

.userchip {
  display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px 0 6px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
}
.userchip .av {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
}
.userchip .av img { width: 100%; height: 100%; border-radius: 50%; }
.userchip .who { display: flex; flex-direction: column; line-height: 1.25; }
.userchip .who b { font-size: 12.5px; font-weight: 600; }
.userchip .who span { font-size: 11px; color: var(--muted); }
.userchip a { font-size: 11.5px; }

/* การ์ดตัวเลข 4 ใบตามแบบ */
.stats-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
/* 3 ใบตามแบบ — บังคับให้เต็มแถวเดียว ไม่ให้ยุบเป็น 2+1 ที่จอกว้าง */
.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .stats-3 { grid-template-columns: 1fr; } }

/* กราฟแท่งรายวันในหน้างานที่รับผิดชอบ */
.daybars { display: flex; gap: 6px; align-items: flex-end; height: 130px; }
.daybar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.daybar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.daybar-fill { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; }
.daybar-fill.zero { background: var(--idle); }
.daybar-label { font-size: 10.5px; color: var(--dim); font-variant-numeric: tabular-nums; }

.chipline { display: flex; gap: 8px; flex-wrap: wrap; }
.chipline .pill { height: auto; padding: 5px 10px; line-height: 1.4; }

/* ภาระงานรายบุคคลบนหน้าภาพรวม — แถบเทียบกำลังต่อรอบ */
.wl-list { display: flex; flex-direction: column; gap: 14px; }
.wl-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 12px; align-items: center; }
.wl-name { font-size: 13px; line-height: 1.3; }
.wl-name .muted { font-size: 11.5px; }
.wl-bar {
  position: relative; height: 22px; background: var(--idle);
  border-radius: 5px; overflow: hidden; display: flex;
}
.wl-done { background: var(--accent); }
.wl-left { background: repeating-linear-gradient(45deg, var(--accent-soft), var(--accent-soft) 5px, transparent 5px, transparent 10px); }
.wl-cap { position: absolute; right: 0; top: 0; bottom: 0; border-right: 2px dashed var(--block-line); }
.wl-num { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.wl-num strong { font-size: 16px; }

/* สรุปสำหรับรายงานผู้บริหาร */
.exec-points { display: flex; flex-direction: column; gap: 12px; }
.exec-point { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.7; }
.exec-no {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  background: var(--accent-soft); color: var(--accent);
}
.exec-no.danger { background: var(--fail-bg); color: var(--fail); }
.exec-no.warn { background: var(--block-bg); color: var(--block); }

/* ---------- จอแคบ ---------- */

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; }
  .navgroup { margin-bottom: 10px; }
  .page { padding: 18px; }
  .topbar { padding: 10px 18px; }
  .stat { padding: 18px; }
  .stat .v { font-size: 40px; }
}

/* ---- ฟอร์มสองคอลัมน์ (หน้าบันทึกการประชุม) ---- */
.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.formgrid .form-row.wide { grid-column: 1 / -1; }
@media (max-width: 860px) { .formgrid { grid-template-columns: 1fr; } }

/* ---- แถวรายการตั้งค่า ---- */
.setting-row {
  display: flex; align-items: center; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: 0; padding-bottom: 0; }
.setting-row:first-child { padding-top: 0; }
.setting-row > :first-child { flex: 1; min-width: 0; }
.setting-row .sub { margin-top: 2px; }

/* ---- รูปประจำตัวขนาดใหญ่ (หน้าบัญชีผู้ใช้) ---- */
.av-lg {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 46px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 18px; font-weight: 600;
  overflow: hidden;
}
.av-lg img { width: 100%; height: 100%; object-fit: cover; }

/* ---- เส้นทางนำทาง (breadcrumb) ---- */
.crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  font-size: 12.5px; color: var(--muted); margin-bottom: 14px;
}
.crumbs .sep { color: var(--dim); }
.crumbs .link { color: var(--accent); text-decoration: none; }
.crumbs .link:hover { text-decoration: underline; }

/* ---- ตารางโมดูลย่อในการ์ดโครงการ ---- */
/* อยู่นอก .cardbody จึงต้องกันขอบเอง ไม่งั้นคอลัมน์ขวาสุดจะชนขอบการ์ดจนอ่านไม่ครบ */
.modmini { padding: 0 var(--pad) var(--pad); overflow-x: auto; }
.modmini table { width: 100%; border-collapse: collapse; table-layout: auto; }
.modmini th {
  text-align: left; font-size: 11.5px; font-weight: 500; color: var(--muted);
  padding: 0 10px 8px 0; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.modmini td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
.modmini tr:last-child td { border-bottom: 0; }
.modmini td:last-child, .modmini th:last-child { padding-right: 0; text-align: right; white-space: nowrap; }
.modmini .num { text-align: right; }
.modmini tbody tr:hover td { background: var(--bg); }

/* ---- แถบแบ่งหน้าของตารางยาว ---- */
.pager {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 14px var(--pad); border-top: 1px solid var(--border);
}
.pager-info { font-size: 12.5px; color: var(--muted); }
.pager .btn { min-width: 34px; }
.pager .btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }
.pager-num { padding: 0 10px; }
.pager-num.current {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
}
.pager-num.current:hover { background: var(--accent); }
.pager-gap { color: var(--dim); padding: 0 2px; }
.card > .table-wrap { border-radius: var(--radius) var(--radius) 0 0; }
@media (max-width: 720px) {
  .pager { padding: 12px 16px; }
  .pager-info { width: 100%; }
}

/* ---- ปริมาณงานเทียบกำลังการทดสอบ (ค่าตามไฟล์ออกแบบ) ---- */
.cap-list { display: flex; flex-direction: column; gap: 18px; }
.cap-row { display: flex; align-items: center; gap: 16px; }

.cap-who { width: 150px; flex-shrink: 0; min-width: 0; }
.cap-name { font-size: 13.5px; font-weight: 600; }
.cap-sub { font-size: 12px; color: var(--dim); }

.cap-track {
  flex-grow: 1; position: relative; height: 28px;
  background: var(--idle); border-radius: 7px;
}
.cap-done {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 7px 0 0 7px; background: var(--accent);
}
.cap-left {
  position: absolute; top: 0; bottom: 0; border-radius: 0 7px 7px 0;
  background: repeating-linear-gradient(115deg,
    color-mix(in srgb, var(--accent) 25%, transparent),
    color-mix(in srgb, var(--accent) 25%, transparent) 6px,
    color-mix(in srgb, var(--accent) 8%, transparent) 6px,
    color-mix(in srgb, var(--accent) 8%, transparent) 12px);
}
.cap-done.t-fail { background: var(--fail-line); }
.cap-left.t-fail {
  background: repeating-linear-gradient(115deg,
    color-mix(in srgb, var(--fail-line) 25%, transparent),
    color-mix(in srgb, var(--fail-line) 25%, transparent) 6px,
    color-mix(in srgb, var(--fail-line) 8%, transparent) 6px,
    color-mix(in srgb, var(--fail-line) 8%, transparent) 12px);
}
/* เส้นประกำลังต่อรอบ ยื่นเลยขอบแถบเล็กน้อยให้มองเห็นชัด ตามแบบ */
.cap-limit {
  position: absolute; top: -6px; bottom: -6px; width: 0;
  border-left: 2px dashed var(--dim);
}

.cap-num {
  width: 196px; flex-shrink: 0; text-align: right;
  font-size: 12.5px; white-space: nowrap;
}
.cap-num b { font-variant-numeric: tabular-nums; }
.cap-num .warn-text { color: var(--block); }

/* สัญลักษณ์ในคำอธิบายกราฟ */
.legend i.hatch {
  background: repeating-linear-gradient(115deg,
    color-mix(in srgb, var(--accent) 30%, transparent),
    color-mix(in srgb, var(--accent) 30%, transparent) 3px,
    color-mix(in srgb, var(--accent) 8%, transparent) 3px,
    color-mix(in srgb, var(--accent) 8%, transparent) 6px);
}
.legend i.dashline {
  background: none; border-top: 2px dashed var(--dim);
  border-radius: 0; height: 0; align-self: center;
}

@media (max-width: 900px) {
  .cap-row { flex-wrap: wrap; }
  .cap-who { width: 100%; }
  .cap-num { width: auto; text-align: left; }
}

/* ---- แถบสีซ้ายของการ์ดโครงการและโมดูล ----
   สีบอกสถานะให้เห็นตั้งแต่ยังไม่อ่านตัวหนังสือ
   ใช้ inset shadow แทน border-left เพื่อไม่ให้ความกว้างการ์ดขยับ
   และไม่ต้องแก้ padding ที่ตั้งตามแบบไว้แล้ว */
.card.striped { box-shadow: inset 4px 0 0 0 var(--stripe, var(--accent)); }
.card.striped > .cardhead,
.card.striped > .cardbody,
.card.striped > .weekly-block,
.card.striped > .modmini { padding-left: 28px; }

.card.s-ok       { --stripe: var(--pass); }
.card.s-accent   { --stripe: var(--accent); }
.card.s-warn     { --stripe: var(--block-line); }
.card.s-alert    { --stripe: var(--fail-line); }
.card.s-idle     { --stripe: var(--idle); }

/* ป้ายบอกว่าชื่อที่เห็นยังเป็นรหัส ไม่ใช่ชื่อจริง */
.person-cell { display: inline-flex; align-items: center; gap: 6px; }
.pill.sm { height: 17px; padding: 0 6px; font-size: 10.5px; }

/* ---- แถบสรุปบรรทัดเดียว ----
   ใช้แทนการ์ดตัวเลขในหน้าที่แบบไม่มีการ์ด แต่ยังต้องเห็นตัวเลขสำคัญ */
.inline-summary {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 22px;
  font-size: 13px; color: var(--muted);
}
.inline-summary b {
  color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums;
}
.inline-summary .sep { color: var(--faint); }
.inline-summary .up { color: var(--pass); }
.inline-summary .down { color: var(--fail); }
.inline-summary .warn-text { color: var(--block); }
.inline-summary .accent-text { color: var(--accent); }

/* เวลากำกับแต่ละการแจ้งเตือน */
.note-time { font-weight: 400; font-size: 11.5px; margin-left: 4px; }

/* ---- ช่องวันที่ที่แสดงเป็นไทย ---- */
.date-wrap { position: relative; }
.date-shown {
  width: 100%; height: 36px; padding: 0 13px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px;
  cursor: pointer;
}
.date-shown:hover { border-color: var(--accent); }
/* ช่องวันจริงต้องอยู่ในผังหน้า (ไม่ใช่ display:none) ไม่งั้น showPicker() ใช้ไม่ได้ */
.date-wrap .date-real {
  position: absolute; left: 12px; bottom: 0; width: 1px; height: 1px;
  padding: 0; border: 0; opacity: 0; pointer-events: none;
}

/* แถบสีซ้ายของแถวโมดูลในตารางย่อ บอกความพร้อมตั้งแต่ยังไม่ทันอ่าน */
.modmini tbody tr > td:first-child { border-left: 4px solid transparent; padding-left: 10px; }
.modmini tr.m-blocked  > td:first-child { border-left-color: var(--fail-line); }
.modmini tr.m-not_ready > td:first-child { border-left-color: var(--block-line); }
.modmini tr.m-testing  > td:first-child { border-left-color: var(--accent); }
.modmini tr.m-ready    > td:first-child { border-left-color: var(--pass); }
.modmini tr.m-done     > td:first-child { border-left-color: var(--idle); }

/* กล่องเตือนระดับรุนแรง ใช้ตอนดึงข้อมูลไม่สำเร็จ ต่างจากกล่องเตือนธรรมดา */
.warnbox.alert {
  background: var(--fail-bg); border-color: var(--fail-line); color: var(--fail);
}

/* ---- ช่องค้นหาและปุ่มส่งออก ---- */
.searchbox {
  height: 32px; min-width: 260px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px;
}
.searchbox:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.exportmenu { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---- ช่องลากไฟล์มาวาง ---- */
.dropzone {
  border: 1.5px dashed var(--border); border-radius: var(--radius-sm);
  padding: 20px 16px; text-align: center; cursor: pointer;
  background: var(--bg); color: var(--muted); font-size: 13px;
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone .sub { margin-top: 5px; font-size: 11.5px; }
.attach-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.attach-row {
  display: flex; align-items: center; gap: 10px; font-size: 12.5px;
  padding: 7px 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
}


/* ---------- กล่องตัวเลือกของเว็บเอง ---------- */
/*
  ใช้แทน <select> ของเบราว์เซอร์ ซึ่งวาดเมนูด้วยระบบปฏิบัติการ
  จัดสไตล์ไม่ได้เลย หน้าตาจึงหลุดจากแบบ และต่างกันไปตามเครื่องของแต่ละคน
  select จริงยังอยู่ข้างในแบบซ่อนไว้ เพื่อคงพฤติกรรมของฟอร์มและเครื่องอ่านหน้าจอ
*/
.dd { position: relative; display: inline-block; }
.dd-native {
  position: absolute; opacity: 0; pointer-events: none;
  width: 100%; height: 100%; left: 0; top: 0;
}
.dd-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; height: 36px; padding: 0 11px 0 13px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
}
.dd-btn:hover { border-color: var(--accent); }
.dd-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dd-btn[aria-expanded="true"] { border-color: var(--accent); }
.dd-btn:disabled { opacity: .55; cursor: not-allowed; }
.dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-caret { color: var(--muted); font-size: 13px; line-height: 1; flex-shrink: 0; }

.dd.compact .dd-btn { height: 32px; }
.dd.mod-status .dd-btn { height: 30px; font-size: 12px; }

/* วางแบบ fixed ไม่ใช่ absolute
   กล่องตัวเลือกหลายอันอยู่ในตารางที่มี overflow-x ซึ่งตัดของที่ล้นออกนอกกรอบทิ้ง
   ตำแหน่งจริงคำนวณจาก JS ตอนเปิด เพราะ fixed อ้างจากขอบหน้าจอ ไม่ใช่จากปุ่ม */
.dd-menu {
  position: fixed; z-index: 60;
  max-height: 280px; overflow-y: auto;
  padding: 5px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: 0 10px 28px rgba(16, 32, 64, .14);
}
.dd-opt {
  padding: 8px 11px; border-radius: 6px; font-size: 12.5px;
  cursor: pointer; white-space: nowrap;
}
.dd-opt:hover { background: var(--accent-soft); }
.dd-opt.is-on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }


/* ---------- ปฏิทินเลือกวันของเว็บเอง ---------- */
/*
  ใช้แทน input[type=date] ซึ่งเรียกปฏิทินของระบบปฏิบัติการขึ้นมา
  จัดสไตล์ไม่ได้ ใช้ ค.ศ. เสมอ และหน้าตาต่างกันตามเครื่อง
  ระบบนี้แสดงวันเป็น พ.ศ. ทุกที่ ปฏิทินของเบราว์เซอร์จึงขัดกับที่เหลือทั้งระบบ
*/
.dp { position: relative; display: inline-block; }
.dp-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.dp-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; height: 36px; padding: 0 11px 0 13px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
}
.dp-btn:hover { border-color: var(--accent); }
.dp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dp-label.is-empty { color: var(--muted); }
.dp-icon { font-size: 12px; opacity: .7; flex-shrink: 0; }

.dp-pop {
  position: absolute; z-index: 70; top: calc(100% + 5px); left: 0; width: 268px;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: 0 12px 32px rgba(16, 32, 64, .16);
}
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dp-head b { font-size: 13px; }
.dp-nav {
  width: 26px; height: 26px; border: 0; border-radius: 6px;
  background: none; color: var(--text); font-size: 16px; line-height: 1; cursor: pointer;
}
.dp-nav:hover { background: var(--accent-soft); color: var(--accent); }
.dp-dow, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow span {
  text-align: center; font-size: 11px; color: var(--muted);
  padding-bottom: 5px;
}
.dp-cell {
  height: 32px; border: 0; border-radius: 6px; background: none;
  color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer;
}
.dp-cell.is-blank { cursor: default; }
.dp-cell:not(.is-blank):hover { background: var(--accent-soft); }
.dp-cell.is-today { font-weight: 700; color: var(--accent); }
.dp-cell.is-on { background: var(--accent); color: #fff; font-weight: 600; }
.dp-foot {
  display: flex; justify-content: space-between; gap: 8px;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border-soft);
}
.dp-foot .link { border: 0; background: none; cursor: pointer; font: inherit; font-size: 12px; }


/* ---------- ช่องเลือกไฟล์ของเว็บเอง ---------- */
/*
  ปุ่ม "Choose File" ของเบราว์เซอร์จัดสไตล์ไม่ได้ และขึ้นเป็นภาษาอังกฤษเสมอ
  จึงซ่อน input จริงไว้แล้ววาดปุ่มเอง ค่าที่ได้ยังมาจาก input เดิมทุกอย่าง
*/
.file-pick { display: flex; align-items: center; gap: 10px; min-width: 0; }
.file-native { display: none; }
.file-name {
  font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-name.is-empty { color: var(--muted); }


/* ---------- เมนูผู้ใช้มุมขวาบน ---------- */
/*
  ชิปเดิมวางชื่อกับปุ่มออกจากระบบเรียงกันในแถวเดียว กินที่และกดผิดง่าย
  ตามแบบคือชิปแสดงชื่อกับบทบาท กดแล้วเปิดเมนูที่มีอีเมลเต็มและทางลัด
*/
/* ชิปเดิมกลายเป็นแค่กล่องครอบ ขอบย้ายไปอยู่ที่ปุ่มข้างในแทน */
.userchip.is-plain { border: 0; padding: 0; height: auto; background: none; }

.uc { position: relative; }
.uc-btn {
  display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 10px 0 6px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); font: inherit; color: var(--text); cursor: pointer;
}
.uc-btn:hover { border-color: var(--accent); }
.uc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.uc-btn[aria-expanded="true"] { border-color: var(--accent); }
.uc-who { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.uc-who b { font-size: 12.5px; font-weight: 600; }
.uc-who span { font-size: 11px; color: var(--muted); }
.uc-caret { color: var(--muted); font-size: 13px; line-height: 1; }

.uc-menu {
  position: absolute; z-index: 80; top: calc(100% + 7px); right: 0; min-width: 244px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: 0 14px 36px rgba(16, 32, 64, .16);
  overflow: hidden;
}
.uc-head { padding: 14px 16px 12px; }
.uc-head b { display: block; font-size: 13.5px; font-weight: 600; }
.uc-head span {
  display: block; margin-top: 3px; font-size: 12px; color: var(--muted);
  font-family: ui-monospace, "IBM Plex Mono", monospace;
}
.uc-group { padding: 6px; border-top: 1px solid var(--border-soft); }
.uc-item {
  display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 6px;
  background: none; color: var(--text); font: inherit; font-size: 13px;
  text-align: left; text-decoration: none; cursor: pointer;
}
.uc-item:hover { background: var(--accent-soft); }
.uc-item.is-danger { color: var(--fail); }
.uc-item.is-danger:hover { background: var(--fail-bg); }

/* แถวติ๊กเลือกที่กดได้ทั้งบรรทัด ไม่ใช่กดได้เฉพาะช่องสี่เหลี่ยมเล็ก ๆ */
.checkline {
  display: flex; align-items: flex-start; gap: 9px;
  cursor: pointer; font-size: 12.5px; line-height: 1.6;
}
.checkline input { margin: 3px 0 0; flex-shrink: 0; }