@memberjunction/ng-dashboard-viewer 6.2.0-edge.3 → 6.2.0-edge.5

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

@@ -1,40 +1,41 @@
 import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import { Subject } from 'rxjs';
-import { UUIDsEqual, NormalizeUUID, HighlightSearchMatches } from '@memberjunction/global';
+import { UUIDsEqual, NormalizeUUID, FilterByUUIDs, HighlightSearchMatches } from '@memberjunction/global';
+import { DashboardCategoryPath, FormatDashboardDate } from '../dashboard-card/dashboard-card.helpers';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/forms";
-import * as i2 from "@memberjunction/ng-shared-generic";
-import * as i3 from "@memberjunction/ng-ui-components";
+import * as i1 from "@memberjunction/ng-ui-components";
+import * as i2 from "@angular/forms";
+import * as i3 from "@memberjunction/ng-shared-generic";
 import * as i4 from "../breadcrumb/dashboard-breadcrumb.component";
-import * as i5 from "../config-dialogs/confirm-dialog.component";
+import * as i5 from "../dashboard-card/dashboard-card.component";
 function DashboardBrowserComponent_Conditional_11_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 28);
+    i0.ɵɵelementStart(0, "button", 27);
     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", 29);
+    i0.ɵɵelement(1, "i", 28);
     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", 27)(1, "span", 30);
+    i0.ɵɵelementStart(0, "div", 26)(1, "span", 29);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 31);
+    i0.ɵɵelementStart(3, "button", 30);
     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", 29);
+    i0.ɵɵelement(4, "i", 28);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 32);
+    i0.ɵɵelementStart(5, "button", 31);
     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", 33);
+    i0.ɵɵelement(6, "i", 32);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 34);
+    i0.ɵɵelementStart(7, "button", 33);
     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", 35);
+    i0.ɵɵelement(8, "i", 34);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "button", 36);
+    i0.ɵɵelementStart(9, "button", 35);
     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", 37);
+    i0.ɵɵelement(10, "i", 36);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -46,8 +47,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", 26);
-    i0.ɵɵconditionalCreate(1, DashboardBrowserComponent_Conditional_11_Conditional_1_Template, 11, 3, "div", 27);
+    i0.ɵɵconditionalCreate(0, DashboardBrowserComponent_Conditional_11_Conditional_0_Template, 3, 0, "button", 25);
+    i0.ɵɵconditionalCreate(1, DashboardBrowserComponent_Conditional_11_Conditional_1_Template, 11, 3, "div", 26);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵconditional(!ctx_r1.IsSelectionMode && ctx_r1.FilteredDashboards.length > 0 ? 0 : -1);
@@ -56,26 +57,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", 41)(1, "button", 42);
+    i0.ɵɵelementStart(0, "div", 40)(1, "button", 41);
     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", 43);
+    i0.ɵɵelement(2, "i", 42);
     i0.ɵɵtext(3, " Dashboard ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 42);
+    i0.ɵɵelementStart(4, "button", 41);
     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", 44);
+    i0.ɵɵelement(5, "i", 43);
     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", 38);
+    i0.ɵɵelementStart(0, "div", 10)(1, "button", 37);
     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", 39);
+    i0.ɵɵelement(2, "i", 38);
     i0.ɵɵtext(3, " New ");
-    i0.ɵɵelement(4, "i", 40);
+    i0.ɵɵelement(4, "i", 39);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, DashboardBrowserComponent_Conditional_12_Conditional_5_Template, 7, 0, "div", 41);
+    i0.ɵɵconditionalCreate(5, DashboardBrowserComponent_Conditional_12_Conditional_5_Template, 7, 0, "div", 40);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -84,32 +85,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", 45);
+    i0.ɵɵelementStart(0, "div", 44);
     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", 46);
+    i0.ɵɵelementStart(0, "button", 45);
     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", 37);
+    i0.ɵɵelement(1, "i", 36);
     i0.ɵɵelementEnd();
 } }
 function DashboardBrowserComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 47);
+    i0.ɵɵelementStart(0, "button", 46);
     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", 48);
+    i0.ɵɵelement(1, "i", 47);
     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", 49);
+    i0.ɵɵelement(1, "mj-loading", 48);
     i0.ɵɵelementEnd();
 } }
 function DashboardBrowserComponent_Conditional_21_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "p", 60);
+    i0.ɵɵelement(0, "p", 59);
 } if (rf & 2) {
     const category_r10 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -117,20 +118,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", 52);
+    i0.ɵɵelementStart(0, "div", 51);
     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) { return $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", 53)(2, "div", 54);
-    i0.ɵɵelement(3, "i", 55);
+    i0.ɵɵelementStart(1, "div", 52)(2, "div", 53);
+    i0.ɵɵelement(3, "i", 54);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 56)(5, "button", 57);
+    i0.ɵɵelementStart(4, "div", 55)(5, "button", 56);
     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", 35);
+    i0.ɵɵelement(6, "i", 34);
     i0.ɵɵelementEnd()()();
-    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.ɵɵelementStart(7, "div", 57);
+    i0.ɵɵelement(8, "h3", 58);
+    i0.ɵɵconditionalCreate(9, DashboardBrowserComponent_Conditional_21_For_2_Conditional_9_Template, 1, 1, "p", 59);
+    i0.ɵɵelementStart(10, "div", 60)(11, "span", 61);
+    i0.ɵɵelement(12, "i", 62);
     i0.ɵɵtext(13, " Category ");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -142,90 +143,21 @@ function DashboardBrowserComponent_Conditional_21_For_2_Template(rf, ctx) { if (
     i0.ɵɵadvance();
     i0.ɵɵconditional(category_r10.Description ? 9 : -1);
 } }
-function DashboardBrowserComponent_Conditional_21_For_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    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", 74);
-    i0.ɵɵlistener("change", function DashboardBrowserComponent_Conditional_21_For_4_Conditional_1_Template_input_change_1_listener($event) { return $event.stopPropagation(); });
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const dashboard_r12 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("checked", ctx_r1.IsSelected(dashboard_r12.ID));
-} }
-function DashboardBrowserComponent_Conditional_21_For_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    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", 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", 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", 35);
-    i0.ɵɵelementEnd();
-} }
-function DashboardBrowserComponent_Conditional_21_For_4_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    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", 60);
-} if (rf & 2) {
-    const dashboard_r12 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("innerHTML", ctx_r1.HighlightMatch(dashboard_r12.Description), i0.ɵɵsanitizeHtml);
-} }
 function DashboardBrowserComponent_Conditional_21_For_4_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    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", 65);
-    i0.ɵɵelementStart(2, "div", 53)(3, "div", 66);
-    i0.ɵɵelement(4, "i", 43);
+    i0.ɵɵelementStart(0, "mj-dashboard-card", 63);
+    i0.ɵɵlistener("CardClick", function DashboardBrowserComponent_Conditional_21_For_4_Template_mj_dashboard_card_CardClick_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.MouseEvent)); })("CardDoubleClick", function DashboardBrowserComponent_Conditional_21_For_4_Template_mj_dashboard_card_CardDoubleClick_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.MouseEvent)); })("ToggleFavorite", function DashboardBrowserComponent_Conditional_21_For_4_Template_mj_dashboard_card_ToggleFavorite_0_listener() { const dashboard_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnToggleFavorite(dashboard_r12)); })("SelectionToggle", function DashboardBrowserComponent_Conditional_21_For_4_Template_mj_dashboard_card_SelectionToggle_0_listener() { const dashboard_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleSelection(dashboard_r12.ID)); })("Edit", function DashboardBrowserComponent_Conditional_21_For_4_Template_mj_dashboard_card_Edit_0_listener() { const dashboard_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnEditDashboard(dashboard_r12)); })("Delete", function DashboardBrowserComponent_Conditional_21_For_4_Template_mj_dashboard_card_Delete_0_listener() { const dashboard_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDeleteDashboard(dashboard_r12)); })("dragstart", function DashboardBrowserComponent_Conditional_21_For_4_Template_mj_dashboard_card_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_mj_dashboard_card_dragend_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDragEnd()); });
     i0.ɵɵelementEnd();
