feat: advanced filter redesign with enhanced operators and nested groups

Major UX redesign and feature enhancements for the Advanced Filter modal:

Filter Enhancements:
- Add $in/$notIn operator with tag-based multi-value input
- Add $between operator with dual-input (field-type-aware)
- Add $not negation checkbox per filter row
- Add case-insensitive operators ($eqi, $containsi, $startsWithi, etc.)
- Align operator sets with native Strapi Content Manager filters

UI/UX Improvements:
- Redesign modal layout: card-style rows, improved spacing
- Increase modal size (720px width, 90vh height) for better usability
- Add "Enter value" labels with context-aware text
- Fix DatePicker z-index overlap issue
- Fix CustomSelect dark mode (text colors, backgrounds)
- Standardize input heights to 32px for visual consistency
- Split filter row into two lines: field+operator on top, value below
- Add value type badges and better visual hierarchy

Nested Groups (Premium Feature):
- Add FilterGroup interface for hierarchical filter structure
- Implement color-coded group containers (blue=AND, orange=OR)
- Add group management: add/remove groups, toggle AND/OR logic
- Support unlimited nesting depth
- Auto-populate relations from nested structures
- Enable via license check (Premium/Advanced tiers only)

Technical:
- Extend FilterRow with valueTo and negate fields
- Add generateFromGroup() for nested query generation
- Update buildFilterFromPath() to handle new operators
- Add recursive group rendering and state management
- Improve error handling for validation

Breaking Changes: None - backward compatible with flat mode

Author: Schero94

admin/src/components/AdvancedFilterButton.tsx

@@ -5,6 +5,7 @@ import { useNavigate, useLocation } from 'react-router-dom';
 import { useFetchClient } from '@strapi/strapi/admin';
 import styled from 'styled-components';
 import StrapiStyleFilterModal from './StrapiStyleFilterModal';
+import { useLicenseInfo } from '../hooks/useFeatureGate';
 
 // ================ STYLED COMPONENTS ================
 const FilterButtonGroup = styled.div`
@@ -90,6 +91,7 @@ const AdvancedFilterButton: React.FC = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const { get } = useFetchClient();
+  const { isPremium, isAdvanced } = useLicenseInfo();
   const [availableFields, setAvailableFields] = useState<Array<{ name: string; type: string }>>([]);
   const [availableRelations, setAvailableRelations] = useState<Array<{ name: string; target: string }>>([]);
   const [hasActiveFilters, setHasActiveFilters] = useState(false);
@@ -290,7 +292,7 @@ const AdvancedFilterButton: React.FC = () => {
         title="Open advanced filter builder"
       >
         <Filter />
-        Filters
+        Advanced Filter
         {hasActiveFilters && <ActiveDot />}
       </FilterButton>
 
@@ -310,6 +312,7 @@ const AdvancedFilterButton: React.FC = () => {
           availableFields={availableFields}
           availableRelations={availableRelations}
           currentQuery={getCurrentFilters()}
+          enableNestedGroups={isPremium || isAdvanced}
         />
       )}
     </FilterButtonGroup>

admin/src/components/CustomSelect.tsx

@@ -11,7 +11,8 @@ const SelectContainer = styled.div`
 
 const SelectButton = styled.button<{ $isOpen: boolean }>`
   width: 100%;
-  padding: 10px 36px 10px 12px;
+  height: 32px;
+  padding: 0 36px 0 12px;
   border: 1px solid ${props => props.$isOpen ? '#4945ff' : 'rgba(128, 128, 128, 0.25)'};
   border-radius: 4px;
   background: ${(p) => p.theme.colors.neutral0};
@@ -34,13 +35,14 @@ const SelectButton = styled.button<{ $isOpen: boolean }>`
   }
   
   @media (max-width: 768px) {
-    padding: 8px 32px 8px 10px;
+    height: 32px;
+    padding: 0 32px 0 10px;
     font-size: 13px;
   }
 `;
 
 const SelectText = styled.span<{ $isPlaceholder: boolean }>`
-  color: ${props => props.$isPlaceholder ? '#8e8ea9' : '#212134'};
+  color: ${props => props.$isPlaceholder ? props.theme.colors.neutral500 : props.theme.colors.neutral800};
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -63,7 +65,7 @@ const DropdownList = styled.div<{ $isOpen: boolean; top: number; left: number; w
   top: ${props => props.top}px;
   left: ${props => props.left}px;
   width: ${props => props.width}px;
-  max-height: 300px;
+  max-height: 400px;
   overflow-y: auto;
   background: ${(p) => p.theme.colors.neutral0};
   border: 1px solid rgba(128, 128, 128, 0.25);
@@ -73,15 +75,15 @@ const DropdownList = styled.div<{ $isOpen: boolean; top: number; left: number; w
   display: ${props => props.$isOpen ? 'block' : 'none'};
   
   @media (max-width: 768px) {
-    max-height: 250px;
+    max-height: 320px;
   }
 `;
 
 const DropdownItem = styled.button<{ $isSelected: boolean }>`
   width: 100%;
   padding: 10px 12px;
   border: none;
-  background: ${props => props.$isSelected ? '#f0f0ff' : props.theme.colors.neutral0};
+  background: ${props => props.$isSelected ? 'rgba(73, 69, 255, 0.06)' : props.theme.colors.neutral0};
   text-align: left;
   cursor: pointer;
   font-size: 14px;
@@ -109,6 +111,8 @@ const SearchInput = styled.input`
   border: none;
   border-bottom: 1px solid rgba(128, 128, 128, 0.25);
   font-size: 14px;
+  background: ${(p) => p.theme.colors.neutral0};
+  color: ${(p) => p.theme.colors.neutral800};
   
   &:focus {
     outline: none;