/* PANN HR — mobile-first · ไม่มี build step
   สี แบบอักษร รัศมี เงา มาจาก pann-design.css (ระบบดีไซน์ PANN v1.0 · โหลดก่อนไฟล์นี้) — ไฟล์นี้ห้ามมีค่าสีตรง ๆ
   ข้อยกเว้นสองกลุ่ม: (1) สีแบรนด์ภายนอกที่ต้องตรงตามเจ้าของ (ปุ่ม LINE)  (2) ตัวเอกสารที่พิมพ์ (.slip .pd-* .lt-* และ @media print) ซึ่งต้องหน้าตาเดิม */
:root {
  /* เลิกใช้ — หน้าที่ปรับแล้วใช้ --pann-* ตรง · ตัวแปรชุดเดิมนี้เป็นทางผ่านชั่วคราวให้หน้าที่ยังไม่ได้ปรับเปลี่ยนสีตามทันที (งาน 111) */
  --brand: var(--pann-brand);
  --brand-dark: var(--pann-brand-dark);
  --brand-soft: var(--pann-brand-tint);
  --ink: var(--pann-fg);
  --ink-soft: var(--pann-fg-muted);
  --muted: var(--pann-fg-muted);
  --line: var(--pann-line);
  --bg: var(--pann-bg);
  --card: var(--pann-surface);
  --ok: var(--pann-success);
  --ok-soft: var(--pann-success-tint);
  --warn: var(--pann-attention);
  --warn-soft: var(--pann-attention-tint);
  --bad: var(--pann-danger);
  --bad-soft: var(--pann-danger-tint);
  --radius: var(--pann-r-card);
  --shadow: var(--pann-shadow);
  --tap: 48px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--pann-bg);
  color: var(--pann-fg);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  padding-bottom: calc(var(--pann-tabbar-real, calc(var(--pann-tabbar-h) + env(safe-area-inset-bottom, 0px))) + var(--pann-s2));   /* งาน 211z: บรรทัดสุดท้ายไม่ถูกแถบเมนูล่างบัง (รวมขอบล่างของเครื่อง) */
}
a { color: var(--pann-brand-ink); text-decoration: none; }
h1 { font-size: var(--pann-t-h1); margin: 0 0 12px; }
h2 { font-size: var(--pann-t-h2); margin: 0 0 10px; }
h3 { font-size: 1rem; margin: 0 0 8px; }
small, .muted { color: var(--pann-fg-muted); }
small { font-size: var(--pann-t-small); }
.hidden { display: none !important; }

/* ---------------------------------------------------------------- เปลือกหน้า
   แถบซ้าย (คอม) = .pann-sidebar · แถบล่าง (มือถือ) = .pann-tabbar — หน้าตามาจาก pann-design.css ที่นี่มีแค่การจัดวางของ PANN HR */
/* งาน 171 (v1.3): หัวหน้า = .pann-header ของระบบดีไซน์ (พื้นขาว สูงตาม --pann-header-h) — ที่นี่มีแค่ระยะของ PANN HR · หน้าที่ยังไม่มีผู้ใช้ (ก่อนเข้าสู่ระบบ) ใช้ .topbar เฉย ๆ */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--pann-s3);
  padding: 0 var(--pann-gutter); background: var(--pann-surface); border-bottom: 1px solid var(--pann-line);
  min-height: var(--pann-header-h);
}
.brand { display: flex; align-items: center; gap: var(--pann-s3); font-weight: 700; color: var(--pann-fg); white-space: nowrap; text-decoration: none; }
/* บริษัทที่กำลังทำงานอยู่ (ข้อความนิ่ง ถัดจากโลโก้) — ป้ายเล็ก + ชื่อ · โลโก้ของบริษัทอยู่ซ้ายสุดของกลุ่มนี้ */
.pann-header__ctx.emp-name { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--pann-s2); align-items: center; min-width: 0; font-size: var(--pann-t-body); color: var(--pann-fg);
  padding-left: var(--pann-s3); border-left: 1px solid var(--pann-line); }
.pann-header__ctx.emp-name small { grid-column: 2; grid-row: 1; }
.pann-header__ctx.emp-name b { grid-column: 2; grid-row: 2; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pann-header__ctx.emp-name .emp-logo { grid-column: 1; grid-row: 1 / span 2; }
/* งาน 207: เลือกวันหยุดประจำเดือน — ปฏิทินของพนักงาน (ช่องที่กดไม่ได้ = เทา/ลาย) · ปฏิทินรวม (ชื่อติดซ้าย เลื่อนซ้ายขวาได้) */
.do-tabs { margin-bottom: var(--pann-s3); }
.do-roundbar { align-items: center; margin-bottom: var(--pann-s3); }
.do-mine-card { max-width: 460px; margin: 0 auto; display: grid; gap: var(--pann-s3); }
.do-roundsel { max-width: 280px; }
.do-count { grid-template-columns: 1fr auto; align-items: center; background: var(--pann-brand-tint); }
.do-legend { display: flex; flex-wrap: wrap; gap: var(--pann-s3); font-size: var(--pann-t-small); color: var(--pann-fg-muted); margin: var(--pann-s2) 0; }
.do-key::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; border: 1px solid var(--pann-line); }
.do-week, .do-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.do-week span { text-align: center; font-size: var(--pann-t-small); color: var(--pann-fg-muted); }
.do-cell { min-height: 54px; border: 1px solid var(--pann-line); border-radius: var(--pann-r-ctl); background: var(--pann-surface); text-align: left; padding: 4px 6px; font: inherit; color: var(--pann-fg); cursor: pointer; display: grid; align-content: start; }
.do-cell small { font-size: 11px; line-height: 1.2; color: var(--pann-fg-muted); }
.do-cell:disabled { cursor: not-allowed; }
.do-empty { border: 0; background: none; }
.do-cell.do-sun b, .do-table th.do-sun { color: var(--pann-danger); }
.do-cell.do-mine, .do-key.do-mine::before { background: var(--pann-success-tint); border-color: var(--pann-success); }
.do-cell.do-mine small { color: var(--pann-success); }
.do-cell.do-full, .do-key.do-full::before { background: var(--pann-bg); color: var(--pann-fg-muted); }
.do-cell.do-blocked, .do-key.do-blocked::before, .do-table td.do-blocked { background: repeating-linear-gradient(135deg, var(--pann-bg) 0 4px, var(--pann-line) 4px 6px); color: var(--pann-fg-muted); }
.do-cell.do-cover, .do-key.do-cover::before { background: var(--pann-attention-tint); }
.do-wrap { overflow: auto; }
.do-table { border-collapse: collapse; font-size: var(--pann-t-small); }
.do-table th, .do-table td { border: 1px solid var(--pann-line); padding: 4px; text-align: center; white-space: nowrap; min-width: 38px; }
.do-table tbody th, .do-table thead th:first-child, .do-table tfoot th { position: sticky; left: 0; background: var(--pann-surface); text-align: left; z-index: 1; }
.do-table td.do-off, .do-key.do-off::before { background: var(--pann-danger-tint); color: var(--pann-danger); }
.do-table td.do-covers, .do-key.do-covers::before { background: var(--pann-brand-tint); color: var(--pann-brand-ink); }
.do-table td.do-covers { white-space: normal; font-size: 11px; line-height: 1.2; max-width: 64px; }
.do-table td.do-bad { background: var(--pann-danger-tint); color: var(--pann-danger); font-weight: 600; }
.do-table td[data-emp] { cursor: pointer; }
.do-round .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--pann-s3); }
.do-round .form-grid label, .do-setup .form-grid label { display: grid; gap: var(--pann-s1); }
.do-setup .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--pann-s3); margin: var(--pann-s3) 0; }
/* งาน 206: กรอกรายการหลายคน — ตารางในกล่องกว้าง · ช่องที่แก้ = พื้นสี "ต้องทำ" · ตัวเลขผิด = ขอบแดง */
.pb-modal .pb-tools { align-items: center; }
.pb-wrap { max-height: 55vh; overflow: auto; }
.pb-table input[data-emp] { width: 9em; text-align: right; }
.pb-table input.is-changed { background: var(--pann-attention-tint); border-color: var(--pann-attention); }
.pb-table input.is-bad { border-color: var(--pann-danger); }
.pb-table tfoot th { position: sticky; bottom: 0; background: var(--pann-surface); }
.pb-reason { display: grid; gap: var(--pann-s1); margin-top: var(--pann-s3); }
html.m-ui .pb-table .pb-dept { display: none; }
.pb-miss { display: flex; flex-wrap: wrap; gap: var(--pann-s2); align-items: center; margin-top: var(--pann-s2); }
/* งาน 205z: บัญชีที่ยังไม่ผูกบัญชี PANN = หน้าผูกเต็มจอ (ซ่อนทุกอย่างของแอปข้างหลัง) */
body.link-walled > :not(.link-wall) { display: none !important; }
.link-wall { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--pann-s4); background: var(--pann-bg); overflow-y: auto; }
.link-wall__card { width: 100%; max-width: 440px; text-align: center; display: grid; gap: var(--pann-s3); justify-items: center; }
.link-wall__card h1 { font-size: var(--pann-t-h1); margin: 0; }
.link-wall__card p { margin: 0; }
.link-wall__card .pann-btn { width: 100%; }
.link-wall__msg { color: var(--pann-danger); min-height: 1em; }
.link-wall__out { color: var(--pann-brand-ink); }
/* งาน 203: มุมซ้ายบน = ตัวสลับบริษัท — ชิ้นกลางวาดใน #firm-menu · ทางสำรองของแอป = ปุ่มชื่อบริษัท ▾ (แผ่นรายการบริษัท) */
.firm-host { display: flex; align-items: center; gap: var(--pann-s3); min-width: 0; }
.lang-host { flex: none; display: flex; align-items: center; }
button.pann-header__ctx.emp-pick { background: none; border: 0; border-left: 1px solid var(--pann-line); border-radius: 0; font: inherit; text-align: left; cursor: pointer; }
button.pann-header__ctx.emp-pick { grid-template-columns: auto minmax(0, 1fr) auto; }
button.pann-header__ctx.emp-pick::after { content: "▾"; grid-column: 3; grid-row: 2; color: var(--pann-fg-muted); font-size: var(--pann-t-small); }
button.pann-header__ctx.emp-pick:hover b, button.pann-header__ctx.emp-pick:focus-visible b { color: var(--pann-brand-ink); }
/* งาน 185: ป้าย "<สำนักงาน> ดูแลให้" ใต้ชื่อบริษัท (บริษัทที่สำนักงานบัญชีสร้างให้) */
.pann-header__ctx.emp-name small.emp-managed { grid-column: 2; grid-row: 3; color: var(--pann-brand-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* งาน 265: รายการบริษัทของทางสำรอง หน้าตาเท่าตัวสลับของชิ้นกลาง — ค้นหาบนสุด · วงกลมตัวอักษร · ✓ บริษัทปัจจุบัน · ป้าย "จากสำนักงาน" · "เพิ่มบริษัท" ท้ายรายการ
   (อยู่ในแผ่น .m-sheet ของ mobile.js — selector ซ้อน .m-sheet-item เพื่อชนะกฎของแผ่นที่อยู่ท้ายไฟล์) */
.firm-pick { display: flex; flex-direction: column; gap: var(--pann-s1); }
.firm-pick__search { margin-bottom: var(--pann-s2); }
.m-sheet-item.firm-pick__item { display: flex; align-items: center; gap: var(--pann-s3); padding: 8px 12px; }
.m-sheet-item.firm-pick__item[hidden], .firm-pick__group[hidden] { display: none; }
.firm-pick__av { flex: none; width: 36px; height: 36px; font-size: var(--pann-t-small); }
.firm-pick__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.firm-pick__badge { display: inline-block; padding: 0 var(--pann-s2); border-radius: var(--pann-r-pill); background: var(--pann-brand-tint); color: var(--pann-brand-ink); font-weight: 500; white-space: nowrap; }
.firm-pick__check { flex: none; color: var(--pann-brand-ink); font-weight: 700; }
.m-sheet-item.firm-pick__item.active { background: var(--pann-brand-tint); color: var(--pann-brand-ink); }
.m-sheet-item.firm-pick__add { border-top: 1px solid var(--pann-line); border-radius: 0 0 var(--pann-r-ctl) var(--pann-r-ctl); color: var(--pann-brand-ink); font-weight: 500; }
.firm-pick__add .firm-pick__av { background: var(--pann-surface); border-style: dashed; }
.firm-pick__none { padding: var(--pann-s3); margin: 0; }
/* คอม: กล่องลอยใต้ชื่อบริษัทมุมซ้ายบน (เหมือนชิ้นกลาง) แทนแผ่นล่าง · มือถือ (html.m-ui) = แผ่นเลื่อนขึ้นจากล่างตามเดิม */
html:not(.m-ui) .m-sheet-back.firm-pick-back { align-items: flex-start; justify-content: flex-start; background: transparent; }
html:not(.m-ui) .firm-pick-back .m-sheet {
  margin: calc(var(--topbar-h, 64px) + var(--pann-s1)) 0 0 var(--pann-gutter); width: 360px; max-height: calc(100vh - var(--topbar-h, 64px) - var(--pann-s6)); border: 1px solid var(--pann-line);
  border-radius: var(--pann-r-card); padding: var(--pann-s2) var(--pann-s3) var(--pann-s3); animation: none;
}
html:not(.m-ui) .firm-pick-back .m-sheet::before { display: none; }
@media (max-width: 520px) { .pann-header__logo > span { display: none; } }
/* งาน 221: ชื่อบริษัทบนหัว — คอม = ชื่อเต็มบรรทัดเดียว · จอ ≤ 720px = ไม่มีป้าย "บริษัท" ชื่อแบบสั้นขึ้นได้ 2 บรรทัดแล้วค่อยตัดท้าย (ไม่ตัดเหลือคำเดียว) */
button.pann-header__ctx.emp-plain { background: none; border: 0; border-left: 1px solid var(--pann-line); border-radius: 0; font: inherit; text-align: left; cursor: default; }
.pann-header__ctx.emp-name .emp-short { display: none; }
@media (max-width: 720px) {
  .pann-header__ctx.emp-name > small:first-of-type { display: none; }
  .pann-header__ctx.emp-name b { grid-row: 1 / span 2; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.25; overflow-wrap: anywhere; }
  .pann-header__ctx.emp-name .emp-full { display: none; }
  .pann-header__ctx.emp-name .emp-short { display: inline; }
  button.pann-header__ctx.emp-pick::after { grid-row: 1 / span 2; align-self: center; }
  button.pann-header__ctx.emp-plain { cursor: pointer; }
}
/* งาน 134 (v1.2): ตราแอป = ไฟล์ไอคอนจริง icons/hr.svg (พื้นสีแบรนด์ + จุดมัสตาร์ดอยู่ในไฟล์) — ไม่วาดเองในหน้า */
.brand-mark { width: 40px; height: 40px; display: block; flex: none; border-radius: 11px; }
.topbar .spacer { flex: 1; }
/* งาน 157: รูป/อักษรย่อของผู้ใช้ที่มุมขวาบน — รูปโปรไฟล์กลางของบัญชี PANN ถ้ามี ไม่มี = อักษรย่อบนพื้นสีของแอป */
.me-chip { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  background: var(--pann-brand-tint); border: 1px solid var(--pann-brand-line); color: var(--pann-brand-ink); font-weight: 600; font-size: 15px; line-height: 1; text-decoration: none; }
.me-chip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.me-chip.has-img .me-chip__img { opacity: 1; }
.me-chip.has-img { border-color: var(--pann-line); }
a.me-chip:hover, a.me-chip:focus-visible { border-color: var(--pann-brand-ink); }
/* งาน 168z: เมนูบัญชีกลางของบัญชี PANN (มุมขวาบน) — ขึ้นสำเร็จ (html.acct-v2) จึงซ่อนของเดิมของแอปที่ซ้ำกัน */
.acct-host { flex: none; }
html.acct-v2 #me-chip, html.acct-v2 #logout-link, html.acct-v2 #more-logout { display: none; }
.acct-me { display: flex; align-items: center; gap: 12px; }
.acct-me-more { margin: 8px 2px 16px; }
.me-chip--big { width: 64px; height: 64px; font-size: 26px; }
.me-photo { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.emp-name { font-size: var(--pann-t-small); color: var(--pann-fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pann-sidebar { display: none; }
.main { max-width: 960px; margin: 0 auto; padding: var(--pann-s4) var(--pann-gutter); }

/* แถบล่าง: ระบบดีไซน์กำหนด 4 ช่อง แต่แอปยังมี 5 แท็บ (ยังไม่ลดแท็บในงาน 111) → แบ่งช่องเท่ากันตามจำนวนแท็บจริง */
.pann-tabbar { z-index: 20; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.pann-tabbar a { position: relative; align-content: center; min-height: var(--tap); }
.pann-tabbar a.is-active { font-weight: 600; }
.pann-tabbar svg { width: 22px; height: 22px; }
/* ป้ายจำนวนงานค้าง = สีอุ่น "ต้องทำ" (แดงสงวนไว้สำหรับข้อผิดพลาด/ลบ) */
.badge {
  display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--pann-attention-tint);
  color: var(--pann-attention); font-size: var(--pann-t-tab); line-height: 18px; text-align: center; font-weight: 700;
}
.pann-tabbar .badge { position: absolute; top: 2px; right: calc(50% - 24px); }

@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .pann-tabbar { display: none; }
  .layout { display: grid; grid-template-columns: var(--pann-sidebar-w) minmax(0, 1fr); }
  /* เมนูมีสิบกว่ารายการ → ระยะห่างแน่นกว่าค่ากลางเล็กน้อยให้พอดีจอ 900px โดยไม่ต้องเลื่อน */
  .pann-sidebar { display: flex; gap: var(--pann-s1); padding: var(--pann-s4) var(--pann-s3); position: sticky; top: var(--topbar-h); align-self: start; }
  .pann-sidebar a { padding: var(--pann-s2) var(--pann-s3); }
  .pann-sidebar svg { width: 20px; height: 20px; flex: none; }
  .pann-sidebar .badge { margin-left: auto; }
  .main { margin: 0; max-width: none; padding: var(--pann-s6) var(--pann-gutter); }
}

/* ---------------------------------------------------------------- การ์ด ปุ่ม ฟอร์ม */
/* ชิ้นส่วนชื่อเดิม (.card .btn .pill .tabs) = หน้าที่ยังไม่ได้ปรับ — หน้าตาเท่ากับ .pann-card / .pann-btn / .pann-pill / .pann-chip */
.card {
  background: var(--pann-surface); border: 1px solid var(--pann-line); border-radius: var(--pann-r-card); box-shadow: var(--pann-shadow);
  padding: 16px; margin-bottom: 14px; min-width: 0;
}
.card.center { text-align: center; }
.grid { display: grid; gap: 14px; }
@media (min-width: 700px) { .grid.two { grid-template-columns: 1fr 1fr; } .grid.three { grid-template-columns: repeat(3, 1fr); } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--pann-btn-h); padding: 8px 18px; border-radius: var(--pann-r-ctl); border: 1px solid var(--pann-brand);
  background: var(--pann-surface); color: var(--pann-brand-ink); font: inherit; font-weight: 600; cursor: pointer;
  transition: transform .05s ease, background .15s ease;
}
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--pann-on-brand); }
.btn.primary:hover { background: var(--brand-dark); }
.btn.danger { color: var(--bad); border-color: var(--pann-danger); }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: .9rem; border-radius: var(--pann-r-ctl); }
.btn.block { width: 100%; }
.btn.huge { min-height: 96px; font-size: 1.4rem; border-radius: var(--pann-r-hero); }
.btn[disabled], .btn.busy, .pann-btn.busy { opacity: .6; pointer-events: none; }
.pann-btn { text-decoration: none; transition: transform .05s ease, background .15s ease; }
.pann-btn:active { transform: scale(.98); }
.pann-btn--small { height: 36px; padding: 0 var(--pann-s3); font-size: var(--pann-t-small); }
.pann-btn--hero { min-height: var(--pann-btn-hero-h); height: auto; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

label { display: block; font-weight: 600; margin: 12px 0 6px; font-size: .95rem; }
input, select, textarea {
  width: 100%; min-height: var(--tap); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--pann-r-ctl);
  font: inherit; background: var(--pann-surface); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.code-input { letter-spacing: .5em; text-align: center; font-size: 1.4rem; }

.msg { padding: 10px 12px; border-radius: var(--pann-r-ctl); margin: 10px 0; font-size: .95rem; }
.msg.ok { background: var(--ok-soft); color: var(--ok); }
.msg.warn { background: var(--warn-soft); color: var(--warn); }
.msg.bad { background: var(--bad-soft); color: var(--bad); }
.msg.info { background: var(--brand-soft); color: var(--brand-dark); }

.pill {
  display: inline-block; padding: 1px 10px; border-radius: var(--pann-r-pill); font-size: var(--pann-t-small); background: var(--pann-neutral-tint);
  border: 1px solid transparent; color: var(--pann-fg); white-space: nowrap;
}
.pill.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.pill.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.pill.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.pill.brand { background: var(--brand-soft); color: var(--brand); border-color: transparent; }

/* ---------------------------------------------------------------- ตาราง รายการ แท็บ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--ink-soft); font-weight: 500; font-size: var(--pann-t-small); white-space: nowrap; }
.list-item { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.list-item:last-child { border-bottom: 0; }
.list-item .grow { flex: 1; min-width: 0; }
/* งาน 180 (UX-02): รหัส/ลิงก์ขอเข้าบริษัท — ลิงก์ยาวตัดบรรทัดได้ทุกตำแหน่ง · มือถือ: ข้อความเต็มแถว ปุ่มอยู่แถวถัดไป (ไม่ทับกัน) */
.join-row #join-link { overflow-wrap: anywhere; word-break: break-word; }
html.m-ui .join-row { flex-wrap: wrap; }
html.m-ui .join-row .grow { flex-basis: 100%; }
.tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 2px; }
.tabs button:not(.pann-chip) {
  flex: none; border: 1px solid var(--line); background: var(--card); border-radius: var(--pann-r-pill); padding: 8px 14px;
  font: inherit; font-size: .92rem; cursor: pointer; color: var(--ink-soft); min-height: 40px;
}
.tabs button.active:not(.pann-chip) { background: var(--pann-brand-tint); border-color: var(--pann-brand-ink); color: var(--pann-brand-ink); font-weight: 600; }
.tabs .pann-chip { flex: none; color: var(--pann-fg-muted); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }

