/* HENDAR UALL-BF — compact, readable HR registers.
   This file is intentionally loaded last.  The previous responsive layer used
   a more-specific flex selector for every .row-actions container, which
   neutralised the employee/payroll grid and made every action a full-width
   line.  These selectors bind density to the three HR registers only. */

#hrView #hrCompanyPanel .hr-layout{
  gap:12px!important;
}

#hrView .hr-tab-panel>.panel,
#hrView .hr-tab-panel>.hr-layout>.panel{
  min-height:0!important;
  padding:14px 16px 16px!important;
}

#hrView .hr-tab-panel>.panel>.panel-header,
#hrView .hr-tab-panel>.hr-layout>.panel>.panel-header{
  min-height:0!important;
  margin:0 0 8px!important;
  padding:0!important;
  align-items:flex-end!important;
}

#hrView .hr-tab-panel .panel-header .eyebrow{
  margin:0!important;
  font-size:9px!important;
  line-height:1.25!important;
  letter-spacing:.04em!important;
}

#hrView .hr-tab-panel .panel-header h3{
  margin:2px 0 0!important;
  font-size:17px!important;
  line-height:1.25!important;
}

#hrView .hr-tab-panel .panel-header p{
  max-width:780px!important;
  margin:3px 0 0!important;
  font-size:10px!important;
  line-height:1.5!important;
}

#hrView :is(#employeesTable,#projectEmployeesTable,#hrPayrollTable){
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  border-radius:12px!important;
  box-shadow:none!important;
  scrollbar-gutter:stable!important;
}

#hrView :is(#employeesTable,#projectEmployeesTable) table.hr-employee-register,
#hrView #hrPayrollTable table.hr-payroll-register{
  width:100%!important;
  max-width:none!important;
  min-width:1120px!important;
  margin:0!important;
  table-layout:fixed!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  font-size:11px!important;
}

#hrView :is(#employeesTable,#projectEmployeesTable,#hrPayrollTable) table :is(th,td){
  height:auto!important;
  min-height:0!important;
  padding:7px 9px!important;
  vertical-align:middle!important;
  line-height:1.35!important;
}

