@memberjunction/ng-dashboards 6.2.0-edge.6 → 6.2.0-edge.8

package/dist/QueryBrowser/query-browser-resource.component.js

@@ -7,10 +7,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var QueryBrowserResourceComponent_1;
 import { Component, ChangeDetectionStrategy, HostListener, ViewChild } from '@angular/core';
 import { Subject } from 'rxjs';
-import { GroupByUUID, RegisterClass, UUIDsEqual } from '@memberjunction/global';
+import { GroupByUUID, IndexByUUID, RegisterClass, UUIDSet, UUIDsEqual } from '@memberjunction/global';
 import { BaseResourceComponent } from '@memberjunction/ng-shared';
 import { CompositeKey, RunQuery } from '@memberjunction/core';
-import { UserInfoEngine, QueryEngine } from '@memberjunction/core-entities';
+import { UserInfoEngine, QueryEngine, ParseQuerySaveMessage } from '@memberjunction/core-entities';
 import { ValidateStringParam, BoundNameList } from '../shared/agent-tool-validation';
 import { DEFAULT_QUERY_MAX_ROWS, QUERY_MAX_ROWS_HARD_CAP, DEFAULT_QUERY_PAGE_SIZE, NormalizeMaxRows, ComputePaging, BoundResultRows, NormalizeQueryParameters, ResolveTotalRowCount, } from './query-execution-helpers';
 import * as i0 from "@angular/core";
@@ -25,95 +25,102 @@ const _c0 = ["drawerSqlEditor"];
 const _c1 = a0 => ({ node: a0 });
 function QueryBrowserResourceComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 33);
+    i0.ɵɵelementStart(0, "button", 35);
     i0.ɵɵlistener("click", function QueryBrowserResourceComponent_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OpenCreateDrawer()); });
-    i0.ɵɵelement(1, "i", 34);
+    i0.ɵɵelement(1, "i", 36);
     i0.ɵɵelementEnd();
 } }
-function QueryBrowserResourceComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+function QueryBrowserResourceComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 35);
-    i0.ɵɵlistener("click", function QueryBrowserResourceComponent_Conditional_21_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.clearSearch()); });
-    i0.ɵɵelement(1, "i", 36);
+    i0.ɵɵelementStart(0, "button", 37);
+    i0.ɵɵlistener("click", function QueryBrowserResourceComponent_Conditional_17_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OpenRefreshForAll()); });
+    i0.ɵɵelement(1, "i", 38);
     i0.ɵɵelementEnd();
 } }
-function QueryBrowserResourceComponent_For_24_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function QueryBrowserResourceComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 38);
-    i0.ɵɵlistener("click", function QueryBrowserResourceComponent_For_24_Conditional_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const status_r5 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleStatusFilter(status_r5)); });
-    i0.ɵɵelement(1, "i", 39);
+    i0.ɵɵelementStart(0, "button", 39);
+    i0.ɵɵlistener("click", function QueryBrowserResourceComponent_Conditional_22_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.clearSearch()); });
+    i0.ɵɵelement(1, "i", 40);
+    i0.ɵɵelementEnd();
+} }
+function QueryBrowserResourceComponent_For_25_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 42);
+    i0.ɵɵlistener("click", function QueryBrowserResourceComponent_For_25_Conditional_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const status_r6 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleStatusFilter(status_r6)); });
+    i0.ɵɵelement(1, "i", 43);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 40);
+    i0.ɵɵelementStart(4, "span", 44);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const status_r5 = i0.ɵɵnextContext().$implicit;
+    const status_r6 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵstyleProp("--chip-color", ctx_r1.getStatusColor(status_r5));
-    i0.ɵɵclassProp("active", ctx_r1.StatusFilters[status_r5]);
-    i0.ɵɵproperty("title", (ctx_r1.StatusFilters[status_r5] ? "Hide" : "Show") + " " + status_r5 + " queries");
+    i0.ɵɵstyleProp("--chip-color", ctx_r1.getStatusColor(status_r6));
+    i0.ɵɵclassProp("active", ctx_r1.StatusFilters[status_r6]);
+    i0.ɵɵproperty("title", (ctx_r1.StatusFilters[status_r6] ? "Hide" : "Show") + " " + status_r6 + " queries");
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.getStatusIcon(status_r5));
+    i0.ɵɵclassMap(ctx_r1.getStatusIcon(status_r6));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(status_r5);
+    i0.ɵɵtextInterpolate(status_r6);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.getStatusCount(status_r5));
+    i0.ɵɵtextInterpolate(ctx_r1.getStatusCount(status_r6));
 } }
-function QueryBrowserResourceComponent_For_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, QueryBrowserResourceComponent_For_24_Conditional_0_Template, 6, 9, "button", 37);
+function QueryBrowserResourceComponent_For_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, QueryBrowserResourceComponent_For_25_Conditional_0_Template, 6, 9, "button", 41);
 } if (rf & 2) {
-    const status_r5 = ctx.$implicit;
+    const status_r6 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵconditional(ctx_r1.getStatusCount(status_r5) > 0 ? 0 : -1);
-} }
-function QueryBrowserResourceComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 23);
-    i0.ɵɵelement(1, "mj-loading", 41);
-    i0.ɵɵelementEnd();
+    i0.ɵɵconditional(ctx_r1.getStatusCount(status_r6) > 0 ? 0 : -1);
 } }
 function QueryBrowserResourceComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 24);
+    i0.ɵɵelementStart(0, "div", 24);
+    i0.ɵɵelement(1, "mj-loading", 45);
+    i0.ɵɵelementEnd();
 } }
 function QueryBrowserResourceComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "mj-empty-state", 25);
+} }
+function QueryBrowserResourceComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 26);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("Message", ctx_r1.NoQueryResultsMessage);
 } }
-function QueryBrowserResourceComponent_Conditional_29_For_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+function QueryBrowserResourceComponent_Conditional_30_For_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function QueryBrowserResourceComponent_Conditional_29_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, QueryBrowserResourceComponent_Conditional_29_For_2_ng_container_0_Template, 1, 0, "ng-container", 42);
+function QueryBrowserResourceComponent_Conditional_30_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, QueryBrowserResourceComponent_Conditional_30_For_2_ng_container_0_Template, 1, 0, "ng-container", 46);
 } if (rf & 2) {
-    const node_r6 = ctx.$implicit;
+    const node_r7 = ctx.$implicit;
     i0.ɵɵnextContext(2);
-    const categoryNode_r7 = i0.ɵɵreference(36);
-    i0.ɵɵproperty("ngTemplateOutlet", categoryNode_r7)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c1, node_r6));
+    const categoryNode_r8 = i0.ɵɵreference(37);
+    i0.ɵɵproperty("ngTemplateOutlet", categoryNode_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c1, node_r7));
 } }
-function QueryBrowserResourceComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26);
-    i0.ɵɵrepeaterCreate(1, QueryBrowserResourceComponent_Conditional_29_For_2_Template, 1, 4, "ng-container", null, i0.ɵɵcomponentInstance().trackByCategory, true);
+function QueryBrowserResourceComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵrepeaterCreate(1, QueryBrowserResourceComponent_Conditional_30_For_2_Template, 1, 4, "ng-container", null, i0.ɵɵcomponentInstance().trackByCategory, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.categoryTree);
 } }
-function QueryBrowserResourceComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-empty-state", 43);
-    i0.ɵɵlistener("Action", function QueryBrowserResourceComponent_Conditional_33_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OpenCreateDrawer()); });
+function QueryBrowserResourceComponent_Conditional_34_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-empty-state", 47);
+    i0.ɵɵlistener("Action", function QueryBrowserResourceComponent_Conditional_34_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OpenCreateDrawer()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ActionText", ctx_r1.CanCreateQuery ? "New Query" : "");
 } }
-function QueryBrowserResourceComponent_Conditional_34_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 52);
-    i0.ɵɵelement(1, "i", 39);
+function QueryBrowserResourceComponent_Conditional_35_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 55);
+    i0.ɵɵelement(1, "i", 43);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -124,35 +131,39 @@ function QueryBrowserResourceComponent_Conditional_34_Conditional_6_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.selectedQuery.Status, " ");
 } }
-function QueryBrowserResourceComponent_Conditional_34_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 53);
-    i0.ɵɵelement(1, "i", 54);
+function QueryBrowserResourceComponent_Conditional_35_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 56);
+    i0.ɵɵelement(1, "i", 57);
     i0.ɵɵtext(2, " Approved ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵstyleProp("background", ctx_r1.getStatusColor("Approved"));
 } }
-function QueryBrowserResourceComponent_Conditional_34_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 55);
-    i0.ɵɵlistener("click", function QueryBrowserResourceComponent_Conditional_34_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OpenEditDrawer(ctx_r1.selectedQuery)); });
-    i0.ɵɵelement(1, "i", 56);
+function QueryBrowserResourceComponent_Conditional_35_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 58);
+    i0.ɵɵlistener("click", function QueryBrowserResourceComponent_Conditional_35_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OpenRefreshForQuery(ctx_r1.selectedQuery)); });
+    i0.ɵɵelement(1, "i", 38);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "button", 59);
+    i0.ɵɵlistener("click", function QueryBrowserResourceComponent_Conditional_35_Conditional_8_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OpenEditDrawer(ctx_r1.selectedQuery)); });
+    i0.ɵɵelement(3, "i", 60);
     i0.ɵɵelementEnd();
 } }
-function QueryBrowserResourceComponent_Conditional_34_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 44)(1, "div", 45);
-    i0.ɵɵelement(2, "i", 46);
+function QueryBrowserResourceComponent_Conditional_35_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 48)(1, "div", 49);
+    i0.ɵɵelement(2, "i", 50);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 47);
-    i0.ɵɵconditionalCreate(6, QueryBrowserResourceComponent_Conditional_34_Conditional_6_Template, 3, 5, "span", 48)(7, QueryBrowserResourceComponent_Conditional_34_Conditional_7_Template, 3, 2, "span", 49);
-    i0.ɵɵconditionalCreate(8, QueryBrowserResourceComponent_Conditional_34_Conditional_8_Template, 2, 0, "button", 50);
+    i0.ɵɵelementStart(5, "div", 51);
+    i0.ɵɵconditionalCreate(6, QueryBrowserResourceComponent_Conditional_35_Conditional_6_Template, 3, 5, "span", 52)(7, QueryBrowserResourceComponent_Conditional_35_Conditional_7_Template, 3, 2, "span", 53);
+    i0.ɵɵconditionalCreate(8, QueryBrowserResourceComponent_Conditional_35_Conditional_8_Template, 4, 0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "mj-query-viewer", 51);
-    i0.ɵɵlistener("EntityLinkClick", function QueryBrowserResourceComponent_Conditional_34_Template_mj_query_viewer_EntityLinkClick_9_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onEntityLinkClick($event)); })("RowDoubleClick", function QueryBrowserResourceComponent_Conditional_34_Template_mj_query_viewer_RowDoubleClick_9_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRowDoubleClick($event)); })("OpenQueryRecord", function QueryBrowserResourceComponent_Conditional_34_Template_mj_query_viewer_OpenQueryRecord_9_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOpenQueryRecord($event)); })("CompositionTokenClick", function QueryBrowserResourceComponent_Conditional_34_Template_mj_query_viewer_CompositionTokenClick_9_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCompositionTokenClick($event)); })("QueryComplete", function QueryBrowserResourceComponent_Conditional_34_Template_mj_query_viewer_QueryComplete_9_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewerQueryComplete($event)); });
+    i0.ɵɵelementStart(9, "mj-query-viewer", 54);
+    i0.ɵɵlistener("EntityLinkClick", function QueryBrowserResourceComponent_Conditional_35_Template_mj_query_viewer_EntityLinkClick_9_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onEntityLinkClick($event)); })("RowDoubleClick", function QueryBrowserResourceComponent_Conditional_35_Template_mj_query_viewer_RowDoubleClick_9_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRowDoubleClick($event)); })("OpenQueryRecord", function QueryBrowserResourceComponent_Conditional_35_Template_mj_query_viewer_OpenQueryRecord_9_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOpenQueryRecord($event)); })("CompositionTokenClick", function QueryBrowserResourceComponent_Conditional_35_Template_mj_query_viewer_CompositionTokenClick_9_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCompositionTokenClick($event)); })("QueryComplete", function QueryBrowserResourceComponent_Conditional_35_Template_mj_query_viewer_QueryComplete_9_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewerQueryComplete($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -165,158 +176,172 @@ function QueryBrowserResourceComponent_Conditional_34_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵproperty("QueryId", ctx_r1.selectedQuery.ID)("AutoRun", true)("SelectionMode", "multiple");
 } }
-function QueryBrowserResourceComponent_ng_template_35_Conditional_0_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 66);
-    i0.ɵɵlistener("click", function QueryBrowserResourceComponent_ng_template_35_Conditional_0_Conditional_8_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r13); const node_r12 = i0.ɵɵnextContext(2).node; const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.OpenCreateDrawer(node_r12.category.ID); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(1, "i", 34);
+function QueryBrowserResourceComponent_ng_template_36_Conditional_0_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 71);
+    i0.ɵɵlistener("click", function QueryBrowserResourceComponent_ng_template_36_Conditional_0_Conditional_8_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r14); const node_r13 = i0.ɵɵnextContext(2).node; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OpenRefreshForCategory(node_r13, $event)); });
+    i0.ɵɵelement(1, "i", 38);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const node_r12 = i0.ɵɵnextContext(2).node;
-    i0.ɵɵproperty("title", i0.ɵɵinterpolate1("New query in ", node_r12.category.Name));
+    const node_r13 = i0.ɵɵnextContext(2).node;
+    i0.ɵɵproperty("title", "Refresh the metadata of the queries in " + node_r13.category.Name + " (dry run first)");
+    i0.ɵɵattribute("aria-label", "Refresh the metadata of the queries in " + node_r13.category.Name);
 } }
-function QueryBrowserResourceComponent_ng_template_35_Conditional_0_Conditional_9_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 73);
+function QueryBrowserResourceComponent_ng_template_36_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 72);
+    i0.ɵɵlistener("click", function QueryBrowserResourceComponent_ng_template_36_Conditional_0_Conditional_9_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r15); const node_r13 = i0.ɵɵnextContext(2).node; const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.OpenCreateDrawer(node_r13.category.ID); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(1, "i", 36);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const node_r13 = i0.ɵɵnextContext(2).node;
+    i0.ɵɵproperty("title", i0.ɵɵinterpolate1("New query in ", node_r13.category.Name));
+} }
+function QueryBrowserResourceComponent_ng_template_36_Conditional_0_Conditional_10_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 79);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const query_r15 = i0.ɵɵnextContext().$implicit;
+    const query_r17 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(query_r15.Description);
+    i0.ɵɵtextInterpolate(query_r17.Description);
 } }
-function QueryBrowserResourceComponent_ng_template_35_Conditional_0_Conditional_9_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 74);
+function QueryBrowserResourceComponent_ng_template_36_Conditional_0_Conditional_10_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 80);
 } }
-function QueryBrowserResourceComponent_ng_template_35_Conditional_0_Conditional_9_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 77);
+function QueryBrowserResourceComponent_ng_template_36_Conditional_0_Conditional_10_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 83);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const query_r15 = i0.ɵɵnextContext().$implicit;
+    const query_r17 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵstyleProp("background", ctx_r1.getStatusColor(query_r15.Status));
-    i0.ɵɵproperty("title", query_r15.Status);
+    i0.ɵɵstyleProp("background", ctx_r1.getStatusColor(query_r17.Status));
+    i0.ɵɵproperty("title", query_r17.Status);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", query_r15.Status, " ");
+    i0.ɵɵtextInterpolate1(" ", query_r17.Status, " ");
 } }
-function QueryBrowserResourceComponent_ng_template_35_Conditional_0_Conditional_9_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 78);
-    i0.ɵɵlistener("click", function QueryBrowserResourceComponent_ng_template_35_Conditional_0_Conditional_9_For_2_Conditional_9_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r16); const query_r15 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OpenEditDrawer(query_r15, $event)); });
-    i0.ɵɵelement(1, "i", 56);
+function QueryBrowserResourceComponent_ng_template_36_Conditional_0_Conditional_10_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 84);
+    i0.ɵɵlistener("click", function QueryBrowserResourceComponent_ng_template_36_Conditional_0_Conditional_10_For_2_Conditional_9_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r18); const query_r17 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OpenEditDrawer(query_r17, $event)); });
+    i0.ɵɵelement(1, "i", 60);
     i0.ɵɵelementEnd();
 } }
-function QueryBrowserResourceComponent_ng_template_35_Conditional_0_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 68);
-    i0.ɵɵlistener("click", function QueryBrowserResourceComponent_ng_template_35_Conditional_0_Conditional_9_For_2_Template_div_click_0_listener($event) { const query_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.selectQuery(query_r15, $event)); });
-    i0.ɵɵelement(1, "span", 69)(2, "i", 70);
-    i0.ɵɵelementStart(3, "div", 71)(4, "span", 72);
+function QueryBrowserResourceComponent_ng_template_36_Conditional_0_Conditional_10_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 74);
+    i0.ɵɵlistener("click", function QueryBrowserResourceComponent_ng_template_36_Conditional_0_Conditional_10_For_2_Template_div_click_0_listener($event) { const query_r17 = i0.ɵɵrestoreView(_r16).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.selectQuery(query_r17, $event)); });
+    i0.ɵɵelement(1, "span", 75)(2, "i", 76);
+    i0.ɵɵelementStart(3, "div", 77)(4, "span", 78);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, QueryBrowserResourceComponent_ng_template_35_Conditional_0_Conditional_9_For_2_Conditional_6_Template, 2, 1, "span", 73);
+    i0.ɵɵconditionalCreate(6, QueryBrowserResourceComponent_ng_template_36_Conditional_0_Conditional_10_For_2_Conditional_6_Template, 2, 1, "span", 79);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(7, QueryBrowserResourceComponent_ng_template_35_Conditional_0_Conditional_9_For_2_Conditional_7_Template, 1, 0, "i", 74);
-    i0.ɵɵconditionalCreate(8, QueryBrowserResourceComponent_ng_template_35_Conditional_0_Conditional_9_For_2_Conditional_8_Template, 2, 4, "span", 75);
-    i0.ɵɵconditionalCreate(9, QueryBrowserResourceComponent_ng_template_35_Conditional_0_Conditional_9_For_2_Conditional_9_Template, 2, 0, "button", 76);
+    i0.ɵɵconditionalCreate(7, QueryBrowserResourceComponent_ng_template_36_Conditional_0_Conditional_10_For_2_Conditional_7_Template, 1, 0, "i", 80);
+    i0.ɵɵconditionalCreate(8, QueryBrowserResourceComponent_ng_template_36_Conditional_0_Conditional_10_For_2_Conditional_8_Template, 2, 4, "span", 81);
+    i0.ɵɵconditionalCreate(9, QueryBrowserResourceComponent_ng_template_36_Conditional_0_Conditional_10_For_2_Conditional_9_Template, 2, 0, "button", 82);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const query_r15 = ctx.$implicit;
+    const query_r17 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵclassProp("selected", ctx_r1.IsQuerySelected(query_r15))("hidden", !ctx_r1.isQueryVisible(query_r15));
+    i0.ɵɵclassProp("selected", ctx_r1.IsQuerySelected(query_r17))("hidden", !ctx_r1.isQueryVisible(query_r17));
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("background", ctx_r1.getStatusColor(query_r15.Status));
-    i0.ɵɵproperty("title", query_r15.Status);
+    i0.ɵɵstyleProp("background", ctx_r1.getStatusColor(query_r17.Status));
+    i0.ɵɵproperty("title", query_r17.Status);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("title", query_r15.Description || query_r15.Name);
+    i0.ɵɵproperty("title", query_r17.Description || query_r17.Name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(query_r15.Name);
+    i0.ɵɵtextInterpolate(query_r17.Name);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(query_r15.Description ? 6 : -1);
+    i0.ɵɵconditional(query_r17.Description ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(query_r15.UsesTemplate ? 7 : -1);
+    i0.ɵɵconditional(query_r17.UsesTemplate ? 7 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(query_r15.Status !== "Approved" ? 8 : -1);
+    i0.ɵɵconditional(query_r17.Status !== "Approved" ? 8 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.CanEditQuery ? 9 : -1);
 } }
-function QueryBrowserResourceComponent_ng_template_35_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 65);
-    i0.ɵɵrepeaterCreate(1, QueryBrowserResourceComponent_ng_template_35_Conditional_0_Conditional_9_For_2_Template, 10, 13, "div", 67, i0.ɵɵcomponentInstance().trackByQuery, true);
+function QueryBrowserResourceComponent_ng_template_36_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 70);
+    i0.ɵɵrepeaterCreate(1, QueryBrowserResourceComponent_ng_template_36_Conditional_0_Conditional_10_For_2_Template, 10, 13, "div", 73, i0.ɵɵcomponentInstance().trackByQuery, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const node_r12 = i0.ɵɵnextContext(2).node;
+    const node_r13 = i0.ɵɵnextContext(2).node;
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(node_r12.queries);
+    i0.ɵɵrepeater(node_r13.queries);
 } }
