/* Keep personnel forms and tables within the available screen width. */
#view:has(#pay-list){width:100%;min-width:0;overflow-wrap:anywhere}
#view:has(#pay-list) .panel,#pay-list,#pay-forecasts{min-width:0;max-width:100%}
#view:has(#pay-list) .table-wrap{max-width:100%;overflow-x:auto}
#view:has(#pay-list) .form-grid,#modal:has([id^="pay-"]) .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#modal:has([id^="pay-"]) .form-grid>label{min-width:0}
#modal:has([id^="pay-"]) .form-foot{flex-wrap:wrap;gap:8px}
#modal:has([id^="pay-"]) h3{margin:20px 0 10px}
#view:has(#pay-list) .panel-body>h2{margin-bottom:12px}
#pay-forecasts{margin-top:14px}
@media(max-width:600px){
#view:has(#pay-list) .form-grid,#modal:has([id^="pay-"]) .form-grid{grid-template-columns:minmax(0,1fr)}
#view:has(#pay-list) .page-head>div{min-width:0;max-width:100%}
#view:has(#pay-list) .notice{max-width:100%;overflow-wrap:anywhere}
#modal:has([id^="pay-"]) .btn{white-space:normal}
}