/* HENDAR UALL-AF — employee register and payroll layout contract.
   Loaded last so legacy generic modal/flex rules cannot collapse these views. */

#employeesTable,
#projectEmployeesTable,
#hrPayrollTable{
  width:100%!important;
  max-width:100%!important;
  padding:8px 12px 14px!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  overscroll-behavior-inline:contain!important;
  scrollbar-gutter:stable!important;
}

#employeesTable .hr-employee-register,
#projectEmployeesTable .hr-employee-register,
#hrPayrollTable .hr-payroll-register{
  width:min(100%,1320px)!important;
  max-width:1320px!important;
  min-width:960px!important;
  margin-inline:auto!important;
  table-layout:fixed!important;
  border-collapse:separate!important;
  border-spacing:0!important;
}

#employeesTable .hr-employee-register :is(th,td),
#projectEmployeesTable .hr-employee-register :is(th,td),
#hrPayrollTable .hr-payroll-register :is(th,td){
  height:auto!important;
  min-height:0!important;
  padding:8px 10px!important;
  vertical-align:middle!important;
  line-height:1.35!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}

#employeesTable .hr-employee-register tbody tr,
#projectEmployeesTable .hr-employee-register tbody tr,
#hrPayrollTable .hr-payroll-register tbody tr{
  height:76px!important;
  min-height:76px!important;
}

#employeesTable .hr-employee-register th:nth-child(1),
#projectEmployeesTable .hr-employee-register th:nth-child(1){width:18%!important}
#employeesTable .hr-employee-register th:nth-child(2),
#projectEmployeesTable .hr-employee-register th:nth-child(2){width:13%!important}
#employeesTable .hr-employee-register th:nth-child(3),
#projectEmployeesTable .hr-employee-register th:nth-child(3){width:12%!important}
#employeesTable .hr-employee-register th:nth-child(4),
#projectEmployeesTable .hr-employee-register th:nth-child(4){width:10%!important}
#employeesTable .hr-employee-register th:nth-child(5),
#projectEmployeesTable .hr-employee-register th:nth-child(5){width:8%!important}
#employeesTable .hr-employee-register th:nth-child(6),
#projectEmployeesTable .hr-employee-register th:nth-child(6){width:39%!important}

#hrPayrollTable .hr-payroll-register th:nth-child(1){width:17%!important}
#hrPayrollTable .hr-payroll-register th:nth-child(2){width:9%!important}
#hrPayrollTable .hr-payroll-register th:nth-child(3){width:12%!important}
#hrPayrollTable .hr-payroll-register th:nth-child(4){width:11%!important}
#hrPayrollTable .hr-payroll-register th:nth-child(5){width:10%!important}
#hrPayrollTable .hr-payroll-register th:nth-child(6){width:15%!important}
#hrPayrollTable .hr-payroll-register th:nth-child(7){width:26%!important}

.hr-employee-row-actions,
.hr-payroll-row-actions{
  display:grid!important;
  width:100%!important;
  max-width:none!important;
  align-items:center!important;
  gap:5px!important;
  margin:0!important;
}
.hr-employee-row-actions{grid-template-columns:repeat(4,minmax(82px,1fr))!important}
.hr-payroll-row-actions{grid-template-columns:repeat(2,minmax(100px,1fr))!important}
.hr-employee-row-actions>.row-action,
.hr-payroll-row-actions>.row-action{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  margin:0!important;
  padding:4px 7px!important;
  font-size:10px!important;
  line-height:1!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.hr-employee-register td>strong,
.hr-payroll-register td>strong,
.hr-employee-register td>small,
.hr-payroll-register td>small{
  display:block!important;
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.hr-unified-hero{
  grid-template-columns:76px minmax(0,1fr)!important;
  gap:12px!important;
  min-height:0!important;
  padding:14px!important;
}
.hr-unified-actions{
  grid-column:1/-1!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  width:100%!important;
  max-width:none!important;
  padding-top:10px!important;
  border-top:1px solid var(--ds-border,#dbe5ef)!important;
}
.hr-unified-actions .button{
  flex:0 0 auto!important;
  height:34px!important;
  min-height:34px!important;
  padding:6px 11px!important;
  white-space:nowrap!important;
}
.hr-unified-metrics{gap:7px!important}
.hr-unified-metric{min-height:68px!important;padding:9px 11px!important}

/* The payroll ledger owns one vertical scroll. Months must never become
   shrinkable flex children (the source of the blank horizontal strips). */
#employeePayrollModal.employee-payroll-workspace{
  display:block!important;
  width:min(1120px,calc(100vw - 24px))!important;
  height:auto!important;
  max-height:calc(100dvh - 20px)!important;
  padding:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  border-radius:18px!important;
  background:#f5f7f8!important;
}
#employeePayrollModal.employee-payroll-workspace.hidden{display:none!important}
#employeePayrollModal.employee-payroll-workspace>*{
  flex:none!important;
  min-height:initial!important;
  max-height:none!important;
}
#employeePayrollModal .employee-payroll-head{
  position:sticky!important;
  inset-block-start:0!important;
  z-index:20!important;
  min-height:90px!important;
  padding:18px 20px!important;
  background:linear-gradient(115deg,#061f38,#0a3e68)!important;
  color:#fff!important;
}
#employeePayrollModal .employee-payroll-head :is(h2,.modal-subtitle){color:#fff!important}
#employeePayrollModal .employee-payroll-toolbar{min-height:62px!important;padding:14px 18px 9px!important}
#employeePayrollModal .employee-payroll-summary{
  min-height:78px!important;
  margin:7px 18px 14px!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
}
#employeePayrollModal .employee-payroll-summary article{min-height:78px!important;padding:11px 13px!important}
#employeePayrollModal .employee-payroll-summary strong{font-size:1.16rem!important}
#employeePayrollModal .employee-payroll-months{
  display:flex!important;
  flex:0 0 auto!important;
  flex-direction:column!important;
  gap:8px!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0 18px 18px!important;
  overflow:visible!important;
}
#employeePayrollModal .employee-payroll-month{
  display:block!important;
  flex:0 0 auto!important;
  width:100%!important;
  height:auto!important;
  min-height:66px!important;
  max-height:none!important;
  overflow:hidden!important;
}
#employeePayrollModal .employee-payroll-month>summary{
  display:grid!important;
  height:auto!important;
  min-height:66px!important;
  max-height:none!important;
  padding:8px 13px!important;
  overflow:visible!important;
}
#employeePayrollModal .employee-payroll-month-body{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}
#employeePayrollModal .employee-payroll-action-panel{
  display:block!important;
  flex:0 0 auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0 18px 18px!important;
  overflow:visible!important;
}
#employeePayrollModal .employee-payroll-action-panel.hidden{display:none!important}
#employeePayrollModal .employee-payroll-payment-form,
#employeePayrollModal .employee-payroll-reverse-form{height:auto!important;min-height:0!important;padding:16px!important}

@media(max-width:900px){
  .hr-employee-row-actions{grid-template-columns:repeat(2,minmax(104px,1fr))!important}
  #employeePayrollModal .employee-payroll-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:620px){
  #employeePayrollModal.employee-payroll-workspace{width:100vw!important;max-height:100dvh!important;border-radius:0!important}
  #employeePayrollModal .employee-payroll-summary{margin-inline:12px!important}
  #employeePayrollModal .employee-payroll-months,
  #employeePayrollModal .employee-payroll-action-panel{margin-inline:12px!important}
}