@memberjunction/ng-dashboards 5.11.0 → 5.12.0

package/dist/Lists/components/lists-operations-resource.component.js

@@ -1209,7 +1209,7 @@ let ListsOperationsResource = class ListsOperationsResource extends BaseResource
             i0.ɵɵconditional(ctx.showAddToListDialog ? 46 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.showAddToListDialog ? 47 : -1);
-        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.LoadingComponent, i5.VennDiagramComponent], styles: ["\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    .operations-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #f5f7fa;\n    }\n\n    .operations-header {\n      padding: 20px 24px;\n      background: white;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .header-top {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 4px;\n    }\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .clear-all-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: #f5f5f5;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 13px;\n      color: #666;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .clear-all-btn:hover {\n      background: #ffebee;\n      border-color: #f44336;\n      color: #d32f2f;\n    }\n\n    .clear-all-btn i {\n      font-size: 12px;\n    }\n\n    .header-title i {\n      font-size: 24px;\n      color: #9C27B0;\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .header-subtitle {\n      color: #666;\n      font-size: 14px;\n    }\n\n    .operations-content {\n      display: grid;\n      grid-template-columns: 280px 1fr 300px;\n      gap: 16px;\n      flex: 1;\n      padding: 16px;\n      overflow: hidden;\n    }\n\n    /* Panels */\n    .selection-panel,\n    .results-panel {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .venn-panel {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n      position: relative;\n      min-height: 400px;\n    }\n\n    .panel-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px;\n      border-bottom: 1px solid #f0f0f0;\n    }\n\n    .panel-header h3 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .list-count {\n      font-size: 12px;\n      color: #999;\n      background: #f0f0f0;\n      padding: 2px 8px;\n      border-radius: 10px;\n    }\n\n    /* Entity Filter */\n    .entity-filter-section {\n      padding: 12px 16px;\n      border-bottom: 1px solid #f0f0f0;\n    }\n\n    .filter-label {\n      display: block;\n      font-size: 11px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 6px;\n    }\n\n    .entity-select {\n      width: 100%;\n      padding: 8px 12px;\n      font-size: 13px;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      background: white;\n      cursor: pointer;\n      outline: none;\n      transition: border-color 0.2s;\n    }\n\n    .entity-select:focus {\n      border-color: #9C27B0;\n    }\n\n    .entity-note {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin: 8px 12px;\n      padding: 8px 10px;\n      background: #e8f5e9;\n      border-radius: 6px;\n      font-size: 12px;\n      color: #2e7d32;\n    }\n\n    .entity-note i {\n      color: #4caf50;\n    }\n\n    /* Selected Lists */\n    .selected-lists {\n      flex: 1;\n      overflow-y: auto;\n      padding: 12px;\n    }\n\n    .selected-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px;\n      background: #f8f9fa;\n      border-radius: 6px;\n      margin-bottom: 8px;\n    }\n\n    .item-color {\n      width: 12px;\n      height: 12px;\n      border-radius: 3px;\n      flex-shrink: 0;\n    }\n\n    .item-info {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .item-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .item-entity {\n      font-size: 11px;\n      color: #999;\n    }\n\n    .remove-btn {\n      background: none;\n      border: none;\n      color: #999;\n      cursor: pointer;\n      padding: 4px;\n      border-radius: 4px;\n    }\n\n    .remove-btn:hover {\n      background: #e0e0e0;\n      color: #666;\n    }\n\n    /* Add list area */\n    .add-list-area {\n      position: relative;\n    }\n\n    .add-list-search {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      border: 1px dashed #ddd;\n      border-radius: 6px;\n      transition: border-color 0.2s;\n    }\n\n    .add-list-search:focus-within {\n      border-color: #9C27B0;\n    }\n\n    .add-list-search i {\n      color: #999;\n    }\n\n    .add-list-search input {\n      flex: 1;\n      border: none;\n      outline: none;\n      font-size: 13px;\n    }\n\n    .list-dropdown {\n      position: absolute;\n      top: 100%;\n      left: 0;\n      right: 0;\n      z-index: 100;\n      margin-top: 4px;\n    }\n\n    .dropdown-backdrop {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n    }\n\n    .dropdown-content {\n      position: relative;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n      max-height: 200px;\n      overflow-y: auto;\n    }\n\n    .dropdown-item {\n      display: flex;\n      flex-direction: column;\n      padding: 10px 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n    }\n\n    .dropdown-item:hover {\n      background: #f5f5f5;\n    }\n\n    .dropdown-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n    }\n\n    .dropdown-entity {\n      font-size: 11px;\n      color: #999;\n    }\n\n    .lists-full {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px;\n      font-size: 12px;\n      color: #999;\n      background: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .entity-warning {\n      display: flex;\n      align-items: flex-start;\n      gap: 8px;\n      margin: 12px;\n      padding: 10px;\n      background: #fff8e1;\n      border-radius: 6px;\n      font-size: 12px;\n      color: #856404;\n    }\n\n    .entity-warning i {\n      color: #ffc107;\n      margin-top: 2px;\n    }\n\n    /* Quick Operations */\n    .quick-operations {\n      padding: 12px;\n      border-top: 1px solid #f0f0f0;\n    }\n\n    .quick-operations h4 {\n      margin: 0 0 10px;\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .operation-buttons {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .op-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      background: #f8f9fa;\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      font-size: 13px;\n      color: #333;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .op-btn:hover:not(:disabled) {\n      background: #e8f4fd;\n      border-color: #9C27B0;\n      color: #9C27B0;\n    }\n\n    .op-btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    /* Venn Panel */\n    .venn-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      text-align: center;\n      padding: 40px;\n    }\n\n    .empty-icon {\n      width: 80px;\n      height: 80px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: linear-gradient(135deg, rgba(156, 39, 176, 0.1) 0%, rgba(156, 39, 176, 0.05) 100%);\n      border-radius: 50%;\n      margin-bottom: 20px;\n    }\n\n    .empty-icon i {\n      font-size: 36px;\n      color: #9C27B0;\n    }\n\n    .venn-empty h3 {\n      margin: 0 0 8px;\n      font-size: 18px;\n      color: #333;\n    }\n\n    .venn-empty p {\n      margin: 0;\n      color: #666;\n      font-size: 14px;\n      max-width: 300px;\n    }\n\n    .loading-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: rgba(255,255,255,0.9);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    /* Results Panel */\n    .region-details,\n    .operation-result {\n      padding: 16px;\n    }\n\n    .region-header,\n    .result-header {\n      margin-bottom: 16px;\n    }\n\n    .region-label,\n    .result-operation {\n      display: block;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n      margin-bottom: 4px;\n    }\n\n    .region-count,\n    .result-count {\n      font-size: 13px;\n      color: #9C27B0;\n      font-weight: 500;\n    }\n\n    .region-actions {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      margin-bottom: 16px;\n    }\n\n    .action-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 14px;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 13px;\n      color: #333;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .action-btn:hover {\n      background: #f5f5f5;\n    }\n\n    .action-btn.primary {\n      background: #9C27B0;\n      border-color: #9C27B0;\n      color: white;\n    }\n\n    .action-btn.primary:hover {\n      background: #7B1FA2;\n    }\n\n    .record-preview h5 {\n      margin: 0 0 8px;\n      font-size: 12px;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .preview-list {\n      max-height: 200px;\n      overflow-y: auto;\n    }\n\n    .preview-card {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 10px 12px;\n      background: #f8f9fa;\n      border-radius: 6px;\n      margin-bottom: 6px;\n      transition: all 0.15s ease;\n    }\n\n    .preview-card:hover {\n      background: #eef1f5;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n    }\n\n    .preview-card-content {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .preview-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .preview-secondary {\n      font-size: 11px;\n      color: #888;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .preview-open-btn {\n      background: none;\n      border: none;\n      color: #9C27B0;\n      cursor: pointer;\n      padding: 6px 8px;\n      border-radius: 4px;\n      opacity: 0.6;\n      transition: all 0.15s ease;\n      flex-shrink: 0;\n    }\n\n    .preview-open-btn:hover {\n      opacity: 1;\n      background: rgba(156, 39, 176, 0.1);\n    }\n\n    .preview-loading {\n      padding: 12px;\n      text-align: center;\n    }\n\n    .results-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 200px;\n      text-align: center;\n      color: #999;\n    }\n\n    .results-empty i {\n      font-size: 32px;\n      margin-bottom: 12px;\n      opacity: 0.5;\n    }\n\n    .results-empty p {\n      font-size: 13px;\n      margin: 0;\n      max-width: 200px;\n    }\n\n    /* Modal */\n    .modal-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: rgba(0,0,0,0.5);\n      z-index: 1000;\n    }\n\n    .modal-dialog {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      background: white;\n      border-radius: 12px;\n      width: 420px;\n      max-width: 90vw;\n      z-index: 1001;\n    }\n\n    .modal-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px 20px;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .modal-header h3 {\n      margin: 0;\n      font-size: 16px;\n      color: #333;\n    }\n\n    .modal-close {\n      background: none;\n      border: none;\n      color: #999;\n      cursor: pointer;\n      padding: 4px 8px;\n    }\n\n    .modal-body {\n      padding: 20px;\n    }\n\n    .form-group {\n      margin-bottom: 16px;\n    }\n\n    .form-group label {\n      display: block;\n      margin-bottom: 6px;\n      font-size: 13px;\n      font-weight: 500;\n      color: #666;\n    }\n\n    .form-input {\n      width: 100%;\n      padding: 10px 12px;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      box-sizing: border-box;\n    }\n\n    .form-input:focus {\n      outline: none;\n      border-color: #9C27B0;\n      box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.1);\n    }\n\n    textarea.form-input {\n      resize: vertical;\n    }\n\n    .form-info {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px;\n      background: #f8f9fa;\n      border-radius: 6px;\n      font-size: 13px;\n      color: #666;\n    }\n\n    .form-info i {\n      color: #9C27B0;\n    }\n\n    .modal-footer {\n      display: flex;\n      gap: 12px;\n      padding: 16px 20px;\n      border-top: 1px solid #e0e0e0;\n      background: #fafafa;\n    }\n\n    .btn-primary {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 20px;\n      background: #9C27B0;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      cursor: pointer;\n    }\n\n    .btn-primary:hover:not(:disabled) {\n      background: #7B1FA2;\n    }\n\n    .btn-primary:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    .btn-secondary {\n      padding: 10px 20px;\n      background: white;\n      color: #666;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      cursor: pointer;\n    }\n\n    .btn-secondary:hover {\n      background: #f5f5f5;\n    }\n\n    /* Add to List Dialog */\n    .add-to-list-dialog {\n      width: 480px;\n    }\n\n    .add-to-list-dialog .modal-body {\n      max-height: 400px;\n      overflow-y: auto;\n    }\n\n    .list-search {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px 12px;\n      background: #f8f9fa;\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      margin-bottom: 12px;\n    }\n\n    .list-search i {\n      color: #999;\n      flex-shrink: 0;\n    }\n\n    .list-search .form-input {\n      flex: 1;\n      border: none;\n      background: transparent;\n      padding: 0;\n      font-size: 14px;\n    }\n\n    .list-search .form-input:focus {\n      box-shadow: none;\n      outline: none;\n    }\n\n    .list-options {\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      max-height: 250px;\n      overflow-y: auto;\n    }\n\n    .list-option {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n      border-bottom: 1px solid #f0f0f0;\n    }\n\n    .list-option:last-child {\n      border-bottom: none;\n    }\n\n    .list-option:hover {\n      background: #f8f9fa;\n    }\n\n    .list-option.selected {\n      background: #f3e5f5;\n    }\n\n    .list-option-radio {\n      flex-shrink: 0;\n    }\n\n    .list-option-radio input[type=\"radio\"] {\n      width: 18px;\n      height: 18px;\n      cursor: pointer;\n      accent-color: #9C27B0;\n    }\n\n    .list-option-info {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .list-option-name {\n      font-size: 14px;\n      font-weight: 500;\n      color: #333;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .list-option-entity {\n      font-size: 12px;\n      color: #888;\n    }\n\n    .list-options-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 30px 20px;\n      text-align: center;\n      color: #999;\n    }\n\n    .list-options-empty i {\n      font-size: 28px;\n      margin-bottom: 10px;\n      opacity: 0.5;\n    }\n\n    .list-options-empty p {\n      margin: 0;\n      font-size: 13px;\n    }\n\n    /* Responsive */\n    @media (max-width: 1024px) {\n      .operations-content {\n        grid-template-columns: 1fr;\n        grid-template-rows: auto 1fr auto;\n      }\n\n      .selection-panel {\n        order: 1;\n      }\n\n      .venn-panel {\n        order: 2;\n        min-height: 300px;\n      }\n\n      .results-panel {\n        order: 3;\n      }\n    }\n  "], encapsulation: 2 });
+        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.LoadingComponent, i5.VennDiagramComponent], styles: ["\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    .operations-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: var(--mj-bg-surface);\n    }\n\n    .operations-header {\n      padding: 20px 24px;\n      background: var(--mj-bg-surface-card);\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .header-top {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 4px;\n    }\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .clear-all-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .clear-all-btn:hover {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      border-color: var(--mj-status-error);\n      color: var(--mj-status-error);\n    }\n\n    .clear-all-btn i {\n      font-size: 12px;\n    }\n\n    .header-title i {\n      font-size: 24px;\n      color: var(--mj-brand-primary);\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .header-subtitle {\n      color: var(--mj-text-secondary);\n      font-size: 14px;\n    }\n\n    .operations-content {\n      display: grid;\n      grid-template-columns: 280px 1fr 300px;\n      gap: 16px;\n      flex: 1;\n      padding: 16px;\n      overflow: hidden;\n    }\n\n    /* Panels */\n    .selection-panel,\n    .results-panel {\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-sm);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .venn-panel {\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-sm);\n      position: relative;\n      min-height: 400px;\n    }\n\n    .panel-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .panel-header h3 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .list-count {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      background: var(--mj-bg-surface-sunken);\n      padding: 2px 8px;\n      border-radius: 10px;\n    }\n\n    /* Entity Filter */\n    .entity-filter-section {\n      padding: 12px 16px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .filter-label {\n      display: block;\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--mj-text-secondary);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 6px;\n    }\n\n    .entity-select {\n      width: 100%;\n      padding: 8px 12px;\n      font-size: 13px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      background: var(--mj-bg-surface-card);\n      cursor: pointer;\n      outline: none;\n      transition: border-color 0.2s;\n    }\n\n    .entity-select:focus {\n      border-color: var(--mj-brand-primary);\n    }\n\n    .entity-note {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin: 8px 12px;\n      padding: 8px 10px;\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      border-radius: 6px;\n      font-size: 12px;\n      color: var(--mj-status-success);\n    }\n\n    .entity-note i {\n      color: var(--mj-status-success);\n    }\n\n    /* Selected Lists */\n    .selected-lists {\n      flex: 1;\n      overflow-y: auto;\n      padding: 12px;\n    }\n\n    .selected-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px;\n      background: var(--mj-bg-surface-sunken);\n      border-radius: 6px;\n      margin-bottom: 8px;\n    }\n\n    .item-color {\n      width: 12px;\n      height: 12px;\n      border-radius: 3px;\n      flex-shrink: 0;\n    }\n\n    .item-info {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .item-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .item-entity {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    .remove-btn {\n      background: none;\n      border: none;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      padding: 4px;\n      border-radius: 4px;\n    }\n\n    .remove-btn:hover {\n      background: var(--mj-border-default);\n      color: var(--mj-text-secondary);\n    }\n\n    /* Add list area */\n    .add-list-area {\n      position: relative;\n    }\n\n    .add-list-search {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      border: 1px dashed var(--mj-border-default);\n      border-radius: 6px;\n      transition: border-color 0.2s;\n    }\n\n    .add-list-search:focus-within {\n      border-color: var(--mj-brand-primary);\n    }\n\n    .add-list-search i {\n      color: var(--mj-text-muted);\n    }\n\n    .add-list-search input {\n      flex: 1;\n      border: none;\n      outline: none;\n      font-size: 13px;\n    }\n\n    .list-dropdown {\n      position: absolute;\n      top: 100%;\n      left: 0;\n      right: 0;\n      z-index: 100;\n      margin-top: 4px;\n    }\n\n    .dropdown-backdrop {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n    }\n\n    .dropdown-content {\n      position: relative;\n      background: var(--mj-bg-surface-card);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      box-shadow: var(--mj-shadow-md);\n      max-height: 200px;\n      overflow-y: auto;\n    }\n\n    .dropdown-item {\n      display: flex;\n      flex-direction: column;\n      padding: 10px 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n    }\n\n    .dropdown-item:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .dropdown-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .dropdown-entity {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    .lists-full {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px;\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      background: var(--mj-bg-surface-sunken);\n      border-radius: 6px;\n    }\n\n    .entity-warning {\n      display: flex;\n      align-items: flex-start;\n      gap: 8px;\n      margin: 12px;\n      padding: 10px;\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      border-radius: 6px;\n      font-size: 12px;\n      color: var(--mj-status-warning);\n    }\n\n    .entity-warning i {\n      color: var(--mj-status-warning);\n      margin-top: 2px;\n    }\n\n    /* Quick Operations */\n    .quick-operations {\n      padding: 12px;\n      border-top: 1px solid var(--mj-border-default);\n    }\n\n    .quick-operations h4 {\n      margin: 0 0 10px;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-secondary);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .operation-buttons {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .op-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      font-size: 13px;\n      color: var(--mj-text-primary);\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .op-btn:hover:not(:disabled) {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-brand-primary);\n    }\n\n    .op-btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    /* Venn Panel */\n    .venn-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      text-align: center;\n      padding: 40px;\n    }\n\n    .empty-icon {\n      width: 80px;\n      height: 80px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      border-radius: 50%;\n      margin-bottom: 20px;\n    }\n\n    .empty-icon i {\n      font-size: 36px;\n      color: var(--mj-brand-primary);\n    }\n\n    .venn-empty h3 {\n      margin: 0 0 8px;\n      font-size: 18px;\n      color: var(--mj-text-primary);\n    }\n\n    .venn-empty p {\n      margin: 0;\n      color: var(--mj-text-secondary);\n      font-size: 14px;\n      max-width: 300px;\n    }\n\n    .loading-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: color-mix(in srgb, var(--mj-bg-surface-card) 90%, transparent);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    /* Results Panel */\n    .region-details,\n    .operation-result {\n      padding: 16px;\n    }\n\n    .region-header,\n    .result-header {\n      margin-bottom: 16px;\n    }\n\n    .region-label,\n    .result-operation {\n      display: block;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      margin-bottom: 4px;\n    }\n\n    .region-count,\n    .result-count {\n      font-size: 13px;\n      color: var(--mj-brand-primary);\n      font-weight: 500;\n    }\n\n    .region-actions {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      margin-bottom: 16px;\n    }\n\n    .action-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 14px;\n      background: var(--mj-bg-surface-card);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      font-size: 13px;\n      color: var(--mj-text-primary);\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .action-btn:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .action-btn.primary {\n      background: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .action-btn.primary:hover {\n      background: var(--mj-brand-primary-hover);\n    }\n\n    .record-preview h5 {\n      margin: 0 0 8px;\n      font-size: 12px;\n      color: var(--mj-text-secondary);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .preview-list {\n      max-height: 200px;\n      overflow-y: auto;\n    }\n\n    .preview-card {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 10px 12px;\n      background: var(--mj-bg-surface-sunken);\n      border-radius: 6px;\n      margin-bottom: 6px;\n      transition: all 0.15s ease;\n    }\n\n    .preview-card:hover {\n      background: var(--mj-bg-surface-sunken);\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .preview-card-content {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .preview-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .preview-secondary {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .preview-open-btn {\n      background: none;\n      border: none;\n      color: var(--mj-brand-primary);\n      cursor: pointer;\n      padding: 6px 8px;\n      border-radius: 4px;\n      opacity: 0.6;\n      transition: all 0.15s ease;\n      flex-shrink: 0;\n    }\n\n    .preview-open-btn:hover {\n      opacity: 1;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    }\n\n    .preview-loading {\n      padding: 12px;\n      text-align: center;\n    }\n\n    .results-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 200px;\n      text-align: center;\n      color: var(--mj-text-muted);\n    }\n\n    .results-empty i {\n      font-size: 32px;\n      margin-bottom: 12px;\n      opacity: 0.5;\n    }\n\n    .results-empty p {\n      font-size: 13px;\n      margin: 0;\n      max-width: 200px;\n    }\n\n    /* Modal */\n    .modal-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: var(--mj-bg-overlay);\n      z-index: 1000;\n    }\n\n    .modal-dialog {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      background: var(--mj-bg-surface-card);\n      border-radius: 12px;\n      width: 420px;\n      max-width: 90vw;\n      z-index: 1001;\n    }\n\n    .modal-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px 20px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .modal-header h3 {\n      margin: 0;\n      font-size: 16px;\n      color: var(--mj-text-primary);\n    }\n\n    .modal-close {\n      background: none;\n      border: none;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      padding: 4px 8px;\n    }\n\n    .modal-body {\n      padding: 20px;\n    }\n\n    .form-group {\n      margin-bottom: 16px;\n    }\n\n    .form-group label {\n      display: block;\n      margin-bottom: 6px;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-secondary);\n    }\n\n    .form-input {\n      width: 100%;\n      padding: 10px 12px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      font-size: 14px;\n      box-sizing: border-box;\n    }\n\n    .form-input:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    }\n\n    textarea.form-input {\n      resize: vertical;\n    }\n\n    .form-info {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px;\n      background: var(--mj-bg-surface-sunken);\n      border-radius: 6px;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n    }\n\n    .form-info i {\n      color: var(--mj-brand-primary);\n    }\n\n    .modal-footer {\n      display: flex;\n      gap: 12px;\n      padding: 16px 20px;\n      border-top: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .btn-primary {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 20px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      cursor: pointer;\n    }\n\n    .btn-primary:hover:not(:disabled) {\n      background: var(--mj-brand-primary-hover);\n    }\n\n    .btn-primary:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    .btn-secondary {\n      padding: 10px 20px;\n      background: var(--mj-bg-surface-card);\n      color: var(--mj-text-secondary);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      font-size: 14px;\n      cursor: pointer;\n    }\n\n    .btn-secondary:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    /* Add to List Dialog */\n    .add-to-list-dialog {\n      width: 480px;\n    }\n\n    .add-to-list-dialog .modal-body {\n      max-height: 400px;\n      overflow-y: auto;\n    }\n\n    .list-search {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px 12px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      margin-bottom: 12px;\n    }\n\n    .list-search i {\n      color: var(--mj-text-muted);\n      flex-shrink: 0;\n    }\n\n    .list-search .form-input {\n      flex: 1;\n      border: none;\n      background: transparent;\n      padding: 0;\n      font-size: 14px;\n    }\n\n    .list-search .form-input:focus {\n      box-shadow: none;\n      outline: none;\n    }\n\n    .list-options {\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      max-height: 250px;\n      overflow-y: auto;\n    }\n\n    .list-option {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .list-option:last-child {\n      border-bottom: none;\n    }\n\n    .list-option:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .list-option.selected {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    }\n\n    .list-option-radio {\n      flex-shrink: 0;\n    }\n\n    .list-option-radio input[type=\"radio\"] {\n      width: 18px;\n      height: 18px;\n      cursor: pointer;\n      accent-color: var(--mj-brand-primary);\n    }\n\n    .list-option-info {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .list-option-name {\n      font-size: 14px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .list-option-entity {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n    }\n\n    .list-options-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 30px 20px;\n      text-align: center;\n      color: var(--mj-text-muted);\n    }\n\n    .list-options-empty i {\n      font-size: 28px;\n      margin-bottom: 10px;\n      opacity: 0.5;\n    }\n\n    .list-options-empty p {\n      margin: 0;\n      font-size: 13px;\n    }\n\n    /* Responsive */\n    @media (max-width: 1024px) {\n      .operations-content {\n        grid-template-columns: 1fr;\n        grid-template-rows: auto 1fr auto;\n      }\n\n      .selection-panel {\n        order: 1;\n      }\n\n      .venn-panel {\n        order: 2;\n        min-height: 300px;\n      }\n\n      .results-panel {\n        order: 3;\n      }\n    }\n  "], encapsulation: 2 });
 };
 ListsOperationsResource = __decorate([
     RegisterClass(BaseResourceComponent, 'ListsOperationsResource')
@@ -1582,7 +1582,7 @@ export { ListsOperationsResource };
         </div>
       }
     </div>
-    `, encapsulation: ViewEncapsulation.None, styles: ["\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    .operations-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #f5f7fa;\n    }\n\n    .operations-header {\n      padding: 20px 24px;\n      background: white;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .header-top {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 4px;\n    }\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .clear-all-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: #f5f5f5;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 13px;\n      color: #666;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .clear-all-btn:hover {\n      background: #ffebee;\n      border-color: #f44336;\n      color: #d32f2f;\n    }\n\n    .clear-all-btn i {\n      font-size: 12px;\n    }\n\n    .header-title i {\n      font-size: 24px;\n      color: #9C27B0;\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .header-subtitle {\n      color: #666;\n      font-size: 14px;\n    }\n\n    .operations-content {\n      display: grid;\n      grid-template-columns: 280px 1fr 300px;\n      gap: 16px;\n      flex: 1;\n      padding: 16px;\n      overflow: hidden;\n    }\n\n    /* Panels */\n    .selection-panel,\n    .results-panel {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .venn-panel {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n      position: relative;\n      min-height: 400px;\n    }\n\n    .panel-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px;\n      border-bottom: 1px solid #f0f0f0;\n    }\n\n    .panel-header h3 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .list-count {\n      font-size: 12px;\n      color: #999;\n      background: #f0f0f0;\n      padding: 2px 8px;\n      border-radius: 10px;\n    }\n\n    /* Entity Filter */\n    .entity-filter-section {\n      padding: 12px 16px;\n      border-bottom: 1px solid #f0f0f0;\n    }\n\n    .filter-label {\n      display: block;\n      font-size: 11px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 6px;\n    }\n\n    .entity-select {\n      width: 100%;\n      padding: 8px 12px;\n      font-size: 13px;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      background: white;\n      cursor: pointer;\n      outline: none;\n      transition: border-color 0.2s;\n    }\n\n    .entity-select:focus {\n      border-color: #9C27B0;\n    }\n\n    .entity-note {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin: 8px 12px;\n      padding: 8px 10px;\n      background: #e8f5e9;\n      border-radius: 6px;\n      font-size: 12px;\n      color: #2e7d32;\n    }\n\n    .entity-note i {\n      color: #4caf50;\n    }\n\n    /* Selected Lists */\n    .selected-lists {\n      flex: 1;\n      overflow-y: auto;\n      padding: 12px;\n    }\n\n    .selected-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px;\n      background: #f8f9fa;\n      border-radius: 6px;\n      margin-bottom: 8px;\n    }\n\n    .item-color {\n      width: 12px;\n      height: 12px;\n      border-radius: 3px;\n      flex-shrink: 0;\n    }\n\n    .item-info {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .item-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .item-entity {\n      font-size: 11px;\n      color: #999;\n    }\n\n    .remove-btn {\n      background: none;\n      border: none;\n      color: #999;\n      cursor: pointer;\n      padding: 4px;\n      border-radius: 4px;\n    }\n\n    .remove-btn:hover {\n      background: #e0e0e0;\n      color: #666;\n    }\n\n    /* Add list area */\n    .add-list-area {\n      position: relative;\n    }\n\n    .add-list-search {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      border: 1px dashed #ddd;\n      border-radius: 6px;\n      transition: border-color 0.2s;\n    }\n\n    .add-list-search:focus-within {\n      border-color: #9C27B0;\n    }\n\n    .add-list-search i {\n      color: #999;\n    }\n\n    .add-list-search input {\n      flex: 1;\n      border: none;\n      outline: none;\n      font-size: 13px;\n    }\n\n    .list-dropdown {\n      position: absolute;\n      top: 100%;\n      left: 0;\n      right: 0;\n      z-index: 100;\n      margin-top: 4px;\n    }\n\n    .dropdown-backdrop {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n    }\n\n    .dropdown-content {\n      position: relative;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n      max-height: 200px;\n      overflow-y: auto;\n    }\n\n    .dropdown-item {\n      display: flex;\n      flex-direction: column;\n      padding: 10px 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n    }\n\n    .dropdown-item:hover {\n      background: #f5f5f5;\n    }\n\n    .dropdown-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n    }\n\n    .dropdown-entity {\n      font-size: 11px;\n      color: #999;\n    }\n\n    .lists-full {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px;\n      font-size: 12px;\n      color: #999;\n      background: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .entity-warning {\n      display: flex;\n      align-items: flex-start;\n      gap: 8px;\n      margin: 12px;\n      padding: 10px;\n      background: #fff8e1;\n      border-radius: 6px;\n      font-size: 12px;\n      color: #856404;\n    }\n\n    .entity-warning i {\n      color: #ffc107;\n      margin-top: 2px;\n    }\n\n    /* Quick Operations */\n    .quick-operations {\n      padding: 12px;\n      border-top: 1px solid #f0f0f0;\n    }\n\n    .quick-operations h4 {\n      margin: 0 0 10px;\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .operation-buttons {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .op-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      background: #f8f9fa;\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      font-size: 13px;\n      color: #333;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .op-btn:hover:not(:disabled) {\n      background: #e8f4fd;\n      border-color: #9C27B0;\n      color: #9C27B0;\n    }\n\n    .op-btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    /* Venn Panel */\n    .venn-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      text-align: center;\n      padding: 40px;\n    }\n\n    .empty-icon {\n      width: 80px;\n      height: 80px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: linear-gradient(135deg, rgba(156, 39, 176, 0.1) 0%, rgba(156, 39, 176, 0.05) 100%);\n      border-radius: 50%;\n      margin-bottom: 20px;\n    }\n\n    .empty-icon i {\n      font-size: 36px;\n      color: #9C27B0;\n    }\n\n    .venn-empty h3 {\n      margin: 0 0 8px;\n      font-size: 18px;\n      color: #333;\n    }\n\n    .venn-empty p {\n      margin: 0;\n      color: #666;\n      font-size: 14px;\n      max-width: 300px;\n    }\n\n    .loading-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: rgba(255,255,255,0.9);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    /* Results Panel */\n    .region-details,\n    .operation-result {\n      padding: 16px;\n    }\n\n    .region-header,\n    .result-header {\n      margin-bottom: 16px;\n    }\n\n    .region-label,\n    .result-operation {\n      display: block;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n      margin-bottom: 4px;\n    }\n\n    .region-count,\n    .result-count {\n      font-size: 13px;\n      color: #9C27B0;\n      font-weight: 500;\n    }\n\n    .region-actions {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      margin-bottom: 16px;\n    }\n\n    .action-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 14px;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 13px;\n      color: #333;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .action-btn:hover {\n      background: #f5f5f5;\n    }\n\n    .action-btn.primary {\n      background: #9C27B0;\n      border-color: #9C27B0;\n      color: white;\n    }\n\n    .action-btn.primary:hover {\n      background: #7B1FA2;\n    }\n\n    .record-preview h5 {\n      margin: 0 0 8px;\n      font-size: 12px;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .preview-list {\n      max-height: 200px;\n      overflow-y: auto;\n    }\n\n    .preview-card {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 10px 12px;\n      background: #f8f9fa;\n      border-radius: 6px;\n      margin-bottom: 6px;\n      transition: all 0.15s ease;\n    }\n\n    .preview-card:hover {\n      background: #eef1f5;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n    }\n\n    .preview-card-content {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .preview-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .preview-secondary {\n      font-size: 11px;\n      color: #888;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .preview-open-btn {\n      background: none;\n      border: none;\n      color: #9C27B0;\n      cursor: pointer;\n      padding: 6px 8px;\n      border-radius: 4px;\n      opacity: 0.6;\n      transition: all 0.15s ease;\n      flex-shrink: 0;\n    }\n\n    .preview-open-btn:hover {\n      opacity: 1;\n      background: rgba(156, 39, 176, 0.1);\n    }\n\n    .preview-loading {\n      padding: 12px;\n      text-align: center;\n    }\n\n    .results-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 200px;\n      text-align: center;\n      color: #999;\n    }\n\n    .results-empty i {\n      font-size: 32px;\n      margin-bottom: 12px;\n      opacity: 0.5;\n    }\n\n    .results-empty p {\n      font-size: 13px;\n      margin: 0;\n      max-width: 200px;\n    }\n\n    /* Modal */\n    .modal-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: rgba(0,0,0,0.5);\n      z-index: 1000;\n    }\n\n    .modal-dialog {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      background: white;\n      border-radius: 12px;\n      width: 420px;\n      max-width: 90vw;\n      z-index: 1001;\n    }\n\n    .modal-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px 20px;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .modal-header h3 {\n      margin: 0;\n      font-size: 16px;\n      color: #333;\n    }\n\n    .modal-close {\n      background: none;\n      border: none;\n      color: #999;\n      cursor: pointer;\n      padding: 4px 8px;\n    }\n\n    .modal-body {\n      padding: 20px;\n    }\n\n    .form-group {\n      margin-bottom: 16px;\n    }\n\n    .form-group label {\n      display: block;\n      margin-bottom: 6px;\n      font-size: 13px;\n      font-weight: 500;\n      color: #666;\n    }\n\n    .form-input {\n      width: 100%;\n      padding: 10px 12px;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      box-sizing: border-box;\n    }\n\n    .form-input:focus {\n      outline: none;\n      border-color: #9C27B0;\n      box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.1);\n    }\n\n    textarea.form-input {\n      resize: vertical;\n    }\n\n    .form-info {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px;\n      background: #f8f9fa;\n      border-radius: 6px;\n      font-size: 13px;\n      color: #666;\n    }\n\n    .form-info i {\n      color: #9C27B0;\n    }\n\n    .modal-footer {\n      display: flex;\n      gap: 12px;\n      padding: 16px 20px;\n      border-top: 1px solid #e0e0e0;\n      background: #fafafa;\n    }\n\n    .btn-primary {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 20px;\n      background: #9C27B0;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      cursor: pointer;\n    }\n\n    .btn-primary:hover:not(:disabled) {\n      background: #7B1FA2;\n    }\n\n    .btn-primary:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    .btn-secondary {\n      padding: 10px 20px;\n      background: white;\n      color: #666;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      cursor: pointer;\n    }\n\n    .btn-secondary:hover {\n      background: #f5f5f5;\n    }\n\n    /* Add to List Dialog */\n    .add-to-list-dialog {\n      width: 480px;\n    }\n\n    .add-to-list-dialog .modal-body {\n      max-height: 400px;\n      overflow-y: auto;\n    }\n\n    .list-search {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px 12px;\n      background: #f8f9fa;\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      margin-bottom: 12px;\n    }\n\n    .list-search i {\n      color: #999;\n      flex-shrink: 0;\n    }\n\n    .list-search .form-input {\n      flex: 1;\n      border: none;\n      background: transparent;\n      padding: 0;\n      font-size: 14px;\n    }\n\n    .list-search .form-input:focus {\n      box-shadow: none;\n      outline: none;\n    }\n\n    .list-options {\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      max-height: 250px;\n      overflow-y: auto;\n    }\n\n    .list-option {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n      border-bottom: 1px solid #f0f0f0;\n    }\n\n    .list-option:last-child {\n      border-bottom: none;\n    }\n\n    .list-option:hover {\n      background: #f8f9fa;\n    }\n\n    .list-option.selected {\n      background: #f3e5f5;\n    }\n\n    .list-option-radio {\n      flex-shrink: 0;\n    }\n\n    .list-option-radio input[type=\"radio\"] {\n      width: 18px;\n      height: 18px;\n      cursor: pointer;\n      accent-color: #9C27B0;\n    }\n\n    .list-option-info {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .list-option-name {\n      font-size: 14px;\n      font-weight: 500;\n      color: #333;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .list-option-entity {\n      font-size: 12px;\n      color: #888;\n    }\n\n    .list-options-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 30px 20px;\n      text-align: center;\n      color: #999;\n    }\n\n    .list-options-empty i {\n      font-size: 28px;\n      margin-bottom: 10px;\n      opacity: 0.5;\n    }\n\n    .list-options-empty p {\n      margin: 0;\n      font-size: 13px;\n    }\n\n    /* Responsive */\n    @media (max-width: 1024px) {\n      .operations-content {\n        grid-template-columns: 1fr;\n        grid-template-rows: auto 1fr auto;\n      }\n\n      .selection-panel {\n        order: 1;\n      }\n\n      .venn-panel {\n        order: 2;\n        min-height: 300px;\n      }\n\n      .results-panel {\n        order: 3;\n      }\n    }\n  "] }]
+    `, encapsulation: ViewEncapsulation.None, styles: ["\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    .operations-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: var(--mj-bg-surface);\n    }\n\n    .operations-header {\n      padding: 20px 24px;\n      background: var(--mj-bg-surface-card);\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .header-top {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 4px;\n    }\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .clear-all-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .clear-all-btn:hover {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      border-color: var(--mj-status-error);\n      color: var(--mj-status-error);\n    }\n\n    .clear-all-btn i {\n      font-size: 12px;\n    }\n\n    .header-title i {\n      font-size: 24px;\n      color: var(--mj-brand-primary);\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .header-subtitle {\n      color: var(--mj-text-secondary);\n      font-size: 14px;\n    }\n\n    .operations-content {\n      display: grid;\n      grid-template-columns: 280px 1fr 300px;\n      gap: 16px;\n      flex: 1;\n      padding: 16px;\n      overflow: hidden;\n    }\n\n    /* Panels */\n    .selection-panel,\n    .results-panel {\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-sm);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .venn-panel {\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-sm);\n      position: relative;\n      min-height: 400px;\n    }\n\n    .panel-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .panel-header h3 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .list-count {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      background: var(--mj-bg-surface-sunken);\n      padding: 2px 8px;\n      border-radius: 10px;\n    }\n\n    /* Entity Filter */\n    .entity-filter-section {\n      padding: 12px 16px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .filter-label {\n      display: block;\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--mj-text-secondary);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 6px;\n    }\n\n    .entity-select {\n      width: 100%;\n      padding: 8px 12px;\n      font-size: 13px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      background: var(--mj-bg-surface-card);\n      cursor: pointer;\n      outline: none;\n      transition: border-color 0.2s;\n    }\n\n    .entity-select:focus {\n      border-color: var(--mj-brand-primary);\n    }\n\n    .entity-note {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin: 8px 12px;\n      padding: 8px 10px;\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      border-radius: 6px;\n      font-size: 12px;\n      color: var(--mj-status-success);\n    }\n\n    .entity-note i {\n      color: var(--mj-status-success);\n    }\n\n    /* Selected Lists */\n    .selected-lists {\n      flex: 1;\n      overflow-y: auto;\n      padding: 12px;\n    }\n\n    .selected-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px;\n      background: var(--mj-bg-surface-sunken);\n      border-radius: 6px;\n      margin-bottom: 8px;\n    }\n\n    .item-color {\n      width: 12px;\n      height: 12px;\n      border-radius: 3px;\n      flex-shrink: 0;\n    }\n\n    .item-info {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .item-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .item-entity {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    .remove-btn {\n      background: none;\n      border: none;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      padding: 4px;\n      border-radius: 4px;\n    }\n\n    .remove-btn:hover {\n      background: var(--mj-border-default);\n      color: var(--mj-text-secondary);\n    }\n\n    /* Add list area */\n    .add-list-area {\n      position: relative;\n    }\n\n    .add-list-search {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      border: 1px dashed var(--mj-border-default);\n      border-radius: 6px;\n      transition: border-color 0.2s;\n    }\n\n    .add-list-search:focus-within {\n      border-color: var(--mj-brand-primary);\n    }\n\n    .add-list-search i {\n      color: var(--mj-text-muted);\n    }\n\n    .add-list-search input {\n      flex: 1;\n      border: none;\n      outline: none;\n      font-size: 13px;\n    }\n\n    .list-dropdown {\n      position: absolute;\n      top: 100%;\n      left: 0;\n      right: 0;\n      z-index: 100;\n      margin-top: 4px;\n    }\n\n    .dropdown-backdrop {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n    }\n\n    .dropdown-content {\n      position: relative;\n      background: var(--mj-bg-surface-card);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      box-shadow: var(--mj-shadow-md);\n      max-height: 200px;\n      overflow-y: auto;\n    }\n\n    .dropdown-item {\n      display: flex;\n      flex-direction: column;\n      padding: 10px 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n    }\n\n    .dropdown-item:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .dropdown-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .dropdown-entity {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    .lists-full {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px;\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      background: var(--mj-bg-surface-sunken);\n      border-radius: 6px;\n    }\n\n    .entity-warning {\n      display: flex;\n      align-items: flex-start;\n      gap: 8px;\n      margin: 12px;\n      padding: 10px;\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      border-radius: 6px;\n      font-size: 12px;\n      color: var(--mj-status-warning);\n    }\n\n    .entity-warning i {\n      color: var(--mj-status-warning);\n      margin-top: 2px;\n    }\n\n    /* Quick Operations */\n    .quick-operations {\n      padding: 12px;\n      border-top: 1px solid var(--mj-border-default);\n    }\n\n    .quick-operations h4 {\n      margin: 0 0 10px;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-secondary);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .operation-buttons {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .op-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      font-size: 13px;\n      color: var(--mj-text-primary);\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .op-btn:hover:not(:disabled) {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-brand-primary);\n    }\n\n    .op-btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    /* Venn Panel */\n    .venn-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      text-align: center;\n      padding: 40px;\n    }\n\n    .empty-icon {\n      width: 80px;\n      height: 80px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      border-radius: 50%;\n      margin-bottom: 20px;\n    }\n\n    .empty-icon i {\n      font-size: 36px;\n      color: var(--mj-brand-primary);\n    }\n\n    .venn-empty h3 {\n      margin: 0 0 8px;\n      font-size: 18px;\n      color: var(--mj-text-primary);\n    }\n\n    .venn-empty p {\n      margin: 0;\n      color: var(--mj-text-secondary);\n      font-size: 14px;\n      max-width: 300px;\n    }\n\n    .loading-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: color-mix(in srgb, var(--mj-bg-surface-card) 90%, transparent);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    /* Results Panel */\n    .region-details,\n    .operation-result {\n      padding: 16px;\n    }\n\n    .region-header,\n    .result-header {\n      margin-bottom: 16px;\n    }\n\n    .region-label,\n    .result-operation {\n      display: block;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      margin-bottom: 4px;\n    }\n\n    .region-count,\n    .result-count {\n      font-size: 13px;\n      color: var(--mj-brand-primary);\n      font-weight: 500;\n    }\n\n    .region-actions {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      margin-bottom: 16px;\n    }\n\n    .action-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 14px;\n      background: var(--mj-bg-surface-card);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      font-size: 13px;\n      color: var(--mj-text-primary);\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .action-btn:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .action-btn.primary {\n      background: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .action-btn.primary:hover {\n      background: var(--mj-brand-primary-hover);\n    }\n\n    .record-preview h5 {\n      margin: 0 0 8px;\n      font-size: 12px;\n      color: var(--mj-text-secondary);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .preview-list {\n      max-height: 200px;\n      overflow-y: auto;\n    }\n\n    .preview-card {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 10px 12px;\n      background: var(--mj-bg-surface-sunken);\n      border-radius: 6px;\n      margin-bottom: 6px;\n      transition: all 0.15s ease;\n    }\n\n    .preview-card:hover {\n      background: var(--mj-bg-surface-sunken);\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .preview-card-content {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .preview-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .preview-secondary {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .preview-open-btn {\n      background: none;\n      border: none;\n      color: var(--mj-brand-primary);\n      cursor: pointer;\n      padding: 6px 8px;\n      border-radius: 4px;\n      opacity: 0.6;\n      transition: all 0.15s ease;\n      flex-shrink: 0;\n    }\n\n    .preview-open-btn:hover {\n      opacity: 1;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    }\n\n    .preview-loading {\n      padding: 12px;\n      text-align: center;\n    }\n\n    .results-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 200px;\n      text-align: center;\n      color: var(--mj-text-muted);\n    }\n\n    .results-empty i {\n      font-size: 32px;\n      margin-bottom: 12px;\n      opacity: 0.5;\n    }\n\n    .results-empty p {\n      font-size: 13px;\n      margin: 0;\n      max-width: 200px;\n    }\n\n    /* Modal */\n    .modal-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: var(--mj-bg-overlay);\n      z-index: 1000;\n    }\n\n    .modal-dialog {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      background: var(--mj-bg-surface-card);\n      border-radius: 12px;\n      width: 420px;\n      max-width: 90vw;\n      z-index: 1001;\n    }\n\n    .modal-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px 20px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .modal-header h3 {\n      margin: 0;\n      font-size: 16px;\n      color: var(--mj-text-primary);\n    }\n\n    .modal-close {\n      background: none;\n      border: none;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      padding: 4px 8px;\n    }\n\n    .modal-body {\n      padding: 20px;\n    }\n\n    .form-group {\n      margin-bottom: 16px;\n    }\n\n    .form-group label {\n      display: block;\n      margin-bottom: 6px;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-secondary);\n    }\n\n    .form-input {\n      width: 100%;\n      padding: 10px 12px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      font-size: 14px;\n      box-sizing: border-box;\n    }\n\n    .form-input:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    }\n\n    textarea.form-input {\n      resize: vertical;\n    }\n\n    .form-info {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px;\n      background: var(--mj-bg-surface-sunken);\n      border-radius: 6px;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n    }\n\n    .form-info i {\n      color: var(--mj-brand-primary);\n    }\n\n    .modal-footer {\n      display: flex;\n      gap: 12px;\n      padding: 16px 20px;\n      border-top: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .btn-primary {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 20px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      cursor: pointer;\n    }\n\n    .btn-primary:hover:not(:disabled) {\n      background: var(--mj-brand-primary-hover);\n    }\n\n    .btn-primary:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    .btn-secondary {\n      padding: 10px 20px;\n      background: var(--mj-bg-surface-card);\n      color: var(--mj-text-secondary);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      font-size: 14px;\n      cursor: pointer;\n    }\n\n    .btn-secondary:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    /* Add to List Dialog */\n    .add-to-list-dialog {\n      width: 480px;\n    }\n\n    .add-to-list-dialog .modal-body {\n      max-height: 400px;\n      overflow-y: auto;\n    }\n\n    .list-search {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px 12px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      margin-bottom: 12px;\n    }\n\n    .list-search i {\n      color: var(--mj-text-muted);\n      flex-shrink: 0;\n    }\n\n    .list-search .form-input {\n      flex: 1;\n      border: none;\n      background: transparent;\n      padding: 0;\n      font-size: 14px;\n    }\n\n    .list-search .form-input:focus {\n      box-shadow: none;\n      outline: none;\n    }\n\n    .list-options {\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      max-height: 250px;\n      overflow-y: auto;\n    }\n\n    .list-option {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .list-option:last-child {\n      border-bottom: none;\n    }\n\n    .list-option:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .list-option.selected {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    }\n\n    .list-option-radio {\n      flex-shrink: 0;\n    }\n\n    .list-option-radio input[type=\"radio\"] {\n      width: 18px;\n      height: 18px;\n      cursor: pointer;\n      accent-color: var(--mj-brand-primary);\n    }\n\n    .list-option-info {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .list-option-name {\n      font-size: 14px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .list-option-entity {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n    }\n\n    .list-options-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 30px 20px;\n      text-align: center;\n      color: var(--mj-text-muted);\n    }\n\n    .list-options-empty i {\n      font-size: 28px;\n      margin-bottom: 10px;\n      opacity: 0.5;\n    }\n\n    .list-options-empty p {\n      margin: 0;\n      font-size: 13px;\n    }\n\n    /* Responsive */\n    @media (max-width: 1024px) {\n      .operations-content {\n        grid-template-columns: 1fr;\n        grid-template-rows: auto 1fr auto;\n      }\n\n      .selection-panel {\n        order: 1;\n      }\n\n      .venn-panel {\n        order: 2;\n        min-height: 300px;\n      }\n\n      .results-panel {\n        order: 3;\n      }\n    }\n  "] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.ListSetOperationsService }, { type: i2.MJNotificationService }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ListsOperationsResource, { className: "ListsOperationsResource", filePath: "src/Lists/components/lists-operations-resource.component.ts", lineNumber: 1290 }); })();
 //# sourceMappingURL=lists-operations-resource.component.js.map