@memberjunction/ng-dashboards 5.34.1 → 5.36.0

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

@@ -5,10 +5,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component, ViewEncapsulation, HostListener } from '@angular/core';
-import { RegisterClass, UUIDsEqual } from '@memberjunction/global';
+import { RegisterClass, UUIDsEqual, MJGlobal } from '@memberjunction/global';
 import { BaseResourceComponent } from '@memberjunction/ng-shared';
-import { RunView } from '@memberjunction/core';
+import { BaseEntity, RunView } from '@memberjunction/core';
 import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { CapabilitiesForLevel } from '@memberjunction/lists-base';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-base-application";
 import * as i2 from "@memberjunction/ng-notifications";
@@ -19,42 +21,44 @@ import * as i6 from "@memberjunction/ng-ui-components";
 import * as i7 from "@memberjunction/ng-shared-generic";
 const _c0 = a0 => ({ node: a0, depth: 0 });
 const _c1 = (a0, a1) => ({ node: a0, depth: a1 });
-function ListsBrowseResource_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 36);
-    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_15_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.clearSearch()); });
-    i0.ɵɵelement(1, "i", 37);
-    i0.ɵɵelementEnd();
-} }
-function ListsBrowseResource_For_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 16);
+const _forTrack0 = ($index, $item) => $item.TagID;
+function ListsBrowseResource_Conditional_17_For_5_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 31);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_17_For_5_Template_button_click_0_listener() { const f_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r4 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r4.removeTagFilter(f_r4.TagID)); });
     i0.ɵɵtext(1);
+    i0.ɵɵelement(2, "i", 32);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const opt_r4 = ctx.$implicit;
-    i0.ɵɵproperty("value", opt_r4.value);
+    const f_r4 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(opt_r4.name);
+    i0.ɵɵtextInterpolate1(" ", f_r4.Name, " ");
 } }
-function ListsBrowseResource_For_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 16);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
+function ListsBrowseResource_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14)(1, "span", 27);
+    i0.ɵɵelement(2, "i", 28);
+    i0.ɵɵtext(3, " Filtering by tag: ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(4, ListsBrowseResource_Conditional_17_For_5_Template, 3, 1, "button", 29, _forTrack0);
+    i0.ɵɵelementStart(6, "button", 30);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_17_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r2); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.clearTagFilters()); });
+    i0.ɵɵtext(7, " Clear all ");
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const opt_r5 = ctx.$implicit;
-    i0.ɵɵproperty("value", opt_r5.value);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(opt_r5.name);
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater(ctx_r4.tagFilters);
 } }
-function ListsBrowseResource_Conditional_31_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 25);
-    i0.ɵɵelement(1, "mj-loading", 38);
+function ListsBrowseResource_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵelement(1, "mj-loading", 33);
     i0.ɵɵelementEnd();
 } }
-function ListsBrowseResource_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 26)(1, "div", 39);
-    i0.ɵɵelement(2, "div", 40)(3, "i", 6);
+    i0.ɵɵelementStart(0, "div", 16)(1, "div", 34);
+    i0.ɵɵelement(2, "div", 35)(3, "i", 36);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "h3");
     i0.ɵɵtext(5, "No Lists Yet");
@@ -62,31 +66,31 @@ function ListsBrowseResource_Conditional_32_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(6, "p");
     i0.ɵɵtext(7, "Lists help you organize and track groups of records across your data.");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 41)(9, "div", 42);
-    i0.ɵɵelement(10, "i", 43);
+    i0.ɵɵelementStart(8, "div", 37)(9, "div", 38);
+    i0.ɵɵelement(10, "i", 39);
     i0.ɵɵelementStart(11, "span");
     i0.ɵɵtext(12, "Group records from any entity");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 42);
-    i0.ɵɵelement(14, "i", 43);
+    i0.ɵɵelementStart(13, "div", 38);
+    i0.ɵɵelement(14, "i", 39);
     i0.ɵɵelementStart(15, "span");
     i0.ɵɵtext(16, "Organize with categories");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 42);
-    i0.ɵɵelement(18, "i", 43);
+    i0.ɵɵelementStart(17, "div", 38);
+    i0.ɵɵelement(18, "i", 39);
     i0.ɵɵelementStart(19, "span");
     i0.ɵɵtext(20, "Quick access from any view");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(21, "button", 44);
-    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_32_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.createNewList()); });
-    i0.ɵɵelement(22, "i", 8);
+    i0.ɵɵelementStart(21, "button", 40);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_19_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r6); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.createNewList()); });
+    i0.ɵɵelement(22, "i", 11);
     i0.ɵɵtext(23, " Create Your First List ");
     i0.ɵɵelementEnd()();
 } }
-function ListsBrowseResource_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 27)(1, "div", 45);
-    i0.ɵɵelement(2, "i", 46);
+    i0.ɵɵelementStart(0, "div", 17)(1, "div", 41);
+    i0.ɵɵelement(2, "i", 42);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "h3");
     i0.ɵɵtext(4, "No Results Found");
@@ -94,16 +98,16 @@ function ListsBrowseResource_Conditional_33_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(5, "p");
     i0.ɵɵtext(6, "No lists match your current filters.");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "p", 47);
+    i0.ɵɵelementStart(7, "p", 43);
     i0.ɵɵtext(8, "Try adjusting your search or filters.");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "button", 48);
-    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_33_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.clearFilters()); });
+    i0.ɵɵelementStart(9, "button", 44);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_20_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r7); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.clearFilters()); });
     i0.ɵɵtext(10, "Clear All Filters");
     i0.ɵɵelementEnd()();
 } }
-function ListsBrowseResource_Conditional_34_For_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 16);
+function ListsBrowseResource_Conditional_21_For_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 49);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -112,8 +116,8 @@ function ListsBrowseResource_Conditional_34_For_9_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(opt_r9.name);
 } }
-function ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 72);
+function ListsBrowseResource_Conditional_21_Conditional_10_For_21_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 69);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -121,10 +125,10 @@ function ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_8_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(item_r11.list.Description);
 } }
-function ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_15_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 83);
-    i0.ɵɵelement(1, "i", 84);
-    i0.ɵɵelementStart(2, "span", 85);
+function ListsBrowseResource_Conditional_21_Conditional_10_For_21_Conditional_15_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 81);
+    i0.ɵɵelement(1, "i", 82);
+    i0.ɵɵelementStart(2, "span", 83);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -132,71 +136,65 @@ function ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_15
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(sharing_r12.totalShares);
 } }
-function ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_15_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 77);
-    i0.ɵɵelement(1, "i", 86);
+function ListsBrowseResource_Conditional_21_Conditional_10_For_21_Conditional_15_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 74);
+    i0.ɵɵelement(1, "i", 84);
     i0.ɵɵelementEnd();
 } }
-function ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_15_Conditional_0_Template, 4, 1, "span", 83);
-    i0.ɵɵconditionalCreate(1, ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_15_Conditional_1_Template, 2, 0, "span", 77);
+function ListsBrowseResource_Conditional_21_Conditional_10_For_21_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, ListsBrowseResource_Conditional_21_Conditional_10_For_21_Conditional_15_Conditional_0_Template, 4, 1, "span", 81);
+    i0.ɵɵconditionalCreate(1, ListsBrowseResource_Conditional_21_Conditional_10_For_21_Conditional_15_Conditional_1_Template, 2, 0, "span", 74);
 } if (rf & 2) {
     const sharing_r12 = ctx;
     i0.ɵɵconditional(sharing_r12.totalShares > 0 ? 0 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(sharing_r12.totalShares === 0 ? 1 : -1);
 } }
-function ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 77);
-    i0.ɵɵelement(1, "i", 86);
-    i0.ɵɵelementEnd();
-} }
-function ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 87);
-    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_23_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r13); const item_r11 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openListMenu($event, item_r11)); });
-    i0.ɵɵelement(1, "i", 88);
+function ListsBrowseResource_Conditional_21_Conditional_10_For_21_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 74);
+    i0.ɵɵelement(1, "i", 84);
     i0.ɵɵelementEnd();
 } }
-function ListsBrowseResource_Conditional_34_Conditional_10_For_21_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_21_Conditional_10_For_21_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "tr", 66);
-    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_34_Conditional_10_For_21_Template_tr_click_0_listener() { const item_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openList(item_r11)); })("keydown.enter", function ListsBrowseResource_Conditional_34_Conditional_10_For_21_Template_tr_keydown_enter_0_listener() { const item_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openList(item_r11)); });
-    i0.ɵɵelementStart(1, "td", 67)(2, "div", 68)(3, "div", 69);
+    i0.ɵɵelementStart(0, "tr", 63);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_21_Conditional_10_For_21_Template_tr_click_0_listener() { const item_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r4 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r4.openList(item_r11)); })("keydown.enter", function ListsBrowseResource_Conditional_21_Conditional_10_For_21_Template_tr_keydown_enter_0_listener() { const item_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r4 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r4.openList(item_r11)); });
+    i0.ɵɵelementStart(1, "td", 64)(2, "div", 65)(3, "div", 66);
     i0.ɵɵelement(4, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 70)(6, "span", 71);
+    i0.ɵɵelementStart(5, "div", 67)(6, "span", 68);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(8, ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_8_Template, 2, 1, "span", 72);
+    i0.ɵɵconditionalCreate(8, ListsBrowseResource_Conditional_21_Conditional_10_For_21_Conditional_8_Template, 2, 1, "span", 69);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(9, "td", 73)(10, "span", 74);
+    i0.ɵɵelementStart(9, "td", 70)(10, "span", 71);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "td", 75);
+    i0.ɵɵelementStart(12, "td", 72);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "td", 76);
-    i0.ɵɵconditionalCreate(15, ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_15_Template, 2, 2);
-    i0.ɵɵconditionalCreate(16, ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_16_Template, 2, 0, "span", 77);
+    i0.ɵɵelementStart(14, "td", 73);
+    i0.ɵɵconditionalCreate(15, ListsBrowseResource_Conditional_21_Conditional_10_For_21_Conditional_15_Template, 2, 2);
+    i0.ɵɵconditionalCreate(16, ListsBrowseResource_Conditional_21_Conditional_10_For_21_Conditional_16_Template, 2, 0, "span", 74);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "td", 78)(18, "span", 79);
+    i0.ɵɵelementStart(17, "td", 75)(18, "span", 76);
     i0.ɵɵtext(19);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(20, "td", 80);
+    i0.ɵɵelementStart(20, "td", 77);
     i0.ɵɵtext(21);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "td", 81);
-    i0.ɵɵconditionalCreate(23, ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_23_Template, 2, 0, "button", 82);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(22, "td", 78)(23, "button", 79);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_21_Conditional_10_For_21_Template_button_click_23_listener($event) { const item_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r4 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r4.openListMenu($event, item_r11)); });
+    i0.ɵɵelement(24, "i", 80);
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     let tmp_19_0;
     const item_r11 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r4 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(3);
-    i0.ɵɵstyleProp("background-color", ctx_r2.getEntityColor(item_r11.entityName));
+    i0.ɵɵstyleProp("background-color", ctx_r4.getEntityColor(item_r11.entityName));
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r2.getEntityIcon(item_r11.entityName));
+    i0.ɵɵclassMap(ctx_r4.getEntityIcon(item_r11.entityName));
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(item_r11.list.Name);
     i0.ɵɵadvance();
@@ -214,389 +212,418 @@ function ListsBrowseResource_Conditional_34_Conditional_10_For_21_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", item_r11.isOwner ? "You" : item_r11.ownerName, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r2.formatDate(item_r11.list.__mj_UpdatedAt));
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(item_r11.isOwner ? 23 : -1);
+    i0.ɵɵtextInterpolate(ctx_r4.formatDate(item_r11.list.__mj_UpdatedAt));
 } }
-function ListsBrowseResource_Conditional_34_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 53)(1, "table", 56)(2, "thead")(3, "tr")(4, "th", 57);
+function ListsBrowseResource_Conditional_21_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 50)(1, "table", 53)(2, "thead")(3, "tr")(4, "th", 54);
     i0.ɵɵtext(5, "Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "th", 58);
+    i0.ɵɵelementStart(6, "th", 55);
     i0.ɵɵtext(7, "Entity");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "th", 59);
+    i0.ɵɵelementStart(8, "th", 56);
     i0.ɵɵtext(9, "Items");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "th", 60);
+    i0.ɵɵelementStart(10, "th", 57);
     i0.ɵɵtext(11, "Shared");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "th", 61);
+    i0.ɵɵelementStart(12, "th", 58);
     i0.ɵɵtext(13, "Owner");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "th", 62);
+    i0.ɵɵelementStart(14, "th", 59);
     i0.ɵɵtext(15, "Updated");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "th", 63)(17, "span", 64);
+    i0.ɵɵelementStart(16, "th", 60)(17, "span", 61);
     i0.ɵɵtext(18, "Actions");
     i0.ɵɵelementEnd()()()();
     i0.ɵɵelementStart(19, "tbody");
-    i0.ɵɵrepeaterCreate(20, ListsBrowseResource_Conditional_34_Conditional_10_For_21_Template, 24, 15, "tr", 65, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(20, ListsBrowseResource_Conditional_21_Conditional_10_For_21_Template, 25, 14, "tr", 62, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r4 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(20);
-    i0.ɵɵrepeater(ctx_r2.filteredLists);
+    i0.ɵɵrepeater(ctx_r4.filteredLists);
 } }
-function ListsBrowseResource_Conditional_34_Conditional_11_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 93)(1, "button", 106);
-    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_34_Conditional_11_For_2_Conditional_4_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r16); const item_r15 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openListMenu($event, item_r15)); });
-    i0.ɵɵelement(2, "i", 88);
-    i0.ɵɵelementEnd()();
-} }
-function ListsBrowseResource_Conditional_34_Conditional_11_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 96);
+function ListsBrowseResource_Conditional_21_Conditional_11_For_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 94);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r15 = i0.ɵɵnextContext().$implicit;
+    const item_r14 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(item_r15.list.Description);
+    i0.ɵɵtextInterpolate(item_r14.list.Description);
 } }
-function ListsBrowseResource_Conditional_34_Conditional_11_For_2_Conditional_21_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 107);
-    i0.ɵɵelement(1, "i", 84);
+function ListsBrowseResource_Conditional_21_Conditional_11_For_2_Conditional_27_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 106);
+    i0.ɵɵelement(1, "i", 82);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const sharing_r17 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("title", "Shared with " + sharing_r17.totalShares + " user(s)/role(s)");
+    const sharing_r15 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("title", "Shared with " + sharing_r15.totalShares + " user(s)/role(s)");
 } }
-function ListsBrowseResource_Conditional_34_Conditional_11_For_2_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, ListsBrowseResource_Conditional_34_Conditional_11_For_2_Conditional_21_Conditional_0_Template, 2, 1, "span", 107);
+function ListsBrowseResource_Conditional_21_Conditional_11_For_2_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, ListsBrowseResource_Conditional_21_Conditional_11_For_2_Conditional_27_Conditional_0_Template, 2, 1, "span", 106);
 } if (rf & 2) {
     i0.ɵɵconditional(ctx.totalShares > 0 ? 0 : -1);
 } }
