@memberjunction/ng-core-entity-forms 5.22.0 → 5.24.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 (215) hide show
  1. package/dist/lib/custom/AIAgents/add-action-dialog.component.d.ts +4 -5
  2. package/dist/lib/custom/AIAgents/add-action-dialog.component.d.ts.map +1 -1
  3. package/dist/lib/custom/AIAgents/add-action-dialog.component.js +55 -59
  4. package/dist/lib/custom/AIAgents/add-action-dialog.component.js.map +1 -1
  5. package/dist/lib/custom/AIAgents/agent-advanced-settings-dialog.component.js +0 -1
  6. package/dist/lib/custom/AIAgents/agent-advanced-settings-dialog.component.js.map +1 -1
  7. package/dist/lib/custom/AIAgents/agent-prompt-advanced-settings-dialog.component.d.ts +4 -5
  8. package/dist/lib/custom/AIAgents/agent-prompt-advanced-settings-dialog.component.d.ts.map +1 -1
  9. package/dist/lib/custom/AIAgents/agent-prompt-advanced-settings-dialog.component.js +54 -71
  10. package/dist/lib/custom/AIAgents/agent-prompt-advanced-settings-dialog.component.js.map +1 -1
  11. package/dist/lib/custom/AIAgents/ai-agent-form.component.d.ts.map +1 -1
  12. package/dist/lib/custom/AIAgents/ai-agent-form.component.js +1053 -1096
  13. package/dist/lib/custom/AIAgents/ai-agent-form.component.js.map +1 -1
  14. package/dist/lib/custom/AIAgents/ai-agent-management.service.d.ts +2 -3
  15. package/dist/lib/custom/AIAgents/ai-agent-management.service.d.ts.map +1 -1
  16. package/dist/lib/custom/AIAgents/ai-agent-management.service.js +39 -82
  17. package/dist/lib/custom/AIAgents/ai-agent-management.service.js.map +1 -1
  18. package/dist/lib/custom/AIAgents/create-prompt-dialog.component.d.ts +4 -5
  19. package/dist/lib/custom/AIAgents/create-prompt-dialog.component.d.ts.map +1 -1
  20. package/dist/lib/custom/AIAgents/create-prompt-dialog.component.js +28 -31
  21. package/dist/lib/custom/AIAgents/create-prompt-dialog.component.js.map +1 -1
  22. package/dist/lib/custom/AIAgents/create-sub-agent-dialog.component.d.ts +4 -5
  23. package/dist/lib/custom/AIAgents/create-sub-agent-dialog.component.d.ts.map +1 -1
  24. package/dist/lib/custom/AIAgents/create-sub-agent-dialog.component.js +15 -14
  25. package/dist/lib/custom/AIAgents/create-sub-agent-dialog.component.js.map +1 -1
  26. package/dist/lib/custom/AIAgents/new-agent-dialog.component.d.ts +4 -7
  27. package/dist/lib/custom/AIAgents/new-agent-dialog.component.d.ts.map +1 -1
  28. package/dist/lib/custom/AIAgents/new-agent-dialog.component.js +77 -124
  29. package/dist/lib/custom/AIAgents/new-agent-dialog.component.js.map +1 -1
  30. package/dist/lib/custom/AIAgents/new-agent-dialog.service.d.ts +2 -2
  31. package/dist/lib/custom/AIAgents/new-agent-dialog.service.d.ts.map +1 -1
  32. package/dist/lib/custom/AIAgents/new-agent-dialog.service.js +10 -11
  33. package/dist/lib/custom/AIAgents/new-agent-dialog.service.js.map +1 -1
  34. package/dist/lib/custom/AIAgents/prompt-selector-dialog.component.d.ts +4 -5
  35. package/dist/lib/custom/AIAgents/prompt-selector-dialog.component.d.ts.map +1 -1
  36. package/dist/lib/custom/AIAgents/prompt-selector-dialog.component.js +18 -18
  37. package/dist/lib/custom/AIAgents/prompt-selector-dialog.component.js.map +1 -1
  38. package/dist/lib/custom/AIAgents/sub-agent-advanced-settings-dialog.component.d.ts +4 -5
  39. package/dist/lib/custom/AIAgents/sub-agent-advanced-settings-dialog.component.d.ts.map +1 -1
  40. package/dist/lib/custom/AIAgents/sub-agent-advanced-settings-dialog.component.js +59 -80
  41. package/dist/lib/custom/AIAgents/sub-agent-advanced-settings-dialog.component.js.map +1 -1
  42. package/dist/lib/custom/AIAgents/sub-agent-selector-dialog.component.d.ts +4 -5
  43. package/dist/lib/custom/AIAgents/sub-agent-selector-dialog.component.d.ts.map +1 -1
  44. package/dist/lib/custom/AIAgents/sub-agent-selector-dialog.component.js +23 -24
  45. package/dist/lib/custom/AIAgents/sub-agent-selector-dialog.component.js.map +1 -1
  46. package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.d.ts.map +1 -1
  47. package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.js +862 -906
  48. package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.js.map +1 -1
  49. package/dist/lib/custom/AIPromptRuns/chat-message-viewer.component.js +4 -5
  50. package/dist/lib/custom/AIPromptRuns/chat-message-viewer.component.js.map +1 -1
  51. package/dist/lib/custom/AIPrompts/ai-prompt-form.component.js +448 -499
  52. package/dist/lib/custom/AIPrompts/ai-prompt-form.component.js.map +1 -1
  53. package/dist/lib/custom/AIPrompts/ai-prompt-management.service.d.ts +2 -2
  54. package/dist/lib/custom/AIPrompts/ai-prompt-management.service.d.ts.map +1 -1
  55. package/dist/lib/custom/AIPrompts/ai-prompt-management.service.js +6 -11
  56. package/dist/lib/custom/AIPrompts/ai-prompt-management.service.js.map +1 -1
  57. package/dist/lib/custom/AIPrompts/template-selector-dialog.component.d.ts +4 -5
  58. package/dist/lib/custom/AIPrompts/template-selector-dialog.component.d.ts.map +1 -1
  59. package/dist/lib/custom/AIPrompts/template-selector-dialog.component.js +16 -15
  60. package/dist/lib/custom/AIPrompts/template-selector-dialog.component.js.map +1 -1
  61. package/dist/lib/custom/Actions/action-execution-log-form.component.js +160 -166
  62. package/dist/lib/custom/Actions/action-execution-log-form.component.js.map +1 -1
  63. package/dist/lib/custom/Actions/action-form.component.d.ts.map +1 -1
  64. package/dist/lib/custom/Actions/action-form.component.js +93 -94
  65. package/dist/lib/custom/Actions/action-form.component.js.map +1 -1
  66. package/dist/lib/custom/ContentSources/content-source-form.component.d.ts +22 -0
  67. package/dist/lib/custom/ContentSources/content-source-form.component.d.ts.map +1 -0
  68. package/dist/lib/custom/ContentSources/content-source-form.component.js +165 -0
  69. package/dist/lib/custom/ContentSources/content-source-form.component.js.map +1 -0
  70. package/dist/lib/custom/Entities/entity-form.component.js +2 -2
  71. package/dist/lib/custom/Lists/list-form.component.js +61 -63
  72. package/dist/lib/custom/Lists/list-form.component.js.map +1 -1
  73. package/dist/lib/custom/Queries/query-category-dialog.component.js +33 -59
  74. package/dist/lib/custom/Queries/query-category-dialog.component.js.map +1 -1
  75. package/dist/lib/custom/Queries/query-form.component.js +354 -360
  76. package/dist/lib/custom/Queries/query-form.component.js.map +1 -1
  77. package/dist/lib/custom/Queries/query-run-dialog.component.js +62 -71
  78. package/dist/lib/custom/Queries/query-run-dialog.component.js.map +1 -1
  79. package/dist/lib/custom/Templates/template-param-dialog.component.js +128 -124
  80. package/dist/lib/custom/Templates/template-param-dialog.component.js.map +1 -1
  81. package/dist/lib/custom/Templates/template-params-grid.component.d.ts +45 -22
  82. package/dist/lib/custom/Templates/template-params-grid.component.d.ts.map +1 -1
  83. package/dist/lib/custom/Templates/template-params-grid.component.js +380 -384
  84. package/dist/lib/custom/Templates/template-params-grid.component.js.map +1 -1
  85. package/dist/lib/custom/Templates/templates-form.component.js +34 -36
  86. package/dist/lib/custom/Templates/templates-form.component.js.map +1 -1
  87. package/dist/lib/custom/Tests/test-form.component.js +8 -9
  88. package/dist/lib/custom/Tests/test-form.component.js.map +1 -1
  89. package/dist/lib/custom/Tests/test-run-feedback-form.component.js +4 -4
  90. package/dist/lib/custom/Tests/test-run-feedback-form.component.js.map +1 -1
  91. package/dist/lib/custom/Tests/test-run-form.component.js +7 -7
  92. package/dist/lib/custom/Tests/test-run-form.component.js.map +1 -1
  93. package/dist/lib/custom/Tests/test-suite-form.component.js +6 -7
  94. package/dist/lib/custom/Tests/test-suite-form.component.js.map +1 -1
  95. package/dist/lib/custom/Tests/test-suite-run-form.component.js +6 -7
  96. package/dist/lib/custom/Tests/test-suite-run-form.component.js.map +1 -1
  97. package/dist/lib/custom/ai-agent-run/ai-agent-run-analytics.component.js +381 -409
  98. package/dist/lib/custom/ai-agent-run/ai-agent-run-analytics.component.js.map +1 -1
  99. package/dist/lib/custom/ai-agent-run/ai-agent-run-data.service.d.ts.map +1 -1
  100. package/dist/lib/custom/ai-agent-run/ai-agent-run-data.service.js +1 -1
  101. package/dist/lib/custom/ai-agent-run/ai-agent-run-data.service.js.map +1 -1
  102. package/dist/lib/custom/ai-agent-run/ai-agent-run-timeline.component.d.ts.map +1 -1
  103. package/dist/lib/custom/ai-agent-run/ai-agent-run-timeline.component.js +74 -63
  104. package/dist/lib/custom/ai-agent-run/ai-agent-run-timeline.component.js.map +1 -1
  105. package/dist/lib/custom/ai-agent-run/ai-agent-run-visualization.component.js +10 -10
  106. package/dist/lib/custom/ai-agent-run/ai-agent-run-visualization.component.js.map +1 -1
  107. package/dist/lib/custom/ai-agent-run/ai-agent-run.component.d.ts.map +1 -1
  108. package/dist/lib/custom/ai-agent-run/ai-agent-run.component.js +352 -332
  109. package/dist/lib/custom/ai-agent-run/ai-agent-run.component.js.map +1 -1
  110. package/dist/lib/custom/custom-forms.module.d.ts +25 -29
  111. package/dist/lib/custom/custom-forms.module.d.ts.map +1 -1
  112. package/dist/lib/custom/custom-forms.module.js +57 -82
  113. package/dist/lib/custom/custom-forms.module.js.map +1 -1
  114. package/dist/lib/custom/shared/entity-selector-dialog.component.d.ts +4 -5
  115. package/dist/lib/custom/shared/entity-selector-dialog.component.d.ts.map +1 -1
  116. package/dist/lib/custom/shared/entity-selector-dialog.component.js +59 -66
  117. package/dist/lib/custom/shared/entity-selector-dialog.component.js.map +1 -1
  118. package/dist/lib/generated/Entities/MJAIAgent/mjaiagent.form.component.d.ts.map +1 -1
  119. package/dist/lib/generated/Entities/MJAIAgent/mjaiagent.form.component.js +176 -156
  120. package/dist/lib/generated/Entities/MJAIAgent/mjaiagent.form.component.js.map +1 -1
  121. package/dist/lib/generated/Entities/MJAIAgentClientTool/mjaiagentclienttool.form.component.d.ts +10 -0
  122. package/dist/lib/generated/Entities/MJAIAgentClientTool/mjaiagentclienttool.form.component.d.ts.map +1 -0
  123. package/dist/lib/generated/Entities/MJAIAgentClientTool/mjaiagentclienttool.form.component.js +65 -0
  124. package/dist/lib/generated/Entities/MJAIAgentClientTool/mjaiagentclienttool.form.component.js.map +1 -0
  125. package/dist/lib/generated/Entities/MJAIClientToolDefinition/mjaiclienttooldefinition.form.component.d.ts +10 -0
  126. package/dist/lib/generated/Entities/MJAIClientToolDefinition/mjaiclienttooldefinition.form.component.d.ts.map +1 -0
  127. package/dist/lib/generated/Entities/MJAIClientToolDefinition/mjaiclienttooldefinition.form.component.js +89 -0
  128. package/dist/lib/generated/Entities/MJAIClientToolDefinition/mjaiclienttooldefinition.form.component.js.map +1 -0
  129. package/dist/lib/generated/Entities/MJAIModel/mjaimodel.form.component.d.ts.map +1 -1
  130. package/dist/lib/generated/Entities/MJAIModel/mjaimodel.form.component.js +98 -44
  131. package/dist/lib/generated/Entities/MJAIModel/mjaimodel.form.component.js.map +1 -1
  132. package/dist/lib/generated/Entities/MJAIPromptRun/mjaipromptrun.form.component.d.ts.map +1 -1
  133. package/dist/lib/generated/Entities/MJAIPromptRun/mjaipromptrun.form.component.js +35 -17
  134. package/dist/lib/generated/Entities/MJAIPromptRun/mjaipromptrun.form.component.js.map +1 -1
  135. package/dist/lib/generated/Entities/MJContentItem/mjcontentitem.form.component.d.ts.map +1 -1
  136. package/dist/lib/generated/Entities/MJContentItem/mjcontentitem.form.component.js +79 -20
  137. package/dist/lib/generated/Entities/MJContentItem/mjcontentitem.form.component.js.map +1 -1
  138. package/dist/lib/generated/Entities/MJContentItemDuplicate/mjcontentitemduplicate.form.component.d.ts +10 -0
  139. package/dist/lib/generated/Entities/MJContentItemDuplicate/mjcontentitemduplicate.form.component.d.ts.map +1 -0
  140. package/dist/lib/generated/Entities/MJContentItemDuplicate/mjcontentitemduplicate.form.component.js +73 -0
  141. package/dist/lib/generated/Entities/MJContentItemDuplicate/mjcontentitemduplicate.form.component.js.map +1 -0
  142. package/dist/lib/generated/Entities/MJContentItemTag/mjcontentitemtag.form.component.js +11 -6
  143. package/dist/lib/generated/Entities/MJContentItemTag/mjcontentitemtag.form.component.js.map +1 -1
  144. package/dist/lib/generated/Entities/MJContentProcessRun/mjcontentprocessrun.form.component.d.ts.map +1 -1
  145. package/dist/lib/generated/Entities/MJContentProcessRun/mjcontentprocessrun.form.component.js +49 -8
  146. package/dist/lib/generated/Entities/MJContentProcessRun/mjcontentprocessrun.form.component.js.map +1 -1
  147. package/dist/lib/generated/Entities/MJContentProcessRunDetail/mjcontentprocessrundetail.form.component.d.ts +10 -0
  148. package/dist/lib/generated/Entities/MJContentProcessRunDetail/mjcontentprocessrundetail.form.component.d.ts.map +1 -0
  149. package/dist/lib/generated/Entities/MJContentProcessRunDetail/mjcontentprocessrundetail.form.component.js +107 -0
  150. package/dist/lib/generated/Entities/MJContentProcessRunDetail/mjcontentprocessrundetail.form.component.js.map +1 -0
  151. package/dist/lib/generated/Entities/MJContentProcessRunPromptRun/mjcontentprocessrunpromptrun.form.component.d.ts +10 -0
  152. package/dist/lib/generated/Entities/MJContentProcessRunPromptRun/mjcontentprocessrunpromptrun.form.component.d.ts.map +1 -0
  153. package/dist/lib/generated/Entities/MJContentProcessRunPromptRun/mjcontentprocessrunpromptrun.form.component.js +57 -0
  154. package/dist/lib/generated/Entities/MJContentProcessRunPromptRun/mjcontentprocessrunpromptrun.form.component.js.map +1 -0
  155. package/dist/lib/generated/Entities/MJContentSource/mjcontentsource.form.component.d.ts.map +1 -1
  156. package/dist/lib/generated/Entities/MJContentSource/mjcontentsource.form.component.js +71 -24
  157. package/dist/lib/generated/Entities/MJContentSource/mjcontentsource.form.component.js.map +1 -1
  158. package/dist/lib/generated/Entities/MJContentSourceType/mjcontentsourcetype.form.component.d.ts.map +1 -1
  159. package/dist/lib/generated/Entities/MJContentSourceType/mjcontentsourcetype.form.component.js +43 -15
  160. package/dist/lib/generated/Entities/MJContentSourceType/mjcontentsourcetype.form.component.js.map +1 -1
  161. package/dist/lib/generated/Entities/MJContentType/mjcontenttype.form.component.d.ts.map +1 -1
  162. package/dist/lib/generated/Entities/MJContentType/mjcontenttype.form.component.js +43 -17
  163. package/dist/lib/generated/Entities/MJContentType/mjcontenttype.form.component.js.map +1 -1
  164. package/dist/lib/generated/Entities/MJDuplicateRun/mjduplicaterun.form.component.js +21 -11
  165. package/dist/lib/generated/Entities/MJDuplicateRun/mjduplicaterun.form.component.js.map +1 -1
  166. package/dist/lib/generated/Entities/MJDuplicateRunDetail/mjduplicaterundetail.form.component.js +19 -13
  167. package/dist/lib/generated/Entities/MJDuplicateRunDetail/mjduplicaterundetail.form.component.js.map +1 -1
  168. package/dist/lib/generated/Entities/MJDuplicateRunDetailMatch/mjduplicaterundetailmatch.form.component.d.ts.map +1 -1
  169. package/dist/lib/generated/Entities/MJDuplicateRunDetailMatch/mjduplicaterundetailmatch.form.component.js +7 -9
  170. package/dist/lib/generated/Entities/MJDuplicateRunDetailMatch/mjduplicaterundetailmatch.form.component.js.map +1 -1
  171. package/dist/lib/generated/Entities/MJEntity/mjentity.form.component.d.ts.map +1 -1
  172. package/dist/lib/generated/Entities/MJEntity/mjentity.form.component.js +78 -60
  173. package/dist/lib/generated/Entities/MJEntity/mjentity.form.component.js.map +1 -1
  174. package/dist/lib/generated/Entities/MJEntityDocument/mjentitydocument.form.component.d.ts.map +1 -1
  175. package/dist/lib/generated/Entities/MJEntityDocument/mjentitydocument.form.component.js +24 -6
  176. package/dist/lib/generated/Entities/MJEntityDocument/mjentitydocument.form.component.js.map +1 -1
  177. package/dist/lib/generated/Entities/MJEntityField/mjentityfield.form.component.d.ts.map +1 -1
  178. package/dist/lib/generated/Entities/MJEntityField/mjentityfield.form.component.js +21 -9
  179. package/dist/lib/generated/Entities/MJEntityField/mjentityfield.form.component.js.map +1 -1
  180. package/dist/lib/generated/Entities/MJEntityRecordDocument/mjentityrecorddocument.form.component.d.ts.map +1 -1
  181. package/dist/lib/generated/Entities/MJEntityRecordDocument/mjentityrecorddocument.form.component.js +23 -5
  182. package/dist/lib/generated/Entities/MJEntityRecordDocument/mjentityrecorddocument.form.component.js.map +1 -1
  183. package/dist/lib/generated/Entities/MJKnowledgeHubSavedSearch/mjknowledgehubsavedsearch.form.component.d.ts +10 -0
  184. package/dist/lib/generated/Entities/MJKnowledgeHubSavedSearch/mjknowledgehubsavedsearch.form.component.d.ts.map +1 -0
  185. package/dist/lib/generated/Entities/MJKnowledgeHubSavedSearch/mjknowledgehubsavedsearch.form.component.js +77 -0
  186. package/dist/lib/generated/Entities/MJKnowledgeHubSavedSearch/mjknowledgehubsavedsearch.form.component.js.map +1 -0
  187. package/dist/lib/generated/Entities/MJScheduledAction/mjscheduledaction.form.component.d.ts.map +1 -1
  188. package/dist/lib/generated/Entities/MJScheduledAction/mjscheduledaction.form.component.js +22 -4
  189. package/dist/lib/generated/Entities/MJScheduledAction/mjscheduledaction.form.component.js.map +1 -1
  190. package/dist/lib/generated/Entities/MJTag/mjtag.form.component.d.ts.map +1 -1
  191. package/dist/lib/generated/Entities/MJTag/mjtag.form.component.js +139 -19
  192. package/dist/lib/generated/Entities/MJTag/mjtag.form.component.js.map +1 -1
  193. package/dist/lib/generated/Entities/MJTagAuditLog/mjtagauditlog.form.component.d.ts +10 -0
  194. package/dist/lib/generated/Entities/MJTagAuditLog/mjtagauditlog.form.component.d.ts.map +1 -0
  195. package/dist/lib/generated/Entities/MJTagAuditLog/mjtagauditlog.form.component.js +67 -0
  196. package/dist/lib/generated/Entities/MJTagAuditLog/mjtagauditlog.form.component.js.map +1 -0
  197. package/dist/lib/generated/Entities/MJTagCoOccurrence/mjtagcooccurrence.form.component.d.ts +10 -0
  198. package/dist/lib/generated/Entities/MJTagCoOccurrence/mjtagcooccurrence.form.component.d.ts.map +1 -0
  199. package/dist/lib/generated/Entities/MJTagCoOccurrence/mjtagcooccurrence.form.component.js +65 -0
  200. package/dist/lib/generated/Entities/MJTagCoOccurrence/mjtagcooccurrence.form.component.js.map +1 -0
  201. package/dist/lib/generated/Entities/MJTaggedItem/mjtaggeditem.form.component.js +10 -8
  202. package/dist/lib/generated/Entities/MJTaggedItem/mjtaggeditem.form.component.js.map +1 -1
  203. package/dist/lib/generated/Entities/MJUser/mjuser.form.component.d.ts.map +1 -1
  204. package/dist/lib/generated/Entities/MJUser/mjuser.form.component.js +226 -154
  205. package/dist/lib/generated/Entities/MJUser/mjuser.form.component.js.map +1 -1
  206. package/dist/lib/generated/Entities/MJVectorIndex/mjvectorindex.form.component.d.ts.map +1 -1
  207. package/dist/lib/generated/Entities/MJVectorIndex/mjvectorindex.form.component.js +41 -5
  208. package/dist/lib/generated/Entities/MJVectorIndex/mjvectorindex.form.component.js.map +1 -1
  209. package/dist/lib/generated/generated-forms.module.d.ts +286 -279
  210. package/dist/lib/generated/generated-forms.module.d.ts.map +1 -1
  211. package/dist/lib/generated/generated-forms.module.js +192 -214
  212. package/dist/lib/generated/generated-forms.module.js.map +1 -1
  213. package/dist/lib/shared/components/template-editor.component.js +14 -15
  214. package/dist/lib/shared/components/template-editor.component.js.map +1 -1
  215. package/package.json +34 -41