-    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", 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", 60);
-    i0.ɵɵelementStart(13, "div", 61)(14, "span", 62);
-    i0.ɵɵelement(15, "i", 72);
-    i0.ɵɵtext(16);
-    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const dashboard_r12 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("selected", ctx_r1.IsSelected(dashboard_r12.ID))("dragging", ctx_r1.DraggingId === dashboard_r12.ID);
-    i0.ɵɵproperty("draggable", ctx_r1.AllowDragDrop);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.IsSelectionMode ? 1 : -1);
-    i0.ɵɵadvance(5);
-    i0.ɵɵconditional(ctx_r1.CanEdit(dashboard_r12.ID) ? 6 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.CanDelete(dashboard_r12.ID) ? 7 : -1);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("innerHTML", ctx_r1.HighlightMatch(dashboard_r12.Name), i0.ɵɵsanitizeHtml);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.IsShared(dashboard_r12.ID) ? 11 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(dashboard_r12.Description ? 12 : -1);
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.FormatDate(dashboard_r12.__mj_UpdatedAt), " ");
+    i0.ɵɵclassProp("dragging", ctx_r1.DraggingId === dashboard_r12.ID);
+    i0.ɵɵproperty("draggable", ctx_r1.AllowDragDrop)("Dashboard", dashboard_r12)("IsFavorite", ctx_r1.IsFavorite(dashboard_r12.ID))("ShowFavorite", ctx_r1.ShowFavorites)("IsShared", ctx_r1.IsShared(dashboard_r12.ID))("OwnerLabel", ctx_r1.OwnerLabel(dashboard_r12))("CategoryPath", ctx_r1.CardCategoryPath(dashboard_r12))("HighlightQuery", ctx_r1.SearchText)("Selectable", ctx_r1.IsSelectionMode)("Selected", ctx_r1.IsSelected(dashboard_r12.ID))("CanEdit", ctx_r1.CanEdit(dashboard_r12.ID))("CanDelete", ctx_r1.CanDelete(dashboard_r12.ID));
 } }
 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", 50, i0.ɵɵcomponentInstance().TrackByCategory, true);
-    i0.ɵɵrepeaterCreate(3, DashboardBrowserComponent_Conditional_21_For_4_Template, 17, 12, "div", 51, i0.ɵɵcomponentInstance().TrackByDashboard, true);
+    i0.ɵɵrepeaterCreate(1, DashboardBrowserComponent_Conditional_21_For_2_Template, 14, 4, "div", 49, i0.ɵɵcomponentInstance().TrackByCategory, true);
+    i0.ɵɵrepeaterCreate(3, DashboardBrowserComponent_Conditional_21_For_4_Template, 1, 14, "mj-dashboard-card", 50, i0.ɵɵcomponentInstance().TrackByDashboard, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -235,9 +167,9 @@ function DashboardBrowserComponent_Conditional_21_Template(rf, ctx) { if (rf & 1
     i0.ɵɵrepeater(ctx_r1.FilteredDashboards);
 } }
 function DashboardBrowserComponent_Conditional_22_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    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()); });
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 65)(1, "input", 72);
+    i0.ɵɵlistener("change", function DashboardBrowserComponent_Conditional_22_Conditional_2_Template_input_change_1_listener() { i0.ɵɵrestoreView(_r13); 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) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -245,122 +177,122 @@ 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", 80);
+    i0.ɵɵelement(0, "div", 65);
 } }
 function DashboardBrowserComponent_Conditional_22_For_12_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    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", 80);
-    i0.ɵɵelementStart(2, "div", 81);
-    i0.ɵɵelement(3, "i", 89)(4, "span", 90);
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 73);
+    i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_22_For_12_Template_div_click_0_listener() { const category_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.NavigateToCategory(category_r15.ID)); })("dragover", function DashboardBrowserComponent_Conditional_22_For_12_Template_div_dragover_0_listener($event) { const category_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDragOverChildCategory(category_r15.ID, $event)); })("dragleave", function DashboardBrowserComponent_Conditional_22_For_12_Template_div_dragleave_0_listener() { i0.ɵɵrestoreView(_r14); 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_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDropOnChildCategory(category_r15.ID, $event)); });
+    i0.ɵɵconditionalCreate(1, DashboardBrowserComponent_Conditional_22_For_12_Conditional_1_Template, 1, 0, "div", 65);
+    i0.ɵɵelementStart(2, "div", 66);
+    i0.ɵɵelement(3, "i", 74)(4, "span", 75);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 82);
+    i0.ɵɵelementStart(5, "div", 67);
     i0.ɵɵtext(6, " Category ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(7, "div", 83);
-    i0.ɵɵelementStart(8, "div", 91);
+    i0.ɵɵelement(7, "div", 68);
+    i0.ɵɵelementStart(8, "div", 76);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_22_For_12_Template_div_click_8_listener($event) { return $event.stopPropagation(); });
-    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", 35);
+    i0.ɵɵelementStart(9, "button", 56);
+    i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_22_For_12_Template_button_click_9_listener($event) { const category_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDeleteCategory(category_r15, $event)); });
+    i0.ɵɵelement(10, "i", 34);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const category_r18 = ctx.$implicit;
+    const category_r15 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("drop-target", ctx_r1.DragOverChildCategoryId === category_r18.ID);
+    i0.ɵɵclassProp("drop-target", ctx_r1.DragOverChildCategoryId === category_r15.ID);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.IsSelectionMode ? 1 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("innerHTML", ctx_r1.HighlightMatch(category_r18.Name), i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("innerHTML", ctx_r1.HighlightMatch(category_r15.Name), i0.ɵɵsanitizeHtml);
 } }
 function DashboardBrowserComponent_Conditional_22_For_14_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 94);
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 82);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_22_For_14_Conditional_1_Template_div_click_0_listener($event) { return $event.stopPropagation(); });
-    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.ɵɵelementStart(1, "input", 83);
+    i0.ɵɵlistener("change", function DashboardBrowserComponent_Conditional_22_For_14_Conditional_1_Template_input_change_1_listener() { i0.ɵɵrestoreView(_r18); const dashboard_r17 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleSelection(dashboard_r17.ID)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const dashboard_r20 = i0.ɵɵnextContext().$implicit;
+    const dashboard_r17 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("checked", ctx_r1.IsSelected(dashboard_r20.ID));
+    i0.ɵɵproperty("checked", ctx_r1.IsSelected(dashboard_r17.ID));
 } }
 function DashboardBrowserComponent_Conditional_22_For_14_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 71);
-    i0.ɵɵelement(1, "i", 78);
+    i0.ɵɵelementStart(0, "span", 79);
+    i0.ɵɵelement(1, "i", 84);
     i0.ɵɵelementEnd();
 } }
 function DashboardBrowserComponent_Conditional_22_For_14_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
-    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", 76);
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 85);
+    i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_22_For_14_Conditional_11_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r19); const dashboard_r17 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnEditDashboard(dashboard_r17, $event)); });
+    i0.ɵɵelement(1, "i", 86);
     i0.ɵɵelementEnd();
 } }
 function DashboardBrowserComponent_Conditional_22_For_14_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    const _r23 = i0.ɵɵgetCurrentView();
-    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", 35);
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 87);
+    i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_22_For_14_Conditional_12_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r20); const dashboard_r17 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDeleteDashboard(dashboard_r17, $event)); });
+    i0.ɵɵelement(1, "i", 34);
     i0.ɵɵelementEnd();
 } }
 function DashboardBrowserComponent_Conditional_22_For_14_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    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", 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);
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 77);
+    i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_22_For_14_Template_div_click_0_listener($event) { const dashboard_r17 = i0.ɵɵrestoreView(_r16).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDashboardClick(dashboard_r17, $event)); })("dblclick", function DashboardBrowserComponent_Conditional_22_For_14_Template_div_dblclick_0_listener($event) { const dashboard_r17 = i0.ɵɵrestoreView(_r16).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDashboardDoubleClick(dashboard_r17, $event)); })("dragstart", function DashboardBrowserComponent_Conditional_22_For_14_Template_div_dragstart_0_listener($event) { const dashboard_r17 = i0.ɵɵrestoreView(_r16).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDragStart(dashboard_r17, $event)); })("dragend", function DashboardBrowserComponent_Conditional_22_For_14_Template_div_dragend_0_listener() { i0.ɵɵrestoreView(_r16); 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", 65);
+    i0.ɵɵelementStart(2, "div", 66);
+    i0.ɵɵelement(3, "i", 78)(4, "span", 75);
+    i0.ɵɵconditionalCreate(5, DashboardBrowserComponent_Conditional_22_For_14_Conditional_5_Template, 2, 0, "span", 79);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 82);
+    i0.ɵɵelementStart(6, "div", 67);
     i0.ɵɵtext(7, " Dashboard ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 83);
+    i0.ɵɵelementStart(8, "div", 68);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 91);
+    i0.ɵɵelementStart(10, "div", 76);
     i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_22_For_14_Template_div_click_10_listener($event) { return $event.stopPropagation(); });
