/* ════════════════════════════════════════════════════════════════
   HR OS — popup PHIẾU LƯƠNG từng người (js/hr/hr-payslip.js, window.HRPayslip).
   Vỏ modal dùng lại .hrm-overlay / .hrm-card / .hrm-head / .hrm-field / .hrm-foot / .sc-ro /
   .sc-chk của hr-os.css; ở đây chỉ thêm phần riêng, mọi selector scope #workspace-hr-os .hps-*
   (popup gắn vào #workspace-hr-os). CSS của BẢN IN nằm trong HTML in, không nằm ở file này.
   ════════════════════════════════════════════════════════════════ */
/* styles.css:380 khai `.btn-primary{background:var(--accent) !important}` với --accent = amber toàn app
   ⇒ nút Lưu ra màu CAM, lệch hệ màu HR (--primary). Đè BIẾN tại popup (cùng cách .hrp-overlay của tab
   Bảng lương) — `!important` kia đọc var(--accent) tại chỗ nên đổi biến là đủ. */
#workspace-hr-os .hps-overlay{--accent:var(--primary);--accent-2:var(--primary-hover);--accent-soft:var(--primary-soft);}
#workspace-hr-os .hrm-card.hps-card{max-width:980px;display:flex;flex-direction:column;max-height:calc(100vh - 64px);}
#workspace-hr-os .hps-card .ic.s12{width:12px;height:12px;}
#workspace-hr-os .hps-head{flex-shrink:0;}
#workspace-hr-os .hps-hgroup{flex:1;min-width:0;}
#workspace-hr-os .hps-hgroup h3{margin:0;font-size:16px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#workspace-hr-os .hps-sub{margin-top:2px;font-size:12.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#workspace-hr-os .hps-sub i{font-style:normal;padding:0 6px;color:#C3C6D4;}
#workspace-hr-os .hps-st{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;border-radius:var(--radius-pill);padding:4px 12px;font-size:12px;font-weight:700;}
#workspace-hr-os .hps-st.draft{background:var(--working-bg);color:#B45309;}
#workspace-hr-os .hps-st.locked{background:var(--dark-bg);color:var(--text);}

#workspace-hr-os .hps-body{flex:1;min-height:0;overflow-y:auto;padding:16px;background:var(--app-bg);display:flex;flex-direction:column;gap:12px;}
#workspace-hr-os .hps-alerts{display:flex;flex-direction:column;gap:8px;}
#workspace-hr-os .hps-alerts:empty{display:none;}
#workspace-hr-os .hps-alert{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:var(--radius);font-size:12.5px;line-height:1.45;}
#workspace-hr-os .hps-alert .ic{margin-top:2px;}
#workspace-hr-os .hps-alert.warn{background:var(--working-bg);color:#8A4B00;}
#workspace-hr-os .hps-alert.info{background:var(--info-bg);color:#1F4E8C;}
#workspace-hr-os .hps-alert.err{background:var(--stuck-bg);color:#B42318;}
#workspace-hr-os .hps-alert.lock{background:var(--dark-bg);color:var(--text);}

#workspace-hr-os .hps-grp{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;min-width:0;}
#workspace-hr-os .hps-sec{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-soft);margin:0 0 10px;}
#workspace-hr-os .hps-note{display:inline-flex;align-items:center;gap:4px;text-transform:none;letter-spacing:0;font-size:11.5px;font-weight:600;color:var(--primary);background:var(--primary-soft);border-radius:var(--radius-pill);padding:1px 8px;}
#workspace-hr-os .hps-note.mute{color:var(--text-muted);background:var(--surface-3);}
#workspace-hr-os .hps-hint{margin-top:4px;font-size:11.5px;line-height:1.35;color:var(--text-soft);}
#workspace-hr-os .hps-hint.warn{color:#B54708;font-weight:600;}
#workspace-hr-os .hps-mute{color:var(--text-soft);font-weight:400;}
#workspace-hr-os .hps-empty{margin-top:12px;font-size:12.5px;color:var(--text-soft);}

/* (a) cơ cấu lương — 4 cột ô chỉ-đọc */
#workspace-hr-os .hps-g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 12px;}
#workspace-hr-os .hps-g4 .hrm-field .sc-ro{min-height:34px;font-size:13.5px;}