/* ---------------------------------------------------------------- หน้า login */
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 16px; padding-bottom: 16px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-logo { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 18px; }
.auth-logo .brand-mark { width: 56px; height: 56px; }
.auth-logo .name { font-size: 1.4rem; font-weight: 700; }

.skeleton { background: linear-gradient(90deg, var(--pann-neutral-tint), var(--pann-bg), var(--pann-neutral-tint)); background-size: 200% 100%;
  animation: sk 1.2s infinite linear; border-radius: 8px; min-height: 18px; }
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* ข้อความลอย = .pann-toast (เขียว = สำเร็จ) · --plain = ข้อความทั่วไป/แจ้งปัญหา · มือถืออยู่เหนือแถบล่าง */
.pann-toast { z-index: 50; bottom: calc(84px + env(safe-area-inset-bottom)); }
.pann-toast--plain { background: var(--pann-fg); }
@media (min-width: 900px) { .pann-toast { bottom: var(--pann-s6); } }
.pann-alert { margin: 10px 0; }
.pann-card { margin-bottom: 14px; }
.grid > .pann-card { margin-bottom: 0; }
.pann-card > h2 { margin-bottom: 10px; }
.pann-card__head h2 { margin: 0; }
.pann-empty .pann-btn { margin-top: var(--pann-s1); }
/* งาน 116: หน้า "ตรวจคำขอเบิก" (expense-claim.html) */
.exc-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pann-s2); }
.exc-head { display: grid; gap: var(--pann-s3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.exc-table td { vertical-align: top; }
.exc-table tfoot td { border-bottom: 0; background: var(--pann-neutral-tint); }
.exc-acts { flex-wrap: wrap; justify-content: flex-end; }
.exc-link { color: inherit; text-decoration: none; }
.exc-doc { border: 1px solid var(--pann-line); border-radius: var(--pann-r-ctl); padding: var(--pann-s4); background: var(--pann-surface); display: grid; gap: var(--pann-s1); margin-bottom: var(--pann-s3); }
.exc-doc__title { text-align: center; font-weight: 700; font-size: var(--pann-t-h2); margin-bottom: var(--pann-s2); }
.exc-doc__table { width: 100%; border-collapse: collapse; margin: var(--pann-s2) 0; }
.exc-doc__table th, .exc-doc__table td { border: 1px solid var(--pann-line); padding: var(--pann-s1) var(--pann-s2); font-size: var(--pann-t-small); }
.modal.exc-pdf { max-width: min(96vw, 980px); width: 100%; display: flex; flex-direction: column; height: 90vh; padding: var(--pann-s3); }
.exc-pdf__head { display: flex; align-items: center; gap: var(--pann-s2); margin-bottom: var(--pann-s2); }
.exc-pdf__head h2 { flex: 1; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exc-pdf__frame { flex: 1; width: 100%; border: 1px solid var(--pann-line); border-radius: var(--pann-r-ctl); background: var(--pann-neutral-tint); }
/* หน้าอนุมัติ: การ์ดต่อคำขอ (มือถือ) / ตาราง (คอม) */
.apv-top { display: flex; align-items: flex-start; gap: var(--pann-s3); }
.apv-body { flex: 1; min-width: 0; display: grid; gap: var(--pann-s1); }
.apv-who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pann-s2); }
.apv-acts { margin-top: var(--pann-s3); }
.apv-card .pick, .apv-table .pick { width: 22px; height: 22px; margin-top: 2px; flex: none; }
.apv-card .apv-acts .pann-btn { flex: 1; }
.apv-table td { vertical-align: top; }
.apv-table .apv-acts { margin-top: 0; flex-wrap: nowrap; justify-content: flex-end; }
.apv-team { color: var(--pann-attention); }
/* งาน 113: หน้าย่อย — หัวข้อของหน้าแม่ซ่อน (ทางกลับ "‹ หน้าแม่" + หัวข้อของหน้าย่อยมาแทน) · แถบปุ่มติดล่างในฟอร์มที่การ์ดมีขอบ */
.main:has(.pann-back) > h1:first-child { display: none; }
.pann-back + h1 { margin-top: var(--pann-s1); }
/* คำทักทายหน้าแรก: ชื่อ/อีเมลยาวตัดด้วย … ไม่ดันหน้าล้นจอ */
.hello { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* การ์ด "สิ่งที่ต้องทำวันนี้" + ก้อนตัวเลข (หน้าแรก) */
.pann-todo-row { color: var(--pann-fg); text-decoration: none; }
.pann-todo-row__text { flex: 1; min-width: 0; }
.pann-todo-row__go { flex: none; white-space: nowrap; }
.pann-stat { font: inherit; text-align: left; color: var(--pann-fg-muted); font-size: var(--pann-t-small); }
.pann-stat .pann-num { color: var(--pann-fg); }
.pann-stat .pann-num.is-action { color: var(--pann-attention); }
#card-month .pann-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.more-sheet {
  position: fixed; right: 8px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 30; background: var(--card);
  border-radius: var(--pann-r-card); box-shadow: var(--pann-shadow-float); padding: 6px; min-width: 200px;
}
.more-sheet a { display: flex; align-items: center; gap: 10px; padding: 12px; color: var(--ink); border-radius: var(--pann-r-ctl); position: relative; }
.more-sheet a.is-active { background: var(--pann-brand-tint); color: var(--pann-brand-ink); font-weight: 600; }
.more-sheet svg { width: 20px; height: 20px; }
.more-sheet .badge { margin-left: auto; }
@media (min-width: 900px) { .more-sheet { display: none; } }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.chip { flex: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--pann-r-ctl); padding: 8px 12px; min-width: 110px; }
.chip b { display: block; font-size: 1.2rem; }
.req-card { border-left: 4px solid var(--line); }
.req-card.pending { border-left-color: var(--warn); }
.req-card.approved { border-left-color: var(--ok); }
.req-card.rejected, .req-card.cancelled { border-left-color: var(--bad); }
.cal td, .cal th { padding: 4px 6px; text-align: center; font-size: .82rem; }
.cal td:first-child, .cal th:first-child { text-align: left; position: sticky; left: 0; background: var(--card); white-space: nowrap; }

/* ---------------------------------------------------------------- กล่องโต้ตอบของแอป (แทน prompt/confirm) */
.modal-back {
  position: fixed; inset: 0; z-index: 100; background: color-mix(in srgb, var(--pann-fg) 45%, transparent);
  display: flex; align-items: flex-end; justify-content: center; padding: 0;
}
.modal {
  background: var(--card); width: 100%; max-width: 460px; max-height: 92vh; overflow: auto;
  border-radius: var(--pann-r-card) var(--pann-r-card) 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow: var(--pann-shadow-float);
}
.modal h2 { margin-bottom: 6px; }
.modal-msg { margin: 0 0 6px; white-space: pre-line; }
.modal-actions { display: flex; gap: 8px; margin-top: 16px; }
.modal-actions .btn { flex: 1; }
.btn.danger-solid { background: var(--bad); border-color: var(--bad); color: var(--pann-on-brand); }
@media (min-width: 600px) {
  .modal-back { align-items: center; padding: 16px; }
  .modal { border-radius: var(--pann-r-card); padding: 24px; max-width: 560px; }   /* งาน 158: จอคอมกล่องใหญ่ขึ้น (เดิม 460px เล็กเกินสำหรับกล่องที่มีฟอร์ม) */
}

/* ---------------------------------------------------------------- เลื่อนหน้าแล้วหัวยังเห็น
   แถบบน: ตัวที่ต้อง sticky คือ #app-header (ลูกของ body) — เดิมใส่ไว้ที่ .topbar ซึ่งอยู่ในกล่องสูงเท่าตัวเอง จึงเลื่อนหายไปกับกล่อง */
:root { --topbar-h: 57px; }
#app-header { position: sticky; top: 0; z-index: 25; background: var(--card); }
#app-header .topbar { position: static; }