-    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.ɵɵconditionalCreate(11, DashboardBrowserComponent_Conditional_22_For_14_Conditional_11_Template, 2, 0, "button", 80);
+    i0.ɵɵconditionalCreate(12, DashboardBrowserComponent_Conditional_22_For_14_Conditional_12_Template, 2, 0, "button", 81);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const dashboard_r20 = ctx.$implicit;
+    const dashboard_r17 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("selected", ctx_r1.IsSelected(dashboard_r20.ID))("dragging", ctx_r1.DraggingId === dashboard_r20.ID);
+    i0.ɵɵclassProp("selected", ctx_r1.IsSelected(dashboard_r17.ID))("dragging", ctx_r1.DraggingId === dashboard_r17.ID);
     i0.ɵɵproperty("draggable", ctx_r1.AllowDragDrop);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.IsSelectionMode ? 1 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("innerHTML", ctx_r1.HighlightMatch(dashboard_r20.Name), i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("innerHTML", ctx_r1.HighlightMatch(dashboard_r17.Name), i0.ɵɵsanitizeHtml);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.IsShared(dashboard_r20.ID) ? 5 : -1);
+    i0.ɵɵconditional(ctx_r1.IsShared(dashboard_r17.ID) ? 5 : -1);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.FormatDate(dashboard_r20.__mj_UpdatedAt), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.FormatDate(dashboard_r17.__mj_UpdatedAt), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.CanEdit(dashboard_r20.ID) ? 11 : -1);
+    i0.ɵɵconditional(ctx_r1.CanEdit(dashboard_r17.ID) ? 11 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.CanDelete(dashboard_r20.ID) ? 12 : -1);
+    i0.ɵɵconditional(ctx_r1.CanDelete(dashboard_r17.ID) ? 12 : -1);
 } }
 function DashboardBrowserComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    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.ɵɵelementStart(0, "div", 20)(1, "div", 64);
+    i0.ɵɵconditionalCreate(2, DashboardBrowserComponent_Conditional_22_Conditional_2_Template, 2, 2, "div", 65);
+    i0.ɵɵelementStart(3, "div", 66);
     i0.ɵɵtext(4, "Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 82);
+    i0.ɵɵelementStart(5, "div", 67);
     i0.ɵɵtext(6, "Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 83);
+    i0.ɵɵelementStart(7, "div", 68);
     i0.ɵɵtext(8, "Modified");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 84);
+    i0.ɵɵelementStart(9, "div", 69);
     i0.ɵɵtext(10, "Actions");
     i0.ɵɵelementEnd()();
-    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.ɵɵrepeaterCreate(11, DashboardBrowserComponent_Conditional_22_For_12_Template, 11, 4, "div", 70, i0.ɵɵcomponentInstance().TrackByCategory, true);
+    i0.ɵɵrepeaterCreate(13, DashboardBrowserComponent_Conditional_22_For_14_Template, 13, 11, "div", 71, i0.ɵɵcomponentInstance().TrackByDashboard, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -372,21 +304,21 @@ function DashboardBrowserComponent_Conditional_22_Template(rf, ctx) { if (rf & 1
     i0.ɵɵrepeater(ctx_r1.FilteredDashboards);
 } }
 function DashboardBrowserComponent_Conditional_23_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r24 = i0.ɵɵgetCurrentView();
-    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);
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-empty-state", 90);
+    i0.ɵɵlistener("Action", function DashboardBrowserComponent_Conditional_23_Conditional_0_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnCreateDashboard()); });
+    i0.ɵɵelementStart(1, "div", 91)(2, "div", 92);
+    i0.ɵɵelement(3, "i", 93);
     i0.ɵɵelementStart(4, "span");
     i0.ɵɵtext(5, "Customizable layouts");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 101);
-    i0.ɵɵelement(7, "i", 103);
+    i0.ɵɵelementStart(6, "div", 92);
+    i0.ɵɵelement(7, "i", 94);
     i0.ɵɵelementStart(8, "span");
     i0.ɵɵtext(9, "Connect to your data");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 101);
-    i0.ɵɵelement(11, "i", 78);
+    i0.ɵɵelementStart(10, "div", 92);
+    i0.ɵɵelement(11, "i", 84);
     i0.ɵɵelementStart(12, "span");
     i0.ɵɵtext(13, "Share with your team");
     i0.ɵɵelementEnd()()()();
@@ -394,73 +326,91 @@ function DashboardBrowserComponent_Conditional_23_Conditional_0_Template(rf, ctx
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ActionText", ctx_r1.ShowCreateButton ? "Create Your First Dashboard" : "");
 } }
+function DashboardBrowserComponent_Conditional_23_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 95);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("Icon", ctx_r1.FlatEmptyIcon)("Title", ctx_r1.FlatEmptyTitle)("Message", ctx_r1.FlatEmptyMessage);
+} }
 function DashboardBrowserComponent_Conditional_23_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r25 = i0.ɵɵgetCurrentView();
-    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.ɵɵconditionalCreate(0, DashboardBrowserComponent_Conditional_23_Conditional_1_Conditional_0_Template, 1, 3, "mj-empty-state", 95);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(!ctx_r1.SearchText && !ctx_r1.FlatEmptyWelcome ? 0 : -1);
+} }
+function DashboardBrowserComponent_Conditional_23_Conditional_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-empty-state", 98);
+    i0.ɵɵlistener("Action", function DashboardBrowserComponent_Conditional_23_Conditional_2_Conditional_0_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnCreateDashboard()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ActionText", ctx_r1.ShowCreateButton ? "Create Dashboard" : "");
 } }
-function DashboardBrowserComponent_Conditional_23_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r26 = i0.ɵɵgetCurrentView();
-    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()); });
+function DashboardBrowserComponent_Conditional_23_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-empty-state", 99);
+    i0.ɵɵlistener("Action", function DashboardBrowserComponent_Conditional_23_Conditional_2_Conditional_1_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnCreateDashboard()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ActionText", ctx_r1.ShowCreateButton ? "Create Dashboard" : "");
 } }
+function DashboardBrowserComponent_Conditional_23_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, DashboardBrowserComponent_Conditional_23_Conditional_2_Conditional_0_Template, 1, 1, "mj-empty-state", 96);
+    i0.ɵɵconditionalCreate(1, DashboardBrowserComponent_Conditional_23_Conditional_2_Conditional_1_Template, 1, 1, "mj-empty-state", 97);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(!ctx_r1.IsAtRoot && !ctx_r1.SearchText ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.IsAtRoot && ctx_r1.Dashboards.length > 0 && !ctx_r1.SearchText ? 1 : -1);
+} }
 function DashboardBrowserComponent_Conditional_23_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r27 = i0.ɵɵgetCurrentView();
-    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()); });
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-empty-state", 100);
+    i0.ɵɵlistener("Action", function DashboardBrowserComponent_Conditional_23_Conditional_3_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ClearSearch()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("Message", ctx_r1.NoResultsMessage);
 } }
 function DashboardBrowserComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    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);
+    i0.ɵɵconditionalCreate(0, DashboardBrowserComponent_Conditional_23_Conditional_0_Template, 14, 1, "mj-empty-state", 88);
+    i0.ɵɵconditionalCreate(1, DashboardBrowserComponent_Conditional_23_Conditional_1_Template, 1, 1)(2, DashboardBrowserComponent_Conditional_23_Conditional_2_Template, 2, 2);
+    i0.ɵɵconditionalCreate(3, DashboardBrowserComponent_Conditional_23_Conditional_3_Template, 1, 1, "mj-empty-state", 89);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵconditional(ctx_r1.IsAtRoot && ctx_r1.Dashboards.length === 0 ? 0 : -1);
-    i0.ɵɵadvance();
-    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 ? 2 : -1);
+    i0.ɵɵconditional(ctx_r1.ShowWelcome ? 0 : -1);
     i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.FlatMode ? 1 : 2);
+    i0.ɵɵadvance(2);
     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", 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", 55);
+    const _r26 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 103);
+    i0.ɵɵlistener("dragover", function DashboardBrowserComponent_Conditional_24_For_8_Template_div_dragover_0_listener($event) { const cat_r27 = i0.ɵɵrestoreView(_r26).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDragOverCategory(cat_r27.ID, $event)); })("dragleave", function DashboardBrowserComponent_Conditional_24_For_8_Template_div_dragleave_0_listener() { i0.ɵɵrestoreView(_r26); 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_r27 = i0.ɵɵrestoreView(_r26).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDropOnCategory(cat_r27.ID, $event)); });
+    i0.ɵɵelement(1, "i", 54);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const cat_r30 = ctx.$implicit;
+    const cat_r27 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("active", ctx_r1.DropTargetCategoryId === cat_r30.ID);
+    i0.ɵɵclassProp("active", ctx_r1.DropTargetCategoryId === cat_r27.ID);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", cat_r30.Name, " ");
+    i0.ɵɵtextInterpolate1(" ", cat_r27.Name, " ");
 } }
 function DashboardBrowserComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 21)(1, "div", 107);
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 21)(1, "div", 101);
     i0.ɵɵtext(2, "Drop to move to category:");
     i0.ɵɵelementEnd();
