/* ═══════════════════════════════════════════════════════════════════════
   HR OS — tab "Bảng lương & hợp đồng"   (public/js/hr/hr-payroll.js)

   Dùng LẠI token của hr-os.css (--primary #0073EA, --surface, --radius…) chứ
   KHÔNG kéo bảng màu cobalt-mono vào: HR OS chưa được áp lớp revamp đó, tab mới
   mà đổi hệ màu riêng thì đứng cạnh 6 tab anh em sẽ lạc hẳn.

   Quy ước scope — sai chỗ này là lỗi câm:
   · Thứ nằm TRONG #hr-body  → viết dưới #workspace-hr-os
   · Popover .hr-pop         → cũng dưới #workspace-hr-os (popAt gắn vào hrRoot())
   · Hộp thoại .hrm-overlay + ô nhập tiền .hrp-medit → gắn thẳng document.body
     nên KHÔNG được đặt dưới #workspace-hr-os, đặt vào là mất trắng style.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Bảng ─────────────────────────────────────────────────────────────── */
#workspace-hr-os table.hrp-board { min-width: 1780px; }

/* Ghim cột tick + cột tên: cuộn ngang tới cột "Văn bản đã cấp" mà mất tên
   người thì không còn biết đang sửa lương của ai. 2 cột chứ không 1 — ô tick
   đứng một mình bị cắt rời khỏi tên là bấm nhầm dòng. */
#workspace-hr-os .hrp-board th:nth-child(1),
#workspace-hr-os .hrp-board tbody tr.hr-row > td:nth-child(1) { position: sticky; left: 0; background: var(--surface); }
#workspace-hr-os .hrp-board th:nth-child(2),
#workspace-hr-os .hrp-board tbody tr.hr-row > td:nth-child(2) {
  position: sticky; left: 44px; background: var(--surface);
  box-shadow: 1px 0 0 var(--border), 5px 0 6px -5px rgba(50, 53, 56, .16);
}
#workspace-hr-os .hrp-board th:nth-child(1) { z-index: 7; }
#workspace-hr-os .hrp-board th:nth-child(2) { z-index: 7; }
#workspace-hr-os .hrp-board tbody tr.hr-row > td:nth-child(1),
#workspace-hr-os .hrp-board tbody tr.hr-row > td:nth-child(2) { z-index: 5; }
/* Nền hover của <tr> không lọt qua ô đã có background riêng → tô lại. */
#workspace-hr-os .hrp-board tbody tr.hr-row:hover > td:nth-child(1),
#workspace-hr-os .hrp-board tbody tr.hr-row:hover > td:nth-child(2) { background: var(--surface-2); }

#workspace-hr-os .hrp-board .c-name { line-height: 1.25; }
#workspace-hr-os .hrp-dept { display: block; font-size: 11px; color: var(--text-soft); font-weight: 400; }

/* Thanh nhóm công ty: tổng quỹ lương của nhóm đẩy sát mép phải. */
#workspace-hr-os .hrp-gsum { margin-left: auto; padding-right: 12px; font-weight: 700; color: var(--text-muted); }

/* ── Ô tiền ───────────────────────────────────────────────────────────── */
#workspace-hr-os .hrp-money {
  display: inline-block; min-width: 64px; padding: 2px 6px; border-radius: var(--radius-sm);
  cursor: pointer; font-weight: 700; font-variant-numeric: tabular-nums;
}
#workspace-hr-os .hrp-money:hover { background: var(--primary-soft); }
#workspace-hr-os .hrp-money.empty { color: var(--text-soft); font-weight: 400; }
/* Phụ cấp âm = mức đóng BHXH cao hơn lương thoả thuận, gần như chắc chắn gõ
   nhầm. Số này bị chép thẳng vào hợp đồng nên phải nhìn thấy ngay. */
#workspace-hr-os .hrp-board td.hrp-neg { color: var(--stuck); font-weight: 700; }

/* Ô nhập tiền nổi — gắn document.body, KHÔNG scope workspace. */
.hrp-medit { position: fixed; z-index: 4000; }
.hrp-medit input {
  width: 100%; height: 30px; padding: 0 8px; font: 700 13px/1 'Public Sans', 'Be Vietnam Pro', system-ui, sans-serif;
  text-align: right; font-variant-numeric: tabular-nums;
  border: 2px solid #0073EA; border-radius: 4px; outline: none; background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 115, 234, .30);
}
.hrp-mhint {
  margin-top: 3px; padding: 4px 7px; max-width: 320px; border-radius: 4px;
  background: #333; color: #fff; font: 400 11px/1.35 'Public Sans', system-ui, sans-serif;
}