-function ListsBrowseResource_Conditional_34_Conditional_11_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 90);
-    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_34_Conditional_11_For_2_Template_div_click_0_listener() { const item_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openList(item_r15)); })("keydown.enter", function ListsBrowseResource_Conditional_34_Conditional_11_For_2_Template_div_keydown_enter_0_listener() { const item_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openList(item_r15)); });
-    i0.ɵɵelementStart(1, "div", 91)(2, "div", 92);
+function ListsBrowseResource_Conditional_21_Conditional_11_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 86);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_21_Conditional_11_For_2_Template_div_click_0_listener() { const item_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r4 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r4.openList(item_r14)); })("keydown.enter", function ListsBrowseResource_Conditional_21_Conditional_11_For_2_Template_div_keydown_enter_0_listener() { const item_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r4 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r4.openList(item_r14)); });
+    i0.ɵɵelementStart(1, "div", 87)(2, "div", 88);
     i0.ɵɵelement(3, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, ListsBrowseResource_Conditional_34_Conditional_11_For_2_Conditional_4_Template, 3, 0, "div", 93);
+    i0.ɵɵelementStart(4, "button", 89);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_21_Conditional_11_For_2_Template_button_click_4_listener($event) { const item_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r4 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r4.toggleFavorite($event, item_r14)); });
+    i0.ɵɵelement(5, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 94)(6, "h3", 95);
-    i0.ɵɵtext(7);
+    i0.ɵɵelementStart(6, "div", 90)(7, "button", 91);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_21_Conditional_11_For_2_Template_button_click_7_listener($event) { const item_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r4 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r4.openListMenu($event, item_r14)); });
+    i0.ɵɵelement(8, "i", 80);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(9, "div", 92)(10, "h3", 93);
+    i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(8, ListsBrowseResource_Conditional_34_Conditional_11_For_2_Conditional_8_Template, 2, 1, "p", 96);
-    i0.ɵɵelementStart(9, "div", 97)(10, "span", 98);
-    i0.ɵɵelement(11, "i", 99);
-    i0.ɵɵtext(12);
+    i0.ɵɵconditionalCreate(12, ListsBrowseResource_Conditional_21_Conditional_11_For_2_Conditional_12_Template, 2, 1, "p", 94);
+    i0.ɵɵelementStart(13, "div", 95)(14, "span", 96);
+    i0.ɵɵelement(15, "i", 97);
+    i0.ɵɵtext(16);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "span", 98);
-    i0.ɵɵelement(14, "i", 100);
-    i0.ɵɵtext(15);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(16, "div", 101)(17, "span", 102);
-    i0.ɵɵelement(18, "i", 103);
+    i0.ɵɵelementStart(17, "span", 96);
+    i0.ɵɵelement(18, "i", 98);
     i0.ɵɵtext(19);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "div", 104);
-    i0.ɵɵconditionalCreate(21, ListsBrowseResource_Conditional_34_Conditional_11_For_2_Conditional_21_Template, 1, 1);
-    i0.ɵɵelementStart(22, "span", 105);
-    i0.ɵɵtext(23);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(20, "div", 99);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_21_Conditional_11_For_2_Template_div_click_20_listener($event) { i0.ɵɵrestoreView(_r13); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(21, "mj-tag-chips", 100);
+    i0.ɵɵlistener("TagClicked", function ListsBrowseResource_Conditional_21_Conditional_11_For_2_Template_mj_tag_chips_TagClicked_21_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r4 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r4.onCardTagClicked($event)); });
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(22, "div", 101)(23, "span", 102);
+    i0.ɵɵelement(24, "i", 103);
+    i0.ɵɵtext(25);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(26, "div", 104);
+    i0.ɵɵconditionalCreate(27, ListsBrowseResource_Conditional_21_Conditional_11_For_2_Conditional_27_Template, 1, 1);
+    i0.ɵɵelementStart(28, "span", 105);
+    i0.ɵɵtext(29);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    let tmp_22_0;
-    const item_r15 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    let tmp_28_0;
+    const item_r14 = ctx.$implicit;
+    const ctx_r4 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵstyleProp("background-color", ctx_r2.getEntityColor(item_r15.entityName));
+    i0.ɵɵstyleProp("background-color", ctx_r4.getEntityColor(item_r14.entityName));
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r2.getEntityIcon(item_r15.entityName));
+    i0.ɵɵclassMap(ctx_r4.getEntityIcon(item_r14.entityName));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r15.isOwner ? 4 : -1);
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(item_r15.list.Name);
+    i0.ɵɵclassProp("favorite-btn--active", ctx_r4.isFavorite(item_r14.list.ID));
+    i0.ɵɵproperty("title", ctx_r4.isFavorite(item_r14.list.ID) ? "Remove from favorites" : "Add to favorites");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r15.list.Description ? 8 : -1);
+    i0.ɵɵclassMap(ctx_r4.isFavorite(item_r14.list.ID) ? "fa-solid fa-star" : "fa-regular fa-star");
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(item_r14.list.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r14.list.Description ? 12 : -1);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", item_r15.entityName, " ");
+    i0.ɵɵtextInterpolate1(" ", item_r14.entityName, " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate2(" ", item_r15.itemCount, " item", item_r15.itemCount !== 1 ? "s" : "", " ");
+    i0.ɵɵtextInterpolate2(" ", item_r14.itemCount, " item", item_r14.itemCount !== 1 ? "s" : "", " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("Provider", ctx_r4.Provider)("RecordID", item_r14.list.ID)("Editable", false)("MaxDisplay", 3);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("is-me", item_r15.isOwner);
+    i0.ɵɵclassProp("is-me", item_r14.isOwner);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", item_r15.isOwner ? "You" : item_r15.ownerName, " ");
+    i0.ɵɵtextInterpolate1(" ", item_r14.isOwner ? "You" : item_r14.ownerName, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional((tmp_22_0 = item_r15.sharingInfo) ? 21 : -1, tmp_22_0);
+    i0.ɵɵconditional((tmp_28_0 = item_r14.sharingInfo) ? 27 : -1, tmp_28_0);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r2.formatDate(item_r15.list.__mj_UpdatedAt));
+    i0.ɵɵtextInterpolate(ctx_r4.formatDate(item_r14.list.__mj_UpdatedAt));
 } }
-function ListsBrowseResource_Conditional_34_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 54);
-    i0.ɵɵrepeaterCreate(1, ListsBrowseResource_Conditional_34_Conditional_11_For_2_Template, 24, 15, "div", 89, i0.ɵɵrepeaterTrackByIdentity);
+function ListsBrowseResource_Conditional_21_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 51);
+    i0.ɵɵrepeaterCreate(1, ListsBrowseResource_Conditional_21_Conditional_11_For_2_Template, 30, 23, "div", 85, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r4 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r2.filteredLists);
+    i0.ɵɵrepeater(ctx_r4.filteredLists);
 } }
-function ListsBrowseResource_Conditional_34_Conditional_12_For_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_21_Conditional_12_For_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function ListsBrowseResource_Conditional_34_Conditional_12_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ListsBrowseResource_Conditional_34_Conditional_12_For_2_ng_container_0_Template, 1, 0, "ng-container", 108);
+function ListsBrowseResource_Conditional_21_Conditional_12_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ListsBrowseResource_Conditional_21_Conditional_12_For_2_ng_container_0_Template, 1, 0, "ng-container", 107);
 } if (rf & 2) {
-    const node_r18 = ctx.$implicit;
+    const node_r16 = ctx.$implicit;
     i0.ɵɵnextContext(3);
-    const categoryNodeTemplate_r19 = i0.ɵɵreference(36);
-    i0.ɵɵproperty("ngTemplateOutlet", categoryNodeTemplate_r19)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, node_r18));
+    const categoryNodeTemplate_r17 = i0.ɵɵreference(23);
+    i0.ɵɵproperty("ngTemplateOutlet", categoryNodeTemplate_r17)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, node_r16));
 } }
-function ListsBrowseResource_Conditional_34_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 55);
-    i0.ɵɵrepeaterCreate(1, ListsBrowseResource_Conditional_34_Conditional_12_For_2_Template, 1, 4, "ng-container", null, i0.ɵɵrepeaterTrackByIdentity);
+function ListsBrowseResource_Conditional_21_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 52);
+    i0.ɵɵrepeaterCreate(1, ListsBrowseResource_Conditional_21_Conditional_12_For_2_Template, 1, 4, "ng-container", null, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r4 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r2.categoryTree);
+    i0.ɵɵrepeater(ctx_r4.categoryTree);
 } }
-function ListsBrowseResource_Conditional_34_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 28)(1, "div", 49)(2, "span", 50);
+    i0.ɵɵelementStart(0, "div", 18)(1, "div", 45)(2, "span", 46);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 51)(5, "label");
+    i0.ɵɵelementStart(4, "div", 47)(5, "label");
     i0.ɵɵtext(6, "Sort:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "select", 52);
-    i0.ɵɵtwoWayListener("ngModelChange", function ListsBrowseResource_Conditional_34_Template_select_ngModelChange_7_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.selectedSort, $event) || (ctx_r2.selectedSort = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("ngModelChange", function ListsBrowseResource_Conditional_34_Template_select_ngModelChange_7_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSortChange($event)); });
-    i0.ɵɵrepeaterCreate(8, ListsBrowseResource_Conditional_34_For_9_Template, 2, 2, "option", 16, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(7, "select", 48);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListsBrowseResource_Conditional_21_Template_select_ngModelChange_7_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r4 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r4.selectedSort, $event) || (ctx_r4.selectedSort = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function ListsBrowseResource_Conditional_21_Template_select_ngModelChange_7_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.onSortChange($event)); });
+    i0.ɵɵrepeaterCreate(8, ListsBrowseResource_Conditional_21_For_9_Template, 2, 2, "option", 49, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(10, ListsBrowseResource_Conditional_34_Conditional_10_Template, 22, 0, "div", 53);
-    i0.ɵɵconditionalCreate(11, ListsBrowseResource_Conditional_34_Conditional_11_Template, 3, 0, "div", 54);
-    i0.ɵɵconditionalCreate(12, ListsBrowseResource_Conditional_34_Conditional_12_Template, 3, 0, "div", 55);
+    i0.ɵɵconditionalCreate(10, ListsBrowseResource_Conditional_21_Conditional_10_Template, 22, 0, "div", 50);
+    i0.ɵɵconditionalCreate(11, ListsBrowseResource_Conditional_21_Conditional_11_Template, 3, 0, "div", 51);
+    i0.ɵɵconditionalCreate(12, ListsBrowseResource_Conditional_21_Conditional_12_Template, 3, 0, "div", 52);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
+    const ctx_r4 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate2("", ctx_r2.filteredLists.length, " list", ctx_r2.filteredLists.length !== 1 ? "s" : "");
+    i0.ɵɵtextInterpolate2("", ctx_r4.filteredLists.length, " list", ctx_r4.filteredLists.length !== 1 ? "s" : "");
     i0.ɵɵadvance(4);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.selectedSort);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r4.selectedSort);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r2.sortOptions);
+    i0.ɵɵrepeater(ctx_r4.sortOptions);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.viewMode === "table" ? 10 : -1);
+    i0.ɵɵconditional(ctx_r4.viewMode === "table" ? 10 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.viewMode === "card" ? 11 : -1);
+    i0.ɵɵconditional(ctx_r4.viewMode === "card" ? 11 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.viewMode === "hierarchy" ? 12 : -1);
+    i0.ɵɵconditional(ctx_r4.viewMode === "hierarchy" ? 12 : -1);
 } }
-function ListsBrowseResource_ng_template_35_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 113);
-    i0.ɵɵlistener("click", function ListsBrowseResource_ng_template_35_Conditional_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r20); const node_r21 = i0.ɵɵnextContext().node; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleCategory(node_r21)); });
-    i0.ɵɵelement(1, "i")(2, "i", 114);
-    i0.ɵɵelementStart(3, "span", 115);
+function ListsBrowseResource_ng_template_22_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 112);
+    i0.ɵɵlistener("click", function ListsBrowseResource_ng_template_22_Conditional_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r18); const node_r19 = i0.ɵɵnextContext().node; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.toggleCategory(node_r19)); });
+    i0.ɵɵelement(1, "i")(2, "i", 113);
+    i0.ɵɵelementStart(3, "span", 114);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 116);
+    i0.ɵɵelementStart(5, "span", 115);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const node_r21 = i0.ɵɵnextContext().node;
-    const ctx_r2 = i0.ɵɵnextContext();
+    const node_r19 = i0.ɵɵnextContext().node;
+    const ctx_r4 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(node_r21.isExpanded ? "fa-solid fa-chevron-down" : "fa-solid fa-chevron-right");
+    i0.ɵɵclassMap(node_r19.isExpanded ? "fa-solid fa-chevron-down" : "fa-solid fa-chevron-right");
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("fa-folder-open", node_r21.isExpanded);
+    i0.ɵɵclassProp("fa-folder-open", node_r19.isExpanded);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(node_r21.category.Name);
+    i0.ɵɵtextInterpolate(node_r19.category.Name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r2.getListCountInCategory(node_r21));
+    i0.ɵɵtextInterpolate(ctx_r4.getListCountInCategory(node_r19));
 } }
-function ListsBrowseResource_ng_template_35_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 117);
-    i0.ɵɵlistener("click", function ListsBrowseResource_ng_template_35_Conditional_2_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r22); const node_r21 = i0.ɵɵnextContext().node; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleCategory(node_r21)); });
-    i0.ɵɵelement(1, "i")(2, "i", 118);
-    i0.ɵɵelementStart(3, "span", 115);
+function ListsBrowseResource_ng_template_22_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 116);
+    i0.ɵɵlistener("click", function ListsBrowseResource_ng_template_22_Conditional_2_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r20); const node_r19 = i0.ɵɵnextContext().node; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.toggleCategory(node_r19)); });
+    i0.ɵɵelement(1, "i")(2, "i", 117);
+    i0.ɵɵelementStart(3, "span", 114);
     i0.ɵɵtext(4, "Uncategorized");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 116);
+    i0.ɵɵelementStart(5, "span", 115);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const node_r21 = i0.ɵɵnextContext().node;
+    const node_r19 = i0.ɵɵnextContext().node;
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(node_r21.isExpanded ? "fa-solid fa-chevron-down" : "fa-solid fa-chevron-right");
+    i0.ɵɵclassMap(node_r19.isExpanded ? "fa-solid fa-chevron-down" : "fa-solid fa-chevron-right");
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(node_r21.lists.length);
+    i0.ɵɵtextInterpolate(node_r19.lists.length);
 } }
-function ListsBrowseResource_ng_template_35_Conditional_3_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_ng_template_22_Conditional_3_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r24 = i0.ɵɵnextContext().$implicit;
+    const item_r22 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" \u00B7 ", item_r24.ownerName);
+    i0.ɵɵtextInterpolate1(" \u00B7 ", item_r22.ownerName);
 } }
