/* Payroll uses the page's vertical scroll; table cells wrap within the viewport. */
.payroll-page .payroll-main { container-type:inline-size; }
.payroll-page .payroll-main .table-wrap { overflow:visible; overscroll-behavior:auto; }
.payroll-page .payroll-table { width:100%; min-width:0!important; table-layout:fixed; }
.payroll-page .payroll-table th,.payroll-page .payroll-table td { min-width:0; white-space:normal!important; overflow-wrap:anywhere; padding:12px 8px; }
.payroll-page .payroll-table th:first-child { width:21%; }
.payroll-page .payroll-table th:nth-child(2) { width:15%; }
.payroll-page .payroll-table th:last-child { width:54px; }
.payroll-page .payroll-table :is(.employee-name,.payment-cell) { min-width:0; max-width:none; }
@container (max-width:1000px) {
 .payroll-page .payroll-table,.payroll-page .payroll-table tbody { display:block; }
 .payroll-page .payroll-table thead { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
 .payroll-page .payroll-table tr { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:16px;border-top:1px solid var(--line); }
 .payroll-page .payroll-table td { display:block!important;width:auto!important;min-width:0;position:static!important;padding:0;border:0;text-align:left;box-shadow:none!important; }
 .payroll-page .payroll-table td::before { content:attr(data-label);display:block;font-size:12px;color:var(--muted); }
 .payroll-page .payroll-table td:first-child,.payroll-page .payroll-table td:last-child,.payroll-page .payroll-table td[colspan] { grid-column:1/-1; }
 .payroll-page .payroll-table td:first-child::before,.payroll-page .payroll-table td:last-child::before { display:none; }
 .payroll-page .more-button { width:100%;font-size:0; }
 .payroll-page .more-button::after { content:'ดูรายละเอียด';font-size:14px; }
}
@container (max-width:520px) { .payroll-page .payroll-table tr { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* Compact employee summary: all main controls fit a standard laptop screen. */
.payroll-page .payroll-detail-modal { width:min(1060px,100%);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:16px; }
.payroll-page .payroll-detail-modal > :is(.modal-head,.employee-pay-kpis,.payment-summary,.modal-actions),
.payroll-page .payroll-detail-modal > .detail-section:first-of-type { grid-column:1/-1; }
.payroll-page .payroll-detail-modal .modal-head { margin:0; }
.payroll-page .payroll-detail-modal .modal-head h2 { font-size:22px; }
.payroll-page .payroll-detail-modal :is(p,h2,h3) { margin:0; }
.payroll-page .payroll-detail-modal .eyebrow { font-size:11px; }
.payroll-page .payroll-detail-modal .modal-head p { font-size:12px; }
.payroll-page .payroll-detail-modal .employee-pay-kpis { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0; }
.payroll-page .payroll-detail-modal .employee-pay-kpis > div { padding:8px 10px;min-width:0; }
.payroll-page .payroll-detail-modal .employee-pay-kpis b { font-size:18px; }
.payroll-page .payroll-detail-modal .detail-section { margin:0;padding:10px 12px;min-width:0; }
.payroll-page .payroll-detail-modal .detail-section h3 { font-size:15px; }
.payroll-page .payroll-detail-modal .detail-section p { font-size:12px; }
.payroll-page .payroll-detail-modal .detail-section-head { margin:0 0 6px;gap:8px; }
.payroll-page .payroll-detail-modal .source-detail-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; }
.payroll-page .payroll-detail-modal .source-detail-grid > div { padding:6px 10px; }
.payroll-page .payroll-detail-modal .source-detail-grid :is(span,small) { font-size:12px; }
.payroll-page .payroll-detail-modal .source-detail-grid b { font-size:15px; }
.payroll-page .payroll-detail-modal .log-list { margin:0;gap:6px; }
.payroll-page .payroll-detail-modal .log-row { padding:6px;gap:6px; }
.payroll-page .payroll-detail-modal .log-row :is(b,small) { font-size:12px; }
.payroll-page .payroll-detail-modal button { min-height:36px;padding:6px 10px;font-size:13px; }
.payroll-page .payroll-detail-modal .payment-summary { align-items:center; }
.payroll-page .payroll-detail-modal .modal-actions { margin:0;padding:0; }
.payroll-page .audit-list { max-height:none;overflow:visible; }
@media(max-width:650px) {
 .payroll-page .payroll-detail-modal { grid-template-columns:minmax(0,1fr);padding:12px; }
 .payroll-page .payroll-detail-modal .employee-pay-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .payroll-page .payroll-detail-modal .source-detail-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}