npm - @memberjunction/ng-dashboards - Versions diffs - 5.11.0 → 5.13.0 - Mend

@memberjunction/ng-dashboards 5.11.0 → 5.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (229) hide show

package/dist/Lists/components/lists-browse-resource.component.js CHANGED Viewed

@@ -735,41 +735,37 @@ function ListsBrowseResource_Conditional_43_Template(rf, ctx) { if (rf & 1) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("config", ctx_r2.shareDialogConfig)("visible", ctx_r2.showShareDialog);
 } }
-function ListsBrowseResource_Conditional_44_For_4_Template(rf, ctx) { if (rf & 1) {
-    const _r39 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 157);
-    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_44_For_4_Template_div_click_0_listener() { const entity_r40 = i0.ɵɵrestoreView(_r39).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.selectEntity(entity_r40)); });
+function ListsBrowseResource_Conditional_44_For_3_Template(rf, ctx) { if (rf & 1) {
+    const _r38 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 156);
+    i0.ɵɵlistener("mousedown", function ListsBrowseResource_Conditional_44_For_3_Template_div_mousedown_0_listener($event) { const entity_r39 = i0.ɵɵrestoreView(_r38).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.selectEntity(entity_r39); return i0.ɵɵresetView($event.preventDefault()); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const entity_r40 = ctx.$implicit;
+    const entity_r39 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", entity_r40.Name, " ");
+    i0.ɵɵtextInterpolate1(" ", entity_r39.Name, " ");
 } }
-function ListsBrowseResource_Conditional_44_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 156);
+function ListsBrowseResource_Conditional_44_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 155);
     i0.ɵɵtext(1, " No entities found ");
     i0.ɵɵelementEnd();
 } }
 function ListsBrowseResource_Conditional_44_Template(rf, ctx) { if (rf & 1) {
-    const _r38 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 152)(1, "div", 153);
-    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_44_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r38); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeEntityDropdown()); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "div", 154);
-    i0.ɵɵrepeaterCreate(3, ListsBrowseResource_Conditional_44_For_4_Template, 2, 1, "div", 155, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵconditionalCreate(5, ListsBrowseResource_Conditional_44_Conditional_5_Template, 2, 0, "div", 156);
+    i0.ɵɵrepeaterCreate(2, ListsBrowseResource_Conditional_44_For_3_Template, 2, 1, "div", 154, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵconditionalCreate(4, ListsBrowseResource_Conditional_44_Conditional_4_Template, 2, 0, "div", 155);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵstyleProp("top", ctx_r2.entityDropdownPosition.top, "px")("left", ctx_r2.entityDropdownPosition.left, "px")("width", ctx_r2.entityDropdownPosition.width, "px");
     i0.ɵɵclassProp("dropdown-above", ctx_r2.entityDropdownPosition.openAbove);
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance();
     i0.ɵɵclassProp("open-above", ctx_r2.entityDropdownPosition.openAbove);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.filteredEntitiesList);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.filteredEntitiesList.length === 0 ? 5 : -1);
