            <div className=\"bg-white rounded-xl shadow-lg p-6 border-2 border-gray-100 hover:border-purple-400 hover:shadow-xl transition-all\">
              <div className=\"flex items-start justify-between mb-6\">
                <div className=\"flex-1\">
                  <div className=\"flex items-center gap-3 mb-2\">
                    <h3 className=\"text-2xl font-bold text-gray-900\">{user.name}</h3>
                    <span className=\"px-3 py-1 text-xs font-bold rounded-full bg-gradient-to-r from-blue-500 to-indigo-500 text-white\">
                      {user.role.toUpperCase()}
                    </span>
                    <span className={`px-3 py-1 text-xs font-bold rounded-full border-2 ${getRiskColor(user.risk_level)}`}>
                      {user.risk_level} Risk
                    </span>
                  </div>
                  <p className=\"text-sm text-gray-600\">{user.email}</p>
                </div>
                <div className=\"text-right bg-gradient-to-br from-purple-50 to-indigo-50 rounded-xl p-4 border-2 border-purple-200\">
                  <p className=\"text-xs text-purple-600 font-semibold mb-1\">Governance Score</p>
                  <p className={`text-5xl font-black ${getScoreColor(user.governance_score)}`}>
                    {user.governance_score}%
                  </p>
                </div>
              </div>

              <div className=\"mb-6\">
                <div className=\"w-full bg-gray-200 rounded-full h-4 shadow-inner\">
                  <div
                    className={`h-4 rounded-full transition-all shadow-md ${
                      user.governance_score >= 80 ? 'bg-gradient-to-r from-green-400 to-green-600' :
                      user.governance_score >= 50 ? 'bg-gradient-to-r from-yellow-400 to-yellow-600' : 
                      'bg-gradient-to-r from-red-400 to-red-600'
                    }`}
                    style={{ width: `${user.governance_score}%` }}
                  />
                </div>
              </div>

              <div className=\"grid grid-cols-1 md:grid-cols-2 gap-3 mb-6\">
                {user.completion_details.map((detail, idx) => (
                  <div
                    key={idx}
                    className={`flex items-center gap-3 p-4 rounded-xl border-2 transition-all hover:scale-105 ${
                      detail.completed ? 'bg-gradient-to-r from-green-50 to-emerald-50 border-green-300' : 'bg-gradient-to-r from-red-50 to-rose-50 border-red-300'
                    }`}
                  >
                    {detail.completed ? (
                      <CheckCircle className=\"w-6 h-6 text-green-600 flex-shrink-0\" />
                    ) : (
                      <XCircle className=\"w-6 h-6 text-red-600 flex-shrink-0\" />
                    )}
                    <div className=\"flex-1\">
                      <p className={`text-sm font-bold ${
                        detail.completed ? 'text-green-900' : 'text-red-900'
                      }`}>
                        {detail.criteria}
                      </p>
                    </div>
                    <span className={`text-sm font-black px-3 py-1 rounded-full ${
                      detail.completed ? 'bg-green-200 text-green-800' : 'bg-red-200 text-red-800'
                    }`}>
                      {detail.weight}%
                    </span>
                  </div>
                ))}
              </div>

              {user.missing_fields.length > 0 && (
                <div className=\"bg-gradient-to-r from-amber-50 to-orange-50 border-2 border-amber-300 rounded-xl p-5\">
                  <p className=\"text-sm font-bold text-amber-900 mb-3 flex items-center gap-2\">
                    <AlertTriangle className=\"w-5 h-5\" />
                    Missing Fields:
                  </p>
                  <div className=\"flex flex-wrap gap-2\">
                    {user.missing_fields.map((field, idx) => (
                      <span key={idx} className=\"px-4 py-2 bg-amber-200 text-amber-900 text-xs font-bold rounded-full border border-amber-400\">
                        {field}
                      </span>
                    ))}
                  </div>
                </div>
              )}
            </div>
