/* UALL-V84 — approved KPI composition polish and compact mobile HR register. */

/* Preserve the approved card design; only normalize geometry and content baselines. */
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-head{
  position:relative!important;
  display:block!important;
  min-height:38px!important;
  padding-inline-start:44px!important;
}
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-icon{
  position:absolute!important;
  inset:0 auto auto 0!important;
  margin:0!important;
}
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-heading-copy{
  width:100%!important;
  min-width:0!important;
}
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v84-kpi-stage{
  position:absolute!important;
  z-index:3!important;
  inset:46% 12px auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:8px!important;
  height:28%!important;
  min-height:0!important;
  direction:rtl!important;
  pointer-events:none!important;
}
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v84-kpi-stage .hendar-v81-kpi-value{
  align-self:center!important;
  width:100%!important;
  margin:0!important;
}
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-contract .hendar-v84-kpi-stage,
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-finance .hendar-v84-kpi-stage{
  grid-template-columns:minmax(0,1fr)!important;
}
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-contract .hendar-v81-kpi-value,
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-finance .hendar-v81-kpi-value{
  overflow:visible!important;
  font-size:clamp(13px,1.22vw,20px)!important;
  font-weight:500!important;
  font-variant-numeric:tabular-nums lining-nums!important;
  letter-spacing:-.045em!important;
  text-overflow:clip!important;
}
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v84-kpi-stage :is(.hendar-v81-finance-meter,.hendar-v81-progress-ring,.hendar-v81-project-bars,.hendar-v81-paper-stack,.hendar-v81-risk-signal){
  position:relative!important;
  inset:auto!important;
  margin:0!important;
}
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v84-kpi-stage .hendar-v81-finance-meter{
  position:absolute!important;
  inset:auto 0 -4px!important;
}
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v84-kpi-stage .hendar-v81-progress-ring{justify-self:end!important}
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v84-kpi-stage .hendar-v81-project-bars,
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v84-kpi-stage .hendar-v81-paper-stack,
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v84-kpi-stage .hendar-v81-risk-signal{justify-self:start!important}

/* Dedicated employee-card layout on phones. Desktop remains the approved table. */
@media(max-width:760px){
  #hrView :is(#employeesTable,#projectEmployeesTable) table.hr-employee-register.hendar-mobile-cards tbody{
    display:grid!important;
    gap:12px!important;
  }
  #hrView :is(#employeesTable,#projectEmployeesTable) table.hr-employee-register.hendar-mobile-cards tbody tr{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-areas:
      "identity identity"
      "job department"
      "start contract"
      "status status"
      "actions actions"!important;
    gap:0 12px!important;
    width:100%!important;
    min-height:0!important;
    padding:14px!important;
    overflow:hidden!important;
    border-inline-start:4px solid #0f6c8d!important;
    border-radius:16px!important;
    background:linear-gradient(145deg,#fff 0%,#f8fbfc 100%)!important;
    box-shadow:0 10px 28px rgba(15,56,77,.08)!important;
  }
  #hrView :is(#employeesTable,#projectEmployeesTable) table.hr-employee-register.hendar-mobile-cards td[data-employee-field]{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:4px!important;
    width:auto!important;
    min-width:0!important;
    padding:9px 0!important;
    border:0!important;
    border-bottom:1px solid rgba(129,151,164,.16)!important;
    text-align:start!important;
  }
  #hrView :is(#employeesTable,#projectEmployeesTable) table.hr-employee-register.hendar-mobile-cards td[data-employee-field]::before{
    display:block!important;
    content:attr(data-label)!important;
    color:#718490!important;
    font-size:10px!important;
    font-weight:800!important;
    line-height:1.3!important;
  }
  #hrView :is(#employeesTable,#projectEmployeesTable) td[data-employee-field="identity"]{grid-area:identity!important}
  #hrView :is(#employeesTable,#projectEmployeesTable) td[data-employee-field="job"]{grid-area:job!important}
  #hrView :is(#employeesTable,#projectEmployeesTable) td[data-employee-field="department"]{grid-area:department!important}
  #hrView :is(#employeesTable,#projectEmployeesTable) td[data-employee-field="start"]{grid-area:start!important}
  #hrView :is(#employeesTable,#projectEmployeesTable) td[data-employee-field="contract"]{grid-area:contract!important}
  #hrView :is(#employeesTable,#projectEmployeesTable) td[data-employee-field="status"]{grid-area:status!important}
  #hrView :is(#employeesTable,#projectEmployeesTable) td[data-employee-field="actions"]{grid-area:actions!important}
  #hrView :is(#employeesTable,#projectEmployeesTable) table.hr-employee-register.hendar-mobile-cards td[data-employee-field="identity"]{
    display:block!important;
    padding:0 0 12px!important;
  }
  #hrView :is(#employeesTable,#projectEmployeesTable) table.hr-employee-register.hendar-mobile-cards td[data-employee-field="identity"]::before{display:none!important}
  #hrView :is(#employeesTable,#projectEmployeesTable) table.hr-employee-register.hendar-mobile-cards .employee-identity{
    grid-template-columns:46px minmax(0,1fr)!important;
    gap:11px!important;
  }
  #hrView :is(#employeesTable,#projectEmployeesTable) table.hr-employee-register.hendar-mobile-cards :is(.employee-identity>img,.employee-avatar-fallback){
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    border-radius:13px!important;
  }
  #hrView :is(#employeesTable,#projectEmployeesTable) table.hr-employee-register.hendar-mobile-cards .employee-identity strong{
    font-size:14px!important;
    font-weight:900!important;
  }
  #hrView :is(#employeesTable,#projectEmployeesTable) table.hr-employee-register.hendar-mobile-cards td[data-employee-field="status"]{
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
  }
  #hrView :is(#employeesTable,#projectEmployeesTable) table.hr-employee-register.hendar-mobile-cards td[data-employee-field="actions"]{
    padding:12px 0 0!important;
    border-bottom:0!important;
  }
  #hrView :is(#employeesTable,#projectEmployeesTable) table.hr-employee-register.hendar-mobile-cards td[data-employee-field="actions"]::before{
    margin-bottom:3px!important;
  }
  #hrView :is(#employeesTable,#projectEmployeesTable) table.hr-employee-register.hendar-mobile-cards .row-actions.hr-employee-row-actions{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
    width:100%!important;
  }
  #hrView :is(#employeesTable,#projectEmployeesTable) table.hr-employee-register.hendar-mobile-cards .hr-employee-row-actions>.row-action{
    min-width:0!important;
    min-height:42px!important;
    height:auto!important;
    max-height:none!important;
    padding:7px 5px!important;
    border-radius:10px!important;
    white-space:normal!important;
    font-size:10px!important;
    line-height:1.25!important;
  }
}

@media(max-width:760px){
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-head{
    min-height:34px!important;
    padding-inline-start:34px!important;
  }
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v84-kpi-stage{
    inset:45% 8px auto!important;
    height:29%!important;
    gap:4px!important;
  }
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-contract .hendar-v81-kpi-value,
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-finance .hendar-v81-kpi-value{
    font-size:clamp(9px,2.75vw,13px)!important;
    letter-spacing:-.055em!important;
  }
}

@media(max-width:350px){
  #hrView :is(#employeesTable,#projectEmployeesTable) table.hr-employee-register.hendar-mobile-cards .row-actions.hr-employee-row-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media print{
  #hrView :is(#employeesTable,#projectEmployeesTable) table.hr-employee-register td[data-employee-field]::before{display:none!important}
}