/* V420 - Payroll responsive professional */
.v413-payroll{
  overflow:visible;
}
.v413-payroll-head{
  gap:12px!important;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.v413-payroll-actions{
  gap:7px!important;
}
.v413-payroll-actions button,
.v413-payroll-actions a{
  min-height:36px;
}
.v413-payroll-kpis{
  margin-top:12px;
}
.v413-payroll-list{
  border:1px solid var(--border);
  border-radius:10px;
  overflow:visible;
  background:var(--card);
}
.v413-payroll-row{
  padding:11px 10px!important;
  gap:9px!important;
}
.v420-id-cell{
  min-width:0;
  padding:7px 8px;
  border-left:1px solid var(--border);
}
.v420-id-cell span{
  display:block;
  font-size:9px;
  line-height:1.25;
  color:var(--muted-foreground);
}
.v420-id-cell strong{
  display:block;
  margin-top:4px;
  font-size:10.5px;
  line-height:1.3;
  font-weight:600;
  color:var(--foreground);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.v413-money strong,
.v419-allowance-cell summary strong{
  font-variant-numeric:tabular-nums;
}

/* Desktop lớn: hiển thị đủ 3 cột hồ sơ */
@media(min-width:1281px){
  .v413-payroll-row{
    grid-template-columns:
      minmax(165px,1.3fr)
      minmax(90px,.62fr)
      minmax(105px,.72fr)
      minmax(95px,.66fr)
      minmax(150px,1.05fr)
      minmax(105px,.75fr)
      minmax(105px,.75fr)
      repeat(4,minmax(88px,.62fr))
      auto!important;
    align-items:center!important;
  }
}

/* Laptop 901-1280: hồ sơ vẫn đủ nhưng gọn, ẩn 2 chỉ số phụ ít quan trọng */
@media(min-width:901px) and (max-width:1280px){
  .v413-payroll-row{
    grid-template-columns:
      minmax(155px,1.25fr)
      minmax(82px,.62fr)
      minmax(98px,.72fr)
      minmax(90px,.66fr)
      minmax(135px,1fr)
      minmax(100px,.72fr)
      minmax(100px,.72fr)
      repeat(2,minmax(88px,.65fr))
      auto!important;
  }
  .v413-payroll-row>.v413-money:nth-of-type(5),
  .v413-payroll-row>.v413-money:nth-of-type(6){
    display:none!important;
  }
}

/* Tablet: chuyển 3 thông tin hồ sơ thành hàng thông tin gọn */
@media(max-width:900px){
  .v413-payroll-row{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .v413-employee{
    grid-column:1/-1;
    padding-bottom:4px;
  }
  .v420-id-cell{
    border:1px solid var(--border);
    border-radius:8px;
    padding:8px 9px;
    background:var(--card);
  }
  .v420-mst{
    grid-column:1/-1;
  }
  .v414-sales-revenue,
  .v419-allowance-cell{
    grid-column:1/-1!important;
  }
}

/* Mobile */
@media(max-width:640px){
  .v413-payroll-head{
    padding-bottom:10px;
  }
  .v413-payroll-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    width:100%;
  }
  .v413-payroll-actions .v413-status{
    grid-column:1/-1;
    justify-self:start;
  }
  .v413-payroll-actions button,
  .v413-payroll-actions a{
    width:100%;
    min-height:42px;
    justify-content:center;
  }
  .v413-payroll-kpis{
    gap:1px!important;
  }
  .v413-payroll-row{
    padding:12px!important;
  }
  .v413-employee strong{
    font-size:14px!important;
  }
  .v420-id-cell span{
    font-size:10px;
  }
  .v420-id-cell strong{
    margin-top:3px;
    font-size:11.5px;
    white-space:normal;
  }
  .v420-mst{
    grid-column:auto;
  }
  .v413-money,
  .v419-allowance-cell summary{
    min-height:58px;
  }
  .v419-allowance-detail{
    position:static!important;
    width:100%!important;
  }
}
@media(max-width:390px){
  .v413-payroll-actions{
    grid-template-columns:1fr;
  }
  .v420-id-cell{
    grid-column:1/-1;
  }
}