-    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", 33);
+    i0.ɵɵelementStart(3, "div", 102)(4, "div", 103);
+    i0.ɵɵlistener("dragover", function DashboardBrowserComponent_Conditional_24_Template_div_dragover_4_listener($event) { i0.ɵɵrestoreView(_r25); 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(_r25); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDragLeaveCategory()); })("drop", function DashboardBrowserComponent_Conditional_24_Template_div_drop_4_listener($event) { i0.ɵɵrestoreView(_r25); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDropOnCategory(null, $event)); });
+    i0.ɵɵelement(5, "i", 32);
     i0.ɵɵtext(6, " Uncategorized ");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(7, DashboardBrowserComponent_Conditional_24_For_8_Template, 3, 3, "div", 110, i0.ɵɵcomponentInstance().TrackByCategory, true);
+    i0.ɵɵrepeaterCreate(7, DashboardBrowserComponent_Conditional_24_For_8_Template, 3, 3, "div", 104, i0.ɵɵcomponentInstance().TrackByCategory, true);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -469,43 +419,43 @@ function DashboardBrowserComponent_Conditional_24_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(ctx_r1.Categories);
 } }
-function DashboardBrowserComponent_Conditional_26_For_15_Template(rf, ctx) { if (rf & 1) {
-    const _r32 = i0.ɵɵgetCurrentView();
-    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", 55);
+function DashboardBrowserComponent_Conditional_25_For_15_Template(rf, ctx) { if (rf & 1) {
+    const _r29 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 111);
+    i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_25_For_15_Template_div_click_0_listener() { const cat_r30 = i0.ɵɵrestoreView(_r29).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ConfirmMove(cat_r30.ID)); });
+    i0.ɵɵelement(1, "i", 54);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const cat_r33 = ctx.$implicit;
+    const cat_r30 = ctx.$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", cat_r33.Name, " ");
+    i0.ɵɵtextInterpolate1(" ", cat_r30.Name, " ");
 } }
-function DashboardBrowserComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    const _r31 = i0.ɵɵgetCurrentView();
-    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", 112);
-    i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_26_Template_div_click_1_listener($event) { return $event.stopPropagation(); });
-    i0.ɵɵelementStart(2, "div", 113)(3, "h3");
+function DashboardBrowserComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 105);
+    i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_25_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseMoveDialog()); });
+    i0.ɵɵelementStart(1, "div", 106);
+    i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_25_Template_div_click_1_listener($event) { return $event.stopPropagation(); });
+    i0.ɵɵelementStart(2, "div", 107)(3, "h3");
     i0.ɵɵtext(4, "Move to Category");
     i0.ɵɵelementEnd();
-    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", 37);
+    i0.ɵɵelementStart(5, "button", 108);
+    i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_25_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseMoveDialog()); });
+    i0.ɵɵelement(6, "i", 36);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 115)(8, "p");
+    i0.ɵɵelementStart(7, "div", 109)(8, "p");
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    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", 33);
+    i0.ɵɵelementStart(10, "div", 110)(11, "div", 111);
+    i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_25_Template_div_click_11_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ConfirmMove(null)); });
+    i0.ɵɵelement(12, "i", 32);
     i0.ɵɵtext(13, " Uncategorized ");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(14, DashboardBrowserComponent_Conditional_26_For_15_Template, 3, 1, "div", 118, i0.ɵɵcomponentInstance().TrackByCategory, true);
+    i0.ɵɵrepeaterCreate(14, DashboardBrowserComponent_Conditional_25_For_15_Template, 3, 1, "div", 112, i0.ɵɵcomponentInstance().TrackByCategory, true);
     i0.ɵɵelementEnd()();
-    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.ɵɵelementStart(16, "div", 113)(17, "button", 114);
+    i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_25_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseMoveDialog()); });
     i0.ɵɵtext(18, "Cancel");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -515,40 +465,40 @@ function DashboardBrowserComponent_Conditional_26_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance(5);
     i0.ɵɵrepeater(ctx_r1.Categories);
 } }
-function DashboardBrowserComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
-    const _r34 = i0.ɵɵgetCurrentView();
-    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", 122);
-    i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_27_Template_div_click_1_listener($event) { return $event.stopPropagation(); });
-    i0.ɵɵelementStart(2, "div", 113)(3, "h3");
-    i0.ɵɵelement(4, "i", 44);
+function DashboardBrowserComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    const _r31 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 115);
+    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.CloseCreateCategoryDialog()); });
+    i0.ɵɵelementStart(1, "div", 116);
+    i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_26_Template_div_click_1_listener($event) { return $event.stopPropagation(); });
+    i0.ɵɵelementStart(2, "div", 107)(3, "h3");
+    i0.ɵɵelement(4, "i", 43);
     i0.ɵɵtext(5, " Create Category ");
     i0.ɵɵelementEnd();
-    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", 37);
+    i0.ɵɵelementStart(6, "button", 108);
+    i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_26_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseCreateCategoryDialog()); });
+    i0.ɵɵelement(7, "i", 36);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 115)(9, "div", 123)(10, "label", 124);
+    i0.ɵɵelementStart(8, "div", 109)(9, "div", 117)(10, "label", 118);
     i0.ɵɵtext(11, "Name *");
     i0.ɵɵelementEnd();
-    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.ɵɵelementStart(12, "input", 119);
+    i0.ɵɵtwoWayListener("ngModelChange", function DashboardBrowserComponent_Conditional_26_Template_input_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r31); 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_26_Template_input_keyup_enter_12_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ConfirmCreateCategory()); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 123)(14, "label", 126);
+    i0.ɵɵelementStart(13, "div", 117)(14, "label", 120);
     i0.ɵɵtext(15, "Description");
     i0.ɵɵelementEnd();
-    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.ɵɵelementStart(16, "textarea", 121);
+    i0.ɵɵtwoWayListener("ngModelChange", function DashboardBrowserComponent_Conditional_26_Template_textarea_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r31); 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", 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", 39);
+    i0.ɵɵelementStart(17, "div", 113)(18, "button", 122);
+    i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_26_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ConfirmCreateCategory()); });
+    i0.ɵɵelement(19, "i", 38);
     i0.ɵɵtext(20, " Create ");
     i0.ɵɵelementEnd();
-    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.ɵɵelementStart(21, "button", 114);
+    i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_26_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseCreateCategoryDialog()); });
     i0.ɵɵtext(22, "Cancel");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -560,68 +510,68 @@ function DashboardBrowserComponent_Conditional_27_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance(2);
     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", 139);
-    i0.ɵɵelement(1, "i", 141);
+function DashboardBrowserComponent_Conditional_27_Conditional_8_Conditional_7_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 133);
+    i0.ɵɵelement(1, "i", 135);
     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) {
+function DashboardBrowserComponent_Conditional_27_Conditional_8_Conditional_7_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "li");
-    i0.ɵɵelement(1, "i", 43);
+    i0.ɵɵelement(1, "i", 42);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const counts_r37 = i0.ɵɵnextContext(2);
+    const counts_r34 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate2(" ", counts_r37.dashboards, " dashboard", counts_r37.dashboards !== 1 ? "s" : "", " ");
+    i0.ɵɵtextInterpolate2(" ", counts_r34.dashboards, " dashboard", counts_r34.dashboards !== 1 ? "s" : "", " ");
 } }
-function DashboardBrowserComponent_Conditional_28_Conditional_8_Conditional_7_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function DashboardBrowserComponent_Conditional_27_Conditional_8_Conditional_7_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "li");
-    i0.ɵɵelement(1, "i", 55);
+    i0.ɵɵelement(1, "i", 54);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const counts_r37 = i0.ɵɵnextContext(2);
+    const counts_r34 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate2(" ", counts_r37.categories, " sub-categor", counts_r37.categories !== 1 ? "ies" : "y", " ");
+    i0.ɵɵtextInterpolate2(" ", counts_r34.categories, " sub-categor", counts_r34.categories !== 1 ? "ies" : "y", " ");
 } }
