/* WTS Payroll — layout ของแอปจริง
 * ⭐ ไม่ใช้ Tailwind CDN ในระบบจริง (พึ่ง CDN ภายนอก + ช้า) — เขียนคลาสที่ใช้จริงเองทั้งหมด
 * ⭐ โทน/การ์ด/ชิป/ปุ่ม ใช้ของเดิมจาก app.css ที่ยกมาจาก showcase เพื่อให้หน้าตาตรงกับที่ลูกค้าเห็น
 */
* { box-sizing: border-box; }
body { margin: 0; color: rgb(var(--c-ink)); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.shell { display: flex; min-height: 100vh; }

/* ── เมนูข้าง ───────────────────────────────────────────── */
.side {
  width: 260px; flex-shrink: 0; background: rgb(var(--c-card));
  border-right: 1px solid rgb(var(--c-line) / 0.10);
  height: 100vh; position: sticky; top: 0; overflow-y: auto; overscroll-behavior: contain;
}
.side-brand { display: flex; gap: .6rem; align-items: center; padding: 1.1rem 1.1rem 1rem; border-bottom: 1px solid rgb(var(--c-line) / 0.10); }
.side-brand .cf-mark { width: 2.2rem; height: 2.2rem; font-family: "Bai Jamjuree"; font-weight: 700; font-size: .95rem; }
.side-brand b { font-family: "Bai Jamjuree"; font-size: .95rem; display: block; }
.side-brand span { font-size: .72rem; color: rgb(var(--c-muted)); }
.side-nav { padding: .7rem .6rem 2rem; }
.side-sec { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--c-faint)); padding: .9rem .6rem .35rem; }
.side-link { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem .6rem; border-radius: .6rem; font-size: .875rem; color: rgb(var(--c-muted)); }
.side-link:hover { background: rgb(var(--c-ink) / 0.04); color: rgb(var(--c-ink)); }
.side-link.is-active { background: rgb(var(--c-accent) / 0.08); color: rgb(var(--c-accent)); font-weight: 600; }

/* ── แถบบน + เนื้อหน้า ─────────────────────────────────── */
.body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.2rem; border-bottom: 1px solid rgb(var(--c-line) / 0.10); background: rgb(var(--c-card) / .85); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 5; }
.top .who { font-size: .8rem; color: rgb(var(--c-muted)); }
.main { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 1.8rem 1.2rem 4rem; }
.page-head { margin-bottom: 1.4rem; }
.page-head h1 { font-family: "Bai Jamjuree"; font-size: 1.55rem; margin: .35rem 0 0; letter-spacing: -0.01em; }
.page-head p { color: rgb(var(--c-muted)); margin: .5rem 0 0; max-width: 62ch; font-size: .9rem; }

/* ── กริด / ตาราง / ฟอร์ม ─────────────────────────────── */
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.spacer { flex: 1; }

.cf-table-wrap { overflow-x: auto; }
.cf-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.cf-table th { text-align: left; font-size: .72rem; letter-spacing: .04em; color: rgb(var(--c-muted)); font-weight: 600; padding: .6rem .7rem; border-bottom: 1px solid rgb(var(--c-line) / 0.12); white-space: nowrap; }
.cf-table td { padding: .62rem .7rem; border-bottom: 1px solid rgb(var(--c-line) / 0.07); vertical-align: middle; }
/* ⭐ หัวตารางต้องเบนไปทางเดียวกับเนื้อ — .cf-table th ต้องไม่ชนะ utility */
.cf-table th.text-right, .cf-table td.text-right { text-align: right; }
.cf-table th.text-center, .cf-table td.text-center { text-align: center; }
.num { font-variant-numeric: tabular-nums; font-family: "Bai Jamjuree", system-ui, sans-serif; }
/* ⭐ ป้ายสถานะห้ามตกบรรทัด (คำไทยไม่มีเว้นวรรค เบราว์เซอร์ตัดกลางคำ) */
.cf-chip { white-space: nowrap; }

.field { display: flex; flex-direction: column; gap: .3rem; }
.field label { font-size: .78rem; color: rgb(var(--c-muted)); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .9rem; padding: .58rem .7rem; border-radius: .6rem;
  border: 1px solid rgb(var(--c-line) / 0.18); background: rgb(var(--c-card)); color: rgb(var(--c-ink));
  min-height: 44px; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid rgb(var(--c-accent) / .35); outline-offset: 1px; border-color: rgb(var(--c-accent) / .5); }
