/* payments-module presentation: feature-specific layout only. */
.payment-yearly-header{display:flex;align-items:end;gap:10px}
.payment-yearly-copy{flex:1}
.payment-yearly-header h3{margin-bottom:4px}
.payment-year-select{width:120px}
.payment-yearly-total{margin-top:10px}
.payment-actions.payment-yearly-actions{margin-top:12px}
.pay-rate-secondary{font-size:12px;font-weight:800;color:#64748b}
.pay-card{border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:10px}
.pay-head{display:flex;justify-content:space-between;gap:10px}
.pay-name{font-weight:850}
.pay-rate{font-weight:900}
.pay-meta{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.6}
.pay-control-card{border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:12px}
.pay-control-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.pay-control-grid label{font-size:11px;color:#64748b;display:block;margin-bottom:4px}
.pay-control-grid select{width:100%;box-sizing:border-box}
.pay-control-grid .total-box{width:100%;box-sizing:border-box}
.total-box{min-height:46px;border:1px solid var(--line);border-radius:12px;padding:11px 12px;font-size:18px;display:flex;align-items:center}
.payment-actions{display:grid;grid-template-columns:1fr;margin-top:10px}
.payment-actions button{width:100%;min-height:48px;border-radius:12px;font-weight:900}
.payment-actions a{width:100%;min-height:48px;border-radius:12px;font-weight:900}
.payment-pdf-link{display:flex;align-items:center;justify-content:center;padding:12px;text-align:center}
@media(max-width:640px){
  .payment-actions{grid-template-columns:1fr}
  .pay-control-card{padding:14px}
  .pay-control-grid select{min-height:56px;font-size:17px}
  .total-box{min-height:56px;font-size:17px}
}

.payment-settings-fields{border:1px solid var(--line);border-radius:12px;padding:12px;grid-column:1/-1;min-width:0;max-width:100%;box-sizing:border-box}
.payment-settings-fields legend{font-weight:700}
.payment-settings-fields .form-grid>div{min-width:0}
#payMonthPaidControls{min-width:0;max-width:100%}
/* Safari month controls have an intrinsic width unless native sizing is reset. */
#payPaidMonth{display:block;width:100%;min-width:0;max-width:100%;height:50px;min-height:50px;box-sizing:border-box;-webkit-appearance:none;appearance:none}
.payment-balance-row,.payment-record-row{padding:12px 0;border-bottom:1px solid var(--line)}
#ledgerMonth{display:block;width:100%;min-width:0;max-width:100%;height:50px;min-height:50px;box-sizing:border-box;-webkit-appearance:none;appearance:none}
#paymentRecordForm{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:12px}

.payment-paid-check{display:flex;align-items:center;gap:10px;margin-top:12px;min-height:44px}
.payment-paid-check input[type="checkbox"]{width:24px;height:24px;min-width:24px;margin:0;padding:0;flex:0 0 24px}
#staffPaymentHistory{margin-top:16px;min-width:0;max-width:100%;overflow-wrap:anywhere}
#staffPaymentRecordForm{margin-top:12px}
#staffPaymentRecordForm input,#staffPaymentRecordForm select{min-width:0;max-width:100%;box-sizing:border-box}
#staffPaymentRecordForm input[type="date"],#staffPaymentRecordForm input[type="month"],#paymentRecordForm input[type="month"]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%;box-sizing:border-box}