@memberjunction/ng-core-entity-forms 2.114.0 → 2.116.0

package/dist/lib/custom/Queries/query-form.component.js

@@ -1542,7 +1542,7 @@ let QueryFormExtendedComponent = class QueryFormExtendedComponent extends QueryF
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.record ? 1 : -1);
-        } }, dependencies: [i1.NgClass, i1.NgIf, i2.ɵNgNoValidate, i2.NgControlStatus, i2.NgControlStatusGroup, i2.NgModel, i2.NgForm, i3.ExpansionPanelComponent, i3.ExpansionPanelTitleDirective, i4.TextAreaComponent, i4.TextBoxComponent, i4.SwitchComponent, i5.DropDownListComponent, i6.ButtonComponent, i7.UserViewGridComponent, i8.FormToolbarComponent, i9.CodeEditorComponent, i10.QueryRunDialogComponent, i11.QueryCategoryDialogComponent], styles: [".k-pane[_ngcontent-%COMP%] {\n  background-color: #F5F6FA;\n}\n\n.content-margin[_ngcontent-%COMP%] {\n  margin: 10px;\n} \n\n\na[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] {\n  display: block;\n  flex-direction: column;\n  background-color: #F5F6FA;\n  padding: 10px;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: #F5F6FA;\n}\n\nbutton[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n}\n\n.k-splitter[_ngcontent-%COMP%] {\n  border-width: 0px;\n}\n\n.record-form-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child {\n  font-weight: bold;\n  padding-right: 10px;\n} \n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n \n\n@media (min-width: 768px) {\n  .record-form-row[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}", ".sql-editor-container[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.filters-help[_ngcontent-%COMP%]   .filter-card[_ngcontent-%COMP%] {\n    transition: transform 0.2s ease;\n}\n\n.filters-help[_ngcontent-%COMP%]   .filter-card[_ngcontent-%COMP%]:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n}\n\n.toolbar-actions[_ngcontent-%COMP%] {\n    margin-left: auto;\n}\n\n.query-header[_ngcontent-%COMP%] {\n    border-bottom: 2px solid #dee2e6;\n}\n\n.badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n\n\n  .query-content kendo-expansionpanel {\n    border: none !important;\n    border-radius: 12px !important;\n    margin-bottom: 16px !important;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;\n    background: white !important;\n    overflow: hidden !important;\n}\n\n  .query-content .k-expander-header {\n    background: white !important;\n    border: none !important;\n    padding: 16px 20px !important;\n    border-radius: 12px !important;\n    color: #2c3e50 !important;\n    font-weight: 600 !important;\n    font-size: 16px !important;\n    transition: all 0.2s ease !important;\n}\n\n  .query-content .k-expander-header:hover {\n    background: #f8f9fa !important;\n}\n\n\n\n  .query-content kendo-expansionpanel[aria-expanded=\"true\"] .k-expander-header {\n    background: #2196f3 !important;\n    color: white !important;\n    border-radius: 12px 12px 0 0 !important;\n}\n\n\n\n  .query-content .k-expander-content {\n    padding: 0 !important;\n    border: none !important;\n    background: white !important;\n    border-radius: 0 0 12px 12px !important;\n}\n\n\n\n  .query-content .k-expander-header .fa-solid {\n    transition: transform 0.2s ease !important;\n}\n\n  .query-content kendo-expansionpanel[aria-expanded=\"true\"] .k-expander-header .fa-chevron-down {\n    transform: rotate(180deg) !important;\n}\n\n\n\n.parameters-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n    gap: 16px;\n    padding: 20px;\n}\n\n.param-card[_ngcontent-%COMP%] {\n    background: white;\n    border: 2px solid #e9ecef;\n    border-radius: 8px;\n    padding: 16px;\n    transition: all 0.2s;\n    cursor: pointer;\n    position: relative;\n}\n\n.param-card[_ngcontent-%COMP%]:hover {\n    border-color: #007bff;\n    box-shadow: 0 2px 8px rgba(0,123,255,0.1);\n    transform: translateY(-1px);\n}\n\n.param-card.required[_ngcontent-%COMP%] {\n    border-color: #ffc107;\n}\n\n.param-card-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 12px;\n}\n\n.param-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 1.1em;\n    color: #2c3e50;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.param-badges[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n}\n\n.param-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 0.75em;\n    font-weight: 600;\n    color: white;\n}\n\n.param-badge.required[_ngcontent-%COMP%] {\n    background: #ffc107;\n}\n\n.param-badge.array[_ngcontent-%COMP%] {\n    background: #9c27b0;\n}\n\n.param-card-body[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 0.9em;\n}\n\n.param-actions[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 12px;\n    right: 12px;\n    display: flex;\n    gap: 4px;\n    opacity: 0;\n    transition: opacity 0.2s;\n}\n\n.param-card[_ngcontent-%COMP%]:hover   .param-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.param-action-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    padding: 4px 8px;\n    border-radius: 4px;\n    cursor: pointer;\n    color: #6c757d;\n    transition: all 0.2s;\n}\n\n.param-action-btn[_ngcontent-%COMP%]:hover {\n    background: #f8f9fa;\n    color: #007bff;\n}\n\n.param-action-btn.delete[_ngcontent-%COMP%]:hover {\n    background: #fff5f5;\n    color: #dc3545;\n}\n\n\n\n.details-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 20px;\n    padding: 20px;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n    font-size: 0.85em;\n    font-weight: 600;\n    color: #6c757d;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n    font-size: 1em;\n    color: #2c3e50;\n}\n\n\n\n.category-selector[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n.category-tree-dropdown[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.add-category-btn[_ngcontent-%COMP%] {\n    background: #28a745;\n    color: white;\n    border: none;\n    padding: 8px 12px;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.add-category-btn[_ngcontent-%COMP%]:hover {\n    background: #218838;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(40,167,69,0.2);\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n    text-align: center;\n    color: #6c757d;\n}\n\n.empty-state-icon[_ngcontent-%COMP%] {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.3;\n}\n\n.empty-state-title[_ngcontent-%COMP%] {\n    font-size: 1.2em;\n    font-weight: 600;\n    margin-bottom: 8px;\n    color: #495057;\n}\n\n.empty-state-text[_ngcontent-%COMP%] {\n    font-size: 0.9em;\n    margin-bottom: 20px;\n}\n\n.add-param-btn[_ngcontent-%COMP%] {\n    background: #007bff;\n    color: white;\n    border: none;\n    padding: 10px 20px;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 500;\n}\n\n.add-param-btn[_ngcontent-%COMP%]:hover {\n    background: #0056b3;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0,123,255,0.2);\n}"] }); }
+        } }, dependencies: [i1.NgClass, i1.NgIf, i2.ɵNgNoValidate, i2.NgControlStatus, i2.NgControlStatusGroup, i2.NgModel, i2.NgForm, i3.ExpansionPanelComponent, i3.ExpansionPanelTitleDirective, i4.TextAreaComponent, i4.TextBoxComponent, i4.SwitchComponent, i5.DropDownListComponent, i6.ButtonComponent, i7.UserViewGridComponent, i8.FormToolbarComponent, i9.CodeEditorComponent, i10.QueryRunDialogComponent, i11.QueryCategoryDialogComponent], styles: [".k-pane[_ngcontent-%COMP%] {\n  background-color: #F5F6FA;\n}\n\n.content-margin[_ngcontent-%COMP%] {\n  margin: 10px;\n} \n\n\na[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] {\n  display: block;\n  flex-direction: column;\n  background-color: #F5F6FA;\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: #F5F6FA;\n}\n\nbutton[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n}\n\n.k-splitter[_ngcontent-%COMP%] {\n  border-width: 0px;\n}\n\n.record-form-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child {\n  font-weight: bold;\n  padding-right: 10px;\n} \n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n \n\n@media (min-width: 768px) {\n  .record-form-row[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: #F5F6FA;\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%]    > .form-card[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n\n\n@media (min-width: 1400px) {\n  .form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n.collapsible-card[_ngcontent-%COMP%] {\n  overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n  border-bottom-color: #667eea;\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: #667eea;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n  color: #6b7280;\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body[_ngcontent-%COMP%] {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed[_ngcontent-%COMP%] {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body[_ngcontent-%COMP%] {\n  padding: 24px;\n}\n\n\n\n.form-card.related-entity[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n  border-left: 3px solid #3b82f6;\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n  border-bottom-color: #3b82f6;\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #3b82f6;\n}\n\n\n\n.form-section-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .control-group[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid #d1d5db;\n  background: white;\n  color: #374151;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n  background: #667eea;\n  color: white;\n  border-color: #667eea;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid #d1d5db;\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: white;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #667eea;\n  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]::placeholder {\n  color: #9ca3af;\n  font-style: italic;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #6b7280;\n  margin-left: auto;\n  font-weight: 500;\n}\n\n\n\n.form-card.search-hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n\n.section-count-badge[_ngcontent-%COMP%] {\n  background: #667eea;\n  color: white;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   .search-highlight[_ngcontent-%COMP%] {\n  background-color: #fef08a;\n  color: #854d0e;\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge[_ngcontent-%COMP%] {\n  background: #10b981;\n  color: white;\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n  background: #9ca3af;\n}", ".sql-editor-container[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.filters-help[_ngcontent-%COMP%]   .filter-card[_ngcontent-%COMP%] {\n    transition: transform 0.2s ease;\n}\n\n.filters-help[_ngcontent-%COMP%]   .filter-card[_ngcontent-%COMP%]:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n}\n\n.toolbar-actions[_ngcontent-%COMP%] {\n    margin-left: auto;\n}\n\n.query-header[_ngcontent-%COMP%] {\n    border-bottom: 2px solid #dee2e6;\n}\n\n.badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n\n\n  .query-content kendo-expansionpanel {\n    border: none !important;\n    border-radius: 12px !important;\n    margin-bottom: 16px !important;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;\n    background: white !important;\n    overflow: hidden !important;\n}\n\n  .query-content .k-expander-header {\n    background: white !important;\n    border: none !important;\n    padding: 16px 20px !important;\n    border-radius: 12px !important;\n    color: #2c3e50 !important;\n    font-weight: 600 !important;\n    font-size: 16px !important;\n    transition: all 0.2s ease !important;\n}\n\n  .query-content .k-expander-header:hover {\n    background: #f8f9fa !important;\n}\n\n\n\n  .query-content kendo-expansionpanel[aria-expanded=\"true\"] .k-expander-header {\n    background: #2196f3 !important;\n    color: white !important;\n    border-radius: 12px 12px 0 0 !important;\n}\n\n\n\n  .query-content .k-expander-content {\n    padding: 0 !important;\n    border: none !important;\n    background: white !important;\n    border-radius: 0 0 12px 12px !important;\n}\n\n\n\n  .query-content .k-expander-header .fa-solid {\n    transition: transform 0.2s ease !important;\n}\n\n  .query-content kendo-expansionpanel[aria-expanded=\"true\"] .k-expander-header .fa-chevron-down {\n    transform: rotate(180deg) !important;\n}\n\n\n\n.parameters-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n    gap: 16px;\n    padding: 20px;\n}\n\n.param-card[_ngcontent-%COMP%] {\n    background: white;\n    border: 2px solid #e9ecef;\n    border-radius: 8px;\n    padding: 16px;\n    transition: all 0.2s;\n    cursor: pointer;\n    position: relative;\n}\n\n.param-card[_ngcontent-%COMP%]:hover {\n    border-color: #007bff;\n    box-shadow: 0 2px 8px rgba(0,123,255,0.1);\n    transform: translateY(-1px);\n}\n\n.param-card.required[_ngcontent-%COMP%] {\n    border-color: #ffc107;\n}\n\n.param-card-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 12px;\n}\n\n.param-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 1.1em;\n    color: #2c3e50;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.param-badges[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n}\n\n.param-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 0.75em;\n    font-weight: 600;\n    color: white;\n}\n\n.param-badge.required[_ngcontent-%COMP%] {\n    background: #ffc107;\n}\n\n.param-badge.array[_ngcontent-%COMP%] {\n    background: #9c27b0;\n}\n\n.param-card-body[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 0.9em;\n}\n\n.param-actions[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 12px;\n    right: 12px;\n    display: flex;\n    gap: 4px;\n    opacity: 0;\n    transition: opacity 0.2s;\n}\n\n.param-card[_ngcontent-%COMP%]:hover   .param-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.param-action-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    padding: 4px 8px;\n    border-radius: 4px;\n    cursor: pointer;\n    color: #6c757d;\n    transition: all 0.2s;\n}\n\n.param-action-btn[_ngcontent-%COMP%]:hover {\n    background: #f8f9fa;\n    color: #007bff;\n}\n\n.param-action-btn.delete[_ngcontent-%COMP%]:hover {\n    background: #fff5f5;\n    color: #dc3545;\n}\n\n\n\n.details-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 20px;\n    padding: 20px;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n    font-size: 0.85em;\n    font-weight: 600;\n    color: #6c757d;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n    font-size: 1em;\n    color: #2c3e50;\n}\n\n\n\n.category-selector[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n.category-tree-dropdown[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.add-category-btn[_ngcontent-%COMP%] {\n    background: #28a745;\n    color: white;\n    border: none;\n    padding: 8px 12px;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.add-category-btn[_ngcontent-%COMP%]:hover {\n    background: #218838;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(40,167,69,0.2);\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n    text-align: center;\n    color: #6c757d;\n}\n\n.empty-state-icon[_ngcontent-%COMP%] {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.3;\n}\n\n.empty-state-title[_ngcontent-%COMP%] {\n    font-size: 1.2em;\n    font-weight: 600;\n    margin-bottom: 8px;\n    color: #495057;\n}\n\n.empty-state-text[_ngcontent-%COMP%] {\n    font-size: 0.9em;\n    margin-bottom: 20px;\n}\n\n.add-param-btn[_ngcontent-%COMP%] {\n    background: #007bff;\n    color: white;\n    border: none;\n    padding: 10px 20px;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 500;\n}\n\n.add-param-btn[_ngcontent-%COMP%]:hover {\n    background: #0056b3;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0,123,255,0.2);\n}"] }); }
 };
 QueryFormExtendedComponent = __decorate([
     RegisterClass(BaseFormComponent, 'Queries')
@@ -1550,7 +1550,7 @@ QueryFormExtendedComponent = __decorate([
 export { QueryFormExtendedComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(QueryFormExtendedComponent, [{
         type: Component,
-        args: [{ selector: 'mj-query-form', template: "<div class=\"record-form-container\">\n    @if (record) {\n        <form class=\"record-form\" #form=\"ngForm\">\n            <mj-form-toolbar [form]=\"this\"></mj-form-toolbar>\n\n            <!-- Header Section -->\n            <div class=\"query-header\" style=\"background: #f8f9fa; border-bottom: 1px solid #dee2e6; padding: 20px;\">\n                <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n                    \n                    <!-- Top Row: Name and Run Button -->\n                    <div style=\"display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;\">\n                        <!-- Left: Query Name -->\n                        <div style=\"flex: 1; min-width: 0;\">\n                            <div style=\"display: flex; align-items: center; gap: 12px;\">\n                                <i class=\"fa-solid fa-database\" style=\"color: #17a2b8; font-size: 1.4em;\"></i>\n                                @if (EditMode) {\n                                    <kendo-textbox [(ngModel)]=\"record.Name\" \n                                                  name=\"queryName\"\n                                                  placeholder=\"Enter query name...\"\n                                                  style=\"font-size: 1.2em; font-weight: 600; min-width: 300px; flex: 1;\">\n                                    </kendo-textbox>\n                                } @else {\n                                    <h4 style=\"margin: 0; color: #495057; font-weight: 600; flex: 1;\">{{ record.Name || 'Untitled Query' }}</h4>\n                                }\n                            </div>\n                        </div>\n\n                        <!-- Right: Action Buttons -->\n                        <div class=\"action-buttons\" style=\"display: flex; gap: 8px; align-items: center;\">\n                            @if (record.ID) {\n                                <button kendoButton \n                                        [themeColor]=\"'primary'\" \n                                        [size]=\"'large'\"\n                                        [disabled]=\"EditMode || record.Status !== 'Approved' || !record.SQL || record.SQL.trim().length === 0\"\n                                        (click)=\"runQuery()\"\n                                        title=\"Run Query\">\n                                    <i class=\"fa-solid fa-play\"></i> Run\n                                </button>\n                            }\n                        </div>\n                    </div>\n\n                    <!-- Second Row: Category and Status -->\n                    <div style=\"display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;\">\n                        <!-- Category -->\n                        <div style=\"display: flex; align-items: center; gap: 12px;\">\n                            <label style=\"font-weight: 600; color: #495057; min-width: 80px;\">Category:</label>\n                            @if (EditMode) {\n                                <kendo-dropdownlist\n                                    [(ngModel)]=\"record.CategoryID\"\n                                    name=\"categoryId\"\n                                    [data]=\"categoryOptions\"\n                                    textField=\"text\"\n                                    valueField=\"value\"\n                                    [valuePrimitive]=\"true\"\n                                    placeholder=\"Select category...\"\n                                    style=\"flex: 1;\">\n                                </kendo-dropdownlist>\n                            } @else {\n                                <span style=\"color: #495057;\">{{ getCategoryPath() || 'Uncategorized' }}</span>\n                            }\n                        </div>\n\n                        <!-- Status -->\n                        <div style=\"display: flex; align-items: center; gap: 12px;\">\n                            <label style=\"font-weight: 600; color: #495057; min-width: 50px;\">Status:</label>\n                            @if (EditMode) {\n                                <kendo-dropdownlist\n                                    [(ngModel)]=\"record.Status\"\n                                    name=\"status\"\n                                    [data]=\"statusOptions\"\n                                    textField=\"text\"\n                                    valueField=\"value\"\n                                    [valuePrimitive]=\"true\"\n                                    style=\"flex: 1;\">\n                                </kendo-dropdownlist>\n                            } @else {\n                                <span class=\"badge\" \n                                      [style.background]=\"getStatusBadgeColor()\" \n                                      style=\"color: white; padding: 6px 12px; border-radius: 12px; font-size: 0.85em;\">\n                                    <i class=\"fa-solid fa-check-circle\" *ngIf=\"record.Status === 'Approved'\"></i>\n                                    <i class=\"fa-solid fa-clock\" *ngIf=\"record.Status === 'Pending'\"></i>\n                                    <i class=\"fa-solid fa-times-circle\" *ngIf=\"record.Status === 'Rejected'\"></i>\n                                    {{ record.Status || 'Unknown' }}\n                                </span>\n                            }\n                        </div>\n                    </div>\n\n                    <!-- Third Row: Description -->\n                    @if (EditMode || record.Description) {\n                        <div>\n                            @if (EditMode) {\n                                <kendo-textarea [(ngModel)]=\"record.Description\" \n                                               name=\"description\"\n                                               [rows]=\"2\"\n                                               placeholder=\"Enter query description...\"\n                                               style=\"width: 100%;\">\n                                </kendo-textarea>\n                            } @else {\n                                <p style=\"margin: 0; color: #6c757d; font-size: 0.9em; line-height: 1.4;\">{{ record.Description }}</p>\n                            }\n                        </div>\n                    }\n                </div>\n            </div>\n\n            <!-- Main Content Area with Expansion Panels -->\n            <div class=\"query-content\" style=\"padding: 20px; overflow-y: auto; background: #f5f7fa;\">\n                \n                <!-- SQL Query Panel -->\n                <kendo-expansionpanel \n                    [(expanded)]=\"sqlPanelExpanded\"\n                    style=\"margin-bottom: 16px;\">\n                    <ng-template kendoExpansionPanelTitleDirective>\n                        <span style=\"display: flex; align-items: center; justify-content: space-between; width: 100%;\">\n                            <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                                <i class=\"fa-solid fa-code\" style=\"color: #17a2b8;\"></i>\n                                SQL\n                                @if (record.SQL) {\n                                    <span class=\"badge\" style=\"background: #28a745; color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n                                        <i class=\"fa-solid fa-check\"></i> Defined\n                                    </span>\n                                }\n                            </span>\n                            <button type=\"button\"\n                                    kendoButton \n                                    fillMode=\"flat\"\n                                    size=\"small\"\n                                    (click)=\"toggleFiltersHelp(); $event.stopPropagation()\"\n                                    title=\"Show/hide SQL filters help\"\n                                    style=\"margin-right: 8px;\">\n                                <i class=\"fa-solid fa-question-circle\"></i>\n                                <span style=\"margin-left: 4px;\">Filters Help</span>\n                                <i class=\"fa-solid\" [ngClass]=\"showFiltersHelp ? 'fa-chevron-up' : 'fa-chevron-down'\" style=\"margin-left: 4px;\"></i>\n                            </button>\n                        </span>\n                    </ng-template>\n                    \n                    <div style=\"display: flex; flex-direction: column;\">\n                        <!-- Code Editor -->\n                        <mj-code-editor #sqlEditor\n                                       (change)=\"onSQLChange($event)\"\n                                       [language]=\"'sql'\"\n                                       style=\"flex: 1; height: 400px; border: 1px solid #ced4da; border-radius: 4px;\">\n                        </mj-code-editor>\n                        \n                        <!-- SQL Filters Help (Below Editor) -->\n                        @if (showFiltersHelp) {\n                            <div class=\"filters-help\" style=\"background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px; padding: 16px; margin-top: 16px;\">\n                                <h6 style=\"margin: 0 0 12px 0; color: #495057; font-weight: 600;\">\n                                    <i class=\"fa-solid fa-filter\"></i> Available SQL Filters for Parameterized Queries\n                                </h6>\n                                \n                                <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px;\">\n                                    @for (filter of sqlFilters; track filter.name) {\n                                        <div class=\"filter-card\" style=\"background: white; border: 1px solid #e9ecef; border-radius: 4px; padding: 12px;\">\n                                            <div style=\"font-family: 'Courier New', monospace; font-weight: bold; color: #007bff; margin-bottom: 4px;\">\n                                                {{ filter.name }}\n                                            </div>\n                                            <div style=\"font-size: 0.85em; color: #495057; margin-bottom: 8px;\">\n                                                {{ filter.description }}\n                                            </div>\n                                            <div style=\"font-family: 'Courier New', monospace; font-size: 0.8em; background: #f1f3f4; padding: 6px; border-radius: 3px; margin-bottom: 4px;\">\n                                                {{ filter.exampleSyntax }}\n                                            </div>\n                                            @if (filter.notes) {\n                                                <div style=\"font-size: 0.75em; color: #6c757d; font-style: italic;\">\n                                                    {{ filter.notes }}\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                </div>\n                            </div>\n                        }\n                    </div>\n                </kendo-expansionpanel>\n\n                <!-- Parameters Panel -->\n                @if (record.IsSaved) {\n                    <kendo-expansionpanel \n                        [(expanded)]=\"parametersPanelExpanded\"\n                        style=\"margin-bottom: 16px;\">\n                        <ng-template kendoExpansionPanelTitleDirective>\n                            <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                                <i class=\"fa-solid fa-sliders\" style=\"color: #6c757d;\"></i>\n                                Query Parameters\n                                @if (queryParameters.length > 0) {\n                                    <span class=\"badge\" style=\"background: #17a2b8; color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n                                        {{ queryParameters.length }}\n                                    </span>\n                                }\n                            </span>\n                        </ng-template>\n                        \n                        <div style=\"padding: 16px 0;\">\n                            @if (isLoadingParameters) {\n                                <div style=\"display: flex; align-items: center; justify-content: center; padding: 40px;\">\n                                    <i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 24px; color: #6c757d; margin-right: 12px;\"></i>\n                                    <span style=\"color: #6c757d;\">Loading parameters...</span>\n                                </div>\n                            } @else {\n                                @if (queryParameters.length === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-sliders empty-state-icon\"></i>\n                                        <div class=\"empty-state-title\">No Parameters Defined</div>\n                                        <div class=\"empty-state-text\">\n                                            Add parameters to make your query dynamic and reusable.\n                                        </div>\n                                        @if (EditMode) {\n                                            <button type=\"button\" class=\"add-param-btn\" (click)=\"addParameter()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add First Parameter\n                                            </button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <!-- Parameters Header with Add Button -->\n                                    @if (EditMode) {\n                                        <div style=\"display: flex; justify-content: flex-end; margin-bottom: 16px; padding: 0 20px;\">\n                                            <button type=\"button\" class=\"add-param-btn\" (click)=\"addParameter()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Parameter\n                                            </button>\n                                        </div>\n                                    }\n                                    \n                                    <!-- Parameters Grid -->\n                                    <div class=\"parameters-grid\">\n                                        @for (param of queryParameters; track param.ID || $index) {\n                                            <div class=\"param-card\" [class.required]=\"param.IsRequired\" (click)=\"editParameter(param)\">\n                                                <div class=\"param-card-header\">\n                                                    <div class=\"param-name\">\n                                                        <i class=\"fa-solid fa-at\" style=\"color: #007bff;\"></i>\n                                                        {{ param.Name }}\n                                                    </div>\n                                                    <div class=\"param-badges\">\n                                                        @if (param.IsRequired) {\n                                                            <span class=\"param-badge required\">Required</span>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                \n                                                <div class=\"param-card-body\">\n                                                    @if (param.Description) {\n                                                        <div style=\"margin-bottom: 8px;\">{{ param.Description }}</div>\n                                                    }\n                                                    \n                                                    <div style=\"display: flex; gap: 16px; font-size: 0.85em;\">\n                                                        <div>\n                                                            <strong>Type:</strong> {{ param.Type || 'Text' }}\n                                                        </div>\n                                                        @if (param.DefaultValue) {\n                                                            <div>\n                                                                <strong>Default:</strong> \n                                                                <code style=\"background: #f1f3f4; padding: 2px 4px; border-radius: 3px;\">\n                                                                    {{ param.DefaultValue }}\n                                                                </code>\n                                                            </div>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                \n                                                @if (EditMode) {\n                                                    <div class=\"param-actions\" (click)=\"$event.stopPropagation()\">\n                                                        <button type=\"button\" class=\"param-action-btn\" (click)=\"editParameter(param)\" title=\"Edit parameter\">\n                                                            <i class=\"fa-solid fa-pen\"></i>\n                                                        </button>\n                                                        <button type=\"button\" class=\"param-action-btn delete\" (click)=\"deleteParameter(param)\" title=\"Delete parameter\">\n                                                            <i class=\"fa-solid fa-trash\"></i>\n                                                        </button>\n                                                    </div>\n                                                }\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            }\n                        </div>\n                    </kendo-expansionpanel>\n                }\n\n                <!-- Query Fields Panel -->\n                @if (record.IsSaved) {\n                    <kendo-expansionpanel \n                        [(expanded)]=\"fieldsPanelExpanded\"\n                        style=\"margin-bottom: 16px;\">\n                        <ng-template kendoExpansionPanelTitleDirective>\n                            <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                                <i class=\"fa-solid fa-table\" style=\"color: #6c757d;\"></i>\n                                Query Fields\n                                @if (queryFields.length > 0) {\n                                    <span class=\"badge\" style=\"background: #17a2b8; color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n                                        {{ queryFields.length }}\n                                    </span>\n                                }\n                            </span>\n                        </ng-template>\n                        \n                        <div style=\"padding: 16px 0;\">\n                            @if (isLoadingFields) {\n                                <div style=\"display: flex; justify-content: center; padding: 40px;\">\n                                    <i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 2em; color: #007bff;\"></i>\n                                </div>\n                            } @else {\n                                @if (queryFields.length === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-table\" style=\"font-size: 3em; color: #dee2e6; margin-bottom: 12px;\"></i>\n                                        <h5 style=\"color: #6c757d; margin-bottom: 8px;\">No Fields Defined</h5>\n                                        <div style=\"color: #adb5bd; margin-bottom: 16px;\">\n                                            Define output fields for your query results.\n                                        </div>\n                                        @if (EditMode) {\n                                            <button type=\"button\" class=\"add-param-btn\" (click)=\"addField()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add First Field\n                                            </button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <!-- Fields Header with Add Button -->\n                                    @if (EditMode) {\n                                        <div style=\"display: flex; justify-content: flex-end; margin-bottom: 16px; padding: 0 20px;\">\n                                            <button type=\"button\" class=\"add-param-btn\" (click)=\"addField()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Field\n                                            </button>\n                                        </div>\n                                    }\n                                    \n                                    <!-- Fields Grid -->\n                                    <div class=\"parameters-grid\">\n                                        @for (field of queryFields; track field.ID) {\n                                            <div class=\"param-card\">\n                                                <div class=\"param-card-header\">\n                                                    <div class=\"param-name\">\n                                                        <i class=\"fa-solid fa-columns\" style=\"color: #17a2b8;\"></i>\n                                                        {{ field.Name }}\n                                                    </div>\n                                                    <div class=\"param-badges\">\n                                                        <span class=\"param-badge\" style=\"background: #e3f2fd; color: #1976d2;\">{{ field.SQLBaseType }}</span>\n                                                        @if (field.Sequence) {\n                                                            <span class=\"param-badge\" style=\"background: #f3e5f5; color: #7b1fa2;\">#{{ field.Sequence }}</span>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                \n                                                <div class=\"param-card-body\">\n                                                    @if (field.Description) {\n                                                        <div class=\"param-description\">{{ field.Description }}</div>\n                                                    }\n                                                    <div class=\"param-meta\">\n                                                        <span class=\"meta-item\">\n                                                            <i class=\"fa-solid fa-code\"></i> {{ field.SQLFullType || field.SQLBaseType }}\n                                                        </span>\n                                                    </div>\n                                                </div>\n                                                \n                                                @if (EditMode) {\n                                                    <div class=\"param-card-actions\">\n                                                        <button type=\"button\" class=\"action-btn danger\" (click)=\"deleteField(field)\" title=\"Delete field\">\n                                                            <i class=\"fa-solid fa-trash\"></i>\n                                                        </button>\n                                                    </div>\n                                                }\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            }\n                        </div>\n                    </kendo-expansionpanel>\n                }\n\n                <!-- Query Entities Panel -->\n                @if (record.IsSaved) {\n                    <kendo-expansionpanel \n                        [(expanded)]=\"entitiesPanelExpanded\"\n                        style=\"margin-bottom: 16px;\">\n                        <ng-template kendoExpansionPanelTitleDirective>\n                            <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                                <i class=\"fa-solid fa-database\" style=\"color: #6c757d;\"></i>\n                                Query Entities\n                                @if (queryEntities.length > 0) {\n                                    <span class=\"badge\" style=\"background: #17a2b8; color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n                                        {{ queryEntities.length }}\n                                    </span>\n                                }\n                            </span>\n                        </ng-template>\n                        \n                        <div style=\"padding: 16px 0;\">\n                            @if (isLoadingEntities) {\n                                <div style=\"display: flex; justify-content: center; padding: 40px;\">\n                                    <i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 2em; color: #007bff;\"></i>\n                                </div>\n                            } @else {\n                                @if (queryEntities.length === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-database\" style=\"font-size: 3em; color: #dee2e6; margin-bottom: 12px;\"></i>\n                                        <h5 style=\"color: #6c757d; margin-bottom: 8px;\">No Entities Tracked</h5>\n                                        <div style=\"color: #adb5bd; margin-bottom: 16px;\">\n                                            Track which entities this query uses for documentation.\n                                        </div>\n                                        @if (EditMode) {\n                                            <button type=\"button\" class=\"add-param-btn\" (click)=\"addEntity()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add First Entity\n                                            </button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <!-- Entities Header with Add Button -->\n                                    @if (EditMode) {\n                                        <div style=\"display: flex; justify-content: flex-end; margin-bottom: 16px; padding: 0 20px;\">\n                                            <button type=\"button\" class=\"add-param-btn\" (click)=\"addEntity()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Entity\n                                            </button>\n                                        </div>\n                                    }\n                                    \n                                    <!-- Entities Grid -->\n                                    <div class=\"parameters-grid\">\n                                        @for (entity of queryEntities; track entity.ID) {\n                                            <div class=\"param-card\">\n                                                <div class=\"param-card-header\">\n                                                    <div class=\"param-name\">\n                                                        <i class=\"fa-solid fa-table\" style=\"color: #28a745;\"></i>\n                                                        {{ entity.Entity || 'Select Entity...' }}\n                                                    </div>\n                                                    @if (EditMode) {\n                                                        <div style=\"flex: 1; margin-left: 12px;\">\n                                                            <kendo-dropdownlist\n                                                                [(ngModel)]=\"entity.EntityID\"\n                                                                [name]=\"'entity_' + entity.ID\"\n                                                                [data]=\"getEntityOptions()\"\n                                                                textField=\"text\"\n                                                                valueField=\"id\"\n                                                                [valuePrimitive]=\"true\"\n                                                                placeholder=\"Select entity...\"\n                                                                style=\"width: 100%;\">\n                                                            </kendo-dropdownlist>\n                                                        </div>\n                                                    }\n                                                </div>\n                                                \n                                                @if (!EditMode && entity.Entity) {\n                                                    <div class=\"param-card-body\">\n                                                        <div class=\"param-meta\">\n                                                            <span class=\"meta-item\">\n                                                                <i class=\"fa-solid fa-database\"></i> Data Source\n                                                            </span>\n                                                        </div>\n                                                    </div>\n                                                }\n                                                \n                                                @if (EditMode) {\n                                                    <div class=\"param-card-actions\">\n                                                        <button type=\"button\" class=\"action-btn danger\" (click)=\"deleteEntity(entity)\" title=\"Delete entity\">\n                                                            <i class=\"fa-solid fa-trash\"></i>\n                                                        </button>\n                                                    </div>\n                                                }\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            }\n                        </div>\n                    </kendo-expansionpanel>\n                }\n\n                <!-- Details Panel -->\n                <kendo-expansionpanel \n                    [(expanded)]=\"detailsPanelExpanded\"\n                    style=\"margin-bottom: 16px;\">\n                    <ng-template kendoExpansionPanelTitleDirective>\n                        <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                            <i class=\"fa-solid fa-info-circle\" style=\"color: #6c757d;\"></i>\n                            Query Details\n                        </span>\n                    </ng-template>\n                    \n                    <div style=\"padding: 20px;\">\n                        <div class=\"details-grid\">\n                            <!-- Uses Template -->\n                            <div class=\"detail-item\">\n                                <label class=\"detail-label\">\n                                    <i class=\"fa-solid fa-file-code\"></i> Template Usage\n                                </label>\n                                @if (EditMode) {\n                                    <kendo-switch [(ngModel)]=\"record.UsesTemplate\" name=\"usesTemplate\"></kendo-switch>\n                                } @else {\n                                    <div class=\"detail-value\">\n                                        @if (record.UsesTemplate) {\n                                            <span style=\"color: #28a745;\"><i class=\"fa-solid fa-check\"></i> Uses Templates</span>\n                                        } @else {\n                                            <span style=\"color: #6c757d;\"><i class=\"fa-solid fa-times\"></i> No Templates</span>\n                                        }\n                                    </div>\n                                }\n                            </div>\n\n                            <!-- Created Date -->\n                            <div class=\"detail-item\">\n                                <label class=\"detail-label\">\n                                    <i class=\"fa-solid fa-calendar-plus\"></i> Created\n                                </label>\n                                <div class=\"detail-value\">{{ formatDate(record.__mj_CreatedAt) }}</div>\n                            </div>\n\n                            <!-- Updated Date -->\n                            <div class=\"detail-item\">\n                                <label class=\"detail-label\">\n                                    <i class=\"fa-solid fa-calendar-check\"></i> Last Updated\n                                </label>\n                                <div class=\"detail-value\">{{ formatDate(record.__mj_UpdatedAt) }}</div>\n                            </div>\n\n                            <!-- Quality Rank -->\n                            @if (record.QualityRank != null) {\n                                <div class=\"detail-item\">\n                                    <label class=\"detail-label\">\n                                        <i class=\"fa-solid fa-star\"></i> Quality Rank\n                                    </label>\n                                    <div class=\"detail-value\">{{ record.QualityRank }}/10</div>\n                                </div>\n                            }\n                        </div>\n                    </div>\n                </kendo-expansionpanel>\n\n                <!-- Permissions Panel -->\n                @if (record.IsSaved) {\n                    <kendo-expansionpanel \n                        [(expanded)]=\"permissionsPanelExpanded\"\n                        style=\"margin-bottom: 16px;\">\n                        <ng-template kendoExpansionPanelTitleDirective>\n                            <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                                <i class=\"fa-solid fa-shield-alt\" style=\"color: #6c757d;\"></i>\n                                Query Permissions\n                            </span>\n                        </ng-template>\n                        \n                        <div style=\"padding: 16px 0;\">\n                            @if (isLoadingPermissions) {\n                                <div style=\"display: flex; justify-content: center; padding: 40px;\">\n                                    <i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 2em; color: #007bff;\"></i>\n                                </div>\n                            } @else {\n                                @if (queryPermissions.length === 0 && !EditMode) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-shield-alt\" style=\"font-size: 3em; color: #dee2e6; margin-bottom: 12px;\"></i>\n                                        <h5 style=\"color: #6c757d; margin-bottom: 8px;\">No Permissions Set</h5>\n                                        <div style=\"color: #adb5bd;\">\n                                            This query uses default permissions.\n                                        </div>\n                                    </div>\n                                } @else {\n                                    @if (EditMode) {\n                                        <!-- Edit Mode: Use the standard grid -->\n                                        <mj-user-view-grid \n                                            [Params]=\"BuildRelationshipViewParamsByEntityName('Query Permissions','QueryID')\"  \n                                            [NewRecordValues]=\"NewRecordValues('Query Permissions')\"\n                                            [AllowLoad]=\"true\"  \n                                            [EditMode]=\"GridEditMode()\">\n                                        </mj-user-view-grid>\n                                    } @else {\n                                        <!-- Read Mode: Nice card-based display -->\n                                        <div class=\"permissions-display\">\n                                            @for (permission of queryPermissions; track permission.ID) {\n                                                <div class=\"permission-card\" style=\"background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 16px; margin-bottom: 12px;\">\n                                                    <div style=\"display: flex; align-items: center; gap: 12px;\">\n                                                        <i class=\"fa-solid fa-users\" style=\"font-size: 1.5em; color: #6c757d;\"></i>\n                                                        <div style=\"flex: 1;\">\n                                                            <div style=\"font-weight: 600; color: #495057;\">\n                                                                {{ permission.Role }}\n                                                            </div>\n                                                            <div style=\"font-size: 0.85em; color: #6c757d;\">\n                                                                Role Permission\n                                                            </div>\n                                                        </div>\n                                                        <div style=\"display: flex; gap: 8px;\">\n                                                            <span class=\"permission-badge\" style=\"background: #6f42c1; color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.8em;\">\n                                                                <i class=\"fa-solid fa-play\"></i> Can Execute\n                                                            </span>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                }\n                            }\n                        </div>\n                    </kendo-expansionpanel>\n                }\n            </div>\n        </form>\n\n        <!-- Query Run Dialog -->\n        <mj-query-run-dialog \n            [query]=\"record\"\n            [parameters]=\"queryParameters\"\n            [(isVisible)]=\"showRunDialog\"\n            (onClose)=\"onRunDialogClose()\">\n        </mj-query-run-dialog>\n\n        <!-- Category Creation Dialog -->\n        <mj-query-category-dialog\n            [(isVisible)]=\"showCategoryDialog\"\n            (onCategoryCreated)=\"onCategoryCreated($event)\">\n        </mj-query-category-dialog>\n    }\n</div>", styles: [".k-pane {\n  background-color: #F5F6FA;\n}\n\n.content-margin {\n  margin: 10px;\n} \n\n\na {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon {\n  margin-right: 5px;\n}\n\n.record-form {\n  display: block;\n  flex-direction: column;\n  background-color: #F5F6FA;\n  padding: 10px;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: #F5F6FA;\n}\n\nbutton {\n  margin-right: 5px;\n}\n\n.record-form h2 {\n  margin-bottom: 10px;\n}\n\n.k-splitter {\n  border-width: 0px;\n}\n\n.record-form-row {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n\n/* .record-form .record-form-row:nth-child(odd) {\n  background-color: #f2f2f2; \n} */\n\n/* \n.record-form .record-form-row:nth-child(even) {\n  background-color: #ffffff;  \n} */\n\n.record-form .record-form-row > :first-child {\n  font-weight: bold;\n  padding-right: 10px;\n} \n\n.record-form .record-form-row > span {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n \n\n@media (min-width: 768px) {\n  .record-form-row {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row label {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n", ".sql-editor-container {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.filters-help .filter-card {\n    transition: transform 0.2s ease;\n}\n\n.filters-help .filter-card:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n}\n\n.toolbar-actions {\n    margin-left: auto;\n}\n\n.query-header {\n    border-bottom: 2px solid #dee2e6;\n}\n\n.badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n/* Modern Expansion Panel Styling */\n::ng-deep .query-content kendo-expansionpanel {\n    border: none !important;\n    border-radius: 12px !important;\n    margin-bottom: 16px !important;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;\n    background: white !important;\n    overflow: hidden !important;\n}\n\n::ng-deep .query-content .k-expander-header {\n    background: white !important;\n    border: none !important;\n    padding: 16px 20px !important;\n    border-radius: 12px !important;\n    color: #2c3e50 !important;\n    font-weight: 600 !important;\n    font-size: 16px !important;\n    transition: all 0.2s ease !important;\n}\n\n::ng-deep .query-content .k-expander-header:hover {\n    background: #f8f9fa !important;\n}\n\n/* Expanded state header */\n::ng-deep .query-content kendo-expansionpanel[aria-expanded=\"true\"] .k-expander-header {\n    background: #2196f3 !important;\n    color: white !important;\n    border-radius: 12px 12px 0 0 !important;\n}\n\n/* Content area */\n::ng-deep .query-content .k-expander-content {\n    padding: 0 !important;\n    border: none !important;\n    background: white !important;\n    border-radius: 0 0 12px 12px !important;\n}\n\n/* Icon in header */\n::ng-deep .query-content .k-expander-header .fa-solid {\n    transition: transform 0.2s ease !important;\n}\n\n::ng-deep .query-content kendo-expansionpanel[aria-expanded=\"true\"] .k-expander-header .fa-chevron-down {\n    transform: rotate(180deg) !important;\n}\n\n/* Parameter Cards */\n.parameters-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n    gap: 16px;\n    padding: 20px;\n}\n\n.param-card {\n    background: white;\n    border: 2px solid #e9ecef;\n    border-radius: 8px;\n    padding: 16px;\n    transition: all 0.2s;\n    cursor: pointer;\n    position: relative;\n}\n\n.param-card:hover {\n    border-color: #007bff;\n    box-shadow: 0 2px 8px rgba(0,123,255,0.1);\n    transform: translateY(-1px);\n}\n\n.param-card.required {\n    border-color: #ffc107;\n}\n\n.param-card-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 12px;\n}\n\n.param-name {\n    font-weight: 600;\n    font-size: 1.1em;\n    color: #2c3e50;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.param-badges {\n    display: flex;\n    gap: 6px;\n}\n\n.param-badge {\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 0.75em;\n    font-weight: 600;\n    color: white;\n}\n\n.param-badge.required {\n    background: #ffc107;\n}\n\n.param-badge.array {\n    background: #9c27b0;\n}\n\n.param-card-body {\n    color: #6c757d;\n    font-size: 0.9em;\n}\n\n.param-actions {\n    position: absolute;\n    top: 12px;\n    right: 12px;\n    display: flex;\n    gap: 4px;\n    opacity: 0;\n    transition: opacity 0.2s;\n}\n\n.param-card:hover .param-actions {\n    opacity: 1;\n}\n\n.param-action-btn {\n    background: none;\n    border: none;\n    padding: 4px 8px;\n    border-radius: 4px;\n    cursor: pointer;\n    color: #6c757d;\n    transition: all 0.2s;\n}\n\n.param-action-btn:hover {\n    background: #f8f9fa;\n    color: #007bff;\n}\n\n.param-action-btn.delete:hover {\n    background: #fff5f5;\n    color: #dc3545;\n}\n\n/* Details Section */\n.details-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 20px;\n    padding: 20px;\n}\n\n.detail-item {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.detail-label {\n    font-size: 0.85em;\n    font-weight: 600;\n    color: #6c757d;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.detail-value {\n    font-size: 1em;\n    color: #2c3e50;\n}\n\n/* Category Tree Dropdown */\n.category-selector {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n.category-tree-dropdown {\n    flex: 1;\n}\n\n.add-category-btn {\n    background: #28a745;\n    color: white;\n    border: none;\n    padding: 8px 12px;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.add-category-btn:hover {\n    background: #218838;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(40,167,69,0.2);\n}\n\n/* Empty State */\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n    text-align: center;\n    color: #6c757d;\n}\n\n.empty-state-icon {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.3;\n}\n\n.empty-state-title {\n    font-size: 1.2em;\n    font-weight: 600;\n    margin-bottom: 8px;\n    color: #495057;\n}\n\n.empty-state-text {\n    font-size: 0.9em;\n    margin-bottom: 20px;\n}\n\n.add-param-btn {\n    background: #007bff;\n    color: white;\n    border: none;\n    padding: 10px 20px;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 500;\n}\n\n.add-param-btn:hover {\n    background: #0056b3;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0,123,255,0.2);\n}"] }]
+        args: [{ selector: 'mj-query-form', template: "<div class=\"record-form-container\">\n    @if (record) {\n        <form class=\"record-form\" #form=\"ngForm\">\n            <mj-form-toolbar [form]=\"this\"></mj-form-toolbar>\n\n            <!-- Header Section -->\n            <div class=\"query-header\" style=\"background: #f8f9fa; border-bottom: 1px solid #dee2e6; padding: 20px;\">\n                <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n                    \n                    <!-- Top Row: Name and Run Button -->\n                    <div style=\"display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;\">\n                        <!-- Left: Query Name -->\n                        <div style=\"flex: 1; min-width: 0;\">\n                            <div style=\"display: flex; align-items: center; gap: 12px;\">\n                                <i class=\"fa-solid fa-database\" style=\"color: #17a2b8; font-size: 1.4em;\"></i>\n                                @if (EditMode) {\n                                    <kendo-textbox [(ngModel)]=\"record.Name\" \n                                                  name=\"queryName\"\n                                                  placeholder=\"Enter query name...\"\n                                                  style=\"font-size: 1.2em; font-weight: 600; min-width: 300px; flex: 1;\">\n                                    </kendo-textbox>\n                                } @else {\n                                    <h4 style=\"margin: 0; color: #495057; font-weight: 600; flex: 1;\">{{ record.Name || 'Untitled Query' }}</h4>\n                                }\n                            </div>\n                        </div>\n\n                        <!-- Right: Action Buttons -->\n                        <div class=\"action-buttons\" style=\"display: flex; gap: 8px; align-items: center;\">\n                            @if (record.ID) {\n                                <button kendoButton \n                                        [themeColor]=\"'primary'\" \n                                        [size]=\"'large'\"\n                                        [disabled]=\"EditMode || record.Status !== 'Approved' || !record.SQL || record.SQL.trim().length === 0\"\n                                        (click)=\"runQuery()\"\n                                        title=\"Run Query\">\n                                    <i class=\"fa-solid fa-play\"></i> Run\n                                </button>\n                            }\n                        </div>\n                    </div>\n\n                    <!-- Second Row: Category and Status -->\n                    <div style=\"display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;\">\n                        <!-- Category -->\n                        <div style=\"display: flex; align-items: center; gap: 12px;\">\n                            <label style=\"font-weight: 600; color: #495057; min-width: 80px;\">Category:</label>\n                            @if (EditMode) {\n                                <kendo-dropdownlist\n                                    [(ngModel)]=\"record.CategoryID\"\n                                    name=\"categoryId\"\n                                    [data]=\"categoryOptions\"\n                                    textField=\"text\"\n                                    valueField=\"value\"\n                                    [valuePrimitive]=\"true\"\n                                    placeholder=\"Select category...\"\n                                    style=\"flex: 1;\">\n                                </kendo-dropdownlist>\n                            } @else {\n                                <span style=\"color: #495057;\">{{ getCategoryPath() || 'Uncategorized' }}</span>\n                            }\n                        </div>\n\n                        <!-- Status -->\n                        <div style=\"display: flex; align-items: center; gap: 12px;\">\n                            <label style=\"font-weight: 600; color: #495057; min-width: 50px;\">Status:</label>\n                            @if (EditMode) {\n                                <kendo-dropdownlist\n                                    [(ngModel)]=\"record.Status\"\n                                    name=\"status\"\n                                    [data]=\"statusOptions\"\n                                    textField=\"text\"\n                                    valueField=\"value\"\n                                    [valuePrimitive]=\"true\"\n                                    style=\"flex: 1;\">\n                                </kendo-dropdownlist>\n                            } @else {\n                                <span class=\"badge\" \n                                      [style.background]=\"getStatusBadgeColor()\" \n                                      style=\"color: white; padding: 6px 12px; border-radius: 12px; font-size: 0.85em;\">\n                                    <i class=\"fa-solid fa-check-circle\" *ngIf=\"record.Status === 'Approved'\"></i>\n                                    <i class=\"fa-solid fa-clock\" *ngIf=\"record.Status === 'Pending'\"></i>\n                                    <i class=\"fa-solid fa-times-circle\" *ngIf=\"record.Status === 'Rejected'\"></i>\n                                    {{ record.Status || 'Unknown' }}\n                                </span>\n                            }\n                        </div>\n                    </div>\n\n                    <!-- Third Row: Description -->\n                    @if (EditMode || record.Description) {\n                        <div>\n                            @if (EditMode) {\n                                <kendo-textarea [(ngModel)]=\"record.Description\" \n                                               name=\"description\"\n                                               [rows]=\"2\"\n                                               placeholder=\"Enter query description...\"\n                                               style=\"width: 100%;\">\n                                </kendo-textarea>\n                            } @else {\n                                <p style=\"margin: 0; color: #6c757d; font-size: 0.9em; line-height: 1.4;\">{{ record.Description }}</p>\n                            }\n                        </div>\n                    }\n                </div>\n            </div>\n\n            <!-- Main Content Area with Expansion Panels -->\n            <div class=\"query-content\" style=\"padding: 20px; overflow-y: auto; background: #f5f7fa;\">\n                \n                <!-- SQL Query Panel -->\n                <kendo-expansionpanel \n                    [(expanded)]=\"sqlPanelExpanded\"\n                    style=\"margin-bottom: 16px;\">\n                    <ng-template kendoExpansionPanelTitleDirective>\n                        <span style=\"display: flex; align-items: center; justify-content: space-between; width: 100%;\">\n                            <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                                <i class=\"fa-solid fa-code\" style=\"color: #17a2b8;\"></i>\n                                SQL\n                                @if (record.SQL) {\n                                    <span class=\"badge\" style=\"background: #28a745; color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n                                        <i class=\"fa-solid fa-check\"></i> Defined\n                                    </span>\n                                }\n                            </span>\n                            <button type=\"button\"\n                                    kendoButton \n                                    fillMode=\"flat\"\n                                    size=\"small\"\n                                    (click)=\"toggleFiltersHelp(); $event.stopPropagation()\"\n                                    title=\"Show/hide SQL filters help\"\n                                    style=\"margin-right: 8px;\">\n                                <i class=\"fa-solid fa-question-circle\"></i>\n                                <span style=\"margin-left: 4px;\">Filters Help</span>\n                                <i class=\"fa-solid\" [ngClass]=\"showFiltersHelp ? 'fa-chevron-up' : 'fa-chevron-down'\" style=\"margin-left: 4px;\"></i>\n                            </button>\n                        </span>\n                    </ng-template>\n                    \n                    <div style=\"display: flex; flex-direction: column;\">\n                        <!-- Code Editor -->\n                        <mj-code-editor #sqlEditor\n                                       (change)=\"onSQLChange($event)\"\n                                       [language]=\"'sql'\"\n                                       style=\"flex: 1; height: 400px; border: 1px solid #ced4da; border-radius: 4px;\">\n                        </mj-code-editor>\n                        \n                        <!-- SQL Filters Help (Below Editor) -->\n                        @if (showFiltersHelp) {\n                            <div class=\"filters-help\" style=\"background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px; padding: 16px; margin-top: 16px;\">\n                                <h6 style=\"margin: 0 0 12px 0; color: #495057; font-weight: 600;\">\n                                    <i class=\"fa-solid fa-filter\"></i> Available SQL Filters for Parameterized Queries\n                                </h6>\n                                \n                                <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px;\">\n                                    @for (filter of sqlFilters; track filter.name) {\n                                        <div class=\"filter-card\" style=\"background: white; border: 1px solid #e9ecef; border-radius: 4px; padding: 12px;\">\n                                            <div style=\"font-family: 'Courier New', monospace; font-weight: bold; color: #007bff; margin-bottom: 4px;\">\n                                                {{ filter.name }}\n                                            </div>\n                                            <div style=\"font-size: 0.85em; color: #495057; margin-bottom: 8px;\">\n                                                {{ filter.description }}\n                                            </div>\n                                            <div style=\"font-family: 'Courier New', monospace; font-size: 0.8em; background: #f1f3f4; padding: 6px; border-radius: 3px; margin-bottom: 4px;\">\n                                                {{ filter.exampleSyntax }}\n                                            </div>\n                                            @if (filter.notes) {\n                                                <div style=\"font-size: 0.75em; color: #6c757d; font-style: italic;\">\n                                                    {{ filter.notes }}\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                </div>\n                            </div>\n                        }\n                    </div>\n                </kendo-expansionpanel>\n\n                <!-- Parameters Panel -->\n                @if (record.IsSaved) {\n                    <kendo-expansionpanel \n                        [(expanded)]=\"parametersPanelExpanded\"\n                        style=\"margin-bottom: 16px;\">\n                        <ng-template kendoExpansionPanelTitleDirective>\n                            <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                                <i class=\"fa-solid fa-sliders\" style=\"color: #6c757d;\"></i>\n                                Query Parameters\n                                @if (queryParameters.length > 0) {\n                                    <span class=\"badge\" style=\"background: #17a2b8; color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n                                        {{ queryParameters.length }}\n                                    </span>\n                                }\n                            </span>\n                        </ng-template>\n                        \n                        <div style=\"padding: 16px 0;\">\n                            @if (isLoadingParameters) {\n                                <div style=\"display: flex; align-items: center; justify-content: center; padding: 40px;\">\n                                    <i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 24px; color: #6c757d; margin-right: 12px;\"></i>\n                                    <span style=\"color: #6c757d;\">Loading parameters...</span>\n                                </div>\n                            } @else {\n                                @if (queryParameters.length === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-sliders empty-state-icon\"></i>\n                                        <div class=\"empty-state-title\">No Parameters Defined</div>\n                                        <div class=\"empty-state-text\">\n                                            Add parameters to make your query dynamic and reusable.\n                                        </div>\n                                        @if (EditMode) {\n                                            <button type=\"button\" class=\"add-param-btn\" (click)=\"addParameter()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add First Parameter\n                                            </button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <!-- Parameters Header with Add Button -->\n                                    @if (EditMode) {\n                                        <div style=\"display: flex; justify-content: flex-end; margin-bottom: 16px; padding: 0 20px;\">\n                                            <button type=\"button\" class=\"add-param-btn\" (click)=\"addParameter()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Parameter\n                                            </button>\n                                        </div>\n                                    }\n                                    \n                                    <!-- Parameters Grid -->\n                                    <div class=\"parameters-grid\">\n                                        @for (param of queryParameters; track param.ID || $index) {\n                                            <div class=\"param-card\" [class.required]=\"param.IsRequired\" (click)=\"editParameter(param)\">\n                                                <div class=\"param-card-header\">\n                                                    <div class=\"param-name\">\n                                                        <i class=\"fa-solid fa-at\" style=\"color: #007bff;\"></i>\n                                                        {{ param.Name }}\n                                                    </div>\n                                                    <div class=\"param-badges\">\n                                                        @if (param.IsRequired) {\n                                                            <span class=\"param-badge required\">Required</span>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                \n                                                <div class=\"param-card-body\">\n                                                    @if (param.Description) {\n                                                        <div style=\"margin-bottom: 8px;\">{{ param.Description }}</div>\n                                                    }\n                                                    \n                                                    <div style=\"display: flex; gap: 16px; font-size: 0.85em;\">\n                                                        <div>\n                                                            <strong>Type:</strong> {{ param.Type || 'Text' }}\n                                                        </div>\n                                                        @if (param.DefaultValue) {\n                                                            <div>\n                                                                <strong>Default:</strong> \n                                                                <code style=\"background: #f1f3f4; padding: 2px 4px; border-radius: 3px;\">\n                                                                    {{ param.DefaultValue }}\n                                                                </code>\n                                                            </div>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                \n                                                @if (EditMode) {\n                                                    <div class=\"param-actions\" (click)=\"$event.stopPropagation()\">\n                                                        <button type=\"button\" class=\"param-action-btn\" (click)=\"editParameter(param)\" title=\"Edit parameter\">\n                                                            <i class=\"fa-solid fa-pen\"></i>\n                                                        </button>\n                                                        <button type=\"button\" class=\"param-action-btn delete\" (click)=\"deleteParameter(param)\" title=\"Delete parameter\">\n                                                            <i class=\"fa-solid fa-trash\"></i>\n                                                        </button>\n                                                    </div>\n                                                }\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            }\n                        </div>\n                    </kendo-expansionpanel>\n                }\n\n                <!-- Query Fields Panel -->\n                @if (record.IsSaved) {\n                    <kendo-expansionpanel \n                        [(expanded)]=\"fieldsPanelExpanded\"\n                        style=\"margin-bottom: 16px;\">\n                        <ng-template kendoExpansionPanelTitleDirective>\n                            <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                                <i class=\"fa-solid fa-table\" style=\"color: #6c757d;\"></i>\n                                Query Fields\n                                @if (queryFields.length > 0) {\n                                    <span class=\"badge\" style=\"background: #17a2b8; color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n                                        {{ queryFields.length }}\n                                    </span>\n                                }\n                            </span>\n                        </ng-template>\n                        \n                        <div style=\"padding: 16px 0;\">\n                            @if (isLoadingFields) {\n                                <div style=\"display: flex; justify-content: center; padding: 40px;\">\n                                    <i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 2em; color: #007bff;\"></i>\n                                </div>\n                            } @else {\n                                @if (queryFields.length === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-table\" style=\"font-size: 3em; color: #dee2e6; margin-bottom: 12px;\"></i>\n                                        <h5 style=\"color: #6c757d; margin-bottom: 8px;\">No Fields Defined</h5>\n                                        <div style=\"color: #adb5bd; margin-bottom: 16px;\">\n                                            Define output fields for your query results.\n                                        </div>\n                                        @if (EditMode) {\n                                            <button type=\"button\" class=\"add-param-btn\" (click)=\"addField()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add First Field\n                                            </button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <!-- Fields Header with Add Button -->\n                                    @if (EditMode) {\n                                        <div style=\"display: flex; justify-content: flex-end; margin-bottom: 16px; padding: 0 20px;\">\n                                            <button type=\"button\" class=\"add-param-btn\" (click)=\"addField()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Field\n                                            </button>\n                                        </div>\n                                    }\n                                    \n                                    <!-- Fields Grid -->\n                                    <div class=\"parameters-grid\">\n                                        @for (field of queryFields; track field.ID) {\n                                            <div class=\"param-card\">\n                                                <div class=\"param-card-header\">\n                                                    <div class=\"param-name\">\n                                                        <i class=\"fa-solid fa-columns\" style=\"color: #17a2b8;\"></i>\n                                                        {{ field.Name }}\n                                                    </div>\n                                                    <div class=\"param-badges\">\n                                                        <span class=\"param-badge\" style=\"background: #e3f2fd; color: #1976d2;\">{{ field.SQLBaseType }}</span>\n                                                        @if (field.Sequence) {\n                                                            <span class=\"param-badge\" style=\"background: #f3e5f5; color: #7b1fa2;\">#{{ field.Sequence }}</span>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                \n                                                <div class=\"param-card-body\">\n                                                    @if (field.Description) {\n                                                        <div class=\"param-description\">{{ field.Description }}</div>\n                                                    }\n                                                    <div class=\"param-meta\">\n                                                        <span class=\"meta-item\">\n                                                            <i class=\"fa-solid fa-code\"></i> {{ field.SQLFullType || field.SQLBaseType }}\n                                                        </span>\n                                                    </div>\n                                                </div>\n                                                \n                                                @if (EditMode) {\n                                                    <div class=\"param-card-actions\">\n                                                        <button type=\"button\" class=\"action-btn danger\" (click)=\"deleteField(field)\" title=\"Delete field\">\n                                                            <i class=\"fa-solid fa-trash\"></i>\n                                                        </button>\n                                                    </div>\n                                                }\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            }\n                        </div>\n                    </kendo-expansionpanel>\n                }\n\n                <!-- Query Entities Panel -->\n                @if (record.IsSaved) {\n                    <kendo-expansionpanel \n                        [(expanded)]=\"entitiesPanelExpanded\"\n                        style=\"margin-bottom: 16px;\">\n                        <ng-template kendoExpansionPanelTitleDirective>\n                            <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                                <i class=\"fa-solid fa-database\" style=\"color: #6c757d;\"></i>\n                                Query Entities\n                                @if (queryEntities.length > 0) {\n                                    <span class=\"badge\" style=\"background: #17a2b8; color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n                                        {{ queryEntities.length }}\n                                    </span>\n                                }\n                            </span>\n                        </ng-template>\n                        \n                        <div style=\"padding: 16px 0;\">\n                            @if (isLoadingEntities) {\n                                <div style=\"display: flex; justify-content: center; padding: 40px;\">\n                                    <i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 2em; color: #007bff;\"></i>\n                                </div>\n                            } @else {\n                                @if (queryEntities.length === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-database\" style=\"font-size: 3em; color: #dee2e6; margin-bottom: 12px;\"></i>\n                                        <h5 style=\"color: #6c757d; margin-bottom: 8px;\">No Entities Tracked</h5>\n                                        <div style=\"color: #adb5bd; margin-bottom: 16px;\">\n                                            Track which entities this query uses for documentation.\n                                        </div>\n                                        @if (EditMode) {\n                                            <button type=\"button\" class=\"add-param-btn\" (click)=\"addEntity()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add First Entity\n                                            </button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <!-- Entities Header with Add Button -->\n                                    @if (EditMode) {\n                                        <div style=\"display: flex; justify-content: flex-end; margin-bottom: 16px; padding: 0 20px;\">\n                                            <button type=\"button\" class=\"add-param-btn\" (click)=\"addEntity()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Entity\n                                            </button>\n                                        </div>\n                                    }\n                                    \n                                    <!-- Entities Grid -->\n                                    <div class=\"parameters-grid\">\n                                        @for (entity of queryEntities; track entity.ID) {\n                                            <div class=\"param-card\">\n                                                <div class=\"param-card-header\">\n                                                    <div class=\"param-name\">\n                                                        <i class=\"fa-solid fa-table\" style=\"color: #28a745;\"></i>\n                                                        {{ entity.Entity || 'Select Entity...' }}\n                                                    </div>\n                                                    @if (EditMode) {\n                                                        <div style=\"flex: 1; margin-left: 12px;\">\n                                                            <kendo-dropdownlist\n                                                                [(ngModel)]=\"entity.EntityID\"\n                                                                [name]=\"'entity_' + entity.ID\"\n                                                                [data]=\"getEntityOptions()\"\n                                                                textField=\"text\"\n                                                                valueField=\"id\"\n                                                                [valuePrimitive]=\"true\"\n                                                                placeholder=\"Select entity...\"\n                                                                style=\"width: 100%;\">\n                                                            </kendo-dropdownlist>\n                                                        </div>\n                                                    }\n                                                </div>\n                                                \n                                                @if (!EditMode && entity.Entity) {\n                                                    <div class=\"param-card-body\">\n                                                        <div class=\"param-meta\">\n                                                            <span class=\"meta-item\">\n                                                                <i class=\"fa-solid fa-database\"></i> Data Source\n                                                            </span>\n                                                        </div>\n                                                    </div>\n                                                }\n                                                \n                                                @if (EditMode) {\n                                                    <div class=\"param-card-actions\">\n                                                        <button type=\"button\" class=\"action-btn danger\" (click)=\"deleteEntity(entity)\" title=\"Delete entity\">\n                                                            <i class=\"fa-solid fa-trash\"></i>\n                                                        </button>\n                                                    </div>\n                                                }\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            }\n                        </div>\n                    </kendo-expansionpanel>\n                }\n\n                <!-- Details Panel -->\n                <kendo-expansionpanel \n                    [(expanded)]=\"detailsPanelExpanded\"\n                    style=\"margin-bottom: 16px;\">\n                    <ng-template kendoExpansionPanelTitleDirective>\n                        <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                            <i class=\"fa-solid fa-info-circle\" style=\"color: #6c757d;\"></i>\n                            Query Details\n                        </span>\n                    </ng-template>\n                    \n                    <div style=\"padding: 20px;\">\n                        <div class=\"details-grid\">\n                            <!-- Uses Template -->\n                            <div class=\"detail-item\">\n                                <label class=\"detail-label\">\n                                    <i class=\"fa-solid fa-file-code\"></i> Template Usage\n                                </label>\n                                @if (EditMode) {\n                                    <kendo-switch [(ngModel)]=\"record.UsesTemplate\" name=\"usesTemplate\"></kendo-switch>\n                                } @else {\n                                    <div class=\"detail-value\">\n                                        @if (record.UsesTemplate) {\n                                            <span style=\"color: #28a745;\"><i class=\"fa-solid fa-check\"></i> Uses Templates</span>\n                                        } @else {\n                                            <span style=\"color: #6c757d;\"><i class=\"fa-solid fa-times\"></i> No Templates</span>\n                                        }\n                                    </div>\n                                }\n                            </div>\n\n                            <!-- Created Date -->\n                            <div class=\"detail-item\">\n                                <label class=\"detail-label\">\n                                    <i class=\"fa-solid fa-calendar-plus\"></i> Created\n                                </label>\n                                <div class=\"detail-value\">{{ formatDate(record.__mj_CreatedAt) }}</div>\n                            </div>\n\n                            <!-- Updated Date -->\n                            <div class=\"detail-item\">\n                                <label class=\"detail-label\">\n                                    <i class=\"fa-solid fa-calendar-check\"></i> Last Updated\n                                </label>\n                                <div class=\"detail-value\">{{ formatDate(record.__mj_UpdatedAt) }}</div>\n                            </div>\n\n                            <!-- Quality Rank -->\n                            @if (record.QualityRank != null) {\n                                <div class=\"detail-item\">\n                                    <label class=\"detail-label\">\n                                        <i class=\"fa-solid fa-star\"></i> Quality Rank\n                                    </label>\n                                    <div class=\"detail-value\">{{ record.QualityRank }}/10</div>\n                                </div>\n                            }\n                        </div>\n                    </div>\n                </kendo-expansionpanel>\n\n                <!-- Permissions Panel -->\n                @if (record.IsSaved) {\n                    <kendo-expansionpanel \n                        [(expanded)]=\"permissionsPanelExpanded\"\n                        style=\"margin-bottom: 16px;\">\n                        <ng-template kendoExpansionPanelTitleDirective>\n                            <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                                <i class=\"fa-solid fa-shield-alt\" style=\"color: #6c757d;\"></i>\n                                Query Permissions\n                            </span>\n                        </ng-template>\n                        \n                        <div style=\"padding: 16px 0;\">\n                            @if (isLoadingPermissions) {\n                                <div style=\"display: flex; justify-content: center; padding: 40px;\">\n                                    <i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 2em; color: #007bff;\"></i>\n                                </div>\n                            } @else {\n                                @if (queryPermissions.length === 0 && !EditMode) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-shield-alt\" style=\"font-size: 3em; color: #dee2e6; margin-bottom: 12px;\"></i>\n                                        <h5 style=\"color: #6c757d; margin-bottom: 8px;\">No Permissions Set</h5>\n                                        <div style=\"color: #adb5bd;\">\n                                            This query uses default permissions.\n                                        </div>\n                                    </div>\n                                } @else {\n                                    @if (EditMode) {\n                                        <!-- Edit Mode: Use the standard grid -->\n                                        <mj-user-view-grid \n                                            [Params]=\"BuildRelationshipViewParamsByEntityName('Query Permissions','QueryID')\"  \n                                            [NewRecordValues]=\"NewRecordValues('Query Permissions')\"\n                                            [AllowLoad]=\"true\"  \n                                            [EditMode]=\"GridEditMode()\">\n                                        </mj-user-view-grid>\n                                    } @else {\n                                        <!-- Read Mode: Nice card-based display -->\n                                        <div class=\"permissions-display\">\n                                            @for (permission of queryPermissions; track permission.ID) {\n                                                <div class=\"permission-card\" style=\"background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 16px; margin-bottom: 12px;\">\n                                                    <div style=\"display: flex; align-items: center; gap: 12px;\">\n                                                        <i class=\"fa-solid fa-users\" style=\"font-size: 1.5em; color: #6c757d;\"></i>\n                                                        <div style=\"flex: 1;\">\n                                                            <div style=\"font-weight: 600; color: #495057;\">\n                                                                {{ permission.Role }}\n                                                            </div>\n                                                            <div style=\"font-size: 0.85em; color: #6c757d;\">\n                                                                Role Permission\n                                                            </div>\n                                                        </div>\n                                                        <div style=\"display: flex; gap: 8px;\">\n                                                            <span class=\"permission-badge\" style=\"background: #6f42c1; color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.8em;\">\n                                                                <i class=\"fa-solid fa-play\"></i> Can Execute\n                                                            </span>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                }\n                            }\n                        </div>\n                    </kendo-expansionpanel>\n                }\n            </div>\n        </form>\n\n        <!-- Query Run Dialog -->\n        <mj-query-run-dialog \n            [query]=\"record\"\n            [parameters]=\"queryParameters\"\n            [(isVisible)]=\"showRunDialog\"\n            (onClose)=\"onRunDialogClose()\">\n        </mj-query-run-dialog>\n\n        <!-- Category Creation Dialog -->\n        <mj-query-category-dialog\n            [(isVisible)]=\"showCategoryDialog\"\n            (onCategoryCreated)=\"onCategoryCreated($event)\">\n        </mj-query-category-dialog>\n    }\n</div>", styles: [".k-pane {\n  background-color: #F5F6FA;\n}\n\n.content-margin {\n  margin: 10px;\n} \n\n\na {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon {\n  margin-right: 5px;\n}\n\n.record-form {\n  display: block;\n  flex-direction: column;\n  background-color: #F5F6FA;\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: #F5F6FA;\n}\n\nbutton {\n  margin-right: 5px;\n}\n\n.record-form h2 {\n  margin-bottom: 10px;\n}\n\n.k-splitter {\n  border-width: 0px;\n}\n\n.record-form-row {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n\n/* .record-form .record-form-row:nth-child(odd) {\n  background-color: #f2f2f2; \n} */\n\n/* \n.record-form .record-form-row:nth-child(even) {\n  background-color: #ffffff;  \n} */\n\n.record-form .record-form-row > :first-child {\n  font-weight: bold;\n  padding-right: 10px;\n} \n\n.record-form .record-form-row > span {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n \n\n@media (min-width: 768px) {\n  .record-form-row {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row label {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n/* Collapsible Panel Styles */\n.form-panels-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: #F5F6FA;\n}\n\n/* All field sections take full width */\n.form-panels-container > .form-card {\n  width: 100%;\n}\n\n/* Related entity grid container - responsive layout */\n.form-panels-container .related-entity-grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n/* Responsive multi-column layout for related entities on wider screens */\n@media (min-width: 1400px) {\n  .form-panels-container .related-entity-grid {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n.collapsible-card {\n  overflow: hidden;\n}\n\n.collapsible-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n  border-bottom-color: #667eea;\n}\n\n.collapsible-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title i {\n  font-size: 20px;\n  color: #667eea;\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.collapsible-header .collapse-icon {\n  color: #6b7280;\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body {\n  padding: 24px;\n}\n\n/* Related Entity Sections - Visual Distinction */\n.form-card.related-entity {\n  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n  border-left: 3px solid #3b82f6;\n}\n\n.form-card.related-entity .collapsible-header {\n  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n  border-bottom-color: #3b82f6;\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: #3b82f6;\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.form-section-controls .control-group {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls button {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid #d1d5db;\n  background: white;\n  color: #374151;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls button:hover {\n  background: #667eea;\n  color: white;\n  border-color: #667eea;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);\n}\n\n.form-section-controls button:active {\n  transform: translateY(0);\n}\n\n.form-section-controls button i {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls .section-search {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid #d1d5db;\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: white;\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: #667eea;\n  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: #9ca3af;\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: #6b7280;\n  margin-left: auto;\n  font-weight: 500;\n}\n\n/* Hidden sections for search filter */\n.form-card.search-hidden {\n  display: none;\n}\n\n/* Section count badge */\n.section-count-badge {\n  background: #667eea;\n  color: white;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n/* Search highlighting in section names */\n.collapsible-title h3 .search-highlight {\n  background-color: #fef08a;\n  color: #854d0e;\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n/* Row count badge in section headers */\n.collapsible-title .row-count-badge {\n  background: #10b981;\n  color: white;\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n/* Gray badge for zero rows (loaded but empty) */\n.collapsible-title .row-count-badge.zero-rows {\n  background: #9ca3af;\n}\n", ".sql-editor-container {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.filters-help .filter-card {\n    transition: transform 0.2s ease;\n}\n\n.filters-help .filter-card:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n}\n\n.toolbar-actions {\n    margin-left: auto;\n}\n\n.query-header {\n    border-bottom: 2px solid #dee2e6;\n}\n\n.badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n/* Modern Expansion Panel Styling */\n::ng-deep .query-content kendo-expansionpanel {\n    border: none !important;\n    border-radius: 12px !important;\n    margin-bottom: 16px !important;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;\n    background: white !important;\n    overflow: hidden !important;\n}\n\n::ng-deep .query-content .k-expander-header {\n    background: white !important;\n    border: none !important;\n    padding: 16px 20px !important;\n    border-radius: 12px !important;\n    color: #2c3e50 !important;\n    font-weight: 600 !important;\n    font-size: 16px !important;\n    transition: all 0.2s ease !important;\n}\n\n::ng-deep .query-content .k-expander-header:hover {\n    background: #f8f9fa !important;\n}\n\n/* Expanded state header */\n::ng-deep .query-content kendo-expansionpanel[aria-expanded=\"true\"] .k-expander-header {\n    background: #2196f3 !important;\n    color: white !important;\n    border-radius: 12px 12px 0 0 !important;\n}\n\n/* Content area */\n::ng-deep .query-content .k-expander-content {\n    padding: 0 !important;\n    border: none !important;\n    background: white !important;\n    border-radius: 0 0 12px 12px !important;\n}\n\n/* Icon in header */\n::ng-deep .query-content .k-expander-header .fa-solid {\n    transition: transform 0.2s ease !important;\n}\n\n::ng-deep .query-content kendo-expansionpanel[aria-expanded=\"true\"] .k-expander-header .fa-chevron-down {\n    transform: rotate(180deg) !important;\n}\n\n/* Parameter Cards */\n.parameters-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n    gap: 16px;\n    padding: 20px;\n}\n\n.param-card {\n    background: white;\n    border: 2px solid #e9ecef;\n    border-radius: 8px;\n    padding: 16px;\n    transition: all 0.2s;\n    cursor: pointer;\n    position: relative;\n}\n\n.param-card:hover {\n    border-color: #007bff;\n    box-shadow: 0 2px 8px rgba(0,123,255,0.1);\n    transform: translateY(-1px);\n}\n\n.param-card.required {\n    border-color: #ffc107;\n}\n\n.param-card-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 12px;\n}\n\n.param-name {\n    font-weight: 600;\n    font-size: 1.1em;\n    color: #2c3e50;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.param-badges {\n    display: flex;\n    gap: 6px;\n}\n\n.param-badge {\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 0.75em;\n    font-weight: 600;\n    color: white;\n}\n\n.param-badge.required {\n    background: #ffc107;\n}\n\n.param-badge.array {\n    background: #9c27b0;\n}\n\n.param-card-body {\n    color: #6c757d;\n    font-size: 0.9em;\n}\n\n.param-actions {\n    position: absolute;\n    top: 12px;\n    right: 12px;\n    display: flex;\n    gap: 4px;\n    opacity: 0;\n    transition: opacity 0.2s;\n}\n\n.param-card:hover .param-actions {\n    opacity: 1;\n}\n\n.param-action-btn {\n    background: none;\n    border: none;\n    padding: 4px 8px;\n    border-radius: 4px;\n    cursor: pointer;\n    color: #6c757d;\n    transition: all 0.2s;\n}\n\n.param-action-btn:hover {\n    background: #f8f9fa;\n    color: #007bff;\n}\n\n.param-action-btn.delete:hover {\n    background: #fff5f5;\n    color: #dc3545;\n}\n\n/* Details Section */\n.details-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 20px;\n    padding: 20px;\n}\n\n.detail-item {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.detail-label {\n    font-size: 0.85em;\n    font-weight: 600;\n    color: #6c757d;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.detail-value {\n    font-size: 1em;\n    color: #2c3e50;\n}\n\n/* Category Tree Dropdown */\n.category-selector {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n.category-tree-dropdown {\n    flex: 1;\n}\n\n.add-category-btn {\n    background: #28a745;\n    color: white;\n    border: none;\n    padding: 8px 12px;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.add-category-btn:hover {\n    background: #218838;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(40,167,69,0.2);\n}\n\n/* Empty State */\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n    text-align: center;\n    color: #6c757d;\n}\n\n.empty-state-icon {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.3;\n}\n\n.empty-state-title {\n    font-size: 1.2em;\n    font-weight: 600;\n    margin-bottom: 8px;\n    color: #495057;\n}\n\n.empty-state-text {\n    font-size: 0.9em;\n    margin-bottom: 20px;\n}\n\n.add-param-btn {\n    background: #007bff;\n    color: white;\n    border: none;\n    padding: 10px 20px;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 500;\n}\n\n.add-param-btn:hover {\n    background: #0056b3;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0,123,255,0.2);\n}"] }]
     }], null, { sqlEditor: [{
             type: ViewChild,
             args: ['sqlEditor']

package/dist/lib/custom/Templates/templates-form.component.js

@@ -718,7 +718,7 @@ let TemplatesFormExtendedComponent = class TemplatesFormExtendedComponent extend
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.record ? 1 : -1);
-        } }, dependencies: [i1.ɵNgNoValidate, i1.NgControlStatus, i1.NgControlStatusGroup, i1.NgModel, i1.NgForm, i2.TextAreaComponent, i2.TextBoxComponent, i3.ComboBoxComponent, i4.UserViewGridComponent, i5.MJFormField, i6.FormToolbarComponent, i7.MJTabStripComponent, i7.MJTabBodyComponent, i7.MJTabComponent, i8.TemplateParamDialogComponent, i9.TemplateParamsGridComponent, i10.TemplateEditorComponent], styles: [".k-pane[_ngcontent-%COMP%] {\n  background-color: #F5F6FA;\n}\n\n.content-margin[_ngcontent-%COMP%] {\n  margin: 10px;\n} \n\n\na[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] {\n  display: block;\n  flex-direction: column;\n  background-color: #F5F6FA;\n  padding: 10px;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: #F5F6FA;\n}\n\nbutton[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n}\n\n.k-splitter[_ngcontent-%COMP%] {\n  border-width: 0px;\n}\n\n.record-form-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child {\n  font-weight: bold;\n  padding-right: 10px;\n} \n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n \n\n@media (min-width: 768px) {\n  .record-form-row[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}"] }); }
+        } }, dependencies: [i1.ɵNgNoValidate, i1.NgControlStatus, i1.NgControlStatusGroup, i1.NgModel, i1.NgForm, i2.TextAreaComponent, i2.TextBoxComponent, i3.ComboBoxComponent, i4.UserViewGridComponent, i5.MJFormField, i6.FormToolbarComponent, i7.MJTabStripComponent, i7.MJTabBodyComponent, i7.MJTabComponent, i8.TemplateParamDialogComponent, i9.TemplateParamsGridComponent, i10.TemplateEditorComponent], styles: [".k-pane[_ngcontent-%COMP%] {\n  background-color: #F5F6FA;\n}\n\n.content-margin[_ngcontent-%COMP%] {\n  margin: 10px;\n} \n\n\na[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] {\n  display: block;\n  flex-direction: column;\n  background-color: #F5F6FA;\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: #F5F6FA;\n}\n\nbutton[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n}\n\n.k-splitter[_ngcontent-%COMP%] {\n  border-width: 0px;\n}\n\n.record-form-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child {\n  font-weight: bold;\n  padding-right: 10px;\n} \n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n \n\n@media (min-width: 768px) {\n  .record-form-row[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: #F5F6FA;\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%]    > .form-card[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n\n\n@media (min-width: 1400px) {\n  .form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n.collapsible-card[_ngcontent-%COMP%] {\n  overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n  border-bottom-color: #667eea;\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: #667eea;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n  color: #6b7280;\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body[_ngcontent-%COMP%] {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed[_ngcontent-%COMP%] {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body[_ngcontent-%COMP%] {\n  padding: 24px;\n}\n\n\n\n.form-card.related-entity[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n  border-left: 3px solid #3b82f6;\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n  border-bottom-color: #3b82f6;\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #3b82f6;\n}\n\n\n\n.form-section-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .control-group[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid #d1d5db;\n  background: white;\n  color: #374151;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n  background: #667eea;\n  color: white;\n  border-color: #667eea;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid #d1d5db;\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: white;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #667eea;\n  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]::placeholder {\n  color: #9ca3af;\n  font-style: italic;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #6b7280;\n  margin-left: auto;\n  font-weight: 500;\n}\n\n\n\n.form-card.search-hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n\n.section-count-badge[_ngcontent-%COMP%] {\n  background: #667eea;\n  color: white;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   .search-highlight[_ngcontent-%COMP%] {\n  background-color: #fef08a;\n  color: #854d0e;\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge[_ngcontent-%COMP%] {\n  background: #10b981;\n  color: white;\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n  background: #9ca3af;\n}"] }); }
 };
 TemplatesFormExtendedComponent = __decorate([
     RegisterClass(BaseFormComponent, 'Templates')
@@ -726,7 +726,7 @@ TemplatesFormExtendedComponent = __decorate([
 export { TemplatesFormExtendedComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TemplatesFormExtendedComponent, [{
         type: Component,
-        args: [{ selector: 'mj-templates-form', template: "<div class=\"record-form-container\">\n    @if (record) {\n        <form class=\"record-form\" #form=\"ngForm\" >\n        <mj-form-toolbar [form]=\"this\"></mj-form-toolbar>\n\n        <!-- Top Section - Key Fields -->\n        <div class=\"template-header\" style=\"background: #f8f9fa; border-bottom: 1px solid #dee2e6; padding: 8px 20px;\">\n            <div style=\"display: grid; grid-template-columns: 1fr 2fr 1fr auto; gap: 12px; align-items: start;\">\n                \n                <!-- Name -->\n                <div class=\"form-group\" style=\"margin: 0;\">\n                    <label class=\"form-label\" style=\"font-weight: 500; margin-bottom: 3px; color: #495057; font-size: 0.85em;\">\n                        <i class=\"fa-solid fa-file-text\"></i> Template Name\n                    </label>\n                    @if (EditMode) {\n                        <kendo-textbox [(ngModel)]=\"record.Name\" name=\"templateName\" placeholder=\"Enter template name...\"></kendo-textbox>\n                    } @else {\n                        <div class=\"form-control-plaintext\" style=\"font-size: 1em; font-weight: 500; padding: 6px 0;\">\n                            {{ record.Name || 'Unnamed Template' }}\n                        </div>\n                    }\n                </div>\n\n                <!-- Description -->\n                <div class=\"form-group\" style=\"margin: 0;\">\n                    <label class=\"form-label\" style=\"font-weight: 500; margin-bottom: 3px; color: #495057; font-size: 0.85em;\">\n                        <i class=\"fa-solid fa-align-left\"></i> Description\n                    </label>\n                    @if (EditMode) {\n                        <kendo-textarea [(ngModel)]=\"record.Description\" \n                                       name=\"description\"\n                                       [rows]=\"2\"\n                                       placeholder=\"Enter template description...\"></kendo-textarea>\n                    } @else {\n                        <div class=\"form-control-plaintext\" style=\"padding: 8px 0; color: #6c757d;\">\n                            {{ record.Description || 'No description provided' }}\n                        </div>\n                    }\n                </div>\n\n                <!-- Category -->\n                <div class=\"form-group\" style=\"margin: 0;\">\n                    <label class=\"form-label\" style=\"font-weight: 500; margin-bottom: 3px; color: #495057; font-size: 0.85em;\">\n                        <i class=\"fa-solid fa-folder\"></i> Category\n                    </label>\n                    @if (EditMode) {\n                        <kendo-combobox [(ngModel)]=\"record.CategoryID\" \n                                       name=\"categoryId\"\n                                       [data]=\"categoryOptions\"\n                                       textField=\"text\"\n                                       valueField=\"value\"\n                                       [valuePrimitive]=\"true\"\n                                       [allowCustom]=\"true\"\n                                       (valueChange)=\"onCategoryChange($event)\"\n                                       placeholder=\"Select or enter new category...\">\n                        </kendo-combobox>\n                    } @else {\n                        <div class=\"form-control-plaintext\" style=\"padding: 8px 0;\">\n                            {{ record.Category || 'Uncategorized' }}\n                        </div>\n                    }\n                </div>\n\n                <!-- Template Status -->\n                <div style=\"display: flex; flex-direction: column; align-items: flex-end; justify-content: center;\">\n                    @if (record.IsActive) {\n                        <span class=\"badge badge-success\" style=\"background: #28a745; color: white; padding: 6px 12px; border-radius: 4px; font-size: 0.85em;\">\n                            <i class=\"fa-solid fa-check-circle\"></i> Active\n                        </span>\n                    } @else {\n                        <span class=\"badge badge-secondary\" style=\"background: #6c757d; color: white; padding: 6px 12px; border-radius: 4px; font-size: 0.85em;\">\n                            <i class=\"fa-solid fa-pause-circle\"></i> Inactive\n                        </span>\n                    }\n                </div>\n            </div>\n        </div>\n\n        <mj-tabstrip (TabSelected)=\"onTabSelect($event)\"  (ResizeContainer)=\"InvokeManualResize()\">\n            \n            <!-- Contents Tab - Main Focus -->\n            <mj-tab Name=\"Contents\">\n                <i class=\"fa-solid fa-file-lines\"></i> Contents \n                <span class=\"badge badge-info\" style=\"background: #17a2b8; color: white; padding: 2px 6px; border-radius: 3px; font-size: 0.7em; margin-left: 6px;\">\n                    {{ templateContents.length }}\n                </span>\n            </mj-tab>\n            <mj-tab-body>\n                <div class=\"template-contents-main content-margin\">\n                    <!-- Shared Template Editor -->\n                    <mj-template-editor \n                        [template]=\"record\"\n                        [config]=\"templateEditorConfig\"\n                        (contentChange)=\"onSharedTemplateContentChange($event)\"\n                        (runTemplate)=\"onSharedTemplateRun($event)\"\n                        style=\"height: 100%; display: block;\">\n                    </mj-template-editor>\n                </div>\n            </mj-tab-body>\n\n            <!-- Details Tab - Extra Fields -->\n            <mj-tab Name=\"Details\">\n                <i class=\"fa-solid fa-cogs\"></i> Details\n            </mj-tab>\n            <mj-tab-body>\n                <div style=\"padding: 20px;\">\n                    <div class=\"record-form\">\n                        <mj-form-field \n                            [record]=\"record\"\n                            [ShowLabel]=\"true\"\n                            FieldName=\"UserPrompt\"\n                            Type=\"textarea\"\n                            [EditMode]=\"EditMode\">\n                        </mj-form-field>\n                        <mj-form-field \n                            [record]=\"record\"\n                            [ShowLabel]=\"true\"\n                            FieldName=\"UserID\"\n                            Type=\"textbox\"\n                            [EditMode]=\"EditMode\"\n                            LinkType=\"Record\"\n                            LinkComponentType=\"Search\">\n                        </mj-form-field>\n                        <mj-form-field \n                            [record]=\"record\"\n                            [ShowLabel]=\"true\"\n                            FieldName=\"ActiveAt\"\n                            Type=\"datepicker\"\n                            [EditMode]=\"EditMode\">\n                        </mj-form-field>\n                        <mj-form-field \n                            [record]=\"record\"\n                            [ShowLabel]=\"true\"\n                            FieldName=\"DisabledAt\"\n                            Type=\"datepicker\"\n                            [EditMode]=\"EditMode\">\n                        </mj-form-field>\n                        <mj-form-field \n                            [record]=\"record\"\n                            [ShowLabel]=\"true\"\n                            FieldName=\"IsActive\"\n                            Type=\"checkbox\"\n                            [EditMode]=\"EditMode\">\n                        </mj-form-field>\n                        <mj-form-field \n                            [record]=\"record\"\n                            [ShowLabel]=\"true\"\n                            FieldName=\"__mj_CreatedAt\"\n                            Type=\"textbox\"\n                            [EditMode]=\"EditMode\">\n                        </mj-form-field>\n                        <mj-form-field \n                            [record]=\"record\"\n                            [ShowLabel]=\"true\"\n                            FieldName=\"__mj_UpdatedAt\"\n                            Type=\"textbox\"\n                            [EditMode]=\"EditMode\">\n                        </mj-form-field>\n                        <mj-form-field \n                            [record]=\"record\"\n                            [ShowLabel]=\"true\"\n                            FieldName=\"Category\"\n                            Type=\"textbox\"\n                            [EditMode]=\"EditMode\">\n                        </mj-form-field>\n                        <mj-form-field \n                            [record]=\"record\"\n                            [ShowLabel]=\"true\"\n                            FieldName=\"User\"\n                            Type=\"textbox\"\n                            [EditMode]=\"EditMode\">\n                        </mj-form-field>\n                    </div>\n                </div>\n            </mj-tab-body>\n\n            <!-- Template Params Tab -->\n            <mj-tab Name=\"Template Params\" [Visible]=\"record.IsSaved\"> \n                <i class=\"fa-solid fa-sliders\"></i> Parameters\n            </mj-tab>\n            <mj-tab-body>\n                <mj-template-params-grid \n                    [template]=\"record\"\n                    [editMode]=\"EditMode\">\n                </mj-template-params-grid>                    \n            </mj-tab-body>\n\n            <!-- AI Prompts Tab -->\n            <mj-tab Name=\"AI Prompts\" [Visible]=\"record.IsSaved\"> \n                <i class=\"fa-solid fa-robot\"></i> AI Prompts\n            </mj-tab>\n            <mj-tab-body>\n                <mj-user-view-grid \n                    [Params]=\"BuildRelationshipViewParamsByEntityName('AI Prompts','TemplateID')\"  \n                    [NewRecordValues]=\"NewRecordValues('AI Prompts')\"\n                    [AllowLoad]=\"IsCurrentTab('AI Prompts')\"  \n                    [EditMode]=\"GridEditMode()\"  \n                >\n                </mj-user-view-grid>                    \n            </mj-tab-body>\n\n            <!-- Entity Documents Tab -->\n            <mj-tab Name=\"Entity Documents\" [Visible]=\"record.IsSaved\"> \n                <i class=\"fa-solid fa-file-text\"></i> Documents\n            </mj-tab>\n            <mj-tab-body>\n                <mj-user-view-grid \n                    [Params]=\"BuildRelationshipViewParamsByEntityName('Entity Documents','TemplateID')\"  \n                    [NewRecordValues]=\"NewRecordValues('Entity Documents')\"\n                    [AllowLoad]=\"IsCurrentTab('Entity Documents')\"  \n                    [EditMode]=\"GridEditMode()\"  \n                >\n                </mj-user-view-grid>                    \n            </mj-tab-body>\n        </mj-tabstrip>\n        </form>\n\n        <!-- Template Parameter Dialog -->\n        <mj-template-param-dialog \n            [template]=\"record\"\n            [(isVisible)]=\"showParamDialog\"\n            (onClose)=\"onParamDialogClose()\">\n        </mj-template-param-dialog>\n    }\n</div>", styles: [".k-pane {\n  background-color: #F5F6FA;\n}\n\n.content-margin {\n  margin: 10px;\n} \n\n\na {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon {\n  margin-right: 5px;\n}\n\n.record-form {\n  display: block;\n  flex-direction: column;\n  background-color: #F5F6FA;\n  padding: 10px;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: #F5F6FA;\n}\n\nbutton {\n  margin-right: 5px;\n}\n\n.record-form h2 {\n  margin-bottom: 10px;\n}\n\n.k-splitter {\n  border-width: 0px;\n}\n\n.record-form-row {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n\n/* .record-form .record-form-row:nth-child(odd) {\n  background-color: #f2f2f2; \n} */\n\n/* \n.record-form .record-form-row:nth-child(even) {\n  background-color: #ffffff;  \n} */\n\n.record-form .record-form-row > :first-child {\n  font-weight: bold;\n  padding-right: 10px;\n} \n\n.record-form .record-form-row > span {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n \n\n@media (min-width: 768px) {\n  .record-form-row {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row label {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n"] }]
+        args: [{ selector: 'mj-templates-form', template: "<div class=\"record-form-container\">\n    @if (record) {\n        <form class=\"record-form\" #form=\"ngForm\" >\n        <mj-form-toolbar [form]=\"this\"></mj-form-toolbar>\n\n        <!-- Top Section - Key Fields -->\n        <div class=\"template-header\" style=\"background: #f8f9fa; border-bottom: 1px solid #dee2e6; padding: 8px 20px;\">\n            <div style=\"display: grid; grid-template-columns: 1fr 2fr 1fr auto; gap: 12px; align-items: start;\">\n                \n                <!-- Name -->\n                <div class=\"form-group\" style=\"margin: 0;\">\n                    <label class=\"form-label\" style=\"font-weight: 500; margin-bottom: 3px; color: #495057; font-size: 0.85em;\">\n                        <i class=\"fa-solid fa-file-text\"></i> Template Name\n                    </label>\n                    @if (EditMode) {\n                        <kendo-textbox [(ngModel)]=\"record.Name\" name=\"templateName\" placeholder=\"Enter template name...\"></kendo-textbox>\n                    } @else {\n                        <div class=\"form-control-plaintext\" style=\"font-size: 1em; font-weight: 500; padding: 6px 0;\">\n                            {{ record.Name || 'Unnamed Template' }}\n                        </div>\n                    }\n                </div>\n\n                <!-- Description -->\n                <div class=\"form-group\" style=\"margin: 0;\">\n                    <label class=\"form-label\" style=\"font-weight: 500; margin-bottom: 3px; color: #495057; font-size: 0.85em;\">\n                        <i class=\"fa-solid fa-align-left\"></i> Description\n                    </label>\n                    @if (EditMode) {\n                        <kendo-textarea [(ngModel)]=\"record.Description\" \n                                       name=\"description\"\n                                       [rows]=\"2\"\n                                       placeholder=\"Enter template description...\"></kendo-textarea>\n                    } @else {\n                        <div class=\"form-control-plaintext\" style=\"padding: 8px 0; color: #6c757d;\">\n                            {{ record.Description || 'No description provided' }}\n                        </div>\n                    }\n                </div>\n\n                <!-- Category -->\n                <div class=\"form-group\" style=\"margin: 0;\">\n                    <label class=\"form-label\" style=\"font-weight: 500; margin-bottom: 3px; color: #495057; font-size: 0.85em;\">\n                        <i class=\"fa-solid fa-folder\"></i> Category\n                    </label>\n                    @if (EditMode) {\n                        <kendo-combobox [(ngModel)]=\"record.CategoryID\" \n                                       name=\"categoryId\"\n                                       [data]=\"categoryOptions\"\n                                       textField=\"text\"\n                                       valueField=\"value\"\n                                       [valuePrimitive]=\"true\"\n                                       [allowCustom]=\"true\"\n                                       (valueChange)=\"onCategoryChange($event)\"\n                                       placeholder=\"Select or enter new category...\">\n                        </kendo-combobox>\n                    } @else {\n                        <div class=\"form-control-plaintext\" style=\"padding: 8px 0;\">\n                            {{ record.Category || 'Uncategorized' }}\n                        </div>\n                    }\n                </div>\n\n                <!-- Template Status -->\n                <div style=\"display: flex; flex-direction: column; align-items: flex-end; justify-content: center;\">\n                    @if (record.IsActive) {\n                        <span class=\"badge badge-success\" style=\"background: #28a745; color: white; padding: 6px 12px; border-radius: 4px; font-size: 0.85em;\">\n                            <i class=\"fa-solid fa-check-circle\"></i> Active\n                        </span>\n                    } @else {\n                        <span class=\"badge badge-secondary\" style=\"background: #6c757d; color: white; padding: 6px 12px; border-radius: 4px; font-size: 0.85em;\">\n                            <i class=\"fa-solid fa-pause-circle\"></i> Inactive\n                        </span>\n                    }\n                </div>\n            </div>\n        </div>\n\n        <mj-tabstrip (TabSelected)=\"onTabSelect($event)\"  (ResizeContainer)=\"InvokeManualResize()\">\n            \n            <!-- Contents Tab - Main Focus -->\n            <mj-tab Name=\"Contents\">\n                <i class=\"fa-solid fa-file-lines\"></i> Contents \n                <span class=\"badge badge-info\" style=\"background: #17a2b8; color: white; padding: 2px 6px; border-radius: 3px; font-size: 0.7em; margin-left: 6px;\">\n                    {{ templateContents.length }}\n                </span>\n            </mj-tab>\n            <mj-tab-body>\n                <div class=\"template-contents-main content-margin\">\n                    <!-- Shared Template Editor -->\n                    <mj-template-editor \n                        [template]=\"record\"\n                        [config]=\"templateEditorConfig\"\n                        (contentChange)=\"onSharedTemplateContentChange($event)\"\n                        (runTemplate)=\"onSharedTemplateRun($event)\"\n                        style=\"height: 100%; display: block;\">\n                    </mj-template-editor>\n                </div>\n            </mj-tab-body>\n\n            <!-- Details Tab - Extra Fields -->\n            <mj-tab Name=\"Details\">\n                <i class=\"fa-solid fa-cogs\"></i> Details\n            </mj-tab>\n            <mj-tab-body>\n                <div style=\"padding: 20px;\">\n                    <div class=\"record-form\">\n                        <mj-form-field \n                            [record]=\"record\"\n                            [ShowLabel]=\"true\"\n                            FieldName=\"UserPrompt\"\n                            Type=\"textarea\"\n                            [EditMode]=\"EditMode\">\n                        </mj-form-field>\n                        <mj-form-field \n                            [record]=\"record\"\n                            [ShowLabel]=\"true\"\n                            FieldName=\"UserID\"\n                            Type=\"textbox\"\n                            [EditMode]=\"EditMode\"\n                            LinkType=\"Record\"\n                            LinkComponentType=\"Search\">\n                        </mj-form-field>\n                        <mj-form-field \n                            [record]=\"record\"\n                            [ShowLabel]=\"true\"\n                            FieldName=\"ActiveAt\"\n                            Type=\"datepicker\"\n                            [EditMode]=\"EditMode\">\n                        </mj-form-field>\n                        <mj-form-field \n                            [record]=\"record\"\n                            [ShowLabel]=\"true\"\n                            FieldName=\"DisabledAt\"\n                            Type=\"datepicker\"\n                            [EditMode]=\"EditMode\">\n                        </mj-form-field>\n                        <mj-form-field \n                            [record]=\"record\"\n                            [ShowLabel]=\"true\"\n                            FieldName=\"IsActive\"\n                            Type=\"checkbox\"\n                            [EditMode]=\"EditMode\">\n                        </mj-form-field>\n                        <mj-form-field \n                            [record]=\"record\"\n                            [ShowLabel]=\"true\"\n                            FieldName=\"__mj_CreatedAt\"\n                            Type=\"textbox\"\n                            [EditMode]=\"EditMode\">\n                        </mj-form-field>\n                        <mj-form-field \n                            [record]=\"record\"\n                            [ShowLabel]=\"true\"\n                            FieldName=\"__mj_UpdatedAt\"\n                            Type=\"textbox\"\n                            [EditMode]=\"EditMode\">\n                        </mj-form-field>\n                        <mj-form-field \n                            [record]=\"record\"\n                            [ShowLabel]=\"true\"\n                            FieldName=\"Category\"\n                            Type=\"textbox\"\n                            [EditMode]=\"EditMode\">\n                        </mj-form-field>\n                        <mj-form-field \n                            [record]=\"record\"\n                            [ShowLabel]=\"true\"\n                            FieldName=\"User\"\n                            Type=\"textbox\"\n                            [EditMode]=\"EditMode\">\n                        </mj-form-field>\n                    </div>\n                </div>\n            </mj-tab-body>\n\n            <!-- Template Params Tab -->\n            <mj-tab Name=\"Template Params\" [Visible]=\"record.IsSaved\"> \n                <i class=\"fa-solid fa-sliders\"></i> Parameters\n            </mj-tab>\n            <mj-tab-body>\n                <mj-template-params-grid \n                    [template]=\"record\"\n                    [editMode]=\"EditMode\">\n                </mj-template-params-grid>                    \n            </mj-tab-body>\n\n            <!-- AI Prompts Tab -->\n            <mj-tab Name=\"AI Prompts\" [Visible]=\"record.IsSaved\"> \n                <i class=\"fa-solid fa-robot\"></i> AI Prompts\n            </mj-tab>\n            <mj-tab-body>\n                <mj-user-view-grid \n                    [Params]=\"BuildRelationshipViewParamsByEntityName('AI Prompts','TemplateID')\"  \n                    [NewRecordValues]=\"NewRecordValues('AI Prompts')\"\n                    [AllowLoad]=\"IsCurrentTab('AI Prompts')\"  \n                    [EditMode]=\"GridEditMode()\"  \n                >\n                </mj-user-view-grid>                    \n            </mj-tab-body>\n\n            <!-- Entity Documents Tab -->\n            <mj-tab Name=\"Entity Documents\" [Visible]=\"record.IsSaved\"> \n                <i class=\"fa-solid fa-file-text\"></i> Documents\n            </mj-tab>\n            <mj-tab-body>\n                <mj-user-view-grid \n                    [Params]=\"BuildRelationshipViewParamsByEntityName('Entity Documents','TemplateID')\"  \n                    [NewRecordValues]=\"NewRecordValues('Entity Documents')\"\n                    [AllowLoad]=\"IsCurrentTab('Entity Documents')\"  \n                    [EditMode]=\"GridEditMode()\"  \n                >\n                </mj-user-view-grid>                    \n            </mj-tab-body>\n        </mj-tabstrip>\n        </form>\n\n        <!-- Template Parameter Dialog -->\n        <mj-template-param-dialog \n            [template]=\"record\"\n            [(isVisible)]=\"showParamDialog\"\n            (onClose)=\"onParamDialogClose()\">\n        </mj-template-param-dialog>\n    }\n</div>", styles: [".k-pane {\n  background-color: #F5F6FA;\n}\n\n.content-margin {\n  margin: 10px;\n} \n\n\na {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon {\n  margin-right: 5px;\n}\n\n.record-form {\n  display: block;\n  flex-direction: column;\n  background-color: #F5F6FA;\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: #F5F6FA;\n}\n\nbutton {\n  margin-right: 5px;\n}\n\n.record-form h2 {\n  margin-bottom: 10px;\n}\n\n.k-splitter {\n  border-width: 0px;\n}\n\n.record-form-row {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n\n/* .record-form .record-form-row:nth-child(odd) {\n  background-color: #f2f2f2; \n} */\n\n/* \n.record-form .record-form-row:nth-child(even) {\n  background-color: #ffffff;  \n} */\n\n.record-form .record-form-row > :first-child {\n  font-weight: bold;\n  padding-right: 10px;\n} \n\n.record-form .record-form-row > span {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n \n\n@media (min-width: 768px) {\n  .record-form-row {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row label {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n/* Collapsible Panel Styles */\n.form-panels-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: #F5F6FA;\n}\n\n/* All field sections take full width */\n.form-panels-container > .form-card {\n  width: 100%;\n}\n\n/* Related entity grid container - responsive layout */\n.form-panels-container .related-entity-grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n/* Responsive multi-column layout for related entities on wider screens */\n@media (min-width: 1400px) {\n  .form-panels-container .related-entity-grid {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n.collapsible-card {\n  overflow: hidden;\n}\n\n.collapsible-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n  border-bottom-color: #667eea;\n}\n\n.collapsible-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title i {\n  font-size: 20px;\n  color: #667eea;\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.collapsible-header .collapse-icon {\n  color: #6b7280;\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body {\n  padding: 24px;\n}\n\n/* Related Entity Sections - Visual Distinction */\n.form-card.related-entity {\n  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n  border-left: 3px solid #3b82f6;\n}\n\n.form-card.related-entity .collapsible-header {\n  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n  border-bottom-color: #3b82f6;\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: #3b82f6;\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.form-section-controls .control-group {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls button {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid #d1d5db;\n  background: white;\n  color: #374151;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls button:hover {\n  background: #667eea;\n  color: white;\n  border-color: #667eea;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);\n}\n\n.form-section-controls button:active {\n  transform: translateY(0);\n}\n\n.form-section-controls button i {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls .section-search {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid #d1d5db;\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: white;\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: #667eea;\n  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: #9ca3af;\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: #6b7280;\n  margin-left: auto;\n  font-weight: 500;\n}\n\n/* Hidden sections for search filter */\n.form-card.search-hidden {\n  display: none;\n}\n\n/* Section count badge */\n.section-count-badge {\n  background: #667eea;\n  color: white;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n/* Search highlighting in section names */\n.collapsible-title h3 .search-highlight {\n  background-color: #fef08a;\n  color: #854d0e;\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n/* Row count badge in section headers */\n.collapsible-title .row-count-badge {\n  background: #10b981;\n  color: white;\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n/* Gray badge for zero rows (loaded but empty) */\n.collapsible-title .row-count-badge.zero-rows {\n  background: #9ca3af;\n}\n"] }]
     }], null, { codeEditor: [{
             type: ViewChild,
             args: ['codeEditor']