-function QueryBrowserResourceComponent_ng_template_35_Conditional_0_Conditional_10_For_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+function QueryBrowserResourceComponent_ng_template_36_Conditional_0_Conditional_11_For_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function QueryBrowserResourceComponent_ng_template_35_Conditional_0_Conditional_10_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, QueryBrowserResourceComponent_ng_template_35_Conditional_0_Conditional_10_For_1_ng_container_0_Template, 1, 0, "ng-container", 42);
+function QueryBrowserResourceComponent_ng_template_36_Conditional_0_Conditional_11_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, QueryBrowserResourceComponent_ng_template_36_Conditional_0_Conditional_11_For_1_ng_container_0_Template, 1, 0, "ng-container", 46);
 } if (rf & 2) {
-    const child_r17 = ctx.$implicit;
+    const child_r19 = ctx.$implicit;
     i0.ɵɵnextContext(4);
-    const categoryNode_r7 = i0.ɵɵreference(36);
-    i0.ɵɵproperty("ngTemplateOutlet", categoryNode_r7)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c1, child_r17));
+    const categoryNode_r8 = i0.ɵɵreference(37);
+    i0.ɵɵproperty("ngTemplateOutlet", categoryNode_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c1, child_r19));
 } }
-function QueryBrowserResourceComponent_ng_template_35_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, QueryBrowserResourceComponent_ng_template_35_Conditional_0_Conditional_10_For_1_Template, 1, 4, "ng-container", null, i0.ɵɵcomponentInstance().trackByCategory, true);
+function QueryBrowserResourceComponent_ng_template_36_Conditional_0_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, QueryBrowserResourceComponent_ng_template_36_Conditional_0_Conditional_11_For_1_Template, 1, 4, "ng-container", null, i0.ɵɵcomponentInstance().trackByCategory, true);
 } if (rf & 2) {
-    const node_r12 = i0.ɵɵnextContext(2).node;
-    i0.ɵɵrepeater(node_r12.children);
+    const node_r13 = i0.ɵɵnextContext(2).node;
+    i0.ɵɵrepeater(node_r13.children);
 } }
-function QueryBrowserResourceComponent_ng_template_35_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 58)(1, "div", 59);
-    i0.ɵɵlistener("click", function QueryBrowserResourceComponent_ng_template_35_Conditional_0_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r11); const node_r12 = i0.ɵɵnextContext().node; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleExpand(node_r12)); });
-    i0.ɵɵelement(2, "i", 60)(3, "i", 61);
-    i0.ɵɵelementStart(4, "span", 62);
+function QueryBrowserResourceComponent_ng_template_36_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 62)(1, "div", 63);
+    i0.ɵɵlistener("click", function QueryBrowserResourceComponent_ng_template_36_Conditional_0_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r12); const node_r13 = i0.ɵɵnextContext().node; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleExpand(node_r13)); });
+    i0.ɵɵelement(2, "i", 64)(3, "i", 65);
+    i0.ɵɵelementStart(4, "span", 66);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 63);
+    i0.ɵɵelementStart(6, "span", 67);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(8, QueryBrowserResourceComponent_ng_template_35_Conditional_0_Conditional_8_Template, 2, 2, "button", 64);
+    i0.ɵɵconditionalCreate(8, QueryBrowserResourceComponent_ng_template_36_Conditional_0_Conditional_8_Template, 2, 2, "button", 68);
+    i0.ɵɵconditionalCreate(9, QueryBrowserResourceComponent_ng_template_36_Conditional_0_Conditional_9_Template, 2, 2, "button", 69);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(9, QueryBrowserResourceComponent_ng_template_35_Conditional_0_Conditional_9_Template, 3, 0, "div", 65);
-    i0.ɵɵconditionalCreate(10, QueryBrowserResourceComponent_ng_template_35_Conditional_0_Conditional_10_Template, 2, 0);
+    i0.ɵɵconditionalCreate(10, QueryBrowserResourceComponent_ng_template_36_Conditional_0_Conditional_10_Template, 3, 0, "div", 70);
+    i0.ɵɵconditionalCreate(11, QueryBrowserResourceComponent_ng_template_36_Conditional_0_Conditional_11_Template, 2, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const node_r12 = i0.ɵɵnextContext().node;
+    const node_r13 = i0.ɵɵnextContext().node;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵstyleProp("padding-left", node_r12.level * 16 + 8, "px");
-    i0.ɵɵclassProp("expanded", node_r12.expanded);
+    i0.ɵɵstyleProp("padding-left", node_r13.level * 16 + 8, "px");
+    i0.ɵɵclassProp("expanded", node_r13.expanded);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("fa-chevron-down", node_r12.expanded)("fa-chevron-right", !node_r12.expanded);
+    i0.ɵɵclassProp("fa-chevron-down", node_r13.expanded)("fa-chevron-right", !node_r13.expanded);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("fa-folder-open", node_r12.expanded);
+    i0.ɵɵclassProp("fa-folder-open", node_r13.expanded);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(node_r12.category.Name);
+    i0.ɵɵtextInterpolate(node_r13.category.Name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("(", ctx_r1.getNodeQueryCount(node_r12), ")");
+    i0.ɵɵtextInterpolate1("(", ctx_r1.getNodeQueryCount(node_r13), ")");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.CanEditQuery && node_r13.category.ID !== "__uncategorized__" ? 8 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.CanCreateQuery && node_r12.category.ID !== "__uncategorized__" ? 8 : -1);
+    i0.ɵɵconditional(ctx_r1.CanCreateQuery && node_r13.category.ID !== "__uncategorized__" ? 9 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(node_r12.expanded ? 9 : -1);
+    i0.ɵɵconditional(node_r13.expanded ? 10 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(node_r12.expanded ? 10 : -1);
+    i0.ɵɵconditional(node_r13.expanded ? 11 : -1);
 } }
-function QueryBrowserResourceComponent_ng_template_35_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, QueryBrowserResourceComponent_ng_template_35_Conditional_0_Template, 11, 15, "div", 57);
+function QueryBrowserResourceComponent_ng_template_36_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, QueryBrowserResourceComponent_ng_template_36_Conditional_0_Template, 12, 16, "div", 61);
 } if (rf & 2) {
-    const node_r12 = ctx.node;
+    const node_r13 = ctx.node;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵconditional(ctx_r1.hasVisibleContent(node_r12) ? 0 : -1);
+    i0.ɵɵconditional(ctx_r1.hasVisibleContent(node_r13) ? 0 : -1);
 } }
-function QueryBrowserResourceComponent_Conditional_37_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 79);
-    i0.ɵɵlistener("click", function QueryBrowserResourceComponent_Conditional_37_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDrawerBackdropClick()); });
+function QueryBrowserResourceComponent_Conditional_38_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 85);
+    i0.ɵɵlistener("click", function QueryBrowserResourceComponent_Conditional_38_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDrawerBackdropClick()); });
     i0.ɵɵelementEnd();
 } }
-function QueryBrowserResourceComponent_Conditional_38_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 83);
+function QueryBrowserResourceComponent_Conditional_39_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 89);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -324,35 +349,41 @@ function QueryBrowserResourceComponent_Conditional_38_Conditional_7_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.DrawerName);
 } }
-function QueryBrowserResourceComponent_Conditional_38_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 90);
+function QueryBrowserResourceComponent_Conditional_39_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 96);
     i0.ɵɵtext(1, "Name is required");
     i0.ɵɵelementEnd();
 } }
-function QueryBrowserResourceComponent_Conditional_38_For_28_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 95);
+function QueryBrowserResourceComponent_Conditional_39_For_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 101);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const s_r20 = ctx.$implicit;
-    i0.ɵɵproperty("value", s_r20);
+    const s_r22 = ctx.$implicit;
+    i0.ɵɵproperty("value", s_r22);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(s_r20);
+    i0.ɵɵtextInterpolate(s_r22);
 } }
-function QueryBrowserResourceComponent_Conditional_38_Conditional_45_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 102);
-    i0.ɵɵelement(1, "i", 108);
+function QueryBrowserResourceComponent_Conditional_39_Conditional_45_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 108);
+    i0.ɵɵelement(1, "i", 115);
     i0.ɵɵtext(2, " To manage Parameters, Fields, and Permissions \u2014 ");
-    i0.ɵɵelementStart(3, "button", 109);
-    i0.ɵɵlistener("click", function QueryBrowserResourceComponent_Conditional_38_Conditional_45_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OpenFullRecord()); });
+    i0.ɵɵelementStart(3, "button", 116);
+    i0.ɵɵlistener("click", function QueryBrowserResourceComponent_Conditional_39_Conditional_45_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OpenFullRecord()); });
     i0.ɵɵtext(4, " Open full record ");
-    i0.ɵɵelement(5, "i", 110);
+    i0.ɵɵelement(5, "i", 117);
     i0.ɵɵelementEnd()();
 } }
-function QueryBrowserResourceComponent_Conditional_38_Conditional_47_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 104);
-    i0.ɵɵelement(1, "i", 111);
+function QueryBrowserResourceComponent_Conditional_39_Conditional_47_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-query-diagnostics", 110);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Headline", ctx_r1.DrawerSaveError)("Diagnostics", ctx_r1.DrawerSaveDiagnostics);
+} }
+function QueryBrowserResourceComponent_Conditional_39_Conditional_48_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 111);
+    i0.ɵɵelement(1, "i", 118);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -360,83 +391,83 @@ function QueryBrowserResourceComponent_Conditional_38_Conditional_47_Template(rf
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.DrawerSaveError, " ");
 } }
-function QueryBrowserResourceComponent_Conditional_38_Conditional_50_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 112);
+function QueryBrowserResourceComponent_Conditional_39_Conditional_51_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 119);
     i0.ɵɵtext(1, " Saving... ");
 } }
-function QueryBrowserResourceComponent_Conditional_38_Conditional_51_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 113);
+function QueryBrowserResourceComponent_Conditional_39_Conditional_52_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 120);
     i0.ɵɵtext(1, " Save ");
 } }
-function QueryBrowserResourceComponent_Conditional_38_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 32)(1, "div", 80)(2, "div", 81);
-    i0.ɵɵelement(3, "i", 39);
-    i0.ɵɵelementStart(4, "div")(5, "div", 82);
+function QueryBrowserResourceComponent_Conditional_39_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 33)(1, "div", 86)(2, "div", 87);
+    i0.ɵɵelement(3, "i", 43);
+    i0.ɵɵelementStart(4, "div")(5, "div", 88);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(7, QueryBrowserResourceComponent_Conditional_38_Conditional_7_Template, 2, 1, "div", 83);
+    i0.ɵɵconditionalCreate(7, QueryBrowserResourceComponent_Conditional_39_Conditional_7_Template, 2, 1, "div", 89);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "button", 84);
-    i0.ɵɵlistener("click", function QueryBrowserResourceComponent_Conditional_38_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseDrawer()); });
-    i0.ɵɵelement(9, "i", 36);
+    i0.ɵɵelementStart(8, "button", 90);
+    i0.ɵɵlistener("click", function QueryBrowserResourceComponent_Conditional_39_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseDrawer()); });
+    i0.ɵɵelement(9, "i", 40);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 85)(11, "div", 86)(12, "label", 87);
+    i0.ɵɵelementStart(10, "div", 91)(11, "div", 92)(12, "label", 93);
     i0.ɵɵtext(13, "Name ");
-    i0.ɵɵelementStart(14, "span", 88);
+    i0.ɵɵelementStart(14, "span", 94);
     i0.ɵɵtext(15, "*");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "input", 89);
-    i0.ɵɵtwoWayListener("ngModelChange", function QueryBrowserResourceComponent_Conditional_38_Template_input_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.DrawerName, $event) || (ctx_r1.DrawerName = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("ngModelChange", function QueryBrowserResourceComponent_Conditional_38_Template_input_ngModelChange_16_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.DrawerNameError = false); });
+    i0.ɵɵelementStart(16, "input", 95);
+    i0.ɵɵtwoWayListener("ngModelChange", function QueryBrowserResourceComponent_Conditional_39_Template_input_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.DrawerName, $event) || (ctx_r1.DrawerName = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function QueryBrowserResourceComponent_Conditional_39_Template_input_ngModelChange_16_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.DrawerNameError = false); });
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(17, QueryBrowserResourceComponent_Conditional_38_Conditional_17_Template, 2, 0, "span", 90);
+    i0.ɵɵconditionalCreate(17, QueryBrowserResourceComponent_Conditional_39_Conditional_17_Template, 2, 0, "span", 96);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "div", 91)(19, "div", 92)(20, "label", 87);
+    i0.ɵɵelementStart(18, "div", 97)(19, "div", 98)(20, "label", 93);
     i0.ɵɵtext(21, "Category");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "mj-tree-dropdown", 93);
-    i0.ɵɵlistener("ValueChange", function QueryBrowserResourceComponent_Conditional_38_Template_mj_tree_dropdown_ValueChange_22_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDrawerCategoryChange($event)); });
+    i0.ɵɵelementStart(22, "mj-tree-dropdown", 99);
+    i0.ɵɵlistener("ValueChange", function QueryBrowserResourceComponent_Conditional_39_Template_mj_tree_dropdown_ValueChange_22_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDrawerCategoryChange($event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(23, "div", 92)(24, "label", 87);
+    i0.ɵɵelementStart(23, "div", 98)(24, "label", 93);
     i0.ɵɵtext(25, "Status");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "select", 94);
-    i0.ɵɵtwoWayListener("ngModelChange", function QueryBrowserResourceComponent_Conditional_38_Template_select_ngModelChange_26_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.DrawerStatus, $event) || (ctx_r1.DrawerStatus = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵrepeaterCreate(27, QueryBrowserResourceComponent_Conditional_38_For_28_Template, 2, 2, "option", 95, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(26, "select", 100);
+    i0.ɵɵtwoWayListener("ngModelChange", function QueryBrowserResourceComponent_Conditional_39_Template_select_ngModelChange_26_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.DrawerStatus, $event) || (ctx_r1.DrawerStatus = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵrepeaterCreate(27, QueryBrowserResourceComponent_Conditional_39_For_28_Template, 2, 2, "option", 101, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(29, "div", 96)(30, "label", 97)(31, "input", 98);
-    i0.ɵɵtwoWayListener("ngModelChange", function QueryBrowserResourceComponent_Conditional_38_Template_input_ngModelChange_31_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.DrawerReusable, $event) || (ctx_r1.DrawerReusable = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(29, "div", 102)(30, "label", 103)(31, "input", 104);
+    i0.ɵɵtwoWayListener("ngModelChange", function QueryBrowserResourceComponent_Conditional_39_Template_input_ngModelChange_31_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.DrawerReusable, $event) || (ctx_r1.DrawerReusable = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(32, "span");
     i0.ɵɵtext(33, "Reusable");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(34, "span", 90);
+    i0.ɵɵelementStart(34, "span", 96);
     i0.ɵɵtext(35, "Allow other queries to reference this query using composition syntax");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(36, "div", 86)(37, "label", 87);
+    i0.ɵɵelementStart(36, "div", 92)(37, "label", 93);
     i0.ɵɵtext(38, "Description");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(39, "textarea", 99);
-    i0.ɵɵtwoWayListener("ngModelChange", function QueryBrowserResourceComponent_Conditional_38_Template_textarea_ngModelChange_39_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.DrawerDescription, $event) || (ctx_r1.DrawerDescription = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(39, "textarea", 105);
+    i0.ɵɵtwoWayListener("ngModelChange", function QueryBrowserResourceComponent_Conditional_39_Template_textarea_ngModelChange_39_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.DrawerDescription, $event) || (ctx_r1.DrawerDescription = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(40, "div", 100)(41, "label", 87);
+    i0.ɵɵelementStart(40, "div", 106)(41, "label", 93);
     i0.ɵɵtext(42, "SQL");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(43, "mj-code-editor", 101, 1);
-    i0.ɵɵlistener("change", function QueryBrowserResourceComponent_Conditional_38_Template_mj_code_editor_change_43_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDrawerSQLChange($event)); });
+    i0.ɵɵelementStart(43, "mj-code-editor", 107, 1);
+    i0.ɵɵlistener("change", function QueryBrowserResourceComponent_Conditional_39_Template_mj_code_editor_change_43_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDrawerSQLChange($event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(45, QueryBrowserResourceComponent_Conditional_38_Conditional_45_Template, 6, 0, "div", 102);
+    i0.ɵɵconditionalCreate(45, QueryBrowserResourceComponent_Conditional_39_Conditional_45_Template, 6, 0, "div", 108);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(46, "div", 103);
-    i0.ɵɵconditionalCreate(47, QueryBrowserResourceComponent_Conditional_38_Conditional_47_Template, 3, 1, "div", 104);
-    i0.ɵɵelementStart(48, "div", 105)(49, "button", 106);
-    i0.ɵɵlistener("click", function QueryBrowserResourceComponent_Conditional_38_Template_button_click_49_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.SaveDrawer()); });
-    i0.ɵɵconditionalCreate(50, QueryBrowserResourceComponent_Conditional_38_Conditional_50_Template, 2, 0)(51, QueryBrowserResourceComponent_Conditional_38_Conditional_51_Template, 2, 0);
+    i0.ɵɵelementStart(46, "div", 109);
+    i0.ɵɵconditionalCreate(47, QueryBrowserResourceComponent_Conditional_39_Conditional_47_Template, 1, 2, "mj-query-diagnostics", 110)(48, QueryBrowserResourceComponent_Conditional_39_Conditional_48_Template, 3, 1, "div", 111);
+    i0.ɵɵelementStart(49, "div", 112)(50, "button", 113);
+    i0.ɵɵlistener("click", function QueryBrowserResourceComponent_Conditional_39_Template_button_click_50_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.SaveDrawer()); });
+    i0.ɵɵconditionalCreate(51, QueryBrowserResourceComponent_Conditional_39_Conditional_51_Template, 2, 0)(52, QueryBrowserResourceComponent_Conditional_39_Conditional_52_Template, 2, 0);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(52, "button", 107);
-    i0.ɵɵlistener("click", function QueryBrowserResourceComponent_Conditional_38_Template_button_click_52_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseDrawer()); });
-    i0.ɵɵtext(53, " Cancel ");
+    i0.ɵɵelementStart(53, "button", 114);
+    i0.ɵɵlistener("click", function QueryBrowserResourceComponent_Conditional_39_Template_button_click_53_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseDrawer()); });
+    i0.ɵɵtext(54, " Cancel ");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -471,11 +502,11 @@ function QueryBrowserResourceComponent_Conditional_38_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.DrawerMode === "edit" && ctx_r1.DrawerQueryId ? 45 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.DrawerSaveError ? 47 : -1);
-    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.DrawerSaveDiagnostics.length > 0 ? 47 : ctx_r1.DrawerSaveError ? 48 : -1);
+    i0.ɵɵadvance(3);
     i0.ɵɵproperty("disabled", ctx_r1.IsSavingDrawer || !ctx_r1.DrawerName.trim());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.IsSavingDrawer ? 50 : 51);
