.payroll-page .hr-metrics strong { font-size: clamp(24px, 2.2vw, 34px); }
.payroll-form-section { margin-bottom: 22px; }
.payroll-form-section h4 { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid #ead9b7; font-size: 15px; }
.payroll-salary-total { margin-top: 18px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; border-radius: 10px; background: #fff3d8; }
.payroll-salary-total strong { font-size: 22px; }
.payroll-effective-date { margin-top: 18px; }
.payroll-effective-date label { max-width: 280px; }
.payroll-run-header { align-items: center; }
.payroll-run-header h2 { margin-bottom: 5px; }
.payroll-run-header small { color: #687169; }
.payroll-run-actions { display: flex; align-items: center; gap: 10px; }
.payroll-empty { padding: 52px 24px; text-align: center; }
.payroll-empty > span { width: 54px; height: 54px; margin: auto; display: grid; place-items: center; border-radius: 15px; background: #fff3d8; color: #9a5b00; font-size: 25px; font-weight: 900; }
.payroll-empty h3 { margin: 14px 0 7px; font-size: 22px; }
.payroll-empty p { max-width: 570px; margin: auto; color: #687169; }
.payroll-row-actions { display: flex; gap: 7px; }
.payroll-table { min-width: 1020px; }
.payroll-notes-field { grid-column: 1 / -1; }
.payroll-notes-field textarea { padding: 11px 12px; border: 1px solid #cfd5ce; border-radius: 9px; resize: vertical; color: #181b19; font: inherit; }
.payroll-notes-field textarea:focus { outline: 3px solid #f3d79d; border-color: #b66b00; }

@media (max-width: 760px) {
  .payroll-run-header { align-items: stretch; }
  .payroll-run-actions { width: 100%; flex-direction: column; }
  .payroll-run-actions button { width: 100%; }
  .payroll-effective-date label { max-width: none; }
}