diff --git a/assets/css/scss/_social.scss b/assets/css/scss/_social.scss
index f3a7d3165d4..9a31a3f6418 100644
--- a/assets/css/scss/_social.scss
+++ b/assets/css/scss/_social.scss
@@ -1086,3 +1086,105 @@
     border-radius: 50%;
   }
 }
+/* ===== Primary-aware "active" styles (Social) ===== */
+/* Primary-aware "active" styles — scoped to Social UI containers only */
+.social-groups,
+.social-group-show,
+.social-search,
+.friends-invitations,
+.social-group-messages,
+#social-wall-container,
+#social-group-container,
+.my-groups-card,
+.my-friends-card,
+.user-rel-user-search,
+.invite-friends {
+  /* Brand tokens (scoped to each container) */
+  --ui-primary: rgb(var(--color-primary-base)); /* main brand color */
+  --ui-on-primary: rgb(var(--color-primary-button-text, 255 255 255)); /* readable text on primary */
+
+  /* Pills / side menu / generic active patterns */
+  .menu-item.active,
+  .active {
+    background-color: var(--ui-primary) !important;
+    color: var(--ui-on-primary) !important;
+  }
+
+  .menu-item.active i,
+  .menu-item.active .badge,
+  .nav li.active a {
+    color: var(--ui-on-primary) !important;
+  }
+
+  .badge {
+    background-color: var(--ui-primary) !important;
+    color: var(--ui-on-primary) !important;
+  }
+
+  .menu-item:focus-visible,
+  .tab:focus-visible,
+  .nav-link:focus-visible {
+    outline: 2px solid var(--ui-primary);
+    outline-offset: 2px;
+  }
+
+  .menu-item.active:hover {
+    background-color: rgb(var(--color-primary-base) / 0.92);
+  }
+
+  /* Bootstrap-like pills */
+  .nav-pills .nav-link.active {
+    background-color: var(--ui-primary) !important;
+    border-color: var(--ui-primary) !important;
+    color: var(--ui-on-primary) !important;
+  }
+
+  /* Simple tab headers */
+  .tab-active {
+    background: transparent !important;
+    border-bottom: 2px solid var(--ui-primary) !important;
+    color: var(--ui-primary) !important;
+    font-weight: 700;
+  }
+
+  .tab:hover {
+    border-bottom-color: rgb(var(--color-primary-base) / 0.65);
+  }
+
+  .tab-active:hover {
+    background-color: rgb(var(--color-primary-base) / 0.90);
+  }
+
+  .tab:disabled {
+    opacity: .6;
+    cursor: not-allowed;
+  }
+
+  /* PrimeVue tabview */
+  .p-tabview-nav .p-tabview-selected {
+    background: transparent !important;
+    border-bottom: 3px solid var(--ui-primary) !important;
+  }
+  .p-tabview-nav .p-tabview-selected a,
+  .p-tabview-nav .p-tabview-selected .tab-header {
+    color: var(--ui-primary) !important;
+    font-weight: 700;
+  }
+
+  /* Legacy .tabs list variant */
+  .tabs li.active {
+    border-top-color: var(--ui-primary) !important;
+    background-color: #f8f9fa; /* keep strip readable */
+    color: var(--ui-primary) !important;
+  }
+
+  /* Utilities (optional) */
+  .is-active-bg-primary {
+    background-color: var(--ui-primary) !important;
+    color: var(--ui-on-primary) !important;
+  }
+  .is-active-text-primary {
+    color: var(--ui-primary) !important;
+    border-color: var(--ui-primary) !important;
+  }
+}