+    i0.ɵɵconditional(ctx_r1.IsSavingDrawer ? 51 : 52);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", ctx_r1.IsSavingDrawer);
 } }
@@ -617,6 +648,8 @@ let QueryBrowserResourceComponent = class QueryBrowserResourceComponent extends
     IsSavingDrawer = false;
     DrawerNameError = false;
     DrawerSaveError = null;
+    /** Why the drawer's last save was refused, one finding per rule the SQL broke. */
+    DrawerSaveDiagnostics = [];
     /** Ordered status options for the drawer dropdown — all valid Query statuses */
     DrawerStatuses = ['Pending', 'Approved', 'Rejected', 'Expired'];
     initialDrawerSnapshot = '';
@@ -1560,6 +1593,84 @@ let QueryBrowserResourceComponent = class QueryBrowserResourceComponent extends
             return false;
         return entity.GetUserPermisions(this.metadata.CurrentUser).CanCreate;
     }
+    // ========================================
+    // Refresh metadata (the selected query, a category, or all)
+    // ========================================
+    ShowRefreshDialog = false;
+    RefreshScope = null;
+    RefreshScopeLabel = '';
+    /** Refreshes the metadata of one query (the selected one). */
+    OpenRefreshForQuery(query) {
+        this.openRefresh({ Kind: 'Queries', QueryIDs: [query.ID] }, `Query “${query.Name}”`);
+    }
+    /** Refreshes the metadata of every query in a category and the categories below it. */
+    OpenRefreshForCategory(node, event) {
+        event?.stopPropagation();
+        const path = this.categoryPathOf(node.category);
+        if (!path)
+            return;
+        this.openRefresh({ Kind: 'Category', CategoryPath: path }, `Category “${path}” and its subcategories`);
+    }
+    /** Refreshes the metadata of every query the user can read. */
+    OpenRefreshForAll() {
+        this.openRefresh({ Kind: 'All' }, 'All queries');
+    }
+    OnRefreshDialogClosed() {
+        this.ShowRefreshDialog = false;
+        this.cdr.markForCheck();
+    }
+    /** A refresh was applied: reload the list, keeping the selected query selected. */
+    async OnRefreshApplied() {
+        const selectedID = this.SelectedQuery?.ID ?? null;
+        await this.loadData(true);
+        if (selectedID) {
+            const refreshed = this.Queries.find(q => UUIDsEqual(q.ID, selectedID));
+            if (refreshed)
+                this.SelectedQuery = refreshed;
+        }
+        this.cdr.markForCheck();
+    }
+    /** A query named in the refresh report: close the dialog and select it. */
+    OnRefreshOpenQuery(queryID) {
+        const query = this.Queries.find(q => UUIDsEqual(q.ID, queryID));
+        this.ShowRefreshDialog = false;
+        if (query) {
+            this.expandCategoryForQuery(query);
+            this.SelectQuery(query);
+        }
+        this.cdr.markForCheck();
+    }
+    openRefresh(scope, label) {
+        this.RefreshScope = scope;
+        this.RefreshScopeLabel = label;
+        this.ShowRefreshDialog = true;
+        this.cdr.markForCheck();
+    }
+    /** A category's full path (`Parent/Child`), as the refresh operation selects categories. */
+    categoryPathOf(category) {
+        const byID = IndexByUUID(this.Categories);
+        const segments = [];
+        const seen = new UUIDSet();
+        let current = category;
+        while (current && !seen.Has(current.ID)) {
+            seen.Add(current.ID);
+            segments.unshift(current.Name);
+            current = current.ParentID ? byID.Get(current.ParentID) : undefined;
+        }
+        return segments.join('/');
+    }
+    /**
+     * Shows why a drawer save failed: the server's findings (rule code, line, column, fix) when the
+     * query's rules refused it, otherwise the server's message.
+     */
+    showDrawerSaveFailure(message) {
+        const parsed = ParseQuerySaveMessage(message);
+        const isRuleRefusal = parsed.Diagnostics.some(d => d.Code !== null);
+        this.DrawerSaveDiagnostics = isRuleRefusal ? [...parsed.Diagnostics] : [];
+        this.DrawerSaveError = isRuleRefusal
+            ? (parsed.Headline ?? 'The query was not saved:')
+            : (message?.trim() || 'Save failed. Please check your inputs and try again.');
+    }
     /** True when the current user has permission to edit queries. */
     get CanEditQuery() {
         const entity = this.metadata.EntityByName('MJ: Queries');
@@ -1589,6 +1700,7 @@ let QueryBrowserResourceComponent = class QueryBrowserResourceComponent extends
         this.DrawerReusable = false;
         this.DrawerNameError = false;
         this.DrawerSaveError = null;
+        this.DrawerSaveDiagnostics = [];
         this.captureDrawerSnapshot();
         this.ShowQueryDrawer = true;
         this.cdr.markForCheck();
@@ -1611,6 +1723,7 @@ let QueryBrowserResourceComponent = class QueryBrowserResourceComponent extends
         this.DrawerReusable = query.Reusable ?? false;
         this.DrawerNameError = false;
         this.DrawerSaveError = null;
+        this.DrawerSaveDiagnostics = [];
         this.captureDrawerSnapshot();
         this.ShowQueryDrawer = true;
         this.cdr.markForCheck();
@@ -1670,6 +1783,7 @@ let QueryBrowserResourceComponent = class QueryBrowserResourceComponent extends
     async SaveDrawer() {
         this.DrawerNameError = !this.DrawerName.trim();
         this.DrawerSaveError = null;
+        this.DrawerSaveDiagnostics = [];
         if (this.DrawerNameError) {
             this.cdr.markForCheck();
             return;
@@ -1704,7 +1818,7 @@ let QueryBrowserResourceComponent = class QueryBrowserResourceComponent extends
                 }
             }
             else {
-                this.DrawerSaveError = 'Save failed. Please check your inputs and try again.';
+                this.showDrawerSaveFailure(entity.LatestResult?.Message || entity.LatestResult?.CompleteMessage);
             }
         }
         catch (e) {
@@ -1935,7 +2049,7 @@ let QueryBrowserResourceComponent = class QueryBrowserResourceComponent extends
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.drawerSqlEditor = _t.first);
         } }, hostBindings: function QueryBrowserResourceComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown.escape", function QueryBrowserResourceComponent_keydown_escape_HostBindingHandler() { return ctx.OnEscapeKey(); }, i0.ɵɵresolveDocument);