/* หัวตารางค้าง: จอเล็ก = ตารางเลื่อนในกรอบของตัวเอง (หัวค้างบนสุดของกรอบ) · จอใหญ่ = หัวค้างใต้แถบบนตอนเลื่อนทั้งหน้า */
.sticky-head, .sticky-box { overflow: auto; max-height: calc(100vh - var(--topbar-h) - 96px); max-height: calc(100dvh - var(--topbar-h) - 96px); }
.sticky-head thead th, .sticky-box thead th {
  position: sticky; top: 0; z-index: 3; background: var(--card); box-shadow: inset 0 -1px 0 var(--line);
}
.sticky-box thead th:first-child { left: 0; z-index: 4; }
@media (min-width: 900px) {
  .sticky-head { overflow: visible; max-height: none; }
  .sticky-head thead th { top: var(--topbar-h); }
}
td.pick-cell, th.pick-cell { width: 34px; padding-right: 0; }
td.pick-cell input, th.pick-cell input { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- ใช้เต็มความกว้างจอ (งาน 011)
   เมนูซ้ายชิดขอบซ้าย เนื้อหาใช้ที่เหลือทั้งหมด · ฟอร์ม/ข้อความกว้างสุด 1600px กันบรรทัดยาวเกินอ่าน · บล็อกที่มีตารางใช้เต็มจอ */
.main { max-width: none; }
@media (min-width: 900px) {
  .tabs { flex-wrap: wrap; overflow-x: visible; }
  /* หน้าที่ไม่มีตารางเลย (ฟอร์ม/ข้อความล้วน) = กว้างสุด 1600px · หน้าที่มีตาราง = ทั้งหน้าเต็มจอ (ขอบขวาของการ์ดเสมอกัน) */
  .main:not(:has(table)) > *:not(.tabs) { max-width: 1600px; }
}

/* ---------------------------------------------------------------- แถบปุ่ม/ค้นหาค้างใต้แถบบน (งาน 012)
   .sticky-tools = ชื่อหน้า + ปุ่ม + ค้นหา/ตัวกรอง · app.js วัดความสูงจริงใส่ --tools-h แล้วหัวตารางค้างต่อใต้แถบนี้ (ไม่ซ้อนกัน)
   มือถือ: ค้างแค่ .tools-main (ค้นหา + ปุ่มหลัก) · ของรองอยู่ใน .tools-extra เปิดด้วยปุ่ม ⋯ */
:root { --tools-h: 0px; }
.sticky-tools {
  position: sticky; top: var(--topbar-h); z-index: 15; background: var(--bg);
  padding: 8px 0; margin-bottom: 8px; border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.tools-main, .tools-extra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tools-title { margin: 0 8px 0 0; font-size: 1.25rem; white-space: nowrap; }
.sticky-tools input:not([type=checkbox]), .sticky-tools select { width: auto; flex: 1 1 170px; min-width: 0; max-width: 360px; }
.sticky-tools .tabs { margin: 0; padding: 0; flex: 1 1 100%; }
.sticky-tools .btn, .sticky-tools .pann-btn { flex: none; }
.tools-grow { flex: 1 1 auto; }
.tools-more { display: none; }
.sticky-tools .tabs:empty, .tools-extra:empty { display: none; }
.sticky-tools .eye-row { margin: 0; }   /* งาน 246z: ปุ่มแสดงตัวเลขของหน้าเงินเดือนค้างใต้แท็บ */

/* หัวตารางค้างต่อใต้แถบเครื่องมือ */
.sticky-head, .sticky-box {
  max-height: calc(100vh - var(--topbar-h) - var(--tools-h) - 96px);
  max-height: calc(100dvh - var(--topbar-h) - var(--tools-h) - 96px);
}
@media (min-width: 900px) {
  .sticky-head { max-height: none; }
  .sticky-head thead th { top: calc(var(--topbar-h) + var(--tools-h)); }
}
@media (min-width: 700px) {
  .main.has-tools > h1:first-child { display: none; }   /* ชื่อหน้าย้ายเข้าไปอยู่ในแถบค้าง */
}
@media (max-width: 699px) {
  .tools-title { display: none; }                        /* มือถือ: ชื่อหน้าอยู่ที่หัวข้อปกติ (เลื่อนไปกับหน้า) */
  .tools-extra { display: none; }
  .sticky-tools.open .tools-extra { display: flex; }
  .tools-more { display: inline-flex; padding: 8px 14px; font-size: 1.2rem; line-height: 1; }
  .sticky-tools .btn { min-height: 44px; padding: 8px 12px; }
  .sticky-tools input:not([type=checkbox]), .sticky-tools select { min-height: 44px; max-width: none; }
  .sticky-tools .tabs { flex-wrap: nowrap; }
  .sticky-tools .eye-row small { display: none; }        /* มือถือ: แถบค้างเหลือแค่ปุ่ม */
}
#tab-tools:empty { display: none; }

/* การ์ด "เริ่มใช้งาน" (web/onboarding.js) */
.onboarding .ob-item { flex-wrap: wrap; }
.onboarding .ob-line { gap: 8px; }
.ob-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.onboarding .ob-mark { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; border: 1.5px solid var(--line); color: var(--muted); }
.onboarding .ob-item.done .ob-mark { background: var(--ok); border-color: var(--ok); color: var(--pann-on-brand); }
.onboarding .ob-item.done .grow { color: var(--muted); }

/* แถบบอกว่ากำลังดูแบบอ่านอย่างเดียว (ผู้ให้บริการ / สำนักงานบัญชี) */
.readonly-banner { padding: 10px 14px; border-radius: var(--pann-r-ctl); margin: 0 0 12px; font-weight: 600; color: var(--pann-on-brand); background: var(--pann-attention); }
.readonly-banner.support { background: var(--pann-danger); }
.readonly-banner.firm-edit { background: var(--pann-info); }   /* งาน 252z: สำนักงานทำแทนลูกค้า = โทนข้อมูล ไม่ใช่เตือน */

/* ปุ่มสลับภาษา TH | EN */
/* งาน 221: ปุ่มภาษาเดียว "TH ▾" กดแล้วเป็นรายการ (แทนปุ่มสามช่อง) — หน้าตาใกล้ปุ่มภาษาของชิ้นกลาง */
.lang-switch { position: relative; display: inline-flex; margin-left: 8px; flex: 0 0 auto; }
.lang-switch .lang-cur { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--pann-line); border-radius: var(--pann-r-pill); background: var(--pann-surface);
  padding: 6px 12px; font: inherit; font-size: var(--pann-t-small); font-weight: 600; color: var(--pann-fg); cursor: pointer; min-height: 36px; }
.lang-switch .lang-cur:hover, .lang-switch .lang-cur:focus-visible, .lang-switch .lang-cur[aria-expanded="true"] { border-color: var(--pann-brand-ink); color: var(--pann-brand-ink); }
.lang-switch .lang-caret { color: var(--pann-fg-muted); font-size: var(--pann-t-small); }
.lang-switch .lang-list { position: absolute; top: calc(100% + 6px); right: 0; z-index: 95; min-width: 140px; display: flex; flex-direction: column; padding: 6px;
  background: var(--pann-surface); border: 1px solid var(--pann-line); border-radius: var(--pann-r-card); box-shadow: var(--pann-shadow-float); }
.lang-switch .lang-list[hidden] { display: none; }
.lang-switch .lang-list button { border: 0; background: transparent; text-align: left; padding: 10px 12px; border-radius: var(--pann-r-ctl); font: inherit;
  font-size: var(--pann-t-body); color: var(--pann-fg); cursor: pointer; min-height: 44px; }
.lang-switch .lang-list button:hover, .lang-switch .lang-list button:focus-visible { background: var(--pann-brand-tint); }
.lang-switch .lang-list button.active { color: var(--pann-brand-ink); font-weight: 600; }
.lang-float { position: fixed; top: 10px; right: 12px; z-index: 30; background: var(--pann-surface); border-radius: var(--pann-r-pill); }
.lang-float .lang-switch { margin-left: 0; }

/* หน้าตั้งค่า: ช่องตัวเลขมีหน่วย · คำอธิบายใต้ติ๊กบ็อกซ์ · หัวข้อ "ขั้นสูง" พับไว้ · แถบบันทึกค้างด้านล่าง */
.pann-field__label { margin: 0; }
.pann-field > small { display: block; }
select.pann-input { padding-right: var(--pann-s2); }
.set-field { margin-bottom: 4px; }
.set-field small { display: block; margin-top: 4px; }
.set-field .check { margin-top: 12px; font-weight: 600; }
.check-hint { padding-left: 26px; }
.unit-input { display: flex; align-items: center; gap: 8px; }
.unit-input input { max-width: 140px; }
.unit-input span { color: var(--ink-soft); white-space: nowrap; }
details.advanced { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
details.advanced summary { cursor: pointer; font-weight: 600; min-height: var(--tap); display: flex; align-items: center; gap: 6px; color: var(--ink-soft); list-style: none; }
details.advanced summary::-webkit-details-marker { display: none; }
details.advanced summary::before { content: "\25B8"; }
details.advanced[open] summary::before { content: "\25BE"; }

/* เส้นคั่นเหนือ "หน้าผู้ดูแลระบบ" (รายการสุดท้ายของเมนู — เห็นเฉพาะผู้ให้บริการ) */
.menu-sep { border: 0; border-top: 1px solid var(--line); margin: 8px 6px; }
/* งาน 056: ลิงก์ผู้ดูแลระบบ — ล่างสุด เว้นช่องว่าง (ไม่มีเส้นคั่น) ตัวเล็กบางจาง · ชี้/โฟกัสแล้วค่อยชัด */
.pann-sidebar a.menu-admin, .more-sheet a.menu-admin { margin-top: 28px; opacity: .45; font-size: var(--pann-t-small); font-weight: 400; color: var(--pann-fg-muted); background: none; transition: opacity .15s; }
.pann-sidebar a.menu-admin svg, .more-sheet a.menu-admin svg { width: 14px; height: 14px; }
.pann-sidebar a.menu-admin:hover, .pann-sidebar a.menu-admin:focus-visible, .more-sheet a.menu-admin:hover, .more-sheet a.menu-admin:focus-visible { opacity: 1; background: none; }
.pann-sidebar a.menu-admin.is-active, .more-sheet a.menu-admin.is-active { background: none; color: var(--pann-fg-muted); font-weight: 400; }
/* งาน 068: จอคอม — แถบเมนูสูงเต็มจอ ลิงก์ "ผู้ดูแลระบบ" ชิดขอบล่างสุดเสมอ (แยกจากเมนูหลัก) · จอเตี้ยจนเมนูยาวเกิน = เมนูเลื่อนได้ ลิงก์อยู่ท้ายสุดของส่วนที่เลื่อน ไม่ทับรายการ */
@media (min-width: 900px) {
  .pann-sidebar { min-height: 0; height: calc(100vh - var(--topbar-h)); height: calc(100dvh - var(--topbar-h)); overflow-y: auto; }
  .pann-sidebar a { flex: none; }
  .pann-sidebar a.menu-admin { margin-top: auto; }
  .pann-sidebar #logout-link { margin-bottom: 28px; }
}

/* ช่องรหัสผ่าน (password-ui.js): กรอบเป็นของตัวห่อ ปุ่มตาอยู่ขวาในกรอบแต่นอกช่องพิมพ์ — ไอคอนของตัวจัดการรหัสผ่านจึงไม่ทับปุ่มตา */
.pw-wrap { display: flex; align-items: center; width: 100%; border: 1px solid var(--line); border-radius: var(--pann-r-ctl); background: var(--pann-surface); }
.pw-wrap:focus-within { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
.pw-wrap input { flex: 1; min-width: 0; border: 0; background: transparent; }
.pw-wrap input:focus { outline: 0; }
.pw-wrap.pw-bad { border-color: var(--bad); }
.pw-eye {
  flex: none; width: 44px; height: 44px; margin-right: 2px; border: 0; border-radius: var(--pann-r-ctl); background: transparent;
  color: var(--ink-soft); display: grid; place-items: center; cursor: pointer;
}
.pw-eye:hover { color: var(--ink); }
.pw-eye:focus-visible { outline: 2px solid var(--brand); }
.pw-eye svg { width: 22px; height: 22px; }
.pw-note { display: block; margin-top: 4px; font-size: .9rem; min-height: 1.2em; }
.pw-note.bad { color: var(--bad); font-weight: 600; }
.pw-note.ok { color: var(--ok); }
.pw-checks { list-style: none; padding: 0; margin: 6px 0 2px; font-size: .9rem; color: var(--ink-soft); }
.pw-checks li::before { content: "\25CB"; display: inline-block; width: 1.4em; }
.pw-checks li.ok { color: var(--ok); }
.pw-checks li.ok::before { content: "\2713"; font-weight: 700; }

/* ---------------------------------------------------------------- หน้าเข้าสู่ระบบ/สมัคร แบบการ์ดกลางจอ (งาน 024) */
.auth-body { background: linear-gradient(160deg, var(--brand-soft) 0%, var(--bg) 45%, var(--bg) 100%); padding-bottom: 0; min-height: 100vh; }
.auth-card { position: relative; max-width: 420px; padding: 22px 20px; }
#lang-slot { position: absolute; top: 12px; right: 12px; }
#lang-slot .lang-switch { margin-left: 0; }
.auth-head { text-align: center; margin: 0 0 10px; font-size: 1.35rem; }
.auth-points { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; }
.auth-points li { position: relative; padding-left: 30px; color: var(--ink); }
.auth-points li::before {
  content: "\2713"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ok-soft); color: var(--ok); font-weight: 700; font-size: .85rem; display: grid; place-items: center;
}
.btn.social { gap: 10px; font-weight: 600; }
.btn.social svg { width: 22px; height: 22px; flex: none; }
.btn.social.line { background: #06c755; border-color: #06c755; color: #fff; }
.btn.social.line:hover { background: #05b34c; }
.btn.social.google { background: var(--pann-surface); border-color: var(--line); color: var(--ink); }
.btn.social.google:hover { background: var(--bg); }
/* งาน 118: บัญชีกลางเปิดอยู่ = ฟอร์มวิธีเดิม (อีเมล + รหัสผ่าน) พับไว้จนกดปุ่ม "วิธีเดิม" */
.old-way-closed #login-form, .old-way-closed #su-form, .old-way-closed #links { display: none; }
.social-note { margin: var(--pann-s2) 0 0; text-align: center; }
#social .pann-btn { display: flex; width: 100%; justify-content: center; box-sizing: border-box; }
.auth-or { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--ink-soft); font-size: .9rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-terms { margin: 14px 0 0; font-size: .85rem; color: var(--ink-soft); text-align: center; }
.auth-alt { margin: 10px 0 0; text-align: center; font-size: .95rem; }
@media (max-width: 480px) {
  .auth-page { padding: 0; place-items: start stretch; }
  .auth-card { max-width: none; min-height: 100vh; border-radius: 0; margin: 0; box-shadow: none; padding-top: 28px; }
}

/* ---------------------------------------------------------------- เอกสารทางกฎหมาย: เงื่อนไขการใช้งาน / นโยบายความเป็นส่วนตัว (งาน 025) */
.legal-page { place-items: start center; }
.legal-card { position: relative; width: 100%; max-width: 820px; margin: 16px auto; padding: 22px 20px; }
.legal { line-height: 1.7; overflow-wrap: anywhere; }
.legal h1 { font-size: 1.5rem; margin: 0 0 12px; }
.legal h2 { font-size: 1.15rem; margin: 26px 0 8px; padding-top: 6px; scroll-margin-top: 12px; }
.legal h3 { font-size: 1rem; margin: 16px 0 6px; }
.legal p { margin: 8px 0; }
.legal ul, .legal ol { margin: 8px 0; padding-left: 22px; }
.legal li { margin: 4px 0; }
.legal section { scroll-margin-top: 12px; }
.legal-meta { color: var(--ink-soft); font-size: .92rem; }
.legal-toc { background: var(--bg); border: 1px solid var(--line); border-radius: var(--pann-r-ctl); padding: 12px 16px; margin: 16px 0; }
.legal-toc h2 { margin: 0 0 6px; padding: 0; font-size: 1rem; }
.legal-toc ol { margin: 0; columns: 2; column-gap: 28px; }
.legal-toc li { break-inside: avoid; }
.legal-toc a { display: inline-block; padding: 3px 0; }
.legal-table th, .legal-table td { font-size: .92rem; min-width: 120px; }
.legal-top { margin: 10px 0 0; font-size: .85rem; text-align: right; }
.legal-foot { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .95rem; }
@media (max-width: 600px) {
  .legal-card { margin: 0; border-radius: 0; box-shadow: none; padding-top: 28px; }
  .legal-toc ol { columns: 1; }
  .legal-toc a { padding: 6px 0; }
}

/* ---------------------------------------------------------------- แถบยินยอมคุกกี้ + กล่องตั้งค่า (งาน 026) */
.consent-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--card); border-top: 1px solid var(--line);
  box-shadow: var(--pann-shadow-float); padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: center;
}
.consent-text { flex: 1 1 320px; max-width: 720px; font-size: .92rem; }
.consent-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex: 1 1 420px; max-width: 560px; }
@media (max-width: 520px) { .consent-actions { grid-template-columns: 1fr; } }
/* สามปุ่มหน้าตาเดียวกัน ขนาดเท่ากัน — ไม่มีปุ่มไหนเด่นหรือด้อยกว่า */
.consent-btn { width: 100%; min-height: 44px; padding-left: 8px; padding-right: 8px; background: var(--card); border: 1.5px solid var(--ink); color: var(--ink); font-weight: 600; }
.consent-btn:hover { background: var(--bg); }
.consent-modal h2 { margin-top: 0; }
.consent-cat { border-top: 1px solid var(--line); padding: 10px 0; }
.consent-cat p { margin: 4px 0 0 30px; font-size: .9rem; }
.consent-switch { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 400; cursor: pointer; }
.consent-switch input { width: 20px; height: 20px; flex: none; }
.cookie-foot { text-align: center; font-size: .85rem; margin: 18px 0 4px; }
.cookie-foot a { color: var(--ink-soft); text-decoration: underline; }

/* ---------------------------------------------------------------- เอกสารพนักงานแบบกรอบ + ลิงก์สมัครงาน (งาน 029) */
.doc-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.doc-title h2 { margin: 0; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 10px; }
.doc-slot { border: 1.5px solid var(--line); border-radius: var(--pann-r-ctl); padding: 10px; background: var(--card); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* งาน 048: เอกสารบังคับที่ยังไม่มี = กรอบปกติ (เส้นประ) + ป้ายสีกลาง — สีแดงสงวนไว้สำหรับข้อผิดพลาด (.lack = กดส่ง/ถัดไปแล้วยังขาด) */
.doc-slot.missing { border-style: dashed; }
.doc-slot.lack { border-color: var(--bad); background: var(--bad-soft); }
.doc-drop.compact { padding: 6px 10px; min-height: 0; font-size: .9rem; text-align: left; }
.doc-more { margin-top: 12px; }
.doc-more > summary { cursor: pointer; padding: 8px 0; font-weight: 600; color: var(--ink-soft); }
.ap-health { align-items: flex-start; font-size: .95rem; font-weight: 400; margin: 2px 0; }
.ap-doc-label { margin: 2px 0; }
.doc-slot.over { border-color: var(--brand); background: var(--brand-soft); }
.doc-slot.busy { opacity: .6; pointer-events: none; }
.doc-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.doc-file { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 6px; }
.doc-file .grow { flex: 1 1 140px; min-width: 0; }
.doc-name { word-break: break-all; }
.doc-fix { color: var(--bad); }
.doc-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.doc-drop {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 56px; margin: auto 0 0; padding: 8px;
  border: 1.5px dashed var(--line); border-radius: var(--pann-r-ctl); color: var(--ink-soft); font-weight: 400; font-size: .92rem; cursor: pointer; background: var(--card);
}
.doc-drop:hover { border-color: var(--brand); color: var(--brand); }
.doc-camera { justify-content: center; }
.doc-preview .modal { max-width: min(92vw, 900px); }
.doc-preview img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 8px; }
.doc-alert a { color: inherit; font-weight: 600; }
.btn.current { border-color: var(--brand); color: var(--brand); font-weight: 700; }
.lk-url { margin-top: 6px; font-size: .85rem; color: var(--ink-soft); }
.lk-row { align-items: flex-start; flex-wrap: wrap; }
.lk-row .grow { flex: 1 1 260px; }

/* ---------------------------------------------------------------- เงินเดือน (งาน 031) */
/* งาน 111: ยอดสรุปของงวด = .pann-stats / .pann-stat / .pann-num · แถบขั้นตอน = .pann-steps — ที่นี่มีแค่ระยะและป้ายใต้ขั้น */
.pay-sum { margin: 12px 0; }
.pay-sum .pann-num { font-size: var(--pann-t-h1); overflow-wrap: anywhere; }
/* งาน 263: แผ่น "พาเข้าแอป" */
.bring-part { padding: var(--pann-s3) 0; border-bottom: 1px solid var(--pann-line); }
.bring-part:first-child { padding-top: 0; }
.bring-part h3 { margin: 0 0 var(--pann-s1); }
.bring-part p { margin: var(--pann-s1) 0; }
.bring-list { margin: var(--pann-s1) 0 var(--pann-s2); padding-left: 1.2em; }
.bring-list li { margin: 4px 0; }
.bring-tools { display: flex; flex-wrap: wrap; gap: var(--pann-s2); margin-top: var(--pann-s3); }
.bring-qr-box { text-align: center; }
.bring-qr { width: min(260px, 70vw); height: auto; image-rendering: pixelated; }
.pick-why:empty { display: none; }
.pick-why { align-self: center; }
/* งาน 264: รายคนทั้งปี — ตารางเลื่อนแนวนอน คอลัมน์ชื่อค้างซ้าย */
.py-tools { display: flex; flex-wrap: wrap; gap: var(--pann-s2); align-items: center; margin-bottom: var(--pann-s2); }
.py-tools .tabs { margin: 0; }
.py-tools label { display: flex; align-items: center; gap: var(--pann-s1); margin: 0; }
.py-tools input, .py-tools select { width: auto; min-width: 120px; max-width: 240px; margin: 0; }
.py-wrap { overflow-x: auto; }
.py-table { min-width: 100%; }
.py-table .py-name { position: sticky; left: 0; z-index: 1; background: var(--pann-surface); text-align: left; white-space: nowrap; font-weight: 400; }
.py-table thead .py-name, .py-table tfoot .py-name { font-weight: 600; }
.py-table .py-sub { padding-left: 2.2em; color: var(--pann-fg-muted); }
.py-table .py-item td { color: var(--pann-fg-muted); }
.py-months td, .py-months th { white-space: nowrap; }
.py-toggle { border: 0; background: none; cursor: pointer; padding: 0 4px; color: var(--pann-fg); font: inherit; }
.pay-steps { margin: var(--pann-s3) 0 var(--pann-s4); max-width: 560px; }
/* งาน 175: ทางเดินของการเบิกค่าใช้จ่าย (หน้า "ค่าใช้จ่าย") — สามขั้นสั้น ๆ เหนือกรอบเครื่องมือ · จอแคบเรียงลงล่าง */
.exc-flow { list-style: none; margin: 0 0 var(--pann-s4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--pann-s2) var(--pann-s4); }
.exc-flow li { display: flex; align-items: flex-start; gap: var(--pann-s2); flex: 1 1 220px; color: var(--pann-fg); }
.exc-flow__n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; background: var(--pann-brand-tint); color: var(--pann-brand-ink); }
.exc-sent { margin: 0 0 var(--pann-s3); }
.pay-steps__labels { display: flex; justify-content: space-between; margin-top: var(--pann-s1); font-size: var(--pann-t-small); color: var(--pann-fg-muted); }
.pay-steps__labels .is-current { color: var(--pann-fg); font-weight: 600; }
.pay-sure { margin: var(--pann-s3) 0 var(--pann-s2); font-weight: 500; }
.pay-sure input { width: 20px; height: 20px; flex: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-table td, .pay-table th { font-size: .9rem; }
.pay-manual { background: var(--warn-soft); }
.pay-h { margin: 16px 0 4px; font-size: 1rem; }
.pin-input { -webkit-text-security: disc; letter-spacing: .35em; font-size: 1.3rem; }
.pay-net { font-size: 1.2rem; color: var(--brand); }
.pay-drawer { max-width: min(94vw, 640px); max-height: 90vh; overflow-y: auto; }
.slip { background: #fff; color: #111; border: 1px solid var(--line); border-radius: 12px; padding: 20px; max-width: 800px; margin: 0 auto; }
.slip-head { display: flex; justify-content: space-between; gap: 12px; border-bottom: 2px solid #111; padding-bottom: 8px; }
.slip-head h2 { margin: 0; }
.slip-date { text-align: right; display: flex; flex-direction: column; }
.slip-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 12px 0; }
.slip-info div { display: flex; flex-direction: column; }
.slip-info small, .slip-date small { color: #555; }
.slip-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.slip-cols table { width: 100%; border-collapse: collapse; }
.slip-cols th, .slip-cols td { padding: 5px 6px; border-bottom: 1px solid #ddd; text-align: left; font-size: .92rem; }
.slip-cols th.num, .slip-cols td.num { text-align: right; }
.slip-cols tfoot td { font-weight: 700; border-top: 2px solid #111; border-bottom: 0; }
.slip-net { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 8px; padding: 10px 12px; border: 2px solid #111; border-radius: 8px; font-size: 1.15rem; }
.slip-ytd { font-size: .88rem; margin: 4px 0; }
.slip-foot { font-size: .8rem; color: #555; margin: 12px 0 0; }
@media (max-width: 600px) { .slip-cols { grid-template-columns: 1fr; } }
@media print {
  #app-header, #app-side, #app-nav, .more-sheet, .slip-tools, .cookie-foot, .consent-banner, .lang-float, .pann-toast, #app-main > h1, .readonly-banner { display: none !important; }
  body, .layout, .main { background: var(--pann-surface) !important; padding: 0 !important; margin: 0 !important; display: block !important; }
  .slip { border: 0; padding: 0; max-width: none; }
  .pd-noprint { display: none !important; }
  .pd-page { border: 0; padding: 0; max-width: none; margin: 0; page-break-after: always; }
  .pd-page:last-child { page-break-after: auto; }
}

/* งาน 034: อันดับของเดือน (หน้าแรก) · คะแนนเข้างานของฉัน */
.rank-h { margin: 12px 0 2px; font-size: .95rem; }
.score-bad { color: var(--bad); }
.score-ok { color: var(--ok); }

/* งาน 034: ประกาศ · หนังสือเตือน/หนังสือรับรองแบบพิมพ์ */
.ann-h { margin: 18px 0 8px; font-size: 1.05rem; }
.ann-body { margin: 10px 0; }
.ann-body p { margin: 0 0 8px; }
.ann-body ul { margin: 0 0 8px; padding-left: 22px; }
.ann-pick { max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: var(--pann-r-ctl); padding: 8px 10px; margin-top: 8px; display: grid; gap: 4px; }
.lt-page { line-height: 1.7; }
.lt-head { text-align: center; margin-bottom: 14px; }
.lt-head h2, .lt-head h3 { margin: 0; }
.lt-date { text-align: right; }
.lt-detail { border-left: 3px solid #bbb; padding-left: 12px; }
.lt-signs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; }

/* เอกสารเงินเดือนพร้อมพิมพ์ (งาน 032): สปส.1-10 · ใบแนบ ภ.ง.ด.1/1ก · 50 ทวิ · รายงานจ่ายเงินสด · สมุดรายวัน */
.pd-page { background: #fff; color: #111; border: 1px solid var(--line); border-radius: 12px; padding: 20px; max-width: 900px; margin: 0 auto 16px; }
.pd-head { display: flex; justify-content: space-between; gap: 12px; border-bottom: 2px solid #111; padding-bottom: 8px; margin-bottom: 12px; }
.pd-head h2, .pd-wht h2 { margin: 0; }
.pd-head small, .pd-co small { color: #555; display: block; }
.pd-co { text-align: right; }
.pd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 0 0 12px; }
.pd-grid div { display: flex; flex-direction: column; }
.pd-grid small { color: #555; }
.pd-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.pd-table th, .pd-table td { padding: 5px 6px; border-bottom: 1px solid #ddd; text-align: left; }
.pd-table th.num, .pd-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-table tfoot td { font-weight: 700; border-top: 2px solid #111; border-bottom: 0; }
.pd-table td.pd-blank { min-width: 120px; height: 34px; }
.pd-table td.pd-cr { padding-left: 28px; }
.pd-copy { font-size: .82rem; color: #555; text-align: right; }
.pd-party { border: 1px solid #bbb; border-radius: 8px; padding: 8px 10px; margin: 10px 0; display: flex; flex-direction: column; gap: 2px; }
.pd-party small { color: #333; }
.pd-id { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.pd-box { display: inline-block; width: 15px; height: 15px; border: 1px solid #111; text-align: center; line-height: 14px; font-size: .8rem; vertical-align: -2px; }
.pd-words { margin: 10px 0 4px; }
.pd-sign { margin-top: 18px; text-align: center; }
.pd-line { width: 240px; border-bottom: 1px dotted #111; margin: 34px auto 6px; }

/* งาน 036: ตารางอัตราเงินเดือน (หน้าผู้ดูแลระบบ) — กระชับ ปุ่มติดท้ายแถว · หมวดพับได้ · มือถือเป็นการ์ด */
.pr-tools { justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.pr-group { margin-top: 12px; }
.pr-group > summary { cursor: pointer; padding: 8px 0; list-style-position: inside; }
.pr-table { width: 100%; }
.pr-table th, .pr-table td { vertical-align: top; }
.pr-table .pr-name { min-width: 200px; max-width: 340px; }
.pr-table .pr-val { min-width: 160px; max-width: 320px; }
.pr-table .pr-date { white-space: nowrap; }
.pr-table .pr-srccell { text-align: center; width: 1%; }
.pr-table .pr-act { white-space: nowrap; width: 1%; text-align: right; }
.pr-src { text-decoration: none; font-weight: 700; }
.modal-adv { margin-top: 8px; }
.modal-adv > summary { cursor: pointer; color: var(--ink-soft); padding: 4px 0; }

/* งาน 038: แถบเครื่องมือตารางกะค้างบนจอเมื่อเลื่อนลง + ตัวนับช่องที่เลือก */
.r-tools { position: sticky; top: var(--topbar-h, 57px); z-index: 5; background: var(--card); padding: 8px 0; margin: 10px 0; align-items: center; border-bottom: 1px solid var(--line); }
.r-count { min-width: 9em; }

/* งาน 038: ปฏิทินวันหยุด 12 เดือนแบบลากวาง */
/* ปฏิทินวันหยุด (งาน 110): คอม 4 คอลัมน์ × 3 แถว · แท็บเล็ต 2 คอลัมน์ (กฎ @media ข้างล่าง) · มือถือ 1 คอลัมน์ (html.m-ui ท้ายไฟล์) */
.hc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hc-count { font-size: .92rem; }
.hc-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 8px; }
.hc-tools .btn { width: 100%; justify-content: center; }
.hc-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--pann-t-small); color: var(--ink-soft); margin-bottom: 10px; }
.hc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hsw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); vertical-align: -2px; margin-right: 6px; flex: 0 0 auto; }
.hc-legend .hsw { margin-right: 0; }
/* พื้นสีแบรนด์อ่อนกับเทาอุ่นใกล้กันมาก → นักขัตฤกษ์มีแถบสีแบรนด์ใต้ช่องให้แยกจากวันหยุดประจำสัปดาห์ได้ */
.hpub { background: var(--pann-brand-tint); color: var(--pann-brand-ink); box-shadow: inset 0 -3px 0 var(--pann-brand); }
.hco { background: color-mix(in srgb, var(--pann-accent) 35%, var(--pann-surface)); }
.hwe { background: var(--pann-neutral-tint); color: var(--pann-fg-muted); }
.hsw.htoday { background: var(--pann-surface); border: 2px solid var(--pann-brand); box-shadow: none; }
.hcal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1099px) { .hcal { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hc-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hcal-month { border: 1px solid var(--line); border-radius: var(--pann-r-ctl); padding: 8px; }
.hcal-month > b { display: block; text-align: center; margin-bottom: 4px; }
.hcal-t { width: 100%; border-collapse: collapse; table-layout: fixed; }
.hcal-t th { font-size: var(--pann-t-small); color: var(--ink-soft); padding: 2px 0; text-align: center; font-weight: 600; }
.hcal-t td { height: 32px; padding: 0; border: 1px solid var(--line); font-size: var(--pann-t-small); text-align: center; vertical-align: middle; }
.hcal-t td.hday { cursor: pointer; }
.hcal-t td.hday:hover { outline: 2px solid var(--brand-soft); outline-offset: -2px; }
.hcal-t td.hpub, .hcal-t td.hco { font-weight: 700; }
.hcal-t td.htoday { box-shadow: inset 0 0 0 2px var(--brand); }
.hcal-notes { list-style: none; margin: 6px 0 0; padding: 0; font-size: var(--pann-t-small); line-height: 1.45; min-height: 1.2em; }
.hcal-notes li { overflow-wrap: anywhere; }
.hc-review .hc-rt input:not([type="checkbox"]), .hc-review .hc-rt select { margin: 0; min-height: 36px; padding: 4px 8px; }
.hc-review #h-r-cal { margin: 12px 0; }
.hc-review #h-r-cal .hcal-t td.hday { cursor: default; }
.hc-pick label.hc-dim { color: var(--ink-soft); }
.hc-pick label.check { display: flex; margin: 4px 0; }
.hc-pick .hc-sub { margin-left: 22px; }

/* งาน 040: รายละเอียดเทคนิคในกล่องข้อผิดพลาด — เห็นเฉพาะผู้ให้บริการ */
.admin-detail { display: inline-block; margin-top: 4px; font-family: ui-monospace, monospace; color: var(--ink-soft); }

/* งาน 041/042: dropdown "อื่น ๆ (ระบุ)" — ช่องพิมพ์ขึ้นใต้ช่องเดิม · รายละเอียดงานบนหน้าสมัคร */
.other-input { margin-top: 6px; }
.ap-job { border: 1px solid var(--line); border-radius: var(--pann-r-ctl); padding: 12px; margin: 10px 0; display: grid; gap: 8px; }
.ap-job-rows { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ap-desc { white-space: normal; line-height: 1.55; }

/* งาน 043 → 256: ช่องวันที่ + ปฏิทิน = ชิ้นกลาง (.pann-datefield · .pann-datepicker ใน pann-design.css) · ใต้ช่องบอกผล/อายุ = ของ HR (fields.js) */
.pann-datefield { max-width: 100%; }
/* งาน 158 ต่อ: ปฏิทินเหนือกล่องยืนยันทุกชั้น รวมม่านล็อกหน้าจอ (body.ses-locked > .modal-back = 1000 · กลาง v1.3.6 = 1000 เท่ากัน) */
.pann-datepicker { z-index: 1100; }
.di-note { display: block; margin-top: 4px; }
.di-note.hidden { display: none; }
.di-note.warn { color: var(--warn); }

/* งาน 044: ปุ่มดินสอเล็ก (แก้ในบรรทัด) · ที่จับลากเรียงระดับ */
.icon-btn { min-width: 32px; padding-left: 8px; padding-right: 8px; }
.drag-handle { cursor: grab; color: var(--ink-soft); padding: 0 6px; user-select: none; }
.lvl-row[draggable="true"] { cursor: grab; }

/* ช่องที่อยู่: รายการแนะนำตำบล/อำเภอ (งาน 045 · web/address.js) */
.addr-sug { display: flex; flex-direction: column; margin-top: 4px; border: 1px solid var(--line); border-radius: var(--pann-r-ctl); background: var(--pann-surface); max-height: 260px; overflow-y: auto; }
.addr-sug button { text-align: left; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; color: inherit; cursor: pointer; }
.addr-sug button:last-child { border-bottom: 0; }
.addr-sug button:hover, .addr-sug button:focus { background: var(--pann-neutral-tint); }
/* ช่องบังคับที่ยังว่างตอนกด "ถัดไป" (งาน 045) */
.ap-miss input, .ap-miss select, .ap-miss textarea { border-color: var(--pann-danger) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--pann-danger) 15%, transparent); }
.ap-miss > span { color: var(--pann-danger); }

/* สัญญาจ้าง (งาน 050 · web/contracts.js) */
.ct-paper { background: var(--pann-surface); border: 1px solid var(--line); border-radius: var(--pann-r-ctl); padding: 22px 26px; line-height: 1.75; max-height: 70vh; overflow-y: auto; }
.ct-paper p { margin: 0 0 6px; text-indent: 1.5em; }
.ct-title { text-align: center; font-size: 1.25rem; margin: 0 0 8px; }
.ct-head { font-size: 1rem; margin: 12px 0 4px; }
.ct-gap { height: 8px; }
.ct-row { text-decoration: none; color: inherit; }
.ct-vars { margin: 4px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ct-vars .chip { border: 1px solid var(--line); background: var(--card); border-radius: var(--pann-r-pill); padding: 3px 10px; font: inherit; font-size: .85rem; cursor: pointer; }
.ct-vars .chip:hover { border-color: var(--brand); color: var(--brand); }
.ct-pad { display: block; width: 100%; max-width: 600px; height: auto; aspect-ratio: 600 / 220; border: 1.5px dashed var(--ink-soft); border-radius: var(--pann-r-ctl); background: var(--pann-surface); touch-action: none; }
.ct-hash { word-break: break-all; }

/* ไฟล์รวมเอกสาร → จัดหน้าเข้าช่อง (งาน 049 · web/bundle.js) — ใช้ทั้งหน้าสมัครงานและแท็บเอกสารของพนักงาน */
.ap-bundle { display: flex; flex-direction: column; gap: 2px; margin: 10px 0; padding: 14px 16px; border: 2px dashed var(--brand); border-radius: var(--pann-r-card); background: var(--brand-soft); cursor: pointer; }
.ap-bundle span { font-size: .92rem; color: var(--ink-soft); }
.ap-bundle.over { background: var(--card); }
.ap-bundle.busy { opacity: .6; pointer-events: none; }
.bd-back { position: fixed; inset: 0; z-index: 60; background: var(--bg); overflow-y: auto; }
.bd-panel { max-width: 980px; margin: 0 auto; padding: 12px 12px 190px; }
.bd-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 1.15rem; }
.bd-hint { margin: 6px 0 10px; }
.bd-drop { display: none; }
.bd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bd-page { border: 2px solid var(--line); border-radius: var(--pann-r-ctl); background: var(--card); padding: 6px; cursor: pointer; user-select: none; }
.bd-page.picked { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.bd-img { position: relative; }
.bd-img img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: var(--pann-surface); border-radius: 8px; pointer-events: none; }
.bd-no { position: absolute; left: 6px; bottom: 6px; padding: 1px 8px; border-radius: var(--pann-r-pill); background: color-mix(in srgb, var(--pann-fg) 60%, transparent); color: var(--pann-on-brand); font-size: .8rem; }
.bd-order { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: var(--pann-on-brand); font-weight: 700; }
.bd-tag { display: block; width: 100%; margin-top: 6px; padding: 8px 6px; border: 1px dashed var(--line); border-radius: 8px; background: none; font: inherit; font-size: .9rem; color: var(--ink-soft); cursor: pointer; }
.bd-tag.on { border-style: solid; border-color: var(--ok); background: var(--ok-soft); color: var(--ink); font-weight: 600; }
.bd-foot { position: fixed; left: 0; right: 0; bottom: 0; background: var(--card); border-top: 1px solid var(--line); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); box-shadow: var(--pann-shadow-float); }
.bd-pick { margin-bottom: 8px; }
.bd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; max-height: 30vh; overflow-y: auto; }
.bd-chip { padding: 9px 14px; border-radius: var(--pann-r-pill); border: 1px solid var(--brand); background: var(--card); color: var(--brand); font: inherit; font-weight: 600; cursor: pointer; }
.bd-chip.out { border-color: var(--line); color: var(--ink-soft); font-weight: 400; }
.bd-chip.over { background: var(--brand); color: var(--pann-on-brand); }
.bd-sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bd-sum .btn { flex: none; min-height: var(--tap); }
@media (min-width: 640px) { .bd-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) {
  .bd-grid { grid-template-columns: repeat(5, 1fr); }
  .bd-drop { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; position: sticky; top: 0; z-index: 1; background: var(--bg); padding: 8px 0; margin-bottom: 8px; }
  .bd-page { cursor: grab; }
}

/* งาน 055: รหัสสำรอง · ตัวเลือกนโยบาย 2FA ของบริษัท */
.backup-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin: 12px 0; }
.backup-codes code { display: block; text-align: center; padding: 10px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 1.05rem; letter-spacing: .06em; }
.sec-opt { align-items: flex-start; margin: 10px 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--pann-r-ctl); }
.sec-opt input { margin-top: 4px; }
@media print { .backup-codes code { border-color: #000; } }

.ct-review ul { margin: 6px 0 6px 18px; padding: 0; }
.ct-review li { margin: 3px 0; }
.ct-selfie-img { max-width: 100%; max-height: 420px; border-radius: var(--pann-r-ctl); border: 1px solid var(--line); margin-top: 8px; }
/* ปุ่ม ⓘ: คำอธิบายยาวกดแล้วค่อยขึ้น (งาน 051) */
/* งาน 121: การ์ดหนังสือรับรองบริษัทที่ยังไม่มีไฟล์ — เด่นขึ้นเล็กน้อย (สี "ต้องทำ" ของระบบดีไซน์) */
.cert-need { border-color: var(--pann-attention); background: var(--pann-attention-tint); }
.cert-line { margin: var(--pann-s2) 0; }
/* งาน 123: การ์ด "กรอกครั้งเดียว" โหมดดู — ช่องอ่านอย่างเดียว ตัวเทา พื้นเทาอ่อน · หัวการ์ดมีปุ่ม "แก้ไข" ชิดขวา */
.co-head { display: flex; align-items: center; justify-content: space-between; gap: var(--pann-s3); }
.co-head h2 { margin: 0; }
.co-view input[readonly], .co-view textarea[readonly] { background: var(--pann-neutral-tint); color: var(--pann-fg-muted); cursor: default; }
/* งาน 122: ช่องที่ต้องช่วยเติม (ขอบเหลือง) · ช่องที่ระบบเพิ่งเติมให้ (ไฮไลต์สั้น ๆ) */
.field-need .pann-input, .field-need input, input.field-need { border-color: var(--pann-attention); background: var(--pann-attention-tint); }
.field-flash .pann-input, .field-flash input, input.field-flash { background: var(--pann-success-tint); transition: background .4s; }
/* งาน 131z: หน้าเข้าสู่ระบบ = ทางผ่านไปหน้ากลาง · โลโก้มุมซ้ายบน = เมนูสลับแอป */
.login-going { display: none; text-align: center; }
body.login-wait .login-going { display: block; }
body.login-away #via-msg { display: none; }
body.login-wait #login-form, body.login-wait #social, body.login-wait #links, body.login-wait #login-head, body.login-wait .legal-foot-links,
body.login-notice #login-form, body.login-notice #links, body.login-notice .auth-or { display: none; }
/* งาน 140z: โลโก้ = จุดยึดตัวสลับแอปกลาง (เมนูและลูกศรเป็นของสคริปต์กลาง) · .is-link = ตัวสลับแอปใช้ไม่ได้ กดไปหน้าแรก */
/* งาน 127: ลงนามสัญญา — ลายเซ็นของฉัน · รายการ (ตัวกรอง/เลือกหลายฉบับ) · กล่องลิงก์ลงนาม · หน้าลงนามสาธารณะ */
.sig-show { border: 1px solid var(--pann-line); border-radius: var(--pann-r-ctl); background: var(--pann-surface); padding: var(--pann-s3); max-width: 420px; }
.sig-show img { display: block; max-width: 100%; max-height: 140px; }
.ct-filters { margin: var(--pann-s3) 0; }
.ct-line { display: flex; align-items: center; gap: var(--pann-s2); }
.ct-line > a { flex: 1; min-width: 0; }
.ct-line { flex-wrap: wrap; }
.ct-why { flex-basis: 100%; font-size: var(--pann-t-small); margin: 0 0 var(--pann-s2); overflow-wrap: anywhere; }   /* งาน 152: เหตุผลที่ยกเลิกใต้แถว (แท็บยกเลิก) */
.ct-pick { margin: 0; padding: var(--pann-s2); cursor: pointer; }
.ct-bulk { display: flex; align-items: center; gap: var(--pann-s3); padding: var(--pann-s2) var(--pann-s3); border-radius: var(--pann-r-ctl); background: var(--pann-brand-soft); margin-bottom: var(--pann-s2); }
.ct-cosign { margin: var(--pann-s4) 0 var(--pann-s2); padding: var(--pann-s3); border: 1px solid var(--pann-brand-line); border-radius: var(--pann-r-ctl); background: var(--pann-brand-soft); }
.ct-link { margin-top: var(--pann-s3); }
.ct-qr img { display: block; margin: var(--pann-s3) auto; }
.sg-page .pann-card { display: grid; gap: var(--pann-s3); }
.sg-title { margin: 0; }
.sg-paper { max-height: 55vh; }
.sg-wide { width: 100%; min-height: 56px; }
.sg-note { font-size: var(--pann-t-small); }
/* งาน 153: ล.ย.01 = แนะนำ — การ์ดสถานะในหน้าเอกสาร · กล่องแนะนำบนหน้าแรก · บรรทัดข้อมูลในรายชื่อพนักงาน (สีกลางทั้งหมด ไม่ใช้สีเตือน/แดง) */
.doc-ly-wrap { margin-top: var(--pann-s3); }
.doc-ly01 { border-style: solid; }
.doc-ly-state { margin: var(--pann-s2) 0; }
.doc-ly-acts { margin: var(--pann-s2) 0; }
.doc-paper { margin-top: var(--pann-s2); }
.doc-paper > summary { cursor: pointer; color: var(--pann-fg-muted); font-size: var(--pann-t-small); }
.doc-paper .doc-drop { margin-top: var(--pann-s2); }
.ly-hint { margin-bottom: var(--pann-s4); }
.ly-hint h2 { margin: 0 0 var(--pann-s1); }
.ly-hint p { margin: 0 0 var(--pann-s3); }
.ly-hint small { display: block; margin-top: var(--pann-s2); }
.ly-info { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pann-s2); margin: 0 0 var(--pann-s3); }
.ly-quick { margin-top: var(--pann-s3); }
/* งาน 148: หน้าลงนามแบ่ง 3 ขั้นทีละหน้าจอ */
.sg-steps { display: flex; align-items: center; gap: var(--pann-s2); margin: 0 0 var(--pann-s4); }
@media (max-width: 560px) { .sg-steps { margin-top: 36px; justify-content: space-between; } }   /* จอแคบ: หลบปุ่มสลับภาษาที่ลอยมุมขวาบน */
.sg-step { display: inline-flex; align-items: center; gap: var(--pann-s2); font-size: var(--pann-t-small); color: var(--pann-fg-muted); white-space: nowrap; }
.sg-step.is-current { color: var(--pann-fg); font-weight: 600; }
.sg-steps .pann-steps__bar { min-width: 12px; }
.sg-steps-intro { display: block; margin-top: var(--pann-s1); }
.sg-bar { position: sticky; bottom: 0; z-index: 5; margin: var(--pann-s3) calc(-1 * var(--pann-s4)) calc(-1 * var(--pann-s4)); padding: var(--pann-s3) var(--pann-s4); background: var(--pann-surface); border-top: 1px solid var(--line); text-align: center; }
.sg-bar__text { display: block; padding: var(--pann-s3) 0; font-weight: 600; color: var(--pann-fg-muted); }
.sg-bar .pann-btn, .sg-send, #sg-back { min-height: 48px; }
.sg-field { border: 2px solid transparent; border-radius: var(--pann-r-ctl); padding: var(--pann-s2); margin: 0 calc(-1 * var(--pann-s2)) var(--pann-s2); }
.sg-field.sg-need { border-color: var(--pann-danger); background: var(--pann-danger-tint); }
.sg-err { display: block; color: var(--pann-danger); font-weight: 600; margin-top: var(--pann-s1); }
.sg-err.hidden { display: none; }
.sg-agree { font-size: var(--pann-t-body); min-height: 48px; align-items: center; }
.sg-as { margin: 0 0 var(--pann-s2); }
.sg-pad-wrap { position: relative; }
.sg-pad-wrap .ct-pad { width: 100%; display: block; touch-action: none; }
.sg-pad-hint { position: absolute; inset: 0; display: grid; place-items: center; color: var(--pann-fg-muted); pointer-events: none; font-size: var(--pann-t-h2); opacity: .55; }
.sg-pad-hint.hidden { display: none; }
.sg-pad-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--pann-s2); margin-top: var(--pann-s1); }
.sg-pad-foot .pann-btn { margin-left: auto; }
.sg-selfie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pann-s2); margin: var(--pann-s2) 0 var(--pann-s3); }
.sg-selfie-img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--pann-r-ctl); border: 1px solid var(--line); vertical-align: middle; margin-right: var(--pann-s2); }
.sg-send { margin-bottom: var(--pann-s2); }
.sg-small { min-height: 40px; padding: 6px 12px; font-size: var(--pann-t-small); }
.sg-legal { margin-top: var(--pann-s3); }
/* งาน 146: หน้าต่างซ้อนอ่านเอกสารของหน้าลงนาม (ภาพทีละหน้า · ปุ่มปิดติดบนเสมอ) */
.sg-viewer { position: fixed; inset: 0; z-index: 200; background: var(--pann-bg); display: flex; flex-direction: column; }
.sg-viewer__bar { display: flex; gap: var(--pann-s3); align-items: center; justify-content: space-between; padding: var(--pann-s3) var(--pann-s4); border-bottom: 1px solid var(--line); background: var(--pann-surface); }
.sg-viewer__bar .pann-btn--primary { min-height: 48px; flex: 1 1 200px; }
.sg-viewer__bar { flex-wrap: wrap; }   /* งาน 231: ปิด · พิมพ์ · ดาวน์โหลด — จอแคบขึ้นเป็นสองแถว เห็นครบโดยไม่ต้องเลื่อน */
.sg-files { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pann-s2); flex: 1 1 260px; margin: var(--pann-s2) 0 0; }
.sg-viewer__bar .sg-files { margin: 0; }
.sg-file { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.sg-ico { flex: none; }
.sg-print-frame { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; visibility: hidden; }
.sg-viewer__pages { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: var(--pann-s3); text-align: center; }
.sg-viewer__page { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto var(--pann-s3); border: 1px solid var(--line); background: var(--pann-surface); }
body.sg-viewing { overflow: hidden; }
/* งาน 141z: หน้าลงนามเปิดไม่สำเร็จ / เปิดในแอป LINE · ประวัติลิงก์ในหน้าสัญญา */
.sg-line-help { margin-top: var(--pann-s4); padding-top: var(--pann-s3); border-top: 1px solid var(--line); }
.sg-ref { margin-top: var(--pann-s3); }
.ct-link-history { margin: var(--pann-s2) 0; font-size: var(--pann-t-small); color: var(--pann-fg-muted); }
.ct-link-history ul { margin: var(--pann-s2) 0 0; padding-left: 1.2em; }
.ct-link-foot { margin: var(--pann-s2) 0 0; font-size: var(--pann-t-small); }
/* งาน 141: หน้าลงนามแบบตัวอย่างของฝ่ายบุคคล */
.sg-preview-bar { position: sticky; top: 0; z-index: 2; font-weight: 600; }
.sg-preview-box { border: 1px dashed var(--line); border-radius: var(--pann-r-ctl); padding: var(--pann-s4); margin: 0 0 var(--pann-s4); min-width: 0; }
.sg-last4 { font-size: var(--pann-t-h1); letter-spacing: 0.4em; text-align: center; max-width: 220px; }
.sg-ok { padding: var(--pann-s3) var(--pann-s4); border-radius: var(--pann-r-ctl); background: var(--pann-success-tint); color: var(--pann-success); font-weight: 600; }
/* งาน 125: กล่องกว้าง + แถวกระชับ (App.form size: "wide" · layout: "rows") — ช่องจำนวนเงินจำนวนมากเห็นครบในจอเดียว */
.modal.modal-wide { max-width: min(92vw, 900px); }
.modal.modal-rows { padding-bottom: 0; }
.modal.modal-rows .modal-msg { color: var(--pann-fg-muted); font-size: var(--pann-t-small); }
.rows-tools { display: flex; justify-content: flex-end; margin: var(--pann-s2) 0; }
.rows-tools .pann-chip { height: 36px; font-size: var(--pann-t-small); }
.rows-cols { display: grid; gap: 0 var(--pann-s6, 24px); }
.rows-col h3 { margin: var(--pann-s2) 0; padding-bottom: var(--pann-s1, 4px); border-bottom: 2px solid var(--pann-line); font-size: var(--pann-t-body); }
.rows-row { display: flex; align-items: center; justify-content: space-between; gap: var(--pann-s3); min-height: 40px; margin: 0; padding: 2px var(--pann-s2); border-bottom: 1px solid var(--pann-line); font-weight: 400; cursor: text; }
.rows-row.is-set { background: var(--pann-brand-soft); font-weight: 600; }
.rows-name { min-width: 0; overflow-wrap: anywhere; }
.rows-name small { font-weight: 400; }
.rows-row input.rows-amt { flex: 0 0 140px; width: 140px; min-height: 0; height: 34px; margin: 0; padding: 2px var(--pann-s2); text-align: right; font-variant-numeric: tabular-nums; }
.rows-only .rows-row:not(.is-set) { display: none; }
.rows-foot { position: sticky; bottom: 0; margin: var(--pann-s3) calc(-1 * var(--pann-s4)) 0; padding: var(--pann-s3) var(--pann-s4) calc(var(--pann-s3) + env(safe-area-inset-bottom)); background: var(--pann-surface); border-top: 1px solid var(--pann-line); display: flex; flex-wrap: wrap; align-items: center; gap: var(--pann-s3); }
.rows-totals { flex: 1 1 260px; display: flex; flex-wrap: wrap; gap: var(--pann-s1, 4px) var(--pann-s4); font-weight: 600; font-variant-numeric: tabular-nums; }
.rows-foot .modal-actions { margin: 0; flex: 0 1 280px; }
@media (min-width: 768px) { .rows-cols { grid-template-columns: 1fr 1fr; } }
html.m-ui .modal.modal-wide { max-width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
html.m-ui .rows-foot .modal-actions { flex: 1 1 100%; }
/* งาน 124: ชื่อพนักงานในตาราง/รายการ — ชื่อจริงบรรทัดบน · ชื่อเล่นบรรทัดล่าง (ตัวเล็ก สีจาง ไม่มีวงเล็บ) */
.pn { display: inline-block; vertical-align: top; max-width: 100%; }
.pn-name { display: block; overflow-wrap: anywhere; }
.pn-nick { display: block; font-size: var(--pann-t-small); color: var(--pann-fg-muted); line-height: 1.3; }
/* งาน 121z: ม่านล็อกบนหน้าเดิม (สลับไปที่อื่นนานเกินกำหนด) — เนื้อหาถูกซ่อน ฟอร์มที่กรอกค้างอยู่ครบหลังปลดล็อก */
.ses-curtain { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: var(--pann-s4); background: var(--pann-bg); }
.ses-curtain__box { max-width: 420px; text-align: center; display: grid; gap: var(--pann-s3); justify-items: center; }
.ses-curtain__box h2 { margin: 0; }
/* งาน 144z: กล่องใส่ PIN / ยืนยันตัวที่เปิดระหว่างล็อกต้องอยู่เหนือม่าน (เดิมอยู่ใต้ม่าน — เห็นแต่ปุ่มปลดล็อกสีจาง เหมือนหน้าค้าง) */
body.ses-locked > .modal-back { z-index: 1000; }
.info-dot { border: 0; background: none; color: var(--ink-soft); font-size: 1rem; line-height: 1; padding: 2px 4px; cursor: pointer; vertical-align: middle; border-radius: 50%; }
.info-dot:hover, .info-dot[aria-expanded="true"] { color: var(--brand); }
.info-text { display: block; font-size: .9rem; font-weight: 400; color: var(--ink-soft); background: var(--brand-soft); border-radius: 8px; padding: 8px 10px; margin: 6px 0; }
.info-text.hidden { display: none; }
/* ตั้งค่า → แจ้งเตือน (งาน 069) */
.ntf-events { margin: 8px 0; }
.ntf-events .check { margin: 6px 0; }
.ntf-steps { padding-left: 20px; margin: 8px 0; }
.ntf-steps li { margin: 4px 0; }
.ntf-sample { background: var(--pann-neutral-tint); border: 1px solid var(--line); border-radius: var(--pann-r-ctl); padding: 10px; overflow-x: auto; font-size: .82rem; }
.ntf-new { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 4px; }
.ntf-new .btn-row .grow { flex: 1 1 220px; }

/* แถบ "เลือกแล้ว N คน" ของรายการพนักงาน (งาน 066) */
.pick-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--pann-r-ctl); background: var(--card); }
.pick-bar b { margin-right: auto; }

/* โลโก้บริษัท (งาน 063) */
.emp-logo { height: 24px; max-width: 72px; object-fit: contain; vertical-align: middle; margin-right: 6px; }
.doc-logo { display: block; height: 48px; max-width: 220px; object-fit: contain; margin-bottom: 6px; }
/* งาน 134: รูปลายเซ็นของฝ่ายที่ลงนามแล้ว — เหนือเส้นลงชื่อในเนื้อหา และรูปย่อในแถวสถานะ */
.ct-signed { margin: 6px 0 0; }
.ct-signed-img { height: 1.4cm; max-width: 6cm; display: block; }
.ct-sign-thumb { margin-right: var(--pann-s3); }
.ct-sign-thumb .ct-signed-img { height: 36px; max-width: 120px; background: var(--pann-surface); border: 1px solid var(--line); border-radius: var(--pann-r-ctl); padding: 2px 6px; }
.ct-logo { min-height: 4px; }
.ct-logo .doc-logo { height: 2cm; max-width: 9cm; }
.logo-previews { display: flex; gap: 12px; flex-wrap: wrap; margin: 10px 0; }
.logo-box { flex: 1 1 180px; border: 1px solid var(--line); border-radius: var(--pann-r-ctl); padding: 14px; text-align: center; }
.logo-box img { display: block; height: 64px; max-width: 100%; object-fit: contain; margin: 0 auto 8px; }
.logo-box.logo-white { background: var(--pann-surface); color: var(--pann-fg-muted); }
.logo-box.logo-dark { background: var(--pann-brand-dark); color: var(--pann-line); border-color: var(--pann-brand-dark); }

/* แพ็กเกจและการชำระเงิน (งาน 072) */
.bill-bar { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; margin-bottom: 12px; }
.bill-bar i { display: block; height: 100%; background: var(--brand); }
.bill-bar.over i { background: var(--pann-attention); }
.bill-cycle { margin-bottom: 12px; }
.bill-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 10px; }
.bill-plan { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--pann-r-ctl); padding: 14px; background: var(--card); }
.bill-plan.now { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.bill-plan .btn { margin-top: auto; }
.bill-price { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.bill-price small { font-size: .85rem; font-weight: 400; }
.bill-due { border-color: var(--brand); }

/* PANN Jobs ฝั่งบริษัท (งาน 073) */
.jobs-line { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.jobs-ask { border-color: var(--brand); margin: 10px 0; }

/* ดึงข้อมูลบริษัทจากทะเบียน DBD (งาน 076) */
.dbd-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.dbd-warn { color: var(--pann-attention); }
.dbd-synced { display: block; margin-top: 4px; }
.dbd-suggest { border: 1px solid var(--pann-line); border-radius: var(--pann-r-ctl); background: var(--pann-surface); margin-top: 4px; max-height: 260px; overflow: auto; box-shadow: var(--pann-shadow-float); }
.dbd-pick { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--pann-line); padding: 10px 12px; cursor: pointer; font: inherit; color: inherit; }
.dbd-pick:last-child { border-bottom: 0; }
.dbd-pick:hover { background: var(--pann-neutral-tint); }
.dbd-pick small { display: block; opacity: .7; }

/* พร้อมจ่ายเงินเดือนไหม + เทียบกับไฟล์เดิม (งาน 080) */
/* งาน 114: เช็กลิสต์พร้อมจ่าย — ข้อละแถว รายชื่อพับไว้ กดจึงกาง */
.rdy-item { padding: var(--pann-s3) 0; border-bottom: 1px solid var(--pann-line); }
.rdy-item:last-child { border-bottom: 0; }
.rdy-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pann-s2) var(--pann-s3); }
.rdy-head { flex: 1 1 240px; min-width: 0; }
.rdy-info { border: 0; background: none; cursor: pointer; font: inherit; color: var(--pann-fg-muted); padding: 0 var(--pann-s1); min-width: 28px; min-height: 28px; border-radius: var(--pann-r-pill); }
.rdy-info[aria-expanded="true"] { color: var(--pann-brand-ink); background: var(--pann-brand-tint); }
.rdy-why { margin: var(--pann-s2) 0 0 40px; padding: var(--pann-s2) var(--pann-s3); border-radius: var(--pann-r-ctl); background: var(--pann-brand-soft); border: 1px solid var(--pann-brand-line); font-size: var(--pann-t-small); }
.rdy-people { margin: var(--pann-s2) 0 0 40px; }
.rdy-people ul { list-style: none; margin: 0; padding: 0; }
.rdy-people li { padding: var(--pann-s2) 0; border-bottom: 1px solid var(--pann-line); font-size: var(--pann-t-small); }
.rdy-people li:last-child { border-bottom: 0; }
.rdy-code { color: var(--pann-fg-muted); font-variant-numeric: tabular-nums; margin-right: var(--pann-s2); }
[data-rdy-list]::after { content: " \25BE"; }
[data-rdy-list][aria-expanded="true"]::after { content: " \25B4"; }
.flt-bar { display: flex; flex-wrap: wrap; gap: var(--pann-s2) var(--pann-s3); align-items: center; }
.flt-bar a { font-weight: 600; }
.rdy-mark { min-width: 28px; justify-content: center; font-weight: 700; }
.rdy-mark::before { content: none; }   /* ป้ายนี้มีเครื่องหมาย ✓ ! ✕ อยู่แล้ว ไม่ต้องมีจุดนำ */
.ntf-hint { margin-top: 14px; }
.cmp-diff { background: var(--pann-danger-tint); }
.cmp-off td:first-child { border-left: 3px solid var(--bad); }
[data-note] { min-width: 180px; }

/* เลข 13 หลักผิด (งาน 084) + แถบ "เลือกแล้ว n คน" ติดขอบล่างของจอ */
input.id13-bad { border-color: var(--bad); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pann-danger) 15%, transparent); }
.id13-msg { display: block; color: var(--bad); margin-top: 4px; }
.id13-msg.hidden { display: none; }
input.money-bad { border-color: var(--bad); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pann-danger) 15%, transparent); }
.money-msg { display: block; color: var(--bad); margin-top: 4px; font-size: 14px; }
.money-msg.hidden { display: none; }
.pick-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 30; margin: 0; max-width: calc(100vw - 24px); box-shadow: var(--pann-shadow-float); }
.pick-bar b { margin-right: 6px; }

