npm - @memberjunction/ng-core-entity-forms - Versions diffs - 5.39.0 → 5.40.0 - Mend

@memberjunction/ng-core-entity-forms 5.39.0 → 5.40.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (122) hide show

package/dist/lib/custom/Entities/entity-form.component.js CHANGED Viewed

@@ -1581,11 +1581,11 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_55_Template(rf,
 function MJEntityFormComponentExtended_Conditional_0_Conditional_56_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r42 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "mj-entity-viewer", 270);
-    i0.ɵɵlistener("recordOpened", function MJEntityFormComponentExtended_Conditional_0_Conditional_56_Conditional_2_Template_mj_entity_viewer_recordOpened_0_listener($event) { i0.ɵɵrestoreView(_r42); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnRecordOpened($event)); })("addRequested", function MJEntityFormComponentExtended_Conditional_0_Conditional_56_Conditional_2_Template_mj_entity_viewer_addRequested_0_listener() { i0.ɵɵrestoreView(_r42); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnAddRequested()); });
+    i0.ɵɵlistener("RecordOpened", function MJEntityFormComponentExtended_Conditional_0_Conditional_56_Conditional_2_Template_mj_entity_viewer_RecordOpened_0_listener($event) { i0.ɵɵrestoreView(_r42); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnRecordOpened($event)); })("CreateRecordRequested", function MJEntityFormComponentExtended_Conditional_0_Conditional_56_Conditional_2_Template_mj_entity_viewer_CreateRecordRequested_0_listener() { i0.ɵɵrestoreView(_r42); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnAddRequested()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("entity", ctx_r2.entity)("showGridToolbar", true);
+    i0.ɵɵproperty("Entity", ctx_r2.entity)("Provider", ctx_r2.Provider);
 } }
 function MJEntityFormComponentExtended_Conditional_0_Conditional_56_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "section", 33)(1, "div", 268);