+    i0.ɵɵconditional(ctx_r2.filteredEntitiesList.length === 0 ? 4 : -1);
 } }
 let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponent {
     cdr;
@@ -843,7 +839,7 @@ let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponen
     onDocumentClick(event) {
         if (this.showEntityDropdown) {
             const target = event.target;
-            if (!target.closest('.custom-select-wrapper')) {
+            if (!target.closest('.custom-select-wrapper') && !target.closest('.entity-dropdown-portal')) {
                 this.showEntityDropdown = false;
             }
         }
@@ -1189,6 +1185,12 @@ let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponen
     filterEntities(term) {
         const lowerTerm = term.toLowerCase();
         this.filteredEntitiesList = this.availableEntities.filter(e => e.Name.toLowerCase().includes(lowerTerm));
+        // Ensure dropdown is visible while typing
+        if (!this.showEntityDropdown && term) {
+            this.showEntityDropdown = true;
+        }
+        // Clear selection when user modifies the search text
+        this.selectedEntityId = '';
     }
     openEntityDropdown(inputElement) {
         const rect = inputElement.getBoundingClientRect();
@@ -1399,7 +1401,7 @@ let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponen
     static ɵfac = function ListsBrowseResource_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ListsBrowseResource)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.TabService), i0.ɵɵdirectiveInject(i2.MJNotificationService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i3.ListSharingService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ListsBrowseResource, selectors: [["mj-lists-browse-resource"]], hostBindings: function ListsBrowseResource_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("click", function ListsBrowseResource_click_HostBindingHandler($event) { return ctx.onDocumentClick($event); }, i0.ɵɵresolveDocument)("keydown.escape", function ListsBrowseResource_keydown_escape_HostBindingHandler() { return ctx.onEscapeKey(); }, i0.ɵɵresolveDocument);
-        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 45, vars: 22, consts: [["categoryNodeTemplate", ""], ["entityInput", ""], [1, "lists-browse-container"], [1, "browse-header"], [1, "header-row"], [1, "header-title"], [1, "fa-solid", "fa-list-check"], [1, "btn-create", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "header-actions"], [1, "search-box"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search lists...", 3, "ngModelChange", "ngModel"], [1, "clear-search"], [1, "filter-group"], ["title", "Filter by owner", 1, "filter-select", 3, "ngModelChange", "ngModel"], [3, "value"], ["title", "Filter by entity", 1, "filter-select", 3, "ngModelChange", "ngModel"], [1, "view-toggle-group"], ["title", "Table view", 1, "view-toggle", 3, "click"], [1, "fa-solid", "fa-table-list"], ["title", "Card view", 1, "view-toggle", 3, "click"], [1, "fa-solid", "fa-grip"], ["title", "Category view", 1, "view-toggle", 3, "click"], [1, "fa-solid", "fa-folder-tree"], [1, "loading-container"], [1, "empty-state"], [1, "empty-state", "search-empty"], [1, "browse-content"], [1, "context-menu-overlay"], [1, "context-menu", 3, "top", "left"], [1, "modal-overlay"], [1, "modal-dialog"], [1, "modal-dialog", "confirm-dialog"], [3, "config", "visible"], [1, "entity-dropdown-portal", 3, "top", "left", "width", "dropdown-above"], [1, "clear-search", 3, "click"], [1, "fa-solid", "fa-times"], ["text", "Loading lists...", "size", "medium"], [1, "empty-state-icon-wrapper"], [1, "icon-bg"], [1, "empty-state-features"], [1, "feature-item"], [1, "fa-solid", "fa-check-circle"], [1, "btn-create-large", 3, "click"], [1, "empty-state-icon-wrapper", "search"], [1, "fa-solid", "fa-filter-circle-xmark"], [1, "empty-hint"], [1, "btn-clear", 3, "click"], [1, "results-header"], [1, "result-count"], [1, "sort-options"], [1, "filter-select", "sort-select", 3, "ngModelChange", "ngModel"], [1, "lists-table"], ["role", "list", "aria-label", "Lists", 1, "lists-grid"], [1, "category-tree"], ["role", "grid", "aria-label", "Lists table"], ["scope", "col", 1, "col-name"], ["scope", "col", 1, "col-entity"], ["scope", "col", 1, "col-items"], ["scope", "col", 1, "col-sharing"], ["scope", "col", 1, "col-owner"], ["scope", "col", 1, "col-updated"], ["scope", "col", 1, "col-actions"], [1, "sr-only"], ["tabindex", "0", "role", "row", 1, "list-row"], ["tabindex", "0", "role", "row", 1, "list-row", 3, "click", "keydown.enter"], ["role", "gridcell", 1, "col-name"], [1, "name-cell"], ["aria-hidden", "true", 1, "list-icon"], [1, "name-content"], [1, "list-name"], [1, "list-desc"], ["role", "gridcell", 1, "col-entity"], [1, "entity-badge"], ["role", "gridcell", 1, "col-items"], ["role", "gridcell", 1, "col-sharing"], [1, "sharing-private"], ["role", "gridcell", 1, "col-owner"], [1, "owner-name"], ["role", "gridcell", 1, "col-updated"], ["role", "gridcell", 1, "col-actions"], ["title", "More options", 1, "action-btn"], [1, "sharing-indicator"], [1, "fa-solid", "fa-share-nodes"], [1, "share-count"], [1, "fa-solid", "fa-lock"], ["title", "More options", 1, "action-btn", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-ellipsis-v"], ["tabindex", "0", "role", "listitem", 1, "list-card"], ["tabindex", "0", "role", "listitem", 1, "list-card", 3, "click", "keydown.enter"], [1, "card-header"], ["aria-hidden", "true", 1, "card-icon"], [1, "card-menu"], [1, "card-body"], [1, "card-title"], [1, "card-description"], [1, "card-meta"], [1, "meta-item"], [1, "fa-solid", "fa-database"], [1, "fa-solid", "fa-hashtag"], [1, "card-footer"], [1, "owner-tag"], [1, "fa-solid", "fa-user"], [1, "card-footer-right"], [1, "date-info"], [1, "menu-btn", 3, "click"], [1, "sharing-badge", 3, "title"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "category-section"], [1, "category-header"], [1, "category-header", "uncategorized"], ["role", "list", 1, "category-lists"], [1, "category-header", 3, "click"], [1, "fa-solid", "fa-folder"], [1, "category-name"], [1, "category-count"], [1, "category-header", "uncategorized", 3, "click"], [1, "fa-solid", "fa-inbox"], ["tabindex", "0", "role", "listitem", 1, "list-row", "hierarchy-row"], ["tabindex", "0", "role", "listitem", 1, "list-row", "hierarchy-row", 3, "click", "keydown.enter"], [1, "list-info"], [1, "list-meta"], [1, "list-actions"], [1, "action-btn", 3, "click"], [1, "context-menu-overlay", 3, "click"], [1, "context-menu"], [1, "menu-item", 3, "click"], [1, "fa-solid", "fa-pen"], [1, "fa-solid", "fa-copy"], [1, "menu-divider"], [1, "menu-item", "danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "modal-overlay", 3, "click"], [1, "modal-header"], [1, "modal-close", 3, "click"], [1, "modal-body"], [1, "form-group"], ["type", "text", "placeholder", "Enter list name", 1, "form-input", 3, "ngModelChange", "ngModel"], ["placeholder", "Optional description", "rows", "3", 1, "form-input", 3, "ngModelChange", "ngModel"], [1, "form-input", 3, "ngModelChange", "ngModel"], [3, "ngValue"], [1, "modal-footer"], [1, "btn-primary", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "btn-secondary", 3, "click", "disabled"], [1, "custom-select-wrapper"], ["type", "text", "placeholder", "Search and select an entity", 1, "form-input", 3, "ngModelChange", "focus", "ngModel"], ["type", "text", "disabled", "", 1, "form-input", 3, "value"], [1, "warning-text"], [1, "btn-danger", 3, "click", "disabled"], [3, "complete", "cancel", "config", "visible"], [1, "entity-dropdown-portal"], [1, "entity-dropdown-backdrop", 3, "click"], [1, "entity-dropdown-content"], [1, "dropdown-item"], [1, "dropdown-empty"], [1, "dropdown-item", 3, "click"]], template: function ListsBrowseResource_Template(rf, ctx) { if (rf & 1) {
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 45, vars: 22, consts: [["categoryNodeTemplate", ""], ["entityInput", ""], [1, "lists-browse-container"], [1, "browse-header"], [1, "header-row"], [1, "header-title"], [1, "fa-solid", "fa-list-check"], [1, "btn-create", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "header-actions"], [1, "search-box"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search lists...", 3, "ngModelChange", "ngModel"], [1, "clear-search"], [1, "filter-group"], ["title", "Filter by owner", 1, "filter-select", 3, "ngModelChange", "ngModel"], [3, "value"], ["title", "Filter by entity", 1, "filter-select", 3, "ngModelChange", "ngModel"], [1, "view-toggle-group"], ["title", "Table view", 1, "view-toggle", 3, "click"], [1, "fa-solid", "fa-table-list"], ["title", "Card view", 1, "view-toggle", 3, "click"], [1, "fa-solid", "fa-grip"], ["title", "Category view", 1, "view-toggle", 3, "click"], [1, "fa-solid", "fa-folder-tree"], [1, "loading-container"], [1, "empty-state"], [1, "empty-state", "search-empty"], [1, "browse-content"], [1, "context-menu-overlay"], [1, "context-menu", 3, "top", "left"], [1, "modal-overlay"], [1, "modal-dialog"], [1, "modal-dialog", "confirm-dialog"], [3, "config", "visible"], [1, "entity-dropdown-portal", 3, "top", "left", "width", "dropdown-above"], [1, "clear-search", 3, "click"], [1, "fa-solid", "fa-times"], ["text", "Loading lists...", "size", "medium"], [1, "empty-state-icon-wrapper"], [1, "icon-bg"], [1, "empty-state-features"], [1, "feature-item"], [1, "fa-solid", "fa-check-circle"], [1, "btn-create-large", 3, "click"], [1, "empty-state-icon-wrapper", "search"], [1, "fa-solid", "fa-filter-circle-xmark"], [1, "empty-hint"], [1, "btn-clear", 3, "click"], [1, "results-header"], [1, "result-count"], [1, "sort-options"], [1, "filter-select", "sort-select", 3, "ngModelChange", "ngModel"], [1, "lists-table"], ["role", "list", "aria-label", "Lists", 1, "lists-grid"], [1, "category-tree"], ["role", "grid", "aria-label", "Lists table"], ["scope", "col", 1, "col-name"], ["scope", "col", 1, "col-entity"], ["scope", "col", 1, "col-items"], ["scope", "col", 1, "col-sharing"], ["scope", "col", 1, "col-owner"], ["scope", "col", 1, "col-updated"], ["scope", "col", 1, "col-actions"], [1, "sr-only"], ["tabindex", "0", "role", "row", 1, "list-row"], ["tabindex", "0", "role", "row", 1, "list-row", 3, "click", "keydown.enter"], ["role", "gridcell", 1, "col-name"], [1, "name-cell"], ["aria-hidden", "true", 1, "list-icon"], [1, "name-content"], [1, "list-name"], [1, "list-desc"], ["role", "gridcell", 1, "col-entity"], [1, "entity-badge"], ["role", "gridcell", 1, "col-items"], ["role", "gridcell", 1, "col-sharing"], [1, "sharing-private"], ["role", "gridcell", 1, "col-owner"], [1, "owner-name"], ["role", "gridcell", 1, "col-updated"], ["role", "gridcell", 1, "col-actions"], ["title", "More options", 1, "action-btn"], [1, "sharing-indicator"], [1, "fa-solid", "fa-share-nodes"], [1, "share-count"], [1, "fa-solid", "fa-lock"], ["title", "More options", 1, "action-btn", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-ellipsis-v"], ["tabindex", "0", "role", "listitem", 1, "list-card"], ["tabindex", "0", "role", "listitem", 1, "list-card", 3, "click", "keydown.enter"], [1, "card-header"], ["aria-hidden", "true", 1, "card-icon"], [1, "card-menu"], [1, "card-body"], [1, "card-title"], [1, "card-description"], [1, "card-meta"], [1, "meta-item"], [1, "fa-solid", "fa-database"], [1, "fa-solid", "fa-hashtag"], [1, "card-footer"], [1, "owner-tag"], [1, "fa-solid", "fa-user"], [1, "card-footer-right"], [1, "date-info"], [1, "menu-btn", 3, "click"], [1, "sharing-badge", 3, "title"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "category-section"], [1, "category-header"], [1, "category-header", "uncategorized"], ["role", "list", 1, "category-lists"], [1, "category-header", 3, "click"], [1, "fa-solid", "fa-folder"], [1, "category-name"], [1, "category-count"], [1, "category-header", "uncategorized", 3, "click"], [1, "fa-solid", "fa-inbox"], ["tabindex", "0", "role", "listitem", 1, "list-row", "hierarchy-row"], ["tabindex", "0", "role", "listitem", 1, "list-row", "hierarchy-row", 3, "click", "keydown.enter"], [1, "list-info"], [1, "list-meta"], [1, "list-actions"], [1, "action-btn", 3, "click"], [1, "context-menu-overlay", 3, "click"], [1, "context-menu"], [1, "menu-item", 3, "click"], [1, "fa-solid", "fa-pen"], [1, "fa-solid", "fa-copy"], [1, "menu-divider"], [1, "menu-item", "danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "modal-overlay", 3, "click"], [1, "modal-header"], [1, "modal-close", 3, "click"], [1, "modal-body"], [1, "form-group"], ["type", "text", "placeholder", "Enter list name", 1, "form-input", 3, "ngModelChange", "ngModel"], ["placeholder", "Optional description", "rows", "3", 1, "form-input", 3, "ngModelChange", "ngModel"], [1, "form-input", 3, "ngModelChange", "ngModel"], [3, "ngValue"], [1, "modal-footer"], [1, "btn-primary", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "btn-secondary", 3, "click", "disabled"], [1, "custom-select-wrapper"], ["type", "text", "placeholder", "Search and select an entity", 1, "form-input", 3, "ngModelChange", "focus", "ngModel"], ["type", "text", "disabled", "", 1, "form-input", 3, "value"], [1, "warning-text"], [1, "btn-danger", 3, "click", "disabled"], [3, "complete", "cancel", "config", "visible"], [1, "entity-dropdown-portal"], [1, "entity-dropdown-content"], [1, "dropdown-item"], [1, "dropdown-empty"], [1, "dropdown-item", 3, "mousedown"]], template: function ListsBrowseResource_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "div", 4)(3, "div", 5);
             i0.ɵɵelement(4, "i", 6);
@@ -1454,7 +1456,7 @@ let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponen
             i0.ɵɵconditionalCreate(41, ListsBrowseResource_Conditional_41_Template, 1, 0, "div", 31);
             i0.ɵɵconditionalCreate(42, ListsBrowseResource_Conditional_42_Template, 20, 5, "div", 33);
             i0.ɵɵconditionalCreate(43, ListsBrowseResource_Conditional_43_Template, 1, 2, "mj-list-share-dialog", 34);
-            i0.ɵɵconditionalCreate(44, ListsBrowseResource_Conditional_44_Template, 6, 11, "div", 35);
+            i0.ɵɵconditionalCreate(44, ListsBrowseResource_Conditional_44_Template, 5, 11, "div", 35);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(14);
@@ -1499,7 +1501,7 @@ let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponen
             i0.ɵɵconditional(ctx.shareDialogConfig ? 43 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.showEntityDropdown && !ctx.editingList ? 44 : -1);
-        } }, dependencies: [i4.NgTemplateOutlet, i5.NgSelectOption, i5.ɵNgSelectMultipleOption, i5.DefaultValueAccessor, i5.SelectControlValueAccessor, i5.NgControlStatus, i5.NgModel, i6.LoadingComponent, i3.ListShareDialogComponent], styles: ["\n    :host {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      height: 100%;\n    }\n\n    .lists-browse-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #f5f7fa;\n      overflow: hidden;\n    }\n\n    /* Header */\n    .browse-header {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      padding: 16px 24px;\n      background: white;\n      border-bottom: 1px solid #e0e0e0;\n      flex-shrink: 0;\n    }\n\n    .header-row {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-title i {\n      font-size: 24px;\n      color: #2196F3;\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .header-actions {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      flex-wrap: wrap;\n    }\n\n    .search-box {\n      position: relative;\n      display: flex;\n      align-items: center;\n      flex: 1;\n      min-width: 200px;\n      max-width: 300px;\n    }\n\n    .search-box i.fa-search {\n      position: absolute;\n      left: 12px;\n      color: #999;\n    }\n\n    .search-box input {\n      padding: 8px 36px;\n      border: 1px solid #ddd;\n      border-radius: 20px;\n      font-size: 14px;\n      width: 100%;\n      transition: border-color 0.2s, box-shadow 0.2s;\n    }\n\n    .search-box input:focus {\n      outline: none;\n      border-color: #2196F3;\n      box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n    }\n\n    .clear-search {\n      position: absolute;\n      right: 8px;\n      background: none;\n      border: none;\n      color: #999;\n      cursor: pointer;\n    }\n\n    .filter-group {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .filter-group label {\n      font-size: 13px;\n      color: #666;\n    }\n\n    .filter-select {\n      padding: 8px 12px;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      background: white;\n      cursor: pointer;\n      min-width: 120px;\n    }\n\n    .filter-select:focus {\n      outline: none;\n      border-color: #2196F3;\n      box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n    }\n\n    .sort-select {\n      min-width: 140px;\n    }\n\n    .view-toggle-group {\n      display: flex;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      overflow: hidden;\n    }\n\n    .view-toggle {\n      padding: 8px 12px;\n      background: white;\n      border: none;\n      border-right: 1px solid #ddd;\n      color: #666;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .view-toggle:last-child {\n      border-right: none;\n    }\n\n    .view-toggle:hover {\n      background: #f5f5f5;\n    }\n\n    .view-toggle.active {\n      background: #2196F3;\n      color: white;\n    }\n\n    .btn-create {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #2196F3;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-create:hover {\n      background: #1976D2;\n    }\n\n    /* Loading */\n    .loading-container {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex: 1;\n    }\n\n    /* Empty State */\n    .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      flex: 1;\n      padding: 48px 40px;\n      text-align: center;\n      max-width: 480px;\n      margin: 0 auto;\n    }\n\n    .empty-state-icon-wrapper {\n      position: relative;\n      margin-bottom: 24px;\n    }\n\n    .empty-state-icon-wrapper .icon-bg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 120px;\n      height: 120px;\n      border-radius: 50%;\n      background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.05) 100%);\n    }\n\n    .empty-state-icon-wrapper > i {\n      position: relative;\n      font-size: 56px;\n      color: #2196F3;\n      z-index: 1;\n    }\n\n    .empty-state-icon-wrapper.search > i {\n      font-size: 48px;\n      color: #9e9e9e;\n    }\n\n    .empty-state h3 {\n      margin: 0 0 12px;\n      font-size: 22px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .empty-state p {\n      margin: 0 0 8px;\n      color: #666;\n      font-size: 15px;\n      line-height: 1.5;\n    }\n\n    .empty-state p:last-of-type {\n      margin-bottom: 24px;\n    }\n\n    .empty-hint {\n      color: #999 !important;\n      font-size: 13px !important;\n    }\n\n    .empty-state-features {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      margin-bottom: 28px;\n      text-align: left;\n    }\n\n    .feature-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      font-size: 14px;\n      color: #555;\n    }\n\n    .feature-item i {\n      font-size: 14px !important;\n      color: #4CAF50 !important;\n    }\n\n    .btn-create-large {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 14px 28px;\n      background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);\n      color: white;\n      border: none;\n      border-radius: 8px;\n      font-size: 15px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s;\n      box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n    }\n\n    .btn-create-large:hover {\n      background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);\n    }\n\n    .btn-clear {\n      padding: 10px 20px;\n      background: #f0f0f0;\n      border: none;\n      border-radius: 6px;\n      color: #666;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-clear:hover {\n      background: #e0e0e0;\n    }\n\n    /* Content */\n    .browse-content {\n      flex: 1;\n      overflow-y: auto;\n      padding: 16px 24px;\n    }\n\n    .results-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 16px;\n    }\n\n    .result-count {\n      font-size: 14px;\n      color: #666;\n    }\n\n    .sort-options {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .sort-options label {\n      font-size: 13px;\n      color: #666;\n    }\n\n    /* Table View */\n    .lists-table {\n      background: white;\n      border-radius: 8px;\n      overflow: hidden;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n    }\n\n    .lists-table table {\n      width: 100%;\n      border-collapse: collapse;\n    }\n\n    .lists-table th {\n      text-align: left;\n      padding: 12px 16px;\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      background: #fafafa;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .lists-table td {\n      padding: 12px 16px;\n      border-bottom: 1px solid #f0f0f0;\n      font-size: 14px;\n      color: #333;\n    }\n\n    .list-row {\n      cursor: pointer;\n      transition: background 0.15s;\n      outline: none;\n    }\n\n    .list-row:hover {\n      background: #f5f5f5;\n    }\n\n    .list-row:focus {\n      background: #e8f4fd;\n    }\n\n    .list-row:focus-visible {\n      background: #e3f2fd;\n      box-shadow: inset 3px 0 0 #2196F3;\n    }\n\n    .list-row:last-child td {\n      border-bottom: none;\n    }\n\n    .sr-only {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n\n    .col-name { width: 30%; }\n    .col-entity { width: 15%; }\n    .col-items { width: 8%; text-align: center; }\n    .col-sharing { width: 8%; text-align: center; }\n    .col-owner { width: 14%; }\n    .col-updated { width: 15%; }\n    .col-actions { width: 10%; text-align: right; }\n\n    /* Sharing indicators */\n    .sharing-indicator {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      color: #2196F3;\n      font-size: 13px;\n    }\n\n    .sharing-indicator i {\n      font-size: 14px;\n    }\n\n    .share-count {\n      font-weight: 500;\n    }\n\n    .sharing-private {\n      color: #999;\n      font-size: 13px;\n    }\n\n    .sharing-badge {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 24px;\n      height: 24px;\n      background: #e3f2fd;\n      border-radius: 50%;\n      color: #2196F3;\n      font-size: 11px;\n    }\n\n    .card-footer-right {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .name-cell {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .list-icon {\n      width: 36px;\n      height: 36px;\n      border-radius: 6px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: white;\n      font-size: 14px;\n      flex-shrink: 0;\n    }\n\n    .name-content {\n      display: flex;\n      flex-direction: column;\n      min-width: 0;\n    }\n\n    .list-name {\n      font-weight: 500;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .list-desc {\n      font-size: 12px;\n      color: #999;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .entity-badge {\n      display: inline-block;\n      padding: 2px 8px;\n      background: #e8f4fd;\n      border-radius: 4px;\n      font-size: 12px;\n      color: #1976D2;\n    }\n\n    .owner-name {\n      color: #666;\n    }\n\n    .owner-name.is-me {\n      color: #2196F3;\n      font-weight: 500;\n    }\n\n    .action-btn {\n      background: none;\n      border: none;\n      padding: 6px 10px;\n      color: #999;\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.15s;\n    }\n\n    .action-btn:hover {\n      background: #e0e0e0;\n      color: #666;\n    }\n\n    /* Card View */\n    .lists-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n      gap: 16px;\n    }\n\n    .list-card {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n      overflow: hidden;\n      cursor: pointer;\n      transition: transform 0.2s, box-shadow 0.2s, outline 0.1s;\n      outline: 2px solid transparent;\n    }\n\n    .list-card:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 4px 12px rgba(0,0,0,0.12);\n    }\n\n    .list-card:focus {\n      outline: 2px solid #2196F3;\n      outline-offset: 2px;\n    }\n\n    .list-card:focus:not(:focus-visible) {\n      outline: none;\n    }\n\n    .list-card:focus-visible {\n      outline: 2px solid #2196F3;\n      outline-offset: 2px;\n    }\n\n    .card-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n      padding: 16px 16px 0;\n    }\n\n    .card-icon {\n      width: 40px;\n      height: 40px;\n      border-radius: 8px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: white;\n      font-size: 18px;\n    }\n\n    .menu-btn {\n      background: none;\n      border: none;\n      padding: 4px 8px;\n      color: #999;\n      cursor: pointer;\n      border-radius: 4px;\n    }\n\n    .menu-btn:hover {\n      background: #f5f5f5;\n      color: #666;\n    }\n\n    .card-body {\n      padding: 12px 16px;\n    }\n\n    .card-title {\n      margin: 0 0 4px;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .card-description {\n      margin: 0 0 12px;\n      font-size: 13px;\n      color: #666;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n\n    .card-meta {\n      display: flex;\n      gap: 16px;\n    }\n\n    .meta-item {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: 12px;\n      color: #999;\n    }\n\n    .card-footer {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px 16px;\n      border-top: 1px solid #f0f0f0;\n      background: #fafafa;\n    }\n\n    .owner-tag {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n      color: #666;\n    }\n\n    .owner-tag.is-me {\n      color: #2196F3;\n    }\n\n    .date-info {\n      font-size: 12px;\n      color: #999;\n    }\n\n    /* Hierarchy View */\n    .category-tree {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .category-section {\n      background: white;\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .category-header {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 16px;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .category-header:hover {\n      background: #f5f5f5;\n    }\n\n    .category-header i:first-child {\n      width: 16px;\n      text-align: center;\n      color: #999;\n    }\n\n    .category-header .fa-folder,\n    .category-header .fa-folder-open {\n      color: #ffc107;\n    }\n\n    .category-header.uncategorized .fa-inbox {\n      color: #999;\n    }\n\n    .category-name {\n      flex: 1;\n      font-weight: 500;\n      color: #333;\n    }\n\n    .category-count {\n      font-size: 12px;\n      color: #999;\n      background: #f0f0f0;\n      padding: 2px 8px;\n      border-radius: 10px;\n    }\n\n    .category-lists {\n      border-top: 1px solid #f0f0f0;\n    }\n\n    .hierarchy-row {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 16px 12px 40px;\n      cursor: pointer;\n      transition: background 0.2s;\n      outline: none;\n    }\n\n    .hierarchy-row:hover {\n      background: #f5f5f5;\n    }\n\n    .hierarchy-row:focus {\n      background: #e3f2fd;\n    }\n\n    .hierarchy-row:focus-visible {\n      background: #e3f2fd;\n      box-shadow: inset 3px 0 0 #2196F3;\n    }\n\n    .list-info {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .list-meta {\n      font-size: 12px;\n      color: #999;\n    }\n\n    .list-actions {\n      display: flex;\n      gap: 4px;\n      opacity: 0;\n      transition: opacity 0.2s;\n    }\n\n    .hierarchy-row:hover .list-actions {\n      opacity: 1;\n    }\n\n    /* Context Menu */\n    .context-menu-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 999;\n    }\n\n    .context-menu {\n      position: fixed;\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 4px 16px rgba(0,0,0,0.15);\n      min-width: 160px;\n      padding: 4px 0;\n      z-index: 1000;\n    }\n\n    .menu-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      width: 100%;\n      padding: 10px 16px;\n      background: none;\n      border: none;\n      text-align: left;\n      font-size: 14px;\n      color: #333;\n      cursor: pointer;\n      transition: background 0.15s;\n    }\n\n    .menu-item:hover {\n      background: #f5f5f5;\n    }\n\n    .menu-item.danger {\n      color: #d32f2f;\n    }\n\n    .menu-item.danger:hover {\n      background: #ffebee;\n    }\n\n    .menu-divider {\n      height: 1px;\n      background: #e0e0e0;\n      margin: 4px 0;\n    }\n\n    /* Modal Styles */\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      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n      width: 500px;\n      max-width: 90vw;\n      max-height: 90vh;\n      overflow: hidden;\n      z-index: 1001;\n    }\n\n    .confirm-dialog {\n      width: 400px;\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: 18px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .modal-close {\n      background: none;\n      border: none;\n      padding: 4px 8px;\n      color: #999;\n      cursor: pointer;\n      border-radius: 4px;\n    }\n\n    .modal-close:hover {\n      background: #f0f0f0;\n      color: #666;\n    }\n\n    .modal-body {\n      padding: 20px;\n      max-height: 60vh;\n      overflow-y: auto;\n    }\n\n    .modal-body p {\n      margin: 0 0 8px;\n      color: #333;\n    }\n\n    .warning-text {\n      color: #d32f2f !important;\n      font-size: 13px;\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: #2196F3;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-primary:hover:not(:disabled) {\n      background: #1976D2;\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      transition: background 0.2s;\n    }\n\n    .btn-secondary:hover:not(:disabled) {\n      background: #f5f5f5;\n    }\n\n    .btn-danger {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 20px;\n      background: #d32f2f;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-danger:hover:not(:disabled) {\n      background: #c62828;\n    }\n\n    /* Form Styles */\n    .form-group {\n      margin-bottom: 16px;\n    }\n\n    .form-group:last-child {\n      margin-bottom: 0;\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      transition: border-color 0.2s, box-shadow 0.2s;\n      box-sizing: border-box;\n    }\n\n    .form-input:focus {\n      outline: none;\n      border-color: #2196F3;\n      box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n    }\n\n    .form-input:disabled {\n      background: #f5f5f5;\n      color: #999;\n    }\n\n    textarea.form-input {\n      resize: vertical;\n      min-height: 80px;\n    }\n\n    select.form-input {\n      cursor: pointer;\n    }\n\n    .custom-select-wrapper {\n      position: relative;\n    }\n\n    /* Portal Dropdown */\n    .entity-dropdown-portal {\n      position: fixed;\n      z-index: 10002;\n    }\n\n    .entity-dropdown-backdrop {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: -1;\n    }\n\n    .entity-dropdown-content {\n      max-height: 200px;\n      overflow-y: auto;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n    }\n\n    .entity-dropdown-content.open-above {\n      position: absolute;\n      bottom: 0;\n    }\n\n    .dropdown-item {\n      padding: 10px 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n      font-size: 14px;\n      color: #333;\n    }\n\n    .dropdown-item:hover {\n      background: #e3f2fd;\n    }\n\n    .dropdown-item:first-child {\n      border-radius: 6px 6px 0 0;\n    }\n\n    .dropdown-item:last-child {\n      border-radius: 0 0 6px 6px;\n    }\n\n    .dropdown-empty {\n      padding: 10px 12px;\n      color: #999;\n      font-style: italic;\n    }\n\n    /* Responsive */\n    @media (max-width: 768px) {\n      .header-row {\n        flex-direction: column;\n        gap: 12px;\n        align-items: stretch;\n      }\n\n      .btn-create {\n        width: 100%;\n        justify-content: center;\n      }\n\n      .header-actions {\n        flex-direction: column;\n        align-items: stretch;\n      }\n\n      .search-box {\n        max-width: none;\n      }\n\n      .filter-group {\n        width: 100%;\n      }\n\n      .filter-select {\n        flex: 1;\n        width: 100%;\n      }\n\n      .view-toggle-group {\n        justify-content: center;\n      }\n\n      .lists-table {\n        overflow-x: auto;\n      }\n\n      .col-entity, .col-items, .col-updated {\n        display: none;\n      }\n\n      .lists-grid {\n        grid-template-columns: 1fr;\n      }\n\n      .modal-dialog {\n        width: 95vw;\n      }\n    }\n  "], encapsulation: 2 });
+        } }, dependencies: [i4.NgTemplateOutlet, i5.NgSelectOption, i5.ɵNgSelectMultipleOption, i5.DefaultValueAccessor, i5.SelectControlValueAccessor, i5.NgControlStatus, i5.NgModel, i6.LoadingComponent, i3.ListShareDialogComponent], styles: ["\n    :host {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      height: 100%;\n    }\n\n    .lists-browse-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: var(--mj-bg-surface);\n      overflow: hidden;\n    }\n\n    /* Header */\n    .browse-header {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      padding: 16px 24px;\n      background: var(--mj-bg-surface-card);\n      border-bottom: 1px solid var(--mj-border-default);\n      flex-shrink: 0;\n    }\n\n    .header-row {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      gap: 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-actions {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      flex-wrap: wrap;\n    }\n\n    .search-box {\n      position: relative;\n      display: flex;\n      align-items: center;\n      flex: 1;\n      min-width: 200px;\n      max-width: 300px;\n    }\n\n    .search-box i.fa-search {\n      position: absolute;\n      left: 12px;\n      color: var(--mj-text-muted);\n    }\n\n    .search-box input {\n      padding: 8px 36px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 20px;\n      font-size: 14px;\n      width: 100%;\n      transition: border-color 0.2s, box-shadow 0.2s;\n    }\n\n    .search-box 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    .clear-search {\n      position: absolute;\n      right: 8px;\n      background: none;\n      border: none;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n    }\n\n    .filter-group {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .filter-group label {\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n    }\n\n    .filter-select {\n      padding: 8px 12px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      font-size: 14px;\n      background: var(--mj-bg-surface-card);\n      cursor: pointer;\n      min-width: 120px;\n    }\n\n    .filter-select: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    .sort-select {\n      min-width: 140px;\n    }\n\n    .view-toggle-group {\n      display: flex;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      overflow: hidden;\n    }\n\n    .view-toggle {\n      padding: 8px 12px;\n      background: var(--mj-bg-surface-card);\n      border: none;\n      border-right: 1px solid var(--mj-border-default);\n      color: var(--mj-text-secondary);\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .view-toggle:last-child {\n      border-right: none;\n    }\n\n    .view-toggle:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .view-toggle.active {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .btn-create {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-create:hover {\n      background: var(--mj-brand-primary-hover);\n    }\n\n    /* Loading */\n    .loading-container {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex: 1;\n    }\n\n    /* Empty State */\n    .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      flex: 1;\n      padding: 48px 40px;\n      text-align: center;\n      max-width: 480px;\n      margin: 0 auto;\n    }\n\n    .empty-state-icon-wrapper {\n      position: relative;\n      margin-bottom: 24px;\n    }\n\n    .empty-state-icon-wrapper .icon-bg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 120px;\n      height: 120px;\n      border-radius: 50%;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    }\n\n    .empty-state-icon-wrapper > i {\n      position: relative;\n      font-size: 56px;\n      color: var(--mj-brand-primary);\n      z-index: 1;\n    }\n\n    .empty-state-icon-wrapper.search > i {\n      font-size: 48px;\n      color: var(--mj-text-disabled);\n    }\n\n    .empty-state h3 {\n      margin: 0 0 12px;\n      font-size: 22px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .empty-state p {\n      margin: 0 0 8px;\n      color: var(--mj-text-secondary);\n      font-size: 15px;\n      line-height: 1.5;\n    }\n\n    .empty-state p:last-of-type {\n      margin-bottom: 24px;\n    }\n\n    .empty-hint {\n      color: var(--mj-text-muted) !important;\n      font-size: 13px !important;\n    }\n\n    .empty-state-features {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      margin-bottom: 28px;\n      text-align: left;\n    }\n\n    .feature-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      font-size: 14px;\n      color: var(--mj-text-secondary);\n    }\n\n    .feature-item i {\n      font-size: 14px !important;\n      color: var(--mj-status-success) !important;\n    }\n\n    .btn-create-large {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 14px 28px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      border-radius: 8px;\n      font-size: 15px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s;\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    }\n\n    .btn-create-large:hover {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n    }\n\n    .btn-clear {\n      padding: 10px 20px;\n      background: var(--mj-bg-surface-sunken);\n      border: none;\n      border-radius: 6px;\n      color: var(--mj-text-secondary);\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-clear:hover {\n      background: var(--mj-border-default);\n    }\n\n    /* Content */\n    .browse-content {\n      flex: 1;\n      overflow-y: auto;\n      padding: 16px 24px;\n    }\n\n    .results-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 16px;\n    }\n\n    .result-count {\n      font-size: 14px;\n      color: var(--mj-text-secondary);\n    }\n\n    .sort-options {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .sort-options label {\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n    }\n\n    /* Table View */\n    .lists-table {\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      overflow: hidden;\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .lists-table table {\n      width: 100%;\n      border-collapse: collapse;\n    }\n\n    .lists-table th {\n      text-align: left;\n      padding: 12px 16px;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-secondary);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      background: var(--mj-bg-surface-sunken);\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .lists-table td {\n      padding: 12px 16px;\n      border-bottom: 1px solid var(--mj-border-default);\n      font-size: 14px;\n      color: var(--mj-text-primary);\n    }\n\n    .list-row {\n      cursor: pointer;\n      transition: background 0.15s;\n      outline: none;\n    }\n\n    .list-row:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .list-row:focus {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    }\n\n    .list-row:focus-visible {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      box-shadow: inset 3px 0 0 var(--mj-brand-primary);\n    }\n\n    .list-row:last-child td {\n      border-bottom: none;\n    }\n\n    .sr-only {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n\n    .col-name { width: 30%; }\n    .col-entity { width: 15%; }\n    .col-items { width: 8%; text-align: center; }\n    .col-sharing { width: 8%; text-align: center; }\n    .col-owner { width: 14%; }\n    .col-updated { width: 15%; }\n    .col-actions { width: 10%; text-align: right; }\n\n    /* Sharing indicators */\n    .sharing-indicator {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      color: var(--mj-brand-primary);\n      font-size: 13px;\n    }\n\n    .sharing-indicator i {\n      font-size: 14px;\n    }\n\n    .share-count {\n      font-weight: 500;\n    }\n\n    .sharing-private {\n      color: var(--mj-text-muted);\n      font-size: 13px;\n    }\n\n    .sharing-badge {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 24px;\n      height: 24px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      border-radius: 50%;\n      color: var(--mj-brand-primary);\n      font-size: 11px;\n    }\n\n    .card-footer-right {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .name-cell {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .list-icon {\n      width: 36px;\n      height: 36px;\n      border-radius: 6px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--mj-text-inverse);\n      font-size: 14px;\n      flex-shrink: 0;\n    }\n\n    .name-content {\n      display: flex;\n      flex-direction: column;\n      min-width: 0;\n    }\n\n    .list-name {\n      font-weight: 500;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .list-desc {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .entity-badge {\n      display: inline-block;\n      padding: 2px 8px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      border-radius: 4px;\n      font-size: 12px;\n      color: var(--mj-brand-primary-hover);\n    }\n\n    .owner-name {\n      color: var(--mj-text-secondary);\n    }\n\n    .owner-name.is-me {\n      color: var(--mj-brand-primary);\n      font-weight: 500;\n    }\n\n    .action-btn {\n      background: none;\n      border: none;\n      padding: 6px 10px;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.15s;\n    }\n\n    .action-btn:hover {\n      background: var(--mj-border-default);\n      color: var(--mj-text-secondary);\n    }\n\n    /* Card View */\n    .lists-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n      gap: 16px;\n    }\n\n    .list-card {\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-sm);\n      overflow: hidden;\n      cursor: pointer;\n      transition: transform 0.2s, box-shadow 0.2s, outline 0.1s;\n      outline: 2px solid transparent;\n    }\n\n    .list-card:hover {\n      transform: translateY(-2px);\n      box-shadow: var(--mj-shadow-md);\n    }\n\n    .list-card:focus {\n      outline: 2px solid var(--mj-brand-primary);\n      outline-offset: 2px;\n    }\n\n    .list-card:focus:not(:focus-visible) {\n      outline: none;\n    }\n\n    .list-card:focus-visible {\n      outline: 2px solid var(--mj-brand-primary);\n      outline-offset: 2px;\n    }\n\n    .card-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n      padding: 16px 16px 0;\n    }\n\n    .card-icon {\n      width: 40px;\n      height: 40px;\n      border-radius: 8px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--mj-text-inverse);\n      font-size: 18px;\n    }\n\n    .menu-btn {\n      background: none;\n      border: none;\n      padding: 4px 8px;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      border-radius: 4px;\n    }\n\n    .menu-btn:hover {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-secondary);\n    }\n\n    .card-body {\n      padding: 12px 16px;\n    }\n\n    .card-title {\n      margin: 0 0 4px;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .card-description {\n      margin: 0 0 12px;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n\n    .card-meta {\n      display: flex;\n      gap: 16px;\n    }\n\n    .meta-item {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: 12px;\n      color: var(--mj-text-muted);\n    }\n\n    .card-footer {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px 16px;\n      border-top: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .owner-tag {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n      color: var(--mj-text-secondary);\n    }\n\n    .owner-tag.is-me {\n      color: var(--mj-brand-primary);\n    }\n\n    .date-info {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n    }\n\n    /* Hierarchy View */\n    .category-tree {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .category-section {\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .category-header {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 16px;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .category-header:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .category-header i:first-child {\n      width: 16px;\n      text-align: center;\n      color: var(--mj-text-muted);\n    }\n\n    .category-header .fa-folder,\n    .category-header .fa-folder-open {\n      color: var(--mj-status-warning);\n    }\n\n    .category-header.uncategorized .fa-inbox {\n      color: var(--mj-text-muted);\n    }\n\n    .category-name {\n      flex: 1;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .category-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    .category-lists {\n      border-top: 1px solid var(--mj-border-default);\n    }\n\n    .hierarchy-row {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 16px 12px 40px;\n      cursor: pointer;\n      transition: background 0.2s;\n      outline: none;\n    }\n\n    .hierarchy-row:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .hierarchy-row:focus {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    }\n\n    .hierarchy-row:focus-visible {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      box-shadow: inset 3px 0 0 var(--mj-brand-primary);\n    }\n\n    .list-info {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .list-meta {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n    }\n\n    .list-actions {\n      display: flex;\n      gap: 4px;\n      opacity: 0;\n      transition: opacity 0.2s;\n    }\n\n    .hierarchy-row:hover .list-actions {\n      opacity: 1;\n    }\n\n    /* Context Menu */\n    .context-menu-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 999;\n    }\n\n    .context-menu {\n      position: fixed;\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-md);\n      min-width: 160px;\n      padding: 4px 0;\n      z-index: 1000;\n    }\n\n    .menu-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      width: 100%;\n      padding: 10px 16px;\n      background: none;\n      border: none;\n      text-align: left;\n      font-size: 14px;\n      color: var(--mj-text-primary);\n      cursor: pointer;\n      transition: background 0.15s;\n    }\n\n    .menu-item:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .menu-item.danger {\n      color: var(--mj-status-error);\n    }\n\n    .menu-item.danger:hover {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    }\n\n    .menu-divider {\n      height: 1px;\n      background: var(--mj-border-default);\n      margin: 4px 0;\n    }\n\n    /* Modal Styles */\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      box-shadow: var(--mj-shadow-lg);\n      width: 500px;\n      max-width: 90vw;\n      max-height: 90vh;\n      overflow: hidden;\n      z-index: 1001;\n    }\n\n    .confirm-dialog {\n      width: 400px;\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: 18px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .modal-close {\n      background: none;\n      border: none;\n      padding: 4px 8px;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      border-radius: 4px;\n    }\n\n    .modal-close:hover {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-secondary);\n    }\n\n    .modal-body {\n      padding: 20px;\n      max-height: 60vh;\n      overflow-y: auto;\n    }\n\n    .modal-body p {\n      margin: 0 0 8px;\n      color: var(--mj-text-primary);\n    }\n\n    .warning-text {\n      color: var(--mj-status-error) !important;\n      font-size: 13px;\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      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.2s;\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      transition: background 0.2s;\n    }\n\n    .btn-secondary:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .btn-danger {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 20px;\n      background: var(--mj-status-error);\n      color: var(--mj-text-inverse);\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-danger:hover:not(:disabled) {\n      background: color-mix(in srgb, var(--mj-status-error) 85%, black);\n    }\n\n    /* Form Styles */\n    .form-group {\n      margin-bottom: 16px;\n    }\n\n    .form-group:last-child {\n      margin-bottom: 0;\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      transition: border-color 0.2s, box-shadow 0.2s;\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    .form-input:disabled {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-muted);\n    }\n\n    textarea.form-input {\n      resize: vertical;\n      min-height: 80px;\n    }\n\n    select.form-input {\n      cursor: pointer;\n    }\n\n    .custom-select-wrapper {\n      position: relative;\n    }\n\n    /* Portal Dropdown */\n    .entity-dropdown-portal {\n      position: fixed;\n      z-index: 10002;\n    }\n\n    .entity-dropdown-content {\n      max-height: 200px;\n      overflow-y: auto;\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    }\n\n    .entity-dropdown-content.open-above {\n      position: absolute;\n      bottom: 0;\n    }\n\n    .dropdown-item {\n      padding: 10px 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n      font-size: 14px;\n      color: var(--mj-text-primary);\n    }\n\n    .dropdown-item:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    }\n\n    .dropdown-item:first-child {\n      border-radius: 6px 6px 0 0;\n    }\n\n    .dropdown-item:last-child {\n      border-radius: 0 0 6px 6px;\n    }\n\n    .dropdown-empty {\n      padding: 10px 12px;\n      color: var(--mj-text-muted);\n      font-style: italic;\n    }\n\n    /* Responsive */\n    @media (max-width: 768px) {\n      .header-row {\n        flex-direction: column;\n        gap: 12px;\n        align-items: stretch;\n      }\n\n      .btn-create {\n        width: 100%;\n        justify-content: center;\n      }\n\n      .header-actions {\n        flex-direction: column;\n        align-items: stretch;\n      }\n\n      .search-box {\n        max-width: none;\n      }\n\n      .filter-group {\n        width: 100%;\n      }\n\n      .filter-select {\n        flex: 1;\n        width: 100%;\n      }\n\n      .view-toggle-group {\n        justify-content: center;\n      }\n\n      .lists-table {\n        overflow-x: auto;\n      }\n\n      .col-entity, .col-items, .col-updated {\n        display: none;\n      }\n\n      .lists-grid {\n        grid-template-columns: 1fr;\n      }\n\n      .modal-dialog {\n        width: 95vw;\n      }\n    }\n  "], encapsulation: 2 });
 };
 ListsBrowseResource = __decorate([
     RegisterClass(BaseResourceComponent, 'ListsBrowseResource')
@@ -2022,12 +2024,11 @@ export { ListsBrowseResource };
           [style.left.px]="entityDropdownPosition.left"
           [style.width.px]="entityDropdownPosition.width"
           [class.dropdown-above]="entityDropdownPosition.openAbove">
-          <div class="entity-dropdown-backdrop" (click)="closeEntityDropdown()"></div>
           <div class="entity-dropdown-content" [class.open-above]="entityDropdownPosition.openAbove">
             @for (entity of filteredEntitiesList; track entity) {
               <div
                 class="dropdown-item"
-                (click)="selectEntity(entity)">
+                (mousedown)="selectEntity(entity); $event.preventDefault()">
                 {{entity.Name}}
               </div>
             }
@@ -2040,7 +2041,7 @@ export { ListsBrowseResource };
         </div>
       }
     </div>
-    `, encapsulation: ViewEncapsulation.None, styles: ["\n    :host {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      height: 100%;\n    }\n\n    .lists-browse-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #f5f7fa;\n      overflow: hidden;\n    }\n\n    /* Header */\n    .browse-header {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      padding: 16px 24px;\n      background: white;\n      border-bottom: 1px solid #e0e0e0;\n      flex-shrink: 0;\n    }\n\n    .header-row {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-title i {\n      font-size: 24px;\n      color: #2196F3;\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .header-actions {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      flex-wrap: wrap;\n    }\n\n    .search-box {\n      position: relative;\n      display: flex;\n      align-items: center;\n      flex: 1;\n      min-width: 200px;\n      max-width: 300px;\n    }\n\n    .search-box i.fa-search {\n      position: absolute;\n      left: 12px;\n      color: #999;\n    }\n\n    .search-box input {\n      padding: 8px 36px;\n      border: 1px solid #ddd;\n      border-radius: 20px;\n      font-size: 14px;\n      width: 100%;\n      transition: border-color 0.2s, box-shadow 0.2s;\n    }\n\n    .search-box input:focus {\n      outline: none;\n      border-color: #2196F3;\n      box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n    }\n\n    .clear-search {\n      position: absolute;\n      right: 8px;\n      background: none;\n      border: none;\n      color: #999;\n      cursor: pointer;\n    }\n\n    .filter-group {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .filter-group label {\n      font-size: 13px;\n      color: #666;\n    }\n\n    .filter-select {\n      padding: 8px 12px;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      background: white;\n      cursor: pointer;\n      min-width: 120px;\n    }\n\n    .filter-select:focus {\n      outline: none;\n      border-color: #2196F3;\n      box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n    }\n\n    .sort-select {\n      min-width: 140px;\n    }\n\n    .view-toggle-group {\n      display: flex;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      overflow: hidden;\n    }\n\n    .view-toggle {\n      padding: 8px 12px;\n      background: white;\n      border: none;\n      border-right: 1px solid #ddd;\n      color: #666;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .view-toggle:last-child {\n      border-right: none;\n    }\n\n    .view-toggle:hover {\n      background: #f5f5f5;\n    }\n\n    .view-toggle.active {\n      background: #2196F3;\n      color: white;\n    }\n\n    .btn-create {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #2196F3;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-create:hover {\n      background: #1976D2;\n    }\n\n    /* Loading */\n    .loading-container {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex: 1;\n    }\n\n    /* Empty State */\n    .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      flex: 1;\n      padding: 48px 40px;\n      text-align: center;\n      max-width: 480px;\n      margin: 0 auto;\n    }\n\n    .empty-state-icon-wrapper {\n      position: relative;\n      margin-bottom: 24px;\n    }\n\n    .empty-state-icon-wrapper .icon-bg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 120px;\n      height: 120px;\n      border-radius: 50%;\n      background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.05) 100%);\n    }\n\n    .empty-state-icon-wrapper > i {\n      position: relative;\n      font-size: 56px;\n      color: #2196F3;\n      z-index: 1;\n    }\n\n    .empty-state-icon-wrapper.search > i {\n      font-size: 48px;\n      color: #9e9e9e;\n    }\n\n    .empty-state h3 {\n      margin: 0 0 12px;\n      font-size: 22px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .empty-state p {\n      margin: 0 0 8px;\n      color: #666;\n      font-size: 15px;\n      line-height: 1.5;\n    }\n\n    .empty-state p:last-of-type {\n      margin-bottom: 24px;\n    }\n\n    .empty-hint {\n      color: #999 !important;\n      font-size: 13px !important;\n    }\n\n    .empty-state-features {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      margin-bottom: 28px;\n      text-align: left;\n    }\n\n    .feature-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      font-size: 14px;\n      color: #555;\n    }\n\n    .feature-item i {\n      font-size: 14px !important;\n      color: #4CAF50 !important;\n    }\n\n    .btn-create-large {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 14px 28px;\n      background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);\n      color: white;\n      border: none;\n      border-radius: 8px;\n      font-size: 15px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s;\n      box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n    }\n\n    .btn-create-large:hover {\n      background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);\n    }\n\n    .btn-clear {\n      padding: 10px 20px;\n      background: #f0f0f0;\n      border: none;\n      border-radius: 6px;\n      color: #666;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-clear:hover {\n      background: #e0e0e0;\n    }\n\n    /* Content */\n    .browse-content {\n      flex: 1;\n      overflow-y: auto;\n      padding: 16px 24px;\n    }\n\n    .results-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 16px;\n    }\n\n    .result-count {\n      font-size: 14px;\n      color: #666;\n    }\n\n    .sort-options {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .sort-options label {\n      font-size: 13px;\n      color: #666;\n    }\n\n    /* Table View */\n    .lists-table {\n      background: white;\n      border-radius: 8px;\n      overflow: hidden;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n    }\n\n    .lists-table table {\n      width: 100%;\n      border-collapse: collapse;\n    }\n\n    .lists-table th {\n      text-align: left;\n      padding: 12px 16px;\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      background: #fafafa;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .lists-table td {\n      padding: 12px 16px;\n      border-bottom: 1px solid #f0f0f0;\n      font-size: 14px;\n      color: #333;\n    }\n\n    .list-row {\n      cursor: pointer;\n      transition: background 0.15s;\n      outline: none;\n    }\n\n    .list-row:hover {\n      background: #f5f5f5;\n    }\n\n    .list-row:focus {\n      background: #e8f4fd;\n    }\n\n    .list-row:focus-visible {\n      background: #e3f2fd;\n      box-shadow: inset 3px 0 0 #2196F3;\n    }\n\n    .list-row:last-child td {\n      border-bottom: none;\n    }\n\n    .sr-only {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n\n    .col-name { width: 30%; }\n    .col-entity { width: 15%; }\n    .col-items { width: 8%; text-align: center; }\n    .col-sharing { width: 8%; text-align: center; }\n    .col-owner { width: 14%; }\n    .col-updated { width: 15%; }\n    .col-actions { width: 10%; text-align: right; }\n\n    /* Sharing indicators */\n    .sharing-indicator {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      color: #2196F3;\n      font-size: 13px;\n    }\n\n    .sharing-indicator i {\n      font-size: 14px;\n    }\n\n    .share-count {\n      font-weight: 500;\n    }\n\n    .sharing-private {\n      color: #999;\n      font-size: 13px;\n    }\n\n    .sharing-badge {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 24px;\n      height: 24px;\n      background: #e3f2fd;\n      border-radius: 50%;\n      color: #2196F3;\n      font-size: 11px;\n    }\n\n    .card-footer-right {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .name-cell {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .list-icon {\n      width: 36px;\n      height: 36px;\n      border-radius: 6px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: white;\n      font-size: 14px;\n      flex-shrink: 0;\n    }\n\n    .name-content {\n      display: flex;\n      flex-direction: column;\n      min-width: 0;\n    }\n\n    .list-name {\n      font-weight: 500;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .list-desc {\n      font-size: 12px;\n      color: #999;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .entity-badge {\n      display: inline-block;\n      padding: 2px 8px;\n      background: #e8f4fd;\n      border-radius: 4px;\n      font-size: 12px;\n      color: #1976D2;\n    }\n\n    .owner-name {\n      color: #666;\n    }\n\n    .owner-name.is-me {\n      color: #2196F3;\n      font-weight: 500;\n    }\n\n    .action-btn {\n      background: none;\n      border: none;\n      padding: 6px 10px;\n      color: #999;\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.15s;\n    }\n\n    .action-btn:hover {\n      background: #e0e0e0;\n      color: #666;\n    }\n\n    /* Card View */\n    .lists-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n      gap: 16px;\n    }\n\n    .list-card {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n      overflow: hidden;\n      cursor: pointer;\n      transition: transform 0.2s, box-shadow 0.2s, outline 0.1s;\n      outline: 2px solid transparent;\n    }\n\n    .list-card:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 4px 12px rgba(0,0,0,0.12);\n    }\n\n    .list-card:focus {\n      outline: 2px solid #2196F3;\n      outline-offset: 2px;\n    }\n\n    .list-card:focus:not(:focus-visible) {\n      outline: none;\n    }\n\n    .list-card:focus-visible {\n      outline: 2px solid #2196F3;\n      outline-offset: 2px;\n    }\n\n    .card-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n      padding: 16px 16px 0;\n    }\n\n    .card-icon {\n      width: 40px;\n      height: 40px;\n      border-radius: 8px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: white;\n      font-size: 18px;\n    }\n\n    .menu-btn {\n      background: none;\n      border: none;\n      padding: 4px 8px;\n      color: #999;\n      cursor: pointer;\n      border-radius: 4px;\n    }\n\n    .menu-btn:hover {\n      background: #f5f5f5;\n      color: #666;\n    }\n\n    .card-body {\n      padding: 12px 16px;\n    }\n\n    .card-title {\n      margin: 0 0 4px;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .card-description {\n      margin: 0 0 12px;\n      font-size: 13px;\n      color: #666;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n\n    .card-meta {\n      display: flex;\n      gap: 16px;\n    }\n\n    .meta-item {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: 12px;\n      color: #999;\n    }\n\n    .card-footer {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px 16px;\n      border-top: 1px solid #f0f0f0;\n      background: #fafafa;\n    }\n\n    .owner-tag {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n      color: #666;\n    }\n\n    .owner-tag.is-me {\n      color: #2196F3;\n    }\n\n    .date-info {\n      font-size: 12px;\n      color: #999;\n    }\n\n    /* Hierarchy View */\n    .category-tree {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .category-section {\n      background: white;\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .category-header {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 16px;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .category-header:hover {\n      background: #f5f5f5;\n    }\n\n    .category-header i:first-child {\n      width: 16px;\n      text-align: center;\n      color: #999;\n    }\n\n    .category-header .fa-folder,\n    .category-header .fa-folder-open {\n      color: #ffc107;\n    }\n\n    .category-header.uncategorized .fa-inbox {\n      color: #999;\n    }\n\n    .category-name {\n      flex: 1;\n      font-weight: 500;\n      color: #333;\n    }\n\n    .category-count {\n      font-size: 12px;\n      color: #999;\n      background: #f0f0f0;\n      padding: 2px 8px;\n      border-radius: 10px;\n    }\n\n    .category-lists {\n      border-top: 1px solid #f0f0f0;\n    }\n\n    .hierarchy-row {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 16px 12px 40px;\n      cursor: pointer;\n      transition: background 0.2s;\n      outline: none;\n    }\n\n    .hierarchy-row:hover {\n      background: #f5f5f5;\n    }\n\n    .hierarchy-row:focus {\n      background: #e3f2fd;\n    }\n\n    .hierarchy-row:focus-visible {\n      background: #e3f2fd;\n      box-shadow: inset 3px 0 0 #2196F3;\n    }\n\n    .list-info {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .list-meta {\n      font-size: 12px;\n      color: #999;\n    }\n\n    .list-actions {\n      display: flex;\n      gap: 4px;\n      opacity: 0;\n      transition: opacity 0.2s;\n    }\n\n    .hierarchy-row:hover .list-actions {\n      opacity: 1;\n    }\n\n    /* Context Menu */\n    .context-menu-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 999;\n    }\n\n    .context-menu {\n      position: fixed;\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 4px 16px rgba(0,0,0,0.15);\n      min-width: 160px;\n      padding: 4px 0;\n      z-index: 1000;\n    }\n\n    .menu-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      width: 100%;\n      padding: 10px 16px;\n      background: none;\n      border: none;\n      text-align: left;\n      font-size: 14px;\n      color: #333;\n      cursor: pointer;\n      transition: background 0.15s;\n    }\n\n    .menu-item:hover {\n      background: #f5f5f5;\n    }\n\n    .menu-item.danger {\n      color: #d32f2f;\n    }\n\n    .menu-item.danger:hover {\n      background: #ffebee;\n    }\n\n    .menu-divider {\n      height: 1px;\n      background: #e0e0e0;\n      margin: 4px 0;\n    }\n\n    /* Modal Styles */\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      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n      width: 500px;\n      max-width: 90vw;\n      max-height: 90vh;\n      overflow: hidden;\n      z-index: 1001;\n    }\n\n    .confirm-dialog {\n      width: 400px;\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: 18px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .modal-close {\n      background: none;\n      border: none;\n      padding: 4px 8px;\n      color: #999;\n      cursor: pointer;\n      border-radius: 4px;\n    }\n\n    .modal-close:hover {\n      background: #f0f0f0;\n      color: #666;\n    }\n\n    .modal-body {\n      padding: 20px;\n      max-height: 60vh;\n      overflow-y: auto;\n    }\n\n    .modal-body p {\n      margin: 0 0 8px;\n      color: #333;\n    }\n\n    .warning-text {\n      color: #d32f2f !important;\n      font-size: 13px;\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: #2196F3;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-primary:hover:not(:disabled) {\n      background: #1976D2;\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      transition: background 0.2s;\n    }\n\n    .btn-secondary:hover:not(:disabled) {\n      background: #f5f5f5;\n    }\n\n    .btn-danger {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 20px;\n      background: #d32f2f;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-danger:hover:not(:disabled) {\n      background: #c62828;\n    }\n\n    /* Form Styles */\n    .form-group {\n      margin-bottom: 16px;\n    }\n\n    .form-group:last-child {\n      margin-bottom: 0;\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      transition: border-color 0.2s, box-shadow 0.2s;\n      box-sizing: border-box;\n    }\n\n    .form-input:focus {\n      outline: none;\n      border-color: #2196F3;\n      box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n    }\n\n    .form-input:disabled {\n      background: #f5f5f5;\n      color: #999;\n    }\n\n    textarea.form-input {\n      resize: vertical;\n      min-height: 80px;\n    }\n\n    select.form-input {\n      cursor: pointer;\n    }\n\n    .custom-select-wrapper {\n      position: relative;\n    }\n\n    /* Portal Dropdown */\n    .entity-dropdown-portal {\n      position: fixed;\n      z-index: 10002;\n    }\n\n    .entity-dropdown-backdrop {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: -1;\n    }\n\n    .entity-dropdown-content {\n      max-height: 200px;\n      overflow-y: auto;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n    }\n\n    .entity-dropdown-content.open-above {\n      position: absolute;\n      bottom: 0;\n    }\n\n    .dropdown-item {\n      padding: 10px 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n      font-size: 14px;\n      color: #333;\n    }\n\n    .dropdown-item:hover {\n      background: #e3f2fd;\n    }\n\n    .dropdown-item:first-child {\n      border-radius: 6px 6px 0 0;\n    }\n\n    .dropdown-item:last-child {\n      border-radius: 0 0 6px 6px;\n    }\n\n    .dropdown-empty {\n      padding: 10px 12px;\n      color: #999;\n      font-style: italic;\n    }\n\n    /* Responsive */\n    @media (max-width: 768px) {\n      .header-row {\n        flex-direction: column;\n        gap: 12px;\n        align-items: stretch;\n      }\n\n      .btn-create {\n        width: 100%;\n        justify-content: center;\n      }\n\n      .header-actions {\n        flex-direction: column;\n        align-items: stretch;\n      }\n\n      .search-box {\n        max-width: none;\n      }\n\n      .filter-group {\n        width: 100%;\n      }\n\n      .filter-select {\n        flex: 1;\n        width: 100%;\n      }\n\n      .view-toggle-group {\n        justify-content: center;\n      }\n\n      .lists-table {\n        overflow-x: auto;\n      }\n\n      .col-entity, .col-items, .col-updated {\n        display: none;\n      }\n\n      .lists-grid {\n        grid-template-columns: 1fr;\n      }\n\n      .modal-dialog {\n        width: 95vw;\n      }\n    }\n  "] }]
+    `, encapsulation: ViewEncapsulation.None, styles: ["\n    :host {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      height: 100%;\n    }\n\n    .lists-browse-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: var(--mj-bg-surface);\n      overflow: hidden;\n    }\n\n    /* Header */\n    .browse-header {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      padding: 16px 24px;\n      background: var(--mj-bg-surface-card);\n      border-bottom: 1px solid var(--mj-border-default);\n      flex-shrink: 0;\n    }\n\n    .header-row {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      gap: 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-actions {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      flex-wrap: wrap;\n    }\n\n    .search-box {\n      position: relative;\n      display: flex;\n      align-items: center;\n      flex: 1;\n      min-width: 200px;\n      max-width: 300px;\n    }\n\n    .search-box i.fa-search {\n      position: absolute;\n      left: 12px;\n      color: var(--mj-text-muted);\n    }\n\n    .search-box input {\n      padding: 8px 36px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 20px;\n      font-size: 14px;\n      width: 100%;\n      transition: border-color 0.2s, box-shadow 0.2s;\n    }\n\n    .search-box 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    .clear-search {\n      position: absolute;\n      right: 8px;\n      background: none;\n      border: none;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n    }\n\n    .filter-group {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .filter-group label {\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n    }\n\n    .filter-select {\n      padding: 8px 12px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      font-size: 14px;\n      background: var(--mj-bg-surface-card);\n      cursor: pointer;\n      min-width: 120px;\n    }\n\n    .filter-select: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    .sort-select {\n      min-width: 140px;\n    }\n\n    .view-toggle-group {\n      display: flex;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      overflow: hidden;\n    }\n\n    .view-toggle {\n      padding: 8px 12px;\n      background: var(--mj-bg-surface-card);\n      border: none;\n      border-right: 1px solid var(--mj-border-default);\n      color: var(--mj-text-secondary);\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .view-toggle:last-child {\n      border-right: none;\n    }\n\n    .view-toggle:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .view-toggle.active {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .btn-create {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-create:hover {\n      background: var(--mj-brand-primary-hover);\n    }\n\n    /* Loading */\n    .loading-container {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex: 1;\n    }\n\n    /* Empty State */\n    .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      flex: 1;\n      padding: 48px 40px;\n      text-align: center;\n      max-width: 480px;\n      margin: 0 auto;\n    }\n\n    .empty-state-icon-wrapper {\n      position: relative;\n      margin-bottom: 24px;\n    }\n\n    .empty-state-icon-wrapper .icon-bg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 120px;\n      height: 120px;\n      border-radius: 50%;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    }\n\n    .empty-state-icon-wrapper > i {\n      position: relative;\n      font-size: 56px;\n      color: var(--mj-brand-primary);\n      z-index: 1;\n    }\n\n    .empty-state-icon-wrapper.search > i {\n      font-size: 48px;\n      color: var(--mj-text-disabled);\n    }\n\n    .empty-state h3 {\n      margin: 0 0 12px;\n      font-size: 22px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .empty-state p {\n      margin: 0 0 8px;\n      color: var(--mj-text-secondary);\n      font-size: 15px;\n      line-height: 1.5;\n    }\n\n    .empty-state p:last-of-type {\n      margin-bottom: 24px;\n    }\n\n    .empty-hint {\n      color: var(--mj-text-muted) !important;\n      font-size: 13px !important;\n    }\n\n    .empty-state-features {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      margin-bottom: 28px;\n      text-align: left;\n    }\n\n    .feature-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      font-size: 14px;\n      color: var(--mj-text-secondary);\n    }\n\n    .feature-item i {\n      font-size: 14px !important;\n      color: var(--mj-status-success) !important;\n    }\n\n    .btn-create-large {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 14px 28px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      border-radius: 8px;\n      font-size: 15px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s;\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    }\n\n    .btn-create-large:hover {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n    }\n\n    .btn-clear {\n      padding: 10px 20px;\n      background: var(--mj-bg-surface-sunken);\n      border: none;\n      border-radius: 6px;\n      color: var(--mj-text-secondary);\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-clear:hover {\n      background: var(--mj-border-default);\n    }\n\n    /* Content */\n    .browse-content {\n      flex: 1;\n      overflow-y: auto;\n      padding: 16px 24px;\n    }\n\n    .results-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 16px;\n    }\n\n    .result-count {\n      font-size: 14px;\n      color: var(--mj-text-secondary);\n    }\n\n    .sort-options {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .sort-options label {\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n    }\n\n    /* Table View */\n    .lists-table {\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      overflow: hidden;\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .lists-table table {\n      width: 100%;\n      border-collapse: collapse;\n    }\n\n    .lists-table th {\n      text-align: left;\n      padding: 12px 16px;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-secondary);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      background: var(--mj-bg-surface-sunken);\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .lists-table td {\n      padding: 12px 16px;\n      border-bottom: 1px solid var(--mj-border-default);\n      font-size: 14px;\n      color: var(--mj-text-primary);\n    }\n\n    .list-row {\n      cursor: pointer;\n      transition: background 0.15s;\n      outline: none;\n    }\n\n    .list-row:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .list-row:focus {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    }\n\n    .list-row:focus-visible {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      box-shadow: inset 3px 0 0 var(--mj-brand-primary);\n    }\n\n    .list-row:last-child td {\n      border-bottom: none;\n    }\n\n    .sr-only {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n\n    .col-name { width: 30%; }\n    .col-entity { width: 15%; }\n    .col-items { width: 8%; text-align: center; }\n    .col-sharing { width: 8%; text-align: center; }\n    .col-owner { width: 14%; }\n    .col-updated { width: 15%; }\n    .col-actions { width: 10%; text-align: right; }\n\n    /* Sharing indicators */\n    .sharing-indicator {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      color: var(--mj-brand-primary);\n      font-size: 13px;\n    }\n\n    .sharing-indicator i {\n      font-size: 14px;\n    }\n\n    .share-count {\n      font-weight: 500;\n    }\n\n    .sharing-private {\n      color: var(--mj-text-muted);\n      font-size: 13px;\n    }\n\n    .sharing-badge {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 24px;\n      height: 24px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      border-radius: 50%;\n      color: var(--mj-brand-primary);\n      font-size: 11px;\n    }\n\n    .card-footer-right {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .name-cell {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .list-icon {\n      width: 36px;\n      height: 36px;\n      border-radius: 6px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--mj-text-inverse);\n      font-size: 14px;\n      flex-shrink: 0;\n    }\n\n    .name-content {\n      display: flex;\n      flex-direction: column;\n      min-width: 0;\n    }\n\n    .list-name {\n      font-weight: 500;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .list-desc {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .entity-badge {\n      display: inline-block;\n      padding: 2px 8px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      border-radius: 4px;\n      font-size: 12px;\n      color: var(--mj-brand-primary-hover);\n    }\n\n    .owner-name {\n      color: var(--mj-text-secondary);\n    }\n\n    .owner-name.is-me {\n      color: var(--mj-brand-primary);\n      font-weight: 500;\n    }\n\n    .action-btn {\n      background: none;\n      border: none;\n      padding: 6px 10px;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.15s;\n    }\n\n    .action-btn:hover {\n      background: var(--mj-border-default);\n      color: var(--mj-text-secondary);\n    }\n\n    /* Card View */\n    .lists-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n      gap: 16px;\n    }\n\n    .list-card {\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-sm);\n      overflow: hidden;\n      cursor: pointer;\n      transition: transform 0.2s, box-shadow 0.2s, outline 0.1s;\n      outline: 2px solid transparent;\n    }\n\n    .list-card:hover {\n      transform: translateY(-2px);\n      box-shadow: var(--mj-shadow-md);\n    }\n\n    .list-card:focus {\n      outline: 2px solid var(--mj-brand-primary);\n      outline-offset: 2px;\n    }\n\n    .list-card:focus:not(:focus-visible) {\n      outline: none;\n    }\n\n    .list-card:focus-visible {\n      outline: 2px solid var(--mj-brand-primary);\n      outline-offset: 2px;\n    }\n\n    .card-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n      padding: 16px 16px 0;\n    }\n\n    .card-icon {\n      width: 40px;\n      height: 40px;\n      border-radius: 8px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--mj-text-inverse);\n      font-size: 18px;\n    }\n\n    .menu-btn {\n      background: none;\n      border: none;\n      padding: 4px 8px;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      border-radius: 4px;\n    }\n\n    .menu-btn:hover {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-secondary);\n    }\n\n    .card-body {\n      padding: 12px 16px;\n    }\n\n    .card-title {\n      margin: 0 0 4px;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .card-description {\n      margin: 0 0 12px;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n\n    .card-meta {\n      display: flex;\n      gap: 16px;\n    }\n\n    .meta-item {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: 12px;\n      color: var(--mj-text-muted);\n    }\n\n    .card-footer {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px 16px;\n      border-top: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .owner-tag {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n      color: var(--mj-text-secondary);\n    }\n\n    .owner-tag.is-me {\n      color: var(--mj-brand-primary);\n    }\n\n    .date-info {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n    }\n\n    /* Hierarchy View */\n    .category-tree {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .category-section {\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .category-header {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 16px;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .category-header:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .category-header i:first-child {\n      width: 16px;\n      text-align: center;\n      color: var(--mj-text-muted);\n    }\n\n    .category-header .fa-folder,\n    .category-header .fa-folder-open {\n      color: var(--mj-status-warning);\n    }\n\n    .category-header.uncategorized .fa-inbox {\n      color: var(--mj-text-muted);\n    }\n\n    .category-name {\n      flex: 1;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .category-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    .category-lists {\n      border-top: 1px solid var(--mj-border-default);\n    }\n\n    .hierarchy-row {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 16px 12px 40px;\n      cursor: pointer;\n      transition: background 0.2s;\n      outline: none;\n    }\n\n    .hierarchy-row:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .hierarchy-row:focus {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    }\n\n    .hierarchy-row:focus-visible {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      box-shadow: inset 3px 0 0 var(--mj-brand-primary);\n    }\n\n    .list-info {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .list-meta {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n    }\n\n    .list-actions {\n      display: flex;\n      gap: 4px;\n      opacity: 0;\n      transition: opacity 0.2s;\n    }\n\n    .hierarchy-row:hover .list-actions {\n      opacity: 1;\n    }\n\n    /* Context Menu */\n    .context-menu-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 999;\n    }\n\n    .context-menu {\n      position: fixed;\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-md);\n      min-width: 160px;\n      padding: 4px 0;\n      z-index: 1000;\n    }\n\n    .menu-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      width: 100%;\n      padding: 10px 16px;\n      background: none;\n      border: none;\n      text-align: left;\n      font-size: 14px;\n      color: var(--mj-text-primary);\n      cursor: pointer;\n      transition: background 0.15s;\n    }\n\n    .menu-item:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .menu-item.danger {\n      color: var(--mj-status-error);\n    }\n\n    .menu-item.danger:hover {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    }\n\n    .menu-divider {\n      height: 1px;\n      background: var(--mj-border-default);\n      margin: 4px 0;\n    }\n\n    /* Modal Styles */\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      box-shadow: var(--mj-shadow-lg);\n      width: 500px;\n      max-width: 90vw;\n      max-height: 90vh;\n      overflow: hidden;\n      z-index: 1001;\n    }\n\n    .confirm-dialog {\n      width: 400px;\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: 18px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .modal-close {\n      background: none;\n      border: none;\n      padding: 4px 8px;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      border-radius: 4px;\n    }\n\n    .modal-close:hover {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-secondary);\n    }\n\n    .modal-body {\n      padding: 20px;\n      max-height: 60vh;\n      overflow-y: auto;\n    }\n\n    .modal-body p {\n      margin: 0 0 8px;\n      color: var(--mj-text-primary);\n    }\n\n    .warning-text {\n      color: var(--mj-status-error) !important;\n      font-size: 13px;\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      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.2s;\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      transition: background 0.2s;\n    }\n\n    .btn-secondary:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .btn-danger {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 20px;\n      background: var(--mj-status-error);\n      color: var(--mj-text-inverse);\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-danger:hover:not(:disabled) {\n      background: color-mix(in srgb, var(--mj-status-error) 85%, black);\n    }\n\n    /* Form Styles */\n    .form-group {\n      margin-bottom: 16px;\n    }\n\n    .form-group:last-child {\n      margin-bottom: 0;\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      transition: border-color 0.2s, box-shadow 0.2s;\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    .form-input:disabled {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-muted);\n    }\n\n    textarea.form-input {\n      resize: vertical;\n      min-height: 80px;\n    }\n\n    select.form-input {\n      cursor: pointer;\n    }\n\n    .custom-select-wrapper {\n      position: relative;\n    }\n\n    /* Portal Dropdown */\n    .entity-dropdown-portal {\n      position: fixed;\n      z-index: 10002;\n    }\n\n    .entity-dropdown-content {\n      max-height: 200px;\n      overflow-y: auto;\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    }\n\n    .entity-dropdown-content.open-above {\n      position: absolute;\n      bottom: 0;\n    }\n\n    .dropdown-item {\n      padding: 10px 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n      font-size: 14px;\n      color: var(--mj-text-primary);\n    }\n\n    .dropdown-item:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    }\n\n    .dropdown-item:first-child {\n      border-radius: 6px 6px 0 0;\n    }\n\n    .dropdown-item:last-child {\n      border-radius: 0 0 6px 6px;\n    }\n\n    .dropdown-empty {\n      padding: 10px 12px;\n      color: var(--mj-text-muted);\n      font-style: italic;\n    }\n\n    /* Responsive */\n    @media (max-width: 768px) {\n      .header-row {\n        flex-direction: column;\n        gap: 12px;\n        align-items: stretch;\n      }\n\n      .btn-create {\n        width: 100%;\n        justify-content: center;\n      }\n\n      .header-actions {\n        flex-direction: column;\n        align-items: stretch;\n      }\n\n      .search-box {\n        max-width: none;\n      }\n\n      .filter-group {\n        width: 100%;\n      }\n\n      .filter-select {\n        flex: 1;\n        width: 100%;\n      }\n\n      .view-toggle-group {\n        justify-content: center;\n      }\n\n      .lists-table {\n        overflow-x: auto;\n      }\n\n      .col-entity, .col-items, .col-updated {\n        display: none;\n      }\n\n      .lists-grid {\n        grid-template-columns: 1fr;\n      }\n\n      .modal-dialog {\n        width: 95vw;\n      }\n    }\n  "] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.TabService }, { type: i2.MJNotificationService }, { type: i0.ElementRef }, { type: i3.ListSharingService }], { onDocumentClick: [{
             type: HostListener,
             args: ['document:click', ['$event']]
@@ -2048,5 +2049,5 @@ export { ListsBrowseResource };
             type: HostListener,
             args: ['document:keydown.escape']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ListsBrowseResource, { className: "ListsBrowseResource", filePath: "src/Lists/components/lists-browse-resource.component.ts", lineNumber: 1675 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ListsBrowseResource, { className: "ListsBrowseResource", filePath: "src/Lists/components/lists-browse-resource.component.ts", lineNumber: 1665 }); })();
 //# sourceMappingURL=lists-browse-resource.component.js.map