/* ════════════════════════════════════════════════════════════════
   HR OS — popup Hồ sơ nhân sự (#hr-staffcard): 5 nhóm ①–⑤.
   Popup gắn trong #workspace-hr-os (hrRoot()) nên nhận token của hr-os.css
   (--primary, --surface, --border…). Mọi luật scope #hr-staffcard — không đụng
   modal tuyển dụng (.hrm-*) dùng chung class.
   Nạp SAU hr-os.css: các luật .sc-* gốc nằm ở đó, file này chỉ chồng lên.
   ════════════════════════════════════════════════════════════════ */

/* Chữ đậm trên nền nhạt (--info-bg / --working-bg / --stuck-bg): hr-os.css không có token màu chữ
   cho các nền này nên khai một lần ở đây — giá trị lấy đúng số hr-os.css đang dùng cho pill. */
#hr-staffcard{--sc-info-fg:#1c5fb8;--sc-warn-fg:#9a5a00;--sc-err-fg:#B42318;--sc-err-bd:#FDA29B;}

/* ── nhóm ①–⑤: thẻ trắng trên nền xám của .sc-body ── */
#hr-staffcard .sc-grp{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:12px 16px 16px;margin-bottom:12px;}
#hr-staffcard .sc-grp:last-child{margin-bottom:0;}
#hr-staffcard .sc-grp > .sc-sec{display:flex;align-items:center;gap:8px;margin:0 0 12px;
  font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--text);}
#hr-staffcard .sc-secno{font-size:16px;line-height:1;font-weight:400;color:var(--primary);}
#hr-staffcard .sc-grp .sc-grid{margin-bottom:0;}

/* ── ô ghép: Sinh nhật · Năm sinh / Giờ làm từ – đến ── */
#hr-staffcard .sc-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
#hr-staffcard .sc-range{display:flex;align-items:center;gap:4px;}
#hr-staffcard .sc-range input{flex:1;min-width:0;font-variant-numeric:tabular-nums;}
#hr-staffcard .sc-range > span{color:var(--text-soft);}
#hr-staffcard .hrm-field input:disabled,
#hr-staffcard .hrm-field select:disabled{background:var(--surface-2);color:var(--text-soft);cursor:not-allowed;}

/* ── file hợp đồng ── */
#hr-staffcard .sc-files{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:36px;}
#hr-staffcard .sc-file{display:inline-flex;align-items:center;gap:4px;max-width:280px;padding:4px 12px;
  border:1px solid var(--border-2);border-radius:var(--radius-pill);background:var(--surface);
  font-family:inherit;font-size:12.5px;color:var(--text);cursor:pointer;}
#hr-staffcard .sc-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#hr-staffcard .sc-file:hover{border-color:var(--primary);color:var(--primary);}
#hr-staffcard .sc-empty{font-size:12.5px;color:var(--text-soft);}

/* ── thông báo trong nhóm ⑤ (thay style inline cũ) ── */
#hr-staffcard .sc-alert{margin-top:12px;padding:8px 12px;border-radius:var(--radius);font-size:12.5px;line-height:1.45;}
#hr-staffcard .sc-alert.err{background:var(--stuck-bg);border:1px solid var(--sc-err-bd);color:var(--sc-err-fg);}
#hr-staffcard .sc-lock{padding:12px;border-radius:var(--radius);background:var(--surface-2);border:1px solid var(--border);
  font-size:12.5px;line-height:1.5;color:var(--text-muted);}

/* ════════════════════════════════════════════════════════════════
   ④ LƯƠNG — khối js/hr/hr-salary-block.js (#sc-salary). Tiền: căn phải + tabular-nums.
   ════════════════════════════════════════════════════════════════ */
#hr-staffcard #sc-salary .hs-money{text-align:right;font-variant-numeric:tabular-nums;}
#hr-staffcard #sc-salary .sc-ro.hs-ro{justify-content:flex-end;}
#hr-staffcard #sc-salary .hs-neg{color:var(--stuck);}
#hr-staffcard #sc-salary .hs-empty{padding:8px 0;font-size:12.5px;color:var(--text-soft);}
#hr-staffcard #sc-salary .hs-warn{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:11.5px;font-weight:700;line-height:1.35;color:var(--stuck);}
#hr-staffcard #sc-salary .hs-warn .ic{flex:none;}
#hr-staffcard #sc-salary .hs-legacy{margin:0 0 12px;padding:8px 12px;border-radius:var(--radius);background:var(--working-bg);color:var(--sc-warn-fg);font-size:12.5px;}

/* hàng tick "Chọn tất cả · Lương cứng · …" — chip bo tròn, tick = nền primary nhạt */
#hr-staffcard #sc-salary .hs-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
#hr-staffcard #sc-salary .hs-chip{display:inline-flex;align-items:center;gap:8px;min-height:32px;margin:0;padding:4px 12px;
  border:1px solid var(--border-2);border-radius:var(--radius-pill);background:var(--surface);
  font-size:13px;font-weight:400;color:var(--text);cursor:pointer;user-select:none;}