-        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 39, vars: 23, consts: [["categoryNode", ""], ["drawerSqlEditor", ""], [1, "query-browser-container"], [1, "query-tree-panel", 3, "id"], [1, "tree-header"], [1, "header-title"], [1, "fa-solid", "fa-database"], [1, "query-count"], [1, "header-actions"], ["title", "New Query", 1, "icon-btn"], ["title", "Expand all", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-folder-open"], ["title", "Collapse all", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-folder"], ["title", "Refresh", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "tree-search"], [1, "search-input-wrapper"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", "placeholder", "Search queries...", 1, "search-input", 3, "input", "value"], [1, "clear-btn"], [1, "status-filter-bar"], [1, "tree-content"], [1, "loading-state"], ["Size", "compact", "Icon", "fa-solid fa-database", "Title", "No queries available"], ["Size", "compact", "Variant", "no-results", "Title", "No queries found", 3, "Message"], [1, "category-tree"], ["role", "separator", "aria-orientation", "vertical", "aria-label", "Resize query list panel", "tabindex", "0", 1, "resize-handle", 3, "mousedown", "keydown"], [1, "resize-handle-grip"], [1, "query-viewer-panel"], ["Icon", "fa-solid fa-hand-pointer", "Title", "Select a query from the list", "Message", "Click on a query to view and run it", "ActionIcon", "fa-solid fa-plus", 1, "no-selection", 3, "ActionText"], [1, "query-drawer-backdrop"], [1, "query-drawer"], ["title", "New Query", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "clear-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "status-filter-chip", 3, "active", "--chip-color", "title"], [1, "status-filter-chip", 3, "click", "title"], [1, "fa-solid"], [1, "chip-count"], ["text", "Loading queries..."], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["Icon", "fa-solid fa-hand-pointer", "Title", "Select a query from the list", "Message", "Click on a query to view and run it", "ActionIcon", "fa-solid fa-plus", 1, "no-selection", 3, "Action", "ActionText"], [1, "query-viewer-header"], [1, "query-viewer-title"], [1, "fa-solid", "fa-file-code"], [1, "query-viewer-header-actions"], [1, "query-viewer-status-pill", 3, "background"], [1, "query-viewer-status-pill", "approved", 3, "background"], ["title", "Edit Query", 1, "icon-btn"], [3, "EntityLinkClick", "RowDoubleClick", "OpenQueryRecord", "CompositionTokenClick", "QueryComplete", "QueryId", "AutoRun", "SelectionMode"], [1, "query-viewer-status-pill"], [1, "query-viewer-status-pill", "approved"], [1, "fa-solid", "fa-check-circle"], ["title", "Edit Query", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-pen-to-square"], [1, "category-item", 3, "expanded", "padding-left"], [1, "category-item"], [1, "category-header", 3, "click"], [1, "fa-solid", "expand-icon"], [1, "fa-solid", "fa-folder", "category-icon"], [1, "category-name"], [1, "category-count"], [1, "category-add-btn", 3, "title"], [1, "category-queries"], [1, "category-add-btn", 3, "click", "title"], [1, "query-item", 3, "selected", "hidden"], [1, "query-item", 3, "click"], [1, "status-dot", 3, "title"], [1, "fa-solid", "fa-file-code", "query-icon"], [1, "query-info", 3, "title"], [1, "query-name"], [1, "query-description"], ["title", "Has parameters", 1, "fa-solid", "fa-sliders", "param-icon"], [1, "query-status-badge", 3, "background", "title"], ["title", "Edit query", 1, "query-details-btn"], [1, "query-status-badge", 3, "title"], ["title", "Edit query", 1, "query-details-btn", 3, "click"], [1, "query-drawer-backdrop", 3, "click"], [1, "query-drawer-header"], [1, "query-drawer-title"], [1, "query-drawer-title-main"], [1, "query-drawer-title-sub"], ["title", "Close", "aria-label", "Close", 1, "query-drawer-close", 3, "click"], [1, "query-drawer-body"], [1, "drawer-field"], [1, "drawer-label"], [1, "drawer-required"], ["type", "text", "placeholder", "Enter query name", 1, "drawer-input", 3, "ngModelChange", "ngModel", "disabled"], [1, "drawer-field-hint"], [1, "drawer-row"], [1, "drawer-field", "drawer-field-flex"], [3, "ValueChange", "BranchConfig", "Value", "SelectableTypes", "SelectionMode", "Placeholder", "EnableSearch", "Clearable", "Disabled"], [1, "drawer-select", 3, "ngModelChange", "ngModel", "disabled"], [3, "value"], [1, "drawer-field", "drawer-field-inline"], [1, "mj-checkbox", "drawer-reusable-label"], ["type", "checkbox", 3, "ngModelChange", "ngModel", "disabled"], ["rows", "3", "placeholder", "Optional description", 1, "drawer-textarea", 3, "ngModelChange", "ngModel", "disabled"], [1, "drawer-field", "drawer-field-sql"], [1, "drawer-sql-editor", 3, "change", "language", "indentWithTab", "readonly"], [1, "drawer-full-record"], [1, "query-drawer-footer"], [1, "drawer-error"], [1, "drawer-footer-actions"], [1, "drawer-btn", "drawer-btn-primary", 3, "click", "disabled"], [1, "drawer-btn", "drawer-btn-secondary", 3, "click", "disabled"], [1, "fa-solid", "fa-circle-info"], [1, "drawer-link-btn", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "fa-solid", "fa-triangle-exclamation"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-floppy-disk"]], template: function QueryBrowserResourceComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 41, vars: 30, consts: [["categoryNode", ""], ["drawerSqlEditor", ""], [1, "query-browser-container"], [1, "query-tree-panel", 3, "id"], [1, "tree-header"], [1, "header-title"], [1, "fa-solid", "fa-database"], [1, "query-count"], [1, "header-actions"], ["title", "New Query", 1, "icon-btn"], ["title", "Expand all", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-folder-open"], ["title", "Collapse all", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-folder"], ["title", "Refresh", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-refresh"], ["title", "Refresh the metadata of all queries (dry run first)", "aria-label", "Refresh the metadata of all queries", 1, "icon-btn"], [1, "tree-search"], [1, "search-input-wrapper"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", "placeholder", "Search queries...", 1, "search-input", 3, "input", "value"], [1, "clear-btn"], [1, "status-filter-bar"], [1, "tree-content"], [1, "loading-state"], ["Size", "compact", "Icon", "fa-solid fa-database", "Title", "No queries available"], ["Size", "compact", "Variant", "no-results", "Title", "No queries found", 3, "Message"], [1, "category-tree"], ["role", "separator", "aria-orientation", "vertical", "aria-label", "Resize query list panel", "tabindex", "0", 1, "resize-handle", 3, "mousedown", "keydown"], [1, "resize-handle-grip"], [1, "query-viewer-panel"], ["Icon", "fa-solid fa-hand-pointer", "Title", "Select a query from the list", "Message", "Click on a query to view and run it", "ActionIcon", "fa-solid fa-plus", 1, "no-selection", 3, "ActionText"], [1, "query-drawer-backdrop"], [1, "query-drawer"], [3, "Closed", "Applied", "OpenQuery", "Visible", "Scope", "ScopeLabel", "AllowOpenQuery", "AllowSkipDryRun", "Provider"], ["title", "New Query", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-plus"], ["title", "Refresh the metadata of all queries (dry run first)", "aria-label", "Refresh the metadata of all queries", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-wand-magic-sparkles"], [1, "clear-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "status-filter-chip", 3, "active", "--chip-color", "title"], [1, "status-filter-chip", 3, "click", "title"], [1, "fa-solid"], [1, "chip-count"], ["text", "Loading queries..."], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["Icon", "fa-solid fa-hand-pointer", "Title", "Select a query from the list", "Message", "Click on a query to view and run it", "ActionIcon", "fa-solid fa-plus", 1, "no-selection", 3, "Action", "ActionText"], [1, "query-viewer-header"], [1, "query-viewer-title"], [1, "fa-solid", "fa-file-code"], [1, "query-viewer-header-actions"], [1, "query-viewer-status-pill", 3, "background"], [1, "query-viewer-status-pill", "approved", 3, "background"], [3, "EntityLinkClick", "RowDoubleClick", "OpenQueryRecord", "CompositionTokenClick", "QueryComplete", "QueryId", "AutoRun", "SelectionMode"], [1, "query-viewer-status-pill"], [1, "query-viewer-status-pill", "approved"], [1, "fa-solid", "fa-check-circle"], ["title", "Refresh this query's metadata (dry run first)", "aria-label", "Refresh this query's metadata", 1, "icon-btn", 3, "click"], ["title", "Edit Query", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-pen-to-square"], [1, "category-item", 3, "expanded", "padding-left"], [1, "category-item"], [1, "category-header", 3, "click"], [1, "fa-solid", "expand-icon"], [1, "fa-solid", "fa-folder", "category-icon"], [1, "category-name"], [1, "category-count"], [1, "category-add-btn", "category-refresh-btn", 3, "title"], [1, "category-add-btn", 3, "title"], [1, "category-queries"], [1, "category-add-btn", "category-refresh-btn", 3, "click", "title"], [1, "category-add-btn", 3, "click", "title"], [1, "query-item", 3, "selected", "hidden"], [1, "query-item", 3, "click"], [1, "status-dot", 3, "title"], [1, "fa-solid", "fa-file-code", "query-icon"], [1, "query-info", 3, "title"], [1, "query-name"], [1, "query-description"], ["title", "Has parameters", 1, "fa-solid", "fa-sliders", "param-icon"], [1, "query-status-badge", 3, "background", "title"], ["title", "Edit query", 1, "query-details-btn"], [1, "query-status-badge", 3, "title"], ["title", "Edit query", 1, "query-details-btn", 3, "click"], [1, "query-drawer-backdrop", 3, "click"], [1, "query-drawer-header"], [1, "query-drawer-title"], [1, "query-drawer-title-main"], [1, "query-drawer-title-sub"], ["title", "Close", "aria-label", "Close", 1, "query-drawer-close", 3, "click"], [1, "query-drawer-body"], [1, "drawer-field"], [1, "drawer-label"], [1, "drawer-required"], ["type", "text", "placeholder", "Enter query name", 1, "drawer-input", 3, "ngModelChange", "ngModel", "disabled"], [1, "drawer-field-hint"], [1, "drawer-row"], [1, "drawer-field", "drawer-field-flex"], [3, "ValueChange", "BranchConfig", "Value", "SelectableTypes", "SelectionMode", "Placeholder", "EnableSearch", "Clearable", "Disabled"], [1, "drawer-select", 3, "ngModelChange", "ngModel", "disabled"], [3, "value"], [1, "drawer-field", "drawer-field-inline"], [1, "mj-checkbox", "drawer-reusable-label"], ["type", "checkbox", 3, "ngModelChange", "ngModel", "disabled"], ["rows", "3", "placeholder", "Optional description", 1, "drawer-textarea", 3, "ngModelChange", "ngModel", "disabled"], [1, "drawer-field", "drawer-field-sql"], [1, "drawer-sql-editor", 3, "change", "language", "indentWithTab", "readonly"], [1, "drawer-full-record"], [1, "query-drawer-footer"], ["Severity", "error", 1, "drawer-diagnostics", 3, "Headline", "Diagnostics"], [1, "drawer-error"], [1, "drawer-footer-actions"], [1, "drawer-btn", "drawer-btn-primary", 3, "click", "disabled"], [1, "drawer-btn", "drawer-btn-secondary", 3, "click", "disabled"], [1, "fa-solid", "fa-circle-info"], [1, "drawer-link-btn", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "fa-solid", "fa-triangle-exclamation"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-floppy-disk"]], template: function QueryBrowserResourceComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "div", 4)(3, "div", 5);
             i0.ɵɵelement(4, "i", 6);
             i0.ɵɵelementStart(5, "span");
@@ -1957,34 +2071,39 @@ let QueryBrowserResourceComponent = class QueryBrowserResourceComponent extends
             i0.ɵɵelementStart(15, "button", 14);
             i0.ɵɵlistener("click", function QueryBrowserResourceComponent_Template_button_click_15_listener() { return ctx.refresh(); });
             i0.ɵɵelement(16, "i", 15);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(17, "div", 16)(18, "div", 17);
-            i0.ɵɵelement(19, "i", 18);
-            i0.ɵɵelementStart(20, "input", 19);
-            i0.ɵɵlistener("input", function QueryBrowserResourceComponent_Template_input_input_20_listener($event) { return ctx.onSearchChange($event.target.value); });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(21, QueryBrowserResourceComponent_Conditional_21_Template, 2, 0, "button", 20);
+            i0.ɵɵconditionalCreate(17, QueryBrowserResourceComponent_Conditional_17_Template, 2, 0, "button", 16);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(18, "div", 17)(19, "div", 18);
+            i0.ɵɵelement(20, "i", 19);
+            i0.ɵɵelementStart(21, "input", 20);
+            i0.ɵɵlistener("input", function QueryBrowserResourceComponent_Template_input_input_21_listener($event) { return ctx.onSearchChange($event.target.value); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(22, QueryBrowserResourceComponent_Conditional_22_Template, 2, 0, "button", 21);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(22, "div", 21);
-            i0.ɵɵrepeaterCreate(23, QueryBrowserResourceComponent_For_24_Template, 1, 1, null, null, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵelementStart(23, "div", 22);
+            i0.ɵɵrepeaterCreate(24, QueryBrowserResourceComponent_For_25_Template, 1, 1, null, null, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(25, "div", 22);
-            i0.ɵɵconditionalCreate(26, QueryBrowserResourceComponent_Conditional_26_Template, 2, 0, "div", 23);
-            i0.ɵɵconditionalCreate(27, QueryBrowserResourceComponent_Conditional_27_Template, 1, 0, "mj-empty-state", 24);
-            i0.ɵɵconditionalCreate(28, QueryBrowserResourceComponent_Conditional_28_Template, 1, 1, "mj-empty-state", 25);
-            i0.ɵɵconditionalCreate(29, QueryBrowserResourceComponent_Conditional_29_Template, 3, 0, "div", 26);
+            i0.ɵɵelementStart(26, "div", 23);
+            i0.ɵɵconditionalCreate(27, QueryBrowserResourceComponent_Conditional_27_Template, 2, 0, "div", 24);
+            i0.ɵɵconditionalCreate(28, QueryBrowserResourceComponent_Conditional_28_Template, 1, 0, "mj-empty-state", 25);
+            i0.ɵɵconditionalCreate(29, QueryBrowserResourceComponent_Conditional_29_Template, 1, 1, "mj-empty-state", 26);
+            i0.ɵɵconditionalCreate(30, QueryBrowserResourceComponent_Conditional_30_Template, 3, 0, "div", 27);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(30, "div", 27);
-            i0.ɵɵlistener("mousedown", function QueryBrowserResourceComponent_Template_div_mousedown_30_listener($event) { return ctx.OnResizeStart($event); })("keydown", function QueryBrowserResourceComponent_Template_div_keydown_30_listener($event) { return ctx.OnResizeKeydown($event); });
-            i0.ɵɵelement(31, "div", 28);
+            i0.ɵɵelementStart(31, "div", 28);
+            i0.ɵɵlistener("mousedown", function QueryBrowserResourceComponent_Template_div_mousedown_31_listener($event) { return ctx.OnResizeStart($event); })("keydown", function QueryBrowserResourceComponent_Template_div_keydown_31_listener($event) { return ctx.OnResizeKeydown($event); });
+            i0.ɵɵelement(32, "div", 29);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(32, "div", 29);
-            i0.ɵɵconditionalCreate(33, QueryBrowserResourceComponent_Conditional_33_Template, 1, 1, "mj-empty-state", 30);
-            i0.ɵɵconditionalCreate(34, QueryBrowserResourceComponent_Conditional_34_Template, 10, 6);
+            i0.ɵɵelementStart(33, "div", 30);
+            i0.ɵɵconditionalCreate(34, QueryBrowserResourceComponent_Conditional_34_Template, 1, 1, "mj-empty-state", 31);
+            i0.ɵɵconditionalCreate(35, QueryBrowserResourceComponent_Conditional_35_Template, 10, 6);
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(35, QueryBrowserResourceComponent_ng_template_35_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵconditionalCreate(37, QueryBrowserResourceComponent_Conditional_37_Template, 1, 0, "div", 31);
-            i0.ɵɵconditionalCreate(38, QueryBrowserResourceComponent_Conditional_38_Template, 54, 33, "div", 32);
+            i0.ɵɵtemplate(36, QueryBrowserResourceComponent_ng_template_36_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵconditionalCreate(38, QueryBrowserResourceComponent_Conditional_38_Template, 1, 0, "div", 32);
+            i0.ɵɵconditionalCreate(39, QueryBrowserResourceComponent_Conditional_39_Template, 55, 33, "div", 33);
+            i0.ɵɵelementStart(40, "mj-query-refresh-dialog", 34);
+            i0.ɵɵlistener("Closed", function QueryBrowserResourceComponent_Template_mj_query_refresh_dialog_Closed_40_listener() { return ctx.OnRefreshDialogClosed(); })("Applied", function QueryBrowserResourceComponent_Template_mj_query_refresh_dialog_Applied_40_listener() { return ctx.OnRefreshApplied(); })("OpenQuery", function QueryBrowserResourceComponent_Template_mj_query_refresh_dialog_OpenQuery_40_listener($event) { return ctx.OnRefreshOpenQuery($event); });
+            i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵclassProp("resizing", ctx.IsResizing);
             i0.ɵɵadvance();
@@ -1994,32 +2113,36 @@ let QueryBrowserResourceComponent = class QueryBrowserResourceComponent extends
             i0.ɵɵtextInterpolate1("(", ctx.getTotalQueryCount(), ")");
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.CanCreateQuery ? 10 : -1);
-            i0.ɵɵadvance(10);
+            i0.ɵɵadvance(7);
+            i0.ɵɵconditional(ctx.CanEditQuery ? 17 : -1);
+            i0.ɵɵadvance(4);
             i0.ɵɵproperty("value", ctx.searchText);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.searchText ? 21 : -1);
+            i0.ɵɵconditional(ctx.searchText ? 22 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵrepeater(ctx.AllStatuses);
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.isLoading ? 26 : -1);
+            i0.ɵɵconditional(ctx.isLoading ? 27 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isLoading && ctx.queries.length === 0 ? 27 : -1);
+            i0.ɵɵconditional(!ctx.isLoading && ctx.queries.length === 0 ? 28 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isLoading && ctx.searchText && ctx.filteredQueries.length === 0 ? 28 : -1);
+            i0.ɵɵconditional(!ctx.isLoading && ctx.searchText && ctx.filteredQueries.length === 0 ? 29 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isLoading && ctx.queries.length > 0 ? 29 : -1);
+            i0.ɵɵconditional(!ctx.isLoading && ctx.queries.length > 0 ? 30 : -1);
             i0.ɵɵadvance();
             i0.ɵɵclassProp("active", ctx.IsResizing);
             i0.ɵɵattribute("aria-controls", ctx.TreePanelId)("aria-valuenow", ctx.PanelWidth)("aria-valuemin", ctx.MinPanelWidth)("aria-valuemax", ctx.MaxPanelWidth);
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(!ctx.selectedQuery ? 33 : -1);
+            i0.ɵɵconditional(!ctx.selectedQuery ? 34 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.selectedQuery ? 34 : -1);
+            i0.ɵɵconditional(ctx.selectedQuery ? 35 : -1);
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.ShowQueryDrawer ? 37 : -1);
-            i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.ShowQueryDrawer ? 38 : -1);
-        } }, dependencies: [i2.NgTemplateOutlet, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.CheckboxControlValueAccessor, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i1.MJEmptyStateComponent, i4.LoadingComponent, i5.CodeEditorComponent, i6.QueryViewerComponent, i7.TreeDropdownComponent], styles: ["\n\n[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n}\n\n.query-browser-container[_ngcontent-%COMP%] {\n    display: flex;\n    height: 100%;\n    background: var(--mj-bg-surface-card);\n}\n\n\n.query-tree-panel[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    background: var(--mj-bg-surface);\n    border-right: 1px solid var(--mj-border-default);\n    display: flex;\n    flex-direction: column;\n    \n}\n\n\n.tree-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 16px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.header-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n}\n\n.query-count[_ngcontent-%COMP%] {\n    font-weight: 400;\n    opacity: 0.8;\n    font-size: 13px;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n}\n\n.icon-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    border: none;\n    background: color-mix(in srgb, var(--mj-text-inverse) 15%, transparent);\n    color: var(--mj-text-inverse);\n    border-radius: 4px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.icon-btn[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-text-inverse) 25%, transparent);\n}\n\n\n.tree-search[_ngcontent-%COMP%] {\n    padding: 12px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-input-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    padding-left: 10px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 4px;\n    background: var(--mj-bg-surface);\n    transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.search-input-wrapper[_ngcontent-%COMP%]:focus-within {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-icon[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-size: 14px;\n    flex-shrink: 0;\n}\n\n.search-input[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    border: none;\n    outline: none;\n    padding: 8px 0;\n    font-size: 14px;\n    background: transparent;\n}\n\n.search-input[_ngcontent-%COMP%]::placeholder {\n    color: var(--mj-text-disabled);\n}\n\n.clear-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    margin-right: 4px;\n    border-radius: 4px;\n}\n\n.clear-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface-sunken);\n}\n\n\n.status-filter-bar[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    padding: 8px 12px;\n    border-bottom: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-card);\n}\n\n.status-filter-chip[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 8px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 12px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-disabled);\n    font-size: 11px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    line-height: 1.2;\n}\n\n.status-filter-chip[_ngcontent-%COMP%]:hover {\n    border-color: var(--chip-color, var(--mj-text-disabled));\n    color: var(--chip-color, var(--mj-text-disabled));\n}\n\n.status-filter-chip.active[_ngcontent-%COMP%] {\n    background: var(--chip-color, var(--mj-text-disabled));\n    border-color: var(--chip-color, var(--mj-text-disabled));\n    color: var(--mj-text-inverse);\n}\n\n.status-filter-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n.chip-count[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 10px;\n    opacity: 0.85;\n}\n\n\n.status-dot[_ngcontent-%COMP%] {\n    display: inline-block;\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    flex-shrink: 0;\n    margin-top: 4px;\n}\n\n\n.query-status-badge[_ngcontent-%COMP%] {\n    font-size: 9px;\n    color: var(--mj-text-inverse);\n    padding: 1px 6px;\n    border-radius: 8px;\n    flex-shrink: 0;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n    margin-top: 2px;\n}\n\n\n.tree-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 8px 0;\n}\n\n\n.loading-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    text-align: center;\n}\n\n\n.category-tree[_ngcontent-%COMP%] {\n    padding: 0 4px;\n}\n\n.category-item[_ngcontent-%COMP%] {\n    margin-bottom: 2px;\n}\n\n.category-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 12px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: background 0.15s ease;\n}\n\n.category-header[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n    font-size: 10px;\n    color: var(--mj-text-disabled);\n    width: 12px;\n    text-align: center;\n}\n\n.category-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    font-size: 14px;\n}\n\n.category-name[_ngcontent-%COMP%] {\n    flex: 1;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    font-size: 13px;\n}\n\n.category-count[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-size: 12px;\n}\n\n.category-add-btn[_ngcontent-%COMP%] {\n    display: none;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    border: none;\n    border-radius: 4px;\n    background: transparent;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    font-size: 11px;\n    flex-shrink: 0;\n    transition: background 0.15s ease, color 0.15s ease;\n}\n\n.category-header[_ngcontent-%COMP%]:hover   .category-add-btn[_ngcontent-%COMP%] {\n    display: flex;\n}\n\n.category-add-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n\n.category-queries[_ngcontent-%COMP%] {\n    margin-left: 28px;\n}\n\n.query-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n    padding: 8px 12px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s ease;\n    margin: 2px 0;\n}\n\n.query-item[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.query-item.selected[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-left: 3px solid var(--mj-status-info);\n    margin-left: -3px;\n}\n\n.query-item.hidden[_ngcontent-%COMP%] {\n    display: none;\n}\n\n.query-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n    margin-top: 2px;\n}\n\n.query-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.query-name[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.query-description[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.param-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    font-size: 12px;\n    margin-top: 2px;\n}\n\n.query-details-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    border-radius: 4px;\n    opacity: 0;\n    transition: all 0.15s ease;\n    flex-shrink: 0;\n}\n\n.query-item[_ngcontent-%COMP%]:hover   .query-details-btn[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.query-details-btn[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n\n.resize-handle[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    width: 6px;\n    cursor: col-resize;\n    background: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background 0.15s ease;\n    position: relative;\n    z-index: 10;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover, \n.resize-handle[_ngcontent-%COMP%]:focus-visible, \n.resize-handle.active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n\n\n.resize-handle[_ngcontent-%COMP%]:focus-visible {\n    outline: var(--mj-ring-width) solid var(--mj-focus-ring-color);\n    outline-offset: -1px;\n}\n\n.resize-handle-grip[_ngcontent-%COMP%] {\n    width: 2px;\n    height: 32px;\n    border-radius: 1px;\n    background: var(--mj-border-strong);\n    transition: background 0.15s ease;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover   .resize-handle-grip[_ngcontent-%COMP%], \n.resize-handle[_ngcontent-%COMP%]:focus-visible   .resize-handle-grip[_ngcontent-%COMP%], \n.resize-handle.active[_ngcontent-%COMP%]   .resize-handle-grip[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n}\n\n\n.query-browser-container.resizing[_ngcontent-%COMP%] {\n    cursor: col-resize;\n    user-select: none;\n}\n\n.query-browser-container.resizing[_ngcontent-%COMP%]   *[_ngcontent-%COMP%] {\n    pointer-events: none;\n}\n\n.query-browser-container.resizing[_ngcontent-%COMP%]   .resize-handle[_ngcontent-%COMP%] {\n    pointer-events: auto;\n}\n\n\n.query-viewer-panel[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n}\n\n\n.no-selection[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n\n.query-viewer-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 16px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.query-viewer-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    min-width: 0;\n    overflow: hidden;\n}\n\n.query-viewer-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 16px;\n    flex-shrink: 0;\n}\n\n.query-viewer-title[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.query-viewer-status-pill[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    border-radius: 14px;\n    color: var(--mj-text-inverse);\n    font-size: 13px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    flex-shrink: 0;\n}\n\n.query-viewer-status-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n.query-viewer-status-pill.approved[_ngcontent-%COMP%] {\n    opacity: 0.7;\n}\n\n.query-viewer-header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-shrink: 0;\n}\n\n\nmj-query-viewer[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n}\n\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 6px;\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n    background: var(--mj-bg-surface-card);\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n    background: var(--mj-text-disabled);\n}\n\n\n@media (max-width: 768px) {\n    .query-browser-container[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n\n    .query-tree-panel[_ngcontent-%COMP%] {\n        width: 100% !important;\n        height: 40%;\n        border-right: none;\n        border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .resize-handle[_ngcontent-%COMP%] {\n        display: none;\n    }\n\n    .query-viewer-panel[_ngcontent-%COMP%] {\n        height: 60%;\n    }\n}\n\n\n.query-viewer-header[_ngcontent-%COMP%]   .icon-btn[_ngcontent-%COMP%] {\n    background: transparent;\n    color: var(--mj-text-secondary);\n}\n\n.query-viewer-header[_ngcontent-%COMP%]   .icon-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n}\n\n\n.query-drawer-backdrop[_ngcontent-%COMP%] {\n    position: fixed;\n    inset: 0;\n    background: var(--mj-bg-overlay);\n    z-index: 1100;\n    animation: _ngcontent-%COMP%_backdropFadeIn 0.22s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_backdropFadeIn {\n    from { opacity: 0; }\n    to   { opacity: 1; }\n}\n\n\n.query-drawer[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 480px;\n    max-width: 96vw;\n    background: var(--mj-bg-surface);\n    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);\n    z-index: 1101;\n    display: flex;\n    flex-direction: column;\n    animation: _ngcontent-%COMP%_drawerSlideIn 0.22s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_drawerSlideIn {\n    from { transform: translateX(100%); }\n    to   { transform: translateX(0); }\n}\n\n\n.query-drawer-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    background: linear-gradient(135deg, var(--mj-brand-primary) 0%, var(--mj-brand-primary-hover) 100%);\n    color: var(--mj-text-inverse);\n    flex-shrink: 0;\n}\n\n.query-drawer-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    min-width: 0;\n}\n\n.query-drawer-title[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n    font-size: 18px;\n    opacity: 0.9;\n    flex-shrink: 0;\n}\n\n.query-drawer-title-main[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    line-height: 1.2;\n}\n\n.query-drawer-title-sub[_ngcontent-%COMP%] {\n    font-size: 12px;\n    opacity: 0.75;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 360px;\n    margin-top: 2px;\n}\n\n.query-drawer-close[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: rgba(255, 255, 255, 0.15);\n    color: var(--mj-text-inverse);\n    border-radius: 6px;\n    cursor: pointer;\n    font-size: 16px;\n    flex-shrink: 0;\n    transition: background 0.15s ease;\n}\n\n.query-drawer-close[_ngcontent-%COMP%]:hover {\n    background: rgba(255, 255, 255, 0.28);\n}\n\n\n.query-drawer-body[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n.query-drawer-body[_ngcontent-%COMP%]::-webkit-scrollbar { width: 6px; }\n.query-drawer-body[_ngcontent-%COMP%]::-webkit-scrollbar-track { background: var(--mj-bg-surface-sunken); }\n.query-drawer-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb { background: var(--mj-border-strong); border-radius: 3px; }\n.query-drawer-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover { background: var(--mj-text-disabled); }\n\n\n.drawer-field[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.drawer-row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n}\n\n.drawer-field-flex[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.drawer-field-sql[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.drawer-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.drawer-required[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    margin-left: 2px;\n}\n\n.drawer-input[_ngcontent-%COMP%], \n.drawer-select[_ngcontent-%COMP%], \n.drawer-textarea[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 8px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface);\n    box-sizing: border-box;\n    transition: border-color 0.15s ease, box-shadow 0.15s ease;\n    outline: none;\n    font-family: inherit;\n}\n\n.drawer-input[_ngcontent-%COMP%]:focus, \n.drawer-select[_ngcontent-%COMP%]:focus, \n.drawer-textarea[_ngcontent-%COMP%]:focus {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.drawer-input[_ngcontent-%COMP%]:disabled, \n.drawer-select[_ngcontent-%COMP%]:disabled, \n.drawer-textarea[_ngcontent-%COMP%]:disabled {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-disabled);\n    cursor: not-allowed;\n}\n\n.drawer-textarea[_ngcontent-%COMP%] {\n    resize: vertical;\n    min-height: 70px;\n}\n\n.drawer-sql-editor[_ngcontent-%COMP%] {\n    display: block;\n    min-height: 220px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.drawer-field-error[_ngcontent-%COMP%]   .drawer-input[_ngcontent-%COMP%], \n.drawer-field-error[_ngcontent-%COMP%]   .drawer-select[_ngcontent-%COMP%] {\n    border-color: var(--mj-status-error);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-error) 12%, transparent);\n}\n\n.drawer-field-hint[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-status-error);\n}\n\n.drawer-field-inline[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.drawer-field-inline[_ngcontent-%COMP%]   .drawer-field-hint[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n.drawer-reusable-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    cursor: pointer;\n    white-space: nowrap;\n}\n\n\n.drawer-full-record[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 10px 14px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-border-default));\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--mj-brand-primary-hover);\n    flex-wrap: wrap;\n}\n\n.drawer-full-record[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    color: var(--mj-brand-primary);\n}\n\n.drawer-link-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    color: var(--mj-brand-primary-hover);\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    padding: 0;\n    text-decoration: underline;\n    text-underline-offset: 2px;\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.drawer-link-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-brand-primary-active);\n}\n\n\n.query-drawer-footer[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    padding: 16px 20px;\n    border-top: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-card);\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.drawer-error[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--mj-status-error-bg);\n    border: 1px solid var(--mj-status-error-border);\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--mj-status-error-text);\n}\n\n.drawer-footer-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n\n.drawer-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 18px;\n    border-radius: 6px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    border: 1px solid transparent;\n    transition: all 0.15s ease;\n    white-space: nowrap;\n}\n\n.drawer-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n}\n\n.drawer-btn-primary[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border-color: var(--mj-brand-primary);\n}\n\n.drawer-btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: var(--mj-brand-primary-hover);\n    border-color: var(--mj-brand-primary-hover);\n}\n\n.drawer-btn-secondary[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    border-color: var(--mj-border-default);\n}\n\n.drawer-btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-primary);\n}\n\n\n@media (max-width: 600px) {\n    .query-drawer[_ngcontent-%COMP%] {\n        width: 100vw;\n        max-width: 100vw;\n    }\n\n    .drawer-row[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n}"], changeDetection: 0 });
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowQueryDrawer ? 39 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Visible", ctx.ShowRefreshDialog)("Scope", ctx.RefreshScope)("ScopeLabel", ctx.RefreshScopeLabel)("AllowOpenQuery", true)("AllowSkipDryRun", (ctx.RefreshScope == null ? null : ctx.RefreshScope.Kind) === "Queries")("Provider", ctx.ProviderToUse);
+        } }, dependencies: [i2.NgTemplateOutlet, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.CheckboxControlValueAccessor, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i1.MJEmptyStateComponent, i4.LoadingComponent, i5.CodeEditorComponent, i6.QueryViewerComponent, i6.QueryDiagnosticsComponent, i6.QueryRefreshDialogComponent, i7.TreeDropdownComponent], styles: ["\n\n[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n}\n\n.query-browser-container[_ngcontent-%COMP%] {\n    display: flex;\n    height: 100%;\n    background: var(--mj-bg-surface-card);\n}\n\n\n.query-tree-panel[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    background: var(--mj-bg-surface);\n    border-right: 1px solid var(--mj-border-default);\n    display: flex;\n    flex-direction: column;\n    \n}\n\n\n.tree-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 16px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.header-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n}\n\n.query-count[_ngcontent-%COMP%] {\n    font-weight: 400;\n    opacity: 0.8;\n    font-size: 13px;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n}\n\n.icon-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    border: none;\n    background: color-mix(in srgb, var(--mj-text-inverse) 15%, transparent);\n    color: var(--mj-text-inverse);\n    border-radius: 4px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.icon-btn[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-text-inverse) 25%, transparent);\n}\n\n\n.tree-search[_ngcontent-%COMP%] {\n    padding: 12px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-input-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    padding-left: 10px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 4px;\n    background: var(--mj-bg-surface);\n    transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.search-input-wrapper[_ngcontent-%COMP%]:focus-within {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-icon[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-size: 14px;\n    flex-shrink: 0;\n}\n\n.search-input[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    border: none;\n    outline: none;\n    padding: 8px 0;\n    font-size: 14px;\n    background: transparent;\n}\n\n.search-input[_ngcontent-%COMP%]::placeholder {\n    color: var(--mj-text-disabled);\n}\n\n.clear-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    margin-right: 4px;\n    border-radius: 4px;\n}\n\n.clear-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface-sunken);\n}\n\n\n.status-filter-bar[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    padding: 8px 12px;\n    border-bottom: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-card);\n}\n\n.status-filter-chip[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 8px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 12px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-disabled);\n    font-size: 11px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    line-height: 1.2;\n}\n\n.status-filter-chip[_ngcontent-%COMP%]:hover {\n    border-color: var(--chip-color, var(--mj-text-disabled));\n    color: var(--chip-color, var(--mj-text-disabled));\n}\n\n.status-filter-chip.active[_ngcontent-%COMP%] {\n    background: var(--chip-color, var(--mj-text-disabled));\n    border-color: var(--chip-color, var(--mj-text-disabled));\n    color: var(--mj-text-inverse);\n}\n\n.status-filter-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n.chip-count[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 10px;\n    opacity: 0.85;\n}\n\n\n.status-dot[_ngcontent-%COMP%] {\n    display: inline-block;\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    flex-shrink: 0;\n    margin-top: 4px;\n}\n\n\n.query-status-badge[_ngcontent-%COMP%] {\n    font-size: 9px;\n    color: var(--mj-text-inverse);\n    padding: 1px 6px;\n    border-radius: 8px;\n    flex-shrink: 0;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n    margin-top: 2px;\n}\n\n\n.tree-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 8px 0;\n}\n\n\n.loading-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    text-align: center;\n}\n\n\n.category-tree[_ngcontent-%COMP%] {\n    padding: 0 4px;\n}\n\n.category-item[_ngcontent-%COMP%] {\n    margin-bottom: 2px;\n}\n\n.category-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 12px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: background 0.15s ease;\n}\n\n.category-header[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n    font-size: 10px;\n    color: var(--mj-text-disabled);\n    width: 12px;\n    text-align: center;\n}\n\n.category-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    font-size: 14px;\n}\n\n.category-name[_ngcontent-%COMP%] {\n    flex: 1;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    font-size: 13px;\n}\n\n.category-count[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-size: 12px;\n}\n\n.category-add-btn[_ngcontent-%COMP%] {\n    display: none;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    border: none;\n    border-radius: 4px;\n    background: transparent;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    font-size: 11px;\n    flex-shrink: 0;\n    transition: background 0.15s ease, color 0.15s ease;\n}\n\n.category-header[_ngcontent-%COMP%]:hover   .category-add-btn[_ngcontent-%COMP%] {\n    display: flex;\n}\n\n.category-add-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n\n.category-queries[_ngcontent-%COMP%] {\n    margin-left: 28px;\n}\n\n.query-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n    padding: 8px 12px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s ease;\n    margin: 2px 0;\n}\n\n.query-item[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.query-item.selected[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-left: 3px solid var(--mj-status-info);\n    margin-left: -3px;\n}\n\n.query-item.hidden[_ngcontent-%COMP%] {\n    display: none;\n}\n\n.query-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n    margin-top: 2px;\n}\n\n.query-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.query-name[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.query-description[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.param-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    font-size: 12px;\n    margin-top: 2px;\n}\n\n.query-details-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    border-radius: 4px;\n    opacity: 0;\n    transition: all 0.15s ease;\n    flex-shrink: 0;\n}\n\n.query-item[_ngcontent-%COMP%]:hover   .query-details-btn[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.query-details-btn[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n\n.resize-handle[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    width: 6px;\n    cursor: col-resize;\n    background: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background 0.15s ease;\n    position: relative;\n    z-index: 10;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover, \n.resize-handle[_ngcontent-%COMP%]:focus-visible, \n.resize-handle.active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n\n\n.resize-handle[_ngcontent-%COMP%]:focus-visible {\n    outline: var(--mj-ring-width) solid var(--mj-focus-ring-color);\n    outline-offset: -1px;\n}\n\n.resize-handle-grip[_ngcontent-%COMP%] {\n    width: 2px;\n    height: 32px;\n    border-radius: 1px;\n    background: var(--mj-border-strong);\n    transition: background 0.15s ease;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover   .resize-handle-grip[_ngcontent-%COMP%], \n.resize-handle[_ngcontent-%COMP%]:focus-visible   .resize-handle-grip[_ngcontent-%COMP%], \n.resize-handle.active[_ngcontent-%COMP%]   .resize-handle-grip[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n}\n\n\n.query-browser-container.resizing[_ngcontent-%COMP%] {\n    cursor: col-resize;\n    user-select: none;\n}\n\n.query-browser-container.resizing[_ngcontent-%COMP%]   *[_ngcontent-%COMP%] {\n    pointer-events: none;\n}\n\n.query-browser-container.resizing[_ngcontent-%COMP%]   .resize-handle[_ngcontent-%COMP%] {\n    pointer-events: auto;\n}\n\n\n.query-viewer-panel[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n}\n\n\n.no-selection[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n\n.query-viewer-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 16px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.query-viewer-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    min-width: 0;\n    overflow: hidden;\n}\n\n.query-viewer-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 16px;\n    flex-shrink: 0;\n}\n\n.query-viewer-title[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.query-viewer-status-pill[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    border-radius: 14px;\n    color: var(--mj-text-inverse);\n    font-size: 13px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    flex-shrink: 0;\n}\n\n.query-viewer-status-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n.query-viewer-status-pill.approved[_ngcontent-%COMP%] {\n    opacity: 0.7;\n}\n\n.query-viewer-header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-shrink: 0;\n}\n\n\nmj-query-viewer[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n}\n\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 6px;\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n    background: var(--mj-bg-surface-card);\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n    background: var(--mj-text-disabled);\n}\n\n\n@media (max-width: 768px) {\n    .query-browser-container[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n\n    .query-tree-panel[_ngcontent-%COMP%] {\n        width: 100% !important;\n        height: 40%;\n        border-right: none;\n        border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .resize-handle[_ngcontent-%COMP%] {\n        display: none;\n    }\n\n    .query-viewer-panel[_ngcontent-%COMP%] {\n        height: 60%;\n    }\n}\n\n\n.query-viewer-header[_ngcontent-%COMP%]   .icon-btn[_ngcontent-%COMP%] {\n    background: transparent;\n    color: var(--mj-text-secondary);\n}\n\n.query-viewer-header[_ngcontent-%COMP%]   .icon-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n}\n\n\n.query-drawer-backdrop[_ngcontent-%COMP%] {\n    position: fixed;\n    inset: 0;\n    background: var(--mj-bg-overlay);\n    z-index: 1100;\n    animation: _ngcontent-%COMP%_backdropFadeIn 0.22s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_backdropFadeIn {\n    from { opacity: 0; }\n    to   { opacity: 1; }\n}\n\n\n.query-drawer[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 480px;\n    max-width: 96vw;\n    background: var(--mj-bg-surface);\n    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);\n    z-index: 1101;\n    display: flex;\n    flex-direction: column;\n    animation: _ngcontent-%COMP%_drawerSlideIn 0.22s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_drawerSlideIn {\n    from { transform: translateX(100%); }\n    to   { transform: translateX(0); }\n}\n\n\n.query-drawer-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    background: linear-gradient(135deg, var(--mj-brand-primary) 0%, var(--mj-brand-primary-hover) 100%);\n    color: var(--mj-text-inverse);\n    flex-shrink: 0;\n}\n\n.query-drawer-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    min-width: 0;\n}\n\n.query-drawer-title[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n    font-size: 18px;\n    opacity: 0.9;\n    flex-shrink: 0;\n}\n\n.query-drawer-title-main[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    line-height: 1.2;\n}\n\n.query-drawer-title-sub[_ngcontent-%COMP%] {\n    font-size: 12px;\n    opacity: 0.75;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 360px;\n    margin-top: 2px;\n}\n\n.query-drawer-close[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: rgba(255, 255, 255, 0.15);\n    color: var(--mj-text-inverse);\n    border-radius: 6px;\n    cursor: pointer;\n    font-size: 16px;\n    flex-shrink: 0;\n    transition: background 0.15s ease;\n}\n\n.query-drawer-close[_ngcontent-%COMP%]:hover {\n    background: rgba(255, 255, 255, 0.28);\n}\n\n\n.query-drawer-body[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n.query-drawer-body[_ngcontent-%COMP%]::-webkit-scrollbar { width: 6px; }\n.query-drawer-body[_ngcontent-%COMP%]::-webkit-scrollbar-track { background: var(--mj-bg-surface-sunken); }\n.query-drawer-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb { background: var(--mj-border-strong); border-radius: 3px; }\n.query-drawer-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover { background: var(--mj-text-disabled); }\n\n\n.drawer-field[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.drawer-row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n}\n\n.drawer-field-flex[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.drawer-field-sql[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.drawer-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.drawer-required[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    margin-left: 2px;\n}\n\n.drawer-input[_ngcontent-%COMP%], \n.drawer-select[_ngcontent-%COMP%], \n.drawer-textarea[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 8px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface);\n    box-sizing: border-box;\n    transition: border-color 0.15s ease, box-shadow 0.15s ease;\n    outline: none;\n    font-family: inherit;\n}\n\n.drawer-input[_ngcontent-%COMP%]:focus, \n.drawer-select[_ngcontent-%COMP%]:focus, \n.drawer-textarea[_ngcontent-%COMP%]:focus {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.drawer-input[_ngcontent-%COMP%]:disabled, \n.drawer-select[_ngcontent-%COMP%]:disabled, \n.drawer-textarea[_ngcontent-%COMP%]:disabled {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-disabled);\n    cursor: not-allowed;\n}\n\n.drawer-textarea[_ngcontent-%COMP%] {\n    resize: vertical;\n    min-height: 70px;\n}\n\n.drawer-sql-editor[_ngcontent-%COMP%] {\n    display: block;\n    min-height: 220px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.drawer-field-error[_ngcontent-%COMP%]   .drawer-input[_ngcontent-%COMP%], \n.drawer-field-error[_ngcontent-%COMP%]   .drawer-select[_ngcontent-%COMP%] {\n    border-color: var(--mj-status-error);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-error) 12%, transparent);\n}\n\n.drawer-field-hint[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-status-error);\n}\n\n.drawer-field-inline[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.drawer-field-inline[_ngcontent-%COMP%]   .drawer-field-hint[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n.drawer-reusable-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    cursor: pointer;\n    white-space: nowrap;\n}\n\n\n.drawer-full-record[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 10px 14px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-border-default));\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--mj-brand-primary-hover);\n    flex-wrap: wrap;\n}\n\n.drawer-full-record[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    color: var(--mj-brand-primary);\n}\n\n.drawer-link-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    color: var(--mj-brand-primary-hover);\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    padding: 0;\n    text-decoration: underline;\n    text-underline-offset: 2px;\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.drawer-link-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-brand-primary-active);\n}\n\n\n.query-drawer-footer[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    padding: 16px 20px;\n    border-top: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-card);\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.drawer-error[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--mj-status-error-bg);\n    border: 1px solid var(--mj-status-error-border);\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--mj-status-error-text);\n}\n\n.drawer-footer-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n\n.drawer-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 18px;\n    border-radius: 6px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    border: 1px solid transparent;\n    transition: all 0.15s ease;\n    white-space: nowrap;\n}\n\n.drawer-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n}\n\n.drawer-btn-primary[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border-color: var(--mj-brand-primary);\n}\n\n.drawer-btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: var(--mj-brand-primary-hover);\n    border-color: var(--mj-brand-primary-hover);\n}\n\n.drawer-btn-secondary[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    border-color: var(--mj-border-default);\n}\n\n.drawer-btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-primary);\n}\n\n\n@media (max-width: 600px) {\n    .query-drawer[_ngcontent-%COMP%] {\n        width: 100vw;\n        max-width: 100vw;\n    }\n\n    .drawer-row[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n}\n\n.drawer-diagnostics[_ngcontent-%COMP%] {\n  margin-bottom: var(--mj-space-3);\n  max-height: 40vh;\n  overflow: auto;\n}"], changeDetection: 0 });
 };
 QueryBrowserResourceComponent = QueryBrowserResourceComponent_1 = __decorate([
     RegisterClass(BaseResourceComponent, 'QueryBrowserResource')
@@ -2027,7 +2150,7 @@ QueryBrowserResourceComponent = QueryBrowserResourceComponent_1 = __decorate([
 export { QueryBrowserResourceComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(QueryBrowserResourceComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-query-browser-resource', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Query Browser Resource -->\n<div class=\"query-browser-container\" [class.resizing]=\"IsResizing\">\n  <!-- Left Panel: Query Tree -->\n  <div class=\"query-tree-panel\" [id]=\"TreePanelId\" [style.width.px]=\"PanelWidth\">\n    <!-- Header -->\n    <div class=\"tree-header\">\n      <div class=\"header-title\">\n        <i class=\"fa-solid fa-database\"></i>\n        <span>Queries</span>\n        <span class=\"query-count\">({{ getTotalQueryCount() }})</span>\n      </div>\n      <div class=\"header-actions\">\n        @if (CanCreateQuery) {\n          <button class=\"icon-btn\" (click)=\"OpenCreateDrawer()\" title=\"New Query\">\n            <i class=\"fa-solid fa-plus\"></i>\n          </button>\n        }\n        <button class=\"icon-btn\" (click)=\"expandAll()\" title=\"Expand all\">\n          <i class=\"fa-solid fa-folder-open\"></i>\n        </button>\n        <button class=\"icon-btn\" (click)=\"collapseAll()\" title=\"Collapse all\">\n          <i class=\"fa-solid fa-folder\"></i>\n        </button>\n        <button class=\"icon-btn\" (click)=\"refresh()\" title=\"Refresh\">\n          <i class=\"fa-solid fa-refresh\"></i>\n        </button>\n      </div>\n    </div>\n\n    <!-- Search -->\n    <div class=\"tree-search\">\n      <div class=\"search-input-wrapper\">\n        <i class=\"fa-solid fa-search search-icon\"></i>\n        <input type=\"text\"\n          class=\"search-input\"\n          [value]=\"searchText\"\n          placeholder=\"Search queries...\"\n          (input)=\"onSearchChange($any($event.target).value)\">\n        @if (searchText) {\n          <button class=\"clear-btn\" (click)=\"clearSearch()\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        }\n      </div>\n    </div>\n\n    <!-- Status Filters -->\n    <div class=\"status-filter-bar\">\n      @for (status of AllStatuses; track status) {\n        @if (getStatusCount(status) > 0) {\n          <button class=\"status-filter-chip\"\n            [class.active]=\"StatusFilters[status]\"\n            [style.--chip-color]=\"getStatusColor(status)\"\n            (click)=\"toggleStatusFilter(status)\"\n            [title]=\"(StatusFilters[status] ? 'Hide' : 'Show') + ' ' + status + ' queries'\">\n            <i class=\"fa-solid\" [class]=\"getStatusIcon(status)\"></i>\n            <span>{{ status }}</span>\n            <span class=\"chip-count\">{{ getStatusCount(status) }}</span>\n          </button>\n        }\n      }\n    </div>\n\n    <!-- Tree Content -->\n    <div class=\"tree-content\">\n      <!-- Loading -->\n      @if (isLoading) {\n        <div class=\"loading-state\">\n          <mj-loading text=\"Loading queries...\"></mj-loading>\n        </div>\n      }\n\n      <!-- Empty -->\n      @if (!isLoading && queries.length === 0) {\n        <mj-empty-state Size=\"compact\" Icon=\"fa-solid fa-database\"\n          Title=\"No queries available\" />\n      }\n\n      <!-- No results -->\n      @if (!isLoading && searchText && filteredQueries.length === 0) {\n        <mj-empty-state Size=\"compact\" Variant=\"no-results\"\n          Title=\"No queries found\"\n          [Message]=\"NoQueryResultsMessage\" />\n      }\n\n      <!-- Category Tree -->\n      @if (!isLoading && queries.length > 0) {\n        <div class=\"category-tree\">\n          @for (node of categoryTree; track trackByCategory($index, node)) {\n            <ng-container *ngTemplateOutlet=\"categoryNode; context: { node: node }\"></ng-container>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Resize Handle. A separator without tabindex is a static (decorative) separator per\n       ARIA, so tabindex, the keydown handler and aria-value* are what make it a widget. -->\n  <div class=\"resize-handle\"\n    role=\"separator\"\n    aria-orientation=\"vertical\"\n    aria-label=\"Resize query list panel\"\n    [attr.aria-controls]=\"TreePanelId\"\n    tabindex=\"0\"\n    [attr.aria-valuenow]=\"PanelWidth\"\n    [attr.aria-valuemin]=\"MinPanelWidth\"\n    [attr.aria-valuemax]=\"MaxPanelWidth\"\n    [class.active]=\"IsResizing\"\n    (mousedown)=\"OnResizeStart($event)\"\n    (keydown)=\"OnResizeKeydown($event)\">\n    <div class=\"resize-handle-grip\"></div>\n  </div>\n\n  <!-- Right Panel: Query Viewer -->\n  <div class=\"query-viewer-panel\">\n    <!-- No query selected -->\n    @if (!selectedQuery) {\n      <mj-empty-state class=\"no-selection\" Icon=\"fa-solid fa-hand-pointer\"\n        Title=\"Select a query from the list\"\n        Message=\"Click on a query to view and run it\"\n        [ActionText]=\"CanCreateQuery ? 'New Query' : ''\"\n        ActionIcon=\"fa-solid fa-plus\"\n        (Action)=\"OpenCreateDrawer()\" />\n    }\n\n    <!-- Query Viewer -->\n    @if (selectedQuery) {\n      <!-- Query Header with Status -->\n      <div class=\"query-viewer-header\">\n        <div class=\"query-viewer-title\">\n          <i class=\"fa-solid fa-file-code\"></i>\n          <span>{{ selectedQuery.Name }}</span>\n        </div>\n        <div class=\"query-viewer-header-actions\">\n          @if (selectedQuery.Status !== 'Approved') {\n            <span class=\"query-viewer-status-pill\"\n              [style.background]=\"getStatusColor(selectedQuery.Status)\">\n              <i class=\"fa-solid\" [class]=\"getStatusIcon(selectedQuery.Status)\"></i>\n              {{ selectedQuery.Status }}\n            </span>\n          } @else {\n            <span class=\"query-viewer-status-pill approved\"\n              [style.background]=\"getStatusColor('Approved')\">\n              <i class=\"fa-solid fa-check-circle\"></i>\n              Approved\n            </span>\n          }\n          @if (CanEditQuery) {\n            <button class=\"icon-btn\" (click)=\"OpenEditDrawer(selectedQuery)\" title=\"Edit Query\">\n              <i class=\"fa-solid fa-pen-to-square\"></i>\n            </button>\n          }\n        </div>\n      </div>\n      <mj-query-viewer\n        [QueryId]=\"selectedQuery.ID\"\n        [AutoRun]=\"true\"\n        [SelectionMode]=\"'multiple'\"\n        (EntityLinkClick)=\"onEntityLinkClick($event)\"\n        (RowDoubleClick)=\"onRowDoubleClick($event)\"\n        (OpenQueryRecord)=\"onOpenQueryRecord($event)\"\n        (CompositionTokenClick)=\"onCompositionTokenClick($event)\"\n        (QueryComplete)=\"onViewerQueryComplete($event)\">\n      </mj-query-viewer>\n    }\n  </div>\n</div>\n\n<!-- Category Node Template -->\n<ng-template #categoryNode let-node=\"node\">\n  @if (hasVisibleContent(node)) {\n    <div class=\"category-item\"\n      [class.expanded]=\"node.expanded\"\n      [style.padding-left.px]=\"node.level * 16 + 8\">\n      <div class=\"category-header\" (click)=\"toggleExpand(node)\">\n        <i class=\"fa-solid expand-icon\"\n          [class.fa-chevron-down]=\"node.expanded\"\n        [class.fa-chevron-right]=\"!node.expanded\"></i>\n        <i class=\"fa-solid fa-folder category-icon\"\n        [class.fa-folder-open]=\"node.expanded\"></i>\n        <span class=\"category-name\">{{ node.category.Name }}</span>\n        <span class=\"category-count\">({{ getNodeQueryCount(node) }})</span>\n        @if (CanCreateQuery && node.category.ID !== '__uncategorized__') {\n          <button class=\"category-add-btn\"\n            (click)=\"OpenCreateDrawer(node.category.ID); $event.stopPropagation()\"\n            title=\"New query in {{ node.category.Name }}\">\n            <i class=\"fa-solid fa-plus\"></i>\n          </button>\n        }\n      </div>\n      <!-- Queries in this category -->\n      @if (node.expanded) {\n        <div class=\"category-queries\">\n          @for (query of node.queries; track trackByQuery($index, query)) {\n            <div class=\"query-item\"\n              [class.selected]=\"IsQuerySelected(query)\"\n              [class.hidden]=\"!isQueryVisible(query)\"\n              (click)=\"selectQuery(query, $event)\">\n              <span class=\"status-dot\"\n                [style.background]=\"getStatusColor(query.Status)\"\n                [title]=\"query.Status\"></span>\n              <i class=\"fa-solid fa-file-code query-icon\"></i>\n              <div class=\"query-info\" [title]=\"query.Description || query.Name\">\n                <span class=\"query-name\">{{ query.Name }}</span>\n                @if (query.Description) {\n                  <span class=\"query-description\">{{ query.Description }}</span>\n                }\n              </div>\n              @if (query.UsesTemplate) {\n                <i class=\"fa-solid fa-sliders param-icon\" title=\"Has parameters\"></i>\n              }\n              @if (query.Status !== 'Approved') {\n                <span class=\"query-status-badge\"\n                  [style.background]=\"getStatusColor(query.Status)\"\n                  [title]=\"query.Status\">\n                  {{ query.Status }}\n                </span>\n              }\n              @if (CanEditQuery) {\n                <button class=\"query-details-btn\" (click)=\"OpenEditDrawer(query, $event)\" title=\"Edit query\">\n                  <i class=\"fa-solid fa-pen-to-square\"></i>\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n      <!-- Child categories -->\n      @if (node.expanded) {\n        @for (child of node.children; track trackByCategory($index, child)) {\n          <ng-container *ngTemplateOutlet=\"categoryNode; context: { node: child }\"></ng-container>\n        }\n      }\n    </div>\n  }\n</ng-template>\n\n<!-- Query Drawer Backdrop -->\n@if (ShowQueryDrawer) {\n  <div class=\"query-drawer-backdrop\" (click)=\"OnDrawerBackdropClick()\"></div>\n}\n\n<!-- Query Drawer Panel -->\n@if (ShowQueryDrawer) {\n  <div class=\"query-drawer\">\n\n    <!-- Drawer Header -->\n    <div class=\"query-drawer-header\">\n      <div class=\"query-drawer-title\">\n        <i class=\"fa-solid\" [class.fa-plus]=\"DrawerMode === 'create'\" [class.fa-pen-to-square]=\"DrawerMode === 'edit'\"></i>\n        <div>\n          <div class=\"query-drawer-title-main\">{{ DrawerMode === 'create' ? 'New Query' : 'Edit Query' }}</div>\n          @if (DrawerMode === 'edit' && DrawerName) {\n            <div class=\"query-drawer-title-sub\">{{ DrawerName }}</div>\n          }\n        </div>\n      </div>\n      <button class=\"query-drawer-close\" (click)=\"CloseDrawer()\" title=\"Close\" aria-label=\"Close\">\n        <i class=\"fa-solid fa-times\"></i>\n      </button>\n    </div>\n\n    <!-- Drawer Body -->\n    <div class=\"query-drawer-body\">\n\n      <!-- Name -->\n      <div class=\"drawer-field\" [class.drawer-field-error]=\"DrawerNameError\">\n        <label class=\"drawer-label\">Name <span class=\"drawer-required\">*</span></label>\n        <input class=\"drawer-input\"\n          type=\"text\"\n          [(ngModel)]=\"DrawerName\"\n          (ngModelChange)=\"DrawerNameError = false\"\n          placeholder=\"Enter query name\"\n          [disabled]=\"IsSavingDrawer\">\n        @if (DrawerNameError) {\n          <span class=\"drawer-field-hint\">Name is required</span>\n        }\n      </div>\n\n      <!-- Category + Status (side by side) -->\n      <div class=\"drawer-row\">\n        <div class=\"drawer-field drawer-field-flex\">\n          <label class=\"drawer-label\">Category</label>\n          <mj-tree-dropdown\n            [BranchConfig]=\"CategoryBranchConfig\"\n            [Value]=\"DrawerCategoryIDAsKey\"\n            [SelectableTypes]=\"'branch'\"\n            [SelectionMode]=\"'single'\"\n            [Placeholder]=\"'Select category...'\"\n            [EnableSearch]=\"true\"\n            [Clearable]=\"true\"\n            [Disabled]=\"IsSavingDrawer\"\n            (ValueChange)=\"OnDrawerCategoryChange($event)\">\n          </mj-tree-dropdown>\n        </div>\n        <div class=\"drawer-field drawer-field-flex\">\n          <label class=\"drawer-label\">Status</label>\n          <select class=\"drawer-select\"\n            [(ngModel)]=\"DrawerStatus\"\n            [disabled]=\"IsSavingDrawer\">\n            @for (s of DrawerStatuses; track s) {\n              <option [value]=\"s\">{{ s }}</option>\n            }\n          </select>\n        </div>\n      </div>\n\n      <!-- Reusable -->\n      <div class=\"drawer-field drawer-field-inline\">\n        <label class=\"mj-checkbox drawer-reusable-label\">\n          <input type=\"checkbox\"\n            [(ngModel)]=\"DrawerReusable\"\n            [disabled]=\"IsSavingDrawer\">\n          <span>Reusable</span>\n        </label>\n        <span class=\"drawer-field-hint\">Allow other queries to reference this query using composition syntax</span>\n      </div>\n\n      <!-- Description -->\n      <div class=\"drawer-field\">\n        <label class=\"drawer-label\">Description</label>\n        <textarea class=\"drawer-textarea\"\n          rows=\"3\"\n          [(ngModel)]=\"DrawerDescription\"\n          placeholder=\"Optional description\"\n          [disabled]=\"IsSavingDrawer\"></textarea>\n      </div>\n\n      <!-- SQL -->\n      <div class=\"drawer-field drawer-field-sql\">\n        <label class=\"drawer-label\">SQL</label>\n        <mj-code-editor #drawerSqlEditor\n          [language]=\"'sql'\"\n          [indentWithTab]=\"true\"\n          [readonly]=\"IsSavingDrawer\"\n          (change)=\"OnDrawerSQLChange($event)\"\n          class=\"drawer-sql-editor\">\n        </mj-code-editor>\n      </div>\n\n      <!-- Open Full Record link (edit mode only) -->\n      @if (DrawerMode === 'edit' && DrawerQueryId) {\n        <div class=\"drawer-full-record\">\n          <i class=\"fa-solid fa-circle-info\"></i>\n          To manage Parameters, Fields, and Permissions \u2014\n          <button class=\"drawer-link-btn\" (click)=\"OpenFullRecord()\">\n            Open full record <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n          </button>\n        </div>\n      }\n\n    </div>\n\n    <!-- Drawer Footer -->\n    <div class=\"query-drawer-footer\">\n\n      <!-- Error message -->\n      @if (DrawerSaveError) {\n        <div class=\"drawer-error\">\n          <i class=\"fa-solid fa-triangle-exclamation\"></i> {{ DrawerSaveError }}\n        </div>\n      }\n\n      <!-- Action buttons -->\n      <div class=\"drawer-footer-actions\">\n        <button class=\"drawer-btn drawer-btn-primary\"\n          (click)=\"SaveDrawer()\"\n          [disabled]=\"IsSavingDrawer || !DrawerName.trim()\">\n          @if (IsSavingDrawer) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i> Saving...\n          } @else {\n            <i class=\"fa-solid fa-floppy-disk\"></i> Save\n          }\n        </button>\n        <button class=\"drawer-btn drawer-btn-secondary\"\n          (click)=\"CloseDrawer()\"\n          [disabled]=\"IsSavingDrawer\">\n          Cancel\n        </button>\n      </div>\n\n    </div>\n\n  </div>\n}\n", styles: ["/* Query Browser Resource Styles */\n\n:host {\n    display: block;\n    height: 100%;\n}\n\n.query-browser-container {\n    display: flex;\n    height: 100%;\n    background: var(--mj-bg-surface-card);\n}\n\n/* Left Panel: Query Tree */\n.query-tree-panel {\n    flex-shrink: 0;\n    background: var(--mj-bg-surface);\n    border-right: 1px solid var(--mj-border-default);\n    display: flex;\n    flex-direction: column;\n    /* Width controlled by [style.width.px] binding */\n}\n\n/* Tree Header */\n.tree-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 16px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.header-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.header-title i {\n    font-size: 16px;\n}\n\n.query-count {\n    font-weight: 400;\n    opacity: 0.8;\n    font-size: 13px;\n}\n\n.header-actions {\n    display: flex;\n    gap: 4px;\n}\n\n.icon-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    border: none;\n    background: color-mix(in srgb, var(--mj-text-inverse) 15%, transparent);\n    color: var(--mj-text-inverse);\n    border-radius: 4px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.icon-btn:hover {\n    background: color-mix(in srgb, var(--mj-text-inverse) 25%, transparent);\n}\n\n/* Tree Search */\n.tree-search {\n    padding: 12px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-input-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    padding-left: 10px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 4px;\n    background: var(--mj-bg-surface);\n    transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.search-input-wrapper:focus-within {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-icon {\n    color: var(--mj-text-disabled);\n    font-size: 14px;\n    flex-shrink: 0;\n}\n\n.search-input {\n    flex: 1;\n    min-width: 0;\n    border: none;\n    outline: none;\n    padding: 8px 0;\n    font-size: 14px;\n    background: transparent;\n}\n\n.search-input::placeholder {\n    color: var(--mj-text-disabled);\n}\n\n.clear-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    margin-right: 4px;\n    border-radius: 4px;\n}\n\n.clear-btn:hover {\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface-sunken);\n}\n\n/* Status Filter Bar */\n.status-filter-bar {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    padding: 8px 12px;\n    border-bottom: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-card);\n}\n\n.status-filter-chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 8px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 12px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-disabled);\n    font-size: 11px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    line-height: 1.2;\n}\n\n.status-filter-chip:hover {\n    border-color: var(--chip-color, var(--mj-text-disabled));\n    color: var(--chip-color, var(--mj-text-disabled));\n}\n\n.status-filter-chip.active {\n    background: var(--chip-color, var(--mj-text-disabled));\n    border-color: var(--chip-color, var(--mj-text-disabled));\n    color: var(--mj-text-inverse);\n}\n\n.status-filter-chip i {\n    font-size: 10px;\n}\n\n.chip-count {\n    font-weight: 600;\n    font-size: 10px;\n    opacity: 0.85;\n}\n\n/* Status Dot on Query Items */\n.status-dot {\n    display: inline-block;\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    flex-shrink: 0;\n    margin-top: 4px;\n}\n\n/* Status Badge on Non-Approved Queries */\n.query-status-badge {\n    font-size: 9px;\n    color: var(--mj-text-inverse);\n    padding: 1px 6px;\n    border-radius: 8px;\n    flex-shrink: 0;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n    margin-top: 2px;\n}\n\n/* Tree Content */\n.tree-content {\n    flex: 1;\n    overflow-y: auto;\n    padding: 8px 0;\n}\n\n/* Loading State */\n.loading-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    text-align: center;\n}\n\n/* Category Tree */\n.category-tree {\n    padding: 0 4px;\n}\n\n.category-item {\n    margin-bottom: 2px;\n}\n\n.category-header {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 12px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: background 0.15s ease;\n}\n\n.category-header:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.expand-icon {\n    font-size: 10px;\n    color: var(--mj-text-disabled);\n    width: 12px;\n    text-align: center;\n}\n\n.category-icon {\n    color: var(--mj-status-warning);\n    font-size: 14px;\n}\n\n.category-name {\n    flex: 1;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    font-size: 13px;\n}\n\n.category-count {\n    color: var(--mj-text-disabled);\n    font-size: 12px;\n}\n\n.category-add-btn {\n    display: none;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    border: none;\n    border-radius: 4px;\n    background: transparent;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    font-size: 11px;\n    flex-shrink: 0;\n    transition: background 0.15s ease, color 0.15s ease;\n}\n\n.category-header:hover .category-add-btn {\n    display: flex;\n}\n\n.category-add-btn:hover {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n/* Query Items */\n.category-queries {\n    margin-left: 28px;\n}\n\n.query-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n    padding: 8px 12px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s ease;\n    margin: 2px 0;\n}\n\n.query-item:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.query-item.selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-left: 3px solid var(--mj-status-info);\n    margin-left: -3px;\n}\n\n.query-item.hidden {\n    display: none;\n}\n\n.query-icon {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n    margin-top: 2px;\n}\n\n.query-info {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.query-name {\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.query-description {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.param-icon {\n    color: var(--mj-status-warning);\n    font-size: 12px;\n    margin-top: 2px;\n}\n\n.query-details-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    border-radius: 4px;\n    opacity: 0;\n    transition: all 0.15s ease;\n    flex-shrink: 0;\n}\n\n.query-item:hover .query-details-btn {\n    opacity: 1;\n}\n\n.query-details-btn:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n/* Resize Handle */\n.resize-handle {\n    flex-shrink: 0;\n    width: 6px;\n    cursor: col-resize;\n    background: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background 0.15s ease;\n    position: relative;\n    z-index: 10;\n}\n\n.resize-handle:hover,\n.resize-handle:focus-visible,\n.resize-handle.active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n/* The handle is a keyboard-operable widget (arrows/Home/End), so it needs a visible\n   focus ring \u2014 the 6px hover tint alone is too subtle to serve as one. */\n.resize-handle:focus-visible {\n    outline: var(--mj-ring-width) solid var(--mj-focus-ring-color);\n    outline-offset: -1px;\n}\n\n.resize-handle-grip {\n    width: 2px;\n    height: 32px;\n    border-radius: 1px;\n    background: var(--mj-border-strong);\n    transition: background 0.15s ease;\n}\n\n.resize-handle:hover .resize-handle-grip,\n.resize-handle:focus-visible .resize-handle-grip,\n.resize-handle.active .resize-handle-grip {\n    background: var(--mj-brand-primary);\n}\n\n/* Prevent text selection and set cursor during resize */\n.query-browser-container.resizing {\n    cursor: col-resize;\n    user-select: none;\n}\n\n.query-browser-container.resizing * {\n    pointer-events: none;\n}\n\n.query-browser-container.resizing .resize-handle {\n    pointer-events: auto;\n}\n\n/* Right Panel: Query Viewer */\n.query-viewer-panel {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n}\n\n/* No Selection State \u2014 fills the viewer panel (host centers its own content) */\n.no-selection {\n    flex: 1;\n}\n\n/* Query Viewer Header */\n.query-viewer-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 16px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.query-viewer-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    min-width: 0;\n    overflow: hidden;\n}\n\n.query-viewer-title i {\n    color: var(--mj-brand-primary);\n    font-size: 16px;\n    flex-shrink: 0;\n}\n\n.query-viewer-title span {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.query-viewer-status-pill {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    border-radius: 14px;\n    color: var(--mj-text-inverse);\n    font-size: 13px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    flex-shrink: 0;\n}\n\n.query-viewer-status-pill i {\n    font-size: 12px;\n}\n\n.query-viewer-status-pill.approved {\n    opacity: 0.7;\n}\n\n.query-viewer-header-actions {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-shrink: 0;\n}\n\n/* Query Viewer fills remaining space */\nmj-query-viewer {\n    flex: 1;\n    min-height: 0;\n}\n\n/* Scrollbar styling */\n.tree-content::-webkit-scrollbar {\n    width: 6px;\n}\n\n.tree-content::-webkit-scrollbar-track {\n    background: var(--mj-bg-surface-card);\n}\n\n.tree-content::-webkit-scrollbar-thumb {\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n}\n\n.tree-content::-webkit-scrollbar-thumb:hover {\n    background: var(--mj-text-disabled);\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n    .query-browser-container {\n        flex-direction: column;\n    }\n\n    .query-tree-panel {\n        width: 100% !important;\n        height: 40%;\n        border-right: none;\n        border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .resize-handle {\n        display: none;\n    }\n\n    .query-viewer-panel {\n        height: 60%;\n    }\n}\n\n/* \u2500\u2500\u2500 Right-panel icon button override (white background context) \u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-viewer-header .icon-btn {\n    background: transparent;\n    color: var(--mj-text-secondary);\n}\n\n.query-viewer-header .icon-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n}\n\n/* \u2500\u2500\u2500 Drawer Backdrop \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-drawer-backdrop {\n    position: fixed;\n    inset: 0;\n    background: var(--mj-bg-overlay);\n    z-index: 1100;\n    animation: backdropFadeIn 0.22s ease-out;\n}\n\n@keyframes backdropFadeIn {\n    from { opacity: 0; }\n    to   { opacity: 1; }\n}\n\n/* \u2500\u2500\u2500 Drawer Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-drawer {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 480px;\n    max-width: 96vw;\n    background: var(--mj-bg-surface);\n    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);\n    z-index: 1101;\n    display: flex;\n    flex-direction: column;\n    animation: drawerSlideIn 0.22s ease-out;\n}\n\n@keyframes drawerSlideIn {\n    from { transform: translateX(100%); }\n    to   { transform: translateX(0); }\n}\n\n/* \u2500\u2500\u2500 Drawer Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-drawer-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    background: linear-gradient(135deg, var(--mj-brand-primary) 0%, var(--mj-brand-primary-hover) 100%);\n    color: var(--mj-text-inverse);\n    flex-shrink: 0;\n}\n\n.query-drawer-title {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    min-width: 0;\n}\n\n.query-drawer-title > i {\n    font-size: 18px;\n    opacity: 0.9;\n    flex-shrink: 0;\n}\n\n.query-drawer-title-main {\n    font-size: 16px;\n    font-weight: 600;\n    line-height: 1.2;\n}\n\n.query-drawer-title-sub {\n    font-size: 12px;\n    opacity: 0.75;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 360px;\n    margin-top: 2px;\n}\n\n.query-drawer-close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: rgba(255, 255, 255, 0.15);\n    color: var(--mj-text-inverse);\n    border-radius: 6px;\n    cursor: pointer;\n    font-size: 16px;\n    flex-shrink: 0;\n    transition: background 0.15s ease;\n}\n\n.query-drawer-close:hover {\n    background: rgba(255, 255, 255, 0.28);\n}\n\n/* \u2500\u2500\u2500 Drawer Body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-drawer-body {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n.query-drawer-body::-webkit-scrollbar { width: 6px; }\n.query-drawer-body::-webkit-scrollbar-track { background: var(--mj-bg-surface-sunken); }\n.query-drawer-body::-webkit-scrollbar-thumb { background: var(--mj-border-strong); border-radius: 3px; }\n.query-drawer-body::-webkit-scrollbar-thumb:hover { background: var(--mj-text-disabled); }\n\n/* \u2500\u2500\u2500 Drawer Form Fields \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.drawer-field {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.drawer-row {\n    display: flex;\n    gap: 12px;\n}\n\n.drawer-field-flex {\n    flex: 1;\n    min-width: 0;\n}\n\n.drawer-field-sql {\n    flex: 1;\n}\n\n.drawer-label {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.drawer-required {\n    color: var(--mj-status-error);\n    margin-left: 2px;\n}\n\n.drawer-input,\n.drawer-select,\n.drawer-textarea {\n    width: 100%;\n    padding: 8px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface);\n    box-sizing: border-box;\n    transition: border-color 0.15s ease, box-shadow 0.15s ease;\n    outline: none;\n    font-family: inherit;\n}\n\n.drawer-input:focus,\n.drawer-select:focus,\n.drawer-textarea:focus {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.drawer-input:disabled,\n.drawer-select:disabled,\n.drawer-textarea:disabled {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-disabled);\n    cursor: not-allowed;\n}\n\n.drawer-textarea {\n    resize: vertical;\n    min-height: 70px;\n}\n\n.drawer-sql-editor {\n    display: block;\n    min-height: 220px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.drawer-field-error .drawer-input,\n.drawer-field-error .drawer-select {\n    border-color: var(--mj-status-error);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-error) 12%, transparent);\n}\n\n.drawer-field-hint {\n    font-size: 12px;\n    color: var(--mj-status-error);\n}\n\n.drawer-field-inline {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.drawer-field-inline .drawer-field-hint {\n    color: var(--mj-text-muted);\n}\n\n.drawer-reusable-label {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    cursor: pointer;\n    white-space: nowrap;\n}\n\n/* \u2500\u2500\u2500 Open Full Record link \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.drawer-full-record {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 10px 14px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-border-default));\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--mj-brand-primary-hover);\n    flex-wrap: wrap;\n}\n\n.drawer-full-record > i {\n    flex-shrink: 0;\n    color: var(--mj-brand-primary);\n}\n\n.drawer-link-btn {\n    background: none;\n    border: none;\n    color: var(--mj-brand-primary-hover);\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    padding: 0;\n    text-decoration: underline;\n    text-underline-offset: 2px;\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.drawer-link-btn:hover {\n    color: var(--mj-brand-primary-active);\n}\n\n/* \u2500\u2500\u2500 Drawer Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-drawer-footer {\n    flex-shrink: 0;\n    padding: 16px 20px;\n    border-top: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-card);\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.drawer-error {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--mj-status-error-bg);\n    border: 1px solid var(--mj-status-error-border);\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--mj-status-error-text);\n}\n\n.drawer-footer-actions {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n/* \u2500\u2500\u2500 Drawer Buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.drawer-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 18px;\n    border-radius: 6px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    border: 1px solid transparent;\n    transition: all 0.15s ease;\n    white-space: nowrap;\n}\n\n.drawer-btn:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n}\n\n.drawer-btn-primary {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border-color: var(--mj-brand-primary);\n}\n\n.drawer-btn-primary:hover:not(:disabled) {\n    background: var(--mj-brand-primary-hover);\n    border-color: var(--mj-brand-primary-hover);\n}\n\n.drawer-btn-secondary {\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    border-color: var(--mj-border-default);\n}\n\n.drawer-btn-secondary:hover:not(:disabled) {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-primary);\n}\n\n/* \u2500\u2500\u2500 Responsive drawer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@media (max-width: 600px) {\n    .query-drawer {\n        width: 100vw;\n        max-width: 100vw;\n    }\n\n    .drawer-row {\n        flex-direction: column;\n    }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-query-browser-resource', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Query Browser Resource -->\n<div class=\"query-browser-container\" [class.resizing]=\"IsResizing\">\n  <!-- Left Panel: Query Tree -->\n  <div class=\"query-tree-panel\" [id]=\"TreePanelId\" [style.width.px]=\"PanelWidth\">\n    <!-- Header -->\n    <div class=\"tree-header\">\n      <div class=\"header-title\">\n        <i class=\"fa-solid fa-database\"></i>\n        <span>Queries</span>\n        <span class=\"query-count\">({{ getTotalQueryCount() }})</span>\n      </div>\n      <div class=\"header-actions\">\n        @if (CanCreateQuery) {\n          <button class=\"icon-btn\" (click)=\"OpenCreateDrawer()\" title=\"New Query\">\n            <i class=\"fa-solid fa-plus\"></i>\n          </button>\n        }\n        <button class=\"icon-btn\" (click)=\"expandAll()\" title=\"Expand all\">\n          <i class=\"fa-solid fa-folder-open\"></i>\n        </button>\n        <button class=\"icon-btn\" (click)=\"collapseAll()\" title=\"Collapse all\">\n          <i class=\"fa-solid fa-folder\"></i>\n        </button>\n        <button class=\"icon-btn\" (click)=\"refresh()\" title=\"Refresh\">\n          <i class=\"fa-solid fa-refresh\"></i>\n        </button>\n        @if (CanEditQuery) {\n          <button class=\"icon-btn\" (click)=\"OpenRefreshForAll()\" title=\"Refresh the metadata of all queries (dry run first)\"\n            aria-label=\"Refresh the metadata of all queries\">\n            <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n          </button>\n        }\n      </div>\n    </div>\n\n    <!-- Search -->\n    <div class=\"tree-search\">\n      <div class=\"search-input-wrapper\">\n        <i class=\"fa-solid fa-search search-icon\"></i>\n        <input type=\"text\"\n          class=\"search-input\"\n          [value]=\"searchText\"\n          placeholder=\"Search queries...\"\n          (input)=\"onSearchChange($any($event.target).value)\">\n        @if (searchText) {\n          <button class=\"clear-btn\" (click)=\"clearSearch()\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        }\n      </div>\n    </div>\n\n    <!-- Status Filters -->\n    <div class=\"status-filter-bar\">\n      @for (status of AllStatuses; track status) {\n        @if (getStatusCount(status) > 0) {\n          <button class=\"status-filter-chip\"\n            [class.active]=\"StatusFilters[status]\"\n            [style.--chip-color]=\"getStatusColor(status)\"\n            (click)=\"toggleStatusFilter(status)\"\n            [title]=\"(StatusFilters[status] ? 'Hide' : 'Show') + ' ' + status + ' queries'\">\n            <i class=\"fa-solid\" [class]=\"getStatusIcon(status)\"></i>\n            <span>{{ status }}</span>\n            <span class=\"chip-count\">{{ getStatusCount(status) }}</span>\n          </button>\n        }\n      }\n    </div>\n\n    <!-- Tree Content -->\n    <div class=\"tree-content\">\n      <!-- Loading -->\n      @if (isLoading) {\n        <div class=\"loading-state\">\n          <mj-loading text=\"Loading queries...\"></mj-loading>\n        </div>\n      }\n\n      <!-- Empty -->\n      @if (!isLoading && queries.length === 0) {\n        <mj-empty-state Size=\"compact\" Icon=\"fa-solid fa-database\"\n          Title=\"No queries available\" />\n      }\n\n      <!-- No results -->\n      @if (!isLoading && searchText && filteredQueries.length === 0) {\n        <mj-empty-state Size=\"compact\" Variant=\"no-results\"\n          Title=\"No queries found\"\n          [Message]=\"NoQueryResultsMessage\" />\n      }\n\n      <!-- Category Tree -->\n      @if (!isLoading && queries.length > 0) {\n        <div class=\"category-tree\">\n          @for (node of categoryTree; track trackByCategory($index, node)) {\n            <ng-container *ngTemplateOutlet=\"categoryNode; context: { node: node }\"></ng-container>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Resize Handle. A separator without tabindex is a static (decorative) separator per\n       ARIA, so tabindex, the keydown handler and aria-value* are what make it a widget. -->\n  <div class=\"resize-handle\"\n    role=\"separator\"\n    aria-orientation=\"vertical\"\n    aria-label=\"Resize query list panel\"\n    [attr.aria-controls]=\"TreePanelId\"\n    tabindex=\"0\"\n    [attr.aria-valuenow]=\"PanelWidth\"\n    [attr.aria-valuemin]=\"MinPanelWidth\"\n    [attr.aria-valuemax]=\"MaxPanelWidth\"\n    [class.active]=\"IsResizing\"\n    (mousedown)=\"OnResizeStart($event)\"\n    (keydown)=\"OnResizeKeydown($event)\">\n    <div class=\"resize-handle-grip\"></div>\n  </div>\n\n  <!-- Right Panel: Query Viewer -->\n  <div class=\"query-viewer-panel\">\n    <!-- No query selected -->\n    @if (!selectedQuery) {\n      <mj-empty-state class=\"no-selection\" Icon=\"fa-solid fa-hand-pointer\"\n        Title=\"Select a query from the list\"\n        Message=\"Click on a query to view and run it\"\n        [ActionText]=\"CanCreateQuery ? 'New Query' : ''\"\n        ActionIcon=\"fa-solid fa-plus\"\n        (Action)=\"OpenCreateDrawer()\" />\n    }\n\n    <!-- Query Viewer -->\n    @if (selectedQuery) {\n      <!-- Query Header with Status -->\n      <div class=\"query-viewer-header\">\n        <div class=\"query-viewer-title\">\n          <i class=\"fa-solid fa-file-code\"></i>\n          <span>{{ selectedQuery.Name }}</span>\n        </div>\n        <div class=\"query-viewer-header-actions\">\n          @if (selectedQuery.Status !== 'Approved') {\n            <span class=\"query-viewer-status-pill\"\n              [style.background]=\"getStatusColor(selectedQuery.Status)\">\n              <i class=\"fa-solid\" [class]=\"getStatusIcon(selectedQuery.Status)\"></i>\n              {{ selectedQuery.Status }}\n            </span>\n          } @else {\n            <span class=\"query-viewer-status-pill approved\"\n              [style.background]=\"getStatusColor('Approved')\">\n              <i class=\"fa-solid fa-check-circle\"></i>\n              Approved\n            </span>\n          }\n          @if (CanEditQuery) {\n            <button class=\"icon-btn\" (click)=\"OpenRefreshForQuery(selectedQuery)\" title=\"Refresh this query's metadata (dry run first)\"\n              aria-label=\"Refresh this query's metadata\">\n              <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n            </button>\n            <button class=\"icon-btn\" (click)=\"OpenEditDrawer(selectedQuery)\" title=\"Edit Query\">\n              <i class=\"fa-solid fa-pen-to-square\"></i>\n            </button>\n          }\n        </div>\n      </div>\n      <mj-query-viewer\n        [QueryId]=\"selectedQuery.ID\"\n        [AutoRun]=\"true\"\n        [SelectionMode]=\"'multiple'\"\n        (EntityLinkClick)=\"onEntityLinkClick($event)\"\n        (RowDoubleClick)=\"onRowDoubleClick($event)\"\n        (OpenQueryRecord)=\"onOpenQueryRecord($event)\"\n        (CompositionTokenClick)=\"onCompositionTokenClick($event)\"\n        (QueryComplete)=\"onViewerQueryComplete($event)\">\n      </mj-query-viewer>\n    }\n  </div>\n</div>\n\n<!-- Category Node Template -->\n<ng-template #categoryNode let-node=\"node\">\n  @if (hasVisibleContent(node)) {\n    <div class=\"category-item\"\n      [class.expanded]=\"node.expanded\"\n      [style.padding-left.px]=\"node.level * 16 + 8\">\n      <div class=\"category-header\" (click)=\"toggleExpand(node)\">\n        <i class=\"fa-solid expand-icon\"\n          [class.fa-chevron-down]=\"node.expanded\"\n        [class.fa-chevron-right]=\"!node.expanded\"></i>\n        <i class=\"fa-solid fa-folder category-icon\"\n        [class.fa-folder-open]=\"node.expanded\"></i>\n        <span class=\"category-name\">{{ node.category.Name }}</span>\n        <span class=\"category-count\">({{ getNodeQueryCount(node) }})</span>\n        @if (CanEditQuery && node.category.ID !== '__uncategorized__') {\n          <button class=\"category-add-btn category-refresh-btn\"\n            (click)=\"OpenRefreshForCategory(node, $event)\"\n            [title]=\"'Refresh the metadata of the queries in ' + node.category.Name + ' (dry run first)'\"\n            [attr.aria-label]=\"'Refresh the metadata of the queries in ' + node.category.Name\">\n            <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n          </button>\n        }\n        @if (CanCreateQuery && node.category.ID !== '__uncategorized__') {\n          <button class=\"category-add-btn\"\n            (click)=\"OpenCreateDrawer(node.category.ID); $event.stopPropagation()\"\n            title=\"New query in {{ node.category.Name }}\">\n            <i class=\"fa-solid fa-plus\"></i>\n          </button>\n        }\n      </div>\n      <!-- Queries in this category -->\n      @if (node.expanded) {\n        <div class=\"category-queries\">\n          @for (query of node.queries; track trackByQuery($index, query)) {\n            <div class=\"query-item\"\n              [class.selected]=\"IsQuerySelected(query)\"\n              [class.hidden]=\"!isQueryVisible(query)\"\n              (click)=\"selectQuery(query, $event)\">\n              <span class=\"status-dot\"\n                [style.background]=\"getStatusColor(query.Status)\"\n                [title]=\"query.Status\"></span>\n              <i class=\"fa-solid fa-file-code query-icon\"></i>\n              <div class=\"query-info\" [title]=\"query.Description || query.Name\">\n                <span class=\"query-name\">{{ query.Name }}</span>\n                @if (query.Description) {\n                  <span class=\"query-description\">{{ query.Description }}</span>\n                }\n              </div>\n              @if (query.UsesTemplate) {\n                <i class=\"fa-solid fa-sliders param-icon\" title=\"Has parameters\"></i>\n              }\n              @if (query.Status !== 'Approved') {\n                <span class=\"query-status-badge\"\n                  [style.background]=\"getStatusColor(query.Status)\"\n                  [title]=\"query.Status\">\n                  {{ query.Status }}\n                </span>\n              }\n              @if (CanEditQuery) {\n                <button class=\"query-details-btn\" (click)=\"OpenEditDrawer(query, $event)\" title=\"Edit query\">\n                  <i class=\"fa-solid fa-pen-to-square\"></i>\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n      <!-- Child categories -->\n      @if (node.expanded) {\n        @for (child of node.children; track trackByCategory($index, child)) {\n          <ng-container *ngTemplateOutlet=\"categoryNode; context: { node: child }\"></ng-container>\n        }\n      }\n    </div>\n  }\n</ng-template>\n\n<!-- Query Drawer Backdrop -->\n@if (ShowQueryDrawer) {\n  <div class=\"query-drawer-backdrop\" (click)=\"OnDrawerBackdropClick()\"></div>\n}\n\n<!-- Query Drawer Panel -->\n@if (ShowQueryDrawer) {\n  <div class=\"query-drawer\">\n\n    <!-- Drawer Header -->\n    <div class=\"query-drawer-header\">\n      <div class=\"query-drawer-title\">\n        <i class=\"fa-solid\" [class.fa-plus]=\"DrawerMode === 'create'\" [class.fa-pen-to-square]=\"DrawerMode === 'edit'\"></i>\n        <div>\n          <div class=\"query-drawer-title-main\">{{ DrawerMode === 'create' ? 'New Query' : 'Edit Query' }}</div>\n          @if (DrawerMode === 'edit' && DrawerName) {\n            <div class=\"query-drawer-title-sub\">{{ DrawerName }}</div>\n          }\n        </div>\n      </div>\n      <button class=\"query-drawer-close\" (click)=\"CloseDrawer()\" title=\"Close\" aria-label=\"Close\">\n        <i class=\"fa-solid fa-times\"></i>\n      </button>\n    </div>\n\n    <!-- Drawer Body -->\n    <div class=\"query-drawer-body\">\n\n      <!-- Name -->\n      <div class=\"drawer-field\" [class.drawer-field-error]=\"DrawerNameError\">\n        <label class=\"drawer-label\">Name <span class=\"drawer-required\">*</span></label>\n        <input class=\"drawer-input\"\n          type=\"text\"\n          [(ngModel)]=\"DrawerName\"\n          (ngModelChange)=\"DrawerNameError = false\"\n          placeholder=\"Enter query name\"\n          [disabled]=\"IsSavingDrawer\">\n        @if (DrawerNameError) {\n          <span class=\"drawer-field-hint\">Name is required</span>\n        }\n      </div>\n\n      <!-- Category + Status (side by side) -->\n      <div class=\"drawer-row\">\n        <div class=\"drawer-field drawer-field-flex\">\n          <label class=\"drawer-label\">Category</label>\n          <mj-tree-dropdown\n            [BranchConfig]=\"CategoryBranchConfig\"\n            [Value]=\"DrawerCategoryIDAsKey\"\n            [SelectableTypes]=\"'branch'\"\n            [SelectionMode]=\"'single'\"\n            [Placeholder]=\"'Select category...'\"\n            [EnableSearch]=\"true\"\n            [Clearable]=\"true\"\n            [Disabled]=\"IsSavingDrawer\"\n            (ValueChange)=\"OnDrawerCategoryChange($event)\">\n          </mj-tree-dropdown>\n        </div>\n        <div class=\"drawer-field drawer-field-flex\">\n          <label class=\"drawer-label\">Status</label>\n          <select class=\"drawer-select\"\n            [(ngModel)]=\"DrawerStatus\"\n            [disabled]=\"IsSavingDrawer\">\n            @for (s of DrawerStatuses; track s) {\n              <option [value]=\"s\">{{ s }}</option>\n            }\n          </select>\n        </div>\n      </div>\n\n      <!-- Reusable -->\n      <div class=\"drawer-field drawer-field-inline\">\n        <label class=\"mj-checkbox drawer-reusable-label\">\n          <input type=\"checkbox\"\n            [(ngModel)]=\"DrawerReusable\"\n            [disabled]=\"IsSavingDrawer\">\n          <span>Reusable</span>\n        </label>\n        <span class=\"drawer-field-hint\">Allow other queries to reference this query using composition syntax</span>\n      </div>\n\n      <!-- Description -->\n      <div class=\"drawer-field\">\n        <label class=\"drawer-label\">Description</label>\n        <textarea class=\"drawer-textarea\"\n          rows=\"3\"\n          [(ngModel)]=\"DrawerDescription\"\n          placeholder=\"Optional description\"\n          [disabled]=\"IsSavingDrawer\"></textarea>\n      </div>\n\n      <!-- SQL -->\n      <div class=\"drawer-field drawer-field-sql\">\n        <label class=\"drawer-label\">SQL</label>\n        <mj-code-editor #drawerSqlEditor\n          [language]=\"'sql'\"\n          [indentWithTab]=\"true\"\n          [readonly]=\"IsSavingDrawer\"\n          (change)=\"OnDrawerSQLChange($event)\"\n          class=\"drawer-sql-editor\">\n        </mj-code-editor>\n      </div>\n\n      <!-- Open Full Record link (edit mode only) -->\n      @if (DrawerMode === 'edit' && DrawerQueryId) {\n        <div class=\"drawer-full-record\">\n          <i class=\"fa-solid fa-circle-info\"></i>\n          To manage Parameters, Fields, and Permissions \u2014\n          <button class=\"drawer-link-btn\" (click)=\"OpenFullRecord()\">\n            Open full record <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n          </button>\n        </div>\n      }\n\n    </div>\n\n    <!-- Drawer Footer -->\n    <div class=\"query-drawer-footer\">\n\n      <!-- Error message -->\n      @if (DrawerSaveDiagnostics.length > 0) {\n        <mj-query-diagnostics class=\"drawer-diagnostics\" [Headline]=\"DrawerSaveError\" [Diagnostics]=\"DrawerSaveDiagnostics\" Severity=\"error\" />\n      } @else if (DrawerSaveError) {\n        <div class=\"drawer-error\">\n          <i class=\"fa-solid fa-triangle-exclamation\"></i> {{ DrawerSaveError }}\n        </div>\n      }\n\n      <!-- Action buttons -->\n      <div class=\"drawer-footer-actions\">\n        <button class=\"drawer-btn drawer-btn-primary\"\n          (click)=\"SaveDrawer()\"\n          [disabled]=\"IsSavingDrawer || !DrawerName.trim()\">\n          @if (IsSavingDrawer) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i> Saving...\n          } @else {\n            <i class=\"fa-solid fa-floppy-disk\"></i> Save\n          }\n        </button>\n        <button class=\"drawer-btn drawer-btn-secondary\"\n          (click)=\"CloseDrawer()\"\n          [disabled]=\"IsSavingDrawer\">\n          Cancel\n        </button>\n      </div>\n\n    </div>\n\n  </div>\n}\n\n<!-- Refresh metadata: dry run first, then apply; live progress per query -->\n<mj-query-refresh-dialog\n  [Visible]=\"ShowRefreshDialog\"\n  [Scope]=\"RefreshScope\"\n  [ScopeLabel]=\"RefreshScopeLabel\"\n  [AllowOpenQuery]=\"true\"\n  [AllowSkipDryRun]=\"RefreshScope?.Kind === 'Queries'\"\n  [Provider]=\"ProviderToUse\"\n  (Closed)=\"OnRefreshDialogClosed()\"\n  (Applied)=\"OnRefreshApplied()\"\n  (OpenQuery)=\"OnRefreshOpenQuery($event)\" />\n", styles: ["/* Query Browser Resource Styles */\n\n:host {\n    display: block;\n    height: 100%;\n}\n\n.query-browser-container {\n    display: flex;\n    height: 100%;\n    background: var(--mj-bg-surface-card);\n}\n\n/* Left Panel: Query Tree */\n.query-tree-panel {\n    flex-shrink: 0;\n    background: var(--mj-bg-surface);\n    border-right: 1px solid var(--mj-border-default);\n    display: flex;\n    flex-direction: column;\n    /* Width controlled by [style.width.px] binding */\n}\n\n/* Tree Header */\n.tree-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 16px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.header-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.header-title i {\n    font-size: 16px;\n}\n\n.query-count {\n    font-weight: 400;\n    opacity: 0.8;\n    font-size: 13px;\n}\n\n.header-actions {\n    display: flex;\n    gap: 4px;\n}\n\n.icon-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    border: none;\n    background: color-mix(in srgb, var(--mj-text-inverse) 15%, transparent);\n    color: var(--mj-text-inverse);\n    border-radius: 4px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.icon-btn:hover {\n    background: color-mix(in srgb, var(--mj-text-inverse) 25%, transparent);\n}\n\n/* Tree Search */\n.tree-search {\n    padding: 12px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-input-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    padding-left: 10px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 4px;\n    background: var(--mj-bg-surface);\n    transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.search-input-wrapper:focus-within {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-icon {\n    color: var(--mj-text-disabled);\n    font-size: 14px;\n    flex-shrink: 0;\n}\n\n.search-input {\n    flex: 1;\n    min-width: 0;\n    border: none;\n    outline: none;\n    padding: 8px 0;\n    font-size: 14px;\n    background: transparent;\n}\n\n.search-input::placeholder {\n    color: var(--mj-text-disabled);\n}\n\n.clear-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    margin-right: 4px;\n    border-radius: 4px;\n}\n\n.clear-btn:hover {\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface-sunken);\n}\n\n/* Status Filter Bar */\n.status-filter-bar {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    padding: 8px 12px;\n    border-bottom: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-card);\n}\n\n.status-filter-chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 8px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 12px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-disabled);\n    font-size: 11px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    line-height: 1.2;\n}\n\n.status-filter-chip:hover {\n    border-color: var(--chip-color, var(--mj-text-disabled));\n    color: var(--chip-color, var(--mj-text-disabled));\n}\n\n.status-filter-chip.active {\n    background: var(--chip-color, var(--mj-text-disabled));\n    border-color: var(--chip-color, var(--mj-text-disabled));\n    color: var(--mj-text-inverse);\n}\n\n.status-filter-chip i {\n    font-size: 10px;\n}\n\n.chip-count {\n    font-weight: 600;\n    font-size: 10px;\n    opacity: 0.85;\n}\n\n/* Status Dot on Query Items */\n.status-dot {\n    display: inline-block;\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    flex-shrink: 0;\n    margin-top: 4px;\n}\n\n/* Status Badge on Non-Approved Queries */\n.query-status-badge {\n    font-size: 9px;\n    color: var(--mj-text-inverse);\n    padding: 1px 6px;\n    border-radius: 8px;\n    flex-shrink: 0;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n    margin-top: 2px;\n}\n\n/* Tree Content */\n.tree-content {\n    flex: 1;\n    overflow-y: auto;\n    padding: 8px 0;\n}\n\n/* Loading State */\n.loading-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    text-align: center;\n}\n\n/* Category Tree */\n.category-tree {\n    padding: 0 4px;\n}\n\n.category-item {\n    margin-bottom: 2px;\n}\n\n.category-header {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 12px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: background 0.15s ease;\n}\n\n.category-header:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.expand-icon {\n    font-size: 10px;\n    color: var(--mj-text-disabled);\n    width: 12px;\n    text-align: center;\n}\n\n.category-icon {\n    color: var(--mj-status-warning);\n    font-size: 14px;\n}\n\n.category-name {\n    flex: 1;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    font-size: 13px;\n}\n\n.category-count {\n    color: var(--mj-text-disabled);\n    font-size: 12px;\n}\n\n.category-add-btn {\n    display: none;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    border: none;\n    border-radius: 4px;\n    background: transparent;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    font-size: 11px;\n    flex-shrink: 0;\n    transition: background 0.15s ease, color 0.15s ease;\n}\n\n.category-header:hover .category-add-btn {\n    display: flex;\n}\n\n.category-add-btn:hover {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n/* Query Items */\n.category-queries {\n    margin-left: 28px;\n}\n\n.query-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n    padding: 8px 12px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s ease;\n    margin: 2px 0;\n}\n\n.query-item:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.query-item.selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-left: 3px solid var(--mj-status-info);\n    margin-left: -3px;\n}\n\n.query-item.hidden {\n    display: none;\n}\n\n.query-icon {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n    margin-top: 2px;\n}\n\n.query-info {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.query-name {\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.query-description {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.param-icon {\n    color: var(--mj-status-warning);\n    font-size: 12px;\n    margin-top: 2px;\n}\n\n.query-details-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    border-radius: 4px;\n    opacity: 0;\n    transition: all 0.15s ease;\n    flex-shrink: 0;\n}\n\n.query-item:hover .query-details-btn {\n    opacity: 1;\n}\n\n.query-details-btn:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n/* Resize Handle */\n.resize-handle {\n    flex-shrink: 0;\n    width: 6px;\n    cursor: col-resize;\n    background: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background 0.15s ease;\n    position: relative;\n    z-index: 10;\n}\n\n.resize-handle:hover,\n.resize-handle:focus-visible,\n.resize-handle.active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n/* The handle is a keyboard-operable widget (arrows/Home/End), so it needs a visible\n   focus ring \u2014 the 6px hover tint alone is too subtle to serve as one. */\n.resize-handle:focus-visible {\n    outline: var(--mj-ring-width) solid var(--mj-focus-ring-color);\n    outline-offset: -1px;\n}\n\n.resize-handle-grip {\n    width: 2px;\n    height: 32px;\n    border-radius: 1px;\n    background: var(--mj-border-strong);\n    transition: background 0.15s ease;\n}\n\n.resize-handle:hover .resize-handle-grip,\n.resize-handle:focus-visible .resize-handle-grip,\n.resize-handle.active .resize-handle-grip {\n    background: var(--mj-brand-primary);\n}\n\n/* Prevent text selection and set cursor during resize */\n.query-browser-container.resizing {\n    cursor: col-resize;\n    user-select: none;\n}\n\n.query-browser-container.resizing * {\n    pointer-events: none;\n}\n\n.query-browser-container.resizing .resize-handle {\n    pointer-events: auto;\n}\n\n/* Right Panel: Query Viewer */\n.query-viewer-panel {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n}\n\n/* No Selection State \u2014 fills the viewer panel (host centers its own content) */\n.no-selection {\n    flex: 1;\n}\n\n/* Query Viewer Header */\n.query-viewer-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 16px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.query-viewer-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    min-width: 0;\n    overflow: hidden;\n}\n\n.query-viewer-title i {\n    color: var(--mj-brand-primary);\n    font-size: 16px;\n    flex-shrink: 0;\n}\n\n.query-viewer-title span {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.query-viewer-status-pill {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    border-radius: 14px;\n    color: var(--mj-text-inverse);\n    font-size: 13px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    flex-shrink: 0;\n}\n\n.query-viewer-status-pill i {\n    font-size: 12px;\n}\n\n.query-viewer-status-pill.approved {\n    opacity: 0.7;\n}\n\n.query-viewer-header-actions {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-shrink: 0;\n}\n\n/* Query Viewer fills remaining space */\nmj-query-viewer {\n    flex: 1;\n    min-height: 0;\n}\n\n/* Scrollbar styling */\n.tree-content::-webkit-scrollbar {\n    width: 6px;\n}\n\n.tree-content::-webkit-scrollbar-track {\n    background: var(--mj-bg-surface-card);\n}\n\n.tree-content::-webkit-scrollbar-thumb {\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n}\n\n.tree-content::-webkit-scrollbar-thumb:hover {\n    background: var(--mj-text-disabled);\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n    .query-browser-container {\n        flex-direction: column;\n    }\n\n    .query-tree-panel {\n        width: 100% !important;\n        height: 40%;\n        border-right: none;\n        border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .resize-handle {\n        display: none;\n    }\n\n    .query-viewer-panel {\n        height: 60%;\n    }\n}\n\n/* \u2500\u2500\u2500 Right-panel icon button override (white background context) \u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-viewer-header .icon-btn {\n    background: transparent;\n    color: var(--mj-text-secondary);\n}\n\n.query-viewer-header .icon-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n}\n\n/* \u2500\u2500\u2500 Drawer Backdrop \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-drawer-backdrop {\n    position: fixed;\n    inset: 0;\n    background: var(--mj-bg-overlay);\n    z-index: 1100;\n    animation: backdropFadeIn 0.22s ease-out;\n}\n\n@keyframes backdropFadeIn {\n    from { opacity: 0; }\n    to   { opacity: 1; }\n}\n\n/* \u2500\u2500\u2500 Drawer Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-drawer {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 480px;\n    max-width: 96vw;\n    background: var(--mj-bg-surface);\n    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);\n    z-index: 1101;\n    display: flex;\n    flex-direction: column;\n    animation: drawerSlideIn 0.22s ease-out;\n}\n\n@keyframes drawerSlideIn {\n    from { transform: translateX(100%); }\n    to   { transform: translateX(0); }\n}\n\n/* \u2500\u2500\u2500 Drawer Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-drawer-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    background: linear-gradient(135deg, var(--mj-brand-primary) 0%, var(--mj-brand-primary-hover) 100%);\n    color: var(--mj-text-inverse);\n    flex-shrink: 0;\n}\n\n.query-drawer-title {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    min-width: 0;\n}\n\n.query-drawer-title > i {\n    font-size: 18px;\n    opacity: 0.9;\n    flex-shrink: 0;\n}\n\n.query-drawer-title-main {\n    font-size: 16px;\n    font-weight: 600;\n    line-height: 1.2;\n}\n\n.query-drawer-title-sub {\n    font-size: 12px;\n    opacity: 0.75;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 360px;\n    margin-top: 2px;\n}\n\n.query-drawer-close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: rgba(255, 255, 255, 0.15);\n    color: var(--mj-text-inverse);\n    border-radius: 6px;\n    cursor: pointer;\n    font-size: 16px;\n    flex-shrink: 0;\n    transition: background 0.15s ease;\n}\n\n.query-drawer-close:hover {\n    background: rgba(255, 255, 255, 0.28);\n}\n\n/* \u2500\u2500\u2500 Drawer Body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-drawer-body {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n.query-drawer-body::-webkit-scrollbar { width: 6px; }\n.query-drawer-body::-webkit-scrollbar-track { background: var(--mj-bg-surface-sunken); }\n.query-drawer-body::-webkit-scrollbar-thumb { background: var(--mj-border-strong); border-radius: 3px; }\n.query-drawer-body::-webkit-scrollbar-thumb:hover { background: var(--mj-text-disabled); }\n\n/* \u2500\u2500\u2500 Drawer Form Fields \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.drawer-field {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.drawer-row {\n    display: flex;\n    gap: 12px;\n}\n\n.drawer-field-flex {\n    flex: 1;\n    min-width: 0;\n}\n\n.drawer-field-sql {\n    flex: 1;\n}\n\n.drawer-label {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.drawer-required {\n    color: var(--mj-status-error);\n    margin-left: 2px;\n}\n\n.drawer-input,\n.drawer-select,\n.drawer-textarea {\n    width: 100%;\n    padding: 8px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface);\n    box-sizing: border-box;\n    transition: border-color 0.15s ease, box-shadow 0.15s ease;\n    outline: none;\n    font-family: inherit;\n}\n\n.drawer-input:focus,\n.drawer-select:focus,\n.drawer-textarea:focus {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.drawer-input:disabled,\n.drawer-select:disabled,\n.drawer-textarea:disabled {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-disabled);\n    cursor: not-allowed;\n}\n\n.drawer-textarea {\n    resize: vertical;\n    min-height: 70px;\n}\n\n.drawer-sql-editor {\n    display: block;\n    min-height: 220px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.drawer-field-error .drawer-input,\n.drawer-field-error .drawer-select {\n    border-color: var(--mj-status-error);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-error) 12%, transparent);\n}\n\n.drawer-field-hint {\n    font-size: 12px;\n    color: var(--mj-status-error);\n}\n\n.drawer-field-inline {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.drawer-field-inline .drawer-field-hint {\n    color: var(--mj-text-muted);\n}\n\n.drawer-reusable-label {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    cursor: pointer;\n    white-space: nowrap;\n}\n\n/* \u2500\u2500\u2500 Open Full Record link \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.drawer-full-record {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 10px 14px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-border-default));\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--mj-brand-primary-hover);\n    flex-wrap: wrap;\n}\n\n.drawer-full-record > i {\n    flex-shrink: 0;\n    color: var(--mj-brand-primary);\n}\n\n.drawer-link-btn {\n    background: none;\n    border: none;\n    color: var(--mj-brand-primary-hover);\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    padding: 0;\n    text-decoration: underline;\n    text-underline-offset: 2px;\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.drawer-link-btn:hover {\n    color: var(--mj-brand-primary-active);\n}\n\n/* \u2500\u2500\u2500 Drawer Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-drawer-footer {\n    flex-shrink: 0;\n    padding: 16px 20px;\n    border-top: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-card);\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.drawer-error {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--mj-status-error-bg);\n    border: 1px solid var(--mj-status-error-border);\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--mj-status-error-text);\n}\n\n.drawer-footer-actions {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n/* \u2500\u2500\u2500 Drawer Buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.drawer-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 18px;\n    border-radius: 6px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    border: 1px solid transparent;\n    transition: all 0.15s ease;\n    white-space: nowrap;\n}\n\n.drawer-btn:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n}\n\n.drawer-btn-primary {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border-color: var(--mj-brand-primary);\n}\n\n.drawer-btn-primary:hover:not(:disabled) {\n    background: var(--mj-brand-primary-hover);\n    border-color: var(--mj-brand-primary-hover);\n}\n\n.drawer-btn-secondary {\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    border-color: var(--mj-border-default);\n}\n\n.drawer-btn-secondary:hover:not(:disabled) {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-primary);\n}\n\n/* \u2500\u2500\u2500 Responsive drawer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@media (max-width: 600px) {\n    .query-drawer {\n        width: 100vw;\n        max-width: 100vw;\n    }\n\n    .drawer-row {\n        flex-direction: column;\n    }\n}\n\n.drawer-diagnostics {\n  margin-bottom: var(--mj-space-3);\n  max-height: 40vh;\n  overflow: auto;\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.MJConfirmService }], { drawerSqlEditor: [{
             type: ViewChild,
             args: ['drawerSqlEditor']
@@ -2035,5 +2158,5 @@ export { QueryBrowserResourceComponent };
             type: HostListener,
             args: ['document:keydown.escape']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryBrowserResourceComponent, { className: "QueryBrowserResourceComponent", filePath: "src/QueryBrowser/query-browser-resource.component.ts", lineNumber: 92 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryBrowserResourceComponent, { className: "QueryBrowserResourceComponent", filePath: "src/QueryBrowser/query-browser-resource.component.ts", lineNumber: 94 }); })();
 //# sourceMappingURL=query-browser-resource.component.js.map