/* แม่แบบสัญญากลาง: ปุ่มต่อแถว (งาน 086) — จอแคบห่อสองบรรทัดได้ */
.ctp-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex: 0 1 auto; }

/* ทางออกเมื่อมือถือที่ใช้ยืนยันสองชั้นหาย (งาน 087) */
.mfa-lost { font-size: 13px; margin-left: 6px; white-space: nowrap; }

/* กล่องใส่ PIN แบบแป้นตัวเลข 6 ช่อง (งาน 088) */
.pin-modal { position: relative; max-width: 360px; text-align: center; }
.pin-modal h2 { margin: 4px 36px 4px; }
.pin-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; font-size: 24px; line-height: 1; color: var(--pann-fg-muted); cursor: pointer; }
.pin-x:hover { background: var(--brand-soft); }
.pin-cells { display: flex; justify-content: center; gap: 10px; margin: 16px 0 6px; }
.pin-cell { width: 42px; height: 50px; border: 1.5px solid var(--line); border-radius: var(--pann-r-ctl); display: flex; align-items: center; justify-content: center; background: var(--pann-surface); }
.pin-cell.next { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.pin-cell.on::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); }
.pin-cells.shake { animation: pin-shake .36s ease; }
@keyframes pin-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
.pin-err { min-height: 22px; margin: 4px 0 8px; font-size: 14px; color: var(--bad); }
.pin-err.muted { color: var(--pann-fg-muted); }
.pin-bio { margin: 0 auto 10px; }
.pin-keys { display: grid; grid-template-columns: repeat(3, 68px); gap: 12px 22px; justify-content: center; align-items: center; margin: 4px 0 6px; }
.pin-key { width: 68px; height: 68px; border-radius: 50%; border: 1px solid var(--line); background: var(--pann-surface); font: inherit; font-size: 26px; font-weight: 600; color: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pin-key:hover { background: var(--brand-soft); }
.pin-key:active { background: var(--brand); color: var(--pann-on-brand); border-color: var(--brand); }
.pin-del { border-color: transparent; font-size: 24px; font-weight: 400; }
.pin-alt { border: 0; background: transparent; color: var(--brand); font: inherit; font-size: 13px; line-height: 1.25; cursor: pointer; padding: 4px 0; }
.pin-alt:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .pin-cells.shake { animation: none; } }