-function ListsBrowseResource_ng_template_35_Conditional_3_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 123)(1, "button", 124);
-    i0.ɵɵlistener("click", function ListsBrowseResource_ng_template_35_Conditional_3_For_2_Conditional_9_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r25); const item_r24 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openListMenu($event, item_r24)); });
-    i0.ɵɵelement(2, "i", 88);
-    i0.ɵɵelementEnd()();
-} }
-function ListsBrowseResource_ng_template_35_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 120);
-    i0.ɵɵlistener("click", function ListsBrowseResource_ng_template_35_Conditional_3_For_2_Template_div_click_0_listener() { const item_r24 = i0.ɵɵrestoreView(_r23).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openList(item_r24)); })("keydown.enter", function ListsBrowseResource_ng_template_35_Conditional_3_For_2_Template_div_keydown_enter_0_listener() { const item_r24 = i0.ɵɵrestoreView(_r23).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openList(item_r24)); });
-    i0.ɵɵelementStart(1, "div", 69);
+function ListsBrowseResource_ng_template_22_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 119);
+    i0.ɵɵlistener("click", function ListsBrowseResource_ng_template_22_Conditional_3_For_2_Template_div_click_0_listener() { const item_r22 = i0.ɵɵrestoreView(_r21).$implicit; const ctx_r4 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r4.openList(item_r22)); })("keydown.enter", function ListsBrowseResource_ng_template_22_Conditional_3_For_2_Template_div_keydown_enter_0_listener() { const item_r22 = i0.ɵɵrestoreView(_r21).$implicit; const ctx_r4 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r4.openList(item_r22)); });
+    i0.ɵɵelementStart(1, "div", 66);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 121)(4, "span", 71);
+    i0.ɵɵelementStart(3, "div", 120)(4, "span", 68);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 122);
+    i0.ɵɵelementStart(6, "span", 121);
     i0.ɵɵtext(7);
-    i0.ɵɵconditionalCreate(8, ListsBrowseResource_ng_template_35_Conditional_3_For_2_Conditional_8_Template, 2, 1, "span");
+    i0.ɵɵconditionalCreate(8, ListsBrowseResource_ng_template_22_Conditional_3_For_2_Conditional_8_Template, 2, 1, "span");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(9, ListsBrowseResource_ng_template_35_Conditional_3_For_2_Conditional_9_Template, 3, 0, "div", 123);
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "div", 122)(10, "button", 123);
+    i0.ɵɵlistener("click", function ListsBrowseResource_ng_template_22_Conditional_3_For_2_Template_button_click_10_listener($event) { const item_r22 = i0.ɵɵrestoreView(_r21).$implicit; const ctx_r4 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r4.openListMenu($event, item_r22)); });
+    i0.ɵɵelement(11, "i", 80);
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const item_r24 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const item_r22 = ctx.$implicit;
+    const ctx_r4 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("background-color", ctx_r2.getEntityColor(item_r24.entityName));
+    i0.ɵɵstyleProp("background-color", ctx_r4.getEntityColor(item_r22.entityName));
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r2.getEntityIcon(item_r24.entityName));
+    i0.ɵɵclassMap(ctx_r4.getEntityIcon(item_r22.entityName));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(item_r24.list.Name);
+    i0.ɵɵtextInterpolate(item_r22.list.Name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate2(" ", item_r24.entityName, " \u00B7 ", item_r24.itemCount, " items ");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(!item_r24.isOwner ? 8 : -1);
+    i0.ɵɵtextInterpolate2(" ", item_r22.entityName, " \u00B7 ", item_r22.itemCount, " items ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r24.isOwner ? 9 : -1);
+    i0.ɵɵconditional(!item_r22.isOwner ? 8 : -1);
 } }
-function ListsBrowseResource_ng_template_35_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 112);
-    i0.ɵɵrepeaterCreate(1, ListsBrowseResource_ng_template_35_Conditional_3_For_2_Template, 10, 9, "div", 119, i0.ɵɵrepeaterTrackByIdentity);
+function ListsBrowseResource_ng_template_22_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 111);
+    i0.ɵɵrepeaterCreate(1, ListsBrowseResource_ng_template_22_Conditional_3_For_2_Template, 12, 8, "div", 118, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const node_r21 = i0.ɵɵnextContext().node;
+    const node_r19 = i0.ɵɵnextContext().node;
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(node_r21.lists);
+    i0.ɵɵrepeater(node_r19.lists);
 } }
-function ListsBrowseResource_ng_template_35_Conditional_4_For_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_ng_template_22_Conditional_4_For_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function ListsBrowseResource_ng_template_35_Conditional_4_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ListsBrowseResource_ng_template_35_Conditional_4_For_1_ng_container_0_Template, 1, 0, "ng-container", 108);
+function ListsBrowseResource_ng_template_22_Conditional_4_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ListsBrowseResource_ng_template_22_Conditional_4_For_1_ng_container_0_Template, 1, 0, "ng-container", 107);
 } if (rf & 2) {
-    const child_r26 = ctx.$implicit;
-    const depth_r27 = i0.ɵɵnextContext(2).depth;
+    const child_r23 = ctx.$implicit;
+    const depth_r24 = i0.ɵɵnextContext(2).depth;
     i0.ɵɵnextContext();
-    const categoryNodeTemplate_r19 = i0.ɵɵreference(36);
-    i0.ɵɵproperty("ngTemplateOutlet", categoryNodeTemplate_r19)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c1, child_r26, depth_r27 + 1));
+    const categoryNodeTemplate_r17 = i0.ɵɵreference(23);
+    i0.ɵɵproperty("ngTemplateOutlet", categoryNodeTemplate_r17)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c1, child_r23, depth_r24 + 1));
 } }
-function ListsBrowseResource_ng_template_35_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, ListsBrowseResource_ng_template_35_Conditional_4_For_1_Template, 1, 5, "ng-container", null, i0.ɵɵrepeaterTrackByIdentity);
+function ListsBrowseResource_ng_template_22_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, ListsBrowseResource_ng_template_22_Conditional_4_For_1_Template, 1, 5, "ng-container", null, i0.ɵɵrepeaterTrackByIdentity);
 } if (rf & 2) {
-    const node_r21 = i0.ɵɵnextContext().node;
-    i0.ɵɵrepeater(node_r21.children);
+    const node_r19 = i0.ɵɵnextContext().node;
+    i0.ɵɵrepeater(node_r19.children);
 } }
-function ListsBrowseResource_ng_template_35_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 109);
-    i0.ɵɵconditionalCreate(1, ListsBrowseResource_ng_template_35_Conditional_1_Template, 7, 6, "div", 110);
-    i0.ɵɵconditionalCreate(2, ListsBrowseResource_ng_template_35_Conditional_2_Template, 7, 3, "div", 111);
-    i0.ɵɵconditionalCreate(3, ListsBrowseResource_ng_template_35_Conditional_3_Template, 3, 0, "div", 112);
-    i0.ɵɵconditionalCreate(4, ListsBrowseResource_ng_template_35_Conditional_4_Template, 2, 0);
+function ListsBrowseResource_ng_template_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 108);
+    i0.ɵɵconditionalCreate(1, ListsBrowseResource_ng_template_22_Conditional_1_Template, 7, 6, "div", 109);
+    i0.ɵɵconditionalCreate(2, ListsBrowseResource_ng_template_22_Conditional_2_Template, 7, 3, "div", 110);
+    i0.ɵɵconditionalCreate(3, ListsBrowseResource_ng_template_22_Conditional_3_Template, 3, 0, "div", 111);
+    i0.ɵɵconditionalCreate(4, ListsBrowseResource_ng_template_22_Conditional_4_Template, 2, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const node_r21 = ctx.node;
-    const depth_r27 = ctx.depth;
-    i0.ɵɵstyleProp("margin-left", depth_r27 * 20, "px");
+    const node_r19 = ctx.node;
+    const depth_r24 = ctx.depth;
+    i0.ɵɵstyleProp("margin-left", depth_r24 * 20, "px");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(node_r21.category ? 1 : -1);
+    i0.ɵɵconditional(node_r19.category ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!node_r21.category && node_r21.lists.length > 0 ? 2 : -1);
+    i0.ɵɵconditional(!node_r19.category && node_r19.lists.length > 0 ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(node_r21.isExpanded ? 3 : -1);
+    i0.ɵɵconditional(node_r19.isExpanded ? 3 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(node_r21.isExpanded ? 4 : -1);
+    i0.ɵɵconditional(node_r19.isExpanded ? 4 : -1);
+} }
+function ListsBrowseResource_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 124);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_24_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r25); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.closeContextMenu()); });
+    i0.ɵɵelementEnd();
+} }
+function ListsBrowseResource_Conditional_25_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 127);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_25_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r27); const ctx_r4 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r4.editList()); });
+    i0.ɵɵelement(1, "i", 130);
+    i0.ɵɵtext(2, " Edit ");
+    i0.ɵɵelementEnd();
 } }
-function ListsBrowseResource_Conditional_37_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_25_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 125);
-    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_37_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r28); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeContextMenu()); });
+    i0.ɵɵelementStart(0, "button", 127);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_25_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r28); const ctx_r4 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r4.openShareDialog()); });
+    i0.ɵɵelement(1, "i", 82);
+    i0.ɵɵtext(2, " Share ");
     i0.ɵɵelementEnd();
 } }
-function ListsBrowseResource_Conditional_38_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_25_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 126)(1, "button", 127);
-    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_38_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r29); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.editList()); });
-    i0.ɵɵelement(2, "i", 128);
-    i0.ɵɵtext(3, " Edit ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 127);
-    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_38_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r29); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.openShareDialog()); });
-    i0.ɵɵelement(5, "i", 84);
-    i0.ɵɵtext(6, " Share ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 127);
-    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_38_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r29); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.duplicateList()); });
-    i0.ɵɵelement(8, "i", 129);
-    i0.ɵɵtext(9, " Duplicate ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(10, "div", 130);
-    i0.ɵɵelementStart(11, "button", 131);
-    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_38_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r29); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.confirmDeleteList()); });
-    i0.ɵɵelement(12, "i", 132);
-    i0.ɵɵtext(13, " Delete ");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(0, "div", 131);
+    i0.ɵɵelementStart(1, "button", 132);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_25_Conditional_6_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r29); const ctx_r4 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r4.confirmDeleteList()); });
+    i0.ɵɵelement(2, "i", 133);
+    i0.ɵɵtext(3, " Delete ");
+    i0.ɵɵelementEnd();
+} }
+function ListsBrowseResource_Conditional_25_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 129);
+    i0.ɵɵelement(1, "i", 134);
+    i0.ɵɵtext(2, " Viewer access \u2014 read only ");
+    i0.ɵɵelementEnd();
+} }
+function ListsBrowseResource_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    const _r26 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 125);
+    i0.ɵɵconditionalCreate(1, ListsBrowseResource_Conditional_25_Conditional_1_Template, 3, 0, "button", 126);
+    i0.ɵɵconditionalCreate(2, ListsBrowseResource_Conditional_25_Conditional_2_Template, 3, 0, "button", 126);
+    i0.ɵɵelementStart(3, "button", 127);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_25_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r26); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.duplicateList()); });
+    i0.ɵɵelement(4, "i", 128);
+    i0.ɵɵtext(5, " Duplicate ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, ListsBrowseResource_Conditional_25_Conditional_6_Template, 4, 0);
+    i0.ɵɵconditionalCreate(7, ListsBrowseResource_Conditional_25_Conditional_7_Template, 3, 0, "div", 129);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵstyleProp("top", ctx_r2.contextMenuY, "px")("left", ctx_r2.contextMenuX, "px");
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("top", ctx_r4.contextMenuY, "px")("left", ctx_r4.contextMenuX, "px");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r4.contextItemCapabilities.CanEdit ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r4.contextItemCapabilities.CanShare ? 2 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r4.contextItemCapabilities.CanDelete ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r4.contextItemCapabilities.CanEdit && !ctx_r4.contextItemCapabilities.CanShare && !ctx_r4.contextItemCapabilities.CanDelete ? 7 : -1);
 } }
-function ListsBrowseResource_Conditional_39_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     const _r30 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 133);
-    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_39_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeCreateDialog()); });
+    i0.ɵɵelementStart(0, "div", 135);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_26_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r30); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.closeCreateDialog()); });
     i0.ɵɵelementEnd();
 } }
-function ListsBrowseResource_Conditional_40_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_27_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     const _r32 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 137)(1, "label");
+    i0.ɵɵelementStart(0, "div", 140)(1, "label");
     i0.ɵɵtext(2, "Entity *");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 146)(4, "input", 147, 1);
-    i0.ɵɵtwoWayListener("ngModelChange", function ListsBrowseResource_Conditional_40_Conditional_15_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.entitySearchTerm, $event) || (ctx_r2.entitySearchTerm = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("ngModelChange", function ListsBrowseResource_Conditional_40_Conditional_15_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.filterEntities($event)); })("focus", function ListsBrowseResource_Conditional_40_Conditional_15_Template_input_focus_4_listener() { i0.ɵɵrestoreView(_r32); const entityInput_r33 = i0.ɵɵreference(5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.openEntityDropdown(entityInput_r33)); });
+    i0.ɵɵelementStart(3, "div", 149)(4, "input", 150, 1);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListsBrowseResource_Conditional_27_Conditional_15_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r4 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r4.entitySearchTerm, $event) || (ctx_r4.entitySearchTerm = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function ListsBrowseResource_Conditional_27_Conditional_15_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r4 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r4.filterEntities($event)); })("focus", function ListsBrowseResource_Conditional_27_Conditional_15_Template_input_focus_4_listener() { i0.ɵɵrestoreView(_r32); const entityInput_r33 = i0.ɵɵreference(5); const ctx_r4 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r4.openEntityDropdown(entityInput_r33)); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r4 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.entitySearchTerm);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r4.entitySearchTerm);
 } }
-function ListsBrowseResource_Conditional_40_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 137)(1, "label");
+function ListsBrowseResource_Conditional_27_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 140)(1, "label");
     i0.ɵɵtext(2, "Entity");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "input", 148);
+    i0.ɵɵelement(3, "input", 151);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r4 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("value", ctx_r2.entitySearchTerm);
+    i0.ɵɵproperty("value", ctx_r4.entitySearchTerm);
 } }
-function ListsBrowseResource_Conditional_40_For_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 141);
+function ListsBrowseResource_Conditional_27_For_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 144);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -605,168 +632,202 @@ function ListsBrowseResource_Conditional_40_For_24_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(cat_r34.displayName);
 } }
-function ListsBrowseResource_Conditional_40_Conditional_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 144);
+function ListsBrowseResource_Conditional_27_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 147);
 } }
-function ListsBrowseResource_Conditional_40_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_27_Template(rf, ctx) { if (rf & 1) {
     const _r31 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 32)(1, "div", 134)(2, "h3");
+    i0.ɵɵelementStart(0, "div", 22)(1, "div", 136)(2, "h3");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 135);
-    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_40_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeCreateDialog()); });
-    i0.ɵɵelement(5, "i", 37);
+    i0.ɵɵelementStart(4, "button", 137);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_27_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r31); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.closeCreateDialog()); });
+    i0.ɵɵelement(5, "i", 138);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 136)(7, "div", 137)(8, "label");
+    i0.ɵɵelementStart(6, "div", 139)(7, "div", 140)(8, "label");
     i0.ɵɵtext(9, "Name *");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "input", 138);
