.payroll-archive { margin: 20px 0; padding: 20px 0; border-block: 1px solid #ddd; min-width: 0; }
.payroll-archive .panel-heading { flex-wrap: wrap; gap: 8px; }
.payroll-archive h3 { margin: 0; font-size: 20px; }
.payroll-archive-controls { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(200px, 2fr) auto; gap: 14px; align-items: end; margin: 16px 0; }
.payroll-archive-controls label { display: grid; gap: 6px; min-width: 0; }
.payroll-archive-controls input, .payroll-archive-controls select { width: 100%; min-width: 0; height: 42px; box-sizing: border-box; }
.payroll-archive table { table-layout: fixed; width: 100%; min-width: 0; border-collapse: collapse; }
.payroll-archive th, .payroll-archive td { padding: 12px 8px; text-align: left; overflow-wrap: anywhere; border-bottom: 1px solid #e3e3e3; }
.payroll-archive th { font-size: 12px; color: #555; }
.payroll-archive td { font-size: 14px; vertical-align: top; }
.payroll-archive td small { display: block; margin-top: 5px; color: #666; }
.payroll-archive .archive-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.payroll-archive .archive-actions a { color: #b8440b; text-underline-offset: 3px; }
.payroll-archive-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 14px; }
.payroll-archive-pagination button { width: 42px; height: 42px; padding: 0; }
@media (max-width: 1000px) {
  .payroll-archive-controls { grid-template-columns: minmax(0, 1fr); }
  .payroll-archive table, .payroll-archive tbody { display: block; }
  .payroll-archive thead { display: none; }
  .payroll-archive tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 8px 0; border-bottom: 1px solid #bbb; }
  .payroll-archive td { display: block; border: 0; }
  .payroll-archive td::before { content: attr(data-label); display: block; margin-bottom: 5px; color: #555; font-size: 12px; }
  .payroll-archive td:last-child { grid-column: 1 / -1; }
}