-function DashboardBrowserComponent_Conditional_28_Conditional_8_Conditional_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    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");
+function DashboardBrowserComponent_Conditional_27_Conditional_8_Conditional_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "ul", 134);
+    i0.ɵɵconditionalCreate(1, DashboardBrowserComponent_Conditional_27_Conditional_8_Conditional_7_Conditional_1_Conditional_1_Template, 3, 2, "li");
+    i0.ɵɵconditionalCreate(2, DashboardBrowserComponent_Conditional_27_Conditional_8_Conditional_7_Conditional_1_Conditional_2_Template, 3, 2, "li");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const counts_r37 = i0.ɵɵnextContext();
+    const counts_r34 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵconditional(counts_r37.dashboards > 0 ? 1 : -1);
+    i0.ɵɵconditional(counts_r34.dashboards > 0 ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(counts_r37.categories > 0 ? 2 : -1);
+    i0.ɵɵconditional(counts_r34.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", 139);
-    i0.ɵɵconditionalCreate(1, DashboardBrowserComponent_Conditional_28_Conditional_8_Conditional_7_Conditional_1_Template, 3, 2, "ul", 140);
+function DashboardBrowserComponent_Conditional_27_Conditional_8_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, DashboardBrowserComponent_Conditional_27_Conditional_8_Conditional_7_Conditional_0_Template, 3, 0, "p", 133);
+    i0.ɵɵconditionalCreate(1, DashboardBrowserComponent_Conditional_27_Conditional_8_Conditional_7_Conditional_1_Template, 3, 2, "ul", 134);
 } if (rf & 2) {
-    const counts_r37 = ctx;
-    i0.ɵɵconditional(counts_r37.dashboards > 0 || counts_r37.categories > 0 ? 0 : -1);
+    const counts_r34 = ctx;
+    i0.ɵɵconditional(counts_r34.dashboards > 0 || counts_r34.categories > 0 ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(counts_r37.dashboards > 0 || counts_r37.categories > 0 ? 1 : -1);
+    i0.ɵɵconditional(counts_r34.dashboards > 0 || counts_r34.categories > 0 ? 1 : -1);
 } }
-function DashboardBrowserComponent_Conditional_28_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    const _r36 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 115)(1, "div", 134)(2, "p");
+function DashboardBrowserComponent_Conditional_27_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r33 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 109)(1, "div", 128)(2, "p");
     i0.ɵɵtext(3, " You are about to delete the category ");
     i0.ɵɵelementStart(4, "strong");
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(6, ". ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(7, DashboardBrowserComponent_Conditional_28_Conditional_8_Conditional_7_Template, 2, 2);
+    i0.ɵɵconditionalCreate(7, DashboardBrowserComponent_Conditional_27_Conditional_8_Conditional_7_Template, 2, 2);
     i0.ɵɵelementEnd();
-    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.ɵɵelementStart(8, "div", 129)(9, "label", 130)(10, "input", 131);
+    i0.ɵɵtwoWayListener("ngModelChange", function DashboardBrowserComponent_Conditional_27_Conditional_8_Template_input_ngModelChange_10_listener($event) { i0.ɵɵrestoreView(_r33); 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", 138);
+    i0.ɵɵelementStart(11, "span", 132);
     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) {
@@ -634,28 +584,28 @@ function DashboardBrowserComponent_Conditional_28_Conditional_8_Template(rf, ctx
     i0.ɵɵadvance(3);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.DeleteCategoryIncludeContents);
 } }
-function DashboardBrowserComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
-    const _r35 = i0.ɵɵgetCurrentView();
-    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", 130);
-    i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_28_Template_div_click_1_listener($event) { return $event.stopPropagation(); });
-    i0.ɵɵelementStart(2, "div", 131)(3, "h3");
-    i0.ɵɵelement(4, "i", 132);
+function DashboardBrowserComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    const _r32 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 123);
+    i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_27_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseDeleteCategoryConfirm()); });
+    i0.ɵɵelementStart(1, "div", 124);
+    i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_27_Template_div_click_1_listener($event) { return $event.stopPropagation(); });
+    i0.ɵɵelementStart(2, "div", 125)(3, "h3");
+    i0.ɵɵelement(4, "i", 126);
     i0.ɵɵtext(5, " Delete Category ");
     i0.ɵɵelementEnd();
-    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", 37);
+    i0.ɵɵelementStart(6, "button", 108);
+    i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_27_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseDeleteCategoryConfirm()); });
+    i0.ɵɵelement(7, "i", 36);
     i0.ɵɵelementEnd()();
-    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", 35);
+    i0.ɵɵconditionalCreate(8, DashboardBrowserComponent_Conditional_27_Conditional_8_Template, 13, 3, "div", 109);
+    i0.ɵɵelementStart(9, "div", 113)(10, "button", 127);
+    i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_27_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ConfirmDeleteCategory()); });
+    i0.ɵɵelement(11, "i", 34);
     i0.ɵɵtext(12, " Delete Category ");
     i0.ɵɵelementEnd();
-    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.ɵɵelementStart(13, "button", 114);
+    i0.ɵɵlistener("click", function DashboardBrowserComponent_Conditional_27_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseDeleteCategoryConfirm()); });
     i0.ɵɵtext(14, "Cancel");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -665,6 +615,15 @@ function DashboardBrowserComponent_Conditional_28_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", !ctx_r1.DeleteCategoryIncludeContents);
 } }
