@memberjunction/ng-dashboard-viewer 5.43.0 → 5.44.0

package/dist/lib/dashboard-browser/dashboard-browser.component.js

@@ -4,36 +4,37 @@ import { UUIDsEqual, HighlightSearchMatches } from '@memberjunction/global';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
 import * as i2 from "@memberjunction/ng-shared-generic";
-import * as i3 from "../breadcrumb/dashboard-breadcrumb.component";
-import * as i4 from "../config-dialogs/confirm-dialog.component";
+import * as i3 from "@memberjunction/ng-ui-components";
+import * as i4 from "../breadcrumb/dashboard-breadcrumb.component";
+import * as i5 from "../config-dialogs/confirm-dialog.component";
 function DashboardBrowserComponent_Conditional_11_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 29);
+    i0.ɵɵelementStart(0, "button", 28);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_11_Conditional_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.EnterSelectionMode()); });
-    i0.ɵɵelement(1, "i", 30);
+    i0.ɵɵelement(1, "i", 29);
     i0.ɵɵtext(2, " Select ");
     i0.ɵɵelementEnd();
 } }
 function DashboardBrowserComponent_Conditional_11_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 28)(1, "span", 31);
+    i0.ɵɵelementStart(0, "div", 27)(1, "span", 30);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 32);
+    i0.ɵɵelementStart(3, "button", 31);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_11_Conditional_1_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.SelectAll()); });
-    i0.ɵɵelement(4, "i", 30);
+    i0.ɵɵelement(4, "i", 29);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 33);
+    i0.ɵɵelementStart(5, "button", 32);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_11_Conditional_1_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnMoveSelected()); });
-    i0.ɵɵelement(6, "i", 34);
+    i0.ɵɵelement(6, "i", 33);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 35);
+    i0.ɵɵelementStart(7, "button", 34);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_11_Conditional_1_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDeleteSelected()); });
-    i0.ɵɵelement(8, "i", 36);
+    i0.ɵɵelement(8, "i", 35);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "button", 37);
+    i0.ɵɵelementStart(9, "button", 36);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_11_Conditional_1_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ExitSelectionMode()); });
-    i0.ɵɵelement(10, "i", 38);
+    i0.ɵɵelement(10, "i", 37);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -45,8 +46,8 @@ function DashboardBrowserComponent_Conditional_11_Conditional_1_Template(rf, ctx
     i0.ɵɵproperty("disabled", !ctx_r1.CanDeleteAnySelected);
 } }
 function DashboardBrowserComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, DashboardBrowserComponent_Conditional_11_Conditional_0_Template, 3, 0, "button", 27);
-    i0.ɵɵconditionalCreate(1, DashboardBrowserComponent_Conditional_11_Conditional_1_Template, 11, 3, "div", 28);
+    i0.ɵɵconditionalCreate(0, DashboardBrowserComponent_Conditional_11_Conditional_0_Template, 3, 0, "button", 26);
+    i0.ɵɵconditionalCreate(1, DashboardBrowserComponent_Conditional_11_Conditional_1_Template, 11, 3, "div", 27);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵconditional(!ctx_r1.IsSelectionMode && ctx_r1.FilteredDashboards.length > 0 ? 0 : -1);
@@ -55,26 +56,26 @@ function DashboardBrowserComponent_Conditional_11_Template(rf, ctx) { if (rf & 1
 } }
 function DashboardBrowserComponent_Conditional_12_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 42)(1, "button", 43);
+    i0.ɵɵelementStart(0, "div", 41)(1, "button", 42);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_12_Conditional_5_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnCreateDashboard()); });
-    i0.ɵɵelement(2, "i", 44);
+    i0.ɵɵelement(2, "i", 43);
     i0.ɵɵtext(3, " Dashboard ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 43);
+    i0.ɵɵelementStart(4, "button", 42);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_12_Conditional_5_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OpenCreateCategoryDialog()); });
-    i0.ɵɵelement(5, "i", 45);
+    i0.ɵɵelement(5, "i", 44);
     i0.ɵɵtext(6, " Category ");
     i0.ɵɵelementEnd()();
 } }
 function DashboardBrowserComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 10)(1, "button", 39);
+    i0.ɵɵelementStart(0, "div", 10)(1, "button", 38);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_12_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.ToggleNewMenu(); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(2, "i", 40);
+    i0.ɵɵelement(2, "i", 39);
     i0.ɵɵtext(3, " New ");
-    i0.ɵɵelement(4, "i", 41);
+    i0.ɵɵelement(4, "i", 40);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, DashboardBrowserComponent_Conditional_12_Conditional_5_Template, 7, 0, "div", 42);
+    i0.ɵɵconditionalCreate(5, DashboardBrowserComponent_Conditional_12_Conditional_5_Template, 7, 0, "div", 41);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -83,32 +84,32 @@ function DashboardBrowserComponent_Conditional_12_Template(rf, ctx) { if (rf & 1
 } }
 function DashboardBrowserComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 46);
+    i0.ɵɵelementStart(0, "div", 45);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_13_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseNewMenu()); });
     i0.ɵɵelementEnd();
 } }
 function DashboardBrowserComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 47);
+    i0.ɵɵelementStart(0, "button", 46);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_18_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ClearSearch()); });
-    i0.ɵɵelement(1, "i", 38);
+    i0.ɵɵelement(1, "i", 37);
     i0.ɵɵelementEnd();
 } }
 function DashboardBrowserComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 48);
+    i0.ɵɵelementStart(0, "button", 47);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_19_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ClearSearch()); });
-    i0.ɵɵelement(1, "i", 49);
+    i0.ɵɵelement(1, "i", 48);
     i0.ɵɵtext(2, " Clear Search ");
     i0.ɵɵelementEnd();
 } }
 function DashboardBrowserComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 18);
-    i0.ɵɵelement(1, "mj-loading", 50);
+    i0.ɵɵelement(1, "mj-loading", 49);
     i0.ɵɵelementEnd();
 } }
 function DashboardBrowserComponent_Conditional_21_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "p", 61);
+    i0.ɵɵelement(0, "p", 60);
 } if (rf & 2) {
     const category_r10 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -116,20 +117,20 @@ function DashboardBrowserComponent_Conditional_21_For_2_Conditional_9_Template(r
 } }
 function DashboardBrowserComponent_Conditional_21_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 53);
+    i0.ɵɵelementStart(0, "div", 52);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_21_For_2_Template_div_click_0_listener() { const category_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.NavigateToCategory(category_r10.ID)); })("dblclick", function DashboardBrowserComponent_Conditional_21_For_2_Template_div_dblclick_0_listener($event) { i0.ɵɵrestoreView(_r9); return i0.ɵɵresetView($event.stopPropagation()); })("dragover", function DashboardBrowserComponent_Conditional_21_For_2_Template_div_dragover_0_listener($event) { const category_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDragOverChildCategory(category_r10.ID, $event)); })("dragleave", function DashboardBrowserComponent_Conditional_21_For_2_Template_div_dragleave_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDragLeaveChildCategory()); })("drop", function DashboardBrowserComponent_Conditional_21_For_2_Template_div_drop_0_listener($event) { const category_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDropOnChildCategory(category_r10.ID, $event)); });
-    i0.ɵɵelementStart(1, "div", 54)(2, "div", 55);
-    i0.ɵɵelement(3, "i", 56);
+    i0.ɵɵelementStart(1, "div", 53)(2, "div", 54);
+    i0.ɵɵelement(3, "i", 55);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 57)(5, "button", 58);
+    i0.ɵɵelementStart(4, "div", 56)(5, "button", 57);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_21_For_2_Template_button_click_5_listener($event) { const category_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDeleteCategory(category_r10, $event)); });
-    i0.ɵɵelement(6, "i", 36);
+    i0.ɵɵelement(6, "i", 35);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(7, "div", 59);
-    i0.ɵɵelement(8, "h3", 60);
-    i0.ɵɵconditionalCreate(9, DashboardBrowserComponent_Conditional_21_For_2_Conditional_9_Template, 1, 1, "p", 61);
-    i0.ɵɵelementStart(10, "div", 62)(11, "span", 63);
-    i0.ɵɵelement(12, "i", 64);
+    i0.ɵɵelementStart(7, "div", 58);
+    i0.ɵɵelement(8, "h3", 59);
+    i0.ɵɵconditionalCreate(9, DashboardBrowserComponent_Conditional_21_For_2_Conditional_9_Template, 1, 1, "p", 60);
+    i0.ɵɵelementStart(10, "div", 61)(11, "span", 62);
+    i0.ɵɵelement(12, "i", 63);
     i0.ɵɵtext(13, " Category ");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -143,9 +144,9 @@ function DashboardBrowserComponent_Conditional_21_For_2_Template(rf, ctx) { if (
 } }
 function DashboardBrowserComponent_Conditional_21_For_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 74);
+    i0.ɵɵelementStart(0, "div", 73);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_21_For_4_Conditional_1_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r13); const dashboard_r12 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.ToggleSelection(dashboard_r12.ID); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "input", 75);
+    i0.ɵɵelementStart(1, "input", 74);
     i0.ɵɵlistener("change", function DashboardBrowserComponent_Conditional_21_For_4_Conditional_1_Template_input_change_1_listener($event) { i0.ɵɵrestoreView(_r13); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -156,25 +157,25 @@ function DashboardBrowserComponent_Conditional_21_For_4_Conditional_1_Template(r
 } }
 function DashboardBrowserComponent_Conditional_21_For_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 76);
+    i0.ɵɵelementStart(0, "button", 75);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_21_For_4_Conditional_6_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r14); const dashboard_r12 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnEditDashboard(dashboard_r12, $event)); });
-    i0.ɵɵelement(1, "i", 77);
+    i0.ɵɵelement(1, "i", 76);
     i0.ɵɵelementEnd();
 } }
 function DashboardBrowserComponent_Conditional_21_For_4_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 78);
+    i0.ɵɵelementStart(0, "button", 77);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_21_For_4_Conditional_7_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r15); const dashboard_r12 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDeleteDashboard(dashboard_r12, $event)); });
-    i0.ɵɵelement(1, "i", 36);
+    i0.ɵɵelement(1, "i", 35);
     i0.ɵɵelementEnd();
 } }
 function DashboardBrowserComponent_Conditional_21_For_4_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 72);
-    i0.ɵɵelement(1, "i", 79);
+    i0.ɵɵelementStart(0, "span", 71);
+    i0.ɵɵelement(1, "i", 78);
     i0.ɵɵelementEnd();
 } }
 function DashboardBrowserComponent_Conditional_21_For_4_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "p", 61);
+    i0.ɵɵelement(0, "p", 60);
 } if (rf & 2) {
     const dashboard_r12 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -182,23 +183,23 @@ function DashboardBrowserComponent_Conditional_21_For_4_Conditional_12_Template(
 } }
 function DashboardBrowserComponent_Conditional_21_For_4_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 65);
+    i0.ɵɵelementStart(0, "div", 64);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_21_For_4_Template_div_click_0_listener($event) { const dashboard_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDashboardClick(dashboard_r12, $event)); })("dblclick", function DashboardBrowserComponent_Conditional_21_For_4_Template_div_dblclick_0_listener($event) { const dashboard_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDashboardDoubleClick(dashboard_r12, $event)); })("dragstart", function DashboardBrowserComponent_Conditional_21_For_4_Template_div_dragstart_0_listener($event) { const dashboard_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDragStart(dashboard_r12, $event)); })("dragend", function DashboardBrowserComponent_Conditional_21_For_4_Template_div_dragend_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDragEnd()); });
-    i0.ɵɵconditionalCreate(1, DashboardBrowserComponent_Conditional_21_For_4_Conditional_1_Template, 2, 1, "div", 66);
-    i0.ɵɵelementStart(2, "div", 54)(3, "div", 67);
-    i0.ɵɵelement(4, "i", 44);
+    i0.ɵɵconditionalCreate(1, DashboardBrowserComponent_Conditional_21_For_4_Conditional_1_Template, 2, 1, "div", 65);
+    i0.ɵɵelementStart(2, "div", 53)(3, "div", 66);
+    i0.ɵɵelement(4, "i", 43);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 57);
-    i0.ɵɵconditionalCreate(6, DashboardBrowserComponent_Conditional_21_For_4_Conditional_6_Template, 2, 0, "button", 68);
-    i0.ɵɵconditionalCreate(7, DashboardBrowserComponent_Conditional_21_For_4_Conditional_7_Template, 2, 0, "button", 69);
+    i0.ɵɵelementStart(5, "div", 56);
+    i0.ɵɵconditionalCreate(6, DashboardBrowserComponent_Conditional_21_For_4_Conditional_6_Template, 2, 0, "button", 67);
+    i0.ɵɵconditionalCreate(7, DashboardBrowserComponent_Conditional_21_For_4_Conditional_7_Template, 2, 0, "button", 68);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 59)(9, "h3", 70);
-    i0.ɵɵelement(10, "span", 71);
-    i0.ɵɵconditionalCreate(11, DashboardBrowserComponent_Conditional_21_For_4_Conditional_11_Template, 2, 0, "span", 72);
+    i0.ɵɵelementStart(8, "div", 58)(9, "h3", 69);
+    i0.ɵɵelement(10, "span", 70);
+    i0.ɵɵconditionalCreate(11, DashboardBrowserComponent_Conditional_21_For_4_Conditional_11_Template, 2, 0, "span", 71);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(12, DashboardBrowserComponent_Conditional_21_For_4_Conditional_12_Template, 1, 1, "p", 61);
-    i0.ɵɵelementStart(13, "div", 62)(14, "span", 63);
-    i0.ɵɵelement(15, "i", 73);
+    i0.ɵɵconditionalCreate(12, DashboardBrowserComponent_Conditional_21_For_4_Conditional_12_Template, 1, 1, "p", 60);
+    i0.ɵɵelementStart(13, "div", 61)(14, "span", 62);
+    i0.ɵɵelement(15, "i", 72);
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -223,8 +224,8 @@ function DashboardBrowserComponent_Conditional_21_For_4_Template(rf, ctx) { if (
 } }
 function DashboardBrowserComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 19);
-    i0.ɵɵrepeaterCreate(1, DashboardBrowserComponent_Conditional_21_For_2_Template, 14, 4, "div", 51, i0.ɵɵcomponentInstance().TrackByCategory, true);
-    i0.ɵɵrepeaterCreate(3, DashboardBrowserComponent_Conditional_21_For_4_Template, 17, 12, "div", 52, i0.ɵɵcomponentInstance().TrackByDashboard, true);
+    i0.ɵɵrepeaterCreate(1, DashboardBrowserComponent_Conditional_21_For_2_Template, 14, 4, "div", 50, i0.ɵɵcomponentInstance().TrackByCategory, true);
+    i0.ɵɵrepeaterCreate(3, DashboardBrowserComponent_Conditional_21_For_4_Template, 17, 12, "div", 51, i0.ɵɵcomponentInstance().TrackByDashboard, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -235,7 +236,7 @@ function DashboardBrowserComponent_Conditional_21_Template(rf, ctx) { if (rf & 1
 } }
 function DashboardBrowserComponent_Conditional_22_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 81)(1, "input", 88);
+    i0.ɵɵelementStart(0, "div", 80)(1, "input", 87);
     i0.ɵɵlistener("change", function DashboardBrowserComponent_Conditional_22_Conditional_2_Template_input_change_1_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.SelectedCount === ctx_r1.FilteredDashboards.length ? ctx_r1.ClearSelection() : ctx_r1.SelectAll()); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -244,25 +245,25 @@ function DashboardBrowserComponent_Conditional_22_Conditional_2_Template(rf, ctx
     i0.ɵɵproperty("checked", ctx_r1.SelectedCount === ctx_r1.FilteredDashboards.length && ctx_r1.FilteredDashboards.length > 0)("indeterminate", ctx_r1.SelectedCount > 0 && ctx_r1.SelectedCount < ctx_r1.FilteredDashboards.length);
 } }
 function DashboardBrowserComponent_Conditional_22_For_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 81);
+    i0.ɵɵelement(0, "div", 80);
 } }
 function DashboardBrowserComponent_Conditional_22_For_12_Template(rf, ctx) { if (rf & 1) {
     const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 89);
+    i0.ɵɵelementStart(0, "div", 88);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_22_For_12_Template_div_click_0_listener() { const category_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.NavigateToCategory(category_r18.ID)); })("dragover", function DashboardBrowserComponent_Conditional_22_For_12_Template_div_dragover_0_listener($event) { const category_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDragOverChildCategory(category_r18.ID, $event)); })("dragleave", function DashboardBrowserComponent_Conditional_22_For_12_Template_div_dragleave_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDragLeaveChildCategory()); })("drop", function DashboardBrowserComponent_Conditional_22_For_12_Template_div_drop_0_listener($event) { const category_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDropOnChildCategory(category_r18.ID, $event)); });
-    i0.ɵɵconditionalCreate(1, DashboardBrowserComponent_Conditional_22_For_12_Conditional_1_Template, 1, 0, "div", 81);
-    i0.ɵɵelementStart(2, "div", 82);
-    i0.ɵɵelement(3, "i", 90)(4, "span", 91);
+    i0.ɵɵconditionalCreate(1, DashboardBrowserComponent_Conditional_22_For_12_Conditional_1_Template, 1, 0, "div", 80);
+    i0.ɵɵelementStart(2, "div", 81);
+    i0.ɵɵelement(3, "i", 89)(4, "span", 90);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 83);
+    i0.ɵɵelementStart(5, "div", 82);
     i0.ɵɵtext(6, " Category ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(7, "div", 84);
-    i0.ɵɵelementStart(8, "div", 92);
+    i0.ɵɵelement(7, "div", 83);
+    i0.ɵɵelementStart(8, "div", 91);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_22_For_12_Template_div_click_8_listener($event) { i0.ɵɵrestoreView(_r17); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(9, "button", 58);
+    i0.ɵɵelementStart(9, "button", 57);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_22_For_12_Template_button_click_9_listener($event) { const category_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDeleteCategory(category_r18, $event)); });
-    i0.ɵɵelement(10, "i", 36);
+    i0.ɵɵelement(10, "i", 35);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const category_r18 = ctx.$implicit;
@@ -275,9 +276,9 @@ function DashboardBrowserComponent_Conditional_22_For_12_Template(rf, ctx) { if
 } }
 function DashboardBrowserComponent_Conditional_22_For_14_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 95);
+    i0.ɵɵelementStart(0, "div", 94);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_22_For_14_Conditional_1_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r21); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "input", 75);
+    i0.ɵɵelementStart(1, "input", 74);
     i0.ɵɵlistener("change", function DashboardBrowserComponent_Conditional_22_For_14_Conditional_1_Template_input_change_1_listener() { i0.ɵɵrestoreView(_r21); const dashboard_r20 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleSelection(dashboard_r20.ID)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -287,43 +288,43 @@ function DashboardBrowserComponent_Conditional_22_For_14_Conditional_1_Template(
     i0.ɵɵproperty("checked", ctx_r1.IsSelected(dashboard_r20.ID));
 } }
 function DashboardBrowserComponent_Conditional_22_For_14_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 72);
-    i0.ɵɵelement(1, "i", 79);
+    i0.ɵɵelementStart(0, "span", 71);
+    i0.ɵɵelement(1, "i", 78);
     i0.ɵɵelementEnd();
 } }
 function DashboardBrowserComponent_Conditional_22_For_14_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 76);
+    i0.ɵɵelementStart(0, "button", 75);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_22_For_14_Conditional_11_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r22); const dashboard_r20 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnEditDashboard(dashboard_r20, $event)); });
-    i0.ɵɵelement(1, "i", 77);
+    i0.ɵɵelement(1, "i", 76);
     i0.ɵɵelementEnd();
 } }
 function DashboardBrowserComponent_Conditional_22_For_14_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 78);
+    i0.ɵɵelementStart(0, "button", 77);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_22_For_14_Conditional_12_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r23); const dashboard_r20 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDeleteDashboard(dashboard_r20, $event)); });
-    i0.ɵɵelement(1, "i", 36);
+    i0.ɵɵelement(1, "i", 35);
     i0.ɵɵelementEnd();
 } }
 function DashboardBrowserComponent_Conditional_22_For_14_Template(rf, ctx) { if (rf & 1) {
     const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 93);
+    i0.ɵɵelementStart(0, "div", 92);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_22_For_14_Template_div_click_0_listener($event) { const dashboard_r20 = i0.ɵɵrestoreView(_r19).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDashboardClick(dashboard_r20, $event)); })("dblclick", function DashboardBrowserComponent_Conditional_22_For_14_Template_div_dblclick_0_listener($event) { const dashboard_r20 = i0.ɵɵrestoreView(_r19).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDashboardDoubleClick(dashboard_r20, $event)); })("dragstart", function DashboardBrowserComponent_Conditional_22_For_14_Template_div_dragstart_0_listener($event) { const dashboard_r20 = i0.ɵɵrestoreView(_r19).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDragStart(dashboard_r20, $event)); })("dragend", function DashboardBrowserComponent_Conditional_22_For_14_Template_div_dragend_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDragEnd()); });
-    i0.ɵɵconditionalCreate(1, DashboardBrowserComponent_Conditional_22_For_14_Conditional_1_Template, 2, 1, "div", 81);
-    i0.ɵɵelementStart(2, "div", 82);
-    i0.ɵɵelement(3, "i", 94)(4, "span", 91);
-    i0.ɵɵconditionalCreate(5, DashboardBrowserComponent_Conditional_22_For_14_Conditional_5_Template, 2, 0, "span", 72);
+    i0.ɵɵconditionalCreate(1, DashboardBrowserComponent_Conditional_22_For_14_Conditional_1_Template, 2, 1, "div", 80);
+    i0.ɵɵelementStart(2, "div", 81);
+    i0.ɵɵelement(3, "i", 93)(4, "span", 90);
+    i0.ɵɵconditionalCreate(5, DashboardBrowserComponent_Conditional_22_For_14_Conditional_5_Template, 2, 0, "span", 71);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 83);
+    i0.ɵɵelementStart(6, "div", 82);
     i0.ɵɵtext(7, " Dashboard ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 84);
+    i0.ɵɵelementStart(8, "div", 83);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 92);
+    i0.ɵɵelementStart(10, "div", 91);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_22_For_14_Template_div_click_10_listener($event) { i0.ɵɵrestoreView(_r19); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵconditionalCreate(11, DashboardBrowserComponent_Conditional_22_For_14_Conditional_11_Template, 2, 0, "button", 68);
-    i0.ɵɵconditionalCreate(12, DashboardBrowserComponent_Conditional_22_For_14_Conditional_12_Template, 2, 0, "button", 69);
+    i0.ɵɵconditionalCreate(11, DashboardBrowserComponent_Conditional_22_For_14_Conditional_11_Template, 2, 0, "button", 67);
+    i0.ɵɵconditionalCreate(12, DashboardBrowserComponent_Conditional_22_For_14_Conditional_12_Template, 2, 0, "button", 68);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const dashboard_r20 = ctx.$implicit;
@@ -344,22 +345,22 @@ function DashboardBrowserComponent_Conditional_22_For_14_Template(rf, ctx) { if
     i0.ɵɵconditional(ctx_r1.CanDelete(dashboard_r20.ID) ? 12 : -1);
 } }
 function DashboardBrowserComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 20)(1, "div", 80);