/* นำเข้าข้อมูลเงินเดือนจาก Excel (งาน 089) */
tr.pim-bad td { background: var(--bad-soft); }
.pim-notes { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }

/* หน้าผู้ดูแลระบบ: แถวกลุ่มกิจการกดกางรายละเอียด (งาน 090) */
tr.pf-acc { cursor: pointer; }
tr.pf-acc.open td { background: var(--brand-soft); }
.pf-owner, .pf-mail { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.pf-detail-box { padding: 6px 4px 10px; cursor: default; }
.pf-detail-box h3 { margin: 12px 0 6px; font-size: 15px; }
html.m-ui .pf-owner, html.m-ui .pf-mail { max-width: 170px; }

/* กล่องจับคู่คอลัมน์ของไฟล์นำเข้า (งาน 092) */
.cm-modal { max-width: 640px; }
.cm-box h3 { margin: 12px 0 6px; font-size: 15px; }
.cm-q { border: 1px solid var(--line); border-radius: var(--pann-r-ctl); padding: 10px 12px; margin: 8px 0; background: var(--brand-soft); }
.cm-q p { margin: 0 0 8px; }
.cm-q select, .cm-row select { width: auto; min-width: 11em; max-width: 100%; flex: 1 1 11em; }
.cm-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.cm-col { flex: 2 1 12em; min-width: 0; overflow-wrap: anywhere; }
.cm-box details { margin: 10px 0; }
.cm-box summary { cursor: pointer; font-weight: 600; }

/* เมนูค่าใช้จ่าย: เครื่องมือกลางฝังเป็น iframe (งาน 082) — ความสูงปรับตามที่เครื่องมือบอก */
.exw-frame { width: 100%; min-height: 520px; border: 0; display: block; background: transparent; }

.rdy-skip { padding: 1px 8px; font-size: var(--pann-t-small); margin-left: 2px; }   /* งาน 103: ปุ่มเล็ก "ไม่จ่ายผ่านระบบงวดนี้" ข้างชื่อ */
.rdy-out { margin-top: 8px; }
.btn-sub { font-weight: 400; font-size: .78em; opacity: .8; }   /* งาน 100: คำเล็กใต้ข้อความปุ่ม */
/* งาน 099: ช่องข้อมูลลับ (ปุ่มรูปตาในช่อง) · หมายเหตุเลขบัญชี · ไอคอนตาเล็กข้างค่าที่ซ่อน */
.secret-wrap { position: relative; }
.secret-wrap input { padding-right: 2.6em; }
.eye-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 6px; }
.secret-has { display: block; margin-top: 2px; }
.bank-note { display: block; margin-top: 2px; }
.bank-note.bad { color: var(--bad); }
.bank-note.warn { color: var(--warn); }
.eye-mini { border: 0; background: none; cursor: pointer; font-size: .95rem; line-height: 1; padding: 2px 4px; vertical-align: baseline; }
.eye-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.hid { letter-spacing: 1px; color: var(--pann-fg-muted); }
@media print { .eye-btn, .eye-mini, .eye-row { display: none !important; } }