-    i0.ɵɵtwoWayListener("ngModelChange", function ListsBrowseResource_Conditional_40_Template_input_ngModelChange_10_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.newListName, $event) || (ctx_r2.newListName = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(10, "input", 141);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListsBrowseResource_Conditional_27_Template_input_ngModelChange_10_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r4 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r4.newListName, $event) || (ctx_r4.newListName = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 137)(12, "label");
+    i0.ɵɵelementStart(11, "div", 140)(12, "label");
     i0.ɵɵtext(13, "Description");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "textarea", 139);
-    i0.ɵɵtwoWayListener("ngModelChange", function ListsBrowseResource_Conditional_40_Template_textarea_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.newListDescription, $event) || (ctx_r2.newListDescription = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(14, "textarea", 142);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListsBrowseResource_Conditional_27_Template_textarea_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r4 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r4.newListDescription, $event) || (ctx_r4.newListDescription = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(15, ListsBrowseResource_Conditional_40_Conditional_15_Template, 6, 1, "div", 137);
-    i0.ɵɵconditionalCreate(16, ListsBrowseResource_Conditional_40_Conditional_16_Template, 4, 1, "div", 137);
-    i0.ɵɵelementStart(17, "div", 137)(18, "label");
+    i0.ɵɵconditionalCreate(15, ListsBrowseResource_Conditional_27_Conditional_15_Template, 6, 1, "div", 140);
+    i0.ɵɵconditionalCreate(16, ListsBrowseResource_Conditional_27_Conditional_16_Template, 4, 1, "div", 140);
+    i0.ɵɵelementStart(17, "div", 140)(18, "label");
     i0.ɵɵtext(19, "Category");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "select", 140);
-    i0.ɵɵtwoWayListener("ngModelChange", function ListsBrowseResource_Conditional_40_Template_select_ngModelChange_20_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.selectedCategoryId, $event) || (ctx_r2.selectedCategoryId = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵelementStart(21, "option", 141);
+    i0.ɵɵelementStart(20, "select", 143);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListsBrowseResource_Conditional_27_Template_select_ngModelChange_20_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r4 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r4.selectedCategoryId, $event) || (ctx_r4.selectedCategoryId = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(21, "option", 144);
     i0.ɵɵtext(22, "No category");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(23, ListsBrowseResource_Conditional_40_For_24_Template, 2, 2, "option", 141, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(23, ListsBrowseResource_Conditional_27_For_24_Template, 2, 2, "option", 144, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(25, "div", 142)(26, "button", 143);
-    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_40_Template_button_click_26_listener() { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.saveList()); });
-    i0.ɵɵconditionalCreate(27, ListsBrowseResource_Conditional_40_Conditional_27_Template, 1, 0, "i", 144);
+    i0.ɵɵelementStart(25, "div", 145)(26, "button", 146);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_27_Template_button_click_26_listener() { i0.ɵɵrestoreView(_r31); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.saveList()); });
+    i0.ɵɵconditionalCreate(27, ListsBrowseResource_Conditional_27_Conditional_27_Template, 1, 0, "i", 147);
     i0.ɵɵtext(28);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(29, "button", 145);
-    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_40_Template_button_click_29_listener() { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeCreateDialog()); });
+    i0.ɵɵelementStart(29, "button", 148);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_27_Template_button_click_29_listener() { i0.ɵɵrestoreView(_r31); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.closeCreateDialog()); });
     i0.ɵɵtext(30, "Cancel");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
+    const ctx_r4 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r2.editingList ? "Edit List" : "Create New List");
+    i0.ɵɵtextInterpolate(ctx_r4.editingList ? "Edit List" : "Create New List");
     i0.ɵɵadvance(7);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.newListName);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r4.newListName);
     i0.ɵɵadvance(4);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.newListDescription);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r4.newListDescription);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r2.editingList ? 15 : -1);
+    i0.ɵɵconditional(!ctx_r4.editingList ? 15 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.editingList ? 16 : -1);
+    i0.ɵɵconditional(ctx_r4.editingList ? 16 : -1);
     i0.ɵɵadvance(4);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.selectedCategoryId);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r4.selectedCategoryId);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngValue", null);
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r2.flatCategories);
+    i0.ɵɵrepeater(ctx_r4.flatCategories);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("disabled", !ctx_r2.newListName || !ctx_r2.editingList && !ctx_r2.selectedEntityId || ctx_r2.isSaving);
+    i0.ɵɵproperty("disabled", !ctx_r4.newListName || !ctx_r4.editingList && !ctx_r4.selectedEntityId || ctx_r4.isSaving);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.isSaving ? 27 : -1);
+    i0.ɵɵconditional(ctx_r4.isSaving ? 27 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.isSaving ? "Saving..." : ctx_r2.editingList ? "Save" : "Create", " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r4.isSaving ? "Saving..." : ctx_r4.editingList ? "Save" : "Create", " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("disabled", ctx_r2.isSaving);
+    i0.ɵɵproperty("disabled", ctx_r4.isSaving);
 } }
-function ListsBrowseResource_Conditional_41_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_28_Template(rf, ctx) { if (rf & 1) {
     const _r35 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 133);
-    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_41_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r35); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
+    i0.ɵɵelementStart(0, "div", 135);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_28_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r35); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.cancelDelete()); });
     i0.ɵɵelementEnd();
 } }
-function ListsBrowseResource_Conditional_42_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 144);
+function ListsBrowseResource_Conditional_29_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 147);
 } }
-function ListsBrowseResource_Conditional_42_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_29_Template(rf, ctx) { if (rf & 1) {
     const _r36 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 33)(1, "div", 134)(2, "h3");
+    i0.ɵɵelementStart(0, "div", 23)(1, "div", 136)(2, "h3");
     i0.ɵɵtext(3, "Delete List");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 135);
-    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_42_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r36); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
-    i0.ɵɵelement(5, "i", 37);
+    i0.ɵɵelementStart(4, "button", 137);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_29_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r36); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.cancelDelete()); });
+    i0.ɵɵelement(5, "i", 138);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 136)(7, "p");
+    i0.ɵɵelementStart(6, "div", 139)(7, "p");
     i0.ɵɵtext(8, "Are you sure you want to delete \"");
     i0.ɵɵelementStart(9, "strong");
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(11, "\"?");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "p", 149);
+    i0.ɵɵelementStart(12, "p", 152);
     i0.ɵɵtext(13, "This will also remove all items in the list.");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "div", 142)(15, "button", 150);
-    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_42_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r36); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.deleteList()); });
-    i0.ɵɵconditionalCreate(16, ListsBrowseResource_Conditional_42_Conditional_16_Template, 1, 0, "i", 144);
+    i0.ɵɵelementStart(14, "div", 145)(15, "button", 153);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_29_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r36); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.deleteList()); });
+    i0.ɵɵconditionalCreate(16, ListsBrowseResource_Conditional_29_Conditional_16_Template, 1, 0, "i", 147);
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "button", 145);
-    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_42_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r36); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
+    i0.ɵɵelementStart(18, "button", 148);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_29_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r36); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.cancelDelete()); });
     i0.ɵɵtext(19, "Cancel");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
+    const ctx_r4 = i0.ɵɵnextContext();
     i0.ɵɵadvance(10);
-    i0.ɵɵtextInterpolate(ctx_r2.deleteListName);
+    i0.ɵɵtextInterpolate(ctx_r4.deleteListName);
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("disabled", ctx_r2.isDeleting);
+    i0.ɵɵproperty("disabled", ctx_r4.isDeleting);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.isDeleting ? 16 : -1);
+    i0.ɵɵconditional(ctx_r4.isDeleting ? 16 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.isDeleting ? "Deleting..." : "Delete", " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r4.isDeleting ? "Deleting..." : "Delete", " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("disabled", ctx_r2.isDeleting);
+    i0.ɵɵproperty("disabled", ctx_r4.isDeleting);
 } }
-function ListsBrowseResource_Conditional_43_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_30_Template(rf, ctx) { if (rf & 1) {
     const _r37 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-list-share-dialog", 151);
-    i0.ɵɵlistener("complete", function ListsBrowseResource_Conditional_43_Template_mj_list_share_dialog_complete_0_listener($event) { i0.ɵɵrestoreView(_r37); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onShareComplete($event)); })("cancel", function ListsBrowseResource_Conditional_43_Template_mj_list_share_dialog_cancel_0_listener() { i0.ɵɵrestoreView(_r37); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onShareCancel()); });
+    i0.ɵɵelementStart(0, "mj-list-share-dialog", 154);
+    i0.ɵɵlistener("complete", function ListsBrowseResource_Conditional_30_Template_mj_list_share_dialog_complete_0_listener($event) { i0.ɵɵrestoreView(_r37); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.onShareComplete($event)); })("cancel", function ListsBrowseResource_Conditional_30_Template_mj_list_share_dialog_cancel_0_listener() { i0.ɵɵrestoreView(_r37); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.onShareCancel()); })("manageInvitations", function ListsBrowseResource_Conditional_30_Template_mj_list_share_dialog_manageInvitations_0_listener() { i0.ɵɵrestoreView(_r37); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.onManageInvitations()); })("viewAuditLog", function ListsBrowseResource_Conditional_30_Template_mj_list_share_dialog_viewAuditLog_0_listener() { i0.ɵɵrestoreView(_r37); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.onViewAuditLog()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("config", ctx_r2.shareDialogConfig)("visible", ctx_r2.showShareDialog);
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("config", ctx_r4.shareDialogConfig)("visible", ctx_r4.showShareDialog);
 } }
-function ListsBrowseResource_Conditional_44_For_3_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_31_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.ɵɵelementStart(0, "mj-dialog", 155);
+    i0.ɵɵlistener("Close", function ListsBrowseResource_Conditional_31_Template_mj_dialog_Close_0_listener() { i0.ɵɵrestoreView(_r38); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.closeInvitationsDialog()); });
+    i0.ɵɵelementStart(1, "div", 156);
+    i0.ɵɵelement(2, "mj-list-invitations", 157);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "mj-dialog-actions")(4, "button", 158);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_31_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r38); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.closeInvitationsDialog()); });
+    i0.ɵɵtext(5, "Close");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Visible", true)("Title", "Invitations \u2014 " + (ctx_r4.activeShareListName ?? "List"))("MinWidth", 640)("Width", 900)("Height", 640);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("Provider", ctx_r4.ProviderToUse)("ListID", ctx_r4.activeShareListId)("ListName", ctx_r4.activeShareListName);
+} }
+function ListsBrowseResource_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    const _r39 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-dialog", 155);
+    i0.ɵɵlistener("Close", function ListsBrowseResource_Conditional_32_Template_mj_dialog_Close_0_listener() { i0.ɵɵrestoreView(_r39); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.closeAuditLogDialog()); });
+    i0.ɵɵelementStart(1, "div", 156);
+    i0.ɵɵelement(2, "mj-list-audit-log", 159);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "mj-dialog-actions")(4, "button", 158);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_32_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r39); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.closeAuditLogDialog()); });
+    i0.ɵɵtext(5, "Close");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Visible", true)("Title", "Audit Log \u2014 " + (ctx_r4.activeShareListName ?? "List"))("MinWidth", 720)("Width", 980)("Height", 680);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("Provider", ctx_r4.ProviderToUse)("ListID", ctx_r4.activeShareListId);
+} }
+function ListsBrowseResource_Conditional_33_For_3_Template(rf, ctx) { if (rf & 1) {
+    const _r40 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 164);
+    i0.ɵɵlistener("mousedown", function ListsBrowseResource_Conditional_33_For_3_Template_div_mousedown_0_listener($event) { const entity_r41 = i0.ɵɵrestoreView(_r40).$implicit; const ctx_r4 = i0.ɵɵnextContext(2); ctx_r4.selectEntity(entity_r41); return i0.ɵɵresetView($event.preventDefault()); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const entity_r39 = ctx.$implicit;
+    const entity_r41 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", entity_r39.Name, " ");
+    i0.ɵɵtextInterpolate1(" ", entity_r41.Name, " ");
 } }
-function ListsBrowseResource_Conditional_44_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 155);
+function ListsBrowseResource_Conditional_33_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 163);
     i0.ɵɵtext(1, " No entities found ");
     i0.ɵɵelementEnd();
 } }
-function ListsBrowseResource_Conditional_44_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 152)(1, "div", 153);
-    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);
+function ListsBrowseResource_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 160)(1, "div", 161);
+    i0.ɵɵrepeaterCreate(2, ListsBrowseResource_Conditional_33_For_3_Template, 2, 1, "div", 162, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵconditionalCreate(4, ListsBrowseResource_Conditional_33_Conditional_4_Template, 2, 0, "div", 163);
     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);
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("top", ctx_r4.entityDropdownPosition.top, "px")("left", ctx_r4.entityDropdownPosition.left, "px")("width", ctx_r4.entityDropdownPosition.width, "px");
+    i0.ɵɵclassProp("dropdown-above", ctx_r4.entityDropdownPosition.openAbove);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("open-above", ctx_r2.entityDropdownPosition.openAbove);
+    i0.ɵɵclassProp("open-above", ctx_r4.entityDropdownPosition.openAbove);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r2.filteredEntitiesList);
+    i0.ɵɵrepeater(ctx_r4.filteredEntitiesList);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.filteredEntitiesList.length === 0 ? 4 : -1);
+    i0.ɵɵconditional(ctx_r4.filteredEntitiesList.length === 0 ? 4 : -1);
 } }
 let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponent {
     cdr;
@@ -781,6 +842,27 @@ let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponen
     selectedEntity = 'all';
     selectedOwner = 'mine';
     selectedSort = 'name';
+    /**
+     * Active tag filters (Phase 4.3). Multi-tag = AND — a list must have
+     * every active tag to appear. URL state mirrors this via the `tags`
+     * query param (comma-separated tag IDs).
+     */
+    tagFilters = [];
+    /**
+     * Set of List IDs that match the current `tagFilters` (intersection).
+     * `null` means "no tag filter active" — pass-through. Populated by
+     * `recomputeTagMembership` whenever `tagFilters` changes; consumed by
+     * `applyFilters` to narrow the visible list.
+     */
+    tagFilteredListIds = null;
+    /**
+     * Favorite-list IDs for the current user (Phase 5.3). Backed by the
+     * existing `MJ: User Favorites` entity. `null` while loading; a Set
+     * once populated so card-side toggling is O(1).
+     */
+    favoriteListIds = new Set();
+    /** When true, only favorited lists appear in the grid. */
+    showOnlyFavorites = false;
     allLists = [];
     filteredLists = [];
     categories = [];
@@ -825,6 +907,29 @@ let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponen
     // Sharing dialog state
     showShareDialog = false;
     shareDialogConfig = null;
+    // Viewer-perspective gating (Phase 2.8). Capabilities are computed
+    // lazily when the user opens the context menu — running per-card
+    // would mean N permission-resolve calls per browse render. The
+    // resolved level is cached on the item so re-opening the same menu
+    // doesn't refetch.
+    contextItemCapabilities = CapabilitiesForLevel('Owner');
+    capabilityCache = new Map();
+    // Tracks whether the in-memory categories list is known-stale
+    // relative to the DB. Flipped to true by the BaseEntity event
+    // subscription whenever any `MJ: List Categories` row is saved or
+    // deleted (most often from the Categories tab next door). Reset to
+    // false after `refreshCategoriesForDialog` reloads. Initial true so
+    // the first dialog open always populates from a fresh fetch.
+    categoriesDirty = true;
+    // Invitations / audit log dialogs (mockups 16, 18) — opened from
+    // the share dialog. Each dialog binds to a single list at a time,
+    // tracked by `activeShareListId`/`activeShareListName` lifted from
+    // shareDialogConfig at open time so we keep the context after the
+    // share dialog closes.
+    showInvitationsDialog = false;
+    showAuditLogDialog = false;
+    activeShareListId = null;
+    activeShareListName = null;
     entityColorMap = new Map();
     entityIconMap = new Map();
     categoryMap = new Map();
@@ -861,9 +966,38 @@ let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponen
     }
     async ngOnInit() {
         super.ngOnInit();
+        this.subscribeToCategoryChanges();
         await this.loadData();
         this.NotifyLoadComplete();
     }