#hrView :is(#employeesTable,#projectEmployeesTable,#hrPayrollTable) table thead th{
  padding-block:9px!important;
  border-bottom:1px solid color-mix(in srgb,var(--ds-primary,#2563eb) 35%,var(--ds-border,#d7e1e8))!important;
  background:color-mix(in srgb,var(--ds-primary,#2563eb) 4%,var(--ds-surface,#fff))!important;
  color:var(--ds-heading,#102a43)!important;
  font-size:10px!important;
  font-weight:900!important;
  white-space:nowrap!important;
}

#hrView :is(#employeesTable,#projectEmployeesTable,#hrPayrollTable) table tbody tr{
  height:auto!important;
  min-height:0!important;
  background:var(--ds-surface,#fff)!important;
}

#hrView :is(#employeesTable,#projectEmployeesTable,#hrPayrollTable) table tbody tr:nth-child(even){
  background:color-mix(in srgb,var(--ds-primary,#2563eb) 2.4%,var(--ds-surface,#fff))!important;
}

#hrView :is(#employeesTable,#projectEmployeesTable,#hrPayrollTable) table tbody tr:hover{
  background:color-mix(in srgb,var(--ds-primary,#2563eb) 5%,var(--ds-surface,#fff))!important;
}

#hrView :is(#employeesTable,#projectEmployeesTable,#hrPayrollTable) table tbody td{
  border-bottom:1px solid color-mix(in srgb,var(--ds-border,#d7e1e8) 78%,transparent)!important;
}

#hrView :is(#employeesTable,#projectEmployeesTable,#hrPayrollTable) table tbody tr:last-child td{
  border-bottom:0!important;
}

/* Employee register proportions: content receives 66%, actions 34%. */
#hrView :is(#employeesTable,#projectEmployeesTable) table.hr-employee-register :is(th,td):nth-child(1){width:18%!important}
#hrView :is(#employeesTable,#projectEmployeesTable) table.hr-employee-register :is(th,td):nth-child(2){width:14%!important}
#hrView :is(#employeesTable,#projectEmployeesTable) table.hr-employee-register :is(th,td):nth-child(3){width:14%!important}
#hrView :is(#employeesTable,#projectEmployeesTable) table.hr-employee-register :is(th,td):nth-child(4){width:10%!important}
#hrView :is(#employeesTable,#projectEmployeesTable) table.hr-employee-register :is(th,td):nth-child(5){width:8%!important}
#hrView :is(#employeesTable,#projectEmployeesTable) table.hr-employee-register :is(th,td):nth-child(6){width:36%!important;overflow:visible!important}

/* Payroll register proportions: numbers stay scannable; actions use a 2x2 grid. */
#hrView #hrPayrollTable table.hr-payroll-register :is(th,td):nth-child(1){width:18%!important}
#hrView #hrPayrollTable table.hr-payroll-register :is(th,td):nth-child(2){width:9%!important}
#hrView #hrPayrollTable table.hr-payroll-register :is(th,td):nth-child(3){width:12%!important}
#hrView #hrPayrollTable table.hr-payroll-register :is(th,td):nth-child(4){width:11%!important}
#hrView #hrPayrollTable table.hr-payroll-register :is(th,td):nth-child(5){width:9%!important}
#hrView #hrPayrollTable table.hr-payroll-register :is(th,td):nth-child(6){width:15%!important}
#hrView #hrPayrollTable table.hr-payroll-register :is(th,td):nth-child(7){width:26%!important;overflow:visible!important}

/* These selectors outrank the generic table.hendar-responsive-register
   flex contract that caused one action per line in UALL-BE. */
#hrView :is(#employeesTable,#projectEmployeesTable) table.hendar-responsive-register .row-actions.hr-employee-row-actions{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  align-items:center!important;
  gap:5px!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}

#hrView #hrPayrollTable table.hendar-responsive-register .row-actions.hr-payroll-row-actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:center!important;
  gap:5px!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}

#hrView :is(#employeesTable,#projectEmployeesTable) table.hendar-responsive-register .hr-employee-row-actions>.row-action,
#hrView #hrPayrollTable table.hendar-responsive-register .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;
  min-height:30px!important;
  height:30px!important;
  max-height:30px!important;
  margin:0!important;
  padding:4px 6px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:10px!important;
  line-height:1!important;
}

#hrView :is(.hr-employee-register,.hr-payroll-register) td>strong{
  display:block!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:var(--ds-heading,#102a43)!important;
  font-size:12px!important;
  line-height:1.35!important;
}

#hrView :is(.hr-employee-register,.hr-payroll-register) td>small{
  display:block!important;
  max-width:100%!important;
  margin-top:2px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:9px!important;
  line-height:1.25!important;
}

@media(max-width:760px){
  #hrView .hr-tab-panel>.panel,
  #hrView .hr-tab-panel>.hr-layout>.panel{
    padding:11px!important;
  }

  #hrView .hr-tab-panel>.panel>.panel-header,
  #hrView .hr-tab-panel>.hr-layout>.panel>.panel-header{
    margin-bottom:7px!important;
  }

  #hrView :is(#employeesTable,#projectEmployeesTable,#hrPayrollTable){
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
  }

  #hrView :is(#employeesTable,#projectEmployeesTable) table.hr-employee-register,
  #hrView #hrPayrollTable table.hr-payroll-register{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    table-layout:auto!important;
  }

  #hrView :is(#employeesTable,#projectEmployeesTable,#hrPayrollTable) table.hendar-mobile-cards tbody{
    gap:9px!important;
  }

  #hrView :is(#employeesTable,#projectEmployeesTable,#hrPayrollTable) table.hendar-mobile-cards tr{
    padding:10px!important;
    border-radius:12px!important;
    box-shadow:0 6px 16px rgba(15,23,42,.05)!important;
  }

  #hrView :is(#employeesTable,#projectEmployeesTable,#hrPayrollTable) table.hendar-mobile-cards td{
    grid-template-columns:minmax(88px,30%) minmax(0,1fr)!important;
    gap:8px!important;
    padding:7px 1px!important;
  }

  #hrView :is(#employeesTable,#projectEmployeesTable) table.hendar-responsive-register .row-actions.hr-employee-row-actions,
  #hrView #hrPayrollTable table.hendar-responsive-register .row-actions.hr-payroll-row-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }

  #hrView :is(#employeesTable,#projectEmployeesTable) table.hendar-responsive-register .hr-employee-row-actions>.row-action,
  #hrView #hrPayrollTable table.hendar-responsive-register .hr-payroll-row-actions>.row-action{
    min-height:42px!important;
    height:42px!important;
    max-height:42px!important;
    padding:7px 6px!important;
    white-space:normal!important;
    font-size:10px!important;
    line-height:1.25!important;
  }
}

@media(max-width:340px){
  #hrView :is(#employeesTable,#projectEmployeesTable) table.hendar-responsive-register .row-actions.hr-employee-row-actions,
  #hrView #hrPayrollTable table.hendar-responsive-register .row-actions.hr-payroll-row-actions{
    grid-template-columns:minmax(0,1fr)!important;
  }
}

@media print{
  #hrView :is(#employeesTable,#projectEmployeesTable) table.hr-employee-register,
  #hrView #hrPayrollTable table.hr-payroll-register{
    min-width:0!important;
  }

  #hrView :is(#employeesTable,#projectEmployeesTable,#hrPayrollTable) table tbody tr{
    break-inside:avoid!important;
  }
}