.project-analytics{
  margin:18px 0;
  padding:18px;
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:#fff;
}

.project-analytics-head,
.project-attention-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.project-analytics-head h3,
.project-attention-head h4{
  margin:0;
}

.project-analytics-head p,
.project-attention-head p{
  margin:4px 0 0;
  color:#64748b;
  font-size:12px;
}

.project-analytics-grid{
  display:grid;
  grid-template-columns:
    repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}

.pa-card{
  padding:13px;
  border:1px solid #e2e8f0;
  border-radius:11px;
  background:#f8fafc;
}

.pa-card span{
  display:block;
  color:#64748b;
  font-size:11px;
}

.pa-card strong{
  display:block;
  margin-top:6px;
  font-size:18px;
}

.pa-card small{
  display:block;
  margin-top:3px;
  color:#64748b;
}

.pa-warning{
  border-color:#f59e0b;
}

.pa-critical{
  border-color:#ef4444;
}

.pa-positive{
  border-color:#22c55e;
}

.project-attention-section{
  margin-top:20px;
}

.project-attention-list{
  display:grid;
  gap:8px;
  margin-top:12px;
}

.project-attention-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  width:100%;
  padding:11px 12px;
  border:1px solid #e2e8f0;
  border-radius:10px;
  background:#fff;
  color:inherit;
  text-align:left;
}

.project-attention-row:hover{
  background:#f8fafc;
}

.project-attention-row strong{
  display:block;
}

.project-attention-row small{
  display:block;
  margin-top:3px;
  color:#64748b;
}

.project-attention-meta{
  display:flex;
  align-items:flex-end;
  flex-direction:column;
  gap:3px;
}

.pa-health{
  display:inline-flex;
  padding:3px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:700;
}

.pa-health-critical{
  background:#fee2e2;
  color:#991b1b;
}

.pa-health-attention{
  background:#fef3c7;
  color:#92400e;
}

.pa-health-healthy{
  background:#dcfce7;
  color:#166534;
}

.pa-all-good{
  margin-top:12px;
  padding:14px;
  border-radius:10px;
  background:#f0fdf4;
}

@media(max-width:1000px){
  .project-analytics-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}

@media(max-width:650px){

  .project-analytics-grid{
    grid-template-columns:1fr;
  }

  .project-attention-row{
    align-items:flex-start;
    flex-direction:column;
  }

  .project-attention-meta{
    align-items:flex-start;
  }
}