/* Sevenday POS — "HR ของฉัน" (hr.js) · ใช้สีจาก style.css */
.hr-head { margin-bottom: 10px; }
.hr-head h2 { margin: 0; font-size: 22px; }
.hr-head p { margin: 4px 0 0; color: var(--on-surface-variant, #555); font-size: 14px; }
.hr-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; -webkit-overflow-scrolling: touch; }
.hr-tab { flex: none; border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 40px; }
.hr-tab.on { background: var(--primary, #4f46e5); border-color: var(--primary, #4f46e5); color: #fff; }
.hr-empty { text-align: center; padding: 36px 16px; color: var(--on-surface-variant, #555); }
.hr-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.hr-card h3, .hr-h { margin: 0 0 10px; font-size: 16px; }
.hr-h { margin-top: 6px; }
.hr-me { display: flex; gap: 14px; align-items: center; }
.hr-me h3 { margin: 0; font-size: 18px; }
.hr-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--primary, #4f46e5); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; flex: none; }
.hr-muted { color: var(--on-surface-variant, #777); font-size: 12.5px; }
.hr-kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #f2f2f2; font-size: 14px; }
.hr-kv:last-child { border-bottom: 0; }
.hr-kv span { color: var(--on-surface-variant, #555); }
.hr-kv b { text-align: right; overflow-wrap: anywhere; }
.hr-kv.good b { color: #2e7d32; } .hr-kv.bad b { color: #c62828; }
.hr-kv.hr-total { font-size: 16px; border-top: 2px solid var(--border); margin-top: 4px; }
.hr-btn { border: 1px solid var(--border); background: #fff; border-radius: 8px; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 38px; }
.hr-btn.primary { background: var(--primary, #4f46e5); border-color: var(--primary, #4f46e5); color: #fff; }
.hr-btn.ghost { background: transparent; }
.hr-btn.big { min-height: 48px; width: 100%; font-size: 16px; margin-top: 10px; }
.hr-btn:disabled { opacity: .45; cursor: default; }
.hr-monthnav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; font-size: 16px; }
.hr-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.hr-stat { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 8px; text-align: center; display: flex; flex-direction: column; }
.hr-stat b { font-size: 22px; font-family: 'Geist', sans-serif; }
.hr-stat span { font-size: 12px; color: var(--on-surface-variant, #555); }
.hr-stat.warn b { color: #b26a00; } .hr-stat.bad b { color: #c62828; }
.hr-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--border); border-radius: 12px; }
.hr-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.hr-table th { text-align: left; font-weight: 600; font-size: 12.5px; color: var(--on-surface-variant, #555); padding: 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.hr-table td { padding: 7px 8px; border-bottom: 1px solid #f2f2f2; vertical-align: top; }
.hr-table .r { text-align: right; white-space: nowrap; }
.hr-table tfoot td { font-weight: 600; border-top: 2px solid var(--border); }
.hr-s-Late td:nth-child(4) { color: #b26a00; } .hr-s-Absent td:nth-child(4) { color: #c62828; font-weight: 600; } .hr-s-Leave td:nth-child(4) { color: #1565c0; }
.hr-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.hr-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; min-width: 0; }
.hr-form .wide { grid-column: 1 / -1; }
.hr-form input:not([type=checkbox]), .hr-form select { padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 15px; width: 100%; box-sizing: border-box; min-height: 42px; }
.hr-form .hr-check { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; }
.hr-form .hr-check input { width: 20px; height: 20px; }
.hr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hr-list li { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.hr-acts { display: flex; gap: 6px; align-items: center; }
.hr-acts.wrap { flex-wrap: wrap; margin-bottom: 10px; }
.hr-seg { display: flex; gap: 6px; margin-bottom: 10px; }
.hr-pill { border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; background: #eceff1; color: #455a64; white-space: nowrap; }
.hr-p-Pending, .hr-p-Draft, .hr-p-Reviewed { background: #fff3e0; color: #8a4b00; }
.hr-p-Approved { background: #e3f2fd; color: #0d47a1; }
.hr-p-Paid { background: #e8f5e9; color: #1b5e20; }
.hr-p-Rejected { background: #ffebee; color: #b71c1c; }
.hr-comm { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-left: 6px solid #2e7d32; }
.hr-comm b { font-size: 22px; font-family: 'Geist', sans-serif; color: #2e7d32; }
.hr-slip summary { display: flex; gap: 10px; align-items: center; cursor: pointer; list-style: none; padding: 2px 0 8px; }
.hr-slip summary::-webkit-details-marker { display: none; }
.hr-slip .hr-net { margin-left: auto; font-size: 17px; }
.hr-in { width: 110px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; text-align: right; }
.hr-in:disabled { background: #f6f6f6; border-color: transparent; }
@media (max-width: 760px) {
  .hr-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hr-form { grid-template-columns: 1fr 1fr; }
  .hr-list li .hr-acts { width: 100%; justify-content: flex-end; }
  .hr-in { width: 90px; }
}

/* ໄດ້ຮັບ/ບໍ່ໄດ້ຮັບເງິນເດືອນ (ອະນຸມັດການລາ) */
.hr-pay-yes { background: #e8f5e9; color: #1b5e20; }
.hr-pay-no { background: #fff3e0; color: #8a4b00; }
.hr-pay-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.hr-pay-opt { border: 1.5px solid var(--border); background: #fff; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 36px; color: #455a64; }
.hr-pay-opt.on.yes { background: #e8f5e9; border-color: #2e7d32; color: #1b5e20; }
.hr-pay-opt.on.no { background: #fff3e0; border-color: #ef6c00; color: #8a4b00; }

/* ນຳເຂົ້າໄຟລ໌ເຄື່ອງສະແກນນິ້ວ + ເລືອກພະນັກງານໃນແທັບເຂົ້າວຽກ (ຜູ້ຈັດການ) */
.hr-pick { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 10px; }
.hr-pick select, .hr-list select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 15px; min-height: 40px; max-width: 100%; }
.hr-file { display: inline-flex; align-items: center; cursor: pointer; }
.hr-warn { background: #fff3e0; color: #8a4b00; border-radius: 8px; padding: 8px 12px; margin: 0 0 10px; font-size: 13.5px; }
ul.hr-warn { padding-left: 28px; }
.hr-r-new { background: #e8f5e9; color: #1b5e20; } .hr-r-update { background: #fff3e0; color: #8a4b00; } .hr-r-error { background: #ffebee; color: #b71c1c; }
.hr-s-Holiday td:nth-child(4), .hr-s-Weekend td:nth-child(4) { color: #607d8b; }