.field .hint { font-size: .72rem; color: rgb(var(--c-faint)); }


@media (max-width: 1024px) {
  .side { position: fixed; left: 0; top: 0; z-index: 30; transform: translateX(-100%); transition: transform .2s; }
  .side.is-open { transform: none; box-shadow: var(--shadow-md); }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .main { padding: 1.2rem .9rem 3rem; }
}
.only-mobile { display: none; }
@media (max-width: 1024px) { .only-mobile { display: inline-flex; } }

/* ---------- ชิ้นส่วนที่ใช้ร่วมกันทุกหน้า (สาย B) ----------
   ⭐ ทุกคลาสที่ ui.js เขียนออกมา ต้องมี CSS อยู่ในไฟล์นี้จริง
      เคยพลาดมาแล้ว: เขียน class ที่ไฟล์นั้นไม่มี → ตกไปใช้ค่าเริ่มต้นของเบราว์เซอร์แบบเงียบ ๆ */

/* ป้ายสถานะ — ห้ามตกบรรทัด คำไทยไม่มีเว้นวรรค เบราว์เซอร์จะตัดกลางคำ */
.chip { display:inline-block; white-space:nowrap; font-size:.72rem; line-height:1.5;
  padding:.15rem .5rem; border-radius:.5rem; border:1px solid rgb(var(--c-line) / .16);
  background:rgb(var(--c-ink) / .03); color:rgb(var(--c-muted)); }