/* ── Ô link ───────────────────────────────────────────────────────────── */
#workspace-hr-os .hrp-link {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; cursor: pointer;
  border-radius: var(--radius-pill); background: var(--info-bg); color: var(--info); font-weight: 700; font-size: 12px;
}
#workspace-hr-os .hrp-link.empty { background: none; color: var(--text-soft); font-weight: 400; }
#workspace-hr-os .hrp-link:hover { filter: brightness(.95); }
#workspace-hr-os .hrp-lk-go { margin-left: 4px; cursor: pointer; color: var(--text-soft); vertical-align: middle; }
#workspace-hr-os .hrp-lk-go:hover { color: var(--primary); }

/* ── Chip số văn bản ──────────────────────────────────────────────────── */
#workspace-hr-os .hrp-doc {
  display: inline-block; margin-right: 4px; padding: 2px 7px; border-radius: var(--radius-sm);
  background: var(--surface-3); color: var(--text); font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#workspace-hr-os .hrp-doc.more { cursor: pointer; background: var(--primary-soft); color: var(--primary-hover); }

/* ── Popover: chọn loại văn bản + lịch sử ─────────────────────────────── */
#workspace-hr-os .hrp-mkpop { min-width: 280px; }
#workspace-hr-os .hrp-mkpop .rp-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; }
#workspace-hr-os .hrp-mkpop .rp-row:hover { background: var(--surface-2); }
#workspace-hr-os .hrp-mkpop .rp-row.on { background: var(--primary-soft); }
#workspace-hr-os .hrp-mkpop .rp-nm { display: flex; flex-direction: column; line-height: 1.25; }
#workspace-hr-os .hrp-mkpop .rp-nm small { color: var(--text-soft); font-size: 11px; }
/* Loại chưa có khuôn: làm mờ nhưng VẪN bấm được — bấm vào mới hiện lời nhắc
   "chưa có khuôn, vào Khuôn văn bản để tải lên". Chặn hẳn pointer-events thì
   người dùng bấm mãi không thấy gì xảy ra, không hiểu vì sao. */
#workspace-hr-os .hrp-mkpop .hrp-noTpl { opacity: .5; }
#workspace-hr-os .hrp-mkgo { padding: 8px 10px; border-top: 1px solid var(--border); }
#workspace-hr-os .hrp-mkgo .btn { width: 100%; justify-content: center; }

#workspace-hr-os .hrp-hist { min-width: 300px; max-width: 380px; }
#workspace-hr-os .hrp-hrow { padding: 7px 10px; border-bottom: 1px solid var(--border); }
#workspace-hr-os .hrp-hrow:last-child { border-bottom: 0; }
#workspace-hr-os .hrp-hd { font-size: 11px; font-weight: 700; color: var(--text-muted); }
#workspace-hr-os .hrp-hv { font-size: 13px; font-variant-numeric: tabular-nums; }
#workspace-hr-os .hrp-hn { font-size: 11px; color: var(--text-soft); }

/* ═══ Hộp thoại — gắn document.body, KHÔNG scope #workspace-hr-os ═══════

   Vì nằm NGOÀI #workspace-hr-os nên mất sạch 3 thứ, phải khai lại — cả ba đều
   là lỗi NHÌN THẤY NGAY nhưng không ai đoán ra nguyên nhân:

   (a) .ic  — hr-os.css:30 khai `#workspace-hr-os .ic{width:16px;height:16px}`.
       Ra ngoài scope thì <svg> KHÔNG có bề rộng mặc định ⇒ icon phình to bằng
       cả ô chứa, thành một khối đen to đùng giữa thẻ.
   (b) .btn — hr-os.css:47 cũng scope trong workspace ⇒ nút mất chiều cao,
       padding, bo góc, thành chữ trần.
   (c) --accent — styles.css:380 có `.btn-primary{background:var(--accent)
       !important}` và `:root{--accent:#f59e0b}` là màu AMBER. Nút chính của
       hộp thoại vì thế ra màu CAM, sai hẳn hệ màu.
       Vá bằng cách đè BIẾN (không đè thuộc tính): `!important` kia đọc
       var(--accent) tại chỗ nên chỉ cần đổi biến là xong, khỏi chạy đua
       specificity với `!important`.

   Vì sao không đơn giản gắn hộp thoại vào trong #workspace-hr-os cho khỏi phải
   khai lại: .workspace có thể mang transform (hiệu ứng chuyển tab) — khi đó
   `position:fixed` neo vào chính nó thay vì viewport và hộp thoại lệch chỗ. */