#hr-staffcard #sc-salary .hs-chip input{width:16px;height:16px;min-height:0;margin:0;padding:0;accent-color:var(--primary);cursor:pointer;flex-shrink:0;}
#hr-staffcard #sc-salary .hs-chip.on{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-hover);font-weight:700;}
#hr-staffcard #sc-salary .hs-chip.hs-all{font-weight:700;}
#hr-staffcard #sc-salary .hs-chip.off{border-color:var(--border-2);background:var(--surface-2);color:var(--text-soft);font-weight:400;cursor:not-allowed;}
#hr-staffcard #sc-salary .hs-chip.off input{cursor:not-allowed;}
#hr-staffcard #sc-salary .hs-chip small{font-size:11px;color:var(--text-soft);font-weight:400;}

/* khối con của từng mục */
#hr-staffcard #sc-salary .hs-blk{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
#hr-staffcard #sc-salary .hs-title{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12.5px;font-weight:700;color:var(--text);}
#hr-staffcard #sc-salary .hs-pill{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--radius-pill);font-size:11px;font-weight:700;}
#hr-staffcard #sc-salary .hs-pill.warn{background:var(--working-bg);color:var(--sc-warn-fg);}
#hr-staffcard #sc-salary .hs-park{display:flex;align-items:center;gap:8px;}
#hr-staffcard #sc-salary .hs-park .sc-chk.hs-tgl{flex:none;}
#hr-staffcard #sc-salary .hs-park .hs-money{flex:1;min-width:0;}
#hr-staffcard #sc-salary .hs-unit{flex:none;font-size:12px;color:var(--text-muted);}

/* thưởng: bảng khoản */
#hr-staffcard #sc-salary .hs-items{width:100%;margin-top:12px;border-collapse:collapse;font-size:12.5px;}
#hr-staffcard #sc-salary .hs-items th{padding:8px;border-bottom:1px solid var(--border);background:var(--surface-2);text-align:left;
  font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);}
#hr-staffcard #sc-salary .hs-items td{padding:8px;border-bottom:1px solid var(--border);vertical-align:top;line-height:1.45;color:var(--text);}
#hr-staffcard #sc-salary .hs-items .r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
#hr-staffcard #sc-salary .hs-items td:first-child{width:32%;}
#hr-staffcard #sc-salary .hs-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
#hr-staffcard #sc-salary .hs-tag{display:inline-flex;align-items:center;height:18px;padding:0 8px;border-radius:var(--radius-pill);background:var(--info-bg);color:var(--sc-info-fg);font-size:11px;font-weight:700;}
#hr-staffcard #sc-salary .hs-max{margin-top:8px;font-size:12.5px;color:var(--text-muted);text-align:right;font-variant-numeric:tabular-nums;}
#hr-staffcard #sc-salary .hs-max b{color:var(--text);}

/* phụ cấp khác: dòng [Số tiền][Mô tả][Xoá] */
#hr-staffcard #sc-salary .hs-olist{display:flex;flex-direction:column;gap:8px;}
#hr-staffcard #sc-salary .hs-orow{display:grid;grid-template-columns:180px 1fr 32px;gap:8px;align-items:center;}
#hr-staffcard #sc-salary .hs-orow input{width:100%;min-height:36px;border:1px solid var(--border-2);border-radius:var(--radius-sm);padding:8px 12px;
  font-family:inherit;font-size:14px;color:var(--text);background:var(--surface);}
#hr-staffcard #sc-salary .hs-orow input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--focus-ring);}
#hr-staffcard #sc-salary .hs-ibtn{display:grid;place-items:center;width:32px;height:32px;border:none;border-radius:var(--radius);background:transparent;color:var(--text-muted);cursor:pointer;}
#hr-staffcard #sc-salary .hs-ibtn:hover{background:var(--stuck-bg);color:var(--stuck);}
#hr-staffcard #sc-salary .hs-add{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:4px 12px;border:1px dashed var(--border-2);border-radius:var(--radius);
  background:var(--surface);font-family:inherit;font-size:12.5px;font-weight:700;color:var(--primary);cursor:pointer;}
#hr-staffcard #sc-salary .hs-add:hover{border-color:var(--primary);background:var(--primary-soft);}
#hr-staffcard #sc-salary button:disabled{opacity:.5;cursor:not-allowed;}

/* lương net: ô NPT + bảng bóc tách */
#hr-staffcard #sc-salary .hs-netgrid{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:start;}
#hr-staffcard #sc-salary .hs-bd{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);padding:4px 12px;}
#hr-staffcard #sc-salary .hs-bdrow{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;color:var(--text-muted);}
#hr-staffcard #sc-salary .hs-bdrow:last-child{border-bottom:none;}
#hr-staffcard #sc-salary .hs-bdrow b{color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;}
#hr-staffcard #sc-salary .hs-nettot span{font-weight:700;color:var(--text);}
#hr-staffcard #sc-salary .hs-nettot b{font-size:18px;color:var(--primary-hover);}
#hr-staffcard #sc-salary .hs-nettot b.hs-neg{color:var(--stuck);}
@media (max-width:900px){
  #hr-staffcard #sc-salary .hs-netgrid{grid-template-columns:1fr;}
  #hr-staffcard #sc-salary .hs-orow{grid-template-columns:1fr 1fr 32px;}
}