/* (b) ngày công */
#workspace-hr-os .hps-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;}
#workspace-hr-os .hps-tile{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);padding:10px 12px;min-width:0;}
#workspace-hr-os .hps-tl{font-size:11.5px;font-weight:600;color:var(--text-muted);}
#workspace-hr-os .hps-tv{margin-top:2px;text-align:left;font-size:18px;font-weight:700;color:var(--text);}
#workspace-hr-os .hps-ts{margin-top:2px;font-size:11.5px;color:var(--text-soft);overflow-wrap:anywhere;}
#workspace-hr-os .hps-tile.neg .hps-tv{color:var(--stuck);}
#workspace-hr-os .hps-facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
#workspace-hr-os .hps-facts span{font-size:12px;color:var(--text-muted);background:var(--surface-2);border-radius:var(--radius-pill);padding:3px 10px;}
#workspace-hr-os .hps-tbl{width:100%;border-collapse:collapse;margin-top:12px;font-size:13px;}
#workspace-hr-os .hps-tbl th{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--border-2);background:var(--surface-2);}
#workspace-hr-os .hps-tbl td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--border);color:var(--text);}
#workspace-hr-os .hps-tbl tfoot td{font-weight:700;border-bottom:none;}
#workspace-hr-os .hps-tbl .r{text-align:right;}
#workspace-hr-os .hps-tbl .num{font-variant-numeric:tabular-nums;white-space:nowrap;}
#workspace-hr-os .hps-tbl .hps-negt{color:var(--stuck);}

/* (c) ô nhập + (d) bóc tách, 2 cột */
#workspace-hr-os .hps-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start;}
#workspace-hr-os .hps-igrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;}
#workspace-hr-os .hps-igrid .hps-span2{grid-column:1 / -1;}
#workspace-hr-os .hps-igrid .hrm-field input.hps-money{text-align:right;font-variant-numeric:tabular-nums;}
#workspace-hr-os .hps-igrid .hrm-field input:disabled{background:#F0F1F5;color:var(--text-muted);cursor:not-allowed;}
#workspace-hr-os .hps-igrid .hrm-field input.hps-bad{border-color:var(--stuck);box-shadow:0 0 0 3px rgba(226,68,92,.18);}
#workspace-hr-os .hps-err{margin-top:3px;font-size:11.5px;color:var(--stuck);}
#workspace-hr-os .hps-err:empty{display:none;}
#workspace-hr-os .hps-bl{padding:6px 0;border-bottom:1px dashed var(--border);font-size:13px;}
#workspace-hr-os .hps-blr{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
#workspace-hr-os .hps-blr b{font-weight:600;white-space:nowrap;}
#workspace-hr-os .hps-bn{margin-top:2px;font-size:11.5px;line-height:1.4;color:var(--text-soft);}
#workspace-hr-os .hps-bl.sub{padding-left:14px;color:var(--text-muted);}
#workspace-hr-os .hps-bl.tot{border-top:1px solid var(--border-2);border-bottom:1px solid var(--border-2);margin-top:4px;}
#workspace-hr-os .hps-bl.tot .hps-blr b,#workspace-hr-os .hps-bl.tot .hps-blr span{font-weight:700;}
#workspace-hr-os .hps-bl.ded .hps-blr b{color:var(--stuck);}
#workspace-hr-os .hps-bl.ded.zero .hps-blr b{color:var(--text);}
#workspace-hr-os .hps-bl.net{border-bottom:none;margin-top:6px;padding:10px 12px;background:var(--primary-soft);border-radius:var(--radius);}
#workspace-hr-os .hps-bl.net .hps-blr span{font-weight:700;color:var(--text);}
#workspace-hr-os .hps-bl.net .hps-blr b{font-size:18px;font-weight:700;color:var(--primary);}
#workspace-hr-os .hps-bl.net.neg .hps-blr b{color:var(--stuck);}

#workspace-hr-os .hps-foot{flex-shrink:0;align-items:center;}
#workspace-hr-os .hps-footl,#workspace-hr-os .hps-footr{display:flex;align-items:center;gap:8px;min-width:0;}
#workspace-hr-os .hps-foothint{font-size:11.5px;line-height:1.35;color:var(--text-soft);}
#workspace-hr-os .hps-card .btn:disabled{opacity:.45;cursor:not-allowed;}

@media (max-width:900px){
  #workspace-hr-os .hps-g4{grid-template-columns:repeat(2,minmax(0,1fr));}
  #workspace-hr-os .hps-tiles{grid-template-columns:repeat(2,minmax(0,1fr));}
  #workspace-hr-os .hps-cols{grid-template-columns:minmax(0,1fr);}
}