-    i0.ɵɵconditionalCreate(2, DashboardBrowserComponent_Conditional_22_Conditional_2_Template, 2, 2, "div", 81);
-    i0.ɵɵelementStart(3, "div", 82);
+    i0.ɵɵelementStart(0, "div", 20)(1, "div", 79);
+    i0.ɵɵconditionalCreate(2, DashboardBrowserComponent_Conditional_22_Conditional_2_Template, 2, 2, "div", 80);
+    i0.ɵɵelementStart(3, "div", 81);
     i0.ɵɵtext(4, "Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 83);
+    i0.ɵɵelementStart(5, "div", 82);
     i0.ɵɵtext(6, "Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 84);
+    i0.ɵɵelementStart(7, "div", 83);
     i0.ɵɵtext(8, "Modified");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 85);
+    i0.ɵɵelementStart(9, "div", 84);
     i0.ɵɵtext(10, "Actions");
     i0.ɵɵelementEnd()();
-    i0.ɵɵrepeaterCreate(11, DashboardBrowserComponent_Conditional_22_For_12_Template, 11, 4, "div", 86, i0.ɵɵcomponentInstance().TrackByCategory, true);
-    i0.ɵɵrepeaterCreate(13, DashboardBrowserComponent_Conditional_22_For_14_Template, 13, 11, "div", 87, i0.ɵɵcomponentInstance().TrackByDashboard, true);
+    i0.ɵɵrepeaterCreate(11, DashboardBrowserComponent_Conditional_22_For_12_Template, 11, 4, "div", 85, i0.ɵɵcomponentInstance().TrackByCategory, true);
+    i0.ɵɵrepeaterCreate(13, DashboardBrowserComponent_Conditional_22_For_14_Template, 13, 11, "div", 86, i0.ɵɵcomponentInstance().TrackByDashboard, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -370,150 +371,76 @@ function DashboardBrowserComponent_Conditional_22_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r1.FilteredDashboards);
 } }
-function DashboardBrowserComponent_Conditional_23_Conditional_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+function DashboardBrowserComponent_Conditional_23_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 107)(1, "button", 112);
-    i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_23_Conditional_2_Conditional_13_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnCreateDashboard()); });
-    i0.ɵɵelement(2, "i", 40);
-    i0.ɵɵtext(3, " Create Your First Dashboard ");
-    i0.ɵɵelementEnd()();
-} }
-function DashboardBrowserComponent_Conditional_23_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 97)(1, "div", 98);
-    i0.ɵɵelement(2, "i", 99);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 100);
-    i0.ɵɵelement(4, "i", 44);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 101);
-    i0.ɵɵelement(6, "i", 102);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 103);
-    i0.ɵɵelement(8, "i", 104);
+    i0.ɵɵelementStart(0, "mj-empty-state", 99);
+    i0.ɵɵlistener("Action", function DashboardBrowserComponent_Conditional_23_Conditional_0_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnCreateDashboard()); });
+    i0.ɵɵelementStart(1, "div", 100)(2, "div", 101);
+    i0.ɵɵelement(3, "i", 102);
+    i0.ɵɵelementStart(4, "span");
+    i0.ɵɵtext(5, "Customizable layouts");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "h2", 105);
-    i0.ɵɵtext(10, "Welcome to Dashboards");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "p", 106);
-    i0.ɵɵtext(12, " Create custom dashboards to visualize your data, track key metrics, and monitor important information all in one place. ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(13, DashboardBrowserComponent_Conditional_23_Conditional_2_Conditional_13_Template, 4, 0, "div", 107);
-    i0.ɵɵelementStart(14, "div", 108)(15, "div", 109);
-    i0.ɵɵelement(16, "i", 110);
-    i0.ɵɵelementStart(17, "span");
-    i0.ɵɵtext(18, "Customizable layouts");
+    i0.ɵɵelementStart(6, "div", 101);
+    i0.ɵɵelement(7, "i", 103);
+    i0.ɵɵelementStart(8, "span");
+    i0.ɵɵtext(9, "Connect to your data");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "div", 109);
-    i0.ɵɵelement(20, "i", 111);
-    i0.ɵɵelementStart(21, "span");
-    i0.ɵɵtext(22, "Connect to your data");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(23, "div", 109);
-    i0.ɵɵelement(24, "i", 79);
-    i0.ɵɵelementStart(25, "span");
-    i0.ɵɵtext(26, "Share with your team");
-    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(10, "div", 101);
+    i0.ɵɵelement(11, "i", 78);
+    i0.ɵɵelementStart(12, "span");
+    i0.ɵɵtext(13, "Share with your team");
+    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(13);
-    i0.ɵɵconditional(ctx_r1.ShowCreateButton ? 13 : -1);
+    i0.ɵɵproperty("ActionText", ctx_r1.ShowCreateButton ? "Create Your First Dashboard" : "");
 } }
-function DashboardBrowserComponent_Conditional_23_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function DashboardBrowserComponent_Conditional_23_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 107)(1, "button", 39);
-    i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_23_Conditional_3_Conditional_6_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r25); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnCreateDashboard()); });
-    i0.ɵɵelement(2, "i", 40);
-    i0.ɵɵtext(3, " Create Dashboard ");
-    i0.ɵɵelementEnd()();
-} }
-function DashboardBrowserComponent_Conditional_23_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 113);
-    i0.ɵɵelement(1, "i", 34);
+    i0.ɵɵelementStart(0, "mj-empty-state", 104);
+    i0.ɵɵlistener("Action", function DashboardBrowserComponent_Conditional_23_Conditional_1_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r25); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnCreateDashboard()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "h3", 105);
-    i0.ɵɵtext(3, "This folder is empty");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 106);
-    i0.ɵɵtext(5, " Add dashboards or create sub-folders to organize your content. ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, DashboardBrowserComponent_Conditional_23_Conditional_3_Conditional_6_Template, 4, 0, "div", 107);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r1.ShowCreateButton ? 6 : -1);
+    i0.ɵɵproperty("ActionText", ctx_r1.ShowCreateButton ? "Create Dashboard" : "");
 } }
-function DashboardBrowserComponent_Conditional_23_Conditional_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function DashboardBrowserComponent_Conditional_23_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r26 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 107)(1, "button", 39);
-    i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_23_Conditional_4_Conditional_6_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnCreateDashboard()); });
-    i0.ɵɵelement(2, "i", 40);
-    i0.ɵɵtext(3, " Create Dashboard ");
-    i0.ɵɵelementEnd()();
-} }
-function DashboardBrowserComponent_Conditional_23_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 114);
-    i0.ɵɵelement(1, "i", 64);
+    i0.ɵɵelementStart(0, "mj-empty-state", 105);
+    i0.ɵɵlistener("Action", function DashboardBrowserComponent_Conditional_23_Conditional_2_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnCreateDashboard()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "h3", 105);
-    i0.ɵɵtext(3, "No uncategorized dashboards");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 106);
-    i0.ɵɵtext(5, " All your dashboards are organized into folders. Browse the folders above or create a new dashboard here. ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, DashboardBrowserComponent_Conditional_23_Conditional_4_Conditional_6_Template, 4, 0, "div", 107);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r1.ShowCreateButton ? 6 : -1);
+    i0.ɵɵproperty("ActionText", ctx_r1.ShowCreateButton ? "Create Dashboard" : "");
 } }
-function DashboardBrowserComponent_Conditional_23_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function DashboardBrowserComponent_Conditional_23_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 115);
-    i0.ɵɵelement(1, "i", 116);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "h3", 105);
-    i0.ɵɵtext(3, "No results found");
+    i0.ɵɵelementStart(0, "mj-empty-state", 106);
+    i0.ɵɵlistener("Action", function DashboardBrowserComponent_Conditional_23_Conditional_3_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ClearSearch()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 106);
-    i0.ɵɵtext(5, " No dashboards or folders match \"");
-    i0.ɵɵelementStart(6, "strong");
-    i0.ɵɵtext(7);
-    i0.ɵɵelementEnd();
-    i0.ɵɵtext(8, "\". Try a different search term. ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 107)(10, "button", 117);
-    i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_23_Conditional_5_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ClearSearch()); });
-    i0.ɵɵelement(11, "i", 38);
-    i0.ɵɵtext(12, " Clear Search ");
-    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(7);
-    i0.ɵɵtextInterpolate(ctx_r1.SearchText);
+    i0.ɵɵproperty("Message", ctx_r1.NoResultsMessage);
 } }
 function DashboardBrowserComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 21)(1, "div", 96);
-    i0.ɵɵconditionalCreate(2, DashboardBrowserComponent_Conditional_23_Conditional_2_Template, 27, 1);
-    i0.ɵɵconditionalCreate(3, DashboardBrowserComponent_Conditional_23_Conditional_3_Template, 7, 1);
-    i0.ɵɵconditionalCreate(4, DashboardBrowserComponent_Conditional_23_Conditional_4_Template, 7, 1);
-    i0.ɵɵconditionalCreate(5, DashboardBrowserComponent_Conditional_23_Conditional_5_Template, 13, 1);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(0, DashboardBrowserComponent_Conditional_23_Conditional_0_Template, 14, 1, "mj-empty-state", 95);
+    i0.ɵɵconditionalCreate(1, DashboardBrowserComponent_Conditional_23_Conditional_1_Template, 1, 1, "mj-empty-state", 96);
+    i0.ɵɵconditionalCreate(2, DashboardBrowserComponent_Conditional_23_Conditional_2_Template, 1, 1, "mj-empty-state", 97);
+    i0.ɵɵconditionalCreate(3, DashboardBrowserComponent_Conditional_23_Conditional_3_Template, 1, 1, "mj-empty-state", 98);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.IsAtRoot && ctx_r1.Dashboards.length === 0 ? 2 : -1);
+    i0.ɵɵconditional(ctx_r1.IsAtRoot && ctx_r1.Dashboards.length === 0 ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.IsAtRoot && !ctx_r1.SearchText ? 3 : -1);
+    i0.ɵɵconditional(!ctx_r1.IsAtRoot && !ctx_r1.SearchText ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.IsAtRoot && ctx_r1.Dashboards.length > 0 && !ctx_r1.SearchText ? 4 : -1);
+    i0.ɵɵconditional(ctx_r1.IsAtRoot && ctx_r1.Dashboards.length > 0 && !ctx_r1.SearchText ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.SearchText ? 5 : -1);
+    i0.ɵɵconditional(ctx_r1.SearchText ? 3 : -1);
 } }
 function DashboardBrowserComponent_Conditional_24_For_8_Template(rf, ctx) { if (rf & 1) {
     const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 120);
+    i0.ɵɵelementStart(0, "div", 109);
     i0.ɵɵlistener("dragover", function DashboardBrowserComponent_Conditional_24_For_8_Template_div_dragover_0_listener($event) { const cat_r30 = i0.ɵɵrestoreView(_r29).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDragOverCategory(cat_r30.ID, $event)); })("dragleave", function DashboardBrowserComponent_Conditional_24_For_8_Template_div_dragleave_0_listener() { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDragLeaveCategory()); })("drop", function DashboardBrowserComponent_Conditional_24_For_8_Template_div_drop_0_listener($event) { const cat_r30 = i0.ɵɵrestoreView(_r29).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDropOnCategory(cat_r30.ID, $event)); });
-    i0.ɵɵelement(1, "i", 56);
+    i0.ɵɵelement(1, "i", 55);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -525,15 +452,15 @@ function DashboardBrowserComponent_Conditional_24_For_8_Template(rf, ctx) { if (
 } }
 function DashboardBrowserComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
     const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 22)(1, "div", 118);
+    i0.ɵɵelementStart(0, "div", 21)(1, "div", 107);
     i0.ɵɵtext(2, "Drop to move to category:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 119)(4, "div", 120);
+    i0.ɵɵelementStart(3, "div", 108)(4, "div", 109);
     i0.ɵɵlistener("dragover", function DashboardBrowserComponent_Conditional_24_Template_div_dragover_4_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDragOverCategory(null, $event)); })("dragleave", function DashboardBrowserComponent_Conditional_24_Template_div_dragleave_4_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDragLeaveCategory()); })("drop", function DashboardBrowserComponent_Conditional_24_Template_div_drop_4_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDropOnCategory(null, $event)); });
-    i0.ɵɵelement(5, "i", 34);
+    i0.ɵɵelement(5, "i", 33);
     i0.ɵɵtext(6, " Uncategorized ");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(7, DashboardBrowserComponent_Conditional_24_For_8_Template, 3, 3, "div", 121, i0.ɵɵcomponentInstance().TrackByCategory, true);
+    i0.ɵɵrepeaterCreate(7, DashboardBrowserComponent_Conditional_24_For_8_Template, 3, 3, "div", 110, i0.ɵɵcomponentInstance().TrackByCategory, true);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -544,9 +471,9 @@ function DashboardBrowserComponent_Conditional_24_Template(rf, ctx) { if (rf & 1
 } }
 function DashboardBrowserComponent_Conditional_26_For_15_Template(rf, ctx) { if (rf & 1) {
     const _r32 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 128);
+    i0.ɵɵelementStart(0, "div", 117);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_26_For_15_Template_div_click_0_listener() { const cat_r33 = i0.ɵɵrestoreView(_r32).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ConfirmMove(cat_r33.ID)); });
-    i0.ɵɵelement(1, "i", 56);
+    i0.ɵɵelement(1, "i", 55);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -556,28 +483,28 @@ function DashboardBrowserComponent_Conditional_26_For_15_Template(rf, ctx) { if
 } }
 function DashboardBrowserComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     const _r31 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 122);
+    i0.ɵɵelementStart(0, "div", 111);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_26_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseMoveDialog()); });
-    i0.ɵɵelementStart(1, "div", 123);
+    i0.ɵɵelementStart(1, "div", 112);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_26_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r31); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 124)(3, "h3");
+    i0.ɵɵelementStart(2, "div", 113)(3, "h3");
     i0.ɵɵtext(4, "Move to Category");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 125);
+    i0.ɵɵelementStart(5, "button", 114);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_26_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseMoveDialog()); });
-    i0.ɵɵelement(6, "i", 38);
+    i0.ɵɵelement(6, "i", 37);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 126)(8, "p");
+    i0.ɵɵelementStart(7, "div", 115)(8, "p");
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 127)(11, "div", 128);
+    i0.ɵɵelementStart(10, "div", 116)(11, "div", 117);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_26_Template_div_click_11_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ConfirmMove(null)); });
-    i0.ɵɵelement(12, "i", 34);
+    i0.ɵɵelement(12, "i", 33);
     i0.ɵɵtext(13, " Uncategorized ");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(14, DashboardBrowserComponent_Conditional_26_For_15_Template, 3, 1, "div", 129, i0.ɵɵcomponentInstance().TrackByCategory, true);
+    i0.ɵɵrepeaterCreate(14, DashboardBrowserComponent_Conditional_26_For_15_Template, 3, 1, "div", 118, i0.ɵɵcomponentInstance().TrackByCategory, true);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 130)(17, "button", 117);
+    i0.ɵɵelementStart(16, "div", 119)(17, "button", 120);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_26_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseMoveDialog()); });
     i0.ɵɵtext(18, "Cancel");
     i0.ɵɵelementEnd()()()();
@@ -590,37 +517,37 @@ function DashboardBrowserComponent_Conditional_26_Template(rf, ctx) { if (rf & 1
 } }
 function DashboardBrowserComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
     const _r34 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 131);
+    i0.ɵɵelementStart(0, "div", 121);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_27_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseCreateCategoryDialog()); });
-    i0.ɵɵelementStart(1, "div", 132);
+    i0.ɵɵelementStart(1, "div", 122);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_27_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r34); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 124)(3, "h3");
-    i0.ɵɵelement(4, "i", 45);
+    i0.ɵɵelementStart(2, "div", 113)(3, "h3");
+    i0.ɵɵelement(4, "i", 44);
     i0.ɵɵtext(5, " Create Category ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 125);
+    i0.ɵɵelementStart(6, "button", 114);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_27_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseCreateCategoryDialog()); });
-    i0.ɵɵelement(7, "i", 38);
+    i0.ɵɵelement(7, "i", 37);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 126)(9, "div", 133)(10, "label", 134);
+    i0.ɵɵelementStart(8, "div", 115)(9, "div", 123)(10, "label", 124);
     i0.ɵɵtext(11, "Name *");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "input", 135);
+    i0.ɵɵelementStart(12, "input", 125);
     i0.ɵɵtwoWayListener("ngModelChange", function DashboardBrowserComponent_Conditional_27_Template_input_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.NewCategoryName, $event) || (ctx_r1.NewCategoryName = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("keyup.enter", function DashboardBrowserComponent_Conditional_27_Template_input_keyup_enter_12_listener() { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ConfirmCreateCategory()); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 133)(14, "label", 136);
+    i0.ɵɵelementStart(13, "div", 123)(14, "label", 126);
     i0.ɵɵtext(15, "Description");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "textarea", 137);
+    i0.ɵɵelementStart(16, "textarea", 127);
     i0.ɵɵtwoWayListener("ngModelChange", function DashboardBrowserComponent_Conditional_27_Template_textarea_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.NewCategoryDescription, $event) || (ctx_r1.NewCategoryDescription = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(17, "div", 130)(18, "button", 138);
+    i0.ɵɵelementStart(17, "div", 119)(18, "button", 128);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_27_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ConfirmCreateCategory()); });
-    i0.ɵɵelement(19, "i", 40);
+    i0.ɵɵelement(19, "i", 39);
     i0.ɵɵtext(20, " Create ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "button", 117);
+    i0.ɵɵelementStart(21, "button", 120);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_27_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseCreateCategoryDialog()); });
     i0.ɵɵtext(22, "Cancel");
     i0.ɵɵelementEnd()()()();
@@ -634,14 +561,14 @@ function DashboardBrowserComponent_Conditional_27_Template(rf, ctx) { if (rf & 1
     i0.ɵɵproperty("disabled", !ctx_r1.NewCategoryName.trim());
 } }
 function DashboardBrowserComponent_Conditional_28_Conditional_8_Conditional_7_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 149);
-    i0.ɵɵelement(1, "i", 151);
+    i0.ɵɵelementStart(0, "p", 139);
+    i0.ɵɵelement(1, "i", 141);
     i0.ɵɵtext(2, " This category contains: ");
     i0.ɵɵelementEnd();
 } }
 function DashboardBrowserComponent_Conditional_28_Conditional_8_Conditional_7_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "li");
-    i0.ɵɵelement(1, "i", 44);
+    i0.ɵɵelement(1, "i", 43);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -651,7 +578,7 @@ function DashboardBrowserComponent_Conditional_28_Conditional_8_Conditional_7_Co
 } }
 function DashboardBrowserComponent_Conditional_28_Conditional_8_Conditional_7_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "li");
-    i0.ɵɵelement(1, "i", 56);
+    i0.ɵɵelement(1, "i", 55);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -660,7 +587,7 @@ function DashboardBrowserComponent_Conditional_28_Conditional_8_Conditional_7_Co
     i0.ɵɵtextInterpolate2(" ", counts_r37.categories, " sub-categor", counts_r37.categories !== 1 ? "ies" : "y", " ");
 } }
 function DashboardBrowserComponent_Conditional_28_Conditional_8_Conditional_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "ul", 150);
+    i0.ɵɵelementStart(0, "ul", 140);
     i0.ɵɵconditionalCreate(1, DashboardBrowserComponent_Conditional_28_Conditional_8_Conditional_7_Conditional_1_Conditional_1_Template, 3, 2, "li");
     i0.ɵɵconditionalCreate(2, DashboardBrowserComponent_Conditional_28_Conditional_8_Conditional_7_Conditional_1_Conditional_2_Template, 3, 2, "li");
     i0.ɵɵelementEnd();
@@ -672,8 +599,8 @@ function DashboardBrowserComponent_Conditional_28_Conditional_8_Conditional_7_Co
     i0.ɵɵconditional(counts_r37.categories > 0 ? 2 : -1);
 } }
 function DashboardBrowserComponent_Conditional_28_Conditional_8_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, DashboardBrowserComponent_Conditional_28_Conditional_8_Conditional_7_Conditional_0_Template, 3, 0, "p", 149);
-    i0.ɵɵconditionalCreate(1, DashboardBrowserComponent_Conditional_28_Conditional_8_Conditional_7_Conditional_1_Template, 3, 2, "ul", 150);
+    i0.ɵɵconditionalCreate(0, DashboardBrowserComponent_Conditional_28_Conditional_8_Conditional_7_Conditional_0_Template, 3, 0, "p", 139);
+    i0.ɵɵconditionalCreate(1, DashboardBrowserComponent_Conditional_28_Conditional_8_Conditional_7_Conditional_1_Template, 3, 2, "ul", 140);
 } if (rf & 2) {
     const counts_r37 = ctx;
     i0.ɵɵconditional(counts_r37.dashboards > 0 || counts_r37.categories > 0 ? 0 : -1);
@@ -682,7 +609,7 @@ function DashboardBrowserComponent_Conditional_28_Conditional_8_Conditional_7_Te
 } }
 function DashboardBrowserComponent_Conditional_28_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r36 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 126)(1, "div", 144)(2, "p");
+    i0.ɵɵelementStart(0, "div", 115)(1, "div", 134)(2, "p");
     i0.ɵɵtext(3, " You are about to delete the category ");
     i0.ɵɵelementStart(4, "strong");
     i0.ɵɵtext(5);
@@ -691,10 +618,10 @@ function DashboardBrowserComponent_Conditional_28_Conditional_8_Template(rf, ctx
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(7, DashboardBrowserComponent_Conditional_28_Conditional_8_Conditional_7_Template, 2, 2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 145)(9, "label", 146)(10, "input", 147);
+    i0.ɵɵelementStart(8, "div", 135)(9, "label", 136)(10, "input", 137);
     i0.ɵɵtwoWayListener("ngModelChange", function DashboardBrowserComponent_Conditional_28_Conditional_8_Template_input_ngModelChange_10_listener($event) { i0.ɵɵrestoreView(_r36); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.DeleteCategoryIncludeContents, $event) || (ctx_r1.DeleteCategoryIncludeContents = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "span", 148);
+    i0.ɵɵelementStart(11, "span", 138);
     i0.ɵɵtext(12, " I understand this will permanently delete this category and all its contents. This action cannot be undone. ");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -709,25 +636,25 @@ function DashboardBrowserComponent_Conditional_28_Conditional_8_Template(rf, ctx
 } }
 function DashboardBrowserComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
     const _r35 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 139);
