UN-2718 [FIX] Fix Profile page CSS specificity conflict with FieldComparisonModal (#1754)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: muhammad-ali-e

frontend/src/components/profile/Profile.css

@@ -149,21 +149,21 @@
 }
 
 /* Field groups */
-.field-group {
+.profile-card .field-group {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
-.field-label {
+.profile-card .field-label {
   font-size: 14px;
   color: #6a7282;
   font-weight: 500;
   line-height: 14px;
 }
 
 /* Field boxes with subtle shadow like Figma */
-.field-box {
+.profile-card .field-box {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -175,33 +175,42 @@
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
 }
 
-.field-value {
+.profile-card .field-value {
+  /* Our desired styles */
   font-size: 14px;
   color: #101828;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  /* Reset conflicting properties from FieldComparisonModal.css */
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+  font-family: inherit;
+  min-height: auto;
+  word-break: normal;
 }
 
-.field-value.org-id {
+.profile-card .field-value.org-id {
   font-family: monospace;
   font-size: 13px;
 }
 
-.field-icon {
+.profile-card .field-icon {
   color: #9ca3af;
   font-size: 14px;
   flex-shrink: 0;
 }
 
 /* Field with action button (copy) */
-.field-with-action {
+.profile-card .field-with-action {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
-.field-with-action .field-box {
+.profile-card .field-with-action .field-box {
   flex: 1;
 }