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/main.scss

@@ -31,3 +31,44 @@
 @use 'components/tooltip';
 @use 'components/tree';
 @use 'components/validation';
+@use 'components/replace-modal';
+
+// Refactor additions (Mar 2026)
+// Loading state
+.loading-count { opacity: 0.5; transition: opacity 0.15s; }
+.tab-badge.loading { opacity: 0.5; transition: opacity 0.15s; }
+
+// Expand/collapse CSS transitions (replaces jQuery slideDown/slideUp)
+.entity-selector-blocks-content,
+.condition-trait-body,
+.group-modifiers-content {
+  transition: max-height 0.2s ease-out, opacity 0.2s ease-out;
+  overflow: hidden;
+}
+.entity-selector-blocks-content:not(.es-expanded),
+.condition-trait-body:not(.es-expanded),
+.group-modifiers-content:not(.es-expanded) {
+  max-height: 0 !important;
+  opacity: 0;
+  pointer-events: none;
+}
+.entity-selector-blocks-content.es-expanded,
+.condition-trait-body.es-expanded,
+.group-modifiers-content.es-expanded {
+  max-height: 2000px;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+// Empty state component
+.es-empty-state,
+.chips-empty-state {
+  display: block;
+  padding: 0.75rem 1rem;
+  color: #94a3b8;
+  font-size: 0.8rem;
+  font-style: italic;
+  text-align: center;
+}
+// chips-wrapper, chips-toolbar, and chips-load-more are created by JS
+// only when chips exist — not rendered in template when empty