.hrp-overlay { --accent: #0073EA; --accent-2: #0060B9; --accent-soft: #CCE5FF; }
.hrp-overlay .ic {
  width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: middle;
}
.hrp-overlay .ic.s14 { width: 14px; height: 14px; }
.hrp-overlay .ic.s18 { width: 18px; height: 18px; }
.hrp-overlay .btn {
  font-family: 'Public Sans', 'Be Vietnam Pro', system-ui, sans-serif; font-weight: 600;
  height: 32px; padding: 0 14px; font-size: 13px; border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.hrp-overlay .btn.sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.hrp-overlay .btn-secondary { background: #fff; color: #323338; border-color: #D0D4E4; }
.hrp-overlay .btn-secondary:hover { background: #F5F6F8; }
.hrp-overlay .btn-ghost { background: transparent; color: #676879; border-color: transparent; }
.hrp-overlay .btn-ghost:hover { background: #F5F6F8; }
.hrp-overlay .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 115, 234, .30); }

.hrp-overlay .hrm-card.hrp-wide { max-width: 880px; }
.hrp-overlay .hrp-alert { line-height: 1.5; }
.hrp-overlay .hrp-alert code,
.hrp-overlay .hrp-vhelp code { padding: 1px 5px; border-radius: 4px; background: #EDEDEF; font-size: 12px; }

/* Khuôn văn bản: 4 thẻ, thẻ đã có khuôn viền xanh cho thấy ngay còn thiếu cái nào. */
.hrp-tplwrap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hrp-tpl {
  padding: 10px 12px; border: 1px solid #D0D4E4; border-radius: 8px; background: #fff;
  display: flex; flex-direction: column; gap: 6px;
}
.hrp-tpl.on { border-color: #0073EA; background: #F7FBFF; }
.hrp-tpl-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hrp-tpl-no { font-size: 11px; color: #676879; font-variant-numeric: tabular-nums; }
.hrp-tpl-f { display: flex; align-items: center; gap: 5px; font-size: 12px; min-height: 20px; }
.hrp-tpl-f small { color: #9699A6; }
.hrp-tpl .btn { align-self: flex-start; }

.hrp-vhelp { margin-bottom: 8px; font-size: 12px; line-height: 1.5; color: #676879; }
.hrp-vars {
  /* 2 cột chứ không 3: .hrm-card đặt overflow:hidden nên cột thứ 3 bị CẮT CỤT
     ở mép phải (đo thật: "Ngày kết thúc thử việc" mất chữ cuối) chứ không đẩy
     thanh cuộn ra. */
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 20px;
  max-height: 300px; overflow: auto; padding: 10px; border: 1px solid #D0D4E4; border-radius: 8px; background: #fff;
}
.hrp-vgrp { break-inside: avoid; }
.hrp-vgh {
  margin: 6px 0 3px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #9699A6;
}
.hrp-vrow { display: flex; gap: 6px; align-items: baseline; font-size: 11.5px; line-height: 1.5; }
.hrp-vrow code { color: #0060B9; font-weight: 700; white-space: nowrap; }
.hrp-vrow span { color: #676879; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
  .hrp-tplwrap { grid-template-columns: 1fr; }
  .hrp-vars { grid-template-columns: 1fr; }
}

/* Ô tick "tất cả" ở tiêu đề. Trạng thái .part = đang chọn một phần: đổi hẳn dấu
   ✓ thành ✕ chứ không chỉ đổi màu — nhìn thoáng phải biết ngay bấm vào là CHỌN
   THÊM hay BỎ CHỌN. */
#workspace-hr-os .hrp-board thead .hr-check { vertical-align: middle; }
#workspace-hr-os .hrp-board thead .hr-check.part { background: var(--text-soft); border-color: var(--text-soft); }
#workspace-hr-os .hrp-board thead .hr-check.part svg { opacity: 1; color: #fff; }