+    i0.ɵɵelementStart(0, "div", 129);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_28_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r35); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseDeleteCategoryConfirm()); });
-    i0.ɵɵelementStart(1, "div", 140);
+    i0.ɵɵelementStart(1, "div", 130);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_28_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r35); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 141)(3, "h3");
-    i0.ɵɵelement(4, "i", 142);
+    i0.ɵɵelementStart(2, "div", 131)(3, "h3");
+    i0.ɵɵelement(4, "i", 132);
     i0.ɵɵtext(5, " Delete Category ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 125);
+    i0.ɵɵelementStart(6, "button", 114);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_28_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r35); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseDeleteCategoryConfirm()); });
-    i0.ɵɵelement(7, "i", 38);
+    i0.ɵɵelement(7, "i", 37);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(8, DashboardBrowserComponent_Conditional_28_Conditional_8_Template, 13, 3, "div", 126);
-    i0.ɵɵelementStart(9, "div", 130)(10, "button", 143);
+    i0.ɵɵconditionalCreate(8, DashboardBrowserComponent_Conditional_28_Conditional_8_Template, 13, 3, "div", 115);
+    i0.ɵɵelementStart(9, "div", 119)(10, "button", 133);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_28_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r35); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ConfirmDeleteCategory()); });
-    i0.ɵɵelement(11, "i", 36);
+    i0.ɵɵelement(11, "i", 35);
     i0.ɵɵtext(12, " Delete Category ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "button", 117);
+    i0.ɵɵelementStart(13, "button", 120);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_28_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r35); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseDeleteCategoryConfirm()); });
     i0.ɵɵtext(14, "Cancel");
     i0.ɵɵelementEnd()()()();
@@ -951,6 +878,12 @@ export class DashboardBrowserComponent {
         this.SearchText = '';
         this.applyFilters();
     }
+    /**
+     * Message shown in the search no-results empty state, echoing the search term.
+     */
+    get NoResultsMessage() {
+        return `No dashboards or folders match "${this.SearchText}". Try a different search term.`;
+    }
     /**
      * Handle category filter change
      */
@@ -1704,7 +1637,7 @@ export class DashboardBrowserComponent {
         }
     }
     static ɵfac = function DashboardBrowserComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DashboardBrowserComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DashboardBrowserComponent, selectors: [["mj-dashboard-browser"]], inputs: { Dashboards: "Dashboards", Categories: "Categories", SelectedCategoryId: "SelectedCategoryId", ViewMode: "ViewMode", IsLoading: "IsLoading", ShowCreateButton: "ShowCreateButton", AllowMultiSelect: "AllowMultiSelect", AllowDragDrop: "AllowDragDrop", Title: "Title", IconClass: "IconClass", DashboardPermissions: "DashboardPermissions", EffectiveCategoryMap: "EffectiveCategoryMap" }, outputs: { DashboardOpen: "DashboardOpen", DashboardEdit: "DashboardEdit", DashboardDelete: "DashboardDelete", DashboardMove: "DashboardMove", DashboardCreate: "DashboardCreate", CategoryCreate: "CategoryCreate", CategoryDelete: "CategoryDelete", CategoryChange: "CategoryChange", ViewModeChange: "ViewModeChange", ViewPreferenceChange: "ViewPreferenceChange" }, standalone: false, decls: 29, vars: 30, consts: [[1, "dashboard-browser"], [1, "browser-toolbar"], ["Size", "large", 3, "Navigate", "DashboardDrop", "Categories", "CurrentCategoryId", "RootIcon", "RootLabel", "AllowDragDrop"], [1, "toolbar-actions"], [1, "dashboard-count"], [1, "view-toggle"], ["title", "Card View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-grip"], ["title", "List View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-list"], [1, "new-dropdown"], [1, "dropdown-backdrop"], [1, "browser-filters"], [1, "search-box"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search dashboards...", 3, "ngModelChange", "input", "ngModel"], [1, "clear-btn"], [1, "clear-filters-btn"], [1, "loading-overlay"], [1, "dashboard-grid"], [1, "dashboard-list"], [1, "empty-state"], [1, "category-drop-zones"], ["type", "danger", "confirmText", "Delete", "cancelText", "Cancel", 3, "confirmed", "cancelled", "visible", "title", "message"], [1, "move-dialog-overlay"], [1, "create-category-dialog-overlay"], [1, "delete-category-dialog-overlay"], ["title", "Select multiple dashboards", 1, "select-mode-btn"], [1, "selection-toolbar"], ["title", "Select multiple dashboards", 1, "select-mode-btn", 3, "click"], [1, "fa-solid", "fa-check-double"], [1, "selected-count"], ["title", "Select all", 1, "action-btn", 3, "click"], ["title", "Move to folder", 1, "action-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-folder-open"], ["title", "Delete selected", 1, "action-btn", "danger", 3, "click", "disabled"], [1, "fa-solid", "fa-trash"], ["title", "Exit selection mode", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "btn-primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "fa-solid", "fa-caret-down", "dropdown-caret"], [1, "dropdown-menu"], [1, "dropdown-item", 3, "click"], [1, "fa-solid", "fa-chart-line"], [1, "fa-solid", "fa-folder-plus"], [1, "dropdown-backdrop", 3, "click"], [1, "clear-btn", 3, "click"], [1, "clear-filters-btn", 3, "click"], [1, "fa-solid", "fa-filter-circle-xmark"], ["text", "Loading dashboards..."], [1, "dashboard-card", "category-card", 3, "drop-target"], [1, "dashboard-card", 3, "selected", "dragging", "draggable"], [1, "dashboard-card", "category-card", 3, "click", "dblclick", "dragover", "dragleave", "drop"], [1, "card-header"], [1, "card-icon", "folder-icon"], [1, "fa-solid", "fa-folder"], [1, "card-actions"], ["title", "Delete category", 1, "action-btn", "danger", 3, "click"], [1, "card-content"], [1, "card-title", 3, "innerHTML"], [1, "card-description", 3, "innerHTML"], [1, "card-meta"], [1, "meta-item"], [1, "fa-solid", "fa-folder-tree"], [1, "dashboard-card", 3, "click", "dblclick", "dragstart", "dragend", "draggable"], [1, "card-select-area"], [1, "card-icon"], ["title", "Edit", 1, "action-btn"], ["title", "Delete", 1, "action-btn", "danger"], [1, "card-title"], [3, "innerHTML"], ["title", "Shared with you", 1, "shared-badge"], [1, "fa-solid", "fa-clock"], [1, "card-select-area", 3, "click"], ["type", "checkbox", 3, "change", "checked"], ["title", "Edit", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-edit"], ["title", "Delete", 1, "action-btn", "danger", 3, "click"], [1, "fa-solid", "fa-share-nodes"], [1, "list-header"], [1, "list-col", "checkbox-col"], [1, "list-col", "name-col"], [1, "list-col", "type-col"], [1, "list-col", "date-col"], [1, "list-col", "actions-col"], [1, "list-row", "category-row", 3, "drop-target"], [1, "list-row", 3, "selected", "dragging", "draggable"], ["type", "checkbox", 3, "change", "checked", "indeterminate"], [1, "list-row", "category-row", 3, "click", "dragover", "dragleave", "drop"], [1, "fa-solid", "fa-folder", "row-icon", "folder-icon"], [1, "dashboard-name", 3, "innerHTML"], [1, "list-col", "actions-col", 3, "click"], [1, "list-row", 3, "click", "dblclick", "dragstart", "dragend", "draggable"], [1, "fa-solid", "fa-chart-line", "row-icon"], [1, "list-col", "checkbox-col", 3, "click"], [1, "empty-state-content"], [1, "empty-illustration"], [1, "illustration-bg"], [1, "fa-solid", "fa-gauge-high", "main-icon"], [1, "illustration-accent", "accent-1"], [1, "illustration-accent", "accent-2"], [1, "fa-solid", "fa-chart-bar"], [1, "illustration-accent", "accent-3"], [1, "fa-solid", "fa-chart-pie"], [1, "empty-title"], [1, "empty-description"], [1, "empty-actions"], [1, "empty-features"], [1, "feature-item"], [1, "fa-solid", "fa-table-cells"], [1, "fa-solid", "fa-database"], [1, "btn-primary", "large", 3, "click"], [1, "empty-icon", "folder-empty"], [1, "empty-icon"], [1, "empty-icon", "search-empty"], [1, "fa-solid", "fa-magnifying-glass"], [1, "btn-secondary", 3, "click"], [1, "drop-zone-header"], [1, "drop-zones"], [1, "drop-zone", 3, "dragover", "dragleave", "drop"], [1, "drop-zone", 3, "active"], [1, "move-dialog-overlay", 3, "click"], [1, "move-dialog", 3, "click"], [1, "dialog-header"], [1, "close-btn", 3, "click"], [1, "dialog-content"], [1, "category-list"], [1, "category-option", 3, "click"], [1, "category-option"], [1, "dialog-footer"], [1, "create-category-dialog-overlay", 3, "click"], [1, "create-category-dialog", 3, "click"], [1, "form-field"], ["for", "category-name"], ["type", "text", "id", "category-name", "placeholder", "Enter category name", 3, "ngModelChange", "keyup.enter", "ngModel"], ["for", "category-description"], ["id", "category-description", "placeholder", "Optional description", "rows", "3", 3, "ngModelChange", "ngModel"], [1, "btn-primary", 3, "click", "disabled"], [1, "delete-category-dialog-overlay", 3, "click"], [1, "delete-category-dialog", 3, "click"], [1, "dialog-header", "danger"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "btn-danger", 3, "click", "disabled"], [1, "warning-message"], [1, "confirmation-checkbox"], [1, "checkbox-label"], ["type", "checkbox", 3, "ngModelChange", "ngModel"], [1, "checkbox-text"], [1, "content-warning"], [1, "content-list"], [1, "fa-solid", "fa-warning"]], template: function DashboardBrowserComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DashboardBrowserComponent, selectors: [["mj-dashboard-browser"]], inputs: { Dashboards: "Dashboards", Categories: "Categories", SelectedCategoryId: "SelectedCategoryId", ViewMode: "ViewMode", IsLoading: "IsLoading", ShowCreateButton: "ShowCreateButton", AllowMultiSelect: "AllowMultiSelect", AllowDragDrop: "AllowDragDrop", Title: "Title", IconClass: "IconClass", DashboardPermissions: "DashboardPermissions", EffectiveCategoryMap: "EffectiveCategoryMap" }, outputs: { DashboardOpen: "DashboardOpen", DashboardEdit: "DashboardEdit", DashboardDelete: "DashboardDelete", DashboardMove: "DashboardMove", DashboardCreate: "DashboardCreate", CategoryCreate: "CategoryCreate", CategoryDelete: "CategoryDelete", CategoryChange: "CategoryChange", ViewModeChange: "ViewModeChange", ViewPreferenceChange: "ViewPreferenceChange" }, standalone: false, decls: 29, vars: 30, consts: [[1, "dashboard-browser"], [1, "browser-toolbar"], ["Size", "large", 3, "Navigate", "DashboardDrop", "Categories", "CurrentCategoryId", "RootIcon", "RootLabel", "AllowDragDrop"], [1, "toolbar-actions"], [1, "dashboard-count"], [1, "view-toggle"], ["title", "Card View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-grip"], ["title", "List View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-list"], [1, "new-dropdown"], [1, "dropdown-backdrop"], [1, "browser-filters"], [1, "search-box"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search dashboards...", 3, "ngModelChange", "input", "ngModel"], [1, "clear-btn"], [1, "clear-filters-btn"], [1, "loading-overlay"], [1, "dashboard-grid"], [1, "dashboard-list"], [1, "category-drop-zones"], ["type", "danger", "confirmText", "Delete", "cancelText", "Cancel", 3, "confirmed", "cancelled", "visible", "title", "message"], [1, "move-dialog-overlay"], [1, "create-category-dialog-overlay"], [1, "delete-category-dialog-overlay"], ["title", "Select multiple dashboards", 1, "select-mode-btn"], [1, "selection-toolbar"], ["title", "Select multiple dashboards", 1, "select-mode-btn", 3, "click"], [1, "fa-solid", "fa-check-double"], [1, "selected-count"], ["title", "Select all", 1, "action-btn", 3, "click"], ["title", "Move to folder", 1, "action-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-folder-open"], ["title", "Delete selected", 1, "action-btn", "danger", 3, "click", "disabled"], [1, "fa-solid", "fa-trash"], ["title", "Exit selection mode", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "btn-primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "fa-solid", "fa-caret-down", "dropdown-caret"], [1, "dropdown-menu"], [1, "dropdown-item", 3, "click"], [1, "fa-solid", "fa-chart-line"], [1, "fa-solid", "fa-folder-plus"], [1, "dropdown-backdrop", 3, "click"], [1, "clear-btn", 3, "click"], [1, "clear-filters-btn", 3, "click"], [1, "fa-solid", "fa-filter-circle-xmark"], ["text", "Loading dashboards..."], [1, "dashboard-card", "category-card", 3, "drop-target"], [1, "dashboard-card", 3, "selected", "dragging", "draggable"], [1, "dashboard-card", "category-card", 3, "click", "dblclick", "dragover", "dragleave", "drop"], [1, "card-header"], [1, "card-icon", "folder-icon"], [1, "fa-solid", "fa-folder"], [1, "card-actions"], ["title", "Delete category", 1, "action-btn", "danger", 3, "click"], [1, "card-content"], [1, "card-title", 3, "innerHTML"], [1, "card-description", 3, "innerHTML"], [1, "card-meta"], [1, "meta-item"], [1, "fa-solid", "fa-folder-tree"], [1, "dashboard-card", 3, "click", "dblclick", "dragstart", "dragend", "draggable"], [1, "card-select-area"], [1, "card-icon"], ["title", "Edit", 1, "action-btn"], ["title", "Delete", 1, "action-btn", "danger"], [1, "card-title"], [3, "innerHTML"], ["title", "Shared with you", 1, "shared-badge"], [1, "fa-solid", "fa-clock"], [1, "card-select-area", 3, "click"], ["type", "checkbox", 3, "change", "checked"], ["title", "Edit", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-edit"], ["title", "Delete", 1, "action-btn", "danger", 3, "click"], [1, "fa-solid", "fa-share-nodes"], [1, "list-header"], [1, "list-col", "checkbox-col"], [1, "list-col", "name-col"], [1, "list-col", "type-col"], [1, "list-col", "date-col"], [1, "list-col", "actions-col"], [1, "list-row", "category-row", 3, "drop-target"], [1, "list-row", 3, "selected", "dragging", "draggable"], ["type", "checkbox", 3, "change", "checked", "indeterminate"], [1, "list-row", "category-row", 3, "click", "dragover", "dragleave", "drop"], [1, "fa-solid", "fa-folder", "row-icon", "folder-icon"], [1, "dashboard-name", 3, "innerHTML"], [1, "list-col", "actions-col", 3, "click"], [1, "list-row", 3, "click", "dblclick", "dragstart", "dragend", "draggable"], [1, "fa-solid", "fa-chart-line", "row-icon"], [1, "list-col", "checkbox-col", 3, "click"], ["Size", "large", "Icon", "fa-solid fa-gauge-high", "Title", "Welcome to Dashboards", "Message", "Create custom dashboards to visualize your data, track key metrics, and monitor important information all in one place.", "ActionIcon", "fa-solid fa-plus", 1, "dashboard-empty", 3, "ActionText"], ["Variant", "warning", "Icon", "fa-solid fa-folder-open", "Title", "This folder is empty", "Message", "Add dashboards or create sub-folders to organize your content.", "ActionIcon", "fa-solid fa-plus", 1, "dashboard-empty", 3, "ActionText"], ["Icon", "fa-solid fa-folder-tree", "Title", "No uncategorized dashboards", "Message", "All your dashboards are organized into folders. Browse the folders above or create a new dashboard here.", "ActionIcon", "fa-solid fa-plus", 1, "dashboard-empty", 3, "ActionText"], ["Variant", "no-results", "Icon", "fa-solid fa-magnifying-glass", "Title", "No results found", "ActionText", "Clear Search", "ActionIcon", "fa-solid fa-times", "ActionVariant", "secondary", 1, "dashboard-empty", 3, "Message"], ["Size", "large", "Icon", "fa-solid fa-gauge-high", "Title", "Welcome to Dashboards", "Message", "Create custom dashboards to visualize your data, track key metrics, and monitor important information all in one place.", "ActionIcon", "fa-solid fa-plus", 1, "dashboard-empty", 3, "Action", "ActionText"], [1, "empty-features"], [1, "feature-item"], [1, "fa-solid", "fa-table-cells"], [1, "fa-solid", "fa-database"], ["Variant", "warning", "Icon", "fa-solid fa-folder-open", "Title", "This folder is empty", "Message", "Add dashboards or create sub-folders to organize your content.", "ActionIcon", "fa-solid fa-plus", 1, "dashboard-empty", 3, "Action", "ActionText"], ["Icon", "fa-solid fa-folder-tree", "Title", "No uncategorized dashboards", "Message", "All your dashboards are organized into folders. Browse the folders above or create a new dashboard here.", "ActionIcon", "fa-solid fa-plus", 1, "dashboard-empty", 3, "Action", "ActionText"], ["Variant", "no-results", "Icon", "fa-solid fa-magnifying-glass", "Title", "No results found", "ActionText", "Clear Search", "ActionIcon", "fa-solid fa-times", "ActionVariant", "secondary", 1, "dashboard-empty", 3, "Action", "Message"], [1, "drop-zone-header"], [1, "drop-zones"], [1, "drop-zone", 3, "dragover", "dragleave", "drop"], [1, "drop-zone", 3, "active"], [1, "move-dialog-overlay", 3, "click"], [1, "move-dialog", 3, "click"], [1, "dialog-header"], [1, "close-btn", 3, "click"], [1, "dialog-content"], [1, "category-list"], [1, "category-option", 3, "click"], [1, "category-option"], [1, "dialog-footer"], [1, "btn-secondary", 3, "click"], [1, "create-category-dialog-overlay", 3, "click"], [1, "create-category-dialog", 3, "click"], [1, "form-field"], ["for", "category-name"], ["type", "text", "id", "category-name", "placeholder", "Enter category name", 3, "ngModelChange", "keyup.enter", "ngModel"], ["for", "category-description"], ["id", "category-description", "placeholder", "Optional description", "rows", "3", 3, "ngModelChange", "ngModel"], [1, "btn-primary", 3, "click", "disabled"], [1, "delete-category-dialog-overlay", 3, "click"], [1, "delete-category-dialog", 3, "click"], [1, "dialog-header", "danger"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "btn-danger", 3, "click", "disabled"], [1, "warning-message"], [1, "confirmation-checkbox"], [1, "checkbox-label"], ["type", "checkbox", 3, "ngModelChange", "ngModel"], [1, "checkbox-text"], [1, "content-warning"], [1, "content-list"], [1, "fa-solid", "fa-warning"]], template: function DashboardBrowserComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "mj-dashboard-breadcrumb", 2);
             i0.ɵɵlistener("Navigate", function DashboardBrowserComponent_Template_mj_dashboard_breadcrumb_Navigate_2_listener($event) { return ctx.NavigateToCategory($event.CategoryId); })("DashboardDrop", function DashboardBrowserComponent_Template_mj_dashboard_breadcrumb_DashboardDrop_2_listener($event) { return ctx.OnBreadcrumbDrop($event); });
             i0.ɵɵelementEnd();