/* ล.ย.01 ออนไลน์ (งาน 098): แถบขั้นตอน + แถวที่ค่าลดหย่อนเปลี่ยน */
.ly-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.ly-step { border: 1px solid var(--pann-line); background: var(--pann-surface); border-radius: var(--pann-r-pill); padding: 4px 10px; font: inherit; font-size: .88rem; color: var(--pann-fg-muted); cursor: pointer; }
.ly-step b { font-weight: 700; }
.ly-step.on { border-color: var(--pann-brand-ink); color: var(--pann-brand-ink); font-weight: 600; }
.ly-diff td { background: var(--pann-attention-tint); }
@media print { .ly-steps { display: none !important; } }

/* ลากไฟล์มาวาง (งาน 101 · dropzone.js) — กรอบเส้นประรอบช่องเลือกไฟล์ทุกจุด */
.dz { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 16px; margin: 6px 0; border: 2px dashed var(--pann-line); border-radius: var(--pann-r-ctl); color: var(--ink-soft); transition: border-color .12s, background .12s; max-width: 100%; }
.dz.dz-block { display: flex; }
.dz:hover { border-color: var(--brand); }
.dz:focus-visible { outline: 3px solid var(--brand-soft); border-color: var(--brand); }
.dz .dz-lead { font-weight: 600; }
.dz .dz-note { flex-basis: 100%; }
.dz > label.btn, .dz > input[type="file"] { margin: 0; }
.dz.dz-over { border-color: var(--brand-dark); border-style: solid; background: var(--brand-soft); color: var(--brand-dark); }
.dz.dz-bad { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }

/* การ์ดข้อมูลขอใบกำกับภาษี (งาน 106 · taxcard.js) */
#cert-card .btn-row { align-items: center; }
.txc-body { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-start; }
.txc-list { margin: 0; flex: 1 1 280px; }
.txc-list dt { color: var(--ink-soft); font-size: .9rem; margin-top: 10px; }
.txc-list dd { margin: 0; font-size: 1.15rem; font-weight: 600; overflow-wrap: anywhere; }
.txc-list dd.txc-big { font-size: 1.4rem; font-weight: 700; }
.txc-qr img, .txc-qr canvas { max-width: 220px; height: auto; }
.txc-side { display: grid; gap: var(--pann-s2); justify-items: center; max-width: 240px; text-align: center; }
.txc-manage { margin-top: var(--pann-s3); }
/* งาน 115: หน้าสาธารณะ "ข้อมูลสำหรับออกใบกำกับภาษี" (t.html) — แถวละบรรทัด ตัวใหญ่ ปุ่มคัดลอกต่อแถว */
body.tx-body { padding-bottom: 0; }
.tx-page { max-width: 560px; margin: 0 auto; padding: var(--pann-s4) var(--pann-gutter) var(--pann-s8); }
.tx-head { display: flex; align-items: center; gap: var(--pann-s3); margin-bottom: var(--pann-s3); padding-right: 96px; }
.tx-head h1 { margin: 0; font-size: var(--pann-t-h2); }
.tx-head img { max-height: 48px; max-width: 120px; display: block; }
.tx-row { display: flex; align-items: center; gap: var(--pann-s3); padding: var(--pann-s3) 0; border-top: 1px solid var(--pann-line); }
.tx-text { flex: 1; min-width: 0; }
.tx-value { font-size: var(--pann-t-h2); font-weight: 600; overflow-wrap: anywhere; }
.tx-value.tx-big { font-size: var(--pann-t-h1); font-weight: 700; }
.tx-row .pann-btn { flex: none; white-space: nowrap; }
@media (max-width: 480px) { .tx-value.tx-big { font-size: var(--pann-t-h2); } }
.tx-head span:empty { display: none; }
.tx-row .pann-btn.is-done, .tx-all.is-done { background: var(--pann-success); border-color: var(--pann-success); color: var(--pann-on-brand); }
.tx-all { width: 100%; margin-top: var(--pann-s4); min-height: 56px; }
.tx-note { margin: var(--pann-s3) 0 0; }
.tx-foot { display: flex; align-items: center; justify-content: center; gap: var(--pann-s2); margin-top: var(--pann-s4); }

/* รูปลงเวลา (งาน 109): รูปย่อบนการ์ดลงเวลา + หน้าต่างดูรูปใหญ่ (photo-view.js) */
.clock-thumb { padding: 0; border: 1px solid var(--line); border-radius: var(--pann-r-ctl); background: var(--pann-surface); width: 48px; height: 48px; overflow: hidden; flex: 0 0 auto; cursor: pointer; vertical-align: middle; }
.clock-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clock-done { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.clock-done.hidden { display: none; }
.clock-photo { min-height: 0; padding: 4px 8px; }
.photo-view { position: fixed; inset: 0; z-index: 80; background: color-mix(in srgb, var(--pann-fg) 88%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; }
.photo-view img { max-width: 100%; max-height: calc(100vh - 110px); border-radius: var(--pann-r-ctl); background: var(--pann-surface); }

/* ภาษีประจำปี (งาน 057) */
.pit-table td.num, .pit-table th.num { text-align: right; white-space: nowrap; }
.pit-table .pit-no { width: 2.6em; color: var(--pann-fg-muted); }
.pit-num { width: 9.5em; max-width: 100%; text-align: right; }
.pit-yearin { width: 6.5em; }
.pit-sel { margin-top: 4px; }
.pit-auto { font-weight: 600; }
.pit-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.pit-row input[type="text"]:not(.pit-num):not(.pit-yearin) { flex: 1 1 10em; min-width: 0; }
.pit-year select { width: auto; display: inline-block; }
.pit-acts { white-space: nowrap; text-align: right; }
.pit-acts .btn { margin-left: 4px; }
.pit-result { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border: 2px solid currentColor; border-radius: var(--pann-r-ctl); padding: 12px 14px; margin: 8px 0 4px; }
.pit-result b { font-size: 1.7rem; }
.pit-result.pay { color: var(--bad); }
.pit-result.refund { color: var(--ok); }
@media print { .pit-num { border: 0; } #pit-tools { display: none !important; } }

/* งาน 134: แถบปุ่มติดขอบล่างของ PANN HR (งาน 113) — คงการทำงานเดิมหลังเปลี่ยนไฟล์ระบบดีไซน์เป็น v1.2 (ไฟล์กลางมีแถบแบบทั่วไป · ของเฉพาะ HR อยู่ที่นี่)
   มือถือ: อยู่เหนือแถบเมนูล่าง (--pann-tabbar-real ที่ app.js วัดให้ — รวมขอบล่างของเครื่องแล้ว · งาน 211z) ปุ่มแบ่งครึ่ง · กำลังพิมพ์ (.is-typing) = ไม่ลอยทับช่องกรอก */
.pann-actionbar { z-index: 15; justify-content: flex-end; padding: var(--pann-s3) var(--pann-s4); margin-top: var(--pann-s4); border-radius: var(--pann-r-ctl) var(--pann-r-ctl) 0 0; }
.pann-actionbar__note { margin-right: auto; min-width: 0; color: var(--pann-fg-muted); font-size: var(--pann-t-small); }
.pann-actionbar.is-dirty .pann-actionbar__note { color: var(--pann-attention); font-weight: 600; }
.pann-back { padding-right: var(--pann-s3); }
@media (max-width: 899px) {
  .pann-actionbar { bottom: var(--pann-tabbar-real, 0px); }
  .pann-actionbar > .pann-btn, .pann-actionbar > button, .pann-actionbar > a { flex: 1; }
  .pann-actionbar__note { display: none; }
  .pann-actionbar.is-typing { position: static; }
}

/* งาน 200: ระบบทดสอบ (staging) — แถบบนสุดทุกหน้า สีเด่น · ของจริงไม่มีแถบนี้ (i18n.js วาดเมื่อ config.js ตั้ง STAGING) */
.staging-bar { position: sticky; top: 0; z-index: 2000; background: var(--pann-attention); color: var(--pann-surface); text-align: center; padding: 6px 16px; font-weight: 600; font-size: 14px; }
@media print { .staging-bar { display: none; } }

/* งาน 214z: ช่องติ๊ก "ต้องลงเวลาเข้า-ออก" ในฟอร์มพนักงาน — แนวเดียวกับช่องข้าง ๆ · ⓘ กางคำอธิบายสั้น */
.tm-field { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-top: 26px; }
.tm-field .check { margin: 0; }
.tm-why summary { list-style: none; cursor: pointer; color: var(--pann-brand-ink); font-size: 16px; }
.tm-why summary::-webkit-details-marker { display: none; }
.tm-why[open] { flex-basis: 100%; }

/* งาน 217: สรุปจ่ายเงินเดือน · ภาพรวมผู้บริหาร */
.po-table th, .po-table td { padding: 6px 8px; border-bottom: 1px solid var(--pann-line); vertical-align: top; }
.po-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.po-total td { font-weight: 700; border-top: 2px solid var(--pann-line); }
.po-name, .po-open { background: none; border: 0; padding: 0; font: inherit; color: var(--pann-brand-ink); cursor: pointer; text-align: inherit; }
.po-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--pann-fg-muted); }
.po-card { border: 1px solid var(--pann-line); border-radius: 10px; padding: 10px 12px; margin: 8px 0; display: grid; gap: 6px; }
.po-card-top { display: flex; justify-content: space-between; gap: 8px; }
.po-bar { display: block; height: 10px; border-radius: 5px; background: var(--pann-brand); min-width: 2px; }
/* งาน 235: แท็บกลุ่มสรุป (คนไทย/คนจีน …) — มือถือเลื่อนแนวนอน · ลากเรียงได้ */
.po-tabs { display: flex; gap: var(--pann-s2); overflow-x: auto; padding: var(--pann-s1) 0 var(--pann-s2); margin-bottom: var(--pann-s2); border-bottom: 1px solid var(--pann-line); -webkit-overflow-scrolling: touch; }
.po-tab { flex: 0 0 auto; white-space: nowrap; border: 1px solid var(--pann-line); background: var(--pann-surface); color: var(--pann-fg); border-radius: var(--pann-r-pill); padding: 6px 14px; font: inherit; cursor: pointer; }
.po-tab.is-on { background: var(--pann-brand); border-color: var(--pann-brand); color: var(--pann-on-brand); font-weight: 600; }
.po-tab[draggable="true"] { cursor: grab; }
.po-default { display: inline-flex; align-items: center; gap: var(--pann-s1); font-size: 14px; white-space: nowrap; }
.po-default select { max-width: 150px; }
.po-note { font-size: 13px; margin: var(--pann-s1) 0 var(--pann-s2); }
.po-tools { align-items: center; margin: 10px 0; }

/* งาน 223: เวลาที่ใช้คิด — เวลาจริงตัวเล็กใต้เวลาที่ใช้คิด · ดินสอเล็ก · กล่องปรับเวลา */
.ts-t .ts-real { display: block; font-size: var(--pann-t-small); color: var(--pann-fg-muted); font-weight: 400; }
.ts-t .ts-pen { color: var(--pann-brand-ink); font-size: var(--pann-t-small); }
.ta-form { margin-top: var(--pann-s3); padding-top: var(--pann-s3); border-top: 1px solid var(--pann-line); }
.ta-form h3 { margin: 0 0 var(--pann-s2); }
.ta-preview { font-weight: 600; color: var(--pann-brand-ink); }
.ta-history { padding-left: 18px; margin: var(--pann-s2) 0 0; }
.ta-mine { margin-top: var(--pann-s3); }

/* งาน 224: หน้าแจ้งเตือน HR — แท็บหมวด · ตัวกรองสถานะ · แถวเลยกำหนด = ตัวอักษรแดงที่ช่องครบกำหนด */
.hra-head { display: flex; align-items: center; justify-content: space-between; gap: var(--pann-s3); flex-wrap: wrap; }
.hra-tabs, .hra-states { display: flex; flex-wrap: wrap; gap: var(--pann-s2); margin: var(--pann-s3) 0; }
.hra-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pann-s3); }
.hra-tools .pann-input { max-width: 280px; }
.hra-over { color: var(--pann-danger); font-weight: 600; }
.hra-acts { flex-wrap: wrap; gap: var(--pann-s2); }
.hra-card { margin-bottom: var(--pann-s3); }
.hra-card p { margin: var(--pann-s2) 0; }

/* งาน 228 (ก): เงินเดือนเดือนนี้จาก Excel → ภ.ง.ด.1 (web/payroll-excel.js) */
.xm-entry .btn-row { gap: var(--pann-s2); }
.xm-more { position: relative; }
.xm-more > summary { list-style: none; cursor: pointer; }
.xm-more > summary::-webkit-details-marker { display: none; }
.xm-menu { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 260px; padding: var(--pann-s2) 0; background: var(--pann-surface); border: 1px solid var(--pann-line);
  border-radius: var(--pann-r-ctl); box-shadow: var(--pann-shadow-float); }
.xm-menu a { display: block; padding: var(--pann-s2) var(--pann-s4); color: var(--pann-brand-ink); text-decoration: none; }
.xm-menu a:hover, .xm-menu a:focus-visible { background: var(--pann-bg); }
.xm-steps { display: flex; gap: var(--pann-s2) var(--pann-s4); flex-wrap: wrap; margin: var(--pann-s3) 0; padding: 0; list-style: none; counter-reset: xm; color: var(--pann-fg-muted); }
.xm-steps li { counter-increment: xm; }
.xm-steps li::before { content: counter(xm) ". "; }
.xm-steps li.is-current { color: var(--pann-fg); font-weight: 600; }
.xm-steps li.is-done::after { content: " ✓"; color: var(--pann-success); }
.xm-table td, .xm-table th { vertical-align: middle; }
.xm-id { width: 150px; max-width: 100%; }
.xm-new { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pann-s2); margin-top: var(--pann-s2); }
.xm-items { margin: var(--pann-s3) 0; }
/* งาน 234: ผลตรวจยอดกับแถวรวมของไฟล์ทีละชีต · รายการที่ไม่รู้จัก · งาน 241: กรอบรับไฟล์กรอบเดียว + รายการไฟล์ลบทีละไฟล์ + แถบกำลังอ่าน */
.xm-files { list-style: none; padding: 0; margin: var(--pann-s2) 0; display: flex; flex-wrap: wrap; gap: var(--pann-s2); }
.xm-files li { display: inline-flex; align-items: center; gap: var(--pann-s2); padding: 2px 2px 2px var(--pann-s3); border: 1px solid var(--pann-line); border-radius: var(--pann-r-card); max-width: 100%; }
.xm-files li span { overflow-wrap: anywhere; }
.xm-period.is-dim select { opacity: .55; }
.xm-reading { display: flex; align-items: center; gap: var(--pann-s2); padding: var(--pann-s3); border-radius: var(--pann-r-card); background: var(--pann-bg); color: var(--pann-fg-muted); }
.xm-spin { width: 16px; height: 16px; flex: none; border: 2px solid var(--pann-line); border-top-color: var(--pann-fg); border-radius: 50%; animation: xm-spin .8s linear infinite; }
@keyframes xm-spin { to { transform: rotate(360deg); } }
/* งาน 250: แถบความคืบหน้าบนสุดของทุกหน้า (App.api) — บาง ติดจอ · % จริงเมื่อรู้ · ไม่รู้ = แถบวิ่ง */
.hr-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 2000; display: none; pointer-events: none; }
.hr-progress.is-on { display: block; }
.hr-progress__track { height: 3px; background: var(--pann-line); overflow: hidden; }
.hr-progress__fill { display: block; height: 100%; width: 0; background: var(--pann-brand); transition: width .3s ease; }
.hr-progress.is-busy .hr-progress__fill { width: 35%; animation: hr-progress-run 1.2s ease-in-out infinite; }
@keyframes hr-progress-run { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.hr-progress__text { position: absolute; top: calc(var(--pann-header-h, 64px) + 6px); left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 2px 10px; border-radius: 999px;
  background: var(--pann-fg); color: var(--pann-bg); font-size: 12px; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--pann-shadow-float); }
@media (prefers-reduced-motion: reduce) { .hr-progress.is-busy .hr-progress__fill { animation: none; width: 100%; opacity: .5; } }
/* งาน 249z: แถบความคืบหน้าตรงที่ผู้ใช้เพิ่งกด (% + ขั้น + เวลา) · แท็บที่ไม่ใช้จางลง · คนที่ไม่พบ เลือกทางต่อแถว */
.xm-status:empty { display: none; }
.xm-status { margin: var(--pann-s2) 0; }
.xm-progress { flex-wrap: wrap; }
.xm-progress-text { flex: 1 1 12em; color: var(--pann-fg); }
.xm-bar { flex: 1 1 8em; height: 8px; border-radius: 4px; background: var(--pann-line); overflow: hidden; }
.xm-bar > span { display: block; height: 100%; background: var(--pann-brand); transition: width .4s ease; }
.xm-pct { min-width: 3em; text-align: right; color: var(--pann-fg); }
.xm-elapsed { color: var(--pann-fg-muted); }
.sticky-tools .xm-status { margin: var(--pann-s2) 0 0; }
.xm-tabs tr.xm-off td { opacity: .55; }
.xm-tabs tr.xm-off td.xm-use { opacity: 1; }
.xm-use { width: 3.5em; text-align: center; }
.xm-use input { width: 20px; height: 20px; }
.xm-make > summary { cursor: pointer; }
.xm-who-row { justify-content: space-between; padding: var(--pann-s2) 0; border-bottom: 1px solid var(--pann-line); margin-top: 0; }
.xm-who-row.is-open .xm-who { border-color: var(--pann-attention); }
.xm-who-name { flex: 1 1 14em; overflow-wrap: anywhere; }
.xm-who { max-width: 100%; flex: 0 1 18em; }
.xm-skipped ul { list-style: none; padding: 0; margin: var(--pann-s2) 0; }
.xm-skipped li { padding: 2px 0; }
.xm-checks { margin: var(--pann-s3) 0; }
.xm-checks > ul { list-style: none; padding: 0; margin: var(--pann-s2) 0; }
.xm-sheet { padding: var(--pann-s2) 0; border-bottom: 1px solid var(--pann-line); }
.xm-sheet ul { margin: var(--pann-s1) 0 0 var(--pann-s5); color: var(--pann-danger); }
.xm-extra { display: flex; flex-wrap: wrap; gap: var(--pann-s2) var(--pann-s3); align-items: center; padding: var(--pann-s1) 0; }
.xm-extra > span { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.xm-extra select { max-width: 180px; }
.xm-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pann-s2) var(--pann-s3); padding: var(--pann-s1) 0; }
.xm-group > span { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.xm-group input { max-width: 240px; }
.xm-period { display: grid; gap: var(--pann-s1); }
.xm-period-pick { display: flex; gap: var(--pann-s2); flex-wrap: wrap; }
.xm-period-pick select { max-width: 160px; }
.xm-month-card { border: 1px solid var(--pann-line); border-radius: var(--pann-r-ctl); padding: var(--pann-s3); margin: var(--pann-s2) 0; display: grid; gap: var(--pann-s1); }
.xm-month-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pann-s2); }
.xm-done-list { list-style: none; padding: 0; display: grid; gap: var(--pann-s2); }
.xm-menu small { display: block; }
.xm-raise-down td { background: var(--pann-attention-tint); }
.xm-raise-mode { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--pann-s2); margin-bottom: var(--pann-s2); }
.xm-raises input[type=date] { max-width: 170px; }
.xm-tpl { align-items: center; }
.xm-raises small { display: block; }
/* งาน 228 (ข)(ค)(ง): หน้า "รอดำเนินการ" · การ์ดประกาศบนหน้าแรก · บันทึกผ่านทดลองงานทีละหลายคน */
/* งาน 216/232z: ตารางของ "ตั้งต้นจากไฟล์เดิม" (หน้าเดี่ยว + ในหน้าพนักงาน) */
.wb-table td, .wb-table th { padding: 6px 8px; border-bottom: 1px solid var(--pann-line); text-align: left; vertical-align: top; }
.wb-heads { color: var(--pann-fg-muted); font-size: 14px; }
.wb-res { border: 1px solid var(--pann-line); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.wb-res.is-bad { border-color: var(--pann-danger); }
.inbox-tabs { margin: 0 0 var(--pann-s3); }
.inbox-n { font-weight: 600; }
.ann-home { padding: var(--pann-s3) 0; border-top: 1px solid var(--pann-line); }
.ann-home:first-of-type { border-top: 0; padding-top: 0; }
.ann-home__body p { margin: 2px 0; color: var(--pann-fg-muted); }
.ann-home__all { display: inline-block; margin-top: var(--pann-s2); color: var(--pann-brand-ink); font-weight: 600; }
.me-ann-link { margin: var(--pann-s3) 0; }
.hra-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pann-s2); margin: 0 0 var(--pann-s3); }
.hra-pick { width: 18px; height: 18px; vertical-align: middle; }
/* งาน 230: สวิตช์ "ลงเวลา" ในแถวพนักงาน */
.tm-row { display: inline-flex; align-items: center; gap: var(--pann-s2); flex-wrap: wrap; }
.tm-switch { position: relative; width: 44px; height: 26px; flex: none; border: 0; border-radius: var(--pann-r-pill); background: var(--pann-line); cursor: pointer; padding: 0; }
.tm-switch[aria-checked="true"] { background: var(--pann-brand); }
.tm-switch .tm-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--pann-surface); box-shadow: var(--pann-shadow); transition: left .15s; }
.tm-switch[aria-checked="true"] .tm-knob { left: 21px; }
.tm-switch:focus-visible { outline: 2px solid var(--pann-brand-ink); outline-offset: 2px; }
.tm-link { border: 0; background: none; padding: 0; color: var(--pann-brand-ink); font-size: var(--pann-t-small); cursor: pointer; text-decoration: underline dotted; }
button.tm-sub.pann-pill { border: 0; cursor: pointer; }
.tm-places { display: block; margin-top: 2px; }

