refactor: entity selector full overhaul — Mar 2026

- Unified _setBadgeCount for ALL badge updates
- target-conditions-trait → entity-selector-trait
- target-* → es-* class rename (20+ classes)
- SCSS recompiled: zero duplicate selectors
- CSS transitions replace jQuery slideDown/slideUp
- Serialize cache, method swap cache
- Badge: no-matches gray, consistent hover, no blending
- Inline condition count always visible
- Preview popover refreshes in-place on sort change
- Categories add chips immediately
- Entity type icons on chips
- Consistent info_outline icons via buildHelpIcon
- Method dropdown text clipping fix (line-height)
- mpr-input-compact on all inputs
- Dropdown padding fixed in SCSS source
- Chips wrapper: same container always
- Reusable helpers: _buildEmptyState, _buildSearchBoxHtml, _buildInfoTooltip
- Asset path: uses $this->module->getPathUri() not reflection
- Debug logs removed

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

sources/scss/layouts/_form-integration.scss

@@ -6,14 +6,12 @@
 @use '../variables' as *;
 
 // Base border reset for all entity-selector elements
-.target-conditions-trait,
-.target-conditions-trait *,
 .entity-selector-trait,
 .entity-selector-trait *,
 .method-dropdown-menu,
 .method-dropdown-menu *,
-.target-preview-popover,
-.target-preview-popover * {
+.es-preview-popover,
+.es-preview-popover * {
     border-style: solid;
     border-width: 0;
     border-color: $es-border-color;
@@ -22,7 +20,7 @@
 // Full-width form group override using :has()
 // Excludes .layout-form-group which uses standard PrestaShop form layout
 .form-group:has(.entity-selector-trait:not(.layout-form-group)),
-.form-group:has(.target-conditions-trait:not(.layout-form-group)),
+.form-group:has(.entity-selector-trait:not(.layout-form-group)),
 .form-group:has(.condition-trait:not(.layout-form-group)) {
     display: block;
 
@@ -65,26 +63,26 @@
 
 // Dropdown overflow fix
 // When dropdown is open, parent containers must allow overflow
-.panel:has(.target-search-dropdown.show),
-.card:has(.target-search-dropdown.show),
-.form-wrapper:has(.target-search-dropdown.show),
-.panel-body:has(.target-search-dropdown.show),
-.card-body:has(.target-search-dropdown.show),
-.form-group:has(.target-search-dropdown.show),
-.col-lg-8:has(.target-search-dropdown.show),
-.col-lg-12:has(.target-search-dropdown.show) {
+.panel:has(.es-search-dropdown.show),
+.card:has(.es-search-dropdown.show),
+.form-wrapper:has(.es-search-dropdown.show),
+.panel-body:has(.es-search-dropdown.show),
+.card-body:has(.es-search-dropdown.show),
+.form-group:has(.es-search-dropdown.show),
+.col-lg-8:has(.es-search-dropdown.show),
+.col-lg-12:has(.es-search-dropdown.show) {
     overflow: visible !important;
 }
 
 // Target conditions wrapper hierarchy overflow fix
-.target-conditions-trait:has(.target-search-dropdown.show),
-.entity-selector-trait:has(.target-search-dropdown.show),
-.condition-trait-body:has(.target-search-dropdown.show),
-.target-block-content:has(.target-search-dropdown.show),
-.target-block-groups:has(.target-search-dropdown.show),
-.target-group:has(.target-search-dropdown.show),
-.target-group-body:has(.target-search-dropdown.show),
-.target-search-wrapper:has(.target-search-dropdown.show) {
+.entity-selector-trait:has(.es-search-dropdown.show),
+.entity-selector-trait:has(.es-search-dropdown.show),
+.condition-trait-body:has(.es-search-dropdown.show),
+.es-block-content:has(.es-search-dropdown.show),
+.es-block-groups:has(.es-search-dropdown.show),
+.es-group:has(.es-search-dropdown.show),
+.es-group-body:has(.es-search-dropdown.show),
+.es-search-wrapper:has(.es-search-dropdown.show) {
     overflow: visible !important;
 }
 
@@ -94,7 +92,7 @@
 // Use .layout-embedded for entity selectors nested inside other components
 // Removes outer wrapper styling to avoid redundant borders/backgrounds
 
-.target-conditions-trait.layout-embedded,
+.entity-selector-trait.layout-embedded,
 .entity-selector-trait.layout-embedded {
     background: transparent;
     border: none;

sources/scss/layouts/_responsive.scss

@@ -7,7 +7,6 @@
 
 // Tablet and below
 @media (max-width: 991px) {
-    .target-conditions-trait,
     .entity-selector-trait {
         .condition-trait-header {
             flex-direction: column;
@@ -20,7 +19,7 @@
             justify-content: flex-end;
         }
 
-        .target-block-tabs {
+        .es-block-tabs {
             flex-wrap: wrap;
         }
     }
@@ -28,19 +27,18 @@
 
 // Mobile
 @media (max-width: 767px) {
-    .target-conditions-trait,
     .entity-selector-trait {
-        .target-block-tab {
+        .es-block-tab {
             padding: $es-spacing-sm;
             font-size: $es-font-size-xs;
         }
 
-        .target-group-header {
+        .es-group-header {
             flex-direction: column;
             align-items: flex-start;
         }
 
-        .target-search-dropdown {
+        .es-search-dropdown {
             width: 100% !important;
             left: 0 !important;
             right: 0 !important;
@@ -54,7 +52,6 @@
 
 // High-resolution displays
 @media (min-width: 1600px) {
-    .target-conditions-trait,
     .entity-selector-trait {
         .dropdown-results-grid.view-grid-3 {
             grid-template-columns: repeat(4, 1fr);