+    /**
+     * Mark the in-memory categories list dirty whenever any BaseEntity
+     * raises a save / delete event for `MJ: List Categories`. The
+     * Create/Edit dialog uses this flag to skip the per-open RunView
+     * unless something has actually changed since last load — keeps the
+     * dialog snappy without showing stale categories.
+     *
+     * Subscribes to MJGlobal's event bus rather than wiring each
+     * category entity's per-instance listener, because the Categories
+     * tab creates fresh BaseEntity instances we can't see from here.
+     */
+    subscribeToCategoryChanges() {
+        MJGlobal.Instance.GetEventListener()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((mjEvt) => {
+            if (mjEvt.eventCode !== BaseEntity.BaseEventCode)
+                return;
+            const beEvt = mjEvt.args;
+            if (!beEvt)
+                return;
+            const entityName = beEvt.baseEntity?.EntityInfo.Name ?? beEvt.entityName;
+            if (entityName !== 'MJ: List Categories')
+                return;
+            if (beEvt.type === 'save' || beEvt.type === 'delete') {
+                this.categoriesDirty = true;
+            }
+        });
+    }
     ngOnDestroy() {
         super.ngOnDestroy();
         this.destroy$.next();
@@ -875,12 +1009,17 @@ let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponen
             const md = this.ProviderToUse;
             const rv = RunView.FromMetadataProvider(this.ProviderToUse);
             this.currentUserId = md.CurrentUser?.ID || '';
-            // Load all lists, categories, details, and users in parallel
+            // BypassCache on Lists + List Details: after a delete/duplicate, the
+            // RunView cache for these entities doesn't always reflect the latest
+            // state in time (event-driven invalidation races the immediate
+            // refresh). Trading a small perf hit for correctness here is worth
+            // it — categories and users stay cache-warm.
             const [listsResult, categoriesResult, detailsResult, usersResult] = await rv.RunViews([
                 {
                     EntityName: 'MJ: Lists',
                     OrderBy: 'Name',
-                    ResultType: 'entity_object'
+                    ResultType: 'entity_object',
+                    BypassCache: true
                 },
                 {
                     EntityName: 'MJ: List Categories',
@@ -890,7 +1029,8 @@ let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponen
                 {
                     EntityName: 'MJ: List Details',
                     Fields: ['ListID'],
-                    ResultType: 'simple'
+                    ResultType: 'simple',
+                    BypassCache: true
                 },
                 {
                     EntityName: 'MJ: Users',
@@ -913,6 +1053,9 @@ let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponen
             }
             // Build flat categories for dropdown
             this.flatCategories = this.buildFlatCategories(this.categories);
+            // loadData() already pulled fresh categories — clear the dirty
+            // flag so the first dialog open doesn't redundantly refetch.
+            this.categoriesDirty = false;
             // Build user map
             const userMap = new Map();
             for (const user of users) {
@@ -956,6 +1099,8 @@ let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponen
             ];
             this.applyFilters();
             this.buildCategoryTree();
+            // Load favorites in parallel — not critical-path, but cheap.
+            void this.loadFavorites();
             // Load sharing info in the background
             this.loadSharingInfo();
         }
@@ -1029,7 +1174,61 @@ let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponen
     setViewMode(mode) {
         this.viewMode = mode;
     }
-    onSearchChange(_term) {
+    /** View-mode options for the shared <mj-view-toggle>. */
+    listViewOptions = [
+        { key: 'table', icon: 'fa-solid fa-table-list', title: 'Table view' },
+        { key: 'card', icon: 'fa-solid fa-grip', title: 'Card view' },
+        { key: 'hierarchy', icon: 'fa-solid fa-folder-tree', title: 'Category view' },
+    ];
+    /** Values record consumed by the centralized <mj-filter-panel>. */
+    get listFilterValues() {
+        return { selectedOwner: this.selectedOwner, selectedEntity: this.selectedEntity };
+    }
+    /** Field config consumed by the centralized <mj-filter-panel>. */
+    get listFilterFields() {
+        return [
+            {
+                key: 'selectedOwner',
+                type: 'dropdown',
+                label: 'Owner',
+                icon: 'fa-solid fa-user',
+                options: this.ownerOptions.map(o => ({ text: o.name, value: o.value })),
+            },
+            {
+                key: 'selectedEntity',
+                type: 'dropdown',
+                label: 'Entity',
+                icon: 'fa-solid fa-table',
+                filterable: this.entityOptions.length > 10,
+                options: this.entityOptions.map(o => ({ text: o.name, value: o.value })),
+            },
+        ];
+    }
+    /** Receive popover updates and apply them. */
+    onFilterValuesChange(values) {
+        this.selectedOwner = values['selectedOwner'] ?? 'mine';
+        this.selectedEntity = values['selectedEntity'] ?? 'all';
+        this.applyFilters();
+        this.buildCategoryTree();
+    }
+    /** Reset popover filters to defaults; leaves searchTerm alone. */
+    resetPopoverFilters() {
+        this.selectedOwner = 'mine';
+        this.selectedEntity = 'all';
+        this.applyFilters();
+        this.buildCategoryTree();
+    }
+    /** Active filter count for the popover badge (excludes searchTerm). */
+    get ActiveFilterCount() {
+        let n = 0;
+        if (this.selectedOwner && this.selectedOwner !== 'mine')
+            n++;
+        if (this.selectedEntity && this.selectedEntity !== 'all')
+            n++;
+        return n;
+    }
+    onSearchChange(term) {
+        this.searchTerm = term;
         this.applyFilters();
         this.buildCategoryTree();
     }
@@ -1078,6 +1277,16 @@ let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponen
         if (this.selectedEntity !== 'all') {
             result = result.filter(item => item.entityName === this.selectedEntity);
         }
+        // Tag filter (Phase 4.3 — intersection of all active tags).
+        if (this.tagFilteredListIds !== null) {
+            const matches = this.tagFilteredListIds;
+            result = result.filter(item => matches.has(item.list.ID));
+        }
+        // Favorites-only toggle (Phase 5.3).
+        if (this.showOnlyFavorites) {
+            const favs = this.favoriteListIds;
+            result = result.filter(item => favs.has(item.list.ID));
+        }
         // Sort
         switch (this.selectedSort) {
             case 'name':
@@ -1145,14 +1354,215 @@ let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponen
         const appId = this.Data?.Configuration?.applicationId || '';
         this.tabService.OpenList(item.list.ID, item.list.Name, appId);
     }
+    /**
+     * Handle a tag chip click on a list card — adds the tag to the
+     * filter row (multi-tag = AND). Wired by Phase 4.3; the chip
+     * component emits the (TagID, Name) pair so we can both display
+     * the chip name and filter by ID.
+     */
+    onCardTagClicked(payload) {
+        if (this.tagFilters.some((f) => f.TagID === payload.TagID))
+            return;
+        this.tagFilters = [...this.tagFilters, payload];
+        void this.recomputeTagMembership();
+    }
+    /** Remove a tag from the filter row. */
+    removeTagFilter(tagId) {
+        this.tagFilters = this.tagFilters.filter((f) => f.TagID !== tagId);
+        void this.recomputeTagMembership();
+    }
+    /** Clear all active tag filters. */
+    clearTagFilters() {
+        this.tagFilters = [];
+        this.tagFilteredListIds = null;
+        this.applyFilters();
+    }
+    /**
+     * Resolve which lists have ALL active tags. Done server-side so the
+     * filter works regardless of which lists the user has scrolled past.
+     * Result is cached on `tagFilteredListIds`; `applyFilters` consumes it.
+     */
+    async recomputeTagMembership() {
+        if (this.tagFilters.length === 0) {
+            this.tagFilteredListIds = null;
+            this.applyFilters();
+            return;
+        }
+        try {
+            const md = this.ProviderToUse;
+            const listsEntity = md.Entities.find((e) => e.Name === 'MJ: Lists');
+            if (!listsEntity) {
+                this.tagFilteredListIds = new Set();
+                this.applyFilters();
+                return;
+            }
+            const tagIds = this.tagFilters.map((f) => `'${f.TagID}'`).join(',');
+            const rv = RunView.FromMetadataProvider(md);
+            const result = await rv.RunView({
+                EntityName: 'MJ: Tagged Items',
+                ExtraFilter: `EntityID='${listsEntity.ID}' AND TagID IN (${tagIds})`,
+                Fields: ['RecordID', 'TagID'],
+                ResultType: 'simple',
+            });
+            // Intersection: count tag hits per list, keep only those with
+            // exactly `tagFilters.length` matches (one per required tag).
+            const counts = new Map();
+            for (const row of result.Results ?? []) {
+                const id = String(row.RecordID);
+                counts.set(id, (counts.get(id) ?? 0) + 1);
+            }
+            const required = this.tagFilters.length;
+            const matches = new Set();
+            for (const [id, count] of counts) {
+                if (count >= required)
+                    matches.add(id);
+            }
+            this.tagFilteredListIds = matches;
+        }
+        catch (e) {
+            // On failure, fall back to "no match" so the user sees an empty
+            // state rather than every list — avoids leaking unfiltered data
+            // when the filter intent failed silently.
+            this.tagFilteredListIds = new Set();
+        }
+        this.applyFilters();
+    }
+    /**
+     * Load the current user's favorite lists into `favoriteListIds`.
+     * Cheap — typically <100 rows per user. Driven by the `MJ: User
+     * Favorites` entity scoped by the Lists EntityID. Best-effort: on
+     * failure the star icons just stay dim.
+     */
+    async loadFavorites() {
+        try {
+            const md = this.ProviderToUse;
+            const listsEntity = md.Entities.find((e) => e.Name === 'MJ: Lists');
+            if (!listsEntity || !md.CurrentUser)
+                return;
+            const rv = RunView.FromMetadataProvider(md);
+            const result = await rv.RunView({
+                EntityName: 'MJ: User Favorites',
+                ExtraFilter: `UserID='${md.CurrentUser.ID}' AND EntityID='${listsEntity.ID}'`,
+                Fields: ['RecordID'],
+                ResultType: 'simple',
+            });
+            this.favoriteListIds = new Set((result.Results ?? []).map((r) => String(r.RecordID)));
+        }
+        catch {
+            // Silent — favorites are a polish feature, not load-bearing.
+            this.favoriteListIds = new Set();
+        }
+    }
+    /**
+     * Toggle a list's favorite state. Optimistic: flips the local Set
+     * first, then writes through. Reverts on failure.
+     */
+    async toggleFavorite(event, item) {
+        event.stopPropagation();
+        const wasFav = this.favoriteListIds.has(item.list.ID);
+        // Optimistic update.
+        if (wasFav)
+            this.favoriteListIds.delete(item.list.ID);
+        else
+            this.favoriteListIds.add(item.list.ID);
+        // Re-trigger filter recompute since the favorites-only toggle
+        // may be on.
+        this.applyFilters();
+        try {
+            const md = this.ProviderToUse;
+            const listsEntity = md.Entities.find((e) => e.Name === 'MJ: Lists');
+            if (!listsEntity || !md.CurrentUser)
+                throw new Error('Cannot resolve user favorites entity');
+            if (wasFav) {
+                // Find + delete the existing favorite row.
+                const rv = RunView.FromMetadataProvider(md);
+                const result = await rv.RunView({
+                    EntityName: 'MJ: User Favorites',
+                    ExtraFilter: `UserID='${md.CurrentUser.ID}' AND EntityID='${listsEntity.ID}' AND RecordID='${item.list.ID}'`,
+                    ResultType: 'entity_object',
+                });
+                for (const row of result.Results ?? [])
+                    await row.Delete();
+            }
+            else {
+                const fav = await md.GetEntityObject('MJ: User Favorites', md.CurrentUser);
+                fav.NewRecord();
+                fav.UserID = md.CurrentUser.ID;
+                fav.EntityID = listsEntity.ID;
+                fav.RecordID = item.list.ID;
+                await fav.Save();
+            }
+        }
+        catch {
+            // Revert on failure.
+            if (wasFav)
+                this.favoriteListIds.add(item.list.ID);
+            else
+                this.favoriteListIds.delete(item.list.ID);
+            this.applyFilters();
+        }
+    }
+    isFavorite(listId) {
+        return this.favoriteListIds.has(listId);
+    }
+    toggleShowOnlyFavorites() {
+        this.showOnlyFavorites = !this.showOnlyFavorites;
+        this.applyFilters();
+    }
     openListMenu(event, item) {
         event.stopPropagation();
         const mouseEvent = event;
         this.selectedContextItem = item;
         this.contextMenuX = mouseEvent.clientX;
         this.contextMenuY = mouseEvent.clientY;
+        // Fast path: owners always have full capabilities. Avoid an extra
+        // permission-resolve round trip for the common case.
+        if (item.isOwner) {
+            this.contextItemCapabilities = CapabilitiesForLevel('Owner');
+            this.showContextMenu = true;
+            return;
+        }
+        // Render the menu immediately with a conservative viewer-level cap
+        // set, then refine via async resolve. The flicker is a single tick
+        // — and viewers/editors stay correctly gated even if resolve fails.
+        const cached = this.capabilityCache.get(item.list.ID);
+        if (cached !== undefined) {
+            this.contextItemCapabilities = CapabilitiesForLevel(cached);
+        }
+        else {
+            this.contextItemCapabilities = CapabilitiesForLevel('View');
+            void this.refineContextCapabilities(item.list.ID);
+        }
         this.showContextMenu = true;
     }
+    /** Resolve the current user's permission level for a list and update
+     *  the open context menu in place. Cached so re-opening the same menu
+     *  doesn't re-hit the resolver. */
+    async refineContextCapabilities(listId) {
+        try {
+            const currentUserId = this.ProviderToUse.CurrentUser?.ID;
+            if (!currentUserId) {
+                // No user context — leave the conservative fallback in place.
+                return;
+            }
+            // Go through the Angular sharing service rather than instantiating the
+            // server-side `ListSharing` class directly. The service hits the GraphQL
+            // surface, which is the only sanctioned client→server path; the server
+            // package writes audit logs + permission rows that have no business
+            // running in a browser bundle.
+            const level = (await this.listSharingService.getUserPermissionLevel(listId, currentUserId));
+            this.capabilityCache.set(listId, level);
+            // Only mutate state if the user is still on this same menu — they
+            // may have closed it before resolve finished.
+            if (this.showContextMenu && this.selectedContextItem && UUIDsEqual(this.selectedContextItem.list.ID, listId)) {
+                this.contextItemCapabilities = CapabilitiesForLevel(level);
+                this.cdr.detectChanges();
+            }
+        }
+        catch {
+            // Conservative fallback already applied at menu open time.
+        }
+    }
     closeContextMenu() {
         this.showContextMenu = false;
         this.selectedContextItem = null;
@@ -1166,6 +1576,10 @@ let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponen
         this.selectedCategoryId = null;
         this.showEntityDropdown = false;
         this.showCreateDialog = true;
+        // Refresh categories so newly-created ones appear without a page
+        // reload. Cheap RunView; runs in the background while the user is
+        // typing the list name.
+        void this.refreshCategoriesForDialog();
     }
     editList() {
         if (!this.selectedContextItem)
@@ -1177,8 +1591,49 @@ let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponen
         this.selectedEntityId = list.EntityID;
         this.entitySearchTerm = list.Entity || '';
         this.selectedCategoryId = list.CategoryID || null;
-        this.showCreateDialog = true;
+        // Ensure no stale state from a previous Create attempt — the entity
+        // dropdown portal renders at z-index 10002 and could otherwise sit on
+        // top of the edit dialog and block interaction.
+        this.showEntityDropdown = false;
+        // Close the context menu BEFORE opening the dialog. Doing it after
+        // leaves a one-tick window where both the menu and the modal-overlay
+        // are stacked, and the menu's outer click-overlay can swallow the
+        // first click into the form fields below it.
         this.closeContextMenu();
+        this.showCreateDialog = true;
+        this.cdr.detectChanges();
+        void this.refreshCategoriesForDialog();
+    }
+    /** Re-pull MJ: List Categories so the dropdown reflects any
+     *  newly-created categories. Skips the round trip when nothing has
+     *  changed since the last load — `categoriesDirty` is flipped on
+     *  by the BaseEntity event subscription whenever a category row
+     *  is saved/deleted, so the only times this actually fetches are
+     *  (a) the first dialog open, and (b) after the user touched a
+     *  category somewhere else. */
+    async refreshCategoriesForDialog() {
+        if (!this.categoriesDirty)
+            return;
+        try {
+            const rv = RunView.FromMetadataProvider(this.ProviderToUse);
+            const result = await rv.RunView({
+                EntityName: 'MJ: List Categories',
+                OrderBy: 'Name',
+                ResultType: 'simple',
+            });
+            if (!result.Success)
+                return;
+            this.categories = (result.Results ?? []);
+            this.categoryMap.clear();
+            for (const cat of this.categories)
+                this.categoryMap.set(cat.ID, cat);
+            this.flatCategories = this.buildFlatCategories(this.categories);
+            this.categoriesDirty = false;
+            this.cdr.detectChanges();
+        }
+        catch {
+            // Best-effort — the dialog still works with the previously-loaded list.
+        }
     }
     selectEntity(entity) {
         this.selectedEntityId = entity.ID;
@@ -1223,7 +1678,7 @@ let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponen
         try {
             const md = this.ProviderToUse;
             const rv = RunView.FromMetadataProvider(this.ProviderToUse);
-            const newList = await md.GetEntityObject('MJ: Lists');
+            const newList = await md.GetEntityObject('MJ: Lists', md.CurrentUser);
             newList.Name = `${listToDuplicate.Name} (Copy)`;
             newList.Description = listToDuplicate.Description;
             newList.EntityID = listToDuplicate.EntityID;
@@ -1234,26 +1689,45 @@ let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponen
                 this.notificationService.CreateSimpleNotification('Failed to duplicate list', 'error', 4000);
                 return;
             }
+            // BypassCache to avoid any stale RunView cache that might mask members.
+            // High MaxRows to cover large lists; entity_object so we have typed access.
             const itemsResult = await rv.RunView({
                 EntityName: 'MJ: List Details',
                 ExtraFilter: `ListID = '${listToDuplicate.ID}'`,
-                ResultType: 'entity_object'
+                ResultType: 'entity_object',
+                MaxRows: 100000,
+                BypassCache: true
             });
-            if (itemsResult.Success && itemsResult.Results.length > 0) {
-                let copiedCount = 0;
-                for (const item of itemsResult.Results) {
-                    const newItem = await md.GetEntityObject('MJ: List Details');
+            if (!itemsResult.Success) {
+                console.error('Duplicate: failed to load source list members', itemsResult.ErrorMessage);
+                this.notificationService.CreateSimpleNotification(`Could not load source list members: ${itemsResult.ErrorMessage || 'unknown'}`, 'error', 6000);
+                return;
+            }
+            const sourceItems = itemsResult.Results ?? [];
+            if (sourceItems.length === 0) {
+                this.notificationService.CreateSimpleNotification('List duplicated (source had no records)', 'success', 3000);
+            }
+            else {
+                // Batch all detail inserts into one transaction group so this is
+                // a single round-trip instead of 1-per-row. All-or-nothing: if any
+                // row fails server-side validation the whole group rolls back.
+                const tg = await md.CreateTransactionGroup();
+                for (const item of sourceItems) {
+                    const newItem = await md.GetEntityObject('MJ: List Details', md.CurrentUser);
                     newItem.ListID = newList.ID;
                     newItem.RecordID = item.RecordID;
                     newItem.Sequence = item.Sequence;
-                    const itemSaved = await newItem.Save();
-                    if (itemSaved)
-                        copiedCount++;
+                    newItem.TransactionGroup = tg;
+                    await newItem.Save(); // queued into tg, not sent yet
+                }
+                const submitted = await tg.Submit();
+                if (submitted) {
+                    this.notificationService.CreateSimpleNotification(`List duplicated with ${sourceItems.length} item${sourceItems.length !== 1 ? 's' : ''}`, 'success', 3000);
+                }
+                else {
+                    console.error('Duplicate: transaction group submit failed');
+                    this.notificationService.CreateSimpleNotification(`Duplicated list but failed to copy ${sourceItems.length} items — see console`, 'error', 6000);
                 }
-                this.notificationService.CreateSimpleNotification(`List duplicated with ${copiedCount} item${copiedCount !== 1 ? 's' : ''}`, 'success', 3000);
-            }
-            else {
-                this.notificationService.CreateSimpleNotification('List duplicated successfully', 'success', 3000);
             }
             await this.loadData();
         }
@@ -1287,9 +1761,31 @@ let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponen
         this.isDeleting = true;
         this.cdr.detectChanges();
         try {
+            // spDeleteList doesn't cascade to MJ: List Details, so the FK
+            // constraint (FK_ListDetail_List) blocks the delete if the list
+            // has any members. Cascade-delete the details first in a
+            // transaction group so the whole thing rolls back if any single
+            // delete fails. The proper long-term fix is a migration that
+            // adds ON DELETE CASCADE (or extends the SP); this keeps the UI
+            // unblocked in the meantime.
+            const cascadeOk = await this.cascadeDeleteListMembers(listToDelete.ID);
+            if (!cascadeOk) {
+                this.notificationService.CreateSimpleNotification(`Failed to delete list members for "${listName}" — list not deleted`, 'error', 6000);
+                return;
+            }
             const deleted = await listToDelete.Delete();
             if (deleted) {
                 this.notificationService.CreateSimpleNotification(`"${listName}" deleted`, 'success', 3000);
+                // Optimistic removal from local state so the card disappears
+                // immediately. Without this, the user sees the just-deleted list
+                // until loadData() rebuilds — and worse, can click Delete on it
+                // again (which hangs because the in-memory entity still has the
+                // now-deleted record's ID).
+                const deletedId = listToDelete.ID;
+                this.allLists = this.allLists.filter(item => !UUIDsEqual(item.list.ID, deletedId));
+                this.applyFilters();
+                this.buildCategoryTree();
+                this.cdr.detectChanges();
             }
             else {
                 const errorMessage = listToDelete.LatestResult?.Message || 'Unknown error occurred';
@@ -1297,7 +1793,10 @@ let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponen
                 this.notificationService.CreateSimpleNotification(`Failed to delete list: ${errorMessage}`, 'error', 6000);
             }
             this.cancelDelete();
-            await this.loadData();
+            // Authoritative refresh — loadData() now sets BypassCache: true on
+            // the 'MJ: Lists' RunView, so this no longer races the optimistic
+            // local removal against a stale cache.
+            void this.loadData();
         }
         catch (error) {
             console.error('Error deleting list:', error);
@@ -1309,6 +1808,35 @@ let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponen
             this.cdr.detectChanges();
         }
     }
+    /** Delete every MJ: List Details row for a given list in a single
+     *  transaction group. Returns true if everything succeeded (including
+     *  the trivial "no members" case). */
+    async cascadeDeleteListMembers(listId) {
+        const md = this.ProviderToUse;
+        const rv = RunView.FromMetadataProvider(md);
+        const lookup = await rv.RunView({
+            EntityName: 'MJ: List Details',
+            ExtraFilter: `ListID='${listId}'`,
+            ResultType: 'entity_object',
+        });
+        if (!lookup.Success) {
+            console.error('Failed to load list details for cascade-delete:', lookup.ErrorMessage);
+            return false;
+        }
+        const details = lookup.Results ?? [];
+        if (details.length === 0)
+            return true;
+        const tg = await md.CreateTransactionGroup();
+        for (const d of details) {
+            d.TransactionGroup = tg;
+            await d.Delete();
+        }
+        const ok = await tg.Submit();
+        if (!ok) {
+            console.error('Cascade-delete transaction failed for list', listId);
+        }
+        return ok;
+    }
     closeCreateDialog() {
         this.showCreateDialog = false;
         this.editingList = null;
@@ -1326,7 +1854,7 @@ let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponen
                 list = this.editingList;
             }
             else {
-                list = await md.GetEntityObject('MJ: Lists');
+                list = await md.GetEntityObject('MJ: Lists', md.CurrentUser);
                 list.UserID = md.CurrentUser.ID;
                 list.EntityID = this.selectedEntityId;
             }
@@ -1381,6 +1909,36 @@ let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponen
         this.showShareDialog = false;
         this.shareDialogConfig = null;
     }
+    /** "Manage Invitations" clicked inside the share dialog — opens a
+     *  modal hosting `<mj-list-invitations>` for the same list. The
+     *  share dialog is closed so dialogs don't visually stack. */
+    onManageInvitations() {
+        if (!this.shareDialogConfig)
+            return;
+        this.activeShareListId = this.shareDialogConfig.listId;
+        this.activeShareListName = this.shareDialogConfig.listName;
+        this.showShareDialog = false;
+        this.showInvitationsDialog = true;
+        this.cdr.detectChanges();
+    }
+    closeInvitationsDialog() {
+        this.showInvitationsDialog = false;
+        this.cdr.detectChanges();
+    }
+    /** "View audit log" link in share dialog. */
+    onViewAuditLog() {
+        if (!this.shareDialogConfig)
+            return;
+        this.activeShareListId = this.shareDialogConfig.listId;
+        this.activeShareListName = this.shareDialogConfig.listName;
+        this.showShareDialog = false;
+        this.showAuditLogDialog = true;
+        this.cdr.detectChanges();
+    }
+    closeAuditLogDialog() {
+        this.showAuditLogDialog = false;
+        this.cdr.detectChanges();
+    }
     async loadSharingInfo() {
         // Load sharing summaries for all lists that the user owns
         const ownedLists = this.allLists.filter(item => item.isOwner);
@@ -1404,107 +1962,98 @@ 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"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "More options"], [1, "sharing-indicator"], [1, "fa-solid", "fa-share-nodes"], [1, "share-count"], [1, "fa-solid", "fa-lock"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "More options", 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"], ["mjButton", "", "variant", "flat", "size", "sm", 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) {
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 34, vars: 29, consts: [["categoryNodeTemplate", ""], ["entityInput", ""], ["Title", "Lists", "Icon", "fa-solid fa-list-check"], ["meta", ""], ["Label", "lists", 3, "Count", "Total"], ["actions", ""], [3, "ClearAllRequested", "ActiveCount", "ShowClearAll"], [3, "ValuesChange", "Reset", "Fields", "Values"], [3, "KeyChange", "Options", "ActiveKey"], [1, "favorite-filter-toggle", 3, "click", "title"], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click"], [1, "fa-solid", "fa-plus"], ["toolbar", ""], ["Placeholder", "Search lists...", 3, "ValueChange", "Value"], [1, "tag-filter-row"], [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"], [3, "Visible", "Title", "MinWidth", "Width", "Height"], [1, "entity-dropdown-portal", 3, "top", "left", "width", "dropdown-above"], [1, "tag-filter-row__label"], [1, "fa-solid", "fa-tag"], ["type", "button", 1, "tag-filter-chip"], ["type", "button", 1, "tag-filter-row__clear", 3, "click"], ["type", "button", 1, "tag-filter-chip", 3, "click"], [1, "fa-solid", "fa-xmark"], ["text", "Loading lists...", "size", "medium"], [1, "empty-state-icon-wrapper"], [1, "icon-bg"], [1, "fa-solid", "fa-list-check"], [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"], [3, "value"], [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"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "More options", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-ellipsis-v"], [1, "sharing-indicator"], [1, "fa-solid", "fa-share-nodes"], [1, "share-count"], [1, "fa-solid", "fa-lock"], ["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, "favorite-btn", 3, "click", "title"], [1, "card-menu"], [1, "menu-btn", 3, "click"], [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-tags", 3, "click"], ["EntityName", "MJ: Lists", 3, "TagClicked", "Provider", "RecordID", "Editable", "MaxDisplay"], [1, "card-footer"], [1, "owner-tag"], [1, "fa-solid", "fa-user"], [1, "card-footer-right"], [1, "date-info"], [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"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "click"], [1, "context-menu-overlay", 3, "click"], [1, "context-menu"], [1, "menu-item"], [1, "menu-item", 3, "click"], [1, "fa-solid", "fa-copy"], [1, "menu-viewer-hint"], [1, "fa-solid", "fa-pen"], [1, "menu-divider"], [1, "menu-item", "danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "fa-solid", "fa-eye"], [1, "modal-overlay", 3, "click"], [1, "modal-header"], [1, "modal-close", 3, "click"], [1, "fa-solid", "fa-times"], [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", "manageInvitations", "viewAuditLog", "config", "visible"], [3, "Close", "Visible", "Title", "MinWidth", "Width", "Height"], [1, "dialog-content"], [3, "Provider", "ListID", "ListName"], ["mjButton", "", "variant", "outline", 3, "click"], [3, "Provider", "ListID"], [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);
-            i0.ɵɵelementStart(5, "h2");
-            i0.ɵɵtext(6, "Lists");
+            i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 2)(2, "div", 3);
+            i0.ɵɵelement(3, "mj-stat-badge", 4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "div", 5)(5, "mj-filter-popover", 6);
+            i0.ɵɵlistener("ClearAllRequested", function ListsBrowseResource_Template_mj_filter_popover_ClearAllRequested_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.resetPopoverFilters()); });
+            i0.ɵɵelementStart(6, "mj-filter-panel", 7);
+            i0.ɵɵlistener("ValuesChange", function ListsBrowseResource_Template_mj_filter_panel_ValuesChange_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onFilterValuesChange($event)); })("Reset", function ListsBrowseResource_Template_mj_filter_panel_Reset_6_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.resetPopoverFilters()); });
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(7, "button", 7);
-            i0.ɵɵlistener("click", function ListsBrowseResource_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.createNewList()); });
-            i0.ɵɵelement(8, "i", 8);
-            i0.ɵɵelementStart(9, "span");
-            i0.ɵɵtext(10, "New List");
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(11, "div", 9)(12, "div", 10);
-            i0.ɵɵelement(13, "i", 11);
-            i0.ɵɵelementStart(14, "input", 12);
-            i0.ɵɵtwoWayListener("ngModelChange", function ListsBrowseResource_Template_input_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.searchTerm, $event) || (ctx.searchTerm = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵlistener("ngModelChange", function ListsBrowseResource_Template_input_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSearchChange($event)); });
+            i0.ɵɵelementStart(7, "mj-view-toggle", 8);
+            i0.ɵɵlistener("KeyChange", function ListsBrowseResource_Template_mj_view_toggle_KeyChange_7_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.setViewMode($event)); });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(15, ListsBrowseResource_Conditional_15_Template, 2, 0, "button", 13);
+            i0.ɵɵelementStart(8, "button", 9);
+            i0.ɵɵlistener("click", function ListsBrowseResource_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleShowOnlyFavorites()); });
+            i0.ɵɵelement(9, "i");
+            i0.ɵɵtext(10, " Favorites ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(16, "div", 14)(17, "select", 15);
-            i0.ɵɵtwoWayListener("ngModelChange", function ListsBrowseResource_Template_select_ngModelChange_17_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.selectedOwner, $event) || (ctx.selectedOwner = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵlistener("ngModelChange", function ListsBrowseResource_Template_select_ngModelChange_17_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onOwnerFilterChange($event)); });
-            i0.ɵɵrepeaterCreate(18, ListsBrowseResource_For_19_Template, 2, 2, "option", 16, i0.ɵɵrepeaterTrackByIdentity);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(20, "div", 14)(21, "select", 17);
-            i0.ɵɵtwoWayListener("ngModelChange", function ListsBrowseResource_Template_select_ngModelChange_21_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.selectedEntity, $event) || (ctx.selectedEntity = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵlistener("ngModelChange", function ListsBrowseResource_Template_select_ngModelChange_21_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onEntityFilterChange($event)); });
-            i0.ɵɵrepeaterCreate(22, ListsBrowseResource_For_23_Template, 2, 2, "option", 16, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵelementStart(11, "button", 10);
+            i0.ɵɵlistener("click", function ListsBrowseResource_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.createNewList()); });
+            i0.ɵɵelement(12, "i", 11);
+            i0.ɵɵtext(13, " New List ");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(24, "div", 18)(25, "button", 19);
-            i0.ɵɵlistener("click", function ListsBrowseResource_Template_button_click_25_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.setViewMode("table")); });
-            i0.ɵɵelement(26, "i", 20);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(27, "button", 21);
-            i0.ɵɵlistener("click", function ListsBrowseResource_Template_button_click_27_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.setViewMode("card")); });
-            i0.ɵɵelement(28, "i", 22);
+            i0.ɵɵelementStart(14, "div", 12)(15, "mj-page-search", 13);
+            i0.ɵɵlistener("ValueChange", function ListsBrowseResource_Template_mj_page_search_ValueChange_15_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSearchChange($event)); });
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(16, "mj-page-body");
+            i0.ɵɵconditionalCreate(17, ListsBrowseResource_Conditional_17_Template, 8, 0, "div", 14);
+            i0.ɵɵconditionalCreate(18, ListsBrowseResource_Conditional_18_Template, 2, 0, "div", 15);
+            i0.ɵɵconditionalCreate(19, ListsBrowseResource_Conditional_19_Template, 24, 0, "div", 16);
+            i0.ɵɵconditionalCreate(20, ListsBrowseResource_Conditional_20_Template, 11, 0, "div", 17);
+            i0.ɵɵconditionalCreate(21, ListsBrowseResource_Conditional_21_Template, 13, 6, "div", 18);
+            i0.ɵɵtemplate(22, ListsBrowseResource_ng_template_22_Template, 5, 6, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵconditionalCreate(24, ListsBrowseResource_Conditional_24_Template, 1, 0, "div", 19);
+            i0.ɵɵconditionalCreate(25, ListsBrowseResource_Conditional_25_Template, 8, 8, "div", 20);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(29, "button", 23);
-            i0.ɵɵlistener("click", function ListsBrowseResource_Template_button_click_29_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.setViewMode("hierarchy")); });
-            i0.ɵɵelement(30, "i", 24);
-            i0.ɵɵelementEnd()()()();
-            i0.ɵɵconditionalCreate(31, ListsBrowseResource_Conditional_31_Template, 2, 0, "div", 25);
-            i0.ɵɵconditionalCreate(32, ListsBrowseResource_Conditional_32_Template, 24, 0, "div", 26);
-            i0.ɵɵconditionalCreate(33, ListsBrowseResource_Conditional_33_Template, 11, 0, "div", 27);
-            i0.ɵɵconditionalCreate(34, ListsBrowseResource_Conditional_34_Template, 13, 6, "div", 28);
-            i0.ɵɵtemplate(35, ListsBrowseResource_ng_template_35_Template, 5, 6, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵconditionalCreate(37, ListsBrowseResource_Conditional_37_Template, 1, 0, "div", 29);
-            i0.ɵɵconditionalCreate(38, ListsBrowseResource_Conditional_38_Template, 14, 4, "div", 30);
-            i0.ɵɵconditionalCreate(39, ListsBrowseResource_Conditional_39_Template, 1, 0, "div", 31);
-            i0.ɵɵconditionalCreate(40, ListsBrowseResource_Conditional_40_Template, 31, 11, "div", 32);
-            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, 5, 11, "div", 35);
+            i0.ɵɵconditionalCreate(26, ListsBrowseResource_Conditional_26_Template, 1, 0, "div", 21);
+            i0.ɵɵconditionalCreate(27, ListsBrowseResource_Conditional_27_Template, 31, 11, "div", 22);
+            i0.ɵɵconditionalCreate(28, ListsBrowseResource_Conditional_28_Template, 1, 0, "div", 21);
+            i0.ɵɵconditionalCreate(29, ListsBrowseResource_Conditional_29_Template, 20, 5, "div", 23);
+            i0.ɵɵconditionalCreate(30, ListsBrowseResource_Conditional_30_Template, 1, 2, "mj-list-share-dialog", 24);
+            i0.ɵɵconditionalCreate(31, ListsBrowseResource_Conditional_31_Template, 6, 8, "mj-dialog", 25);
+            i0.ɵɵconditionalCreate(32, ListsBrowseResource_Conditional_32_Template, 6, 7, "mj-dialog", 25);
+            i0.ɵɵconditionalCreate(33, ListsBrowseResource_Conditional_33_Template, 5, 11, "div", 26);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵadvance(14);
-            i0.ɵɵtwoWayProperty("ngModel", ctx.searchTerm);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.searchTerm ? 15 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("Count", ctx.filteredLists.length)("Total", ctx.allLists.length);
             i0.ɵɵadvance(2);
