.payroll-page .payroll-header {
  padding: 4px 9px 10px 70px; gap: 35px; min-height: 134px; align-items: flex-start;
}
.payroll-head-left { flex: 1; min-width: 0; }
.payroll-head-right { width: 47%; flex: none; position: relative; }
.payroll-head-row { display: grid; grid-template-columns: 145px minmax(0,390px); gap: 12px;
  align-items: center; min-height: 34px; margin-bottom: 9px; }
.payroll-head-row > label { font-size: 15px; color: #000; text-align: left; }
.payroll-head-row > .field { display: block; margin: 0; }
.payroll-head-row > .field > label { display: none; }
.payroll-head-row select { height: 34px; width: 100%; min-width: 0; }
.payroll-head-row .text-panel-disabled { min-height: 34px; border: 1px solid #a6aab2;
  border-radius: 6px; padding: 6px 8px; background: #f5f7fb; color: #51555c; font-size: 16px; }
.payroll-head-row:has(.text-panel-disabled):nth-child(2) .text-panel-disabled { max-width: 256px; }
.payroll-period { display: flex; gap: 7px; max-width: 256px; }
.payroll-period > select:first-child { width: 65%; }
.payroll-period > select:last-child { width: 35%; }
.payroll-head-right > .field { display: grid; grid-template-columns: 118px minmax(0,1fr);
  gap: 12px; align-items: center; margin: 0 0 9px; }
.payroll-head-right > .field > label { text-align: right; font-size: 15px; }
.payroll-head-right .accurate-date { max-width: 229px; }
.payroll-process { position: absolute; right: 0; bottom: 0; display: inline-block; }
.payroll-process > button { height: 34px; padding: 6px 25px 6px 12px; }
.payroll-process > button::after { content: ''; position: absolute; right: 10px; top: 14px;
  width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); }
.payroll-process .dropdown-menu { display: none; position: absolute; top: 100%; right: 0; margin: 0;
  padding: 4px 0; min-width: 165px; z-index: 30; list-style: none; border: 1px solid #a6aab2;
  background: white; box-shadow: 0 1px 2px rgba(16, 29, 66, 0.06), 0 2px 8px rgba(16, 29, 66, 0.06) ; }
.payroll-process .dropdown-menu.open { display: block; }
.payroll-process .dropdown-menu a { display: block; padding: 8px 15px; text-decoration: none; color: #0a111e; }
.payroll-process .dropdown-menu a:hover { background: #ebf0f8; }
.payroll-card .grid-controls { gap: 28px; margin-bottom: 12px; height: 39px; flex-shrink: 0; }
.payroll-card .payroll-find { width: 32%; border: 0; background: transparent; }
.payroll-card .payroll-find .lookup { width: 100%; }
.payroll-card .grid-controls h3 { margin: 0 0 0 auto; font-weight: 400; font-size: 22px; }
.payroll-card .grid-controls h3 label { color: #000; font-weight: 400; font-size: 22px; }
.payroll-card .grid-controls h3 label.required::after { content: ' *'; color: red; }
.payroll-card > .grid-scroll { flex: 1; background: #fff; min-height: 250px; }
.payroll-card .data-grid th[data-grid-key='employeeName'] { width: 56%; }
.payroll-card .data-grid th[data-grid-key='incomeAmount'],
.payroll-card .data-grid th[data-grid-key='pphAmount'],
.payroll-card .data-grid th[data-grid-key='amount'] { width: 14.667%; }
.payroll-card .data-grid td { height: 41px; font-size: 14px; }
.payroll-totals { flex: none; margin-top: 0; }
.payroll-totals .total-box { min-height: 80px; font-size: 15px; }
.payroll-detail-dialog { width: 600px; max-width: calc(100vw - 60px); }
.payroll-detail-dialog .dialog-tabs { display: flex; gap: 0; border-bottom: 1px solid #a6aab2; margin-bottom: 10px; }
.payroll-detail-dialog .dialog-tabs button { border: 0; border-bottom: 3px solid transparent; border-radius: 0;
  padding: 10px 15px 8px; background: transparent; color: #62666d; font-size: 15px; }
.payroll-detail-dialog .dialog-tabs button.active { color: red; border-bottom-color: red; }
.payroll-dialog-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.payroll-dialog-head > .field { flex: 1; min-width: 0; display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 12px; }
.payroll-detail-dialog .payroll-fee-group { border-top: 1px solid #d9dde5; padding: 9px 10px; }
.payroll-fee-group h3 { font-size: 18px; font-weight: 400; margin: 0 0 8px; }
.payroll-fee-group .field { display: grid; grid-template-columns: minmax(180px,1fr) 190px auto; gap: 8px;
  align-items: center; margin: 0 0 9px; }
.payroll-fee-group .field > label { margin: 0; color: #000; }
.payroll-detail-dialog .payroll-dialog-footer { display: flex; justify-content: space-between;
  border-top: 1px solid #a6aab2; margin-top: 14px; padding: 10px; gap: 15px; }
.payroll-dialog-footer b { display: block; text-align: right; margin-top: 8px; }
.payroll-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; }
.payroll-summary-row { display: flex; justify-content: space-between; padding: 9px 0; gap: 12px; }
.payroll-summary-fees { border:1px solid #a6aab2; border-radius:8px; padding:0 10px; height:fit-content; }
.payroll-summary-fees .payroll-summary-row + .payroll-summary-row { border-top:1px solid #c9cdd5; }
.payroll-payment-history { padding:0; }
.payroll-payment-entry { display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:9px 10px; border:1px solid #a6aab2; border-radius:6px; margin-bottom:7px; }
.payroll-payment-entry button { text-align:left; padding:0; color:#2453d7; }
.payroll-payment-entry small { grid-column:1/-1; font-size:11px; }
.payroll-detail-dialog .form-grid { display:block; min-height:340px; }
.payroll-detail-dialog .form-grid .field { grid-template-columns:180px minmax(0,1fr); }
.payroll-computed .field { display:grid;grid-template-columns:180px 233px;gap:12px;align-items:center;margin:9px 0; }
@media(max-width:900px) {
  .payroll-page .payroll-header { flex-direction: column; min-height: 0; padding-left: 15px!important; gap: 5px; }
  .payroll-header > .payroll-head-left, .payroll-header > .payroll-head-right { width: 100%; }
  .payroll-process { position: relative; display: block; text-align: right; }
  .payroll-summary { grid-template-columns: 1fr; }
}
@media(max-width:600px) {
  .payroll-head-row { grid-template-columns: 115px minmax(0,1fr); }
  .payroll-fee-group .field { grid-template-columns: 1fr 120px; }
  .payroll-dialog-head { display: block; }
  .payroll-card .grid-controls { gap: 8px; }
}