/* ================================================================ หน้าตามือถือ (งาน 028)
   ทุกกฎขึ้นต้นด้วย html.m-ui (web/mobile.js ใส่ให้เมื่อจอกว้าง < 768px หรือเปิดแบบแอปที่ติดตั้ง) — บนคอมไม่มี class นี้ หน้าตาเดิมไม่เปลี่ยน
   ของที่มีเฉพาะมือถือใช้ .m-only (ปกติซ่อน) · ของที่ซ่อนบนมือถือใช้ .m-hide */
.m-only { display: none; }
html.m-ui .m-only { display: block; }
html.m-ui .m-hide { display: none; }
html.m-ui body { overscroll-behavior-y: contain; }

/* แถบบอกว่าออฟไลน์ (ขึ้นเฉพาะตอนไม่มีเน็ต) */
.offline-bar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 70; background: var(--warn); color: var(--pann-on-brand); text-align: center;
  font-size: .85rem; padding: calc(4px + env(safe-area-inset-top)) 12px 4px;
}

/* หัว: แตะชื่อบริษัท (มุมซ้ายบน · งาน 203) แล้วเลือกจากแผ่นด้านล่าง */
html.m-ui .firm-host { max-width: 70vw; }

/* แผ่นเลื่อนจากล่าง */
.m-sheet-back { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--pann-fg) 45%, transparent); display: flex; align-items: flex-end; justify-content: center; }
.m-sheet {
  background: var(--card); width: 100%; max-width: 560px; max-height: 80vh; max-height: 80dvh; display: flex; flex-direction: column;
  border-radius: var(--pann-r-card) var(--pann-r-card) 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: var(--pann-shadow-float);
  animation: m-up .18s ease-out;
}
.m-sheet::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 6px; flex: none; }
.m-sheet-head { display: flex; align-items: center; gap: 8px; padding: 4px 0 8px; font-size: 1.05rem; }
.m-sheet-head b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-sheet-x { border: 0; background: transparent; font-size: 1.1rem; min-width: 44px; min-height: 44px; color: var(--ink-soft); cursor: pointer; }
.m-sheet-body { overflow: auto; -webkit-overflow-scrolling: touch; }
.m-sheet-group { font-size: .8rem; color: var(--ink-soft); padding: 10px 4px 4px; }
.m-sheet-item {
  display: block; width: 100%; text-align: left; min-height: var(--tap); padding: 12px; border: 0; border-radius: var(--pann-r-ctl); background: transparent;
  font: inherit; color: var(--ink); cursor: pointer;
}
.m-sheet-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
@keyframes m-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .m-sheet { animation: none; } }

/* ตัวกรองของแถบเครื่องมือ = แผ่นเลื่อนจากล่าง (เปิดด้วยปุ่ม ⋯ เดิม) */
.m-sheet-title, .m-sheet-done { display: none; }
@media (max-width: 699px) {
  html.m-ui .sticky-tools.open { z-index: 60; }
  html.m-ui .sticky-tools.open::after { content: ""; position: fixed; inset: 0; background: color-mix(in srgb, var(--pann-fg) 45%, transparent); }
  html.m-ui .sticky-tools.open .tools-extra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 10px;
    background: var(--card); border-radius: var(--pann-r-card) var(--pann-r-card) 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    max-height: 75vh; overflow: auto; box-shadow: var(--pann-shadow-float); animation: m-up .18s ease-out;
  }
  html.m-ui .sticky-tools.open .tools-extra > * { flex: none; width: 100%; max-width: none; }
  html.m-ui .sticky-tools.open .m-sheet-title { display: block; font-size: 1.05rem; }
  html.m-ui .sticky-tools.open .m-sheet-done { display: inline-flex; }
}

/* แดชบอร์ดวันนี้ (หน้าแรกของหัวหน้า/ฝ่ายบุคคล/เจ้าของ) */
html.m-ui #m-install, html.m-ui #m-dash { grid-column: 1 / -1; }
html.m-ui .m-manager #card-clock.no-employee { display: none; }
.m-dash-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 14px 0 6px; }
.m-dash-head h2 { margin: 0; }
.m-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.m-stat { justify-items: center; text-align: center; cursor: pointer; padding: var(--pann-s3) var(--pann-s1); }
.m-sub { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; }
.m-chip {
  flex: none; min-height: 40px; padding: 6px 14px; border: 1px solid var(--line); border-radius: var(--pann-r-pill); background: var(--card);
  font: inherit; font-size: .9rem; color: var(--ink-soft); cursor: pointer;
}
.m-chip b { color: var(--ink); }
.m-req { margin: 8px 0; touch-action: pan-y; position: relative; }
.m-req .pick, html.m-ui #list .pick { width: 24px; height: 24px; margin-top: 2px; flex: none; }
.m-req .btn-row { margin-top: 8px; }
.m-req .btn-row .pann-btn { flex: 1; }
.m-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70vw; }
.m-shortcuts { margin: 10px 0 0; }
.m-shortcuts .btn { flex: 1; }
html.m-ui #list [data-id] { touch-action: pan-y; }
.m-swipe-right { box-shadow: inset 6px 0 0 var(--ok), var(--shadow); background: var(--ok-soft); }
.m-swipe-left { box-shadow: inset -6px 0 0 var(--bad), var(--shadow); background: var(--bad-soft); }
.m-gone { display: none !important; }

/* แถบ "ทำแล้ว · ยกเลิก" 5 วินาที */
.m-undo-wrap {
  position: fixed; left: 8px; right: 8px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 55; display: flex; flex-direction: column; gap: 6px;
  pointer-events: none;
}
.m-undo {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; background: var(--ink); color: var(--pann-on-brand); border-radius: var(--pann-r-ctl); padding: 6px 6px 6px 14px;
  box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.m-undo-btn { border: 0; background: transparent; color: var(--pann-accent); font: inherit; font-weight: 700; min-height: 44px; padding: 0 14px; cursor: pointer; }
.m-undo-time { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--pann-accent); transform-origin: left; animation: m-time 5s linear forwards; }
@keyframes m-time { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ดึงลงเพื่อรีเฟรช */
.m-ptr {
  position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 50%; z-index: 65; background: var(--card); color: var(--ink-soft); border-radius: var(--pann-r-pill);
  padding: 6px 14px; font-size: .85rem; box-shadow: var(--shadow); pointer-events: none;
}
.m-ptr.ready { color: var(--brand); font-weight: 600; }

/* ติดตั้งแอป + แจ้งเตือน */
.m-install-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.m-install-head img { border-radius: 22%; flex: none; }   /* มุมโค้งเท่าไอคอนแอปจริง (22% ของขนาด) */
.m-install-steps { list-style: none; margin: 0 0 8px; padding: 0; counter-reset: step; }
.m-install-steps li { display: flex; align-items: center; gap: 10px; padding: 8px 0; counter-increment: step; }
.m-install-steps li::before {
  content: counter(step); flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: var(--pann-on-brand);
  display: grid; place-items: center; font-weight: 700; font-size: .9rem;
}
.m-install-pic { flex: none; width: 44px; height: 44px; border-radius: var(--pann-r-ctl); background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
.m-install-pic svg { width: 26px; height: 26px; }
.m-install .btn-row { margin-top: 8px; }

/* สรุปรายเดือน: การ์ดต่อคน แตะแล้วกางรายวัน */
.m-group { font-weight: 700; color: var(--brand); margin: 14px 0 6px; }
.m-person { padding: 0; margin: 8px 0; overflow: hidden; }
.m-person-head {
  display: block; width: 100%; text-align: left; border: 0; background: transparent; font: inherit; color: var(--ink); padding: 12px 14px;
  min-height: var(--tap); cursor: pointer;
}
.m-person-head[aria-expanded="true"] { background: var(--brand-soft); }
.m-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.m-days { border-top: 1px solid var(--line); }
.m-day {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 6px 14px;
  border: 0; border-bottom: 1px solid var(--line); background: transparent; font: inherit; color: var(--ink); cursor: pointer; text-align: left;
}
.m-day:last-child { border-bottom: 0; }
.m-day-date { flex: none; min-width: 64px; color: var(--ink-soft); }
.m-day-date.weekend { color: var(--bad); }

/* ตารางรายชื่อพนักงาน → การ์ดต่อคน (เลื่อนขึ้นลง ไม่เลื่อนซ้ายขวา) */
html.m-ui .m-cards.sticky-head { max-height: none; overflow: visible; }
html.m-ui .m-cards thead { display: none; }
html.m-ui .m-cards table, html.m-ui .m-cards tbody, html.m-ui .m-cards tr, html.m-ui .m-cards td { display: block; width: 100%; }
html.m-ui .m-cards tr { position: relative; border: 1px solid var(--line); border-radius: var(--pann-r-ctl); padding: 10px 12px; margin-bottom: 10px; background: var(--card); }
html.m-ui .m-cards td { border: 0; padding: 2px 0; }
html.m-ui .m-cards td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-soft); font-size: .85rem; }
html.m-ui .m-cards td[data-cell="code"] { color: var(--ink-soft); font-size: .85rem; }
html.m-ui .m-cards td[data-cell="name"] { font-weight: 700; font-size: 1.05rem; padding-right: 40px; }
html.m-ui .m-cards td[data-cell="status"] { position: absolute; top: 10px; right: 48px; width: auto; }
html.m-ui .m-cards td.pick-cell { position: absolute; top: 8px; right: 10px; width: auto; }
html.m-ui .m-cards td.pick-cell input { width: 24px; height: 24px; }
html.m-ui .m-cards td[data-cell="open"] { margin-top: 8px; }
html.m-ui .m-cards td[data-cell="open"] .btn { width: 100%; min-height: 44px; }
html.m-ui .m-cards td[colspan] { text-align: center; }
/* จอแคบ: หัวเหลือเครื่องหมาย HR + ชื่อบริษัท + ปุ่มภาษา (ไม่ล้นจอ) */
@media (max-width: 420px) { html.m-ui .topbar .brand > span:not(.brand-mark) { display: none; } }
html.m-ui .card:has(> .m-cards) { padding: 0; background: transparent; box-shadow: none; }

/* งาน 036: ตารางอัตราเงินเดือนบนมือถือ = การ์ด */
html.m-ui .pr-table thead { display: none; }
html.m-ui .pr-table tr { display: block; border: 1px solid var(--line); border-radius: var(--pann-r-ctl); padding: 10px 12px; margin-bottom: 10px; background: var(--card); }
html.m-ui .pr-table td { display: block; border: 0; padding: 2px 0; max-width: none; min-width: 0; width: auto; text-align: left; }
html.m-ui .pr-table .pr-act { margin-top: 6px; }

/* งาน 038: ปฏิทินวันหยุดบนมือถือ = เรียงลงมา (แตะการ์ดเพื่อย้าย/เอาออก) */
html.m-ui .hcal { grid-template-columns: 1fr; }
/* งาน 116: ตารางรายการของคำขอเบิกบนมือถือ = การ์ดต่อรายการ (ไม่เลื่อนซ้ายขวา) */
html.m-ui .exc-table thead { display: none; }
html.m-ui .exc-table, html.m-ui .exc-table tbody, html.m-ui .exc-table tfoot, html.m-ui .exc-table tr, html.m-ui .exc-table td { display: block; width: 100%; }
html.m-ui .exc-table tr { border: 1px solid var(--pann-line); border-radius: var(--pann-r-ctl); padding: var(--pann-s3); margin-bottom: var(--pann-s2); }
html.m-ui .exc-table tr.is-action { background: var(--pann-attention-tint); }
html.m-ui .exc-table td { border: 0; padding: 2px 0; text-align: left; background: none; }
html.m-ui .exc-table td.num:nth-child(3), html.m-ui .exc-table td.num:nth-child(4) { display: none; }
html.m-ui .exc-table tfoot td:empty { display: none; }
html.m-ui .exc-acts { justify-content: flex-start; margin-top: var(--pann-s2); }
html.m-ui .exc-bar .pann-btn { white-space: nowrap; padding-left: var(--pann-s3); padding-right: var(--pann-s3); font-size: var(--pann-t-small); }
html.m-ui .hc-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* งาน 084: แถบเลือกพนักงานบนมือถือ — อยู่เหนือเมนูล่าง */
html.m-ui .pick-bar { bottom: calc(76px + env(safe-area-inset-bottom)); width: calc(100vw - 16px); justify-content: center; }

/* งาน 171 (ดีไซน์ v1.3): ปุ่มหลักของหน้าบนมือถือ = ปุ่มลอยขวาล่าง เหนือแถบเมนูล่าง 16px — ใส่ data-fab ที่ปุ่มเดิมของหน้า (ปุ่มเดียวต่อหน้า · หน้าคอมไม่เปลี่ยน) */
html.m-ui [data-fab] { position: fixed; right: var(--pann-gutter); bottom: calc(var(--pann-tabbar-real, calc(var(--pann-tabbar-h) + env(safe-area-inset-bottom, 0px))) + var(--pann-s4)); z-index: 19; width: auto; min-height: 52px;
  padding: 0 var(--pann-s5); border: 0; border-radius: var(--pann-r-pill); background: var(--pann-brand); color: var(--pann-on-brand); font-weight: 600; box-shadow: var(--pann-shadow-float);
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
html.m-ui body.ses-locked [data-fab], html.m-ui .modal-back ~ [data-fab] { display: none; }
html.m-ui .tm-field { padding-top: 0; }   /* งาน 214z */
/* งาน 228 (ก) มือถือ: ตารางตรวจเงินเดือนจาก Excel เป็นแถวซ้อน (หัวคอลัมน์ตัวเล็กหน้าค่า) — ไม่ต้องเลื่อนแนวนอนหาช่องเลขผู้เสียภาษี */
html.m-ui .xm-menu { position: static; box-shadow: none; }
html.m-ui .xm-table thead { display: none; }
html.m-ui .xm-table, html.m-ui .xm-table tbody, html.m-ui .xm-table tfoot, html.m-ui .xm-table tr { display: block; width: 100%; }
html.m-ui .xm-table tr { padding: var(--pann-s2) 0; border-bottom: 1px solid var(--pann-line); }
html.m-ui .xm-table td, html.m-ui .xm-table th { display: flex; justify-content: space-between; align-items: center; gap: var(--pann-s2); padding: 2px 0; border: 0; text-align: right; }
html.m-ui .xm-table td::before, html.m-ui .xm-table th::before { content: attr(data-label); color: var(--pann-fg-muted); font-weight: 400; text-align: left; }
html.m-ui .xm-table td:empty, html.m-ui .xm-table th:empty { display: none; }
html.m-ui .m-cards td[data-cell="tm"] .tm-row { width: 100%; justify-content: space-between; flex-direction: row-reverse; }   /* งาน 230: สวิตช์ชิดขวาของการ์ด */