.workforce { color: #20324a; }
.hr-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:20px; }
.hr-head h2 { font-size:24px; margin-bottom:7px; }
.hr-muted, .hr-head p { color:#63738a; font-size:13px; line-height:1.7; }
.hr-status { display:inline-block; padding:8px 12px; background:#e8eef7; border-radius:18px; font-size:12px; max-width:420px; }
.hr-status.live { background:#dcfce7; color:#166534; }
.hr-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:20px; }
.hr-card, .hr-panel { background:white; border:1px solid #dfe7f0; border-radius:12px; padding:20px; margin-bottom:18px; }
.hr-card { margin:0; border-top:3px solid #3b82f6; }
.hr-card strong { display:block; font-size:26px; margin-top:8px; }
.hr-card span { font-size:12px; color:#63738a; }
.hr-panel h3 { font-size:16px; margin-bottom:14px; }
.hr-form { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-items:end; margin:16px 0; }
.hr-form label { display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:600; }
.hr-form input, .hr-form select, .hr-form textarea, .hr-filter { width:100%; padding:10px; border:1px solid #c9d5e3; border-radius:6px; background:#fff; color:#20324a; min-height:40px; }
.hr-form button, .hr-btn { background:#163c67; color:white; border-radius:6px; padding:11px 15px; font-size:12px; }
.hr-btn.secondary { background:#eef3fa; color:#163c67; }
.workforce button:disabled { opacity:.5; cursor:wait; }
.hr-toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:14px 0; }
.hr-filter { width:auto; max-width:100%; }
.hr-table-wrap { overflow:auto; }
.hr-table { width:100%; border-collapse:collapse; font-size:12px; white-space:nowrap; }
.hr-table th { text-align:left; background:#f4f7fb; color:#63738a; font-weight:600; }
.hr-table th, .hr-table td { padding:12px; border-bottom:1px solid #e8edf4; }
.hr-table button { padding:6px 9px; margin:2px; background:#edf3fc; color:#184573; border-radius:4px; }
.hr-empty { padding:32px!important; text-align:center; color:#63738a; }
.hr-badge { display:inline-block; padding:5px 9px; border-radius:14px; background:#edf2f8; }
.hr-badge.Approved, .hr-badge.Paid { background:#dcfce7; color:#166534; }
.hr-badge.Pending, .hr-badge.Draft { background:#fff2d5; color:#8b5a00; }
.hr-message { background:#edf5ff; border-left:3px solid #3b82f6; padding:12px 16px; font-size:13px; line-height:1.7; margin-bottom:16px; }
.hr-error { color:#991b1b; background:#fee2e2; }
.hr-panel summary { cursor:pointer; font-weight:600; }
.hr-wide { grid-column:1/-1; }
.hr-slip { white-space:pre-wrap; font-family:inherit; line-height:1.8; padding:20px; }
.hr-payslip-preview { margin-top:22px; border-top:2px solid #dfe7f0; padding-top:18px; }
.hr-payslip-preview .hr-toolbar h3 { margin:0; margin-right:auto; }
.hr-slip { white-space:normal; overflow-wrap:anywhere; }
.hr-slip p { margin:12px 0; }
.hr-slip-brand { display:flex; align-items:center; gap:18px; border-bottom:2px solid #163c67; padding-bottom:14px; margin-bottom:16px; }
.hr-slip-logo, .hr-slip-mark { width:72px; height:72px; object-fit:contain; flex:0 0 72px; }
.hr-slip-mark { display:grid; place-items:center; border:2px solid #163c67; font-size:26px; font-weight:700; }
.hr-slip-brand h2 { font-size:21px; line-height:1.3; }
.hr-slip-brand h3 { font-size:16px; margin:8px 0 0; }
.hr-slip-brand p { margin:5px 0; font-size:12px; }
.hr-slip-details { display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; margin:14px 0; font-size:12px; }
.hr-slip-details dt { font-weight:600; color:#52647b; }
.hr-slip-details dd { margin:0; }
.hr-slip-notes { font-size:12px; }
.hr-payslip-preview .hr-slip {
  box-sizing:border-box;
  width:210mm;
  max-width:100%;
  aspect-ratio:210 / 297;
  margin:20px auto;
  padding:clamp(16px,4vw,15mm);
  background:#fff;
  border:1px solid #dfe7f0;
  box-shadow:0 3px 16px rgba(0,0,0,.08);
}
@page fms-payslip { size:A4 portrait; margin:15mm; }
@media print {
  body.hr-print { display:block!important; margin:0!important; padding:0!important; background:#fff!important; }
  body.hr-print #hr-print-area { page:fms-payslip; width:auto!important; margin:0!important; padding:0!important; }
  #hr-print-area .hr-slip { width:100%; margin:0; padding:0; border:0; box-shadow:none; color:#000; }
  #hr-print-area .hr-table tr { break-inside:avoid; }
  #hr-print-area .hr-slip h2, #hr-print-area .hr-slip h3 { break-after:avoid; }
  #hr-print-area .hr-slip-brand, #hr-print-area .hr-slip-details > div { break-inside:avoid; }
  #hr-print-area .hr-table { table-layout:fixed; }
  #hr-print-area .hr-table th:last-child, #hr-print-area .hr-table td:last-child { width:35%; text-align:right; }
  body.hr-print #printArea { display:none!important; }
}
@media print { #hr-print-area .hr-table { white-space:normal; } #hr-print-area .hr-table-wrap { overflow:visible; } }
@media(max-width:1000px) { .hr-form,.hr-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } .hr-head { flex-direction:column; } }
@media(max-width:560px) { .hr-form,.hr-cards { grid-template-columns:1fr; } .hr-panel { padding:14px; } }
@media print { body.hr-print > * { display:none!important; } body.hr-print #hr-print-area { display:block!important; } }