@@ -1736,14 +1669,14 @@ export class DashboardBrowserComponent {
             i0.ɵɵconditionalCreate(20, DashboardBrowserComponent_Conditional_20_Template, 2, 0, "div", 18);
             i0.ɵɵconditionalCreate(21, DashboardBrowserComponent_Conditional_21_Template, 5, 0, "div", 19);
             i0.ɵɵconditionalCreate(22, DashboardBrowserComponent_Conditional_22_Template, 15, 1, "div", 20);
-            i0.ɵɵconditionalCreate(23, DashboardBrowserComponent_Conditional_23_Template, 6, 4, "div", 21);
-            i0.ɵɵconditionalCreate(24, DashboardBrowserComponent_Conditional_24_Template, 9, 2, "div", 22);
-            i0.ɵɵelementStart(25, "mj-confirm-dialog", 23);
+            i0.ɵɵconditionalCreate(23, DashboardBrowserComponent_Conditional_23_Template, 4, 4);
+            i0.ɵɵconditionalCreate(24, DashboardBrowserComponent_Conditional_24_Template, 9, 2, "div", 21);
+            i0.ɵɵelementStart(25, "mj-confirm-dialog", 22);
             i0.ɵɵlistener("confirmed", function DashboardBrowserComponent_Template_mj_confirm_dialog_confirmed_25_listener() { return ctx.ConfirmDelete(); })("cancelled", function DashboardBrowserComponent_Template_mj_confirm_dialog_cancelled_25_listener() { return ctx.CloseDeleteConfirm(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(26, DashboardBrowserComponent_Conditional_26_Template, 19, 2, "div", 24);
-            i0.ɵɵconditionalCreate(27, DashboardBrowserComponent_Conditional_27_Template, 23, 3, "div", 25);
-            i0.ɵɵconditionalCreate(28, DashboardBrowserComponent_Conditional_28_Template, 15, 2, "div", 26);
+            i0.ɵɵconditionalCreate(26, DashboardBrowserComponent_Conditional_26_Template, 19, 2, "div", 23);
+            i0.ɵɵconditionalCreate(27, DashboardBrowserComponent_Conditional_27_Template, 23, 3, "div", 24);
+            i0.ɵɵconditionalCreate(28, DashboardBrowserComponent_Conditional_28_Template, 15, 2, "div", 25);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵclassProp("loading", ctx.IsLoading);
@@ -1785,11 +1718,11 @@ export class DashboardBrowserComponent {
             i0.ɵɵconditional(ctx.ShowCreateCategoryDialog ? 27 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.ShowDeleteCategoryConfirm ? 28 : -1);
-        } }, dependencies: [i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.LoadingComponent, i3.DashboardBreadcrumbComponent, i4.ConfirmDialogComponent], styles: ["\n\n\n.dashboard-browser[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--mj-bg-page);\n    position: relative;\n}\n\n\n\n.browser-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0 24px 0 0;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    gap: 16px;\n}\n\n.toolbar-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.dashboard-count[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    padding: 4px 10px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 12px;\n}\n\n\n\n.browser-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 24px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.header-left[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.header-left[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.header-left[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.header-right[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n\n\n.view-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 6px;\n    padding: 2px;\n}\n\n.toggle-btn[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.toggle-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary);\n}\n\n.toggle-btn.active[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n\n\n.select-mode-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 12px;\n    background: var(--mj-bg-surface-sunken);\n    border: none;\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s;\n}\n\n.select-mode-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-border-default);\n    color: var(--mj-text-primary);\n}\n\n.select-mode-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n\n\n.selection-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 4px 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 6px;\n}\n\n.selection-toolbar[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.selection-toolbar[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%]:disabled:hover {\n    background: transparent;\n    color: var(--mj-text-secondary);\n}\n\n.selected-count[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n    min-width: 70px;\n}\n\n\n\n.btn-primary[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 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.15s;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 16px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover {\n    background: var(--mj-border-default);\n}\n\n.action-btn[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-border-default);\n    color: var(--mj-text-primary);\n}\n\n.action-btn.danger[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n\n\n.browser-filters[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 24px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-box[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    flex: 1;\n    max-width: 400px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 6px;\n    padding: 0 12px;\n}\n\n.search-box[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-size: 14px;\n}\n\n.search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    flex: 1;\n    border: none;\n    background: transparent;\n    padding: 10px 12px;\n    font-size: 14px;\n    outline: none;\n}\n\n.search-box[_ngcontent-%COMP%]   .clear-btn[_ngcontent-%COMP%] {\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    border-radius: 50%;\n}\n\n.search-box[_ngcontent-%COMP%]   .clear-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-border-default);\n    color: var(--mj-text-secondary);\n}\n\n.category-filter[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n    padding: 10px 32px 10px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    background: var(--mj-bg-surface);\n    cursor: pointer;\n    outline: none;\n    appearance: none;\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    background-position: right 10px center;\n}\n\n.clear-filters-btn[_ngcontent-%COMP%], \n.select-all-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 12px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.clear-filters-btn[_ngcontent-%COMP%]:hover, \n.select-all-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n}\n\n\n\n.loading-overlay[_ngcontent-%COMP%] {\n    position: absolute;\n    inset: 0;\n    background: color-mix(in srgb, var(--mj-bg-surface) 90%, transparent);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 100;\n}\n\n\n\n.dashboard-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n    gap: 20px;\n    padding: 24px;\n    overflow-y: auto;\n}\n\n.dashboard-card[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 8px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n    cursor: pointer;\n    transition: all 0.2s;\n    border: 2px solid transparent;\n    position: relative;\n}\n\n.dashboard-card[_ngcontent-%COMP%]:hover {\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n    transform: translateY(-2px);\n}\n\n.dashboard-card.selected[_ngcontent-%COMP%] {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.dashboard-card.dragging[_ngcontent-%COMP%] {\n    opacity: 0.5;\n}\n\n.card-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 16px;\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.card-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-brand-primary);\n    border-radius: 8px;\n    color: var(--mj-text-inverse);\n    font-size: 16px;\n}\n\n\n\n.card-select-area[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    z-index: 2;\n    padding: 10px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 8px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background 0.15s;\n}\n\n.card-select-area[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.dashboard-card.selected[_ngcontent-%COMP%]   .card-select-area[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n}\n\n.card-select-area[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    width: 18px;\n    height: 18px;\n    cursor: pointer;\n    accent-color: var(--mj-brand-primary);\n}\n\n.card-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    margin-left: auto;\n    opacity: 0;\n    transition: opacity 0.15s;\n}\n\n.dashboard-card[_ngcontent-%COMP%]:hover   .card-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.card-content[_ngcontent-%COMP%] {\n    padding: 16px;\n}\n\n.card-title[_ngcontent-%COMP%] {\n    margin: 0 0 8px 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n\n\n.shared-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-size: 10px;\n    flex-shrink: 0;\n}\n\n.card-description[_ngcontent-%COMP%] {\n    margin: 0 0 12px 0;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    line-height: 1.4;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.card-meta[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n}\n\n.meta-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n\n\n.dashboard-list[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    background: var(--mj-bg-surface);\n    margin: 16px 24px;\n    border-radius: 8px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.list-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 12px 16px;\n    background: var(--mj-bg-page);\n    border-bottom: 1px solid var(--mj-border-default);\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.list-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 12px 16px;\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.list-row[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.list-row.selected[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.list-row.dragging[_ngcontent-%COMP%] {\n    opacity: 0.5;\n}\n\n.list-col[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n}\n\n.checkbox-col[_ngcontent-%COMP%] {\n    width: 40px;\n}\n\n.checkbox-col[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    width: 16px;\n    height: 16px;\n    cursor: pointer;\n}\n\n.name-col[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 200px;\n    gap: 10px;\n    display: flex;\n    align-items: center;\n}\n\n.name-col[_ngcontent-%COMP%]   .shared-badge[_ngcontent-%COMP%] {\n    margin-left: 4px;\n}\n\n.row-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.dashboard-name[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.category-col[_ngcontent-%COMP%], \n.type-col[_ngcontent-%COMP%] {\n    width: 120px;\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n}\n\n.date-col[_ngcontent-%COMP%] {\n    width: 120px;\n    color: var(--mj-text-disabled);\n    font-size: 13px;\n}\n\n.actions-col[_ngcontent-%COMP%] {\n    width: 80px;\n    justify-content: flex-end;\n    gap: 4px;\n    opacity: 0;\n    transition: opacity 0.15s;\n}\n\n.list-row[_ngcontent-%COMP%]:hover   .actions-col[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    flex: 1;\n    padding: 48px 24px;\n    text-align: center;\n    min-height: 400px;\n}\n\n.empty-state-content[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    max-width: 480px;\n}\n\n\n\n.empty-icon[_ngcontent-%COMP%] {\n    width: 100px;\n    height: 100px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 50%;\n    margin-bottom: 24px;\n    box-shadow: 0 4px 20px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 40px;\n    color: color-mix(in srgb, var(--mj-brand-primary) 50%, var(--mj-bg-surface));\n}\n\n.empty-icon.folder-empty[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n}\n\n.empty-icon.folder-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n}\n\n.empty-icon.search-empty[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.empty-icon.search-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n\n\n.empty-illustration[_ngcontent-%COMP%] {\n    position: relative;\n    width: 160px;\n    height: 160px;\n    margin-bottom: 32px;\n}\n\n.illustration-bg[_ngcontent-%COMP%] {\n    width: 120px;\n    height: 120px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-brand-primary);\n    border-radius: 50%;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    box-shadow: 0 8px 32px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.illustration-bg[_ngcontent-%COMP%]   .main-icon[_ngcontent-%COMP%] {\n    font-size: 48px;\n    color: var(--mj-text-inverse);\n}\n\n.illustration-accent[_ngcontent-%COMP%] {\n    position: absolute;\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-bg-surface);\n    border-radius: 50%;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n.illustration-accent[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n}\n\n.illustration-accent.accent-1[_ngcontent-%COMP%] {\n    top: 0;\n    right: 10px;\n}\n\n.illustration-accent.accent-1[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.illustration-accent.accent-2[_ngcontent-%COMP%] {\n    bottom: 10px;\n    left: 0;\n}\n\n.illustration-accent.accent-2[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n.illustration-accent.accent-3[_ngcontent-%COMP%] {\n    bottom: 0;\n    right: 0;\n}\n\n.illustration-accent.accent-3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n\n\n.empty-title[_ngcontent-%COMP%] {\n    margin: 0 0 12px 0;\n    font-size: 24px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.empty-state-content[_ngcontent-%COMP%]   h3.empty-title[_ngcontent-%COMP%] {\n    font-size: 20px;\n}\n\n.empty-description[_ngcontent-%COMP%] {\n    margin: 0 0 28px 0;\n    color: var(--mj-text-secondary);\n    font-size: 15px;\n    line-height: 1.6;\n    max-width: 380px;\n}\n\n.empty-description[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    color: var(--mj-text-primary);\n}\n\n\n\n.empty-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    margin-bottom: 32px;\n}\n\n.btn-primary.large[_ngcontent-%COMP%] {\n    padding: 14px 28px;\n    font-size: 15px;\n    border-radius: 8px;\n}\n\n\n\n.empty-features[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 32px;\n    padding-top: 24px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.feature-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n}\n\n.feature-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-bg-page);\n    border-radius: 8px;\n    color: var(--mj-brand-primary);\n    font-size: 16px;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]:not(.empty-title) {\n    margin: 0 0 8px 0;\n    font-size: 18px;\n    color: var(--mj-text-primary);\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%]:not(.empty-description) {\n    margin: 0 0 24px 0;\n    color: var(--mj-text-secondary);\n    font-size: 14px;\n    max-width: 300px;\n}\n\n\n\n.category-drop-zones[_ngcontent-%COMP%] {\n    position: fixed;\n    bottom: 24px;\n    left: 50%;\n    transform: translateX(-50%);\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n    padding: 16px;\n    z-index: 1000;\n}\n\n.drop-zone-header[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    margin-bottom: 12px;\n    text-align: center;\n}\n\n.drop-zones[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n    justify-content: center;\n}\n\n.drop-zone[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 16px;\n    background: var(--mj-bg-surface-card);\n    border: 2px dashed var(--mj-border-strong);\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s;\n}\n\n.drop-zone[_ngcontent-%COMP%]:hover, \n.drop-zone.active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-text-primary);\n}\n\n\n\n.move-dialog-overlay[_ngcontent-%COMP%] {\n    position: fixed;\n    inset: 0;\n    background: rgba(0, 0, 0, 0.5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n}\n\n.move-dialog[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    width: 400px;\n    max-width: 90%;\n    max-height: 80vh;\n    display: flex;\n    flex-direction: column;\n    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);\n}\n\n.dialog-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.dialog-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 18px;\n    color: var(--mj-text-primary);\n}\n\n.close-btn[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    border-radius: 4px;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.dialog-content[_ngcontent-%COMP%] {\n    padding: 20px;\n    overflow-y: auto;\n}\n\n.dialog-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0 0 16px 0;\n    color: var(--mj-text-secondary);\n    font-size: 14px;\n}\n\n.category-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.category-option[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.category-option[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.category-option[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.dialog-footer[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: flex-end;\n    padding: 16px 20px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n\n\n.new-dropdown[_ngcontent-%COMP%] {\n    position: relative;\n}\n\n.dropdown-caret[_ngcontent-%COMP%] {\n    font-size: 10px;\n    margin-left: 4px;\n}\n\n.dropdown-menu[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 100%;\n    right: 0;\n    margin-top: 4px;\n    min-width: 160px;\n    background: var(--mj-bg-surface);\n    border-radius: 8px;\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n    z-index: 1001;\n    overflow: hidden;\n}\n\n.dropdown-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    width: 100%;\n    padding: 12px 16px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-primary);\n    font-size: 14px;\n    cursor: pointer;\n    text-align: left;\n    transition: background 0.15s;\n}\n\n.dropdown-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.dropdown-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    width: 16px;\n    text-align: center;\n}\n\n.dropdown-backdrop[_ngcontent-%COMP%] {\n    position: fixed;\n    inset: 0;\n    z-index: 1000;\n}\n\n\n\n.create-category-dialog-overlay[_ngcontent-%COMP%] {\n    position: fixed;\n    inset: 0;\n    background: rgba(0, 0, 0, 0.5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1002;\n}\n\n.create-category-dialog[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    width: 400px;\n    max-width: 90%;\n    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);\n}\n\n.create-category-dialog[_ngcontent-%COMP%]   .dialog-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.create-category-dialog[_ngcontent-%COMP%]   .dialog-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 18px;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.create-category-dialog[_ngcontent-%COMP%]   .dialog-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.create-category-dialog[_ngcontent-%COMP%]   .dialog-content[_ngcontent-%COMP%] {\n    padding: 20px;\n}\n\n.form-field[_ngcontent-%COMP%] {\n    margin-bottom: 16px;\n}\n\n.form-field[_ngcontent-%COMP%]:last-child {\n    margin-bottom: 0;\n}\n\n.form-field[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\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-field[_ngcontent-%COMP%]   input[_ngcontent-%COMP%], \n.form-field[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 10px 12px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 6px;\n    font-size: 14px;\n    transition: border-color 0.15s, box-shadow 0.15s;\n    box-sizing: border-box;\n}\n\n.form-field[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus, \n.form-field[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%]: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-field[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%] {\n    resize: vertical;\n    min-height: 80px;\n}\n\n.create-category-dialog[_ngcontent-%COMP%]   .dialog-footer[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 10px;\n    padding: 16px 20px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.create-category-dialog[_ngcontent-%COMP%]   .dialog-footer[_ngcontent-%COMP%]   .btn-primary[_ngcontent-%COMP%] {\n    flex: 0 0 auto;\n}\n\n.create-category-dialog[_ngcontent-%COMP%]   .dialog-footer[_ngcontent-%COMP%]   .btn-secondary[_ngcontent-%COMP%] {\n    flex: 0 0 auto;\n    margin-left: auto;\n}\n\n\n\n.breadcrumb-nav[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 12px 24px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-wrap: wrap;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 10px;\n    border: none;\n    background: transparent;\n    color: var(--mj-brand-primary);\n    font-size: 13px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: background 0.15s;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.breadcrumb-item.current[_ngcontent-%COMP%] {\n    color: var(--mj-text-primary);\n    font-weight: 500;\n    cursor: default;\n}\n\n.breadcrumb-item.current[_ngcontent-%COMP%]:hover {\n    background: transparent;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n.breadcrumb-item.root[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n.breadcrumb-separator[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-size: 10px;\n}\n\n\n\n.category-card[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n\n.category-card[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n}\n\n.folder-icon[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning) !important;\n}\n\n.category-row[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n}\n\n.category-row[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface)) !important;\n}\n\n.category-row[_ngcontent-%COMP%]   .folder-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n}\n\n\n\n.dashboard-card.category-card.drop-target[_ngcontent-%COMP%], \n.list-row.category-row.drop-target[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n\n\nmark[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n    color: inherit;\n    padding: 0 2px;\n    border-radius: 2px;\n}\n\n\n\n.delete-category-dialog-overlay[_ngcontent-%COMP%] {\n    position: fixed;\n    inset: 0;\n    background: rgba(0, 0, 0, 0.5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1002;\n}\n\n.delete-category-dialog[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    width: 480px;\n    max-width: 90%;\n    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);\n}\n\n.delete-category-dialog[_ngcontent-%COMP%]   .dialog-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.delete-category-dialog[_ngcontent-%COMP%]   .dialog-header.danger[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    border-bottom-color: color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n}\n\n.delete-category-dialog[_ngcontent-%COMP%]   .dialog-header.danger[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n.delete-category-dialog[_ngcontent-%COMP%]   .dialog-header.danger[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n.delete-category-dialog[_ngcontent-%COMP%]   .dialog-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 18px;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.delete-category-dialog[_ngcontent-%COMP%]   .dialog-content[_ngcontent-%COMP%] {\n    padding: 20px;\n}\n\n.warning-message[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.warning-message[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0 0 12px 0;\n    color: var(--mj-text-primary);\n    font-size: 14px;\n    line-height: 1.5;\n}\n\n.warning-message[_ngcontent-%COMP%]   .content-warning[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    font-weight: 500;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 16px;\n}\n\n.warning-message[_ngcontent-%COMP%]   .content-list[_ngcontent-%COMP%] {\n    margin: 8px 0 0 0;\n    padding-left: 24px;\n    color: var(--mj-text-secondary);\n}\n\n.warning-message[_ngcontent-%COMP%]   .content-list[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {\n    margin: 6px 0;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.warning-message[_ngcontent-%COMP%]   .content-list[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    width: 16px;\n    text-align: center;\n}\n\n.confirmation-checkbox[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    cursor: pointer;\n}\n\n.checkbox-label[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    width: 18px;\n    height: 18px;\n    margin-top: 2px;\n    cursor: pointer;\n    accent-color: var(--mj-status-error);\n}\n\n.checkbox-text[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    line-height: 1.5;\n}\n\n.delete-category-dialog[_ngcontent-%COMP%]   .dialog-footer[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 10px;\n    padding: 16px 20px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.btn-danger[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 16px;\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.15s;\n}\n\n.btn-danger[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 85%, black);\n}\n\n.btn-danger[_ngcontent-%COMP%]:disabled {\n    background: var(--mj-border-default);\n    color: var(--mj-text-disabled);\n    cursor: not-allowed;\n}\n\n.delete-category-dialog[_ngcontent-%COMP%]   .dialog-footer[_ngcontent-%COMP%]   .btn-secondary[_ngcontent-%COMP%] {\n    margin-left: auto;\n}"], changeDetection: 0 });
+        } }, dependencies: [i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.LoadingComponent, i3.MJEmptyStateComponent, i4.DashboardBreadcrumbComponent, i5.ConfirmDialogComponent], styles: ["\n\n\n.dashboard-browser[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--mj-bg-page);\n    position: relative;\n}\n\n\n\n.browser-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0 24px 0 0;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    gap: 16px;\n}\n\n.toolbar-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.dashboard-count[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    padding: 4px 10px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 12px;\n}\n\n\n\n.browser-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 24px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.header-left[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.header-left[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.header-left[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.header-right[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n\n\n.view-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 6px;\n    padding: 2px;\n}\n\n.toggle-btn[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.toggle-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary);\n}\n\n.toggle-btn.active[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n\n\n.select-mode-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 12px;\n    background: var(--mj-bg-surface-sunken);\n    border: none;\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s;\n}\n\n.select-mode-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-border-default);\n    color: var(--mj-text-primary);\n}\n\n.select-mode-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n\n\n.selection-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 4px 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 6px;\n}\n\n.selection-toolbar[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.selection-toolbar[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%]:disabled:hover {\n    background: transparent;\n    color: var(--mj-text-secondary);\n}\n\n.selected-count[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n    min-width: 70px;\n}\n\n\n\n.btn-primary[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 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.15s;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 16px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover {\n    background: var(--mj-border-default);\n}\n\n.action-btn[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-border-default);\n    color: var(--mj-text-primary);\n}\n\n.action-btn.danger[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n\n\n.browser-filters[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 24px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-box[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    flex: 1;\n    max-width: 400px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 6px;\n    padding: 0 12px;\n}\n\n.search-box[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-size: 14px;\n}\n\n.search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    flex: 1;\n    border: none;\n    background: transparent;\n    padding: 10px 12px;\n    font-size: 14px;\n    outline: none;\n}\n\n.search-box[_ngcontent-%COMP%]   .clear-btn[_ngcontent-%COMP%] {\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    border-radius: 50%;\n}\n\n.search-box[_ngcontent-%COMP%]   .clear-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-border-default);\n    color: var(--mj-text-secondary);\n}\n\n.category-filter[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n    padding: 10px 32px 10px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    background: var(--mj-bg-surface);\n    cursor: pointer;\n    outline: none;\n    appearance: none;\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    background-position: right 10px center;\n}\n\n.clear-filters-btn[_ngcontent-%COMP%], \n.select-all-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 12px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.clear-filters-btn[_ngcontent-%COMP%]:hover, \n.select-all-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n}\n\n\n\n.loading-overlay[_ngcontent-%COMP%] {\n    position: absolute;\n    inset: 0;\n    background: color-mix(in srgb, var(--mj-bg-surface) 90%, transparent);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 100;\n}\n\n\n\n.dashboard-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n    gap: 20px;\n    padding: 24px;\n    overflow-y: auto;\n}\n\n.dashboard-card[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 8px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n    cursor: pointer;\n    transition: all 0.2s;\n    border: 2px solid transparent;\n    position: relative;\n}\n\n.dashboard-card[_ngcontent-%COMP%]:hover {\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n    transform: translateY(-2px);\n}\n\n.dashboard-card.selected[_ngcontent-%COMP%] {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.dashboard-card.dragging[_ngcontent-%COMP%] {\n    opacity: 0.5;\n}\n\n.card-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 16px;\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.card-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-brand-primary);\n    border-radius: 8px;\n    color: var(--mj-text-inverse);\n    font-size: 16px;\n}\n\n\n\n.card-select-area[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    z-index: 2;\n    padding: 10px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 8px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background 0.15s;\n}\n\n.card-select-area[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.dashboard-card.selected[_ngcontent-%COMP%]   .card-select-area[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n}\n\n.card-select-area[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    width: 18px;\n    height: 18px;\n    cursor: pointer;\n    accent-color: var(--mj-brand-primary);\n}\n\n.card-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    margin-left: auto;\n    opacity: 0;\n    transition: opacity 0.15s;\n}\n\n.dashboard-card[_ngcontent-%COMP%]:hover   .card-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.card-content[_ngcontent-%COMP%] {\n    padding: 16px;\n}\n\n.card-title[_ngcontent-%COMP%] {\n    margin: 0 0 8px 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n\n\n.shared-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-size: 10px;\n    flex-shrink: 0;\n}\n\n.card-description[_ngcontent-%COMP%] {\n    margin: 0 0 12px 0;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    line-height: 1.4;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.card-meta[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n}\n\n.meta-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n\n\n.dashboard-list[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    background: var(--mj-bg-surface);\n    margin: 16px 24px;\n    border-radius: 8px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.list-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 12px 16px;\n    background: var(--mj-bg-page);\n    border-bottom: 1px solid var(--mj-border-default);\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.list-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 12px 16px;\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.list-row[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.list-row.selected[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.list-row.dragging[_ngcontent-%COMP%] {\n    opacity: 0.5;\n}\n\n.list-col[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n}\n\n.checkbox-col[_ngcontent-%COMP%] {\n    width: 40px;\n}\n\n.checkbox-col[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    width: 16px;\n    height: 16px;\n    cursor: pointer;\n}\n\n.name-col[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 200px;\n    gap: 10px;\n    display: flex;\n    align-items: center;\n}\n\n.name-col[_ngcontent-%COMP%]   .shared-badge[_ngcontent-%COMP%] {\n    margin-left: 4px;\n}\n\n.row-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.dashboard-name[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.category-col[_ngcontent-%COMP%], \n.type-col[_ngcontent-%COMP%] {\n    width: 120px;\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n}\n\n.date-col[_ngcontent-%COMP%] {\n    width: 120px;\n    color: var(--mj-text-disabled);\n    font-size: 13px;\n}\n\n.actions-col[_ngcontent-%COMP%] {\n    width: 80px;\n    justify-content: flex-end;\n    gap: 4px;\n    opacity: 0;\n    transition: opacity 0.15s;\n}\n\n.list-row[_ngcontent-%COMP%]:hover   .actions-col[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n\n\n\n\n\n.dashboard-empty[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 400px;\n}\n\n\n\n.empty-features[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 32px;\n    margin-top: var(--mj-space-5);\n    padding-top: 24px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.feature-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n}\n\n.feature-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-bg-page);\n    border-radius: 8px;\n    color: var(--mj-brand-primary);\n    font-size: 16px;\n}\n\n\n\n.category-drop-zones[_ngcontent-%COMP%] {\n    position: fixed;\n    bottom: 24px;\n    left: 50%;\n    transform: translateX(-50%);\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n    padding: 16px;\n    z-index: 1000;\n}\n\n.drop-zone-header[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    margin-bottom: 12px;\n    text-align: center;\n}\n\n.drop-zones[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n    justify-content: center;\n}\n\n.drop-zone[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 16px;\n    background: var(--mj-bg-surface-card);\n    border: 2px dashed var(--mj-border-strong);\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s;\n}\n\n.drop-zone[_ngcontent-%COMP%]:hover, \n.drop-zone.active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-text-primary);\n}\n\n\n\n.move-dialog-overlay[_ngcontent-%COMP%] {\n    position: fixed;\n    inset: 0;\n    background: rgba(0, 0, 0, 0.5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n}\n\n.move-dialog[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    width: 400px;\n    max-width: 90%;\n    max-height: 80vh;\n    display: flex;\n    flex-direction: column;\n    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);\n}\n\n.dialog-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.dialog-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 18px;\n    color: var(--mj-text-primary);\n}\n\n.close-btn[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    border-radius: 4px;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.dialog-content[_ngcontent-%COMP%] {\n    padding: 20px;\n    overflow-y: auto;\n}\n\n.dialog-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0 0 16px 0;\n    color: var(--mj-text-secondary);\n    font-size: 14px;\n}\n\n.category-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.category-option[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.category-option[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.category-option[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.dialog-footer[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: flex-end;\n    padding: 16px 20px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n\n\n.new-dropdown[_ngcontent-%COMP%] {\n    position: relative;\n}\n\n.dropdown-caret[_ngcontent-%COMP%] {\n    font-size: 10px;\n    margin-left: 4px;\n}\n\n.dropdown-menu[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 100%;\n    right: 0;\n    margin-top: 4px;\n    min-width: 160px;\n    background: var(--mj-bg-surface);\n    border-radius: 8px;\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n    z-index: 1001;\n    overflow: hidden;\n}\n\n.dropdown-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    width: 100%;\n    padding: 12px 16px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-primary);\n    font-size: 14px;\n    cursor: pointer;\n    text-align: left;\n    transition: background 0.15s;\n}\n\n.dropdown-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.dropdown-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    width: 16px;\n    text-align: center;\n}\n\n.dropdown-backdrop[_ngcontent-%COMP%] {\n    position: fixed;\n    inset: 0;\n    z-index: 1000;\n}\n\n\n\n.create-category-dialog-overlay[_ngcontent-%COMP%] {\n    position: fixed;\n    inset: 0;\n    background: rgba(0, 0, 0, 0.5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1002;\n}\n\n.create-category-dialog[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    width: 400px;\n    max-width: 90%;\n    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);\n}\n\n.create-category-dialog[_ngcontent-%COMP%]   .dialog-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.create-category-dialog[_ngcontent-%COMP%]   .dialog-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 18px;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.create-category-dialog[_ngcontent-%COMP%]   .dialog-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.create-category-dialog[_ngcontent-%COMP%]   .dialog-content[_ngcontent-%COMP%] {\n    padding: 20px;\n}\n\n.form-field[_ngcontent-%COMP%] {\n    margin-bottom: 16px;\n}\n\n.form-field[_ngcontent-%COMP%]:last-child {\n    margin-bottom: 0;\n}\n\n.form-field[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\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-field[_ngcontent-%COMP%]   input[_ngcontent-%COMP%], \n.form-field[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 10px 12px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 6px;\n    font-size: 14px;\n    transition: border-color 0.15s, box-shadow 0.15s;\n    box-sizing: border-box;\n}\n\n.form-field[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus, \n.form-field[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%]: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-field[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%] {\n    resize: vertical;\n    min-height: 80px;\n}\n\n.create-category-dialog[_ngcontent-%COMP%]   .dialog-footer[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 10px;\n    padding: 16px 20px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.create-category-dialog[_ngcontent-%COMP%]   .dialog-footer[_ngcontent-%COMP%]   .btn-primary[_ngcontent-%COMP%] {\n    flex: 0 0 auto;\n}\n\n.create-category-dialog[_ngcontent-%COMP%]   .dialog-footer[_ngcontent-%COMP%]   .btn-secondary[_ngcontent-%COMP%] {\n    flex: 0 0 auto;\n    margin-left: auto;\n}\n\n\n\n.breadcrumb-nav[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 12px 24px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-wrap: wrap;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 10px;\n    border: none;\n    background: transparent;\n    color: var(--mj-brand-primary);\n    font-size: 13px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: background 0.15s;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.breadcrumb-item.current[_ngcontent-%COMP%] {\n    color: var(--mj-text-primary);\n    font-weight: 500;\n    cursor: default;\n}\n\n.breadcrumb-item.current[_ngcontent-%COMP%]:hover {\n    background: transparent;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n.breadcrumb-item.root[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n.breadcrumb-separator[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-size: 10px;\n}\n\n\n\n.category-card[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n\n.category-card[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n}\n\n.folder-icon[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning) !important;\n}\n\n.category-row[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n}\n\n.category-row[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface)) !important;\n}\n\n.category-row[_ngcontent-%COMP%]   .folder-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n}\n\n\n\n.dashboard-card.category-card.drop-target[_ngcontent-%COMP%], \n.list-row.category-row.drop-target[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n\n\nmark[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n    color: inherit;\n    padding: 0 2px;\n    border-radius: 2px;\n}\n\n\n\n.delete-category-dialog-overlay[_ngcontent-%COMP%] {\n    position: fixed;\n    inset: 0;\n    background: rgba(0, 0, 0, 0.5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1002;\n}\n\n.delete-category-dialog[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    width: 480px;\n    max-width: 90%;\n    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);\n}\n\n.delete-category-dialog[_ngcontent-%COMP%]   .dialog-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.delete-category-dialog[_ngcontent-%COMP%]   .dialog-header.danger[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    border-bottom-color: color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n}\n\n.delete-category-dialog[_ngcontent-%COMP%]   .dialog-header.danger[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n.delete-category-dialog[_ngcontent-%COMP%]   .dialog-header.danger[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n.delete-category-dialog[_ngcontent-%COMP%]   .dialog-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 18px;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.delete-category-dialog[_ngcontent-%COMP%]   .dialog-content[_ngcontent-%COMP%] {\n    padding: 20px;\n}\n\n.warning-message[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.warning-message[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0 0 12px 0;\n    color: var(--mj-text-primary);\n    font-size: 14px;\n    line-height: 1.5;\n}\n\n.warning-message[_ngcontent-%COMP%]   .content-warning[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    font-weight: 500;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 16px;\n}\n\n.warning-message[_ngcontent-%COMP%]   .content-list[_ngcontent-%COMP%] {\n    margin: 8px 0 0 0;\n    padding-left: 24px;\n    color: var(--mj-text-secondary);\n}\n\n.warning-message[_ngcontent-%COMP%]   .content-list[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {\n    margin: 6px 0;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.warning-message[_ngcontent-%COMP%]   .content-list[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    width: 16px;\n    text-align: center;\n}\n\n.confirmation-checkbox[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    cursor: pointer;\n}\n\n.checkbox-label[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    width: 18px;\n    height: 18px;\n    margin-top: 2px;\n    cursor: pointer;\n    accent-color: var(--mj-status-error);\n}\n\n.checkbox-text[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    line-height: 1.5;\n}\n\n.delete-category-dialog[_ngcontent-%COMP%]   .dialog-footer[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 10px;\n    padding: 16px 20px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.btn-danger[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 16px;\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.15s;\n}\n\n.btn-danger[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 85%, black);\n}\n\n.btn-danger[_ngcontent-%COMP%]:disabled {\n    background: var(--mj-border-default);\n    color: var(--mj-text-disabled);\n    cursor: not-allowed;\n}\n\n.delete-category-dialog[_ngcontent-%COMP%]   .dialog-footer[_ngcontent-%COMP%]   .btn-secondary[_ngcontent-%COMP%] {\n    margin-left: auto;\n}"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DashboardBrowserComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-dashboard-browser', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Dashboard Browser Component -->\n<div class=\"dashboard-browser\" [class.loading]=\"IsLoading\">\n  <!-- Toolbar Row: Breadcrumb + Actions -->\n  <div class=\"browser-toolbar\">\n    <!-- Breadcrumb Navigation -->\n    <mj-dashboard-breadcrumb\n      [Categories]=\"Categories\"\n      [CurrentCategoryId]=\"SelectedCategoryId\"\n      [RootIcon]=\"IconClass\"\n      [RootLabel]=\"Title\"\n      [AllowDragDrop]=\"AllowDragDrop && (DraggingId !== null || IsSelectionMode)\"\n      Size=\"large\"\n      (Navigate)=\"NavigateToCategory($event.CategoryId)\"\n      (DashboardDrop)=\"OnBreadcrumbDrop($event)\">\n    </mj-dashboard-breadcrumb>\n\n    <!-- Right-side Actions -->\n    <div class=\"toolbar-actions\">\n      <!-- Dashboard count -->\n      <span class=\"dashboard-count\">{{ FilteredDashboards.length }} dashboards</span>\n\n      <!-- View Toggle -->\n      <div class=\"view-toggle\">\n        <button\n          class=\"toggle-btn\"\n          [class.active]=\"ViewMode === 'cards'\"\n          (click)=\"SetViewMode('cards')\"\n          title=\"Card View\">\n          <i class=\"fa-solid fa-grip\"></i>\n        </button>\n        <button\n          class=\"toggle-btn\"\n          [class.active]=\"ViewMode === 'list'\"\n          (click)=\"SetViewMode('list')\"\n          title=\"List View\">\n          <i class=\"fa-solid fa-list\"></i>\n        </button>\n      </div>\n\n      <!-- Selection Mode Toggle & Bulk Actions -->\n      @if (AllowMultiSelect) {\n        <!-- Enter Selection Mode Button (when not in selection mode) -->\n        @if (!IsSelectionMode && FilteredDashboards.length > 0) {\n          <button\n            class=\"select-mode-btn\"\n            (click)=\"EnterSelectionMode()\"\n            title=\"Select multiple dashboards\">\n            <i class=\"fa-solid fa-check-double\"></i>\n            Select\n          </button>\n        }\n        <!-- Selection Mode Toolbar (when in selection mode) -->\n        @if (IsSelectionMode) {\n          <div class=\"selection-toolbar\">\n            <span class=\"selected-count\">{{ SelectedCount }} selected</span>\n            <button class=\"action-btn\" (click)=\"SelectAll()\" title=\"Select all\">\n              <i class=\"fa-solid fa-check-double\"></i>\n            </button>\n            <button class=\"action-btn\" (click)=\"OnMoveSelected()\" title=\"Move to folder\" [disabled]=\"SelectedCount === 0\">\n              <i class=\"fa-solid fa-folder-open\"></i>\n            </button>\n            <button class=\"action-btn danger\" (click)=\"OnDeleteSelected()\" title=\"Delete selected\" [disabled]=\"!CanDeleteAnySelected\">\n              <i class=\"fa-solid fa-trash\"></i>\n            </button>\n            <button class=\"action-btn\" (click)=\"ExitSelectionMode()\" title=\"Exit selection mode\">\n              <i class=\"fa-solid fa-times\"></i>\n            </button>\n          </div>\n        }\n      }\n\n      <!-- New Dropdown Button -->\n      @if (ShowCreateButton) {\n        <div class=\"new-dropdown\">\n          <button\n            class=\"btn-primary\"\n            (click)=\"ToggleNewMenu(); $event.stopPropagation()\">\n            <i class=\"fa-solid fa-plus\"></i>\n            New\n            <i class=\"fa-solid fa-caret-down dropdown-caret\"></i>\n          </button>\n          @if (ShowNewMenu) {\n            <div class=\"dropdown-menu\">\n              <button class=\"dropdown-item\" (click)=\"OnCreateDashboard()\">\n                <i class=\"fa-solid fa-chart-line\"></i>\n                Dashboard\n              </button>\n              <button class=\"dropdown-item\" (click)=\"OpenCreateCategoryDialog()\">\n                <i class=\"fa-solid fa-folder-plus\"></i>\n                Category\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Click-away overlay for dropdown -->\n  @if (ShowNewMenu) {\n    <div class=\"dropdown-backdrop\" (click)=\"CloseNewMenu()\"></div>\n  }\n\n  <!-- Filters -->\n  <div class=\"browser-filters\">\n    <div class=\"search-box\">\n      <i class=\"fa-solid fa-search\"></i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"SearchText\"\n        (input)=\"OnSearchChange()\"\n        placeholder=\"Search dashboards...\">\n      @if (SearchText) {\n        <button\n          class=\"clear-btn\"\n          (click)=\"ClearSearch()\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      }\n    </div>\n\n    @if (SearchText) {\n      <button\n        class=\"clear-filters-btn\"\n        (click)=\"ClearSearch()\">\n        <i class=\"fa-solid fa-filter-circle-xmark\"></i>\n        Clear Search\n      </button>\n    }\n  </div>\n\n  <!-- Loading Overlay -->\n  @if (IsLoading) {\n    <div class=\"loading-overlay\">\n      <mj-loading text=\"Loading dashboards...\"></mj-loading>\n    </div>\n  }\n\n  <!-- Card View -->\n  @if (ViewMode === 'cards' && (FilteredChildCategories.length > 0 || FilteredDashboards.length > 0)) {\n    <div class=\"dashboard-grid\">\n      <!-- Category Folders -->\n      @for (category of FilteredChildCategories; track TrackByCategory($index, category)) {\n        <div\n          class=\"dashboard-card category-card\"\n          [class.drop-target]=\"DragOverChildCategoryId === category.ID\"\n          (click)=\"NavigateToCategory(category.ID)\"\n          (dblclick)=\"$event.stopPropagation()\"\n          (dragover)=\"OnDragOverChildCategory(category.ID, $event)\"\n          (dragleave)=\"OnDragLeaveChildCategory()\"\n          (drop)=\"OnDropOnChildCategory(category.ID, $event)\">\n          <div class=\"card-header\">\n            <div class=\"card-icon folder-icon\">\n              <i class=\"fa-solid fa-folder\"></i>\n            </div>\n            <div class=\"card-actions\">\n              <button\n                class=\"action-btn danger\"\n                title=\"Delete category\"\n                (click)=\"OnDeleteCategory(category, $event)\">\n                <i class=\"fa-solid fa-trash\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"card-content\">\n            <h3 class=\"card-title\" [innerHTML]=\"HighlightMatch(category.Name)\"></h3>\n            @if (category.Description) {\n              <p class=\"card-description\" [innerHTML]=\"HighlightMatch(category.Description)\">\n              </p>\n            }\n            <div class=\"card-meta\">\n              <span class=\"meta-item\">\n                <i class=\"fa-solid fa-folder-tree\"></i>\n                Category\n              </span>\n            </div>\n          </div>\n        </div>\n      }\n      <!-- Dashboard Cards -->\n      @for (dashboard of FilteredDashboards; track TrackByDashboard($index, dashboard)) {\n        <div\n          class=\"dashboard-card\"\n          [class.selected]=\"IsSelected(dashboard.ID)\"\n          [class.dragging]=\"DraggingId === dashboard.ID\"\n          [draggable]=\"AllowDragDrop\"\n          (click)=\"OnDashboardClick(dashboard, $event)\"\n          (dblclick)=\"OnDashboardDoubleClick(dashboard, $event)\"\n          (dragstart)=\"OnDragStart(dashboard, $event)\"\n          (dragend)=\"OnDragEnd()\">\n          <!-- Selection checkbox in top-right corner -->\n          @if (IsSelectionMode) {\n            <div\n              class=\"card-select-area\"\n              (click)=\"ToggleSelection(dashboard.ID); $event.stopPropagation()\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"IsSelected(dashboard.ID)\"\n                (change)=\"$event.stopPropagation()\">\n            </div>\n          }\n          <div class=\"card-header\">\n            <div class=\"card-icon\">\n              <i class=\"fa-solid fa-chart-line\"></i>\n            </div>\n            <div class=\"card-actions\">\n              @if (CanEdit(dashboard.ID)) {\n                <button\n                  class=\"action-btn\"\n                  title=\"Edit\"\n                  (click)=\"OnEditDashboard(dashboard, $event)\">\n                  <i class=\"fa-solid fa-edit\"></i>\n                </button>\n              }\n              @if (CanDelete(dashboard.ID)) {\n                <button\n                  class=\"action-btn danger\"\n                  title=\"Delete\"\n                  (click)=\"OnDeleteDashboard(dashboard, $event)\">\n                  <i class=\"fa-solid fa-trash\"></i>\n                </button>\n              }\n            </div>\n          </div>\n          <div class=\"card-content\">\n            <h3 class=\"card-title\">\n              <span [innerHTML]=\"HighlightMatch(dashboard.Name)\"></span>\n              @if (IsShared(dashboard.ID)) {\n                <span class=\"shared-badge\" title=\"Shared with you\">\n                  <i class=\"fa-solid fa-share-nodes\"></i>\n                </span>\n              }\n            </h3>\n            @if (dashboard.Description) {\n              <p class=\"card-description\" [innerHTML]=\"HighlightMatch(dashboard.Description)\">\n              </p>\n            }\n            <div class=\"card-meta\">\n              <span class=\"meta-item\">\n                <i class=\"fa-solid fa-clock\"></i>\n                {{ FormatDate(dashboard.__mj_UpdatedAt) }}\n              </span>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- List View -->\n  @if (ViewMode === 'list' && (FilteredChildCategories.length > 0 || FilteredDashboards.length > 0)) {\n    <div class=\"dashboard-list\">\n      <div class=\"list-header\">\n        @if (IsSelectionMode) {\n          <div class=\"list-col checkbox-col\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"SelectedCount === FilteredDashboards.length && FilteredDashboards.length > 0\"\n              [indeterminate]=\"SelectedCount > 0 && SelectedCount < FilteredDashboards.length\"\n              (change)=\"SelectedCount === FilteredDashboards.length ? ClearSelection() : SelectAll()\">\n          </div>\n        }\n        <div class=\"list-col name-col\">Name</div>\n        <div class=\"list-col type-col\">Type</div>\n        <div class=\"list-col date-col\">Modified</div>\n        <div class=\"list-col actions-col\">Actions</div>\n      </div>\n      <!-- Category Rows -->\n      @for (category of FilteredChildCategories; track TrackByCategory($index, category)) {\n        <div\n          class=\"list-row category-row\"\n          [class.drop-target]=\"DragOverChildCategoryId === category.ID\"\n          (click)=\"NavigateToCategory(category.ID)\"\n          (dragover)=\"OnDragOverChildCategory(category.ID, $event)\"\n          (dragleave)=\"OnDragLeaveChildCategory()\"\n          (drop)=\"OnDropOnChildCategory(category.ID, $event)\">\n          @if (IsSelectionMode) {\n            <div class=\"list-col checkbox-col\">\n              <!-- Empty placeholder for alignment -->\n            </div>\n          }\n          <div class=\"list-col name-col\">\n            <i class=\"fa-solid fa-folder row-icon folder-icon\"></i>\n            <span class=\"dashboard-name\" [innerHTML]=\"HighlightMatch(category.Name)\"></span>\n          </div>\n          <div class=\"list-col type-col\">\n            Category\n          </div>\n          <div class=\"list-col date-col\">\n            <!-- No date for categories -->\n          </div>\n          <div class=\"list-col actions-col\" (click)=\"$event.stopPropagation()\">\n            <button\n              class=\"action-btn danger\"\n              title=\"Delete category\"\n              (click)=\"OnDeleteCategory(category, $event)\">\n              <i class=\"fa-solid fa-trash\"></i>\n            </button>\n          </div>\n        </div>\n      }\n      <!-- Dashboard Rows -->\n      @for (dashboard of FilteredDashboards; track TrackByDashboard($index, dashboard)) {\n        <div\n          class=\"list-row\"\n          [class.selected]=\"IsSelected(dashboard.ID)\"\n          [class.dragging]=\"DraggingId === dashboard.ID\"\n          [draggable]=\"AllowDragDrop\"\n          (click)=\"OnDashboardClick(dashboard, $event)\"\n          (dblclick)=\"OnDashboardDoubleClick(dashboard, $event)\"\n          (dragstart)=\"OnDragStart(dashboard, $event)\"\n          (dragend)=\"OnDragEnd()\">\n          @if (IsSelectionMode) {\n            <div class=\"list-col checkbox-col\" (click)=\"$event.stopPropagation()\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"IsSelected(dashboard.ID)\"\n                (change)=\"ToggleSelection(dashboard.ID)\">\n            </div>\n          }\n          <div class=\"list-col name-col\">\n            <i class=\"fa-solid fa-chart-line row-icon\"></i>\n            <span class=\"dashboard-name\" [innerHTML]=\"HighlightMatch(dashboard.Name)\"></span>\n            @if (IsShared(dashboard.ID)) {\n              <span class=\"shared-badge\" title=\"Shared with you\">\n                <i class=\"fa-solid fa-share-nodes\"></i>\n              </span>\n            }\n          </div>\n          <div class=\"list-col type-col\">\n            Dashboard\n          </div>\n          <div class=\"list-col date-col\">\n            {{ FormatDate(dashboard.__mj_UpdatedAt) }}\n          </div>\n          <div class=\"list-col actions-col\" (click)=\"$event.stopPropagation()\">\n            @if (CanEdit(dashboard.ID)) {\n              <button\n                class=\"action-btn\"\n                title=\"Edit\"\n                (click)=\"OnEditDashboard(dashboard, $event)\">\n                <i class=\"fa-solid fa-edit\"></i>\n              </button>\n            }\n            @if (CanDelete(dashboard.ID)) {\n              <button\n                class=\"action-btn danger\"\n                title=\"Delete\"\n                (click)=\"OnDeleteDashboard(dashboard, $event)\">\n                <i class=\"fa-solid fa-trash\"></i>\n              </button>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Empty State -->\n  @if (FilteredDashboards.length === 0 && FilteredChildCategories.length === 0 && !IsLoading) {\n    <div class=\"empty-state\">\n      <div class=\"empty-state-content\">\n        <!-- First-time user experience (no dashboards at all) -->\n        @if (IsAtRoot && Dashboards.length === 0) {\n          <div class=\"empty-illustration\">\n            <div class=\"illustration-bg\">\n              <i class=\"fa-solid fa-gauge-high main-icon\"></i>\n            </div>\n            <div class=\"illustration-accent accent-1\"><i class=\"fa-solid fa-chart-line\"></i></div>\n            <div class=\"illustration-accent accent-2\"><i class=\"fa-solid fa-chart-bar\"></i></div>\n            <div class=\"illustration-accent accent-3\"><i class=\"fa-solid fa-chart-pie\"></i></div>\n          </div>\n          <h2 class=\"empty-title\">Welcome to Dashboards</h2>\n          <p class=\"empty-description\">\n            Create custom dashboards to visualize your data, track key metrics, and monitor important information all in one place.\n          </p>\n          @if (ShowCreateButton) {\n            <div class=\"empty-actions\">\n              <button class=\"btn-primary large\" (click)=\"OnCreateDashboard()\">\n                <i class=\"fa-solid fa-plus\"></i>\n                Create Your First Dashboard\n              </button>\n            </div>\n          }\n          <div class=\"empty-features\">\n            <div class=\"feature-item\">\n              <i class=\"fa-solid fa-table-cells\"></i>\n              <span>Customizable layouts</span>\n            </div>\n            <div class=\"feature-item\">\n              <i class=\"fa-solid fa-database\"></i>\n              <span>Connect to your data</span>\n            </div>\n            <div class=\"feature-item\">\n              <i class=\"fa-solid fa-share-nodes\"></i>\n              <span>Share with your team</span>\n            </div>\n          </div>\n        }\n        <!-- Folder is empty -->\n        @if (!IsAtRoot && !SearchText) {\n          <div class=\"empty-icon folder-empty\">\n            <i class=\"fa-solid fa-folder-open\"></i>\n          </div>\n          <h3 class=\"empty-title\">This folder is empty</h3>\n          <p class=\"empty-description\">\n            Add dashboards or create sub-folders to organize your content.\n          </p>\n          @if (ShowCreateButton) {\n            <div class=\"empty-actions\">\n              <button class=\"btn-primary\" (click)=\"OnCreateDashboard()\">\n                <i class=\"fa-solid fa-plus\"></i>\n                Create Dashboard\n              </button>\n            </div>\n          }\n        }\n        <!-- Root has dashboards but none uncategorized -->\n        @if (IsAtRoot && Dashboards.length > 0 && !SearchText) {\n          <div class=\"empty-icon\">\n            <i class=\"fa-solid fa-folder-tree\"></i>\n          </div>\n          <h3 class=\"empty-title\">No uncategorized dashboards</h3>\n          <p class=\"empty-description\">\n            All your dashboards are organized into folders. Browse the folders above or create a new dashboard here.\n          </p>\n          @if (ShowCreateButton) {\n            <div class=\"empty-actions\">\n              <button class=\"btn-primary\" (click)=\"OnCreateDashboard()\">\n                <i class=\"fa-solid fa-plus\"></i>\n                Create Dashboard\n              </button>\n            </div>\n          }\n        }\n        <!-- Search returned no results -->\n        @if (SearchText) {\n          <div class=\"empty-icon search-empty\">\n            <i class=\"fa-solid fa-magnifying-glass\"></i>\n          </div>\n          <h3 class=\"empty-title\">No results found</h3>\n          <p class=\"empty-description\">\n            No dashboards or folders match \"<strong>{{ SearchText }}</strong>\". Try a different search term.\n          </p>\n          <div class=\"empty-actions\">\n            <button class=\"btn-secondary\" (click)=\"ClearSearch()\">\n              <i class=\"fa-solid fa-times\"></i>\n              Clear Search\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Category Drop Zones (for drag and drop) -->\n  @if (DraggingId && Categories.length > 0) {\n    <div class=\"category-drop-zones\">\n      <div class=\"drop-zone-header\">Drop to move to category:</div>\n      <div class=\"drop-zones\">\n        <div\n          class=\"drop-zone\"\n          [class.active]=\"DropTargetCategoryId === null\"\n          (dragover)=\"OnDragOverCategory(null, $event)\"\n          (dragleave)=\"OnDragLeaveCategory()\"\n          (drop)=\"OnDropOnCategory(null, $event)\">\n          <i class=\"fa-solid fa-folder-open\"></i>\n          Uncategorized\n        </div>\n        @for (cat of Categories; track TrackByCategory($index, cat)) {\n          <div\n            class=\"drop-zone\"\n            [class.active]=\"DropTargetCategoryId === cat.ID\"\n            (dragover)=\"OnDragOverCategory(cat.ID, $event)\"\n            (dragleave)=\"OnDragLeaveCategory()\"\n            (drop)=\"OnDropOnCategory(cat.ID, $event)\">\n            <i class=\"fa-solid fa-folder\"></i>\n            {{ cat.Name }}\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Delete Confirmation Dialog -->\n  <mj-confirm-dialog\n    [visible]=\"ShowDeleteConfirm\"\n    type=\"danger\"\n    title=\"Delete Dashboard{{ DashboardsPendingDelete.length > 1 ? 's' : '' }}\"\n        [message]=\"DashboardsPendingDelete.length === 1\n            ? 'Are you sure you want to delete \\'' + DashboardsPendingDelete[0].Name + '\\'? This action cannot be undone.'\n            : 'Are you sure you want to delete ' + DashboardsPendingDelete.length + ' dashboards? This action cannot be undone.'\"\n    confirmText=\"Delete\"\n    cancelText=\"Cancel\"\n    (confirmed)=\"ConfirmDelete()\"\n    (cancelled)=\"CloseDeleteConfirm()\">\n  </mj-confirm-dialog>\n\n  <!-- Move to Folder Dialog -->\n  @if (ShowMoveDialog) {\n    <div class=\"move-dialog-overlay\" (click)=\"CloseMoveDialog()\">\n      <div class=\"move-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"dialog-header\">\n          <h3>Move to Category</h3>\n          <button class=\"close-btn\" (click)=\"CloseMoveDialog()\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n        <div class=\"dialog-content\">\n          <p>Move {{ SelectedCount }} dashboard{{ SelectedCount > 1 ? 's' : '' }} to:</p>\n          <div class=\"category-list\">\n            <div\n              class=\"category-option\"\n              (click)=\"ConfirmMove(null)\">\n              <i class=\"fa-solid fa-folder-open\"></i>\n              Uncategorized\n            </div>\n            @for (cat of Categories; track TrackByCategory($index, cat)) {\n              <div\n                class=\"category-option\"\n                (click)=\"ConfirmMove(cat.ID)\">\n                <i class=\"fa-solid fa-folder\"></i>\n                {{ cat.Name }}\n              </div>\n            }\n          </div>\n        </div>\n        <div class=\"dialog-footer\">\n          <button class=\"btn-secondary\" (click)=\"CloseMoveDialog()\">Cancel</button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Create Category Dialog -->\n  @if (ShowCreateCategoryDialog) {\n    <div class=\"create-category-dialog-overlay\" (click)=\"CloseCreateCategoryDialog()\">\n      <div class=\"create-category-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"dialog-header\">\n          <h3>\n            <i class=\"fa-solid fa-folder-plus\"></i>\n            Create Category\n          </h3>\n          <button class=\"close-btn\" (click)=\"CloseCreateCategoryDialog()\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n        <div class=\"dialog-content\">\n          <div class=\"form-field\">\n            <label for=\"category-name\">Name *</label>\n            <input\n              type=\"text\"\n              id=\"category-name\"\n              [(ngModel)]=\"NewCategoryName\"\n              placeholder=\"Enter category name\"\n              (keyup.enter)=\"ConfirmCreateCategory()\">\n          </div>\n          <div class=\"form-field\">\n            <label for=\"category-description\">Description</label>\n            <textarea\n              id=\"category-description\"\n              [(ngModel)]=\"NewCategoryDescription\"\n              placeholder=\"Optional description\"\n            rows=\"3\"></textarea>\n          </div>\n        </div>\n        <div class=\"dialog-footer\">\n          <button\n            class=\"btn-primary\"\n            (click)=\"ConfirmCreateCategory()\"\n            [disabled]=\"!NewCategoryName.trim()\">\n            <i class=\"fa-solid fa-plus\"></i>\n            Create\n          </button>\n          <button class=\"btn-secondary\" (click)=\"CloseCreateCategoryDialog()\">Cancel</button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Delete Category Confirmation Dialog -->\n  @if (ShowDeleteCategoryConfirm) {\n    <div class=\"delete-category-dialog-overlay\" (click)=\"CloseDeleteCategoryConfirm()\">\n      <div class=\"delete-category-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"dialog-header danger\">\n          <h3>\n            <i class=\"fa-solid fa-exclamation-triangle\"></i>\n            Delete Category\n          </h3>\n          <button class=\"close-btn\" (click)=\"CloseDeleteCategoryConfirm()\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n        @if (CategoryPendingDelete) {\n          <div class=\"dialog-content\">\n            <div class=\"warning-message\">\n              <p>\n                You are about to delete the category <strong>\"{{ CategoryPendingDelete.Name }}\"</strong>.\n              </p>\n              @if (GetCategoryContentCount(CategoryPendingDelete); as counts) {\n                @if (counts.dashboards > 0 || counts.categories > 0) {\n                  <p class=\"content-warning\">\n                    <i class=\"fa-solid fa-warning\"></i>\n                    This category contains:\n                  </p>\n                }\n                @if (counts.dashboards > 0 || counts.categories > 0) {\n                  <ul class=\"content-list\">\n                    @if (counts.dashboards > 0) {\n                      <li>\n                        <i class=\"fa-solid fa-chart-line\"></i>\n                        {{ counts.dashboards }} dashboard{{ counts.dashboards !== 1 ? 's' : '' }}\n                      </li>\n                    }\n                    @if (counts.categories > 0) {\n                      <li>\n                        <i class=\"fa-solid fa-folder\"></i>\n                        {{ counts.categories }} sub-categor{{ counts.categories !== 1 ? 'ies' : 'y' }}\n                      </li>\n                    }\n                  </ul>\n                }\n              }\n            </div>\n            <div class=\"confirmation-checkbox\">\n              <label class=\"checkbox-label\">\n                <input\n                  type=\"checkbox\"\n                  [(ngModel)]=\"DeleteCategoryIncludeContents\">\n                <span class=\"checkbox-text\">\n                  I understand this will permanently delete this category and all its contents. This action cannot be undone.\n                </span>\n              </label>\n            </div>\n          </div>\n        }\n        <div class=\"dialog-footer\">\n          <button\n            class=\"btn-danger\"\n            (click)=\"ConfirmDeleteCategory()\"\n            [disabled]=\"!DeleteCategoryIncludeContents\">\n            <i class=\"fa-solid fa-trash\"></i>\n            Delete Category\n          </button>\n          <button class=\"btn-secondary\" (click)=\"CloseDeleteCategoryConfirm()\">Cancel</button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: ["/* Dashboard Browser Component Styles */\n\n.dashboard-browser {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--mj-bg-page);\n    position: relative;\n}\n\n/* Browser Toolbar */\n.browser-toolbar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0 24px 0 0;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    gap: 16px;\n}\n\n.toolbar-actions {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.dashboard-count {\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    padding: 4px 10px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 12px;\n}\n\n/* Legacy header styles (kept for compatibility) */\n.browser-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 24px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.header-left {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.header-left h2 {\n    margin: 0;\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.header-left h2 i {\n    color: var(--mj-brand-primary);\n}\n\n.header-right {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n/* View Toggle */\n.view-toggle {\n    display: flex;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 6px;\n    padding: 2px;\n}\n\n.toggle-btn {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.toggle-btn:hover {\n    color: var(--mj-text-primary);\n}\n\n.toggle-btn.active {\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* Selection Mode Button */\n.select-mode-btn {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 12px;\n    background: var(--mj-bg-surface-sunken);\n    border: none;\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s;\n}\n\n.select-mode-btn:hover {\n    background: var(--mj-border-default);\n    color: var(--mj-text-primary);\n}\n\n.select-mode-btn i {\n    font-size: 12px;\n}\n\n/* Selection Toolbar (replaces bulk-actions) */\n.selection-toolbar {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 4px 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 6px;\n}\n\n.selection-toolbar .action-btn:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.selection-toolbar .action-btn:disabled:hover {\n    background: transparent;\n    color: var(--mj-text-secondary);\n}\n\n.selected-count {\n    font-size: 13px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n    min-width: 70px;\n}\n\n/* Buttons */\n.btn-primary {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 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.15s;\n}\n\n.btn-primary:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n.btn-secondary {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 16px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.btn-secondary:hover {\n    background: var(--mj-border-default);\n}\n\n.action-btn {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-secondary);\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-primary);\n}\n\n.action-btn.danger:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n/* Filters */\n.browser-filters {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 24px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-box {\n    display: flex;\n    align-items: center;\n    flex: 1;\n    max-width: 400px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 6px;\n    padding: 0 12px;\n}\n\n.search-box i {\n    color: var(--mj-text-disabled);\n    font-size: 14px;\n}\n\n.search-box input {\n    flex: 1;\n    border: none;\n    background: transparent;\n    padding: 10px 12px;\n    font-size: 14px;\n    outline: none;\n}\n\n.search-box .clear-btn {\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    border-radius: 50%;\n}\n\n.search-box .clear-btn:hover {\n    background: var(--mj-border-default);\n    color: var(--mj-text-secondary);\n}\n\n.category-filter select {\n    padding: 10px 32px 10px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    background: var(--mj-bg-surface);\n    cursor: pointer;\n    outline: none;\n    appearance: none;\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    background-position: right 10px center;\n}\n\n.clear-filters-btn,\n.select-all-btn {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 12px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.clear-filters-btn:hover,\n.select-all-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n}\n\n/* Loading Overlay */\n.loading-overlay {\n    position: absolute;\n    inset: 0;\n    background: color-mix(in srgb, var(--mj-bg-surface) 90%, transparent);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 100;\n}\n\n/* Card Grid */\n.dashboard-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n    gap: 20px;\n    padding: 24px;\n    overflow-y: auto;\n}\n\n.dashboard-card {\n    background: var(--mj-bg-surface);\n    border-radius: 8px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n    cursor: pointer;\n    transition: all 0.2s;\n    border: 2px solid transparent;\n    position: relative;\n}\n\n.dashboard-card:hover {\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n    transform: translateY(-2px);\n}\n\n.dashboard-card.selected {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.dashboard-card.dragging {\n    opacity: 0.5;\n}\n\n.card-header {\n    display: flex;\n    align-items: center;\n    padding: 16px;\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.card-icon {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-brand-primary);\n    border-radius: 8px;\n    color: var(--mj-text-inverse);\n    font-size: 16px;\n}\n\n/* Selection area in top-right corner of card */\n.card-select-area {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    z-index: 2;\n    padding: 10px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 8px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background 0.15s;\n}\n\n.card-select-area:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.dashboard-card.selected .card-select-area {\n    background: var(--mj-brand-primary);\n}\n\n.card-select-area input {\n    width: 18px;\n    height: 18px;\n    cursor: pointer;\n    accent-color: var(--mj-brand-primary);\n}\n\n.card-actions {\n    display: flex;\n    gap: 4px;\n    margin-left: auto;\n    opacity: 0;\n    transition: opacity 0.15s;\n}\n\n.dashboard-card:hover .card-actions {\n    opacity: 1;\n}\n\n.card-content {\n    padding: 16px;\n}\n\n.card-title {\n    margin: 0 0 8px 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n/* Shared Badge */\n.shared-badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-size: 10px;\n    flex-shrink: 0;\n}\n\n.card-description {\n    margin: 0 0 12px 0;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    line-height: 1.4;\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    font-size: 12px;\n    color: var(--mj-text-disabled);\n}\n\n.meta-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n/* List View */\n.dashboard-list {\n    flex: 1;\n    overflow-y: auto;\n    background: var(--mj-bg-surface);\n    margin: 16px 24px;\n    border-radius: 8px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.list-header {\n    display: flex;\n    align-items: center;\n    padding: 12px 16px;\n    background: var(--mj-bg-page);\n    border-bottom: 1px solid var(--mj-border-default);\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.list-row {\n    display: flex;\n    align-items: center;\n    padding: 12px 16px;\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.list-row:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.list-row.selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.list-row.dragging {\n    opacity: 0.5;\n}\n\n.list-col {\n    display: flex;\n    align-items: center;\n}\n\n.checkbox-col {\n    width: 40px;\n}\n\n.checkbox-col input {\n    width: 16px;\n    height: 16px;\n    cursor: pointer;\n}\n\n.name-col {\n    flex: 1;\n    min-width: 200px;\n    gap: 10px;\n    display: flex;\n    align-items: center;\n}\n\n.name-col .shared-badge {\n    margin-left: 4px;\n}\n\n.row-icon {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.dashboard-name {\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.category-col,\n.type-col {\n    width: 120px;\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n}\n\n.date-col {\n    width: 120px;\n    color: var(--mj-text-disabled);\n    font-size: 13px;\n}\n\n.actions-col {\n    width: 80px;\n    justify-content: flex-end;\n    gap: 4px;\n    opacity: 0;\n    transition: opacity 0.15s;\n}\n\n.list-row:hover .actions-col {\n    opacity: 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 24px;\n    text-align: center;\n    min-height: 400px;\n}\n\n.empty-state-content {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    max-width: 480px;\n}\n\n/* Standard empty icon */\n.empty-icon {\n    width: 100px;\n    height: 100px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 50%;\n    margin-bottom: 24px;\n    box-shadow: 0 4px 20px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.empty-icon i {\n    font-size: 40px;\n    color: color-mix(in srgb, var(--mj-brand-primary) 50%, var(--mj-bg-surface));\n}\n\n.empty-icon.folder-empty {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n}\n\n.empty-icon.folder-empty i {\n    color: var(--mj-status-warning);\n}\n\n.empty-icon.search-empty {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.empty-icon.search-empty i {\n    color: var(--mj-brand-primary);\n}\n\n/* Welcome illustration for first-time users */\n.empty-illustration {\n    position: relative;\n    width: 160px;\n    height: 160px;\n    margin-bottom: 32px;\n}\n\n.illustration-bg {\n    width: 120px;\n    height: 120px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-brand-primary);\n    border-radius: 50%;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    box-shadow: 0 8px 32px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.illustration-bg .main-icon {\n    font-size: 48px;\n    color: var(--mj-text-inverse);\n}\n\n.illustration-accent {\n    position: absolute;\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-bg-surface);\n    border-radius: 50%;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n.illustration-accent i {\n    font-size: 16px;\n}\n\n.illustration-accent.accent-1 {\n    top: 0;\n    right: 10px;\n}\n\n.illustration-accent.accent-1 i {\n    color: var(--mj-status-success);\n}\n\n.illustration-accent.accent-2 {\n    bottom: 10px;\n    left: 0;\n}\n\n.illustration-accent.accent-2 i {\n    color: var(--mj-status-error);\n}\n\n.illustration-accent.accent-3 {\n    bottom: 0;\n    right: 0;\n}\n\n.illustration-accent.accent-3 i {\n    color: var(--mj-brand-primary);\n}\n\n/* Empty state typography */\n.empty-title {\n    margin: 0 0 12px 0;\n    font-size: 24px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.empty-state-content h3.empty-title {\n    font-size: 20px;\n}\n\n.empty-description {\n    margin: 0 0 28px 0;\n    color: var(--mj-text-secondary);\n    font-size: 15px;\n    line-height: 1.6;\n    max-width: 380px;\n}\n\n.empty-description strong {\n    color: var(--mj-text-primary);\n}\n\n/* Empty state actions */\n.empty-actions {\n    display: flex;\n    gap: 12px;\n    margin-bottom: 32px;\n}\n\n.btn-primary.large {\n    padding: 14px 28px;\n    font-size: 15px;\n    border-radius: 8px;\n}\n\n/* Feature highlights for first-time users */\n.empty-features {\n    display: flex;\n    gap: 32px;\n    padding-top: 24px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.feature-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n}\n\n.feature-item i {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-bg-page);\n    border-radius: 8px;\n    color: var(--mj-brand-primary);\n    font-size: 16px;\n}\n\n/* Legacy support */\n.empty-state h3:not(.empty-title) {\n    margin: 0 0 8px 0;\n    font-size: 18px;\n    color: var(--mj-text-primary);\n}\n\n.empty-state p:not(.empty-description) {\n    margin: 0 0 24px 0;\n    color: var(--mj-text-secondary);\n    font-size: 14px;\n    max-width: 300px;\n}\n\n/* Category Drop Zones */\n.category-drop-zones {\n    position: fixed;\n    bottom: 24px;\n    left: 50%;\n    transform: translateX(-50%);\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n    padding: 16px;\n    z-index: 1000;\n}\n\n.drop-zone-header {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    margin-bottom: 12px;\n    text-align: center;\n}\n\n.drop-zones {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n    justify-content: center;\n}\n\n.drop-zone {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 16px;\n    background: var(--mj-bg-surface-card);\n    border: 2px dashed var(--mj-border-strong);\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s;\n}\n\n.drop-zone:hover,\n.drop-zone.active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-text-primary);\n}\n\n/* Move Dialog */\n.move-dialog-overlay {\n    position: fixed;\n    inset: 0;\n    background: rgba(0, 0, 0, 0.5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n}\n\n.move-dialog {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    width: 400px;\n    max-width: 90%;\n    max-height: 80vh;\n    display: flex;\n    flex-direction: column;\n    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);\n}\n\n.dialog-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.dialog-header h3 {\n    margin: 0;\n    font-size: 18px;\n    color: var(--mj-text-primary);\n}\n\n.close-btn {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    border-radius: 4px;\n}\n\n.close-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.dialog-content {\n    padding: 20px;\n    overflow-y: auto;\n}\n\n.dialog-content p {\n    margin: 0 0 16px 0;\n    color: var(--mj-text-secondary);\n    font-size: 14px;\n}\n\n.category-list {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.category-option {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.category-option:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.category-option i {\n    color: var(--mj-brand-primary);\n}\n\n.dialog-footer {\n    display: flex;\n    justify-content: flex-end;\n    padding: 16px 20px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n/* New Dropdown */\n.new-dropdown {\n    position: relative;\n}\n\n.dropdown-caret {\n    font-size: 10px;\n    margin-left: 4px;\n}\n\n.dropdown-menu {\n    position: absolute;\n    top: 100%;\n    right: 0;\n    margin-top: 4px;\n    min-width: 160px;\n    background: var(--mj-bg-surface);\n    border-radius: 8px;\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n    z-index: 1001;\n    overflow: hidden;\n}\n\n.dropdown-item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    width: 100%;\n    padding: 12px 16px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-primary);\n    font-size: 14px;\n    cursor: pointer;\n    text-align: left;\n    transition: background 0.15s;\n}\n\n.dropdown-item:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.dropdown-item i {\n    color: var(--mj-brand-primary);\n    width: 16px;\n    text-align: center;\n}\n\n.dropdown-backdrop {\n    position: fixed;\n    inset: 0;\n    z-index: 1000;\n}\n\n/* Create Category Dialog */\n.create-category-dialog-overlay {\n    position: fixed;\n    inset: 0;\n    background: rgba(0, 0, 0, 0.5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1002;\n}\n\n.create-category-dialog {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    width: 400px;\n    max-width: 90%;\n    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);\n}\n\n.create-category-dialog .dialog-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.create-category-dialog .dialog-header h3 {\n    margin: 0;\n    font-size: 18px;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.create-category-dialog .dialog-header h3 i {\n    color: var(--mj-brand-primary);\n}\n\n.create-category-dialog .dialog-content {\n    padding: 20px;\n}\n\n.form-field {\n    margin-bottom: 16px;\n}\n\n.form-field:last-child {\n    margin-bottom: 0;\n}\n\n.form-field 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-field input,\n.form-field textarea {\n    width: 100%;\n    padding: 10px 12px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 6px;\n    font-size: 14px;\n    transition: border-color 0.15s, box-shadow 0.15s;\n    box-sizing: border-box;\n}\n\n.form-field input:focus,\n.form-field textarea: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-field textarea {\n    resize: vertical;\n    min-height: 80px;\n}\n\n.create-category-dialog .dialog-footer {\n    display: flex;\n    gap: 10px;\n    padding: 16px 20px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.create-category-dialog .dialog-footer .btn-primary {\n    flex: 0 0 auto;\n}\n\n.create-category-dialog .dialog-footer .btn-secondary {\n    flex: 0 0 auto;\n    margin-left: auto;\n}\n\n/* Breadcrumb Navigation */\n.breadcrumb-nav {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 12px 24px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-wrap: wrap;\n}\n\n.breadcrumb-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 10px;\n    border: none;\n    background: transparent;\n    color: var(--mj-brand-primary);\n    font-size: 13px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: background 0.15s;\n}\n\n.breadcrumb-item:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.breadcrumb-item.current {\n    color: var(--mj-text-primary);\n    font-weight: 500;\n    cursor: default;\n}\n\n.breadcrumb-item.current:hover {\n    background: transparent;\n}\n\n.breadcrumb-item i {\n    font-size: 12px;\n}\n\n.breadcrumb-item.root i {\n    font-size: 14px;\n}\n\n.breadcrumb-separator {\n    color: var(--mj-text-disabled);\n    font-size: 10px;\n}\n\n/* Category Cards */\n.category-card {\n    cursor: pointer;\n}\n\n.category-card:hover {\n    border-color: var(--mj-brand-primary);\n}\n\n.folder-icon {\n    background: var(--mj-status-warning) !important;\n}\n\n.category-row {\n    background: var(--mj-bg-surface-card);\n}\n\n.category-row:hover {\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface)) !important;\n}\n\n.category-row .folder-icon {\n    color: var(--mj-status-warning);\n}\n\n/* Drop target highlighting for category cards/rows */\n.dashboard-card.category-card.drop-target,\n.list-row.category-row.drop-target {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n/* Search text highlighting */\nmark {\n    background: var(--mj-status-warning);\n    color: inherit;\n    padding: 0 2px;\n    border-radius: 2px;\n}\n\n/* Delete Category Dialog */\n.delete-category-dialog-overlay {\n    position: fixed;\n    inset: 0;\n    background: rgba(0, 0, 0, 0.5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1002;\n}\n\n.delete-category-dialog {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    width: 480px;\n    max-width: 90%;\n    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);\n}\n\n.delete-category-dialog .dialog-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.delete-category-dialog .dialog-header.danger {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    border-bottom-color: color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n}\n\n.delete-category-dialog .dialog-header.danger h3 {\n    color: var(--mj-status-error);\n}\n\n.delete-category-dialog .dialog-header.danger h3 i {\n    color: var(--mj-status-error);\n}\n\n.delete-category-dialog .dialog-header h3 {\n    margin: 0;\n    font-size: 18px;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.delete-category-dialog .dialog-content {\n    padding: 20px;\n}\n\n.warning-message {\n    margin-bottom: 20px;\n}\n\n.warning-message p {\n    margin: 0 0 12px 0;\n    color: var(--mj-text-primary);\n    font-size: 14px;\n    line-height: 1.5;\n}\n\n.warning-message .content-warning {\n    color: var(--mj-status-error);\n    font-weight: 500;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 16px;\n}\n\n.warning-message .content-list {\n    margin: 8px 0 0 0;\n    padding-left: 24px;\n    color: var(--mj-text-secondary);\n}\n\n.warning-message .content-list li {\n    margin: 6px 0;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.warning-message .content-list li i {\n    color: var(--mj-text-disabled);\n    width: 16px;\n    text-align: center;\n}\n\n.confirmation-checkbox {\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.checkbox-label {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    cursor: pointer;\n}\n\n.checkbox-label input {\n    width: 18px;\n    height: 18px;\n    margin-top: 2px;\n    cursor: pointer;\n    accent-color: var(--mj-status-error);\n}\n\n.checkbox-text {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    line-height: 1.5;\n}\n\n.delete-category-dialog .dialog-footer {\n    display: flex;\n    gap: 10px;\n    padding: 16px 20px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.btn-danger {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 16px;\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.15s;\n}\n\n.btn-danger:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 85%, black);\n}\n\n.btn-danger:disabled {\n    background: var(--mj-border-default);\n    color: var(--mj-text-disabled);\n    cursor: not-allowed;\n}\n\n.delete-category-dialog .dialog-footer .btn-secondary {\n    margin-left: auto;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-dashboard-browser', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Dashboard Browser Component -->\n<div class=\"dashboard-browser\" [class.loading]=\"IsLoading\">\n  <!-- Toolbar Row: Breadcrumb + Actions -->\n  <div class=\"browser-toolbar\">\n    <!-- Breadcrumb Navigation -->\n    <mj-dashboard-breadcrumb\n      [Categories]=\"Categories\"\n      [CurrentCategoryId]=\"SelectedCategoryId\"\n      [RootIcon]=\"IconClass\"\n      [RootLabel]=\"Title\"\n      [AllowDragDrop]=\"AllowDragDrop && (DraggingId !== null || IsSelectionMode)\"\n      Size=\"large\"\n      (Navigate)=\"NavigateToCategory($event.CategoryId)\"\n      (DashboardDrop)=\"OnBreadcrumbDrop($event)\">\n    </mj-dashboard-breadcrumb>\n\n    <!-- Right-side Actions -->\n    <div class=\"toolbar-actions\">\n      <!-- Dashboard count -->\n      <span class=\"dashboard-count\">{{ FilteredDashboards.length }} dashboards</span>\n\n      <!-- View Toggle -->\n      <div class=\"view-toggle\">\n        <button\n          class=\"toggle-btn\"\n          [class.active]=\"ViewMode === 'cards'\"\n          (click)=\"SetViewMode('cards')\"\n          title=\"Card View\">\n          <i class=\"fa-solid fa-grip\"></i>\n        </button>\n        <button\n          class=\"toggle-btn\"\n          [class.active]=\"ViewMode === 'list'\"\n          (click)=\"SetViewMode('list')\"\n          title=\"List View\">\n          <i class=\"fa-solid fa-list\"></i>\n        </button>\n      </div>\n\n      <!-- Selection Mode Toggle & Bulk Actions -->\n      @if (AllowMultiSelect) {\n        <!-- Enter Selection Mode Button (when not in selection mode) -->\n        @if (!IsSelectionMode && FilteredDashboards.length > 0) {\n          <button\n            class=\"select-mode-btn\"\n            (click)=\"EnterSelectionMode()\"\n            title=\"Select multiple dashboards\">\n            <i class=\"fa-solid fa-check-double\"></i>\n            Select\n          </button>\n        }\n        <!-- Selection Mode Toolbar (when in selection mode) -->\n        @if (IsSelectionMode) {\n          <div class=\"selection-toolbar\">\n            <span class=\"selected-count\">{{ SelectedCount }} selected</span>\n            <button class=\"action-btn\" (click)=\"SelectAll()\" title=\"Select all\">\n              <i class=\"fa-solid fa-check-double\"></i>\n            </button>\n            <button class=\"action-btn\" (click)=\"OnMoveSelected()\" title=\"Move to folder\" [disabled]=\"SelectedCount === 0\">\n              <i class=\"fa-solid fa-folder-open\"></i>\n            </button>\n            <button class=\"action-btn danger\" (click)=\"OnDeleteSelected()\" title=\"Delete selected\" [disabled]=\"!CanDeleteAnySelected\">\n              <i class=\"fa-solid fa-trash\"></i>\n            </button>\n            <button class=\"action-btn\" (click)=\"ExitSelectionMode()\" title=\"Exit selection mode\">\n              <i class=\"fa-solid fa-times\"></i>\n            </button>\n          </div>\n        }\n      }\n\n      <!-- New Dropdown Button -->\n      @if (ShowCreateButton) {\n        <div class=\"new-dropdown\">\n          <button\n            class=\"btn-primary\"\n            (click)=\"ToggleNewMenu(); $event.stopPropagation()\">\n            <i class=\"fa-solid fa-plus\"></i>\n            New\n            <i class=\"fa-solid fa-caret-down dropdown-caret\"></i>\n          </button>\n          @if (ShowNewMenu) {\n            <div class=\"dropdown-menu\">\n              <button class=\"dropdown-item\" (click)=\"OnCreateDashboard()\">\n                <i class=\"fa-solid fa-chart-line\"></i>\n                Dashboard\n              </button>\n              <button class=\"dropdown-item\" (click)=\"OpenCreateCategoryDialog()\">\n                <i class=\"fa-solid fa-folder-plus\"></i>\n                Category\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Click-away overlay for dropdown -->\n  @if (ShowNewMenu) {\n    <div class=\"dropdown-backdrop\" (click)=\"CloseNewMenu()\"></div>\n  }\n\n  <!-- Filters -->\n  <div class=\"browser-filters\">\n    <div class=\"search-box\">\n      <i class=\"fa-solid fa-search\"></i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"SearchText\"\n        (input)=\"OnSearchChange()\"\n        placeholder=\"Search dashboards...\">\n      @if (SearchText) {\n        <button\n          class=\"clear-btn\"\n          (click)=\"ClearSearch()\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      }\n    </div>\n\n    @if (SearchText) {\n      <button\n        class=\"clear-filters-btn\"\n        (click)=\"ClearSearch()\">\n        <i class=\"fa-solid fa-filter-circle-xmark\"></i>\n        Clear Search\n      </button>\n    }\n  </div>\n\n  <!-- Loading Overlay -->\n  @if (IsLoading) {\n    <div class=\"loading-overlay\">\n      <mj-loading text=\"Loading dashboards...\"></mj-loading>\n    </div>\n  }\n\n  <!-- Card View -->\n  @if (ViewMode === 'cards' && (FilteredChildCategories.length > 0 || FilteredDashboards.length > 0)) {\n    <div class=\"dashboard-grid\">\n      <!-- Category Folders -->\n      @for (category of FilteredChildCategories; track TrackByCategory($index, category)) {\n        <div\n          class=\"dashboard-card category-card\"\n          [class.drop-target]=\"DragOverChildCategoryId === category.ID\"\n          (click)=\"NavigateToCategory(category.ID)\"\n          (dblclick)=\"$event.stopPropagation()\"\n          (dragover)=\"OnDragOverChildCategory(category.ID, $event)\"\n          (dragleave)=\"OnDragLeaveChildCategory()\"\n          (drop)=\"OnDropOnChildCategory(category.ID, $event)\">\n          <div class=\"card-header\">\n            <div class=\"card-icon folder-icon\">\n              <i class=\"fa-solid fa-folder\"></i>\n            </div>\n            <div class=\"card-actions\">\n              <button\n                class=\"action-btn danger\"\n                title=\"Delete category\"\n                (click)=\"OnDeleteCategory(category, $event)\">\n                <i class=\"fa-solid fa-trash\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"card-content\">\n            <h3 class=\"card-title\" [innerHTML]=\"HighlightMatch(category.Name)\"></h3>\n            @if (category.Description) {\n              <p class=\"card-description\" [innerHTML]=\"HighlightMatch(category.Description)\">\n              </p>\n            }\n            <div class=\"card-meta\">\n              <span class=\"meta-item\">\n                <i class=\"fa-solid fa-folder-tree\"></i>\n                Category\n              </span>\n            </div>\n          </div>\n        </div>\n      }\n      <!-- Dashboard Cards -->\n      @for (dashboard of FilteredDashboards; track TrackByDashboard($index, dashboard)) {\n        <div\n          class=\"dashboard-card\"\n          [class.selected]=\"IsSelected(dashboard.ID)\"\n          [class.dragging]=\"DraggingId === dashboard.ID\"\n          [draggable]=\"AllowDragDrop\"\n          (click)=\"OnDashboardClick(dashboard, $event)\"\n          (dblclick)=\"OnDashboardDoubleClick(dashboard, $event)\"\n          (dragstart)=\"OnDragStart(dashboard, $event)\"\n          (dragend)=\"OnDragEnd()\">\n          <!-- Selection checkbox in top-right corner -->\n          @if (IsSelectionMode) {\n            <div\n              class=\"card-select-area\"\n              (click)=\"ToggleSelection(dashboard.ID); $event.stopPropagation()\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"IsSelected(dashboard.ID)\"\n                (change)=\"$event.stopPropagation()\">\n            </div>\n          }\n          <div class=\"card-header\">\n            <div class=\"card-icon\">\n              <i class=\"fa-solid fa-chart-line\"></i>\n            </div>\n            <div class=\"card-actions\">\n              @if (CanEdit(dashboard.ID)) {\n                <button\n                  class=\"action-btn\"\n                  title=\"Edit\"\n                  (click)=\"OnEditDashboard(dashboard, $event)\">\n                  <i class=\"fa-solid fa-edit\"></i>\n                </button>\n              }\n              @if (CanDelete(dashboard.ID)) {\n                <button\n                  class=\"action-btn danger\"\n                  title=\"Delete\"\n                  (click)=\"OnDeleteDashboard(dashboard, $event)\">\n                  <i class=\"fa-solid fa-trash\"></i>\n                </button>\n              }\n            </div>\n          </div>\n          <div class=\"card-content\">\n            <h3 class=\"card-title\">\n              <span [innerHTML]=\"HighlightMatch(dashboard.Name)\"></span>\n              @if (IsShared(dashboard.ID)) {\n                <span class=\"shared-badge\" title=\"Shared with you\">\n                  <i class=\"fa-solid fa-share-nodes\"></i>\n                </span>\n              }\n            </h3>\n            @if (dashboard.Description) {\n              <p class=\"card-description\" [innerHTML]=\"HighlightMatch(dashboard.Description)\">\n              </p>\n            }\n            <div class=\"card-meta\">\n              <span class=\"meta-item\">\n                <i class=\"fa-solid fa-clock\"></i>\n                {{ FormatDate(dashboard.__mj_UpdatedAt) }}\n              </span>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- List View -->\n  @if (ViewMode === 'list' && (FilteredChildCategories.length > 0 || FilteredDashboards.length > 0)) {\n    <div class=\"dashboard-list\">\n      <div class=\"list-header\">\n        @if (IsSelectionMode) {\n          <div class=\"list-col checkbox-col\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"SelectedCount === FilteredDashboards.length && FilteredDashboards.length > 0\"\n              [indeterminate]=\"SelectedCount > 0 && SelectedCount < FilteredDashboards.length\"\n              (change)=\"SelectedCount === FilteredDashboards.length ? ClearSelection() : SelectAll()\">\n          </div>\n        }\n        <div class=\"list-col name-col\">Name</div>\n        <div class=\"list-col type-col\">Type</div>\n        <div class=\"list-col date-col\">Modified</div>\n        <div class=\"list-col actions-col\">Actions</div>\n      </div>\n      <!-- Category Rows -->\n      @for (category of FilteredChildCategories; track TrackByCategory($index, category)) {\n        <div\n          class=\"list-row category-row\"\n          [class.drop-target]=\"DragOverChildCategoryId === category.ID\"\n          (click)=\"NavigateToCategory(category.ID)\"\n          (dragover)=\"OnDragOverChildCategory(category.ID, $event)\"\n          (dragleave)=\"OnDragLeaveChildCategory()\"\n          (drop)=\"OnDropOnChildCategory(category.ID, $event)\">\n          @if (IsSelectionMode) {\n            <div class=\"list-col checkbox-col\">\n              <!-- Empty placeholder for alignment -->\n            </div>\n          }\n          <div class=\"list-col name-col\">\n            <i class=\"fa-solid fa-folder row-icon folder-icon\"></i>\n            <span class=\"dashboard-name\" [innerHTML]=\"HighlightMatch(category.Name)\"></span>\n          </div>\n          <div class=\"list-col type-col\">\n            Category\n          </div>\n          <div class=\"list-col date-col\">\n            <!-- No date for categories -->\n          </div>\n          <div class=\"list-col actions-col\" (click)=\"$event.stopPropagation()\">\n            <button\n              class=\"action-btn danger\"\n              title=\"Delete category\"\n              (click)=\"OnDeleteCategory(category, $event)\">\n              <i class=\"fa-solid fa-trash\"></i>\n            </button>\n          </div>\n        </div>\n      }\n      <!-- Dashboard Rows -->\n      @for (dashboard of FilteredDashboards; track TrackByDashboard($index, dashboard)) {\n        <div\n          class=\"list-row\"\n          [class.selected]=\"IsSelected(dashboard.ID)\"\n          [class.dragging]=\"DraggingId === dashboard.ID\"\n          [draggable]=\"AllowDragDrop\"\n          (click)=\"OnDashboardClick(dashboard, $event)\"\n          (dblclick)=\"OnDashboardDoubleClick(dashboard, $event)\"\n          (dragstart)=\"OnDragStart(dashboard, $event)\"\n          (dragend)=\"OnDragEnd()\">\n          @if (IsSelectionMode) {\n            <div class=\"list-col checkbox-col\" (click)=\"$event.stopPropagation()\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"IsSelected(dashboard.ID)\"\n                (change)=\"ToggleSelection(dashboard.ID)\">\n            </div>\n          }\n          <div class=\"list-col name-col\">\n            <i class=\"fa-solid fa-chart-line row-icon\"></i>\n            <span class=\"dashboard-name\" [innerHTML]=\"HighlightMatch(dashboard.Name)\"></span>\n            @if (IsShared(dashboard.ID)) {\n              <span class=\"shared-badge\" title=\"Shared with you\">\n                <i class=\"fa-solid fa-share-nodes\"></i>\n              </span>\n            }\n          </div>\n          <div class=\"list-col type-col\">\n            Dashboard\n          </div>\n          <div class=\"list-col date-col\">\n            {{ FormatDate(dashboard.__mj_UpdatedAt) }}\n          </div>\n          <div class=\"list-col actions-col\" (click)=\"$event.stopPropagation()\">\n            @if (CanEdit(dashboard.ID)) {\n              <button\n                class=\"action-btn\"\n                title=\"Edit\"\n                (click)=\"OnEditDashboard(dashboard, $event)\">\n                <i class=\"fa-solid fa-edit\"></i>\n              </button>\n            }\n            @if (CanDelete(dashboard.ID)) {\n              <button\n                class=\"action-btn danger\"\n                title=\"Delete\"\n                (click)=\"OnDeleteDashboard(dashboard, $event)\">\n                <i class=\"fa-solid fa-trash\"></i>\n              </button>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Empty State -->\n  @if (FilteredDashboards.length === 0 && FilteredChildCategories.length === 0 && !IsLoading) {\n    <!-- First-time user experience (no dashboards at all) -->\n    @if (IsAtRoot && Dashboards.length === 0) {\n      <mj-empty-state\n        class=\"dashboard-empty\"\n        Size=\"large\"\n        Icon=\"fa-solid fa-gauge-high\"\n        Title=\"Welcome to Dashboards\"\n        Message=\"Create custom dashboards to visualize your data, track key metrics, and monitor important information all in one place.\"\n        [ActionText]=\"ShowCreateButton ? 'Create Your First Dashboard' : ''\"\n        ActionIcon=\"fa-solid fa-plus\"\n        (Action)=\"OnCreateDashboard()\">\n        <div class=\"empty-features\">\n          <div class=\"feature-item\">\n            <i class=\"fa-solid fa-table-cells\"></i>\n            <span>Customizable layouts</span>\n          </div>\n          <div class=\"feature-item\">\n            <i class=\"fa-solid fa-database\"></i>\n            <span>Connect to your data</span>\n          </div>\n          <div class=\"feature-item\">\n            <i class=\"fa-solid fa-share-nodes\"></i>\n            <span>Share with your team</span>\n          </div>\n        </div>\n      </mj-empty-state>\n    }\n    <!-- Folder is empty -->\n    @if (!IsAtRoot && !SearchText) {\n      <mj-empty-state\n        class=\"dashboard-empty\"\n        Variant=\"warning\"\n        Icon=\"fa-solid fa-folder-open\"\n        Title=\"This folder is empty\"\n        Message=\"Add dashboards or create sub-folders to organize your content.\"\n        [ActionText]=\"ShowCreateButton ? 'Create Dashboard' : ''\"\n        ActionIcon=\"fa-solid fa-plus\"\n        (Action)=\"OnCreateDashboard()\" />\n    }\n    <!-- Root has dashboards but none uncategorized -->\n    @if (IsAtRoot && Dashboards.length > 0 && !SearchText) {\n      <mj-empty-state\n        class=\"dashboard-empty\"\n        Icon=\"fa-solid fa-folder-tree\"\n        Title=\"No uncategorized dashboards\"\n        Message=\"All your dashboards are organized into folders. Browse the folders above or create a new dashboard here.\"\n        [ActionText]=\"ShowCreateButton ? 'Create Dashboard' : ''\"\n        ActionIcon=\"fa-solid fa-plus\"\n        (Action)=\"OnCreateDashboard()\" />\n    }\n    <!-- Search returned no results -->\n    @if (SearchText) {\n      <mj-empty-state\n        class=\"dashboard-empty\"\n        Variant=\"no-results\"\n        Icon=\"fa-solid fa-magnifying-glass\"\n        Title=\"No results found\"\n        [Message]=\"NoResultsMessage\"\n        ActionText=\"Clear Search\"\n        ActionIcon=\"fa-solid fa-times\"\n        ActionVariant=\"secondary\"\n        (Action)=\"ClearSearch()\" />\n    }\n  }\n\n  <!-- Category Drop Zones (for drag and drop) -->\n  @if (DraggingId && Categories.length > 0) {\n    <div class=\"category-drop-zones\">\n      <div class=\"drop-zone-header\">Drop to move to category:</div>\n      <div class=\"drop-zones\">\n        <div\n          class=\"drop-zone\"\n          [class.active]=\"DropTargetCategoryId === null\"\n          (dragover)=\"OnDragOverCategory(null, $event)\"\n          (dragleave)=\"OnDragLeaveCategory()\"\n          (drop)=\"OnDropOnCategory(null, $event)\">\n          <i class=\"fa-solid fa-folder-open\"></i>\n          Uncategorized\n        </div>\n        @for (cat of Categories; track TrackByCategory($index, cat)) {\n          <div\n            class=\"drop-zone\"\n            [class.active]=\"DropTargetCategoryId === cat.ID\"\n            (dragover)=\"OnDragOverCategory(cat.ID, $event)\"\n            (dragleave)=\"OnDragLeaveCategory()\"\n            (drop)=\"OnDropOnCategory(cat.ID, $event)\">\n            <i class=\"fa-solid fa-folder\"></i>\n            {{ cat.Name }}\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Delete Confirmation Dialog -->\n  <mj-confirm-dialog\n    [visible]=\"ShowDeleteConfirm\"\n    type=\"danger\"\n    title=\"Delete Dashboard{{ DashboardsPendingDelete.length > 1 ? 's' : '' }}\"\n        [message]=\"DashboardsPendingDelete.length === 1\n            ? 'Are you sure you want to delete \\'' + DashboardsPendingDelete[0].Name + '\\'? This action cannot be undone.'\n            : 'Are you sure you want to delete ' + DashboardsPendingDelete.length + ' dashboards? This action cannot be undone.'\"\n    confirmText=\"Delete\"\n    cancelText=\"Cancel\"\n    (confirmed)=\"ConfirmDelete()\"\n    (cancelled)=\"CloseDeleteConfirm()\">\n  </mj-confirm-dialog>\n\n  <!-- Move to Folder Dialog -->\n  @if (ShowMoveDialog) {\n    <div class=\"move-dialog-overlay\" (click)=\"CloseMoveDialog()\">\n      <div class=\"move-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"dialog-header\">\n          <h3>Move to Category</h3>\n          <button class=\"close-btn\" (click)=\"CloseMoveDialog()\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n        <div class=\"dialog-content\">\n          <p>Move {{ SelectedCount }} dashboard{{ SelectedCount > 1 ? 's' : '' }} to:</p>\n          <div class=\"category-list\">\n            <div\n              class=\"category-option\"\n              (click)=\"ConfirmMove(null)\">\n              <i class=\"fa-solid fa-folder-open\"></i>\n              Uncategorized\n            </div>\n            @for (cat of Categories; track TrackByCategory($index, cat)) {\n              <div\n                class=\"category-option\"\n                (click)=\"ConfirmMove(cat.ID)\">\n                <i class=\"fa-solid fa-folder\"></i>\n                {{ cat.Name }}\n              </div>\n            }\n          </div>\n        </div>\n        <div class=\"dialog-footer\">\n          <button class=\"btn-secondary\" (click)=\"CloseMoveDialog()\">Cancel</button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Create Category Dialog -->\n  @if (ShowCreateCategoryDialog) {\n    <div class=\"create-category-dialog-overlay\" (click)=\"CloseCreateCategoryDialog()\">\n      <div class=\"create-category-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"dialog-header\">\n          <h3>\n            <i class=\"fa-solid fa-folder-plus\"></i>\n            Create Category\n          </h3>\n          <button class=\"close-btn\" (click)=\"CloseCreateCategoryDialog()\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n        <div class=\"dialog-content\">\n          <div class=\"form-field\">\n            <label for=\"category-name\">Name *</label>\n            <input\n              type=\"text\"\n              id=\"category-name\"\n              [(ngModel)]=\"NewCategoryName\"\n              placeholder=\"Enter category name\"\n              (keyup.enter)=\"ConfirmCreateCategory()\">\n          </div>\n          <div class=\"form-field\">\n            <label for=\"category-description\">Description</label>\n            <textarea\n              id=\"category-description\"\n              [(ngModel)]=\"NewCategoryDescription\"\n              placeholder=\"Optional description\"\n            rows=\"3\"></textarea>\n          </div>\n        </div>\n        <div class=\"dialog-footer\">\n          <button\n            class=\"btn-primary\"\n            (click)=\"ConfirmCreateCategory()\"\n            [disabled]=\"!NewCategoryName.trim()\">\n            <i class=\"fa-solid fa-plus\"></i>\n            Create\n          </button>\n          <button class=\"btn-secondary\" (click)=\"CloseCreateCategoryDialog()\">Cancel</button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Delete Category Confirmation Dialog -->\n  @if (ShowDeleteCategoryConfirm) {\n    <div class=\"delete-category-dialog-overlay\" (click)=\"CloseDeleteCategoryConfirm()\">\n      <div class=\"delete-category-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"dialog-header danger\">\n          <h3>\n            <i class=\"fa-solid fa-exclamation-triangle\"></i>\n            Delete Category\n          </h3>\n          <button class=\"close-btn\" (click)=\"CloseDeleteCategoryConfirm()\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n        @if (CategoryPendingDelete) {\n          <div class=\"dialog-content\">\n            <div class=\"warning-message\">\n              <p>\n                You are about to delete the category <strong>\"{{ CategoryPendingDelete.Name }}\"</strong>.\n              </p>\n              @if (GetCategoryContentCount(CategoryPendingDelete); as counts) {\n                @if (counts.dashboards > 0 || counts.categories > 0) {\n                  <p class=\"content-warning\">\n                    <i class=\"fa-solid fa-warning\"></i>\n                    This category contains:\n                  </p>\n                }\n                @if (counts.dashboards > 0 || counts.categories > 0) {\n                  <ul class=\"content-list\">\n                    @if (counts.dashboards > 0) {\n                      <li>\n                        <i class=\"fa-solid fa-chart-line\"></i>\n                        {{ counts.dashboards }} dashboard{{ counts.dashboards !== 1 ? 's' : '' }}\n                      </li>\n                    }\n                    @if (counts.categories > 0) {\n                      <li>\n                        <i class=\"fa-solid fa-folder\"></i>\n                        {{ counts.categories }} sub-categor{{ counts.categories !== 1 ? 'ies' : 'y' }}\n                      </li>\n                    }\n                  </ul>\n                }\n              }\n            </div>\n            <div class=\"confirmation-checkbox\">\n              <label class=\"checkbox-label\">\n                <input\n                  type=\"checkbox\"\n                  [(ngModel)]=\"DeleteCategoryIncludeContents\">\n                <span class=\"checkbox-text\">\n                  I understand this will permanently delete this category and all its contents. This action cannot be undone.\n                </span>\n              </label>\n            </div>\n          </div>\n        }\n        <div class=\"dialog-footer\">\n          <button\n            class=\"btn-danger\"\n            (click)=\"ConfirmDeleteCategory()\"\n            [disabled]=\"!DeleteCategoryIncludeContents\">\n            <i class=\"fa-solid fa-trash\"></i>\n            Delete Category\n          </button>\n          <button class=\"btn-secondary\" (click)=\"CloseDeleteCategoryConfirm()\">Cancel</button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: ["/* Dashboard Browser Component Styles */\n\n.dashboard-browser {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--mj-bg-page);\n    position: relative;\n}\n\n/* Browser Toolbar */\n.browser-toolbar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0 24px 0 0;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    gap: 16px;\n}\n\n.toolbar-actions {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.dashboard-count {\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    padding: 4px 10px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 12px;\n}\n\n/* Legacy header styles (kept for compatibility) */\n.browser-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 24px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.header-left {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.header-left h2 {\n    margin: 0;\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.header-left h2 i {\n    color: var(--mj-brand-primary);\n}\n\n.header-right {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n/* View Toggle */\n.view-toggle {\n    display: flex;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 6px;\n    padding: 2px;\n}\n\n.toggle-btn {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.toggle-btn:hover {\n    color: var(--mj-text-primary);\n}\n\n.toggle-btn.active {\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* Selection Mode Button */\n.select-mode-btn {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 12px;\n    background: var(--mj-bg-surface-sunken);\n    border: none;\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s;\n}\n\n.select-mode-btn:hover {\n    background: var(--mj-border-default);\n    color: var(--mj-text-primary);\n}\n\n.select-mode-btn i {\n    font-size: 12px;\n}\n\n/* Selection Toolbar (replaces bulk-actions) */\n.selection-toolbar {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 4px 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 6px;\n}\n\n.selection-toolbar .action-btn:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.selection-toolbar .action-btn:disabled:hover {\n    background: transparent;\n    color: var(--mj-text-secondary);\n}\n\n.selected-count {\n    font-size: 13px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n    min-width: 70px;\n}\n\n/* Buttons */\n.btn-primary {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 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.15s;\n}\n\n.btn-primary:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n.btn-secondary {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 16px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.btn-secondary:hover {\n    background: var(--mj-border-default);\n}\n\n.action-btn {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-secondary);\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-primary);\n}\n\n.action-btn.danger:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n/* Filters */\n.browser-filters {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 24px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-box {\n    display: flex;\n    align-items: center;\n    flex: 1;\n    max-width: 400px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 6px;\n    padding: 0 12px;\n}\n\n.search-box i {\n    color: var(--mj-text-disabled);\n    font-size: 14px;\n}\n\n.search-box input {\n    flex: 1;\n    border: none;\n    background: transparent;\n    padding: 10px 12px;\n    font-size: 14px;\n    outline: none;\n}\n\n.search-box .clear-btn {\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    border-radius: 50%;\n}\n\n.search-box .clear-btn:hover {\n    background: var(--mj-border-default);\n    color: var(--mj-text-secondary);\n}\n\n.category-filter select {\n    padding: 10px 32px 10px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    background: var(--mj-bg-surface);\n    cursor: pointer;\n    outline: none;\n    appearance: none;\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    background-position: right 10px center;\n}\n\n.clear-filters-btn,\n.select-all-btn {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 12px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.clear-filters-btn:hover,\n.select-all-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n}\n\n/* Loading Overlay */\n.loading-overlay {\n    position: absolute;\n    inset: 0;\n    background: color-mix(in srgb, var(--mj-bg-surface) 90%, transparent);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 100;\n}\n\n/* Card Grid */\n.dashboard-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n    gap: 20px;\n    padding: 24px;\n    overflow-y: auto;\n}\n\n.dashboard-card {\n    background: var(--mj-bg-surface);\n    border-radius: 8px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n    cursor: pointer;\n    transition: all 0.2s;\n    border: 2px solid transparent;\n    position: relative;\n}\n\n.dashboard-card:hover {\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n    transform: translateY(-2px);\n}\n\n.dashboard-card.selected {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.dashboard-card.dragging {\n    opacity: 0.5;\n}\n\n.card-header {\n    display: flex;\n    align-items: center;\n    padding: 16px;\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.card-icon {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-brand-primary);\n    border-radius: 8px;\n    color: var(--mj-text-inverse);\n    font-size: 16px;\n}\n\n/* Selection area in top-right corner of card */\n.card-select-area {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    z-index: 2;\n    padding: 10px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 8px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background 0.15s;\n}\n\n.card-select-area:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.dashboard-card.selected .card-select-area {\n    background: var(--mj-brand-primary);\n}\n\n.card-select-area input {\n    width: 18px;\n    height: 18px;\n    cursor: pointer;\n    accent-color: var(--mj-brand-primary);\n}\n\n.card-actions {\n    display: flex;\n    gap: 4px;\n    margin-left: auto;\n    opacity: 0;\n    transition: opacity 0.15s;\n}\n\n.dashboard-card:hover .card-actions {\n    opacity: 1;\n}\n\n.card-content {\n    padding: 16px;\n}\n\n.card-title {\n    margin: 0 0 8px 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n/* Shared Badge */\n.shared-badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-size: 10px;\n    flex-shrink: 0;\n}\n\n.card-description {\n    margin: 0 0 12px 0;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    line-height: 1.4;\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    font-size: 12px;\n    color: var(--mj-text-disabled);\n}\n\n.meta-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n/* List View */\n.dashboard-list {\n    flex: 1;\n    overflow-y: auto;\n    background: var(--mj-bg-surface);\n    margin: 16px 24px;\n    border-radius: 8px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.list-header {\n    display: flex;\n    align-items: center;\n    padding: 12px 16px;\n    background: var(--mj-bg-page);\n    border-bottom: 1px solid var(--mj-border-default);\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.list-row {\n    display: flex;\n    align-items: center;\n    padding: 12px 16px;\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.list-row:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.list-row.selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.list-row.dragging {\n    opacity: 0.5;\n}\n\n.list-col {\n    display: flex;\n    align-items: center;\n}\n\n.checkbox-col {\n    width: 40px;\n}\n\n.checkbox-col input {\n    width: 16px;\n    height: 16px;\n    cursor: pointer;\n}\n\n.name-col {\n    flex: 1;\n    min-width: 200px;\n    gap: 10px;\n    display: flex;\n    align-items: center;\n}\n\n.name-col .shared-badge {\n    margin-left: 4px;\n}\n\n.row-icon {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.dashboard-name {\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.category-col,\n.type-col {\n    width: 120px;\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n}\n\n.date-col {\n    width: 120px;\n    color: var(--mj-text-disabled);\n    font-size: 13px;\n}\n\n.actions-col {\n    width: 80px;\n    justify-content: flex-end;\n    gap: 4px;\n    opacity: 0;\n    transition: opacity 0.15s;\n}\n\n.list-row:hover .actions-col {\n    opacity: 1;\n}\n\n/* Empty State */\n/* Empty state fills the browser pane (flex-fill \u2014 mj-empty-state centers\n   its content but does not grow on its own). */\n.dashboard-empty {\n    flex: 1;\n    min-height: 400px;\n}\n\n/* Feature highlights projected into the first-time onboarding empty state */\n.empty-features {\n    display: flex;\n    gap: 32px;\n    margin-top: var(--mj-space-5);\n    padding-top: 24px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.feature-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n}\n\n.feature-item i {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-bg-page);\n    border-radius: 8px;\n    color: var(--mj-brand-primary);\n    font-size: 16px;\n}\n\n/* Category Drop Zones */\n.category-drop-zones {\n    position: fixed;\n    bottom: 24px;\n    left: 50%;\n    transform: translateX(-50%);\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n    padding: 16px;\n    z-index: 1000;\n}\n\n.drop-zone-header {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    margin-bottom: 12px;\n    text-align: center;\n}\n\n.drop-zones {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n    justify-content: center;\n}\n\n.drop-zone {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 16px;\n    background: var(--mj-bg-surface-card);\n    border: 2px dashed var(--mj-border-strong);\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s;\n}\n\n.drop-zone:hover,\n.drop-zone.active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-text-primary);\n}\n\n/* Move Dialog */\n.move-dialog-overlay {\n    position: fixed;\n    inset: 0;\n    background: rgba(0, 0, 0, 0.5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n}\n\n.move-dialog {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    width: 400px;\n    max-width: 90%;\n    max-height: 80vh;\n    display: flex;\n    flex-direction: column;\n    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);\n}\n\n.dialog-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.dialog-header h3 {\n    margin: 0;\n    font-size: 18px;\n    color: var(--mj-text-primary);\n}\n\n.close-btn {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    border-radius: 4px;\n}\n\n.close-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.dialog-content {\n    padding: 20px;\n    overflow-y: auto;\n}\n\n.dialog-content p {\n    margin: 0 0 16px 0;\n    color: var(--mj-text-secondary);\n    font-size: 14px;\n}\n\n.category-list {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.category-option {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.category-option:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.category-option i {\n    color: var(--mj-brand-primary);\n}\n\n.dialog-footer {\n    display: flex;\n    justify-content: flex-end;\n    padding: 16px 20px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n/* New Dropdown */\n.new-dropdown {\n    position: relative;\n}\n\n.dropdown-caret {\n    font-size: 10px;\n    margin-left: 4px;\n}\n\n.dropdown-menu {\n    position: absolute;\n    top: 100%;\n    right: 0;\n    margin-top: 4px;\n    min-width: 160px;\n    background: var(--mj-bg-surface);\n    border-radius: 8px;\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n    z-index: 1001;\n    overflow: hidden;\n}\n\n.dropdown-item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    width: 100%;\n    padding: 12px 16px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-primary);\n    font-size: 14px;\n    cursor: pointer;\n    text-align: left;\n    transition: background 0.15s;\n}\n\n.dropdown-item:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.dropdown-item i {\n    color: var(--mj-brand-primary);\n    width: 16px;\n    text-align: center;\n}\n\n.dropdown-backdrop {\n    position: fixed;\n    inset: 0;\n    z-index: 1000;\n}\n\n/* Create Category Dialog */\n.create-category-dialog-overlay {\n    position: fixed;\n    inset: 0;\n    background: rgba(0, 0, 0, 0.5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1002;\n}\n\n.create-category-dialog {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    width: 400px;\n    max-width: 90%;\n    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);\n}\n\n.create-category-dialog .dialog-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.create-category-dialog .dialog-header h3 {\n    margin: 0;\n    font-size: 18px;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.create-category-dialog .dialog-header h3 i {\n    color: var(--mj-brand-primary);\n}\n\n.create-category-dialog .dialog-content {\n    padding: 20px;\n}\n\n.form-field {\n    margin-bottom: 16px;\n}\n\n.form-field:last-child {\n    margin-bottom: 0;\n}\n\n.form-field 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-field input,\n.form-field textarea {\n    width: 100%;\n    padding: 10px 12px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 6px;\n    font-size: 14px;\n    transition: border-color 0.15s, box-shadow 0.15s;\n    box-sizing: border-box;\n}\n\n.form-field input:focus,\n.form-field textarea: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-field textarea {\n    resize: vertical;\n    min-height: 80px;\n}\n\n.create-category-dialog .dialog-footer {\n    display: flex;\n    gap: 10px;\n    padding: 16px 20px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.create-category-dialog .dialog-footer .btn-primary {\n    flex: 0 0 auto;\n}\n\n.create-category-dialog .dialog-footer .btn-secondary {\n    flex: 0 0 auto;\n    margin-left: auto;\n}\n\n/* Breadcrumb Navigation */\n.breadcrumb-nav {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 12px 24px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-wrap: wrap;\n}\n\n.breadcrumb-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 10px;\n    border: none;\n    background: transparent;\n    color: var(--mj-brand-primary);\n    font-size: 13px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: background 0.15s;\n}\n\n.breadcrumb-item:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.breadcrumb-item.current {\n    color: var(--mj-text-primary);\n    font-weight: 500;\n    cursor: default;\n}\n\n.breadcrumb-item.current:hover {\n    background: transparent;\n}\n\n.breadcrumb-item i {\n    font-size: 12px;\n}\n\n.breadcrumb-item.root i {\n    font-size: 14px;\n}\n\n.breadcrumb-separator {\n    color: var(--mj-text-disabled);\n    font-size: 10px;\n}\n\n/* Category Cards */\n.category-card {\n    cursor: pointer;\n}\n\n.category-card:hover {\n    border-color: var(--mj-brand-primary);\n}\n\n.folder-icon {\n    background: var(--mj-status-warning) !important;\n}\n\n.category-row {\n    background: var(--mj-bg-surface-card);\n}\n\n.category-row:hover {\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface)) !important;\n}\n\n.category-row .folder-icon {\n    color: var(--mj-status-warning);\n}\n\n/* Drop target highlighting for category cards/rows */\n.dashboard-card.category-card.drop-target,\n.list-row.category-row.drop-target {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n/* Search text highlighting */\nmark {\n    background: var(--mj-status-warning);\n    color: inherit;\n    padding: 0 2px;\n    border-radius: 2px;\n}\n\n/* Delete Category Dialog */\n.delete-category-dialog-overlay {\n    position: fixed;\n    inset: 0;\n    background: rgba(0, 0, 0, 0.5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1002;\n}\n\n.delete-category-dialog {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    width: 480px;\n    max-width: 90%;\n    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);\n}\n\n.delete-category-dialog .dialog-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.delete-category-dialog .dialog-header.danger {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    border-bottom-color: color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n}\n\n.delete-category-dialog .dialog-header.danger h3 {\n    color: var(--mj-status-error);\n}\n\n.delete-category-dialog .dialog-header.danger h3 i {\n    color: var(--mj-status-error);\n}\n\n.delete-category-dialog .dialog-header h3 {\n    margin: 0;\n    font-size: 18px;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.delete-category-dialog .dialog-content {\n    padding: 20px;\n}\n\n.warning-message {\n    margin-bottom: 20px;\n}\n\n.warning-message p {\n    margin: 0 0 12px 0;\n    color: var(--mj-text-primary);\n    font-size: 14px;\n    line-height: 1.5;\n}\n\n.warning-message .content-warning {\n    color: var(--mj-status-error);\n    font-weight: 500;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 16px;\n}\n\n.warning-message .content-list {\n    margin: 8px 0 0 0;\n    padding-left: 24px;\n    color: var(--mj-text-secondary);\n}\n\n.warning-message .content-list li {\n    margin: 6px 0;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.warning-message .content-list li i {\n    color: var(--mj-text-disabled);\n    width: 16px;\n    text-align: center;\n}\n\n.confirmation-checkbox {\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.checkbox-label {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    cursor: pointer;\n}\n\n.checkbox-label input {\n    width: 18px;\n    height: 18px;\n    margin-top: 2px;\n    cursor: pointer;\n    accent-color: var(--mj-status-error);\n}\n\n.checkbox-text {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    line-height: 1.5;\n}\n\n.delete-category-dialog .dialog-footer {\n    display: flex;\n    gap: 10px;\n    padding: 16px 20px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.btn-danger {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 16px;\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.15s;\n}\n\n.btn-danger:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 85%, black);\n}\n\n.btn-danger:disabled {\n    background: var(--mj-border-default);\n    color: var(--mj-text-disabled);\n    cursor: not-allowed;\n}\n\n.delete-category-dialog .dialog-footer .btn-secondary {\n    margin-left: auto;\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], { Dashboards: [{
             type: Input
         }], Categories: [{