-            i0.ɵɵtwoWayProperty("ngModel", ctx.selectedOwner);
+            i0.ɵɵproperty("ActiveCount", ctx.ActiveFilterCount)("ShowClearAll", ctx.ActiveFilterCount > 0);
             i0.ɵɵadvance();
-            i0.ɵɵrepeater(ctx.ownerOptions);
-            i0.ɵɵadvance(3);
-            i0.ɵɵtwoWayProperty("ngModel", ctx.selectedEntity);
+            i0.ɵɵproperty("Fields", ctx.listFilterFields)("Values", ctx.listFilterValues);
             i0.ɵɵadvance();
-            i0.ɵɵrepeater(ctx.entityOptions);
-            i0.ɵɵadvance(3);
-            i0.ɵɵclassProp("active", ctx.viewMode === "table");
-            i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("active", ctx.viewMode === "card");
-            i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("active", ctx.viewMode === "hierarchy");
+            i0.ɵɵproperty("Options", ctx.listViewOptions)("ActiveKey", ctx.viewMode);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("favorite-filter-toggle--active", ctx.showOnlyFavorites);
+            i0.ɵɵproperty("title", ctx.showOnlyFavorites ? "Showing favorites only" : "Show all lists");
+            i0.ɵɵadvance();
+            i0.ɵɵclassMap(ctx.showOnlyFavorites ? "fa-solid fa-star" : "fa-regular fa-star");
+            i0.ɵɵadvance(6);
+            i0.ɵɵproperty("Value", ctx.searchTerm);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.isLoading ? 31 : -1);
+            i0.ɵɵconditional(ctx.tagFilters.length > 0 ? 17 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isLoading ? 18 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isLoading && ctx.allLists.length === 0 ? 32 : -1);
+            i0.ɵɵconditional(!ctx.isLoading && ctx.allLists.length === 0 ? 19 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isLoading && ctx.allLists.length > 0 && ctx.filteredLists.length === 0 ? 33 : -1);
+            i0.ɵɵconditional(!ctx.isLoading && ctx.allLists.length > 0 && ctx.filteredLists.length === 0 ? 20 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isLoading && ctx.filteredLists.length > 0 ? 34 : -1);
+            i0.ɵɵconditional(!ctx.isLoading && ctx.filteredLists.length > 0 ? 21 : -1);
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.showContextMenu ? 37 : -1);
+            i0.ɵɵconditional(ctx.showContextMenu ? 24 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showContextMenu ? 25 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showCreateDialog ? 26 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showContextMenu ? 38 : -1);
+            i0.ɵɵconditional(ctx.showCreateDialog ? 27 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showCreateDialog ? 39 : -1);
+            i0.ɵɵconditional(ctx.showDeleteConfirm ? 28 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showCreateDialog ? 40 : -1);
+            i0.ɵɵconditional(ctx.showDeleteConfirm ? 29 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showDeleteConfirm ? 41 : -1);
+            i0.ɵɵconditional(ctx.shareDialogConfig ? 30 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showDeleteConfirm ? 42 : -1);
+            i0.ɵɵconditional(ctx.showInvitationsDialog && ctx.activeShareListId ? 31 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.shareDialogConfig ? 43 : -1);
+            i0.ɵɵconditional(ctx.showAuditLogDialog && ctx.activeShareListId ? 32 : -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.MJButtonDirective, i7.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 });
+            i0.ɵɵconditional(ctx.showEntityDropdown && !ctx.editingList ? 33 : -1);
+        } }, dependencies: [i4.NgTemplateOutlet, i5.NgSelectOption, i5.ɵNgSelectMultipleOption, i5.DefaultValueAccessor, i5.SelectControlValueAccessor, i5.NgControlStatus, i5.NgModel, i6.MJButtonDirective, i6.MJDialogComponent, i6.MJDialogActionsComponent, i6.MJPageLayoutComponent, i6.MJPageHeaderComponent, i6.MJPageBodyComponent, i6.MJPageSearchComponent, i6.MJFilterPopoverComponent, i6.MJFilterPanelComponent, i6.MJViewToggleComponent, i6.MJStatBadgeComponent, i7.LoadingComponent, i3.ListAuditLogComponent, i3.ListInvitationsComponent, i3.ListShareDialogComponent, i3.TagChipsComponent], 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    /* Tag chips on a card. Stop-propagation is set on the wrapper so\n       clicks on chips don't open the underlying list. */\n    .card-tags {\n      margin-top: 8px;\n    }\n\n    /* Favorite star on cards (Phase 5.3). */\n    .favorite-btn {\n      background: none;\n      border: none;\n      padding: 4px;\n      margin: -4px;\n      cursor: pointer;\n      color: var(--mj-text-muted);\n      font-size: 14px;\n      border-radius: 4px;\n      transition: color 0.12s ease, background 0.12s ease;\n    }\n\n    .favorite-btn:hover {\n      background: var(--mj-bg-surface-card);\n      color: var(--mj-status-warning);\n    }\n\n    .favorite-btn--active {\n      color: var(--mj-status-warning);\n    }\n\n    /* Favorites-only toggle in the toolbar. */\n    .favorite-filter-toggle {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: none;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      font-size: 12.5px;\n      color: var(--mj-text-secondary);\n      cursor: pointer;\n    }\n\n    .favorite-filter-toggle:hover {\n      border-color: var(--mj-status-warning);\n      color: var(--mj-status-warning);\n    }\n\n    .favorite-filter-toggle--active {\n      background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n      border-color: var(--mj-status-warning);\n      color: var(--mj-status-warning);\n      font-weight: 600;\n    }\n\n    /* Active-tag filter row above the grid (Phase 4.3). */\n    .tag-filter-row {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 12px;\n      margin-bottom: 12px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px dashed var(--mj-border-default);\n      border-radius: 8px;\n      font-size: 12.5px;\n    }\n\n    .tag-filter-row__label {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .tag-filter-chip {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 2px 10px;\n      border-radius: 999px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n      border: 1px solid var(--mj-brand-primary);\n      font-size: 11.5px;\n      cursor: pointer;\n    }\n\n    .tag-filter-chip:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n    }\n\n    .tag-filter-row__clear {\n      background: none;\n      border: none;\n      color: var(--mj-text-link);\n      font-size: 11.5px;\n      cursor: pointer;\n      margin-left: auto;\n    }\n\n    .tag-filter-row__clear:hover {\n      text-decoration: underline;\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    .menu-viewer-hint {\n      padding: 10px 14px;\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-style: italic;\n    }\n    .menu-viewer-hint i { color: var(--mj-text-muted); }\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')
@@ -1513,92 +2062,91 @@ export { ListsBrowseResource };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListsBrowseResource, [{
         type: Component,
         args: [{ standalone: false, selector: 'mj-lists-browse-resource', template: `
-    <div class="lists-browse-container">
-      <!-- Header -->
-      <div class="browse-header">
-        <div class="header-row">
-          <div class="header-title">
-            <i class="fa-solid fa-list-check"></i>
-            <h2>Lists</h2>
-          </div>
-          <button class="btn-create" (click)="createNewList()">
-            <i class="fa-solid fa-plus"></i>
-            <span>New List</span>
+    <mj-page-layout>
+      <mj-page-header Title="Lists" Icon="fa-solid fa-list-check">
+        <!-- X-of-Y filtered count earns its meta spot per chrome conventions §2. -->
+        <div meta>
+          <mj-stat-badge
+            [Count]="filteredLists.length"
+            [Total]="allLists.length"
+            Label="lists">
+          </mj-stat-badge>
+        </div>
+        <div actions>
+          <mj-filter-popover
+            [ActiveCount]="ActiveFilterCount"
+            [ShowClearAll]="ActiveFilterCount > 0"
+            (ClearAllRequested)="resetPopoverFilters()">
+            <mj-filter-panel
+              [Fields]="listFilterFields"
+              [Values]="listFilterValues"
+              (ValuesChange)="onFilterValuesChange($event)"
+              (Reset)="resetPopoverFilters()">
+            </mj-filter-panel>
+          </mj-filter-popover>
+
+          <mj-view-toggle
+            [Options]="listViewOptions"
+            [ActiveKey]="viewMode"
+            (KeyChange)="setViewMode($any($event))">
+          </mj-view-toggle>
+
+          <!-- Favorites-only toggle (Phase 5.3). Sits next to the view toggle
+               so it reads as "filter scope" alongside view mode. -->
+          <button
+            class="favorite-filter-toggle"
+            [class.favorite-filter-toggle--active]="showOnlyFavorites"
+            (click)="toggleShowOnlyFavorites()"
+            [title]="showOnlyFavorites ? 'Showing favorites only' : 'Show all lists'">
+            <i [class]="showOnlyFavorites ? 'fa-solid fa-star' : 'fa-regular fa-star'"></i>
+            Favorites
+          </button>
+
+          <button mjButton variant="primary" size="sm" (click)="createNewList()">
+            <i class="fa-solid fa-plus"></i> New List
           </button>
         </div>
+        <div toolbar>
+          <mj-page-search
+            Placeholder="Search lists..."
+            [Value]="searchTerm"
+            (ValueChange)="onSearchChange($event)">
+          </mj-page-search>
+        </div>
+      </mj-page-header>
+
+      <mj-page-body>
     
-        <div class="header-actions">
-          <div class="search-box">
-            <i class="fa-solid fa-search"></i>
-            <input
-              type="text"
-              placeholder="Search lists..."
-              [(ngModel)]="searchTerm"
-              (ngModelChange)="onSearchChange($event)" />
-            @if (searchTerm) {
-              <button class="clear-search" (click)="clearSearch()">
-                <i class="fa-solid fa-times"></i>
-              </button>
-            }
-          </div>
-    
-          <div class="filter-group">
-            <select
-              [(ngModel)]="selectedOwner"
-              (ngModelChange)="onOwnerFilterChange($event)"
-              class="filter-select"
-              title="Filter by owner">
-              @for (opt of ownerOptions; track opt) {
-                <option [value]="opt.value">{{opt.name}}</option>
-              }
-            </select>
-          </div>
-    
-          <div class="filter-group">
-            <select
-              [(ngModel)]="selectedEntity"
-              (ngModelChange)="onEntityFilterChange($event)"
-              class="filter-select"
-              title="Filter by entity">
-              @for (opt of entityOptions; track opt) {
-                <option [value]="opt.value">{{opt.name}}</option>
-              }
-            </select>
-          </div>
-    
-          <div class="view-toggle-group">
-            <button
-              class="view-toggle"
-              [class.active]="viewMode === 'table'"
-              (click)="setViewMode('table')"
-              title="Table view">
-              <i class="fa-solid fa-table-list"></i>
-            </button>
-            <button
-              class="view-toggle"
-              [class.active]="viewMode === 'card'"
-              (click)="setViewMode('card')"
-              title="Card view">
-              <i class="fa-solid fa-grip"></i>
-            </button>
+      <!-- Active tag filters (Phase 4.3). Renders only when at least one
+           tag is active — multi-tag = AND. Clicking a chip's × removes it. -->
+      @if (tagFilters.length > 0) {
+        <div class="tag-filter-row">
+          <span class="tag-filter-row__label">
+            <i class="fa-solid fa-tag"></i>
+            Filtering by tag:
+          </span>
+          @for (f of tagFilters; track f.TagID) {
             <button
-              class="view-toggle"
-              [class.active]="viewMode === 'hierarchy'"
-              (click)="setViewMode('hierarchy')"
-              title="Category view">
-              <i class="fa-solid fa-folder-tree"></i>
+              class="tag-filter-chip"
+              type="button"
+              (click)="removeTagFilter(f.TagID)">
+              {{ f.Name }}
+              <i class="fa-solid fa-xmark"></i>
             </button>
-          </div>
+          }
+          <button class="tag-filter-row__clear" type="button" (click)="clearTagFilters()">
+            Clear all
+          </button>
         </div>
-      </div>
-    
+      }
+
       <!-- Loading State -->
       @if (isLoading) {
         <div class="loading-container">
           <mj-loading text="Loading lists..." size="medium"></mj-loading>
         </div>
       }
-    
+
       <!-- Empty State - No Lists -->
       @if (!isLoading && allLists.length === 0) {
         <div class="empty-state">
@@ -1726,15 +2274,13 @@ export { ListsBrowseResource };
                       </td>
                       <td class="col-updated" role="gridcell">{{formatDate(item.list.__mj_UpdatedAt)}}</td>
                       <td class="col-actions" role="gridcell">
-                        @if (item.isOwner) {
-                          <button mjButton
-                            variant="flat"
-                            size="sm"
-                            (click)="openListMenu($event, item)"
-                            title="More options">
-                            <i class="fa-solid fa-ellipsis-v" aria-hidden="true"></i>
-                          </button>
-                        }
+                        <button mjButton
+                          variant="flat"
+                          size="sm"
+                          (click)="openListMenu($event, item)"
+                          title="More options">
+                          <i class="fa-solid fa-ellipsis-v" aria-hidden="true"></i>
+                        </button>
                       </td>
                     </tr>
                   }
@@ -1756,13 +2302,18 @@ export { ListsBrowseResource };
                     <div class="card-icon" [style.background-color]="getEntityColor(item.entityName)" aria-hidden="true">
                       <i [class]="getEntityIcon(item.entityName)"></i>
                     </div>
-                    @if (item.isOwner) {
-                      <div class="card-menu">
-                        <button class="menu-btn" (click)="openListMenu($event, item)">
-                          <i class="fa-solid fa-ellipsis-v" aria-hidden="true"></i>
-                        </button>
-                      </div>
-                    }
+                    <button
+                      class="favorite-btn"
+                      [class.favorite-btn--active]="isFavorite(item.list.ID)"
+                      (click)="toggleFavorite($event, item)"
+                      [title]="isFavorite(item.list.ID) ? 'Remove from favorites' : 'Add to favorites'">
+                      <i [class]="isFavorite(item.list.ID) ? 'fa-solid fa-star' : 'fa-regular fa-star'"></i>
+                    </button>
+                    <div class="card-menu">
+                      <button class="menu-btn" (click)="openListMenu($event, item)">
+                        <i class="fa-solid fa-ellipsis-v" aria-hidden="true"></i>
+                      </button>
+                    </div>
                   </div>
                   <div class="card-body">
                     <h3 class="card-title">{{item.list.Name}}</h3>
@@ -1779,6 +2330,20 @@ export { ListsBrowseResource };
                         {{item.itemCount}} item{{item.itemCount !== 1 ? 's' : ''}}
                       </span>
                     </div>
+                    <!-- Tag chips (Phase 4). Read-only on cards; click adds the
+                         tag to the filter row above. We stop propagation on
+                         the wrapper so clicks on chips don't also fire the
+                         card's openList handler. -->
+                    <div class="card-tags" (click)="$event.stopPropagation()">
+                      <mj-tag-chips
+                        [Provider]="Provider"
+                        EntityName="MJ: Lists"
+                        [RecordID]="item.list.ID"
+                        [Editable]="false"
+                        [MaxDisplay]="3"
+                        (TagClicked)="onCardTagClicked($event)">
+                      </mj-tag-chips>
+                    </div>
                   </div>
                   <div class="card-footer">
                     <span class="owner-tag" [class.is-me]="item.isOwner">
@@ -1860,13 +2425,11 @@ export { ListsBrowseResource };
                       }
                     </span>
                   </div>
-                  @if (item.isOwner) {
-                    <div class="list-actions">
-                      <button mjButton variant="flat" size="sm" (click)="openListMenu($event, item)">
-                        <i class="fa-solid fa-ellipsis-v" aria-hidden="true"></i>
-                      </button>
-                    </div>
-                  }
+                  <div class="list-actions">
+                    <button mjButton variant="flat" size="sm" (click)="openListMenu($event, item)">
+                      <i class="fa-solid fa-ellipsis-v" aria-hidden="true"></i>
+                    </button>
+                  </div>
                 </div>
               }
             </div>
@@ -1881,32 +2444,53 @@ export { ListsBrowseResource };
         </div>
       </ng-template>
     
-      <!-- Context Menu -->
+      <!-- Context Menu (Phase 2.8 viewer-perspective gating).
+           Items shown depend on contextItemCapabilities, resolved lazily
+           on menu open. Viewers (no Edit/Share/Delete) still see
+           Duplicate. Server-side enforcement remains source of truth;
+           hiding is just UX so users don't see buttons that would fail. -->
       @if (showContextMenu) {
         <div class="context-menu-overlay" (click)="closeContextMenu()"></div>
       }
       @if (showContextMenu) {
         <div class="context-menu" [style.top.px]="contextMenuY" [style.left.px]="contextMenuX">
-          <button class="menu-item" (click)="editList()">
-            <i class="fa-solid fa-pen"></i>
-            Edit
-          </button>
-          <button class="menu-item" (click)="openShareDialog()">
-            <i class="fa-solid fa-share-nodes"></i>
-            Share
-          </button>
+          @if (contextItemCapabilities.CanEdit) {
+            <button class="menu-item" (click)="editList()">
+              <i class="fa-solid fa-pen"></i>
+              Edit
+            </button>
+          }
+          @if (contextItemCapabilities.CanShare) {
+            <button class="menu-item" (click)="openShareDialog()">
+              <i class="fa-solid fa-share-nodes"></i>
+              Share
+            </button>
+          }
           <button class="menu-item" (click)="duplicateList()">
             <i class="fa-solid fa-copy"></i>
             Duplicate
           </button>
-          <div class="menu-divider"></div>
-          <button class="menu-item danger" (click)="confirmDeleteList()">
-            <i class="fa-solid fa-trash"></i>
-            Delete
-          </button>
+          @if (contextItemCapabilities.CanDelete) {
+            <div class="menu-divider"></div>
+            <button class="menu-item danger" (click)="confirmDeleteList()">
+              <i class="fa-solid fa-trash"></i>
+              Delete
+            </button>
+          }
+          @if (!contextItemCapabilities.CanEdit && !contextItemCapabilities.CanShare && !contextItemCapabilities.CanDelete) {
+            <div class="menu-viewer-hint">
+              <i class="fa-solid fa-eye"></i>
+              Viewer access — read only
+            </div>
+          }
         </div>
       }
-    
+      </mj-page-body>
+
+      <!-- Modals/overlays live outside mj-page-body so its stacking context
+           doesn't trap them. Position:fixed overlays would otherwise render
+           behind a sibling overlay div, which silently closes the dialog on
+           any click. -->
       <!-- Create/Edit Dialog -->
       @if (showCreateDialog) {
         <div class="modal-overlay" (click)="closeCreateDialog()"></div>
@@ -2016,9 +2600,54 @@ export { ListsBrowseResource };
           [config]="shareDialogConfig"
           [visible]="showShareDialog"
           (complete)="onShareComplete($event)"
-          (cancel)="onShareCancel()">
+          (cancel)="onShareCancel()"
+          (manageInvitations)="onManageInvitations()"
+          (viewAuditLog)="onViewAuditLog()">
         </mj-list-share-dialog>
       }
+
+      <!-- Invitations Dialog (mockup 16) -->
+      @if (showInvitationsDialog && activeShareListId) {
+        <mj-dialog
+          [Visible]="true"
+          [Title]="'Invitations — ' + (activeShareListName ?? 'List')"
+          (Close)="closeInvitationsDialog()"
+          [MinWidth]="640"
+          [Width]="900"
+          [Height]="640">
+          <div class="dialog-content">
+            <mj-list-invitations
+              [Provider]="ProviderToUse"
+              [ListID]="activeShareListId"
+              [ListName]="activeShareListName">
+            </mj-list-invitations>
+          </div>
+          <mj-dialog-actions>
+            <button mjButton (click)="closeInvitationsDialog()" variant="outline">Close</button>
+          </mj-dialog-actions>
+        </mj-dialog>
+      }
+
+      <!-- Audit Log Dialog (mockup 18) -->
+      @if (showAuditLogDialog && activeShareListId) {
+        <mj-dialog
+          [Visible]="true"
+          [Title]="'Audit Log — ' + (activeShareListName ?? 'List')"
+          (Close)="closeAuditLogDialog()"
+          [MinWidth]="720"
+          [Width]="980"
+          [Height]="680">
+          <div class="dialog-content">
+            <mj-list-audit-log
+              [Provider]="ProviderToUse"
+              [ListID]="activeShareListId">
+            </mj-list-audit-log>
+          </div>
+          <mj-dialog-actions>
+            <button mjButton (click)="closeAuditLogDialog()" variant="outline">Close</button>
+          </mj-dialog-actions>
+        </mj-dialog>
+      }
     
       <!-- Entity Dropdown Portal -->
       @if (showEntityDropdown && !editingList) {
@@ -2044,8 +2673,8 @@ export { ListsBrowseResource };
           </div>
         </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: 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  "] }]
+    </mj-page-layout>
+    `, 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    /* Tag chips on a card. Stop-propagation is set on the wrapper so\n       clicks on chips don't open the underlying list. */\n    .card-tags {\n      margin-top: 8px;\n    }\n\n    /* Favorite star on cards (Phase 5.3). */\n    .favorite-btn {\n      background: none;\n      border: none;\n      padding: 4px;\n      margin: -4px;\n      cursor: pointer;\n      color: var(--mj-text-muted);\n      font-size: 14px;\n      border-radius: 4px;\n      transition: color 0.12s ease, background 0.12s ease;\n    }\n\n    .favorite-btn:hover {\n      background: var(--mj-bg-surface-card);\n      color: var(--mj-status-warning);\n    }\n\n    .favorite-btn--active {\n      color: var(--mj-status-warning);\n    }\n\n    /* Favorites-only toggle in the toolbar. */\n    .favorite-filter-toggle {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: none;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      font-size: 12.5px;\n      color: var(--mj-text-secondary);\n      cursor: pointer;\n    }\n\n    .favorite-filter-toggle:hover {\n      border-color: var(--mj-status-warning);\n      color: var(--mj-status-warning);\n    }\n\n    .favorite-filter-toggle--active {\n      background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n      border-color: var(--mj-status-warning);\n      color: var(--mj-status-warning);\n      font-weight: 600;\n    }\n\n    /* Active-tag filter row above the grid (Phase 4.3). */\n    .tag-filter-row {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 12px;\n      margin-bottom: 12px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px dashed var(--mj-border-default);\n      border-radius: 8px;\n      font-size: 12.5px;\n    }\n\n    .tag-filter-row__label {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .tag-filter-chip {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 2px 10px;\n      border-radius: 999px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n      border: 1px solid var(--mj-brand-primary);\n      font-size: 11.5px;\n      cursor: pointer;\n    }\n\n    .tag-filter-chip:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n    }\n\n    .tag-filter-row__clear {\n      background: none;\n      border: none;\n      color: var(--mj-text-link);\n      font-size: 11.5px;\n      cursor: pointer;\n      margin-left: auto;\n    }\n\n    .tag-filter-row__clear:hover {\n      text-decoration: underline;\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    .menu-viewer-hint {\n      padding: 10px 14px;\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-style: italic;\n    }\n    .menu-viewer-hint i { color: var(--mj-text-muted); }\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']]
@@ -2053,5 +2682,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: 1666 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ListsBrowseResource, { className: "ListsBrowseResource", filePath: "src/Lists/components/lists-browse-resource.component.ts", lineNumber: 1866 }); })();
 //# sourceMappingURL=lists-browse-resource.component.js.map