+/** The texts of the delete confirm: names one dashboard, counts several. */
+function deleteDashboardsConfirm(dashboards) {
+    const count = dashboards.length;
+    return {
+        title: count === 1 ? 'Delete dashboard' : `Delete ${count} dashboards`,
+        message: count === 1 ? `Delete "${dashboards[0].Name}"?` : `Delete ${count} dashboards?`,
+        detail: 'This action cannot be undone.',
+    };
+}
 /**
  * Generic dashboard browser component.
  * Displays dashboards in card or list view with multi-select, filtering, and bulk actions.
@@ -674,6 +633,7 @@ function DashboardBrowserComponent_Conditional_28_Template(rf, ctx) { if (rf & 1
  */
 export class DashboardBrowserComponent {
     cdr;
+    confirmService;
     // ========================================
     // Inputs
     // ========================================
@@ -708,6 +668,23 @@ export class DashboardBrowserComponent {
     get SelectedCategoryId() {
         return this._selectedCategoryId;
     }
+    _flatMode = false;
+    /**
+     * When true, shows every dashboard in `Dashboards` in one flat list and ignores
+     * `SelectedCategoryId`: no folder scoping, no folder cards, the breadcrumb stays at the
+     * root, and new dashboards and categories are created at the root. Search and the
+     * Config-type rule still apply. When false (the default), shows the sub-folders and
+     * dashboards of the selected folder.
+     */
+    set FlatMode(value) {
+        if (value !== this._flatMode) {
+            this._flatMode = value;
+            this.applyFilters();
+        }
+    }
+    get FlatMode() {
+        return this._flatMode;
+    }
     /** Initial view mode */
     _viewMode = 'cards';
     set ViewMode(value) {
@@ -759,6 +736,39 @@ export class DashboardBrowserComponent {
     get EffectiveCategoryMap() {
         return this._effectiveCategoryMap;
     }
+    /** IDs of the user's favorite dashboards. Their cards show a filled star. */
+    _favoriteIds = new Set();
+    set FavoriteIds(value) {
+        this._favoriteIds = new Set((value ?? []).map(id => NormalizeUUID(id)));
+        this.cdr.markForCheck();
+    }
+    get FavoriteIds() {
+        return [...this._favoriteIds];
+    }
+    /** Whether cards show the favorite star. Turn it on when the host handles DashboardFavoriteToggle. */
+    ShowFavorites = false;
+    /**
+     * Map of dashboard ID to the owner text its card shows ("You", or a name). A dashboard whose ID
+     * is not in the map shows no owner. IDs match in any letter case.
+     */
+    _ownerLabels = new Map();
+    ownerLabelById = new Map();
+    set OwnerLabels(value) {
+        this._ownerLabels = value ?? new Map();
+        this.ownerLabelById = new Map([...this._ownerLabels].map(([id, label]) => [NormalizeUUID(id), label]));
+        this.cdr.markForCheck();
+    }
+    get OwnerLabels() {
+        return this._ownerLabels;
+    }
+    /** Icon of the empty state of a flat list with no dashboards and no search. */
+    FlatEmptyIcon = 'fa-solid fa-layer-group';
+    /** Title of the empty state of a flat list with no dashboards and no search. */
+    FlatEmptyTitle = 'No dashboards to show';
+    /** Message of the empty state of a flat list with no dashboards and no search. */
+    FlatEmptyMessage = 'There are no dashboards in this list yet.';
+    /** When true, an empty flat list with no search shows the first-run welcome instead. */
+    FlatEmptyWelcome = false;
     // ========================================
     // Outputs
     // ========================================
@@ -766,7 +776,7 @@ export class DashboardBrowserComponent {
     DashboardOpen = new EventEmitter();
     /** Emitted when a dashboard is opened for editing */
     DashboardEdit = new EventEmitter();
-    /** Emitted when dashboards are requested for deletion */
+    /** Emitted after the user confirms a delete. The host deletes the dashboards and does not ask again. */
     DashboardDelete = new EventEmitter();
     /** Emitted when dashboards are requested to move to a folder */
     DashboardMove = new EventEmitter();
@@ -782,6 +792,8 @@ export class DashboardBrowserComponent {
     ViewModeChange = new EventEmitter();
     /** Emitted when view preference should be persisted */
     ViewPreferenceChange = new EventEmitter();
+    /** Emitted when the user stars or unstars a dashboard on its card */
+    DashboardFavoriteToggle = new EventEmitter();
     // ========================================
     // State
     // ========================================
@@ -791,14 +803,10 @@ export class DashboardBrowserComponent {
     SearchText = '';
     /** Set of selected dashboard IDs */
     SelectedIds = new Set();
-    /** Last clicked dashboard ID (for shift-click range selection) */
+    /** The last dashboard clicked in selection mode: where a Shift-click range starts */
     lastClickedId = null;
-    /** Whether delete confirmation dialog is visible */
-    ShowDeleteConfirm = false;
     /** Whether move-to-folder dialog is visible */
     ShowMoveDialog = false;
-    /** Dashboards pending deletion (for confirm dialog) */
-    DashboardsPendingDelete = [];
     /** Currently dragging dashboard ID */
     DraggingId = null;
     /** Drop target category ID */
@@ -828,8 +836,9 @@ export class DashboardBrowserComponent {
     // ========================================
     // Constructor
     // ========================================
-    constructor(cdr) {
+    constructor(cdr, confirmService) {
         this.cdr = cdr;
+        this.confirmService = confirmService;
     }
     // ========================================
     // Lifecycle
@@ -884,6 +893,14 @@ export class DashboardBrowserComponent {
     get NoResultsMessage() {
         return `No dashboards or folders match "${this.SearchText}". Try a different search term.`;
     }
+    /**
+     * Whether an empty browser shows the first-run welcome: in flat mode when the host asks for it
+     * (FlatEmptyWelcome) and there is no search; in folder mode at the root when there are no
+     * dashboards at all.
+     */
+    get ShowWelcome() {
+        return this._flatMode ? this.FlatEmptyWelcome && !this.SearchText : this.IsAtRoot && this._dashboards.length === 0;
+    }
     /**
      * Handle category filter change
      */
@@ -943,38 +960,28 @@ export class DashboardBrowserComponent {
     // Public Methods - Selection
     // ========================================
     /**
-     * Handle dashboard click with multi-select support
+     * Handles a click on a dashboard. Outside selection mode every click opens the dashboard, and a
+     * Shift, Ctrl or Cmd click asks for a separate tab (`OpenInNewTab`). In selection mode a
+     * Shift-click selects the range from the last dashboard clicked in selection mode (just this one
+     * when there is none yet), a Ctrl or Cmd click toggles the dashboard, and a plain click clears
+     * the selection and opens the dashboard.
      */
     OnDashboardClick(dashboard, event) {
-        if (!this.AllowMultiSelect) {
-            // Single select mode - just open the dashboard
-            this.DashboardOpen.emit({ Dashboard: dashboard, OpenInNewTab: event.ctrlKey || event.metaKey });
+        if (!this.AllowMultiSelect || !this.IsSelectionMode) {
+            this.SelectedIds.clear();
+            this.DashboardOpen.emit({ Dashboard: dashboard, OpenInNewTab: event.shiftKey || event.ctrlKey || event.metaKey });
+            this.cdr.markForCheck();
             return;
         }
         if (event.shiftKey && this.lastClickedId) {
-            // Shift-click: range selection
             this.selectRange(this.lastClickedId, dashboard.ID);
         }
-        else if (event.ctrlKey || event.metaKey) {
-            // Ctrl/Cmd-click: toggle selection
+        else if (event.shiftKey || event.ctrlKey || event.metaKey) {
             this.ToggleSelection(dashboard.ID);
         }
         else {
-            // Normal click: if not selected, open; if selected with others, open
-            if (this.SelectedIds.size <= 1) {
-                this.SelectedIds.clear();
-                this.DashboardOpen.emit({ Dashboard: dashboard, OpenInNewTab: false });
-            }
-            else if (this.SelectedIds.has(dashboard.ID)) {
-                // Clicking on one of multiple selected items - open just this one
-                this.SelectedIds.clear();
-                this.DashboardOpen.emit({ Dashboard: dashboard, OpenInNewTab: false });
-            }
-            else {
-                // Clicking on unselected item - clear selection and open
-                this.SelectedIds.clear();
-                this.DashboardOpen.emit({ Dashboard: dashboard, OpenInNewTab: false });
-            }
+            this.SelectedIds.clear();
+            this.DashboardOpen.emit({ Dashboard: dashboard, OpenInNewTab: false });
         }
         this.lastClickedId = dashboard.ID;
         this.cdr.markForCheck();
@@ -1072,7 +1079,7 @@ export class DashboardBrowserComponent {
      */
     OnCreateDashboard() {
         this.CloseNewMenu();
-        this.DashboardCreate.emit({ CategoryId: this.SelectedCategoryId });
+        this.DashboardCreate.emit({ CategoryId: this.folderIdForNewItems });
     }
     /**
      * Open the create category dialog
@@ -1100,66 +1107,44 @@ export class DashboardBrowserComponent {
         if (!this.NewCategoryName.trim())
             return;
         this.CategoryCreate.emit({
-            ParentCategoryId: this.SelectedCategoryId,
+            ParentCategoryId: this.folderIdForNewItems,
             Name: this.NewCategoryName.trim(),
             Description: this.NewCategoryDescription.trim() || null
         });
         this.CloseCreateCategoryDialog();
     }
     /**
-     * Open edit dialog for single dashboard via context menu
+     * Asks the host to edit one dashboard. A click event, when given, does not also reach the row or card.
      */
     OnEditDashboard(dashboard, event) {
-        event.stopPropagation();
+        event?.stopPropagation();
         this.DashboardEdit.emit({ Dashboard: dashboard });
     }
     /**
-     * Request to delete a single dashboard
+     * Asks the user to confirm deleting one dashboard, then emits DashboardDelete. A click event, when
+     * given, does not also reach the row or card.
      */
-    OnDeleteDashboard(dashboard, event) {
-        event.stopPropagation();
-        this.DashboardsPendingDelete = [dashboard];
-        this.ShowDeleteConfirm = true;
-        this.cdr.markForCheck();
+    async OnDeleteDashboard(dashboard, event) {
+        event?.stopPropagation();
+        await this.confirmAndDelete([dashboard]);
     }
-    /**
-     * Request to delete selected dashboards.
-     * Only includes dashboards the user has permission to delete.
-     */
-    OnDeleteSelected() {
-        if (this.SelectedIds.size === 0)
-            return;
-        // Only include dashboards the user can delete
-        this.DashboardsPendingDelete = this.GetDeletableSelectedDashboards();
-        if (this.DashboardsPendingDelete.length === 0) {
-            // No deletable dashboards selected
-            return;
-        }
-        this.ShowDeleteConfirm = true;
-        this.cdr.markForCheck();
+    /** Emits DashboardFavoriteToggle for the dashboard whose star the user clicked. */
+    OnToggleFavorite(dashboard) {
+        this.DashboardFavoriteToggle.emit({ Dashboard: dashboard });
     }
-    /**
-     * Confirm deletion
-     */
-    ConfirmDelete() {
-        if (this.DashboardsPendingDelete.length > 0) {
-            this.DashboardDelete.emit({ Dashboards: this.DashboardsPendingDelete });
-            // Clear selection for deleted items
-            for (const d of this.DashboardsPendingDelete) {
-                this.SelectedIds.delete(d.ID);
-            }
-        }
-        this.CloseDeleteConfirm();
-        // Exit selection mode after bulk operation
-        this.ExitSelectionMode();
+    /** Asks the user to confirm deleting the selected dashboards they may delete, then emits DashboardDelete. */
+    async OnDeleteSelected() {
+        const deletable = this.GetDeletableSelectedDashboards();
+        if (deletable.length === 0)
+            return;
+        await this.confirmAndDelete(deletable);
     }
-    /**
-     * Cancel deletion
-     */
-    CloseDeleteConfirm() {
-        this.ShowDeleteConfirm = false;
-        this.DashboardsPendingDelete = [];
-        this.cdr.markForCheck();
+    /** Emits DashboardDelete and leaves selection mode when the user confirms; keeps everything when they cancel. */
+    async confirmAndDelete(dashboards) {
+        if (!(await this.confirmService.ConfirmDelete(deleteDashboardsConfirm(dashboards))))
+            return;
+        this.DashboardDelete.emit({ Dashboards: dashboards });
+        this.ExitSelectionMode(); // clears SelectedIds and calls markForCheck
     }
     /**
      * Open move-to-folder dialog for selected dashboards
@@ -1334,8 +1319,7 @@ export class DashboardBrowserComponent {
             try {
                 const dragData = JSON.parse(data);
                 if (dragData.type === 'dashboards' && dragData.ids?.length > 0) {
-                    const draggedIds = new Set(dragData.ids.map((id) => NormalizeUUID(id)));
-                    const dashboards = this.Dashboards.filter(d => draggedIds.has(NormalizeUUID(d.ID)));
+                    const dashboards = FilterByUUIDs(this.Dashboards, dragData.ids);
                     if (dashboards.length > 0) {
                         this.DashboardMove.emit({
                             Dashboards: dashboards,
@@ -1365,27 +1349,22 @@ export class DashboardBrowserComponent {
         return category?.Name || 'Unknown';
     }
     /**
-     * Format date for display
+     * Format date for display: "Today", "Yesterday", "N days ago" (under a week), else the local date
      */
     FormatDate(date) {
-        if (!date)
-            return '';
-        const d = new Date(date);
-        const now = new Date();
-        const diffMs = now.getTime() - d.getTime();
-        const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
-        if (diffDays === 0) {
-            return 'Today';
-        }
-        else if (diffDays === 1) {
-            return 'Yesterday';
-        }
-        else if (diffDays < 7) {
-            return `${diffDays} days ago`;
-        }
-        else {
-            return d.toLocaleDateString();
-        }
+        return FormatDashboardDate(date);
+    }
+    /** True when the dashboard is one of the user's favorites (FavoriteIds). */
+    IsFavorite(dashboardId) {
+        return this._favoriteIds.has(NormalizeUUID(dashboardId));
+    }
+    /** The owner text of the dashboard's card (from OwnerLabels), or null for none. */
+    OwnerLabel(dashboard) {
+        return this.ownerLabelById.get(NormalizeUUID(dashboard.ID)) ?? null;
+    }
+    /** The category path a card shows: only in flat mode, where the folder is not otherwise visible. */
+    CardCategoryPath(dashboard) {
+        return this._flatMode ? DashboardCategoryPath(this.GetEffectiveCategoryId(dashboard), this._categories) : null;
     }
     /**
      * Track by function for ngFor
@@ -1506,8 +1485,7 @@ export class DashboardBrowserComponent {
             try {
                 const dragData = JSON.parse(data);
                 if (dragData.type === 'dashboards' && dragData.ids?.length > 0) {
-                    const draggedIds = new Set(dragData.ids.map((id) => NormalizeUUID(id)));
-                    const dashboards = this.Dashboards.filter(d => draggedIds.has(NormalizeUUID(d.ID)));
+                    const dashboards = FilterByUUIDs(this.Dashboards, dragData.ids);
                     if (dashboards.length > 0) {
                         this.DashboardMove.emit({
                             Dashboards: dashboards,
@@ -1531,8 +1509,7 @@ export class DashboardBrowserComponent {
      * Handle drop from breadcrumb component
      */
     OnBreadcrumbDrop(event) {
-        const droppedIds = new Set(event.DashboardIds.map(id => NormalizeUUID(id)));
-        const dashboards = this.Dashboards.filter(d => droppedIds.has(NormalizeUUID(d.ID)));
+        const dashboards = FilterByUUIDs(this.Dashboards, event.DashboardIds);
         if (dashboards.length > 0) {
             this.DashboardMove.emit({
                 Dashboards: dashboards,
@@ -1545,6 +1522,10 @@ export class DashboardBrowserComponent {
     // ========================================
     // Private Methods
     // ========================================
+    /** The folder new dashboards and categories go into: the selected one, or the root in flat mode. */
+    get folderIdForNewItems() {
+        return this._flatMode ? null : this.SelectedCategoryId;
+    }
     applyFilters() {
         let filtered = [...this._dashboards];
         // Filter out non-Config dashboards (Code and Dynamic Code types are not viewable/editable in browser)
@@ -1555,16 +1536,18 @@ export class DashboardBrowserComponent {
             filtered = filtered.filter(d => d.Name.toLowerCase().includes(search) ||
                 (d.Description || '').toLowerCase().includes(search));
         }
-        // Filter by current folder (category)
+        // Filter by current folder (category); flat mode skips this and shows every dashboard
         // When at root (null), show only uncategorized dashboards
         // When in a category, show only dashboards directly in that category
         // Uses effective category (from EffectiveCategoryMap) for shared dashboards
-        if (this._selectedCategoryId) {
-            filtered = filtered.filter(d => this.GetEffectiveCategoryId(d) === this._selectedCategoryId);
-        }
-        else {
-            // At root level, show only uncategorized dashboards (effective CategoryID is null or empty)
-            filtered = filtered.filter(d => !this.GetEffectiveCategoryId(d));
+        if (!this._flatMode) {
+            if (this._selectedCategoryId) {
+                filtered = filtered.filter(d => this.GetEffectiveCategoryId(d) === this._selectedCategoryId);
+            }
+            else {
+                // At root level, show only uncategorized dashboards (effective CategoryID is null or empty)
+                filtered = filtered.filter(d => !this.GetEffectiveCategoryId(d));
+            }
         }
         this.FilteredDashboards = filtered;
         this.updateChildCategories();
@@ -1575,9 +1558,12 @@ export class DashboardBrowserComponent {
      * Update the list of child categories for the current folder
      */
     updateChildCategories() {
-        // Find categories that are children of the current category
+        // Find categories that are children of the current category (none in flat mode)
         // Handle both null and undefined ParentID for root-level categories
-        if (this._selectedCategoryId) {
+        if (this._flatMode) {
+            this.ChildCategories = [];
+        }
+        else if (this._selectedCategoryId) {
             this.ChildCategories = this.Categories.filter(c => UUIDsEqual(c.ParentID, this._selectedCategoryId));
         }
         else {
@@ -1599,7 +1585,7 @@ export class DashboardBrowserComponent {
      */
     updateBreadcrumbs() {
         this.Breadcrumbs = [];
-        if (!this._selectedCategoryId)
+        if (!this._selectedCategoryId || this._flatMode)
             return;
         // Build the path from current category to root
         const path = [];
@@ -1639,8 +1625,8 @@ export class DashboardBrowserComponent {
             this.SelectedIds.add(this.FilteredDashboards[i].ID);
         }
     }
-    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, "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) {
+    static ɵfac = function DashboardBrowserComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DashboardBrowserComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.MJConfirmService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DashboardBrowserComponent, selectors: [["mj-dashboard-browser"]], inputs: { Dashboards: "Dashboards", Categories: "Categories", SelectedCategoryId: "SelectedCategoryId", FlatMode: "FlatMode", ViewMode: "ViewMode", IsLoading: "IsLoading", ShowCreateButton: "ShowCreateButton", AllowMultiSelect: "AllowMultiSelect", AllowDragDrop: "AllowDragDrop", Title: "Title", IconClass: "IconClass", DashboardPermissions: "DashboardPermissions", EffectiveCategoryMap: "EffectiveCategoryMap", FavoriteIds: "FavoriteIds", ShowFavorites: "ShowFavorites", OwnerLabels: "OwnerLabels", FlatEmptyIcon: "FlatEmptyIcon", FlatEmptyTitle: "FlatEmptyTitle", FlatEmptyMessage: "FlatEmptyMessage", FlatEmptyWelcome: "FlatEmptyWelcome" }, outputs: { DashboardOpen: "DashboardOpen", DashboardEdit: "DashboardEdit", DashboardDelete: "DashboardDelete", DashboardMove: "DashboardMove", DashboardCreate: "DashboardCreate", CategoryCreate: "CategoryCreate", CategoryDelete: "CategoryDelete", CategoryChange: "CategoryChange", ViewModeChange: "ViewModeChange", ViewPreferenceChange: "ViewPreferenceChange", DashboardFavoriteToggle: "DashboardFavoriteToggle" }, standalone: false, decls: 28, vars: 26, 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"], [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-host", 3, "dragging", "draggable", "Dashboard", "IsFavorite", "ShowFavorite", "IsShared", "OwnerLabel", "CategoryPath", "HighlightQuery", "Selectable", "Selected", "CanEdit", "CanDelete"], [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-host", 3, "CardClick", "CardDoubleClick", "ToggleFavorite", "SelectionToggle", "Edit", "Delete", "dragstart", "dragend", "draggable", "Dashboard", "IsFavorite", "ShowFavorite", "IsShared", "OwnerLabel", "CategoryPath", "HighlightQuery", "Selectable", "Selected", "CanEdit", "CanDelete"], [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"], ["title", "Shared with you", 1, "shared-badge"], ["title", "Edit", 1, "action-btn"], ["title", "Delete", 1, "action-btn", "danger"], [1, "list-col", "checkbox-col", 3, "click"], ["type", "checkbox", 3, "change", "checked"], [1, "fa-solid", "fa-share-nodes"], ["title", "Edit", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-edit"], ["title", "Delete", 1, "action-btn", "danger", 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", "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"], [1, "dashboard-empty", 3, "Icon", "Title", "Message"], ["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", "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();
@@ -1672,19 +1658,16 @@ 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, 4, 4);
+            i0.ɵɵconditionalCreate(23, DashboardBrowserComponent_Conditional_23_Template, 4, 3);
             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", 23);
-            i0.ɵɵconditionalCreate(27, DashboardBrowserComponent_Conditional_27_Template, 23, 3, "div", 24);
-            i0.ɵɵconditionalCreate(28, DashboardBrowserComponent_Conditional_28_Template, 15, 2, "div", 25);
+            i0.ɵɵconditionalCreate(25, DashboardBrowserComponent_Conditional_25_Template, 19, 2, "div", 22);
+            i0.ɵɵconditionalCreate(26, DashboardBrowserComponent_Conditional_26_Template, 23, 3, "div", 23);
+            i0.ɵɵconditionalCreate(27, DashboardBrowserComponent_Conditional_27_Template, 15, 2, "div", 24);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵclassProp("loading", ctx.IsLoading);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("Categories", ctx.Categories)("CurrentCategoryId", ctx.SelectedCategoryId)("RootIcon", ctx.IconClass)("RootLabel", ctx.Title)("AllowDragDrop", ctx.AllowDragDrop && (ctx.DraggingId !== null || ctx.IsSelectionMode));
+            i0.ɵɵproperty("Categories", ctx.Categories)("CurrentCategoryId", ctx.FlatMode ? null : ctx.SelectedCategoryId)("RootIcon", ctx.IconClass)("RootLabel", ctx.Title)("AllowDragDrop", ctx.AllowDragDrop && (ctx.DraggingId !== null || ctx.IsSelectionMode));
             i0.ɵɵadvance(3);
             i0.ɵɵtextInterpolate1("", ctx.FilteredDashboards.length, " dashboards");
             i0.ɵɵadvance(2);
@@ -1714,24 +1697,24 @@ export class DashboardBrowserComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.DraggingId && ctx.Categories.length > 0 ? 24 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("title", i0.ɵɵinterpolate1("Delete Dashboard", ctx.DashboardsPendingDelete.length > 1 ? "s" : ""))("visible", ctx.ShowDeleteConfirm)("message", ctx.DashboardsPendingDelete.length === 1 ? "Are you sure you want to delete '" + ctx.DashboardsPendingDelete[0].Name + "'? This action cannot be undone." : "Are you sure you want to delete " + ctx.DashboardsPendingDelete.length + " dashboards? This action cannot be undone.");
+            i0.ɵɵconditional(ctx.ShowMoveDialog ? 25 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.ShowMoveDialog ? 26 : -1);
+            i0.ɵɵconditional(ctx.ShowCreateCategoryDialog ? 26 : -1);
             i0.ɵɵadvance();
-            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.MJEmptyStateComponent, i4.DashboardBreadcrumbComponent, i5.ConfirmDialogComponent], styles: ["\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.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.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.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.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.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.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.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.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.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.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.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.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.dashboard-empty[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 400px;\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.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.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.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.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.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.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.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\nmark[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n    color: inherit;\n    padding: 0 2px;\n    border-radius: 2px;\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 });
+            i0.ɵɵconditional(ctx.ShowDeleteCategoryConfirm ? 27 : -1);
+        } }, dependencies: [i2.DefaultValueAccessor, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.LoadingComponent, i1.MJEmptyStateComponent, i4.DashboardBreadcrumbComponent, i5.DashboardCardComponent], styles: ["\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.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.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.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.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.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.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.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.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.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\n.dashboard-card[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-lg);\n    box-shadow: var(--mj-shadow-sm);\n    cursor: pointer;\n    transition:\n        border-color var(--mj-transition-fast),\n        box-shadow var(--mj-transition-fast),\n        transform var(--mj-transition-fast);\n    position: relative;\n}\n\n.dashboard-card[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-border-strong);\n    box-shadow: var(--mj-shadow-md);\n    transform: translateY(-2px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .dashboard-card[_ngcontent-%COMP%] {\n        transition: none;\n    }\n\n    .dashboard-card[_ngcontent-%COMP%]:hover {\n        transform: none;\n    }\n}\n\n\n.dashboard-card-host.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.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.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.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: var(--mj-shadow-sm);\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.dashboard-empty[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 400px;\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.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.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.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.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.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.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.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\n\n[_nghost-%COMP%]     mark {\n    background: color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n    color: inherit;\n    border-radius: 2px;\n    padding: 0 1px;\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    <!-- 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: [{
+        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]=\"FlatMode ? null : 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        <mj-dashboard-card\n          class=\"dashboard-card-host\"\n          [class.dragging]=\"DraggingId === dashboard.ID\"\n          [draggable]=\"AllowDragDrop\"\n          [Dashboard]=\"dashboard\"\n          [IsFavorite]=\"IsFavorite(dashboard.ID)\"\n          [ShowFavorite]=\"ShowFavorites\"\n          [IsShared]=\"IsShared(dashboard.ID)\"\n          [OwnerLabel]=\"OwnerLabel(dashboard)\"\n          [CategoryPath]=\"CardCategoryPath(dashboard)\"\n          [HighlightQuery]=\"SearchText\"\n          [Selectable]=\"IsSelectionMode\"\n          [Selected]=\"IsSelected(dashboard.ID)\"\n          [CanEdit]=\"CanEdit(dashboard.ID)\"\n          [CanDelete]=\"CanDelete(dashboard.ID)\"\n          (CardClick)=\"OnDashboardClick(dashboard, $event.MouseEvent)\"\n          (CardDoubleClick)=\"OnDashboardDoubleClick(dashboard, $event.MouseEvent)\"\n          (ToggleFavorite)=\"OnToggleFavorite(dashboard)\"\n          (SelectionToggle)=\"ToggleSelection(dashboard.ID)\"\n          (Edit)=\"OnEditDashboard(dashboard)\"\n          (Delete)=\"OnDeleteDashboard(dashboard)\"\n          (dragstart)=\"OnDragStart(dashboard, $event)\"\n          (dragend)=\"OnDragEnd()\">\n        </mj-dashboard-card>\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, or a flat list whose host asks for it -->\n    @if (ShowWelcome) {\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    @if (FlatMode) {\n      <!-- Flat list has nothing to show: the host's empty state -->\n      @if (!SearchText && !FlatEmptyWelcome) {\n        <mj-empty-state\n          class=\"dashboard-empty\"\n          [Icon]=\"FlatEmptyIcon\"\n          [Title]=\"FlatEmptyTitle\"\n          [Message]=\"FlatEmptyMessage\" />\n      }\n    } @else {\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    }\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  <!-- 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/* Folder cards: the same frame as the dashboard cards (mj-dashboard-card) */\n.dashboard-card {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-lg);\n    box-shadow: var(--mj-shadow-sm);\n    cursor: pointer;\n    transition:\n        border-color var(--mj-transition-fast),\n        box-shadow var(--mj-transition-fast),\n        transform var(--mj-transition-fast);\n    position: relative;\n}\n\n.dashboard-card:hover {\n    border-color: var(--mj-border-strong);\n    box-shadow: var(--mj-shadow-md);\n    transform: translateY(-2px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .dashboard-card {\n        transition: none;\n    }\n\n    .dashboard-card:hover {\n        transform: none;\n    }\n}\n\n/* A dashboard card being dragged */\n.dashboard-card-host.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.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: var(--mj-shadow-sm);\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 in folder cards and list rows. The marks come from innerHTML and get no\n   _ngcontent attribute, so they are reached through ::ng-deep under the host; the dashboard card\n   styles its own marks the same way. */\n:host ::ng-deep mark {\n    background: color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n    color: inherit;\n    border-radius: 2px;\n    padding: 0 1px;\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 }, { type: i1.MJConfirmService }], { Dashboards: [{
             type: Input
         }], Categories: [{
             type: Input
         }], SelectedCategoryId: [{
             type: Input
+        }], FlatMode: [{
+            type: Input
         }], ViewMode: [{
             type: Input
         }], IsLoading: [{
@@ -1750,6 +1733,20 @@ export class DashboardBrowserComponent {
             type: Input
         }], EffectiveCategoryMap: [{
             type: Input
+        }], FavoriteIds: [{
+            type: Input
+        }], ShowFavorites: [{
+            type: Input
+        }], OwnerLabels: [{
+            type: Input
+        }], FlatEmptyIcon: [{
+            type: Input
+        }], FlatEmptyTitle: [{
+            type: Input
+        }], FlatEmptyMessage: [{
+            type: Input
+        }], FlatEmptyWelcome: [{
+            type: Input
         }], DashboardOpen: [{
             type: Output
         }], DashboardEdit: [{
@@ -1770,6 +1767,8 @@ export class DashboardBrowserComponent {
             type: Output
         }], ViewPreferenceChange: [{
             type: Output
+        }], DashboardFavoriteToggle: [{
+            type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DashboardBrowserComponent, { className: "DashboardBrowserComponent", filePath: "src/lib/dashboard-browser/dashboard-browser.component.ts", lineNumber: 114 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DashboardBrowserComponent, { className: "DashboardBrowserComponent", filePath: "src/lib/dashboard-browser/dashboard-browser.component.ts", lineNumber: 135 }); })();
 //# sourceMappingURL=dashboard-browser.component.js.map