.chip-good { background:rgb(16 185 129 / .08); border-color:rgb(16 185 129 / .3); color:#0f766e; }
.chip-warn { background:rgb(234 179 8 / .1); border-color:rgb(234 179 8 / .34); color:#92660b; }
.chip-bad  { background:rgb(239 68 68 / .07); border-color:rgb(239 68 68 / .28); color:#b1453a; }
.chip-ink  { background:rgb(var(--c-ink) / .06); border-color:rgb(var(--c-ink) / .16); color:rgb(var(--c-ink)); }

.cf-table td.text-right { text-align:right; }
.muted { color:rgb(var(--c-faint)); }
.empty-state { padding:2rem 1rem; text-align:center; color:rgb(var(--c-faint)); font-size:.85rem;
  border:1px dashed rgb(var(--c-line) / .2); border-radius:.9rem; }
.notice { margin:0 0 1rem; }
tr.is-clickable { cursor:pointer; }
tr.is-clickable:hover td { background:rgb(var(--c-ink) / .022); }

/* แถบเครื่องมือเหนือตาราง */
.toolbar { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:0 0 1rem; }
.toolbar .spacer { flex:1; }
.toolbar input[type="search"] { min-height:44px; min-width:min(20rem, 100%); font:inherit; font-size:.9rem;
  padding:.55rem .75rem; border-radius:.6rem; border:1px solid rgb(var(--c-line) / .18); background:rgb(var(--c-card)); }

/* แถบเมนูในหน้า (สร้างใหม่ / รายการทั้งหมด / ประวัติ) */
.tabs { display:flex; gap:.4rem; flex-wrap:wrap; margin:0 0 1.2rem; border-bottom:1px solid rgb(var(--c-line) / .1); }
.tabs a { padding:.5rem .85rem; font-size:.85rem; color:rgb(var(--c-muted)); text-decoration:none;
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; }
.tabs a.is-active { color:rgb(var(--c-ink)); border-bottom-color:rgb(var(--c-accent)); font-weight:500; }

/* กล่องฟอร์มและกล่องเนื้อหา */
.panel { border:1px solid rgb(var(--c-line) / .1); border-radius:1rem; background:rgb(var(--c-card));
  padding:1.15rem 1.2rem; box-shadow:var(--shadow-sm); }
.panel + .panel { margin-top:1rem; }
.panel h2 { font-family:"Bai Jamjuree"; font-size:.98rem; margin:0 0 .9rem; }
.panel-foot { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem; }

/* รายการ ป้ายชื่อ-ค่า สำหรับหน้ารายละเอียด */
.dl { display:grid; grid-template-columns:minmax(7rem,auto) 1fr; gap:.5rem .9rem; font-size:.875rem; }
.dl dt { color:rgb(var(--c-muted)); }
.dl dd { margin:0; color:rgb(var(--c-ink)); }

/* ผู้ใช้มุมขวาบน */
.who-box { display:flex; align-items:center; gap:.6rem; font-size:.8rem; }
.who-box b { font-weight:500; }
.who-box .who-sub { color:rgb(var(--c-faint)); font-size:.72rem; display:block; }

@media (max-width: 700px) {
  .dl { grid-template-columns:1fr; gap:.15rem; }
  .dl dd { margin-bottom:.6rem; }
}

/* หน้าตรวจไฟล์ (C4) — ข้อสังเกตทีละข้อ พร้อมปุ่มตัดสินของตัวเอง */
.review-row { display:flex; gap:1rem; align-items:flex-start; justify-content:space-between;
  padding:.85rem 0; border-bottom:1px solid rgb(var(--c-line) / .08); }
.review-row:last-child { border-bottom:0; }
.review-head { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; margin-bottom:.35rem; }
.review-msg { font-size:.875rem; line-height:1.55; color:rgb(var(--c-ink)); }
.review-actions { display:flex; gap:.4rem; flex-wrap:wrap; justify-content:flex-end; flex-shrink:0; }
.review-actions .cf-btn { white-space:nowrap; }
@media (max-width: 700px) {
  .review-row { flex-direction:column; gap:.6rem; }
  .review-actions { justify-content:flex-start; }
}

/* ---- ตัวควบคุมขนาดเล็กในตาราง (หน้าตั้งค่าเงินได้/เงินหัก · เครื่องคำนวณ) ----
   ⭐ ต้องมีจริงในไฟล์นี้ ไม่ใช่แค่เขียน class ในโค้ด
     class ที่ไม่มี CSS รองรับ = ช่องตกไปใช้หน้าตาเริ่มต้นของเบราว์เซอร์ ซึ่งบนมือถือดูเหมือนกดไม่ได้ */
.cf-input-sm { padding:.35rem .5rem; font-size:.8rem; border-radius:.5rem; min-height:2.1rem; }
select.cf-input-sm { max-width:14rem; }
input.cf-input-sm { max-width:9rem; }
.cf-btn-sm { padding:.3rem .65rem; font-size:.78rem; border-radius:.5rem; }
.text-right { text-align:right; }

/* รหัสรายการ — ต้องอ่านออกว่าเป็นตัวอักษรอังกฤษล้วน ๆ ไม่ใช่ชื่อไทย */
code.code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem;
  background:rgb(var(--c-ink) / .05); border-radius:.35rem; padding:.1rem .35rem; white-space:nowrap; }

/* กล่องพับ "เพิ่มรายการใหม่" */
details.panel > summary { cursor:pointer; list-style:none; font-size:.9rem; }
details.panel > summary::-webkit-details-marker { display:none; }
details.panel > summary::before { content:"+ "; color:rgb(var(--c-accent)); font-weight:600; }
details.panel[open] > summary::before { content:"− "; }

@media (max-width: 720px) {
  select.cf-input-sm, input.cf-input-sm { max-width:100%; }
}

/* ปุ่มเปิดตาดูรหัสผ่าน — ปุ่มนั่งทับในช่องเดียวกัน ไม่ดันช่องให้แคบลง
   ⭐ input ต้องเว้นที่ทางขวาให้ปุ่ม ไม่งั้นตัวอักษรวิ่งไปอยู่ใต้ปุ่ม */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 4.2rem; }
.pw-eye {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  min-height: 34px; padding: 0 .6rem; border-radius: .45rem;
  border: 1px solid rgb(var(--c-line) / .18); background: rgb(var(--c-surface));
  color: rgb(var(--c-muted)); font: inherit; font-size: .76rem; cursor: pointer;
}
.pw-eye:hover { color: rgb(var(--c-ink)); border-color: rgb(var(--c-line) / .35); }
.pw-eye:focus-visible { outline: 2px solid rgb(var(--c-accent) / .5); outline-offset: 1px; }
.pw-eye[aria-pressed="true"] { color: rgb(var(--c-accent)); border-color: rgb(var(--c-accent) / .45); }