package/dist/lib/custom/Entities/entity-form.component.js CHANGED
@@ -3577,7 +3577,7 @@ let MJEntityFormComponentExtended = class MJEntityFormComponentExtended extends
3577
3577
  i0.ɵɵconditionalCreate(0, MJEntityFormComponentExtended_Conditional_0_Template, 68, 36, "div", 0)(1, MJEntityFormComponentExtended_Conditional_1_Template, 3, 3);
3578
3578
  } if (rf & 2) {
3579
3579
  i0.ɵɵconditional(!ctx.isExplorerLoading && ctx.entity ? 0 : 1);
3580
- } }, dependencies: [i1.NgClass, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.CodeEditorComponent, i4.LoadingComponent, i5.ERDCompositeComponent, i6.EntityViewerComponent, i1.SlicePipe, i1.DecimalPipe, i1.DatePipe], styles: ["\n\n\n\n\n\n\n\n[_nghost-%COMP%] {\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[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--bg-secondary);\n overflow: hidden;\n}\n\n\n\n\n\n\n.explorer-header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n flex: 1;\n min-width: 0;\n}\n\n.entity-icon[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n min-width: 0;\n flex: 1;\n}\n\n.entity-title-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.entity-name[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n font-family: 'SF Mono', 'Consolas', monospace;\n font-size: 12px;\n color: var(--text-muted);\n}\n\n.separator[_ngcontent-%COMP%] {\n color: var(--border-color);\n}\n\n.entity-description[_ngcontent-%COMP%] {\n color: var(--text-secondary);\n}\n\n\n\n.header-stats[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n background: var(--bg-tertiary);\n}\n\n.stat-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n color: var(--text-muted);\n margin-bottom: 4px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n font-size: 18px;\n font-weight: 600;\n color: var(--text-primary);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n\n\n\n\n\n.explorer-body[_ngcontent-%COMP%] {\n display: flex;\n flex: 1;\n overflow: hidden;\n}\n\n\n\n.nav-rail[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 18px;\n margin-bottom: 4px;\n transition: transform var(--transition-fast);\n}\n\n.nav-label[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n background: var(--bg-tertiary);\n color: var(--text-primary);\n}\n\n.nav-item[_ngcontent-%COMP%]:hover i[_ngcontent-%COMP%] {\n transform: scale(1.1);\n}\n\n.nav-item.active[_ngcontent-%COMP%] {\n background: var(--accent-light);\n color: var(--accent-color);\n}\n\n.nav-item.active[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n transform: scale(1.05);\n}\n\n.nav-item.active[_ngcontent-%COMP%]::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\n\n\n\n.main-canvas[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n margin-right: var(--detail-panel-width);\n}\n\n\n\n.section[_ngcontent-%COMP%] {\n padding: 24px;\n}\n\n.section-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 20px;\n}\n\n.section-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n\n\n.search-box[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--text-muted);\n}\n\n.search-box[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] input[_ngcontent-%COMP%]::placeholder {\n color: var(--text-muted);\n}\n\n\n\n.view-toggle[_ngcontent-%COMP%] {\n display: flex;\n border: 1px solid var(--border-color);\n border-radius: var(--radius-md);\n overflow: hidden;\n}\n\n.toggle-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:not(:last-child) {\n border-right: 1px solid var(--border-color);\n}\n\n.toggle-btn[_ngcontent-%COMP%]:hover {\n background: var(--bg-tertiary);\n}\n\n.toggle-btn.active[_ngcontent-%COMP%] {\n background: var(--accent-color);\n color: white;\n}\n\n\n\n.depth-selector[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-left: auto;\n}\n\n.depth-label[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--text-secondary);\n font-weight: 500;\n}\n\n.depth-buttons[_ngcontent-%COMP%] {\n display: flex;\n border: 1px solid var(--border-color);\n border-radius: var(--radius-md);\n overflow: hidden;\n}\n\n.depth-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:not(:last-child) {\n border-right: 1px solid var(--border-color);\n}\n\n.depth-btn[_ngcontent-%COMP%]:hover {\n background: var(--bg-tertiary);\n}\n\n.depth-btn.active[_ngcontent-%COMP%] {\n background: var(--accent-color);\n color: white;\n}\n\n\n\n.header-controls[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.view-mode-toggle[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n}\n\n.control-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--bg-tertiary);\n color: var(--text-primary);\n}\n\n.control-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n\n\n.fields-list-view[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] .list-col[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] .list-col.sortable[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] .list-col.sortable[_ngcontent-%COMP%]:hover {\n color: var(--accent-color);\n}\n\n.list-header[_ngcontent-%COMP%] .list-col.sortable.sorted[_ngcontent-%COMP%] {\n color: var(--accent-color);\n}\n\n.sort-icon[_ngcontent-%COMP%] {\n font-size: 10px;\n opacity: 0.4;\n transition: opacity var(--transition-fast);\n}\n\n.list-col.sortable[_ngcontent-%COMP%]:hover .sort-icon[_ngcontent-%COMP%] {\n opacity: 0.7;\n}\n\n.list-col.sortable.sorted[_ngcontent-%COMP%] .sort-icon[_ngcontent-%COMP%] {\n opacity: 1;\n}\n\n.list-body[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n}\n\n.list-row[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n background: var(--bg-secondary);\n}\n\n.list-row.selected[_ngcontent-%COMP%] {\n background: var(--accent-light);\n border-left: 3px solid var(--accent-color);\n padding-left: 17px;\n}\n\n.list-row[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n\n\n.col-seq[_ngcontent-%COMP%] {\n text-align: center;\n}\n\n.seq-num[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover .seq-num[_ngcontent-%COMP%], \n.list-row.selected[_ngcontent-%COMP%] .seq-num[_ngcontent-%COMP%] {\n background: var(--accent-color);\n color: white;\n}\n\n.col-name[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n min-width: 0;\n}\n\n.field-type-icon[_ngcontent-%COMP%] {\n color: var(--accent-color);\n font-size: 16px;\n width: 20px;\n flex-shrink: 0;\n}\n\n.field-name-text[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n min-width: 0;\n}\n\n.display-name-text[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n font-family: 'SF Mono', 'Consolas', monospace;\n font-size: 12px;\n color: var(--text-primary);\n}\n\n.length-value.muted[_ngcontent-%COMP%] {\n color: var(--text-muted);\n}\n\n.required-indicator[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n color: var(--danger-color);\n background: color-mix(in srgb, var(--mj-status-error) 10%, transparent);\n}\n\n.required-indicator.required[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--danger-color);\n}\n\n.required-indicator.optional[_ngcontent-%COMP%] {\n color: var(--text-muted);\n background: transparent;\n}\n\n.flag-badges[_ngcontent-%COMP%] {\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n}\n\n.flag-badge[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n background: var(--mj-status-warning);\n color: var(--mj-bg-surface);\n}\n\n.flag-badge.fk[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: white;\n}\n\n.flag-badge.encrypted[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: white;\n}\n\n.col-desc[_ngcontent-%COMP%] {\n min-width: 0;\n}\n\n.desc-text[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 32px;\n opacity: 0.5;\n}\n\n.list-empty[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n\n\n\n\n\n.stats-cards[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 16px;\n}\n\n.stat-card[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n\n.stat-card.clickable[_ngcontent-%COMP%]:hover {\n border-color: var(--accent-color);\n box-shadow: var(--shadow-md);\n transform: translateY(-2px);\n}\n\n.stat-card.clickable[_ngcontent-%COMP%]:hover .stat-card-action[_ngcontent-%COMP%] {\n opacity: 1;\n transform: translateX(0);\n}\n\n.stat-card-action[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.stat-card-header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.stat-card-body[_ngcontent-%COMP%] .stat-main[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] .stat-details[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n font-size: 12px;\n color: var(--text-muted);\n}\n\n\n\n.info-panel[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--accent-color);\n}\n\n\n\n.capability-tags[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.capability-tag[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n.capability-tag.disabled[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n}\n\n\n\n.info-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 12px;\n}\n\n.info-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.info-label[_ngcontent-%COMP%] {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--text-muted);\n}\n\n.info-value[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--text-primary);\n}\n\n.info-value.code[_ngcontent-%COMP%] {\n font-family: 'SF Mono', 'Consolas', monospace;\n font-size: 13px;\n color: var(--accent-dark);\n}\n\n\n\n\n\n\n.fields-content[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n}\n\n.field-group[_ngcontent-%COMP%] {\n border-bottom: 1px solid var(--border-light);\n}\n\n.field-group[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.group-header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n background: var(--bg-tertiary);\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--text-muted);\n width: 16px;\n transition: transform var(--transition-fast);\n}\n\n.group-icon[_ngcontent-%COMP%] {\n font-size: 16px;\n color: var(--accent-color);\n width: 20px;\n text-align: center;\n}\n\n.group-label[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n border-top: 1px solid var(--border-light);\n background: var(--bg-secondary);\n}\n\n.field-item[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.field-item[_ngcontent-%COMP%]:hover {\n background: var(--accent-light);\n}\n\n.field-item.selected[_ngcontent-%COMP%] {\n background: var(--accent-light);\n border-left: 3px solid var(--accent-color);\n padding-left: 45px;\n}\n\n.field-icon[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.field-name[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: var(--text-primary);\n}\n\n.field-db-name[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 2px;\n font-size: 12px;\n}\n\n.field-type[_ngcontent-%COMP%] {\n font-family: 'SF Mono', 'Consolas', monospace;\n color: var(--text-muted);\n}\n\n.field-nullable[_ngcontent-%COMP%] {\n color: var(--danger-color);\n}\n\n.field-related[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n color: var(--accent-color);\n cursor: pointer;\n}\n\n.field-related[_ngcontent-%COMP%]:hover {\n text-decoration: underline;\n}\n\n.field-badges[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n}\n\n.badge[_ngcontent-%COMP%] {\n padding: 2px 6px;\n border-radius: var(--radius-sm);\n font-size: 10px;\n font-weight: 600;\n}\n\n.badge.pk[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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\n\n\n\n.relationships-graph[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] mj-entity-erd[_ngcontent-%COMP%], \n.relationships-graph[_ngcontent-%COMP%] mj-erd-composite[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n flex: 1;\n}\n\n\n\n.relationships-graph[_ngcontent-%COMP%] .erd-splitter[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n}\n\n.relationships-graph[_ngcontent-%COMP%] kendo-splitter-pane[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n}\n\n.relationships-graph[_ngcontent-%COMP%] mj-entity-details[_ngcontent-%COMP%] {\n height: 100%;\n overflow: auto;\n}\n\n.graph-placeholder[_ngcontent-%COMP%] {\n text-align: center;\n color: var(--text-muted);\n}\n\n.graph-placeholder[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 16px;\n opacity: 0.5;\n}\n\n.graph-placeholder[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n}\n\n.graph-placeholder[_ngcontent-%COMP%] .hint[_ngcontent-%COMP%] {\n font-size: 12px;\n margin-top: 8px;\n}\n\n.relationships-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n.relationship-group[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--accent-color);\n}\n\n.relationship-items[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n}\n\n.relationship-item[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.relationship-item[_ngcontent-%COMP%]:hover {\n background: var(--accent-light);\n}\n\n.relationship-item.hidden[_ngcontent-%COMP%] {\n display: none;\n}\n\n.rel-icon[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.rel-entity[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: var(--accent-color);\n cursor: pointer;\n}\n\n.rel-entity[_ngcontent-%COMP%]:hover {\n text-decoration: underline;\n}\n\n.rel-field[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--text-muted);\n margin-top: 2px;\n}\n\n.rel-meta[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.rel-type[_ngcontent-%COMP%], \n.rel-display-type[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n color: var(--success-color);\n}\n\n\n\n.relationship-group-title[_ngcontent-%COMP%] .group-count[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n padding: 8px 0;\n}\n\n.relationship-item-grouped[_ngcontent-%COMP%] {\n padding: 12px 20px;\n border-bottom: 1px solid var(--border-light);\n}\n\n.relationship-item-grouped[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.rel-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 10px;\n}\n\n.rel-icon.outgoing[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n font-size: 15px;\n font-weight: 600;\n color: var(--text-primary);\n}\n\n.rel-fields-chips[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding-left: 44px; \n\n}\n\n.field-chip[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n.field-chip.outgoing[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary);\n color: white;\n}\n\n.field-chip.incoming[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n background: var(--mj-status-success);\n color: white;\n}\n\n.field-chip[_ngcontent-%COMP%] .bundle-icon[_ngcontent-%COMP%] {\n font-size: 9px;\n margin-left: 2px;\n opacity: 0.8;\n}\n\n\n\n\n\n\n.permissions-matrix[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n width: 100%;\n border-collapse: collapse;\n}\n\n.matrix-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%], \n.matrix-table[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n padding: 12px 16px;\n text-align: left;\n border-bottom: 1px solid var(--border-light);\n}\n\n.matrix-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] th.center[_ngcontent-%COMP%], \n.matrix-table[_ngcontent-%COMP%] td.center[_ngcontent-%COMP%] {\n text-align: center;\n}\n\n.matrix-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover {\n background: var(--bg-secondary);\n}\n\n.role-name[_ngcontent-%COMP%] {\n font-weight: 500;\n color: var(--text-primary);\n}\n\n.permission-icon[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.permission-icon.granted[_ngcontent-%COMP%] {\n color: var(--success-color);\n}\n\n.permission-icon.denied[_ngcontent-%COMP%] {\n color: var(--text-muted);\n}\n\n.rls-info[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n}\n\n.rls-badge[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n color: var(--text-muted);\n font-size: 12px;\n}\n\n\n\n.api-capabilities[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 12px;\n}\n\n.capability-item[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.capability-item.enabled[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--success-color);\n}\n\n\n\n\n\n\n.lineage-diagram[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n text-align: center;\n}\n\n.lineage-stage[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.lineage-item[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--accent-color);\n}\n\n.lineage-arrow[_ngcontent-%COMP%] {\n font-size: 24px;\n color: var(--text-muted);\n}\n\n.entity-node[_ngcontent-%COMP%] .entity-box[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] .entity-box[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 24px;\n}\n\n.tracking-config[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 12px;\n}\n\n.config-item[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] .config-label[_ngcontent-%COMP%] {\n color: var(--text-muted);\n}\n\n.config-item[_ngcontent-%COMP%] .config-value[_ngcontent-%COMP%] {\n font-weight: 500;\n color: var(--text-primary);\n}\n\n\n\n\n\n\n.history-config[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n}\n\n.config-status[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 24px;\n color: var(--text-muted);\n margin-top: 2px;\n}\n\n.config-status.enabled[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--success-color);\n}\n\n.config-text[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n display: block;\n font-size: 16px;\n color: var(--text-primary);\n margin-bottom: 4px;\n}\n\n.config-text[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--text-secondary);\n}\n\n.history-info[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 16px;\n}\n\n.info-card[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--accent-color);\n}\n\n.info-card[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--text-secondary);\n line-height: 1.6;\n margin: 0;\n}\n\n.info-card[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.audit-fields-list[_ngcontent-%COMP%] li[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] li[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n\n\n\n\n\n.settings-panel[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.setting-item[_ngcontent-%COMP%] {\n padding: 12px;\n background: var(--bg-tertiary);\n border-radius: var(--radius-md);\n}\n\n.setting-name[_ngcontent-%COMP%] {\n font-weight: 500;\n color: var(--text-primary);\n margin-bottom: 4px;\n}\n\n.setting-value[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%] {\n display: block;\n max-height: 300px;\n}\n\n.setting-value-json[_ngcontent-%COMP%] .cm-editor {\n font-size: 12px;\n background: var(--mj-bg-surface-sunken);\n}\n\n.setting-value-json[_ngcontent-%COMP%] .cm-gutters {\n background: var(--mj-bg-surface-sunken);\n border-right: 1px solid var(--border-color);\n}\n\n.setting-comment[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--text-muted);\n margin-top: 8px;\n}\n\n.fts-config[_ngcontent-%COMP%], \n.settings-section[_ngcontent-%COMP%] .config-grid[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.config-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.config-row[_ngcontent-%COMP%] .config-label[_ngcontent-%COMP%] {\n width: 100px;\n font-size: 12px;\n color: var(--text-muted);\n}\n\n.config-row[_ngcontent-%COMP%] .config-value[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--text-primary);\n}\n\n.config-row[_ngcontent-%COMP%] .config-value.code[_ngcontent-%COMP%] {\n font-family: 'SF Mono', 'Consolas', monospace;\n font-size: 12px;\n color: var(--accent-dark);\n}\n\n.config-row[_ngcontent-%COMP%] .config-value.enabled[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--success-color);\n}\n\n\n\n\n\n\n.detail-panel[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n transform: translateX(0);\n}\n\n.panel-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--border-color);\n flex-shrink: 0;\n}\n\n.panel-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--text-primary);\n}\n\n.close-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n background: var(--bg-tertiary);\n color: var(--text-primary);\n}\n\n.panel-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n}\n\n.detail-section[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n}\n\n.detail-section[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n\n.detail-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 600;\n color: var(--text-primary);\n margin: 0 0 8px 0;\n}\n\n.detail-section[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--text-secondary);\n line-height: 1.5;\n margin: 0;\n}\n\n.detail-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 12px;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.detail-item[_ngcontent-%COMP%] .label[_ngcontent-%COMP%] {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--text-muted);\n}\n\n.detail-item[_ngcontent-%COMP%] .value[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--text-primary);\n}\n\n.detail-item[_ngcontent-%COMP%] .value.code[_ngcontent-%COMP%] {\n font-family: 'SF Mono', 'Consolas', monospace;\n font-size: 12px;\n color: var(--accent-dark);\n}\n\n.detail-item[_ngcontent-%COMP%] .value.link[_ngcontent-%COMP%] {\n color: var(--accent-color);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n}\n\n.detail-item[_ngcontent-%COMP%] .value.link[_ngcontent-%COMP%]:hover {\n text-decoration: underline;\n}\n\n.value-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n max-height: 200px;\n overflow-y: auto;\n}\n\n.value-item[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n color: var(--text-primary);\n}\n\n\n\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n text-align: center;\n color: var(--text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 32px;\n margin-bottom: 12px;\n opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n}\n\n\n\n\n\n\n.explorer-loading[_ngcontent-%COMP%], \n.explorer-error[_ngcontent-%COMP%], \n.explorer-empty[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.explorer-empty[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 16px;\n opacity: 0.5;\n}\n\n.explorer-error[_ngcontent-%COMP%] {\n color: var(--danger-color);\n}\n\n.explorer-error[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n opacity: 1;\n}\n\n\n\n\n\n\n\n\n.isa-badge[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 22%, transparent);\n}\n\n.isa-badge.parent-type[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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\n\n.isa-breadcrumb[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n opacity: 0.7;\n}\n\n\n\n.isa-panel[_ngcontent-%COMP%] {\n border-left: 3px solid var(--mj-brand-primary);\n}\n\n.isa-info-row[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 6%, transparent);\n}\n\n.isa-info-row.virtual-info[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.isa-info-row[_ngcontent-%COMP%] .code[_ngcontent-%COMP%] {\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\n\n.isa-chain[_ngcontent-%COMP%] {\n padding: 8px 0;\n}\n\n.isa-chain-label[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n padding: 6px 0;\n}\n\n.isa-node[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: white;\n}\n\n.isa-node.parent[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n color: var(--text-muted);\n font-size: 11px;\n}\n\n.isa-inherited-fields[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-brand-primary);\n}\n\n\n\n.isa-children[_ngcontent-%COMP%] {\n padding: 8px 0;\n}\n\n.isa-child-list[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n padding: 4px 0;\n}\n\n.isa-child-chip[_ngcontent-%COMP%] {\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\n\n.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.clickable[_ngcontent-%COMP%]:hover {\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.isa-node.parent.clickable[_ngcontent-%COMP%]: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[_ngcontent-%COMP%]: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\n\n.badge.inherited[_ngcontent-%COMP%], \n.flag-badge.inherited[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 9px;\n}\n\n\n\n.isa-source-section[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.isa-source-section[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 4px;\n}\n\n\n\n.isa-settings-panel[_ngcontent-%COMP%] {\n border-left: 3px solid var(--mj-brand-primary);\n}\n\n.isa-settings-panel[_ngcontent-%COMP%] .link[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n cursor: pointer;\n transition: color 0.15s ease;\n}\n\n.isa-settings-panel[_ngcontent-%COMP%] .link[_ngcontent-%COMP%]:hover {\n color: var(--mj-brand-primary);\n text-decoration: underline;\n}\n\n.isa-settings-panel[_ngcontent-%COMP%] .muted[_ngcontent-%COMP%] {\n color: var(--text-muted);\n}\n\n\n\n.isa-field-inspector[_ngcontent-%COMP%] {\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px solid var(--border-color);\n}\n\n.isa-field-inspector[_ngcontent-%COMP%] > .isa-chain-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.isa-inspector-groups[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-top: 8px;\n}\n\n.isa-inspector-group[_ngcontent-%COMP%] {\n border-radius: 6px;\n padding: 8px 12px;\n border: 1px solid var(--border-color);\n}\n\n.isa-inspector-group.own[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 6px;\n}\n\n.isa-inspector-entity[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--text-muted);\n font-weight: 500;\n}\n\n.isa-inspector-fields[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n}\n\n.isa-inspector-field[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--text-muted);\n font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;\n}\n\n\n\n.isa-siblings[_ngcontent-%COMP%] {\n padding: 8px 0;\n}\n\n.isa-sibling-chip[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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\n\n.isa-child-count[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n\n\n\n\n.data-section[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 0;\n overflow: hidden;\n}\n\n\n\n\n\n\n.organic-key-cards[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 4px 0;\n}\n\n.organic-key-card[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-border-strong);\n}\n\n.organic-key-card.incoming[_ngcontent-%COMP%] {\n border-left: 3px solid var(--mj-brand-primary);\n}\n\n.organic-key-card-header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.organic-key-badges[_ngcontent-%COMP%] {\n display: flex;\n gap: 6px;\n flex-shrink: 0;\n}\n\n.organic-key-badge[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.organic-key-target[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%], \n.organic-key-card.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n\n.organic-key-target.clickable[_ngcontent-%COMP%]:hover, \n.organic-key-card.clickable[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.target-main[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n min-width: 0;\n flex: 1;\n}\n\n.target-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.target-entity-icon[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-muted);\n width: 16px;\n text-align: center;\n}\n\n.target-entity-name[_ngcontent-%COMP%] {\n font-weight: 500;\n color: var(--mj-text-primary);\n min-width: 0;\n}\n\n.target-nav-icon[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover .target-nav-icon[_ngcontent-%COMP%], \n.organic-key-card.clickable[_ngcontent-%COMP%]:hover .target-nav-icon[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.target-match-detail[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding-left: 24px;\n}\n\n.match-type-badge[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 4px 0;\n font-size: 12px;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-weight: 500;\n flex-shrink: 0;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.empty-state-card[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 16px;\n opacity: 0.3;\n}\n\n.empty-state-card[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 13px;\n line-height: 1.5;\n max-width: 500px;\n margin: 0;\n}", ".k-pane[_ngcontent-%COMP%] {\n background-color: var(--mj-bg-surface);\n}\n\n.content-margin[_ngcontent-%COMP%] {\n margin: 10px;\n}\n\n\na[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: bolder;\n}\n\n.tab-header-icon[_ngcontent-%COMP%] {\n margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] {\n display: block;\n flex-direction: column;\n background-color: var(--mj-bg-surface);\n padding: 0;\n min-height: 100vh;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n margin-top: 0px;\n background-color: var(--mj-bg-surface);\n}\n\nbutton[_ngcontent-%COMP%] {\n margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n margin-bottom: 10px;\n}\n\n.k-splitter[_ngcontent-%COMP%] {\n border-width: 0px;\n}\n\n.record-form-row[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: start;\n gap: 10px;\n margin-bottom: 12px;\n padding-top: 5px;\n padding-bottom: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] .record-form-row[_ngcontent-%COMP%] > [_ngcontent-%COMP%]:first-child {\n font-weight: bold;\n padding-right: 10px;\n}\n\n.record-form[_ngcontent-%COMP%] .record-form-row[_ngcontent-%COMP%] > span[_ngcontent-%COMP%] {\n white-space: pre-line;\n max-height: 300px;\n overflow: auto;\n}\n\n@media (min-width: 768px) {\n .record-form-row[_ngcontent-%COMP%] {\n flex-direction: row;\n align-items: center;\n }\n\n .record-form-row[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n width: 240px;\n margin-bottom: 0;\n }\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 16px;\n background-color: var(--mj-bg-surface);\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%] > .form-card[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%] .related-entity-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr;\n gap: 16px;\n width: 100%;\n}\n\n\n\n@media (min-width: 1400px) {\n .form-panels-container[_ngcontent-%COMP%] .related-entity-grid[_ngcontent-%COMP%] {\n grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n }\n}\n\n.form-card[_ngcontent-%COMP%] {\n background: 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[_ngcontent-%COMP%] {\n overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 24px;\n background: 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[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n}\n\n.collapsible-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 20px;\n color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.collapsible-header[_ngcontent-%COMP%] .collapse-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n transition: transform 0.3s ease;\n}\n\n.collapsible-body[_ngcontent-%COMP%] {\n max-height: 2000px;\n overflow: hidden;\n transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n opacity: 1;\n}\n\n.collapsible-body.collapsed[_ngcontent-%COMP%] {\n max-height: 0;\n padding: 0;\n opacity: 0;\n}\n\n.form-body[_ngcontent-%COMP%] {\n padding: 24px;\n}\n\n\n\n.form-card.related-entity[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%] .collapsible-header[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%] .collapsible-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-card);\n border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%] .collapsible-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n\n\n.form-section-controls[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] .control-group[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n.form-section-controls[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n padding: 8px 14px;\n font-size: 13px;\n border: 1px solid 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[_ngcontent-%COMP%] button[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:active {\n transform: translateY(0);\n}\n\n.form-section-controls[_ngcontent-%COMP%] button[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 0;\n font-size: 14px;\n}\n\n.form-section-controls[_ngcontent-%COMP%] .section-search[_ngcontent-%COMP%] {\n padding: 8px 14px;\n font-size: 13px;\n border: 1px solid 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[_ngcontent-%COMP%] .section-search[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls[_ngcontent-%COMP%] .section-search[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n.form-section-controls[_ngcontent-%COMP%] .section-count[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-muted);\n margin-left: auto;\n font-weight: 500;\n}\n\n\n\n.form-card.search-hidden[_ngcontent-%COMP%] {\n display: none;\n}\n\n\n\n.section-count-badge[_ngcontent-%COMP%] {\n background: 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\n\n.collapsible-title[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] .search-highlight[_ngcontent-%COMP%] {\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\n\n.collapsible-title[_ngcontent-%COMP%] .row-count-badge[_ngcontent-%COMP%] {\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\n\n.collapsible-title[_ngcontent-%COMP%] .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n background: var(--mj-text-muted);\n}"], changeDetection: 0 }); }
3580
+ } }, dependencies: [i1.NgClass, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.CodeEditorComponent, i4.LoadingComponent, i5.ERDCompositeComponent, i6.EntityViewerComponent, i1.SlicePipe, i1.DecimalPipe, i1.DatePipe], styles: ["\n\n\n\n\n\n\n\n[_nghost-%COMP%] {\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[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--bg-secondary);\n overflow: hidden;\n}\n\n\n\n\n\n\n.explorer-header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n flex: 1;\n min-width: 0;\n}\n\n.entity-icon[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n min-width: 0;\n flex: 1;\n}\n\n.entity-title-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.entity-name[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n font-family: 'SF Mono', 'Consolas', monospace;\n font-size: 12px;\n color: var(--text-muted);\n}\n\n.separator[_ngcontent-%COMP%] {\n color: var(--border-color);\n}\n\n.entity-description[_ngcontent-%COMP%] {\n color: var(--text-secondary);\n}\n\n\n\n.header-stats[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n background: var(--bg-tertiary);\n}\n\n.stat-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n color: var(--text-muted);\n margin-bottom: 4px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n font-size: 18px;\n font-weight: 600;\n color: var(--text-primary);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n\n\n\n\n\n.explorer-body[_ngcontent-%COMP%] {\n display: flex;\n flex: 1;\n overflow: hidden;\n}\n\n\n\n.nav-rail[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 18px;\n margin-bottom: 4px;\n transition: transform var(--transition-fast);\n}\n\n.nav-label[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n background: var(--bg-tertiary);\n color: var(--text-primary);\n}\n\n.nav-item[_ngcontent-%COMP%]:hover i[_ngcontent-%COMP%] {\n transform: scale(1.1);\n}\n\n.nav-item.active[_ngcontent-%COMP%] {\n background: var(--accent-light);\n color: var(--accent-color);\n}\n\n.nav-item.active[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n transform: scale(1.05);\n}\n\n.nav-item.active[_ngcontent-%COMP%]::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\n\n\n\n.main-canvas[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n margin-right: var(--detail-panel-width);\n}\n\n\n\n.section[_ngcontent-%COMP%] {\n padding: 24px;\n}\n\n.section-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 20px;\n}\n\n.section-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n\n\n.search-box[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--text-muted);\n}\n\n.search-box[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] input[_ngcontent-%COMP%]::placeholder {\n color: var(--text-muted);\n}\n\n\n\n.view-toggle[_ngcontent-%COMP%] {\n display: flex;\n border: 1px solid var(--border-color);\n border-radius: var(--radius-md);\n overflow: hidden;\n}\n\n.toggle-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:not(:last-child) {\n border-right: 1px solid var(--border-color);\n}\n\n.toggle-btn[_ngcontent-%COMP%]:hover {\n background: var(--bg-tertiary);\n}\n\n.toggle-btn.active[_ngcontent-%COMP%] {\n background: var(--accent-color);\n color: white;\n}\n\n\n\n.depth-selector[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-left: auto;\n}\n\n.depth-label[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--text-secondary);\n font-weight: 500;\n}\n\n.depth-buttons[_ngcontent-%COMP%] {\n display: flex;\n border: 1px solid var(--border-color);\n border-radius: var(--radius-md);\n overflow: hidden;\n}\n\n.depth-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:not(:last-child) {\n border-right: 1px solid var(--border-color);\n}\n\n.depth-btn[_ngcontent-%COMP%]:hover {\n background: var(--bg-tertiary);\n}\n\n.depth-btn.active[_ngcontent-%COMP%] {\n background: var(--accent-color);\n color: white;\n}\n\n\n\n.header-controls[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.view-mode-toggle[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n}\n\n.control-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--bg-tertiary);\n color: var(--text-primary);\n}\n\n.control-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n\n\n.fields-list-view[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] .list-col[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] .list-col.sortable[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] .list-col.sortable[_ngcontent-%COMP%]:hover {\n color: var(--accent-color);\n}\n\n.list-header[_ngcontent-%COMP%] .list-col.sortable.sorted[_ngcontent-%COMP%] {\n color: var(--accent-color);\n}\n\n.sort-icon[_ngcontent-%COMP%] {\n font-size: 10px;\n opacity: 0.4;\n transition: opacity var(--transition-fast);\n}\n\n.list-col.sortable[_ngcontent-%COMP%]:hover .sort-icon[_ngcontent-%COMP%] {\n opacity: 0.7;\n}\n\n.list-col.sortable.sorted[_ngcontent-%COMP%] .sort-icon[_ngcontent-%COMP%] {\n opacity: 1;\n}\n\n.list-body[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n}\n\n.list-row[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n background: var(--bg-secondary);\n}\n\n.list-row.selected[_ngcontent-%COMP%] {\n background: var(--accent-light);\n border-left: 3px solid var(--accent-color);\n padding-left: 17px;\n}\n\n.list-row[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n\n\n.col-seq[_ngcontent-%COMP%] {\n text-align: center;\n}\n\n.seq-num[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover .seq-num[_ngcontent-%COMP%], \n.list-row.selected[_ngcontent-%COMP%] .seq-num[_ngcontent-%COMP%] {\n background: var(--accent-color);\n color: white;\n}\n\n.col-name[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n min-width: 0;\n}\n\n.field-type-icon[_ngcontent-%COMP%] {\n color: var(--accent-color);\n font-size: 16px;\n width: 20px;\n flex-shrink: 0;\n}\n\n.field-name-text[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n min-width: 0;\n}\n\n.display-name-text[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n font-family: 'SF Mono', 'Consolas', monospace;\n font-size: 12px;\n color: var(--text-primary);\n}\n\n.length-value.muted[_ngcontent-%COMP%] {\n color: var(--text-muted);\n}\n\n.required-indicator[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n color: var(--danger-color);\n background: color-mix(in srgb, var(--mj-status-error) 10%, transparent);\n}\n\n.required-indicator.required[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--danger-color);\n}\n\n.required-indicator.optional[_ngcontent-%COMP%] {\n color: var(--text-muted);\n background: transparent;\n}\n\n.flag-badges[_ngcontent-%COMP%] {\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n}\n\n.flag-badge[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n background: var(--mj-status-warning);\n color: var(--mj-bg-surface);\n}\n\n.flag-badge.fk[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: white;\n}\n\n.flag-badge.encrypted[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: white;\n}\n\n.col-desc[_ngcontent-%COMP%] {\n min-width: 0;\n}\n\n.desc-text[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 32px;\n opacity: 0.5;\n}\n\n.list-empty[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n\n\n\n\n\n.stats-cards[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 16px;\n}\n\n.stat-card[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n\n.stat-card.clickable[_ngcontent-%COMP%]:hover {\n border-color: var(--accent-color);\n box-shadow: var(--shadow-md);\n transform: translateY(-2px);\n}\n\n.stat-card.clickable[_ngcontent-%COMP%]:hover .stat-card-action[_ngcontent-%COMP%] {\n opacity: 1;\n transform: translateX(0);\n}\n\n.stat-card-action[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.stat-card-header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.stat-card-body[_ngcontent-%COMP%] .stat-main[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] .stat-details[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n font-size: 12px;\n color: var(--text-muted);\n}\n\n\n\n.info-panel[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--accent-color);\n}\n\n\n\n.capability-tags[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.capability-tag[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n.capability-tag.disabled[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n}\n\n\n\n.info-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 12px;\n}\n\n.info-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.info-label[_ngcontent-%COMP%] {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--text-muted);\n}\n\n.info-value[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--text-primary);\n}\n\n.info-value.code[_ngcontent-%COMP%] {\n font-family: 'SF Mono', 'Consolas', monospace;\n font-size: 13px;\n color: var(--accent-dark);\n}\n\n\n\n\n\n\n.fields-content[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n}\n\n.field-group[_ngcontent-%COMP%] {\n border-bottom: 1px solid var(--border-light);\n}\n\n.field-group[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.group-header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n background: var(--bg-tertiary);\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--text-muted);\n width: 16px;\n transition: transform var(--transition-fast);\n}\n\n.group-icon[_ngcontent-%COMP%] {\n font-size: 16px;\n color: var(--accent-color);\n width: 20px;\n text-align: center;\n}\n\n.group-label[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n border-top: 1px solid var(--border-light);\n background: var(--bg-secondary);\n}\n\n.field-item[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.field-item[_ngcontent-%COMP%]:hover {\n background: var(--accent-light);\n}\n\n.field-item.selected[_ngcontent-%COMP%] {\n background: var(--accent-light);\n border-left: 3px solid var(--accent-color);\n padding-left: 45px;\n}\n\n.field-icon[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.field-name[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: var(--text-primary);\n}\n\n.field-db-name[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 2px;\n font-size: 12px;\n}\n\n.field-type[_ngcontent-%COMP%] {\n font-family: 'SF Mono', 'Consolas', monospace;\n color: var(--text-muted);\n}\n\n.field-nullable[_ngcontent-%COMP%] {\n color: var(--danger-color);\n}\n\n.field-related[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n color: var(--accent-color);\n cursor: pointer;\n}\n\n.field-related[_ngcontent-%COMP%]:hover {\n text-decoration: underline;\n}\n\n.field-badges[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n}\n\n.badge[_ngcontent-%COMP%] {\n padding: 2px 6px;\n border-radius: var(--radius-sm);\n font-size: 10px;\n font-weight: 600;\n}\n\n.badge.pk[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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\n\n\n\n.relationships-graph[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] mj-entity-erd[_ngcontent-%COMP%], \n.relationships-graph[_ngcontent-%COMP%] mj-erd-composite[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n flex: 1;\n}\n\n\n\n.relationships-graph[_ngcontent-%COMP%] .erd-splitter[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n}\n\n.relationships-graph[_ngcontent-%COMP%] mj-entity-details[_ngcontent-%COMP%] {\n height: 100%;\n overflow: auto;\n}\n\n.graph-placeholder[_ngcontent-%COMP%] {\n text-align: center;\n color: var(--text-muted);\n}\n\n.graph-placeholder[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 16px;\n opacity: 0.5;\n}\n\n.graph-placeholder[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n}\n\n.graph-placeholder[_ngcontent-%COMP%] .hint[_ngcontent-%COMP%] {\n font-size: 12px;\n margin-top: 8px;\n}\n\n.relationships-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n.relationship-group[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--accent-color);\n}\n\n.relationship-items[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n}\n\n.relationship-item[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.relationship-item[_ngcontent-%COMP%]:hover {\n background: var(--accent-light);\n}\n\n.relationship-item.hidden[_ngcontent-%COMP%] {\n display: none;\n}\n\n.rel-icon[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.rel-entity[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: var(--accent-color);\n cursor: pointer;\n}\n\n.rel-entity[_ngcontent-%COMP%]:hover {\n text-decoration: underline;\n}\n\n.rel-field[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--text-muted);\n margin-top: 2px;\n}\n\n.rel-meta[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.rel-type[_ngcontent-%COMP%], \n.rel-display-type[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n color: var(--success-color);\n}\n\n\n\n.relationship-group-title[_ngcontent-%COMP%] .group-count[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n padding: 8px 0;\n}\n\n.relationship-item-grouped[_ngcontent-%COMP%] {\n padding: 12px 20px;\n border-bottom: 1px solid var(--border-light);\n}\n\n.relationship-item-grouped[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.rel-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 10px;\n}\n\n.rel-icon.outgoing[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n font-size: 15px;\n font-weight: 600;\n color: var(--text-primary);\n}\n\n.rel-fields-chips[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding-left: 44px; \n\n}\n\n.field-chip[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n.field-chip.outgoing[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary);\n color: white;\n}\n\n.field-chip.incoming[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n background: var(--mj-status-success);\n color: white;\n}\n\n.field-chip[_ngcontent-%COMP%] .bundle-icon[_ngcontent-%COMP%] {\n font-size: 9px;\n margin-left: 2px;\n opacity: 0.8;\n}\n\n\n\n\n\n\n.permissions-matrix[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n width: 100%;\n border-collapse: collapse;\n}\n\n.matrix-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%], \n.matrix-table[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n padding: 12px 16px;\n text-align: left;\n border-bottom: 1px solid var(--border-light);\n}\n\n.matrix-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] th.center[_ngcontent-%COMP%], \n.matrix-table[_ngcontent-%COMP%] td.center[_ngcontent-%COMP%] {\n text-align: center;\n}\n\n.matrix-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover {\n background: var(--bg-secondary);\n}\n\n.role-name[_ngcontent-%COMP%] {\n font-weight: 500;\n color: var(--text-primary);\n}\n\n.permission-icon[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.permission-icon.granted[_ngcontent-%COMP%] {\n color: var(--success-color);\n}\n\n.permission-icon.denied[_ngcontent-%COMP%] {\n color: var(--text-muted);\n}\n\n.rls-info[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n}\n\n.rls-badge[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n color: var(--text-muted);\n font-size: 12px;\n}\n\n\n\n.api-capabilities[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 12px;\n}\n\n.capability-item[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.capability-item.enabled[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--success-color);\n}\n\n\n\n\n\n\n.lineage-diagram[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n text-align: center;\n}\n\n.lineage-stage[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.lineage-item[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--accent-color);\n}\n\n.lineage-arrow[_ngcontent-%COMP%] {\n font-size: 24px;\n color: var(--text-muted);\n}\n\n.entity-node[_ngcontent-%COMP%] .entity-box[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] .entity-box[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 24px;\n}\n\n.tracking-config[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 12px;\n}\n\n.config-item[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] .config-label[_ngcontent-%COMP%] {\n color: var(--text-muted);\n}\n\n.config-item[_ngcontent-%COMP%] .config-value[_ngcontent-%COMP%] {\n font-weight: 500;\n color: var(--text-primary);\n}\n\n\n\n\n\n\n.history-config[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n}\n\n.config-status[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 24px;\n color: var(--text-muted);\n margin-top: 2px;\n}\n\n.config-status.enabled[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--success-color);\n}\n\n.config-text[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n display: block;\n font-size: 16px;\n color: var(--text-primary);\n margin-bottom: 4px;\n}\n\n.config-text[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--text-secondary);\n}\n\n.history-info[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 16px;\n}\n\n.info-card[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--accent-color);\n}\n\n.info-card[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--text-secondary);\n line-height: 1.6;\n margin: 0;\n}\n\n.info-card[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.audit-fields-list[_ngcontent-%COMP%] li[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] li[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n\n\n\n\n\n.settings-panel[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.setting-item[_ngcontent-%COMP%] {\n padding: 12px;\n background: var(--bg-tertiary);\n border-radius: var(--radius-md);\n}\n\n.setting-name[_ngcontent-%COMP%] {\n font-weight: 500;\n color: var(--text-primary);\n margin-bottom: 4px;\n}\n\n.setting-value[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%] {\n display: block;\n max-height: 300px;\n}\n\n.setting-value-json[_ngcontent-%COMP%] .cm-editor {\n font-size: 12px;\n background: var(--mj-bg-surface-sunken);\n}\n\n.setting-value-json[_ngcontent-%COMP%] .cm-gutters {\n background: var(--mj-bg-surface-sunken);\n border-right: 1px solid var(--border-color);\n}\n\n.setting-comment[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--text-muted);\n margin-top: 8px;\n}\n\n.fts-config[_ngcontent-%COMP%], \n.settings-section[_ngcontent-%COMP%] .config-grid[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.config-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.config-row[_ngcontent-%COMP%] .config-label[_ngcontent-%COMP%] {\n width: 100px;\n font-size: 12px;\n color: var(--text-muted);\n}\n\n.config-row[_ngcontent-%COMP%] .config-value[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--text-primary);\n}\n\n.config-row[_ngcontent-%COMP%] .config-value.code[_ngcontent-%COMP%] {\n font-family: 'SF Mono', 'Consolas', monospace;\n font-size: 12px;\n color: var(--accent-dark);\n}\n\n.config-row[_ngcontent-%COMP%] .config-value.enabled[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--success-color);\n}\n\n\n\n\n\n\n.detail-panel[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n transform: translateX(0);\n}\n\n.panel-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--border-color);\n flex-shrink: 0;\n}\n\n.panel-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--text-primary);\n}\n\n.close-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n background: var(--bg-tertiary);\n color: var(--text-primary);\n}\n\n.panel-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n}\n\n.detail-section[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n}\n\n.detail-section[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n\n.detail-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 600;\n color: var(--text-primary);\n margin: 0 0 8px 0;\n}\n\n.detail-section[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--text-secondary);\n line-height: 1.5;\n margin: 0;\n}\n\n.detail-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 12px;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.detail-item[_ngcontent-%COMP%] .label[_ngcontent-%COMP%] {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--text-muted);\n}\n\n.detail-item[_ngcontent-%COMP%] .value[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--text-primary);\n}\n\n.detail-item[_ngcontent-%COMP%] .value.code[_ngcontent-%COMP%] {\n font-family: 'SF Mono', 'Consolas', monospace;\n font-size: 12px;\n color: var(--accent-dark);\n}\n\n.detail-item[_ngcontent-%COMP%] .value.link[_ngcontent-%COMP%] {\n color: var(--accent-color);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n}\n\n.detail-item[_ngcontent-%COMP%] .value.link[_ngcontent-%COMP%]:hover {\n text-decoration: underline;\n}\n\n.value-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n max-height: 200px;\n overflow-y: auto;\n}\n\n.value-item[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n color: var(--text-primary);\n}\n\n\n\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n text-align: center;\n color: var(--text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 32px;\n margin-bottom: 12px;\n opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n}\n\n\n\n\n\n\n.explorer-loading[_ngcontent-%COMP%], \n.explorer-error[_ngcontent-%COMP%], \n.explorer-empty[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.explorer-empty[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 16px;\n opacity: 0.5;\n}\n\n.explorer-error[_ngcontent-%COMP%] {\n color: var(--danger-color);\n}\n\n.explorer-error[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n opacity: 1;\n}\n\n\n\n\n\n\n\n\n.isa-badge[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 22%, transparent);\n}\n\n.isa-badge.parent-type[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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\n\n.isa-breadcrumb[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n opacity: 0.7;\n}\n\n\n\n.isa-panel[_ngcontent-%COMP%] {\n border-left: 3px solid var(--mj-brand-primary);\n}\n\n.isa-info-row[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 6%, transparent);\n}\n\n.isa-info-row.virtual-info[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.isa-info-row[_ngcontent-%COMP%] .code[_ngcontent-%COMP%] {\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\n\n.isa-chain[_ngcontent-%COMP%] {\n padding: 8px 0;\n}\n\n.isa-chain-label[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n padding: 6px 0;\n}\n\n.isa-node[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: white;\n}\n\n.isa-node.parent[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n color: var(--text-muted);\n font-size: 11px;\n}\n\n.isa-inherited-fields[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-brand-primary);\n}\n\n\n\n.isa-children[_ngcontent-%COMP%] {\n padding: 8px 0;\n}\n\n.isa-child-list[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n padding: 4px 0;\n}\n\n.isa-child-chip[_ngcontent-%COMP%] {\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\n\n.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.clickable[_ngcontent-%COMP%]:hover {\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.isa-node.parent.clickable[_ngcontent-%COMP%]: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[_ngcontent-%COMP%]: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\n\n.badge.inherited[_ngcontent-%COMP%], \n.flag-badge.inherited[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 9px;\n}\n\n\n\n.isa-source-section[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.isa-source-section[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 4px;\n}\n\n\n\n.isa-settings-panel[_ngcontent-%COMP%] {\n border-left: 3px solid var(--mj-brand-primary);\n}\n\n.isa-settings-panel[_ngcontent-%COMP%] .link[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n cursor: pointer;\n transition: color 0.15s ease;\n}\n\n.isa-settings-panel[_ngcontent-%COMP%] .link[_ngcontent-%COMP%]:hover {\n color: var(--mj-brand-primary);\n text-decoration: underline;\n}\n\n.isa-settings-panel[_ngcontent-%COMP%] .muted[_ngcontent-%COMP%] {\n color: var(--text-muted);\n}\n\n\n\n.isa-field-inspector[_ngcontent-%COMP%] {\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px solid var(--border-color);\n}\n\n.isa-field-inspector[_ngcontent-%COMP%] > .isa-chain-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.isa-inspector-groups[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-top: 8px;\n}\n\n.isa-inspector-group[_ngcontent-%COMP%] {\n border-radius: 6px;\n padding: 8px 12px;\n border: 1px solid var(--border-color);\n}\n\n.isa-inspector-group.own[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 6px;\n}\n\n.isa-inspector-entity[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--text-muted);\n font-weight: 500;\n}\n\n.isa-inspector-fields[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n}\n\n.isa-inspector-field[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--text-muted);\n font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;\n}\n\n\n\n.isa-siblings[_ngcontent-%COMP%] {\n padding: 8px 0;\n}\n\n.isa-sibling-chip[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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\n\n.isa-child-count[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n\n\n\n\n.data-section[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 0;\n overflow: hidden;\n}\n\n\n\n\n\n\n.organic-key-cards[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 4px 0;\n}\n\n.organic-key-card[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-border-strong);\n}\n\n.organic-key-card.incoming[_ngcontent-%COMP%] {\n border-left: 3px solid var(--mj-brand-primary);\n}\n\n.organic-key-card-header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.organic-key-badges[_ngcontent-%COMP%] {\n display: flex;\n gap: 6px;\n flex-shrink: 0;\n}\n\n.organic-key-badge[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.organic-key-target[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%], \n.organic-key-card.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n\n.organic-key-target.clickable[_ngcontent-%COMP%]:hover, \n.organic-key-card.clickable[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.target-main[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n min-width: 0;\n flex: 1;\n}\n\n.target-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.target-entity-icon[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-muted);\n width: 16px;\n text-align: center;\n}\n\n.target-entity-name[_ngcontent-%COMP%] {\n font-weight: 500;\n color: var(--mj-text-primary);\n min-width: 0;\n}\n\n.target-nav-icon[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover .target-nav-icon[_ngcontent-%COMP%], \n.organic-key-card.clickable[_ngcontent-%COMP%]:hover .target-nav-icon[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.target-match-detail[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding-left: 24px;\n}\n\n.match-type-badge[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 4px 0;\n font-size: 12px;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-weight: 500;\n flex-shrink: 0;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.empty-state-card[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 16px;\n opacity: 0.3;\n}\n\n.empty-state-card[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 13px;\n line-height: 1.5;\n max-width: 500px;\n margin: 0;\n}", ".k-pane[_ngcontent-%COMP%] {\n background-color: var(--mj-bg-surface);\n}\n\n.content-margin[_ngcontent-%COMP%] {\n margin: 10px;\n}\n\n\na[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: bolder;\n}\n\n.tab-header-icon[_ngcontent-%COMP%] {\n margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] {\n display: block;\n flex-direction: column;\n background-color: var(--mj-bg-surface);\n padding: 0;\n min-height: 100vh;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n margin-top: 0px;\n background-color: var(--mj-bg-surface);\n}\n\nbutton[_ngcontent-%COMP%] {\n margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n margin-bottom: 10px;\n}\n\n.k-splitter[_ngcontent-%COMP%] {\n border-width: 0px;\n}\n\n.record-form-row[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: start;\n gap: 10px;\n margin-bottom: 12px;\n padding-top: 5px;\n padding-bottom: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] .record-form-row[_ngcontent-%COMP%] > [_ngcontent-%COMP%]:first-child {\n font-weight: bold;\n padding-right: 10px;\n}\n\n.record-form[_ngcontent-%COMP%] .record-form-row[_ngcontent-%COMP%] > span[_ngcontent-%COMP%] {\n white-space: pre-line;\n max-height: 300px;\n overflow: auto;\n}\n\n@media (min-width: 768px) {\n .record-form-row[_ngcontent-%COMP%] {\n flex-direction: row;\n align-items: center;\n }\n\n .record-form-row[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n width: 240px;\n margin-bottom: 0;\n }\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 16px;\n background-color: var(--mj-bg-surface);\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%] > .form-card[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%] .related-entity-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr;\n gap: 16px;\n width: 100%;\n}\n\n\n\n@media (min-width: 1400px) {\n .form-panels-container[_ngcontent-%COMP%] .related-entity-grid[_ngcontent-%COMP%] {\n grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n }\n}\n\n.form-card[_ngcontent-%COMP%] {\n background: 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[_ngcontent-%COMP%] {\n overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 24px;\n background: 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[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n}\n\n.collapsible-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 20px;\n color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.collapsible-header[_ngcontent-%COMP%] .collapse-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n transition: transform 0.3s ease;\n}\n\n.collapsible-body[_ngcontent-%COMP%] {\n max-height: 2000px;\n overflow: hidden;\n transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n opacity: 1;\n}\n\n.collapsible-body.collapsed[_ngcontent-%COMP%] {\n max-height: 0;\n padding: 0;\n opacity: 0;\n}\n\n.form-body[_ngcontent-%COMP%] {\n padding: 24px;\n}\n\n\n\n.form-card.related-entity[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%] .collapsible-header[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%] .collapsible-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-card);\n border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%] .collapsible-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n\n\n.form-section-controls[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] .control-group[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n.form-section-controls[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n padding: 8px 14px;\n font-size: 13px;\n border: 1px solid 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[_ngcontent-%COMP%] button[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:active {\n transform: translateY(0);\n}\n\n.form-section-controls[_ngcontent-%COMP%] button[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 0;\n font-size: 14px;\n}\n\n.form-section-controls[_ngcontent-%COMP%] .section-search[_ngcontent-%COMP%] {\n padding: 8px 14px;\n font-size: 13px;\n border: 1px solid 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[_ngcontent-%COMP%] .section-search[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls[_ngcontent-%COMP%] .section-search[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n.form-section-controls[_ngcontent-%COMP%] .section-count[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-muted);\n margin-left: auto;\n font-weight: 500;\n}\n\n\n\n.form-card.search-hidden[_ngcontent-%COMP%] {\n display: none;\n}\n\n\n\n.section-count-badge[_ngcontent-%COMP%] {\n background: 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\n\n.collapsible-title[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] .search-highlight[_ngcontent-%COMP%] {\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\n\n.collapsible-title[_ngcontent-%COMP%] .row-count-badge[_ngcontent-%COMP%] {\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\n\n.collapsible-title[_ngcontent-%COMP%] .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n background: var(--mj-text-muted);\n}"], changeDetection: 0 }); }
3581
3581
  };
3582
3582
  MJEntityFormComponentExtended = __decorate([
3583
3583
  RegisterClass(BaseFormComponent, 'MJ: Entities')
@@ -3585,7 +3585,7 @@ MJEntityFormComponentExtended = __decorate([
3585
3585
  export { MJEntityFormComponentExtended };
3586
3586
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJEntityFormComponentExtended, [{
3587
3587
  type: Component,
3588
- 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>\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 kendo-splitter-pane {\n display: flex;\n flex-direction: column;\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/* ============================================================\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"] }]
3588
+ 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>\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/* ============================================================\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"] }]
3589
3589
  }], null, null); })();
3590
3590
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJEntityFormComponentExtended, { className: "MJEntityFormComponentExtended", filePath: "src/lib/custom/Entities/entity-form.component.ts", lineNumber: 155 }); })();
3591
3591
  //# sourceMappingURL=entity-form.component.js.map