.payroll-panel { scroll-margin-top: 24px; }
.payroll-panel-heading, .payroll-toolbar, .payroll-rate-form, .payroll-pagination { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; }
.payroll-panel-heading { align-items: center; justify-content: space-between; }
.payroll-panel-heading h3 { margin: 0 0 8px; }
.payroll-panel-heading p { margin: 0; }
.payroll-panel .muted { color: #526174; font-size: 13px; line-height: 1.55; }
.payroll-rate-block { padding: 18px; margin: 20px 0; background: #f4f8fc; border: 1px solid #d7e2ee; border-radius: 12px; }
.payroll-panel .field { min-width: 180px; max-width: 100%; }
.payroll-panel input, .payroll-panel button, .payroll-panel a.ghost-button { min-height: 44px; }
.payroll-panel input:focus-visible, .payroll-panel button:focus-visible, .payroll-panel a:focus-visible, .payroll-late-label input:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
.payroll-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 20px 0; }
.payroll-summary-item { border: 1px solid #d7e2ee; border-radius: 12px; padding: 14px; background: #fff; min-width: 0; }
.payroll-summary-item span, .payroll-summary-item strong { display: block; overflow-wrap: anywhere; }
.payroll-summary-item span { color: #526174; font-size: 12px; line-height: 1.5; }
.payroll-summary-item strong { font-size: 20px; margin-top: 8px; }
.payroll-amount { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.payroll-amount.debit { color: #b42318; }
.payroll-amount.credit { color: #14724e; }
.payroll-history-badge { display: inline-block; padding: 3px 6px; margin-top: 5px; border-radius: 4px; color: #526174; background: #eef2f6; }
.payroll-course-id { display: block; overflow-wrap: anywhere; max-width: 240px; color: #526174; }
.payroll-pagination { justify-content: flex-end; align-items: center; margin-top: 16px; }
.payroll-late-control { flex-basis: 100%; min-width: 200px; }
.payroll-late-label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-size: 13px; }
.payroll-late-label input { width: 18px; height: 18px; min-height: 18px; margin: 0; accent-color: #1f4a80; }
.payroll-late-control .feedback-note { margin: 4px 0; font-size: 12px; }
.payroll-status-note { flex-basis: 100%; font-size: 12px; color: #526174; }
@media(max-width: 760px) {
  .payroll-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .payroll-panel-heading { align-items: flex-start; }
  .payroll-rate-form { align-items: stretch; }
  .payroll-rate-form .field, .payroll-rate-form button { width: 100%; }
  .payroll-panel .table-wrap { overflow: visible; }
  .payroll-table td { overflow-wrap: anywhere; }
  .payroll-pagination { justify-content: flex-start; }
}