@@ -3598,7 +3598,7 @@ let MJEntityFormComponentExtended = class MJEntityFormComponentExtended extends
         }
     }
     static { this.ɵfac = /*@__PURE__*/ (() => { let ɵMJEntityFormComponentExtended_BaseFactory; return function MJEntityFormComponentExtended_Factory(__ngFactoryType__) { return (ɵMJEntityFormComponentExtended_BaseFactory || (ɵMJEntityFormComponentExtended_BaseFactory = i0.ɵɵgetInheritedFactory(MJEntityFormComponentExtended)))(__ngFactoryType__ || MJEntityFormComponentExtended); }; })(); }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJEntityFormComponentExtended, selectors: [["mj-entity-form"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 1, consts: [[1, "entity-explorer"], [1, "explorer-header"], [1, "entity-identity"], [1, "entity-icon"], [1, "entity-info"], [1, "entity-title-row"], [1, "entity-name"], [1, "status-badge", 3, "ngClass"], [1, "status-badge", "isa-badge", "virtual"], ["title", "Click to navigate to parent entity", 1, "status-badge", "isa-badge", "child-type"], [1, "isa-breadcrumb"], [1, "entity-subtitle"], [1, "schema-table"], [1, "separator"], [1, "entity-description", 3, "title"], [1, "header-stats"], [1, "stat-item", 3, "click"], [1, "fa-solid", "fa-table-columns"], [1, "stat-value"], [1, "stat-label"], [1, "fa-solid", "fa-link"], [1, "fa-solid", "fa-shield-halved"], [1, "fa-solid", "fa-database"], [1, "stat-value", "loading"], [1, "explorer-body"], [1, "nav-rail"], [1, "nav-item", 3, "active", "title"], [1, "main-canvas"], [1, "section", "overview-section"], [1, "section", "fields-section"], [1, "section", "relationships-section"], [1, "section", "organic-keys-section"], [1, "section", "permissions-section"], [1, "section", "data-section"], [1, "section", "lineage-section"], [1, "section", "history-section"], [1, "section", "settings-section"], [1, "detail-panel"], [1, "panel-header"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "panel-content"], [1, "fa-solid", "fa-eye"], ["title", "Click to navigate to parent entity", 1, "status-badge", "isa-badge", "child-type", 3, "click"], [1, "fa-solid", "fa-arrow-up"], [1, "status-badge", "isa-badge", "parent-type"], [1, "fa-solid", "fa-sitemap"], ["title", "Multiple child types can coexist for a single parent record", 1, "status-badge", "isa-badge", "overlapping"], [1, "fa-solid", "fa-clone"], [1, "fa-solid", "fa-layer-group"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "nav-item", 3, "click", "title"], [1, "nav-label"], [1, "nav-badge"], [1, "section-content"], [1, "stats-cards"], ["title", "View all fields", 1, "stat-card", "clickable", 3, "click"], [1, "stat-card-header"], [1, "fa-solid", "fa-table-cells"], [1, "stat-card-body"], [1, "stat-main"], [1, "stat-details"], [1, "stat-card-action"], [1, "fa-solid", "fa-arrow-right"], ["title", "View relationships", 1, "stat-card", "clickable", 3, "click"], [1, "fa-solid", "fa-diagram-project"], ["title", "View security settings", 1, "stat-card", "clickable", 3, "click"], [1, "fa-solid", "fa-lock"], [1, "stat-card"], [1, "info-panel", "capabilities-panel"], [1, "panel-title"], [1, "fa-solid", "fa-bolt"], [1, "capability-tags"], [1, "capability-tag"], [1, "capability-tag", "disabled"], [1, "info-panel", "isa-panel"], [1, "info-panel", "database-panel"], [1, "fa-solid", "fa-server"], [1, "info-grid"], [1, "info-item"], [1, "info-label"], [1, "info-value"], [1, "info-panel", "codegen-panel"], [1, "fa-solid", "fa-code"], [1, "info-value", "code"], [1, "fa-solid", "fa-check"], [1, "isa-info-row", "virtual-info"], [1, "isa-children"], [1, "code"], [1, "isa-chain"], [1, "isa-chain-label"], [1, "isa-chain-nodes"], [1, "isa-node", "current"], [1, "isa-inherited-fields"], [1, "isa-field-inspector"], [1, "isa-siblings"], [1, "fa-solid", "fa-arrow-right", "isa-arrow"], [1, "isa-node", "parent", "clickable", 3, "click", "title"], [1, "isa-chain-label", "clickable", 3, "click"], [1, "fa-solid", 3, "ngClass"], [1, "isa-inspector-groups"], [1, "isa-inspector-group", 3, "own", "inherited"], [1, "isa-inspector-group"], [1, "isa-inspector-header"], [1, "isa-inspector-entity"], [1, "fa-solid", "fa-circle", 2, "color", "var(--mj-brand-primary)", "font-size", "8px"], [1, "fa-solid", "fa-arrow-up", 2, "color", "var(--mj-brand-primary)", "font-size", "10px"], [1, "isa-inspector-count"], [1, "isa-inspector-fields"], [1, "isa-inspector-field", 3, "title"], [1, "isa-inspector-type"], [1, "isa-child-list"], [1, "isa-sibling-chip", "clickable", 3, "title"], [1, "isa-sibling-chip", "clickable", 3, "click", "title"], [1, "fa-solid", "fa-arrows-left-right"], [1, "isa-child-chip", "clickable", 3, "title"], [1, "isa-child-chip", "clickable", 3, "click", "title"], [1, "fa-solid", "fa-arrow-down"], [1, "isa-child-count"], [1, "section-header"], [1, "search-box"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search fields...", 3, "ngModelChange", "ngModel"], [1, "header-controls"], [1, "view-mode-toggle"], ["title", "Group by category", 1, "toggle-btn", 3, "click"], ["title", "List view", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-list"], [1, "expand-collapse-controls"], [1, "section-content", "fields-content"], [1, "field-groups"], [1, "fields-list-view"], ["title", "Expand all", 1, "control-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-angles-down"], ["title", "Collapse all", 1, "control-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-angles-up"], [1, "field-group", 3, "expanded"], [1, "field-group"], [1, "group-header", 3, "click"], [1, "expand-icon", "fa-solid", 3, "ngClass"], [1, "group-icon"], [1, "group-label"], [1, "group-count"], [1, "group-content"], [1, "field-item", 3, "selected"], [1, "field-item", 3, "click"], [1, "field-icon"], [1, "field-info"], [1, "field-name"], [1, "field-db-name"], [1, "field-meta"], [1, "field-type"], [1, "field-nullable"], [1, "field-related"], [1, "field-badges"], ["title", "Primary Key", 1, "badge", "pk"], ["title", "Foreign Key", 1, "badge", "fk"], ["title", "Encrypted", 1, "badge", "encrypted"], [1, "badge", "inherited", 3, "title"], [1, "field-related", 3, "click"], [1, "list-header"], [1, "list-col", "col-seq", "sortable", 3, "click"], [1, "sort-icon", "fa-solid", 3, "ngClass"], [1, "list-col", "col-name", "sortable", 3, "click"], [1, "list-col", "col-display-name", "sortable", 3, "click"], [1, "list-col", "col-type", "sortable", 3, "click"], [1, "list-col", "col-length", "sortable", 3, "click"], [1, "list-col", "col-nullable", "sortable", 3, "click"], [1, "list-col", "col-flags"], [1, "list-col", "col-desc", "sortable", 3, "click"], [1, "list-body"], [1, "list-row", 3, "selected"], [1, "list-empty"], [1, "list-row", 3, "click"], [1, "list-col", "col-seq"], [1, "seq-num"], [1, "list-col", "col-name"], [1, "field-type-icon"], [1, "field-name-text"], [1, "list-col", "col-display-name"], [1, "display-name-text"], [1, "list-col", "col-type"], [1, "type-tag"], [1, "list-col", "col-length"], [1, "length-value"], [1, "length-value", "muted"], [1, "list-col", "col-nullable"], [1, "required-indicator"], [1, "flag-badges"], ["title", "Primary Key", 1, "flag-badge", "pk"], ["title", "Foreign Key", 1, "flag-badge", "fk"], ["title", "Encrypted", 1, "flag-badge", "encrypted"], [1, "flag-badge", "inherited", 3, "title"], [1, "list-col", "col-desc"], [1, "desc-text", 3, "title"], [1, "fa-solid", "fa-key"], [1, "view-toggle"], [1, "toggle-btn", 3, "click"], [1, "depth-selector"], [1, "relationships-graph"], [1, "relationships-list"], [1, "depth-label"], [1, "depth-buttons"], [1, "depth-btn", 3, "active", "title"], [1, "depth-btn", 3, "click", "title"], [3, "stateChange", "openRecord", "focusEntities", "showFilterPanel", "showHeader", "depth"], [1, "relationship-group"], [1, "relationship-group-title"], [1, "fa-solid", "fa-arrow-right-from-bracket"], [1, "relationship-items", "grouped"], [1, "relationship-item-grouped"], [1, "empty-state"], [1, "fa-solid", "fa-arrow-right-to-bracket"], [1, "rel-header"], [1, "rel-icon", "outgoing"], [1, "rel-entity-name"], [1, "rel-fields-chips"], [1, "field-chip", "outgoing", 3, "title"], [1, "field-chip", "outgoing", 3, "click", "title"], [1, "rel-icon", "incoming"], [1, "fa-solid", "fa-arrow-left"], [1, "field-chip", "incoming", 3, "title"], ["title", "Bundled in API", 1, "fa-solid", "fa-box", "bundle-icon"], [1, "empty-state-card"], [1, "fa-solid", "fa-fingerprint", "empty-state-icon"], [1, "organic-key-cards"], [1, "organic-key-card"], [1, "organic-key-card-header"], [1, "organic-key-name"], [1, "fa-solid", "fa-fingerprint", "organic-key-icon"], [1, "organic-key-badges"], [1, "organic-key-badge", "strategy"], [1, "organic-key-badge", "fields"], [1, "organic-key-description"], [1, "organic-key-targets"], [1, "organic-key-target", "clickable"], [1, "organic-key-target", "clickable", 3, "click"], [1, "target-main"], [1, "target-header"], [1, "target-entity-icon"], [1, "target-entity-name"], [1, "fa-solid", "fa-external-link-alt", "target-nav-icon"], [1, "target-match-detail"], [1, "match-type-badge", "direct"], [1, "match-fields"], [1, "match-type-badge", "transitive"], [1, "match-fields", 3, "title"], [1, "organic-key-card", "incoming", "clickable"], [1, "organic-key-card", "incoming", "clickable", 3, "click"], [1, "match-type-badge"], [1, "organic-key-detail-row"], [1, "detail-label"], [1, "detail-value"], [1, "permissions-matrix"], [1, "matrix-table"], [1, "center"], [1, "api-capabilities"], [1, "fa-solid", "fa-plug"], [1, "capability-grid"], [1, "capability-item"], [1, "role-name"], [1, "permission-icon", 3, "ngClass"], [1, "rls-info"], ["title", "Read RLS", 1, "rls-badge"], ["title", "Create RLS", 1, "rls-badge"], ["title", "Update RLS", 1, "rls-badge"], ["title", "Delete RLS", 1, "rls-badge"], [1, "no-rls"], [1, "data-viewer-container"], [3, "entity", "showGridToolbar"], [3, "recordOpened", "addRequested", "entity", "showGridToolbar"], [1, "lineage-diagram"], [1, "lineage-stage", "sources"], [1, "lineage-items"], [1, "lineage-item"], [1, "fa-solid", "fa-keyboard"], [1, "lineage-arrow"], [1, "lineage-stage", "entity-node"], [1, "entity-box"], [1, "lineage-stage", "sinks"], [1, "tracking-config"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "config-grid"], [1, "config-item"], [1, "config-label"], [1, "config-value"], [1, "fa-solid", "fa-map-location-dot"], [1, "helper-text"], [1, "history-config"], [1, "config-status"], [1, "config-text"], [1, "history-info"], [1, "info-card"], [1, "fa-solid", "fa-info-circle"], [1, "audit-fields-list"], [1, "settings-panel", "isa-settings-panel"], [1, "settings-panel"], [1, "fa-solid", "fa-sliders"], [1, "settings-list"], [1, "fa-solid", "fa-magnifying-glass"], [1, "fts-config"], [1, "fa-solid", "fa-box"], [1, "config-row"], ["title", "Navigate to parent entity", 1, "link"], [1, "muted"], [1, "fa-solid", "fa-circle-check", 2, "color", "var(--mj-brand-primary)"], [1, "fa-solid", "fa-circle-minus", 2, "color", "var(--mj-text-muted)"], ["title", "Navigate to parent entity", 1, "link", 3, "click"], [1, "link", 3, "click"], [1, "fa-solid", "fa-circle-check", 2, "color", "#059669"], [1, "setting-item"], [1, "setting-name"], [1, "setting-value-json"], [1, "setting-value"], [1, "setting-comment"], ["language", "json", "setup", "minimal", 3, "value", "readonly", "lineWrapping"], [1, "config-value", "enabled"], [1, "fa-solid", "fa-circle-check"], [1, "config-value", "code"], [1, "detail-section"], [1, "detail-field-db-name"], [1, "field-description"], [1, "detail-grid"], [1, "detail-item"], [1, "label"], [1, "value", "code"], [1, "value"], [1, "detail-section", "isa-source-section"], ["title", "Navigate to source entity", 1, "value", "link", 3, "click"], [1, "value", "link", 3, "click"], [1, "value-list"], [1, "value-item"], [1, "value-code"], [1, "value-display"], [1, "explorer-loading"], [1, "explorer-error"], [1, "explorer-empty"], ["text", "Loading entity..."], [1, "fa-solid", "fa-exclamation-triangle"]], template: function MJEntityFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJEntityFormComponentExtended, selectors: [["mj-entity-form"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 1, consts: [[1, "entity-explorer"], [1, "explorer-header"], [1, "entity-identity"], [1, "entity-icon"], [1, "entity-info"], [1, "entity-title-row"], [1, "entity-name"], [1, "status-badge", 3, "ngClass"], [1, "status-badge", "isa-badge", "virtual"], ["title", "Click to navigate to parent entity", 1, "status-badge", "isa-badge", "child-type"], [1, "isa-breadcrumb"], [1, "entity-subtitle"], [1, "schema-table"], [1, "separator"], [1, "entity-description", 3, "title"], [1, "header-stats"], [1, "stat-item", 3, "click"], [1, "fa-solid", "fa-table-columns"], [1, "stat-value"], [1, "stat-label"], [1, "fa-solid", "fa-link"], [1, "fa-solid", "fa-shield-halved"], [1, "fa-solid", "fa-database"], [1, "stat-value", "loading"], [1, "explorer-body"], [1, "nav-rail"], [1, "nav-item", 3, "active", "title"], [1, "main-canvas"], [1, "section", "overview-section"], [1, "section", "fields-section"], [1, "section", "relationships-section"], [1, "section", "organic-keys-section"], [1, "section", "permissions-section"], [1, "section", "data-section"], [1, "section", "lineage-section"], [1, "section", "history-section"], [1, "section", "settings-section"], [1, "detail-panel"], [1, "panel-header"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "panel-content"], [1, "fa-solid", "fa-eye"], ["title", "Click to navigate to parent entity", 1, "status-badge", "isa-badge", "child-type", 3, "click"], [1, "fa-solid", "fa-arrow-up"], [1, "status-badge", "isa-badge", "parent-type"], [1, "fa-solid", "fa-sitemap"], ["title", "Multiple child types can coexist for a single parent record", 1, "status-badge", "isa-badge", "overlapping"], [1, "fa-solid", "fa-clone"], [1, "fa-solid", "fa-layer-group"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "nav-item", 3, "click", "title"], [1, "nav-label"], [1, "nav-badge"], [1, "section-content"], [1, "stats-cards"], ["title", "View all fields", 1, "stat-card", "clickable", 3, "click"], [1, "stat-card-header"], [1, "fa-solid", "fa-table-cells"], [1, "stat-card-body"], [1, "stat-main"], [1, "stat-details"], [1, "stat-card-action"], [1, "fa-solid", "fa-arrow-right"], ["title", "View relationships", 1, "stat-card", "clickable", 3, "click"], [1, "fa-solid", "fa-diagram-project"], ["title", "View security settings", 1, "stat-card", "clickable", 3, "click"], [1, "fa-solid", "fa-lock"], [1, "stat-card"], [1, "info-panel", "capabilities-panel"], [1, "panel-title"], [1, "fa-solid", "fa-bolt"], [1, "capability-tags"], [1, "capability-tag"], [1, "capability-tag", "disabled"], [1, "info-panel", "isa-panel"], [1, "info-panel", "database-panel"], [1, "fa-solid", "fa-server"], [1, "info-grid"], [1, "info-item"], [1, "info-label"], [1, "info-value"], [1, "info-panel", "codegen-panel"], [1, "fa-solid", "fa-code"], [1, "info-value", "code"], [1, "fa-solid", "fa-check"], [1, "isa-info-row", "virtual-info"], [1, "isa-children"], [1, "code"], [1, "isa-chain"], [1, "isa-chain-label"], [1, "isa-chain-nodes"], [1, "isa-node", "current"], [1, "isa-inherited-fields"], [1, "isa-field-inspector"], [1, "isa-siblings"], [1, "fa-solid", "fa-arrow-right", "isa-arrow"], [1, "isa-node", "parent", "clickable", 3, "click", "title"], [1, "isa-chain-label", "clickable", 3, "click"], [1, "fa-solid", 3, "ngClass"], [1, "isa-inspector-groups"], [1, "isa-inspector-group", 3, "own", "inherited"], [1, "isa-inspector-group"], [1, "isa-inspector-header"], [1, "isa-inspector-entity"], [1, "fa-solid", "fa-circle", 2, "color", "var(--mj-brand-primary)", "font-size", "8px"], [1, "fa-solid", "fa-arrow-up", 2, "color", "var(--mj-brand-primary)", "font-size", "10px"], [1, "isa-inspector-count"], [1, "isa-inspector-fields"], [1, "isa-inspector-field", 3, "title"], [1, "isa-inspector-type"], [1, "isa-child-list"], [1, "isa-sibling-chip", "clickable", 3, "title"], [1, "isa-sibling-chip", "clickable", 3, "click", "title"], [1, "fa-solid", "fa-arrows-left-right"], [1, "isa-child-chip", "clickable", 3, "title"], [1, "isa-child-chip", "clickable", 3, "click", "title"], [1, "fa-solid", "fa-arrow-down"], [1, "isa-child-count"], [1, "section-header"], [1, "search-box"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search fields...", 3, "ngModelChange", "ngModel"], [1, "header-controls"], [1, "view-mode-toggle"], ["title", "Group by category", 1, "toggle-btn", 3, "click"], ["title", "List view", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-list"], [1, "expand-collapse-controls"], [1, "section-content", "fields-content"], [1, "field-groups"], [1, "fields-list-view"], ["title", "Expand all", 1, "control-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-angles-down"], ["title", "Collapse all", 1, "control-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-angles-up"], [1, "field-group", 3, "expanded"], [1, "field-group"], [1, "group-header", 3, "click"], [1, "expand-icon", "fa-solid", 3, "ngClass"], [1, "group-icon"], [1, "group-label"], [1, "group-count"], [1, "group-content"], [1, "field-item", 3, "selected"], [1, "field-item", 3, "click"], [1, "field-icon"], [1, "field-info"], [1, "field-name"], [1, "field-db-name"], [1, "field-meta"], [1, "field-type"], [1, "field-nullable"], [1, "field-related"], [1, "field-badges"], ["title", "Primary Key", 1, "badge", "pk"], ["title", "Foreign Key", 1, "badge", "fk"], ["title", "Encrypted", 1, "badge", "encrypted"], [1, "badge", "inherited", 3, "title"], [1, "field-related", 3, "click"], [1, "list-header"], [1, "list-col", "col-seq", "sortable", 3, "click"], [1, "sort-icon", "fa-solid", 3, "ngClass"], [1, "list-col", "col-name", "sortable", 3, "click"], [1, "list-col", "col-display-name", "sortable", 3, "click"], [1, "list-col", "col-type", "sortable", 3, "click"], [1, "list-col", "col-length", "sortable", 3, "click"], [1, "list-col", "col-nullable", "sortable", 3, "click"], [1, "list-col", "col-flags"], [1, "list-col", "col-desc", "sortable", 3, "click"], [1, "list-body"], [1, "list-row", 3, "selected"], [1, "list-empty"], [1, "list-row", 3, "click"], [1, "list-col", "col-seq"], [1, "seq-num"], [1, "list-col", "col-name"], [1, "field-type-icon"], [1, "field-name-text"], [1, "list-col", "col-display-name"], [1, "display-name-text"], [1, "list-col", "col-type"], [1, "type-tag"], [1, "list-col", "col-length"], [1, "length-value"], [1, "length-value", "muted"], [1, "list-col", "col-nullable"], [1, "required-indicator"], [1, "flag-badges"], ["title", "Primary Key", 1, "flag-badge", "pk"], ["title", "Foreign Key", 1, "flag-badge", "fk"], ["title", "Encrypted", 1, "flag-badge", "encrypted"], [1, "flag-badge", "inherited", 3, "title"], [1, "list-col", "col-desc"], [1, "desc-text", 3, "title"], [1, "fa-solid", "fa-key"], [1, "view-toggle"], [1, "toggle-btn", 3, "click"], [1, "depth-selector"], [1, "relationships-graph"], [1, "relationships-list"], [1, "depth-label"], [1, "depth-buttons"], [1, "depth-btn", 3, "active", "title"], [1, "depth-btn", 3, "click", "title"], [3, "stateChange", "openRecord", "focusEntities", "showFilterPanel", "showHeader", "depth"], [1, "relationship-group"], [1, "relationship-group-title"], [1, "fa-solid", "fa-arrow-right-from-bracket"], [1, "relationship-items", "grouped"], [1, "relationship-item-grouped"], [1, "empty-state"], [1, "fa-solid", "fa-arrow-right-to-bracket"], [1, "rel-header"], [1, "rel-icon", "outgoing"], [1, "rel-entity-name"], [1, "rel-fields-chips"], [1, "field-chip", "outgoing", 3, "title"], [1, "field-chip", "outgoing", 3, "click", "title"], [1, "rel-icon", "incoming"], [1, "fa-solid", "fa-arrow-left"], [1, "field-chip", "incoming", 3, "title"], ["title", "Bundled in API", 1, "fa-solid", "fa-box", "bundle-icon"], [1, "empty-state-card"], [1, "fa-solid", "fa-fingerprint", "empty-state-icon"], [1, "organic-key-cards"], [1, "organic-key-card"], [1, "organic-key-card-header"], [1, "organic-key-name"], [1, "fa-solid", "fa-fingerprint", "organic-key-icon"], [1, "organic-key-badges"], [1, "organic-key-badge", "strategy"], [1, "organic-key-badge", "fields"], [1, "organic-key-description"], [1, "organic-key-targets"], [1, "organic-key-target", "clickable"], [1, "organic-key-target", "clickable", 3, "click"], [1, "target-main"], [1, "target-header"], [1, "target-entity-icon"], [1, "target-entity-name"], [1, "fa-solid", "fa-external-link-alt", "target-nav-icon"], [1, "target-match-detail"], [1, "match-type-badge", "direct"], [1, "match-fields"], [1, "match-type-badge", "transitive"], [1, "match-fields", 3, "title"], [1, "organic-key-card", "incoming", "clickable"], [1, "organic-key-card", "incoming", "clickable", 3, "click"], [1, "match-type-badge"], [1, "organic-key-detail-row"], [1, "detail-label"], [1, "detail-value"], [1, "permissions-matrix"], [1, "matrix-table"], [1, "center"], [1, "api-capabilities"], [1, "fa-solid", "fa-plug"], [1, "capability-grid"], [1, "capability-item"], [1, "role-name"], [1, "permission-icon", 3, "ngClass"], [1, "rls-info"], ["title", "Read RLS", 1, "rls-badge"], ["title", "Create RLS", 1, "rls-badge"], ["title", "Update RLS", 1, "rls-badge"], ["title", "Delete RLS", 1, "rls-badge"], [1, "no-rls"], [1, "data-viewer-container"], [3, "Entity", "Provider"], [3, "RecordOpened", "CreateRecordRequested", "Entity", "Provider"], [1, "lineage-diagram"], [1, "lineage-stage", "sources"], [1, "lineage-items"], [1, "lineage-item"], [1, "fa-solid", "fa-keyboard"], [1, "lineage-arrow"], [1, "lineage-stage", "entity-node"], [1, "entity-box"], [1, "lineage-stage", "sinks"], [1, "tracking-config"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "config-grid"], [1, "config-item"], [1, "config-label"], [1, "config-value"], [1, "fa-solid", "fa-map-location-dot"], [1, "helper-text"], [1, "history-config"], [1, "config-status"], [1, "config-text"], [1, "history-info"], [1, "info-card"], [1, "fa-solid", "fa-info-circle"], [1, "audit-fields-list"], [1, "settings-panel", "isa-settings-panel"], [1, "settings-panel"], [1, "fa-solid", "fa-sliders"], [1, "settings-list"], [1, "fa-solid", "fa-magnifying-glass"], [1, "fts-config"], [1, "fa-solid", "fa-box"], [1, "config-row"], ["title", "Navigate to parent entity", 1, "link"], [1, "muted"], [1, "fa-solid", "fa-circle-check", 2, "color", "var(--mj-brand-primary)"], [1, "fa-solid", "fa-circle-minus", 2, "color", "var(--mj-text-muted)"], ["title", "Navigate to parent entity", 1, "link", 3, "click"], [1, "link", 3, "click"], [1, "fa-solid", "fa-circle-check", 2, "color", "#059669"], [1, "setting-item"], [1, "setting-name"], [1, "setting-value-json"], [1, "setting-value"], [1, "setting-comment"], ["language", "json", "setup", "minimal", 3, "value", "readonly", "lineWrapping"], [1, "config-value", "enabled"], [1, "fa-solid", "fa-circle-check"], [1, "config-value", "code"], [1, "detail-section"], [1, "detail-field-db-name"], [1, "field-description"], [1, "detail-grid"], [1, "detail-item"], [1, "label"], [1, "value", "code"], [1, "value"], [1, "detail-section", "isa-source-section"], ["title", "Navigate to source entity", 1, "value", "link", 3, "click"], [1, "value", "link", 3, "click"], [1, "value-list"], [1, "value-item"], [1, "value-code"], [1, "value-display"], [1, "explorer-loading"], [1, "explorer-error"], [1, "explorer-empty"], ["text", "Loading entity..."], [1, "fa-solid", "fa-exclamation-triangle"]], template: function MJEntityFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, MJEntityFormComponentExtended_Conditional_0_Template, 68, 36, "div", 0)(1, MJEntityFormComponentExtended_Conditional_1_Template, 3, 3);
         } if (rf & 2) {
             i0.ɵɵconditional(!ctx.isExplorerLoading && ctx.entity ? 0 : 1);
@@ -3610,7 +3610,7 @@ MJEntityFormComponentExtended = __decorate([
 export { MJEntityFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJEntityFormComponentExtended, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-entity-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!isExplorerLoading && entity) {\n  <div class=\"entity-explorer\">\n    <!-- ============================================================ -->\n    <!-- HEADER BAR -->\n    <!-- ============================================================ -->\n    <header class=\"explorer-header\">\n      <div class=\"entity-identity\">\n        <div class=\"entity-icon\" [style.background-color]=\"'var(--mj-brand-primary)'\">\n          <i [class]=\"entityIcon\"></i>\n        </div>\n        <div class=\"entity-info\">\n          <div class=\"entity-title-row\">\n            <h1 class=\"entity-name\">{{ entityDisplayName }}</h1>\n            <span class=\"status-badge\" [ngClass]=\"statusClass\">\n              {{ entity.Status }}\n            </span>\n            @if (IsVirtualEntity) {\n              <span class=\"status-badge isa-badge virtual\">\n                <i class=\"fa-solid fa-eye\"></i> Virtual\n              </span>\n            }\n            @if (IsChildType) {\n              <span class=\"status-badge isa-badge child-type\" (click)=\"NavigateToEntity(ParentChain[0])\" title=\"Click to navigate to parent entity\">\n                <i class=\"fa-solid fa-arrow-up\"></i> IS-A {{ ParentChain[0]?.Name }}\n              </span>\n            }\n            @if (IsParentType) {\n              <span class=\"status-badge isa-badge parent-type\">\n                <i class=\"fa-solid fa-sitemap\"></i> {{ ChildEntities.length }} child type{{ ChildEntities.length !== 1 ? 's' : '' }}\n              </span>\n              @if (HasOverlappingSubtypes) {\n                <span class=\"status-badge isa-badge overlapping\" title=\"Multiple child types can coexist for a single parent record\">\n                  <i class=\"fa-solid fa-clone\"></i> Overlapping Subtypes\n                </span>\n              }\n            }\n          </div>\n          @if (IsChildType) {\n            <div class=\"isa-breadcrumb\">\n              <i class=\"fa-solid fa-layer-group\"></i>\n              {{ IsaBreadcrumb }}\n            </div>\n          }\n          <div class=\"entity-subtitle\">\n            <span class=\"schema-table\">{{ entity.SchemaName }}.{{ entity.BaseTable }}</span>\n            <span class=\"separator\">|</span>\n            @if (entity.Description) {\n              <span class=\"entity-description\" [title]=\"entity.Description\">\n                {{ entity.Description | slice:0:80 }}{{ entity.Description.length > 80 ? '...' : '' }}\n              </span>\n            }\n          </div>\n        </div>\n      </div>\n      <div class=\"header-stats\">\n        <div class=\"stat-item\" (click)=\"setActiveSection('fields')\">\n          <i class=\"fa-solid fa-table-columns\"></i>\n          <span class=\"stat-value\">{{ stats.fieldCount }}</span>\n          <span class=\"stat-label\">Fields</span>\n        </div>\n        <div class=\"stat-item\" (click)=\"setActiveSection('relationships')\">\n          <i class=\"fa-solid fa-link\"></i>\n          <span class=\"stat-value\">{{ stats.relationshipCount }}</span>\n          <span class=\"stat-label\">Relations</span>\n        </div>\n        <div class=\"stat-item\" (click)=\"setActiveSection('permissions')\">\n          <i class=\"fa-solid fa-shield-halved\"></i>\n          <span class=\"stat-value\">{{ stats.permissionCount }}</span>\n          <span class=\"stat-label\">Roles</span>\n        </div>\n        <div class=\"stat-item\" (click)=\"setActiveSection('data')\">\n          <i class=\"fa-solid fa-database\"></i>\n          @if (!isRowCountLoading) {\n            <span class=\"stat-value\">{{ formattedRowCount }}</span>\n          }\n          @if (isRowCountLoading) {\n            <span class=\"stat-value loading\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            </span>\n          }\n          <span class=\"stat-label\">Rows</span>\n        </div>\n      </div>\n    </header>\n    <!-- ============================================================ -->\n    <!-- MAIN CONTENT AREA -->\n    <!-- ============================================================ -->\n    <div class=\"explorer-body\">\n      <!-- Navigation Rail -->\n      <nav class=\"nav-rail\">\n        @for (item of navItems; track item) {\n          <button\n            class=\"nav-item\"\n            [class.active]=\"activeSection === item.id\"\n            (click)=\"setActiveSection(item.id)\"\n            [title]=\"item.label\">\n            <i [class]=\"item.icon\"></i>\n            <span class=\"nav-label\">{{ item.label }}</span>\n            @if (item.badge) {\n              <span class=\"nav-badge\">{{ item.badge }}</span>\n            }\n          </button>\n        }\n      </nav>\n      <!-- Main Canvas -->\n      <main class=\"main-canvas\" [class.panel-open]=\"detailPanelOpen\">\n        <!-- ============================================================ -->\n        <!-- OVERVIEW SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'overview') {\n          <section class=\"section overview-section\">\n            <div class=\"section-content\">\n              <!-- Stats Cards Row - Clickable to navigate to sections -->\n              <div class=\"stats-cards\">\n                <div class=\"stat-card clickable\" (click)=\"setActiveSection('fields')\" title=\"View all fields\">\n                  <div class=\"stat-card-header\">\n                    <i class=\"fa-solid fa-table-cells\"></i>\n                    <span>Fields</span>\n                  </div>\n                  <div class=\"stat-card-body\">\n                    <div class=\"stat-main\">{{ stats.fieldCount }}</div>\n                    <div class=\"stat-details\">\n                      <span>{{ stats.primaryKeyCount }} PKs</span>\n                      <span>{{ stats.foreignKeyCount }} FKs</span>\n                      @if (stats.encryptedFieldCount) {\n                        <span>{{ stats.encryptedFieldCount }} Encrypted</span>\n                      }\n                    </div>\n                  </div>\n                  <div class=\"stat-card-action\">\n                    <i class=\"fa-solid fa-arrow-right\"></i>\n                  </div>\n                </div>\n                <div class=\"stat-card clickable\" (click)=\"setActiveSection('relationships')\" title=\"View relationships\">\n                  <div class=\"stat-card-header\">\n                    <i class=\"fa-solid fa-diagram-project\"></i>\n                    <span>Relationships</span>\n                  </div>\n                  <div class=\"stat-card-body\">\n                    <div class=\"stat-main\">{{ stats.relationshipCount }}</div>\n                    <div class=\"stat-details\">\n                      <span>{{ groupedOutgoingRelationships.length }} Out</span>\n                      <span>{{ groupedIncomingRelationships.length }} In</span>\n                    </div>\n                  </div>\n                  <div class=\"stat-card-action\">\n                    <i class=\"fa-solid fa-arrow-right\"></i>\n                  </div>\n                </div>\n                <div class=\"stat-card clickable\" (click)=\"setActiveSection('permissions')\" title=\"View security settings\">\n                  <div class=\"stat-card-header\">\n                    <i class=\"fa-solid fa-lock\"></i>\n                    <span>Security</span>\n                  </div>\n                  <div class=\"stat-card-body\">\n                    <div class=\"stat-main\">{{ stats.permissionCount }}</div>\n                    <div class=\"stat-details\">\n                      <span>Roles configured</span>\n                    </div>\n                  </div>\n                  <div class=\"stat-card-action\">\n                    <i class=\"fa-solid fa-arrow-right\"></i>\n                  </div>\n                </div>\n                <div class=\"stat-card\">\n                  <div class=\"stat-card-header\">\n                    <i class=\"fa-solid fa-database\"></i>\n                    <span>Data</span>\n                  </div>\n                  <div class=\"stat-card-body\">\n                    <div class=\"stat-main\">{{ formattedRowCount }}</div>\n                    <div class=\"stat-details\">\n                      @if (entity.RowCountRunAt) {\n                        <span>Updated {{ entity.RowCountRunAt | date:'short' }}</span>\n                      }\n                      @if (!entity.RowCountRunAt) {\n                        <span>Row count</span>\n                      }\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <!-- Capabilities -->\n              <div class=\"info-panel capabilities-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-bolt\"></i>\n                  Capabilities\n                </h3>\n                <div class=\"capability-tags\">\n                  @for (cap of capabilitySummary; track cap) {\n                    <span class=\"capability-tag\">\n                      <i class=\"fa-solid fa-check\"></i>\n                      {{ cap }}\n                    </span>\n                  }\n                  @if (!entity.IncludeInAPI) {\n                    <span class=\"capability-tag disabled\">\n                      <i class=\"fa-solid fa-xmark\"></i>\n                      No API\n                    </span>\n                  }\n                </div>\n              </div>\n              <!-- IS-A Type Hierarchy -->\n              @if (HasISARelationship || IsVirtualEntity) {\n                <div class=\"info-panel isa-panel\">\n                  <h3 class=\"panel-title\">\n                    <i class=\"fa-solid fa-layer-group\"></i>\n                    Type Hierarchy\n                  </h3>\n                  @if (IsVirtualEntity) {\n                    <div class=\"isa-info-row virtual-info\">\n                      <i class=\"fa-solid fa-eye\"></i>\n                      <span>Virtual Entity \u2014 read-only view backed by <span class=\"code\">{{ entity.BaseView }}</span></span>\n                    </div>\n                  }\n                  @if (IsChildType) {\n                    <div class=\"isa-chain\">\n                      <div class=\"isa-chain-label\">Inheritance Chain</div>\n                      <div class=\"isa-chain-nodes\">\n                        <span class=\"isa-node current\">{{ entity.Name }}</span>\n                        @for (parent of ParentChain; track parent.ID) {\n                          <i class=\"fa-solid fa-arrow-right isa-arrow\"></i>\n                          <span class=\"isa-node parent clickable\" (click)=\"NavigateToEntity(parent)\" [title]=\"'Navigate to ' + parent.Name\">\n                            {{ parent.Name }}\n                          </span>\n                        }\n                      </div>\n                      <div class=\"isa-inherited-fields\">\n                        <i class=\"fa-solid fa-table-cells\"></i>\n                        <span>{{ InheritedFieldCount }} field{{ InheritedFieldCount !== 1 ? 's' : '' }} inherited from parent{{ ParentChain.length > 1 ? 's' : '' }}</span>\n                      </div>\n                    </div>\n                    <!-- IS-A Field Inspector: shows fields grouped by source entity -->\n                    @if (isaFieldGroups.length > 1) {\n                      <div class=\"isa-field-inspector\">\n                        <div class=\"isa-chain-label clickable\" (click)=\"isaFieldInspectorExpanded = !isaFieldInspectorExpanded\">\n                          <i class=\"fa-solid\" [ngClass]=\"isaFieldInspectorExpanded ? 'fa-chevron-down' : 'fa-chevron-right'\"></i>\n                          Field Source Inspector\n                        </div>\n                        @if (isaFieldInspectorExpanded) {\n                          <div class=\"isa-inspector-groups\">\n                            @for (group of isaFieldGroups; track group.EntityName) {\n                              <div class=\"isa-inspector-group\" [class.own]=\"group.Level === 0\" [class.inherited]=\"group.Level > 0\">\n                                <div class=\"isa-inspector-header\">\n                                  <span class=\"isa-inspector-entity\">\n                                    @if (group.Level === 0) {\n                                      <i class=\"fa-solid fa-circle\" style=\"color: var(--mj-brand-primary); font-size: 8px;\"></i>\n                                    } @else {\n                                      <i class=\"fa-solid fa-arrow-up\" style=\"color: var(--mj-brand-primary); font-size: 10px;\"></i>\n                                    }\n                                    {{ group.Label }}\n                                  </span>\n                                  <span class=\"isa-inspector-count\">{{ group.Fields.length }} field{{ group.Fields.length !== 1 ? 's' : '' }}</span>\n                                </div>\n                                <div class=\"isa-inspector-fields\">\n                                  @for (field of group.Fields; track field.ID) {\n                                    <span class=\"isa-inspector-field\" [title]=\"field.Description || field.Name\">\n                                      {{ field.DisplayName || field.Name }}\n                                      <span class=\"isa-inspector-type\">{{ field.Type }}</span>\n                                    </span>\n                                  }\n                                </div>\n                              </div>\n                            }\n                          </div>\n                        }\n                      </div>\n                    }\n                    <!-- Sibling Types -->\n                    @if (SiblingEntities.length > 0) {\n                      <div class=\"isa-siblings\">\n                        <div class=\"isa-chain-label\">Sibling Types ({{ ParentChain[0]?.AllowMultipleSubtypes ? 'overlapping' : 'disjoint' }} under {{ ParentChain[0]?.Name }})</div>\n                        <div class=\"isa-child-list\">\n                          @for (sibling of SiblingEntities; track sibling.ID) {\n                            <span class=\"isa-sibling-chip clickable\" (click)=\"NavigateToEntity(sibling)\" [title]=\"'Navigate to ' + sibling.Name\">\n                              <i class=\"fa-solid fa-arrows-left-right\"></i>\n                              {{ sibling.Name }}\n                            </span>\n                          }\n                        </div>\n                      </div>\n                    }\n                  }\n                  @if (IsParentType) {\n                    <div class=\"isa-children\">\n                      <div class=\"isa-chain-label\">Child Types</div>\n                      <div class=\"isa-child-list\">\n                        @for (childCount of childEntityCounts; track childCount.EntityName) {\n                          <span class=\"isa-child-chip clickable\" (click)=\"NavigateToEntity(childCount.EntityInfo)\" [title]=\"'Navigate to ' + childCount.EntityName\">\n                            <i class=\"fa-solid fa-arrow-down\"></i>\n                            {{ childCount.EntityName }}\n                            <span class=\"isa-child-count\">\n                              @if (childCount.IsLoading) {\n                                <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                              } @else {\n                                {{ childCount.RecordCount | number }}\n                              }\n                            </span>\n                          </span>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n              <!-- Database Info -->\n              <div class=\"info-panel database-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-server\"></i>\n                  Database\n                </h3>\n                <div class=\"info-grid\">\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Schema</span>\n                    <span class=\"info-value\">{{ entity.SchemaName }}</span>\n                  </div>\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Table</span>\n                    <span class=\"info-value\">{{ entity.BaseTable }}</span>\n                  </div>\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">View</span>\n                    <span class=\"info-value\">{{ entity.BaseView }}</span>\n                  </div>\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Delete Type</span>\n                    <span class=\"info-value\">{{ entity.DeleteType }}</span>\n                  </div>\n                  @if (entity.spCreate) {\n                    <div class=\"info-item\">\n                      <span class=\"info-label\">SP Create</span>\n                      <span class=\"info-value code\">{{ entity.spCreate }}</span>\n                    </div>\n                  }\n                  @if (entity.spUpdate) {\n                    <div class=\"info-item\">\n                      <span class=\"info-label\">SP Update</span>\n                      <span class=\"info-value code\">{{ entity.spUpdate }}</span>\n                    </div>\n                  }\n                  @if (entity.spDelete) {\n                    <div class=\"info-item\">\n                      <span class=\"info-label\">SP Delete</span>\n                      <span class=\"info-value code\">{{ entity.spDelete }}</span>\n                    </div>\n                  }\n                </div>\n              </div>\n              <!-- Code Gen Info -->\n              <div class=\"info-panel codegen-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-code\"></i>\n                  Code Generation\n                </h3>\n                <div class=\"info-grid\">\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Class Name</span>\n                    <span class=\"info-value code\">{{ entity.ClassName }}</span>\n                  </div>\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Code Name</span>\n                    <span class=\"info-value code\">{{ entity.CodeName }}</span>\n                  </div>\n                  @if (entity.EntityObjectSubclassName) {\n                    <div class=\"info-item\">\n                      <span class=\"info-label\">Subclass</span>\n                      <span class=\"info-value code\">{{ entity.EntityObjectSubclassName }}</span>\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- FIELDS SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'fields') {\n          <section class=\"section fields-section\">\n            <div class=\"section-header\">\n              <div class=\"search-box\">\n                <i class=\"fa-solid fa-search\"></i>\n                <input\n                  type=\"text\"\n                  placeholder=\"Search fields...\"\n                  [ngModel]=\"fieldSearchTerm\"\n                  (ngModelChange)=\"onFieldSearch($event)\">\n              </div>\n              <div class=\"header-controls\">\n                <!-- View mode toggle -->\n                <div class=\"view-mode-toggle\">\n                  <button\n                    class=\"toggle-btn\"\n                    [class.active]=\"fieldViewMode === 'grouped'\"\n                    (click)=\"fieldViewMode = 'grouped'\"\n                    title=\"Group by category\">\n                    <i class=\"fa-solid fa-layer-group\"></i>\n                  </button>\n                  <button\n                    class=\"toggle-btn\"\n                    [class.active]=\"fieldViewMode === 'list'\"\n                    (click)=\"fieldViewMode = 'list'\"\n                    title=\"List view\">\n                    <i class=\"fa-solid fa-list\"></i>\n                  </button>\n                </div>\n                <!-- Expand/Collapse controls (only in grouped mode) -->\n                @if (fieldViewMode === 'grouped') {\n                  <div class=\"expand-collapse-controls\">\n                    <button\n                      class=\"control-btn\"\n                      (click)=\"expandAllFieldGroups()\"\n                      [disabled]=\"allFieldGroupsExpanded\"\n                      title=\"Expand all\">\n                      <i class=\"fa-solid fa-angles-down\"></i>\n                    </button>\n                    <button\n                      class=\"control-btn\"\n                      (click)=\"collapseAllFieldGroups()\"\n                      [disabled]=\"allFieldGroupsCollapsed\"\n                      title=\"Collapse all\">\n                      <i class=\"fa-solid fa-angles-up\"></i>\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n            <div class=\"section-content fields-content\">\n              <!-- Grouped View -->\n              @if (fieldViewMode === 'grouped') {\n                <div class=\"field-groups\">\n                  @for (group of getFilteredFieldGroups(); track group) {\n                    <div\n                      class=\"field-group\"\n                      [class.expanded]=\"isFieldGroupExpanded(group.id)\">\n                      <div class=\"group-header\" (click)=\"toggleFieldGroup(group.id)\">\n                        <i class=\"expand-icon fa-solid\" [ngClass]=\"isFieldGroupExpanded(group.id) ? 'fa-chevron-down' : 'fa-chevron-right'\"></i>\n                        <i [class]=\"group.icon\" class=\"group-icon\"></i>\n                        <span class=\"group-label\">{{ group.label }}</span>\n                        <span class=\"group-count\">{{ group.fields.length }}</span>\n                      </div>\n                      @if (isFieldGroupExpanded(group.id)) {\n                        <div class=\"group-content\">\n                          @for (field of group.fields; track field) {\n                            <div\n                              class=\"field-item\"\n                              (click)=\"selectField(field)\"\n                              [class.selected]=\"IsFieldSelected(field)\">\n                              <div class=\"field-icon\">\n                                <i [class]=\"getFieldTypeIcon(field)\"></i>\n                              </div>\n                              <div class=\"field-info\">\n                                <div class=\"field-name\">{{ field.DisplayName || field.Name }}</div>\n                                <div class=\"field-db-name\">{{ field.Name }}</div>\n                                <div class=\"field-meta\">\n                                  <span class=\"field-type\">{{ formatFieldType(field) }}</span>\n                                  @if (!field.AllowsNull) {\n                                    <span class=\"field-nullable\">Required</span>\n                                  }\n                                  @if (field.RelatedEntityID) {\n                                    <span class=\"field-related\" (click)=\"navigateToRelatedEntity(field); $event.stopPropagation()\">\n                                      <i class=\"fa-solid fa-arrow-right\"></i>\n                                      {{ getRelatedEntityName(field) }}\n                                    </span>\n                                  }\n                                </div>\n                              </div>\n                              <div class=\"field-badges\">\n                                @if (field.IsPrimaryKey) {\n                                  <span class=\"badge pk\" title=\"Primary Key\">PK</span>\n                                }\n                                @if (field.RelatedEntityID && !field.IsPrimaryKey) {\n                                  <span class=\"badge fk\" title=\"Foreign Key\">FK</span>\n                                }\n                                @if (field.Encrypt) {\n                                  <span class=\"badge encrypted\" title=\"Encrypted\">\n                                    <i class=\"fa-solid fa-lock\"></i>\n                                  </span>\n                                }\n                                @if (IsInheritedField(field)) {\n                                  <span class=\"badge inherited\" [title]=\"'Inherited from ' + GetISAFieldSource(field)\">\n                                    <i class=\"fa-solid fa-arrow-up\"></i> {{ GetISAFieldSource(field) }}\n                                  </span>\n                                }\n                              </div>\n                            </div>\n                          }\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n              <!-- List View - Modern Card-style Table -->\n              @if (fieldViewMode === 'list') {\n                <div class=\"fields-list-view\">\n                  <!-- Table Header -->\n                  <div class=\"list-header\">\n                    <div class=\"list-col col-seq sortable\" (click)=\"sortFieldList('Sequence')\" [class.sorted]=\"fieldListSortColumn === 'Sequence'\">\n                      #\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Sequence' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-name sortable\" (click)=\"sortFieldList('Name')\" [class.sorted]=\"fieldListSortColumn === 'Name'\">\n                      Field Name\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Name' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-display-name sortable\" (click)=\"sortFieldList('DisplayName')\" [class.sorted]=\"fieldListSortColumn === 'DisplayName'\">\n                      Display Name\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'DisplayName' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-type sortable\" (click)=\"sortFieldList('Type')\" [class.sorted]=\"fieldListSortColumn === 'Type'\">\n                      Type\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Type' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-length sortable\" (click)=\"sortFieldList('Length')\" [class.sorted]=\"fieldListSortColumn === 'Length'\">\n                      Length\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Length' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-nullable sortable\" (click)=\"sortFieldList('AllowsNull')\" [class.sorted]=\"fieldListSortColumn === 'AllowsNull'\">\n                      Required\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'AllowsNull' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-flags\">Flags</div>\n                    <div class=\"list-col col-desc sortable\" (click)=\"sortFieldList('Description')\" [class.sorted]=\"fieldListSortColumn === 'Description'\">\n                      Description\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Description' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                  </div>\n                  <!-- Table Body -->\n                  <div class=\"list-body\">\n                    @for (field of getFilteredFieldsList(); track field; let i = $index) {\n                      <div\n                        class=\"list-row\"\n                        [class.selected]=\"IsFieldSelected(field)\"\n                        (click)=\"selectField(field)\">\n                        <div class=\"list-col col-seq\">\n                          <span class=\"seq-num\">{{ field.Sequence }}</span>\n                        </div>\n                        <div class=\"list-col col-name\">\n                          <i [class]=\"getFieldTypeIcon(field)\" class=\"field-type-icon\"></i>\n                          <span class=\"field-name-text\">{{ field.Name }}</span>\n                        </div>\n                        <div class=\"list-col col-display-name\">\n                          <span class=\"display-name-text\">{{ field.DisplayName || field.Name }}</span>\n                        </div>\n                        <div class=\"list-col col-type\">\n                          <span class=\"type-tag\">{{ field.Type }}</span>\n                        </div>\n                        <div class=\"list-col col-length\">\n                          @if (field.Length > 0) {\n                            <span class=\"length-value\">{{ field.Length }}</span>\n                          }\n                          @if (field.Length <= 0) {\n                            <span class=\"length-value muted\">\u2014</span>\n                          }\n                        </div>\n                        <div class=\"list-col col-nullable\">\n                          <span class=\"required-indicator\" [class.required]=\"!field.AllowsNull\" [class.optional]=\"field.AllowsNull\">\n                            <i [class]=\"field.AllowsNull ? 'fa-solid fa-circle-minus' : 'fa-solid fa-circle-check'\"></i>\n                            {{ field.AllowsNull ? 'Optional' : 'Required' }}\n                          </span>\n                        </div>\n                        <div class=\"list-col col-flags\">\n                          <div class=\"flag-badges\">\n                            @if (field.IsPrimaryKey) {\n                              <span class=\"flag-badge pk\" title=\"Primary Key\">\n                                <i class=\"fa-solid fa-key\"></i> PK\n                              </span>\n                            }\n                            @if (field.RelatedEntityID && !field.IsPrimaryKey) {\n                              <span class=\"flag-badge fk\" title=\"Foreign Key\">\n                                <i class=\"fa-solid fa-link\"></i> FK\n                              </span>\n                            }\n                            @if (field.Encrypt) {\n                              <span class=\"flag-badge encrypted\" title=\"Encrypted\">\n                                <i class=\"fa-solid fa-lock\"></i>\n                              </span>\n                            }\n                            @if (IsInheritedField(field)) {\n                              <span class=\"flag-badge inherited\" [title]=\"'Inherited from ' + GetISAFieldSource(field)\">\n                                <i class=\"fa-solid fa-arrow-up\"></i> {{ GetISAFieldSource(field) }}\n                              </span>\n                            }\n                          </div>\n                        </div>\n                        <div class=\"list-col col-desc\">\n                          <span class=\"desc-text\" [title]=\"field.Description || ''\">{{ field.Description || '\u2014' }}</span>\n                        </div>\n                      </div>\n                    }\n                  </div>\n                  <!-- Empty state -->\n                  @if (getFilteredFieldsList().length === 0) {\n                    <div class=\"list-empty\">\n                      <i class=\"fa-solid fa-search\"></i>\n                      <span>No fields match your search</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- RELATIONSHIPS SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'relationships') {\n          <section class=\"section relationships-section\">\n            <div class=\"section-header\">\n              <div class=\"view-toggle\">\n                <button\n                  class=\"toggle-btn\"\n                  [class.active]=\"relationshipViewMode === 'diagram'\"\n                  (click)=\"relationshipViewMode = 'diagram'\">\n                  <i class=\"fa-solid fa-diagram-project\"></i>\n                  Diagram\n                </button>\n                <button\n                  class=\"toggle-btn\"\n                  [class.active]=\"relationshipViewMode === 'list'\"\n                  (click)=\"relationshipViewMode = 'list'\">\n                  <i class=\"fa-solid fa-list\"></i>\n                  List\n                </button>\n              </div>\n              <!-- Depth selector (only in diagram mode) -->\n              @if (relationshipViewMode === 'diagram') {\n                <div class=\"depth-selector\">\n                  <span class=\"depth-label\">Depth:</span>\n                  <div class=\"depth-buttons\">\n                    @for (d of [1, 2, 3, 4, 5]; track d) {\n                      <button\n                        class=\"depth-btn\"\n                        [class.active]=\"erdDepth === d\"\n                        (click)=\"setErdDepth(d)\"\n                        [title]=\"'Show ' + d + ' level(s) of relationships'\">\n                        {{ d }}\n                      </button>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n            <div class=\"section-content\">\n              <!-- Diagram View using the ERD composite component -->\n              @if (relationshipViewMode === 'diagram') {\n                <div class=\"relationships-graph\">\n                  <mj-erd-composite\n                    [focusEntities]=\"entity ? [entity] : []\"\n                    [showFilterPanel]=\"false\"\n                    [showHeader]=\"false\"\n                    [depth]=\"erdDepth\"\n                    (stateChange)=\"onERDStateChange($event)\"\n                    (openRecord)=\"onERDOpenRecord($event)\">\n                  </mj-erd-composite>\n                </div>\n              }\n              <!-- List View -->\n              @if (relationshipViewMode === 'list') {\n                <div class=\"relationships-list\">\n                  <!-- Outgoing Relationships (FK fields on this entity) - Grouped by target entity -->\n                  <div class=\"relationship-group\">\n                    <h3 class=\"relationship-group-title\">\n                      <i class=\"fa-solid fa-arrow-right-from-bracket\"></i>\n                      Outgoing (References to other entities)\n                      <span class=\"group-count\">{{ groupedOutgoingRelationships.length }}</span>\n                    </h3>\n                    <div class=\"relationship-items grouped\">\n                      @for (group of groupedOutgoingRelationships; track group) {\n                        <div\n                          class=\"relationship-item-grouped\"\n                          >\n                          <div class=\"rel-header\">\n                            <div class=\"rel-icon outgoing\">\n                              <i class=\"fa-solid fa-arrow-right\"></i>\n                            </div>\n                            <div class=\"rel-entity-name\">{{ group.entityName }}</div>\n                          </div>\n                          <div class=\"rel-fields-chips\">\n                            @for (field of group.fields; track field) {\n                              <span\n                                class=\"field-chip outgoing\"\n                                [title]=\"field.Description || field.Name\"\n                                (click)=\"selectField(field)\">\n                                <i class=\"fa-solid fa-link\"></i>\n                                {{ field.Name }}\n                              </span>\n                            }\n                          </div>\n                        </div>\n                      }\n                      @if (groupedOutgoingRelationships.length === 0) {\n                        <div class=\"empty-state\">\n                          <p>No outgoing relationships</p>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                  <!-- Incoming Relationships - Grouped by source entity -->\n                  <div class=\"relationship-group\">\n                    <h3 class=\"relationship-group-title\">\n                      <i class=\"fa-solid fa-arrow-right-to-bracket\"></i>\n                      Incoming (Entities that reference this one)\n                      <span class=\"group-count\">{{ groupedIncomingRelationships.length }}</span>\n                    </h3>\n                    <div class=\"relationship-items grouped\">\n                      @for (group of groupedIncomingRelationships; track group) {\n                        <div\n                          class=\"relationship-item-grouped\"\n                          >\n                          <div class=\"rel-header\">\n                            <div class=\"rel-icon incoming\">\n                              <i class=\"fa-solid fa-arrow-left\"></i>\n                            </div>\n                            <div class=\"rel-entity-name\">{{ group.entityName }}</div>\n                          </div>\n                          <div class=\"rel-fields-chips\">\n                            @for (field of group.fields; track field) {\n                              <span\n                                class=\"field-chip incoming\"\n                                [title]=\"'Type: ' + field.type\">\n                                <i class=\"fa-solid fa-link\"></i>\n                                {{ field.fieldName }}\n                                @if (field.bundleInAPI) {\n                                  <i class=\"fa-solid fa-box bundle-icon\" title=\"Bundled in API\"></i>\n                                }\n                              </span>\n                            }\n                          </div>\n                        </div>\n                      }\n                      @if (groupedIncomingRelationships.length === 0) {\n                        <div class=\"empty-state\">\n                          <p>No incoming relationships</p>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                </div>\n              }\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- ORGANIC KEYS SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'organicKeys') {\n          <section class=\"section organic-keys-section\">\n            <div class=\"section-content\">\n              @if (organicKeysOutgoing.length === 0 && organicKeysIncoming.length === 0) {\n                <div class=\"empty-state-card\">\n                  <i class=\"fa-solid fa-fingerprint empty-state-icon\"></i>\n                  <h3>No Organic Keys</h3>\n                  <p>This entity has no organic key relationships configured. Organic keys enable cross-system matching by shared business data like email addresses, phone numbers, or domain names \u2014 without requiring foreign key constraints.</p>\n                </div>\n              } @else {\n                <!-- Outgoing: Keys defined on THIS entity -->\n                @if (organicKeysOutgoing.length > 0) {\n                  <div class=\"relationship-group\">\n                    <h3 class=\"relationship-group-title\">\n                      <i class=\"fa-solid fa-arrow-right-from-bracket\"></i>\n                      Outgoing (Matches from this entity)\n                      <span class=\"group-count\">{{ organicKeysOutgoing.length }}</span>\n                    </h3>\n                    <div class=\"organic-key-cards\">\n                      @for (okGroup of organicKeysOutgoing; track okGroup.OrganicKey.ID) {\n                        <div class=\"organic-key-card\">\n                          <div class=\"organic-key-card-header\">\n                            <div class=\"organic-key-name\">\n                              <i class=\"fa-solid fa-fingerprint organic-key-icon\"></i>\n                              {{ okGroup.OrganicKey.Name }}\n                            </div>\n                            <div class=\"organic-key-badges\">\n                              <span class=\"organic-key-badge strategy\">{{ okGroup.OrganicKey.NormalizationStrategy }}</span>\n                              <span class=\"organic-key-badge fields\">{{ okGroup.OrganicKey.MatchFieldNames }}</span>\n                            </div>\n                          </div>\n                          @if (okGroup.OrganicKey.Description) {\n                            <p class=\"organic-key-description\">{{ okGroup.OrganicKey.Description }}</p>\n                          }\n                          <div class=\"organic-key-targets\">\n                            @for (target of okGroup.RelatedEntities; track target.Info.ID) {\n                              <div class=\"organic-key-target clickable\" (click)=\"NavigateToEntityByID(target.Info.RelatedEntityID)\">\n                                <div class=\"rel-icon outgoing\">\n                                  <i class=\"fa-solid fa-arrow-right\"></i>\n                                </div>\n                                <div class=\"target-main\">\n                                  <div class=\"target-header\">\n                                    <i [class]=\"target.EntityIcon\" class=\"target-entity-icon\"></i>\n                                    <span class=\"target-entity-name\">{{ target.Info.DisplayName || target.EntityName }}</span>\n                                    <i class=\"fa-solid fa-external-link-alt target-nav-icon\"></i>\n                                  </div>\n                                  <div class=\"target-match-detail\">\n                                    @if (target.Info.IsDirectMatch) {\n                                      <span class=\"match-type-badge direct\">Direct</span>\n                                      <span class=\"match-fields\">{{ okGroup.OrganicKey.MatchFieldNames }} \u2192 {{ target.Info.RelatedEntityFieldNames }}</span>\n                                    } @else {\n                                      <span class=\"match-type-badge transitive\">Transitive</span>\n                                      <span class=\"match-fields\" [title]=\"target.Info.TransitiveObjectName || ''\">via {{ target.Info.TransitiveObjectName }}</span>\n                                    }\n                                  </div>\n                                </div>\n                              </div>\n                            }\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                }\n\n                <!-- Incoming: Keys on OTHER entities targeting THIS entity -->\n                @if (organicKeysIncoming.length > 0) {\n                  <div class=\"relationship-group\">\n                    <h3 class=\"relationship-group-title\">\n                      <i class=\"fa-solid fa-arrow-right-to-bracket\"></i>\n                      Incoming (Other entities matching to this one)\n                      <span class=\"group-count\">{{ organicKeysIncoming.length }}</span>\n                    </h3>\n                    <div class=\"organic-key-cards\">\n                      @for (incoming of organicKeysIncoming; track incoming.OrganicKey.ID + incoming.SourceEntityName) {\n                        <div class=\"organic-key-card incoming clickable\" (click)=\"NavigateToEntityByID(incoming.SourceEntityID)\">\n                          <div class=\"organic-key-card-header\">\n                            <div class=\"organic-key-name\">\n                              <div class=\"rel-icon incoming\">\n                                <i class=\"fa-solid fa-arrow-left\"></i>\n                              </div>\n                              <i [class]=\"incoming.SourceEntityIcon\" class=\"target-entity-icon\"></i>\n                              {{ incoming.SourceEntityName }}\n                              <i class=\"fa-solid fa-external-link-alt target-nav-icon\"></i>\n                            </div>\n                            <div class=\"organic-key-badges\">\n                              <span class=\"match-type-badge\" [class.direct]=\"incoming.MatchType === 'Direct'\" [class.transitive]=\"incoming.MatchType === 'Transitive'\">{{ incoming.MatchType }}</span>\n                            </div>\n                          </div>\n                          <div class=\"organic-key-detail-row\">\n                            <span class=\"detail-label\">Key:</span>\n                            <span class=\"detail-value\">{{ incoming.OrganicKey.Name }}</span>\n                            <span class=\"organic-key-badge fields\">{{ incoming.OrganicKey.MatchFieldNames }}</span>\n                            <span class=\"organic-key-badge strategy\">{{ incoming.OrganicKey.NormalizationStrategy }}</span>\n                          </div>\n                          @if (incoming.RelatedEntityConfig.IsDirectMatch) {\n                            <div class=\"organic-key-detail-row\">\n                              <span class=\"detail-label\">Matched via:</span>\n                              <span class=\"detail-value\">{{ incoming.RelatedEntityConfig.RelatedEntityFieldNames }}</span>\n                            </div>\n                          } @else {\n                            <div class=\"organic-key-detail-row\">\n                              <span class=\"detail-label\">Bridge:</span>\n                              <span class=\"detail-value\">{{ incoming.RelatedEntityConfig.TransitiveObjectName }}</span>\n                            </div>\n                          }\n                        </div>\n                      }\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- PERMISSIONS SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'permissions') {\n          <section class=\"section permissions-section\">\n            <div class=\"section-content\">\n              <div class=\"permissions-matrix\">\n                <table class=\"matrix-table\">\n                  <thead>\n                    <tr>\n                      <th>Role</th>\n                      <th class=\"center\">Create</th>\n                      <th class=\"center\">Read</th>\n                      <th class=\"center\">Update</th>\n                      <th class=\"center\">Delete</th>\n                      <th>RLS</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (perm of entity.Permissions; track perm) {\n                      <tr>\n                        <td class=\"role-name\">{{ getRoleName(perm) }}</td>\n                        <td class=\"center\">\n                          <i class=\"permission-icon\" [ngClass]=\"perm.CanCreate ? 'fa-solid fa-check granted' : 'fa-solid fa-xmark denied'\"></i>\n                        </td>\n                        <td class=\"center\">\n                          <i class=\"permission-icon\" [ngClass]=\"perm.CanRead ? 'fa-solid fa-check granted' : 'fa-solid fa-xmark denied'\"></i>\n                        </td>\n                        <td class=\"center\">\n                          <i class=\"permission-icon\" [ngClass]=\"perm.CanUpdate ? 'fa-solid fa-check granted' : 'fa-solid fa-xmark denied'\"></i>\n                        </td>\n                        <td class=\"center\">\n                          <i class=\"permission-icon\" [ngClass]=\"perm.CanDelete ? 'fa-solid fa-check granted' : 'fa-solid fa-xmark denied'\"></i>\n                        </td>\n                        <td class=\"rls-info\">\n                          @if (perm.ReadRLSFilterID) {\n                            <span class=\"rls-badge\" title=\"Read RLS\">R</span>\n                          }\n                          @if (perm.CreateRLSFilterID) {\n                            <span class=\"rls-badge\" title=\"Create RLS\">C</span>\n                          }\n                          @if (perm.UpdateRLSFilterID) {\n                            <span class=\"rls-badge\" title=\"Update RLS\">U</span>\n                          }\n                          @if (perm.DeleteRLSFilterID) {\n                            <span class=\"rls-badge\" title=\"Delete RLS\">D</span>\n                          }\n                          @if (!perm.ReadRLSFilterID && !perm.CreateRLSFilterID && !perm.UpdateRLSFilterID && !perm.DeleteRLSFilterID) {\n                            <span class=\"no-rls\">None</span>\n                          }\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n                @if (entity.Permissions.length === 0) {\n                  <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-shield-halved\"></i>\n                    <p>No permissions configured</p>\n                  </div>\n                }\n              </div>\n              <div class=\"api-capabilities\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-plug\"></i>\n                  API Capabilities\n                </h3>\n                <div class=\"capability-grid\">\n                  <div class=\"capability-item\" [class.enabled]=\"entity.IncludeInAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.IncludeInAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Include in API</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.AllowAllRowsAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AllowAllRowsAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Allow All Rows</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.AllowCreateAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AllowCreateAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Allow Create</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.AllowUpdateAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AllowUpdateAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Allow Update</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.AllowDeleteAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AllowDeleteAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Allow Delete</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.AllowUserSearchAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AllowUserSearchAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>User Search</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.CustomResolverAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.CustomResolverAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Custom Resolver</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- DATA SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'data') {\n          <section class=\"section data-section\">\n            <div class=\"data-viewer-container\">\n              @if (entity) {\n                <mj-entity-viewer\n                  [entity]=\"entity\"\n                  [showGridToolbar]=\"true\"\n                  (recordOpened)=\"OnRecordOpened($event)\"\n                  (addRequested)=\"OnAddRequested()\">\n                </mj-entity-viewer>\n              }\n            </div>\n          </section>\n        }\n                <!-- ============================================================ -->\n        <!-- LINEAGE SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'lineage') {\n          <section class=\"section lineage-section\">\n            <div class=\"section-content\">\n              <div class=\"lineage-diagram\">\n                <div class=\"lineage-stage sources\">\n                  <h4>Data Sources</h4>\n                  <div class=\"lineage-items\">\n                    <div class=\"lineage-item\">\n                      <i class=\"fa-solid fa-keyboard\"></i>\n                      <span>Manual Entry</span>\n                    </div>\n                    @if (entity.IncludeInAPI) {\n                      <div class=\"lineage-item\">\n                        <i class=\"fa-solid fa-plug\"></i>\n                        <span>API Create</span>\n                      </div>\n                    }\n                  </div>\n                </div>\n                <div class=\"lineage-arrow\">\n                  <i class=\"fa-solid fa-arrow-right\"></i>\n                </div>\n                <div class=\"lineage-stage entity-node\">\n                  <div class=\"entity-box\">\n                    <i [class]=\"entityIcon\"></i>\n                    <span>{{ entity.Name }}</span>\n                  </div>\n                </div>\n                <div class=\"lineage-arrow\">\n                  <i class=\"fa-solid fa-arrow-right\"></i>\n                </div>\n                <div class=\"lineage-stage sinks\">\n                  <h4>Data Sinks</h4>\n                  <div class=\"lineage-items\">\n                    @if (entity.TrackRecordChanges) {\n                      <div class=\"lineage-item\">\n                        <i class=\"fa-solid fa-clock-rotate-left\"></i>\n                        <span>Record Changes</span>\n                      </div>\n                    }\n                    @if (entity.AuditRecordAccess) {\n                      <div class=\"lineage-item\">\n                        <i class=\"fa-solid fa-eye\"></i>\n                        <span>Access Audit</span>\n                      </div>\n                    }\n                    <div class=\"lineage-item\">\n                      <i class=\"fa-solid fa-link\"></i>\n                      <span>Related Entities ({{ stats.relationshipCount }})</span>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"tracking-config\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-clock-rotate-left\"></i>\n                  Tracking Configuration\n                </h3>\n                <div class=\"config-grid\">\n                  <div class=\"config-item\" [class.enabled]=\"entity.TrackRecordChanges\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.TrackRecordChanges ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Track Record Changes</span>\n                  </div>\n                  <div class=\"config-item\" [class.enabled]=\"entity.AuditRecordAccess\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AuditRecordAccess ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Audit Record Access</span>\n                  </div>\n                  <div class=\"config-item\" [class.enabled]=\"entity.AuditViewRuns\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AuditViewRuns ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Audit View Runs</span>\n                  </div>\n                  <div class=\"config-item\">\n                    <span class=\"config-label\">Delete Type:</span>\n                    <span class=\"config-value\">{{ entity.DeleteType }}</span>\n                  </div>\n                  <div class=\"config-item\" [class.enabled]=\"entity.CascadeDeletes\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.CascadeDeletes ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Cascade Deletes</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"tracking-config\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-map-location-dot\"></i>\n                  Geocoding\n                </h3>\n                <p class=\"helper-text\">When enabled, CodeGen auto-detects geo fields and generates map view support</p>\n                <div class=\"config-grid\">\n                  <div class=\"config-item\" [class.enabled]=\"entity.SupportsGeoCoding\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.SupportsGeoCoding ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Supports Geocoding</span>\n                  </div>\n                  <div class=\"config-item\" [class.enabled]=\"entity.AutoUpdateSupportsGeoCoding\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AutoUpdateSupportsGeoCoding ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Auto-Detect Geocoding</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- HISTORY SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'history') {\n          <section class=\"section history-section\">\n            <div class=\"section-content\">\n              <div class=\"history-config\">\n                <div class=\"config-status\" [class.enabled]=\"entity.TrackRecordChanges\">\n                  <i class=\"fa-solid\" [ngClass]=\"entity.TrackRecordChanges ? 'fa-circle-check' : 'fa-circle-xmark'\"></i>\n                  <div class=\"config-text\">\n                    <strong>Record Change Tracking</strong>\n                    <span>{{ entity.TrackRecordChanges ? 'Enabled - All changes are recorded' : 'Disabled - Changes are not tracked' }}</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"history-info\">\n                <div class=\"info-card\">\n                  <h4>\n                    <i class=\"fa-solid fa-info-circle\"></i>\n                    About Change Tracking\n                  </h4>\n                  @if (entity.TrackRecordChanges) {\n                    <p>\n                      This entity has change tracking enabled. All modifications to records are stored in the\n                      <code>RecordChange</code> table, including the user who made the change, timestamp, and\n                      the before/after values.\n                    </p>\n                  }\n                  @if (!entity.TrackRecordChanges) {\n                    <p>\n                      This entity does not have change tracking enabled. To enable it, set\n                      <code>TrackRecordChanges</code> to <code>true</code> in the entity metadata.\n                    </p>\n                  }\n                </div>\n                @if (entity.TrackRecordChanges) {\n                  <div class=\"info-card\">\n                    <h4>\n                      <i class=\"fa-solid fa-database\"></i>\n                      Audit Fields\n                    </h4>\n                    <ul class=\"audit-fields-list\">\n                      <li>\n                        <code>__mj_CreatedAt</code> - Record creation timestamp\n                      </li>\n                      <li>\n                        <code>__mj_UpdatedAt</code> - Last modification timestamp\n                      </li>\n                      @if (entity.DeleteType === 'Soft') {\n                        <li>\n                          <code>__mj_DeletedAt</code> - Soft delete timestamp (when applicable)\n                        </li>\n                      }\n                    </ul>\n                  </div>\n                }\n              </div>\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- SETTINGS SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'settings') {\n          <section class=\"section settings-section\">\n            <div class=\"section-content\">\n              <!-- IS-A Type Relationship Configuration -->\n              @if (HasISARelationship || IsVirtualEntity) {\n                <div class=\"settings-panel isa-settings-panel\">\n                  <h3 class=\"panel-title\">\n                    <i class=\"fa-solid fa-layer-group\"></i>\n                    Type Relationship (IS-A)\n                  </h3>\n                  <div class=\"config-grid\">\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Virtual Entity</span>\n                      <span class=\"config-value\">\n                        @if (IsVirtualEntity) {\n                          <i class=\"fa-solid fa-circle-check\" style=\"color: var(--mj-brand-primary);\"></i> Yes \u2014 read-only view\n                        } @else {\n                          <i class=\"fa-solid fa-circle-minus\" style=\"color: var(--mj-text-muted);\"></i> No\n                        }\n                      </span>\n                    </div>\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Parent Entity</span>\n                      <span class=\"config-value\">\n                        @if (IsChildType) {\n                          <span class=\"link\" (click)=\"NavigateToEntity(ParentChain[0])\" title=\"Navigate to parent entity\">\n                            {{ ParentChain[0]?.Name }}\n                            <i class=\"fa-solid fa-arrow-right\"></i>\n                          </span>\n                        } @else {\n                          <span class=\"muted\">None</span>\n                        }\n                      </span>\n                    </div>\n                    @if (IsChildType) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Full Inheritance Chain</span>\n                        <span class=\"config-value\">{{ IsaBreadcrumb }}</span>\n                      </div>\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Inherited Fields</span>\n                        <span class=\"config-value\">{{ InheritedFieldCount }} field{{ InheritedFieldCount !== 1 ? 's' : '' }}</span>\n                      </div>\n                    }\n                    @if (IsParentType) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Child Types</span>\n                        <span class=\"config-value\">\n                          @for (child of ChildEntities; track child.ID; let last = $last) {\n                            <span class=\"link\" (click)=\"NavigateToEntity(child)\">{{ child.Name }}</span>{{ last ? '' : ', ' }}\n                          }\n                        </span>\n                      </div>\n                    }\n                    @if (SiblingEntities.length > 0) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Sibling Types</span>\n                        <span class=\"config-value\">\n                          @for (sibling of SiblingEntities; track sibling.ID; let last = $last) {\n                            <span class=\"link\" (click)=\"NavigateToEntity(sibling)\">{{ sibling.Name }}</span>{{ last ? '' : ', ' }}\n                          }\n                        </span>\n                      </div>\n                    }\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Disjoint Subtypes</span>\n                      <span class=\"config-value\">\n                        @if (IsParentType || IsChildType) {\n                          <i class=\"fa-solid fa-circle-check\" style=\"color: #059669;\"></i> Enforced \u2014 a parent record can only be one child type\n                        } @else {\n                          <span class=\"muted\">N/A</span>\n                        }\n                      </span>\n                    </div>\n                  </div>\n                </div>\n              }\n              <!-- Entity Settings -->\n              <div class=\"settings-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-sliders\"></i>\n                  Entity Settings\n                </h3>\n                @if (entity.Settings.length > 0) {\n                  <div class=\"settings-list\">\n                    @for (setting of entity.Settings; track setting) {\n                      <div class=\"setting-item\">\n                        <div class=\"setting-name\">{{ setting.Name }}</div>\n                        @if (isJsonValue(setting.Value)) {\n                          <div class=\"setting-value-json\">\n                            <mj-code-editor\n                              [value]=\"formatJsonValue(setting.Value)\"\n                              language=\"json\"\n                              [readonly]=\"true\"\n                              [lineWrapping]=\"true\"\n                              setup=\"minimal\">\n                            </mj-code-editor>\n                          </div>\n                        } @else {\n                          <div class=\"setting-value\">{{ setting.Value }}</div>\n                        }\n                        @if (setting.Comments) {\n                          <div class=\"setting-comment\">{{ setting.Comments }}</div>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n                @if (entity.Settings.length === 0) {\n                  <div class=\"empty-state\">\n                    <p>No custom settings configured</p>\n                  </div>\n                }\n              </div>\n              <!-- Full Text Search -->\n              <div class=\"settings-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-magnifying-glass\"></i>\n                  Full-Text Search\n                </h3>\n                @if (entity.FullTextSearchEnabled) {\n                  <div class=\"fts-config\">\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Status</span>\n                      <span class=\"config-value enabled\">\n                        <i class=\"fa-solid fa-circle-check\"></i>\n                        Enabled\n                      </span>\n                    </div>\n                    @if (entity.FullTextCatalog) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Catalog</span>\n                        <span class=\"config-value code\">{{ entity.FullTextCatalog }}</span>\n                      </div>\n                    }\n                    @if (entity.FullTextIndex) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Index</span>\n                        <span class=\"config-value code\">{{ entity.FullTextIndex }}</span>\n                      </div>\n                    }\n                    @if (entity.FullTextSearchFunction) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Function</span>\n                        <span class=\"config-value code\">{{ entity.FullTextSearchFunction }}</span>\n                      </div>\n                    }\n                  </div>\n                }\n                @if (!entity.FullTextSearchEnabled) {\n                  <div class=\"empty-state\">\n                    <p>Full-text search is not enabled for this entity</p>\n                  </div>\n                }\n              </div>\n              <!-- Row Packaging -->\n              <div class=\"settings-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-box\"></i>\n                  Schema Packaging\n                </h3>\n                <div class=\"config-grid\">\n                  <div class=\"config-row\">\n                    <span class=\"config-label\">Rows to Pack</span>\n                    <span class=\"config-value\">{{ entity.RowsToPackWithSchema || 'None' }}</span>\n                  </div>\n                  @if (entity.RowsToPackSampleCount) {\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Sample Count</span>\n                      <span class=\"config-value\">{{ entity.RowsToPackSampleCount }}</span>\n                    </div>\n                  }\n                  @if (entity.RowsToPackSampleMethod) {\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Sample Method</span>\n                      <span class=\"config-value\">{{ entity.RowsToPackSampleMethod }}</span>\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          </section>\n        }\n      </main>\n      <!-- ============================================================ -->\n      <!-- DETAIL PANEL (Slides in from right) -->\n      <!-- ============================================================ -->\n      <aside class=\"detail-panel\" [class.open]=\"detailPanelOpen\">\n        <div class=\"panel-header\">\n          @if (selectedField) {\n            <h3>Field Details</h3>\n          }\n          @if (selectedRelationship) {\n            <h3>Relationship Details</h3>\n          }\n          <button class=\"close-btn\" (click)=\"closeDetailPanel()\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n        <!-- Field Details -->\n        @if (selectedField) {\n          <div class=\"panel-content\">\n            <div class=\"detail-section\">\n              <h4>{{ selectedField.DisplayName || selectedField.Name }}</h4>\n              <div class=\"detail-field-db-name\">{{ selectedField.Name }}</div>\n              @if (selectedField.Description) {\n                <p class=\"field-description\">{{ selectedField.Description }}</p>\n              }\n            </div>\n            <div class=\"detail-section\">\n              <h5>Type Information</h5>\n              <div class=\"detail-grid\">\n                <div class=\"detail-item\">\n                  <span class=\"label\">SQL Type</span>\n                  <span class=\"value code\">{{ formatFieldType(selectedField) }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">TypeScript Type</span>\n                  <span class=\"value code\">{{ selectedField.TSType }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Nullable</span>\n                  <span class=\"value\">{{ selectedField.AllowsNull ? 'Yes' : 'No' }}</span>\n                </div>\n                @if (selectedField.DefaultValue) {\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Default</span>\n                    <span class=\"value code\">{{ selectedField.DefaultValue }}</span>\n                  </div>\n                }\n              </div>\n            </div>\n            @if (IsInheritedField(selectedField)) {\n              <div class=\"detail-section isa-source-section\">\n                <h5>\n                  <i class=\"fa-solid fa-arrow-up\"></i>\n                  IS-A Inherited Field\n                </h5>\n                <div class=\"detail-grid\">\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Source Entity</span>\n                    <span class=\"value link\" (click)=\"NavigateToEntity(ParentChain[0])\" title=\"Navigate to source entity\">\n                      {{ GetISAFieldSource(selectedField) }}\n                      <i class=\"fa-solid fa-arrow-right\"></i>\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Routing</span>\n                    <span class=\"value\">ORM routes Set/Get to parent</span>\n                  </div>\n                </div>\n              </div>\n            }\n            @if (selectedField.RelatedEntityID) {\n              <div class=\"detail-section\">\n                <h5>Relationship</h5>\n                <div class=\"detail-grid\">\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Related Entity</span>\n                    <span class=\"value link\" (click)=\"navigateToRelatedEntity(selectedField)\">\n                      {{ getRelatedEntityName(selectedField) }}\n                      <i class=\"fa-solid fa-arrow-right\"></i>\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Display Type</span>\n                    <span class=\"value\">{{ selectedField.RelatedEntityDisplayType }}</span>\n                  </div>\n                </div>\n              </div>\n            }\n            @if (selectedField.Encrypt) {\n              <div class=\"detail-section\">\n                <h5>Encryption</h5>\n                <div class=\"detail-grid\">\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Encrypted</span>\n                    <span class=\"value\">Yes</span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Decrypt in API</span>\n                    <span class=\"value\">{{ selectedField.AllowDecryptInAPI ? 'Yes' : 'No' }}</span>\n                  </div>\n                </div>\n              </div>\n            }\n            <div class=\"detail-section\">\n              <h5>API Settings</h5>\n              <div class=\"detail-grid\">\n                <div class=\"detail-item\">\n                  <span class=\"label\">Allow Update</span>\n                  <span class=\"value\">{{ selectedField.AllowUpdateAPI ? 'Yes' : 'No' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Include in Search</span>\n                  <span class=\"value\">{{ selectedField.IncludeInUserSearchAPI ? 'Yes' : 'No' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Full-Text Search</span>\n                  <span class=\"value\">{{ selectedField.FullTextSearchEnabled ? 'Yes' : 'No' }}</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"detail-section\">\n              <h5>Form Settings</h5>\n              <div class=\"detail-grid\">\n                <div class=\"detail-item\">\n                  <span class=\"label\">Include in Form</span>\n                  <span class=\"value\">{{ selectedField.IncludeInGeneratedForm ? 'Yes' : 'No' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Section</span>\n                  <span class=\"value\">{{ selectedField.GeneratedFormSection }}</span>\n                </div>\n                @if (selectedField.Category) {\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Category</span>\n                    <span class=\"value\">{{ selectedField.Category }}</span>\n                  </div>\n                }\n                <div class=\"detail-item\">\n                  <span class=\"label\">Sequence</span>\n                  <span class=\"value\">{{ selectedField.Sequence }}</span>\n                </div>\n              </div>\n            </div>\n            @if (selectedField.EntityFieldValues.length > 0) {\n              <div class=\"detail-section\">\n                <h5>Allowed Values</h5>\n                <div class=\"value-list\">\n                  @for (val of selectedField.EntityFieldValues; track val) {\n                    <div class=\"value-item\">\n                      @if (val.Code !== val.Value) {\n                        <span class=\"value-code\">{{ val.Code }}</span>\n                      }\n                      <span class=\"value-display\">{{ val.Value }}</span>\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n        <!-- Relationship Details -->\n        @if (selectedRelationship) {\n          <div class=\"panel-content\">\n            <div class=\"detail-section\">\n              <h4>{{ selectedRelationship.DisplayName || selectedRelationship.Entity }}</h4>\n            </div>\n            <div class=\"detail-section\">\n              <h5>Connection</h5>\n              <div class=\"detail-grid\">\n                <div class=\"detail-item\">\n                  <span class=\"label\">From Entity</span>\n                  <span class=\"value\">{{ selectedRelationship.Entity }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Join Field</span>\n                  <span class=\"value code\">{{ selectedRelationship.RelatedEntityJoinField }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Type</span>\n                  <span class=\"value\">{{ selectedRelationship.Type }}</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"detail-section\">\n              <h5>Display Settings</h5>\n              <div class=\"detail-grid\">\n                <div class=\"detail-item\">\n                  <span class=\"label\">Display in Form</span>\n                  <span class=\"value\">{{ selectedRelationship.DisplayInForm ? 'Yes' : 'No' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Location</span>\n                  <span class=\"value\">{{ selectedRelationship.DisplayLocation }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Bundle in API</span>\n                  <span class=\"value\">{{ selectedRelationship.BundleInAPI ? 'Yes' : 'No' }}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        }\n      </aside>\n    </div>\n  </div>\n} @else {\n  @if (isExplorerLoading) {\n    <div class=\"explorer-loading\">\n      <mj-loading text=\"Loading entity...\"></mj-loading>\n    </div>\n  }\n  @if (!isExplorerLoading && explorerError) {\n    <div class=\"explorer-error\">\n      <i class=\"fa-solid fa-exclamation-triangle\"></i>\n      <p>{{ explorerError }}</p>\n    </div>\n  }\n  @if (!isExplorerLoading && !explorerError && !entity) {\n    <div class=\"explorer-empty\">\n      <i class=\"fa-solid fa-database\"></i>\n      <p>Entity metadata not available</p>\n    </div>\n  }\n}\n\n<!-- Loading / Error State -->\n", styles: ["/* ============================================================\n   ENTITY EXPLORER FORM - MAIN STYLES\n   A world-class exploration-focused entity intelligence hub\n   ============================================================ */\n\n/* CSS Variables */\n:host {\n    --nav-rail-width: 64px;\n    --header-height: 80px;\n    --detail-panel-width: 400px;\n\n    --bg-primary: var(--mj-bg-surface);\n    --bg-secondary: var(--mj-bg-surface-sunken);\n    --bg-tertiary: var(--mj-bg-surface-sunken);\n\n    --text-primary: var(--mj-text-primary);\n    --text-secondary: var(--mj-text-secondary);\n    --text-muted: var(--mj-text-muted);\n\n    --border-color: var(--mj-border-default);\n    --border-light: var(--mj-border-default);\n\n    --accent-color: var(--mj-brand-primary);\n    --accent-light: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    --accent-dark: var(--mj-brand-primary);\n\n    --success-color: var(--mj-status-success);\n    --warning-color: var(--mj-status-warning);\n    --danger-color: var(--mj-status-error);\n\n    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n\n    --radius-sm: 4px;\n    --radius-md: 8px;\n    --radius-lg: 12px;\n\n    --transition-fast: 150ms ease;\n    --transition-normal: 250ms ease;\n\n    display: block;\n    height: 100%;\n    width: 100%;\n}\n\n.entity-explorer {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--bg-secondary);\n    overflow: hidden;\n}\n\n/* ============================================================\n   HEADER BAR\n   ============================================================ */\n\n.explorer-header {\n    display: flex;\n    align-items: center;\n    gap: 24px;\n    padding: 16px 24px;\n    background: var(--bg-primary);\n    border-bottom: 1px solid var(--border-color);\n    min-height: var(--header-height);\n}\n\n.entity-identity {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex: 1;\n    min-width: 0;\n}\n\n.entity-icon {\n    width: 48px;\n    height: 48px;\n    border-radius: var(--radius-md);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-size: 20px;\n    flex-shrink: 0;\n}\n\n.entity-info {\n    min-width: 0;\n    flex: 1;\n}\n\n.entity-title-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.entity-name {\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.status-badge {\n    padding: 2px 8px;\n    border-radius: 9999px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.status-badge.status-active {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.status-badge.status-deprecated {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.status-badge.status-disabled {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.entity-subtitle {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 4px;\n    font-size: 13px;\n    color: var(--text-secondary);\n}\n\n.schema-table {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--text-muted);\n}\n\n.separator {\n    color: var(--border-color);\n}\n\n.entity-description {\n    color: var(--text-secondary);\n}\n\n/* Header Stats */\n.header-stats {\n    display: flex;\n    gap: 4px;\n}\n\n.stat-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 8px 16px;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    transition: background var(--transition-fast);\n}\n\n.stat-item:hover {\n    background: var(--bg-tertiary);\n}\n\n.stat-item i {\n    font-size: 16px;\n    color: var(--text-muted);\n    margin-bottom: 4px;\n}\n\n.stat-value {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.stat-label {\n    font-size: 11px;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n/* ============================================================\n   MAIN BODY (NAV RAIL + CANVAS)\n   ============================================================ */\n\n.explorer-body {\n    display: flex;\n    flex: 1;\n    overflow: hidden;\n}\n\n/* Navigation Rail - Minimalist Icon-First Design */\n.nav-rail {\n    width: var(--nav-rail-width);\n    background: var(--bg-primary);\n    border-right: 1px solid var(--border-color);\n    display: flex;\n    flex-direction: column;\n    padding: 8px 0;\n    flex-shrink: 0;\n    gap: 2px;\n}\n\n.nav-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 12px 4px 8px 4px;\n    margin: 0 8px;\n    border: none;\n    background: transparent;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    transition: all var(--transition-fast);\n    position: relative;\n    color: var(--text-muted);\n    min-height: 54px;\n}\n\n.nav-item i {\n    font-size: 18px;\n    margin-bottom: 4px;\n    transition: transform var(--transition-fast);\n}\n\n.nav-label {\n    font-size: 9px;\n    font-weight: 500;\n    letter-spacing: 0.2px;\n    white-space: nowrap;\n    text-align: center;\n    line-height: 1;\n    opacity: 0.9;\n}\n\n.nav-badge {\n    position: absolute;\n    top: 4px;\n    right: 4px;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 5px;\n    background: var(--accent-color);\n    color: white;\n    font-size: 10px;\n    font-weight: 600;\n    border-radius: 9999px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n.nav-item:hover {\n    background: var(--bg-tertiary);\n    color: var(--text-primary);\n}\n\n.nav-item:hover i {\n    transform: scale(1.1);\n}\n\n.nav-item.active {\n    background: var(--accent-light);\n    color: var(--accent-color);\n}\n\n.nav-item.active i {\n    transform: scale(1.05);\n}\n\n.nav-item.active::before {\n    content: '';\n    position: absolute;\n    left: -8px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 3px;\n    height: 28px;\n    background: var(--accent-color);\n    border-radius: 0 3px 3px 0;\n}\n\n/* ============================================================\n   MAIN CANVAS\n   ============================================================ */\n\n.main-canvas {\n    flex: 1;\n    overflow: auto;\n    transition: margin-right var(--transition-normal);\n    display: flex;\n    flex-direction: column;\n}\n\n.main-canvas.panel-open {\n    margin-right: var(--detail-panel-width);\n}\n\n/* Sections */\n.section {\n    padding: 24px;\n}\n\n.section-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 20px;\n}\n\n.section-content {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n}\n\n/* Search Box */\n.search-box {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 10px 16px;\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    width: 300px;\n}\n\n.search-box i {\n    color: var(--text-muted);\n}\n\n.search-box input {\n    flex: 1;\n    border: none;\n    background: transparent;\n    font-size: 14px;\n    outline: none;\n    color: var(--text-primary);\n}\n\n.search-box input::placeholder {\n    color: var(--text-muted);\n}\n\n/* View Toggle */\n.view-toggle {\n    display: flex;\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    overflow: hidden;\n}\n\n.toggle-btn {\n    padding: 8px 16px;\n    border: none;\n    background: var(--bg-primary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    transition: all var(--transition-fast);\n}\n\n.toggle-btn:not(:last-child) {\n    border-right: 1px solid var(--border-color);\n}\n\n.toggle-btn:hover {\n    background: var(--bg-tertiary);\n}\n\n.toggle-btn.active {\n    background: var(--accent-color);\n    color: white;\n}\n\n/* Depth Selector */\n.depth-selector {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-left: auto;\n}\n\n.depth-label {\n    font-size: 13px;\n    color: var(--text-secondary);\n    font-weight: 500;\n}\n\n.depth-buttons {\n    display: flex;\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    overflow: hidden;\n}\n\n.depth-btn {\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: var(--bg-primary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    font-size: 13px;\n    font-weight: 500;\n    transition: all var(--transition-fast);\n}\n\n.depth-btn:not(:last-child) {\n    border-right: 1px solid var(--border-color);\n}\n\n.depth-btn:hover {\n    background: var(--bg-tertiary);\n}\n\n.depth-btn.active {\n    background: var(--accent-color);\n    color: white;\n}\n\n/* Header Controls (view mode + expand/collapse) */\n.header-controls {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.view-mode-toggle {\n    display: flex;\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    overflow: hidden;\n}\n\n.expand-collapse-controls {\n    display: flex;\n    gap: 4px;\n}\n\n.control-btn {\n    padding: 6px 10px;\n    border: 1px solid var(--border-color);\n    background: var(--bg-primary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    border-radius: var(--radius-sm);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    transition: all var(--transition-fast);\n}\n\n.control-btn:hover:not(:disabled) {\n    background: var(--bg-tertiary);\n    color: var(--text-primary);\n}\n\n.control-btn:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n/* Fields List View - Modern Design */\n.fields-list-view {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--bg-primary);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.list-header {\n    display: grid;\n    grid-template-columns: 50px 1fr 1fr 100px 70px 100px 100px 1fr;\n    gap: 12px;\n    padding: 12px 20px;\n    background: var(--bg-secondary);\n    border-bottom: 2px solid var(--border-color);\n    position: sticky;\n    top: 0;\n    z-index: 10;\n}\n\n.list-header .list-col {\n    font-size: 11px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    color: var(--text-secondary);\n}\n\n.list-header .list-col.sortable {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: color var(--transition-fast);\n    user-select: none;\n}\n\n.list-header .list-col.sortable:hover {\n    color: var(--accent-color);\n}\n\n.list-header .list-col.sortable.sorted {\n    color: var(--accent-color);\n}\n\n.sort-icon {\n    font-size: 10px;\n    opacity: 0.4;\n    transition: opacity var(--transition-fast);\n}\n\n.list-col.sortable:hover .sort-icon {\n    opacity: 0.7;\n}\n\n.list-col.sortable.sorted .sort-icon {\n    opacity: 1;\n}\n\n.list-body {\n    flex: 1;\n    overflow-y: auto;\n}\n\n.list-row {\n    display: grid;\n    grid-template-columns: 50px 1fr 1fr 100px 70px 100px 100px 1fr;\n    gap: 12px;\n    padding: 14px 20px;\n    border-bottom: 1px solid var(--border-light);\n    cursor: pointer;\n    transition: all var(--transition-fast);\n    align-items: center;\n}\n\n.list-row:hover {\n    background: var(--bg-secondary);\n}\n\n.list-row.selected {\n    background: var(--accent-light);\n    border-left: 3px solid var(--accent-color);\n    padding-left: 17px;\n}\n\n.list-row:last-child {\n    border-bottom: none;\n}\n\n/* Column-specific styling */\n.col-seq {\n    text-align: center;\n}\n\n.seq-num {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    background: var(--bg-tertiary);\n    border-radius: 50%;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--text-secondary);\n}\n\n.list-row:hover .seq-num,\n.list-row.selected .seq-num {\n    background: var(--accent-color);\n    color: white;\n}\n\n.col-name {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    min-width: 0;\n}\n\n.field-type-icon {\n    color: var(--accent-color);\n    font-size: 16px;\n    width: 20px;\n    flex-shrink: 0;\n}\n\n.field-name-text {\n    font-weight: 500;\n    color: var(--text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n}\n\n.col-display-name {\n    min-width: 0;\n}\n\n.display-name-text {\n    font-weight: 500;\n    color: var(--text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.type-tag {\n    display: inline-block;\n    padding: 4px 10px;\n    background: var(--bg-tertiary);\n    border-radius: 20px;\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--text-secondary);\n    font-family: 'SF Mono', 'Consolas', monospace;\n}\n\n.length-value {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--text-primary);\n}\n\n.length-value.muted {\n    color: var(--text-muted);\n}\n\n.required-indicator {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 11px;\n    font-weight: 500;\n    padding: 4px 8px;\n    border-radius: 4px;\n}\n\n.required-indicator.required {\n    color: var(--danger-color);\n    background: color-mix(in srgb, var(--mj-status-error) 10%, transparent);\n}\n\n.required-indicator.required i {\n    color: var(--danger-color);\n}\n\n.required-indicator.optional {\n    color: var(--text-muted);\n    background: transparent;\n}\n\n.flag-badges {\n    display: flex;\n    gap: 6px;\n    flex-wrap: wrap;\n}\n\n.flag-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 8px;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.flag-badge.pk {\n    background: var(--mj-status-warning);\n    color: var(--mj-bg-surface);\n}\n\n.flag-badge.fk {\n    background: var(--mj-brand-primary);\n    color: white;\n}\n\n.flag-badge.encrypted {\n    background: var(--mj-brand-primary);\n    color: white;\n}\n\n.col-desc {\n    min-width: 0;\n}\n\n.desc-text {\n    font-size: 13px;\n    color: var(--text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: block;\n}\n\n.list-empty {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n    color: var(--text-muted);\n    gap: 12px;\n}\n\n.list-empty i {\n    font-size: 32px;\n    opacity: 0.5;\n}\n\n.list-empty span {\n    font-size: 14px;\n}\n\n/* ============================================================\n   OVERVIEW SECTION\n   ============================================================ */\n\n.stats-cards {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 16px;\n}\n\n.stat-card {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 16px;\n    position: relative;\n    transition: all var(--transition-fast);\n}\n\n.stat-card.clickable {\n    cursor: pointer;\n}\n\n.stat-card.clickable:hover {\n    border-color: var(--accent-color);\n    box-shadow: var(--shadow-md);\n    transform: translateY(-2px);\n}\n\n.stat-card.clickable:hover .stat-card-action {\n    opacity: 1;\n    transform: translateX(0);\n}\n\n.stat-card-action {\n    position: absolute;\n    right: 16px;\n    top: 50%;\n    transform: translateY(-50%) translateX(-4px);\n    color: var(--accent-color);\n    opacity: 0;\n    transition: all var(--transition-fast);\n}\n\n.stat-card-action i {\n    font-size: 14px;\n}\n\n.stat-card-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: var(--text-secondary);\n    font-size: 13px;\n    margin-bottom: 12px;\n}\n\n.stat-card-header i {\n    font-size: 14px;\n}\n\n.stat-card-body .stat-main {\n    font-size: 32px;\n    font-weight: 700;\n    color: var(--text-primary);\n    line-height: 1;\n    margin-bottom: 8px;\n}\n\n.stat-card-body .stat-details {\n    display: flex;\n    gap: 12px;\n    font-size: 12px;\n    color: var(--text-muted);\n}\n\n/* Info Panels */\n.info-panel {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin: 0 0 16px 0;\n}\n\n.panel-title i {\n    color: var(--accent-color);\n}\n\n/* Capability Tags */\n.capability-tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n}\n\n.capability-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border-radius: 9999px;\n    font-size: 12px;\n    font-weight: 500;\n}\n\n.capability-tag i {\n    font-size: 10px;\n}\n\n.capability-tag.disabled {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n/* Info Grid */\n.info-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 12px;\n}\n\n.info-item {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.info-label {\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n}\n\n.info-value {\n    font-size: 14px;\n    color: var(--text-primary);\n}\n\n.info-value.code {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 13px;\n    color: var(--accent-dark);\n}\n\n/* ============================================================\n   FIELDS SECTION\n   ============================================================ */\n\n.fields-content {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.field-groups {\n    display: flex;\n    flex-direction: column;\n}\n\n.field-group {\n    border-bottom: 1px solid var(--border-light);\n}\n\n.field-group:last-child {\n    border-bottom: none;\n}\n\n.group-header {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 14px 20px;\n    cursor: pointer;\n    transition: background var(--transition-fast);\n    user-select: none;\n    background: var(--bg-secondary);\n    border-left: 3px solid var(--accent-color);\n}\n\n.group-header:hover {\n    background: var(--bg-tertiary);\n}\n\n.expand-icon {\n    font-size: 10px;\n    color: var(--text-muted);\n    width: 16px;\n    transition: transform var(--transition-fast);\n}\n\n.group-icon {\n    font-size: 16px;\n    color: var(--accent-color);\n    width: 20px;\n    text-align: center;\n}\n\n.group-label {\n    flex: 1;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--text-primary);\n    letter-spacing: 0.01em;\n    text-transform: uppercase;\n}\n\n.group-count {\n    padding: 3px 10px;\n    background: var(--accent-light);\n    border-radius: 9999px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--accent-color);\n}\n\n.group-content {\n    border-top: 1px solid var(--border-light);\n    background: var(--bg-secondary);\n}\n\n.field-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 20px 12px 48px;\n    cursor: pointer;\n    transition: background var(--transition-fast);\n    border-bottom: 1px solid var(--border-light);\n}\n\n.field-item:last-child {\n    border-bottom: none;\n}\n\n.field-item:hover {\n    background: var(--accent-light);\n}\n\n.field-item.selected {\n    background: var(--accent-light);\n    border-left: 3px solid var(--accent-color);\n    padding-left: 45px;\n}\n\n.field-icon {\n    width: 28px;\n    height: 28px;\n    border-radius: var(--radius-sm);\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    color: var(--text-muted);\n    flex-shrink: 0;\n}\n\n.field-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.field-name {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--text-primary);\n}\n\n.field-db-name {\n    font-size: 11px;\n    font-family: 'SF Mono', 'Consolas', monospace;\n    color: var(--text-secondary);\n    margin-top: 2px;\n}\n\n.field-meta {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 2px;\n    font-size: 12px;\n}\n\n.field-type {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    color: var(--text-muted);\n}\n\n.field-nullable {\n    color: var(--danger-color);\n}\n\n.field-related {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    color: var(--accent-color);\n    cursor: pointer;\n}\n\n.field-related:hover {\n    text-decoration: underline;\n}\n\n.field-badges {\n    display: flex;\n    gap: 4px;\n}\n\n.badge {\n    padding: 2px 6px;\n    border-radius: var(--radius-sm);\n    font-size: 10px;\n    font-weight: 600;\n}\n\n.badge.pk {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.badge.fk {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.badge.encrypted {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n/* ============================================================\n   RELATIONSHIPS SECTION\n   ============================================================ */\n\n.relationships-graph {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    min-height: 600px;\n    height: calc(100vh - 280px);\n    max-height: 800px;\n    display: flex;\n    align-items: stretch;\n    justify-content: stretch;\n    overflow: hidden;\n}\n\n.relationships-graph mj-entity-erd,\n.relationships-graph mj-erd-composite {\n    width: 100%;\n    height: 100%;\n    flex: 1;\n}\n\n/* ERD Splitter for details panel */\n.relationships-graph .erd-splitter {\n    width: 100%;\n    height: 100%;\n}\n\n.relationships-graph mj-entity-details {\n    height: 100%;\n    overflow: auto;\n}\n\n.graph-placeholder {\n    text-align: center;\n    color: var(--text-muted);\n}\n\n.graph-placeholder i {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.graph-placeholder p {\n    margin: 0;\n}\n\n.graph-placeholder .hint {\n    font-size: 12px;\n    margin-top: 8px;\n}\n\n.relationships-list {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n}\n\n.relationship-group {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.relationship-group-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 14px 20px;\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary);\n    background: var(--bg-tertiary);\n    border-bottom: 1px solid var(--border-color);\n}\n\n.relationship-group-title i {\n    color: var(--accent-color);\n}\n\n.relationship-items {\n    display: flex;\n    flex-direction: column;\n}\n\n.relationship-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 20px;\n    cursor: pointer;\n    transition: background var(--transition-fast);\n    border-bottom: 1px solid var(--border-light);\n}\n\n.relationship-item:last-child {\n    border-bottom: none;\n}\n\n.relationship-item:hover {\n    background: var(--accent-light);\n}\n\n.relationship-item.hidden {\n    display: none;\n}\n\n.rel-icon {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    background: var(--accent-light);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--accent-color);\n    font-size: 12px;\n}\n\n.rel-info {\n    flex: 1;\n}\n\n.rel-entity {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--accent-color);\n    cursor: pointer;\n}\n\n.rel-entity:hover {\n    text-decoration: underline;\n}\n\n.rel-field {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 2px;\n}\n\n.rel-meta {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.rel-type,\n.rel-display-type {\n    padding: 2px 8px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-sm);\n    font-size: 11px;\n    color: var(--text-muted);\n}\n\n.rel-bundle {\n    color: var(--success-color);\n}\n\n/* Grouped relationship styles */\n.relationship-group-title .group-count {\n    margin-left: auto;\n    background: var(--accent-light);\n    color: var(--accent-color);\n    padding: 2px 10px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.relationship-items.grouped {\n    padding: 8px 0;\n}\n\n.relationship-item-grouped {\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--border-light);\n}\n\n.relationship-item-grouped:last-child {\n    border-bottom: none;\n}\n\n.rel-header {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 10px;\n}\n\n.rel-icon.outgoing {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.rel-icon.incoming {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.rel-entity-name {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.rel-fields-chips {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    padding-left: 44px; /* Align with entity name (icon width + gap) */\n}\n\n.field-chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 5px 12px;\n    border-radius: 16px;\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all var(--transition-fast);\n}\n\n.field-chip i {\n    font-size: 10px;\n}\n\n.field-chip.outgoing {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border: 1px solid var(--mj-brand-primary);\n}\n\n.field-chip.outgoing:hover {\n    background: var(--mj-brand-primary);\n    color: white;\n}\n\n.field-chip.incoming {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border: 1px solid var(--mj-status-success);\n}\n\n.field-chip.incoming:hover {\n    background: var(--mj-status-success);\n    color: white;\n}\n\n.field-chip .bundle-icon {\n    font-size: 9px;\n    margin-left: 2px;\n    opacity: 0.8;\n}\n\n/* ============================================================\n   PERMISSIONS SECTION\n   ============================================================ */\n\n.permissions-matrix {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.matrix-table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.matrix-table th,\n.matrix-table td {\n    padding: 12px 16px;\n    text-align: left;\n    border-bottom: 1px solid var(--border-light);\n}\n\n.matrix-table th {\n    background: var(--bg-tertiary);\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n}\n\n.matrix-table th.center,\n.matrix-table td.center {\n    text-align: center;\n}\n\n.matrix-table tbody tr:hover {\n    background: var(--bg-secondary);\n}\n\n.role-name {\n    font-weight: 500;\n    color: var(--text-primary);\n}\n\n.permission-icon {\n    font-size: 14px;\n}\n\n.permission-icon.granted {\n    color: var(--success-color);\n}\n\n.permission-icon.denied {\n    color: var(--text-muted);\n}\n\n.rls-info {\n    display: flex;\n    gap: 4px;\n}\n\n.rls-badge {\n    width: 20px;\n    height: 20px;\n    border-radius: var(--radius-sm);\n    background: var(--warning-color);\n    color: white;\n    font-size: 10px;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.no-rls {\n    color: var(--text-muted);\n    font-size: 12px;\n}\n\n/* API Capabilities */\n.api-capabilities {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.capability-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n    gap: 12px;\n}\n\n.capability-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n    color: var(--text-muted);\n}\n\n.capability-item i {\n    font-size: 12px;\n}\n\n.capability-item.enabled {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.capability-item.enabled i {\n    color: var(--success-color);\n}\n\n/* ============================================================\n   LINEAGE SECTION\n   ============================================================ */\n\n.lineage-diagram {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 24px;\n    padding: 40px;\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n}\n\n.lineage-stage {\n    text-align: center;\n}\n\n.lineage-stage h4 {\n    font-size: 12px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n    margin: 0 0 12px 0;\n}\n\n.lineage-items {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.lineage-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n    color: var(--text-secondary);\n}\n\n.lineage-item i {\n    color: var(--accent-color);\n}\n\n.lineage-arrow {\n    font-size: 24px;\n    color: var(--text-muted);\n}\n\n.entity-node .entity-box {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    padding: 24px 32px;\n    background: var(--accent-color);\n    color: white;\n    border-radius: var(--radius-lg);\n    font-weight: 600;\n}\n\n.entity-node .entity-box i {\n    font-size: 24px;\n}\n\n.tracking-config {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.config-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 12px;\n}\n\n.config-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n    color: var(--text-muted);\n}\n\n.config-item.enabled {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.config-item .config-label {\n    color: var(--text-muted);\n}\n\n.config-item .config-value {\n    font-weight: 500;\n    color: var(--text-primary);\n}\n\n.tracking-config .helper-text {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin: -8px 0 12px 0;\n}\n\n/* ============================================================\n   HISTORY SECTION\n   ============================================================ */\n\n.history-config {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.config-status {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n}\n\n.config-status i {\n    font-size: 24px;\n    color: var(--text-muted);\n    margin-top: 2px;\n}\n\n.config-status.enabled i {\n    color: var(--success-color);\n}\n\n.config-text strong {\n    display: block;\n    font-size: 16px;\n    color: var(--text-primary);\n    margin-bottom: 4px;\n}\n\n.config-text span {\n    font-size: 14px;\n    color: var(--text-secondary);\n}\n\n.history-info {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 16px;\n}\n\n.info-card {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.info-card h4 {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    color: var(--text-primary);\n    margin: 0 0 12px 0;\n}\n\n.info-card h4 i {\n    color: var(--accent-color);\n}\n\n.info-card p {\n    font-size: 14px;\n    color: var(--text-secondary);\n    line-height: 1.6;\n    margin: 0;\n}\n\n.info-card code {\n    background: var(--bg-tertiary);\n    padding: 2px 6px;\n    border-radius: var(--radius-sm);\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n}\n\n.audit-fields-list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n}\n\n.audit-fields-list li {\n    padding: 8px 0;\n    font-size: 14px;\n    color: var(--text-secondary);\n    border-bottom: 1px solid var(--border-light);\n}\n\n.audit-fields-list li:last-child {\n    border-bottom: none;\n}\n\n/* ============================================================\n   SETTINGS SECTION\n   ============================================================ */\n\n.settings-panel {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.settings-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.setting-item {\n    padding: 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n}\n\n.setting-name {\n    font-weight: 500;\n    color: var(--text-primary);\n    margin-bottom: 4px;\n}\n\n.setting-value {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n    word-break: break-all;\n}\n\n.setting-value-json {\n    margin-top: 8px;\n    border-radius: var(--radius-sm);\n    overflow: hidden;\n    border: 1px solid var(--border-color);\n    background: var(--mj-bg-surface-sunken);\n}\n\n.setting-value-json mj-code-editor {\n    display: block;\n    max-height: 300px;\n}\n\n.setting-value-json ::ng-deep .cm-editor {\n    font-size: 12px;\n    background: var(--mj-bg-surface-sunken);\n}\n\n.setting-value-json ::ng-deep .cm-gutters {\n    background: var(--mj-bg-surface-sunken);\n    border-right: 1px solid var(--border-color);\n}\n\n.setting-comment {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 8px;\n}\n\n.fts-config,\n.settings-section .config-grid {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.config-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.config-row .config-label {\n    width: 100px;\n    font-size: 12px;\n    color: var(--text-muted);\n}\n\n.config-row .config-value {\n    font-size: 14px;\n    color: var(--text-primary);\n}\n\n.config-row .config-value.code {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n}\n\n.config-row .config-value.enabled {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--success-color);\n}\n\n/* ============================================================\n   DETAIL PANEL (Slide-in from right)\n   ============================================================ */\n\n.detail-panel {\n    position: fixed;\n    top: 0;\n    right: 0;\n    width: var(--detail-panel-width);\n    height: 100%;\n    background: var(--bg-primary);\n    border-left: 1px solid var(--border-color);\n    box-shadow: var(--shadow-lg);\n    transform: translateX(100%);\n    transition: transform var(--transition-normal);\n    z-index: 100;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n.detail-panel.open {\n    transform: translateX(0);\n}\n\n.panel-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--border-color);\n    flex-shrink: 0;\n}\n\n.panel-header h3 {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.close-btn {\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: transparent;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--text-muted);\n    transition: all var(--transition-fast);\n}\n\n.close-btn:hover {\n    background: var(--bg-tertiary);\n    color: var(--text-primary);\n}\n\n.panel-content {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n}\n\n.detail-section {\n    margin-bottom: 24px;\n}\n\n.detail-section:last-child {\n    margin-bottom: 0;\n}\n\n.detail-section h4 {\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin: 0 0 8px 0;\n}\n\n.detail-section h5 {\n    font-size: 12px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n    margin: 0 0 12px 0;\n}\n\n.detail-field-db-name {\n    font-size: 12px;\n    font-family: 'SF Mono', 'Consolas', monospace;\n    color: var(--text-secondary);\n    margin-top: 4px;\n    margin-bottom: 4px;\n}\n\n.field-description {\n    font-size: 14px;\n    color: var(--text-secondary);\n    line-height: 1.5;\n    margin: 0;\n}\n\n.detail-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n}\n\n.detail-item {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.detail-item .label {\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n}\n\n.detail-item .value {\n    font-size: 14px;\n    color: var(--text-primary);\n}\n\n.detail-item .value.code {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n}\n\n.detail-item .value.link {\n    color: var(--accent-color);\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.detail-item .value.link:hover {\n    text-decoration: underline;\n}\n\n.value-list {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n.value-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n}\n\n.value-code {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 11px;\n    color: var(--accent-dark);\n    background: var(--bg-primary);\n    padding: 2px 6px;\n    border-radius: var(--radius-sm);\n}\n\n.value-display {\n    color: var(--text-primary);\n}\n\n/* ============================================================\n   EMPTY STATES\n   ============================================================ */\n\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px;\n    text-align: center;\n    color: var(--text-muted);\n}\n\n.empty-state i {\n    font-size: 32px;\n    margin-bottom: 12px;\n    opacity: 0.5;\n}\n\n.empty-state p {\n    margin: 0;\n    font-size: 14px;\n}\n\n/* ============================================================\n   LOADING / ERROR STATES\n   ============================================================ */\n\n.explorer-loading,\n.explorer-error,\n.explorer-empty {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    padding: 40px;\n    text-align: center;\n    color: var(--text-muted);\n}\n\n.explorer-error i,\n.explorer-empty i {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.explorer-error {\n    color: var(--danger-color);\n}\n\n.explorer-error i {\n    opacity: 1;\n}\n\n/* ============================================================\n   IS-A TYPE HIERARCHY & VIRTUAL ENTITY STYLES\n   ============================================================ */\n\n/* Badge variants for header */\n.isa-badge {\n    font-size: 11px;\n    font-weight: 600;\n    padding: 3px 10px;\n    border-radius: 12px;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    cursor: default;\n    white-space: nowrap;\n}\n\n.isa-badge.virtual {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.isa-badge.child-type {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.isa-badge.child-type:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 22%, transparent);\n}\n\n.isa-badge.parent-type {\n    background: color-mix(in srgb, var(--mj-status-success) 12%, transparent);\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 25%, transparent);\n}\n\n.isa-badge.overlapping {\n    background: color-mix(in srgb, var(--mj-status-warning) 12%, transparent);\n    color: var(--mj-status-warning);\n    border: 1px solid color-mix(in srgb, var(--mj-status-warning) 25%, transparent);\n}\n\n/* Breadcrumb under title */\n.isa-breadcrumb {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n    margin-top: 2px;\n    padding: 2px 0;\n}\n\n.isa-breadcrumb i {\n    font-size: 11px;\n    opacity: 0.7;\n}\n\n/* IS-A Panel (overview section) */\n.isa-panel {\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.isa-info-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--text-primary);\n}\n\n.isa-info-row.virtual-info {\n    background: color-mix(in srgb, var(--mj-brand-primary) 6%, transparent);\n}\n\n.isa-info-row.virtual-info i {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.isa-info-row .code {\n    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;\n    font-size: 12px;\n    background: color-mix(in srgb, var(--mj-text-primary) 6%, transparent);\n    padding: 1px 6px;\n    border-radius: 3px;\n    color: var(--mj-brand-primary);\n}\n\n/* Inheritance chain */\n.isa-chain {\n    padding: 8px 0;\n}\n\n.isa-chain-label {\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n    margin-bottom: 8px;\n}\n\n.isa-chain-nodes {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-wrap: wrap;\n    padding: 6px 0;\n}\n\n.isa-node {\n    display: inline-flex;\n    align-items: center;\n    padding: 5px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n}\n\n.isa-node.current {\n    background: var(--mj-brand-primary);\n    color: white;\n}\n\n.isa-node.parent {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.isa-arrow {\n    color: var(--text-muted);\n    font-size: 11px;\n}\n\n.isa-inherited-fields {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 8px;\n    padding-top: 8px;\n    border-top: 1px solid var(--border-color);\n}\n\n.isa-inherited-fields i {\n    font-size: 12px;\n    color: var(--mj-brand-primary);\n}\n\n/* Child types list */\n.isa-children {\n    padding: 8px 0;\n}\n\n.isa-child-list {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    padding: 4px 0;\n}\n\n.isa-child-chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 5px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    background: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n}\n\n/* Clickable elements */\n.clickable {\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.clickable:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.isa-node.parent.clickable:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n.isa-child-chip.clickable:hover {\n    background: color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-success) 35%, transparent);\n}\n\n/* Field inherited badge (card and list views) */\n.badge.inherited,\n.flag-badge.inherited {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    font-size: 10px;\n    font-weight: 600;\n    gap: 3px;\n}\n\n.flag-badge.inherited {\n    display: inline-flex;\n    align-items: center;\n    gap: 3px;\n    padding: 1px 6px;\n    border-radius: 4px;\n    font-size: 10px;\n}\n\n.flag-badge.inherited i {\n    font-size: 9px;\n}\n\n/* IS-A source section in field detail panel */\n.isa-source-section {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n    border-radius: 6px;\n    padding: 12px;\n    margin: -4px -12px 8px;\n}\n\n.isa-source-section h5 {\n    color: var(--mj-brand-primary);\n}\n\n.isa-source-section h5 i {\n    margin-right: 4px;\n}\n\n/* IS-A settings panel */\n.isa-settings-panel {\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.isa-settings-panel .link {\n    color: var(--mj-brand-primary);\n    cursor: pointer;\n    transition: color 0.15s ease;\n}\n\n.isa-settings-panel .link:hover {\n    color: var(--mj-brand-primary);\n    text-decoration: underline;\n}\n\n.isa-settings-panel .muted {\n    color: var(--text-muted);\n}\n\n/* IS-A Field Inspector */\n.isa-field-inspector {\n    margin-top: 12px;\n    padding-top: 12px;\n    border-top: 1px solid var(--border-color);\n}\n\n.isa-field-inspector > .isa-chain-label {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.isa-inspector-groups {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    margin-top: 8px;\n}\n\n.isa-inspector-group {\n    border-radius: 6px;\n    padding: 8px 12px;\n    border: 1px solid var(--border-color);\n}\n\n.isa-inspector-group.own {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.isa-inspector-group.inherited {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.isa-inspector-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 6px;\n}\n\n.isa-inspector-entity {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.isa-inspector-count {\n    font-size: 11px;\n    color: var(--text-muted);\n    font-weight: 500;\n}\n\n.isa-inspector-fields {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n}\n\n.isa-inspector-field {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 11px;\n    padding: 2px 8px;\n    border-radius: 4px;\n    background: color-mix(in srgb, var(--mj-text-primary) 4%, transparent);\n    color: var(--text-primary);\n}\n\n.isa-inspector-type {\n    font-size: 10px;\n    color: var(--text-muted);\n    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;\n}\n\n/* Sibling chips */\n.isa-siblings {\n    padding: 8px 0;\n}\n\n.isa-sibling-chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 5px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, transparent);\n    color: var(--mj-status-warning);\n    border: 1px solid color-mix(in srgb, var(--mj-status-warning) 20%, transparent);\n}\n\n.isa-sibling-chip.clickable:hover {\n    background: color-mix(in srgb, var(--mj-status-warning) 20%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n}\n\n/* Child count badge */\n.isa-child-count {\n    font-size: 11px;\n    background: color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n    padding: 1px 6px;\n    border-radius: 8px;\n    margin-left: 2px;\n    font-weight: 600;\n}\n\n.isa-child-count i {\n    font-size: 10px;\n}\n\n/* ============================================================\n   DATA SECTION\n   ============================================================ */\n.data-section {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    padding: 0;\n    overflow: hidden;\n}\n\n.data-viewer-container {\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n}\n\n/* ============================================================\n   ORGANIC KEYS SECTION\n   ============================================================ */\n\n.organic-key-cards {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    padding: 4px 0;\n}\n\n.organic-key-card {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 16px;\n    transition: border-color 0.15s ease;\n}\n\n.organic-key-card:hover {\n    border-color: var(--mj-border-strong);\n}\n\n.organic-key-card.incoming {\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.organic-key-card-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.organic-key-name {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.organic-key-icon {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.organic-key-badges {\n    display: flex;\n    gap: 6px;\n    flex-shrink: 0;\n}\n\n.organic-key-badge {\n    display: inline-flex;\n    align-items: center;\n    padding: 2px 8px;\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 500;\n    font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.organic-key-badge.strategy {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.organic-key-badge.fields {\n    background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-info-text, var(--mj-status-info));\n}\n\n.organic-key-description {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    margin: 0 0 12px 0;\n    line-height: 1.4;\n}\n\n.organic-key-targets {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.organic-key-target {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n    padding: 10px 12px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 6px;\n    font-size: 13px;\n    transition: background 0.15s ease, border-color 0.15s ease;\n}\n\n.organic-key-target.clickable,\n.organic-key-card.clickable {\n    cursor: pointer;\n}\n\n.organic-key-target.clickable:hover,\n.organic-key-card.clickable:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.target-main {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    min-width: 0;\n    flex: 1;\n}\n\n.target-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.target-entity-icon {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    width: 16px;\n    text-align: center;\n}\n\n.target-entity-name {\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    min-width: 0;\n}\n\n.target-nav-icon {\n    font-size: 10px;\n    color: var(--mj-text-disabled);\n    margin-left: 4px;\n    transition: color 0.15s ease;\n}\n\n.organic-key-target.clickable:hover .target-nav-icon,\n.organic-key-card.clickable:hover .target-nav-icon {\n    color: var(--mj-brand-primary);\n}\n\n.target-match-detail {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding-left: 24px;\n}\n\n.match-type-badge {\n    display: inline-flex;\n    align-items: center;\n    padding: 2px 8px;\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.match-type-badge.direct {\n    background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-success-text, var(--mj-status-success));\n}\n\n.match-type-badge.transitive {\n    background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-warning-text, var(--mj-status-warning));\n}\n\n.match-fields {\n    font-size: 11px;\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    color: var(--mj-text-secondary);\n}\n\n.organic-key-detail-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 4px 0;\n    font-size: 12px;\n}\n\n.detail-label {\n    color: var(--mj-text-muted);\n    font-weight: 500;\n    flex-shrink: 0;\n}\n\n.detail-value {\n    color: var(--mj-text-secondary);\n    font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.empty-state-card {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 48px 24px;\n    text-align: center;\n    color: var(--mj-text-muted);\n}\n\n.empty-state-icon {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.3;\n}\n\n.empty-state-card h3 {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    margin: 0 0 8px 0;\n}\n\n.empty-state-card p {\n    font-size: 13px;\n    line-height: 1.5;\n    max-width: 500px;\n    margin: 0;\n}\n", ".k-pane {\n  background-color: var(--mj-bg-surface);\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: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\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.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@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: var(--mj-bg-surface);\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: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\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: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\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: var(--mj-brand-primary);\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header .collapse-icon {\n  color: var(--mj-text-muted);\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: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-header {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: var(--mj-brand-primary);\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\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 var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\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: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\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 var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: var(--mj-text-muted);\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: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\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: var(--mj-status-warning);\n  color: var(--mj-text-primary);\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: var(--mj-status-success);\n  color: var(--mj-text-inverse);\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: var(--mj-text-muted);\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-entity-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!isExplorerLoading && entity) {\n  <div class=\"entity-explorer\">\n    <!-- ============================================================ -->\n    <!-- HEADER BAR -->\n    <!-- ============================================================ -->\n    <header class=\"explorer-header\">\n      <div class=\"entity-identity\">\n        <div class=\"entity-icon\" [style.background-color]=\"'var(--mj-brand-primary)'\">\n          <i [class]=\"entityIcon\"></i>\n        </div>\n        <div class=\"entity-info\">\n          <div class=\"entity-title-row\">\n            <h1 class=\"entity-name\">{{ entityDisplayName }}</h1>\n            <span class=\"status-badge\" [ngClass]=\"statusClass\">\n              {{ entity.Status }}\n            </span>\n            @if (IsVirtualEntity) {\n              <span class=\"status-badge isa-badge virtual\">\n                <i class=\"fa-solid fa-eye\"></i> Virtual\n              </span>\n            }\n            @if (IsChildType) {\n              <span class=\"status-badge isa-badge child-type\" (click)=\"NavigateToEntity(ParentChain[0])\" title=\"Click to navigate to parent entity\">\n                <i class=\"fa-solid fa-arrow-up\"></i> IS-A {{ ParentChain[0]?.Name }}\n              </span>\n            }\n            @if (IsParentType) {\n              <span class=\"status-badge isa-badge parent-type\">\n                <i class=\"fa-solid fa-sitemap\"></i> {{ ChildEntities.length }} child type{{ ChildEntities.length !== 1 ? 's' : '' }}\n              </span>\n              @if (HasOverlappingSubtypes) {\n                <span class=\"status-badge isa-badge overlapping\" title=\"Multiple child types can coexist for a single parent record\">\n                  <i class=\"fa-solid fa-clone\"></i> Overlapping Subtypes\n                </span>\n              }\n            }\n          </div>\n          @if (IsChildType) {\n            <div class=\"isa-breadcrumb\">\n              <i class=\"fa-solid fa-layer-group\"></i>\n              {{ IsaBreadcrumb }}\n            </div>\n          }\n          <div class=\"entity-subtitle\">\n            <span class=\"schema-table\">{{ entity.SchemaName }}.{{ entity.BaseTable }}</span>\n            <span class=\"separator\">|</span>\n            @if (entity.Description) {\n              <span class=\"entity-description\" [title]=\"entity.Description\">\n                {{ entity.Description | slice:0:80 }}{{ entity.Description.length > 80 ? '...' : '' }}\n              </span>\n            }\n          </div>\n        </div>\n      </div>\n      <div class=\"header-stats\">\n        <div class=\"stat-item\" (click)=\"setActiveSection('fields')\">\n          <i class=\"fa-solid fa-table-columns\"></i>\n          <span class=\"stat-value\">{{ stats.fieldCount }}</span>\n          <span class=\"stat-label\">Fields</span>\n        </div>\n        <div class=\"stat-item\" (click)=\"setActiveSection('relationships')\">\n          <i class=\"fa-solid fa-link\"></i>\n          <span class=\"stat-value\">{{ stats.relationshipCount }}</span>\n          <span class=\"stat-label\">Relations</span>\n        </div>\n        <div class=\"stat-item\" (click)=\"setActiveSection('permissions')\">\n          <i class=\"fa-solid fa-shield-halved\"></i>\n          <span class=\"stat-value\">{{ stats.permissionCount }}</span>\n          <span class=\"stat-label\">Roles</span>\n        </div>\n        <div class=\"stat-item\" (click)=\"setActiveSection('data')\">\n          <i class=\"fa-solid fa-database\"></i>\n          @if (!isRowCountLoading) {\n            <span class=\"stat-value\">{{ formattedRowCount }}</span>\n          }\n          @if (isRowCountLoading) {\n            <span class=\"stat-value loading\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            </span>\n          }\n          <span class=\"stat-label\">Rows</span>\n        </div>\n      </div>\n    </header>\n    <!-- ============================================================ -->\n    <!-- MAIN CONTENT AREA -->\n    <!-- ============================================================ -->\n    <div class=\"explorer-body\">\n      <!-- Navigation Rail -->\n      <nav class=\"nav-rail\">\n        @for (item of navItems; track item) {\n          <button\n            class=\"nav-item\"\n            [class.active]=\"activeSection === item.id\"\n            (click)=\"setActiveSection(item.id)\"\n            [title]=\"item.label\">\n            <i [class]=\"item.icon\"></i>\n            <span class=\"nav-label\">{{ item.label }}</span>\n            @if (item.badge) {\n              <span class=\"nav-badge\">{{ item.badge }}</span>\n            }\n          </button>\n        }\n      </nav>\n      <!-- Main Canvas -->\n      <main class=\"main-canvas\" [class.panel-open]=\"detailPanelOpen\">\n        <!-- ============================================================ -->\n        <!-- OVERVIEW SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'overview') {\n          <section class=\"section overview-section\">\n            <div class=\"section-content\">\n              <!-- Stats Cards Row - Clickable to navigate to sections -->\n              <div class=\"stats-cards\">\n                <div class=\"stat-card clickable\" (click)=\"setActiveSection('fields')\" title=\"View all fields\">\n                  <div class=\"stat-card-header\">\n                    <i class=\"fa-solid fa-table-cells\"></i>\n                    <span>Fields</span>\n                  </div>\n                  <div class=\"stat-card-body\">\n                    <div class=\"stat-main\">{{ stats.fieldCount }}</div>\n                    <div class=\"stat-details\">\n                      <span>{{ stats.primaryKeyCount }} PKs</span>\n                      <span>{{ stats.foreignKeyCount }} FKs</span>\n                      @if (stats.encryptedFieldCount) {\n                        <span>{{ stats.encryptedFieldCount }} Encrypted</span>\n                      }\n                    </div>\n                  </div>\n                  <div class=\"stat-card-action\">\n                    <i class=\"fa-solid fa-arrow-right\"></i>\n                  </div>\n                </div>\n                <div class=\"stat-card clickable\" (click)=\"setActiveSection('relationships')\" title=\"View relationships\">\n                  <div class=\"stat-card-header\">\n                    <i class=\"fa-solid fa-diagram-project\"></i>\n                    <span>Relationships</span>\n                  </div>\n                  <div class=\"stat-card-body\">\n                    <div class=\"stat-main\">{{ stats.relationshipCount }}</div>\n                    <div class=\"stat-details\">\n                      <span>{{ groupedOutgoingRelationships.length }} Out</span>\n                      <span>{{ groupedIncomingRelationships.length }} In</span>\n                    </div>\n                  </div>\n                  <div class=\"stat-card-action\">\n                    <i class=\"fa-solid fa-arrow-right\"></i>\n                  </div>\n                </div>\n                <div class=\"stat-card clickable\" (click)=\"setActiveSection('permissions')\" title=\"View security settings\">\n                  <div class=\"stat-card-header\">\n                    <i class=\"fa-solid fa-lock\"></i>\n                    <span>Security</span>\n                  </div>\n                  <div class=\"stat-card-body\">\n                    <div class=\"stat-main\">{{ stats.permissionCount }}</div>\n                    <div class=\"stat-details\">\n                      <span>Roles configured</span>\n                    </div>\n                  </div>\n                  <div class=\"stat-card-action\">\n                    <i class=\"fa-solid fa-arrow-right\"></i>\n                  </div>\n                </div>\n                <div class=\"stat-card\">\n                  <div class=\"stat-card-header\">\n                    <i class=\"fa-solid fa-database\"></i>\n                    <span>Data</span>\n                  </div>\n                  <div class=\"stat-card-body\">\n                    <div class=\"stat-main\">{{ formattedRowCount }}</div>\n                    <div class=\"stat-details\">\n                      @if (entity.RowCountRunAt) {\n                        <span>Updated {{ entity.RowCountRunAt | date:'short' }}</span>\n                      }\n                      @if (!entity.RowCountRunAt) {\n                        <span>Row count</span>\n                      }\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <!-- Capabilities -->\n              <div class=\"info-panel capabilities-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-bolt\"></i>\n                  Capabilities\n                </h3>\n                <div class=\"capability-tags\">\n                  @for (cap of capabilitySummary; track cap) {\n                    <span class=\"capability-tag\">\n                      <i class=\"fa-solid fa-check\"></i>\n                      {{ cap }}\n                    </span>\n                  }\n                  @if (!entity.IncludeInAPI) {\n                    <span class=\"capability-tag disabled\">\n                      <i class=\"fa-solid fa-xmark\"></i>\n                      No API\n                    </span>\n                  }\n                </div>\n              </div>\n              <!-- IS-A Type Hierarchy -->\n              @if (HasISARelationship || IsVirtualEntity) {\n                <div class=\"info-panel isa-panel\">\n                  <h3 class=\"panel-title\">\n                    <i class=\"fa-solid fa-layer-group\"></i>\n                    Type Hierarchy\n                  </h3>\n                  @if (IsVirtualEntity) {\n                    <div class=\"isa-info-row virtual-info\">\n                      <i class=\"fa-solid fa-eye\"></i>\n                      <span>Virtual Entity \u2014 read-only view backed by <span class=\"code\">{{ entity.BaseView }}</span></span>\n                    </div>\n                  }\n                  @if (IsChildType) {\n                    <div class=\"isa-chain\">\n                      <div class=\"isa-chain-label\">Inheritance Chain</div>\n                      <div class=\"isa-chain-nodes\">\n                        <span class=\"isa-node current\">{{ entity.Name }}</span>\n                        @for (parent of ParentChain; track parent.ID) {\n                          <i class=\"fa-solid fa-arrow-right isa-arrow\"></i>\n                          <span class=\"isa-node parent clickable\" (click)=\"NavigateToEntity(parent)\" [title]=\"'Navigate to ' + parent.Name\">\n                            {{ parent.Name }}\n                          </span>\n                        }\n                      </div>\n                      <div class=\"isa-inherited-fields\">\n                        <i class=\"fa-solid fa-table-cells\"></i>\n                        <span>{{ InheritedFieldCount }} field{{ InheritedFieldCount !== 1 ? 's' : '' }} inherited from parent{{ ParentChain.length > 1 ? 's' : '' }}</span>\n                      </div>\n                    </div>\n                    <!-- IS-A Field Inspector: shows fields grouped by source entity -->\n                    @if (isaFieldGroups.length > 1) {\n                      <div class=\"isa-field-inspector\">\n                        <div class=\"isa-chain-label clickable\" (click)=\"isaFieldInspectorExpanded = !isaFieldInspectorExpanded\">\n                          <i class=\"fa-solid\" [ngClass]=\"isaFieldInspectorExpanded ? 'fa-chevron-down' : 'fa-chevron-right'\"></i>\n                          Field Source Inspector\n                        </div>\n                        @if (isaFieldInspectorExpanded) {\n                          <div class=\"isa-inspector-groups\">\n                            @for (group of isaFieldGroups; track group.EntityName) {\n                              <div class=\"isa-inspector-group\" [class.own]=\"group.Level === 0\" [class.inherited]=\"group.Level > 0\">\n                                <div class=\"isa-inspector-header\">\n                                  <span class=\"isa-inspector-entity\">\n                                    @if (group.Level === 0) {\n                                      <i class=\"fa-solid fa-circle\" style=\"color: var(--mj-brand-primary); font-size: 8px;\"></i>\n                                    } @else {\n                                      <i class=\"fa-solid fa-arrow-up\" style=\"color: var(--mj-brand-primary); font-size: 10px;\"></i>\n                                    }\n                                    {{ group.Label }}\n                                  </span>\n                                  <span class=\"isa-inspector-count\">{{ group.Fields.length }} field{{ group.Fields.length !== 1 ? 's' : '' }}</span>\n                                </div>\n                                <div class=\"isa-inspector-fields\">\n                                  @for (field of group.Fields; track field.ID) {\n                                    <span class=\"isa-inspector-field\" [title]=\"field.Description || field.Name\">\n                                      {{ field.DisplayName || field.Name }}\n                                      <span class=\"isa-inspector-type\">{{ field.Type }}</span>\n                                    </span>\n                                  }\n                                </div>\n                              </div>\n                            }\n                          </div>\n                        }\n                      </div>\n                    }\n                    <!-- Sibling Types -->\n                    @if (SiblingEntities.length > 0) {\n                      <div class=\"isa-siblings\">\n                        <div class=\"isa-chain-label\">Sibling Types ({{ ParentChain[0]?.AllowMultipleSubtypes ? 'overlapping' : 'disjoint' }} under {{ ParentChain[0]?.Name }})</div>\n                        <div class=\"isa-child-list\">\n                          @for (sibling of SiblingEntities; track sibling.ID) {\n                            <span class=\"isa-sibling-chip clickable\" (click)=\"NavigateToEntity(sibling)\" [title]=\"'Navigate to ' + sibling.Name\">\n                              <i class=\"fa-solid fa-arrows-left-right\"></i>\n                              {{ sibling.Name }}\n                            </span>\n                          }\n                        </div>\n                      </div>\n                    }\n                  }\n                  @if (IsParentType) {\n                    <div class=\"isa-children\">\n                      <div class=\"isa-chain-label\">Child Types</div>\n                      <div class=\"isa-child-list\">\n                        @for (childCount of childEntityCounts; track childCount.EntityName) {\n                          <span class=\"isa-child-chip clickable\" (click)=\"NavigateToEntity(childCount.EntityInfo)\" [title]=\"'Navigate to ' + childCount.EntityName\">\n                            <i class=\"fa-solid fa-arrow-down\"></i>\n                            {{ childCount.EntityName }}\n                            <span class=\"isa-child-count\">\n                              @if (childCount.IsLoading) {\n                                <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                              } @else {\n                                {{ childCount.RecordCount | number }}\n                              }\n                            </span>\n                          </span>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n              <!-- Database Info -->\n              <div class=\"info-panel database-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-server\"></i>\n                  Database\n                </h3>\n                <div class=\"info-grid\">\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Schema</span>\n                    <span class=\"info-value\">{{ entity.SchemaName }}</span>\n                  </div>\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Table</span>\n                    <span class=\"info-value\">{{ entity.BaseTable }}</span>\n                  </div>\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">View</span>\n                    <span class=\"info-value\">{{ entity.BaseView }}</span>\n                  </div>\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Delete Type</span>\n                    <span class=\"info-value\">{{ entity.DeleteType }}</span>\n                  </div>\n                  @if (entity.spCreate) {\n                    <div class=\"info-item\">\n                      <span class=\"info-label\">SP Create</span>\n                      <span class=\"info-value code\">{{ entity.spCreate }}</span>\n                    </div>\n                  }\n                  @if (entity.spUpdate) {\n                    <div class=\"info-item\">\n                      <span class=\"info-label\">SP Update</span>\n                      <span class=\"info-value code\">{{ entity.spUpdate }}</span>\n                    </div>\n                  }\n                  @if (entity.spDelete) {\n                    <div class=\"info-item\">\n                      <span class=\"info-label\">SP Delete</span>\n                      <span class=\"info-value code\">{{ entity.spDelete }}</span>\n                    </div>\n                  }\n                </div>\n              </div>\n              <!-- Code Gen Info -->\n              <div class=\"info-panel codegen-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-code\"></i>\n                  Code Generation\n                </h3>\n                <div class=\"info-grid\">\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Class Name</span>\n                    <span class=\"info-value code\">{{ entity.ClassName }}</span>\n                  </div>\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Code Name</span>\n                    <span class=\"info-value code\">{{ entity.CodeName }}</span>\n                  </div>\n                  @if (entity.EntityObjectSubclassName) {\n                    <div class=\"info-item\">\n                      <span class=\"info-label\">Subclass</span>\n                      <span class=\"info-value code\">{{ entity.EntityObjectSubclassName }}</span>\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- FIELDS SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'fields') {\n          <section class=\"section fields-section\">\n            <div class=\"section-header\">\n              <div class=\"search-box\">\n                <i class=\"fa-solid fa-search\"></i>\n                <input\n                  type=\"text\"\n                  placeholder=\"Search fields...\"\n                  [ngModel]=\"fieldSearchTerm\"\n                  (ngModelChange)=\"onFieldSearch($event)\">\n              </div>\n              <div class=\"header-controls\">\n                <!-- View mode toggle -->\n                <div class=\"view-mode-toggle\">\n                  <button\n                    class=\"toggle-btn\"\n                    [class.active]=\"fieldViewMode === 'grouped'\"\n                    (click)=\"fieldViewMode = 'grouped'\"\n                    title=\"Group by category\">\n                    <i class=\"fa-solid fa-layer-group\"></i>\n                  </button>\n                  <button\n                    class=\"toggle-btn\"\n                    [class.active]=\"fieldViewMode === 'list'\"\n                    (click)=\"fieldViewMode = 'list'\"\n                    title=\"List view\">\n                    <i class=\"fa-solid fa-list\"></i>\n                  </button>\n                </div>\n                <!-- Expand/Collapse controls (only in grouped mode) -->\n                @if (fieldViewMode === 'grouped') {\n                  <div class=\"expand-collapse-controls\">\n                    <button\n                      class=\"control-btn\"\n                      (click)=\"expandAllFieldGroups()\"\n                      [disabled]=\"allFieldGroupsExpanded\"\n                      title=\"Expand all\">\n                      <i class=\"fa-solid fa-angles-down\"></i>\n                    </button>\n                    <button\n                      class=\"control-btn\"\n                      (click)=\"collapseAllFieldGroups()\"\n                      [disabled]=\"allFieldGroupsCollapsed\"\n                      title=\"Collapse all\">\n                      <i class=\"fa-solid fa-angles-up\"></i>\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n            <div class=\"section-content fields-content\">\n              <!-- Grouped View -->\n              @if (fieldViewMode === 'grouped') {\n                <div class=\"field-groups\">\n                  @for (group of getFilteredFieldGroups(); track group) {\n                    <div\n                      class=\"field-group\"\n                      [class.expanded]=\"isFieldGroupExpanded(group.id)\">\n                      <div class=\"group-header\" (click)=\"toggleFieldGroup(group.id)\">\n                        <i class=\"expand-icon fa-solid\" [ngClass]=\"isFieldGroupExpanded(group.id) ? 'fa-chevron-down' : 'fa-chevron-right'\"></i>\n                        <i [class]=\"group.icon\" class=\"group-icon\"></i>\n                        <span class=\"group-label\">{{ group.label }}</span>\n                        <span class=\"group-count\">{{ group.fields.length }}</span>\n                      </div>\n                      @if (isFieldGroupExpanded(group.id)) {\n                        <div class=\"group-content\">\n                          @for (field of group.fields; track field) {\n                            <div\n                              class=\"field-item\"\n                              (click)=\"selectField(field)\"\n                              [class.selected]=\"IsFieldSelected(field)\">\n                              <div class=\"field-icon\">\n                                <i [class]=\"getFieldTypeIcon(field)\"></i>\n                              </div>\n                              <div class=\"field-info\">\n                                <div class=\"field-name\">{{ field.DisplayName || field.Name }}</div>\n                                <div class=\"field-db-name\">{{ field.Name }}</div>\n                                <div class=\"field-meta\">\n                                  <span class=\"field-type\">{{ formatFieldType(field) }}</span>\n                                  @if (!field.AllowsNull) {\n                                    <span class=\"field-nullable\">Required</span>\n                                  }\n                                  @if (field.RelatedEntityID) {\n                                    <span class=\"field-related\" (click)=\"navigateToRelatedEntity(field); $event.stopPropagation()\">\n                                      <i class=\"fa-solid fa-arrow-right\"></i>\n                                      {{ getRelatedEntityName(field) }}\n                                    </span>\n                                  }\n                                </div>\n                              </div>\n                              <div class=\"field-badges\">\n                                @if (field.IsPrimaryKey) {\n                                  <span class=\"badge pk\" title=\"Primary Key\">PK</span>\n                                }\n                                @if (field.RelatedEntityID && !field.IsPrimaryKey) {\n                                  <span class=\"badge fk\" title=\"Foreign Key\">FK</span>\n                                }\n                                @if (field.Encrypt) {\n                                  <span class=\"badge encrypted\" title=\"Encrypted\">\n                                    <i class=\"fa-solid fa-lock\"></i>\n                                  </span>\n                                }\n                                @if (IsInheritedField(field)) {\n                                  <span class=\"badge inherited\" [title]=\"'Inherited from ' + GetISAFieldSource(field)\">\n                                    <i class=\"fa-solid fa-arrow-up\"></i> {{ GetISAFieldSource(field) }}\n                                  </span>\n                                }\n                              </div>\n                            </div>\n                          }\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n              <!-- List View - Modern Card-style Table -->\n              @if (fieldViewMode === 'list') {\n                <div class=\"fields-list-view\">\n                  <!-- Table Header -->\n                  <div class=\"list-header\">\n                    <div class=\"list-col col-seq sortable\" (click)=\"sortFieldList('Sequence')\" [class.sorted]=\"fieldListSortColumn === 'Sequence'\">\n                      #\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Sequence' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-name sortable\" (click)=\"sortFieldList('Name')\" [class.sorted]=\"fieldListSortColumn === 'Name'\">\n                      Field Name\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Name' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-display-name sortable\" (click)=\"sortFieldList('DisplayName')\" [class.sorted]=\"fieldListSortColumn === 'DisplayName'\">\n                      Display Name\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'DisplayName' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-type sortable\" (click)=\"sortFieldList('Type')\" [class.sorted]=\"fieldListSortColumn === 'Type'\">\n                      Type\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Type' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-length sortable\" (click)=\"sortFieldList('Length')\" [class.sorted]=\"fieldListSortColumn === 'Length'\">\n                      Length\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Length' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-nullable sortable\" (click)=\"sortFieldList('AllowsNull')\" [class.sorted]=\"fieldListSortColumn === 'AllowsNull'\">\n                      Required\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'AllowsNull' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-flags\">Flags</div>\n                    <div class=\"list-col col-desc sortable\" (click)=\"sortFieldList('Description')\" [class.sorted]=\"fieldListSortColumn === 'Description'\">\n                      Description\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Description' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                  </div>\n                  <!-- Table Body -->\n                  <div class=\"list-body\">\n                    @for (field of getFilteredFieldsList(); track field; let i = $index) {\n                      <div\n                        class=\"list-row\"\n                        [class.selected]=\"IsFieldSelected(field)\"\n                        (click)=\"selectField(field)\">\n                        <div class=\"list-col col-seq\">\n                          <span class=\"seq-num\">{{ field.Sequence }}</span>\n                        </div>\n                        <div class=\"list-col col-name\">\n                          <i [class]=\"getFieldTypeIcon(field)\" class=\"field-type-icon\"></i>\n                          <span class=\"field-name-text\">{{ field.Name }}</span>\n                        </div>\n                        <div class=\"list-col col-display-name\">\n                          <span class=\"display-name-text\">{{ field.DisplayName || field.Name }}</span>\n                        </div>\n                        <div class=\"list-col col-type\">\n                          <span class=\"type-tag\">{{ field.Type }}</span>\n                        </div>\n                        <div class=\"list-col col-length\">\n                          @if (field.Length > 0) {\n                            <span class=\"length-value\">{{ field.Length }}</span>\n                          }\n                          @if (field.Length <= 0) {\n                            <span class=\"length-value muted\">\u2014</span>\n                          }\n                        </div>\n                        <div class=\"list-col col-nullable\">\n                          <span class=\"required-indicator\" [class.required]=\"!field.AllowsNull\" [class.optional]=\"field.AllowsNull\">\n                            <i [class]=\"field.AllowsNull ? 'fa-solid fa-circle-minus' : 'fa-solid fa-circle-check'\"></i>\n                            {{ field.AllowsNull ? 'Optional' : 'Required' }}\n                          </span>\n                        </div>\n                        <div class=\"list-col col-flags\">\n                          <div class=\"flag-badges\">\n                            @if (field.IsPrimaryKey) {\n                              <span class=\"flag-badge pk\" title=\"Primary Key\">\n                                <i class=\"fa-solid fa-key\"></i> PK\n                              </span>\n                            }\n                            @if (field.RelatedEntityID && !field.IsPrimaryKey) {\n                              <span class=\"flag-badge fk\" title=\"Foreign Key\">\n                                <i class=\"fa-solid fa-link\"></i> FK\n                              </span>\n                            }\n                            @if (field.Encrypt) {\n                              <span class=\"flag-badge encrypted\" title=\"Encrypted\">\n                                <i class=\"fa-solid fa-lock\"></i>\n                              </span>\n                            }\n                            @if (IsInheritedField(field)) {\n                              <span class=\"flag-badge inherited\" [title]=\"'Inherited from ' + GetISAFieldSource(field)\">\n                                <i class=\"fa-solid fa-arrow-up\"></i> {{ GetISAFieldSource(field) }}\n                              </span>\n                            }\n                          </div>\n                        </div>\n                        <div class=\"list-col col-desc\">\n                          <span class=\"desc-text\" [title]=\"field.Description || ''\">{{ field.Description || '\u2014' }}</span>\n                        </div>\n                      </div>\n                    }\n                  </div>\n                  <!-- Empty state -->\n                  @if (getFilteredFieldsList().length === 0) {\n                    <div class=\"list-empty\">\n                      <i class=\"fa-solid fa-search\"></i>\n                      <span>No fields match your search</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- RELATIONSHIPS SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'relationships') {\n          <section class=\"section relationships-section\">\n            <div class=\"section-header\">\n              <div class=\"view-toggle\">\n                <button\n                  class=\"toggle-btn\"\n                  [class.active]=\"relationshipViewMode === 'diagram'\"\n                  (click)=\"relationshipViewMode = 'diagram'\">\n                  <i class=\"fa-solid fa-diagram-project\"></i>\n                  Diagram\n                </button>\n                <button\n                  class=\"toggle-btn\"\n                  [class.active]=\"relationshipViewMode === 'list'\"\n                  (click)=\"relationshipViewMode = 'list'\">\n                  <i class=\"fa-solid fa-list\"></i>\n                  List\n                </button>\n              </div>\n              <!-- Depth selector (only in diagram mode) -->\n              @if (relationshipViewMode === 'diagram') {\n                <div class=\"depth-selector\">\n                  <span class=\"depth-label\">Depth:</span>\n                  <div class=\"depth-buttons\">\n                    @for (d of [1, 2, 3, 4, 5]; track d) {\n                      <button\n                        class=\"depth-btn\"\n                        [class.active]=\"erdDepth === d\"\n                        (click)=\"setErdDepth(d)\"\n                        [title]=\"'Show ' + d + ' level(s) of relationships'\">\n                        {{ d }}\n                      </button>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n            <div class=\"section-content\">\n              <!-- Diagram View using the ERD composite component -->\n              @if (relationshipViewMode === 'diagram') {\n                <div class=\"relationships-graph\">\n                  <mj-erd-composite\n                    [focusEntities]=\"entity ? [entity] : []\"\n                    [showFilterPanel]=\"false\"\n                    [showHeader]=\"false\"\n                    [depth]=\"erdDepth\"\n                    (stateChange)=\"onERDStateChange($event)\"\n                    (openRecord)=\"onERDOpenRecord($event)\">\n                  </mj-erd-composite>\n                </div>\n              }\n              <!-- List View -->\n              @if (relationshipViewMode === 'list') {\n                <div class=\"relationships-list\">\n                  <!-- Outgoing Relationships (FK fields on this entity) - Grouped by target entity -->\n                  <div class=\"relationship-group\">\n                    <h3 class=\"relationship-group-title\">\n                      <i class=\"fa-solid fa-arrow-right-from-bracket\"></i>\n                      Outgoing (References to other entities)\n                      <span class=\"group-count\">{{ groupedOutgoingRelationships.length }}</span>\n                    </h3>\n                    <div class=\"relationship-items grouped\">\n                      @for (group of groupedOutgoingRelationships; track group) {\n                        <div\n                          class=\"relationship-item-grouped\"\n                          >\n                          <div class=\"rel-header\">\n                            <div class=\"rel-icon outgoing\">\n                              <i class=\"fa-solid fa-arrow-right\"></i>\n                            </div>\n                            <div class=\"rel-entity-name\">{{ group.entityName }}</div>\n                          </div>\n                          <div class=\"rel-fields-chips\">\n                            @for (field of group.fields; track field) {\n                              <span\n                                class=\"field-chip outgoing\"\n                                [title]=\"field.Description || field.Name\"\n                                (click)=\"selectField(field)\">\n                                <i class=\"fa-solid fa-link\"></i>\n                                {{ field.Name }}\n                              </span>\n                            }\n                          </div>\n                        </div>\n                      }\n                      @if (groupedOutgoingRelationships.length === 0) {\n                        <div class=\"empty-state\">\n                          <p>No outgoing relationships</p>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                  <!-- Incoming Relationships - Grouped by source entity -->\n                  <div class=\"relationship-group\">\n                    <h3 class=\"relationship-group-title\">\n                      <i class=\"fa-solid fa-arrow-right-to-bracket\"></i>\n                      Incoming (Entities that reference this one)\n                      <span class=\"group-count\">{{ groupedIncomingRelationships.length }}</span>\n                    </h3>\n                    <div class=\"relationship-items grouped\">\n                      @for (group of groupedIncomingRelationships; track group) {\n                        <div\n                          class=\"relationship-item-grouped\"\n                          >\n                          <div class=\"rel-header\">\n                            <div class=\"rel-icon incoming\">\n                              <i class=\"fa-solid fa-arrow-left\"></i>\n                            </div>\n                            <div class=\"rel-entity-name\">{{ group.entityName }}</div>\n                          </div>\n                          <div class=\"rel-fields-chips\">\n                            @for (field of group.fields; track field) {\n                              <span\n                                class=\"field-chip incoming\"\n                                [title]=\"'Type: ' + field.type\">\n                                <i class=\"fa-solid fa-link\"></i>\n                                {{ field.fieldName }}\n                                @if (field.bundleInAPI) {\n                                  <i class=\"fa-solid fa-box bundle-icon\" title=\"Bundled in API\"></i>\n                                }\n                              </span>\n                            }\n                          </div>\n                        </div>\n                      }\n                      @if (groupedIncomingRelationships.length === 0) {\n                        <div class=\"empty-state\">\n                          <p>No incoming relationships</p>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                </div>\n              }\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- ORGANIC KEYS SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'organicKeys') {\n          <section class=\"section organic-keys-section\">\n            <div class=\"section-content\">\n              @if (organicKeysOutgoing.length === 0 && organicKeysIncoming.length === 0) {\n                <div class=\"empty-state-card\">\n                  <i class=\"fa-solid fa-fingerprint empty-state-icon\"></i>\n                  <h3>No Organic Keys</h3>\n                  <p>This entity has no organic key relationships configured. Organic keys enable cross-system matching by shared business data like email addresses, phone numbers, or domain names \u2014 without requiring foreign key constraints.</p>\n                </div>\n              } @else {\n                <!-- Outgoing: Keys defined on THIS entity -->\n                @if (organicKeysOutgoing.length > 0) {\n                  <div class=\"relationship-group\">\n                    <h3 class=\"relationship-group-title\">\n                      <i class=\"fa-solid fa-arrow-right-from-bracket\"></i>\n                      Outgoing (Matches from this entity)\n                      <span class=\"group-count\">{{ organicKeysOutgoing.length }}</span>\n                    </h3>\n                    <div class=\"organic-key-cards\">\n                      @for (okGroup of organicKeysOutgoing; track okGroup.OrganicKey.ID) {\n                        <div class=\"organic-key-card\">\n                          <div class=\"organic-key-card-header\">\n                            <div class=\"organic-key-name\">\n                              <i class=\"fa-solid fa-fingerprint organic-key-icon\"></i>\n                              {{ okGroup.OrganicKey.Name }}\n                            </div>\n                            <div class=\"organic-key-badges\">\n                              <span class=\"organic-key-badge strategy\">{{ okGroup.OrganicKey.NormalizationStrategy }}</span>\n                              <span class=\"organic-key-badge fields\">{{ okGroup.OrganicKey.MatchFieldNames }}</span>\n                            </div>\n                          </div>\n                          @if (okGroup.OrganicKey.Description) {\n                            <p class=\"organic-key-description\">{{ okGroup.OrganicKey.Description }}</p>\n                          }\n                          <div class=\"organic-key-targets\">\n                            @for (target of okGroup.RelatedEntities; track target.Info.ID) {\n                              <div class=\"organic-key-target clickable\" (click)=\"NavigateToEntityByID(target.Info.RelatedEntityID)\">\n                                <div class=\"rel-icon outgoing\">\n                                  <i class=\"fa-solid fa-arrow-right\"></i>\n                                </div>\n                                <div class=\"target-main\">\n                                  <div class=\"target-header\">\n                                    <i [class]=\"target.EntityIcon\" class=\"target-entity-icon\"></i>\n                                    <span class=\"target-entity-name\">{{ target.Info.DisplayName || target.EntityName }}</span>\n                                    <i class=\"fa-solid fa-external-link-alt target-nav-icon\"></i>\n                                  </div>\n                                  <div class=\"target-match-detail\">\n                                    @if (target.Info.IsDirectMatch) {\n                                      <span class=\"match-type-badge direct\">Direct</span>\n                                      <span class=\"match-fields\">{{ okGroup.OrganicKey.MatchFieldNames }} \u2192 {{ target.Info.RelatedEntityFieldNames }}</span>\n                                    } @else {\n                                      <span class=\"match-type-badge transitive\">Transitive</span>\n                                      <span class=\"match-fields\" [title]=\"target.Info.TransitiveObjectName || ''\">via {{ target.Info.TransitiveObjectName }}</span>\n                                    }\n                                  </div>\n                                </div>\n                              </div>\n                            }\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                }\n\n                <!-- Incoming: Keys on OTHER entities targeting THIS entity -->\n                @if (organicKeysIncoming.length > 0) {\n                  <div class=\"relationship-group\">\n                    <h3 class=\"relationship-group-title\">\n                      <i class=\"fa-solid fa-arrow-right-to-bracket\"></i>\n                      Incoming (Other entities matching to this one)\n                      <span class=\"group-count\">{{ organicKeysIncoming.length }}</span>\n                    </h3>\n                    <div class=\"organic-key-cards\">\n                      @for (incoming of organicKeysIncoming; track incoming.OrganicKey.ID + incoming.SourceEntityName) {\n                        <div class=\"organic-key-card incoming clickable\" (click)=\"NavigateToEntityByID(incoming.SourceEntityID)\">\n                          <div class=\"organic-key-card-header\">\n                            <div class=\"organic-key-name\">\n                              <div class=\"rel-icon incoming\">\n                                <i class=\"fa-solid fa-arrow-left\"></i>\n                              </div>\n                              <i [class]=\"incoming.SourceEntityIcon\" class=\"target-entity-icon\"></i>\n                              {{ incoming.SourceEntityName }}\n                              <i class=\"fa-solid fa-external-link-alt target-nav-icon\"></i>\n                            </div>\n                            <div class=\"organic-key-badges\">\n                              <span class=\"match-type-badge\" [class.direct]=\"incoming.MatchType === 'Direct'\" [class.transitive]=\"incoming.MatchType === 'Transitive'\">{{ incoming.MatchType }}</span>\n                            </div>\n                          </div>\n                          <div class=\"organic-key-detail-row\">\n                            <span class=\"detail-label\">Key:</span>\n                            <span class=\"detail-value\">{{ incoming.OrganicKey.Name }}</span>\n                            <span class=\"organic-key-badge fields\">{{ incoming.OrganicKey.MatchFieldNames }}</span>\n                            <span class=\"organic-key-badge strategy\">{{ incoming.OrganicKey.NormalizationStrategy }}</span>\n                          </div>\n                          @if (incoming.RelatedEntityConfig.IsDirectMatch) {\n                            <div class=\"organic-key-detail-row\">\n                              <span class=\"detail-label\">Matched via:</span>\n                              <span class=\"detail-value\">{{ incoming.RelatedEntityConfig.RelatedEntityFieldNames }}</span>\n                            </div>\n                          } @else {\n                            <div class=\"organic-key-detail-row\">\n                              <span class=\"detail-label\">Bridge:</span>\n                              <span class=\"detail-value\">{{ incoming.RelatedEntityConfig.TransitiveObjectName }}</span>\n                            </div>\n                          }\n                        </div>\n                      }\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- PERMISSIONS SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'permissions') {\n          <section class=\"section permissions-section\">\n            <div class=\"section-content\">\n              <div class=\"permissions-matrix\">\n                <table class=\"matrix-table\">\n                  <thead>\n                    <tr>\n                      <th>Role</th>\n                      <th class=\"center\">Create</th>\n                      <th class=\"center\">Read</th>\n                      <th class=\"center\">Update</th>\n                      <th class=\"center\">Delete</th>\n                      <th>RLS</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (perm of entity.Permissions; track perm) {\n                      <tr>\n                        <td class=\"role-name\">{{ getRoleName(perm) }}</td>\n                        <td class=\"center\">\n                          <i class=\"permission-icon\" [ngClass]=\"perm.CanCreate ? 'fa-solid fa-check granted' : 'fa-solid fa-xmark denied'\"></i>\n                        </td>\n                        <td class=\"center\">\n                          <i class=\"permission-icon\" [ngClass]=\"perm.CanRead ? 'fa-solid fa-check granted' : 'fa-solid fa-xmark denied'\"></i>\n                        </td>\n                        <td class=\"center\">\n                          <i class=\"permission-icon\" [ngClass]=\"perm.CanUpdate ? 'fa-solid fa-check granted' : 'fa-solid fa-xmark denied'\"></i>\n                        </td>\n                        <td class=\"center\">\n                          <i class=\"permission-icon\" [ngClass]=\"perm.CanDelete ? 'fa-solid fa-check granted' : 'fa-solid fa-xmark denied'\"></i>\n                        </td>\n                        <td class=\"rls-info\">\n                          @if (perm.ReadRLSFilterID) {\n                            <span class=\"rls-badge\" title=\"Read RLS\">R</span>\n                          }\n                          @if (perm.CreateRLSFilterID) {\n                            <span class=\"rls-badge\" title=\"Create RLS\">C</span>\n                          }\n                          @if (perm.UpdateRLSFilterID) {\n                            <span class=\"rls-badge\" title=\"Update RLS\">U</span>\n                          }\n                          @if (perm.DeleteRLSFilterID) {\n                            <span class=\"rls-badge\" title=\"Delete RLS\">D</span>\n                          }\n                          @if (!perm.ReadRLSFilterID && !perm.CreateRLSFilterID && !perm.UpdateRLSFilterID && !perm.DeleteRLSFilterID) {\n                            <span class=\"no-rls\">None</span>\n                          }\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n                @if (entity.Permissions.length === 0) {\n                  <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-shield-halved\"></i>\n                    <p>No permissions configured</p>\n                  </div>\n                }\n              </div>\n              <div class=\"api-capabilities\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-plug\"></i>\n                  API Capabilities\n                </h3>\n                <div class=\"capability-grid\">\n                  <div class=\"capability-item\" [class.enabled]=\"entity.IncludeInAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.IncludeInAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Include in API</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.AllowAllRowsAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AllowAllRowsAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Allow All Rows</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.AllowCreateAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AllowCreateAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Allow Create</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.AllowUpdateAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AllowUpdateAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Allow Update</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.AllowDeleteAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AllowDeleteAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Allow Delete</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.AllowUserSearchAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AllowUserSearchAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>User Search</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.CustomResolverAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.CustomResolverAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Custom Resolver</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- DATA SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'data') {\n          <section class=\"section data-section\">\n            <div class=\"data-viewer-container\">\n              @if (entity) {\n                <mj-entity-viewer\n                  [Entity]=\"entity\"\n                  [Provider]=\"Provider\"\n                  (RecordOpened)=\"OnRecordOpened($event)\"\n                  (CreateRecordRequested)=\"OnAddRequested()\">\n                </mj-entity-viewer>\n              }\n            </div>\n          </section>\n        }\n                <!-- ============================================================ -->\n        <!-- LINEAGE SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'lineage') {\n          <section class=\"section lineage-section\">\n            <div class=\"section-content\">\n              <div class=\"lineage-diagram\">\n                <div class=\"lineage-stage sources\">\n                  <h4>Data Sources</h4>\n                  <div class=\"lineage-items\">\n                    <div class=\"lineage-item\">\n                      <i class=\"fa-solid fa-keyboard\"></i>\n                      <span>Manual Entry</span>\n                    </div>\n                    @if (entity.IncludeInAPI) {\n                      <div class=\"lineage-item\">\n                        <i class=\"fa-solid fa-plug\"></i>\n                        <span>API Create</span>\n                      </div>\n                    }\n                  </div>\n                </div>\n                <div class=\"lineage-arrow\">\n                  <i class=\"fa-solid fa-arrow-right\"></i>\n                </div>\n                <div class=\"lineage-stage entity-node\">\n                  <div class=\"entity-box\">\n                    <i [class]=\"entityIcon\"></i>\n                    <span>{{ entity.Name }}</span>\n                  </div>\n                </div>\n                <div class=\"lineage-arrow\">\n                  <i class=\"fa-solid fa-arrow-right\"></i>\n                </div>\n                <div class=\"lineage-stage sinks\">\n                  <h4>Data Sinks</h4>\n                  <div class=\"lineage-items\">\n                    @if (entity.TrackRecordChanges) {\n                      <div class=\"lineage-item\">\n                        <i class=\"fa-solid fa-clock-rotate-left\"></i>\n                        <span>Record Changes</span>\n                      </div>\n                    }\n                    @if (entity.AuditRecordAccess) {\n                      <div class=\"lineage-item\">\n                        <i class=\"fa-solid fa-eye\"></i>\n                        <span>Access Audit</span>\n                      </div>\n                    }\n                    <div class=\"lineage-item\">\n                      <i class=\"fa-solid fa-link\"></i>\n                      <span>Related Entities ({{ stats.relationshipCount }})</span>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"tracking-config\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-clock-rotate-left\"></i>\n                  Tracking Configuration\n                </h3>\n                <div class=\"config-grid\">\n                  <div class=\"config-item\" [class.enabled]=\"entity.TrackRecordChanges\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.TrackRecordChanges ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Track Record Changes</span>\n                  </div>\n                  <div class=\"config-item\" [class.enabled]=\"entity.AuditRecordAccess\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AuditRecordAccess ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Audit Record Access</span>\n                  </div>\n                  <div class=\"config-item\" [class.enabled]=\"entity.AuditViewRuns\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AuditViewRuns ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Audit View Runs</span>\n                  </div>\n                  <div class=\"config-item\">\n                    <span class=\"config-label\">Delete Type:</span>\n                    <span class=\"config-value\">{{ entity.DeleteType }}</span>\n                  </div>\n                  <div class=\"config-item\" [class.enabled]=\"entity.CascadeDeletes\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.CascadeDeletes ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Cascade Deletes</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"tracking-config\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-map-location-dot\"></i>\n                  Geocoding\n                </h3>\n                <p class=\"helper-text\">When enabled, CodeGen auto-detects geo fields and generates map view support</p>\n                <div class=\"config-grid\">\n                  <div class=\"config-item\" [class.enabled]=\"entity.SupportsGeoCoding\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.SupportsGeoCoding ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Supports Geocoding</span>\n                  </div>\n                  <div class=\"config-item\" [class.enabled]=\"entity.AutoUpdateSupportsGeoCoding\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AutoUpdateSupportsGeoCoding ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Auto-Detect Geocoding</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- HISTORY SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'history') {\n          <section class=\"section history-section\">\n            <div class=\"section-content\">\n              <div class=\"history-config\">\n                <div class=\"config-status\" [class.enabled]=\"entity.TrackRecordChanges\">\n                  <i class=\"fa-solid\" [ngClass]=\"entity.TrackRecordChanges ? 'fa-circle-check' : 'fa-circle-xmark'\"></i>\n                  <div class=\"config-text\">\n                    <strong>Record Change Tracking</strong>\n                    <span>{{ entity.TrackRecordChanges ? 'Enabled - All changes are recorded' : 'Disabled - Changes are not tracked' }}</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"history-info\">\n                <div class=\"info-card\">\n                  <h4>\n                    <i class=\"fa-solid fa-info-circle\"></i>\n                    About Change Tracking\n                  </h4>\n                  @if (entity.TrackRecordChanges) {\n                    <p>\n                      This entity has change tracking enabled. All modifications to records are stored in the\n                      <code>RecordChange</code> table, including the user who made the change, timestamp, and\n                      the before/after values.\n                    </p>\n                  }\n                  @if (!entity.TrackRecordChanges) {\n                    <p>\n                      This entity does not have change tracking enabled. To enable it, set\n                      <code>TrackRecordChanges</code> to <code>true</code> in the entity metadata.\n                    </p>\n                  }\n                </div>\n                @if (entity.TrackRecordChanges) {\n                  <div class=\"info-card\">\n                    <h4>\n                      <i class=\"fa-solid fa-database\"></i>\n                      Audit Fields\n                    </h4>\n                    <ul class=\"audit-fields-list\">\n                      <li>\n                        <code>__mj_CreatedAt</code> - Record creation timestamp\n                      </li>\n                      <li>\n                        <code>__mj_UpdatedAt</code> - Last modification timestamp\n                      </li>\n                      @if (entity.DeleteType === 'Soft') {\n                        <li>\n                          <code>__mj_DeletedAt</code> - Soft delete timestamp (when applicable)\n                        </li>\n                      }\n                    </ul>\n                  </div>\n                }\n              </div>\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- SETTINGS SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'settings') {\n          <section class=\"section settings-section\">\n            <div class=\"section-content\">\n              <!-- IS-A Type Relationship Configuration -->\n              @if (HasISARelationship || IsVirtualEntity) {\n                <div class=\"settings-panel isa-settings-panel\">\n                  <h3 class=\"panel-title\">\n                    <i class=\"fa-solid fa-layer-group\"></i>\n                    Type Relationship (IS-A)\n                  </h3>\n                  <div class=\"config-grid\">\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Virtual Entity</span>\n                      <span class=\"config-value\">\n                        @if (IsVirtualEntity) {\n                          <i class=\"fa-solid fa-circle-check\" style=\"color: var(--mj-brand-primary);\"></i> Yes \u2014 read-only view\n                        } @else {\n                          <i class=\"fa-solid fa-circle-minus\" style=\"color: var(--mj-text-muted);\"></i> No\n                        }\n                      </span>\n                    </div>\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Parent Entity</span>\n                      <span class=\"config-value\">\n                        @if (IsChildType) {\n                          <span class=\"link\" (click)=\"NavigateToEntity(ParentChain[0])\" title=\"Navigate to parent entity\">\n                            {{ ParentChain[0]?.Name }}\n                            <i class=\"fa-solid fa-arrow-right\"></i>\n                          </span>\n                        } @else {\n                          <span class=\"muted\">None</span>\n                        }\n                      </span>\n                    </div>\n                    @if (IsChildType) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Full Inheritance Chain</span>\n                        <span class=\"config-value\">{{ IsaBreadcrumb }}</span>\n                      </div>\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Inherited Fields</span>\n                        <span class=\"config-value\">{{ InheritedFieldCount }} field{{ InheritedFieldCount !== 1 ? 's' : '' }}</span>\n                      </div>\n                    }\n                    @if (IsParentType) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Child Types</span>\n                        <span class=\"config-value\">\n                          @for (child of ChildEntities; track child.ID; let last = $last) {\n                            <span class=\"link\" (click)=\"NavigateToEntity(child)\">{{ child.Name }}</span>{{ last ? '' : ', ' }}\n                          }\n                        </span>\n                      </div>\n                    }\n                    @if (SiblingEntities.length > 0) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Sibling Types</span>\n                        <span class=\"config-value\">\n                          @for (sibling of SiblingEntities; track sibling.ID; let last = $last) {\n                            <span class=\"link\" (click)=\"NavigateToEntity(sibling)\">{{ sibling.Name }}</span>{{ last ? '' : ', ' }}\n                          }\n                        </span>\n                      </div>\n                    }\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Disjoint Subtypes</span>\n                      <span class=\"config-value\">\n                        @if (IsParentType || IsChildType) {\n                          <i class=\"fa-solid fa-circle-check\" style=\"color: #059669;\"></i> Enforced \u2014 a parent record can only be one child type\n                        } @else {\n                          <span class=\"muted\">N/A</span>\n                        }\n                      </span>\n                    </div>\n                  </div>\n                </div>\n              }\n              <!-- Entity Settings -->\n              <div class=\"settings-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-sliders\"></i>\n                  Entity Settings\n                </h3>\n                @if (entity.Settings.length > 0) {\n                  <div class=\"settings-list\">\n                    @for (setting of entity.Settings; track setting) {\n                      <div class=\"setting-item\">\n                        <div class=\"setting-name\">{{ setting.Name }}</div>\n                        @if (isJsonValue(setting.Value)) {\n                          <div class=\"setting-value-json\">\n                            <mj-code-editor\n                              [value]=\"formatJsonValue(setting.Value)\"\n                              language=\"json\"\n                              [readonly]=\"true\"\n                              [lineWrapping]=\"true\"\n                              setup=\"minimal\">\n                            </mj-code-editor>\n                          </div>\n                        } @else {\n                          <div class=\"setting-value\">{{ setting.Value }}</div>\n                        }\n                        @if (setting.Comments) {\n                          <div class=\"setting-comment\">{{ setting.Comments }}</div>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n                @if (entity.Settings.length === 0) {\n                  <div class=\"empty-state\">\n                    <p>No custom settings configured</p>\n                  </div>\n                }\n              </div>\n              <!-- Full Text Search -->\n              <div class=\"settings-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-magnifying-glass\"></i>\n                  Full-Text Search\n                </h3>\n                @if (entity.FullTextSearchEnabled) {\n                  <div class=\"fts-config\">\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Status</span>\n                      <span class=\"config-value enabled\">\n                        <i class=\"fa-solid fa-circle-check\"></i>\n                        Enabled\n                      </span>\n                    </div>\n                    @if (entity.FullTextCatalog) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Catalog</span>\n                        <span class=\"config-value code\">{{ entity.FullTextCatalog }}</span>\n                      </div>\n                    }\n                    @if (entity.FullTextIndex) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Index</span>\n                        <span class=\"config-value code\">{{ entity.FullTextIndex }}</span>\n                      </div>\n                    }\n                    @if (entity.FullTextSearchFunction) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Function</span>\n                        <span class=\"config-value code\">{{ entity.FullTextSearchFunction }}</span>\n                      </div>\n                    }\n                  </div>\n                }\n                @if (!entity.FullTextSearchEnabled) {\n                  <div class=\"empty-state\">\n                    <p>Full-text search is not enabled for this entity</p>\n                  </div>\n                }\n              </div>\n              <!-- Row Packaging -->\n              <div class=\"settings-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-box\"></i>\n                  Schema Packaging\n                </h3>\n                <div class=\"config-grid\">\n                  <div class=\"config-row\">\n                    <span class=\"config-label\">Rows to Pack</span>\n                    <span class=\"config-value\">{{ entity.RowsToPackWithSchema || 'None' }}</span>\n                  </div>\n                  @if (entity.RowsToPackSampleCount) {\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Sample Count</span>\n                      <span class=\"config-value\">{{ entity.RowsToPackSampleCount }}</span>\n                    </div>\n                  }\n                  @if (entity.RowsToPackSampleMethod) {\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Sample Method</span>\n                      <span class=\"config-value\">{{ entity.RowsToPackSampleMethod }}</span>\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          </section>\n        }\n      </main>\n      <!-- ============================================================ -->\n      <!-- DETAIL PANEL (Slides in from right) -->\n      <!-- ============================================================ -->\n      <aside class=\"detail-panel\" [class.open]=\"detailPanelOpen\">\n        <div class=\"panel-header\">\n          @if (selectedField) {\n            <h3>Field Details</h3>\n          }\n          @if (selectedRelationship) {\n            <h3>Relationship Details</h3>\n          }\n          <button class=\"close-btn\" (click)=\"closeDetailPanel()\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n        <!-- Field Details -->\n        @if (selectedField) {\n          <div class=\"panel-content\">\n            <div class=\"detail-section\">\n              <h4>{{ selectedField.DisplayName || selectedField.Name }}</h4>\n              <div class=\"detail-field-db-name\">{{ selectedField.Name }}</div>\n              @if (selectedField.Description) {\n                <p class=\"field-description\">{{ selectedField.Description }}</p>\n              }\n            </div>\n            <div class=\"detail-section\">\n              <h5>Type Information</h5>\n              <div class=\"detail-grid\">\n                <div class=\"detail-item\">\n                  <span class=\"label\">SQL Type</span>\n                  <span class=\"value code\">{{ formatFieldType(selectedField) }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">TypeScript Type</span>\n                  <span class=\"value code\">{{ selectedField.TSType }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Nullable</span>\n                  <span class=\"value\">{{ selectedField.AllowsNull ? 'Yes' : 'No' }}</span>\n                </div>\n                @if (selectedField.DefaultValue) {\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Default</span>\n                    <span class=\"value code\">{{ selectedField.DefaultValue }}</span>\n                  </div>\n                }\n              </div>\n            </div>\n            @if (IsInheritedField(selectedField)) {\n              <div class=\"detail-section isa-source-section\">\n                <h5>\n                  <i class=\"fa-solid fa-arrow-up\"></i>\n                  IS-A Inherited Field\n                </h5>\n                <div class=\"detail-grid\">\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Source Entity</span>\n                    <span class=\"value link\" (click)=\"NavigateToEntity(ParentChain[0])\" title=\"Navigate to source entity\">\n                      {{ GetISAFieldSource(selectedField) }}\n                      <i class=\"fa-solid fa-arrow-right\"></i>\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Routing</span>\n                    <span class=\"value\">ORM routes Set/Get to parent</span>\n                  </div>\n                </div>\n              </div>\n            }\n            @if (selectedField.RelatedEntityID) {\n              <div class=\"detail-section\">\n                <h5>Relationship</h5>\n                <div class=\"detail-grid\">\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Related Entity</span>\n                    <span class=\"value link\" (click)=\"navigateToRelatedEntity(selectedField)\">\n                      {{ getRelatedEntityName(selectedField) }}\n                      <i class=\"fa-solid fa-arrow-right\"></i>\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Display Type</span>\n                    <span class=\"value\">{{ selectedField.RelatedEntityDisplayType }}</span>\n                  </div>\n                </div>\n              </div>\n            }\n            @if (selectedField.Encrypt) {\n              <div class=\"detail-section\">\n                <h5>Encryption</h5>\n                <div class=\"detail-grid\">\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Encrypted</span>\n                    <span class=\"value\">Yes</span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Decrypt in API</span>\n                    <span class=\"value\">{{ selectedField.AllowDecryptInAPI ? 'Yes' : 'No' }}</span>\n                  </div>\n                </div>\n              </div>\n            }\n            <div class=\"detail-section\">\n              <h5>API Settings</h5>\n              <div class=\"detail-grid\">\n                <div class=\"detail-item\">\n                  <span class=\"label\">Allow Update</span>\n                  <span class=\"value\">{{ selectedField.AllowUpdateAPI ? 'Yes' : 'No' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Include in Search</span>\n                  <span class=\"value\">{{ selectedField.IncludeInUserSearchAPI ? 'Yes' : 'No' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Full-Text Search</span>\n                  <span class=\"value\">{{ selectedField.FullTextSearchEnabled ? 'Yes' : 'No' }}</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"detail-section\">\n              <h5>Form Settings</h5>\n              <div class=\"detail-grid\">\n                <div class=\"detail-item\">\n                  <span class=\"label\">Include in Form</span>\n                  <span class=\"value\">{{ selectedField.IncludeInGeneratedForm ? 'Yes' : 'No' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Section</span>\n                  <span class=\"value\">{{ selectedField.GeneratedFormSection }}</span>\n                </div>\n                @if (selectedField.Category) {\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Category</span>\n                    <span class=\"value\">{{ selectedField.Category }}</span>\n                  </div>\n                }\n                <div class=\"detail-item\">\n                  <span class=\"label\">Sequence</span>\n                  <span class=\"value\">{{ selectedField.Sequence }}</span>\n                </div>\n              </div>\n            </div>\n            @if (selectedField.EntityFieldValues.length > 0) {\n              <div class=\"detail-section\">\n                <h5>Allowed Values</h5>\n                <div class=\"value-list\">\n                  @for (val of selectedField.EntityFieldValues; track val) {\n                    <div class=\"value-item\">\n                      @if (val.Code !== val.Value) {\n                        <span class=\"value-code\">{{ val.Code }}</span>\n                      }\n                      <span class=\"value-display\">{{ val.Value }}</span>\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n        <!-- Relationship Details -->\n        @if (selectedRelationship) {\n          <div class=\"panel-content\">\n            <div class=\"detail-section\">\n              <h4>{{ selectedRelationship.DisplayName || selectedRelationship.Entity }}</h4>\n            </div>\n            <div class=\"detail-section\">\n              <h5>Connection</h5>\n              <div class=\"detail-grid\">\n                <div class=\"detail-item\">\n                  <span class=\"label\">From Entity</span>\n                  <span class=\"value\">{{ selectedRelationship.Entity }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Join Field</span>\n                  <span class=\"value code\">{{ selectedRelationship.RelatedEntityJoinField }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Type</span>\n                  <span class=\"value\">{{ selectedRelationship.Type }}</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"detail-section\">\n              <h5>Display Settings</h5>\n              <div class=\"detail-grid\">\n                <div class=\"detail-item\">\n                  <span class=\"label\">Display in Form</span>\n                  <span class=\"value\">{{ selectedRelationship.DisplayInForm ? 'Yes' : 'No' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Location</span>\n                  <span class=\"value\">{{ selectedRelationship.DisplayLocation }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Bundle in API</span>\n                  <span class=\"value\">{{ selectedRelationship.BundleInAPI ? 'Yes' : 'No' }}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        }\n      </aside>\n    </div>\n  </div>\n} @else {\n  @if (isExplorerLoading) {\n    <div class=\"explorer-loading\">\n      <mj-loading text=\"Loading entity...\"></mj-loading>\n    </div>\n  }\n  @if (!isExplorerLoading && explorerError) {\n    <div class=\"explorer-error\">\n      <i class=\"fa-solid fa-exclamation-triangle\"></i>\n      <p>{{ explorerError }}</p>\n    </div>\n  }\n  @if (!isExplorerLoading && !explorerError && !entity) {\n    <div class=\"explorer-empty\">\n      <i class=\"fa-solid fa-database\"></i>\n      <p>Entity metadata not available</p>\n    </div>\n  }\n}\n\n<!-- Loading / Error State -->\n", styles: ["/* ============================================================\n   ENTITY EXPLORER FORM - MAIN STYLES\n   A world-class exploration-focused entity intelligence hub\n   ============================================================ */\n\n/* CSS Variables */\n:host {\n    --nav-rail-width: 64px;\n    --header-height: 80px;\n    --detail-panel-width: 400px;\n\n    --bg-primary: var(--mj-bg-surface);\n    --bg-secondary: var(--mj-bg-surface-sunken);\n    --bg-tertiary: var(--mj-bg-surface-sunken);\n\n    --text-primary: var(--mj-text-primary);\n    --text-secondary: var(--mj-text-secondary);\n    --text-muted: var(--mj-text-muted);\n\n    --border-color: var(--mj-border-default);\n    --border-light: var(--mj-border-default);\n\n    --accent-color: var(--mj-brand-primary);\n    --accent-light: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    --accent-dark: var(--mj-brand-primary);\n\n    --success-color: var(--mj-status-success);\n    --warning-color: var(--mj-status-warning);\n    --danger-color: var(--mj-status-error);\n\n    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n\n    --radius-sm: 4px;\n    --radius-md: 8px;\n    --radius-lg: 12px;\n\n    --transition-fast: 150ms ease;\n    --transition-normal: 250ms ease;\n\n    display: block;\n    height: 100%;\n    width: 100%;\n}\n\n.entity-explorer {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--bg-secondary);\n    overflow: hidden;\n}\n\n/* ============================================================\n   HEADER BAR\n   ============================================================ */\n\n.explorer-header {\n    display: flex;\n    align-items: center;\n    gap: 24px;\n    padding: 16px 24px;\n    background: var(--bg-primary);\n    border-bottom: 1px solid var(--border-color);\n    min-height: var(--header-height);\n}\n\n.entity-identity {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex: 1;\n    min-width: 0;\n}\n\n.entity-icon {\n    width: 48px;\n    height: 48px;\n    border-radius: var(--radius-md);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-size: 20px;\n    flex-shrink: 0;\n}\n\n.entity-info {\n    min-width: 0;\n    flex: 1;\n}\n\n.entity-title-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.entity-name {\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.status-badge {\n    padding: 2px 8px;\n    border-radius: 9999px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.status-badge.status-active {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.status-badge.status-deprecated {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.status-badge.status-disabled {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.entity-subtitle {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 4px;\n    font-size: 13px;\n    color: var(--text-secondary);\n}\n\n.schema-table {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--text-muted);\n}\n\n.separator {\n    color: var(--border-color);\n}\n\n.entity-description {\n    color: var(--text-secondary);\n}\n\n/* Header Stats */\n.header-stats {\n    display: flex;\n    gap: 4px;\n}\n\n.stat-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 8px 16px;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    transition: background var(--transition-fast);\n}\n\n.stat-item:hover {\n    background: var(--bg-tertiary);\n}\n\n.stat-item i {\n    font-size: 16px;\n    color: var(--text-muted);\n    margin-bottom: 4px;\n}\n\n.stat-value {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.stat-label {\n    font-size: 11px;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n/* ============================================================\n   MAIN BODY (NAV RAIL + CANVAS)\n   ============================================================ */\n\n.explorer-body {\n    display: flex;\n    flex: 1;\n    overflow: hidden;\n}\n\n/* Navigation Rail - Minimalist Icon-First Design */\n.nav-rail {\n    width: var(--nav-rail-width);\n    background: var(--bg-primary);\n    border-right: 1px solid var(--border-color);\n    display: flex;\n    flex-direction: column;\n    padding: 8px 0;\n    flex-shrink: 0;\n    gap: 2px;\n}\n\n.nav-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 12px 4px 8px 4px;\n    margin: 0 8px;\n    border: none;\n    background: transparent;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    transition: all var(--transition-fast);\n    position: relative;\n    color: var(--text-muted);\n    min-height: 54px;\n}\n\n.nav-item i {\n    font-size: 18px;\n    margin-bottom: 4px;\n    transition: transform var(--transition-fast);\n}\n\n.nav-label {\n    font-size: 9px;\n    font-weight: 500;\n    letter-spacing: 0.2px;\n    white-space: nowrap;\n    text-align: center;\n    line-height: 1;\n    opacity: 0.9;\n}\n\n.nav-badge {\n    position: absolute;\n    top: 4px;\n    right: 4px;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 5px;\n    background: var(--accent-color);\n    color: white;\n    font-size: 10px;\n    font-weight: 600;\n    border-radius: 9999px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n.nav-item:hover {\n    background: var(--bg-tertiary);\n    color: var(--text-primary);\n}\n\n.nav-item:hover i {\n    transform: scale(1.1);\n}\n\n.nav-item.active {\n    background: var(--accent-light);\n    color: var(--accent-color);\n}\n\n.nav-item.active i {\n    transform: scale(1.05);\n}\n\n.nav-item.active::before {\n    content: '';\n    position: absolute;\n    left: -8px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 3px;\n    height: 28px;\n    background: var(--accent-color);\n    border-radius: 0 3px 3px 0;\n}\n\n/* ============================================================\n   MAIN CANVAS\n   ============================================================ */\n\n.main-canvas {\n    flex: 1;\n    overflow: auto;\n    transition: margin-right var(--transition-normal);\n    display: flex;\n    flex-direction: column;\n}\n\n.main-canvas.panel-open {\n    margin-right: var(--detail-panel-width);\n}\n\n/* Sections */\n.section {\n    padding: 24px;\n}\n\n.section-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 20px;\n}\n\n.section-content {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n}\n\n/* Search Box */\n.search-box {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 10px 16px;\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    width: 300px;\n}\n\n.search-box i {\n    color: var(--text-muted);\n}\n\n.search-box input {\n    flex: 1;\n    border: none;\n    background: transparent;\n    font-size: 14px;\n    outline: none;\n    color: var(--text-primary);\n}\n\n.search-box input::placeholder {\n    color: var(--text-muted);\n}\n\n/* View Toggle */\n.view-toggle {\n    display: flex;\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    overflow: hidden;\n}\n\n.toggle-btn {\n    padding: 8px 16px;\n    border: none;\n    background: var(--bg-primary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    transition: all var(--transition-fast);\n}\n\n.toggle-btn:not(:last-child) {\n    border-right: 1px solid var(--border-color);\n}\n\n.toggle-btn:hover {\n    background: var(--bg-tertiary);\n}\n\n.toggle-btn.active {\n    background: var(--accent-color);\n    color: white;\n}\n\n/* Depth Selector */\n.depth-selector {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-left: auto;\n}\n\n.depth-label {\n    font-size: 13px;\n    color: var(--text-secondary);\n    font-weight: 500;\n}\n\n.depth-buttons {\n    display: flex;\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    overflow: hidden;\n}\n\n.depth-btn {\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: var(--bg-primary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    font-size: 13px;\n    font-weight: 500;\n    transition: all var(--transition-fast);\n}\n\n.depth-btn:not(:last-child) {\n    border-right: 1px solid var(--border-color);\n}\n\n.depth-btn:hover {\n    background: var(--bg-tertiary);\n}\n\n.depth-btn.active {\n    background: var(--accent-color);\n    color: white;\n}\n\n/* Header Controls (view mode + expand/collapse) */\n.header-controls {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.view-mode-toggle {\n    display: flex;\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    overflow: hidden;\n}\n\n.expand-collapse-controls {\n    display: flex;\n    gap: 4px;\n}\n\n.control-btn {\n    padding: 6px 10px;\n    border: 1px solid var(--border-color);\n    background: var(--bg-primary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    border-radius: var(--radius-sm);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    transition: all var(--transition-fast);\n}\n\n.control-btn:hover:not(:disabled) {\n    background: var(--bg-tertiary);\n    color: var(--text-primary);\n}\n\n.control-btn:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n/* Fields List View - Modern Design */\n.fields-list-view {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--bg-primary);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.list-header {\n    display: grid;\n    grid-template-columns: 50px 1fr 1fr 100px 70px 100px 100px 1fr;\n    gap: 12px;\n    padding: 12px 20px;\n    background: var(--bg-secondary);\n    border-bottom: 2px solid var(--border-color);\n    position: sticky;\n    top: 0;\n    z-index: 10;\n}\n\n.list-header .list-col {\n    font-size: 11px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    color: var(--text-secondary);\n}\n\n.list-header .list-col.sortable {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: color var(--transition-fast);\n    user-select: none;\n}\n\n.list-header .list-col.sortable:hover {\n    color: var(--accent-color);\n}\n\n.list-header .list-col.sortable.sorted {\n    color: var(--accent-color);\n}\n\n.sort-icon {\n    font-size: 10px;\n    opacity: 0.4;\n    transition: opacity var(--transition-fast);\n}\n\n.list-col.sortable:hover .sort-icon {\n    opacity: 0.7;\n}\n\n.list-col.sortable.sorted .sort-icon {\n    opacity: 1;\n}\n\n.list-body {\n    flex: 1;\n    overflow-y: auto;\n}\n\n.list-row {\n    display: grid;\n    grid-template-columns: 50px 1fr 1fr 100px 70px 100px 100px 1fr;\n    gap: 12px;\n    padding: 14px 20px;\n    border-bottom: 1px solid var(--border-light);\n    cursor: pointer;\n    transition: all var(--transition-fast);\n    align-items: center;\n}\n\n.list-row:hover {\n    background: var(--bg-secondary);\n}\n\n.list-row.selected {\n    background: var(--accent-light);\n    border-left: 3px solid var(--accent-color);\n    padding-left: 17px;\n}\n\n.list-row:last-child {\n    border-bottom: none;\n}\n\n/* Column-specific styling */\n.col-seq {\n    text-align: center;\n}\n\n.seq-num {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    background: var(--bg-tertiary);\n    border-radius: 50%;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--text-secondary);\n}\n\n.list-row:hover .seq-num,\n.list-row.selected .seq-num {\n    background: var(--accent-color);\n    color: white;\n}\n\n.col-name {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    min-width: 0;\n}\n\n.field-type-icon {\n    color: var(--accent-color);\n    font-size: 16px;\n    width: 20px;\n    flex-shrink: 0;\n}\n\n.field-name-text {\n    font-weight: 500;\n    color: var(--text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n}\n\n.col-display-name {\n    min-width: 0;\n}\n\n.display-name-text {\n    font-weight: 500;\n    color: var(--text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.type-tag {\n    display: inline-block;\n    padding: 4px 10px;\n    background: var(--bg-tertiary);\n    border-radius: 20px;\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--text-secondary);\n    font-family: 'SF Mono', 'Consolas', monospace;\n}\n\n.length-value {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--text-primary);\n}\n\n.length-value.muted {\n    color: var(--text-muted);\n}\n\n.required-indicator {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 11px;\n    font-weight: 500;\n    padding: 4px 8px;\n    border-radius: 4px;\n}\n\n.required-indicator.required {\n    color: var(--danger-color);\n    background: color-mix(in srgb, var(--mj-status-error) 10%, transparent);\n}\n\n.required-indicator.required i {\n    color: var(--danger-color);\n}\n\n.required-indicator.optional {\n    color: var(--text-muted);\n    background: transparent;\n}\n\n.flag-badges {\n    display: flex;\n    gap: 6px;\n    flex-wrap: wrap;\n}\n\n.flag-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 8px;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.flag-badge.pk {\n    background: var(--mj-status-warning);\n    color: var(--mj-bg-surface);\n}\n\n.flag-badge.fk {\n    background: var(--mj-brand-primary);\n    color: white;\n}\n\n.flag-badge.encrypted {\n    background: var(--mj-brand-primary);\n    color: white;\n}\n\n.col-desc {\n    min-width: 0;\n}\n\n.desc-text {\n    font-size: 13px;\n    color: var(--text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: block;\n}\n\n.list-empty {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n    color: var(--text-muted);\n    gap: 12px;\n}\n\n.list-empty i {\n    font-size: 32px;\n    opacity: 0.5;\n}\n\n.list-empty span {\n    font-size: 14px;\n}\n\n/* ============================================================\n   OVERVIEW SECTION\n   ============================================================ */\n\n.stats-cards {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 16px;\n}\n\n.stat-card {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 16px;\n    position: relative;\n    transition: all var(--transition-fast);\n}\n\n.stat-card.clickable {\n    cursor: pointer;\n}\n\n.stat-card.clickable:hover {\n    border-color: var(--accent-color);\n    box-shadow: var(--shadow-md);\n    transform: translateY(-2px);\n}\n\n.stat-card.clickable:hover .stat-card-action {\n    opacity: 1;\n    transform: translateX(0);\n}\n\n.stat-card-action {\n    position: absolute;\n    right: 16px;\n    top: 50%;\n    transform: translateY(-50%) translateX(-4px);\n    color: var(--accent-color);\n    opacity: 0;\n    transition: all var(--transition-fast);\n}\n\n.stat-card-action i {\n    font-size: 14px;\n}\n\n.stat-card-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: var(--text-secondary);\n    font-size: 13px;\n    margin-bottom: 12px;\n}\n\n.stat-card-header i {\n    font-size: 14px;\n}\n\n.stat-card-body .stat-main {\n    font-size: 32px;\n    font-weight: 700;\n    color: var(--text-primary);\n    line-height: 1;\n    margin-bottom: 8px;\n}\n\n.stat-card-body .stat-details {\n    display: flex;\n    gap: 12px;\n    font-size: 12px;\n    color: var(--text-muted);\n}\n\n/* Info Panels */\n.info-panel {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin: 0 0 16px 0;\n}\n\n.panel-title i {\n    color: var(--accent-color);\n}\n\n/* Capability Tags */\n.capability-tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n}\n\n.capability-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border-radius: 9999px;\n    font-size: 12px;\n    font-weight: 500;\n}\n\n.capability-tag i {\n    font-size: 10px;\n}\n\n.capability-tag.disabled {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n/* Info Grid */\n.info-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 12px;\n}\n\n.info-item {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.info-label {\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n}\n\n.info-value {\n    font-size: 14px;\n    color: var(--text-primary);\n}\n\n.info-value.code {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 13px;\n    color: var(--accent-dark);\n}\n\n/* ============================================================\n   FIELDS SECTION\n   ============================================================ */\n\n.fields-content {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.field-groups {\n    display: flex;\n    flex-direction: column;\n}\n\n.field-group {\n    border-bottom: 1px solid var(--border-light);\n}\n\n.field-group:last-child {\n    border-bottom: none;\n}\n\n.group-header {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 14px 20px;\n    cursor: pointer;\n    transition: background var(--transition-fast);\n    user-select: none;\n    background: var(--bg-secondary);\n    border-left: 3px solid var(--accent-color);\n}\n\n.group-header:hover {\n    background: var(--bg-tertiary);\n}\n\n.expand-icon {\n    font-size: 10px;\n    color: var(--text-muted);\n    width: 16px;\n    transition: transform var(--transition-fast);\n}\n\n.group-icon {\n    font-size: 16px;\n    color: var(--accent-color);\n    width: 20px;\n    text-align: center;\n}\n\n.group-label {\n    flex: 1;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--text-primary);\n    letter-spacing: 0.01em;\n    text-transform: uppercase;\n}\n\n.group-count {\n    padding: 3px 10px;\n    background: var(--accent-light);\n    border-radius: 9999px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--accent-color);\n}\n\n.group-content {\n    border-top: 1px solid var(--border-light);\n    background: var(--bg-secondary);\n}\n\n.field-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 20px 12px 48px;\n    cursor: pointer;\n    transition: background var(--transition-fast);\n    border-bottom: 1px solid var(--border-light);\n}\n\n.field-item:last-child {\n    border-bottom: none;\n}\n\n.field-item:hover {\n    background: var(--accent-light);\n}\n\n.field-item.selected {\n    background: var(--accent-light);\n    border-left: 3px solid var(--accent-color);\n    padding-left: 45px;\n}\n\n.field-icon {\n    width: 28px;\n    height: 28px;\n    border-radius: var(--radius-sm);\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    color: var(--text-muted);\n    flex-shrink: 0;\n}\n\n.field-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.field-name {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--text-primary);\n}\n\n.field-db-name {\n    font-size: 11px;\n    font-family: 'SF Mono', 'Consolas', monospace;\n    color: var(--text-secondary);\n    margin-top: 2px;\n}\n\n.field-meta {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 2px;\n    font-size: 12px;\n}\n\n.field-type {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    color: var(--text-muted);\n}\n\n.field-nullable {\n    color: var(--danger-color);\n}\n\n.field-related {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    color: var(--accent-color);\n    cursor: pointer;\n}\n\n.field-related:hover {\n    text-decoration: underline;\n}\n\n.field-badges {\n    display: flex;\n    gap: 4px;\n}\n\n.badge {\n    padding: 2px 6px;\n    border-radius: var(--radius-sm);\n    font-size: 10px;\n    font-weight: 600;\n}\n\n.badge.pk {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.badge.fk {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.badge.encrypted {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n/* ============================================================\n   RELATIONSHIPS SECTION\n   ============================================================ */\n\n.relationships-graph {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    min-height: 600px;\n    height: calc(100vh - 280px);\n    max-height: 800px;\n    display: flex;\n    align-items: stretch;\n    justify-content: stretch;\n    overflow: hidden;\n}\n\n.relationships-graph mj-entity-erd,\n.relationships-graph mj-erd-composite {\n    width: 100%;\n    height: 100%;\n    flex: 1;\n}\n\n/* ERD Splitter for details panel */\n.relationships-graph .erd-splitter {\n    width: 100%;\n    height: 100%;\n}\n\n.relationships-graph mj-entity-details {\n    height: 100%;\n    overflow: auto;\n}\n\n.graph-placeholder {\n    text-align: center;\n    color: var(--text-muted);\n}\n\n.graph-placeholder i {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.graph-placeholder p {\n    margin: 0;\n}\n\n.graph-placeholder .hint {\n    font-size: 12px;\n    margin-top: 8px;\n}\n\n.relationships-list {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n}\n\n.relationship-group {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.relationship-group-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 14px 20px;\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary);\n    background: var(--bg-tertiary);\n    border-bottom: 1px solid var(--border-color);\n}\n\n.relationship-group-title i {\n    color: var(--accent-color);\n}\n\n.relationship-items {\n    display: flex;\n    flex-direction: column;\n}\n\n.relationship-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 20px;\n    cursor: pointer;\n    transition: background var(--transition-fast);\n    border-bottom: 1px solid var(--border-light);\n}\n\n.relationship-item:last-child {\n    border-bottom: none;\n}\n\n.relationship-item:hover {\n    background: var(--accent-light);\n}\n\n.relationship-item.hidden {\n    display: none;\n}\n\n.rel-icon {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    background: var(--accent-light);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--accent-color);\n    font-size: 12px;\n}\n\n.rel-info {\n    flex: 1;\n}\n\n.rel-entity {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--accent-color);\n    cursor: pointer;\n}\n\n.rel-entity:hover {\n    text-decoration: underline;\n}\n\n.rel-field {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 2px;\n}\n\n.rel-meta {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.rel-type,\n.rel-display-type {\n    padding: 2px 8px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-sm);\n    font-size: 11px;\n    color: var(--text-muted);\n}\n\n.rel-bundle {\n    color: var(--success-color);\n}\n\n/* Grouped relationship styles */\n.relationship-group-title .group-count {\n    margin-left: auto;\n    background: var(--accent-light);\n    color: var(--accent-color);\n    padding: 2px 10px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.relationship-items.grouped {\n    padding: 8px 0;\n}\n\n.relationship-item-grouped {\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--border-light);\n}\n\n.relationship-item-grouped:last-child {\n    border-bottom: none;\n}\n\n.rel-header {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 10px;\n}\n\n.rel-icon.outgoing {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.rel-icon.incoming {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.rel-entity-name {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.rel-fields-chips {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    padding-left: 44px; /* Align with entity name (icon width + gap) */\n}\n\n.field-chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 5px 12px;\n    border-radius: 16px;\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all var(--transition-fast);\n}\n\n.field-chip i {\n    font-size: 10px;\n}\n\n.field-chip.outgoing {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border: 1px solid var(--mj-brand-primary);\n}\n\n.field-chip.outgoing:hover {\n    background: var(--mj-brand-primary);\n    color: white;\n}\n\n.field-chip.incoming {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border: 1px solid var(--mj-status-success);\n}\n\n.field-chip.incoming:hover {\n    background: var(--mj-status-success);\n    color: white;\n}\n\n.field-chip .bundle-icon {\n    font-size: 9px;\n    margin-left: 2px;\n    opacity: 0.8;\n}\n\n/* ============================================================\n   PERMISSIONS SECTION\n   ============================================================ */\n\n.permissions-matrix {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.matrix-table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.matrix-table th,\n.matrix-table td {\n    padding: 12px 16px;\n    text-align: left;\n    border-bottom: 1px solid var(--border-light);\n}\n\n.matrix-table th {\n    background: var(--bg-tertiary);\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n}\n\n.matrix-table th.center,\n.matrix-table td.center {\n    text-align: center;\n}\n\n.matrix-table tbody tr:hover {\n    background: var(--bg-secondary);\n}\n\n.role-name {\n    font-weight: 500;\n    color: var(--text-primary);\n}\n\n.permission-icon {\n    font-size: 14px;\n}\n\n.permission-icon.granted {\n    color: var(--success-color);\n}\n\n.permission-icon.denied {\n    color: var(--text-muted);\n}\n\n.rls-info {\n    display: flex;\n    gap: 4px;\n}\n\n.rls-badge {\n    width: 20px;\n    height: 20px;\n    border-radius: var(--radius-sm);\n    background: var(--warning-color);\n    color: white;\n    font-size: 10px;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.no-rls {\n    color: var(--text-muted);\n    font-size: 12px;\n}\n\n/* API Capabilities */\n.api-capabilities {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.capability-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n    gap: 12px;\n}\n\n.capability-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n    color: var(--text-muted);\n}\n\n.capability-item i {\n    font-size: 12px;\n}\n\n.capability-item.enabled {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.capability-item.enabled i {\n    color: var(--success-color);\n}\n\n/* ============================================================\n   LINEAGE SECTION\n   ============================================================ */\n\n.lineage-diagram {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 24px;\n    padding: 40px;\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n}\n\n.lineage-stage {\n    text-align: center;\n}\n\n.lineage-stage h4 {\n    font-size: 12px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n    margin: 0 0 12px 0;\n}\n\n.lineage-items {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.lineage-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n    color: var(--text-secondary);\n}\n\n.lineage-item i {\n    color: var(--accent-color);\n}\n\n.lineage-arrow {\n    font-size: 24px;\n    color: var(--text-muted);\n}\n\n.entity-node .entity-box {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    padding: 24px 32px;\n    background: var(--accent-color);\n    color: white;\n    border-radius: var(--radius-lg);\n    font-weight: 600;\n}\n\n.entity-node .entity-box i {\n    font-size: 24px;\n}\n\n.tracking-config {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.config-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 12px;\n}\n\n.config-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n    color: var(--text-muted);\n}\n\n.config-item.enabled {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.config-item .config-label {\n    color: var(--text-muted);\n}\n\n.config-item .config-value {\n    font-weight: 500;\n    color: var(--text-primary);\n}\n\n.tracking-config .helper-text {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin: -8px 0 12px 0;\n}\n\n/* ============================================================\n   HISTORY SECTION\n   ============================================================ */\n\n.history-config {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.config-status {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n}\n\n.config-status i {\n    font-size: 24px;\n    color: var(--text-muted);\n    margin-top: 2px;\n}\n\n.config-status.enabled i {\n    color: var(--success-color);\n}\n\n.config-text strong {\n    display: block;\n    font-size: 16px;\n    color: var(--text-primary);\n    margin-bottom: 4px;\n}\n\n.config-text span {\n    font-size: 14px;\n    color: var(--text-secondary);\n}\n\n.history-info {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 16px;\n}\n\n.info-card {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.info-card h4 {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    color: var(--text-primary);\n    margin: 0 0 12px 0;\n}\n\n.info-card h4 i {\n    color: var(--accent-color);\n}\n\n.info-card p {\n    font-size: 14px;\n    color: var(--text-secondary);\n    line-height: 1.6;\n    margin: 0;\n}\n\n.info-card code {\n    background: var(--bg-tertiary);\n    padding: 2px 6px;\n    border-radius: var(--radius-sm);\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n}\n\n.audit-fields-list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n}\n\n.audit-fields-list li {\n    padding: 8px 0;\n    font-size: 14px;\n    color: var(--text-secondary);\n    border-bottom: 1px solid var(--border-light);\n}\n\n.audit-fields-list li:last-child {\n    border-bottom: none;\n}\n\n/* ============================================================\n   SETTINGS SECTION\n   ============================================================ */\n\n.settings-panel {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.settings-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.setting-item {\n    padding: 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n}\n\n.setting-name {\n    font-weight: 500;\n    color: var(--text-primary);\n    margin-bottom: 4px;\n}\n\n.setting-value {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n    word-break: break-all;\n}\n\n.setting-value-json {\n    margin-top: 8px;\n    border-radius: var(--radius-sm);\n    overflow: hidden;\n    border: 1px solid var(--border-color);\n    background: var(--mj-bg-surface-sunken);\n}\n\n.setting-value-json mj-code-editor {\n    display: block;\n    max-height: 300px;\n}\n\n.setting-value-json ::ng-deep .cm-editor {\n    font-size: 12px;\n    background: var(--mj-bg-surface-sunken);\n}\n\n.setting-value-json ::ng-deep .cm-gutters {\n    background: var(--mj-bg-surface-sunken);\n    border-right: 1px solid var(--border-color);\n}\n\n.setting-comment {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 8px;\n}\n\n.fts-config,\n.settings-section .config-grid {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.config-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.config-row .config-label {\n    width: 100px;\n    font-size: 12px;\n    color: var(--text-muted);\n}\n\n.config-row .config-value {\n    font-size: 14px;\n    color: var(--text-primary);\n}\n\n.config-row .config-value.code {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n}\n\n.config-row .config-value.enabled {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--success-color);\n}\n\n/* ============================================================\n   DETAIL PANEL (Slide-in from right)\n   ============================================================ */\n\n.detail-panel {\n    position: fixed;\n    top: 0;\n    right: 0;\n    width: var(--detail-panel-width);\n    height: 100%;\n    background: var(--bg-primary);\n    border-left: 1px solid var(--border-color);\n    box-shadow: var(--shadow-lg);\n    transform: translateX(100%);\n    transition: transform var(--transition-normal);\n    z-index: 100;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n.detail-panel.open {\n    transform: translateX(0);\n}\n\n.panel-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--border-color);\n    flex-shrink: 0;\n}\n\n.panel-header h3 {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.close-btn {\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: transparent;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--text-muted);\n    transition: all var(--transition-fast);\n}\n\n.close-btn:hover {\n    background: var(--bg-tertiary);\n    color: var(--text-primary);\n}\n\n.panel-content {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n}\n\n.detail-section {\n    margin-bottom: 24px;\n}\n\n.detail-section:last-child {\n    margin-bottom: 0;\n}\n\n.detail-section h4 {\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin: 0 0 8px 0;\n}\n\n.detail-section h5 {\n    font-size: 12px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n    margin: 0 0 12px 0;\n}\n\n.detail-field-db-name {\n    font-size: 12px;\n    font-family: 'SF Mono', 'Consolas', monospace;\n    color: var(--text-secondary);\n    margin-top: 4px;\n    margin-bottom: 4px;\n}\n\n.field-description {\n    font-size: 14px;\n    color: var(--text-secondary);\n    line-height: 1.5;\n    margin: 0;\n}\n\n.detail-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n}\n\n.detail-item {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.detail-item .label {\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n}\n\n.detail-item .value {\n    font-size: 14px;\n    color: var(--text-primary);\n}\n\n.detail-item .value.code {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n}\n\n.detail-item .value.link {\n    color: var(--accent-color);\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.detail-item .value.link:hover {\n    text-decoration: underline;\n}\n\n.value-list {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n.value-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n}\n\n.value-code {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 11px;\n    color: var(--accent-dark);\n    background: var(--bg-primary);\n    padding: 2px 6px;\n    border-radius: var(--radius-sm);\n}\n\n.value-display {\n    color: var(--text-primary);\n}\n\n/* ============================================================\n   EMPTY STATES\n   ============================================================ */\n\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px;\n    text-align: center;\n    color: var(--text-muted);\n}\n\n.empty-state i {\n    font-size: 32px;\n    margin-bottom: 12px;\n    opacity: 0.5;\n}\n\n.empty-state p {\n    margin: 0;\n    font-size: 14px;\n}\n\n/* ============================================================\n   LOADING / ERROR STATES\n   ============================================================ */\n\n.explorer-loading,\n.explorer-error,\n.explorer-empty {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    padding: 40px;\n    text-align: center;\n    color: var(--text-muted);\n}\n\n.explorer-error i,\n.explorer-empty i {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.explorer-error {\n    color: var(--danger-color);\n}\n\n.explorer-error i {\n    opacity: 1;\n}\n\n/* ============================================================\n   IS-A TYPE HIERARCHY & VIRTUAL ENTITY STYLES\n   ============================================================ */\n\n/* Badge variants for header */\n.isa-badge {\n    font-size: 11px;\n    font-weight: 600;\n    padding: 3px 10px;\n    border-radius: 12px;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    cursor: default;\n    white-space: nowrap;\n}\n\n.isa-badge.virtual {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.isa-badge.child-type {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.isa-badge.child-type:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 22%, transparent);\n}\n\n.isa-badge.parent-type {\n    background: color-mix(in srgb, var(--mj-status-success) 12%, transparent);\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 25%, transparent);\n}\n\n.isa-badge.overlapping {\n    background: color-mix(in srgb, var(--mj-status-warning) 12%, transparent);\n    color: var(--mj-status-warning);\n    border: 1px solid color-mix(in srgb, var(--mj-status-warning) 25%, transparent);\n}\n\n/* Breadcrumb under title */\n.isa-breadcrumb {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n    margin-top: 2px;\n    padding: 2px 0;\n}\n\n.isa-breadcrumb i {\n    font-size: 11px;\n    opacity: 0.7;\n}\n\n/* IS-A Panel (overview section) */\n.isa-panel {\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.isa-info-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--text-primary);\n}\n\n.isa-info-row.virtual-info {\n    background: color-mix(in srgb, var(--mj-brand-primary) 6%, transparent);\n}\n\n.isa-info-row.virtual-info i {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.isa-info-row .code {\n    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;\n    font-size: 12px;\n    background: color-mix(in srgb, var(--mj-text-primary) 6%, transparent);\n    padding: 1px 6px;\n    border-radius: 3px;\n    color: var(--mj-brand-primary);\n}\n\n/* Inheritance chain */\n.isa-chain {\n    padding: 8px 0;\n}\n\n.isa-chain-label {\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n    margin-bottom: 8px;\n}\n\n.isa-chain-nodes {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-wrap: wrap;\n    padding: 6px 0;\n}\n\n.isa-node {\n    display: inline-flex;\n    align-items: center;\n    padding: 5px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n}\n\n.isa-node.current {\n    background: var(--mj-brand-primary);\n    color: white;\n}\n\n.isa-node.parent {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.isa-arrow {\n    color: var(--text-muted);\n    font-size: 11px;\n}\n\n.isa-inherited-fields {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 8px;\n    padding-top: 8px;\n    border-top: 1px solid var(--border-color);\n}\n\n.isa-inherited-fields i {\n    font-size: 12px;\n    color: var(--mj-brand-primary);\n}\n\n/* Child types list */\n.isa-children {\n    padding: 8px 0;\n}\n\n.isa-child-list {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    padding: 4px 0;\n}\n\n.isa-child-chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 5px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    background: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n}\n\n/* Clickable elements */\n.clickable {\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.clickable:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.isa-node.parent.clickable:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n.isa-child-chip.clickable:hover {\n    background: color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-success) 35%, transparent);\n}\n\n/* Field inherited badge (card and list views) */\n.badge.inherited,\n.flag-badge.inherited {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    font-size: 10px;\n    font-weight: 600;\n    gap: 3px;\n}\n\n.flag-badge.inherited {\n    display: inline-flex;\n    align-items: center;\n    gap: 3px;\n    padding: 1px 6px;\n    border-radius: 4px;\n    font-size: 10px;\n}\n\n.flag-badge.inherited i {\n    font-size: 9px;\n}\n\n/* IS-A source section in field detail panel */\n.isa-source-section {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n    border-radius: 6px;\n    padding: 12px;\n    margin: -4px -12px 8px;\n}\n\n.isa-source-section h5 {\n    color: var(--mj-brand-primary);\n}\n\n.isa-source-section h5 i {\n    margin-right: 4px;\n}\n\n/* IS-A settings panel */\n.isa-settings-panel {\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.isa-settings-panel .link {\n    color: var(--mj-brand-primary);\n    cursor: pointer;\n    transition: color 0.15s ease;\n}\n\n.isa-settings-panel .link:hover {\n    color: var(--mj-brand-primary);\n    text-decoration: underline;\n}\n\n.isa-settings-panel .muted {\n    color: var(--text-muted);\n}\n\n/* IS-A Field Inspector */\n.isa-field-inspector {\n    margin-top: 12px;\n    padding-top: 12px;\n    border-top: 1px solid var(--border-color);\n}\n\n.isa-field-inspector > .isa-chain-label {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.isa-inspector-groups {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    margin-top: 8px;\n}\n\n.isa-inspector-group {\n    border-radius: 6px;\n    padding: 8px 12px;\n    border: 1px solid var(--border-color);\n}\n\n.isa-inspector-group.own {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.isa-inspector-group.inherited {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.isa-inspector-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 6px;\n}\n\n.isa-inspector-entity {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.isa-inspector-count {\n    font-size: 11px;\n    color: var(--text-muted);\n    font-weight: 500;\n}\n\n.isa-inspector-fields {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n}\n\n.isa-inspector-field {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 11px;\n    padding: 2px 8px;\n    border-radius: 4px;\n    background: color-mix(in srgb, var(--mj-text-primary) 4%, transparent);\n    color: var(--text-primary);\n}\n\n.isa-inspector-type {\n    font-size: 10px;\n    color: var(--text-muted);\n    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;\n}\n\n/* Sibling chips */\n.isa-siblings {\n    padding: 8px 0;\n}\n\n.isa-sibling-chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 5px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, transparent);\n    color: var(--mj-status-warning);\n    border: 1px solid color-mix(in srgb, var(--mj-status-warning) 20%, transparent);\n}\n\n.isa-sibling-chip.clickable:hover {\n    background: color-mix(in srgb, var(--mj-status-warning) 20%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n}\n\n/* Child count badge */\n.isa-child-count {\n    font-size: 11px;\n    background: color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n    padding: 1px 6px;\n    border-radius: 8px;\n    margin-left: 2px;\n    font-weight: 600;\n}\n\n.isa-child-count i {\n    font-size: 10px;\n}\n\n/* ============================================================\n   DATA SECTION\n   ============================================================ */\n.data-section {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    padding: 0;\n    overflow: hidden;\n}\n\n.data-viewer-container {\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n}\n\n/* ============================================================\n   ORGANIC KEYS SECTION\n   ============================================================ */\n\n.organic-key-cards {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    padding: 4px 0;\n}\n\n.organic-key-card {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 16px;\n    transition: border-color 0.15s ease;\n}\n\n.organic-key-card:hover {\n    border-color: var(--mj-border-strong);\n}\n\n.organic-key-card.incoming {\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.organic-key-card-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.organic-key-name {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.organic-key-icon {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.organic-key-badges {\n    display: flex;\n    gap: 6px;\n    flex-shrink: 0;\n}\n\n.organic-key-badge {\n    display: inline-flex;\n    align-items: center;\n    padding: 2px 8px;\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 500;\n    font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.organic-key-badge.strategy {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.organic-key-badge.fields {\n    background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-info-text, var(--mj-status-info));\n}\n\n.organic-key-description {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    margin: 0 0 12px 0;\n    line-height: 1.4;\n}\n\n.organic-key-targets {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.organic-key-target {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n    padding: 10px 12px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 6px;\n    font-size: 13px;\n    transition: background 0.15s ease, border-color 0.15s ease;\n}\n\n.organic-key-target.clickable,\n.organic-key-card.clickable {\n    cursor: pointer;\n}\n\n.organic-key-target.clickable:hover,\n.organic-key-card.clickable:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.target-main {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    min-width: 0;\n    flex: 1;\n}\n\n.target-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.target-entity-icon {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    width: 16px;\n    text-align: center;\n}\n\n.target-entity-name {\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    min-width: 0;\n}\n\n.target-nav-icon {\n    font-size: 10px;\n    color: var(--mj-text-disabled);\n    margin-left: 4px;\n    transition: color 0.15s ease;\n}\n\n.organic-key-target.clickable:hover .target-nav-icon,\n.organic-key-card.clickable:hover .target-nav-icon {\n    color: var(--mj-brand-primary);\n}\n\n.target-match-detail {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding-left: 24px;\n}\n\n.match-type-badge {\n    display: inline-flex;\n    align-items: center;\n    padding: 2px 8px;\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.match-type-badge.direct {\n    background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-success-text, var(--mj-status-success));\n}\n\n.match-type-badge.transitive {\n    background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-warning-text, var(--mj-status-warning));\n}\n\n.match-fields {\n    font-size: 11px;\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    color: var(--mj-text-secondary);\n}\n\n.organic-key-detail-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 4px 0;\n    font-size: 12px;\n}\n\n.detail-label {\n    color: var(--mj-text-muted);\n    font-weight: 500;\n    flex-shrink: 0;\n}\n\n.detail-value {\n    color: var(--mj-text-secondary);\n    font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.empty-state-card {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 48px 24px;\n    text-align: center;\n    color: var(--mj-text-muted);\n}\n\n.empty-state-icon {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.3;\n}\n\n.empty-state-card h3 {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    margin: 0 0 8px 0;\n}\n\n.empty-state-card p {\n    font-size: 13px;\n    line-height: 1.5;\n    max-width: 500px;\n    margin: 0;\n}\n", ".k-pane {\n  background-color: var(--mj-bg-surface);\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: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\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.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@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: var(--mj-bg-surface);\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: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\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: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\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: var(--mj-brand-primary);\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header .collapse-icon {\n  color: var(--mj-text-muted);\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: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-header {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: var(--mj-brand-primary);\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\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 var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\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: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\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 var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: var(--mj-text-muted);\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: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\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: var(--mj-status-warning);\n  color: var(--mj-text-primary);\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: var(--mj-status-success);\n  color: var(--mj-text-inverse);\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: var(--mj-text-muted);\n}\n"] }]
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJEntityFormComponentExtended, { className: "MJEntityFormComponentExtended", filePath: "src/lib/custom/Entities/entity-form.component.ts", lineNumber: 155 }); })();
 //# sourceMappingURL=entity-form.component.js.map