/* ทะเบียนลูกจ้าง — รายการ + ตัวกรองแบบใหม่ (13/10/2569 เจ้าของ: "ตอนนี้ผมว่ามันไม่สวยและ บางข้อมูลไม่รู้จะเอามาโชว์ทำไม")
   ใช้เฉพาะเมื่อ assets/registry-list.js เปิดได้ (body.registry-v2) · หน้าต่างดู/แก้ข้อมูลและโมดูลเสริมไม่เปลี่ยน
   โทนเดียวกับหน้าเวลา: พื้นเทาอ่อน · ขาว · แดง #c80d19 · ดำ #191b20 · เน้นตาราง */
body.registry-v2 { --rl-red: #c80d19; --rl-red-dark: #9e0b15; --rl-ink: #191b20; --rl-muted: #6c7280; --rl-line: #e6e8ec; --rl-soft: #f4f5f7; }
body.td-theme-page.td-force-theme.registry-v2 { background: #f4f5f7 !important; }
body.registry-v2.td-theme-page::before { display: none; }
body.registry-v2 main { max-width: 1400px; padding-top: 16px; padding-bottom: 32px; }
body.registry-v2 main > * + * { margin-top: 12px; }
body.registry-v2 main.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 12px; }
/* แถวหัวเรื่อง: เลิกเป็นป้ายแดงใหญ่ */
body.td-force-theme.registry-v2 main > div:first-child { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; color: var(--rl-ink) !important; overflow: visible !important; border-radius: 0 !important; }
body.td-force-theme.registry-v2 main > div:first-child::before { display: none; }
body.td-force-theme.registry-v2 main > div:first-child h1 { color: var(--rl-ink) !important; font-size: 22px; font-weight: 700; margin: 0; }
body.registry-v2 main > div:first-child h1 i { display: none; }
body.registry-v2 main > div:first-child > div:first-child > p { display: none; }
body.registry-v2 main > div:first-child button, body.registry-v2 main > div:first-child a.rl-btn-like, body.registry-v2 #registryLaoControlLink { min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid #d5d9e0 !important; background: #ffffff !important; color: var(--rl-ink) !important; font-weight: 500; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; box-shadow: none !important; }
body.registry-v2 main > div:first-child button[onclick="openAddModal()"] { background: var(--rl-red) !important; border-color: var(--rl-red) !important; color: #ffffff !important; font-weight: 600; }
body.registry-v2 main > div:first-child button[onclick="openAddModal()"]:hover { background: var(--rl-red-dark) !important; }
body.registry-v2 main > div:first-child button i { color: inherit !important; }
/* เลือกประเทศ: แถวเล็ก */
body.registry-v2 #registryCountrySwitch { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; backdrop-filter: none !important; }
body.registry-v2 #registryCountrySwitch > div { gap: 10px; }
body.registry-v2 #registryCountrySwitch .text-sm.font-semibold { font-size: 13px; color: var(--rl-muted); margin-right: 0 !important; }
body.registry-v2 #registryCountrySwitch [role="group"] { border-radius: 999px; border-color: #d5d9e0; }
body.registry-v2 #registryCountrySwitch [role="group"] button { min-height: 36px; padding: 0 18px; }
body.registry-v2 #registryCountrySwitch [role="group"] button.bg-slate-900 { background: var(--rl-ink) !important; }
body.registry-v2 #registryMappingBadge { margin-left: auto; }
/* การ์ดสรุป ชาย/หญิง/บริษัท: ซ่อน (ตัวเลขยังนับอยู่ ใช้ชิปสถานะแทน) */
body.registry-v2 .rl-stats-hidden { display: none !important; }
/* ชิปสถานะ */
body.registry-v2 .rl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.registry-v2 .rl-chip { display: inline-flex; align-items: baseline; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #d5d9e0; background: #ffffff; color: var(--rl-ink); font: inherit; font-size: 14px; cursor: pointer; }
body.registry-v2 .rl-chip b { font-size: 15px; font-variant-numeric: tabular-nums; }
body.registry-v2 .rl-chip[aria-pressed="true"] { background: var(--rl-ink); border-color: var(--rl-ink); color: #ffffff; }
body.registry-v2 .rl-chip:focus-visible, body.registry-v2 .rl-ms-btn:focus-visible, body.registry-v2 .rl-row:focus-visible, body.registry-v2 .rl-more:focus-visible, body.registry-v2 .rl-export-btn:focus-visible { outline: 3px solid #f2a6ab; outline-offset: 2px; }
/* แถบตัวกรอง */
body.registry-v2 .rl-filters { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; backdrop-filter: none !important; }
body.registry-v2 .rl-filters > .rl-row1 { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
body.registry-v2 .rl-filters > .rl-row2 { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
body.registry-v2 .rl-filters > .rl-row2[hidden] { display: none; }
body.registry-v2 .rl-native { display: none !important; }
body.registry-v2 .rl-search { flex: 1 1 360px; min-width: 0; position: relative; display: flex; flex-direction: column; gap: 4px; }
body.registry-v2 .rl-search-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px; padding: 4px 10px; border: 1px solid #d5d9e0; border-radius: 10px; background: #ffffff; }
body.registry-v2 .rl-search-box.has-picked { border-color: var(--rl-ink); }
body.registry-v2 .rl-search-box > i.fa-solid { color: var(--rl-muted); font-size: 14px; }
body.registry-v2 .rl-search-box #searchInput { flex: 1 1 180px; min-width: 120px; min-height: 30px; border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent; padding: 0; font-size: 14px; }
body.registry-v2 .rl-pick { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--rl-ink); color: #ffffff; font-size: 13px; }
body.registry-v2 .rl-pick code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
body.registry-v2 .rl-pick button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: #3a3d45; color: #ffffff; cursor: pointer; font-size: 12px; line-height: 1; }
body.registry-v2 .rl-hint { font-size: 12px; color: var(--rl-muted); }
body.registry-v2 .rl-suggest { position: absolute; top: 46px; left: 0; right: 0; z-index: 30; margin: 0; padding: 6px; list-style: none; background: #ffffff; border: 1px solid #d5d9e0; border-radius: 12px; box-shadow: 0 12px 30px rgba(25, 27, 32, 0.14); }
body.registry-v2 .rl-suggest[hidden] { display: none; }
body.registry-v2 .rl-suggest button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 4px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; font: inherit; }
body.registry-v2 .rl-suggest button:hover, body.registry-v2 .rl-suggest button:focus-visible { background: var(--rl-soft); }
body.registry-v2 .rl-suggest code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: #3f444d; }
body.registry-v2 .rl-suggest .rl-add { margin-left: auto; color: var(--rl-red-dark); font-weight: 600; font-size: 13px; }
/* ตัวกรองแบบติ๊กหลายรายการ */
body.registry-v2 .rl-ms { position: relative; }
body.registry-v2 .rl-ms-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; max-width: 280px; padding: 0 12px; border-radius: 10px; border: 1px solid #d5d9e0; background: #ffffff; color: var(--rl-ink); font: inherit; font-size: 14px; cursor: pointer; }
body.registry-v2 .rl-ms-btn.on { border-color: var(--rl-ink); }
body.registry-v2 .rl-ms-btn .rl-ms-label { font-size: 11px; letter-spacing: 0.04em; color: var(--rl-muted); white-space: nowrap; }
body.registry-v2 .rl-ms-btn .rl-ms-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.registry-v2 .rl-ms-btn .rl-ms-caret { color: var(--rl-muted); font-size: 12px; }
body.registry-v2 .rl-ms-pop { position: absolute; top: 46px; left: 0; z-index: 31; min-width: 260px; max-width: 360px; padding: 8px; background: #ffffff; border: 1px solid #d5d9e0; border-radius: 12px; box-shadow: 0 12px 30px rgba(25, 27, 32, 0.14); }
body.registry-v2 .rl-ms-pop[hidden] { display: none; }
body.registry-v2 .rl-ms-tools { display: flex; align-items: center; gap: 4px; padding: 0 4px 6px; margin-bottom: 4px; border-bottom: 1px solid #eef0f3; }
body.registry-v2 .rl-ms-tools button { min-height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: #185082; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
body.registry-v2 .rl-ms-tools button:hover { background: #eef4fc; }
body.registry-v2 .rl-ms-tools span { color: #d5d9e0; }
body.registry-v2 .rl-ms-list { max-height: 300px; overflow: auto; display: flex; flex-direction: column; gap: 1px; }
body.registry-v2 .rl-ms-list label { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 8px; border-radius: 8px; cursor: pointer; font-size: 14px; }
body.registry-v2 .rl-ms-list label:hover { background: var(--rl-soft); }
body.registry-v2 .rl-ms-list input { width: 16px; height: 16px; margin: 0; accent-color: var(--rl-red); flex: 0 0 auto; }
body.registry-v2 .rl-ms-list .rl-ms-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.registry-v2 .rl-ms-list .rl-ms-count { font-size: 12px; color: var(--rl-muted); font-variant-numeric: tabular-nums; }
body.registry-v2 .rl-ms-empty { padding: 10px 8px; color: var(--rl-muted); font-size: 13px; }
body.registry-v2 .rl-more-btn, body.registry-v2 .rl-clear-btn { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px dashed #b9bec8; background: transparent !important; color: #3f444d !important; font: inherit; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; box-shadow: none !important; }
body.registry-v2 .rl-more-btn[aria-expanded="true"] { border-style: solid; border-color: var(--rl-ink); }
body.registry-v2 .rl-more-btn .rl-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--rl-red); color: #ffffff; font-size: 12px; font-weight: 700; }
body.registry-v2 .rl-more-btn .rl-badge[hidden] { display: none; }
body.registry-v2 .rl-clear-btn { border-style: solid; }
body.registry-v2 .rl-clear-btn i { display: none; }
/* ส่งออก ▾ */
body.registry-v2 .rl-export { position: relative; margin-left: auto; }
body.registry-v2 .rl-export-btn { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid #d5d9e0; background: #ffffff; color: var(--rl-ink); font: inherit; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
body.registry-v2 .rl-export-panel { position: absolute; top: 46px; right: 0; z-index: 31; min-width: 260px; padding: 8px; background: #ffffff; border: 1px solid #d5d9e0; border-radius: 12px; box-shadow: 0 12px 30px rgba(25, 27, 32, 0.14); display: flex !important; flex-direction: column; gap: 2px; }
body.registry-v2 .rl-export-panel[hidden] { display: none !important; }
body.registry-v2 .rl-export-panel > button, body.registry-v2 .rl-export-panel > a { display: flex !important; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent !important; color: var(--rl-ink) !important; font: inherit; font-size: 14px; text-align: left; box-shadow: none !important; cursor: pointer; }
body.registry-v2 .rl-export-panel > button:hover, body.registry-v2 .rl-export-panel > a:hover { background: var(--rl-soft) !important; }
body.registry-v2 .rl-export-panel > button:disabled { color: #9aa0aa !important; cursor: not-allowed; opacity: 1 !important; }
body.registry-v2 .rl-export-panel > button i, body.registry-v2 .rl-export-panel > a i { width: 18px; text-align: center; color: var(--rl-muted) !important; }
body.registry-v2 .rl-export-panel > #exportCount { display: block; margin: 4px 0 0 !important; padding: 8px 10px 2px; border-top: 1px solid #eef0f3; font-size: 12px; color: var(--rl-muted); }
/* แถบ "กำลังดูเฉพาะ n คน" */
body.registry-v2 .rl-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 14px; border-radius: 10px; background: #eef4fc; color: #185082; font-size: 14px; }
body.registry-v2 .rl-banner[hidden] { display: none; }
body.registry-v2 .rl-banner button { margin-left: auto; min-height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid #9cc0e6; background: #ffffff; color: #185082; font: inherit; font-size: 14px; cursor: pointer; }
/* ตาราง */
body.registry-v2 .rl-table-card { background: #ffffff !important; border: 1px solid var(--rl-line) !important; border-radius: 14px !important; box-shadow: none !important; backdrop-filter: none !important; }
body.registry-v2 #employeeTable { font-size: 14px; color: var(--rl-ink); }
body.registry-v2 #employeeTable thead { background: #f7f8fa !important; border-bottom: 1px solid var(--rl-line) !important; }
body.registry-v2 #employeeTable thead th { padding: 10px 12px; font-size: 12px; font-weight: 600; color: var(--rl-muted) !important; text-align: left; white-space: nowrap; }
body.registry-v2 #employeeTable thead th.sortable:hover { color: var(--rl-red-dark) !important; }
body.registry-v2 #employeeTable tbody tr.rl-row { border-top: 1px solid #eef0f3; cursor: pointer; }
body.registry-v2 #employeeTable tbody tr.rl-row:hover { background: #fbf6f7; }
body.registry-v2 #employeeTable td { padding: 8px 12px; vertical-align: middle; }
body.registry-v2 .rl-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
body.registry-v2 .rl-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; font-size: 13px; font-weight: 700; overflow: hidden; }
body.registry-v2 .rl-avatar img { width: 100%; height: 100%; object-fit: cover; }
body.registry-v2 .rl-name { display: flex; flex-direction: column; min-width: 0; }
body.registry-v2 .rl-name b { font-weight: 600; }
body.registry-v2 .rl-name small, body.registry-v2 .rl-sub { font-size: 12px; color: var(--rl-muted); }
body.registry-v2 .rl-name code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
body.registry-v2 .rl-two { display: flex; flex-direction: column; }
body.registry-v2 .rl-grade { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 6px; background: #eceef2; color: #3f444d; font-family: ui-monospace, Consolas, monospace; font-size: 12px; font-weight: 600; }
body.registry-v2 .rl-tenure { font-variant-numeric: tabular-nums; white-space: nowrap; }
body.registry-v2 .rl-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
body.registry-v2 .rl-pill.ACTIVE { background: #e5f5ee; color: #0a6247; }
body.registry-v2 .rl-pill.PRE_HIRE { background: #e3effd; color: #185082; }
body.registry-v2 .rl-pill.NOTICE_SUBMITTED { background: #fff1db; color: #8a5200; }
body.registry-v2 .rl-pill.SEPARATED { background: #eceef2; color: #4b515c; }
body.registry-v2 .rl-pill.NO_SHOW { background: #fde3e7; color: #9e0b15; }
body.registry-v2 .rl-pill.OTHER { background: #eceef2; color: #4b515c; }
body.registry-v2 .rl-more { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--rl-muted); font-size: 18px; line-height: 1; cursor: pointer; }
body.registry-v2 .rl-more:hover { border-color: #d5d9e0; background: #ffffff; color: var(--rl-ink); }
body.registry-v2 .rl-empty { padding: 40px 12px; text-align: center; color: var(--rl-muted); }
body.registry-v2 .rl-empty-hint { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; color: #185082; font-size: 14px; }
body.registry-v2 .rl-empty-hint button { min-height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid #9cc0e6; background: #ffffff; color: #185082; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
/* เมนู ⋯ ของแถว */
body.registry-v2 .rl-menu { position: absolute; z-index: 60; min-width: 220px; padding: 6px; background: #ffffff; border: 1px solid #d5d9e0; border-radius: 12px; box-shadow: 0 12px 30px rgba(25, 27, 32, 0.16); display: flex; flex-direction: column; gap: 2px; }
body.registry-v2 .rl-menu[hidden] { display: none; }
body.registry-v2 .rl-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--rl-ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
body.registry-v2 .rl-menu button:hover, body.registry-v2 .rl-menu button:focus-visible { background: var(--rl-soft); }
body.registry-v2 .rl-menu button i { width: 18px; text-align: center; color: var(--rl-muted); }
body.registry-v2 .rl-menu button.danger { color: var(--rl-red-dark); margin-top: 4px; border-top: 1px solid #eef0f3; border-radius: 0 0 8px 8px; }
body.registry-v2 .rl-menu button.danger i { color: var(--rl-red-dark); }
/* มือถือ: การ์ด */
body.registry-v2 .rl-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
body.registry-v2 .rl-card-head { display: flex; align-items: center; gap: 10px; }
body.registry-v2 .rl-card-head .rl-pill { margin-left: auto; }
body.registry-v2 .rl-card dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; font-size: 13px; }
body.registry-v2 .rl-card dt { color: var(--rl-muted); font-size: 12px; }
body.registry-v2 .rl-card dd { margin: 0; }
body.registry-v2 .rl-card-actions { display: flex; gap: 8px; }
body.registry-v2 .rl-card-actions button { flex: 1; min-height: 40px; border-radius: 10px; border: 1px solid #d5d9e0; background: #ffffff; color: var(--rl-ink); font: inherit; font-size: 14px; cursor: pointer; }
body.registry-v2 .rl-card-actions button.primary { background: var(--rl-ink); border-color: var(--rl-ink); color: #ffffff; font-weight: 600; }
/* ท้ายตาราง */
body.registry-v2 .rl-table-card > div:last-child { background: #ffffff !important; border-top: 1px solid var(--rl-line) !important; color: var(--rl-muted); font-size: 13px; }
body.registry-v2 #pageSize { min-height: 32px; border-radius: 8px; border-color: #d5d9e0; }
body.registry-v2 #btnPrev, body.registry-v2 #btnNext { min-height: 32px; border-radius: 8px; border-color: #d5d9e0; }
body.registry-v2 footer { color: #9aa0aa; }
@media (max-width: 640px) { body.registry-v2 .rl-ms-btn { max-width: 100%; } body.registry-v2 .rl-export { margin-left: 0; } body.registry-v2 .rl-export-panel { right: auto; left: 0; } }
@media print { body.registry-v2 .rl-chips, body.registry-v2 .rl-filters, body.registry-v2 .rl-banner, body.registry-v2 .rl-more, body.registry-v2 #registryCountrySwitch { display: none !important; } }