/* V422 - Danh sach nhan vien bang luong: card 2 tang, desktop/mobile */
.v422-payroll-list{
  display:flex!important;
  flex-direction:column;
  gap:10px;
  border:0!important;
  background:transparent!important;
}
.v422-employee-card{
  display:block!important;
  padding:0!important;
  border:1px solid var(--border)!important;
  border-radius:12px!important;
  overflow:visible!important;
  background:var(--card)!important;
}
.v422-card-top{
  display:grid;
  grid-template-columns:minmax(220px,1.6fr) minmax(120px,.8fr) minmax(135px,.9fr) minmax(110px,.75fr);
  align-items:center;
  gap:0;
  border-bottom:1px solid var(--border);
}
.v422-card-top>div{
  min-width:0;
  padding:12px 14px;
}
.v422-card-top>div+div{
  border-left:1px solid var(--border);
}
.v422-employee-main{
  min-width:0;
}
.v422-employee-main strong{
  display:block;
  font-size:13.5px!important;
  line-height:1.35;
  color:var(--foreground);
}
.v422-employee-main small{
  display:block;
  margin-top:3px!important;
  font-size:10.5px!important;
  line-height:1.4;
  color:var(--muted-foreground);
}
.v422-profile-item span{
  display:block;
  font-size:9.5px;
  color:var(--muted-foreground);
}
.v422-profile-item strong{
  display:block;
  margin-top:4px;
  font-size:11px;
  font-weight:600;
  color:var(--foreground);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.v422-card-metrics{
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:0;
}
.v422-metric{
  min-width:0;
  padding:11px 10px;
  border-right:1px solid var(--border);
  background:var(--card);
}
.v422-metric:last-child{border-right:0}
.v422-metric>span,
.v422-metric summary>span{
  display:block;
  font-size:9.5px;
  line-height:1.25;
  color:var(--muted-foreground);
}
.v422-metric>strong,
.v422-metric summary>strong{
  display:block;
  margin-top:5px;
  font-size:12px;
  line-height:1.25;
  font-weight:700;
  color:var(--foreground);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.v422-metric>small,
.v422-metric summary>small{
  display:block;
  margin-top:4px;
  font-size:9px;
  line-height:1.3;
  color:var(--muted-foreground);
}
.v422-sales,
.v421-kpi-bonus,
.v421-net-cell{
  background:var(--muted);
}
.v421-kpi-bonus,
.v421-net-cell{
  border-radius:0!important;
}
.v419-allowance-cell summary{
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}
.v419-allowance-detail{
  top:100%;
  left:0;
  right:auto;
  min-width:220px;
}
.v422-card-actions{
  display:flex;
  justify-content:flex-end;
  padding:8px 10px;
  border-top:1px solid var(--border);
  background:var(--muted);
}
.v422-card-actions .v413-delete{
  min-height:32px;
}

/* Laptop: 4 cot metric x 2 hang */
@media(max-width:1280px){
  .v422-card-top{
    grid-template-columns:minmax(200px,1.5fr) repeat(3,minmax(110px,.8fr));
  }
  .v422-card-metrics{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .v422-metric{
    border-bottom:1px solid var(--border);
  }
  .v422-metric:nth-child(4n){border-right:0}
  .v422-metric:nth-last-child(-n+4){border-bottom:0}
}

/* Tablet: ho so 2 cot, metric 2 cot */
@media(max-width:900px){
  .v422-card-top{
    grid-template-columns:1fr 1fr;
  }
  .v422-card-top>div{
    padding:10px 12px;
  }
  .v422-employee-main{
    grid-column:1/-1;
    border-bottom:1px solid var(--border);
  }
  .v422-card-top>div+div{
    border-left:0;
  }
  .v422-profile-item{
    border-top:1px solid var(--border);
  }
  .v422-profile-item:nth-of-type(3){
    border-left:1px solid var(--border)!important;
  }
  .v422-profile-item:last-child{
    grid-column:1/-1;
  }
  .v422-card-metrics{
    grid-template-columns:1fr 1fr;
  }
  .v422-metric{
    min-height:70px;
    border-bottom:1px solid var(--border);
  }
  .v422-metric:nth-child(2n){border-right:0}
  .v422-metric:nth-last-child(-n+2){border-bottom:0}
}

/* Mobile: card doc, 2 cot chi so; phan quan trong full width */
@media(max-width:640px){
  .v422-payroll-list{gap:12px}
  .v422-employee-card{
    border-radius:10px!important;
  }
  .v422-card-top{
    grid-template-columns:1fr 1fr;
  }
  .v422-employee-main{
    padding:12px!important;
  }
  .v422-employee-main strong{
    font-size:14px!important;
  }
  .v422-employee-main small{
    font-size:10.5px!important;
  }
  .v422-profile-item{
    padding:9px 10px!important;
  }
  .v422-profile-item span{font-size:9.5px}
  .v422-profile-item strong{
    font-size:11px;
    white-space:normal;
    word-break:break-word;
  }
  .v422-card-metrics{
    grid-template-columns:1fr 1fr;
  }
  .v422-metric{
    padding:10px!important;
    min-height:66px;
  }
  .v422-sales,
  .v421-kpi-bonus,
  .v421-net-cell{
    grid-column:1/-1;
    border-right:0!important;
  }
  .v422-metric>strong,
  .v422-metric summary>strong{
    font-size:12.5px;
  }
  .v422-sales>strong,
  .v421-kpi-bonus>strong,
  .v421-net-cell>strong{
    font-size:14px!important;
  }
  .v419-allowance-cell{
    grid-column:1/-1;
  }
  .v419-allowance-detail{
    position:static!important;
    width:100%!important;
    min-width:0!important;
    margin-top:8px;
    border:1px solid var(--border)!important;
    border-radius:8px!important;
    box-shadow:none!important;
  }
  .v422-card-actions{
    padding:8px 10px;
  }
  .v422-card-actions .v413-delete{
    width:100%;
    min-height:38px;
  }
}
@media(max-width:390px){
  .v422-card-top,
  .v422-card-metrics{
    grid-template-columns:1fr;
  }
  .v422-profile-item,
  .v422-profile-item:nth-of-type(3),
  .v422-metric{
    grid-column:1/-1!important;
    border-left:0!important;
    border-right:0!important;
    border-bottom:1px solid var(--border)!important;
  }
  .v422-profile-item:last-child,
  .v422-metric:last-child{
    border-bottom:0!important;
  }
}